fix: add cursor showing when dragging

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} />