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')

Related APIs

• LayoutControlsRoot
• BindableValue
• usePosition
• useEditor