try for a simple rgb picker / restore gamut markers

mcnuttandrew · Feb 10, 2024 · 2862cf4 · 2862cf4
1 parent 9026c2e
commit 2862cf4
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 76 deletions.
diff --git 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
@@ -20,14 +20,14 @@
     <div class="flex w-full justify-between items-start">
       <div class="flex ml-1">
         <NewPal />
-        /
+        <!-- /
         <button
           id="save"
           class={`${denseButtonStyle} mt-0.5`}
           on:click={() => colorStore.duplicatePal($colorStore.currentPal)}
         >
           Duplicate
-        </button>
+        </button> -->
       </div>
       <div class="flex">
         <button

diff --git a/src/controls/Config.svelte b/src/controls/Config.svelte
@@ -7,6 +7,7 @@
   import { buttonStyle } from "../lib/styles";
   const aiModes = ["google", "openai"] as const;
   $: showBg = $configStore.showColorBackground;
+  $: showOutOfGamut = $configStore.showGamutMarkers;
 
   const isMac = navigator.userAgent.indexOf("Mac OS X") !== -1;
   const metaKey = isMac ? "⌘" : "ctrl";
@@ -70,6 +71,51 @@
     {`Config ⚙`}
   </button>
   <div slot="content">
+    <div class="flex mb-4">
+      <button
+        class={buttonStyle}
+        on:click={() => {
+          const pals = $colorStore.palettes.map((x) => {
+            const { colors, background, name, colorSpace, type } = x;
+            return {
+              background: background.toHex(),
+              colorSpace,
+              colors: colors.map((c) => c.toHex()),
+              name,
+              type,
+            };
+          });
+          const blob = new Blob([JSON.stringify(pals)], {
+            type: "application/json",
+          });
+
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.style.display = "none";
+          a.href = url;
+
+          // the filename you want
+          a.download = "palettes-export.json";
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+        }}
+      >
+        Export Palettes
+      </button>
+      <button class={buttonStyle} on:click={() => importPals()}>
+        Import Palettes
+      </button>
+      <button
+        class={buttonStyle}
+        on:click={() => {
+          colorStore.clearPalettes();
+        }}
+      >
+        Clear Palettes
+      </button>
+    </div>
+    <div class="font-bold">Configurations</div>
     <div>Pick AI Provider</div>
     <div>
       {#each aiModes as ai}
@@ -93,8 +139,19 @@
         {show}
       </button>
     {/each}
+    <div>Show Out of Gamut Marker</div>
+    {#each ["show", "hide"] as show}
+      <button
+        class={buttonStyle}
+        class:font-bold={(show === "show" && showOutOfGamut) ||
+          (show == "hide" && !showOutOfGamut)}
+        on:click={() => configStore.setShowGamutMarkers(show === "show")}
+      >
+        {show}
+      </button>
+    {/each}
 
-    <div class="font-bold">Short cuts</div>
+    <div class="font-bold mt-4">Short cuts</div>
     <div>
       {#each shortCuts as { name, shortcut }}
         <div class="flex justify-between">
@@ -103,47 +160,5 @@
         </div>
       {/each}
     </div>
-    <button
-      class={buttonStyle}
-      on:click={() => {
-        const pals = $colorStore.palettes.map((x) => {
-          const { colors, background, name, colorSpace, type } = x;
-          return {
-            background: background.toHex(),
-            colorSpace,
-            colors: colors.map((c) => c.toHex()),
-            name,
-            type,
-          };
-        });
-        const blob = new Blob([JSON.stringify(pals)], {
-          type: "application/json",
-        });
-
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.style.display = "none";
-        a.href = url;
-
-        // the filename you want
-        a.download = "palettes-export.json";
-        document.body.appendChild(a);
-        a.click();
-        window.URL.revokeObjectURL(url);
-      }}
-    >
-      Export Palettes
-    </button>
-    <button class={buttonStyle} on:click={() => importPals()}>
-      Import Palettes
-    </button>
-    <button
-      class={buttonStyle}
-      on:click={() => {
-        colorStore.clearPalettes();
-      }}
-    >
-      Clear Palettes
-    </button>
   </div>
 </Tooltip>
diff --git 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
@@ -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"}
                 <circle {...CircleProps(color, i)} />
               {/if}
-              {#if !color.inGamut()}
-                <GamutMarker xPos={x(color)} yPos={y(color)} />
+              {#if !color.inGamut() && $configStore.showGamutMarkers}
+                <GamutMarker
+                  xPos={x(color)}
+                  yPos={y(color)}
+                  lum={color.luminance()}
+                  selected={focusSet.has(i)}
+                />
               {/if}
             {/each}
             {#each blindColors as blindColor, i}
@@ -570,7 +576,7 @@
   </div>
 </div>
 <div class="flex items-center text-sm w-full justify-center">
-  {#if hoveredPoint}
+  {#if typeof hoveredPoint !== "boolean"}
     Hovered point:
     {hoveredPoint.toString()} -
     {hoveredPoint.toHex()}

diff --git a/src/scatterplot/GamutMarker.svelte b/src/scatterplot/GamutMarker.svelte
@@ -1,23 +1,29 @@
 <script lang="ts">
   export let xPos: number;
   export let yPos: number;
+  export let lum: number;
+  export let selected: boolean;
+  $: markColor = lum > 0.4 ? "#00000022" : "#ffffff55";
+  $: size = selected ? 7 : 3;
 </script>
 
 <g pointer-events="none" transform={`translate(${xPos}, ${yPos})`}>
   <line
     pointer-events="none"
-    stroke="black"
-    x1={-7}
-    y1={-7}
-    x2={7}
-    y2={7}
+    stroke={markColor}
+    stroke-width="2"
+    x1={-size}
+    y1={-size}
+    x2={size}
+    y2={size}
   ></line>
   <line
     pointer-events="none"
-    stroke="black"
-    x1={-7}
-    y1={7}
-    x2={7}
-    y2={-7}
+    stroke={markColor}
+    stroke-width="2"
+    x1={-size}
+    y1={size}
+    x2={size}
+    y2={-size}
   ></line>
 </g>
diff --git 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"]) =>