vibe-editor 0.0.0 → 0.0.1

package/src/scripts/js/{VerovioScoreEditor.js → VIBE.js}

@@ -7,7 +7,7 @@ const Tabbar_1 = require("./gui/Tabbar");
 /**
  * Main Class for the VerovioScoreEditor
  */
-class VerovioScoreEditor {
+class VIBE {
     /**
      *
      * @param container Container in which the editor will be displayed
@@ -15,6 +15,7 @@ class VerovioScoreEditor {
      */
     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");
         }
@@ -22,17 +23,26 @@ class VerovioScoreEditor {
             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");
+        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.
+     * 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";
@@ -47,9 +57,9 @@ class VerovioScoreEditor {
         }
         if (script.getAttribute("loaded") === "true") {
             this.initGUI().then(() => {
-                if (this.meiChangedCallback != undefined) {
-                    this.setMEIChangedCallback(this.meiChangedCallback);
-                }
+                // if(this.meiChangedCallback != undefined){ 
+                //     this.setMEIChangedCallback(this.meiChangedCallback)
+                // }
             });
         }
         if (document.getElementById(scriptId) === null) {
@@ -72,9 +82,9 @@ class VerovioScoreEditor {
                     var t = mutation.target;
                     if (mutation.attributeName === "loaded" && t.getAttribute(mutation.attributeName) === "true") {
                         that.initGUI().then(() => {
-                            if (that.meiChangedCallback != undefined) {
-                                that.setMEIChangedCallback(that.meiChangedCallback);
-                            }
+                            // if(that.meiChangedCallback != undefined){ 
+                            //     that.setMEIChangedCallback(that.meiChangedCallback)
+                            // }
                         });
                     }
                 }
@@ -85,13 +95,12 @@ class VerovioScoreEditor {
         });
     }
     /**
-     * Init everything on load
-     * @param container container provided by H5P
+     * Init gui on load.
+     * Toolbars are predefined.
      */
     initGUI() {
         return new Promise((resolve) => {
-            var _a, _b;
-            var btnGrpClass = "btn-group-sm me-2";
+            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"))
@@ -111,6 +120,8 @@ class VerovioScoreEditor {
             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
@@ -126,12 +137,23 @@ class VerovioScoreEditor {
             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();
+            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);
-            this.container.append(dc.makeNewDiv(constants_1.constants._TARGETDIVID_, ""));
-            var initEvent = new Event("vseInit");
+            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) {
@@ -144,17 +166,29 @@ class VerovioScoreEditor {
             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)
+            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 (use at least version 114.0.2)
+            //block everthing when firefox is not at least version 114.0
             if (navigator.userAgent.toLowerCase().includes("firefox")) {
-                if (!navigator.userAgent.match("Firefox.*")[0].includes("114.0")) {
+                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);
@@ -180,4 +214,4 @@ class VerovioScoreEditor {
         return this.coreInstance;
     }
 }
-exports.default = VerovioScoreEditor;
+exports.default = VIBE;

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

@@ -109,10 +109,14 @@ class MeiTemplate {
     createStaff(n = 1, layerCount = 1) {
         var newElem = document.createElement("staff");
         newElem.setAttribute("n", n.toString());
-        newElem.appendChild(this.createLayer(1));
+        for (let i = 0; i < layerCount; i++) {
+            newElem.appendChild(this.createLayer(i + 1));
+        }
         return newElem;
     }
     createLayer(n = 1) {
+        if (typeof n === "string")
+            n = parseInt(n);
         var newElem = document.createElement("layer");
         newElem.setAttribute("n", n.toString());
         if (this.isEmpty) {

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

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const mappings_1 = require("../utils/mappings");
 //@ts-ignore
 //const $ = H5P.jQuery;
 class MeasureMatrix {
@@ -21,90 +20,8 @@ class MeasureMatrix {
             }
         }
     }
-    /**
-     * @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;
+        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;
@@ -141,9 +58,13 @@ class MeasureMatrix {
                 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) {
@@ -159,7 +80,7 @@ class MeasureMatrix {
                         staff.keysig = "0";
                     }
                     else {
-                        staff.keysig = ((_b = staffDef.querySelector("keySig")) === null || _b === void 0 ? void 0 : _b.getAttribute("sig")) || staffDef.getAttribute("keysig");
+                        staff.keysig = ((_f = staffDef.querySelector("keySig")) === null || _f === void 0 ? void 0 : _f.getAttribute("sig")) || staffDef.getAttribute("keysig");
                     }
                 }
                 if (meterSigs.length > 0) {

package/src/scripts/js/datastructures/ScoreGraph.js

@@ -125,7 +125,7 @@ class ScoreGraph {
             }
         }
         //Assign up/down nodes
-        if (this.midiTimes == undefined) {
+        if (this.midiTimes) {
             // miditimes contain svg Elements (not mei Elements!!!)
             // first: direct up/down references
             for (const [key, value] of this.midiTimes.entries()) {

package/src/scripts/js/entry.js

@@ -1,4 +1,5 @@
 import VerovioScoreEditor from "./VerovioScoreEditor.js"
 
-
-export default VerovioScoreEditor
+export default function createEditor(container, options, meiCallback){
+    return new VerovioScoreEditor(container, options, meiCallback)
+}