vibe-editor 0.0.0 → 0.0.1

package/src/scripts/js/gui/ScoreManipulator.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const constants_1 = require("../constants");
 const cq = require("../utils/convenienceQueries");
+const coordinates_1 = require("../utils/coordinates");
 const manipFlag = "manipulator";
 /**
  * Class for all manipulators (Buttons, Lists, etc) directly visible in the score
@@ -64,55 +65,83 @@ class ScoreManipulator {
         newSVG.setAttribute("refId", refId);
         (_a = this.interactionOverlay.querySelector("#manipulatorCanvas")) === null || _a === void 0 ? void 0 : _a.appendChild(newSVG);
     }
-    drawMeasureAdder() {
+    drawMeasureManipulators() {
         this.lastBline = Array.from(this.vrvSVG.querySelectorAll(".barLine")).reverse()[0].querySelector("path");
-        var lastBlineRect = this.lastBline.getBoundingClientRect();
-        var rootBBox = this.vrvSVG.getBoundingClientRect();
-        var blineTop = lastBlineRect.top - rootBBox.y;
-        //var blineRight = lastBlineRect.right + rootBBox.height*0.001 - rootBBox.x
-        var blineRight = lastBlineRect.right - rootBBox.x;
+        var lastBlineRect = coordinates_1.getDOMMatrixCoordinates(this.lastBline, this.vrvSVG);
+        var blineTopAdder = lastBlineRect.top;
+        var blineTopRemover = lastBlineRect.top + lastBlineRect.height / 2;
+        var blineRight = lastBlineRect.right;
         var containerSize = lastBlineRect.height * 0.4;
-        this.drawButton("measureAdder", null, "+", blineRight, blineTop, containerSize, this.lastBline.closest("svg").parentElement, "Add Measure");
-    }
-    drawMeasureRemover() {
-        var _a;
-        this.lastBline = Array.from((_a = document.getElementById(this.containerId)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".barLine")).reverse()[0].querySelector("path");
-        var lastBlineRect = this.lastBline.getBoundingClientRect();
-        var lastBlineRect = this.lastBline.getBoundingClientRect();
-        var rootBBox = this.vrvSVG.getBoundingClientRect();
-        var blineTop = lastBlineRect.top - rootBBox.y + lastBlineRect.height / 2;
-        var blineRight = lastBlineRect.right - rootBBox.x;
-        var containerSize = lastBlineRect.height * 0.4;
-        this.drawButton("measureRemover", null, "-", blineRight, blineTop, containerSize, this.lastBline.closest("svg").parentElement, "Remove Measure");
+        this.drawButton("measureAdder", null, "+", blineRight, blineTopAdder, containerSize, this.lastBline.closest("svg").parentElement, "Add Measure");
+        this.drawButton("measureRemover", null, "-", blineRight, blineTopRemover, containerSize, this.lastBline.closest("svg").parentElement, "Remove Measure");
     }
     drawStaffManipulators() {
         this.vrvSVG.querySelector(".measure").querySelectorAll(".staff").forEach(s => {
-            var rootBBox = this.vrvSVG.getBoundingClientRect();
+            //var rootBBox = this.vrvSVG.getBoundingClientRect()
             var refStaffCoords = this.getStaffManipulatorCoords(s);
             var refStaffX = refStaffCoords.x;
             var refStaffYTop = refStaffCoords.yTop;
             var refStaffYBottom = refStaffCoords.yBottom;
             var refStaffWidth = refStaffCoords.width;
             var refStaffHeight = refStaffCoords.height;
-            var posX = refStaffX - refStaffWidth * 0.5 - rootBBox.x;
-            var topY = refStaffYTop - refStaffHeight * 0.2 - rootBBox.y;
+            var posX = refStaffX - refStaffWidth * 0.5; //- rootBBox.x
+            var topY = refStaffYTop - refStaffHeight * 0.2; //- rootBBox.y
             var containerSize = refStaffHeight / 4;
             this.drawButton(null, "addStaff above", "+", posX, topY, containerSize, this.vrvSVG, s.id);
             if (parseInt(s.getAttribute("n")) > 1) {
-                posX = refStaffX - rootBBox.x;
+                posX = refStaffX; //- rootBBox.x
                 this.drawButton(null, "removeStaff above", "-", posX, topY, containerSize, this.vrvSVG, s.id);
             }
-            posX = refStaffX - refStaffWidth * 0.5 - rootBBox.x;
-            var bottomY = refStaffYBottom - rootBBox.y;
+            posX = refStaffX - refStaffWidth * 0.5; //- rootBBox.x
+            var bottomY = refStaffYBottom; //- rootBBox.y
             var containerSize = (refStaffHeight / 4);
             this.drawButton(null, "addStaff below", "+", posX, bottomY, containerSize, this.vrvSVG, s.id);
             var staffCount = s.parentElement.querySelectorAll(".staff");
             if (parseInt(s.getAttribute("n")) !== staffCount.length) {
-                posX = refStaffX - rootBBox.x;
+                posX = refStaffX; //- rootBBox.x
                 this.drawButton(null, "removeStaff below", "-", posX, bottomY, containerSize, this.vrvSVG, s.id);
             }
         });
     }
+    /**
+     * Draw 4 Buttons at the beginning of each new Line
+     */
+    drawVoiceSelectors() {
+        //var rootBBox = this.vrvSVG.getBoundingClientRect()
+        this.vrvSVG.querySelectorAll(".page").forEach(p => {
+            p.querySelector(".measure").querySelectorAll(".staff").forEach(staff => {
+                var _a;
+                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 = 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;
+                for (let i = 0; i < 4; i++) {
+                    var btn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                    var btnRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                    var btnText = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                    btnText.textContent = (i + 1).toString();
+                    btn.setAttribute("x", "3px");
+                    btn.setAttribute("y", (yTop + btnHeight * i).toString());
+                    btn.setAttribute("height", btnHeight.toString());
+                    btn.setAttribute("width", btnHeight.toString());
+                    btn.classList.add("voiceBtn");
+                    btn.classList.add("manipulator");
+                    btn.setAttribute("staffN", staff.getAttribute("n"));
+                    btn.setAttribute("btnN", (i + 1).toString());
+                    btn.setAttribute("id", "voiceSelect-" + staff.getAttribute("n") + "-" + (i + 1).toString());
+                    //btnText is relative to btn
+                    btnText.setAttribute("x", "30%");
+                    btnText.setAttribute("y", "80%");
+                    btn.append(btnRect);
+                    btn.append(btnText);
+                    (_a = this.interactionOverlay.querySelector("#manipulatorCanvas")) === null || _a === void 0 ? void 0 : _a.append(btn);
+                }
+            });
+        });
+    }
     /**
      * Get Coords for staf manipulators, since some browsers (Firefox) have problems with bounding boxes
      * @param referenceStaff Staff beside which the staff manipulator should be placed
@@ -126,20 +155,21 @@ class ScoreManipulator {
         var width;
         var height;
         if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
-            bbox = referenceStaff.querySelector(".staffLine").getBoundingClientRect();
+            bbox = coordinates_1.getDOMMatrixCoordinates(referenceStaff, this.vrvSVG); //referenceStaff.querySelector(".staffLine").getBoundingClientRect()
             x = bbox.left;
             yTop = bbox.top;
-            yBottom = 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 = 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;
         }
-        height = referenceStaff.querySelector(".clef").getBoundingClientRect().height;
-        width = referenceStaff.querySelector(".clef").getBoundingClientRect().width;
-        return { x: x, yTop: yTop, yBottom: yBottom, width: width, height: height };
+        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 };
     }
     setMEI(mei) {
         this.mei = mei;

package/src/scripts/js/gui/Tabbar.js

@@ -7,7 +7,8 @@ const interactjs_1 = require("interactjs");
 const constants_1 = require("../constants");
 const meioperations = require("../utils/MEIOperations");
 const cq = require("../utils/convenienceQueries");
-const buttonStyleDarkOutline = "btn btn-outline-dark btn-sm";
+const ReactWrapper = require("../utils/ReactWrapper");
+const buttonStyleDarkOutline = "btn btn-outline-dark btn-md";
 const buttonStyleDark = "btn btn-dark btn-md";
 const smuflFont = "smufl";
 const alterBtn = "alterBtn";
@@ -16,9 +17,9 @@ const tabFlag = "tabBtn";
 class Tabbar {
     //private task: Evaluation
     constructor(options = null, containerId) {
-        this.createAnnotListFunction = (function (e) {
+        this.createAnnotListHandler = (function createAnnotListHandler(e) {
             var t = e.target;
-            if (t.closest(".vse-container").id !== this.containerId)
+            if (t.closest(".vibe-container").id !== this.containerId)
                 return;
             this.createAnnotList(e);
         }).bind(this);
@@ -178,9 +179,17 @@ class Tabbar {
         var clefSelectItem = dc.makeNewAccordionItem("sidebarList", "selectClef", "selectClefHeader", "selectClefBtn", "Clef", buttonStyleDark, "selectClefDiv");
         var clefList = dc.makeNewDiv("clefList", "list-group flex-fill");
         clefSelectItem.querySelector("#selectClefDiv").appendChild(clefList);
+        clefList.appendChild(dc.makeNewAElement("&#x1D11F", "GClefOctUp", "list-group-item list-group-item-action " + smuflFont, "#", true));
         clefList.appendChild(dc.makeNewAElement("&#xE050", "GClef", "list-group-item list-group-item-action " + smuflFont, "#", true));
-        clefList.appendChild(dc.makeNewAElement("&#xE05C", "CClef", "list-group-item list-group-item-action " + smuflFont, "#", true));
+        clefList.appendChild(dc.makeNewAElement("&#x1D120", "GClefOctDown", "list-group-item list-group-item-action " + smuflFont, "#", true));
+        clefList.appendChild(dc.makeNewAElement("Soprano &#xE05C", "CClefSoprano", "list-group-item list-group-item-action " + smuflFont, "#", true));
+        clefList.appendChild(dc.makeNewAElement("Mezzo &#xE05C", "CClefMezzo", "list-group-item list-group-item-action " + smuflFont, "#", true));
+        clefList.appendChild(dc.makeNewAElement("Alto &#xE05C", "CClefAlto", "list-group-item list-group-item-action " + smuflFont, "#", true));
+        clefList.appendChild(dc.makeNewAElement("Tenor &#xE05C", "CClefTenor", "list-group-item list-group-item-action " + smuflFont, "#", true));
+        clefList.appendChild(dc.makeNewAElement("Bariton &#xE05C", "CClefBariton", "list-group-item list-group-item-action " + smuflFont, "#", true));
+        clefList.appendChild(dc.makeNewAElement("&#x1D123", "FClefOctUp", "list-group-item list-group-item-action " + smuflFont, "#", true));
         clefList.appendChild(dc.makeNewAElement("&#xE062", "FClef", "list-group-item list-group-item-action " + smuflFont, "#", true));
+        clefList.appendChild(dc.makeNewAElement("&#x1D124", "FClefOctDown", "list-group-item list-group-item-action " + smuflFont, "#", true));
         return clefSelectItem;
     }
     createTimeSigAccItem() {
@@ -267,6 +276,9 @@ class Tabbar {
             var text = c.querySelector(".annotDiv").textContent || c.querySelector(".annotDiv").getAttribute("data-text");
             var a = dc.makeNewAElement(text, "", "list-group-item list-group-item-action list-group-item-primary", "#");
             a.setAttribute("refId", c.id);
+            if (c.querySelector(".annotDiv").style.backgroundColor.length > 0) {
+                a.style.backgroundColor = c.querySelector(".annotDiv").style.backgroundColor;
+            }
             //a.setAttribute("contenteditable", "true")
             a.addEventListener("click", function () {
                 var _a;
@@ -306,6 +318,7 @@ class Tabbar {
         this.annotationTab = cq.getContainer(this.containerId).querySelector("#annotationTabGroup");
         this.annotationTab.append(dc.makeNewButton("Annotation", "annotationTabBtn", buttonStyleDarkOutline + " " + tabFlag));
         this.noteButtonGroup = cq.getContainer(this.containerId).querySelector("#noteGroup");
+        this.noteButtonGroup.append(dc.makeNewButton("&#x1D15C", "breveNote", buttonStyleDarkOutline + " " + smuflFont, "", true));
         this.noteButtonGroup.append(dc.makeNewButton("&#x1D15D", "fullNote", buttonStyleDarkOutline + " " + smuflFont, "", true));
         this.noteButtonGroup.append(dc.makeNewButton("&#x1D15E", "halfNote", buttonStyleDarkOutline + " " + smuflFont, "", true));
         this.noteButtonGroup.append(dc.makeNewButton("&#x1D15F", "quarterNote", buttonStyleDarkOutline + " " + smuflFont + " selected", "", true));
@@ -336,13 +349,17 @@ class Tabbar {
         this.zoomGroup = cq.getContainer(this.containerId).querySelector("#zoomGroup");
         this.zoomGroup.append(dc.makeNewButton("", "zoomOutBtn", buttonStyleDarkOutline));
         this.zoomGroup.append(dc.makeNewButton("", "zoomInBtn", buttonStyleDarkOutline));
-        // this.midiSelectGroup = cq.getContainer(this.containerId).querySelector("#midiSelectGroup")
-        // this.midiSelectGroup.append(dc.makeNewSelect("midiDeviceSelect", [], "MIDI Input Device"))
+        this.colorGroup = cq.getContainer(this.containerId).querySelector("#colorGroup");
+        function handleColor(color) {
+            this.colorGroup.setAttribute("selectedColor", color);
+            this.colorGroup.dispatchEvent(new Event("change"));
+        }
+        this.colorGroup.append(ReactWrapper.createColorPicker("colorPicker", handleColor.bind(this)));
         this.fileSelectGroup = cq.getContainer(this.containerId).querySelector("#fileSelectGroup");
         this.fileSelectGroup.append(dc.makeNewInput("importAudioFile", "file", ""));
         this.fileSelectGroup.append(dc.makeNewButton("Import Audiofile", "importAudioFileBtn", buttonStyleDarkOutline));
         this.fileSelectGroup.append(dc.makeNewInput("importXML", "file", ""));
-        this.fileSelectGroup.append(dc.makeNewButton("Import Data", "importXMLBtn", buttonStyleDarkOutline));
+        this.fileSelectGroup.append(dc.makeNewButton("Import Score", "importXMLBtn", buttonStyleDarkOutline));
         this.fileSelectGroup.append(dc.makeNewButton("Export MEI", "exportFileBtn", buttonStyleDarkOutline));
         var showBBToggle = dc.makeNewToggle("showBB", buttonStyleDark, "BBoxes", "showBBDiv");
         this.setToggleLogic(showBBToggle, function () { cq.getContainer(that.containerId).classList.add("debug"); }, function () { cq.getContainer(that.containerId).classList.remove("debug"); });
@@ -382,7 +399,7 @@ class Tabbar {
     }
     createInsertSelect() {
         //InsertSelect DropdownMenu
-        this.insertSelectGroup = dc.makeNewDiv("insertGroup", "customGroup btn-group-sm me-2 h-100", { role: "group" });
+        this.insertSelectGroup = dc.makeNewDiv("insertGroup", "customGroup btn-group-md me-2 h-100", { role: "group" });
         var toggle = dc.makeNewToggle("insertToggle", buttonStyleDarkOutline, "Replace", "insertToggleDiv");
         toggle.addEventListener("click", function (e) {
             e.preventDefault();
@@ -403,14 +420,14 @@ class Tabbar {
         this.insertSelectGroup.append(toggle);
     }
     createButtonsAnnotationMode() {
-        this.annotGroupKM = dc.makeNewDiv("annotGroupKM", "customGroup btn-group-sm me-2 h-100", { role: "group" });
+        this.annotGroupKM = dc.makeNewDiv("annotGroupKM", "customGroup btn-group-md me-2 h-100", { role: "group" });
         this.annotGroupKM.append(dc.makeNewButton("Text", "staticTextButton", buttonStyleDarkOutline));
-        this.annotGroupKM.append(dc.makeNewButton("Linked Text", "linkedAnnotButton", buttonStyleDarkOutline + " selected"));
+        this.annotGroupKM.append(dc.makeNewButton("Sticky Text", "linkedAnnotButton", buttonStyleDarkOutline + " selected"));
         this.annotGroupKM.append(dc.makeNewButton("Harmony", "harmonyAnnotButton", buttonStyleDarkOutline));
         this.annotGroupKM.addEventListener("click", this.exclusiveSelectHandler);
     }
     createArticualtionButtons() {
-        this.articGroup = dc.makeNewDiv("articGroup", "customGroup btn-group-sm me-2 h-100", { role: "group" });
+        this.articGroup = dc.makeNewDiv("articGroup", "customGroup btn-group-md me-2 h-100", { role: "group" });
         this.articGroup.append(dc.makeNewButton(".", "staccatoBtn", buttonStyleDarkOutline));
         this.articGroup.append(dc.makeNewButton("_", "tenutoBtn", buttonStyleDarkOutline));
         this.articGroup.append(dc.makeNewButton("𝅿", "marcatoBtn", buttonStyleDarkOutline + " " + smuflFont, "", true));
@@ -431,6 +448,7 @@ class Tabbar {
         //further utils
         btnToolbar.appendChild(this.soundGroup);
         btnToolbar.appendChild(this.zoomGroup);
+        btnToolbar.append(this.colorGroup);
         //btnToolbar.appendChild(this.midiSelectGroup)
         btnToolbar.appendChild(this.fileSelectGroup);
     }
@@ -460,7 +478,7 @@ class Tabbar {
         });
         // achtung: nie preventDefault in einem Document anwenden
         document.addEventListener("keydown", this.closeHandlerKey);
-        //document.getElementsByClassName("vse-container")[0]?.addEventListener("click", this.closeHandlerMouse)
+        //document.getElementsByClassName("vibe-container")[0]?.addEventListener("click", this.closeHandlerMouse)
         cq.getContainer(this.containerId).querySelectorAll("#dotGroup button, #noteGroup button, #modGroup button, #accidGroup Button").forEach(el => {
             el.addEventListener("click", this.exclusiveSelectHandler);
         });
@@ -477,7 +495,7 @@ class Tabbar {
                 ac.classList.add("show");
             });
         });
-        cq.getContainer(this.containerId).addEventListener("annotChanged", this.createAnnotListFunction, true);
+        cq.getContainer(this.containerId).addEventListener("annotChanged", this.createAnnotListHandler, true);
         //Markup/ XML FileSelection
         cq.getContainer(this.containerId).querySelector("#importXMLBtn").addEventListener("click", function () {
             var impF = this.parentElement.querySelector("#importXML");
@@ -528,7 +546,7 @@ class Tabbar {
                     + ("0" + d.getMinutes()).slice(-2)
                     + ("0" + d.getSeconds()).slice(-2)
                     + "_"
-                    + "vseScore_" + that.containerId + ".mei";
+                    + "vibeScore_" + that.containerId + ".mei";
                 that.download(fileName, mei);
             });
         });
@@ -541,16 +559,18 @@ class Tabbar {
      * @returns
      */
     align(blob, file) {
-        var _a;
         this.audioBlob = blob;
         this.audioFile = file;
-        if (!(this.audioFile && this.audioFile))
+        if (!(this.audioBlob && this.audioFile))
             return;
-        this.alignCallback(this.audioBlob);
-        (_a = this.fileSelectGroup.querySelector("#audioSlider")) === null || _a === void 0 ? void 0 : _a.remove();
+        this.fileSelectGroup.querySelectorAll("#audioSlider, #recordAlignment, #exportAlignment").forEach(el => el.remove());
+        var recBtn = dc.makeNewToggle("recordAlignment", buttonStyleDarkOutline + " " + smuflFont, "rec", "recordDiv");
         var audioSlider = dc.makeNewAudioSlider("audioSlider", "", URL.createObjectURL(this.audioFile));
+        var exportAlignBtn = dc.makeNewButton("Export Alignment", "exportAlignment", buttonStyleDarkOutline + " " + smuflFont);
         this.fileSelectGroup.prepend(audioSlider);
-        // audioSlider event will be catched during bubble phase in MusicProcessor
+        this.fileSelectGroup.prepend(recBtn);
+        this.fileSelectGroup.prepend(exportAlignBtn);
+        this.alignCallback(this.audioBlob);
     }
     download(file, text) {
         //creating an invisible element
@@ -567,14 +587,14 @@ class Tabbar {
             el.removeEventListener("click", this.closeHandlerMouse);
         });
         document.removeEventListener("keydown", this.closeHandlerKey);
-        cq.getContainer(this.containerId).querySelectorAll(".btn-group-sm button").forEach(el => {
+        cq.getContainer(this.containerId).querySelectorAll(".btn-group-md button").forEach(el => {
             el.removeEventListener("click", this.exclusiveSelectHandler);
         });
         cq.getContainer(this.containerId).querySelector("#toggleSidebar").removeEventListener("click", this.sidebarHandler);
         cq.getContainer(this.containerId).querySelectorAll(["#insertDropdown a", "." + tabFlag].join(",")).forEach(a => {
             a.removeEventListener("click", this.customToolbarHandler);
         });
-        cq.getContainer(this.containerId).removeEventListener("annotChanged", this.createAnnotListFunction);
+        cq.getContainer(this.containerId).removeEventListener("annotChanged", this.createAnnotListHandler);
         interactjs_1.default("#annotList").unset();
     }
     closeDropdown(ddButton) {

package/src/scripts/js/gui/Toolbar.js

@@ -20,7 +20,7 @@ class Toolbar {
     constructor(options = null, containerId) {
         this.createAnnotListFunction = (function (e) {
             var t = e.target;
-            if (t.closest(".vse-container").id !== this.containerId)
+            if (t.closest(".vibe-container").id !== this.containerId)
                 return;
             this.createAnnotList(e);
         }).bind(this);
@@ -464,7 +464,7 @@ class Toolbar {
         });
         // achtung: nie preventDefault in einem Document anwenden
         document.addEventListener("keydown", this.closeHandlerKey);
-        //document.getElementsByClassName("vse-container")[0]?.addEventListener("click", this.closeHandlerMouse)
+        //document.getElementsByClassName("vibe-container")[0]?.addEventListener("click", this.closeHandlerMouse)
         cq.getContainer(this.containerId).querySelectorAll("#dotGroup button, #noteGroup button, #modGroup button").forEach(el => {
             el.addEventListener("click", this.exclusiveSelectHandler);
         });
@@ -516,7 +516,7 @@ class Toolbar {
                     + ("0" + d.getMinutes()).slice(-2)
                     + ("0" + d.getSeconds()).slice(-2)
                     + "_"
-                    + "vseScore_" + that.containerId + ".mei";
+                    + "vibeScore_" + that.containerId + ".mei";
                 that.download(fileName, mei);
             });
         });
@@ -536,7 +536,7 @@ class Toolbar {
             el.removeEventListener("click", this.closeHandlerMouse);
         });
         document.removeEventListener("keydown", this.closeHandlerKey);
-        //document.getElementsByClassName("vse-container")[0].removeEventListener("click", this.closeHandlerMouse)
+        //document.getElementsByClassName("vibe-container")[0].removeEventListener("click", this.closeHandlerMouse)
         cq.getContainer(this.containerId).querySelectorAll(".btn-group-sm button").forEach(el => {
             el.removeEventListener("click", this.exclusiveSelectHandler);
         });