vibe-editor 0.0.1 → 0.0.3

package/README.md

@@ -6,6 +6,11 @@ Current version on github: ![GitHub package.json version](https://img.shields.io
 
 A score editor using verovio as rendering engine
 
+## Getting started
+- Install node modules: `npm install`
+- Transpile TypeScript in watch mode: `tsc -w`
+- Build the application: `npm run build`
+
 ## Initializing
 To initailize the score editor only need two different things are needed 
 1. The `container` the score editor will be displayed in. The container must contain an ID, since many editors can be displayed on one page.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vibe-editor",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "main": "src/scripts/js/VIBE.js",
     "keywords": [],
     "author": "Matthias Nowakowski",
@@ -14,7 +14,8 @@
     "files": [
         "src/images/*/*",
         "src/scripts/js/*",
-        "src/fonts/*"
+        "src/fonts/*",
+        "src/styles/*.css"
     ],
     "dependencies": {
         "@babel/plugin-transform-classes": "^7.16.7",
@@ -36,7 +37,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "file-loader": "^6.2.0",
         "h5p-lib-controls": "^0.0.15",
-        "interactjs": "^1.10.11",
+        "interactjs": "1.10.11",
         "midi-player-js": "^2.0.16",
         "mini-css-extract-plugin": "^2.6.0",
         "node-sass": "^7.0.1",
@@ -47,7 +48,7 @@
         "soundfont-player": "^0.12.0",
         "style-loader": "^3.3.1",
         "tone": "^14.7.77",
-        "typescript": "^4.6.2",
+        "typescript": "4.6.3",
         "update": "^0.7.4",
         "web-midi-api": "^2.2.5",
         "webpack": "^5.88.2",

package/src/scripts/js/Core.js

@@ -194,7 +194,7 @@ class Core {
             return new Promise((resolve, reject) => {
                 var _a;
                 var message = {
-                    id: random_1.uuidv4(),
+                    id: (0, random_1.uuidv4)(),
                     action: 'renderToSVG',
                     pageNo: pageNo
                 };
@@ -307,7 +307,7 @@ class Core {
         }
         //just render the data once to make pagecount accessible
         var message = {
-            id: random_1.uuidv4(),
+            id: (0, random_1.uuidv4)(),
             action: 'renderData',
             mei: d,
             isUrl: u
@@ -328,7 +328,7 @@ class Core {
                 that.createSVGOverlay(true);
                 that.svgEditor.setXY((_a = that.windowHandler) === null || _a === void 0 ? void 0 : _a.getX(), (_b = that.windowHandler) === null || _b === void 0 ? void 0 : _b.getY());
                 that.getMEI("").then(mei => {
-                    var _a, _b;
+                    var _a;
                     that.currentMEI = mei;
                     that.currentMEIDoc = that.getCurrentMEI(true);
                     that.currentMEIDoc.querySelectorAll("[dur='breve']").forEach(d => d.setAttribute("dur", "0.5"));
@@ -350,12 +350,12 @@ class Core {
                         .hideRedundantRests(that.currentMEIDoc);
                     that.undoMEIStacks.push(mei);
                     var lastAddedClass = "lastAdded";
-                    that.container.querySelectorAll("." + lastAddedClass).forEach(m => {
-                        m.classList.remove(lastAddedClass);
-                    });
+                    // that.container.querySelectorAll("." + lastAddedClass).forEach(m => {
+                    //   m.classList.replace("lastAdded", "marked") //remove(lastAddedClass)
+                    // })
                     if (that.lastInsertedNoteId && ["textmode", "clickmode"].some(mode => that.container.classList.contains(mode))) {
-                        (_a = that.container.querySelector("#" + that.lastInsertedNoteId)) === null || _a === void 0 ? void 0 : _a.classList.add(lastAddedClass);
-                        (_b = that.container.querySelector("#" + that.lastInsertedNoteId)) === null || _b === void 0 ? void 0 : _b.classList.add("marked");
+                        //that.container.querySelector("#" + that.lastInsertedNoteId)?.classList.add(lastAddedClass)
+                        (_a = that.container.querySelector("#" + that.lastInsertedNoteId)) === null || _a === void 0 ? void 0 : _a.classList.add("marked");
                     }
                     if (that.meiChangedCallback) {
                         that.meiChangedCallback(that.currentMEI);
@@ -373,11 +373,11 @@ class Core {
                         .update();
                     that.scoreGraph = new ScoreGraph_1.default(that.currentMEIDoc, that.containerId, null);
                     //the first condition should only occur at first starting the score editor
-                    if (that.container.querySelector(".lastAdded") === null && that.scoreGraph.getCurrentNode() == undefined) {
-                        that.scoreGraph.setCurrentNodeById(that.container.querySelector(".staff > .layer :is(.note, .rest, .mRest").id);
+                    if (!that.container.querySelector(".lastAdded, .marked")) { //that.scoreGraph.getCurrentNode() == undefined) {
+                        that.scoreGraph.setCurrentNodeById(that.container.querySelector("#vrvSVG .staff > .layer.activeLayer :is(.note, .rest, .mRest").id);
                     }
                     else { //second condition always sets lastAdded Note
-                        that.scoreGraph.setCurrentNodeById((_a = that.container.querySelector(".lastAdded")) === null || _a === void 0 ? void 0 : _a.id);
+                        that.scoreGraph.setCurrentNodeById((_a = that.container.querySelector("#vrvSVG :is(.lastAdded, .marked)")) === null || _a === void 0 ? void 0 : _a.id);
                     }
                     that.initializeHandlers();
                     that.musicProcessor.setScoreGraph(that.scoreGraph);
@@ -549,7 +549,7 @@ class Core {
         return new Promise((resolve, reject) => {
             const message = {
                 action: "getMEI",
-                id: random_1.uuidv4()
+                id: (0, random_1.uuidv4)()
             };
             var response;
             response = this.verovioWrapper.setMessage(message);
@@ -566,7 +566,7 @@ class Core {
         return new Promise((resolve, reject) => {
             const message = {
                 action: "renderToMidi",
-                id: random_1.uuidv4()
+                id: (0, random_1.uuidv4)()
             };
             var response = this.verovioWrapper.setMessage(message);
             if (response.midi) {
@@ -804,7 +804,7 @@ class Core {
      * @returns {string} - serialized svg
      */
     getSVG(plain = true) {
-        var svgDom = this.container.querySelector("#svgContainer");
+        var svgDom = this.container; //.querySelector("#svgContainer")
         if (plain) {
             svgDom.querySelectorAll(".lastAdded, .marked").forEach(sd => {
                 sd.classList.remove("lastAdded");

package/src/scripts/js/VIBE.js

@@ -5,7 +5,7 @@ const Core_1 = require("./Core");
 const dc = require("./utils/DOMCreator");
 const Tabbar_1 = require("./gui/Tabbar");
 /**
- * Main Class for the VerovioScoreEditor
+ * Main Class for the Verovio Interface for Browser based Editing
  */
 class VIBE {
     /**
@@ -112,6 +112,8 @@ class VIBE {
             this.container.append(dc.makeNewDiv("modGroup", btnGrpClass, { role: "group" }));
             //parentElement for local accidental Buttons
             this.container.append(dc.makeNewDiv("accidGroup", btnGrpClass, { role: "group" }));
+            //parentElement for local articulation Buttons
+            this.container.append(dc.makeNewDiv("articGroup", btnGrpClass, { role: "group" }));
             //sidebarList
             this.container.append(dc.makeNewDiv("sidebarContainer", "sidebar closedSidebar"));
             //parentElement for sidebar open/close

package/src/scripts/js/assets/mei_template.js

@@ -134,7 +134,7 @@ class MeiTemplate {
     }
     createTempo(mm, mmUnit, tstamp = null, startId = null) {
         var newElement = document.createElementNS(constants_1.constants._MEINS_, "tempo");
-        newElement.setAttribute("id", random_1.uuidv4());
+        newElement.setAttribute("id", (0, random_1.uuidv4)());
         newElement.setAttribute("place", "above");
         if (startId === null && tstamp === null) {
             throw new Error("Tempo MUST either have timestamp or startId");
@@ -148,7 +148,7 @@ class MeiTemplate {
         newElement.setAttribute("midi.bpm", (parseFloat(mm) * parseFloat(mmUnit)).toString());
         newElement.setAttribute("staff", "1");
         var rend = document.createElementNS(constants_1.constants._MEINS_, "rend");
-        rend.setAttribute("id", random_1.uuidv4());
+        rend.setAttribute("id", (0, random_1.uuidv4)());
         rend.setAttribute("fontname", "VerovioText");
         rend.textContent = "__";
         newElement.appendChild(rend);

package/src/scripts/js/datastructures/ScoreGraph copy.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;