Enable touch interactions for select/lasso/others

package.json

@@ -83,6 +83,7 @@
     "gl-shader": "4.2.0",
     "gl-spikes2d": "^1.0.1",
     "gl-surface3d": "^1.3.0",
+    "has-hover": "^1.0.0",
     "mapbox-gl": "^0.22.0",
     "matrix-camera-controller": "^2.1.3",
     "mouse-change": "^1.4.0",

src/components/dragelement/index.js

@@ -9,6 +9,9 @@
 
 'use strict';
 
+var mouseOffset = require('mouse-event-offset');
+var hasHover = require('has-hover');
+
 var Plotly = require('../../plotly');
 var Lib = require('../../lib');
 
@@ -61,18 +64,29 @@ dragElement.init = function init(options) {
         startX,
         startY,
         newMouseDownTime,
+        cursor,
         dragCover,
         initialTarget;
 
     if(!gd._mouseDownTime) gd._mouseDownTime = 0;
 
+    options.element.style.pointerEvents = 'all';
+
+    if(hasHover) {
+        options.element.onmousedown = onStart;
+    }
+    else {
+        options.element.ontouchstart = onStart;
+    }
+
     function onStart(e) {
         // make dragging and dragged into properties of gd
         // so that others can look at and modify them
         gd._dragged = false;
         gd._dragging = true;
-        startX = e.clientX;
-        startY = e.clientY;
+        var offset = pointerOffset(e);
+        startX = offset[0];
+        startY = offset[1];
         initialTarget = e.target;
 
         newMouseDownTime = (new Date()).getTime();
@@ -88,20 +102,33 @@ dragElement.init = function init(options) {
 
         if(options.prepFn) options.prepFn(e, startX, startY);
 
-        dragCover = coverSlip();
+        if(hasHover) {
+            dragCover = coverSlip();
+            dragCover.addEventListener('mousemove', onMove);
+            dragCover.addEventListener('mouseup', onDone);
+            dragCover.addEventListener('mouseout', onDone);
 
-        dragCover.onmousemove = onMove;
-        dragCover.onmouseup = onDone;
-        dragCover.onmouseout = onDone;
+            dragCover.style.cursor = window.getComputedStyle(options.element).cursor;
+        }
+
+        // document acts as a dragcover for mobile, bc we can't create dragcover dynamically
+        else {
+            dragCover = document;
+            document.addEventListener('touchmove', onMove);
+            document.addEventListener('touchend', onDone);
+
+            cursor = window.getComputedStyle(document.documentElement).cursor;
+            document.documentElement.style.cursor = window.getComputedStyle(options.element).cursor;
+        }
 
-        dragCover.style.cursor = window.getComputedStyle(options.element).cursor;
 
         return Lib.pauseEvent(e);
     }
 
     function onMove(e) {
-        var dx = e.clientX - startX,
-            dy = e.clientY - startY,
+        var offset = pointerOffset(e),
+            dx = offset[0] - startX,
+            dy = offset[1] - startY,
             minDrag = options.minDrag || constants.MINDRAG;
 
         if(Math.abs(dx) < minDrag) dx = 0;
@@ -117,10 +144,24 @@ dragElement.init = function init(options) {
     }
 
     function onDone(e) {
-        dragCover.onmousemove = null;
-        dragCover.onmouseup = null;
-        dragCover.onmouseout = null;
-        Lib.removeElement(dragCover);
+        if(hasHover) {
+            dragCover.removeEventListener('mousemove', onMove);
+            dragCover.removeEventListener('mouseup', onDone);
+            dragCover.removeEventListener('mouseout', onDone);
+
+            Lib.removeElement(dragCover);
+        }
+
+        else {
+            dragCover.removeEventListener('touchmove', onMove);
+            dragCover.removeEventListener('touchend', onDone);
+
+            if(cursor) {
+                dragCover.documentElement.style.cursor = cursor;
+                cursor = null;
+            }
+        }
+
 
         if(!gd._dragging) {
             gd._dragged = false;
@@ -143,12 +184,13 @@ dragElement.init = function init(options) {
                 e2 = new MouseEvent('click', e);
             }
             catch(err) {
+                var offset = pointerOffset(e);
                 e2 = document.createEvent('MouseEvents');
                 e2.initMouseEvent('click',
                     e.bubbles, e.cancelable,
                     e.view, e.detail,
                     e.screenX, e.screenY,
-                    e.clientX, e.clientY,
+                    offset[0], offset[1],
                     e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                     e.button, e.relatedTarget);
             }
@@ -162,9 +204,6 @@ dragElement.init = function init(options) {
 
         return Lib.pauseEvent(e);
     }
-
-    options.element.onmousedown = onStart;
-    options.element.style.pointerEvents = 'all';
 };
 
 function coverSlip() {
@@ -191,3 +230,10 @@ function finishDrag(gd) {
     gd._dragging = false;
     if(gd._replotPending) Plotly.plot(gd);
 }
+
+function pointerOffset(e) {
+    return mouseOffset(
+        e.changedTouches && e.changedTouches[0] || e,
+        document.body
+    );
+}

src/plot_api/plot_api.js

@@ -12,6 +12,7 @@
 
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
+var hasHover = require('has-hover');
 
 var Plotly = require('../plotly');
 var Lib = require('../lib');
@@ -423,6 +424,11 @@ function setPlotContext(gd, config) {
         context.showLink = false;
         context.displayModeBar = false;
     }
+
+    // make sure hover-only devices have mode bar visible
+    if(context.displayModeBar === 'hover' && !hasHover) {
+        context.displayModeBar = true;
+    }
 }
 
 function plotPolar(gd, data, layout) {

src/plots/gl2d/camera.js

@@ -11,6 +11,7 @@
 
 var mouseChange = require('mouse-change');
 var mouseWheel = require('mouse-wheel');
+var mouseOffset = require('mouse-event-offset');
 var cartesianConstants = require('../cartesian/constants');
 
 module.exports = createCamera;
@@ -55,7 +56,24 @@ function createCamera(scene) {
         return false;
     }
 
-    result.mouseListener = mouseChange(element, function(buttons, x, y) {
+    result.mouseListener = mouseChange(element, handleInteraction);
+
+    // enable simple touch interactions
+    element.addEventListener('touchstart', function(ev) {
+        var xy = mouseOffset(ev.changedTouches[0], element);
+        handleInteraction(0, xy[0], xy[1]);
+        handleInteraction(1, xy[0], xy[1]);
+    });
+    element.addEventListener('touchmove', function(ev) {
+        ev.preventDefault();
+        var xy = mouseOffset(ev.changedTouches[0], element);
+        handleInteraction(1, xy[0], xy[1]);
+    });
+    element.addEventListener('touchend', function() {
+        handleInteraction(0, result.lastPos[0], result.lastPos[1]);
+    });
+
+    function handleInteraction(buttons, x, y) {
         var dataBox = scene.calcDataBox(),
             viewBox = plot.viewBox;
 
@@ -235,7 +253,7 @@ function createCamera(scene) {
 
         result.lastPos[0] = x;
         result.lastPos[1] = y;
-    });
+    }
 
     result.wheelListener = mouseWheel(element, function(dx, dy) {
         var dataBox = scene.calcDataBox(),

src/plots/gl2d/scene2d.js

@@ -525,11 +525,23 @@ proto.updateTraces = function(fullData, calcData) {
 };
 
 proto.updateFx = function(dragmode) {
+    // switch to svg interactions in lasso/select mode
     if(dragmode === 'lasso' || dragmode === 'select') {
         this.mouseContainer.style['pointer-events'] = 'none';
     } else {
         this.mouseContainer.style['pointer-events'] = 'auto';
     }
+
+    // set proper cursor
+    if(dragmode === 'pan') {
+        this.mouseContainer.style.cursor = 'move';
+    }
+    else if(dragmode === 'zoom') {
+        this.mouseContainer.style.cursor = 'crosshair';
+    }
+    else {
+        this.mouseContainer.style.cursor = null;
+    }
 };
 
 proto.emitPointAction = function(nextSelection, eventType) {

src/traces/scattergl/convert.js

@@ -401,7 +401,7 @@ proto.updateFast = function(options) {
     this.idToIndex = idToIndex;
 
     // form selected set
-    if(selection) {
+    if(selection && selection.length) {
         selPositions = new Float64Array(2 * selection.length);
 
         for(i = 0, l = selection.length; i < l; i++) {