Completed color value editor component.

This commit is contained in:
Jay
2025-08-03 15:24:25 -04:00
parent 33f6a7e0c2
commit c27a5258d3
10 changed files with 613 additions and 36 deletions
+12 -13
View File
@@ -87,17 +87,14 @@ export function useSlider({
[calculatePosition],
);
const handleEnd = useCallback(
(event: MouseEvent | TouchEvent) => {
document.removeEventListener("mousemove", handleMove);
document.removeEventListener("mouseup", handleEnd);
document.removeEventListener("touchmove", handleMove);
document.removeEventListener("touchend", handleEnd);
document.removeEventListener("touchcancel", handleEnd);
setIsDragging(false);
},
[handleMove],
);
const handleEnd = useCallback(() => {
document.removeEventListener("mousemove", handleMove);
document.removeEventListener("mouseup", handleEnd);
document.removeEventListener("touchmove", handleMove);
document.removeEventListener("touchend", handleEnd);
document.removeEventListener("touchcancel", handleEnd);
setIsDragging(false);
}, [handleMove]);
const handleStart = useCallback(
(event: MouseEvent | TouchEvent) => {
@@ -121,18 +118,20 @@ export function useSlider({
const handleScrollUp = useCallback(() => {
const dir = directionRef.current;
const dims = dimensionsRef.current;
const inc = chooseValueByDirection(dir, 1, -1);
setPosition((prev: number) =>
minmax(prev - 1, 0, chooseValueByDirection(dir, dims.x, dims.y)),
minmax(prev + inc, 0, chooseValueByDirection(dir, dims.x, dims.y)),
);
}, [setPosition]);
const handleScrollDown = useCallback(() => {
const dir = directionRef.current;
const dims = dimensionsRef.current;
const inc = chooseValueByDirection(dir, -1, 1);
setPosition((prev: number) =>
minmax(prev + 1, 0, chooseValueByDirection(dir, dims.x, dims.y)),
minmax(prev + inc, 0, chooseValueByDirection(dir, dims.x, dims.y)),
);
}, [setPosition]);