fix(flow): store & usevueflow types

package/src/composables/useHandle.ts

@@ -1,6 +1,6 @@
 import useVueFlow from './useVueFlow'
 import { getHostForElement } from '~/utils'
-import { Connection, ConnectionMode, HandleType, FlowStore, ValidConnectionFunc } from '~/types'
+import { Connection, ConnectionMode, HandleType, Store, 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: FlowStore = useVueFlow().store) => {
+export default (store: Store = useVueFlow().store) => {
   let recentHoveredHandle: Element
 
   const onMouseDown = (

package/src/composables/useVueFlow.ts

@@ -30,14 +30,12 @@ export class Storage {
 
   public create(id: string, options?: Partial<FlowOptions>) {
     const store = useStore(options)
-    const flow = {
+    const flow: UseVueFlow = {
       id,
-      store: reactive(store),
+      store,
+      ...(store as any),
       ...toRefs(store.state),
-      ...store.getters,
+    }
-      ...store.actions,
-      ...store.hooksOn,
-    } as unknown as UseVueFlow
     this.set(id, flow)
     return flow
   }

package/src/composables/useZoomPanHelper.ts

@@ -2,13 +2,13 @@ import { zoomIdentity } from 'd3-zoom'
 import useVueFlow from './useVueFlow'
 import useWindow from './useWindow'
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'
-import { GraphNode, FlowStore, UseZoomPanHelper, D3Selection } from '~/types'
+import { GraphNode, Store, UseZoomPanHelper, D3Selection } from '~/types'
 
 const DEFAULT_PADDING = 0.1
 
 const transition = (selection: D3Selection, ms = 0) => selection.transition().duration(ms)
 
-export default (store: FlowStore = useVueFlow().store): UseZoomPanHelper => ({
+export default (store: Store = useVueFlow().store): UseZoomPanHelper => ({
   zoomIn: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1.2),
   zoomOut: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1 / 1.2),
   zoomTo: (zoomLevel, options) =>

package/src/container/VueFlow/VueFlow.vue

@@ -43,7 +43,7 @@ const {
   nodes: storedNodes,
   edges: storedEdges,
 } = useVueFlow(props)
-useHooks(hooks.value, emit)
+useHooks(emit, hooks.value)
 const { modelValue, nodes, edges } = useVModels(props, emit)
 onMounted(() => useWatch({ modelValue, nodes, edges }, props, store))
 

package/src/container/VueFlow/watch.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'vue'
-import { FlowProps, FlowStore, Node, Edge, Elements } from '~/types'
+import { FlowProps, Store, Node, Edge, Elements } from '~/types'
 
 const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
 export default (
@@ -13,7 +13,7 @@ export default (
     edges?: Ref<Edge[] | undefined>
   },
   props: FlowProps,
-  store: FlowStore,
+  store: Store,
 ) => {
   const scope = getCurrentScope()
   scope?.run(() => {

package/src/store/hooks.ts

@@ -47,4 +47,4 @@ const bind = (emit: EmitFunc, hooks: FlowHooks) => {
   }
 }
 
-export default (hooks: FlowHooks, emit: EmitFunc) => bind(emit, hooks)
+export default (emit: EmitFunc, hooks: FlowHooks) => bind(emit, hooks)

package/src/store/store.ts

@@ -1,7 +1,7 @@
 import useState from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowHooksOn, FlowOptions, State, Store } from '~/types'
+import { FlowHook, FlowHooksOn, FlowOptions, Store, State } from '~/types'
 
 export default (preloadedState?: FlowOptions): Store => {
   const state: State = useState(preloadedState)
@@ -11,7 +11,7 @@ export default (preloadedState?: FlowOptions): Store => {
   const hooksOn: FlowHooksOn = <any>{}
   Object.entries(reactiveState.hooks).forEach(([n, h]) => {
     const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}`
-    hooksOn[<keyof FlowHooksOn>name] = h.on as any
+    hooksOn[<keyof FlowHooksOn>name] = h.on as FlowHook['on']
   })
   actions.setState(reactiveState)
   if (preloadedState) {
@@ -20,13 +20,11 @@ export default (preloadedState?: FlowOptions): Store => {
     if (preloadedState.edges) actions.setEdges(preloadedState.edges)
   }
 
-  return {
+  return reactive({
     state: reactiveState,
-    actions,
+    ...hooksOn,
-    getters,
-    hooksOn,
     ...toRefs(reactiveState),
     ...getters,
     ...actions,
-  } as unknown as Store
+  })
 }

package/src/types/store.ts

@@ -96,6 +96,7 @@ export interface Actions<N = any, E = N> {
   addNodes: <NA = N>(nodes: Node<NA>[], extent?: CoordinateExtent) => void
   /** parses edges and adds to state */
   addEdges: <EA = E>(edgesOrConnections: (Edge<EA> | Connection)[]) => void
+  /** updates an edge */
   updateEdge: <EU = E>(oldEdge: GraphEdge<EU>, newConnection: Connection) => boolean
   applyEdgeChanges: <ED = E>(changes: EdgeChange[]) => GraphEdge<ED>[]
   applyNodeChanges: <ND = N>(changes: NodeChange[]) => GraphNode<ND>[]
@@ -137,17 +138,13 @@ export type ComputedGetters<N = any, E = N> = { [key in keyof Getters<N, E>]: Co
 
 interface StoreBase<N = any, E = N> {
   state: State<N, E>
-  actions: Actions<N, E>
-  getters: ComputedGetters<N, E>
-  hooksOn: FlowHooksOn<N, E>
 }
 
-export type Store<N = any, E = N> = StoreBase<N, E> & ToRefs<State<N, E>> & Actions<N, E> & ComputedGetters<N, E>
+export type Store<N = any, E = N> = StoreBase<N, E> & State<N, E> & Actions<N, E> & Getters<N, E>
-export type FlowStore<N = any, E = N> = StoreBase<N, E> & State<N, E> & Actions<N, E> & Getters<N, E>
 
 export type UseVueFlow<N = any, E = N> = {
   id: string
-  store: FlowStore<N, E>
+  store: Store<N, E>
 } & FlowHooksOn<N, E> &
   ToRefs<State<N, E>> &
   ComputedGetters<N, E> &

package/src/utils/graph.ts

@@ -9,7 +9,7 @@ import {
   FlowElements,
   FlowExportObject,
   State,
-  FlowStore,
+  Store,
   GraphEdge,
   GraphNode,
   Node,
@@ -207,7 +207,7 @@ export const pointToRendererPoint = (
   return position
 }
 
-export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) =>
+export const onLoadProject = (currentStore: Store) => (position: XYPosition) =>
   pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid)
 
 const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
@@ -287,9 +287,9 @@ export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => {
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
 }
 
-export const onLoadGetNodes = (store: FlowStore) => (): GraphNode[] => store.nodes
+export const onLoadGetNodes = (store: Store) => (): GraphNode[] => store.nodes
-export const onLoadGetEdges = (store: FlowStore) => (): GraphEdge[] => store.edges
+export const onLoadGetEdges = (store: Store) => (): GraphEdge[] => store.edges
-export const onLoadGetElements = (store: FlowStore) => (): FlowElements => [...store.nodes, ...store.edges]
+export const onLoadGetElements = (store: Store) => (): FlowElements => [...store.nodes, ...store.edges]
 
 export const onLoadToObject = (store: State) => (): FlowExportObject => {
   // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage