vibe-editor 0.0.0 → 0.0.1

package/src/scripts/js/handlers/CustomToolbarHandler.js

@@ -191,44 +191,46 @@ class CustomToolbarHandler {
                 oldBeam.remove();
             }
             meiOperation.cleanUp(this.currentMEI);
-            var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+            const mei = meiConverter.restoreXmlIdTags(this.currentMEI);
             this.loadDataCallback("", mei, false);
         }
     }
     /**
-     * Alter Notes (accid) according to button.
+     * Alter Notes (accid) according to button. When Button is not Selected,
      * @param e
      * @returns
      */
     alterNotes(e) {
-        var target = e.target;
-        var accidSig;
-        switch (target.id) {
-            case "alterUp":
-                accidSig = "s";
-                break;
-            case "alterDown":
-                accidSig = "f";
-                break;
-            case "alterDUp":
-                accidSig = "ss";
-                break;
-            case "alterDDown":
-                accidSig = "ff";
-                break;
-            case "alterNeutral":
-                accidSig = "n";
-                break;
-            default:
-                console.error(target.id, "No such option for accid alteration");
-                return;
+        const target = e.target;
+        var accidSig = "n";
+        if (target.classList.contains("selected")) {
+            switch (target.id) {
+                case "alterUp":
+                    accidSig = "s";
+                    break;
+                case "alterDown":
+                    accidSig = "f";
+                    break;
+                case "alterDUp":
+                    accidSig = "ss";
+                    break;
+                case "alterDDown":
+                    accidSig = "ff";
+                    break;
+                case "alterNeutral":
+                    accidSig = "n";
+                    break;
+                default:
+                    console.error(target.id, "No such option for accid alteration");
+                    return;
+            }
         }
         this.vrvSVG.querySelectorAll(".note.marked").forEach(nm => {
             var meiElement = this.currentMEI.getElementById(nm.id);
             meiElement.setAttribute("accid", accidSig);
             meiElement.removeAttribute("accid.ges");
         });
-        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        const mei = meiConverter.restoreXmlIdTags(this.currentMEI);
         meiOperation.adjustAccids(mei);
         this.loadDataCallback("", mei, false);
     }

package/src/scripts/js/handlers/GlobalKeyboardHandler.js

@@ -152,7 +152,7 @@ class GlobalKeyboardHandler {
         });
     }
     /**
-     * Copy marked Elements
+     * Copy marked Elements only in active Layer (only monophonic copies are possible right now)
      * @param e
      */
     copyHandler(e) {
@@ -160,10 +160,11 @@ class GlobalKeyboardHandler {
             return;
         e.preventDefault();
         this.copiedIds = new Array();
-        document.querySelectorAll(".marked").forEach(m => {
+        cq.getContainer(this.containerId).querySelectorAll(".activeLayer .marked").forEach(m => {
             this.copiedIds.push(m.id);
         });
         this.copiedIds.filter(n => n); //undefined and null Elements will be excluded
+        console.log("Copied", this.copiedIds);
     }
     /**
      * paste marked Elements
@@ -173,13 +174,15 @@ class GlobalKeyboardHandler {
         var _a, _b;
         //if(!this.hasContainerFocus()) return
         //e.preventDefault()
-        var pastePosition = ((_a = this.container.querySelector(".chord.marked, .note.marked, .rest.marked, .mRest.marked")) === null || _a === void 0 ? void 0 : _a.id) || ((_b = this.container.querySelector("#cursor")) === null || _b === void 0 ? void 0 : _b.getAttribute("refId"));
-        if (this.copiedIds != undefined && pastePosition != undefined) {
-            var lastId = meiOperation.paste(this.copiedIds, pastePosition, this.currentMEI);
-            var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        const pastePosition = ((_a = this.container.querySelector(".chord.marked, .note.marked, .rest.marked, .mRest.marked")) === null || _a === void 0 ? void 0 : _a.id) || ((_b = this.container.querySelector("#cursor")) === null || _b === void 0 ? void 0 : _b.getAttribute("refId"));
+        if (this.copiedIds && pastePosition) {
+            const pasteResult = meiOperation.paste(this.copiedIds, pastePosition, this.currentMEI);
+            this.currentMEI = pasteResult[0];
+            const lastId = pasteResult[1];
+            const mei = meiConverter.restoreXmlIdTags(this.currentMEI);
             this.loadDataCallback("", mei, false).then(mei => {
                 //Tell everyone that a past just occured to readjust certain elements e.g.
-                var pastedEvent = new CustomEvent("pasted", { detail: lastId });
+                const pastedEvent = new CustomEvent("pasted", { detail: lastId });
                 document.dispatchEvent(pastedEvent);
             });
         }
@@ -323,6 +326,8 @@ class GlobalKeyboardHandler {
         return this.container.classList.contains("activeContainer");
     }
     hasEditableOpen() {
+        if (!document.getElementById(this.containerId))
+            return false;
         return document.getElementById(this.containerId).querySelector(".canvas *[contenteditable=true]") !== null;
     }
     /////// GETTER/ SETTER ///////

package/src/scripts/js/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");
@@ -27,7 +26,7 @@ class InsertModeHandler {
         this.annotations = new Annotations_1.default(containerId);
     }
     activateInsertMode(clicked = false) {
-        var _a, _b;
+        var _a;
         if (this.annotationMode || this.harmonyMode) {
             this.insertDeactivate();
         }
@@ -42,7 +41,7 @@ class InsertModeHandler {
         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)
             .setInsertCallback(this.insertCallback)
@@ -63,18 +62,9 @@ class InsertModeHandler {
             .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?.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;
+        //this.activateSelectionMode()
     }
     activateAnnotationMode() {
         var _a;
@@ -99,14 +89,17 @@ class InsertModeHandler {
                 else {
                     this.annotations.updateCanvas();
                 }
-                this.annotations
-                    .setContainerId(this.containerId)
-                    .setm2s(this.m2s)
-                    .setMusicProcessor(this.musicPlayer)
-                    .setToFront()
-                    .setMenuClickHandler();
+                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) {
@@ -159,7 +152,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) {
@@ -175,15 +168,17 @@ class InsertModeHandler {
         if (this.smHandler == undefined) {
             this.smHandler = new ScoreManipulatorHandler_1.default();
         }
+        //var activeLayer = this.container.querySelector(".activeLayer")
         this.smHandler
             .setContainerId(this.containerId)
+            .setm2s(this.m2s)
             .setMEI(this.m2s.getCurrentMei())
             .setMusicProcessor(this.musicPlayer)
             .setLoadDataCallback(this.loadDataCallback)
             .drawElements();
-        // create some more measures at start for debugging purposes
+        //create some more measures at start for debugging purposes
         // if (this.firstCall) {
-        //   for (let i = 0; i < 13; i++) {
+        //   for (let i = 0; i < 15; i++) {
         //     this.interactionOverlay.querySelector("#measureAdder").dispatchEvent(new MouseEvent("click"))
         //   }
         //   this.firstCall = false
@@ -199,8 +194,6 @@ class InsertModeHandler {
                     case "notationTabBtn":
                     case "articulationTabBtn":
                     case "clickInsert":
-                        that.activateInsertMode(true);
-                        break;
                     case "keyMode":
                         that.activateInsertMode(true);
                         break;
@@ -225,6 +218,9 @@ class InsertModeHandler {
             b.addEventListener("click", function (e) {
                 let dur = 0;
                 switch (this.id) {
+                    case "breveNote":
+                        dur = 0.5;
+                        break;
                     case "fullNote":
                         dur = 1;
                         break;
@@ -252,6 +248,7 @@ class InsertModeHandler {
                 }
             });
         });
+        //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;
@@ -348,9 +345,8 @@ class InsertModeHandler {
         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() {
@@ -363,18 +359,16 @@ class InsertModeHandler {
         return this.phantomNoteHandler;
     }
     disableNoteInput() {
-        var _a, _b, _c;
+        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();
-        (_c = this.selectionHandler) === null || _c === void 0 ? void 0 : _c.removeListeners();
     }
     enableNoteInput() {
-        var _a, _b, _c;
+        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();
         }
-        (_c = this.selectionHandler) === null || _c === void 0 ? void 0 : _c.setListeners();
     }
 }
 exports.default = InsertModeHandler;

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

@@ -50,10 +50,9 @@ class KeyModeHandler {
          * 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());
+            //this.cursor.definePosById(this.scoreGraph.getCurrentNode()?.getId())
         }).bind(this);
         this.setContainerId(containerId);
     }
@@ -96,73 +95,13 @@ class KeyModeHandler {
             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)
+            if (!newNote)
                 return;
             this.processNewNote(newNote);
-            // var noteExists: Boolean = false
-            // var noteToDelete: Element
-            // if (document.getElementById(currentNode.getId()).closest(".chord") !== null) {
-            //   var chordNotes = Array.from(document.getElementById(currentNode.getId()).closest(".chord").querySelectorAll(".note"))
-            //   chordNotes.forEach((n: Element) => {
-            //     var meiNote = this.m2s.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) {
-            //   // check if new note should replace a rest
-            //   if (this.scoreGraph.getCurrentNode().getDocElement().classList.contains("rest")) {
-            //     newNote.relPosX = "left";
-            //     newNote.nearestNoteId = this.scoreGraph.getCurrentNode().getId()
-            //   } else if (!this.scoreGraph.getCurrentNode()?.getDocElement().classList.contains("mRest") && this.scoreGraph.lookUp(["note", "rest", "mRest"], "right") == null && newNote.chordElement == undefined) {
-            //     //check if new Measure must be created 
-            //     meiOperation.addMeasure(this.m2s.getCurrentMei())
-            //     var currentStaff = this.m2s.getCurrentMei().getElementById(newNote.staffId)
-            //     var staffN = currentStaff.getAttribute("n")
-            //     newNote.staffId = currentStaff.closest("measure").nextElementSibling.querySelector("staff[n=\"" + staffN + "\"]").id
-            //     newNote.relPosX = "left"
-            //     newNote.nearestNoteId = this.m2s.getCurrentMei().querySelector("#" + newNote.staffId).querySelector("mRest").id
-            //   } else {
-            //     //or if ne note must be rendered into the next bar
-            //     var oldStaffId = newNote.staffId
-            //     if (this.m2s.getCurrentMei().querySelector("#" + newNote.nearestNoteId) === null) return
-            //     if (this.m2s.getCurrentMei().querySelector("#" + newNote.nearestNoteId).tagName !== "mRest") {
-            //       newNote.staffId = this.m2s.getCurrentMei().getElementById(this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")?.getId())?.closest("staff").id || newNote.staffId
-            //     }
-            //     if (oldStaffId !== newNote.staffId) {
-            //       newNote.relPosX = "left"
-            //       newNote.nearestNoteId = this.scoreGraph.getCurrentNode()?.getId()
-            //     }
-            //   }
-            //   this.insertCallback(newNote, true).then(() => {
-            //     //this.m2s.update();
-            //     this.resetListeners()
-            //     var currentTargetId;
-            //     if (newNote.chordElement != undefined) {
-            //       currentTargetId = this.vrvSVG.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)
-            //     this.musicPlayer.generateTone(newNote)
-            //   }).catch(() => {
-            //     //alert("your bar is too small")
-            //   })
-            // } else {
-            //   this.deleteCallback([noteToDelete]).then(() => {
-            //     //this.m2s.update();
-            //     this.resetListeners()
-            //     this.scoreGraph.setCurrentNodeById(newNote.chordElement?.id)
-            //   })
-            // }
         }
     }
     processNewNote(newNote) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         var currentNode = this.scoreGraph.getCurrentNode();
         var noteExists = false;
         var noteToDelete;
@@ -179,6 +118,7 @@ class KeyModeHandler {
             });
         }
         if (!noteExists) {
+            var currentStaff = this.m2s.getCurrentMei().getElementById(newNote.staffId);
             // check if new note should replace a rest
             if (this.scoreGraph.getCurrentNode().getDocElement().classList.contains("rest")) {
                 newNote.relPosX = "left";
@@ -187,9 +127,10 @@ class KeyModeHandler {
             else if (!((_a = this.scoreGraph.getCurrentNode()) === null || _a === void 0 ? void 0 : _a.getDocElement().classList.contains("mRest")) && this.scoreGraph.lookUp(["note", "rest", "mRest"], "right") == null && newNote.chordElement == undefined) {
                 //check if new Measure must be created 
                 meiOperation.addMeasure(this.m2s.getCurrentMei());
-                var currentStaff = this.m2s.getCurrentMei().getElementById(newNote.staffId);
                 var staffN = currentStaff.getAttribute("n");
-                newNote.staffId = currentStaff.closest("measure").nextElementSibling.querySelector("staff[n=\"" + staffN + "\"]").id;
+                var layerN = this.m2s.getCurrentMei().getElementById(newNote.layerId).getAttribute("n");
+                newNote.staffId = currentStaff.closest("measure").nextElementSibling.querySelector(`staff[n='${staffN}']`).id;
+                newNote.layerId = currentStaff.closest("measure").nextElementSibling.querySelector(`staff[n='${staffN}'] layer[n='${layerN}']`).id;
                 newNote.relPosX = "left";
                 newNote.nearestNoteId = this.m2s.getCurrentMei().querySelector("#" + newNote.staffId).querySelector("mRest").id;
             }
@@ -200,10 +141,11 @@ class KeyModeHandler {
                     return;
                 if (this.m2s.getCurrentMei().querySelector("#" + newNote.nearestNoteId).tagName !== "mRest") {
                     newNote.staffId = ((_c = this.m2s.getCurrentMei().getElementById((_b = this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")) === null || _b === void 0 ? void 0 : _b.getId())) === null || _c === void 0 ? void 0 : _c.closest("staff").id) || newNote.staffId;
+                    newNote.layerId = ((_e = this.m2s.getCurrentMei().getElementById((_d = this.scoreGraph.getNextClass(["note", "rest", "mRest"], "right")) === null || _d === void 0 ? void 0 : _d.getId())) === null || _e === void 0 ? void 0 : _e.closest("layer").id) || newNote.layerId;
                 }
                 if (oldStaffId !== newNote.staffId) {
                     newNote.relPosX = "left";
-                    newNote.nearestNoteId = (_d = this.scoreGraph.getCurrentNode()) === null || _d === void 0 ? void 0 : _d.getId();
+                    newNote.nearestNoteId = (_f = this.scoreGraph.getCurrentNode()) === null || _f === void 0 ? void 0 : _f.getId();
                 }
             }
             this.insertCallback(newNote, true).then(() => {
@@ -268,7 +210,7 @@ class KeyModeHandler {
      * @returns
      */
     createNewNote(pname, oct, options) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         //get relevant staffinfo
         var nearestNodeId = (_a = this.scoreGraph.getCurrentNode()) === null || _a === void 0 ? void 0 : _a.getId();
         if (nearestNodeId == undefined)
@@ -316,8 +258,9 @@ class KeyModeHandler {
             nearestNoteId: nearestNodeId,
             relPosX: "right",
             staffId: (_c = this.vrvSVG.querySelector("#" + nearestNodeId)) === null || _c === void 0 ? void 0 : _c.closest(".staff").id,
+            layerId: (_e = this.container.querySelector(`#${(_d = this.vrvSVG.querySelector("#" + nearestNodeId)) === null || _d === void 0 ? void 0 : _d.closest(".staff").id} .activeLayer`)) === null || _e === void 0 ? void 0 : _e.id,
             chordElement: targetChord,
-            rest: (_d = this.container.querySelector("#pauseNote")) === null || _d === void 0 ? void 0 : _d.classList.contains("selected")
+            rest: (_f = this.container.querySelector("#pauseNote")) === null || _f === void 0 ? void 0 : _f.classList.contains("selected")
         };
         return newNote;
     }
@@ -368,16 +311,6 @@ class KeyModeHandler {
      * @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)
-        // }
         this.scoreGraph.setCurrentNodeById(elementId);
         return this;
     }
@@ -412,13 +345,6 @@ class KeyModeHandler {
                 break;
         }
         currNodeId = this.scoreGraph.getCurrentNode().getId();
-        // if(this.vrvSVG.querySelector(".marked") === null){
-        //   this.deleteCallback([elementToDelete]).then(() => {
-        //     this.m2s.update();
-        //     this.resetListeners()
-        //     this.cursor.definePosById(currNodeId)
-        //   })
-        // }
     }
     ///// GETTER / SETTER////////////////
     setm2s(m2s) {

package/src/scripts/js/handlers/LabelHandler.js

@@ -101,13 +101,14 @@ class LabelHandler {
         var rootWidth = this.rootBBox.width.toString();
         var rootHeigth = this.rootBBox.height.toString();
         var vb = this.interactionOverlay.getAttribute("viewBox");
-        if (this.labelCanvas == undefined) {
+        this.labelCanvas = this.interactionOverlay.querySelector("#labelCanvas");
+        if (!this.labelCanvas) {
             this.labelCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
             this.labelCanvas.setAttribute("id", "labelCanvas");
             this.labelCanvas.classList.add("canvas");
             //this.labelCanvas.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "))
         }
-        this.labelCanvas.setAttribute("viewBox", vb);
+        //this.labelCanvas.setAttribute("viewBox", vb)
         this.interactionOverlay.insertBefore(this.labelCanvas, this.interactionOverlay.firstChild);
         return this;
     }

package/src/scripts/js/handlers/PhantomElementHandler.js

@@ -57,7 +57,7 @@ class PhantomElementHandler {
             element.removeEventListener('click', this.trackMouseHandler);
             clearInterval(this.trackMouseHandler);
         });
-        if (this.phantom != undefined) {
+        if (this.phantom) {
             this.phantom.removePhantomNote();
             this.phantom = undefined;
         }