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 {