Merge pull request #15970 from calixteman/editor_invisible

[Editor] Make the annotation editor layer invisible when disabled and empty
mozilla · Feb 1, 2023 · 1bdee0b · 1bdee0b
2 parents 2d87a2e + 1852819
commit 1bdee0b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/src/display/editor/annotation_editor_layer.js b/src/display/editor/annotation_editor_layer.js
@@ -84,6 +84,10 @@ class AnnotationEditorLayer {
     this.#uiManager.addLayer(this);
   }
 
+  get isEmpty() {
+    return this.#editors.size === 0;
+  }
+
   /**
    * Update the toolbar if it's required to reflect the tool currently used.
    * @param {number} mode
@@ -107,11 +111,17 @@ class AnnotationEditorLayer {
     }
     this.#uiManager.unselectAll();
 
-    this.div.classList.toggle(
-      "freeTextEditing",
-      mode === AnnotationEditorType.FREETEXT
-    );
-    this.div.classList.toggle("inkEditing", mode === AnnotationEditorType.INK);
+    if (mode !== AnnotationEditorType.NONE) {
+      this.div.classList.toggle(
+        "freeTextEditing",
+        mode === AnnotationEditorType.FREETEXT
+      );
+      this.div.classList.toggle(
+        "inkEditing",
+        mode === AnnotationEditorType.INK
+      );
+      this.div.hidden = false;
+    }
   }
 
   addInkEditorIfNeeded(isCommitting) {
@@ -172,6 +182,10 @@ class AnnotationEditorLayer {
     for (const editor of this.#editors.values()) {
       editor.disableEditing();
     }
+    this.#cleanup();
+    if (this.isEmpty) {
+      this.div.hidden = true;
+    }
   }
 
   /**

diff --git a/web/annotation_editor_layer_builder.js b/web/annotation_editor_layer_builder.js
@@ -75,6 +75,7 @@ class AnnotationEditorLayerBuilder {
     const div = (this.div = document.createElement("div"));
     div.className = "annotationEditorLayer";
     div.tabIndex = 0;
+    div.hidden = true;
     this.pageDiv.append(div);
 
     this.annotationEditorLayer = new AnnotationEditorLayer({
@@ -94,6 +95,7 @@ class AnnotationEditorLayerBuilder {
     };
 
     this.annotationEditorLayer.render(parameters);
+    this.show();
   }
 
   cancel() {
@@ -115,7 +117,7 @@ class AnnotationEditorLayerBuilder {
   }
 
   show() {
-    if (!this.div) {
+    if (!this.div || this.annotationEditorLayer.isEmpty) {
       return;
     }
     this.div.hidden = false;