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

Simplify topology edge selection highlight and remove arrowheads.

Browse source 
Keep straight undirected links that meet nodes; selected edges only get a light blue stroke.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-08-04 10:36:04 +08:00
parent 728894a692
commit 71acbc747f
2 changed files with 13 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web/src/index.css
View file

@ -6667,23 +6667,10 @@ pre {
font-weight: 700; font-weight: 700;
} }
/* Selected link: glow + wider interaction halo (inline stroke otherwise hides RF defaults). */ /* Selected link: light highlight only (do not alter geometry / arrows). */
.topo-canvas .react-flow__edge.selected .react-flow__edge-interaction, .topo-canvas .react-flow__edge.selected .react-flow__edge-path {
.topo-canvas .react-flow__edge.topo-edge--selected .react-flow__edge-interaction {
stroke: #2563eb !important; stroke: #2563eb !important;
stroke-width: 14px !important; stroke-width: 3px !important;
stroke-opacity: 0.28 !important;
}
.topo-canvas .react-flow__edge.selected .react-flow__edge-path,
.topo-canvas .react-flow__edge.topo-edge--selected .react-flow__edge-path {
stroke-linecap: round;
}
.topo-canvas .react-flow__edge.selected .react-flow__edge-text,
.topo-canvas .react-flow__edge.topo-edge--selected .react-flow__edge-text {
fill: #1d4ed8;
font-weight: 700;
} }
.topo-node__icon { .topo-node__icon {

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

@ -22,7 +22,6 @@ import {
useNodesState, useNodesState,
Handle, Handle,
Position, Position,
MarkerType,
ConnectionMode, ConnectionMode,
SelectionMode, SelectionMode,
type Connection, type Connection,
@ -558,31 +557,10 @@ function resolveEdgeStyle(
}; };
} }
function edgeMarker(stroke: string) {
return { type: MarkerType.ArrowClosed, width: 16, height: 16, color: stroke };
}
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 base = resolveEdgeStyle(data, defaults); const style = resolveEdgeStyle(data, defaults);
const selected = Boolean(edge.selected); return { ...edge, style, markerEnd: undefined };
// Inline stroke beats RF's default .selected CSS — bump width + glow so selection is obvious.
const style = {
...base,
strokeWidth: selected ? Math.min(14, Number(base.strokeWidth || 2) + 2.5) : base.strokeWidth,
...(selected
? {
filter:
"drop-shadow(0 0 2.5px rgba(37, 99, 235, 0.95)) drop-shadow(0 0 1px rgba(15, 23, 42, 0.4))",
}
: { filter: undefined }),
};
return {
...edge,
style,
markerEnd: edgeMarker(base.stroke),
className: selected ? "topo-edge--selected" : undefined,
};
} }
function graphToFlow( function graphToFlow(
@ -1698,15 +1676,15 @@ export function TopologyPage() {
const clearSelection = useCallback(() => { const clearSelection = useCallback(() => {
setSelectedEdgeId(null); setSelectedEdgeId(null);
setNodes((ns) => ns.map((n) => ({ ...n, selected: false }))); setNodes((ns) => ns.map((n) => ({ ...n, selected: false })));
setEdges((es) => es.map((e) => withEdgeVisual({ ...e, selected: false }, edgeDefaults))); setEdges((es) => es.map((e) => ({ ...e, selected: false })));
connectClickRef.current = null; connectClickRef.current = null;
}, [setNodes, setEdges, edgeDefaults]); }, [setNodes, setEdges]);
const selectAllNodes = useCallback(() => { const selectAllNodes = useCallback(() => {
setSelectedEdgeId(null); setSelectedEdgeId(null);
setNodes((ns) => ns.map((n) => ({ ...n, selected: true }))); setNodes((ns) => ns.map((n) => ({ ...n, selected: true })));
setEdges((es) => es.map((e) => withEdgeVisual({ ...e, selected: false }, edgeDefaults))); setEdges((es) => es.map((e) => ({ ...e, selected: false })));
}, [setNodes, setEdges, edgeDefaults]); }, [setNodes, setEdges]);
const removeSelected = useCallback(async () => { const removeSelected = useCallback(async () => {
if (!mapId) return; if (!mapId) return;
@ -2049,9 +2027,9 @@ export function TopologyPage() {
return { ...n, selected: n.id === nodeId }; return { ...n, selected: n.id === nodeId };
}), }),
); );
setEdges((es) => es.map((e) => withEdgeVisual({ ...e, selected: false }, edgeDefaults))); setEdges((es) => es.map((e) => ({ ...e, selected: false })));
}, },
[setNodes, setEdges, edgeDefaults], [setNodes, setEdges],
); );
const locateNode = useCallback( const locateNode = useCallback(
@ -2220,11 +2198,9 @@ export function TopologyPage() {
(edgeId: string) => { (edgeId: string) => {
setSelectedEdgeId(edgeId); setSelectedEdgeId(edgeId);
setNodes((ns) => ns.map((n) => ({ ...n, selected: false }))); setNodes((ns) => ns.map((n) => ({ ...n, selected: false })));
setEdges((es) => setEdges((es) => es.map((e) => ({ ...e, selected: e.id === edgeId })));
es.map((e) => withEdgeVisual({ ...e, selected: e.id === edgeId }, edgeDefaults)),
);
}, },
[setNodes, setEdges, edgeDefaults], [setNodes, setEdges],
); );
const onNodeClick = useCallback( const onNodeClick = useCallback(