web-cad/phase3-task-spec.md

# Phase 3: Drawing Tools — React Wiring & State Management

## Goal
Wire Phase 1 canvas/interaction engines to React state so drawing tools actually create, render, and manage elements. Implement undo/redo, command-line shortcuts, and drawing flow improvements.

## Requirements Covered
- F-CAD-01: Zeichnen von Grundelementen (Linie, Kreis, Bogen, Rechteck, Polygon, Polylinie)
- F-CAD-03: Bemaßung
- F-CAD-05: Command Line (L, C, PL, R, A, T, DIM shortcuts)
- F-CAD-09: Undo/Redo mit History
- F-CAD-11: Text

## Current State
- `src/interaction/index.ts` (591 lines): InteractionEngine with drawing logic for all types, callbacks (onElementCreated, onElementsDeleted, onToolStateChanged, onCursorMoved, onCommandTrigger)
- `src/canvas/RenderEngine.ts` (588 lines): Renders all element types
- `src/components/CanvasArea.tsx` (103 lines): Creates engine instances in useEffect but does NOT wire callbacks to React state
- `src/App.tsx` (223 lines): Has mock state but no element management, no engine ref, no undo/redo

## Tasks

### Task 1: Refactor CanvasArea to expose engine instances
File: `src/components/CanvasArea.tsx`

Current: engines created in useEffect, no external access.

Required:
- Use `useRef` to hold engine instances (InteractionEngine, RenderEngine, ZoomPanController, etc.)
- Accept new props: `onElementCreated`, `onElementsDeleted`, `onCursorMoved`, `onToolStateChanged`, `onToolChange` (tool from App → engine), `elements` (element array → engine.setElements), `snapEnabled`, `orthoEnabled`, `gridEnabled` (from App → engine state)
- In useEffect: create engines, wire all callbacks to props, call `interaction.setCallbacks({...})`
- Add a separate useEffect for `elements` changes → `interaction.setElements(elements)` + `spatialIndex.bulkInsert(elements)` + `renderEngine.render()`
- Add a separate useEffect for `snapEnabled/orthoEnabled/gridEnabled` → update engine state + renderEngine options
- Add a separate useEffect for `activeTool` → `interaction.setTool(tool)`
- Expose zoomPan via ref callback prop `onZoomPanReady` so App can call zoomFit
- Add `onZoomIn`, `onZoomOut`, `onZoomFit` to actually call zoomPan methods (not just log)
- Add double-click handler: on dblclick, if drawing polyline/polygon → call confirmDraw via interaction

New CanvasAreaProps (add to `src/types/ui.types.ts`):
```typescript
export interface CanvasAreaProps {
  cursorPos: CursorPos;
  viewMode: ViewMode;
  onViewChange: (mode: ViewMode) => void;
  gridEnabled: boolean;
  orthoEnabled: boolean;
  snapEnabled: boolean;
  activeTool: string;
  elements: CADElement[];
  onElementCreated: (el: CADElement) => void;
  onElementsDeleted: (ids: string[]) => void;
  onCursorMoved: (x: number, y: number) => void;
  onToolStateChanged: (state: ToolState) => void;
  onToggleGrid: () => void;
  onToggleOrtho: () => void;
  onToggleSnap: () => void;
  onZoomIn: () => void;
  onZoomOut: () => void;
  onZoomFit: () => void;
}
```

### Task 2: Implement undo/redo stack in App.tsx
File: `src/App.tsx`

Required:
- Add `elements` state: `useState<CADElement[]>([])`
- Add `undoStack` and `redoStack` as `useState<CADElement[][]>`
- `handleElementCreated`: push current elements to undoStack, add new element, clear redoStack
- `handleElementsDeleted`: push current elements to undoStack, remove deleted, clear redoStack
- `handleUndo`: if undoStack not empty, push current to redoStack, pop undoStack → set elements
- `handleRedo`: if redoStack not empty, push current to undoStack, pop redoStack → set elements
- Pass `elements` to CanvasArea
- Pass `onElementCreated`, `onElementsDeleted` to CanvasArea
- Wire `onCursorMoved` to update `cursorPos` state
- Wire `onToolStateChanged` to update any relevant UI state

### Task 3: Wire tool selection from LeftSidebar to CanvasArea
File: `src/App.tsx`

Required:
- `activeTool` state already exists in App.tsx
- Pass `activeTool` to CanvasArea as prop
- CanvasArea useEffect watches `activeTool` → calls `interaction.setTool(tool as ToolType)`
- LeftSidebar `onToolChange` already updates `activeTool` in App

### Task 4: Command line shortcuts (F-CAD-05)
File: `src/App.tsx`

Required:
- In `handleCommand(cmd)`, parse command and map to tool:
  - `L` or `LINE` → setTool('line')
  - `C` or `CIRCLE` → setTool('circle')
  - `A` or `ARC` → setTool('arc')
  - `R` or `RECT` or `RECTANGLE` → setTool('rect')
  - `PL` or `POLYLINE` → setTool('polyline')
  - `POL` or `POLYGON` → setTool('polygon')
  - `T` or `TEXT` → setTool('text')
  - `DIM` or `DIMENSION` → setTool('dimension')
  - `V` or `SELECT` → setTool('select')
  - `P` or `PAN` → setTool('pan')
  - `M` or `MOVE` → setTool('move')
  - `CO` or `COPY` → setTool('copy')
  - `RO` or `ROTATE` → setTool('rotate')
  - `SC` or `SCALE` → setTool('scale')
  - `MI` or `MIRROR` → setTool('mirror')
  - `DEL` or `ERASE` → setTool('delete')
  - `UNDO` or `U` → handleUndo()
  - `REDO` → handleRedo()
- Add command to history with prefix '›'
- Add response to history with prefix '·' (e.g. 'Linie-Werkzeug aktiv · Klicken zum Starten')

### Task 5: Drawing flow improvements
File: `src/interaction/index.ts`

Required:
- **Polyline/Polygon**: Add `handleDoubleClick` method — if activeTool is polyline/polygon and phase is drawing, call confirmDraw()
- Wire dblclick event in `attach()`: `this.addListener('dblclick', this.onDoubleClick.bind(this))`
- **Arc**: Improve 3-point arc — first click = center, second click = start point (sets radius + startAngle), third click = end point (sets endAngle). Update handleDrawDown to handle multi-point arc.
- **Text**: After placing text element, trigger an inline edit prompt. For now, use a simple `prompt()` dialog or add `onTextEdit` callback.

### Task 6: Grid/Snap/Ortho toggle wiring
File: `src/components/CanvasArea.tsx`

Required:
- When `gridEnabled` prop changes: `renderEngine.setOptions({ showGrid: gridEnabled })` + re-render
- When `snapEnabled` prop changes: `interaction.state.snapEnabled = snapEnabled` + `renderEngine.setOptions({ showSnapPoints: snapEnabled })` + re-render
- When `orthoEnabled` prop changes: `interaction.state.ortho = orthoEnabled` + `renderEngine.setOptions({ showOrtho: orthoEnabled })` + re-render

## Constraints
- TypeScript functional components, no inline styles (except where mockup uses style)
- No styled-components, no Tailwind
- `npx tsc --noEmit` must pass with 0 errors
- `npx vite build` must succeed
- Minimal changes — extend existing files, don't rewrite
- Keep all existing CSS class names
- Import ToolState type from interaction/index.ts where needed

## File Summary
1. `src/types/ui.types.ts` — update CanvasAreaProps
2. `src/components/CanvasArea.tsx` — expose engines, wire callbacks, add useEffects
3. `src/App.tsx` — element state, undo/redo, command shortcuts, wire all callbacks
4. `src/interaction/index.ts` — double-click handler, arc 3-point, text edit callback

## Test Criteria
1. `npx tsc --noEmit` — 0 errors
2. `npx vite build` — success
3. Drawing a line: select Line tool → click start → move mouse → Enter → element appears
4. Drawing a rect: select Rect tool → click corner → move mouse → Enter → element appears
5. Drawing a circle: select Circle tool → click center → move mouse → Enter → element appears
6. Polyline: select Polyline → click multiple points → double-click → element appears
7. Command line: type 'L' → line tool activates
8. Undo/Redo: draw element → Ctrl+Z → element disappears → Ctrl+Y → element reappears
9. Grid toggle: click grid button → grid appears/disappears
10. Snap toggle: click snap button → snap points appear/disappear on hover