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

example/src/EdgeTypes/utils.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, Position } from 'react-flow-renderer';
+import { Edge, Node, Position } from 'react-flow-renderer';
 
 const nodeWidth = 80;
 const nodeGapWidth = nodeWidth * 2;
@@ -9,10 +9,10 @@ const sourceTargetPositions = [
   { source: Position.Right, target: Position.Left },
 ];
 const nodeColors = [
-  ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
-  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8'],
+  ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4', '#c4fff7'],
+  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8', '#4fa6e0'],
 ];
-const edgeTypes = ['default', 'step', 'smoothstep', 'straight'];
+const edgeTypes = ['default', 'step', 'smoothstep', 'straight', 'unreal'];
 const offsets = [
   {
     x: 0,

example/src/Edges/index.tsx

@@ -1,23 +1,12 @@
 import { MouseEvent } from 'react';
-
 import ReactFlow, {
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  ReactFlowInstance,
-  EdgeTypes,
-  Connection,
-  Edge,
-  MarkerType,
-  Node,
-  useNodesState,
-  useEdgesState,
+  addEdge, Background, Connection, Controls, Edge, EdgeTypes, MarkerType, MiniMap, Node, ReactFlowInstance, useEdgesState, useNodesState
 } from 'react-flow-renderer';
-
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
 
+
+
 const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -26,6 +15,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 } },
   { 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 } },
@@ -39,6 +29,7 @@ const initialNodes: Node[] = [
 const initialEdges: Edge[] = [
   { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', className: 'normal-edge' },
   { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
+  { id: 'e2a-2b', source: '2a', target: '2b', type: 'unreal', label: 'unreal bezier edge', className: 'unreal-edge' },
   { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
   { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
   { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },

src/components/Edges/QuarticBezierEdge.tsx → 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];