Roles (#53)

* in progress * all the type errors cleared, bugs * everything is running again * setting tags works * fix tests * End to end working now * fix types * update the natural language output to be more sql-y
mcnuttandrew · Mar 12, 2024 · 1700f8a · 1700f8a
1 parent b7c4eb5
commit 1700f8a
Show file tree

Hide file tree

Showing 61 changed files with 1,134 additions and 427 deletions.
diff --git a/netlify/functions/suggest-lint.ts b/netlify/functions/suggest-lint.ts
@@ -26,8 +26,8 @@ Conjunctions:
 {not: EXPR}
 
 Quantifiers
-{all: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: "colors"}}
-{exist: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: "colors"}}
+{all: {varbs: Variable, predicate: EXPR, where?: EXPR, in: Variable | Map}}
+{exist: {varbs: Variable, predicate: EXPR, where?: EXPR, in: Variable | Map}}
 Notes:
 
 - varbs each listed variable into the scope, as well as variables like index(a) for a variable a
@@ -68,13 +68,14 @@ Aggregates
 {extent: Variable | Number[]}
 
 Color Manipulations:
-{toColor: Variable, space: 'lab' | 'hsl' | etc, channel: 'a' | 'b' | 'l' | etc}
+{toSpace: Variable, space: 'lab' | 'hsl' | etc, channel: 'a' | 'b' | 'l' | etc}
 {cvdSim: Variable, type: 'protanomaly' | 'deuteranomaly' | 'tritanopia' | 'grayscale'}
 {name: Variable}
 {inGamut: Variable | Color}
+{isTag: Variable | Color, value: string}
 Notes
 
-- toColor has a shorthand like {"rgb.b": Variable}
+- toSpace has a shorthand like {"rgb.b": Variable}
 - When comparing colors, it can be helpful to switch color spaces. For instance, to check if a value is blue you might switch it to HSL and check if the hue is in a certain range.
 
 Maps:

diff --git a/public/lang-docs.md b/public/lang-docs.md
diff --git a/public/lint-schema.json b/public/lint-schema.json
@@ -186,13 +186,14 @@
                     "properties": {
                         "channel": {"$ref": "#/definitions/ColorChannel"}, 
                         "space": {"$ref": "#/definitions/ColorSpace"}, 
-                        "toColor": {
+                        "toSpace": {
                             "anyOf": [ {"$ref": "#/definitions/LintVariable"}, {"$ref": "#/definitions/LintColor"} ]
                         }
                     }, 
-                    "required": ["toColor", "space", "channel"], 
+                    "required": ["toSpace", "space", "channel"], 
                     "type": "object"
                 }, 
+                {"$ref": "#/definitions/LintColorTagCheck"}, 
                 {
                     "additionalProperties": {
                         "anyOf": [ {"$ref": "#/definitions/LintVariable"}, {"type": "string"} ]
@@ -213,6 +214,17 @@
             "required": ["cvdSim", "type"], 
             "type": "object"
         }, 
+        "LintColorTagCheck": {
+            "additionalProperties": false, 
+            "properties": {
+                "isTag": {
+                    "anyOf": [ {"$ref": "#/definitions/LintVariable"}, {"$ref": "#/definitions/LintColor"} ]
+                }, 
+                "value": {"type": "string"}
+            }, 
+            "required": ["isTag", "value"], 
+            "type": "object"
+        }, 
         "LintComparison": {
             "anyOf": [
                 {
@@ -363,10 +375,11 @@
         }, 
         "LintExpression": {
             "anyOf": [
-                {"$ref": "#/definitions/LintConjunction"}, 
-                {"$ref": "#/definitions/LintQuantifier" }, 
-                {"$ref": "#/definitions/LintComparison" }, 
-                {"$ref": "#/definitions/LintBoolean"    }  
+                {"$ref": "#/definitions/LintConjunction"  }, 
+                {"$ref": "#/definitions/LintQuantifier"   }, 
+                {"$ref": "#/definitions/LintComparison"   }, 
+                {"$ref": "#/definitions/LintBoolean"      }, 
+                {"$ref": "#/definitions/LintColorTagCheck"}  
             ], 
             "description": "A LintExpression is a JSON object that represents a logical expression. It is used to express a condition that is evaluated to a boolean value. It can be a conjunction, a quantifier, a comparison or a boolean value."
         }, 
@@ -375,7 +388,7 @@
                 {
                     "additionalProperties": false, 
                     "properties": {
-                        "filter": {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"}, 
+                        "filter": {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"}, 
                         "func"  : {"$ref": "#/definitions/LintExpression"}                              , 
                         "varb"  : {"type": "string"}                                                      
                     }, 
@@ -386,7 +399,7 @@
                     "additionalProperties": false, 
                     "properties": {
                         "func": {"$ref": "#/definitions/LintValue"}                                   , 
-                        "map" : {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"}, 
+                        "map" : {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"}, 
                         "varb": {"type": "string"}                                                      
                     }, 
                     "required": ["map", "func", "varb"], 
@@ -395,7 +408,7 @@
                 {
                     "additionalProperties": false, 
                     "properties": {
-                        "reverse": {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"}
+                        "reverse": {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"}
                     }, 
                     "required": ["reverse"], 
                     "type": "object"
@@ -404,15 +417,15 @@
                     "additionalProperties": false, 
                     "properties": {
                         "func": {"$ref": "#/definitions/LintValue"}                                   , 
-                        "sort": {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"}, 
+                        "sort": {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"}, 
                         "varb": {"type": "string"}                                                      
                     }, 
                     "required": ["sort", "func", "varb"], 
                     "type": "object"
                 }, 
                 {
                     "additionalProperties": false, 
-                    "properties": { "speed": {"$ref": "#/definitions/alias-1448761563-3904-3965-1448761563-0-6322"} }, 
+                    "properties": { "speed": {"$ref": "#/definitions/alias-1448761563-3892-3953-1448761563-0-6459"} }, 
                     "required": ["speed"], 
                     "type": "object"
                 }
@@ -727,7 +740,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-3904-3965-1448761563-0-6322": {
+        "alias-1448761563-3892-3953-1448761563-0-6459": {
             "anyOf": [
                 {"$ref": "#/definitions/LintVariable"}                           , 
                 { "items": {"$ref": "#/definitions/LintValue"}, "type": "array" }, 

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
@@ -4,10 +4,13 @@
   export let pal: Palette;
   export let allowModification: boolean = false;
   export let highlightSelected: boolean = false;
+  export let showTags: boolean = false;
 
   import { dealWithFocusEvent } from "../lib/utils";
 
   $: focusSet = new Set($focusStore.focusedColors);
+  $: bgLum = pal.background.luminance();
+  $: textColor = bgLum > 0.4 ? "#00000066" : "#ffffffaa";
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -18,25 +21,36 @@
   on:click={() => focusStore.clearColors()}
 >
   {#each pal.colors as color, idx}
-    {#if allowModification}
-      <button
-        on:click|stopPropagation|preventDefault={(e) =>
-          focusStore.setColors(
-            dealWithFocusEvent(e, idx, $focusStore.focusedColors)
-          )}
-        class={"w-6 h-6 mx-2 rounded-full transition-all"}
-        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()}"
-      ></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()}"
-      ></div>
-    {/if}
+    <div class="flex flex-col text-center relative items-center">
+      {#if allowModification}
+        <button
+          on:click|stopPropagation|preventDefault={(e) =>
+            focusStore.setColors(
+              dealWithFocusEvent(e, idx, $focusStore.focusedColors)
+            )}
+          class={"w-6 h-6 mx-2 rounded-full transition-all"}
+          class:w-8={highlightSelected && focusSet.has(idx)}
+          class:h-8={highlightSelected && focusSet.has(idx)}
+          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.color.toDisplay()}"
+        ></div>
+      {/if}
+      {#if showTags}
+        <div
+          class="flex flex-col text-center pointer-events-none"
+          style={`color: ${textColor}`}
+        >
+          {#each color.tags as tag}
+            <div class="text-xs">{tag}</div>
+          {/each}
+        </div>
+      {/if}
+    </div>
   {/each}
 </div>
diff --git a/src/content-modules/Browse.svelte b/src/content-modules/Browse.svelte
@@ -205,7 +205,9 @@
           <Tooltip>
             <div slot="content">
               <div class="font-bold">Colors</div>
-              <div>{pal.palette.colors.map((x) => x.toHex()).join(", ")}</div>
+              <div>
+                {pal.palette.colors.map((x) => x.color.toHex()).join(", ")}
+              </div>
               <div class="font-bold">Controls</div>
               <button
                 class={buttonStyle}

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
@@ -5,14 +5,15 @@
 
   import { Color } from "../lib/Color";
 
-  import AlignSelection from "../controls/AlignSelection.svelte";
-  import SuggestionModificationToSelection from "../controls/SuggestionModificationToSelection.svelte";
-  import InterpolatePoints from "../controls/InterpolatePoints.svelte";
-  import DistributePoints from "../controls/DistributePoints.svelte";
-  import AdjustColor from "../controls/AdjustColor.svelte";
   import AddColor from "../controls/AddColor.svelte";
+  import AdjustColor from "../controls/AdjustColor.svelte";
+  import AlignSelection from "../controls/AlignSelection.svelte";
   import ColorChannelPicker from "../components/ColorChannelPicker.svelte";
+  import ColorTagger from "../controls/ColorTagger.svelte";
+  import DistributePoints from "../controls/DistributePoints.svelte";
+  import InterpolatePoints from "../controls/InterpolatePoints.svelte";
   import Rotate from "../controls/Rotate.svelte";
+  import SuggestionModificationToSelection from "../controls/SuggestionModificationToSelection.svelte";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;
@@ -28,29 +29,37 @@
     <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);
       }}
     />
+    <ColorTagger />
   {/if}
 
   <DistributePoints />