From 0558ff86c4eed543c8dabb820b0f9999315b7197 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sat, 30 May 2020 20:26:55 +0200
Subject: [PATCH] fix(bezieredge): correctly connect diagonally nodes closes
 #256

---
 example/src/Horizontal/index.js     | 15 ++++++++++++---
 src/components/Edges/BezierEdge.tsx |  5 ++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/example/src/Horizontal/index.js b/example/src/Horizontal/index.js
index 47684f5d..d7fb9f68 100644
--- a/example/src/Horizontal/index.js
+++ b/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 = () => {
diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx
index b349c868..a6bdc8a5 100644
--- a/src/components/Edges/BezierEdge.tsx
+++ b/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 ? (