From bcc47f4eed772388e8049fee0c408976312579ac Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Tue, 11 Feb 2025 16:38:01 +0000
Subject: [PATCH] fix: make mouse events pointer events

---
 .../dialogs/open-image/BlockSelector.tsx           |  2 +-
 src/components/home/ImageComparison.tsx            |  2 +-
 src/components/sidebar/index.tsx                   | 14 +++++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/dialogs/open-image/BlockSelector.tsx b/src/components/dialogs/open-image/BlockSelector.tsx
index f715267..5bc0c6e 100644
--- a/src/components/dialogs/open-image/BlockSelector.tsx
+++ b/src/components/dialogs/open-image/BlockSelector.tsx
@@ -44,7 +44,7 @@ function BlockSelector({ stageWidth, searchInput, selectedBlocks, setSelectedBlo
 			width={stageWidth}
 			height={Math.ceil(Object.keys(blockData).length / blocksPerColumn) * (32 + 2)}
 			options={{ backgroundAlpha: 0 }}
-			onMouseLeave={() => setHoverPosition(null)}
+			onPointerLeave={() => setHoverPosition(null)}
 		>
 			<Container>
 				{filteredBlocks.map((block, index) => {
diff --git a/src/components/home/ImageComparison.tsx b/src/components/home/ImageComparison.tsx
index 0b460d2..f353b61 100644
--- a/src/components/home/ImageComparison.tsx
+++ b/src/components/home/ImageComparison.tsx
@@ -14,7 +14,7 @@ function ImageComparison() {
 
 	return (
 		<div
-			onMouseMove={onMouseMove}
+			onPointerMove={onMouseMove}
 			className="relative select-none w-[40vw] h-[calc(40vw*217/270)] flex justify-center rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-md"
 		>
 			<img
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index 9605bd6..578e14e 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -46,16 +46,16 @@ function Sidebar() {
 
 	useEffect(() => {
 		if (resizing) {
-			document.addEventListener("mousemove", onMouseMove);
-			document.addEventListener("mouseup", onMouseUp);
+			document.addEventListener("pointermove", onMouseMove);
+			document.addEventListener("pointerup", onMouseUp);
 		} else {
-			document.removeEventListener("mousemove", onMouseMove);
-			document.removeEventListener("mouseup", onMouseUp);
+			document.removeEventListener("pointermove", onMouseMove);
+			document.removeEventListener("pointerup", onMouseUp);
 		}
 
 		return () => {
-			document.removeEventListener("mousemove", onMouseMove);
-			document.removeEventListener("mouseup", onMouseUp);
+			document.removeEventListener("pointermove", onMouseMove);
+			document.removeEventListener("pointerup", onMouseUp);
 		};
 	}, [resizing]);
 
@@ -87,8 +87,8 @@ function Sidebar() {
 					className="w-72 border-l border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-2 pb-0 flex flex-col h-full gap-2 relative"
 				>
 					<div
-						onMouseDown={onMouseDown}
 						className="absolute top-0 -left-2 h-full w-4 bg-zinc-300 dark:bg-zinc-800 flex justify-center items-center cursor-e-resize opacity-0 transition-opacity duration-300 delay-100 hover:opacity-100"
+						onPointerDown={onMouseDown}
 					>
 						<GripVerticalIcon />
 					</div>