From 6b5797b5032a35480c54522905922c8a90bc873c Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Sun, 1 Dec 2024 02:21:11 +1100
Subject: [PATCH] Spawn colour picker at cursor

---
 web/widget/widget_vector.js | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/web/widget/widget_vector.js b/web/widget/widget_vector.js
index 8e96902..42247b6 100644
--- a/web/widget/widget_vector.js
+++ b/web/widget/widget_vector.js
@@ -181,20 +181,35 @@ const VectorWidget = (app, inputName, options, initial, desc='') => {
                     type: "color",
                     parent: document.body,
                     style: {
-                        display: "none",
+                        position: "fixed",
+                        left: `${eUp.clientX}px`,
+                        top: `${eUp.clientY}px`,
+                        height: "0px",
+                        width: "0px",
+                        padding: "0px",
+                        opacity: 0,
                     },
                 });
-                picker.onchange = () => {
-                    if (picker.value) {
-                        this.value = colorHex2RGB(picker.value);
-                        if (rgba.length > 3) {
-                            this.value.push(rgba[3])
-                        }
+                picker.addEventListener('blur', () => picker.style.display = 'none')
+                picker.addEventListener('input', () => {
+                    if (!picker.value) return;
+
+                    widget.value = colorHex2RGB(picker.value);
+                    if (rgba.length > 3) {
+                        widget.value.push(rgba[3]);
                     }
-                };
+                    canvas.setDirty(true)
+                })
+            } else {
+                picker.style.display = 'revert'
+                picker.style.left = `${eUp.clientX}px`
+                picker.style.top = `${eUp.clientY}px`
             }
             picker.value = color;
-            picker.click();
+            requestAnimationFrame(() => {
+                picker.showPicker()
+                picker.focus()
+            })
         }
 
         pointer.onDrag = (eMove) => {