Danila Poyarkov 2f8d799a5f feat(editor): add stroke geometry controls

- Add mixed-selection cap, join, and miter-limit controls with one-step undo
- Apply node miter limits across CanvasKit stroke paths and vector outline caches
- Preserve imported and edited stroke geometry through Plugin API and .fig roundtrips

2026-07-17 19:01:42 +03:00

1.3 KiB

Raw Blame History

title	description
useStrokeControls	Stroke-panel state and actions for alignment, sides, caps, joins, and miter limits.

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.

PropertyListRoot

1.3 KiB Raw Blame History