diff --git a/src/composables/index.ts b/src/composables/index.ts index 4ff5c57e..a0bbd21b 100644 --- a/src/composables/index.ts +++ b/src/composables/index.ts @@ -3,3 +3,4 @@ export { default as useKeyPress } from './useKeyPress' export { default as useZoomPanHelper } from './useZoomPanHelper' export { default as useWindow } from './useWindow' export { default as useVueFlow } from './useVueFlow' +export * from './useElementsState' diff --git a/src/composables/useElementsState.ts b/src/composables/useElementsState.ts index fba30493..734c0a50 100644 --- a/src/composables/useElementsState.ts +++ b/src/composables/useElementsState.ts @@ -58,13 +58,13 @@ const updateEdge = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge return edge } -const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges) -const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes) +export const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges) +export const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes) export const useEdgesState = ({ edges, applyDefault }: UseEdgesStateOptions = { applyDefault: true }): UseEdgesState => { const { store } = useVueFlow() if (edges && edges.length) store.setEdges(edges) - if (applyDefault) store.hooksOn.OnEdgesChange((e) => applyEdgeChanges(e, store.edges)) + if (applyDefault && !store.applyDefault) store.hooksOn.OnEdgesChange((e) => applyEdgeChanges(e, store.edges)) return { edges: store.edges, applyEdgeChanges: (changes) => applyEdgeChanges(changes, store.edges), @@ -97,7 +97,7 @@ export const useEdgesState = ({ edges, applyDefault }: UseEdgesStateOptions = { export const useNodesState = ({ nodes, applyDefault }: UseNodesStateOptions = { applyDefault: true }): UseNodesState => { const { store } = useVueFlow() if (nodes && nodes.length) store.setNodes(nodes) - if (applyDefault) store.hooksOn.OnNodesChange((c) => applyNodeChanges(c, store.nodes)) + if (applyDefault && !store.applyDefault) store.hooksOn.OnNodesChange((c) => applyNodeChanges(c, store.nodes)) return { nodes: store.nodes, applyNodeChanges: (changes) => applyNodeChanges(changes, store.nodes), diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue index cd2b1d5f..f20ec95c 100644 --- a/src/container/VueFlow/VueFlow.vue +++ b/src/container/VueFlow/VueFlow.vue @@ -2,7 +2,7 @@ import { createHooks, useHooks } from '../../store' import type { FlowProps } from '../../types/flow' import ZoomPane from '../ZoomPane/ZoomPane.vue' -import { useVueFlow } from '../../composables' +import { useVueFlow, applyNodeChanges, applyEdgeChanges } from '../../composables' import useWatch from './watch' const props = withDefaults(defineProps(), { @@ -19,6 +19,7 @@ const props = withDefaults(defineProps(), { zoomOnDoubleClick: true, panOnScroll: false, paneMoveable: true, + applyDefault: true, }) const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue', 'update:edges', 'update:nodes']) const { modelValue, nodes, edges } = useVModels(props, emit) @@ -26,6 +27,10 @@ const { modelValue, nodes, edges } = useVModels(props, emit) const { id, store } = useVueFlow(props) useHooks(store.hooks, emit) +if (store.applyDefault) { + store.hooks.nodesChange.on((c) => applyNodeChanges(c, store.nodes)) + store.hooks.edgesChange.on((c) => applyEdgeChanges(c, store.edges)) +} if (modelValue?.value && !store.nodes.length) store.setElements(modelValue.value) if (nodes?.value && !store.nodes.length) store.setNodes(nodes.value) if (edges?.value && !store.edges.length) store.setEdges(edges.value) diff --git a/src/container/VueFlow/watch.ts b/src/container/VueFlow/watch.ts index 7b20b8ad..6b01f53a 100644 --- a/src/container/VueFlow/watch.ts +++ b/src/container/VueFlow/watch.ts @@ -187,4 +187,9 @@ export default ( (v) => isDef(v) && (store.edgeUpdaterRadius = v), { immediate: true }, ) + watch( + () => props.applyDefault, + (v) => isDef(v) && (store.applyDefault = v), + { immediate: true }, + ) } diff --git a/src/store/state.ts b/src/store/state.ts index 796f7acc..a4cbb5a4 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -88,6 +88,7 @@ export default (opts?: Partial): FlowState => { hooks: createHooks(), storageKey: undefined, + applyDefault: true, vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-', } @@ -127,6 +128,7 @@ export default (opts?: Partial): FlowState => { if (typeof opts.maxZoom !== 'undefined') state.maxZoom = opts.maxZoom if (typeof opts.minZoom !== 'undefined') state.minZoom = opts.minZoom if (typeof opts.translateExtent !== 'undefined') state.translateExtent = opts.translateExtent + if (typeof opts.applyDefault !== 'undefined') state.applyDefault = opts.applyDefault } return state diff --git a/src/types/flow.ts b/src/types/flow.ts index 812d17dc..c5fdf9e6 100644 --- a/src/types/flow.ts +++ b/src/types/flow.ts @@ -119,6 +119,7 @@ export interface FlowProps { edgeUpdaterRadius?: number storageKey?: string fitViewOnInit?: boolean + applyDefault?: boolean } export type FlowOptions = FlowProps