From 3ee3843af613ef235c216cc1d40097399010f1c7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 22 Oct 2021 10:46:01 +0200
Subject: [PATCH] fix: Edge updates not triggering properly update(types): Add
 FlowEvents type

---
 src/components/Edges/Edge.vue | 10 ++---
 src/composables/useHandle.ts  |  2 +
 src/types/hooks.ts            | 78 ++++++++++++++++++-----------------
 3 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index 284f5387..088f1d71 100644
--- a/src/components/Edges/Edge.vue
+++ b/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) => {
diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts
index 2c696729..6260f8da 100644
--- a/src/composables/useHandle.ts
+++ b/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)
diff --git a/src/types/hooks.ts b/src/types/hooks.ts
index 812bc258..7384eba6 100644
--- a/src/types/hooks.ts
+++ b/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