Merge pull request #3446 from plotly/horiz-legend-wrap-all-lines-fix

Fix wrapped horizontal legends height computations

Author: etpinard

src/components/legend/draw.js

@@ -630,7 +630,6 @@ function computeLegendDimensions(gd, groups, traces) {
         var offsetX = 0;
         var fullTracesWidth = 0;
         var traceGap = opts.tracegroupgap || 5;
-        var oneRowLegend;
 
         // calculate largest width for traces and use for width of all legend items
         traces.each(function(d) {
@@ -639,15 +638,16 @@ function computeLegendDimensions(gd, groups, traces) {
         });
 
         // check if legend fits in one row
-        oneRowLegend = fullLayout._size.w > borderwidth + fullTracesWidth - traceGap;
+        var oneRowLegend = fullLayout._size.w > borderwidth + fullTracesWidth - traceGap;
+
         traces.each(function(d) {
             var legendItem = d[0];
             var traceWidth = oneRowLegend ? 40 + d[0].width : maxTraceWidth;
 
             if((borderwidth + offsetX + traceGap + traceWidth) > fullLayout._size.w) {
                 offsetX = 0;
-                rowHeight = rowHeight + maxTraceHeight;
-                opts._height = opts._height + maxTraceHeight;
+                rowHeight += maxTraceHeight;
+                opts._height += maxTraceHeight;
                 // reset for next row
                 maxTraceHeight = 0;
             }
@@ -657,16 +657,20 @@ function computeLegendDimensions(gd, groups, traces) {
                 (5 + borderwidth + legendItem.height / 2) + rowHeight);
 
             opts._width += traceGap + traceWidth;
-            opts._height = Math.max(opts._height, legendItem.height);
 
             // keep track of tallest trace in group
             offsetX += traceGap + traceWidth;
             maxTraceHeight = Math.max(legendItem.height, maxTraceHeight);
         });
 
+        if(oneRowLegend) {
+            opts._height = maxTraceHeight;
+        } else {
+            opts._height += maxTraceHeight;
+        }
+
         opts._width += borderwidth * 2;
         opts._height += 10 + borderwidth * 2;
-
     }
 
     // make sure we're only getting full pixels

test/image/baselines/legend_horizontal_wrap-alll-lines.png

@@ -0,0 +1,58 @@
+{
+  "data": [
+    {
+      "x": [ 1, 2, 3, 4 ],
+      "y": [ 3, 5, 1, 7 ],
+      "name": "Break this and last<br>trace will display properly"
+    },
+    {
+      "x": [ 1, 2, 3, 4 ],
+      "y": [ 3, 5, 1, 7 ],
+      "name": "You need to break this trace twice if first one has no break"
+    },
+    {
+      "x": [ 1, 2, 3, 4 ],
+      "y": [ 3, 5, 1, 7 ],
+      "name": "You need to break this trace twice if first one has no break"
+    },
+    {
+      "x": [ 1, 2, 3, 4 ],
+      "y": [ 3, 5, 1, 7 ],
+      "name": "You need to break this trace twice if first one has no break"
+    },
+    {
+      "x": [ 1, 2, 3, 4 ],
+      "y": [ 3, 5, 1, 7 ],
+      "name": "You need to break this trace twice if first one has no break"
+    },
+    {
+      "x": [ 1, 2, 3, 4 ],
+      "y": [ 3, 5, 1, 7 ],
+      "name": "You need to break this trace twice if first one has no break"
+    },
+    {
+      "x": [ 1, 2, 3, 4 ],
+      "y": [ 3, 5, 1, 7 ],
+      "name": "This<br> contains<br>a break"
+    }
+  ],
+  "layout": {
+    "legend": {
+      "orientation": "h",
+      "xanchor": "center",
+      "yanchor": "top",
+      "x": 0.5,
+      "y": -0.1,
+      "traceorder": "normal"
+    },
+    "paper_bgcolor": "rgba(255,0,0,0.5)",
+    "margin": {
+      "l": 20,
+      "r": 20,
+      "t": 20,
+      "b": 20
+    },
+    "width": 360,
+    "height": 600
+  }
+}