implementation of valign for legends

Author: antoinerg

src/components/legend/attributes.js

@@ -120,5 +120,15 @@ module.exports = {
             'or *bottom* of the legend.'
         ].join(' ')
     },
-    editType: 'legend'
+    editType: 'legend',
+    valign: {
+        valType: 'enumerated',
+        values: ['top', 'middle', 'bottom'],
+        dflt: 'middle',
+        role: 'style',
+        editType: 'legend',
+        description: [
+            'Sets the vertical alignment of the symbol with respect to the `text`.',
+        ].join(' ')
+    }
 };

src/components/legend/defaults.js

@@ -103,5 +103,6 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
     coerce('xanchor', defaultXAnchor);
     coerce('y', defaultY);
     coerce('yanchor', defaultYAnchor);
+    coerce('valign')
     Lib.noneOrAll(containerIn, containerOut, ['x', 'y']);
 };

src/components/legend/draw.js

@@ -536,6 +536,7 @@ function computeTextDimensions(g, gd) {
         // to avoid getBoundingClientRect
         var textY = lineHeight * (0.3 + (1 - textLines) / 2);
         svgTextUtils.positionText(text, constants.textOffsetX, textY);
+        legendItem.lineHeight = lineHeight;
     }
 
     height = Math.max(height, 16) + 3;

src/components/legend/style.js

@@ -25,6 +25,13 @@ module.exports = function style(s, gd) {
         var layers = Lib.ensureSingle(traceGroup, 'g', 'layers');
         layers.style('opacity', d[0].trace.opacity);
 
+        // Marker vertical alignment
+        var valignFactor = 0;
+        if(gd._fullLayout.legend.valign === 'top') valignFactor = 1.0;
+        if(gd._fullLayout.legend.valign === 'bottom') valignFactor = -1.0;
+        var markerOffsetY = valignFactor * (0.5 * (d[0].lineHeight - d[0].height + 3));
+        if(markerOffsetY) layers.attr('transform', 'translate(0,' + markerOffsetY + ')');
+
         var fill = layers
             .selectAll('g.legendfill')
                 .data([d]);

test/image/baselines/legend_valign.png

@@ -0,0 +1,25 @@
+{
+  "data": [{
+      "y": [1, 5, 3, 4, 5],
+      "name": "Super long name<br>Super long name<br>Super long name<br>Super long name",
+      "type": "scatter",
+      "showlegend": true
+    },
+    {
+      "y": [3, 2, 5, 1, 5],
+      "name": "Also super long name<br>Also super long name<br>Also super long name",
+      "type": "scatter",
+      "showlegend": true
+    }
+  ],
+  "layout": {
+    "width": 800,
+    "legend": {
+      "bgcolor": "rgba(0,255,255,1)",
+      "valign": "top",
+      "font": {
+        "size": 20
+      }
+    }
+  }
+}