From 981511c76f9a6a61cff35b3b936d7dd8e9abc853 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Thu, 31 Mar 2022 19:20:36 +0200 Subject: [PATCH] fix(flow): computed getter type --- package/src/composables/useVueFlow.ts | 37 ++++++++++++++++++++++----- package/src/store/actions.ts | 2 +- package/src/store/getters.ts | 9 +++---- package/src/store/index.ts | 1 - package/src/store/store.ts | 30 ---------------------- package/src/types/store.ts | 13 +++++----- 6 files changed, 42 insertions(+), 50 deletions(-) delete mode 100644 package/src/store/store.ts diff --git a/package/src/composables/useVueFlow.ts b/package/src/composables/useVueFlow.ts index 065c0d17..f0510422 100644 --- a/package/src/composables/useVueFlow.ts +++ b/package/src/composables/useVueFlow.ts @@ -1,7 +1,9 @@ import { EffectScope } from 'vue' -import { ElementData, FlowOptions, UseVueFlow } from '~/types' +import { ElementData, FlowHooksOn, FlowOptions, State, UseVueFlow } from '~/types' import { VueFlow } from '~/context' -import { useStore } from '~/store' +import useState from '~/store/state' +import useGetters from '~/store/getters' +import useActions from '~/store/actions' export class Storage { public currentId = 0 @@ -28,11 +30,34 @@ export class Storage { this.flows.delete(id) } - public create(id: string, options?: Partial): UseVueFlow { - const store = useStore(options) + public create(id: string, preloadedState?: Partial): UseVueFlow { + const state: State = useState(preloadedState) + const reactiveState = reactive(state) + const getters = useGetters(reactiveState) + const actions = useActions(reactiveState, getters) + const hooksOn: FlowHooksOn = {} + Object.entries(reactiveState.hooks).forEach(([n, h]) => { + const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}` as keyof FlowHooksOn + hooksOn[name] = h.on as any + }) + 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) + } + + const store = reactive({ + ...hooksOn, + ...toRefs(reactiveState), + ...getters, + ...actions, + }) const flow: UseVueFlow = { - ...(store as any), - ...toRefs(store.state), + ...hooksOn, + ...getters, + ...actions, + ...toRefs(reactiveState), id, store, } diff --git a/package/src/store/actions.ts b/package/src/store/actions.ts index 35846c68..225776e1 100644 --- a/package/src/store/actions.ts +++ b/package/src/store/actions.ts @@ -1,5 +1,4 @@ import useState from './state' -import { ComputedGetters } from './getters' import { Actions, Connection, @@ -14,6 +13,7 @@ import { NodeDimensionChange, NodePositionChange, State, + ComputedGetters, } from '~/types' import { applyNodeChanges as applyNodes, diff --git a/package/src/store/getters.ts b/package/src/store/getters.ts index be9de319..47886740 100644 --- a/package/src/store/getters.ts +++ b/package/src/store/getters.ts @@ -1,10 +1,7 @@ -import { ComputedRef } from 'vue' import { defaultEdgeTypes, defaultNodeTypes } from './state' -import { State, GraphEdge, GraphNode, Getters } from '~/types' +import { State, GraphEdge, GraphNode, ComputedGetters } from '~/types' import { getNodesInside, isEdgeVisible } from '~/utils' -export type ComputedGetters = { [key in keyof Getters]: ComputedRef[key]> } - export default (state: State): ComputedGetters => { const getEdgeTypes = computed(() => { const edgeTypes: Record = { @@ -27,7 +24,7 @@ export default (state: State): ComputedGetters => { }) const getNodes = computed(() => { - if (state.paneReady && state.dimensions.width && state.dimensions.height) { + if (state.paneReady) { const nodes = state.nodes.filter((n) => !n.hidden) return state.onlyRenderVisibleElements ? nodes && @@ -48,7 +45,7 @@ export default (state: State): ComputedGetters => { }) const getEdges = computed(() => { - if (state.paneReady && state.dimensions.width && state.dimensions.height) { + if (state.paneReady) { if (!state.onlyRenderVisibleElements) return state.edges.filter( (e) => !e.hidden && e.targetNode && !e.targetNode.hidden && e.sourceNode && !e.sourceNode.hidden, diff --git a/package/src/store/index.ts b/package/src/store/index.ts index f1aa12bd..d51c2f08 100644 --- a/package/src/store/index.ts +++ b/package/src/store/index.ts @@ -1,4 +1,3 @@ export { default as useHooks, createHooks } from './hooks' -export { default as useStore } from './store' export * from './actions' export * from './state' diff --git a/package/src/store/store.ts b/package/src/store/store.ts deleted file mode 100644 index aa4a3039..00000000 --- a/package/src/store/store.ts +++ /dev/null @@ -1,30 +0,0 @@ -import useState from './state' -import useActions from './actions' -import useGetters from './getters' -import { FlowHooksOn, FlowOptions, Store, State } from '~/types' - -export default (preloadedState?: FlowOptions): Store => { - const state: State = useState(preloadedState) - const reactiveState = reactive(state) - const getters = useGetters(reactiveState) - const actions = useActions(reactiveState, getters) - const hooksOn: FlowHooksOn = {} - Object.entries(reactiveState.hooks).forEach(([n, h]) => { - const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}` as keyof FlowHooksOn - hooksOn[name] = h.on as any - }) - 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 reactive({ - state: reactiveState, - ...hooksOn, - ...toRefs(reactiveState), - ...getters, - ...actions, - }) -} diff --git a/package/src/types/store.ts b/package/src/types/store.ts index 1f147337..670b8d20 100644 --- a/package/src/types/store.ts +++ b/package/src/types/store.ts @@ -1,4 +1,4 @@ -import { CSSProperties, ToRefs } from 'vue' +import { ComputedRef, CSSProperties, ToRefs } from 'vue' import { Dimensions, ElementData, @@ -146,10 +146,11 @@ export interface Getters { getSelectedEdges: GraphEdge[] } -export type Store = { state: State } & State< - NodeData, - EdgeData -> & +export type ComputedGetters = { + [key in keyof Getters]: ComputedRef[key]> +} + +export type Store = State & Actions & Getters @@ -158,5 +159,5 @@ export type UseVueFlow = { store: Store } & FlowHooksOn & ToRefs> & - Getters & + ComputedGetters & Actions