Merge pull request #3170 from jonfunkhouser/dragmode_false

Add dragmode: false
plotly · Nov 9, 2018 · 9f98681 · 9f98681
2 parents 889087d + 174d2b2
commit 9f98681
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 9 deletions.
diff --git a/src/components/dragelement/index.js b/src/components/dragelement/index.js
@@ -124,8 +124,6 @@ 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;
@@ -167,11 +165,15 @@ dragElement.init = function init(options) {
             document.documentElement.style.cursor = window.getComputedStyle(element).cursor;
         }
 
-        document.addEventListener('mousemove', onMove);
         document.addEventListener('mouseup', onDone);
-        document.addEventListener('touchmove', onMove);
         document.addEventListener('touchend', onDone);
 
+        if(options.dragmode !== false) {
+            e.preventDefault();
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('touchmove', onMove);
+        }
+
         return;
     }
 
@@ -195,13 +197,15 @@ dragElement.init = function init(options) {
     }
 
     function onDone(e) {
-        document.removeEventListener('mousemove', onMove);
+        if(options.dragmode !== false) {
+            e.preventDefault();
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('touchmove', onMove);
+        }
+
         document.removeEventListener('mouseup', onDone);
-        document.removeEventListener('touchmove', onMove);
         document.removeEventListener('touchend', onDone);
 
-        e.preventDefault();
-
         if(hasHover) {
             Lib.removeElement(dragCover);
         }

diff --git a/src/components/fx/layout_attributes.js b/src/components/fx/layout_attributes.js
@@ -44,7 +44,7 @@ module.exports = {
     dragmode: {
         valType: 'enumerated',
         role: 'info',
-        values: ['zoom', 'pan', 'select', 'lasso', 'orbit', 'turntable'],
+        values: ['zoom', 'pan', 'select', 'lasso', 'orbit', 'turntable', false],
         dflt: 'zoom',
         editType: 'modebar',
         description: [

diff --git a/test/jasmine/tests/dragelement_test.js b/test/jasmine/tests/dragelement_test.js
@@ -4,6 +4,7 @@ var d3 = require('d3');
 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');
 
 
 describe('dragElement', function() {
@@ -205,6 +206,30 @@ describe('dragElement', function() {
 
         expect(mockObj.dummy).not.toHaveBeenCalled();
     });
+
+    it('should not register move event handler when dragmode is false', function() {
+        var moveCalls = 0;
+        var options = {
+            element: this.element,
+            gd: this.gd,
+            dragmode: false,
+            moveFn: function() {
+                moveCalls++;
+            }
+        };
+        dragElement.init(options);
+        mouseEvent('mousedown', this.x, this.y);
+        mouseEvent('mousemove', this.x + 10, this.y + 10);
+        mouseEvent('mouseup', this.x, this.y);
+
+        expect(moveCalls).toBe(0);
+
+        touchEvent('touchstart', this.x, this.y);
+        touchEvent('touchmove', this.x + 10, this.y + 10);
+        touchEvent('touchend', this.x, this.y);
+
+        expect(moveCalls).toBe(0);
+    });
 });
 
 describe('dragElement.getCursor', function() {

diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js
@@ -2785,3 +2785,31 @@ describe('touch devices', function() {
         });
     });
 });
+
+describe('dragmode: false', function() {
+    var data = [{x: [1, 2, 3], y: [1, 3, 2], type: 'bar'}];
+    var layout = {width: 600, height: 400, dragmode: false};
+    var gd;
+
+    beforeEach(function(done) {
+        gd = createGraphDiv();
+        Plotly.plot(gd, data, layout).then(done);
+    });
+    afterEach(destroyGraphDiv);
+
+    it('should emit hover events on mousemove', function(done) {
+        var hoverHandler = jasmine.createSpy('hover');
+        gd.on('plotly_hover', hoverHandler);
+        Promise.resolve()
+            .then(function() {
+                mouseEvent('mousemove', 105, 300);
+                mouseEvent('mousemove', 108, 303);
+            })
+            .then(delay(HOVERMINTIME * 1.1))
+            .then(function() {
+                expect(hoverHandler).toHaveBeenCalled();
+            })
+            .catch(failTest)
+            .then(done);
+    });
+});