How to customize the internal parameter of nodes?

[FreshLucas-git]

Thank you for your greart work. This library is very helpful. I want to pass the argument or state into custom node as internal parameters.
After that, I want to log the node's state, including type, position, label, and custom parameters. Maybe Pinia is the solution for this problem. Is there any way to implement it?

[bcakmakoglu]

If I understand you correctly, you want to pass some additional info to your nodes.
You can use node.data for this purpose

{
   id: '1',
   label: 'Node 1',
   position: { x: 0, y: 0 },
   data: {
      additionalInfo: 'foobar'
   }
}

Accessing the values can be done multiple ways, really depends from where you want to access it.

From inside a custom node via props

// CustomNode.vue
<script setup>
const props = defineProps(['id', 'type', 'label', 'data'])

console.log(props)
</script>

Or from inside a custom node using useNode

// CustomNode.vue
<script setup>
const { node } = useNode()

console.log(node)
</script>

Or, maybe you want to access the node from some Sidebar component

// Sidebar.vue
<script setup>
const { findNode } = useVueFlow()

const node = findNode(someId)

console.log(node)
</script>

[FreshLucas-git]

Thank you very much for your kindly explanation. You're amazing. 😄