vibe-editor 0.0.3 → 0.0.5

package/src/scripts/js/{handlers/ModHandler.js → scripts/handlers/CustomToolbarHandler.js}

@@ -1,20 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const constants_1 = require("../constants");
-const random_1 = require("../utils/random");
 const meiConverter = require("../utils/MEIConverter");
 const meiOperation = require("../utils/MEIOperations");
 const cq = require("../utils/convenienceQueries");
-const modSelector = ".slur, .tie, .accid";
+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 ModHandler {
+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();
@@ -35,6 +38,7 @@ class ModHandler {
             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");
@@ -43,21 +47,22 @@ class ModHandler {
         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.articButtons = Array.from(this.container.querySelectorAll("#articGroup .btn")); //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));
-        }
+        // 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);
         });
@@ -67,6 +72,7 @@ class ModHandler {
         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 => {
@@ -81,6 +87,16 @@ class ModHandler {
         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
@@ -93,45 +109,13 @@ class ModHandler {
         if (markedElements.length <= 1) {
             return;
         }
-        var makeSlur = markedElements.length > 2;
+        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);
-        var leftpname = leftMeiElement.getAttribute("pname");
-        var leftoct = leftMeiElement.getAttribute("oct");
-        var leftAccid = leftMeiElement.getAttribute("accid") || leftMeiElement.getAttribute("accid.ges");
-        var rightpname = rightMeiElement.getAttribute("pname");
-        var rightoct = rightMeiElement.getAttribute("oct");
-        var rightAccid = rightMeiElement.getAttribute("accid") || rightMeiElement.getAttribute("accid.ges");
-        if (!(leftpname === rightpname && leftoct === rightoct && leftAccid === rightAccid)) {
-            makeSlur = true;
-        }
-        //}
-        var connections = this.currentMEI.querySelectorAll("tie, slur");
-        var deleted = false;
-        connections.forEach(c => {
-            var sid = c.getAttribute("startid").replace("#", "");
-            var eid = c.getAttribute("endid").replace("#", "");
-            if (sid === leftId && eid === rightId) {
-                c.remove();
-                deleted = true;
-            }
-        });
-        if (!deleted) {
-            var tieElement;
-            if (makeSlur) {
-                tieElement = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "slur");
-            }
-            else {
-                tieElement = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "tie");
-            }
-            tieElement.setAttribute("startid", "#" + leftId);
-            tieElement.setAttribute("endid", "#" + rightId);
-            tieElement.setAttribute("id", random_1.uuidv4());
-            this.currentMEI.getElementById(leftId).closest("measure").append(tieElement);
-        }
+        meiOperation.connectNotes(leftMeiElement, rightMeiElement, makeSlur);
         var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
         this.loadDataCallback("", mei, false);
     }
@@ -207,44 +191,46 @@ class ModHandler {
                 oldBeam.remove();
             }
             meiOperation.cleanUp(this.currentMEI);
-            var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+            const mei = meiConverter.restoreXmlIdTags(this.currentMEI);
             this.loadDataCallback("", mei, false);
         }
     }
     /**
-     * Alter Notes (accid) according to button.
+     * Alter Notes (accid) according to button. When Button is not Selected,
      * @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;
+        const target = e.target;
+        var accidSig = "n";
+        if (target.classList.contains("selected")) {
+            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);
+        const mei = meiConverter.restoreXmlIdTags(this.currentMEI);
         meiOperation.adjustAccids(mei);
         this.loadDataCallback("", mei, false);
     }
@@ -255,6 +241,8 @@ class ModHandler {
     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();
@@ -308,4 +296,4 @@ class ModHandler {
         return this;
     }
 }
-exports.default = ModHandler;
+exports.default = CustomToolbarHandler;

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

@@ -0,0 +1,372 @@
+"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 only in active Layer (only monophonic copies are possible right now)
+     * @param e
+     */
+    copyHandler(e) {
+        if (!this.hasContainerFocus())
+            return;
+        e.preventDefault();
+        this.copiedIds = new Array();
+        cq.getContainer(this.containerId).querySelectorAll(".activeLayer .marked").forEach(m => {
+            this.copiedIds.push(m.id);
+        });
+        this.copiedIds.filter(n => n); //undefined and null Elements will be excluded
+        console.log("Copied", this.copiedIds);
+    }
+    /**
+     * paste marked Elements
+     * @param e
+     */
+    pasteHandler(e) {
+        var _a, _b;
+        //if(!this.hasContainerFocus()) return
+        //e.preventDefault()
+        const 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 && pastePosition) {
+            const pasteResult = meiOperation.paste(this.copiedIds, pastePosition, this.currentMEI);
+            this.currentMEI = pasteResult[0];
+            const lastId = pasteResult[1];
+            const mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+            this.loadDataCallback("", mei, false).then(mei => {
+                //Tell everyone that a past just occured to readjust certain elements e.g.
+                const 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() {
+        if (!document.getElementById(this.containerId))
+            return false;
+        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/scripts/handlers/Handler.js

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