improve interpolation

mcnuttandrew · Jan 19, 2024 · c0d8046 · c0d8046
1 parent 8924356
commit c0d8046
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 63 deletions.
diff --git a/src/content-modules/LeftPanel.svelte b/src/content-modules/LeftPanel.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
   import colorStore from "../stores/color-store";
-  import SuggestName from "./context-free-tools/SuggestName.svelte";
   import AddFamiliarPal from "./context-free-tools/AddFamiliarPal.svelte";
   import SuggestColorPal from "./context-free-tools/SuggestColorPal.svelte";
 
-  import PalPreview from "../components/PalPreview.svelte";
-  import Sort from "./context-free-tools/Sort.svelte";
-  import GetColorsFromString from "./context-free-tools/GetColorsFromString.svelte";
   import Config from "./context-free-tools/Config.svelte";
   import { buttonStyle } from "../lib/styles";
-  import ShortCuts from "./context-free-tools/ShortCuts.svelte";
 
   import SavedPals from "./SavedPals.svelte";
 </script>
@@ -31,8 +26,20 @@
     </div>
     <div class="flex">
       <AddFamiliarPal />
+      <button
+        class={buttonStyle}
+        on:click={() => {
+          const newPal = {
+            ...$colorStore.currentPal,
+            name: `${$colorStore.currentPal.name} copy`,
+            colors: [...$colorStore.currentPal.colors],
+          };
+          colorStore.createNewPal(newPal);
+        }}
+      >
+        Save
+      </button>
       <SuggestColorPal />
-      <ShortCuts />
     </div>
   </section>
 

diff --git a/src/content-modules/context-free-tools/Config.svelte b/src/content-modules/context-free-tools/Config.svelte
@@ -4,6 +4,18 @@
   import { buttonStyle } from "../../lib/styles";
   const aiModes = ["google", "openai"] as const;
   $: showBg = $configStore.showColorBackground;
+
+  const isMac = navigator.userAgent.indexOf("Mac OS X") !== -1;
+  const metaKey = isMac ? "⌘" : "ctrl";
+  const shortCuts = [
+    { name: "Undo", shortcut: `${metaKey}+z` },
+    { name: "Redo", shortcut: `${metaKey}+y` },
+    { name: "Delete Selection", shortcut: "delete" },
+    { name: "Copy", shortcut: `${metaKey}+c` },
+    { name: "Paste", shortcut: `${metaKey}+v` },
+    { name: "Move", shortcut: "arrow keys" },
+    { name: "Checkpoint palette", shortcut: `${metaKey}+s` },
+  ];
 </script>
 
 <Tooltip>
@@ -31,5 +43,14 @@
         on:change={() => configStore.setShowColorBackground(!showBg)}
       />
     </div>
+    <div class="font-bold">Short cuts</div>
+    <div>
+      {#each shortCuts as { name, shortcut }}
+        <div class="flex justify-between">
+          <div class="mr-4">{name}</div>
+          <div>{shortcut}</div>
+        </div>
+      {/each}
+    </div>
   </div>
 </Tooltip>
diff --git a/src/content-modules/context-free-tools/ShortCuts.svelte b/src/content-modules/context-free-tools/ShortCuts.svelte
diff --git a/src/content-modules/contextual-tools/InterpolatePoints.svelte b/src/content-modules/contextual-tools/InterpolatePoints.svelte
@@ -7,30 +7,23 @@
   import Tooltip from "../../components/Tooltip.svelte";
   import { buttonStyle } from "../../lib/styles";
   import PalPreview from "../../components/PalPreview.svelte";
-  const interpolationSchemes = ["linear", "quadratic"];
 
   $: focusedColors = $focusStore.focusedColors;
   $: colors = $colorStore.currentPal.colors;
   let colorSpace = "lab";
-  let interpolationScheme = "linear";
   let numPoints = 1;
-  $: pointA = colors[focusedColors[0]];
-  $: pointB = colors[focusedColors[1]];
+  let open = false;
   $: tempPal = (numPoints &&
     colorSpace &&
-    interpolationScheme &&
-    pointA &&
-    pointB && {
+    focusedColors.length >= 2 &&
+    open && {
       ...$colorStore.currentPal,
-      colors: [pointA, ...createInterpolatedPoints(), pointB],
+      colors: createInterpolation(true),
     }) as Palette;
-  function createInterpolatedPoints() {
+  function createInterpolatedPoints(pointA: Color, pointB: Color) {
     const points: Color[] = [];
     for (let i = 0; i < numPoints + 1; i++) {
       let t = i / (numPoints + 1);
-      if (interpolationScheme === "quadratic") {
-        t = t * t;
-      }
 
       if (t === 0 || t === 1) continue;
       const spaceOverWrite = { rgb: "srgb" } as any;
@@ -48,10 +41,27 @@
     }
     return points;
   }
+  function createInterpolation(forPreview: boolean): Color[] {
+    const newColors = [];
+    for (let idx = 0; idx < focusedColors.length - 1; idx++) {
+      const pointA = colors[focusedColors[idx]];
+      const pointB = colors[focusedColors[idx + 1]];
+      const newPoints = createInterpolatedPoints(pointA, pointB);
+      if (forPreview) {
+        newColors.push(pointA, ...newPoints);
+      } else {
+        newColors.push(...newPoints);
+      }
+    }
+    if (forPreview) {
+      newColors.push(colors[focusedColors[focusedColors.length - 1]]);
+    }
+    return newColors;
+  }
 </script>
 
-{#if focusedColors.length === 2}
-  <Tooltip>
+{#if focusedColors.length >= 2}
+  <Tooltip onClose={() => (open = false)}>
     <div slot="content" class="w-60">
       <div class="flex justify-between">
         <label for="color-space-select">Color Space</label>
@@ -69,16 +79,8 @@
           {/each}
         </select>
       </div>
-      <div class="flex justify-between">
-        <label for="interpolate-scheme">Scheme</label>
-        <select id="interpolate-scheme" bind:value={interpolationScheme}>
-          {#each interpolationSchemes as scheme}
-            <option value={scheme}>{scheme}</option>
-          {/each}
-        </select>
-      </div>
 
-      <div class="flex justify-between items-center w-full transition-all">
+      <!-- <div class="flex justify-between items-center w-full transition-all">
         <button
           class={buttonStyle}
           on:click={() => {
@@ -87,22 +89,35 @@
         >
           flip points
         </button>
-      </div>
+      </div> -->
       <PalPreview pal={tempPal} />
       <button
         class="{buttonStyle} mt-5"
         on:click={() => {
           let newColors = [...colors];
-          const newPoints = createInterpolatedPoints();
+          const newPoints = createInterpolation(false);
           newColors = [...newColors, ...newPoints];
           colorStore.setCurrentPalColors(newColors);
+          // also focus all of the new points
+          focusStore.setColors([
+            ...focusedColors,
+            ...newPoints.map((_, idx) => colors.length + idx),
+          ]);
         }}
       >
         Add points
       </button>
     </div>
     <span slot="target" let:toggle>
-      <button class={buttonStyle} on:click={toggle}>Interpolate</button>
+      <button
+        class={buttonStyle}
+        on:click={() => {
+          open = !open;
+          toggle();
+        }}
+      >
+        Interpolate
+      </button>
     </span>
   </Tooltip>
 {/if}