chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(network): add orthogonal edge routing option

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-13 20:17:33 +00:00
parent b7b0d41f92
commit 4529955f7d
3 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/network/edges/ConnectionEdge.tsx
View File

@@ -31,6 +31,7 @@ function getEdgePath(routing: string | null | undefined, props: EdgeProps) {
} }
if (routing === 'curved') return getBezierPath(base) if (routing === 'curved') return getBezierPath(base)
if (routing === 'step') return getSmoothStepPath(base) if (routing === 'step') return getSmoothStepPath(base)
if (routing === 'orthogonal') return getSmoothStepPath({ ...base, borderRadius: 0 })
return getStraightPath(base) return getStraightPath(base)
} }

3
frontend/src/components/network/panels/PropertiesPanel.tsx
View File

@@ -1,6 +1,6 @@
import { useCallback, useState, useEffect } from 'react' import { useCallback, useState, useEffect } from 'react'
import { import {
Trash2, Minus, Spline, GitBranch, BringToFront, SendToBack, Trash2, Minus, Spline, GitBranch, CornerUpRight, BringToFront, SendToBack,
AlignStartVertical, AlignCenterHorizontal, AlignEndVertical, AlignStartVertical, AlignCenterHorizontal, AlignEndVertical,
AlignStartHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignStartHorizontal, AlignCenterVertical, AlignEndHorizontal,
AlignHorizontalSpaceAround, AlignVerticalSpaceAround, AlignHorizontalSpaceAround, AlignVerticalSpaceAround,
@@ -264,6 +264,7 @@ export function PropertiesPanel({
{ value: null, icon: Minus, label: 'Straight' }, { value: null, icon: Minus, label: 'Straight' },
{ value: 'curved', icon: Spline, label: 'Curved' }, { value: 'curved', icon: Spline, label: 'Curved' },
{ value: 'step', icon: GitBranch, label: 'Step' }, { value: 'step', icon: GitBranch, label: 'Step' },
{ value: 'orthogonal', icon: CornerUpRight, label: 'Ortho' },
] as const).map(({ value, icon: Icon, label }) => { ] as const).map(({ value, icon: Icon, label }) => {
const routing = (edgeData.routing as string | null | undefined) ?? null const routing = (edgeData.routing as string | null | undefined) ?? null
const active = routing === value const active = routing === value

2
frontend/src/types/network-diagram.ts
View File

@@ -28,7 +28,7 @@ export interface DiagramEdge {
connectionType: string connectionType: string
speed: string | null speed: string | null
notes: string | null notes: string | null
routing?: string | null routing?: 'curved' | 'step' | 'orthogonal' | null
} }
export interface DeviceTypeResponse { export interface DeviceTypeResponse {