feat: add real-time remote cursor streaming for unique users with pointer and username display

Author: coderomm

apps/collabydraw/canvas-engine/CanvasEngine.ts

@@ -14,6 +14,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { Share2 } from "lucide-react";
 import { getRoomSharingUrl, isInRoom } from "@/utils/roomParams";
 import { BASE_URL } from "@/config/constants";
+import { getClientColor } from "@/utils/getClientColor";
 
 export default function CollaborationToolbar({ participants, hash }: { participants?: RoomParticipants[], hash?: string }) {
     const pathname = usePathname();
@@ -114,26 +115,4 @@ export default function CollaborationToolbar({ participants, hash }: { participa
             )}
         </div>
     )
-}
-
-function hashToInteger(id: string) {
-    let hash = 0;
-    if (!id) return hash;
-
-    for (let i = 0; i < id.length; i++) {
-        const char = id.charCodeAt(i);
-        hash = (hash << 5) - hash + char;
-    }
-    return hash;
-}
-
-export const getClientColor = (collaborator: { userId: string; userName: string; }) => {
-    if (!collaborator?.userId) return "hsl(0, 0%, 83%)";
-
-    const hash = Math.abs(hashToInteger(collaborator?.userId));
-    const hue = (hash % 36) * 10;
-    const saturation = 90;
-    const lightness = 75;
-
-    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-};
+}

apps/collabydraw/canvas-engine/temp.ts

@@ -52,7 +52,7 @@ export default function CanvasBoard() {
         grabbing: false,
         sidebarOpen: false,
         canvasColor: canvasBgLight[0],
-        isCanvasEmpty: true
+        isCanvasEmpty: true,
     });
     const userRef = useRef({
         roomId: null as string | null,
@@ -117,6 +117,12 @@ export default function CanvasBoard() {
         setCanvasEngineState(prev => ({ ...prev, canvasColor: canvasBgLight[0] }));
     }, [theme])
 
+    useEffect(() => {
+        if (canvasEngineState.engine && theme) {
+            canvasEngineState.engine.setTheme(theme === 'light' ? "light" : "dark");
+        }
+    }, [theme, canvasEngineState.engine]);
+
     useEffect(() => {
         const storedShapes = localStorage.getItem(LOCALSTORAGE_CANVAS_KEY);
         const isEmpty = !storedShapes || JSON.parse(storedShapes).length === 0;
@@ -201,7 +207,8 @@ export default function CanvasBoard() {
                 setParticipants(updatedParticipants);
             } : null,
             mode === 'room' ? (connectionStatus) => setIsConnected(connectionStatus) : null,
-            userRef.current.encryptionKey
+            userRef.current.encryptionKey,
+            theme === 'light' ? "light" : "dark"
         );
         engine.setOnShapeCountChange((count: number) => {
             setCanvasEngineState(prev => ({
@@ -210,7 +217,7 @@ export default function CanvasBoard() {
             }));
         });
         return engine;
-    }, [canvasEngineState.canvasColor, mode]);
+    }, [canvasEngineState.canvasColor, mode, theme]);
 
     useEffect(() => {
         if (!isCanvasReady) return;

apps/collabydraw/components/CollaborationToolbar.tsx

@@ -7,6 +7,9 @@ export const DEFAULT_STROKE_WIDTH = 1;
 export const DEFAULT_STROKE_FILL = "rgba(255, 255, 255)";
 export const DEFAULT_BG_FILL = "rgba(18, 18, 18)";
 export const ARROW_HEAD_LENGTH = 20;
+export const COLOR_WHITE = "#ffffff";
+export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
+export const COLOR_DRAG_CALL = "#a2f1a5";
 export const getDashArrayDashed = (strokeWidth: number) => [
   strokeWidth,
   strokeWidth * 4,

apps/collabydraw/components/canvas/CanvasBoard.tsx

@@ -0,0 +1,41 @@
+/**
+ * https://stackoverflow.com/a/3368118
+ * Draws a rounded rectangle using the current state of the canvas.
+ * @param {CanvasRenderingContext2D} context
+ * @param {Number} x The top left x coordinate
+ * @param {Number} y The top left y coordinate
+ * @param {Number} width The width of the rectangle
+ * @param {Number} height The height of the rectangle
+ * @param {Number} radius The corner radius
+ */
+export const roundRect = (
+  context: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number,
+  strokeColor?: string
+) => {
+  context.beginPath();
+  context.moveTo(x + radius, y);
+  context.lineTo(x + width - radius, y);
+  context.quadraticCurveTo(x + width, y, x + width, y + radius);
+  context.lineTo(x + width, y + height - radius);
+  context.quadraticCurveTo(
+    x + width,
+    y + height,
+    x + width - radius,
+    y + height
+  );
+  context.lineTo(x + radius, y + height);
+  context.quadraticCurveTo(x, y + height, x, y + height - radius);
+  context.lineTo(x, y + radius);
+  context.quadraticCurveTo(x, y, x + radius, y);
+  context.closePath();
+  context.fill();
+  if (strokeColor) {
+    context.strokeStyle = strokeColor;
+  }
+  context.stroke();
+};

apps/collabydraw/config/constants.ts

@@ -0,0 +1,24 @@
+function hashToInteger(id: string) {
+  let hash = 0;
+  if (!id) return hash;
+
+  for (let i = 0; i < id.length; i++) {
+    const char = id.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+  }
+  return hash;
+}
+
+export const getClientColor = (collaborator: {
+  userId: string;
+  userName: string;
+}) => {
+  if (!collaborator?.userId) return "hsl(0, 0%, 83%)";
+
+  const hash = Math.abs(hashToInteger(collaborator?.userId));
+  const hue = (hash % 36) * 10;
+  const saturation = 90;
+  const lightness = 75;
+
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+};

apps/collabydraw/shape-render/roundRect.ts

@@ -85,21 +85,18 @@ wss.on("connection", function connection(ws, req) {
   };
   connections.push(newConnection);
 
-  console.log(`New connection established: ${connectionId} for user ${userId}`);
+  ws.send(
+    JSON.stringify({
+      type: WsDataType.CONNECTION_READY,
+      connectionId,
+    })
+  );
+  console.log("✅ Sent CONNECTION_READY to:", connectionId);
 
   ws.on("error", (err) =>
     console.error(`WebSocket error for user ${userId}:`, err)
   );
 
-  ws.on("open", () => {
-    ws.send(
-      JSON.stringify({
-        type: WsDataType.CONNECTION_READY,
-        connectionId,
-      })
-    );
-  });
-
   ws.on("message", async function message(data) {
     try {
       const parsedData: WebSocketMessage = JSON.parse(data.toString());
@@ -299,6 +296,51 @@ wss.on("connection", function connection(ws, req) {
           }
         }
 
+        case WsDataType.CURSOR_MOVE:
+          if (
+            parsedData.roomId &&
+            parsedData.userId &&
+            parsedData.connectionId &&
+            parsedData.message
+          ) {
+            broadcastToRoom(
+              parsedData.roomId,
+              {
+                type: parsedData.type,
+                roomId: parsedData.roomId,
+                userId: connection.userId,
+                userName: connection.userName,
+                connectionId: connection.connectionId,
+                message: parsedData.message,
+                timestamp: new Date().toISOString(),
+                id: null,
+                participants: null,
+              },
+              [parsedData.connectionId],
+              false
+            );
+          }
+          break;
+
+        case WsDataType.STREAM_SHAPE:
+          broadcastToRoom(
+            parsedData.roomId,
+            {
+              type: parsedData.type,
+              id: parsedData.id,
+              message: parsedData.message,
+              roomId: parsedData.roomId,
+              userId: connection.userId,
+              userName: connection.userName,
+              connectionId: connection.connectionId,
+              timestamp: new Date().toISOString(),
+              participants: null,
+            },
+            [connection.connectionId],
+            false
+          );
+          break;
+
         case WsDataType.DRAW: {
           if (!parsedData.message || !parsedData.id || !parsedData.roomId) {
             console.error(

apps/collabydraw/utils/getClientColor.ts

@@ -63,6 +63,8 @@ export enum WsDataType {
   CLOSE_ROOM = "CLOSE_ROOM",
   CONNECTION_READY = "CONNECTION_READY",
   EXISTING_SHAPES = "EXISTING_SHAPES",
+  STREAM_SHAPE = "STREAM_SHAPE",
+  CURSOR_MOVE = "CURSOR_MOVE",
 }
 
 export interface WebSocketMessage {