refactor(edges): add BaseEdge

example/src/Edges/index.tsx

@@ -25,7 +25,7 @@ const initialNodes: Node[] = [
   { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
   { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
-  { id: '2b', data: { label: 'Node 2b' }, position: { x: -80, y: 100 }, targetPosition: Position.Left },
+  { id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
   { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
   { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },

src/components/ConnectionLine/index.tsx

@@ -2,7 +2,7 @@ import React, { useRef, CSSProperties } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
-import { getBezierPath } from '../Edges/SimpleBezierEdge';
+import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import {
   HandleElement,
@@ -13,6 +13,7 @@ import {
   ReactFlowState,
   Position,
 } from '../../types';
+import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 
 interface ConnectionLineProps {
   connectionNodeId: string;
@@ -112,6 +113,8 @@ export default ({
     });
   } else if (connectionLineType === ConnectionLineType.SmoothStep) {
     dAttr = getSmoothStepPath(pathParams);
+  } else if (connectionLineType === ConnectionLineType.SimpleBezier) {
+    dAttr = getSimpleBezierPath(pathParams);
   } else {
     dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
   }

src/components/Edges/BaseEdge.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import EdgeText from './EdgeText';
+import { BaseEdgeProps } from '../../types';
+
+export default ({
+  path,
+  centerX,
+  centerY,
+  label,
+  labelStyle,
+  labelShowBg,
+  labelBgStyle,
+  labelBgPadding,
+  labelBgBorderRadius,
+  style,
+  markerEnd,
+  markerStart,
+}: BaseEdgeProps) => {
+  const text = label ? (
+    <EdgeText
+      x={centerX}
+      y={centerY}
+      label={label}
+      labelStyle={labelStyle}
+      labelShowBg={labelShowBg}
+      labelBgStyle={labelBgStyle}
+      labelBgPadding={labelBgPadding}
+      labelBgBorderRadius={labelBgBorderRadius}
+    />
+  ) : null;
+
+  return (
+    <>
+      <path style={style} d={path} className="react-flow__edge-path" markerEnd={markerEnd} markerStart={markerStart} />
+      {text}
+    </>
+  );
+};

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 ? (
+    return (
-      <EdgeText
+      <BaseEdge
-        x={centerX}
+        path={path}
-        y={centerY}
+        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}
-      </>
     );
   }
 );

src/components/Edges/SimpleBezierEdge.tsx

@@ -1,101 +1,12 @@
 import React, { memo } from 'react';
 
-import EdgeText from './EdgeText';
+import BezierEdge, { getBezierPath, GetBezierPathParams } from './BezierEdge';
-import { getCenter } from './utils';
+import { EdgeProps } from '../../types';
-import { EdgeProps, Position } from '../../types';
 
-interface GetBezierPathParams {
+export function getSimpleBezierPath(props: GetBezierPathParams): string {
-  sourceX: number;
+  return getBezierPath({ ...props, curvature: 0 });
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-  centerX?: number;
-  centerY?: number;
 }
 
-export function getBezierPath({
+export default memo((props: EdgeProps) => {
-  sourceX,
+  return <BezierEdge {...props} curvature={0} />;
-  sourceY,
+});
-  sourcePosition = Position.Bottom,
-  targetX,
-  targetY,
-  targetPosition = Position.Top,
-  centerX,
-  centerY,
-}: GetBezierPathParams): string {
-  const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
-  const leftAndRight = [Position.Left, Position.Right];
-
-  const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
-  const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
-
-  let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
-
-  if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-    path = `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)) {
-    path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`;
-  }
-
-  return path;
-}
-
-export default memo(
-  ({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-  }: EdgeProps) => {
-    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
-    const path = getBezierPath({
-      sourceX,
-      sourceY,
-      sourcePosition,
-      targetX,
-      targetY,
-      targetPosition,
-    });
-
-    const text = label ? (
-      <EdgeText
-        x={centerX}
-        y={centerY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-      />
-    ) : null;
-
-    return (
-      <>
-        <path
-          style={style}
-          d={path}
-          className="react-flow__edge-path"
-          markerEnd={markerEnd}
-          markerStart={markerStart}
-        />
-        {text}
-      </>
-    );
-  }
-);

src/components/Edges/SmoothStepEdge.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
 
-import EdgeText from './EdgeText';
 import { getCenter } from './utils';
 import { EdgeSmoothStepProps, Position } from '../../types';
+import BaseEdge from './BaseEdge';
 
 // These are some helper methods for drawing the round corners
 // The name indicates the direction of the path. "bottomLeftCorner" goes
@@ -21,7 +21,7 @@ const topLeftCorner = (x: number, y: number, size: number): string => `L ${x},${
 const topRightCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
 const rightTopCorner = (x: number, y: number, size: number): string => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
 
-interface GetSmoothStepPathParams {
+export interface GetSmoothStepPathParams {
   sourceX: number;
   sourceY: number;
   sourcePosition?: Position;
@@ -146,30 +146,21 @@ export default memo(
       borderRadius,
     });
 
-    const text = label ? (
+    return (
-      <EdgeText
+      <BaseEdge
-        x={centerX}
+        path={path}
-        y={centerY}
+        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}
-          className="react-flow__edge-path"
-          d={path}
-          markerEnd={markerEnd}
-          markerStart={markerStart}
-        />
-        {text}
-      </>
     );
   }
 );

src/components/Edges/StraightEdge.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import EdgeText from './EdgeText';
+import BaseEdge from './BaseEdge';
 import { EdgeProps } from '../../types';
 
 export default memo(
@@ -24,31 +24,23 @@ export default memo(
 
     const xOffset = Math.abs(targetX - sourceX) / 2;
     const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+    const path = `M ${sourceX},${sourceY}L ${targetX},${targetY}`;
 
-    const text = label ? (
+    return (
-      <EdgeText
+      <BaseEdge
-        x={centerX}
+        path={path}
-        y={centerY}
+        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}
-          className="react-flow__edge-path"
-          d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
-          markerEnd={markerEnd}
-          markerStart={markerStart}
-        />
-        {text}
-      </>
     );
   }
 );

src/index.ts

@@ -6,7 +6,8 @@ export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
 export { default as StraightEdge } from './components/Edges/StraightEdge';
 export { default as StepEdge } from './components/Edges/StepEdge';
-export { default as BezierEdge, getBezierPath } from './components/Edges/SimpleBezierEdge';
+export { default as BezierEdge, getBezierPath } from './components/Edges/BezierEdge';
+export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
 export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge';
 export * from './additional-components';
 

src/types/edges.ts

@@ -4,7 +4,6 @@ import { HandleElement } from './handles';
 import { Node } from './nodes';
 import { Position } from './utils';
 
-
 // interface for the user edge items
 export interface Edge<T = any> {
   id: string;
@@ -65,6 +64,23 @@ export interface EdgeProps<T = any> {
   curvature?: number;
 }
 
+export type BaseEdgeProps = Pick<
+  EdgeProps,
+  | 'label'
+  | 'labelStyle'
+  | 'labelShowBg'
+  | 'labelBgStyle'
+  | 'labelBgPadding'
+  | 'labelBgBorderRadius'
+  | 'style'
+  | 'markerStart'
+  | 'markerEnd'
+> & {
+  centerX: number;
+  centerY: number;
+  path: string;
+};
+
 export type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void;
 
 export interface WrapEdgeProps<T = any> {
@@ -127,6 +143,7 @@ export enum ConnectionLineType {
   Straight = 'straight',
   Step = 'step',
   SmoothStep = 'smoothstep',
+  SimpleBezier = 'simplebezier',
 }
 
 export type ConnectionLineComponentProps = {