vibe-editor 0.0.1-dev → 0.0.2

package/src/scripts/js/gui/ScoreManipulator.js

@@ -67,7 +67,7 @@ class ScoreManipulator {
     }
     drawMeasureManipulators() {
         this.lastBline = Array.from(this.vrvSVG.querySelectorAll(".barLine")).reverse()[0].querySelector("path");
-        var lastBlineRect = coordinates_1.getDOMMatrixCoordinates(this.lastBline, this.vrvSVG);
+        var lastBlineRect = (0, coordinates_1.getDOMMatrixCoordinates)(this.lastBline, this.vrvSVG);
         var blineTopAdder = lastBlineRect.top;
         var blineTopRemover = lastBlineRect.top + lastBlineRect.height / 2;
         var blineRight = lastBlineRect.right;
@@ -111,10 +111,10 @@ class ScoreManipulator {
         this.vrvSVG.querySelectorAll(".page").forEach(p => {
             p.querySelector(".measure").querySelectorAll(".staff").forEach(staff => {
                 var _a;
-                var bbox = coordinates_1.getDOMMatrixCoordinates(staff.querySelector(".staffLine"), this.vrvSVG); //staff.querySelector(".staffLine").getBoundingClientRect()
+                var bbox = (0, coordinates_1.getDOMMatrixCoordinates)(staff.querySelector(".staffLine"), this.vrvSVG); //staff.querySelector(".staffLine").getBoundingClientRect()
                 var x = bbox.left; //- rootBBox.x
                 var yTop = bbox.top; //- rootBBox.y
-                var yBottom = coordinates_1.getDOMMatrixCoordinates(Array.from(staff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(staff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom - rootBBox.y
+                var yBottom = (0, coordinates_1.getDOMMatrixCoordinates)(Array.from(staff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(staff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom - rootBBox.y
                 var staffHeight = (yBottom - yTop);
                 yTop -= staffHeight * 0.20; // center the boxes
                 var btnHeight = (staffHeight / 4) * 1.5;
@@ -155,18 +155,18 @@ class ScoreManipulator {
         var width;
         var height;
         if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
-            bbox = coordinates_1.getDOMMatrixCoordinates(referenceStaff, this.vrvSVG); //referenceStaff.querySelector(".staffLine").getBoundingClientRect()
+            bbox = (0, coordinates_1.getDOMMatrixCoordinates)(referenceStaff, this.vrvSVG); //referenceStaff.querySelector(".staffLine").getBoundingClientRect()
             x = bbox.left;
             yTop = bbox.top;
-            yBottom = coordinates_1.getDOMMatrixCoordinates(Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom
+            yBottom = (0, coordinates_1.getDOMMatrixCoordinates)(Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom
         }
         else {
-            bbox = bbox = coordinates_1.getDOMMatrixCoordinates(referenceStaff.querySelector(".clef"), this.vrvSVG); //referenceStaff.querySelector(".clef").getBoundingClientRect()
+            bbox = bbox = (0, coordinates_1.getDOMMatrixCoordinates)(referenceStaff.querySelector(".clef"), this.vrvSVG); //referenceStaff.querySelector(".clef").getBoundingClientRect()
             x = bbox.left;
             yTop = bbox.top;
             yBottom = bbox.bottom;
         }
-        const clefCoords = coordinates_1.getDOMMatrixCoordinates(referenceStaff.querySelector(".clef"), this.vrvSVG);
+        const clefCoords = (0, coordinates_1.getDOMMatrixCoordinates)(referenceStaff.querySelector(".clef"), this.vrvSVG);
         //height = referenceStaff.querySelector(".clef").getBoundingClientRect().height
         //width = referenceStaff.querySelector(".clef").getBoundingClientRect().width
         return { x: x, yTop: yTop, yBottom: yBottom, width: clefCoords.width, height: clefCoords.height };

package/src/scripts/js/gui/Tabbar.js

@@ -41,7 +41,7 @@ class Tabbar {
             }
         }).bind(this);
         /**
-         * MAke Buttons in Toolbar selectable exclusively
+         * Make Buttons in Toolbar selectable exclusively
          */
         this.exclusiveSelectHandler = (function exclusiveSelectHandler(e) {
             this.exclusiveSelect(e);
@@ -342,6 +342,7 @@ class Tabbar {
         this.accidButtonGroup.appendChild(dc.makeNewButton("&#x1D12B", "alterDDown", buttonStyleDarkOutline + " " + smuflFont + " " + alterBtn, "", true));
         this.accidButtonGroup.appendChild(dc.makeNewButton("&#x1D12A", "alterDUp", buttonStyleDarkOutline + " " + smuflFont + " " + alterBtn, "", true));
         this.accidButtonGroup.addEventListener("click", this.exclusiveSelectHandler);
+        this.createArticulationButtons();
         this.soundGroup = cq.getContainer(this.containerId).querySelector("#soundGroup");
         this.soundGroup.appendChild(dc.makeNewButton("", "playBtn", buttonStyleDarkOutline));
         //this.soundGroup.appendChild(dc.makeNewButton("", "pauseBtn", buttonStyleDarkOutline))
@@ -426,13 +427,13 @@ class Tabbar {
         this.annotGroupKM.append(dc.makeNewButton("Harmony", "harmonyAnnotButton", buttonStyleDarkOutline));
         this.annotGroupKM.addEventListener("click", this.exclusiveSelectHandler);
     }
-    createArticualtionButtons() {
-        this.articGroup = dc.makeNewDiv("articGroup", "customGroup btn-group-md me-2 h-100", { role: "group" });
+    createArticulationButtons() {
+        this.articGroup = cq.getContainer(this.containerId).querySelector("#articGroup"); //dc.makeNewDiv("articGroup", "customGroup btn-group-md me-2 h-100", { role: "group" }) as HTMLElement
         this.articGroup.append(dc.makeNewButton(".", "staccatoBtn", buttonStyleDarkOutline));
         this.articGroup.append(dc.makeNewButton("_", "tenutoBtn", buttonStyleDarkOutline));
         this.articGroup.append(dc.makeNewButton("𝅿", "marcatoBtn", buttonStyleDarkOutline + " " + smuflFont, "", true));
         this.articGroup.append(dc.makeNewButton("𝅻", "accentBtn", buttonStyleDarkOutline + " " + smuflFont, "", true));
-        this.articGroup.addEventListener("click", this.exclusiveSelectHandler);
+        //this.articGroup.addEventListener("click", this.exclusiveSelectHandler)
     }
     createMainToolbar() {
         this.createButtons();
@@ -456,7 +457,7 @@ class Tabbar {
         this.customToolbar = cq.getContainer(this.containerId).querySelector("#customToolbar");
         //this.createInsertSelect()
         this.createButtonsAnnotationMode();
-        this.createArticualtionButtons();
+        //this.createArticulationButtons()
     }
     removeAllCustomGroups() {
         Array.from(this.customToolbar.children).forEach(c => {
@@ -479,7 +480,7 @@ class Tabbar {
         // achtung: nie preventDefault in einem Document anwenden
         document.addEventListener("keydown", this.closeHandlerKey);
         //document.getElementsByClassName("vibe-container")[0]?.addEventListener("click", this.closeHandlerMouse)
-        cq.getContainer(this.containerId).querySelectorAll("#dotGroup button, #noteGroup button, #modGroup button, #accidGroup Button").forEach(el => {
+        cq.getContainer(this.containerId).querySelectorAll("#dotGroup button, #noteGroup button, #modGroup button, #accidGroup button, #articGroup button").forEach(el => {
             el.addEventListener("click", this.exclusiveSelectHandler);
         });
         cq.getContainer(this.containerId).querySelector("#toggleSidebar").addEventListener("click", this.sidebarHandler);
@@ -595,7 +596,7 @@ class Tabbar {
             a.removeEventListener("click", this.customToolbarHandler);
         });
         cq.getContainer(this.containerId).removeEventListener("annotChanged", this.createAnnotListHandler);
-        interactjs_1.default("#annotList").unset();
+        (0, interactjs_1.default)("#annotList").unset();
     }
     closeDropdown(ddButton) {
         if (ddButton.classList.contains("show")) {
@@ -619,7 +620,6 @@ class Tabbar {
         sbb.height = sbb.height + y;
     }
     exclusiveSelect(e) {
-        1;
         var target = e.target;
         var tagname = "button";
         if (target.tagName.toLowerCase() === tagname) {
@@ -635,6 +635,7 @@ class Tabbar {
                 target.classList.remove(selectedFlag);
             }
         }
+        return this;
     }
     clickInsertHandler() {
         //this.customToolbar.appendChild(this.insertSelectGroup)

package/src/scripts/js/gui/TempoLabel.js

@@ -29,7 +29,7 @@ class TempoLabel {
     createElement(inputString) {
         if (typeof this.element === "undefined") {
             this.element = this.currentMEI.createElement("tempo");
-            this.element.setAttribute("id", random_1.uuidv4());
+            this.element.setAttribute("id", (0, random_1.uuidv4)());
         }
         Array.from(this.element.children).forEach(c => {
             c.remove();

package/src/scripts/js/gui/Toolbar.js

@@ -548,7 +548,7 @@ class Toolbar {
         //     el.removeEventListener("click", this.sidebarHandler)
         // })
         cq.getContainer(this.containerId).removeEventListener("annotChanged", this.createAnnotListFunction);
-        interactjs_1.default("#annotList").unset();
+        (0, interactjs_1.default)("#annotList").unset();
     }
     closeDropdown(ddButton) {
         if (ddButton.classList.contains("show")) {

package/src/scripts/js/handlers/AnnotationChangeHandler.js

@@ -31,7 +31,7 @@ class AnnotationChangeHandler {
     setListeners() {
         //if(document.getElementById(this.containerId).querySelector(".sidebar.openSidebar") != null) return
         var that = this;
-        this.shapeListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .customAnnotShape")
+        this.shapeListener = (0, interactjs_1.default)("#" + this.containerId + " #interactionOverlay .customAnnotShape")
             .resizable({
             // resize from all edges and corners
             edges: { left: true, right: true, bottom: true, top: true },
@@ -62,7 +62,7 @@ class AnnotationChangeHandler {
                 })
             ]
         });
-        this.textListener = interactjs_1.default("#" + this.containerId + " .annotText")
+        this.textListener = (0, interactjs_1.default)("#" + this.containerId + " .annotText")
             .resizable({
             // resize from all edges and corners
             edges: { left: true, right: true, bottom: true, top: true },
@@ -93,7 +93,7 @@ class AnnotationChangeHandler {
                 })
             ]
         });
-        this.lineListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .lineDragRect.x1")
+        this.lineListener = (0, interactjs_1.default)("#" + this.containerId + " #interactionOverlay .lineDragRect.x1")
             .draggable({
             listeners: {
                 move: this.dragLineListener.bind(this),

package/src/scripts/js/handlers/ClickModeHandler.js

@@ -328,14 +328,17 @@ class ClickModeHandler {
         return;
     }
     clickSelect(e) {
-        var _a;
         if (!this.shiftPressed) {
             cq.getVrvSVG(this.containerId).querySelectorAll(".marked").forEach(m => m.classList.remove(marked));
         }
         const t = e.target;
         const notehead = cq.getVrvSVG(this.containerId).querySelector(`#${t.parentElement.getAttribute("refId")}`);
         notehead === null || notehead === void 0 ? void 0 : notehead.classList.add(marked);
-        (_a = notehead.closest(".note")) === null || _a === void 0 ? void 0 : _a.classList.add(marked);
+        const note = notehead.closest(".note");
+        if (note) {
+            note.classList.add(marked);
+            this.scoreGraph.setCurrentNodeById(note.id);
+        }
     }
     selStart(e) {
         e.preventDefault();
@@ -437,7 +440,7 @@ class ClickModeHandler {
             (_d = document.getElementById(this.containerId)) === null || _d === void 0 ? void 0 : _d.querySelectorAll("#noteGroup *, #dotGroup *, #modGroup *, #articGroup *").forEach(b => b.classList.remove("selected"));
             //select buttons for given note state
             var modBtnId = this.container.querySelector("#customToolbar #articGroup") !== null ? "artic" : "accid";
-            (_f = (_e = document.getElementById(this.containerId)) === null || _e === void 0 ? void 0 : _e.querySelector("#" + mappings_1.attrToModButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute(modBtnId)))) === null || _f === void 0 ? void 0 : _f.classList.add("selected");
+            (_f = (_e = document.getElementById(this.containerId)) === null || _e === void 0 ? void 0 : _e.querySelector("#" + mappings_1.attrToAccidButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute(modBtnId)))) === null || _f === void 0 ? void 0 : _f.classList.add("selected");
             if ((meiNote === null || meiNote === void 0 ? void 0 : meiNote.closest("chord")) !== null) {
                 meiNote = meiNote.closest("chord");
             }
@@ -501,6 +504,10 @@ class ClickModeHandler {
         this.musicPlayer = musicPlayer;
         return this;
     }
+    setScoreGraph(sg) {
+        this.scoreGraph = sg;
+        return this;
+    }
     setContainerId(id) {
         this.containerId = id;
         this.vrvSVG = cq.getVrvSVG(id);

package/src/scripts/js/handlers/CustomAnnotationShapeDrawer.js

@@ -67,7 +67,7 @@ class CustomAnnotationShapeDrawer {
         this.updateCallback();
     }
     initRect(ulx, uly) {
-        this.shapeID = random_1.uuidv4();
+        this.shapeID = (0, random_1.uuidv4)();
         this.canvas.append('rect')
             .attr('x', ulx)
             .attr('y', uly)
@@ -78,7 +78,7 @@ class CustomAnnotationShapeDrawer {
         this.shape = document.getElementById(this.shapeID);
     }
     initCircle(cx, cy) {
-        this.shapeID = random_1.uuidv4();
+        this.shapeID = (0, random_1.uuidv4)();
         this.canvas.append('ellipse')
             .attr('cx', cx)
             .attr('cy', cy)

package/src/scripts/js/handlers/CustomToolbarHandler.js

@@ -47,7 +47,7 @@ class CustomToolbarHandler {
         var d = this.alterDUpButton = this.container.querySelector("#alterDUp");
         var e = this.alterDDownButton = this.container.querySelector("#alterDDown");
         this.alterButtons = [a, b, c, d, e];
-        this.articButtons = new Array();
+        this.articButtons = Array.from(this.container.querySelectorAll("#articGroup .btn")); //new Array()
         this.tabButtons = Array.from(this.container.querySelectorAll(".tabBtn"));
     }
     setListeners() {
@@ -60,9 +60,9 @@ class CustomToolbarHandler {
         this.alterButtons.forEach(ab => {
             ab.addEventListener("click", this.alterFunction);
         });
-        if (this.articButtons.length === 0) {
-            cq.getContainer(this.containerId).querySelectorAll("#articGroup .btn").forEach(btn => this.articButtons.push(btn));
-        }
+        // if(this.articButtons.length === 0){
+        //     cq.getContainer(this.containerId).querySelectorAll("#articGroup .btn").forEach(btn => this.articButtons.push(btn))
+        // }
         this.articButtons.forEach(ab => {
             ab.addEventListener("click", this.articulationHandlerFunction);
         });

package/src/scripts/js/handlers/InsertModeHandler.js

@@ -44,6 +44,7 @@ class InsertModeHandler {
         this.clickModeHandler = this.clickModeHandler || new ClickModeHandler_1.default();
         this.clickModeHandler
             .setContainerId(this.containerId)
+            .setScoreGraph(this.scoreGraph)
             .setInsertCallback(this.insertCallback)
             .setDeleteCallback(this.deleteCallback)
             .setAnnotations(this.annotations)
@@ -81,6 +82,7 @@ class InsertModeHandler {
                 break;
             case "staticTextButton":
             case "linkedAnnotButton":
+                this.container.classList.remove("harmonyMode");
                 this.annotationMode = true;
                 this.harmonyMode = false;
                 if (this.annotations == undefined) {
@@ -173,6 +175,7 @@ class InsertModeHandler {
             .setContainerId(this.containerId)
             .setm2s(this.m2s)
             .setMEI(this.m2s.getCurrentMei())
+            .setScoreGraph(this.scoreGraph)
             .setMusicProcessor(this.musicPlayer)
             .setLoadDataCallback(this.loadDataCallback)
             .drawElements();
@@ -242,8 +245,8 @@ class InsertModeHandler {
                 }
                 that.m2s.setDurationNewNote(dur);
                 if (that.m2s.setMarkedNoteDurations(dur)) {
-                    MEIOperations_1.cleanUp(that.m2s.getCurrentMei());
-                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2s.getCurrentMei());
+                    (0, MEIOperations_1.cleanUp)(that.m2s.getCurrentMei());
+                    var mei = (0, MEIConverter_1.restoreXmlIdTags)(that.m2s.getCurrentMei());
                     that.loadDataCallback("", mei, false);
                 }
             });
@@ -263,8 +266,8 @@ class InsertModeHandler {
                 }
                 that.m2s.setDotsNewNote(dots);
                 if (that.m2s.setMarkedNoteDots(dots)) {
-                    MEIOperations_1.cleanUp(that.m2s.getCurrentMei());
-                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2s.getCurrentMei());
+                    (0, MEIOperations_1.cleanUp)(that.m2s.getCurrentMei());
+                    var mei = (0, MEIConverter_1.restoreXmlIdTags)(that.m2s.getCurrentMei());
                     that.loadDataCallback("", mei, false);
                 }
             });

package/src/scripts/js/handlers/KeyModeHandler.js

@@ -132,7 +132,7 @@ class KeyModeHandler {
                 newNote.staffId = currentStaff.closest("measure").nextElementSibling.querySelector(`staff[n='${staffN}']`).id;
                 newNote.layerId = currentStaff.closest("measure").nextElementSibling.querySelector(`staff[n='${staffN}'] layer[n='${layerN}']`).id;
                 newNote.relPosX = "left";
-                newNote.nearestNoteId = this.m2s.getCurrentMei().querySelector("#" + newNote.staffId).querySelector("mRest").id;
+                newNote.nearestNoteId = this.m2s.getCurrentMei().querySelector("#" + newNote.staffId).querySelector(`layer[n='${layerN}'] > mRest`).id;
             }
             else {
                 //or if ne note must be rendered into the next bar
@@ -140,12 +140,14 @@ class KeyModeHandler {
                 if (this.m2s.getCurrentMei().querySelector("#" + newNote.nearestNoteId) === null)
                     return;
                 if (this.m2s.getCurrentMei().querySelector("#" + newNote.nearestNoteId).tagName !== "mRest") {
-                    newNote.staffId = ((_c = this.m2s.getCurrentMei().getElementById((_b = this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")) === null || _b === void 0 ? void 0 : _b.getId())) === null || _c === void 0 ? void 0 : _c.closest("staff").id) || newNote.staffId;
-                    newNote.layerId = ((_e = this.m2s.getCurrentMei().getElementById((_d = this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")) === null || _d === void 0 ? void 0 : _d.getId())) === null || _e === void 0 ? void 0 : _e.closest("layer").id) || newNote.layerId;
+                    // newNote.staffId = this.m2s.getCurrentMei().getElementById(this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")?.getId())?.closest("staff").id || newNote.staffId
+                    // newNote.layerId = this.m2s.getCurrentMei().getElementById(this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")?.getId())?.closest("layer").id || newNote.layerId
+                    newNote.staffId = ((_c = this.m2s.getCurrentMei().getElementById((_b = this.scoreGraph.lookUp(["note", "rest", "mRest"], "right")) === null || _b === void 0 ? void 0 : _b.getId())) === null || _c === void 0 ? void 0 : _c.closest("staff").id) || newNote.staffId;
+                    newNote.layerId = ((_e = this.m2s.getCurrentMei().getElementById((_d = this.scoreGraph.lookUp(["note", "rest", "mRest"], "right")) === null || _d === void 0 ? void 0 : _d.getId())) === null || _e === void 0 ? void 0 : _e.closest("layer").id) || newNote.layerId;
                 }
                 if (oldStaffId !== newNote.staffId) {
                     newNote.relPosX = "left";
-                    newNote.nearestNoteId = (_f = this.scoreGraph.getCurrentNode()) === null || _f === void 0 ? void 0 : _f.getId();
+                    newNote.nearestNoteId = (_f = this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")) === null || _f === void 0 ? void 0 : _f.getId(); //this.scoreGraph.getCurrentNode()?.getId()
                 }
             }
             this.insertCallback(newNote, true).then(() => {
@@ -210,25 +212,42 @@ class KeyModeHandler {
      * @returns
      */
     createNewNote(pname, oct, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         //get relevant staffinfo
-        var nearestNodeId = (_a = this.scoreGraph.getCurrentNode()) === null || _a === void 0 ? void 0 : _a.getId();
-        if (nearestNodeId == undefined)
+        // var nearestNodeId = this.scoreGraph.getCurrentNode()?.getId()
+        // if (nearestNodeId == undefined) return
+        if (!this.scoreGraph.getCurrentNode())
             return;
-        var closestStaff = ((_b = this.m2s.getCurrentMei().getElementById(nearestNodeId)) === null || _b === void 0 ? void 0 : _b.closest("staff")) || this.m2s.getCurrentMei().querySelector("measure > staff"); //asume first measure first staff
+        function getLastActiveNode(cid, sg) {
+            var activeNotes = Array.from(cq.getContainer(cid).querySelectorAll(".activeLayer > .note")).reverse();
+            var hasNotes = activeNotes.length > 0;
+            var lastNode = cq.getContainer(cid).querySelector(".activeLayer > :is(.lastAdded, .rest, .mRest");
+            if (hasNotes) {
+                lastNode = activeNotes[0];
+            }
+            sg.setCurrentNodeById(lastNode.id);
+            return lastNode.id;
+        }
+        var nearestNodeId = this.scoreGraph.getCurrentNode().getDocElement().closest(".activeLayer") ? this.scoreGraph.getCurrentNode().getId() : getLastActiveNode(this.containerId, this.scoreGraph);
+        var closestStaff = ((_a = this.m2s.getCurrentMei().getElementById(nearestNodeId)) === null || _a === void 0 ? void 0 : _a.closest("staff")) || this.m2s.getCurrentMei().querySelector("measure > staff"); //asume first measure first staff
         var closestMeasure = closestStaff.closest("measure");
         var closestStaffIdx = parseInt(closestStaff.getAttribute("n")) - 1;
         var closestMeasureIdx = parseInt(closestMeasure.getAttribute("n")) - 1;
         var keysig = this.m2s.getMeasureMatrix().get(closestMeasureIdx, closestStaffIdx).keysig;
         var accids = mappings_1.keysigToNotes.get(keysig);
         var accid;
-        if (options === null) {
-            accids = accids.filter((s) => { return s === pname; });
-            if (accids.length === 1) {
-                accid = keysig.charAt(1);
+        var artic;
+        if (!options) {
+            accid = mappings_1.accidButtonToAttr.get((_b = cq.getContainer(this.containerId).querySelector("#accidGroup > button.selected")) === null || _b === void 0 ? void 0 : _b.id); // try first to create a new accid based on the tabbar state
+            artic = mappings_1.articButtonToAttr.get((_c = cq.getContainer(this.containerId).querySelector("#articGroup > button.selected")) === null || _c === void 0 ? void 0 : _c.id);
+            if (!accid) {
+                accids = accids.filter((s) => { return s === pname; });
+                if (accids.length === 1) {
+                    accid = keysig.charAt(1);
+                }
             }
         }
-        else if (options === null || options === void 0 ? void 0 : options.accid) {
+        if (options === null || options === void 0 ? void 0 : options.accid) {
             accid = options.accid;
             //should the note be enharmonically swapped?
             //midi inputs are only given as sharps
@@ -238,6 +257,9 @@ class KeyModeHandler {
                 pname = String.fromCharCode(pname.charCodeAt(0) + increment);
             }
         }
+        if (options === null || options === void 0 ? void 0 : options.artic) {
+            artic = options.artic; // TODO: Which format will be set?
+        }
         var targetChord;
         //if(this.container.querySelector("#chordButton")?.classList.contains("selected")){
         if (this.shiftDown) {
@@ -249,18 +271,19 @@ class KeyModeHandler {
         this.setContainerId(this.containerId);
         var newNote = {
             pname: pname,
-            id: random_1.uuidv4(),
+            id: (0, random_1.uuidv4)(),
             dur: this.m2s.getDurationNewNote(),
             dots: this.m2s.getDotsNewNote(),
             oct: oct,
             keysig: keysig,
             accid: accid,
+            artic: artic,
             nearestNoteId: nearestNodeId,
             relPosX: "right",
-            staffId: (_c = this.vrvSVG.querySelector("#" + nearestNodeId)) === null || _c === void 0 ? void 0 : _c.closest(".staff").id,
-            layerId: (_e = this.container.querySelector(`#${(_d = this.vrvSVG.querySelector("#" + nearestNodeId)) === null || _d === void 0 ? void 0 : _d.closest(".staff").id} .activeLayer`)) === null || _e === void 0 ? void 0 : _e.id,
+            staffId: (_d = this.vrvSVG.querySelector("#" + nearestNodeId)) === null || _d === void 0 ? void 0 : _d.closest(".staff").id,
+            layerId: (_f = this.container.querySelector(`#${(_e = this.vrvSVG.querySelector("#" + nearestNodeId)) === null || _e === void 0 ? void 0 : _e.closest(".staff").id} .activeLayer`)) === null || _f === void 0 ? void 0 : _f.id,
             chordElement: targetChord,
-            rest: (_f = this.container.querySelector("#pauseNote")) === null || _f === void 0 ? void 0 : _f.classList.contains("selected")
+            rest: (_g = this.container.querySelector("#pauseNote")) === null || _g === void 0 ? void 0 : _g.classList.contains("selected")
         };
         return newNote;
     }

package/src/scripts/js/handlers/LabelHandler.js

@@ -13,7 +13,8 @@ const labelSelectors = "." + labelClasses.join(",.");
 class LabelHandler {
     constructor(containerId) {
         this.setHarmonyLabelHandlerClick = (function setHarmonyLabelHandler(e) {
-            if (this.container.classList.contains("harmonyMode")) {
+            //if (this.container.classList.contains("harmonyMode")) {
+            if (this.container.querySelector("#annotGroupKM > #harmonyAnnotButton.selected")) {
                 this.harmonyLabelHandler(e);
             }
         }).bind(this);
@@ -346,7 +347,7 @@ class LabelHandler {
     }
     createInputBox(posx, posy, targetId, targetClass) {
         var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
-        textGroup.setAttribute("id", random_1.uuidv4());
+        textGroup.setAttribute("id", (0, random_1.uuidv4)());
         textGroup.setAttribute("refElementId", targetId);
         var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
         text.classList.add("labelText");

package/src/scripts/js/handlers/NoteDragHandler.js

@@ -12,7 +12,7 @@ class NoteDragHandler {
     }
     setListeners() {
         var that = this;
-        this.noteDragListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .notehead rect")
+        this.noteDragListener = (0, interactjs_1.default)("#" + this.containerId + " #interactionOverlay .notehead rect")
             .draggable({
             startAxis: "y",
             lockAxis: "y",

package/src/scripts/js/handlers/ScoreManipulatorHandler.js

@@ -193,6 +193,13 @@ class ScoreManipulatorHandler {
         cq.getContainer(this.containerId).querySelectorAll("#vrvSVG .staff:not(:has(.activeLayer))").forEach(staff => {
             this.setActiveLayerClass(staff.getAttribute("n"), "1");
         });
+        var activeNotes = Array.from(cq.getContainer(this.containerId).querySelectorAll(".activeLayer > .note")).reverse();
+        var hasNotes = activeNotes.length > 0;
+        var lastNode = cq.getContainer(this.containerId).querySelector(".activeLayer > :is(.rest, .mRest");
+        if (hasNotes) {
+            lastNode = activeNotes[0];
+        }
+        this.scoreGraph.setCurrentNodeById(lastNode.id);
     }
     //SETTER////
     setMEI(mei) {
@@ -208,6 +215,10 @@ class ScoreManipulatorHandler {
         this.musicPlayer = mp;
         return this;
     }
+    setScoreGraph(sg) {
+        this.scoreGraph = sg;
+        return this;
+    }
     setLoadDataCallback(loadDataCallback) {
         this.loadDataCallback = loadDataCallback;
         return this;

package/src/scripts/js/handlers/SideBarHandler.js

@@ -74,7 +74,7 @@ class SidebarHandler {
                 that.setSelectListeners();
             }
         }, false);
-        this.resizeListener = interactjs_1.default("#" + this.containerId + " #sidebarContainer")
+        this.resizeListener = (0, interactjs_1.default)("#" + this.containerId + " #sidebarContainer")
             .resizable({
             edges: { left: false, right: true, bottom: false, top: false },
             listeners: {

package/src/scripts/js/handlers/TooltipHandler.js

@@ -93,7 +93,7 @@ class TooltipHandler {
         arrow.setAttribute("data-popper-arrow", "");
         tt.append(arrow);
         this.container.prepend(tt);
-        core_1.createPopper(el, tt, {
+        (0, core_1.createPopper)(el, tt, {
             placement: 'top-start',
             modifiers: [
                 {