refactor(connections): cleanup

src/ConnectorEdge/index.js

@@ -20,8 +20,8 @@ export default (props) => {
   const sourceX = sourceNode.__rg.position.x + sourceHandleX;
   const sourceY = sourceNode.__rg.position.y + sourceHandleY;
 
-  const targetX = props.connectionPosition.x;
-  const targetY = props.connectionPosition.y;
+  const targetX = (props.connectionPosition.x * (1 / props.transform[2])) - (props.transform[0] * (1 / props.transform[2]));
+  const targetY = (props.connectionPosition.y * (1 / props.transform[2])) - (props.transform[1] * (1 / props.transform[2]));
 
   const yOffset = Math.abs(targetY - sourceY) / 2;
   const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;

src/EdgeRenderer/index.js

@@ -49,14 +49,15 @@ class EdgeRenderer extends PureComponent {
               transform={`translate(${state.transform[0]},${state.transform[1]}) scale(${state.transform[2]})`}
             >
               {state.edges.map(e => this.renderEdge(e, state.nodes, onElementClick))}
+              {state.isConnecting && (
+                <ConnectorEdge
+                  nodes={state.nodes}
+                  connectionSourceId={state.connectionSourceId}
+                  connectionPosition={state.connectionPosition}
+                  transform={state.transform}
+                />
+              )}
             </g>
-            {state.isConnecting && (
-              <ConnectorEdge
-                nodes={state.nodes}
-                connectionSourceId={state.connectionSourceId}
-                connectionPosition={state.connectionPosition}
-              />
-            )}
           </svg>
         )}
       </Consumer>

src/GraphView/index.js

@@ -10,12 +10,13 @@ import UserSelection from '../UserSelection';
 import NodesSelection from '../NodesSelection';
 import {
   updateTransform, updateSize, initD3, fitView,
-  zoomIn, zoomOut, setNodesSelection
+  zoomIn, zoomOut, setNodesSelection, setConnectionPos
 } from '../state/actions';
 import { useKeyPress } from '../hooks';
 
 const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);
 
+
 const GraphView = memo((props) => {
   const zoomPane = useRef(null);
   const { state, dispatch } = useContext(GraphContext);

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 });
   };
 

src/state/actions.js

@@ -55,7 +55,7 @@ export const initD3 = ({ zoom, selection }) => {
   };
 };
 
-export const fitView = ({ padding = 0 }) => {
+export const fitView = ({ padding = 0 } = {}) => {
   return { type: FIT_VIEW, payload: { padding } };
 };
 
@@ -65,7 +65,7 @@ export const zoomIn = () => {
 
 export const zoomOut = () => {
   return { type: ZOOM_OUT };
-}
+};
 
 export const setSelection = (isActive) => {
   return { type: SET_SELECTION, payload: { selectionActive: isActive } };
@@ -107,5 +107,8 @@ export const setConnecting = ({ isConnecting, connectionSourceId }) => {
 };
 
 export const setConnectionPos = ({ x, y }) => {
-  return { type: SET_CONNECTION_POS, payload: { connectionPosition: { x, y } } };
-}
+  return {
+    type: SET_CONNECTION_POS,
+    payload: { connectionPosition: { x, y } }
+  };
+};