[api-minor] Improve thumbnail handling in documents that contain interactive forms

To improve performance of the sidebar we use the page-canvases to generate the thumbnails whenever possible, since that avoids unnecessary re-rendering when the sidebar is open. This works generally well, however there's an old problem in PDF documents that contain interactive forms (when those are enabled): Note how the thumbnails become partially (or fully) blank, since those Annotations are not included in the OperatorList.[1]

We obviously want to keep using the `PDFThumbnailView.setImage`-method for most documents, however we need a way to skip it only for those pages that contain interactive forms.
As it turns out it's unfortunately not all that simple to tell, after the fact, from looking only at the OperatorList that some Annotations were skipped. While it might have been possible to try and infer that in the viewer, it'd not have been pretty considering that at the time when rendering finishes the annotationLayer has not yet been built.
The overall simplest solution that I could come up with, was instead to include a *summary* of the interactive form-state when doing the final "flushing" of the OperatorList and expose that information in the API.

---
[1] Some examples from our test-suite: `annotation-tx2.pdf` where the thumbnail is completely blank, and `bug1737260.pdf` where the thumbnail is missing the "buttons" found on the page.

src/core/annotation.js

@@ -881,7 +881,11 @@ class Annotation {
     );
     if (!appearance) {
       if (!isUsingOwnCanvas) {
-        return new OperatorList();
+        return {
+          opList: new OperatorList(),
+          separateForm: false,
+          separateCanvas: false,
+        };
       }
       appearance = new StringStream("");
       appearance.dict = new Dict();
@@ -930,7 +934,7 @@ class Annotation {
       opList.addOp(OPS.endMarkedContent, []);
     }
     this.reset();
-    return opList;
+    return { opList, separateForm: false, separateCanvas: isUsingOwnCanvas };
   }
 
   async save(evaluator, task, annotationStorage) {
@@ -1619,7 +1623,11 @@ class WidgetAnnotation extends Annotation {
     // Do not render form elements on the canvas when interactive forms are
     // enabled. The display layer is responsible for rendering them instead.
     if (renderForms && !(this instanceof SignatureWidgetAnnotation)) {
-      return new OperatorList();
+      return {
+        opList: new OperatorList(),
+        separateForm: true,
+        separateCanvas: false,
+      };
     }
 
     if (!this._hasText) {
@@ -1647,12 +1655,12 @@ class WidgetAnnotation extends Annotation {
       );
     }
 
-    const operatorList = new OperatorList();
+    const opList = new OperatorList();
 
     // Even if there is an appearance stream, ignore it. This is the
     // behaviour used by Adobe Reader.
     if (!this._defaultAppearance || content === null) {
-      return operatorList;
+      return { opList, separateForm: false, separateCanvas: false };
     }
 
     const matrix = [1, 0, 0, 1, 0, 0];
@@ -1672,10 +1680,10 @@ class WidgetAnnotation extends Annotation {
       );
     }
     if (optionalContent !== undefined) {
-      operatorList.addOp(OPS.beginMarkedContentProps, ["OC", optionalContent]);
+      opList.addOp(OPS.beginMarkedContentProps, ["OC", optionalContent]);
     }
 
-    operatorList.addOp(OPS.beginAnnotation, [
+    opList.addOp(OPS.beginAnnotation, [
       this.data.id,
       this.data.rect,
       transform,
@@ -1688,14 +1696,14 @@ class WidgetAnnotation extends Annotation {
       stream,
       task,
       resources: this._fieldResources.mergedResources,
-      operatorList,
+      operatorList: opList,
     });
-    operatorList.addOp(OPS.endAnnotation, []);
+    opList.addOp(OPS.endAnnotation, []);
 
     if (optionalContent !== undefined) {
-      operatorList.addOp(OPS.endMarkedContent, []);
+      opList.addOp(OPS.endMarkedContent, []);
     }
-    return operatorList;
+    return { opList, separateForm: false, separateCanvas: false };
   }
 
   _getMKDict(rotation) {
@@ -2477,7 +2485,11 @@ class ButtonWidgetAnnotation extends WidgetAnnotation {
     }
 
     // No appearance
-    return new OperatorList();
+    return {
+      opList: new OperatorList(),
+      separateForm: false,
+      separateCanvas: false,
+    };
   }
 
   async save(evaluator, task, annotationStorage) {

src/core/document.js

@@ -455,7 +455,7 @@ class Page {
         annotations.length === 0 ||
         intent & RenderingIntentFlag.ANNOTATIONS_DISABLE
       ) {
-        pageOpList.flush(true);
+        pageOpList.flush(/* lastChunk = */ true);
         return { length: pageOpList.totalLength };
       }
       const renderForms = !!(intent & RenderingIntentFlag.ANNOTATIONS_FORMS),
@@ -493,10 +493,23 @@ class Page {
       }
 
       return Promise.all(opListPromises).then(function (opLists) {
-        for (const opList of opLists) {
+        let form = false,
+          canvas = false;
+
+        for (const { opList, separateForm, separateCanvas } of opLists) {
           pageOpList.addOpList(opList);
+
+          if (separateForm) {
+            form = separateForm;
+          }
+          if (separateCanvas) {
+            canvas = separateCanvas;
+          }
         }
-        pageOpList.flush(true);
+        pageOpList.flush(
+          /* lastChunk = */ true,
+          /* separateAnnots = */ { form, canvas }
+        );
         return { length: pageOpList.totalLength };
       });
     });

src/core/operator_list.js

@@ -690,7 +690,7 @@ class OperatorList {
     return transfers;
   }
 
-  flush(lastChunk = false) {
+  flush(lastChunk = false, separateAnnots = null) {
     this.optimizer.flush();
     const length = this.length;
     this._totalLength += length;
@@ -700,6 +700,7 @@ class OperatorList {
         fnArray: this.fnArray,
         argsArray: this.argsArray,
         lastChunk,
+        separateAnnots,
         length,
       },
       1,

src/display/api.js

@@ -1477,6 +1477,7 @@ class PDFPageProxy {
         fnArray: [],
         argsArray: [],
         lastChunk: false,
+        separateAnnots: null,
       };
 
       if (this._stats) {
@@ -1599,6 +1600,7 @@ class PDFPageProxy {
         fnArray: [],
         argsArray: [],
         lastChunk: false,
+        separateAnnots: null,
       };
 
       if (this._stats) {
@@ -1795,6 +1797,7 @@ class PDFPageProxy {
       intentState.operatorList.argsArray.push(operatorListChunk.argsArray[i]);
     }
     intentState.operatorList.lastChunk = operatorListChunk.lastChunk;
+    intentState.operatorList.separateAnnots = operatorListChunk.separateAnnots;
 
     // Notify all the rendering tasks there are more operators to be consumed.
     for (const internalRenderTask of intentState.renderTasks) {
@@ -3194,8 +3197,10 @@ class PDFObjects {
  * Allows controlling of the rendering tasks.
  */
 class RenderTask {
+  #internalRenderTask = null;
+
   constructor(internalRenderTask) {
-    this._internalRenderTask = internalRenderTask;
+    this.#internalRenderTask = internalRenderTask;
 
     /**
      * Callback for incremental rendering -- a function that will be called
@@ -3211,7 +3216,7 @@ class RenderTask {
    * @type {Promise<void>}
    */
   get promise() {
-    return this._internalRenderTask.capability.promise;
+    return this.#internalRenderTask.capability.promise;
   }
 
   /**
@@ -3220,7 +3225,23 @@ class RenderTask {
    * this object extends will be rejected when cancelled.
    */
   cancel() {
-    this._internalRenderTask.cancel();
+    this.#internalRenderTask.cancel();
+  }
+
+  /**
+   * Whether form fields are rendered separately from the main operatorList.
+   * @type {boolean}
+   */
+  get separateAnnots() {
+    const { separateAnnots } = this.#internalRenderTask.operatorList;
+    if (!separateAnnots) {
+      return false;
+    }
+    const { annotationCanvasMap } = this.#internalRenderTask;
+    return (
+      separateAnnots.form ||
+      (separateAnnots.canvas && annotationCanvasMap?.size > 0)
+    );
   }
 }
 

test/unit/annotation_spec.js

@@ -1682,29 +1682,27 @@ describe("annotation", function () {
       );
       const annotationStorage = new Map();
 
-      const operatorList = await annotation.getOperatorList(
+      const { opList } = await annotation.getOperatorList(
         partialEvaluator,
         task,
         RenderingIntentFlag.PRINT,
         false,
         annotationStorage
       );
-      expect(operatorList.argsArray.length).toEqual(3);
+      expect(opList.argsArray.length).toEqual(3);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.setFillRGBColor,
         OPS.endAnnotation,
       ]);
-      expect(operatorList.argsArray[0]).toEqual([
+      expect(opList.argsArray[0]).toEqual([
         "271R",
         [0, 0, 32, 10],
         [32, 0, 0, 10, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
-      expect(operatorList.argsArray[1]).toEqual(
+      expect(opList.argsArray[1]).toEqual(new Uint8ClampedArray([26, 51, 76]));
-        new Uint8ClampedArray([26, 51, 76])
-      );
     });
 
     it("should render auto-sized text for printing", async function () {
@@ -2369,29 +2367,29 @@ describe("annotation", function () {
       const annotationStorage = new Map();
       annotationStorage.set(annotation.data.id, { value: true });
 
-      const operatorList = await annotation.getOperatorList(
+      const { opList } = await annotation.getOperatorList(
         checkboxEvaluator,
         task,
         RenderingIntentFlag.PRINT,
         false,
         annotationStorage
       );
-      expect(operatorList.argsArray.length).toEqual(5);
+      expect(opList.argsArray.length).toEqual(5);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.dependency,
         OPS.setFont,
         OPS.showText,
         OPS.endAnnotation,
       ]);
-      expect(operatorList.argsArray[0]).toEqual([
+      expect(opList.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
         [0, 0, 0, 0, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
-      expect(operatorList.argsArray[3][0][0].unicode).toEqual("4");
+      expect(opList.argsArray[3][0][0].unicode).toEqual("4");
     });
 
     it("should render checkboxes for printing", async function () {
@@ -2430,55 +2428,51 @@ describe("annotation", function () {
       const annotationStorage = new Map();
       annotationStorage.set(annotation.data.id, { value: true });
 
-      let operatorList = await annotation.getOperatorList(
+      const { opList: opList1 } = await annotation.getOperatorList(
         partialEvaluator,
         task,
         RenderingIntentFlag.PRINT,
         false,
         annotationStorage
       );
-      expect(operatorList.argsArray.length).toEqual(3);
+      expect(opList1.argsArray.length).toEqual(3);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList1.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.setFillRGBColor,
         OPS.endAnnotation,
       ]);
-      expect(operatorList.argsArray[0]).toEqual([
+      expect(opList1.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
         [0, 0, 0, 0, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
-      expect(operatorList.argsArray[1]).toEqual(
+      expect(opList1.argsArray[1]).toEqual(new Uint8ClampedArray([26, 51, 76]));
-        new Uint8ClampedArray([26, 51, 76])
-      );
 
       annotationStorage.set(annotation.data.id, { value: false });
 
-      operatorList = await annotation.getOperatorList(
+      const { opList: opList2 } = await annotation.getOperatorList(
         partialEvaluator,
         task,
         RenderingIntentFlag.PRINT,
         false,
         annotationStorage
       );
-      expect(operatorList.argsArray.length).toEqual(3);
+      expect(opList2.argsArray.length).toEqual(3);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList2.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.setFillRGBColor,
         OPS.endAnnotation,
       ]);
-      expect(operatorList.argsArray[0]).toEqual([
+      expect(opList2.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
         [0, 0, 0, 0, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
-      expect(operatorList.argsArray[1]).toEqual(
+      expect(opList2.argsArray[1]).toEqual(new Uint8ClampedArray([76, 51, 26]));
-        new Uint8ClampedArray([76, 51, 26])
-      );
     });
 
     it("should render checkboxes for printing twice", async function () {
@@ -2520,27 +2514,27 @@ describe("annotation", function () {
       for (let i = 0; i < 2; i++) {
         annotationStorage.set(annotation.data.id, { value: true });
 
-        const operatorList = await annotation.getOperatorList(
+        const { opList } = await annotation.getOperatorList(
           partialEvaluator,
           task,
           RenderingIntentFlag.PRINT,
           false,
           annotationStorage
         );
-        expect(operatorList.argsArray.length).toEqual(3);
+        expect(opList.argsArray.length).toEqual(3);
-        expect(operatorList.fnArray).toEqual([
+        expect(opList.fnArray).toEqual([
           OPS.beginAnnotation,
           OPS.setFillRGBColor,
           OPS.endAnnotation,
         ]);
-        expect(operatorList.argsArray[0]).toEqual([
+        expect(opList.argsArray[0]).toEqual([
           "1249R",
           [0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0],
           [1, 0, 0, 1, 0, 0],
           false,
         ]);
-        expect(operatorList.argsArray[1]).toEqual(
+        expect(opList.argsArray[1]).toEqual(
           new Uint8ClampedArray([26, 51, 76])
         );
       }
@@ -2582,29 +2576,27 @@ describe("annotation", function () {
       );
       const annotationStorage = new Map();
 
-      const operatorList = await annotation.getOperatorList(
+      const { opList } = await annotation.getOperatorList(
         partialEvaluator,
         task,
         RenderingIntentFlag.PRINT,
         false,
         annotationStorage
       );
-      expect(operatorList.argsArray.length).toEqual(3);
+      expect(opList.argsArray.length).toEqual(3);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.setFillRGBColor,
         OPS.endAnnotation,
       ]);
-      expect(operatorList.argsArray[0]).toEqual([
+      expect(opList.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
         [0, 0, 0, 0, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
-      expect(operatorList.argsArray[1]).toEqual(
+      expect(opList.argsArray[1]).toEqual(new Uint8ClampedArray([26, 51, 76]));
-        new Uint8ClampedArray([26, 51, 76])
-      );
     });
 
     it("should save checkboxes", async function () {
@@ -2838,55 +2830,51 @@ describe("annotation", function () {
       const annotationStorage = new Map();
       annotationStorage.set(annotation.data.id, { value: true });
 
-      let operatorList = await annotation.getOperatorList(
+      const { opList: opList1 } = await annotation.getOperatorList(
         partialEvaluator,
         task,
         RenderingIntentFlag.PRINT,
         false,
         annotationStorage
       );
-      expect(operatorList.argsArray.length).toEqual(3);
+      expect(opList1.argsArray.length).toEqual(3);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList1.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.setFillRGBColor,
         OPS.endAnnotation,
       ]);
-      expect(operatorList.argsArray[0]).toEqual([
+      expect(opList1.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
         [0, 0, 0, 0, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
-      expect(operatorList.argsArray[1]).toEqual(
+      expect(opList1.argsArray[1]).toEqual(new Uint8ClampedArray([26, 51, 76]));
-        new Uint8ClampedArray([26, 51, 76])
-      );
 
       annotationStorage.set(annotation.data.id, { value: false });
 
-      operatorList = await annotation.getOperatorList(
+      const { opList: opList2 } = await annotation.getOperatorList(
         partialEvaluator,
         task,
         RenderingIntentFlag.PRINT,
         false,
         annotationStorage
       );
-      expect(operatorList.argsArray.length).toEqual(3);
+      expect(opList2.argsArray.length).toEqual(3);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList2.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.setFillRGBColor,
         OPS.endAnnotation,
       ]);
-      expect(operatorList.argsArray[0]).toEqual([
+      expect(opList2.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
         [0, 0, 0, 0, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
-      expect(operatorList.argsArray[1]).toEqual(
+      expect(opList2.argsArray[1]).toEqual(new Uint8ClampedArray([76, 51, 26]));
-        new Uint8ClampedArray([76, 51, 26])
-      );
     });
 
     it("should render radio buttons for printing using normal appearance", async function () {
@@ -2926,29 +2914,27 @@ describe("annotation", function () {
       );
       const annotationStorage = new Map();
 
-      const operatorList = await annotation.getOperatorList(
+      const { opList } = await annotation.getOperatorList(
         partialEvaluator,
         task,
         RenderingIntentFlag.PRINT,
         false,
         annotationStorage
       );
-      expect(operatorList.argsArray.length).toEqual(3);
+      expect(opList.argsArray.length).toEqual(3);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.setFillRGBColor,
         OPS.endAnnotation,
       ]);
-      expect(operatorList.argsArray[0]).toEqual([
+      expect(opList.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
         [0, 0, 0, 0, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
-      expect(operatorList.argsArray[1]).toEqual(
+      expect(opList.argsArray[1]).toEqual(new Uint8ClampedArray([76, 51, 26]));
-        new Uint8ClampedArray([76, 51, 26])
-      );
     });
 
     it("should save radio buttons", async function () {
@@ -4087,7 +4073,7 @@ describe("annotation", function () {
         ])
       )[0];
 
-      const operatorList = await freetextAnnotation.getOperatorList(
+      const { opList } = await freetextAnnotation.getOperatorList(
         partialEvaluator,
         task,
         RenderingIntentFlag.PRINT,
@@ -4095,8 +4081,8 @@ describe("annotation", function () {
         null
       );
 
-      expect(operatorList.fnArray.length).toEqual(16);
+      expect(opList.fnArray.length).toEqual(16);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.save,
         OPS.constructPath,
@@ -4322,7 +4308,7 @@ describe("annotation", function () {
         ])
       )[0];
 
-      const operatorList = await inkAnnotation.getOperatorList(
+      const { opList } = await inkAnnotation.getOperatorList(
         partialEvaluator,
         task,
         RenderingIntentFlag.PRINT,
@@ -4330,8 +4316,8 @@ describe("annotation", function () {
         null
       );
 
-      expect(operatorList.argsArray.length).toEqual(8);
+      expect(opList.argsArray.length).toEqual(8);
-      expect(operatorList.fnArray).toEqual([
+      expect(opList.fnArray).toEqual([
         OPS.beginAnnotation,
         OPS.setLineWidth,
         OPS.setLineCap,
@@ -4343,20 +4329,18 @@ describe("annotation", function () {
       ]);
 
       // Linewidth.
-      expect(operatorList.argsArray[1]).toEqual([3]);
+      expect(opList.argsArray[1]).toEqual([3]);
       // LineCap.
-      expect(operatorList.argsArray[2]).toEqual([1]);
+      expect(opList.argsArray[2]).toEqual([1]);
       // LineJoin.
-      expect(operatorList.argsArray[3]).toEqual([1]);
+      expect(opList.argsArray[3]).toEqual([1]);
       // Color.
-      expect(operatorList.argsArray[4]).toEqual(
+      expect(opList.argsArray[4]).toEqual(new Uint8ClampedArray([0, 255, 0]));
-        new Uint8ClampedArray([0, 255, 0])
-      );
       // Path.
-      expect(operatorList.argsArray[5][0]).toEqual([OPS.moveTo, OPS.curveTo]);
+      expect(opList.argsArray[5][0]).toEqual([OPS.moveTo, OPS.curveTo]);
-      expect(operatorList.argsArray[5][1]).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
+      expect(opList.argsArray[5][1]).toEqual([1, 2, 3, 4, 5, 6, 7, 8]);
       // Min-max.
-      expect(operatorList.argsArray[5][2]).toEqual([1, 1, 2, 2]);
+      expect(opList.argsArray[5][2]).toEqual([1, 1, 2, 2]);
     });
   });
 

test/unit/api_spec.js

@@ -501,6 +501,7 @@ describe("api", function () {
       expect(opList.fnArray.length).toEqual(0);
       expect(opList.argsArray.length).toEqual(0);
       expect(opList.lastChunk).toEqual(true);
+      expect(opList.separateAnnots).toEqual(null);
 
       await loadingTask.destroy();
     });
@@ -521,6 +522,7 @@ describe("api", function () {
       expect(opList.fnArray.length).toEqual(0);
       expect(opList.argsArray.length).toEqual(0);
       expect(opList.lastChunk).toEqual(true);
+      expect(opList.separateAnnots).toEqual(null);
 
       await loadingTask.destroy();
     });
@@ -588,6 +590,7 @@ describe("api", function () {
       expect(opList.fnArray.length).toBeGreaterThan(5);
       expect(opList.argsArray.length).toBeGreaterThan(5);
       expect(opList.lastChunk).toEqual(true);
+      expect(opList.separateAnnots).toEqual(null);
 
       try {
         await pdfDocument2.getPage(1);
@@ -631,6 +634,7 @@ describe("api", function () {
         expect(opList.fnArray.length).toBeGreaterThan(5);
         expect(opList.argsArray.length).toBeGreaterThan(5);
         expect(opList.lastChunk).toEqual(true);
+        expect(opList.separateAnnots).toEqual(null);
       }
 
       await Promise.all([loadingTask1.destroy(), loadingTask2.destroy()]);
@@ -2402,6 +2406,10 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       expect(operatorList.fnArray.length).toBeGreaterThan(100);
       expect(operatorList.argsArray.length).toBeGreaterThan(100);
       expect(operatorList.lastChunk).toEqual(true);
+      expect(operatorList.separateAnnots).toEqual({
+        form: false,
+        canvas: false,
+      });
     });
 
     it("gets operatorList with JPEG image (issue 4888)", async function () {
@@ -2442,6 +2450,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
               expect(opList.fnArray.length).toBeGreaterThan(100);
               expect(opList.argsArray.length).toBeGreaterThan(100);
               expect(opList.lastChunk).toEqual(true);
+              expect(opList.separateAnnots).toEqual(null);
 
               return loadingTask1.destroy();
             });
@@ -2454,6 +2463,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
               expect(opList.fnArray.length).toEqual(0);
               expect(opList.argsArray.length).toEqual(0);
               expect(opList.lastChunk).toEqual(true);
+              expect(opList.separateAnnots).toEqual(null);
 
               return loadingTask2.destroy();
             });
@@ -2475,6 +2485,10 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       expect(operatorList.fnArray.length).toBeGreaterThan(20);
       expect(operatorList.argsArray.length).toBeGreaterThan(20);
       expect(operatorList.lastChunk).toEqual(true);
+      expect(operatorList.separateAnnots).toEqual({
+        form: false,
+        canvas: false,
+      });
 
       // The `getOperatorList` method, similar to the `render` method,
       // is supposed to include any existing Annotation-operatorLists.
@@ -2498,6 +2512,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       expect(opListAnnotDisable.fnArray.length).toEqual(0);
       expect(opListAnnotDisable.argsArray.length).toEqual(0);
       expect(opListAnnotDisable.lastChunk).toEqual(true);
+      expect(opListAnnotDisable.separateAnnots).toEqual(null);
 
       const opListAnnotEnable = await pdfPage.getOperatorList({
         annotationMode: AnnotationMode.ENABLE,
@@ -2505,6 +2520,10 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       expect(opListAnnotEnable.fnArray.length).toBeGreaterThan(140);
       expect(opListAnnotEnable.argsArray.length).toBeGreaterThan(140);
       expect(opListAnnotEnable.lastChunk).toEqual(true);
+      expect(opListAnnotEnable.separateAnnots).toEqual({
+        form: false,
+        canvas: true,
+      });
 
       let firstAnnotIndex = opListAnnotEnable.fnArray.indexOf(
         OPS.beginAnnotation
@@ -2518,6 +2537,10 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       expect(opListAnnotEnableForms.fnArray.length).toBeGreaterThan(30);
       expect(opListAnnotEnableForms.argsArray.length).toBeGreaterThan(30);
       expect(opListAnnotEnableForms.lastChunk).toEqual(true);
+      expect(opListAnnotEnableForms.separateAnnots).toEqual({
+        form: true,
+        canvas: true,
+      });
 
       firstAnnotIndex = opListAnnotEnableForms.fnArray.indexOf(
         OPS.beginAnnotation
@@ -2531,6 +2554,10 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       expect(opListAnnotEnableStorage.fnArray.length).toBeGreaterThan(170);
       expect(opListAnnotEnableStorage.argsArray.length).toBeGreaterThan(170);
       expect(opListAnnotEnableStorage.lastChunk).toEqual(true);
+      expect(opListAnnotEnableStorage.separateAnnots).toEqual({
+        form: false,
+        canvas: true,
+      });
 
       firstAnnotIndex = opListAnnotEnableStorage.fnArray.indexOf(
         OPS.beginAnnotation
@@ -2635,8 +2662,9 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       expect(renderTask instanceof RenderTask).toEqual(true);
 
       await renderTask.promise;
-      const stats = pdfPage.stats;
+      expect(renderTask.separateAnnots).toEqual(false);
 
+      const { stats } = pdfPage;
       expect(stats instanceof StatTimer).toEqual(true);
       expect(stats.times.length).toEqual(3);
 
@@ -2719,6 +2747,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       expect(reRenderTask instanceof RenderTask).toEqual(true);
 
       await reRenderTask.promise;
+      expect(reRenderTask.separateAnnots).toEqual(false);
 
       CanvasFactory.destroy(canvasAndCtx);
     });
@@ -2785,8 +2814,9 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       expect(renderTask instanceof RenderTask).toEqual(true);
 
       await renderTask.promise;
-      await pdfDoc.cleanup();
+      expect(renderTask.separateAnnots).toEqual(false);
 
+      await pdfDoc.cleanup();
       expect(true).toEqual(true);
 
       CanvasFactory.destroy(canvasAndCtx);
@@ -2831,6 +2861,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         );
       }
       await renderTask.promise;
+      expect(renderTask.separateAnnots).toEqual(false);
 
       CanvasFactory.destroy(canvasAndCtx);
       await loadingTask.destroy();
@@ -2918,6 +2949,8 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         });
 
         await renderTask.promise;
+        expect(renderTask.separateAnnots).toEqual(false);
+
         const printData = canvasAndCtx.canvas.toDataURL();
         CanvasFactory.destroy(canvasAndCtx);
 
@@ -3002,6 +3035,8 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         viewport,
       });
       await renderTask.promise;
+      expect(renderTask.separateAnnots).toEqual(false);
+
       const data = canvasAndCtx.canvas.toDataURL();
       CanvasFactory.destroy(canvasAndCtx);
       return data;

web/pdf_page_view.js

@@ -99,7 +99,10 @@ const MAX_CANVAS_PIXELS = compatibilityParams.maxCanvasPixels || 16777216;
 class PDFPageView {
   #annotationMode = AnnotationMode.ENABLE_FORMS;
 
-  #useThumbnailCanvas = true;
+  #useThumbnailCanvas = {
+    initialOptionalContent: true,
+    regularAnnotations: true,
+  };
 
   /**
    * @param {PDFPageViewOptions} options
@@ -190,14 +193,15 @@ class PDFPageView {
       const { optionalContentConfigPromise } = options;
       if (optionalContentConfigPromise) {
         // Ensure that the thumbnails always display the *initial* document
-        // state.
+        // state, for documents with optional content.
         optionalContentConfigPromise.then(optionalContentConfig => {
           if (
             optionalContentConfigPromise !== this._optionalContentConfigPromise
           ) {
             return;
           }
-          this.#useThumbnailCanvas = optionalContentConfig.hasInitialVisibility;
+          this.#useThumbnailCanvas.initialOptionalContent =
+            optionalContentConfig.hasInitialVisibility;
         });
       }
     }
@@ -408,14 +412,16 @@ class PDFPageView {
     if (optionalContentConfigPromise instanceof Promise) {
       this._optionalContentConfigPromise = optionalContentConfigPromise;
 
-      // Ensure that the thumbnails always display the *initial* document state.
+      // Ensure that the thumbnails always display the *initial* document state,
+      // for documents with optional content.
       optionalContentConfigPromise.then(optionalContentConfig => {
         if (
           optionalContentConfigPromise !== this._optionalContentConfigPromise
         ) {
           return;
         }
-        this.#useThumbnailCanvas = optionalContentConfig.hasInitialVisibility;
+        this.#useThumbnailCanvas.initialOptionalContent =
+          optionalContentConfig.hasInitialVisibility;
       });
     }
 
@@ -772,6 +778,10 @@ class PDFPageView {
       }
       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.eventBus.dispatch("pagerendered", {
         source: this,
         pageNumber: this.id,
@@ -888,6 +898,9 @@ class PDFPageView {
       cancel() {
         renderTask.cancel();
       },
+      get separateAnnots() {
+        return renderTask.separateAnnots;
+      },
     };
 
     const viewport = this.viewport;
@@ -1029,6 +1042,9 @@ class PDFPageView {
       cancel() {
         cancelled = true;
       },
+      get separateAnnots() {
+        return false;
+      },
     };
   }
 
@@ -1050,7 +1066,9 @@ class PDFPageView {
    * @ignore
    */
   get thumbnailCanvas() {
-    return this.#useThumbnailCanvas ? this.canvas : null;
+    const { initialOptionalContent, regularAnnotations } =
+      this.#useThumbnailCanvas;
+    return initialOptionalContent && regularAnnotations ? this.canvas : null;
   }
 }