refactor(edges): handle mixed edges #961

src/components/Edges/BezierEdge.tsx

@@ -63,7 +63,7 @@ export default memo(
     arrowHeadType,
     markerEndId,
   }: EdgeProps) => {
-    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
+    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
     const path = getBezierPath({
       sourceX,
       sourceY,

src/components/Edges/SmoothStepEdge.tsx

@@ -124,7 +124,7 @@ export default memo(
     markerEndId,
     borderRadius = 5,
   }: EdgeSmoothStepProps) => {
-    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
+    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
 
     const path = getSmoothStepPath({
       sourceX,

src/components/Edges/utils.ts

@@ -1,4 +1,4 @@
-import { ArrowHeadType } from '../../types';
+import { ArrowHeadType, Position } from '../../types';
 
 export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
   if (typeof markerEndId !== 'undefined' && markerEndId) {
@@ -13,14 +13,37 @@ export interface GetCenterParams {
   sourceY: number;
   targetX: number;
   targetY: number;
+  sourcePosition?: Position;
+  targetPosition?: Position;
 }
 
+const LeftOrRight = [Position.Left, Position.Right];
+
 export const getCenter = ({
   sourceX,
   sourceY,
   targetX,
   targetY,
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top,
 }: GetCenterParams): [number, number, number, number] => {
+  const sourceIsLeftOrRight = LeftOrRight.includes(sourcePosition);
+  const targetIsLeftOrRight = LeftOrRight.includes(targetPosition);
+
+  // we expect flows to be horizontal or vertical (all handles left or right respectively top or bottom)
+  // a mixed edge is when one the source is on the left and the target is on the top for example.
+  const mixedEdge = (sourceIsLeftOrRight && !targetIsLeftOrRight) || (targetIsLeftOrRight && !sourceIsLeftOrRight);
+
+  if (mixedEdge) {
+    const xOffset = sourceIsLeftOrRight ? Math.abs(targetX - sourceX) : 0;
+    const centerX = sourceX > targetX ? sourceX - xOffset : sourceX + xOffset;
+
+    const yOffset = sourceIsLeftOrRight ? 0 : Math.abs(targetY - sourceY);
+    const centerY = sourceY < targetY ? sourceY + yOffset : sourceY - yOffset;
+
+    return [centerX, centerY, xOffset, yOffset];
+  }
+
   const xOffset = Math.abs(targetX - sourceX) / 2;
   const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;