Merge pull request #17802 from calixteman/fix_tests

[Editor] Fix the rect used to click in some freetext integration tests

src/display/editor/annotation_editor_layer.js

@@ -61,11 +61,11 @@ class AnnotationEditorLayer {
 
   #annotationLayer = null;
 
-  #boundPointerup = this.pointerup.bind(this);
+  #boundPointerup = null;
 
-  #boundPointerdown = this.pointerdown.bind(this);
+  #boundPointerdown = null;
 
-  #boundTextLayerPointerDown = this.#textLayerPointerDown.bind(this);
+  #boundTextLayerPointerDown = null;
 
   #editorFocusTimeoutId = null;
 
@@ -333,7 +333,8 @@ class AnnotationEditorLayer {
   }
 
   enableTextSelection() {
-    if (this.#textLayer?.div) {
+    if (this.#textLayer?.div && !this.#boundTextLayerPointerDown) {
+      this.#boundTextLayerPointerDown = this.#textLayerPointerDown.bind(this);
       this.#textLayer.div.addEventListener(
         "pointerdown",
         this.#boundTextLayerPointerDown
@@ -343,11 +344,12 @@ class AnnotationEditorLayer {
   }
 
   disableTextSelection() {
-    if (this.#textLayer?.div) {
+    if (this.#textLayer?.div && this.#boundTextLayerPointerDown) {
       this.#textLayer.div.removeEventListener(
         "pointerdown",
         this.#boundTextLayerPointerDown
       );
+      this.#boundTextLayerPointerDown = null;
       this.#textLayer.div.classList.remove("highlighting");
     }
   }
@@ -385,13 +387,23 @@ class AnnotationEditorLayer {
   }
 
   enableClick() {
+    if (this.#boundPointerdown) {
+      return;
+    }
+    this.#boundPointerdown = this.pointerdown.bind(this);
+    this.#boundPointerup = this.pointerup.bind(this);
     this.div.addEventListener("pointerdown", this.#boundPointerdown);
     this.div.addEventListener("pointerup", this.#boundPointerup);
   }
 
   disableClick() {
+    if (!this.#boundPointerdown) {
+      return;
+    }
     this.div.removeEventListener("pointerdown", this.#boundPointerdown);
     this.div.removeEventListener("pointerup", this.#boundPointerup);
+    this.#boundPointerdown = null;
+    this.#boundPointerup = null;
   }
 
   attach(editor) {
@@ -821,6 +833,8 @@ class AnnotationEditorLayer {
     for (const editor of this.#uiManager.getEditors(this.pageIndex)) {
       this.add(editor);
     }
+    // We're maybe rendering a layer which was invisible when we started to edit
+    // so we must set the different callbacks for it.
     this.updateMode();
   }
 
@@ -833,6 +847,7 @@ class AnnotationEditorLayer {
     // issues (see #15582), we must commit the current one before changing
     // the viewport.
     this.#uiManager.commitOrRemove();
+    this.#cleanup();
 
     const oldRotation = this.viewport.rotation;
     const rotation = viewport.rotation;
@@ -843,7 +858,7 @@ class AnnotationEditorLayer {
         editor.rotate(rotation);
       }
     }
-    this.updateMode();
+    this.addInkEditorIfNeeded(/* isCommitting = */ false);
   }
 
   /**

test/integration/freetext_editor_spec.mjs

@@ -444,15 +444,16 @@ describe("FreeText Editor", () => {
 
         await clearAll(page);
 
+        const editorSelector = getEditorSelector(9);
         await page.mouse.click(rect.x + 200, rect.y + 100);
-        await page.waitForSelector(getEditorSelector(9), {
+        await page.waitForSelector(editorSelector, {
           visible: true,
         });
 
         for (let i = 0; i < 5; i++) {
-          await page.type(`${getEditorSelector(9)} .internal`, "A");
+          await page.type(`${editorSelector} .internal`, "A");
 
-          const editorRect = await page.$eval(getEditorSelector(9), el => {
+          const editorRect = await page.$eval(editorSelector, el => {
             const { x, y, width, height } = el.getBoundingClientRect();
             return { x, y, width, height };
           });
@@ -462,9 +463,7 @@ describe("FreeText Editor", () => {
             editorRect.x + 1.5 * editorRect.width,
             editorRect.y
           );
-          await page.waitForSelector(
-            `${getEditorSelector(9)} .overlay.enabled`
-          );
+          await page.waitForSelector(`${editorSelector} .overlay.enabled`);
 
           if (i < 4) {
             // And select it again.
@@ -474,13 +473,13 @@ describe("FreeText Editor", () => {
               { count: 2 }
             );
             await page.waitForSelector(
-              `${getEditorSelector(9)} .overlay:not(.enabled)`
+              `${editorSelector} .overlay:not(.enabled)`
             );
           }
         }
 
         let prevText = await page.$eval(
-          `${getEditorSelector(9)} .internal`,
+          `${editorSelector} .internal`,
           el => el.innerText
         );
 
@@ -489,10 +488,10 @@ describe("FreeText Editor", () => {
             (prev, sel) => document.querySelector(sel).innerText !== prev,
             {},
             previous,
-            `${getEditorSelector(9)} .internal`
+            `${editorSelector} .internal`
           );
         const getText = () =>
-          page.$eval(`${getEditorSelector(9)} .internal`, el => el.innerText);
+          page.$eval(`${editorSelector} .internal`, el => el.innerText);
 
         // We're in the middle of the text.
         await kbUndo(page);
@@ -528,15 +527,15 @@ describe("FreeText Editor", () => {
         );
 
         await kbRedo(page);
-        await page.waitForSelector(getEditorSelector(9), {
+        await page.waitForSelector(editorSelector, {
           visible: true,
         });
 
         text = await getText();
         expect(text).withContext(`In ${browserName}`).toEqual("A");
 
         // Add a new A.
-        const editorRect = await page.$eval(getEditorSelector(9), el => {
+        let editorRect = await page.$eval(editorSelector, el => {
           const { x, y, width, height } = el.getBoundingClientRect();
           return { x, y, width, height };
         });
@@ -545,17 +544,20 @@ describe("FreeText Editor", () => {
           editorRect.y + editorRect.height / 2,
           { count: 2 }
         );
-        await page.waitForSelector(
-          `${getEditorSelector(9)} .overlay:not(.enabled)`
-        );
-        await page.type(`${getEditorSelector(9)} .internal`, "A");
+        await page.waitForSelector(`${editorSelector} .overlay:not(.enabled)`);
+        await page.type(`${editorSelector} .internal`, "A");
+
+        editorRect = await page.$eval(editorSelector, el => {
+          const { x, y, width, height } = el.getBoundingClientRect();
+          return { x, y, width, height };
+        });
 
         // Commit.
         await page.mouse.click(
           editorRect.x + 1.5 * editorRect.width,
           editorRect.y
         );
-        await page.waitForSelector(`${getEditorSelector(9)} .overlay.enabled`);
+        await page.waitForSelector(`${editorSelector} .overlay.enabled`);
 
         text = await getText();
         expect(text).withContext(`In ${browserName}`).toEqual("AA");
@@ -2305,7 +2307,7 @@ describe("FreeText Editor", () => {
         pages.map(async ([browserName, page]) => {
           await switchToFreeText(page);
 
-          const rect = await page.$eval(".annotationEditorLayer", el => {
+          let rect = await page.$eval(".annotationEditorLayer", el => {
             const { x, y } = el.getBoundingClientRect();
             return { x, y };
           });
@@ -2322,7 +2324,15 @@ describe("FreeText Editor", () => {
             `${getEditorSelector(0)} .overlay.enabled`
           );
 
-          await page.mouse.click(rect.x + 110, rect.y + 150);
+          rect = await page.$eval(getEditorSelector(0), el => {
+            const { x, y, width, height } = el.getBoundingClientRect();
+            return { x, y, width, height };
+          });
+
+          await page.mouse.click(
+            rect.x + 5 * rect.width,
+            rect.y + 5 * rect.height
+          );
           await page.waitForSelector(getEditorSelector(1), {
             visible: true,
           });
@@ -2334,7 +2344,15 @@ describe("FreeText Editor", () => {
             `${getEditorSelector(1)} .overlay.enabled`
           );
 
-          await page.mouse.click(rect.x + 111, rect.y + 151);
+          rect = await page.$eval(getEditorSelector(0), el => {
+            const { x, y, width, height } = el.getBoundingClientRect();
+            return { x, y, width, height };
+          });
+
+          await page.mouse.click(
+            rect.x + 5 * rect.width,
+            rect.y + 5 * rect.height
+          );
           await waitForSelectedEditor(page, getEditorSelector(1));
 
           const pos = n =>