fix: keep on spinning

Jujulego · Jul 20, 2024 · ca45a44 · ca45a44
1 parent 13c8f28
commit ca45a44
Showing 1 changed file with 42 additions and 4 deletions.
diff --git a/src/mapbox/MapboxMap.tsx b/src/mapbox/MapboxMap.tsx
@@ -98,13 +98,18 @@ export default function MapboxMap({ initialFocusKey, children, sx }: MapboxMapPr
     if (!map || !spin) return;
 
     // Make map spin
+    let pause = false;
+
     function spinAnimation() {
+      if (pause) return;
+
       const center = map!.getCenter();
       center.lng += 360 / 240; // <= 1 revolution every 4 minutes
 
       map!.easeTo({
         center,
         zoom: Math.min(3, map!.getZoom()),
+        maxZoom: 3,
         duration: 1000,
         easing: (n) => n
       });
@@ -113,11 +118,44 @@ export default function MapboxMap({ initialFocusKey, children, sx }: MapboxMapPr
     map.on('moveend', spinAnimation); // <= start again move when it ends
     spinAnimation();
 
-    map.once('mousedown', () => {
-      setSpin(false);
-    });
+    // Pause animation
+    function pauseAnimation() {
+      pause = true;
+      map!.stop();
+    }
+
+    map.on('mousedown', pauseAnimation);
+    map.on('touchstart', pauseAnimation);
+    map.on('zoomstart', pauseAnimation);
 
-    return () => void map.off('moveend', spinAnimation);
+    // Restart animation
+    function restartAnimation() {
+      pause = false;
+      spinAnimation();
+    }
+
+    map.on('mouseup', restartAnimation);
+    map.on('dragend', restartAnimation);
+    map.on('pitchend', restartAnimation);
+    map.on('rotateend', restartAnimation);
+    map.on('touchend', restartAnimation);
+    map.on('zoomend', restartAnimation);
+
+    return () => {
+      // Clear events
+      map.off('moveend', spinAnimation);
+
+      map.off('mousedown', pauseAnimation);
+      map.off('touchstart', pauseAnimation);
+      map.off('zoomstart', pauseAnimation);
+
+      map.off('mouseup', restartAnimation);
+      map.off('dragend', restartAnimation);
+      map.off('pitchend', restartAnimation);
+      map.off('rotateend', restartAnimation);
+      map.off('touchend', restartAnimation);
+      map.off('zoomend', restartAnimation);
+    };
   }, [map, spin]);
 
   // Render