From 913d94e31b46a412dc5f1c960a8a1b93e637c6f1 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Mon, 3 Jun 2024 14:32:28 -0700
Subject: [PATCH 1/2] Bug: make string conversion more robust

---
 src/controls/GetColorsFromString.svelte | 47 ++++++------
 src/controls/NewPal.svelte              | 31 +++++---
 src/lib/Color.ts                        | 52 ++++++++------
 src/lib/Utils.test.ts                   | 96 +++++++++++++++++++++++++
 src/lib/utils.ts                        | 19 +++++
 5 files changed, 190 insertions(+), 55 deletions(-)
 create mode 100644 src/lib/Utils.test.ts

diff --git a/src/controls/GetColorsFromString.svelte b/src/controls/GetColorsFromString.svelte
index 498ccbbd..993ed5e3 100644
--- a/src/controls/GetColorsFromString.svelte
+++ b/src/controls/GetColorsFromString.svelte
@@ -2,44 +2,56 @@
   import { Color } from "../lib/Color";
   import type { ColorWrap } from "../types";
   import configStore from "../stores/config-store";
-  import { wrapInBlankSemantics } from "../lib/utils";
+  import { wrapInBlankSemantics, processBodyTextToColors } from "../lib/utils";
 
   let state: "idle" | "error" = "idle";
   export let onChange: (colors: ColorWrap<Color>[]) => void;
   export let colors: ColorWrap<Color>[];
   export let colorSpace: string;
+  let errorMsg = "";
 
   function processBodyInput(body: string) {
+    console.log("asd");
     try {
-      const newColors = body
-        .split(",")
-        .map((x) => x.replace(/"/g, "").trim())
-        // remove all parens and brackets
-        .map((x) => x.replace(/[\(\)\[\]]/g, ""))
-        .filter((x) => x.length > 0)
-        .map((x) => Color.colorFromString(x, colorSpace as any))
-        .map((x, idx) => {
+      const newColors = processBodyTextToColors(body, colorSpace).map(
+        (x, idx) => {
           if (colors[idx]) {
             return { ...colors[idx], color: x };
           } else {
             return wrapInBlankSemantics(x);
           }
-        });
+        }
+      );
       onChange(newColors);
       state = "idle";
     } catch (e) {
       console.error(e);
+      errorMsg = e.message;
       state = "error";
       return;
     }
   }
   $: includeQuotes = $configStore.includeQuotes;
+  $: console.log("state", state);
 </script>
 
 <div class="w-full border-t-2 border-black my-2"></div>
 <div class="mt-2">
+  <div class="flex justify-between w-full text-sm">
+    <label for="current-colors">Current Colors</label>
+    <div class="flex items-center">
+      <label for="include-quotes" class="mr-2">Include quotes</label>
+      <input
+        type="checkbox"
+        id="include-quotes"
+        class="mr-2"
+        checked={includeQuotes}
+        on:change={() => configStore.setIncludeQuotes(!includeQuotes)}
+      />
+    </div>
+  </div>
   {#if state === "error"}
-    <div class="text-red-500">Error parsing colors</div>
+    <div class="text-red-500">Error parsing colors. {errorMsg}</div>
   {/if}
   <textarea
     id="current-colors"
@@ -57,19 +69,6 @@
     }}
     on:change={(e) => processBodyInput(e.currentTarget.value)}
   />
-  <div class="flex justify-between w-full text-sm">
-    <label for="current-colors">Current Colors</label>
-    <div class="flex items-center">
-      <label for="include-quotes" class="mr-2">Include quotes</label>
-      <input
-        type="checkbox"
-        id="include-quotes"
-        class="mr-2"
-        checked={includeQuotes}
-        on:change={() => configStore.setIncludeQuotes(!includeQuotes)}
-      />
-    </div>
-  </div>
 </div>
 
 <style>
diff --git a/src/controls/NewPal.svelte b/src/controls/NewPal.svelte
index 1f2e4279..2d2673e6 100644
--- a/src/controls/NewPal.svelte
+++ b/src/controls/NewPal.svelte
@@ -4,6 +4,7 @@
 
   import type { StringPalette, Palette } from "../types";
 
+  import { processBodyTextToColors } from "../lib/utils";
   import { buttonStyle, denseButtonStyle } from "../lib/styles";
   import Tooltip from "../components/Tooltip.svelte";
   import {
@@ -21,10 +22,12 @@
       const color = Color.colorFromString(x.color, colorSpace);
       return wrapInBlankSemantics(color);
     });
+    const background = Color.colorFromString(newPal.background, colorSpace);
+    console.log(background.toHex(), newPal.background);
     const pal = {
       ...newPal,
       colors,
-      background: Color.colorFromString(newPal.background, colorSpace),
+      background,
       colorSpace,
     } as Palette;
     colorStore.createNewPal(pal);
@@ -32,13 +35,23 @@
 
   let inputString = "";
   function processBodyInput(body: string) {
+    if (body.length === 0) {
+      return;
+    }
     try {
-      const newColors = body
-        .split(",")
-        .map((x) => x.replace(/"/g, "").trim())
-        .filter((x) => x.length > 0)
-        .map((x) => Color.colorFromString(x, colorSpace as any));
-      newPal(createPalFromHexes(newColors.map((x) => x.toHex())));
+      // const newColors = body
+      //   .split(",")
+      //   .map((x) => x.replace(/"/g, "").trim())
+      //   .filter((x) => x.length > 0)
+      const newColors = processBodyTextToColors(body, colorSpace as any).map(
+        (x) => x.toHex()
+      );
+      const builtPal = createPalFromHexes(newColors);
+      console.log(builtPal);
+      // .map(
+      //   (x) => Color.colorFromString(x, colorSpace as any)
+      // );
+      newPal(builtPal);
     } catch (e) {
       console.error(e);
       return;
@@ -103,12 +116,12 @@
       on:keydown={(e) => {
         if (e.key === "Enter") {
           e.preventDefault();
-          processBodyInput(e.currentTarget.value);
           e.currentTarget.blur();
         }
       }}
-      on:change={(e) => {
+      on:blur={(e) => {
         processBodyInput(e.currentTarget.value);
+        inputString = "";
       }}
     />
     <div class="mt-5 border-t-2 border-black"></div>
diff --git a/src/lib/Color.ts b/src/lib/Color.ts
index 1f3f849f..9f3124b6 100644
--- a/src/lib/Color.ts
+++ b/src/lib/Color.ts
@@ -29,6 +29,22 @@ export class Color {
     if (hexCache.has(str)) {
       return hexCache.get(str) as string;
     }
+    // const newColor = this.toColorIO().to("srgb");
+    // console.log(this.channels, newColor.coords);
+    // // convert [0, 1] to [0, 255] hex value
+    // const clamp = (x: number) => Math.min(255, Math.max(0, x));
+    // const coordAsHex = newColor.coords.map((x) =>
+    //   clamp(Math.round(x * 255))
+    //     .toString(16)
+    //     .padStart(2, "0")
+    // );
+
+    // let newHex = `#${coordAsHex.join("")}`;
+    // // if all channels are the same, return the three digit hex
+    // if (coordAsHex.every((x) => x[0] === x[1])) {
+    //   newHex = `#${coordAsHex[0][0]}${coordAsHex[1][0]}${coordAsHex[2][0]}`;
+    // }
+
     const newHex = this.toColorIO().to("srgb").toString({ format: "hex" });
     hexCache.set(str, newHex);
     return newHex;
@@ -73,21 +89,6 @@ export class Color {
     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;
   }
   toColorIO(): ColorIO {
     if (this.cachedColorIO) {
@@ -103,9 +104,10 @@ export class Color {
     }
   }
 
-  fromString(colorString: string): Color {
-    if (stringChannelsCache.has(colorString)) {
-      return this.fromChannels(stringChannelsCache.get(colorString)!);
+  fromString(colorString: string, allowError?: boolean): Color {
+    let key = `${colorString}-${this.spaceName}`;
+    if (stringChannelsCache.has(key)) {
+      return this.fromChannels(stringChannelsCache.get(key)!);
     }
     // const isTargetSpace = colorString.startsWith(`${this.spaceName}(`);
     // const isHex = colorString.startsWith("#");
@@ -120,11 +122,13 @@ export class Color {
       try {
         channels = new ColorIO(`#${colorString}`).to(this.spaceName).coords;
       } catch (e) {
-        console.log("error", e, colorString);
+        if (allowError) {
+          throw new Error("Invalid color string: " + colorString);
+        }
         channels = [0, 0, 0];
       }
     }
-    stringChannelsCache.set(colorString, channels);
+    stringChannelsCache.set(key, channels.map((x) => Number(x)) as Channels);
     return this.fromChannels(channels);
   }
   fromChannels(channels: Channels): Color {
@@ -445,9 +449,13 @@ class CAM16 extends Color {
 
 function colorFromString(
   colorString: string,
-  colorSpace: keyof typeof colorDirectory = "lab"
+  colorSpace: keyof typeof colorDirectory = "lab",
+  allowError?: boolean
 ): Color {
-  const result = new colorDirectory[colorSpace]().fromString(colorString);
+  const result = new colorDirectory[colorSpace]().fromString(
+    colorString,
+    allowError
+  );
   return result;
 }
 
diff --git a/src/lib/Utils.test.ts b/src/lib/Utils.test.ts
new file mode 100644
index 00000000..a7cdbb7d
--- /dev/null
+++ b/src/lib/Utils.test.ts
@@ -0,0 +1,96 @@
+import { expect, test } from "vitest";
+import { processBodyTextToColors } from "./utils";
+
+const reactVisColors = `
+   '#19CDD7',
+  '#DDB27C',
+  '#88572C',
+  '#FF991F',
+  '#F15C17',
+  '#223F9A',
+  '#DA70BF',
+  '#125C77',
+  '#4DC19C',
+  '#776E57',
+  '#12939A',
+  '#17B8BE',
+  '#F6D18A',
+  '#B7885E',
+  '#FFCB99',
+  '#F89570',
+  '#829AE3',
+  '#E79FD5',
+  '#1E96BE',
+  '#89DAC1',
+  '#B3AD9E'
+`;
+const resultColors = [
+  "#19CDD7",
+  "#DDB27C",
+  "#88572C",
+  "#FF991F",
+  "#F15C17",
+  "#223F9A",
+  "#DA70BF",
+  "#125C77",
+  "#4DC19C",
+  "#776E57",
+  "#12939A",
+  "#17B8BE",
+  "#F6D18A",
+  "#B7885E",
+  "#FFCB99",
+  "#F89570",
+  "#829AE3",
+  "#E79FD5",
+  "#1E96BE",
+  "#89DAC1",
+  "#B3AD9E",
+];
+const rvColorsShort = `
+[
+  '#12939A',
+  '#79C7E3',
+  '#1A3177',
+  '#FF9833',
+  '#EF5D28'
+]
+`;
+const spaces = [
+  "lab",
+  "hsl",
+  //
+  "lch",
+  "hsv",
+];
+test("processBodyTextToColors", async () => {
+  // color spaces
+
+  spaces.forEach((space) => {
+    console.log(space);
+    const result1 = processBodyTextToColors(reactVisColors, space);
+    expect(
+      result1.map((x) => x.toHex().toUpperCase()),
+      `Large rv colors in ${space} space should match`
+    ).toEqual(resultColors);
+
+    const result2 = processBodyTextToColors(rvColorsShort, space);
+    expect(
+      result2.map((x) => x.toHex().toUpperCase()),
+      `Short rv colors in ${space} space should match`
+    ).toEqual(["#12939A", "#79C7E3", "#1A3177", "#FF9833", "#EF5D28"]);
+  });
+});
+
+test("processBodyTextToColors: zoom in", async () => {
+  spaces.forEach((space) => {
+    resultColors.forEach((color) => {
+      expect(
+        processBodyTextToColors(`   '${color}'`, space).map((x) =>
+          x.toHex().toUpperCase()
+        ),
+        `Single color (${color}) in ${space} space should match`
+      ).toEqual([color]);
+    });
+  });
+});
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index fcd15778..d6fcdc72 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -759,3 +759,22 @@ export function splitMessageIntoTextAndColors(message: string): ParseBlock[] {
 
   return output;
 }
+
+export function processBodyTextToColors(body: string, colorSpace: string) {
+  return body
+    .split(",")
+    .map((x) =>
+      x
+        .replace(/"/g, "")
+        .replace(/'/g, "")
+        // remove all parens and brackets
+        .replace(/[\(\)\[\]]/g, "")
+        .trim()
+    )
+    .filter((x) => x.length > 0)
+    .map((x) => {
+      // console.log(x, Color.colorFromString(x, colorSpace as any).toHex());
+      return x;
+    })
+    .map((x) => Color.colorFromString(x, colorSpace as any, true));
+}

From ba689d7a75a0a039ae6b908c4fc2c8ee67711461 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Mon, 3 Jun 2024 14:39:12 -0700
Subject: [PATCH 2/2] fix lint

---
 src/App.svelte                          |  3 ---
 src/controls/GetColorsFromString.svelte |  4 +---
 src/controls/NewPal.svelte              | 15 ++-------------
 src/example/ExampleAlaCarte.svelte      |  1 -
 src/example/Examples.svelte             |  5 +----
 src/example/Swatches.svelte             |  1 -
 src/lib/Color.ts                        | 15 ---------------
 src/lib/Utils.test.ts                   |  3 +--
 src/lib/utils.ts                        |  5 +----
 9 files changed, 6 insertions(+), 46 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index d80452e0..12b76af1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -137,7 +137,4 @@
   .main-content {
     min-width: 0;
   }
-  .top-bar {
-    min-height: 50px !important;
-  }
 </style>
diff --git a/src/controls/GetColorsFromString.svelte b/src/controls/GetColorsFromString.svelte
index 993ed5e3..dded94bb 100644
--- a/src/controls/GetColorsFromString.svelte
+++ b/src/controls/GetColorsFromString.svelte
@@ -11,7 +11,6 @@
   let errorMsg = "";
 
   function processBodyInput(body: string) {
-    console.log("asd");
     try {
       const newColors = processBodyTextToColors(body, colorSpace).map(
         (x, idx) => {
@@ -26,13 +25,12 @@
       state = "idle";
     } catch (e) {
       console.error(e);
-      errorMsg = e.message;
+      errorMsg = (e as any)?.message;
       state = "error";
       return;
     }
   }
   $: includeQuotes = $configStore.includeQuotes;
-  $: console.log("state", state);
 </script>
 
 <div class="w-full border-t-2 border-black my-2"></div>
diff --git a/src/controls/NewPal.svelte b/src/controls/NewPal.svelte
index 2d2673e6..aab027a8 100644
--- a/src/controls/NewPal.svelte
+++ b/src/controls/NewPal.svelte
@@ -39,19 +39,8 @@
       return;
     }
     try {
-      // const newColors = body
-      //   .split(",")
-      //   .map((x) => x.replace(/"/g, "").trim())
-      //   .filter((x) => x.length > 0)
-      const newColors = processBodyTextToColors(body, colorSpace as any).map(
-        (x) => x.toHex()
-      );
-      const builtPal = createPalFromHexes(newColors);
-      console.log(builtPal);
-      // .map(
-      //   (x) => Color.colorFromString(x, colorSpace as any)
-      // );
-      newPal(builtPal);
+      const newColors = processBodyTextToColors(body, colorSpace as any);
+      newPal(createPalFromHexes(newColors.map((x) => x.toHex())));
     } catch (e) {
       console.error(e);
       return;
diff --git a/src/example/ExampleAlaCarte.svelte b/src/example/ExampleAlaCarte.svelte
index 4f9ffa52..ecb58433 100644
--- a/src/example/ExampleAlaCarte.svelte
+++ b/src/example/ExampleAlaCarte.svelte
@@ -57,7 +57,6 @@
       {paletteIdx}
       hideHeader={true}
       allowInteraction={allowModification}
-      bg={bgColor}
     />
   {:else}
     {#if example.svg}
diff --git a/src/example/Examples.svelte b/src/example/Examples.svelte
index 073684fa..a94fc657 100644
--- a/src/example/Examples.svelte
+++ b/src/example/Examples.svelte
@@ -170,10 +170,7 @@
   style={`height: calc(100% - 100px)`}
 >
   {#if $configStore.exampleRoute === "swatches"}
-    <Swatches
-      paletteIdx={$colorStore.currentPal}
-      bg={currentPal.background.toString()}
-    />
+    <Swatches paletteIdx={$colorStore.currentPal} />
   {/if}
   {#each examples as example, idx}
     {#if exampleShowMap[idx]}
diff --git a/src/example/Swatches.svelte b/src/example/Swatches.svelte
index 4cea4f25..a3d14c3e 100644
--- a/src/example/Swatches.svelte
+++ b/src/example/Swatches.svelte
@@ -11,7 +11,6 @@
   export let paletteIdx: number;
   export let allowInteraction: boolean = true;
   export let hideHeader: boolean = false;
-  export let bg: string;
 
   $: currentPal = $colorStore.palettes[paletteIdx];
   $: colors = currentPal?.colors || [];
diff --git a/src/lib/Color.ts b/src/lib/Color.ts
index 9f3124b6..7617baeb 100644
--- a/src/lib/Color.ts
+++ b/src/lib/Color.ts
@@ -29,21 +29,6 @@ export class Color {
     if (hexCache.has(str)) {
       return hexCache.get(str) as string;
     }
-    // const newColor = this.toColorIO().to("srgb");
-    // console.log(this.channels, newColor.coords);
-    // // convert [0, 1] to [0, 255] hex value
-    // const clamp = (x: number) => Math.min(255, Math.max(0, x));
-    // const coordAsHex = newColor.coords.map((x) =>
-    //   clamp(Math.round(x * 255))
-    //     .toString(16)
-    //     .padStart(2, "0")
-    // );
-
-    // let newHex = `#${coordAsHex.join("")}`;
-    // // if all channels are the same, return the three digit hex
-    // if (coordAsHex.every((x) => x[0] === x[1])) {
-    //   newHex = `#${coordAsHex[0][0]}${coordAsHex[1][0]}${coordAsHex[2][0]}`;
-    // }
 
     const newHex = this.toColorIO().to("srgb").toString({ format: "hex" });
     hexCache.set(str, newHex);
diff --git a/src/lib/Utils.test.ts b/src/lib/Utils.test.ts
index a7cdbb7d..940092e9 100644
--- a/src/lib/Utils.test.ts
+++ b/src/lib/Utils.test.ts
@@ -56,6 +56,7 @@ const rvColorsShort = `
   '#EF5D28'
 ]
 `;
+// color spaces
 const spaces = [
   "lab",
   "hsl",
@@ -64,8 +65,6 @@ const spaces = [
   "hsv",
 ];
 test("processBodyTextToColors", async () => {
-  // color spaces
-
   spaces.forEach((space) => {
     console.log(space);
     const result1 = processBodyTextToColors(reactVisColors, space);
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index d6fcdc72..6050d3bb 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -765,6 +765,7 @@ export function processBodyTextToColors(body: string, colorSpace: string) {
     .split(",")
     .map((x) =>
       x
+        // remove all quotes
         .replace(/"/g, "")
         .replace(/'/g, "")
         // remove all parens and brackets
@@ -772,9 +773,5 @@ export function processBodyTextToColors(body: string, colorSpace: string) {
         .trim()
     )
     .filter((x) => x.length > 0)
-    .map((x) => {
-      // console.log(x, Color.colorFromString(x, colorSpace as any).toHex());
-      return x;
-    })
     .map((x) => Color.colorFromString(x, colorSpace as any, true));
 }