From 39129fc4410f5ecc4574a10ce06bfaf3f2a4f885 Mon Sep 17 00:00:00 2001 From: Fabian Lange Date: Tue, 5 Aug 2014 23:47:16 +0200 Subject: [PATCH] Optimize TextLayerBuilder_renderLayer() for text heavy documents. This change improves the text layer creation of "normal" text heavy documents. It changes 2 things: * If the text element is not rotated, it will neither calculate nor apply a textTransform: rotate(0deg) to the text layer element. * For scaling the text layer div, the context will measure the width of the text in the given font. For many text documents the font changes seldom. If the font stays the same, the context does not need to be set to a new font especially avoiding the temporary creation of the same font string over and over again. --- web/text_layer_builder.js | 47 +++++++++++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 9 deletions(-) diff --git a/web/text_layer_builder.js b/web/text_layer_builder.js index f2a53e511..8764c8023 100644 --- a/web/text_layer_builder.js +++ b/web/text_layer_builder.js @@ -56,20 +56,34 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() { return; } + var lastFontSize; + var lastFontFamily; for (var i = 0; i < textDivsLength; i++) { var textDiv = textDivs[i]; if (textDiv.dataset.isWhitespace !== undefined) { continue; } - ctx.font = textDiv.style.fontSize + ' ' + textDiv.style.fontFamily; + var fontSize = textDiv.style.fontSize; + var fontFamily = textDiv.style.fontFamily; + + // Only build font string and set to context if different from last. + if (fontSize !== lastFontSize || fontFamily !== lastFontFamily) { + ctx.font = fontSize + ' ' + fontFamily; + lastFontSize = fontSize; + lastFontFamily = fontFamily; + } + var width = ctx.measureText(textDiv.textContent).width; if (width > 0) { textLayerFrag.appendChild(textDiv); + // Dataset values come of type string. var textScale = textDiv.dataset.canvasWidth / width; var rotation = textDiv.dataset.angle; var transform = 'scale(' + textScale + ', 1)'; - transform = 'rotate(' + rotation + 'deg) ' + transform; + if (rotation) { + transform = 'rotate(' + rotation + 'deg) ' + transform; + } CustomStyle.setProp('transform' , textDiv, transform); CustomStyle.setProp('transformOrigin' , textDiv, '0% 0%'); } @@ -114,18 +128,34 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() { angle += Math.PI / 2; } var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3])); - var fontAscent = (style.ascent ? style.ascent * fontHeight : - (style.descent ? (1 + style.descent) * fontHeight : fontHeight)); + var fontAscent = fontHeight; + if (style.ascent) { + fontAscent = style.ascent * fontAscent; + } else if (style.descent) { + fontAscent = (1 + style.descent) * fontAscent; + } + var left; + var top; + if (angle === 0) { + left = tx[4]; + top = tx[5] - fontAscent; + } else { + left = tx[4] + (fontAscent * Math.sin(angle)); + top = tx[5] - (fontAscent * Math.cos(angle)); + } textDiv.style.position = 'absolute'; - textDiv.style.left = (tx[4] + (fontAscent * Math.sin(angle))) + 'px'; - textDiv.style.top = (tx[5] - (fontAscent * Math.cos(angle))) + 'px'; + textDiv.style.left = left + 'px'; + textDiv.style.top = top + 'px'; textDiv.style.fontSize = fontHeight + 'px'; textDiv.style.fontFamily = style.fontFamily; textDiv.textContent = geom.str; textDiv.dataset.fontName = geom.fontName; - textDiv.dataset.angle = angle * (180 / Math.PI); + // Storing into dataset will convert number into string. + if (angle !== 0) { + textDiv.dataset.angle = angle * (180 / Math.PI); + } if (style.vertical) { textDiv.dataset.canvasWidth = geom.height * this.viewport.scale; } else { @@ -249,7 +279,7 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() { var end = match.end; var isSelected = (isSelectedPage && i === selectedMatchIdx); var highlightSuffix = (isSelected ? ' selected' : ''); - + if (isSelected && !this.isViewerInPresentationMode) { scrollIntoView(textDivs[begin.divIdx], { top: FIND_SCROLL_OFFSET_TOP, @@ -324,4 +354,3 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() { }; return TextLayerBuilder; })(); -