Add test, refactor cover slip

Author: dy

src/components/dragelement/index.js

@@ -10,7 +10,6 @@
 'use strict';
 
 var mouseOffset = require('mouse-event-offset');
-var hasHover = require('has-hover');
 
 var Plotly = require('../../plotly');
 var Lib = require('../../lib');
@@ -30,13 +29,6 @@ dragElement.unhoverRaw = unhover.raw;
 /**
  * Abstracts click & drag interactions
  *
- * During the interaction, a "coverSlip" element - a transparent
- * div covering the whole page - is created, which has two key effects:
- * - Lets you drag beyond the boundaries of the plot itself without
- *   dropping (but if you drag all the way out of the browser window the
- *   interaction will end)
- * - Freezes the cursor: whatever mouse cursor the drag element had when the
- *   interaction started gets copied to the coverSlip for use until mouseup
  *
  * @param {object} options with keys:
  *      element (required) the DOM element to drag
@@ -65,19 +57,14 @@ dragElement.init = function init(options) {
         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;
-    }
+    options.element.onmousedown = onStart;
+    options.element.ontouchstart = onStart;
 
     function onStart(e) {
         // make dragging and dragged into properties of gd
@@ -102,24 +89,16 @@ dragElement.init = function init(options) {
 
         if(options.prepFn) options.prepFn(e, startX, startY);
 
-        if(hasHover) {
-            dragCover = coverSlip();
-            dragCover.addEventListener('mousemove', onMove);
-            dragCover.addEventListener('mouseup', onDone);
-            dragCover.addEventListener('mouseout', 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);
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onDone);
+        document.addEventListener('mouseout', onDone);
+        document.addEventListener('touchmove', onMove);
+        document.addEventListener('touchend', onDone);
 
-            cursor = window.getComputedStyle(document.documentElement).cursor;
-            document.documentElement.style.cursor = window.getComputedStyle(options.element).cursor;
-        }
+        cursor = window.getComputedStyle(document.documentElement).cursor;
+        document.documentElement.style.cursor = window.getComputedStyle(options.element).cursor;
 
 
         return Lib.pauseEvent(e);
@@ -144,25 +123,17 @@ dragElement.init = function init(options) {
     }
 
     function onDone(e) {
-        if(hasHover) {
-            dragCover.removeEventListener('mousemove', onMove);
-            dragCover.removeEventListener('mouseup', onDone);
-            dragCover.removeEventListener('mouseout', onDone);
-
-            Lib.removeElement(dragCover);
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onDone);
+        document.removeEventListener('mouseout', onDone);
+        document.removeEventListener('touchmove', onMove);
+        document.removeEventListener('touchend', onDone);
+
+        if(cursor) {
+            document.documentElement.style.cursor = cursor;
+            cursor = null;
         }
 
-        else {
-            dragCover.removeEventListener('touchmove', onMove);
-            dragCover.removeEventListener('touchend', onDone);
-
-            if(cursor) {
-                dragCover.documentElement.style.cursor = cursor;
-                cursor = null;
-            }
-        }
-
-
         if(!gd._dragging) {
             gd._dragged = false;
             return;

test/jasmine/assets/touch_event.js

@@ -0,0 +1,44 @@
+var Lib = require('../../../src/lib');
+
+module.exports = function(type, x, y, opts) {
+    var el = (opts && opts.element) || document.elementFromPoint(x, y),
+        ev;
+
+    var touchObj = new Touch({
+        identifier: Date.now(),
+        target: el,
+        clientX: x,
+        clientY: y,
+        radiusX: 2.5,
+        radiusY: 2.5,
+        rotationAngle: 10,
+        force: 0.5,
+    });
+
+    var fullOpts = {
+        touches: [touchObj],
+        targetTouches: [],
+        changedTouches: [touchObj],
+        bubbles: true
+    };
+
+    if(opts && opts.altKey) {
+        fullOpts.altKey = opts.altKey;
+    }
+    if(opts && opts.ctrlKey) {
+        fullOpts.ctrlKey = opts.ctrlKey;
+    }
+    if(opts && opts.metaKey) {
+        fullOpts.metaKey = opts.metaKey;
+    }
+    if(opts && opts.shiftKey) {
+        fullOpts.shiftKey = opts.shiftKey;
+    }
+
+
+    ev = new window.TouchEvent(type, Lib.extendFlat({}, fullOpts, opts));
+
+    el.dispatchEvent(ev);
+
+    return el;
+};

test/jasmine/tests/select_test.js

@@ -7,6 +7,7 @@ var doubleClick = require('../assets/double_click');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var mouseEvent = require('../assets/mouse_event');
+var touchEvent = require('../assets/touch_event');
 var customMatchers = require('../assets/custom_matchers');
 
 
@@ -22,9 +23,23 @@ describe('select box and lasso', function() {
 
     afterEach(destroyGraphDiv);
 
-    function drag(path) {
+    function drag(path, options) {
         var len = path.length;
 
+        if(!options) options = {type: 'mouse'};
+
+        if(options.type === 'touch') {
+            touchEvent('touchstart', path[0][0], path[0][1]);
+
+            path.slice(1, len).forEach(function(pt) {
+                touchEvent('touchmove', pt[0], pt[1]);
+            });
+
+            touchEvent('touchend', path[len - 1][0], path[len - 1][1]);
+
+            return;
+        }
+
         mouseEvent('mousemove', path[0][0], path[0][1]);
         mouseEvent('mousedown', path[0][0], path[0][1]);
 
@@ -299,6 +314,50 @@ describe('select box and lasso', function() {
                 done();
             });
         });
+
+        it('should trigger selecting/selected/deselect events for touches', function(done) {
+            var selectingCnt = 0,
+                selectingData;
+            gd.on('plotly_selecting', function(data) {
+                selectingCnt++;
+                selectingData = data;
+            });
+
+            var selectedCnt = 0,
+                selectedData;
+            gd.on('plotly_selected', function(data) {
+                selectedCnt++;
+                selectedData = data;
+            });
+
+            var doubleClickData;
+            gd.on('plotly_deselect', function(data) {
+                doubleClickData = data;
+            });
+
+            drag(lassoPath, {type: 'touch'});
+
+            expect(selectingCnt).toEqual(3, 'with the correct selecting count');
+            assertEventData(selectingData.points, [{
+                curveNumber: 0,
+                pointNumber: 10,
+                x: 0.099,
+                y: 2.75
+            }], 'with the correct selecting points (1)');
+
+            expect(selectedCnt).toEqual(1, 'with the correct selected count');
+            assertEventData(selectedData.points, [{
+                curveNumber: 0,
+                pointNumber: 10,
+                x: 0.099,
+                y: 2.75,
+            }], 'with the correct selected points (2)');
+
+            doubleClick(250, 200).then(function() {
+                expect(doubleClickData).toBe(null, 'with the correct deselect data');
+                done();
+            });
+        });
     });
 
     it('should skip over non-visible traces', function(done) {