From 65b2e0d14886ce06c7bd16af6dad79121982d1ff Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 12 Dec 2021 20:09:09 +0100
Subject: [PATCH] feat(flow): Add setNodes and OnNodesChange / setEdges
 OnEdgesChange utils to useNode/Edge-state

* add option to apply default change handler
---
 src/composables/useVueFlow.ts                 | 27 +++++++++++++++----
 src/container/EdgeRenderer/EdgeRenderer.vue   |  4 +--
 .../TransformationPane/TransformationPane.vue |  4 +--
 src/container/VueFlow/VueFlow.vue             |  7 ++---
 src/container/ZoomPane/ZoomPane.vue           |  4 +--
 src/types/flow.ts                             | 17 +++++++++---
 6 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts
index aabfd367..5ff384f7 100644
--- a/src/composables/useVueFlow.ts
+++ b/src/composables/useVueFlow.ts
@@ -9,21 +9,38 @@ const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]) => applyCha
 
 export default (options?: FlowOptions): UseVueFlow => {
   const currentInstance = getCurrentInstance()
-  let vueFlow = currentInstance ? inject(VueFlow, undefined) : false
+  let vueFlow: UseVueFlow | false | undefined = currentInstance ? inject(VueFlow, undefined) : false
   if (!vueFlow || (vueFlow && options?.id && options.id !== vueFlow.store.id)) {
     const store = reactive(useStore(options))
+    const applyNodes = (changes: NodeChange[]) => applyNodeChanges(changes, store.nodes)
+    const applyEdges = (changes: EdgeChange[]) => applyEdgeChanges(changes, store.edges)
     vueFlow = {
+      id: store.id,
       store,
       useNodesState: (nodes) => {
         store.setNodes(nodes)
-        return store.nodes
+        return {
+          nodes: store.nodes,
+          setNodes: store.setNodes,
+          OnNodesChange: (applyDefault = false) => {
+            if (applyDefault) store.hooksOn.OnNodesChange((e) => applyNodes(e))
+            return store.hooksOn.OnNodesChange
+          },
+        }
       },
       useEdgesState: (edges) => {
         store.setEdges(edges)
-        return store.edges
+        return {
+          edges: store.edges,
+          setEdges: store.setEdges,
+          OnEdgesChange: (applyDefault = false) => {
+            if (applyDefault) store.hooksOn.OnEdgesChange((e) => applyEdges(e))
+            return store.hooksOn.OnEdgesChange
+          },
+        }
       },
-      applyNodeChanges: (changes) => applyNodeChanges(changes, store.nodes),
-      applyEdgeChanges: (changes) => applyEdgeChanges(changes, store.edges),
+      applyNodeChanges: applyNodes,
+      applyEdgeChanges: applyEdges,
       ...store.hooksOn,
     }
   }
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index 0624628d..d8f5e6a4 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -64,9 +64,9 @@ export default {
           <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
         </template>
       </EdgeWrapper>
-      <ConnectionLine v-if="group.isMaxLevel && connectionLineVisible && sourceNode" :source-node="sourceNode">
+      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
         <template #default="customConnectionLineProps">
-          <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+          <slot name="connection-line" v-bind="customConnectionLineProps"></slot>
         </template>
       </ConnectionLine>
     </g>
diff --git a/src/container/TransformationPane/TransformationPane.vue b/src/container/TransformationPane/TransformationPane.vue
index 98ca018d..329303e2 100644
--- a/src/container/TransformationPane/TransformationPane.vue
+++ b/src/container/TransformationPane/TransformationPane.vue
@@ -27,8 +27,8 @@ const { store } = useVueFlow()
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>
-      <template #custom-connection-line="customConnectionLineProps">
-        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      <template #connection-line="customConnectionLineProps">
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
     </EdgeRenderer>
   </div>
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index a7a11542..cf9b0d1b 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -21,8 +21,9 @@ const props = withDefaults(defineProps<FlowProps>(), {
 })
 const emit = defineEmits([...Object.keys(createHooks())])
 
-const { store } = useVueFlow(props)
+const { store } = useVueFlow()
 useHooks(store, emit)
+nextTick(() => store.setState(props))
 watch(
   () => props,
   (v) => nextTick(() => store.setState(v)),
@@ -51,8 +52,8 @@ export default {
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>
-      <template #custom-connection-line="customConnectionLineProps">
-        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      <template #connection-line="customConnectionLineProps">
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
       <slot name="zoom-pane" />
     </ZoomPane>
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 91f98174..798025f3 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -237,8 +237,8 @@ export default {
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>
-      <template #custom-connection-line="customConnectionLineProps">
-        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      <template #connection-line="customConnectionLineProps">
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
     </TransformationPane>
     <SelectionPane :key="`selection-pane-${store.id}`" />
diff --git a/src/types/flow.ts b/src/types/flow.ts
index 3c971a2e..9cd182cf 100644
--- a/src/types/flow.ts
+++ b/src/types/flow.ts
@@ -3,7 +3,7 @@ import { GraphEdge, Edge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
-import { FlowStore } from './store'
+import { FlowActions, FlowStore } from './store'
 import { EdgeChange, FlowHooksOn, NodeChange } from './hooks'
 
 export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
@@ -119,10 +119,21 @@ export interface FlowProps<N = any, E = N> {
 
 export type FlowOptions<N = any, E = N> = FlowProps<N, E>
 
+export type UseNodesState = {
+  nodes: GraphNode[]
+  setNodes: FlowActions['setNodes']
+  OnNodesChange: (applyDefault?: boolean) => FlowHooksOn['OnNodesChange']
+}
+export type UseEdgeState = {
+  edges: GraphEdge[]
+  setEdges: FlowActions['setEdges']
+  OnEdgesChange: (applyDefault: boolean) => FlowHooksOn['OnEdgesChange']
+}
 export type UseVueFlow = {
+  id: string
   store: FlowStore
-  useNodesState: (nodes: Node[]) => GraphNode[]
-  useEdgesState: (edges: Edge[]) => GraphEdge[]
+  useNodesState: (nodes: Node[]) => UseNodesState
+  useEdgesState: (edges: Edge[]) => UseEdgeState
   applyNodeChanges: (changes: NodeChange[]) => void
   applyEdgeChanges: (changes: EdgeChange[]) => void
 } & FlowHooksOn