vibe-editor 0.0.3 → 0.0.5

package/src/scripts/js/scripts/VIBE.js

@@ -0,0 +1,219 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("./constants");
+const Core_1 = require("./Core");
+const dc = require("./utils/DOMCreator");
+const Tabbar_1 = require("./gui/Tabbar");
+/**
+ * Main Class for the Verovio Interface for Browser based Editing
+ */
+class VIBE {
+    /**
+     *
+     * @param container Container in which the editor will be displayed
+     * @param options options from Class implementing H5P functionality
+     */
+    constructor(container = null, options, meiCallback) {
+        var _a;
+        this.isFullContainer = false;
+        if ((container === null || container === void 0 ? void 0 : container.id) === null) {
+            throw new Error("The editor's container must have an id");
+        }
+        if (container === null) {
+            container = document.body;
+            container.id = "editorInBody";
+        }
+        if (container === null || container === void 0 ? void 0 : container.classList.contains("vibe-container")) {
+            this.isFullContainer = true;
+            Array.from(container.children).forEach(c => {
+                if (c.id != "svgContainer")
+                    c.remove();
+            });
+        }
+        else {
+            (_a = container === null || container === void 0 ? void 0 : container.classList) === null || _a === void 0 ? void 0 : _a.add("vibe-container");
+        }
+        this.container = container;
+        this.options = options;
+        this.tabbar = new Tabbar_1.default(this.options, this.container.id); //new Toolbar(this.options, this.container.id)
+        this.meiChangedCallback = meiCallback;
+        this.loadScripts();
+        this.setMutationObserver();
+    }
+    /**
+     * Load verovio script from the internet.
+     * Makes sure that only one script instance is in the DOM.
+     */
+    loadScripts() {
+        var src = "https://www.verovio.org/javascript/" + constants_1.constants._VEROVIO_VERSION_ + "/verovio-toolkit.js";
+        var scriptId = "verovioScript";
+        var script = document.querySelector("#" + scriptId) || document.createElement('script');
+        script.src = src;
+        if (script.id === "") {
+            script.id = scriptId;
+        }
+        if (script.getAttribute("loaded") === null) {
+            script.setAttribute("loaded", "false");
+        }
+        if (script.getAttribute("loaded") === "true") {
+            this.initGUI().then(() => {
+                // if(this.meiChangedCallback != undefined){ 
+                //     this.setMEIChangedCallback(this.meiChangedCallback)
+                // }
+            });
+        }
+        if (document.getElementById(scriptId) === null) {
+            var prior = document.getElementsByTagName('script')[0];
+            script.async = false;
+            prior.parentNode.insertBefore(script, prior);
+            script.onload = function () {
+                script.setAttribute("loaded", "true");
+            };
+        }
+    }
+    /**
+     * Observes if the script is already loaded. Fires initGUI() when Attribute "loaded" changes to "true"
+     */
+    setMutationObserver() {
+        var that = this;
+        var observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.type === "attributes") {
+                    var t = mutation.target;
+                    if (mutation.attributeName === "loaded" && t.getAttribute(mutation.attributeName) === "true") {
+                        that.initGUI().then(() => {
+                            // if(that.meiChangedCallback != undefined){ 
+                            //     that.setMEIChangedCallback(that.meiChangedCallback)
+                            // }
+                        });
+                    }
+                }
+            });
+        });
+        observer.observe(document.getElementById("verovioScript"), {
+            attributes: true
+        });
+    }
+    /**
+     * Init gui on load.
+     * Toolbars are predefined.
+     */
+    initGUI() {
+        return new Promise((resolve) => {
+            var btnGrpClass = "btn-group-md me-2";
+            // MAIN/ Permanent TOOLBAR
+            // parentElement for dropdown
+            this.container.append(dc.makeNewDiv("handlerGroup", btnGrpClass, { role: "group" })); //"me-2 h-100"))
+            //parentElement for Notebuttons
+            this.container.append(dc.makeNewDiv("noteGroup", btnGrpClass, { role: "group" }));
+            //parentElement for Dotbuttons
+            this.container.append(dc.makeNewDiv("dotGroup", btnGrpClass, { role: "group" }));
+            //parentElement for local modifier Buttons
+            this.container.append(dc.makeNewDiv("modGroup", btnGrpClass, { role: "group" }));
+            //parentElement for local accidental Buttons
+            this.container.append(dc.makeNewDiv("accidGroup", btnGrpClass, { role: "group" }));
+            //parentElement for local articulation Buttons
+            this.container.append(dc.makeNewDiv("articGroup", btnGrpClass, { role: "group" }));
+            //sidebarList
+            this.container.append(dc.makeNewDiv("sidebarContainer", "sidebar closedSidebar"));
+            //parentElement for sidebar open/close
+            this.container.append(dc.makeNewDiv("sideBarGroup", btnGrpClass, { role: "group" }));
+            //parentElement for playback
+            this.container.append(dc.makeNewDiv("soundGroup", btnGrpClass, { role: "group" }));
+            //parentElement for zoom
+            this.container.append(dc.makeNewDiv("zoomGroup", btnGrpClass, { role: "group" }));
+            //parentElement for colorPicker
+            this.container.append(dc.makeNewDiv("colorGroup", btnGrpClass, { role: "group" }));
+            //parentElement for midi device selection
+            this.container.append(dc.makeNewDiv("midiSelectGroup", btnGrpClass, { role: "group" }));
+            //parentElement for fileselect group
+            this.container.append(dc.makeNewDiv("fileSelectGroup", btnGrpClass, { role: "group" }));
+            // parentElement for toolbarTop
+            this.container.append(dc.makeNewDiv("btnToolbar", "btn-toolbar d-inline-flex align-items-stretch", { role: "toolbar" }));
+            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            // CUSTOM TOOLBAR
+            // parentElement for customToolbar
+            this.container.append(dc.makeNewDiv("customToolbar", "btn-toolbar align-items-stretch", { role: "toolbar" }));
+            // and now the tabs
+            this.container.append(dc.makeNewDiv("notationTabGroup", btnGrpClass, { role: "group" }));
+            this.container.append(dc.makeNewDiv("articulationTabGroup", btnGrpClass, { role: "group" }));
+            this.container.append(dc.makeNewDiv("annotationTabGroup", btnGrpClass, { role: "group" }));
+            //this.container.append(dc.makeNewDiv("melismaTabGroup", btnGrpClass, {role: "group"}))
+            this.tabbar.createToolbars();
+            resolve(this.createCoreInstance());
+        });
+    }
+    createCoreInstance() {
+        return new Promise(resolve => {
+            var _a, _b;
+            //attach mei first time
+            this.coreInstance = new Core_1.default(this.container.id);
+            if (!this.isFullContainer) {
+                this.container.append(dc.makeNewDiv(constants_1.constants._TARGETDIVID_, ""));
+            }
+            else {
+                const sc = this.container.querySelector("#svgContainer");
+                sc.parentElement.append(sc);
+            }
+            var initEvent = new Event("vibeInit");
+            var data;
+            var isUrl = false;
+            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.meiURL) != undefined) {
+                data = this.options.meiURL;
+                isUrl = true;
+            }
+            else if (((_b = this.options) === null || _b === void 0 ? void 0 : _b.data) != undefined) {
+                data = this.options.data;
+            }
+            else if (this.options === null) {
+                data = null;
+            }
+            this.coreInstance.setMEIChangedCallback(this.meiChangedCallback);
+            if (!this.isFullContainer) {
+                this.coreInstance.loadData(data, isUrl).then(() => {
+                    this.container.dispatchEvent(initEvent);
+                    resolve();
+                });
+            }
+            else {
+                this.coreInstance.loadWithExistingSVG(this.container, data, isUrl).then(() => {
+                    this.container.dispatchEvent(initEvent);
+                    resolve();
+                });
+            }
+            this.tabbar
+                .setImportCallback(this.coreInstance.loadDataHandler)
+                .setAlignCallback(this.coreInstance.alignFunctionHandler)
+                .setGetMEICallback(this.coreInstance.getMEI.bind(this.coreInstance));
+            //block everthing when firefox is not at least version 114.0
+            if (navigator.userAgent.toLowerCase().includes("firefox")) {
+                const userAgent = navigator.userAgent;
+                const firefoxVersion = parseFloat(userAgent.split("Firefox/")[1]);
+                const isAtLeast114 = firefoxVersion >= 114.0;
+                if (!isAtLeast114) {
+                    var div = document.createElement("div");
+                    div.id = "ff_warning";
+                    this.container.insertAdjacentElement("beforebegin", div);
+                    div.append(this.container);
+                    div.textContent = "This application can't be used with your current Firefox version (" + navigator.userAgent.match(/Firefox\/(\d+(\.\d+)?)/)[1] + ").\n Please update at least to version 114.0.2 or use another browser.";
+                }
+            }
+        });
+    }
+    /**
+     *
+     * @param meiChangedCallback Function in which the mei will be used by the calling instance
+     */
+    setMEIChangedCallback(meiChangedCallback) {
+        this.meiChangedCallback = meiChangedCallback;
+        this.coreInstance.setMEIChangedCallback(this.meiChangedCallback);
+    }
+    /**
+     * Get Core Instance to manipulate svg output
+     * @returns
+     */
+    getCore() {
+        return this.coreInstance;
+    }
+}
+exports.default = VIBE;

package/src/scripts/js/{assets → scripts/assets}/mei_template.js

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

package/src/scripts/js/scripts/datastructures/MeasureMatrix.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//@ts-ignore
+//const $ = H5P.jQuery;
+class MeasureMatrix {
+    constructor(rows = null, cols = null) {
+        this.rows = rows;
+        this.cols = cols;
+        this.matrix = null;
+        if (cols !== null && rows !== null) {
+            // empty matrix
+            this.matrix = new Array();
+            for (var i = 0; i < cols; i++) {
+                let col = new Array();
+                for (var j = 0; j < rows; j++) {
+                    var staff = {};
+                    col.push(staff);
+                }
+                this.matrix.push(col);
+            }
+        }
+    }
+    populateFromMEI(mei) {
+        var _a, _b, _c, _d, _e, _f;
+        this.matrix = new Array();
+        this.cols = mei.querySelectorAll("measure").length;
+        this.rows = mei.querySelector("measure").querySelectorAll("staff").length;
+        var measures = mei.querySelectorAll("measure");
+        for (var i = 0; i < this.cols; i++) {
+            let col = new Array();
+            let measure = measures[i];
+            let prevMeasure;
+            if (i == 0) {
+                prevMeasure = measure;
+            }
+            else {
+                prevMeasure = measures[i - 1];
+            }
+            let staves = measure.querySelectorAll("staff");
+            let prevStaves = prevMeasure.querySelectorAll("staff");
+            for (var j = 0; j < this.rows; j++) {
+                let staffDef = mei.querySelector("staffDef[n=\"" + (j + 1).toString() + "\"]");
+                let staff = {};
+                let clefs = i === 0 ? [] : prevStaves[j].querySelectorAll("clef");
+                let keysigs = i === 0 ? [] : staves[j].querySelectorAll("keySig");
+                let meterSigs = staves[j].querySelectorAll("meterSig");
+                let clefIdx;
+                if (clefs.length > 0) {
+                    if (i === 0) {
+                        clefIdx = 0;
+                    }
+                    else {
+                        clefIdx = clefs.length - 1;
+                    }
+                    let clefShape = clefs[clefIdx].getAttribute("shape");
+                    staff.clef = clefShape;
+                }
+                else {
+                    if (i > 0) {
+                        staff.clef = this.matrix[i - 1][j].clef;
+                        staff.clefline = this.matrix[i - 1][j].clefline;
+                        staff.clefdisplacement = this.matrix[i - 1][j].clefdisplacement;
+                    }
+                    else {
+                        staff.clef = ((_a = staffDef.querySelector("clef")) === null || _a === void 0 ? void 0 : _a.getAttribute("shape")) || staffDef.getAttribute("clef.shape");
+                        staff.clefline = ((_b = staffDef.querySelector("clef")) === null || _b === void 0 ? void 0 : _b.getAttribute("line")) || staffDef.getAttribute("clef.line");
+                        staff.clefdisplacement = ((_c = staffDef.querySelector("clef")) === null || _c === void 0 ? void 0 : _c.getAttribute("dis")) ? ((_d = staffDef.querySelector("clef")) === null || _d === void 0 ? void 0 : _d.getAttribute("dis")) + ((_e = staffDef.querySelector("clef")) === null || _e === void 0 ? void 0 : _e.getAttribute("dis.place")) : null;
+                    }
+                }
+                if (keysigs.length > 0) {
+                    let lastIdx = keysigs.length - 1;
+                    let keysig = keysigs[lastIdx].getAttribute("sig");
+                    staff.keysig = keysig;
+                }
+                else if (i > 0) {
+                    staff.keysig = this.matrix[i - 1][j].keysig;
+                }
+                else {
+                    if (staffDef.querySelector("keySig") === null) {
+                        staff.keysig = "0";
+                    }
+                    else {
+                        staff.keysig = ((_f = staffDef.querySelector("keySig")) === null || _f === void 0 ? void 0 : _f.getAttribute("sig")) || staffDef.getAttribute("keysig");
+                    }
+                }
+                if (meterSigs.length > 0) {
+                    let lastIdx = meterSigs.length - 1;
+                    let unit = meterSigs[lastIdx].getAttribute("unit");
+                    let count = meterSigs[lastIdx].getAttribute("count");
+                    staff.meterSig = { unit: unit, count: count };
+                }
+                else if (i > 0) {
+                    staff.meterSig = this.matrix[i - 1][j].meterSig;
+                }
+                else {
+                    if (staffDef.querySelector("meterSig") !== null) {
+                        staff.meterSig = { unit: staffDef.querySelector("meterSig").getAttribute("unit"), count: staffDef.querySelector("meterSig").getAttribute("count") };
+                    }
+                    else if (staffDef.getAttribute("meter.unit") !== null) {
+                        staff.meterSig = { unit: staffDef.getAttribute("meter.unit"), count: staffDef.getAttribute("meter.count") };
+                    }
+                    else {
+                        staff.meterSig = null;
+                    }
+                }
+                col.push(staff);
+            }
+            this.matrix.push(col);
+        }
+        //console.log(this.matrix)
+    }
+    addMeasure(n = 1) {
+        for (var i = 0; i < n; i++) {
+            let col = new Array();
+            for (var j = 0; j < this.rows; j++) {
+                var staff = {};
+                col.push(staff);
+            }
+            this.matrix.push(col);
+        }
+        this.cols += n;
+    }
+    addStaff(n = 1) {
+        for (var i = 0; i < this.cols; i++) {
+            for (var j = 0; j < n; j++) {
+                var staff = {};
+                this.matrix[i].push(staff);
+            }
+        }
+        this.rows += n;
+    }
+    /**
+     * Get StaffType from matrix for [staff][measure]
+     * @param row measure index = attribute("n")-1
+     * @param col staff index = attribute("n")-1
+     * @returns
+     */
+    get(row, col) {
+        if (!isNaN(parseInt(row.toString())) && !isNaN(parseInt(col.toString()))) {
+            if (typeof row === "string") {
+                row = parseInt(row.toString()) - 1;
+            }
+            if (typeof col === "string") {
+                col = parseInt(col.toString()) - 1;
+            }
+            return this.matrix[row][col];
+        }
+        else {
+            return null;
+        }
+    }
+    getDimensions() {
+        return { rows: this.rows, cols: this.cols };
+    }
+}
+exports.default = MeasureMatrix;