Merge pull request #536 from wbkd/develop

Develop

README.md

@@ -350,6 +350,8 @@ Returns the path of a bezier edge.
   targetX,
   targetY,
   targetPosition = Position.Top,
+  centerX, // optional
+  centerY // optional
 }: GetBezierPathParams): string`
 
 ### getSmoothStepPath
@@ -364,11 +366,13 @@ Returns the path of a smooth step edge. You can set `borderRadius` = `0` to get
   targetY,
   targetPosition = Position.Top,
   borderRadius = 5,
+  centerX, // optional
+  centerY // optional
 }: GetSmoothStepPathParams): string`
 
 ### getEdgeCenter
 
-Returns the center poostion `[centerX, centerY]` of the edge.
+Returns the center poostion `[centerX, centerY, offsetX, offsetY]` of the edge.
 
 `getEdgeCenter({ sourceX, sourceY, targetX, targetY }: GetCenterParams): [number, number, number, number]`
 

src/components/Edges/BezierEdge.tsx

@@ -12,6 +12,8 @@ interface GetBezierPathParams {
   targetX: number;
   targetY: number;
   targetPosition?: Position;
+  centerX?: number;
+  centerY?: number;
 }
 
 export function getBezierPath({
@@ -21,14 +23,19 @@ export function getBezierPath({
   targetX,
   targetY,
   targetPosition = Position.Top,
+  centerX,
+  centerY,
 }: GetBezierPathParams): string {
-  const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
+  const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
   const leftAndRight = [Position.Left, Position.Right];
 
-  let path = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
+  const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
+  const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+
+  let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
 
   if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-    path = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
+    path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(targetPosition)) {
     path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(sourcePosition)) {

src/components/Edges/SmoothStepEdge.tsx

@@ -41,6 +41,8 @@ interface GetSmoothStepPathParams {
   targetY: number;
   targetPosition?: Position;
   borderRadius?: number;
+  centerX?: number;
+  centerY?: number;
 }
 
 export function getSmoothStepPath({
@@ -51,8 +53,10 @@ export function getSmoothStepPath({
   targetY,
   targetPosition = Position.Top,
   borderRadius = 5,
+  centerX,
+  centerY,
 }: GetSmoothStepPathParams): string {
-  const [centerX, centerY, offsetX, offsetY] = getCenter({ sourceX, sourceY, targetX, targetY });
+  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);
@@ -62,33 +66,28 @@ export function getSmoothStepPath({
   let firstCornerPath = null;
   let secondCornerPath = null;
 
+  const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
+  const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+
   // default case: source and target positions are top or bottom
   if (sourceX <= targetX) {
     firstCornerPath =
-      sourceY <= targetY ? bottomLeftCorner(sourceX, centerY, cornerSize) : topLeftCorner(sourceX, centerY, cornerSize);
+      sourceY <= targetY ? bottomLeftCorner(sourceX, cY, cornerSize) : topLeftCorner(sourceX, cY, cornerSize);
     secondCornerPath =
-      sourceY <= targetY
+      sourceY <= targetY ? rightTopCorner(targetX, cY, cornerSize) : rightBottomCorner(targetX, cY, cornerSize);
-        ? rightTopCorner(targetX, centerY, cornerSize)
-        : rightBottomCorner(targetX, centerY, cornerSize);
   } else {
     firstCornerPath =
-      sourceY < targetY
+      sourceY < targetY ? bottomRightCorner(sourceX, cY, cornerSize) : topRightCorner(sourceX, cY, cornerSize);
-        ? bottomRightCorner(sourceX, centerY, cornerSize)
-        : topRightCorner(sourceX, centerY, cornerSize);
     secondCornerPath =
-      sourceY < targetY ? leftTopCorner(targetX, centerY, cornerSize) : leftBottomCorner(targetX, centerY, cornerSize);
+      sourceY < targetY ? leftTopCorner(targetX, cY, cornerSize) : leftBottomCorner(targetX, cY, cornerSize);
   }
 
   if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
     if (sourceX <= targetX) {
       firstCornerPath =
-        sourceY <= targetY
+        sourceY <= targetY ? rightTopCorner(cX, sourceY, cornerSize) : rightBottomCorner(cX, sourceY, cornerSize);
-          ? rightTopCorner(centerX, sourceY, cornerSize)
-          : rightBottomCorner(centerX, sourceY, cornerSize);
       secondCornerPath =
-        sourceY <= targetY
+        sourceY <= targetY ? bottomLeftCorner(cX, targetY, cornerSize) : topLeftCorner(cX, targetY, cornerSize);
-          ? bottomLeftCorner(centerX, targetY, cornerSize)
-          : topLeftCorner(centerX, targetY, cornerSize);
     }
   } else if (leftAndRight.includes(sourcePosition) && !leftAndRight.includes(targetPosition)) {
     if (sourceX <= targetX) {