From 4f6fa35a28fdba805d17205392bed244af455f48 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Thu, 28 Sep 2023 15:09:50 +0200
Subject: [PATCH] [Editor] Disable pointer events in the parent layer while an
 editor is resized

---
 src/display/editor/annotation_editor_layer.js | 8 ++++++--
 src/display/editor/editor.js                  | 2 ++
 web/annotation_editor_layer_builder.css       | 4 ++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/display/editor/annotation_editor_layer.js b/src/display/editor/annotation_editor_layer.js
index aa3acc4bf..2c5df758f 100644
--- a/src/display/editor/annotation_editor_layer.js
+++ b/src/display/editor/annotation_editor_layer.js
@@ -193,12 +193,16 @@ class AnnotationEditorLayer {
     this.#uiManager.addCommands(params);
   }
 
+  togglePointerEvents(enabled = false) {
+    this.div.classList.toggle("disabled", !enabled);
+  }
+
   /**
    * Enable pointer events on the main div in order to enable
    * editor creation.
    */
   enable() {
-    this.div.style.pointerEvents = "auto";
+    this.togglePointerEvents(true);
     const annotationElementIds = new Set();
     for (const editor of this.#editors.values()) {
       editor.enableEditing();
@@ -235,7 +239,7 @@ class AnnotationEditorLayer {
    */
   disable() {
     this.#isDisabling = true;
-    this.div.style.pointerEvents = "none";
+    this.togglePointerEvents(false);
     const hiddenAnnotationIds = new Set();
     for (const editor of this.#editors.values()) {
       editor.disableEditing();
diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js
index 75dc833c6..1adcf2425 100644
--- a/src/display/editor/editor.js
+++ b/src/display/editor/editor.js
@@ -628,6 +628,7 @@ class AnnotationEditor {
     const savedDraggable = this._isDraggable;
     this._isDraggable = false;
     const pointerMoveOptions = { passive: true, capture: true };
+    this.parent.togglePointerEvents(false);
     window.addEventListener(
       "pointermove",
       boundResizerPointermove,
@@ -643,6 +644,7 @@ class AnnotationEditor {
       window.getComputedStyle(event.target).cursor;
 
     const pointerUpCallback = () => {
+      this.parent.togglePointerEvents(true);
       this.#toggleAltTextButton(true);
       this._isDraggable = savedDraggable;
       window.removeEventListener("pointerup", pointerUpCallback);
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 3231cf5db..ef2810cb5 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -121,6 +121,10 @@
   height: 100%;
 }
 
+.annotationEditorLayer.disabled {
+  pointer-events: none;
+}
+
 .annotationEditorLayer.freetextEditing {
   cursor: var(--editorFreeText-editing-cursor);
 }