From f2c3bd7a9b36ec3f4fbd6350321d168f32af7665 Mon Sep 17 00:00:00 2001 From: chihlasm Date: Mon, 13 Apr 2026 20:17:44 +0000 Subject: [PATCH] fix(network): normalize z-order to 1..N after bring-to-front/send-to-back Co-Authored-By: Claude Sonnet 4.6 --- .../pages/NetworkDiagrams/DiagramEditor.tsx | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) 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])