Merge pull request #3424 from plotly/scrollzoom-patch

Do not disable scrollZoom scroll{Width,Height} > client{Width,Height}

Author: etpinard

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;

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);
+        });
+    });
 });