fix #2387 - prevent legend scrolling from scrollBox drag or right click

Author: alexcjohnson

src/components/dragelement/index.js

@@ -135,7 +135,7 @@ dragElement.init = function init(options) {
         startY = offset[1];
         initialTarget = e.target;
         initialEvent = e;
-        rightClick = (e.buttons && e.buttons === 2) || e.ctrlKey;
+        rightClick = e.buttons === 2 || e.ctrlKey;
 
         newMouseDownTime = (new Date()).getTime();
         if(newMouseDownTime - gd._mouseDownTime < DBLCLICKDELAY) {

src/components/legend/constants.js

@@ -9,7 +9,7 @@
 'use strict';
 
 module.exports = {
-    scrollBarWidth: 4,
+    scrollBarWidth: 6,
     scrollBarHeight: 20,
     scrollBarColor: '#808BA4',
     scrollBarMargin: 4

src/components/legend/draw.js

@@ -94,10 +94,10 @@ module.exports = function draw(gd) {
     scrollBar.enter().append('rect')
         .attr({
             'class': 'scrollbar',
-            'rx': 20,
-            'ry': 2,
-            'width': 0,
-            'height': 0
+            rx: 20,
+            ry: 3,
+            width: 0,
+            height: 0
         })
         .call(Color.fill, '#808BA4');
 
@@ -283,8 +283,12 @@ module.exports = function draw(gd) {
         scrollBox.on('.drag', null);
 
         var drag = d3.behavior.drag().on('drag', function() {
+            var e3 = d3.event;
+            var e = e3.sourceEvent;
+            if(e.buttons === 2 || e.ctrlKey) return;
+
             scrollBarY = Lib.constrain(
-                d3.event.y - constants.scrollBarHeight / 2,
+                e3.y - constants.scrollBarHeight / 2,
                 constants.scrollBarMargin,
                 constants.scrollBarMargin + scrollBarYMax);
             scrollBoxY = - (scrollBarY - constants.scrollBarMargin) /
@@ -293,7 +297,6 @@ module.exports = function draw(gd) {
         });
 
         scrollBar.call(drag);
-        scrollBox.call(drag);
     }
 
 

test/jasmine/tests/legend_scroll_test.js

@@ -7,6 +7,7 @@ var d3 = require('d3');
 var createGraph = require('../assets/create_graph_div');
 var destroyGraph = require('../assets/destroy_graph_div');
 var getBBox = require('../assets/get_bbox');
+var mouseEvent = require('../assets/mouse_event');
 var mock = require('../../image/mocks/legend_scroll.json');
 
 describe('The legend', function() {
@@ -76,18 +77,18 @@ describe('The legend', function() {
         });
 
         it('should scroll when there\'s a wheel event', function() {
-            var legend = getLegend(),
-                scrollBox = getScrollBox(),
-                legendHeight = getLegendHeight(gd),
-                scrollBoxYMax = gd._fullLayout.legend._height - legendHeight,
-                scrollBarYMax = legendHeight -
-                    constants.scrollBarHeight -
-                    2 * constants.scrollBarMargin,
-                initialDataScroll = scrollBox.getAttribute('data-scroll'),
-                wheelDeltaY = 100,
-                finalDataScroll = '' + Lib.constrain(initialDataScroll -
-                    wheelDeltaY / scrollBarYMax * scrollBoxYMax,
-                    -scrollBoxYMax, 0);
+            var legend = getLegend();
+            var scrollBox = getScrollBox();
+            var legendHeight = getLegendHeight(gd);
+            var scrollBoxYMax = gd._fullLayout.legend._height - legendHeight;
+            var scrollBarYMax = legendHeight -
+                constants.scrollBarHeight -
+                2 * constants.scrollBarMargin;
+            var initialDataScroll = scrollBox.getAttribute('data-scroll');
+            var wheelDeltaY = 100;
+            var finalDataScroll = '' + Lib.constrain(initialDataScroll -
+                wheelDeltaY / scrollBarYMax * scrollBoxYMax,
+                -scrollBoxYMax, 0);
 
             legend.dispatchEvent(scrollTo(wheelDeltaY));
 
@@ -96,6 +97,69 @@ describe('The legend', function() {
                 'translate(0, ' + finalDataScroll + ')');
         });
 
+        function dragScroll(element, rightClick) {
+            var scrollBox = getScrollBox();
+            var scrollBar = getScrollBar();
+            var legendHeight = getLegendHeight(gd);
+            var scrollBoxYMax = gd._fullLayout.legend._height - legendHeight;
+            var scrollBarYMax = legendHeight -
+                constants.scrollBarHeight -
+                2 * constants.scrollBarMargin;
+            var initialDataScroll = scrollBox.getAttribute('data-scroll');
+            var dy = 50;
+            var finalDataScroll = '' + Lib.constrain(initialDataScroll -
+                dy / scrollBarYMax * scrollBoxYMax,
+                -scrollBoxYMax, 0);
+
+            var scrollBarBB = scrollBar.getBoundingClientRect();
+            var y0 = scrollBarBB.top + scrollBarBB.height / 2;
+            var y1 = y0 + dy;
+
+            var elBB = element.getBoundingClientRect();
+            var x = elBB.left + elBB.width / 2;
+
+            var opts = {element: element};
+            if(rightClick) {
+                opts.button = 2;
+                opts.buttons = 2;
+            }
+
+            mouseEvent('mousedown', x, y0, opts);
+            mouseEvent('mousemove', x, y1, opts);
+            mouseEvent('mouseup', x, y1, opts);
+
+            expect(finalDataScroll).not.toBe(initialDataScroll);
+
+            return finalDataScroll;
+        }
+
+        it('should scroll on dragging the scrollbar', function() {
+            var finalDataScroll = dragScroll(getScrollBar());
+            var scrollBox = getScrollBox();
+
+            expect(scrollBox.getAttribute('data-scroll')).toBe(finalDataScroll);
+            expect(scrollBox.getAttribute('transform')).toBe(
+                'translate(0, ' + finalDataScroll + ')');
+        });
+
+        it('should not scroll on dragging the scrollbox', function() {
+            var scrollBox = getScrollBox();
+            var finalDataScroll = dragScroll(scrollBox);
+
+            expect(scrollBox.getAttribute('data-scroll')).not.toBe(finalDataScroll);
+            expect(scrollBox.getAttribute('transform')).not.toBe(
+                'translate(0, ' + finalDataScroll + ')');
+        });
+
+        it('should not scroll on dragging the scrollbar with a right click', function() {
+            var finalDataScroll = dragScroll(getScrollBar(), true);
+            var scrollBox = getScrollBox();
+
+            expect(scrollBox.getAttribute('data-scroll')).not.toBe(finalDataScroll);
+            expect(scrollBox.getAttribute('transform')).not.toBe(
+                'translate(0, ' + finalDataScroll + ')');
+        });
+
         it('should keep the scrollbar position after a toggle event', function(done) {
             var legend = getLegend(),
                 scrollBox = getScrollBox(),