make distributes more understandable

mcnuttandrew · Feb 24, 2024 · cd66708 · cd66708
1 parent 21f7575
commit cd66708
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/src/controls/DistributePoints.svelte b/src/controls/DistributePoints.svelte
@@ -11,11 +11,14 @@
   $: config = colorPickerConfig[colorSpace];
   $: zName = colorPickerConfig[colorSpace].zChannel;
 
-  type Direction = "horizontal" | "vertical" | "in z space";
-  function distributePoints(direction: Direction) {
+  interface Direction {
+    direction: "horizontal" | "vertical" | "in z space";
+    name: string;
+  }
+  function distributePoints(dir: Direction) {
     let sortedIndexes = focusedColors.sort((a, b) => {
       const modeToIdx = { horizontal: 1, vertical: 2, "in z space": 0 };
-      const idx = modeToIdx[direction] || 0;
+      const idx = modeToIdx[dir.direction] || 0;
       const pointA = colors[a].toChannels()[idx];
       const pointB = colors[b].toChannels()[idx];
       return pointA - pointB;
@@ -33,9 +36,9 @@
       const xIdx = config.xChannelIndex;
       const yIdx = config.yChannelIndex;
       const zIdx = config.zChannelIndex;
-      if (direction === "horizontal") {
+      if (dir.direction === "horizontal") {
         newPoint[xIdx] = minPoint[xIdx] * (1 - t) + maxPoint[xIdx] * t;
-      } else if (direction === "vertical") {
+      } else if (dir.direction === "vertical") {
         newPoint[yIdx] = minPoint[yIdx] * (1 - t) + maxPoint[yIdx] * t;
       } else {
         newPoint[zIdx] = minPoint[zIdx] * (1 - t) + maxPoint[zIdx] * t;
@@ -53,10 +56,11 @@
 
     colorStore.setCurrentPalColors(newColors);
   }
+  $: isPolar = config.isPolar;
   $: directions = [
-    "horizontal",
-    "vertical",
-    `in ${zName} space`,
+    { direction: "horizontal", name: isPolar ? "radial" : "horizontal" },
+    { direction: "vertical", name: isPolar ? "angle" : "vertical" },
+    { direction: "in z space", name: `in ${zName.toUpperCase()} space` },
   ] as Direction[];
 </script>
 
@@ -66,7 +70,7 @@
   <div class="flex flex-wrap">
     {#each directions as direction}
       <button class={buttonStyle} on:click={() => distributePoints(direction)}>
-        {direction}
+        {direction.name}
       </button>
     {/each}
   </div>

diff --git a/src/scatterplot/ColorScatterPlot.svelte b/src/scatterplot/ColorScatterPlot.svelte
@@ -198,7 +198,7 @@
   let selectionUpdate = (isZ: boolean) => (e: any) => {
     // console.log("selection update");
     const { x, y } = toXY(e);
-    selectionMouseCurrent = { x, y };
+    selectionMouseCurrent = { x: x + 10, y: y + 20 };
   };
   let selectionEnd = (isZ: boolean) => (e: any) => {
     interactionMode = "idle";
@@ -304,12 +304,19 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="flex pb-2" style="background: {bg.toDisplay()}">
   <div class="flex flex-col items-center">
-    <!-- <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"></div>
-      <svg {width} {height} class="ml-2" bind:this={svgContainer}>
+      <svg
+        {width}
+        {height}
+        class="ml-2"
+        bind:this={svgContainer}
+        on:mouseleave={interactionMode === "drag"
+          ? dragEnd(false)
+          : interactionMode === "select"
+            ? selectionEnd(false)
+            : () => {}}
+      >
         <g transform={`translate(${margin.left}, ${margin.top})`}>
           {#if config.isPolar}
             <ColorScatterPlotPolarGuide {...guideProps} {rScale} />
@@ -590,7 +597,8 @@
   </div>
 </div>
 <div class="flex justify-start text-gray-400 text-sm">
-  {#if $configStore.showGamutMarkers} ⨂indicates out of gamut value{:else}&nbsp;{/if}
+  {#if $configStore.showGamutMarkers}
+    ⨂indicates out of gamut value{:else}&nbsp;{/if}
 </div>
 
 <style>