feat(connection): target -> source

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -5,7 +5,7 @@ import NodeIdContext from '../NodeIdContext'
 import { GraphContext } from '../../GraphContext';
 import { setConnecting, setConnectionPos } from '../../state/actions';
 
-function onMouseDown(evt, nodeId, dispatch, onConnect) {
+function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
   const containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
   const connectionPosition = { x: evt.clientX - containerBounds.x, y: evt.clientY - containerBounds.y };
   dispatch(setConnecting({ connectionPosition, connectionSourceId: nodeId }))
@@ -17,9 +17,15 @@ function onMouseDown(evt, nodeId, dispatch, onConnect) {
   function onMouseUp(evt) {
     const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
 
-    if (elementBelow && elementBelow.classList.contains('target')) {
-      const targetId = elementBelow.getAttribute('data-nodeid');
-      onConnect({ source: nodeId, target: targetId });
+    if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
+      if (isTarget) {
+        const sourceId = elementBelow.getAttribute('data-nodeid');
+        onConnect({ source: sourceId, target: nodeId });
+      } else {
+        const targetId = elementBelow.getAttribute('data-nodeid');
+        onConnect({ source: nodeId, target: targetId });
+      }
+
     }
 
     dispatch(setConnecting({ connectionSourceId: false }));
@@ -40,21 +46,11 @@ export default memo(({ source, target, className = null, ...rest }) => {
     { source, target }
   );
 
-  if (target) {
-    return (
-      <div
-        data-nodeid={nodeId}
-        className={handleClasses}
-        {...rest}
-      />
-    );
-  }
-
   return (
     <div
       data-nodeid={nodeId}
       className={handleClasses}
-      onMouseDown={evt => onMouseDown(evt, nodeId, dispatch, onConnect)}
+      onMouseDown={evt => onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget: target })}
       {...rest}
     />
   );

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -8,7 +8,7 @@ import { isNode } from '../../graph-utils';
 import { Provider } from '../NodeIdContext';
 
 const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
-const isHandle = e => e.target.className && e.target.className.includes && e.target.className.includes('source');
+const isHandle = e => e.target.className && e.target.className.includes && (e.target.className.includes('source') || e.target.className.includes('target'));
 
 const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
   const handle = nodeElement.querySelector(sel);