mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-20 15:18:08 +02:00
[api-minor][Editor] When switching to editing mode, redraw pages containing editable annotations
Right now, editable annotations are using their own canvas when they're drawn, but it induces several issues: - if the annotation has to be composed with the page then the canvas must be correctly composed with its parent. That means we should move the canvas under canvasWrapper and we should extract composing info from the drawing instructions... Currently it's the case with highlight annotations. - we use some extra memory for those canvas even if the user will never edit them, which the case for example when opening a pdf in Fenix. So with this patch, all the editable annotations are drawn on the canvas. When the user switches to editing mode, then the pages with some editable annotations are redrawn but without them: they'll be replaced by their counterpart in the annotation editor layer.
This commit is contained in:
Calixte Denizet
parent
75129fd61a
commit
64635f3b35
13 changed files with 358 additions and 103 deletions
|
|
@ -503,6 +503,14 @@ describe("ResetForm action", () => {
|
|||
it("must check that the Ink annotation has a popup", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
if (browserName) {
|
||||
// TODO
|
||||
pending(
|
||||
"Re-enable this test when the Ink annotation has been made editable."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
await page.waitForFunction(
|
||||
`document.querySelector("[data-annotation-id='25R']").hidden === false`
|
||||
);
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ import {
|
|||
scrollIntoView,
|
||||
switchToEditor,
|
||||
waitForAnnotationEditorLayer,
|
||||
waitForAnnotationModeChanged,
|
||||
waitForSelectedEditor,
|
||||
waitForSerialized,
|
||||
waitForStorageEntries,
|
||||
|
|
@ -987,6 +988,29 @@ describe("FreeText Editor", () => {
|
|||
pages.map(async ([browserName, page]) => {
|
||||
await switchToFreeText(page);
|
||||
|
||||
const isEditorWhite = editorRect =>
|
||||
page.evaluate(rect => {
|
||||
const canvas = document.querySelector(".canvasWrapper canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
rect ||= {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
};
|
||||
const { data } = ctx.getImageData(
|
||||
rect.x,
|
||||
rect.y,
|
||||
rect.width,
|
||||
rect.height
|
||||
);
|
||||
return data.every(x => x === 0xff);
|
||||
}, editorRect);
|
||||
|
||||
// The page has been re-rendered but with no freetext annotations.
|
||||
let isWhite = await isEditorWhite();
|
||||
expect(isWhite).withContext(`In ${browserName}`).toBeTrue();
|
||||
|
||||
let editorIds = await getEditors(page, "freeText");
|
||||
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(6);
|
||||
|
||||
|
|
@ -1041,11 +1065,9 @@ describe("FreeText Editor", () => {
|
|||
// canvas.
|
||||
editorIds = await getEditors(page, "freeText");
|
||||
expect(editorIds.length).withContext(`In ${browserName}`).toEqual(1);
|
||||
const hidden = await page.$eval(
|
||||
"[data-annotation-id='26R'] canvas",
|
||||
el => getComputedStyle(el).display === "none"
|
||||
);
|
||||
expect(hidden).withContext(`In ${browserName}`).toBeTrue();
|
||||
|
||||
isWhite = await isEditorWhite(editorRect);
|
||||
expect(isWhite).withContext(`In ${browserName}`).toBeTrue();
|
||||
|
||||
// Check we've now a div containing the text.
|
||||
const newDivText = await page.$eval(
|
||||
|
|
@ -1288,10 +1310,12 @@ describe("FreeText Editor", () => {
|
|||
await closePages(pages);
|
||||
});
|
||||
|
||||
it("must move an annotation", async () => {
|
||||
it("must edit an annotation", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
const modeChangedHandle = await waitForAnnotationModeChanged(page);
|
||||
await page.click("[data-annotation-id='26R']", { count: 2 });
|
||||
await awaitPromise(modeChangedHandle);
|
||||
await page.waitForSelector(`${getEditorSelector(0)}-editor`);
|
||||
|
||||
const [focusedId, editable] = await page.evaluate(() => {
|
||||
|
|
@ -1347,6 +1371,7 @@ describe("FreeText Editor", () => {
|
|||
|
||||
// TODO: remove this when we switch to BiDi.
|
||||
await hover(page, "[data-annotation-id='23R']");
|
||||
|
||||
// Wait for the popup to be displayed.
|
||||
await page.waitForFunction(
|
||||
() =>
|
||||
|
|
@ -1588,12 +1613,6 @@ describe("FreeText Editor", () => {
|
|||
it("must open an existing annotation and check that the position are good", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
await switchToFreeText(page);
|
||||
|
||||
await page.evaluate(() => {
|
||||
document.getElementById("editorFreeTextParamsToolbar").remove();
|
||||
});
|
||||
|
||||
const toBinary = buf => {
|
||||
for (let i = 0; i < buf.length; i += 4) {
|
||||
const gray =
|
||||
|
|
@ -1646,8 +1665,12 @@ describe("FreeText Editor", () => {
|
|||
return null;
|
||||
};
|
||||
|
||||
for (const n of [0, 1, 2, 3, 4]) {
|
||||
const rect = await getRect(page, getEditorSelector(n));
|
||||
const firstPixelsAnnotations = new Map();
|
||||
|
||||
// [26, 32, ...] are the annotation ids
|
||||
for (const n of [26, 32, 42, 57, 35, 1]) {
|
||||
const id = `${n}R`;
|
||||
const rect = await getRect(page, `[data-annotation-id="${id}"]`);
|
||||
const editorPng = await page.screenshot({
|
||||
clip: rect,
|
||||
type: "png",
|
||||
|
|
@ -1658,33 +1681,33 @@ describe("FreeText Editor", () => {
|
|||
editorImage.width,
|
||||
editorImage.height
|
||||
);
|
||||
firstPixelsAnnotations.set(id, { editorFirstPix, rect });
|
||||
}
|
||||
|
||||
await switchToFreeText(page);
|
||||
|
||||
await page.evaluate(() => {
|
||||
document.getElementById("editorFreeTextParamsToolbar").remove();
|
||||
});
|
||||
|
||||
for (const n of [0, 1, 2, 3, 4]) {
|
||||
const annotationId = await page.evaluate(N => {
|
||||
const editor = document.getElementById(
|
||||
`pdfjs_internal_editor_${N}`
|
||||
);
|
||||
const annId = editor.getAttribute("annotation-id");
|
||||
const annotation = document.querySelector(
|
||||
`[data-annotation-id="${annId}"]`
|
||||
);
|
||||
editor.hidden = true;
|
||||
annotation.hidden = false;
|
||||
return annId;
|
||||
return editor.getAttribute("annotation-id");
|
||||
}, n);
|
||||
await page.waitForSelector(`${getEditorSelector(n)}[hidden]`);
|
||||
await page.waitForSelector(
|
||||
`[data-annotation-id="${annotationId}"]:not([hidden])`
|
||||
);
|
||||
|
||||
const annotationPng = await page.screenshot({
|
||||
const { editorFirstPix: annotationFirstPix, rect } =
|
||||
firstPixelsAnnotations.get(annotationId);
|
||||
const editorPng = await page.screenshot({
|
||||
clip: rect,
|
||||
type: "png",
|
||||
});
|
||||
const annotationImage = PNG.sync.read(annotationPng);
|
||||
const annotationFirstPix = getFirstPixel(
|
||||
annotationImage.data,
|
||||
annotationImage.width,
|
||||
annotationImage.height
|
||||
const editorImage = PNG.sync.read(editorPng);
|
||||
const editorFirstPix = getFirstPixel(
|
||||
editorImage.data,
|
||||
editorImage.width,
|
||||
editorImage.height
|
||||
);
|
||||
|
||||
expect(
|
||||
|
|
@ -1719,12 +1742,6 @@ describe("FreeText Editor", () => {
|
|||
it("must open an existing rotated annotation and check that the position are good", async () => {
|
||||
await Promise.all(
|
||||
pages.map(async ([browserName, page]) => {
|
||||
await switchToFreeText(page);
|
||||
|
||||
await page.evaluate(() => {
|
||||
document.getElementById("editorFreeTextParamsToolbar").remove();
|
||||
});
|
||||
|
||||
const toBinary = buf => {
|
||||
for (let i = 0; i < buf.length; i += 4) {
|
||||
const gray =
|
||||
|
|
@ -1806,13 +1823,15 @@ describe("FreeText Editor", () => {
|
|||
return null;
|
||||
};
|
||||
|
||||
const firstPixelsAnnotations = new Map();
|
||||
for (const [n, start] of [
|
||||
[0, "BL"],
|
||||
[1, "BR"],
|
||||
[2, "TR"],
|
||||
[3, "TL"],
|
||||
[17, "BL"],
|
||||
[18, "BR"],
|
||||
[19, "TR"],
|
||||
[20, "TL"],
|
||||
]) {
|
||||
const rect = await getRect(page, getEditorSelector(n));
|
||||
const id = `${n}R`;
|
||||
const rect = await getRect(page, `[data-annotation-id="${id}"]`);
|
||||
const editorPng = await page.screenshot({
|
||||
clip: rect,
|
||||
type: "png",
|
||||
|
|
@ -1824,33 +1843,38 @@ describe("FreeText Editor", () => {
|
|||
editorImage.height,
|
||||
start
|
||||
);
|
||||
firstPixelsAnnotations.set(id, { editorFirstPix, rect });
|
||||
}
|
||||
|
||||
await switchToFreeText(page);
|
||||
|
||||
await page.evaluate(() => {
|
||||
document.getElementById("editorFreeTextParamsToolbar").remove();
|
||||
});
|
||||
|
||||
for (const [n, start] of [
|
||||
[0, "BL"],
|
||||
[1, "BR"],
|
||||
[2, "TR"],
|
||||
[3, "TL"],
|
||||
]) {
|
||||
const annotationId = await page.evaluate(N => {
|
||||
const editor = document.getElementById(
|
||||
`pdfjs_internal_editor_${N}`
|
||||
);
|
||||
const annId = editor.getAttribute("annotation-id");
|
||||
const annotation = document.querySelector(
|
||||
`[data-annotation-id="${annId}"]`
|
||||
);
|
||||
editor.hidden = true;
|
||||
annotation.hidden = false;
|
||||
return annId;
|
||||
return editor.getAttribute("annotation-id");
|
||||
}, n);
|
||||
await page.waitForSelector(`${getEditorSelector(n)}[hidden]`);
|
||||
await page.waitForSelector(
|
||||
`[data-annotation-id="${annotationId}"]:not([hidden])`
|
||||
);
|
||||
|
||||
const annotationPng = await page.screenshot({
|
||||
const { editorFirstPix: annotationFirstPix, rect } =
|
||||
firstPixelsAnnotations.get(annotationId);
|
||||
const editorPng = await page.screenshot({
|
||||
clip: rect,
|
||||
type: "png",
|
||||
});
|
||||
const annotationImage = PNG.sync.read(annotationPng);
|
||||
const annotationFirstPix = getFirstPixel(
|
||||
annotationImage.data,
|
||||
annotationImage.width,
|
||||
annotationImage.height,
|
||||
const editorImage = PNG.sync.read(editorPng);
|
||||
const editorFirstPix = getFirstPixel(
|
||||
editorImage.data,
|
||||
editorImage.width,
|
||||
editorImage.height,
|
||||
start
|
||||
);
|
||||
|
||||
|
|
@ -3552,13 +3576,6 @@ describe("FreeText Editor", () => {
|
|||
);
|
||||
}
|
||||
|
||||
await page.waitForSelector("[data-annotation-id='998R'] canvas");
|
||||
let hidden = await page.$eval(
|
||||
"[data-annotation-id='998R'] canvas",
|
||||
el => getComputedStyle(el).display === "none"
|
||||
);
|
||||
expect(hidden).withContext(`In ${browserName}`).toBeTrue();
|
||||
|
||||
// Check we've now a div containing the text.
|
||||
await page.waitForSelector(
|
||||
"[data-annotation-id='998R'] div.annotationContent"
|
||||
|
|
@ -3571,6 +3588,24 @@ describe("FreeText Editor", () => {
|
|||
.withContext(`In ${browserName}`)
|
||||
.toEqual("Hello World and edited in Firefox");
|
||||
|
||||
// Check that the canvas has nothing drawn at the annotation position.
|
||||
await page.$eval(
|
||||
"[data-annotation-id='998R']",
|
||||
el => (el.hidden = true)
|
||||
);
|
||||
let editorPng = await page.screenshot({
|
||||
clip: editorRect,
|
||||
type: "png",
|
||||
});
|
||||
await page.$eval(
|
||||
"[data-annotation-id='998R']",
|
||||
el => (el.hidden = false)
|
||||
);
|
||||
let editorImage = PNG.sync.read(editorPng);
|
||||
expect(editorImage.data.every(x => x === 0xff))
|
||||
.withContext(`In ${browserName}`)
|
||||
.toBeTrue();
|
||||
|
||||
const oneToThirteen = Array.from(new Array(13).keys(), n => n + 2);
|
||||
for (const pageNumber of oneToThirteen) {
|
||||
await scrollIntoView(
|
||||
|
|
@ -3587,6 +3622,19 @@ describe("FreeText Editor", () => {
|
|||
await switchToFreeText(page, /* disable = */ true);
|
||||
|
||||
const thirteenToOne = Array.from(new Array(13).keys(), n => 13 - n);
|
||||
const handlePromise = await createPromise(page, resolve => {
|
||||
const callback = e => {
|
||||
if (e.source.id === 1) {
|
||||
window.PDFViewerApplication.eventBus.off(
|
||||
"pagerendered",
|
||||
callback
|
||||
);
|
||||
resolve();
|
||||
}
|
||||
};
|
||||
window.PDFViewerApplication.eventBus.on("pagerendered", callback);
|
||||
});
|
||||
|
||||
for (const pageNumber of thirteenToOne) {
|
||||
await scrollIntoView(
|
||||
page,
|
||||
|
|
@ -3594,12 +3642,16 @@ describe("FreeText Editor", () => {
|
|||
);
|
||||
}
|
||||
|
||||
await page.waitForSelector("[data-annotation-id='998R'] canvas");
|
||||
hidden = await page.$eval(
|
||||
"[data-annotation-id='998R'] canvas",
|
||||
el => getComputedStyle(el).display === "none"
|
||||
);
|
||||
expect(hidden).withContext(`In ${browserName}`).toBeFalse();
|
||||
await awaitPromise(handlePromise);
|
||||
|
||||
editorPng = await page.screenshot({
|
||||
clip: editorRect,
|
||||
type: "png",
|
||||
});
|
||||
editorImage = PNG.sync.read(editorPng);
|
||||
expect(editorImage.data.every(x => x === 0xff))
|
||||
.withContext(`In ${browserName}`)
|
||||
.toBeFalse();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -564,14 +564,14 @@ describe("Stamp Editor", () => {
|
|||
for (let i = 0; i < pages1.length; i++) {
|
||||
const [, page1] = pages1[i];
|
||||
await page1.bringToFront();
|
||||
await page1.click("#editorStamp");
|
||||
await switchToStamp(page1);
|
||||
|
||||
await copyImage(page1, "../images/firefox_logo.png", 0);
|
||||
await copy(page1);
|
||||
|
||||
const [, page2] = pages2[i];
|
||||
await page2.bringToFront();
|
||||
await page2.click("#editorStamp");
|
||||
await switchToStamp(page2);
|
||||
|
||||
await paste(page2);
|
||||
|
||||
|
|
|
|||
|
|
@ -447,11 +447,30 @@ function waitForAnnotationEditorLayer(page) {
|
|||
return createPromise(page, resolve => {
|
||||
window.PDFViewerApplication.eventBus.on(
|
||||
"annotationeditorlayerrendered",
|
||||
resolve
|
||||
resolve,
|
||||
{ once: true }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function waitForAnnotationModeChanged(page) {
|
||||
return createPromise(page, resolve => {
|
||||
window.PDFViewerApplication.eventBus.on(
|
||||
"annotationeditormodechanged",
|
||||
resolve,
|
||||
{ once: true }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function waitForPageRendered(page) {
|
||||
return createPromise(page, resolve => {
|
||||
window.PDFViewerApplication.eventBus.on("pagerendered", resolve, {
|
||||
once: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function scrollIntoView(page, selector) {
|
||||
const handle = await page.evaluateHandle(
|
||||
sel => [
|
||||
|
|
@ -695,8 +714,10 @@ export {
|
|||
serializeBitmapDimensions,
|
||||
switchToEditor,
|
||||
waitForAnnotationEditorLayer,
|
||||
waitForAnnotationModeChanged,
|
||||
waitForEntryInStorage,
|
||||
waitForEvent,
|
||||
waitForPageRendered,
|
||||
waitForSandboxTrip,
|
||||
waitForSelectedEditor,
|
||||
waitForSerialized,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue