Color picker refactoring

js/template/ColorHandlerTemplate.js

@@ -1,14 +1,20 @@
 import IDraggableTemplate from "./IDraggableTemplate"
 import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
+import Utility from "../Utility"
 
 /** @typedef {import("../element/ColorHandlerElement").default} ColorHandlerElement */
 
 /** @extends {IDraggableTemplate<ColorHandlerElement>} */
 export default class ColorHandlerTemplate extends IDraggableTemplate {
 
+    #locationChangeCallback
+
     connectedCallback() {
         super.connectedCallback()
         this.window = this.element.closest("ueb-window")
+        this.movementSpace = this.element.parentElement
+        const bounding = this.movementSpace.getBoundingClientRect()
+        this.movementSpaceSize = [bounding.width, bounding.height]
     }
 
     createDraggableObject() {
@@ -22,4 +28,21 @@ export default class ColorHandlerTemplate extends IDraggableTemplate {
             stepSize: 1,
         })
     }
+
+    /**  @param {[Number, Number]} param0 */
+    adjustLocation([x, y]) {
+        const radius = Math.round(this.movementSpaceSize[0] / 2)
+        x = x - radius
+        y = -(y - radius)
+        let [r, theta] = Utility.getPolarCoordinates([x, y])
+        r = Math.min(r, radius), [x, y] = Utility.getCartesianCoordinates([r, theta])
+        x = Math.round(x + radius)
+        y = Math.round(-y + radius)
+        this.#locationChangeCallback?.([x, y])
+        return [x, y]
+    }
+
+    setLocationChangeCallback(callback) {
+        this.#locationChangeCallback = callback
+    }
 }

js/template/ColorPickerWindowTemplate.js

@@ -1,6 +1,8 @@
 import { html } from "lit"
+import ColorHandlerElement from "../element/ColorHandlerElement"
 import Configuration from "../Configuration"
 import LinearColorEntity from "../entity/LinearColorEntity"
+import Utility from "../Utility"
 import WindowTemplate from "./WindowTemplate"
 
 /** @typedef {import("../element/WindowElement").default} WindowElement */
@@ -16,10 +18,11 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
     }
     /** @param {LinearColorEntity} value */
     set color(value) {
-        if (value.toNumber() == this.color.toNumber()) {
-            this.element.requestUpdate("color", this.#color)
-            this.#color = value
+        if (value.toNumber() == this.color?.toNumber()) {
+            return
         }
+        this.element.requestUpdate("color", this.#color)
+        this.#color = value
     }
 
     connectedCallback() {
@@ -29,6 +32,14 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
 
     /** @param {Map} changedProperties */
     firstUpdated(changedProperties) {
+        const wheelHandler = new ColorHandlerElement()
+        const spectrumHandler = new ColorHandlerElement()
+        wheelHandler.template.setLocationChangeCallback(([x, y]) => {
+            const [r, theta] = Utility.getPolarCoordinates([x, y])
+            this.color = LinearColorEntity.fromWheelLocation(x, y)
+        })
+        this.element.querySelector(".ueb-color-picker-wheel").appendChild(new ColorHandlerElement())
+
     }
 
     renderContent() {
@@ -40,9 +51,7 @@ export default class ColorPickerWindowTemplate extends WindowTemplate {
                     <div class="ueb-color-picker-srgb"></div>
                 </div>
                 <div class="ueb-color-picker-main">
-                    <div class="ueb-color-picker-wheel">
-                        <ueb-color-handler></ueb-color-handler>
-                    </div>
+                    <div class="ueb-color-picker-wheel"></div>
                     <div class="ueb-color-picker-saturation"></div>
                     <div class="ueb-color-picker-value"></div>
                     <div class="ueb-color-picker-preview">

js/template/WindowTemplate.js

@@ -18,9 +18,10 @@ export default class WindowTemplate extends IDraggableTemplate {
     createDraggableObject() {
         return new MouseMoveDraggable(this.element, this.element.blueprint, {
             draggableElement: this.getDraggableElement(),
+            ignoreTranslateCompensate: true,
             looseTarget: true,
-            stepSize: 1,
             movementSpace: this.element.blueprint,
+            stepSize: 1,
         })
     }