vibe-editor 0.0.0

package/src/scripts/js/handlers/LabelHandler.js

@@ -0,0 +1,461 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const meiConverter = require("../utils/MEIConverter");
+const meiOperation = require("../utils/MEIOperations");
+const constants_1 = require("../constants");
+const random_1 = require("../utils/random");
+const HarmonyLabel_1 = require("../gui/HarmonyLabel");
+const TempoLabel_1 = require("../gui/TempoLabel");
+const cq = require("../utils/convenienceQueries");
+const mappings_1 = require("../utils/mappings");
+const labelClasses = ["harm", "tempo", "note", "chord", "fb"];
+const labelSelectors = "." + labelClasses.join(",.");
+class LabelHandler {
+    constructor(containerId) {
+        this.setHarmonyLabelHandlerClick = (function setHarmonyLabelHandler(e) {
+            if (this.container.classList.contains("harmonyMode")) {
+                this.harmonyLabelHandler(e);
+            }
+        }).bind(this);
+        this.setTempoLabelHandlerClick = (function setTempoLabelHandlerClick(e) {
+            this.tempoLabelHandler(e);
+        }).bind(this);
+        this.setHarmonyLabelHandlerKey = (function setHarmonyLabelHandler(e) {
+            if (!cq.hasActiveElement(this.containerId))
+                return;
+            var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+            var ctrl = e.ctrlKey;
+            if (isMac) {
+                ctrl = e.metaKey;
+            }
+            if (ctrl) {
+                if (e.key === "k" && Array.from(this.vrvSVG.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) {
+                this.interactionOverlay.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")
+            // })
+            this.interactionOverlay.removeEventListener("mousemove", this.activateHarmonyHighlight);
+        }).bind(this);
+        this.modifyLabelHandler = (function modifyLabelHandler(e) {
+            e.stopImmediatePropagation();
+            this.vrvSVG.querySelectorAll(".marked").forEach(m => {
+                var _a;
+                m.classList.remove("marked");
+                (_a = this.interactionOverlay.querySelector("*[refId=" + m.id + "]")) === null || _a === void 0 ? void 0 : _a.classList.remove("marked");
+            });
+            this.modifyLabel(e);
+        }).bind(this);
+        /**
+         * Wrapper function for submitlabel()
+         */
+        this.submitLabelHandler = (function submitHandler(e) {
+            if (!cq.hasActiveElement(this.containerId))
+                return;
+            if (e.key === "Enter" && this.labelCanvas.hasChildNodes()) {
+                e.target.removeEventListener("keydown", this.submitLabelHandler);
+                this.submitLabel();
+            }
+        }).bind(this);
+        this.typeLabelHandler = (function (e) {
+            if (!cq.hasActiveElement(this.containerId))
+                return;
+            var factor = 1.3;
+            var t = e.target;
+            var parent = t.parentElement;
+            var tWidth = (t.getBoundingClientRect().width * factor).toString();
+            var tHeigth = (t.getBoundingClientRect().height * factor).toString();
+            parent.setAttribute("width", tWidth);
+            parent.setAttribute("height", tHeigth);
+        }).bind(this);
+        this.closeModifyWindowHandler = (function closeModifyWindow(e) {
+            if (e instanceof KeyboardEvent) {
+                if (e.key === "Escape") {
+                    this.closeModifyWindow();
+                }
+            }
+            else if (e instanceof MouseEvent && !e.target.classList.contains("labelFO")) {
+                this.closeModifyWindow();
+            }
+        }).bind(this);
+        this.setContainerId(containerId);
+        this.addCanvas();
+    }
+    /**
+     * Set own canvas for manipulating labels
+     */
+    addCanvas() {
+        this.rootBBox = this.interactionOverlay.getBoundingClientRect();
+        var rootWidth = this.rootBBox.width.toString();
+        var rootHeigth = this.rootBBox.height.toString();
+        var vb = this.interactionOverlay.getAttribute("viewBox");
+        if (this.labelCanvas == undefined) {
+            this.labelCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+            this.labelCanvas.setAttribute("id", "labelCanvas");
+            this.labelCanvas.classList.add("canvas");
+            //this.labelCanvas.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "))
+        }
+        this.labelCanvas.setAttribute("viewBox", vb);
+        this.interactionOverlay.insertBefore(this.labelCanvas, this.interactionOverlay.firstChild);
+        return this;
+    }
+    /**
+     * Create label instances for elements already present in the score.
+     */
+    initLabels() {
+        this.labels = new Map();
+        this.vrvSVG.querySelectorAll(labelSelectors).forEach(el => {
+            var _a;
+            var className = labelClasses.filter(l => this.vrvSVG.querySelector("#" + el.id).classList.contains(l))[0];
+            var inputString = "";
+            switch (className) {
+                case "harm":
+                    if (el.querySelector(".fb") !== null) {
+                        this.currentMEI.querySelectorAll("#" + el.id + " f").forEach(f => {
+                            inputString += " " + f.textContent;
+                        });
+                        inputString = inputString.trim();
+                    }
+                    else {
+                        inputString = this.currentMEI.getElementById(el.id).textContent;
+                    }
+                    this.labels.set(el.id, new HarmonyLabel_1.default(inputString, el.id, this.currentMEI));
+                    break;
+                case "tempo":
+                    inputString = ((_a = Array.from(this.vrvSVG.querySelector("#" + el.id).querySelectorAll(".text")).filter(e => /\d+/.test(e.textContent))[0]) === null || _a === void 0 ? void 0 : _a.textContent.match(/\d+/).join("")) || "";
+                    this.labels.set(el.id, new TempoLabel_1.default(inputString, el.id, this.currentMEI));
+                    break;
+            }
+        });
+    }
+    setListeners() {
+        document.querySelectorAll(".sylTextRect").forEach(s => {
+            s.remove();
+        });
+        // isGlobal = false: Editor is not in harmony mode
+        if (!this.isGlobal) {
+            this.interactionOverlay.addEventListener("click", this.setHarmonyLabelHandlerClick, true);
+            this.interactionOverlay.addEventListener("mousemove", this.activateHarmonyHighlight);
+            this.interactionOverlay.addEventListener("keydown", this.closeModifyWindowHandler, true);
+        }
+        this.interactionOverlay.addEventListener("click", this.closeModifyWindowHandler);
+        document.addEventListener("keydown", this.setHarmonyLabelHandlerKey);
+        this.interactionOverlay.querySelectorAll(labelSelectors).forEach(h => {
+            h.addEventListener("mouseover", this.deactivateHarmonyHighlight);
+            h.addEventListener("mouseleave", this.activateHarmonyHighlight);
+            h.addEventListener("dblclick", this.modifyLabelHandler);
+        });
+        this.interactionOverlay.querySelectorAll(".harm, .label, .manipulator").forEach(h => h.addEventListener("click", (e) => {
+            e.stopImmediatePropagation();
+            e.stopPropagation();
+        })); // prevent inseerting notes, wenn cursor is over a harm symbol
+        return this;
+    }
+    removeListeners() {
+        this.interactionOverlay.removeEventListener("click", this.closeModifyWindowHandler);
+        this.interactionOverlay.removeEventListener("click", this.setHarmonyLabelHandlerClick);
+        document.removeEventListener("keydown", this.setHarmonyLabelHandlerKey);
+        this.interactionOverlay.removeEventListener("mousemove", this.activateHarmonyHighlight);
+        this.interactionOverlay.removeEventListener("keydown", this.closeModifyWindowHandler);
+        this.interactionOverlay.querySelectorAll(labelSelectors).forEach(h => {
+            h.removeEventListener("mouseenter", this.deactivateHarmonyHighlight);
+            h.removeEventListener("mouseleave", this.activateHarmonyHighlight);
+            h.removeEventListener("dblclick", this.modifyLabelHandler);
+        });
+        return this;
+    }
+    // HARMONY LABELS
+    /**
+     * Open Inputbox for (first) selected Note
+     */
+    harmonyLabelHandler(e) {
+        var nextNote = this.vrvSVG.querySelector(".note.marked, .chord.marked");
+        if (nextNote === null) {
+            return;
+        }
+        var nextNoteBBox = nextNote.getBoundingClientRect();
+        var staffBBox = nextNote.closest(".staff").getBoundingClientRect();
+        var canvasMatrix = this.labelCanvas.getScreenCTM().inverse();
+        var ptNoteLT = new DOMPoint(nextNoteBBox.left, nextNoteBBox.top);
+        ptNoteLT = ptNoteLT.matrixTransform(canvasMatrix);
+        var ptNoteRB = new DOMPoint(nextNoteBBox.right, nextNoteBBox.bottom);
+        ptNoteRB = ptNoteRB.matrixTransform(canvasMatrix);
+        var ptNoteWidth = Math.abs(ptNoteRB.x - ptNoteLT.x);
+        var ptNoteHeight = Math.abs(ptNoteRB.y - ptNoteLT.y);
+        var ptStaffLT = new DOMPoint(staffBBox.left, staffBBox.top);
+        ptStaffLT = ptStaffLT.matrixTransform(canvasMatrix);
+        var ptStaffRB = new DOMPoint(staffBBox.right, staffBBox.bottom);
+        ptStaffRB = ptStaffRB.matrixTransform(canvasMatrix);
+        var ptStaffWidth = Math.abs(ptStaffRB.x - ptStaffLT.x);
+        var ptStaffHeight = Math.abs(ptStaffRB.y - ptStaffLT.y);
+        var posx = ptNoteLT.x - ptNoteWidth / 2; //nextNoteBBox.left - nextNoteBBox.width/2 - window.scrollX - rootBBox.x - root.scrollLeft
+        var posy = ptStaffRB.y; //staffBBox.bottom - window.scrollY - rootBBox.y - root.scrollLeft
+        var tstamp = meiOperation.getElementTimestampById(nextNote.id, this.currentMEI);
+        var existsTstamp = Array.from(this.currentMEI.getElementById(nextNote.id).closest("measure").querySelectorAll("harm")).some(h => {
+            if (h.getAttribute("tstamp") !== null) {
+                return parseFloat(h.getAttribute("tstamp")) === tstamp;
+            }
+            else {
+                return false;
+            }
+        });
+        var hasStartId = this.currentMEI.querySelector("harm[startid=\"" + nextNote.id + "\"]") !== null;
+        var isEmptyLabelCanvas = !this.labelCanvas.hasChildNodes();
+        if (!hasStartId && isEmptyLabelCanvas && !existsTstamp) {
+            this.createInputBox(posx, posy, nextNote.id, "harm");
+        }
+        else if (!isEmptyLabelCanvas) {
+            this.closeModifyWindow();
+        }
+    }
+    setLabel(labelString, bboxId) {
+        var className = labelClasses.filter(l => this.vrvSVG.querySelector("#" + bboxId).classList.contains(l))[0];
+        var label;
+        switch (className) {
+            case "note":
+            case "chord":
+            case "harm":
+                label = new HarmonyLabel_1.default(labelString, bboxId, this.currentMEI);
+                break;
+            case "tempo":
+                label = new TempoLabel_1.default(labelString, bboxId, this.currentMEI);
+                break;
+            default:
+                return;
+        }
+        if (this.labels.get(label.getElement().id) == undefined) {
+            this.labels.set(label.getElement().id, label);
+        }
+        return label;
+    }
+    highlightNextHarmony(e, active = true) {
+        if (!active) {
+            return;
+        }
+        var pt = new DOMPoint(e.clientX, e.clientY);
+        var rootMatrix = this.labelCanvas.getScreenCTM().inverse();
+        pt = pt.matrixTransform(rootMatrix);
+        var posx = pt.x;
+        var posy = pt.y;
+        var nextNoteBBox = this.m2s.findScoreTarget(posx, posy);
+        if (nextNoteBBox == undefined) {
+            return;
+        }
+        var el = this.vrvSVG.querySelector("#" + nextNoteBBox.id);
+        if (el.closest(".chord") !== null) {
+            el = el.closest(".chord");
+        }
+        if (!el.classList.contains("marked")) {
+            this.vrvSVG.querySelectorAll(".marked").forEach(m => {
+                var _a;
+                m.classList.remove("marked");
+                (_a = this.interactionOverlay.querySelector("[refId=" + m.id + "]")) === null || _a === void 0 ? void 0 : _a.classList.remove("marked");
+            });
+            el.classList.add("marked");
+        }
+    }
+    /**
+     * modify existing label
+     * @param e
+     * @returns
+     */
+    modifyLabel(e) {
+        var _a, _b;
+        this.closeModifyWindow();
+        var target = e.target;
+        if (target.id === "") {
+            var refId = (_a = target.closest("[refId]")) === null || _a === void 0 ? void 0 : _a.getAttribute("refId");
+            if (refId === null)
+                return;
+            target = (_b = this.vrvSVG.querySelector("#" + refId)) === null || _b === void 0 ? void 0 : _b.closest(".harm");
+        }
+        target = target.closest(labelSelectors);
+        target.setAttribute("visibility", "hidden");
+        var targetBBox = target.getBoundingClientRect();
+        var pt = new DOMPoint(targetBBox.x, targetBBox.y);
+        var rootMatrix = this.labelCanvas.getScreenCTM().inverse();
+        pt = pt.matrixTransform(rootMatrix);
+        var posx = pt.x - 5;
+        var posy = pt.y - 5;
+        // prevent double input boxes for same Element
+        this.elementId = target.id;
+        if (this.container.querySelector("*[refElementId=\"" + target.id + "\"]") !== null) {
+            return;
+        }
+        var className = labelClasses.filter(l => target.classList.contains(l))[0]; //assume only one output, therefore alway return idx 0  
+        this.createInputBox(posx, posy, target.id, className);
+    }
+    /**
+     * Close the modifier Window and make the hidden Element visible again
+     */
+    closeModifyWindow() {
+        try {
+            Array.from(this.labelCanvas.children).forEach(c => {
+                c === null || c === void 0 ? void 0 : c.remove();
+            });
+        }
+        catch (_a) { }
+        // clean MEI from empty harm Elements
+        this.currentMEI.querySelectorAll(labelClasses.join(",")).forEach(h => {
+            var _a;
+            if (h.id === "")
+                return;
+            (_a = this.container.querySelector("#" + h.id)) === null || _a === void 0 ? void 0 : _a.setAttribute("visibility", "visible");
+        });
+    }
+    /**
+     * Save label information in current MEI
+     */
+    submitLabel() {
+        var labelDiv = this.labelCanvas.getElementsByClassName("labelDiv")[0];
+        var text = labelDiv.textContent;
+        var refElementClass = labelClasses.filter(l => this.container.querySelector("#" + labelDiv.closest("g").getAttribute("refElementId")).classList.contains(l))[0]; // assume only one result
+        var label = this.labels.get(labelDiv.closest("g").getAttribute("refElementId"));
+        if (refElementClass === "harm") { // change existing harm
+            let harmLabel = label;
+            harmLabel.modifyLabel(text);
+            //this.currentMEI.getElementById(harmLabel.getElement().id).replaceWith(harmLabel.getElement())
+        }
+        else if (["note", "chord"].some(cn => refElementClass === cn)) { //create new harm
+            let harmLabel = this.setLabel(labelDiv.textContent, labelDiv.closest("g").getAttribute("refElementId"));
+            this.currentMEI.getElementById(harmLabel.getStartId()).closest("measure").append(harmLabel.getElement());
+        }
+        else if (refElementClass === "tempo") { // change existing tempo
+            var tempoLabel = label;
+            tempoLabel.modifyLabel(text);
+        }
+        this.closeModifyWindow();
+        meiOperation.cleanUp(this.currentMEI);
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false).then(() => {
+            this.reset();
+        });
+    }
+    createInputBox(posx, posy, targetId, targetClass) {
+        var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
+        textGroup.setAttribute("id", random_1.uuidv4());
+        textGroup.setAttribute("refElementId", targetId);
+        var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+        text.classList.add("labelText");
+        var textForeignObject = document.createElementNS(constants_1.constants._SVGNS_, "foreignObject");
+        textForeignObject.classList.add("labelFO");
+        var textDiv = document.createElement("div");
+        textDiv.setAttribute("contenteditable", "true");
+        switch (targetClass) {
+            case "harm":
+                if (this.labels.get(targetId) != undefined) {
+                    var t = this.labels.get(targetId).getInput();
+                    for (const [key, value] of mappings_1.unicodeToKey.entries()) {
+                        t = t.replace(key, value);
+                    }
+                    textDiv.textContent = t;
+                }
+                else {
+                    textDiv.textContent = "";
+                }
+                break;
+            case "tempo":
+                textDiv.textContent = Array.from(this.container.querySelector("#" + targetId).querySelectorAll(".text")).filter(el => /\d+/.test(el.textContent))[0].textContent.match(/\d+/).join("") || "";
+                break;
+            default:
+                return;
+        }
+        textDiv.classList.add("labelDiv");
+        text.append(textForeignObject);
+        this.container.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", "1000"); //(textDiv.clientHeight + 2 * rectPadding).toString())
+        textForeignObject.setAttribute("width", "1000"); //(textDiv.clientHeight + 2 * rectPadding).toString())
+        this.labelCanvas.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 () {
+            textDiv.dispatchEvent(new KeyboardEvent("keydown", { "key": "Enter" })); // trigger submitLabel when bluring
+            that.setListeners();
+            that.musicPlayer.setPlayListener();
+        });
+        textDiv.addEventListener("keydown", this.submitLabelHandler);
+        textDiv.addEventListener("keydown", this.typeLabelHandler);
+        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 = 0;
+        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.setContainerId(this.containerId);
+        this.addCanvas();
+        this.initLabels();
+        this.removeListeners();
+        this.setListeners();
+        return this;
+    }
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setCurrentMEI(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+    setMusicProcessor(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        return this;
+    }
+    setGlobal(global) {
+        this.isGlobal = global;
+        return this;
+    }
+    getGlobal() {
+        return this.isGlobal;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.container = document.getElementById(id);
+        this.vrvSVG = cq.getVrvSVG(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        return this;
+    }
+}
+exports.default = LabelHandler;