all the type errors cleared, bugs

mcnuttandrew · Mar 11, 2024 · 57ad5c4 · 57ad5c4
1 parent 9d518c2
commit 57ad5c4
Show file tree

Hide file tree

Showing 37 changed files with 237 additions and 146 deletions.
diff --git a/src/components/ColorChannelPicker.svelte b/src/components/ColorChannelPicker.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import configStore from "../stores/config-store";
-
   import { Color, colorPickerConfig } from "../lib/Color";
   import ColorIO from "colorjs.io";
   export let color: Color;

diff --git a/src/components/KeyboardHooks.svelte b/src/components/KeyboardHooks.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { Color, colorPickerConfig } from "../lib/Color";
+  import type { ColorWrap } from "../types";
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   $: focusedSet = new Set($focusStore.focusedColors);
-  $: copiedData = [] as Color[];
+  $: copiedData = [] as ColorWrap<Color>[];
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal ? currentPal.colorSpace : "lab";
   $: config = colorPickerConfig[colorSpace];
@@ -73,30 +74,43 @@
         if (!focusSet.has(idx)) {
           return color;
         }
-        const channels = color.toChannels();
+        const channels = color.color.toChannels();
         const xVal = channels[config.xChannelIndex];
         const yVal = channels[config.yChannelIndex];
         const zVal = channels[config.zChannelIndex];
 
+        let newColor = color.color;
         if (!optionKey && key === "arrowdown") {
-          return color.setChannel(config.yChannel, yVal + verticalDir * step);
+          newColor = newColor.setChannel(
+            config.yChannel,
+            yVal + verticalDir * step
+          );
         }
         if (!optionKey && key === "arrowup") {
-          return color.setChannel(config.yChannel, yVal - verticalDir * step);
+          newColor = newColor.setChannel(
+            config.yChannel,
+            yVal - verticalDir * step
+          );
         }
         if (optionKey && key === "arrowdown") {
-          return color.setChannel(config.zChannel, zVal + zDir * step);
+          newColor = newColor.setChannel(config.zChannel, zVal + zDir * step);
         }
         if (optionKey && key === "arrowup") {
-          return color.setChannel(config.zChannel, zVal - zDir * step);
+          newColor = newColor.setChannel(config.zChannel, zVal - zDir * step);
         }
         if (key === "arrowleft") {
-          return color.setChannel(config.xChannel, xVal - horizontalDir * step);
+          newColor = newColor.setChannel(
+            config.xChannel,
+            xVal - horizontalDir * step
+          );
         }
         if (key === "arrowright") {
-          return color.setChannel(config.xChannel, xVal + horizontalDir * step);
+          newColor = newColor.setChannel(
+            config.xChannel,
+            xVal + horizontalDir * step
+          );
         }
-        return color;
+        return { ...color, color: newColor };
       });
 
       colorStore.setCurrentPalColors(newColors);

diff --git a/src/components/MiniPalPreview.svelte b/src/components/MiniPalPreview.svelte
@@ -12,7 +12,7 @@
     {#each pal.colors as color}
       <div
         class="h-6"
-        style="background-color: {color.toHex()}; width: {100 /
+        style="background-color: {color.color.toHex()}; width: {100 /
           pal.colors.length}%"
       ></div>
     {/each}

diff --git a/src/components/PalDiff.svelte b/src/components/PalDiff.svelte
@@ -12,7 +12,7 @@
   $: arrows = beforePal.colors.reduce(
     (acc, x, idx) => {
       const afterIdx = afterPal.colors.findIndex(
-        (y) => y.toHex() === x.toHex()
+        (y) => y.color.toHex() === x.color.toHex()
       );
       if (afterIdx === -1) return acc;
       acc.push({
@@ -56,7 +56,7 @@
       cx={idx * xStep + xMargin}
       cy={rowHeight / 2}
       r={radius}
-      fill={color.toHex()}
+      fill={color.color.toHex()}
     />
   {/each}
 
@@ -65,7 +65,7 @@
       cx={idx * xStep + xMargin}
       cy={rowHeight * 1.5}
       r={radius}
-      fill={color.toHex()}
+      fill={color.color.toHex()}
     />
   {/each}
   <text

diff --git a/src/components/PalPreview.svelte b/src/components/PalPreview.svelte
@@ -9,6 +9,7 @@
   import { dealWithFocusEvent } from "../lib/utils";
 
   $: focusSet = new Set($focusStore.focusedColors);
+  console.log("todo tag presentation", pal);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -30,20 +31,20 @@
           class:w-8={highlightSelected && focusSet.has(idx)}
           class:h-8={highlightSelected && focusSet.has(idx)}
           class:mb-5={highlightSelected && !focusSet.has(idx)}
-          style="background-color: {color.toDisplay()}"
+          style="background-color: {color.color.toDisplay()}"
         ></button>
       {:else}
         <div
           class={"w-6 h-6 mx-1 rounded-full transition-all"}
           class:w-8={highlightSelected && focusSet.has(idx)}
           class:h-8={highlightSelected && focusSet.has(idx)}
-          style="background-color: {color.toDisplay()}"
+          style="background-color: {color.color.toDisplay()}"
         ></div>
       {/if}
       {#if showTags}
-        <div class="text-xs flex flex-col">
-          {#each pal.colorSemantics[idx].tags as tag}
-            <span>{tag}</span>
+        <div class="flex flex-col text-center">
+          {#each color.tags as tag, idx}
+            <div class="text-xs">{tag}</div>
           {/each}
         </div>
       {/if}

diff --git a/src/content-modules/ComparePal.svelte b/src/content-modules/ComparePal.svelte
@@ -84,7 +84,7 @@
         startDragging={() => {}}
         stopDragging={() => {}}
         blindColors={(showDiff
-          ? currentPal.colors.map((x) => x.toColorSpace(colorSpace))
+          ? currentPal.colors.map((x) => x.color.toColorSpace(colorSpace))
           : []
         ).slice(
           0,

diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
@@ -29,26 +29,33 @@
     <div class="w-full border-t-2 border-black my-2"></div>
     <input
       class="w-full"
-      value={colors[focusedColors[0]].toHex()}
+      value={colors[focusedColors[0]].color.toHex()}
       on:change={(e) => {
         const updatedColors = [...colors];
-        updatedColors[focusedColors[0]] = Color.colorFromString(
+        const newColor = Color.colorFromString(
           e.currentTarget.value,
           colorSpace
         );
+        updatedColors[focusedColors[0]] = {
+          ...updatedColors[focusedColors[0]],
+          color: newColor,
+        };
         colorStore.setCurrentPalColors(updatedColors);
       }}
     />
     <ColorChannelPicker
-      color={colors[focusedColors[0]].toColorSpace(colorSpace)}
+      color={colors[focusedColors[0]].color.toColorSpace(colorSpace)}
       colorMode={$configStore.channelPickerSpace}
       onSpaceChange={(space) => {
         // @ts-ignore
         configStore.setChannelPickerSpace(space);
       }}
       onColorChange={(color) => {
         const updatedColors = [...colors];
-        updatedColors[focusedColors[0]] = color.toColorSpace(colorSpace);
+        updatedColors[focusedColors[0]] = {
+          ...updatedColors[focusedColors[0]],
+          color: color.toColorSpace(colorSpace),
+        };
         colorStore.setCurrentPalColors(updatedColors);
       }}
     />

diff --git a/src/controls/AddColor.svelte b/src/controls/AddColor.svelte
@@ -5,7 +5,7 @@
   import { suggestAdditionsToPalette } from "../lib/api-calls";
   import ColorButton from "../components/ColorButton.svelte";
   import AutocompleteOrSearch from "../components/AutocompleteOrSearch.svelte";
-  import { webColors } from "../lib/utils";
+  import { webColors, wrapInBlankSemantics } from "../lib/utils";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;
@@ -51,7 +51,9 @@
     <AutocompleteOrSearch
       setValue={(x) => {
         console.log("x", x);
-        const newColor = Color.colorFromString(x, colorSpace);
+        const newColor = wrapInBlankSemantics(
+          Color.colorFromString(x, colorSpace)
+        );
         const newColors = [...colors, newColor];
         colorStore.setCurrentPalColors(newColors);
       }}
@@ -77,7 +79,9 @@
         <ColorButton
           {color}
           clickColor={() => {
-            const newColor = Color.colorFromString(color, colorSpace);
+            const newColor = wrapInBlankSemantics(
+              Color.colorFromString(color, colorSpace)
+            );
             const newColors = [...colors, newColor];
             colorStore.setCurrentPalColors(newColors);
             interpretations = interpretations.filter((x) => x !== color);

diff --git a/src/controls/AdjustColor.svelte b/src/controls/AdjustColor.svelte
@@ -15,8 +15,11 @@
   function actionOnColor(focusedColors: number[], action: ColorEffect) {
     const newColors = [...colors];
     focusedColors.forEach((idx) => {
-      const channels = action(colors[idx]);
-      newColors[idx] = Color.colorFromChannels(channels, colorSpace);
+      const channels = action(colors[idx].color);
+      newColors[idx] = {
+        ...colors[idx],
+        color: Color.colorFromChannels(channels, colorSpace),
+      };
     });
     colorStore.setCurrentPalColors(newColors);
   }

diff --git a/src/controls/AlignSelection.svelte b/src/controls/AlignSelection.svelte
@@ -60,20 +60,23 @@
         on:click={() => {
           const newCoordinate = op(
             ...colors
-              .map((x) => x.toChannels())
+              .map((x) => x.color.toChannels())
               .filter((_, idx) => focusSet.has(idx))
               .map((x) => x[pos])
           );
           const newColors = colors
-            .map((x) => x.toChannels())
+            .map((x) => x.color.toChannels())
             .map((x, idx) => {
               let y = x;
               if (focusSet.has(idx)) {
                 y[pos] = newCoordinate;
               }
               return y;
             })
-            .map((x) => Color.colorFromChannels(x, colorSpace));
+            .map((x, idx) => ({
+              ...colors[idx],
+              color: Color.colorFromChannels(x, colorSpace),
+            }));
 
           colorStore.setCurrentPalColors(newColors);
         }}

diff --git a/src/controls/ColorTagger.svelte b/src/controls/ColorTagger.svelte
@@ -7,20 +7,20 @@
   $: currentPalette = $colorStore.palettes[$colorStore.currentPal];
   // guaranteed to be a single value by usage context
   $: focusedColorIdx = $focusStore.focusedColors[0];
-  $: semantics = currentPalette.colorSemantics[focusedColorIdx];
+  $: currentColor = currentPalette.colors[focusedColorIdx];
 
-  const updateTags = (updatedTags: string[]) =>
-    updateSemantics({ ...semantics, tags: updatedTags });
-  const updateSize = (size: (typeof sizes)[number]) =>
-    updateSemantics({ ...semantics, size });
+  // const updateTags = (updatedTags: string[]) =>
+  //   updateSemantics({ ...semantics, tags: updatedTags });
+  // const updateSize = (size: (typeof sizes)[number]) =>
+  //   updateSemantics({ ...semantics, size });
 
-  const updateMarkType = (markType: (typeof markTypes)[number]) =>
-    updateSemantics({ ...semantics, markType });
-  function updateSemantics(updatedSemantics: typeof semantics) {
-    const newSemantics = [...currentPalette.colorSemantics];
-    newSemantics[focusedColorIdx] = updatedSemantics;
-    colorStore.updateColorSemantics(newSemantics);
-  }
+  // const updateMarkType = (markType: (typeof markTypes)[number]) =>
+  //   updateSemantics({ ...semantics, markType });
+  // function updateSemantics(updatedSemantics: typeof semantics) {
+  //   const newSemantics = [...currentPalette.colorSemantics];
+  //   newSemantics[focusedColorIdx] = updatedSemantics;
+  //   colorStore.updateColorSemantics(newSemantics);
+  // }
   let tagInput = "";
   const sizes = [undefined, "small", "medium", "large"] as const;
   const markTypes = [
@@ -39,7 +39,7 @@
   These to mark properties like color, brand, and so on
 </div>
 
-<form
+<!-- <form
   on:submit|preventDefault|stopPropagation={() => {
     updateTags([...semantics.tags, tagInput]);
     tagInput = "";
@@ -85,4 +85,4 @@
   {#each sizes as option}
     <option value={option}>{option}</option>
   {/each}
-</select>
+</select> -->
diff --git a/src/controls/Config.svelte b/src/controls/Config.svelte
@@ -88,7 +88,7 @@
             return {
               background: background.toHex(),
               colorSpace,
-              colors: colors.map((c) => c.toHex()),
+              colors: colors.map((c) => c.color.toHex()),
               name,
               type,
             };

diff --git a/src/controls/DistributePoints.svelte b/src/controls/DistributePoints.svelte
@@ -19,20 +19,20 @@
     let sortedIndexes = focusedColors.sort((a, b) => {
       const modeToIdx = { horizontal: 1, vertical: 2, "in z space": 0 };
       const idx = modeToIdx[dir.direction] || 0;
-      const pointA = colors[a].toChannels()[idx];
-      const pointB = colors[b].toChannels()[idx];
+      const pointA = colors[a].color.toChannels()[idx];
+      const pointB = colors[b].color.toChannels()[idx];
       return pointA - pointB;
     });
     type Channels = [number, number, number];
-    const minPoint = colors[sortedIndexes[0]].toChannels() as Channels;
+    const minPoint = colors[sortedIndexes[0]].color.toChannels() as Channels;
     const maxPoint = colors[
       sortedIndexes[sortedIndexes.length - 1]
-    ].toChannels() as Channels;
+    ].color.toChannels() as Channels;
 
     const numPoints = sortedIndexes.length - 1;
     let newPoints = sortedIndexes.map((colorIdx, arrIdx) => {
       const t = arrIdx / numPoints;
-      const newPoint = colors.at(colorIdx)!.toChannels() as Channels;
+      const newPoint = colors.at(colorIdx)!.color.toChannels() as Channels;
       const xIdx = config.xChannelIndex;
       const yIdx = config.yChannelIndex;
       const zIdx = config.zChannelIndex;
@@ -51,7 +51,9 @@
 
     const newColors = [...colors].map((color, idx) => {
       const point = pointsByIndex[idx];
-      return point ? Color.colorFromChannels(point, colorSpace) : color;
+      return point
+        ? { ...color, color: Color.colorFromChannels(point, colorSpace) }
+        : color;
     });
 
     colorStore.setCurrentPalColors(newColors);

diff --git a/src/controls/InterpolatePoints.svelte b/src/controls/InterpolatePoints.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+  import type { ColorWrap } from "../types";
   import { Color } from "../lib/Color";
   import type { Palette } from "../types";
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   import { buttonStyle } from "../lib/styles";
   import PalPreview from "../components/PalPreview.svelte";
+  import { wrapInBlankSemantics } from "../lib/utils";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: focusedColors = $focusStore.focusedColors;
@@ -41,12 +43,12 @@
 
     return points;
   }
-  function createInterpolation(): Color[] {
+  function createInterpolation(): ColorWrap<Color>[] {
     const newColors = [];
     const seenHexes = new Set<string>([]);
     const deDuppedFocusedColors = focusedColors
-      .map((x) => [x, colors[x].toHex()] as [number, string])
-      .filter(([idx, hexColor]) => {
+      .map((x) => [x, colors[x].color.toHex()] as [number, string])
+      .filter(([_idx, hexColor]) => {
         if (seenHexes.has(hexColor)) {
           return false;
         }
@@ -57,7 +59,10 @@
     for (let idx = 0; idx < deDuppedFocusedColors.length - 1; idx++) {
       const pointA = colors[deDuppedFocusedColors[idx]];
       const pointB = colors[deDuppedFocusedColors[idx + 1]];
-      const newPoints = createInterpolatedPoints(pointA, pointB);
+      const newPoints = createInterpolatedPoints(
+        pointA.color,
+        pointB.color
+      ).map((x) => wrapInBlankSemantics(x));
       newColors.push(pointA, ...newPoints);
     }
     newColors.push(