fix(wrapEdge): use EdgeAnchors components

src/components/Edges/EdgeAnchors.tsx

@@ -0,0 +1,51 @@
+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,41 +4,44 @@ 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';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
-  const EdgeWrapper = ({
+  const EdgeWrapper = (props: WrapEdgeProps): JSX.Element | null => {
-    id,
+    const {
-    className,
+      id,
-    type,
+      className,
-    data,
+      type,
-    onClick,
+      data,
-    selected,
+      onClick,
-    animated,
+      selected,
-    label,
+      animated,
-    labelStyle,
+      label,
-    labelShowBg,
+      labelStyle,
-    labelBgStyle,
+      labelShowBg,
-    labelBgPadding,
+      labelBgStyle,
-    labelBgBorderRadius,
+      labelBgPadding,
-    style,
+      labelBgBorderRadius,
-    arrowHeadType,
+      style,
-    source,
+      arrowHeadType,
-    target,
+      source,
-    sourceX,
+      target,
-    sourceY,
+      sourceX,
-    targetX,
+      sourceY,
-    targetY,
+      targetX,
-    sourcePosition,
+      targetY,
-    targetPosition,
+      sourcePosition,
-    elementsSelectable,
+      targetPosition,
-    markerEndId,
+      elementsSelectable,
-    isHidden,
+      markerEndId,
-    sourceHandleId,
+      isHidden,
-    targetHandleId,
+      sourceHandleId,
-    handleEdgeUpdate,
+      targetHandleId,
-    onConnectEdge,
+      handleEdgeUpdate,
-    onContextMenu,
+      onConnectEdge,
-  }: WrapEdgeProps): JSX.Element | null => {
+      onContextMenu,
+    } = props;
+
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
     const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
     const setPosition = useStoreActions((actions) => actions.setConnectionPosition);
@@ -134,20 +137,6 @@ 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;
     }
@@ -160,14 +149,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             onMouseEnter={onEdgeUpdaterMouseEnter}
             onMouseOut={onEdgeUpdaterMouseOut}
           >
-            <circle
+            <EdgeAnchorStart {...props} />
-              className="react-flow__edgeupdater"
-              cx={shiftX(sourcePosition, sourceX)}
-              cy={shiftY(sourcePosition, sourceY)}
-              r={radiusEdgeUpdater}
-              stroke="transparent"
-              fill="transparent"
-            />
           </g>
         )}
         <EdgeComponent
@@ -201,14 +183,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             onMouseEnter={onEdgeUpdaterMouseEnter}
             onMouseOut={onEdgeUpdaterMouseOut}
           >
-            <circle
+            <EdgeAnchorEnd {...props} />
-              className="react-flow__edgeupdater"
-              cx={shiftX(targetPosition, targetX)}
-              cy={shiftY(targetPosition, targetY)}
-              r={radiusEdgeUpdater}
-              stroke="transparent"
-              fill="transparent"
-            />
           </g>
         )}
       </g>