vibe-editor 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-editor",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "src/scripts/js/scripts/VIBE.js",
   "keywords": [],
   "author": "Matthias Nowakowski",
@@ -15,7 +15,8 @@
   "files": [
     "src/images/*/*",
     "src/scripts/js/*",
-    "src/fonts/*"
+    "src/fonts/*",
+    "src/styles/*.css"
   ],
   "dependencies": {
     "@babel/plugin-transform-classes": "^7.16.7",

package/src/scripts/js/scripts/Core.js

@@ -104,7 +104,7 @@ class Core {
                         this.undoAnnotationStacks.push([annotCanvas, annotList]);
                         annotCanvas.replaceWith(annotstate[0]);
                         annotList.replaceWith(annotstate[1]);
-                        this.keyboardHandler.resetListeners();
+                        this.globalKeyboardHandler.resetListeners();
                         this.container.dispatchEvent(new Event("annotationCanvasChanged"));
                     }
                     resolve(true);
@@ -136,7 +136,7 @@ class Core {
                         this.undoAnnotationStacks.push([annotCanvas, annotList]);
                         annotCanvas.replaceWith(annotstate[0]);
                         annotList.replaceWith(annotstate[1]);
-                        this.keyboardHandler.resetListeners();
+                        this.globalKeyboardHandler.resetListeners();
                     }
                     resolve(true);
                     return;
@@ -303,6 +303,7 @@ class Core {
                 d = new XMLSerializer().serializeToString(data);
                 u = false;
                 break;
+            case null:
             case undefined:
                 d = new mei_template_1.default().emptyMEI();
                 u = false;
@@ -472,6 +473,7 @@ class Core {
         this.labelHandler
             .setContainerId(this.containerId)
             .setCurrentMEI(this.currentMEIDoc)
+            .setm2s(this.m2s)
             .reset();
         this.insertModeHandler
             .setContainerId(this.containerId)
@@ -480,7 +482,7 @@ class Core {
             .setMusicProcessor(this.musicProcessor)
             .setDeleteHandler(this.deleteHandler)
             .setLabelHandler(this.labelHandler)
-            .activateHarmonyMode()
+            //.activateHarmonyMode()
             //.activateSelectionMode()
             .setInsertCallback(this.insert)
             .setDeleteCallback(this.delete)
@@ -634,7 +636,6 @@ class Core {
             (_a = document.getElementById(this.containerId).querySelector("#interactionOverlay #scoreRects")) === null || _a === void 0 ? void 0 : _a.remove();
             var scoreRects = document.createElementNS(constants_1.constants._SVGNS_, "svg");
             scoreRects.setAttribute("id", "scoreRects");
-            //scoreRects.setAttribute("viewBox", ["0", "0", rootWidth.toString(), rootHeigth.toString()].join(" "))
             Array.from(refSVG.attributes).forEach(a => {
                 if (!["id", "width", "height"].includes(a.name)) {
                     this.interactionOverlay.setAttribute(a.name, a.value);
@@ -644,20 +645,28 @@ class Core {
             refSVG.insertAdjacentElement("beforebegin", this.interactionOverlay);
             if (loadBBoxes) {
                 var svgBoxes = Array.from(document.getElementById(this.containerId)
-                    .querySelectorAll(".definition-scale :is(g,path)")) //".definition-scale path, .definition-scale .bounding-box"))
+                    .querySelectorAll(".definition-scale :is(g,path)"))
                     .filter(el => {
                     var condition = !["system", "measure", "layer", "ledgerLines", "flag"].some(cn => el.classList.contains(cn));
                     return condition;
                 });
                 var reorderedBoxes = new Array(); // reorder so that dependent elements are already in array
-                svgBoxes.forEach(sb => {
-                    if (sb.querySelector(":scope > use, :scope > rect, :scope > path") === null) {
-                        reorderedBoxes.push(sb);
-                    }
-                    else {
-                        reorderedBoxes.unshift(sb);
-                    }
+                var classOrder = ["harm", "slur", "tie", "tupleNum", "tupletBracket", "clef", "meterSig", "keySig", "notehead", "stem", "rest", "barLine", "staff"];
+                let filteredElements;
+                classOrder.forEach(c => {
+                    filteredElements = svgBoxes.filter(e => e.classList.contains(c));
+                    reorderedBoxes.push(...filteredElements);
                 });
+                filteredElements = svgBoxes.filter(e => e.classList.length === 0 || !classOrder.some(c => e.classList.contains(c)));
+                // {  
+                // if(e.classList.length === 0){
+                //     return e
+                //   }
+                //   if(!classOrder.some(c => e.classList.contains(c))){
+                //     return e
+                //   }
+                // })
+                reorderedBoxes.push(...filteredElements);
                 // staff always has to be on top of sibling elements, so that one can interact with score elements
                 reorderedBoxes = reorderedBoxes.reverse();
                 async function computeCoords(box, interactionOverlay) {

package/src/scripts/js/scripts/VIBE.js

@@ -182,7 +182,7 @@ class VIBE {
                 });
             }
             this.tabbar
-                .setImportCallback(this.coreInstance.loadDataHandler)
+                .setLoadDataCallback(this.coreInstance.loadDataHandler)
                 .setAlignCallback(this.coreInstance.alignFunctionHandler)
                 .setGetMEICallback(this.coreInstance.getMEI.bind(this.coreInstance));
             //block everthing when firefox is not at least version 114.0

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

@@ -25,7 +25,7 @@ class HarmonyLabel {
             this.isText = true;
         }
         else if (isEmpty) {
-            this.element.dispatchEvent(new Event("emptyHarmonyText"));
+            this.element.textContent = "";
         }
         else {
             this.isBassoContinuo = true;

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

@@ -366,6 +366,7 @@ class Tabbar {
         }
         this.colorGroup.append(ReactWrapper.createColorPicker("colorPicker", handleColor.bind(this)));
         this.fileSelectGroup = cq.getContainer(this.containerId).querySelector("#fileSelectGroup");
+        this.fileSelectGroup.append(dc.makeNewButton("Empty Score", "emptyScoreBtn", buttonStyleDarkOutline));
         this.fileSelectGroup.append(dc.makeNewInput("importAudioFile", "file", ""));
         this.fileSelectGroup.append(dc.makeNewButton("Import Audiofile", "importAudioFileBtn", buttonStyleDarkOutline));
         this.fileSelectGroup.append(dc.makeNewInput("importXML", "file", ""));
@@ -516,10 +517,11 @@ class Tabbar {
         cq.getContainer(this.containerId).querySelector("#importXML").addEventListener("input", function (e) {
             var fr = new FileReader();
             fr.onload = function () {
-                that.importCallback("", fr.result, false, constants_1.constants._TARGETDIVID_).then(mei => {
+                that.loadDataCallback("", fr.result, false, constants_1.constants._TARGETDIVID_).then(mei => {
                     var meiXml = meioperations.mergeSectionScoreDefToLayer(mei);
-                    meiXml = meioperations.mergeArticToParent(meiXml);
-                    that.importCallback("", meiXml, false, constants_1.constants._TARGETDIVID_);
+                    meiXml = meioperations.mergeNotechildrenToAttributes(meiXml);
+                    meiXml = meioperations.adjustOrderNumbers(meiXml);
+                    that.loadDataCallback("", meiXml, false, constants_1.constants._TARGETDIVID_);
                     that.align(null, null);
                 });
             };
@@ -560,6 +562,9 @@ class Tabbar {
                 that.download(fileName, mei);
             });
         });
+        cq.getContainer(this.containerId).querySelector("#emptyScoreBtn").addEventListener("click", function () {
+            that.loadDataCallback("", null, false, constants_1.constants._TARGETDIVID_).then(() => cq.getContainer(that.containerId).querySelectorAll("#annotationCanvas > g").forEach(g => g.remove()));
+        });
     }
     /**
      * Call the alignCallback with parameters. Only when the audioBlob and audioFile are defined, an alignment can take place.
@@ -673,8 +678,8 @@ class Tabbar {
      * Callback from Core, so that imported mei or musicxml can be loaded in the editor
      * @param importCallback
      */
-    setImportCallback(importCallback) {
-        this.importCallback = importCallback;
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
         return this;
     }
     setAlignCallback(alignCallback) {

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

@@ -27,6 +27,8 @@ class AnnotationChangeHandler {
         this.dragAnnotEndEvent = new Event("dragAnnotEnd");
         this.isInteracting = false;
         this.factor = 100;
+        this.positionx = 0;
+        this.positiony = 0;
     }
     setListeners() {
         //if(document.getElementById(this.containerId).querySelector(".sidebar.openSidebar") != null) return
@@ -74,7 +76,7 @@ class AnnotationChangeHandler {
                     that.interactTarget.dispatchEvent(that.annotResizedEvent);
                     that.isInteracting = false;
                 }
-            },
+            }
         })
             .draggable({
             listeners: {
@@ -86,12 +88,12 @@ class AnnotationChangeHandler {
                     that.isInteracting = false;
                 }
             },
-            modifiers: [
-                interactjs_1.default.modifiers.restrictRect({
-                    restriction: 'parent',
-                    endOnly: true
-                })
-            ]
+            // modifiers: [
+            //     interact.modifiers.restrictRect({
+            //         restriction: 'parent',
+            //         endOnly: true
+            //     })
+            // ]
         });
         this.lineListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .lineDragRect.x1")
             .draggable({

package/src/scripts/js/scripts/handlers/DeleteHandler.js

@@ -29,6 +29,8 @@ class DeleteHandler {
         this.backSpaceHandler = (function backSpaceHandler(e) {
             if (!cq.hasActiveElement(this.containerId))
                 return;
+            if (cq.getContainer(this.containerId).querySelector("[contenteditable=\"true\"]"))
+                return;
             if (e.code !== "Backspace")
                 return;
             var hasRests = false;

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

@@ -63,52 +63,65 @@ class InsertModeHandler {
             .resetListeners();
         this.deleteHandler.setListeners();
         (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.setm2s(this.m2s);
+        this.labelHandler.deactivateHarmonyHighlight();
         //this.annotations?.updateCanvas()
         //this.annotations?.resetTextListeners() // annotations should also be interactable when in notation mode
         //this.activateSelectionMode()
     }
     activateAnnotationMode() {
-        var _a;
+        var _a, _b;
         this.insertDeactivate();
         var that = this;
         this.keyMode = false;
         this.clickInsertMode = false;
-        var selectedButton = (_a = this.container.querySelector("#annotGroupKM button.selected")) === null || _a === void 0 ? void 0 : _a.id;
-        switch (selectedButton) {
-            case "harmonyAnnotButton":
-                this.activateHarmonyMode();
-                this.harmonyMode = true;
-                this.annotationMode = false;
-                break;
-            case "staticTextButton":
-            case "linkedAnnotButton":
-                this.container.classList.remove("harmonyMode");
-                this.annotationMode = true;
-                this.harmonyMode = false;
-                if (this.annotations == undefined) {
-                    this.annotations = new Annotations_1.default(this.containerId);
-                }
-                else {
-                    this.annotations.updateCanvas();
-                }
-                this.annotations.setAnnotationCanvas(cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
-                this.annotations.updateLinkedTexts();
-                break;
+        var selectedButtonId = (_a = this.container.querySelector("#annotGroupKM button.selected")) === null || _a === void 0 ? void 0 : _a.id;
+        setAnnotationState(selectedButtonId);
+        // the annotationgroup buttons are just created, when AnnnotationTabBtn is clicked
+        (_b = Array.from(this.container.querySelectorAll("#annotGroupKM button"))) === null || _b === void 0 ? void 0 : _b.forEach(b => {
+            b.addEventListener("click", setButtonId);
+        });
+        function setButtonId(e) {
+            selectedButtonId = e.target.id;
+            setAnnotationState(selectedButtonId);
+        }
+        function setAnnotationState(selectedButtonId) {
+            switch (selectedButtonId) {
+                case "harmonyAnnotButton":
+                    that.harmonyMode = true;
+                    that.annotationMode = false;
+                    that.isGlobal = false;
+                    that.activateHarmonyMode();
+                    break;
+                case "staticTextButton":
+                case "linkedAnnotButton":
+                    that.container.classList.remove("harmonyMode");
+                    that.annotationMode = true;
+                    that.harmonyMode = false;
+                    if (that.annotations == undefined) {
+                        that.annotations = new Annotations_1.default(that.containerId);
+                    }
+                    else {
+                        that.annotations.updateCanvas();
+                    }
+                    that.annotations.setAnnotationCanvas(cq.getInteractOverlay(that.containerId).querySelector("#annotationCanvas"));
+                    that.annotations.updateLinkedTexts();
+                    break;
+            }
+            that.annotations
+                .setContainerId(that.containerId)
+                .setm2s(that.m2s)
+                .setMusicProcessor(that.musicPlayer)
+                //.setToFront()
+                .setListeners()
+                .setMenuClickHandler();
         }
-        this.annotations
-            .setContainerId(this.containerId)
-            .setm2s(this.m2s)
-            .setMusicProcessor(this.musicPlayer)
-            //.setToFront()
-            .setListeners()
-            .setMenuClickHandler();
     }
     activateHarmonyMode() {
         if (this.labelHandler == undefined) {
             this.labelHandler = new LabelHandler_1.default(this.containerId);
         }
         //Activate/ Deactivate Global functions according to selected harmonymode
-        if (this.container.querySelector("#activateHarm.selected, #harmonyAnnotButton.selected") !== null) {
+        if (!this.isGlobal) {
             this.insertDeactivate();
             this.container.classList.add("harmonyMode");
             this.isGlobal = false;

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

@@ -183,7 +183,7 @@ class LabelHandler {
      * Open Inputbox for (first) selected Note
      */
     harmonyLabelHandler(e) {
-        var nextNote = this.vrvSVG.querySelector(".note.marked, .chord.marked");
+        var nextNote = this.vrvSVG.querySelector(".note.marked, .chord.marked, .rest.marked");
         if (nextNote === null) {
             return;
         }
@@ -328,7 +328,7 @@ class LabelHandler {
         if (refElementClass === "harm") { // change existing harm
             let harmLabel = label;
             harmLabel.modifyLabel(text);
-            //this.currentMEI.getElementById(harmLabel.getElement().id).replaceWith(harmLabel.getElement())
+            this.currentMEI.getElementById(harmLabel.getElement().id).replaceWith(harmLabel.getElement());
         }
         else if (["note", "chord"].some(cn => refElementClass === cn)) { //create new harm
             let harmLabel = this.setLabel(labelDiv.textContent, labelDiv.closest("g").getAttribute("refElementId"));
@@ -382,8 +382,8 @@ class LabelHandler {
         text.setAttribute("y", (posy).toString());
         textForeignObject.setAttribute("x", "0");
         textForeignObject.setAttribute("y", "0");
-        textForeignObject.setAttribute("height", "1000"); //(textDiv.clientHeight + 2 * rectPadding).toString())
-        textForeignObject.setAttribute("width", "1000"); //(textDiv.clientHeight + 2 * rectPadding).toString())
+        // textForeignObject.setAttribute("height", "1000") //(textDiv.clientHeight + 2 * rectPadding).toString())
+        // textForeignObject.setAttribute("width", "1000")//(textDiv.clientHeight + 2 * rectPadding).toString())
         this.labelCanvas.appendChild(textGroup);
         textGroup.appendChild(text);
         textForeignObject.appendChild(textDiv);

package/src/scripts/js/scripts/handlers/PhantomElementHandler.js

@@ -76,24 +76,26 @@ class PhantomElementHandler {
         var _a, _b, _c, _d, _e;
         if (this.m2s.getLastMouseEnter().staff === null)
             return;
-        // var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay)
-        // var relX = pt.x
-        // var relY = pt.y
         var definitionScale = (_b = cq.getVrvSVG(this.containerId).querySelector("#" + ((_a = this.m2s.getLastMouseEnter().staff) === null || _a === void 0 ? void 0 : _a.getAttribute("refId")))) === null || _b === void 0 ? void 0 : _b.closest(".definition-scale");
-        if (definitionScale == undefined || definitionScale == null)
+        if (!definitionScale)
             return;
-        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay);
+        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, cq.getInteractOverlay(this.containerId));
         var relX = pt.x;
         var relY = pt.y;
-        var dsCoords = coordinates.getDOMMatrixCoordinates(definitionScale, definitionScale.closest(".page"));
-        //console.log(relX, dsCoords, definitionScale.getBoundingClientRect())
+        var dsCoords = coordinates.getDOMMatrixCoordinates(definitionScale, cq.getInteractOverlay(this.containerId));
         if (relX < dsCoords.left || relX > dsCoords.right) {
             this.isTrackingMouse = false;
             return;
         }
         this.isTrackingMouse = true;
         var target = e.target;
-        target = target.closest("g");
+        try {
+            target = target.closest("g");
+        }
+        catch (error) {
+            console.log(e, target);
+            return;
+        }
         var options = {};
         if (target === null || target === void 0 ? void 0 : target.classList.contains("staffLine")) {
             options["staffLineId"] = target.id;
@@ -117,9 +119,6 @@ class PhantomElementHandler {
             });
             this.setPhantomLineListeners();
         }
-        // if(e.type === "draggingNote"){
-        //     console.log(phantomNoteElement, this.phantomLines)
-        // }
     }
     removeLines() {
         var lines = this.interactionOverlay.querySelectorAll(".phantomLine");

package/src/scripts/js/scripts/handlers/WindowHandler.js

@@ -4,10 +4,6 @@ const cq = require("../utils/convenienceQueries");
 const meiConverter = require("../utils/MEIConverter");
 class WindowHandler {
     constructor() {
-        /**
-         * Update all elements that are affected by a window size change
-         */
-        this.scrollingTimer = new Array();
         this.updateFunction = this.update.bind(this);
         /**
          * Reload svg when registered events ended
@@ -26,17 +22,18 @@ class WindowHandler {
         while (this.w !== this.w.parent) {
             this.w = this.w.parent;
         }
+        this.scrollingTimer = new Array();
     }
     setListeners() {
         this.eventContainer = this.container;
         window.addEventListener("scroll", this.updateFunction);
         //window.addEventListener("resize", this.update)
-        this.w.addEventListener("resize", this.reloadSVGFunction);
+        //this.w.addEventListener("resize", this.reloadSVGFunction)
         this.w.addEventListener("deviceorientation", this.updateFunction);
         this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.updateFunction);
-        this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.reloadSVGFunction);
+        //this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.reloadSVGFunction)
         this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.updateFunction);
-        this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.reloadSVGFunction);
+        //this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.reloadSVGFunction)
         this.vrvSVG.addEventListener("scroll", this.updateFunction);
         //this.vrvSVG.addEventListener("resize", this.update)
         this.vrvSVG.addEventListener("deviceorientation", this.updateFunction);
@@ -71,6 +68,9 @@ class WindowHandler {
         (_h = this.eventContainer) === null || _h === void 0 ? void 0 : _h.removeEventListener("loadingEnd", this.loadContainerAttrFunction);
         return this;
     }
+    /**
+     * Update all elements that are affected by a window size change
+     */
     update(e) {
         var _a;
         // special rule for transition events since so much with different propertynames are fired

package/src/scripts/js/scripts/utils/MEIOperations.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setArticulation = exports.getTimestamp = exports.getElementTimestampById = exports.insertTempo = exports.insertMeter = exports.replaceMeterInScoreDef = exports.insertKey = exports.replaceKeyInScoreDef = exports.insertClef = exports.replaceClefinScoreDef = exports.paste = exports.createTuplet = exports.addLayerForStaff = exports.removeStaff = exports.addStaff = exports.removeMeasure = exports.addMeasure = exports.cleanUp = exports.elementIsOverfilling = exports.changeDur = exports.changeDurationsInLayer = exports.fillLayerWithRests = exports.fillWithRests = exports.disableFeatures = exports.changeMeter = exports.transposeByStep = exports.mergeArticToParent = exports.mergeSectionScoreDefToLayer = exports.adjustAccids = exports.extrapolateMeter = exports.getAbsoluteRatio = exports.connectNotes = exports.addToMEI = exports.getMeterRatioLocal = exports.removeFromMEI = void 0;
+exports.setArticulation = exports.getTimestamp = exports.getElementTimestampById = exports.insertTempo = exports.insertMeter = exports.replaceMeterInScoreDef = exports.insertKey = exports.replaceKeyInScoreDef = exports.insertClef = exports.replaceClefinScoreDef = exports.paste = exports.createTuplet = exports.addLayerForStaff = exports.removeStaff = exports.addStaff = exports.removeMeasure = exports.addMeasure = exports.adjustOrderNumbers = exports.cleanUp = exports.elementIsOverfilling = exports.changeDur = exports.changeDurationsInLayer = exports.fillLayerWithRests = exports.fillWithRests = exports.disableFeatures = exports.changeMeter = exports.transposeByStep = exports.mergeNotechildrenToAttributes = exports.mergeArticToParent = exports.mergeSectionScoreDefToLayer = exports.adjustAccids = exports.extrapolateMeter = exports.getAbsoluteRatio = exports.connectNotes = exports.addToMEI = exports.getMeterRatioLocal = exports.removeFromMEI = void 0;
 const meiConverter = require("./MEIConverter");
 const random_1 = require("./random");
 const constants_1 = require("../constants");
@@ -980,6 +980,14 @@ function mergeArticToParent(currentMEI) {
     return currentMEI;
 }
 exports.mergeArticToParent = mergeArticToParent;
+function mergeNotechildrenToAttributes(currentMEI) {
+    currentMEI.querySelectorAll("note > *").forEach(a => {
+        a.parentElement.setAttribute(a.tagName, a.getAttribute(a.tagName));
+        a.remove();
+    });
+    return currentMEI;
+}
+exports.mergeNotechildrenToAttributes = mergeNotechildrenToAttributes;
 /**
  * Transpose marked notes according to direcion (up or down)
  * @param currentMEI
@@ -1137,65 +1145,6 @@ function fillLayerWithRests(layer, currentMEI) {
     }
 }
 exports.fillLayerWithRests = fillLayerWithRests;
-/**
- * Fill Empty Space with rest
- * @deprecated
- * @param currentMEI
- */
-function _fillWithRests(currentMEI) {
-    var staffDef = currentMEI.getElementsByTagName("staffDef").item(0);
-    var meterCount;
-    var meterUnit;
-    var meterRatio;
-    if (staffDef.getAttribute(constants_1.constants._METERCOUNT_) !== null && staffDef.getAttribute(constants_1.constants._METERUNIT_) !== null) {
-        meterCount = staffDef.getAttribute(constants_1.constants._METERCOUNT_);
-        meterUnit = staffDef.getAttribute(constants_1.constants._METERUNIT_);
-        meterRatio = parseInt(meterCount) / parseInt(meterUnit);
-    }
-    else {
-        var meterRatio = getMeterRatioGlobal(currentMEI);
-        meterCount = (meterRatio * 4).toString();
-        meterUnit = "4";
-    }
-    currentMEI.querySelectorAll("measure").forEach(m => {
-        m.querySelectorAll("staff").forEach(s => {
-            s.querySelectorAll("layer").forEach((l, idx) => {
-                //mRest for empty Layer
-                if (l.childElementCount === 0) {
-                    if (idx === 0) {
-                        var restEl = document.createElementNS(constants_1.constants._MEINS_, "mRest");
-                        l.appendChild(restEl);
-                    }
-                    else { // remove 1+ empty layer
-                        l.remove();
-                    }
-                }
-                else {
-                    var actualMeterFill = getAbsoluteRatio(l);
-                    var ratioDiff = Math.abs(actualMeterFill - meterRatio);
-                    var smallestValue = gcd(ratioDiff);
-                    //var restDurs = findDotsRecursive(ratioDiff, gcd(ratioDiff))
-                    if (Number.isInteger(ratioDiff / smallestValue) && ratioDiff > 0) {
-                        var leftRatio = ratioDiff;
-                        var durArr = new Array();
-                        while (!Number.isInteger(1 / leftRatio)) {
-                            var leftRatio = ratioDiff - smallestValue;
-                            durArr.push(1 / smallestValue);
-                        }
-                        durArr.push(1 / leftRatio);
-                        durArr = durArr.reverse();
-                        durArr.forEach(dur => {
-                            var newRest = currentMEI.createElementNS(constants_1.constants._MEINS_, "rest");
-                            newRest.setAttribute("dur", dur.toString());
-                            l.appendChild(newRest);
-                        });
-                    }
-                    //console.log(document.getElementById(l.id), ratioDiff, gcd(ratioDiff), durArr)
-                }
-            });
-        });
-    });
-}
 /**
  * Replace given id with rest
  * @param element element from svg
@@ -1519,6 +1468,27 @@ function adjustRests(currentMEI) {
         }
     });
 }
+function adjustOrderNumbers(currentMEI) {
+    function setN(nodeList) {
+        var tagCounter = new Map();
+        nodeList.forEach(n => {
+            if (!tagCounter.has(n.tagName)) {
+                tagCounter.set(n.tagName, 1);
+            }
+            n.setAttribute("n", tagCounter.get(n.tagName).toString());
+            tagCounter.set(n.tagName, tagCounter.get(n.tagName) + 1);
+        });
+    }
+    setN(currentMEI.querySelectorAll("measure"));
+    currentMEI.querySelectorAll("measure").forEach(m => {
+        setN(m.querySelectorAll("staff"));
+    });
+    currentMEI.querySelectorAll("staff").forEach(s => {
+        setN(s.querySelectorAll("layer"));
+    });
+    return currentMEI;
+}
+exports.adjustOrderNumbers = adjustOrderNumbers;
 /**
  * Give harm new start id if related note was included in chord during process
  * @param currentMEI

package/src/scripts/js/scripts/utils/SVGEditor.js

@@ -427,9 +427,24 @@ class SVGEditor {
     }
     setActiveLayer() {
         var container = cq.getContainer(this.containerId);
-        if (!container.querySelector(".layer.activeLayer")) {
-            container.querySelectorAll(".layer[n='1']").forEach(l => l.classList.add("activeLayer"));
-        }
+        var staffN = "0";
+        // find out if all staves have at least one active layer
+        container.querySelectorAll(".staff").forEach(s => {
+            var n = s.getAttribute("n");
+            if (parseInt(n) > parseInt(staffN))
+                staffN = n;
+        });
+        var i = 1;
+        do {
+            let activeLayer = container.querySelector(`.staff[n='${i}'] > .layer.activeLayer`);
+            if (!activeLayer) {
+                container.querySelectorAll(`.staff[n='${i}'] > .layer[n='1']`).forEach(l => l.classList.add("activeLayer"));
+            }
+            i += 1;
+        } while (i <= parseInt(staffN));
+        // if (!container.querySelector(".layer.activeLayer")) {
+        //     container.querySelectorAll(".layer[n='1']").forEach(l => l.classList.add("activeLayer"))
+        // }
         container.querySelectorAll(".activeLayer").forEach(al => {
             var staffN = al.closest(".staff").getAttribute("n");
             var layerN = al.getAttribute("n");

package/src/scripts/js/scripts/utils/VerovioWrapper.js

@@ -12,9 +12,9 @@ class VerovioWrapper {
         //@ts-ignore
         this.vrvToolkit = new verovio.toolkit() || null;
         this.r = 1;
-        // if (this.isRetina()) {
-        //   this.r = 2
-        // }
+        if (this.isRetina()) {
+            this.r = 2;
+        }
         this.widthValue = 1500;
         var pageWidth = (this.widthValue / (window.devicePixelRatio / this.r)) / (screen.availHeight / window.innerWidth);
         this.options = {
@@ -24,7 +24,7 @@ class VerovioWrapper {
             pageMarginTop: 50,
             adjustPageHeight: true,
             font: 'Bravura',
-            pageWidth: pageWidth,
+            //pageWidth: pageWidth, // adjust size with window size
             //pageHeight: pageWidth / 4,
             //justifyVertically: true,
             svgViewBox: true,

package/src/scripts/js/scripts/utils/coordinates.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformToDOMMatrixCoordinates = exports.getDOMMatrixCoordinates = void 0;
+exports.transformToDOMMatrixCoordinates = exports.getCanvasCordinates = exports.getDOMMatrixCoordinates = void 0;
 /**
  * Get DOMMatrix coordnates of element according to parent canvas class. Returns null if no canvas is found. If element is DOMRect, canvas must be provided
  * @param element
@@ -33,9 +33,33 @@ function getDOMMatrixCoordinates(element, canvas = null) {
     ptRB = ptRB.matrixTransform(canvasMatrix);
     var width = ptRB.x - ptLT.x;
     var height = ptRB.y - ptLT.y;
-    return { left: ptLT.x, top: ptLT.y, right: ptRB.x, bottom: ptRB.y, width: width, height: height, x: ptLT.x, y: ptLT.y };
+    return { left: ptLT.x, top: ptLT.y, right: ptRB.x, bottom: ptRB.y, width: width, height: height, x: ptLT.x, y: ptLT.y, matrix: canvasMatrix };
 }
 exports.getDOMMatrixCoordinates = getDOMMatrixCoordinates;
+function getCanvasCordinates(coords, canvas = null) {
+    if (!coords.matrix) {
+        throw new Error("DOMMatrix is missing.");
+    }
+    if (canvas === null) {
+        canvas = canvas instanceof Element ? canvas.closest(".canvas") : null;
+        if (canvas instanceof DOMRect) {
+            throw new Error("Canvas must be provided, if input is instance of DOMRect. Actual instance: " + canvas.constructor.name);
+        }
+        if (canvas === null)
+            return;
+    }
+    // Reverse the transformation
+    var canvasMatrix = coords.matrix.inverse();
+    var ptLT = new DOMPoint(coords.left, coords.top);
+    ptLT = ptLT.matrixTransform(canvasMatrix);
+    var ptRB = new DOMPoint(coords.right, coords.bottom);
+    ptRB = ptRB.matrixTransform(canvasMatrix);
+    var width = ptRB.x - ptLT.x;
+    var height = ptRB.y - ptLT.y;
+    // Create and return the DOMRect
+    return new DOMRect(ptLT.x, ptLT.y, width, height);
+}
+exports.getCanvasCordinates = getCanvasCordinates;
 /**
  * Transforms the given coordinates for a given canvas
  * @param x