incremental progress toward working scrolling legend after resize

Author: etpinard

src/components/legend/draw.js

@@ -56,8 +56,9 @@ module.exports = function draw(gd) {
         });
 
     var clipPath = fullLayout._topdefs.selectAll('#' + clipId)
-        .data([0])
-      .enter().append('clipPath')
+        .data([0]);
+    
+    clipPath.enter().append('clipPath')
         .attr('id', clipId)
         .append('rect');
 
@@ -210,7 +211,7 @@ module.exports = function draw(gd) {
 
     legend.attr('transform', 'translate(' + lx + ',' + ly + ')');
 
-    clipPath.attr({
+    clipPath.select('rect').attr({
         width: opts.width,
         height: scrollheight,
         x: 0,
@@ -220,49 +221,57 @@ module.exports = function draw(gd) {
     legend.call(Drawing.setClipUrl, clipId);
 
     // If scrollbar should be shown.
-    if(gd.firstRender && opts.height - scrollheight > 0 && !gd._context.staticPlot) {
+    if(opts.height - scrollheight > 0 && !gd._context.staticPlot) {
+      
         bg.attr({
             width: opts.width - 2 * opts.borderwidth + constants.scrollBarWidth
         });
 
         clipPath.attr({
             width: opts.width + constants.scrollBarWidth
         });
+        
+        
+        // Move scrollbar to starting position
+        scrollBar.call(
+            Drawing.setRect,
+            opts.width - (constants.scrollBarWidth + constants.scrollBarMargin),
+            constants.scrollBarMargin,
+            constants.scrollBarWidth,
+            constants.scrollBarHeight
+        );
+        
+        legend.on('wheel',null);
 
-        legend.node().addEventListener('wheel', function(e) {
+        legend.on('wheel', function(){
+            var e = d3.event;
             e.preventDefault();
-            scrollHandler(e.deltaY / 20);
-        });
+            scrollHandler(e.deltaY / 20, scrollheight);          
+        })
+        
+        scrollBar.on('mousedown',null);
 
-        scrollBar.node().addEventListener('mousedown', function(e) {
+        scrollBar.on('mousedown', function(){
+            var e = d3.event;
             e.preventDefault();
-
+      
             function mMove(e) {
                 if(e.buttons === 1) {
-                    scrollHandler(e.movementY);
+                    scrollHandler(e.movementY, scrollheight);
                 }
             }
-
+      
             function mUp() {
                 scrollBar.node().removeEventListener('mousemove', mMove);
                 window.removeEventListener('mouseup', mUp);
             }
-
+      
             window.addEventListener('mousemove', mMove);
             window.addEventListener('mouseup', mUp);
         });
-
-        // Move scrollbar to starting position on the first render
-        scrollBar.call(
-            Drawing.setRect,
-            opts.width - (constants.scrollBarWidth + constants.scrollBarMargin),
-            constants.scrollBarMargin,
-            constants.scrollBarWidth,
-            constants.scrollBarHeight
-        );
     }
 
-    function scrollHandler(delta) {
+    function scrollHandler(delta, scrollheight) {
 
         var scrollBarTrack = scrollheight - constants.scrollBarHeight - 2 * constants.scrollBarMargin,
             translateY = scrollBox.attr('data-scroll'),

test/image/baselines/gl3d_tet.png

@@ -8,14 +8,23 @@
       "i":[0, 0, 0, 1],
       "j":[1, 2, 3, 2],
       "k":[2, 3, 1, 3],
-      "facecolors": [
+      "facecolor": [
         "rgb(0, 0, 0)",
         "rgb(255, 0, 0)",
         "rgb(0, 255, 0)",
         "rgb(0, 0, 255)"
       ]
     }],
   "layout": {
-    "title": "Tetrahedra"
+    "title": "Tetrahedra",
+    "scene": {
+        "camera": {
+            "eye": {
+                "x": 1.5,
+                "y": -1.5,
+                "z": 0.5
+            }
+        }
+    }
   }
 }