File size: 4,481 Bytes
3dabe4a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
class VectorscopeCC {
static dot = { 'txt': null, 'img': null };
static updateCursor(r, g, b, mode) {
const mag = Math.abs(r) + Math.abs(g) + Math.abs(b);
var condX, condY;
if (mag < Number.EPSILON) {
condX = 0.0;
condY = 0.0;
} else {
condX = 25 * Math.sqrt(r * r + g * g + b * b) * (r * -0.5 + g * -0.5 + b * 1.0) / mag;
condY = 25 * Math.sqrt(r * r + g * g + b * b) * (r * -0.866 + g * 0.866 + b * 0.0) / mag;
}
this.dot[mode].style.left = `calc(50% + ${condX - 12}px)`;
this.dot[mode].style.top = `calc(50% + ${condY - 12}px)`;
}
static registerPicker(wheel, sliders, dot) {
['mousemove', 'click'].forEach((event) => {
wheel.addEventListener(event, (e) => {
e.preventDefault();
if (e.type === 'mousemove' && e.buttons != 1)
return;
const rect = e.target.getBoundingClientRect();
const p_rect = e.target.parentNode.getBoundingClientRect();
const shift = (p_rect.width - rect.width) / 2.0;
dot.style.left = `calc(${e.clientX - rect.left}px - 12px + ${shift}px)`;
dot.style.top = `calc(${e.clientY - rect.top}px - 12px)`;
const x = ((e.clientX - rect.left) - 100.0) / 25;
const 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;
}
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).toFixed(2);
g = (g / mag * len).toFixed(2);
b = (b / mag * len).toFixed(2);
sliders[0][0].value = r;
sliders[0][1].value = r;
sliders[1][0].value = g;
sliders[1][1].value = g;
sliders[2][0].value = b;
sliders[2][1].value = b;
});
});
['mouseleave', 'mouseup'].forEach((event) => {
wheel.addEventListener(event, () => {
updateInput(sliders[0][0]);
updateInput(sliders[1][0]);
updateInput(sliders[2][0]);
});
});
}
}
onUiLoaded(() => {
['txt', 'img'].forEach((mode) => {
const container = document.getElementById(`cc-colorwheel-${mode}`);
container.style.height = '200px';
container.style.width = '200px';
const wheel = container.querySelector('img');
container.insertBefore(wheel, container.firstChild);
while (container.firstChild !== container.lastChild)
container.lastChild.remove();
wheel.ondragstart = (e) => { e.preventDefault(); return false; };
wheel.id = `cc-img-${mode}`;
const sliders = [
[
document.getElementById(`cc-r-${mode}`).querySelector('input[type=number]'),
document.getElementById(`cc-r-${mode}`).querySelector('input[type=range]')
],
[
document.getElementById(`cc-g-${mode}`).querySelector('input[type=number]'),
document.getElementById(`cc-g-${mode}`).querySelector('input[type=range]')
],
[
document.getElementById(`cc-b-${mode}`).querySelector('input[type=number]'),
document.getElementById(`cc-b-${mode}`).querySelector('input[type=range]')
]
];
const temp = document.getElementById(`cc-temp-${mode}`);
const dot = temp.querySelector('img');
dot.id = `cc-dot-${mode}`;
dot.style.left = 'calc(50% - 12px)';
dot.style.top = 'calc(50% - 12px)';
container.appendChild(dot);
temp.remove();
VectorscopeCC.dot[mode] = dot;
VectorscopeCC.registerPicker(wheel, sliders, dot);
});
});
|