Merge pull request #5976 from plotly/revise-convertToTspans

Revise `convertToTspans`

Author: archmoj

draftlogs/5976_fix.md

@@ -0,0 +1 @@
+ - Reduce calls to `getBoundingClientRect` in `convertToTspans` [[#5976](https://github.com/plotly/plotly.js/pull/5976)]

src/lib/svg_text_utils.js

@@ -11,10 +11,6 @@ var LINE_SPACING = require('../constants/alignment').LINE_SPACING;
 
 // text converter
 
-function getSize(_selection, _dimension) {
-    return _selection.node().getBoundingClientRect()[_dimension];
-}
-
 var FIND_TEX = /([^$]*)([$]+[^$]*[$]+)([^$]*)/;
 
 exports.convertToTspans = function(_context, gd, _callback) {
@@ -109,26 +105,31 @@ exports.convertToTspans = function(_context, gd, _callback) {
                 var g = newSvg.select('g');
                 g.attr({fill: fill, stroke: fill});
 
-                var newSvgW = getSize(g, 'width');
-                var newSvgH = getSize(g, 'height');
-                var newX = +_context.attr('x') - newSvgW *
+                var gBB = g.node().getBoundingClientRect();
+                var newSvgW = gBB.width;
+                var newSvgH = gBB.height;
+
+                var x = +_context.attr('x');
+                var y = +_context.attr('y');
+
+                var newX = x - newSvgW *
                     {start: 0, middle: 0.5, end: 1}[_context.attr('text-anchor') || 'start'];
                 // font baseline is about 1/4 fontSize below centerline
-                var textHeight = fontSize || getSize(_context, 'height');
+                var textHeight = fontSize || _context.node().getBoundingClientRect().height;
                 var dy = -textHeight / 4;
 
                 if(svgClass[0] === 'y') {
                     mathjaxGroup.attr({
-                        transform: 'rotate(' + [-90, +_context.attr('x'), +_context.attr('y')] +
+                        transform: 'rotate(' + [-90, x, y] +
                         ')' + strTranslate(-newSvgW / 2, dy - newSvgH / 2)
                     });
-                    newSvg.attr({x: +_context.attr('x'), y: +_context.attr('y')});
+                    newSvg.attr({x: x, y: y});
                 } else if(svgClass[0] === 'l') {
-                    newSvg.attr({x: _context.attr('x'), y: dy - (newSvgH / 2)});
+                    newSvg.attr({x: x, y: dy - (newSvgH / 2)});
                 } else if(svgClass[0] === 'a' && svgClass.indexOf('atitle') !== 0) {
                     newSvg.attr({x: 0, y: dy});
                 } else {
-                    newSvg.attr({x: newX, y: (+_context.attr('y') + dy - newSvgH / 2)});
+                    newSvg.attr({x: newX, y: (y + dy - newSvgH / 2)});
                 }
 
                 if(_callback) _callback.call(_context, mathjaxGroup);