Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #16740 from calixteman/editor_keyevent_on_window

Browse Source 
[Editor] Set keyboard events on window instead of the main container
This commit is contained in:
calixteman 2023-07-25 19:54:29 +02:00 committed by GitHub
commit e40fd171e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 99 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/display/editor/tools.js
View File

@ -688,11 +688,13 @@ class AnnotationEditorUIManager {
#addKeyboardManager() {
// The keyboard events are caught at the container level in order to be able
// to execute some callbacks even if the current page doesn't have focus.
this.#container.addEventListener("keydown", this.#boundKeydown);
window.addEventListener("keydown", this.#boundKeydown, { capture: true });
}
#removeKeyboardManager() {
this.#container.removeEventListener("keydown", this.#boundKeydown);
window.removeEventListener("keydown", this.#boundKeydown, {
capture: true,
});
}
#addCopyPasteListeners() {

95
test/integration/freetext_editor_spec.js
View File

@ -143,10 +143,14 @@ describe("FreeText Editor", () => {
await page.keyboard.press("a");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
await page.keyboard.down("Control");
await page.keyboard.press("Backspace");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
for (const n of [0, 1, 2]) {
const hasEditor = await page.evaluate(sel => {
return !!document.querySelector(sel);
@ -182,12 +186,17 @@ describe("FreeText Editor", () => {
editorRect.x,
editorRect.y + 2 * editorRect.height
);
await page.waitForTimeout(10);
// And select it again.
await page.mouse.click(
editorRect.x + editorRect.width / 2,
editorRect.y + editorRect.height / 2
);
await page.waitForTimeout(10);
await waitForSelectedEditor(page, getEditorSelector(3));
await copyPaste(page);
@ -300,10 +309,14 @@ describe("FreeText Editor", () => {
await page.keyboard.press("a");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
await page.keyboard.down("Control");
await page.keyboard.press("Backspace");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
const data = "Hello PDF.js World !!";
await page.mouse.click(rect.x + 100, rect.y + 100);
await page.type(`${getEditorSelector(8)} .internal`, data);
@ -338,6 +351,7 @@ describe("FreeText Editor", () => {
// Escape.
await page.keyboard.press("Escape");
await page.waitForTimeout(10);
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
@ -385,6 +399,7 @@ describe("FreeText Editor", () => {
editorRect.x,
editorRect.y + 2 * editorRect.height
);
await page.waitForTimeout(10);
if (i < 4) {
// And select it again.
@ -393,6 +408,7 @@ describe("FreeText Editor", () => {
editorRect.y + editorRect.height / 2,
{ clickCount: 2 }
);
await page.waitForTimeout(10);
}
}
@ -468,6 +484,7 @@ describe("FreeText Editor", () => {
editorRect.x,
editorRect.y + 2 * editorRect.height
);
await page.waitForTimeout(10);
text = await page.$eval(`${getEditorSelector(9)} .internal`, el => {
return el.innerText;
@ -533,6 +550,7 @@ describe("FreeText Editor", () => {
await page.keyboard.down("Control");
await page.keyboard.press("a");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
@ -540,6 +558,7 @@ describe("FreeText Editor", () => {
await page.keyboard.down("Control");
await page.mouse.click(editorCenters[1].x, editorCenters[1].y);
await page.waitForTimeout(10);
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
@ -553,6 +572,7 @@ describe("FreeText Editor", () => {
await page.mouse.click(editorCenters[1].x, editorCenters[1].y);
await page.keyboard.up("Control");
await page.waitForTimeout(10);
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
@ -587,10 +607,12 @@ describe("FreeText Editor", () => {
// Delete 1 and 3.
await page.keyboard.press("Backspace");
await page.waitForTimeout(10);
await page.keyboard.down("Control");
await page.keyboard.press("a");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
expect(await getSelectedEditors(page))
.withContext(`In ${browserName}`)
@ -615,11 +637,13 @@ describe("FreeText Editor", () => {
.toEqual([8]);
// Dismiss it.
await page.keyboard.press("Escape");
await page.waitForTimeout(10);
// Select all.
await page.keyboard.down("Control");
await page.keyboard.press("a");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
// Check that all the editors are correctly selected (and the focus
// didn't move to the body when the empty editor was removed).
@ -1235,6 +1259,7 @@ describe("FreeText Editor", () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
await page.keyboard.press("r");
await page.waitForTimeout(10);
await page.click("#editorFreeText");
const rect = await page.$eval(".annotationEditorLayer", el => {
@ -1685,4 +1710,74 @@ describe("FreeText Editor", () => {
);
});
});
describe("Keyboard shortcuts when the editor layer isn't focused", () => {
let pages;
beforeAll(async () => {
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer");
});
afterAll(async () => {
await closePages(pages);
});
it("must check that the shortcuts are working correctly", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
await page.click("#editorFreeText");
const rect = await page.$eval(".annotationEditorLayer", el => {
const { x, y } = el.getBoundingClientRect();
return { x, y };
});
const data = "Hello PDF.js World !!";
await page.mouse.click(rect.x + 100, rect.y + 100);
await page.type(`${getEditorSelector(0)} .internal`, data);
const editorRect = await page.$eval(getEditorSelector(0), el => {
const { x, y, width, height } = el.getBoundingClientRect();
return {
x,
y,
width,
height,
};
});
// Commit.
await page.mouse.click(
editorRect.x,
editorRect.y + 2 * editorRect.height
);
await page.waitForTimeout(10);
await page.focus("#editorFreeTextColor");
await page.keyboard.down("Control");
await page.keyboard.press("z");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
let hasEditor = await page.evaluate(sel => {
return !!document.querySelector(sel);
}, getEditorSelector(0));
expect(hasEditor).withContext(`In ${browserName}`).toEqual(false);
await page.keyboard.down("Control");
await page.keyboard.press("y");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
hasEditor = await page.evaluate(sel => {
return !!document.querySelector(sel);
}, getEditorSelector(0));
expect(hasEditor).withContext(`In ${browserName}`).toEqual(true);
})
);
});
});
});