vibe-editor 0.0.4 → 0.0.5

package/src/scripts/js/scripts/utils/SVGEditor.js

@@ -0,0 +1,453 @@
+"use strict";
+/**
+ * Class to edit the rendered svg.
+ * E.g. Cache and Load Information from previous version of the SVG; Copy information form MEI to SVG (and vice versa); Edit DOM structure of Elements
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const cq = require("../utils/convenienceQueries");
+const meiOperation = require("./MEIOperations");
+const coords = require("../utils/coordinates");
+const random_1 = require("./random");
+const constants_1 = require("../constants");
+class SVGEditor {
+    constructor() {
+        this.allowedMeiClasses = ["marked"];
+        this.x = 0;
+        this.y = 0;
+    }
+    /**
+     * Fill SVG in Dom with relevant mei Information
+     * @param mei Document from MEI
+     */
+    fillSVG(mei) {
+        this.fillSystemCounts(mei);
+        this.countBarlines();
+        return this;
+    }
+    /**
+     * Fill measure, staff and layer with n attributes from MEI
+     * @param mei Document from MEI
+     */
+    fillSystemCounts(mei) {
+        var that = this;
+        var elements = Array.from(mei.querySelectorAll("measure, staff, layer"));
+        elements.forEach(e => {
+            if (e.id !== "") {
+                var svgElement = that.container.querySelector("#" + e.id);
+                if (svgElement === null || e.getAttribute("n") === null) {
+                    return;
+                }
+                svgElement.setAttribute("n", e.getAttribute("n"));
+            }
+        });
+        return this;
+    }
+    cacheClasses() {
+        //var svg = document.querySelector("#"+this.containerId + " #vrvSVG")
+        var svg = document.querySelector("#" + this.containerId);
+        if (!svg)
+            return this;
+        this.classListMap = new Map();
+        var hasLastAdded = !!svg.querySelector(".lastAdded");
+        svg.querySelectorAll("*").forEach(el => {
+            var _a;
+            //if(el.tagName.toLowerCase() === "g" && el.getAttribute("id") !== null){
+            if (el.tagName.toLocaleLowerCase() !== "g" && !el.getAttribute("id"))
+                return;
+            if (hasLastAdded) {
+                if (el.classList.contains("marked")) {
+                    el.classList.remove("marked");
+                }
+                // if(el.classList.contains("lastAdded")){
+                //     el.classList.replace("lastAdded", "marked")
+                // }
+            }
+            if (el.getAttribute("id") && !el.classList.contains("lastAdded")) {
+                if (!this.classListMap.has(el.id)) {
+                    this.classListMap.set(el.id, new Array());
+                }
+                var classes = (_a = el.getAttribute("class")) === null || _a === void 0 ? void 0 : _a.split(" ");
+                classes === null || classes === void 0 ? void 0 : classes.forEach(c => {
+                    if (!this.classListMap.get(el.id).includes(c)) {
+                        this.classListMap.get(el.id).push(c.slice());
+                    }
+                });
+            }
+        });
+        return this;
+    }
+    cacheStyles() {
+        //var svg = document.querySelector("#"+this.containerId + " #vrvSVG")
+        var svg = document.querySelector("#" + this.containerId);
+        if (svg === null) {
+            return this;
+        }
+        this.styleListMap = new Map();
+        svg.querySelectorAll("[style]").forEach(el => {
+            if (el.getAttribute("id")) {
+                const styles = el.getAttribute("style");
+                if (!this.styleListMap.has(el.id)) {
+                    this.styleListMap.set(el.id, "");
+                }
+                this.styleListMap.set(el.id, styles);
+            }
+        });
+        return this;
+    }
+    loadStyles() {
+        if (this.styleListMap == undefined) {
+            return this;
+        }
+        for (const [key, value] of this.styleListMap.entries()) {
+            var el = this.container.querySelector("#" + key);
+            if (el) {
+                el.setAttribute("style", value);
+            }
+        }
+        return this;
+    }
+    cacheScales() {
+        var svg = document.querySelector("#" + this.containerId);
+        if (svg === null) {
+            return this;
+        }
+        this.scaleListMap = new Map();
+        svg.querySelectorAll("[transform]").forEach(el => {
+            if (el.getAttribute("id") !== null) {
+                var tattr = el.getAttribute("transform");
+                if (tattr.includes("scale")) {
+                    if (!this.scaleListMap.has(el.id)) {
+                        this.scaleListMap.set(el.id, tattr);
+                    }
+                }
+            }
+        });
+        return this;
+    }
+    copyClassesFromMei(mei) {
+        if (this.classListMap == undefined) {
+            return this;
+        }
+        mei.querySelectorAll("score  *").forEach(el => {
+            var _a;
+            if (el.hasAttribute("class")) {
+                var id = el.getAttribute("id") || el.getAttribute("xml:id");
+                if (!this.classListMap.has(id)) {
+                    this.classListMap.set(id, new Array());
+                }
+                var classes = (_a = el.getAttribute("class")) === null || _a === void 0 ? void 0 : _a.split(" ");
+                classes === null || classes === void 0 ? void 0 : classes.forEach(c => {
+                    if (!this.classListMap.get(id).includes(c) && this.allowedMeiClasses.includes(c)) {
+                        this.classListMap.get(id).push(c.slice());
+                    }
+                });
+                el.removeAttribute("class");
+            }
+        });
+        return this;
+    }
+    /**
+     * Reload all the classes which where distributed before
+     * @returns this (for chaining convenience)
+     */
+    loadClasses(element = null) {
+        if (this.classListMap == undefined) {
+            return this;
+        }
+        if (element) {
+            var value = this.classListMap.get(element.id);
+            if (value == undefined)
+                return this;
+            value.forEach(v => {
+                if (v === "hideUI")
+                    return;
+                if (v !== "") {
+                    element.classList.add(v);
+                }
+            });
+        }
+        else {
+            for (const [key, value] of this.classListMap.entries()) {
+                var el = this.container.querySelector("#" + key);
+                if (el !== null) {
+                    //el.removeAttribute("class")
+                    value.forEach(v => {
+                        if (v === "hideUI")
+                            return;
+                        if (v !== "") {
+                            el.classList.add(v);
+                        }
+                    });
+                }
+            }
+        }
+        return this;
+    }
+    loadScales(element = null) {
+        if (this.scaleListMap == undefined) {
+            return this;
+        }
+        if (element !== null) {
+            var value = this.scaleListMap.get(element.id);
+            if (value == undefined)
+                return this;
+            element.style.transform = value;
+            element.setAttribute("transform", value);
+        }
+        else {
+            for (const [key, value] of this.scaleListMap.entries()) {
+                var el = this.container.querySelector("#" + key);
+                if (el !== null) {
+                    el.style.transform = value;
+                    el.setAttribute("transform", value);
+                }
+            }
+        }
+        return this;
+    }
+    repositionSVG(svg) {
+        var _a;
+        var transformList = ((_a = svg.getAttribute("transform")) === null || _a === void 0 ? void 0 : _a.split(") ")) || new Array();
+        console.log(svg.getAttribute("transform"), transformList);
+        var hasTranslate = false;
+        transformList.forEach((t, i) => {
+            if (t.includes("translate")) {
+                transformList[i] = "translate(" + this.x + " " + this.y + ")";
+                hasTranslate = true;
+            }
+            if (t.slice(-1) !== ")") {
+                transformList[i] = transformList[i] + ")";
+            }
+        });
+        if (!hasTranslate) {
+            transformList.push("translate(" + this.x + " " + this.y + ")");
+        }
+        var trattr = transformList.join(" ");
+        console.log(trattr);
+        svg.setAttribute("transform", trattr);
+        return this;
+    }
+    /**
+     * Merge all tspans in a harm object in the top tspan to avoid columns for (especially in Firefox browsers)
+     * @returns
+     */
+    clearTspan() {
+        var gelements = this.container.querySelectorAll("g .harm");
+        gelements.forEach(g => {
+            var textEl = g.querySelector("text");
+            var textTspan = g.querySelectorAll("tspan");
+            var text = "";
+            if (textTspan.length <= 2) {
+                return;
+            }
+            text = textTspan[0].textContent;
+            text = text.replace(/ /g, '');
+            text = text.replace(/\n/g, '');
+            textEl.querySelector("tspan").firstElementChild.textContent = text;
+            textEl.querySelector("tspan").firstElementChild.setAttribute("font-family", "VerovioText");
+            textTspan.forEach((tp, idx) => {
+                if (idx >= 2) {
+                    tp.remove();
+                }
+            });
+        });
+        return this;
+    }
+    drawLinesUnderSystems() {
+        this.container.querySelectorAll(".systemLine").forEach(sl => sl.remove());
+        this.container.querySelectorAll(".system").forEach(sys => {
+            var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            line.classList.add("systemLine");
+            var systemCoords = coords.getDOMMatrixCoordinates(sys.getBoundingClientRect(), sys.closest("svg"));
+            var y = systemCoords.bottom;
+            line.setAttribute("x1", systemCoords.left.toString());
+            line.setAttribute("y1", y.toString());
+            line.setAttribute("x2", systemCoords.right.toString());
+            line.setAttribute("y2", y.toString());
+            var defScale = sys.closest(".definition-scale");
+            defScale.prepend(line);
+        });
+    }
+    /**
+     * Modify the harm elements so that they have proper sub- and superscript numbers based on their used symbols (^ or _)
+     */
+    modifyHarm() {
+        // 0, 1 applies for sup; 2, 3 applies for sub
+        // create as <sup> element from ^{} or just ^
+        // create as <sub> element from _{} or just _
+        var indexingRegex = [/\^\{(.*?)\}/g, /\^\s*([^(]*)/g, /\_\{(.*?)\}/g, /\_\s*([^(]*)/g];
+        var sameParent; // cache for parent to not replace elements multiple times
+        this.container.querySelectorAll("[id].harm tspan").forEach(el => {
+            //mustn't be in figured base, and no need for trim indicates that text content node is leaf of tree
+            if (el.closest(".fb") !== null || el.textContent != el.textContent.trim())
+                return;
+            var elSiblings = el.querySelectorAll(":scope ~ tspan");
+            if (sameParent === el.parentElement) {
+                el.remove();
+                return;
+            }
+            if (elSiblings !== null)
+                sameParent = el.parentElement;
+            var inputString = elSiblings === null ? el.textContent : el.parentElement.textContent.replace(/[\n\s]/g, "");
+            el.textContent = "";
+            indexingRegex.forEach((reg, i) => {
+                var shift;
+                if (i < 2) {
+                    shift = "super";
+                }
+                else if (i >= 2 && i < 4) {
+                    shift = "sub";
+                }
+                var findStrings = inputString.match(reg);
+                if (findStrings !== null) {
+                    findStrings.forEach(fs => {
+                        var modPart = fs;
+                        ["^", "_", "{", "}"].forEach(s => modPart = modPart.replace(s, ""));
+                        if (modPart === "")
+                            return;
+                        modPart = "<tspan class=\"indexBase\" baseline-shift=\"" + shift + "\">" + modPart + "</tspan>";
+                        inputString = inputString.replace(fs, modPart);
+                    });
+                }
+            });
+            el.innerHTML = inputString;
+            // shift all tspans a little to the left so that they are all aligned vertically
+            el.querySelectorAll("tspan").forEach((t, i) => {
+                t.style.fontSize = "0.7em";
+                if (i > 0) {
+                    t.setAttribute("dx", (-(0.5) * i).toString() + "em");
+                }
+            });
+        });
+    }
+    /**
+ * Mark the current Measure as overfilled by writing "+!" over the barline
+ * @param currentMEI
+ */
+    markOverfilledMeasures(currentMEI) {
+        currentMEI.querySelectorAll("measure").forEach(m => {
+            m.querySelectorAll("layer").forEach(l => {
+                var layerRatio = meiOperation.getAbsoluteRatio(l);
+                var targetRatio = meiOperation.getMeterRatioLocal(currentMEI, l);
+                if (layerRatio > targetRatio) {
+                    var measureSVG = document.querySelector("#vrvSVG #" + m.id);
+                    if (measureSVG === null)
+                        return;
+                    var barLine = measureSVG.querySelector(".barLine");
+                    var coordinates = coords.getDOMMatrixCoordinates(barLine, barLine.closest("g"));
+                    var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
+                    textGroup.setAttribute("id", random_1.uuidv4());
+                    textGroup.setAttribute("targetId", barLine.id);
+                    var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+                    var textForeignObject = document.createElementNS(constants_1.constants._SVGNS_, "foreignObject");
+                    textForeignObject.classList.add("overfillMark");
+                    var textDiv = document.createElement("div");
+                    textDiv.setAttribute("contenteditable", "false");
+                    textDiv.textContent = "+!";
+                    text.append(textForeignObject);
+                    textForeignObject.setAttribute("x", (coordinates.x * 0.95).toString());
+                    textForeignObject.setAttribute("y", (-coordinates.y * 0.55).toString());
+                    textForeignObject.setAttribute("height", (coordinates.height * 2).toString());
+                    textForeignObject.setAttribute("width", (300).toString());
+                    textForeignObject.append(textDiv);
+                    textGroup.appendChild(text);
+                    barLine.insertAdjacentElement("afterend", textGroup);
+                }
+            });
+        });
+    }
+    countBarlines() {
+        this.container.querySelectorAll(".barLine").forEach(bl => {
+            bl.querySelectorAll("path").forEach((p, idx) => {
+                p.setAttribute("n", (idx + 1).toString());
+            });
+        });
+    }
+    /**
+     * Hide Rests of same duration in parallel layers. Also hide rests, when layer (n >= 2) is just rests.
+     * @param currentMEI MEI to parse and compute relationships. Provides IDs for elements in SVG.
+     * @returns this
+     */
+    hideRedundantRests(currentMEI) {
+        currentMEI.querySelectorAll("staff").forEach(s => {
+            var prevLayerElements;
+            const vrv = cq.getVrvSVG(this.containerId);
+            s.querySelectorAll("layer").forEach(l => {
+                if (parseInt(l.getAttribute("n")) === 1) {
+                    prevLayerElements = Array.from(l.children);
+                    return;
+                }
+                if (parseInt(l.getAttribute("n")) >= 2) {
+                    if (!prevLayerElements) {
+                        prevLayerElements = Array.from(l.children);
+                        return;
+                    }
+                    const notes = l.querySelectorAll("note");
+                    if (notes.length === 0) {
+                        Array.from(l.children).forEach(c => vrv.querySelectorAll(`#${c.id} use`).forEach(u => u.setAttribute("visibility", "hidden")));
+                    }
+                    else {
+                        Array.from(l.children).forEach(c => {
+                            prevLayerElements.forEach(ple => {
+                                var _a;
+                                const isRest = ple.tagName.toLowerCase().includes("rest") && c.tagName.toLowerCase().includes("rest");
+                                const sameDur = ple.getAttribute("dur") === c.getAttribute("dur");
+                                const sameTstamp = meiOperation.getTimestamp(ple) === meiOperation.getTimestamp(c);
+                                if (isRest && sameDur && sameTstamp) {
+                                    (_a = vrv.querySelector(`#${c.id} use`)) === null || _a === void 0 ? void 0 : _a.setAttribute("visibility", "hidden");
+                                }
+                            });
+                        });
+                    }
+                    prevLayerElements = Array.from(l.children);
+                }
+            });
+        });
+        return this;
+    }
+    distributeIds(element, propagation = false) {
+        if (propagation) {
+            var id = element.id !== "" ? element.id : element.getAttribute("refId");
+            Array.from(element.children).forEach(c => {
+                var selfId = c.id !== "" ? c.id : c.getAttribute("refId");
+                if (selfId === null && id !== null) {
+                    c.setAttribute("refId", id);
+                }
+                this.distributeIds(c, true);
+            });
+        }
+        else {
+            Array.from(element.querySelectorAll("*")).forEach(el => {
+                if (el.id === "") {
+                    el.setAttribute("id", random_1.uuidv4());
+                }
+            });
+        }
+        return this;
+    }
+    setActiveLayer() {
+        var container = cq.getContainer(this.containerId);
+        if (!container.querySelector(".layer.activeLayer")) {
+            container.querySelectorAll(".layer[n='1']").forEach(l => l.classList.add("activeLayer"));
+        }
+        container.querySelectorAll(".activeLayer").forEach(al => {
+            var staffN = al.closest(".staff").getAttribute("n");
+            var layerN = al.getAttribute("n");
+            container.querySelectorAll(`.staff[n='${staffN}'] > .layer[n='${layerN}']`).forEach(layer => {
+                layer.classList.add("activeLayer");
+            });
+        });
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.container = document.getElementById(containerId);
+        return this;
+    }
+    setXY(x, y) {
+        this.x = x || 0;
+        this.y = y || 0;
+        //console.log("müssen die koordinaten noch umgerechnet werden???", x, y)
+    }
+}
+exports.default = SVGEditor;

package/src/scripts/js/scripts/utils/Types.js

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

package/src/scripts/js/{utils/VerovioWrapper copy.js → scripts/utils/VerovioWrapper.js}

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const midi_1 = require("@tonejs/midi");
+const buffer_1 = require("buffer");
 //@ts-ignore
 //const $ = H5P.jQuery;
 /**
@@ -10,26 +12,22 @@ class VerovioWrapper {
         //@ts-ignore
         this.vrvToolkit = new verovio.toolkit() || null;
         this.r = 1;
-        if (this.isRetina()) {
-            this.r = 2;
-        }
-        this.widthValue = 2500;
+        // if (this.isRetina()) {
+        //   this.r = 2
+        // }
+        this.widthValue = 1500;
+        var pageWidth = (this.widthValue / (window.devicePixelRatio / this.r)) / (screen.availHeight / window.innerWidth);
         this.options = {
-            // from: 'mei',
             footer: 'none',
             header: 'none',
             pageMarginLeft: 50,
-            pageMarginTop: 100,
-            pageMarginBottom: 0,
+            pageMarginTop: 50,
+            adjustPageHeight: true,
             font: 'Bravura',
-            //adjustPageWidth: 0,
-            //adjustPageHeight: 0,
-            noJustification: 1,
-            pageWidth: (this.widthValue / (window.devicePixelRatio / this.r)) / (screen.availHeight / window.innerWidth),
-            //svgRemoveXlink: true,
+            pageWidth: pageWidth,
+            //pageHeight: pageWidth / 4,
+            //justifyVertically: true,
             svgViewBox: true,
-            //svgBoundingBoxes: true
-            //pageHeight: 60000
         };
         this.vrvToolkit.setOptions(this.options);
     }
@@ -59,7 +57,7 @@ class VerovioWrapper {
         };
         switch (data.action) {
             case 'renderData':
-                result.mei = this.renderData();
+                result.svg = this.renderData();
                 break;
             case 'getElementAttr':
                 result.attributes = this.getElementAttr();
@@ -79,7 +77,7 @@ class VerovioWrapper {
                 result.info = this.editInfo();
                 break;
             case 'renderToSVG':
-                result.svg = this.renderToSVG();
+                result.svg = this.renderToSVG(data.pageNo);
                 break;
             case 'renderToMidi':
                 result.midi = this.renderToMidi();
@@ -106,7 +104,9 @@ class VerovioWrapper {
         else {
             meiString = this.data.mei;
         }
-        return this.vrvToolkit.renderData(meiString, {});
+        var render = this.vrvToolkit.renderData(meiString, {});
+        // when page count reaches 2 then each one should be rendered seperately
+        return render;
     }
     getElementAttr() {
         return this.vrvToolkit.getElementAttr(this.data.elementId);
@@ -129,12 +129,20 @@ class VerovioWrapper {
     editInfo() {
         return this.vrvToolkit.editInfo();
     }
-    renderToSVG() {
-        return this.vrvToolkit.renderToSVG(1);
+    renderToSVG(pageNo) {
+        return this.vrvToolkit.renderToSVG(pageNo);
     }
     renderToMidi() {
         return this.vrvToolkit.renderToMIDI();
     }
+    getMidiJSON() {
+        var midiString = this.renderToMidi();
+        var buffer = buffer_1.Buffer.from(midiString, "base64");
+        return new midi_1.Midi(buffer);
+    }
+    getTimemap() {
+        return this.vrvToolkit.renderToTimemap();
+    }
     /**
      * Get Toolkit instance to use any method of verovio outside of score editor.
      * FOr all available methods go to: https://book.verovio.org/toolkit-reference/toolkit-methods.html
@@ -147,10 +155,16 @@ class VerovioWrapper {
         return this.options;
     }
     setWidthValue(wv) {
-        this.widthValue = wv;
+        if (typeof wv === "string")
+            wv = parseFloat(wv);
+        this.options.pageWidth = wv;
+        this.vrvToolkit.setOptions(this.options);
     }
     setHeightValue(hv) {
-        this.heightValue = hv;
+        if (typeof hv === "string")
+            hv = parseFloat(hv);
+        this.options.pageHeight = hv + 250;
+        this.vrvToolkit.setOptions(this.options);
     }
 }
 exports.default = VerovioWrapper;

package/src/scripts/js/scripts/utils/coordinates.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformToDOMMatrixCoordinates = exports.getDOMMatrixCoordinates = void 0;
+/**
+ * Get DOMMatrix coordnates of element according to parent canvas class. Returns null if no canvas is found. If element is DOMRect, canvas must be provided
+ * @param element
+ * @param canvas provide canvas for element, otherwise closest canvas class will be retrieved
+ * @returns
+ */
+function getDOMMatrixCoordinates(element, canvas = null) {
+    if (canvas === null) {
+        canvas = element instanceof Element ? element.closest(".canvas") : null;
+        if (element instanceof DOMRect) {
+            throw new Error("Canvas must be provided, if input is instance of DOMRect. Actual instance: " + element.constructor.name);
+        }
+        if (canvas === null)
+            return;
+    }
+    if (canvas.id === "vrvSVG")
+        canvas = canvas.previousElementSibling;
+    var canvasMatrix = canvas.getScreenCTM().inverse();
+    //var elementBBox = !(element instanceof Element) ? element : element.getBoundingClientRect()
+    var elementBBox;
+    try {
+        elementBBox = element.getBoundingClientRect();
+    }
+    catch (error) {
+        elementBBox = element;
+    }
+    var ptLT = new DOMPoint(elementBBox.left, elementBBox.top);
+    ptLT = ptLT.matrixTransform(canvasMatrix);
+    var ptRB = new DOMPoint(elementBBox.right, elementBBox.bottom);
+    ptRB = ptRB.matrixTransform(canvasMatrix);
+    var width = ptRB.x - ptLT.x;
+    var height = ptRB.y - ptLT.y;
+    return { left: ptLT.x, top: ptLT.y, right: ptRB.x, bottom: ptRB.y, width: width, height: height, x: ptLT.x, y: ptLT.y };
+}
+exports.getDOMMatrixCoordinates = getDOMMatrixCoordinates;
+/**
+ * Transforms the given coordinates for a given canvas
+ * @param x
+ * @param y
+ * @param canvas
+ * @returns
+ */
+function transformToDOMMatrixCoordinates(x, y, canvas) {
+    if (canvas.id === "vrvSVG")
+        canvas = canvas.previousElementSibling;
+    var canvasMatrix = canvas.getScreenCTM().inverse();
+    var pt = new DOMPoint(x, y);
+    pt = pt.matrixTransform(canvasMatrix);
+    return { x: pt.x, y: pt.y };
+}
+exports.transformToDOMMatrixCoordinates = transformToDOMMatrixCoordinates;

package/src/scripts/js/utils/Mouse2SVG.js

@@ -626,13 +626,20 @@ class Mouse2SVG {
      * @param orientation only consider elements which are left or right of given coordinates
      * @returns
      */
-    findScoreTarget(posX, posY, checkStaff = true, orientation = { left: true, right: true }) {
+    findScoreTarget(posX, posY, checkStaff = true, orientation = null, blackList = null) {
+        if (!orientation)
+            orientation = { left: true, right: true };
         var notes = this.getNoteBBoxes();
         var nextNote;
         var tempDist = Math.pow(10, 10);
         var i = 0;
         notes.forEach(n => {
             var _a, _b, _c, _d;
+            if (blackList) {
+                var blackListFilter = Array.from(this.getElementinVrvSVG(n.id).classList).filter(element => blackList.includes(element));
+                if (blackListFilter.length > 0)
+                    return;
+            }
             var x;
             var y;
             if (((_a = this.getElementinVrvSVG(n.id)) === null || _a === void 0 ? void 0 : _a.closest(".chord")) && navigator.userAgent.toLowerCase().indexOf("firefox") > -1) { // special rule for firefox browsers
@@ -647,11 +654,11 @@ class Mouse2SVG {
             if (this.vrvSVG.querySelector("#" + n.id) === null)
                 return;
             if (!this.vrvSVG.querySelector("#" + n.id).classList.contains("mRest")) { //mRest are excluded from this rule
-                if (orientation.left === false) {
+                if (!orientation.left) {
                     if (x < posX)
                         return; //exclude left elements
                 }
-                else if (orientation.right === false) {
+                else if (!orientation.right) {
                     if (x > posX)
                         return; // exclude right elements
                 }
@@ -659,7 +666,7 @@ class Mouse2SVG {
             var dist = Math.abs(x - posX);
             var staffCondition = n.parentStaff === this.getElementinVrvSVG((_d = this.lastStaffMouseEnter) === null || _d === void 0 ? void 0 : _d.getAttribute("refId"));
             staffCondition && (staffCondition = Array.from(this.container.querySelectorAll(".activeLayer")).some(l => n.parentLayer === l));
-            if (checkStaff === false) {
+            if (!checkStaff) {
                 staffCondition = true;
                 dist = Math.sqrt(Math.abs(x - posX) ** 2 + Math.abs(y - posY) ** 2);
             }