Merge pull request #15184 from calixteman/rm_allowclick

[Editor] Simplify the way to create an editor on click

Author: calixteman

src/display/editor/annotation_editor_layer.js

@@ -40,8 +40,12 @@ import { InkEditor } from "./ink.js";
  * Manage all the different editors on a page.
  */
 class AnnotationEditorLayer {
+  #allowClick = false;
+
   #boundClick;
 
+  #boundMousedown;
+
   #editors = new Map();
 
   #isCleaningUp = false;
@@ -92,6 +96,7 @@ class AnnotationEditorLayer {
     this.pageIndex = options.pageIndex;
     this.div = options.div;
     this.#boundClick = this.click.bind(this);
+    this.#boundMousedown = this.mousedown.bind(this);
 
     for (const editor of this.#uiManager.getEditors(options.pageIndex)) {
       this.add(editor);
@@ -103,7 +108,6 @@ class AnnotationEditorLayer {
   /**
    * Update the toolbar if it's required to reflect the tool currently used.
    * @param {number} mode
-   * @returns {undefined}
    */
   updateToolbar(mode) {
     this.#uiManager.updateToolbar(mode);
@@ -118,6 +122,9 @@ class AnnotationEditorLayer {
     if (mode === AnnotationEditorType.INK) {
       // We always want to an ink editor ready to draw in.
       this.addInkEditorIfNeeded(false);
+      this.disableClick();
+    } else {
+      this.enableClick();
     }
     this.setActiveEditor(null);
   }
@@ -177,7 +184,6 @@ class AnnotationEditorLayer {
 
   /**
    * Suppress the selected editor or all editors.
-   * @returns {undefined}
    */
   delete() {
     this.#uiManager.delete();
@@ -199,7 +205,6 @@ class AnnotationEditorLayer {
 
   /**
    * Paste a previously copied editor.
-   * @returns {undefined}
    */
   paste() {
     this.#uiManager.paste();
@@ -250,16 +255,21 @@ class AnnotationEditorLayer {
       currentActive.commitOrRemove();
     }
 
-    this.#uiManager.allowClick =
-      this.#uiManager.getMode() === AnnotationEditorType.INK;
     if (editor) {
       this.unselectAll();
-      this.div.removeEventListener("click", this.#boundClick);
-    } else {
-      this.div.addEventListener("click", this.#boundClick);
     }
   }
 
+  enableClick() {
+    this.div.addEventListener("mousedown", this.#boundMousedown);
+    this.div.addEventListener("click", this.#boundClick);
+  }
+
+  disableClick() {
+    this.div.removeEventListener("mousedown", this.#boundMousedown);
+    this.div.removeEventListener("click", this.#boundClick);
+  }
+
   attach(editor) {
     this.#editors.set(editor.id, editor);
   }
@@ -283,7 +293,6 @@ class AnnotationEditorLayer {
     editor.isAttachedToDOM = false;
     if (this.#uiManager.isActive(editor) || this.#editors.size === 0) {
       this.setActiveEditor(null);
-      this.#uiManager.allowClick = true;
     }
 
     if (!this.#isCleaningUp) {
@@ -295,7 +304,6 @@ class AnnotationEditorLayer {
    * An editor can have a different parent, for example after having
    * being dragged and droped from a page to another.
    * @param {AnnotationEditor} editor
-   * @returns {undefined}
    */
   #changeParent(editor) {
     if (editor.parent === this) {
@@ -423,21 +431,35 @@ class AnnotationEditorLayer {
   /**
    * Mouseclick callback.
    * @param {MouseEvent} event
-   * @returns {undefined}
    */
   click(event) {
-    if (!this.#uiManager.allowClick) {
-      this.#uiManager.allowClick = true;
+    if (event.target !== this.div) {
+      return;
+    }
+
+    if (!this.#allowClick) {
+      this.#allowClick = true;
       return;
     }
 
     this.#createAndAddNewEditor(event);
   }
 
+  /**
+   * Mousedown callback.
+   * @param {MouseEvent} event
+   */
+  mousedown(event) {
+    if (event.target !== this.div) {
+      return;
+    }
+
+    this.#allowClick = !this.#uiManager.hasActive();
+  }
+
   /**
    * Drag callback.
    * @param {DragEvent} event
-   * @returns {undefined}
    */
   drop(event) {
     const id = event.dataTransfer.getData("text/plain");
@@ -510,7 +532,6 @@ class AnnotationEditorLayer {
   render(parameters) {
     this.viewport = parameters.viewport;
     bindEvents(this, this.div, ["dragover", "drop", "keydown"]);
-    this.div.addEventListener("click", this.#boundClick);
     this.setDimensions();
     this.updateMode();
   }

src/display/editor/tools.js

@@ -393,8 +393,6 @@ class AnnotationEditorUIManager {
 
   #allLayers = new Map();
 
-  #allowClick = true;
-
   #clipboardManager = new ClipboardManager();
 
   #commandManager = new CommandManager();
@@ -744,30 +742,13 @@ class AnnotationEditorUIManager {
     return false;
   }
 
-  /**
-   * When set to true a click on the current layer will trigger
-   * an editor creation.
-   * @return {boolean}
-   */
-  get allowClick() {
-    return this.#allowClick;
-  }
-
-  /**
-   * @param {boolean} allow
-   */
-  set allowClick(allow) {
-    this.#allowClick = allow;
-  }
-
   /**
    * Unselect the current editor.
    */
   unselect() {
     if (this.#activeEditor) {
       this.#activeEditor.parent.setActiveEditor(null);
     }
-    this.#allowClick = true;
   }
 
   /**