vibe-editor 0.0.0

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

@@ -0,0 +1,407 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const Cursor_1 = require("../gui/Cursor");
+const mappings_1 = require("../utils/mappings");
+const random_1 = require("../utils/random");
+const cq = require("../utils/convenienceQueries");
+const marked = "marked";
+class KeyModeHandler {
+    constructor(containerId) {
+        /**
+         * Event handler for inserting Notes
+         */
+        this.keyModeHandler = (function keyModeHandler(e) {
+            var _a;
+            if (!cq.hasActiveElement(this.containerId))
+                return;
+            if (this.musicPlayer.getIsPlaying() === true) {
+                return;
+            } // getIsPlaying could also be undefined
+            if (mappings_1.keyCodeNoteMap.has(e.code) && typeof this.cursor != undefined) {
+                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;
+                var noteExists = false;
+                var noteToDelete;
+                if (this.cursor.nextElement.classList.contains("chord")) {
+                    var chordNotes = Array.from(this.cursor.nextElement.querySelectorAll(".note"));
+                    chordNotes.forEach((n) => {
+                        var meiNote = this.m2m.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 replace = this.container.querySelector("#insertToggle").checked;
+                    this.insertCallback(newNote, replace).then(() => {
+                        this.m2m.update();
+                        this.resetListeners();
+                        var currentTargetId;
+                        if (newNote.chordElement != undefined) {
+                            currentTargetId = this.rootSVG.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);
+                        if (this.scoreGraph.getCurrentNode() != undefined) {
+                            this.cursor.definePosById(this.scoreGraph.getCurrentNode().getId());
+                        }
+                        this.musicPlayer.generateTone(newNote);
+                    }).catch(() => {
+                        //alert("your bar is too small")
+                    });
+                }
+                else {
+                    this.deleteCallback([noteToDelete]).then(() => {
+                        var _a;
+                        this.m2m.update();
+                        this.resetListeners();
+                        this.scoreGraph.setCurrentNodeById(newNote.chordElement.id);
+                        this.cursor.definePosById((_a = this.scoreGraph.getCurrentNode()) === null || _a === void 0 ? void 0 : _a.getId());
+                    });
+                }
+            }
+        }).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) {
+            var _a, _b;
+            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
+            //this.setCurrentNodeScoreGraph()
+            if (this.scoreGraph.getCurrentNode() == undefined) {
+                (_a = this.scoreGraph) === null || _a === void 0 ? void 0 : _a.setCurrentNodeById((_b = this.cursor) === null || _b === void 0 ? void 0 : _b.getNextElement().id);
+            }
+            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);
+        this.cursor = new Cursor_1.default(containerId);
+    }
+    setListeners() {
+        document.addEventListener("keydown", this.pressedHandler);
+        document.addEventListener("keyup", this.pressedHandler);
+        document.addEventListener('keydown', this.keyModeHandler);
+        document.addEventListener('keydown', this.keyInputHandler);
+        document.addEventListener("pasted", this.pastedHandler);
+        this.cursor.setClickListener();
+    }
+    removeListeners() {
+        document.removeEventListener("keydown", this.pressedHandler);
+        document.removeEventListener("keyup", this.pressedHandler);
+        document.removeEventListener('keydown', this.keyModeHandler);
+        document.removeEventListener('keydown', this.keyInputHandler);
+        document.removeEventListener("pasted", this.pastedHandler);
+        this.cursor.flashStop();
+        this.cursor.removeClickListener();
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    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;
+        //get relevant staffinfo
+        this.setCurrentNodeScoreGraph();
+        var nearestNodeId = (_a = this.scoreGraph.getCurrentNode()) === null || _a === void 0 ? void 0 : _a.getId();
+        if (nearestNodeId == undefined)
+            return;
+        var closestStaff = ((_b = this.m2m.getCurrentMei().getElementById(nearestNodeId)) === null || _b === void 0 ? void 0 : _b.closest("staff")) || this.m2m.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.m2m.getMeasureMatrix().get(closestMeasureIdx, closestStaffIdx).keysig;
+        var accids;
+        var accid;
+        if (keysig == undefined) {
+            accids = mappings_1.keysigToNotes.get(keysig);
+            accids = accids.filter((s) => { return s === pname; });
+            if (accids.length === 1) {
+                accid = keysig.charAt(1);
+            }
+        }
+        var targetChord;
+        //if(this.container.querySelector("#chordButton")?.classList.contains("selected")){
+        if (this.shiftDown) {
+            targetChord = this.rootSVG.querySelector("#" + nearestNodeId);
+            if ((targetChord === null || targetChord === void 0 ? void 0 : targetChord.closest(".chord")) !== null) {
+                targetChord = targetChord.closest(".chord");
+            }
+        }
+        var relPosX = this.cursor.isBOL() ? "left" : "right";
+        this.setContainerId(this.containerId);
+        var newNote = {
+            pname: pname,
+            id: random_1.uuidv4(),
+            dur: this.m2m.getDurationNewNote(),
+            dots: this.m2m.getDotsNewNote(),
+            oct: oct,
+            keysig: keysig,
+            accid: accid,
+            nearestNoteId: nearestNodeId,
+            relPosX: relPosX,
+            staffId: this.rootSVG.querySelector("#" + nearestNodeId).closest(".staff").id,
+            chordElement: targetChord,
+            rest: this.container.querySelector("#pauseNote").classList.contains("selected")
+        };
+        return newNote;
+    }
+    /**
+     * Navigate through Scoregraph with Arrow Keys
+     * @param direction Key Code for Arrows
+     */
+    navigateCursor(direction) {
+        var _a, _b, _c, _d, _e;
+        var prevNode = this.scoreGraph.getCurrentNode();
+        var container = document.getElementById(this.containerId);
+        this.rootSVG.querySelectorAll(".marked").forEach(m => m.classList.remove("marked"));
+        var cbs = (_a = container.querySelector("#chordButton")) === null || _a === void 0 ? void 0 : _a.classList.contains("selected");
+        if (cbs) {
+            this.scoreGraph.nextClass(["chord", "note"], direction);
+        }
+        else {
+            switch (direction) {
+                case "ArrowLeft":
+                    (_b = document.querySelectorAll(".lastAdded")) === null || _b === void 0 ? void 0 : _b.forEach(la => la.classList.remove("lastAdded"));
+                    this.scoreGraph.nextLeft();
+                    break;
+                case "ArrowRight":
+                    (_c = document.querySelectorAll(".lastAdded")) === null || _c === void 0 ? void 0 : _c.forEach(la => la.classList.remove("lastAdded"));
+                    this.scoreGraph.nextRight();
+                    break;
+                // case "ArrowUp":
+                //   this.scoreGraph.nextUp()
+                //   break;
+                // case "ArrowDown":
+                //   this.scoreGraph.nextDown()
+                //   break;
+            }
+        }
+        if (this.scoreGraph.getCurrentNode() == undefined)
+            return;
+        (_d = this.rootSVG.querySelector("#" + prevNode.getId())) === null || _d === void 0 ? void 0 : _d.classList.remove("marked");
+        this.cursor.definePosById(this.scoreGraph.getCurrentNode().getId());
+        (_e = this.rootSVG.querySelector("#" + this.scoreGraph.getCurrentNode().getId())) === null || _e === void 0 ? void 0 : _e.classList.add("marked");
+        if (this.scoreGraph.getCurrentNode().getId().indexOf("BOL") === -1) {
+            this.setCurrentNodeScoreGraph(this.scoreGraph.getCurrentNode().getId());
+        }
+    }
+    // navigateSelection(direction: string){
+    //   if(typeof this.startSelect === "undefined"){
+    //     this.startSelect = document.getElementById(this.scoreGraph.getCurrentNode().getId()).getBoundingClientRect()
+    //   }
+    //   this.navigateCursor(direction)
+    //   if(this.selectRect == undefined){
+    //     this.selectRect = document.createElementNS(c._SVGNS_, "rect")
+    //     this.selectRect.setAttribute("id", "keyModeSelectRect")
+    //     document.getElementById("canvasG").appendChild(this.selectRect)
+    //   }
+    //   var cursorPos = this.cursor.getPos() //document.getElementById("cursor").getBoundingClientRect()
+    //   var startSelectX = coord.adjustToPage(this.startSelect.left, "x")
+    //   var cursorX = cursorPos.x 
+    //   var startSelectY = coord.adjustToPage(this.startSelect.top, "y") + window.pageYOffset
+    //   var cursorY = cursorPos.y //+ window.pageYOffset
+    //   if(cursorX < startSelectX){ // draw rect to right
+    //     this.selectRect.setAttribute("x", cursorX.toString())
+    //     this.selectRect.setAttribute("width",  Math.abs(cursorX - startSelectX).toString())
+    //   }else{ // else right
+    //     this.selectRect.setAttribute("x", startSelectX.toString())
+    //     this.selectRect.setAttribute("width",  Math.abs(coord.adjustToPage(this.startSelect.left, "x") - cursorX).toString())
+    //   }
+    //   if(cursorY < startSelectY){ // draw rect to top
+    //     this.selectRect.setAttribute("y", cursorY.toString())
+    //     //this.selectRect.setAttribute("height", Math.abs(cursorPos.y - coord.adjustToPage(this.startSelect.top, "y")).toString())
+    //     this.selectRect.setAttribute("height", Math.abs(cursorY - startSelectY).toString())
+    //     //console.log(cursorY, startSelectY,  this.selectRect.getAttribute("height"))
+    //   }else{ // else bottom
+    //     this.selectRect.setAttribute("y", startSelectY.toString())
+    //     this.selectRect.setAttribute("height",  Math.abs(coord.adjustToPage(this.startSelect.bottom, "y") - cursorY).toString())
+    //     //this.selectRect.setAttribute("height",  Math.abs(coord.adjustToPage(this.startSelect.top, "y") - coord.adjustToPage(cursorPos.y, "y")).toString())
+    //     //console.log(cursorY, startSelectY, this.selectRect.getAttribute("height"))
+    //   }
+    //   var rectBBox = this.selectRect.getBoundingClientRect()
+    //   var rx = rectBBox.x + window.pageXOffset //accomodate for scrolling
+    //   var ry = rectBBox.y + window.pageYOffset
+    //   this.m2m.getNoteBBoxes().forEach(bb => {
+    //     var note = document.getElementById(bb.id)
+    //     let stem = note.querySelector(".stem") as HTMLElement
+    //     if( bb.x >= rx && 
+    //         bb.x <= rx + rectBBox.width &&
+    //         bb.y >= ry &&
+    //         bb.y <= ry + rectBBox.height) {
+    //             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)
+    //             }
+    //         }else{
+    //             note.classList.remove(marked)
+    //             if(stem !== null) stem.classList.remove(marked)
+    //             var chord = note.closest(".chord")
+    //             if(chord !== null) chord.classList.remove(marked)
+    //         }
+    //   })
+    // }
+    /**
+     * End selection in Keyboardmode
+     */
+    endSelection() {
+        this.startSelect = undefined;
+        if (this.selectRect !== null && typeof this.selectRect !== "undefined") {
+            this.selectRect.remove();
+            this.rootSVG.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);
+        }
+        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.rootSVG.querySelector("#" + this.scoreGraph.getCurrentNode().getRight().getId())
+            //break;
+            case "Backspace":
+                elementToDelete = this.rootSVG.querySelector("#" + this.scoreGraph.getCurrentNode().getId());
+                if (this.scoreGraph.getCurrentNode().isLayer()) {
+                    elementToDelete = this.rootSVG.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.rootSVG.querySelector(".marked") === null){
+        //   this.deleteCallback([elementToDelete]).then(() => {
+        //     this.m2m.update();
+        //     this.resetListeners()
+        //     this.cursor.definePosById(currNodeId)
+        //   })
+        // }
+    }
+    ///// GETTER / SETTER////////////////
+    setM2M(m2m) {
+        this.m2m = m2m;
+        this.cursor.setM2M(m2m);
+        return this;
+    }
+    setMusicPlayer(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.rootSVG = cq.getRootSVG(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;