current pal now an index

README.md

@@ -17,7 +17,6 @@ First time you start it up you should also run `yarn prep data`
 - [ ] Insert color theory options, eg insert opposing, inserting analogous color, etc, mine from the adobe picker
 - [ ] Labels, tooltips, etc
 - [ ] Nice to have: Rest of basic geometry manipulations: flip (horizontal, vertical), scale, Distribute radially
-- [ ] Bug report. If I am comparing a palette with itself and select a color in the main view, the color is not selected in the xy plot of the comparison panel. It is selected in the vertical only plot
 - [ ] For the palettes, a couple of ideas. Right now, feels like selecting a palette in the list reorders all the palettes, which is disorienting. I realize what you're doing in removing the palette I clicked on, adding the one I was editing. I think don't do this. Keep a fixed order (which I could change if I wanted to), and simply mark the palette that's being editing, don't remove it from the list. Similarly, if I copy a palette, put it right after the palette I copied, not up at the top. I also think adding a compact view of the palettes will eventually be necessary, so now might be the time to do it. Even as a default, would make the circles a bit smaller and pack them tighter. Or maybe make them tall rectangles that would pack even tighter.
 - [ ] For the palettes, there is a copy and delete bug. Try this: Copy Example 2, then immediately click delete (menu is still up). Surpise!
 - [ ] Tool tip not staying put
@@ -29,6 +28,7 @@ First time you start it up you should also run `yarn prep data`
 - [ ] Bug: rotate in polar coordinates doesn't work right
 - [ ] Ad hoc lints seem possible, do a spike
 - [ ] Directional subtlies for aligns
+- [x] Bug report. If I am comparing a palette with itself and select a color in the main view, the color is not selected in the xy plot of the comparison panel. It is selected in the vertical only plot
 - [x] Similarly, would like to work through the various options for the examples. Delete, Edit, Hide (not Mute) seem good. If you're going to Hide, then ideally you provide a selective unhide (dropdown of names is the easiest) as well as the unhide all. Your Solo means "hide everything else" which I'm not convinced is worth a button. However, a "full screen" or "fit width" "fit height" options that scales it up and reduces the rest to thumbnails might be cool. And I'm sure there are a few more we'll discover as we work with it.
 - [x] Albers color theory games style examples
 

src/App.svelte

@@ -24,6 +24,7 @@
 
   import ContentEditable from "./components/ContentEditable.svelte";
 
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   const tabs = ["examples", "compare", "eval"];
 </script>
 
@@ -40,9 +41,9 @@
               class={`${buttonStyle} `}
               on:click={() => {
                 const newPal = {
-                  ...$colorStore.currentPal,
-                  name: `${$colorStore.currentPal.name} copy`,
-                  colors: [...$colorStore.currentPal.colors],
+                  ...currentPal,
+                  name: `${currentPal.name} copy`,
+                  colors: [...currentPal.colors],
                 };
                 colorStore.createNewPal(newPal);
               }}
@@ -62,16 +63,16 @@
                 <span>✎</span>
                 <ContentEditable
                   onChange={(x) => colorStore.setCurrentPalName(x)}
-                  value={$colorStore.currentPal.name}
+                  value={currentPal.name}
                 />
               </div>
             </div>
             <SuggestName />
           </div>
           <ColorScatterPlot
             scatterPlotMode="moving"
-            colorSpace={$colorStore.currentPal.colorSpace}
-            Pal={$colorStore.currentPal}
+            colorSpace={currentPal.colorSpace}
+            Pal={currentPal}
             focusedColors={$focusStore.focusedColors}
             height={450}
             width={450}
@@ -83,11 +84,11 @@
           <div class="flex">
             <Background
               onChange={(bg) => colorStore.setBackground(bg)}
-              bg={$colorStore.currentPal.background}
-              colorSpace={$colorStore.currentPal.colorSpace}
+              bg={currentPal.background}
+              colorSpace={currentPal.colorSpace}
             />
             <SetColorSpace
-              colorSpace={$colorStore.currentPal.colorSpace}
+              colorSpace={currentPal.colorSpace}
               onChange={(space) => colorStore.setColorSpace(space)}
             />
             <Sort />
@@ -96,7 +97,7 @@
             <!-- overview / preview -->
             <PalPreview
               highlightSelected={true}
-              pal={$colorStore.currentPal}
+              pal={currentPal}
               allowModification={true}
             />
             <GetColorsFromString />

src/components/ColorScatterPlot.svelte

@@ -104,9 +104,10 @@
   $: CircleProps = (color: Color, i: number) => ({
     cx: x(color),
     cy: y(color),
-    r: 10,
+    // r: 10,
     class: "cursor-pointer",
     fill: color.toDisplay(),
+    r: 10 + (focusSet.has(i) ? 5 : 0),
   });
   $: RectProps = (color: Color, i: number) => ({
     y: z(color),
@@ -310,7 +311,6 @@
               {#if scatterPlotMode === "moving"}
                 <circle
                   {...CircleProps(color, i)}
-                  r={10 + (focusSet.has(i) ? 5 : 0)}
                   on:touchstart|preventDefault={(e) => {
                     onFocusedColorsChange([i]);
                     dragStart(e);

src/components/ColorScatterPlotPolarGuide.svelte

@@ -19,7 +19,8 @@
   $: config = colorPickerConfig[colorSpace as keyof typeof colorPickerConfig];
   $: rNonDimScale = scaleLinear().domain([0, 1]).range(rScale.domain());
   $: focusedColors = $focusStore.focusedColors;
-  $: colors = $colorStore.currentPal.colors;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colors = currentPal.colors;
 
   $: points = {
     centerTop: {

src/components/ColorScatterPlotXYGuides.svelte

@@ -17,7 +17,8 @@
   $: xNonDimScale = scaleLinear().domain([0, 1]).range(xScale.domain());
   $: yNonDimScale = scaleLinear().domain([0, 1]).range(yScale.domain());
   $: focusedColors = $focusStore.focusedColors;
-  $: colors = $colorStore.currentPal.colors;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colors = currentPal.colors;
   $: axisFormatter =
     colorPickerConfig[colorSpace as keyof typeof colorPickerConfig].axisLabel;
 

src/components/Example.svelte

@@ -42,8 +42,9 @@
     }
     return svg;
   }
-  $: colors = $colorStore.currentPal.colors;
-  $: bg = $colorStore.currentPal.background;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colors = currentPal.colors;
+  $: bg = currentPal.background;
   $: colors, example, attachListeners();
 
   function onClick(e: any) {

src/components/ExplanationViewer.svelte

@@ -37,7 +37,8 @@
     return output;
   }
 
-  $: colors = $colorStore.currentPal.colors;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colors = currentPal.colors;
 </script>
 
 <div class="text-sm italic">

src/components/KeyboardHooks.svelte

@@ -4,7 +4,8 @@
   import focusStore from "../stores/focus-store";
   $: focusedSet = new Set($focusStore.focusedColors);
   $: copiedData = [] as Color[];
-  $: colorSpace = $colorStore.currentPal.colorSpace;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colorSpace = currentPal.colorSpace;
   $: config = colorPickerConfig[colorSpace];
   $: xStep = config.xStep;
   $: yStep = config.yStep;
@@ -44,7 +45,7 @@
     if (key === "backspace" || key === "delete") {
       e.preventDefault();
       const focusedSet = new Set($focusStore.focusedColors);
-      const newColors = $colorStore.currentPal.colors.filter(
+      const newColors = currentPal.colors.filter(
         (_, idx) => !focusedSet.has(idx)
       );
       colorStore.setCurrentPalColors(newColors);
@@ -63,7 +64,7 @@
       }
       e.preventDefault();
       const focusSet = new Set($focusStore.focusedColors);
-      const newColors = $colorStore.currentPal.colors.map((color, idx) => {
+      const newColors = currentPal.colors.map((color, idx) => {
         if (!focusSet.has(idx)) {
           return color;
         }
@@ -91,25 +92,15 @@
     // SAVE BY DUPLICATING PALETTE
     if (key === "s" && metaKey) {
       e.preventDefault();
-      const newPal = {
-        ...$colorStore.currentPal,
-        name: `${$colorStore.currentPal.name} copy`,
-        colors: [...$colorStore.currentPal.colors],
-      };
-      colorStore.createNewPal(newPal);
+      colorStore.duplicatePal($colorStore.currentPal);
     }
 
     // COPY PASTE
     if (key === "c" && metaKey && $focusStore.focusedColors.length) {
-      copiedData = $colorStore.currentPal.colors.filter((_, idx) =>
-        focusedSet.has(idx)
-      );
+      copiedData = currentPal.colors.filter((_, idx) => focusedSet.has(idx));
     }
     if (key === "v" && metaKey && copiedData.length) {
-      colorStore.setCurrentPalColors([
-        ...$colorStore.currentPal.colors,
-        ...copiedData,
-      ]);
+      colorStore.setCurrentPalColors([...currentPal.colors, ...copiedData]);
     }
   }
 </script>

src/components/Vega.svelte

@@ -7,8 +7,8 @@
   export let size = 300;
 
   let producedSVG: string = "";
-
-  $: getSVG(spec, $colorStore.currentPal).then((x) => {
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: getSVG(spec, currentPal).then((x) => {
     producedSVG = x;
   });
 </script>

src/content-modules/ComparePal.svelte

@@ -11,11 +11,13 @@
 
   import SetColorSpace from "./contextual-tools/SetColorSpace.svelte";
 
-  $: compareName = $configStore.comparePal;
-  $: ComparisonPal = $colorStore.palettes.find((x) => x.name === compareName);
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: compareIdx = $configStore.comparePal;
+  $: focused = $focusStore.focusedColors;
+  $: ComparisonPal = compareIdx ? $colorStore.palettes[compareIdx] : undefined;
   $: {
-    if (!ComparisonPal && $colorStore.currentPal.name === compareName) {
-      ComparisonPal = $colorStore.currentPal;
+    if (!ComparisonPal && $colorStore.currentPal === compareIdx) {
+      ComparisonPal = currentPal;
     }
   }
   let bg = ComparisonPal?.background.toHex() || "white";
@@ -26,13 +28,13 @@
 <div class="flex flex-col" style={`background: ${bg}`}>
   {#if ComparisonPal !== undefined}
     <div class="text-xl">
-      <span class="italic">Compare Pal: {compareName}</span>
+      <span class="italic">Compare Pal: {ComparisonPal.name}</span>
     </div>
     <ColorScatterPlot
       scatterPlotMode="looking"
       Pal={{ ...ComparisonPal, background: Color.colorFromHex(bg, colorSpace) }}
       {colorSpace}
-      focusedColors={$focusStore.focusedColors}
+      focusedColors={$colorStore.currentPal === compareIdx ? focused : []}
       height={450}
       width={450}
       onColorsChange={() => {}}
@@ -50,22 +52,22 @@
 <div class="flex">
   <Tooltip>
     <button class={buttonStyle} slot="target" let:toggle on:click={toggle}>
-      Select comparison. Currently: {compareName || "none"}
+      Select comparison. Currently: {ComparisonPal?.name || "none"}
     </button>
     <div class="flex flex-col w-80" slot="content">
       <div class="flex flex-col">
         Current Palette:
         <MiniPalPreview
-          pal={$colorStore.currentPal}
-          onClick={() => configStore.setComparePal($colorStore.currentPal.name)}
+          pal={currentPal}
+          onClick={() => configStore.setComparePal($colorStore.currentPal)}
         />
       </div>
       <div>Other Saved Palettes:</div>
       <div class="flex flex-wrap">
-        {#each [$colorStore.currentPal, ...$colorStore.palettes] as pal, idx}
+        {#each [currentPal, ...$colorStore.palettes] as pal, idx}
           <MiniPalPreview
             {pal}
-            onClick={() => configStore.setComparePal(pal.name)}
+            onClick={() => configStore.setComparePal(idx)}
           />
         {/each}
       </div>

src/content-modules/Controls.svelte

@@ -11,8 +11,9 @@
   import Rotate from "./contextual-tools/Rotate.svelte";
   import ColorChannelPicker from "../components/ColorChannelPicker.svelte";
 
-  $: colors = $colorStore.currentPal.colors;
-  $: colorSpace = $colorStore.currentPal.colorSpace;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colors = currentPal.colors;
+  $: colorSpace = currentPal.colorSpace;
   $: focusedColors = $focusStore.focusedColors;
 </script>
 

src/content-modules/Eval.svelte

@@ -16,13 +16,14 @@
   $: selectedBlindType = $configStore.colorSim;
 
   let metric: "dE" | "dE94" | "none" = "none";
-  $: colors = $colorStore.currentPal.colors;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colors = currentPal.colors;
   $: stats = computeStats(colors, metric);
 
   $: colorNames = colorNameSimple(colors);
-  $: palType = $colorStore.currentPal.type;
-  $: evalConfig = $colorStore.currentPal.evalConfig;
-  $: checks = runLintChecks($colorStore.currentPal).filter((x) =>
+  $: palType = currentPal.type;
+  $: evalConfig = currentPal.evalConfig;
+  $: checks = runLintChecks(currentPal).filter((x) =>
     x.taskTypes.includes(palType)
   );
 
@@ -243,7 +244,7 @@
           {/if}
         {/each}
       {/each}
-      {#if Object.keys($colorStore.currentPal.evalConfig)}
+      {#if Object.keys(currentPal.evalConfig)}
         <button
           class={`${buttonStyle} mt-5`}
           on:click={() => colorStore.setCurrentPalEvalConfig({})}

src/content-modules/Examples.svelte

@@ -19,8 +19,9 @@
   let modalState: "closed" | "input-svg" | "input-vega" | "edit-colors" =
     "closed";
   let modifyingExample: number | false = false;
-  $: bg = $colorStore.currentPal.background;
-  $: colorSpace = $colorStore.currentPal.colorSpace;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: bg = currentPal.background;
+  $: colorSpace = currentPal.colorSpace;
   let value = "";
 
   $: detectedColors = [] as string[];

src/content-modules/SavedPals.svelte

@@ -3,6 +3,7 @@
   import focusStore from "../stores/focus-store";
 
   import PalPreview from "../components/PalPreview.svelte";
+
   import { buttonStyle } from "../lib/styles";
   import Tooltip from "../components/Tooltip.svelte";
 </script>
@@ -13,11 +14,14 @@
     <div class="flex flex-col mt-2 h-fit">
       <div class="flex items-center justify-between">
         <div>
+          {#if i === $colorStore.currentPal}
+            <span class="font-bold">Current Pal:</span>
+          {/if}
           <button
             class={buttonStyle}
             on:click={() => {
               focusStore.clearColors();
-              colorStore.startUsingPal(pal.name);
+              colorStore.startUsingPal(i);
             }}
           >
             {pal.name}
@@ -27,9 +31,9 @@
           <div slot="content" let:onClick>
             <button
               class={buttonStyle}
-              on:click={() => colorStore.copyPal(pal.name)}
+              on:click={() => colorStore.duplicatePal(i)}
             >
-              Copy
+              Duplicate
             </button>
             <button
               class={buttonStyle}

src/content-modules/SwatchTooltipContent.svelte

@@ -8,8 +8,9 @@
   export let idx: number;
   export let color: Color;
   export let closeTooltip: () => void;
-  $: colors = $colorStore.currentPal.colors;
-  $: colorSpace = $colorStore.currentPal.colorSpace;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colors = currentPal.colors;
+  $: colorSpace = currentPal.colorSpace;
 
   function updateColor(color: Color) {
     const updatedColors = [...colors];

src/content-modules/Swatches.svelte

@@ -4,10 +4,10 @@
   import focusStore from "../stores/focus-store";
   import Tooltip from "../components/Tooltip.svelte";
   import SwatchTooltipContent from "./SwatchTooltipContent.svelte";
-  import { swap } from "../lib/utils";
-  import { buttonStyle } from "../lib/styles";
-  $: colors = $colorStore.currentPal.colors;
-  $: bg = $colorStore.currentPal.background;
+
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colors = currentPal.colors;
+  $: bg = currentPal.background;
   $: focused = $focusStore.focusedColors;
   $: focusSet = new Set(focused);