[Editor] Fix the position in the page of a drawing after it has been moved with the keyboard

When a drawing was moved with arrow keys and then printed or saved, the drawing wasn't moved finally.
So the fix is just about calling onTranslated once the translation is done.

test/integration/freetext_editor_spec.mjs

@@ -40,6 +40,7 @@ import {
   kbSelectAll,
   kbUndo,
   loadAndWait,
+  moveEditor,
   paste,
   pasteFromClipboard,
   scrollIntoView,
@@ -48,7 +49,6 @@ import {
   unselectEditor,
   waitForAnnotationEditorLayer,
   waitForAnnotationModeChanged,
-  waitForEditorMovedInDOM,
   waitForSelectedEditor,
   waitForSerialized,
   waitForStorageEntries,
@@ -79,33 +79,6 @@ const commit = async page => {
 
 const switchToFreeText = switchToEditor.bind(null, "FreeText");
 
-const getXY = async (page, selector) => {
-  const rect = await getRect(page, selector);
-  return `${rect.x}::${rect.y}`;
-};
-
-const waitForPositionChange = (page, selector, xy) =>
-  page.waitForFunction(
-    (sel, currentXY) => {
-      const bbox = document.querySelector(sel).getBoundingClientRect();
-      return `${bbox.x}::${bbox.y}` !== currentXY;
-    },
-    {},
-    selector,
-    xy
-  );
-
-const moveEditor = async (page, selector, n, pressKey) => {
-  let xy = await getXY(page, selector);
-  for (let i = 0; i < n; i++) {
-    const handle = await waitForEditorMovedInDOM(page);
-    await pressKey();
-    await awaitPromise(handle);
-    await waitForPositionChange(page, selector, xy);
-    xy = await getXY(page, selector);
-  }
-};
-
 const cancelFocusIn = async (page, selector) => {
   page.evaluate(sel => {
     const el = document.querySelector(sel);

test/integration/ink_editor_spec.mjs

@@ -27,6 +27,7 @@ import {
   kbSelectAll,
   kbUndo,
   loadAndWait,
+  moveEditor,
   scrollIntoView,
   selectEditor,
   switchToEditor,
@@ -142,6 +143,50 @@ describe("Ink Editor", () => {
         })
       );
     });
+
+    it("must draw and move with the keyboard", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToInk(page);
+
+          const rect = await getRect(page, ".annotationEditorLayer");
+
+          const x = rect.x + 100;
+          const y = rect.y + 100;
+          const clickHandle = await waitForPointerUp(page);
+          await page.mouse.move(x, y);
+          await page.mouse.down();
+          await page.mouse.move(x + 50, y + 50);
+          await page.mouse.up();
+          await awaitPromise(clickHandle);
+
+          await commit(page);
+
+          const editorSelector = getEditorSelector(0);
+          await page.waitForSelector(editorSelector);
+          const rectBefore = (await getSerialized(page, s => s.rect))[0];
+
+          const N = 20;
+          await moveEditor(page, editorSelector, N, () =>
+            page.keyboard.press("ArrowDown")
+          );
+          const rectAfter = (await getSerialized(page, s => s.rect))[0];
+
+          expect(Math.abs(rectBefore[0] - rectAfter[0]))
+            .withContext(`In ${browserName}`)
+            .toBeLessThan(1e-2);
+          expect(Math.abs(rectBefore[1] - N - rectAfter[1]))
+            .withContext(`In ${browserName}`)
+            .toBeLessThan(1e-2);
+          expect(Math.abs(rectBefore[2] - rectAfter[2]))
+            .withContext(`In ${browserName}`)
+            .toBeLessThan(1e-2);
+          expect(Math.abs(rectBefore[3] - N - rectAfter[3]))
+            .withContext(`In ${browserName}`)
+            .toBeLessThan(1e-2);
+        })
+      );
+    });
   });
 
   describe("with a rotated pdf", () => {

test/integration/test_utils.mjs

@@ -849,6 +849,34 @@ async function cleanupEditing(pages, switcher) {
   }
 }
 
+async function getXY(page, selector) {
+  const rect = await getRect(page, selector);
+  return `${rect.x}::${rect.y}`;
+}
+
+function waitForPositionChange(page, selector, xy) {
+  return page.waitForFunction(
+    (sel, currentXY) => {
+      const bbox = document.querySelector(sel).getBoundingClientRect();
+      return `${bbox.x}::${bbox.y}` !== currentXY;
+    },
+    {},
+    selector,
+    xy
+  );
+}
+
+async function moveEditor(page, selector, n, pressKey) {
+  let xy = await getXY(page, selector);
+  for (let i = 0; i < n; i++) {
+    const handle = await waitForEditorMovedInDOM(page);
+    await pressKey();
+    await awaitPromise(handle);
+    await waitForPositionChange(page, selector, xy);
+    xy = await getXY(page, selector);
+  }
+}
+
 export {
   applyFunctionToEditor,
   awaitPromise,
@@ -893,6 +921,7 @@ export {
   kbUndo,
   loadAndWait,
   mockClipboard,
+  moveEditor,
   paste,
   pasteFromClipboard,
   scrollIntoView,