Merge pull request #3954 from xyflow/handle-connection-fixes

Handle connection fixes

packages/system/src/styles/init.css

@@ -223,6 +223,10 @@ svg.xy-flow__connectionline {
   min-width: 5px;
   min-height: 5px;
 
+  &.connectingfrom {
+    pointer-events: all;
+  }
+
   &.connectionindicator {
     pointer-events: all;
     cursor: crosshair;

packages/system/src/xyhandle/XYHandle.ts

@@ -15,7 +15,7 @@ import {
   type ConnectionHandle,
 } from '../types';
 
-import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType, resetRecentHandle } from './utils';
+import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType } from './utils';
 
 export type OnPointerDownParams = {
   autoPanOnConnect: boolean;
@@ -107,7 +107,6 @@ function onPointerDown(
     return;
   }
 
-  let prevActiveHandle: Element;
   let connectionPosition = getEventPosition(event, containerBounds);
   let autoPanStarted = false;
   let connection: Connection | null = null;
@@ -194,18 +193,6 @@ function onPointerDown(
       connectionStatus: getConnectionStatus(!!closestHandle, isValid),
       connectionEndHandle: result.endHandle,
     });
-
-    if (!closestHandle && !isValid && !handleDomNode) {
-      return resetRecentHandle(prevActiveHandle, lib);
-    }
-
-    if (connection?.source !== connection?.target && handleDomNode) {
-      resetRecentHandle(prevActiveHandle, lib);
-      prevActiveHandle = handleDomNode;
-      handleDomNode.classList.add('connecting', `${lib}-flow__handle-connecting`);
-      handleDomNode.classList.toggle('valid', isValid);
-      handleDomNode.classList.toggle(`${lib}-flow__handle-valid`, isValid);
-    }
   }
 
   function onPointerUp(event: MouseEvent | TouchEvent) {
@@ -221,7 +208,6 @@ function onPointerDown(
       onEdgeUpdateEnd?.(event);
     }
 
-    resetRecentHandle(prevActiveHandle, lib);
     cancelConnection();
     cancelAnimationFrame(autoPanId);
     autoPanStarted = false;

packages/system/src/xyhandle/utils.ts

@@ -38,7 +38,7 @@ export function getClosestHandle(
   let closestHandles: ConnectionHandle[] = [];
   let minDistance = Infinity;
 
-  handles.forEach((handle) => {
+  for (const handle of handles) {
     const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
     if (distance <= connectionRadius) {
       if (distance < minDistance) {
@@ -49,7 +49,7 @@ export function getClosestHandle(
       }
       minDistance = distance;
     }
-  });
+  }
 
   if (!closestHandles.length) {
     return null;
@@ -101,10 +101,6 @@ export function getHandleType(
   return null;
 }
 
-export function resetRecentHandle(handleDomNode: Element, lib: string): void {
-  handleDomNode?.classList.remove('valid', 'connecting', `${lib}-flow__handle-valid`, `${lib}-flow__handle-connecting`);
-}
-
 export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) {
   let connectionStatus = null;