Skip to content

Commit f00a15a

Browse files
KeavonKeavon
authored
Clean up Gradient and Color classes in TS by removing their methods (#3857)
1 parent 5834ee9 commit f00a15a

File tree

6 files changed

+249
-289
lines changed

6 files changed

+249
-289
lines changed

‎frontend/src/components/floating-menus/ColorPicker.svelte‎

Lines changed: 55 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,25 @@
22
import { getContext, onDestroy, createEventDispatcher, tick } from "svelte";
33
44
import type { HSV, RGB, FillChoice, MenuDirection } from "@graphite/messages";
5-
import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
5+
import {
6+
type Color,
7+
contrastingOutlineFactor,
8+
isColor,
9+
isGradient,
10+
createColor,
11+
createNoneColor,
12+
createColorFromHSVA,
13+
colorFromCSS,
14+
colorToRgb255,
15+
colorToHSVA,
16+
colorToHexOptionalAlpha,
17+
colorToHexNoAlpha,
18+
colorToRgbCSS,
19+
colorContrastingColor,
20+
colorOpaque,
21+
colorEquals,
22+
gradientFirstColor,
23+
} from "@graphite/messages";
624
import type { TooltipState } from "@graphite/state-providers/tooltip";
725
import { clamp } from "@graphite/utility-functions/math";
826
import { isDesktop } from "@graphite/utility-functions/platform";
@@ -51,16 +69,17 @@
5169
// TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed
5270
export let open: boolean;
5371
54-
const hsvaOrNone = colorOrGradient instanceof Color ? colorOrGradient.toHSVA() : colorOrGradient.firstColor()?.toHSVA();
72+
const colorForHSVA = isColor(colorOrGradient) ? colorOrGradient : gradientFirstColor(colorOrGradient);
73+
const hsvaOrNone = colorForHSVA ? colorToHSVA(colorForHSVA) : undefined;
5574
const hsva = hsvaOrNone || { h: 0, s: 0, v: 0, a: 1 };
5675
5776
// Gradient color stops
58-
$: gradient = colorOrGradient instanceof Gradient ? colorOrGradient : undefined;
77+
$: gradient = isGradient(colorOrGradient) ? colorOrGradient : undefined;
5978
let activeIndex = 0 as number | undefined;
6079
let activeIndexIsMidpoint = false;
61-
$: selectedGradientColor = (activeIndex !== undefined && gradient?.color[activeIndex]) || (Color.fromCSS("black") as Color);
80+
$: selectedGradientColor = (activeIndex !== undefined && gradient?.color[activeIndex]) || (colorFromCSS("black") as Color);
6281
// Currently viewed color
63-
$: color = colorOrGradient instanceof Color ? colorOrGradient : selectedGradientColor;
82+
$: color = isColor(colorOrGradient) ? colorOrGradient : selectedGradientColor;
6483
// New color components
6584
let hue = hsva.h;
6685
let saturation = hsva.s;
@@ -97,16 +116,16 @@
97116
98117
$: oldColor = generateColor(oldHue, oldSaturation, oldValue, oldAlpha, oldIsNone);
99118
$: newColor = generateColor(hue, saturation, value, alpha, isNone);
100-
$: rgbChannels = Object.entries(newColor.toRgb255() || { r: undefined, g: undefined, b: undefined }) as [keyof RGB, number | undefined][];
119+
$: rgbChannels = Object.entries(colorToRgb255(newColor) || { r: undefined, g: undefined, b: undefined }) as [keyof RGB, number | undefined][];
101120
$: hsvChannels = Object.entries(!isNone ? { h: hue * 360, s: saturation * 100, v: value * 100 } : { h: undefined, s: undefined, v: undefined }) as [keyof HSV, number | undefined][];
102-
$: opaqueHueColor = new Color({ h: hue, s: 1, v: 1, a: 1 });
121+
$: opaqueHueColor = createColorFromHSVA(hue, 1, 1, 1);
103122
$: outlineFactor = Math.max(contrastingOutlineFactor(newColor, "--color-2-mildblack", 0.01), contrastingOutlineFactor(oldColor, "--color-2-mildblack", 0.01));
104123
$: outlined = outlineFactor > 0.0001;
105124
$: transparency = newColor.alpha < 1 || oldColor.alpha < 1;
106125
107126
function generateColor(h: number, s: number, v: number, a: number, none: boolean) {
108-
if (none) return new Color("none");
109-
return new Color({ h, s, v, a });
127+
if (none) return createNoneColor();
128+
return createColorFromHSVA(h, s, v, a);
110129
}
111130
112131
async function watchOpen(open: boolean) {
@@ -119,7 +138,7 @@
119138
}
120139
121140
function watchColor(color: Color) {
122-
const hsva = color.toHSVA();
141+
const hsva = colorToHSVA(color);
123142
124143
if (hsva === undefined) {
125144
setNewHSVA(0, 0, 0, 1, true);
@@ -185,7 +204,7 @@
185204
strayCloses = false;
186205
}
187206
188-
const color = new Color({ h: hue, s: saturation, v: value, a: alpha });
207+
const color = createColorFromHSVA(hue, saturation, value, alpha);
189208
setColor(color);
190209
191210
if (!e.shiftKey) {
@@ -226,7 +245,7 @@
226245
saturation = saturationRestoreWhenShiftReleased;
227246
value = valueRestoreWhenShiftReleased;
228247
229-
const color = new Color({ h: hue, s: saturation, v: value, a: alpha });
248+
const color = createColorFromHSVA(hue, saturation, value, alpha);
230249
setColor(color);
231250
}
232251
}
@@ -282,14 +301,14 @@
282301
value = valueBeforeDrag;
283302
alpha = alphaBeforeDrag;
284303
285-
const color = new Color({ h: hue, s: saturation, v: value, a: alpha });
304+
const color = createColorFromHSVA(hue, saturation, value, alpha);
286305
setColor(color);
287306
}
288307
289308
function setColor(color?: Color) {
290-
const colorToEmit = color || new Color({ h: hue, s: saturation, v: value, a: alpha });
309+
const colorToEmit = color || createColorFromHSVA(hue, saturation, value, alpha);
291310
292-
if (gradientSpectrumInputWidget && activeIndex !== undefined && gradient?.position[activeIndex] !== undefined && colorOrGradient instanceof Gradient) {
311+
if (gradientSpectrumInputWidget && activeIndex !== undefined && gradient?.position[activeIndex] !== undefined && isGradient(colorOrGradient)) {
293312
colorOrGradient.color[activeIndex] = colorToEmit;
294313
}
295314
@@ -312,17 +331,17 @@
312331
}
313332
314333
function setColorCode(colorCode: string) {
315-
const color = Color.fromCSS(colorCode);
334+
const color = colorFromCSS(colorCode);
316335
if (color) setColor(color);
317336
}
318337
319338
function setColorRGB(channel: keyof RGB, strength: number | undefined) {
320339
// Do nothing if the given value is undefined
321340
if (strength === undefined) return undefined;
322341
// Set the specified channel to the given value
323-
else if (channel === "r") setColor(new Color(strength / 255, newColor.green, newColor.blue, newColor.alpha));
324-
else if (channel === "g") setColor(new Color(newColor.red, strength / 255, newColor.blue, newColor.alpha));
325-
else if (channel === "b") setColor(new Color(newColor.red, newColor.green, strength / 255, newColor.alpha));
342+
else if (channel === "r") setColor(createColor(strength / 255, newColor.green, newColor.blue, newColor.alpha));
343+
else if (channel === "g") setColor(createColor(newColor.red, strength / 255, newColor.blue, newColor.alpha));
344+
else if (channel === "b") setColor(createColor(newColor.red, newColor.green, strength / 255, newColor.alpha));
326345
}
327346
328347
function setColorHSV(channel: keyof HSV, strength: number | undefined) {
@@ -353,10 +372,10 @@
353372
354373
if (preset === "none") {
355374
setNewHSVA(0, 0, 0, 1, true);
356-
setColor(new Color("none"));
375+
setColor(createNoneColor());
357376
} else {
358-
const presetColor = new Color(...PURE_COLORS[preset], 1);
359-
const hsva = presetColor.toHSVA() || { h: 0, s: 0, v: 0, a: 0 };
377+
const presetColor = createColor(...PURE_COLORS[preset], 1);
378+
const hsva = colorToHSVA(presetColor) || { h: 0, s: 0, v: 0, a: 0 };
360379
361380
setNewHSVA(hsva.h, hsva.s, hsva.v, hsva.a, false);
362381
setColor(presetColor);
@@ -406,7 +425,7 @@
406425
activeIndexIsMidpoint = activeMarkerIsMidpoint;
407426
408427
const color = activeMarkerIndex === undefined ? undefined : gradient?.color[activeMarkerIndex];
409-
const hsva = color?.toHSVA();
428+
const hsva = color ? colorToHSVA(color) : undefined;
410429
if (!color || !hsva) return;
411430
412431
setColor(color);
@@ -427,14 +446,14 @@
427446
<FloatingMenu class="color-picker" classes={{ disabled }} {open} on:open {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
428447
<LayoutRow
429448
styles={{
430-
"--new-color": newColor.toHexOptionalAlpha(),
431-
"--new-color-contrasting": newColor.contrastingColor(),
432-
"--old-color": oldColor.toHexOptionalAlpha(),
433-
"--old-color-contrasting": oldColor.contrastingColor(),
434-
"--hue-color": opaqueHueColor.toRgbCSS(),
435-
"--hue-color-contrasting": opaqueHueColor.contrastingColor(),
436-
"--opaque-color": (newColor.opaque() || new Color(0, 0, 0, 1)).toHexNoAlpha(),
437-
"--opaque-color-contrasting": (newColor.opaque() || new Color(0, 0, 0, 1)).contrastingColor(),
449+
"--new-color": colorToHexOptionalAlpha(newColor),
450+
"--new-color-contrasting": colorContrastingColor(newColor),
451+
"--old-color": colorToHexOptionalAlpha(oldColor),
452+
"--old-color-contrasting": colorContrastingColor(oldColor),
453+
"--hue-color": colorToRgbCSS(opaqueHueColor),
454+
"--hue-color-contrasting": colorContrastingColor(opaqueHueColor),
455+
"--opaque-color": colorToHexNoAlpha(colorOpaque(newColor) || createColor(0, 0, 0, 1)),
456+
"--opaque-color-contrasting": colorContrastingColor(colorOpaque(newColor) || createColor(0, 0, 0, 1)),
438457
}}
439458
>
440459
{@const hueDescription = "The shade along the spectrum of the rainbow."}
@@ -528,18 +547,18 @@
528547
class="choice-preview"
529548
classes={{ outlined, transparency }}
530549
styles={{ "--outline-amount": outlineFactor }}
531-
tooltipDescription={!newColor.equals(oldColor) ? "Comparison between the present color choice (left) and the color before it was changed (right)." : "The present color choice."}
550+
tooltipDescription={!colorEquals(newColor, oldColor) ? "Comparison between the present color choice (left) and the color before it was changed (right)." : "The present color choice."}
532551
>
533-
{#if !newColor.equals(oldColor) && !disabled}
552+
{#if !colorEquals(newColor, oldColor) && !disabled}
534553
<div class="swap-button-background"></div>
535554
<IconButton class="swap-button" icon="SwapHorizontal" size={16} action={swapNewWithOld} tooltipLabel="Swap" />
536555
{/if}
537556
<LayoutCol class="new-color" classes={{ none: isNone }}>
538-
{#if !newColor.equals(oldColor)}
557+
{#if !colorEquals(newColor, oldColor)}
539558
<TextLabel>New</TextLabel>
540559
{/if}
541560
</LayoutCol>
542-
{#if !newColor.equals(oldColor)}
561+
{#if !colorEquals(newColor, oldColor)}
543562
<LayoutCol class="old-color" classes={{ none: oldIsNone }}>
544563
<TextLabel>Old</TextLabel>
545564
</LayoutCol>
@@ -552,7 +571,7 @@
552571
<Separator style="Related" />
553572
<LayoutRow>
554573
<TextInput
555-
value={newColor.toHexOptionalAlpha() || "-"}
574+
value={colorToHexOptionalAlpha(newColor) || "-"}
556575
{disabled}
557576
on:commitText={({ detail }) => {
558577
dispatch("startHistoryTransaction");

‎frontend/src/components/panels/Document.svelte‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
type MenuDirection,
77
type MouseCursorIcon,
88
type XY,
9-
Color,
9+
type Color,
10+
isColor,
11+
createColor,
12+
colorToHexOptionalAlpha,
1013
DisplayEditableTextbox,
1114
DisplayEditableTextboxUpdateFontData,
1215
DisplayEditableTextboxTransform,
@@ -360,7 +363,7 @@
360363
textInput.style.height = height;
361364
textInput.style.lineHeight = `${data.lineHeightRatio}`;
362365
textInput.style.fontSize = `${data.fontSize}px`;
363-
textInput.style.color = data.color.toHexOptionalAlpha() || "transparent";
366+
textInput.style.color = colorToHexOptionalAlpha(data.color) || "transparent";
364367
textInput.style.textAlign = data.align;
365368
366369
textInput.oninput = () => {
@@ -609,9 +612,9 @@
609612
gradientStopPickerColor = undefined;
610613
}
611614
}}
612-
colorOrGradient={gradientStopPickerColor || new Color()}
615+
colorOrGradient={gradientStopPickerColor || createColor(0, 0, 0, 1)}
613616
on:colorOrGradient={({ detail }) => {
614-
if (detail instanceof Color) {
617+
if (isColor(detail)) {
615618
editor.handle.updateGradientStopColor(detail.red, detail.green, detail.blue, detail.alpha);
616619
}
617620
}}

‎frontend/src/components/widgets/inputs/ColorInput.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { createEventDispatcher } from "svelte";
33
44
import type { FillChoice, MenuDirection, ActionShortcut } from "@graphite/messages";
5-
import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
5+
import { type Color, contrastingOutlineFactor, isColor, isGradient, colorToHexOptionalAlpha, gradientToLinearGradientCSS } from "@graphite/messages";
66
77
import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
88
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -26,9 +26,9 @@
2626
2727
$: outlineFactor = contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01);
2828
$: outlined = outlineFactor > 0.0001;
29-
$: chosenGradient = value instanceof Gradient ? value.toLinearGradientCSS() : `linear-gradient(${value.toHexOptionalAlpha()}, ${value.toHexOptionalAlpha()})`;
30-
$: none = value instanceof Color ? value.none : false;
31-
$: transparency = value instanceof Gradient ? value.color.some((color) => color.alpha < 1) : value.alpha < 1;
29+
$: chosenGradient = isGradient(value) ? gradientToLinearGradientCSS(value) : `linear-gradient(${colorToHexOptionalAlpha(value)}, ${colorToHexOptionalAlpha(value)})`;
30+
$: none = isColor(value) ? value.none : false;
31+
$: transparency = isGradient(value) ? value.color.some((color: Color) => color.alpha < 1) : value.alpha < 1;
3232
</script>
3333

3434
<LayoutCol class="color-button" classes={{ open, disabled, narrow, none, transparency, outlined, "direction-top": menuDirection === "Top" }} {tooltipLabel} {tooltipDescription} {tooltipShortcut}>

‎frontend/src/components/widgets/inputs/SpectrumInput.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import { createEventDispatcher, onDestroy } from "svelte";
88
99
import { evaluateGradientAtPosition } from "@graphite/../wasm/pkg/graphite_wasm";
10-
import { Color, type Gradient } from "@graphite/messages";
10+
import { type Color, type Gradient, createColor, colorToHexOptionalAlpha, colorToRgbCSS, gradientFirstColor, gradientLastColor, gradientToLinearGradientCSS } from "@graphite/messages";
1111
1212
import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
1313
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -115,7 +115,7 @@
115115
// Determine the color of the new stop by evaluating the gradient at the position of the new stop
116116
type ReturnedColor = { red: number; green: number; blue: number; alpha: number };
117117
const evaluated = evaluateGradientAtPosition(position, new Float64Array(gradient.position), new Float64Array(gradient.midpoint), gradient.color) as ReturnedColor;
118-
const color = new Color(evaluated.red, evaluated.green, evaluated.blue, evaluated.alpha);
118+
const color = createColor(evaluated.red, evaluated.green, evaluated.blue, evaluated.alpha);
119119
120120
// Insert the new stop into the gradient
121121
gradient.position.splice(index, 0, position);
@@ -368,9 +368,9 @@
368368
class="spectrum-input"
369369
classes={{ disabled }}
370370
styles={{
371-
"--gradient-start": gradient.firstColor()?.toHexOptionalAlpha() || "black",
372-
"--gradient-end": gradient.lastColor()?.toHexOptionalAlpha() || "black",
373-
"--gradient-stops": gradient.toLinearGradientCSS(),
371+
"--gradient-start": ((color) => (color ? colorToHexOptionalAlpha(color) : "black"))(gradientFirstColor(gradient)),
372+
"--gradient-end": ((color) => (color ? colorToHexOptionalAlpha(color) : "black"))(gradientLastColor(gradient)),
373+
"--gradient-stops": gradientToLinearGradientCSS(gradient),
374374
}}
375375
>
376376
<LayoutRow class="gradient-strip" on:pointerdown={insertStop}></LayoutRow>
@@ -396,7 +396,7 @@
396396
class="marker"
397397
class:active={index === activeMarkerIndex && !activeMarkerIsMidpoint}
398398
style:--marker-position={marker.position}
399-
style:--marker-color={marker.color.toRgbCSS()}
399+
style:--marker-color={colorToRgbCSS(marker.color)}
400400
on:pointerdown={(e) => markerPointerDown(e, index)}
401401
data-gradient-marker
402402
xmlns="http://www.w3.org/2000/svg"

‎frontend/src/components/widgets/inputs/WorkingColorsInput.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { getContext } from "svelte";
33
44
import type { Editor } from "@graphite/editor";
5-
import { Color } from "@graphite/messages";
5+
import { type Color, isColor, colorToRgbaCSS } from "@graphite/messages";
66
77
import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
88
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -38,22 +38,22 @@
3838

3939
<LayoutCol class="working-colors-button">
4040
<LayoutRow class="primary swatch">
41-
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
41+
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={colorToRgbaCSS(primary)} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
4242
<ColorPicker
4343
open={primaryOpen}
4444
on:open={({ detail }) => (primaryOpen = detail)}
4545
colorOrGradient={primary}
46-
on:colorOrGradient={({ detail }) => detail instanceof Color && primaryColorChanged(detail)}
46+
on:colorOrGradient={({ detail }) => isColor(detail) && primaryColorChanged(detail)}
4747
direction="Right"
4848
/>
4949
</LayoutRow>
5050
<LayoutRow class="secondary swatch">
51-
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
51+
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={colorToRgbaCSS(secondary)} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
5252
<ColorPicker
5353
open={secondaryOpen}
5454
on:open={({ detail }) => (secondaryOpen = detail)}
5555
colorOrGradient={secondary}
56-
on:colorOrGradient={({ detail }) => detail instanceof Color && secondaryColorChanged(detail)}
56+
on:colorOrGradient={({ detail }) => isColor(detail) && secondaryColorChanged(detail)}
5757
direction="Right"
5858
/>
5959
</LayoutRow>

0 commit comments

Comments
 (0)