Merge branch 'main' into drag-edge

src/components/ConnectionLine/index.tsx

@@ -15,6 +15,7 @@ import {
 
 interface ConnectionLineProps {
   connectionNodeId: ElementId;
+  connectionHandleId: ElementId | null;
   connectionHandleType: HandleType;
   connectionPositionX: number;
   connectionPositionY: number;
@@ -28,6 +29,7 @@ interface ConnectionLineProps {
 
 export default ({
   connectionNodeId,
+  connectionHandleId,
   connectionHandleType,
   connectionLineStyle,
   connectionPositionX,
@@ -39,10 +41,8 @@ export default ({
   CustomConnectionLineComponent,
 }: ConnectionLineProps) => {
   const [sourceNode, setSourceNode] = useState<Node | null>(null);
-  const hasHandleId = connectionNodeId.includes('__');
-  const sourceIdSplitted = connectionNodeId.split('__');
-  const nodeId = sourceIdSplitted[0];
-  const handleId = hasHandleId ? sourceIdSplitted[1] : null;
+  const nodeId = connectionNodeId;
+  const handleId = connectionHandleId;
 
   useEffect(() => {
     const nextSourceNode = nodes.find((n) => n.id === nodeId) || null;

src/components/Handle/BaseHandle.tsx

@@ -28,7 +28,7 @@ interface BaseHandleProps {
   setConnectionNodeId: SetSourceIdFunc;
   setPosition: (pos: XYPosition) => void;
   isValidConnection: ValidConnectionFunc;
-  id?: ElementId | boolean;
+  id?: ElementId | null;
   className?: string;
   style?: CSSProperties;
 }
@@ -42,6 +42,7 @@ type Result = {
 
 export function onMouseDown(
   event: ReactMouseEvent,
+  handleId: ElementId | null,
   nodeId: ElementId,
   setConnectionNodeId: SetSourceIdFunc,
   setPosition: (pos: XYPosition) => void,
@@ -66,8 +67,9 @@ export function onMouseDown(
     x: event.clientX - containerBounds.left,
     y: event.clientY - containerBounds.top,
   });
-  setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleType: handleType });
-  
+
+  setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType });
+
   if (onConnectStart) {
     onConnectStart(event, { nodeId, handleType });
   }
@@ -88,26 +90,33 @@ export function onMouseDown(
     const result: Result = {
       elementBelow,
       isValid: false,
-      connection: { source: null, target: null },
+      connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
       isHoveringHandle: false,
     };
 
     if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
-      let connection: Connection = { source: null, target: null };
-
-      if (isTarget) {
-        const sourceId = elementBelow.getAttribute('data-nodeid');
-        connection = { source: sourceId, target: nodeId };
-      } else {
-        const targetId = elementBelow.getAttribute('data-nodeid');
-        connection = { source: nodeId, target: targetId };
-      }
-
-      const isValid = isValidConnection(connection);
-
-      result.connection = connection;
-      result.isValid = isValid;
       result.isHoveringHandle = true;
+      if (
+        (isTarget && elementBelow.classList.contains('source')) ||
+        (!isTarget && elementBelow.classList.contains('target'))
+      ) {
+        let connection: Connection = { source: null, target: null, sourceHandle: null, targetHandle: null };
+
+        if (isTarget) {
+          const sourceId = elementBelow.getAttribute('data-nodeid');
+          const sourcehandleId = elementBelow.getAttribute('data-handleid');
+          connection = { source: sourceId, sourceHandle: sourcehandleId, target: nodeId, targetHandle: handleId };
+        } else {
+          const targetId = elementBelow.getAttribute('data-nodeid');
+          const targetHandleId = elementBelow.getAttribute('data-handleid');
+          connection = { source: nodeId, sourceHandle: handleId, target: targetId, targetHandle: targetHandleId };
+        }
+
+        const isValid = isValidConnection(connection);
+
+        result.connection = connection;
+        result.isValid = isValid;
+      }
     }
 
     return result;
@@ -150,7 +159,7 @@ export function onMouseDown(
     }
 
     resetRecentHandle();
-    setConnectionNodeId({ connectionNodeId: null, connectionHandleType: null });
+    setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
 
     document.removeEventListener('mousemove', onMouseMove);
     document.removeEventListener('mouseup', onMouseUp);
@@ -171,7 +180,7 @@ const BaseHandle = ({
   setConnectionNodeId,
   setPosition,
   className,
-  id = false,
+  id = null,
   isValidConnection,
   ...rest
 }: BaseHandleProps) => {
@@ -187,17 +196,19 @@ const BaseHandle = ({
     },
   ]);
 
-  const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
+  const handleId = id || null;
 
   return (
     <div
-      data-nodeid={nodeIdWithHandleId}
+      data-handleid={handleId}
+      data-nodeid={nodeId}
       data-handlepos={position}
       className={handleClasses}
       onMouseDown={(event) =>
         onMouseDown(
           event,
-          nodeIdWithHandleId,
+          handleId,
+          nodeId,
           setConnectionNodeId,
           setPosition,
           onConnect,

src/components/Nodes/utils.ts

@@ -19,21 +19,14 @@ export const getHandleBounds = (
     (handle): HandleElement => {
       const bounds = handle.getBoundingClientRect();
       const dimensions = getDimensions(handle);
-      const nodeIdAttr = handle.getAttribute('data-nodeid');
+      const handleId = handle.getAttribute('data-handleid');
       const handlePosition = (handle.getAttribute('data-handlepos') as unknown) as Position;
-      const nodeIdSplitted = nodeIdAttr ? nodeIdAttr.split('__') : null;
-
-      let handleId = null;
-
-      if (nodeIdSplitted) {
-        handleId = (nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted) as string;
-      }
 
       return {
         id: handleId,
         position: handlePosition,
-        x: (bounds.left - parentBounds.left) * (1 / k),
-        y: (bounds.top - parentBounds.top) * (1 / k),
+        x: (bounds.left - parentBounds.left) / k,
+        y: (bounds.top - parentBounds.top) / k,
         ...dimensions,
       };
     }

src/components/Nodes/wrapNode.tsx

@@ -218,6 +218,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
               isConnectable={isConnectable}
               sourcePosition={sourcePosition}
               targetPosition={targetPosition}
+              isDragging={isDragging}
             />
           </Provider>
         </div>