fix(core): smooth step edge horizontally or vertically aligned nodes

Author: bcakmakoglu

packages/core/src/components/Edges/utils/smoothstep.ts

@@ -72,6 +72,10 @@ function getPoints({
 
   let points: XYPosition[]
   let centerX, centerY
+
+  const sourceGapOffset = { x: 0, y: 0 }
+  const targetGapOffset = { x: 0, y: 0 }
+
   const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getSimpleEdgeCenter({
     sourceX: source.x,
     sourceY: source.y,
@@ -128,6 +132,18 @@ function getPoints({
       if (flipSourceTarget) {
         points = dirAccessor === 'x' ? sourceTarget : targetSource
       }
+    } else {
+      const diff = Math.abs(source[dirAccessor] - target[dirAccessor])
+
+      // if an edge goes from right to right for example (sourcePosition === targetPosition) and the distance between source.x and target.x is less than the offset, the added point and the gapped source/target will overlap. This leads to a weird edge path. To avoid this we add a gapOffset to the source/target
+      if (diff <= offset) {
+        const gapOffset = Math.min(offset - 1, offset - diff)
+        if (sourceDir[dirAccessor] === currDir) {
+          sourceGapOffset[dirAccessor] = gapOffset
+        } else {
+          targetGapOffset[dirAccessor] = gapOffset
+        }
+      }
     }
 
     centerX = points[0].x