From a7eaa3a54ab305d6a5d397bbc19301226b50f225 Mon Sep 17 00:00:00 2001
From: catboxanon <122327233+catboxanon@users.noreply.github.com>
Date: Tue, 12 Sep 2023 12:05:41 -0400
Subject: [PATCH 1/2] Make color wheel picker draggable

---
 javascript/vec_cc.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/javascript/vec_cc.js b/javascript/vec_cc.js
index 5058679..387d68b 100644
--- a/javascript/vec_cc.js
+++ b/javascript/vec_cc.js
@@ -1,5 +1,10 @@
 function registerPicker(wheel, sliders) {
-    wheel.onclick = function (e) {
+    wheel.onmousemove = function (e) {
+        e.preventDefault();
+        if (e.buttons != 1) {
+            return;
+        }
+
         const rect = e.target.getBoundingClientRect();
         var x = ((e.clientX - rect.left) - 100.0) / 25;
         var y = ((e.clientY - rect.top) - 100.0) / 25;
@@ -69,7 +74,7 @@ onUiLoaded(async () => {
         wheel.style.margin = 'auto'
         wheel.id = 'cc-img-' + mode
 
-        wheel.ondragstart = () => { return false; }
+        wheel.ondragstart = (e) => { e.preventDefault(); }
 
         sliders = [
             document.getElementById('cc-r-' + mode).querySelector('input'),

From 6d739194cbd937c9f5657c52799ad83dedd56788 Mon Sep 17 00:00:00 2001
From: catboxanon <122327233+catboxanon@users.noreply.github.com>
Date: Tue, 12 Sep 2023 12:48:51 -0400
Subject: [PATCH 2/2] Improve color wheel responsiveness

---
 javascript/vec_cc.js | 105 ++++++++++++++++++++++++++-----------------
 1 file changed, 65 insertions(+), 40 deletions(-)

diff --git a/javascript/vec_cc.js b/javascript/vec_cc.js
index 387d68b..fef1630 100644
--- a/javascript/vec_cc.js
+++ b/javascript/vec_cc.js
@@ -1,55 +1,80 @@
 function registerPicker(wheel, sliders) {
-    wheel.onmousemove = function (e) {
-        e.preventDefault();
-        if (e.buttons != 1) {
-            return;
-        }
+    for (const event of ['mousemove', 'click']) {
+        wheel.addEventListener(event, (e) => {
+            e.preventDefault();
 
-        const rect = e.target.getBoundingClientRect();
-        var x = ((e.clientX - rect.left) - 100.0) / 25;
-        var y = ((e.clientY - rect.top) - 100.0) / 25;
+            const rect = e.target.getBoundingClientRect();
 
-        const zeta = Math.atan(y / x)
-        var degree = 0
+            if (e.type != 'click') {
+                if (e.buttons != 1) {
+                    return;
+                }
 
-        if (x >= 0) {
-            if (y >= 0)
-                degree = zeta * 180 / Math.PI
-            else
-                degree = 360 + zeta * 180 / Math.PI
-        }
-        else if (x < 0) {
-            degree = 180 + zeta * 180 / Math.PI
-        }
+                const dot = e.target.parentElement.querySelector('#cc-dot-txt');
+                dot.style.position = 'fixed';
+                dot.style.left = e.x - (dot.width / 2) + 'px';
+                dot.style.top = e.y - (dot.height / 2) + 'px';
+            }
 
-        // -0.5r - 0.5g + b = x
-        // -0.866r + 0.866g = y
-        // 240r + 120g = z * rgb
+            x = ((e.clientX - rect.left) - 100.0) / 25;
+            y = ((e.clientY - rect.top) - 100.0) / 25;
 
-        // g = (1 / 0.866)y + r
-        // -0.5r - 0.5((1 / 0.866)y + r) + b = x
-        // b = x + 0.5r + 0.5((1 / 0.866)y + r)
+            const zeta = Math.atan(y / x)
+            var degree = 0
 
-        // 240r + 120(1 / 0.866)y + r = z * r((1 / 0.866)y + r)(x + 0.5r + 0.5((1 / 0.866)y + r))
+            if (x >= 0) {
+                if (y >= 0)
+                    degree = zeta * 180 / Math.PI
+                else
+                    degree = 360 + zeta * 180 / Math.PI
+            }
+            else if (x < 0) {
+                degree = 180 + zeta * 180 / Math.PI
+            }
 
-        var r = -(0.00077 * (433 * x * degree + 750 * y * degree) / degree)
-        var g = y / 0.866 + r
-        var b = x + 0.5 * r + 0.5 * g
+            // -0.5r - 0.5g + b = x
+            // -0.866r + 0.866g = y
+            // 240r + 120g = z * rgb
 
-        const mag = Math.sqrt(r * r + g * g + b * b)
-        const len = Math.abs(r) + Math.abs(g) + Math.abs(b)
+            // g = (1 / 0.866)y + r
+            // -0.5r - 0.5((1 / 0.866)y + r) + b = x
+            // b = x + 0.5r + 0.5((1 / 0.866)y + r)
 
-        r = r / mag * len
-        g = g / mag * len
-        b = b / mag * len
+            // 240r + 120(1 / 0.866)y + r = z * r((1 / 0.866)y + r)(x + 0.5r + 0.5((1 / 0.866)y + r))
 
-        sliders[0].value = r.toFixed(2)
-        updateInput(sliders[0])
-        sliders[1].value = g.toFixed(2)
-        updateInput(sliders[1])
-        sliders[2].value = b.toFixed(2)
-        updateInput(sliders[2])
+            var r = -(0.00077 * (433 * x * degree + 750 * y * degree) / degree)
+            var g = y / 0.866 + r
+            var b = x + 0.5 * r + 0.5 * g
+
+            const mag = Math.sqrt(r * r + g * g + b * b)
+            const len = Math.abs(r) + Math.abs(g) + Math.abs(b)
+
+            r = r / mag * len
+            g = g / mag * len
+            b = b / mag * len
+
+            sliders[0].value = r.toFixed(2)
+            sliders[0].closest('.gradio-slider').querySelector('input[type=range]').value = r.toFixed(2)
+            sliders[1].value = g.toFixed(2)
+            sliders[1].closest('.gradio-slider').querySelector('input[type=range]').value = g.toFixed(2)
+            sliders[2].value = b.toFixed(2)
+            sliders[2].closest('.gradio-slider').querySelector('input[type=range]').value = b.toFixed(2)
+
+            if (e.type == 'click') {
+                updateInput(sliders[0])
+                updateInput(sliders[1])
+                updateInput(sliders[2])
+            }
+        })
     }
+
+    wheel.addEventListener('mouseup', (e) => {
+        const dot = e.target.parentElement.querySelector('#cc-dot-txt');
+        dot.style.position = 'absolute';
+        updateInput(sliders[0])
+        updateInput(sliders[1])
+        updateInput(sliders[2])
+    })
 }
 
 onUiLoaded(async () => {