From b23056d95ae687ad65948539faf29649fdb42236 Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Fri, 8 Aug 2025 17:31:40 +0700
Subject: [PATCH] feat: Add mouse wheel zoom control and reset zoom
 functionality in GraphView for improved user experience and interaction

---
 frontend/src/GraphView.jsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/frontend/src/GraphView.jsx b/frontend/src/GraphView.jsx
index 3416a5e..18a765f 100644
--- a/frontend/src/GraphView.jsx
+++ b/frontend/src/GraphView.jsx
@@ -88,6 +88,15 @@ function GraphView({ servers, connections }) {
         });
     svg.call(zoomRef.current);
     dbg('zoom initialized', { width, height });
+
+    // Колёсико мыши — обычный масштаб (желательно для UX)
+    svg.on('wheel.zoom', null); // убираем двойное навешивание
+    svg.on('wheel', (event) => {
+      event.preventDefault();
+      const delta = Math.sign(event.deltaY);
+      const factor = delta > 0 ? 1 / 1.2 : 1.2;
+      zoomBy(factor);
+    }, { passive: false });
   }, []);
 
   // Контролы масштабирования
@@ -153,6 +162,19 @@ function GraphView({ servers, connections }) {
     }
   };
 
+  const resetZoom = () => {
+    if (!zoomRef.current || !svgRef.current) return;
+    const svgEl = svgRef.current;
+    d3.select(svgEl)
+      .transition()
+      .duration(220)
+      .call(zoomRef.current.transform, d3.zoomIdentity)
+      .on('end', () => {
+        const nt = d3.zoomTransform(svgEl);
+        dbg('resetZoom end', { k: nt.k, x: nt.x, y: nt.y });
+      });
+  };
+
   if (servers.length === 0) {
     return (
       <div className="text-center py-5">
@@ -524,6 +546,9 @@ function GraphView({ servers, connections }) {
           <button className="btn btn-outline-secondary" onClick={toggleFullscreen} title={isFullscreen ? 'Выйти из полноэкранного' : 'Во весь экран'}>
             {isFullscreen ? <IconMinimize size={16} /> : <IconMaximize size={16} />}
           </button>
+          <button className="btn btn-outline-secondary" onClick={resetZoom} title="Сброс масштаба">
+            100%
+          </button>
         </div>
       </div>
     </div>