Canvas Comments, Annotations & Sticky Notes System

[bchou9]

Feature Description

Add support for contextual comments, annotations, and sticky notes on the canvas to enable rich collaboration, feedback, and design review workflows.

Use Cases

• Design review: annotate specific areas with feedback
• Teaching: add explanatory notes to drawings
• Project planning: sticky notes for brainstorming
• Code review equivalent for visual content
• Threaded discussions about specific canvas regions

Current Limitation

ResCanvas supports drawing but lacks:

• Text annotations tied to specific canvas coordinates
• Comment threads/replies
• Sticky notes (movable text boxes)
• Mention/tagging other users
• Resolved/unresolved comment status
• Comment search and filtering

Proposed Features

1. Point Annotations

Characteristics:

• Clickable marker icon at specific (x, y) coordinates
• Click to reveal comment thread
• Visual indicator (numbered badge, speech bubble icon)
• Can be resolved/unresolvedColor-coded by user
• Supports @mentions to notify users

Data Schema:

{
  "annotationId": "anno_123",
  "type": "point",
  "position": {"x": 150, "y": 200},
  "roomId": "room_abc",
  "createdBy": "alice",
  "createdAt": "2025-10-25T10:00:00Z",
  "resolved": false,
  "comments": [
    {
      "commentId": "cmt_1",
      "userId": "alice",
      "text": "@bob What do you think about this section?",
      "timestamp": "2025-10-25T10:00:00Z",
      "edited": false
    },
    {
      "commentId": "cmt_2",
      "userId": "bob",
      "text": "Looks good! Maybe use darker colors?",
      "timestamp": "2025-10-25T10:15:00Z",
      "edited": false
    }
  ]
}

2. Area Annotations

• Rectangle selection to annotate region
• Highlights specific area with dashed border
• Click to see comment thread
• Useful for feedback on entire sections

3. Sticky Notes

Characteristics:

• Draggable text boxes on canvas
• Different colors (yellow, blue, pink, green)
• Resizable
• Markdown support for rich formatting
• Pinned or floating
• Can be minimized/expanded

Data Schema:

{
  "noteId": "note_456",
  "type": "sticky",
  "position": {"x": 300, "y": 400},
  "size": {"width": 200, "height": 150},
  "color": "yellow",
  "text": "## TODO\n- Fix alignment\n- Add shadow",
  "createdBy": "alice",
  "createdAt": "2025-10-25T10:00:00Z",
  "pinned": false,
  "minimized": false,
  "roomId": "room_abc"
}

4. Freehand Annotations

• Draw arrows, circles, underlines over existing content
• Different style from regular strokes (dashed, semi-transparent)
• Grouped with associated comments
• Can be toggled on/off (annotation layer)

UI/UX Design

Annotation Mode Toggle

Add to toolbar in Canvas.js:

<ToggleButtonGroup>
  <ToggleButton value="draw">Draw</ToggleButton>
  <ToggleButton value="annotate">Annotate</ToggleButton>
  <ToggleButton value="note">Sticky Note</ToggleButton>
</ToggleButtonGroup>

Comment Panel

Side panel showing all annotations:

<CommentPanel>
  <Tabs>
    <Tab label="All (12)" />
    <Tab label="Unresolved (5)" />
    <Tab label="Resolved (7)" />
  </Tabs>
  <CommentList>
    <CommentItem onClick={navigateToAnnotation}>
      <Avatar user="alice" />
      <CommentContent>
        <Meta>2 hours ago • Resolved</Meta>
      </CommentContent>
    </CommentItem>
  </CommentList>
</CommentPanel>

Sticky Note Component

<StickyNote
  draggable
  resizable
  color={color}
  position={position}
  onDragEnd={savePosition}
>
  <Header>
    <MinimizeButton />
    <ColorPicker />
    <DeleteButton />
  </Header>
  <MarkdownEditor value={text} onChange={updateText} />
</StickyNote>

Backend Implementation

New API Endpoints:

POST   /api/v1/rooms/{id}/annotations          # Create annotation
GET    /api/v1/rooms/{id}/annotations          # List all annotations
GET    /api/v1/rooms/{id}/annotations/{annoId} # Get specific annotation
PUT    /api/v1/rooms/{id}/annotations/{annoId} # Update annotation
DELETE /api/v1/rooms/{id}/annotations/{annoId} # Delete annotation
POST   /api/v1/rooms/{id}/annotations/{annoId}/comments # Add comment
PUT    /api/v1/rooms/{id}/annotations/{annoId}/resolve  # Mark resolved

POST   /api/v1/rooms/{id}/sticky-notes         # Create sticky note
GET    /api/v1/rooms/{id}/sticky-notes         # List sticky notes
PUT    /api/v1/rooms/{id}/sticky-notes/{noteId} # Update sticky note
DELETE /api/v1/rooms/{id}/sticky-notes/{noteId} # Delete sticky note

MongoDB Collections:

# New collections
annotations_coll = db['annotations']
sticky_notes_coll = db['sticky_notes']

# Indexes
annotations_coll.create_index([("roomId", 1), ("resolved", 1)])
annotations_coll.create_index([("createdBy", 1)])
sticky_notes_coll.create_index([("roomId", 1)])

Socket.IO Real-time Events:

# backend/routes/socketio_handlers.py
@socketio.on('annotation_added')
@socketio.on('annotation_resolved')
@socketio.on('comment_added')
@socketio.on('sticky_note_moved')
@socketio.on('sticky_note_updated')

Files to Create/Modify

Backend:

• backend/api_v1/annotations.py ⭐ (NEW)
• backend/api_v1/sticky_notes.py ⭐ (NEW)
• backend/routes/socketio_handlers.py - Add annotation events
• backend/services/db.py - Add new collections

Frontend:

• frontend/src/components/AnnotationLayer.jsx ⭐ (NEW)
• frontend/src/components/CommentPanel.jsx ⭐ (NEW)
• frontend/src/components/StickyNote.jsx ⭐ (NEW)
• frontend/src/components/AnnotationMarker.jsx ⭐ (NEW)
• frontend/src/components/Canvas.js - Integrate annotation mode
• frontend/src/api/annotations.js ⭐ (NEW)
• frontend/src/api/stickyNotes.js ⭐ (NEW)

Advanced Features

1. @Mentions with Notifications

• Type @username in comments
• Autocomplete from room members
• Send notification to mentioned user
• Highlight mentions in comment text

2. Rich Text Formatting

• Markdown support in sticky notes
• Basic formatting in comments (bold, italic, code)
• Syntax highlighting for code blocks
• Link previews

3. Annotation Filtering

• Show/hide resolved annotations
• Filter by user
• Search annotation text
• Sort by date, location, status

4. Annotation Export

• Include annotations in canvas exports
• Generate PDF report of all comments
• Export annotation data as JSON

5. Permission Controls

• Only editors can create annotations
• Viewers can read but not comment
• Owners can resolve any annotation
• Users can edit/delete own comments only

Real-time Collaboration

• See live annotation cursors
• Show "[User] is typing..." indicator
• Optimistic UI updates
• Conflict resolution for concurrent edits

Mobile Responsiveness

• Tap to add annotation
• Swipe to navigate between annotations
• Touch-friendly comment UI
• Floating comment panel on mobile

Accessibility

• Keyboard shortcuts for annotation mode
• Screen reader support for comments
• ARIA labels for annotation markers
• Focus management for comment threads

Performance Optimizations

• Lazy load annotations on viewport scroll
• Virtualize comment lists for long threads
• Debounce sticky note position updates
• Cache annotation data in Redux/Context

Testing Requirements

• Unit tests for annotation CRUD operations
• Integration tests for comment threading
• E2E tests for annotation workflows
• Snapshot tests for sticky note rendering
• Accessibility tests (a11y)

Use Case Examples

Design Review:

1. Designer shares canvas with team
2. Reviewers add point annotations with feedback
3. Designer responds and marks resolved
4. Export review report with all comments

Teaching:

1. Teacher creates drawing
2. Adds sticky notes explaining concepts
3. Students can comment with questions
4. Teacher resolves questions as answered

Brainstorming:

1. Team creates sticky notes with ideas
2. Organize notes by dragging
3. Color-code by priority
4. Export notes as action items

Benefits

• Enhanced collaboration beyond just drawing
• Structured feedback mechanism
• Better design review workflows
• Educational tool for annotated examples
• Project planning and brainstorming
• Professional-grade collaboration features

Related Features

• Complements Live Presence, Mini-Map & Thumbnails (Collaboration UX) #19 (Live Presence)
• Works with existing permission system
• Integrates with notification system