refactor(core): use edge-utils

packages/core/package.json

@@ -38,6 +38,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@reactflow/edge-utils": "workspace:*",
     "@reactflow/system": "workspace:*",
     "@reactflow/utils": "workspace:*",
     "@types/d3": "^7.4.0",

packages/core/src/components/ConnectionLine/index.tsx

@@ -12,10 +12,9 @@ import {
   type ReactFlowState,
   type ReactFlowStore,
 } from '@reactflow/system';
+import { getBezierPath, getSmoothStepPath } from '@reactflow/edge-utils';
 
 import { useStore } from '../../hooks/useStore';
-import { getBezierPath } from '../Edges/BezierEdge';
-import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
 
 type ConnectionLineProps = {

packages/core/src/components/Edges/BezierEdge.tsx

@@ -1,93 +1,8 @@
 import { memo } from 'react';
 import { Position, type BezierEdgeProps } from '@reactflow/system';
+import { getBezierPath } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
-import { getBezierEdgeCenter } from './utils';
-
-export interface GetBezierPathParams {
-  sourceX: number;
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-  curvature?: number;
-}
-
-interface GetControlWithCurvatureParams {
-  pos: Position;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-  c: number;
-}
-
-function calculateControlOffset(distance: number, curvature: number): number {
-  if (distance >= 0) {
-    return 0.5 * distance;
-  }
-
-  return curvature * 25 * Math.sqrt(-distance);
-}
-
-function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurvatureParams): [number, number] {
-  switch (pos) {
-    case Position.Left:
-      return [x1 - calculateControlOffset(x1 - x2, c), y1];
-    case Position.Right:
-      return [x1 + calculateControlOffset(x2 - x1, c), y1];
-    case Position.Top:
-      return [x1, y1 - calculateControlOffset(y1 - y2, c)];
-    case Position.Bottom:
-      return [x1, y1 + calculateControlOffset(y2 - y1, c)];
-  }
-}
-
-export function getBezierPath({
-  sourceX,
-  sourceY,
-  sourcePosition = Position.Bottom,
-  targetX,
-  targetY,
-  targetPosition = Position.Top,
-  curvature = 0.25,
-}: GetBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
-  const [sourceControlX, sourceControlY] = getControlWithCurvature({
-    pos: sourcePosition,
-    x1: sourceX,
-    y1: sourceY,
-    x2: targetX,
-    y2: targetY,
-    c: curvature,
-  });
-  const [targetControlX, targetControlY] = getControlWithCurvature({
-    pos: targetPosition,
-    x1: targetX,
-    y1: targetY,
-    x2: sourceX,
-    y2: sourceY,
-    c: curvature,
-  });
-  const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourceControlX,
-    sourceControlY,
-    targetControlX,
-    targetControlY,
-  });
-
-  return [
-    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
-    labelX,
-    labelY,
-    offsetX,
-    offsetY,
-  ];
-}
 
 const BezierEdge = memo(
   ({

packages/core/src/components/Edges/SimpleBezierEdge.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import { Position, type EdgeProps } from '@reactflow/system';
+import { getBezierEdgeCenter } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
-import { getBezierEdgeCenter } from './utils';
 
 export interface GetSimpleBezierPathParams {
   sourceX: number;

packages/core/src/components/Edges/SmoothStepEdge.tsx

@@ -1,201 +1,8 @@
 import { memo } from 'react';
-import { Position, type SmoothStepEdgeProps, type XYPosition } from '@reactflow/system';
+import { Position, type SmoothStepEdgeProps } from '@reactflow/system';
+import { getSmoothStepPath } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
-import { getEdgeCenter } from './utils';
-
-export interface GetSmoothStepPathParams {
-  sourceX: number;
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-  borderRadius?: number;
-  centerX?: number;
-  centerY?: number;
-  offset?: number;
-}
-
-const handleDirections = {
-  [Position.Left]: { x: -1, y: 0 },
-  [Position.Right]: { x: 1, y: 0 },
-  [Position.Top]: { x: 0, y: -1 },
-  [Position.Bottom]: { x: 0, y: 1 },
-};
-
-const getDirection = ({
-  source,
-  sourcePosition = Position.Bottom,
-  target,
-}: {
-  source: XYPosition;
-  sourcePosition: Position;
-  target: XYPosition;
-}): XYPosition => {
-  if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
-    return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
-  }
-  return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
-};
-
-const distance = (a: XYPosition, b: XYPosition) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
-
-// ith this function we try to mimic a orthogonal edge routing behaviour
-// It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges
-function getPoints({
-  source,
-  sourcePosition = Position.Bottom,
-  target,
-  targetPosition = Position.Top,
-  center,
-  offset,
-}: {
-  source: XYPosition;
-  sourcePosition: Position;
-  target: XYPosition;
-  targetPosition: Position;
-  center: Partial<XYPosition>;
-  offset: number;
-}): [XYPosition[], number, number, number, number] {
-  const sourceDir = handleDirections[sourcePosition];
-  const targetDir = handleDirections[targetPosition];
-  const sourceGapped: XYPosition = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };
-  const targetGapped: XYPosition = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset };
-  const dir = getDirection({
-    source: sourceGapped,
-    sourcePosition,
-    target: targetGapped,
-  });
-  const dirAccessor = dir.x !== 0 ? 'x' : 'y';
-  const currDir = dir[dirAccessor];
-
-  let points: XYPosition[] = [];
-  let centerX, centerY;
-  const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({
-    sourceX: source.x,
-    sourceY: source.y,
-    targetX: target.x,
-    targetY: target.y,
-  });
-
-  // opposite handle positions, default case
-  if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
-    centerX = center.x || defaultCenterX;
-    centerY = center.y || defaultCenterY;
-    //    --->
-    //    |
-    // >---
-    const verticalSplit: XYPosition[] = [
-      { x: centerX, y: sourceGapped.y },
-      { x: centerX, y: targetGapped.y },
-    ];
-    //    |
-    //  ---
-    //  |
-    const horizontalSplit: XYPosition[] = [
-      { x: sourceGapped.x, y: centerY },
-      { x: targetGapped.x, y: centerY },
-    ];
-
-    if (sourceDir[dirAccessor] === currDir) {
-      points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
-    } else {
-      points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
-    }
-  } else {
-    // sourceTarget means we take x from source and y from target, targetSource is the opposite
-    const sourceTarget: XYPosition[] = [{ x: sourceGapped.x, y: targetGapped.y }];
-    const targetSource: XYPosition[] = [{ x: targetGapped.x, y: sourceGapped.y }];
-    // this handles edges with same handle positions
-    if (dirAccessor === 'x') {
-      points = sourceDir.x === currDir ? targetSource : sourceTarget;
-    } else {
-      points = sourceDir.y === currDir ? sourceTarget : targetSource;
-    }
-
-    // these are conditions for handling mixed handle positions like Right -> Bottom for example
-    if (sourcePosition !== targetPosition) {
-      const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x';
-      const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite];
-      const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
-      const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
-      const flipSourceTarget =
-        (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
-        (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)));
-
-      if (flipSourceTarget) {
-        points = dirAccessor === 'x' ? sourceTarget : targetSource;
-      }
-    }
-
-    centerX = points[0].x;
-    centerY = points[0].y;
-  }
-
-  const pathPoints = [source, sourceGapped, ...points, targetGapped, target];
-
-  return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY];
-}
-
-function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): string {
-  const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size);
-  const { x, y } = b;
-
-  // no bend
-  if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
-    return `L${x} ${y}`;
-  }
-
-  // first segment is horizontal
-  if (a.y === y) {
-    const xDir = a.x < c.x ? -1 : 1;
-    const yDir = a.y < c.y ? 1 : -1;
-    return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;
-  }
-
-  const xDir = a.x < c.x ? 1 : -1;
-  const yDir = a.y < c.y ? -1 : 1;
-  return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
-}
-
-export function getSmoothStepPath({
-  sourceX,
-  sourceY,
-  sourcePosition = Position.Bottom,
-  targetX,
-  targetY,
-  targetPosition = Position.Top,
-  borderRadius = 5,
-  centerX,
-  centerY,
-  offset = 20,
-}: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
-  const [points, labelX, labelY, offsetX, offsetY] = getPoints({
-    source: { x: sourceX, y: sourceY },
-    sourcePosition,
-    target: { x: targetX, y: targetY },
-    targetPosition,
-    center: { x: centerX, y: centerY },
-    offset,
-  });
-
-  const path = points.reduce<string>((res, p, i) => {
-    let segment = '';
-
-    if (i > 0 && i < points.length - 1) {
-      segment = getBend(points[i - 1], p, points[i + 1], borderRadius);
-    } else {
-      segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`;
-    }
-
-    res += segment;
-
-    return res;
-  }, '');
-
-  return [path, labelX, labelY, offsetX, offsetY];
-}
 
 const SmoothStepEdge = memo(
   ({

packages/core/src/components/Edges/StraightEdge.tsx

@@ -1,31 +1,8 @@
 import { memo } from 'react';
 import type { EdgeProps } from '@reactflow/system';
+import { getStraightPath } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
-import { getEdgeCenter } from './utils';
-
-export type GetStraightPathParams = {
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-};
-
-export function getStraightPath({
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-}: GetStraightPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
-  const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  });
-
-  return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, labelX, labelY, offsetX, offsetY];
-}
 
 const StraightEdge = memo(
   ({

packages/core/src/components/Edges/utils.ts

@@ -1,14 +1,6 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
-import type { Edge, MarkerType, ReactFlowState } from '@reactflow/system';
+import type { Edge, ReactFlowState } from '@reactflow/system';
-
-export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): string => {
-  if (typeof markerEndId !== 'undefined' && markerEndId) {
-    return `url(#${markerEndId})`;
-  }
-
-  return typeof markerType !== 'undefined' ? `url(#react-flow__${markerType})` : 'none';
-};
 
 export function getMouseHandler(
   id: string,
@@ -25,53 +17,3 @@ export function getMouseHandler(
         }
       };
 }
-
-// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
-export function getEdgeCenter({
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-}: {
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-}): [number, number, number, number] {
-  const xOffset = Math.abs(targetX - sourceX) / 2;
-  const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
-
-  const yOffset = Math.abs(targetY - sourceY) / 2;
-  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
-
-  return [centerX, centerY, xOffset, yOffset];
-}
-
-export function getBezierEdgeCenter({
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourceControlX,
-  sourceControlY,
-  targetControlX,
-  targetControlY,
-}: {
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-  sourceControlX: number;
-  sourceControlY: number;
-  targetControlX: number;
-  targetControlY: number;
-}): [number, number, number, number] {
-  // cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
-  // https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
-  const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125;
-  const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125;
-  const offsetX = Math.abs(centerX - sourceX);
-  const offsetY = Math.abs(centerY - sourceY);
-
-  return [centerX, centerY, offsetX, offsetY];
-}

packages/core/src/index.ts

@@ -1,11 +1,11 @@
 export { default as ReactFlow } from './container/ReactFlow';
 export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
-export { default as StraightEdge, getStraightPath } from './components/Edges/StraightEdge';
+export { default as StraightEdge } from './components/Edges/StraightEdge';
 export { default as StepEdge } from './components/Edges/StepEdge';
-export { default as BezierEdge, getBezierPath } from './components/Edges/BezierEdge';
+export { default as BezierEdge } from './components/Edges/BezierEdge';
 export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
-export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge';
+export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge';
 export { default as BaseEdge } from './components/Edges/BaseEdge';
 
 export {
@@ -24,7 +24,6 @@ export {
   getBoundsOfRects,
 } from '@reactflow/utils';
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
-export { getMarkerEnd } from './components/Edges/utils';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel } from './components/Panel';
 export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
@@ -43,5 +42,6 @@ export { default as useNodesInitialized } from './hooks/useNodesInitialized';
 export { default as useGetPointerPosition } from './hooks/useGetPointerPosition';
 export { useNodeId } from './contexts/NodeIdContext';
 export * from '@reactflow/system';
+export * from '@reactflow/edge-utils';
 
 // export * from './types';