feat(flow): Add setNodes and OnNodesChange / setEdges OnEdgesChange utils to useNode/Edge-state

* add option to apply default change handler

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),
+      applyNodeChanges: applyNodes,
-      applyEdgeChanges: (changes) => applyEdgeChanges(changes, store.edges),
+      applyEdgeChanges: applyEdges,
       ...store.hooksOn,
     }
   }

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>

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">
+      <template #connection-line="customConnectionLineProps">
-        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
     </EdgeRenderer>
   </div>

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">
+      <template #connection-line="customConnectionLineProps">
-        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
       <slot name="zoom-pane" />
     </ZoomPane>

src/container/ZoomPane/ZoomPane.vue

@@ -237,8 +237,8 @@ export default {
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>
-      <template #custom-connection-line="customConnectionLineProps">
+      <template #connection-line="customConnectionLineProps">
-        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
     </TransformationPane>
     <SelectionPane :key="`selection-pane-${store.id}`" />

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[]
+  useNodesState: (nodes: Node[]) => UseNodesState
-  useEdgesState: (edges: Edge[]) => GraphEdge[]
+  useEdgesState: (edges: Edge[]) => UseEdgeState
   applyNodeChanges: (changes: NodeChange[]) => void
   applyEdgeChanges: (changes: EdgeChange[]) => void
 } & FlowHooksOn