51 lines
987 B
Markdown
51 lines
987 B
Markdown
|
---
|
||
|
|
title: useEffectsControls
|
||
|
|
description: 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
|
||
|
|
|
||
|
|
```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 })
|
||
|
|
```
|
||
|
|
|
||
|
|
## Related APIs
|
||
|
|
|
||
|
|
- [PropertyListRoot](../components/property-list-root)
|