useSelectionCapabilities

useSelectionCapabilities() exposes reactive booleans for whether common editor actions are currently allowed.

Use it when building:

• menus
• toolbars
• keyboard shortcuts
• action buttons
• contextual panels

Usage

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

const caps = useSelectionCapabilities()

Basic example

<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">Duplicate</button>
    <button :disabled="!canDelete">Delete</button>
    <button :disabled="!canCreateComponent">Make component</button>
  </div>
</template>

Practical examples

Gate menu entries

const { canMoveToPage, canGoToMainComponent } = useSelectionCapabilities()

Enable zoom commands only when useful

const { canZoomToSelection } = useSelectionCapabilities()

Related APIs

• useSelectionState
• useEditorCommands