vibe-editor 0.0.4 → 0.0.6

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

@@ -1,407 +0,0 @@
-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;