some eval pane stuff

mcnuttandrew · Sep 19, 2024 · ece20b0 · ece20b0
1 parent 89a73de
commit ece20b0
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 49 deletions.
diff --git a/apps/color-buddy/src/App.svelte b/apps/color-buddy/src/App.svelte
@@ -52,7 +52,7 @@
   let updateSearchDebounced = debounce(10, (x: [any, string]) => {
     const [pal, ignoreString] = x;
     // keep the noise down on the console
-    if ((route !== "eval" || evalRoute !== "lint-customization") && pal) {
+    if ((route !== "eval" || evalRoute !== "check-customization") && pal) {
       lintStore.setLoadState("loading");
 
       const outPal = {
@@ -115,8 +115,8 @@
           </div>
         {/if}
       </div>
-      <div class="flex flex-col" id="right-col">
-        <div class="flex bg-stone-100">
+      <div class="flex flex-col w-full" id="right-col">
+        <div class="flex bg-stone-100 w-full">
           <Nav
             className=""
             tabs={currentPalTabs}

diff --git a/apps/color-buddy/src/content-modules/Controls.svelte b/apps/color-buddy/src/content-modules/Controls.svelte
diff --git a/apps/color-buddy/src/content-modules/MainColumn.svelte b/apps/color-buddy/src/content-modules/MainColumn.svelte
@@ -3,13 +3,18 @@
   import focusStore from "../stores/focus-store";
   import configStore from "../stores/config-store";
 
+  import AdjustColor from "../controls/AdjustColor.svelte";
+  import AlignSelection from "../controls/AlignSelection.svelte";
+  import DistributePoints from "../controls/DistributePoints.svelte";
+  import InterpolatePoints from "../controls/InterpolatePoints.svelte";
+  import Rotate from "../controls/Rotate.svelte";
+
   import { buttonStyle } from "../lib/styles";
   import Background from "../components/Background.svelte";
   import ColorScatterPlot from "../scatterplot/ColorScatterPlot.svelte";
   import ExampleAlaCart from "../example/ExampleAlaCarte.svelte";
   import PalTypeConfig from "../controls/PalTypeConfig.svelte";
   import SetSimulation from "../controls/SetSimulation.svelte";
-  import Controls from "../content-modules/Controls.svelte";
   import PalTags from "../controls/PalTags.svelte";
   import Zoom from "../controls/Zoom.svelte";
   import Finger from "virtual:icons/fa6-solid/hand-pointer";
@@ -24,7 +29,10 @@
 </script>
 
 <div class="flex flex-col h-full px-4 mt-10">
-  <div class="flex text-sm mb-2">
+  <div
+    class="flex text-sm mb-2 flex-wrap"
+    style={`max-width: ${scatterSize + 110}px`}
+  >
     <PalTypeConfig />
     <SetColorSpace
       colorSpace={currentPal.colorSpace}
@@ -84,7 +92,20 @@
   </div>
 
   <div class="flex flex-col pl-2" style={`max-width: ${scatterSize + 110}px;`}>
-    <Controls />
+    <div class="flex flex-col">
+      <div class="text-sm">Controls</div>
+      <div class="flex flex-wrap" style={`max-width: ${scatterSize + 110}px`}>
+        <AdjustColor />
+        <DistributePoints />
+        <AlignSelection />
+        <!-- use this to try to quash the rotation/selection bug -->
+        {#if $focusStore.focusedColors.length > 1}
+          <Rotate />
+        {/if}
+        <InterpolatePoints />
+      </div>
+    </div>
+
     <ExampleAlaCart
       paletteIdx={$colorStore.currentPal}
       exampleIdx={$configStore.mainColumnSelectedExample}

diff --git a/apps/color-buddy/src/linting/Eval.svelte b/apps/color-buddy/src/linting/Eval.svelte
@@ -56,13 +56,13 @@
   let innerWidth = window.innerWidth;
 </script>
 
-<div class="bg-stone-300 w-full flex">
+<div class="bg-stone-100 w-full flex">
   <Nav
-    tabs={["regular", "compact", "lint-customization"]}
+    tabs={["regular", "compact", "check-customization"]}
     isTabSelected={(x) => x === displayMode}
     selectTab={(x) => {
       // TODO: maybe need to update the lints on change?
-      if (displayMode === "lint-customization") {
+      if (displayMode === "check-customization") {
         const outPal = {
           ...currentPal,
           evalConfig: {
@@ -76,7 +76,7 @@
             lintResults = res;
           });
       }
-      if (x === "lint-customization") {
+      if (x === "check-customization") {
         // unset the current lint
         lintStore.setFocusedLint(false);
       }
@@ -85,8 +85,8 @@
     }}
   />
 </div>
-<div class="flex h-full bg-stone-100" style={`width: ${maxWidth}px`}>
-  {#if displayMode === "lint-customization"}
+<div class="flex h-full" style={`width: ${maxWidth}px`}>
+  {#if displayMode === "check-customization"}
     <LintCustomizationModal {maxWidth} />
   {:else}
     <div class="flex flex-col ml-2">
@@ -95,17 +95,6 @@
         style={`max-width: ${maxWidth - 4}px`}
       >
         <div class="flex items-start justify-start">
-          {#if Object.keys(currentPal.evalConfig)}
-            <div>
-              <button
-                class={`${buttonStyle}`}
-                on:click={() => colorStore.setCurrentPalEvalConfig({})}
-              >
-                Restore Defaults
-              </button>
-            </div>
-          {/if}
-          <NewLintSuggestion />
           <GlobalLintConfig />
         </div>
         <div class="text-sm">

diff --git a/apps/color-buddy/src/linting/EvalResponse.svelte b/apps/color-buddy/src/linting/EvalResponse.svelte
@@ -169,7 +169,7 @@
         class={buttonStyle}
         on:click={() => {
           lintStore.setFocusedLint(lintProgram.id);
-          configStore.setEvalDisplayMode("lint-customization");
+          configStore.setEvalDisplayMode("check-customization");
         }}
       >
         Customize

diff --git a/apps/color-buddy/src/linting/GlobalLintConfigModal.svelte b/apps/color-buddy/src/linting/GlobalLintConfigModal.svelte
@@ -10,6 +10,7 @@
   $: lints = [...$lintStore.lints].sort((a, b) => a.name.localeCompare(b.name));
   $: ignoreList = $colorStore.globallyIgnoredLints;
   $: ignoredSet = new Set(ignoreList);
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
 
   $: lintsByGroup = lints.reduce(
     (acc, lint) => {
@@ -68,6 +69,16 @@
       </div>
     {/each}
     <a class={linkStyle} href="https://color-buddy-docs.netlify.app/">Help</a>
+    {#if Object.keys(currentPal.evalConfig)}
+      <div>
+        <button
+          class={`${buttonStyle}`}
+          on:click={() => colorStore.setCurrentPalEvalConfig({})}
+        >
+          Restore Defaults
+        </button>
+      </div>
+    {/if}
   </div>
   <div class="flex flex-col px-4">
     <div class="flex flex-col overflow-scroll">

diff --git a/apps/color-buddy/src/linting/NewLintSuggestion.svelte b/apps/color-buddy/src/linting/NewLintSuggestion.svelte
@@ -51,7 +51,7 @@
         setTimeout(() => {
           loadLints();
           lintPrompt = "";
-          configStore.setEvalDisplayMode("lint-customization");
+          configStore.setEvalDisplayMode("check-customization");
         }, 100);
 
         requestState = "loaded";
@@ -97,7 +97,7 @@
               failMessage: "",
               program: "true",
             });
-            configStore.setEvalDisplayMode("lint-customization");
+            configStore.setEvalDisplayMode("check-customization");
           }}
         >
           Just give me a blank one

diff --git a/apps/color-buddy/src/stores/config-store.ts b/apps/color-buddy/src/stores/config-store.ts
@@ -17,7 +17,7 @@ interface StoreData {
     | (typeof deltaMetrics)[number]
     | (typeof contrastMetrics)[number]
     | "none";
-  evalDisplayMode: "regular" | "compact" | "lint-customization";
+  evalDisplayMode: "regular" | "compact" | "check-customization";
   exampleRoute: "svg" | "vega" | "swatches";
   includeQuotes: boolean;
   mainColumnSelectedExample: number;