vibe-editor 0.0.3 → 0.0.5

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(),
@@ -626,13 +626,20 @@ class Mouse2SVG {
      * @param orientation only consider elements which are left or right of given coordinates
      * @returns
      */
-    findScoreTarget(posX, posY, checkStaff = true, orientation = { left: true, right: true }) {
+    findScoreTarget(posX, posY, checkStaff = true, orientation = null, blackList = null) {
+        if (!orientation)
+            orientation = { left: true, right: true };
         var notes = this.getNoteBBoxes();
         var nextNote;
         var tempDist = Math.pow(10, 10);
         var i = 0;
         notes.forEach(n => {
             var _a, _b, _c, _d;
+            if (blackList) {
+                var blackListFilter = Array.from(this.getElementinVrvSVG(n.id).classList).filter(element => blackList.includes(element));
+                if (blackListFilter.length > 0)
+                    return;
+            }
             var x;
             var y;
             if (((_a = this.getElementinVrvSVG(n.id)) === null || _a === void 0 ? void 0 : _a.closest(".chord")) && navigator.userAgent.toLowerCase().indexOf("firefox") > -1) { // special rule for firefox browsers
@@ -647,11 +654,11 @@ class Mouse2SVG {
             if (this.vrvSVG.querySelector("#" + n.id) === null)
                 return;
             if (!this.vrvSVG.querySelector("#" + n.id).classList.contains("mRest")) { //mRest are excluded from this rule
-                if (orientation.left === false) {
+                if (!orientation.left) {
                     if (x < posX)
                         return; //exclude left elements
                 }
-                else if (orientation.right === false) {
+                else if (!orientation.right) {
                     if (x > posX)
                         return; // exclude right elements
                 }
@@ -659,7 +666,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) {
+            if (!checkStaff) {
                 staffCondition = true;
                 dist = Math.sqrt(Math.abs(x - posX) ** 2 + Math.abs(y - posY) ** 2);
             }

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/scripts/js/utils/VerovioWrapper.js

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

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

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