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
@@ -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