feat: Enhance GraphView with node dimensions, background grid, and improved layout adjustments for better visualization and interactivity
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 5m37s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 5m37s
This commit is contained in:
+85
-83
@@ -8,6 +8,11 @@ function GraphView({ servers, connections }) {
|
||||
const [hoveredLinkId, setHoveredLinkId] = useState(null);
|
||||
const svgRef = useRef(null);
|
||||
const gRef = useRef(null);
|
||||
const zoomRef = useRef(null);
|
||||
|
||||
// Размеры карточки узла
|
||||
const NODE_WIDTH = 160;
|
||||
const NODE_HEIGHT = 74;
|
||||
|
||||
// Автоматическая раскладка (force-directed)
|
||||
useEffect(() => {
|
||||
@@ -33,20 +38,42 @@ function GraphView({ servers, connections }) {
|
||||
pos[n.id] = { x: n.x, y: n.y };
|
||||
});
|
||||
setNodePositions(pos);
|
||||
|
||||
// После раскладки подгоняем граф по области видимости
|
||||
try {
|
||||
const svgEl = svgRef.current;
|
||||
const box = svgEl.getBoundingClientRect();
|
||||
const padding = 40;
|
||||
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
||||
nodes.forEach((n) => {
|
||||
minX = Math.min(minX, n.x - NODE_WIDTH / 2);
|
||||
minY = Math.min(minY, n.y - NODE_HEIGHT / 2);
|
||||
maxX = Math.max(maxX, n.x + NODE_WIDTH / 2);
|
||||
maxY = Math.max(maxY, n.y + NODE_HEIGHT / 2);
|
||||
});
|
||||
const contentW = Math.max(1, maxX - minX);
|
||||
const contentH = Math.max(1, maxY - minY);
|
||||
const scale = Math.max(0.5, Math.min(1.4, Math.min((box.width - padding) / contentW, (box.height - padding) / contentH)));
|
||||
const tx = (box.width - scale * (minX + maxX)) / 2;
|
||||
const ty = (box.height - scale * (minY + maxY)) / 2;
|
||||
const t = d3.zoomIdentity.translate(tx, ty).scale(scale);
|
||||
d3.select(svgEl).transition().duration(350).call(zoomRef.current.transform, t);
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
}, [servers, connections]);
|
||||
|
||||
// Зум/панорамирование
|
||||
useEffect(() => {
|
||||
const svg = d3.select(svgRef.current);
|
||||
const g = d3.select(gRef.current);
|
||||
svg.call(
|
||||
d3
|
||||
.zoom()
|
||||
zoomRef.current = d3
|
||||
.zoom()
|
||||
.scaleExtent([0.5, 2])
|
||||
.on('zoom', (event) => {
|
||||
g.attr('transform', event.transform);
|
||||
})
|
||||
);
|
||||
});
|
||||
svg.call(zoomRef.current);
|
||||
}, []);
|
||||
|
||||
if (servers.length === 0) {
|
||||
@@ -164,6 +191,10 @@ function GraphView({ servers, connections }) {
|
||||
style={{ cursor: draggedNode ? 'grabbing' : 'default' }}
|
||||
>
|
||||
<defs>
|
||||
{/* Лёгкая сетка фона */}
|
||||
<pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
|
||||
<path d="M 30 0 L 0 0 0 30" fill="none" stroke="#f2f4f6" strokeWidth="1" />
|
||||
</pattern>
|
||||
{/* Определение стрелок под цвет канала */}
|
||||
{Array.from(new Set(connections.map(c => c.tunnelType))).map((t) => {
|
||||
const style = getTunnelStyle(t);
|
||||
@@ -188,7 +219,13 @@ function GraphView({ servers, connections }) {
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
{/* Тень карточки */}
|
||||
<filter id="cardShadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="3" floodOpacity="0.2" />
|
||||
</filter>
|
||||
</defs>
|
||||
{/* Подложка сетки */}
|
||||
<rect width="100%" height="100%" fill="url(#grid)" />
|
||||
<g ref={gRef}>
|
||||
{/* Связи */}
|
||||
{connections.map((connection, index) => {
|
||||
@@ -229,6 +266,7 @@ function GraphView({ servers, connections }) {
|
||||
markerEnd={`url(#arrow-${connection.tunnelType})`}
|
||||
filter={isHovered ? 'url(#glow)' : undefined}
|
||||
opacity={isHovered ? 1 : 0.9}
|
||||
style={{ vectorEffect: 'non-scaling-stroke' }}
|
||||
/>
|
||||
|
||||
{/* Подпись связи */}
|
||||
@@ -242,7 +280,7 @@ function GraphView({ servers, connections }) {
|
||||
stroke={style.color}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<text
|
||||
<text
|
||||
x={mx - 10}
|
||||
y={my - 18}
|
||||
textAnchor="middle"
|
||||
@@ -273,107 +311,71 @@ function GraphView({ servers, connections }) {
|
||||
|
||||
return (
|
||||
<g key={server.ip}>
|
||||
{/* Тень */}
|
||||
<circle
|
||||
cx={pos.x + 2}
|
||||
cy={pos.y + 2}
|
||||
r="45"
|
||||
fill="rgba(0,0,0,0.1)"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
/>
|
||||
|
||||
{/* Основной круг */}
|
||||
<circle
|
||||
cx={pos.x}
|
||||
cy={pos.y}
|
||||
r="45"
|
||||
fill={isDragging ? "#f1f5f9" : "white"}
|
||||
{/* Карточка узла */}
|
||||
<rect
|
||||
x={pos.x - NODE_WIDTH / 2}
|
||||
y={pos.y - NODE_HEIGHT / 2}
|
||||
rx={12}
|
||||
ry={12}
|
||||
width={NODE_WIDTH}
|
||||
height={NODE_HEIGHT}
|
||||
fill="#ffffff"
|
||||
stroke={countryColor}
|
||||
strokeWidth="3"
|
||||
strokeWidth={2}
|
||||
filter="url(#cardShadow)"
|
||||
style={{ cursor: 'grab' }}
|
||||
onMouseDown={(e) => handleMouseDown(e, server.ip)}
|
||||
/>
|
||||
|
||||
{/* Внутренний круг с цветом страны */}
|
||||
<circle
|
||||
cx={pos.x}
|
||||
cy={pos.y}
|
||||
r="35"
|
||||
{/* Плашка страны */}
|
||||
<rect
|
||||
x={pos.x - NODE_WIDTH / 2 + 8}
|
||||
y={pos.y - NODE_HEIGHT / 2 - 10}
|
||||
rx={8}
|
||||
ry={8}
|
||||
width={28}
|
||||
height={18}
|
||||
fill={countryColor}
|
||||
style={{ pointerEvents: 'none' }}
|
||||
/>
|
||||
|
||||
{/* Иконка сервера */}
|
||||
<text
|
||||
x={pos.x}
|
||||
y={pos.y - 8}
|
||||
textAnchor="middle"
|
||||
fontSize="16"
|
||||
fill="white"
|
||||
fontWeight="bold"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
>
|
||||
🖥️
|
||||
</text>
|
||||
|
||||
{/* DNS имя */}
|
||||
<text
|
||||
x={pos.x}
|
||||
y={pos.y + 15}
|
||||
x={pos.x - NODE_WIDTH / 2 + 22}
|
||||
y={pos.y - NODE_HEIGHT / 2 + 3}
|
||||
textAnchor="middle"
|
||||
fontSize="10"
|
||||
fill="white"
|
||||
fontWeight="bold"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
fill="#fff"
|
||||
fontWeight="700"
|
||||
>
|
||||
{server.country}
|
||||
</text>
|
||||
{/* Название */}
|
||||
<text
|
||||
x={pos.x}
|
||||
y={pos.y - 4}
|
||||
textAnchor="middle"
|
||||
fontSize="13"
|
||||
fill="#1f2937"
|
||||
fontWeight="700"
|
||||
>
|
||||
{server.dns}
|
||||
</text>
|
||||
|
||||
{/* IP адрес */}
|
||||
{/* IP */}
|
||||
<text
|
||||
x={pos.x}
|
||||
y={pos.y + 28}
|
||||
y={pos.y + 14}
|
||||
textAnchor="middle"
|
||||
fontSize="9"
|
||||
fill="white"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
fontSize="12"
|
||||
fill="#334155"
|
||||
>
|
||||
{server.ip}
|
||||
</text>
|
||||
|
||||
{/* Провайдер */}
|
||||
<text
|
||||
x={pos.x}
|
||||
y={pos.y + 45}
|
||||
textAnchor="middle"
|
||||
fontSize="8"
|
||||
fill="#6b7280"
|
||||
fontWeight="bold"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
>
|
||||
{server.provider}
|
||||
</text>
|
||||
|
||||
{/* Бейдж страны */}
|
||||
<rect
|
||||
x={pos.x - 20}
|
||||
y={pos.y - 55}
|
||||
width="40"
|
||||
height="20"
|
||||
rx="10"
|
||||
fill={countryColor}
|
||||
style={{ pointerEvents: 'none' }}
|
||||
/>
|
||||
<text
|
||||
x={pos.x}
|
||||
y={pos.y - 42}
|
||||
y={pos.y + 30}
|
||||
textAnchor="middle"
|
||||
fontSize="10"
|
||||
fill="white"
|
||||
fontWeight="bold"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
fill="#6b7280"
|
||||
>
|
||||
{server.country}
|
||||
{server.provider}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user