feat(nodes): allow multiple handles

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -41,7 +41,8 @@ function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarg
 
 const BaseHandle = memo(({
   source, target, nodeId, onConnect,
-  setSourceId, setPosition, className, ...rest
+  setSourceId, setPosition, className,
+  id = false, ...rest
 }) => {
   const handleClasses = cx(
     'react-graph__handle',
@@ -49,11 +50,13 @@ const BaseHandle = memo(({
     { source, target }
   );
 
+  const handleId = id ? `${nodeId}__${id}` : nodeId;
+
   return (
     <div
-      data-nodeid={nodeId}
+      data-nodeid={handleId}
       className={handleClasses}
-      onMouseDown={evt => onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget: target })}
+      onMouseDown={evt => onMouseDown(evt, { nodeId: handleId, setSourceId, setPosition, onConnect, isTarget: target })}
       {...rest}
     />
   );

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -13,20 +13,31 @@ const isHandle = e => (
 );
 
 const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
-  const handle = nodeElement.querySelector(sel);
+  const handles = nodeElement.querySelectorAll(sel);
 
-  if (!handle) {
+  if (!handles || !handles.length) {
     return null;
   }
 
-  const bounds = handle.getBoundingClientRect();
-  const dimensions = getDimensions(handle);
+  return [].map.call(handles, (handle) => {
+    const bounds = handle.getBoundingClientRect();
+    const dimensions = getDimensions(handle);
+    const nodeIdAttr = handle.getAttribute('data-nodeid');
+    const nodeIdSplitted = nodeIdAttr.split('__');
 
-  return {
-    x: (bounds.x - parentBounds.x) * (1 / k),
-    y: (bounds.y - parentBounds.y) * (1 / k),
-    ...dimensions
-  };
+    let handleId = null;
+
+    if (nodeIdSplitted) {
+      handleId = nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted;
+    }
+
+    return {
+      id: handleId,
+      x: (bounds.x - parentBounds.x) * (1 / k),
+      y: (bounds.y - parentBounds.y) * (1 / k),
+      ...dimensions
+    };
+  });
 };
 
 const onStart = (evt, { setOffset, onClick, id, type, data, position, transform }) => {
@@ -92,7 +103,6 @@ export default NodeComponent => {
         source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]),
         target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
       };
-
       store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
     }, []);