vibe-editor 0.0.0

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

@@ -0,0 +1,456 @@
+"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) {
+            var _a;
+            console.log("PASTED ", e);
+            this.scoreGraph.setCurrentNodeById(e.detail);
+            this.cursor.definePosById((_a = this.scoreGraph.getCurrentNode()) === null || _a === void 0 ? void 0 : _a.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 == undefined)
+                return;
+            this.processNewNote(newNote);
+            // var noteExists: Boolean = false
+            // var noteToDelete: Element
+            // if (document.getElementById(currentNode.getId()).closest(".chord") !== null) {
+            //   var chordNotes = Array.from(document.getElementById(currentNode.getId()).closest(".chord").querySelectorAll(".note"))
+            //   chordNotes.forEach((n: Element) => {
+            //     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) {
+            //   // 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 (!this.scoreGraph.getCurrentNode()?.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 currentStaff = this.m2s.getCurrentMei().getElementById(newNote.staffId)
+            //     var staffN = currentStaff.getAttribute("n")
+            //     newNote.staffId = currentStaff.closest("measure").nextElementSibling.querySelector("staff[n=\"" + staffN + "\"]").id
+            //     newNote.relPosX = "left"
+            //     newNote.nearestNoteId = this.m2s.getCurrentMei().querySelector("#" + newNote.staffId).querySelector("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
+            //     }
+            //     if (oldStaffId !== newNote.staffId) {
+            //       newNote.relPosX = "left"
+            //       newNote.nearestNoteId = 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(() => {
+            //     //this.m2s.update();
+            //     this.resetListeners()
+            //     this.scoreGraph.setCurrentNodeById(newNote.chordElement?.id)
+            //   })
+            // }
+        }
+    }
+    processNewNote(newNote) {
+        var _a, _b, _c, _d;
+        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) {
+            // 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 currentStaff = this.m2s.getCurrentMei().getElementById(newNote.staffId);
+                var staffN = currentStaff.getAttribute("n");
+                newNote.staffId = currentStaff.closest("measure").nextElementSibling.querySelector("staff[n=\"" + staffN + "\"]").id;
+                newNote.relPosX = "left";
+                newNote.nearestNoteId = this.m2s.getCurrentMei().querySelector("#" + newNote.staffId).querySelector("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 = ((_c = this.m2s.getCurrentMei().getElementById((_b = this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")) === null || _b === void 0 ? void 0 : _b.getId())) === null || _c === void 0 ? void 0 : _c.closest("staff").id) || newNote.staffId;
+                }
+                if (oldStaffId !== newNote.staffId) {
+                    newNote.relPosX = "left";
+                    newNote.nearestNoteId = (_d = this.scoreGraph.getCurrentNode()) === null || _d === void 0 ? void 0 : _d.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;
+        //get relevant staffinfo
+        var nearestNodeId = (_a = this.scoreGraph.getCurrentNode()) === null || _a === void 0 ? void 0 : _a.getId();
+        if (nearestNodeId == undefined)
+            return;
+        var closestStaff = ((_b = this.m2s.getCurrentMei().getElementById(nearestNodeId)) === null || _b === void 0 ? void 0 : _b.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;
+        if (options === null) {
+            accids = accids.filter((s) => { return s === pname; });
+            if (accids.length === 1) {
+                accid = keysig.charAt(1);
+            }
+        }
+        else 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);
+            }
+        }
+        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,
+            nearestNoteId: nearestNodeId,
+            relPosX: "right",
+            staffId: (_c = this.vrvSVG.querySelector("#" + nearestNodeId)) === null || _c === void 0 ? void 0 : _c.closest(".staff").id,
+            chordElement: targetChord,
+            rest: (_d = this.container.querySelector("#pauseNote")) === null || _d === void 0 ? void 0 : _d.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) {
+        // if(this.scoreGraph.getCurrentNode() == undefined || elementId === null){
+        //   var nextEl = this.cursor.getNextElement()
+        //   if(nextEl == undefined) return
+        //   if(nextEl.classList.contains("staff")){
+        //     nextEl = nextEl.querySelector(".layer")
+        //   }
+        //   this.scoreGraph.setCurrentNodeById(nextEl.id)
+        // }else if(elementId !== null){
+        //   this.scoreGraph.setCurrentNodeById(elementId)
+        // }
+        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();
+        // if(this.vrvSVG.querySelector(".marked") === null){
+        //   this.deleteCallback([elementToDelete]).then(() => {
+        //     this.m2s.update();
+        //     this.resetListeners()
+        //     this.cursor.definePosById(currNodeId)
+        //   })
+        // }
+    }
+    ///// 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;