feat!: Add hooks to store

* For easier access and to avoid context issues with injections hooks are put into the store
* hooks can be accessed and will emit events when the flow has bound its emit function to the hooks
* useHooks and useStore are not exported anymore! Instead, useVueFlow is provided, which will return an instance of the current vue flow store
* Rename NodeIdContextKey to NodeId
* Add addElements function to store to add elements without having to re-set the whole store
* use v-model for elements, re-set elements only if there's an actual change

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

src/types/actions.ts

@@ -22,4 +22,5 @@ export interface FlowActions {
   updateSize: (size: Dimensions) => void
   setConnectionNodeId: (payload: SetConnectionId) => void
   setInteractive: (isInteractive: boolean) => void
+  addElements: (elements: Elements) => void
 }

src/types/store.ts

@@ -2,17 +2,20 @@ import { Store } from 'pinia'
 import { Dimensions, ElementId, Elements, Rect, SelectionRect, SnapGrid, Transform, XYPosition } from './types'
 import { HandleType } from './handle'
 import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc } from './connection'
-import { Edge } from './edge'
-import { Node, NodeExtent, TranslateExtent } from './node'
+import { Edge, EdgeType } from './edge'
+import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
 import { FlowActions } from './actions'
 import { D3Selection, D3Zoom, D3ZoomHandler } from './panel'
+import { FlowHooks } from '~/types/hooks'
 
 export interface FlowState {
   dimensions: Dimensions
   transform: Transform
   elements: Elements
   nodes: Node[]
+  nodeTypes: Record<string, NodeType> | string[]
   edges: Edge[]
+  edgeTypes: Record<string, EdgeType> | string[]
   selectedElements?: Elements
   selectedNodesBbox: Rect
 
@@ -50,6 +53,9 @@ export interface FlowState {
   onConnectStart?: OnConnectStartFunc
   onConnectStop?: OnConnectStopFunc
   onConnectEnd?: OnConnectEndFunc
+
+  isReady: boolean
+  hooks: FlowHooks
 }
 
 export type FlowStore = Store<string, FlowState, any, FlowActions>