Inline PDFPageView.paintOnCanvas in the draw method, now that SVG-rendering is removed

web/pdf_page_view.js

@@ -26,7 +26,6 @@
 import {
   AbortException,
   AnnotationMode,
-  createPromiseCapability,
   PixelsPerInch,
   RenderingCancelledException,
   setLayerDimensions,
@@ -119,6 +118,8 @@ class PDFPageView {
 
   #previousRotation = null;
 
+  #renderError = null;
+
   #renderingState = RenderingStates.INITIAL;
 
   #useThumbnailCanvas = {
@@ -126,6 +127,8 @@ class PDFPageView {
     regularAnnotations: true,
   };
 
+  #viewportMap = new WeakMap();
+
   /**
    * @param {PDFPageViewOptions} options
    */
@@ -160,10 +163,8 @@ class PDFPageView {
     this.renderingQueue = options.renderingQueue;
     this.l10n = options.l10n || NullL10n;
 
-    this.paintTask = null;
+    this.renderTask = null;
-    this.paintedViewportMap = new WeakMap();
     this.resume = null;
-    this._renderError = null;
     if (
       typeof PDFJSDev === "undefined" ||
       PDFJSDev.test("!PRODUCTION || GENERIC")
@@ -430,7 +431,7 @@ class PDFPageView {
       return;
     }
     const zoomLayerCanvas = this.zoomLayer.firstChild;
-    this.paintedViewportMap.delete(zoomLayerCanvas);
+    this.#viewportMap.delete(zoomLayerCanvas);
     // Zeroing the width and height causes Firefox to release graphics
     // resources immediately, which can greatly reduce memory consumption.
     zoomLayerCanvas.width = 0;
@@ -502,7 +503,7 @@ class PDFPageView {
 
     if (!zoomLayerNode) {
       if (this.canvas) {
-        this.paintedViewportMap.delete(this.canvas);
+        this.#viewportMap.delete(this.canvas);
         // Zeroing the width and height causes Firefox to release graphics
         // resources immediately, which can greatly reduce memory consumption.
         this.canvas.width = 0;
@@ -559,10 +560,10 @@ class PDFPageView {
 
     let isScalingRestricted = false;
     if (this.canvas && this.maxCanvasPixels > 0) {
-      const outputScale = this.outputScale;
+      const { width, height } = this.viewport;
+      const { sx, sy } = this.outputScale;
       if (
-        ((Math.floor(this.viewport.width) * outputScale.sx) | 0) *
+        ((Math.floor(width) * sx) | 0) * ((Math.floor(height) * sy) | 0) >
-          ((Math.floor(this.viewport.height) * outputScale.sy) | 0) >
         this.maxCanvasPixels
       ) {
         isScalingRestricted = true;
@@ -608,7 +609,7 @@ class PDFPageView {
           pageNumber: this.id,
           cssTransform: true,
           timestamp: performance.now(),
-          error: this._renderError,
+          error: this.#renderError,
         });
         return;
       }
@@ -640,9 +641,9 @@ class PDFPageView {
     keepTextLayer = false,
     cancelExtraDelay = 0,
   } = {}) {
-    if (this.paintTask) {
+    if (this.renderTask) {
-      this.paintTask.cancel(cancelExtraDelay);
+      this.renderTask.cancel(cancelExtraDelay);
-      this.paintTask = null;
+      this.renderTask = null;
     }
     this.resume = null;
 
@@ -697,7 +698,7 @@ class PDFPageView {
       style.width = style.height = "";
     }
 
-    const originalViewport = this.paintedViewportMap.get(target);
+    const originalViewport = this.#viewportMap.get(target);
     if (this.viewport !== originalViewport) {
       // The canvas may have been originally rotated; rotate relative to that.
       const relativeRotation =
@@ -746,33 +747,33 @@ class PDFPageView {
     return this.viewport.convertToPdfPoint(x, y);
   }
 
-  async #finishPaintTask(paintTask, error = null) {
+  async #finishRenderTask(renderTask, error = null) {
-    // The paintTask may have been replaced by a new one, so only remove
+    // The renderTask may have been replaced by a new one, so only remove
-    // the reference to the paintTask if it matches the one that is
+    // the reference to the renderTask if it matches the one that is
     // triggering this callback.
-    if (paintTask === this.paintTask) {
+    if (renderTask === this.renderTask) {
-      this.paintTask = null;
+      this.renderTask = null;
     }
 
     if (error instanceof RenderingCancelledException) {
-      this._renderError = null;
+      this.#renderError = null;
       return;
     }
-    this._renderError = error;
+    this.#renderError = error;
 
     this.renderingState = RenderingStates.FINISHED;
     this._resetZoomLayer(/* removeFromDOM = */ true);
 
     // Ensure that the thumbnails won't become partially (or fully) blank,
     // for documents that contain interactive form elements.
-    this.#useThumbnailCanvas.regularAnnotations = !paintTask.separateAnnots;
+    this.#useThumbnailCanvas.regularAnnotations = !renderTask.separateAnnots;
 
     this.eventBus.dispatch("pagerendered", {
       source: this,
       pageNumber: this.id,
       cssTransform: false,
       timestamp: performance.now(),
-      error: this._renderError,
+      error: this.#renderError,
     });
 
     if (error) {
@@ -785,7 +786,7 @@ class PDFPageView {
       console.error("Must be in new state before drawing");
       this.reset(); // Ensure that we reset all state to prevent issues.
     }
-    const { div, pdfPage } = this;
+    const { div, l10n, pageColors, pdfPage, viewport } = this;
 
     if (!pdfPage) {
       this.renderingState = RenderingStates.FINISHED;
@@ -837,7 +838,7 @@ class PDFPageView {
         renderForms: this.#annotationMode === AnnotationMode.ENABLE_FORMS,
         linkService,
         downloadManager,
-        l10n: this.l10n,
+        l10n,
         enableScripting,
         hasJSActionsPromise,
         fieldObjectsPromise,
@@ -846,53 +847,127 @@ class PDFPageView {
       });
     }
 
-    let renderContinueCallback = null;
+    const renderContinueCallback = cont => {
-    if (this.renderingQueue) {
+      showCanvas?.(false);
-      renderContinueCallback = cont => {
+      if (this.renderingQueue && !this.renderingQueue.isHighestPriority(this)) {
-        if (!this.renderingQueue.isHighestPriority(this)) {
+        this.renderingState = RenderingStates.PAUSED;
-          this.renderingState = RenderingStates.PAUSED;
+        this.resume = () => {
-          this.resume = () => {
+          this.renderingState = RenderingStates.RUNNING;
-            this.renderingState = RenderingStates.RUNNING;
+          cont();
-            cont();
+        };
-          };
+        return;
-          return;
+      }
-        }
+      cont();
-        cont();
+    };
-      };
+
+    const { width, height } = viewport;
+    const canvas = document.createElement("canvas");
+    canvas.setAttribute("role", "presentation");
+
+    // Keep the canvas hidden until the first draw callback, or until drawing
+    // is complete when `!this.renderingQueue`, to prevent black flickering.
+    canvas.hidden = true;
+    const hasHCM = !!(pageColors?.background && pageColors?.foreground);
+
+    let showCanvas = isLastShow => {
+      // In HCM, a final filter is applied on the canvas which means that
+      // before it's applied we've normal colors. Consequently, to avoid to have
+      // a final flash we just display it once all the drawing is done.
+      if (!hasHCM || isLastShow) {
+        canvas.hidden = false;
+        showCanvas = null; // Only invoke the function once.
+      }
+    };
+    canvasWrapper.append(canvas);
+    this.canvas = canvas;
+
+    const ctx = canvas.getContext("2d", { alpha: false });
+    const outputScale = (this.outputScale = new OutputScale());
+
+    if (this.useOnlyCssZoom) {
+      const actualSizeViewport = viewport.clone({
+        scale: PixelsPerInch.PDF_TO_CSS_UNITS,
+      });
+      // Use a scale that makes the canvas have the originally intended size
+      // of the page.
+      outputScale.sx *= actualSizeViewport.width / width;
+      outputScale.sy *= actualSizeViewport.height / height;
     }
 
-    const paintTask = this.paintOnCanvas(canvasWrapper);
+    if (this.maxCanvasPixels > 0) {
-    paintTask.onRenderContinue = renderContinueCallback;
+      const pixelsInViewport = width * height;
-    this.paintTask = paintTask;
+      const maxScale = Math.sqrt(this.maxCanvasPixels / pixelsInViewport);
+      if (outputScale.sx > maxScale || outputScale.sy > maxScale) {
+        outputScale.sx = maxScale;
+        outputScale.sy = maxScale;
+        this.hasRestrictedScaling = true;
+      } else {
+        this.hasRestrictedScaling = false;
+      }
+    }
+    const sfx = approximateFraction(outputScale.sx);
+    const sfy = approximateFraction(outputScale.sy);
 
-    const resultPromise = paintTask.promise.then(
+    canvas.width = roundToDivide(width * outputScale.sx, sfx[0]);
-      () => {
+    canvas.height = roundToDivide(height * outputScale.sy, sfy[0]);
-        return this.#finishPaintTask(paintTask).then(async () => {
+    const { style } = canvas;
-          this.#renderTextLayer();
+    style.width = roundToDivide(width, sfx[1]) + "px";
+    style.height = roundToDivide(height, sfy[1]) + "px";
 
-          if (this.annotationLayer) {
+    // Add the viewport so it's known what it was originally drawn with.
-            await this.#renderAnnotationLayer();
+    this.#viewportMap.set(canvas, viewport);
+
+    // Rendering area
+    const transform = outputScale.scaled
+      ? [outputScale.sx, 0, 0, outputScale.sy, 0, 0]
+      : null;
+    const renderContext = {
+      canvasContext: ctx,
+      transform,
+      viewport,
+      annotationMode: this.#annotationMode,
+      optionalContentConfigPromise: this._optionalContentConfigPromise,
+      annotationCanvasMap: this._annotationCanvasMap,
+      pageColors,
+    };
+    const renderTask = (this.renderTask = this.pdfPage.render(renderContext));
+    renderTask.onContinue = renderContinueCallback;
+
+    const resultPromise = renderTask.promise.then(
+      async () => {
+        showCanvas?.(true);
+        await this.#finishRenderTask(renderTask);
+
+        this.#renderTextLayer();
+
+        if (this.annotationLayer) {
+          await this.#renderAnnotationLayer();
+        }
+
+        if (!this.annotationEditorLayer) {
+          const { annotationEditorUIManager } = this.#layerProperties();
+
+          if (!annotationEditorUIManager) {
+            return;
           }
-
+          this.annotationEditorLayer = new AnnotationEditorLayerBuilder({
-          if (!this.annotationEditorLayer) {
+            uiManager: annotationEditorUIManager,
-            const { annotationEditorUIManager } = this.#layerProperties();
+            pageDiv: div,
-
+            pdfPage,
-            if (!annotationEditorUIManager) {
+            l10n,
-              return;
+            accessibilityManager: this._accessibilityManager,
-            }
+          });
-            this.annotationEditorLayer = new AnnotationEditorLayerBuilder({
+        }
-              uiManager: annotationEditorUIManager,
+        this.#renderAnnotationEditorLayer();
-              pageDiv: div,
-              pdfPage,
-              l10n: this.l10n,
-              accessibilityManager: this._accessibilityManager,
-            });
-          }
-          this.#renderAnnotationEditorLayer();
-        });
       },
       error => {
-        return this.#finishPaintTask(paintTask, error);
+        // When zooming with a `drawingDelay` set, avoid temporarily showing
+        // a black canvas if rendering was cancelled before the `onContinue`-
+        // callback had been invoked at least once.
+        if (!(error instanceof RenderingCancelledException)) {
+          showCanvas?.(true);
+        }
+        return this.#finishRenderTask(renderTask, error);
       }
     );
 
@@ -922,123 +997,6 @@ class PDFPageView {
     return resultPromise;
   }
 
-  paintOnCanvas(canvasWrapper) {
-    const renderCapability = createPromiseCapability();
-    const result = {
-      promise: renderCapability.promise,
-      onRenderContinue(cont) {
-        cont();
-      },
-      cancel(extraDelay = 0) {
-        renderTask.cancel(extraDelay);
-      },
-      get separateAnnots() {
-        return renderTask.separateAnnots;
-      },
-    };
-
-    const viewport = this.viewport;
-    const { width, height } = viewport;
-    const canvas = document.createElement("canvas");
-    canvas.setAttribute("role", "presentation");
-
-    // Keep the canvas hidden until the first draw callback, or until drawing
-    // is complete when `!this.renderingQueue`, to prevent black flickering.
-    canvas.hidden = true;
-    const hasHCM = !!(
-      this.pageColors?.background && this.pageColors?.foreground
-    );
-    let showCanvas = isLastShow => {
-      // In HCM, a final filter is applied on the canvas which means that
-      // before it's applied we've normal colors. Consequently, to avoid to have
-      // a final flash we just display it once all the drawing is done.
-      if (!hasHCM || isLastShow) {
-        canvas.hidden = false;
-        showCanvas = null; // Only invoke the function once.
-      }
-    };
-
-    canvasWrapper.append(canvas);
-    this.canvas = canvas;
-
-    const ctx = canvas.getContext("2d", { alpha: false });
-    const outputScale = (this.outputScale = new OutputScale());
-
-    if (this.useOnlyCssZoom) {
-      const actualSizeViewport = viewport.clone({
-        scale: PixelsPerInch.PDF_TO_CSS_UNITS,
-      });
-      // Use a scale that makes the canvas have the originally intended size
-      // of the page.
-      outputScale.sx *= actualSizeViewport.width / width;
-      outputScale.sy *= actualSizeViewport.height / height;
-    }
-
-    if (this.maxCanvasPixels > 0) {
-      const pixelsInViewport = width * height;
-      const maxScale = Math.sqrt(this.maxCanvasPixels / pixelsInViewport);
-      if (outputScale.sx > maxScale || outputScale.sy > maxScale) {
-        outputScale.sx = maxScale;
-        outputScale.sy = maxScale;
-        this.hasRestrictedScaling = true;
-      } else {
-        this.hasRestrictedScaling = false;
-      }
-    }
-
-    const sfx = approximateFraction(outputScale.sx);
-    const sfy = approximateFraction(outputScale.sy);
-
-    canvas.width = roundToDivide(viewport.width * outputScale.sx, sfx[0]);
-    canvas.height = roundToDivide(viewport.height * outputScale.sy, sfy[0]);
-    const { style } = canvas;
-    style.width = roundToDivide(viewport.width, sfx[1]) + "px";
-    style.height = roundToDivide(viewport.height, sfy[1]) + "px";
-
-    // Add the viewport so it's known what it was originally drawn with.
-    this.paintedViewportMap.set(canvas, viewport);
-
-    // Rendering area
-    const transform = outputScale.scaled
-      ? [outputScale.sx, 0, 0, outputScale.sy, 0, 0]
-      : null;
-    const renderContext = {
-      canvasContext: ctx,
-      transform,
-      viewport,
-      annotationMode: this.#annotationMode,
-      optionalContentConfigPromise: this._optionalContentConfigPromise,
-      annotationCanvasMap: this._annotationCanvasMap,
-      pageColors: this.pageColors,
-    };
-    const renderTask = this.pdfPage.render(renderContext);
-    renderTask.onContinue = function (cont) {
-      showCanvas?.(false);
-      if (result.onRenderContinue) {
-        result.onRenderContinue(cont);
-      } else {
-        cont();
-      }
-    };
-
-    renderTask.promise.then(
-      function () {
-        showCanvas?.(true);
-        renderCapability.resolve();
-      },
-      function (error) {
-        // When zooming with a `drawingDelay` set, avoid temporarily showing
-        // a black canvas if rendering was cancelled before the `onContinue`-
-        // callback had been invoked at least once.
-        if (!(error instanceof RenderingCancelledException)) {
-          showCanvas?.(true);
-        }
-        renderCapability.reject(error);
-      }
-    );
-    return result;
-  }
-
   /**
    * @param {string|null} label
    */