Merge pull request #15196 from calixteman/zindex

[Editor] Add a z-index in order to draw them in the right order

src/display/editor/editor.js

@@ -37,8 +37,12 @@ import { bindEvents, ColorManager } from "./tools.js";
 class AnnotationEditor {
   #isInEditMode = false;
 
+  #zIndex = AnnotationEditor._zIndex++;
+
   static _colorManager = new ColorManager();
 
+  static _zIndex = 1;
+
   /**
    * @param {AnnotationEditorParameters} parameters
    */
@@ -74,14 +78,14 @@ class AnnotationEditor {
    * This editor will be behind the others.
    */
   setInBackground() {
-    this.div.classList.add("background");
+    this.div.style.zIndex = 0;
   }
 
   /**
    * This editor will be in the foreground.
    */
   setInForeground() {
-    this.div.classList.remove("background");
+    this.div.style.zIndex = this.#zIndex;
   }
 
   /**
@@ -222,6 +226,8 @@ class AnnotationEditor {
     this.div.setAttribute("id", this.id);
     this.div.tabIndex = 0;
 
+    this.setInForeground();
+
     const [tx, ty] = this.getInitialTranslation();
     this.translate(tx, ty);
 

web/annotation_editor_layer_builder.css

@@ -123,10 +123,6 @@
   cursor: auto;
 }
 
-.annotationEditorLayer .background {
-  z-index: 0;
-}
-
 .annotationEditorLayer .inkEditor:focus {
   outline: var(--focus-outline);
   resize: both;