From 08cf7f806c298b2b84d681b0b25ccf185e05ab96 Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Fri, 8 Aug 2025 17:03:56 +0700
Subject: [PATCH] feat: Refine zoom functionality in GraphView by enforcing
 zoom limits and optimizing flag rendering for improved performance and visual
 consistency

---
 frontend/src/GraphView.jsx | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/frontend/src/GraphView.jsx b/frontend/src/GraphView.jsx
index 1d826de..5e35c6e 100644
--- a/frontend/src/GraphView.jsx
+++ b/frontend/src/GraphView.jsx
@@ -97,17 +97,18 @@ function GraphView({ servers, connections }) {
     const current = d3.zoomTransform(svgEl);
     const cx = svgEl.clientWidth / 2;
     const cy = svgEl.clientHeight / 2;
-    dbg('zoomBy click', { factor, current: { k: current.k, x: current.x, y: current.y }, center: { cx, cy } });
-    const next = d3.zoomIdentity
-      .translate(current.x, current.y)
-      .scale(current.k)
-      .translate(cx, cy)
-      .scale(factor)
-      .translate(-cx, -cy);
-    d3.select(svgEl)
+    const minK = 0.3;
+    const maxK = 3;
+    let nextK = current.k * factor;
+    if (nextK < minK) nextK = minK;
+    if (nextK > maxK) nextK = maxK;
+    dbg('zoomBy click', { factor, current: { k: current.k, x: current.x, y: current.y }, nextK, center: { cx, cy } });
+    const svgSel = d3.select(svgEl);
+    svgSel.interrupt();
+    svgSel
       .transition()
       .duration(220)
-      .call(zoomRef.current.transform, next)
+      .call(zoomRef.current.scaleTo, nextK, [cx, cy])
       .on('end', () => {
         const nt = d3.zoomTransform(svgEl);
         dbg('zoomBy end', { next: { k: nt.k, x: nt.x, y: nt.y } });
@@ -459,17 +460,15 @@ function GraphView({ servers, connections }) {
                       fill="#fff"
                       stroke={countryColor}
                     />
+                    {/* Рендер флага через foreignObject как в HTML (надёжнее для Windows/Chrome) */}
+                    <foreignObject x={badgeX + 4} y={badgeY + 3} width={16} height={14} style={{ pointerEvents: 'none' }}>
+                      <div xmlns="http://www.w3.org/1999/xhtml"
+                           style={{fontSize:'14px', lineHeight:'14px', fontFamily:'Segoe UI Emoji, Noto Color Emoji, Apple Color Emoji, "Twemoji Mozilla", "EmojiOne Color", sans-serif'}}>
+                        {flag}
+                      </div>
+                    </foreignObject>
                     <text
-                      x={badgeX + 10}
-                      y={badgeY + 13}
-                      fontSize="14"
-                      dominantBaseline="middle"
-                      style={{ fontFamily: 'Segoe UI Emoji, Noto Color Emoji, Apple Color Emoji, "Twemoji Mozilla", "EmojiOne Color", sans-serif' }}
-                    >
-                      {flag}
-                    </text>
-                    <text
-                      x={badgeX + 28}
+                      x={badgeX + 30}
                       y={badgeY + 13}
                       fontSize="11"
                       fill="#475569"