Add Unreal Engine style bezier edge

src/components/Edges/QuarticBezierEdge.tsx

@@ -0,0 +1,105 @@
+import React, { memo } from 'react';
+import { EdgeProps, Position } from '../../types';
+import EdgeText from './EdgeText';
+import { getCenter } from './utils';
+
+
+interface GetBezierPathParams {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+  curvature?: number;
+}
+
+export function getQuarticBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+  curvature = 0.5
+}: GetBezierPathParams): string {
+  const leftAndRight = [Position.Left, Position.Right];
+
+  // Distance between the source and target
+  const distanceX = sourceX - targetX;
+  // A scalar value to fix the curve size getting larger 
+  const scalar = Math.min(curvature, Math.max(0, distanceX / 10000));
+
+  const cX = sourceX + Math.abs(targetX - sourceX) * (curvature - scalar);
+  const cY = targetX - Math.abs(targetX - sourceX) * (curvature - scalar);
+
+  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,
+    curvature,
+  }: EdgeProps) => {
+    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+    const path = getQuarticBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      curvature,
+    });
+
+    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/index.ts

@@ -1,4 +1,5 @@
 export { default as BezierEdge } from './BezierEdge';
-export { default as StepEdge } from './StepEdge';
+export { default as QuarticBezierEdge } from './QuarticBezierEdge';
 export { default as SmoothStepEdge } from './SmoothStepEdge';
+export { default as StepEdge } from './StepEdge';
 export { default as StraightEdge } from './StraightEdge';

src/container/EdgeRenderer/utils.ts

@@ -1,20 +1,18 @@
 import { ComponentType } from 'react';
-
-import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
+import { BezierEdge, QuarticBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
-import { rectToBox } from '../../utils';
-
 import {
-  EdgeTypes,
   EdgeProps,
+  EdgeTypes,
   HandleElement,
-  Position,
-  XYPosition,
-  Transform,
-  Rect,
-  NodeInternals,
   NodeHandleBounds,
+  NodeInternals,
+  Position,
+  Rect,
+  Transform,
+  XYPosition,
 } from '../../types';
+import { rectToBox } from '../../utils';
 
 export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypes;
 
@@ -24,6 +22,7 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes {
     straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
     step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
     smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType<EdgeProps>),
+    quartic: wrapEdge((edgeTypes.quartic || QuarticBezierEdge) as ComponentType<EdgeProps>),
   };
 
   const wrappedTypes = {} as EdgeTypes;

src/container/ReactFlow/index.tsx

@@ -1,31 +1,28 @@
-import React, { forwardRef } from 'react';
 import cc from 'classcat';
-
-import GraphView from '../GraphView';
-import StoreUpdater from '../../components/StoreUpdater';
+import React, { forwardRef } from 'react';
+import Attribution from '../../components/Attribution';
+import { BezierEdge, QuarticBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
-import { createNodeTypes } from '../NodeRenderer/utils';
 import SelectionListener from '../../components/SelectionListener';
-import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
-import Attribution from '../../components/Attribution';
-import { createEdgeTypes } from '../EdgeRenderer/utils';
-import Wrapper from './Wrapper';
-import injectStyle, { useNodeOrEdgeTypes } from './utils';
-
-import {
-  ConnectionMode,
-  ConnectionLineType,
-  PanOnScrollMode,
-  ReactFlowProps,
-  ReactFlowRefType,
-  NodeTypes,
-  EdgeTypes,
-} from '../../types';
-
+import StoreUpdater from '../../components/StoreUpdater';
 import css from '../../style.css';
 import theme from '../../theme-default.css';
+import {
+  ConnectionLineType, ConnectionMode, EdgeTypes, NodeTypes, PanOnScrollMode,
+  ReactFlowProps,
+  ReactFlowRefType
+} from '../../types';
+import { createEdgeTypes } from '../EdgeRenderer/utils';
+import GraphView from '../GraphView';
+import { createNodeTypes } from '../NodeRenderer/utils';
+import injectStyle, { useNodeOrEdgeTypes } from './utils';
+import Wrapper from './Wrapper';
+
+
+
+
 
 if (__INJECT_STYLES__) {
   injectStyle(css as unknown as string);
@@ -43,6 +40,7 @@ const defaultEdgeTypes = {
   straight: StraightEdge,
   step: StepEdge,
   smoothstep: SmoothStepEdge,
+  quartic: QuarticBezierEdge,
 };
 
 const initSnapGrid: [number, number] = [15, 15];

src/types/edges.ts

@@ -1,9 +1,9 @@
-import { CSSProperties, ReactNode, HTMLAttributes } from 'react';
-
-import { Position } from './utils';
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
 import { Connection } from './general';
 import { HandleElement } from './handles';
 import { Node } from './nodes';
+import { Position } from './utils';
+
 
 // interface for the user edge items
 export interface Edge<T = any> {
@@ -62,6 +62,7 @@ export interface EdgeProps<T = any> {
   targetHandleId?: string | null;
   markerStart?: string;
   markerEnd?: string;
+  curvature?: number;
 }
 
 export type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void;