[api-minor] Re-factor the basic textLayer-functionality

This is very old code, and predates e.g. the introduction of JavaScript classes, which creates unnecessarily unwieldy code in the viewer.
By introducing a new `TextLayer` class in the API, similar to how e.g. the `AnnotationLayer` looks, we're able to keep most parameters on the class-instance itself. This removes the need to manually track them in the viewer, and simplifies the call-sites.

This also removes the `numTextDivs` parameter from the "textlayerrendered" event, since that's only added to support default-viewer functionality that no longer exists.

Finally we try, as far as possible, to polyfill the old `renderTextLayer` and `updateTextLayer` functions since they are exposed in the library API.
For *simple* invocations of `renderTextLayer` the behaviour should thus be the same, with only a warning printed in the console.
This commit is contained in:
Jonas Jenwald 2024-05-16 11:28:06 +02:00
parent 63b66b412c
commit 15b5808eee
9 changed files with 383 additions and 377 deletions

View file

@ -62,7 +62,6 @@ import {
NodeStandardFontDataFactory, NodeStandardFontDataFactory,
} from "display-node_utils"; } from "display-node_utils";
import { CanvasGraphics } from "./canvas.js"; import { CanvasGraphics } from "./canvas.js";
import { cleanupTextLayer } from "./text_layer.js";
import { GlobalWorkerOptions } from "./worker_options.js"; import { GlobalWorkerOptions } from "./worker_options.js";
import { MessageHandler } from "../shared/message_handler.js"; import { MessageHandler } from "../shared/message_handler.js";
import { Metadata } from "./metadata.js"; import { Metadata } from "./metadata.js";
@ -71,6 +70,7 @@ import { PDFDataTransportStream } from "./transport_stream.js";
import { PDFFetchStream } from "display-fetch_stream"; import { PDFFetchStream } from "display-fetch_stream";
import { PDFNetworkStream } from "display-network"; import { PDFNetworkStream } from "display-network";
import { PDFNodeStream } from "display-node_stream"; import { PDFNodeStream } from "display-node_stream";
import { TextLayer } from "./text_layer.js";
import { XfaText } from "./xfa_text.js"; import { XfaText } from "./xfa_text.js";
const DEFAULT_RANGE_CHUNK_SIZE = 65536; // 2^16 = 65536 const DEFAULT_RANGE_CHUNK_SIZE = 65536; // 2^16 = 65536
@ -2511,7 +2511,7 @@ class WorkerTransport {
this.fontLoader.clear(); this.fontLoader.clear();
this.#methodPromises.clear(); this.#methodPromises.clear();
this.filterFactory.destroy(); this.filterFactory.destroy();
cleanupTextLayer(); TextLayer.cleanup();
this._networkStream?.cancelAllRequests( this._networkStream?.cancelAllRequests(
new AbortException("Worker was terminated.") new AbortException("Worker was terminated.")
@ -3085,7 +3085,7 @@ class WorkerTransport {
} }
this.#methodPromises.clear(); this.#methodPromises.clear();
this.filterFactory.destroy(/* keepHCM = */ true); this.filterFactory.destroy(/* keepHCM = */ true);
cleanupTextLayer(); TextLayer.cleanup();
} }
cachedPageNumber(ref) { cachedPageNumber(ref) {

View file

@ -17,12 +17,10 @@
/** @typedef {import("./api").TextContent} TextContent */ /** @typedef {import("./api").TextContent} TextContent */
import { AbortException, Util, warn } from "../shared/util.js"; import { AbortException, Util, warn } from "../shared/util.js";
import { setLayerDimensions } from "./display_utils.js"; import { deprecated, setLayerDimensions } from "./display_utils.js";
/** /**
* Text layer render parameters. * @typedef {Object} TextLayerParameters
*
* @typedef {Object} TextLayerRenderParameters
* @property {ReadableStream | TextContent} textContentSource - Text content to * @property {ReadableStream | TextContent} textContentSource - Text content to
* render, i.e. the value returned by the page's `streamTextContent` or * render, i.e. the value returned by the page's `streamTextContent` or
* `getTextContent` method. * `getTextContent` method.
@ -30,47 +28,413 @@ import { setLayerDimensions } from "./display_utils.js";
* runs. * runs.
* @property {PageViewport} viewport - The target viewport to properly layout * @property {PageViewport} viewport - The target viewport to properly layout
* the text runs. * the text runs.
* @property {Array<HTMLElement>} [textDivs] - HTML elements that correspond to
* the text items of the textContent input.
* This is output and shall initially be set to an empty array.
* @property {WeakMap<HTMLElement,Object>} [textDivProperties] - Some properties
* weakly mapped to the HTML elements used to render the text.
* @property {Array<string>} [textContentItemsStr] - Strings that correspond to
* the `str` property of the text items of the textContent input.
* This is output and shall initially be set to an empty array.
*/ */
/** /**
* Text layer update parameters.
*
* @typedef {Object} TextLayerUpdateParameters * @typedef {Object} TextLayerUpdateParameters
* @property {HTMLElement} container - The DOM node that will contain the text
* runs.
* @property {PageViewport} viewport - The target viewport to properly layout * @property {PageViewport} viewport - The target viewport to properly layout
* the text runs. * the text runs.
* @property {Array<HTMLElement>} [textDivs] - HTML elements that correspond to * @property {function} [onBefore] - Callback invoked before the textLayer is
* the text items of the textContent input. * updated in the DOM.
* This is output and shall initially be set to an empty array.
* @property {WeakMap<HTMLElement,Object>} [textDivProperties] - Some properties
* weakly mapped to the HTML elements used to render the text.
* @property {boolean} [mustRotate] true if the text layer must be rotated.
* @property {boolean} [mustRescale] true if the text layer contents must be
* rescaled.
*/ */
const MAX_TEXT_DIVS_TO_RENDER = 100000; const MAX_TEXT_DIVS_TO_RENDER = 100000;
const DEFAULT_FONT_SIZE = 30; const DEFAULT_FONT_SIZE = 30;
const DEFAULT_FONT_ASCENT = 0.8; const DEFAULT_FONT_ASCENT = 0.8;
const ascentCache = new Map();
let _canvasContext = null;
const pendingTextLayers = new Set();
function getCtx(lang = null) { class TextLayer {
if (!_canvasContext) { #capability = Promise.withResolvers();
#container = null;
#disableProcessItems = false;
#fontInspectorEnabled = !!globalThis.FontInspector?.enabled;
#lang = null;
#layoutTextParams = null;
#pageHeight = 0;
#pageWidth = 0;
#reader = null;
#rootContainer = null;
#rotation = 0;
#scale = 0;
#styleCache = Object.create(null);
#textContentItemsStr = [];
#textContentSource = null;
#textDivs = [];
#textDivProperties = new WeakMap();
#transform = null;
static #ascentCache = new Map();
static #canvasCtx = null;
static #pendingTextLayers = new Set();
/**
* @param {TextLayerParameters} options
*/
constructor({ textContentSource, container, viewport }) {
if (textContentSource instanceof ReadableStream) {
this.#textContentSource = textContentSource;
} else if (
(typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) &&
typeof textContentSource === "object"
) {
this.#textContentSource = new ReadableStream({
start(controller) {
controller.enqueue(textContentSource);
controller.close();
},
});
} else {
throw new Error('No "textContentSource" parameter specified.');
}
this.#container = this.#rootContainer = container;
this.#scale = viewport.scale * (globalThis.devicePixelRatio || 1);
this.#rotation = viewport.rotation;
this.#layoutTextParams = {
prevFontSize: null,
prevFontFamily: null,
div: null,
properties: null,
ctx: null,
};
const { pageWidth, pageHeight, pageX, pageY } = viewport.rawDims;
this.#transform = [1, 0, 0, -1, -pageX, pageY + pageHeight];
this.#pageWidth = pageWidth;
this.#pageHeight = pageHeight;
setLayerDimensions(container, viewport);
TextLayer.#pendingTextLayers.add(this);
// Always clean-up the temporary canvas once rendering is no longer pending.
this.#capability.promise
.catch(() => {
// Avoid "Uncaught promise" messages in the console.
})
.then(() => {
TextLayer.#pendingTextLayers.delete(this);
this.#layoutTextParams = null;
this.#styleCache = null;
});
if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) {
// For testing purposes.
Object.defineProperty(this, "pageWidth", {
get() {
return this.#pageWidth;
},
});
Object.defineProperty(this, "pageHeight", {
get() {
return this.#pageHeight;
},
});
}
}
/**
* Render the textLayer.
* @returns {Promise}
*/
render() {
const pump = () => {
this.#reader.read().then(({ value, done }) => {
if (done) {
this.#capability.resolve();
return;
}
this.#lang ??= value.lang;
Object.assign(this.#styleCache, value.styles);
this.#processItems(value.items);
pump();
}, this.#capability.reject);
};
this.#reader = this.#textContentSource.getReader();
pump();
return this.#capability.promise;
}
/**
* Update a previously rendered textLayer, if necessary.
* @param {TextLayerUpdateParameters} options
* @returns {undefined}
*/
update({ viewport, onBefore = null }) {
const scale = viewport.scale * (globalThis.devicePixelRatio || 1);
const rotation = viewport.rotation;
if (rotation !== this.#rotation) {
onBefore?.();
this.#rotation = rotation;
setLayerDimensions(this.#rootContainer, { rotation });
}
if (scale !== this.#scale) {
onBefore?.();
this.#scale = scale;
const params = {
prevFontSize: null,
prevFontFamily: null,
div: null,
properties: null,
ctx: TextLayer.#getCtx(this.#lang),
};
for (const div of this.#textDivs) {
params.properties = this.#textDivProperties.get(div);
params.div = div;
this.#layout(params);
}
}
}
/**
* Cancel rendering of the textLayer.
* @returns {undefined}
*/
cancel() {
const abortEx = new AbortException("TextLayer task cancelled.");
this.#reader?.cancel(abortEx).catch(() => {
// Avoid "Uncaught promise" messages in the console.
});
this.#reader = null;
this.#capability.reject(abortEx);
}
/**
* @type {Array<HTMLElement>} HTML elements that correspond to the text items
* of the textContent input.
* This is output and will initially be set to an empty array.
*/
get textDivs() {
return this.#textDivs;
}
/**
* @type {Array<string>} Strings that correspond to the `str` property of
* the text items of the textContent input.
* This is output and will initially be set to an empty array
*/
get textContentItemsStr() {
return this.#textContentItemsStr;
}
#processItems(items) {
if (this.#disableProcessItems) {
return;
}
this.#layoutTextParams.ctx ||= TextLayer.#getCtx(this.#lang);
const textDivs = this.#textDivs,
textContentItemsStr = this.#textContentItemsStr;
for (const item of items) {
// No point in rendering many divs as it would make the browser
// unusable even after the divs are rendered.
if (textDivs.length > MAX_TEXT_DIVS_TO_RENDER) {
warn("Ignoring additional textDivs for performance reasons.");
this.#disableProcessItems = true; // Avoid multiple warnings for one page.
return;
}
if (item.str === undefined) {
if (
item.type === "beginMarkedContentProps" ||
item.type === "beginMarkedContent"
) {
const parent = this.#container;
this.#container = document.createElement("span");
this.#container.classList.add("markedContent");
if (item.id !== null) {
this.#container.setAttribute("id", `${item.id}`);
}
parent.append(this.#container);
} else if (item.type === "endMarkedContent") {
this.#container = this.#container.parentNode;
}
continue;
}
textContentItemsStr.push(item.str);
this.#appendText(item);
}
}
#appendText(geom) {
// 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,
fontSize: 0,
};
this.#textDivs.push(textDiv);
const tx = Util.transform(this.#transform, geom.transform);
let angle = Math.atan2(tx[1], tx[0]);
const style = this.#styleCache[geom.fontName];
if (style.vertical) {
angle += Math.PI / 2;
}
const fontFamily =
(this.#fontInspectorEnabled && style.fontSubstitution) ||
style.fontFamily;
const fontHeight = Math.hypot(tx[2], tx[3]);
const fontAscent =
fontHeight * TextLayer.#getAscent(fontFamily, this.#lang);
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);
}
const scaleFactorStr = "calc(var(--scale-factor)*";
const divStyle = textDiv.style;
// Setting the style properties individually, rather than all at once,
// should be OK since the `textDiv` isn't appended to the document yet.
if (this.#container === this.#rootContainer) {
divStyle.left = `${((100 * left) / this.#pageWidth).toFixed(2)}%`;
divStyle.top = `${((100 * top) / this.#pageHeight).toFixed(2)}%`;
} else {
// We're in a marked content span, hence we can't use percents.
divStyle.left = `${scaleFactorStr}${left.toFixed(2)}px)`;
divStyle.top = `${scaleFactorStr}${top.toFixed(2)}px)`;
}
divStyle.fontSize = `${scaleFactorStr}${fontHeight.toFixed(2)}px)`;
divStyle.fontFamily = fontFamily;
textDivProperties.fontSize = fontHeight;
// 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 (this.#fontInspectorEnabled) {
textDiv.dataset.fontName =
style.fontSubstitutionLoadedName || 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) {
shouldScaleText = true;
} else if (geom.str !== " " && 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) {
textDivProperties.canvasWidth = style.vertical ? geom.height : geom.width;
}
this.#textDivProperties.set(textDiv, textDivProperties);
// Finally, layout and append the text to the DOM.
this.#layoutTextParams.div = textDiv;
this.#layoutTextParams.properties = textDivProperties;
this.#layout(this.#layoutTextParams);
if (textDivProperties.hasText) {
this.#container.append(textDiv);
}
if (textDivProperties.hasEOL) {
const br = document.createElement("br");
br.setAttribute("role", "presentation");
this.#container.append(br);
}
}
#layout(params) {
const { div, properties, ctx, prevFontSize, prevFontFamily } = params;
const { style } = div;
let transform = "";
if (properties.canvasWidth !== 0 && properties.hasText) {
const { fontFamily } = style;
const { canvasWidth, fontSize } = properties;
if (prevFontSize !== fontSize || prevFontFamily !== fontFamily) {
ctx.font = `${fontSize * this.#scale}px ${fontFamily}`;
params.prevFontSize = fontSize;
params.prevFontFamily = fontFamily;
}
// Only measure the width for multi-char text divs, see `appendText`.
const { width } = ctx.measureText(div.textContent);
if (width > 0) {
transform = `scaleX(${(canvasWidth * this.#scale) / width})`;
}
}
if (properties.angle !== 0) {
transform = `rotate(${properties.angle}deg) ${transform}`;
}
if (transform.length > 0) {
style.transform = transform;
}
}
/**
* Clean-up global textLayer data.
* @returns {undefined}
*/
static cleanup() {
if (this.#pendingTextLayers.size > 0) {
return;
}
this.#ascentCache.clear();
this.#canvasCtx?.canvas.remove();
this.#canvasCtx = null;
}
static #getCtx(lang = null) {
if (!this.#canvasCtx) {
// We don't use an OffscreenCanvas here because we use serif/sans serif // We don't use an OffscreenCanvas here because we use serif/sans serif
// fonts with it and they depends on the locale. // fonts with it and they depends on the locale.
// In Firefox, the <html> element get a lang attribute that depends on what // In Firefox, the <html> element get a lang attribute that depends on
// Fluent returns for the locale and the OffscreenCanvas uses the OS locale. // what Fluent returns for the locale and the OffscreenCanvas uses
// the OS locale.
// Those two locales can be different and consequently the used fonts will // Those two locales can be different and consequently the used fonts will
// be different (see bug 1869001). // be different (see bug 1869001).
// Ideally, we should use in the text layer the fonts we've in the pdf (or // Ideally, we should use in the text layer the fonts we've in the pdf (or
@ -79,27 +443,17 @@ function getCtx(lang = null) {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.className = "hiddenCanvasElement"; canvas.className = "hiddenCanvasElement";
document.body.append(canvas); document.body.append(canvas);
_canvasContext = canvas.getContext("2d", { alpha: false }); this.#canvasCtx = canvas.getContext("2d", { alpha: false });
}
return this.#canvasCtx;
} }
return _canvasContext; static #getAscent(fontFamily, lang) {
} const cachedAscent = this.#ascentCache.get(fontFamily);
function cleanupTextLayer() {
if (pendingTextLayers.size > 0) {
return;
}
_canvasContext?.canvas.remove();
_canvasContext = null;
}
function getAscent(fontFamily, lang) {
const cachedAscent = ascentCache.get(fontFamily);
if (cachedAscent) { if (cachedAscent) {
return cachedAscent; return cachedAscent;
} }
const ctx = this.#getCtx(lang);
const ctx = getCtx(lang);
const savedFont = ctx.font; const savedFont = ctx.font;
ctx.canvas.width = ctx.canvas.height = DEFAULT_FONT_SIZE; ctx.canvas.width = ctx.canvas.height = DEFAULT_FONT_SIZE;
@ -111,7 +465,7 @@ function getAscent(fontFamily, lang) {
let descent = Math.abs(metrics.fontBoundingBoxDescent); let descent = Math.abs(metrics.fontBoundingBoxDescent);
if (ascent) { if (ascent) {
const ratio = ascent / (ascent + descent); const ratio = ascent / (ascent + descent);
ascentCache.set(fontFamily, ratio); this.#ascentCache.set(fontFamily, ratio);
ctx.canvas.width = ctx.canvas.height = 0; ctx.canvas.width = ctx.canvas.height = 0;
ctx.font = savedFont; ctx.font = savedFont;
@ -156,356 +510,46 @@ function getAscent(fontFamily, lang) {
ctx.canvas.width = ctx.canvas.height = 0; ctx.canvas.width = ctx.canvas.height = 0;
ctx.font = savedFont; ctx.font = savedFont;
if (ascent) { const ratio = ascent ? ascent / (ascent + descent) : DEFAULT_FONT_ASCENT;
const ratio = ascent / (ascent + descent); this.#ascentCache.set(fontFamily, ratio);
ascentCache.set(fontFamily, ratio);
return ratio; return ratio;
} }
ascentCache.set(fontFamily, DEFAULT_FONT_ASCENT);
return DEFAULT_FONT_ASCENT;
} }
function layout(params) { function renderTextLayer() {
const { div, scale, properties, ctx, prevFontSize, prevFontFamily } = params; if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
const { style } = div; return;
let transform = ""; }
if (properties.canvasWidth !== 0 && properties.hasText) { deprecated("`renderTextLayer`, please use `TextLayer` instead.");
const { fontFamily } = style;
const { canvasWidth, fontSize } = properties;
if (prevFontSize !== fontSize || prevFontFamily !== fontFamily) { const { textContentSource, container, viewport, ...rest } = arguments[0];
ctx.font = `${fontSize * scale}px ${fontFamily}`; const restKeys = Object.keys(rest);
params.prevFontSize = fontSize; if (restKeys.length > 0) {
params.prevFontFamily = fontFamily; warn("Ignoring `renderTextLayer` parameters: " + restKeys.join(", "));
} }
// Only measure the width for multi-char text divs, see `appendText`. const textLayer = new TextLayer({
const { width } = ctx.measureText(div.textContent);
if (width > 0) {
transform = `scaleX(${(canvasWidth * scale) / width})`;
}
}
if (properties.angle !== 0) {
transform = `rotate(${properties.angle}deg) ${transform}`;
}
if (transform.length > 0) {
style.transform = transform;
}
}
class TextLayerRenderTask {
#disableProcessItems = false;
#reader = null;
#textContentSource = null;
constructor({
textContentSource, textContentSource,
container, container,
viewport, viewport,
});
const { textDivs, textContentItemsStr } = textLayer;
const promise = textLayer.render();
// eslint-disable-next-line consistent-return
return {
promise,
textDivs, textDivs,
textDivProperties,
textContentItemsStr, textContentItemsStr,
}) {
if (textContentSource instanceof ReadableStream) {
this.#textContentSource = textContentSource;
} else if (
(typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) &&
typeof textContentSource === "object"
) {
this.#textContentSource = new ReadableStream({
start(controller) {
controller.enqueue(textContentSource);
controller.close();
},
});
} else {
throw new Error('No "textContentSource" parameter specified.');
}
this._container = this._rootContainer = container;
this._textDivs = textDivs || [];
this._textContentItemsStr = textContentItemsStr || [];
this._fontInspectorEnabled = !!globalThis.FontInspector?.enabled;
this._textDivProperties = textDivProperties || new WeakMap();
this._canceled = false;
this._capability = Promise.withResolvers();
this._layoutTextParams = {
prevFontSize: null,
prevFontFamily: null,
div: null,
scale: viewport.scale * (globalThis.devicePixelRatio || 1),
properties: null,
ctx: null,
}; };
this._styleCache = Object.create(null);
const { pageWidth, pageHeight, pageX, pageY } = viewport.rawDims;
this._transform = [1, 0, 0, -1, -pageX, pageY + pageHeight];
this._pageWidth = pageWidth;
this._pageHeight = pageHeight;
setLayerDimensions(container, viewport);
pendingTextLayers.add(this);
// Always clean-up the temporary canvas once rendering is no longer pending.
this._capability.promise
.finally(() => {
pendingTextLayers.delete(this);
this._layoutTextParams = null;
this._styleCache = null;
})
.catch(() => {
// Avoid "Uncaught promise" messages in the console.
});
}
/**
* Promise for textLayer rendering task completion.
* @type {Promise<void>}
*/
get promise() {
return this._capability.promise;
}
/**
* Cancel rendering of the textLayer.
*/
cancel() {
this._canceled = true;
const abortEx = new AbortException("TextLayer task cancelled.");
this.#reader?.cancel(abortEx).catch(() => {
// Avoid "Uncaught promise" messages in the console.
});
this.#reader = null;
this._capability.reject(abortEx);
}
#processItems(items, lang) {
if (this.#disableProcessItems) {
return;
}
if (!this._layoutTextParams.ctx) {
this._textDivProperties.set(this._rootContainer, { lang });
this._layoutTextParams.ctx = getCtx(lang);
}
const textDivs = this._textDivs,
textContentItemsStr = this._textContentItemsStr;
for (const item of items) {
// No point in rendering many divs as it would make the browser
// unusable even after the divs are rendered.
if (textDivs.length > MAX_TEXT_DIVS_TO_RENDER) {
warn("Ignoring additional textDivs for performance reasons.");
this.#disableProcessItems = true; // Avoid multiple warnings for one page.
return;
}
if (item.str === undefined) {
if (
item.type === "beginMarkedContentProps" ||
item.type === "beginMarkedContent"
) {
const parent = this._container;
this._container = document.createElement("span");
this._container.classList.add("markedContent");
if (item.id !== null) {
this._container.setAttribute("id", `${item.id}`);
}
parent.append(this._container);
} else if (item.type === "endMarkedContent") {
this._container = this._container.parentNode;
}
continue;
}
textContentItemsStr.push(item.str);
this.#appendText(item, lang);
}
}
#appendText(geom, lang) {
// 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,
fontSize: 0,
};
this._textDivs.push(textDiv);
const tx = Util.transform(this._transform, geom.transform);
let angle = Math.atan2(tx[1], tx[0]);
const style = this._styleCache[geom.fontName];
if (style.vertical) {
angle += Math.PI / 2;
}
const fontFamily =
(this._fontInspectorEnabled && style.fontSubstitution) ||
style.fontFamily;
const fontHeight = Math.hypot(tx[2], tx[3]);
const fontAscent = fontHeight * getAscent(fontFamily, lang);
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);
}
const scaleFactorStr = "calc(var(--scale-factor)*";
const divStyle = textDiv.style;
// Setting the style properties individually, rather than all at once,
// should be OK since the `textDiv` isn't appended to the document yet.
if (this._container === this._rootContainer) {
divStyle.left = `${((100 * left) / this._pageWidth).toFixed(2)}%`;
divStyle.top = `${((100 * top) / this._pageHeight).toFixed(2)}%`;
} else {
// We're in a marked content span, hence we can't use percents.
divStyle.left = `${scaleFactorStr}${left.toFixed(2)}px)`;
divStyle.top = `${scaleFactorStr}${top.toFixed(2)}px)`;
}
divStyle.fontSize = `${scaleFactorStr}${fontHeight.toFixed(2)}px)`;
divStyle.fontFamily = fontFamily;
textDivProperties.fontSize = fontHeight;
// 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 (this._fontInspectorEnabled) {
textDiv.dataset.fontName =
style.fontSubstitutionLoadedName || 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) {
shouldScaleText = true;
} else if (geom.str !== " " && 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) {
textDivProperties.canvasWidth = style.vertical ? geom.height : geom.width;
}
this._textDivProperties.set(textDiv, textDivProperties);
this.#layoutText(textDiv, textDivProperties);
}
#layoutText(textDiv, textDivProperties) {
this._layoutTextParams.div = textDiv;
this._layoutTextParams.properties = textDivProperties;
layout(this._layoutTextParams);
if (textDivProperties.hasText) {
this._container.append(textDiv);
}
if (textDivProperties.hasEOL) {
const br = document.createElement("br");
br.setAttribute("role", "presentation");
this._container.append(br);
}
}
/**
* @private
*/
_render() {
const styleCache = this._styleCache;
const pump = () => {
this.#reader.read().then(({ value, done }) => {
if (done) {
this._capability.resolve();
return;
}
Object.assign(styleCache, value.styles);
this.#processItems(value.items, value.lang);
pump();
}, this._capability.reject);
};
this.#reader = this.#textContentSource.getReader();
pump();
}
} }
/** function updateTextLayer() {
* @param {TextLayerRenderParameters} params if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
* @returns {TextLayerRenderTask} return;
*/ }
function renderTextLayer(params) { deprecated("`updateTextLayer`, please use `TextLayer` instead.");
const task = new TextLayerRenderTask(params);
task._render();
return task;
} }
/** export { renderTextLayer, TextLayer, updateTextLayer };
* @param {TextLayerUpdateParameters} params
* @returns {undefined}
*/
function updateTextLayer({
container,
viewport,
textDivs,
textDivProperties,
mustRotate = true,
mustRescale = true,
}) {
if (mustRotate) {
setLayerDimensions(container, { rotation: viewport.rotation });
}
if (mustRescale) {
const ctx = getCtx(textDivProperties.get(container)?.lang);
const scale = viewport.scale * (globalThis.devicePixelRatio || 1);
const params = {
prevFontSize: null,
prevFontFamily: null,
div: null,
scale,
properties: null,
ctx,
};
for (const div of textDivs) {
params.properties = textDivProperties.get(div);
params.div = div;
layout(params);
}
}
}
export {
cleanupTextLayer,
renderTextLayer,
TextLayerRenderTask,
updateTextLayer,
};

View file

@ -21,8 +21,6 @@
/** @typedef {import("./display/api").PDFPageProxy} PDFPageProxy */ /** @typedef {import("./display/api").PDFPageProxy} PDFPageProxy */
/** @typedef {import("./display/api").RenderTask} RenderTask */ /** @typedef {import("./display/api").RenderTask} RenderTask */
/** @typedef {import("./display/display_utils").PageViewport} PageViewport */ /** @typedef {import("./display/display_utils").PageViewport} PageViewport */
// eslint-disable-next-line max-len
/** @typedef {import("./display/text_layer").TextLayerRenderTask} TextLayerRenderTask */
import { import {
AbortException, AbortException,
@ -65,7 +63,11 @@ import {
RenderingCancelledException, RenderingCancelledException,
setLayerDimensions, setLayerDimensions,
} from "./display/display_utils.js"; } from "./display/display_utils.js";
import { renderTextLayer, updateTextLayer } from "./display/text_layer.js"; import {
renderTextLayer,
TextLayer,
updateTextLayer,
} from "./display/text_layer.js";
import { AnnotationEditorLayer } from "./display/editor/annotation_editor_layer.js"; import { AnnotationEditorLayer } from "./display/editor/annotation_editor_layer.js";
import { AnnotationEditorUIManager } from "./display/editor/tools.js"; import { AnnotationEditorUIManager } from "./display/editor/tools.js";
import { AnnotationLayer } from "./display/annotation_layer.js"; import { AnnotationLayer } from "./display/annotation_layer.js";
@ -122,6 +124,7 @@ export {
renderTextLayer, renderTextLayer,
setLayerDimensions, setLayerDimensions,
shadow, shadow,
TextLayer,
UnexpectedResponseException, UnexpectedResponseException,
updateTextLayer, updateTextLayer,
Util, Util,

View file

@ -22,8 +22,8 @@ const {
GlobalWorkerOptions, GlobalWorkerOptions,
Outliner, Outliner,
PixelsPerInch, PixelsPerInch,
renderTextLayer,
shadow, shadow,
TextLayer,
XfaLayer, XfaLayer,
} = pdfjsLib; } = pdfjsLib;
const { GenericL10n, parseQueryString, SimpleLinkService } = pdfjsViewer; const { GenericL10n, parseQueryString, SimpleLinkService } = pdfjsViewer;
@ -297,13 +297,12 @@ class Rasterize {
`:root { --scale-factor: ${viewport.scale} }`; `:root { --scale-factor: ${viewport.scale} }`;
// Rendering text layer as HTML. // Rendering text layer as HTML.
const task = renderTextLayer({ const textLayer = new TextLayer({
textContentSource: textContent, textContentSource: textContent,
container: div, container: div,
viewport, viewport,
}); });
await textLayer.render();
await task.promise;
svg.append(foreignObject); svg.append(foreignObject);
@ -327,15 +326,14 @@ class Rasterize {
`:root { --scale-factor: ${viewport.scale} }`; `:root { --scale-factor: ${viewport.scale} }`;
// Rendering text layer as HTML. // Rendering text layer as HTML.
const task = renderTextLayer({ const textLayer = new TextLayer({
textContentSource: textContent, textContentSource: textContent,
container: dummyParent, container: dummyParent,
viewport, viewport,
}); });
await textLayer.render();
await task.promise; const { pageWidth, pageHeight, textDivs } = textLayer;
const { _pageWidth, _pageHeight, _textDivs } = task;
const boxes = []; const boxes = [];
let j = 0, let j = 0,
posRegex; posRegex;
@ -343,7 +341,7 @@ class Rasterize {
if (type) { if (type) {
continue; continue;
} }
const { top, left } = _textDivs[j++].style; const { top, left } = textDivs[j++].style;
let x = parseFloat(left) / 100; let x = parseFloat(left) / 100;
let y = parseFloat(top) / 100; let y = parseFloat(top) / 100;
if (isNaN(x)) { if (isNaN(x)) {
@ -352,12 +350,12 @@ class Rasterize {
// string, e.g. `calc(var(--scale-factor)*66.32px)`. // string, e.g. `calc(var(--scale-factor)*66.32px)`.
let match = left.match(posRegex); let match = left.match(posRegex);
if (match) { if (match) {
x = parseFloat(match[1]) / _pageWidth; x = parseFloat(match[1]) / pageWidth;
} }
match = top.match(posRegex); match = top.match(posRegex);
if (match) { if (match) {
y = parseFloat(match[1]) / _pageHeight; y = parseFloat(match[1]) / pageHeight;
} }
} }
if (width === 0 || height === 0) { if (width === 0 || height === 0) {
@ -366,8 +364,8 @@ class Rasterize {
boxes.push({ boxes.push({
x, x,
y, y,
width: width / _pageWidth, width: width / pageWidth,
height: height / _pageHeight, height: height / pageHeight,
}); });
} }
// We set the borderWidth to 0.001 to slighly increase the size of the // We set the borderWidth to 0.001 to slighly increase the size of the

View file

@ -57,6 +57,7 @@ import {
} from "../../src/display/display_utils.js"; } from "../../src/display/display_utils.js";
import { import {
renderTextLayer, renderTextLayer,
TextLayer,
updateTextLayer, updateTextLayer,
} from "../../src/display/text_layer.js"; } from "../../src/display/text_layer.js";
import { AnnotationEditorLayer } from "../../src/display/editor/annotation_editor_layer.js"; import { AnnotationEditorLayer } from "../../src/display/editor/annotation_editor_layer.js";
@ -108,6 +109,7 @@ const expectedAPI = Object.freeze({
renderTextLayer, renderTextLayer,
setLayerDimensions, setLayerDimensions,
shadow, shadow,
TextLayer,
UnexpectedResponseException, UnexpectedResponseException,
updateTextLayer, updateTextLayer,
Util, Util,

View file

@ -13,13 +13,10 @@
* limitations under the License. * limitations under the License.
*/ */
import {
renderTextLayer,
TextLayerRenderTask,
} from "../../src/display/text_layer.js";
import { buildGetDocumentParams } from "./test_utils.js"; import { buildGetDocumentParams } from "./test_utils.js";
import { getDocument } from "../../src/display/api.js"; import { getDocument } from "../../src/display/api.js";
import { isNodeJS } from "../../src/shared/util.js"; import { isNodeJS } from "../../src/shared/util.js";
import { TextLayer } from "../../src/display/text_layer.js";
describe("textLayer", function () { describe("textLayer", function () {
it("creates textLayer from ReadableStream", async function () { it("creates textLayer from ReadableStream", async function () {
@ -30,18 +27,14 @@ describe("textLayer", function () {
const pdfDocument = await loadingTask.promise; const pdfDocument = await loadingTask.promise;
const page = await pdfDocument.getPage(1); const page = await pdfDocument.getPage(1);
const textContentItemsStr = []; const textLayer = new TextLayer({
const textLayerRenderTask = renderTextLayer({
textContentSource: page.streamTextContent(), textContentSource: page.streamTextContent(),
container: document.createElement("div"), container: document.createElement("div"),
viewport: page.getViewport({ scale: 1 }), viewport: page.getViewport({ scale: 1 }),
textContentItemsStr,
}); });
expect(textLayerRenderTask instanceof TextLayerRenderTask).toEqual(true); await textLayer.render();
await textLayerRenderTask.promise; expect(textLayer.textContentItemsStr).toEqual([
expect(textContentItemsStr).toEqual([
"Table Of Content", "Table Of Content",
"", "",
"Chapter 1", "Chapter 1",
@ -70,18 +63,14 @@ describe("textLayer", function () {
const pdfDocument = await loadingTask.promise; const pdfDocument = await loadingTask.promise;
const page = await pdfDocument.getPage(1); const page = await pdfDocument.getPage(1);
const textContentItemsStr = []; const textLayer = new TextLayer({
const textLayerRenderTask = renderTextLayer({
textContentSource: await page.getTextContent(), textContentSource: await page.getTextContent(),
container: document.createElement("div"), container: document.createElement("div"),
viewport: page.getViewport({ scale: 1 }), viewport: page.getViewport({ scale: 1 }),
textContentItemsStr,
}); });
expect(textLayerRenderTask instanceof TextLayerRenderTask).toEqual(true); await textLayer.render();
await textLayerRenderTask.promise; expect(textLayer.textContentItemsStr).toEqual([
expect(textContentItemsStr).toEqual([
"Table Of Content", "Table Of Content",
"", "",
"Chapter 1", "Chapter 1",

View file

@ -458,7 +458,6 @@ class PDFPageView {
this.eventBus.dispatch("textlayerrendered", { this.eventBus.dispatch("textlayerrendered", {
source: this, source: this,
pageNumber: this.id, pageNumber: this.id,
numTextDivs: textLayer.numTextDivs,
error, error,
}); });

View file

@ -53,6 +53,7 @@ const {
renderTextLayer, renderTextLayer,
setLayerDimensions, setLayerDimensions,
shadow, shadow,
TextLayer,
UnexpectedResponseException, UnexpectedResponseException,
updateTextLayer, updateTextLayer,
Util, Util,
@ -101,6 +102,7 @@ export {
renderTextLayer, renderTextLayer,
setLayerDimensions, setLayerDimensions,
shadow, shadow,
TextLayer,
UnexpectedResponseException, UnexpectedResponseException,
updateTextLayer, updateTextLayer,
Util, Util,

View file

@ -20,7 +20,7 @@
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
/** @typedef {import("./text_accessibility.js").TextAccessibilityManager} TextAccessibilityManager */ /** @typedef {import("./text_accessibility.js").TextAccessibilityManager} TextAccessibilityManager */
import { normalizeUnicode, renderTextLayer, updateTextLayer } from "pdfjs-lib"; import { normalizeUnicode, TextLayer } from "pdfjs-lib";
import { removeNullCharacters } from "./ui_utils.js"; import { removeNullCharacters } from "./ui_utils.js";
/** /**
@ -41,12 +41,10 @@ class TextLayerBuilder {
#onAppend = null; #onAppend = null;
#rotation = 0;
#scale = 0;
#textContentSource = null; #textContentSource = null;
#textLayer = null;
static #textLayers = new Map(); static #textLayers = new Map();
static #selectionChangeAbortController = null; static #selectionChangeAbortController = null;
@ -57,11 +55,7 @@ class TextLayerBuilder {
enablePermissions = false, enablePermissions = false,
onAppend = null, onAppend = null,
}) { }) {
this.textContentItemsStr = [];
this.renderingDone = false; this.renderingDone = false;
this.textDivs = [];
this.textDivProperties = new WeakMap();
this.textLayerRenderTask = null;
this.highlighter = highlighter; this.highlighter = highlighter;
this.accessibilityManager = accessibilityManager; this.accessibilityManager = accessibilityManager;
this.#enablePermissions = enablePermissions === true; this.#enablePermissions = enablePermissions === true;
@ -82,10 +76,6 @@ class TextLayerBuilder {
this.#bindMouse(endOfContent); this.#bindMouse(endOfContent);
} }
get numTextDivs() {
return this.textDivs.length;
}
/** /**
* Renders the text layer. * Renders the text layer.
* @param {PageViewport} viewport * @param {PageViewport} viewport
@ -95,45 +85,28 @@ class TextLayerBuilder {
throw new Error('No "textContentSource" parameter specified.'); throw new Error('No "textContentSource" parameter specified.');
} }
const scale = viewport.scale * (globalThis.devicePixelRatio || 1); if (this.renderingDone && this.#textLayer) {
const { rotation } = viewport; this.#textLayer.update({
if (this.renderingDone) {
const mustRotate = rotation !== this.#rotation;
const mustRescale = scale !== this.#scale;
if (mustRotate || mustRescale) {
this.hide();
updateTextLayer({
container: this.div,
viewport, viewport,
textDivs: this.textDivs, onBefore: this.hide.bind(this),
textDivProperties: this.textDivProperties,
mustRescale,
mustRotate,
}); });
this.#scale = scale;
this.#rotation = rotation;
}
this.show(); this.show();
return; return;
} }
this.cancel(); this.cancel();
this.highlighter?.setTextMapping(this.textDivs, this.textContentItemsStr); this.#textLayer = new TextLayer({
this.accessibilityManager?.setTextMapping(this.textDivs);
this.textLayerRenderTask = renderTextLayer({
textContentSource: this.#textContentSource, textContentSource: this.#textContentSource,
container: this.div, container: this.div,
viewport, viewport,
textDivs: this.textDivs,
textDivProperties: this.textDivProperties,
textContentItemsStr: this.textContentItemsStr,
}); });
await this.textLayerRenderTask.promise; const { textDivs, textContentItemsStr } = this.#textLayer;
this.highlighter?.setTextMapping(textDivs, textContentItemsStr);
this.accessibilityManager?.setTextMapping(textDivs);
await this.#textLayer.render();
this.#finishRendering(); this.#finishRendering();
this.#scale = scale;
this.#rotation = rotation;
// Ensure that the textLayer is appended to the DOM *before* handling // Ensure that the textLayer is appended to the DOM *before* handling
// e.g. a pending search operation. // e.g. a pending search operation.
this.#onAppend?.(this.div); this.#onAppend?.(this.div);
@ -161,15 +134,11 @@ class TextLayerBuilder {
* Cancel rendering of the text layer. * Cancel rendering of the text layer.
*/ */
cancel() { cancel() {
if (this.textLayerRenderTask) { this.#textLayer?.cancel();
this.textLayerRenderTask.cancel(); this.#textLayer = null;
this.textLayerRenderTask = null;
}
this.highlighter?.disable(); this.highlighter?.disable();
this.accessibilityManager?.disable(); this.accessibilityManager?.disable();
this.textContentItemsStr.length = 0;
this.textDivs.length = 0;
this.textDivProperties = new WeakMap();
TextLayerBuilder.#removeGlobalSelectionListener(this.div); TextLayerBuilder.#removeGlobalSelectionListener(this.div);
} }