From 2200f0523c6c379b4c2e9bccc564d920e5330cd2 Mon Sep 17 00:00:00 2001
From: Jarklee <quantv@vikoisoft.com>
Date: Sun, 17 Nov 2024 18:29:01 +0700
Subject: [PATCH] Fix #serializeBoxes bug inconsistent with deserialize
 function for highlight editor. Add test for quadPoints order while
 serializing.

---
 src/display/editor/highlight.js            | 11 +++++------
 test/integration/highlight_editor_spec.mjs |  6 ++++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/display/editor/highlight.js b/src/display/editor/highlight.js
index 345b6b0d4..fdcb43b7f 100644
--- a/src/display/editor/highlight.js
+++ b/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;
diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs
index 13d30c31a..b9a93d4b9 100644
--- a/test/integration/highlight_editor_spec.mjs
+++ b/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();