Comparison fixes

mcnuttandrew · Sep 12, 2024 · 8bd393d · 8bd393d
1 parent f3bc596
commit 8bd393d
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 15 deletions.
diff --git a/apps/color-buddy/src/content-modules/ComparePal.svelte b/apps/color-buddy/src/content-modules/ComparePal.svelte
@@ -3,6 +3,7 @@
   import colorStore from "../stores/color-store";
   import configStore from "../stores/config-store";
   import focusStore from "../stores/focus-store";
+  import examplePalStore from "../stores/example-palette-store";
 
   import Background from "../components/Background.svelte";
   import ColorScatterPlot from "../scatterplot/ColorScatterPlot.svelte";
@@ -22,9 +23,11 @@
   $: compareIdx = $configStore.comparePal;
   $: focused = $focusStore.focusedColors;
   $: ComparisonPal =
-    typeof compareIdx === "number"
-      ? $colorStore.palettes[compareIdx]
-      : undefined;
+    compareIdx === "tempPal"
+      ? $configStore.tempPal
+      : typeof compareIdx === "number"
+        ? $colorStore.palettes[compareIdx]
+        : undefined;
 
   $: bg =
     $configStore.compareBackground ||
@@ -34,6 +37,13 @@
   let showDiff = false;
 
   let colorSpace = ComparisonPal?.colorSpace || "lab";
+  let searchInput = "";
+  $: familiarPals = $examplePalStore.palettes
+    .map((x) => x.palette)
+    .filter((x) => {
+      if (searchInput === "") return true;
+      return x.name.toLowerCase().includes(searchInput.toLowerCase());
+    });
 </script>
 
 <div class="w-full border-l-8 border-stone-200 h-full">
@@ -58,7 +68,7 @@
           Change Compared Palette
         </button>
         <div class="flex flex-col w-80" slot="content">
-          <div>Saved Palettes:</div>
+          <div class="font-bold">Saved Palettes:</div>
           <div class="flex flex-wrap">
             {#each $colorStore.palettes as pal, idx (idx)}
               <MiniPalPreview
@@ -68,12 +78,40 @@
               />
             {/each}
           </div>
+          <div class="font-bold">Pre-built Palettes:</div>
+          <div class="flex flex-wrap">
+            <div>
+              <label>
+                Search
+
+                <input type="text" bind:value={searchInput} />
+              </label>
+            </div>
+            {#each familiarPals.slice(0, 15) as pal, idx (idx)}
+              <MiniPalPreview
+                {pal}
+                className={compareIdx === idx ? "border-2 border-black" : ""}
+                onClick={() => configStore.setComparePal(pal)}
+              />
+            {/each}
+          </div>
         </div>
       </Tooltip>
       <div>
         <button class={buttonStyle} on:click={() => (showDiff = !showDiff)}>
           {#if showDiff}Hide{:else}Show{/if} diff
         </button>
+        {#if compareIdx === "tempPal" && ComparisonPal}
+          <button
+            class={buttonStyle}
+            on:click={() => {
+              configStore.setComparePal(currentPalIdx);
+              colorStore.createNewPal(ComparisonPal);
+            }}
+          >
+            Modify this palette
+          </button>
+        {/if}
       </div>
     </div>
   </div>

diff --git a/apps/color-buddy/src/example/ExampleAlaCarte.svelte b/apps/color-buddy/src/example/ExampleAlaCarte.svelte
@@ -1,19 +1,23 @@
 <script lang="ts">
   import exampleStore from "../stores/example-store";
   import colorStore from "../stores/color-store";
+  import configStore from "../stores/config-store";
   import Example from "./Example.svelte";
   import Vega from "./Vega.svelte";
   import Swatches from "./Swatches.svelte";
   import Tooltip from "../components/Tooltip.svelte";
   import { buttonStyle } from "../lib/styles";
   export let exampleIdx: number;
   export let setExampleIdx: (idx: number) => void;
-  export let paletteIdx: number;
+  export let paletteIdx: number | "tempPal";
   export let allowModification: boolean = false;
   export let bgColor: string = "white";
   export let size: number = 400;
   $: example = { ...$exampleStore.examples[exampleIdx], size } as any;
-  $: palette = $colorStore.palettes[paletteIdx];
+  $: palette =
+    paletteIdx === "tempPal"
+      ? $configStore.tempPal!
+      : $colorStore.palettes[paletteIdx];
 </script>
 
 <div class="flex flex-col">

diff --git a/apps/color-buddy/src/example/Swatches.svelte b/apps/color-buddy/src/example/Swatches.svelte
@@ -7,12 +7,15 @@
 
   import { dealWithFocusEvent } from "../lib/utils";
 
-  export let paletteIdx: number;
+  export let paletteIdx: number | "tempPal";
   export let allowInteraction: boolean = true;
   export let hideHeader: boolean = false;
   export let maxWidth: number | undefined = undefined;
 
-  $: currentPal = $colorStore.palettes[paletteIdx];
+  $: currentPal =
+    paletteIdx === "tempPal"
+      ? $configStore.tempPal!
+      : $colorStore.palettes[paletteIdx];
   $: colors = currentPal?.colors || [];
   $: {
     if (

diff --git a/apps/color-buddy/src/scatterplot/ColorScatterPlot.svelte b/apps/color-buddy/src/scatterplot/ColorScatterPlot.svelte
@@ -409,15 +409,15 @@
               {/if}
             {/each}
             {#each annotationColors as annotationColor, i}
-              <line
+              <!-- <line
                 stroke-dasharray="5,5"
                 x1={x(annotationColor)}
                 y1={y(annotationColor)}
                 x2={x(colors[i])}
                 y2={y(colors[i])}
                 stroke={annotationColor.toDisplay()}
                 stroke-width="1"
-              />
+              /> -->
               <circle
                 {...CircleProps(annotationColor, i)}
                 class="cursor-pointer"

diff --git a/apps/color-buddy/src/stores/config-store.ts b/apps/color-buddy/src/stores/config-store.ts
@@ -1,4 +1,5 @@
 import { writable } from "svelte/store";
+import type { Palette } from "color-buddy-palette";
 import type { Engine } from "../lib/api-calls";
 
 interface StoreData {
@@ -7,7 +8,7 @@ interface StoreData {
   colorSim: "deuteranopia" | "protanopia" | "tritanopia" | "none" | "grayscale";
   compareBackground: string | undefined;
   compareBackgroundSpace: "lab" | "lch" | "hsl" | "hsv" | "rgb";
-  comparePal: number | undefined;
+  comparePal: number | undefined | "tempPal";
   compareSelectedExample: number;
   engine: Engine;
   evalDeltaDisplay: "none" | "76" | "CMC" | "2000" | "ITP" | "Jz" | "OK";
@@ -21,6 +22,7 @@ interface StoreData {
   scatterplotMode: "moving" | "putting";
   showColorBackground: "always show" | "show on drag" | "never show";
   showGamutMarkers: boolean;
+  tempPal: Palette | undefined;
   tooltipXY?: [string, string];
   tour: boolean;
   useSimulatorOnExamples: boolean;
@@ -53,6 +55,7 @@ const InitialStore: StoreData = {
   scatterplotMode: "moving",
   showColorBackground: "show on drag",
   showGamutMarkers: true,
+  tempPal: undefined,
   tooltipXY: undefined,
   tour: false,
   useSimulatorOnExamples: false,
@@ -102,8 +105,17 @@ function createStore() {
     subscribe,
     setRoute: (route: StoreData["route"]) =>
       persist((old) => ({ ...old, route })),
-    setComparePal: (comparePal: StoreData["comparePal"]) =>
-      persist((old) => ({ ...old, comparePal })),
+    setComparePal: (comparePal: number | undefined | Palette) => {
+      if (typeof comparePal === "number") {
+        return persist((old) => ({ ...old, comparePal, tempPal: undefined }));
+      } else {
+        return persist((old) => ({
+          ...old,
+          tempPal: comparePal,
+          comparePal: "tempPal",
+        }));
+      }
+    },
     reset: () => set({ ...InitialStore }),
     setEvalDisplayMode: (evalDisplayMode: StoreData["evalDisplayMode"]) =>
       persist((old) => ({ ...old, evalDisplayMode })),

diff --git a/apps/docs/docs/buglist.md b/apps/docs/docs/buglist.md
@@ -27,8 +27,8 @@
 
 ## Comparison
 
-- [ ] The dotted line connections are useful if the colors are in the same order and have only changed slightly, but confusing if the palette order has changed (for example, Tableau 10 Classic and Tableau 10). Since small changes are easy to see with just the rings vs disks, I'd leave the lines out for now.
-- [ ] To get a palette to compare, it has to be in the Manage set. From the Change Compared Palette dropdown, I'd add a "browse for more palettes" affordance that switched you to the Browse pane.
+- [x] The dotted line connections are useful if the colors are in the same order and have only changed slightly, but confusing if the palette order has changed (for example, Tableau 10 Classic and Tableau 10). Since small changes are easy to see with just the rings vs disks, I'd leave the lines out for now.
+- [x] To get a palette to compare, it has to be in the Manage set. From the Change Compared Palette dropdown, I'd add a "browse for more palettes" affordance that switched you to the Browse pane.
 
 ## Eval