diff --git a/src/composables/index.ts b/src/composables/index.ts index 3bf6baf2..2fdf6964 100644 --- a/src/composables/index.ts +++ b/src/composables/index.ts @@ -3,6 +3,5 @@ export { default as useHooks } from './useHooks' export * from './useHooks' export { default as useKeyPress } from './useKeyPress' export { default as useZoomPanHelper } from './useZoomPanHelper' -export { default as useStore, createStore } from './useStore' export { default as useWindow } from './useWindow' export { default as useVueFlow, initFlow } from './useVueFlow' diff --git a/src/composables/useStore.ts b/src/composables/useStore.ts deleted file mode 100644 index 2b3323ef..00000000 --- a/src/composables/useStore.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { getCurrentInstance } from 'vue' -import { FlowExportObject, FlowOptions, FlowState, FlowStore } from '~/types' -import { useFlowStore, initialState } from '~/store' -import { StoreSymbol } from '~/context' -import { onLoadToObject } from '~/utils' - -let id = 0 -export const createStore = (options?: FlowOptions) => { - const withStorage = options?.storageKey ?? false - let storedState = ref() - const initial = initialState() - const storageKey = options?.id ?? `vue-flow-${id++}` - delete options?.id - const preloadedState = { - ...initial, - ...(options as FlowState), - } - if (withStorage) { - storedState = useStorage(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 }) - if (storedState.value) { - preloadedState.elements = - storedState.value.nodes || storedState.value.edges - ? [...storedState.value.nodes, ...storedState.value.edges] - : options?.elements ?? [] - if (storedState.value.position && storedState.value.zoom) - preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom] - } - } - const store = useFlowStore(storageKey, preloadedState) - if (withStorage && storageKey === store.id) { - const toObject = onLoadToObject(store.state) - watch( - store.state, - () => { - storedState.value = toObject() - }, - { deep: true }, - ) - } - return store -} - -export default (options?: FlowOptions): FlowStore => { - const currentInstance = getCurrentInstance() - let store = currentInstance ? inject(StoreSymbol, undefined) : false - if (!store || (store && options?.id && options.id !== store.id)) { - store = createStore(options) - } - if (currentInstance) provide(StoreSymbol, store) - - return reactive(store) -} diff --git a/src/store/index.ts b/src/store/index.ts index 46e653f6..40947803 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,2 +1,2 @@ -export { default as useFlowStore } from './store' +export { default as useStore } from './store' export * from './state' diff --git a/src/store/store.ts b/src/store/store.ts index f92f15b3..faaaa3b7 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -1,9 +1,12 @@ -import useState from './state' +import { getCurrentInstance } from 'vue' +import useState, { initialState } from './state' import useActions from './actions' import useGetters from './getters' -import { FlowState, Store } from '~/types' +import { FlowExportObject, FlowOptions, FlowState, FlowStore, Store } from '~/types' +import { StoreSymbol } from '~/context' +import { onLoadToObject } from '~/utils' -export default (id: string, preloadedState: FlowState): Store => { +const useFlowStore = (id: string, preloadedState: FlowState): Store => { const state = reactive(useState(preloadedState)) const getters = useGetters(state) const actions = useActions(state, getters) @@ -15,3 +18,50 @@ export default (id: string, preloadedState: FlowState): Store => { ...actions, } } + +let id = 0 +export const createStore = (options?: FlowOptions) => { + const withStorage = options?.storageKey ?? false + let storedState = ref() + const initial = initialState() + const storageKey = options?.id ?? `vue-flow-${id++}` + delete options?.id + const preloadedState = { + ...initial, + ...(options as FlowState), + } + if (withStorage) { + storedState = useStorage(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 }) + if (storedState.value) { + preloadedState.elements = + storedState.value.nodes || storedState.value.edges + ? [...storedState.value.nodes, ...storedState.value.edges] + : options?.elements ?? [] + if (storedState.value.position && storedState.value.zoom) + preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom] + } + } + const store = useFlowStore(storageKey, preloadedState) + if (withStorage && storageKey === store.id) { + const toObject = onLoadToObject(store.state) + watch( + store.state, + () => { + storedState.value = toObject() + }, + { deep: true }, + ) + } + return store +} + +export default (options?: FlowOptions): FlowStore => { + const currentInstance = getCurrentInstance() + let store = currentInstance ? inject(StoreSymbol, undefined) : false + if (!store || (store && options?.id && options.id !== store.id)) { + store = createStore(options) + } + if (currentInstance) provide(StoreSymbol, store) + + return reactive(store) +}