refactor(handle-handling): cleanup

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,7 +42,7 @@ type Result = {
 
 function onMouseDown(
   event: ReactMouseEvent,
-  handleId: ElementId,
+  handleId: ElementId | null,
   nodeId: ElementId,
   setConnectionNodeId: SetSourceIdFunc,
   setPosition: (pos: XYPosition) => void,
@@ -67,7 +67,7 @@ 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 });
@@ -95,7 +95,10 @@ function onMouseDown(
 
     if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
       result.isHoveringHandle = true;
-      if ((isTarget && elementBelow.classList.contains('source')) || (!isTarget && elementBelow.classList.contains('target'))) {
+      if (
+        (isTarget && elementBelow.classList.contains('source')) ||
+        (!isTarget && elementBelow.classList.contains('target'))
+      ) {
         let connection: Connection = { source: null, target: null, sourceHandle: null, targetHandle: null };
 
         if (isTarget) {
@@ -105,7 +108,7 @@ function onMouseDown(
         } else {
           const targetId = elementBelow.getAttribute('data-nodeid');
           const targetHandleId = elementBelow.getAttribute('data-handleid');
-          connection = { source: nodeId, sourceHandle: handleId, target: targetId , targetHandle: targetHandleId};
+          connection = { source: nodeId, sourceHandle: handleId, target: targetId, targetHandle: targetHandleId };
         }
 
         const isValid = isValidConnection(connection);
@@ -155,7 +158,7 @@ function onMouseDown(
     }
 
     resetRecentHandle();
-    setConnectionNodeId({ connectionNodeId: null, connectionHandleType: null });
+    setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
 
     document.removeEventListener('mousemove', onMouseMove);
     document.removeEventListener('mouseup', onMouseUp);
@@ -176,7 +179,7 @@ const BaseHandle = ({
   setConnectionNodeId,
   setPosition,
   className,
-  id = false,
+  id = null,
   isValidConnection,
   ...rest
 }: BaseHandleProps) => {
@@ -192,7 +195,8 @@ const BaseHandle = ({
     },
   ]);
 
-  const handleId = id ? `${id}`: ''
+  const handleId = id || null;
+
   return (
     <div
       data-handleid={handleId}

src/components/Nodes/utils.ts

@@ -25,8 +25,8 @@ export const getHandleBounds = (
       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,
       };
     }