Canvas Basics Verification Plan 🔍

🎯 Objective

Verify that ALL basic canvas actions work correctly before proceeding with the JSON-first architecture plan.

✅ Core Interactions Checklist

1. Element Selection

• Click element to select (blue outline appears)
• Click canvas background to deselect
• Escape key to deselect all
• Ctrl+A to select all elements
• Visual feedback (outline, handles appear)

2. Element Dragging

• Click and drag element moves it smoothly
• Element constrained to viewport bounds
• Multiple elements can be selected and dragged together
• Drag doesn't interfere with resize/rotate
• Drop releases correctly
• Cursor changes (grab → grabbing)

3. Element Resizing

• Right edge handle - FIXED
• Left edge handle - FIXED
• Top edge handle - FIXED
• Bottom edge handle - FIXED
• Top-left corner - FIXED
• Top-right corner - FIXED
• Bottom-left corner - FIXED
• Bottom-right corner - FIXED
• Minimum size enforced (20px)
• SVG scales proportionally (no distortion)
• Aspect ratio locking (if enabled)
• Resize doesn't trigger drag

4. Element Rotation

• Purple handle appears above element
• Click and drag rotates element
• Shift+drag snaps to 15° increments
• Rotation center is element center
• Rotation doesn't trigger drag
• Rotation value persists

5. Control Points (Connection Ports)

• Toggle control points button shows/hides them
• Blue circles appear at connection locations
• Click control point starts connection mode
• Connection line follows mouse
• Click second control point completes connection
• Escape cancels connection creation
• Control points stay aligned during resize/rotate

6. Connections

• Straight line connections work
• Bezier curve connections work
• Curved connections work
• Orthogonal (right-angle) connections work
• Arrow markers render correctly
• Connection follows when element moves
• Connection updates when element resizes
• Connection updates when element rotates
• Click connection to select it
• Delete connection with Delete key

7. Shape Creation

• Add Circle button creates circle
• Add Star button creates star
• Add Hexagon button creates hexagon
• Add Triangle button creates triangle
• Add Rectangle button creates rectangle
• New shapes appear at random canvas positions
• New shapes have control points
• New shapes are selectable/draggable/resizable/rotatable

8. AI Generation

• Type prompt in input field
• Button disabled when prompt empty
• Button enabled when prompt has text
• Click generates composition
• Panda template works ("draw a panda")
• Robot template works ("robot")
• House template works ("house")
• Flowchart template works ("flowchart")
• Diagram template works ("diagram")
• Generated elements are interactive

9. Edit Operations

• Undo (Ctrl+Z) reverts last action
• Redo (Ctrl+Y / Ctrl+Shift+Z) reapplies action
• Duplicate (Ctrl+D) creates copy
• Delete (Del / Backspace) removes selected
• Undo/redo history limited to 50 states
• History tracks: create, delete, move, resize, rotate, connect

10. Alignment Tools

• Align Left aligns selected elements
• Align Center (H) centers horizontally
• Align Right aligns to rightmost element
• Align Top aligns to topmost element
• Align Middle (V) centers vertically
• Align Bottom aligns to bottommost element
• Alignment works with 2+ selected elements
• Alignment respects element sizes

11. Keyboard Shortcuts

• Delete/Backspace: Delete selected
• Escape: Deselect all / Cancel connection
• Ctrl+A: Select all
• Ctrl+D: Duplicate
• Ctrl+Z: Undo
• Ctrl+Y: Redo
• Ctrl+Shift+Z: Redo (alternative)
• Shift+Drag Rotate: Snap to 15°

12. Persistence

• Changes auto-save
• Refresh page preserves state
• Element positions persist
• Element sizes persist
• Element rotations persist
• Connections persist
• Undo/redo history persists (if feasible)

13. Canvas Controls

• Zoom in/out (if implemented)
• Pan canvas (if implemented)
• Fit to canvas
• Reset view
• Canvas background visible

14. Visual Feedback

• Selected state (blue outline, handles)
• Hover state (slight scale, brightness)
• Dragging state (opacity, shadow, cursor)
• Resizing cursor changes
• Rotating cursor changes
• Connection creation cursor
• Loading states (if applicable)

15. Stats Display

• Total elements count accurate
• Total connections count accurate
• Selected count accurate
• Undo/redo count accurate
• Stats update in real-time

🧪 Test Scenarios

Scenario 1: Complete Workflow

1. Add circle
2. Add rectangle
3. Select circle
4. Drag circle to new position
5. Resize circle from right edge
6. Rotate circle 45°
7. Toggle control points
8. Connect circle to rectangle
9. Undo last 3 actions
10. Redo last 2 actions
11. Duplicate rectangle
12. Select all
13. Align center
14. Delete one element
15. Refresh page
16. Verify all changes persisted

Expected: All actions work smoothly, no errors, state persists

Scenario 2: Resize Edge Cases

1. Add large rectangle (200x150)
2. Resize from top edge → should grow/shrink vertically, X unchanged
3. Resize from bottom edge → should grow/shrink vertically, opposite anchor
4. Resize from left edge → should grow/shrink horizontally, right edge fixed
5. Resize from right edge → should grow/shrink horizontally, left edge fixed
6. Resize to minimum (20x20) → should enforce minimum
7. Try to resize beyond viewport → should constrain

Expected: No sliding, no distortion, predictable anchoring

Scenario 3: Rotation Precision

1. Add hexagon
2. Rotate without Shift → free rotation
3. Undo
4. Rotate with Shift held → should snap to 0°, 15°, 30°, 45°, etc.
5. Verify rotation in data display
6. Resize rotated element → should resize along rotated axes
7. Drag rotated element → should move normally

Expected: Rotation accurate, constraints work, interactions clean

Scenario 4: Connection Stress Test

1. Add 3 circles in a triangle layout
2. Connect circle A → B
3. Connect circle B → C
4. Connect circle C → A
5. Select circle A and move it → all connected lines follow
6. Resize circle B → connections update anchor points
7. Rotate circle C → connections adjust
8. Delete circle B → connections to/from B are deleted
9. Undo delete → circle B and connections restore

Expected: Connections always accurate, no orphaned lines

Scenario 5: Multi-Select Operations

1. Add 5 shapes in a grid
2. Select all (Ctrl+A)
3. Drag group → all move together
4. Align center horizontal → all align
5. Deselect
6. Select 3 specific elements
7. Duplicate selection → 3 new elements created
8. Delete selection → 3 elements removed
9. Undo → 3 elements restore

Expected: Multi-select works consistently across operations

Scenario 6: AI Generation Quality

1. Type: "draw a robot"
2. Click generate
3. Verify robot appears with body, head, arms, legs
4. Select robot parts
5. Verify all parts are interactive
6. Clear canvas
7. Type: "create a flowchart with 3 steps"
8. Verify flowchart appears with connected boxes
9. Verify connections work

Expected: AI generates valid, interactive compositions

Scenario 7: Undo/Redo Chain

1. Add circle (state 1)
2. Resize circle (state 2)
3. Rotate circle (state 3)
4. Add rectangle (state 4)
5. Connect circle to rectangle (state 5)
6. Undo 5 times → back to empty canvas
7. Redo 5 times → back to state 5
8. Undo 2 times → state 3
9. Add triangle (new state 4, history branch)
10. Verify old state 4-5 are lost

Expected: Undo/redo works correctly, branching handled

Scenario 8: Persistence Recovery

1. Create complex scene (5+ elements, 3+ connections)
2. Move, resize, rotate various elements
3. Note exact positions/sizes
4. Refresh page
5. Verify ALL element properties match exactly
6. Verify connections intact
7. Undo → verify undo history doesn't persist (or does, if implemented)

Expected: Full state recovery after refresh

🐛 Known Issues to Check

Issue 1: Resize Slide Bug

• Status: ✅ FIXED
• Test: Resize from all edges and corners
• Expected: No sliding, clean scaling

Issue 2: Event Propagation

• Status: ✅ FIXED
• Test: Click resize handle doesn't trigger drag
• Expected: Operations are mutually exclusive

Issue 3: Control Points Missing

• Status: ✅ FIXED
• Test: All demo shapes have control points
• Expected: All shapes can connect

Issue 4: setTimeout Usage

• Status: ✅ FIXED
• Test: Check code for setTimeout calls
• Expected: Event-driven architecture only

📊 Testing Methodology

Manual Testing (Current)

1. Open app: http://localhost:5701
2. Navigate to Universal Compositor Demo
3. Execute each test scenario
4. Document results in this file
5. Fix any issues found
6. Re-test

Automated Testing (Future)

• Unit tests for components
• Integration tests for interactions
• E2E tests for workflows
• Visual regression tests
• Performance benchmarks

🚦 Test Results

Test Status Legend

• ✅ Passed
• ❌ Failed
• ⚠️ Partial
• ⏳ Not tested yet
• 🔄 Re-test needed

Results Table

🎯 Success Criteria

All basics working when:

1. ✅ All 15 core interaction categories pass
2. ✅ All 8 test scenarios execute successfully
3. ✅ Zero linter errors
4. ✅ Zero runtime errors
5. ✅ Performance is smooth (no lag)
6. ✅ Visual feedback is clear
7. ✅ Persistence works reliably
8. ✅ Code is clean and maintainable

Current Progress: ~40% (4 of 10 core features verified)

📝 Testing Instructions

For User

1. Open: http://localhost:5701
2. Navigate to: Universal Compositor Demo
3. Test each scenario sequentially
4. Report any issues found

For Developer

1. Review code for potential issues
2. Check console for errors
3. Verify event flows
4. Test edge cases
5. Profile performance if needed

🔧 Issues Found During Testing

Document any issues discovered during verification

Issue Template

### Issue #N: [Title]
- **Category**: [Selection/Dragging/Resizing/etc.]
- **Severity**: [Critical/High/Medium/Low]
- **Description**: [What went wrong]
- **Steps to Reproduce**:
  1. ...
  2. ...
- **Expected**: [What should happen]
- **Actual**: [What actually happened]
- **Fix**: [Solution implemented or planned]
- **Status**: [Open/In Progress/Fixed/Verified]

📈 Next Steps

1. User Tests Canvas → Reports results
2. Fix Any Issues → Implement fixes
3. Re-verify → Confirm all basics work
4. Document → Update this file with results
5. Proceed → Move to JSON-first architecture (Phase A)

Status: 🟡 Verification In Progress Priority: 🔴 Critical - Must complete before advancing Owner: User + AI collaboration Timeline: Complete in current session