Merge pull request #15791 from calixteman/15789

[Editor] Take all the viewBox into account when computing the coordinates of an annotation in the page (fixes #15789)

src/display/editor/editor.js

@@ -68,8 +68,17 @@ class AnnotationEditor {
  this.div = null;
  this._uiManager = parameters.uiManager;
 
- this.rotation = this.parent.viewport.rotation;
- this.pageDimensions = this.parent.pageDimensions;
+ const {
+ rotation,
+ viewBox: [pageLLx, pageLLy, pageURx, pageURy],
+ } = this.parent.viewport;
+ this.rotation = rotation;
+ const pageWidth = pageURx - pageLLx;
+ const pageHeight = pageURy - pageLLy;
+
+ this.pageDimensions = [pageWidth, pageHeight];
+ this.pageTranslation = [pageLLx, pageLLy];
+
  const [width, height] = this.parentDimensions;
  this.x = parameters.x / width;
  this.y = parameters.y / height;
@@ -341,6 +350,7 @@ class AnnotationEditor {
  getRect(tx, ty) {
  const scale = this.parentScale;
  const [pageWidth, pageHeight] = this.pageDimensions;
+ const [pageX, pageY] = this.pageTranslation;
  const shiftX = tx / scale;
  const shiftY = ty / scale;
  const x = this.x * pageWidth;
@@ -351,31 +361,31 @@ class AnnotationEditor {
  switch (this.rotation) {
  case 0:
  return [
- x + shiftX,
- pageHeight - y - shiftY - height,
- x + shiftX + width,
- pageHeight - y - shiftY,
+ x + shiftX + pageX,
+ pageHeight - y - shiftY - height + pageY,
+ x + shiftX + width + pageX,
+ pageHeight - y - shiftY + pageY,
  ];
  case 90:
  return [
- x + shiftY,
- pageHeight - y + shiftX,
- x + shiftY + height,
- pageHeight - y + shiftX + width,
+ x + shiftY + pageX,
+ pageHeight - y + shiftX + pageY,
+ x + shiftY + height + pageX,
+ pageHeight - y + shiftX + width + pageY,
  ];
  case 180:
  return [
- x - shiftX - width,
- pageHeight - y + shiftY,
- x - shiftX,
- pageHeight - y + shiftY + height,
+ x - shiftX - width + pageX,
+ pageHeight - y + shiftY + pageY,
+ x - shiftX + pageX,
+ pageHeight - y + shiftY + height + pageY,
  ];
  case 270:
  return [
- x - shiftY - height,
- pageHeight - y - shiftX - width,
- x - shiftY,
- pageHeight - y - shiftX,
+ x - shiftY - height + pageX,
+ pageHeight - y - shiftX - width + pageY,
+ x - shiftY + pageX,
+ pageHeight - y - shiftX + pageY,
  ];
  default:
  throw new Error("Invalid rotation");

test/integration/freetext_editor_spec.js

@@ -547,24 +547,9 @@ describe("Editor", () => {
  await page.mouse.click(rect.x + 100, rect.y + 100);
  await page.type(`${getEditorSelector(currentId)} .internal`, data);
 
- const editorRect = await page.$eval(
- getEditorSelector(currentId),
- 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.keyboard.press("Escape");
+ await page.waitForTimeout(10);
 
  await waitForSelectedEditor(page, getEditorSelector(currentId));
  await waitForStorageEntries(page, currentId + 1);
@@ -646,4 +631,88 @@ describe("Editor", () => {
  );
  });
  });
+
+ describe("issue 15789", () => {
+ let pages;
+
+ beforeAll(async () => {
+ pages = await loadAndWait("issue15789.pdf", ".annotationEditorLayer");
+ pages = await Promise.all(
+ pages.map(async ([browserName, page]) => {
+ await page.select("#scaleSelect", "1");
+ return [browserName, page];
+ })
+ );
+ });
+
+ afterAll(async () => {
+ await closePages(pages);
+ });
+
+ it("must take the media box into account", async () => {
+ await Promise.all(
+ pages.map(async ([browserName, page]) => {
+ await page.click("#editorFreeText");
+ let currentId = 0;
+
+ for (let step = 0; step < 3; step++) {
+ const rect = await page.$eval(".annotationEditorLayer", el => {
+ // With Chrome something is wrong when serializing a DomRect,
+ // hence we extract the values and just return them.
+ const { x, y, width, height } = el.getBoundingClientRect();
+ return { x, y, width, height };
+ });
+
+ const data = `Hello ${step}`;
+ const x = rect.x + 0.1 * rect.width;
+ const y = rect.y + 0.1 * rect.height;
+ await page.mouse.click(x, y);
+ await page.type(`${getEditorSelector(currentId)} .internal`, data);
+
+ // Commit.
+ await page.keyboard.press("Escape");
+ await page.waitForTimeout(10);
+
+ await page.evaluate(() => {
+ document.getElementById("pageRotateCw").click();
+ });
+ currentId += 1;
+ await page.waitForTimeout(10);
+ }
+
+ const serialize = proprName =>
+ page.evaluate(
+ name =>
+ [
+ ...window.PDFViewerApplication.pdfDocument.annotationStorage.serializable.values(),
+ ].map(x => x[name]),
+ proprName
+ );
+
+ const rects = (await serialize("rect")).map(rect =>
+ rect.slice(0, 2).map(x => Math.floor(x))
+ );
+ const expected = [
+ [-28, 695],
+ [-38, -10],
+ [501, -20],
+ ];
+ // Dimensions aren't exactly the same from a platform to an other
+ // so we're a bit tolerant here with the numbers.
+ // Anyway the goal is to check that the bottom left corner of the
+ // media box is taken into account.
+ // The pdf has a media box equals to [-99 -99 612.0 792.0].
+ const diffs = rects.map(
+ (rect, i) =>
+ Math.abs(rect[0] - expected[i][0]) < 10 &&
+ Math.abs(rect[1] - expected[i][1]) < 10
+ );
+
+ expect(diffs)
+ .withContext(`In ${browserName}`)
+ .toEqual([true, true, true]);
+ })
+ );
+ });
+ });
 });

test/pdfs/.gitignore

@@ -559,3 +559,4 @@
 !bug1802888.pdf
 !issue15759.pdf
 !issue15753.pdf
+!issue15789.pdf