diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts index bd56f013..8ad79fd5 100644 --- a/src/composables/useVueFlow.ts +++ b/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, diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue index 37068498..60b7c1c7 100644 --- a/src/container/VueFlow/VueFlow.vue +++ b/src/container/VueFlow/VueFlow.vue @@ -18,7 +18,7 @@ const props = withDefaults(defineProps(), { 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( diff --git a/src/store/actions.ts b/src/store/actions.ts index 94c8b3d9..f1da8a9f 100644 --- a/src/store/actions.ts +++ b/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 => { diff --git a/src/types/flow.ts b/src/types/flow.ts index 572d1a06..3c971a2e 100644 --- a/src/types/flow.ts +++ b/src/types/flow.ts @@ -121,6 +121,8 @@ export type FlowOptions = FlowProps export type UseVueFlow = { store: FlowStore + useNodesState: (nodes: Node[]) => GraphNode[] + useEdgesState: (edges: Edge[]) => GraphEdge[] applyNodeChanges: (changes: NodeChange[]) => void applyEdgeChanges: (changes: EdgeChange[]) => void } & FlowHooksOn diff --git a/src/utils/graph.ts b/src/utils/graph.ts index f18b759c..dbde524f 100644 --- a/src/utils/graph.ts +++ b/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 onLoadGetEdges = (currentStore: FlowStore) => (): GraphEdge[] => currentStore.edges -export const onLoadGetElements = (currentStore: FlowStore) => (): FlowElements => [...currentStore.nodes, ...currentStore.edges] +export const onLoadGetNodes = (store: FlowStore) => (): GraphNode[] => store.nodes +export const onLoadGetEdges = (store: FlowStore) => (): GraphEdge[] => store.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, - position: [currentStore.transform[0], currentStore.transform[1]], - zoom: currentStore.transform[2], - }), + nodes: store.nodes, + edges: store.edges, + position: [store.transform[0], store.transform[1]], + zoom: store.transform[2], + } as FlowExportObject), ) }