feat: Add real-time cursors with user labels

Author: saumya1317

client/src/components/Canvas.jsx

@@ -5,6 +5,27 @@ import { StrokeControl } from "./StrokeControl";
 import { toast } from "sonner";
 import { io } from "socket.io-client";
 
+// COLLAB CURSOR: THROTTLE FUNCTION
+function throttle(fn, wait) {
+  let lastTime = 0;
+  let timeout = null;
+  let savedArgs = null;
+  return function throttled(...args) {
+    const now = Date.now();
+    if (now - lastTime >= wait) {
+      lastTime = now;
+      fn.apply(this, args);
+    } else {
+      clearTimeout(timeout);
+      savedArgs = args;
+      timeout = setTimeout(() => {
+        lastTime = Date.now();
+        fn.apply(this, savedArgs);
+      }, wait - (now - lastTime));
+    }
+  };
+}
+
 export const Canvas = () => {
   const canvasRef = useRef(null);
   const [activeTool, setActiveTool] = useState("pen");
@@ -26,35 +47,15 @@ export const Canvas = () => {
     !!localStorage.getItem("token")
   );
 
-  const handleLogout = async () => {
-    const token = localStorage.getItem("token");
-    if (!token) return;
-    try {
-      const res = await fetch("http://localhost:3000/api/auth/logout", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ token }),
-      });
-      const data = await res.json();
-      if (res.ok) {
-        localStorage.removeItem("token");
-        setIsLoggedIn(false);
-        toast.success("Logged out successfully!");
-      } else {
-        toast.error(data.message);
-      }
-    } catch (err) {
-      console.error(err);
-      toast.error("Logout failed!");
-    }
-  };
+  const [otherCursors, setOtherCursors] = useState({}); // socketId -> {x, y, username}
 
+  // Initialize socket only once per component lifecycle
   useEffect(() => {
     const s = io("http://localhost:3000");
     setSocket(s);
     s.on("connect", () => console.log("Connected to server:", s.id));
+    // Listen for draw events from other users
     s.on("draw", ({ x, y, color, width, type, tool }) => {
-      if (!joined) return;
       const ctx = canvasRef.current?.getContext("2d");
       if (!ctx) return;
       if (type === "start") ctx.beginPath();
@@ -63,8 +64,31 @@ export const Canvas = () => {
       ctx.lineTo(x, y);
       ctx.stroke();
     });
-    return () => s.disconnect();
-  }, [joined]);
+    // Listen for cursor updates
+    const handleCursorUpdate = ({ x, y, username, socketId }) => {
+      console.log('[CLIENT] RECEIVED CURSOR UPDATE:', { x, y, username, socketId });
+      if (socketId === s.id) return;
+      console.log('[CLIENT] Adding cursor to state:', { socketId, x, y, username });
+      setOtherCursors((prev) => {
+        const newState = { ...prev, [socketId]: { x, y, username } };
+        console.log('[CLIENT] Updated otherCursors state:', newState);
+        return newState;
+      });
+    };
+    const handleCursorRemove = ({ socketId }) => {
+      setOtherCursors((prev) => {
+        const next = { ...prev };
+        delete next[socketId];
+        return next;
+      });
+    };
+    s.on("cursor-update", handleCursorUpdate);
+    s.on("cursor-remove", handleCursorRemove);
+    s.on("disconnect", () => setOtherCursors({}));
+    return () => {
+      s.disconnect();
+    };
+  }, []);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -96,6 +120,29 @@ export const Canvas = () => {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isCanvasFocused]);
 
+  const handleLogout = async () => {
+    const token = localStorage.getItem("token");
+    if (!token) return;
+    try {
+      const res = await fetch("http://localhost:3000/api/auth/logout", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        localStorage.removeItem("token");
+        setIsLoggedIn(false);
+        toast.success("Logged out successfully!");
+      } else {
+        toast.error(data.message);
+      }
+    } catch (err) {
+      console.error(err);
+      toast.error("Logout failed!");
+    }
+  };
+
   // Drawing logic handlers
   const startDrawing = (e) => {
     const canvas = canvasRef.current;
@@ -120,7 +167,6 @@ export const Canvas = () => {
           tool: activeTool,
         });
     }
-    // Save snapshot for preview tools
     if (activeTool === "line" || activeTool === "rectangle") {
       snapshot.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
     }
@@ -206,62 +252,82 @@ export const Canvas = () => {
     }
   };
 
-  return (
-    <div className="relative w-full h-screen overflow-hidden bg-canvas">
-
-{/* 🔹 Login / Logout buttons */}
-<div className="fixed top-4 left-4 z-[9999]">
-  {isLoggedIn ? (
-    // Logout button if logged in
-    <button
-      onClick={handleLogout}
-      className="bg-red-600 text-white px-4 py-2 rounded-lg shadow hover:bg-red-700"
-    >
-      Logout
-    </button>
-  ) : (
-    <>
-      {/* Desktop view: two separate buttons */}
-      <div className="hidden sm:flex gap-3">
-        <button
-          onClick={() => window.location.href = "/login"}
-          className="bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700"
-        >
-          Sign In
-        </button>
-        <button
-          onClick={() => window.location.href = "/register"}
-          className="bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700"
-        >
-          Sign Up
-        </button>
-      </div>
+  const getUsername = () => {
+    return localStorage.getItem("username") || "anon-" + (socket?.id?.slice(-5) || "user");
+  };
 
-      {/* Mobile view: dropdown */}
-      <div className="sm:hidden relative">
-        <details className="bg-blue-600 text-white px-4 py-2 rounded-lg shadow cursor-pointer select-none">
-          <summary className="outline-none list-none">Menu ☰</summary>
-          <div className="absolute left-0 mt-2 w-32 bg-white text-black rounded-lg shadow-lg border">
-            <button
-              onClick={() => window.location.href = "/login"}
-              className="block w-full text-left px-4 py-2 hover:bg-gray-100"
-            >
-              Sign In
-            </button>
-            <button
-              onClick={() => window.location.href = "/register"}
-              className="block w-full text-left px-4 py-2 hover:bg-gray-100"
-            >
-              Sign Up
-            </button>
-          </div>
-        </details>
-      </div>
-    </>
-  )}
-</div>
+  // COLLAB CURSOR CLIENT LOGIC
+  const sendCursorUpdate = throttle((x, y) => {
+    if (joined && socket && roomId) {
+      console.log('[CLIENT] SENDING CURSOR UPDATE:', { roomId, x, y, username: getUsername(), socketId: socket.id });
+      socket.emit("cursor-move", {
+        roomId,
+        x,
+        y,
+        username: getUsername(),
+        socketId: socket.id,
+      });
+    }
+  }, 33);
 
+  function handleCanvasMouseMove(e) {
+    if (!joined || !socket || !canvasRef.current) return;
+    const rect = canvasRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    sendCursorUpdate(x, y);
+    draw(e);
+  }
 
+  return (
+    <div className="relative w-full h-screen overflow-hidden bg-canvas">
+      {/* Login / Logout buttons */}
+      <div className="fixed top-4 left-4 z-[9999]">
+        {isLoggedIn ? (
+          <button
+            onClick={handleLogout}
+            className="bg-red-600 text-white px-4 py-2 rounded-lg shadow hover:bg-red-700"
+          >
+            Logout
+          </button>
+        ) : (
+          <>
+            <div className="hidden sm:flex gap-3">
+              <button
+                onClick={() => window.location.href = "/login"}
+                className="bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700"
+              >
+                Sign In
+              </button>
+              <button
+                onClick={() => window.location.href = "/register"}
+                className="bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700"
+              >
+                Sign Up
+              </button>
+            </div>
+            <div className="sm:hidden relative">
+              <details className="bg-blue-600 text-white px-4 py-2 rounded-lg shadow cursor-pointer select-none">
+                <summary className="outline-none list-none">Menu ☰</summary>
+                <div className="absolute left-0 mt-2 w-32 bg-white text-black rounded-lg shadow-lg border">
+                  <button
+                    onClick={() => window.location.href = "/login"}
+                    className="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                  >
+                    Sign In
+                  </button>
+                  <button
+                    onClick={() => window.location.href = "/register"}
+                    className="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                  >
+                    Sign Up
+                  </button>
+                </div>
+              </details>
+            </div>
+          </>
+        )}
+      </div>
 
       <Toolbar
         activeTool={activeTool}
@@ -294,7 +360,7 @@ export const Canvas = () => {
         onFocus={() => setIsCanvasFocused(true)}
         onBlur={() => setIsCanvasFocused(false)}
         onMouseDown={startDrawing}
-        onMouseMove={draw}
+        onMouseMove={handleCanvasMouseMove}
         onMouseUp={stopDrawing}
         onMouseLeave={stopDrawing}
         className="cursor-crosshair focus:outline-2 focus:outline-primary"
@@ -332,6 +398,35 @@ export const Canvas = () => {
           </p>
         </div>
       </div>
+      {/* Overlay for remote users' cursors */}
+      {Object.entries(otherCursors).map(([sid, { x, y, username }]) => (
+        <div
+          key={sid}
+          style={{ position: "fixed", left: x, top: y, pointerEvents: "none", zIndex: 9000, transform: "translate(-50%,-50%)" }}
+          className="user-cursor-overlay"
+        >
+          <div style={{
+            background: "#222",
+            color: "#fff",
+            padding: "2px 7px",
+            borderRadius: 6,
+            fontSize: 13,
+            fontWeight: 500,
+            marginBottom: 0,
+            whiteSpace: "nowrap",
+            position: "absolute",
+            left: 18,
+            top: 6,
+            opacity: 0.89,
+            pointerEvents: "none"
+          }}>{username ?? "User"}</div>
+          {/* Cursor shape: small color dot & tail */}
+          <svg width="20" height="22" style={{ filter: "drop-shadow(0 2px 4px #0002)" }}>
+            <circle cx="7" cy="7" r="6" fill="#12b6fa" stroke="#fff" strokeWidth="2" />
+            <polyline points="7,12 7,18" stroke="#12b6fa" strokeWidth="3" />
+          </svg>
+        </div>
+      ))}
     </div>
   );
 };

server/index.js

@@ -2,13 +2,13 @@ const express = require("express");
 const http = require("http");
 const { Server } = require("socket.io");
 const cors = require("cors");
-const connectDB = require("./config/db");
+// const connectDB = require("./config/db");
 require('dotenv').config();
 
 const app = express();
 const PORT = process.env.PORT || 3000;
-const URL=process.env.MONGO_URI||"mongodb://localhost:27017/collab-canvas";
-connectDB(URL);
+// const URL = process.env.MONGO_URI || "mongodb://localhost:27017/collab-canvas";
+// connectDB(URL);
 
 // Middleware
 app.use(express.json());
@@ -44,11 +44,31 @@ io.on("connection", (socket) => {
   // Forward drawing events to all others in the room
   socket.on("draw", (data) => {
     const { roomId } = data;
+    console.log("[SERVER] FORWARD DRAW:", data);
     socket.to(roomId).emit("draw", data);
   });
 
+  // --- COLLAB CURSOR LOGIC ---
+  socket.on("cursor-move", (data) => {
+    const { roomId, x, y, username, socketId } = data;
+    console.log("[SERVER] CURSOR-MOVE:", data);
+    console.log("[SERVER] Broadcasting to room:", roomId);
+    // Broadcast to all others in the room
+    socket.to(roomId).emit("cursor-update", {
+      x, y, username, socketId
+    });
+    console.log("[SERVER] Cursor update broadcasted");
+  });
+
+  // --- Cleanup on disconnect ---
   socket.on("disconnect", () => {
     console.log("🔴 User disconnected:", socket.id);
+    // Tell all rooms this socket was in to remove its cursor
+    Array.from(socket.rooms).forEach((roomId) => {
+      // skip the socket's own room
+      if (roomId === socket.id) return;
+      socket.to(roomId).emit("cursor-remove", { socketId: socket.id });
+    });
   });
 });