useSelectionState

useSelectionState() expose un état réactif dérivé de la sélection depuis l'éditeur courant.

Utilisez-le quand vous avez besoin d'afficher une UI basée sur :

• si quelque chose est sélectionné
• combien de nœuds sont sélectionnés
• le nœud sélectionné principal
• si la sélection courante est une instance, un composant ou un groupe

Utilisation

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

const selection = useSelectionState()

Exemple de 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">Aucune sélection</span>
    <span v-else>
      {{ selectedCount }} sélectionné(s)
      <span v-if="isInstance">· instance</span>
    </span>
  </div>
</template>

Ce qu'il retourne

Les valeurs utiles incluent :

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

Exemples pratiques

Afficher des actions réservées aux instances

const { isInstance } = useSelectionState()

Activer l'UI de création de set de composants

const { canCreateComponentSet } = useSelectionState()

API associées

• useSelectionCapabilities
• useEditorCommands
• useEditor