Fix #serializeBoxes bug inconsistent with deserialize function for highlight editor.

Add test for quadPoints order while serializing.

Author: jarklee

src/display/editor/highlight.js

@@ -693,15 +693,14 @@ class HighlightEditor extends AnnotationEditor {
     let i = 0;
     for (const { x, y, width, height } of boxes) {
       const sx = x * pageWidth + pageX;
-      const sy = (1 - y - height) * pageHeight + pageY;
-      // 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
-      // correct hence the 4th and 6th numbers are just swapped.
+      const sy = (1 - y) * pageHeight + pageY;
+      // Serializes the rectangle in the Adobe Acrobat format.
+      // The rectangle's coordinates (b = bottom, t = top, L = left, R = right)
+      // are ordered as follows: tL, tR, bL, bR (bL origin).
       quadPoints[i] = quadPoints[i + 4] = sx;
       quadPoints[i + 1] = quadPoints[i + 3] = sy;
       quadPoints[i + 2] = quadPoints[i + 6] = sx + width * pageWidth;
-      quadPoints[i + 5] = quadPoints[i + 7] = sy + height * pageHeight;
+      quadPoints[i + 5] = quadPoints[i + 7] = sy - height * pageHeight;
       i += 8;
     }
     return quadPoints;

test/integration/highlight_editor_spec.mjs

@@ -1272,7 +1272,8 @@ describe("Highlight Editor", () => {
           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];
+          // Expected quadPoints tL, tR, bL, bR with bL coordinate.
+          const expected = [263, 696, 346, 696, 263, 674, 346, 674];
           expect(quadPoints.every((x, i) => Math.abs(x - expected[i]) <= 5))
             .withContext(`In ${browserName}`)
             .toBeTrue();
@@ -1307,7 +1308,8 @@ describe("Highlight Editor", () => {
           await page.waitForSelector(getEditorSelector(0));
           await waitForSerialized(page, 1);
           const quadPoints = await getFirstSerialized(page, e => e.quadPoints);
-          const expected = [148, 624, 176, 624, 148, 637, 176, 637];
+          // Expected quadPoints tL, tR, bL, bR with bL coordinate.
+          const expected = [148, 637, 176, 637, 148, 624, 176, 624];
           expect(quadPoints.every((x, i) => Math.abs(x - expected[i]) <= 5))
             .withContext(`In ${browserName} (got ${quadPoints})`)
             .toBeTrue();