- AZ-471 CanvasEditor draw + 8-handle resize PASS (FT-P-39 fast + e2e + FT-P-40 8 sub-tests). Three drifts pinned via it.fails(): Ctrl+click multi-select (FT-P-41), Ctrl+wheel zoom-around-cursor (FT-P-42), Ctrl+drag empty-canvas pan (FT-P-43) — all rooted in handleMouseDown's early Ctrl-gate and handleWheel's pan-not-adjusted bug. - AZ-473 PhotoMode 3 ACs all PASS in fast + e2e (FT-P-48 switch filter, FT-P-49 auto-select, FT-P-50 yoloId wire across modes P=0/20/40 — outbound classNum == classId + photoModeOffset). - AZ-478 fast 7 + e2e 2: AC-1 user-visible offline indicator, AC-2 tainted-canvas fallback, AC-3 SSE disconnect banner — all drift today (it.fails fast + test.fail e2e + control PASS for each). Service-worker negative check passes. - AZ-479 AC-1 (bundle <= 2 MB gzipped) promoted from on-demand perf script to per-commit static profile via new STC-PERF01 row + static_check_bundle_size in run-tests.sh. AC-2 (mission-planner exclusion) already covered by STC-S5. AC-3 FCP /flights <= 3 s median (chromium suite-e2e) and AC-4 30-min annotation soak (RUN_LONG_RUNNING=1, chromium) scaffolded as e2e tests. Code review: PASS (0 findings). Fast: 25/25 files, 150 passed / 13 skipped. Static: 25/25 PASS (incl. new STC-PERF01). Co-authored-by: Cursor <cursoragent@cursor.com>
3.3 KiB
Test — Canvas Editor (Bounding-Box + Multi-Select + Zoom + Pan)
Task: AZ-471_test_canvas_bbox Name: CanvasEditor manual draw + 8-handle resize + Ctrl+click multi-select + Ctrl+wheel zoom + Ctrl+drag pan Description: Implement the 5 blackbox tests covering the core canvas interactions: draw bbox, resize via 8 handles, multi-select via Ctrl+click, zoom-around-cursor via Ctrl+wheel, pan via Ctrl+drag. Complexity: 5 points Dependencies: AZ-456_test_infrastructure Component: 06_annotations (CanvasEditor) (Blackbox Tests) Tracker: AZ-471 Epic: AZ-455
Problem
The canvas editor is the SPA's most-interactive surface; canvas-pixel coordinates introduce floating-point + DPR gotchas that have caused subtle off-by-pixel regressions. The 5 scenarios pin geometry, modifier-key semantics, and viewport transformation.
Outcome
- 5 scenarios pass with deterministic numeric fixtures (no
getBoundingClientRectflakiness across viewport sizes).
Scope
Included
| Scenario | Profile | Source file |
|---|---|---|
FT-P-39 — manual bounding-box draw on <CanvasEditor> |
fast + e2e | blackbox-tests.md |
| FT-P-40 — 8-handle bbox resize | fast | blackbox-tests.md |
| FT-P-41 — Ctrl+click multi-select on canvas | fast | blackbox-tests.md |
| FT-P-42 — Ctrl+wheel zoom-around-cursor | fast | blackbox-tests.md |
| FT-P-43 — Ctrl+drag pan on empty canvas | fast | blackbox-tests.md |
Excluded
- Tile-split interaction (covered in 19_test_tile_split_zoom).
- Annotation overlay membership (covered in 07_test_overlay_membership).
- Save-on-change (covered in 05_test_annotations_endpoint).
Acceptance Criteria
AC-1: Manual draw geometry
Draw a bbox at (x1,y1)→(x2,y2); resulting annotation carries the canonical canvas-coordinate quad. Floating-point compare within ±0.5 px tolerance.
AC-2: 8-handle resize Drag each of the 8 handles independently; assert resulting bbox geometry per handle. Each handle's anchor (opposite corner / edge midpoint) is invariant during the drag.
AC-3: Ctrl+click multi-select Ctrl+click on a second bbox adds it to the selection; selection set contains both bboxes (asserted via DOM rendering — selection ring style).
AC-4: Zoom-around-cursor
Ctrl+wheel at cursor (cx, cy): the canvas pixel under (cx, cy) BEFORE the wheel equals the canvas pixel under (cx, cy) AFTER (within ±0.5 px).
AC-5: Empty-canvas pan
Ctrl+drag on an empty canvas region: viewport offset shifts by (dx, dy); bbox positions in canvas coords are invariant.
System Under Test Boundary
- System under test:
<CanvasEditor>+ its pointer/mouse handlers + the canvas-coordinate ↔ viewport transform. - Allowed stubs: MSW for annotation load.
- Disallowed: stubbing the canvas component or asserting on React state. Pointer events are dispatched via RTL
user-event(or PlaywrightdispatchEventfor e2e). - Expected observables per
results_report.mdrows 73-78 (Group 16).
Constraints
- Use fixed-size canvas (640×480) so coordinate math is deterministic.
Risks & Mitigation
Risk 1 — DPR + retina display flakiness
- Risk: Test runner on a retina display reports different physical pixels than the e2e Docker container.
- Mitigation: Playwright config forces
deviceScaleFactor: 1; Vitest+jsdom defaults to DPR 1.