feat(core): add clickConnectStart & clickConnectEnd events

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

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)
     }
   }

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

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>) {

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 }