fix(bezieredge): correctly connect diagonally nodes closes xyflow#256

Author: moklick

example/src/Horizontal/index.js

@@ -9,11 +9,20 @@ const onLoad = (graph) => {
 const initialElements = [
   { id: '1', sourcePosition: 'right', type: 'input', className: 'dark-node', data: { label: 'Input' }, position: { x: 0, y: 80 } },
   { id: '2', sourcePosition: 'right', targetPosition: 'left', data: { label: 'A Node' }, position: { x: 250, y: 0 } },
-  { id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Another node' }, position: { x: 250, y: 160 } },
-  { id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 80 } },
+  { id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 3' }, position: { x: 250, y: 160 } },
+  { id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 0 } },
+  { id: '5', sourcePosition: 'top', targetPosition: 'bottom', data: { label: 'Node 5' }, position: { x: 500, y: 100 } },
+  { id: '6', sourcePosition: 'bottom', targetPosition: 'top', data: { label: 'Node 6' }, position: { x: 500, y: 230 } },
+  { id: '7', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 7' }, position: { x: 750, y: 50 } },
+  { id: '8', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 8' }, position: { x: 750, y: 300 } },
+
   { id: 'e1-2', source: '1', target: '2', animated: true,  },
   { id: 'e1-3', source: '1', target: '3', animated: true, },
-  { id: 'e1-4', source: '2', target: '4', label: 'edge label' }
+  { id: 'e1-4', source: '2', target: '4', label: 'edge label' },
+  { id: 'e3-5', source: '3', target: '5', animated: true },
+  { id: 'e3-6', source: '3', target: '6', animated: true },
+  { id: 'e5-7', source: '5', target: '7', animated: true },
+  { id: 'e6-8', source: '6', target: '8', animated: true },
 ];
 
 const HorizontalFlow = () => {

src/components/Edges/BezierEdge.tsx

@@ -26,10 +26,13 @@ export default memo(
     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(sourcePosition) || leftAndRight.includes(targetPosition)) {
+    } 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 text = label ? (