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

Hide white React Flow edge-label backgrounds on the topology canvas.

Browse source 
Disable labelShowBg for straight edges and suppress the default SVG textbg so link numbers render as text only.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-08-05 09:21:55 +08:00
parent 83acb5eef1
commit 4a0918ab44
2 changed files with 17 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

21
web/src/index.css
View file

@ -6876,6 +6876,8 @@ pre {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
background: var(--topo-canvas-bg, #0f172a); background: var(--topo-canvas-bg, #0f172a);
--xy-edge-label-background-color: transparent;
--xy-edge-label-color: #e2e8f0;
} }
.topo-canvas:fullscreen, .topo-canvas:fullscreen,
@ -7190,22 +7192,27 @@ pre {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.react-flow__edge-textbg { .topo-canvas .react-flow__edge-textbg {
fill: #0f172a; fill: none !important;
display: none !important;
} }
.react-flow__edge-text { .topo-canvas .react-flow__edge-text {
fill: #cbd5e1; fill: #e2e8f0;
font-size: 11px; font-size: 11px;
paint-order: stroke;
stroke: rgba(15, 23, 42, 0.85);
stroke-width: 3px;
} }
.topo-edge-label { .topo-edge-label {
font-size: 11px; font-size: 11px;
color: #e2e8f0; color: #e2e8f0;
background: transparent; background: transparent !important;
border: 0; border: 0 !important;
border-radius: 0; border-radius: 0;
padding: 0; padding: 0 !important;
box-shadow: none !important;
white-space: nowrap; white-space: nowrap;
text-shadow: text-shadow:
0 0 3px rgba(15, 23, 42, 0.95), 0 0 3px rgba(15, 23, 42, 0.95),

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

@ -597,7 +597,8 @@ function resolveEdgeStyle(
function withEdgeVisual(edge: Edge, defaults: EdgeDefaults): Edge { function withEdgeVisual(edge: Edge, defaults: EdgeDefaults): Edge {
const data = (edge.data || {}) as EdgeStyleData; const data = (edge.data || {}) as EdgeStyleData;
const style = resolveEdgeStyle(data, defaults); const style = resolveEdgeStyle(data, defaults);
return { ...edge, style, markerEnd: undefined }; // RF EdgeText defaults labelShowBg=true with a white rect — keep digits only.
return { ...edge, style, markerEnd: undefined, labelShowBg: false };
} }
function graphToFlow( function graphToFlow(
@ -3385,7 +3386,7 @@ export function TopologyPage() {
edgeTypes={edgeTypes} edgeTypes={edgeTypes}
onlyRenderVisibleElements onlyRenderVisibleElements
connectionMode={ConnectionMode.Loose} connectionMode={ConnectionMode.Loose}
defaultEdgeOptions={{ type: "straight" }} defaultEdgeOptions={{ type: "straight", labelShowBg: false }}
proOptions={{ hideAttribution: true }} proOptions={{ hideAttribution: true }}
minZoom={0.05} minZoom={0.05}
maxZoom={4} maxZoom={4}