vibe-editor 0.0.0

package/src/scripts/js/VerovioScoreEditor.js

@@ -0,0 +1,183 @@
+"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 VerovioScoreEditor
+ */
+class VerovioScoreEditor {
+    /**
+     *
+     * @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;
+        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";
+        }
+        (_a = container === null || container === void 0 ? void 0 : container.classList) === null || _a === void 0 ? void 0 : _a.add("vse-container");
+        this.container = container;
+        this.options = options;
+        this.meiChangedCallback = meiCallback;
+        this.loadScripts();
+        this.setMutationObserver();
+    }
+    /**
+     * Load verovio script.
+     * 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 everything on load
+     * @param container container provided by H5P
+     */
+    initGUI() {
+        return new Promise((resolve) => {
+            var _a, _b;
+            var btnGrpClass = "btn-group-sm 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" }));
+            //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 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"}))
+            var tb = new Tabbar_1.default(this.options, this.container.id); //new Toolbar(this.options, this.container.id)
+            tb.createToolbars();
+            //attach mei first time
+            this.coreInstance = new Core_1.default(this.container.id);
+            this.container.append(dc.makeNewDiv(constants_1.constants._TARGETDIVID_, ""));
+            var initEvent = new Event("vseInit");
+            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.loadData(data, isUrl).then(() => {
+                this.container.dispatchEvent(initEvent);
+                resolve();
+            });
+            tb
+                .setImportCallback(this.coreInstance.loadDataFunction)
+                .setAlignCallback(this.coreInstance.alignFunctionCall)
+                .setGetMEICallback(this.coreInstance.getMEI.bind(this.coreInstance));
+            //block everthing when firefox (use at least version 114.0.2)
+            if (navigator.userAgent.toLowerCase().includes("firefox")) {
+                if (!navigator.userAgent.match("Firefox.*")[0].includes("114.0")) {
+                    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 = VerovioScoreEditor;

package/src/scripts/js/assets/mei_template.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../constants");
+const random_1 = require("../utils/random");
+class MeiTemplate {
+    /**
+     * Create templates for MEI-Componets to be inserted
+     * @param xml xml document provided to be altered
+     */
+    constructor(xml) {
+        this.xmlDoc = xml;
+        this.isEmpty = true;
+    }
+    emptyMEI() {
+        this.isEmpty = true;
+        var mei = document.createElementNS(constants_1.constants._MEINS_, "mei");
+        //mei.setAttribute("xmlns", "http://www.music-encoding.org/ns/mei");
+        //mei.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+        mei.setAttribute("meiversion", "4.0.0");
+        mei.appendChild(this.createMeiHead());
+        mei.appendChild(this.createMusic());
+        var meiString = mei.outerHTML;
+        meiString = meiString.replace(/def/gi, "Def");
+        meiString = meiString.replace(/\grp/gi, "Grp");
+        meiString = meiString.replace(/\head/gi, "Head");
+        meiString = meiString.replace(/space/gi, "Space");
+        return meiString;
+    }
+    createMusic() {
+        var newElem = document.createElement("music");
+        newElem.appendChild(this.createBody());
+        return newElem;
+    }
+    createBody() {
+        var newElem = document.createElement("body");
+        newElem.appendChild(this.createMDiv());
+        return newElem;
+    }
+    createMDiv() {
+        var newElem = document.createElement("mdiv");
+        newElem.appendChild(this.createScore());
+        return newElem;
+    }
+    createScore() {
+        var newElem = document.createElement("score");
+        newElem.appendChild(this.createScoreDef());
+        newElem.appendChild(this.createSection());
+        return newElem;
+    }
+    createSection() {
+        var newElem = document.createElement("section");
+        newElem.appendChild(this.createMeasure());
+        return newElem;
+    }
+    createScoreDef() {
+        var newElem = document.createElement("scoreDef");
+        newElem.appendChild(this.createStaffGrp());
+        return newElem;
+    }
+    createStaffGrp() {
+        var newElem = document.createElement("staffGrp");
+        newElem.appendChild(this.createStaffDef());
+        return newElem;
+    }
+    createStaffDef(n = 1, lines = 5, meterCount = 4, meterUnit = 4) {
+        var newElem = document.createElement("staffDef");
+        newElem.setAttribute("n", n.toString());
+        newElem.setAttribute("lines", lines.toString());
+        newElem.setAttribute("meter.count", meterCount.toString());
+        newElem.setAttribute("meter.unit", meterUnit.toString());
+        newElem.appendChild(this.createClef());
+        newElem.appendChild(this.createKeySig());
+        return newElem;
+    }
+    createClef(shape = "G", line = 2) {
+        var newElem = document.createElement("clef");
+        newElem.setAttribute("shape", shape);
+        newElem.setAttribute("line", line.toString());
+        return newElem;
+    }
+    createKeySig(mode = "major", sig = "0") {
+        var newElem = document.createElementNS(constants_1.constants._MEINS_, "keySig");
+        newElem.setAttribute("mode", mode);
+        newElem.setAttribute("sig", sig);
+        return newElem;
+    }
+    createMeterSig(count, unit) {
+        var newElem = document.createElementNS(constants_1.constants._MEINS_, "meterSig");
+        newElem.setAttribute("count", count);
+        newElem.setAttribute("unit", unit);
+        return newElem;
+    }
+    createMeiHead() {
+        var newElem = document.createElement("meiHead");
+        return newElem;
+    }
+    /**
+     * Return Measure to be inserted into new MEI
+     * @param n number count of measures in current staff
+     */
+    createMeasure(n = 1, staffCount = 1, layerCount = 1) {
+        var newElem = document.createElement("measure");
+        newElem.setAttribute("n", n.toString());
+        for (let i = 0; i < staffCount; i++) {
+            newElem.appendChild(this.createStaff(i + 1, layerCount));
+        }
+        return newElem;
+    }
+    createStaff(n = 1, layerCount = 1) {
+        var newElem = document.createElement("staff");
+        newElem.setAttribute("n", n.toString());
+        newElem.appendChild(this.createLayer(1));
+        return newElem;
+    }
+    createLayer(n = 1) {
+        var newElem = document.createElement("layer");
+        newElem.setAttribute("n", n.toString());
+        if (this.isEmpty) {
+            newElem.appendChild(this.createMRest());
+        }
+        return newElem;
+    }
+    createMSpace() {
+        var newElem = document.createElementNS(constants_1.constants._MEINS_, "mSpace");
+        return newElem;
+    }
+    createMRest() {
+        var newElem = document.createElementNS(constants_1.constants._MEINS_, "mRest");
+        return newElem;
+    }
+    createTempo(mm, mmUnit, tstamp = null, startId = null) {
+        var newElement = document.createElementNS(constants_1.constants._MEINS_, "tempo");
+        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");
+        }
+        if (tstamp !== null)
+            newElement.setAttribute("tstamp", tstamp);
+        if (startId !== null)
+            newElement.setAttribute("startId", startId);
+        newElement.setAttribute("mm", mm);
+        newElement.setAttribute("mm.unit", mmUnit);
+        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", random_1.uuidv4());
+        rend.setAttribute("fontname", "VerovioText");
+        rend.textContent = "__";
+        newElement.appendChild(rend);
+        newElement.textContent = "__ = " + mm;
+        return newElement;
+    }
+    appendToRoot(node) {
+        if (this.xmlDoc instanceof XMLDocument) {
+            var refElem = this.xmlDoc.getElementsByTagName("measure").item(0);
+            refElem.parentNode.appendChild(node);
+        }
+    }
+}
+exports.default = MeiTemplate;

package/src/scripts/js/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.constants = void 0;
+var constants;
+(function (constants) {
+    constants["_TARGETDIVID_"] = "svgContainer";
+    constants["_TARGETDIVID_WITH_IDSELECTOR_"] = "#svgContainer";
+    constants["_MEASURE_"] = "measure";
+    constants["_NOTE_"] = "note";
+    constants["_NOTE_WITH_CLASSSELECTOR_"] = ".note";
+    constants["_STAFF_WITH_CLASSSELECTOR_"] = ".staff";
+    constants["_NOTEHEAD_"] = "notehead";
+    constants["_vrvSVGID_"] = "vrvSVG";
+    constants["_vrvSVGID_WITH_IDSELECTOR_"] = "#vrvSVG";
+    constants["_VEROVIO_VERSION_"] = "3.6.0";
+    constants["_METERUNIT_"] = "meter.unit";
+    constants["_METERCOUNT_"] = "meter.count";
+    constants["_SVGNS_"] = "http://www.w3.org/2000/svg";
+    constants["_MEINS_"] = "http://www.music-encoding.org/ns/mei";
+})(constants = exports.constants || (exports.constants = {}));

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

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const mappings_1 = require("../utils/mappings");
+//@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);
+            }
+        }
+    }
+    /**
+     * @deprecated
+     * @param svg
+     */
+    populateFromSVG(svg) {
+        this.matrix = new Array();
+        this.cols = svg.querySelectorAll(".measure").length;
+        this.rows = svg.querySelector(".measure").querySelectorAll(".staff").length;
+        var measures = svg.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 staff = {};
+                let clefs = prevStaves[j].querySelectorAll(".clef");
+                let keysigs = staves[j].querySelectorAll(".keySig");
+                let meterSigs = staves[j].querySelectorAll(".meterSig");
+                if (clefs.length > 0) {
+                    let clefIdx;
+                    if (i === 0) {
+                        clefIdx = 0;
+                    }
+                    else {
+                        clefIdx = clefs.length - 1;
+                    }
+                    let clefShape = clefs[clefIdx].querySelector("use").getAttribute("xlink:href");
+                    if (clefShape.includes("-")) {
+                        let clefRegex = /^(.*?)-/g;
+                        clefShape = clefRegex.exec(clefShape)[0];
+                        clefShape = clefShape.slice(0, -1);
+                    }
+                    clefShape = mappings_1.idToClef.get(clefShape);
+                    staff.clef = clefShape;
+                }
+                else {
+                    staff.clef = this.matrix[i - 1][j].clef;
+                }
+                if (keysigs.length > 0) {
+                    let lastIdx = keysigs.length - 1;
+                    let keysigcount = keysigs[lastIdx].querySelectorAll("use").length;
+                    let keysig = keysigs[lastIdx].querySelector("use").getAttribute("xlink:href") === "#E262" ? "f" : "s";
+                    keysig = keysigcount.toString() + keysig;
+                    staff.keysig = keysig;
+                }
+                else if (i > 0) {
+                    staff.keysig = this.matrix[i - 1][j].keysig;
+                }
+                else { // if first measure has no accidentials
+                    staff.keysig = "0";
+                }
+                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 (staves[j].querySelector("metersig") === null) {
+                        staff.meterSig = null;
+                    }
+                    else {
+                        staff.meterSig = { unit: staves[j].querySelector("metersig").getAttribute("unit"), count: staves[j].querySelector("metersig").getAttribute("count") };
+                    }
+                }
+                col.push(staff);
+            }
+            this.matrix.push(col);
+        }
+        //console.log(this.matrix)
+    }
+    populateFromMEI(mei) {
+        var _a, _b;
+        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;
+                    }
+                    else {
+                        staff.clef = ((_a = staffDef.querySelector("clef")) === null || _a === void 0 ? void 0 : _a.getAttribute("shape")) || staffDef.getAttribute("clef.shape");
+                    }
+                }
+                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 = ((_b = staffDef.querySelector("keySig")) === null || _b === void 0 ? void 0 : _b.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;