openpencil/packages/docs/programmable/sdk/api/composables/use-effects-controls.md

title	description
useEffectsControls	Effects-panel helpers for shadows, blurs, expansion state, and scrub/commit flows.

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

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

const effects = useEffectsControls()

Basic example

const { effectOptions, createDefaultEffect, toggleExpand, scrubEffect, commitEffect } = useEffectsControls()

Practical examples

Add a default effect

const effect = effects.createDefaultEffect()

Preview scrub changes, then commit

effects.scrubEffect(node, index, { radius: 12 })
effects.commitEffect(node, index, { radius: 12 })

Related APIs

• PropertyListRoot