From d420feaf489368c4e690f58e527f1049246bbb78 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 13 Oct 2022 11:12:03 +0200
Subject: [PATCH] fix(handles): `connectOnClick` reset before connections can
 be made

---
 packages/core/src/composables/useHandle.ts | 17 ++++++++++-------
 packages/core/src/store/actions.ts         | 18 ++++++++++++++----
 packages/core/src/store/state.ts           |  1 +
 packages/core/src/types/store.ts           |  5 +++--
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index 29a65cfc..6fc0a688 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -106,7 +106,7 @@ export default function useHandle({
     edges,
     connectOnClick,
     nodesConnectable,
-    connectionStartHandle,
+    connectionClickStartHandle,
     connectionMode,
     emits,
     startConnection,
@@ -121,6 +121,8 @@ export default function useHandle({
   let recentHoveredHandle: Element
 
   const onMouseDown = (event: MouseEvent) => {
+    if (event.button !== 0) return
+
     const doc = getHostForElement(event.target as HTMLElement)
     if (!doc) return
 
@@ -222,8 +224,9 @@ export default function useHandle({
 
   const onClick = (event: MouseEvent) => {
     if (!connectOnClick) return
-    if (!connectionStartHandle) {
-      startConnection({ nodeId: unref(nodeId), type: unref(type), handleId: unref(handleId) }, undefined, event)
+
+    if (!connectionClickStartHandle) {
+      startConnection({ nodeId: unref(nodeId), type: unref(type), handleId: unref(handleId) }, undefined, event, true)
     } else {
       let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true)
 
@@ -240,9 +243,9 @@ export default function useHandle({
       const { connection, isValid } = checkElementBelowIsValid(
         event as MouseEvent,
         connectionMode,
-        connectionStartHandle.type === 'target',
-        connectionStartHandle.nodeId,
-        connectionStartHandle.handleId || null,
+        connectionClickStartHandle.type === 'target',
+        connectionClickStartHandle.nodeId,
+        connectionClickStartHandle.handleId || null,
         validConnectFunc,
         doc,
         edges,
@@ -253,7 +256,7 @@ export default function useHandle({
 
       if (isValid && !isOwnHandle) emits.connect(connection)
 
-      endConnection(event)
+      endConnection(event, true)
     }
   }
 
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index a91311e5..f5808ea7 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -370,8 +370,12 @@ export default (state: State, getters: ComputedGetters): Actions => {
 
   const applyEdgeChanges: Actions['applyEdgeChanges'] = (changes) => applyChanges(changes, state.edges)
 
-  const startConnection: Actions['startConnection'] = (startHandle, position, event) => {
-    state.connectionStartHandle = startHandle
+  const startConnection: Actions['startConnection'] = (startHandle, position, event, isClick = false) => {
+    if (isClick) {
+      state.connectionClickStartHandle = startHandle
+    } else {
+      state.connectionStartHandle = startHandle
+    }
 
     if (position) state.connectionPosition = position
 
@@ -387,9 +391,15 @@ export default (state: State, getters: ComputedGetters): Actions => {
     state.connectionPosition = position
   }
 
-  const endConnection: Actions['endConnection'] = (event) => {
+  const endConnection: Actions['endConnection'] = (event, isClick) => {
     state.connectionPosition = { x: NaN, y: NaN }
-    state.connectionStartHandle = null
+
+    if (isClick) {
+      state.connectionClickStartHandle = null
+    } else {
+      state.connectionStartHandle = null
+    }
+
     state.hooks.connectEnd.trigger(event)
   }
 
diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts
index d2f043d3..3e306f29 100644
--- a/packages/core/src/store/state.ts
+++ b/packages/core/src/store/state.ts
@@ -84,6 +84,7 @@ const defaultState = (): State => ({
   },
   connectionMode: ConnectionMode.Loose,
   connectionStartHandle: null,
+  connectionClickStartHandle: null,
   connectionPosition: { x: NaN, y: NaN },
   connectOnClick: true,
 
diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts
index 3d82cfda..7faf25bb 100644
--- a/packages/core/src/types/store.ts
+++ b/packages/core/src/types/store.ts
@@ -67,6 +67,7 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   /** @deprecated use {@link ConnectionLineOptions.style} */
   connectionLineStyle: CSSProperties | null
   connectionStartHandle: StartHandle | null
+  connectionClickStartHandle: StartHandle | null
   connectionPosition: XYPosition
 
   connectOnClick: boolean
@@ -188,11 +189,11 @@ export interface Actions extends ViewportFunctions {
   /** force update node internal data, if handle bounds are incorrect, you might want to use this */
   updateNodeInternals: UpdateNodeInternals
   /** start a connection */
-  startConnection: (startHandle: StartHandle, position?: XYPosition, event?: MouseEvent) => void
+  startConnection: (startHandle: StartHandle, position?: XYPosition, event?: MouseEvent, isClick?: boolean) => void
   /** update connection position */
   updateConnection: (position: XYPosition) => void
   /** end (or cancel) a connection */
-  endConnection: (event?: MouseEvent) => void
+  endConnection: (event?: MouseEvent, isClick?: boolean) => void
 
   /** internal position updater, you probably don't want to use this */
   updateNodePositions: UpdateNodePosition