feat: try to dispose states on unmount

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

examples/Provider/Sidebar.vue

@@ -6,12 +6,6 @@ const selectAll = () => {
   addSelectedNodes(getNodes.value)
   nodesSelectionActive.value = true
 }
-
-const transformString = computed(() => [
-  transform.value[0].toFixed(2),
-  transform.value[1].toFixed(2),
-  transform.value[2].toFixed(2),
-])
 </script>
 <template>
   <aside>
@@ -20,7 +14,7 @@ const transformString = computed(() => [
     </div>
     <div class="title">Zoom & pan transform</div>
     <div class="transform">
-      {{ transformString }}
+      {{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}
     </div>
     <div class="title">Nodes</div>
     <div v-for="node of getNodes" :key="node.id">

examples/RGBFlow/RGBFlow.vue

@@ -38,7 +38,7 @@ const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (c
         <RGBNode v-bind="props" :amount="color" @change="onChange" />
       </template>
       <template #node-rgb-output="props">
-        <RGBOutputNode :v-bind="props" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
+        <RGBOutputNode v-bind="props" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
       </template>
     </VueFlow>
   </div>

src/additional-components/MiniMap/MiniMap.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<MiniMapProps>(), {
   maskColor: 'rgb(240, 242, 243, 0.7)',
 })
 
-const attrs: any = useAttrs()
+const attrs = useAttrs()
 const window = useWindow()
 
 const defaultWidth = 200

src/composables/useHandle.ts

@@ -166,4 +166,9 @@ export default (store: FlowStore = useVueFlow().store) =>
 
     doc.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
     doc.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
+
+    onScopeDispose(() => {
+      doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
+      doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
+    })
   }

src/composables/useVueFlow.ts

@@ -1,17 +1,17 @@
-import { getCurrentInstance } from 'vue'
+import { EffectScope } from 'vue'
-import { FlowOptions, UseVueFlow } from '~/types'
+import { FlowOptions, UseVueFlow, Store } from '~/types'
 import { VueFlow } from '~/context'
 import { useStore } from '~/store'
 
 let id = 0
+
+type Scope = EffectScope & { vueFlow: UseVueFlow }
 export default <N = any, E = N>(options?: Partial<FlowOptions<N, E>>): UseVueFlow<N, E> => {
-  const currentInstance: any = getCurrentInstance()
+  const scope = getCurrentScope() as Scope
-  let vueFlow: false | UseVueFlow = currentInstance
+  let vueFlow: UseVueFlow | null = scope ? inject(VueFlow, null) ?? (scope.vueFlow as UseVueFlow) : null
-    ? inject(VueFlow, undefined) ?? (currentInstance.vueFlow as UseVueFlow)
-    : false
   if (!vueFlow || (vueFlow && options?.id && options.id !== vueFlow.id)) {
     const name = options?.id ?? `vue-flow-${id++}`
-    const store = useStore(options)
+    let store: Store = useStore(options)
     vueFlow = {
       id: name,
       store: reactive(store),
@@ -20,11 +20,19 @@ export default <N = any, E = N>(options?: Partial<FlowOptions<N, E>>): UseVueFlo
       ...store.actions,
       ...store.hooksOn,
     } as unknown as UseVueFlow
-  }
+
-  if (currentInstance) {
+    if (scope) {
       provide(VueFlow, vueFlow)
-    currentInstance.vueFlow = vueFlow
+      scope.vueFlow = vueFlow
     }
 
+    onScopeDispose(() => {
+      vueFlow = null as UseVueFlow
+      scope.vueFlow = null as UseVueFlow
+      store = null as Store
+    })
+  }
+  if (!vueFlow) throw new Error('VueFlow instance not found.')
+
   return <UseVueFlow<N, E>>vueFlow
 }

src/container/VueFlow/watch.ts

@@ -15,6 +15,8 @@ export default (
   props: FlowProps,
   store: FlowStore,
 ) => {
+  const scope = getCurrentScope()
+  scope?.run(() => {
     if (isDefined(props.modelValue)) {
       const { pause, resume } = pausableWatch([() => props.modelValue, () => props.modelValue?.length], async ([v]) => {
         if (v && Array.isArray(v)) {
@@ -31,7 +33,7 @@ export default (
         if (v && Array.isArray(v)) {
           pause()
           store.setNodes(v)
-        if (nodes) nodes.value = store.nodes
+          if (nodes) nodes = store.nodes
           await nextTick()
           resume()
         }
@@ -42,7 +44,7 @@ export default (
         if (v && Array.isArray(v)) {
           pause()
           store.setEdges(v)
-        if (edges) edges.value = store.edges
+          if (edges) edges = store.edges
           await nextTick()
           resume()
         }
@@ -204,9 +206,5 @@ export default (
       (v) => isDef(v) && (store.applyDefault = v),
       { immediate: isDef(props.applyDefault) },
     )
-  watch(
+  })
-    () => props.fitViewOnInit,
-    (v) => isDef(v) && (store.fitViewOnInit = v),
-    { immediate: isDef(props.fitViewOnInit) },
-  )
 }

src/store/actions.ts

@@ -1,3 +1,4 @@
+import useState from './state'
 import {
   CoordinateExtent,
   EdgeChange,
@@ -304,5 +305,8 @@ export default (state: State, getters: ComputedGetters): Actions => {
     setConnectionNodeId,
     setInteractive,
     setState,
+    $reset: () => {
+      setState(useState())
+    },
   }
 }

src/store/state.ts

@@ -97,7 +97,7 @@ export default (opts?: FlowOptions): State => {
     applyDefault: true,
 
     vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
-  }
+  } as State
 
   if (opts) {
     if (typeof opts.panOnScroll !== 'undefined') state.panOnScroll = opts.panOnScroll

src/store/store.ts

@@ -1,31 +1,38 @@
 import useState from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowHooksOn, FlowOptions, Store } from '~/types'
+import { FlowHooksOn, FlowOptions, Store, State } from '~/types'
 
 export default (preloadedState?: FlowOptions): Store => {
-  const state = reactive(useState(preloadedState))
+  const state: State = useState(preloadedState)
-  const getters = useGetters(state)
+  const reactiveState = reactive(state)
-  const actions = useActions(state, getters)
+  const getters = useGetters(reactiveState)
+  const actions = useActions(reactiveState, getters)
   const hooksOn: FlowHooksOn = <any>{}
-  Object.entries(state.hooks).forEach(([n, h]) => {
+  Object.entries(reactiveState.hooks).forEach(([n, h]) => {
     const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}`
     hooksOn[<keyof FlowHooksOn>name] = h.on as any
   })
-  actions.setState(state)
+  actions.setState(reactiveState)
   if (preloadedState) {
     if (preloadedState.modelValue) actions.setElements(preloadedState.modelValue)
     if (preloadedState.nodes) actions.setNodes(preloadedState.nodes)
     if (preloadedState.edges) actions.setEdges(preloadedState.edges)
   }
 
-  return {
+  const store = {
-    state,
+    state: reactiveState,
     actions,
     getters,
     hooksOn,
-    ...toRefs(state),
+    ...toRefs(reactiveState),
     ...getters,
     ...actions,
   } as unknown as Store
+
+  onScopeDispose(() => {
+    store.$reset()
+  })
+
+  return store
 }

src/types/store.ts

@@ -90,7 +90,7 @@ export interface Actions<N = any, E = N> {
   setInteractive: (isInteractive: boolean) => void
   setState: (state: Partial<FlowOptions<N, E>>) => void
   updateNodePosition: ({ id, diff, dragging }: { id?: string; diff?: XYPosition; dragging?: boolean }) => void
-  $destroy: () => void
+  $reset: () => void
 }
 
 export interface Getters<N = any, E = N> {