fix(wrapEdge): use simplified EdgeAnchor component

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/EdgeAnchors.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { WrapEdgeProps, Position } from '../../types';
-
-const radiusEdgeUpdater = 10;
-
-const shiftX = (position: Position, x: number) => {
-  if (position === Position.Right) return x + radiusEdgeUpdater;
-  if (position === Position.Left) return x - radiusEdgeUpdater;
-  return x;
-}
-
-const shiftY = (position: Position, y: number) => {
-  if (position === Position.Bottom) return y + radiusEdgeUpdater;
-  if (position === Position.Top) return y - radiusEdgeUpdater;
-  return y;
-}
-
-export const EdgeAnchorStart = ({
-  sourceX,
-  sourceY,
-  sourcePosition,
-}: WrapEdgeProps): JSX.Element => {
-  return (
-    <circle
-      className="react-flow__edgeupdater"
-      cx={shiftX(sourcePosition, sourceX)}
-      cy={shiftY(sourcePosition, sourceY)}
-      r={radiusEdgeUpdater}
-      stroke="transparent"
-      fill="transparent"
-    />
-  );
-}
-
-export const EdgeAnchorEnd = ({
-  targetX,
-  targetY,
-  targetPosition,
-}: WrapEdgeProps): JSX.Element => {
-  return (
-    <circle
-      className="react-flow__edgeupdater"
-      cx={shiftX(targetPosition, targetX)}
-      cy={shiftY(targetPosition, targetY)}
-      r={radiusEdgeUpdater}
-      stroke="transparent"
-      fill="transparent"
-    />
-  );
-}

src/components/Edges/wrapEdge.tsx

@@ -4,11 +4,10 @@ import cc from 'classcat';
 import { useStoreActions, useStoreState } from '../../store/hooks';
 import { Edge, EdgeProps, WrapEdgeProps } from '../../types';
 import { onMouseDown } from '../../components/Handle/handler';
-import { EdgeAnchorStart, EdgeAnchorEnd } from './EdgeAnchors';
+import { EdgeAnchor } from './EdgeAnchor';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
-  const EdgeWrapper = (props: WrapEdgeProps): JSX.Element | null => {
+  const EdgeWrapper = ({
-    const {
     id,
     className,
     type,
@@ -40,8 +39,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     handleEdgeUpdate,
     onConnectEdge,
     onContextMenu,
-    } = props;
+  }: WrapEdgeProps): JSX.Element | null => {
-
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
     const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
     const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
@@ -149,7 +147,11 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             onMouseEnter={onEdgeUpdaterMouseEnter}
             onMouseOut={onEdgeUpdaterMouseOut}
           >
-            <EdgeAnchorStart {...props} />
+            <EdgeAnchor
+              position={sourcePosition}
+              centerX={sourceX}
+              centerY={sourceY}
+            />
           </g>
         )}
         <EdgeComponent
@@ -183,7 +185,11 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           onMouseEnter={onEdgeUpdaterMouseEnter}
           onMouseOut={onEdgeUpdaterMouseOut}
           >
-            <EdgeAnchorEnd {...props} />
+            <EdgeAnchor
+              position={targetPosition}
+              centerX={targetX}
+              centerY={targetY}
+            />
           </g>
         )}
       </g>