useSelectionState

useSelectionState() udostępnia reaktywny stan pochodny od selekcji z bieżącego edytora.

Użyj go, gdy chcesz renderować UI na podstawie:

• czy coś jest zaznaczone
• ile węzłów jest zaznaczonych
• głównego zaznaczonego węzła
• czy bieżąca selekcja jest instancją, komponentem lub grupą

Użycie

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

const selection = useSelectionState()

Podstawowy przykład

<script setup lang="ts">
import { useSelectionState } from '@open-pencil/vue'

const { hasSelection, selectedCount, isInstance } = useSelectionState()
</script>

<template>
  <div class="text-xs text-muted">
    <span v-if="!hasSelection">Brak selekcji</span>
    <span v-else>
      {{ selectedCount }} zaznaczono
      <span v-if="isInstance">· instancja</span>
    </span>
  </div>
</template>

Co zwraca

Przydatne wartości obejmują:

• selectedIds
• hasSelection
• selectedNode
• selectedCount
• selectedNodeType
• isInstance
• isComponent
• isGroup
• canCreateComponentSet

Przykłady praktyczne

Wyświetl akcje tylko dla instancji

const { isInstance } = useSelectionState()

Włącz UI tworzenia zestawu komponentów

const { canCreateComponentSet } = useSelectionState()

Powiązane API

• useSelectionCapabilities
• useEditorCommands
• useEditor