Way of checking if a node is selected

[vvroul]

Hello! I'd like to ask if there's a way (or can be implemented) to easily check if a specific node is selected, since the "selectable" option exist in the node options.

[bcakmakoglu]

There's multiple ways to discern if a node is selected.
A selected node will have the .selected class applied to it.
You can also check the Store state and check the stored nodes whether selected is set to true.

Do you need a more specific example for it? :)

[vvroul]

Thanks for your response! Yeah an example with the second way, would be really helpful.
Let's say I want to get the id of a selected node.

One way I've found is that we can capture the mouse event when the node is a selected,
in a function and we're going to get ({event, node}) on the click. And then we have access
to the node.id! 😄

I don't know if this is an optimized way that's why I asked!

[bcakmakoglu]

I got a little mixed up. With the version 0.4.x it will be possible to just check the store nodes for their selected prop - there's going to be a couple of major changes in that version that ultimately should make it a lot easier to work with nodes and edges :)

In the current stable version (0.3.x) you could simply check the selectedElements value in the store, i.e.

<script lang="ts" setup>
// Your component setup function 
import { VueFlow, useVueFlow, isNode } from '@braks/vue-flow'

const elements = [/* some elements omitted for simplicity */]
const store = useVueFlow() // create a store instance you can access

const onClick = () => {
  if (store.selectedElements && store.selectedElements.value) {
    console.log(store.selectedElements) // store.selectedElements will yield *all* elements currently selected, i.e. nodes *and* edges
    console.log(store.selectedElements.filter(isNode)) // this will only yield the currently selected nodes, i.e. a node that was clicked/dragged, or multiple nodes selected by holding shift + click
  }
}
</script>
<template>
   <VueFlow v-model="elements">
     <button @click="onClick">Click me! </button>
   </VueFlow>
</template>

[vvroul]

Thank you, this solution works perfectly! Also thank you for the updates on the new versions you're working on, can't wait! 😄

[Dimonka2]

Somehow adding const store = useVueFlow() is not working for me. Is it because of new "setup" syntax? It seems that the store is disconnected from the VueFlow component.

On other hand event @nodeClick is working and giving me selected node.

[bcakmakoglu]

In 0.4.0 you can find any store variable inside useVueFlow, i.e.

const { getSelectedEdges, getSelectedElements, getSelectedNodes } = useVueFlow({ ... })

const edges = getSelectedEdges.value // getSelectedEdges is a computedRef