Improve color wheel responsiveness

pull/13/head
catboxanon 2023-09-12 12:48:51 -04:00
parent a7eaa3a54a
commit 6d739194cb
1 changed files with 65 additions and 40 deletions

View File

@ -1,13 +1,23 @@
function registerPicker(wheel, sliders) {
wheel.onmousemove = function (e) {
for (const event of ['mousemove', 'click']) {
wheel.addEventListener(event, (e) => {
e.preventDefault();
const rect = e.target.getBoundingClientRect();
if (e.type != 'click') {
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;
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
@ -44,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 () => {