Refactor: Better routing for smoothstep and step edge (#2407)

* refactor(step/smoothstep-edge): better default routing
* chore(edges): pass options
* chore(exports): add BaseEdge

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

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { EdgeProps, Position } from '../../types';
+import { BezierEdgeProps, Position } from '../../types';
 import BaseEdge from './BaseEdge';
 
 export interface GetBezierPathParams {
@@ -143,8 +143,8 @@ const BezierEdge = memo(
     style,
     markerEnd,
     markerStart,
-    curvature,
-  }: EdgeProps) => {
+    options,
+  }: BezierEdgeProps) => {
     const params = {
       sourceX,
       sourceY,
@@ -152,7 +152,7 @@ const BezierEdge = memo(
       targetX,
       targetY,
       targetPosition,
-      curvature,
+      curvature: options?.curvature,
     };
     const path = getBezierPath(params);
     const [centerX, centerY] = getBezierCenter(params);

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

@@ -1,26 +1,9 @@
 import { memo } from 'react';
 
 import { getCenter } from './utils';
-import { EdgeSmoothStepProps, Position } from '../../types';
+import { SmoothStepEdgeProps, Position, XYPosition } from '../../types';
 import BaseEdge from './BaseEdge';
 
-// These are some helper methods for drawing the round corners
-// The name indicates the direction of the path. "bottomLeftCorner" goes
-// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
-// We have to consider the direction of the paths because of the animated lines.
-const bottomLeftCorner = (x: number, y: number, size: number): string =>
-  `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
-const leftBottomCorner = (x: number, y: number, size: number): string =>
-  `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
-const bottomRightCorner = (x: number, y: number, size: number): string =>
-  `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
-const rightBottomCorner = (x: number, y: number, size: number): string =>
-  `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
-const leftTopCorner = (x: number, y: number, size: number): string => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
-const topLeftCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
-const topRightCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
-const rightTopCorner = (x: number, y: number, size: number): string => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
-
 export interface GetSmoothStepPathParams {
   sourceX: number;
   sourceY: number;
@@ -31,6 +14,135 @@ export interface GetSmoothStepPathParams {
   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: XYPosition;
+  offset: number;
+}): XYPosition[] {
+  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[] = [];
+
+  // opposite handle positions, default case
+  if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
+    //    --->
+    //    |
+    // >---
+    const verticalSplit: XYPosition[] = [
+      { x: center.x, y: sourceGapped.y },
+      { x: center.x, y: targetGapped.y },
+    ];
+    //    |
+    //  ---
+    //  |
+    const horizontalSplit: XYPosition[] = [
+      { x: sourceGapped.x, y: center.y },
+      { x: targetGapped.x, y: center.y },
+    ];
+
+    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;
+      }
+    }
+  }
+
+  return [source, sourceGapped, ...points, targetGapped, target];
+}
+
+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({
@@ -43,76 +155,34 @@ export function getSmoothStepPath({
   borderRadius = 5,
   centerX,
   centerY,
+  offset = 20,
 }: GetSmoothStepPathParams): string {
-  const [_centerX, _centerY, offsetX, offsetY] = getCenter({ sourceX, sourceY, targetX, targetY });
-  const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
-  const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
-  const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
-  const leftAndRight = [Position.Left, Position.Right];
+  const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
   const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
   const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
 
-  let firstCornerPath = null;
-  let secondCornerPath = null;
+  const points = getPoints({
+    source: { x: sourceX, y: sourceY },
+    sourcePosition,
+    target: { x: targetX, y: targetY },
+    targetPosition,
+    center: { x: cX, y: cY },
+    offset,
+  });
 
-  if (sourceX <= targetX) {
-    firstCornerPath =
-      sourceY <= targetY ? bottomLeftCorner(sourceX, cY, cornerSize) : topLeftCorner(sourceX, cY, cornerSize);
-    secondCornerPath =
-      sourceY <= targetY ? rightTopCorner(targetX, cY, cornerSize) : rightBottomCorner(targetX, cY, cornerSize);
-  } else {
-    firstCornerPath =
-      sourceY < targetY ? bottomRightCorner(sourceX, cY, cornerSize) : topRightCorner(sourceX, cY, cornerSize);
-    secondCornerPath =
-      sourceY < targetY ? leftTopCorner(targetX, cY, cornerSize) : leftBottomCorner(targetX, cY, cornerSize);
-  }
+  return points.reduce<string>((res, p, i) => {
+    let segment = '';
 
-  if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-    if (sourceX <= targetX) {
-      firstCornerPath =
-        sourceY <= targetY ? rightTopCorner(cX, sourceY, cornerSize) : rightBottomCorner(cX, sourceY, cornerSize);
-      secondCornerPath =
-        sourceY <= targetY ? bottomLeftCorner(cX, targetY, cornerSize) : topLeftCorner(cX, targetY, cornerSize);
-    } else if (
-      (sourcePosition === Position.Right && targetPosition === Position.Left) ||
-      (sourcePosition === Position.Left && targetPosition === Position.Right) ||
-      (sourcePosition === Position.Left && targetPosition === Position.Left)
-    ) {
-      // and sourceX > targetX
-      firstCornerPath =
-        sourceY <= targetY ? leftTopCorner(cX, sourceY, cornerSize) : leftBottomCorner(cX, sourceY, cornerSize);
-      secondCornerPath =
-        sourceY <= targetY ? bottomRightCorner(cX, targetY, cornerSize) : topRightCorner(cX, targetY, cornerSize);
-    }
-  } else if (leftAndRight.includes(sourcePosition) && !leftAndRight.includes(targetPosition)) {
-    if (sourceX <= targetX) {
-      firstCornerPath =
-        sourceY <= targetY
-          ? rightTopCorner(targetX, sourceY, cornerSize)
-          : rightBottomCorner(targetX, sourceY, cornerSize);
+    if (i > 0 && i < points.length - 1) {
+      segment = getBend(points[i - 1], p, points[i + 1], borderRadius);
     } else {
-      firstCornerPath =
-        sourceY <= targetY
-          ? leftTopCorner(targetX, sourceY, cornerSize)
-          : leftBottomCorner(targetX, sourceY, cornerSize);
+      segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`;
     }
-    secondCornerPath = '';
-  } else if (!leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-    if (sourceX <= targetX) {
-      firstCornerPath =
-        sourceY <= targetY
-          ? bottomLeftCorner(sourceX, targetY, cornerSize)
-          : topLeftCorner(sourceX, targetY, cornerSize);
-    } else {
-      firstCornerPath =
-        sourceY <= targetY
-          ? bottomRightCorner(sourceX, targetY, cornerSize)
-          : topRightCorner(sourceX, targetY, cornerSize);
-    }
-    secondCornerPath = '';
-  }
 
-  return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
+    res += segment;
+
+    return res;
+  }, '');
 }
 
 const SmoothStepEdge = memo(
@@ -132,8 +202,8 @@ const SmoothStepEdge = memo(
     targetPosition = Position.Top,
     markerEnd,
     markerStart,
-    borderRadius = 5,
-  }: EdgeSmoothStepProps) => {
+    options,
+  }: SmoothStepEdgeProps) => {
     const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
 
     const path = getSmoothStepPath({
@@ -143,7 +213,8 @@ const SmoothStepEdge = memo(
       targetX,
       targetY,
       targetPosition,
-      borderRadius,
+      borderRadius: options?.borderRadius,
+      offset: options?.offset,
     });
 
     return (

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

@@ -52,6 +52,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     rfId,
     ariaLabel,
     disableKeyboardA11y,
+    options,
   }: WrapEdgeProps): JSX.Element | null => {
     const edgeRef = useRef<SVGGElement>(null);
     const [updateHover, setUpdateHover] = useState<boolean>(false);
@@ -189,6 +190,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             targetHandleId={targetHandleId}
             markerStart={markerStartUrl}
             markerEnd={markerEndUrl}
+            options={options}
           />
         )}
 

packages/core/src/components/Nodes/wrapNode.tsx

@@ -46,7 +46,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     dragHandle,
     zIndex,
     isParent,
-    noPanClassName,
     noDragClassName,
     initialized,
     disableKeyboardA11y,

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

@@ -126,7 +126,8 @@ const StoreUpdater = ({
   const store = useStoreApi();
 
   useEffect(() => {
-    setDefaultNodesAndEdges(defaultNodes, defaultEdges);
+    const edgesWithDefaults = defaultEdges?.map((e) => ({ ...e, ...defaultEdgeOptions }));
+    setDefaultNodesAndEdges(defaultNodes, edgesWithDefaults);
 
     return () => {
       reset();

packages/core/src/container/EdgeRenderer/index.tsx

@@ -182,6 +182,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
                   rfId={props.rfId}
                   ariaLabel={edge.ariaLabel}
                   disableKeyboardA11y={props.disableKeyboardA11y}
+                  options={'options' in edge ? edge.options : undefined}
                 />
               );
             })}

packages/core/src/container/NodeRenderer/index.tsx

@@ -127,7 +127,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
             zIndex={node[internalsSymbol]?.z ?? 0}
             isParent={!!node[internalsSymbol]?.isParent}
             noDragClassName={props.noDragClassName}
-            noPanClassName={props.noPanClassName}
             initialized={!!node.width && !!node.height}
             rfId={props.rfId}
             disableKeyboardA11y={props.disableKeyboardA11y}

packages/core/src/container/ReactFlow/utils.ts

@@ -28,14 +28,3 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
 
   return typesParsed;
 }
-
-export function injectStyle(css: string): void {
-  if (!css || typeof document === 'undefined') return;
-
-  const head = document.head || document.getElementsByTagName('head')[0];
-  const style = document.createElement('style');
-
-  head.appendChild(style);
-
-  style.appendChild(document.createTextNode(css));
-}

packages/core/src/index.ts

@@ -14,6 +14,7 @@ export {
   getSimpleBezierCenter as getSimpleBezierEdgeCenter,
 } from './components/Edges/SimpleBezierEdge';
 export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge';
+export { default as BaseEdge } from './components/Edges/BaseEdge';
 
 export { internalsSymbol, rectToBox, boxToRect, getBoundsOfRects } from './utils';
 export {

packages/core/src/types/edges.ts

@@ -6,7 +6,7 @@ import { Node } from './nodes';
 import { Position } from './utils';
 
 // interface for the user edge items
-export interface Edge<T = any> {
+type DefaultEdge<T = any> = {
   id: string;
   type?: string;
   source: string;
@@ -32,7 +32,28 @@ export interface Edge<T = any> {
   markerEnd?: EdgeMarkerType;
   zIndex?: number;
   ariaLabel?: string;
-}
+};
+
+export type SmoothStepEdgeOptions = {
+  offset?: number;
+  borderRadius?: number;
+};
+
+type SmoothStepEdgeType<T> = DefaultEdge<T> & {
+  type: 'smoothstep';
+  options?: SmoothStepEdgeOptions;
+};
+
+export type BezierEdgeOptions = {
+  curvature?: number;
+};
+
+type BezierEdgeType<T> = DefaultEdge<T> & {
+  type: 'default';
+  options?: BezierEdgeOptions;
+};
+
+export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
 
 export type DefaultEdgeOptions = Omit<
   Edge,
@@ -64,7 +85,7 @@ export interface EdgeProps<T = any> {
   targetHandleId?: string | null;
   markerStart?: string;
   markerEnd?: string;
-  curvature?: number;
+  options?: BezierEdgeOptions | SmoothStepEdgeOptions;
 }
 
 export type BaseEdgeProps = Pick<
@@ -127,12 +148,16 @@ export interface WrapEdgeProps<T = any> {
   rfId?: string;
   ariaLabel?: string | null;
   disableKeyboardA11y: boolean;
+  options?: SmoothStepEdgeOptions | BezierEdgeOptions;
 }
 
-export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
-  borderRadius?: number;
+export interface SmoothStepEdgeProps<T = any> extends EdgeProps<T> {
+  options?: SmoothStepEdgeOptions;
 }
 
+export interface BezierEdgeProps<T = any> extends EdgeProps<T> {
+  options?: BezierEdgeOptions;
+}
 export interface EdgeTextProps extends HTMLAttributes<SVGElement> {
   x: number;
   y: number;

packages/core/src/types/nodes.ts

@@ -89,7 +89,6 @@ export interface WrapNodeProps<T = any> {
   dragHandle?: string;
   zIndex: number;
   isParent: boolean;
-  noPanClassName: string;
   noDragClassName: string;
   rfId: string;
   disableKeyboardA11y: boolean;