vibe-editor 0.0.0 → 0.0.1

package/src/scripts/js/gui/Annotations.js

@@ -3,27 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const constants_1 = require("../constants");
 const random_1 = require("../utils/random");
 const AnnotationChangeHandler_1 = require("../handlers/AnnotationChangeHandler");
-const CustomAnnotationShapeDrawer_1 = require("../handlers/CustomAnnotationShapeDrawer");
 const cq = require("../utils/convenienceQueries");
 const coordinates = require("../utils/coordinates");
 class Annotations {
     constructor(containerId) {
+        this.clickHarmonyBtnHandler = (function clickHarmonyBtnHandler(e) {
+            //e.preventDefault()
+            this.removeTextListeners();
+            e.target.dispatchEvent(new Event("annotationButtonClicked"));
+        }).bind(this);
+        this.clickAnnotTextHandler = (function clickAnnotTextHandler(e) {
+            //e.preventDefault()
+            this.resetTextListeners();
+            e.target.dispatchEvent(new Event("annotationButtonClicked"));
+        }).bind(this);
         ////HANDLERS////
         this.clickHandler = (function clickHandler(e) {
-            e.preventDefault();
-            if (!this.annotationCanvas.classList.contains("front")) {
-                this.setToFront();
-            }
-            else {
-                this.setToBack();
-            }
+            //e.preventDefault()
+            // if (!this.annotationCanvas.classList.contains("front")) {
+            //     this.setToFront()
+            // } else {
+            //     this.setToBack()
+            // }
         }).bind(this);
         this.createAnnotationHandler = (function createAnnotationHandler(e) {
             var _a;
             var t = e.target;
-            if ((_a = t.closest(".vseContainer")) === null || _a === void 0 ? void 0 : _a.classList.contains("clickmode"))
+            if ((_a = t.closest(".vibeContainer")) === null || _a === void 0 ? void 0 : _a.classList.contains("clickmode"))
                 return; // creation should only be possible when annotation tab is on
-            var selectedAnnotations = this.interactionOverlay.querySelectorAll("#annotationCanvas .selected");
+            var selectedAnnotations = cq.getInteractOverlay(this.containerId).querySelectorAll("#annotationCanvas .selected");
             if (selectedAnnotations.length === 0) {
                 this.createAnnotation(e);
             }
@@ -40,11 +48,11 @@ class Annotations {
             if (!cq.hasActiveElement(this.containerId)) {
                 return;
             }
-            var canvasClone = this.interactionOverlay.querySelector("#annotationCanvas").cloneNode(true);
+            var canvasClone = cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas").cloneNode(true);
             var listClone = this.container.querySelector("#annotList").cloneNode(true);
             this.annotList = this.container.querySelector("#annotList");
             this.undoStacks.push([canvasClone, listClone]);
-            this.annotationCanvas = this.interactionOverlay.querySelector("#annotationCanvas");
+            this.annotationCanvas = cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas");
         }).bind(this);
         this.updateRedoStacks = (function updateRedoStacks(e) {
             if (!cq.hasActiveElement(this.containerId)) {
@@ -62,6 +70,7 @@ class Annotations {
             var target = e.target;
             target.setAttribute("contenteditable", "true");
             target.focus();
+            console.log("activeElement", document.activeElement);
             this.annotationChangeHandler.removeListeners();
         }).bind(this);
         /**
@@ -74,11 +83,11 @@ class Annotations {
             }
             var isValidKey = ["Delete", "Backspace"].some(code => e.code === code);
             //var isInAnnotMode = this.container.classList.contains("annotMode")
-            var hasEditableElement = this.interactionOverlay.querySelectorAll(".selected [contenteditable=true]").length > 0;
+            var hasEditableElement = cq.getInteractOverlay(this.containerId).querySelectorAll(".selected [contenteditable=true]").length > 0;
             var listHasFocus = Array.from(this.container.querySelectorAll("#annotList > *")).some(le => le === document.activeElement);
             //if(isValidKey && isInAnnotMode && !hasEditableElement && !listHasFocus){
             if (isValidKey && !hasEditableElement && !listHasFocus) {
-                this.interactionOverlay.querySelectorAll("#annotationCanvas .selected").forEach(el => {
+                cq.getInteractOverlay(this.containerId).querySelectorAll("#annotationCanvas .selected").forEach(el => {
                     if (el.closest("g") !== null) {
                         el.closest("g").remove();
                     }
@@ -86,16 +95,16 @@ class Annotations {
                         el.remove();
                     }
                 });
-                this.interactionOverlay.dispatchEvent(new Event("annotChanged"));
-                this.interactionOverlay.dispatchEvent(new Event("annotationCanvasChanged"));
+                cq.getInteractOverlay(this.containerId).dispatchEvent(new Event("annotChanged"));
+                cq.getInteractOverlay(this.containerId).dispatchEvent(new Event("annotationCanvasChanged"));
             }
         }).bind(this);
         this.submitLabelHandler = (function submitHandler(e) {
             var target = e.target;
             if ((e.key === "Enter" || e.key === "Escape")) {
                 target.blur();
-                this.interactionOverlay.dispatchEvent(new Event("annotChanged"));
-                this.interactionOverlay.dispatchEvent(new Event("annotationCanvasChanged"));
+                cq.getInteractOverlay(this.containerId).dispatchEvent(new Event("annotChanged"));
+                cq.getInteractOverlay(this.containerId).dispatchEvent(new Event("annotationCanvasChanged"));
             }
         }).bind(this);
         this.setContainerId(containerId);
@@ -103,25 +112,29 @@ class Annotations {
         this.annotations = new Array();
     }
     addCanvas() {
-        this.interactionOverlay = cq.getInteractOverlay(this.containerId);
-        this.rootBBox = this.interactionOverlay.getBoundingClientRect(); //this.vrvSVG.getBoundingClientRect()
+        var _a;
+        //cq.getInteractOverlay(this.containerId) = cq.getInteractOverlay(this.containerId)
+        this.rootBBox = cq.getInteractOverlay(this.containerId).getBoundingClientRect(); //this.vrvSVG.getBoundingClientRect()
         var rootWidth = this.rootBBox.width.toString();
         var rootHeigth = this.rootBBox.height.toString();
-        var vb = this.interactionOverlay.getAttribute("viewBox"); //this.vrvSVG.getAttribute("viewBox")
-        if (this.annotationCanvas == undefined) {
+        var vb = cq.getInteractOverlay(this.containerId).getAttribute("viewBox"); //this.vrvSVG.getAttribute("viewBox")
+        this.annotationCanvas = (_a = cq.getInteractOverlay(this.containerId)) === null || _a === void 0 ? void 0 : _a.querySelector("#annotationCanvas");
+        if (!this.annotationCanvas) {
             this.annotationCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
             this.annotationCanvas.setAttribute("id", "annotationCanvas");
             this.annotationCanvas.classList.add("canvas");
             //this.annotationCanvas.classList.add("back")
             //this.annotationCanvas.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "))
         }
-        this.annotationCanvas.setAttribute("viewBox", vb);
-        if (this.annotationCanvas.classList.contains("front")) {
-            this.interactionOverlay.insertBefore(this.annotationCanvas, this.interactionOverlay.lastChild.nextSibling);
-        }
-        else {
-            this.interactionOverlay.insertBefore(this.annotationCanvas, this.interactionOverlay.firstChild);
-        }
+        //this.annotationCanvas.setAttribute("viewBox", vb)
+        // if (this.annotationCanvas.classList.contains("front")) {
+        cq.getInteractOverlay(this.containerId).insertBefore(this.annotationCanvas, cq.getInteractOverlay(this.containerId).lastChild.nextSibling);
+        // } 
+        // else {
+        //     cq.getInteractOverlay(this.containerId).insertBefore(this.annotationCanvas, cq.getInteractOverlay(this.containerId).firstChild)
+        // }
+        this.updateLinkedTexts();
+        return this;
     }
     setMenuClickHandler() {
         //this.container.querySelector("#activateAnnot")?.addEventListener("click", this.clickHandler)
@@ -129,24 +142,23 @@ class Annotations {
     }
     setListeners() {
         this.resetTextListeners();
-        this.customAnnotationDrawer = new CustomAnnotationShapeDrawer_1.default(this.containerId);
-        this.customAnnotationDrawer.setUpdateCallback(this.resetTextListeners.bind(this));
-        var harmonyButton = this.container.querySelector("#harmonyAnnotButton");
+        // this.customAnnotationDrawer = new CustomAnnotationShapeDrawer(this.containerId)
+        // this.customAnnotationDrawer.setUpdateCallback(this.resetTextListeners.bind(this))
+        var harmonyButton = cq.getContainer(this.containerId).querySelector("#harmonyAnnotButton");
         var that = this;
-        this.container.querySelectorAll("#staticTextButton, #linkedAnnotButton").forEach(b => {
-            b.addEventListener("click", function () {
-                that.setToFront();
-                that.resetTextListeners();
-                b.dispatchEvent(new Event("annotationButtonClicked"));
-            });
-        });
-        harmonyButton.addEventListener("click", function () {
-            that.removeTextListeners();
-            harmonyButton.dispatchEvent(new Event("annotationButtonClicked"));
+        cq.getContainer(this.containerId).querySelectorAll(".annotText").forEach(b => {
+            b.addEventListener("click", this.clickAnnotTextHandler);
         });
+        harmonyButton === null || harmonyButton === void 0 ? void 0 : harmonyButton.addEventListener("click", this.clickHarmonyBtnHandler);
+        return this;
     }
     removeListeners() {
         this.removeTextListeners();
+        var harmonyButton = cq.getContainer(this.containerId).querySelector("#harmonyAnnotButton");
+        cq.getContainer(this.containerId).querySelectorAll(".annotText").forEach(b => {
+            b.removeEventListener("click", this.clickAnnotTextHandler);
+        });
+        harmonyButton === null || harmonyButton === void 0 ? void 0 : harmonyButton.removeEventListener("click", this.clickHarmonyBtnHandler);
     }
     setTextListeners() {
         // this.customAnnotationDrawer = new CustomAnnotationShapeDrawer(this.containerId)
@@ -158,20 +170,31 @@ class Annotations {
             .setAnnotations(this.annotations)
             .update()
             .resetListeners();
-        this.interactionOverlay.addEventListener("dblclick", this.createAnnotationHandler);
+        cq.getInteractOverlay(this.containerId).addEventListener("dblclick", this.createAnnotationHandler);
         var that = this;
-        this.interactionOverlay.querySelectorAll(".annotDiv").forEach(ad => {
+        cq.getInteractOverlay(this.containerId).querySelectorAll(".annotDiv").forEach(ad => {
             ad.addEventListener("click", this.selectHandler);
             ad.addEventListener("dblclick", this.activateEditHandler);
             ad.addEventListener("focus", function () {
-                that.musicPlayer.removePlayListener();
+                var _a;
+                (_a = that.musicPlayer) === null || _a === void 0 ? void 0 : _a.removePlayListener();
             });
             ad.addEventListener("blur", function () {
-                that.musicPlayer.setPlayListener();
+                var _a;
+                ad.closest("svg").classList.remove("selected");
+                ad.setAttribute("contenteditable", "false");
+                cq.getInteractOverlay(that.containerId).querySelectorAll(`#${ad.closest("g").id} .lineDragRect`).forEach(ldr => ldr.remove());
+                (_a = that.musicPlayer) === null || _a === void 0 ? void 0 : _a.setPlayListener();
+            });
+            ad.addEventListener("mouseenter", function () {
+                cq.getContainer(that.containerId).classList.add("annotMode");
+            });
+            ad.addEventListener("mouseleave", function () {
+                cq.getContainer(that.containerId).classList.remove("annotMode");
             });
             ad.addEventListener("keydown", this.submitLabelHandler);
         });
-        this.interactionOverlay.querySelectorAll(".customAnnotShape").forEach(cas => {
+        cq.getInteractOverlay(this.containerId).querySelectorAll(".customAnnotShape").forEach(cas => {
             cas.addEventListener("dblclick", this.selectHandler);
         });
         document.addEventListener("keydown", this.deleteHandler);
@@ -183,16 +206,16 @@ class Annotations {
         var _a;
         //this.container.querySelector("#activateAnnot").removeEventListener("click", this.clickHandler)
         this.setMenuClickHandler();
-        this.interactionOverlay.removeEventListener("dblclick", this.createAnnotationHandler);
-        this.interactionOverlay.querySelectorAll(".annotDiv").forEach(ad => {
+        cq.getInteractOverlay(this.containerId).removeEventListener("dblclick", this.createAnnotationHandler);
+        cq.getInteractOverlay(this.containerId).querySelectorAll(".annotDiv").forEach(ad => {
             var _a;
             (_a = ad.closest("svg")) === null || _a === void 0 ? void 0 : _a.classList.remove("selected");
             ad.setAttribute("contenteditable", "false");
             ad.removeEventListener("click", this.selectHandler);
             ad.removeEventListener("dblclick", this.activateEditHandler);
         });
-        this.interactionOverlay.querySelectorAll(".lineDragRect").forEach(ldr => ldr.remove());
-        this.interactionOverlay.querySelectorAll(".customAnnotShape").forEach(cas => {
+        //cq.getInteractOverlay(this.containerId).querySelectorAll(".lineDragRect").forEach(ldr => ldr.remove())
+        cq.getInteractOverlay(this.containerId).querySelectorAll(".customAnnotShape").forEach(cas => {
             cas.removeEventListener("dblclick", this.selectHandler);
         });
         document.removeEventListener("keydown", this.deleteHandler);
@@ -206,7 +229,9 @@ class Annotations {
         this.setTextListeners();
     }
     resetListeners() {
-        this.resetTextListeners();
+        //this.resetTextListeners()
+        this.removeListeners();
+        this.setListeners();
     }
     setCustomShapeListener() {
         var customShapes = null;
@@ -222,8 +247,6 @@ class Annotations {
             return;
         switch (selectedButton) {
             case "linkedAnnotButton":
-                this.createTextAnnotation(e, selectedButton);
-                break;
             case "staticTextButton":
                 this.createTextAnnotation(e, selectedButton);
                 break;
@@ -241,10 +264,10 @@ class Annotations {
      * @returns
      */
     createTextAnnotation(e, textButtonId) {
-        if (e.target.id !== this.interactionOverlay.id) {
+        if (e.target.id !== cq.getInteractOverlay(this.containerId).id) {
             return;
         }
-        this.setToFront();
+        //this.setToFront()
         var selcount = 0;
         this.annotationCanvas.querySelectorAll(":scope > .selected").forEach(el => {
             el.classList.remove("selected");
@@ -275,6 +298,7 @@ class Annotations {
             text.classList.add("annotLinkedText");
         else if (isStaticText)
             text.classList.add("annotStaticText");
+        text.classList.add("annotText");
         var textForeignObject = document.createElementNS(constants_1.constants._SVGNS_, "foreignObject");
         textForeignObject.classList.add("annotFO");
         var textDiv = document.createElement("div");
@@ -287,17 +311,29 @@ class Annotations {
         var rectPadding = 5;
         // text.setAttribute("x", "0")
         // text.setAttribute("y", "0")
-        textForeignObject.setAttribute("x", (posx + rectPadding).toString());
-        textForeignObject.setAttribute("y", posy.toString());
-        textForeignObject.setAttribute("height", (50 + 2 * rectPadding + 10).toString());
-        textForeignObject.setAttribute("width", (50 + 2 * rectPadding + 50).toString());
+        var foX = (posx + rectPadding).toString();
+        var foY = posy.toString();
+        var foH = (50 + 2 * rectPadding + 10).toString();
+        var foW = (50 + 2 * rectPadding + 50).toString();
+        textForeignObject.setAttribute("x", foX);
+        textForeignObject.setAttribute("y", foY);
+        textForeignObject.setAttribute("height", foH);
+        textForeignObject.setAttribute("width", foW);
         if (isLinked) {
             var line = document.createElementNS(constants_1.constants._SVGNS_, "line");
             line.classList.add("annotLine");
-            line.setAttribute("x2", textForeignObject.x.baseVal.valueAsString);
-            line.setAttribute("y2", textForeignObject.y.baseVal.valueAsString);
-            line.setAttribute("x1", annotationTarget.x.toString()); //(annotationTarget.x - this.rootBBox.x - window.pageXOffset).toString())
-            line.setAttribute("y1", annotationTarget.y.toString()); //(annotationTarget.y - this.rootBBox.y - window.pageYOffset).toString())
+            const lX2 = textForeignObject.x.baseVal.valueAsString;
+            const lY2 = textForeignObject.y.baseVal.valueAsString;
+            const lX1 = annotationTarget.x.toString();
+            const lY1 = annotationTarget.y.toString();
+            line.setAttribute("x2", lX2);
+            line.setAttribute("y2", lY2);
+            line.setAttribute("x1", lX1);
+            line.setAttribute("y1", lY1);
+            const xDiff = parseFloat(lX1) - parseFloat(lX2);
+            const yDiff = parseFloat(lY1) - parseFloat(lY2);
+            line.setAttribute("x-diff", xDiff.toString());
+            line.setAttribute("y-diff", yDiff.toString());
             line.classList.add("annotLine");
             textGroup.appendChild(line);
         }
@@ -315,20 +351,26 @@ class Annotations {
         this.annotationCanvas.appendChild(textGroup);
         this.deactivateEdit();
         this.resetTextListeners();
-        this.interactionOverlay.dispatchEvent(new Event("annotChanged"));
-        this.interactionOverlay.dispatchEvent(new Event("annotationCanvasChanged"));
+        cq.getInteractOverlay(this.containerId).dispatchEvent(new Event("annotChanged"));
+        cq.getInteractOverlay(this.containerId).dispatchEvent(new Event("annotationCanvasChanged"));
     }
     /**
      * Mark an annotation as selected.
      * @param e
      */
     select(e) {
-        var _a, _b;
-        e.stopPropagation(); //do not trigger other events
+        var _a;
+        //e.stopPropagation() //do not trigger other events
         var t = e.target;
+        const cursorElement = document.elementFromPoint(e.clientX, e.clientY);
+        const cursorStyle = window.getComputedStyle(cursorElement).getPropertyValue('cursor');
+        // console.log("cursorStyle", cursorStyle)
+        // console.log(t, t.closest("svg"))
+        //if(!t.closest("svg")?.classList.contains("selected") && t.getAttribute("contenteditable") === "false") return
+        //t.setAttribute("contenteditable", "false")
         if (t.classList.contains("annotDiv") && t.closest(".annotLinkedText") !== null) { // only apply for linked texts
             //Add A selection Rect to line target
-            this.interactionOverlay.querySelectorAll(".lineDragRect").forEach(ldr => ldr.remove());
+            cq.getInteractOverlay(this.containerId).querySelectorAll(".lineDragRect").forEach(ldr => ldr.remove());
             var line = t.closest("g").querySelector(".annotLine");
             //Rect attacted to x2 target
             var lineDragRect = document.createElementNS(constants_1.constants._SVGNS_, "rect");
@@ -346,11 +388,11 @@ class Annotations {
             lineDragRect.setAttribute("y", line.y1.baseVal.valueAsString);
             //this.AnnotationLineHandler.initDragRects()
         }
-        (_b = (_a = t === null || t === void 0 ? void 0 : t.closest("svg")) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("selected");
+        (_a = t.closest("svg")) === null || _a === void 0 ? void 0 : _a.classList.add("selected");
         this.annotationChangeHandler.resetListeners();
     }
     deactivateEdit() {
-        this.interactionOverlay.querySelectorAll(".annotDiv").forEach(ad => {
+        cq.getInteractOverlay(this.containerId).querySelectorAll(".annotDiv").forEach(ad => {
             ad.setAttribute("contenteditable", "false");
             ad.removeEventListener("dblclick", this.activateEditHandler);
         });
@@ -360,12 +402,8 @@ class Annotations {
         var _a;
         this.addCanvas();
         (_a = this.annotationChangeHandler) === null || _a === void 0 ? void 0 : _a.update();
-        if (this.annotationCanvas.classList.contains("back")) {
-            this.removeListeners();
-        }
-        else {
-            this.resetTextListeners();
-        }
+        this.resetListeners();
+        cq.getInteractOverlay(this.containerId).dispatchEvent(new Event("annotationCanvasChanged"));
     }
     updateAnnotationList(annotionCanvs) {
         //TODO: Aktuallsieren des Datenmodells aus den Informarionen in der SVG: übersetzen der SVG in Annotation-Objekte
@@ -378,45 +416,83 @@ class Annotations {
             };
             that.annotations.push(a);
         });
-        this.interactionOverlay.dispatchEvent(new Event("annotChanged"));
+        cq.getInteractOverlay(this.containerId).dispatchEvent(new Event("annotChanged"));
         this.resetTextListeners();
     }
-    /////////// UTILITIES //////////////
-    /**
-     * Put annotationCanvas to Front for editing
-     * @returns
-     */
-    setToFront() {
-        if (this.annotationCanvas.classList.contains("front")) {
-            return this;
-        }
-        this.annotationCanvas.classList.remove("back");
-        this.annotationCanvas.classList.add("front");
-        this.interactionOverlay.insertBefore(this.getAnnotationCanvas(), this.interactionOverlay.lastChild.nextSibling);
-        this.setListeners();
-        this.container.classList.forEach(c => {
-            if (c.toLowerCase().includes("mode")) { // ensure to only allow one mode when switching to annotMode
-                this.container.classList.remove(c);
+    updateLinkedTexts() {
+        var _a;
+        (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.forEach(a => {
+            //0. Distance between annotId and targetId is saved in the line attributes x-diff and y-diff
+            //1. set Line x2/y2 to x/y of targetId
+            //2. set x/y of annotBox to targetx + x-diff/ targetY + y-diff
+            //3. if dragRects present, then update them as well
+            const source = cq.getInteractOverlay(this.containerId).querySelector(`#${a.sourceID}`);
+            if (!(source === null || source === void 0 ? void 0 : source.querySelector(".annotLinkedText")))
+                return;
+            if (!a.targetID) {
+                a.targetID = source.getAttribute("targetid");
             }
+            const target = cq.getContainer(this.containerId).querySelector(`#${a.targetID}`);
+            if (!target)
+                return;
+            var foreignObject = source.querySelector(".annotFO");
+            const targetBbox = target.getBoundingClientRect();
+            const targetPt = coordinates.transformToDOMMatrixCoordinates(targetBbox.x, targetBbox.y, cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
+            var line = source.querySelector("line");
+            const xSource = targetPt.x + parseFloat(line.getAttribute("x-diff"));
+            const ySource = targetPt.y + parseFloat(line.getAttribute("y-diff"));
+            line.setAttribute("x1", (targetPt.x).toString());
+            line.setAttribute("y1", (targetPt.y).toString());
+            line.setAttribute("x2", xSource.toString());
+            line.setAttribute("y2", ySource.toString());
+            foreignObject.setAttribute("x", xSource.toString());
+            foreignObject.setAttribute("y", ySource.toString());
+            source.querySelectorAll(".lineDragRect").forEach(ldr => {
+                if (ldr.classList.contains("x2")) {
+                    ldr.setAttribute("x", xSource.toString());
+                    ldr.setAttribute("y", ySource.toString());
+                }
+                else if (ldr.classList.contains("x1")) {
+                    ldr.setAttribute("x", line.getAttribute("x1"));
+                    ldr.setAttribute("y", line.getAttribute("y1"));
+                }
+            });
         });
-        this.container.classList.add("annotMode");
-        return this;
     }
+    /////////// UTILITIES //////////////
     /**
-     * Set annotationCanvas to Back, when in different mode
+     * Put annotationCanvas to Front for editing
      * @returns
      */
-    setToBack() {
-        // if( this.annotationCanvas.classList.contains("back")){return}
-        // this.annotationCanvas.classList.remove("front")
-        // this.annotationCanvas.classList.add("back")
-        // if((this.getAnnotationCanvas() !== (this.interactionOverlay.firstChild as SVGSVGElement) && this.getAnnotationCanvas() !== null)){
-        //     this.interactionOverlay.insertBefore(this.getAnnotationCanvas(), this.interactionOverlay.firstChild)
-        // }
-        // this.removeListeners()
-        // this.container.classList.remove("annotMode")
-        return this;
-    }
+    // setToFront(): Annotations {
+    //     if (this.annotationCanvas.classList.contains("front")) { return this }
+    //     this.annotationCanvas.classList.remove("back")
+    //     this.annotationCanvas.classList.add("front")
+    //     cq.getInteractOverlay(this.containerId).insertBefore(this.getAnnotationCanvas(), cq.getInteractOverlay(this.containerId).lastChild.nextSibling)
+    //     this.setListeners()
+    //     this.container.classList.forEach(c => {
+    //         if (c.toLowerCase().includes("mode")) { // ensure to only allow one mode when switching to annotMode
+    //             this.container.classList.remove(c)
+    //         }
+    //     })
+    //     this.container.classList.add("annotMode")
+    //     return this
+    // }
+    // /**
+    //  * Set annotationCanvas to Back, when in different mode
+    //  * @returns 
+    //  */
+    // setToBack() {
+    //     // if( this.annotationCanvas.classList.contains("back")){return}
+    //     // this.annotationCanvas.classList.remove("front")
+    //     // this.annotationCanvas.classList.add("back")
+    //     // if((this.getAnnotationCanvas() !== (cq.getInteractOverlay(this.containerId).firstChild as SVGSVGElement) && this.getAnnotationCanvas() !== null)){
+    //     //     cq.getInteractOverlay(this.containerId).insertBefore(this.getAnnotationCanvas(), cq.getInteractOverlay(this.containerId).firstChild)
+    //     // }
+    //     // this.removeListeners()
+    //     // this.container.classList.remove("annotMode")
+    //     return this
+    // }
     ////////// GETTER/ SETTER////////////
     setm2s(m2s) {
         this.m2s = m2s;
@@ -427,10 +503,11 @@ class Annotations {
         return this;
     }
     getAnnotationCanvas() {
-        return this.interactionOverlay.querySelector("#annotationCanvas") || this.annotationCanvas;
+        return cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas") || this.annotationCanvas;
     }
     setAnnotationCanvas(annotationCanvas) {
         this.updateAnnotationList(annotationCanvas);
+        return this;
     }
     getAnnotationChangeHandler() {
         return this.annotationChangeHandler;
@@ -438,7 +515,7 @@ class Annotations {
     setUndoStacks(arr) {
         if (arr[0] == undefined || this.undoStacks == undefined) {
             this.undoStacks = arr;
-            var canvasClone = this.interactionOverlay.querySelector("#annotationCanvas").cloneNode(true);
+            var canvasClone = cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas").cloneNode(true);
             var listClone = this.container.querySelector("#annotList").cloneNode(true);
             this.undoStacks.push([canvasClone, listClone]);
             //this.annotationCanvas = document.getElementById("annotationCanvas") as unknown as SVGSVGElement
@@ -449,7 +526,7 @@ class Annotations {
         this.containerId = id;
         this.container = document.getElementById(id);
         this.vrvSVG = cq.getVrvSVG(id);
-        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.interactionOverlay = cq.getInteractOverlay(this.containerId);
         return this;
     }
 }

package/src/scripts/js/gui/HarmonyLabel.js

@@ -20,9 +20,13 @@ class HarmonyLabel {
         this.isBassoContinuo = false;
         this.isText = false;
         var letters = /[AaBC-Zc-z].*/; // b is allowed character in bc
+        var isEmpty = inputString === "";
         if (inputString.match(letters)) {
             this.isText = true;
         }
+        else if (isEmpty) {
+            this.element.dispatchEvent(new Event("emptyHarmonyText"));
+        }
         else {
             this.isBassoContinuo = true;
         }
@@ -55,7 +59,16 @@ class HarmonyLabel {
     }
     parseText(inputString) {
         inputString = inputString.replace("b", mappings_1.keyToUnicode.get("b"));
-        inputString = inputString.replace(/(?<!&)#/g, mappings_1.keyToUnicode.get("#"));
+        //inputString = inputString.replace(/(?<!&)#/g, keyToUnicode.get("#"))
+        var regex = /(&)?#/g;
+        inputString = inputString.replace(regex, function (match, capturedGroup) {
+            if (capturedGroup === "&") {
+                return match;
+            }
+            else {
+                return mappings_1.keyToUnicode.get("#");
+            }
+        });
         inputString = inputString.replace("n", mappings_1.keyToUnicode.get("n"));
         inputString = inputString.replace("\\^", mappings_1.keyToUnicode.get("\\^"));
         inputString = inputString.replace("/(?<!\/)°\/g", mappings_1.keyToUnicode.get("°"));
@@ -71,7 +84,18 @@ class HarmonyLabel {
         splitArray.forEach(sa => {
             var f = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "f");
             sa = sa.replace("b", mappings_1.keyToUnicode.get("b"));
-            sa = sa.replace(/(?<!&)#/g, mappings_1.keyToUnicode.get("#"));
+            //sa = sa.replace(/(?<!&)#/g, keyToUnicode.get("#"))
+            var regex = /(&)?#/g;
+            sa = sa.replace(regex, function (match, capturedGroup) {
+                if (capturedGroup === "&") {
+                    // If the '#' is preceded by '&', leave it as is
+                    return match;
+                }
+                else {
+                    // Replace '#' with the desired value
+                    return mappings_1.keyToUnicode.get("#");
+                }
+            });
             sa = sa.replace("n", mappings_1.keyToUnicode.get("n"));
             f.textContent = sa;
             fb.appendChild(f);