Step 9 - alignment

1 min czytania

Add styling and layout aids.

Typography (context bar when a note or text element is selected):

  • Font size presets [14, 18, 24, 32, 48, 64]; bold, italic; align left/center/right. One setTextStyle(patch) applies to the selection.
  • Notes keep auto-fitting their label via fitNoteFontSize regardless of the preset (the preset sets the ceiling).

Board styling (board-level, will sync to everyone in Phase 3):

  • Background color presets including a dark option, plus grid mode dots/lines/plain, in a small board-settings popover.

Snapping:

  • Snap-to-grid toggle, grid step 20 world units, applied to move and resize deltas (snapVal helper).

Alignment commands on multi-selection (floating bar):

  • Align left / horizontal-center / right / top / vertical-middle / bottom.
  • Distribute horizontally / vertically (equal gaps between bounds).
  • Arrange as grid: tidy the selection into a reading-order grid with fixed gaps.
  • Arrange by color: cluster selected sticky notes into columns by their fill color - a no-AI affinity-mapping tool for workshops.

All of these are pure functions over boundsOf() in the util module, with vitest specs for distribute and arrange-as-grid.

Acceptance: styling applies live, snapping feels correct at every zoom, alignment/distribute/arrange produce stable, undoable single-step layouts.

Dyskusja

Komentarze: 0

Brak komentarzy. Rozpocznij dyskusję.