fix(handles): connectOnClick reset before connections can be made

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

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

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,
 

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