Add gl2d test for panning

Author: dy

src/components/dragelement/index.js

@@ -124,6 +124,8 @@ dragElement.init = function init(options) {
     var clampFn = options.clampFn || _clampFn;
 
     function onStart(e) {
+        e.preventDefault();
+
         // make dragging and dragged into properties of gd
         // so that others can look at and modify them
         gd._dragged = false;
@@ -164,11 +166,12 @@ dragElement.init = function init(options) {
         document.addEventListener('touchmove', onMove);
         document.addEventListener('touchend', onDone);
 
-        e.preventDefault();
         return;
     }
 
     function onMove(e) {
+        e.preventDefault();
+
         var offset = pointerOffset(e);
         var minDrag = options.minDrag || constants.MINDRAG;
         var dxdy = clampFn(offset[0] - startX, offset[1] - startY, minDrag);
@@ -182,7 +185,6 @@ dragElement.init = function init(options) {
 
         if(gd._dragged && options.moveFn && !rightClick) options.moveFn(dx, dy);
 
-        e.preventDefault();
         return;
     }
 
@@ -192,6 +194,8 @@ dragElement.init = function init(options) {
         document.removeEventListener('touchmove', onMove);
         document.removeEventListener('touchend', onDone);
 
+        e.preventDefault();
+
         if(hasHover) {
             Lib.removeElement(dragCover);
         }
@@ -248,7 +252,6 @@ dragElement.init = function init(options) {
 
         gd._dragged = false;
 
-        e.preventDefault();
         return;
     }
 };

src/plots/gl2d/camera.js

@@ -294,7 +294,7 @@ function createCamera(scene) {
         scene.relayoutCallback();
 
         return true;
-    });
+    }, true);
 
     return result;
 }

test/jasmine/tests/gl2d_plot_interact_test.js

@@ -9,6 +9,7 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var fail = require('../assets/fail_test');
 var mouseEvent = require('../assets/mouse_event');
+var touchEvent = require('../assets/touch_event');
 var drag = require('../assets/drag');
 var selectButton = require('../assets/modebar_button');
 var delay = require('../assets/delay');
@@ -605,4 +606,57 @@ describe('Test gl2d plots', function() {
         .catch(fail)
         .then(done);
     });
+
+    it('should not scroll document while panning', function(done) {
+        var mock = {
+            data: [
+                { type: 'scattergl', y: [1, 2, 3], x: [1, 2, 3] }
+            ],
+            layout: {
+                width: 500,
+                height: 500
+            }
+        };
+
+        var sceneTarget, relayoutCallback = jasmine.createSpy('relayoutCallback');
+
+        function scroll(target, amt) {
+            return new Promise(function(resolve) {
+                target.dispatchEvent(new WheelEvent('wheel', {deltaY: amt || 1, cancelable: true}));
+                setTimeout(resolve, 0);
+            });
+        }
+
+        function touchDrag(target, start, end) {
+            return new Promise(function(resolve) {
+                touchEvent('touchstart', start[0], start[1], {element: target});
+                touchEvent('touchmove', end[0], end[1], {element: target});
+                touchEvent('touchend', end[0], end[1], {element: target});
+                setTimeout(resolve, 0);
+            });
+        }
+
+        function assertEvent(e) {
+            expect(e.defaultPrevented).toEqual(true);
+            relayoutCallback();
+        }
+
+        gd.addEventListener('touchstart', assertEvent);
+        gd.addEventListener('wheel', assertEvent);
+
+        Plotly.plot(gd, mock)
+        .then(function() {
+            sceneTarget = gd.querySelector('.nsewdrag');
+
+            return touchDrag(sceneTarget, [100, 100], [0, 0]);
+        })
+        .then(function() {
+            return scroll(sceneTarget);
+        })
+        .then(function() {
+            expect(relayoutCallback).toHaveBeenCalledTimes(1);
+        })
+        .catch(fail)
+        .then(done);
+    });
 });