feat(store): Enable using a parentNode / parentNodeId to add child nodes

examples/Nesting/Nesting.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '~/index'
 
-const { onConnect, nodes, edges, addEdges } = useVueFlow({
+const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
   nodes: [
@@ -72,6 +72,13 @@ const { onConnect, nodes, edges, addEdges } = useVueFlow({
 })
 
 onConnect((params) => addEdges([params]))
+
+onMounted(() => {
+  // dynamically add nodes to parent
+  addNodes([{ id: '999', type: 'input', label: 'Node 1', position: { x: 20, y: 100 }, class: 'light', extent: 'parent' }], {
+    parentNode: '2',
+  })
+})
 </script>
 <template>
   <VueFlow>

src/store/actions.ts

@@ -214,10 +214,12 @@ export default (state: State, getters: ComputedGetters): Actions => {
     setEdges(elements.filter(isEdge))
   }
 
-  const addNodes: Actions['addNodes'] = (nodes, extent) => {
+  const addNodes: Actions['addNodes'] = (nodes, options) => {
     const parsed = nodes.flatMap((node) => {
       const children: GraphNode[] = []
-      parseChildren(node, undefined, children, extent ?? state.nodeExtent, getters.getNode.value)
+      const parent =
+        options && (typeof options.parentNode === 'string' ? getters.getNode.value(options.parentNode) : options.parentNode)
+      parseChildren(node, parent, children, options?.extent ?? state.nodeExtent, getters.getNode.value)
       return children
     })
     state.nodes.push(...parsed)

src/types/store.ts

@@ -75,7 +75,7 @@ export interface Actions<N = any, E = N> {
   setElements: (elements: Elements<N, E>, extent?: CoordinateExtent) => void
   setNodes: (nodes: Node<N>[], extent?: CoordinateExtent) => void
   setEdges: (edges: Edge<E>[]) => void
-  addNodes: <NA = N>(nodes: Node<NA>[], extent?: CoordinateExtent) => void
+  addNodes: <NA = N>(nodes: Node<NA>[], options?: { extent?: CoordinateExtent; parentNode: GraphNode | string }) => void
   addEdges: <EA = E>(edgesOrConnections: (Edge<EA> | Connection)[]) => void
   updateEdge: <EU = E>(oldEdge: GraphEdge<EU>, newConnection: Connection) => boolean
   applyEdgeChanges: <ED = E>(changes: EdgeChange[]) => GraphEdge<ED>[]