stop eating scroll events that the table didn't use - non-static case

Author: alexcjohnson

src/traces/table/plot.js

@@ -59,9 +59,11 @@ module.exports = function plot(gd, wrappedTraceHolders) {
         .on('mousewheel', function(d) {
             if(d.scrollbarState.wheeling) return;
             d.scrollbarState.wheeling = true;
-            d3.event.stopPropagation();
-            d3.event.preventDefault();
-            makeDragRow(gd, tableControlView, null, d.scrollY + d3.event.deltaY)(d);
+            var noChange = makeDragRow(gd, tableControlView, null, d.scrollY + d3.event.deltaY)(d);
+            if(!noChange) {
+                d3.event.stopPropagation();
+                d3.event.preventDefault();
+            }
             d.scrollbarState.wheeling = false;
         })
         .call(renderScrollbarKit, gd, true);
@@ -711,13 +713,20 @@ function updateBlockYPosition(gd, cellsColumnBlock, tableControlView) {
 
 function makeDragRow(gd, allTableControlView, optionalMultiplier, optionalPosition) {
     return function dragRow(eventD) {
-        // may come from whicever DOM event target: drag, wheel, bar... eventD corresponds to event target
+        // may come from whichever DOM event target: drag, wheel, bar... eventD corresponds to event target
         var d = eventD.calcdata ? eventD.calcdata : eventD;
         var tableControlView = allTableControlView.filter(function(dd) {return d.key === dd.key;});
         var multiplier = optionalMultiplier || d.scrollbarState.dragMultiplier;
+
+        var initialScrollY = d.scrollY;
+
         d.scrollY = optionalPosition === void(0) ? d.scrollY + multiplier * d3.event.dy : optionalPosition;
         var cellsColumnBlock = tableControlView.selectAll('.' + c.cn.yColumn).selectAll('.' + c.cn.columnBlock).filter(cellsBlock);
         updateBlockYPosition(gd, cellsColumnBlock, tableControlView);
+
+        // return false if we've "used" the scroll, ie it did something,
+        // so the event shouldn't bubble (if appropriate)
+        return d.scrollY === initialScrollY;
     };
 }
 

test/jasmine/assets/mouse_event.js

@@ -36,8 +36,11 @@ module.exports = function(type, x, y, opts) {
     var el = (opts && opts.element) || document.elementFromPoint(x, y),
         ev;
 
-    if(type === 'scroll') {
-        ev = new window.WheelEvent('wheel', Lib.extendFlat({}, fullOpts, opts));
+    if(type === 'scroll' || type === 'mousewheel') {
+        // somehow table needs this to be mouswheel but others need wheel.
+        // yet they all work the same in the browser?
+        type = (type === 'scroll') ? 'wheel' : 'mousewheel';
+        ev = new window.WheelEvent(type, Lib.extendFlat({}, fullOpts, opts));
     } else {
         ev = new window.MouseEvent(type, fullOpts);
     }

test/jasmine/tests/table_test.js

@@ -9,6 +9,7 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test');
 var supplyAllDefaults = require('../assets/supply_defaults');
+var mouseEvent = require('../assets/mouse_event');
 
 var mockMulti = require('@mocks/table_latex_multitrace_scatter.json');
 
@@ -385,8 +386,7 @@ describe('table', function() {
     });
 
     describe('more restyling tests with scenegraph queries', function() {
-        var mockCopy,
-            gd;
+        var mockCopy, gd;
 
         beforeEach(function(done) {
             mockCopy = Lib.extendDeep({}, mock2);
@@ -425,4 +425,72 @@ describe('table', function() {
                 .then(done);
         });
     });
+
+    describe('scroll effects', function() {
+        var mockCopy, gd, gdWheelEventCount;
+
+        beforeEach(function(done) {
+            mockCopy = Lib.extendDeep({}, mockMulti);
+            gd = createGraphDiv();
+            gdWheelEventCount = 0;
+            Plotly.plot(gd, mockCopy.data, mockCopy.layout)
+            .then(function() {
+                gd.addEventListener('mousewheel', function(evt) {
+                    gdWheelEventCount++;
+                    // make sure we don't *really* scroll the page.
+                    // that would be annoying!
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                });
+            })
+            .then(done);
+        });
+
+        function assertBubbledEvents(cnt) {
+            expect(gdWheelEventCount).toBe(cnt);
+            gdWheelEventCount = 0;
+        }
+
+        function getCenter(el) {
+            var bBox = el.getBoundingClientRect();
+            // actually above center, since these bboxes are bigger than the
+            // visible table area
+            return {x: bBox.left + bBox.width / 2, y: bBox.top + bBox.height / 4};
+        }
+
+        function scroll(pos, dy) {
+            mouseEvent('mousemove', pos.x, pos.y);
+            mouseEvent('mousewheel', pos.x, pos.y, {deltaX: 0, deltaY: dy});
+        }
+
+        it('bubbles scroll events iff they did not scroll a table', function() {
+            var allTableControls = document.querySelectorAll('.' + cn.tableControlView);
+            var smallCenter = getCenter(allTableControls[0]);
+            var bigCenter = getCenter(allTableControls[1]);
+
+            // table with no scroll bars - events always bubble
+            scroll(smallCenter, -20);
+            assertBubbledEvents(1);
+            scroll(smallCenter, 20);
+            assertBubbledEvents(1);
+
+            // table with scrollbars - events bubble if we don't use them
+            scroll(bigCenter, -20); // up from the top - bubbles
+            assertBubbledEvents(1);
+            scroll(bigCenter, 20); // down from the top - scrolled, so no bubble
+            assertBubbledEvents(0);
+            scroll(bigCenter, -40); // back to the top, with extra dy discarded
+            assertBubbledEvents(0);
+            scroll(bigCenter, -20); // now it bubbles
+            assertBubbledEvents(1);
+            scroll(bigCenter, 200000); // all the way to the bottom
+            assertBubbledEvents(0);
+            scroll(bigCenter, 20); // now it bubbles from the bottom..
+            assertBubbledEvents(1);
+        });
+
+        it('does not scroll any tables with staticPlot', function(done) {
+            // TODO
+        });
+    });
 });