broke out handleId by itself rather than joined with nodeID, modded necessary functions to give handles not assigned IDs an empty string for backwards compadibility. Also modded handles so that only target-source and source-target connections are allowed, and no repeat connections are allowed.

src/components/Handle/BaseHandle.tsx

@@ -85,8 +85,6 @@ function onMouseDown(
   // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
   function checkElementBelowIsValid(event: MouseEvent) {
     const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
-    // console.log(elementBelow)
-    // console.log(handleId)
 
     const result: Result = {
       elementBelow,
@@ -194,9 +192,7 @@ const BaseHandle = ({
     },
   ]);
 
-  // const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
   const handleId = id ? `${id}`: ''
-
   return (
     <div
       data-handleid={handleId}

src/components/Nodes/utils.ts

@@ -19,15 +19,8 @@ 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,