useSelectionCapabilities

useSelectionCapabilities() udostępnia reaktywne wartości logiczne wskazujące, czy typowe akcje edytora są aktualnie dozwolone.

Użyj go przy budowaniu:

• menu
• pasków narzędzi
• skrótów klawiaturowych
• przycisków akcji
• kontekstowych paneli

Użycie

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

const caps = useSelectionCapabilities()

Podstawowy przykład

<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">Duplikuj</button>
    <button :disabled="!canDelete">Usuń</button>
    <button :disabled="!canCreateComponent">Utwórz komponent</button>
  </div>
</template>

Przykłady praktyczne

Bramkuj wpisy menu

const { canMoveToPage, canGoToMainComponent } = useSelectionCapabilities()

Włącz polecenia powiększenia tylko gdy przydatne

const { canZoomToSelection } = useSelectionCapabilities()

Powiązane API

• useSelectionState
• useEditorCommands