vibe-editor 0.0.0

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

@@ -0,0 +1,380 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+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");
+/**
+ * Handle logic and interaction with Tabbar and Custom Toolbar.
+ * Activates and deactivates interface behavior according to selected tabbar or or custom group button.
+ * E.g. Selection is deactivated during harmonylabels are active, or Notations with keyboard and mouse are deactivated when annotations are active.
+ */
+class InsertModeHandler {
+    constructor(containerId) {
+        //For Callbacks
+        this.activateHarmonyModeFunction = (function activateHarmonyModeFunction(clicked = false) {
+            this.activateHarmonyMode(clicked);
+        }).bind(this);
+        this.firstCall = true;
+        this.isGlobal = true;
+        this.annotations = new Annotations_1.default(containerId);
+    }
+    activateInsertMode(clicked = false) {
+        var _a, _b;
+        if (this.annotationMode || this.harmonyMode) {
+            this.insertDeactivate();
+        }
+        // if (clicked) {
+        //   if (this.unselectMenuItem("clickInsert")) { return }
+        // }
+        this.container.classList.add("clickmode");
+        this.container.classList.add("textmode");
+        this.keyMode = true;
+        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)
+            .setm2s(this.m2s)
+            .setMusicProcessor(this.musicPlayer)
+            .setPhantomCursor(this.phantomNoteHandler)
+            .resetListeners();
+        this.keyModeHandler = this.keyModeHandler || new KeyModeHandler_1.default(this.containerId);
+        this.keyModeHandler
+            .setContainerId(this.containerId)
+            .setInsertCallback(this.insertCallback)
+            .setDeleteCallback(this.deleteCallback)
+            .setScoreGraph(this.scoreGraph)
+            .setm2s(this.m2s)
+            .setMusicProcessor(this.musicPlayer)
+            .resetListeners();
+        this.deleteHandler.setListeners();
+        (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.setm2s(this.m2s);
+        (_b = this.annotations) === null || _b === void 0 ? void 0 : _b.updateCanvas();
+        //this.annotations?.resetTextListeners() // annotations should also be interactable when in notation mode
+        this.activateSelectionMode();
+    }
+    activateSelectionMode() {
+        //this.insertDeactivate()
+        this.selectionHandler = new SelectionHandler_1.default(this.containerId);
+        this.selectionHandler
+            .setm2s(this.m2s)
+            .setScoreGraph(this.scoreGraph)
+            .resetListeners();
+        return this;
+    }
+    activateAnnotationMode() {
+        var _a;
+        this.insertDeactivate();
+        var that = this;
+        this.keyMode = false;
+        this.clickInsertMode = false;
+        var selectedButton = (_a = this.container.querySelector("#annotGroupKM button.selected")) === null || _a === void 0 ? void 0 : _a.id;
+        switch (selectedButton) {
+            case "harmonyAnnotButton":
+                this.activateHarmonyMode();
+                this.harmonyMode = true;
+                this.annotationMode = false;
+                break;
+            case "staticTextButton":
+            case "linkedAnnotButton":
+                this.annotationMode = true;
+                this.harmonyMode = false;
+                if (this.annotations == undefined) {
+                    this.annotations = new Annotations_1.default(this.containerId);
+                }
+                else {
+                    this.annotations.updateCanvas();
+                }
+                this.annotations
+                    .setContainerId(this.containerId)
+                    .setm2s(this.m2s)
+                    .setMusicProcessor(this.musicPlayer)
+                    .setToFront()
+                    .setMenuClickHandler();
+                break;
+        }
+    }
+    activateHarmonyMode() {
+        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()
+            .setm2s(this.m2s)
+            .setMusicProcessor(this.musicPlayer)
+            .setCurrentMEI(this.m2s.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();
+        }
+    }
+    setSMHandler() {
+        if (this.smHandler == undefined) {
+            this.smHandler = new ScoreManipulatorHandler_1.default();
+        }
+        this.smHandler
+            .setContainerId(this.containerId)
+            .setMEI(this.m2s.getCurrentMei())
+            .setMusicProcessor(this.musicPlayer)
+            .setLoadDataCallback(this.loadDataCallback)
+            .drawElements();
+        // create some more measures at start for debugging purposes
+        // if (this.firstCall) {
+        //   for (let i = 0; i < 13; i++) {
+        //     this.interactionOverlay.querySelector("#measureAdder").dispatchEvent(new MouseEvent("click"))
+        //   }
+        //   this.firstCall = false
+        // }
+        return this;
+    }
+    setListeners() {
+        var that = this;
+        Array.from(this.container.querySelectorAll(".dropdown-item, .tabBtn")).forEach(n => {
+            n.addEventListener("click", function (e) {
+                e.preventDefault();
+                switch (this.id) {
+                    case "notationTabBtn":
+                    case "articulationTabBtn":
+                    case "clickInsert":
+                        that.activateInsertMode(true);
+                        break;
+                    case "keyMode":
+                        that.activateInsertMode(true);
+                        break;
+                    case "annotationTabBtn":
+                    case "activateAnnot":
+                        that.activateAnnotationMode();
+                        break;
+                    default:
+                        that.insertDeactivate();
+                        break;
+                }
+            });
+        });
+        //events will come from Annotations Class. 
+        this.container.addEventListener("annotationButtonClicked", function (e) {
+            var t = e.target;
+            t.parentElement.querySelectorAll("button").forEach(b => b.classList.remove("selected"));
+            t.classList.add("selected");
+            that.activateAnnotationMode();
+        }, 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.m2s.setDurationNewNote(dur);
+                if (that.m2s.setMarkedNoteDurations(dur)) {
+                    MEIOperations_1.cleanUp(that.m2s.getCurrentMei());
+                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2s.getCurrentMei());
+                    that.loadDataCallback("", mei, false);
+                }
+            });
+        });
+        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.m2s.setDotsNewNote(dots);
+                if (that.m2s.setMarkedNoteDots(dots)) {
+                    MEIOperations_1.cleanUp(that.m2s.getCurrentMei());
+                    var mei = MEIConverter_1.restoreXmlIdTags(that.m2s.getCurrentMei());
+                    that.loadDataCallback("", mei, false);
+                }
+            });
+        });
+        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.keyMode)
+            this.activateInsertMode(); //this.activateClickMode();
+        if (this.annotationMode)
+            this.activateAnnotationMode();
+        if (this.harmonyMode)
+            this.activateHarmonyMode();
+        this.setSMHandler();
+        return this;
+    }
+    /////////////// GETTER/ SETTER /////////////////
+    setm2s(m2s) {
+        this.m2s = m2s;
+        //this.selectionHandler = new SelectionHandler()
+        //this.selectionHandler?.setm2s(this.m2s)
+        return this;
+    }
+    setMusicProcessor(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()
+                .setm2s(this.m2s);
+        }
+        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.vrvSVG = cq.getVrvSVG(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;
+    }
+    disableNoteInput() {
+        var _a, _b, _c;
+        (_a = this.keyModeHandler) === null || _a === void 0 ? void 0 : _a.removeListeners();
+        (_b = this.clickModeHandler) === null || _b === void 0 ? void 0 : _b.removeListeners();
+        (_c = this.selectionHandler) === null || _c === void 0 ? void 0 : _c.removeListeners();
+    }
+    enableNoteInput() {
+        var _a, _b, _c;
+        if (!(this.annotationMode || this.harmonyMode)) {
+            (_a = this.keyModeHandler) === null || _a === void 0 ? void 0 : _a.setListeners();
+            (_b = this.clickModeHandler) === null || _b === void 0 ? void 0 : _b.setListeners();
+        }
+        (_c = this.selectionHandler) === null || _c === void 0 ? void 0 : _c.setListeners();
+    }
+}
+exports.default = InsertModeHandler;