diff --git a/src/plots/cartesian/dragbox.js b/src/plots/cartesian/dragbox.js index e8110756b0c..77c6a36648f 100644 --- a/src/plots/cartesian/dragbox.js +++ b/src/plots/cartesian/dragbox.js @@ -430,17 +430,8 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) { return; } - var pc = gd.querySelector('.plotly'); - recomputeAxisLists(); - // if the plot has scrollbars (more than a tiny excess) - // disable scrollzoom too. - if(pc.scrollHeight - pc.clientHeight > 10 || - pc.scrollWidth - pc.clientWidth > 10) { - return; - } - clearTimeout(redrawTimer); var wheelDelta = -e.deltaY; diff --git a/test/jasmine/tests/config_test.js b/test/jasmine/tests/config_test.js index 2c8b10d8c39..2a06969f162 100644 --- a/test/jasmine/tests/config_test.js +++ b/test/jasmine/tests/config_test.js @@ -1,12 +1,15 @@ var Plotly = require('@lib/index'); var Plots = Plotly.Plots; var Lib = require('@src/lib'); + +var d3 = require('d3'); var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var click = require('../assets/click'); var mouseEvent = require('../assets/mouse_event'); var failTest = require('../assets/fail_test'); var delay = require('../assets/delay'); + var RESIZE_DELAY = 300; describe('config argument', function() { @@ -760,4 +763,88 @@ describe('config argument', function() { .then(done); }); }); + + describe('scrollZoom interactions:', function() { + var gd; + + afterEach(destroyGraphDiv); + + function _scroll() { + var mainDrag = d3.select('.nsewdrag[data-subplot="xy"]').node(); + mouseEvent('scroll', 200, 200, {deltaY: -200, element: mainDrag}); + } + + it('should not disable scrollZoom when *responsive:true*', function(done) { + gd = document.createElement('div'); + gd.id = 'graph'; + gd.style.height = '85vh'; + gd.style.minHeight = '300px'; + document.body.appendChild(gd); + + // locking down fix for: + // https://github.com/plotly/plotly.js/issues/3337 + + var xrng0; + var yrng0; + + Plotly.newPlot(gd, [{ + y: [1, 2, 1] + }], {}, { + scrollZoom: true, + responsive: true + }) + .then(function() { + xrng0 = gd._fullLayout.xaxis.range.slice(); + yrng0 = gd._fullLayout.yaxis.range.slice(); + }) + .then(_scroll) + .then(function() { + var xrng = gd._fullLayout.xaxis.range; + expect(xrng[0]).toBeGreaterThan(xrng0[0], 'scrolled x-range[0]'); + expect(xrng[1]).toBeLessThan(xrng0[1], 'scrolled x-range[1]'); + + var yrng = gd._fullLayout.yaxis.range; + expect(yrng[0]).toBeGreaterThan(yrng0[0], 'scrolled y-range[0]'); + expect(yrng[1]).toBeLessThan(yrng0[1], 'scrolled y-range[1]'); + }) + .catch(failTest) + .then(done); + }); + + it('should not disable scrollZoom when page is made scrollable by large graph', function(done) { + gd = document.createElement('div'); + gd.id = 'graph'; + document.body.appendChild(gd); + + // locking down fix for: + // https://github.com/plotly/plotly.js/issues/2371 + + var xrng0; + var yrng0; + + Plotly.newPlot(gd, [{ + y: [1, 2, 1] + }], { + width: 2 * window.innerWidth + }, { + scrollZoom: true + }) + .then(function() { + xrng0 = gd._fullLayout.xaxis.range.slice(); + yrng0 = gd._fullLayout.yaxis.range.slice(); + }) + .then(_scroll) + .then(function() { + var xrng = gd._fullLayout.xaxis.range; + expect(xrng[0]).toBeGreaterThan(xrng0[0], 'scrolled x-range[0]'); + expect(xrng[1]).toBeLessThan(xrng0[1], 'scrolled x-range[1]'); + + var yrng = gd._fullLayout.yaxis.range; + expect(yrng[0]).toBeGreaterThan(yrng0[0], 'scrolled y-range[0]'); + expect(yrng[1]).toBeLessThan(yrng0[1], 'scrolled y-range[1]'); + }) + .catch(failTest) + .then(done); + }); + }); });