vibe-editor 0.0.0

package/src/scripts/js/handlers/GlobalKeyboardHandler.js

@@ -0,0 +1,367 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const meiOperation = require("../utils/MEIOperations");
+const meiConverter = require("../utils/MEIConverter");
+const cq = require("../utils/convenienceQueries");
+const marked = "marked";
+const lastAdded = "lastAdded";
+const editStates = [marked, lastAdded];
+const editStateSelector = "." + editStates.join(",.");
+const noteEditStateSelector = editStateSelector.replace(".", ".note.");
+class GlobalKeyboardHandler {
+    constructor(containerId) {
+        this.preventScroll = function (e) {
+            if (this.hasEditableOpen())
+                return;
+            if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(e.code) > -1) {
+                e.preventDefault();
+            }
+        }.bind(this);
+        this.keydownHandler = (function keydownHandler(e) {
+            if (e.code === "Space")
+                return;
+            if (this.hasContainerFocus()) {
+                if (e.key == undefined) {
+                    return;
+                }
+                if (this.hasEditableOpen())
+                    return;
+                var that = this;
+                var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+                var ctrl = e.ctrlKey;
+                if (isMac) {
+                    ctrl = e.metaKey;
+                }
+                if (ctrl) {
+                    if (e.key === "z") {
+                        this.undoHandler(e);
+                    }
+                    if (e.key === "y") {
+                        this.redoHandler(e);
+                    }
+                    if (e.key === "a") {
+                        this.selectAllHandler(e);
+                    }
+                    if (e.key === "c") {
+                        this.copyHandler(e);
+                    }
+                    if (e.key === "v") {
+                        this.pasteHandler(e);
+                    }
+                    // if(e.key === "k" && Array.from(document.querySelectorAll(".note, .chord, .rest, .mrest")).some(el => el.classList.contains(marked))){
+                    //      this.handleHarmony(e)
+                    // }
+                }
+                else if (e.key.includes("Arrow")) {
+                    //document.removeEventListener("keydown", this.keydownHandler)
+                    this.transposeHandler(e);
+                }
+                else if (e.key === "Escape") {
+                    this.resetHandler(e);
+                }
+                else if (e.key.match(/F\d/) !== null) { // interact with F-Keys
+                    this.changeTab(e.key);
+                }
+                else if (e.key.match(/^\d+$/) !== null) { // interaction with numbers
+                    this.changeCustomBtn(e.key);
+                }
+                else if (e.shiftKey) {
+                    if (e.key !== "Shift" && cq.getContainer(this.containerId).classList.contains("clickMode")) { // may only be used during Notation Tab is open
+                        // wait for a double keydown and cache input information
+                        if (this.tempKey == undefined) {
+                            this.tempKey = e.key;
+                        }
+                        else {
+                            this.tempKey += e.key;
+                        }
+                        if (this.keyTimeOuts == undefined)
+                            this.keyTimeOuts = new Array();
+                        this.keyTimeOuts.forEach(to => {
+                            clearTimeout(to);
+                        });
+                        var to = setTimeout(function () {
+                            if (["B", "BB", "'", "''", "N", "T", "_"].some(k => that.tempKey === k)) {
+                                that.changeCustomBtn(that.tempKey);
+                            }
+                            that.tempKey = undefined;
+                            that.keyTimeOuts.forEach(to => {
+                                clearTimeout(to);
+                            });
+                            that.keyTimeOuts = undefined;
+                        }, 100);
+                        this.keyTimeOuts.push(to);
+                    }
+                }
+            }
+        }).bind(this);
+        this.prolongHandler = (function prolongHandler(e) {
+            if (this.hasContainerFocus()) {
+                if (e.code === "Semicolon") { // Deutsch: Ä
+                    this.reduceDur();
+                }
+                else if (e.code === "Quote") { // Deutsch: Ö
+                    this.prolongDur();
+                }
+            }
+        }).bind(this);
+        this.containerId = containerId;
+        this.container = document.getElementById(containerId);
+        this.setListeners();
+    }
+    setListeners() {
+        document.addEventListener("keydown", this.keydownHandler);
+        //document.addEventListener("keydown", this.prolongHandler)
+        window.addEventListener("keydown", this.preventScroll, false);
+    }
+    removeListeners() {
+        document.removeEventListener("keydown", this.keydownHandler);
+        //document.removeEventListener("keydown", this.prolongHandler)
+        window.removeEventListener("keydown", this.preventScroll, false);
+    }
+    undoHandler(e) {
+        e.preventDefault();
+        if (!this.hasContainerFocus())
+            return;
+        e.stopImmediatePropagation();
+        this.undoCallback();
+        //document.removeEventListener("keydown", this.keydownHandler)
+    }
+    redoHandler(e) {
+        e.preventDefault();
+        if (!this.hasContainerFocus())
+            return;
+        e.stopImmediatePropagation();
+        this.redoCallback();
+        //document.removeEventListener("keydown", this.keydownHandler)     
+    }
+    selectAllHandler(e) {
+        if (!this.hasContainerFocus())
+            return;
+        e.preventDefault();
+        cq.getVrvSVG(this.containerId).querySelectorAll(".note").forEach(note => {
+            let stem = note.querySelector(".stem");
+            note.classList.add(marked);
+            if (stem !== null) {
+                stem.classList.add(marked);
+            }
+            var chord = note.closest(".chord");
+            if (chord !== null) {
+                if (!chord.classList.contains(marked))
+                    chord.classList.add(marked);
+            }
+        });
+    }
+    /**
+     * Copy marked Elements
+     * @param e
+     */
+    copyHandler(e) {
+        if (!this.hasContainerFocus())
+            return;
+        e.preventDefault();
+        this.copiedIds = new Array();
+        document.querySelectorAll(".marked").forEach(m => {
+            this.copiedIds.push(m.id);
+        });
+        this.copiedIds.filter(n => n); //undefined and null Elements will be excluded
+    }
+    /**
+     * paste marked Elements
+     * @param e
+     */
+    pasteHandler(e) {
+        var _a, _b;
+        //if(!this.hasContainerFocus()) return
+        //e.preventDefault()
+        var pastePosition = ((_a = this.container.querySelector(".chord.marked, .note.marked, .rest.marked, .mRest.marked")) === null || _a === void 0 ? void 0 : _a.id) || ((_b = this.container.querySelector("#cursor")) === null || _b === void 0 ? void 0 : _b.getAttribute("refId"));
+        if (this.copiedIds != undefined && pastePosition != undefined) {
+            var lastId = meiOperation.paste(this.copiedIds, pastePosition, this.currentMEI);
+            var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+            this.loadDataCallback("", mei, false).then(mei => {
+                //Tell everyone that a past just occured to readjust certain elements e.g.
+                var pastedEvent = new CustomEvent("pasted", { detail: lastId });
+                document.dispatchEvent(pastedEvent);
+            });
+        }
+    }
+    resetHandler(e) {
+        if (!this.hasContainerFocus())
+            return;
+        e.preventDefault();
+        this.container.querySelectorAll(editStateSelector).forEach(el => {
+            editStates.forEach(es => {
+                el.classList.remove(es);
+            });
+        });
+        this.musicPlayer.rewindMidi();
+        this.resetLastInsertedNoteId();
+        this.container.querySelectorAll("#modGroup *").forEach(mg => mg.classList.remove("selected"));
+    }
+    transposeHandler(e) {
+        if (!this.hasContainerFocus())
+            return;
+        if (["annotMode", "harmonyMode"].some(cn => this.container.classList.contains(cn)))
+            return;
+        //e.preventDefault()
+        if (document.querySelectorAll(noteEditStateSelector).length === 0) {
+            return;
+        }
+        var mei;
+        switch (e.key) {
+            case "ArrowUp":
+                mei = meiOperation.transposeByStep(this.currentMEI, "up");
+                break;
+            case "ArrowDown":
+                mei = meiOperation.transposeByStep(this.currentMEI, "down");
+                break;
+            default:
+            //console.log(this, "Sorry, wrong turn")
+        }
+        if (mei != undefined) {
+            if (cq.getContainer(this.containerId).querySelector(".marked") !== null)
+                this.resetLastInsertedNoteId();
+            mei = meiConverter.restoreXmlIdTags(mei);
+            this.loadDataCallback("", mei, false);
+        }
+    }
+    /**
+     * Change tab according to F-Key. The mapping is based on the displayed order
+     * @param fkey
+     */
+    changeTab(fkey) {
+        var cont = cq.getContainer(this.containerId);
+        var target;
+        switch (fkey) {
+            case "F1":
+                target = "notationTabBtn";
+                break;
+            case "F2":
+                target = "annotationTabBtn";
+                break;
+            case "F3":
+                target = "articulationTabBtn";
+                break;
+            default:
+                console.log("There is no Tab to be selected for KEY " + fkey);
+        }
+        try {
+            cont.querySelector("#" + target).dispatchEvent(new MouseEvent("click"));
+        }
+        catch (error) {
+            console.log(this.constructor.name, " has no implementation for " + target);
+        }
+    }
+    /**
+     * Change to the button in custom tool bar based on the key input.
+     * In the case of numbers: mapping is based on the displayed order. Everything else is mapped by key combinations
+     * @param key
+     */
+    changeCustomBtn(key) {
+        var _a, _b;
+        if (key.match(/^\d+$/) !== null) {
+            var i = parseInt(key);
+            i = i === 0 ? 9 : i - 1;
+            var btn = cq.getContainer(this.containerId).querySelectorAll("#customToolbar button.btn");
+            (_a = btn[i]) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent("click"));
+        }
+        else {
+            var id = "";
+            switch (key) {
+                case "B": //b
+                    id = "alterDown";
+                    break;
+                case "'": //#
+                    id = "alterUp";
+                    break;
+                case "BB": //bb
+                    id = "alterDDown";
+                    break;
+                case "''": //x
+                    id = "alterDUp";
+                    break;
+                case "N": //neutral
+                    id = "alterNeutral";
+                    break;
+                case "T": //tie /slur
+                    id = "tieNotes";
+                    break;
+                case "_": //beam
+                    id = "organizeBeams";
+                    break;
+            }
+            (_b = cq.getContainer(this.containerId).querySelector("#" + id)) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new MouseEvent("click"));
+        }
+    }
+    handleHarmony(e) {
+        if (!this.hasContainerFocus())
+            return;
+        this.harmonyHandlerCallback(e);
+    }
+    // Helpers
+    reduceDur() {
+        var additionalElements = new Array();
+        additionalElements.push(document.getElementById(this.scoreGraph.nextRight().getId()));
+        //meiOperation.changeDuration(this.currentMEI, "reduce", additionalElements)
+        meiOperation.changeDurationsInLayer(this.currentMEI, additionalElements);
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false);
+    }
+    prolongDur() {
+        var additionalElements = new Array();
+        additionalElements.push(document.getElementById(this.scoreGraph.nextRight().getId()));
+        //meiOperation.changeDuration(this.currentMEI, "prolong", additionalElements)
+        meiOperation.changeDurationsInLayer(this.currentMEI, additionalElements);
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false);
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+        return this;
+    }
+    hasContainerFocus() {
+        return this.container.classList.contains("activeContainer");
+    }
+    hasEditableOpen() {
+        return document.getElementById(this.containerId).querySelector(".canvas *[contenteditable=true]") !== null;
+    }
+    /////// GETTER/ SETTER ///////
+    setUndoCallback(undoCallback) {
+        this.undoCallback = undoCallback;
+        return this;
+    }
+    setRedoCallback(redoCallback) {
+        this.redoCallback = redoCallback;
+        return this;
+    }
+    setCurrentMei(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+    setMusicProcessor(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        return this;
+    }
+    setScoreGraph(scoreGraph) {
+        this.scoreGraph = scoreGraph;
+        return this;
+    }
+    resetLastInsertedNoteId() { }
+    setHarmonyHandlerCallback(harmonyHandlerCallback) {
+        this.harmonyHandlerCallback = harmonyHandlerCallback;
+        return this;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        return this;
+    }
+    resetLastInsertedNoteCallback(resetLastInsertedNoteId) {
+        this.resetLastInsertedNoteId = resetLastInsertedNoteId;
+        return this;
+    }
+}
+exports.default = GlobalKeyboardHandler;

package/src/scripts/js/handlers/Handler.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/scripts/js/handlers/HarmonyHandler.js

@@ -0,0 +1,282 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const meiConverter = require("../utils/MEIConverter");
+const constants_1 = require("../constants");
+const random_1 = require("../utils/random");
+const HarmonyLabel_1 = require("../gui/HarmonyLabel");
+const coordinates = require("../utils/coordinates");
+class HarmonyHandler {
+    constructor() {
+        this.setHarmonyLabelHandlerClick = (function setHarmonyLabelHandler(e) {
+            if (document.body.classList.contains("harmonyMode")) {
+                this.harmonyLabelHandler(e);
+            }
+        }).bind(this);
+        this.setHarmonyLabelHandlerKey = (function setHarmonyLabelHandler(e) {
+            if (e.ctrlKey || e.metaKey) {
+                if (e.key === "k" && Array.from(document.querySelectorAll(".note, .chord, .rest, .mrest")).some(el => el.classList.contains("marked"))) {
+                    e.preventDefault();
+                    this.harmonyLabelHandler(e);
+                }
+            }
+        }).bind(this);
+        this.activateHarmonyHighlight = (function highlightNextHarmonyHandler(e) {
+            if (e.type === "mouseleave" && !this.isGlobal) {
+                document.getElementById(constants_1.constants._ROOTSVGID_).addEventListener("mousemove", this.activateHarmonyHighlight);
+            }
+            if (!this.isGlobal) {
+                this.highlightNextHarmony(e);
+            }
+        }).bind(this);
+        this.deactivateHarmonyHighlight = (function deactivateHighlight(e) {
+            // document.querySelectorAll(".marked").forEach(m => {
+            //     m.classList.remove("marked")
+            // })
+            document.getElementById(constants_1.constants._ROOTSVGID_).removeEventListener("mousemove", this.activateHarmonyHighlight);
+        }).bind(this);
+        this.modifyLabelHandler = (function modifyLabelHandler(e) {
+            document.querySelectorAll(".marked").forEach(m => {
+                m.classList.remove("marked");
+            });
+            this.modifyLabel(e);
+        }).bind(this);
+        this.submitLabelHandler = (function submitHandler(e) {
+            if (e.key === "Enter" && this.harmonyCanvas.hasChildNodes()) {
+                this.submitLabel();
+            }
+        }).bind(this);
+        this.closeModifyWindowHandler = (function closeModifyWindow(e) {
+            if (e.key === "Escape") {
+                this.closeModifyWindow();
+            }
+        }).bind(this);
+        this.addCanvas();
+        this.harmonyElements = new Map();
+    }
+    addCanvas() {
+        if (typeof this.harmonyCanvas === "undefined") {
+            this.harmonyCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+            this.harmonyCanvas.setAttribute("id", "harmonyCanvas");
+        }
+        this.root = document.getElementById(constants_1.constants._ROOTSVGID_);
+        this.root.insertBefore(this.harmonyCanvas, this.root.firstChild);
+    }
+    setListeners() {
+        document.querySelectorAll(".sylTextRect").forEach(s => {
+            s.remove();
+        });
+        if (!this.isGlobal) {
+            document.getElementById(constants_1.constants._ROOTSVGID_).addEventListener("click", this.setHarmonyLabelHandlerClick, true);
+            document.getElementById(constants_1.constants._ROOTSVGID_).addEventListener("mousemove", this.activateHarmonyHighlight);
+            document.getElementById(constants_1.constants._ROOTSVGID_).addEventListener("keydown", this.closeModifyWindowHandler, true);
+        }
+        document.addEventListener("keydown", this.setHarmonyLabelHandlerKey);
+        document.querySelectorAll(".harm").forEach(h => {
+            h.addEventListener("mouseover", this.deactivateHarmonyHighlight);
+            h.addEventListener("mouseleave", this.activateHarmonyHighlight);
+            h.addEventListener("dblclick", this.modifyLabelHandler);
+        });
+        return this;
+    }
+    removeListeners() {
+        document.getElementById(constants_1.constants._ROOTSVGID_).removeEventListener("click", this.setHarmonyLabelHandlerClick);
+        document.removeEventListener("keydown", this.setHarmonyLabelHandlerKey);
+        document.getElementById(constants_1.constants._ROOTSVGID_).removeEventListener("mousemove", this.activateHarmonyHighlight);
+        document.getElementById(constants_1.constants._ROOTSVGID_).removeEventListener("keydown", this.closeModifyWindowHandler);
+        document.querySelectorAll(".harm").forEach(h => {
+            h.removeEventListener("mouseenter", this.deactivateHarmonyHighlight);
+            h.removeEventListener("mouseleave", this.activateHarmonyHighlight);
+            h.removeEventListener("dblclick", this.modifyLabelHandler);
+        });
+        return this;
+    }
+    /**
+     * Open Inputbox for (first) selected Note
+     */
+    harmonyLabelHandler(e) {
+        var root = document.getElementById(constants_1.constants._ROOTSVGID_);
+        var rootBBox = root.getBoundingClientRect();
+        var nextNote = document.querySelector(".note.marked, .chord.marked");
+        if (nextNote === null) {
+            return;
+        }
+        var nextNoteBBox = nextNote.getBoundingClientRect();
+        var staffBBox = nextNote.closest(".staff").getBoundingClientRect();
+        var posx = nextNoteBBox.left - nextNoteBBox.width / 2 - window.scrollX - rootBBox.x - root.scrollLeft;
+        var posy = staffBBox.bottom - window.scrollY - rootBBox.y - root.scrollLeft;
+        if (this.currentMEI.querySelector("harm[startid=\"" + nextNote.id + "\"]") === null && !this.harmonyCanvas.hasChildNodes()) {
+            this.createInputBox(posx, posy, nextNote.id);
+        }
+        else if (this.harmonyCanvas.hasChildNodes()) {
+            this.closeModifyWindow();
+        }
+    }
+    setHarmonyLabel(label, bboxId) {
+        var harmonyLabel = new HarmonyLabel_1.default(label, bboxId, this.currentMEI); // TODO: Make Dynamically
+        this.harmonyElements.set(harmonyLabel.getHarmElement().id, harmonyLabel);
+        var measure = this.currentMEI.getElementById(bboxId).closest("measure");
+        measure.appendChild(harmonyLabel.getHarmElement());
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false, constants_1.constants._TARGETDIVID_).then(() => {
+            this.reset();
+        });
+        return harmonyLabel;
+    }
+    highlightNextHarmony(e, active = true) {
+        if (!active) {
+            return;
+        }
+        var posx = coordinates.adjustToPage(e.pageX, "x");
+        var posy = coordinates.adjustToPage(e.pageY, "y");
+        var nextNoteBBox = this.m2m.findScoreTarget(posx, posy);
+        var el = document.getElementById(nextNoteBBox.id);
+        if (el.closest(".chord") !== null) {
+            el = el.closest(".chord");
+        }
+        if (!el.classList.contains("marked")) {
+            document.querySelectorAll(".marked").forEach(m => {
+                m.classList.remove("marked");
+            });
+            el.classList.add("marked");
+        }
+    }
+    modifyLabel(e) {
+        var target = e.target;
+        target = target.closest(".harm");
+        target.setAttribute("visibility", "hidden");
+        this.harmId = target.id;
+        var targetBBox = target.getBoundingClientRect();
+        var root = document.getElementById(constants_1.constants._ROOTSVGID_);
+        var rootBBox = root.getBoundingClientRect();
+        var posx = targetBBox.x - window.scrollX - rootBBox.left - root.scrollLeft; //coordinates.adjustToPage(e.pageX, "x")
+        var posy = targetBBox.y - window.scrollY - rootBBox.top - root.scrollTop; //coordinates.adjustToPage(e.pageY, "y")
+        if (document.querySelector("*[refHarmId=\"" + target.id + "\"]") !== null) {
+            return;
+        }
+        this.createInputBox(posx, posy, target.id);
+    }
+    closeModifyWindow() {
+        Array.from(this.harmonyCanvas.children).forEach(c => {
+            c.remove();
+        });
+        // clean MEI from empty harm Elements
+        this.currentMEI.querySelectorAll("harm").forEach(h => {
+            var _a;
+            (_a = document.getElementById(h.id)) === null || _a === void 0 ? void 0 : _a.setAttribute("visibility", "visible");
+            if (h.childElementCount > 0) {
+                if (h.firstElementChild.childElementCount === 0) {
+                    h.remove();
+                }
+            }
+            else if (h.textContent.length === 0) {
+                h.remove();
+            }
+        });
+    }
+    submitLabel() {
+        var harmonyDiv = this.harmonyCanvas.getElementsByClassName("harmonyDiv")[0];
+        var text = harmonyDiv.textContent;
+        var harmLabel = this.harmonyElements.get(harmonyDiv.closest("g").getAttribute("refHarmId"));
+        if (typeof harmLabel !== "undefined") {
+            harmLabel.modifyLabel(text);
+            var currentHarm = this.currentMEI.getElementById(harmLabel.getHarmElement().id);
+            currentHarm.parentElement.replaceChild(harmLabel.getHarmElement(), currentHarm);
+        }
+        else {
+            harmLabel = this.setHarmonyLabel(harmonyDiv.textContent, harmonyDiv.closest("g").getAttribute("refHarmId"));
+            var oldLabel = this.currentMEI.getElementById(this.harmId);
+            harmLabel.getHarmElement().setAttribute("tstamp", oldLabel.getAttribute("tstamp"));
+            harmLabel.getHarmElement().setAttribute("startid", oldLabel.getAttribute("startid"));
+            oldLabel.remove();
+        }
+        this.closeModifyWindow();
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false, constants_1.constants._TARGETDIVID_).then(() => {
+            this.reset();
+        });
+    }
+    createInputBox(posx, posy, targetId) {
+        var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
+        textGroup.setAttribute("id", random_1.uuidv4());
+        textGroup.setAttribute("refHarmId", targetId);
+        var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+        text.classList.add("harmonyText");
+        var textForeignObject = document.createElementNS(constants_1.constants._SVGNS_, "foreignObject");
+        textForeignObject.classList.add("harmonyFO");
+        var textDiv = document.createElement("div");
+        textDiv.setAttribute("contenteditable", "true");
+        textDiv.textContent = typeof this.harmonyElements.get(targetId) !== "undefined" ? this.harmonyElements.get(targetId).getInputString() : "";
+        textDiv.classList.add("harmonyDiv");
+        text.append(textForeignObject);
+        document.body.appendChild(textDiv);
+        var rectPadding = 5;
+        text.setAttribute("x", (posx + rectPadding).toString());
+        text.setAttribute("y", (posy).toString());
+        textForeignObject.setAttribute("x", "0");
+        textForeignObject.setAttribute("y", "0");
+        textForeignObject.setAttribute("height", (textDiv.clientHeight + 2 * rectPadding).toString());
+        textForeignObject.setAttribute("width", (100 + 2 * rectPadding).toString());
+        this.harmonyCanvas.appendChild(textGroup);
+        textGroup.appendChild(text);
+        textForeignObject.appendChild(textDiv);
+        // Special Listeners while Editing Harmonies
+        var that = this;
+        textDiv.addEventListener("focus", function () {
+            that.removeListeners();
+            that.musicPlayer.removePlayListener();
+        });
+        textDiv.addEventListener("blur", function () {
+            that.setListeners();
+            that.musicPlayer.setPlayListener();
+        });
+        textDiv.addEventListener("keydown", this.submitLabelHandler);
+        textDiv.focus();
+    }
+    getTimestamp(note) {
+        var layer = note.closest("layer");
+        var elements = Array.from(layer.querySelectorAll("*[dur]"));
+        elements = elements.filter((v, i) => i <= elements.indexOf(note));
+        var tstamp;
+        elements.forEach(e => {
+            var dur = parseInt(e.getAttribute("dur"));
+            tstamp += 4 / dur;
+            var dots = e.getAttribute("dots");
+            var add = dur;
+            if (dots !== null) {
+                for (var i = 0; i < parseInt(dots); i++) {
+                    add = add / 2;
+                    tstamp += add;
+                }
+            }
+        });
+        return tstamp;
+    }
+    reset() {
+        this.setListeners();
+        this.addCanvas();
+    }
+    setM2M(m2m) {
+        this.m2m = m2m;
+        return this;
+    }
+    setCurrentMEI(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+    setMusicPlayer(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        return this;
+    }
+    setGlobal(global) {
+        this.isGlobal = global;
+        return this;
+    }
+    getGlobal() {
+        return this.isGlobal;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+}
+exports.default = HarmonyHandler;