rework visual apperance

mcnuttandrew · Jan 13, 2024 · 240f996 · 240f996
1 parent d3a5b5f
commit 240f996
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 51 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -5,7 +5,6 @@
   import LeftPanel from "./content-modules/LeftPanel.svelte";
   import ActionArea from "./content-modules/ActionArea.svelte";
   import Examples from "./content-modules/Examples.svelte";
-  import Swatches from "./content-modules/Swatches.svelte";
   import Eval from "./content-modules/Eval.svelte";
   import KeyboardHooks from "./components/KeyboardHooks.svelte";
   import ComparePal from "./content-modules/ComparePal.svelte";
@@ -32,7 +31,6 @@
           startDragging={() => colorStore.pausePersistance()}
           stopDragging={() => colorStore.resumePersistance()}
         />
-        <Swatches />
       </div>
       <div class="grow">
         <nav

diff --git a/src/components/ColorScatterPlot.svelte b/src/components/ColorScatterPlot.svelte
@@ -379,12 +379,20 @@
               <text fill={textColor}>{hoveredPoint.toHex()}</text>
             </g>
           {/if}
+          <circle
+            cx={x(bg)}
+            cy={y(bg)}
+            r={15}
+            stroke={axisColor}
+            fill={bg.toHex()}
+          />
           <text
             x={xScale(bg.toChannels()[1])}
             y={yScale(bg.toChannels()[2])}
             fill={textColor}
+            font-size={12}
             text-anchor="middle"
-            alignment-baseline="middle"
+            dominant-baseline="central"
             class="pointer-events-none"
           >
             BG
@@ -431,9 +439,7 @@
           on:mouseup={stopDrag}
           on:touchend={stopDrag}
         >
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
           <ColorScatterPlotZGuide
-            dragging={!!dragging}
             {yScale}
             {zScale}
             {textColor}
@@ -463,7 +469,7 @@
               <!-- svelte-ignore a11y-click-events-have-key-events -->
               <rect
                 x={10 - (focusSet.has(i) ? 5 : 0)}
-                class="cursor-pointer color-bricks"
+                class="cursor-pointer"
                 y={z(color)}
                 width={80 - 10 * 2 + (focusSet.has(i) ? 10 : 0)}
                 height={5}
@@ -480,7 +486,7 @@
               <!-- svelte-ignore a11y-click-events-have-key-events -->
               <rect
                 x={10 - (focusSet.has(i) ? 5 : 0)}
-                class="cursor-pointer color-bricks"
+                class="cursor-pointer"
                 y={z(color)}
                 width={80 - 10 * 2 + (focusSet.has(i) ? 10 : 0)}
                 height={5}
@@ -531,4 +537,8 @@
     -webkit-transition: r 0.2s ease-in-out;
     -moz-transition: r 0.2s ease-in-out;
   }
+
+  svg {
+    overflow: visible;
+  }
 </style>
diff --git a/src/components/ColorScatterPlotXYGuides.svelte b/src/components/ColorScatterPlotXYGuides.svelte
@@ -24,29 +24,29 @@
     centerTop: {
       x: (xScale.range()[1] - xScale.range()[0]) / 2,
       y: yScale.range()[0],
-      labelAdjust: { x: -5, y: 15 },
-      anchor: "end",
+      labelAdjust: { x: 0, y: -5 },
+      anchor: "middle",
       label: `${config.yChannel}: ${axisFormatter(yScale.domain()[0])}`,
     },
     centerBottom: {
       x: (xScale.range()[1] - xScale.range()[0]) / 2,
       y: yScale.range()[1],
-      anchor: "start",
-      labelAdjust: { x: 0, y: -3 },
+      anchor: "middle",
+      labelAdjust: { x: 0, y: 15 },
       label: axisFormatter(yScale.domain()[1]),
     },
     centerLeft: {
       x: xScale.range()[0],
       y: (yScale.range()[1] - yScale.range()[0]) / 2,
       anchor: "start",
-      labelAdjust: { x: 5, y: 15 },
+      labelAdjust: { x: 5, y: -3 },
       label: axisFormatter(xScale.domain()[0]),
     },
     centerRight: {
       x: xScale.range()[1],
       y: (yScale.range()[1] - yScale.range()[0]) / 2,
       anchor: "end",
-      labelAdjust: { x: -5, y: 0 },
+      labelAdjust: { x: -5, y: -3 },
       label: `${config.xChannel}: ${axisFormatter(xScale.domain()[1])}`,
     },
   };

diff --git a/src/components/ColorScatterPlotZGuide.svelte b/src/components/ColorScatterPlotZGuide.svelte
@@ -1,41 +1,29 @@
 <script lang="ts">
-  import colorStore from "../stores/color-store";
+  //   import colorStore from "../stores/color-store";
   import { colorPickerConfig } from "../lib/Color";
-  export let dragging: boolean;
   export let yScale: any;
   export let zScale: any;
   export let textColor: string;
   export let colorSpace: string;
   export let axisColor: string;
 
-  $: bg = $colorStore.currentPal.background;
   $: config = colorPickerConfig[colorSpace];
 
   $: zPoints = {
     top: {
-      y: zScale.range()[0] + 15,
+      y: zScale.range()[0] + 0,
       label: `${config.zChannel.toUpperCase()}: ${zScale
         .domain()[0]
         .toFixed(1)}`,
     },
     bottom: {
-      y: zScale.range()[1] - 5,
+      y: zScale.range()[1] + 15,
       label: zScale.domain()[1].toFixed(1),
     },
   };
   $: plotHeight = yScale.range()[1];
 </script>
 
-<!-- <rect
-  x={0}
-  y={0}
-  width={80}
-  height={plotHeight}
-  fill={bg.toHex()}
-  stroke="gray"
-  stroke-width="1"
-  class:cursor-pointer={dragging}
-/> -->
 <line
   x1={10}
   y1={0}

diff --git a/src/content-modules/Examples.svelte b/src/content-modules/Examples.svelte
@@ -12,6 +12,7 @@
   import CodeMirror from "svelte-codemirror-editor";
   import Tooltip from "../components/Tooltip.svelte";
   import Example from "../components/Example.svelte";
+  import Swatches from "../content-modules/Swatches.svelte";
 
   let modalState: "closed" | "input-svg" | "edit-colors" = "closed";
   let modifyingExample: number | false = false;
@@ -104,6 +105,9 @@
       </div>
     {/each}
   {/if}
+  {#if $exampleStore.sections["swatches"]}
+    <Swatches />
+  {/if}
   {#if $exampleStore.sections.pages}
     <TinyWebpage />
     <TextBlock />

diff --git a/src/content-modules/Swatches.svelte b/src/content-modules/Swatches.svelte
@@ -33,11 +33,11 @@
   style={`background-color: ${bg.toHex()}; max-width: 600px`}
 >
   <div class="flex mb-2 justify-between items-center">
-    <span class="text-sm flex flex-col" class:text-white={bg.luminance() < 0.5}>
+    <!-- <span class="text-sm flex flex-col" class:text-white={bg.luminance() < 0.5}>
       <span>Click to modify colors</span>
       <span>Hold shift to select multiple</span>
-    </span>
-    {#if focused.length === 1}
+    </span> -->
+    <!-- {#if focused.length === 1}
       {#if focused[0] > 0}
         <button
           class="{buttonStyle} mr-2"
@@ -62,8 +62,8 @@
           Move backward
         </button>
       {/if}
-    {/if}
-    {#if focused.length > 0}
+    {/if} -->
+    <!-- {#if focused.length > 0}
       <button
         class={buttonStyle}
         on:click={() => {
@@ -72,7 +72,7 @@
       >
         Clear Selection
       </button>
-    {/if}
+    {/if} -->
   </div>
   {#each classes as { className, styleMap }}
     <div class="flex justify-center flex-wrap">

diff --git a/src/stores/example-store.ts b/src/stores/example-store.ts
@@ -4,33 +4,34 @@ import * as idb from "idb-keyval";
 type Example = { svg: string; numColors: number };
 interface StoreData {
   examples: Example[];
-  sections: Record<string, boolean>;
+  sections: typeof InitialSections;
 }
-
+const InitialSections = {
+  pages: true,
+  ordinal: true,
+  categorical: true,
+  custom: true,
+  swatches: true,
+};
 const InitialStore: StoreData = {
   examples: [],
-  sections: {
-    pages: true,
-    ordinal: true,
-    categorical: true,
-    custom: true,
-  },
+  sections: InitialSections,
 };
 
 const storeName = "color-pal-examples";
 function createStore() {
-  const storeData: StoreData = JSON.parse(JSON.stringify(InitialStore));
-  // install defaults if not present
-  Object.keys(InitialStore).forEach((key) => {
-    if (!(key in storeData)) {
-      const Key: keyof StoreData = key as any;
-      storeData[Key] = InitialStore[Key] as any;
-    }
-  });
+  let storeData: StoreData = JSON.parse(JSON.stringify(InitialStore));
 
   const { subscribe, set, update } = writable<StoreData>(storeData);
   idb.get(storeName).then((x) => {
-    if (x) set(x);
+    if (x) {
+      const newStore = {
+        ...InitialStore,
+        ...x,
+        sections: { ...InitialSections, ...(x.sections || {}) },
+      };
+      set(newStore);
+    }
   });
   const persistUpdate = (updateFunc: (old: StoreData) => StoreData) =>
     update((oldStore) => {