feat(connectionline): add step and smoothstep types

2020-07-13 18:02:59 +02:00
parent 1d8a9d6d87
commit 152acbe70a
8 changed files with 246 additions and 127 deletions
@@ -1,6 +1,9 @@
 import React, { useEffect, useState, CSSProperties } from 'react';
 import cx from 'classnames';

+import { getBezierPath } from '../Edges/BezierEdge';
+import { getStepPath } from '../Edges/StepEdge';
+import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { ElementId, Node, Transform, HandleElement, Position, ConnectionLineType, HandleType } from '../../types';

 interface ConnectionLineProps {
@@ -57,17 +60,46 @@ export default ({
  const targetY = (connectionPositionY - transform[1]) * (1 / transform[2]);

  let dAttr: string = '';
+  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;
+  const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right;
+  const targetPosition = isRightOrLeft ? Position.Left : Position.Top;

  if (connectionLineType === ConnectionLineType.Bezier) {
-    if (sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right) {
-      const xOffset = Math.abs(targetX - sourceX) / 2;
-      const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
-      dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
-    } else {
-      const yOffset = Math.abs(targetY - sourceY) / 2;
-      const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
-      dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
-    }
+    dAttr = getBezierPath({
+      centerX,
+      centerY,
+      sourceX,
+      sourceY,
+      sourcePosition: sourceHandle?.position,
+      targetX,
+      targetY,
+      targetPosition,
+    });
+  } else if (connectionLineType === ConnectionLineType.Step) {
+    dAttr = getStepPath({
+      centerY,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+    });
+  } else if (connectionLineType === ConnectionLineType.SmoothStep) {
+    dAttr = getSmoothStepPath({
+      xOffset,
+      yOffset,
+      centerX,
+      centerY,
+      sourceX,
+      sourceY,
+      sourcePosition: sourceHandle?.position,
+      targetX,
+      targetY,
+      targetPosition,
+    });
  } else {
    dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
  }
@@ -3,6 +3,42 @@ import React, { memo } from 'react';
 import EdgeText from './EdgeText';
 import { EdgeBezierProps, Position } from '../../types';

+interface GetBezierPathParams {
+  centerX: number;
+  centerY: number;
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+}
+
+export function getBezierPath({
+  centerX,
+  centerY,
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+}: GetBezierPathParams): string {
+  let path = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
+
+  const leftAndRight = [Position.Left, Position.Right];
+
+  if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
+    path = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
+  } else if (leftAndRight.includes(targetPosition)) {
+    path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
+  } else if (leftAndRight.includes(sourcePosition)) {
+    path = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
+  }
+
+  return path;
+}
+
 export default memo(
  ({
    sourceX,
@@ -23,17 +59,16 @@ export default memo(
    const xOffset = Math.abs(targetX - sourceX) / 2;
    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;

-    let dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
-
-    const leftAndRight = [Position.Left, Position.Right];
-
-    if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-      dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
-    } else if (leftAndRight.includes(targetPosition)) {
-      dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
-    } else if (leftAndRight.includes(sourcePosition)) {
-      dAttr = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
-    }
+    const path = getBezierPath({
+      centerX,
+      centerY,
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+    });

    const text = label ? (
      <EdgeText
@@ -48,7 +83,7 @@ export default memo(

    return (
      <>
-        <path style={style} d={dAttr} className="react-flow__edge-path" />
+        <path style={style} d={path} className="react-flow__edge-path" />
        {text}
      </>
    );
@@ -32,6 +32,99 @@ const topRightCorner = (cornerX: number, cornerY: number, cornerSize: number): s
 const rightTopCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
  `L ${cornerX - cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY + cornerSize}`;

+interface GetSmoothStepPathParams {
+  xOffset: number;
+  yOffset: number;
+  centerX: number;
+  centerY: number;
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+}
+
+export function getSmoothStepPath({
+  xOffset,
+  yOffset,
+  centerX,
+  centerY,
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+}: GetSmoothStepPathParams): string {
+  const cornerWidth = Math.min(5, Math.abs(targetX - sourceX));
+  const cornerHeight = Math.min(5, Math.abs(targetY - sourceY));
+  const cornerSize = Math.min(cornerWidth, cornerHeight, xOffset, yOffset);
+
+  const leftAndRight = [Position.Left, Position.Right];
+
+  let firstCornerPath = null;
+  let secondCornerPath = null;
+
+  // default case: source and target positions are top or bottom
+  if (sourceX < targetX) {
+    firstCornerPath =
+      sourceY < targetY ? bottomLeftCorner(sourceX, centerY, cornerSize) : topLeftCorner(sourceX, centerY, cornerSize);
+    secondCornerPath =
+      sourceY < targetY
+        ? rightTopCorner(targetX, centerY, cornerSize)
+        : rightBottomCorner(targetX, centerY, cornerSize);
+  } else if (sourceX > targetX) {
+    firstCornerPath =
+      sourceY < targetY
+        ? bottomRightCorner(sourceX, centerY, cornerSize)
+        : topRightCorner(sourceX, centerY, cornerSize);
+    secondCornerPath =
+      sourceY < targetY ? leftTopCorner(targetX, centerY, cornerSize) : leftBottomCorner(targetX, centerY, cornerSize);
+  }
+
+  if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
+    if (sourceX < targetX) {
+      firstCornerPath =
+        sourceY < targetY
+          ? rightTopCorner(centerX, sourceY, cornerSize)
+          : rightBottomCorner(centerX, sourceY, cornerSize);
+      secondCornerPath =
+        sourceY < targetY
+          ? bottomLeftCorner(centerX, targetY, cornerSize)
+          : topLeftCorner(centerX, targetY, cornerSize);
+    }
+  } else if (leftAndRight.includes(sourcePosition) && !leftAndRight.includes(targetPosition)) {
+    if (sourceX < targetX) {
+      firstCornerPath =
+        sourceY < targetY
+          ? rightTopCorner(targetX, sourceY, cornerSize)
+          : rightBottomCorner(targetX, sourceY, cornerSize);
+    } else if (sourceX > targetX) {
+      firstCornerPath =
+        sourceY < targetY
+          ? bottomRightCorner(sourceX, targetY, cornerSize)
+          : topRightCorner(sourceX, targetY, cornerSize);
+    }
+    secondCornerPath = '';
+  } else if (!leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
+    if (sourceX < targetX) {
+      firstCornerPath =
+        sourceY < targetY
+          ? bottomLeftCorner(sourceX, targetY, cornerSize)
+          : topLeftCorner(sourceX, targetY, cornerSize);
+    } else if (sourceX > targetX) {
+      firstCornerPath =
+        sourceY < targetY
+          ? bottomRightCorner(sourceX, targetY, cornerSize)
+          : topRightCorner(sourceX, targetY, cornerSize);
+    }
+    secondCornerPath = '';
+  }
+
+  return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
+}
+
 export default memo(
  ({
    sourceX,
@@ -52,77 +145,18 @@ export default memo(
    const xOffset = Math.abs(targetX - sourceX) / 2;
    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;

-    const cornerWidth = Math.min(5, Math.abs(targetX - sourceX));
-    const cornerHeight = Math.min(5, Math.abs(targetY - sourceY));
-    const cornerSize = Math.min(cornerWidth, cornerHeight, xOffset, yOffset);
-
-    const leftAndRight = [Position.Left, Position.Right];
-
-    let path;
-    let firstCornerPath = null;
-    let secondCornerPath = null;
-
-    // default case: source and target positions are top or bottom
-    if (sourceX < targetX) {
-      firstCornerPath =
-        sourceY < targetY
-          ? bottomLeftCorner(sourceX, centerY, cornerSize)
-          : topLeftCorner(sourceX, centerY, cornerSize);
-      secondCornerPath =
-        sourceY < targetY
-          ? rightTopCorner(targetX, centerY, cornerSize)
-          : rightBottomCorner(targetX, centerY, cornerSize);
-    } else if (sourceX > targetX) {
-      firstCornerPath =
-        sourceY < targetY
-          ? bottomRightCorner(sourceX, centerY, cornerSize)
-          : topRightCorner(sourceX, centerY, cornerSize);
-      secondCornerPath =
-        sourceY < targetY
-          ? leftTopCorner(targetX, centerY, cornerSize)
-          : leftBottomCorner(targetX, centerY, cornerSize);
-    }
-
-    if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-      if (sourceX < targetX) {
-        firstCornerPath =
-          sourceY < targetY
-            ? rightTopCorner(centerX, sourceY, cornerSize)
-            : rightBottomCorner(centerX, sourceY, cornerSize);
-        secondCornerPath =
-          sourceY < targetY
-            ? bottomLeftCorner(centerX, targetY, cornerSize)
-            : topLeftCorner(centerX, targetY, cornerSize);
-      }
-    } else if (leftAndRight.includes(sourcePosition) && !leftAndRight.includes(targetPosition)) {
-      if (sourceX < targetX) {
-        firstCornerPath =
-          sourceY < targetY
-            ? rightTopCorner(targetX, sourceY, cornerSize)
-            : rightBottomCorner(targetX, sourceY, cornerSize);
-      } else if (sourceX > targetX) {
-        firstCornerPath =
-          sourceY < targetY
-            ? bottomRightCorner(sourceX, targetY, cornerSize)
-            : topRightCorner(sourceX, targetY, cornerSize);
-      }
-      secondCornerPath = '';
-    } else if (!leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-      if (sourceX < targetX) {
-        firstCornerPath =
-          sourceY < targetY
-            ? bottomLeftCorner(sourceX, targetY, cornerSize)
-            : topLeftCorner(sourceX, targetY, cornerSize);
-      } else if (sourceX > targetX) {
-        firstCornerPath =
-          sourceY < targetY
-            ? bottomRightCorner(sourceX, targetY, cornerSize)
-            : topRightCorner(sourceX, targetY, cornerSize);
-      }
-      secondCornerPath = '';
-    }
-
-    path = `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
+    const path = getSmoothStepPath({
+      xOffset,
+      yOffset,
+      centerX,
+      centerY,
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+    });

    const text = label ? (
      <EdgeText
@@ -3,6 +3,18 @@ import React, { memo } from 'react';
 import EdgeText from './EdgeText';
 import { EdgeProps } from '../../types';

+interface GetStepPathParams {
+  centerY: number;
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+}
+
+export function getStepPath({ centerY, sourceX, sourceY, targetX, targetY }: GetStepPathParams): string {
+  return `M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`;
+}
+
 export default memo(
  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
    const yOffset = Math.abs(targetY - sourceY) / 2;
@@ -11,6 +23,8 @@ export default memo(
    const xOffset = Math.abs(targetX - sourceX) / 2;
    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;

+    const path = getStepPath({ centerY, sourceX, sourceY, targetX, targetY });
+
    const text = label ? (
      <EdgeText
        x={centerX}
@@ -24,11 +38,7 @@ export default memo(

    return (
      <>
-        <path
-          style={style}
-          className="react-flow__edge-path"
-          d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
-        />
+        <path style={style} className="react-flow__edge-path" d={path} />
        {text}
      </>
    );