diff --git a/draftlogs/5976_fix.md b/draftlogs/5976_fix.md new file mode 100644 index 00000000000..8f7756e4fb0 --- /dev/null +++ b/draftlogs/5976_fix.md @@ -0,0 +1 @@ + - Reduce calls to `getBoundingClientRect` in `convertToTspans` [[#5976](https://github.com/plotly/plotly.js/pull/5976)] diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js index 7e4c50c1182..d19492d0eb4 100644 --- a/src/lib/svg_text_utils.js +++ b/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);