vibe-editor 0.0.0

package/src/scripts/js/datastructures/ScoreGraph.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 == undefined) {
+            // 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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class ScoreNode {
+    constructor(id) {
+        this.id = id;
+        this.setDocElement();
+    }
+    hasNodeAnywhere(sn) {
+        if ([this.up, this.down, this.left, this.right].indexOf(sn) > -1) {
+            return true;
+        }
+        return false;
+    }
+    printElements() {
+        var u, d, r, l;
+        u = d = r = l = null;
+        var c = document.getElementById(this.id);
+        if (this.up !== null) {
+            u = document.getElementById(this.up.id);
+        }
+        if (this.down !== null) {
+            d = document.getElementById(this.down.id);
+        }
+        if (this.left !== null) {
+            l = document.getElementById(this.left.id);
+        }
+        if (this.right !== null) {
+            r = document.getElementById(this.right.id);
+        }
+        console.log("CURRENT", c, "UP", u, "DOWN", d, "LEFT", l, "RIGHT", r);
+    }
+    isBOL() {
+        return this.id.indexOf("BOL") > -1;
+    }
+    isLayer() {
+        return document.getElementById(this.id).classList.contains("layer");
+    }
+    getId() {
+        return this.id;
+    }
+    getUp() {
+        return this.up;
+    }
+    getDown() {
+        return this.down;
+    }
+    getLeft() {
+        return this.left;
+    }
+    getRight() {
+        return this.right;
+    }
+    getTimeCode() {
+        return this.timeCode;
+    }
+    getDocElement() {
+        return this.docElement || document.getElementById(this.id) || null;
+    }
+    setUp(sn) {
+        this.up = sn;
+    }
+    setDown(sn) {
+        this.down = sn;
+    }
+    setLeft(sn) {
+        this.left = sn;
+    }
+    setRight(sn) {
+        this.right = sn;
+    }
+    setTimeCode(tc) {
+        this.timeCode = tc;
+    }
+    setDocElement() {
+        this.docElement = document.getElementById(this.id);
+    }
+}
+exports.default = ScoreNode;

package/src/scripts/js/entry.js

@@ -0,0 +1,4 @@
+import VerovioScoreEditor from "./VerovioScoreEditor.js"
+
+
+export default VerovioScoreEditor