vibe-editor 0.0.1 → 0.0.2

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

@@ -172,15 +172,18 @@ function addToMEI(newSound, currentMEI, replace = false, scoreGraph = null) {
             newElem = currentMEI.createElement("note");
             newElem.setAttribute("pname", newNote.pname);
             newElem.setAttribute("oct", newNote.oct);
-            if (newNote.accid != undefined) {
+            if (newNote.accid) {
                 newElem.setAttribute("accid.ges", newNote.accid);
             }
+            if (newNote.artic) {
+                newElem.setAttribute("artic", newNote.artic);
+            }
         }
         newElem.setAttribute("dur", newNote.dur);
-        if (newNote.dots != undefined) {
+        if (newNote.dots) {
             newElem.setAttribute("dots", newNote.dots);
         }
-        if (newNote.id != undefined && newNote.id !== null) {
+        if (newNote.id) {
             newElem.setAttribute("id", newNote.id);
         }
         //break up an cache beams for easier processing
@@ -203,7 +206,7 @@ function addToMEI(newSound, currentMEI, replace = false, scoreGraph = null) {
             }
             else {
                 chord = document.createElement("chord");
-                chord.setAttribute("id", random_1.uuidv4());
+                chord.setAttribute("id", (0, random_1.uuidv4)());
                 chord.setAttribute("dur", meiChordEl.getAttribute("dur"));
                 if (meiChordEl.getAttribute("dots") !== null) {
                     chord.setAttribute("dots", meiChordEl.getAttribute("dots"));
@@ -221,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 = random_1.uuidv4();
+                        addToChord.id = (0, random_1.uuidv4)();
                         var tieEnd = currentMEI.querySelector(t.getAttribute("endid"));
                         tieEnd = tieEnd.closest("chord") || tieEnd;
                         addToChord.chordElement = tieEnd;
@@ -405,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 = random_1.uuidv4();
+                splittedElement.id = (0, random_1.uuidv4)();
                 var newDur = ratioToDur(measureOverhead);
                 splittedElement.dur = newDur[0].toString();
                 splittedElement.dots = newDur[1].toString();
@@ -491,7 +494,7 @@ function doShiftRight(arr, meterRatio, currentLayer) {
         }
         else {
             targetLayer = document.createElement("layer");
-            targetLayer.setAttribute("id", "layer-" + random_1.uuidv4());
+            targetLayer.setAttribute("id", "layer-" + (0, random_1.uuidv4)());
             targetLayer.setAttribute("n", layerLevel);
             targetStaff.appendChild(targetLayer);
         }
@@ -509,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", random_1.uuidv4());
+                splitRightElement.setAttribute("id", (0, 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);
@@ -521,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", random_1.uuidv4());
+                    rel.setAttribute("id", (0, random_1.uuidv4)());
                     if (rel.tagName === "chord") {
                         rel.querySelectorAll("note").forEach(rl => {
-                            rl.setAttribute("id", random_1.uuidv4());
+                            rl.setAttribute("id", (0, random_1.uuidv4)());
                         });
                     }
                     targetLayer.insertBefore(rel, beforeElement);
@@ -545,10 +548,10 @@ function createEmptyCopy(element) {
         child.parentNode.removeChild(child);
     });
     //set new ids for everything
-    copy.setAttribute("id", random_1.uuidv4());
+    copy.setAttribute("id", (0, random_1.uuidv4)());
     copy.setAttribute("n", (parseInt(element.getAttribute("n")) + 1).toString());
     let allElements = copy.querySelectorAll("*");
-    allElements.forEach(e => e.setAttribute("id", random_1.uuidv4()));
+    allElements.forEach(e => e.setAttribute("id", (0, random_1.uuidv4)()));
     return copy;
 }
 function connectNotes(left, right, connectionShape) {
@@ -576,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", random_1.uuidv4());
+        tieElement.setAttribute("id", (0, random_1.uuidv4)());
         currentMEI.getElementById(left.id).closest("measure").append(tieElement);
     }
 }
@@ -646,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", random_1.uuidv4());
+                splitLeftElement.setAttribute("id", (0, random_1.uuidv4)());
                 splitLeftElement.setAttribute("dur", (Math.abs(1 / chunkDurLeft)).toString());
                 targetLayer.appendChild(splitLeftElement);
                 //change already existing element
@@ -655,10 +658,10 @@ function doShiftLeft(arr, meterRatio) {
             else {
                 var elements = splitDottedNote(element, chunkDurLeft, chunkDurRight);
                 elements.left.forEach(lel => {
-                    lel.setAttribute("id", random_1.uuidv4());
+                    lel.setAttribute("id", (0, random_1.uuidv4)());
                     if (lel.tagName === "chord") {
                         lel.querySelectorAll("note").forEach(ll => {
-                            ll.setAttribute("id", random_1.uuidv4());
+                            ll.setAttribute("id", (0, random_1.uuidv4)());
                         });
                     }
                     targetLayer.appendChild(lel);
@@ -1394,7 +1397,7 @@ function reorganizeBeams(currentMEI) {
                     }
                     else { // else make new beam
                         var newBeam = currentMEI.createElementNS(constants_1.constants._MEINS_, "beam");
-                        newBeam.setAttribute("id", random_1.uuidv4());
+                        newBeam.setAttribute("id", (0, random_1.uuidv4)());
                         n.parentElement.insertBefore(newBeam, n);
                         newBeam.append(n);
                     }
@@ -1551,10 +1554,10 @@ function addMeasure(currentMEI) {
         m.setAttribute("n", i.toString());
         i++;
     });
-    newMeasure.setAttribute("id", random_1.uuidv4());
+    newMeasure.setAttribute("id", (0, random_1.uuidv4)());
     newMeasure.querySelectorAll("*").forEach(el => {
         if (el.id === null || el.id === "") {
-            el.setAttribute("id", random_1.uuidv4());
+            el.setAttribute("id", (0, random_1.uuidv4)());
         }
     });
     cleanUp(currentMEI);
@@ -1705,7 +1708,7 @@ function createTuplet(meiElements, currentMEI) {
     if (ratio < 1) {
         if (durRest > 0) {
             var rest = currentMEI.createElement("rest");
-            rest.setAttribute("id", random_1.uuidv4());
+            rest.setAttribute("id", (0, random_1.uuidv4)());
             rest.setAttribute("dur", durRest.toString());
             if (dotsRest > 0) {
                 rest.setAttribute("dots", dotsRest.toString());
@@ -1737,7 +1740,7 @@ function paste(ids, pastePosition, currentMEI) {
                     meiElements[num] = new Array();
                 }
                 var cel = el.cloneNode(true);
-                cel.setAttribute("id", random_1.uuidv4());
+                cel.setAttribute("id", (0, random_1.uuidv4)());
                 meiElements[num].push(cel);
             }
         }
@@ -1850,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", random_1.uuidv4());
+    clefElement.setAttribute("id", (0, random_1.uuidv4)());
     clefElement.setAttribute("shape", shape);
     clefElement.setAttribute("line", line);
     if (disPlace) {
@@ -2051,7 +2054,7 @@ exports.setArticulation = setArticulation;
 //PRIVATE
 function convertToNewNote(element) {
     var newNote = {
-        id: random_1.uuidv4(),
+        id: (0, random_1.uuidv4)(),
         pname: element.getAttribute("pname"),
         dur: element.getAttribute("dur"),
         dots: element.getAttribute("dots"),
@@ -2088,7 +2091,7 @@ function convertToNewChord(element) {
         return convertToNewNote(n);
     });
     var newChord = {
-        id: random_1.uuidv4(),
+        id: (0, random_1.uuidv4)(),
         dur: element.getAttribute("dur"),
         dots: element.getAttribute("dots"),
         noteElements: newNotes
@@ -2100,6 +2103,6 @@ function createNewRestElement(dur, dots = undefined) {
     newElem.setAttribute("dur", dur.toString());
     if (dots != undefined)
         newElem.setAttribute("dots", dots.toString());
-    newElem.setAttribute("id", random_1.uuidv4());
+    newElem.setAttribute("id", (0, 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 = random_1.uuidv4();
+                    staffLine.id = (0, random_1.uuidv4)();
                 }
                 staffLine.classList.add("staffLine");
                 staffLine.classList.add("Clef" + clefShape + clefline + clefDisplacement);
@@ -273,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, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         let staffIsEmpty = true;
         let isLeftOfNote;
         //let isRightOfNote: Boolean
@@ -560,7 +560,7 @@ class Mouse2SVG {
                 try {
                     pitch = cq.getInteractOverlay(this.containerId).querySelector("#" + options.staffLineId).getAttribute("class").split(" ");
                 }
-                catch (_q) {
+                catch (_r) {
                     return;
                 }
                 let p = pitch.filter(function (obj) {
@@ -589,7 +589,7 @@ class Mouse2SVG {
         var keysig = this.measureMatrix.get(closestMeasureIdx, closestStaffIdx).keysig;
         var accid;
         if (this.container.querySelector(".alterBtn.selected") !== null) {
-            accid = mappings_1.modButtonToAttr.get(this.container.querySelector(".alterBtn.selected").id);
+            accid = mappings_1.accidButtonToAttr.get(this.container.querySelector(".alterBtn.selected").id);
         }
         else if (keysig != undefined) {
             accid = mappings_1.keysigToNotes.get(keysig);
@@ -598,20 +598,22 @@ class Mouse2SVG {
                 accid = keysig.charAt(1);
             }
         }
+        var artic = mappings_1.articButtonToAttr.get((_l = this.container.querySelector("#articGroup > .selected")) === null || _l === void 0 ? void 0 : _l.id);
         var newNote = {
-            id: random_1.uuidv4(),
+            id: (0, random_1.uuidv4)(),
             pname: pname,
             dur: this.getDurationNewNote(),
             dots: this.getDotsNewNote(),
             oct: oct,
             keysig: keysig,
             accid: accid,
+            artic: artic,
             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,
+            staffId: (_m = this.lastStaffMouseEnter) === null || _m === void 0 ? void 0 : _m.getAttribute("refId"),
+            layerId: (_p = this.container.querySelector(`#${(_o = this.lastStaffMouseEnter) === null || _o === void 0 ? void 0 : _o.getAttribute("refId")} .activeLayer`)) === null || _p === void 0 ? void 0 : _p.id,
             chordElement: options.targetChord,
-            rest: (_p = this.container.querySelector("#pauseNote")) === null || _p === void 0 ? void 0 : _p.classList.contains("selected")
+            rest: (_q = this.container.querySelector("#pauseNote")) === null || _q === void 0 ? void 0 : _q.classList.contains("selected")
         };
         this.newNote = newNote;
     }

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 = client_1.createRoot(domNode);
+    const root = (0, client_1.createRoot)(domNode);
     root.render(React.createElement(ColorPickerWrapper, { onColorChange: onColorChange }));
     return domNode;
 }

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

@@ -45,14 +45,24 @@ class SVGEditor {
     cacheClasses() {
         //var svg = document.querySelector("#"+this.containerId + " #vrvSVG")
         var svg = document.querySelector("#" + this.containerId);
-        if (svg === null) {
+        if (!svg)
             return this;
-        }
         this.classListMap = new Map();
+        var hasLastAdded = !!svg.querySelector(".lastAdded");
         svg.querySelectorAll("*").forEach(el => {
             var _a;
             //if(el.tagName.toLowerCase() === "g" && el.getAttribute("id") !== null){
-            if (el.getAttribute("id") !== null && !el.classList.contains("lastAdded")) {
+            if (el.tagName.toLocaleLowerCase() !== "g" && !el.getAttribute("id"))
+                return;
+            if (hasLastAdded) {
+                if (el.classList.contains("marked")) {
+                    el.classList.remove("marked");
+                }
+                // if(el.classList.contains("lastAdded")){
+                //     el.classList.replace("lastAdded", "marked")
+                // }
+            }
+            if (el.getAttribute("id") && !el.classList.contains("lastAdded")) {
                 if (!this.classListMap.has(el.id)) {
                     this.classListMap.set(el.id, new Array());
                 }
@@ -326,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", random_1.uuidv4());
+                    textGroup.setAttribute("id", (0, 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");
@@ -409,7 +419,7 @@ class SVGEditor {
         else {
             Array.from(element.querySelectorAll("*")).forEach(el => {
                 if (el.id === "") {
-                    el.setAttribute("id", random_1.uuidv4());
+                    el.setAttribute("id", (0, random_1.uuidv4)());
                 }
             });
         }

package/src/scripts/js/utils/mappings.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.unicodeToKey = exports.unicodeToTimesig = exports.clefToLine = exports.octToNum = exports.modButtonToAttr = exports.attrToModButtonId = exports.numToDotButtonId = exports.NoteButtonIdToNum = exports.numToNoteButtonId = exports.keyIdToSig = exports.keysigToNotes = exports.nextStepUp = exports.nextStepDown = exports.noteToB = exports.noteToCross = exports.idToClef = exports.keyCodeNoteMap = exports.idxNotePhantomMapBelowCBariton = exports.idxNotePhantomMapAboveCBariton = exports.idxNoteMapCClefBariton = exports.idxNotePhantomMapBelowCTenor = exports.idxNotePhantomMapAboveCTenor = exports.idxNoteMapCClefTenor = exports.idxNotePhantomMapBelowCMezzo = exports.idxNotePhantomMapAboveCMezzo = exports.idxNoteMapCClefMezzo = exports.idxNotePhantomMapBelowCSoprano = exports.idxNotePhantomMapAboveCSoprano = exports.idxNoteMapCClefSoprano = exports.idxNotePhantomMapBelowCAlto = exports.idxNotePhantomMapAboveCAlto = exports.idxNoteMapCClefAlto = exports.idxNotePhantomMapBelowFOctDown = exports.idxNotePhantomMapBelowFOctUp = exports.idxNotePhantomMapBelowF = exports.idxNotePhantomMapAboveFOctDown = exports.idxNotePhantomMapAboveFOctUp = exports.idxNotePhantomMapAboveF = exports.idxNotePhantomMapBelowGOctDown = exports.idxNotePhantomMapBelowGOctUp = exports.idxNotePhantomMapBelowG = exports.idxNotePhantomMapAboveGOctDown = exports.idxNotePhantomMapAboveGOctUp = exports.idxNotePhantomMapAboveG = exports.idxNoteMapFClefOctDown = exports.idxNoteMapFClefOctUp = exports.idxNoteMapFClef = exports.idxNoteMapGClefOctDown = exports.idxNoteMapGClefOctUp = exports.idxNoteMapGClef = void 0;
-exports.enharmonicToCross = exports.enharmonicToB = exports.midiToNote = exports.keyToUnicode = void 0;
+exports.clefToLine = exports.octToNum = exports.articButtonToAttr = exports.attrToArticButtonId = exports.accidButtonToAttr = exports.attrToAccidButtonId = exports.numToDotButtonId = exports.NoteButtonIdToNum = exports.numToNoteButtonId = exports.keyIdToSig = exports.keysigToNotes = exports.nextStepUp = exports.nextStepDown = exports.noteToB = exports.noteToCross = exports.idToClef = exports.keyCodeNoteMap = exports.idxNotePhantomMapBelowCBariton = exports.idxNotePhantomMapAboveCBariton = exports.idxNoteMapCClefBariton = exports.idxNotePhantomMapBelowCTenor = exports.idxNotePhantomMapAboveCTenor = exports.idxNoteMapCClefTenor = exports.idxNotePhantomMapBelowCMezzo = exports.idxNotePhantomMapAboveCMezzo = exports.idxNoteMapCClefMezzo = exports.idxNotePhantomMapBelowCSoprano = exports.idxNotePhantomMapAboveCSoprano = exports.idxNoteMapCClefSoprano = exports.idxNotePhantomMapBelowCAlto = exports.idxNotePhantomMapAboveCAlto = exports.idxNoteMapCClefAlto = exports.idxNotePhantomMapBelowFOctDown = exports.idxNotePhantomMapBelowFOctUp = exports.idxNotePhantomMapBelowF = exports.idxNotePhantomMapAboveFOctDown = exports.idxNotePhantomMapAboveFOctUp = exports.idxNotePhantomMapAboveF = exports.idxNotePhantomMapBelowGOctDown = exports.idxNotePhantomMapBelowGOctUp = exports.idxNotePhantomMapBelowG = exports.idxNotePhantomMapAboveGOctDown = exports.idxNotePhantomMapAboveGOctUp = exports.idxNotePhantomMapAboveG = exports.idxNoteMapFClefOctDown = exports.idxNoteMapFClefOctUp = exports.idxNoteMapFClef = exports.idxNoteMapGClefOctDown = exports.idxNoteMapGClefOctUp = exports.idxNoteMapGClef = void 0;
+exports.enharmonicToCross = exports.enharmonicToB = exports.midiToNote = exports.keyToUnicode = exports.unicodeToKey = exports.unicodeToTimesig = void 0;
 /**
  * Pitch to Clef Mapping
  */
@@ -512,18 +512,21 @@ exports.NoteButtonIdToNum.set("thirtysecondNote", 32);
 exports.numToDotButtonId = new Map;
 exports.numToDotButtonId.set("1", "oneDot");
 exports.numToDotButtonId.set("2", "twoDot");
-exports.attrToModButtonId = new Map;
-exports.attrToModButtonId.set("s", "alterUp");
-exports.attrToModButtonId.set("f", "alterDown");
-exports.attrToModButtonId.set("n", "alterNeutral");
-exports.attrToModButtonId.set("ff", "alterDDown");
-exports.attrToModButtonId.set("ss", "alterDUp");
-exports.attrToModButtonId.set("acc", "accentBtn");
-exports.attrToModButtonId.set("stacc", "staccatoBtn");
-exports.attrToModButtonId.set("marc", "marcatoBtn");
-exports.attrToModButtonId.set("ten", "tenutoBtn");
-exports.modButtonToAttr = new Map;
-exports.attrToModButtonId.forEach((v, k) => exports.modButtonToAttr.set(v, k));
+exports.attrToAccidButtonId = new Map;
+exports.attrToAccidButtonId.set("s", "alterUp");
+exports.attrToAccidButtonId.set("f", "alterDown");
+exports.attrToAccidButtonId.set("n", "alterNeutral");
+exports.attrToAccidButtonId.set("ff", "alterDDown");
+exports.attrToAccidButtonId.set("ss", "alterDUp");
+exports.accidButtonToAttr = new Map;
+exports.attrToAccidButtonId.forEach((v, k) => exports.accidButtonToAttr.set(v, k));
+exports.attrToArticButtonId = new Map;
+exports.attrToArticButtonId.set("acc", "accentBtn");
+exports.attrToArticButtonId.set("ten", "tenutoBtn");
+exports.attrToArticButtonId.set("marc", "marcatoBtn");
+exports.attrToArticButtonId.set("stacc", "staccatoBtn");
+exports.articButtonToAttr = new Map;
+exports.attrToArticButtonId.forEach((v, k) => exports.articButtonToAttr.set(v, k));
 exports.octToNum = new Map;
 exports.octToNum.set("subkontraOct", "0");
 exports.octToNum.set("kontraOct", "1");