hansjone/netx
1
0
Fork 0
mirror of https://github.com/hansjone/netx.git synced 2026-10-11 06:50:49 +08:00
Code Issues Projects Releases 1 Packages Wiki Activity Actions

Fix topology edges to meet router icons again.

Browse source 
Predetermined handle coords used the 160px node box edges while DOM handles sit on the icon center, leaving a floating gap.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-08-04 10:47:46 +08:00
parent bd97e1b875
commit 4600629d3a
1 changed files with 8 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/src/pages/TopologyPage.tsx
View file

@ -383,6 +383,10 @@ function RouterIcon() {
/** Fixed box for onlyRenderVisibleElements (xyflow skips off-screen mount when sized + handles set). */ /** Fixed box for onlyRenderVisibleElements (xyflow skips off-screen mount when sized + handles set). */
const TOPO_NODE_W = 160; const TOPO_NODE_W = 160;
const TOPO_NODE_H = 88; const TOPO_NODE_H = 88;
/** Must match `.topo-node__glyph` (56×56, top-centered) + `--center` handles. */
const TOPO_ICON = 56;
const TOPO_HANDLE_X = TOPO_NODE_W / 2;
const TOPO_HANDLE_Y = TOPO_ICON / 2;
const NeNode = memo(function NeNode({ data, selected }: NodeProps<Node<NeNodeData>>) { const NeNode = memo(function NeNode({ data, selected }: NodeProps<Node<NeNodeData>>) {
const { hideIp, hideVendor, connectMode } = useContext(TopoDisplayContext); const { hideIp, hideVendor, connectMode } = useContext(TopoDisplayContext);
@ -574,10 +578,11 @@ function graphToFlow(
position: { x: n.x || 0, y: n.y || 0 }, position: { x: n.x || 0, y: n.y || 0 },
width: TOPO_NODE_W, width: TOPO_NODE_W,
height: TOPO_NODE_H, height: TOPO_NODE_H,
// Predetermined handles let onlyRenderVisibleElements skip measuring off-screen nodes. // Predetermined handles must match DOM anchors (icon center), not the 160px box edges —
// otherwise edges float in the gap and never touch the router glyph.
handles: [ handles: [
{ type: "target", position: Position.Left, x: 0, y: TOPO_NODE_H / 2 }, { type: "target", position: Position.Left, x: TOPO_HANDLE_X, y: TOPO_HANDLE_Y },
{ type: "source", position: Position.Right, x: TOPO_NODE_W, y: TOPO_NODE_H / 2 }, { type: "source", position: Position.Right, x: TOPO_HANDLE_X, y: TOPO_HANDLE_Y },
], ],
data: { data: {
label: n.label || n.name || n.ip || n.fabric_node_id, label: n.label || n.name || n.ip || n.fabric_node_id,