cache for stats (#126)

* cache for stats * colors very close to back ground get rings
mcnuttandrew · Sep 30, 2024 · 5490dce · 5490dce
1 parent 6c3894e
commit 5490dce
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 11 deletions.
diff --git a/apps/color-buddy/src/components/ColorBall.svelte b/apps/color-buddy/src/components/ColorBall.svelte
@@ -63,15 +63,16 @@
     </button>
     <span class="flex flex-col items-start w-24 mx-2">
       <span class="flex max-w-5">
-        <ContentEditable
+        {color.toHex()}
+        <!-- <ContentEditable
           onChange={(x) => {
             const updatedColors = [...colors];
             updatedColors[idx] = Color.colorFromString(x, colorSpace);
             colorStore.setCurrentPalColors(updatedColors);
           }}
           value={color.toHex()}
           useEditButton={true}
-        />
+        /> -->
       </span>
       {#if colorName}<span class="text-right text-xs">
           {colorName}

diff --git a/apps/color-buddy/src/content-modules/LeftPanel.svelte b/apps/color-buddy/src/content-modules/LeftPanel.svelte
@@ -38,10 +38,7 @@
   ) {
     // is contrast metric
     if (!new Set(deltaMetrics).has(metric as any)) {
-      return colors.map((color) => {
-        const clr = color.toColorIO();
-        return clr.contrast(bg.toColorIO(), metric as any);
-      });
+      return colors.map((color) => color.contrast(bg, metric));
     }
     // is delta metric
     const deltas = [];

diff --git a/apps/color-buddy/src/controls/AdjustColor.svelte b/apps/color-buddy/src/controls/AdjustColor.svelte
@@ -7,7 +7,7 @@
   import Plus from "virtual:icons/fa6-solid/plus";
   import Minus from "virtual:icons/fa6-solid/minus";
 
-  import { buttonStyle, simpleTooltipRowStyle } from "../lib/styles";
+  import { buttonStyle } from "../lib/styles";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;

diff --git a/apps/color-buddy/src/scatterplot/ColorScatterPlot.svelte b/apps/color-buddy/src/scatterplot/ColorScatterPlot.svelte
@@ -320,6 +320,31 @@
     puttingPreview = false;
   }
   let svgContainer: any;
+
+  function computeStroke(
+    color: Color,
+    idx: number,
+    focusSet: Set<number>
+  ): string {
+    if (focusSet.has(idx) && focusedColors.length > 1) {
+      return "none";
+    }
+    const contrast = color.contrast(bg, "WCAG21");
+    const lum = color.luminance();
+    if (contrast < 1.1 && lum > 0.5) {
+      const darkerVersion = color.toColorSpace("lab");
+      return darkerVersion
+        .setChannel("L", Math.max(darkerVersion.getChannel("L") - 20))
+        .toHex();
+    }
+    if (contrast < 1.1 && lum <= 0.5) {
+      const darkerVersion = color.toColorSpace("lab");
+      return darkerVersion
+        .setChannel("L", Math.max(darkerVersion.getChannel("L") + 20))
+        .toHex();
+    }
+    return "none";
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -380,7 +405,7 @@
               {#if scatterPlotMode === "moving"}
                 <circle
                   {...CircleProps(color, i)}
-                  stroke={focusedColors.length === 1 ? "white" : "none"}
+                  stroke={computeStroke(color, i, focusSet)}
                   on:touchstart|preventDefault={(e) => {
                     onFocusedColorsChange([i]);
                     dragStart(e);
@@ -396,7 +421,7 @@
               {#if scatterPlotMode !== "moving"}
                 <circle
                   {...CircleProps(color, i)}
-                  stroke={focusedColors.length === 1 ? "white" : "none"}
+                  stroke={computeStroke(color, i, focusSet)}
                   on:mouseenter|preventDefault={() => hoverPoint(i)}
                 />
               {/if}

diff --git a/packages/palette/src/Color.ts b/packages/palette/src/Color.ts
@@ -10,6 +10,7 @@ type DistAlgorithm = "76" | "CMC" | "2000" | "ITP" | "Jz" | "OK";
 
 const ColorIOCaches = new Map<string, ColorIO>();
 const InGamutCache = new Map<string, boolean>();
+const colorStateCache = new Map<string, number>();
 /**
  * The base class for all color spaces
  *
@@ -70,7 +71,6 @@ export class Color {
     const newColor = this.copy();
     newColor.channels[channel] = value;
     return newColor;
-    // this.channels[channel] = value;
   }
   toDisplay(): string {
     return this.toHex();
@@ -143,10 +143,38 @@ export class Color {
     if (!allowedAlgorithms.has(algorithm)) {
       return 0;
     }
+    const key = `${this.toString()}-${color.toString()}-${algorithm}`;
 
     const left = this.toColorIO().to("srgb");
     const right = color.toColorIO().to("srgb");
-    return left.deltaE(right, algorithm);
+    const val = left.deltaE(right, algorithm);
+    colorStateCache.set(key, val);
+    return val;
+  }
+  contrast(
+    color: Color,
+    algorithm:
+      | "76"
+      | "CMC"
+      | "2000"
+      | "ITP"
+      | "APCA"
+      | "WCAG21"
+      | "Michelson"
+      | "Weber"
+      | "Lstar"
+      | "DeltaPhi"
+      | "none"
+  ): number {
+    const key = `${this.toString()}-${color.toString()}-${algorithm}`;
+    if (colorStateCache.has(key)) {
+      return colorStateCache.get(key)!;
+    }
+    const left = this.toColorIO().to("srgb");
+    const right = color.toColorIO().to("srgb");
+    const val = left.contrast(right, algorithm as any);
+    colorStateCache.set(key, val);
+    return val;
   }
   distance(color: Color, space: string): number {
     const colorSpace = space || this.spaceName;