diff --git a/src/components/dragelement/index.js b/src/components/dragelement/index.js index 9d9443f31d0..2d72044e136 100644 --- 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 index 2429a5541f5..094d25ba545 100644 --- 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 index 757ba6a6a9b..4e4811e8b9e 100644 --- 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 index 56483c1dfa4..eefb936bb74 100644 --- 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); + }); +});