fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 04:08: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);
}
frontend/src/stores/color-picker.ts
+4 -4
View File
@@ -2,10 +2,10 @@ import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { patchLayout } from "/src/utility-functions/widgets";
import type { FillChoice, Layout } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { FillChoiceUI, Layout } from "/wrapper/pkg/graphite_wasm_wrapper";
export type ColorPickerCallbacks = {
onColorChanged?: (value: FillChoice) => void;
onColorChanged?: (value: FillChoiceUI) => void;
onStartTransaction?: () => void;
onCommitTransaction?: () => void;
};
@@ -40,9 +40,9 @@ export type ColorPickerStore = {
setDragging: (dragging: boolean) => void;
};
// The Rust handler keeps a single shared layout per target, but multiple `<ColorPicker>` Svelte instances may be mounted across
// The Rust handler keeps a single shared layout per target, but multiple `<ColorPicker />` Svelte instances may be mounted across
// the app (one per `ColorInput`/`WorkingColorsInput`/etc.). Subscribing to the layout target from each instance is destructive,
// only the last-registered callback wins. So we maintain a single global subscription here and let each `<ColorPicker>` instance
// only the last-registered callback wins. So we maintain a single global subscription here and let each `<ColorPicker />` instance
// read from the resulting store and register its own per-open callbacks for color/transaction events.
export function createColorPickerStore(subscriptions: SubscriptionsRouter): ColorPickerStore {
destroyColorPickerStore();
frontend/src/stores/panel-drag.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { PanelType } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { DockingSplitDirection, PanelType } from "/wrapper/pkg/graphite_wasm_wrapper";
export type DockingEdge = "Left" | "Right" | "Top" | "Bottom" | "Center";
export type DockingEdge = DockingSplitDirection | "Center";
export type PanelDragState = {
active: boolean;
frontend/src/utility-functions/colors.ts
+54 -57
View File
@@ -1,4 +1,4 @@
import type { Color, FillChoice, GradientStops } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { FillChoiceUI, GradientStopsUI, SRGBA8 } from "/wrapper/pkg/graphite_wasm_wrapper";
// Channels can have any range (0-1, 0-255, 0-100, 0-360) in the context they are being used in, these are just containers for the numbers
export type HSV = { h: number; s: number; v: number };
@@ -6,26 +6,33 @@ export type RGB = { r: number; g: number; b: number };
// COLOR FACTORY FUNCTIONS
export function createColor(red: number, green: number, blue: number, alpha: number): Color {
export function createSRgba8(red: number, green: number, blue: number, alpha: number): SRGBA8 {
return { red, green, blue, alpha };
}
export function createColorFromHSVA(h: number, s: number, v: number, a: number): Color {
// Build an `SRGBA8` from HSVA components on the 0..1 range.
export function createSRgba8FromHsva(h: number, s: number, v: number, a: number): SRGBA8 {
const convert = (n: number): number => {
const k = (n + h * 6) % 6;
return v - v * s * Math.max(Math.min(...[k, 4 - k, 1]), 0);
};
return { red: convert(5), green: convert(3), blue: convert(1), alpha: a };
return {
red: Math.round(convert(5) * 255),
green: Math.round(convert(3) * 255),
blue: Math.round(convert(1) * 255),
alpha: Math.round(a * 255),
};
}
// COLOR UTILITY FUNCTIONS
export function isColor(value: unknown): value is Color {
export function isSRgba8(value: unknown): value is SRGBA8 {
return typeof value === "object" && value !== null && "red" in value;
}
export function colorFromCSS(colorCode: string): Color | undefined {
// Parse a CSS color string into an `SRGBA8`. Uses a canvas to delegate parsing to the browser.
export function sRgba8FromCSS(colorCode: string): SRGBA8 | undefined {
// Allow single-digit hex value inputs
let colorValue = colorCode.trim();
if (colorValue.length === 2 && colorValue.charAt(0) === "#" && /[0-9a-f]/i.test(colorValue.charAt(1))) {
@@ -52,52 +59,40 @@ export function colorFromCSS(colorCode: string): Color | undefined {
// Invalid color
if (comparisonA !== comparisonB) {
// If this color code didn't start with a #, add it and try again
if (colorValue.trim().charAt(0) !== "#") return colorFromCSS(`#${colorValue.trim()}`);
if (colorValue.trim().charAt(0) !== "#") return sRgba8FromCSS(`#${colorValue.trim()}`);
return undefined;
}
context.fillRect(0, 0, 1, 1);
const [r, g, b, a] = [...context.getImageData(0, 0, 1, 1).data];
return createColor(r / 255, g / 255, b / 255, a / 255);
return createSRgba8(r, g, b, a);
}
export function colorToHexNoAlpha(color: Color): string {
const r = Math.round(color.red * 255)
.toString(16)
.padStart(2, "0");
const g = Math.round(color.green * 255)
.toString(16)
.padStart(2, "0");
const b = Math.round(color.blue * 255)
.toString(16)
.padStart(2, "0");
export function sRgba8ToHexNoAlpha(color: SRGBA8): string {
const r = color.red.toString(16).padStart(2, "0");
const g = color.green.toString(16).padStart(2, "0");
const b = color.blue.toString(16).padStart(2, "0");
return `#${r}${g}${b}`;
}
export function colorToRgb255(color: Color): RGB {
return {
r: Math.round(color.red * 255),
g: Math.round(color.green * 255),
b: Math.round(color.blue * 255),
};
export function sRgba8ToRgb255(color: SRGBA8): RGB {
return { r: color.red, g: color.green, b: color.blue };
}
export function colorToRgbCSS(color: Color): string {
const rgb = colorToRgb255(color);
return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
export function sRgba8ToRgbCSS(color: SRGBA8): string {
return `rgb(${color.red}, ${color.green}, ${color.blue})`;
}
export function colorToRgbaCSS(color: Color): string {
const rgb = colorToRgb255(color);
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${color.alpha})`;
export function sRgba8ToRgbaCSS(color: SRGBA8): string {
return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha / 255})`;
}
export function colorToHSV(color: Color): HSV {
const { red: r, green: g, blue: b } = color;
export function sRgba8ToHSV(color: SRGBA8): HSV {
const r = color.red / 255;
const g = color.green / 255;
const b = color.blue / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
@@ -126,15 +121,17 @@ export function colorToHSV(color: Color): HSV {
return { h, s, v };
}
export function colorOpaque(color: Color): Color {
return createColor(color.red, color.green, color.blue, 1);
export function sRgba8Opaque(color: SRGBA8): SRGBA8 {
return createSRgba8(color.red, color.green, color.blue, 255);
}
export function colorLuminance(color: Color): number {
// WCAG-style relative luminance computed from an `SRGBA8` (alpha composited over white).
export function sRgba8Luminance(color: SRGBA8): number {
const a = color.alpha / 255;
// Convert alpha into white
const r = color.red * color.alpha + (1 - color.alpha);
const g = color.green * color.alpha + (1 - color.alpha);
const b = color.blue * color.alpha + (1 - color.alpha);
const r = (color.red / 255) * a + (1 - a);
const g = (color.green / 255) * a + (1 - a);
const b = (color.blue / 255) * a + (1 - a);
// https://stackoverflow.com/a/3943023/775283
@@ -145,32 +142,32 @@ export function colorLuminance(color: Color): number {
return linearR * 0.2126 + linearG * 0.7152 + linearB * 0.0722;
}
export function colorContrastingColor(color: Color | undefined): "black" | "white" {
export function sRgba8ContrastingColor(color: SRGBA8 | undefined): "black" | "white" {
if (!color) return "black";
const luminance = colorLuminance(color);
const luminance = sRgba8Luminance(color);
return luminance > Math.sqrt(1.05 * 0.05) - 0.05 ? "black" : "white";
}
export function contrastingOutlineFactor(value: FillChoice, proximityColor: string | [string, string], proximityRange: number): number {
export function contrastingOutlineFactor(value: FillChoiceUI, proximityColor: string | [string, string], proximityRange: number): number {
const pair = Array.isArray(proximityColor) ? [proximityColor[0], proximityColor[1]] : [proximityColor, proximityColor];
const [range1, range2] = pair.map((color) => colorFromCSS(window.getComputedStyle(document.body).getPropertyValue(color)));
const [range1, range2] = pair.map((color) => sRgba8FromCSS(window.getComputedStyle(document.body).getPropertyValue(color)));
const contrast = (color: Color | undefined): number => {
const contrast = (color: SRGBA8 | undefined): number => {
if (!color) return 0;
const lum = colorLuminance(color);
let rangeLuminance1 = range1 ? colorLuminance(range1) : 0;
let rangeLuminance2 = range2 ? colorLuminance(range2) : 0;
const lum = sRgba8Luminance(color);
let rangeLuminance1 = range1 ? sRgba8Luminance(range1) : 0;
let rangeLuminance2 = range2 ? sRgba8Luminance(range2) : 0;
[rangeLuminance1, rangeLuminance2] = [Math.min(rangeLuminance1, rangeLuminance2), Math.max(rangeLuminance1, rangeLuminance2)];
const distance = Math.max(0, rangeLuminance1 - lum, lum - rangeLuminance2);
return (1 - Math.min(distance / proximityRange, 1)) * (1 - colorToHSV(color).s);
return (1 - Math.min(distance / proximityRange, 1)) * (1 - sRgba8ToHSV(color).s);
};
const gradientStops = fillChoiceGradientStops(value);
const gradientStops = fillChoiceUIGradientStops(value);
if (gradientStops) {
if (gradientStops.color.length === 0) return 0;
@@ -180,30 +177,30 @@ export function contrastingOutlineFactor(value: FillChoice, proximityColor: stri
return Math.min(first, last);
}
return contrast(fillChoiceColor(value));
return contrast(fillChoiceUIColor(value));
}
// GRADIENT UTILITY FUNCTIONS
export function isGradientStops(value: unknown): value is GradientStops {
export function isGradientStopsUI(value: unknown): value is GradientStopsUI {
return typeof value === "object" && value !== null && "position" in value && "midpoint" in value && "color" in value;
}
// FILL CHOICE UTILITY FUNCTIONS
export function fillChoiceColor(value: FillChoice): Color | undefined {
export function fillChoiceUIColor(value: FillChoiceUI): SRGBA8 | undefined {
if (typeof value === "object" && "Solid" in value) return value.Solid;
return undefined;
}
export function fillChoiceGradientStops(value: FillChoice): GradientStops | undefined {
export function fillChoiceUIGradientStops(value: FillChoiceUI): GradientStopsUI | undefined {
if (typeof value === "object" && "Gradient" in value) return value.Gradient;
return undefined;
}
export function parseFillChoice(value: unknown): FillChoice {
export function parseFillChoiceUI(value: unknown): FillChoiceUI {
if (value === "None" || value === undefined || value === null) return "None";
if (typeof value === "object" && value !== null && "Solid" in value && isColor(value.Solid)) return { Solid: value.Solid };
if (typeof value === "object" && value !== null && "Gradient" in value && isGradientStops(value.Gradient)) return { Gradient: value.Gradient };
if (typeof value === "object" && value !== null && "Solid" in value && isSRgba8(value.Solid)) return { Solid: value.Solid };
if (typeof value === "object" && value !== null && "Gradient" in value && isGradientStopsUI(value.Gradient)) return { Gradient: value.Gradient };
return "None";
}