useLayout

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

It exposes state and actions for:

• flex vs grid mode
• width/height sizing
• padding
• alignment
• grid template track editing

Usage

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

const layout = useLayout()

Basic example

const {
  isGrid,
  isFlex,
  widthSizing,
  heightSizing,
  setWidthSizing,
  setHeightSizing,
} = useLayout()

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

• usePosition
• useEditor