vibe-editor 0.0.0

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

@@ -0,0 +1,456 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../constants");
+const random_1 = require("../utils/random");
+const AnnotationChangeHandler_1 = require("../handlers/AnnotationChangeHandler");
+const CustomAnnotationShapeDrawer_1 = require("../handlers/CustomAnnotationShapeDrawer");
+const cq = require("../utils/convenienceQueries");
+const coordinates = require("../utils/coordinates");
+class Annotations {
+    constructor(containerId) {
+        ////HANDLERS////
+        this.clickHandler = (function clickHandler(e) {
+            e.preventDefault();
+            if (!this.annotationCanvas.classList.contains("front")) {
+                this.setToFront();
+            }
+            else {
+                this.setToBack();
+            }
+        }).bind(this);
+        this.createAnnotationHandler = (function createAnnotationHandler(e) {
+            var _a;
+            var t = e.target;
+            if ((_a = t.closest(".vseContainer")) === null || _a === void 0 ? void 0 : _a.classList.contains("clickmode"))
+                return; // creation should only be possible when annotation tab is on
+            var selectedAnnotations = this.interactionOverlay.querySelectorAll("#annotationCanvas .selected");
+            if (selectedAnnotations.length === 0) {
+                this.createAnnotation(e);
+            }
+            else {
+                selectedAnnotations.forEach(sa => {
+                    sa.classList.remove("selected");
+                });
+            }
+        }).bind(this);
+        this.selectHandler = (function selectHandler(e) {
+            this.select(e);
+        }).bind(this);
+        this.updateUndoStacks = (function updateUndoStacks(e) {
+            if (!cq.hasActiveElement(this.containerId)) {
+                return;
+            }
+            var canvasClone = this.interactionOverlay.querySelector("#annotationCanvas").cloneNode(true);
+            var listClone = this.container.querySelector("#annotList").cloneNode(true);
+            this.annotList = this.container.querySelector("#annotList");
+            this.undoStacks.push([canvasClone, listClone]);
+            this.annotationCanvas = this.interactionOverlay.querySelector("#annotationCanvas");
+        }).bind(this);
+        this.updateRedoStacks = (function updateRedoStacks(e) {
+            if (!cq.hasActiveElement(this.containerId)) {
+                return;
+            }
+            this.redoStacks.push([this.annotationCanvas, this.annotList]);
+            this.annotationCanvas = this.undoStacks[0][0];
+            this.annotList = this.undoStacks[0][1];
+        }).bind(this);
+        /**
+         * Set Contenteditable True when doubleclicked
+         * @param e Doubleclick
+         */
+        this.activateEditHandler = (function activateEditHandler(e) {
+            var target = e.target;
+            target.setAttribute("contenteditable", "true");
+            target.focus();
+            this.annotationChangeHandler.removeListeners();
+        }).bind(this);
+        /**
+         * Delete all selected elements by pressing delete. Except: When any Elements are in Editable mode
+         * @param e Keyboardevent (code = Delete)
+         */
+        this.deleteHandler = (function deleteHandler(e) {
+            if (!cq.hasActiveElement(this.containerId)) {
+                return;
+            }
+            var isValidKey = ["Delete", "Backspace"].some(code => e.code === code);
+            //var isInAnnotMode = this.container.classList.contains("annotMode")
+            var hasEditableElement = this.interactionOverlay.querySelectorAll(".selected [contenteditable=true]").length > 0;
+            var listHasFocus = Array.from(this.container.querySelectorAll("#annotList > *")).some(le => le === document.activeElement);
+            //if(isValidKey && isInAnnotMode && !hasEditableElement && !listHasFocus){
+            if (isValidKey && !hasEditableElement && !listHasFocus) {
+                this.interactionOverlay.querySelectorAll("#annotationCanvas .selected").forEach(el => {
+                    if (el.closest("g") !== null) {
+                        el.closest("g").remove();
+                    }
+                    else {
+                        el.remove();
+                    }
+                });
+                this.interactionOverlay.dispatchEvent(new Event("annotChanged"));
+                this.interactionOverlay.dispatchEvent(new Event("annotationCanvasChanged"));
+            }
+        }).bind(this);
+        this.submitLabelHandler = (function submitHandler(e) {
+            var target = e.target;
+            if ((e.key === "Enter" || e.key === "Escape")) {
+                target.blur();
+                this.interactionOverlay.dispatchEvent(new Event("annotChanged"));
+                this.interactionOverlay.dispatchEvent(new Event("annotationCanvasChanged"));
+            }
+        }).bind(this);
+        this.setContainerId(containerId);
+        this.addCanvas();
+        this.annotations = new Array();
+    }
+    addCanvas() {
+        this.interactionOverlay = cq.getInteractOverlay(this.containerId);
+        this.rootBBox = this.interactionOverlay.getBoundingClientRect(); //this.vrvSVG.getBoundingClientRect()
+        var rootWidth = this.rootBBox.width.toString();
+        var rootHeigth = this.rootBBox.height.toString();
+        var vb = this.interactionOverlay.getAttribute("viewBox"); //this.vrvSVG.getAttribute("viewBox")
+        if (this.annotationCanvas == undefined) {
+            this.annotationCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+            this.annotationCanvas.setAttribute("id", "annotationCanvas");
+            this.annotationCanvas.classList.add("canvas");
+            //this.annotationCanvas.classList.add("back")
+            //this.annotationCanvas.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "))
+        }
+        this.annotationCanvas.setAttribute("viewBox", vb);
+        if (this.annotationCanvas.classList.contains("front")) {
+            this.interactionOverlay.insertBefore(this.annotationCanvas, this.interactionOverlay.lastChild.nextSibling);
+        }
+        else {
+            this.interactionOverlay.insertBefore(this.annotationCanvas, this.interactionOverlay.firstChild);
+        }
+    }
+    setMenuClickHandler() {
+        //this.container.querySelector("#activateAnnot")?.addEventListener("click", this.clickHandler)
+        return this;
+    }
+    setListeners() {
+        this.resetTextListeners();
+        this.customAnnotationDrawer = new CustomAnnotationShapeDrawer_1.default(this.containerId);
+        this.customAnnotationDrawer.setUpdateCallback(this.resetTextListeners.bind(this));
+        var harmonyButton = this.container.querySelector("#harmonyAnnotButton");
+        var that = this;
+        this.container.querySelectorAll("#staticTextButton, #linkedAnnotButton").forEach(b => {
+            b.addEventListener("click", function () {
+                that.setToFront();
+                that.resetTextListeners();
+                b.dispatchEvent(new Event("annotationButtonClicked"));
+            });
+        });
+        harmonyButton.addEventListener("click", function () {
+            that.removeTextListeners();
+            harmonyButton.dispatchEvent(new Event("annotationButtonClicked"));
+        });
+    }
+    removeListeners() {
+        this.removeTextListeners();
+    }
+    setTextListeners() {
+        // this.customAnnotationDrawer = new CustomAnnotationShapeDrawer(this.containerId)
+        // this.customAnnotationDrawer.setUpdateCallback(this.resetTextListeners.bind(this))
+        this.annotationChangeHandler = this.annotationChangeHandler || new AnnotationChangeHandler_1.default(this.containerId);
+        this.annotationChangeHandler
+            .setUpdateCallback(this.resetTextListeners.bind(this))
+            .setm2s(this.m2s)
+            .setAnnotations(this.annotations)
+            .update()
+            .resetListeners();
+        this.interactionOverlay.addEventListener("dblclick", this.createAnnotationHandler);
+        var that = this;
+        this.interactionOverlay.querySelectorAll(".annotDiv").forEach(ad => {
+            ad.addEventListener("click", this.selectHandler);
+            ad.addEventListener("dblclick", this.activateEditHandler);
+            ad.addEventListener("focus", function () {
+                that.musicPlayer.removePlayListener();
+            });
+            ad.addEventListener("blur", function () {
+                that.musicPlayer.setPlayListener();
+            });
+            ad.addEventListener("keydown", this.submitLabelHandler);
+        });
+        this.interactionOverlay.querySelectorAll(".customAnnotShape").forEach(cas => {
+            cas.addEventListener("dblclick", this.selectHandler);
+        });
+        document.addEventListener("keydown", this.deleteHandler);
+        document.addEventListener("annotationCanvasChanged", this.updateUndoStacks, true);
+        //document.addEventListener("annotationCanvasChanged", this.updateRedoStacks)
+        return this;
+    }
+    removeTextListeners() {
+        var _a;
+        //this.container.querySelector("#activateAnnot").removeEventListener("click", this.clickHandler)
+        this.setMenuClickHandler();
+        this.interactionOverlay.removeEventListener("dblclick", this.createAnnotationHandler);
+        this.interactionOverlay.querySelectorAll(".annotDiv").forEach(ad => {
+            var _a;
+            (_a = ad.closest("svg")) === null || _a === void 0 ? void 0 : _a.classList.remove("selected");
+            ad.setAttribute("contenteditable", "false");
+            ad.removeEventListener("click", this.selectHandler);
+            ad.removeEventListener("dblclick", this.activateEditHandler);
+        });
+        this.interactionOverlay.querySelectorAll(".lineDragRect").forEach(ldr => ldr.remove());
+        this.interactionOverlay.querySelectorAll(".customAnnotShape").forEach(cas => {
+            cas.removeEventListener("dblclick", this.selectHandler);
+        });
+        document.removeEventListener("keydown", this.deleteHandler);
+        (_a = this.customAnnotationDrawer) === null || _a === void 0 ? void 0 : _a.removeListeners();
+        // interaction with all the annotations should always be possible
+        //this.annotationChangeHandler?.removeListeners()
+        return this;
+    }
+    resetTextListeners() {
+        this.removeTextListeners();
+        this.setTextListeners();
+    }
+    resetListeners() {
+        this.resetTextListeners();
+    }
+    setCustomShapeListener() {
+        var customShapes = null;
+    }
+    /**
+     * Select a specific annotation methon based on selected button
+     * @param e
+     */
+    createAnnotation(e) {
+        var _a;
+        var selectedButton = (_a = this.container.querySelector("#annotGroupKM > .selected")) === null || _a === void 0 ? void 0 : _a.id;
+        if (selectedButton === null)
+            return;
+        switch (selectedButton) {
+            case "linkedAnnotButton":
+                this.createTextAnnotation(e, selectedButton);
+                break;
+            case "staticTextButton":
+                this.createTextAnnotation(e, selectedButton);
+                break;
+            case "harmonyAnnotButton":
+                //this.createHarmonyAnnot(e)
+                console.log(selectedButton, "Please implement me o(；△；)o");
+                break;
+            default:
+                console.log("There is no implementation at all");
+        }
+    }
+    /**
+     * Create a new linked annotation Instance
+     * @param e
+     * @returns
+     */
+    createTextAnnotation(e, textButtonId) {
+        if (e.target.id !== this.interactionOverlay.id) {
+            return;
+        }
+        this.setToFront();
+        var selcount = 0;
+        this.annotationCanvas.querySelectorAll(":scope > .selected").forEach(el => {
+            el.classList.remove("selected");
+            selcount += 1;
+        });
+        if (selcount > 0) {
+            return;
+        }
+        var isLinked = false;
+        var isStaticText = false;
+        switch (textButtonId) {
+            case "linkedAnnotButton":
+                isLinked = true;
+                break;
+            case "staticTextButton":
+                isStaticText = true;
+                break;
+        }
+        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, cq.getInteractOverlay(this.containerId));
+        var posx = pt.x; //matrixTransform(rootMatrix).x //e.pageX - this.rootBBox.x - window.pageXOffset
+        var posy = pt.y; //matrixTransform(rootMatrix).y //e.pageY - this.rootBBox.y - window.pageYOffset
+        var annotationTarget = this.m2s.findScoreTarget(posx, posy, false);
+        var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
+        textGroup.setAttribute("id", random_1.uuidv4());
+        textGroup.setAttribute("targetId", annotationTarget.id);
+        var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+        if (isLinked)
+            text.classList.add("annotLinkedText");
+        else if (isStaticText)
+            text.classList.add("annotStaticText");
+        var textForeignObject = document.createElementNS(constants_1.constants._SVGNS_, "foreignObject");
+        textForeignObject.classList.add("annotFO");
+        var textDiv = document.createElement("div");
+        textDiv.setAttribute("contenteditable", "false");
+        textDiv.setAttribute("data-text", "New Annotation");
+        textDiv.textContent = "";
+        textDiv.classList.add("annotDiv");
+        text.append(textForeignObject);
+        this.container.appendChild(textDiv);
+        var rectPadding = 5;
+        // text.setAttribute("x", "0")
+        // text.setAttribute("y", "0")
+        textForeignObject.setAttribute("x", (posx + rectPadding).toString());
+        textForeignObject.setAttribute("y", posy.toString());
+        textForeignObject.setAttribute("height", (50 + 2 * rectPadding + 10).toString());
+        textForeignObject.setAttribute("width", (50 + 2 * rectPadding + 50).toString());
+        if (isLinked) {
+            var line = document.createElementNS(constants_1.constants._SVGNS_, "line");
+            line.classList.add("annotLine");
+            line.setAttribute("x2", textForeignObject.x.baseVal.valueAsString);
+            line.setAttribute("y2", textForeignObject.y.baseVal.valueAsString);
+            line.setAttribute("x1", annotationTarget.x.toString()); //(annotationTarget.x - this.rootBBox.x - window.pageXOffset).toString())
+            line.setAttribute("y1", annotationTarget.y.toString()); //(annotationTarget.y - this.rootBBox.y - window.pageYOffset).toString())
+            line.classList.add("annotLine");
+            textGroup.appendChild(line);
+        }
+        textForeignObject.append(textDiv);
+        textGroup.appendChild(text);
+        var newAnnot = {
+            sourceID: textGroup.id,
+            targetID: annotationTarget.id,
+            // relativePos: {
+            //     x: textGroup.getBoundingClientRect().x - annotationTarget.getBoundingClientRect().x, 
+            //     y: textGroup.getBoundingClientRect().y - annotationTarget.getBoundingClientRect().y
+            // }
+        };
+        this.annotations.push(newAnnot);
+        this.annotationCanvas.appendChild(textGroup);
+        this.deactivateEdit();
+        this.resetTextListeners();
+        this.interactionOverlay.dispatchEvent(new Event("annotChanged"));
+        this.interactionOverlay.dispatchEvent(new Event("annotationCanvasChanged"));
+    }
+    /**
+     * Mark an annotation as selected.
+     * @param e
+     */
+    select(e) {
+        var _a, _b;
+        e.stopPropagation(); //do not trigger other events
+        var t = e.target;
+        if (t.classList.contains("annotDiv") && t.closest(".annotLinkedText") !== null) { // only apply for linked texts
+            //Add A selection Rect to line target
+            this.interactionOverlay.querySelectorAll(".lineDragRect").forEach(ldr => ldr.remove());
+            var line = t.closest("g").querySelector(".annotLine");
+            //Rect attacted to x2 target
+            var lineDragRect = document.createElementNS(constants_1.constants._SVGNS_, "rect");
+            t.closest("g").appendChild(lineDragRect);
+            lineDragRect.classList.add("lineDragRect");
+            lineDragRect.classList.add("x2");
+            lineDragRect.setAttribute("x", line.x2.baseVal.valueAsString);
+            lineDragRect.setAttribute("y", line.y2.baseVal.valueAsString);
+            //Rect attacted to x1 target
+            lineDragRect = document.createElementNS(constants_1.constants._SVGNS_, "rect");
+            t.closest("g").appendChild(lineDragRect);
+            lineDragRect.classList.add("lineDragRect");
+            lineDragRect.classList.add("x1");
+            lineDragRect.setAttribute("x", line.x1.baseVal.valueAsString);
+            lineDragRect.setAttribute("y", line.y1.baseVal.valueAsString);
+            //this.AnnotationLineHandler.initDragRects()
+        }
+        (_b = (_a = t === null || t === void 0 ? void 0 : t.closest("svg")) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("selected");
+        this.annotationChangeHandler.resetListeners();
+    }
+    deactivateEdit() {
+        this.interactionOverlay.querySelectorAll(".annotDiv").forEach(ad => {
+            ad.setAttribute("contenteditable", "false");
+            ad.removeEventListener("dblclick", this.activateEditHandler);
+        });
+        this.annotationChangeHandler.removeListeners();
+    }
+    updateCanvas() {
+        var _a;
+        this.addCanvas();
+        (_a = this.annotationChangeHandler) === null || _a === void 0 ? void 0 : _a.update();
+        if (this.annotationCanvas.classList.contains("back")) {
+            this.removeListeners();
+        }
+        else {
+            this.resetTextListeners();
+        }
+    }
+    updateAnnotationList(annotionCanvs) {
+        //TODO: Aktuallsieren des Datenmodells aus den Informarionen in der SVG: übersetzen der SVG in Annotation-Objekte
+        var that = this;
+        this.annotationCanvas = annotionCanvs;
+        this.annotationCanvas.querySelectorAll(":scope > g").forEach(g => {
+            var a = {
+                sourceID: g.id,
+                targetID: g.getAttribute("targetId")
+            };
+            that.annotations.push(a);
+        });
+        this.interactionOverlay.dispatchEvent(new Event("annotChanged"));
+        this.resetTextListeners();
+    }
+    /////////// UTILITIES //////////////
+    /**
+     * Put annotationCanvas to Front for editing
+     * @returns
+     */
+    setToFront() {
+        if (this.annotationCanvas.classList.contains("front")) {
+            return this;
+        }
+        this.annotationCanvas.classList.remove("back");
+        this.annotationCanvas.classList.add("front");
+        this.interactionOverlay.insertBefore(this.getAnnotationCanvas(), this.interactionOverlay.lastChild.nextSibling);
+        this.setListeners();
+        this.container.classList.forEach(c => {
+            if (c.toLowerCase().includes("mode")) { // ensure to only allow one mode when switching to annotMode
+                this.container.classList.remove(c);
+            }
+        });
+        this.container.classList.add("annotMode");
+        return this;
+    }
+    /**
+     * Set annotationCanvas to Back, when in different mode
+     * @returns
+     */
+    setToBack() {
+        // if( this.annotationCanvas.classList.contains("back")){return}
+        // this.annotationCanvas.classList.remove("front")
+        // this.annotationCanvas.classList.add("back")
+        // if((this.getAnnotationCanvas() !== (this.interactionOverlay.firstChild as SVGSVGElement) && this.getAnnotationCanvas() !== null)){
+        //     this.interactionOverlay.insertBefore(this.getAnnotationCanvas(), this.interactionOverlay.firstChild)
+        // }
+        // this.removeListeners()
+        // this.container.classList.remove("annotMode")
+        return this;
+    }
+    ////////// GETTER/ SETTER////////////
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setMusicProcessor(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        return this;
+    }
+    getAnnotationCanvas() {
+        return this.interactionOverlay.querySelector("#annotationCanvas") || this.annotationCanvas;
+    }
+    setAnnotationCanvas(annotationCanvas) {
+        this.updateAnnotationList(annotationCanvas);
+    }
+    getAnnotationChangeHandler() {
+        return this.annotationChangeHandler;
+    }
+    setUndoStacks(arr) {
+        if (arr[0] == undefined || this.undoStacks == undefined) {
+            this.undoStacks = arr;
+            var canvasClone = this.interactionOverlay.querySelector("#annotationCanvas").cloneNode(true);
+            var listClone = this.container.querySelector("#annotList").cloneNode(true);
+            this.undoStacks.push([canvasClone, listClone]);
+            //this.annotationCanvas = document.getElementById("annotationCanvas") as unknown as SVGSVGElement
+        }
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.container = document.getElementById(id);
+        this.vrvSVG = cq.getVrvSVG(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        return this;
+    }
+}
+exports.default = Annotations;

package/src/scripts/js/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;