XFA - Add a layer to display XFA forms (#13069)

- add an option to enable XFA rendering if any;
  - for now, let the canvas layer: it could be useful to implement XFAF forms (embedded pdf in xml stream for the background and xfa form for the foreground);
  - ui elements in template DOM are pretty close to their html counterpart so we generate a fake html DOM from template one:
    - it makes easier to translate template properties to html ones;
    - it makes faster the creation of the html element in the main thread.

web/pdf_page_view.js

@@ -48,6 +48,7 @@ import { viewerCompatibilityParams } from "./viewer_compatibility.js";
  *   behaviour is enabled. The constants from {TextLayerMode} should be used.
  *   The default value is `TextLayerMode.ENABLE`.
  * @property {IPDFAnnotationLayerFactory} annotationLayerFactory
+ * @property {IPDFXfaLayerFactory} xfaLayerFactory
  * @property {string} [imageResourcesPath] - Path for image resources, mainly
  *   for annotation icons. Include trailing slash.
  * @property {boolean} renderInteractiveForms - Turns on rendering of
@@ -102,6 +103,7 @@ class PDFPageView {
     this.renderingQueue = options.renderingQueue;
     this.textLayerFactory = options.textLayerFactory;
     this.annotationLayerFactory = options.annotationLayerFactory;
+    this.xfaLayerFactory = options.xfaLayerFactory;
     this.renderer = options.renderer || RendererType.CANVAS;
     this.enableWebGL = options.enableWebGL || false;
     this.l10n = options.l10n || NullL10n;
@@ -116,6 +118,7 @@ class PDFPageView {
     this.annotationLayer = null;
     this.textLayer = null;
     this.zoomLayer = null;
+    this.xfaLayer = null;
 
     const div = document.createElement("div");
     div.className = "page";
@@ -164,6 +167,24 @@ class PDFPageView {
     }
   }
 
+  /**
+   * @private
+   */
+  async _renderXfaLayer() {
+    let error = null;
+    try {
+      await this.xfaLayer.render(this.viewport, "display");
+    } catch (ex) {
+      error = ex;
+    } finally {
+      this.eventBus.dispatch("xfalayerrendered", {
+        source: this,
+        pageNumber: this.id,
+        error,
+      });
+    }
+  }
+
   /**
    * @private
    */
@@ -197,9 +218,14 @@ class PDFPageView {
     const currentZoomLayerNode = (keepZoomLayer && this.zoomLayer) || null;
     const currentAnnotationNode =
       (keepAnnotations && this.annotationLayer?.div) || null;
+    const currentXfaLayerNode = this.xfaLayer?.div || null;
     for (let i = childNodes.length - 1; i >= 0; i--) {
       const node = childNodes[i];
-      if (currentZoomLayerNode === node || currentAnnotationNode === node) {
+      if (
+        currentZoomLayerNode === node ||
+        currentAnnotationNode === node ||
+        currentXfaLayerNode === node
+      ) {
         continue;
       }
       div.removeChild(node);
@@ -393,6 +419,10 @@ class PDFPageView {
     if (redrawAnnotations && this.annotationLayer) {
       this._renderAnnotationLayer();
     }
+
+    if (this.xfaLayer) {
+      this._renderXfaLayer();
+    }
   }
 
   get width() {
@@ -553,6 +583,17 @@ class PDFPageView {
       }
       this._renderAnnotationLayer();
     }
+
+    if (this.xfaLayerFactory) {
+      if (!this.xfaLayer) {
+        this.xfaLayer = this.xfaLayerFactory.createXfaLayerBuilder(
+          div,
+          pdfPage
+        );
+      }
+      this._renderXfaLayer();
+    }
+
     div.setAttribute("data-loaded", true);
 
     this.eventBus.dispatch("pagerender", {