solid-color
Version:
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>
29 lines (28 loc) • 912 B
JavaScript
export function calculateChange(e, hsl, container) {
const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();
const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
let left = x - (container.getBoundingClientRect().left + window.pageXOffset);
let top = y - (container.getBoundingClientRect().top + window.pageYOffset);
if (left < 0) {
left = 0;
}
else if (left > containerWidth) {
left = containerWidth;
}
if (top < 0) {
top = 0;
}
else if (top > containerHeight) {
top = containerHeight;
}
const saturation = left / containerWidth;
const bright = 1 - top / containerHeight;
return {
h: hsl.h,
s: saturation,
v: bright,
a: hsl.a,
source: 'hsv',
};
}