vibe-editor 0.0.3 → 0.0.5

package/src/scripts/js/scripts/handlers/KeyModeHandler.js

@@ -0,0 +1,405 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const mappings_1 = require("../utils/mappings");
+const random_1 = require("../utils/random");
+const cq = require("../utils/convenienceQueries");
+const meiOperation = require("../utils/MEIOperations");
+const marked = "marked";
+class KeyModeHandler {
+    constructor(containerId) {
+        /**
+         * Event handler for inserting Notes
+         */
+        this.noteInputHandler = (function noteInputHandler(e) {
+            this.noteInput(e);
+        }).bind(this);
+        this.midiHandler = (function midiHandler(e) {
+            e.preventDefault();
+            this.midiInput(e.detail);
+        }).bind(this);
+        this.pressedHandler = (function pressedHandler(e) {
+            this.assignKeys(e);
+        }).bind(this);
+        /**
+         * Event Handler for any Keyboard input (except inserting)
+         */
+        this.keyInputHandler = (function keyInputHandler(e) {
+            if (!cq.hasActiveElement(this.containerId))
+                return;
+            if (e.ctrlKey || e.metaKey)
+                return; //prevent confusion with global keyboard functionalities
+            if (this.interactionOverlay.querySelector("div[contenteditable=true]") !== null)
+                return; // prevent navigating in scrore, when label editor is open
+            if (this.scoreGraph.getCurrentNode() == undefined)
+                return;
+            if (e.shiftKey && e.key.includes("Arrow")) {
+                e.preventDefault();
+                this.navigateSelection(e.key);
+            }
+            else if (e.key.includes("Arrow")) {
+                e.preventDefault();
+                this.endSelection();
+                this.navigateCursor(e.key);
+            }
+            else if (["Delete", "Backspace"].indexOf(e.key) > -1) {
+                e.preventDefault();
+                //this.deleteByKey(e.key)
+            }
+        }).bind(this);
+        /**
+         * Set Cursor to new position after pasting
+         */
+        this.pastedHandler = (function pastedHandler(e) {
+            console.log("PASTED ", e);
+            this.scoreGraph.setCurrentNodeById(e.detail);
+            //this.cursor.definePosById(this.scoreGraph.getCurrentNode()?.getId())
+        }).bind(this);
+        this.setContainerId(containerId);
+    }
+    setListeners() {
+        document.addEventListener("keydown", this.pressedHandler);
+        document.addEventListener("keyup", this.pressedHandler);
+        document.addEventListener('keydown', this.noteInputHandler);
+        document.addEventListener('keydown', this.keyInputHandler);
+        document.addEventListener("pasted", this.pastedHandler);
+        document.addEventListener("midiin", this.midiHandler);
+    }
+    removeListeners() {
+        document.removeEventListener("keydown", this.pressedHandler);
+        document.removeEventListener("keyup", this.pressedHandler);
+        document.removeEventListener('keydown', this.noteInputHandler);
+        document.removeEventListener('keydown', this.keyInputHandler);
+        document.removeEventListener("pasted", this.pastedHandler);
+        document.removeEventListener("midiin", this.midiHandler);
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    noteInput(e) {
+        var _a;
+        if (e.shiftKey || e.metaKey)
+            return;
+        if (this.container.querySelector("[contenteditable=true]"))
+            return;
+        var currentNode = this.scoreGraph.getCurrentNode();
+        if (document.getElementById(currentNode.getId()) === null)
+            return;
+        if (!cq.hasActiveElement(this.containerId))
+            return;
+        if (this.musicPlayer.getIsPlaying() === true) {
+            return;
+        } // getIsPlaying could also be undefined
+        if (mappings_1.keyCodeNoteMap.has(e.code)) {
+            e.preventDefault();
+            var pname = mappings_1.keyCodeNoteMap.get(e.code);
+            var oct = mappings_1.octToNum.get((_a = this.container.querySelector("#octaveGroupKM .selected")) === null || _a === void 0 ? void 0 : _a.id) || "4";
+            const newNote = this.createNewNote(pname, oct, null);
+            if (!newNote)
+                return;
+            this.processNewNote(newNote);
+        }
+    }
+    processNewNote(newNote) {
+        var _a, _b, _c, _d, _e, _f;
+        var currentNode = this.scoreGraph.getCurrentNode();
+        var noteExists = false;
+        var noteToDelete;
+        if (document.getElementById(currentNode.getId()).closest(".chord") !== null) {
+            var chordNotes = Array.from(document.getElementById(currentNode.getId()).closest(".chord").querySelectorAll(".note"));
+            chordNotes.forEach((n) => {
+                var meiNote = this.m2s.getCurrentMei().getElementById(n.id);
+                var sameOct = meiNote.getAttribute("oct") === newNote.oct;
+                var samePname = meiNote.getAttribute("pname") === newNote.pname;
+                if (sameOct && samePname) {
+                    noteExists = true;
+                    noteToDelete = n;
+                }
+            });
+        }
+        if (!noteExists) {
+            var currentStaff = this.m2s.getCurrentMei().getElementById(newNote.staffId);
+            // check if new note should replace a rest
+            if (this.scoreGraph.getCurrentNode().getDocElement().classList.contains("rest")) {
+                newNote.relPosX = "left";
+                newNote.nearestNoteId = this.scoreGraph.getCurrentNode().getId();
+            }
+            else if (!((_a = this.scoreGraph.getCurrentNode()) === null || _a === void 0 ? void 0 : _a.getDocElement().classList.contains("mRest")) && this.scoreGraph.lookUp(["note", "rest", "mRest"], "right") == null && newNote.chordElement == undefined) {
+                //check if new Measure must be created 
+                meiOperation.addMeasure(this.m2s.getCurrentMei());
+                var staffN = currentStaff.getAttribute("n");
+                var layerN = this.m2s.getCurrentMei().getElementById(newNote.layerId).getAttribute("n");
+                newNote.staffId = currentStaff.closest("measure").nextElementSibling.querySelector(`staff[n='${staffN}']`).id;
+                newNote.layerId = currentStaff.closest("measure").nextElementSibling.querySelector(`staff[n='${staffN}'] layer[n='${layerN}']`).id;
+                newNote.relPosX = "left";
+                newNote.nearestNoteId = this.m2s.getCurrentMei().querySelector("#" + newNote.staffId).querySelector(`layer[n='${layerN}'] > mRest`).id;
+            }
+            else {
+                //or if ne note must be rendered into the next bar
+                var oldStaffId = newNote.staffId;
+                if (this.m2s.getCurrentMei().querySelector("#" + newNote.nearestNoteId) === null)
+                    return;
+                if (this.m2s.getCurrentMei().querySelector("#" + newNote.nearestNoteId).tagName !== "mRest") {
+                    // newNote.staffId = this.m2s.getCurrentMei().getElementById(this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")?.getId())?.closest("staff").id || newNote.staffId
+                    // newNote.layerId = this.m2s.getCurrentMei().getElementById(this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")?.getId())?.closest("layer").id || newNote.layerId
+                    newNote.staffId = ((_c = this.m2s.getCurrentMei().getElementById((_b = this.scoreGraph.lookUp(["note", "rest", "mRest"], "right")) === null || _b === void 0 ? void 0 : _b.getId())) === null || _c === void 0 ? void 0 : _c.closest("staff").id) || newNote.staffId;
+                    newNote.layerId = ((_e = this.m2s.getCurrentMei().getElementById((_d = this.scoreGraph.lookUp(["note", "rest", "mRest"], "right")) === null || _d === void 0 ? void 0 : _d.getId())) === null || _e === void 0 ? void 0 : _e.closest("layer").id) || newNote.layerId;
+                }
+                if (oldStaffId !== newNote.staffId) {
+                    newNote.relPosX = "left";
+                    newNote.nearestNoteId = (_f = this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")) === null || _f === void 0 ? void 0 : _f.getId(); //this.scoreGraph.getCurrentNode()?.getId()
+                }
+            }
+            this.insertCallback(newNote, true).then(() => {
+                //this.m2s.update();
+                this.resetListeners();
+                var currentTargetId;
+                if (newNote.chordElement != undefined) {
+                    currentTargetId = this.vrvSVG.querySelector("#" + newNote.chordElement.id).closest(".chord").id; // new chord with own ID is created, if note is added
+                }
+                else {
+                    currentTargetId = newNote.id;
+                }
+                this.scoreGraph.setCurrentNodeById(currentTargetId);
+                this.musicPlayer.generateTone(newNote);
+            }).catch(() => {
+                //alert("your bar is too small")
+            });
+        }
+        else {
+            this.deleteCallback([noteToDelete]).then(() => {
+                var _a;
+                //this.m2s.update();
+                this.resetListeners();
+                this.scoreGraph.setCurrentNodeById((_a = newNote.chordElement) === null || _a === void 0 ? void 0 : _a.id);
+            });
+        }
+    }
+    midiInput(midiArray) {
+        var [_, midiNum, velocity] = midiArray;
+        var noteName = mappings_1.midiToNote.get(midiNum);
+        if (noteName == undefined)
+            return;
+        if (velocity === 0)
+            return;
+        var pname = noteName.slice(0, 1);
+        var accid = noteName.length === 3 ? noteName.slice(1, 2) : undefined;
+        var oct = noteName.match(/\d/g)[0].toString();
+        var newNote = this.createNewNote(pname, oct, { accid: accid });
+        if (newNote == undefined)
+            return;
+        this.processNewNote(newNote);
+    }
+    assignKeys(e) {
+        var b = false;
+        if (e.type === "keydown") {
+            b = true;
+        }
+        else if (e.type === "keyup") {
+            b = false;
+        }
+        switch (e.key) {
+            case "Shift":
+                this.shiftDown = b;
+                break;
+        }
+    }
+    /**
+     * create a newNote
+     * @param pname pitch name
+     * @param oct octave
+     * @param options
+     * @returns
+     */
+    createNewNote(pname, oct, options) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        //get relevant staffinfo
+        // var nearestNodeId = this.scoreGraph.getCurrentNode()?.getId()
+        // if (nearestNodeId == undefined) return
+        if (!this.scoreGraph.getCurrentNode())
+            return;
+        function getLastActiveNode(cid, sg) {
+            var activeNotes = Array.from(cq.getContainer(cid).querySelectorAll(".activeLayer > .note")).reverse();
+            var hasNotes = activeNotes.length > 0;
+            var lastNode = cq.getContainer(cid).querySelector(".activeLayer > :is(.lastAdded, .rest, .mRest");
+            if (hasNotes) {
+                lastNode = activeNotes[0];
+            }
+            sg.setCurrentNodeById(lastNode.id);
+            return lastNode.id;
+        }
+        var nearestNodeId = this.scoreGraph.getCurrentNode().getDocElement().closest(".activeLayer") ? this.scoreGraph.getCurrentNode().getId() : getLastActiveNode(this.containerId, this.scoreGraph);
+        var closestStaff = ((_a = this.m2s.getCurrentMei().getElementById(nearestNodeId)) === null || _a === void 0 ? void 0 : _a.closest("staff")) || this.m2s.getCurrentMei().querySelector("measure > staff"); //asume first measure first staff
+        var closestMeasure = closestStaff.closest("measure");
+        var closestStaffIdx = parseInt(closestStaff.getAttribute("n")) - 1;
+        var closestMeasureIdx = parseInt(closestMeasure.getAttribute("n")) - 1;
+        var keysig = this.m2s.getMeasureMatrix().get(closestMeasureIdx, closestStaffIdx).keysig;
+        var accids = mappings_1.keysigToNotes.get(keysig);
+        var accid;
+        var artic;
+        if (!options) {
+            accid = mappings_1.accidButtonToAttr.get((_b = cq.getContainer(this.containerId).querySelector("#accidGroup > button.selected")) === null || _b === void 0 ? void 0 : _b.id); // try first to create a new accid based on the tabbar state
+            artic = mappings_1.articButtonToAttr.get((_c = cq.getContainer(this.containerId).querySelector("#articGroup > button.selected")) === null || _c === void 0 ? void 0 : _c.id);
+            if (!accid) {
+                accids = accids.filter((s) => { return s === pname; });
+                if (accids.length === 1) {
+                    accid = keysig.charAt(1);
+                }
+            }
+        }
+        if (options === null || options === void 0 ? void 0 : options.accid) {
+            accid = options.accid;
+            //should the note be enharmonically swapped?
+            //midi inputs are only given as sharps
+            var increment = pname === "g" ? -6 : 1; //- 6 is for jumping back to a; oct stays the same
+            if (keysig.includes("f") && accids.includes(String.fromCharCode(pname.charCodeAt(0) + increment))) {
+                accid = "f";
+                pname = String.fromCharCode(pname.charCodeAt(0) + increment);
+            }
+        }
+        if (options === null || options === void 0 ? void 0 : options.artic) {
+            artic = options.artic; // TODO: Which format will be set?
+        }
+        var targetChord;
+        //if(this.container.querySelector("#chordButton")?.classList.contains("selected")){
+        if (this.shiftDown) {
+            targetChord = this.vrvSVG.querySelector("#" + nearestNodeId);
+            if ((targetChord === null || targetChord === void 0 ? void 0 : targetChord.closest(".chord")) !== null) {
+                targetChord = targetChord.closest(".chord");
+            }
+        }
+        this.setContainerId(this.containerId);
+        var newNote = {
+            pname: pname,
+            id: random_1.uuidv4(),
+            dur: this.m2s.getDurationNewNote(),
+            dots: this.m2s.getDotsNewNote(),
+            oct: oct,
+            keysig: keysig,
+            accid: accid,
+            artic: artic,
+            nearestNoteId: nearestNodeId,
+            relPosX: "right",
+            staffId: (_d = this.vrvSVG.querySelector("#" + nearestNodeId)) === null || _d === void 0 ? void 0 : _d.closest(".staff").id,
+            layerId: (_f = this.container.querySelector(`#${(_e = this.vrvSVG.querySelector("#" + nearestNodeId)) === null || _e === void 0 ? void 0 : _e.closest(".staff").id} .activeLayer`)) === null || _f === void 0 ? void 0 : _f.id,
+            chordElement: targetChord,
+            rest: (_g = this.container.querySelector("#pauseNote")) === null || _g === void 0 ? void 0 : _g.classList.contains("selected")
+        };
+        return newNote;
+    }
+    /**
+     * Navigate through Scoregraph with Arrow Keys
+     * @param direction Key Code for Arrows
+     */
+    navigateCursor(direction) {
+        var _a, _b, _c;
+        var prevNode = this.scoreGraph.getCurrentNode();
+        switch (direction) {
+            case "ArrowLeft":
+                (_a = document.querySelectorAll(".lastAdded")) === null || _a === void 0 ? void 0 : _a.forEach(la => la.classList.remove("lastAdded"));
+                this.scoreGraph.nextLeft();
+                break;
+            case "ArrowRight":
+                (_b = document.querySelectorAll(".lastAdded")) === null || _b === void 0 ? void 0 : _b.forEach(la => la.classList.remove("lastAdded"));
+                this.scoreGraph.nextRight();
+                break;
+            default:
+                return;
+        }
+        if (this.scoreGraph.getCurrentNode() == undefined)
+            return;
+        this.container.querySelectorAll(".marked").forEach(m => m.classList.remove("marked"));
+        (_c = this.container.querySelector("#" + prevNode.getId())) === null || _c === void 0 ? void 0 : _c.classList.remove("lastAdded");
+        var currEl = this.container.querySelector("#" + this.scoreGraph.getCurrentNode().getId());
+        currEl.classList.add("marked");
+        if (currEl.closest(".chord") !== null) {
+            currEl.querySelectorAll(".note, .notehead").forEach(n => n.classList.add("marked"));
+        }
+    }
+    /**
+     * End selection in Keyboardmode
+     */
+    endSelection() {
+        this.startSelect = undefined;
+        if (this.selectRect !== null && typeof this.selectRect !== "undefined") {
+            this.selectRect.remove();
+            this.vrvSVG.querySelectorAll(".marked").forEach(m => {
+                m.classList.remove("marked");
+            });
+        }
+        this.selectRect = undefined;
+    }
+    /**
+     *
+     * @param elementId Id of the current Element to be set in the ScoreGrap
+     */
+    setCurrentNodeScoreGraph(elementId = null) {
+        this.scoreGraph.setCurrentNodeById(elementId);
+        return this;
+    }
+    /**
+     * Delete next element depending on Keyboad input (Backspace: left, Delete: right)
+     * @param key "Backspace" or "Delete"
+     */
+    deleteByKey(key) {
+        var _a, _b;
+        var elementToDelete;
+        var currNodeId;
+        var isFocusedChord = ((_a = this.container.querySelector("#chordButton")) === null || _a === void 0 ? void 0 : _a.classList.contains("selected")) ? true : false;
+        if (isFocusedChord) {
+            key = "Backspace";
+        }
+        switch (key) {
+            case "Delete":
+            //elementToDelete = this.vrvSVG.querySelector("#" + this.scoreGraph.getCurrentNode().getRight().getId())
+            //break;
+            case "Backspace":
+                elementToDelete = this.vrvSVG.querySelector("#" + this.scoreGraph.getCurrentNode().getId());
+                if (this.scoreGraph.getCurrentNode().isLayer()) {
+                    elementToDelete = this.vrvSVG.querySelector("#" + this.scoreGraph.getCurrentNode().getLeft().getId());
+                    this.navigateCursor("ArrowLeft");
+                }
+                if (!((_b = this.scoreGraph.getCurrentNode().getLeft()) === null || _b === void 0 ? void 0 : _b.isBOL())) {
+                    this.navigateCursor("ArrowLeft");
+                }
+                else {
+                    this.navigateCursor("ArrowRight");
+                }
+                break;
+        }
+        currNodeId = this.scoreGraph.getCurrentNode().getId();
+    }
+    ///// GETTER / SETTER////////////////
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setMusicProcessor(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        return this;
+    }
+    setScoreGraph(scoreGraph) {
+        this.scoreGraph = scoreGraph;
+        return this;
+    }
+    setCurrentMEI(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.vrvSVG = cq.getVrvSVG(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.container = document.getElementById(id);
+        return this;
+    }
+    setInsertCallback(insertCallback) {
+        this.insertCallback = insertCallback;
+        return this;
+    }
+    setDeleteCallback(deleteCallback) {
+        this.deleteCallback = deleteCallback;
+        return this;
+    }
+}
+exports.default = KeyModeHandler;