ZenBrowserMirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/zen-browser/pdf.js.git synced 2025-07-07 17:05:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Disable link annotations during text selection

Browse source 
When selecting text, hovering over an element
causes all the text between (according the the dom
order) the current selection and that element to
be selected.

This means that when, while selecting, the cursor
moves over a link, all the text in the page gets
selected. Setting `user-select: none` on the link
annotations would improve the situation, but it
still makes it impossible to extend the selection
within a link without using Shift+arrows keys on
the keyboard.

This commit fixes the problem by setting
`pointer-events: none` on the `<section>`s in the
annotation layer while selecting some text. This
way, they are ignored for hit-testing and do not
affect selection.

It is still impossible to _start_ a selection
inside a link, as the link text is covered by the
link annotation.

Fixes #18266
This commit is contained in:
Nicolò Ribaudo 2024-07-22 15:02:52 +02:00
parent 98e772727e
commit 64a0e59662
No known key found for this signature in database
GPG key ID: AAFDA9101C58F338
5 changed files with 289 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

2
test/integration/test_utils.mjs
View file

@ -173,7 +173,7 @@ async function getSpanRectFromText(page, pageNumber, text) {
return page.evaluate(
(number, content) => {
for (const el of document.querySelectorAll(
`.page[data-page-number="${number}"] > .textLayer > span`
`.page[data-page-number="${number}"] > .textLayer span:not(:has(> span))`
)) {
if (el.textContent === content) {
const { x, y, width, height } = el.getBoundingClientRect();

162
test/integration/text_layer_spec.mjs
View file

@ -14,6 +14,7 @@
*/
import {
awaitPromise,
closePages,
closeSinglePage,
getSpanRectFromText,
@ -98,6 +99,7 @@ describe("Text layer", () => {
});
describe("using mouse", () => {
describe("doesn't jump when hovering on an empty area", () => {
let pages;
beforeAll(async () => {
@ -110,7 +112,7 @@ describe("Text layer", () => {
await closePages(pages);
});
it("doesn't jump when hovering on an empty area", async () => {
it("in a single page", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
const [positionStart, positionEnd] = await Promise.all([
@ -141,7 +143,7 @@ describe("Text layer", () => {
);
});
it("doesn't jump when hovering on an empty area (multi-page)", async () => {
it("across multiple pages", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
const scrollTarget = await getSpanRectFromText(
@ -206,6 +208,162 @@ describe("Text layer", () => {
});
});
describe("when selecting over a link", () => {
let pages;
beforeAll(async () => {
pages = await loadAndWait(
"annotation-link-text-popup.pdf",
`.page[data-page-number = "1"] .endOfContent`
);
});
afterAll(async () => {
await closePages(pages);
});
afterEach(() =>
Promise.all(
pages.map(([_, page]) =>
page.evaluate(() => window.getSelection().removeAllRanges())
)
)
);
function waitForClick(page, selector, timeout) {
return page.evaluateHandle(
(sel, timeoutDelay) => {
const element = document.querySelector(sel);
const timeoutSignal = AbortSignal.timeout(timeoutDelay);
return [
new Promise(resolve => {
timeoutSignal.addEventListener(
"abort",
() => resolve(false),
{ once: true }
);
element.addEventListener(
"click",
e => {
e.preventDefault();
resolve(true);
},
{ once: true, signal: timeoutSignal }
);
}),
];
},
selector,
timeout
);
}
it("allows selecting within the link", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
const [positionStart, positionEnd] = await Promise.all([
getSpanRectFromText(page, 1, "Link").then(middleLeftPosition),
getSpanRectFromText(page, 1, "mozilla.org").then(
middlePosition
),
]);
await page.mouse.move(positionStart.x, positionStart.y);
await page.mouse.down();
await moveInSteps(page, positionStart, positionEnd, 20);
await page.mouse.up();
await expectAsync(page)
.withContext(`In ${browserName}`)
.toHaveRoughlySelected("Link\nmozil");
})
);
});
it("allows selecting within the link when going backwards", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
const [positionStart, positionEnd] = await Promise.all([
getSpanRectFromText(page, 1, "Text").then(middlePosition),
getSpanRectFromText(page, 1, "mozilla.org").then(
middlePosition
),
]);
await page.mouse.move(positionStart.x, positionStart.y);
await page.mouse.down();
await moveInSteps(page, positionStart, positionEnd, 20);
await page.mouse.up();
await expectAsync(page)
.withContext(`In ${browserName}`)
.toHaveRoughlySelected("a.org\nTe");
})
);
});
it("allows clicking the link after selecting", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
const [positionStart, positionEnd] = await Promise.all([
getSpanRectFromText(page, 1, "Link").then(middleLeftPosition),
getSpanRectFromText(page, 1, "mozilla.org").then(
middlePosition
),
]);
await page.mouse.move(positionStart.x, positionStart.y);
await page.mouse.down();
await moveInSteps(page, positionStart, positionEnd, 20);
await page.mouse.up();
const clickPromiseHandle = await waitForClick(
page,
"#pdfjs_internal_id_8R",
1000
);
await page.mouse.click(positionEnd.x, positionEnd.y);
const clicked = await awaitPromise(clickPromiseHandle);
expect(clicked).toBeTrue();
})
);
});
it("allows clicking the link after changing selection with the keyboard", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
const [positionStart, positionEnd] = await Promise.all([
getSpanRectFromText(page, 1, "Link").then(middleLeftPosition),
getSpanRectFromText(page, 1, "mozilla.org").then(
middlePosition
),
]);
await page.mouse.move(positionStart.x, positionStart.y);
await page.mouse.down();
await moveInSteps(page, positionStart, positionEnd, 20);
await page.mouse.up();
await page.keyboard.down("Shift");
await page.keyboard.press("ArrowRight");
await page.keyboard.up("Shift");
const clickPromiseHandle = await waitForClick(
page,
"#pdfjs_internal_id_8R",
1000
);
await page.mouse.click(positionEnd.x, positionEnd.y);
const clicked = await awaitPromise(clickPromiseHandle);
expect(clicked).toBeTrue();
})
);
});
});
});
describe("using selection carets", () => {
let browser;
let page;

4
web/annotation_layer_builder.css
View file

@ -126,6 +126,10 @@
}
}
.textLayer.selecting ~ & section {
pointer-events: none;
}
:is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
position: absolute;
font-size: 1em;

4
web/text_layer_builder.css
View file

@ -118,9 +118,9 @@
z-index: 0;
cursor: default;
user-select: none;
}
&.active {
&.selecting .endOfContent {
top: 0;
}
}
}

34
web/text_layer_builder.js
View file

@ -150,8 +150,8 @@ class TextLayerBuilder {
#bindMouse(end) {
const { div } = this;
div.addEventListener("mousedown", evt => {
end.classList.add("active");
div.addEventListener("mousedown", () => {
div.classList.add("selecting");
});
div.addEventListener("copy", event => {
@ -193,16 +193,42 @@ class TextLayerBuilder {
end.style.width = "";
end.style.height = "";
}
end.classList.remove("active");
textLayer.classList.remove("selecting");
};
let isPointerDown = false;
document.addEventListener(
"pointerdown",
() => {
isPointerDown = true;
},
{ signal }
);
document.addEventListener(
"pointerup",
() => {
isPointerDown = false;
this.#textLayers.forEach(reset);
},
{ signal }
);
window.addEventListener(
"blur",
() => {
isPointerDown = false;
this.#textLayers.forEach(reset);
},
{ signal }
);
document.addEventListener(
"keyup",
() => {
if (!isPointerDown) {
this.#textLayers.forEach(reset);
}
},
{ signal }
);
if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
// eslint-disable-next-line no-var
@ -237,7 +263,7 @@ class TextLayerBuilder {
for (const [textLayerDiv, endDiv] of this.#textLayers) {
if (activeTextLayers.has(textLayerDiv)) {
endDiv.classList.add("active");
textLayerDiv.classList.add("selecting");
} else {
reset(endDiv, textLayerDiv);
}