update(types)!: Rename FlowActions/FlowGetters etc. to Actions, Getters

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

cypress/integration/1-store/setState.spec.ts

@@ -1,5 +1,5 @@
 import { useVueFlow } from '~/composables'
-import { FlowState, FlowStore } from '~/types'
+import { State, FlowStore } from '~/types'
 import useState from '~/store/state'
 describe('test store state', () => {
   let store: FlowStore
@@ -13,8 +13,8 @@ describe('test store state', () => {
   it('has default initial state', () => {
     const initial = useState()
     Object.keys(store.state).forEach((state) => {
-      const storedState = store[<keyof FlowState>state]
+      const storedState = store[<keyof State>state]
-      const initialVal = initial[<keyof FlowState>state]
+      const initialVal = initial[<keyof State>state]
       if (state === 'initialized') return expect(storedState).to.be.true
       expect(JSON.stringify(storedState)).to.eq(JSON.stringify(initialVal))
     })

src/store/actions.ts

@@ -1,14 +1,4 @@
-import {
+import { CoordinateExtent, EdgeChange, Actions, Getters, State, GraphNode, Node, NodeChange, NodeDimensionChange } from '~/types'
-  CoordinateExtent,
-  EdgeChange,
-  FlowActions,
-  FlowGetters,
-  FlowState,
-  GraphNode,
-  Node,
-  NodeChange,
-  NodeDimensionChange,
-} from '~/types'
 import {
   createPositionChange,
   createSelectionChange,
@@ -50,8 +40,8 @@ export const parseChildren = (
   }
 }
 
-export default (state: FlowState, getters: FlowGetters): FlowActions => {
+export default (state: State, getters: Getters): Actions => {
-  const updateNodePosition: FlowActions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => {
+  const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => {
     const changes: NodeDimensionChange[] = []
 
     state.nodes.forEach((node) => {
@@ -68,7 +58,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
 
     if (changes.length) state.hooks.nodesChange.trigger(changes)
   }
-  const addSelectedNodes: FlowActions['addSelectedNodes'] = (nodes) => {
+  const addSelectedNodes: Actions['addSelectedNodes'] = (nodes) => {
     const selectedNodesIds = nodes.map((n) => n.id)
 
     let changedNodes: NodeChange[]
@@ -77,7 +67,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
 
     if (changedNodes.length) state.hooks.nodesChange.trigger(changedNodes)
   }
-  const addSelectedEdges: FlowActions['addSelectedEdges'] = (edges) => {
+  const addSelectedEdges: Actions['addSelectedEdges'] = (edges) => {
     const selectedEdgesIds = edges.map((e) => e.id)
 
     let changedEdges: EdgeChange[]
@@ -86,27 +76,27 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
 
     if (changedEdges.length) state.hooks.edgesChange.trigger(changedEdges)
   }
-  const addSelectedElements: FlowActions['addSelectedElements'] = (elements) => {
+  const addSelectedElements: Actions['addSelectedElements'] = (elements) => {
     addSelectedNodes(elements.filter(isGraphNode))
     addSelectedEdges(elements.filter(isGraphEdge))
   }
-  const setMinZoom: FlowActions['setMinZoom'] = (minZoom: any) => {
+  const setMinZoom: Actions['setMinZoom'] = (minZoom: any) => {
     state.d3Zoom?.scaleExtent([minZoom, state.maxZoom])
     state.minZoom = minZoom
   }
-  const setMaxZoom: FlowActions['setMaxZoom'] = (maxZoom: any) => {
+  const setMaxZoom: Actions['setMaxZoom'] = (maxZoom: any) => {
     state.d3Zoom?.scaleExtent([state.minZoom, maxZoom])
     state.maxZoom = maxZoom
   }
-  const setTranslateExtent: FlowActions['setTranslateExtent'] = (translateExtent: any) => {
+  const setTranslateExtent: Actions['setTranslateExtent'] = (translateExtent: any) => {
     state.d3Zoom?.translateExtent(translateExtent)
     state.translateExtent = translateExtent
   }
-  const resetSelectedElements: FlowActions['resetSelectedElements'] = () => {
+  const resetSelectedElements: Actions['resetSelectedElements'] = () => {
     addSelectedNodes([])
     addSelectedEdges([])
   }
-  const setConnectionNodeId: FlowActions['setConnectionNodeId'] = ({
+  const setConnectionNodeId: Actions['setConnectionNodeId'] = ({
     connectionHandleId,
     connectionHandleType,
     connectionNodeId,
@@ -115,13 +105,13 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     state.connectionHandleId = connectionHandleId
     state.connectionHandleType = connectionHandleType
   }
-  const setInteractive: FlowActions['setInteractive'] = (isInteractive) => {
+  const setInteractive: Actions['setInteractive'] = (isInteractive) => {
     state.nodesDraggable = isInteractive
     state.nodesConnectable = isInteractive
     state.elementsSelectable = isInteractive
   }
 
-  const setNodes: FlowActions['setNodes'] = (nodes, extent?: CoordinateExtent) => {
+  const setNodes: Actions['setNodes'] = (nodes, extent?: CoordinateExtent) => {
     nodes = nodes.flatMap((node) => {
       const children: GraphNode[] = []
       parseChildren(node, undefined, children, extent ?? state.nodeExtent, getters.getNode.value)
@@ -129,7 +119,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     })
     state.nodes = <GraphNode[]>nodes
   }
-  const setEdges: FlowActions['setEdges'] = (edges) => {
+  const setEdges: Actions['setEdges'] = (edges) => {
     state.edges = edges.map((edge) => {
       const sourceNode = getters.getNode.value(edge.source)!
       const targetNode = getters.getNode.value(edge.target)!
@@ -146,13 +136,13 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     })
   }
 
-  const setElements: FlowActions['setElements'] = (elements, extent) => {
+  const setElements: Actions['setElements'] = (elements, extent) => {
     if (!state.initialized && !elements.length) return
     setNodes(elements.filter(isNode), extent)
     setEdges(elements.filter(isEdge))
   }
 
-  const setState: FlowActions['setState'] = (opts) => {
+  const setState: Actions['setState'] = (opts) => {
     if (typeof opts.modelValue !== 'undefined') setElements(opts.modelValue, opts.nodeExtent ?? state.nodeExtent)
     if (typeof opts.nodes !== 'undefined') setNodes(opts.nodes, opts.nodeExtent ?? state.nodeExtent)
     if (typeof opts.edges !== 'undefined') setEdges(opts.edges)
@@ -181,6 +171,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
     if (typeof opts.snapToGrid !== 'undefined') state.snapToGrid = opts.snapToGrid
     if (typeof opts.snapGrid !== 'undefined') state.snapGrid = opts.snapGrid
     if (typeof opts.nodeExtent !== 'undefined') state.nodeExtent = opts.nodeExtent
+    if (typeof opts.fitViewOnInit !== 'undefined') state.fitViewOnInit = opts.fitViewOnInit
     if (!state.paneReady)
       until(() => state.d3Zoom)
         .not.toBeUndefined()

src/store/getters.ts

@@ -1,8 +1,8 @@
 import { defaultEdgeTypes, defaultNodeTypes } from './state'
-import { FlowGetters, FlowState, GraphEdge, GraphNode } from '~/types'
+import { Getters, State, GraphEdge, GraphNode } from '~/types'
 import { getNodesInside, isEdgeVisible } from '~/utils'
 
-export default (state: FlowState): FlowGetters => {
+export default (state: State): Getters => {
   const getEdgeTypes = computed(() => {
     const edgeTypes: Record<string, any> = {
       ...defaultEdgeTypes,
@@ -69,17 +69,17 @@ export default (state: FlowState): FlowGetters => {
     return []
   })
 
-  const getSelectedNodes: FlowGetters['getSelectedNodes'] = computed(() => state.nodes.filter((n) => n.selected))
+  const getSelectedNodes: Getters['getSelectedNodes'] = computed(() => state.nodes.filter((n) => n.selected))
-  const getSelectedEdges: FlowGetters['getSelectedEdges'] = computed(() => state.edges.filter((e) => e.selected))
+  const getSelectedEdges: Getters['getSelectedEdges'] = computed(() => state.edges.filter((e) => e.selected))
-  const getSelectedElements: FlowGetters['getSelectedElements'] = computed(() => [
+  const getSelectedElements: Getters['getSelectedElements'] = computed(() => [
     ...(getSelectedNodes.value ?? []),
     ...(getSelectedEdges.value ?? []),
   ])
 
   const nodeIds = computed(() => state.nodes.map((n) => n.id))
   const edgeIds = computed(() => state.edges.map((e) => e.id))
-  const getNode: FlowGetters['getNode'] = computed(() => (id: string) => state.nodes[nodeIds.value.indexOf(id)])
+  const getNode: Getters['getNode'] = computed(() => (id: string) => state.nodes[nodeIds.value.indexOf(id)])
-  const getEdge: FlowGetters['getEdge'] = computed(() => (id: string) => state.edges[edgeIds.value.indexOf(id)])
+  const getEdge: Getters['getEdge'] = computed(() => (id: string) => state.edges[edgeIds.value.indexOf(id)])
 
   return {
     getNode,

src/store/state.ts

@@ -1,5 +1,5 @@
 import { createHooks } from './hooks'
-import { ConnectionMode, FlowState, PanOnScrollMode, DefaultNodeTypes, DefaultEdgeTypes, ConnectionLineType } from '~/types'
+import { ConnectionMode, State, PanOnScrollMode, DefaultNodeTypes, DefaultEdgeTypes, ConnectionLineType } from '~/types'
 import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
 import { isEdge, isNode } from '~/utils'
 
@@ -16,8 +16,8 @@ export const defaultEdgeTypes: DefaultEdgeTypes = {
   smoothstep: SmoothStepEdge,
 }
 
-export default (opts?: Partial<FlowState>): FlowState => {
+export default (opts?: Partial<State>): State => {
-  const state: FlowState = {
+  const state: State = {
     nodes: [],
     edges: [],
 
@@ -129,6 +129,7 @@ export default (opts?: Partial<FlowState>): FlowState => {
     if (typeof opts.minZoom !== 'undefined') state.minZoom = opts.minZoom
     if (typeof opts.translateExtent !== 'undefined') state.translateExtent = opts.translateExtent
     if (typeof opts.applyDefault !== 'undefined') state.applyDefault = opts.applyDefault
+    if (typeof opts.fitViewOnInit !== 'undefined') state.fitViewOnInit = opts.fitViewOnInit
   }
 
   return state

src/store/store.ts

@@ -1,10 +1,10 @@
 import useState from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowExportObject, FlowHooksOn, FlowOptions, FlowState, GraphEdge, GraphNode, Store } from '~/types'
+import { FlowExportObject, FlowHooksOn, FlowOptions, State, GraphEdge, GraphNode, Store } from '~/types'
 import { isEdge, isNode, onLoadToObject } from '~/utils'
 
-const useFlowStore = (preloadedState: FlowState): Store => {
+const useFlowStore = (preloadedState: State): Store => {
   const state = reactive(useState(preloadedState))
   const getters = useGetters(state)
   const actions = useActions(state, getters)
@@ -17,6 +17,8 @@ const useFlowStore = (preloadedState: FlowState): Store => {
 
   return {
     state,
+    actions,
+    getters,
     hooksOn,
     ...toRefs(state),
     ...getters,
@@ -24,11 +26,11 @@ const useFlowStore = (preloadedState: FlowState): Store => {
   }
 }
 
-export default (id: string, options?: FlowOptions) => {
+export default (id: string, options?: FlowOptions): Store => {
   const withStorage = options?.storageKey ?? false
   let storedState = ref<FlowExportObject>()
   const storageKey = id ?? options?.id
-  const preloadedState = options as FlowState
+  const preloadedState = options as State
   if (withStorage) {
     storedState = useStorage<FlowExportObject>(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 })
     if (storedState.value) {

src/types/flow.ts

@@ -3,7 +3,7 @@ import { GraphEdge, Edge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { Connection, ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
-import { FlowActions, FlowStore } from './store'
+import { Actions, Getters, State, FlowStore } from './store'
 import { EdgeChange, FlowHooksOn, NodeChange } from './hooks'
 
 export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
@@ -140,21 +140,24 @@ export interface UseElementsStateOptions extends UseStateOptions {
 export type UseNodesState<N = any> = {
   nodes: GraphNode<N>[]
   applyNodeChanges: <ND = N>(changes: NodeChange[]) => GraphNode<ND>[]
-  setNodes: FlowActions['setNodes']
+  setNodes: Actions['setNodes']
   addNodes: <NA = N>(nodes: Node<NA>[], extent?: CoordinateExtent) => GraphNode<NA>[]
   OnNodesChange: FlowHooksOn['OnNodesChange']
 }
 export type UseEdgesState<E = any> = {
   edges: GraphEdge[]
   applyEdgeChanges: <ED = E>(changes: EdgeChange[]) => GraphEdge<ED>[]
-  setEdges: FlowActions['setEdges']
+  setEdges: Actions['setEdges']
   addEdges: <EA = E>(params: (Edge<EA> | Connection)[]) => GraphEdge<EA>[]
   updateEdge: <EU = E>(oldEdge: GraphEdge<EU>, newConnection: Connection) => GraphEdge<EU> | false
   OnEdgesChange: FlowHooksOn['OnEdgesChange']
 }
 export type UseElementsState<N = any, E = N> = UseNodesState<N> & UseEdgesState<E>
+
 export type UseVueFlow<N = any, E = N> = {
   id: string
   store: FlowStore<N, E>
 } & FlowHooksOn<N, E> &
-  ToRefs<FlowStore<N, E>>
+  ToRefs<State<N, E>> &
+  Getters &
+  Actions<N, E>

src/types/store.ts

@@ -8,7 +8,7 @@ import { GraphNode, CoordinateExtent, Node } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode } from './zoom'
 import { FlowHooks, FlowHooksOn } from './hooks'
 
-export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id' | 'elements'> {
+export interface State<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id' | 'elements'> {
   hooks: FlowHooks
   instance?: FlowInstance
 
@@ -69,7 +69,7 @@ export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'
   vueFlowVersion: string
 }
 
-export interface FlowActions<N = any, E = N> {
+export interface Actions<N = any, E = N> {
   setElements: (elements: Elements<N, E>, extent?: CoordinateExtent) => void
   setNodes: (nodes: Node<N>[], extent?: CoordinateExtent) => void
   setEdges: (edges: Edge<E>[]) => void
@@ -86,7 +86,7 @@ export interface FlowActions<N = any, E = N> {
   updateNodePosition: ({ id, diff, dragging }: { id?: string; diff?: XYPosition; dragging?: boolean }) => void
 }
 
-export interface FlowGetters<N = any, E = N> {
+export interface Getters<N = any, E = N> {
   getEdgeTypes: ComputedRef<Record<string, EdgeComponent>>
   getNodeTypes: ComputedRef<Record<string, NodeComponent>>
   getNodes: ComputedRef<GraphNode<N>[]>
@@ -97,8 +97,11 @@ export interface FlowGetters<N = any, E = N> {
   getSelectedNodes: ComputedRef<GraphNode<N>[]>
   getSelectedEdges: ComputedRef<GraphEdge<E>[]>
 }
-
+interface StoreBase<N = any, E = N> {
-export type Store<N = any, E = N> = { state: FlowState<N, E>; hooksOn: FlowHooksOn } & ToRefs<FlowState<N, E>> &
+  state: State<N, E>
-  FlowActions<N, E> &
+  actions: Actions<N, E>
-  FlowGetters<N, E>
+  getters: Getters<N, E>
+  hooksOn: FlowHooksOn<N, E>
+}
+export type Store<N = any, E = N> = StoreBase & ToRefs<State<N, E>> & Actions<N, E> & Getters<N, E>
 export type FlowStore<N = any, E = N> = UnwrapNestedRefs<Store<N, E>>

src/utils/graph.ts

@@ -8,7 +8,7 @@ import {
   Elements,
   FlowElements,
   FlowExportObject,
-  FlowState,
+  State,
   FlowStore,
   GraphEdge,
   GraphNode,
@@ -291,7 +291,7 @@ export const onLoadGetNodes = (store: FlowStore) => (): GraphNode[] => store.nod
 export const onLoadGetEdges = (store: FlowStore) => (): GraphEdge[] => store.edges
 export const onLoadGetElements = (store: FlowStore) => (): FlowElements => [...store.nodes, ...store.edges]
 
-export const onLoadToObject = (store: FlowState) => (): FlowExportObject => {
+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
   return JSON.parse(
     JSON.stringify({