Selecting nodes programmatically

[SciManJD]

I want to select a node by its ID from my code (not by clicking on it). How can I do this?

[bcakmakoglu]

By setting node.selected to true

[bcakmakoglu]

Sorry, I sent this message while outside so wasn't able to write a lot more than this 😄
There's a couple ways to select nodes programmatically but the easiest way is, as I mentioned, to just set node.selected to true

For example:

const { findNode } = useVueFlow()

const node = findNode(someId)

if (node) {
	node.selected = true
}

And that's it, your node is now marked as selected :)

Alternatively there's the option to use the addSelectedNodes action.

const { addSelectedNodes } = useVueFlow()

addSelectedNodes(someNodesArray)

[SciManJD]

In principle it is clear, but I have some problem to make it running in my code. I'm calling the function findNode() inside the methods-section. It always returns "undefined". The definition of the elements is also under the data-section. What I'm doing wrong?

[bcakmakoglu]

Can you show me a code snippet?

[SciManJD]

<template>
    <VueFlow v-model="elements" fit-view-on-init :default-edge-options="{type: 'smoothstep'}"/>
</template>

<script>
    import {VueFlow, Position, useVueFlow} from '@vue-flow/core'

    const {findNode} = useVueFlow();

    export default {
        name: 'NewComponent',
        components: {
            VueFlow
        },
        data() {
            return {
                elements: [
                    // Nodes
                    {id: 'n-1', label: 'label1', type: 'input', sourcePosition: Position.Right, position: {x: 100, y: 125}, class: 'class-1'},
                    ...
                    {id: 'n-N', label: 'labelN', targetPosition: Position.Left, sourcePosition: Position.Right, position: {x: 300, y: 100, class: 'class-N'},                                    
                    // Edges
                    {id: 'e-1', source: 'n-1', target: 'n-2'},
                    ...
                    {id: 'e-M', source: 'n-11', target: 'n-7', targetHandle: 'a'}
                ],

            }
        },
        methods: {

            ...

            // Function that must select a specific node
            selectNode(nodeId) {
                console.log(nodeId) // Here I see correct node ID, for example 'n-1'
                let node = findNode(nodeId);
                console.log(JSON.stringify(node)) // Here I get always 'undefined'
           }
    }

[bcakmakoglu]

You're using useVueFlow wrong.

You're getting undefined because your instance is not bound to the VueFlow component at all, they're completely unrelated.
Add a setup function to your component and return the instance of useVueFlow from there.

export default {
	setup() {
		const instance = useVueFlow()

		return { instance }
	}
}