Alternate fix for PopUp keepInView recursion and speed up associated test (#8520)

2025-07-21 23:26:12 +00:00 · 2022-10-08 18:17:40 +01:00
parent 3836242dd7
commit 4cbd3610cd
3 changed files with 150 additions and 7 deletions
--- a/debug/map/popup-keepinview.html
+++ b/debug/map/popup-keepinview.html
@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Leaflet debug page</title>
+
+  <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="../css/screen.css" />
+
+  <script src="../../dist/leaflet-src.js"></script>
+</head>
+<body>
+
+  <div id="map"></div>
+
+  <div>
+    <label><input type="checkbox" id="keepInView" checked>Set keepInView</label>
+    <button id="popupWithinBounds">Add popup within bounds</button>
+    <button id="popupSlightlyBeyondBounds">Add popup slightly beyond bounds</button>
+    <button id="popupBeyondBounds">Add popup far away</button>
+    <button id="movePopup">Move last popup</button>
+  </div>
+    
+  <script>
+
+    var osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+      osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+    var center = [50.5, 30.51];
+    var map = L.map('map')
+        .setView(center, 15)
+        .addLayer(osm);
+
+    var lastPopup;
+    var keepInViewCheckbox = document.querySelector('#keepInView');
+
+    function getRandomLatLng(llbounds, expandRange) {
+      // How many degrees to expand the search range by
+      var expandRange = expandRange || 0;
+
+      var s = llbounds.getSouth() - expandRange,
+          n = llbounds.getNorth() + expandRange,
+          w = llbounds.getWest() - expandRange,
+          e = llbounds.getEast() + expandRange;
+
+      return L.latLng(
+        s + (Math.random() * (n - s)),
+        w + (Math.random() * (e - w))
+      )
+    }
+
+    map.on('autopanstart move moveend', function(e) {
+      console.log(e);
+    });
+    
+    document.querySelector('#popupWithinBounds').addEventListener('click', function() {
+      lastPopup = L.popup({keepInView: keepInViewCheckbox.checked})
+        .setContent('Popup')
+        .setLatLng(getRandomLatLng(map.getBounds()));
+
+      map.openPopup(lastPopup);
+    });
+    
+    document.querySelector('#popupSlightlyBeyondBounds').addEventListener('click', function() {
+      lastPopup = L.popup({keepInView: keepInViewCheckbox.checked})
+        .setContent('Popup')
+        .setLatLng(getRandomLatLng(map.getBounds(), .01));
+
+      map.openPopup(lastPopup);
+    });
+    
+    document.querySelector('#popupBeyondBounds').addEventListener('click', function() {
+      lastPopup = L.popup({keepInView: keepInViewCheckbox.checked})
+        .setContent('Popup')
+        .setLatLng(getRandomLatLng(map.getBounds(), 1));
+
+      map.openPopup(lastPopup);
+    });
+
+    document.querySelector('#movePopup').addEventListener('click', function() {
+      if (!lastPopup) {
+        alert("No popup to move!");
+        return;
+      }
+      lastPopup.setLatLng(map.getBounds().getNorthEast());
+    });
+    
+  </script>
+</body>
+</html>