replace mouse & touch events with pointer events

Kaciras · Jun 15, 2024 · 94cc90b · 94cc90b
1 parent 2fa6dd6
commit 94cc90b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 46 deletions.
diff --git a/web/app/ImageView.tsx b/web/app/ImageView.tsx
@@ -68,7 +68,7 @@ export default function ImageView(props: ImageViewProps) {
 	useEffect(refreshBottomCanvas, [original]);
 	useEffect(refreshTopCanvas, [topImage]);
 
-	function handleMouseMove(event: MouseEvent) {
+	function handlePointerMove(event: MouseEvent) {
 		const { clientX, clientY } = event;
 		setMousePos({ clientX, clientY });
 	}
@@ -133,9 +133,9 @@ export default function ImageView(props: ImageViewProps) {
 				<div
 					className={styles.wrapper}
 					style={wrapperCSS}
-					onMouseOver={() => setInRegion(true)}
-					onMouseMove={handleMouseMove}
-					onMouseOut={() => setInRegion(false)}
+					onPointerOver={() => setInRegion(true)}
+					onPointerMove={handlePointerMove}
+					onPointerOut={() => setInRegion(false)}
 				>
 					<canvas
 						className={styles.canvas}

diff --git a/web/ui/NumberInput.tsx b/web/ui/NumberInput.tsx
@@ -89,7 +89,7 @@ function NumberInput(props: NumberInputProps) {
 		input.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
 	}
 
-	function handleMouseDown(event: MouseEvent, diff: number) {
+	function handlePointerDown(event: MouseEvent, diff: number) {
 		if (event.button !== 0) {
 			return;
 		}
@@ -109,15 +109,15 @@ function NumberInput(props: NumberInputProps) {
 			timer = window.setTimeout(() => increment(newValue), UPDATE_SPEED);
 		}
 
-		function onMouseUp() {
+		function onPointerUp() {
 			clearTimeout(timer);
-			document.removeEventListener("mouseup", onMouseUp);
+			document.removeEventListener("mouseup", onPointerUp);
 		}
 
 		const newValue = next(inputRef.current!.valueAsNumber);
 		updateValue(newValue);
 		timer = window.setTimeout(() => increment(newValue), UPDATE_DELAY);
-		document.addEventListener("mouseup", onMouseUp);
+		document.addEventListener("mouseup", onPointerUp);
 	}
 
 	function handleChange(event: ChangeEvent<HTMLInputElement>) {
@@ -146,7 +146,7 @@ function NumberInput(props: NumberInputProps) {
 				className={styles.button}
 				tabIndex={-1}
 				disabled={disabled}
-				onMouseDown={e => handleMouseDown(e, -increment)}
+				onPointerDown={e => handlePointerDown(e, -increment)}
 			>
 				<TbMinus shapeRendering="crispEdges"/>
 			</button>
@@ -169,7 +169,7 @@ function NumberInput(props: NumberInputProps) {
 				className={styles.button}
 				tabIndex={-1}
 				disabled={disabled}
-				onMouseDown={e => handleMouseDown(e, increment)}
+				onPointerDown={e => handlePointerDown(e, increment)}
 			>
 				<TbPlus shapeRendering="crispEdges"/>
 			</button>

diff --git a/web/ui/PinchZoom.tsx b/web/ui/PinchZoom.tsx
@@ -1,44 +1,23 @@
 import React, { Dispatch, ReactNode } from "react";
 
-type PointerMoveHandler = (dx: number, dy: number) => void;
+type MoveHandler = (dx: number, dy: number) => void;
 
-function watchMouseMove(baseEvent: MouseEvent, onMove: PointerMoveHandler) {
+function watchMove(baseEvent: PointerEvent, onMove: MoveHandler) {
 	const basePageX = baseEvent.pageX;
 	const basePageY = baseEvent.pageY;
 
-	function handleMove(event: MouseEvent) {
+	function handleMove(event: PointerEvent) {
 		onMove(event.pageX - basePageX, event.pageY - basePageY);
 	}
 
 	function handleEnd(event: Event) {
 		event.preventDefault();
-		document.removeEventListener("mousemove", handleMove);
-		document.removeEventListener("mouseup", handleEnd);
+		document.removeEventListener("pointerup", handleEnd);
+		document.removeEventListener("pointermove", handleMove);
 	}
 
-	document.addEventListener("mousemove", handleMove);
-	document.addEventListener("mouseup", handleEnd);
-}
-
-function watchTouchMove(baseEvent: TouchEvent, onMove: PointerMoveHandler) {
-	const basePointer = baseEvent.touches[0];
-
-	function handleMove(event: TouchEvent) {
-		const touch = event.touches[0];
-		onMove(
-			touch.pageX - basePointer.pageX,
-			touch.pageY - basePointer.pageY,
-		);
-	}
-
-	function handleEnd(event: Event) {
-		event.preventDefault();
-		document.removeEventListener("touchmove", handleMove);
-		document.removeEventListener("touchend", handleEnd);
-	}
-
-	document.addEventListener("touchmove", handleMove);
-	document.addEventListener("touchend", handleEnd);
+	document.addEventListener("pointerup", handleEnd);
+	document.addEventListener("pointermove", handleMove);
 }
 
 export interface PinchZoomState {
@@ -89,24 +68,19 @@ export default function PinchZoom(props: PinchZoomProps) {
 		onChange({ scale: state.scale, x, y });
 	}
 
-	function handleMouseDown(e: React.MouseEvent) {
+	function handlePointerDown(e: React.PointerEvent) {
 		if (e.button !== 0) {
 			return;
 		}
-		watchMouseMove(e.nativeEvent, updateOffset);
-	}
-
-	function handleTouchStart(e: React.TouchEvent) {
-		watchTouchMove(e.nativeEvent, updateOffset);
+		watchMove(e.nativeEvent, updateOffset);
 	}
 
 	return (
 		<div
 			style={{ touchAction: "none" }}
 			className={className}
 			onWheel={handleWheel}
-			onTouchStart={handleTouchStart}
-			onMouseDown={handleMouseDown}
+			onPointerDown={handlePointerDown}
 		>
 			{children}
 		</div>