Merge branch 'main' of https://github.com/mcnuttandrew/color-pal-builder

mcnuttandrew · Feb 21, 2024 · a980987 · a980987
2 parents 0d0a4c0 + a677759
commit a980987
Show file tree

Hide file tree

Showing 16 changed files with 223 additions and 206 deletions.
diff --git a/LintLanguageDocs.md b/LintLanguageDocs.md
@@ -25,6 +25,7 @@ Math Operations:
 {"/": {left: Number | Variable, right: Number | Variable}}
 {"-": {left: Number | Variable, right: Number | Variable}}
 {absDiff: {left: Number | Variable, right: Number | Variable}}
+{"%": {left: Number | Variable, right: Number | Variable}}
 
 Value Comparisons:
 {dist: {left: Color | Variable, right: Color | Variable}, space: COLOR_SPACE }

diff --git a/public/lint-schema.json b/public/lint-schema.json
@@ -384,7 +384,7 @@
                 {
                     "additionalProperties": false, 
                     "properties": {
-                        "filter": {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"}, 
+                        "filter": {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"}, 
                         "func"  : {"$ref": "#/definitions/LintExpression"}                              , 
                         "varb"  : {"type": "string"}                                                      
                     }, 
@@ -395,7 +395,7 @@
                     "additionalProperties": false, 
                     "properties": {
                         "func": {"$ref": "#/definitions/LintValue"}                                   , 
-                        "map" : {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"}, 
+                        "map" : {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"}, 
                         "varb": {"type": "string"}                                                      
                     }, 
                     "required": ["map", "func", "varb"], 
@@ -404,7 +404,7 @@
                 {
                     "additionalProperties": false, 
                     "properties": {
-                        "reverse": {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"}
+                        "reverse": {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"}
                     }, 
                     "required": ["reverse"], 
                     "type": "object"
@@ -413,15 +413,15 @@
                     "additionalProperties": false, 
                     "properties": {
                         "func": {"$ref": "#/definitions/LintValue"}                                   , 
-                        "sort": {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"}, 
+                        "sort": {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"}, 
                         "varb": {"type": "string"}                                                      
                     }, 
                     "required": ["sort", "func", "varb"], 
                     "type": "object"
                 }, 
                 {
                     "additionalProperties": false, 
-                    "properties": { "speed": {"$ref": "#/definitions/alias-1448761563-3658-3719-1448761563-0-6076"} }, 
+                    "properties": { "speed": {"$ref": "#/definitions/alias-1448761563-3695-3756-1448761563-0-6113"} }, 
                     "required": ["speed"], 
                     "type": "object"
                 }
@@ -492,6 +492,22 @@
                     }, 
                     "required": ["/"], 
                     "type": "object"
+                }, 
+                {
+                    "additionalProperties": false, 
+                    "properties": {
+                        "%": {
+                            "additionalProperties": false, 
+                            "properties": {
+                                "left" : {"$ref": "#/definitions/LintValue"}, 
+                                "right": {"$ref": "#/definitions/LintValue"}  
+                            }, 
+                            "required": ["left", "right"], 
+                            "type": "object"
+                        }
+                    }, 
+                    "required": ["%"], 
+                    "type": "object"
                 }
             ]
         }, 
@@ -702,7 +718,7 @@
             "description": "A LintValue is a JSON object that represents a value. It can be a string, a number, a boolean, a LintColor, a LintVariable, a LintMathOps, a LintPairOps, a LintAggregate, a LintColorFunction or a LintExpression"
         }, 
         "LintVariable": {"type": "string"}, 
-        "alias-1448761563-3658-3719-1448761563-0-6076": {
+        "alias-1448761563-3695-3756-1448761563-0-6113": {
             "anyOf": [
                 {"$ref": "#/definitions/LintVariable"}                           , 
                 { "items": {"$ref": "#/definitions/LintValue"}, "type": "array" }, 

diff --git a/src/App.svelte b/src/App.svelte
@@ -39,7 +39,7 @@
   $: updateSearchDebounced = debounce(10, (pal: any) => {
     // keep the noise down on the console
     if (!selectedLint && pal) {
-      lint(pal).then((res) => {
+      lint(pal, true).then((res) => {
         lintStore.postCurrentChecks(res);
       });
     }

diff --git a/src/content-modules/Browse.svelte b/src/content-modules/Browse.svelte
@@ -18,11 +18,11 @@
     while ($examplePalStore.palettes.length === 0) {
       await new Promise((resolve) => setTimeout(resolve, 100));
     }
-    computeLints();
+    computeLints(false);
   });
-  function computeLints() {
+  function computeLints(breakLint: boolean) {
     $examplePalStore.palettes.forEach(async (pal, index) => {
-      if (pal.lints.length > 0) {
+      if (!breakLint && pal.lints.length > 0) {
         return;
       }
       lint(pal.palette, false).then((res) => {
@@ -37,8 +37,9 @@
     fail: "❌",
     warn: "⚠️",
   };
+  $: pals = $examplePalStore.palettes;
 
-  $: allEvaluatedLints = $examplePalStore.palettes.reduce(
+  $: allEvaluatedLints = pals.reduce(
     (acc, pal) => {
       pal.lints.forEach((lint) => {
         acc[lint.name] = lint;
@@ -49,7 +50,7 @@
   );
   let disAllowedLints = new Set<string>();
 
-  $: filteredPals = $examplePalStore.palettes;
+  $: filteredPals = pals;
   let sortedBy = "natural";
   $: console.log(allEvaluatedLints, disAllowedLints);
 </script>
@@ -75,6 +76,9 @@
     >
       reset filters
     </button>
+    <button class={buttonStyle} on:click={() => computeLints(true)}>
+      Re run lints
+    </button>
   </div>
   <div class="flex flex-col flex-wrap max-h-80">
     {#each Object.values(allEvaluatedLints) as lint}

diff --git a/src/content-modules/ComparePal.svelte b/src/content-modules/ComparePal.svelte
@@ -33,7 +33,7 @@
   let colorSpace = ComparisonPal?.colorSpace || "lab";
 </script>
 
-<div style={`max-width: ${scatterSize + 50}px`}>
+<div style={`max-width: ${scatterSize + 150}px`}>
   <div class="flex flex-col">
     {#if ComparisonPal !== undefined}
       <div class="font-bold">
@@ -112,7 +112,10 @@
     <div class="flex flex-col pl-2">
       <PalPreview
         highlightSelected={false}
-        pal={ComparisonPal}
+        pal={{
+          ...ComparisonPal,
+          background: Color.colorFromHex(bg, colorSpace),
+        }}
         allowModification={false}
       />
 
@@ -124,24 +127,31 @@
     /> -->
     </div>
   {/if}
-  <Nav tabs={["example"]} selectTab={() => {}} isTabSelected={() => true} />
+  <Nav
+    tabs={["example"]}
+    selectTab={() => {}}
+    isTabSelected={() => true}
+    className="mt-4"
+  />
   {#if compareIdx !== undefined}
-    <div class="example-holder">
+    <div class="example-holder flex justify-center-center flex-col">
       <ExampleAlaCart
         paletteIdx={compareIdx}
         exampleIdx={$configStore.compareSelectedExample}
         setExampleIdx={(idx) => configStore.setCompareSelectedExample(idx)}
+        allowModification={false}
+        bgColor={bg}
       />
     </div>
   {/if}
 </div>
 
 <style>
   .empty-pal-holder {
-    height: 450px;
-    width: 450px;
+    height: 600px;
+    width: 600px;
   }
   .example-holder {
-    width: 450px;
+    width: 600px;
   }
 </style>
diff --git a/src/content-modules/MainColumn.svelte b/src/content-modules/MainColumn.svelte
@@ -99,6 +99,7 @@
         exampleIdx={$configStore.mainColumnSelectedExample}
         setExampleIdx={(idx) => configStore.setMainColumnSelectedExample(idx)}
         allowModification={true}
+        bgColor={currentPal.background.toHex()}
       />
     {/if}
   </div>

diff --git a/src/content-modules/SavedPals.svelte b/src/content-modules/SavedPals.svelte
@@ -11,6 +11,7 @@
   import Tooltip from "../components/Tooltip.svelte";
   $: nameSuggestions = [] as string[];
   let state: "idle" | "loading" = "idle";
+  let showRename = false;
 </script>
 
 <div class="overflow-auto">
@@ -31,8 +32,17 @@
             {pal.name}
           </button>
         </div>
-        <Tooltip>
-          <div slot="content" let:onClick class="flex flex-col">
+        <Tooltip
+          onClose={() => {
+            showRename = false;
+            nameSuggestions = [];
+          }}
+        >
+          <div
+            slot="content"
+            let:onClick
+            class="flex flex-col justify-start items-start"
+          >
             <button
               class={buttonStyle}
               on:click={() => {
@@ -94,6 +104,34 @@
                 Move down
               </button>
             {/if}
+            <button
+              class={buttonStyle}
+              on:click={() => {
+                showRename = true;
+              }}
+            >
+              Rename
+            </button>
+            {#if showRename}
+              <input
+                class="border-2 border-black"
+                value={pal.name}
+                on:blur={(e) => {
+                  const newPals = [...$colorStore.palettes];
+                  newPals[i] = { ...pal, name: e.currentTarget.value };
+                  colorStore.setPalettes(newPals);
+                  showRename = false;
+                }}
+                on:keydown={(e) => {
+                  if (e.key === "Enter") {
+                    const newPals = [...$colorStore.palettes];
+                    newPals[i] = { ...pal, name: e.currentTarget.value };
+                    colorStore.setPalettes(newPals);
+                    showRename = false;
+                  }
+                }}
+              />
+            {/if}
             <button
               class={buttonStyle}
               on:click={() => {

diff --git a/src/example/ExampleAlaCarte.svelte b/src/example/ExampleAlaCarte.svelte
@@ -9,6 +9,7 @@
   export let setExampleIdx: (idx: number) => void;
   export let paletteIdx: number;
   export let allowModification: boolean = false;
+  export let bgColor: string = "white";
   $: example = {
     ...$exampleStore.examples[exampleIdx],
     size: 400,
@@ -42,7 +43,10 @@
     </button>
   </Tooltip>
 </div>
-<div class="h-full flex justify-center items-center p-4">
+<div
+  class="h-full flex justify-center items-center"
+  style={`background: ${bgColor}`}
+>
   {#if exampleIdx === -1}
     <Swatches
       {paletteIdx}

diff --git a/src/example/Swatches.svelte b/src/example/Swatches.svelte
@@ -24,8 +24,9 @@
     }
   }
   $: bgColor = currentPal?.background?.toHex() || "white";
+
   $: focused = $focusStore.focusedColors;
-  $: focusSet = new Set(focused);
+  $: focusSet = allowInteraction ? new Set(focused) : new Set();
 
   let common = "cursor-pointer mr-2 mb-2 transition-all";
   let classes = [
@@ -83,6 +84,7 @@
           class:ml-5={focusSet.has(i)}
           class:mr-5={!focusSet.has(i)}
           on:click|preventDefault|stopPropagation={(e) =>
+            allowInteraction &&
             focusStore.setColors(
               dealWithFocusEvent(e, i, $focusStore.focusedColors)
             )}
@@ -102,13 +104,14 @@
                     }`}
                     style={`${styleMap(colors[colorIdx])}`}
                     on:click|preventDefault|stopPropagation={(e) => {
-                      focusStore.setColors(
-                        dealWithFocusEvent(
-                          e,
-                          colorIdx,
-                          $focusStore.focusedColors
-                        )
-                      );
+                      allowInteraction &&
+                        focusStore.setColors(
+                          dealWithFocusEvent(
+                            e,
+                            colorIdx,
+                            $focusStore.focusedColors
+                          )
+                        );
                     }}
                   ></button>
                 {/each}
@@ -125,9 +128,10 @@
             }deg)`}
             class="mr-2 w-16"
             on:click|preventDefault|stopPropagation={(e) => {
-              focusStore.setColors(
-                dealWithFocusEvent(e, i, $focusStore.focusedColors)
-              );
+              allowInteraction &&
+                focusStore.setColors(
+                  dealWithFocusEvent(e, i, $focusStore.focusedColors)
+                );
             }}
           >
             {color.toHex()}