From 4edb47b48afaa0455034219fc2b54b66e57d00fa Mon Sep 17 00:00:00 2001 From: Jon Funkhouser Date: Fri, 26 Oct 2018 13:10:54 -0700 Subject: [PATCH 1/4] add false as a valid dragmode value --- src/components/fx/layout_attributes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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: [ From 4f3270ec6b6883eea5285752b218ea9a897d7f77 Mon Sep 17 00:00:00 2001 From: Jon Funkhouser Date: Fri, 26 Oct 2018 13:30:52 -0700 Subject: [PATCH 2/4] allow mouse/touch events to pass through when dragmode is false --- src/components/dragelement/index.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) 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); } From dfaa1a3d4526b1d0fcd6d2af11b09fc204cf380a Mon Sep 17 00:00:00 2001 From: Jon Funkhouser Date: Fri, 26 Oct 2018 14:25:57 -0700 Subject: [PATCH 3/4] added a test to check that move event handlers are not called when dragmode === false --- test/jasmine/tests/dragelement_test.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) 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() { From 174d2b2575fa3e25f94bb878f4cc1c5ec1e53f0b Mon Sep 17 00:00:00 2001 From: Jon Funkhouser Date: Tue, 6 Nov 2018 10:50:55 -0800 Subject: [PATCH 4/4] add hover test when dragMode = false MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ‘mousemove’ events should emit ‘plotly_hover’ events --- test/jasmine/tests/hover_label_test.js | 28 ++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) 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); + }); +});