vibe-editor 0.0.0

package/src/scripts/js/gui/CustomAnnotationDrawer.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const d3 = require("d3");
+const random_1 = require("../utils/random");
+const constants_1 = require("../constants");
+class CustomAnnotationDrawer {
+    constructor() {
+        this.shapes = new Array();
+        this.shapeID = "";
+        this.dragged = false;
+        this.canvas = d3.select(constants_1.constants._ROOTSVGID_WITH_IDSELECTOR_); // draw directly in svg
+        this.dragBehaviour = d3.drag()
+            .on('start', drawStart)
+            .on('drag', this.drawing.bind(this))
+            .on('end', this.drawEnd.bind(this));
+        var that = this;
+        function drawStart() {
+            that.initialX = d3.event.x;
+            that.initialY = d3.event.y;
+            if (d3.event.sourceEvent.srcElement.id === constants_1.constants._ROOTSVGID_) {
+                that.initRect(that.initialX, that.initialY);
+                //that.initCircle(that.initialX, that.initialY)
+            }
+        }
+        this.setListeners();
+    }
+    drawing() {
+        //const currentPt = 
+        const curX = d3.event.x;
+        const curY = d3.event.y;
+        if (typeof this.shape === "undefined") {
+            return;
+        }
+        if (Math.abs(curX - this.initialX) > 20 || Math.abs(curY - this.initialY) > 20) {
+            this.dragged = true;
+            const newX = curX < this.initialX ? curX : this.initialX;
+            const newY = curY < this.initialY ? curY : this.initialY;
+            const width = curX < this.initialX ? this.initialX - curX : curX - this.initialX;
+            const height = curY < this.initialY ? this.initialY - curY : curY - this.initialY;
+            this.updateRect(newX, newY, width, height);
+            //this.updateCircle(newX, newY, width, height);
+        }
+    }
+    drawEnd() {
+        if (!this.dragged) {
+            var elToRemove = document.getElementById(this.shapeID);
+            if (elToRemove !== null) {
+                elToRemove.remove();
+            }
+        }
+        else {
+            document.getElementById("annotationCanvas").appendChild(this.shape);
+            this.shapes.push(this.shape.cloneNode(true));
+        }
+        this.shape = undefined;
+        this.updateCallback();
+    }
+    initRect(ulx, uly) {
+        this.shapeID = random_1.uuidv4();
+        this.canvas.append('rect')
+            .attr('x', ulx)
+            .attr('y', uly)
+            .attr('width', 0)
+            .attr('height', 0)
+            .attr("class", "customAnnotShape")
+            .attr("id", this.shapeID);
+        this.shape = document.getElementById(this.shapeID);
+    }
+    initCircle(cx, cy) {
+        this.shapeID = random_1.uuidv4();
+        this.canvas.append('ellipse')
+            .attr('cx', cx)
+            .attr('cy', cy)
+            .attr('rx', 0)
+            .attr('ry', 0)
+            .attr("class", "customAnnotShape")
+            .attr("id", this.shapeID);
+        this.shape = document.getElementById(this.shapeID);
+    }
+    updateRect(newX, newY, currentWidth, currentHeight) {
+        this.shape.setAttribute('x', newX.toString());
+        this.shape.setAttribute('y', newY.toString());
+        this.shape.setAttribute('width', currentWidth.toString());
+        this.shape.setAttribute('height', currentHeight.toString());
+    }
+    updateCircle(newX, newY, currentWidth, currentHeight) {
+        this.shape.setAttribute('cx', newX.toString());
+        this.shape.setAttribute('cy', newY.toString());
+        this.shape.setAttribute('rx', currentWidth.toString());
+        this.shape.setAttribute('ry', currentHeight.toString());
+    }
+    removeListeners() {
+        d3.select(constants_1.constants._ROOTSVGID_WITH_IDSELECTOR_).on('mousedown.drag', null);
+    }
+    setListeners() {
+        this.canvas.call(this.dragBehaviour);
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    ///////// GETTER/ SETTER ////////
+    setM2M(m2m) {
+        this.m2m = m2m;
+    }
+    getShapes() {
+        return this.shapes;
+    }
+    //////////// CALLBACKS /////////////
+    setUpdateCallback(updateCallback) {
+        this.updateCallback = updateCallback;
+    }
+}
+exports.default = CustomAnnotationDrawer;

package/src/scripts/js/gui/CustomAnnotationShapeDrawer.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const d3 = require("d3");
+const random_1 = require("../utils/random");
+const constants_1 = require("../constants");
+class CustomAnnotationDrawer {
+    constructor() {
+        this.shapes = new Array();
+        this.shapeID = "";
+        this.dragged = false;
+        this.canvas = d3.select(constants_1.constants._ROOTSVGID_WITH_IDSELECTOR_); // draw directly in svg
+        this.dragBehaviour = d3.drag()
+            .on('start', drawStart)
+            .on('drag', this.drawing.bind(this))
+            .on('end', this.drawEnd.bind(this));
+        var that = this;
+        function drawStart() {
+            that.initialX = d3.event.x;
+            that.initialY = d3.event.y;
+            if (d3.event.sourceEvent.srcElement.id === constants_1.constants._ROOTSVGID_) {
+                that.initRect(that.initialX, that.initialY);
+                //that.initCircle(that.initialX, that.initialY)
+            }
+        }
+        this.setListeners();
+    }
+    drawing() {
+        //const currentPt = 
+        const curX = d3.event.x;
+        const curY = d3.event.y;
+        if (typeof this.shape === "undefined") {
+            return;
+        }
+        if (Math.abs(curX - this.initialX) > 20 || Math.abs(curY - this.initialY) > 20) {
+            this.dragged = true;
+            const newX = curX < this.initialX ? curX : this.initialX;
+            const newY = curY < this.initialY ? curY : this.initialY;
+            const width = curX < this.initialX ? this.initialX - curX : curX - this.initialX;
+            const height = curY < this.initialY ? this.initialY - curY : curY - this.initialY;
+            this.updateRect(newX, newY, width, height);
+            //this.updateCircle(newX, newY, width, height);
+        }
+    }
+    drawEnd() {
+        if (!this.dragged) {
+            var elToRemove = document.getElementById(this.shapeID);
+            if (elToRemove !== null) {
+                elToRemove.remove();
+            }
+        }
+        else {
+            document.getElementById("annotationCanvas").appendChild(this.shape);
+            this.shapes.push(this.shape.cloneNode(true));
+        }
+        this.shape = undefined;
+        this.updateCallback();
+    }
+    initRect(ulx, uly) {
+        this.shapeID = random_1.uuidv4();
+        this.canvas.append('rect')
+            .attr('x', ulx)
+            .attr('y', uly)
+            .attr('width', 0)
+            .attr('height', 0)
+            .attr("class", "customAnnotShape")
+            .attr("id", this.shapeID);
+        this.shape = document.getElementById(this.shapeID);
+    }
+    initCircle(cx, cy) {
+        this.shapeID = random_1.uuidv4();
+        this.canvas.append('ellipse')
+            .attr('cx', cx)
+            .attr('cy', cy)
+            .attr('rx', 0)
+            .attr('ry', 0)
+            .attr("class", "customAnnotShape")
+            .attr("id", this.shapeID);
+        this.shape = document.getElementById(this.shapeID);
+    }
+    updateRect(newX, newY, currentWidth, currentHeight) {
+        this.shape.setAttribute('x', newX.toString());
+        this.shape.setAttribute('y', newY.toString());
+        this.shape.setAttribute('width', currentWidth.toString());
+        this.shape.setAttribute('height', currentHeight.toString());
+    }
+    updateCircle(newX, newY, currentWidth, currentHeight) {
+        this.shape.setAttribute('cx', newX.toString());
+        this.shape.setAttribute('cy', newY.toString());
+        this.shape.setAttribute('rx', currentWidth.toString());
+        this.shape.setAttribute('ry', currentHeight.toString());
+    }
+    removeListeners() {
+        d3.select(constants_1.constants._ROOTSVGID_WITH_IDSELECTOR_).on('mousedown.drag', null);
+    }
+    setListeners() {
+        this.canvas.call(this.dragBehaviour);
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    ///////// GETTER/ SETTER ////////
+    setM2M(m2m) {
+        this.m2m = m2m;
+    }
+    getShapes() {
+        return this.shapes;
+    }
+    //////////// CALLBACKS /////////////
+    setUpdateCallback(updateCallback) {
+        this.updateCallback = updateCallback;
+    }
+}
+exports.default = CustomAnnotationDrawer;

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const random_1 = require("../utils/random");
+const constants_1 = require("../constants");
+const mappings_1 = require("../utils/mappings");
+class HarmonyLabel {
+    constructor(inputString, startid, mei) {
+        this.isBassoContinuo = false;
+        this.isText = false;
+        this.startid = startid;
+        this.currentMEI = mei;
+        this.inputString = inputString;
+        this.element = this.currentMEI.getElementById(startid);
+        if (["note", "chord"].some(c => this.element.tagName === c)) {
+            this.checkFormat(inputString);
+            this.createElement(inputString);
+        }
+    }
+    checkFormat(inputString) {
+        this.isBassoContinuo = false;
+        this.isText = false;
+        var letters = /[AaBC-Zc-z].*/; // b is allowed character in bc
+        if (inputString.match(letters)) {
+            this.isText = true;
+        }
+        else {
+            this.isBassoContinuo = true;
+        }
+    }
+    /**
+     * Change text of already existing label
+     * @param inputString
+     */
+    modifyLabel(inputString) {
+        this.checkFormat(inputString);
+        this.parseInput(inputString);
+    }
+    createElement(inputString) {
+        this.element = this.currentMEI.createElement("harm");
+        this.element.setAttribute("id", random_1.uuidv4());
+        this.element.setAttribute("place", "below");
+        Array.from(this.element.children).forEach(c => {
+            c.remove();
+        });
+        this.parseInput(inputString);
+        this.setStartId();
+    }
+    parseInput(inputString) {
+        if (this.isBassoContinuo) {
+            this.parseFB(inputString);
+        }
+        if (this.isText) {
+            this.parseText(inputString);
+        }
+    }
+    parseText(inputString) {
+        inputString = inputString.replace("b", mappings_1.keyToUnicode.get("b"));
+        inputString = inputString.replace(/(?<!&)#/g, mappings_1.keyToUnicode.get("#"));
+        inputString = inputString.replace("n", mappings_1.keyToUnicode.get("n"));
+        inputString = inputString.replace("\\^", mappings_1.keyToUnicode.get("\\^"));
+        inputString = inputString.replace("/(?<!\/)°\/g", mappings_1.keyToUnicode.get("°"));
+        inputString = inputString.replace("/°", mappings_1.keyToUnicode.get("/°"));
+        this.element.textContent = inputString;
+    }
+    parseFB(sa) {
+        var splitArray = sa.split(" ");
+        splitArray = splitArray.filter(s => s !== "");
+        var fb = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "fb");
+        this.element.textContent = "";
+        this.element.appendChild(fb);
+        splitArray.forEach(sa => {
+            var f = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "f");
+            sa = sa.replace("b", mappings_1.keyToUnicode.get("b"));
+            sa = sa.replace(/(?<!&)#/g, mappings_1.keyToUnicode.get("#"));
+            sa = sa.replace("n", mappings_1.keyToUnicode.get("n"));
+            f.textContent = sa;
+            fb.appendChild(f);
+        });
+    }
+    ///////// HARMONY HANDLER STUFF ////////////////
+    /**
+     * Has to be set by HarmonyHandler
+     * @param el
+     */
+    setStartId(startId = this.startid) {
+        this.element.setAttribute("startid", startId);
+        return this;
+    }
+    ////////////// GETTER/ SETTER ////////////
+    getElement() {
+        return this.element;
+    }
+    getInput() {
+        return this.inputString;
+    }
+    getStartId() {
+        return this.startid;
+    }
+    setCurrentMEI(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+}
+exports.default = HarmonyLabel;

package/src/scripts/js/gui/Label.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/scripts/js/gui/PhantomElement.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cq = require("../utils/convenienceQueries");
+const coordinates = require("../utils/coordinates");
+const mappings_1 = require("../utils/mappings");
+const svgNS = "http://www.w3.org/2000/svg";
+class PhantomElement {
+    constructor(elementName, containerId, options = null, canvas = undefined) {
+        elementName = elementName.toLowerCase();
+        this.setContainerId(containerId);
+        this.phantomCanvas = canvas || this.interactionOverlay.querySelector("#phantomCanvas");
+        switch (elementName) {
+            case "note":
+                this.makeNewPhantomNote();
+                break;
+            case "line":
+                this.makeNewPhantomLine(options);
+                break;
+            case "timemarkers":
+                //this.makeNewTimeMarkers(options)
+                break;
+            default:
+                console.log("Element", elementName, "is not supported");
+                break;
+        }
+    }
+    makeNewPhantomNote() {
+        this.removePhantomNote();
+        if (this.container.classList.contains("clickmode") && this.interactionOverlay.querySelector("#phantomNote") === null) {
+            var circle = document.createElementNS(svgNS, "circle");
+            this.phantomCanvas.insertBefore(circle, this.phantomCanvas.firstChild);
+            circle.setAttribute("id", "phantomNote");
+            var r = 5;
+            circle.setAttribute("r", r.toString());
+            circle.setAttribute("fill", "black");
+            circle.setAttribute("opacity", "0.5");
+            circle.setAttribute("visibility", "hidden");
+            this.noteElement = circle;
+        }
+    }
+    makeNewPhantomLine(options) {
+        if (options.lineX == undefined || options.lineY == undefined) {
+            return;
+        }
+        if (this.container.classList.contains("clickmode")) {
+            new Promise((resolve) => {
+                var _a;
+                var line = document.createElementNS(svgNS, "line");
+                this.phantomCanvas.insertBefore(line, this.phantomCanvas.firstChild);
+                var width = 10;
+                var x1, x2, y1, y2;
+                y1 = y2 = options.lineY;
+                x1 = options.lineX - width;
+                x2 = options.lineX + width;
+                line.setAttribute("x1", x1.toString());
+                line.setAttribute("x2", x2.toString());
+                line.setAttribute("y1", y1.toString());
+                line.setAttribute("y2", y2.toString());
+                line.classList.add("phantomLine");
+                line.setAttribute("visibility", (_a = this.phantomCanvas.querySelector("#phantomNote")) === null || _a === void 0 ? void 0 : _a.getAttribute("visibility"));
+                resolve(true);
+            });
+        }
+    }
+    /**
+     * Draw markers in bar to approximate distances between notes.
+     * Division is always based on the selected duration in the toolbar and the time unit.
+     * @param options.lastStaffEnteredId Id of the staff where the markes will be drawn
+     * @returns
+     */
+    makeNewTimeMarkers(options) {
+        var _a;
+        if (options.lastStaffEnteredId == undefined)
+            return;
+        var staff = cq.getVrvSVG(this.containerId).querySelector("#" + options.lastStaffEnteredId);
+        var staffHeight = Array.from(staff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom - staff.querySelector(".staffLine").getBoundingClientRect().top;
+        var staffBegin = staff.closest(".measure").getAttribute("n") === "1" ?
+            staff.querySelector(".meterSig").getBoundingClientRect().right :
+            staff.getBoundingClientRect().left;
+        var staffWidth = staff.getBoundingClientRect().right - staffBegin;
+        var measureN = staff.closest(".measure").getAttribute("n");
+        var staffN = staff.getAttribute("n");
+        var ratio = parseInt(options.measureMatrix.get(staffN, measureN).meterSig.count) / parseInt(options.measureMatrix.get(staffN, measureN).meterSig.unit);
+        var numLines = mappings_1.NoteButtonIdToNum.get((_a = cq.getContainer(this.containerId).querySelector("#noteGroup > .selected")) === null || _a === void 0 ? void 0 : _a.id) * ratio;
+        var cutUnit = staffWidth / numLines;
+        var linePosX = new Array();
+        var linePosY = staff.querySelector(".staffLine").getBoundingClientRect().top;
+        for (var i = 0; i < numLines; i++) {
+            linePosX.push(staffBegin + i * cutUnit);
+        }
+        linePosX.forEach(l => {
+            var _a;
+            var line = document.createElementNS(svgNS, "line");
+            this.phantomCanvas.insertBefore(line, this.phantomCanvas.firstChild);
+            var x1, x2, y1, y2;
+            y1 = linePosY;
+            y2 = linePosY - staffHeight / 5;
+            x1 = x2 = l; //+ (staffWidth / numLines)
+            var coords1 = coordinates.transformToDOMMatrixCoordinates(x1, y1, this.phantomCanvas);
+            var coords2 = coordinates.transformToDOMMatrixCoordinates(x2, y2, this.phantomCanvas);
+            line.setAttribute("x1", coords1.x.toString());
+            line.setAttribute("x2", coords2.x.toString());
+            line.setAttribute("y1", coords1.y.toString());
+            line.setAttribute("y2", coords2.y.toString());
+            line.classList.add("phantomMarker");
+            line.setAttribute("visibility", (_a = this.phantomCanvas.querySelector("#phantomNote")) === null || _a === void 0 ? void 0 : _a.getAttribute("visibility"));
+        });
+    }
+    removePhantomNote() {
+        if (this.container.querySelector("#phantomNote") !== null) {
+            this.container.querySelector("#phantomNote").remove();
+        }
+    }
+    setNoteRadius(r) {
+        this.noteR = r;
+    }
+    setPhantomCanvas(canvas) {
+        this.phantomCanvas = canvas;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.vrvSVG = cq.getVrvSVG(id);
+        this.container = document.getElementById(id);
+        return this;
+    }
+    getNoteElement() {
+        return this.noteElement;
+    }
+}
+exports.default = PhantomElement;

package/src/scripts/js/gui/ScoreManipulator.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../constants");
+const cq = require("../utils/convenienceQueries");
+const manipFlag = "manipulator";
+/**
+ * Class for all manipulators (Buttons, Lists, etc) directly visible in the score
+ */
+class ScoreManipulator {
+    constructor() {
+    }
+    /**
+     *
+     * @param id Id for Elment
+     * @param classNames
+     * @param sign Plus or Minus sign
+     * @param posX
+     * @param posY
+     * @param size
+     * @param targetParent Parent to attach element to
+     * @param refId
+     * @returns
+     */
+    drawButton(id = null, classNames = null, sign, posX, posY, size, targetParent, refId) {
+        var _a;
+        var newSVG = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+        if (id !== null)
+            newSVG.setAttribute("id", id);
+        if (Array.from(this.interactionOverlay.querySelectorAll("maniplationCanvas *")).some(el => el.id === id)) {
+            return;
+        }
+        newSVG.classList.add(manipFlag);
+        newSVG.setAttribute("x", posX.toString());
+        newSVG.setAttribute("y", posY.toString());
+        newSVG.setAttribute("height", size.toString());
+        newSVG.setAttribute("width", size.toString());
+        if (classNames !== null) {
+            var cn = classNames.split(" ");
+            cn.forEach(c => {
+                newSVG.classList.add(c);
+            });
+        }
+        var circle = document.createElementNS(constants_1.constants._SVGNS_, "circle");
+        circle.setAttribute("id", "manipulationButton");
+        circle.setAttribute("cx", "50%");
+        circle.setAttribute("cy", "50%");
+        circle.setAttribute("r", "40%");
+        newSVG.append(circle);
+        if (sign === "-" || sign === "+") {
+            var horizonal = document.createElementNS(constants_1.constants._SVGNS_, "line");
+            horizonal.classList.add("signElement");
+            horizonal.setAttribute("x1", "20%");
+            horizonal.setAttribute("y1", "50%");
+            horizonal.setAttribute("x2", "80%");
+            horizonal.setAttribute("y2", "50%");
+            newSVG.append(horizonal);
+        }
+        if (sign === "+") {
+            var vertical = horizonal.cloneNode(true);
+            vertical.setAttribute("transform", "rotate(90)");
+            vertical.setAttribute("transform-origin", "center");
+            newSVG.append(vertical);
+        }
+        newSVG.setAttribute("refId", refId);
+        (_a = this.interactionOverlay.querySelector("#manipulatorCanvas")) === null || _a === void 0 ? void 0 : _a.appendChild(newSVG);
+    }
+    drawMeasureAdder() {
+        this.lastBline = Array.from(this.vrvSVG.querySelectorAll(".barLine")).reverse()[0].querySelector("path");
+        var lastBlineRect = this.lastBline.getBoundingClientRect();
+        var rootBBox = this.vrvSVG.getBoundingClientRect();
+        var blineTop = lastBlineRect.top - rootBBox.y;
+        //var blineRight = lastBlineRect.right + rootBBox.height*0.001 - rootBBox.x
+        var blineRight = lastBlineRect.right - rootBBox.x;
+        var containerSize = lastBlineRect.height * 0.4;
+        this.drawButton("measureAdder", null, "+", blineRight, blineTop, containerSize, this.lastBline.closest("svg").parentElement, "Add Measure");
+    }
+    drawMeasureRemover() {
+        var _a;
+        this.lastBline = Array.from((_a = document.getElementById(this.containerId)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".barLine")).reverse()[0].querySelector("path");
+        var lastBlineRect = this.lastBline.getBoundingClientRect();
+        var lastBlineRect = this.lastBline.getBoundingClientRect();
+        var rootBBox = this.vrvSVG.getBoundingClientRect();
+        var blineTop = lastBlineRect.top - rootBBox.y + lastBlineRect.height / 2;
+        var blineRight = lastBlineRect.right - rootBBox.x;
+        var containerSize = lastBlineRect.height * 0.4;
+        this.drawButton("measureRemover", null, "-", blineRight, blineTop, containerSize, this.lastBline.closest("svg").parentElement, "Remove Measure");
+    }
+    drawStaffManipulators() {
+        this.vrvSVG.querySelector(".measure").querySelectorAll(".staff").forEach(s => {
+            var rootBBox = this.vrvSVG.getBoundingClientRect();
+            var refStaffCoords = this.getStaffManipulatorCoords(s);
+            var refStaffX = refStaffCoords.x;
+            var refStaffYTop = refStaffCoords.yTop;
+            var refStaffYBottom = refStaffCoords.yBottom;
+            var refStaffWidth = refStaffCoords.width;
+            var refStaffHeight = refStaffCoords.height;
+            var posX = refStaffX - refStaffWidth * 0.5 - rootBBox.x;
+            var topY = refStaffYTop - refStaffHeight * 0.2 - rootBBox.y;
+            var containerSize = refStaffHeight / 4;
+            this.drawButton(null, "addStaff above", "+", posX, topY, containerSize, this.vrvSVG, s.id);
+            if (parseInt(s.getAttribute("n")) > 1) {
+                posX = refStaffX - rootBBox.x;
+                this.drawButton(null, "removeStaff above", "-", posX, topY, containerSize, this.vrvSVG, s.id);
+            }
+            posX = refStaffX - refStaffWidth * 0.5 - rootBBox.x;
+            var bottomY = refStaffYBottom - rootBBox.y;
+            var containerSize = (refStaffHeight / 4);
+            this.drawButton(null, "addStaff below", "+", posX, bottomY, containerSize, this.vrvSVG, s.id);
+            var staffCount = s.parentElement.querySelectorAll(".staff");
+            if (parseInt(s.getAttribute("n")) !== staffCount.length) {
+                posX = refStaffX - rootBBox.x;
+                this.drawButton(null, "removeStaff below", "-", posX, bottomY, containerSize, this.vrvSVG, s.id);
+            }
+        });
+    }
+    /**
+     * Get Coords for staf manipulators, since some browsers (Firefox) have problems with bounding boxes
+     * @param referenceStaff Staff beside which the staff manipulator should be placed
+     * @returns
+     */
+    getStaffManipulatorCoords(referenceStaff) {
+        var x;
+        var yTop;
+        var yBottom;
+        var bbox;
+        var width;
+        var height;
+        if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
+            bbox = referenceStaff.querySelector(".staffLine").getBoundingClientRect();
+            x = bbox.left;
+            yTop = bbox.top;
+            yBottom = Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom;
+        }
+        else {
+            bbox = referenceStaff.querySelector(".clef").getBoundingClientRect();
+            x = bbox.left;
+            yTop = bbox.top;
+            yBottom = bbox.bottom;
+        }
+        height = referenceStaff.querySelector(".clef").getBoundingClientRect().height;
+        width = referenceStaff.querySelector(".clef").getBoundingClientRect().width;
+        return { x: x, yTop: yTop, yBottom: yBottom, width: width, height: height };
+    }
+    setMEI(mei) {
+        this.mei = mei;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.container = document.getElementById(id);
+        this.interactionOverlay = cq.getInteractOverlay(this.containerId);
+        this.vrvSVG = cq.getVrvSVG(this.containerId);
+        return this;
+    }
+}
+exports.default = ScoreManipulator;