extract zoom

mcnuttandrew · Jan 12, 2024 · d3a5b5f · d3a5b5f
1 parent b6a8362
commit d3a5b5f
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ The 2D graph displays hue/chroma graph and the 1D graph displays lightness. You
 
 - [x] Reduce the visual impact of the axes and labels by making them transparent gray. Set the colors, made them adaptive, set the luminance flip to .3 (50% visually)
 - [x] Flip the Y axis (zero at the bottom)
-- [ ] Make the labels integers for CIELAB
+- [x] Make the labels integers for CIELAB
 - [x] Make the axis scale sliders less visualy prominent.
 - [ ] Consider removing the axis sliders, replace them with zoom controls in the same panel as the background color selection. Changing these values is rare, they don't need to take up so much UX space.
 - [ ] The 2D graph should always be a centered hue/chroma graph. CIELAB and CIELCH would therefore use the same graph. Leave the LAB vs LCH distinction for slider based editing.
@@ -59,12 +59,12 @@ To raise the sliders, you need to click on one of the examples that are displaye
 - [ ] Eval response options
 - [ ] higher card. vis examples
 - [ ] Distribute radially
-- [ ] Rearrange some of the colors in the color area eg make rg on xy and b on z etc
-- [ ] "opposing color" to "Convert selection to opposing"
+- [?] Rearrange some of the colors in the color area eg make rg on xy and b on z etc
 - [ ] Insert color theory options, eg insert opposing, inserting analogous color, etc, mine from the adobe picker
 - [ ] NTH: Rest of basic geometry manipulations: flip (horizontal, vertical), scale
 - [ ] Examples held as assets somewhere that are downloaded rather than components (for consistency)
 - [ ] Labels, tooltips, etc
+- [x] "opposing color" to "Convert selection to opposing"
 - [x] Meta: figure out all the other features in maureen's setup
 - [x] order as diverging
 - [x] Make it possible to ignore / dismiss lints

diff --git a/src/components/ColorScatterPlot.svelte b/src/components/ColorScatterPlot.svelte
@@ -9,10 +9,9 @@
   import { makeExtents, deDup, toggleElement } from "../lib/utils";
   import navStore from "../stores/nav-store";
   import { scaleLinear } from "d3-scale";
-  import DoubleRangeSlider from "../components/DoubleRangeSlider.svelte";
-  import VerticalDoubleRangeSlider from "../components/VerticalDoubleRangeSlider.svelte";
   import simulate_cvd from "../lib/blindness";
   import ColorScatterPlotXyGuides from "./ColorScatterPlotXYGuides.svelte";
+  import ColorScatterPlotZGuide from "./ColorScatterPlotZGuide.svelte";
 
   export let scatterPlotMode: "moving" | "looking";
 
@@ -38,7 +37,11 @@
   const margin = { top: 15, right: 15, bottom: 15, left: 15 };
   const plotWidth = width - margin.left - margin.right;
   const plotHeight = height - margin.top - margin.bottom;
-  let extents = { x: [0, 1], y: [0, 1], z: [0, 1] };
+  $: extents = {
+    x: $navStore.xZoom,
+    y: $navStore.yZoom,
+    z: $navStore.zZoom,
+  };
   $: pickedColors = focusedColors.map((x) => colors[x].toChannels());
   $: selectionExtents = makeExtents(pickedColors);
   $: xPos = xScale(selectionExtents.x[0] - 7.5);
@@ -58,21 +61,34 @@
   $: xRange = config.xDomain;
   $: domainXScale = scaleLinear().domain([0, 1]).range(xRange);
   $: xScale = scaleLinear()
-    .domain([domainXScale(extents.x[0]), domainXScale(extents.x[1])])
+    .domain([
+      xRange[0] > xRange[1]
+        ? domainXScale(extents.x[1])
+        : domainXScale(extents.x[0]),
+      xRange[0] > xRange[1]
+        ? domainXScale(extents.x[0])
+        : domainXScale(extents.x[1]),
+    ])
     .range([0, plotWidth]);
 
   $: yRange = config.yDomain;
   $: domainYScale = scaleLinear().domain([0, 1]).range(yRange);
   $: yScale = scaleLinear()
-    .domain([domainYScale(extents.y[0]), domainYScale(extents.y[1])])
+    .domain([
+      yRange[0] > yRange[1]
+        ? domainYScale(extents.y[1])
+        : domainYScale(extents.y[0]),
+      yRange[0] > yRange[1]
+        ? domainYScale(extents.y[0])
+        : domainYScale(extents.y[1]),
+    ])
     .range([0, plotHeight]);
 
   $: zRange = config.zDomain;
   $: domainLScale = scaleLinear().domain([0, 1]).range(zRange);
   $: zScale = scaleLinear()
     .domain([domainLScale(extents.z[0]), domainLScale(extents.z[1])])
     .range([0, plotHeight]);
-  $: [zMin, zMax] = zScale.domain();
 
   let dragging: false | { x: number; y: number } = false;
   let dragBox: false | { x: number; y: number } = false;
@@ -223,18 +239,6 @@
     onFocusedColorsChange([...newFocusedColors]);
   }
 
-  $: zPoints = {
-    top: {
-      y: zScale.range()[0] + 15,
-      label: `${config.zChannel.toUpperCase()}: ${zScale
-        .domain()[0]
-        .toFixed(1)}`,
-    },
-    bottom: {
-      y: zScale.range()[1] - 5,
-      label: zScale.domain()[1].toFixed(1),
-    },
-  };
   // $: axisColor = bg.luminance() > 0.5 ? "gray" : "white";
   $: luminance = bg.toChroma().luminance();
   $: axisColor = luminance > 0.4 ? "#00000022" : "#ffffff55";
@@ -249,19 +253,17 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="flex">
+<div class="flex" style="background: {bg.toHex()}">
   <div class="flex flex-col">
-    {config.xyTitle}
+    <span class="text-2xl" style="color: {textColor}">
+      {config.title}
+    </span>
     <div class="flex h-full">
-      <div class="h-full py-4" style="max-height: {height}px">
-        <VerticalDoubleRangeSlider
-          bind:start={extents.y[0]}
-          bind:end={extents.y[1]}
-        />
-      </div>
+      <div class="h-full py-4" style="max-height: {height}px"></div>
       <svg
         {width}
         {height}
+        class="ml-2"
         on:mouseleave={stopDrag}
         on:mouseup={stopDrag}
         on:touchend={stopDrag}
@@ -336,15 +338,15 @@
                 fill={color.toHex()}
               />
             {/if}
-            <!-- {#if !color.inGamut()}
+            {#if !color.inGamut()}
               <g
                 pointer-events="none"
                 transform={`translate(${x(color)} ${y(color)})`}
               >
                 <line stroke="black" x1={-7} y1={-7} x2={7} y2={7}></line>
                 <line stroke="black" x1={-7} y1={7} x2={7} y2={-7}></line>
               </g>
-            {/if} -->
+            {/if}
           {/each}
           {#each blindColors as blindColor, i}
             <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -409,19 +411,16 @@
               fill-opacity="0"
               pointer-events="none"
               stroke-dasharray="5,5"
-              stroke-width="2"
+              stroke-width="1"
               cursor="grab"
             />
           {/if}
         </g>
       </svg>
     </div>
-    <div style="width: {width}px;" class="w-full px-4 ml-5">
-      <DoubleRangeSlider bind:start={extents.x[0]} bind:end={extents.x[1]} />
-    </div>
   </div>
   <div class="h-full">
-    <span>{config.zTitle}</span>
+    <span class=" text-xl opacity-0">{config.zTitle}</span>
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="flex h-full">
       <div class="flex flex-col">
@@ -433,16 +432,23 @@
           on:touchend={stopDrag}
         >
           <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <ColorScatterPlotZGuide
+            dragging={!!dragging}
+            {yScale}
+            {zScale}
+            {textColor}
+            {colorSpace}
+            {axisColor}
+          />
           <g transform={`translate(${margin.left}, ${margin.top})`}>
             <!-- svelte-ignore a11y-no-static-element-interactions -->
             <rect
               x={0}
               y={0}
               width={80}
               height={yScale.range()[1]}
-              fill={bg.toHex()}
-              stroke="gray"
-              stroke-width="1"
+              fill="white"
+              opacity="0"
               class:cursor-pointer={dragging}
               on:touchstart|preventDefault={startDrag(false)}
               on:mousedown|preventDefault={startDrag(false)}
@@ -451,17 +457,7 @@
               on:touchend|preventDefault={rectMoveEnd(true)}
               on:mouseup|preventDefault={rectMoveEnd(true)}
             />
-            {#each Object.values(zPoints) as point}
-              <text
-                pointer-events="none"
-                text-anchor={"middle"}
-                x={40}
-                y={point.y}
-                fill={textColor}
-              >
-                {point.label}
-              </text>
-            {/each}
+
             {#each deDup(colors) as color, i}
               <!-- svelte-ignore a11y-no-static-element-interactions -->
               <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -503,8 +499,7 @@
                 y={Math.min(dragging.y, dragBox.y) - parentPos.y}
                 width={80 - 10}
                 height={Math.abs(dragging.y - dragBox.y)}
-                fill="steelblue"
-                fill-opacity="0.5"
+                fill={selectionColor}
                 class="pointer-events-none"
               />
             {/if}
@@ -514,30 +509,17 @@
                 y={zPos - 5}
                 width={80 - 10}
                 height={selectionDepth + 15}
-                stroke="steelblue"
+                stroke={selectionColor}
                 fill="white"
                 fill-opacity="0"
                 pointer-events="none"
                 stroke-dasharray="5,5"
-                stroke-width="2"
+                stroke-width="1"
                 cursor="grab"
               />
             {/if}
           </g>
         </svg>
-        <button
-          on:click={() => {
-            extents = { x: [0, 1], y: [0, 1], z: [0, 1] };
-          }}
-        >
-          Reset
-        </button>
-      </div>
-      <div class="py-4" style="height: {height}px">
-        <VerticalDoubleRangeSlider
-          bind:start={extents.z[0]}
-          bind:end={extents.z[1]}
-        />
       </div>
     </div>
   </div>

diff --git a/src/components/ColorScatterPlotZGuide.svelte b/src/components/ColorScatterPlotZGuide.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  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,
+      label: `${config.zChannel.toUpperCase()}: ${zScale
+        .domain()[0]
+        .toFixed(1)}`,
+    },
+    bottom: {
+      y: zScale.range()[1] - 5,
+      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}
+  x2={10}
+  y2={plotHeight}
+  stroke={axisColor}
+  stroke-width="1"
+/>
+
+{#each Object.values(zPoints) as point}
+  <text
+    pointer-events="none"
+    text-anchor={"middle"}
+    x={40 + 15}
+    y={point.y}
+    fill={textColor}
+  >
+    {point.label}
+  </text>
+{/each}
diff --git a/src/content-modules/LeftPanel.svelte b/src/content-modules/LeftPanel.svelte
@@ -11,6 +11,7 @@
   import PickAi from "./context-free-tools/PickAI.svelte";
   import { buttonStyle } from "../lib/styles";
   import ShortCuts from "./context-free-tools/ShortCuts.svelte";
+  import Zoom from "./context-free-tools/Zoom.svelte";
 
   import SavedPals from "./SavedPals.svelte";
   import SetColorSpace from "./SetColorSpace.svelte";
@@ -66,6 +67,7 @@
     <PalPreview pal={$colorStore.currentPal} />
 
     <Background />
+    <Zoom />
     <GetColorsFromString />
     <SetColorSpace />
   </section>

diff --git a/src/content-modules/Swatches.svelte b/src/content-modules/Swatches.svelte
@@ -14,16 +14,16 @@
   let common = "cursor-pointer mr-2 mb-2 transition-all";
   let classes = [
     {
-      className: `${common} w-14 h-14 `,
+      className: `${common} w-8 h-8 `,
       styleMap: (color: Color): string => `background-color: ${color.toHex()};`,
     },
     {
-      className: `${common} w-8 h-8`,
+      className: `${common} w-6 h-6`,
       styleMap: (color: Color): string => `background-color: ${color.toHex()};`,
     },
     {
-      className: `${common} w-8 h-8 rounded-full`,
-      styleMap: (color: Color): string => `border: 4px solid ${color.toHex()};`,
+      className: `${common} w-4 h-4 rounded-full`,
+      styleMap: (color: Color): string => `border: 2px solid ${color.toHex()};`,
     },
   ];
 </script>
@@ -86,7 +86,7 @@
             let:tooltipOpen
             slot="target"
             class={className}
-            style={styleMap(color)}
+            style={`${styleMap(color)}`}
             on:click={(e) => {
               const isFocused = focusSet.has(idx);
               const shiftKey = e.shiftKey;
@@ -104,7 +104,6 @@
                   focusStore.clearColors();
                 }
               } else if (tooltipOpen && !isFocused) {
-                console.log("C");
                 if (shiftKey) {
                   focusStore.addColor(idx);
                 } else {
@@ -126,8 +125,12 @@
     </div>
   {/each}
   <div class="flex flex-wrap justify-center">
-    {#each colors as color}
-      <div style={`color: ${color.toHex()}`} class="mr-2">
+    {#each colors as color, i}
+      <div
+        style={`color: ${color.toHex()}`}
+        class="mr-2"
+        class:mt-2={focusSet.has(i)}
+      >
         {color.toHex()}
       </div>
     {/each}

diff --git a/src/content-modules/context-free-tools/AddFamiliarPal.svelte b/src/content-modules/context-free-tools/AddFamiliarPal.svelte
@@ -39,9 +39,6 @@
       });
     });
     Object.entries(chroma.brewer).forEach(([name, colors]) => {
-      if (!colorBrewerMapToType[name.toLowerCase()]) {
-        console.log(name);
-      }
       newPals.push({
         name,
         colors: colors.map((x) => colorFromString(x, colorSpace)),