feat: Add emits property to store

# What's changed?

* For easier access (and shorter syntax) of event emitters add emits property to store
* Change instance, zoom, hooks, emits and onEvent triggers to readonly

package/src/components/Edges/EdgeWrapper.vue

@@ -18,7 +18,7 @@ interface EdgeWrapper {
 
 const { id, edge, name, sourceNode, targetNode, selectable, updatable, type } = defineProps<EdgeWrapper>()
 
-const { hooks, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdge, addSelectedEdges } = $(useVueFlow())
+const { emits, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdge, addSelectedEdges } = $(useVueFlow())
 
 let updating = $ref(false)
 
@@ -33,18 +33,18 @@ const onEdgeClick = (event: MouseEvent) => {
 
     addSelectedEdges([edge])
   }
-  hooks.edgeClick.trigger(data)
+  emits.edgeClick(data)
 }
 
-const onEdgeContextMenu = (event: MouseEvent) => hooks.edgeContextMenu.trigger({ event, edge })
+const onEdgeContextMenu = (event: MouseEvent) => emits.edgeContextMenu({ event, edge })
 
-const onDoubleClick = (event: MouseEvent) => hooks.edgeDoubleClick.trigger({ event, edge })
+const onDoubleClick = (event: MouseEvent) => emits.edgeDoubleClick({ event, edge })
 
-const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge })
+const onEdgeMouseEnter = (event: MouseEvent) => emits.edgeMouseEnter({ event, edge })
 
-const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge })
+const onEdgeMouseMove = (event: MouseEvent) => emits.edgeMouseMove({ event, edge })
 
-const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge })
+const onEdgeMouseLeave = (event: MouseEvent) => emits.edgeMouseLeave({ event, edge })
 
 const onEdgeUpdaterMouseEnter = () => (updating = true)
 
@@ -58,7 +58,7 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const nodeId = isSourceHandle ? edge.target : edge.source
   const handleId = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
 
-  hooks.edgeUpdateStart.trigger({ event, edge })
+  emits.edgeUpdateStart({ event, edge })
 
   onMouseDown(
     event,
@@ -67,8 +67,8 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
     isSourceHandle,
     undefined,
     isSourceHandle ? 'target' : 'source',
-    (connection) => hooks.edgeUpdate.trigger({ edge, connection }),
-    () => hooks.edgeUpdateEnd.trigger({ event, edge }),
+    (connection) => emits.edgeUpdate({ edge, connection }),
+    () => emits.edgeUpdateEnd({ event, edge }),
   )
 }
 

package/src/components/Handle/Handle.vue

@@ -14,7 +14,7 @@ const {
   },
 } = defineProps<HandleProps>()
 
-const { hooks, connectionStartHandle, connectionMode } = $(useVueFlow())
+const { connectionStartHandle, connectionMode } = $(useVueFlow())
 
 const nodeId = inject(NodeId, '')
 

package/src/components/Nodes/NodeWrapper.vue

@@ -26,7 +26,7 @@ const {
   viewport,
   noDragClassName,
   noPanClassName,
-  hooks,
+  emits,
   selectNodesOnDrag,
   setState,
   updateNodePosition,
@@ -134,30 +134,30 @@ onUnmounted(() => {
 
 const onMouseEnter = (event: MouseEvent) => {
   if (!node.dragging) {
-    hooks.nodeMouseEnter.trigger({ event, node })
+    emits.nodeMouseEnter({ event, node })
   }
 }
 
 const onMouseMove = (event: MouseEvent) => {
   if (!node.dragging) {
-    hooks.nodeMouseMove.trigger({ event, node })
+    emits.nodeMouseMove({ event, node })
   }
 }
 
 const onMouseLeave = (event: MouseEvent) => {
   if (!node.dragging) {
-    hooks.nodeMouseLeave.trigger({ event, node })
+    emits.nodeMouseLeave({ event, node })
   }
 }
 
 const onContextMenu = (event: MouseEvent) => {
-  hooks.nodeContextMenu.trigger({
+  emits.nodeContextMenu({
     event,
     node,
   })
 }
 
-const onDoubleClick = (event: MouseEvent) => hooks.nodeDoubleClick.trigger({ event, node })
+const onDoubleClick = (event: MouseEvent) => emits.nodeDoubleClick({ event, node })
 
 const onSelectNode = (event: MouseEvent) => {
   if (!draggable) {
@@ -168,13 +168,13 @@ const onSelectNode = (event: MouseEvent) => {
 
       if (!node.selected) addSelectedNodes([node])
     }
-    hooks.nodeClick.trigger({ event, node })
+    emits.nodeClick({ event, node })
   }
 }
 
 onDragStart(({ event }) => {
   addSelectedNodes([])
-  hooks.nodeDragStart.trigger({ event, node })
+  emits.nodeDragStart({ event, node })
 
   if (selectNodesOnDrag && selectable) {
     setState({
@@ -193,7 +193,7 @@ onDragStart(({ event }) => {
 
 onDrag(({ event, data: { deltaX, deltaY } }) => {
   updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: true })
-  hooks.nodeDrag.trigger({ event, node })
+  emits.nodeDrag({ event, node })
 })
 
 onDragStop(({ event, data: { deltaX, deltaY } }) => {
@@ -203,11 +203,11 @@ onDragStop(({ event, data: { deltaX, deltaY } }) => {
     if (selectable && !selectNodesOnDrag && !node.selected) {
       addSelectedNodes([node])
     }
-    hooks.nodeClick.trigger({ event, node })
+    emits.nodeClick({ event, node })
     return
   }
   updateNodePosition({ id: node.id, diff: { x: deltaX, y: deltaY }, dragging: false })
-  hooks.nodeDragStop.trigger({ event, node })
+  emits.nodeDragStop({ event, node })
 })
 
 const getClass = computed(() => {

package/src/components/NodesSelection/NodesSelection.vue

@@ -3,7 +3,7 @@ import { useDraggableCore } from '@braks/revue-draggable'
 import { useVueFlow } from '../../composables'
 import { getRectOfNodes } from '../../utils'
 
-const { hooks, setState, viewport, getSelectedNodes, snapToGrid, snapGrid, updateNodePosition, noPanClassName } = $(useVueFlow())
+const { emits, setState, viewport, getSelectedNodes, snapToGrid, snapGrid, updateNodePosition, noPanClassName } = $(useVueFlow())
 
 const el = templateRef<HTMLDivElement>('el', null)
 
@@ -24,7 +24,7 @@ watch($$(selectedNodesBBox), (v) => {
   })
 })
 
-const onContextMenu = (event: MouseEvent) => hooks.selectionContextMenu.trigger({ event, nodes: getSelectedNodes })
+const onContextMenu = (event: MouseEvent) => emits.selectionContextMenu({ event, nodes: getSelectedNodes })
 
 const { onDragStart, onDrag, onDragStop, scale } = useDraggableCore(el, {
   grid: snapToGrid ? snapGrid : undefined,
@@ -42,15 +42,15 @@ onMounted(() => {
   )
 })
 
-onDragStart(({ event }) => hooks.selectionDragStart.trigger({ event, nodes: getSelectedNodes }))
+onDragStart(({ event }) => emits.selectionDragStart({ event, nodes: getSelectedNodes }))
 
 onDrag(({ event, data: { deltaX, deltaY } }) => {
-  hooks.selectionDrag.trigger({ event, nodes: getSelectedNodes })
+  emits.selectionDrag({ event, nodes: getSelectedNodes })
   updateNodePosition({ diff: { x: deltaX, y: deltaY }, dragging: true })
 })
 
 onDragStop(({ event }) => {
-  hooks.selectionDragStop.trigger({ event, nodes: getSelectedNodes })
+  emits.selectionDragStop({ event, nodes: getSelectedNodes })
   getSelectedNodes.forEach((node) => (node.dragging = false))
 })
 </script>