VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-07-23 00:34:55 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
Rob Jackson
2022-10-08 18:17:40 +01:00
committed by Jon Koops
parent 18388765c9
commit 68a033d708
3 changed files with 150 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
debug/map/popup-keepinview.html Normal file
View File

@ -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>

48
spec/suites/layer/PopupSpec.js
View File

@ -456,6 +456,28 @@ describe('Popup', function () {
.down().moveBy(10, 10, 20).up();
});
it('moves the map over a short distance to the popup if it is not in the view (keepInView)', function (done) {
container.style.position = 'absolute';
container.style.left = 0;
container.style.top = 0;
container.style.zIndex = 10000;
// to prevent waiting until the animation is finished
map.options.inertia = false;
var spy = sinon.spy();
map.on('autopanstart', spy);
// Short hop to the edge of the map (at time of writing, will trigger an animated pan)
var p = L.popup({keepInView: true}).setContent('Popup').setLatLng(map.getBounds()._northEast);
map.once('moveend', function () {
expect(spy.callCount).to.be(1);
expect(map.getBounds().contains(p.getLatLng())).to.be(true);
done();
});
map.openPopup(p);
});
it('moves the map over a long distance to the popup if it is not in the view (keepInView)', function (done) {
container.style.position = 'absolute';
container.style.left = 0;
@ -467,14 +489,30 @@ describe('Popup', function () {
var spy = sinon.spy();
map.on('autopanstart', spy);
var p = L.popup({keepInView: true}).setContent('Popup').setLatLng([center[0], center[1] + 50]);
map.openPopup(p);
setTimeout(function () {
expect(spy.called).to.be(true);
// Long hop (at time of writing, will trigger a view reset)
var p = L.popup({keepInView: true}).setContent('Popup').setLatLng([center[0], center[1] + 50]);
map.once('moveend', function () {
expect(spy.callCount).to.be(1);
expect(map.getBounds().contains(p.getLatLng())).to.be(true);
done();
}, 800);
});
map.openPopup(p);
});
it('moves on setLatLng after initial autopan', function (done) {
var p = L.popup().setContent('Popup').setLatLng(map.getBounds().getNorthEast());
map.once('moveend', function () {
map.once('moveend', function () {
expect(map.getBounds().contains(p.getLatLng())).to.be(true);
done();
});
p.setLatLng(map.getBounds().getNorthEast());
});
map.openPopup(p);
});
it("shows the popup at the correct location when multiple markers are registered", function () {

16
src/layer/Popup.js
View File

@ -255,10 +255,17 @@ export var Popup = DivOverlay.extend({
DomUtil.setPosition(this._container, pos.add(anchor));
},
_adjustPan: function (e) {
_adjustPan: function () {
if (!this.options.autoPan) { return; }
if (this._map._panAnim) { this._map._panAnim.stop(); }
// We can endlessly recurse if keepInView is set and the view resets.
// Let's guard against that by exiting early if we're responding to our own autopan.
if (this._autopanning) {
this._autopanning = false;
return;
}
var map = this._map,
marginBottom = parseInt(DomUtil.getStyle(this._container, 'marginBottom'), 10) || 0,
containerHeight = this._container.offsetHeight + marginBottom,
@ -293,9 +300,14 @@ export var Popup = DivOverlay.extend({
// @event autopanstart: Event
// Fired when the map starts autopanning when opening a popup.
if (dx || dy) {
// Track that we're autopanning, as this function will be re-ran on moveend
if (this.options.keepInView) {
this._autopanning = true;
}
map
.fire('autopanstart')
.panBy([dx, dy], {animate: e && e.type === 'moveend'});
.panBy([dx, dy]);
}
},