vibe-editor 0.0.0

package/src/scripts/js/Core.js

@@ -0,0 +1,887 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const VerovioWrapper_1 = require("./utils/VerovioWrapper");
+const random_1 = require("./utils/random");
+const constants_1 = require("./constants");
+const InsertModeHandler_1 = require("./handlers/InsertModeHandler");
+const DeleteHandler_1 = require("./handlers/DeleteHandler");
+const NoteDragHandler_1 = require("./handlers/NoteDragHandler");
+const Mouse2SVG_1 = require("./utils/Mouse2SVG");
+const GlobalKeyboardHandler_1 = require("./handlers/GlobalKeyboardHandler");
+const MusicProcessor_1 = require("./MusicProcessor");
+const meiConverter = require("./utils/MEIConverter");
+const meiOperation = require("./utils/MEIOperations");
+const mei_template_1 = require("./assets/mei_template");
+const SVGEditor_1 = require("./utils/SVGEditor");
+const ScoreGraph_1 = require("./datastructures/ScoreGraph");
+const WindowHandler_1 = require("./handlers/WindowHandler");
+const SidebarHandler_1 = require("./handlers/SidebarHandler");
+const LabelHandler_1 = require("./handlers/LabelHandler");
+const CustomToolbarHandler_1 = require("./handlers/CustomToolbarHandler");
+const cq = require("./utils/convenienceQueries");
+const coordinates = require("./utils/coordinates");
+const TooltipHandler_1 = require("./handlers/TooltipHandler");
+/**
+ * The core component the Editor. This manages the database,
+ * the verovio toolkit, the cache, and undo/redo stacks.
+ */
+class Core {
+    constructor(containerId) {
+        this.firstStart = true;
+        this.noteInputToggle = "on";
+        this.reloadDataFunction = (function reloadData() {
+            return this.loadData(this.currentMEI, false);
+        }).bind(this);
+        this.loadDataFunction = (function loadDataFunction(pageURI, data, isUrl) {
+            return this.loadData(data, isUrl, { changeOnPageNo: pageURI });
+        }).bind(this);
+        /**
+         * Provides AligFunction for Tabbar. alignFunction will be first set, when musicprocessor will instantiated
+         */
+        this.alignFunctionCall = (function alignFunction(file) {
+            var _a;
+            (_a = this.musicProcessor) === null || _a === void 0 ? void 0 : _a.align(file);
+        }).bind(this);
+        /**
+         * Delete array of notes from score
+         */
+        this.delete = (function d(notes) {
+            return new Promise((resolve) => {
+                this.getMEI("").then(mei => {
+                    meiOperation.removeFromMEI(notes, this.currentMEIDoc).then(updatedMEI => {
+                        if (updatedMEI != undefined) {
+                            this.loadData(updatedMEI, false).then(() => {
+                                resolve(true);
+                            });
+                        }
+                        else {
+                            resolve(true);
+                        }
+                    });
+                });
+            });
+        }).bind(this);
+        /**
+         *
+         */
+        this.insert = (function insert(newNote, replace = false) {
+            this.lastInsertedNoteId = newNote.id;
+            this.container.querySelectorAll(".marked").forEach(m => m.classList.remove("marked"));
+            return new Promise((resolve, reject) => {
+                this.getMEI("").then(mei => {
+                    var updatedMEI = meiOperation.addToMEI(newNote, this.currentMEIDoc, replace, this.scoreGraph);
+                    if ((updatedMEI === null || updatedMEI === void 0 ? void 0 : updatedMEI.documentElement.innerHTML.indexOf(newNote.id)) === -1) {
+                        reject();
+                    }
+                    if (updatedMEI != undefined) {
+                        this.loadData(updatedMEI, false).then(() => {
+                            resolve(true);
+                        });
+                    }
+                    else {
+                        reject();
+                    }
+                });
+            });
+        }).bind(this);
+        /**
+         * Undo the last action performed on a specific page.
+         * @param pageURI - The URI of the selected page.
+         * @returns If the action was undone.
+         */
+        this.undo = (function undo(pageURI = "") {
+            return new Promise((resolve) => {
+                if (this.container.classList.contains("annotMode")) {
+                    this.undoAnnotationStacks.pop();
+                    const annotstate = this.undoAnnotationStacks.pop();
+                    if (annotstate != undefined) {
+                        var annotCanvas = this.container.querySelector("#annotationCanvas");
+                        var annotList = this.container.querySelector("#annotList");
+                        this.redoAnnotationStacks.push([annotCanvas, annotList]);
+                        this.undoAnnotationStacks.push([annotCanvas, annotList]);
+                        annotCanvas.replaceWith(annotstate[0]);
+                        annotList.replaceWith(annotstate[1]);
+                        this.keyboardHandler.resetListeners();
+                        this.container.dispatchEvent(new Event("annotationCanvasChanged"));
+                    }
+                    resolve(true);
+                    return;
+                }
+                this.undoMEIStacks.pop(); // get rid of currentMEI, since last in line (=initial) MEI is not accessible through verovio
+                const meistate = this.undoMEIStacks.pop();
+                if (meistate != undefined) {
+                    this.redoMEIStacks.push(this.currentMEI);
+                    this.loadData(meistate, false).then(() => resolve(true));
+                }
+                else {
+                    resolve(false);
+                }
+            });
+        }).bind(this);
+        /**
+         * Redo the last action performed on a page.
+         * @param pageURI - The page URI.
+         * @returns If the action was redone.
+         */
+        this.redo = (function redo(pageURI = "") {
+            return new Promise((resolve) => {
+                if (this.container.classList.contains("annotMode")) {
+                    const annotstate = this.redoAnnotationStacks.pop();
+                    if (annotstate != undefined) {
+                        var annotCanvas = this.container.querySelector("#annotationCanvas");
+                        var annotList = this.container.querySelector("#annotList");
+                        this.undoAnnotationStacks.push([annotCanvas, annotList]);
+                        annotCanvas.replaceWith(annotstate[0]);
+                        annotList.replaceWith(annotstate[1]);
+                        this.keyboardHandler.resetListeners();
+                    }
+                    resolve(true);
+                    return;
+                }
+                const meistate = this.redoMEIStacks.pop();
+                if (meistate !== undefined) {
+                    this.undoMEIStacks.push(this.currentMEI);
+                    this.loadData(meistate, false).then(() => resolve(true));
+                }
+                else {
+                    resolve(false);
+                }
+            });
+        }).bind(this);
+        this.getElementAttr = (function getElementAttr(id) {
+            const message = {
+                action: "getElementAttr",
+                elementId: id
+            };
+            return this.verovioWrapper.setMessage(message).attributes;
+        }).bind(this);
+        this.resetLastInsertedNoteId = function () {
+            this.lastInsertedNoteId = undefined;
+        }.bind(this);
+        this.doHideUI = false;
+        this.hideOptions = {};
+        this.styleOptions = {};
+        this.attributeOptions = {};
+        this.containerId = containerId;
+        this.container = document.getElementById(containerId);
+        this.undoMEIStacks = Array();
+        this.redoMEIStacks = new Array();
+        this.undoAnnotationStacks = new Array();
+        //this.undoAnnotationStacks.push(new Array<Element>())
+        this.redoAnnotationStacks = new Array();
+        //this.redoAnnotationStacks.push(new Array<Element>())
+        this.windowHandler = new WindowHandler_1.default();
+        this.svgEditor = new SVGEditor_1.default();
+    }
+    /**
+     * Load data into the verovio toolkit and update the cache.
+    */
+    loadData(data, isUrl, options = null) {
+        this.verovioWrapper = this.verovioWrapper || new VerovioWrapper_1.default();
+        var waitingFlag = "waiting";
+        if (cq.getVrvSVG(this.containerId) !== null) {
+            document.body.classList.add(waitingFlag);
+        }
+        document.getElementById(this.containerId).dispatchEvent(new Event("loadingStart"));
+        var that = this;
+        this.svgEditor.setContainerId(this.containerId);
+        async function render(pageNo = 1, options = null) {
+            return new Promise((resolve, reject) => {
+                var message = {
+                    id: random_1.uuidv4(),
+                    action: 'renderToSVG',
+                    pageNo: pageNo
+                };
+                var response;
+                var svg;
+                response = that.verovioWrapper.setMessage(message);
+                svg = response.svg;
+                var svgDoc = new DOMParser().parseFromString(svg, "image/svg+xml");
+                var pageElement = svgDoc.querySelector("svg");
+                var pageId = "vrvPage" + pageNo.toString();
+                pageElement.setAttribute("id", "vrvPage" + pageNo.toString());
+                pageElement.classList.add("page");
+                try {
+                    // delete old svg
+                    if (cq.getVrvSVG(that.containerId).querySelector("#" + pageId) !== null) {
+                        that.svgEditor.cacheClasses().cacheScales();
+                        cq.getVrvSVG(that.containerId).querySelector("#" + pageId).innerHTML = ""; //.remove()
+                    }
+                    //insert new complete svg
+                    //document.querySelector("#" + that.containerId + " #vrvSVG").append(pageElement)
+                    cq.getVrvSVG(that.containerId).querySelector("#" + pageId).replaceWith(pageElement);
+                }
+                catch (error) {
+                    document.querySelector("#" + that.containerId + " #vrvSVG").append(pageElement);
+                }
+                that.svgEditor.distributeIds(pageElement.querySelector(".definition-scale"));
+                pageElement.setAttribute("preserveAspectRatio", "xMinYMin meet");
+                var systemHeigth = pageElement.querySelector(".system").getBoundingClientRect().height;
+                systemHeigth += systemHeigth * 0.2;
+                that.verovioWrapper.setHeightValue(systemHeigth);
+                resolve();
+            });
+        }
+        //END ASYNC FUNCTION RENDER
+        return new Promise((resolve, reject) => {
+            var _a, _b, _c, _d, _e;
+            var d;
+            var u;
+            var type = data === null || data === void 0 ? void 0 : data.constructor.name;
+            switch (type) {
+                case 'String':
+                    data = meiConverter.reformatMEI(data);
+                    d = data;
+                    u = isUrl;
+                    break;
+                case 'XMLDocument':
+                    data = meiOperation.disableFeatures(["grace", "arpeg"], data); // for Debugging
+                    that.svgEditor.copyClassesFromMei(data);
+                    d = new XMLSerializer().serializeToString(data);
+                    u = false;
+                    break;
+                case 'HTMLUnknownElement':
+                    d = new XMLSerializer().serializeToString(data);
+                    u = false;
+                    break;
+                case undefined:
+                    d = new mei_template_1.default().emptyMEI();
+                    u = false;
+                    break;
+                default:
+                    reject("Wrong Datatype: " + type);
+                    break;
+            }
+            //just render the data once to make pagecount accessible
+            var message = {
+                id: random_1.uuidv4(),
+                action: 'renderData',
+                mei: d,
+                isUrl: u
+            };
+            this.verovioWrapper.setMessage(message);
+            var pageGroup = document.createElement("g");
+            pageGroup.setAttribute("id", "vrvSVG");
+            if (cq.getVrvSVG(that.containerId) !== null) {
+                that.svgEditor.cacheClasses().cacheScales();
+                //cq.getVrvSVG(that.containerId).remove()
+            }
+            if (!cq.getVrvSVG(that.containerId))
+                document.querySelector("#" + that.containerId + "> #svgContainer").append(pageGroup);
+            var pageCount = this.verovioWrapper.getToolkit().getPageCount();
+            var renderPromises = new Array();
+            var staffId = (_c = (_b = (_a = this.m2s) === null || _a === void 0 ? void 0 : _a.getLastMouseEnter()) === null || _b === void 0 ? void 0 : _b.staff) === null || _c === void 0 ? void 0 : _c.getAttribute("refId");
+            var optionPage;
+            if ((options === null || options === void 0 ? void 0 : options.changeOnPageNo) != undefined) {
+                if (options.changeOnPageNo === "last") {
+                    optionPage = pageCount;
+                }
+                else {
+                    optionPage = parseInt(options.changeOnPageNo);
+                }
+            }
+            //remove all pages, that do not exist anymore
+            cq.getVrvSVG(this.containerId).querySelectorAll(":scope > svg").forEach(svg => {
+                if (parseInt(svg.id.match(/\d+/)[0]) > pageCount) {
+                    svg.remove();
+                }
+            });
+            var changeOnPage = optionPage || parseInt((_e = (_d = cq.getVrvSVG(this.containerId).querySelector("#" + staffId)) === null || _d === void 0 ? void 0 : _d.closest(".page")) === null || _e === void 0 ? void 0 : _e.id.split("").reverse()[0]);
+            Array.from({ length: pageCount }, (_, index) => index + 1).forEach(pageNo => {
+                if (!isNaN(changeOnPage)) {
+                    if (pageNo < changeOnPage)
+                        return;
+                }
+                renderPromises.push(setTimeout(function () { render(pageNo, options); }, 1));
+            });
+            Promise.all(renderPromises).then(() => {
+                document.body.classList.remove(waitingFlag);
+                var that = this;
+                setTimeout(function () {
+                    var _a, _b;
+                    that.svgEditor.drawLinesUnderSystems();
+                    that.svgEditor.modifyHarm();
+                    that.createSVGOverlay(true);
+                    that.svgEditor.setXY((_a = that.windowHandler) === null || _a === void 0 ? void 0 : _a.getX(), (_b = that.windowHandler) === null || _b === void 0 ? void 0 : _b.getY());
+                    that.getMEI("").then(mei => {
+                        var _a;
+                        that.currentMEI = mei;
+                        that.currentMEIDoc = that.getCurrentMEI(true);
+                        that.svgEditor.markOverfilledMeasures(that.currentMEIDoc);
+                        //console.log(that.currentMEIDoc)
+                        that.svgEditor
+                            .setContainerId(that.containerId)
+                            .loadClasses()
+                            .fillSVG(that.currentMEIDoc);
+                        that.undoMEIStacks.push(mei);
+                        var lastAddedClass = "lastAdded";
+                        document.querySelectorAll("." + lastAddedClass).forEach(m => {
+                            m.classList.remove(lastAddedClass);
+                        });
+                        if (that.lastInsertedNoteId != undefined && ["textmode", "clickmode"].some(mode => that.container.classList.contains(mode))) {
+                            (_a = that.container.querySelector("#" + that.lastInsertedNoteId)) === null || _a === void 0 ? void 0 : _a.classList.add(lastAddedClass);
+                        }
+                        if (that.meiChangedCallback != undefined) {
+                            that.meiChangedCallback(that.currentMEI);
+                        }
+                    });
+                    //musicProcessor stuff
+                    that.getMidi().then(midi => {
+                        that.musicProcessor = that.musicProcessor || new MusicProcessor_1.default(that.containerId);
+                        that.musicProcessor
+                            .setMEI(that.currentMEIDoc)
+                            .setMidi(midi)
+                            .addCanvas();
+                        that.getMidiTimesForSymbols().then(md => {
+                            var _a;
+                            that.musicProcessor.setMidiTimes(md);
+                            that.musicProcessor.update();
+                            that.scoreGraph = new ScoreGraph_1.default(that.currentMEIDoc, that.containerId, md);
+                            //the first condition should only occur at first starting the score editor
+                            if (that.container.querySelector(".lastAdded") === null && that.scoreGraph.getCurrentNode() == undefined) {
+                                that.scoreGraph.setCurrentNodeById(that.container.querySelector(".staff > .layer :is(.note, .rest, .mRest").id);
+                            }
+                            else { //second condition always sets lastAdded Note
+                                that.scoreGraph.setCurrentNodeById((_a = that.container.querySelector(".lastAdded")) === null || _a === void 0 ? void 0 : _a.id);
+                            }
+                            that.initializeHandlers();
+                            that.musicProcessor.setScoreGraph(that.scoreGraph);
+                            document.getElementById(that.containerId).dispatchEvent(new Event("loadingEnd"));
+                            that.svg = new XMLSerializer().serializeToString(that.container.querySelector("#svgContainer"));
+                            console.log(that.currentMEIDoc, that.m2s.getMeasureMatrix());
+                            resolve(that.currentMEI);
+                        });
+                    });
+                }, 1);
+            });
+        });
+    }
+    /**
+     * Initialize Handlers
+     */
+    initializeHandlers() {
+        //must be first!!!
+        if (this.m2s == undefined) {
+            this.m2s = new Mouse2SVG_1.Mouse2SVG();
+        }
+        else {
+            //this.m2s.update()
+        }
+        this.m2s
+            .setContainerId(this.containerId)
+            .setUpdateOverlayCallback(this.createSVGOverlay)
+            .setCurrentMEI(this.currentMEIDoc)
+            .update();
+        //.setMouseEnterElementListeners()
+        this.insertModeHandler = this.insertModeHandler || new InsertModeHandler_1.default(this.containerId);
+        this.deleteHandler = this.deleteHandler || new DeleteHandler_1.default(this.containerId);
+        this.noteDragHandler = new NoteDragHandler_1.default(this.containerId);
+        this.globalKeyboardHandler = this.globalKeyboardHandler || new GlobalKeyboardHandler_1.default(this.containerId);
+        this.sidebarHandler = this.sidebarHandler || new SidebarHandler_1.default();
+        this.labelHandler = this.labelHandler || new LabelHandler_1.default(this.containerId);
+        this.modHandler = this.modHandler || new CustomToolbarHandler_1.default(this.containerId);
+        this.tooltipHandler = this.tooltipHandler || new TooltipHandler_1.default();
+        this.dispatchFunctions();
+    }
+    /**
+     * distribute Callback functions for each element which uses some information from of the Core (Handlers, musicProcessor, Callbacks, etc)
+     */
+    dispatchFunctions() {
+        this.labelHandler
+            .setContainerId(this.containerId)
+            .setCurrentMEI(this.currentMEIDoc)
+            .reset();
+        this.insertModeHandler
+            .setContainerId(this.containerId)
+            .setScoreGraph(this.scoreGraph)
+            .setm2s(this.m2s)
+            .setMusicProcessor(this.musicProcessor)
+            .setDeleteHandler(this.deleteHandler)
+            .setLabelHandler(this.labelHandler)
+            .activateHarmonyMode()
+            .activateSelectionMode()
+            .setInsertCallback(this.insert)
+            .setDeleteCallback(this.delete)
+            .setLoadDataCallback(this.loadDataFunction)
+            .setUndoAnnotationStacks(this.undoAnnotationStacks)
+            .resetModes()
+            .resetCanvas();
+        this.noteInputSwitch(this.noteInputToggle);
+        this.deleteHandler
+            .setContainerId(this.containerId)
+            .setDeleteCallback(this.delete)
+            .update();
+        this.noteDragHandler
+            .setContainerId(this.containerId)
+            .setCurrentMEI(this.currentMEIDoc)
+            .setInsertCallback(this.insert)
+            .setMusicProcessor(this.musicProcessor)
+            .setm2s(this.m2s)
+            .resetListeners();
+        this.globalKeyboardHandler
+            .setContainerId(this.containerId)
+            .setUndoCallback(this.undo)
+            .setRedoCallback(this.redo)
+            .setCurrentMei(this.currentMEIDoc)
+            .setMusicProcessor(this.musicProcessor)
+            .setHarmonyHandlerCallback(this.labelHandler.setHarmonyLabelHandlerKey)
+            .setLoadDataCallback(this.loadDataFunction)
+            .setScoreGraph(this.scoreGraph)
+            .resetLastInsertedNoteCallback(this.resetLastInsertedNoteId)
+            .resetListeners();
+        this.sidebarHandler
+            .setContainerId(this.containerId)
+            .setCurrentMei(this.currentMEIDoc)
+            .setm2s(this.m2s)
+            .setLoadDataCallback(this.loadDataFunction)
+            .loadMeter()
+            .makeScoreElementsClickable()
+            .resetListeners();
+        this.modHandler
+            .setContainerId(this.containerId)
+            .resetListeners()
+            .setCurrentMEI(this.currentMEIDoc)
+            .setLoadDataCallback(this.loadDataFunction);
+        this.windowHandler
+            .setContainerId(this.containerId)
+            .setm2s(this.m2s)
+            .setCurrentMEI(this.currentMEIDoc)
+            .setLoadDataCallback(this.loadDataFunction)
+            .setSVGReloadCallback(this.reloadDataFunction)
+            .setAnnotations(this.insertModeHandler.getAnnotations())
+            .setInsertModeHandler(this.insertModeHandler)
+            .resetListeners();
+        this.tooltipHandler
+            .setContainerId(this.containerId)
+            .removeListeners()
+            .setListeners();
+        // always start from click mode
+        if (this.firstStart) {
+            this.container.querySelector("#notationTabBtn").click();
+            this.firstStart = false;
+        }
+        if (this.doHideUI) {
+            this.hideUI(this.hideOptions);
+        }
+        else {
+            this.viewUI(this.hideOptions);
+        }
+        if (Object.entries(this.styleOptions).length > 0) {
+            this.setStyles(this.styleOptions);
+        }
+        if (Object.entries(this.attributeOptions).length > 0) {
+            this.setAttributes(this.attributeOptions);
+        }
+    }
+    ////// VEROVIO REQUESTS /////////////////
+    /**
+     * Get the MEI for a specific page.
+     * @param pageURI - The URI of the selected page.
+     */
+    getMEI(pageURI) {
+        return new Promise((resolve, reject) => {
+            const message = {
+                action: "getMEI",
+                id: random_1.uuidv4()
+            };
+            var response;
+            response = this.verovioWrapper.setMessage(message);
+            if (response.mei) {
+                this.currentMEI = response.mei;
+            }
+            else {
+                //console.log(meiConverter.meiToDoc(response.mei))
+            }
+            resolve(response.mei);
+        });
+    }
+    getMidi() {
+        return new Promise((resolve, reject) => {
+            const message = {
+                action: "renderToMidi",
+                id: random_1.uuidv4()
+            };
+            var response = this.verovioWrapper.setMessage(message);
+            if (response.midi) {
+                this.currentMidi = response.mei;
+                resolve(response.midi);
+            }
+            else {
+                reject("fail!");
+            }
+        });
+    }
+    /**
+     * Get all times (tick position) for each event visible in the score (notes, rests, etc.)
+     * @returns
+     */
+    getMidiTimesForSymbols() {
+        return new Promise((resolve) => {
+            var noteTimes = new Map();
+            var that = this;
+            var container = cq.getVrvSVG(this.containerId);
+            var midi = that.verovioWrapper.getMidiJSON();
+            var tracks = midi.tracks;
+            tracks.forEach((t, tIdx) => {
+                var svgNotes = container.querySelectorAll(".staff[n=\"" + (tIdx + 1).toString() + "\"] .note");
+                var prevNote;
+                t.notes.forEach((n, nIdx) => {
+                    if (!noteTimes.has(n.ticks)) {
+                        noteTimes.set(n.ticks, new Array());
+                    }
+                    var arr = noteTimes.get(n.ticks);
+                    var currNote = svgNotes[nIdx];
+                    //indicaton, that some rests are in between
+                    //trailing rests are intentionally left out, since there is nothing to play anyway
+                    if ((prevNote === null || prevNote === void 0 ? void 0 : prevNote.midi.ticks) + (prevNote === null || prevNote === void 0 ? void 0 : prevNote.midi.durationTicks) != n.ticks) {
+                        var elements = container.querySelectorAll(".staff[n=\"" + (tIdx + 1).toString() + "\"] .note, .staff[n=\"" + (tIdx + 1).toString() + "\"] .rest");
+                        var elementIds = Array.from(elements).map(e => e.id);
+                        var sliceLeft = prevNote == undefined && n.ticks > 0 ? 0 : undefined;
+                        sliceLeft = prevNote != undefined ? elementIds.findIndex(eid => eid === prevNote.svg.id) + 1 : 0;
+                        var sliceRight = elementIds.findIndex(eid => eid === currNote.id) - 1;
+                        var slicedElementIds = elementIds.slice(sliceLeft, sliceRight);
+                        var currentTickPos = (prevNote === null || prevNote === void 0 ? void 0 : prevNote.midi.ticks) + (prevNote === null || prevNote === void 0 ? void 0 : prevNote.midi.durationTicks) || 0;
+                        slicedElementIds.forEach(id => {
+                            var ratio = meiOperation.getAbsoluteRatio(this.currentMEIDoc.getElementById(id));
+                            var tickDur = 4 * ratio * midi.header.ppq;
+                            if (!noteTimes.has(currentTickPos)) {
+                                noteTimes.set(currentTickPos, new Array());
+                            }
+                            var restArr = noteTimes.get(currentTickPos);
+                            restArr.push(container.querySelector("#" + id));
+                            currentTickPos += tickDur;
+                        });
+                    }
+                    arr.push(currNote);
+                    prevNote = {
+                        midi: n,
+                        svg: svgNotes[nIdx]
+                    };
+                });
+            });
+            resolve(noteTimes);
+        });
+    }
+    /**
+     * Create an overlay of all interative elements over the the score svg.
+     */
+    createSVGOverlay(loadBBoxes = true) {
+        return new Promise((resolve) => {
+            var _a;
+            document.getElementById(this.containerId).focus();
+            var refSVG = document.getElementById(this.containerId).querySelector("#vrvSVG");
+            this.interactionOverlay = document.getElementById(this.containerId).querySelector("#interactionOverlay");
+            if (this.interactionOverlay === null) {
+                var overlay = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+                overlay.setAttribute("id", "interactionOverlay");
+                this.interactionOverlay = overlay;
+            }
+            var svgContainer = document.getElementById(this.containerId).querySelector("#svgContainer");
+            var vrvContainer = cq.getVrvSVG(this.containerId);
+            var root = svgContainer.getBoundingClientRect().height > vrvContainer.getBoundingClientRect().height ? svgContainer : vrvContainer;
+            var rootBBox = root.getBoundingClientRect();
+            var rootWidth = (rootBBox.width).toString();
+            var rootHeigth = (rootBBox.height).toString();
+            //if (this.interactionOverlay.getAttribute("viewBox") === null) {
+            this.interactionOverlay.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "));
+            //}
+            (_a = document.getElementById(this.containerId).querySelector("#interactionOverlay #scoreRects")) === null || _a === void 0 ? void 0 : _a.remove();
+            var scoreRects = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+            scoreRects.setAttribute("id", "scoreRects");
+            scoreRects.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "));
+            Array.from(refSVG.attributes).forEach(a => {
+                if (!["id", "width", "height"].includes(a.name)) {
+                    this.interactionOverlay.setAttribute(a.name, a.value);
+                }
+            });
+            this.interactionOverlay.appendChild(scoreRects);
+            refSVG.insertAdjacentElement("beforebegin", this.interactionOverlay);
+            if (loadBBoxes) {
+                var svgBoxes = Array.from(document.getElementById(this.containerId)
+                    .querySelectorAll(".definition-scale :is(g,path)")) //".definition-scale path, .definition-scale .bounding-box"))
+                    .filter(el => {
+                    var condition = !["system", "measure", "layer", "ledgerLines", "flag"].some(cn => el.classList.contains(cn));
+                    return condition;
+                });
+                var reorderedBoxes = new Array(); // reorder so that dependent elements are already in array
+                svgBoxes.forEach(sb => {
+                    if (sb.querySelector(":scope > use, :scope > rect, :scope > path") === null) {
+                        reorderedBoxes.push(sb);
+                    }
+                    else {
+                        reorderedBoxes.unshift(sb);
+                    }
+                });
+                // staff always has to be on top of sibling elements, so that one can interact with score elements
+                reorderedBoxes = reorderedBoxes.reverse();
+                async function computeCoords(box, interactionOverlay) {
+                    return new Promise((resolve) => {
+                        var g = document.createElementNS(constants_1.constants._SVGNS_, "g");
+                        var refId = box.id !== "" ? box.id : box.getAttribute("refId");
+                        if (refId !== "" && refId !== null) {
+                            g.setAttribute("refId", refId);
+                        }
+                        box.classList.forEach(c => g.classList.add(c));
+                        var bbox = box.getBoundingClientRect();
+                        var cc = coordinates.getDOMMatrixCoordinates(bbox, interactionOverlay);
+                        var rect = document.createElementNS(constants_1.constants._SVGNS_, "rect");
+                        rect.setAttribute("x", cc.left.toString());
+                        rect.setAttribute("y", cc.top.toString());
+                        var w;
+                        if (cc.width === 0)
+                            w = 2;
+                        rect.setAttribute("width", (w === null || w === void 0 ? void 0 : w.toString()) || cc.width.toString());
+                        var h;
+                        if (cc.height === 0)
+                            h = 2;
+                        rect.setAttribute("height", (h === null || h === void 0 ? void 0 : h.toString()) || cc.height.toString());
+                        g.appendChild(rect);
+                        scoreRects.append(g);
+                        resolve(true);
+                    });
+                }
+                var coordPromises = new Array();
+                reorderedBoxes.forEach(sr => {
+                    if (!["g", "path"].includes(sr.tagName.toLowerCase())) {
+                        return;
+                    }
+                    else if (Array.from(sr.classList).some(srcl => srcl.includes("page") || srcl.includes("system"))) {
+                        return;
+                    }
+                    else {
+                        coordPromises.push(computeCoords(sr, this.interactionOverlay));
+                    }
+                });
+                setTimeout(function () { Promise.all(coordPromises); }, 1);
+            }
+            resolve(true);
+        });
+    }
+    replaceWithRect(el) {
+        if (!["g", "path", "svg"].includes(el.tagName.toLowerCase())) {
+            el.remove();
+            return;
+        }
+        if (el.childElementCount > 0) {
+            Array.from(el.children).forEach(ec => {
+                this.replaceWithRect(ec);
+            });
+        }
+        if ("svg" !== el.tagName.toLowerCase()) {
+            var childCopy = new Array();
+            Array.from(el.children).forEach(ec => childCopy.push(ec.cloneNode(true)));
+            var bbox = el.getBoundingClientRect();
+            var rect = document.createElementNS(constants_1.constants._SVGNS_, "rect");
+            rect.setAttribute("refId", el.id);
+            el.classList.forEach(c => rect.classList.add(c));
+            var cc = coordinates.getDOMMatrixCoordinates(bbox, this.interactionOverlay);
+            rect.setAttribute("x", cc.left.toString());
+            rect.setAttribute("y", cc.top.toString());
+            var w;
+            if (cc.width === 0)
+                w = 2;
+            rect.setAttribute("width", (w === null || w === void 0 ? void 0 : w.toString()) || cc.width.toString());
+            var h;
+            if (cc.height === 0)
+                h = 2;
+            rect.setAttribute("height", (h === null || h === void 0 ? void 0 : h.toString()) || cc.height.toString());
+            childCopy.forEach(cc => rect.appendChild(childCopy.shift()));
+            el.insertAdjacentElement("beforebegin", rect);
+            el.remove();
+        }
+    }
+    /**
+     * hide ui elements, so that no interaction is possible
+     * should be best called after promise of loadData
+     * @param options
+     */
+    hideUI(options = {}) {
+        var _a, _b, _c;
+        if (Object.entries(options).length === 0) {
+            options = { annotationCanvas: true, labelCanvas: true, canvasMusicPlayer: true, scoreRects: true, manipulatorCanvas: true, sidebarContainer: true, btnToolbar: true, customToolbar: true, groups: true };
+        }
+        for (const [key, value] of Object.entries(options)) {
+            if (value) {
+                if (key === "groups") {
+                    ((_a = document.getElementById(this.containerId)) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[role=\"group\"]")).forEach(g => g.classList.add("hideUI")); // style.setProperty("display", "none", "important"))
+                }
+                else {
+                    (_c = (_b = document.getElementById(this.containerId)) === null || _b === void 0 ? void 0 : _b.querySelector("#" + key)) === null || _c === void 0 ? void 0 : _c.classList.add("hideUI"); //style.setProperty("display", "none", "important")
+                }
+            }
+        }
+    }
+    /**
+     * View Ui elements if they where hidden earlier
+     * @param options
+     */
+    viewUI(options = {}) {
+        var _a, _b, _c;
+        if (Object.entries(options).length === 0) {
+            options = { annotationCanvas: true, labelCanvas: true, canvasMusicPlayer: true, scoreRects: true, manipulatorCanvas: true, sidebarContainer: true, btnToolbar: true, customToolbar: true, groups: true };
+        }
+        for (const [key, value] of Object.entries(options)) {
+            if (value) {
+                if (key === "groups") {
+                    ((_a = document.getElementById(this.containerId)) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[role=\"group\"]")).forEach(g => g.classList.remove("hideUI")); // style.setProperty("display", "none", "important"))
+                }
+                else {
+                    (_c = (_b = document.getElementById(this.containerId)) === null || _b === void 0 ? void 0 : _b.querySelector("#" + key)) === null || _c === void 0 ? void 0 : _c.classList.remove("hideUI"); //style.setProperty("display", "none", "important")
+                }
+            }
+        }
+    }
+    /**
+     * Note Input will be disabled. All other interactions stay active.
+     */
+    noteInputSwitch(toggle) {
+        var _a, _b, _c, _d;
+        this.noteInputToggle = toggle;
+        if (toggle === "off") {
+            (_a = this.insertModeHandler) === null || _a === void 0 ? void 0 : _a.disableNoteInput();
+            (_b = this.noteDragHandler) === null || _b === void 0 ? void 0 : _b.removeListeners();
+        }
+        else if (toggle === "on") {
+            (_c = this.insertModeHandler) === null || _c === void 0 ? void 0 : _c.enableNoteInput();
+            (_d = this.noteDragHandler) === null || _d === void 0 ? void 0 : _d.setListeners();
+        }
+        else {
+            console.log(arguments.callee.name, toggle + " has no effect!");
+        }
+    }
+    ////////// GETTER/ SETTER
+    /**
+     *
+     * @returns current Mouse2SVG Instance
+     */
+    getMouse2SVG() {
+        return this.m2s;
+    }
+    getDeleteHandler() {
+        return this.deleteHandler;
+    }
+    getInsertModeHandler() {
+        return this.insertModeHandler;
+    }
+    getCurrentMEI(asDocument = true) {
+        if (asDocument) {
+            var meiDoc = meiConverter.meiToDoc(this.currentMEI);
+            meiDoc = meiConverter.standardizeAccid(meiDoc);
+            return meiDoc;
+        }
+        return this.currentMEI;
+    }
+    /**
+     * Get SVG of the current container.
+     * @param {boolean} [plain=true] - delete classes which would result in coloration of the score
+     * @returns {string} - serialized svg
+     */
+    getSVG(plain = true) {
+        var svgDom = this.container.querySelector("#svgContainer");
+        if (plain) {
+            svgDom.querySelectorAll(".lastAdded, .marked").forEach(sd => {
+                sd.classList.remove("lastAdded");
+                sd.classList.remove("marked");
+            });
+        }
+        return new XMLSerializer().serializeToString(svgDom);
+    }
+    getNoteDragHandler() {
+        return this.noteDragHandler;
+    }
+    getGlobalKeyboardHandler() {
+        return this.globalKeyboardHandler;
+    }
+    getSidebarHandler() {
+        return this.sidebarHandler;
+    }
+    getLabelHandler() {
+        return this.labelHandler;
+    }
+    getModifierHandler() {
+        return this.modHandler;
+    }
+    getWindowHandler() {
+        return this.windowHandler;
+    }
+    getCurrentMidi() {
+        return this.currentMidi;
+    }
+    getMusicProcessor() {
+        return this.musicProcessor;
+    }
+    getScoreGraph() {
+        return this.scoreGraph;
+    }
+    getContainer() {
+        return this.container;
+    }
+    /**
+     * Access Verovio from outside of score editor.
+     * Use getToolkit method to access any method which is not wrapped
+     * @returns VerovioWrapper instance
+     */
+    getVerovioWrapper() {
+        return this.verovioWrapper;
+    }
+    setMEIChangedCallback(meiChangedCallback) {
+        this.meiChangedCallback = meiChangedCallback;
+    }
+    setHideUI(hide) {
+        this.doHideUI = hide;
+    }
+    setHideOptions(options) {
+        this.hideOptions = options;
+    }
+    /**
+     * Set Attibutes for any element in the result svg as {selector: {attributeName: [values as string]}}.
+     * By default will be concatenated with spaces as value string for this attribute
+     * @param options
+     * @param separator optional separator, default: " "
+     */
+    setAttributes(options, separator = " ") {
+        var svg = cq.getVrvSVG(this.containerId);
+        for (const [elKey, elValue] of Object.entries(options)) {
+            var element = svg.querySelector(elKey);
+            if (element !== null) {
+                for (const [attrKey, attrValue] of Object.entries(elValue)) {
+                    element.setAttribute(attrKey, attrValue.join(separator));
+                }
+            }
+        }
+    }
+    setAttributeOptions(options) {
+        this.attributeOptions = options;
+        return this;
+    }
+    /**
+     * Set Styles for any element in the result svg as {selector: {attributeName: [values as string]}}.
+     * By default will be concatenated with spaces as value string for this attribute
+     * @param options
+     * @param separator optional separator, default: " "
+     */
+    setStyles(options, separator = " ") {
+        var svg = cq.getVrvSVG(this.containerId);
+        for (const [elKey, elValue] of Object.entries(options)) {
+            var element = svg.querySelector(elKey);
+            if (element !== null) {
+                for (const [styleKey, styleValue] of Object.entries(elValue)) {
+                    var importantIdx = styleValue.indexOf("important");
+                    if (importantIdx === -1) {
+                        element.style.setProperty(styleKey, styleValue.join(separator));
+                    }
+                    else {
+                        var important = styleValue.splice(importantIdx, 1)[0];
+                        element.style.setProperty(styleKey, styleValue.join(separator), important);
+                    }
+                }
+            }
+        }
+    }
+    setStyleOptions(options) {
+        this.styleOptions = options;
+        return this;
+    }
+}
+exports.default = Core;