From a7a5e98b7ed66283cbd616cc25281b8da3a98157 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Wed, 20 Jul 2022 14:21:30 +0200
Subject: [PATCH] [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            | 10 ++++++++--
 web/annotation_editor_layer_builder.css |  4 ----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js
index edb77fa7c..e906faa3f 100644
--- a/src/display/editor/editor.js
+++ b/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);
 
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 2a52a9144..4abd21cc5 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/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;