Development docs
Development docsMay include features newer than the installer.

Canvas precision workshop

Source: examples/canvas-precision.json. The portable package needs the companion Designer build with Select type…, Match size… and the numeric grid control. No gateway tags, external database, image assets or scripts are required.

The Designer edits authored coordinates. Runtime bindings can resolve different coordinates in Preview and the operator application; arranging a component does not rewrite its bindings.

  1. Import the workshop as a new project and open Precision desk. In the arrangement toolbar choose Select type… → Rectangle. The three cards become selected; the captions remain unselected.
  2. Choose Match size… → Same width. Each card becomes 180 pixels wide, retaining its own origin and height. The reference is the first selected object in layer order, regardless of click order. One Undo restores all three original widths.
  3. Repeat with Same height, then Same width and height. Undo each command. Matching sizes does not round to the current grid.
  4. Choose Select type… → Ellipse. The saved two-circle group and independent circle are selected. The group is one arrangement object with bounds 150 × 50. Matching both dimensions makes the independent circle 150 × 50. Undo once.
  5. Select one rectangle, focus the canvas, and press Ctrl+Shift+A (Command+Shift+A on macOS) to select its type. Saved groups always include every member, even if the members have different component types. The shortcut uses the first selected control's type.
  6. Enter 12 in the grid field and drag a card. The top-left selection anchor follows that grid; canvas edges take precedence. Boundary guides and the X/Y/W/H readout describe the moving selection. Arrow keys nudge one pixel; Shift+Arrow nudges ten pixels independently of the grid. Dragging is one Undo transaction.
  7. Enter 0 to disable grid snapping. Values must be whole pixels from 0 through 128; invalid input is rejected. This toolbar choice is a session override, not a runtime layout setting.

A matching operation that cannot fit inside the canvas or would shrink an affected control below 40 × 28 pixels is rejected as a whole. Saved groups scale their child positions and dimensions together on the requested axes. The reference object and unselected controls remain unchanged.

Save and publish explicitly to update an operator application. This increment covers fixed-coordinate authoring; responsive containers and snapping to other objects remain separate roadmap work.

Verification: node apps/web/check-canvas-model.mjs covers type selection, group behavior, size matching, geometry/binding preservation, bounds, validation and one-step history restoration.