vibe-editor 0.0.0 → 0.0.1-dev

package/src/scripts/js/utils/Mouse2SVG.js

@@ -30,7 +30,7 @@ class Mouse2SVG {
         var enteredFlag = "lastEntered";
         var activeContainerFlag = "activeContainer";
         this.container.addEventListener("mouseenter", function (e) {
-            Array.from(document.getElementsByClassName("vse-container")).forEach(ac => {
+            Array.from(document.getElementsByClassName("vibe-container")).forEach(ac => {
                 if (ac === that.container) {
                     if (!that.container.classList.contains(activeContainerFlag)) {
                         that.container.classList.add(activeContainerFlag);
@@ -42,7 +42,7 @@ class Mouse2SVG {
             });
         });
         this.container.addEventListener("mouseleave", function (e) {
-            Array.from(document.getElementsByClassName("vse-container")).forEach(ac => {
+            Array.from(document.getElementsByClassName("vibe-container")).forEach(ac => {
                 if (ac === that.container) {
                     ac.classList.remove(activeContainerFlag);
                 }
@@ -93,7 +93,8 @@ class Mouse2SVG {
                 }
             });
         });
-        this.interactionOverlay.querySelectorAll(".layer").forEach(layer => {
+        //this.interactionOverlay.querySelectorAll(".layer.activeLayer").forEach(layer => {
+        this.container.querySelectorAll(".layer.activeLayer").forEach(layer => {
             layer.addEventListener(mouseEventName, function (e) {
                 e.preventDefault();
                 var target = e.target;
@@ -104,6 +105,7 @@ class Mouse2SVG {
                     });
                     that.lastLayerMouseEnter.classList.add(enteredFlag);
                 }
+                console.log(that.lastLayerMouseEnter);
             });
         });
         return this;
@@ -157,28 +159,66 @@ class Mouse2SVG {
         this.measureMatrix.populateFromMEI(this.currentMEI);
         var staves = this.currentMEI.querySelectorAll("staff"); //cq.getVrvSVG(this.containerId).querySelectorAll(".staff")
         Array.from(staves).forEach(element => {
-            let g = cq.getVrvSVG(this.containerId).querySelectorAll("#" + element.id + " > path");
-            let staff = element;
-            let idxStaff = parseInt(element.getAttribute("n")) - 1;
-            let closestMeasure = element.closest("measure");
-            let idxParentMeasure = parseInt(closestMeasure.getAttribute("n")) - 1;
-            let clefShape = this.measureMatrix.get(idxParentMeasure, idxStaff).clef;
+            const g = cq.getVrvSVG(this.containerId).querySelectorAll("#" + element.id + " > path");
+            const staff = element;
+            const idxStaff = parseInt(element.getAttribute("n")) - 1;
+            const closestMeasure = element.closest("measure");
+            const idxParentMeasure = parseInt(closestMeasure.getAttribute("n")) - 1;
+            const clefShape = this.measureMatrix.get(idxParentMeasure, idxStaff).clef;
+            const clefline = this.measureMatrix.get(idxParentMeasure, idxStaff).clefline;
+            const clefDisplacement = this.measureMatrix.get(idxParentMeasure, idxStaff).clefdisplacement;
             Array.from(g).forEach((staffLine, idx) => {
                 if (staffLine.id === "") {
                     staffLine.id = random_1.uuidv4();
                 }
                 staffLine.classList.add("staffLine");
-                staffLine.classList.add("Clef" + clefShape);
+                staffLine.classList.add("Clef" + clefShape + clefline + clefDisplacement);
                 var map = null;
                 switch (clefShape) {
                     case "G":
-                        map = mappings_1.idxNoteMapGClef;
+                        switch (clefDisplacement) {
+                            case "8below":
+                                map = mappings_1.idxNoteMapGClefOctDown;
+                                break;
+                            case "8above":
+                                map = mappings_1.idxNoteMapGClefOctUp;
+                                break;
+                            case null:
+                                map = mappings_1.idxNoteMapGClef;
+                                break;
+                        }
                         break;
                     case "F":
-                        map = mappings_1.idxNoteMapFClef;
+                        switch (clefDisplacement) {
+                            case "8below":
+                                map = mappings_1.idxNoteMapFClefOctDown;
+                                break;
+                            case "8above":
+                                map = mappings_1.idxNoteMapFClefOctUp;
+                                break;
+                            case null:
+                                map = mappings_1.idxNoteMapFClef;
+                                break;
+                        }
                         break;
                     case "C":
-                        map = mappings_1.idxNoteMapCClef;
+                        switch (clefline) {
+                            case "1":
+                                map = mappings_1.idxNoteMapCClefSoprano;
+                                break;
+                            case "2":
+                                map = mappings_1.idxNoteMapCClefMezzo;
+                                break;
+                            case "3":
+                                map = mappings_1.idxNoteMapCClefAlto;
+                                break;
+                            case "4":
+                                map = mappings_1.idxNoteMapCClefTenor;
+                                break;
+                            case "5":
+                                map = mappings_1.idxNoteMapCClefBariton;
+                                break;
+                        }
                         break;
                     default:
                         console.error("No Clef found");
@@ -233,7 +273,7 @@ class Mouse2SVG {
      * @param y client Coordinate
      */
     defineNote(x, y, options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         let staffIsEmpty = true;
         let isLeftOfNote;
         //let isRightOfNote: Boolean
@@ -261,23 +301,26 @@ class Mouse2SVG {
                 staffIsEmpty = false;
             }
         });
-        var currentStaffClef;
-        var entries = (_j = (_h = (_g = this.getElementinVrvSVG((_f = this.lastStaffMouseEnter) === null || _f === void 0 ? void 0 : _f.getAttribute("refId"))) === null || _g === void 0 ? void 0 : _g.querySelector(".staffLine")) === null || _h === void 0 ? void 0 : _h.classList) === null || _j === void 0 ? void 0 : _j.entries();
-        if ([null, undefined].some(n => entries == n))
-            return;
-        for (const [key, value] of entries) {
-            if (value.indexOf("Clef") !== -1) {
-                currentStaffClef = value;
-                break;
-            }
-        }
+        // var currentStaffClef: string
+        // var entries = this.getElementinVrvSVG(this.lastStaffMouseEnter?.getAttribute("refId"))?.querySelector(".staffLine")?.classList?.entries()
+        // if([null, undefined].some(n => entries == n)) return
+        // for (const [key, value] of entries) {
+        //     if (value.includes("Clef")) {
+        //         currentStaffClef = value
+        //         break;
+        //     }
+        // }
+        const col = (_g = this.getElementinVrvSVG((_f = this.lastStaffMouseEnter) === null || _f === void 0 ? void 0 : _f.getAttribute("refId"))) === null || _g === void 0 ? void 0 : _g.getAttribute("n");
+        const row = (_j = this.getElementinVrvSVG((_h = this.lastStaffMouseEnter) === null || _h === void 0 ? void 0 : _h.getAttribute("refId"))) === null || _j === void 0 ? void 0 : _j.closest(".measure").getAttribute("n");
+        const currentStaff = this.measureMatrix.get(row, col);
         // Define relative position for click insert
         // position should also consider right border of bounding box. Position should be 
         if (!staffIsEmpty) {
             let nbb = [];
             this.noteBBoxes.forEach(bb => {
                 var _a;
-                if (bb.parentStaff.id === ((_a = this.lastStaffMouseEnter) === null || _a === void 0 ? void 0 : _a.getAttribute("refId"))) {
+                //console.log(bb.parentStaff.id === this.lastStaffMouseEnter?.getAttribute("refId"), Array.from(this.container.querySelectorAll(".activeLayer")).some(l => bb.parentLayer.id === l.id), Array.from(this.container.querySelectorAll(".activeLayer")), bb.parentLayer)
+                if (bb.parentStaff.id === ((_a = this.lastStaffMouseEnter) === null || _a === void 0 ? void 0 : _a.getAttribute("refId")) && Array.from(this.container.querySelectorAll(".activeLayer")).some(l => bb.parentLayer.id === l.id)) {
                     nbb.push(bb);
                 }
             });
@@ -311,21 +354,93 @@ class Mouse2SVG {
             let lineArr = aboveSystem ? this.phantomStaffLinesAbove : this.phantomStaffLinesBelow;
             let aboveMap;
             let belowMap;
-            switch (currentStaffClef) {
-                case "ClefG":
-                    aboveMap = mappings_1.idxNotePhantomMapAboveG;
-                    belowMap = mappings_1.idxNotePhantomMapBelowG;
-                    break;
-                case "ClefF":
-                    aboveMap = mappings_1.idxNotePhantomMapAboveF;
-                    belowMap = mappings_1.idxNotePhantomMapBelowF;
-                    break;
-                case "ClefC":
-                    aboveMap = mappings_1.idxNotePhantomMapAboveC;
-                    belowMap = mappings_1.idxNotePhantomMapBelowC;
-                    break;
-                default:
-                    console.log("NO CLEF FOUND");
+            // switch (currentStaffClef) {
+            //     case "ClefG2":
+            //         aboveMap = idxNotePhantomMapAboveG
+            //         belowMap = idxNotePhantomMapBelowG
+            //         break;
+            //     case "ClefF4":
+            //         aboveMap = idxNotePhantomMapAboveF
+            //         belowMap = idxNotePhantomMapBelowF
+            //         break;
+            //     case "ClefC1":
+            //         aboveMap = idxNotePhantomMapAboveCSoprano
+            //         belowMap = idxNotePhantomMapBelowCSoprano
+            //         break;
+            //     case "ClefC2":
+            //         aboveMap = idxNotePhantomMapAboveCMezzo
+            //         belowMap = idxNotePhantomMapBelowCMezzo
+            //         break;
+            //     case "ClefC3":
+            //         aboveMap = idxNotePhantomMapAboveCAlto
+            //         belowMap = idxNotePhantomMapBelowCAlto
+            //         break;
+            //     case "ClefC4":
+            //         aboveMap = idxNotePhantomMapAboveCTenor
+            //         belowMap = idxNotePhantomMapBelowCTenor
+            //         break;
+            //     case "ClefC5":
+            //         aboveMap = idxNotePhantomMapAboveCBariton
+            //         belowMap = idxNotePhantomMapBelowCBariton
+            //         break;
+            //     default:
+            //         console.log("NO CLEF FOUND")
+            // }
+            if (currentStaff.clef === "G") {
+                switch (currentStaff.clefdisplacement) {
+                    case null:
+                        aboveMap = mappings_1.idxNotePhantomMapAboveG;
+                        belowMap = mappings_1.idxNotePhantomMapBelowG;
+                        break;
+                    case "8above":
+                        aboveMap = mappings_1.idxNotePhantomMapAboveGOctUp;
+                        belowMap = mappings_1.idxNotePhantomMapBelowGOctUp;
+                        break;
+                    case "8below":
+                        aboveMap = mappings_1.idxNotePhantomMapAboveGOctDown;
+                        belowMap = mappings_1.idxNotePhantomMapBelowGOctDown;
+                        break;
+                }
+            }
+            else if (currentStaff.clef === "F") {
+                switch (currentStaff.clefdisplacement) {
+                    case null:
+                        aboveMap = mappings_1.idxNotePhantomMapAboveF;
+                        belowMap = mappings_1.idxNotePhantomMapBelowF;
+                        break;
+                    case "8above":
+                        aboveMap = mappings_1.idxNotePhantomMapAboveFOctUp;
+                        belowMap = mappings_1.idxNotePhantomMapBelowFOctUp;
+                        break;
+                    case "8below":
+                        aboveMap = mappings_1.idxNotePhantomMapAboveFOctDown;
+                        belowMap = mappings_1.idxNotePhantomMapBelowFOctDown;
+                        break;
+                }
+            }
+            else if (currentStaff.clef === "C") {
+                switch (currentStaff.clefline) {
+                    case "1":
+                        aboveMap = mappings_1.idxNotePhantomMapAboveCSoprano;
+                        belowMap = mappings_1.idxNotePhantomMapBelowCSoprano;
+                        break;
+                    case "2":
+                        aboveMap = mappings_1.idxNotePhantomMapAboveCMezzo;
+                        belowMap = mappings_1.idxNotePhantomMapBelowCMezzo;
+                        break;
+                    case "3":
+                        aboveMap = mappings_1.idxNotePhantomMapAboveCAlto;
+                        belowMap = mappings_1.idxNotePhantomMapBelowCAlto;
+                        break;
+                    case "4":
+                        aboveMap = mappings_1.idxNotePhantomMapAboveCTenor;
+                        belowMap = mappings_1.idxNotePhantomMapBelowCTenor;
+                        break;
+                    case "5":
+                        aboveMap = mappings_1.idxNotePhantomMapAboveCBariton;
+                        belowMap = mappings_1.idxNotePhantomMapBelowCBariton;
+                        break;
+                }
             }
             let map = aboveSystem ? aboveMap : belowMap;
             let mappingidx = 0;
@@ -398,12 +513,38 @@ class Mouse2SVG {
                 let map = null;
                 if (currentNearestStaffLine.classList.contains("ClefG")) {
                     map = mappings_1.idxNoteMapGClef;
+                    if (currentNearestStaffLine.classList.contains("ClefG28above")) {
+                        map = mappings_1.idxNoteMapGClefOctUp;
+                    }
+                    else if (currentNearestStaffLine.classList.contains("ClefG28below")) {
+                        map = mappings_1.idxNoteMapGClefOctDown;
+                    }
                 }
                 else if (currentNearestStaffLine.classList.contains("ClefF")) {
                     map = mappings_1.idxNoteMapFClef;
+                    if (currentNearestStaffLine.classList.contains("ClefF48above")) {
+                        map = mappings_1.idxNoteMapFClefOctUp;
+                    }
+                    else if (currentNearestStaffLine.classList.contains("ClefF48below")) {
+                        map = mappings_1.idxNoteMapFClefOctDown;
+                    }
                 }
                 else if (currentNearestStaffLine.classList.contains("ClefC")) {
-                    map = mappings_1.idxNoteMapCClef;
+                    if (Array.from(currentNearestStaffLine.classList).some(c => c.includes("ClefC1"))) {
+                        map = mappings_1.idxNoteMapCClefSoprano;
+                    }
+                    else if (Array.from(currentNearestStaffLine.classList).some(c => c.includes("ClefC2"))) {
+                        map = mappings_1.idxNoteMapCClefMezzo;
+                    }
+                    else if (Array.from(currentNearestStaffLine.classList).some(c => c.includes("ClefC3"))) {
+                        map = mappings_1.idxNoteMapCClefAlto;
+                    }
+                    else if (Array.from(currentNearestStaffLine.classList).some(c => c.includes("ClefC4"))) {
+                        map = mappings_1.idxNoteMapCClefTenor;
+                    }
+                    else if (Array.from(currentNearestStaffLine.classList).some(c => c.includes("ClefC5"))) {
+                        map = mappings_1.idxNoteMapCClefBariton;
+                    }
                 }
                 else {
                     throw new Error("No Note to Clef Mapping found");
@@ -419,7 +560,7 @@ class Mouse2SVG {
                 try {
                     pitch = cq.getInteractOverlay(this.containerId).querySelector("#" + options.staffLineId).getAttribute("class").split(" ");
                 }
-                catch (_o) {
+                catch (_q) {
                     return;
                 }
                 let p = pitch.filter(function (obj) {
@@ -468,8 +609,9 @@ class Mouse2SVG {
             nearestNoteId: nearestNoteId,
             relPosX: leftRightPos,
             staffId: (_l = this.lastStaffMouseEnter) === null || _l === void 0 ? void 0 : _l.getAttribute("refId"),
+            layerId: (_o = this.container.querySelector(`#${(_m = this.lastStaffMouseEnter) === null || _m === void 0 ? void 0 : _m.getAttribute("refId")} .activeLayer`)) === null || _o === void 0 ? void 0 : _o.id,
             chordElement: options.targetChord,
-            rest: (_m = this.container.querySelector("#pauseNote")) === null || _m === void 0 ? void 0 : _m.classList.contains("selected")
+            rest: (_p = this.container.querySelector("#pauseNote")) === null || _p === void 0 ? void 0 : _p.classList.contains("selected")
         };
         this.newNote = newNote;
     }
@@ -514,6 +656,7 @@ class Mouse2SVG {
             }
             var dist = Math.abs(x - posX);
             var staffCondition = n.parentStaff === this.getElementinVrvSVG((_d = this.lastStaffMouseEnter) === null || _d === void 0 ? void 0 : _d.getAttribute("refId"));
+            staffCondition && (staffCondition = Array.from(this.container.querySelectorAll(".activeLayer")).some(l => n.parentLayer === l));
             if (checkStaff === false) {
                 staffCondition = true;
                 dist = Math.sqrt(Math.abs(x - posX) ** 2 + Math.abs(y - posY) ** 2);
@@ -528,6 +671,17 @@ class Mouse2SVG {
         });
         return nextNote;
     }
+    /**
+     * change to current VOice to interact with.
+     * createLayer if not does not exist
+     * @param staffN
+     * @param voiceN
+     */
+    changeLayer(staffN, voiceN) {
+        if (!this.currentMEI.querySelector(`staff[n='${staffN}'] layer[n='${voiceN}']`)) {
+            meiOperation.addLayerForStaff(this.currentMEI, staffN, voiceN);
+        }
+    }
     ///// GETTER/ SETTER ///////
     getLastMouseEnter() {
         return { layer: this.lastLayerMouseEnter, staff: this.lastStaffMouseEnter, measure: this.lastMeasureMouseEnter, system: this.lastSystemMouseEnter };
@@ -681,6 +835,9 @@ class Mouse2SVG {
             return "4";
         }
         switch (selEl.id) {
+            case "breveNote":
+                dur = 0.5;
+                break;
             case "fullNote":
                 dur = 1;
                 break;

package/src/scripts/js/utils/ReactWrapper.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createColorPicker = void 0;
+const React = require("react");
+const react_color_1 = require("react-color");
+const client_1 = require("react-dom/client");
+const buttonStyleDarkOutline = "btn btn-outline-dark btn-md";
+function createColorPicker(id, onColorChange) {
+    const domNode = document.createElement("div");
+    domNode.setAttribute("id", id);
+    const root = client_1.createRoot(domNode);
+    root.render(React.createElement(ColorPickerWrapper, { onColorChange: onColorChange }));
+    return domNode;
+}
+exports.createColorPicker = createColorPicker;
+function ColorPickerWrapper(props) {
+    const [color, setColor] = React.useState("");
+    const [displayColorPicker, setDispalyColorPicker] = React.useState(false);
+    function handleColor(e) {
+        setColor(e.hex.toString());
+        console.log(e);
+        props.onColorChange(color);
+    }
+    const handleClick = () => {
+        setDispalyColorPicker(!displayColorPicker);
+    };
+    const handleClose = () => {
+        setDispalyColorPicker(false);
+    };
+    const popover = {
+        position: 'absolute',
+        zIndex: '2',
+    };
+    const cover = {
+        position: 'fixed',
+        top: '0px',
+        right: '0px',
+        bottom: '0px',
+        left: '0px',
+    };
+    return (React.createElement("div", null,
+        React.createElement("button", { id: "colorPickerBtn", className: buttonStyleDarkOutline, onClick: handleClick }, "Color"),
+        displayColorPicker ? React.createElement("div", { style: popover },
+            React.createElement("div", { style: cover, onClick: handleClose }),
+            React.createElement(react_color_1.CompactPicker, { onChange: handleColor })) : null));
+}

package/src/scripts/js/utils/RectWrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const react_color_1 = require("react-color");
+class CoreReactWrapper extends react_1.default.Component {
+    render() {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(react_color_1.SketchPicker, null)));
+    }
+}

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

@@ -4,6 +4,7 @@
  * E.g. Cache and Load Information from previous version of the SVG; Copy information form MEI to SVG (and vice versa); Edit DOM structure of Elements
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+const cq = require("../utils/convenienceQueries");
 const meiOperation = require("./MEIOperations");
 const coords = require("../utils/coordinates");
 const random_1 = require("./random");
@@ -51,7 +52,7 @@ class SVGEditor {
         svg.querySelectorAll("*").forEach(el => {
             var _a;
             //if(el.tagName.toLowerCase() === "g" && el.getAttribute("id") !== null){
-            if (el.getAttribute("id") !== null) {
+            if (el.getAttribute("id") !== null && !el.classList.contains("lastAdded")) {
                 if (!this.classListMap.has(el.id)) {
                     this.classListMap.set(el.id, new Array());
                 }
@@ -65,6 +66,36 @@ class SVGEditor {
         });
         return this;
     }
+    cacheStyles() {
+        //var svg = document.querySelector("#"+this.containerId + " #vrvSVG")
+        var svg = document.querySelector("#" + this.containerId);
+        if (svg === null) {
+            return this;
+        }
+        this.styleListMap = new Map();
+        svg.querySelectorAll("[style]").forEach(el => {
+            if (el.getAttribute("id")) {
+                const styles = el.getAttribute("style");
+                if (!this.styleListMap.has(el.id)) {
+                    this.styleListMap.set(el.id, "");
+                }
+                this.styleListMap.set(el.id, styles);
+            }
+        });
+        return this;
+    }
+    loadStyles() {
+        if (this.styleListMap == undefined) {
+            return this;
+        }
+        for (const [key, value] of this.styleListMap.entries()) {
+            var el = this.container.querySelector("#" + key);
+            if (el) {
+                el.setAttribute("style", value);
+            }
+        }
+        return this;
+    }
     cacheScales() {
         var svg = document.querySelector("#" + this.containerId);
         if (svg === null) {
@@ -113,11 +144,13 @@ class SVGEditor {
         if (this.classListMap == undefined) {
             return this;
         }
-        if (element !== null) {
+        if (element) {
             var value = this.classListMap.get(element.id);
             if (value == undefined)
                 return this;
             value.forEach(v => {
+                if (v === "hideUI")
+                    return;
                 if (v !== "") {
                     element.classList.add(v);
                 }
@@ -129,6 +162,8 @@ class SVGEditor {
                 if (el !== null) {
                     //el.removeAttribute("class")
                     value.forEach(v => {
+                        if (v === "hideUI")
+                            return;
                         if (v !== "") {
                             el.classList.add(v);
                         }
@@ -276,7 +311,7 @@ class SVGEditor {
         });
     }
     /**
- * Mark the current Measere as overfilled by writing "+!" over the barline
+ * Mark the current Measure as overfilled by writing "+!" over the barline
  * @param currentMEI
  */
     markOverfilledMeasures(currentMEI) {
@@ -318,6 +353,48 @@ class SVGEditor {
             });
         });
     }
+    /**
+     * Hide Rests of same duration in parallel layers. Also hide rests, when layer (n >= 2) is just rests.
+     * @param currentMEI MEI to parse and compute relationships. Provides IDs for elements in SVG.
+     * @returns this
+     */
+    hideRedundantRests(currentMEI) {
+        currentMEI.querySelectorAll("staff").forEach(s => {
+            var prevLayerElements;
+            const vrv = cq.getVrvSVG(this.containerId);
+            s.querySelectorAll("layer").forEach(l => {
+                if (parseInt(l.getAttribute("n")) === 1) {
+                    prevLayerElements = Array.from(l.children);
+                    return;
+                }
+                if (parseInt(l.getAttribute("n")) >= 2) {
+                    if (!prevLayerElements) {
+                        prevLayerElements = Array.from(l.children);
+                        return;
+                    }
+                    const notes = l.querySelectorAll("note");
+                    if (notes.length === 0) {
+                        Array.from(l.children).forEach(c => vrv.querySelectorAll(`#${c.id} use`).forEach(u => u.setAttribute("visibility", "hidden")));
+                    }
+                    else {
+                        Array.from(l.children).forEach(c => {
+                            prevLayerElements.forEach(ple => {
+                                var _a;
+                                const isRest = ple.tagName.toLowerCase().includes("rest") && c.tagName.toLowerCase().includes("rest");
+                                const sameDur = ple.getAttribute("dur") === c.getAttribute("dur");
+                                const sameTstamp = meiOperation.getTimestamp(ple) === meiOperation.getTimestamp(c);
+                                if (isRest && sameDur && sameTstamp) {
+                                    (_a = vrv.querySelector(`#${c.id} use`)) === null || _a === void 0 ? void 0 : _a.setAttribute("visibility", "hidden");
+                                }
+                            });
+                        });
+                    }
+                    prevLayerElements = Array.from(l.children);
+                }
+            });
+        });
+        return this;
+    }
     distributeIds(element, propagation = false) {
         if (propagation) {
             var id = element.id !== "" ? element.id : element.getAttribute("refId");
@@ -338,6 +415,20 @@ class SVGEditor {
         }
         return this;
     }
+    setActiveLayer() {
+        var container = cq.getContainer(this.containerId);
+        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");
+            container.querySelectorAll(`.staff[n='${staffN}'] > .layer[n='${layerN}']`).forEach(layer => {
+                layer.classList.add("activeLayer");
+            });
+        });
+        return this;
+    }
     setContainerId(containerId) {
         this.containerId = containerId;
         this.container = document.getElementById(containerId);

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

@@ -24,7 +24,7 @@ class VerovioWrapper {
             pageMarginTop: 50,
             adjustPageHeight: true,
             font: 'Bravura',
-            pageWidth: pageWidth / 2,
+            pageWidth: pageWidth,
             //pageHeight: pageWidth / 4,
             //justifyVertically: true,
             svgViewBox: true,
@@ -140,6 +140,9 @@ class VerovioWrapper {
         var buffer = buffer_1.Buffer.from(midiString, "base64");
         return new midi_1.Midi(buffer);
     }
+    getTimemap() {
+        return this.vrvToolkit.renderToTimemap();
+    }
     /**
      * Get Toolkit instance to use any method of verovio outside of score editor.
      * FOr all available methods go to: https://book.verovio.org/toolkit-reference/toolkit-methods.html
@@ -152,6 +155,8 @@ class VerovioWrapper {
         return this.options;
     }
     setWidthValue(wv) {
+        if (typeof wv === "string")
+            wv = parseFloat(wv);
         this.options.pageWidth = wv;
         this.vrvToolkit.setOptions(this.options);
     }

package/src/scripts/js/utils/convenienceQueries.js

@@ -32,6 +32,8 @@ function getBySelector(parent, parentModulator, target, targetModulator, selecto
 }
 exports.getBySelector = getBySelector;
 function hasActiveElement(containerId) {
+    if (!document.getElementById(containerId))
+        return false;
     return document.getElementById(containerId).classList.contains("activeContainer");
 }
 exports.hasActiveElement = hasActiveElement;