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

The elements in the annotationEditor layer are rearranged to make them
more accessible, but we must draw them in the order they have been created,
hence this patch adds a z-index to the editors.

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;