Color picker improvements

js/template/ColorHandlerTemplate.js

@@ -1,32 +1,10 @@
-import IDraggableTemplate from "./IDraggableTemplate"
-import MouseMoveDraggable from "../input/mouse/MouseMoveDraggable"
+import IDraggableControlTemplate from "./IDraggableControlTemplate"
 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() {
-        return new MouseMoveDraggable(this.element, this.element.blueprint, {
-            draggableElement: this.element.parentElement,
-            ignoreTranslateCompensate: true,
-            moveEverywhere: true,
-            movementSpace: this.element.parentElement,
-            repositionOnClick: true,
-            stepSize: 1,
-        })
-    }
+/** @extends {IDraggableControlTemplate<ColorHandlerElement>} */
+export default class ColorHandlerTemplate extends IDraggableControlTemplate {
 
     /**  @param {[Number, Number]} param0 */
     adjustLocation([x, y]) {
@@ -37,11 +15,12 @@ export default class ColorHandlerTemplate extends IDraggableTemplate {
         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])
+        const hsva = this.getColor().toHSVA()
+        this.locationChangeCallback?.([x, y], radius, hsva[2], hsva[3])
         return [x, y]
     }
 
-    setLocationChangeCallback(callback) {
-        this.#locationChangeCallback = callback
+    getColor() {
+        return this.element.windowElement.template.color
     }
 }