52 lines
2.7 KiB
Markdown
52 lines
2.7 KiB
Markdown
# auto-layout Specification
|
|
|
|
## Purpose
|
|
Flexbox-based auto-layout using Yoga WASM. Frames with auto-layout have children positioned automatically with configurable direction, gap, padding, justify, align, and child sizing.
|
|
## Requirements
|
|
### Requirement: Yoga WASM layout engine
|
|
Auto-layout SHALL use Yoga WASM for flexbox-based layout computation. Frames with auto-layout SHALL have their children positioned by Yoga.
|
|
|
|
#### Scenario: Horizontal auto-layout
|
|
- **WHEN** a frame has stackMode HORIZONTAL with gap 16 and three children
|
|
- **THEN** the children are laid out horizontally with 16px between them
|
|
|
|
### Requirement: Layout properties
|
|
Auto-layout frames SHALL support: direction (horizontal/vertical/wrap), gap, padding (uniform and per-side), justify (start/center/end/space-between), align (start/center/end/stretch), and child sizing (fixed/fill/hug).
|
|
|
|
#### Scenario: Vertical layout with padding
|
|
- **WHEN** a frame has stackMode VERTICAL, padding 20, and two children
|
|
- **THEN** the children are stacked vertically with 20px padding on all sides
|
|
|
|
### Requirement: Shift+A toggle
|
|
Shift+A SHALL toggle auto-layout on the selected frame. If nodes are selected without a parent frame, Shift+A SHALL wrap them in a new auto-layout frame.
|
|
|
|
#### Scenario: Toggle auto-layout on frame
|
|
- **WHEN** user selects a frame and presses Shift+A
|
|
- **THEN** auto-layout is enabled on the frame with default settings
|
|
|
|
#### Scenario: Wrap selection in auto-layout
|
|
- **WHEN** user selects three standalone rectangles and presses Shift+A
|
|
- **THEN** the rectangles are wrapped in a new frame with auto-layout enabled
|
|
|
|
### Requirement: Drag reordering
|
|
Within an auto-layout frame, dragging a child SHALL reorder it among siblings with a visual insertion indicator.
|
|
|
|
#### Scenario: Reorder by drag
|
|
- **WHEN** user drags the second child past the third child in an auto-layout frame
|
|
- **THEN** the second child moves to position 3 with an insertion line indicating the drop position
|
|
|
|
### Requirement: Sort by position on wrap
|
|
When wrapping selected nodes in auto-layout, nodes SHALL be sorted by their visual position (left-to-right for horizontal, top-to-bottom for vertical).
|
|
|
|
#### Scenario: Wrap preserves visual order
|
|
- **WHEN** three scattered nodes are wrapped in horizontal auto-layout
|
|
- **THEN** they are ordered left-to-right based on their X position
|
|
|
|
### Requirement: Auto-layout properties panel
|
|
The properties panel SHALL show auto-layout controls (direction, gap, padding, justify, align, sizing) when an auto-layout frame is selected.
|
|
|
|
#### Scenario: Properties panel for auto-layout
|
|
- **WHEN** user selects a frame with auto-layout enabled
|
|
- **THEN** the properties panel shows the Layout section with editable direction, gap, padding, justify, and align controls
|
|
|