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/container/ZoomPane/ZoomPane.vue

@@ -2,7 +2,7 @@
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get, invoke } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
-import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
+import { FlowInstance, FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
 import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '../../composables'
 import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
@@ -186,7 +186,7 @@ store.dimensions = {
 
 invoke(async () => {
   await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy()
-  hooks.load.trigger({
+  const instance: FlowInstance = {
     fitView: (params = { padding: 0.1 }) => fitView(params),
     zoomIn,
     zoomOut,
@@ -195,7 +195,8 @@ invoke(async () => {
     project: onLoadProject(store),
     getElements: onLoadGetElements(store),
     toObject: onLoadToObject(store),
-  })
+  }
+  hooks.load.trigger(instance)
 })
 
 watch(