vibe-editor 0.0.0

package/src/scripts/js/handlers/CustomToolbarHandler.js

@@ -0,0 +1,297 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../constants");
+const meiConverter = require("../utils/MEIConverter");
+const meiOperation = require("../utils/MEIOperations");
+const cq = require("../utils/convenienceQueries");
+const modSelector = ".slur, .tie, .accid, .artic, .tupletNum, .tupletBracket";
+/**
+ * Handler for all options which could modulate the given score. These functions are related to all buttons in the sidebar and toolbar
+ */
+class CustomToolbarHandler {
+    constructor(containerId) {
+        this.resetListenerFunction = (function resetListenerFunction(e) {
+            e.preventDefault();
+            this.resetListeners();
+        }).bind(this);
+        this.createTupletFunction = (function createTupletFunction(e) {
+            e.preventDefault();
+            this.createTuplet(e);
+        }).bind(this);
+        /** Wrapperfunction for Eventslistener */
+        this.connectNotesFunction = (function connectNotesFunction(e) {
+            e.preventDefault();
+            this.connectNotes(e);
+        }).bind(this);
+        /** Wrapperfunction for Eventslistener */
+        this.organizeBeamsFunction = (function organizeBeamsFunction(e) {
+            e.preventDefault();
+            this.organizeBeams(e);
+        }).bind(this);
+        this.alterFunction = (function alterFunction(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.alterNotes(e);
+        }).bind(this);
+        this.articulationHandlerFunction = (function articulationHandlerFunction(e) {
+            e.preventDefault();
+            this.articulationHandler(e);
+        }).bind(this);
+        this.setContainerId(containerId);
+        this.tupletButton = this.container.querySelector("#tupletBtn");
+        this.tieNotesButton = this.container.querySelector("#tieNotes");
+        this.organizeBeamsButton = this.container.querySelector("#organizeBeams");
+        var a = this.alterUpButton = this.container.querySelector("#alterUp");
+        var b = this.alterDownButton = this.container.querySelector("#alterDown");
+        var c = this.alterNeutralButton = this.container.querySelector("#alterNeutral");
+        var d = this.alterDUpButton = this.container.querySelector("#alterDUp");
+        var e = this.alterDDownButton = this.container.querySelector("#alterDDown");
+        this.alterButtons = [a, b, c, d, e];
+        this.articButtons = new Array();
+        this.tabButtons = Array.from(this.container.querySelectorAll(".tabBtn"));
+    }
+    setListeners() {
+        this.tabButtons.forEach(tb => {
+            tb.addEventListener("click", this.resetListenerFunction);
+        });
+        this.tupletButton.addEventListener("click", this.createTupletFunction);
+        this.tieNotesButton.addEventListener("click", this.connectNotesFunction);
+        this.organizeBeamsButton.addEventListener("click", this.organizeBeamsFunction);
+        this.alterButtons.forEach(ab => {
+            ab.addEventListener("click", this.alterFunction);
+        });
+        if (this.articButtons.length === 0) {
+            cq.getContainer(this.containerId).querySelectorAll("#articGroup .btn").forEach(btn => this.articButtons.push(btn));
+        }
+        this.articButtons.forEach(ab => {
+            ab.addEventListener("click", this.articulationHandlerFunction);
+        });
+        this.makeScoreElementsClickable();
+    }
+    removeListeners() {
+        this.tabButtons.forEach(tb => {
+            tb.removeEventListener("click", this.resetListenerFunction);
+        });
+        this.tupletButton.removeEventListener("click", this.createTupletFunction);
+        this.tieNotesButton.removeEventListener("click", this.connectNotesFunction);
+        this.organizeBeamsButton.removeEventListener("click", this.organizeBeamsFunction);
+        this.alterButtons.forEach(ab => {
+            ab.removeEventListener("click", this.alterFunction);
+        });
+        this.articButtons.forEach(ab => {
+            ab.removeEventListener("click", this.articulationHandlerFunction);
+        });
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+        return this;
+    }
+    createTuplet(e) {
+        var meiElements = Array.from(cq.getContainer(this.containerId).querySelectorAll(".marked")).map(m => {
+            if (this.currentMEI.querySelector("#" + m.id) !== null) {
+                return this.currentMEI.querySelector("#" + m.id);
+            }
+        });
+        meiOperation.createTuplet(meiElements, this.currentMEI);
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false);
+    }
+    /**
+     * Make slur or tie for 2 or more elements when tie button is clicked
+     * Tie, only when there are two selected elemets which are the same pitch
+     * Delete otherwise
+     * @param e
+     */
+    connectNotes(e) {
+        var markedElements = Array.from(this.vrvSVG.querySelectorAll(".note.marked"));
+        markedElements = markedElements.filter(me => me.closest(".layer").getAttribute("n") === markedElements[0].closest(".layer").getAttribute("n"));
+        if (markedElements.length <= 1) {
+            return;
+        }
+        var makeSlur = markedElements.length > 2 ? "slur" : "tie";
+        //if(!makeSlur && markedElements.length > 1){ // assert only 2 items
+        var leftId = markedElements[0].id;
+        var rightId = markedElements.reverse()[0].id;
+        var leftMeiElement = this.currentMEI.getElementById(leftId);
+        var rightMeiElement = this.currentMEI.getElementById(rightId);
+        meiOperation.connectNotes(leftMeiElement, rightMeiElement, makeSlur);
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false);
+    }
+    /**
+     * Pack selected elements in own beam element. Only for dur > 4
+     * @param e
+     */
+    organizeBeams(e) {
+        var markedElements = Array.from(this.vrvSVG.querySelectorAll(".marked")); // (".note.marked, .chord.marked"))
+        markedElements = markedElements.filter(me => {
+            var isInLayer = me.closest(".layer").getAttribute("n") === markedElements[0].closest(".layer").getAttribute("n");
+            var hasDur = this.currentMEI.getElementById(me.id) !== null ? this.currentMEI.getElementById(me.id).getAttribute("dur") !== null : false;
+            return isInLayer && hasDur;
+        });
+        if (markedElements.length === 0) {
+            return;
+        }
+        var haveRightDur = markedElements.filter(me => {
+            var _a;
+            var dur = (_a = this.currentMEI.getElementById(me.id)) === null || _a === void 0 ? void 0 : _a.getAttribute("dur");
+            return parseInt(dur) > 4;
+        }).length >= 2;
+        if (haveRightDur) {
+            var firstMeiElement = this.currentMEI.getElementById(markedElements[0].id);
+            var newBeam = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "beam");
+            var oldBeam = firstMeiElement.closest("beam");
+            firstMeiElement.parentElement.insertBefore(newBeam, firstMeiElement);
+            markedElements.forEach(me => {
+                newBeam.append(this.currentMEI.getElementById(me.id));
+            });
+            if (oldBeam !== null && oldBeam.childElementCount > 1) {
+                var beamCandidates = new Array();
+                var bc;
+                oldBeam.querySelectorAll(":scope > *").forEach(cn => {
+                    if (cn.tagName.toLowerCase() === "beam") {
+                        if (beamCandidates.length > 0) {
+                            if (beamCandidates.length === 1) {
+                                bc = beamCandidates[0];
+                            }
+                            else if (beamCandidates.length > 1) {
+                                bc = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "beam");
+                                beamCandidates.forEach(b => bc.append(b));
+                            }
+                            oldBeam.parentElement.insertBefore(bc, oldBeam);
+                            beamCandidates = new Array();
+                        }
+                        oldBeam.parentElement.insertBefore(cn, oldBeam);
+                    }
+                    else {
+                        beamCandidates.push(cn);
+                    }
+                });
+                if (beamCandidates.length > 0) { // if array is still full after loop
+                    if (beamCandidates.length === 1) {
+                        bc = beamCandidates[0];
+                    }
+                    else if (beamCandidates.length > 1) {
+                        bc = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "beam");
+                        beamCandidates.forEach(b => bc.append(b));
+                    }
+                    oldBeam.parentElement.insertBefore(bc, oldBeam);
+                }
+            }
+            else if ((oldBeam === null || oldBeam === void 0 ? void 0 : oldBeam.childElementCount) === 1) {
+                if (oldBeam.firstElementChild.tagName.toLowerCase() === "beam") {
+                    Array.from(oldBeam.firstElementChild.children).forEach(c => {
+                        oldBeam.parentElement.insertBefore(c, oldBeam);
+                    });
+                }
+                else {
+                    oldBeam.parentElement.insertBefore(oldBeam.firstElementChild, oldBeam);
+                }
+                oldBeam.remove();
+            }
+            meiOperation.cleanUp(this.currentMEI);
+            var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+            this.loadDataCallback("", mei, false);
+        }
+    }
+    /**
+     * Alter Notes (accid) according to button.
+     * @param e
+     * @returns
+     */
+    alterNotes(e) {
+        var target = e.target;
+        var accidSig;
+        switch (target.id) {
+            case "alterUp":
+                accidSig = "s";
+                break;
+            case "alterDown":
+                accidSig = "f";
+                break;
+            case "alterDUp":
+                accidSig = "ss";
+                break;
+            case "alterDDown":
+                accidSig = "ff";
+                break;
+            case "alterNeutral":
+                accidSig = "n";
+                break;
+            default:
+                console.error(target.id, "No such option for accid alteration");
+                return;
+        }
+        this.vrvSVG.querySelectorAll(".note.marked").forEach(nm => {
+            var meiElement = this.currentMEI.getElementById(nm.id);
+            meiElement.setAttribute("accid", accidSig);
+            meiElement.removeAttribute("accid.ges");
+        });
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        meiOperation.adjustAccids(mei);
+        this.loadDataCallback("", mei, false);
+    }
+    /**
+     * Make Score Elements Clickable (and mark them), which are important for functions in the modulation toolbar group
+     * @returns this
+     */
+    makeScoreElementsClickable() {
+        var that = this;
+        cq.getInteractOverlay(this.containerId).querySelectorAll(modSelector).forEach(c => {
+            if (c.classList.contains("tuplet"))
+                console.log(c);
+            c.addEventListener("click", function (e) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                that.vrvSVG.querySelectorAll(modSelector).forEach(c => c.classList.remove("marked"));
+                var originSVG = that.vrvSVG.querySelector("#" + this.getAttribute("refId"));
+                if (originSVG.classList.contains("marked")) {
+                    originSVG.classList.remove("marked");
+                }
+                else {
+                    originSVG.classList.add("marked");
+                }
+            });
+        });
+    }
+    articulationHandler(e) {
+        var target = e.target;
+        var articulation = target.id.replace("Btn", "");
+        var artic;
+        switch (articulation) {
+            case "accent":
+                artic = "acc";
+                break;
+            case "tenuto":
+                artic = "ten";
+                break;
+            case "marcato":
+                artic = "marc";
+                break;
+            case "staccato":
+                artic = "stacc";
+                break;
+        }
+        meiOperation.setArticulation(this.currentMEI, artic);
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false);
+    }
+    //GETTER/ SETTER
+    setCurrentMEI(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        this.vrvSVG = cq.getVrvSVG(containerId);
+        this.container = document.getElementById(containerId);
+        return this;
+    }
+}
+exports.default = CustomToolbarHandler;

package/src/scripts/js/handlers/DeleteHandler.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cq = require("../utils/convenienceQueries");
+const action = "mousedown";
+class DeleteHandler {
+    constructor(containerId) {
+        this.primaryDeleteFlag = "marked";
+        this.secondaryDeleteFlag = "lastAdded";
+        this.clickHandler = (function clickHandler(e) {
+            var target = e.target;
+            target = target.closest(".note");
+            let stem = target.querySelector(".stem");
+            if (!target.classList.contains(this.primaryDeleteFlag)) {
+                target.classList.add(this.primaryDeleteFlag);
+                if (stem !== null) {
+                    stem.classList.add(this.primaryDeleteFlag);
+                }
+            }
+            else {
+                target.classList.remove(this.primaryDeleteFlag);
+                if (stem !== null) {
+                    stem.classList.remove(this.primaryDeleteFlag);
+                }
+            }
+        }).bind(this);
+        /**
+         * Delete all Elements which are marked
+         */
+        this.backSpaceHandler = (function backSpaceHandler(e) {
+            if (!cq.hasActiveElement(this.containerId))
+                return;
+            if (e.code !== "Backspace")
+                return;
+            var hasRests = false;
+            var hasNotes = false;
+            if (cq.getVrvSVG(this.containerId).querySelectorAll("." + this.primaryDeleteFlag + ".rest, ." + this.secondaryDeleteFlag + ".rest").length > 0) {
+                hasRests = true;
+            }
+            if (cq.getVrvSVG(this.containerId).querySelectorAll("." + this.primaryDeleteFlag + ":not(.rest), ." + this.secondaryDeleteFlag + ":not(.rest)").length > 0) {
+                hasNotes = true;
+            }
+            Array.from(cq.getVrvSVG(this.containerId).querySelectorAll("." + this.primaryDeleteFlag + ", ." + this.secondaryDeleteFlag)).forEach(el => {
+                if (hasNotes && hasRests) {
+                    if (!el.classList.contains("rest")) {
+                        this.selectedElements.push(el);
+                    }
+                }
+                else {
+                    this.selectedElements.push(el);
+                }
+            });
+            if ((e.code === "Backspace" || e.code === "Delete") && this.selectedElements.length > 0 && this.container.querySelectorAll(".harmonyDiv").length === 0) {
+                this.deleteCallback(this.selectedElements).then(() => {
+                    this.selectedElements.length = 0;
+                    cq.getVrvSVG(this.containerId).querySelectorAll("." + this.primaryDeleteFlag + ", ." + this.secondaryDeleteFlag).forEach(el => {
+                        el.classList.remove(this.primaryDeleteFlag);
+                        el.classList.remove(this.secondaryDeleteFlag);
+                    });
+                });
+            }
+        }).bind(this);
+        this.setContainerId(containerId);
+    }
+    setListeners() {
+        // Listenere for whole SVG (maybe just layer?)
+        var notes = this.vrvSVG.querySelectorAll(".note");
+        Array.from(notes).forEach(element => {
+            element.addEventListener(action, this.clickHandler);
+        });
+        document.addEventListener("keyup", this.backSpaceHandler);
+    }
+    removeListeners() {
+        var notes = this.vrvSVG.querySelectorAll(".note");
+        Array.from(notes).forEach(element => {
+            element.removeEventListener(action, this.clickHandler);
+        });
+        document.removeEventListener("keyup", this.backSpaceHandler);
+    }
+    update() {
+        this.selectedElements = new Array;
+        this.setContainerId(this.containerId);
+        this.removeListeners();
+        this.setListeners();
+        return this;
+    }
+    /////////// GETTER/ SETTER ////////////
+    setDeleteCallback(deleteCallback) {
+        this.deleteCallback = deleteCallback;
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.container = cq.getContainer(containerId);
+        this.vrvSVG = cq.getVrvSVG(containerId);
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        return this;
+    }
+    getDeleteFlag() {
+        return this.primaryDeleteFlag;
+    }
+}
+exports.default = DeleteHandler;