From 1dbb126b90c98d9261d6b36774a9ad60f658cd91 Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Sat, 14 Dec 2024 23:41:48 +0000
Subject: [PATCH] feat: keybinds to enable/toggle tools

---
 src/components/Canvas.tsx | 45 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index dc94459..ab2c1c0 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -37,6 +37,8 @@ function Canvas() {
 
 	const [blocks, setBlocks] = useState<Block[]>([]);
 
+	const [oldTool, setOldTool] = useState<Tool>("hand");
+
 	const updatedBlocks = useMemo(() => {
 		return blocks.filter((b) => !(b.x === mouseCoords.x && b.y === mouseCoords.y));
 	}, [blocks, mouseCoords]);
@@ -138,6 +140,35 @@ function Canvas() {
 		[scale, coords, mousePosition]
 	);
 
+	const onKeyDown = (e: KeyboardEvent) => {
+		switch (e.key) {
+			case " ": // Space
+				setDragging(true);
+				setOldTool(tool);
+				setTool("hand");
+				setCssCursor("grabbing");
+				break;
+			case "1":
+				setTool("hand");
+				break;
+			case "2":
+				setTool("pencil");
+				break;
+			case "3":
+				setTool("eraser");
+				break;
+		}
+	};
+
+	const onKeyUp = (e: KeyboardEvent) => {
+		if (e.key == " ") {
+			// Space
+			setDragging(false);
+			setCssCursor("grab");
+			setTool(oldTool);
+		}
+	};
+
 	useEffect(() => {
 		const resizeCanvas = () => {
 			if (stageContainerRef.current) {
@@ -149,10 +180,18 @@ function Canvas() {
 		};
 
 		resizeCanvas();
-		window.addEventListener("resize", resizeCanvas);
-
 		setBlocks(welcomeBlocksData);
-		return () => window.removeEventListener("resize", resizeCanvas);
+
+		window.addEventListener("resize", resizeCanvas);
+		window.addEventListener("keydown", onKeyDown);
+		window.addEventListener("keyup", onKeyUp);
+
+		return () => {
+			window.removeEventListener("resize", resizeCanvas);
+			window.removeEventListener("keydown", onKeyDown);
+			window.removeEventListener("keyup", onKeyUp);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	return (