From 978992057a8b91a8bb01cf05073ff09ffbf90fe1 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Thu, 25 Jun 2026 11:15:09 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20Lu=C3=B4n=20gi=E1=BB=AF=20k=C3=ADch=20th?=
 =?UTF-8?q?=C6=B0=E1=BB=9Bc=20b=E1=BA=A3n=20=C4=91=E1=BB=93=20ng=C6=B0?=
 =?UTF-8?q?=E1=BB=9Di=20d=C3=B9ng=20ch=E1=BB=8Dn=20khi=20t=C3=ACm=20=C4=91?=
 =?UTF-8?q?=C6=B0=E1=BB=9Dng=20ng=E1=BA=AFn=20nh=E1=BA=A5t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Thay userInteractedRef bằng canFitRef - chỉ fitBounds đúng 1 lần khi route vừa load
- Sau lần fit đầu, canFitRef = false mãi mãi, không bao giờ reset khi route đổi
- FitBounds chỉ chạy khi canFitRef còn true VÀ compass đang tắt
- MapSizeHandler chỉ gọi invalidateSize() mà không setView để không kích hoạt zoomend/moveend
- Loại bỏ useEffect chết đăng ký zoomend/moveend ở page level (đã có trong MapRefSetter)
- Áp dụng cho cả 2 chế độ: compass bật (xoay theo hướng) và tắt (hướng Bắc)
---
 frontend/src/pages/TourNavigationPage.tsx | 62 ++++++++++-------------
 1 file changed, 27 insertions(+), 35 deletions(-)

diff --git a/frontend/src/pages/TourNavigationPage.tsx b/frontend/src/pages/TourNavigationPage.tsx
index 8f31015..741acb3 100644
--- a/frontend/src/pages/TourNavigationPage.tsx
+++ b/frontend/src/pages/TourNavigationPage.tsx
@@ -16,13 +16,14 @@ interface TourNavigationPageProps {
   onBack: () => void;
 }
 
-const FitBounds = ({ coords, userInteractedRef }: { coords: [number, number][], userInteractedRef: React.MutableRefObject<boolean> }) => {
+const FitBounds = ({ coords, canFitRef, compassActive }: { coords: [number, number][], canFitRef: React.MutableRefObject<boolean>, compassActive: boolean }) => {
   const map = useMap();
   useEffect(() => {
-    if (coords.length > 0 && !userInteractedRef.current) {
+    if (coords.length > 0 && canFitRef.current && !compassActive) {
+      canFitRef.current = false;
       map.fitBounds(coords, { padding: [60, 60], maxZoom: 15 });
     }
-  }, [map, coords, userInteractedRef]);
+  }, [map, coords, canFitRef, compassActive]);
   return null;
 };
 
@@ -69,24 +70,30 @@ const CompassInteractionDetector = ({
   return null;
 };
 
-const MapSizeHandler = ({ mapRef, userInteractedRef }: { mapRef: React.MutableRefObject<L.Map | null>, userInteractedRef: React.MutableRefObject<boolean> }) => {
+const MapRefSetter = ({ mapRef, userInteractedRef }: { mapRef: React.MutableRefObject<L.Map | null>, userInteractedRef: React.MutableRefObject<boolean> }) => {
+  const map = useMap();
+  useEffect(() => {
+    mapRef.current = map;
+    const onZoomEnd = () => { userInteractedRef.current = true; };
+    const onMoveEnd = () => { userInteractedRef.current = true; };
+    map.on('zoomend', onZoomEnd);
+    map.on('moveend', onMoveEnd);
+    return () => {
+      map.off('zoomend', onZoomEnd);
+      map.off('moveend', onMoveEnd);
+    };
+  }, [map, mapRef, userInteractedRef]);
+  return null;
+};
+
+const MapSizeHandler = ({ mapRef }: { mapRef: React.MutableRefObject<L.Map | null> }) => {
   const map = useMap();
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (!mapRef.current) return;
-      
-      const hadUserInteracted = userInteractedRef.current;
-      const currentCenter = map.getCenter();
-      const currentZoom = map.getZoom();
-      
-      mapRef.current.invalidateSize();
-      
-      if (hadUserInteracted) {
-        mapRef.current.setView(currentCenter, currentZoom, { animate: false });
-      }
+      mapRef.current?.invalidateSize();
     }, 100);
     return () => clearTimeout(timer);
-  }, [map, mapRef, userInteractedRef]);
+  }, [map, mapRef]);
   return null;
 };
 
@@ -96,27 +103,12 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
   const [routeGeometry, setRouteGeometry] = useState<[number, number][] | null>(null);
   const [error, setError] = useState<string | null>(null);
   const userInteractedRef = useRef(false);
+  const canFitRef = useRef(true);
 
   const mapRef = useRef<L.Map | null>(null);
   const watchIdRef = useRef<number | null>(null);
   const fetchLockRef = useRef(false);
 
-  useEffect(() => {
-    const map = mapRef.current;
-    if (!map) return;
-    
-    const onZoomEnd = () => { userInteractedRef.current = true; };
-    const onMoveEnd = () => { userInteractedRef.current = true; };
-    
-    map.on('zoomend', onZoomEnd);
-    map.on('moveend', onMoveEnd);
-    
-    return () => {
-      map.off('zoomend', onZoomEnd);
-      map.off('moveend', onMoveEnd);
-    };
-  }, [mapRef.current]);
-
   const originLat = routeData?.origin?.lat;
   const originLng = routeData?.origin?.lng;
   const destLat = routeData?.destination?.lat;
@@ -260,9 +252,9 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
           minZoom={2}
         >
           <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" />
-          <MapSizeHandler mapRef={mapRef} userInteractedRef={userInteractedRef} />
-          <MapRefSetter mapRef={mapRef} />
-          <FitBounds coords={routeGeometry || []} userInteractedRef={userInteractedRef} />
+          <MapSizeHandler mapRef={mapRef} />
+          <MapRefSetter mapRef={mapRef} userInteractedRef={userInteractedRef} />
+          <FitBounds coords={routeGeometry || []} canFitRef={canFitRef} compassActive={isCompassActive} />
           {routeData.origin && (
             <Marker position={[routeData.origin.lat, routeData.origin.lng]} icon={userIcon}>
               <Popup>