No innerHTML and pseudo-html cleanup

src/components/colorbar/draw.js

@@ -24,6 +24,7 @@ var Drawing = require('../drawing');
 var Color = require('../color');
 var Titles = require('../titles');
 var svgTextUtils = require('../../lib/svg_text_utils');
+var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
 
 var handleAxisDefaults = require('../../plots/cartesian/axis_defaults');
 var handleAxisPositionDefaults = require('../../plots/cartesian/position_defaults');
@@ -297,7 +298,7 @@ module.exports = function draw(gd, id) {
                     lineSize = 15.6;
                 if(titleText.node()) {
                     lineSize =
-                        parseInt(titleText.style('font-size'), 10) * 1.3;
+                        parseInt(titleText.style('font-size'), 10) * LINE_SPACING;
                 }
                 if(mathJaxNode) {
                     titleHeight = Drawing.bBox(mathJaxNode).height;

src/components/drawing/index.js

@@ -20,6 +20,9 @@ var Lib = require('../../lib');
 var svgTextUtils = require('../../lib/svg_text_utils');
 
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
+var alignment = require('../../constants/alignment');
+var LINE_SPACING = alignment.LINE_SPACING;
+
 var subTypes = require('../../traces/scatter/subtypes');
 var makeBubbleSizeFn = require('../../traces/scatter/make_bubble_size_func');
 
@@ -426,8 +429,7 @@ drawing.tryColorscale = function(marker, prefix) {
 };
 
 // draw text at points
-var TEXTOFFSETSIGN = {start: 1, end: -1, middle: 0, bottom: 1, top: -1},
-    LINEEXPAND = 1.3;
+var TEXTOFFSETSIGN = {start: 1, end: -1, middle: 0, bottom: 1, top: -1};
 drawing.textPointStyle = function(s, trace, gd) {
     s.each(function(d) {
         var p = d3.select(this),
@@ -462,7 +464,7 @@ drawing.textPointStyle = function(s, trace, gd) {
             .call(svgTextUtils.convertToTspans, gd);
 
         var pgroup = d3.select(this.parentNode);
-        var numLines = (svgTextUtils.lineCount(p) - 1) * LINEEXPAND + 1;
+        var numLines = (svgTextUtils.lineCount(p) - 1) * LINE_SPACING + 1;
         var dx = TEXTOFFSETSIGN[h] * r;
         var dy = fontSize * 0.75 + TEXTOFFSETSIGN[v] * r +
                 (TEXTOFFSETSIGN[v] - 1) * numLines * fontSize / 2;

src/components/legend/draw.js

@@ -22,6 +22,8 @@ var svgTextUtils = require('../../lib/svg_text_utils');
 
 var constants = require('./constants');
 var interactConstants = require('../../constants/interactions');
+var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
+
 var getLegendData = require('./get_legend_data');
 var style = require('./style');
 var helpers = require('./helpers');
@@ -561,7 +563,7 @@ function computeTextDimensions(g, gd) {
     var mathjaxGroup = g.select('g[class*=math-group]');
     var mathjaxNode = mathjaxGroup.node();
     var opts = gd._fullLayout.legend;
-    var lineHeight = opts.font.size * 1.3;
+    var lineHeight = opts.font.size * LINE_SPACING;
     var height, width;
 
     if(mathjaxNode) {

src/components/rangeselector/draw.js

@@ -19,6 +19,8 @@ var svgTextUtils = require('../../lib/svg_text_utils');
 var axisIds = require('../../plots/cartesian/axis_ids');
 var anchorUtils = require('../legend/anchor_utils');
 
+var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
+
 var constants = require('./constants');
 var getUpdateObject = require('./get_update_object');
 
@@ -183,7 +185,7 @@ function reposition(gd, buttons, opts, axName) {
         var button = d3.select(this);
         var text = button.select('.selector-text');
 
-        var tHeight = opts.font.size * 1.3;
+        var tHeight = opts.font.size * LINE_SPACING;
         var hEff = Math.max(tHeight * svgTextUtils.lineCount(text), 16) + 3;
 
         opts.height = Math.max(opts.height, hEff);
@@ -195,7 +197,7 @@ function reposition(gd, buttons, opts, axName) {
         var text = button.select('.selector-text');
 
         var tWidth = text.node() && Drawing.bBox(text.node()).width;
-        var tHeight = opts.font.size * 1.3;
+        var tHeight = opts.font.size * LINE_SPACING;
         var tLines = svgTextUtils.lineCount(text);
 
         var wEff = Math.max(tWidth + 10, constants.minButtonWidth);

src/components/sliders/constants.js

@@ -45,9 +45,6 @@ module.exports = {
     // padding around item text
     textPadX: 40,
 
-    // font size to height scale
-    fontSizeToHeight: 1.3,
-
     // arrow offset off right edge
     arrowOffsetX: 4,
 

src/components/sliders/draw.js

@@ -18,6 +18,7 @@ var svgTextUtils = require('../../lib/svg_text_utils');
 var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
+var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
 
 
 module.exports = function draw(gd) {
@@ -309,7 +310,7 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
     var lines = svgTextUtils.lineCount(text);
 
     var y0 = (sliderOpts.currentValueMaxLines + 1 - lines) *
-        sliderOpts.currentvalue.font.size * constants.fontSizeToHeight;
+        sliderOpts.currentvalue.font.size * LINE_SPACING;
 
     svgTextUtils.positionText(text, x0, y0);
 
@@ -381,7 +382,7 @@ function drawLabelGroup(sliderGroup, sliderOpts) {
                 sliderOpts.ticklen +
                 // position is the baseline of the top line of text only, even
                 // if the label spans multiple lines
-                sliderOpts.font.size * constants.fontSizeToHeight +
+                sliderOpts.font.size * LINE_SPACING +
                 constants.labelOffset +
                 sliderOpts.currentValueTotalHeight
         );

src/components/updatemenus/constants.js

@@ -44,9 +44,6 @@ module.exports = {
     textPadX: 24,
     arrowPadX: 16,
 
-    // font size to height scale
-    fontSizeToHeight: 1.3,
-
     // item rect radii
     rx: 2,
     ry: 2,

src/components/updatemenus/draw.js

@@ -17,6 +17,8 @@ var Drawing = require('../drawing');
 var svgTextUtils = require('../../lib/svg_text_utils');
 var anchorUtils = require('../legend/anchor_utils');
 
+var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
+
 var constants = require('./constants');
 var ScrollBox = require('./scrollbox');
 
@@ -530,7 +532,7 @@ function findDimensions(gd, menuOpts) {
         var wEff = Math.max(tWidth + constants.textPadX, constants.minWidth);
 
         // height is determined by item text
-        var tHeight = menuOpts.font.size * constants.fontSizeToHeight;
+        var tHeight = menuOpts.font.size * LINE_SPACING;
         var tLines = svgTextUtils.lineCount(text);
         var hEff = Math.max(tHeight * tLines, constants.minHeight) + constants.textOffsetY;
 
@@ -643,7 +645,7 @@ function setItemPosition(item, menuOpts, posOpts, overrideOpts) {
         height: finalHeight
     });
 
-    var tHeight = menuOpts.font.size * constants.fontSizeToHeight;
+    var tHeight = menuOpts.font.size * LINE_SPACING;
     var tLines = svgTextUtils.lineCount(text);
     var spanOffset = ((tLines - 1) * tHeight / 2);
 

src/constants/alignment.js

@@ -28,5 +28,7 @@ module.exports = {
         bottom: 1,
         middle: 0.5,
         top: 0
-    }
+    },
+    // multiple of fontSize to get the vertical offset between lines
+    LINE_SPACING: 1.3
 };

src/lib/svg_text_utils.js

@@ -16,6 +16,7 @@ var d3 = require('d3');
 var Lib = require('../lib');
 var xmlnsNamespaces = require('../constants/xmlns_namespaces');
 var stringMappings = require('../constants/string_mappings');
+var LINE_SPACING = require('../constants/alignment').LINE_SPACING;
 
 // text converter
 
@@ -326,7 +327,7 @@ function buildSVGText(containerNode, str) {
         var lineNode = document.createElementNS(xmlnsNamespaces.svg, 'tspan');
         d3.select(lineNode).attr({
             class: 'line',
-            dy: (currentLine * 1.3) + 'em'
+            dy: (currentLine * LINE_SPACING) + 'em'
         });
         containerNode.appendChild(lineNode);