fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 15:58:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Clean up Gradient and Color classes in TS by removing their methods (#3857)

Browse Source
This commit is contained in:
Keavon Chambers
2026-03-04 02:39:07 -08:00
committed by GitHub
parent 5834ee9ce4
commit f00a15a4c9
6 changed files with 274 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/inputs/ColorInput.svelte
+4 -4
View File
@@ -2,7 +2,7 @@
import { createEventDispatcher } from "svelte";
import type { FillChoice, MenuDirection, ActionShortcut } from "@graphite/messages";
import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
import { type Color, contrastingOutlineFactor, isColor, isGradient, colorToHexOptionalAlpha, gradientToLinearGradientCSS } from "@graphite/messages";
import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -26,9 +26,9 @@
$: outlineFactor = contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01);
$: outlined = outlineFactor > 0.0001;
$: chosenGradient = value instanceof Gradient ? value.toLinearGradientCSS() : `linear-gradient(${value.toHexOptionalAlpha()}, ${value.toHexOptionalAlpha()})`;
$: none = value instanceof Color ? value.none : false;
$: transparency = value instanceof Gradient ? value.color.some((color) => color.alpha < 1) : value.alpha < 1;
$: chosenGradient = isGradient(value) ? gradientToLinearGradientCSS(value) : `linear-gradient(${colorToHexOptionalAlpha(value)}, ${colorToHexOptionalAlpha(value)})`;
$: none = isColor(value) ? value.none : false;
$: transparency = isGradient(value) ? value.color.some((color: Color) => color.alpha < 1) : value.alpha < 1;
</script>
<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
+6 -6
View File
@@ -7,7 +7,7 @@
import { createEventDispatcher, onDestroy } from "svelte";
import { evaluateGradientAtPosition } from "@graphite/../wasm/pkg/graphite_wasm";
import { Color, type Gradient } from "@graphite/messages";
import { type Color, type Gradient, createColor, colorToHexOptionalAlpha, colorToRgbCSS, gradientFirstColor, gradientLastColor, gradientToLinearGradientCSS } from "@graphite/messages";
import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -115,7 +115,7 @@
// Determine the color of the new stop by evaluating the gradient at the position of the new stop
type ReturnedColor = { red: number; green: number; blue: number; alpha: number };
const evaluated = evaluateGradientAtPosition(position, new Float64Array(gradient.position), new Float64Array(gradient.midpoint), gradient.color) as ReturnedColor;
const color = new Color(evaluated.red, evaluated.green, evaluated.blue, evaluated.alpha);
const color = createColor(evaluated.red, evaluated.green, evaluated.blue, evaluated.alpha);
// Insert the new stop into the gradient
gradient.position.splice(index, 0, position);
@@ -368,9 +368,9 @@
class="spectrum-input"
classes={{ disabled }}
styles={{
"--gradient-start": gradient.firstColor()?.toHexOptionalAlpha() || "black",
"--gradient-end": gradient.lastColor()?.toHexOptionalAlpha() || "black",
"--gradient-stops": gradient.toLinearGradientCSS(),
"--gradient-start": ((color) => (color ? colorToHexOptionalAlpha(color) : "black"))(gradientFirstColor(gradient)),
"--gradient-end": ((color) => (color ? colorToHexOptionalAlpha(color) : "black"))(gradientLastColor(gradient)),
"--gradient-stops": gradientToLinearGradientCSS(gradient),
}}
>
<LayoutRow class="gradient-strip" on:pointerdown={insertStop}></LayoutRow>
@@ -396,7 +396,7 @@
class="marker"
class:active={index === activeMarkerIndex && !activeMarkerIsMidpoint}
style:--marker-position={marker.position}
style:--marker-color={marker.color.toRgbCSS()}
style:--marker-color={colorToRgbCSS(marker.color)}
on:pointerdown={(e) => markerPointerDown(e, index)}
data-gradient-marker
xmlns="http://www.w3.org/2000/svg"
frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
+5 -5
View File
@@ -2,7 +2,7 @@
import { getContext } from "svelte";
import type { Editor } from "@graphite/editor";
import { Color } from "@graphite/messages";
import { type Color, isColor, colorToRgbaCSS } from "@graphite/messages";
import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -38,22 +38,22 @@
<LayoutCol class="working-colors-button">
<LayoutRow class="primary swatch">
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={colorToRgbaCSS(primary)} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<ColorPicker
open={primaryOpen}
on:open={({ detail }) => (primaryOpen = detail)}
colorOrGradient={primary}
on:colorOrGradient={({ detail }) => detail instanceof Color && primaryColorChanged(detail)}
on:colorOrGradient={({ detail }) => isColor(detail) && primaryColorChanged(detail)}
direction="Right"
/>
</LayoutRow>
<LayoutRow class="secondary swatch">
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={colorToRgbaCSS(secondary)} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<ColorPicker
open={secondaryOpen}
on:open={({ detail }) => (secondaryOpen = detail)}
colorOrGradient={secondary}
on:colorOrGradient={({ detail }) => detail instanceof Color && secondaryColorChanged(detail)}
on:colorOrGradient={({ detail }) => isColor(detail) && secondaryColorChanged(detail)}
direction="Right"
/>
</LayoutRow>