From 9a8caf444ca6396288caee3138d05582f79f3698 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 23 Mar 2022 17:43:27 +0100
Subject: [PATCH] feat(store): Enable using a parentNode / parentNodeId to add
 child nodes

---
 examples/Nesting/Nesting.vue | 9 ++++++++-
 src/store/actions.ts         | 6 ++++--
 src/types/store.ts           | 2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/examples/Nesting/Nesting.vue b/examples/Nesting/Nesting.vue
index f25e469c..9686af9a 100644
--- a/examples/Nesting/Nesting.vue
+++ b/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>
diff --git a/src/store/actions.ts b/src/store/actions.ts
index a465a5cc..dc4accaf 100644
--- a/src/store/actions.ts
+++ b/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)
diff --git a/src/types/store.ts b/src/types/store.ts
index a4152c9b..552ab8aa 100644
--- a/src/types/store.ts
+++ b/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>[]