vibe-editor 0.0.3 → 0.0.5

package/src/scripts/js/{utils/Mouse2MEI.js → scripts/utils/Mouse2SVG.js}

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mouse2SVG = void 0;
-const constants_1 = require("../constants");
 const random_1 = require("./random");
 const mappings_1 = require("./mappings");
 const MeasureMatrix_1 = require("../datastructures/MeasureMatrix");
-const meiOperation = require("../utils/MEIOperations");
+const meiOperation = require("./MEIOperations");
 const coordinates = require("./coordinates");
 const cq = require("./convenienceQueries");
 class Mouse2SVG {
@@ -31,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);
@@ -43,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);
                 }
@@ -94,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;
@@ -105,6 +105,7 @@ class Mouse2SVG {
                     });
                     that.lastLayerMouseEnter.classList.add(enteredFlag);
                 }
+                console.log(that.lastLayerMouseEnter);
             });
         });
         return this;
@@ -155,32 +156,69 @@ class Mouse2SVG {
             };
             this.noteBBoxes.push(bb);
         });
-        // this.measureMatrix.populateFromSVG(document.querySelector(c._vrvSVGID_WITH_IDSELECTOR_));
         this.measureMatrix.populateFromMEI(this.currentMEI);
-        var staves = cq.getVrvSVG(this.containerId).querySelectorAll(constants_1.constants._STAFF_WITH_CLASSSELECTOR_);
+        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");
@@ -188,8 +226,7 @@ class Mouse2SVG {
                 }
                 staffLine.classList.add(map.get(idx * 2));
                 staffLine.classList.add("Clef" + clefShape);
-                //var interactionElement = this.interactionOverlay.querySelector("[refId=" + staffLine.id +"]")
-                var relpt = coordinates.getDOMMatrixCoordinates(staffLine, staffLine.closest("svg")); //this.vrvSVG)
+                var relpt = coordinates.getDOMMatrixCoordinates(staffLine, cq.getInteractOverlay(this.containerId)); //this.vrvSVG)
                 let bb = {
                     id: staffLine.parentElement.id,
                     y: relpt.y,
@@ -232,11 +269,11 @@ class Mouse2SVG {
      * 2. Check position between staves
      * 3. update
      *
-     * @param x page Coordinate
-     * @param y page Coordinate
+     * @param x client Coordinate
+     * @param y client Coordinate
      */
     defineNote(x, y, options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         let staffIsEmpty = true;
         let isLeftOfNote;
         //let isRightOfNote: Boolean
@@ -264,20 +301,26 @@ class Mouse2SVG {
                 staffIsEmpty = false;
             }
         });
-        var currentStaffClef;
-        for (const [key, value] of (_g = this.getElementinVrvSVG((_f = this.lastStaffMouseEnter) === null || _f === void 0 ? void 0 : _f.getAttribute("refId"))) === null || _g === void 0 ? void 0 : _g.querySelector(".staffLine").classList.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 (_k) {
+                catch (_r) {
                     return;
                 }
                 let p = pitch.filter(function (obj) {
@@ -437,7 +578,7 @@ class Mouse2SVG {
         }
         //get relevant staffinfo
         //var closestStaff = this.currentMEI.getElementById(currentNearestNote.id).closest("staff")
-        var closestStaff = this.currentMEI.getElementById((_h = this.lastStaffMouseEnter) === null || _h === void 0 ? void 0 : _h.getAttribute("refId"));
+        var closestStaff = this.currentMEI.getElementById((_k = this.lastStaffMouseEnter) === null || _k === void 0 ? void 0 : _k.getAttribute("refId"));
         var closestMeasure = closestStaff.closest("measure");
         var closestStaffIdx = parseInt(closestStaff.getAttribute("n")) - 1;
         var closestMeasureIdx = parseInt(closestMeasure.getAttribute("n")) - 1;
@@ -448,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.modButtonToAccid.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);
@@ -457,6 +598,7 @@ 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(),
             pname: pname,
@@ -465,11 +607,13 @@ class Mouse2SVG {
             oct: oct,
             keysig: keysig,
             accid: accid,
+            artic: artic,
             nearestNoteId: nearestNoteId,
             relPosX: leftRightPos,
-            staffId: (_j = this.lastStaffMouseEnter) === null || _j === void 0 ? void 0 : _j.getAttribute("refId"),
+            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: this.container.querySelector("#pauseNote").classList.contains("selected")
+            rest: (_q = this.container.querySelector("#pauseNote")) === null || _q === void 0 ? void 0 : _q.classList.contains("selected")
         };
         this.newNote = newNote;
     }
@@ -482,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
@@ -500,19 +651,22 @@ class Mouse2SVG {
                 y = n.y;
             }
             //filter for left and right elements
+            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
                 }
             }
             var dist = Math.abs(x - posX);
             var staffCondition = n.parentStaff === this.getElementinVrvSVG((_d = this.lastStaffMouseEnter) === null || _d === void 0 ? void 0 : _d.getAttribute("refId"));
-            if (checkStaff === false) {
+            staffCondition && (staffCondition = Array.from(this.container.querySelectorAll(".activeLayer")).some(l => n.parentLayer === l));
+            if (!checkStaff) {
                 staffCondition = true;
                 dist = Math.sqrt(Math.abs(x - posX) ** 2 + Math.abs(y - posY) ** 2);
             }
@@ -526,6 +680,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 };
@@ -581,7 +746,7 @@ class Mouse2SVG {
             additionalElements = additionalElements.filter((v, i) => i > additionalElements.indexOf(newMeiElement));
             //this.currentMEI = meiOperation.changeDuration(this.currentMEI, "reduce", additionalElements)
             //additionalElements.unshift(oldMeiElement) // we need this information to determine the new duration of an element that has to be shortened
-            this.currentMEI = meiOperation.changeDuration(this.currentMEI, additionalElements, newMeiElement); //this.currentMEI = meiOperation.changeDuration(this.currentMEI, additionalElements)
+            this.currentMEI = meiOperation.changeDurationsInLayer(this.currentMEI, additionalElements, newMeiElement); //this.currentMEI = meiOperation.changeDuration(this.currentMEI, additionalElements)
             //}
             this.currentMEI.querySelectorAll(".changed").forEach(c => c.classList.remove("changed"));
             //check if following events (notes, chords, rests) should be replaced 
@@ -624,7 +789,7 @@ class Mouse2SVG {
             additionalElements = additionalElements.filter((v, i) => i > additionalElements.indexOf(newMeiElement));
             //this.currentMEI = meiOperation.changeDuration(this.currentMEI, "reduce", additionalElements)
             //additionalElements.unshift(oldMeiElement) // we need this information to determine the new duration of an element that has to be shortened
-            this.currentMEI = meiOperation.changeDuration(this.currentMEI, additionalElements, newMeiElement, meiOperation.getAbsoluteRatio(newMeiElement) - meiOperation.getAbsoluteRatio(oldMeiElement)); //this.currentMEI = meiOperation.changeDuration(this.currentMEI, additionalElements)
+            this.currentMEI = meiOperation.changeDurationsInLayer(this.currentMEI, additionalElements, newMeiElement, meiOperation.getAbsoluteRatio(newMeiElement) - meiOperation.getAbsoluteRatio(oldMeiElement)); //this.currentMEI = meiOperation.changeDuration(this.currentMEI, additionalElements)
             //}
             this.currentMEI.querySelectorAll(".changed").forEach(c => c.classList.remove("changed"));
             if (meiOperation.elementIsOverfilling(meiElement, currMeiClone)) {
@@ -679,6 +844,9 @@ class Mouse2SVG {
             return "4";
         }
         switch (selEl.id) {
+            case "breveNote":
+                dur = 0.5;
+                break;
             case "fullNote":
                 dur = 1;
                 break;

package/src/scripts/js/{utils → scripts/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;
 }