grab the legend scrollbar at the cursor, not at its middle

Author: alexcjohnson

src/components/legend/draw.js

@@ -282,13 +282,19 @@ module.exports = function draw(gd) {
         scrollBar.on('.drag', null);
         scrollBox.on('.drag', null);
 
-        var drag = d3.behavior.drag().on('drag', function() {
-            var e3 = d3.event;
-            var e = e3.sourceEvent;
+        var eventY0, scrollBarY0;
+
+        var drag = d3.behavior.drag()
+        .on('dragstart', function() {
+            eventY0 = d3.event.sourceEvent.clientY;
+            scrollBarY0 = scrollBarY;
+        })
+        .on('drag', function() {
+            var e = d3.event.sourceEvent;
             if(e.buttons === 2 || e.ctrlKey) return;
 
             scrollBarY = Lib.constrain(
-                e3.y - constants.scrollBarHeight / 2,
+                e.clientY - eventY0 + scrollBarY0,
                 constants.scrollBarMargin,
                 constants.scrollBarMargin + scrollBarYMax);
             scrollBoxY = - (scrollBarY - constants.scrollBarMargin) /

test/jasmine/tests/legend_scroll_test.js

@@ -79,10 +79,11 @@ describe('The legend', function() {
         it('should scroll when there\'s a wheel event', function() {
             var legend = getLegend();
             var scrollBox = getScrollBox();
+            var scrollBar = getScrollBar();
             var legendHeight = getLegendHeight(gd);
             var scrollBoxYMax = gd._fullLayout.legend._height - legendHeight;
             var scrollBarYMax = legendHeight -
-                constants.scrollBarHeight -
+                scrollBar.getBoundingClientRect().height -
                 2 * constants.scrollBarMargin;
             var initialDataScroll = scrollBox.getAttribute('data-scroll');
             var wheelDeltaY = 100;
@@ -100,19 +101,19 @@ describe('The legend', function() {
         function dragScroll(element, rightClick) {
             var scrollBox = getScrollBox();
             var scrollBar = getScrollBar();
+            var scrollBarBB = scrollBar.getBoundingClientRect();
             var legendHeight = getLegendHeight(gd);
             var scrollBoxYMax = gd._fullLayout.legend._height - legendHeight;
             var scrollBarYMax = legendHeight -
-                constants.scrollBarHeight -
+                scrollBarBB.height -
                 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 y0 = scrollBarBB.top + scrollBarBB.height / 5;
             var y1 = y0 + dy;
 
             var elBB = element.getBoundingClientRect();