[api-minor] Make the AnnotationLayer an object in order to use it in the AnnotationEditorLayer

It'll be useful to make the Freetext and Ink annotations editable.

src/display/annotation_layer.js

@@ -2597,13 +2597,25 @@ class FileAttachmentAnnotationElement extends AnnotationElement {
  */
 
 class AnnotationLayer {
-  static #appendElement(element, id, div, accessibilityManager) {
+  #accessibilityManager = null;
+
+  #annotationCanvasMap = null;
+
+  #div = null;
+
+  constructor({ div, accessibilityManager, annotationCanvasMap }) {
+    this.#div = div;
+    this.#accessibilityManager = accessibilityManager;
+    this.#annotationCanvasMap = annotationCanvasMap;
+  }
+
+  #appendElement(element, id) {
     const contentElement = element.firstChild || element;
     contentElement.id = `${AnnotationPrefix}${id}`;
 
-    div.append(element);
+    this.#div.append(element);
-    accessibilityManager?.moveElementInDOM(
+    this.#accessibilityManager?.moveElementInDOM(
-      div,
+      this.#div,
       element,
       contentElement,
       /* isRemovable = */ false
@@ -2616,13 +2628,14 @@ class AnnotationLayer {
    * @param {AnnotationLayerParameters} params
    * @memberof AnnotationLayer
    */
-  static render(params) {
+  render(params) {
-    const { annotations, div, viewport, accessibilityManager } = params;
+    const { annotations, viewport } = params;
-    setLayerDimensions(div, viewport);
+    const layer = this.#div;
+    setLayerDimensions(layer, viewport);
 
     const elementParams = {
       data: null,
-      layer: div,
+      layer,
       page: params.page,
       viewport,
       linkService: params.linkService,
@@ -2660,12 +2673,7 @@ class AnnotationLayer {
       if (Array.isArray(rendered)) {
         for (const renderedElement of rendered) {
           renderedElement.style.zIndex = zIndex++;
-          AnnotationLayer.#appendElement(
+          this.#appendElement(renderedElement, data.id);
-            renderedElement,
-            data.id,
-            div,
-            accessibilityManager
-          );
         }
       } else {
         // The accessibility manager will move the annotation in the DOM in
@@ -2678,41 +2686,37 @@ class AnnotationLayer {
         if (element instanceof PopupAnnotationElement) {
           // Popup annotation elements should not be on top of other
           // annotation elements to prevent interfering with mouse events.
-          div.prepend(rendered);
+          layer.prepend(rendered);
         } else {
-          AnnotationLayer.#appendElement(
+          this.#appendElement(rendered, data.id);
-            rendered,
-            data.id,
-            div,
-            accessibilityManager
-          );
         }
       }
     }
 
-    this.#setAnnotationCanvasMap(div, params.annotationCanvasMap);
+    this.#setAnnotationCanvasMap();
   }
 
   /**
    * Update the annotation elements on existing annotation layer.
    *
-   * @param {AnnotationLayerParameters} params
+   * @param {AnnotationLayerParameters} viewport
    * @memberof AnnotationLayer
    */
-  static update(params) {
+  update({ viewport }) {
-    const { annotationCanvasMap, div, viewport } = params;
+    const layer = this.#div;
-    setLayerDimensions(div, { rotation: viewport.rotation });
+    setLayerDimensions(layer, { rotation: viewport.rotation });
 
-    this.#setAnnotationCanvasMap(div, annotationCanvasMap);
+    this.#setAnnotationCanvasMap();
-    div.hidden = false;
+    layer.hidden = false;
   }
 
-  static #setAnnotationCanvasMap(div, annotationCanvasMap) {
+  #setAnnotationCanvasMap() {
-    if (!annotationCanvasMap) {
+    if (!this.#annotationCanvasMap) {
       return;
     }
-    for (const [id, canvas] of annotationCanvasMap) {
+    const layer = this.#div;
-      const element = div.querySelector(`[data-annotation-id="${id}"]`);
+    for (const [id, canvas] of this.#annotationCanvasMap) {
+      const element = layer.querySelector(`[data-annotation-id="${id}"]`);
       if (!element) {
         continue;
       }
@@ -2726,7 +2730,7 @@ class AnnotationLayer {
         firstChild.before(canvas);
       }
     }
-    annotationCanvasMap.clear();
+    this.#annotationCanvasMap.clear();
   }
 }
 

test/driver.js

@@ -224,15 +224,17 @@ class Rasterize {
       // Rendering annotation layer as HTML.
       const parameters = {
         viewport: annotationViewport,
-        div,
         annotations,
         page,
         linkService: new SimpleLinkService(),
         imageResourcesPath,
         renderForms,
-        annotationCanvasMap: annotationImageMap,
       };
-      AnnotationLayer.render(parameters);
+      const annotationLayer = new AnnotationLayer({
+        div,
+        annotationCanvasMap: annotationImageMap,
+      });
+      annotationLayer.render(parameters);
       await l10n.translate(div);
 
       // Inline SVG images from text annotations.

web/annotation_layer_builder.js

@@ -46,8 +46,6 @@ import { PresentationModeState } from "./ui_utils.js";
  */
 
 class AnnotationLayerBuilder {
-  #numAnnotations = 0;
-
   #onPresentationModeChanged = null;
 
   /**
@@ -82,6 +80,7 @@ class AnnotationLayerBuilder {
     this._annotationCanvasMap = annotationCanvasMap;
     this._accessibilityManager = accessibilityManager;
 
+    this.annotationLayer = null;
     this.div = null;
     this._cancelled = false;
     this._eventBus = linkService.eventBus;
@@ -95,15 +94,13 @@ class AnnotationLayerBuilder {
    */
   async render(viewport, intent = "display") {
     if (this.div) {
-      if (this._cancelled || this.#numAnnotations === 0) {
+      if (this._cancelled || !this.annotationLayer) {
         return;
       }
       // If an annotationLayer already exists, refresh its children's
       // transformation matrices.
-      AnnotationLayer.update({
+      this.annotationLayer.update({
         viewport: viewport.clone({ dontFlip: true }),
-        div: this.div,
-        annotationCanvasMap: this._annotationCanvasMap,
       });
       return;
     }
@@ -116,21 +113,26 @@ class AnnotationLayerBuilder {
     if (this._cancelled) {
       return;
     }
-    this.#numAnnotations = annotations.length;
 
     // Create an annotation layer div and render the annotations
     // if there is at least one annotation.
-    this.div = document.createElement("div");
+    const div = (this.div = document.createElement("div"));
-    this.div.className = "annotationLayer";
+    div.className = "annotationLayer";
-    this.pageDiv.append(this.div);
+    this.pageDiv.append(div);
 
-    if (this.#numAnnotations === 0) {
+    if (annotations.length === 0) {
       this.hide();
       return;
     }
-    AnnotationLayer.render({
+
+    this.annotationLayer = new AnnotationLayer({
+      div,
+      accessibilityManager: this._accessibilityManager,
+      annotationCanvasMap: this._annotationCanvasMap,
+    });
+
+    this.annotationLayer.render({
       viewport: viewport.clone({ dontFlip: true }),
-      div: this.div,
       annotations,
       page: this.pdfPage,
       imageResourcesPath: this.imageResourcesPath,
@@ -141,10 +143,8 @@ class AnnotationLayerBuilder {
       enableScripting: this.enableScripting,
       hasJSActions,
       fieldObjects,
-      annotationCanvasMap: this._annotationCanvasMap,
-      accessibilityManager: this._accessibilityManager,
     });
-    this.l10n.translate(this.div);
+    this.l10n.translate(div);
 
     // Ensure that interactive form elements in the annotationLayer are
     // disabled while PresentationMode is active (see issue 12232).