fix(flow): computed getter type

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<FlowOptions>): UseVueFlow {
+  public create(id: string, preloadedState?: Partial<FlowOptions>): UseVueFlow {
-    const store = useStore(options)
+    const state: State = useState(preloadedState)
+    const reactiveState = reactive(state)
+    const getters = useGetters(reactiveState)
+    const actions = useActions(reactiveState, getters)
+    const hooksOn: FlowHooksOn = <any>{}
+    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),
+      ...hooksOn,
-      ...toRefs(store.state),
+      ...getters,
+      ...actions,
+      ...toRefs(reactiveState),
       id,
       store,
     }

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,

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<N = any, E = N> = { [key in keyof Getters<N, E>]: ComputedRef<Getters<N, E>[key]> }
-
 export default (state: State): ComputedGetters => {
   const getEdgeTypes = computed(() => {
     const edgeTypes: Record<string, any> = {
@@ -27,7 +24,7 @@ export default (state: State): ComputedGetters => {
   })
 
   const getNodes = computed<GraphNode[]>(() => {
-    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<GraphEdge[]>(() => {
-    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,

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'

package/src/store/store.ts

@@ -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 = <any>{}
-  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,
-  })
-}

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<NodeData = ElementData, EdgeData = ElementData> {
   getSelectedEdges: GraphEdge<EdgeData>[]
 }
 
-export type Store<NodeData = ElementData, EdgeData = ElementData> = { state: State<NodeData, EdgeData> } & State<
+export type ComputedGetters<NodeData = ElementData, EdgeData = ElementData> = {
-  NodeData,
+  [key in keyof Getters<NodeData, EdgeData>]: ComputedRef<Getters<NodeData, EdgeData>[key]>
-  EdgeData
+}
-> &
+
+export type Store<NodeData = ElementData, EdgeData = ElementData> = State<NodeData, EdgeData> &
   Actions<NodeData, EdgeData> &
   Getters<NodeData, EdgeData>
 
@@ -158,5 +159,5 @@ export type UseVueFlow<NodeData = ElementData, EdgeData = ElementData> = {
   store: Store<NodeData, EdgeData>
 } & FlowHooksOn<NodeData, EdgeData> &
   ToRefs<State<NodeData, EdgeData>> &
-  Getters<NodeData, EdgeData> &
+  ComputedGetters<NodeData, EdgeData> &
   Actions<NodeData, EdgeData>