vibe-editor 0.0.0 → 0.0.1-dev

package/src/scripts/js/Core.js

@@ -23,25 +23,27 @@ 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.
+ * 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.reloadDataFunction = (function reloadData() {
-            return this.loadData(this.currentMEI, false);
+        this.reloadDataHandler = (function reloadDataHandler() {
+            return this.reloadData();
         }).bind(this);
-        this.loadDataFunction = (function loadDataFunction(pageURI, data, isUrl) {
-            return this.loadData(data, isUrl, { changeOnPageNo: pageURI });
+        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.alignFunctionCall = (function alignFunction(file) {
-            var _a;
-            (_a = this.musicProcessor) === null || _a === void 0 ? void 0 : _a.align(file);
+        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
@@ -186,8 +188,11 @@ class Core {
         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',
@@ -205,7 +210,7 @@ class Core {
                 try {
                     // delete old svg
                     if (cq.getVrvSVG(that.containerId).querySelector("#" + pageId) !== null) {
-                        that.svgEditor.cacheClasses().cacheScales();
+                        //that.svgEditor.cacheClasses().cacheScales()
                         cq.getVrvSVG(that.containerId).querySelector("#" + pageId).innerHTML = ""; //.remove()
                     }
                     //insert new complete svg
@@ -213,59 +218,29 @@ class Core {
                     cq.getVrvSVG(that.containerId).querySelector("#" + pageId).replaceWith(pageElement);
                 }
                 catch (error) {
-                    document.querySelector("#" + that.containerId + " #vrvSVG").append(pageElement);
+                    (_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 === null || options === void 0 ? void 0 : 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;
-            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);
+            this.sendDataToVerovio(data, isUrl);
             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);
@@ -295,94 +270,181 @@ class Core {
                 }
                 renderPromises.push(setTimeout(function () { render(pageNo, options); }, 1));
             });
+            //Each page will be redered seperatly
             Promise.all(renderPromises).then(() => {
                 document.body.classList.remove(waitingFlag);
-                var that = this;
-                setTimeout(function () {
+                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, _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);
+                    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");
                         }
-                        if (that.meiChangedCallback != undefined) {
-                            that.meiChangedCallback(that.currentMEI);
+                        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.remove(lastAddedClass);
                     });
-                    //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);
-            });
+                    if (that.lastInsertedNoteId && ["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);
+                        (_b = that.container.querySelector("#" + that.lastInsertedNoteId)) === null || _b === void 0 ? void 0 : _b.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") === 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"));
+                    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";
+            // if (cq.getVrvSVG(this.containerId) !== null) {
+            //   document.body.classList.add(waitingFlag)
+            // }
+            // svg has to be loaded into verovio anyway 
+            this.sendDataToVerovio(data, isUrl);
+            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() {
-        //must be first!!!
-        if (this.m2s == undefined) {
-            this.m2s = new Mouse2SVG_1.Mouse2SVG();
-        }
-        else {
-            //this.m2s.update()
+    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.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.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 = 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();
+        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)
@@ -400,10 +462,10 @@ class Core {
             .setDeleteHandler(this.deleteHandler)
             .setLabelHandler(this.labelHandler)
             .activateHarmonyMode()
-            .activateSelectionMode()
+            //.activateSelectionMode()
             .setInsertCallback(this.insert)
             .setDeleteCallback(this.delete)
-            .setLoadDataCallback(this.loadDataFunction)
+            .setLoadDataCallback(this.loadDataHandler)
             .setUndoAnnotationStacks(this.undoAnnotationStacks)
             .resetModes()
             .resetCanvas();
@@ -426,7 +488,7 @@ class Core {
             .setCurrentMei(this.currentMEIDoc)
             .setMusicProcessor(this.musicProcessor)
             .setHarmonyHandlerCallback(this.labelHandler.setHarmonyLabelHandlerKey)
-            .setLoadDataCallback(this.loadDataFunction)
+            .setLoadDataCallback(this.loadDataHandler)
             .setScoreGraph(this.scoreGraph)
             .resetLastInsertedNoteCallback(this.resetLastInsertedNoteId)
             .resetListeners();
@@ -434,7 +496,7 @@ class Core {
             .setContainerId(this.containerId)
             .setCurrentMei(this.currentMEIDoc)
             .setm2s(this.m2s)
-            .setLoadDataCallback(this.loadDataFunction)
+            .setLoadDataCallback(this.loadDataHandler)
             .loadMeter()
             .makeScoreElementsClickable()
             .resetListeners();
@@ -442,13 +504,13 @@ class Core {
             .setContainerId(this.containerId)
             .resetListeners()
             .setCurrentMEI(this.currentMEIDoc)
-            .setLoadDataCallback(this.loadDataFunction);
+            .setLoadDataCallback(this.loadDataHandler);
         this.windowHandler
             .setContainerId(this.containerId)
             .setm2s(this.m2s)
             .setCurrentMEI(this.currentMEIDoc)
-            .setLoadDataCallback(this.loadDataFunction)
-            .setSVGReloadCallback(this.reloadDataFunction)
+            .setLoadDataCallback(this.loadDataHandler)
+            .setSVGReloadCallback(this.reloadDataHandler)
             .setAnnotations(this.insertModeHandler.getAnnotations())
             .setInsertModeHandler(this.insertModeHandler)
             .resetListeners();
@@ -459,6 +521,8 @@ class Core {
         // 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) {
@@ -473,6 +537,8 @@ class Core {
         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 /////////////////
     /**
@@ -504,7 +570,7 @@ class Core {
             };
             var response = this.verovioWrapper.setMessage(message);
             if (response.midi) {
-                this.currentMidi = response.mei;
+                this.currentMidi = response.midi;
                 resolve(response.midi);
             }
             else {
@@ -512,55 +578,15 @@ class Core {
             }
         });
     }
-    /**
-     * 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);
+    getTimemap() {
+        return new Promise((resolve, reject) => {
+            const timemap = this.verovioWrapper.getTimemap();
+            if (timemap) {
+                resolve(timemap);
+            }
+            else {
+                reject("fail!");
+            }
         });
     }
     /**
@@ -572,7 +598,7 @@ class Core {
             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) {
+            if (!this.interactionOverlay) {
                 var overlay = document.createElementNS(constants_1.constants._SVGNS_, "svg");
                 overlay.setAttribute("id", "interactionOverlay");
                 this.interactionOverlay = overlay;
@@ -581,15 +607,15 @@ class Core {
             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(" "));
-            //}
+            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, rootHeigth].join(" "));
+            //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);