useStrokeControls

useStrokeControls() is the stroke-property composable used by stroke editing panels.

It provides:

• stroke align options
• side presets like all, top, bottom, left, right, custom
• default stroke data
• helpers for per-side border weights
• mixed-selection cap, join, and miter-limit state
• undo-batched cap and join updates
• preview and commit actions for miter-limit fields

Usage

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

const strokes = useStrokeControls()

Basic example

const { alignOptions, sideOptions, currentAlign, currentSides, selectSide } = useStrokeControls()

Practical examples

Set stroke alignment

strokes.updateAlign('INSIDE', activeNode)

Limit a stroke to one side

strokes.selectSide('TOP', activeNode)

Edit stroke geometry

strokes.setCap('ROUND')
strokes.setJoin('BEVEL')

strokes.updateMiterLimit(8)
strokes.commitMiterLimit(8)

advancedActive is true only when every selected node has at least one stroke. cap, join, and miterLimit return the shared value or MIXED for a mixed selection.

Related APIs

• PropertyListRoot