# Phase 6: Wall Projection Views

**Status:** :white_check_mark: Complete
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Implement 4 side projection views (North, South, East, West walls) showing wall elevation. Each projection shows the wall face with doors, windows, outlets, switches, and furniture against that wall at their correct positions and heights.

## Tasks

- [x] Task 1: Create `WallProjectionView` component — renders a single wall's elevation view using react-konva. Shows wall rectangle (width = wall length, height = wallHeight), floor line, ceiling line.
- [x] Task 2: Implement projection view layout — 4 projection views arranged below the 2D top-down view. Tabs or grid layout to switch between walls. Collapsible panel.
- [x] Task 3: Render doors in projection — show door opening in wall elevation (rectangle from floor, standard door height 2.1m). Door swing indicator.
- [x] Task 4: Render windows in projection — show window in wall elevation at correct elevation from floor. Window frame with glass indication.
- [x] Task 5: Render wall-mounted electrical items — outlets and switches at their correct height (elevationFromFloor). Use simplified IEC symbols oriented for wall view.
- [x] Task 6: Render wall-mounted furniture — shelves, wall cabinets displayed at correct height and position along wall.
- [x] Task 7: Implement wall-to-projection coordinate mapping — translate 2D top-down coordinates to projection view coordinates.
- [x] Task 8: Implement projection-to-2D sync — clicking an item in projection view highlights it in 2D view and vice versa.
- [x] Task 9: Add measurement annotations to projection views — heights of electrical items, window sill height, door height, distances between items.
- [x] Task 10: Add wall selection highlighting — when a wall is selected in 2D view, highlight the corresponding projection view.
- [x] Task 11: Implement projection view zoom/pan — independent zoom for each projection view.
- [x] Task 12: Render plinth (baseboard) — draw a strip at the base of each wall in projection view using room's `plinthHeight` and `plinthThickness`. Plinth should be interrupted at door openings.

## Files to Modify/Create
- `apps/client/src/components/editor/projection/WallProjectionView.tsx` — single wall elevation canvas
- `apps/client/src/components/editor/projection/ProjectionPanel.tsx` — panel containing 4 wall projections
- `apps/client/src/components/editor/projection/ProjectionDoor.tsx` — door in elevation view
- `apps/client/src/components/editor/projection/ProjectionWindow.tsx` — window in elevation view
- `apps/client/src/components/editor/projection/ProjectionElectrical.tsx` — electrical items in elevation
- `apps/client/src/components/editor/projection/ProjectionFurniture.tsx` — wall furniture in elevation
- `apps/client/src/components/editor/projection/ProjectionMeasurements.tsx` — height/distance annotations
- `apps/client/src/components/editor/utils/projectionMapping.ts` — 2D to projection coordinate conversion
- `apps/client/src/components/editor/RoomEditorLayout.tsx` — integrate projection panel (updated)

## Acceptance Criteria
- 4 wall projection views display correctly for rectangular rooms
- Doors and windows appear at correct positions and dimensions in projections
- Electrical items (outlets, switches) appear at correct wall positions and heights
- Wall-mounted furniture appears at correct positions
- Editing in projection view updates the 2D top-down view (bidirectional sync)
- Measurement annotations show heights and distances
- Wall selection syncs between 2D and projection views
- Each projection view has independent zoom/pan

## Notes
- Wall direction mapping: for rectangular rooms, walls map to N/S/E/W based on polygon edge order. For non-rectangular rooms, wall direction is assigned based on the dominant direction of each wall segment.
- Projection views are secondary to the 2D top-down view — they provide a different perspective but the 2D view is the primary editing surface
- Items NOT on a wall (ceiling lights, free-standing furniture) don't appear in projection views
- Elevation (height) data comes from `elevationFromFloor` field on electrical items and furniture height
- Default heights: outlets 0.3m, switches 1.2m, wall lights 2.0m

## Review Checklist
- [x] All tasks completed
- [x] Code follows project conventions
- [x] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Phase 8

### Key state available from Phase 6

- **Projection panel** is integrated into `RoomEditorLayout` below the 2D canvas in the `canvasArea` flex column.
- **`ProjectionPanel`** supports two layout modes: tabs (one wall at a time) and grid (2x2 showing up to 4 walls). Collapsible via header click.
- **`WallProjectionView`** is a self-contained Konva `<Stage>` with independent zoom (scroll) and pan (middle-click drag). It renders wall rect, floor/ceiling lines, plinth, openings, electrical, furniture, and measurements.
- **`projectionMapping.ts`** utility provides coordinate conversion (`projectionToPixel`, `projectionScale`) and data projection functions (`projectOpenings`, `projectElectricalItems`, `projectFurnitureItems`, `computePlinthSegments`).
- **Bidirectional sync**: clicking items in projection view calls `selectElement` from EditorContext, which updates `selectedIds` used by both 2D and projection views. When a wall-related item is selected in 2D, the projection panel auto-switches to that wall's tab.
- **Measurements**: `ProjectionMeasurements` renders dimension lines with arrows for wall width, wall height, opening widths/heights, window sill heights, and electrical item elevation from floor.

### For Phase 8 (Export)

- Each `WallProjectionView` uses its own Konva `<Stage>`, so `stage.toDataURL()` can be called on each to export projection PNGs independently.
- The projection panel renders inside the `canvasArea` div, so the main 2D stage ref is separate and unaffected.
- Wall labels use `wallDirectionLabel()` from `projectionMapping.ts` which returns "North Wall", "South Wall", etc.
