refactor(edges): add BaseEdge

src/components/Edges/BezierEdge.tsx

@@ -1,9 +1,10 @@
 import React, { memo } from 'react';
-import { EdgeProps, Position } from '../../types';
-import EdgeText from './EdgeText';
-import { getCenter } from './utils';
 
-interface GetBezierPathParams {
+import BaseEdge from './BaseEdge';
+import { getCenter } from './utils';
+import { EdgeProps, Position } from '../../types';
+
+export interface GetBezierPathParams {
   sourceX: number;
   sourceY: number;
   sourcePosition?: Position;
@@ -11,6 +12,8 @@ interface GetBezierPathParams {
   targetY: number;
   targetPosition?: Position;
   curvature?: number;
+  centerX?: number;
+  centerY?: number;
 }
 
 export function getBezierPath({
@@ -21,14 +24,24 @@ export function getBezierPath({
   targetY,
   targetPosition = Position.Top,
   curvature = 0.5,
+  centerX,
+  centerY,
 }: GetBezierPathParams): string {
   const leftAndRight = [Position.Left, Position.Right];
+  const hasCurvature = curvature > 0;
+  let cX,
+    cY = 0;
+
+  if (!hasCurvature) {
+    const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
+    cX = typeof centerX !== 'undefined' ? centerX : _centerX;
+    cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+  }
 
-  // Distance between the source and target
   const distanceX = sourceX - targetX;
   const distanceY = sourceY - targetY;
 
-  // // A scalar value to fix the curve size getting larger
+  // A scalar value to fix the curve size getting larger
   const scalarX = Math.min(curvature, Math.max(0, distanceX / 10000));
   const scalarY = Math.min(curvature, Math.max(0, distanceY / 10000));
 
@@ -38,10 +51,14 @@ export function getBezierPath({
   const hy1 = sourceY + Math.abs(targetY - sourceY) * (curvature - scalarY);
   const hy2 = targetY - Math.abs(targetY - sourceY) * (curvature - scalarY);
 
-  let path = `M${sourceX},${sourceY} C${sourceX},${hy1} ${targetX},${hy2} ${targetX},${targetY}`;
+  let path = hasCurvature
+    ? `M${sourceX},${sourceY} C${sourceX},${hy1} ${targetX},${hy2} ${targetX},${targetY}`
+    : `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
 
   if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-    path = `M${sourceX},${sourceY} C${hx1},${sourceY} ${hx2},${targetY}, ${targetX},${targetY}`;
+    path = hasCurvature
+      ? `M${sourceX},${sourceY} C${hx1},${sourceY} ${hx2},${targetY}, ${targetX},${targetY}`
+      : `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(targetPosition)) {
     path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(sourcePosition)) {
@@ -81,30 +98,21 @@ export default memo(
       curvature,
     });
 
-    const text = label ? (
-      <EdgeText
-        x={centerX}
-        y={centerY}
+    return (
+      <BaseEdge
+        path={path}
+        centerX={centerX}
+        centerY={centerY}
         label={label}
         labelStyle={labelStyle}
         labelShowBg={labelShowBg}
         labelBgStyle={labelBgStyle}
         labelBgPadding={labelBgPadding}
         labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
       />
-    ) : null;
-
-    return (
-      <>
-        <path
-          style={style}
-          d={path}
-          className="react-flow__edge-path"
-          markerEnd={markerEnd}
-          markerStart={markerStart}
-        />
-        {text}
-      </>
     );
   }
 );