Store ops bboxes in a linear Uint8Array

This PR changes the way we store bounding boxes so that they use less
memory and can be more easily shared across threads in the future.

Instead of storing the bounding box and list of dependencies for each
operation that renders _something_, we now only store the bounding box
of _every_ operation and no dependencies list. The bounding box of
each operation covers the bounding box of all the operations affected
by it that render something. For example, the bounding box of a
`setFont` operation will be the bounding box of all the `showText`
operations that use that font.

This affects the debugging experience in pdfBug, since now the bounding
box of an operation may be larger than what it renders itself. To help
with this, now when hovering on an operation we also highlight (in red)
all its dependents. We highlight with white stripes operations that do
not affect any part of the page (i.e. with an empty bbox).

To save memory, we now save bounding box x/y coordinates as uint8
rather than float64. This effectively gives us a 256x256 uniform grid
that covers the page, which is high enough resolution for the usecase.

Author: nicolo-ribaudo

src/display/api.js

@@ -1242,8 +1242,8 @@ class PDFDocumentProxy {
  * @property {boolean} [isEditing] - Render the page in editing mode.
  * @property {boolean} [recordOperations] - Record the dependencies and bounding
  *   boxes of all PDF operations that render onto the canvas.
- * @property {Set<number>} [filteredOperationIndexes] - If provided, only run
- *   the PDF operations that are included in this set.
+ * @property {(index: number) => boolean} [operationsFilter] - If provided, only
+ *   run for which this function returns `true`.
  */
 
 /**
@@ -1314,7 +1314,7 @@ class PDFPageProxy {
 
     this._intentStates = new Map();
     this.destroyed = false;
-    this.recordedGroups = null;
+    this.recordedBBoxes = null;
   }
 
   /**
@@ -1440,7 +1440,7 @@ class PDFPageProxy {
     printAnnotationStorage = null,
     isEditing = false,
     recordOperations = false,
-    filteredOperationIndexes = null,
+    operationsFilter = null,
   }) {
     this._stats?.time("Overall");
 
@@ -1487,23 +1487,28 @@ class PDFPageProxy {
       this._pumpOperatorList(intentArgs);
     }
 
+    const recordForDebugger = Boolean(
+      this._pdfBug && globalThis.StepperManager?.enabled
+    );
+
     const shouldRecordOperations =
-      !this.recordedGroups &&
-      (recordOperations ||
-        (this._pdfBug && globalThis.StepperManager?.enabled));
+      !this.recordedBBoxes && (recordOperations || recordForDebugger);
 
     const complete = error => {
       intentState.renderTasks.delete(internalRenderTask);
 
       if (shouldRecordOperations) {
-        const recordedGroups = internalRenderTask.gfx?.dependencyTracker.take();
-        if (recordedGroups) {
-          internalRenderTask.stepper?.setOperatorGroups(recordedGroups);
+        const recordedBBoxes = internalRenderTask.gfx?.dependencyTracker.take();
+        if (recordedBBoxes) {
+          if (internalRenderTask.stepper) {
+            internalRenderTask.stepper.setOperatorBBoxes(
+              recordedBBoxes,
+              internalRenderTask.gfx.dependencyTracker.takeDebugMetadata()
+            );
+          }
           if (recordOperations) {
-            this.recordedGroups = recordedGroups;
+            this.recordedBBoxes = recordedBBoxes;
           }
-        } else if (recordOperations) {
-          this.recordedGroups = [];
         }
       }
 
@@ -1542,7 +1547,11 @@ class PDFPageProxy {
         canvas,
         canvasContext,
         dependencyTracker: shouldRecordOperations
-          ? new CanvasDependencyTracker(canvas)
+          ? new CanvasDependencyTracker(
+              canvas,
+              intentState.operatorList.length,
+              recordForDebugger
+            )
           : null,
         viewport,
         transform,
@@ -1559,7 +1568,7 @@ class PDFPageProxy {
       pdfBug: this._pdfBug,
       pageColors,
       enableHWA: this._transport.enableHWA,
-      filteredOperationIndexes,
+      operationsFilter,
     });
 
     (intentState.renderTasks ||= new Set()).add(internalRenderTask);
@@ -3169,7 +3178,7 @@ class InternalRenderTask {
     pdfBug = false,
     pageColors = null,
     enableHWA = false,
-    filteredOperationIndexes = null,
+    operationsFilter = null,
   }) {
     this.callback = callback;
     this.params = params;
@@ -3201,7 +3210,7 @@ class InternalRenderTask {
     this._canvasContext = params.canvas ? null : params.canvasContext;
     this._enableHWA = enableHWA;
     this._dependencyTracker = params.dependencyTracker;
-    this._filteredOperationIndexes = filteredOperationIndexes;
+    this._operationsFilter = operationsFilter;
   }
 
   get completed() {
@@ -3288,6 +3297,9 @@ class InternalRenderTask {
       this.graphicsReadyCallback ||= this._continueBound;
       return;
     }
+    this.gfx.dependencyTracker?.growOperationsCount(
+      this.operatorList.fnArray.length
+    );
     this.stepper?.updateOperatorList(this.operatorList);
 
     if (this.running) {
@@ -3328,7 +3340,7 @@ class InternalRenderTask {
       this.operatorListIdx,
       this._continueBound,
       this.stepper,
-      this._filteredOperationIndexes
+      this._operationsFilter
     );
     if (this.operatorListIdx === this.operatorList.argsArray.length) {
       this.running = false;

src/display/canvas.js

@@ -763,7 +763,7 @@ class CanvasGraphics {
     executionStartIdx,
     continueCallback,
     stepper,
-    filteredOperationIndexes
+    operationsFilter
   ) {
     const argsArray = operatorList.argsArray;
     const fnArray = operatorList.fnArray;
@@ -791,7 +791,7 @@ class CanvasGraphics {
         return i;
       }
 
-      if (!filteredOperationIndexes || filteredOperationIndexes.has(i)) {
+      if (!operationsFilter || operationsFilter(i)) {
         fnId = fnArray[i];
         // TODO: There is a `undefined` coming from somewhere.
         fnArgs = argsArray[i] ?? null;
@@ -1100,7 +1100,7 @@ class CanvasGraphics {
       -offsetY,
     ]);
     fillCtx.fillStyle = isPatternFill
-      ? fillColor.getPattern(ctx, this, inverse, PathType.FILL)
+      ? fillColor.getPattern(ctx, this, inverse, PathType.FILL, opIdx)
       : fillColor;
 
     fillCtx.fillRect(0, 0, width, height);
@@ -1549,7 +1549,8 @@ class CanvasGraphics {
           ctx,
           this,
           getCurrentTransformInverse(ctx),
-          PathType.STROKE
+          PathType.STROKE,
+          opIdx
         );
         if (baseTransform) {
           const newPath = new Path2D();
@@ -1603,7 +1604,8 @@ class CanvasGraphics {
         ctx,
         this,
         getCurrentTransformInverse(ctx),
-        PathType.FILL
+        PathType.FILL,
+        opIdx
       );
       if (baseTransform) {
         const newPath = new Path2D();
@@ -1759,7 +1761,7 @@ class CanvasGraphics {
   setFont(opIdx, fontRefName, size) {
     this.dependencyTracker
       ?.recordSimpleData("font", opIdx)
-      .recordNamedDependency(opIdx, fontRefName);
+      .recordSimpleDataFromNamed("fontObj", fontRefName, opIdx);
     const fontObj = this.commonObjs.get(fontRefName);
     const current = this.current;
 
@@ -2034,7 +2036,6 @@ class CanvasGraphics {
     if (this.dependencyTracker) {
       this.dependencyTracker
         .recordDependencies(opIdx, Dependencies.showText)
-        .copyDependenciesFromIncrementalOperation(opIdx, "sameLineText")
         .resetBBox(opIdx);
       if (this.current.textRenderingMode & TextRenderingMode.ADD_TO_PATH_FLAG) {
         this.dependencyTracker
@@ -2047,9 +2048,7 @@ class CanvasGraphics {
     const font = current.font;
     if (font.isType3Font) {
       this.showType3Text(opIdx, glyphs);
-      this.dependencyTracker
-        ?.recordOperation(opIdx)
-        .recordIncrementalData("sameLineText", opIdx);
+      this.dependencyTracker?.recordShowTextOperation(opIdx);
       return undefined;
     }
 
@@ -2095,7 +2094,8 @@ class CanvasGraphics {
         ctx,
         this,
         getCurrentTransformInverse(ctx),
-        PathType.FILL
+        PathType.FILL,
+        opIdx
       );
       patternFillTransform = getCurrentTransform(ctx);
       ctx.restore();
@@ -2108,7 +2108,8 @@ class CanvasGraphics {
         ctx,
         this,
         getCurrentTransformInverse(ctx),
-        PathType.STROKE
+        PathType.STROKE,
+        opIdx
       );
       patternStrokeTransform = getCurrentTransform(ctx);
       ctx.restore();
@@ -2157,8 +2158,7 @@ class CanvasGraphics {
             -measure.actualBoundingBoxAscent,
             measure.actualBoundingBoxDescent
           )
-          .recordOperation(opIdx)
-          .recordIncrementalData("sameLineText", opIdx);
+          .recordShowTextOperation(opIdx);
       }
       current.x += width * widthAdvanceScale * textHScale;
       ctx.restore();
@@ -2277,9 +2277,7 @@ class CanvasGraphics {
     ctx.restore();
     this.compose();
 
-    this.dependencyTracker
-      ?.recordOperation(opIdx)
-      .recordIncrementalData("sameLineText", opIdx);
+    this.dependencyTracker?.recordShowTextOperation(opIdx);
     return undefined;
   }
 
@@ -2351,7 +2349,6 @@ class CanvasGraphics {
     }
     ctx.restore();
     if (dependencyTracker) {
-      this.dependencyTracker.recordNestedDependencies();
       this.dependencyTracker = dependencyTracker;
     }
   }
@@ -2378,7 +2375,7 @@ class CanvasGraphics {
     if (IR[0] === "TilingPattern") {
       const baseTransform = this.baseTransform || getCurrentTransform(this.ctx);
       const canvasGraphicsFactory = {
-        createCanvasGraphics: ctx =>
+        createCanvasGraphics: (ctx, renderingOpIdx) =>
           new CanvasGraphics(
             ctx,
             this.commonObjs,
@@ -2392,7 +2389,11 @@ class CanvasGraphics {
             undefined,
             undefined,
             this.dependencyTracker
-              ? new CanvasNestedDependencyTracker(this.dependencyTracker, opIdx)
+              ? new CanvasNestedDependencyTracker(
+                  this.dependencyTracker,
+                  renderingOpIdx,
+                  /* ignoreBBoxes */ true
+                )
               : null
           ),
       };
@@ -2470,7 +2471,8 @@ class CanvasGraphics {
       ctx,
       this,
       getCurrentTransformInverse(ctx),
-      PathType.SHADING
+      PathType.SHADING,
+      opIdx
     );
 
     const inv = getCurrentTransformInverse(ctx);
@@ -2937,7 +2939,8 @@ class CanvasGraphics {
             maskCtx,
             this,
             getCurrentTransformInverse(ctx),
-            PathType.FILL
+            PathType.FILL,
+            opIdx
           )
         : fillColor;
       maskCtx.fillRect(0, 0, width, height);