vibe-editor 0.0.4 → 0.0.6

package/src/scripts/js/{handlers/InsertModeHandler_deprecated.js → scripts/handlers/InsertModeHandler.js}

@@ -1,7 +1,6 @@
 "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");
@@ -12,8 +11,9 @@ const ScoreManipulatorHandler_1 = require("./ScoreManipulatorHandler");
 const MEIOperations_1 = require("../utils/MEIOperations");
 const cq = require("../utils/convenienceQueries");
 /**
- * Class that handles insert mode, events, and actions.
- * @deprecated
+ * 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) {
@@ -21,132 +21,89 @@ class InsertModeHandler {
         this.activateHarmonyModeFunction = (function activateHarmonyModeFunction(clicked = false) {
             this.activateHarmonyMode(clicked);
         }).bind(this);
+        this.firstCall = true;
         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;
-            }
-        }
+    activateInsertMode(clicked = false) {
+        var _a;
+        // if (this.annotationMode || this.harmonyMode) {
+        //   this.insertDeactivate()
+        // }
+        // if (clicked) {
+        //   if (this.unselectMenuItem("clickInsert")) { return }
+        // }
         this.container.classList.add("clickmode");
-        this.keyMode = false;
+        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 = this.clickModeHandler || new ClickModeHandler_1.default();
         this.clickModeHandler
             .setContainerId(this.containerId)
+            .setScoreGraph(this.scoreGraph)
             .setInsertCallback(this.insertCallback)
             .setDeleteCallback(this.deleteCallback)
             .setAnnotations(this.annotations)
-            .setM2M(this.m2m)
-            .setMusicPlayer(this.musicPlayer)
+            .setm2s(this.m2s)
+            .setMusicProcessor(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)
+            .setm2s(this.m2s)
+            .setMusicProcessor(this.musicPlayer)
             .resetListeners();
-        if (currNodeId != undefined) {
-            this.keyModeHandler.setCurrentNodeScoreGraph(currNodeId);
-        }
-        // if(typeof this.selectionHandler !== "undefined"){
-        //   this.selectionHandler.removeListeners()
-        // }
         this.deleteHandler.setListeners();
+        (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.setm2s(this.m2s);
+        //this.annotations?.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.setM2M(this.m2m);
-        //this.selectionHandler.setHarmonyHandler(this.harmonyHandler)
-        //this.deleteHandler.setListeners()
-        return this;
-    }
-    activateAnnotationMode(clicked = false) {
+    activateAnnotationMode() {
+        var _a;
         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();
+        var that = this;
         this.keyMode = false;
         this.clickInsertMode = false;
-        this.annotationMode = true;
-        this.harmonyMode = false;
-    }
-    activateHarmonyMode(clicked = false) {
-        try {
-            if (clicked) {
-                if (this.unselectMenuItem("activateHarm")) {
-                    return;
+        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.container.classList.remove("harmonyMode");
+                this.annotationMode = true;
+                this.harmonyMode = false;
+                if (this.annotations == undefined) {
+                    this.annotations = new Annotations_1.default(this.containerId);
                 }
-            }
-        }
-        catch (_a) {
-            try {
-                var harmonyButton = this.container.querySelector("#harmonyAnnotButton");
-                if (!harmonyButton.classList.contains("selected")) {
-                    harmonyButton.classList.add("selected");
+                else {
+                    this.annotations.updateCanvas();
                 }
-            }
-            catch (e) {
-                console.error("There was a problem in activating harmonymode", e);
-                return;
-            }
+                this.annotations.setAnnotationCanvas(cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
+                this.annotations.updateLinkedTexts();
+                break;
         }
+        this.annotations
+            .setContainerId(this.containerId)
+            .setm2s(this.m2s)
+            .setMusicProcessor(this.musicPlayer)
+            //.setToFront()
+            .setListeners()
+            .setMenuClickHandler();
+    }
+    activateHarmonyMode() {
         if (this.labelHandler == undefined) {
             this.labelHandler = new LabelHandler_1.default(this.containerId);
         }
@@ -163,9 +120,9 @@ class InsertModeHandler {
             .setContainerId(this.containerId)
             .setGlobal(this.isGlobal)
             .setListeners()
-            .setM2M(this.m2m)
-            .setMusicPlayer(this.musicPlayer)
-            .setCurrentMEI(this.m2m.getCurrentMei())
+            .setm2s(this.m2s)
+            .setMusicProcessor(this.musicPlayer)
+            .setCurrentMEI(this.m2s.getCurrentMei())
             .setLoadDataCallback(this.loadDataCallback);
         //this.keyMode = false;
         //this.clickInsertMode = false;
@@ -197,7 +154,7 @@ class InsertModeHandler {
         // this.selectionHandler = undefined
         if (this.annotations != undefined) {
             this.annotations.removeListeners();
-            this.annotations.setToBack();
+            //this.annotations.setToBack()
             this.annotationMode = false;
         }
         if (this.labelHandler != undefined) {
@@ -208,38 +165,44 @@ class InsertModeHandler {
         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();
         }
+        //var activeLayer = this.container.querySelector(".activeLayer")
         this.smHandler
             .setContainerId(this.containerId)
-            .setMEI(this.m2m.getCurrentMei())
-            .setMusicPlayer(this.musicPlayer)
+            .setm2s(this.m2s)
+            .setMEI(this.m2s.getCurrentMei())
+            .setScoreGraph(this.scoreGraph)
+            .setMusicProcessor(this.musicPlayer)
             .setLoadDataCallback(this.loadDataCallback)
             .drawElements();
+        //create some more measures at start for debugging purposes
+        // if (this.firstCall) {
+        //   for (let i = 0; i < 15; 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")).forEach(n => {
+        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.activateClickMode(true);
-                        break;
                     case "keyMode":
-                        that.activateKeyMode(true);
+                        that.activateInsertMode(true);
                         break;
+                    case "annotationTabBtn":
                     case "activateAnnot":
-                        that.activateAnnotationMode(true);
-                        break;
-                    case "activateHarm":
-                        that.activateHarmonyMode(true);
+                        that.activateAnnotationMode();
                         break;
                     default:
                         that.insertDeactivate();
@@ -247,19 +210,20 @@ class InsertModeHandler {
                 }
             });
         });
+        //events will come from Annotations Class. 
         this.container.addEventListener("annotationButtonClicked", function (e) {
             var t = e.target;
-            if (t.id === "harmonyAnnotButton") {
-                that.activateHarmonyMode(true);
-            }
-            else {
-                that.activateHarmonyMode(false);
-            }
+            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 "breveNote":
+                        dur = 0.5;
+                        break;
                     case "fullNote":
                         dur = 1;
                         break;
@@ -279,14 +243,15 @@ class InsertModeHandler {
                         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.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);
                 }
             });
         });
+        //Sets dots according to button in dotGroup. If no Button is selected, the dots will be set to 0.
         Array.from(this.container.querySelectorAll("#dotGroup > *")).forEach(b => {
             b.addEventListener("click", function (e) {
                 let dots = 0;
@@ -299,10 +264,10 @@ class InsertModeHandler {
                             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.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);
                 }
             });
@@ -317,10 +282,9 @@ class InsertModeHandler {
         //reset  
         if (!this.navBarLoaded)
             this.setListeners();
-        if (this.keyMode)
-            this.activateKeyMode();
-        if (this.clickInsertMode)
-            this.activateClickMode();
+        //if(this.keyMode) this.activateKeyMode();
+        if (this.clickInsertMode || this.keyMode)
+            this.activateInsertMode(); //this.activateClickMode();
         if (this.annotationMode)
             this.activateAnnotationMode();
         if (this.harmonyMode)
@@ -328,36 +292,14 @@ class InsertModeHandler {
         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 = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
-            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;
+    setm2s(m2s) {
+        this.m2s = m2s;
         //this.selectionHandler = new SelectionHandler()
-        //this.selectionHandler?.setM2M(this.m2m)
+        //this.selectionHandler?.setm2s(this.m2s)
         return this;
     }
-    setMusicPlayer(musicPlayer) {
+    setMusicProcessor(musicPlayer) {
         this.musicPlayer = musicPlayer;
         return this;
     }
@@ -378,7 +320,7 @@ class InsertModeHandler {
             this.phantomNoteHandler
                 .setPhantomNote()
                 .setListeners()
-                .setM2M(this.m2m);
+                .setm2s(this.m2s);
         }
         return this;
     }
@@ -401,14 +343,13 @@ class InsertModeHandler {
     setContainerId(containerId) {
         this.containerId = containerId;
         this.interactionOverlay = cq.getInteractOverlay(containerId);
-        this.rootSVG = cq.getRootSVG(containerId);
+        this.vrvSVG = cq.getVrvSVG(containerId);
         this.container = document.getElementById(containerId);
         return this;
     }
     resetCanvas() {
-        if (this.annotations != undefined) {
-            this.annotations.addCanvas();
-        }
+        var _a;
+        (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.addCanvas().resetListeners();
         return this;
     }
     getAnnotations() {
@@ -420,5 +361,17 @@ class InsertModeHandler {
     getPhantomNoteHandler() {
         return this.phantomNoteHandler;
     }
+    disableNoteInput() {
+        var _a, _b;
+        (_a = this.keyModeHandler) === null || _a === void 0 ? void 0 : _a.removeListeners();
+        (_b = this.clickModeHandler) === null || _b === void 0 ? void 0 : _b.removeListeners();
+    }
+    enableNoteInput() {
+        var _a, _b;
+        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();
+        }
+    }
 }
 exports.default = InsertModeHandler;