[Editor] Shift the signature editor when pasted

The idea is to avoid to have the pasted editor hidding the copied one:
the user could think that nothing happened.
So the top-left corner of the pasted one is moved to the bottom-right corner of the copied one.

src/display/editor/draw.js

@@ -628,6 +628,12 @@ class DrawingEditor extends AnnotationEditor {
       return this.div;
     }
 
+    let baseX, baseY;
+    if (this._isCopy) {
+      baseX = this.x;
+      baseY = this.y;
+    }
+
     const div = super.render();
     div.classList.add("draw");
 
@@ -640,6 +646,10 @@ class DrawingEditor extends AnnotationEditor {
     this._uiManager.addShouldRescale(this);
     this.disableEditing();
 
+    if (this._isCopy) {
+      this._moveAfterPaste(baseX, baseY);
+    }
+
     return div;
   }
 

src/display/editor/editor.js

@@ -85,6 +85,8 @@ class AnnotationEditor {
 
   #touchManager = null;
 
+  _isCopy = false;
+
   _editToolbar = null;
 
   _initialOptions = Object.create(null);
@@ -442,6 +444,17 @@ class AnnotationEditor {
     this.fixAndSetPosition();
   }
 
+  _moveAfterPaste(baseX, baseY) {
+    const [parentWidth, parentHeight] = this.parentDimensions;
+    this.setAt(
+      baseX * parentWidth,
+      baseY * parentHeight,
+      this.width * parentWidth,
+      this.height * parentHeight
+    );
+    this._onTranslated();
+  }
+
   #translate([width, height], x, y) {
     [x, y] = this.screenToPageTranslation(x, y);
 
@@ -1597,6 +1610,7 @@ class AnnotationEditor {
     });
     editor.rotation = data.rotation;
     editor.#accessibilityData = data.accessibilityData;
+    editor._isCopy = data.isCopy || false;
 
     const [pageWidth, pageHeight] = editor.pageDimensions;
     const [x, y, width, height] = editor.getRectInCurrentCoords(

src/display/editor/freetext.js

@@ -553,7 +553,7 @@ class FreeTextEditor extends AnnotationEditor {
     }
 
     let baseX, baseY;
-    if (this.width) {
+    if (this._isCopy || this.annotationElementId) {
       baseX = this.x;
       baseY = this.y;
     }
@@ -581,7 +581,7 @@ class FreeTextEditor extends AnnotationEditor {
 
     bindEvents(this, this.div, ["dblclick", "keydown"]);
 
-    if (this.width) {
+    if (this._isCopy || this.annotationElementId) {
       // This editor was created in using copy (ctrl+c).
       const [parentWidth, parentHeight] = this.parentDimensions;
       if (this.annotationElementId) {
@@ -627,12 +627,7 @@ class FreeTextEditor extends AnnotationEditor {
         }
         this.setAt(posX * parentWidth, posY * parentHeight, tx, ty);
       } else {
-        this.setAt(
-          baseX * parentWidth,
-          baseY * parentHeight,
-          this.width * parentWidth,
-          this.height * parentHeight
-        );
+        this._moveAfterPaste(baseX, baseY);
       }
 
       this.#setContent();
@@ -847,6 +842,7 @@ class FreeTextEditor extends AnnotationEditor {
     if (isForCopying) {
       // Don't add the id when copying because the pasted editor mustn't be
       // linked to an existing annotation.
+      serialized.isCopy = true;
       return serialized;
     }
 

src/display/editor/ink.js

@@ -246,6 +246,7 @@ class InkEditor extends DrawingEditor {
     };
 
     if (isForCopying) {
+      serialized.isCopy = true;
       return serialized;
     }
 

src/display/editor/signature.js

@@ -130,6 +130,15 @@ class SignatureEditor extends DrawingEditor {
       return this.div;
     }
 
+    let baseX, baseY;
+    const { _isCopy } = this;
+    if (_isCopy) {
+      // No need to adjust the position when rendering in DrawingEditor.
+      this._isCopy = false;
+      baseX = this.x;
+      baseY = this.y;
+    }
+
     super.render();
     this.div.setAttribute("role", "figure");
 
@@ -163,6 +172,11 @@ class SignatureEditor extends DrawingEditor {
       }
     }
 
+    if (_isCopy) {
+      this._isCopy = true;
+      this._moveAfterPaste(baseX, baseY);
+    }
+
     return this.div;
   }
 
@@ -348,6 +362,7 @@ class SignatureEditor extends DrawingEditor {
     if (isForCopying) {
       serialized.paths = { lines, points };
       serialized.uuid = this.#signatureUUID;
+      serialized.isCopy = true;
     } else {
       serialized.lines = lines;
     }

src/display/editor/stamp.js

@@ -346,7 +346,7 @@ class StampEditor extends AnnotationEditor {
     }
 
     let baseX, baseY;
-    if (this.width) {
+    if (this._isCopy) {
       baseX = this.x;
       baseY = this.y;
     }
@@ -365,15 +365,8 @@ class StampEditor extends AnnotationEditor {
       }
     }
 
-    if (this.width && !this.annotationElementId) {
-      // This editor was created in using copy (ctrl+c).
-      const [parentWidth, parentHeight] = this.parentDimensions;
-      this.setAt(
-        baseX * parentWidth,
-        baseY * parentHeight,
-        this.width * parentWidth,
-        this.height * parentHeight
-      );
+    if (this._isCopy) {
+      this._moveAfterPaste(baseX, baseY);
     }
 
     this._uiManager.addShouldRescale(this);
@@ -854,6 +847,7 @@ class StampEditor extends AnnotationEditor {
       // hence we serialize the bitmap to a data url.
       serialized.bitmapUrl = this.#serializeBitmap(/* toUrl = */ true);
       serialized.accessibilityData = this.serializeAltText(true);
+      serialized.isCopy = true;
       return serialized;
     }
 

test/integration/signature_editor_spec.mjs

@@ -348,13 +348,7 @@ describe("Signature Editor", () => {
 
           const editorSelector = getEditorSelector(0);
           await page.waitForSelector(editorSelector, { visible: true });
-          await page.waitForSelector(
-            `.canvasWrapper > svg use[href="#path_p1_0"]`,
-            { visible: true }
-          );
-          const originalPath = await page.$eval("#path_p1_0", el =>
-            el.getAttribute("d")
-          );
+          const originalRect = await getRect(page, editorSelector);
           const originalDescription = await page.$eval(
             `${editorSelector} .altText.editDescription`,
             el => el.title
@@ -365,21 +359,15 @@ describe("Signature Editor", () => {
 
           const pastedEditorSelector = getEditorSelector(1);
           await page.waitForSelector(pastedEditorSelector, { visible: true });
-          await page.waitForSelector(
-            `.canvasWrapper > svg use[href="#path_p1_1"]`,
-            { visible: true }
-          );
-          const pastedPath = await page.$eval("#path_p1_1", el =>
-            el.getAttribute("d")
-          );
+          const pastedRect = await getRect(page, pastedEditorSelector);
           const pastedDescription = await page.$eval(
             `${pastedEditorSelector} .altText.editDescription`,
             el => el.title
           );
 
-          expect(pastedPath)
+          expect(pastedRect)
             .withContext(`In ${browserName}`)
-            .toEqual(originalPath);
+            .not.toEqual(originalRect);
           expect(pastedDescription)
             .withContext(`In ${browserName}`)
             .toEqual(originalDescription);