@@ -231,389 +159,33 @@ function GraphView({ servers, connections }) {
);
}
- // Инициализация позиций узлов при первом рендере
- const getInitialNodePosition = (index, total) => {
- if (nodePositions[servers[index]?.ip]) {
- return nodePositions[servers[index].ip];
- }
-
- const cols = Math.ceil(Math.sqrt(total));
- const row = Math.floor(index / cols);
- const col = index % cols;
- const spacing = 180;
- return {
- x: 120 + col * spacing,
- y: 120 + row * spacing
- };
- };
-
- // Обработчик начала перетаскивания
- const handleMouseDown = (e, serverIp) => {
- // В режиме панорамирования — не начинаем перетаскивание узла, даём d3.zoom обработать drag
- if (panModeRef.current) return;
- const target = gRef.current || svgRef.current;
- const pt = (gRef.current?.ownerSVGElement || svgRef.current).createSVGPoint();
- pt.x = e.clientX;
- pt.y = e.clientY;
- const svgP = pt.matrixTransform(target.getScreenCTM().inverse());
-
- const currentPos = nodePositions[serverIp] || getInitialNodePosition(
- servers.findIndex(s => s.ip === serverIp),
- servers.length
- );
-
- setDragOffset({
- x: svgP.x - currentPos.x,
- y: svgP.y - currentPos.y
- });
- setDraggedNode(serverIp);
- };
-
- // Обработчик перетаскивания
- const handleMouseMove = (e) => {
- if (!draggedNode) return;
- const target = gRef.current || svgRef.current;
- const pt = (gRef.current?.ownerSVGElement || svgRef.current).createSVGPoint();
- pt.x = e.clientX;
- pt.y = e.clientY;
- const svgP = pt.matrixTransform(target.getScreenCTM().inverse());
-
- setNodePositions(prev => ({
- ...prev,
- [draggedNode]: {
- x: svgP.x - dragOffset.x,
- y: svgP.y - dragOffset.y
- }
- }));
- };
-
- // Обработчик окончания перетаскивания
- const handleMouseUp = () => {
- setDraggedNode(null);
- };
-
- // Получение позиции узла
- const getNodePosition = (serverIp) => {
- return nodePositions[serverIp] || getInitialNodePosition(
- servers.findIndex(s => s.ip === serverIp),
- servers.length
- );
- };
-
- // Цвета для разных стран
- const getCountryColor = (country) => {
- const colors = {
- 'RU': '#dc2626', // красный
- 'US': '#2563eb', // синий
- 'DE': '#059669', // зеленый
- 'SE': '#7c3aed', // фиолетовый
- 'NL': '#ea580c', // оранжевый
- 'SG': '#0891b2' // голубой
- };
- return colors[country] || '#6b7280';
- };
-
- // Цвета/стили для разных типов туннелей
- const getTunnelStyle = (tunnelType) => {
- const map = {
- GRE: { color: '#206bc4', dash: '0', width: 3 },
- IPSec: { color: '#f59f00', dash: '6,4', width: 3 },
- WireGuard: { color: '#2fb344', dash: '0', width: 4 },
- OpenVPN: { color: '#be4bdb', dash: '3,3', width: 3 },
- };
- return map[tunnelType] || { color: '#667382', dash: '5,5', width: 2 };
- };
-
- // Флаг страны по ISO-2 с поддержкой нестандартных кодов из списка (SWE->SE)
- const getFlagEmoji = (code) => {
- if (!code) return '';
- const map = { SWE: 'SE', UK: 'GB' };
- const ccRaw = String(code).trim().toUpperCase();
- const cc = (map[ccRaw] || ccRaw).slice(0, 2);
- if (cc.length !== 2) return ccRaw;
- return cc.replace(/./g, (ch) => String.fromCodePoint(127397 + ch.charCodeAt()));
- };
-
return (
-
-
- {/* Контролы масштабирования + ползунок */}
-
-
-
-
-
-
-
-
-
- {Math.round(transformState.k * 100)}%
- zoomTo(parseFloat(e.target.value))}
- className="form-range"
- style={{ width: '100%' }}
- />
-
-
+
+
getCountryColor(n.data?.server?.country)}
+ nodeStrokeWidth={2}
+ maskColor="rgba(0,0,0,0.05)"
+ />
+
+
);
}
-export default GraphView;
\ No newline at end of file
+export default GraphView;
\ No newline at end of file