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

Polish topology canvas chrome and toolbar text clipping.

Browse source 
Remove the edge legend and React Flow attribution, and fix layout/align select padding so Chinese labels render fully.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-08-01 17:52:39 +08:00
parent fce6e2cc9e
commit cb865254e4
2 changed files with 17 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/src/index.css
View file

@ -2800,14 +2800,17 @@ pre {
color: #5b6b7c; color: #5b6b7c;
} }
.app-main .topo-toolbar__find,
.topo-toolbar__find { .topo-toolbar__find {
width: 190px; width: 190px;
max-width: 36vw; max-width: 36vw;
height: 28px; height: 30px;
box-sizing: border-box;
padding: 0 8px; padding: 0 8px;
border: 1px solid #b8c4d2; border: 1px solid #b8c4d2;
border-radius: 6px; border-radius: 6px;
font-size: 12px; font-size: 12px;
line-height: 1.2;
background: #fff; background: #fff;
} }
@ -2903,26 +2906,27 @@ pre {
line-height: 1; line-height: 1;
} }
.app-main .topo-toolbar__select,
.topo-toolbar__select { .topo-toolbar__select {
min-width: 88px; min-width: 88px;
height: 28px; height: 30px;
box-sizing: border-box;
border: 1px solid #b8c4d2; border: 1px solid #b8c4d2;
border-radius: 6px; border-radius: 6px;
background: #fff; background: #fff;
color: #0f2744; color: #0f2744;
font-size: 12px; font-size: 12px;
line-height: 1.2;
padding: 0 8px; padding: 0 8px;
vertical-align: middle;
} }
.topo-toolbar__display { .app-main .topo-toolbar__display > summary,
position: relative;
}
.topo-toolbar__display > summary { .topo-toolbar__display > summary {
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
height: 28px; height: 30px;
padding: 0 10px; padding: 0 10px;
border: 1px solid #b8c4d2; border: 1px solid #b8c4d2;
border-radius: 6px; border-radius: 6px;
@ -2930,10 +2934,15 @@ pre {
color: #0f2744; color: #0f2744;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
line-height: 1.2;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.topo-toolbar__display {
position: relative;
}
.topo-toolbar__display > summary::-webkit-details-marker { .topo-toolbar__display > summary::-webkit-details-marker {
display: none; display: none;
} }

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

@ -2293,6 +2293,7 @@ export function TopologyPage() {
nodeTypes={nodeTypes} nodeTypes={nodeTypes}
connectionMode={ConnectionMode.Loose} connectionMode={ConnectionMode.Loose}
defaultEdgeOptions={{ type: "straight" }} defaultEdgeOptions={{ type: "straight" }}
proOptions={{ hideAttribution: true }}
nodesDraggable={toolBehavior.nodesDraggable} nodesDraggable={toolBehavior.nodesDraggable}
nodesConnectable={toolBehavior.nodesConnectable} nodesConnectable={toolBehavior.nodesConnectable}
elementsSelectable={toolBehavior.elementsSelectable} elementsSelectable={toolBehavior.elementsSelectable}
@ -2370,30 +2371,6 @@ export function TopologyPage() {
</ControlButton> </ControlButton>
</Controls> </Controls>
<MiniMap pannable zoomable /> <MiniMap pannable zoomable />
<div className="topo-legend" aria-hidden="true">
{(
[
["manual", t("topology.edgeManual")],
["discovered", t("topology.edgeDiscovered")],
["stale", t("topology.edgeStale")],
] as const
).map(([kind, label]) => {
const d = edgeDefaults[kind];
return (
<span key={kind} className="topo-legend__item">
<span
className="topo-legend__swatch"
style={{
borderTopColor: d.stroke_color,
borderTopWidth: Math.max(1, Math.min(4, d.stroke_width)),
borderTopStyle: d.line_style === "solid" ? "solid" : "dashed",
}}
/>
{label}
</span>
);
})}
</div>
</ReactFlow> </ReactFlow>
</TopoDisplayContext.Provider> </TopoDisplayContext.Provider>
) : ( ) : (