From eaa88e28977155b2bdb426f2a83e02b461d4e649 Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Fri, 8 Aug 2025 16:28:32 +0700
Subject: [PATCH] feat: Improve zoom functionality in GraphView by adjusting
 zoom extent and enabling broader panning capabilities for enhanced user
 interaction

---
 frontend/src/GraphView.jsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/GraphView.jsx b/frontend/src/GraphView.jsx
index 46ff2c9..fd07c19 100644
--- a/frontend/src/GraphView.jsx
+++ b/frontend/src/GraphView.jsx
@@ -70,9 +70,14 @@ function GraphView({ servers, connections }) {
   useEffect(() => {
     const svg = d3.select(svgRef.current);
     const g = d3.select(gRef.current);
+    const width = svgRef.current?.clientWidth || 900;
+    const height = svgRef.current?.clientHeight || 600;
     zoomRef.current = d3
       .zoom()
         .scaleExtent([0.3, 3])
+        .extent([[0, 0], [width, height]])
+        // Разрешаем панораму в широких пределах
+        .translateExtent([[-10000, -10000], [10000, 10000]])
         .on('zoom', (event) => {
           g.attr('transform', event.transform);
         });
@@ -83,9 +88,8 @@ function GraphView({ servers, connections }) {
   const zoomBy = (factor) => {
     if (!zoomRef.current || !svgRef.current) return;
     const svg = d3.select(svgRef.current);
-    const node = svgRef.current;
-    const center = [node.clientWidth / 2, node.clientHeight / 2];
-    svg.transition().duration(220).call(zoomRef.current.scaleBy, factor, center);
+    // Используем встроенную математику d3.zoom с учётом extent
+    svg.transition().duration(220).call(zoomRef.current.scaleBy, factor);
   };
 
   const fitToView = () => {
@@ -482,7 +486,7 @@ function GraphView({ servers, connections }) {
         </g>
       </svg>
       {/* Контролы масштабирования */}
-      <div className="position-absolute" style={{ right: 10, top: 10, zIndex: 10, pointerEvents: 'auto' }}>
+      <div className="position-absolute" style={{ right: 10, top: 10, zIndex: 1000, pointerEvents: 'auto' }}>
         <div className="btn-group btn-group-sm">
           <button className="btn btn-outline-secondary" onClick={() => zoomBy(1.2)} title="Увеличить">
             <IconZoomIn size={16} />