From bb5e321509a25814f4afccf3919e03857c3aec00 Mon Sep 17 00:00:00 2001
From: Andrew McNutt <mcnutt.andrew@gmail.com>
Date: Fri, 12 Jan 2024 10:03:19 -0800
Subject: [PATCH] Rework color storage (#5)

* Rework color storage

* clean up

* .
---
 README.md                                     |  1 +
 src/components/KeyboardHooks.svelte           |  2 +-
 src/content-modules/Background.svelte         |  2 +-
 src/content-modules/SetColorSpace.svelte      | 13 ++---
 .../SwatchTooltipContent.svelte               |  2 +-
 .../context-free-tools/AddFamiliarPal.svelte  |  4 +-
 .../GetColorsFromString.svelte                |  2 +-
 .../context-free-tools/SuggestColorPal.svelte |  3 +-
 .../contextual-tools/AddColor.svelte          |  2 +-
 .../contextual-tools/AdjustColor.svelte       |  2 +-
 .../contextual-tools/AlignSelection.svelte    |  2 +-
 .../contextual-tools/DistributePoints.svelte  |  2 +-
 .../contextual-tools/Rotate.svelte            |  2 +-
 .../SuggestionModificationToSelection.svelte  |  3 +-
 src/lib/Color.test.ts                         | 22 +++++++
 src/lib/Color.ts                              | 36 ++++++++----
 src/lib/ColorLint.test.ts                     |  1 +
 src/lib/lints/background-differentiability.ts |  3 +-
 src/stores/color-store.ts                     | 58 ++++++++++++-------
 19 files changed, 108 insertions(+), 54 deletions(-)
 create mode 100644 src/lib/Color.test.ts

diff --git a/README.md b/README.md
index 29390e28..19e5c2a8 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,7 @@ To raise the sliders, you need to click on one of the examples that are displaye
 
 ## TODOS
 
+- [ ] Chore: clean up the color store, many unnecessary methods. Extract some common types into a top level location (like types.ts type thing)
 - [ ] A (default) example showing annotated math stuff
 - [ ] SVG Upload
 - [ ] Vega/Vega-Lite Specification
diff --git a/src/components/KeyboardHooks.svelte b/src/components/KeyboardHooks.svelte
index 709da97d..d8c7c165 100644
--- a/src/components/KeyboardHooks.svelte
+++ b/src/components/KeyboardHooks.svelte
@@ -4,7 +4,7 @@
   import focusStore from "../stores/focus-store";
   $: focusedSet = new Set($focusStore.focusedColors);
   $: copiedData = [] as Color[];
-  $: colorSpace = $colorStore.currentPal.colors[0].spaceName;
+  $: colorSpace = $colorStore.currentPal.colorSpace;
   $: [_zStep, xStep, yStep] = stepSize[colorSpace];
   function onKeyDown(e: any) {
     if (e.target.tagName.toLowerCase() === "input") {
diff --git a/src/content-modules/Background.svelte b/src/content-modules/Background.svelte
index f4c0d33b..9c8f7928 100644
--- a/src/content-modules/Background.svelte
+++ b/src/content-modules/Background.svelte
@@ -5,7 +5,7 @@
   import ColorChannelPicker from "../components/ColorChannelPicker.svelte";
   import Tooltip from "../components/Tooltip.svelte";
   $: bg = $colorStore.currentPal.background;
-  $: colorSpace = $colorStore.currentPal.colors[0].spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
   function onChange(color: Color) {
     colorStore.setBackground(color);
   }
diff --git a/src/content-modules/SetColorSpace.svelte b/src/content-modules/SetColorSpace.svelte
index dac41406..c0f8d0be 100644
--- a/src/content-modules/SetColorSpace.svelte
+++ b/src/content-modules/SetColorSpace.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import colorStore from "../stores/color-store";
-  import { colorPickerConfig, toColorSpace } from "../lib/Color";
-  $: colors = $colorStore.currentPal.colors;
+  import { colorPickerConfig } from "../lib/Color";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
   const notAllowed = new Set(["rgb", "hsv", "hsl"]);
 </script>
 
@@ -9,13 +9,10 @@
   <label for="color-space-select">Color Space</label>
   <select
     id="color-space-select"
-    value={colors[0] && colors[0].spaceName}
+    value={colorSpace}
     on:change={(e) => {
-      const newColors = colors.map((color) =>
-        // @ts-ignore
-        toColorSpace(color, e.target.value)
-      );
-      colorStore.setCurrentPalColors(newColors);
+      // @ts-ignore
+      colorStore.setColorSpace(e.target.value);
     }}
   >
     {#each Object.entries(colorPickerConfig).filter((x) => !notAllowed.has(x[0])) as [space, { title }]}
diff --git a/src/content-modules/SwatchTooltipContent.svelte b/src/content-modules/SwatchTooltipContent.svelte
index 7ddb2986..63020a28 100644
--- a/src/content-modules/SwatchTooltipContent.svelte
+++ b/src/content-modules/SwatchTooltipContent.svelte
@@ -9,7 +9,7 @@
   export let color: Color;
   export let closeTooltip: () => void;
   $: colors = $colorStore.currentPal.colors;
-  $: colorSpace = colors[0].spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
 
   function updateColor(color: Color) {
     const updatedColors = [...colors];
diff --git a/src/content-modules/context-free-tools/AddFamiliarPal.svelte b/src/content-modules/context-free-tools/AddFamiliarPal.svelte
index 1f718bdd..c55f22e4 100644
--- a/src/content-modules/context-free-tools/AddFamiliarPal.svelte
+++ b/src/content-modules/context-free-tools/AddFamiliarPal.svelte
@@ -14,7 +14,7 @@
     group: string;
   }
   $: familiarPals = [] as ExtendedPal[];
-  $: colorSpace = $colorStore.currentPal.colors[0]?.spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
 
   onMount(() => {
     const toHex = (x: string) => {
@@ -35,6 +35,7 @@
         group: "vega",
         type: "categorical",
         evalConfig: {},
+        colorSpace,
       });
     });
     Object.entries(chroma.brewer).forEach(([name, colors]) => {
@@ -48,6 +49,7 @@
         group: "brewer",
         type: colorBrewerMapToType[name.toLowerCase()],
         evalConfig: {},
+        colorSpace,
       });
     });
     familiarPals = newPals;
diff --git a/src/content-modules/context-free-tools/GetColorsFromString.svelte b/src/content-modules/context-free-tools/GetColorsFromString.svelte
index 6d63c078..69ba3827 100644
--- a/src/content-modules/context-free-tools/GetColorsFromString.svelte
+++ b/src/content-modules/context-free-tools/GetColorsFromString.svelte
@@ -4,7 +4,7 @@
   import navStore from "../../stores/nav-store";
   $: colors = $colorStore.currentPal.colors;
   let state: "idle" | "error" = "idle";
-  $: colorSpace = $colorStore.currentPal.colors[0]?.spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
 
   function processBodyInput(body: string) {
     try {
diff --git a/src/content-modules/context-free-tools/SuggestColorPal.svelte b/src/content-modules/context-free-tools/SuggestColorPal.svelte
index 3e361d43..7b74d195 100644
--- a/src/content-modules/context-free-tools/SuggestColorPal.svelte
+++ b/src/content-modules/context-free-tools/SuggestColorPal.svelte
@@ -7,7 +7,7 @@
   import PalPreview from "../../components/PalPreview.svelte";
   import { buttonStyle, AIButtonStyle } from "../../lib/styles";
 
-  $: colorSpace = $colorStore.currentPal.colors[0]?.spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
   let requestState: "idle" | "loading" | "loaded" | "failed" = "idle";
   let newPal: Palette = {
     colors: [],
@@ -15,6 +15,7 @@
     name: "blank",
     type: "categorical",
     evalConfig: {},
+    colorSpace,
   };
   let palPrompt: string = "";
 
diff --git a/src/content-modules/contextual-tools/AddColor.svelte b/src/content-modules/contextual-tools/AddColor.svelte
index cea3695a..80b83c85 100644
--- a/src/content-modules/contextual-tools/AddColor.svelte
+++ b/src/content-modules/contextual-tools/AddColor.svelte
@@ -8,7 +8,7 @@
   import Tooltip from "../../components/Tooltip.svelte";
 
   $: colors = $colorStore.currentPal.colors;
-  $: colorSpace = colors[0]?.spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
 
   let suggestions = [randColor(), randColor(), randColor()].map((x) =>
     x.toHex()
diff --git a/src/content-modules/contextual-tools/AdjustColor.svelte b/src/content-modules/contextual-tools/AdjustColor.svelte
index 96f8301e..3ee57930 100644
--- a/src/content-modules/contextual-tools/AdjustColor.svelte
+++ b/src/content-modules/contextual-tools/AdjustColor.svelte
@@ -8,7 +8,7 @@
 
   $: colors = $colorStore.currentPal.colors;
   $: focusedColors = $focusStore.focusedColors;
-  $: colorSpace = $colorStore.currentPal.colors[0]?.spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
 
   function actionOnColor(idx: number, action: (Color: Color) => any) {
     const newColor = action(colors[idx]);
diff --git a/src/content-modules/contextual-tools/AlignSelection.svelte b/src/content-modules/contextual-tools/AlignSelection.svelte
index 7f487f75..cd3036be 100644
--- a/src/content-modules/contextual-tools/AlignSelection.svelte
+++ b/src/content-modules/contextual-tools/AlignSelection.svelte
@@ -9,7 +9,7 @@
   $: focusedColors = $focusStore.focusedColors;
   $: focusSet = new Set(focusedColors);
   $: focusLabs = focusedColors.map((idx) => colors[idx].toChannels());
-  $: colorSpace = $colorStore.currentPal.colors[0]?.spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
   const ALIGNS = [
     { pos: 1, name: "Left", op: Math.min },
     { pos: 1, name: "Right", op: Math.max },
diff --git a/src/content-modules/contextual-tools/DistributePoints.svelte b/src/content-modules/contextual-tools/DistributePoints.svelte
index 381c96e7..6edbcb8e 100644
--- a/src/content-modules/contextual-tools/DistributePoints.svelte
+++ b/src/content-modules/contextual-tools/DistributePoints.svelte
@@ -7,7 +7,7 @@
 
   $: colors = $colorStore.currentPal.colors;
   $: focusedColors = $focusStore.focusedColors;
-  $: colorSpace = $colorStore.currentPal.colors[0]?.spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
 
   type Direction = "horizontal" | "vertical" | "in z space";
   function distributePoints(direction: Direction) {
diff --git a/src/content-modules/contextual-tools/Rotate.svelte b/src/content-modules/contextual-tools/Rotate.svelte
index 5b5c5997..bb5a8f69 100644
--- a/src/content-modules/contextual-tools/Rotate.svelte
+++ b/src/content-modules/contextual-tools/Rotate.svelte
@@ -12,7 +12,7 @@
   $: colors = $colorStore.currentPal.colors;
   $: angle = 0;
 
-  $: colorSpace = $colorStore.currentPal.colors[0].spaceName;
+  $: colorSpace = $colorStore.currentPal.colorSpace;
   $: angle, rotatePoints();
   $: memorizedColors = false as false | Color[];
   let rotationPoint = "avg" as number | "avg" | "zero";
diff --git a/src/content-modules/contextual-tools/SuggestionModificationToSelection.svelte b/src/content-modules/contextual-tools/SuggestionModificationToSelection.svelte
index 1e6d7427..0b9030af 100644
--- a/src/content-modules/contextual-tools/SuggestionModificationToSelection.svelte
+++ b/src/content-modules/contextual-tools/SuggestionModificationToSelection.svelte
@@ -8,7 +8,7 @@
   import PalDiff from "../../components/PalDiff.svelte";
 
   let requestState: "idle" | "loading" | "loaded" | "failed" = "idle";
-  $: colorSpace = $colorStore.currentPal.colors[0]?.spaceName || "lab";
+  $: colorSpace = $colorStore.currentPal.colorSpace;
   $: colors = $colorStore.currentPal.colors;
   $: selectedColors = $focusStore.focusedColors
     .map((x) => colors[x]?.toHex())
@@ -23,6 +23,7 @@
       background: $colorStore.currentPal.background,
       type: $colorStore.currentPal.type,
       evalConfig: {},
+      colorSpace,
     };
   }
 
diff --git a/src/lib/Color.test.ts b/src/lib/Color.test.ts
new file mode 100644
index 00000000..1e66582b
--- /dev/null
+++ b/src/lib/Color.test.ts
@@ -0,0 +1,22 @@
+import { expect, test } from "vitest";
+import { stringToChannels } from "./Color";
+
+test("Color string extractor works", () => {
+  expect(stringToChannels("lab", "lab(50% 0 0)")).toStrictEqual([50, 0, 0]);
+  expect(
+    stringToChannels(
+      "lab",
+      "lab(100.00000139649632% -0.000007807961277528364 0.000006766250648659877)"
+    )
+  ).toStrictEqual([
+    100.00000139649632, -0.000007807961277528364, 0.000006766250648659877,
+  ]);
+  expect(
+    stringToChannels(
+      "oklab",
+      "oklab(1.000000009791752,-3.3637913787742946e-8,6.836016341882356e-8)"
+    )
+  ).toStrictEqual([
+    1.000000009791752, -3.3637913787742946e-8, 6.836016341882356e-8,
+  ]);
+});
diff --git a/src/lib/Color.ts b/src/lib/Color.ts
index fc6facac..0fb2692f 100644
--- a/src/lib/Color.ts
+++ b/src/lib/Color.ts
@@ -22,8 +22,9 @@ export class Color {
   }
   toString(): string {
     const channelsString = Object.values(this.channels)
-      // .map((x) => x.toPrecision(4))
-      .join(",");
+      .map((x) => x || 0)
+      .map((x) => (x < 1e-7 ? 0 : x))
+      .join(", ");
     return `${this.spaceName}(${channelsString})`;
   }
   getChannel(channel: keyof typeof this.channels): number {
@@ -41,7 +42,10 @@ export class Color {
   inGamut(): boolean {
     // return new ColorIO(this.spaceName, this.toChannels()).inGamut();
     const x = this.toHex();
-    const y = colorFromHex(x, this.spaceName).toHex();
+    const y = colorFromHex(x, "srgb").toHex();
+    // if (x !== y) {
+    //   console.log("x", x, "y", y);
+    // }
     return x === y;
   }
   toColorIO(): ColorIO {
@@ -53,14 +57,7 @@ export class Color {
       const channels = new ColorIO(colorString).to(this.spaceName).coords;
       return this.fromChannels(channels);
     }
-    // extract the numbers from the string
-    const regex = new RegExp(`${this.spaceName}\\((.*)% (.*) (.*)\\)`);
-    const match = colorString.match(regex);
-    if (!match) {
-      throw new Error(`Invalid color string: ${colorString}`);
-    }
-    const [_, ...channels] = match;
-    return this.fromChannels([+channels[0], +channels[1], +channels[2]]);
+    return this.fromChannels(stringToChannels(this.spaceName, colorString));
   }
   fromChannels(channels: [number, number, number]): Color {
     const newColor = new (this.constructor as typeof Color)();
@@ -83,6 +80,23 @@ export class Color {
   }
 }
 
+export function stringToChannels(spaceName: string, str: string) {
+  let channels = str
+    .replace(`${spaceName}(`, "")
+    .replace(")", "")
+    .replace(/%/g, "")
+    .replace(/,/g, " ")
+    .trim()
+    .split(" ")
+    .filter((x) => x.length);
+  const allNumbers = channels.every((x) => !isNaN(+x));
+
+  if (!(channels.length === 3 && allNumbers)) {
+    throw new Error(`Invalid color string: ${str}`);
+  }
+  return channels.map((x) => Number(x) * 1) as [number, number, number];
+}
+
 export class CIELAB extends Color {
   name = "CIELAB";
   channels = { L: 0, a: 0, b: 0 };
diff --git a/src/lib/ColorLint.test.ts b/src/lib/ColorLint.test.ts
index 1da84cf2..45f1b997 100644
--- a/src/lib/ColorLint.test.ts
+++ b/src/lib/ColorLint.test.ts
@@ -15,6 +15,7 @@ function makePalFromHexes(hexes: string[]): Palette {
     name: "test",
     type: "categorical",
     evalConfig: {},
+    colorSpace: "lab",
   };
 }
 
diff --git a/src/lib/lints/background-differentiability.ts b/src/lib/lints/background-differentiability.ts
index 3b5e7d42..905af5d4 100644
--- a/src/lib/lints/background-differentiability.ts
+++ b/src/lib/lints/background-differentiability.ts
@@ -26,7 +26,7 @@ export default class BackgroundDifferentiability extends ColorLint<
     return `This palette has some colors (${str}) that are close to the background color`;
   }
   async suggestFix() {
-    const { colors, background } = this.palette;
+    const { colors, background, colorSpace } = this.palette;
     const backgroundL = background.toColorIO().to("lab").coords[0];
     const bgCloserToWhite = backgroundL > 50;
     const clamp = (x: number) => Math.max(0, Math.min(100, x));
@@ -38,7 +38,6 @@ export default class BackgroundDifferentiability extends ColorLint<
         return x;
       }
       const color = colors[idx];
-      const colorSpace = color.spaceName;
       const newColor = toColorSpace(color, "lab");
       const [_l, a, b] = newColor.toChannels();
       return toColorSpace(newColor.fromChannels([newL, a, b]), colorSpace);
diff --git a/src/stores/color-store.ts b/src/stores/color-store.ts
index c156f48e..36f9d6eb 100644
--- a/src/stores/color-store.ts
+++ b/src/stores/color-store.ts
@@ -1,17 +1,28 @@
 import { writable } from "svelte/store";
-import { Color, colorFromString } from "../lib/Color";
+import { Color, colorFromString, toColorSpace } from "../lib/Color";
 import ColorIO from "colorjs.io";
 import fits from "../assets/outfits.json";
 import { pick, deDup } from "../lib/utils";
 const outfitToPal = (x: any) => [x.fill1, x.fill2, x.fill3];
 const outfits = fits.map((x) => outfitToPal(x));
 export type PalType = "sequential" | "diverging" | "categorical";
+type ColorSpace =
+  | "lab"
+  | "hsl"
+  | "hsv"
+  | "jzazbz"
+  | "lch"
+  | "oklab"
+  | "oklch"
+  | "rgb"
+  | "srgb";
 type Pal<A> = {
   colors: A[];
   name: string;
   background: A;
   type: PalType;
   evalConfig: Record<string, any>;
+  colorSpace: ColorSpace;
 };
 export type Palette = Pal<Color>;
 
@@ -35,6 +46,7 @@ const InitialStore: StorageData = {
       background: "#ffffff",
       type: "categorical",
       evalConfig: {},
+      colorSpace: "lab",
     },
     {
       name: "Example 2",
@@ -42,6 +54,7 @@ const InitialStore: StorageData = {
       background: "#ffffff",
       type: "categorical",
       evalConfig: {},
+      colorSpace: "lab",
     },
     {
       name: "Example 3",
@@ -49,6 +62,7 @@ const InitialStore: StorageData = {
       background: "#ffffff",
       type: "categorical",
       evalConfig: {},
+      colorSpace: "lab",
     },
   ],
   currentPal: {
@@ -57,25 +71,23 @@ const InitialStore: StorageData = {
     background: "#ffffff",
     type: "categorical",
     evalConfig: {},
+    colorSpace: "lab",
   },
   engine: "google",
 };
 
 function convertStoreHexToColor(store: StorageData): StoreData {
+  const space = store.currentPal.colorSpace;
   return {
     palettes: store.palettes.map((x) => ({
-      name: x.name,
-      background: colorFromString(x.background, "lab"),
-      colors: x.colors.map((y) => colorFromString(y, "lab")),
-      type: x.type,
-      evalConfig: x.evalConfig,
+      ...x,
+      background: colorFromString(x.background, x.colorSpace),
+      colors: x.colors.map((y) => colorFromString(y, x.colorSpace)),
     })),
     currentPal: {
-      background: colorFromString(store.currentPal.background, "lab"),
-      name: store.currentPal.name,
-      colors: store.currentPal.colors.map((y) => colorFromString(y, "lab")),
-      type: store.currentPal.type,
-      evalConfig: store.currentPal.evalConfig,
+      ...store.currentPal,
+      background: colorFromString(store.currentPal.background, space),
+      colors: store.currentPal.colors.map((y) => colorFromString(y, space)),
     },
     engine: store.engine,
   };
@@ -84,18 +96,14 @@ function convertStoreHexToColor(store: StorageData): StoreData {
 function convertStoreColorToHex(store: StoreData): StorageData {
   return {
     palettes: store.palettes.map((x) => ({
-      name: x.name,
-      background: x.background.toHex(),
-      colors: x.colors.map((y) => y.toHex()),
-      type: x.type,
-      evalConfig: x.evalConfig,
+      ...x,
+      background: x.background.toString(),
+      colors: x.colors.map((y) => y.toString()),
     })),
     currentPal: {
-      background: store.currentPal.background.toHex(),
-      name: store.currentPal.name,
-      colors: store.currentPal.colors.map((y) => y.toHex()),
-      type: store.currentPal.type,
-      evalConfig: store.currentPal.evalConfig,
+      ...store.currentPal,
+      background: store.currentPal.background.toString(),
+      colors: store.currentPal.colors.map((y) => y.toString()),
     },
     engine: store.engine,
   };
@@ -237,6 +245,7 @@ function createStore() {
           background: colorFromString("#ffffff", "lab"),
           type: "categorical",
           evalConfig: {},
+          colorSpace: "lab",
         },
         palettes: insertPalette(n.palettes, n.currentPal),
       })),
@@ -290,6 +299,13 @@ function createStore() {
       palUp((n) => ({ ...n, background: color })),
     reset: () => set({ ...convertStoreHexToColor(InitialStore) }),
     setEngine: simpleSet("engine"),
+    setColorSpace: (colorSpace: ColorSpace) =>
+      palUp((n) => ({
+        ...n,
+        colorSpace,
+        background: toColorSpace(n.background, colorSpace),
+        colors: n.colors.map((x) => toColorSpace(x, colorSpace)),
+      })),
   };
 }