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: 0Brak komentarzy. Rozpocznij dyskusję.