vibe-editor 0.0.0

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

@@ -0,0 +1,423 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const constants_1 = require("../constants");
+const SelectionHandler_1 = require("./SelectionHandler");
+const Annotations_1 = require("../gui/Annotations");
+const LabelHandler_1 = require("./LabelHandler");
+const KeyModeHandler_1 = require("./KeyModeHandler");
+const ClickModeHandler_1 = require("./ClickModeHandler");
+const PhantomElementHandler_1 = require("./PhantomElementHandler");
+const MEIConverter_1 = require("../utils/MEIConverter");
+const ScoreManipulatorHandler_1 = require("./ScoreManipulatorHandler");
+const MEIOperations_1 = require("../utils/MEIOperations");
+const cq = require("../utils/convenienceQueries");
+/**
+ * Class that handles insert mode, events, and actions.
+ */
+class InsertModeHandler {
+    constructor(containerId) {
+        //For Callbacks
+        this.activateHarmonyModeFunction = (function activateHarmonyModeFunction(clicked = false) {
+            this.activateHarmonyMode(clicked);
+        }).bind(this);
+        this.isGlobal = true;
+        this.annotations = new Annotations_1.default(containerId);
+    }
+    activateClickMode(clicked = false) {
+        if (this.keyMode || this.annotationMode || this.harmonyMode) {
+            this.insertDeactivate();
+        }
+        if (clicked) {
+            if (this.unselectMenuItem("clickInsert")) {
+                return;
+            }
+        }
+        this.container.classList.add("clickmode");
+        this.keyMode = false;
+        this.clickInsertMode = true;
+        this.annotationMode = false;
+        this.harmonyMode = false;
+        this.phantomNoteHandler = new PhantomElementHandler_1.default(this.containerId);
+        this.setPhantomNote();
+        this.clickModeHandler = this.clickModeHandler == undefined ? new ClickModeHandler_1.default() : this.clickModeHandler;
+        this.clickModeHandler
+            .setContainerId(this.containerId)
+            .setInsertCallback(this.insertCallback)
+            .setDeleteCallback(this.deleteCallback)
+            .setAnnotations(this.annotations)
+            .setM2M(this.m2m)
+            .setMusicPlayer(this.musicPlayer)
+            .setPhantomCursor(this.phantomNoteHandler)
+            .resetListeners();
+        // if(typeof this.selectionHandler !== "undefined"){
+        //   this.selectionHandler.removeListeners()
+        // }
+        this.deleteHandler.setListeners();
+    }
+    activateKeyMode(clicked = false) {
+        var _a;
+        if (this.clickInsertMode || this.annotationMode || this.harmonyMode) {
+            this.insertDeactivate();
+        }
+        if (clicked) {
+            if (this.unselectMenuItem("keyMode")) {
+                return;
+            }
+        }
+        this.container.classList.add("textmode");
+        this.keyMode = true;
+        this.clickInsertMode = false;
+        this.annotationMode = false;
+        this.harmonyMode = false;
+        var cursor = null;
+        if (this.keyModeHandler != undefined) {
+            cursor = this.keyModeHandler.cursor;
+        }
+        this.keyModeHandler = this.keyModeHandler || new KeyModeHandler_1.default(this.containerId);
+        var currNodeId;
+        if (((_a = this.keyModeHandler.scoreGraph) === null || _a === void 0 ? void 0 : _a.getCurrentNode()) != undefined) {
+            currNodeId = this.keyModeHandler.scoreGraph.getCurrentNode().getId();
+        }
+        this.keyModeHandler
+            .setContainerId(this.containerId)
+            .setInsertCallback(this.insertCallback)
+            .setDeleteCallback(this.deleteCallback)
+            .setScoreGraph(this.scoreGraph)
+            .setM2M(this.m2m)
+            .setMusicPlayer(this.musicPlayer)
+            .resetListeners();
+        if (currNodeId != undefined) {
+            this.keyModeHandler.setCurrentNodeScoreGraph(currNodeId);
+        }
+        // if(typeof this.selectionHandler !== "undefined"){
+        //   this.selectionHandler.removeListeners()
+        // }
+        this.deleteHandler.setListeners();
+    }
+    activateSelectionMode() {
+        //this.insertDeactivate()
+        this.selectionHandler = new SelectionHandler_1.default(this.containerId);
+        this.selectionHandler.setM2M(this.m2m);
+        //this.selectionHandler.setHarmonyHandler(this.harmonyHandler)
+        //this.deleteHandler.setListeners()
+        return this;
+    }
+    activateAnnotationMode(clicked = false) {
+        this.insertDeactivate();
+        if (clicked) {
+            if (this.unselectMenuItem("activateAnnot")) {
+                return;
+            }
+        }
+        if (this.annotations == undefined) {
+            this.annotations = new Annotations_1.default(this.containerId);
+        }
+        else {
+            this.annotations.update();
+        }
+        this.annotations
+            .setContainerId(this.containerId)
+            .setM2M(this.m2m)
+            .setMusicPlayer(this.musicPlayer)
+            .setToFront()
+            .setMenuClickHandler();
+        this.keyMode = false;
+        this.clickInsertMode = false;
+        this.annotationMode = true;
+        this.harmonyMode = false;
+    }
+    activateHarmonyMode(clicked = false) {
+        try {
+            if (clicked) {
+                if (this.unselectMenuItem("activateHarm")) {
+                    return;
+                }
+            }
+        }
+        catch (_a) {
+            try {
+                var harmonyButton = this.container.querySelector("#harmonyAnnotButton");
+                if (!harmonyButton.classList.contains("selected")) {
+                    harmonyButton.classList.add("selected");
+                }
+            }
+            catch (e) {
+                console.error("There was a problem in activating harmonymode", e);
+                return;
+            }
+        }
+        if (this.labelHandler == undefined) {
+            this.labelHandler = new LabelHandler_1.default(this.containerId);
+        }
+        //Activate/ Deactivate Global functions according to selected harmonymode
+        if (this.container.querySelector("#activateHarm.selected, #harmonyAnnotButton.selected") !== null) {
+            this.insertDeactivate();
+            this.container.classList.add("harmonyMode");
+            this.isGlobal = false;
+        }
+        else {
+            this.isGlobal = true;
+        }
+        this.labelHandler
+            .setContainerId(this.containerId)
+            .setGlobal(this.isGlobal)
+            .setListeners()
+            .setM2M(this.m2m)
+            .setMusicPlayer(this.musicPlayer)
+            .setCurrentMEI(this.m2m.getCurrentMei())
+            .setLoadDataCallback(this.loadDataCallback);
+        //this.keyMode = false;
+        //this.clickInsertMode = false;
+        //this.annotationMode = false;
+        this.harmonyMode = true;
+        return this;
+    }
+    insertDeactivate() {
+        this.container.classList.remove("textmode");
+        this.container.classList.remove("clickmode");
+        this.container.classList.remove("annotMode");
+        this.container.classList.remove("harmonyMode");
+        this.keyMode = false;
+        this.clickInsertMode = false;
+        this.harmonyMode = false;
+        this.annotationMode = false;
+        if (this.clickModeHandler != undefined) {
+            this.clickModeHandler.removeListeners();
+            this.phantomNoteHandler
+                .removeListeners()
+                .removeLines();
+        }
+        if (this.keyModeHandler != undefined) {
+            this.keyModeHandler.removeListeners();
+        }
+        // if(typeof this.selectionHandler !== "undefined"){
+        //   this.selectionHandler.removeListeners()
+        // }
+        // this.selectionHandler = undefined
+        if (this.annotations != undefined) {
+            this.annotations.removeListeners();
+            this.annotations.setToBack();
+            this.annotationMode = false;
+        }
+        if (this.labelHandler != undefined) {
+            //this.labelHandler.removeListeners()
+            this.isGlobal = true;
+            this.labelHandler.reset();
+        }
+        if (this.deleteHandler != undefined) {
+            this.deleteHandler.removeListeners();
+        }
+        //selectionnmode should be always active. 
+        //Listeners will overwritten if another mode listen same behaviour on same element (d3.js), e.g. annotation
+        this.activateSelectionMode();
+    }
+    setSMHandler() {
+        if (this.smHandler == undefined) {
+            this.smHandler = new ScoreManipulatorHandler_1.default();
+        }
+        this.smHandler
+            .setContainerId(this.containerId)
+            .setMEI(this.m2m.getCurrentMei())
+            .setMusicPlayer(this.musicPlayer)
+            .setLoadDataCallback(this.loadDataCallback)
+            .drawElements();
+    }
+    setListeners() {
+        var that = this;
+        Array.from(this.container.querySelectorAll(".dropdown-item")).forEach(n => {
+            n.addEventListener("click", function (e) {
+                e.preventDefault();
+                switch (this.id) {
+                    case "clickInsert":
+                        that.activateClickMode(true);
+                        break;
+                    case "keyMode":
+                        that.activateKeyMode(true);
+                        break;
+                    case "activateAnnot":
+                        that.activateAnnotationMode(true);
+                        break;
+                    case "activateHarm":
+                        that.activateHarmonyMode(true);
+                        break;
+                    default:
+                        that.insertDeactivate();
+                        break;
+                }
+            });
+        });
+        this.container.addEventListener("annotationButtonClicked", function (e) {
+            var t = e.target;
+            if (t.id === "harmonyAnnotButton") {
+                that.activateHarmonyMode(true);
+            }
+            else {
+                that.activateHarmonyMode(false);
+            }
+        }, true);
+        Array.from(this.container.querySelectorAll("#noteGroup > *")).forEach(b => {
+            b.addEventListener("click", function (e) {
+                let dur = 0;
+                switch (this.id) {
+                    case "fullNote":
+                        dur = 1;
+                        break;
+                    case "halfNote":
+                        dur = 2;
+                        break;
+                    case "quarterNote":
+                        dur = 4;
+                        break;
+                    case "eigthNote":
+                        dur = 8;
+                        break;
+                    case "sixteenthNote":
+                        dur = 16;
+                        break;
+                    case "thirtysecondNote":
+                        dur = 32;
+                        break;
+                }
+                that.m2m.setDurationNewNote(dur);
+                if (that.m2m.setMarkedNoteDurations(dur)) {
+                    MEIOperations_1.cleanUp(that.m2m.getCurrentMei());
+                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2m.getCurrentMei());
+                    that.loadDataCallback("", mei, false, constants_1.constants._TARGETDIVID_);
+                }
+            });
+        });
+        Array.from(this.container.querySelectorAll("#dotGroup > *")).forEach(b => {
+            b.addEventListener("click", function (e) {
+                let dots = 0;
+                if (this.classList.contains("selected")) {
+                    switch (this.id) {
+                        case "oneDot":
+                            dots = 1;
+                            break;
+                        case "twoDot":
+                            dots = 2;
+                    }
+                }
+                that.m2m.setDotsNewNote(dots);
+                if (that.m2m.setMarkedNoteDots(dots)) {
+                    MEIOperations_1.cleanUp(that.m2m.getCurrentMei());
+                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2m.getCurrentMei());
+                    that.loadDataCallback("", mei, false, constants_1.constants._TARGETDIVID_);
+                }
+            });
+        });
+        this.navBarLoaded = true;
+        return this;
+    }
+    removeListeners() {
+        // No Changes in Navbar = no remove
+    }
+    resetModes() {
+        //reset  
+        if (!this.navBarLoaded)
+            this.setListeners();
+        if (this.keyMode)
+            this.activateKeyMode();
+        if (this.clickInsertMode)
+            this.activateClickMode();
+        if (this.annotationMode)
+            this.activateAnnotationMode();
+        if (this.harmonyMode)
+            this.activateHarmonyMode();
+        this.setSMHandler();
+        return this;
+    }
+    unselectMenuItem(key) {
+        var menuitem = this.container.querySelector("#" + key);
+        var modeButton = this.container.querySelector("#insertMode");
+        if (menuitem.classList.contains("selected")) {
+            menuitem.classList.remove("selected");
+            modeButton.innerHTML = "        ";
+            modeButton.classList.add("empty");
+            this.insertDeactivate();
+            return true;
+        }
+        else {
+            this.container.querySelectorAll("#insertDropdown > a").forEach(a => {
+                if (a.id !== key) {
+                    a.classList.remove("selected");
+                }
+            });
+            menuitem.classList.add("selected");
+            modeButton.textContent = menuitem.textContent;
+            modeButton.classList.remove("empty");
+            return false;
+        }
+    }
+    /////////////// GETTER/ SETTER /////////////////
+    setM2M(m2m) {
+        this.m2m = m2m;
+        //this.selectionHandler = new SelectionHandler()
+        //this.selectionHandler?.setM2M(this.m2m)
+        return this;
+    }
+    setMusicPlayer(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        return this;
+    }
+    setScoreGraph(scoreGraph) {
+        this.scoreGraph = scoreGraph;
+        return this;
+    }
+    setDeleteHandler(deleteHandler) {
+        this.deleteHandler = deleteHandler;
+        return this;
+    }
+    setLabelHandler(labelHandler) {
+        this.labelHandler = labelHandler;
+        return this;
+    }
+    setPhantomNote() {
+        if (this.phantomNoteHandler != undefined) {
+            this.phantomNoteHandler
+                .setPhantomNote()
+                .setListeners()
+                .setM2M(this.m2m);
+        }
+        return this;
+    }
+    setInsertCallback(insertCallback) {
+        this.insertCallback = insertCallback;
+        return this;
+    }
+    setDeleteCallback(deleteCallback) {
+        this.deleteCallback = deleteCallback;
+        return this;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setUndoAnnotationStacks(arr) {
+        this.annotations.setUndoStacks(arr);
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        this.rootSVG = cq.getRootSVG(containerId);
+        this.container = document.getElementById(containerId);
+        return this;
+    }
+    resetCanvas() {
+        if (this.annotations != undefined) {
+            this.annotations.addCanvas();
+        }
+        return this;
+    }
+    getAnnotations() {
+        return this.annotations;
+    }
+    getSMHandler() {
+        return this.smHandler;
+    }
+    getPhantomNoteHandler() {
+        return this.phantomNoteHandler;
+    }
+}
+exports.default = InsertModeHandler;