How to add new nodes in a custom pinia store

[seppeclijsters]

Hi! First I want to thank you for this amazing library! :)

Currently I use this function 'addNode' to add extra nodes on my page flow.vue
Now I would like to add this function to my pinia store, but I'm not sure how to update my divisions in the store since 'addNodes' and 'addEdges' come from the composable useVueFlow()

flow.vue

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

// Stores
import { useDivisions } from "@/services/piniaStorage/divisions"
const divisionsStore = useDivisions()
const { divisions } = storeToRefs(divisionsStore)

const { 
  nodes,
  addNodes,
  addEdges,
  getNodes, 
  onNodesChange, 
} = useVueFlow()

const addNode = () => {

  const newNode = {
    type: 'custom',
    id: currentNode,
    label: divisionData.name,
    position: { x: 200, y:  100 },
  }
  
  addNodes([newNode])
  addEdges([
    {
      source: previousNode,
      target: currentNode,
      type: 'step',
      sourceHandle: 'b',
      targetHandle: 'a',
    },
  ])
}
</script>

<template>
   <button @click="addNode"> Add node </button>
     <VueFlow
          v-model="divisions"
    />
</template>

my store divisions.js

import { defineStore } from 'pinia'

export const useDivisions = defineStore('useDivisions', () => {

  const divisions = ref([
    // Nodes
    { id: '1', type: 'custom', label: 'Production', position: { x: 250, y: 50 }, data: { division: true } },
    { id: '2', type: 'custom', label: 'Marketing', position: { x: 450, y: 50 }, data: { division: true } },
    { id: '3', type: 'custom', label: 'Sales', position: { x: 650, y: 50 }, data: { division: true } },
    { id: '4', type: 'custom', label: 'HR', position: { x: 850, y: 50 }, data: { division: true } },

    // Edges
    { id: 'e1-3', source: '1', sourceHandle: 'b', target: '2', targetHandle: 'b', type: 'step', animated: true },
    { id: 'e1-3', source: '2', sourceHandle: 'b', target: '3', targetHandle: 'b', type: 'step', animated: true },
    { id: 'e1-3', source: '3', sourceHandle: 'b', target: '4', targetHandle: 'b', type: 'step', animated: true },
  ])

  const addNode = () => {
  
    const newNode = {
      type: 'custom',
      id: '9',
      label: 'olaa',
      position: { x: 200, y: 300 + 100 }
   }
    
    addNodes([newNode])
    addEdges([
      {
        source: 1,
        target: 2,
        type: 'step',
        sourceHandle: 'b',
        targetHandle: 'a',
      },
    ])
  
  }


  return {
    divisions,
    addNode,
  }
})

[bcakmakoglu]

Instead of using addNodes or addEdges simply push the new nodes / edges into your state.

const addNode = () => {
  const newNode = {
    type: 'custom',
    id: currentNode,
    label: divisionData.name,
    position: { x: 200, y:  100 },
  }
  
  divisions.push(newNode)

  divisions.push({
      source: previousNode,
      target: currentNode,
      type: 'step',
      sourceHandle: 'b',
      targetHandle: 'a',
    })
}

They will then be passed down to Vue Flow via the v-model you're using.
You don't need to use these helper functions to add nodes or edges.

[bcakmakoglu]

Is the new edge supposed to be connected to the newly added node? If so, you might want to delay it a bit as the edge cannot be added if the corresponding nodes don't exist in the state yet

Maybe sth like this

divisions.value.push(newNode)

nextTick(() => {
	divisions.value.push(newEdge)
})

[seppeclijsters]

@bcakmakoglu Oh yes indeed! nextTick doesn't work for me, but setTimeout seems to work for now

 setTimeout(() => {
      console.log(newEdge)
      divisions.value.push(newEdge)
    }, 3000)

[seppeclijsters]

Thanks for helping me today @bcakmakoglu, I appreciate a lot. Have a great weekend! 🙏

We're getting somewhere! :D

[bcakmakoglu]

With 1.24.0 you won't need a timeout anymore thanks to #1149

You might see a warning (only in dev mode) when adding an edge with a missing source or target but as the node has just been added you can just ignore the warning in that case 🤷‍♂️
I'll rework the error logic later on

[seppeclijsters]

@bcakmakoglu , sorry for my late response. Works like a charm! Thanks again man :)
My boss is loving this vue flow. Now I have to add this on many software applications