Merge pull request #2709 from plotly/mapbox-scroll

plotly_relayout on mapbox scroll
plotly · Jun 7, 2018 · f2478f9 · f2478f9
2 parents 95c88e6 + 6903320
commit f2478f9
Show file tree

Hide file tree

Showing 14 changed files with 62 additions and 284 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,7 +86,7 @@
     "glslify": "^6.1.1",
     "has-hover": "^1.0.1",
     "has-passive-events": "^1.0.0",
-    "mapbox-gl": "0.44.1",
+    "mapbox-gl": "0.45.0",
     "matrix-camera-controller": "^2.1.3",
     "mouse-change": "^1.4.0",
     "mouse-event-offset": "^3.0.2",

diff --git a/src/plots/mapbox/constants.js b/src/plots/mapbox/constants.js
@@ -8,7 +8,7 @@
 
 'use strict';
 
-var requiredVersion = '0.44.1';
+var requiredVersion = '0.45.0';
 
 module.exports = {
     requiredVersion: requiredVersion,

diff --git a/src/plots/mapbox/mapbox.js b/src/plots/mapbox/mapbox.js
@@ -130,6 +130,8 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
 
     if(self.isStatic) return;
 
+    var wheeling = false;
+
     // keep track of pan / zoom in user layout and emit relayout event
     map.on('moveend', function(eventData) {
         if(!self.map) return;
@@ -149,11 +151,16 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         // mouse target (filtering out API calls) to not
         // duplicate 'plotly_relayout' events.
 
-        if(eventData.originalEvent) {
+        if(eventData.originalEvent || wheeling) {
             var update = {};
             update[self.id] = Lib.extendFlat({}, view);
             gd.emit('plotly_relayout', update);
         }
+        wheeling = false;
+    });
+
+    map.on('wheel', function() {
+        wheeling = true;
     });
 
     map.on('mousemove', function(evt) {

diff --git a/test/image/baselines/mapbox_0.png b/test/image/baselines/mapbox_0.png
diff --git a/test/image/baselines/mapbox_angles.png b/test/image/baselines/mapbox_angles.png
diff --git a/test/image/baselines/mapbox_bubbles-text.png b/test/image/baselines/mapbox_bubbles-text.png
diff --git a/test/image/baselines/mapbox_bubbles.png b/test/image/baselines/mapbox_bubbles.png
diff --git a/test/image/baselines/mapbox_connectgaps.png b/test/image/baselines/mapbox_connectgaps.png
diff --git a/test/image/baselines/mapbox_custom-style.png b/test/image/baselines/mapbox_custom-style.png
diff --git a/test/image/baselines/mapbox_fill.png b/test/image/baselines/mapbox_fill.png
diff --git a/test/image/baselines/mapbox_layers.png b/test/image/baselines/mapbox_layers.png
diff --git a/test/image/baselines/mapbox_symbol-text.png b/test/image/baselines/mapbox_symbol-text.png
diff --git a/test/jasmine/tests/mapbox_test.js b/test/jasmine/tests/mapbox_test.js
@@ -827,6 +827,14 @@ describe('@noCI, mapbox plots', function() {
             doubleClickCnt++;
         });
 
+        function _scroll(p) {
+            return new Promise(function(resolve) {
+                mouseEvent('mousemove', p[0], p[1]);
+                mouseEvent('scroll', p[0], p[1], {deltaY: -400});
+                setTimeout(resolve, 1000);
+            });
+        }
+
         function assertLayout(center, zoom, opts) {
             var mapInfo = getMapInfo(gd),
                 layout = gd.layout.mapbox;
@@ -858,14 +866,18 @@ describe('@noCI, mapbox plots', function() {
         .then(function() {
             expect(doubleClickCnt).toBe(1, 'double click cnt');
             assertLayout([-4.710, 19.475], 1.234);
+
+            return _scroll(pointPos);
+        })
+        .then(function() {
+            expect(getMapInfo(gd).zoom).toBeGreaterThan(1.234);
+            expect(relayoutCnt).toBe(2);
         })
         .catch(failTest)
         .then(done);
-
-        // TODO test scroll
-
     }, LONG_TIMEOUT_INTERVAL);
 
+
     it('should respond to click interactions by', function(done) {
         var ptData;
 
@@ -1001,13 +1013,8 @@ describe('@noCI, mapbox plots', function() {
     }
 
     function _click(pos, cb) {
-        var promise = _mouseEvent('mousemove', pos, noop).then(function() {
-            return _mouseEvent('mousedown', pos, noop);
-        }).then(function() {
-            return _mouseEvent('click', pos, cb);
-        });
-
-        return promise;
+        mouseEvent('mousemove', pos[0], pos[1]);
+        return _mouseEvent('click', pos, cb);
     }
 
     function _doubleClick(pos) {