c96f87bf9b
- Model imported fill, stroke, text, effect, and grid style definitions and references - Add SDK and app selectors with mixed-selection batching, detach-on-edit, and undo restoration - Preserve style definitions through .fig export and extracted subgraphs - Document the shared-style composable and update compatibility coverage
42 lines
1.5 KiB
Markdown
42 lines
1.5 KiB
Markdown
---
|
|
title: useSharedStyleBinding
|
|
description: Apply and detach local fill, stroke, text, effect, and grid styles.
|
|
---
|
|
|
|
# useSharedStyleBinding
|
|
|
|
`useSharedStyleBinding(kind)` exposes the selected nodes' shared-style reference, compatible local
|
|
style definitions, and undo-aware bind/detach actions.
|
|
|
|
```ts
|
|
import { useSharedStyleBinding } from '@open-pencil/vue'
|
|
|
|
const fillStyle = useSharedStyleBinding('fill')
|
|
|
|
fillStyle.bind('1:120')
|
|
fillStyle.unbind()
|
|
```
|
|
|
|
Supported kinds are `fill`, `stroke`, `text`, `effect`, and `grid`.
|
|
|
|
- `active` requires every selected node to support the requested style domain.
|
|
- `styleId` is the shared ID, `null`, or `MIXED`.
|
|
- `styles` lists compatible local definitions imported with the document.
|
|
- `bind(id)` applies supported style properties and the reference in one undo step.
|
|
- `unbind()` keeps the resolved properties and removes only the reference.
|
|
- Multi-selection changes are grouped into one undo entry.
|
|
|
|
Manual edits to fills, strokes, supported text properties, effects, or layout grids automatically
|
|
detach the matching style reference. Other style domains remain bound.
|
|
|
|
OpenPencil currently consumes styles already present in a document. Creating, renaming, publishing,
|
|
and synchronizing style libraries is outside this composable's scope.
|
|
|
|
## Related APIs
|
|
|
|
- [useFillControls](./use-fill-controls)
|
|
- [useStrokeControls](./use-stroke-controls)
|
|
- [useTypography](./use-typography)
|
|
- [useEffectsControls](./use-effects-controls)
|
|
- [Property Panels guide](../../guides/property-panels)
|