1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-19 22:58:07 +02:00

[Editor] Make editors movable in using the keyboard (bug 1845088)

Selected editors can be moved in using the arrows:
 - up/down/left/right will move the editors of 1 in page unit;
 - ctrl (or meta)+up/down/left/right will move them of 10 in page unit.
This commit is contained in:
Calixte Denizet 2023-07-26 12:57:59 +02:00
parent 48cc67f17e
commit bb6936c931
8 changed files with 311 additions and 50 deletions

View file

@ -18,6 +18,7 @@ const {
getEditors,
getEditorSelector,
getSelectedEditors,
getFirstSerialized,
getSerialized,
loadAndWait,
waitForEvent,
@ -752,7 +753,7 @@ describe("FreeText Editor", () => {
"switchannotationeditorparams",
{
source: null,
type: /* AnnotationEditorParamsType.FREETEXT_SIZE */ 1,
type: window.pdfjsLib.AnnotationEditorParamsType.FREETEXT_SIZE,
value: 13,
}
);
@ -769,7 +770,7 @@ describe("FreeText Editor", () => {
"switchannotationeditorparams",
{
source: null,
type: /* AnnotationEditorParamsType.FREETEXT_COLOR */ 2,
type: window.pdfjsLib.AnnotationEditorParamsType.FREETEXT_COLOR,
value: "#FF0000",
}
);
@ -1310,7 +1311,7 @@ describe("FreeText Editor", () => {
"switchannotationeditorparams",
{
source: null,
type: /* AnnotationEditorParamsType.FREETEXT_SIZE */ 1,
type: window.pdfjsLib.AnnotationEditorParamsType.FREETEXT_SIZE,
value: 50,
}
);
@ -1780,4 +1781,142 @@ describe("FreeText Editor", () => {
);
});
});
describe("Move editor with arrows", () => {
let pages;
beforeAll(async () => {
pages = await loadAndWait("empty.pdf", ".annotationEditorLayer");
});
afterAll(async () => {
await closePages(pages);
});
it("must check the position of moved editor", 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 + 200, rect.y + 200);
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);
const [pageX, pageY] = await getFirstSerialized(page, x => x.rect);
for (let i = 0; i < 20; i++) {
await page.keyboard.press("ArrowRight");
await page.waitForTimeout(1);
}
let [newX, newY] = await getFirstSerialized(page, x => x.rect);
expect(Math.round(newX))
.withContext(`In ${browserName}`)
.toEqual(Math.round(pageX + 20));
expect(Math.round(newY))
.withContext(`In ${browserName}`)
.toEqual(Math.round(pageY));
for (let i = 0; i < 20; i++) {
await page.keyboard.press("ArrowDown");
await page.waitForTimeout(1);
}
[newX, newY] = await getFirstSerialized(page, x => x.rect);
expect(Math.round(newX))
.withContext(`In ${browserName}`)
.toEqual(Math.round(pageX + 20));
expect(Math.round(newY))
.withContext(`In ${browserName}`)
.toEqual(Math.round(pageY - 20));
for (let i = 0; i < 2; i++) {
await page.keyboard.down("Control");
await page.keyboard.press("ArrowLeft");
await page.keyboard.up("Control");
await page.waitForTimeout(1);
}
[newX, newY] = await getFirstSerialized(page, x => x.rect);
expect(Math.round(newX))
.withContext(`In ${browserName}`)
.toEqual(Math.round(pageX));
expect(Math.round(newY))
.withContext(`In ${browserName}`)
.toEqual(Math.round(pageY - 20));
for (let i = 0; i < 2; i++) {
await page.keyboard.down("Control");
await page.keyboard.press("ArrowUp");
await page.keyboard.up("Control");
await page.waitForTimeout(1);
}
[newX, newY] = await getFirstSerialized(page, x => x.rect);
expect(Math.round(newX))
.withContext(`In ${browserName}`)
.toEqual(Math.round(pageX));
expect(Math.round(newY))
.withContext(`In ${browserName}`)
.toEqual(Math.round(pageY));
})
);
});
it("must check arrow doesn't move an editor when a slider is focused", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
await page.keyboard.down("Control");
await page.keyboard.press("a");
await page.keyboard.up("Control");
await page.waitForTimeout(10);
await page.focus("#editorFreeTextFontSize");
const [page1X, , page2X] = await getFirstSerialized(
page,
x => x.rect
);
const pageWidth = page2X - page1X;
for (let i = 0; i < 5; i++) {
await page.keyboard.press("ArrowRight");
await page.waitForTimeout(1);
}
await page.waitForTimeout(10);
const [new1X, , new2X] = await getFirstSerialized(page, x => x.rect);
const newWidth = new2X - new1X;
expect(Math.round(new1X))
.withContext(`In ${browserName}`)
.not.toEqual(Math.round(page1X + 5));
expect(newWidth)
.withContext(`In ${browserName}`)
.not.toEqual(pageWidth);
})
);
});
});
});

View file

@ -137,14 +137,20 @@ const mockClipboard = async pages => {
};
exports.mockClipboard = mockClipboard;
const getSerialized = page =>
page.evaluate(() => {
async function getSerialized(page, filter = undefined) {
const values = await page.evaluate(() => {
const { map } =
window.PDFViewerApplication.pdfDocument.annotationStorage.serializable;
return map ? [...map.values()] : [];
});
return filter ? values.map(filter) : values;
}
exports.getSerialized = getSerialized;
const getFirstSerialized = async (page, filter = undefined) =>
(await getSerialized(page, filter))[0];
exports.getFirstSerialized = getFirstSerialized;
function getEditors(page, kind) {
return page.evaluate(aKind => {
const elements = document.querySelectorAll(`.${aKind}Editor`);