Fix invisible legends with negative y

* Ensure that when the margins are expended to allocate the legend,
  there is enough space to clear the layout margins.

Fixes plotly#384

Author: n-riesco

src/components/legend/draw.js

@@ -184,27 +184,42 @@ module.exports = function draw(gd) {
     if(anchorUtils.isRightAnchor(opts)) {
         lx -= opts.width;
     }
-    if(anchorUtils.isCenterAnchor(opts)) {
+    else if(anchorUtils.isCenterAnchor(opts)) {
         lx -= opts.width / 2;
     }
 
     if(anchorUtils.isBottomAnchor(opts)) {
         ly -= opts.height;
     }
-    if(anchorUtils.isMiddleAnchor(opts)) {
+    else if(anchorUtils.isMiddleAnchor(opts)) {
         ly -= opts.height / 2;
     }
 
+    lx = Math.round(lx);
+    ly = Math.round(ly);
+
+    // Make sure the legend top is below the top margin
+    if(ly < fullLayout.margin.t) ly = fullLayout.margin.t;
+
+    var scrollHeightMax = fullLayout.height - fullLayout.margin.b - ly;
+    var scrollHeight = Math.min(scrollHeightMax, opts.height);
+
+    if(scrollHeight <= 2 * opts.borderwidth) {
+        console.error('Legend.draw: insufficient space to draw legend');
+        legend.remove();
+        return;
+    }
+
     // Deal with scrolling
-    var plotHeight = fullLayout.height - fullLayout.margin.b,
-        scrollheight = Math.min(plotHeight - ly, opts.height),
-        scrollPosition = scrollBox.attr('data-scroll') ? scrollBox.attr('data-scroll') : 0;
+    var scrollPosition = scrollBox.attr('data-scroll') ?
+        scrollBox.attr('data-scroll') :
+        0;
 
     scrollBox.attr('transform', 'translate(0, ' + scrollPosition + ')');
 
     bg.attr({
         width: opts.width - 2 * opts.borderwidth,
-        height: scrollheight - 2 * opts.borderwidth,
+        height: scrollHeight - 2 * opts.borderwidth,
         x: opts.borderwidth,
         y: opts.borderwidth
     });
@@ -213,15 +228,15 @@ module.exports = function draw(gd) {
 
     clipPath.select('rect').attr({
         width: opts.width,
-        height: scrollheight,
+        height: scrollHeight,
         x: 0,
         y: 0
     });
 
     legend.call(Drawing.setClipUrl, clipId);
 
     // If scrollbar should be shown.
-    if(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
@@ -243,21 +258,21 @@ module.exports = function draw(gd) {
             scrollBox.attr('data-scroll',0);
         }
 
-        scrollHandler(0,scrollheight);
+        scrollHandler(0,scrollHeight);
 
         legend.on('wheel',null);
 
         legend.on('wheel', function() {
             var e = d3.event;
             e.preventDefault();
-            scrollHandler(e.deltaY / 20, scrollheight);
+            scrollHandler(e.deltaY / 20, scrollHeight);
         });
 
         scrollBar.on('.drag',null);
         scrollBox.on('.drag',null);
         var drag = d3.behavior.drag()
             .on('drag', function() {
-                scrollHandler(d3.event.dy, scrollheight);
+                scrollHandler(d3.event.dy, scrollHeight);
             });
 
         scrollBar.call(drag);
@@ -266,12 +281,12 @@ module.exports = function draw(gd) {
     }
 
 
-    function scrollHandler(delta, scrollheight) {
+    function scrollHandler(delta, scrollHeight) {
 
-        var scrollBarTrack = scrollheight - constants.scrollBarHeight - 2 * constants.scrollBarMargin,
+        var scrollBarTrack = scrollHeight - constants.scrollBarHeight - 2 * constants.scrollBarMargin,
             translateY = scrollBox.attr('data-scroll'),
-            scrollBoxY = Lib.constrain(translateY - delta, scrollheight-opts.height, 0),
-            scrollBarY = -scrollBoxY / (opts.height - scrollheight) * scrollBarTrack + constants.scrollBarMargin;
+            scrollBoxY = Lib.constrain(translateY - delta, scrollHeight-opts.height, 0),
+            scrollBarY = -scrollBoxY / (opts.height - scrollHeight) * scrollBarTrack + constants.scrollBarMargin;
 
         scrollBox.attr('data-scroll', scrollBoxY);
         scrollBox.attr('transform', 'translate(0, ' + scrollBoxY + ')');
@@ -454,12 +469,15 @@ function repositionLegend(gd, traces) {
     opts.height = Math.ceil(opts.height);
 
     // lastly check if the margin auto-expand has changed
-    Plots.autoMargin(gd, 'legend', {
+    // (using Plots.autoMargin2 to ensure the requested margins are padded with
+    // the layout margins to ensure the legend doesn't exceed the plot area)
+    Plots.autoMargin2(gd, 'legend', {
         x: opts.x,
         y: opts.y,
         l: opts.width * ({right: 1, center: 0.5}[xanchor] || 0),
         r: opts.width * ({left: 1, center: 0.5}[xanchor] || 0),
         b: opts.height * ({top: 1, middle: 0.5}[yanchor] || 0),
-        t: opts.height * ({bottom: 1, middle: 0.5}[yanchor] || 0)
+        t: opts.height * ({bottom: 1, middle: 0.5}[yanchor] || 0),
+        pad: 0
     });
 }

src/plots/plots.js

@@ -875,6 +875,35 @@ plots.autoMargin = function(gd, id, o) {
     }
 };
 
+// Similar to plots.autoMargin, except that it pads the request with the layout
+// margins, so that an object can be drawn without reaching the layout margins.
+plots.autoMargin2 = function(gd, id, o) {
+    var fullLayout = gd._fullLayout;
+
+    if(!fullLayout._pushmargin) fullLayout._pushmargin = {};
+
+    if(fullLayout.margin.autoexpand !== false) {
+        if(!o) delete fullLayout._pushmargin[id];
+        else {
+            var pad = o.pad === undefined ? 12 : o.pad;
+
+            // if the item is too big, just give it enough automargin to
+            // make sure you can still grab it and bring it back
+            if(o.l+o.r > fullLayout.width*0.5) o.l = o.r = 0;
+            if(o.b+o.t > fullLayout.height*0.5) o.b = o.t = 0;
+
+            fullLayout._pushmargin[id] = {
+                l: {val: o.x, size: o.l + pad + fullLayout.margin.l},
+                r: {val: o.x, size: o.r + pad + fullLayout.margin.r},
+                b: {val: o.y, size: o.b + pad + fullLayout.margin.b},
+                t: {val: o.y, size: o.t + pad + fullLayout.margin.t}
+            };
+        }
+
+        if(!gd._replotting) plots.doAutoMargin(gd);
+    }
+};
+
 plots.doAutoMargin = function(gd) {
     var fullLayout = gd._fullLayout;
     if(!fullLayout._size) fullLayout._size = {};