Merge pull request #13

Improve color wheel functionality

from. catboxanon/wheel-v2

CHANGELOG.md

@@ -1,3 +1,6 @@
+### v1.4.3 - 2023 Sep.13
+- Improve **Color Wheel** Functionality by. **catboxanon**
+
 ### v1.4.2 - 2023 Sep.11
 - Fix the Reset and Randomize buttons for the new Contrast algorithm
 

javascript/vec_cc.js

@@ -1,8 +1,23 @@
 function registerPicker(wheel, sliders) {
-    wheel.onclick = function (e) {
+    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;
+
+            if (e.type != 'click') {
+                if (e.buttons != 1) {
+                    return;
+                }
+
+                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';
+            }
+
+            x = ((e.clientX - rect.left) - 100.0) / 25;
+            y = ((e.clientY - rect.top) - 100.0) / 25;
 
             const zeta = Math.atan(y / x)
             var degree = 0
@@ -39,12 +54,27 @@ function registerPicker(wheel, sliders) {
             b = b / mag * len
 
             sliders[0].value = r.toFixed(2)
-        updateInput(sliders[0])
+            sliders[0].closest('.gradio-slider').querySelector('input[type=range]').value = r.toFixed(2)
             sliders[1].value = g.toFixed(2)
-        updateInput(sliders[1])
+            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 () => {
@@ -69,7 +99,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'),

scripts/cc_version.py

@@ -1,7 +1,7 @@
 import modules.scripts as scripts
 import json
 
-VERSION = 'v1.4.2'
+VERSION = 'v1.4.3'
 
 def clean_outdated(EXT_NAME:str):
     with open(scripts.basedir() + '/' + 'ui-config.json', 'r') as json_file: