Canvas geometry and selection

Canvas Geometry & Multi-Selection

Use this skill when building freeform or grid-based spatial editors, page/email layout canvases, diagram tools, or multi-element selection and alignment interactions.

Coordinate Spaces & Camera Transforms

1. Strictly Separate World Space from Screen/Viewport Space:
   • Store all element geometries (x, y, width, height, rotation) in canonical World Space coordinates inside the document model.
   • Keep camera state (panX, panY, zoom) in ephemeral View State ($\text{zoom} \in [\text{minZoom}, \text{maxZoom}]$): $$x_{\text{screen}} = x_{\text{world}} \cdot \text{zoom} + \text{panX}, \qquad x_{\text{world}} = \frac{x_{\text{screen}} - \text{panX}}{\text{zoom}}$$
2. Anchor Zoom to Cursor / Pinch Center:
   • When zooming at screen point $(s_x, s_y)$ from $z_1$ to $z_2$, update $(\text{panX}, \text{panY})$ so the world coordinate under $(s_x, s_y)$ remains stationary on screen: $$\text{panX}' = s_x - \left(\frac{s_x - \text{panX}}{z_1}\right) \cdot z_2$$

Multi-Selection, Bounding Boxes & Group Transforms

• Selection Set & Marquee Selection:
  • Support clicking, Shift+Click toggle, marquee rubber-band box selection (intersecting or containing element axis-aligned bounding boxes), and Cmd/Ctrl+A.
• Composite Bounding Box & Proportional Resize:
  • Compute the group AABB $(\min X, \min Y, \max X, \max Y)$ across all selected elements.
  • During a group move, resize, or rotation, record each element's initial geometry at pointerdown and compute transforms from the initial snapshot + total pointer delta (never accumulate incremental floating-point deltas frame-by-frame, which causes drift and distortion).
  • Enforce minimum width/height constraints and aspect-ratio locks (Shift) cleanly.

Snapping, Alignment Guides & Z-Index Ordering

• Grid & Object Snapping:
  • Snap active edges and centerlines (left, centerX, right, top, centerY, bottom) against nearby unselected elements or grid intervals within a screen-consistent threshold ($\approx 5\text{ px} / \text{zoom}$ in world units), rendering ephemeral alignment guides during the gesture.
• Distribution, Alignment & Layering Commands:
  • Provide deterministic commands for align left/center/right/top/middle/bottom, distribute horizontally/vertically, and z-order (Bring to Front, Bring Forward, Send Backward, Send to Back) as single undoable transactions.

Checklist

• Are element coordinates stored in canonical world space while zoom and pan stay in view state?
• Are drag and resize transforms computed from the initial pointerdown snapshot rather than frame-by-frame delta accumulation?
• Does snapping threshold scale with zoom ($\text{threshold}{\text{world}} = \text{threshold}{\text{px}} / \text{zoom}$)?
• Can selected elements be moved, aligned, and layered via keyboard nudges (Arrow / Shift+Arrow) as well as pointer gestures?