fix: typings for UseVueFlow

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

src/composables/useVueFlow.ts

@@ -4,9 +4,11 @@ import { VueFlow } from '~/context'
 import { useStore } from '~/store'
 
 let id = 0
-export default (options?: Partial<FlowOptions>): UseVueFlow => {
+export default <N = any, E = N>(options?: Partial<FlowOptions<N, E>>): UseVueFlow<N, E> => {
   const currentInstance: any = getCurrentInstance()
-  let vueFlow = currentInstance ? inject(VueFlow) ?? (currentInstance.vueFlow as UseVueFlow) : false
+  let vueFlow: false | UseVueFlow = currentInstance
+    ? 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)
@@ -17,12 +19,12 @@ export default (options?: Partial<FlowOptions>): UseVueFlow => {
       ...store.getters,
       ...store.actions,
       ...store.hooksOn,
-    }
+    } as unknown as UseVueFlow<N, E>
   }
   if (currentInstance) {
     provide(VueFlow, vueFlow)
     currentInstance.vueFlow = vueFlow
   }
 
-  return vueFlow as UseVueFlow
+  return <UseVueFlow<N, E>>vueFlow
 }

src/container/VueFlow/VueFlow.vue

@@ -40,12 +40,10 @@ const {
   applyEdgeChanges,
   nodes: storedNodes,
   edges: storedEdges,
-  state,
 } = useVueFlow(props)
 useHooks(hooks.value, emit)
 const { modelValue, nodes, edges } = useVModels(props, emit)
 
-const foo = store.nodes
 if (applyDefault.value) {
   onNodesChange(applyNodeChanges)
   onEdgesChange(applyEdgeChanges)

src/container/VueFlow/watch.ts

@@ -49,7 +49,11 @@ export default (
     })
   }
 
-  watch([() => props.maxZoom], (v) => isDef(v) && store.setMaxZoom(v), { immediate: isDef(props.maxZoom) })
+  watch(
+    () => props.maxZoom,
+    (v) => isDef(v) && store.setMaxZoom(v),
+    { immediate: isDef(props.maxZoom) },
+  )
   watch(
     () => props.minZoom,
     (v) => isDef(v) && store.setMinZoom(v),

src/context/index.ts

@@ -1,5 +1,5 @@
 import { InjectionKey } from 'vue'
 import { UseVueFlow } from '~/types'
 
-export const VueFlow: InjectionKey<UseVueFlow> = Symbol('vueFlow')
+export const VueFlow: InjectionKey<UseVueFlow> = Symbol('vueFlow') as InjectionKey<UseVueFlow>
-export const NodeId: InjectionKey<string> = Symbol('nodeId')
+export const NodeId: InjectionKey<string> = Symbol('nodeId') as InjectionKey<string>

src/types/flow.ts

@@ -1,4 +1,5 @@
-import { CSSProperties, ToRefs } from 'vue'
+import { CSSProperties } from 'vue'
+import { ToRefs } from '@vue/reactivity'
 import { GraphEdge, Edge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'

src/types/store.ts

@@ -1,5 +1,5 @@
-import { ComputedRef, ToRefs } from 'vue'
+import { ComputedRef } from 'vue'
-import { UnwrapNestedRefs } from '@vue/reactivity'
+import { UnwrapNestedRefs, ToRefs } from '@vue/reactivity'
 import { Dimensions, Elements, FlowElements, FlowInstance, FlowOptions, Rect, SnapGrid, Transform, XYPosition } from './flow'
 import { HandleType, EdgeComponent, NodeComponent } from './components'
 import { Connection, ConnectionLineType, ConnectionMode, SetConnectionId } from './connection'
@@ -103,6 +103,7 @@ export interface Getters<N = any, E = N> {
   getSelectedNodes: ComputedRef<GraphNode<N>[]>
   getSelectedEdges: ComputedRef<GraphEdge<E>[]>
 }
+
 interface StoreBase<N = any, E = N> {
   state: State<N, E>
   actions: Actions<N, E>