[Editor] Add a button to explicitly add an image (bug 1848108)

The main stamp button will be used to just enter in a add/edit image mode:
 - the user can add a new image in using the new button.
 - the user can edit an image in resizing, moving it.
In image mode, when the user clicks outside on the page but not on an editor,
then all the selected editors will be unselected.

src/display/editor/annotation_editor_layer.js

@@ -166,7 +166,10 @@ class AnnotationEditorLayer {
       }
     }
 
-    const editor = this.#createAndAddNewEditor({ offsetX: 0, offsetY: 0 });
+    const editor = this.#createAndAddNewEditor(
+      { offsetX: 0, offsetY: 0 },
+      /* isCentered = */ false
+    );
     editor.setInBackground();
   }
 
@@ -481,9 +484,10 @@ class AnnotationEditorLayer {
   /**
    * Create and add a new editor.
    * @param {PointerEvent} event
+   * @param {boolean} isCentered
    * @returns {AnnotationEditor}
    */
-  #createAndAddNewEditor(event) {
+  #createAndAddNewEditor(event, isCentered) {
     const id = this.getNextId();
     const editor = this.#createNewEditor({
       parent: this,
@@ -491,6 +495,7 @@ class AnnotationEditorLayer {
       x: event.offsetX,
       y: event.offsetY,
       uiManager: this.#uiManager,
+      isCentered,
     });
     if (editor) {
       this.add(editor);
@@ -499,6 +504,31 @@ class AnnotationEditorLayer {
     return editor;
   }
 
+  /**
+   * Create and add a new editor.
+   */
+  addNewEditor() {
+    const { x, y, width, height } = this.div.getBoundingClientRect();
+    const tlX = Math.max(0, x);
+    const tlY = Math.max(0, y);
+    const brX = Math.min(window.innerWidth, x + width);
+    const brY = Math.min(window.innerHeight, y + height);
+    const centerX = (tlX + brX) / 2 - x;
+    const centerY = (tlY + brY) / 2 - y;
+    const [offsetX, offsetY] =
+      this.viewport.rotation % 180 === 0
+        ? [centerX, centerY]
+        : [centerY, centerX];
+
+    this.#createAndAddNewEditor(
+      {
+        offsetX,
+        offsetY,
+      },
+      /* isCentered = */ true
+    );
+  }
+
   /**
    * Set the last selected editor.
    * @param {AnnotationEditor} editor
@@ -560,7 +590,12 @@ class AnnotationEditorLayer {
       return;
     }
 
-    this.#createAndAddNewEditor(event);
+    if (this.#uiManager.getMode() === AnnotationEditorType.STAMP) {
+      this.#uiManager.unselectAll();
+      return;
+    }
+
+    this.#createAndAddNewEditor(event, /* isCentered = */ false);
   }
 
   /**

src/display/editor/editor.js

@@ -48,6 +48,8 @@ class AnnotationEditor {
 
   #isInEditMode = false;
 
+  _initialOptions = Object.create(null);
+
   _uiManager = null;
 
   _focusEventsAllowed = true;
@@ -77,6 +79,7 @@ class AnnotationEditor {
     this._uiManager = parameters.uiManager;
     this.annotationElementId = null;
     this._willKeepAspectRatio = false;
+    this._initialOptions.isCentered = parameters.isCentered;
 
     const {
       rotation,
@@ -154,6 +157,29 @@ class AnnotationEditor {
     this.div?.classList.toggle("draggable", value);
   }
 
+  center() {
+    const [pageWidth, pageHeight] = this.pageDimensions;
+    switch (this.parentRotation) {
+      case 90:
+        this.x -= (this.height * pageHeight) / (pageWidth * 2);
+        this.y += (this.width * pageWidth) / (pageHeight * 2);
+        break;
+      case 180:
+        this.x += this.width / 2;
+        this.y += this.height / 2;
+        break;
+      case 270:
+        this.x += (this.height * pageHeight) / (pageWidth * 2);
+        this.y -= (this.width * pageWidth) / (pageHeight * 2);
+        break;
+      default:
+        this.x -= this.width / 2;
+        this.y -= this.height / 2;
+        break;
+    }
+    this.fixAndSetPosition();
+  }
+
   /**
    * Add some commands into the CommandManager (undo/redo stuff).
    * @param {Object} params

src/display/editor/freetext.js

@@ -363,6 +363,10 @@ class FreeTextEditor extends AnnotationEditor {
     }
     this.enableEditMode();
     this.editorDiv.focus();
+    if (this._initialOptions?.isCentered) {
+      this.center();
+    }
+    this._initialOptions = null;
   }
 
   /** @inheritdoc */

src/display/editor/stamp.js

@@ -290,7 +290,12 @@ class StampEditor extends AnnotationEditor {
     this.width = width / parentWidth;
     this.height = height / parentHeight;
     this.setDims(width, height);
-    this.fixAndSetPosition();
+    if (this._initialOptions?.isCentered) {
+      this.center();
+    } else {
+      this.fixAndSetPosition();
+    }
+    this._initialOptions = null;
     if (this.#resizeTimeoutId !== null) {
       clearTimeout(this.#resizeTimeoutId);
     }

src/display/editor/tools.js

@@ -18,6 +18,7 @@
 /** @typedef {import("./annotation_editor_layer.js").AnnotationEditorLayer} AnnotationEditorLayer */
 
 import {
+  AnnotationEditorParamsType,
   AnnotationEditorPrefix,
   AnnotationEditorType,
   FeatureTest,
@@ -1144,6 +1145,10 @@ class AnnotationEditorUIManager {
     if (!this.#editorTypes) {
       return;
     }
+    if (type === AnnotationEditorParamsType.CREATE) {
+      this.currentLayer.addNewEditor(type);
+      return;
+    }
 
     for (const editor of this.#selectedEditors) {
       editor.updateParams(type, value);

src/shared/util.js

@@ -78,6 +78,7 @@ const AnnotationEditorType = {
 
 const AnnotationEditorParamsType = {
   RESIZE: 1,
+  CREATE: 2,
   FREETEXT_SIZE: 11,
   FREETEXT_COLOR: 12,
   FREETEXT_OPACITY: 13,