openpencil/packages/docs/es/programmable/sdk/api/composables/use-selection-capabilities.md

62 lines
1.4 KiB
Markdown
Raw Normal View History

---
title: useSelectionCapabilities
description: Deriva booleanos amigables para comandos en UI y acciones impulsadas por la selección.
---
# useSelectionCapabilities
`useSelectionCapabilities()` expone booleanos reactivos sobre si las acciones habituales del editor están permitidas en el momento actual.
Úsalo cuando construyas:
- menús
- barras de herramientas
- atajos de teclado
- botones de acción
- paneles contextuales
## Uso
```ts
import { useSelectionCapabilities } from '@open-pencil/vue'
const caps = useSelectionCapabilities()
```
## Ejemplo básico
```vue
<script setup lang="ts">
import { useSelectionCapabilities } from '@open-pencil/vue'
const { canDelete, canDuplicate, canCreateComponent } = useSelectionCapabilities()
</script>
<template>
<div class="flex gap-2">
<button :disabled="!canDuplicate">Duplicar</button>
<button :disabled="!canDelete">Eliminar</button>
<button :disabled="!canCreateComponent">Hacer componente</button>
</div>
</template>
```
## Ejemplos prácticos
### Controlar las entradas del menú
```ts
const { canMoveToPage, canGoToMainComponent } = useSelectionCapabilities()
```
### Habilitar los comandos de zoom solo cuando sean útiles
```ts
const { canZoomToSelection } = useSelectionCapabilities()
```
## APIs relacionadas
- [useSelectionState](./use-selection-state)
- [useEditorCommands](./use-editor-commands)