From 29a2516e4cf853ab57e34c08d38947f210909d3a Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Fri, 23 Aug 2019 23:24:57 +0200 Subject: [PATCH] [TextLayer] Use an Array to build the total `padding`, rather than concatenating Strings, in `expandTextDivs` Furthermore, it's possible to re-use the same Array for all `textDiv`s on the page and the resulting padding string also becomes a lot more compact. Please note that the `paddingLeft` branch was moved, since the padding values need to be ordered as `top, right, bottom, left`. Finally, with this re-factoring it's no longer necessary to cache the original `style` string for every `textDiv` when `enhanceTextSelection` is enabled. --- src/display/text_layer.js | 44 ++++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/display/text_layer.js b/src/display/text_layer.js index 0924d23d6..00fd7e46b 100644 --- a/src/display/text_layer.js +++ b/src/display/text_layer.js @@ -57,7 +57,6 @@ var renderTextLayer = (function renderTextLayerClosure() { // Initialize all used properties to keep the caches monomorphic. var textDiv = document.createElement('span'); var textDivProperties = { - style: null, angle: 0, canvasWidth: 0, isWhitespace: false, @@ -102,12 +101,7 @@ var renderTextLayer = (function renderTextLayerClosure() { styleBuf[3] = top; styleBuf[5] = fontHeight; styleBuf[7] = style.fontFamily; - const styleStr = styleBuf.join(''); - - if (task._enhanceTextSelection) { - textDivProperties.style = styleStr; - } - textDiv.setAttribute('style', styleStr); + textDiv.setAttribute('style', styleBuf.join('')); textDiv.textContent = geom.str; // `fontName` is only used by the FontInspector, and we only use `dataset` @@ -626,7 +620,8 @@ var renderTextLayer = (function renderTextLayerClosure() { expand(this); this._bounds = null; } - const transformBuf = []; + const NO_PADDING = '0 0 0 0'; + const transformBuf = [], paddingBuf = []; for (var i = 0, ii = this._textDivs.length; i < ii; i++) { const div = this._textDivs[i]; @@ -637,7 +632,7 @@ var renderTextLayer = (function renderTextLayerClosure() { } if (expandDivs) { transformBuf.length = 0; - let padding = ''; + paddingBuf.length = 0; if (divProps.angle !== 0) { transformBuf.push(`rotate(${divProps.angle}deg)`); @@ -645,26 +640,33 @@ var renderTextLayer = (function renderTextLayerClosure() { if (divProps.scale !== 1) { transformBuf.push(`scaleX(${divProps.scale})`); } - if (divProps.paddingLeft > 0) { - padding += - ` padding-left: ${divProps.paddingLeft / divProps.scale}px;`; - transformBuf.push( - `translateX(${-divProps.paddingLeft / divProps.scale}px)`); - } if (divProps.paddingTop > 0) { - padding += ` padding-top: ${divProps.paddingTop}px;`; + paddingBuf.push(`${divProps.paddingTop}px`); transformBuf.push(`translateY(${-divProps.paddingTop}px)`); + } else { + paddingBuf.push(0); } if (divProps.paddingRight > 0) { - padding += - ` padding-right: ${divProps.paddingRight / divProps.scale}px;`; + paddingBuf.push(`${divProps.paddingRight / divProps.scale}px`); + } else { + paddingBuf.push(0); } if (divProps.paddingBottom > 0) { - padding += ` padding-bottom: ${divProps.paddingBottom}px;`; + paddingBuf.push(`${divProps.paddingBottom}px`); + } else { + paddingBuf.push(0); + } + if (divProps.paddingLeft > 0) { + paddingBuf.push(`${divProps.paddingLeft / divProps.scale}px`); + transformBuf.push( + `translateX(${-divProps.paddingLeft / divProps.scale}px)`); + } else { + paddingBuf.push(0); } - if (padding !== '') { - div.setAttribute('style', divProps.style + padding); + const padding = paddingBuf.join(' '); + if (padding !== NO_PADDING) { + div.style.padding = padding; } if (transformBuf.length) { div.style.transform = transformBuf.join(' ');