Merge pull request #17760 from calixteman/fix_quadpoints

[Editor] Fix the quadpoints value when serializing an highlight annotation

src/display/editor/highlight.js

@@ -635,18 +635,17 @@ class HighlightEditor extends AnnotationEditor {
     return this.#isFreeHighlight ? this.rotation : 0;
   }
 
-  #serializeBoxes(rect) {
+  #serializeBoxes() {
     if (this.#isFreeHighlight) {
       return null;
     }
     const [pageWidth, pageHeight] = this.pageDimensions;
     const boxes = this.#boxes;
     const quadPoints = new Array(boxes.length * 8);
-    const [tx, ty] = rect;
     let i = 0;
     for (const { x, y, width, height } of boxes) {
-      const sx = tx + x * pageWidth;
+      const sx = x * pageWidth;
-      const sy = ty + (1 - y - height) * pageHeight;
+      const sy = (1 - y - height) * pageHeight;
       // The specifications say that the rectangle should start from the bottom
       // left corner and go counter-clockwise.
       // But when opening the file in Adobe Acrobat it appears that this isn't
@@ -781,7 +780,7 @@ class HighlightEditor extends AnnotationEditor {
       color,
       opacity: this.#opacity,
       thickness: this.#thickness,
-      quadPoints: this.#serializeBoxes(rect),
+      quadPoints: this.#serializeBoxes(),
       outlines: this.#serializeOutlines(rect),
       pageIndex: this.pageIndex,
       rect,

test/integration/highlight_editor_spec.mjs

@@ -18,6 +18,7 @@ import {
   closePages,
   createPromise,
   getEditorSelector,
+  getFirstSerialized,
   getSerialized,
   kbBigMoveLeft,
   kbBigMoveUp,
@@ -1329,4 +1330,40 @@ describe("Highlight Editor", () => {
       );
     });
   });
+
+  describe("Quadpoints must be correct", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the quadpoints for an highlight are almost correct", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#editorHighlight");
+          await page.waitForSelector(".annotationEditorLayer.highlightEditing");
+
+          const rect = await getSpanRectFromText(page, 1, "Languages");
+          await page.mouse.click(
+            rect.x + rect.width / 2,
+            rect.y + rect.height / 2,
+            { count: 2, delay: 100 }
+          );
+
+          await page.waitForSelector(getEditorSelector(0));
+          await waitForSerialized(page, 1);
+          const quadPoints = await getFirstSerialized(page, e => e.quadPoints);
+          const expected = [263, 674, 346, 674, 263, 696, 346, 696];
+          expect(quadPoints.every((x, i) => Math.abs(x - expected[i]) <= 5))
+            .withContext(`In ${browserName}`)
+            .toBeTrue();
+        })
+      );
+    });
+  });
 });