fix3801 fix legend scrolling on mobile

Author: andrewbaldock

src/components/legend/draw.js

@@ -263,35 +263,68 @@ module.exports = function draw(gd) {
 
                 scrollHandler(scrollBoxY, scrollBarHeight, scrollRatio);
 
+                // scroll legend by mousewheel or touchpad swipe up/down
                 legend.on('wheel', function() {
                     scrollBoxY = Lib.constrain(
                         opts._scrollY +
-                            d3.event.deltaY / scrollBarYMax * scrollBoxYMax,
+                            ((d3.event.deltaY / scrollBarYMax) * scrollBoxYMax),
                         0, scrollBoxYMax);
                     scrollHandler(scrollBoxY, scrollBarHeight, scrollRatio);
                     if(scrollBoxY !== 0 && scrollBoxY !== scrollBoxYMax) {
                         d3.event.preventDefault();
                     }
                 });
 
-                var eventY0, scrollBoxY0;
+                var eventY0, eventY1, scrollBoxY0;
 
-                var drag = d3.behavior.drag()
+                var getScrollBoxDragY = function(scrollBoxY0, eventY0, eventY1) {
+                    var y = ((eventY1 - eventY0) / scrollRatio) + scrollBoxY0;
+                    return Lib.constrain(y, 0, scrollBoxYMax);
+                };
+
+                // scroll legend by dragging scrollBAR
+                var scrollBarDrag = d3.behavior.drag()
                 .on('dragstart', function() {
-                    eventY0 = d3.event.sourceEvent.clientY;
+                    var e = d3.event.sourceEvent;
+                    if(e.type === 'touchstart') {
+                        eventY0 = e.changedTouches[0].clientY;
+                    } else {
+                        eventY0 = e.clientY;
+                    }
                     scrollBoxY0 = scrollBoxY;
                 })
                 .on('drag', function() {
                     var e = d3.event.sourceEvent;
                     if(e.buttons === 2 || e.ctrlKey) return;
-
-                    scrollBoxY = Lib.constrain(
-                        (e.clientY - eventY0) / scrollRatio + scrollBoxY0,
-                        0, scrollBoxYMax);
+                    if(e.type === 'touchmove') {
+                        eventY1 = e.changedTouches[0].clientY;
+                    } else {
+                        eventY1 = e.clientY;
+                    }
+                    scrollBoxY = getScrollBoxDragY(scrollBoxY0, eventY0, eventY1);
                     scrollHandler(scrollBoxY, scrollBarHeight, scrollRatio);
                 });
+                scrollBar.call(scrollBarDrag);
 
-                scrollBar.call(drag);
+                // scroll legend by touch-dragging scrollBOX
+                var scrollBoxTouchDrag = d3.behavior.drag()
+                .on('dragstart', function() {
+                    var e = d3.event.sourceEvent;
+                    if(e.type === 'touchstart') {
+                        eventY0 = e.changedTouches[0].clientY;
+                        scrollBoxY0 = scrollBoxYMax - scrollBoxY; // inverted for natural-scroll
+                    }
+                })
+                .on('drag', function() {
+                    var e = d3.event.sourceEvent;
+                    if(e.type === 'touchmove') {
+                        eventY1 = e.changedTouches[0].clientY;
+                        scrollBoxY = getScrollBoxDragY(scrollBoxY0, eventY0, eventY1);
+                        var naturalScrollBoxY = scrollBoxYMax - scrollBoxY; // inverted for natural-scroll
+                        scrollHandler(naturalScrollBoxY, scrollBarHeight, scrollRatio);
+                    }
+                });
+                scrollBox.call(scrollBoxTouchDrag);
             }
 
 

test/jasmine/tests/legend_scroll_test.js

@@ -110,7 +110,7 @@ describe('The legend', function() {
                 'translate(0, ' + -finalDataScroll + ')');
         });
 
-        function dragScroll(element, rightClick) {
+        function dragScroll(element, rightClick=false, mainClick=false) {
             var scrollBar = getScrollBar();
             var scrollBarBB = scrollBar.getBoundingClientRect();
             var legendHeight = getLegendHeight(gd);
@@ -131,6 +131,10 @@ describe('The legend', function() {
             var x = elBB.left + elBB.width / 2;
 
             var opts = {element: element};
+            if(mainClick) {
+                opts.button = 0;
+                opts.buttons = 2;
+            }
             if(rightClick) {
                 opts.button = 2;
                 opts.buttons = 2;
@@ -155,9 +159,9 @@ describe('The legend', function() {
                 'translate(0, ' + -dataScroll + ')');
         });
 
-        it('should not scroll on dragging the scrollbox', function() {
+        it('should not scroll on dragging the scrollbox with a mouse', function() {
             var scrollBox = getScrollBox();
-            var finalDataScroll = dragScroll(scrollBox);
+            var finalDataScroll = dragScroll(scrollBox, false, true);
 
             var dataScroll = getScroll(gd);
             expect(dataScroll).not.toBeCloseTo(finalDataScroll, 3);