diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts index 6462bde0..cf681b4b 100644 --- a/src/composables/useHandle.ts +++ b/src/composables/useHandle.ts @@ -1,6 +1,6 @@ import useStore from './useStore' import { getHostForElement } from '~/utils' -import { Connection, ConnectionMode, ElementId, HandleType, ReactiveFlowStore, ValidConnectionFunc } from '~/types' +import { Connection, ConnectionMode, ElementId, HandleType, FlowStore, ValidConnectionFunc } from '~/types' type Result = { elementBelow: Element | null @@ -67,7 +67,7 @@ const resetRecentHandle = (hoveredHandle: Element): void => { hoveredHandle?.classList.remove('vue-flow__handle-connecting') } -export default (store: ReactiveFlowStore = useStore()) => +export default (store: FlowStore = useStore()) => ( event: MouseEvent, handleId: ElementId, diff --git a/src/composables/useHooks.ts b/src/composables/useHooks.ts index 3616b18d..ace4b256 100644 --- a/src/composables/useHooks.ts +++ b/src/composables/useHooks.ts @@ -1,4 +1,4 @@ -import { EmitFunc, FlowHooks, FlowEvents, FlowStore, ReactiveFlowStore } from '~/types' +import { EmitFunc, FlowHooks, FlowEvents, FlowStore } from '~/types' // flow event hooks export const createHooks = (): FlowHooks => ({ @@ -49,4 +49,4 @@ const bind = (emit: EmitFunc, hooks: FlowHooks) => { } } -export default (store: ReactiveFlowStore, emit: EmitFunc) => bind(emit, store.hooks) +export default (store: FlowStore, emit: EmitFunc) => bind(emit, store.hooks) diff --git a/src/composables/useStore.ts b/src/composables/useStore.ts index 9687705a..b535378c 100644 --- a/src/composables/useStore.ts +++ b/src/composables/useStore.ts @@ -1,6 +1,6 @@ -import { FlowExportObject, FlowOptions, FlowState, ReactiveFlowStore } from '~/types' +import { FlowExportObject, FlowOptions, FlowState, FlowStore } from '~/types' import { useNewStore } from '~/store' -import { Store } from '~/context' +import { StoreSymbol } from '~/context' import { onLoadToObject, initialState } from '~/utils' let id = 0 @@ -35,12 +35,12 @@ export const createStore = (options?: FlowOptions) => { return store } -export default (options?: FlowOptions): ReactiveFlowStore => { - let store = options?.id ? createStore(options) : inject(Store, undefined) +export default (options?: FlowOptions): FlowStore => { + let store = options?.id ? createStore(options) : inject(StoreSymbol, undefined) if (!store) { store = createStore(options) } - provide(Store, store) + provide(StoreSymbol, store) return reactive(store) } diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts index f3182923..a9a1367b 100644 --- a/src/composables/useVueFlow.ts +++ b/src/composables/useVueFlow.ts @@ -1,9 +1,9 @@ import useStore from './useStore' import useHooks from './useHooks' -import { EmitFunc, ReactiveFlowStore } from '~/types' +import { EmitFunc, FlowStore } from '~/types' let key = 0 -export const initFlow = (emit: EmitFunc, id = `vue-flow-${key++}`): ReactiveFlowStore => { +export const initFlow = (emit: EmitFunc, id = `vue-flow-${key++}`): FlowStore => { const store = useStore({ id }) useHooks(store, emit) return store diff --git a/src/composables/useZoomPanHelper.ts b/src/composables/useZoomPanHelper.ts index a0e8ffae..2ed3e3f6 100644 --- a/src/composables/useZoomPanHelper.ts +++ b/src/composables/useZoomPanHelper.ts @@ -1,11 +1,11 @@ import { zoomIdentity } from 'd3-zoom' import useStore from './useStore' import { getRectOfNodes, pointToRendererPoint, getTransformForBounds, isGraphNode } from '~/utils' -import { FitViewParams, FlowTransform, GraphNode, ReactiveFlowStore, Rect, UseZoomPanHelper, XYPosition } from '~/types' +import { FitViewParams, FlowTransform, GraphNode, FlowStore, Rect, UseZoomPanHelper, XYPosition } from '~/types' const DEFAULT_PADDING = 0.1 -export default (store: ReactiveFlowStore = useStore()): UseZoomPanHelper => { +export default (store: FlowStore = useStore()): UseZoomPanHelper => { return { zoomIn: () => store.d3Selection && store.d3Zoom?.scaleBy(store.d3Selection, 1.2), zoomOut: () => store.d3Selection && store.d3Zoom?.scaleBy(store.d3Selection, 1 / 1.2), diff --git a/src/context/index.ts b/src/context/index.ts index f115fdbd..e55a254d 100644 --- a/src/context/index.ts +++ b/src/context/index.ts @@ -1,5 +1,5 @@ import { InjectionKey } from 'vue' -import { ElementId, FlowStore } from '~/types' +import { ElementId, Store as TStore } from '~/types' -export const Store: InjectionKey = Symbol('store') +export const StoreSymbol: InjectionKey = Symbol('store') export const NodeId: InjectionKey = Symbol('nodeId') diff --git a/src/store/store.ts b/src/store/store.ts index b50f25aa..12aa71fa 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -1,9 +1,9 @@ import useState from './state' import useActions from './actions' import useGetters from './getters' -import { FlowState, FlowStore } from '~/types' +import { FlowState, Store } from '~/types' -export default (id: string, preloadedState: FlowState): FlowStore => { +export default (id: string, preloadedState: FlowState): Store => { const state = reactive(useState(preloadedState)) const getters = useGetters(state) const actions = useActions(state, getters) diff --git a/src/types/store.ts b/src/types/store.ts index f12848d9..9bda61f8 100644 --- a/src/types/store.ts +++ b/src/types/store.ts @@ -89,5 +89,5 @@ export interface FlowGetters { getSelectedNodes: ComputedRef } -export type FlowStore = { state: FlowState } & ToRefs & FlowActions & FlowGetters -export type ReactiveFlowStore = UnwrapNestedRefs +export type Store = { state: FlowState } & ToRefs & FlowActions & FlowGetters +export type FlowStore = UnwrapNestedRefs diff --git a/src/utils/graph.ts b/src/utils/graph.ts index 837ca704..0788bb7d 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -11,12 +11,11 @@ import { FlowExportObject, NodeExtent, Dimensions, - FlowStore, GraphNode, FlowElements, GraphEdge, NextElements, - ReactiveFlowStore, + FlowStore, FlowState, } from '~/types' import { useWindow } from '~/composables' @@ -163,7 +162,7 @@ export const pointToRendererPoint = ( return position } -export const onLoadProject = (currentStore: ReactiveFlowStore) => (position: XYPosition) => +export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) => pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid) export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({ @@ -278,7 +277,7 @@ export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => { return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target)) } -export const onLoadGetElements = (currentStore: ReactiveFlowStore) => (): FlowElements => currentStore.elements +export const onLoadGetElements = (currentStore: FlowStore) => (): FlowElements => currentStore.elements export const onLoadToObject = (currentStore: FlowState) => (): FlowExportObject => { // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage