useSelectionCapabilities

useSelectionCapabilities() предоставляет реактивные булевы значения, указывающие, разрешены ли сейчас распространённые действия редактора.

Используйте при создании:

• меню
• тулбаров
• горячих клавиш
• кнопок действий
• контекстных панелей

Использование

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

const caps = useSelectionCapabilities()

Базовый пример

<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">Дублировать</button>
    <button :disabled="!canDelete">Удалить</button>
    <button :disabled="!canCreateComponent">Создать компонент</button>
  </div>
</template>

Практические примеры

Управление доступностью пунктов меню

const { canMoveToPage, canGoToMainComponent } = useSelectionCapabilities()

Включать команды зума только когда это имеет смысл

const { canZoomToSelection } = useSelectionCapabilities()

Связанные API

• useSelectionState
• useEditorCommands