ZenBrowserMirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/zen-browser/pdf.js.git synced 2025-07-08 09:20:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

6
src/display/api.js
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) {

626
src/display/text_layer.js
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,186 +28,67 @@ 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();
// We don't use an OffscreenCanvas here because we use serif/sans serif
// fonts with it and they depends on the locale.
// In Firefox, the <html> element get a lang attribute that depends on 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
// be different (see bug 1869001).
// Ideally, we should use in the text layer the fonts we've in the pdf (or
// their replacements when they aren't embedded) and then we can use an
// OffscreenCanvas.
const canvas = document.createElement("canvas");
canvas.className = "hiddenCanvasElement";
document.body.append(canvas);
_canvasContext = canvas.getContext("2d", { alpha: false });
}
return _canvasContext; #container = null;
}
function cleanupTextLayer() {
if (pendingTextLayers.size > 0) {
return;
}
_canvasContext?.canvas.remove();
_canvasContext = null;
}
function getAscent(fontFamily, lang) {
const cachedAscent = ascentCache.get(fontFamily);
if (cachedAscent) {
return cachedAscent;
}
const ctx = getCtx(lang);
const savedFont = ctx.font;
ctx.canvas.width = ctx.canvas.height = DEFAULT_FONT_SIZE;
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) {
const ratio = ascent / (ascent + descent);
ascentCache.set(fontFamily, ratio);
ctx.canvas.width = ctx.canvas.height = 0;
ctx.font = savedFont;
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.canvas.width = ctx.canvas.height = 0;
ctx.font = savedFont;
if (ascent) {
const ratio = ascent / (ascent + descent);
ascentCache.set(fontFamily, ratio);
return ratio;
}
ascentCache.set(fontFamily, DEFAULT_FONT_ASCENT);
return DEFAULT_FONT_ASCENT;
}
function layout(params) {
const { div, scale, 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 * 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 * scale) / width})`;
}
}
if (properties.angle !== 0) {
transform = `rotate(${properties.angle}deg) ${transform}`;
}
if (transform.length > 0) {
style.transform = transform;
}
}
class TextLayerRenderTask {
#disableProcessItems = false; #disableProcessItems = false;
#fontInspectorEnabled = !!globalThis.FontInspector?.enabled;
#lang = null;
#layoutTextParams = null;
#pageHeight = 0;
#pageWidth = 0;
#reader = null; #reader = null;
#rootContainer = null;
#rotation = 0;
#scale = 0;
#styleCache = Object.create(null);
#textContentItemsStr = [];
#textContentSource = null; #textContentSource = null;
constructor({ #textDivs = [];
textContentSource,
container, #textDivProperties = new WeakMap();
viewport,
textDivs, #transform = null;
textDivProperties,
textContentItemsStr, static #ascentCache = new Map();
}) {
static #canvasCtx = null;
static #pendingTextLayers = new Set();
/**
* @param {TextLayerParameters} options
*/
constructor({ textContentSource, container, viewport }) {
if (textContentSource instanceof ReadableStream) { if (textContentSource instanceof ReadableStream) {
this.#textContentSource = textContentSource; this.#textContentSource = textContentSource;
} else if ( } else if (
@ -225,56 +104,112 @@ class TextLayerRenderTask {
} else { } else {
throw new Error('No "textContentSource" parameter specified.'); throw new Error('No "textContentSource" parameter specified.');
} }
this._container = this._rootContainer = container; this.#container = this.#rootContainer = container;
this._textDivs = textDivs || [];
this._textContentItemsStr = textContentItemsStr || [];
this._fontInspectorEnabled = !!globalThis.FontInspector?.enabled;
this._textDivProperties = textDivProperties || new WeakMap(); this.#scale = viewport.scale * (globalThis.devicePixelRatio || 1);
this._canceled = false; this.#rotation = viewport.rotation;
this._capability = Promise.withResolvers(); this.#layoutTextParams = {
this._layoutTextParams = {
prevFontSize: null, prevFontSize: null,
prevFontFamily: null, prevFontFamily: null,
div: null, div: null,
scale: viewport.scale * (globalThis.devicePixelRatio || 1),
properties: null, properties: null,
ctx: null, ctx: null,
}; };
this._styleCache = Object.create(null);
const { pageWidth, pageHeight, pageX, pageY } = viewport.rawDims; const { pageWidth, pageHeight, pageX, pageY } = viewport.rawDims;
this._transform = [1, 0, 0, -1, -pageX, pageY + pageHeight]; this.#transform = [1, 0, 0, -1, -pageX, pageY + pageHeight];
this._pageWidth = pageWidth; this.#pageWidth = pageWidth;
this._pageHeight = pageHeight; this.#pageHeight = pageHeight;
setLayerDimensions(container, viewport); setLayerDimensions(container, viewport);
pendingTextLayers.add(this); TextLayer.#pendingTextLayers.add(this);
// Always clean-up the temporary canvas once rendering is no longer pending. // Always clean-up the temporary canvas once rendering is no longer pending.
this._capability.promise this.#capability.promise
.finally(() => {
pendingTextLayers.delete(this);
this._layoutTextParams = null;
this._styleCache = null;
})
.catch(() => { .catch(() => {
// Avoid "Uncaught promise" messages in the console. // 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;
},
});
}
} }
/** /**
* Promise for textLayer rendering task completion. * Render the textLayer.
* @type {Promise<void>} * @returns {Promise}
*/ */
get promise() { render() {
return this._capability.promise; 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. * Cancel rendering of the textLayer.
* @returns {undefined}
*/ */
cancel() { cancel() {
this._canceled = true;
const abortEx = new AbortException("TextLayer task cancelled."); const abortEx = new AbortException("TextLayer task cancelled.");
this.#reader?.cancel(abortEx).catch(() => { this.#reader?.cancel(abortEx).catch(() => {
@ -282,19 +217,35 @@ class TextLayerRenderTask {
}); });
this.#reader = null; this.#reader = null;
this._capability.reject(abortEx); this.#capability.reject(abortEx);
} }
#processItems(items, lang) { /**
* @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) { if (this.#disableProcessItems) {
return; return;
} }
if (!this._layoutTextParams.ctx) { this.#layoutTextParams.ctx ||= TextLayer.#getCtx(this.#lang);
this._textDivProperties.set(this._rootContainer, { lang });
this._layoutTextParams.ctx = getCtx(lang); const textDivs = this.#textDivs,
} textContentItemsStr = this.#textContentItemsStr;
const textDivs = this._textDivs,
textContentItemsStr = this._textContentItemsStr;
for (const item of items) { for (const item of items) {
// No point in rendering many divs as it would make the browser // No point in rendering many divs as it would make the browser
@ -311,24 +262,24 @@ class TextLayerRenderTask {
item.type === "beginMarkedContentProps" || item.type === "beginMarkedContentProps" ||
item.type === "beginMarkedContent" item.type === "beginMarkedContent"
) { ) {
const parent = this._container; const parent = this.#container;
this._container = document.createElement("span"); this.#container = document.createElement("span");
this._container.classList.add("markedContent"); this.#container.classList.add("markedContent");
if (item.id !== null) { if (item.id !== null) {
this._container.setAttribute("id", `${item.id}`); this.#container.setAttribute("id", `${item.id}`);
} }
parent.append(this._container); parent.append(this.#container);
} else if (item.type === "endMarkedContent") { } else if (item.type === "endMarkedContent") {
this._container = this._container.parentNode; this.#container = this.#container.parentNode;
} }
continue; continue;
} }
textContentItemsStr.push(item.str); textContentItemsStr.push(item.str);
this.#appendText(item, lang); this.#appendText(item);
} }
} }
#appendText(geom, lang) { #appendText(geom) {
// Initialize all used properties to keep the caches monomorphic. // Initialize all used properties to keep the caches monomorphic.
const textDiv = document.createElement("span"); const textDiv = document.createElement("span");
const textDivProperties = { const textDivProperties = {
@ -338,20 +289,21 @@ class TextLayerRenderTask {
hasEOL: geom.hasEOL, hasEOL: geom.hasEOL,
fontSize: 0, fontSize: 0,
}; };
this._textDivs.push(textDiv); this.#textDivs.push(textDiv);
const tx = Util.transform(this._transform, geom.transform); const tx = Util.transform(this.#transform, geom.transform);
let angle = Math.atan2(tx[1], tx[0]); let angle = Math.atan2(tx[1], tx[0]);
const style = this._styleCache[geom.fontName]; const style = this.#styleCache[geom.fontName];
if (style.vertical) { if (style.vertical) {
angle += Math.PI / 2; angle += Math.PI / 2;
} }
const fontFamily = const fontFamily =
(this._fontInspectorEnabled && style.fontSubstitution) || (this.#fontInspectorEnabled && style.fontSubstitution) ||
style.fontFamily; style.fontFamily;
const fontHeight = Math.hypot(tx[2], tx[3]); const fontHeight = Math.hypot(tx[2], tx[3]);
const fontAscent = fontHeight * getAscent(fontFamily, lang); const fontAscent =
fontHeight * TextLayer.#getAscent(fontFamily, this.#lang);
let left, top; let left, top;
if (angle === 0) { if (angle === 0) {
@ -366,9 +318,9 @@ class TextLayerRenderTask {
const divStyle = textDiv.style; const divStyle = textDiv.style;
// Setting the style properties individually, rather than all at once, // Setting the style properties individually, rather than all at once,
// should be OK since the `textDiv` isn't appended to the document yet. // should be OK since the `textDiv` isn't appended to the document yet.
if (this._container === this._rootContainer) { if (this.#container === this.#rootContainer) {
divStyle.left = `${((100 * left) / this._pageWidth).toFixed(2)}%`; divStyle.left = `${((100 * left) / this.#pageWidth).toFixed(2)}%`;
divStyle.top = `${((100 * top) / this._pageHeight).toFixed(2)}%`; divStyle.top = `${((100 * top) / this.#pageHeight).toFixed(2)}%`;
} else { } else {
// We're in a marked content span, hence we can't use percents. // We're in a marked content span, hence we can't use percents.
divStyle.left = `${scaleFactorStr}${left.toFixed(2)}px)`; divStyle.left = `${scaleFactorStr}${left.toFixed(2)}px)`;
@ -388,7 +340,7 @@ class TextLayerRenderTask {
// `fontName` is only used by the FontInspector, and we only use `dataset` // `fontName` is only used by the FontInspector, and we only use `dataset`
// here to make the font name available in the debugger. // here to make the font name available in the debugger.
if (this._fontInspectorEnabled) { if (this.#fontInspectorEnabled) {
textDiv.dataset.fontName = textDiv.dataset.fontName =
style.fontSubstitutionLoadedName || geom.fontName; style.fontSubstitutionLoadedName || geom.fontName;
} }
@ -416,96 +368,188 @@ class TextLayerRenderTask {
if (shouldScaleText) { if (shouldScaleText) {
textDivProperties.canvasWidth = style.vertical ? geom.height : geom.width; textDivProperties.canvasWidth = style.vertical ? geom.height : geom.width;
} }
this._textDivProperties.set(textDiv, textDivProperties); this.#textDivProperties.set(textDiv, textDivProperties);
this.#layoutText(textDiv, textDivProperties);
}
#layoutText(textDiv, textDivProperties) { // Finally, layout and append the text to the DOM.
this._layoutTextParams.div = textDiv; this.#layoutTextParams.div = textDiv;
this._layoutTextParams.properties = textDivProperties; this.#layoutTextParams.properties = textDivProperties;
layout(this._layoutTextParams); this.#layout(this.#layoutTextParams);
if (textDivProperties.hasText) { if (textDivProperties.hasText) {
this._container.append(textDiv); this.#container.append(textDiv);
} }
if (textDivProperties.hasEOL) { if (textDivProperties.hasEOL) {
const br = document.createElement("br"); const br = document.createElement("br");
br.setAttribute("role", "presentation"); br.setAttribute("role", "presentation");
this._container.append(br); 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;
} }
} }
/** /**
* @private * Clean-up global textLayer data.
* @returns {undefined}
*/ */
_render() { static cleanup() {
const styleCache = this._styleCache; if (this.#pendingTextLayers.size > 0) {
return;
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();
}
}
/**
* @param {TextLayerRenderParameters} params
* @returns {TextLayerRenderTask}
*/
function renderTextLayer(params) {
const task = new TextLayerRenderTask(params);
task._render();
return task;
}
/**
* @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);
} }
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
// fonts with it and they depends on the locale.
// In Firefox, the <html> element get a lang attribute that depends on
// 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
// be different (see bug 1869001).
// Ideally, we should use in the text layer the fonts we've in the pdf (or
// their replacements when they aren't embedded) and then we can use an
// OffscreenCanvas.
const canvas = document.createElement("canvas");
canvas.className = "hiddenCanvasElement";
document.body.append(canvas);
this.#canvasCtx = canvas.getContext("2d", { alpha: false });
}
return this.#canvasCtx;
}
static #getAscent(fontFamily, lang) {
const cachedAscent = this.#ascentCache.get(fontFamily);
if (cachedAscent) {
return cachedAscent;
}
const ctx = this.#getCtx(lang);
const savedFont = ctx.font;
ctx.canvas.width = ctx.canvas.height = DEFAULT_FONT_SIZE;
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) {
const ratio = ascent / (ascent + descent);
this.#ascentCache.set(fontFamily, ratio);
ctx.canvas.width = ctx.canvas.height = 0;
ctx.font = savedFont;
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.canvas.width = ctx.canvas.height = 0;
ctx.font = savedFont;
const ratio = ascent ? ascent / (ascent + descent) : DEFAULT_FONT_ASCENT;
this.#ascentCache.set(fontFamily, ratio);
return ratio;
} }
} }
export { function renderTextLayer() {
cleanupTextLayer, if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
renderTextLayer, return;
TextLayerRenderTask, }
updateTextLayer, deprecated("`renderTextLayer`, please use `TextLayer` instead.");
};
const { textContentSource, container, viewport, ...rest } = arguments[0];
const restKeys = Object.keys(rest);
if (restKeys.length > 0) {
warn("Ignoring `renderTextLayer` parameters: " + restKeys.join(", "));
}
const textLayer = new TextLayer({
textContentSource,
container,
viewport,
});
const { textDivs, textContentItemsStr } = textLayer;
const promise = textLayer.render();
// eslint-disable-next-line consistent-return
return {
promise,
textDivs,
textContentItemsStr,
};
}
function updateTextLayer() {
if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
return;
}
deprecated("`updateTextLayer`, please use `TextLayer` instead.");
}
export { renderTextLayer, TextLayer, updateTextLayer };

9
src/pdf.js
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,

24
test/driver.js
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

2
test/unit/pdf_spec.js
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,

25
test/unit/text_layer_spec.js
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",

1
web/pdf_page_view.js
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,
}); });

2
web/pdfjs.js
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,

65
web/text_layer_builder.js
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) { viewport,
const mustRotate = rotation !== this.#rotation; onBefore: this.hide.bind(this),
const mustRescale = scale !== this.#scale; });
if (mustRotate || mustRescale) {
this.hide();
updateTextLayer({
container: this.div,
viewport,
textDivs: this.textDivs,
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);
} }