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/components/Handle/Handle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useHandle, useHooks, useStore } from '../../composables'
 import { Position, ValidConnectionFunc } from '../../types'
-import { NodeIdContextKey } from '~/context'
+import { NodeId } from '~/context'
 
 interface HandleProps {
   id?: string
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<HandleProps>(), {
 
 const store = useStore()
 const hooks = useHooks()
-const nodeId = inject(NodeIdContextKey)!
+const nodeId = inject(NodeId)!
 
 const handler = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>

src/components/Nodes/Node.vue

@@ -2,7 +2,7 @@
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useHooks, useStore } from '../../composables'
 import { Node, NodeType, SnapGrid } from '../../types'
-import { NodeIdContextKey } from '~/context'
+import { NodeId } from '~/context'
 
 interface NodeProps {
   node: Node
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<NodeProps>(), {
 
 const store = useStore()
 const hooks = useHooks()
-provide(NodeIdContextKey, props.node.id)
+provide(NodeId, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)