Improve drag and wheel of legend scrollbars

n-riesco · n-riesco · commit ab15b52ee161 · 2016-04-13T01:44:39.000+01:00
* Now drag events make the scrollbar follow the mouse position.

* Now wheel events move the scrollbar position as fast as drag events.
diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js
@@ -265,36 +265,39 @@ module.exports = function draw(gd) {
             scrollBox.attr('data-scroll',0);
         }
 
-        scrollHandler(0,legendHeight);
+        var scrollBarYMax = legendHeight - constants.scrollBarHeight,
+            scrollBoxYMax = opts.height - legendHeight;
 
-        legend.on('wheel',null);
+        scrollHandler(0, 0);
 
+        legend.on('wheel',null);
         legend.on('wheel', function() {
-            var e = d3.event;
-            e.preventDefault();
-            scrollHandler(e.deltaY / 20, legendHeight);
+            var scrollBoxY = Lib.constrain(
+                scrollBox.attr('data-scroll') -
+                    d3.event.deltaY / scrollBarYMax * scrollBoxYMax,
+                -scrollBoxYMax, 0),
+                scrollBarY = - scrollBoxY / scrollBoxYMax * scrollBarYMax;
+            scrollHandler(scrollBarY, scrollBoxY);
+            d3.event.preventDefault();
         });
 
         scrollBar.on('.drag',null);
         scrollBox.on('.drag',null);
-        var drag = d3.behavior.drag()
-            .on('drag', function() {
-                scrollHandler(d3.event.dy, legendHeight);
-            });
+        var drag = d3.behavior.drag().on('drag', function() {
+            var scrollBarY = Lib.constrain(
+                    d3.event.y - constants.scrollBarHeight / 2,
+                    0, scrollBarYMax),
+                scrollBoxY = - scrollBarY / scrollBarYMax * scrollBoxYMax;
+            scrollHandler(scrollBarY, scrollBoxY);
+        });
 
         scrollBar.call(drag);
         scrollBox.call(drag);
 
     }
 
 
-    function scrollHandler(delta, legendHeight) {
-
-        var scrollBarTrack = legendHeight - constants.scrollBarHeight - 2 * constants.scrollBarMargin,
-            translateY = scrollBox.attr('data-scroll'),
-            scrollBoxY = Lib.constrain(translateY - delta, legendHeight-opts.height, 0),
-            scrollBarY = -scrollBoxY / (opts.height - legendHeight) * scrollBarTrack + constants.scrollBarMargin;
-
+    function scrollHandler(scrollBarY, scrollBoxY) {
         scrollBox.attr('data-scroll', scrollBoxY);
         scrollBox.attr('transform', 'translate(0, ' + scrollBoxY + ')');
         scrollBar.call(
