useEffectsControls
useEffectsControls() is the effects-property composable used by effects panels.
It provides helpers for:
- default effects
- shadow vs blur logic
- expanded item state
- scrub-preview editing
- commit-on-finish updates
- effect type and color changes
Usage
ts
import { useEffectsControls } from '@open-pencil/vue'
const effects = useEffectsControls()Basic example
ts
const { effectOptions, createDefaultEffect, toggleExpand, scrubEffect, commitEffect } = useEffectsControls()Practical examples
Add a default effect
ts
const effect = effects.createDefaultEffect()Preview scrub changes, then commit
ts
effects.scrubEffect(node, index, { radius: 12 })
effects.commitEffect(node, index, { radius: 12 })