Merge pull request #18 from shivam7147/main

Implement Keyboard Shortcuts for Tools

Author: Ayushivam22

client/src/components/Canvas.jsx

@@ -10,6 +10,7 @@ export const Canvas = () => {
     const [activeColor, setActiveColor] = useState("#000000");
     const [strokeWidth, setStrokeWidth] = useState(3);
     const [isDrawing, setIsDrawing] = useState(false);
+    const [isCanvasFocused, setIsCanvasFocused] = useState(false); // 👈 new state
 
     useEffect(() => {
         const canvas = canvasRef.current;
@@ -33,6 +34,22 @@ export const Canvas = () => {
         return () => window.removeEventListener("resize", handleResize);
     }, []);
 
+    // 🎹 Keyboard shortcut handling
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (!isCanvasFocused) return; // only when canvas focused
+
+            if (e.key === "p" || e.key === "P" || e.key === "1") {
+                handleToolChange("pen");
+            } else if (e.key === "e" || e.key === "E" || e.key === "2") {
+                handleToolChange("eraser");
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isCanvasFocused]);
+
     const startDrawing = (e) => {
         if (activeTool !== "pen" && activeTool !== "eraser") return;
 
@@ -92,11 +109,14 @@ export const Canvas = () => {
 
             <canvas
                 ref={canvasRef}
+                tabIndex={0} // 👈 allows focus
+                onFocus={() => setIsCanvasFocused(true)} // 👈 activate shortcuts
+                onBlur={() => setIsCanvasFocused(false)} // 👈 deactivate shortcuts
                 onMouseDown={startDrawing}
                 onMouseMove={draw}
                 onMouseUp={stopDrawing}
                 onMouseLeave={stopDrawing}
-                className="cursor-crosshair"
+                className="cursor-crosshair focus:outline-2 focus:outline-primary"
             />
 
             <div className="fixed bottom-6 left-1/2 -translate-x-1/2 pointer-events-none">

client/src/components/Toolbar.jsx

@@ -1,52 +1,62 @@
-import { MousePointer2, Pen, Eraser, Square, Circle, Minus, Trash2 } from "lucide-react";
+import {
+  MousePointer2,
+  Pen,
+  Eraser,
+  Square,
+  Circle,
+  Minus,
+  Trash2,
+} from "lucide-react";
 import { cn } from "../lib/utils";
 import { Button } from "./ui/Button";
 import { Separator } from "./ui/Separator";
 
 export const Toolbar = ({ activeTool, onToolChange, onClear }) => {
-    const tools = [
-        { type: "select", icon: MousePointer2 },
-        { type: "pen", icon: Pen },
-        { type: "eraser", icon: Eraser },
-        { type: "rectangle", icon: Square },
-        { type: "circle", icon: Circle },
-        { type: "line", icon: Minus },
-    ];
+  const tools = [
+    { type: "select", icon: MousePointer2 },
+    { type: "pen", icon: Pen },
+    { type: "eraser", icon: Eraser },
+    { type: "rectangle", icon: Square },
+    { type: "circle", icon: Circle },
+    { type: "line", icon: Minus },
+  ];
 
-    return (
-        <div className="fixed top-6 left-1/2 -translate-x-1/2 z-50">
-            <div className="bg-toolbar border border-toolbar-border rounded-2xl shadow-xl backdrop-blur-sm p-2 flex items-center gap-2">
-                {tools.map((tool) => {
-                    const Icon = tool.icon;
-                    return (
-                        <Button
-                            key={tool.type}
-                            variant="ghost"
-                            size="icon"
-                            onClick={() => onToolChange(tool.type)}
-                            className={cn(
-                                "h-10 w-10 transition-all duration-200 hover:bg-secondary",
-                                activeTool === tool.type && "bg-primary text-primary-foreground hover:bg-primary/90"
-                            )}
-                            aria-label={tool.type}
-                        >
-                            <Icon className="h-5 w-5" />
-                        </Button>
-                    );
-                })}
+  return (
+    <div className="fixed top-6 left-1/2 -translate-x-1/2 z-50">
+      <div className="bg-toolbar border border-toolbar-border rounded-2xl shadow-xl backdrop-blur-sm p-2 flex items-center gap-2">
+        {tools.map((tool) => {
+          const Icon = tool.icon;
+          return (
+            <Button
+              key={tool.type}
+              variant="ghost"
+              size="icon"
+              onClick={() => onToolChange(tool.type)}
+              className={cn(
+                "h-10 w-10 transition-all duration-200 hover:bg-secondary",
+                activeTool === tool.type
+                  ? "bg-primary text-primary-foreground ring-2 ring-offset-2 ring-primary"
+                  : ""
+              )}
+              aria-label={tool.type}
+            >
+              <Icon className="h-5 w-5" />
+            </Button>
+          );
+        })}
 
-                <Separator orientation="vertical" className="h-8 mx-1" />
+        <Separator orientation="vertical" className="h-8 mx-1" />
 
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={onClear}
-                    className="h-10 w-10 transition-all duration-200 hover:bg-destructive/10 hover:text-destructive"
-                    aria-label="Clear canvas"
-                >
-                    <Trash2 className="h-5 w-5" />
-                </Button>
-            </div>
-        </div>
-    );
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClear}
+          className="h-10 w-10 transition-all duration-200 hover:bg-destructive/10 hover:text-destructive"
+          aria-label="Clear canvas"
+        >
+          <Trash2 className="h-5 w-5" />
+        </Button>
+      </div>
+    </div>
+  );
 };