SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/openspec/specs/auto-layout/spec.md

2.7 KiB
Raw Blame History

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