[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.
This commit is contained in:
Jonas Jenwald 2019-08-23 23:24:57 +02:00
parent edbebb8bf7
commit 29a2516e4c

View File

@ -57,7 +57,6 @@ var renderTextLayer = (function renderTextLayerClosure() {
// Initialize all used properties to keep the caches monomorphic. // Initialize all used properties to keep the caches monomorphic.
var textDiv = document.createElement('span'); var textDiv = document.createElement('span');
var textDivProperties = { var textDivProperties = {
style: null,
angle: 0, angle: 0,
canvasWidth: 0, canvasWidth: 0,
isWhitespace: false, isWhitespace: false,
@ -102,12 +101,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
styleBuf[3] = top; styleBuf[3] = top;
styleBuf[5] = fontHeight; styleBuf[5] = fontHeight;
styleBuf[7] = style.fontFamily; styleBuf[7] = style.fontFamily;
const styleStr = styleBuf.join(''); textDiv.setAttribute('style', styleBuf.join(''));
if (task._enhanceTextSelection) {
textDivProperties.style = styleStr;
}
textDiv.setAttribute('style', styleStr);
textDiv.textContent = geom.str; textDiv.textContent = geom.str;
// `fontName` is only used by the FontInspector, and we only use `dataset` // `fontName` is only used by the FontInspector, and we only use `dataset`
@ -626,7 +620,8 @@ var renderTextLayer = (function renderTextLayerClosure() {
expand(this); expand(this);
this._bounds = null; 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++) { for (var i = 0, ii = this._textDivs.length; i < ii; i++) {
const div = this._textDivs[i]; const div = this._textDivs[i];
@ -637,7 +632,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
} }
if (expandDivs) { if (expandDivs) {
transformBuf.length = 0; transformBuf.length = 0;
let padding = ''; paddingBuf.length = 0;
if (divProps.angle !== 0) { if (divProps.angle !== 0) {
transformBuf.push(`rotate(${divProps.angle}deg)`); transformBuf.push(`rotate(${divProps.angle}deg)`);
@ -645,26 +640,33 @@ var renderTextLayer = (function renderTextLayerClosure() {
if (divProps.scale !== 1) { if (divProps.scale !== 1) {
transformBuf.push(`scaleX(${divProps.scale})`); 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) { if (divProps.paddingTop > 0) {
padding += ` padding-top: ${divProps.paddingTop}px;`; paddingBuf.push(`${divProps.paddingTop}px`);
transformBuf.push(`translateY(${-divProps.paddingTop}px)`); transformBuf.push(`translateY(${-divProps.paddingTop}px)`);
} else {
paddingBuf.push(0);
} }
if (divProps.paddingRight > 0) { if (divProps.paddingRight > 0) {
padding += paddingBuf.push(`${divProps.paddingRight / divProps.scale}px`);
` padding-right: ${divProps.paddingRight / divProps.scale}px;`; } else {
paddingBuf.push(0);
} }
if (divProps.paddingBottom > 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 !== '') { const padding = paddingBuf.join(' ');
div.setAttribute('style', divProps.style + padding); if (padding !== NO_PADDING) {
div.style.padding = padding;
} }
if (transformBuf.length) { if (transformBuf.length) {
div.style.transform = transformBuf.join(' '); div.style.transform = transformBuf.join(' ');