Real-Time Cursor Tracking & Collaborative Presence Indicators

[bchou9]

Feature Description

Add real-time cursor tracking and visual presence indicators to show where other users are drawing, hovering, or interacting with the canvas.

Current State

ResCanvas shows user lists (setUserList) and basic join/leave notifications via Socket.IO, but users cannot see:

• Where other users' cursors are positioned
• What tools/colors other users are using
• Active drawing zones of collaborators
• Who is currently viewing vs. actively drawing

Proposed Features

1. Live Cursor Positions:

• Display colored cursors for each user on canvas
• Show username label next to cursor
• Cursor color matches user's color theme
• Hide cursor after 2-3 seconds of inactivity

2. Drawing Intent Indicators:

• Show preview box when user is about to draw a shape
• Display selection rectangle when user is selecting
• Highlight pan/zoom activity areas

3. User Activity Status:

• Active (currently drawing)
• Idle (viewing)
• Away (inactive > 5 minutes)
• Status badge in user list component

4. Viewport Awareness:

• Mini-map showing where other users are viewing
• Highlight active viewport rectangles on overview

Technical Implementation

Backend (Socket.IO events):

• cursor_move - Emit cursor position (throttled to 60Hz max)
• user_status_change - Active/idle/away status
• tool_change - When user changes tool/color
• Room-based broadcasting in backend/routes/socketio_handlers.py

Frontend:

• New CursorLayer component overlaying canvas
• Store cursor positions in React state
• Throttle cursor emission with requestAnimationFrame
• Add to frontend/src/components/Canvas.js

Optimization:

• Cursor updates only broadcast to users in same room
• Throttle to prevent network flooding
• Use WebSocket binary format for position data
• Cache cursor SVG elements

Implementation Files

• backend/routes/socketio_handlers.py - Add cursor event handlers
• frontend/src/components/Canvas.js - Integrate cursor tracking
• frontend/src/components/CursorLayer.jsx - New component (to create)
• frontend/src/services/socket.js - Add cursor event listeners

Benefits

• Enhanced collaboration awareness
• Reduced accidental conflicts (users avoid same areas)
• Better UX for real-time teamwork
• Professional collaborative drawing tool feature

Performance Considerations

• Cursor position updates limited to 60fps
• Only transmit when cursor moves > 5px (dead zone)
• Automatically disconnect inactive users
• Batch cursor updates for multiple users

Related Issues

• Complements Live Presence, Mini-Map & Thumbnails (Collaboration UX) #19 (Live Presence & Mini-Map)
• Works with existing Socket.IO infrastructure