51 lines
1.1 KiB
Markdown
51 lines
1.1 KiB
Markdown
|
---
|
||
|
|
title: useEffectsControls
|
||
|
|
description: Helpers del panel de efectos para sombras, desenfoque, estado de expansión y flujos de arrastre/confirmación.
|
||
|
|
---
|
||
|
|
|
||
|
|
# useEffectsControls
|
||
|
|
|
||
|
|
`useEffectsControls()` es el composable de propiedades de efectos usado por los paneles de efectos.
|
||
|
|
|
||
|
|
Proporciona helpers para:
|
||
|
|
|
||
|
|
- efectos por defecto
|
||
|
|
- lógica de sombra vs desenfoque
|
||
|
|
- estado de elementos expandidos
|
||
|
|
- edición mediante arrastre con vista previa
|
||
|
|
- actualizaciones de confirmación al terminar
|
||
|
|
- cambios de tipo de efecto y color
|
||
|
|
|
||
|
|
## Uso
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import { useEffectsControls } from '@open-pencil/vue'
|
||
|
|
|
||
|
|
const effects = useEffectsControls()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Ejemplo básico
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const { effectOptions, createDefaultEffect, toggleExpand, scrubEffect, commitEffect } = useEffectsControls()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Ejemplos prácticos
|
||
|
|
|
||
|
|
### Añadir un efecto por defecto
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const effect = effects.createDefaultEffect()
|
||
|
|
```
|
||
|
|
|
||
|
|
### Previsualizar cambios con arrastre y luego confirmar
|
||
|
|
|
||
|
|
```ts
|
||
|
|
effects.scrubEffect(node, index, { radius: 12 })
|
||
|
|
effects.commitEffect(node, index, { radius: 12 })
|
||
|
|
```
|
||
|
|
|
||
|
|
## APIs relacionadas
|
||
|
|
|
||
|
|
- [PropertyListRoot](../components/property-list-root)
|