Merge pull request #2075 from plotly/drag-outside-window

Drag outside window

Author: alexcjohnson

devtools/test_dashboard/index.html

@@ -19,6 +19,10 @@
   </div>
   <div id="snapshot"></div>
 
+  <!-- uncomment below for IE9/10 support -->
+  <!-- <script>if(typeof window.Int16Array !== 'function')document.write("<scri"+"pt src='../../dist/extras/typedarray.min.js'></scr"+"ipt>");</script>
+  <script>document.write("<scri"+"pt src='../../dist/extras/request_animation_frame.js'></scr"+"ipt>");</script> -->
+
   <script type="text/javascript" src="../../dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script id="source" type="text/javascript" src="../../build/plotly.js"></script>
   <script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>

src/components/dragelement/index.js

@@ -58,10 +58,12 @@ dragElement.unhoverRaw = unhover.raw;
  *          e is the original event
  */
 dragElement.init = function init(options) {
-    var gd = options.gd,
-        numClicks = 1,
-        DBLCLICKDELAY = interactConstants.DBLCLICKDELAY,
-        startX,
+    var gd = options.gd;
+    var numClicks = 1;
+    var DBLCLICKDELAY = interactConstants.DBLCLICKDELAY;
+    var element = options.element;
+
+    var startX,
         startY,
         newMouseDownTime,
         cursor,
@@ -70,10 +72,10 @@ dragElement.init = function init(options) {
 
     if(!gd._mouseDownTime) gd._mouseDownTime = 0;
 
-    options.element.style.pointerEvents = 'all';
+    element.style.pointerEvents = 'all';
 
-    options.element.onmousedown = onStart;
-    options.element.ontouchstart = onStart;
+    element.onmousedown = onStart;
+    element.ontouchstart = onStart;
 
     function onStart(e) {
         // make dragging and dragged into properties of gd
@@ -100,29 +102,28 @@ dragElement.init = function init(options) {
 
         if(hasHover) {
             dragCover = coverSlip();
-            dragCover.style.cursor = window.getComputedStyle(options.element).cursor;
+            dragCover.style.cursor = window.getComputedStyle(element).cursor;
         }
         else {
             // document acts as a dragcover for mobile, bc we can't create dragcover dynamically
             dragCover = document;
             cursor = window.getComputedStyle(document.documentElement).cursor;
-            document.documentElement.style.cursor = window.getComputedStyle(options.element).cursor;
+            document.documentElement.style.cursor = window.getComputedStyle(element).cursor;
         }
 
-        dragCover.addEventListener('mousemove', onMove);
-        dragCover.addEventListener('mouseup', onDone);
-        dragCover.addEventListener('mouseout', onDone);
-        dragCover.addEventListener('touchmove', onMove);
-        dragCover.addEventListener('touchend', onDone);
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onDone);
+        document.addEventListener('touchmove', onMove);
+        document.addEventListener('touchend', onDone);
 
         return Lib.pauseEvent(e);
     }
 
     function onMove(e) {
-        var offset = pointerOffset(e),
-            dx = offset[0] - startX,
-            dy = offset[1] - startY,
-            minDrag = options.minDrag || constants.MINDRAG;
+        var offset = pointerOffset(e);
+        var dx = offset[0] - startX;
+        var dy = offset[1] - startY;
+        var minDrag = options.minDrag || constants.MINDRAG;
 
         if(Math.abs(dx) < minDrag) dx = 0;
         if(Math.abs(dy) < minDrag) dy = 0;
@@ -137,11 +138,10 @@ dragElement.init = function init(options) {
     }
 
     function onDone(e) {
-        dragCover.removeEventListener('mousemove', onMove);
-        dragCover.removeEventListener('mouseup', onDone);
-        dragCover.removeEventListener('mouseout', onDone);
-        dragCover.removeEventListener('touchmove', onMove);
-        dragCover.removeEventListener('touchend', onDone);
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onDone);
+        document.removeEventListener('touchmove', onMove);
+        document.removeEventListener('touchend', onDone);
 
         if(hasHover) {
             Lib.removeElement(dragCover);

test/jasmine/tests/dragelement_test.js

@@ -77,7 +77,7 @@ describe('dragElement', function() {
         expect(args[2]).toBe(true);
     });
 
-    it('should pass dragged and numClicks to doneFn on mouseup & mouseout', function() {
+    it('should pass dragged and numClicks to doneFn on mouseup', function() {
         var args = [];
         var options = {
             element: this.element,
@@ -96,7 +96,7 @@ describe('dragElement', function() {
 
         mouseEvent('mousedown', this.x, this.y);
         mouseEvent('mousemove', this.x + 10, this.y + 10);
-        mouseEvent('mouseout', this.x, this.y);
+        mouseEvent('mouseup', this.x, this.y);
 
         expect(args[0]).toBe(true);
         expect(args[1]).toEqual(2);
@@ -118,7 +118,7 @@ describe('dragElement', function() {
         mouseEvent('mousemove', this.x + 10, this.y + 10);
         expect(countCoverSlip()).toEqual(1);
 
-        mouseEvent('mouseout', this.x, this.y);
+        mouseEvent('mouseup', this.x, this.y);
         expect(countCoverSlip()).toEqual(0);
     });