From 2862cf4ce29390ea0b7ed0cc9816481e27cbb3b0 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Sat, 10 Feb 2024 14:08:36 -0800 Subject: [PATCH] try for a simple rgb picker / restore gamut markers --- src/components/ColorChannelPicker.svelte | 17 +++- src/content-modules/LeftPanel.svelte | 4 +- src/controls/Config.svelte | 101 +++++++++++++---------- src/lib/Color.ts | 21 +++-- src/scatterplot/ColorScatterPlot.svelte | 24 ++++-- src/scatterplot/GamutMarker.svelte | 26 +++--- src/stores/config-store.ts | 4 + 7 files changed, 121 insertions(+), 76 deletions(-) diff --git a/src/components/ColorChannelPicker.svelte b/src/components/ColorChannelPicker.svelte index ff1761d5..88f1a2a1 100644 --- a/src/components/ColorChannelPicker.svelte +++ b/src/components/ColorChannelPicker.svelte @@ -16,6 +16,11 @@ $: colorConfigs = color && ({ + rgb: [ + { name: "Red", min: 0, max: 255, step: 1 }, + { name: "Green", min: 0, max: 255, step: 1 }, + { name: "Blue", min: 0, max: 255, step: 1 }, + ], srgb: [ { name: "Red", min: 0, max: 1, step: 0.01 }, { name: "Green", min: 0, max: 1, step: 0.01 }, @@ -65,7 +70,8 @@ .to(colorModeMap[colorMode] || colorMode) .coords.forEach((val, idx) => { // @ts-ignore - const newVal = typeof val === "object" ? val.valueOf() : val; + let newVal = typeof val === "object" ? val.valueOf() : val; + if (colorMode === "rgb") newVal *= 255; colorConfigs[colorMode][idx].value = newVal; }); @@ -75,6 +81,11 @@ let spaceId = colorModeMap[colorMode] || colorMode; const coords = new ColorIO(color.toHex()).to(spaceId).coords; + // if (colorMode === "rgb") { + // coords[0] *= 255; + // coords[1] *= 255; + // coords[2] *= 255; + // } const alpha = 1; let ret = []; @@ -118,11 +129,11 @@ let values = [...colorConfigs[colorMode].map((x) => x.value)] as number[]; values[idx] = Number(e.target.value); if (colorMode.includes("rgb")) { - values = values.map((x) => x * 255); + values = values.map((x) => x / 255); } const newColor = Color.colorFromChannels( values as [number, number, number], - colorMode + colorModeMap[colorMode] || colorMode ); const outColor = Color.toColorSpace(newColor, measuredColorMode); onColorChange(outColor); diff --git a/src/content-modules/LeftPanel.svelte b/src/content-modules/LeftPanel.svelte index c366bf6c..627f5f1c 100644 --- a/src/content-modules/LeftPanel.svelte +++ b/src/content-modules/LeftPanel.svelte @@ -20,14 +20,14 @@
- / +
+ + +
+
Configurations
Pick AI Provider
{#each aiModes as ai} @@ -93,8 +139,19 @@ {show} {/each} +
Show Out of Gamut Marker
+ {#each ["show", "hide"] as show} + + {/each} -
Short cuts
+
Short cuts
{#each shortCuts as { name, shortcut }}
@@ -103,47 +160,5 @@
{/each}
- - -
diff --git a/src/lib/Color.ts b/src/lib/Color.ts index 39d7fed2..212bf468 100644 --- a/src/lib/Color.ts +++ b/src/lib/Color.ts @@ -62,21 +62,24 @@ export class Color { if (this.cachedInGamut !== null) { return this.cachedInGamut; } - // return this.toColorIO().inGamut("srgb"); + const result = this.toColorIO().inGamut("srgb"); + this.cachedInGamut = result; + return result; + // // return new ColorIO(this.spaceName, this.toChannels()).inGamut(); // let clr = this.toColorIO().to("srgb", { inGamut: false }); // let cssColor = clr.display(); // // cssColor.color.inGamut(); // return cssColor.color.inGamut(); - const x = this.toHex(); - const y = this.toColorIO().to("srgb").toString({ format: "hex" }); - if (x !== y) { - console.log("x", x, "y", y); - } - const result = x === y; - this.cachedInGamut = result; - return result; + // const x = this.toHex(); + // const y = this.toColorIO().to("srgb").toString({ format: "hex" }); + // if (x !== y) { + // console.log("x", x, "y", y); + // } + // const result = x === y; + // this.cachedInGamut = result; + // return result; } toColorIO(): ColorIO { if (this.cachedColorIO) { diff --git a/src/scatterplot/ColorScatterPlot.svelte b/src/scatterplot/ColorScatterPlot.svelte index 65ee0c2e..a34b9d0e 100644 --- a/src/scatterplot/ColorScatterPlot.svelte +++ b/src/scatterplot/ColorScatterPlot.svelte @@ -83,12 +83,13 @@ $: pos = makePosAndSizes(pickedColors); let originalColors = [] as Color[]; - $: luminance = bg.luminance(); - $: axisColor = luminance > 0.4 ? "#00000022" : "#ffffff55"; - $: textColor = luminance > 0.4 ? "#00000066" : "#ffffffaa"; - $: selectionColor = luminance > 0.35 ? "#55330066" : "#ffeeccaa"; + $: bgLum = bg.luminance(); + $: axisColor = bgLum > 0.4 ? "#00000022" : "#ffffff55"; + $: textColor = bgLum > 0.4 ? "#00000066" : "#ffffffaa"; + $: selectionColor = bgLum > 0.35 ? "#55330066" : "#ffeeccaa"; - let hoveredPoint: Color | false = false; + let hoveredIndex: number | false = false; + $: hoveredPoint = hoveredIndex === false ? false : colors[hoveredIndex]; // coordinate transforms $: scales = makeScales( @@ -230,7 +231,7 @@ let switchToDragPoint = (i: number) => (e: any) => { if (interactionMode === "idle") { - hoveredPoint = colors[i]; + hoveredIndex = i; } if (interactionMode !== "point-touch") return; startDragging(); @@ -365,8 +366,13 @@ {#if scatterPlotMode !== "moving"} {/if} - {#if !color.inGamut()} - + {#if !color.inGamut() && $configStore.showGamutMarkers} + {/if} {/each} {#each blindColors as blindColor, i} @@ -570,7 +576,7 @@
- {#if hoveredPoint} + {#if typeof hoveredPoint !== "boolean"} Hovered point: {hoveredPoint.toString()} - {hoveredPoint.toHex()} diff --git a/src/scatterplot/GamutMarker.svelte b/src/scatterplot/GamutMarker.svelte index dd45482e..86217423 100644 --- a/src/scatterplot/GamutMarker.svelte +++ b/src/scatterplot/GamutMarker.svelte @@ -1,23 +1,29 @@ diff --git a/src/stores/config-store.ts b/src/stores/config-store.ts index 3f7fc56f..199b7f1b 100644 --- a/src/stores/config-store.ts +++ b/src/stores/config-store.ts @@ -11,6 +11,7 @@ interface StoreData { leftRoute: "controls" | "palettes"; route: "examples" | "compare" | "eval"; scatterplotMode: "moving" | "putting"; + showGamutMarkers: boolean; showColorBackground: boolean; tooltipXY?: [string, string]; useSimulatorOnExamples: boolean; @@ -33,6 +34,7 @@ const InitialStore: StoreData = { route: "examples", scatterplotMode: "moving", showColorBackground: true, + showGamutMarkers: true, tooltipXY: undefined, mainColumnRoute: "palette-config", mainColumnSelectedExample: -1, @@ -99,6 +101,8 @@ function createStore() { persist((old) => ({ ...old, leftRoute: route })), setScatterplotMode: (n: StoreData["scatterplotMode"]) => persist((old) => ({ ...old, scatterplotMode: n })), + setShowGamutMarkers: (n: StoreData["showGamutMarkers"]) => + persist((old) => ({ ...old, showGamutMarkers: n })), setUseSimulatorOnExamples: (n: StoreData["useSimulatorOnExamples"]) => persist((old) => ({ ...old, useSimulatorOnExamples: n })), setMainColumnRoute: (n: StoreData["mainColumnRoute"]) =>