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

Deprecate all usages of the Color struct representing gamma space values, fixing round-trip precision bugs (#4149)

Browse Source 
* Deprecate all usages of the Color struct representing gamma space values, fixing round-trip precision bugs

* Code review fixes
This commit is contained in:
Keavon Chambers
2026-05-14 22:48:33 -07:00
committed by GitHub
parent 456a7c868d
commit a56746c6bf
67 changed files with 1210 additions and 941 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/floating-menus/ColorPicker.svelte
+3 -3
View File
@@ -5,14 +5,14 @@
import LayoutRow from "/src/components/layout/LayoutRow.svelte";
import WidgetLayout from "/src/components/widgets/WidgetLayout.svelte";
import type { ColorPickerCallbacks, ColorPickerStore } from "/src/stores/color-picker";
import type { EditorWrapper, FillChoice, MenuDirection } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { EditorWrapper, FillChoiceUI, MenuDirection } from "/wrapper/pkg/graphite_wasm_wrapper";
const dispatch = createEventDispatcher<{ colorOrGradient: FillChoice; startHistoryTransaction: undefined; commitHistoryTransaction: undefined }>();
const dispatch = createEventDispatcher<{ colorOrGradient: FillChoiceUI; startHistoryTransaction: undefined; commitHistoryTransaction: undefined }>();
const editor = getContext<EditorWrapper>("editor");
const colorPickerStore = getContext<ColorPickerStore>("colorPicker");
export let colorOrGradient: FillChoice;
export let colorOrGradient: FillChoiceUI;
export let allowNone = false;
// export let allowTransparency = false; // TODO: Implement
export let disabled = false;
frontend/src/components/panels/Document.svelte
+13 -13
View File
@@ -12,12 +12,12 @@
import type { DocumentStore } from "/src/stores/document";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import type { MessageBody } from "/src/subscriptions-router";
import { fillChoiceColor, createColor } from "/src/utility-functions/colors";
import { fillChoiceUIColor, createSRgba8 } from "/src/utility-functions/colors";
import { pasteFile } from "/src/utility-functions/files";
import { textInputCleanup } from "/src/utility-functions/keyboard-entry";
import { rasterizeSVGCanvas } from "/src/utility-functions/rasterization";
import { setupViewportResizeObserver } from "/src/utility-functions/viewports";
import type { Color, EditorWrapper, MenuDirection, MouseCursorIcon } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { EditorWrapper, MenuDirection, MouseCursorIcon, SRGBA8 } from "/wrapper/pkg/graphite_wasm_wrapper";
let rulerHorizontal: RulerInput | undefined;
let rulerVertical: RulerInput | undefined;
@@ -70,7 +70,7 @@
let cursorEyedropperPreviewColorSecondary = "";
// Gradient stop color picker
let gradientStopPickerColor: Color | undefined = undefined;
let gradientStopPickerColor: SRGBA8 | undefined = undefined;
let gradientStopPickerPosition: { x: number; y: number } | undefined = undefined;
// Canvas dimensions
@@ -223,7 +223,7 @@
mousePosition: [number, number] | undefined,
colorPrimary: string,
colorSecondary: string,
): Promise<[number, number, number] | undefined> {
): Promise<SRGBA8 | undefined> {
if (mousePosition === undefined) {
cursorEyedropper = false;
return undefined;
@@ -275,14 +275,14 @@
};
})();
const hex = [centerPixel.r, centerPixel.g, centerPixel.b].map((x) => x.toString(16).padStart(2, "0")).join("");
const rgb: [number, number, number] = [centerPixel.r / 255, centerPixel.g / 255, centerPixel.b / 255];
const sRgba8: SRGBA8 = { red: centerPixel.r, green: centerPixel.g, blue: centerPixel.b, alpha: 255 };
cursorEyedropperPreviewColorChoice = "#" + hex;
cursorEyedropperPreviewColorPrimary = colorPrimary;
cursorEyedropperPreviewColorSecondary = colorSecondary;
cursorEyedropperPreviewImageData = preview;
return rgb;
return sRgba8;
}
// Update scrollbars and rulers
@@ -477,11 +477,11 @@
const { image, mousePosition, primaryColor, secondaryColor, setColorChoice } = data;
const imageData = image !== undefined ? new ImageData(new Uint8ClampedArray(image.data), image.width, image.height) : undefined;
const rgb = await updateEyedropperSamplingState(imageData, mousePosition, primaryColor, secondaryColor);
const sRgba8 = await updateEyedropperSamplingState(imageData, mousePosition, primaryColor, secondaryColor);
if (setColorChoice && rgb) {
if (setColorChoice === "Primary") editor.updatePrimaryColor(...rgb, 1);
if (setColorChoice === "Secondary") editor.updateSecondaryColor(...rgb, 1);
if (setColorChoice && sRgba8) {
if (setColorChoice === "Primary") editor.updatePrimaryColor(sRgba8);
if (setColorChoice === "Secondary") editor.updateSecondaryColor(sRgba8);
}
});
@@ -668,10 +668,10 @@
gradientStopPickerColor = undefined;
}
}}
colorOrGradient={{ Solid: gradientStopPickerColor || createColor(0, 0, 0, 1) }}
colorOrGradient={{ Solid: gradientStopPickerColor || createSRgba8(0, 0, 0, 255) }}
on:colorOrGradient={({ detail }) => {
const color = fillChoiceColor(detail);
if (color) editor.updateGradientStopColor(color.red, color.green, color.blue, color.alpha);
const color = fillChoiceUIColor(detail);
if (color) editor.updateGradientStopColor(color);
}}
on:startHistoryTransaction={() => editor.startGradientStopColorTransaction()}
on:commitHistoryTransaction={() => editor.commitGradientStopColorTransaction()}
frontend/src/components/widgets/WidgetSpan.svelte
+3 -3
View File
@@ -26,7 +26,7 @@
import ShortcutLabel from "/src/components/widgets/labels/ShortcutLabel.svelte";
import TextLabel from "/src/components/widgets/labels/TextLabel.svelte";
import type { ColorPickerStore } from "/src/stores/color-picker";
import { parseFillChoice } from "/src/utility-functions/colors";
import { parseFillChoiceUI } from "/src/utility-functions/colors";
import type { EditorWrapper, LayoutTarget, Widget, WidgetInstance } from "/wrapper/pkg/graphite_wasm_wrapper";
// Extract the discriminant key names from the Widget tagged enum union (e.g. "TextButton" | "CheckboxInput" | ...)
@@ -134,7 +134,7 @@
component: ColorInput,
getProps: (props, index) => ({
...props,
value: parseFillChoice(props.value),
value: parseFillChoiceUI(props.value),
$$events: {
value: (e: CustomEvent) => widgetValueUpdate(index, e.detail, false),
startHistoryTransaction: () => widgetValueCommit(index, props.value),
@@ -146,7 +146,7 @@
getProps: (props, index) => ({
...props,
$$events: {
// The widget dispatches `"None"` or a bare `Color`, wrap the color in `{ Solid: ... }` so the payload matches Rust's `FillChoice` shape (which the `Preset` variant expects).
// The widget dispatches `"None"` or a bare `SRGBA8`, wrap the color in `{ Solid: ... }` so the payload matches Rust's `FillChoiceUI` shape (which the `Preset` variant expects).
preset: (e: CustomEvent) => widgetValueCommitAndUpdate(index, { Preset: e.detail === "None" ? "None" : { Solid: e.detail } }, true),
eyedropperColorCode: (e: CustomEvent) => widgetValueCommitAndUpdate(index, { EyedropperColorCode: e.detail }, true),
},
frontend/src/components/widgets/inputs/ColorComparisonInput.svelte
+4 -4
View File
@@ -4,12 +4,12 @@
import LayoutRow from "/src/components/layout/LayoutRow.svelte";
import IconButton from "/src/components/widgets/buttons/IconButton.svelte";
import TextLabel from "/src/components/widgets/labels/TextLabel.svelte";
import type { Color } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { SRGBA8 } from "/wrapper/pkg/graphite_wasm_wrapper";
const dispatch = createEventDispatcher<{ swap: undefined }>();
export let newColor: Color | undefined;
export let oldColor: Color | undefined;
export let newColor: SRGBA8 | undefined;
export let oldColor: SRGBA8 | undefined;
export let newColorCSS: string;
export let newColorContrasting: string;
export let oldColorCSS: string;
@@ -21,7 +21,7 @@
export let outlineAmount: number;
$: outlined = outlineAmount > 0.0001;
$: transparency = (newColor?.alpha ?? 1) < 1 || (oldColor?.alpha ?? 1) < 1;
$: transparency = (newColor?.alpha ?? 255) < 255 || (oldColor?.alpha ?? 255) < 255;
</script>
<LayoutRow
frontend/src/components/widgets/inputs/ColorInput.svelte
+7 -7
View File
@@ -2,13 +2,13 @@
import { createEventDispatcher } from "svelte";
import ColorPicker from "/src/components/floating-menus/ColorPicker.svelte";
import LayoutCol from "/src/components/layout/LayoutCol.svelte";
import { contrastingOutlineFactor, fillChoiceColor, fillChoiceGradientStops } from "/src/utility-functions/colors";
import type { FillChoice, MenuDirection, ActionShortcut } from "/wrapper/pkg/graphite_wasm_wrapper";
import { contrastingOutlineFactor, fillChoiceUIColor, fillChoiceUIGradientStops } from "/src/utility-functions/colors";
import type { FillChoiceUI, MenuDirection, ActionShortcut } from "/wrapper/pkg/graphite_wasm_wrapper";
const dispatch = createEventDispatcher<{ value: FillChoice; startHistoryTransaction: undefined }>();
const dispatch = createEventDispatcher<{ value: FillChoiceUI; startHistoryTransaction: undefined }>();
// Content
export let value: FillChoice;
export let value: FillChoiceUI;
export let chosenGradient: string | undefined = undefined;
export let allowNone = false;
// export let allowTransparency = false; // TODO: Implement
@@ -29,10 +29,10 @@
$: outlineFactor = contrastingOutlineFactor(value, "--color-3-darkgray", 0.01);
$: outlined = outlineFactor > 0.0001;
$: gradientStops = fillChoiceGradientStops(value);
$: solidColor = fillChoiceColor(value);
$: gradientStops = fillChoiceUIGradientStops(value);
$: solidColor = fillChoiceUIColor(value);
$: none = value === "None";
$: transparency = gradientStops ? gradientStops.color.some((color) => color.alpha < 1) : solidColor ? solidColor.alpha < 1 : false;
$: transparency = gradientStops ? gradientStops.color.some((color) => color.alpha < 255) : solidColor ? solidColor.alpha < 255 : false;
</script>
<LayoutCol
frontend/src/components/widgets/inputs/ColorPresetsInput.svelte
+11 -11
View File
@@ -3,20 +3,20 @@
import LayoutRow from "/src/components/layout/LayoutRow.svelte";
import IconButton from "/src/components/widgets/buttons/IconButton.svelte";
import Separator from "/src/components/widgets/labels/Separator.svelte";
import { createColor } from "/src/utility-functions/colors";
import type { Color } from "/wrapper/pkg/graphite_wasm_wrapper";
import { createSRgba8 } from "/src/utility-functions/colors";
import type { SRGBA8 } from "/wrapper/pkg/graphite_wasm_wrapper";
type PresetColor = "Black" | "White" | "Red" | "Yellow" | "Green" | "Cyan" | "Blue" | "Magenta";
const PURE_COLORS: Record<PresetColor, [number, number, number]> = {
Black: [0, 0, 0],
White: [1, 1, 1],
Red: [1, 0, 0],
Yellow: [1, 1, 0],
Green: [0, 1, 0],
Cyan: [0, 1, 1],
Blue: [0, 0, 1],
Magenta: [1, 0, 1],
White: [255, 255, 255],
Red: [255, 0, 0],
Yellow: [255, 255, 0],
Green: [0, 255, 0],
Cyan: [0, 255, 255],
Blue: [0, 0, 255],
Magenta: [255, 0, 255],
};
const PURE_COLORS_GRAYABLE: [PresetColor, string, string][] = [
["Red", "#ff0000", "#4c4c4c"],
@@ -28,7 +28,7 @@
];
const dispatch = createEventDispatcher<{
preset: Color | "None";
preset: SRGBA8 | "None";
eyedropperColorCode: string;
}>();
@@ -37,7 +37,7 @@
function pickPreset(preset: PresetColor | "None") {
if (disabled) return;
dispatch("preset", preset === "None" ? "None" : createColor(...PURE_COLORS[preset], 1));
dispatch("preset", preset === "None" ? "None" : createSRgba8(...PURE_COLORS[preset], 255));
}
// TODO: Replace this temporary usage of the browser eyedropper API, that only works in Chromium-based browsers, with the custom color sampler system used by the Eyedropper tool
frontend/src/components/widgets/inputs/VisualColorPickersInput.svelte
+9 -9
View File
@@ -3,7 +3,7 @@
import LayoutCol from "/src/components/layout/LayoutCol.svelte";
import LayoutRow from "/src/components/layout/LayoutRow.svelte";
import type { TooltipStore } from "/src/stores/tooltip";
import { colorContrastingColor, colorOpaque, colorToHexNoAlpha, colorToRgbCSS, createColor, createColorFromHSVA } from "/src/utility-functions/colors";
import { sRgba8ContrastingColor, sRgba8Opaque, sRgba8ToHexNoAlpha, sRgba8ToRgbCSS, createSRgba8, createSRgba8FromHsva } from "/src/utility-functions/colors";
const dispatch = createEventDispatcher<{
update: { hue: number; saturation: number; value: number; alpha: number };
@@ -184,20 +184,20 @@
removeEvents();
});
$: newColor = isNone ? undefined : createColorFromHSVA(hue, saturation, value, alpha);
$: opaqueHueColor = createColorFromHSVA(hue, 1, 1, 1);
$: opaqueColorOnly = newColor ? colorOpaque(newColor) : createColor(0, 0, 0, 1);
$: newColor = isNone ? undefined : createSRgba8FromHsva(hue, saturation, value, alpha);
$: opaqueHueColor = createSRgba8FromHsva(hue, 1, 1, 1);
$: opaqueColorOnly = newColor ? sRgba8Opaque(newColor) : createSRgba8(0, 0, 0, 255);
</script>
<LayoutRow
class="visual-color-pickers-input"
classes={{ disabled }}
styles={{
"--hue-color": colorToRgbCSS(opaqueHueColor),
"--hue-color-contrasting": colorContrastingColor(opaqueHueColor),
"--opaque-color": colorToHexNoAlpha(opaqueColorOnly),
"--opaque-color-contrasting": colorContrastingColor(opaqueColorOnly),
"--new-color-contrasting": colorContrastingColor(newColor),
"--hue-color": sRgba8ToRgbCSS(opaqueHueColor),
"--hue-color-contrasting": sRgba8ContrastingColor(opaqueHueColor),
"--opaque-color": sRgba8ToHexNoAlpha(opaqueColorOnly),
"--opaque-color-contrasting": sRgba8ContrastingColor(opaqueColorOnly),
"--new-color-contrasting": sRgba8ContrastingColor(newColor),
}}
>
{@const hueDescription = "The shade along the spectrum of the rainbow."}
frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
+12 -12
View File
@@ -3,14 +3,14 @@
import ColorPicker from "/src/components/floating-menus/ColorPicker.svelte";
import LayoutCol from "/src/components/layout/LayoutCol.svelte";
import LayoutRow from "/src/components/layout/LayoutRow.svelte";
import { fillChoiceColor, colorToRgbaCSS } from "/src/utility-functions/colors";
import type { Color, EditorWrapper } from "/wrapper/pkg/graphite_wasm_wrapper";
import { fillChoiceUIColor, sRgba8ToRgbaCSS } from "/src/utility-functions/colors";
import type { SRGBA8, EditorWrapper } from "/wrapper/pkg/graphite_wasm_wrapper";
const editor = getContext<EditorWrapper>("editor");
// Content
export let primary: Color;
export let secondary: Color;
export let primary: SRGBA8;
export let secondary: SRGBA8;
let primaryOpen = false;
let secondaryOpen = false;
@@ -25,37 +25,37 @@
secondaryOpen = true;
}
function primaryColorChanged(color: Color) {
editor.updatePrimaryColor(color.red, color.green, color.blue, color.alpha);
function primaryColorChanged(color: SRGBA8) {
editor.updatePrimaryColor(color);
}
function secondaryColorChanged(color: Color) {
editor.updateSecondaryColor(color.red, color.green, color.blue, color.alpha);
function secondaryColorChanged(color: SRGBA8) {
editor.updateSecondaryColor(color);
}
</script>
<LayoutCol class="working-colors-button">
<LayoutRow class="primary swatch">
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={colorToRgbaCSS(primary)} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={sRgba8ToRgbaCSS(primary)} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<ColorPicker
open={primaryOpen}
on:open={({ detail }) => (primaryOpen = detail)}
colorOrGradient={{ Solid: primary }}
on:colorOrGradient={({ detail }) => {
const color = fillChoiceColor(detail);
const color = fillChoiceUIColor(detail);
if (color) primaryColorChanged(color);
}}
direction="Right"
/>
</LayoutRow>
<LayoutRow class="secondary swatch">
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={colorToRgbaCSS(secondary)} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={sRgba8ToRgbaCSS(secondary)} data-floating-menu-spawner data-block-hover-transfer tabindex="0"></button>
<ColorPicker
open={secondaryOpen}
on:open={({ detail }) => (secondaryOpen = detail)}
colorOrGradient={{ Solid: secondary }}
on:colorOrGradient={({ detail }) => {
const color = fillChoiceColor(detail);
const color = fillChoiceUIColor(detail);
if (color) secondaryColorChanged(color);
}}
direction="Right"
frontend/src/components/window/Panel.svelte
+3 -3
View File
@@ -11,7 +11,7 @@
import TextLabel from "/src/components/widgets/labels/TextLabel.svelte";
import { panelDrag, startCrossPanelDrag, endCrossPanelDrag, updateCrossPanelHover, updateDockingHover } from "/src/stores/panel-drag";
import type { DockingEdge } from "/src/stores/panel-drag";
import type { EditorWrapper, PanelType } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { DockingSplitDirection, EditorWrapper, PanelType } from "/wrapper/pkg/graphite_wasm_wrapper";
const PANEL_COMPONENTS = {
Welcome,
@@ -40,7 +40,7 @@
export let emptySpaceAction: (() => void) | undefined = undefined;
export let crossPanelDropAction: ((sourcePanelId: string, targetPanelId: string, insertIndex: number) => void) | undefined = undefined;
export let groupDropAction: ((sourcePanelId: string, targetPanelId: string, insertIndex: number) => void) | undefined = undefined;
export let splitDropAction: ((targetPanelId: string, direction: DockingEdge, tabs: PanelType[], activeTabIndex: number) => void) | undefined = undefined;
export let splitDropAction: ((targetPanelId: string, direction: DockingSplitDirection, tabs: PanelType[], activeTabIndex: number) => void) | undefined = undefined;
let className = "";
export { className as class };
@@ -222,7 +222,7 @@
dropAction?.(panelId, crossPanelState.hoverDockingPanelId, Number.MAX_SAFE_INTEGER);
}
// Edge docking drop: create a new split adjacent to the target panel
else if (crossPanelState.active && crossPanelState.hoverDockingPanelId && crossPanelState.hoverDockingEdge) {
else if (crossPanelState.active && crossPanelState.hoverDockingPanelId && crossPanelState.hoverDockingEdge && crossPanelState.hoverDockingEdge !== "Center") {
splitDropAction?.(
crossPanelState.hoverDockingPanelId,
crossPanelState.hoverDockingEdge,
frontend/src/components/window/PanelSubdivision.svelte
+4 -4
View File
@@ -4,7 +4,7 @@
import LayoutRow from "/src/components/layout/LayoutRow.svelte";
import Panel from "/src/components/window/Panel.svelte";
import type { PortfolioStore } from "/src/stores/portfolio";
import type { DocumentInfo, EditorWrapper, PanelGroupState, PanelLayoutSubdivision } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { DockingSplitDirection, DocumentInfo, EditorWrapper, PanelGroupState, PanelLayoutSubdivision, PanelType } from "/wrapper/pkg/graphite_wasm_wrapper";
const MIN_PANEL_SIZE = 100;
const DOUBLE_CLICK_MILLISECONDS = 500;
@@ -85,7 +85,7 @@
sizeOverrides = sizeOverrides;
const allSizes = children.map((child, i) => sizeOverrides[i] ?? child.size);
editor.setPanelGroupSizes(splitPath, allSizes);
editor.setPanelGroupSizes(new Uint32Array(splitPath), new Float64Array(allSizes));
return;
}
@@ -140,7 +140,7 @@
// Persist the resized sizes to the backend
if ("Split" in subdivision) {
const allSizes = subdivision.Split.children.map((child, i) => sizeOverrides[i] ?? child.size);
editor.setPanelGroupSizes(splitPath, allSizes);
editor.setPanelGroupSizes(new Uint32Array(splitPath), new Float64Array(allSizes));
}
};
@@ -179,7 +179,7 @@
editor.moveAllPanelTabs(BigInt(sourcePanelId), BigInt(targetPanelId), insertIndex);
}
function splitDrop(targetPanelId: string, direction: string, tabs: string[], activeTabIndex: number) {
function splitDrop(targetPanelId: string, direction: DockingSplitDirection, tabs: PanelType[], activeTabIndex: number) {
editor.splitPanelGroup(BigInt(targetPanelId), direction, tabs, activeTabIndex);
}