fix(connectionLine): add container bounds

dist/ReactGraph.js

@@ -33025,9 +33025,10 @@
   var Consumer$1 = NodeIdContext.Consumer;
 
   function _onMouseDown(evt, nodeId, dispatch, onConnect) {
+    var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
     var connectionPosition = {
-      x: evt.clientX,
-      y: evt.clientY
+      x: evt.clientX - containerBounds.x,
+      y: evt.clientY - containerBounds.y
     };
     dispatch(setConnecting({
       connectionPosition: connectionPosition,
@@ -33036,8 +33037,8 @@
 
     function onMouseMove(evt) {
       dispatch(setConnectionPos({
-        x: evt.clientX,
-        y: evt.clientY
+        x: evt.clientX - containerBounds.x,
+        y: evt.clientY - containerBounds.y
       }));
     }
 
@@ -33178,11 +33179,6 @@
     };
   };
 
-  var onDragOver = function onDragOver(evt) {
-    evt.preventDefault();
-    evt.dataTransfer.dropEffect = 'move';
-  };
-
   var wrapNode = (function (NodeComponent) {
     return React.memo(function (props) {
       var nodeElement = React.useRef(null);
@@ -33294,7 +33290,6 @@
         onStop: onStop,
         scale: k
       }, React__default.createElement("div", {
-        onDragOver: onDragOver,
         className: nodeClasses,
         ref: nodeElement,
         style: {

example/build/example.e31bb0bc.js

@@ -41282,9 +41282,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function _onMouseDown(evt, nodeId, dispatch, onConnect) {
+  var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
   var connectionPosition = {
-    x: evt.clientX,
-    y: evt.clientY
+    x: evt.clientX - containerBounds.x,
+    y: evt.clientY - containerBounds.y
   };
   dispatch((0, _actions.setConnecting)({
     connectionPosition: connectionPosition,
@@ -41293,8 +41294,8 @@ function _onMouseDown(evt, nodeId, dispatch, onConnect) {
 
   function onMouseMove(evt) {
     dispatch((0, _actions.setConnectionPos)({
-      x: evt.clientX,
-      y: evt.clientY
+      x: evt.clientX - containerBounds.x,
+      y: evt.clientY - containerBounds.y
     }));
   }
 
@@ -41574,11 +41575,6 @@ var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k
   };
 };
 
-var onDragOver = function onDragOver(evt) {
-  evt.preventDefault();
-  evt.dataTransfer.dropEffect = 'move';
-};
-
 var _default = function _default(NodeComponent) {
   return (0, _react.memo)(function (props) {
     var nodeElement = (0, _react.useRef)(null);
@@ -41690,7 +41686,6 @@ var _default = function _default(NodeComponent) {
       onStop: onStop,
       scale: k
     }, _react.default.createElement("div", {
-      onDragOver: onDragOver,
       className: nodeClasses,
       ref: nodeElement,
       style: {

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