2f8d799a5f
- 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
64 lines
1.3 KiB
Markdown
64 lines
1.3 KiB
Markdown
---
|
|
title: useStrokeControls
|
|
description: 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
|
|
|
|
```ts
|
|
import { useStrokeControls } from '@open-pencil/vue'
|
|
|
|
const strokes = useStrokeControls()
|
|
```
|
|
|
|
## Basic example
|
|
|
|
```ts
|
|
const { alignOptions, sideOptions, currentAlign, currentSides, selectSide } = useStrokeControls()
|
|
```
|
|
|
|
## Practical examples
|
|
|
|
### Set stroke alignment
|
|
|
|
```ts
|
|
strokes.updateAlign('INSIDE', activeNode)
|
|
```
|
|
|
|
### Limit a stroke to one side
|
|
|
|
```ts
|
|
strokes.selectSide('TOP', activeNode)
|
|
```
|
|
|
|
### Edit stroke geometry
|
|
|
|
```ts
|
|
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](../components/property-list-root)
|