feat(connection-radius): use closest handle / snappy edges #2759

packages/core/src/components/Handle/index.tsx

@@ -4,7 +4,7 @@ import { shallow } from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import { checkElementBelowIsValid, handleMouseDown } from './handler';
+import { handleMouseDown, isHandleValid } from './handler';
 import { getHostForElement } from '../../utils';
 import { addEdge } from '../../utils/graph';
 import { Position } from '../../types';
@@ -86,12 +86,16 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       }
 
       const doc = getHostForElement(event.target as HTMLElement);
-      const { connection, isValid } = checkElementBelowIsValid(
-        event as unknown as MouseEvent,
+      const { connection, isValid } = isHandleValid(
+        {
+          nodeId,
+          id: handleId,
+          type,
+        },
         connectionMode,
-        connectionStartHandle.type === 'target',
         connectionStartHandle.nodeId,
         connectionStartHandle.handleId || null,
+        connectionStartHandle.type,
         isValidConnection,
         doc
       );
@@ -110,6 +114,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         data-handleid={handleId}
         data-nodeid={nodeId}
         data-handlepos={position}
+        data-id={`${nodeId}-${handleId}-${type}`}
         className={cc([
           'react-flow__handle',
           `react-flow__handle-${position}`,