vibe-editor 0.0.4 → 0.0.5

package/src/scripts/js/scripts/gui/Cursor.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cq = require("../utils/convenienceQueries");
+class Cursor {
+    constructor(containerId) {
+        this.maxOpacity = 0;
+        this.clickHandler = (function clickHandler(e) {
+            //e.stopPropagation();
+            var selectRect = this.container.querySelector("#keyModeSelectRect");
+            if (selectRect !== null) {
+                selectRect.remove();
+                this.vrvSVG.querySelectorAll(".marked").forEach(m => {
+                    m.classList.remove("marked");
+                    this.interactionOverlay.querySelector("#" + m.id).classList.remove("marked");
+                });
+            }
+            var pt = new DOMPoint(e.clientX, e.clientY);
+            var rootMatrix = this.vrvSVG.getScreenCTM().inverse();
+            var ptX = pt.matrixTransform(rootMatrix).x;
+            var ptY = pt.matrixTransform(rootMatrix).y;
+            var element = this.findScoreTarget(ptX, ptY);
+            this.definePosById(element === null || element === void 0 ? void 0 : element.id);
+        }).bind(this);
+        this.setContainerId(containerId);
+        if (this.interactionOverlay.querySelector("#cursor") !== null) {
+            this.interactionOverlay.querySelector("#cursor").remove();
+        }
+        // this.cursor = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        // var root = document.getElementById(c._vrvSVGID_)
+        // var rootBBox = root.getBoundingClientRect()
+        // var rootWidth = rootBBox.width.toString()
+        // var rootHeigth = rootBBox.height.toString()
+        // this.cursor.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "))
+        //this.cursor = document.getElementById("manipulatorCanvas") as unknown as SVGSVGElement
+        this.cursorRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.setClickListener();
+    }
+    flashStart() {
+        var cursorOn = true;
+        var speed = 500;
+        this.cursorRect.style.opacity = this.maxOpacity.toString();
+        this.interval = setInterval(() => {
+            if (cursorOn) {
+                this.cursorRect.style.opacity = "0";
+                cursorOn = false;
+            }
+            else {
+                this.cursorRect.style.opacity = this.maxOpacity.toString();
+                cursorOn = true;
+            }
+        }, speed);
+    }
+    flashStop() {
+        clearInterval(this.interval);
+        this.cursorRect.style.opacity = "0";
+        this.cursorRect.remove();
+    }
+    setClickListener() {
+        this.setContainerId(this.containerId);
+        this.interactionOverlay.addEventListener('click', this.clickHandler);
+    }
+    removeClickListener() {
+        this.setContainerId(this.containerId);
+        this.interactionOverlay.removeEventListener('click', this.clickHandler);
+    }
+    findScoreTarget(x, y) {
+        this.posx = x;
+        this.posy = y;
+        var nbb = this.m2s.findScoreTarget(this.posx, this.posy, true, { left: true, right: false }); // only consider left Elements of click position
+        if (nbb != undefined && nbb !== null) {
+            var element = this.vrvSVG.querySelector("#" + nbb.id);
+        }
+        if (element === null || element == undefined)
+            return;
+        if (element.classList.contains("note") && element.closest(".chord") !== null) {
+            element = element.closest(".chord");
+        }
+        this.nextElement = element;
+        //console.log(this.nextElement)
+        return element;
+    }
+    /**
+     * Define position of Cursor by ID of Elements. Cursor will then be placed right of the Element
+     * @param id
+     */
+    definePosById(id) {
+        var _a, _b, _c;
+        // debugging 
+        this.setContainerId(this.containerId);
+        // this.vrvSVG.querySelectorAll("*[fill=green]").forEach(fg => {
+        //     fg.removeAttribute("fill")
+        // })
+        //this.vrvSVG.querySelector("#" + id)?.setAttribute("fill", "green")
+        //
+        if (id == undefined)
+            return;
+        this.flashStop();
+        this.cursor = this.interactionOverlay.querySelector("#manipulatorCanvas");
+        this.cursor.insertBefore(this.cursorRect, this.cursor.firstChild);
+        var element = this.vrvSVG.querySelector("#" + id);
+        element = (element === null || element === void 0 ? void 0 : element.classList.contains("layer")) ? element.closest(".staff") : element; //special rule for layer (== beginning of measure)
+        var elementBBox;
+        var currLayerY;
+        var currLayer;
+        var distToElement;
+        var elementHeight;
+        if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
+            distToElement = ["note", "rest", "chord", "keySig", "clef", "meterSig"].some(e => {
+                return element === null || element === void 0 ? void 0 : element.classList.contains(e);
+            }) ? 40 : 0;
+        }
+        else {
+            distToElement = ["note", "rest", "chord", "keySig", "clef", "meterSig"].some(e => {
+                return element === null || element === void 0 ? void 0 : element.classList.contains(e);
+            }) ? element.getBoundingClientRect().width + 10 : 0;
+        }
+        var ptLayer;
+        var parentMatrix = this.cursor.getScreenCTM().inverse();
+        //determine reference boundingbox for further computation of dimensions
+        if (element !== null) {
+            elementBBox = element.getBoundingClientRect();
+            currLayer = element.classList.contains("staff") ? element.querySelector(".layer") : element.closest(".layer"); //element : element.closest(".layer")
+            currLayerY = (currLayer === null || currLayer === void 0 ? void 0 : currLayer.getBoundingClientRect().y) || 0; //element.classList.contains("staff") ? element.getBoundingClientRect().y : element.closest(".layer")?.getBoundingClientRect().y || 0
+            this.nextElement = element;
+            this.isBol = false;
+        }
+        else {
+            currLayer = this.vrvSVG.querySelector(".layer[n=\"" + (parseInt(id[id.length - 1]) + 1).toString() + "\"]");
+            currLayerY = currLayer.getBoundingClientRect().y;
+            elementBBox = this.nextElement.getBoundingClientRect();
+            element = this.nextElement;
+            distToElement = -distToElement;
+            this.isBol = true;
+        }
+        ptLayer = new DOMPoint(0, currLayerY);
+        currLayerY = ptLayer.matrixTransform(parentMatrix).y;
+        if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
+            elementHeight = ((_a = element.querySelector(".stem")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || ((_b = element.querySelector("barLine")) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height) || 11;
+        }
+        else {
+            elementHeight = elementBBox.height;
+        }
+        //scaled height and width of elemnetBBox 
+        var ptLT = new DOMPoint(elementBBox.left, elementBBox.top);
+        ptLT = ptLT.matrixTransform(parentMatrix);
+        var ptRB = new DOMPoint(elementBBox.right, elementBBox.bottom);
+        ptRB = ptRB.matrixTransform(parentMatrix);
+        var ptWidth = ptRB.x - ptLT.x;
+        var ptHeight = ptRB.y - ptLT.y;
+        var drawChordRect;
+        if ((_c = this.container.querySelector("#chordButton")) === null || _c === void 0 ? void 0 : _c.classList.contains("selected")) {
+            drawChordRect = true;
+        }
+        else {
+            drawChordRect = false;
+        }
+        // set width and height
+        this.cursorRect.setAttribute("id", "cursor");
+        var ptCursor = new DOMPoint(elementBBox.x, elementBBox.y);
+        ptCursor = ptCursor.matrixTransform(parentMatrix);
+        if (!drawChordRect || navigator.userAgent.toLowerCase().indexOf("firefox") > -1) { // Firefox only gets the normal text cursor for chord mode :(
+            this.posx = ptCursor.x + distToElement;
+            this.posy = ptCursor.y;
+            this.height = ptHeight + 4;
+            this.cursorRect.setAttribute("width", "2px");
+            this.cursorRect.setAttribute("height", this.height.toString());
+            this.maxOpacity = 1;
+        }
+        else { // for chord mode
+            var padding = 4;
+            this.posx = ptCursor.x;
+            this.posy = currLayerY;
+            this.cursorRect.setAttribute("width", (ptWidth + padding).toString());
+            this.cursorRect.setAttribute("height", (ptHeight + padding).toString());
+            this.maxOpacity = 0.5;
+        }
+        this.cursorRect.setAttribute("x", this.posx.toString());
+        this.cursorRect.setAttribute("y", this.posy.toString());
+        this.cursorRect.setAttribute("refId", element.classList.contains("staff") ? currLayer.id : element.id);
+        this.flashStart();
+    }
+    isBOL() {
+        return this.isBol;
+    }
+    ///////// GETTER/ SETTER ////////////
+    getNextElement() {
+        return this.nextElement;
+    }
+    getPos() {
+        return { x: this.posx, y: this.posy };
+    }
+    setm2s(m2s) {
+        this.m2s = m2s;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.container = document.getElementById(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.vrvSVG = cq.getVrvSVG(id);
+        return this;
+    }
+}
+exports.default = Cursor;

package/src/scripts/js/scripts/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/scripts/gui/ScoreManipulator.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../constants");
+const cq = require("../utils/convenienceQueries");
+const coordinates_1 = require("../utils/coordinates");
+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);
+    }
+    drawMeasureManipulators() {
+        this.lastBline = Array.from(this.vrvSVG.querySelectorAll(".barLine")).reverse()[0].querySelector("path");
+        var lastBlineRect = coordinates_1.getDOMMatrixCoordinates(this.lastBline, this.vrvSVG);
+        var blineTopAdder = lastBlineRect.top;
+        var blineTopRemover = lastBlineRect.top + lastBlineRect.height / 2;
+        var blineRight = lastBlineRect.right;
+        var containerSize = lastBlineRect.height * 0.4;
+        this.drawButton("measureAdder", null, "+", blineRight, blineTopAdder, containerSize, this.lastBline.closest("svg").parentElement, "Add Measure");
+        this.drawButton("measureRemover", null, "-", blineRight, blineTopRemover, 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);
+            }
+        });
+    }
+    /**
+     * Draw 4 Buttons at the beginning of each new Line
+     */
+    drawVoiceSelectors() {
+        //var rootBBox = this.vrvSVG.getBoundingClientRect()
+        this.vrvSVG.querySelectorAll(".page").forEach(p => {
+            p.querySelector(".measure").querySelectorAll(".staff").forEach(staff => {
+                var _a;
+                var bbox = coordinates_1.getDOMMatrixCoordinates(staff.querySelector(".staffLine"), this.vrvSVG); //staff.querySelector(".staffLine").getBoundingClientRect()
+                var x = bbox.left; //- rootBBox.x
+                var yTop = bbox.top; //- rootBBox.y
+                var yBottom = coordinates_1.getDOMMatrixCoordinates(Array.from(staff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(staff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom - rootBBox.y
+                var staffHeight = (yBottom - yTop);
+                yTop -= staffHeight * 0.20; // center the boxes
+                var btnHeight = (staffHeight / 4) * 1.5;
+                for (let i = 0; i < 4; i++) {
+                    var btn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                    var btnRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                    var btnFO = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
+                    var btnText = document.createElement("div");
+                    btnFO.append(btnText);
+                    btnText.textContent = (i + 1).toString();
+                    btn.setAttribute("x", "3px");
+                    btn.setAttribute("y", (yTop + btnHeight * i).toString());
+                    btn.setAttribute("height", btnHeight.toString());
+                    btn.setAttribute("width", btnHeight.toString());
+                    btn.classList.add("voiceBtn");
+                    btn.classList.add("manipulator");
+                    btn.setAttribute("staffN", staff.getAttribute("n"));
+                    btn.setAttribute("btnN", (i + 1).toString());
+                    btn.setAttribute("id", "voiceSelect-" + staff.getAttribute("n") + "-" + (i + 1).toString());
+                    //btnText is relative to btn
+                    var fontSize = btnHeight;
+                    btnText.style.fontSize = fontSize.toString() + "px";
+                    btn.append(btnRect);
+                    btn.append(btnFO);
+                    (_a = this.interactionOverlay.querySelector("#manipulatorCanvas")) === null || _a === void 0 ? void 0 : _a.append(btn);
+                }
+            });
+        });
+    }
+    /**
+     * 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 = coordinates_1.getDOMMatrixCoordinates(referenceStaff, this.vrvSVG); //referenceStaff.querySelector(".staffLine").getBoundingClientRect()
+            x = bbox.left;
+            yTop = bbox.top;
+            yBottom = coordinates_1.getDOMMatrixCoordinates(Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0], this.vrvSVG).bottom; //Array.from(referenceStaff.querySelectorAll(".staffLine")).reverse()[0].getBoundingClientRect().bottom
+        }
+        else {
+            bbox = bbox = coordinates_1.getDOMMatrixCoordinates(referenceStaff.querySelector(".clef"), this.vrvSVG); //referenceStaff.querySelector(".clef").getBoundingClientRect()
+            x = bbox.left;
+            yTop = bbox.top;
+            yBottom = bbox.bottom;
+        }
+        const clefCoords = coordinates_1.getDOMMatrixCoordinates(referenceStaff.querySelector(".clef"), this.vrvSVG);
+        //height = referenceStaff.querySelector(".clef").getBoundingClientRect().height
+        //width = referenceStaff.querySelector(".clef").getBoundingClientRect().width
+        return { x: x, yTop: yTop, yBottom: yBottom, width: clefCoords.width, height: clefCoords.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;