diff --git a/src/display/editor/annotation_editor_layer.js b/src/display/editor/annotation_editor_layer.js index 3388d4764..fe472bca0 100644 --- a/src/display/editor/annotation_editor_layer.js +++ b/src/display/editor/annotation_editor_layer.js @@ -465,7 +465,8 @@ class AnnotationEditorLayer { if ( target === this.#textLayer.div || ((target.getAttribute("role") === "img" || - target.classList.contains("endOfContent")) && + target.classList.contains("endOfContent") || + target.classList.contains("textLayerImagePlaceholder")) && this.#textLayer.div.contains(target)) ) { const { isMac } = FeatureTest.platform; diff --git a/test/integration/text_layer_images_spec.mjs b/test/integration/text_layer_images_spec.mjs index a83982b51..fd7342c2f 100644 --- a/test/integration/text_layer_images_spec.mjs +++ b/test/integration/text_layer_images_spec.mjs @@ -13,7 +13,17 @@ * limitations under the License. */ -import { closePages, loadAndWait } from "./test_utils.mjs"; +import { + awaitPromise, + closePages, + getEditorSelector, + getRect, + loadAndWait, + switchToEditor, + waitForPointerUp, +} from "./test_utils.mjs"; + +const switchToHighlight = switchToEditor.bind(null, "Highlight"); describe("Text layer images", () => { describe("basic", () => { @@ -286,4 +296,55 @@ describe("Text layer images", () => { ); }); }); + + describe("free-highlighting on top of an image placeholder", () => { + let pages; + + beforeEach(async () => { + pages = await loadAndWait( + "images.pdf", + `.page[data-page-number = "1"] .endOfContent`, + undefined, + { + earlySetup: `() => { window.devicePixelRatio = 1 }`, + }, + { + imagesRightClickMinSize: 16, + highlightEditorColors: "yellow=#FFFF00", + }, + { width: 800, height: 600, devicePixelRatio: 1 } + ); + }); + + afterEach(async () => { + await closePages(pages); + }); + + it("must create a free highlight when dragging on an image placeholder (bug 2034980)", async () => { + await Promise.all( + pages.map(async ([browserName, page]) => { + await switchToHighlight(page); + + const rect = await getRect( + page, + `.page[data-page-number="1"] > .textLayer > .textLayerImages > canvas` + ); + + const x1 = rect.x + rect.width / 4; + const y1 = rect.y + rect.height / 4; + const x2 = rect.x + (3 * rect.width) / 4; + const y2 = rect.y + (3 * rect.height) / 4; + + const clickHandle = await waitForPointerUp(page); + await page.mouse.move(x1, y1); + await page.mouse.down(); + await page.mouse.move(x2, y2); + await page.mouse.up(); + await awaitPromise(clickHandle); + + await page.waitForSelector(getEditorSelector(0)); + }) + ); + }); + }); });