From b03a47c38f6a0faebfb45daacf55bc2eb5e2be01 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Mon, 5 Feb 2024 19:57:09 -0800
Subject: [PATCH] remove rotate from scatter, restore it as a left panel
 control

---
 src/components/Tooltip.svelte           |   2 +-
 src/content-modules/Controls.svelte     |   2 +
 src/controls/Rotate.svelte              | 179 +++++++++++++++++++++++
 src/controls/SetColorSpace.svelte       |   6 +-
 src/lib/Color.ts                        |   1 +
 src/scatterplot/ColorScatterPlot.svelte | 187 +-----------------------
 6 files changed, 188 insertions(+), 189 deletions(-)
 create mode 100644 src/controls/Rotate.svelte

diff --git a/src/components/Tooltip.svelte b/src/components/Tooltip.svelte
index 3455b090..5ca55dbb 100644
--- a/src/components/Tooltip.svelte
+++ b/src/components/Tooltip.svelte
@@ -86,7 +86,7 @@
         >
           {#if allowDrag}
             <div
-              class="absolute cursor-move w-12 h-12 bg-stone-600 rounded-full grab-handle"
+              class="absolute cursor-move w-12 h-12 bg-stone-300 rounded-full grab-handle"
               use:draggable
               on:dragmove|preventDefault={(e) => {
                 e.preventDefault();
diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
index 0e1cfd1d..84cf6e58 100644
--- a/src/content-modules/Controls.svelte
+++ b/src/content-modules/Controls.svelte
@@ -9,6 +9,7 @@
   import AdjustColor from "../controls/AdjustColor.svelte";
   import AddColor from "../controls/AddColor.svelte";
   import ColorChannelPicker from "../components/ColorChannelPicker.svelte";
+  import Rotate from "../controls/Rotate.svelte";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;
@@ -34,6 +35,7 @@
 
 <DistributePoints />
 <AlignSelection />
+<Rotate />
 <!-- <ModifySelection /> -->
 
 <InterpolatePoints />
diff --git a/src/controls/Rotate.svelte b/src/controls/Rotate.svelte
new file mode 100644
index 00000000..eabccf4f
--- /dev/null
+++ b/src/controls/Rotate.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { Color } from "../lib/Color";
+  import colorStore from "../stores/color-store";
+  import focusStore from "../stores/focus-store";
+  import { avgColors } from "../lib/utils";
+  import { buttonStyle, buttonStyleSelected } from "../lib/styles";
+  import Tooltip from "../components/Tooltip.svelte";
+
+  let axis = "z" as "x" | "y" | "z";
+  $: focusedColors = $focusStore.focusedColors;
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: colors = currentPal.colors;
+  $: angle = 0;
+
+  $: colorSpace = currentPal.colorSpace;
+  $: angle, rotatePoints();
+  $: memorizedColors = false as false | Color[];
+  let rotationPoint = "zero " as number | "avg" | "zero";
+  function rotatePoints() {
+    if (focusedColors.length === 0) {
+      // memorizedColors = false;
+      return;
+    }
+    if (memorizedColors && focusedColors.length !== memorizedColors.length) {
+      memorizedColors = [...colors];
+    }
+    if (!memorizedColors) {
+      memorizedColors = [...colors];
+      angle = 0;
+    }
+    let localColors = memorizedColors;
+
+    let centerChannels = [0, 0, 0];
+
+    if (rotationPoint === "avg") {
+      const clrs = focusedColors.map((x) => localColors[x]);
+      // @ts-ignore
+      let center = avgColors(clrs, colorSpace);
+      centerChannels = center.toChannels();
+    } else if (rotationPoint === "zero") {
+      centerChannels = [0, 0, 0];
+    } else if (localColors[rotationPoint]) {
+      centerChannels = localColors[rotationPoint].toChannels();
+    } else {
+      centerChannels = [0, 0, 0];
+    }
+
+    const rotated = Object.fromEntries(
+      focusedColors
+        .map((x) => localColors[x])
+        .map((localColor) => {
+          const color = Color.toColorSpace(localColor, colorSpace);
+          const channels = color.toChannels();
+          //   https://math.stackexchange.com/questions/4354438/how-to-rotate-a-point-on-a-cartesian-plane-around-something-other-than-the-origi
+          const channelMap = {
+            x: [0, 2],
+            y: [0, 1],
+            z: [1, 2],
+          };
+          const channelA = channelMap[axis][0];
+          const channelB = channelMap[axis][1];
+
+          const x1 = channels[channelA];
+          const y1 = channels[channelB];
+          const xc = centerChannels[channelA];
+          const yc = centerChannels[channelB];
+          const radAngle = (angle / 360) * Math.PI * 2;
+          const x3 =
+            Math.cos(radAngle) * (x1 - xc) -
+            Math.sin(radAngle) * (y1 - yc) +
+            xc;
+          const y3 =
+            Math.sin(radAngle) * (x1 - xc) +
+            Math.cos(radAngle) * (y1 - yc) +
+            yc;
+          let newChannels = [0, 0, 0] as [number, number, number];
+          switch (axis) {
+            case "x":
+              newChannels = [x3, channels[1], y3];
+              break;
+            case "y":
+              newChannels = [x3, y3, channels[2]];
+              break;
+            case "z":
+              newChannels = [channels[0], x3, y3];
+              break;
+          }
+          return Color.colorFromChannels(newChannels, colorSpace);
+        })
+        .map((x, y) => [y, x])
+    );
+    const newColors = localColors.map((x, idx) =>
+      focusedColors.includes(idx) ? rotated[focusedColors.indexOf(idx)] : x
+    );
+    colorStore.setCurrentPalColors(newColors);
+  }
+
+  function setRotatePoint(point: typeof rotationPoint) {
+    rotationPoint = point;
+  }
+  const zeroRotationSpaces = new Set(["lab"]);
+  {
+    if (!zeroRotationSpaces.has(colorSpace) && rotationPoint === "zero") {
+      rotationPoint = "avg";
+    }
+  }
+</script>
+
+{#if focusedColors.length > 0 && colorSpace !== "hsl" && colorSpace !== "hsv" && colorSpace !== "lch"}
+  <div class="w-full border-t-2 border-black my-2"></div>
+  <div class="flex justify-between w-full">
+    <div class="font-bold">Rotate</div>
+    <Tooltip>
+      <button slot="target" let:toggle on:click={toggle}>⚙</button>
+      <div slot="content">
+        <div class="flex flex-col">
+          <div>Around which point?</div>
+          <div class="flex flex-wrap">
+            <button
+              on:click={() => setRotatePoint("avg")}
+              class={`${buttonStyle} mb-2 ${
+                rotationPoint === "avg" ? buttonStyleSelected : ""
+              }`}
+            >
+              An average of the selected colors
+            </button>
+            {#if zeroRotationSpaces.has(colorSpace)}
+              <button
+                on:click={() => setRotatePoint("zero")}
+                class={`${buttonStyle} mb-2 ${
+                  rotationPoint === "zero" ? buttonStyleSelected : ""
+                }`}
+              >
+                Around zero
+              </button>
+            {/if}
+
+            {#each focusedColors as colorIdx}
+              <button
+                class={`${buttonStyle} flex justify-center items-center ${
+                  rotationPoint === colorIdx ? buttonStyleSelected : ""
+                }`}
+                on:click={() => setRotatePoint(colorIdx)}
+              >
+                {colors[colorIdx].toHex()}
+                <span
+                  style={`background-color: ${colors[colorIdx].toHex()}`}
+                  class="rounded-full w-3 h-3 ml-2"
+                ></span>
+              </button>
+            {/each}
+          </div>
+          <div class="flex">
+            Rotate about the
+            <select bind:value={axis} class="mx-1">
+              {#each ["x", "y", "z"] as axis}
+                <option value={axis}>{axis}</option>
+              {/each}
+            </select>
+            Axis
+          </div>
+        </div>
+      </div>
+    </Tooltip>
+  </div>
+  <div class="flex flex-col">
+    <div class="w-full flex justify-between">
+      <input min={0} max={360} step={1} type="range" bind:value={angle} />
+      <input
+        min={0}
+        max={360}
+        step={1}
+        type="number"
+        bind:value={angle}
+        class="w-16 text-sm"
+      />
+    </div>
+  </div>
+{/if}
diff --git a/src/controls/SetColorSpace.svelte b/src/controls/SetColorSpace.svelte
index 6d05304d..58a7ea44 100644
--- a/src/controls/SetColorSpace.svelte
+++ b/src/controls/SetColorSpace.svelte
@@ -6,9 +6,9 @@
   export let colorSpace: string;
   export let onChange: (e: any) => void;
   // const notAllowed = new Set(["rgb", "hsv", "hsl", "srgb", "lch", "oklch"]);
-  const notAllowed = new Set(["rgb", "lch", "oklch", "srgb"]);
+  // const notAllowed = new Set(["rgb", "lch", "oklch", "srgb"]);
+  const notAllowed = new Set(["rgb", "oklch", "srgb", "jzazbz", "oklab"]);
   // const onChange = (e: any) => colorStore.setColorSpace(e);
-
   $: options = Object.keys(colorPickerConfig)
     .filter((x) => !notAllowed.has(x))
     .sort();
@@ -23,7 +23,7 @@
         class:font-bold={space === colorSpace}
         on:click={() => onChange(space)}
       >
-        {space}
+        {space.toUpperCase()}
       </button>
     {/each}
   </div>
diff --git a/src/lib/Color.ts b/src/lib/Color.ts
index c06e810d..7ed34144 100644
--- a/src/lib/Color.ts
+++ b/src/lib/Color.ts
@@ -275,6 +275,7 @@ class LCH extends Color {
   domains = { l: [100, 0], c: [0, 150], h: [360, 0] } as Domain;
   stepSize: Channels = [1, 1, 1];
   dimensionToChannel = { x: "c", y: "h", z: "l" };
+  isPolar = true;
   axisLabel = (num: number) => `${Math.round(num)}`;
 }
 
diff --git a/src/scatterplot/ColorScatterPlot.svelte b/src/scatterplot/ColorScatterPlot.svelte
index 3e931a98..2313231c 100644
--- a/src/scatterplot/ColorScatterPlot.svelte
+++ b/src/scatterplot/ColorScatterPlot.svelte
@@ -266,78 +266,6 @@
     class: "pointer-events-none",
   };
 
-  $: initialRotationColors = [] as Color[];
-  $: initialRotatePos = { x: 0, y: 0 };
-  $: rotatePivotCenter = { x: 0, y: 0 };
-  $: rotatePosition = { x: 0, y: 0 };
-
-  function rotateStart(e: any) {
-    // console.log("rotate start");
-    startDragging();
-    interactionMode = "rotate";
-    initialRotationColors = [...colors];
-    // const pos = toXY(e);
-    initialRotatePos = {
-      x: e.target.getBBox().x,
-      y: e.target.getBBox().y,
-    };
-    rotatePivotCenter = screenSpaceAvg(
-      focusedColors
-        .map((x) => initialRotationColors[x])
-        .map((el) => ({
-          x: x(el),
-          y: y(el),
-        }))
-    );
-    rotateUpdate(e);
-  }
-
-  function rotateUpdate(e: any) {
-    // console.log("rotate update");
-    let currentPos = toXY(e);
-    currentPos = {
-      x: currentPos.x - svgContainer.getBoundingClientRect().x,
-      y: currentPos.y - svgContainer.getBoundingClientRect().y,
-    };
-    rotatePosition = currentPos;
-    let newAngle = Math.atan2(
-      currentPos.y - rotatePivotCenter.y,
-      currentPos.x - rotatePivotCenter.x
-    );
-    const initialAngle = Math.atan2(
-      initialRotatePos.y - rotatePivotCenter.y,
-      initialRotatePos.x - rotatePivotCenter.x
-    );
-    let angle = newAngle - initialAngle;
-    angle = angle < 0 ? angle + 2 * Math.PI : angle;
-    const xc = rotatePivotCenter.x;
-    const yc = rotatePivotCenter.y;
-    const newColors = focusedColors
-      .map((x) => initialRotationColors[x])
-      .map((color) => {
-        const x1 = x(color);
-        const y1 = y(color);
-        const x3 =
-          Math.cos(angle) * (x1 - xc) - Math.sin(angle) * (y1 - yc) + xc;
-        const y3 =
-          Math.sin(angle) * (x1 - xc) + Math.cos(angle) * (y1 - yc) + yc;
-        const newChannels = [...color.toChannels()] as [number, number, number];
-        newChannels[config.xChannelIndex] = scales.xInv(x3, y3);
-        newChannels[config.yChannelIndex] = scales.yInv(x3, y3);
-        return color.fromChannels(newChannels);
-      });
-    const outColors = [...initialRotationColors];
-    newColors.forEach((color, idx) => {
-      outColors[focusedColors[idx]] = color;
-    });
-    onColorsChange(outColors);
-  }
-  function rotateEnd() {
-    // console.log("rotate end");
-    interactionMode = "idle";
-    stopDragging();
-  }
-
   let puttingPreview: false | Color = false;
 
   function puttingUpdate(e: any) {
@@ -364,57 +292,6 @@
     }, 10);
     puttingPreview = false;
   }
-
-  $: handles = [
-    // {
-    //   type: "stretch",
-    //   label: "left",
-    //   x: pos.xPos - 15,
-    //   y: pos.yPos + pos.selectionHeight / 2,
-    // },
-    // {
-    //   type: "stretch",
-    //   label: "right",
-    //   x: pos.xPos + pos.selectionWidth + 5,
-    //   y: pos.yPos + pos.selectionHeight / 2,
-    // },
-    // {
-    //   type: "stretch",
-    //   label: "top",
-    //   x: pos.xPos + pos.selectionWidth / 2,
-    //   y: pos.yPos - 15,
-    // },
-    // {
-    //   type: "stretch",
-    //   label: "bottom",
-    //   x: pos.xPos + pos.selectionWidth / 2,
-    //   y: pos.yPos + pos.selectionHeight + 5,
-    // },
-    {
-      type: "rotate",
-      label: "",
-      x: pos.xPos,
-      y: pos.yPos,
-    },
-    {
-      type: "rotate",
-      label: "",
-      x: pos.xPos,
-      y: pos.yPos + pos.selectionHeight,
-    },
-    {
-      type: "rotate",
-      label: "",
-      x: pos.xPos + pos.selectionWidth,
-      y: pos.yPos,
-    },
-    {
-      type: "rotate",
-      label: "",
-      x: pos.xPos + pos.selectionWidth,
-      y: pos.yPos + pos.selectionHeight,
-    },
-  ];
   let svgContainer: any;
 </script>
 
@@ -441,14 +318,10 @@
             on:touchstart|preventDefault={selectionStart(false)}
             on:touchmove|preventDefault={interactionMode === "drag"
               ? dragUpdate(false)
-              : interactionMode === "rotate"
-                ? rotateUpdate
-                : selectionUpdate(false)}
+              : selectionUpdate(false)}
             on:touchend|preventDefault={interactionMode === "drag"
               ? dragEnd(false)
-              : interactionMode === "rotate"
-                ? rotateEnd
-                : selectionEnd(false)}
+              : selectionEnd(false)}
           />
 
           <g
@@ -545,51 +418,6 @@
                 on:mousedown|preventDefault={(e) => dragStart(e)}
               />
             {/if}
-            {#if focusedColors.length > 1}
-              {#each handles as handle}
-                {#if handle.type === "stretch"}
-                  <rect
-                    x={handle.x}
-                    y={handle.y}
-                    width={10}
-                    fill={"black"}
-                    cursor="grab"
-                    height={10}
-                  />
-                {/if}
-                {#if handle.type === "rotate"}
-                  <circle
-                    cx={handle.x}
-                    cy={handle.y}
-                    r={10}
-                    fill={"steelblue"}
-                    opacity={0.5}
-                    cursor="grab"
-                    on:mousedown|preventDefault|stopPropagation={rotateStart}
-                    on:mouseup|preventDefault|stopPropagation={rotateEnd}
-                    on:touchstart|preventDefault|stopPropagation={rotateStart}
-                    on:touchmove|preventDefault|stopPropagation={rotateUpdate}
-                    on:touchend|preventDefault|stopPropagation={rotateEnd}
-                  />
-                {/if}
-              {/each}
-              {#if interactionMode === "rotate"}
-                <circle
-                  fill="green"
-                  r={10}
-                  cx={rotatePosition.x}
-                  cy={rotatePosition.y}
-                  pointer-events="none"
-                />
-                <line
-                  x1={rotatePivotCenter.x}
-                  y1={rotatePivotCenter.y}
-                  x2={rotatePosition.x}
-                  y2={rotatePosition.y}
-                  stroke="green"
-                />
-              {/if}
-            {/if}
           </g>
         </g>
         {#if interactionMode === "select"}
@@ -616,15 +444,6 @@
             on:touchend|preventDefault={dragEnd(false)}
           />
         {/if}
-        {#if interactionMode === "rotate"}
-          <rect
-            {...fillParamsXY}
-            on:mousemove|preventDefault={rotateUpdate}
-            on:mouseup|preventDefault={rotateEnd}
-            on:touchmove|preventDefault={rotateUpdate}
-            on:touchend|preventDefault={rotateEnd}
-          />
-        {/if}
         {#if scatterPlotMode === "putting"}
           {#if puttingPreview}
             <circle
@@ -646,8 +465,6 @@
     </div>
   </div>
   <div class="h-full">
-    <!-- invisible space inserter -->
-    <!-- <span class=" text-xl opacity-0">X</span> -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="flex h-full">
       <div class="flex flex-col">