diff --git a/frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx b/frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx index e10629fc..635be4fe 100644 --- a/frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx +++ b/frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx @@ -28,6 +28,11 @@ import { toast } from '@/lib/toast' import type { DeviceTypeResponse, DeviceProperties, AIGenerateResponse, DiagramEdge, DiagramNode } from '@/types' import type { DeviceNodeData } from '@/components/network/nodes/DeviceNode' +function normalizeZOrder(nodes: Node[]): Node[] { + const sorted = [...nodes].sort((a, b) => ((a.zIndex ?? 0) - (b.zIndex ?? 0))) + return sorted.map((n, i) => ({ ...n, zIndex: i + 1 })) +} + type ContextMenuState = { type: 'node' | 'canvas' position: { x: number; y: number } @@ -307,7 +312,7 @@ function DiagramEditorInner() { connectionType: d.connectionType as string || 'ethernet', speed: d.speed as string || null, notes: d.notes as string || null, - routing: d.routing as string || null, + routing: (d.routing as DiagramEdge['routing']) || null, } }) }, [edges]) @@ -510,19 +515,20 @@ function DiagramEditorInner() { const handleBringToFront = useCallback((nodeId: string) => { pushHistory(nodes, edges) - setNodes(nds => { - const maxZ = Math.max(0, ...nds.map(n => n.zIndex ?? 0)) - return nds.map(n => n.id === nodeId ? { ...n, zIndex: maxZ + 1 } : n) + setNodes(prev => { + const maxZ = Math.max(0, ...prev.map(n => n.zIndex ?? 0)) + return normalizeZOrder( + prev.map(n => n.id === nodeId ? { ...n, zIndex: maxZ + 1 } : n) + ) }) setIsDirty(true) }, [nodes, edges, pushHistory, setNodes]) const handleSendToBack = useCallback((nodeId: string) => { pushHistory(nodes, edges) - setNodes(nds => { - const minZ = Math.min(0, ...nds.map(n => n.zIndex ?? 0)) - return nds.map(n => n.id === nodeId ? { ...n, zIndex: minZ - 1 } : n) - }) + setNodes(prev => normalizeZOrder( + prev.map(n => n.id === nodeId ? { ...n, zIndex: 0 } : n) + )) setIsDirty(true) }, [nodes, edges, pushHistory, setNodes])