vibe-editor 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vibe-editor",
-    "version": "0.0.2",
+    "version": "0.0.4",
     "main": "src/scripts/js/VIBE.js",
     "keywords": [],
     "author": "Matthias Nowakowski",
@@ -14,7 +14,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/Core.js

@@ -194,7 +194,7 @@ class Core {
             return new Promise((resolve, reject) => {
                 var _a;
                 var message = {
-                    id: (0, random_1.uuidv4)(),
+                    id: random_1.uuidv4(),
                     action: 'renderToSVG',
                     pageNo: pageNo
                 };
@@ -307,7 +307,7 @@ class Core {
         }
         //just render the data once to make pagecount accessible
         var message = {
-            id: (0, random_1.uuidv4)(),
+            id: random_1.uuidv4(),
             action: 'renderData',
             mei: d,
             isUrl: u
@@ -549,7 +549,7 @@ class Core {
         return new Promise((resolve, reject) => {
             const message = {
                 action: "getMEI",
-                id: (0, random_1.uuidv4)()
+                id: random_1.uuidv4()
             };
             var response;
             response = this.verovioWrapper.setMessage(message);
@@ -566,7 +566,7 @@ class Core {
         return new Promise((resolve, reject) => {
             const message = {
                 action: "renderToMidi",
-                id: (0, random_1.uuidv4)()
+                id: random_1.uuidv4()
             };
             var response = this.verovioWrapper.setMessage(message);
             if (response.midi) {

package/src/scripts/js/assets/mei_template.js

@@ -134,7 +134,7 @@ class MeiTemplate {
     }
     createTempo(mm, mmUnit, tstamp = null, startId = null) {
         var newElement = document.createElementNS(constants_1.constants._MEINS_, "tempo");
-        newElement.setAttribute("id", (0, random_1.uuidv4)());
+        newElement.setAttribute("id", random_1.uuidv4());
         newElement.setAttribute("place", "above");
         if (startId === null && tstamp === null) {
             throw new Error("Tempo MUST either have timestamp or startId");
@@ -148,7 +148,7 @@ class MeiTemplate {
         newElement.setAttribute("midi.bpm", (parseFloat(mm) * parseFloat(mmUnit)).toString());
         newElement.setAttribute("staff", "1");
         var rend = document.createElementNS(constants_1.constants._MEINS_, "rend");
-        rend.setAttribute("id", (0, random_1.uuidv4)());
+        rend.setAttribute("id", random_1.uuidv4());
         rend.setAttribute("fontname", "VerovioText");
         rend.textContent = "__";
         newElement.appendChild(rend);

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

@@ -292,7 +292,7 @@ class Annotations {
         var posy = pt.y; //matrixTransform(rootMatrix).y //e.pageY - this.rootBBox.y - window.pageYOffset
         var annotationTarget = this.m2s.findScoreTarget(posx, posy, false);
         var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
-        textGroup.setAttribute("id", (0, random_1.uuidv4)());
+        textGroup.setAttribute("id", random_1.uuidv4());
         textGroup.setAttribute("targetId", annotationTarget.id);
         var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
         if (isLinked)

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

@@ -41,7 +41,7 @@ class HarmonyLabel {
     }
     createElement(inputString) {
         this.element = this.currentMEI.createElement("harm");
-        this.element.setAttribute("id", (0, random_1.uuidv4)());
+        this.element.setAttribute("id", random_1.uuidv4());
         this.element.setAttribute("place", "below");
         Array.from(this.element.children).forEach(c => {
             c.remove();

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 = (0, coordinates_1.getDOMMatrixCoordinates)(this.lastBline, this.vrvSVG);
+        var lastBlineRect = 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 = (0, coordinates_1.getDOMMatrixCoordinates)(staff.querySelector(".staffLine"), this.vrvSVG); //staff.querySelector(".staffLine").getBoundingClientRect()
+                var bbox = 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 = (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 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 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 = (0, coordinates_1.getDOMMatrixCoordinates)(referenceStaff, this.vrvSVG); //referenceStaff.querySelector(".staffLine").getBoundingClientRect()
+            bbox = coordinates_1.getDOMMatrixCoordinates(referenceStaff, this.vrvSVG); //referenceStaff.querySelector(".staffLine").getBoundingClientRect()
             x = bbox.left;
             yTop = bbox.top;
-            yBottom = (0, coordinates_1.getDOMMatrixCoordinates)(Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom
+            yBottom = 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 = (0, coordinates_1.getDOMMatrixCoordinates)(referenceStaff.querySelector(".clef"), this.vrvSVG); //referenceStaff.querySelector(".clef").getBoundingClientRect()
+            bbox = bbox = coordinates_1.getDOMMatrixCoordinates(referenceStaff.querySelector(".clef"), this.vrvSVG); //referenceStaff.querySelector(".clef").getBoundingClientRect()
             x = bbox.left;
             yTop = bbox.top;
             yBottom = bbox.bottom;
         }
-        const clefCoords = (0, coordinates_1.getDOMMatrixCoordinates)(referenceStaff.querySelector(".clef"), this.vrvSVG);
+        const clefCoords = 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

@@ -596,7 +596,7 @@ class Tabbar {
             a.removeEventListener("click", this.customToolbarHandler);
         });
         cq.getContainer(this.containerId).removeEventListener("annotChanged", this.createAnnotListHandler);
-        (0, interactjs_1.default)("#annotList").unset();
+        interactjs_1.default("#annotList").unset();
     }
     closeDropdown(ddButton) {
         if (ddButton.classList.contains("show")) {

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", (0, random_1.uuidv4)());
+            this.element.setAttribute("id", 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);
-        (0, interactjs_1.default)("#annotList").unset();
+        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 = (0, interactjs_1.default)("#" + this.containerId + " #interactionOverlay .customAnnotShape")
+        this.shapeListener = 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 = (0, interactjs_1.default)("#" + this.containerId + " .annotText")
+        this.textListener = 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 = (0, interactjs_1.default)("#" + this.containerId + " #interactionOverlay .lineDragRect.x1")
+        this.lineListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .lineDragRect.x1")
             .draggable({
             listeners: {
                 move: this.dragLineListener.bind(this),

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

@@ -67,7 +67,7 @@ class CustomAnnotationShapeDrawer {
         this.updateCallback();
     }
     initRect(ulx, uly) {
-        this.shapeID = (0, random_1.uuidv4)();
+        this.shapeID = 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 = (0, random_1.uuidv4)();
+        this.shapeID = random_1.uuidv4();
         this.canvas.append('ellipse')
             .attr('cx', cx)
             .attr('cy', cy)

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

@@ -245,8 +245,8 @@ class InsertModeHandler {
                 }
                 that.m2s.setDurationNewNote(dur);
                 if (that.m2s.setMarkedNoteDurations(dur)) {
-                    (0, MEIOperations_1.cleanUp)(that.m2s.getCurrentMei());
-                    var mei = (0, MEIConverter_1.restoreXmlIdTags)(that.m2s.getCurrentMei());
+                    MEIOperations_1.cleanUp(that.m2s.getCurrentMei());
+                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2s.getCurrentMei());
                     that.loadDataCallback("", mei, false);
                 }
             });
@@ -266,8 +266,8 @@ class InsertModeHandler {
                 }
                 that.m2s.setDotsNewNote(dots);
                 if (that.m2s.setMarkedNoteDots(dots)) {
-                    (0, MEIOperations_1.cleanUp)(that.m2s.getCurrentMei());
-                    var mei = (0, MEIConverter_1.restoreXmlIdTags)(that.m2s.getCurrentMei());
+                    MEIOperations_1.cleanUp(that.m2s.getCurrentMei());
+                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2s.getCurrentMei());
                     that.loadDataCallback("", mei, false);
                 }
             });

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

@@ -271,7 +271,7 @@ class KeyModeHandler {
         this.setContainerId(this.containerId);
         var newNote = {
             pname: pname,
-            id: (0, random_1.uuidv4)(),
+            id: random_1.uuidv4(),
             dur: this.m2s.getDurationNewNote(),
             dots: this.m2s.getDotsNewNote(),
             oct: oct,

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

@@ -347,7 +347,7 @@ class LabelHandler {
     }
     createInputBox(posx, posy, targetId, targetClass) {
         var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
-        textGroup.setAttribute("id", (0, random_1.uuidv4)());
+        textGroup.setAttribute("id", 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 = (0, interactjs_1.default)("#" + this.containerId + " #interactionOverlay .notehead rect")
+        this.noteDragListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .notehead rect")
             .draggable({
             startAxis: "y",
             lockAxis: "y",

package/src/scripts/js/handlers/{SideBarHandler.js → SidebarHandler.js}

@@ -74,7 +74,7 @@ class SidebarHandler {
                 that.setSelectListeners();
             }
         }, false);
-        this.resizeListener = (0, interactjs_1.default)("#" + this.containerId + " #sidebarContainer")
+        this.resizeListener = 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);
-        (0, core_1.createPopper)(el, tt, {
+        core_1.createPopper(el, tt, {
             placement: 'top-start',
             modifiers: [
                 {

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

@@ -206,7 +206,7 @@ function addToMEI(newSound, currentMEI, replace = false, scoreGraph = null) {
             }
             else {
                 chord = document.createElement("chord");
-                chord.setAttribute("id", (0, random_1.uuidv4)());
+                chord.setAttribute("id", random_1.uuidv4());
                 chord.setAttribute("dur", meiChordEl.getAttribute("dur"));
                 if (meiChordEl.getAttribute("dots") !== null) {
                     chord.setAttribute("dots", meiChordEl.getAttribute("dots"));
@@ -224,7 +224,7 @@ function addToMEI(newSound, currentMEI, replace = false, scoreGraph = null) {
                 if (Array.from(chord.querySelectorAll("note")).some(n => t.getAttribute("startid") === "#" + n.id)) {
                     if (!currentMEI.querySelector("tie[startid='#" + newNote.id + "']")) { // just make the tie once (since this can be called twice in recursion)
                         var addToChord = Object.assign({}, newNote);
-                        addToChord.id = (0, random_1.uuidv4)();
+                        addToChord.id = random_1.uuidv4();
                         var tieEnd = currentMEI.querySelector(t.getAttribute("endid"));
                         tieEnd = tieEnd.closest("chord") || tieEnd;
                         addToChord.chordElement = tieEnd;
@@ -408,7 +408,7 @@ function tieToNextMeasure(currentMEI, newElem, currMeiClone, replace, newSound)
                 changeDur(lastElement, newRatio);
                 // create new Element and if needed, new measure
                 var splittedElement = lastElement.tagName === "note" ? convertToNewNote(lastElement) : convertToNewChord(lastElement);
-                splittedElement.id = (0, random_1.uuidv4)();
+                splittedElement.id = random_1.uuidv4();
                 var newDur = ratioToDur(measureOverhead);
                 splittedElement.dur = newDur[0].toString();
                 splittedElement.dots = newDur[1].toString();
@@ -494,7 +494,7 @@ function doShiftRight(arr, meterRatio, currentLayer) {
         }
         else {
             targetLayer = document.createElement("layer");
-            targetLayer.setAttribute("id", "layer-" + (0, random_1.uuidv4)());
+            targetLayer.setAttribute("id", "layer-" + random_1.uuidv4());
             targetLayer.setAttribute("n", layerLevel);
             targetStaff.appendChild(targetLayer);
         }
@@ -512,7 +512,7 @@ function doShiftRight(arr, meterRatio, currentLayer) {
             if (Number.isInteger(1 / chunkDurLeft) && Number.isInteger(1 / chunkDurRight)) {
                 element.removeAttribute("dots");
                 var splitRightElement = element.cloneNode(true);
-                splitRightElement.setAttribute("id", (0, random_1.uuidv4)());
+                splitRightElement.setAttribute("id", random_1.uuidv4());
                 splitRightElement.setAttribute("dur", (Math.abs(1 / chunkDurRight)).toString());
                 var beforeElement = elementIdx === 0 ? targetLayer.firstChild : targetLayer.children.item(elementIdx);
                 targetLayer.insertBefore(splitRightElement, beforeElement);
@@ -524,10 +524,10 @@ function doShiftRight(arr, meterRatio, currentLayer) {
                 dottedElements.left.forEach(lel => currentLayer.appendChild(lel));
                 var beforeElement = elementIdx === 0 ? targetLayer.firstChild : targetLayer.children.item(elementIdx);
                 dottedElements.right.forEach(rel => {
-                    rel.setAttribute("id", (0, random_1.uuidv4)());
+                    rel.setAttribute("id", random_1.uuidv4());
                     if (rel.tagName === "chord") {
                         rel.querySelectorAll("note").forEach(rl => {
-                            rl.setAttribute("id", (0, random_1.uuidv4)());
+                            rl.setAttribute("id", random_1.uuidv4());
                         });
                     }
                     targetLayer.insertBefore(rel, beforeElement);
@@ -548,10 +548,10 @@ function createEmptyCopy(element) {
         child.parentNode.removeChild(child);
     });
     //set new ids for everything
-    copy.setAttribute("id", (0, random_1.uuidv4)());
+    copy.setAttribute("id", random_1.uuidv4());
     copy.setAttribute("n", (parseInt(element.getAttribute("n")) + 1).toString());
     let allElements = copy.querySelectorAll("*");
-    allElements.forEach(e => e.setAttribute("id", (0, random_1.uuidv4)()));
+    allElements.forEach(e => e.setAttribute("id", random_1.uuidv4()));
     return copy;
 }
 function connectNotes(left, right, connectionShape) {
@@ -579,7 +579,7 @@ function connectNotes(left, right, connectionShape) {
         var tieElement = currentMEI.createElementNS(constants_1.constants._MEINS_, connectionShape);
         tieElement.setAttribute("startid", "#" + left.id);
         tieElement.setAttribute("endid", "#" + right.id);
-        tieElement.setAttribute("id", (0, random_1.uuidv4)());
+        tieElement.setAttribute("id", random_1.uuidv4());
         currentMEI.getElementById(left.id).closest("measure").append(tieElement);
     }
 }
@@ -649,7 +649,7 @@ function doShiftLeft(arr, meterRatio) {
             if (Number.isInteger(1 / chunkDurLeft) && Number.isInteger(1 / chunkDurRight)) {
                 element.removeAttribute("dots");
                 var splitLeftElement = element.cloneNode(true);
-                splitLeftElement.setAttribute("id", (0, random_1.uuidv4)());
+                splitLeftElement.setAttribute("id", random_1.uuidv4());
                 splitLeftElement.setAttribute("dur", (Math.abs(1 / chunkDurLeft)).toString());
                 targetLayer.appendChild(splitLeftElement);
                 //change already existing element
@@ -658,10 +658,10 @@ function doShiftLeft(arr, meterRatio) {
             else {
                 var elements = splitDottedNote(element, chunkDurLeft, chunkDurRight);
                 elements.left.forEach(lel => {
-                    lel.setAttribute("id", (0, random_1.uuidv4)());
+                    lel.setAttribute("id", random_1.uuidv4());
                     if (lel.tagName === "chord") {
                         lel.querySelectorAll("note").forEach(ll => {
-                            ll.setAttribute("id", (0, random_1.uuidv4)());
+                            ll.setAttribute("id", random_1.uuidv4());
                         });
                     }
                     targetLayer.appendChild(lel);
@@ -1397,7 +1397,7 @@ function reorganizeBeams(currentMEI) {
                     }
                     else { // else make new beam
                         var newBeam = currentMEI.createElementNS(constants_1.constants._MEINS_, "beam");
-                        newBeam.setAttribute("id", (0, random_1.uuidv4)());
+                        newBeam.setAttribute("id", random_1.uuidv4());
                         n.parentElement.insertBefore(newBeam, n);
                         newBeam.append(n);
                     }
@@ -1554,10 +1554,10 @@ function addMeasure(currentMEI) {
         m.setAttribute("n", i.toString());
         i++;
     });
-    newMeasure.setAttribute("id", (0, random_1.uuidv4)());
+    newMeasure.setAttribute("id", random_1.uuidv4());
     newMeasure.querySelectorAll("*").forEach(el => {
         if (el.id === null || el.id === "") {
-            el.setAttribute("id", (0, random_1.uuidv4)());
+            el.setAttribute("id", random_1.uuidv4());
         }
     });
     cleanUp(currentMEI);
@@ -1708,7 +1708,7 @@ function createTuplet(meiElements, currentMEI) {
     if (ratio < 1) {
         if (durRest > 0) {
             var rest = currentMEI.createElement("rest");
-            rest.setAttribute("id", (0, random_1.uuidv4)());
+            rest.setAttribute("id", random_1.uuidv4());
             rest.setAttribute("dur", durRest.toString());
             if (dotsRest > 0) {
                 rest.setAttribute("dots", dotsRest.toString());
@@ -1740,7 +1740,7 @@ function paste(ids, pastePosition, currentMEI) {
                     meiElements[num] = new Array();
                 }
                 var cel = el.cloneNode(true);
-                cel.setAttribute("id", (0, random_1.uuidv4)());
+                cel.setAttribute("id", random_1.uuidv4());
                 meiElements[num].push(cel);
             }
         }
@@ -1853,7 +1853,7 @@ function insertClef(target, newClef, currentMEI) {
     }
     var disPlace = newClef.includes("OctDown") ? "below" : newClef.includes("OctUp") ? "above" : null;
     var clefElement = currentMEI.createElement("clef");
-    clefElement.setAttribute("id", (0, random_1.uuidv4)());
+    clefElement.setAttribute("id", random_1.uuidv4());
     clefElement.setAttribute("shape", shape);
     clefElement.setAttribute("line", line);
     if (disPlace) {
@@ -2054,7 +2054,7 @@ exports.setArticulation = setArticulation;
 //PRIVATE
 function convertToNewNote(element) {
     var newNote = {
-        id: (0, random_1.uuidv4)(),
+        id: random_1.uuidv4(),
         pname: element.getAttribute("pname"),
         dur: element.getAttribute("dur"),
         dots: element.getAttribute("dots"),
@@ -2091,7 +2091,7 @@ function convertToNewChord(element) {
         return convertToNewNote(n);
     });
     var newChord = {
-        id: (0, random_1.uuidv4)(),
+        id: random_1.uuidv4(),
         dur: element.getAttribute("dur"),
         dots: element.getAttribute("dots"),
         noteElements: newNotes
@@ -2103,6 +2103,6 @@ function createNewRestElement(dur, dots = undefined) {
     newElem.setAttribute("dur", dur.toString());
     if (dots != undefined)
         newElem.setAttribute("dots", dots.toString());
-    newElem.setAttribute("id", (0, random_1.uuidv4)());
+    newElem.setAttribute("id", random_1.uuidv4());
     return newElem;
 }

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

@@ -169,7 +169,7 @@ class Mouse2SVG {
             const clefDisplacement = this.measureMatrix.get(idxParentMeasure, idxStaff).clefdisplacement;
             Array.from(g).forEach((staffLine, idx) => {
                 if (staffLine.id === "") {
-                    staffLine.id = (0, random_1.uuidv4)();
+                    staffLine.id = random_1.uuidv4();
                 }
                 staffLine.classList.add("staffLine");
                 staffLine.classList.add("Clef" + clefShape + clefline + clefDisplacement);
@@ -600,7 +600,7 @@ class Mouse2SVG {
         }
         var artic = mappings_1.articButtonToAttr.get((_l = this.container.querySelector("#articGroup > .selected")) === null || _l === void 0 ? void 0 : _l.id);
         var newNote = {
-            id: (0, random_1.uuidv4)(),
+            id: random_1.uuidv4(),
             pname: pname,
             dur: this.getDurationNewNote(),
             dots: this.getDotsNewNote(),

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

@@ -8,7 +8,7 @@ const buttonStyleDarkOutline = "btn btn-outline-dark btn-md";
 function createColorPicker(id, onColorChange) {
     const domNode = document.createElement("div");
     domNode.setAttribute("id", id);
-    const root = (0, client_1.createRoot)(domNode);
+    const root = client_1.createRoot(domNode);
     root.render(React.createElement(ColorPickerWrapper, { onColorChange: onColorChange }));
     return domNode;
 }

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

@@ -336,7 +336,7 @@ class SVGEditor {
                     var barLine = measureSVG.querySelector(".barLine");
                     var coordinates = coords.getDOMMatrixCoordinates(barLine, barLine.closest("g"));
                     var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
-                    textGroup.setAttribute("id", (0, random_1.uuidv4)());
+                    textGroup.setAttribute("id", random_1.uuidv4());
                     textGroup.setAttribute("targetId", barLine.id);
                     var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
                     var textForeignObject = document.createElementNS(constants_1.constants._SVGNS_, "foreignObject");
@@ -419,7 +419,7 @@ class SVGEditor {
         else {
             Array.from(element.querySelectorAll("*")).forEach(el => {
                 if (el.id === "") {
-                    el.setAttribute("id", (0, random_1.uuidv4)());
+                    el.setAttribute("id", random_1.uuidv4());
                 }
             });
         }

package/src/styles/vibe.css

@@ -0,0 +1,785 @@
+@import '~bootstrap/dist/css/bootstrap.min.css';
+
+@font-face {
+     font-family: "Bravura";
+    src:  url('../fonts/bravura/svg/Bravura.svg#7377dd80c36b825ad2214a14c2421925') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "BravuraText";
+    src: url('../fonts/bravura/svg/BravuraText.svg#f678e10c1f5609a8428c245cc86aa255') format('svg');
+    font-weight: normal;
+    font-style: normal;}
+
+.dropdown button{
+    height: 100%;
+}
+
+.vibe-container{    
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: white;
+    /* overflow: scroll; */
+}
+
+body.waiting * {
+    cursor: wait !important;
+}
+/* 
+.textmode  * {
+    cursor: text;
+} */
+
+
+#scoreRects > :is(.notehead, .clef, .meterSig, .keySig, .rest, .harm, .manipulator, .slur, .tie, .tupletNum, .tupletBracket):hover{
+    cursor: pointer;
+}
+
+#scoreRects .notehead:hover{
+    cursor: ns-resize !important;
+}
+
+.clickmode{
+    cursor: crosshair
+}
+
+#vrvSVG{
+    top: 0px;
+    width: 100%;
+    height: auto;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+}
+
+/* .layer:not(.activeLayer) *{
+    fill: rgba(0, 0 , 0, 0.2)
+} */
+
+/* .layer:not(.activeLayer) :is(.rest, .mRest) > use{
+    fill: rgba(0, 0 , 0, 0.0)
+} */
+
+.page{
+    translate: 0 10%;
+}
+
+#vrvSVG .systemLine{
+    stroke: black;
+    stroke-dasharray: 10rem;
+    stroke-width: 1rem;
+}
+
+#interactionOverlay{
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    z-index: 100;
+}
+
+/* This one is for Debugging. 
+Change fill-opacity and stroke-opacity to display boundsing boxes*/
+.debug #scoreRects *, #scoreRects .moving{
+    stroke-width: 1px;
+    stroke: black;
+    fill: gray;
+    fill-opacity: 0.1;
+    stroke-opacity: 1;
+}
+
+/* .debug > div#svgContainer > svg#interactionOverlay{
+    stroke-width: 2px;
+    stroke: red;
+    stroke-opacity: 1;
+    stroke-dasharray: 10px;
+} */
+
+/* .debug #vrvSVG{
+    stroke-width: 2px;
+    stroke: blue;
+    stroke-opacity: 1;
+    stroke-dasharray: 2px;
+} */
+
+/* .debug .page{
+    stroke-width: 2px;
+    stroke: green;
+    stroke-opacity: 1;
+    stroke-dasharray: 5px;
+} */
+
+#scoreRects *{
+    stroke-width: 1px;
+    stroke: black;
+    fill: gray;
+    fill-opacity: 0;
+    stroke-opacity: 0;
+}
+
+
+text{
+    cursor: text;
+}
+
+
+/*
+#svgContainer, .annotLinkedText, .annotLinkedText *{
+    white-space: pre;
+}
+*/
+
+#svgContainer{
+    position: relative;
+    height: 100%;
+    overflow: scroll;
+}
+
+.staff.lastEntered > .staffLine:first-of-type, .staff.lastEntered > .staffLine:last-of-type, .staff.lastEntered ~ .barLine{
+    filter: drop-shadow(5px 16px 15px black)
+}
+
+/* .note, .note *, .rest, .rest *, .staff, .measure, .manipulator, .slur, .tie *{
+    cursor: pointer !important; 
+} */
+
+/*
+*   TOOLBAR
+*/
+
+.verticalLine{
+    border-left: 1px solid black;
+    height: auto;
+    position: absolute;
+}
+
+#insertMode.empty{
+    background-image: url(../images/GUI/edit-solid.svg);
+    background-position-x: 10%;
+}
+
+
+#insertMode{
+    background-color: white;
+    color: black;
+}
+
+.smufl{
+    font-family: "BravuraText";
+    /* font-size: xx-large; */
+    font-size: 160%;
+}
+
+.harm *{
+    font-family: "BravuraText";
+}
+
+#playBtn{
+    background-image: url(../images/GUI/play-solid.svg);
+    background-size: 80%;
+}
+
+#pauseBtn{
+    background-image: url(../images/GUI/pause-solid.svg);
+    background-size: 80%;
+}
+
+#rewindBtn{
+    background-image: url(../images/GUI/backward-fast-solid.svg);
+    background-size: 80%;
+}
+
+#zoomInBtn{
+    background-image: url(../images/GUI/zoomin.svg);
+    background-size: 80%;
+}
+
+#zoomOutBtn{
+    background-image: url(../images/GUI/zoomout.svg);
+    background-size: 80%;
+}
+
+#tupletBtn{
+    background-image: url(../images/GUI/triplet.svg);
+    background-size: 80%;
+    color: rgba(0, 0, 0, 0.0)
+}
+
+.btn{
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: center;
+    outline: none;
+    font-family: Bravura;
+    font-size: larger;
+}
+
+.articulationGroup .btn{
+    font-size: larger;
+}
+
+.btn-group-md{
+    display: flex;
+}
+
+/* .btn:hover, .btn.selected {
+    filter: invert();
+    color: black;
+    background-color: white;
+} */
+
+.btn:hover{ 
+   background-color: lightgray;
+   color: #ffffff;
+   
+ }
+ 
+ .btn.selected {
+   background-color: black;
+   color: #ffffff;
+   
+ }
+
+#btnToolbar{
+    top: 0px;
+    transition: 0.5s;
+    /*height: 5%;*/
+}
+
+#customToolbar :first-child{
+ margin-left: 0.25em;
+}
+
+#customToolbar{
+    box-shadow: 0px 1px 3px lightgray;
+}
+
+#btnToolbar{
+    box-shadow: inset 0px -3px 3px lightgray;
+}
+
+.dropdown-item.selected{
+    background-color: antiquewhite;
+    font-weight: bold;
+}
+
+.accordion-item, .accordion-header{
+    border-bottom-style: solid;
+    border-bottom-color: black;
+    border-bottom-width: 1.5px;
+}
+
+.accordion-button{
+    padding: 1.5rem 1.25rem !important;
+}
+
+#midiDeviceSelect{
+ width: 100%;
+}
+
+#toggleSidebar{
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+#toggleSidebar.closedSidebar{
+    background-image: url(../images/GUI/bars-solid.svg);
+    background-size: 80%;
+}
+
+#toggleSidebar.openSidebar{
+    background-image: url(../images/GUI/bars-solid.svg);
+    background-size: 80%;
+}
+
+#insertDropdownKM .hide{
+    display: none;
+}
+
+#insertToggleDiv{
+    display: none;
+}
+
+#fileSelectGroup{
+  align-self: flex-end;
+  margin-left: auto;
+  display:flex;
+}
+
+/* #midiSelectGroup{
+    align-self:baseline;
+    margin-left: auto;
+  display:flex
+} */
+
+#handlerGroup{
+    display: none
+}
+
+#importXML, #importAudioFile{
+    display: none;
+}
+
+#sidebarContainer{
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-color: black;
+    border-style: solid;
+    border-width: 1px;
+    background-color: white;
+    transition: 0.5s;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+}
+
+#sidebarContainer a{
+    display: block;
+    padding-left: 10px;
+}
+
+/* #sidebarContainer *{
+    font-size: 10pt;
+} */
+
+#sidebarContainer.closedSidebar{
+    visibility: hidden;
+    width: 0
+}
+
+#sidebarContainer.openSidebar{
+    visibility: visible;
+    width: 10%;
+}
+
+#sidebarContainer.openSidebar ~ div {
+    margin-left: 10%;
+    width: 90%;
+    flex-wrap: wrap;
+    display: flex;
+    transition: 0.5s;
+}
+
+#sidebarContainer.closedSidebar ~ div{
+    margin-left: 0;
+    width: 100%;
+    transition: 0.5s;
+}
+
+#sidebarList{
+    position: relative;
+    overflow: scroll;
+    width: 100%;
+    resize: vertical;
+}
+
+.dropKey, .dropClef, .dropTime, .dropTempo{
+    fill: orange;
+    color: orange;
+}
+
+#timeDiv{
+    cursor:pointer !important;
+}
+
+#annotList{
+    width: 100%;
+    position: relative;
+    background-color: white;
+    border-top-color: black;
+    border-left-color: white;
+    border-right-color: white;
+    border-bottom-color: white;
+    border-style: double;
+    overflow: scroll;
+    order: 2;
+    resize: vertical;
+}
+
+#annotList > a{
+    white-space: pre-line;
+    overflow: unset;
+}
+
+
+.list-group{
+    display: block;
+}
+
+#btnToolbar{
+    display: flex;
+}
+
+.btn-toolbar:not(:empty){
+    border-top-color: rgba(0, 0, 0, 0);
+    border-right-color: rgba(0, 0, 0, 0);
+    border-left-color: rgba(0, 0, 0, 0);
+    border-bottom-color: black;
+    border-bottom-style: solid;
+    border-bottom-width: 3px;
+}
+
+.tabBtn{
+    border-bottom-color: rgba(0, 0, 0, 0.0);
+    border-bottom-left-radius: 0% !important;
+    border-bottom-right-radius: 0% !important;
+    margin-bottom: -3px;
+}
+[role="group"]{
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+
+#customToolbar [role="group"]{
+    margin-top: 1%;
+    margin-bottom: 1%;
+}
+
+[role="group"] button:first-of-type{
+    border-bottom-left-radius: .2rem;
+    border-top-left-radius: .2rem;
+}
+
+[role="group"] button:last-of-type{
+    border-bottom-right-radius: .2rem;
+    border-top-right-radius: .2rem;
+}
+
+.btn-group-md>.btn, .btn-sm{
+    border-radius: 0%;
+}
+
+
+/*
+* ANNOTATIONS
+*/
+
+/* 
+#annotationCanvas.back *{
+   opacity: 0.5;
+}*/
+
+/* #annotationCanvas.front *{
+    opacity: 1;
+} */
+
+
+
+.annotLinkedText .annotFO{
+    /*background-color: rgba(255, 255, 153, 0.8);*/
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0px 10px 10px 10px;
+    border-color: black;
+    border-style: solid;
+    border-width: 3px;
+}
+
+
+.annotStaticText .annotFO div{
+    background-color: white;
+    border: 1px solid black;
+}
+
+.annotDiv{
+    height: 100%;
+    width: 100%;
+}
+
+.annotLine{
+    stroke-width: 2px;
+    stroke: lightskyblue;
+    stroke-dasharray: 2px;
+}
+
+
+.lineDragRect{
+    stroke-width: 1px;
+    stroke: black;
+    fill: wheat;
+    height: 10px;
+    width: 10px;
+    transform: translate(-5, -5);
+}
+
+.highlightAnnotation, .highlightChord{
+    /*fill-opacity: 0.1;
+    outline-style: dotted;
+    outline-width: 0.5px;
+    outline-color: black; */
+    filter: drop-shadow( 0px 0px 3em teal)
+}
+
+#playCursor{
+    stroke-width: 10px;
+    stroke: orangered;
+}
+
+.layer[n="1"] .highlighted{
+    
+    filter: drop-shadow(30px 10px 4px rgb(255, 71, 255));
+} 
+
+#phantomNote.l1{
+    fill: rgb(255, 71, 255)
+}
+
+
+.layer[n="2"] .highlighted{
+    filter: drop-shadow(30px 10px 4px green);
+}
+
+#phantomNote.l2{
+    fill: green;
+}
+
+.layer[n="3"]  .highlighted{
+    filter: drop-shadow(30px 10px 4px blue);
+}
+
+#phantomNote.l3{
+    fill: blue;
+}
+
+.layer[n="4"]  .highlighted{
+    filter: drop-shadow(30px 10px 4px orange);
+}
+
+#phantomNote.l4{
+    fill: orange;
+}
+
+.customAnnotShape{
+    fill: orange;
+    fill-opacity: 0.2;
+    outline-style: dotted;
+    outline-width: 0.5px;
+    outline-color: black; 
+}
+
+.customAnnotShape.selected{
+    outline-style: dashed;
+    outline-color:cornflowerblue;
+    outline-width: 1;
+}
+
+
+.annotLinkedText.selected > .annotFO, .annotStaticText.selected > .annotFO{
+    border-color:cornflowerblue;
+    border-width: 1;
+    border-style: dashed;
+}
+
+
+[contentEditable=false]:empty:not(:focus):before{
+    content:attr(data-text);
+    color: lightgray;
+}
+
+g.currentlyPlaying *{
+    fill:red !important;
+    fill-opacity: 1;
+}
+
+#followerRect{
+    fill: red;
+    fill-opacity: 0.3;
+    outline-style: none;
+}
+
+.marked, .marked *{
+    /* fill: red !important; */
+    filter: invert() drop-shadow(0 0 1rem crimson); 
+}
+
+.lastAdded{
+    fill:darkcyan
+}
+
+.playing{
+    fill: red
+}
+
+/* LABELS */
+
+.labelDiv{
+    border: 2px solid black;
+    border-radius: 10px;
+    height: fit-content;
+    width: fit-content;
+    min-width: 50px;
+    background-color: beige;
+    font-size: 40px;
+    font-family: 'Times New Roman', Times, serif;
+}
+
+.labekFO{
+    height: 100%;
+    width: 100%;
+}
+
+/* KEYMODE */
+
+#keyModeSelectRect{
+    stroke: black;
+    stroke-opacity: 1;
+    stroke-width: 2px;
+    fill: lightskyblue;
+    fill-opacity: 0.4;
+}
+
+/* #manipulatorCanvas > #cursor{
+    display: none
+} */
+
+/* CLICK MODE */
+
+
+/* #phantomNote{
+    transform: skew(-20deg);
+} */
+
+
+.phantomLine, .phantomMarker{
+    stroke-width: 2px;
+    stroke:black;
+    opacity: 0.5;
+}
+
+
+/*StatusBar*/
+
+#statusBar{
+    position: absolute;
+    height: 5%;
+    width: 100%;
+    bottom: 0;
+    background-color: lightskyblue;
+    border-style: outset;
+    z-index: 100;
+}
+
+
+/*Score Manipulator*/
+
+#manipulatorCanvas{
+    z-index: 101;
+}
+
+.signElement{
+    stroke: black;
+    stroke-width: 10%;
+}
+
+#measureAdder, #measureRemover{
+    height: 10%;
+    width: 10%;
+}
+
+#manipulationButton{
+    stroke:black;
+    stroke-width: 5%;
+    fill: antiquewhite;
+}
+
+.manipulator:hover *:not(.selected) , .manipulator.selected{
+    filter: invert();
+    cursor: pointer;
+}
+
+.voiceBtn.inactive > rect{
+   fill: lightgray;
+}
+
+.voiceBtn.inactive > text{
+    fill: gray;
+ }
+
+
+.voiceBtn > rect{
+    stroke-width: 5%;
+    stroke: black;
+    width: 100%;
+    height: 100%;
+    fill: antiquewhite
+}
+
+.voiceBtn > text{
+    font-size: 100%;
+    width: 100%;
+    height: 100%;
+    fill: black;
+}
+
+.tooltip.show{
+    display:contents;
+    background: skyblue;
+    color: #643045;
+    font-weight: bold;
+    padding: 5px 10px;
+    font-size: 13px;
+    border-radius: 4px;
+    border-color: maroon;
+    display: block;
+    opacity: 1;
+    position: absolute;
+  }
+
+/* .tooltip{
+    inset:  !important;
+} */
+
+.tooltip.hide{
+    display: none
+}
+
+.overfillMark{
+    color:rgba(0, 0, 0, 0.5);
+    font-size: 12em;
+    font-weight: bolder;
+    z-index: 100;
+
+}
+
+/*Disable interaction*/
+
+#ff_warning{
+    background: rgba(0, 0, 0, 0.25);
+    width: 100%;
+    margin: auto;
+    height: 100%;
+    text-align: center;
+    font-size: xx-large;
+    color:crimson;
+    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+}
+
+.hideUI{
+    display: none !important;
+}
+
+#pauseNote{
+    display: none;
+}
+
+#interactionOverlay, #vrvSVG > svg{
+    transform-origin: top left
+}
+
+.indexBase{
+    font-size: 0.7em;
+}
+
+foreignObject > [contenteditable]{
+    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+
+}
+
+button{
+    box-shadow: none !important;
+}