1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-20 15:18:08 +02:00

Refactor the text layer code in order to avoid to recompute it on each draw

The idea is just to resuse what we got on the first draw.
Now, we only update the scaleX of the different spans and the other values
are dependant of --scale-factor.
Move some properties in the CSS in order to avoid any updates in JS.
This commit is contained in:
Calixte Denizet 2022-11-21 17:15:39 +01:00
parent fa54a58790
commit eed9bf71c5
13 changed files with 362 additions and 240 deletions

View file

@ -168,7 +168,7 @@ class Rasterize {
}
static get textStylePromise() {
const styles = ["./text_layer_test.css"];
const styles = [VIEWER_CSS, "./text_layer_test.css"];
return shadow(this, "textStylePromise", loadStyles(styles));
}
@ -256,8 +256,10 @@ class Rasterize {
// Items are transformed to have 1px font size.
svg.setAttribute("font-size", 1);
const [overrides] = await this.textStylePromise;
style.textContent = overrides;
const [common, overrides] = await this.textStylePromise;
style.textContent =
`${common}\n${overrides}\n` +
`:root { --scale-factor: ${viewport.scale} }`;
// Rendering text layer as HTML.
const task = renderTextLayer({
@ -265,6 +267,7 @@ class Rasterize {
container: div,
viewport,
});
await task.promise;
svg.append(foreignObject);

View file

@ -22,9 +22,11 @@
right: 0;
bottom: 0;
line-height: 1;
opacity: 1;
}
.textLayer span,
.textLayer br {
color: black;
position: absolute;
white-space: pre;
transform-origin: 0% 0%;

View file

@ -24,7 +24,7 @@ import { isNodeJS } from "../../src/shared/is_node.js";
describe("textLayer", function () {
it("creates textLayer from ReadableStream", async function () {
if (isNodeJS) {
pending("document.createDocumentFragment is not supported in Node.js.");
pending("document.createElement is not supported in Node.js.");
}
const loadingTask = getDocument(buildGetDocumentParams("basicapi.pdf"));
const pdfDocument = await loadingTask.promise;
@ -34,7 +34,7 @@ describe("textLayer", function () {
const textLayerRenderTask = renderTextLayer({
textContentStream: page.streamTextContent(),
container: document.createDocumentFragment(),
container: document.createElement("div"),
viewport: page.getViewport(),
textContentItemsStr,
});