feat(flow): Add option to disable default change handlers globally

* overwrites applyDefault setting for useEdgeState/useNodeState/useElementsState
* export apply change handlers

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

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'

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)
+export const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges)
-const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes)
+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),

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<FlowProps>(), {
@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   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)

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 },
+  )
 }

src/store/state.ts

@@ -88,6 +88,7 @@ export default (opts?: Partial<FlowState>): 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>): 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

src/types/flow.ts

@@ -119,6 +119,7 @@ export interface FlowProps<N = any, E = N> {
   edgeUpdaterRadius?: number
   storageKey?: string
   fitViewOnInit?: boolean
+  applyDefault?: boolean
 }
 
 export type FlowOptions<N = any, E = N> = FlowProps<N, E>