refactor(connections): cleanup, naming

packages/core/src/components/Handle/utils.ts

@@ -1,19 +1,21 @@
-import { ConnectionMode, Node, NodeHandleBounds } from '../../types';
-import type { Connection, HandleType, XYPosition } from '../../types';
+import { MouseEvent as ReactMouseEvent } from 'react';
+
+import { ConnectionMode } from '../../types';
+import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 import { internalsSymbol } from '../../utils';
 
 export type ConnectionHandle = {
   id: string | null;
   type: HandleType;
   nodeId: string;
-  absX: number;
-  absY: number;
-  width: number;
-  height: number;
+  x: number;
+  y: number;
 };
 
 export type ValidConnectionFunc = (connection: Connection) => boolean;
 
+// this functions collects all handles and adds an absolute position
+// so that we can later find the closest handle to the mouse position
 export function getHandles(
   node: Node,
   handleBounds: NodeHandleBounds,
@@ -26,22 +28,24 @@ export function getHandles(
         id: h.id || null,
         type,
         nodeId: node.id,
-        absX: (node.positionAbsolute?.x ?? 0) + h.x,
-        absY: (node.positionAbsolute?.y ?? 0) + h.y,
-        width: h.width,
-        height: h.height,
+        x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
+        y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
       });
     }
     return res;
   }, []);
 }
 
-export function getClosestHandle(pos: XYPosition, connectionRadius: number, handles: ConnectionHandle[]) {
-  let closestHandle: ConnectionHandle | undefined;
+export function getClosestHandle(
+  pos: XYPosition,
+  connectionRadius: number,
+  handles: ConnectionHandle[]
+): ConnectionHandle | null {
+  let closestHandle: ConnectionHandle | null = null;
   let minDistance = Infinity;
 
   handles.forEach((handle) => {
-    const distance = Math.sqrt(Math.pow(handle.absX - pos.x, 2) + Math.pow(handle.absY - pos.y, 2));
+    const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
     if (distance <= connectionRadius && distance < minDistance) {
       minDistance = distance;
       closestHandle = handle;
@@ -52,10 +56,9 @@ export function getClosestHandle(pos: XYPosition, connectionRadius: number, hand
 }
 
 type Result = {
-  elementBelow: Element | null;
+  handleDomNode: Element | null;
   isValid: boolean;
   connection: Connection;
-  isHoveringHandle: boolean;
 };
 
 // checks if  and returns connection in fom of an object { source: 123, target: 312 }
@@ -68,46 +71,36 @@ export function isValidHandle(
   isValidConnection: ValidConnectionFunc,
   doc: Document | ShadowRoot
 ) {
-  const result: Result = {
-    elementBelow: null,
-    isValid: false,
-    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
-    isHoveringHandle: false,
-  };
   const isTarget = fromType === 'target';
-
-  const elementBelow = doc.querySelector(
+  const handleDomNode = doc.querySelector(
     `.react-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
   );
+  const result: Result = {
+    handleDomNode,
+    isValid: false,
+    connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
+  };
 
-  if (elementBelow) {
-    const elementBelowIsTarget = handle.type === 'target';
-    const elementBelowIsSource = handle.type === 'source';
-    result.isHoveringHandle = true;
+  if (handleDomNode) {
+    const handleIsTarget = handle.type === 'target';
+    const handleIsSource = handle.type === 'source';
+    const handleNodeId = handleDomNode.getAttribute('data-nodeid');
+    const handleId = handleDomNode.getAttribute('data-handleid');
 
-    const elementBelowNodeId = elementBelow.getAttribute('data-nodeid');
-    const elementBelowHandleId = elementBelow.getAttribute('data-handleid');
-    const connection: Connection = isTarget
-      ? {
-          source: handle.nodeId,
-          sourceHandle: handle.id,
-          target: fromNodeId,
-          targetHandle: fromHandleId,
-        }
-      : {
-          source: fromNodeId,
-          sourceHandle: fromHandleId,
-          target: handle.nodeId,
-          targetHandle: handle.id,
-        };
+    const connection: Connection = {
+      source: isTarget ? handle.nodeId : fromNodeId,
+      sourceHandle: isTarget ? handle.id : fromHandleId,
+      target: isTarget ? fromNodeId : handle.nodeId,
+      targetHandle: isTarget ? fromHandleId : handle.id,
+    };
 
     result.connection = connection;
 
     // in strict mode we don't allow target to target or source to source connections
     const isValid =
       connectionMode === ConnectionMode.Strict
-        ? (isTarget && elementBelowIsSource) || (!isTarget && elementBelowIsTarget)
-        : elementBelowNodeId !== handle.nodeId || elementBelowHandleId !== handle.id;
+        ? (isTarget && handleIsSource) || (!isTarget && handleIsTarget)
+        : handleNodeId !== handle.nodeId || handleId !== handle.id;
 
     if (isValid) {
       result.isValid = isValidConnection(connection);
@@ -141,3 +134,10 @@ export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHand
     return res;
   }, []);
 }
+
+export function getConnectionPosition(event: MouseEvent | ReactMouseEvent, bounds: DOMRect): XYPosition {
+  return {
+    x: event.clientX - bounds.left,
+    y: event.clientY - bounds.top,
+  };
+}