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

And avoid to uselessly set the pointer listeners in the annotation editor layer.

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 =>