From 384bacd28dcbfa12721b2a54e6cf0e1a2134686a Mon Sep 17 00:00:00 2001 From: Arindam Bose Date: Fri, 6 Sep 2019 17:14:11 -0700 Subject: [PATCH 1/3] resize events shouldn't break map geolocation control following --- debug/7053_geolocation_follow.html | 38 +++++++++++++++++++++++ src/ui/control/geolocate_control.js | 2 +- src/ui/map.js | 2 +- test/unit/ui/control/geolocate.test.js | 42 ++++++++++++++++++++++++++ 4 files changed, 82 insertions(+), 2 deletions(-) create mode 100644 debug/7053_geolocation_follow.html diff --git a/debug/7053_geolocation_follow.html b/debug/7053_geolocation_follow.html new file mode 100644 index 00000000000..356cf7a00d6 --- /dev/null +++ b/debug/7053_geolocation_follow.html @@ -0,0 +1,38 @@ + + + + Mapbox GL JS debug page + + + + + + + +
+ + + + + + diff --git a/src/ui/control/geolocate_control.js b/src/ui/control/geolocate_control.js index 71a5a593a0d..b9517c7ff2f 100644 --- a/src/ui/control/geolocate_control.js +++ b/src/ui/control/geolocate_control.js @@ -295,7 +295,7 @@ class GeolocateControl extends Evented { // the watch mode to background watch, so that the marker is updated but not the camera. if (this.options.trackUserLocation) { this._map.on('movestart', (event) => { - if (!event.geolocateSource && this._watchState === 'ACTIVE_LOCK') { + if (!event.geolocateSource && this._watchState === 'ACTIVE_LOCK' && !(event.sourceEvent === 'resize')) { this._watchState = 'BACKGROUND'; this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background'); this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active'); diff --git a/src/ui/map.js b/src/ui/map.js index 5b9286cda4d..7e79608beac 100755 --- a/src/ui/map.js +++ b/src/ui/map.js @@ -1851,7 +1851,7 @@ class Map extends Camera { _onWindowResize() { if (this._trackResize) { - this.resize()._update(); + this.resize({sourceEvent: 'resize'})._update(); } } diff --git a/test/unit/ui/control/geolocate.test.js b/test/unit/ui/control/geolocate.test.js index c0c63906749..7a7aa43fcd5 100644 --- a/test/unit/ui/control/geolocate.test.js +++ b/test/unit/ui/control/geolocate.test.js @@ -334,3 +334,45 @@ test('GeolocateControl trackuserlocationstart event', (t) => { geolocate._geolocateButton.dispatchEvent(click); geolocation.send({latitude: 10, longitude: 20, accuracy: 30, timestamp: 40}); }); + +test('GeolocateControl does not switch to BACKGROUND and stays in ACTIVE_LOCK state on window resize', (t) => { + const map = createMap(t); + const geolocate = new GeolocateControl({ + trackUserLocation: true, + }); + map.addControl(geolocate); + + const click = new window.Event('click'); + + geolocate.once('geolocate', () => { + t.equal(geolocate._watchState, 'ACTIVE_LOCK'); + window.dispatchEvent(new window.Event('resize')); + t.equal(geolocate._watchState, 'ACTIVE_LOCK'); + t.end(); + }); + + geolocate._geolocateButton.dispatchEvent(click); + geolocation.send({latitude: 10, longitude: 20, accuracy: 30, timestamp: 40}); +}); + +test('GeolocateControl switches to BACKGROUND state on map manipulation', (t) => { + const map = createMap(t); + const geolocate = new GeolocateControl({ + trackUserLocation: true, + }); + map.addControl(geolocate); + + const click = new window.Event('click'); + + geolocate.once('geolocate', () => { + t.equal(geolocate._watchState, 'ACTIVE_LOCK'); + map.jumpTo({ + center: [0, 0] + }); + t.equal(geolocate._watchState, 'BACKGROUND'); + t.end(); + }); + + geolocate._geolocateButton.dispatchEvent(click); + geolocation.send({latitude: 10, longitude: 20, accuracy: 30, timestamp: 40}); +}); From 5a98ea9ae57dbbcf3620f86da518113ddf6d9ea0 Mon Sep 17 00:00:00 2001 From: Arindam Bose Date: Fri, 6 Sep 2019 17:43:01 -0700 Subject: [PATCH 2/3] fix failing test --- test/unit/ui/control/geolocate.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/ui/control/geolocate.test.js b/test/unit/ui/control/geolocate.test.js index 7a7aa43fcd5..beda845f55e 100644 --- a/test/unit/ui/control/geolocate.test.js +++ b/test/unit/ui/control/geolocate.test.js @@ -157,7 +157,7 @@ test('GeolocateControl no watching map camera on geolocation', (t) => { const click = new window.Event('click'); - map.on('moveend', () => { + map.once('moveend', () => { t.deepEqual(lngLatAsFixed(map.getCenter(), 4), {lat: 10, lng: 20}, 'map centered on location'); const mapBounds = map.getBounds(); From be332ef0fc4c12940a024d306eba2cd5d900dcb9 Mon Sep 17 00:00:00 2001 From: Arindam Bose Date: Mon, 9 Sep 2019 13:48:07 -0700 Subject: [PATCH 3/3] address CR comments --- debug/7053_geolocation_follow.html | 38 ----------------------------- src/ui/control/geolocate_control.js | 3 ++- src/ui/map.js | 4 +-- 3 files changed, 4 insertions(+), 41 deletions(-) delete mode 100644 debug/7053_geolocation_follow.html diff --git a/debug/7053_geolocation_follow.html b/debug/7053_geolocation_follow.html deleted file mode 100644 index 356cf7a00d6..00000000000 --- a/debug/7053_geolocation_follow.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - Mapbox GL JS debug page - - - - - - - -
- - - - - - diff --git a/src/ui/control/geolocate_control.js b/src/ui/control/geolocate_control.js index b9517c7ff2f..19d0988f559 100644 --- a/src/ui/control/geolocate_control.js +++ b/src/ui/control/geolocate_control.js @@ -295,7 +295,8 @@ class GeolocateControl extends Evented { // the watch mode to background watch, so that the marker is updated but not the camera. if (this.options.trackUserLocation) { this._map.on('movestart', (event) => { - if (!event.geolocateSource && this._watchState === 'ACTIVE_LOCK' && !(event.sourceEvent === 'resize')) { + const fromResize = event.originalEvent && event.originalEvent.type === 'resize'; + if (!event.geolocateSource && this._watchState === 'ACTIVE_LOCK' && !fromResize) { this._watchState = 'BACKGROUND'; this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background'); this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active'); diff --git a/src/ui/map.js b/src/ui/map.js index 7e79608beac..9c240888a5b 100755 --- a/src/ui/map.js +++ b/src/ui/map.js @@ -1849,9 +1849,9 @@ class Map extends Camera { this._update(); } - _onWindowResize() { + _onWindowResize(event: Event) { if (this._trackResize) { - this.resize({sourceEvent: 'resize'})._update(); + this.resize({originalEvent: event})._update(); } }