[Annotation] Use the clip-path property when an annotation has some quad points

This way it'll avoid to split a div in multiple divs having the same id (which
is supposed to be unique).

Author: calixteman

src/display/annotation_layer.js

@@ -22,7 +22,6 @@ import {
   AnnotationBorderStyleType,
   AnnotationEditorType,
   AnnotationType,
-  assert,
   FeatureTest,
   LINE_FACTOR,
   shadow,
@@ -182,7 +181,7 @@ class AnnotationElement {
       this.container = this._createContainer(ignoreBorder);
     }
     if (createQuadrilaterals) {
-      this.quadrilaterals = this._createQuadrilaterals(ignoreBorder);
+      this._createQuadrilaterals();
     }
   }
 
@@ -417,26 +416,41 @@ class AnnotationElement {
    * @private
    * @param {boolean} ignoreBorder
    * @memberof AnnotationElement
-   * @returns {Array<HTMLElement>} An array of section elements.
    */
-  _createQuadrilaterals(ignoreBorder = false) {
-    if (!this.data.quadPoints) {
-      return null;
+  _createQuadrilaterals() {
+    const { quadPoints } = this.data;
+    if (!quadPoints || quadPoints.length === 1) {
+      return;
     }
 
-    const quadrilaterals = [];
-    const savedRect = this.data.rect;
-    for (const quadPoint of this.data.quadPoints) {
-      this.data.rect = [
-        quadPoint[2].x,
-        quadPoint[2].y,
-        quadPoint[1].x,
-        quadPoint[1].y,
-      ];
-      quadrilaterals.push(this._createContainer(ignoreBorder));
+    const { svgFactory } = this;
+    const svg = svgFactory.createElement("svg");
+    svg.classList.add("quadrilateralsContainer");
+
+    svg.setAttribute("width", 0);
+    svg.setAttribute("height", 0);
+    const defs = svgFactory.createElement("defs");
+    svg.append(defs);
+    const clipPath = svgFactory.createElement("clipPath");
+    const id = `clippath_${this.data.id}`;
+    clipPath.setAttribute("id", id);
+    clipPath.setAttribute("clipPathUnits", "objectBoundingBox");
+    defs.append(clipPath);
+
+    const [rectBlX, rectBlY, rectTrX, rectTrY] = this.data.rect;
+    const width = rectTrX - rectBlX;
+    const height = rectTrY - rectBlY;
+    for (const [, { x: trX, y: trY }, { x: blX, y: blY }] of quadPoints) {
+      const rect = svgFactory.createElement("rect");
+      rect.setAttribute("x", (blX - rectBlX) / width);
+      rect.setAttribute("y", (rectTrY - trY) / height);
+      rect.setAttribute("width", (trX - blX) / width);
+      rect.setAttribute("height", (trY - blY) / height);
+      clipPath.append(rect);
     }
-    this.data.rect = savedRect;
-    return quadrilaterals;
+
+    this.container.append(svg);
+    this.container.style.clipPath = `url(#${id})`;
   }
 
   /**
@@ -450,18 +464,8 @@ class AnnotationElement {
    * @memberof AnnotationElement
    */
   _createPopup(trigger, data) {
-    let container = this.container;
-    if (this.quadrilaterals) {
-      trigger ||= this.quadrilaterals;
-      container = this.quadrilaterals[0];
-    }
-
-    // If no trigger element is specified, create it.
-    if (!trigger) {
-      trigger = document.createElement("div");
-      trigger.classList.add("popupTriggerArea");
-      container.append(trigger);
-    }
+    const container = this.container;
+    trigger ||= this.container;
 
     const popupElement = new PopupElement({
       container,
@@ -481,25 +485,6 @@ class AnnotationElement {
     container.append(popup);
   }
 
-  /**
-   * Render the quadrilaterals of the annotation.
-   *
-   * @private
-   * @param {string} className
-   * @memberof AnnotationElement
-   * @returns {Array<HTMLElement>} An array of section elements.
-   */
-  _renderQuadrilaterals(className) {
-    if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) {
-      assert(this.quadrilaterals, "Missing quadrilaterals during rendering");
-    }
-
-    for (const quadrilateral of this.quadrilaterals) {
-      quadrilateral.classList.add(className);
-    }
-    return this.quadrilaterals;
-  }
-
   /**
    * Render the annotation's HTML element(s).
    *
@@ -626,16 +611,6 @@ class LinkAnnotationElement extends AnnotationElement {
       }
     }
 
-    if (this.quadrilaterals) {
-      return this._renderQuadrilaterals("linkAnnotation").map(
-        (quadrilateral, index) => {
-          const linkElement = index === 0 ? link : link.cloneNode();
-          quadrilateral.append(linkElement);
-          return quadrilateral;
-        }
-      );
-    }
-
     this.container.classList.add("linkAnnotation");
     if (isBound) {
       this.container.append(link);
@@ -2411,10 +2386,6 @@ class HighlightAnnotationElement extends AnnotationElement {
       this._createPopup(null, this.data);
     }
 
-    if (this.quadrilaterals) {
-      return this._renderQuadrilaterals("highlightAnnotation");
-    }
-
     this.container.classList.add("highlightAnnotation");
     return this.container;
   }
@@ -2440,10 +2411,6 @@ class UnderlineAnnotationElement extends AnnotationElement {
       this._createPopup(null, this.data);
     }
 
-    if (this.quadrilaterals) {
-      return this._renderQuadrilaterals("underlineAnnotation");
-    }
-
     this.container.classList.add("underlineAnnotation");
     return this.container;
   }
@@ -2469,10 +2436,6 @@ class SquigglyAnnotationElement extends AnnotationElement {
       this._createPopup(null, this.data);
     }
 
-    if (this.quadrilaterals) {
-      return this._renderQuadrilaterals("squigglyAnnotation");
-    }
-
     this.container.classList.add("squigglyAnnotation");
     return this.container;
   }
@@ -2498,10 +2461,6 @@ class StrikeOutAnnotationElement extends AnnotationElement {
       this._createPopup(null, this.data);
     }
 
-    if (this.quadrilaterals) {
-      return this._renderQuadrilaterals("strikeoutAnnotation");
-    }
-
     this.container.classList.add("strikeoutAnnotation");
     return this.container;
   }

web/annotation_layer_builder.css

@@ -239,12 +239,9 @@
   appearance: none;
 }
 
-.annotationLayer .popupTriggerArea {
+.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
   height: 100%;
   width: 100%;
-}
-
-.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
   position: absolute;
 }
 
@@ -335,3 +332,13 @@
   width: 100%;
   display: inline-block;
 }
+
+.annotationLayer svg.quadrilateralsContainer {
+  contain: strict;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}