From f50f109d27af46a1e833a0a415c265b9788c6676 Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Thu, 5 Dec 2024 21:18:13 +0000
Subject: [PATCH] fix: add cursor showing when dragging

---
 src/App.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index 96f18a1..e7b5346 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,6 +36,8 @@ function App() {
 	const [tool, setTool] = useState<Tool>("hand");
 	const [blocks, setBlocks] = useState<Block[]>([]);
 
+	const [cssCursor, setCssCursor] = useState("grab");
+
 	const onMouseMove = (e) => {
 		const stage = e.target.getStage();
 		const oldScale = stage.scaleX();
@@ -47,6 +49,18 @@ function App() {
 		});
 	};
 
+	const onMouseDown = (e) => {
+		if (tool == "hand") {
+			setCssCursor("grabbing");
+		}
+	};
+
+	const onMouseUp = (e) => {
+		if (tool == "hand") {
+			setCssCursor("grab");
+		}
+	};
+
 	const onWheel = (e) => {
 		const stage = e.target.getStage();
 		const oldScale = stage.scaleX();
@@ -121,7 +135,10 @@ function App() {
 					scaleX={stageScale}
 					scaleY={stageScale}
 					onMouseMove={onMouseMove}
+					onMouseDown={onMouseDown}
+					onMouseUp={onMouseUp}
 					onWheel={onWheel}
+					style={{ cursor: cssCursor }}
 				>
 					<Layer imageSmoothingEnabled={false}>
 						<Blocks blocks={blocks} setBlocks={setBlocks} />