From 97b511fb909c4afbf4b44496e6acdc02be3adb11 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Sat, 27 Jan 2024 16:08:49 -0800
Subject: [PATCH] selection bugs, rearranging things for maureen

---
 README.md                                  |   8 ++
 src/App.svelte                             |  33 ++++---
 src/components/PalPreview.svelte           |  16 ++-
 src/components/SwatchTooltipContent.svelte |  25 -----
 src/content-modules/ComparePal.svelte      |  57 +++++++----
 src/content-modules/Controls.svelte        |   9 +-
 src/content-modules/LeftPanel.svelte       |   2 +-
 src/controls/AdjustOrder.svelte            |  56 +++++++++++
 src/controls/GetColorsFromString.svelte    |  20 ++--
 src/controls/ModifySelection.svelte        | 108 ++++++++++++---------
 src/scatterplot/ColorScatterPlot.svelte    |   6 +-
 11 files changed, 225 insertions(+), 115 deletions(-)
 create mode 100644 src/controls/AdjustOrder.svelte

diff --git a/README.md b/README.md
index 96b447ef..d65e3465 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,11 @@ First time you start it up you should also run `yarn prep data`
 
 # Todo bankruptcy
 
+- [ ] Gamut algorithm broken again
+- [ ] Allow no palettes, allows renaming of non-current palettes
+- [ ] MS didn't like the location of the new button
+- [ ] Colors from String should save on enter
+- [ ] Changing spaces is pretty bad on lab <-> oklab, cf ("#35ffbf", "#87b995", "#e84f82")
 - [ ] "new from blank" "new from small generic palette" buttons in the new menu.
 - [ ] "Easy on ramp" progressive disclosure
 - [ ] per cols 4 all: color blindness metric should maybe be sensitive to task?
@@ -26,6 +31,9 @@ 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, they do not work in polar also
+- [x] Bug: if comparing the same palette in two spaces, make a change and the space reverts
+- [x] Compare: should show the values a pal preview
+- [x] Deselect: In the row of colors, clicking on a selected color should deselect it
 - [x] Tool tip not staying put
 - [x] Chore: Extract some common types into a top level location (like types.ts type thing)
 - [x] For the palettes, there is a copy and delete bug. Try this: Copy Example 2, then immediately click delete (menu is still up). Surpise!
diff --git a/src/App.svelte b/src/App.svelte
index 1c9b9f6f..ba454a82 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -21,6 +21,8 @@
   import SuggestName from "./controls/SuggestName.svelte";
   import GetColorsFromString from "./controls/GetColorsFromString.svelte";
   import NewPal from "./controls/NewPal.svelte";
+  import AdjustOrder from "./controls/AdjustOrder.svelte";
+  import ModifySelection from "./controls/ModifySelection.svelte";
 
   import ContentEditable from "./components/ContentEditable.svelte";
 
@@ -78,6 +80,17 @@
             </div>
             <SuggestName />
           </div>
+          <div class="flex">
+            <SetColorSpace
+              colorSpace={currentPal.colorSpace}
+              onChange={(space) => colorStore.setColorSpace(space)}
+            />
+            <Background
+              onChange={(bg) => colorStore.setBackground(bg)}
+              bg={currentPal.background}
+              colorSpace={currentPal.colorSpace}
+            />
+          </div>
           <ColorScatterPlot
             scatterPlotMode={$configStore.scatterplotMode}
             colorSpace={currentPal.colorSpace}
@@ -99,16 +112,9 @@
               Add color {#if $configStore.scatterplotMode === "putting"}(move
                 mouse on chart){/if}
             </button>
-            <Background
-              onChange={(bg) => colorStore.setBackground(bg)}
-              bg={currentPal.background}
-              colorSpace={currentPal.colorSpace}
-            />
-            <SetColorSpace
-              colorSpace={currentPal.colorSpace}
-              onChange={(space) => colorStore.setColorSpace(space)}
-            />
-            <Sort />
+            <AdjustOrder />
+
+            <ModifySelection />
           </div>
           <div class="flex flex-col pl-2">
             <!-- overview / preview -->
@@ -117,7 +123,12 @@
               pal={currentPal}
               allowModification={true}
             />
-            <GetColorsFromString />
+            <GetColorsFromString
+              allowSort={true}
+              onChange={(colors) => colorStore.setCurrentPalColors(colors)}
+              colorSpace={currentPal.colorSpace}
+              colors={currentPal.colors}
+            />
             <div class="max-w-lg text-sm italic">
               This is a <select
                 value={palType}
diff --git a/src/components/PalPreview.svelte b/src/components/PalPreview.svelte
index a08eda8d..aaa9456d 100644
--- a/src/components/PalPreview.svelte
+++ b/src/components/PalPreview.svelte
@@ -12,9 +12,12 @@
   $: focusSet = new Set($focusStore.focusedColors);
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="flex flex-wrap rounded p-2 grow"
   style="background-color: {pal.background.toDisplay()};"
+  on:click={() => focusStore.clearColors()}
 >
   {#each pal.colors as color, idx}
     {#if allowModification}
@@ -24,10 +27,17 @@
         </div>
         <button
           slot="target"
+          let:tooltipOpen
           let:toggle
-          on:click={(e) => {
-            const isMeta = e.metaKey || e.ctrlKey;
-            const newColors = isMeta ? toggleElement(focusColors, idx) : [idx];
+          on:click|stopPropagation|preventDefault={(e) => {
+            const isMeta = e.metaKey || e.ctrlKey || e.shiftKey;
+            let newColors = [...focusColors];
+            if (isMeta) {
+              newColors = toggleElement(focusColors, idx);
+            } else {
+              newColors = tooltipOpen ? [] : [idx];
+            }
+
             focusStore.setColors(newColors);
             toggle();
           }}
diff --git a/src/components/SwatchTooltipContent.svelte b/src/components/SwatchTooltipContent.svelte
index 4cbceb51..4f24f533 100644
--- a/src/components/SwatchTooltipContent.svelte
+++ b/src/components/SwatchTooltipContent.svelte
@@ -4,7 +4,6 @@
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   import { buttonStyle } from "../lib/styles";
-  import { swap } from "../lib/utils";
   export let idx: number;
   export let color: Color;
   export let closeTooltip: () => void;
@@ -40,30 +39,6 @@
     >
       Delete
     </button>
-    {#if idx > 0}
-      <button
-        class="{buttonStyle} mr-2"
-        on:click|stopPropagation|preventDefault={() => {
-          colorStore.setSort(swap(colors, idx, idx - 1));
-          focusStore.setColors([idx - 1]);
-          idx = idx - 1;
-        }}
-      >
-        Move forward
-      </button>
-    {/if}
-    {#if idx < colors.length - 1}
-      <button
-        class="{buttonStyle} mr-2"
-        on:click|stopPropagation|preventDefault={() => {
-          colorStore.setSort(swap(colors, idx, idx + 1));
-          focusStore.setColors([idx + 1]);
-          idx = idx + 1;
-        }}
-      >
-        Move backward
-      </button>
-    {/if}
   </div>
   <div class="flex">
     {#each modes as colorMode, jdx}
diff --git a/src/content-modules/ComparePal.svelte b/src/content-modules/ComparePal.svelte
index edb8396d..2fd70f34 100644
--- a/src/content-modules/ComparePal.svelte
+++ b/src/content-modules/ComparePal.svelte
@@ -8,11 +8,12 @@
   import { buttonStyle } from "../lib/styles";
   import Tooltip from "../components/Tooltip.svelte";
   import MiniPalPreview from "../components/MiniPalPreview.svelte";
+  import PalPreview from "../components/PalPreview.svelte";
+  import GetColorsFromString from "../controls/GetColorsFromString.svelte";
 
   import SetColorSpace from "../controls/SetColorSpace.svelte";
 
   $: currentPalIdx = $colorStore.currentPal;
-  $: currentPal = $colorStore.palettes[currentPalIdx];
   $: compareIdx = $configStore.comparePal;
   $: focused = $focusStore.focusedColors;
   $: ComparisonPal =
@@ -22,7 +23,7 @@
 
   $: bg = ComparisonPal?.background.toHex() || "white";
 
-  $: colorSpace = ComparisonPal?.colorSpace || "lab";
+  let colorSpace = ComparisonPal?.colorSpace || "lab";
 </script>
 
 <div class="flex flex-col" style={`background: ${bg}`}>
@@ -30,9 +31,28 @@
     <div class="text-xl">
       <span class="italic">Compare Pal: {ComparisonPal.name}</span>
     </div>
+    <div class="flex">
+      <SetColorSpace
+        {colorSpace}
+        onChange={(space) => {
+          colorSpace = space;
+        }}
+      />
+      <Background
+        onChange={(background) => {
+          bg = background.toHex();
+        }}
+        bg={Color.colorFromHex(bg, colorSpace)}
+        {colorSpace}
+      />
+    </div>
     <ColorScatterPlot
       scatterPlotMode="looking"
-      Pal={{ ...ComparisonPal, background: Color.colorFromHex(bg, colorSpace) }}
+      Pal={{
+        ...ComparisonPal,
+        background: Color.colorFromHex(bg, colorSpace),
+        colorSpace,
+      }}
       {colorSpace}
       focusedColors={currentPalIdx === compareIdx ? focused : []}
       height={450}
@@ -52,7 +72,7 @@
 <div class="flex">
   <Tooltip>
     <button class={buttonStyle} slot="target" let:toggle on:click={toggle}>
-      Select comparison. Currently: {ComparisonPal?.name || "none"}
+      Change Compared Palette
     </button>
     <div class="flex flex-col w-80" slot="content">
       <div>Saved Palettes:</div>
@@ -67,20 +87,23 @@
       </div>
     </div>
   </Tooltip>
-  <Background
-    onChange={(background) => {
-      bg = background.toHex();
-    }}
-    bg={Color.colorFromHex(bg, colorSpace)}
-    {colorSpace}
-  />
-  <SetColorSpace
-    {colorSpace}
-    onChange={(space) => {
-      colorSpace = space;
-    }}
-  />
 </div>
+{#if ComparisonPal !== undefined}
+  <div class="flex flex-col pl-2">
+    <PalPreview
+      highlightSelected={false}
+      pal={ComparisonPal}
+      allowModification={false}
+    />
+
+    <GetColorsFromString
+      allowSort={false}
+      colors={ComparisonPal.colors}
+      onChange={() => {}}
+      {colorSpace}
+    />
+  </div>
+{/if}
 
 <style>
   .empty-pal-holder {
diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
index e8092791..0e1cfd1d 100644
--- a/src/content-modules/Controls.svelte
+++ b/src/content-modules/Controls.svelte
@@ -16,6 +16,9 @@
   $: focusedColors = $focusStore.focusedColors;
 </script>
 
+<AddColor />
+<SuggestionModificationToSelection />
+<AdjustColor />
 {#if focusedColors.length === 1}
   <div class="w-full border-t-2 border-black my-2"></div>
   <ColorChannelPicker
@@ -29,10 +32,8 @@
   />
 {/if}
 
-<AdjustColor />
 <DistributePoints />
 <AlignSelection />
-<ModifySelection />
-<AddColor />
-<SuggestionModificationToSelection />
+<!-- <ModifySelection /> -->
+
 <InterpolatePoints />
diff --git a/src/content-modules/LeftPanel.svelte b/src/content-modules/LeftPanel.svelte
index e0158276..e193c9a9 100644
--- a/src/content-modules/LeftPanel.svelte
+++ b/src/content-modules/LeftPanel.svelte
@@ -45,7 +45,7 @@
     {/if}
     <div class="w-full border-t-2 border-black my-6"></div>
     <div class="flex justify-between">
-      <div class="font-bold">Saved Pals</div>
+      <div class="font-bold">Saved Palettes</div>
       <Nav
         tabs={["open", "close"]}
         isTabSelected={(x) =>
diff --git a/src/controls/AdjustOrder.svelte b/src/controls/AdjustOrder.svelte
new file mode 100644
index 00000000..0b931a6d
--- /dev/null
+++ b/src/controls/AdjustOrder.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import focusStore from "../stores/focus-store";
+  import colorStore from "../stores/color-store";
+  import { buttonStyle } from "../lib/styles";
+
+  $: colors = $colorStore.palettes[$colorStore.currentPal].colors;
+  $: focused = $focusStore.focusedColors;
+  $: buttonsActive = focused.length > 0;
+</script>
+
+<button
+  class="{buttonStyle} mr-2"
+  class:opacity-30={!buttonsActive}
+  class:cursor-not-allowed={!buttonsActive}
+  on:click|stopPropagation|preventDefault={() => {
+    // move every element to the left
+    const newColors = [...colors];
+    const newFocused = [...focused];
+    for (let i = 0; i < focused.length; i++) {
+      const idx = focused[i];
+      if (idx === 0) {
+        continue;
+      }
+      newColors[idx] = colors[idx - 1];
+      newColors[idx - 1] = colors[idx];
+      newFocused[i] = idx - 1;
+    }
+    colorStore.setSort(newColors);
+    focusStore.setColors(newFocused);
+  }}
+>
+  Move left
+</button>
+<button
+  class="{buttonStyle} mr-2"
+  class:opacity-30={!buttonsActive}
+  class:cursor-not-allowed={!buttonsActive}
+  on:click|stopPropagation|preventDefault={() => {
+    // move every element to the right
+    const newColors = [...colors];
+    const newFocused = [...focused];
+    for (let i = focused.length - 1; i >= 0; i--) {
+      const idx = focused[i];
+      if (idx === colors.length - 1) {
+        continue;
+      }
+      newColors[idx] = colors[idx + 1];
+      newColors[idx + 1] = colors[idx];
+      newFocused[i] = idx + 1;
+    }
+    colorStore.setSort(newColors);
+    focusStore.setColors(newFocused);
+  }}
+>
+  Move right
+</button>
diff --git a/src/controls/GetColorsFromString.svelte b/src/controls/GetColorsFromString.svelte
index 9ebab380..e101a817 100644
--- a/src/controls/GetColorsFromString.svelte
+++ b/src/controls/GetColorsFromString.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import { Color } from "../lib/Color";
-  import colorStore from "../stores/color-store";
   import configStore from "../stores/config-store";
+  import Sort from "./Sort.svelte";
   let state: "idle" | "error" = "idle";
-  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
-  $: colors = currentPal.colors;
-  $: colorSpace = currentPal.colorSpace;
+  export let onChange: (colors: Color[]) => void;
+  export let colors: Color[];
+  export let colorSpace: string;
+  export let allowSort: boolean;
 
   function processBodyInput(body: string) {
     try {
@@ -13,8 +14,8 @@
         .split(",")
         .map((x) => x.replace(/"/g, "").trim())
         .filter((x) => x.length > 0)
-        .map((x) => Color.colorFromString(x, colorSpace));
-      colorStore.setCurrentPalColors(newColors);
+        .map((x) => Color.colorFromString(x, colorSpace as any));
+      onChange(newColors);
       state = "idle";
     } catch (e) {
       console.error(e);
@@ -27,7 +28,12 @@
 
 <div class="mt-2">
   <div class="flex justify-between w-full">
-    <label for="current-colors">Current Colors</label>
+    {#if allowSort}
+      <Sort />
+    {:else}
+      <div></div>
+    {/if}
+    <!-- <label for="current-colors">Current Colors</label> -->
     <!-- switch for including quotes -->
     <div class="flex items-center">
       <label for="include-quotes" class="mr-2">Include quotes</label>
diff --git a/src/controls/ModifySelection.svelte b/src/controls/ModifySelection.svelte
index fb25098a..c900250c 100644
--- a/src/controls/ModifySelection.svelte
+++ b/src/controls/ModifySelection.svelte
@@ -4,57 +4,77 @@
   import { buttonStyle } from "../lib/styles";
   import { deDup } from "../lib/utils";
   $: focusedColors = $focusStore.focusedColors;
-  $: focusSet = new Set(focusedColors);
+  $: focusedSet = new Set(focusedColors);
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;
 
-  $: hasDuplicates = colors && checkForDuplicates();
-  function checkForDuplicates() {
-    return deDup(colors).length !== colors.length;
-  }
-  function deDuplicate() {
-    let seenColors = new Set<string>([]);
-    let prunedIndexes = new Set<number>([]);
-    const newColors = colors.filter((x, idx) => {
-      if (seenColors.has(x.toHex())) {
-        prunedIndexes.add(idx);
-        return false;
-      }
-      seenColors.add(x.toHex());
-      return true;
-    });
-    const updatedFocusedColors = focusedColors.filter(
-      (x) => !prunedIndexes.has(x)
-    );
-    colorStore.setCurrentPalColors(newColors);
-    focusStore.setColors(updatedFocusedColors);
-  }
+  // $: hasDuplicates = colors && checkForDuplicates();
+  // function checkForDuplicates() {
+  //   return deDup(colors).length !== colors.length;
+  // }
+  // function deDuplicate() {
+  //   let seenColors = new Set<string>([]);
+  //   let prunedIndexes = new Set<number>([]);
+  //   const newColors = colors.filter((x, idx) => {
+  //     if (seenColors.has(x.toHex())) {
+  //       prunedIndexes.add(idx);
+  //       return false;
+  //     }
+  //     seenColors.add(x.toHex());
+  //     return true;
+  //   });
+  //   const updatedFocusedColors = focusedColors.filter(
+  //     (x) => !prunedIndexes.has(x)
+  //   );
+  //   colorStore.setCurrentPalColors(newColors);
+  //   focusStore.setColors(updatedFocusedColors);
+  // }
+  $: buttonsActive = focusedColors.length > 0;
 </script>
 
-{#if focusedColors.length > 0}
-  <div class="w-full border-t-2 border-black my-2"></div>
-  <div class="font-bold">Selection</div>
-  <div>
-    <button
-      class={buttonStyle}
-      on:click={() => {
-        colorStore.setCurrentPalColors(
-          colors.filter((_, idx) => !focusSet.has(idx))
-        );
-        focusStore.clearColors();
-      }}
-    >
-      Delete Selection
-    </button>
-    <button class={buttonStyle} on:click={() => focusStore.clearColors()}>
-      Clear Selection
-    </button>
-    {#if hasDuplicates}
+<!-- {#if focusedColors.length > 0} -->
+<!-- <div class="w-full border-t-2 border-black my-2"></div> -->
+<!-- <div class="font-bold">Selection</div> -->
+<div>
+  <button
+    class={buttonStyle}
+    class:opacity-30={!buttonsActive}
+    class:cursor-not-allowed={!buttonsActive}
+    on:click={() => {
+      colorStore.setCurrentPalColors(
+        colors.filter((_, idx) => !focusedSet.has(idx))
+      );
+      focusStore.clearColors();
+    }}
+  >
+    Delete
+  </button>
+  <button
+    class={buttonStyle}
+    class:opacity-30={!buttonsActive}
+    class:cursor-not-allowed={!buttonsActive}
+    on:click={() => focusStore.clearColors()}
+  >
+    Clear
+  </button>
+  <button
+    class={buttonStyle}
+    class:opacity-30={!buttonsActive}
+    class:cursor-not-allowed={!buttonsActive}
+    on:click={() =>
+      colorStore.setCurrentPalColors([
+        ...currentPal.colors,
+        ...currentPal.colors.filter((_, idx) => focusedSet.has(idx)),
+      ])}
+  >
+    Duplicate
+  </button>
+  <!-- {#if hasDuplicates}
       <div>
         <button class={buttonStyle} on:click={() => deDuplicate()}>
           Remove Duplicates
         </button>
       </div>
-    {/if}
-  </div>
-{/if}
+    {/if} -->
+</div>
+<!-- {/if} -->
diff --git a/src/scatterplot/ColorScatterPlot.svelte b/src/scatterplot/ColorScatterPlot.svelte
index deff5f5a..f4fa1b15 100644
--- a/src/scatterplot/ColorScatterPlot.svelte
+++ b/src/scatterplot/ColorScatterPlot.svelte
@@ -418,9 +418,9 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="flex pb-2" style="background: {bg.toDisplay()}">
   <div class="flex flex-col items-center">
-    <span class="text-2xl" style="color: {textColor}">
+    <!-- <span class="text-2xl" style="color: {textColor}">
       {config.title}
-    </span>
+    </span> -->
     <div class="flex h-full">
       <div class="h-full py-4" style="max-height: {height}px"></div>
       <svg {width} {height} class="ml-2" bind:this={svgContainer}>
@@ -643,7 +643,7 @@
   </div>
   <div class="h-full">
     <!-- invisible space inserter -->
-    <span class=" text-xl opacity-0">X</span>
+    <!-- <span class=" text-xl opacity-0">X</span> -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="flex h-full">
       <div class="flex flex-col">