some refactoring to make pal manipulation easier

mcnuttandrew · Feb 14, 2024 · 46b6b54 · 46b6b54
1 parent 58f5fdb
commit 46b6b54
Show file tree

Hide file tree

Showing 15 changed files with 123 additions and 108 deletions.
diff --git a/src/controls/Config.svelte b/src/controls/Config.svelte
@@ -55,6 +55,8 @@
                 evalConfig: {},
                 name,
                 type,
+                intendedAffects: [],
+                intendedContexts: [],
               };
             });
           colorStore.setPalettes(pals);

diff --git a/src/controls/NewPal.svelte b/src/controls/NewPal.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
   import { Color } from "../lib/Color";
-  import colorStore, { newGenericPal } from "../stores/color-store";
+  import colorStore from "../stores/color-store";
   import type { StringPalette, Palette } from "../types";
   import focusStore from "../stores/focus-store";
   import { onMount } from "svelte";
   import Tooltip from "../components/Tooltip.svelte";
   import { VegaColors } from "../lib/charts";
   import { buttonStyle, denseButtonStyle } from "../lib/styles";
-  import { makePal, toHex } from "../lib/utils";
+  import {
+    makePal,
+    toHex,
+    newGenericPal,
+    createPalFromHexes,
+  } from "../lib/utils";
   import type { ExtendedPal } from "../lib/utils";
   import SuggestColorPal from "./SuggestColorPal.svelte";
 
@@ -16,17 +21,6 @@
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal.colorSpace;
 
-  function createPalFromHexes(colors: string[]): StringPalette {
-    return {
-      name: "new palette",
-      colors,
-      background: "#ffffff",
-      type: "categorical",
-      evalConfig: {},
-      colorSpace: "lab",
-    };
-  }
-
   onMount(async () => {
     let newPals = [] as ExtendedPal[];
 

diff --git a/src/controls/SuggestColorPal.svelte b/src/controls/SuggestColorPal.svelte
@@ -5,7 +5,7 @@
   import { suggestPal } from "../lib/api-calls";
   import type { Palette } from "../types";
   import PalPreview from "../components/PalPreview.svelte";
-  import { buttonStyle, AIButtonStyle } from "../lib/styles";
+  import { buttonStyle } from "../lib/styles";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal.colorSpace;
@@ -29,6 +29,8 @@
       type: "categorical",
       evalConfig: {},
       colorSpace: colorSpace as any,
+      intendedAffects: [],
+      intendedContexts: [],
     };
   }
 

diff --git a/src/controls/SuggestionModificationToSelection.svelte b/src/controls/SuggestionModificationToSelection.svelte
@@ -6,6 +6,7 @@
   import { suggestContextualAdjustments } from "../lib/api-calls";
   import { buttonStyle } from "../lib/styles";
   import PalDiff from "../components/PalDiff.svelte";
+  import { toPal } from "../lib/utils";
 
   let requestState: "idle" | "loading" | "loaded" | "failed" = "idle";
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
@@ -17,17 +18,6 @@
   let suggestedColorSets: string[][] = [];
   let palPrompt: string = "";
 
-  function toPal(colors: string[]) {
-    return {
-      colors: colors.map((x) => Color.colorFromString(x, colorSpace)),
-      name: "mods",
-      background: currentPal.background,
-      type: currentPal.type,
-      evalConfig: {},
-      colorSpace,
-    };
-  }
-
   function makeRequest() {
     requestState = "loading";
     const pal = selectedColors.length
@@ -100,9 +90,9 @@
         <div>
           <PalDiff
             beforePal={selectedColors.length
-              ? toPal(selectedColors)
+              ? toPal(selectedColors, currentPal, colorSpace)
               : currentPal}
-            afterPal={toPal(suggestedColors)}
+            afterPal={toPal(suggestedColors, currentPal, colorSpace)}
           />
         </div>
         <div class="flex justify-between">

diff --git a/src/example/Examples.svelte b/src/example/Examples.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { Color } from "../lib/Color";
-  import type { Palette } from "../types";
   import exampleStore, {
     DEMOS,
     detectColorsInSvgString,
@@ -15,6 +14,7 @@
   import MonacoEditor from "../components/MonacoEditor.svelte";
   import Swatches from "./Swatches.svelte";
   import Tooltip from "../components/Tooltip.svelte";
+  import { makePalFromString } from "../lib/utils";
 
   let modalState: "closed" | "input-svg" | "input-vega" | "edit-colors" =
     "closed";
@@ -30,18 +30,6 @@
     exampleStore.toggleSection(group as keyof typeof $exampleStore.sections);
   }
 
-  function createNewPal() {
-    const newPal: Palette = {
-      colors: detectedColors.map((x) => Color.colorFromString(x, colorSpace)),
-      background: bg,
-      name: "New Palette",
-      type: "categorical",
-      evalConfig: {},
-      colorSpace: "lab",
-    };
-    colorStore.createNewPal(newPal);
-  }
-
   let validJSON = false;
   $: {
     if (modalState === "input-vega") {
@@ -345,7 +333,12 @@
         >
           Back to editing SVG
         </button>
-        <button class={buttonStyle} on:click={createNewPal}>
+        <button
+          class={buttonStyle}
+          on:click={() => {
+            colorStore.createNewPal(makePalFromString(detectedColors));
+          }}
+        >
           Use identified colors as new palette
         </button>
       {/if}

diff --git a/src/lib/ColorLint.test.ts b/src/lib/ColorLint.test.ts
@@ -1,10 +1,10 @@
 import { expect, test } from "vitest";
 
 import { Color } from "./Color";
-import type { Palette } from "../types";
 
 import { CreateCustomLint } from "./CustomLint";
 import { suggestLintFix } from "./linter-tools/lint-fixer";
+import { makePalFromString } from "./utils";
 
 // Lints
 import AvoidExtremes from "./lints/avoid-extremes";
@@ -20,30 +20,10 @@ import MutuallyDistinct from "./lints/mutually-distinct";
 import SequentialOrder from "./lints/sequential-order";
 import UglyColors from "./lints/ugly-colors";
 
-function makePalFromHexes(hexes: string[]): Palette {
-  return {
-    colors: hexes.map((hex) => Color.colorFromHex(hex, "lab")),
-    background: Color.colorFromHex("#ffffff", "lab"),
-    name: "test",
-    type: "categorical",
-    evalConfig: {},
-    colorSpace: "lab",
-  };
-}
-function makePalFromString(strings: string[]): Palette {
-  return {
-    colors: strings.map((str) => Color.colorFromString(str, "lab")),
-    background: Color.colorFromString("#ffffff", "lab"),
-    name: "test",
-    type: "categorical",
-    evalConfig: {},
-    colorSpace: "lab",
-  };
-}
 const unique = <T>(arr: T[]): T[] => [...new Set(arr)];
 
 test("ColorLint - AvoidExtremes", () => {
-  const examplePal = makePalFromHexes([
+  const examplePal = makePalFromString([
     "#000000",
     "#ffffff",
     "#ff7e0e",
@@ -60,7 +40,7 @@ test("ColorLint - AvoidExtremes", () => {
 });
 
 test("ColorLint - MutuallyDistinct", () => {
-  const examplePal = makePalFromHexes([
+  const examplePal = makePalFromString([
     "#000000",
     "#ffffff",
     "#ff0000",
@@ -73,66 +53,68 @@ test("ColorLint - MutuallyDistinct", () => {
   expect(exampleLint.message).toMatchSnapshot();
 
   // TODO add a failing case
-  const examplePal2 = makePalFromHexes(["#d2b48c", "#f5f5dc", "#d7fcef"]);
+  const examplePal2 = makePalFromString(["#d2b48c", "#f5f5dc", "#d7fcef"]);
   const exampleLint2 = new newLint(examplePal2).run();
   expect(exampleLint2.passes).toBe(false);
   expect(exampleLint2.message).toMatchSnapshot();
 });
 
 test("ColorLint - MaxColors", () => {
-  const examplePal = makePalFromHexes(["#000000"]);
+  const examplePal = makePalFromString(["#000000"]);
   const newLint = CreateCustomLint(MaxColors);
   const exampleLint = new newLint(examplePal).run();
   expect(exampleLint.passes).toBe(true);
   expect(exampleLint.message).toMatchSnapshot();
 
-  const examplePal2 = makePalFromHexes([...new Array(20)].map(() => "#000000"));
+  const examplePal2 = makePalFromString(
+    [...new Array(20)].map(() => "#000000")
+  );
   const exampleLint2 = new newLint(examplePal2).run();
   expect(exampleLint2.passes).toBe(false);
   expect(exampleLint2.message).toMatchSnapshot();
 });
 
 test("ColorLint - UglyColors", () => {
-  const examplePal = makePalFromHexes(["#000000"]);
+  const examplePal = makePalFromString(["#000000"]);
   const newLint = CreateCustomLint(UglyColors);
   const exampleLint = new newLint(examplePal).run();
   expect(exampleLint.passes).toBe(true);
   expect(exampleLint.message).toMatchSnapshot();
 
-  const examplePal2 = makePalFromHexes(["#000000", "#56FF22"]);
+  const examplePal2 = makePalFromString(["#000000", "#56FF22"]);
   const exampleLint2 = new newLint(examplePal2).run();
   expect(exampleLint2.passes).toBe(false);
   expect(exampleLint2.message).toMatchSnapshot();
 });
 
 test("ColorLint - Fair Nominal", () => {
-  const examplePal = makePalFromHexes(["#000000"]);
+  const examplePal = makePalFromString(["#000000"]);
   const newLint = CreateCustomLint(Fair[0]);
   const exampleLint = new newLint(examplePal).run();
   expect(exampleLint.passes).toBe(true);
   expect(exampleLint.message).toMatchSnapshot();
 
-  const examplePal2 = makePalFromHexes(["#debdb5", "#2a2a2a", "#76fc00"]);
+  const examplePal2 = makePalFromString(["#debdb5", "#2a2a2a", "#76fc00"]);
   const exampleLint2 = new newLint(examplePal2).run();
   expect(exampleLint2.passes).toBe(false);
   expect(exampleLint2.message).toMatchSnapshot();
 });
 
 test("ColorLint - Fair Sequential", () => {
-  const examplePal = makePalFromHexes(["#000000"]);
+  const examplePal = makePalFromString(["#000000"]);
   const newLint = CreateCustomLint(Fair[1]);
   const exampleLint = new newLint(examplePal).run();
   expect(exampleLint.passes).toBe(true);
   expect(exampleLint.message).toMatchSnapshot();
 
-  const examplePal2 = makePalFromHexes(["#debdb5", "#2a2a2a", "#76fc00"]);
+  const examplePal2 = makePalFromString(["#debdb5", "#2a2a2a", "#76fc00"]);
   const exampleLint2 = new newLint(examplePal2).run();
   expect(exampleLint2.passes).toBe(false);
   expect(exampleLint2.message).toMatchSnapshot();
 });
 
 test("ColorLint - SequentialOrder", () => {
-  const examplePal = makePalFromHexes([
+  const examplePal = makePalFromString([
     "#0084a9",
     "#009de5",
     "#5fb1ff",
@@ -144,7 +126,7 @@ test("ColorLint - SequentialOrder", () => {
   expect(exampleLint.passes).toBe(true);
   expect(exampleLint.message).toMatchSnapshot();
 
-  const examplePal2 = makePalFromHexes([
+  const examplePal2 = makePalFromString([
     "#0084a9",
     "#009de5",
     "#5fb1ff",
@@ -157,7 +139,7 @@ test("ColorLint - SequentialOrder", () => {
 });
 
 test("ColorLint - CatOrderSimilarity", () => {
-  const examplePal = makePalFromHexes([
+  const examplePal = makePalFromString([
     "#0084a9",
     "#009de5",
     "#8ca9fa",
@@ -169,7 +151,7 @@ test("ColorLint - CatOrderSimilarity", () => {
   expect(exampleLint.passes).toBe(true);
   expect(exampleLint.message).toMatchSnapshot();
 
-  const examplePal2 = makePalFromHexes([
+  const examplePal2 = makePalFromString([
     "#0084a9",
     "#009de5",
     "#5fb1ff",
@@ -182,7 +164,7 @@ test("ColorLint - CatOrderSimilarity", () => {
 });
 
 test("ColorLint - ColorNameDiscriminability", async () => {
-  const examplePal = makePalFromHexes(["#5260d1", "#005ebe"]);
+  const examplePal = makePalFromString(["#5260d1", "#005ebe"]);
   const lint = CreateCustomLint(ColorNameDiscriminability);
   const exampleLint = new lint(examplePal).run();
   expect(exampleLint.passes).toBe(false);
@@ -199,13 +181,13 @@ test("ColorLint - ColorNameDiscriminability", async () => {
 });
 
 test("ColorLint - SizeDiscrim (Thin)", () => {
-  const examplePal = makePalFromHexes(["#0084a9", "#bad", "#008000"]);
+  const examplePal = makePalFromString(["#0084a9", "#bad", "#008000"]);
   const newLint = CreateCustomLint(Discrims[0]);
   const exampleLint = new newLint(examplePal).run();
   expect(exampleLint.passes).toBe(true);
   expect(exampleLint.message).toMatchSnapshot();
 
-  const examplePal2 = makePalFromHexes(["#0084a9", "#009de5", "#8ca9fa"]);
+  const examplePal2 = makePalFromString(["#0084a9", "#009de5", "#8ca9fa"]);
   const exampleLint2 = new newLint(examplePal2).run();
   expect(exampleLint2.passes).toBe(false);
   expect(exampleLint2.message).toMatchSnapshot();
@@ -247,7 +229,7 @@ test("ColorLint - ColorBlind", async () => {
     "#c4bc27",
     "#00becf",
   ];
-  const examplePal = makePalFromHexes(tableau10);
+  const examplePal = makePalFromString(tableau10);
   const cbDeuteranopia = CreateCustomLint(ColorBlindness[0]);
   const exampleLint1 = new cbDeuteranopia(examplePal).run();
   expect(exampleLint1.passes).toBe(false);
@@ -271,7 +253,7 @@ test("ColorLint - ColorBlind", async () => {
 
 const ughWhat = ["#00ffff", "#00faff", "#00e4ff", "#fdfdfc", "#00ffff"];
 test("ColorLint - Background Contrast", async () => {
-  const examplePal = makePalFromHexes(ughWhat);
+  const examplePal = makePalFromString(ughWhat);
   const BackgroundContrastLint = CreateCustomLint(BackgroundContrast);
   const exampleLint = new BackgroundContrastLint(examplePal).run();
   expect(exampleLint.passes).toBe(false);

diff --git a/src/lib/CustomLint.ts b/src/lib/CustomLint.ts
@@ -1,5 +1,5 @@
 import { ColorLint } from "./ColorLint";
-import type { TaskType } from "./ColorLint";
+import type { PalType } from "../types";
 import {
   LLEval,
   prettyPrintLL,
@@ -10,7 +10,7 @@ import * as Json from "jsonc-parser";
 export interface CustomLint {
   program: string;
   name: string;
-  taskTypes: TaskType[];
+  taskTypes: PalType[];
   level: "error" | "warning";
   group: string;
   description: string;

diff --git a/src/lib/lint-language/LintLanguage.test.ts b/src/lib/lint-language/LintLanguage.test.ts
@@ -11,6 +11,8 @@ const toPal = (colors: string[]): Palette => ({
   evalConfig: {},
   background: toColors(["#fff"])[0],
   colors: toColors(colors),
+  intendedAffects: [],
+  intendedContexts: [],
 });
 const toColors = (colors: string[]): Color[] =>
   colors.map((x) => Color.colorFromString(x, "lab"));

diff --git a/src/lib/linter-tools/lint-worker.worker.ts b/src/lib/linter-tools/lint-worker.worker.ts
@@ -29,6 +29,8 @@ const hydratePal = (pal: string): Palette => {
     colorSpace: parsed.colorSpace,
     name: parsed.name,
     evalConfig: parsed.evalConfig,
+    intendedAffects: parsed.intendedAffects,
+    intendedContexts: parsed.intendedContexts,
   };
 };