Rename to "unreal" edge, fix for both horizontal and vertical handles

src/components/Edges/UnrealBezierEdge.tsx

@@ -14,7 +14,7 @@ interface GetBezierPathParams {
   curvature?: number;
 }
 
-export function getQuarticBezierPath({
+export function getUnrealBezierPath({
   sourceX,
   sourceY,
   sourcePosition = Position.Bottom,
@@ -27,16 +27,22 @@ export function getQuarticBezierPath({
 
   // Distance between the source and target
   const distanceX = sourceX - targetX;
+  const distanceY = sourceY - targetY;
+  
   // A scalar value to fix the curve size getting larger 
-  const scalar = Math.min(curvature, Math.max(0, distanceX / 10000));
+  const scalarX = Math.min(curvature, Math.max(0, distanceX / 10000));
+  const scalarY = Math.min(curvature, Math.max(0, distanceY / 10000));
 
-  const cX = sourceX + Math.abs(targetX - sourceX) * (curvature - scalar);
-  const cY = targetX - Math.abs(targetX - sourceX) * (curvature - scalar);
+  const hx1 = sourceX + Math.abs(targetX - sourceX) * (curvature - scalarX);
+  const hx2 = targetX - Math.abs(targetX - sourceX) * (curvature - scalarX);
 
-  let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
+  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}`;
 
   if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-    path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
+    path = `M${sourceX},${sourceY} C${hx1},${sourceY} ${hx2},${targetY}, ${targetX},${targetY}`;
   } else if (leftAndRight.includes(targetPosition)) {
     path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(sourcePosition)) {
@@ -66,7 +72,7 @@ export default memo(
     curvature,
   }: EdgeProps) => {
     const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
-    const path = getQuarticBezierPath({
+    const path = getUnrealBezierPath({
       sourceX,
       sourceY,
       sourcePosition,

src/components/Edges/index.ts

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

src/container/EdgeRenderer/utils.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { BezierEdge, QuarticBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, UnrealBezierEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
 import {
   EdgeProps,
@@ -22,7 +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>),
+    unreal: wrapEdge((edgeTypes.unreal || UnrealBezierEdge) as ComponentType<EdgeProps>),
   };
 
   const wrappedTypes = {} as EdgeTypes;

src/container/ReactFlow/index.tsx

@@ -1,7 +1,7 @@
 import cc from 'classcat';
 import React, { forwardRef } from 'react';
 import Attribution from '../../components/Attribution';
-import { BezierEdge, QuarticBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, UnrealBezierEdge } from '../../components/Edges';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
@@ -40,7 +40,7 @@ const defaultEdgeTypes = {
   straight: StraightEdge,
   step: StepEdge,
   smoothstep: SmoothStepEdge,
-  quartic: QuarticBezierEdge,
+  unreal: UnrealBezierEdge,
 };
 
 const initSnapGrid: [number, number] = [15, 15];