useSelectionState

useSelectionState() expone el estado reactivo derivado de la selección del editor actual.

Úsalo cuando necesites renderizar UI basándote en:

• si hay algo seleccionado
• cuántos nodos están seleccionados
• el nodo seleccionado principal
• si la selección actual es una instancia, componente o grupo

Uso

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

const selection = useSelectionState()

Ejemplo básico

<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">Sin selección</span>
    <span v-else>
      {{ selectedCount }} seleccionados
      <span v-if="isInstance">· instancia</span>
    </span>
  </div>
</template>

Qué devuelve

Los valores más útiles incluyen:

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

Ejemplos prácticos

Mostrar acciones solo para instancias

const { isInstance } = useSelectionState()

Habilitar la UI de creación de conjuntos de componentes

const { canCreateComponentSet } = useSelectionState()

APIs relacionadas

• useSelectionCapabilities
• useEditorCommands
• useEditor