vibe-editor 0.0.1 → 0.0.3

package/src/scripts/js/datastructures/ScoreGraph.js

@@ -11,50 +11,95 @@ class ScoreGraph {
         this.container = document.getElementById(containerId);
         this.vrvSVG = cq.getVrvSVG(containerId);
         this.interactionOverlay = cq.getInteractOverlay(containerId);
-        this.populate(xmlDoc, miditimes);
+        this.populate(xmlDoc);
     }
     /**
-     * @deprecated
-     * Use function populate instead
-     * @param xmlDoc
-     */
-    altPop(xmlDoc) {
-        var documentNodes = Array.from(cq.getVrvSVG(this.containerId).querySelectorAll(documentNodeSelector));
-        var documentNodes = documentNodes.filter(dn => {
-            if (!dn.classList.contains("note")) {
-                return dn;
+     * Populate scoreGraoh according to mei
+     * Determine left and right relations between elements (up and down won't be considered anymore since the keyboard interaction (arrowup/arrowdown) always should result in a transposition)
+    */
+    populate(xmlDoc) {
+        this.graph = new Map();
+        //Collect all layers grouped by staff and layer index.
+        var groupedLayers = {};
+        xmlDoc.querySelectorAll("staff").forEach(s => s.querySelectorAll("layer").forEach(l => {
+            const sn = s.getAttribute("n");
+            const ln = l.getAttribute("n");
+            if (!groupedLayers[sn]) {
+                groupedLayers[sn] = {};
             }
-            if (dn.classList.contains("note")) {
-                if (dn.closest(".chord") === null) {
-                    return dn;
-                }
+            if (!groupedLayers[sn][ln]) {
+                groupedLayers[sn][ln] = new Array();
             }
+            groupedLayers[sn][ln].push(l);
+        }));
+        //Collect Clef, meter and key to beginning of Graph
+        //Elements must be parsed from rendered svg
+        var groupedStaffDefs = {};
+        cq.getContainer(this.containerId).querySelectorAll("#vrvSVG .measure[n='1'] .staff").forEach(sd => {
+            const n = sd.getAttribute("n");
+            if (!groupedStaffDefs[n]) {
+                groupedStaffDefs[n] = new Array();
+            }
+            const clef = sd.querySelector(".clef");
+            if (clef)
+                groupedStaffDefs[n].push(clef);
+            const keySig = sd.querySelector(".keySig");
+            if (keySig)
+                groupedStaffDefs[n].push(keySig);
+            const meterSig = sd.querySelector(".meterSig");
+            if (meterSig)
+                groupedStaffDefs[n].push(meterSig);
         });
-        var nodeCoodrs = new Map();
-        var root = cq.getVrvSVG(this.containerId);
-        var rootBBox = root.getBoundingClientRect();
-        documentNodes.forEach(dn => {
-            var dnx = dn.getBoundingClientRect().x - rootBBox.x - root.scrollLeft - window.pageXOffset;
-            var dny = dn.getBoundingClientRect().y - rootBBox.y - root.scrollTop - window.pageYOffset;
-            nodeCoodrs.set(dn, { x: dnx, y: dny });
-        });
-        for (const [key, value] of nodeCoodrs.entries()) {
-            var closestLeft;
-            var closestRight;
-            var closestTop;
-            var closestDown;
-            for (const [key, value] of nodeCoodrs.entries()) {
-                //TODO
+        //iterate through all layers to add and connect score nodes
+        var prevNode;
+        for (const sn in groupedLayers) {
+            for (const ln in groupedLayers[sn]) {
+                const staffDef = groupedStaffDefs[sn];
+                var lastStaffDefId;
+                if (staffDef) {
+                    staffDef.forEach(sd => {
+                        lastStaffDefId = sd.id;
+                        this.graph.set(sd.id, new ScoreNode_1.default(sd.id));
+                        const currentNode = this.graph.get(sd.id);
+                        if (prevNode) {
+                            prevNode.setRight(currentNode);
+                            currentNode.setLeft(prevNode);
+                        }
+                        prevNode = currentNode;
+                    });
+                }
+                prevNode = null;
+                const layer = groupedLayers[sn][ln];
+                layer.forEach((l, layerIdx) => {
+                    l.querySelectorAll(":scope > note, rest, mRest, chord, keySig, clef, meterSig").forEach((el, elementIdx) => {
+                        var _a;
+                        this.graph.set(el.id, new ScoreNode_1.default(el.id));
+                        const currentNode = this.graph.get(el.id);
+                        if (prevNode) {
+                            prevNode.setRight(currentNode);
+                            currentNode.setLeft(prevNode);
+                        }
+                        else {
+                            currentNode.setLeft(this.graph.get(lastStaffDefId));
+                            if (layerIdx === 0 && elementIdx === 0) {
+                                (_a = this.graph.get(lastStaffDefId)) === null || _a === void 0 ? void 0 : _a.setRight(currentNode);
+                            }
+                        }
+                        prevNode = currentNode;
+                    });
+                });
             }
         }
+        console.log("ScoreGraph", this.graph);
     }
     /**
+     * @deprecated
      * Populate scoreGraoh according to mei
      * Add midi timeCode
      * @param xmlDoc
      * @param miditimes
      */
-    populate(xmlDoc, miditimes) {
+    populate_old(xmlDoc, miditimes) {
         var _a, _b, _c;
         this.graph = new Map();
         this.midiTimes = miditimes;
@@ -104,23 +149,23 @@ class ScoreGraph {
                         }
                     });
                     elements.push(...documentNodes);
-                });
-                elements.forEach((el, idx) => {
-                    var currentNode = this.graph.get(el.id);
-                    var prevSibling = idx === 0 ? null : this.graph.get(elements[idx - 1].id);
-                    var nextSibling = idx === elements.length - 1 ? null : this.graph.get(elements[idx + 1].id);
-                    if (idx > 0) {
-                        currentNode.setLeft(prevSibling);
-                    }
-                    else { // empty Node at beginning of Layer
-                        this.graph.set("BOL" + i.toString(), new ScoreNode_1.default("BOL" + i.toString()));
-                        this.graph.get("BOL" + i.toString()).setLeft(null);
-                        this.graph.get("BOL" + i.toString()).setUp(null);
-                        this.graph.get("BOL" + i.toString()).setDown(null);
-                        this.graph.get("BOL" + i.toString()).setRight(currentNode);
-                        currentNode.setLeft(this.graph.get("BOL" + i.toString()));
-                    }
-                    currentNode.setRight(nextSibling);
+                    elements.forEach((el, idx) => {
+                        var currentNode = this.graph.get(el.id);
+                        var prevSibling = idx === 0 ? null : this.graph.get(elements[idx - 1].id);
+                        var nextSibling = idx === elements.length - 1 ? null : this.graph.get(elements[idx + 1].id);
+                        if (idx > 0) {
+                            currentNode.setLeft(prevSibling);
+                        }
+                        else { // empty Node at beginning of Layer
+                            this.graph.set("BOL" + i.toString(), new ScoreNode_1.default("BOL" + i.toString()));
+                            this.graph.get("BOL" + i.toString()).setLeft(null);
+                            this.graph.get("BOL" + i.toString()).setUp(null);
+                            this.graph.get("BOL" + i.toString()).setDown(null);
+                            this.graph.get("BOL" + i.toString()).setRight(currentNode);
+                            currentNode.setLeft(this.graph.get("BOL" + i.toString()));
+                        }
+                        currentNode.setRight(nextSibling);
+                    });
                 });
             }
         }

package/src/scripts/js/datastructures/ScoreGraph_deprecated.js

@@ -0,0 +1,432 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ScoreNode_1 = require("./ScoreNode");
+const cq = require("../utils/convenienceQueries");
+const meiNodeSelector = "note, rest, mRest, chord, layer";
+const documentNodeSelector = ".clef, .meterSig, .keySig, .note, .rest, .mRest, .chord"; //, .layer"
+const documentNodeSelector2 = ".clef, .meterSig, .keySig, .layer .note, .layer .rest, .layer .mRest, .layer .chord"; //, :scope > .layer"
+class ScoreGraph {
+    constructor(xmlDoc, containerId, miditimes) {
+        this.containerId = containerId;
+        this.container = document.getElementById(containerId);
+        this.vrvSVG = cq.getVrvSVG(containerId);
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        this.populate(xmlDoc, miditimes);
+    }
+    /**
+     * @deprecated
+     * Use function populate instead
+     * @param xmlDoc
+     */
+    altPop(xmlDoc) {
+        var documentNodes = Array.from(cq.getVrvSVG(this.containerId).querySelectorAll(documentNodeSelector));
+        var documentNodes = documentNodes.filter(dn => {
+            if (!dn.classList.contains("note")) {
+                return dn;
+            }
+            if (dn.classList.contains("note")) {
+                if (dn.closest(".chord") === null) {
+                    return dn;
+                }
+            }
+        });
+        var nodeCoodrs = new Map();
+        var root = cq.getVrvSVG(this.containerId);
+        var rootBBox = root.getBoundingClientRect();
+        documentNodes.forEach(dn => {
+            var dnx = dn.getBoundingClientRect().x - rootBBox.x - root.scrollLeft - window.pageXOffset;
+            var dny = dn.getBoundingClientRect().y - rootBBox.y - root.scrollTop - window.pageYOffset;
+            nodeCoodrs.set(dn, { x: dnx, y: dny });
+        });
+        for (const [key, value] of nodeCoodrs.entries()) {
+            var closestLeft;
+            var closestRight;
+            var closestTop;
+            var closestDown;
+            for (const [key, value] of nodeCoodrs.entries()) {
+                //TODO
+            }
+        }
+    }
+    /**
+     * Populate scoreGraoh according to mei
+     * Add midi timeCode
+     * @param xmlDoc
+     * @param miditimes
+     */
+    populate(xmlDoc, miditimes) {
+        var _a, _b, _c;
+        this.graph = new Map();
+        this.midiTimes = miditimes;
+        xmlDoc.querySelectorAll(meiNodeSelector).forEach(e => {
+            if ((e.tagName === "note" && e.closest("chord") !== null)) { // || (e.tagName === "layer" && e.children.length > 0)){
+                return;
+            }
+            this.graph.set(e.id, new ScoreNode_1.default(e.id));
+        });
+        cq.getVrvSVG(this.containerId).querySelectorAll(documentNodeSelector).forEach(e => {
+            if ((e.classList.contains("note") && e.closest(".chord") !== null)) {
+                return;
+            }
+            this.graph.set(e.id, new ScoreNode_1.default(e.id));
+        });
+        var layerCount = 0;
+        xmlDoc.querySelectorAll("layer").forEach(l => {
+            if (parseInt(l.getAttribute("n")) > layerCount) {
+                layerCount = parseInt(l.getAttribute("n"));
+            }
+        });
+        var staffCount = 0;
+        xmlDoc.querySelectorAll("staff").forEach(l => {
+            if (parseInt(l.getAttribute("n")) > staffCount) {
+                staffCount = parseInt(l.getAttribute("n"));
+            }
+        });
+        // Assign left/right nodes
+        var layerArray;
+        for (var s = 0; s < staffCount; s++) {
+            for (var i = 0; i < layerCount; i++) {
+                layerArray = Array.from(xmlDoc.querySelectorAll("staff[n=\"" + (s + 1).toString() + "\"] > layer[n=\"" + (i + 1).toString() + "\"]"));
+                var elements = new Array();
+                layerArray.forEach(l => {
+                    if (cq.getVrvSVG(this.containerId).querySelector("#" + l.id) === null)
+                        return;
+                    let staff = cq.getVrvSVG(this.containerId).querySelector("#" + l.id).closest(".measure").querySelector(".staff[n='" + l.closest("staff").getAttribute("n") + "']");
+                    var documentNodes = Array.from(staff.querySelectorAll(documentNodeSelector2));
+                    var documentNodes = documentNodes.filter(dn => {
+                        if (!dn.classList.contains("note")) {
+                            return dn;
+                        }
+                        if (dn.classList.contains("note")) {
+                            if (dn.closest(".chord") === null) {
+                                return dn;
+                            }
+                        }
+                    });
+                    elements.push(...documentNodes);
+                    elements.forEach((el, idx) => {
+                        var currentNode = this.graph.get(el.id);
+                        var prevSibling = idx === 0 ? null : this.graph.get(elements[idx - 1].id);
+                        var nextSibling = idx === elements.length - 1 ? null : this.graph.get(elements[idx + 1].id);
+                        if (idx > 0) {
+                            currentNode.setLeft(prevSibling);
+                        }
+                        else { // empty Node at beginning of Layer
+                            this.graph.set("BOL" + i.toString(), new ScoreNode_1.default("BOL" + i.toString()));
+                            this.graph.get("BOL" + i.toString()).setLeft(null);
+                            this.graph.get("BOL" + i.toString()).setUp(null);
+                            this.graph.get("BOL" + i.toString()).setDown(null);
+                            this.graph.get("BOL" + i.toString()).setRight(currentNode);
+                            currentNode.setLeft(this.graph.get("BOL" + i.toString()));
+                        }
+                        currentNode.setRight(nextSibling);
+                    });
+                });
+            }
+        }
+        //Assign up/down nodes
+        if (this.midiTimes) {
+            // miditimes contain svg Elements (not mei Elements!!!)
+            // first: direct up/down references
+            for (const [key, value] of this.midiTimes.entries()) {
+                var originArr = value;
+                var arr = new Array();
+                originArr.forEach(el => {
+                    var chord = el.closest(".chord");
+                    if (chord !== null && arr.indexOf(chord) === -1) {
+                        arr.push(chord);
+                    }
+                    else if (chord === null) {
+                        arr.push(el);
+                    }
+                });
+                arr.forEach((note, idx) => {
+                    var current = note;
+                    var upSibling = idx === 0 ? null : this.graph.get(arr[idx - 1].id);
+                    var downSibling = idx === arr.length - 1 ? null : this.graph.get(arr[idx + 1].id);
+                    var currentNode = this.graph.get(current.id);
+                    if (typeof currentNode.getTimeCode() === "undefined") {
+                        currentNode.setTimeCode(key);
+                    }
+                    currentNode.setUp(upSibling);
+                    currentNode.setDown(downSibling);
+                });
+            }
+        }
+        //DEAL WITH MRESTS
+        var staves = cq.getVrvSVG(this.containerId).querySelectorAll(".staff");
+        for (var i = 0; i < staves.length - 1; i++) {
+            var staffElements = staves[i].querySelectorAll(documentNodeSelector);
+            var emptyElements = staves[i + 1].querySelectorAll(".clef, .meterSig, .keySig, .mRest, .layer");
+            staffElements.forEach((se, idx) => {
+                var gn = this.graph.get(se.id);
+                if ((gn === null || gn === void 0 ? void 0 : gn.getDown()) === null || (gn === null || gn === void 0 ? void 0 : gn.getDown()) == undefined) {
+                    var tempIdx = idx;
+                    if (idx >= emptyElements.length) {
+                        tempIdx = emptyElements.length - 1;
+                    }
+                    var gnEmpty = this.graph.get(emptyElements[tempIdx].id);
+                    if ((gnEmpty === null || gnEmpty === void 0 ? void 0 : gnEmpty.getUp()) === null || (gnEmpty === null || gnEmpty === void 0 ? void 0 : gnEmpty.getUp()) == undefined) {
+                        gn === null || gn === void 0 ? void 0 : gn.setDown(gnEmpty);
+                        gnEmpty === null || gnEmpty === void 0 ? void 0 : gnEmpty.setUp(gn);
+                    }
+                }
+            });
+        }
+        //extra iteration for Beginning of Layer
+        var currBol = null;
+        var prevBol = null;
+        for (const [key, value] of this.graph.entries()) {
+            if (key.indexOf("BOL") !== -1) {
+                currBol = value;
+                var bolIdx = key[key.length - 1];
+                if (bolIdx !== "0") {
+                    currBol.setUp(prevBol);
+                    if (prevBol !== null) {
+                        prevBol.setDown(currBol);
+                    }
+                }
+                prevBol = value;
+            }
+        }
+        //if there are no direct up/down references, assign closest references
+        for (const [key, value] of this.graph.entries()) {
+            var currentNode = value;
+            var leftNode = currentNode.getLeft();
+            var rightNode = currentNode.getRight();
+            if (currentNode.getUp() == undefined) {
+                currentNode.setUp(null);
+            }
+            if (currentNode.getDown() == undefined) {
+                currentNode.setDown(null);
+            }
+            // Get closest Node for UP reference
+            //check left
+            var closestTimeUp = 10 ** 10;
+            var upSet = null;
+            if (this.targetNodeIsLeftOrRight(currentNode, currentNode.getUp()) && leftNode !== null) {
+                if (leftNode.getUp() !== null && typeof leftNode.getDown() !== "undefined") {
+                    closestTimeUp = (currentNode === null || currentNode === void 0 ? void 0 : currentNode.getTimeCode()) - ((_a = leftNode === null || leftNode === void 0 ? void 0 : leftNode.getUp()) === null || _a === void 0 ? void 0 : _a.getTimeCode()) || 0;
+                    upSet = leftNode === null || leftNode === void 0 ? void 0 : leftNode.getUp();
+                }
+            }
+            //check right
+            if (this.targetNodeIsLeftOrRight(currentNode, currentNode.getUp()) && rightNode !== null) {
+                if (rightNode.getUp() !== null && typeof rightNode.getDown() !== "undefined") {
+                    if ((((_b = rightNode.getUp()) === null || _b === void 0 ? void 0 : _b.getTimeCode()) - (currentNode === null || currentNode === void 0 ? void 0 : currentNode.getTimeCode())) < closestTimeUp) {
+                        upSet = rightNode === null || rightNode === void 0 ? void 0 : rightNode.getUp();
+                    }
+                }
+            }
+            if (upSet !== null && upSet !== currentNode && !this.targetNodeIsLeftOrRight(currentNode, upSet)) {
+                currentNode.setUp(upSet);
+            }
+            // Get closest Node for DOWN reference
+            // check left
+            var closestTimeDown = 10 ** 10;
+            var downSet = null;
+            if (this.targetNodeIsLeftOrRight(currentNode, currentNode.getDown()) && leftNode !== null) {
+                if (leftNode.getDown() !== null && typeof leftNode.getDown() !== "undefined") {
+                    closestTimeDown = (currentNode === null || currentNode === void 0 ? void 0 : currentNode.getTimeCode()) - ((_c = leftNode === null || leftNode === void 0 ? void 0 : leftNode.getDown()) === null || _c === void 0 ? void 0 : _c.getTimeCode()) || 0;
+                    downSet = leftNode.getDown();
+                }
+            }
+            // check right
+            if (this.targetNodeIsLeftOrRight(currentNode, currentNode.getDown()) && rightNode !== null) {
+                if (rightNode.getDown() !== null && rightNode.getDown() != undefined) {
+                    if ((rightNode.getDown().getTimeCode() - currentNode.getTimeCode()) < closestTimeDown) {
+                        downSet = rightNode.getDown();
+                    }
+                }
+            }
+            if (downSet !== null && downSet !== currentNode && !this.targetNodeIsLeftOrRight(currentNode, downSet)) {
+                currentNode.setDown(downSet);
+            }
+        }
+    }
+    targetNodeIsLeftOrRight(startNode, targetNode) {
+        return this.targetIsNodeRight(startNode, targetNode) || this.targetIsNodeLeft(startNode, targetNode);
+    }
+    targetIsNodeLeft(startNode, targetNode) {
+        var tempNode = startNode;
+        var isLeft = false;
+        while (tempNode !== null) {
+            if (tempNode !== null) {
+                if (tempNode == undefined) {
+                    return isLeft;
+                }
+                tempNode = tempNode.getLeft();
+            }
+            if (tempNode === targetNode) {
+                isLeft = true;
+            }
+        }
+        return isLeft;
+    }
+    targetIsNodeRight(startNode, targetNode) {
+        var tempNode = startNode;
+        var isRight = false;
+        while (tempNode !== null) {
+            if (tempNode !== null) {
+                if (tempNode == undefined) {
+                    return isRight;
+                }
+                tempNode = tempNode.getRight();
+            }
+            if (tempNode === targetNode) {
+                isRight = true;
+            }
+        }
+        return isRight;
+    }
+    getCurrentNode() {
+        return this.currentNode;
+    }
+    setCurrentNodeById(id) {
+        var _a, _b;
+        if (id == undefined)
+            return;
+        var lastNode = this.currentNode;
+        this.currentNode = this.graph.get(id) || this.graph.get((_b = (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.closest(".chord")) === null || _b === void 0 ? void 0 : _b.id) || lastNode;
+        if (this.currentNode == undefined) {
+            console.log(lastNode);
+            throw new Error("CurrentNode undefined although id is given: " + id);
+        }
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+    }
+    nextUp() {
+        var _a;
+        if (this.currentNode != undefined && ((_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.getUp()) !== null) {
+            this.currentNode = this.currentNode.getUp();
+        }
+        return this.currentNode;
+    }
+    nextDown() {
+        var _a;
+        if (this.currentNode != undefined && ((_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.getDown()) !== null) {
+            this.currentNode = this.currentNode.getDown();
+        }
+        return this.currentNode;
+    }
+    nextRight() {
+        var _a;
+        if (this.currentNode != undefined && ((_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.getRight()) !== null) {
+            this.currentNode = this.currentNode.getRight();
+        }
+        return this.currentNode;
+    }
+    nextLeft() {
+        var _a;
+        if (this.currentNode != undefined && ((_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.getLeft()) !== null) {
+            this.currentNode = this.currentNode.getLeft();
+        }
+        return this.currentNode;
+    }
+    nextMeasureRight() {
+        while (this.getCurrentNode().getRight().getDocElement().closest(".measure").id ===
+            this.getCurrentNode().getDocElement().closest(".measure").id) {
+            this.nextRight();
+        }
+        return this.currentNode;
+    }
+    nextMeasureLeft() {
+        while (this.getCurrentNode().getLeft().getDocElement().closest(".measure").id ===
+            this.getCurrentNode().getDocElement().closest(".measure").id) {
+            this.nextLeft();
+        }
+        return this.currentNode;
+    }
+    /**
+     * Go to next Element with given classname.
+     * Whatever comes first according to the classNames array.
+     * @param classNames
+     * @param direction
+     * @returns
+     */
+    getNextClass(classNames, direction) {
+        var _a;
+        if (typeof classNames === "string")
+            classNames = [classNames];
+        var currentId = (_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.getId();
+        if ([null, undefined].some(id => id == currentId))
+            return;
+        var nextIsNull = false;
+        do {
+            switch (direction) {
+                case "ArrowLeft":
+                case "left":
+                    this.nextLeft();
+                    break;
+                case "ArrowRight":
+                case "right":
+                    this.nextRight();
+                    break;
+                case "ArrowUp":
+                case "up":
+                    this.nextUp();
+                    break;
+                case "ArrowDown":
+                case "down":
+                    this.nextDown();
+                    break;
+                default:
+                    console.error(direction + " is not allowed. Use left, right, up or down");
+                    return;
+            }
+            nextIsNull = [null, undefined].some(n => this.currentNode == n);
+        } while (!classNames.some(cn => { var _a, _b; return (_b = (_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.getDocElement()) === null || _b === void 0 ? void 0 : _b.classList.contains(cn); }) && !nextIsNull);
+        if (nextIsNull) {
+            this.setCurrentNodeById(currentId);
+        }
+        return this.currentNode;
+    }
+    /**
+     * Find node based on class Names. Will not change state and pointers of the graph.
+     * To change this.currentNode, use getNextClass instead.
+     * @param classNames
+     * @param direction
+     * @returns
+     */
+    lookUp(classNames, direction) {
+        var _a;
+        if (typeof classNames === "string")
+            classNames = [classNames];
+        var currentId = (_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.getId();
+        if ([null, undefined].some(id => id == currentId))
+            return;
+        var isNull = false;
+        var node = this.currentNode;
+        do {
+            switch (direction) {
+                case "ArrowLeft":
+                case "left":
+                    node = node.getLeft();
+                    break;
+                case "ArrowRight":
+                case "right":
+                    node = node.getRight();
+                    break;
+                case "ArrowUp":
+                case "up":
+                    node = node.getUp();
+                    break;
+                case "ArrowDown":
+                case "down":
+                    node = node.getDown();
+                    break;
+                default:
+                    console.error(direction + " is not allowed. Use left, right, up or down");
+                    return;
+            }
+            isNull = [null, undefined].some(n => node == n);
+        } while (!classNames.some(cn => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.getDocElement()) === null || _a === void 0 ? void 0 : _a.classList.contains(cn); }) && !isNull);
+        return node;
+    }
+    //Check if ScoreGraph is at beginning of layer
+    isBOL() {
+        return this.currentNode.getLeft() === null && this.currentNode.getId().indexOf("BOL") !== -1;
+    }
+}
+exports.default = ScoreGraph;

package/src/scripts/js/datastructures/ScoreNode.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 class ScoreNode {
     constructor(id) {
+        this.up = null;
+        this.right = null;
+        this.down = null;
+        this.left = null;
         this.id = id;
         this.setDocElement();
     }

package/src/scripts/js/entry.js

@@ -1,5 +1,5 @@
-import VerovioScoreEditor from "./VerovioScoreEditor.js"
+import VIBE from "./VIBE.js"
 
 export default function createEditor(container, options, meiCallback){
-    return new VerovioScoreEditor(container, options, meiCallback)
+    return new VIBE(container, options, meiCallback)
 }

package/src/scripts/js/gui/Annotations.js

@@ -10,12 +10,12 @@ class Annotations {
         this.clickHarmonyBtnHandler = (function clickHarmonyBtnHandler(e) {
             //e.preventDefault()
             this.removeTextListeners();
-            e.target.dispatchEvent(new Event("annotationButtonClicked"));
+            //e.target.dispatchEvent(new Event("annotationButtonClicked"))
         }).bind(this);
         this.clickAnnotTextHandler = (function clickAnnotTextHandler(e) {
             //e.preventDefault()
             this.resetTextListeners();
-            e.target.dispatchEvent(new Event("annotationButtonClicked"));
+            //e.target.dispatchEvent(new Event("annotationButtonClicked"))
         }).bind(this);
         ////HANDLERS////
         this.clickHandler = (function clickHandler(e) {
@@ -248,6 +248,7 @@ class Annotations {
         switch (selectedButton) {
             case "linkedAnnotButton":
             case "staticTextButton":
+                this.container.classList.remove("harmonyMode");
                 this.createTextAnnotation(e, selectedButton);
                 break;
             case "harmonyAnnotButton":
@@ -291,7 +292,7 @@ class Annotations {
         var posy = pt.y; //matrixTransform(rootMatrix).y //e.pageY - this.rootBBox.y - window.pageYOffset
         var annotationTarget = this.m2s.findScoreTarget(posx, posy, false);
         var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
-        textGroup.setAttribute("id", random_1.uuidv4());
+        textGroup.setAttribute("id", (0, random_1.uuidv4)());
         textGroup.setAttribute("targetId", annotationTarget.id);
         var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
         if (isLinked)

package/src/scripts/js/gui/HarmonyLabel.js

@@ -41,7 +41,7 @@ class HarmonyLabel {
     }
     createElement(inputString) {
         this.element = this.currentMEI.createElement("harm");
-        this.element.setAttribute("id", random_1.uuidv4());
+        this.element.setAttribute("id", (0, random_1.uuidv4)());
         this.element.setAttribute("place", "below");
         Array.from(this.element.children).forEach(c => {
             c.remove();