From 6ae951d77fd614c2b43c4a9389faa7d0b2b246c9 Mon Sep 17 00:00:00 2001 From: Mats Blomdahl Date: Sat, 9 Dec 2017 15:09:22 +0100 Subject: [PATCH 1/9] #64 Add per-circle update/animation counter to debugEl --- lib/main.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/main.js b/lib/main.js index 728f110..1db6817 100644 --- a/lib/main.js +++ b/lib/main.js @@ -239,6 +239,7 @@ class MapboxCircle { /** @const {Array} */ this._handles = undefined; /** @const {boolean} */ this._centerDragActive = false; /** @const {boolean} */ this._radiusDragActive = false; + /** @const {number} */ this._updateCount = 0; [ // Bind all event handlers. '_onZoomEnd', @@ -306,9 +307,11 @@ class MapboxCircle { } if (this.options.debugEl) { + this._updateCount += 1; this.options.debugEl.innerHTML = ('Center: ' + JSON.stringify(this.getCenter()) + ' / Radius: ' + radius + ' / Bounds: ' + JSON.stringify(this.getBounds()) + ' / Steps: ' + steps + - ' / Zoom: ' + zoom.toFixed(2) + ' / ID: ' + this._instanceId); + ' / Zoom: ' + zoom.toFixed(2) + ' / ID: ' + this._instanceId + + ' / #: ' + this._updateCount); } } From 84445ddd02ad2f0c25968b614a42e28f2c6206fa Mon Sep 17 00:00:00 2001 From: Mats Blomdahl Date: Sat, 9 Dec 2017 15:19:32 +0100 Subject: [PATCH 2/9] #64 & mapbox/smithmicro-collab#1 6 ms trailing debounce of circle-animating 'mousemove' events --- lib/main.js | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/lib/main.js b/lib/main.js index 1db6817..639866d 100644 --- a/lib/main.js +++ b/lib/main.js @@ -239,6 +239,7 @@ class MapboxCircle { /** @const {Array} */ this._handles = undefined; /** @const {boolean} */ this._centerDragActive = false; /** @const {boolean} */ this._radiusDragActive = false; + /** @const {Object} */ this._debouncedHandlers = {}; /** @const {number} */ this._updateCount = 0; [ // Bind all event handlers. @@ -283,6 +284,27 @@ class MapboxCircle { return window.navigator.userAgent.indexOf('Chrome') === -1 && window.navigator.userAgent.indexOf('Safari') > -1; } + /** + * Add debounced event handler to map. + * @param {string} event Mapbox GL event name + * @param {Function} handler Event handler + * @private + */ + _mapOnDebounced(event, handler) { + this._debouncedHandlers[handler] = _.debounce(handler, 6, {leading: false, trailing: true}); + this.map.on(event, this._debouncedHandlers[handler]); + } + + /** + * Remove debounced event handler from map. + * @param {string} event Mapbox GL event name + * @param {Function} handler Event handler + * @private + */ + _mapOffDebounced(event, handler) { + this.map.off(event, this._debouncedHandlers[handler]); + } + /** * Re-calculate/update circle polygon and handles. * @private @@ -471,7 +493,7 @@ class MapboxCircle { */ _onCenterHandleMouseDown() { this._centerDragActive = true; - this.map.on('mousemove', this._onCenterHandleMouseMove); + this._mapOnDebounced('mousemove', this._onCenterHandleMouseMove); this.map.addLayer(this._getCenterHandleStrokeLayer(), this._circleCenterHandleId); this._suspendHandleListeners('center'); this.map.once('mouseup', this._onCenterHandleMouseUpOrMapMouseOut); @@ -510,7 +532,7 @@ class MapboxCircle { const newCenter = this.center; this._centerDragActive = false; - this.map.off('mousemove', this._onCenterHandleMouseMove); + this._mapOffDebounced('mousemove', this._onCenterHandleMouseMove); switch (event.type) { case 'mouseup': this.map.off('mouseout', this._onCenterHandleMouseUpOrMapMouseOut); break; case 'mouseout': this.map.off('mouseup', this._onCenterHandleMouseUpOrMapMouseOut); break; @@ -610,7 +632,7 @@ class MapboxCircle { */ _onRadiusHandlesMouseDown(event) { this._radiusDragActive = true; - this.map.on('mousemove', this._onRadiusHandlesMouseMove); + this._mapOnDebounced('mousemove', this._onRadiusHandlesMouseMove); this.map.addLayer(this._getRadiusHandlesStrokeLayer(), this._circleRadiusHandlesId); this._suspendHandleListeners('radius'); this.map.once('mouseup', this._onRadiusHandlesMouseUpOrMapMouseOut); @@ -649,7 +671,7 @@ class MapboxCircle { const newRadius = this.radius; this._radiusDragActive = false; - this.map.off('mousemove', this._onRadiusHandlesMouseMove); + this._mapOffDebounced('mousemove', this._onRadiusHandlesMouseMove); this.map.removeLayer(this._circleRadiusHandlesStrokeId); switch (event.type) { case 'mouseup': this.map.off('mouseout', this._onRadiusHandlesMouseUpOrMapMouseOut); break; From 4152efc268d360908ad1852363ada64985d49ee3 Mon Sep 17 00:00:00 2001 From: Mats Blomdahl Date: Sat, 9 Dec 2017 17:00:34 +0100 Subject: [PATCH 3/9] #64 & mapbox/smithmicro-collab#1 Replace lodash.debounce with requestAnimationFrame --- lib/main.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/lib/main.js b/lib/main.js index 639866d..b76dc6a 100644 --- a/lib/main.js +++ b/lib/main.js @@ -291,7 +291,16 @@ class MapboxCircle { * @private */ _mapOnDebounced(event, handler) { - this._debouncedHandlers[handler] = _.debounce(handler, 6, {leading: false, trailing: true}); + let ticking = false; + this._debouncedHandlers[handler] = (args) => { + if (!ticking) { + requestAnimationFrame(() => { + handler(args); + ticking = false; + }); + } + ticking = true; + }; this.map.on(event, this._debouncedHandlers[handler]); } From 2ac78a5eed8acf8cc59b3ce5e5e89b41264789e0 Mon Sep 17 00:00:00 2001 From: Mats Blomdahl Date: Sat, 9 Dec 2017 17:45:33 +0100 Subject: [PATCH 4/9] Version lock turf.js to 4.7.3; breaking changes to turf.distance introduced with 5.x --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0789941..7fc7fd9 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +