Add Unreal Engine style bezier edge

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];