feat: Implemented the rectangle box feature in canvas.jsx

Author: saumya1317

client/src/components/Canvas.jsx

@@ -13,39 +13,32 @@ export const Canvas = () => {
   const [isDrawing, setIsDrawing] = useState(false);
   const [isCanvasFocused, setIsCanvasFocused] = useState(false);
 
-  // For line tool
   const startPoint = useRef({ x: 0, y: 0 });
   const snapshot = useRef(null);
 
   // Collaboration
   const [roomId, setRoomId] = useState("");
-  const [joined, setJoined] = useState(false); // false = local mode
+  const [joined, setJoined] = useState(false);
   const [socket, setSocket] = useState(null);
-  const [isModalOpen, setIsModalOpen] = useState(false); // controls modal visibility
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  // Initialize socket connection (always available but idle until joined)
   useEffect(() => {
     const s = io("http://localhost:3000");
     setSocket(s);
-
     s.on("connect", () => console.log("Connected to server:", s.id));
-
     s.on("draw", ({ x, y, color, width, type, tool }) => {
-      if (!joined) return; // only listen when in collab mode
+      if (!joined) return;
       const ctx = canvasRef.current?.getContext("2d");
       if (!ctx) return;
-
       if (type === "start") ctx.beginPath();
       ctx.strokeStyle = tool === "eraser" ? "#ffffff" : color;
       ctx.lineWidth = tool === "eraser" ? width * 3 : width;
       ctx.lineTo(x, y);
       ctx.stroke();
     });
-
     return () => s.disconnect();
   }, [joined]);
 
-  // Canvas setup
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -54,20 +47,17 @@ export const Canvas = () => {
     canvas.height = window.innerHeight;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
-
     const handleResize = () => {
       const image = ctx.getImageData(0, 0, canvas.width, canvas.height);
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight;
       ctx.putImageData(image, 0, 0);
     };
-
     window.addEventListener("resize", handleResize);
     toast.success("Canvas ready! Local mode active.");
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  // Keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (e) => {
       if (!isCanvasFocused) return;
@@ -79,23 +69,19 @@ export const Canvas = () => {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isCanvasFocused]);
 
-  // Drawing logic
+  // Drawing logic handlers
   const startDrawing = (e) => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
     if (!ctx) return;
-
     const rect = canvas.getBoundingClientRect();
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
-
     startPoint.current = { x, y };
     setIsDrawing(true);
-
     if (activeTool === "pen" || activeTool === "eraser") {
       ctx.beginPath();
       ctx.moveTo(x, y);
-
       if (joined && socket)
         socket.emit("draw", {
           roomId,
@@ -107,8 +93,8 @@ export const Canvas = () => {
           tool: activeTool,
         });
     }
-
-    if (activeTool === "line") {
+    // Save snapshot for preview tools
+    if (activeTool === "line" || activeTool === "rectangle") {
       snapshot.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
     }
   };
@@ -118,17 +104,14 @@ export const Canvas = () => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
     if (!ctx) return;
-
     const rect = canvas.getBoundingClientRect();
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
-
     if (activeTool === "pen" || activeTool === "eraser") {
       ctx.strokeStyle = activeTool === "eraser" ? "#ffffff" : activeColor;
       ctx.lineWidth = activeTool === "eraser" ? strokeWidth * 3 : strokeWidth;
       ctx.lineTo(x, y);
       ctx.stroke();
-
       if (joined && socket)
         socket.emit("draw", {
           roomId,
@@ -148,6 +131,17 @@ export const Canvas = () => {
       ctx.lineWidth = strokeWidth;
       ctx.stroke();
       ctx.closePath();
+    } else if (activeTool === "rectangle") {
+      ctx.putImageData(snapshot.current, 0, 0);
+      ctx.beginPath();
+      const startX = startPoint.current.x;
+      const startY = startPoint.current.y;
+      const width = x - startX;
+      const height = y - startY;
+      ctx.strokeStyle = activeColor;
+      ctx.lineWidth = strokeWidth;
+      ctx.strokeRect(startX, startY, width, height);
+      ctx.closePath();
     }
   };
 
@@ -192,27 +186,26 @@ export const Canvas = () => {
         onToolChange={handleToolChange}
         onClear={handleClear}
       />
-
-      {joined ?  <button
-        onClick={() => handleExitRoom()}
-        className="fixed top-4 right-4 bg-red-700 text-white px-4 py-2 rounded-lg shadow hover:bg-red-800 z-50"
-      >
-        Exit Room
-      </button>
-      : <button
-        onClick={() => setIsModalOpen(true)}
-        className="fixed top-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700 z-50"
-      >
-        Collaborate
-      </button> }
-     
-
+      {joined ? (
+        <button
+          onClick={() => handleExitRoom()}
+          className="fixed top-4 right-4 bg-red-700 text-white px-4 py-2 rounded-lg shadow hover:bg-red-800 z-50"
+        >
+          Exit Room
+        </button>
+      ) : (
+        <button
+          onClick={() => setIsModalOpen(true)}
+          className="fixed top-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700 z-50"
+        >
+          Collaborate
+        </button>
+      )}
       <ColorPicker activeColor={activeColor} onColorChange={setActiveColor} />
       <StrokeControl
         strokeWidth={strokeWidth}
         onStrokeWidthChange={setStrokeWidth}
       />
-
       <canvas
         ref={canvasRef}
         tabIndex={0}
@@ -224,7 +217,6 @@ export const Canvas = () => {
         onMouseLeave={stopDrawing}
         className="cursor-crosshair focus:outline-2 focus:outline-primary"
       />
-
       {isModalOpen && (
         <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/90 border border-gray-400 rounded-xl shadow-xl p-6 z-50 flex flex-col items-center gap-3">
           <h2 className="text-xl font-semibold">Join a Room</h2>
@@ -249,7 +241,6 @@ export const Canvas = () => {
           </button>
         </div>
       )}
-
       <div className="fixed bottom-6 left-1/2 -translate-x-1/2 pointer-events-none">
         <div className="bg-toolbar/95 border border-toolbar-border rounded-xl shadow-lg backdrop-blur-sm px-6 py-3">
           <p className="text-sm text-foreground font-medium">