Merge pull request #16552 from calixteman/simplify_popup

[api-minor] Make the popup independent of their associated annotations

src/core/annotation.js

@@ -1318,6 +1318,7 @@ class MarkupAnnotation extends Annotation {
       this.data.replyType =
         rt instanceof Name ? rt.name : AnnotationReplyType.REPLY;
     }
+    let popupRef = null;
 
     if (this.data.replyType === AnnotationReplyType.GROUP) {
       // Subordinate annotations in a group should inherit
@@ -1344,7 +1345,7 @@ class MarkupAnnotation extends Annotation {
         this.data.modificationDate = this.modificationDate;
       }
 
-      this.data.hasPopup = parent.has("Popup");
+      popupRef = parent.getRaw("Popup");
 
       if (!parent.has("C")) {
         // Fall back to the default background color.
@@ -1359,7 +1360,7 @@ class MarkupAnnotation extends Annotation {
       this.setCreationDate(dict.get("CreationDate"));
       this.data.creationDate = this.creationDate;
 
-      this.data.hasPopup = dict.has("Popup");
+      popupRef = dict.getRaw("Popup");
 
       if (!dict.has("C")) {
         // Fall back to the default background color.
@@ -1367,6 +1368,8 @@ class MarkupAnnotation extends Annotation {
       }
     }
 
+    this.data.popupRef = popupRef instanceof Ref ? popupRef.toString() : null;
+
     if (dict.has("RC")) {
       this.data.richText = XFAFactory.getRichTextAsHtml(dict.get("RC"));
     }
@@ -3496,6 +3499,12 @@ class PopupAnnotation extends Annotation {
 
     const { dict } = params;
     this.data.annotationType = AnnotationType.POPUP;
+    if (
+      this.data.rect[0] === this.data.rect[2] ||
+      this.data.rect[1] === this.data.rect[3]
+    ) {
+      this.data.rect = null;
+    }
 
     let parentItem = dict.get("Parent");
     if (!parentItem) {
@@ -3503,17 +3512,11 @@ class PopupAnnotation extends Annotation {
       return;
     }
 
-    const parentSubtype = parentItem.get("Subtype");
-    this.data.parentType =
-      parentSubtype instanceof Name ? parentSubtype.name : null;
-    const rawParent = dict.getRaw("Parent");
-    this.data.parentId = rawParent instanceof Ref ? rawParent.toString() : null;
-
     const parentRect = parentItem.getArray("Rect");
     if (Array.isArray(parentRect) && parentRect.length === 4) {
       this.data.parentRect = Util.normalizeRect(parentRect);
     } else {
-      this.data.parentRect = [0, 0, 0, 0];
+      this.data.parentRect = null;
     }
 
     const rt = parentItem.get("RT");
@@ -3557,6 +3560,8 @@ class PopupAnnotation extends Annotation {
     if (parentItem.has("RC")) {
       this.data.richText = XFAFactory.getRichTextAsHtml(parentItem.get("RC"));
     }
+
+    this.data.open = !!dict.get("Open");
   }
 }
 
@@ -4220,7 +4225,7 @@ class HighlightAnnotation extends MarkupAnnotation {
         });
       }
     } else {
-      this.data.hasPopup = false;
+      this.data.popupRef = null;
     }
   }
 }
@@ -4258,7 +4263,7 @@ class UnderlineAnnotation extends MarkupAnnotation {
         });
       }
     } else {
-      this.data.hasPopup = false;
+      this.data.popupRef = null;
     }
   }
 }
@@ -4302,7 +4307,7 @@ class SquigglyAnnotation extends MarkupAnnotation {
         });
       }
     } else {
-      this.data.hasPopup = false;
+      this.data.popupRef = null;
     }
   }
 }
@@ -4341,7 +4346,7 @@ class StrikeOutAnnotation extends MarkupAnnotation {
         });
       }
     } else {
-      this.data.hasPopup = false;
+      this.data.popupRef = null;
     }
   }
 }

src/display/editor/freetext.js

@@ -537,7 +537,9 @@ class FreeTextEditor extends AnnotationEditor {
           id,
         },
         textContent,
-        page: { pageNumber },
+        parent: {
+          page: { pageNumber },
+        },
       } = data;
       if (!textContent || textContent.length === 0) {
         // Empty annotation.

test/annotation_layer_builder_overrides.css

@@ -30,14 +30,18 @@
 }
 
 .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a,
-.annotationLayer .popupTriggerArea {
+.annotationLayer .popupTriggerArea::after,
+.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
   opacity: 0.2;
   background: rgba(255, 255, 0, 1);
   box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
 }
 
-.annotationLayer :is(.popupAnnotation, .popupWrapper) {
+.annotationLayer .popupTriggerArea::after {
   display: block;
+  width: 100%;
+  height: 100%;
+  content: "";
 }
 
 .annotationLayer .popup :is(h1, p) {

test/driver.js

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

test/integration/annotation_spec.js

@@ -21,7 +21,7 @@ const {
 } = require("./test_utils.js");
 
 describe("Annotation highlight", () => {
-  describe("annotation-highlight.pdf", () => {
+  fdescribe("annotation-highlight.pdf", () => {
     let pages;
 
     beforeAll(async () => {

test/unit/annotation_spec.js

@@ -623,7 +623,7 @@ describe("annotation", function () {
       expect(data.creationDate).toEqual("D:20180423");
       expect(data.modificationDate).toEqual("D:20190423");
       expect(data.color).toEqual(new Uint8ClampedArray([0, 0, 255]));
-      expect(data.hasPopup).toEqual(true);
+      expect(data.popupRef).toEqual("820R");
     });
 
     it("should parse IRT/RT for a reply type", async function () {
@@ -678,7 +678,7 @@ describe("annotation", function () {
       expect(data.creationDate).toEqual("D:20180523");
       expect(data.modificationDate).toEqual("D:20190523");
       expect(data.color).toEqual(new Uint8ClampedArray([102, 102, 102]));
-      expect(data.hasPopup).toEqual(false);
+      expect(data.popupRef).toEqual(null);
     });
   });
 

web/annotation_layer_builder.css

@@ -42,6 +42,10 @@
   .annotationLayer .linkAnnotation:hover {
     backdrop-filter: invert(100%);
   }
+
+  .annotationLayer .popupAnnotation.focused .popup {
+    outline: calc(3px * var(--scale-factor)) solid Highlight !important;
+  }
 }
 
 .annotationLayer {
@@ -240,32 +244,27 @@
   appearance: none;
 }
 
-.annotationLayer .popupTriggerArea {
+.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
   height: 100%;
   width: 100%;
 }
 
-.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
+.annotationLayer .popupAnnotation {
-  position: absolute;
-}
-
-.annotationLayer .popupWrapper {
   position: absolute;
   font-size: calc(9px * var(--scale-factor));
-  width: 100%;
-  min-width: calc(180px * var(--scale-factor));
   pointer-events: none;
+  width: max-content;
+  max-width: 45%;
+  height: auto;
 }
 
 .annotationLayer .popup {
-  position: absolute;
-  max-width: calc(180px * var(--scale-factor));
   background-color: rgba(255, 255, 153, 1);
   box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
     rgba(136, 136, 136, 1);
   border-radius: calc(2px * var(--scale-factor));
+  outline: 1.5px solid rgb(255, 255, 74);
   padding: calc(6px * var(--scale-factor));
-  margin-left: calc(5px * var(--scale-factor));
   cursor: pointer;
   font: message-box;
   white-space: normal;
@@ -273,17 +272,26 @@
   pointer-events: auto;
 }
 
-.annotationLayer .popup > * {
+.annotationLayer .popupAnnotation.focused .popup {
+  outline-width: 3px;
+}
+
+.annotationLayer .popup * {
   font-size: calc(9px * var(--scale-factor));
 }
 
-.annotationLayer .popup h1 {
+.annotationLayer .popup > .header {
   display: inline-block;
 }
 
-.annotationLayer .popupDate {
+.annotationLayer .popup > .header h1 {
+  display: inline;
+}
+
+.annotationLayer .popup > .header .popupDate {
   display: inline-block;
   margin-left: calc(5px * var(--scale-factor));
+  width: fit-content;
 }
 
 .annotationLayer .popupContent {

web/annotation_layer_builder.js

@@ -129,12 +129,13 @@ class AnnotationLayerBuilder {
       div,
       accessibilityManager: this._accessibilityManager,
       annotationCanvasMap: this._annotationCanvasMap,
+      l10n: this.l10n,
+      page: this.pdfPage,
+      viewport: viewport.clone({ dontFlip: true }),
     });
 
     this.annotationLayer.render({
-      viewport: viewport.clone({ dontFlip: true }),
       annotations,
-      page: this.pdfPage,
       imageResourcesPath: this.imageResourcesPath,
       renderForms: this.renderForms,
       linkService: this.linkService,