From e12ab8e521230a093e44f628f9154b8b17d8621f Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Tue, 15 Apr 2025 22:03:19 +0100
Subject: [PATCH] feat(*): Enable lines to turn 90 degrees

---
 src/lib/components/NetworkDiagram.svelte | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/NetworkDiagram.svelte b/src/lib/components/NetworkDiagram.svelte
index 8a722bd..16a1d95 100644
--- a/src/lib/components/NetworkDiagram.svelte
+++ b/src/lib/components/NetworkDiagram.svelte
@@ -100,10 +100,30 @@
 			const cableSpeed = Math.min(localSpeed, remoteSpeed);
 			const color = getLineColor(cableSpeed);
 
+			// Calculate the best sockets for the line to exit/enter
+			const localRect = info.element.getBoundingClientRect();
+			const remoteRect = remoteInfo.element.getBoundingClientRect();
+			const dx = remoteRect.left - localRect.left;
+			const dy = remoteRect.top - localRect.top;
+
+			let startSocket = 'right';
+			let endSocket = 'left';
+			if (Math.abs(dx) > Math.abs(dy)) {
+				// More horizontal distance
+				startSocket = dx > 0 ? 'right' : 'left';
+				endSocket = dx > 0 ? 'left' : 'right';
+			} else {
+				// More vertical distance
+				startSocket = dy > 0 ? 'bottom' : 'top';
+				endSocket = dy > 0 ? 'top' : 'bottom';
+			}
+
 			const line = new LeaderLine(info.element, remoteInfo.element, {
-				path: 'straight',
+				path: 'grid',
 				startPlug: 'behind',
 				endPlug: 'behind',
+				startSocket,
+				endSocket,
 				color,
 				size: 4,
 				middleLabel: LeaderLine.captionLabel({