Completed crosshair, slider, and scroll hooks.
This commit is contained in:
+171
-92
@@ -2,13 +2,30 @@ import { useState, useRef, useEffect } from "react";
|
||||
import type { Dispatch, SetStateAction, RefObject } from "react";
|
||||
import { minmax } from "../util";
|
||||
import type { CartesianSpace } from "../types";
|
||||
import { handleScroll } from "./scroll";
|
||||
import { useScroll } from "./scroll";
|
||||
|
||||
if (typeof TouchEvent === "undefined") {
|
||||
// @ts-ignore - intentionally creating global
|
||||
window.TouchEvent = window.MouseEvent;
|
||||
}
|
||||
|
||||
function isTouchEvent(event: Event): event is TouchEvent {
|
||||
return "touches" in event;
|
||||
}
|
||||
|
||||
export enum Direction {
|
||||
HORIZONTAL = "horizontal",
|
||||
VERTICAL = "vertical",
|
||||
}
|
||||
|
||||
function chooseValueByDirection(
|
||||
direction: Direction,
|
||||
xValue: number,
|
||||
yValue: number,
|
||||
) {
|
||||
return direction === Direction.HORIZONTAL ? xValue : yValue;
|
||||
}
|
||||
|
||||
export function useSlider({
|
||||
direction,
|
||||
origin,
|
||||
@@ -22,107 +39,169 @@ export function useSlider({
|
||||
}): { sliderRef: RefObject<HTMLDivElement | null>; isDragging: boolean } {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
const [_, setScrollLength] = useState(0);
|
||||
|
||||
function calculatePosition(event: MouseEvent | TouchEvent) {
|
||||
const clientCoord =
|
||||
event instanceof TouchEvent
|
||||
? direction === Direction.HORIZONTAL
|
||||
? event.touches[0].clientX
|
||||
: event.touches[0].clientY
|
||||
: direction === Direction.HORIZONTAL
|
||||
? event.clientX
|
||||
: event.clientY;
|
||||
const positionValue = minmax(
|
||||
clientCoord - (direction === Direction.HORIZONTAL ? origin.x : origin.y),
|
||||
0,
|
||||
direction === Direction.HORIZONTAL ? dimensions.x : dimensions.y,
|
||||
);
|
||||
setPosition(positionValue);
|
||||
}
|
||||
// Construct event handler refs
|
||||
// Prevents unnecessary function recreation
|
||||
const calculatePositionRef = useRef((_: MouseEvent | TouchEvent) => {});
|
||||
const startSliderInteractionRef = useRef((_: MouseEvent | TouchEvent) => {});
|
||||
const processSliderInteractionRef = useRef(
|
||||
(_: MouseEvent | TouchEvent) => {},
|
||||
);
|
||||
const endSliderInteractionRef = useRef((_: MouseEvent | TouchEvent) => {});
|
||||
|
||||
function startSliderInteraction(event: MouseEvent | TouchEvent) {
|
||||
event.preventDefault();
|
||||
calculatePosition(event);
|
||||
setIsDragging(true);
|
||||
if (event instanceof MouseEvent) {
|
||||
document.addEventListener("mousemove", processSliderInteraction);
|
||||
document.addEventListener("mouseup", endSliderInteraction);
|
||||
} else {
|
||||
document.addEventListener("touchmove", processSliderInteraction);
|
||||
document.addEventListener("touchend", endSliderInteraction);
|
||||
document.addEventListener("touchcancel", endSliderInteraction);
|
||||
}
|
||||
}
|
||||
|
||||
function processSliderInteraction(event: MouseEvent | TouchEvent) {
|
||||
event.preventDefault();
|
||||
calculatePosition(event);
|
||||
}
|
||||
|
||||
function endSliderInteraction(event: MouseEvent | TouchEvent) {
|
||||
event.preventDefault();
|
||||
setIsDragging(false);
|
||||
if (event instanceof MouseEvent) {
|
||||
document.removeEventListener("mousemove", processSliderInteraction);
|
||||
document.removeEventListener("mouseup", endSliderInteraction);
|
||||
} else {
|
||||
document.removeEventListener("touchmove", processSliderInteraction);
|
||||
document.removeEventListener("touchend", endSliderInteraction);
|
||||
document.removeEventListener("touchcancel", endSliderInteraction);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustPositionWithScroll(event: WheelEvent) {
|
||||
event.preventDefault();
|
||||
setScrollLength((prev) =>
|
||||
handleScroll(
|
||||
prev,
|
||||
direction === Direction.HORIZONTAL ? event.deltaY : -event.deltaY,
|
||||
() =>
|
||||
setPosition((prev: number) =>
|
||||
minmax(
|
||||
prev - 1,
|
||||
0,
|
||||
direction === Direction.HORIZONTAL ? dimensions.x : dimensions.y,
|
||||
),
|
||||
),
|
||||
() =>
|
||||
setPosition((prev: number) =>
|
||||
minmax(
|
||||
prev + 1,
|
||||
0,
|
||||
direction === Direction.HORIZONTAL ? dimensions.x : dimensions.y,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
// Store dependencies as refs
|
||||
// Always use latest values
|
||||
const directionRef = useRef(direction);
|
||||
const originRef = useRef(origin);
|
||||
const dimensionsRef = useRef(dimensions);
|
||||
|
||||
useEffect(() => {
|
||||
if (sliderRef.current) {
|
||||
sliderRef.current.addEventListener("wheel", adjustPositionWithScroll);
|
||||
sliderRef.current.addEventListener("mousedown", startSliderInteraction);
|
||||
sliderRef.current.addEventListener("touchstart", startSliderInteraction);
|
||||
}
|
||||
directionRef.current = direction;
|
||||
originRef.current = origin;
|
||||
dimensionsRef.current = dimensions;
|
||||
}, [direction, origin, dimensions]);
|
||||
|
||||
return () => {
|
||||
if (sliderRef.current) {
|
||||
sliderRef.current.removeEventListener(
|
||||
"wheel",
|
||||
adjustPositionWithScroll,
|
||||
// Setup scroll handlers
|
||||
const handleScrollUp = () => {
|
||||
const dir = directionRef.current;
|
||||
const dims = dimensionsRef.current;
|
||||
|
||||
setPosition((prev: number) =>
|
||||
minmax(prev - 1, 0, chooseValueByDirection(dir, dims.x, dims.y)),
|
||||
);
|
||||
};
|
||||
|
||||
const handleScrollDown = () => {
|
||||
const dir = directionRef.current;
|
||||
const dims = dimensionsRef.current;
|
||||
|
||||
setPosition((prev: number) =>
|
||||
minmax(prev + 1, 0, chooseValueByDirection(dir, dims.x, dims.y)),
|
||||
);
|
||||
};
|
||||
|
||||
// Initialize scroll handling
|
||||
const { addScrollListener, removeScrollListener } = useScroll({
|
||||
targetRef: sliderRef,
|
||||
onScrollUp: handleScrollUp,
|
||||
onScrollDown: handleScrollDown,
|
||||
});
|
||||
|
||||
// Update handler functions when dependencies change via reference
|
||||
useEffect(() => {
|
||||
calculatePositionRef.current = (event: MouseEvent | TouchEvent) => {
|
||||
const dir = directionRef.current;
|
||||
const orig = originRef.current;
|
||||
const dims = dimensionsRef.current;
|
||||
|
||||
const clientCoord = isTouchEvent(event)
|
||||
? chooseValueByDirection(
|
||||
dir,
|
||||
event.touches[0].clientX,
|
||||
event.touches[0].clientY,
|
||||
)
|
||||
: chooseValueByDirection(dir, event.clientX, event.clientY);
|
||||
const positionValue = minmax(
|
||||
clientCoord - chooseValueByDirection(dir, orig.x, orig.y),
|
||||
0,
|
||||
chooseValueByDirection(dir, dims.x, dims.y),
|
||||
);
|
||||
setPosition(positionValue);
|
||||
};
|
||||
|
||||
startSliderInteractionRef.current = (event: MouseEvent | TouchEvent) => {
|
||||
event.preventDefault();
|
||||
calculatePositionRef.current(event);
|
||||
setIsDragging(true);
|
||||
|
||||
if (!isTouchEvent(event)) {
|
||||
document.addEventListener(
|
||||
"mousemove",
|
||||
processSliderInteractionRef.current,
|
||||
);
|
||||
sliderRef.current.removeEventListener(
|
||||
"mousedown",
|
||||
startSliderInteraction,
|
||||
document.addEventListener("mouseup", endSliderInteractionRef.current, {
|
||||
passive: true,
|
||||
});
|
||||
} else {
|
||||
document.addEventListener(
|
||||
"touchmove",
|
||||
processSliderInteractionRef.current,
|
||||
);
|
||||
sliderRef.current.removeEventListener(
|
||||
"touchstart",
|
||||
startSliderInteraction,
|
||||
document.addEventListener("touchend", endSliderInteractionRef.current, {
|
||||
passive: true,
|
||||
});
|
||||
document.addEventListener(
|
||||
"touchcancel",
|
||||
endSliderInteractionRef.current,
|
||||
{
|
||||
passive: true,
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
processSliderInteractionRef.current = (event: MouseEvent | TouchEvent) => {
|
||||
event.preventDefault();
|
||||
calculatePositionRef.current(event);
|
||||
};
|
||||
|
||||
endSliderInteractionRef.current = (event: MouseEvent | TouchEvent) => {
|
||||
setIsDragging(false);
|
||||
if (!isTouchEvent(event)) {
|
||||
document.removeEventListener(
|
||||
"mousemove",
|
||||
processSliderInteractionRef.current,
|
||||
);
|
||||
document.removeEventListener(
|
||||
"mouseup",
|
||||
endSliderInteractionRef.current,
|
||||
);
|
||||
} else {
|
||||
document.removeEventListener(
|
||||
"touchmove",
|
||||
processSliderInteractionRef.current,
|
||||
);
|
||||
document.removeEventListener(
|
||||
"touchend",
|
||||
endSliderInteractionRef.current,
|
||||
);
|
||||
document.removeEventListener(
|
||||
"touchcancel",
|
||||
endSliderInteractionRef.current,
|
||||
);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Set up entry listeners
|
||||
useEffect(() => {
|
||||
const currentRef = sliderRef.current;
|
||||
if (currentRef) {
|
||||
addScrollListener();
|
||||
currentRef.addEventListener(
|
||||
"mousedown",
|
||||
startSliderInteractionRef.current,
|
||||
);
|
||||
currentRef.addEventListener(
|
||||
"touchstart",
|
||||
startSliderInteractionRef.current,
|
||||
);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (currentRef) {
|
||||
removeScrollListener();
|
||||
currentRef.removeEventListener(
|
||||
"mousedown",
|
||||
startSliderInteractionRef.current,
|
||||
);
|
||||
currentRef.removeEventListener(
|
||||
"touchstart",
|
||||
startSliderInteractionRef.current,
|
||||
);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { sliderRef, isDragging };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user