Many many ux tweaks

LintLanguageDocs.md

@@ -10,7 +10,7 @@ Conjunctions:
 
 Quantifiers:
 {all: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
-{exists: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
+{exist: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
 
 Comparisons:
 {"similar": {left: Value, right: Value, threshold: Number}}

README.md

@@ -24,9 +24,9 @@ First time you start it up you should also run `yarn prep data`
 
 - [ ] Add more blame robustness, may pay to try to reason across all of the operator families (insight: keep a list of the blamable variables in the environment to support tracing)
 - [ ] per cols 4 all: color blindness metric should maybe be sensitive to task?
-- [ ] Sequential check fix is incorrect for things with equi-ligthness
 - [ ] Macros story: "not similar", "sequences", "where": { "!=": {"left": "index(a)", "right": "index(b)"} },
 - [ ] More crashy type validation
+- [x] Sequential check fix is incorrect for things with equi-ligthness
 - [x] Affect rules
 - [x] "No out of gamut"
 
@@ -44,9 +44,12 @@ First time you start it up you should also run `yarn prep data`
 - [ ] Handles get stuck on channel picker again, ugh
 - [ ] Bug: Color channel usage slightly cursed (doesn't update positions correctly)
 - [ ] Bug: rotate in polar coordinates doesn't work right
-- [ ] Dont allow saves to examples when there's an error
-- [ ] Switch the examples to be tabs or single
-- [ ] Consider moving the names and color chunks into the left hand column for space
+- [ ] Allow no palettes
+- [ ] allows renaming of non-current palettes
+- [ ] Parameterize the scatter column completely, allow edits to the compare stuff
+- [x] Dont allow saves to examples when there's an error
+- [x] Switch the examples to be tabs or single
+- [x] Consider moving the names and color chunks into the left hand column for space
 - [x] LCH colors upside down god damn it
 - [x] Clone Rule
 - [x] Compact more compact
@@ -55,19 +58,14 @@ First time you start it up you should also run `yarn prep data`
 - [x] Hover broken on compare, also make sure it takes the right stringify (same as the color channel)
 - [x] Select compare from palettes drop down menu
 
-Parameterization epic:
-
-- [ ] Allow no palettes, allows renaming of non-current palettes, which would be enable by:
-- [ ] Parameterize the scatter column completely, allow edits to the compare stuff
-
 # Nice to have
 
 - [ ] Add HCT/CAM, add explainers to each of the color spaces, blocked by colorjs release
 - [ ] Directional subtile for aligns, they do not work in polar also
-- [ ] Colors from String should save on enter?
 - [ ] Insert color theory options, eg insert opposing, inserting analogous color, etc, mine from the adobe picker
 - [ ] Add clone color (and similar buttons) to the tooltip, mostly for making interacting with the examples simpler
 - [ ] XYY is probaably now possible
 - [ ] Nice to have: Rest of basic geometry manipulations: flip (horizontal, vertical), scale, Distribute radially
 - [ ] Undo / redo stack size. Nice to have: summarize each action
-- [ ] Minor: Make keyboard short cut (option+up/down) for the z-direction
+- [x] Colors from String should save on enter?
+- [x] Minor: Make keyboard short cut (option+up/down) for the z-direction

netlify/functions/suggest-lint.ts

@@ -21,7 +21,7 @@ Conjunctions:
 
 Quantifiers:
 {all: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
-{exists: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
+{exist: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
 
 Comparisons:
 {"similar": {left: Value, right: Value, threshold: Number}}

src/App.svelte

@@ -2,6 +2,7 @@
   import colorStore from "./stores/color-store";
   import focusStore from "./stores/focus-store";
   import configStore from "./stores/config-store";
+  import lintStore from "./stores/lint-store";
 
   // make sure no focused colors are out of bounds
   $: focusedColors = $focusStore.focusedColors;
@@ -28,6 +29,23 @@
   import Zoom from "./controls/Zoom.svelte";
 
   const tabs = ["examples", "compare", "eval"];
+
+  import { lint } from "./lib/api-calls";
+  import { debounce } from "vega";
+
+  $: selectedLint = $lintStore.focusedLint;
+  $: updateSearchDebounced = debounce(10, (pal: any) => {
+    // keep the noise down on the console
+    if (!selectedLint) {
+      lint(pal).then((res) => {
+        lintStore.postCurrentChecks(res);
+      });
+    }
+  });
+  $: updateSearchDebounced(currentPal);
+
+  let innerWidth = window.innerWidth;
+  $: scatterSize = Math.max(Math.min(innerWidth * 0.3, 450), 350);
 </script>
 
 <main class="flex h-full">
@@ -40,7 +58,7 @@
           <Zoom />
         </div>
         {#if palPresent}
-          <MainColumn />
+          <MainColumn {scatterSize} />
         {/if}
       </div>
       {#if palPresent}
@@ -58,7 +76,7 @@
           {#if $configStore.route === "examples"}
             <Examples />
           {:else if $configStore.route === "compare"}
-            <ComparePal />
+            <ComparePal {scatterSize} />
           {:else}
             <Eval />
           {/if}
@@ -70,6 +88,7 @@
 </main>
 
 <KeyboardHooks />
+<svelte:window bind:innerWidth />
 
 <style>
   .main-content {

src/components/AutocompleteOrSearch.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { buttonStyle } from "../lib/styles";
+  export let placeholder = "Search";
+  export let searchOptions: string[] = [];
+  export let runSearch: (x: string) => void;
+  export let setValue: (x: string) => void;
+  export let optionsAreColors: boolean = false;
+  let value = "";
+  let selectedIndex: number = -1;
+
+  $: currentOptions = value.length
+    ? searchOptions.filter((x) => x.toLowerCase().includes(value.toLowerCase()))
+    : [];
+  $: {
+    if (currentOptions.length < selectedIndex) {
+      selectedIndex = 0;
+    }
+  }
+</script>
+
+<div class="relative">
+  <form on:submit|preventDefault={() => runSearch(value)}>
+    <input
+      {placeholder}
+      bind:value
+      type="text"
+      class="indent-2 text-sm leading-6"
+      on:blur={() => {
+        setTimeout(() => {
+          currentOptions = [];
+        }, 500);
+      }}
+      on:keydown={(e) => {
+        if (e.key === "Escape") {
+          e.currentTarget.blur();
+          selectedIndex = -1;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          selectedIndex =
+            selectedIndex === currentOptions.length - 1 ? 0 : selectedIndex + 1;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          selectedIndex =
+            selectedIndex === -1 || selectedIndex === 0
+              ? currentOptions.length - 1
+              : Math.max(selectedIndex - 1, 0);
+        }
+        if (e.key === "Enter" && selectedIndex !== -1) {
+          setValue(currentOptions[selectedIndex]);
+          value = "";
+          selectedIndex = -1;
+          e.currentTarget.blur();
+        }
+        const exactOption = currentOptions.find(
+          (x) => x.toLowerCase() === value.toLowerCase()
+        );
+        if (e.key === "Enter" && selectedIndex === -1 && exactOption) {
+          setValue(exactOption);
+          value = "";
+          e.currentTarget.blur();
+        }
+        if (e.key === "Enter" && selectedIndex === -1) {
+          runSearch(value);
+          e.currentTarget.blur();
+        }
+      }}
+    />
+    <button class={buttonStyle}>Search</button>
+  </form>
+  {#if currentOptions.length > 0}
+    <div class="absolute z-10">
+      <div class="bg-white rounded-md shadow-lg">
+        {#each currentOptions as option, idx}
+          <button
+            on:click|preventDefault|stopPropagation={() => {
+              console.log("option", option);
+              setValue(option);
+              value = "";
+            }}
+            class="p-2 border-2 flex items-center hover:border-blue-900 w-full text-left text-sm"
+            class:border-blue-900={selectedIndex === idx}
+            class:border-white={selectedIndex !== idx}
+          >
+            {#if optionsAreColors}
+              <div
+                class="w-3 h-3 rounded-full mr-2"
+                style="background-color: {option}"
+              ></div>
+            {/if}
+
+            {option.split(value)[0]}
+            <b>{value}</b>
+            {option.split(value)[1]}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

src/components/ColorButton.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <div
-  class=" {buttonStyle} h-12 flex justify-between items-center mb-2 opacity-100"
+  class="text-sm px-2 transition-colors mr-2 whitespace-nowrap font-bold hover:underline flex justify-between items-center mb-2 opacity-100"
 >
   <button
     class="w-3 h-3 rounded-full mr-2"

src/components/ColorChannelPicker.svelte

@@ -208,7 +208,7 @@
     height: 2.2em;
     border-radius: 0.3em;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
-    min-width: 285px;
+    min-width: 265px;
   }
 
   .color-slider::-webkit-slider-thumb {

src/components/KeyboardHooks.svelte

@@ -9,28 +9,32 @@
   $: config = colorPickerConfig[colorSpace];
   $: xStep = config.xStep;
   $: yStep = config.yStep;
+  $: zStep = config.zStep;
   $: xDomain = config.xDomain;
   $: yDomain = config.yDomain;
+  $: zDomain = config.zDomain;
   function onKeyDown(e: any) {
     const tagName = e.target.tagName.toLowerCase();
     const tagType = e.target.type;
 
-    if (tagName === "input") {
+    const classes = e.target.getAttribute("class");
+    if (tagName === "input" && !classes.includes("color-slider")) {
       const isUIElement =
         tagType === "number" || tagType === "range" || tagType === "text";
       if (isUIElement) {
         return;
       }
     }
     // block code mirror editing
-    if ((e.target.getAttribute("class") || "").includes("cm-content")) {
+    if ((classes || "").includes("cm-content")) {
       return;
     }
     if (tagName === "textarea") {
       return;
     }
     const key = e.key.toLowerCase();
     const metaKey = e.metaKey || e.ctrlKey;
+    const optionKey = e.altKey;
     // UNDO REDO
     if (key === "z" && metaKey) {
       e.preventDefault();
@@ -58,7 +62,8 @@
       const verticalDirs = new Set(["arrowup", "arrowdown"]);
       const verticalDir = xDomain[1] < xDomain[0] ? 1 : -1;
       const horizontalDir = yDomain[1] < yDomain[0] ? 1 : -1;
-      let step = verticalDirs.has(key) ? yStep : xStep;
+      const zDir = zDomain[1] < zDomain[0] ? 1 : -1;
+      let step = verticalDirs.has(key) ? (optionKey ? zStep : yStep) : xStep;
       if (metaKey || e.shiftKey) {
         step *= 10;
       }
@@ -71,12 +76,20 @@
         const channels = color.toChannels();
         const xVal = channels[config.xChannelIndex];
         const yVal = channels[config.yChannelIndex];
-        if (key === "arrowdown") {
+        const zVal = channels[config.zChannelIndex];
+
+        if (!optionKey && key === "arrowdown") {
           return color.setChannel(config.yChannel, yVal + verticalDir * step);
         }
-        if (key === "arrowup") {
+        if (!optionKey && key === "arrowup") {
           return color.setChannel(config.yChannel, yVal - verticalDir * step);
         }
+        if (optionKey && key === "arrowdown") {
+          return color.setChannel(config.zChannel, zVal + zDir * step);
+        }
+        if (optionKey && key === "arrowup") {
+          return color.setChannel(config.zChannel, zVal - zDir * step);
+        }
         if (key === "arrowleft") {
           return color.setChannel(config.xChannel, xVal - horizontalDir * step);
         }
@@ -89,12 +102,6 @@
       colorStore.setCurrentPalColors(newColors);
     }
 
-    // SAVE BY DUPLICATING PALETTE
-    if (key === "s" && metaKey) {
-      e.preventDefault();
-      colorStore.duplicatePal($colorStore.currentPal);
-    }
-
     // COPY PASTE
     if (key === "c" && metaKey && $focusStore.focusedColors.length) {
       copiedData = currentPal.colors.filter((_, idx) => focusedSet.has(idx));

src/components/PalPreview.svelte

@@ -49,7 +49,7 @@
       </Tooltip>
     {:else}
       <div
-        class={"w-6 h-6 mx-2 rounded-full transition-all"}
+        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()}"