No innerHTML and pseudo-html cleanup

src/components/annotations/draw.js

@@ -231,11 +231,6 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
             wholeLink.node().appendChild(annTextBG.node());
         }
 
-
-        // make sure lines are aligned the way they will be
-        // at the end, even if their position changes
-        annText.selectAll('tspan.line').attr({y: 0, x: 0});
-
         var mathjaxGroup = annTextGroupInner.select('.annotation-text-math-group');
         var hasMathjax = !mathjaxGroup.empty();
         var anntextBB = Drawing.bBox(
@@ -424,12 +419,9 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
         else {
             var texty = borderfull + yShift - anntextBB.top,
                 textx = borderfull + xShift - anntextBB.left;
-            annText.attr({
-                x: textx,
-                y: texty
-            })
-            .call(Drawing.setClipUrl, isSizeConstrained ? annClipID : null);
-            annText.selectAll('tspan.line').attr({y: texty, x: textx});
+
+            annText.call(svgTextUtils.positionText, textx, texty)
+                .call(Drawing.setClipUrl, isSizeConstrained ? annClipID : null);
         }
 
         annTextClip.select('rect').call(Drawing.setRect, borderfull, borderfull,

src/components/colorbar/draw.js

@@ -23,6 +23,7 @@ var setCursor = require('../../lib/setcursor');
 var Drawing = require('../drawing');
 var Color = require('../color');
 var Titles = require('../titles');
+var svgTextUtils = require('../../lib/svg_text_utils');
 
 var handleAxisDefaults = require('../../plots/cartesian/axis_defaults');
 var handleAxisPositionDefaults = require('../../plots/cartesian/position_defaults');
@@ -321,8 +322,7 @@ module.exports = function draw(gd, id) {
                     }
                     else {
                         cbAxisOut.domain[0] += titleHeight / gs.h;
-                        var nlines = Math.max(1,
-                            titleText.selectAll('tspan.line').size());
+                        var nlines = svgTextUtils.lineCount(titleText);
                         titleTrans[1] += (1 - nlines) * lineSize;
                     }
 

src/components/drawing/index.js

@@ -41,6 +41,12 @@ drawing.font = function(s, family, size, color) {
     if(color) s.call(Color.fill, color);
 };
 
+/*
+ * Positioning helpers
+ * Note: do not use `setPosition` with <text> nodes modified by
+ * `svgTextUtils.convertToTspans`. Use `svgTextUtils.positionText`
+ * instead, so that <tspan.line> elements get updated to match.
+ */
 drawing.setPosition = function(s, x, y) { s.attr('x', x).attr('y', y); };
 drawing.setSize = function(s, w, h) { s.attr('width', w).attr('height', h); };
 drawing.setRect = function(s, x, y, w, h) {
@@ -455,19 +461,13 @@ drawing.textPointStyle = function(s, trace, gd) {
             .text(text)
             .call(svgTextUtils.convertToTspans, gd);
         var pgroup = d3.select(this.parentNode),
-            tspans = p.selectAll('tspan.line'),
-            numLines = ((tspans[0].length || 1) - 1) * LINEEXPAND + 1,
+            numLines = (svgTextUtils.lineCount(p) - 1) * LINEEXPAND + 1,
             dx = TEXTOFFSETSIGN[h] * r,
             dy = fontSize * 0.75 + TEXTOFFSETSIGN[v] * r +
                 (TEXTOFFSETSIGN[v] - 1) * numLines * fontSize / 2;
 
         // fix the overall text group position
         pgroup.attr('transform', 'translate(' + dx + ',' + dy + ')');
-
-        // then fix multiline text
-        if(numLines > 1) {
-            tspans.attr({ x: p.attr('x'), y: p.attr('y') });
-        }
     });
 };
 
@@ -633,23 +633,10 @@ drawing.bBox = function(node) {
     var testNode = node.cloneNode(true);
     tester.appendChild(testNode);
 
-    // standardize its position - and that of any newlines if we're getting
-    // the bBox of a <text> element directly (not a larger container)
-    // newline <tspan>s need to get `x` and `y` set to match whenever the
-    // containing <text> element gets repositioned, and the line offset
-    // is handled by the attribute `dy` (that we assume is already set)
-    var test3 = d3.select(testNode).attr({
-        x: 0,
-        y: 0,
-        transform: ''
-    });
-
-    if(testNode.nodeName === 'text') {
-        test3.selectAll('tspan.line').attr({
-            x: 0,
-            y: 0
-        });
-    }
+    // standardize its position (and newline tspans if any)
+    d3.select(testNode)
+        .attr('transform', '')
+        .call(svgTextUtils.positionText, 0, 0);
 
     var testRect = testNode.getBoundingClientRect();
     var refRect = drawing.testref

src/components/fx/hover.js

@@ -595,23 +595,15 @@ function createHoverText(hoverData, opts, gd) {
             .attr('data-notex', 1);
 
         ltext.text(t0)
-            .call(svgTextUtils.convertToTspans, gd)
-            .call(Drawing.setPosition, 0, 0)
-          .selectAll('tspan.line')
-            .call(Drawing.setPosition, 0, 0);
+            .call(svgTextUtils.convertToTspans, gd);
         label.attr('transform', '');
 
         var tbb = ltext.node().getBoundingClientRect();
         if(hovermode === 'x') {
             ltext.attr('text-anchor', 'middle')
-                .call(Drawing.setPosition, 0, (xa.side === 'top' ?
+                .call(svgTextUtils.positionText, 0, (xa.side === 'top' ?
                     (outerTop - tbb.bottom - HOVERARROWSIZE - HOVERTEXTPAD) :
-                    (outerTop - tbb.top + HOVERARROWSIZE + HOVERTEXTPAD)))
-                .selectAll('tspan.line')
-                    .attr({
-                        x: ltext.attr('x'),
-                        y: ltext.attr('y')
-                    });
+                    (outerTop - tbb.top + HOVERARROWSIZE + HOVERTEXTPAD)));
 
             var topsign = xa.side === 'top' ? '-' : '';
             lpath.attr('d', 'M0,0' +
@@ -627,14 +619,9 @@ function createHoverText(hoverData, opts, gd) {
         }
         else {
             ltext.attr('text-anchor', ya.side === 'right' ? 'start' : 'end')
-                .call(Drawing.setPosition,
+                .call(svgTextUtils.positionText,
                     (ya.side === 'right' ? 1 : -1) * (HOVERTEXTPAD + HOVERARROWSIZE),
-                    outerTop - tbb.top - tbb.height / 2)
-                .selectAll('tspan.line')
-                    .attr({
-                        x: ltext.attr('x'),
-                        y: ltext.attr('y')
-                    });
+                    outerTop - tbb.top - tbb.height / 2);
 
             var leftsign = ya.side === 'right' ? '' : '-';
             lpath.attr('d', 'M0,0' +
@@ -742,12 +729,9 @@ function createHoverText(hoverData, opts, gd) {
                 d.fontFamily || fontFamily,
                 d.fontSize || fontSize,
                 d.fontColor || contrastColor)
-            .call(Drawing.setPosition, 0, 0)
             .text(text)
             .attr('data-notex', 1)
             .call(svgTextUtils.convertToTspans, gd);
-        tx.selectAll('tspan.line')
-            .call(Drawing.setPosition, 0, 0);
 
         var tx2 = g.select('text.name'),
             tx2width = 0;
@@ -759,11 +743,8 @@ function createHoverText(hoverData, opts, gd) {
                     d.fontSize || fontSize,
                     traceColor)
                 .text(name)
-                .call(Drawing.setPosition, 0, 0)
                 .attr('data-notex', 1)
                 .call(svgTextUtils.convertToTspans, gd);
-            tx2.selectAll('tspan.line')
-                .call(Drawing.setPosition, 0, 0);
             tx2width = tx2.node().getBoundingClientRect().width + 2 * HOVERTEXTPAD;
         }
         else {
@@ -1031,17 +1012,12 @@ function alignHoverText(hoverLabels, rotateLabels) {
                 'V' + (offsetY - HOVERARROWSIZE) +
                 'Z'));
 
-        tx.call(Drawing.setPosition,
-                txx + offsetX, offsetY + d.ty0 - d.by / 2 + HOVERTEXTPAD)
-            .selectAll('tspan.line')
-                .attr({
-                    x: tx.attr('x'),
-                    y: tx.attr('y')
-                });
+        tx.call(svgTextUtils.positionText,
+            txx + offsetX, offsetY + d.ty0 - d.by / 2 + HOVERTEXTPAD);
 
         if(d.tx2width) {
-            g.select('text.name, text.name tspan.line')
-                .call(Drawing.setPosition,
+            g.select('text.name')
+                .call(svgTextUtils.positionText,
                     tx2x + alignShift * HOVERTEXTPAD + offsetX,
                     offsetY + d.ty0 - d.by / 2 + HOVERTEXTPAD);
             g.select('rect')

src/components/legend/draw.js

@@ -370,19 +370,14 @@ function drawTexts(g, gd) {
     var text = g.selectAll('text.legendtext')
         .data([0]);
     text.enter().append('text').classed('legendtext', true);
-    text.attr({
-        x: 40,
-        y: 0,
-        'text-anchor': 'start'
-    })
+    text.attr('text-anchor', 'start')
     .classed('user-select-none', true)
     .call(Drawing.font, fullLayout.legend.font)
     .text(name);
 
     function textLayout(s) {
         svgTextUtils.convertToTspans(s, gd, function() {
-            s.selectAll('tspan.line').attr({x: s.attr('x')});
-            g.call(computeTextDimensions, gd);
+            computeTextDimensions(g, gd);
         });
     }
 
@@ -577,8 +572,7 @@ function computeTextDimensions(g, gd) {
     }
     else {
         var text = g.selectAll('.legendtext'),
-            textSpans = text.selectAll('tspan.line'),
-            textLines = textSpans.size() || 1,
+            textLines = svgTextUtils.lineCount(text),
             textNode = text.node();
 
         height = lineHeight * textLines;
@@ -587,8 +581,7 @@ function computeTextDimensions(g, gd) {
         // approximation to height offset to center the font
         // to avoid getBoundingClientRect
         var textY = lineHeight * (0.3 + (1 - textLines) / 2);
-        text.attr('y', textY);
-        textSpans.attr('y', textY);
+        svgTextUtils.positionText(text, 40, textY);
     }
 
     height = Math.max(height, 16) + 3;

src/components/rangeselector/draw.js

@@ -149,8 +149,6 @@ function getFillColor(selectorLayout, d) {
 function drawButtonText(button, selectorLayout, d, gd) {
     function textLayout(s) {
         svgTextUtils.convertToTspans(s, gd);
-
-        // TODO do we need anything else here?
     }
 
     var text = button.selectAll('text')
@@ -183,25 +181,22 @@ function reposition(gd, buttons, opts, axName) {
 
     buttons.each(function() {
         var button = d3.select(this),
-            text = button.select('.selector-text'),
-            tspans = text.selectAll('tspan.line');
+            text = button.select('.selector-text');
 
         var tHeight = opts.font.size * 1.3,
-            tLines = tspans.size() || 1,
-            hEff = Math.max(tHeight * tLines, 16) + 3;
+            hEff = Math.max(tHeight * svgTextUtils.lineCount(text), 16) + 3;
 
         opts.height = Math.max(opts.height, hEff);
     });
 
     buttons.each(function() {
         var button = d3.select(this),
             rect = button.select('.selector-rect'),
-            text = button.select('.selector-text'),
-            tspans = text.selectAll('tspan.line');
+            text = button.select('.selector-text');
 
         var tWidth = text.node() && Drawing.bBox(text.node()).width,
             tHeight = opts.font.size * 1.3,
-            tLines = tspans.size() || 1;
+            tLines = svgTextUtils.lineCount(text);
 
         var wEff = Math.max(tWidth + 10, constants.minButtonWidth);
 
@@ -220,13 +215,8 @@ function reposition(gd, buttons, opts, axName) {
             height: opts.height
         });
 
-        var textAttrs = {
-            x: wEff / 2,
-            y: opts.height / 2 - ((tLines - 1) * tHeight / 2) + 3
-        };
-
-        text.attr(textAttrs);
-        tspans.attr(textAttrs);
+        svgTextUtils.positionText(text, wEff / 2,
+            opts.height / 2 - ((tLines - 1) * tHeight / 2) + 3);
 
         opts.width += wEff + 5;
     });

src/components/sliders/draw.js

@@ -19,8 +19,6 @@ var anchorUtils = require('../legend/anchor_utils');
 
 var constants = require('./constants');
 
-var RESETATTRS = {x: 0, y: 0};
-
 
 module.exports = function draw(gd) {
     var fullLayout = gd._fullLayout,
@@ -165,7 +163,7 @@ function findDimensions(gd, sliderOpts) {
         sliderLabels.each(function(stepOpts) {
             var curValPrefix = drawCurrentValue(dummyGroup, sliderOpts, stepOpts.label);
             var curValSize = (curValPrefix.node() && Drawing.bBox(curValPrefix.node())) || {width: 0, height: 0};
-            var lines = curValPrefix.selectAll('tspan.line').size() || 1;
+            var lines = svgTextUtils.lineCount(curValPrefix);
             sliderOpts.currentValueMaxWidth = Math.max(sliderOpts.currentValueMaxWidth, Math.ceil(curValSize.width));
             sliderOpts.currentValueHeight = Math.max(sliderOpts.currentValueHeight, Math.ceil(curValSize.height));
             sliderOpts.currentValueMaxLines = Math.max(sliderOpts.currentValueMaxLines, lines);
@@ -313,15 +311,14 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
 
     text.call(Drawing.font, sliderOpts.currentvalue.font)
         .text(str)
-        .call(svgTextUtils.convertToTspans, sliderOpts.gd)
-        .attr(RESETATTRS);
+        .call(svgTextUtils.convertToTspans, sliderOpts.gd);
 
-    var tspans = text.selectAll('tspan.line').attr(RESETATTRS);
+    var lines = svgTextUtils.lineCount(text);
 
-    var y0 = (sliderOpts.currentValueMaxLines + 1 - (tspans.size() || 1)) *
+    var y0 = (sliderOpts.currentValueMaxLines + 1 - lines) *
         sliderOpts.currentvalue.font.size * constants.fontSizeToHeight;
 
-    Drawing.setTranslate(text, x0, y0);
+    svgTextUtils.positionText(text, x0, y0);
 
     return text;
 }
@@ -360,10 +357,7 @@ function drawLabel(item, data, sliderOpts) {
 
     text.call(Drawing.font, sliderOpts.font)
         .text(data.step.label)
-        .call(svgTextUtils.convertToTspans, sliderOpts.gd)
-        .attr(RESETATTRS);
-
-    text.selectAll('tspan.line').attr(RESETATTRS);
+        .call(svgTextUtils.convertToTspans, sliderOpts.gd);
 
     return text;
 }

src/components/titles/index.js

@@ -119,12 +119,9 @@ Titles.draw = function(gd, titleClass, options) {
             opacity: opacity * Color.opacity(fontColor),
             'font-weight': Plots.fontWeight
         })
-        .attr(attributes)
-        .call(svgTextUtils.convertToTspans, gd)
-        .attr(attributes);
+        .call(svgTextUtils.positionText, attributes.x, attributes.y)
+        .call(svgTextUtils.convertToTspans, gd);
 
-        titleEl.selectAll('tspan.line')
-            .attr(attributes);
         return Plots.previousPromises(gd);
     }
 
@@ -226,9 +223,8 @@ Titles.draw = function(gd, titleClass, options) {
                     .call(titleLayout);
             })
             .on('input', function(d) {
-                this.text(d || ' ').attr(attributes)
-                    .selectAll('tspan.line')
-                        .attr(attributes);
+                this.text(d || ' ')
+                    .call(svgTextUtils.positionText, attributes.x, attributes.y);
             });
     }
     el.classed('js-placeholder', isplaceholder);