# S02: Design Canvas Core (View 2) — UAT

**Milestone:** M002
**Written:** 2026-03-26T05:44:01.052Z

## UAT: Design Canvas Core (View 2)

### Preconditions
- Engine API running at localhost:8000
- App dev server running (`cd app && npm run dev`)
- A raster image (PNG/JPG) available for upload

---

### Test 1: View 1 → View 2 Transition
1. Upload a raster image in View 1
2. Wait for trace preview to render
3. Click "Use This" button
4. **Expected:** Artboard Setup modal appears with shape picker, dimension inputs, and unit toggle

### Test 2: Artboard Setup — Shape Selection
1. In Artboard Setup modal, click each shape option: rect, square, circle, oval, shield, pennant
2. **Expected:** Shape preview updates for each selection. Square and circle auto-set equal width/height. Width/height inputs update with preset dimensions.
3. Toggle units between inches and mm
4. **Expected:** Dimension values convert correctly (e.g., 3in → 76.2mm)
5. Click "Create Artboard"
6. **Expected:** Modal closes, Konva canvas renders with artboard background matching chosen shape

### Test 3: Shape Creation Tools
1. Click Rectangle tool in toolbar
2. Click on the canvas
3. **Expected:** A rectangle appears at the click position with default dimensions, black stroke, no fill
4. Repeat with Circle tool and Ellipse tool
5. **Expected:** Each shape appears correctly with default styling
6. Click Line tool and click on canvas
7. **Expected:** A horizontal line appears at the click position

### Test 4: Object Selection & Transform
1. Click on a shape on the canvas
2. **Expected:** Selection handles (Transformer) appear around the shape. ObjectPanel highlights the selected row.
3. Drag the shape to a new position
4. **Expected:** Shape moves with cursor. Position updates in state.
5. Drag a transform handle to resize
6. **Expected:** Shape resizes. Width/height update (scaleX/scaleY reset to 1, dimensions multiplied).
7. Click empty canvas area
8. **Expected:** Shape deselected. Transformer hidden. ObjectPanel row unhighlighted.

### Test 5: Multi-Select with Rubber Band
1. Create 3+ shapes on canvas
2. Click and drag on empty canvas area to draw a rubber-band rectangle over multiple shapes
3. **Expected:** All shapes intersecting the rectangle are selected. Transformer wraps all selected nodes. Multiple rows highlighted in ObjectPanel.
4. Shift-click an unselected shape
5. **Expected:** Shape added to selection without deselecting others.

### Test 6: ObjectPanel — Layer Management
1. Create 3 shapes (they appear as layers in ObjectPanel in reverse z-order — newest on top)
2. **Expected:** ObjectPanel lists all 3 shapes with type icons and default names
3. Double-click a shape name in ObjectPanel
4. **Expected:** Name becomes editable. Type new name, press Enter — name persists.
5. Click the eye icon on a shape row
6. **Expected:** Shape becomes invisible on canvas. Eye icon toggles to "hidden" state.
7. Click the lock icon on a shape row
8. **Expected:** Shape can no longer be dragged or resized on canvas.

### Test 7: Alignment Tools
1. Select 2+ shapes
2. Click "Align Left" in AlignmentBar
3. **Expected:** All selected shapes move so their left edges align with the leftmost shape's left edge
4. Click "Distribute Horizontally" (requires 3+ shapes selected)
5. **Expected:** Shapes evenly space horizontally
6. Select 1 shape, click "Center on Artboard"
7. **Expected:** Shape centers within the artboard bounds

### Test 8: Shape Properties Panel
1. Select a single rectangle
2. **Expected:** ShapeProperties panel appears showing stroke color, stroke weight, fill color, width, height, opacity
3. Change stroke color using color input
4. **Expected:** Shape stroke updates immediately on canvas
5. Change fill color and enable fill toggle
6. **Expected:** Shape fill updates on canvas
7. Select a line object
8. **Expected:** ShapeProperties shows line style dropdown (solid, dashed, dotted). Changing style updates the line's dash array.

### Test 9: Undo/Redo
1. Create a shape, move it, change its color (3 mutations)
2. Press Ctrl+Z three times
3. **Expected:** Each undo reverses one mutation in order: color reverts → position reverts → shape removed
4. Press Ctrl+Shift+Z (or Ctrl+Y) twice
5. **Expected:** Shape reappears, position restored
6. Click undo/redo buttons in CanvasToolbar
7. **Expected:** Same behavior as keyboard shortcuts. Buttons disabled when respective stack is empty.

### Test 10: Keyboard Shortcuts
1. Select a shape, press Delete (or Backspace)
2. **Expected:** Shape removed from canvas and ObjectPanel
3. Create multiple shapes, press Ctrl+A
4. **Expected:** All shapes selected
5. Press Escape
6. **Expected:** All shapes deselected
7. Focus a text input (e.g., shape name rename in ObjectPanel), press Delete
8. **Expected:** Shortcut does NOT fire — normal text editing behavior occurs

### Test 11: SVG Import from View 1
1. Upload an image in View 1, complete tracing, click "Use This"
2. Set up artboard, confirm
3. **Expected:** Traced SVG appears as an image object on the canvas, auto-scaled to fit within artboard bounds. Object appears in ObjectPanel as an image type.

### Test 12: Canvas Zoom & Grid
1. Click zoom-in button in CanvasToolbar
2. **Expected:** Canvas content appears larger
3. Click zoom-out button
4. **Expected:** Canvas content appears smaller
5. Click "Fit" button
6. **Expected:** Artboard fits within visible canvas area
7. Toggle grid button
8. **Expected:** Grid overlay toggles on/off on canvas

### Edge Cases
- **Empty undo:** Pressing Ctrl+Z with no history should do nothing (no crash)
- **Delete with nothing selected:** Pressing Delete with no selection should do nothing
- **Rapid undo/redo:** Rapidly alternating Ctrl+Z and Ctrl+Shift+Z should not corrupt state
- **Window resize:** Canvas should resize responsively via ResizeObserver without layout breaks
