diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts index 789e6adb..b7e55d8a 100644 --- a/src/composables/useVueFlow.ts +++ b/src/composables/useVueFlow.ts @@ -4,9 +4,11 @@ import { VueFlow } from '~/context' import { useStore } from '~/store' let id = 0 -export default (options?: Partial): UseVueFlow => { +export default (options?: Partial>): UseVueFlow => { 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): UseVueFlow => { ...store.getters, ...store.actions, ...store.hooksOn, - } + } as unknown as UseVueFlow } if (currentInstance) { provide(VueFlow, vueFlow) currentInstance.vueFlow = vueFlow } - return vueFlow as UseVueFlow + return >vueFlow } diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue index e6472545..5a722721 100644 --- a/src/container/VueFlow/VueFlow.vue +++ b/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) diff --git a/src/container/VueFlow/watch.ts b/src/container/VueFlow/watch.ts index 4204f868..5f03d530 100644 --- a/src/container/VueFlow/watch.ts +++ b/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), diff --git a/src/context/index.ts b/src/context/index.ts index 1eb6426f..0bb5ee15 100644 --- a/src/context/index.ts +++ b/src/context/index.ts @@ -1,5 +1,5 @@ import { InjectionKey } from 'vue' import { UseVueFlow } from '~/types' -export const VueFlow: InjectionKey = Symbol('vueFlow') -export const NodeId: InjectionKey = Symbol('nodeId') +export const VueFlow: InjectionKey = Symbol('vueFlow') as InjectionKey +export const NodeId: InjectionKey = Symbol('nodeId') as InjectionKey diff --git a/src/types/flow.ts b/src/types/flow.ts index 656eb0a8..dd267dc1 100644 --- a/src/types/flow.ts +++ b/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' diff --git a/src/types/store.ts b/src/types/store.ts index b4b06751..02e27d55 100644 --- a/src/types/store.ts +++ b/src/types/store.ts @@ -1,5 +1,5 @@ -import { ComputedRef, ToRefs } from 'vue' -import { UnwrapNestedRefs } from '@vue/reactivity' +import { ComputedRef } from 'vue' +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 { getSelectedNodes: ComputedRef[]> getSelectedEdges: ComputedRef[]> } + interface StoreBase { state: State actions: Actions