update: define emittable events for EdgeWrapper

* add onEdgeUpdateEnd callback to useHandle

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

src/components/Edges/EdgeWrapper.vue

@@ -1,7 +1,16 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import { useHandle, useStore } from '../../composables'
-import { ArrowHeadType, ConnectionMode, Edge, EdgeTextProps, ElementId, SourceTargetNode, Position } from '../../types'
+import {
+  ArrowHeadType,
+  ConnectionMode,
+  Edge,
+  EdgeTextProps,
+  ElementId,
+  SourceTargetNode,
+  Position,
+  FlowEvents,
+} from '../../types'
 import { isEdge, getEdgePositions, getHandle } from '../../utils'
 import EdgeAnchor from './EdgeAnchor.vue'
 
@@ -40,7 +49,20 @@ interface EdgeWrapper {
   selectable?: boolean
 }
 
+interface EdgeEvents {
+  (event: 'mouseEnter', data: FlowEvents['edgeMouseEnter']): void
+  (event: 'mouseMove', data: FlowEvents['edgeMouseMove']): void
+  (event: 'mouseLeave', data: FlowEvents['edgeMouseLeave']): void
+  (event: 'contextMenu', data: FlowEvents['edgeContextMenu']): void
+  (event: 'click', data: FlowEvents['edgeClick']): void
+  (event: 'dblClick', data: FlowEvents['edgeDoubleClick']): void
+  (event: 'updateStart', data: FlowEvents['edgeUpdateStart']): void
+  (event: 'update', data: FlowEvents['edgeUpdate']): void
+  (event: 'updateEnd', data: FlowEvents['edgeUpdateEnd']): void
+}
+
 const props = withDefaults(defineProps<EdgeWrapper>(), {})
+const emit = defineEmits<EdgeEvents>()
 
 const store = useStore()
 
@@ -48,22 +70,40 @@ const updating = ref<boolean>(false)
 const handler = useHandle()
 
 const onEdgeClick = (event: MouseEvent) => {
+  const data = { event, edge: props.edge }
   if (store.elementsSelectable) {
     store.unsetNodesSelection()
     store.addSelectedElements([props.edge])
   }
+  emit('click', data)
+  store.hooks.edgeClick.trigger(data)
   store.hooks.elementClick.trigger({ event, element: props.edge })
-  store.hooks.edgeClick.trigger({ event, edge: props.edge })
 }
-const onEdgeContextMenu = (event: MouseEvent) =>
-  store.hooks.edgeContextMenu.trigger({
-    event,
-    edge: props.edge,
-  })
-const onDoubleClick = (event: MouseEvent) => store.hooks.edgeDoubleClick.trigger({ event, edge: props.edge })
-const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
-const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: props.edge })
-const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
+const onEdgeContextMenu = (event: MouseEvent) => {
+  const data = { event, edge: props.edge }
+  emit('contextMenu', data)
+  store.hooks.edgeContextMenu.trigger(data)
+}
+const onDoubleClick = (event: MouseEvent) => {
+  const data = { event, edge: props.edge }
+  emit('dblClick', data)
+  store.hooks.edgeDoubleClick.trigger(data)
+}
+const onEdgeMouseEnter = (event: MouseEvent) => {
+  const data = { event, edge: props.edge }
+  emit('mouseEnter', data)
+  store.hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
+}
+const onEdgeMouseMove = (event: MouseEvent) => {
+  const data = { event, edge: props.edge }
+  emit('mouseMove', data)
+  store.hooks.edgeMouseMove.trigger(data)
+}
+const onEdgeMouseLeave = (event: MouseEvent) => {
+  const data = { event, edge: props.edge }
+  emit('mouseLeave', data)
+  store.hooks.edgeMouseLeave.trigger(data)
+}
 const onEdgeUpdaterMouseEnter = () => (updating.value = true)
 const onEdgeUpdaterMouseOut = () => (updating.value = false)
 const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
@@ -79,9 +119,23 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const isValidConnection = () => true
   const isTarget = isSourceHandle
 
+  emit('updateStart', { event, edge: props.edge })
   store.hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
-  handler(event, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source', (connection) =>
-    store.hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
+  handler(
+    event,
+    handleId,
+    nodeId,
+    isTarget,
+    isValidConnection,
+    isSourceHandle ? 'target' : 'source',
+    (connection) => {
+      emit('update', { edge: props.edge, connection })
+      store.hooks.edgeUpdate.trigger({ edge: props.edge, connection })
+    },
+    () => {
+      emit('updateEnd', event)
+      store.hooks.edgeUpdateEnd.trigger(event)
+    },
   )
 }
 

src/composables/useHandle.ts

@@ -78,6 +78,7 @@ export default (store = useStore()) =>
     },
     elementEdgeUpdaterType?: HandleType,
     onEdgeUpdate?: (connection: Connection) => void,
+    onEdgeUpdateEnd?: () => void,
   ) => {
     const flowNode = (event.target as Element).closest('.vue-flow')
     // when vue-flow is used inside a shadow root we can't use document
@@ -152,7 +153,10 @@ export default (store = useStore()) =>
 
       store.hooks.connectEnd.trigger(event)
 
-      if (elementEdgeUpdaterType) store.hooks.edgeUpdateEnd.trigger(event)
+      if (elementEdgeUpdaterType) {
+        store.hooks.edgeUpdateEnd.trigger(event)
+        onEdgeUpdateEnd?.()
+      }
 
       resetRecentHandle(recentHoveredHandle)
       store.setConnectionNodeId({ connectionNodeId: undefined, connectionHandleId: undefined, connectionHandleType: undefined })