pdfjs-lib
Version:
Generic build of Mozilla's PDF.js library.
383 lines (382 loc) • 12 kB
JavaScript
/**
* @licstart The following is the entire license notice for the
* JavaScript code in this page
*
* Copyright 2022 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @licend The above is the entire license notice for the
* JavaScript code in this page
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TextLayerRenderTask = void 0;
exports.renderTextLayer = renderTextLayer;
exports.updateTextLayer = updateTextLayer;
var _util = require("../shared/util.js");
var _display_utils = require("./display_utils.js");
const MAX_TEXT_DIVS_TO_RENDER = 100000;
const DEFAULT_FONT_SIZE = 30;
const DEFAULT_FONT_ASCENT = 0.8;
const ascentCache = new Map();
function getCtx(size, isOffscreenCanvasSupported) {
let ctx;
if (isOffscreenCanvasSupported && _util.FeatureTest.isOffscreenCanvasSupported) {
ctx = new OffscreenCanvas(size, size).getContext("2d", {
alpha: false
});
} else {
const canvas = document.createElement("canvas");
canvas.width = canvas.height = size;
ctx = canvas.getContext("2d", {
alpha: false
});
}
return ctx;
}
function getAscent(fontFamily, isOffscreenCanvasSupported) {
const cachedAscent = ascentCache.get(fontFamily);
if (cachedAscent) {
return cachedAscent;
}
const ctx = getCtx(DEFAULT_FONT_SIZE, isOffscreenCanvasSupported);
ctx.font = `${DEFAULT_FONT_SIZE}px ${fontFamily}`;
const metrics = ctx.measureText("");
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;
return ratio;
}
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;
}
}
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;
if (ascent) {
const ratio = ascent / (ascent + descent);
ascentCache.set(fontFamily, ratio);
return ratio;
}
ascentCache.set(fontFamily, DEFAULT_FONT_ASCENT);
return DEFAULT_FONT_ASCENT;
}
function appendText(task, geom, styles) {
const textDiv = document.createElement("span");
const textDivProperties = {
angle: 0,
canvasWidth: 0,
hasText: geom.str !== "",
hasEOL: geom.hasEOL,
fontSize: 0
};
task._textDivs.push(textDiv);
const tx = _util.Util.transform(task._transform, geom.transform);
let angle = Math.atan2(tx[1], tx[0]);
const style = styles[geom.fontName];
if (style.vertical) {
angle += Math.PI / 2;
}
const fontHeight = Math.hypot(tx[2], tx[3]);
const fontAscent = fontHeight * getAscent(style.fontFamily, task._isOffscreenCanvasSupported);
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;
if (task._container === task._rootContainer) {
divStyle.left = `${(100 * left / task._pageWidth).toFixed(2)}%`;
divStyle.top = `${(100 * top / task._pageHeight).toFixed(2)}%`;
} else {
divStyle.left = `${scaleFactorStr}${left.toFixed(2)}px)`;
divStyle.top = `${scaleFactorStr}${top.toFixed(2)}px)`;
}
divStyle.fontSize = `${scaleFactorStr}${fontHeight.toFixed(2)}px)`;
divStyle.fontFamily = style.fontFamily;
textDivProperties.fontSize = fontHeight;
textDiv.setAttribute("role", "presentation");
textDiv.textContent = geom.str;
textDiv.dir = geom.dir;
if (task._fontInspectorEnabled) {
textDiv.dataset.fontName = geom.fontName;
}
if (angle !== 0) {
textDivProperties.angle = angle * (180 / Math.PI);
}
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]);
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;
}
task._textDivProperties.set(textDiv, textDivProperties);
if (task._isReadableStream) {
task._layoutText(textDiv);
}
}
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;
}
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;
}
}
function render(task) {
if (task._canceled) {
return;
}
const textDivs = task._textDivs;
const capability = task._capability;
const textDivsLength = textDivs.length;
if (textDivsLength > MAX_TEXT_DIVS_TO_RENDER) {
capability.resolve();
return;
}
if (!task._isReadableStream) {
for (const textDiv of textDivs) {
task._layoutText(textDiv);
}
}
capability.resolve();
}
class TextLayerRenderTask {
constructor({
textContentSource,
container,
viewport,
textDivs,
textDivProperties,
textContentItemsStr,
isOffscreenCanvasSupported
}) {
this._textContentSource = textContentSource;
this._isReadableStream = textContentSource instanceof ReadableStream;
this._container = this._rootContainer = container;
this._textDivs = textDivs || [];
this._textContentItemsStr = textContentItemsStr || [];
this._fontInspectorEnabled = !!globalThis.FontInspector?.enabled;
this._reader = null;
this._textDivProperties = textDivProperties || new WeakMap();
this._canceled = false;
this._capability = (0, _util.createPromiseCapability)();
this._layoutTextParams = {
prevFontSize: null,
prevFontFamily: null,
div: null,
scale: viewport.scale * (globalThis.devicePixelRatio || 1),
properties: null,
ctx: getCtx(0, isOffscreenCanvasSupported)
};
const {
pageWidth,
pageHeight,
pageX,
pageY
} = viewport.rawDims;
this._transform = [1, 0, 0, -1, -pageX, pageY + pageHeight];
this._pageWidth = pageWidth;
this._pageHeight = pageHeight;
(0, _display_utils.setLayerDimensions)(container, viewport);
this._capability.promise.finally(() => {
this._layoutTextParams = null;
}).catch(() => {});
}
get promise() {
return this._capability.promise;
}
cancel() {
this._canceled = true;
if (this._reader) {
this._reader.cancel(new _util.AbortException("TextLayer task cancelled.")).catch(() => {});
this._reader = null;
}
this._capability.reject(new _util.AbortException("TextLayer task cancelled."));
}
_processItems(items, styleCache) {
for (const item of items) {
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;
}
this._textContentItemsStr.push(item.str);
appendText(this, item, styleCache);
}
}
_layoutText(textDiv) {
const textDivProperties = this._layoutTextParams.properties = this._textDivProperties.get(textDiv);
this._layoutTextParams.div = textDiv;
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);
}
}
_render() {
const capability = (0, _util.createPromiseCapability)();
let styleCache = Object.create(null);
if (this._isReadableStream) {
const pump = () => {
this._reader.read().then(({
value,
done
}) => {
if (done) {
capability.resolve();
return;
}
Object.assign(styleCache, value.styles);
this._processItems(value.items, styleCache);
pump();
}, capability.reject);
};
this._reader = this._textContentSource.getReader();
pump();
} else if (this._textContentSource) {
const {
items,
styles
} = this._textContentSource;
this._processItems(items, styles);
capability.resolve();
} else {
throw new Error('No "textContentSource" parameter specified.');
}
capability.promise.then(() => {
styleCache = null;
render(this);
}, this._capability.reject);
}
}
exports.TextLayerRenderTask = TextLayerRenderTask;
function renderTextLayer(params) {
if (!params.textContentSource && (params.textContent || params.textContentStream)) {
(0, _display_utils.deprecated)("The TextLayerRender `textContent`/`textContentStream` parameters " + "will be removed in the future, please use `textContentSource` instead.");
params.textContentSource = params.textContent || params.textContentStream;
}
const task = new TextLayerRenderTask(params);
task._render();
return task;
}
function updateTextLayer({
container,
viewport,
textDivs,
textDivProperties,
isOffscreenCanvasSupported,
mustRotate = true,
mustRescale = true
}) {
if (mustRotate) {
(0, _display_utils.setLayerDimensions)(container, {
rotation: viewport.rotation
});
}
if (mustRescale) {
const ctx = getCtx(0, isOffscreenCanvasSupported);
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);
}
}
}