selection bugs, rearranging things for maureen

mcnuttandrew · Jan 28, 2024 · 97b511f · 97b511f
1 parent dfbad8a
commit 97b511f
Show file tree

Hide file tree

Showing 11 changed files with 225 additions and 115 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,17 +23,36 @@
 
   $: bg = ComparisonPal?.background.toHex() || "white";
 
-  $: colorSpace = ComparisonPal?.colorSpace || "lab";
+  let colorSpace = ComparisonPal?.colorSpace || "lab";
 </script>
 
 <div class="flex flex-col" style={`background: ${bg}`}>
   {#if ComparisonPal !== undefined}
     <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
@@ -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
@@ -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
@@ -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
@@ -1,20 +1,21 @@
 <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 {
       const newColors = body
         .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>