refactor(connections): cleanup

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -1,12 +1,12 @@
-import React, { memo, useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import cx from 'classnames';
 
-import { Consumer } from '../NodeIdContext'
+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);
+  evt.dataTransfer.setData('text/plain', nodeId);
 
   // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
 }
@@ -19,11 +19,12 @@ function onDrag(evt, dispatch) {
   // dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
 }
 
-export default memo(({ source, target, ...rest }) => {
-  const { dispatch } = useContext(GraphContext)
+export default memo(({ source, target, className = null, ...rest }) => {
+  const nodeId = useContext(NodeIdContext);
+  const { dispatch } = useContext(GraphContext);
   const handleClasses = cx(
     'react-graph__handle',
-    rest.className,
+    className,
     { source, target }
   );
 
@@ -37,17 +38,12 @@ export default memo(({ source, target, ...rest }) => {
   }
 
   return (
-    <Consumer>
-      {nodeId => (
-        <div
-          className={handleClasses}
-          {...rest}
-          draggable
-          onDragStart={evt => onDragStart(evt, nodeId, dispatch)}
-          onDrag={evt => onDrag(evt, dispatch)}
-          onDragEnd={evt => onDragStop(evt, dispatch)}
-        />
-      )}
-    </Consumer>
+    <div
+      draggable
+      onDragStart={evt => onDragStart(evt, nodeId, dispatch)}
+      onDragEnd={evt => onDragStop(evt, dispatch)}
+      className={handleClasses}
+      {...rest}
+    />
   );
 });

src/NodeRenderer/NodeIdContext.js

@@ -1,7 +1,6 @@
 import { createContext } from 'react';
 
-const NodeIdContext = createContext(null);
-
+export const NodeIdContext = createContext(null);
 export const Provider = NodeIdContext.Provider;
 export const Consumer = NodeIdContext.Consumer;
 

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -32,7 +32,7 @@ const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
 const onDragOver = evt => {
   evt.preventDefault();
 
-  evt.dataTransfer.dropEffect = "move";
+  evt.dataTransfer.dropEffect = 'move';
 }
 
 export default NodeComponent => memo((props) => {
@@ -109,11 +109,6 @@ export default NodeComponent => memo((props) => {
 
     const source = evt.dataTransfer.getData('text/plain');
 
-    if (source === id) {
-      console.warn('You can\'t connect a node with itself.');
-      return false;
-    }
-
     onConnect({ source, target: id });
   };