vibe-editor 0.0.4 → 0.0.6

package/src/scripts/js/scripts/Core.js

@@ -0,0 +1,932 @@
+"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. Manages the rendering with
+ * the verovio toolkit, sets bounding boxes and initializes all the interaction handlers.
+ * After each new load of the score, all handlers are reset and changed parametes (such as annotations or Mouse2SVG-Instance) are dispatched.
+ */
+class Core {
+    constructor(containerId) {
+        this.firstStart = true;
+        this.noteInputToggle = "on";
+        this.reloadDataHandler = (function reloadDataHandler() {
+            return this.reloadData();
+        }).bind(this);
+        this.loadDataHandler = (function loadDataHandler(pageURI, data, isUrl, options = null) {
+            return this.loadData(data, isUrl, Object.assign({ changeOnPageNo: pageURI }, options));
+        }).bind(this);
+        /**
+         * Provides AligFunction for Tabbar. alignFunction will be first set, when musicprocessor will instantiated
+         */
+        this.alignFunctionHandler = (function alignFunctionHandler(file) {
+            var _a, _b;
+            (_a = this.musicProcessor) === null || _a === void 0 ? void 0 : _a.resetListeners();
+            (_b = this.musicProcessor) === null || _b === void 0 ? void 0 : _b.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);
+        this.svgEditor.cacheClasses().cacheScales().cacheStyles();
+        //this function renders the pages via the veroviowrapper
+        async function render(pageNo = 1, options = null) {
+            return new Promise((resolve, reject) => {
+                var _a;
+                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) {
+                    (_a = document.querySelector("#" + that.containerId + " #vrvSVG")) === null || _a === void 0 ? void 0 : _a.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)
+                // if(!options){
+                //   options = {}
+                // }
+                // options.widthFactor = (that.container as HTMLElement).clientWidth / screen.availWidth
+                // if (options?.widthFactor) {
+                //   console.log("pageW before", that.verovioWrapper.getOptions().pageWidth)
+                //   that.verovioWrapper.setWidthValue(
+                //     parseFloat(that.verovioWrapper.getOptions().pageWidth) * options.widthFactor
+                //   )
+                //   console.log("pageW after", that.verovioWrapper.getOptions().pageWidth)
+                // }
+                resolve();
+            });
+        }
+        //END ASYNC FUNCTION RENDER
+        return new Promise((resolve, reject) => {
+            var _a, _b, _c, _d, _e;
+            this.sendDataToVerovio(data, isUrl);
+            var pageGroup = document.createElement("g");
+            pageGroup.setAttribute("id", "vrvSVG");
+            if (cq.getVrvSVG(that.containerId) !== null) {
+                that.svgEditor.cacheClasses().cacheScales();
+            }
+            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));
+            });
+            //Each page will be redered seperatly
+            Promise.all(renderPromises).then(() => {
+                document.body.classList.remove(waitingFlag);
+                resolve(that.initAfterRender());
+            });
+        });
+    }
+    sendDataToVerovio(data, isUrl) {
+        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
+                this.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:
+                console.log("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);
+    }
+    /**
+     * Init attributes for the svg, creat svg overlay and distribute/ init handlers.
+     * @returns
+     */
+    initAfterRender() {
+        var that = this;
+        return new Promise((resolve, reject) => {
+            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.currentMEIDoc.querySelectorAll("[dur='breve']").forEach(d => d.setAttribute("dur", "0.5"));
+                    if (that.currentMEIDoc.querySelector("parsererror")) {
+                        try {
+                            throw new Error("ParsingError");
+                        }
+                        catch (error) {
+                            console.error("There is a parsingerror in the meiDoc: ", error, that.currentMEIDoc, that.currentMEI);
+                        }
+                    }
+                    that.svgEditor.markOverfilledMeasures(that.currentMEIDoc);
+                    that.svgEditor
+                        .setContainerId(that.containerId)
+                        .loadClasses()
+                        .loadStyles()
+                        .fillSVG(that.currentMEIDoc)
+                        .setActiveLayer()
+                        .hideRedundantRests(that.currentMEIDoc);
+                    that.undoMEIStacks.push(mei);
+                    var lastAddedClass = "lastAdded";
+                    // that.container.querySelectorAll("." + lastAddedClass).forEach(m => {
+                    //   m.classList.replace("lastAdded", "marked") //remove(lastAddedClass)
+                    // })
+                    if (that.lastInsertedNoteId && ["textmode", "clickmode"].some(mode => that.container.classList.contains(mode))) {
+                        //that.container.querySelector("#" + that.lastInsertedNoteId)?.classList.add(lastAddedClass)
+                        (_a = that.container.querySelector("#" + that.lastInsertedNoteId)) === null || _a === void 0 ? void 0 : _a.classList.add("marked");
+                    }
+                    if (that.meiChangedCallback) {
+                        that.meiChangedCallback(that.currentMEI);
+                    }
+                });
+                //Initialize music processor
+                that.getTimemap().then(timemap => {
+                    var _a;
+                    that.musicProcessor = that.musicProcessor || new MusicProcessor_1.default(that.containerId);
+                    that.musicProcessor
+                        .setMEI(that.currentMEIDoc)
+                        .setMidi(that.verovioWrapper.renderToMidi())
+                        .setTimemap(timemap)
+                        .addCanvas()
+                        .update();
+                    that.scoreGraph = new ScoreGraph_1.default(that.currentMEIDoc, that.containerId, null);
+                    //the first condition should only occur at first starting the score editor
+                    if (!that.container.querySelector(".lastAdded, .marked")) { //that.scoreGraph.getCurrentNode() == undefined) {
+                        that.scoreGraph.setCurrentNodeById(that.container.querySelector("#vrvSVG .staff > .layer.activeLayer :is(.note, .rest, .mRest").id);
+                    }
+                    else { //second condition always sets lastAdded Note
+                        that.scoreGraph.setCurrentNodeById((_a = that.container.querySelector("#vrvSVG :is(.lastAdded, .marked)")) === 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"));
+                    that.svgEditor.loadClasses();
+                    console.log(that.currentMEIDoc, that.m2s.getMeasureMatrix());
+                    resolve(that.currentMEI);
+                    //})
+                });
+            }, 1);
+        });
+    }
+    /**
+     * Load everything if there is already a svg present. Displaying the visuals is not necessary here.
+     * But the MEI has to be loaded with verovio anyway to ensure that options and subsequent loads will have access to the underlying MEI.
+     * Only supposed to be used from Main class for first initialisation.
+     * @param container container with already rendered svg (usually a container with "vibe-container" class)
+     * @param data MEI to be loaded in verovio
+     * @returns
+     */
+    loadWithExistingSVG(container, data, isUrl) {
+        return new Promise(resolve => {
+            this.container = container;
+            this.containerId = container.id;
+            this.verovioWrapper = this.verovioWrapper || new VerovioWrapper_1.default();
+            var waitingFlag = "waiting";
+            // svg has to be loaded into verovio anyway 
+            this.sendDataToVerovio(data, isUrl);
+            this.interactionOverlay = cq.getInteractOverlay(this.containerId);
+            // get most right standing canvas in interactionOverlay
+            let rightMostElement = this.interactionOverlay;
+            let rightCoord = 0;
+            this.container.querySelectorAll("#interactionOverlay > *, #vrvSVG > svg > *").forEach(c => {
+                let bbox = c.getBoundingClientRect();
+                if (bbox.x + bbox.width > rightCoord) {
+                    rightCoord = bbox.x + bbox.width;
+                    rightMostElement = c;
+                }
+            });
+            var sizeRatio = ((this.container.getBoundingClientRect().width / this.interactionOverlay.getBoundingClientRect().width) + 2) * 100; //rightMostElement.getBoundingClientRect().width * 60 
+            if (!sizeRatio || sizeRatio <= 0) {
+                sizeRatio = 100;
+            }
+            this.container.querySelector("#svgContainer").style.width = sizeRatio.toString() + "%";
+            document.getElementById(this.containerId).dispatchEvent(new Event("loadingStart"));
+            this.svgEditor.setContainerId(this.containerId);
+            this.svgEditor.cacheClasses().cacheScales().cacheStyles();
+            this.initializeHandlers(true, false);
+            resolve(this.initAfterRender());
+        });
+    }
+    reloadData() {
+        return this.loadData(this.currentMEI, false);
+    }
+    /**
+     * Initialize Handlers
+     */
+    initializeHandlers(initNew = false, dispatch = true) {
+        //m2s must be first since all coordinates and interacions are based on positions computed in Mouse2SVG
+        this.m2s = initNew ? new Mouse2SVG_1.Mouse2SVG() : this.m2s || new Mouse2SVG_1.Mouse2SVG();
+        if (!initNew && dispatch) {
+            this.m2s
+                .setContainerId(this.containerId)
+                .setUpdateOverlayCallback(this.createSVGOverlay)
+                .setCurrentMEI(this.currentMEIDoc)
+                .update();
+        }
+        this.insertModeHandler = initNew ? new InsertModeHandler_1.default(this.containerId) : this.insertModeHandler || new InsertModeHandler_1.default(this.containerId);
+        this.deleteHandler = initNew ? new DeleteHandler_1.default(this.containerId) : this.deleteHandler || new DeleteHandler_1.default(this.containerId);
+        this.noteDragHandler = new NoteDragHandler_1.default(this.containerId);
+        this.globalKeyboardHandler = initNew ? new GlobalKeyboardHandler_1.default(this.containerId) : this.globalKeyboardHandler || new GlobalKeyboardHandler_1.default(this.containerId);
+        this.sidebarHandler = initNew ? new SidebarHandler_1.default : this.sidebarHandler || new SidebarHandler_1.default();
+        this.labelHandler = initNew ? new LabelHandler_1.default(this.containerId) : this.labelHandler || new LabelHandler_1.default(this.containerId);
+        this.modHandler = initNew ? new CustomToolbarHandler_1.default(this.containerId) : this.modHandler || new CustomToolbarHandler_1.default(this.containerId);
+        this.tooltipHandler = initNew ? new TooltipHandler_1.default() : this.tooltipHandler || new TooltipHandler_1.default();
+        this.musicProcessor = initNew ? new MusicProcessor_1.default(this.containerId) : this.musicProcessor || new MusicProcessor_1.default(this.containerId);
+        if (dispatch) {
+            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.loadDataHandler)
+            .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.loadDataHandler)
+            .setScoreGraph(this.scoreGraph)
+            .resetLastInsertedNoteCallback(this.resetLastInsertedNoteId)
+            .resetListeners();
+        this.sidebarHandler
+            .setContainerId(this.containerId)
+            .setCurrentMei(this.currentMEIDoc)
+            .setm2s(this.m2s)
+            .setLoadDataCallback(this.loadDataHandler)
+            .loadMeter()
+            .makeScoreElementsClickable()
+            .resetListeners();
+        this.modHandler
+            .setContainerId(this.containerId)
+            .resetListeners()
+            .setCurrentMEI(this.currentMEIDoc)
+            .setLoadDataCallback(this.loadDataHandler);
+        this.windowHandler
+            .setContainerId(this.containerId)
+            .setm2s(this.m2s)
+            .setCurrentMEI(this.currentMEIDoc)
+            .setLoadDataCallback(this.loadDataHandler)
+            .setSVGReloadCallback(this.reloadDataHandler)
+            .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.container.querySelector(".voiceBtn").classList.add("selected");
+            this.container.querySelector(".layer").classList.add("activeLayer");
+            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);
+        }
+        // experimental react implementation of color picker
+        //this.container.append(ReactWrapper.createColorPicker("reactContainer"))
+    }
+    ////// 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.midi;
+                resolve(response.midi);
+            }
+            else {
+                reject("fail!");
+            }
+        });
+    }
+    getTimemap() {
+        return new Promise((resolve, reject) => {
+            const timemap = this.verovioWrapper.getTimemap();
+            if (timemap) {
+                resolve(timemap);
+            }
+            else {
+                reject("fail!");
+            }
+        });
+    }
+    /**
+     * 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) {
+                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;
+            var rootHeigth = rootBBox.height;
+            if (!this.interactionOverlay.getAttribute("viewBox")) {
+                this.interactionOverlay.setAttribute("viewBox", ["0", "0", rootWidth.toString(), rootHeigth.toString()].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.toString(), rootHeigth.toString()].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;