fix: Edge updates not triggering properly

update(types): Add FlowEvents type

src/components/Edges/Edge.vue

@@ -17,10 +17,6 @@ const props = withDefaults(defineProps<EdgeProps>(), {})
 const store = useStore()
 const hooks = useHooks()
 
-hooks.connect.on((connection) => {
-  hooks.edgeUpdate.trigger({ edge: props.edge, connection })
-})
-
 const onEdgeClick = (event: MouseEvent) => {
   if (store.elementsSelectable) {
     store.unsetNodesSelection()
@@ -45,12 +41,14 @@ const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ e
 const handler = useHandle()
 const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const nodeId = isSourceHandle ? props.edge.target : props.edge.source
-  const handleId = isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle
+  const handleId = (isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle) ?? ''
   const isValidConnection = () => true
   const isTarget = isSourceHandle
 
   hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
-  handleId && handler(event, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source')
+  handler(event, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source', (connection) =>
+    hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
+  )
 }
 
 const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {

src/composables/useHandle.ts

@@ -81,6 +81,7 @@ export default () => {
       return true
     },
     elementEdgeUpdaterType?: HandleType,
+    onEdgeUpdate?: (connection: Connection) => void,
   ) => {
     const flowNode = (event.target as Element).closest('.vue-flow')
     // when vue-flow is used inside a shadow root we can't use document
@@ -150,6 +151,7 @@ export default () => {
 
       if (isValid) {
         hooks.connect.trigger(connection)
+        onEdgeUpdate?.(connection)
       }
 
       hooks.connectEnd.trigger(event)

src/types/hooks.ts

@@ -3,46 +3,48 @@ import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams,
 
 export type FlowHook<T = any> = EventHook<T>
 
-export interface FlowHooks {
-  elementClick: FlowHook<{ event: MouseEvent; element: Node | Edge }>
-  elementsRemove: FlowHook<Elements>
-  nodeDoubleClick: FlowHook<{ event: MouseEvent; node: Node }>
-  nodeClick: FlowHook<{ event: MouseEvent; node: Node }>
-  nodeMouseEnter: FlowHook<{ event: MouseEvent; node: Node }>
-  nodeMouseMove: FlowHook<{ event: MouseEvent; node: Node }>
-  nodeMouseLeave: FlowHook<{ event: MouseEvent; node: Node }>
-  nodeContextMenu: FlowHook<{ event: MouseEvent; node: Node }>
-  nodeDragStart: FlowHook<{ event: MouseEvent; node: Node }>
-  nodeDrag: FlowHook<{ event: MouseEvent; node: Node }>
-  nodeDragStop: FlowHook<{ event: MouseEvent; node: Node }>
-  connect: FlowHook<Connection>
-  connectStart: FlowHook<{
+export interface FlowEvents {
+  elementClick: { event: MouseEvent; element: Node | Edge }
+  elementsRemove: Elements
+  nodeDoubleClick: { event: MouseEvent; node: Node }
+  nodeClick: { event: MouseEvent; node: Node }
+  nodeMouseEnter: { event: MouseEvent; node: Node }
+  nodeMouseMove: { event: MouseEvent; node: Node }
+  nodeMouseLeave: { event: MouseEvent; node: Node }
+  nodeContextMenu: { event: MouseEvent; node: Node }
+  nodeDragStart: { event: MouseEvent; node: Node }
+  nodeDrag: { event: MouseEvent; node: Node }
+  nodeDragStop: { event: MouseEvent; node: Node }
+  connect: Connection
+  connectStart: {
     event: MouseEvent
     params: OnConnectStartParams
-  }>
-  connectStop: FlowHook<MouseEvent>
-  connectEnd: FlowHook<MouseEvent>
-  load: FlowHook<OnLoadParams>
-  move: FlowHook<FlowTransform | undefined>
-  moveStart: FlowHook<FlowTransform | undefined>
-  moveEnd: FlowHook<FlowTransform | undefined>
-  selectionChange: FlowHook<Elements | null>
-  selectionDragStart: FlowHook<{ event: MouseEvent; nodes: Node[] }>
-  selectionDrag: FlowHook<{ event: MouseEvent; nodes: Node[] }>
-  selectionDragStop: FlowHook<{ event: MouseEvent; nodes: Node[] }>
-  selectionContextMenu: FlowHook<{ event: MouseEvent; nodes: Node[] }>
-  paneScroll: FlowHook<WheelEvent | undefined>
-  paneClick: FlowHook<MouseEvent>
-  paneContextMenu: FlowHook<MouseEvent>
-  edgeUpdate: FlowHook<{ edge: Edge; connection: Connection }>
-  edgeContextMenu: FlowHook<{ event: MouseEvent; edge: Edge }>
-  edgeMouseEnter: FlowHook<{ event: MouseEvent; edge: Edge }>
-  edgeMouseMove: FlowHook<{ event: MouseEvent; edge: Edge }>
-  edgeMouseLeave: FlowHook<{ event: MouseEvent; edge: Edge }>
-  edgeDoubleClick: FlowHook<{ event: MouseEvent; edge: Edge }>
-  edgeClick: FlowHook<{ event: MouseEvent; edge: Edge }>
-  edgeUpdateStart: FlowHook<{ event: MouseEvent; edge: Edge }>
-  edgeUpdateEnd: FlowHook<{ event: MouseEvent; edge: Edge }>
+  }
+  connectStop: MouseEvent
+  connectEnd: MouseEvent
+  load: OnLoadParams
+  move: FlowTransform | undefined
+  moveStart: FlowTransform | undefined
+  moveEnd: FlowTransform | undefined
+  selectionChange: Elements | null
+  selectionDragStart: { event: MouseEvent; nodes: Node[] }
+  selectionDrag: { event: MouseEvent; nodes: Node[] }
+  selectionDragStop: { event: MouseEvent; nodes: Node[] }
+  selectionContextMenu: { event: MouseEvent; nodes: Node[] }
+  paneScroll: WheelEvent | undefined
+  paneClick: MouseEvent
+  paneContextMenu: MouseEvent
+  edgeUpdate: { edge: Edge; connection: Connection }
+  edgeContextMenu: { event: MouseEvent; edge: Edge }
+  edgeMouseEnter: { event: MouseEvent; edge: Edge }
+  edgeMouseMove: { event: MouseEvent; edge: Edge }
+  edgeMouseLeave: { event: MouseEvent; edge: Edge }
+  edgeDoubleClick: { event: MouseEvent; edge: Edge }
+  edgeClick: { event: MouseEvent; edge: Edge }
+  edgeUpdateStart: { event: MouseEvent; edge: Edge }
+  edgeUpdateEnd: { event: MouseEvent; edge: Edge }
 }
 
+export type FlowHooks = { [key in keyof FlowEvents]: FlowHook<FlowEvents[key]> }
+
 export type EmitFunc<T extends FlowHooks = FlowHooks> = (name: keyof T, ...args: any[]) => void