useSelectionState

useSelectionState() espone lo stato reattivo derivato dalla selezione nell'editor corrente.

Usalo quando hai bisogno di renderizzare UI basata su:

• se qualcosa è selezionato
• quanti nodi sono selezionati
• il nodo selezionato primario
• se la selezione corrente è un'istanza, un componente o un gruppo

Utilizzo

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

const selection = useSelectionState()

Esempio base

<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">Nessuna selezione</span>
    <span v-else>
      {{ selectedCount }} selezionati
      <span v-if="isInstance">· istanza</span>
    </span>
  </div>
</template>

Cosa restituisce

I valori utili includono:

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

Esempi pratici

Mostra azioni solo per le istanze

const { isInstance } = useSelectionState()

Abilita la UI per la creazione di set di componenti

const { canCreateComponentSet } = useSelectionState()

API correlate

• useSelectionCapabilities
• useEditorCommands
• useEditor