Danila Poyarkov fcdf7f1d4c feat(app): migrate layout size controls

- Replace duplicated width and height binding branches with shared semantic fields

- Switch edited Hug and Fill dimensions to Fixed in one reversible transaction

- Add typed LayoutControls actions, documentation, and visual coverage

2026-07-13 15:34:25 +03:00

2 KiB

Raw Blame History

title	description
useLayout	Work with auto-layout, sizing, padding, alignment, and grid tracks.

useLayout

useLayout() is the main control composable for layout-related panels.

It exposes state and actions for:

flex vs grid mode
width/height sizing and editable derived dimensions
minimum and maximum size limits
padding
alignment
grid template track editing

Usage

import { useLayout } from '@open-pencil/vue'

const layout = useLayout()

Axis sizing

const {
  widthSizing,
  heightSizing,
  setAxisSizing,
  updateAxisSize,
  commitAxisSize,
} = useLayout()

setAxisSizing('width', 'HUG')
setAxisSizing('height', 'FILL')

Connect updateAxisSize() and commitAxisSize() to a numeric field. Editing a Hug or Fill value switches only that axis to Fixed on the first actual mutation:

<NumberFieldRoot
  :model-value="layout.node.value?.width ?? 0"
  @update:model-value="layout.updateAxisSize('width', $event)"
  @commit="(value, previous) => layout.commitAxisSize('width', value, previous)"
/>

For one-step commit and Escape rollback across a sizing-mode change, variable detachment, and the numeric value, compose the NumberField with BindableValue using a provider that implements interaction batches. Merely focusing the field does not switch its sizing mode.

Size limits

layout.addSizeLimit('minWidth')
layout.setSizeLimitToCurrent('minWidth')
layout.removeSizeLimit('minWidth')

Practical examples

Toggle between uniform and individual padding UI

layout.toggleIndividualPadding()

Update grid tracks

layout.updateGridTrack('gridTemplateColumns', 0, { sizing: 'FIXED', value: 240 })
layout.addTrack('gridTemplateRows')

Change alignment

layout.setAlignment('CENTER', 'MAX')

2 KiB Raw Blame History