feat(renderer): add connection line

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -5,23 +5,34 @@ import NodeIdContext from '../NodeIdContext'
 import { GraphContext } from '../../GraphContext';
 import { setConnecting, setConnectionPos } from '../../state/actions';
 
-function onDragStart(evt, nodeId, dispatch) {
-  evt.dataTransfer.setData('text/plain', nodeId);
+function onMouseDown(evt, nodeId, dispatch, onConnect) {
+  const connectionPosition = { x: evt.clientX, y: evt.clientY };
+  dispatch(setConnecting({ connectionPosition, connectionSourceId: nodeId }))
 
-  // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
-}
+  function onMouseMove(evt) {
+    dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
+  }
 
-function onDragStop(evt, dispatch) {
-  // dispatch(setConnecting({ isConnecting: false }));
-}
+  function onMouseUp(evt) {
+    const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
 
-function onDrag(evt, dispatch) {
-  // dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
+    if (elementBelow && elementBelow.classList.contains('target')) {
+      const targetId = elementBelow.getAttribute('data-nodeid');
+      onConnect({ source: nodeId, target: targetId });
+    }
+
+    dispatch(setConnecting({ connectionSourceId: false }));
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  }
+
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp)
 }
 
 export default memo(({ source, target, className = null, ...rest }) => {
   const nodeId = useContext(NodeIdContext);
-  const { dispatch } = useContext(GraphContext);
+  const { dispatch, onConnect } = useContext(GraphContext);
   const handleClasses = cx(
     'react-graph__handle',
     className,
@@ -31,6 +42,7 @@ export default memo(({ source, target, className = null, ...rest }) => {
   if (target) {
     return (
       <div
+        data-nodeid={nodeId}
         className={handleClasses}
         {...rest}
       />
@@ -39,10 +51,9 @@ export default memo(({ source, target, className = null, ...rest }) => {
 
   return (
     <div
-      draggable
-      onDragStart={evt => onDragStart(evt, nodeId, dispatch)}
-      onDragEnd={evt => onDragStop(evt, dispatch)}
+      data-nodeid={nodeId}
       className={handleClasses}
+      onMouseDown={evt => onMouseDown(evt, nodeId, dispatch, onConnect)}
       {...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('source');
+const isHandle = e => e.target.className && e.target.className.includes && e.target.className.includes('source');
 
 const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
   const handle = nodeElement.querySelector(sel);
@@ -40,7 +40,7 @@ export default NodeComponent => memo((props) => {
   const { state, dispatch } = useContext(GraphContext);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const {
-    data, onClick, type, id, __rg, onConnect, onNodeDragStop
+    data, onClick, type, id, __rg, onNodeDragStop
   } = props;
   const { position } = __rg;
   const [ x, y, k ] = state.transform;
@@ -104,14 +104,6 @@ export default NodeComponent => memo((props) => {
     });
   }
 
-  const onDrop = (evt) => {
-    evt.preventDefault();
-
-    const source = evt.dataTransfer.getData('text/plain');
-
-    onConnect({ source, target: id });
-  };
-
   return (
     <ReactDraggable.DraggableCore
       grid={[1, 1]}
@@ -121,7 +113,6 @@ export default NodeComponent => memo((props) => {
       scale={k}
     >
       <div
-        onDrop={onDrop}
         onDragOver={onDragOver}
         className={nodeClasses}
         ref={nodeElement}