feat(store, flow)!: Add useNode/useEdge-state helpers

* for two way binding use the helpers

src/composables/useVueFlow.ts

@@ -106,6 +106,14 @@ export default (options?: FlowOptions): UseVueFlow => {
   const store = useStore(options)
   return {
     store,
+    useNodesState: (nodes) => {
+      store.setNodes(nodes)
+      return store.nodes
+    },
+    useEdgesState: (edges) => {
+      store.setEdges(edges)
+      return store.edges
+    },
     applyNodeChanges: (changes) => applyNodeChanges(changes, store.nodes),
     applyEdgeChanges: (changes) => applyEdgeChanges(changes, store.edges),
     ...store.hooksOn,

src/container/VueFlow/VueFlow.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   panOnScroll: false,
   paneMoveable: true,
 })
-const emit = defineEmits([...Object.keys(createHooks()), 'update:nodes', 'update:edges', 'update:elements', 'update:modelValue'])
+const emit = defineEmits([...Object.keys(createHooks())])
 const store = initFlow(emit, props.id)
 nextTick(() => store.setState(props))
 watch(

src/store/actions.ts

@@ -8,9 +8,8 @@ import {
   Node,
   NodeChange,
   NodeDimensionChange,
-  XYPosition,
 } from '~/types'
-import { clampPosition, isEdge, isGraphEdge, isGraphNode, isNode, isParentSelected, parseEdge, parseNode } from '~/utils'
+import { isEdge, isGraphEdge, isGraphNode, isNode, isParentSelected, parseEdge, parseNode } from '~/utils'
 import { createPositionChange, createSelectionChange, getSelectionChanges } from '~/composables/useVueFlow'
 
 const getParent = (root: Node[], id: string): GraphNode | undefined => {

src/types/flow.ts

@@ -121,6 +121,8 @@ export type FlowOptions<N = any, E = N> = FlowProps<N, E>
 
 export type UseVueFlow = {
   store: FlowStore
+  useNodesState: (nodes: Node[]) => GraphNode[]
+  useEdgesState: (edges: Edge[]) => GraphEdge[]
   applyNodeChanges: (changes: NodeChange[]) => void
   applyEdgeChanges: (changes: EdgeChange[]) => void
 } & FlowHooksOn

src/utils/graph.ts

@@ -281,18 +281,19 @@ export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => {
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
 }
 
-export const onLoadGetNodes = (currentStore: FlowStore) => (): GraphNode[] => currentStore.nodes
+export const onLoadGetNodes = (store: FlowStore) => (): GraphNode[] => store.nodes
-export const onLoadGetEdges = (currentStore: FlowStore) => (): GraphEdge[] => currentStore.edges
+export const onLoadGetEdges = (store: FlowStore) => (): GraphEdge[] => store.edges
-export const onLoadGetElements = (currentStore: FlowStore) => (): FlowElements => [...currentStore.nodes, ...currentStore.edges]
+export const onLoadGetElements = (store: FlowStore) => (): FlowElements => [...store.nodes, ...store.edges]
 
-export const onLoadToObject = (currentStore: FlowState) => (): FlowExportObject => {
+export const onLoadToObject = (store: FlowState) => (): FlowExportObject => {
   // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage
   return JSON.parse(
     JSON.stringify({
-      elements: currentStore.elements,
+      nodes: store.nodes,
-      position: [currentStore.transform[0], currentStore.transform[1]],
+      edges: store.edges,
-      zoom: currentStore.transform[2],
+      position: [store.transform[0], store.transform[1]],
-    }),
+      zoom: store.transform[2],
+    } as FlowExportObject),
   )
 }