mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-08 09:20:06 +02:00
[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:
parent
63b66b412c
commit
15b5808eee
9 changed files with 383 additions and 377 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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,
|
|
||||||
};
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue