diff --git a/src/display/editor/annotation_editor_layer.js b/src/display/editor/annotation_editor_layer.js index 367236947c811..e9904b71ed664 100644 --- a/src/display/editor/annotation_editor_layer.js +++ b/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); } /** diff --git a/test/integration/freetext_editor_spec.mjs b/test/integration/freetext_editor_spec.mjs index 15c7d9496f17f..05b21a8b6dcba 100644 --- a/test/integration/freetext_editor_spec.mjs +++ b/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,7 +527,7 @@ describe("FreeText Editor", () => { ); await kbRedo(page); - await page.waitForSelector(getEditorSelector(9), { + await page.waitForSelector(editorSelector, { visible: true, }); @@ -536,7 +535,7 @@ describe("FreeText Editor", () => { 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 =>