Merge pull request #2296 from plotly/prevent-mobile-panning

Panning in mobile devices

Author: dy

package-lock.json

@@ -85,6 +85,7 @@
     "gl-surface3d": "^1.3.4",
     "glslify": "^6.1.0",
     "has-hover": "^1.0.1",
+    "has-passive-events": "^1.0.0",
     "kdgrass": "^1.0.1",
     "mapbox-gl": "^0.22.0",
     "matrix-camera-controller": "^2.1.3",
@@ -117,8 +118,8 @@
     "browserify-transform-tools": "^1.7.0",
     "check-node-version": "^3.2.0",
     "deep-equal": "^1.0.1",
-    "ecstatic": "^3.1.1",
-    "eslint": "^4.16.0",
+    "ecstatic": "^3.2.0",
+    "eslint": "^4.17.0",
     "falafel": "^2.0.0",
     "fs-extra": "^2.0.0",
     "fuse.js": "^3.2.0",
@@ -137,7 +138,7 @@
     "karma-jasmine-spec-tags": "^1.0.1",
     "karma-spec-reporter": "0.0.32",
     "karma-verbose-reporter": "0.0.6",
-    "madge": "^3.0.0",
+    "madge": "^3.0.1",
     "minify-stream": "^1.1.0",
     "minimist": "^1.2.0",
     "node-sass": "^4.7.2",

package.json

@@ -11,6 +11,7 @@
 
 var mouseOffset = require('mouse-event-offset');
 var hasHover = require('has-hover');
+var supportsPassive = require('has-passive-events');
 
 var Plotly = require('../../plotly');
 var Lib = require('../../lib');
@@ -27,7 +28,6 @@ var unhover = require('./unhover');
 dragElement.unhover = unhover.wrapped;
 dragElement.unhoverRaw = unhover.raw;
 
-var supportsPassive = Lib.eventListenerOptionsSupported();
 
 /**
  * Abstracts click & drag interactions
@@ -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,10 +166,12 @@ dragElement.init = function init(options) {
         document.addEventListener('touchmove', onMove);
         document.addEventListener('touchend', onDone);
 
-        return Lib.pauseEvent(e);
+        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);
@@ -181,7 +185,7 @@ dragElement.init = function init(options) {
 
         if(gd._dragged && options.moveFn && !rightClick) options.moveFn(dx, dy);
 
-        return Lib.pauseEvent(e);
+        return;
     }
 
     function onDone(e) {
@@ -190,6 +194,8 @@ dragElement.init = function init(options) {
         document.removeEventListener('touchmove', onMove);
         document.removeEventListener('touchend', onDone);
 
+        e.preventDefault();
+
         if(hasHover) {
             Lib.removeElement(dragCover);
         }
@@ -246,7 +252,7 @@ dragElement.init = function init(options) {
 
         gd._dragged = false;
 
-        return Lib.pauseEvent(e);
+        return;
     }
 };
 

src/components/dragelement/index.js

@@ -150,20 +150,6 @@ lib.swapAttrs = function(cont, attrList, part1, part2) {
     }
 };
 
-/**
- * to prevent event bubbling, in particular text selection during drag.
- * see http://stackoverflow.com/questions/5429827/
- *      how-can-i-prevent-text-element-selection-with-cursor-drag
- * for maximum effect use:
- *      return pauseEvent(e);
- */
-lib.pauseEvent = function(e) {
-    if(e.stopPropagation) e.stopPropagation();
-    if(e.preventDefault) e.preventDefault();
-    e.cancelBubble = true;
-    return false;
-};
-
 /**
  * SVG painter's algo worked around with reinsertion
  */
@@ -890,25 +876,3 @@ lib.subplotSort = function(a, b) {
     }
     return numB - numA;
 };
-
-/*
- * test if event listener options supported
- */
-lib.eventListenerOptionsSupported = function() {
-    var supported = false;
-
-    try {
-        var opts = Object.defineProperty({}, 'passive', {
-            get: function() {
-                supported = true;
-            }
-        });
-
-        window.addEventListener('test', null, opts);
-        window.removeEventListener('test', null, opts);
-    } catch(e) {
-        supported = false;
-    }
-
-    return supported;
-};