trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: keybinds to enable/toggle tools

Browse source
This commit is contained in:
trafficlunar 2024-12-14 23:41:48 +00:00
parent d9690eb619
commit 1dbb126b90
1 changed files with 42 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/Canvas.tsx
View file

@ -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 (