open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

constrain manually typed values in colorpicker

Browse Source
This commit is contained in:
tophf 2017-11-27 10:49:42 +03:00
parent 2e03c9c9c0
commit 06a2a4c04d
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
vendor-overwrites/colorpicker/colorpicker.js
View File

@ -298,7 +298,8 @@
function setFromHueElement(event) { function setFromHueElement(event) {
const {left, width} = getScreenBounds($hue); const {left, width} = getScreenBounds($hue);
const currentX = event ? getTouchPosition(event).clientX : left + width * (HSV.h / 360); const currentX = event ? getTouchPosition(event).clientX :
left + width * constrainHue(HSV.h) / 360;
const normalizedH = constrain(0, 1, (currentX - left) / width); const normalizedH = constrain(0, 1, (currentX - left) / width);
const x = dragging.hueKnobPos = width * normalizedH; const x = dragging.hueKnobPos = width * normalizedH;
$hueKnob.style.left = (x - Math.round($hueKnob.offsetWidth / 2)) + 'px'; $hueKnob.style.left = (x - Math.round($hueKnob.offsetWidth / 2)) + 'px';
@ -472,7 +473,7 @@
$satPointer.style.top = (y - 5) + 'px'; $satPointer.style.top = (y - 5) + 'px';
dragging.saturationPointerPos = {x, y}; dragging.saturationPointerPos = {x, y};
const hueX = $hue.offsetWidth * (HSV.h / 360); const hueX = $hue.offsetWidth * constrain(0, 1, HSV.h / 360);
$hueKnob.style.left = (hueX - 7.5) + 'px'; $hueKnob.style.left = (hueX - 7.5) + 'px';
dragging.hueKnobPos = hueX; dragging.hueKnobPos = hueX;
@ -741,6 +742,12 @@
} }
} }
function constrainHue(h) {
return h < 0 ? h % 360 + 360 :
h > 360 ? h % 360 :
h;
}
function RGBtoHSV({r, g, b, a}) { function RGBtoHSV({r, g, b, a}) {
r /= 255; r /= 255;
g /= 255; g /= 255;
@ -755,10 +762,7 @@
MaxC === g ? 60 * (((b - r) / DeltaC) + 2) : MaxC === g ? 60 * (((b - r) / DeltaC) + 2) :
MaxC === b ? 60 * (((r - g) / DeltaC) + 4) : MaxC === b ? 60 * (((r - g) / DeltaC) + 4) :
0; 0;
h = h = constrainHue(h);
h < 0 ? h % 360 + 360 :
h > 360 ? h % 360 :
h;
return { return {
h, h,
s: MaxC === 0 ? 0 : DeltaC / MaxC, s: MaxC === 0 ? 0 : DeltaC / MaxC,
@ -768,9 +772,7 @@
} }
function HSVtoRGB({h, s, v}) { function HSVtoRGB({h, s, v}) {
if (h === 360) { h = constrainHue(h) % 360;
h = 0;
}
const C = s * v; const C = s * v;
const X = C * (1 - Math.abs((h / 60) % 2 - 1)); const X = C * (1 - Math.abs((h / 60) % 2 - 1));
const m = v - C; const m = v - C;
@ -791,7 +793,7 @@
function HSLtoHSV({h, s, l, a}) { function HSLtoHSV({h, s, l, a}) {
const t = s * (l < 50 ? l : 100 - l) / 100; const t = s * (l < 50 ? l : 100 - l) / 100;
return { return {
h, h: constrainHue(h),
s: t + l ? 200 * t / (t + l) / 100 : 0, s: t + l ? 200 * t / (t + l) / 100 : 0,
v: (t + l) / 100, v: (t + l) / 100,
a, a,
@ -802,7 +804,7 @@
const l = (2 - s) * v / 2; const l = (2 - s) * v / 2;
const t = l < .5 ? l * 2 : 2 - l * 2; const t = l < .5 ? l * 2 : 2 - l * 2;
return { return {
h: Math.round(h), h: Math.round(constrainHue(h)),
s: Math.round(t ? s * v / t * 100 : 0), s: Math.round(t ? s * v / t * 100 : 0),
l: Math.round(l * 100), l: Math.round(l * 100),
}; };
@ -954,7 +956,9 @@
function parseAs(el, parser) { function parseAs(el, parser) {
const num = parser(el.value); const num = parser(el.value);
if (!isNaN(num)) { if (!isNaN(num) &&
(!el.min || num >= parseFloat(el.min)) &&
(!el.max || num <= parseFloat(el.max))) {
el.value = num; el.value = num;
return true; return true;
} }