From 9a1758c6b88dbcee14d95d5b9da5e915fe933f8d Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Wed, 5 May 2021 16:36:18 +0200 Subject: [PATCH] Remove unnecessary closure in `src/display/text_layer.js`, and use standard classes With modern JavaScript modules, where you explicitly list the properties that should be exported, it's no longer necessary to wrap all of the code in a closure.[1] This patch also tries to clean-up/improve a couple of the existing JSDoc-comments. --- [1] This reduces the size, even of the *built* `pdf.js` file, since there's now a lot less unnecessary whitespace. --- src/display/text_layer.js | 1339 ++++++++++++++++++------------------- 1 file changed, 669 insertions(+), 670 deletions(-) diff --git a/src/display/text_layer.js b/src/display/text_layer.js index 356348308ff9b..7b3d82ca922c3 100644 --- a/src/display/text_layer.js +++ b/src/display/text_layer.js @@ -42,536 +42,516 @@ import { * selection enhancement. */ -/** - * @typedef {Object} TextLayerRenderTask - * @property {Promise} promise - * @property {() => void} cancel - * @property {(expandDivs: boolean) => void} expandTextDivs - */ +const MAX_TEXT_DIVS_TO_RENDER = 100000; +const DEFAULT_FONT_SIZE = 30; +const DEFAULT_FONT_ASCENT = 0.8; +const ascentCache = new Map(); +const AllWhitespaceRegexp = /^\s+$/g; + +function getAscent(fontFamily, ctx) { + const cachedAscent = ascentCache.get(fontFamily); + if (cachedAscent) { + return cachedAscent; + } -/** - * @type {(renderParameters: TextLayerRenderParameters) => TextLayerRenderTask} - */ -const renderTextLayer = (function renderTextLayerClosure() { - const MAX_TEXT_DIVS_TO_RENDER = 100000; - const DEFAULT_FONT_SIZE = 30; - const DEFAULT_FONT_ASCENT = 0.8; - const ascentCache = new Map(); - const AllWhitespaceRegexp = /^\s+$/g; - - function getAscent(fontFamily, ctx) { - const cachedAscent = ascentCache.get(fontFamily); - if (cachedAscent) { - return cachedAscent; - } - - ctx.save(); - ctx.font = `${DEFAULT_FONT_SIZE}px ${fontFamily}`; - const metrics = ctx.measureText(""); - - // Both properties aren't available by default in Firefox. - let ascent = metrics.fontBoundingBoxAscent; - let descent = Math.abs(metrics.fontBoundingBoxDescent); - if (ascent) { - ctx.restore(); - const ratio = ascent / (ascent + descent); - ascentCache.set(fontFamily, ratio); - return ratio; - } - - // Try basic heuristic to guess ascent/descent. - // Draw a g with baseline at 0,0 and then get the line - // number where a pixel has non-null red component (starting - // from bottom). - ctx.strokeStyle = "red"; - ctx.clearRect(0, 0, DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE); - ctx.strokeText("g", 0, 0); - let pixels = ctx.getImageData(0, 0, DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE) - .data; - descent = 0; - for (let i = pixels.length - 1 - 3; i >= 0; i -= 4) { - if (pixels[i] > 0) { - descent = Math.ceil(i / 4 / DEFAULT_FONT_SIZE); - break; - } - } - - // Draw an A with baseline at 0,DEFAULT_FONT_SIZE and then get the line - // number where a pixel has non-null red component (starting - // from top). - ctx.clearRect(0, 0, DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE); - ctx.strokeText("A", 0, DEFAULT_FONT_SIZE); - pixels = ctx.getImageData(0, 0, DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE).data; - ascent = 0; - for (let i = 0, ii = pixels.length; i < ii; i += 4) { - if (pixels[i] > 0) { - ascent = DEFAULT_FONT_SIZE - Math.floor(i / 4 / DEFAULT_FONT_SIZE); - break; - } - } + ctx.save(); + ctx.font = `${DEFAULT_FONT_SIZE}px ${fontFamily}`; + const metrics = ctx.measureText(""); + // Both properties aren't available by default in Firefox. + let ascent = metrics.fontBoundingBoxAscent; + let descent = Math.abs(metrics.fontBoundingBoxDescent); + if (ascent) { ctx.restore(); + const ratio = ascent / (ascent + descent); + ascentCache.set(fontFamily, ratio); + return ratio; + } - if (ascent) { - const ratio = ascent / (ascent + descent); - ascentCache.set(fontFamily, ratio); - return ratio; + // Try basic heuristic to guess ascent/descent. + // Draw a g with baseline at 0,0 and then get the line + // number where a pixel has non-null red component (starting + // from bottom). + ctx.strokeStyle = "red"; + ctx.clearRect(0, 0, DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE); + ctx.strokeText("g", 0, 0); + let pixels = ctx.getImageData(0, 0, DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE) + .data; + descent = 0; + for (let i = pixels.length - 1 - 3; i >= 0; i -= 4) { + if (pixels[i] > 0) { + descent = Math.ceil(i / 4 / DEFAULT_FONT_SIZE); + break; } - - ascentCache.set(fontFamily, DEFAULT_FONT_ASCENT); - return DEFAULT_FONT_ASCENT; } - function appendText(task, geom, styles, ctx) { - // Initialize all used properties to keep the caches monomorphic. - const textDiv = document.createElement("span"); - const textDivProperties = { - angle: 0, - canvasWidth: 0, - hasText: geom.str !== "", - hasEOL: geom.hasEOL, - originalTransform: null, - paddingBottom: 0, - paddingLeft: 0, - paddingRight: 0, - paddingTop: 0, - scale: 1, - }; - - textDiv.textContent = geom.str; - task._textDivs.push(textDiv); - - const tx = Util.transform(task._viewport.transform, geom.transform); - let angle = Math.atan2(tx[1], tx[0]); - const style = styles[geom.fontName]; - if (style.vertical) { - angle += Math.PI / 2; + // Draw an A with baseline at 0,DEFAULT_FONT_SIZE and then get the line + // number where a pixel has non-null red component (starting + // from top). + ctx.clearRect(0, 0, DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE); + ctx.strokeText("A", 0, DEFAULT_FONT_SIZE); + pixels = ctx.getImageData(0, 0, DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE).data; + ascent = 0; + for (let i = 0, ii = pixels.length; i < ii; i += 4) { + if (pixels[i] > 0) { + ascent = DEFAULT_FONT_SIZE - Math.floor(i / 4 / DEFAULT_FONT_SIZE); + break; } - const fontHeight = Math.hypot(tx[2], tx[3]); - const fontAscent = fontHeight * getAscent(style.fontFamily, ctx); + } - let left, 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); - } - // Setting the style properties individually, rather than all at once, - // should be OK since the `textDiv` isn't appended to the document yet. - textDiv.style.left = `${left}px`; - textDiv.style.top = `${top}px`; - textDiv.style.fontSize = `${fontHeight}px`; - textDiv.style.fontFamily = style.fontFamily; + ctx.restore(); - // Keeps screen readers from pausing on every new text span. - textDiv.setAttribute("role", "presentation"); + if (ascent) { + const ratio = ascent / (ascent + descent); + ascentCache.set(fontFamily, ratio); + return ratio; + } - // geom.dir may be 'ttb' for vertical texts. - textDiv.dir = geom.dir; + ascentCache.set(fontFamily, DEFAULT_FONT_ASCENT); + return DEFAULT_FONT_ASCENT; +} + +function appendText(task, geom, styles, ctx) { + // Initialize all used properties to keep the caches monomorphic. + const textDiv = document.createElement("span"); + const textDivProperties = { + angle: 0, + canvasWidth: 0, + hasText: geom.str !== "", + hasEOL: geom.hasEOL, + originalTransform: null, + paddingBottom: 0, + paddingLeft: 0, + paddingRight: 0, + paddingTop: 0, + scale: 1, + }; - // `fontName` is only used by the FontInspector, and we only use `dataset` - // here to make the font name available in the debugger. - if (task._fontInspectorEnabled) { - textDiv.dataset.fontName = geom.fontName; - } - if (angle !== 0) { - textDivProperties.angle = angle * (180 / Math.PI); - } - // We don't bother scaling single-char text divs, because it has very - // little effect on text highlighting. This makes scrolling on docs with - // lots of such divs a lot faster. - let shouldScaleText = false; + task._textDivs.push(textDiv); + + const tx = Util.transform(task._viewport.transform, geom.transform); + let angle = Math.atan2(tx[1], tx[0]); + const style = styles[geom.fontName]; + if (style.vertical) { + angle += Math.PI / 2; + } + const fontHeight = Math.hypot(tx[2], tx[3]); + const fontAscent = fontHeight * getAscent(style.fontFamily, ctx); + + let left, 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); + } + // Setting the style properties individually, rather than all at once, + // should be OK since the `textDiv` isn't appended to the document yet. + textDiv.style.left = `${left}px`; + textDiv.style.top = `${top}px`; + textDiv.style.fontSize = `${fontHeight}px`; + textDiv.style.fontFamily = style.fontFamily; + + // Keeps screen readers from pausing on every new text span. + textDiv.setAttribute("role", "presentation"); + + textDiv.textContent = geom.str; + // geom.dir may be 'ttb' for vertical texts. + textDiv.dir = geom.dir; + + // `fontName` is only used by the FontInspector, and we only use `dataset` + // here to make the font name available in the debugger. + if (task._fontInspectorEnabled) { + textDiv.dataset.fontName = geom.fontName; + } + if (angle !== 0) { + textDivProperties.angle = angle * (180 / Math.PI); + } + // We don't bother scaling single-char text divs, because it has very + // little effect on text highlighting. This makes scrolling on docs with + // lots of such divs a lot faster. + let shouldScaleText = false; + if ( + geom.str.length > 1 || + (task._enhanceTextSelection && AllWhitespaceRegexp.test(geom.str)) + ) { + shouldScaleText = true; + } else if (geom.transform[0] !== geom.transform[3]) { + const absScaleX = Math.abs(geom.transform[0]), + absScaleY = Math.abs(geom.transform[3]); + // When the horizontal/vertical scaling differs significantly, also scale + // even single-char text to improve highlighting (fixes issue11713.pdf). if ( - geom.str.length > 1 || - (task._enhanceTextSelection && AllWhitespaceRegexp.test(geom.str)) + absScaleX !== absScaleY && + Math.max(absScaleX, absScaleY) / Math.min(absScaleX, absScaleY) > 1.5 ) { shouldScaleText = true; - } else if (geom.transform[0] !== geom.transform[3]) { - const absScaleX = Math.abs(geom.transform[0]), - absScaleY = Math.abs(geom.transform[3]); - // When the horizontal/vertical scaling differs significantly, also scale - // even single-char text to improve highlighting (fixes issue11713.pdf). - if ( - absScaleX !== absScaleY && - Math.max(absScaleX, absScaleY) / Math.min(absScaleX, absScaleY) > 1.5 - ) { - shouldScaleText = true; - } - } - if (shouldScaleText) { - if (style.vertical) { - textDivProperties.canvasWidth = geom.height * task._viewport.scale; - } else { - textDivProperties.canvasWidth = geom.width * task._viewport.scale; - } - } - task._textDivProperties.set(textDiv, textDivProperties); - if (task._textContentStream) { - task._layoutText(textDiv); } - - if (task._enhanceTextSelection && textDivProperties.hasText) { - let angleCos = 1, - angleSin = 0; - if (angle !== 0) { - angleCos = Math.cos(angle); - angleSin = Math.sin(angle); - } - const divWidth = - (style.vertical ? geom.height : geom.width) * task._viewport.scale; - const divHeight = fontHeight; - - let m, b; - if (angle !== 0) { - m = [angleCos, angleSin, -angleSin, angleCos, left, top]; - b = Util.getAxialAlignedBoundingBox([0, 0, divWidth, divHeight], m); - } else { - b = [left, top, left + divWidth, top + divHeight]; - } - - task._bounds.push({ - left: b[0], - top: b[1], - right: b[2], - bottom: b[3], - div: textDiv, - size: [divWidth, divHeight], - m, - }); + } + if (shouldScaleText) { + if (style.vertical) { + textDivProperties.canvasWidth = geom.height * task._viewport.scale; + } else { + textDivProperties.canvasWidth = geom.width * task._viewport.scale; } } + task._textDivProperties.set(textDiv, textDivProperties); + if (task._textContentStream) { + task._layoutText(textDiv); + } - function render(task) { - if (task._canceled) { - return; + if (task._enhanceTextSelection && textDivProperties.hasText) { + let angleCos = 1, + angleSin = 0; + if (angle !== 0) { + angleCos = Math.cos(angle); + angleSin = Math.sin(angle); } - const textDivs = task._textDivs; - const capability = task._capability; - const textDivsLength = textDivs.length; + const divWidth = + (style.vertical ? geom.height : geom.width) * task._viewport.scale; + const divHeight = fontHeight; - // No point in rendering many divs as it would make the browser - // unusable even after the divs are rendered. - if (textDivsLength > MAX_TEXT_DIVS_TO_RENDER) { - task._renderingDone = true; - capability.resolve(); - return; + let m, b; + if (angle !== 0) { + m = [angleCos, angleSin, -angleSin, angleCos, left, top]; + b = Util.getAxialAlignedBoundingBox([0, 0, divWidth, divHeight], m); + } else { + b = [left, top, left + divWidth, top + divHeight]; } - if (!task._textContentStream) { - for (let i = 0; i < textDivsLength; i++) { - task._layoutText(textDivs[i]); - } - } + task._bounds.push({ + left: b[0], + top: b[1], + right: b[2], + bottom: b[3], + div: textDiv, + size: [divWidth, divHeight], + m, + }); + } +} + +function render(task) { + if (task._canceled) { + return; + } + const textDivs = task._textDivs; + const capability = task._capability; + const textDivsLength = textDivs.length; + // No point in rendering many divs as it would make the browser + // unusable even after the divs are rendered. + if (textDivsLength > MAX_TEXT_DIVS_TO_RENDER) { task._renderingDone = true; capability.resolve(); + return; } - function findPositiveMin(ts, offset, count) { - let result = 0; - for (let i = 0; i < count; i++) { - const t = ts[offset++]; - if (t > 0) { - result = result ? Math.min(t, result) : t; - } + if (!task._textContentStream) { + for (let i = 0; i < textDivsLength; i++) { + task._layoutText(textDivs[i]); } - return result; } - function expand(task) { - const bounds = task._bounds; - const viewport = task._viewport; - - const expanded = expandBounds(viewport.width, viewport.height, bounds); - for (let i = 0; i < expanded.length; i++) { - const div = bounds[i].div; - const divProperties = task._textDivProperties.get(div); - if (divProperties.angle === 0) { - divProperties.paddingLeft = bounds[i].left - expanded[i].left; - divProperties.paddingTop = bounds[i].top - expanded[i].top; - divProperties.paddingRight = expanded[i].right - bounds[i].right; - divProperties.paddingBottom = expanded[i].bottom - bounds[i].bottom; - task._textDivProperties.set(div, divProperties); - continue; - } - // Box is rotated -- trying to find padding so rotated div will not - // exceed its expanded bounds. - const e = expanded[i], - b = bounds[i]; - const m = b.m, - c = m[0], - s = m[1]; - // Finding intersections with expanded box. - const points = [[0, 0], [0, b.size[1]], [b.size[0], 0], b.size]; - const ts = new Float64Array(64); - for (let j = 0, jj = points.length; j < jj; j++) { - const t = Util.applyTransform(points[j], m); - ts[j + 0] = c && (e.left - t[0]) / c; - ts[j + 4] = s && (e.top - t[1]) / s; - ts[j + 8] = c && (e.right - t[0]) / c; - ts[j + 12] = s && (e.bottom - t[1]) / s; - - ts[j + 16] = s && (e.left - t[0]) / -s; - ts[j + 20] = c && (e.top - t[1]) / c; - ts[j + 24] = s && (e.right - t[0]) / -s; - ts[j + 28] = c && (e.bottom - t[1]) / c; - - ts[j + 32] = c && (e.left - t[0]) / -c; - ts[j + 36] = s && (e.top - t[1]) / -s; - ts[j + 40] = c && (e.right - t[0]) / -c; - ts[j + 44] = s && (e.bottom - t[1]) / -s; - - ts[j + 48] = s && (e.left - t[0]) / s; - ts[j + 52] = c && (e.top - t[1]) / -c; - ts[j + 56] = s && (e.right - t[0]) / s; - ts[j + 60] = c && (e.bottom - t[1]) / -c; - } - // Not based on math, but to simplify calculations, using cos and sin - // absolute values to not exceed the box (it can but insignificantly). - const boxScale = 1 + Math.min(Math.abs(c), Math.abs(s)); - divProperties.paddingLeft = findPositiveMin(ts, 32, 16) / boxScale; - divProperties.paddingTop = findPositiveMin(ts, 48, 16) / boxScale; - divProperties.paddingRight = findPositiveMin(ts, 0, 16) / boxScale; - divProperties.paddingBottom = findPositiveMin(ts, 16, 16) / boxScale; - task._textDivProperties.set(div, divProperties); + task._renderingDone = true; + capability.resolve(); +} + +function findPositiveMin(ts, offset, count) { + let result = 0; + for (let i = 0; i < count; i++) { + const t = ts[offset++]; + if (t > 0) { + result = result ? Math.min(t, result) : t; } } - - function expandBounds(width, height, boxes) { - const bounds = boxes.map(function (box, i) { - return { - x1: box.left, - y1: box.top, - x2: box.right, - y2: box.bottom, - index: i, - x1New: undefined, - x2New: undefined, - }; - }); - expandBoundsLTR(width, bounds); - - const expanded = new Array(boxes.length); - for (const b of bounds) { - const i = b.index; - expanded[i] = { - left: b.x1New, - top: 0, - right: b.x2New, - bottom: 0, - }; + return result; +} + +function expand(task) { + const bounds = task._bounds; + const viewport = task._viewport; + + const expanded = expandBounds(viewport.width, viewport.height, bounds); + for (let i = 0; i < expanded.length; i++) { + const div = bounds[i].div; + const divProperties = task._textDivProperties.get(div); + if (divProperties.angle === 0) { + divProperties.paddingLeft = bounds[i].left - expanded[i].left; + divProperties.paddingTop = bounds[i].top - expanded[i].top; + divProperties.paddingRight = expanded[i].right - bounds[i].right; + divProperties.paddingBottom = expanded[i].bottom - bounds[i].bottom; + task._textDivProperties.set(div, divProperties); + continue; } - - // Rotating on 90 degrees and extending extended boxes. Reusing the bounds - // array and objects. - boxes.map(function (box, i) { - const e = expanded[i], - b = bounds[i]; - b.x1 = box.top; - b.y1 = width - e.right; - b.x2 = box.bottom; - b.y2 = width - e.left; - b.index = i; - b.x1New = undefined; - b.x2New = undefined; - }); - expandBoundsLTR(height, bounds); - - for (const b of bounds) { - const i = b.index; - expanded[i].top = b.x1New; - expanded[i].bottom = b.x2New; + // Box is rotated -- trying to find padding so rotated div will not + // exceed its expanded bounds. + const e = expanded[i], + b = bounds[i]; + const m = b.m, + c = m[0], + s = m[1]; + // Finding intersections with expanded box. + const points = [[0, 0], [0, b.size[1]], [b.size[0], 0], b.size]; + const ts = new Float64Array(64); + for (let j = 0, jj = points.length; j < jj; j++) { + const t = Util.applyTransform(points[j], m); + ts[j + 0] = c && (e.left - t[0]) / c; + ts[j + 4] = s && (e.top - t[1]) / s; + ts[j + 8] = c && (e.right - t[0]) / c; + ts[j + 12] = s && (e.bottom - t[1]) / s; + + ts[j + 16] = s && (e.left - t[0]) / -s; + ts[j + 20] = c && (e.top - t[1]) / c; + ts[j + 24] = s && (e.right - t[0]) / -s; + ts[j + 28] = c && (e.bottom - t[1]) / c; + + ts[j + 32] = c && (e.left - t[0]) / -c; + ts[j + 36] = s && (e.top - t[1]) / -s; + ts[j + 40] = c && (e.right - t[0]) / -c; + ts[j + 44] = s && (e.bottom - t[1]) / -s; + + ts[j + 48] = s && (e.left - t[0]) / s; + ts[j + 52] = c && (e.top - t[1]) / -c; + ts[j + 56] = s && (e.right - t[0]) / s; + ts[j + 60] = c && (e.bottom - t[1]) / -c; } - return expanded; + // Not based on math, but to simplify calculations, using cos and sin + // absolute values to not exceed the box (it can but insignificantly). + const boxScale = 1 + Math.min(Math.abs(c), Math.abs(s)); + divProperties.paddingLeft = findPositiveMin(ts, 32, 16) / boxScale; + divProperties.paddingTop = findPositiveMin(ts, 48, 16) / boxScale; + divProperties.paddingRight = findPositiveMin(ts, 0, 16) / boxScale; + divProperties.paddingBottom = findPositiveMin(ts, 16, 16) / boxScale; + task._textDivProperties.set(div, divProperties); + } +} + +function expandBounds(width, height, boxes) { + const bounds = boxes.map(function (box, i) { + return { + x1: box.left, + y1: box.top, + x2: box.right, + y2: box.bottom, + index: i, + x1New: undefined, + x2New: undefined, + }; + }); + expandBoundsLTR(width, bounds); + + const expanded = new Array(boxes.length); + for (const b of bounds) { + const i = b.index; + expanded[i] = { + left: b.x1New, + top: 0, + right: b.x2New, + bottom: 0, + }; } - function expandBoundsLTR(width, bounds) { - // Sorting by x1 coordinate and walk by the bounds in the same order. - bounds.sort(function (a, b) { - return a.x1 - b.x1 || a.index - b.index; - }); + // Rotating on 90 degrees and extending extended boxes. Reusing the bounds + // array and objects. + boxes.map(function (box, i) { + const e = expanded[i], + b = bounds[i]; + b.x1 = box.top; + b.y1 = width - e.right; + b.x2 = box.bottom; + b.y2 = width - e.left; + b.index = i; + b.x1New = undefined; + b.x2New = undefined; + }); + expandBoundsLTR(height, bounds); + + for (const b of bounds) { + const i = b.index; + expanded[i].top = b.x1New; + expanded[i].bottom = b.x2New; + } + return expanded; +} + +function expandBoundsLTR(width, bounds) { + // Sorting by x1 coordinate and walk by the bounds in the same order. + bounds.sort(function (a, b) { + return a.x1 - b.x1 || a.index - b.index; + }); + + // First we see on the horizon is a fake boundary. + const fakeBoundary = { + x1: -Infinity, + y1: -Infinity, + x2: 0, + y2: Infinity, + index: -1, + x1New: 0, + x2New: 0, + }; + const horizon = [ + { + start: -Infinity, + end: Infinity, + boundary: fakeBoundary, + }, + ]; + + for (const boundary of bounds) { + // Searching for the affected part of horizon. + // TODO red-black tree or simple binary search + let i = 0; + while (i < horizon.length && horizon[i].end <= boundary.y1) { + i++; + } + let j = horizon.length - 1; + while (j >= 0 && horizon[j].start >= boundary.y2) { + j--; + } - // First we see on the horizon is a fake boundary. - const fakeBoundary = { - x1: -Infinity, - y1: -Infinity, - x2: 0, - y2: Infinity, - index: -1, - x1New: 0, - x2New: 0, - }; - const horizon = [ - { - start: -Infinity, - end: Infinity, - boundary: fakeBoundary, - }, - ]; - - for (const boundary of bounds) { - // Searching for the affected part of horizon. - // TODO red-black tree or simple binary search - let i = 0; - while (i < horizon.length && horizon[i].end <= boundary.y1) { - i++; + let horizonPart, affectedBoundary; + let q, + k, + maxXNew = -Infinity; + for (q = i; q <= j; q++) { + horizonPart = horizon[q]; + affectedBoundary = horizonPart.boundary; + let xNew; + if (affectedBoundary.x2 > boundary.x1) { + // In the middle of the previous element, new x shall be at the + // boundary start. Extending if further if the affected boundary + // placed on top of the current one. + xNew = + affectedBoundary.index > boundary.index + ? affectedBoundary.x1New + : boundary.x1; + } else if (affectedBoundary.x2New === undefined) { + // We have some space in between, new x in middle will be a fair + // choice. + xNew = (affectedBoundary.x2 + boundary.x1) / 2; + } else { + // Affected boundary has x2new set, using it as new x. + xNew = affectedBoundary.x2New; } - let j = horizon.length - 1; - while (j >= 0 && horizon[j].start >= boundary.y2) { - j--; + if (xNew > maxXNew) { + maxXNew = xNew; } + } + + // Set new x1 for current boundary. + boundary.x1New = maxXNew; - let horizonPart, affectedBoundary; - let q, - k, - maxXNew = -Infinity; - for (q = i; q <= j; q++) { - horizonPart = horizon[q]; - affectedBoundary = horizonPart.boundary; - let xNew; + // Adjusts new x2 for the affected boundaries. + for (q = i; q <= j; q++) { + horizonPart = horizon[q]; + affectedBoundary = horizonPart.boundary; + if (affectedBoundary.x2New === undefined) { + // Was not set yet, choosing new x if possible. if (affectedBoundary.x2 > boundary.x1) { - // In the middle of the previous element, new x shall be at the - // boundary start. Extending if further if the affected boundary - // placed on top of the current one. - xNew = - affectedBoundary.index > boundary.index - ? affectedBoundary.x1New - : boundary.x1; - } else if (affectedBoundary.x2New === undefined) { - // We have some space in between, new x in middle will be a fair - // choice. - xNew = (affectedBoundary.x2 + boundary.x1) / 2; + // Current and affected boundaries intersect. If affected boundary + // is placed on top of the current, shrinking the affected. + if (affectedBoundary.index > boundary.index) { + affectedBoundary.x2New = affectedBoundary.x2; + } } else { - // Affected boundary has x2new set, using it as new x. - xNew = affectedBoundary.x2New; - } - if (xNew > maxXNew) { - maxXNew = xNew; + affectedBoundary.x2New = maxXNew; } + } else if (affectedBoundary.x2New > maxXNew) { + // Affected boundary is touching new x, pushing it back. + affectedBoundary.x2New = Math.max(maxXNew, affectedBoundary.x2); } + } - // Set new x1 for current boundary. - boundary.x1New = maxXNew; - - // Adjusts new x2 for the affected boundaries. - for (q = i; q <= j; q++) { - horizonPart = horizon[q]; - affectedBoundary = horizonPart.boundary; - if (affectedBoundary.x2New === undefined) { - // Was not set yet, choosing new x if possible. - if (affectedBoundary.x2 > boundary.x1) { - // Current and affected boundaries intersect. If affected boundary - // is placed on top of the current, shrinking the affected. - if (affectedBoundary.index > boundary.index) { - affectedBoundary.x2New = affectedBoundary.x2; - } - } else { - affectedBoundary.x2New = maxXNew; - } - } else if (affectedBoundary.x2New > maxXNew) { - // Affected boundary is touching new x, pushing it back. - affectedBoundary.x2New = Math.max(maxXNew, affectedBoundary.x2); - } + // Fixing the horizon. + const changedHorizon = []; + let lastBoundary = null; + for (q = i; q <= j; q++) { + horizonPart = horizon[q]; + affectedBoundary = horizonPart.boundary; + // Checking which boundary will be visible. + const useBoundary = + affectedBoundary.x2 > boundary.x2 ? affectedBoundary : boundary; + if (lastBoundary === useBoundary) { + // Merging with previous. + changedHorizon[changedHorizon.length - 1].end = horizonPart.end; + } else { + changedHorizon.push({ + start: horizonPart.start, + end: horizonPart.end, + boundary: useBoundary, + }); + lastBoundary = useBoundary; } + } + if (horizon[i].start < boundary.y1) { + changedHorizon[0].start = boundary.y1; + changedHorizon.unshift({ + start: horizon[i].start, + end: boundary.y1, + boundary: horizon[i].boundary, + }); + } + if (boundary.y2 < horizon[j].end) { + changedHorizon[changedHorizon.length - 1].end = boundary.y2; + changedHorizon.push({ + start: boundary.y2, + end: horizon[j].end, + boundary: horizon[j].boundary, + }); + } - // Fixing the horizon. - const changedHorizon = []; - let lastBoundary = null; - for (q = i; q <= j; q++) { - horizonPart = horizon[q]; - affectedBoundary = horizonPart.boundary; - // Checking which boundary will be visible. - const useBoundary = - affectedBoundary.x2 > boundary.x2 ? affectedBoundary : boundary; - if (lastBoundary === useBoundary) { - // Merging with previous. - changedHorizon[changedHorizon.length - 1].end = horizonPart.end; - } else { - changedHorizon.push({ - start: horizonPart.start, - end: horizonPart.end, - boundary: useBoundary, - }); - lastBoundary = useBoundary; - } + // Set x2 new of boundary that is no longer visible (see overlapping case + // above). + // TODO more efficient, e.g. via reference counting. + for (q = i; q <= j; q++) { + horizonPart = horizon[q]; + affectedBoundary = horizonPart.boundary; + if (affectedBoundary.x2New !== undefined) { + continue; } - if (horizon[i].start < boundary.y1) { - changedHorizon[0].start = boundary.y1; - changedHorizon.unshift({ - start: horizon[i].start, - end: boundary.y1, - boundary: horizon[i].boundary, - }); + let used = false; + for ( + k = i - 1; + !used && k >= 0 && horizon[k].start >= affectedBoundary.y1; + k-- + ) { + used = horizon[k].boundary === affectedBoundary; } - if (boundary.y2 < horizon[j].end) { - changedHorizon[changedHorizon.length - 1].end = boundary.y2; - changedHorizon.push({ - start: boundary.y2, - end: horizon[j].end, - boundary: horizon[j].boundary, - }); + for ( + k = j + 1; + !used && k < horizon.length && horizon[k].end <= affectedBoundary.y2; + k++ + ) { + used = horizon[k].boundary === affectedBoundary; } - - // Set x2 new of boundary that is no longer visible (see overlapping case - // above). - // TODO more efficient, e.g. via reference counting. - for (q = i; q <= j; q++) { - horizonPart = horizon[q]; - affectedBoundary = horizonPart.boundary; - if (affectedBoundary.x2New !== undefined) { - continue; - } - let used = false; - for ( - k = i - 1; - !used && k >= 0 && horizon[k].start >= affectedBoundary.y1; - k-- - ) { - used = horizon[k].boundary === affectedBoundary; - } - for ( - k = j + 1; - !used && k < horizon.length && horizon[k].end <= affectedBoundary.y2; - k++ - ) { - used = horizon[k].boundary === affectedBoundary; - } - for (k = 0; !used && k < changedHorizon.length; k++) { - used = changedHorizon[k].boundary === affectedBoundary; - } - if (!used) { - affectedBoundary.x2New = maxXNew; - } + for (k = 0; !used && k < changedHorizon.length; k++) { + used = changedHorizon[k].boundary === affectedBoundary; + } + if (!used) { + affectedBoundary.x2New = maxXNew; } - - Array.prototype.splice.apply( - horizon, - [i, j - i + 1].concat(changedHorizon) - ); } - // Set new x2 for all unset boundaries. - for (const horizonPart of horizon) { - const affectedBoundary = horizonPart.boundary; - if (affectedBoundary.x2New === undefined) { - affectedBoundary.x2New = Math.max(width, affectedBoundary.x2); - } + Array.prototype.splice.apply( + horizon, + [i, j - i + 1].concat(changedHorizon) + ); + } + + // Set new x2 for all unset boundaries. + for (const horizonPart of horizon) { + const affectedBoundary = horizonPart.boundary; + if (affectedBoundary.x2New === undefined) { + affectedBoundary.x2New = Math.max(width, affectedBoundary.x2); } } +} - /** - * Text layer rendering task. - * - * @param {TextContent} textContent - * @param {HTMLElement} container - * @param {PageViewport} viewport - * @param {Array} textDivs - * @param {boolean} enhanceTextSelection - * @private - */ - function TextLayerRenderTask({ +class TextLayerRenderTask { + constructor({ textContent, textContentStream, container, @@ -616,229 +596,248 @@ const renderTextLayer = (function renderTextLayerClosure() { /* Avoid "Uncaught promise" messages in the console. */ }); } - TextLayerRenderTask.prototype = { - get promise() { - return this._capability.promise; - }, - cancel: function TextLayer_cancel() { - this._canceled = true; - if (this._reader) { - this._reader.cancel(new AbortException("TextLayer task cancelled.")); - this._reader = null; - } - if (this._renderTimer !== null) { - clearTimeout(this._renderTimer); - this._renderTimer = null; - } - this._capability.reject(new Error("TextLayer task cancelled.")); - }, + /** + * Promise for textLayer rendering task completion. + * @type {Promise} + */ + get promise() { + return this._capability.promise; + } + + /** + * Cancel rendering of the textLayer. + */ + cancel() { + this._canceled = true; + if (this._reader) { + this._reader.cancel(new AbortException("TextLayer task cancelled.")); + this._reader = null; + } + if (this._renderTimer !== null) { + clearTimeout(this._renderTimer); + this._renderTimer = null; + } + this._capability.reject(new Error("TextLayer task cancelled.")); + } - _processItems(items, styleCache) { - for (let i = 0, len = items.length; i < len; i++) { - if (items[i].str === undefined) { - if ( - items[i].type === "beginMarkedContentProps" || - items[i].type === "beginMarkedContent" - ) { - const parent = this._container; - this._container = document.createElement("span"); - this._container.classList.add("markedContent"); - if (items[i].id !== null) { - this._container.setAttribute("id", `${items[i].id}`); - } - parent.appendChild(this._container); - } else if (items[i].type === "endMarkedContent") { - this._container = this._container.parentNode; + /** + * @private + */ + _processItems(items, styleCache) { + for (let i = 0, len = items.length; i < len; i++) { + if (items[i].str === undefined) { + if ( + items[i].type === "beginMarkedContentProps" || + items[i].type === "beginMarkedContent" + ) { + const parent = this._container; + this._container = document.createElement("span"); + this._container.classList.add("markedContent"); + if (items[i].id !== null) { + this._container.setAttribute("id", `${items[i].id}`); } - continue; + parent.appendChild(this._container); + } else if (items[i].type === "endMarkedContent") { + this._container = this._container.parentNode; } - this._textContentItemsStr.push(items[i].str); - appendText(this, items[i], styleCache, this._layoutTextCtx); + continue; } - }, - - _layoutText(textDiv) { - const textDivProperties = this._textDivProperties.get(textDiv); + this._textContentItemsStr.push(items[i].str); + appendText(this, items[i], styleCache, this._layoutTextCtx); + } + } - let transform = ""; - if (textDivProperties.canvasWidth !== 0 && textDivProperties.hasText) { - const { fontSize, fontFamily } = textDiv.style; + /** + * @private + */ + _layoutText(textDiv) { + const textDivProperties = this._textDivProperties.get(textDiv); - // Only build font string and set to context if different from last. - if ( - fontSize !== this._layoutTextLastFontSize || - fontFamily !== this._layoutTextLastFontFamily - ) { - this._layoutTextCtx.font = `${fontSize} ${fontFamily}`; - this._layoutTextLastFontSize = fontSize; - this._layoutTextLastFontFamily = fontFamily; - } - // Only measure the width for multi-char text divs, see `appendText`. - const { width } = this._layoutTextCtx.measureText(textDiv.textContent); + let transform = ""; + if (textDivProperties.canvasWidth !== 0 && textDivProperties.hasText) { + const { fontSize, fontFamily } = textDiv.style; - if (width > 0) { - textDivProperties.scale = textDivProperties.canvasWidth / width; - transform = `scaleX(${textDivProperties.scale})`; - } - } - if (textDivProperties.angle !== 0) { - transform = `rotate(${textDivProperties.angle}deg) ${transform}`; - } - if (transform.length > 0) { - if (this._enhanceTextSelection) { - textDivProperties.originalTransform = transform; - } - textDiv.style.transform = transform; + // Only build font string and set to context if different from last. + if ( + fontSize !== this._layoutTextLastFontSize || + fontFamily !== this._layoutTextLastFontFamily + ) { + this._layoutTextCtx.font = `${fontSize} ${fontFamily}`; + this._layoutTextLastFontSize = fontSize; + this._layoutTextLastFontFamily = fontFamily; } + // Only measure the width for multi-char text divs, see `appendText`. + const { width } = this._layoutTextCtx.measureText(textDiv.textContent); - if (textDivProperties.hasText) { - this._container.appendChild(textDiv); + if (width > 0) { + textDivProperties.scale = textDivProperties.canvasWidth / width; + transform = `scaleX(${textDivProperties.scale})`; } - if (textDivProperties.hasEOL) { - const br = document.createElement("br"); - br.setAttribute("role", "presentation"); - this._container.appendChild(br); + } + if (textDivProperties.angle !== 0) { + transform = `rotate(${textDivProperties.angle}deg) ${transform}`; + } + if (transform.length > 0) { + if (this._enhanceTextSelection) { + textDivProperties.originalTransform = transform; } - }, + textDiv.style.transform = transform; + } + + if (textDivProperties.hasText) { + this._container.appendChild(textDiv); + } + if (textDivProperties.hasEOL) { + const br = document.createElement("br"); + br.setAttribute("role", "presentation"); + this._container.appendChild(br); + } + } + + /** + * @private + */ + _render(timeout = 0) { + const capability = createPromiseCapability(); + let styleCache = Object.create(null); - _render: function TextLayer_render(timeout) { - const capability = createPromiseCapability(); - let styleCache = Object.create(null); + // The temporary canvas is used to measure text length in the DOM. + const canvas = this._document.createElement("canvas"); + canvas.height = canvas.width = DEFAULT_FONT_SIZE; - // The temporary canvas is used to measure text length in the DOM. - const canvas = this._document.createElement("canvas"); - canvas.height = canvas.width = DEFAULT_FONT_SIZE; + if ( + typeof PDFJSDev === "undefined" || + PDFJSDev.test("MOZCENTRAL || GENERIC") + ) { + canvas.mozOpaque = true; + } + this._layoutTextCtx = canvas.getContext("2d", { alpha: false }); - if ( - typeof PDFJSDev === "undefined" || - PDFJSDev.test("MOZCENTRAL || GENERIC") - ) { - canvas.mozOpaque = true; - } - this._layoutTextCtx = canvas.getContext("2d", { alpha: false }); - - if (this._textContent) { - const textItems = this._textContent.items; - const textStyles = this._textContent.styles; - this._processItems(textItems, textStyles); - capability.resolve(); - } else if (this._textContentStream) { - const pump = () => { - this._reader.read().then(({ value, done }) => { - if (done) { - capability.resolve(); - return; - } - - Object.assign(styleCache, value.styles); - this._processItems(value.items, styleCache); - pump(); - }, capability.reject); - }; - - this._reader = this._textContentStream.getReader(); - pump(); - } else { - throw new Error( - 'Neither "textContent" nor "textContentStream"' + - " parameters specified." - ); - } + if (this._textContent) { + const textItems = this._textContent.items; + const textStyles = this._textContent.styles; + this._processItems(textItems, textStyles); + capability.resolve(); + } else if (this._textContentStream) { + const pump = () => { + this._reader.read().then(({ value, done }) => { + if (done) { + capability.resolve(); + return; + } - capability.promise.then(() => { - styleCache = null; - if (!timeout) { - // Render right away - render(this); - } else { - // Schedule - this._renderTimer = setTimeout(() => { - render(this); - this._renderTimer = null; - }, timeout); - } - }, this._capability.reject); - }, + Object.assign(styleCache, value.styles); + this._processItems(value.items, styleCache); + pump(); + }, capability.reject); + }; - expandTextDivs: function TextLayer_expandTextDivs(expandDivs) { - if (!this._enhanceTextSelection || !this._renderingDone) { - return; - } - if (this._bounds !== null) { - expand(this); - this._bounds = null; + this._reader = this._textContentStream.getReader(); + pump(); + } else { + throw new Error( + 'Neither "textContent" nor "textContentStream"' + + " parameters specified." + ); + } + + capability.promise.then(() => { + styleCache = null; + if (!timeout) { + // Render right away + render(this); + } else { + // Schedule + this._renderTimer = setTimeout(() => { + render(this); + this._renderTimer = null; + }, timeout); } - const transformBuf = [], - paddingBuf = []; + }, this._capability.reject); + } - for (let i = 0, ii = this._textDivs.length; i < ii; i++) { - const div = this._textDivs[i]; - const divProps = this._textDivProperties.get(div); + /** + * @param {boolean} [expandDivs] + */ + expandTextDivs(expandDivs = false) { + if (!this._enhanceTextSelection || !this._renderingDone) { + return; + } + if (this._bounds !== null) { + expand(this); + this._bounds = null; + } + const transformBuf = [], + paddingBuf = []; - if (!divProps.hasText) { - continue; - } - if (expandDivs) { - transformBuf.length = 0; - paddingBuf.length = 0; + for (let i = 0, ii = this._textDivs.length; i < ii; i++) { + const div = this._textDivs[i]; + const divProps = this._textDivProperties.get(div); - if (divProps.originalTransform) { - transformBuf.push(divProps.originalTransform); - } - if (divProps.paddingTop > 0) { - paddingBuf.push(`${divProps.paddingTop}px`); - transformBuf.push(`translateY(${-divProps.paddingTop}px)`); - } else { - paddingBuf.push(0); - } - if (divProps.paddingRight > 0) { - paddingBuf.push(`${divProps.paddingRight / divProps.scale}px`); - } else { - paddingBuf.push(0); - } - if (divProps.paddingBottom > 0) { - 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 (!divProps.hasText) { + continue; + } + if (expandDivs) { + transformBuf.length = 0; + paddingBuf.length = 0; - div.style.padding = paddingBuf.join(" "); - if (transformBuf.length) { - div.style.transform = transformBuf.join(" "); - } + if (divProps.originalTransform) { + transformBuf.push(divProps.originalTransform); + } + if (divProps.paddingTop > 0) { + paddingBuf.push(`${divProps.paddingTop}px`); + transformBuf.push(`translateY(${-divProps.paddingTop}px)`); } else { - div.style.padding = null; - div.style.transform = divProps.originalTransform; + paddingBuf.push(0); + } + if (divProps.paddingRight > 0) { + paddingBuf.push(`${divProps.paddingRight / divProps.scale}px`); + } else { + paddingBuf.push(0); + } + if (divProps.paddingBottom > 0) { + 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); } - } - }, - }; - // eslint-disable-next-line no-shadow - function renderTextLayer(renderParameters) { - const task = new TextLayerRenderTask({ - textContent: renderParameters.textContent, - textContentStream: renderParameters.textContentStream, - container: renderParameters.container, - viewport: renderParameters.viewport, - textDivs: renderParameters.textDivs, - textContentItemsStr: renderParameters.textContentItemsStr, - enhanceTextSelection: renderParameters.enhanceTextSelection, - }); - task._render(renderParameters.timeout); - return task; + div.style.padding = paddingBuf.join(" "); + if (transformBuf.length) { + div.style.transform = transformBuf.join(" "); + } + } else { + div.style.padding = null; + div.style.transform = divProps.originalTransform; + } + } } +} - return renderTextLayer; -})(); +/** + * @param {TextLayerRenderParameters} renderParameters + * @returns {TextLayerRenderTask} + */ +function renderTextLayer(renderParameters) { + const task = new TextLayerRenderTask({ + textContent: renderParameters.textContent, + textContentStream: renderParameters.textContentStream, + container: renderParameters.container, + viewport: renderParameters.viewport, + textDivs: renderParameters.textDivs, + textContentItemsStr: renderParameters.textContentItemsStr, + enhanceTextSelection: renderParameters.enhanceTextSelection, + }); + task._render(renderParameters.timeout); + return task; +} export { renderTextLayer };