fix(connectionLine): add container bounds

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -6,11 +6,12 @@ import { GraphContext } from '../../GraphContext';
 import { setConnecting, setConnectionPos } from '../../state/actions';
 
 function onMouseDown(evt, nodeId, dispatch, onConnect) {
-  const connectionPosition = { x: evt.clientX, y: evt.clientY };
+  const containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
+  const connectionPosition = { x: evt.clientX - containerBounds.x, y: evt.clientY - containerBounds.y };
   dispatch(setConnecting({ connectionPosition, connectionSourceId: nodeId }))
 
   function onMouseMove(evt) {
-    dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
+    dispatch(setConnectionPos({ x: evt.clientX - containerBounds.x, y: evt.clientY - containerBounds.y }));
   }
 
   function onMouseUp(evt) {
@@ -46,7 +47,7 @@ export default memo(({ source, target, className = null, ...rest }) => {
         className={handleClasses}
         {...rest}
       />
-    )
+    );
   }
 
   return (

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -29,12 +29,6 @@ const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
   };
 };
 
-const onDragOver = evt => {
-  evt.preventDefault();
-
-  evt.dataTransfer.dropEffect = 'move';
-}
-
 export default NodeComponent => memo((props) => {
   const nodeElement = useRef(null);
   const { state, dispatch } = useContext(GraphContext);
@@ -113,7 +107,6 @@ export default NodeComponent => memo((props) => {
       scale={k}
     >
       <div
-        onDragOver={onDragOver}
         className={nodeClasses}
         ref={nodeElement}
         style={{ zIndex: selected ? 10 : 3, transform: `translate(${position.x}px,${position.y}px)` }}