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,44 +4,42 @@ 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 {
-      id,
-      className,
-      type,
-      data,
-      onClick,
-      selected,
-      animated,
-      label,
-      labelStyle,
-      labelShowBg,
-      labelBgStyle,
-      labelBgPadding,
-      labelBgBorderRadius,
-      style,
-      arrowHeadType,
-      source,
-      target,
-      sourceX,
-      sourceY,
-      targetX,
-      targetY,
-      sourcePosition,
-      targetPosition,
-      elementsSelectable,
-      markerEndId,
-      isHidden,
-      sourceHandleId,
-      targetHandleId,
-      handleEdgeUpdate,
-      onConnectEdge,
-      onContextMenu,
-    } = props;
-
+  const EdgeWrapper = ({
+    id,
+    className,
+    type,
+    data,
+    onClick,
+    selected,
+    animated,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    arrowHeadType,
+    source,
+    target,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    elementsSelectable,
+    markerEndId,
+    isHidden,
+    sourceHandleId,
+    targetHandleId,
+    handleEdgeUpdate,
+    onConnectEdge,
+    onContextMenu,
+  }: 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
@@ -179,11 +181,15 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         />
         {handleEdgeUpdate && (
           <g
-            onMouseDown={onEdgeUpdaterTargetMouseDown}
-            onMouseEnter={onEdgeUpdaterMouseEnter}
-            onMouseOut={onEdgeUpdaterMouseOut}
+          onMouseDown={onEdgeUpdaterTargetMouseDown}
+          onMouseEnter={onEdgeUpdaterMouseEnter}
+          onMouseOut={onEdgeUpdaterMouseOut}
           >
-            <EdgeAnchorEnd {...props} />
+            <EdgeAnchor
+              position={targetPosition}
+              centerX={targetX}
+              centerY={targetY}
+            />
           </g>
         )}
       </g>