Merge pull request #946 from ambroseus/fix/edge-updater-handle-position

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

src/components/Edges/EdgeAnchor.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Position } from '../../types';
+
+const shiftX = (x: number, shift: number, position: Position) => {
+  if (position === Position.Left) return x - shift;
+  if (position === Position.Right) return x + shift;
+  return x;
+}
+
+const shiftY = (y: number, shift: number, position: Position) => {
+  if (position === Position.Top) return y - shift;
+  if (position === Position.Bottom) return y + shift;
+  return y;
+}
+
+export interface EdgeAnchorProps {
+  className?: string
+  position: Position
+  centerX: number
+  centerY: number
+  radius?: number
+}
+
+export const EdgeAnchor = ({
+  className = "react-flow__edgeupdater",
+  position,
+  centerX,
+  centerY,
+  radius = 10
+}: EdgeAnchorProps): JSX.Element => {
+  return (
+    <circle
+      className={className}
+      cx={shiftX(centerX, radius, position)}
+      cy={shiftY(centerY, radius, position)}
+      r={radius}
+      stroke="transparent"
+      fill="transparent"
+    />
+  );
+}

src/components/Edges/wrapEdge.tsx

@@ -4,6 +4,7 @@ import cc from 'classcat';
 import { useStoreActions, useStoreState } from '../../store/hooks';
 import { Edge, EdgeProps, WrapEdgeProps } from '../../types';
 import { onMouseDown } from '../../components/Handle/handler';
+import { EdgeAnchor } from './EdgeAnchor';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({
@@ -146,13 +147,10 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             onMouseEnter={onEdgeUpdaterMouseEnter}
             onMouseOut={onEdgeUpdaterMouseOut}
           >
-            <circle
+            <EdgeAnchor
-              className="react-flow__edgeupdater"
+              position={sourcePosition}
-              cx={sourceX}
+              centerX={sourceX}
-              cy={sourceY}
+              centerY={sourceY}
-              r={10}
-              stroke="transparent"
-              fill="transparent"
             />
           </g>
         )}
@@ -187,13 +185,10 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             onMouseEnter={onEdgeUpdaterMouseEnter}
             onMouseOut={onEdgeUpdaterMouseOut}
           >
-            <circle
+            <EdgeAnchor
-              className="react-flow__edgeupdater"
+              position={targetPosition}
-              cx={targetX}
+              centerX={targetX}
-              cy={targetY}
+              centerY={targetY}
-              r={10}
-              stroke="transparent"
-              fill="transparent"
             />
           </g>
         )}