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

fix: resolve stale selection bug in network diagram PropertiesPanel

Browse Source 
Selection state now stores IDs and derives objects from live arrays,
so edits in PropertiesPanel inputs reflect immediately.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-04 14:18:02 +00:00
parent f6e7613a5e
commit 87de51b06e
2 changed files with 13 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx
View File

@@ -36,8 +36,11 @@ function DiagramEditorInner() {
const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
const [selectedNode, setSelectedNode] = useState<Node | null>(null)
const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null)
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null)
const selectedNode = selectedNodeId ? nodes.find(n => n.id === selectedNodeId) ?? null : null
const selectedEdge = selectedEdgeId ? edges.find(e => e.id === selectedEdgeId) ?? null : null
const [isDirty, setIsDirty] = useState(false)
const [isSaving, setIsSaving] = useState(false)
@@ -256,32 +259,19 @@ function DiagramEditorInner() {
},
}
}))
setSelectedEdge(prev => {
if (!prev || prev.id !== edgeId) return prev
return {
...prev,
label: updates.label !== undefined ? (updates.label || undefined) : prev.label,
data: {
...(prev.data || {}),
...(updates.connectionType !== undefined ? { connectionType: updates.connectionType } : {}),
...(updates.speed !== undefined ? { speed: updates.speed } : {}),
...(updates.notes !== undefined ? { notes: updates.notes } : {}),
},
}
})
setIsDirty(true)
}, [setEdges])
const handleDeleteNode = useCallback((nodeId: string) => {
setNodes(nds => nds.filter(n => n.id !== nodeId))
setEdges(eds => eds.filter(e => e.source !== nodeId && e.target !== nodeId))
setSelectedNode(null)
setSelectedNodeId(null)
setIsDirty(true)
}, [setNodes, setEdges])
const handleDeleteEdge = useCallback((edgeId: string) => {
setEdges(eds => eds.filter(e => e.id !== edgeId))
setSelectedEdge(null)
setSelectedEdgeId(null)
setIsDirty(true)
}, [setEdges])
@@ -398,8 +388,8 @@ function DiagramEditorInner() {
onNodesChange={handleNodesChange}
onEdgesChange={handleEdgesChange}
onConnect={onConnect}
onNodeSelect={setSelectedNode}
onEdgeSelect={setSelectedEdge}
onNodeSelect={setSelectedNodeId}
onEdgeSelect={setSelectedEdgeId}
onDrop={onDrop}
onDragOver={onDragOver}
/>