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.

Author: calixteman

src/display/text_layer.js

@@ -23,6 +23,7 @@
 /** @typedef {import("./display/text_layer").TextLayerRenderTask} TextLayerRenderTask */
 
 import {
+  AbortException,
   AnnotationEditorParamsType,
   AnnotationEditorType,
   AnnotationMode,
@@ -60,12 +61,12 @@ import {
   PixelsPerInch,
   RenderingCancelledException,
 } from "./display/display_utils.js";
+import { renderTextLayer, updateTextLayer } from "./display/text_layer.js";
 import { AnnotationEditorLayer } from "./display/editor/annotation_editor_layer.js";
 import { AnnotationEditorUIManager } from "./display/editor/tools.js";
 import { AnnotationLayer } from "./display/annotation_layer.js";
 import { GlobalWorkerOptions } from "./display/worker_options.js";
 import { isNodeJS } from "./shared/is_node.js";
-import { renderTextLayer } from "./display/text_layer.js";
 import { SVGGraphics } from "./display/svg.js";
 import { XfaLayer } from "./display/xfa_layer.js";
 
@@ -110,6 +111,7 @@ if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("PRODUCTION")) {
 }
 
 export {
+  AbortException,
   AnnotationEditorLayer,
   AnnotationEditorParamsType,
   AnnotationEditorType,
@@ -143,6 +145,7 @@ export {
   SVGGraphics,
   UnexpectedResponseException,
   UNSUPPORTED_FEATURES,
+  updateTextLayer,
   Util,
   VerbosityLevel,
   version,

src/pdf.js

@@ -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,15 +256,18 @@ 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({
         textContent,
         container: div,
         viewport,
       });
+
       await task.promise;
       svg.append(foreignObject);
 

test/driver.js

@@ -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%;

test/text_layer_test.css

@@ -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,
     });

test/unit/text_layer_spec.js

@@ -501,6 +501,7 @@ const PDFViewerApplication = {
       imageResourcesPath: AppOptions.get("imageResourcesPath"),
       enablePrintAutoRotate: AppOptions.get("enablePrintAutoRotate"),
       useOnlyCssZoom: AppOptions.get("useOnlyCssZoom"),
+      isOffscreenCanvasSupported: AppOptions.get("isOffscreenCanvasSupported"),
       maxCanvasPixels: AppOptions.get("maxCanvasPixels"),
       enablePermissions: AppOptions.get("enablePermissions"),
       pageColors,

web/app.js

@@ -165,33 +165,24 @@ class DefaultStructTreeLayerFactory {
 class DefaultTextLayerFactory {
   /**
    * @typedef {Object} CreateTextLayerBuilderParameters
-   * @property {HTMLDivElement} textLayerDiv
-   * @property {number} pageIndex
-   * @property {PageViewport} viewport
-   * @property {EventBus} eventBus
    * @property {TextHighlighter} highlighter
    * @property {TextAccessibilityManager} [accessibilityManager]
+   * @property {boolean} [isOffscreenCanvasSupported]
    */
 
   /**
    * @param {CreateTextLayerBuilderParameters}
    * @returns {TextLayerBuilder}
    */
   createTextLayerBuilder({
-    textLayerDiv,
-    pageIndex,
-    viewport,
-    eventBus,
     highlighter,
     accessibilityManager = null,
+    isOffscreenCanvasSupported = true,
   }) {
     return new TextLayerBuilder({
-      textLayerDiv,
-      pageIndex,
-      viewport,
-      eventBus,
       highlighter,
       accessibilityManager,
+      isOffscreenCanvasSupported,
     });
   }
 }

web/default_factory.js

@@ -21,7 +21,6 @@
 /** @typedef {import("./annotation_layer_builder").AnnotationLayerBuilder} AnnotationLayerBuilder */
 // eslint-disable-next-line max-len
 /** @typedef {import("./annotation_editor_layer_builder").AnnotationEditorLayerBuilder} AnnotationEditorLayerBuilder */
-/** @typedef {import("./event_utils").EventBus} EventBus */
 // eslint-disable-next-line max-len
 /** @typedef {import("./struct_tree_builder").StructTreeLayerBuilder} StructTreeLayerBuilder */
 /** @typedef {import("./text_highlighter").TextHighlighter} TextHighlighter */
@@ -168,25 +167,19 @@ class IRenderableView {
 class IPDFTextLayerFactory {
   /**
    * @typedef {Object} CreateTextLayerBuilderParameters
-   * @property {HTMLDivElement} textLayerDiv
-   * @property {number} pageIndex
-   * @property {PageViewport} viewport
-   * @property {EventBus} eventBus
    * @property {TextHighlighter} highlighter
    * @property {TextAccessibilityManager} [accessibilityManager]
+   * @property {boolean} [isOffscreenCanvasSupported]
    */
 
   /**
    * @param {CreateTextLayerBuilderParameters}
    * @returns {TextLayerBuilder}
    */
   createTextLayerBuilder({
-    textLayerDiv,
-    pageIndex,
-    viewport,
-    eventBus,
     highlighter,
     accessibilityManager,
+    isOffscreenCanvasSupported,
   }) {}
 }