fix(wrapEdge): shift edge updater circles positions to not overlap node handles

example/package-lock.json

@@ -12238,7 +12238,7 @@
       }
     },
     "react": {
-      "version": "file:https:/registry.npmjs.org/react/-/react-17.0.1.tgz",
+      "version": "file:../node_modules/react",
       "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
       "requires": {
         "loose-envify": "^1.1.0",
@@ -12385,7 +12385,7 @@
       }
     },
     "react-dom": {
-      "version": "file:https:/registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
+      "version": "file:../node_modules/react-dom",
       "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
       "requires": {
         "loose-envify": "^1.1.0",
@@ -12439,7 +12439,7 @@
     "react-flow-renderer": {
       "version": "file:..",
       "requires": {
-        "@babel/runtime": "^7.12.18",
+        "@babel/runtime": "^7.13.7",
         "classcat": "^5.0.3",
         "d3-selection": "^2.0.0",
         "d3-zoom": "^2.0.0",

src/components/Edges/wrapEdge.tsx

@@ -134,6 +134,20 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const onEdgeUpdaterMouseEnter = useCallback(() => setUpdating(true), [setUpdating]);
     const onEdgeUpdaterMouseOut = useCallback(() => setUpdating(false), [setUpdating]);
 
+    const radiusEdgeUpdater = 10;
+
+    const shiftX = (position: string, x: number) => {
+      if (position === 'right') return x + radiusEdgeUpdater;
+      if (position === 'left') return x - radiusEdgeUpdater;
+      return x;
+    }
+
+    const shiftY = (position: string, y: number) =>{
+      if (position === 'bottom') return y + radiusEdgeUpdater;
+      if (position === 'top') return y - radiusEdgeUpdater;
+      return y;
+    }
+
     if (isHidden) {
       return null;
     }
@@ -148,9 +162,9 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           >
             <circle
               className="react-flow__edgeupdater"
-              cx={sourceX}
+              cx={shiftX(sourcePosition, sourceX)}
-              cy={sourceY}
+              cy={shiftY(sourcePosition, sourceY)}
-              r={10}
+              r={radiusEdgeUpdater}
               stroke="transparent"
               fill="transparent"
             />
@@ -189,9 +203,9 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           >
             <circle
               className="react-flow__edgeupdater"
-              cx={targetX}
+              cx={shiftX(targetPosition, targetX)}
-              cy={targetY}
+              cy={shiftY(targetPosition, targetY)}
-              r={10}
+              r={radiusEdgeUpdater}
               stroke="transparent"
               fill="transparent"
             />