137 lines
4.6 KiB
JavaScript
137 lines
4.6 KiB
JavaScript
function registerPicker(wheel, sliders, mode) {
|
|
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 dot = e.target.parentElement.querySelector('#cc-dot-' + mode);
|
|
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;
|
|
|
|
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;
|
|
}
|
|
|
|
// -0.5r - 0.5g + b = x
|
|
// -0.866r + 0.866g = y
|
|
// 240r + 120g = z * rgb
|
|
|
|
// 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)
|
|
|
|
// 240r + 120(1 / 0.866)y + r = z * r((1 / 0.866)y + r)(x + 0.5r + 0.5((1 / 0.866)y + r))
|
|
|
|
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-' + mode);
|
|
dot.style.position = 'absolute';
|
|
updateInput(sliders[0]);
|
|
updateInput(sliders[1]);
|
|
updateInput(sliders[2]);
|
|
});
|
|
}
|
|
|
|
onUiLoaded(async () => {
|
|
|
|
['txt', 'img'].forEach((mode) => {
|
|
|
|
const container = document.getElementById('cc-colorwheel-' + mode);
|
|
container.style.height = '200px';
|
|
container.style.width = 'auto';
|
|
|
|
container.querySelector('.float')?.remove();
|
|
container.querySelector('.download')?.remove();
|
|
for (const downloadButton of container.querySelectorAll('[download]')) {
|
|
downloadButton.parentElement.remove();
|
|
}
|
|
|
|
const wheel = container.getElementsByTagName('img')[0];
|
|
wheel.style.height = '100%';
|
|
wheel.style.width = 'auto';
|
|
wheel.style.margin = 'auto';
|
|
wheel.id = 'cc-img-' + mode;
|
|
|
|
wheel.ondragstart = (e) => { e.preventDefault(); };
|
|
|
|
sliders = [
|
|
document.getElementById('cc-r-' + mode).querySelector('input'),
|
|
document.getElementById('cc-g-' + mode).querySelector('input'),
|
|
document.getElementById('cc-b-' + mode).querySelector('input')
|
|
];
|
|
|
|
registerPicker(wheel, sliders, mode);
|
|
|
|
const temp = document.getElementById('cc-temp-' + mode);
|
|
|
|
const dot = temp.getElementsByTagName('img')[0];
|
|
dot.id = 'cc-dot-' + mode;
|
|
|
|
container.appendChild(dot);
|
|
dot.style.left = 'calc(50% - 12px)';
|
|
dot.style.top = 'calc(50% - 12px)';
|
|
|
|
temp.remove();
|
|
|
|
const row1 = document.getElementById('cc-apply-' + mode).parentNode;
|
|
const row2 = document.getElementById('cc-save-' + mode).parentNode;
|
|
|
|
row1.style.alignItems = 'end';
|
|
row1.style.gap = '1em';
|
|
row2.style.alignItems = 'end';
|
|
row2.style.gap = '1em';
|
|
|
|
// ----- HDR UIs -----
|
|
const hdr_settings = document.getElementById('vec-hdr-' + mode);
|
|
const buttons = hdr_settings.getElementsByTagName('label');
|
|
|
|
for (let i = 0; i < buttons.length; i++)
|
|
buttons[i].style.borderRadius = '0.5em';
|
|
});
|
|
});
|