From 5a50cfd90b1342fdf341aba17a68fdbaf868c09b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 24 Mar 2023 20:51:15 +0100
Subject: [PATCH] feat(core): add `clickConnectStart` & `clickConnectEnd`
 events

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/composables/useHandle.ts      | 11 ++++++++---
 packages/core/src/container/VueFlow/VueFlow.vue |  7 +++++++
 packages/core/src/store/hooks.ts                |  3 ++-
 packages/core/src/types/hooks.ts                |  4 ++++
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index b2185072..0d2a9e8f 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -184,9 +184,10 @@ export default function useHandle({
       function onPointerUp(event: MouseTouchEvent) {
         if ((prevClosestHandle || handleDomNode) && connection && isValid) {
           if (!onEdgeUpdate) {
-            emits.connect(connection)
-          } else {
-            onEdgeUpdate(event, connection)
+              emits.connect(connection)
+            } else {
+              onEdgeUpdate(event, connection)
+            }
           }
         }
 
@@ -227,6 +228,8 @@ export default function useHandle({
     }
 
     if (!connectionClickStartHandle.value) {
+      emits.clickConnectStart({ event, nodeId, handleId })
+
       startConnection({ nodeId: unref(nodeId), type: unref(type), handleId: unref(handleId) }, undefined, event, true)
     } else {
       let isValidConnectionHandler = isValidConnection || isValidConnectionProp.value || alwaysValid
@@ -266,6 +269,8 @@ export default function useHandle({
         emits.connect(connection)
       }
 
+      emits.clickConnectEnd(event)
+
       endConnection(event, true)
     }
   }
diff --git a/packages/core/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue
index 72a636e5..eede1ae8 100644
--- a/packages/core/src/container/VueFlow/VueFlow.vue
+++ b/packages/core/src/container/VueFlow/VueFlow.vue
@@ -75,6 +75,13 @@ const emit = defineEmits<{
     } & OnConnectStartParams,
   ): void
   (event: 'connectEnd', connectionEvent?: MouseEvent): void
+  (
+    event: 'clickConnectStart',
+    connectionEvent: {
+      event?: MouseEvent
+    } & OnConnectStartParams,
+  ): void
+  (event: 'clickConnectEnd', connectionEvent?: MouseEvent): void
   (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
   (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
   (event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
diff --git a/packages/core/src/store/hooks.ts b/packages/core/src/store/hooks.ts
index 06b7a7ee..e00693a7 100644
--- a/packages/core/src/store/hooks.ts
+++ b/packages/core/src/store/hooks.ts
@@ -24,6 +24,8 @@ export function createHooks(): FlowHooks {
     connect: createExtendedEventHook(),
     connectStart: createExtendedEventHook(),
     connectEnd: createExtendedEventHook(),
+    clickConnectStart: createExtendedEventHook(),
+    clickConnectEnd: createExtendedEventHook(),
     paneReady: createExtendedEventHook(),
     move: createExtendedEventHook(),
     moveStart: createExtendedEventHook(),
@@ -54,7 +56,6 @@ export function createHooks(): FlowHooks {
     edgeUpdateEnd: createExtendedEventHook(),
     updateNodeInternals: createExtendedEventHook(),
     error: createExtendedEventHook((err) => warn(err.message)),
-  }
 }
 
 export function useHooks(emit: (...args: any[]) => void, hooks: Ref<FlowHooks>) {
diff --git a/packages/core/src/types/hooks.ts b/packages/core/src/types/hooks.ts
index 533bb751..d2a1d6e4 100644
--- a/packages/core/src/types/hooks.ts
+++ b/packages/core/src/types/hooks.ts
@@ -58,6 +58,10 @@ export interface FlowEvents {
     event?: MouseEvent | TouchEvent
   } & OnConnectStartParams
   connectEnd: MouseEvent | TouchEvent | undefined
+  clickConnectStart: {
+    event?: MouseEvent | TouchEvent
+  } & OnConnectStartParams
+  clickConnectEnd: MouseEvent | TouchEvent | undefined
   paneReady: VueFlowStore
   move: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }
   moveStart: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }