From dc33622596b1a788e759622baa10e9a550caf841 Mon Sep 17 00:00:00 2001 From: marfoldi Date: Tue, 9 Oct 2018 12:01:37 +0200 Subject: [PATCH 1/5] NEW - Issue #2371: Not disabling scrollZoom Used to disable scrollzoom when the plot had scrollbars. Ended up with a plot which is not zoomable with mouse scroll on a page which had additional content (had a scrollbar). --- src/plots/cartesian/dragbox.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/plots/cartesian/dragbox.js b/src/plots/cartesian/dragbox.js index 6f8d03c8cc2..486fa4a97f1 100644 --- a/src/plots/cartesian/dragbox.js +++ b/src/plots/cartesian/dragbox.js @@ -434,13 +434,6 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) { 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; From 00aa9c87d700c8bca0f40fa2ae34df92fc77d4bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Wed, 9 Jan 2019 13:41:55 -0500 Subject: [PATCH 2/5] fix lint --- src/plots/cartesian/dragbox.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/plots/cartesian/dragbox.js b/src/plots/cartesian/dragbox.js index 486fa4a97f1..76f9b2cb52b 100644 --- a/src/plots/cartesian/dragbox.js +++ b/src/plots/cartesian/dragbox.js @@ -430,8 +430,6 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) { return; } - var pc = gd.querySelector('.plotly'); - recomputeAxisLists(); clearTimeout(redrawTimer); From 3ee07987d59a9bea8d39e70f1b5e77e8aa8f813e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 15 Jan 2019 16:40:19 -0500 Subject: [PATCH 3/5] add responsize + scrollZoom test --- test/jasmine/tests/config_test.js | 53 +++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/test/jasmine/tests/config_test.js b/test/jasmine/tests/config_test.js index 2c8b10d8c39..f6130aef171 100644 --- a/test/jasmine/tests/config_test.js +++ b/test/jasmine/tests/config_test.js @@ -1,6 +1,8 @@ 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'); @@ -760,4 +762,55 @@ describe('config argument', function() { .then(done); }); }); + + describe('scrollZoom interactions:', function() { + var gd; + + afterEach(function() { + Plotly.purge(gd); + 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); + }); + }); }); From 09e0a5d8b58a7f2e67a4d7237f9c5358349cb92a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 15 Jan 2019 16:40:37 -0500 Subject: [PATCH 4/5] add scollZoom on scrollable page test --- test/jasmine/tests/config_test.js | 37 +++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/test/jasmine/tests/config_test.js b/test/jasmine/tests/config_test.js index f6130aef171..f97971811a6 100644 --- a/test/jasmine/tests/config_test.js +++ b/test/jasmine/tests/config_test.js @@ -9,6 +9,7 @@ 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() { @@ -812,5 +813,41 @@ describe('config argument', function() { .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); + }); }); }); From 8969726bc8bb0708ea3dbd820b79ed2b1f4b0a20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= Date: Tue, 15 Jan 2019 17:04:40 -0500 Subject: [PATCH 5/5] fix scrollZoom test cleanup --- test/jasmine/tests/config_test.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/test/jasmine/tests/config_test.js b/test/jasmine/tests/config_test.js index f97971811a6..2a06969f162 100644 --- a/test/jasmine/tests/config_test.js +++ b/test/jasmine/tests/config_test.js @@ -767,10 +767,7 @@ describe('config argument', function() { describe('scrollZoom interactions:', function() { var gd; - afterEach(function() { - Plotly.purge(gd); - destroyGraphDiv(); - }); + afterEach(destroyGraphDiv); function _scroll() { var mainDrag = d3.select('.nsewdrag[data-subplot="xy"]').node();