From 4529955f7d3bc651e46f5aa41f974a0e152b6062 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Mon, 13 Apr 2026 20:17:33 +0000
Subject: [PATCH] feat(network): add orthogonal edge routing option

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/network/edges/ConnectionEdge.tsx   | 1 +
 frontend/src/components/network/panels/PropertiesPanel.tsx | 3 ++-
 frontend/src/types/network-diagram.ts                      | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/network/edges/ConnectionEdge.tsx b/frontend/src/components/network/edges/ConnectionEdge.tsx
index e6c30b6f..5b769eec 100644
--- a/frontend/src/components/network/edges/ConnectionEdge.tsx
+++ b/frontend/src/components/network/edges/ConnectionEdge.tsx
@@ -31,6 +31,7 @@ function getEdgePath(routing: string | null | undefined, props: EdgeProps) {
   }
   if (routing === 'curved') return getBezierPath(base)
   if (routing === 'step') return getSmoothStepPath(base)
+  if (routing === 'orthogonal') return getSmoothStepPath({ ...base, borderRadius: 0 })
   return getStraightPath(base)
 }
 
diff --git a/frontend/src/components/network/panels/PropertiesPanel.tsx b/frontend/src/components/network/panels/PropertiesPanel.tsx
index b92c6708..d319a4da 100644
--- a/frontend/src/components/network/panels/PropertiesPanel.tsx
+++ b/frontend/src/components/network/panels/PropertiesPanel.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState, useEffect } from 'react'
 import {
-  Trash2, Minus, Spline, GitBranch, BringToFront, SendToBack,
+  Trash2, Minus, Spline, GitBranch, CornerUpRight, BringToFront, SendToBack,
   AlignStartVertical, AlignCenterHorizontal, AlignEndVertical,
   AlignStartHorizontal, AlignCenterVertical, AlignEndHorizontal,
   AlignHorizontalSpaceAround, AlignVerticalSpaceAround,
@@ -264,6 +264,7 @@ export function PropertiesPanel({
                 { value: null, icon: Minus, label: 'Straight' },
                 { value: 'curved', icon: Spline, label: 'Curved' },
                 { value: 'step', icon: GitBranch, label: 'Step' },
+                { value: 'orthogonal', icon: CornerUpRight, label: 'Ortho' },
               ] as const).map(({ value, icon: Icon, label }) => {
                 const routing = (edgeData.routing as string | null | undefined) ?? null
                 const active = routing === value
diff --git a/frontend/src/types/network-diagram.ts b/frontend/src/types/network-diagram.ts
index 55962640..aeff51a4 100644
--- a/frontend/src/types/network-diagram.ts
+++ b/frontend/src/types/network-diagram.ts
@@ -28,7 +28,7 @@ export interface DiagramEdge {
   connectionType: string
   speed: string | null
   notes: string | null
-  routing?: string | null
+  routing?: 'curved' | 'step' | 'orthogonal' | null
 }
 
 export interface DeviceTypeResponse {