vibe-editor 0.0.3 → 0.0.5

package/src/scripts/js/handlers/NoteDragHandler_deprecated.js

@@ -1,150 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const MeasureMatrix_1 = require("../datastructures/MeasureMatrix");
-const d3 = require("d3");
-const coordinates = require("../utils/coordinates");
-const cq = require("../utils/convenienceQueries");
-//@ts-ignore
-//const $ = H5P.jQuery;
-/**
- * @deprecated
- * Class that handles insert mode, events, and actions.
- */
-class NoteDragHandler {
-    constructor(containerId) {
-        this.wasDragged = false;
-        this.setContainerId(containerId);
-        this.dragInit();
-        this.noteDraggedEvent = new Event("noteDragged");
-    }
-    setListeners() {
-    }
-    removeListeners() {
-    }
-    resetListeners() {
-        this.removeListeners();
-        this.setListeners();
-    }
-    /**
-     * Initialize the dragging action and handler for selected elements.
-     */
-    dragInit() {
-        // Adding listeners
-        const dragBehaviour = d3.drag()
-            .on('start', dragStarted.bind(this))
-            .on('drag', this.dragging.bind(this))
-            .on('end', this.dragEnded.bind(this));
-        this.notes = document.querySelectorAll(".note, .notehead"); //d3.select("#" + this.containerId).selectAll(".note, .notehead"); 
-        this.draggedOverlayElement = null;
-        this.notes.call(dragBehaviour);
-        // Drag effects
-        function dragStarted() {
-            var _a;
-            this.draggedOverlayElement = d3.event.sourceEvent.currentTarget;
-            this.draggedRootSVGElement = (_a = this.rootSVG.querySelector("#" + this.draggedOverlayElement.getAttribute("refId"))) === null || _a === void 0 ? void 0 : _a.closest(".note");
-            this.dragStartCoords = [d3.event.x, d3.event.y]; //coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, document.getElementById(c._ROOTSVGID_))
-            this.dx = 0; //this.dragStartCoords[0]
-            this.dy = 0; //this.dragStartCoords[1]
-        }
-    }
-    dragging() {
-        if (this.draggedOverlayElement === null || this.draggedRootSVGElement === null)
-            return;
-        this.dx = d3.event.x;
-        this.dy = d3.event.y;
-        var overlayCoords = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, this.interactionOverlay);
-        var diffY = Math.abs(this.dy - this.dragStartCoords[1]);
-        if (diffY > 15) {
-            this.wasDragged = true;
-        }
-        //snap while dragging
-        this.m2m.defineNote(overlayCoords.x, overlayCoords.y, {});
-        var newNote = [this.m2m.getNewNote().pname, this.m2m.getNewNote().oct];
-        if (this.oldNote == undefined) {
-            this.oldNote = newNote;
-        }
-        const relativeY = d3.event.y - this.dragStartCoords[1]; //d3.event.y - this.dragStartCoords[1]
-        const relativeX = 0; //d3.event.x - this.dragStartCoords[0];
-        //overlay and defscale have completely different viewbox dimensions
-        var defScaleVBox = this.rootSVG.querySelector(".definition-scale").viewBox.baseVal;
-        var overlayVBox = this.interactionOverlay.viewBox.baseVal;
-        this.scaleX = defScaleVBox.width / overlayVBox.width;
-        this.scaleY = defScaleVBox.height / overlayVBox.height;
-        var shiftY = 10;
-        shiftY = relativeY < 0 ? -shiftY : shiftY;
-        if (!this.oldNote.every((v, i) => v === newNote[i])) {
-            this.draggedOverlayElement.setAttribute('transform', 'translate(' + [relativeX, relativeY + shiftY] + ')');
-            this.draggedRootSVGElement.setAttribute('transform', 'translate(' + [relativeX * this.scaleX, (relativeY + shiftY) * this.scaleY] + ')');
-            this.oldNote = newNote;
-        }
-    }
-    dragEnded() {
-        if (this.draggedOverlayElement === null || this.draggedRootSVGElement === null)
-            return;
-        if (this.wasDragged) {
-            this.notes.on("drag", null);
-            this.wasDragged = false;
-            this.draggedOverlayElement.dispatchEvent(this.noteDraggedEvent);
-            this.container.querySelector("#" + this.draggedRootSVGElement.id).classList.remove(this.deleteHandler.getDeleteFlag()); //remove flag to delete after dragging
-            const action = {
-                action: "drag",
-                param: { elementId: this.draggedRootSVGElement.id,
-                    //x: this.dx,
-                    //y: this.dy
-                }
-            };
-            this.editCallback(action).then(() => {
-                var attr = this.elementAttrCallback(this.draggedRootSVGElement.id);
-                var mm = new MeasureMatrix_1.default();
-                //mm.populateFromSVG(svg)
-                mm.populateFromMEI(this.currentMEI);
-                var staff = this.currentMEI.getElementById(this.draggedRootSVGElement.id).closest("staff");
-                var measure = staff.closest("measure");
-                var staffIdx = parseInt(staff.getAttribute("n")) - 1;
-                var measureIdx = parseInt(measure.getAttribute("n")) - 1;
-                var dur = this.currentMEI.getElementById(this.draggedRootSVGElement.id).closest("chord") !== null ? this.currentMEI.getElementById(this.draggedRootSVGElement.id).closest("chord").getAttribute("dur") : attr.dur;
-                let newNote = {
-                    pname: attr.pname,
-                    oct: attr.oct.toString(),
-                    dur: dur,
-                    keysig: mm.get(measureIdx, staffIdx).keysig,
-                    rest: false,
-                };
-                this.musicPlayer.generateTone(newNote);
-            });
-        }
-    }
-    //////////////// GETTER/ SETTER ////////////
-    setMusicPlayer(musicPlayer) {
-        this.musicPlayer = musicPlayer;
-        return this;
-    }
-    setCurrentMEI(xmlDoc) {
-        this.currentMEI = xmlDoc;
-        return this;
-    }
-    setM2M(m2m) {
-        this.m2m = m2m;
-        return this;
-    }
-    setDeleteHandler(deleteHandler) {
-        this.deleteHandler = deleteHandler;
-        return this;
-    }
-    setEditCallback(editCallback) {
-        this.editCallback = editCallback;
-        return this;
-    }
-    setElementAttrCallback(elementAttrCallback) {
-        this.elementAttrCallback = elementAttrCallback;
-        return this;
-    }
-    setContainerId(id) {
-        this.containerId = id;
-        this.container = document.getElementById(id);
-        this.interactionOverlay = cq.getInteractOverlay(id);
-        this.rootSVG = cq.getRootSVG(id);
-        return this;
-    }
-}
-exports.default = NoteDragHandler;

package/src/scripts/js/handlers/SelectionHandler.js

@@ -1,262 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const mappings_1 = require("../utils/mappings");
-const coordinates = require("../utils/coordinates");
-const cq = require("../utils/convenienceQueries");
-const marked = "marked";
-class SelectionHandler {
-    constructor(containerId) {
-        this.selectStarted = false;
-        this.isSelecting = false;
-        this.selectEnded = false;
-        this.isDragging = false;
-        this.selectDist = 0;
-        this.dragOnce = false;
-        /**
-         *  Mark clicked element
-         */
-        this.markedHandler = (function markedHandler(e) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            if (!this.shiftPressed) {
-                Array.from(this.container.querySelectorAll("." + marked)).forEach(n => {
-                    n.classList.remove(marked);
-                });
-            }
-            e.preventDefault();
-            var target = e.target;
-            if (target.getAttribute("refId") === null) {
-                target = target.closest("[refId]");
-                target = this.vrvSVG.querySelector("#" + target.getAttribute("refId"));
-            }
-            target = target.closest(".note, .rest, .mRest, .chord") || target;
-            target.classList.add(marked);
-            this.scoreGraph.setCurrentNodeById(target.id);
-            // change the selected durations in the toolbar
-            var firstMarkedNote = (_a = this.vrvSVG.querySelector(".chord.marked, .note.marked, .rest.marked")) === null || _a === void 0 ? void 0 : _a.id;
-            var meiNote = this.m2s.getCurrentMei().getElementById(firstMarkedNote);
-            if ((meiNote === null || meiNote === void 0 ? void 0 : meiNote.closest("chord")) !== null) {
-                meiNote = meiNote.closest("chord");
-            }
-            if ((firstMarkedNote === null || firstMarkedNote === void 0 ? void 0 : firstMarkedNote.length) > 0) {
-                (_b = document.getElementById(this.containerId)) === null || _b === void 0 ? void 0 : _b.querySelectorAll("#noteGroup *, #dotGroup *, #modGroup *, #articGroup *").forEach(b => b.classList.remove("selected"));
-                (_d = (_c = document.getElementById(this.containerId)) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".lastAdded")) === null || _d === void 0 ? void 0 : _d.forEach(la => la.classList.remove("lastAdded"));
-                //select buttons for given note state
-                var modBtnId = cq.getContainer(this.containerId).querySelector("#customToolbar #articGroup") !== null ? "artic" : "accid";
-                (_f = (_e = document.getElementById(this.containerId)) === null || _e === void 0 ? void 0 : _e.querySelector("#" + mappings_1.attrToModButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute(modBtnId)))) === null || _f === void 0 ? void 0 : _f.classList.add("selected");
-                if ((meiNote === null || meiNote === void 0 ? void 0 : meiNote.closest("chord")) !== null) {
-                    meiNote = meiNote.closest("chord");
-                }
-                (_h = (_g = document.getElementById(this.containerId)) === null || _g === void 0 ? void 0 : _g.querySelector("#" + mappings_1.numToNoteButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute("dur")))) === null || _h === void 0 ? void 0 : _h.classList.add("selected");
-                (_k = (_j = document.getElementById(this.containerId)) === null || _j === void 0 ? void 0 : _j.querySelector("#" + mappings_1.numToDotButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute("dots")))) === null || _k === void 0 ? void 0 : _k.classList.add("selected");
-            }
-        }).bind(this);
-        this.shiftKeyHandler = (function shiftKeyHandler(e) {
-            if (e.key === "Shift") {
-                if (e.type === "keydown") {
-                    this.shiftPressed = true;
-                }
-                else if (e.type === "keyup") {
-                    this.shiftPressed = false;
-                }
-            }
-            console.log("shiftPressed ", this.shiftPressed);
-        }).bind(this);
-        this.setContainerId(containerId);
-        this.selectStartEvent = new Event("selectStart");
-        this.selectEndEvent = new Event("selectEnd");
-        this.shiftPressed = false;
-        this.setKeyListeners();
-        var that = this;
-        this.getCoords = (function getCoords(e) {
-            this.selectDist = Math.sqrt(Math.abs(e.clientX - this.selectStartX) ** 2 + Math.abs(e.clientY - this.selectStartY) ** 2);
-            if (this.selectDist > 10) {
-                console.log("dragging", this.selectDist);
-                this.isDragging = true;
-                if (!this.dragOnce) {
-                    this.dragOnce = true;
-                    //this.interactionOverlay.dispatchEvent(new Event("removeClickHandler"))
-                    this.selStart(e);
-                }
-            }
-        }).bind(this);
-        this.selStart = (function selStart(e) {
-            e.preventDefault();
-            this.selectStartX = this.selectStartX || e.clientX;
-            this.selectStartY = this.selectStartY || e.clientY;
-            if (!this.isDragging)
-                return;
-            console.log("selectstart");
-            if (cq.getContainer(that.containerId).classList.contains("annotMode")) {
-                this.selEnd(e);
-                return;
-            }
-            //var pt = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, cq.getInteractOverlay(that.containerId))
-            var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, cq.getInteractOverlay(that.containerId));
-            that.initialX = pt.x; //d3.event.x
-            that.initialY = pt.y; //d3.event.y
-            if (!document.getElementById(that.containerId).classList.contains("harmonyMode") && !that.shiftPressed) { //!that.harmonyHandler.getGlobal()){
-                that.m2s.getNoteBBoxes().forEach(bb => {
-                    let note = that.vrvSVG.querySelector("#" + bb.id);
-                    note.classList.remove(marked);
-                });
-            }
-            that.initRect(that.initialX, that.initialY);
-            this.isSelecting = true;
-        }).bind(this);
-        this.selecting = (function selecting(e) {
-            e.preventDefault();
-            if (document.getElementById(that.containerId).classList.contains("annotMode"))
-                return; // prevent selecting when resizing annotation objects
-            if (!this.isSelecting)
-                return;
-            //var pt = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, cq.getInteractOverlay(that.containerId))
-            var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, cq.getInteractOverlay(that.containerId));
-            const curX = pt.x; //d3.event.x + container.scrollLeft 
-            const curY = pt.y; //d3.event.y + container.scrollTop 
-            const newX = curX < that.initialX ? curX : that.initialX;
-            const newY = curY < that.initialY ? curY : that.initialY;
-            const width = curX < that.initialX ? that.initialX - curX : curX - that.initialX;
-            const height = curY < that.initialY ? that.initialY - curY : curY - that.initialY;
-            that.updateRect(newX, newY, width, height);
-            var rect = that.interactionOverlay.querySelector("#selectRect");
-            var rectpt = coordinates.getDOMMatrixCoordinates(rect, that.vrvSVG);
-            var rectHeightpt = rectpt.height; //Math.abs(rectpt.y - ptBottom.matrixTransform(rootMatrix.getScreenCTM().inverse()).y) 
-            var rectWidthpt = rectpt.width; //Math.abs(rectpt.x - ptRight.matrixTransform(rootMatrix.getScreenCTM().inverse()).x)
-            var rx = rectpt.x;
-            var ry = rectpt.y;
-            var noteBBoxes = that.m2s.getNoteBBoxes();
-            noteBBoxes.forEach(bb => {
-                var note = cq.getVrvSVG(that.containerId).querySelector("#" + bb.id);
-                let stem = note.querySelector(".stem");
-                let accid = note.querySelector(".accid");
-                if (bb.x >= rx &&
-                    //bb.x <= rx + rectBBox.width &&
-                    bb.x <= rx + rectWidthpt &&
-                    bb.y >= ry &&
-                    //bb.y <= ry + rectBBox.height
-                    bb.y <= ry + rectHeightpt) {
-                    note.classList.add(marked);
-                    if (stem !== null)
-                        stem.classList.add(marked);
-                    var chord = note.closest(".chord");
-                    if (chord !== null) {
-                        //if(!chord.classList.contains(marked)) 
-                        let noteArr = Array.from(chord.querySelectorAll(".note"));
-                        if (noteArr.every(c => c.classList.contains(marked)) && noteArr.length > 0) {
-                            chord.classList.add(marked);
-                        }
-                    }
-                }
-                else if (!that.shiftPressed) {
-                    note.classList.remove(marked);
-                    stem === null || stem === void 0 ? void 0 : stem.classList.remove(marked);
-                    accid === null || accid === void 0 ? void 0 : accid.classList.remove(marked);
-                    var chord = note.closest(".chord");
-                    chord === null || chord === void 0 ? void 0 : chord.classList.remove(marked);
-                }
-            });
-        }).bind(this);
-        this.selEnd = (function selEnd(e) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            console.log("selectionend", e.target);
-            e.preventDefault();
-            this.isSelecting = false;
-            this.isDragging = false;
-            this.dragOnce = false;
-            this.selectStartX = undefined;
-            this.selectStartY = undefined;
-            this.selectDist = 0;
-            if (document.getElementById(that.containerId).classList.contains("annotMode"))
-                return; // prevent selecting when resizing annotation objects
-            var selectRect = cq.getInteractOverlay(that.containerId).querySelector("#selectRect");
-            if (selectRect !== null && (selectRect === null || selectRect === void 0 ? void 0 : selectRect.getAttribute("width")) !== "0" && (selectRect === null || selectRect === void 0 ? void 0 : selectRect.getAttribute("height")) !== "0") {
-                document.dispatchEvent(that.selectEndEvent);
-            }
-            selectRect === null || selectRect === void 0 ? void 0 : selectRect.remove();
-            var firstMarkedNote = (_a = that.vrvSVG.querySelector(".chord.marked, .note.marked, .rest.marked")) === null || _a === void 0 ? void 0 : _a.id;
-            var meiNote = that.m2s.getCurrentMei().getElementById(firstMarkedNote);
-            (_c = (_b = document.getElementById(that.containerId)) === null || _b === void 0 ? void 0 : _b.querySelectorAll(".lastAdded")) === null || _c === void 0 ? void 0 : _c.forEach(la => la.classList.remove("lastAdded"));
-            if ((firstMarkedNote === null || firstMarkedNote === void 0 ? void 0 : firstMarkedNote.length) > 0) {
-                (_d = document.getElementById(that.containerId)) === null || _d === void 0 ? void 0 : _d.querySelectorAll("#noteGroup *, #dotGroup *, #modGroup *, #articGroup *").forEach(b => b.classList.remove("selected"));
-                //select buttons for given note state
-                var modBtnId = that.container.querySelector("#customToolbar #articGroup") !== null ? "artic" : "accid";
-                (_f = (_e = document.getElementById(that.containerId)) === null || _e === void 0 ? void 0 : _e.querySelector("#" + mappings_1.attrToModButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute(modBtnId)))) === null || _f === void 0 ? void 0 : _f.classList.add("selected");
-                if ((meiNote === null || meiNote === void 0 ? void 0 : meiNote.closest("chord")) !== null) {
-                    meiNote = meiNote.closest("chord");
-                }
-                (_h = (_g = document.getElementById(that.containerId)) === null || _g === void 0 ? void 0 : _g.querySelector("#" + mappings_1.numToNoteButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute("dur")))) === null || _h === void 0 ? void 0 : _h.classList.add("selected");
-                (_k = (_j = document.getElementById(that.containerId)) === null || _j === void 0 ? void 0 : _j.querySelector("#" + mappings_1.numToDotButtonId.get(meiNote === null || meiNote === void 0 ? void 0 : meiNote.getAttribute("dots")))) === null || _k === void 0 ? void 0 : _k.classList.add("selected");
-            }
-            //this.interactionOverlay.dispatchEvent(new Event("resetClickHandler"))
-        }).bind(this);
-        this.resetListeners();
-    }
-    initRect(ulx, uly) {
-        const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        rect.setAttribute("x", ulx.toString());
-        rect.setAttribute("y", uly.toString());
-        rect.setAttribute("width", "0");
-        rect.setAttribute("height", "0");
-        rect.setAttribute("id", "selectRect");
-        rect.setAttribute("stroke", "black");
-        rect.setAttribute("stroke-width", "1px");
-        rect.setAttribute("fill", "none");
-        this.interactionOverlay.appendChild(rect);
-    }
-    updateRect(newX, newY, currentWidth, currentHeight) {
-        const rect = this.interactionOverlay.querySelector("#selectRect");
-        rect.setAttribute("x", newX.toString());
-        rect.setAttribute("y", newY.toString());
-        rect.setAttribute("width", currentWidth.toString());
-        rect.setAttribute("height", currentHeight.toString());
-    }
-    removeListeners() {
-        //d3.select("#" + this.containerId + " #interactionOverlay").on('mousedown.drag', null)
-        this.interactionOverlay.removeEventListener("mousedown", this.selStart);
-        this.interactionOverlay.removeEventListener("mousemove", this.selecting);
-        this.interactionOverlay.removeEventListener("mouseup", this.selEnd);
-        this.interactionOverlay.querySelectorAll(".note, .rest, .mRest, .notehead").forEach(el => {
-            el.removeEventListener("click", this.markedHandler);
-        });
-        this.interactionOverlay.removeEventListener("keydown", this.shiftKeyHandler);
-        this.interactionOverlay.removeEventListener("keyup", this.shiftKeyHandler);
-    }
-    setListeners() {
-        //this.interactionOverlay.call(this.dsa);
-        cq.getInteractOverlay(this.containerId).querySelectorAll(".note, .rest, .mRest, .notehead").forEach(el => {
-            el.addEventListener("click", this.markedHandler);
-        });
-        this.interactionOverlay.addEventListener("mousedown", this.selStart);
-        this.interactionOverlay.addEventListener("mousemove", this.selecting);
-        this.interactionOverlay.addEventListener("mousemove", this.getCoords);
-        this.interactionOverlay.addEventListener("mouseup", this.selEnd);
-    }
-    setKeyListeners() {
-        this.interactionOverlay.addEventListener("keydown", this.shiftKeyHandler);
-        this.interactionOverlay.addEventListener("keyup", this.shiftKeyHandler);
-    }
-    resetListeners() {
-        this.removeListeners();
-        this.setListeners();
-    }
-    ///////// GETTER/ SETTER ////////
-    setm2s(m2s) {
-        this.m2s = m2s;
-        return this;
-    }
-    setScoreGraph(sg) {
-        this.scoreGraph = sg;
-        return this;
-    }
-    setContainerId(id) {
-        this.containerId = id;
-        this.container = document.getElementById(id);
-        this.interactionOverlay = cq.getInteractOverlay(id);
-        this.vrvSVG = cq.getVrvSVG(id);
-        return this;
-    }
-    getIsSelecting() {
-        return this.isSelecting;
-    }
-}
-exports.default = SelectionHandler;

package/src/scripts/js/utils/RectWrapper.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const react_color_1 = require("react-color");
-class CoreReactWrapper extends react_1.default.Component {
-    render() {
-        return (react_1.default.createElement("div", null,
-            react_1.default.createElement(react_color_1.SketchPicker, null)));
-    }
-}

package/src/scripts/js/utils/SVGFiller.js

@@ -1,245 +0,0 @@
-"use strict";
-/**
- * Class to fill SVG of Score in HTML with information from underlying mei
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const random_1 = require("./random");
-class SVGFiller {
-    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 === null) {
-            return this;
-        }
-        this.classListMap = new Map();
-        svg.querySelectorAll("*").forEach(el => {
-            var _a;
-            //if(el.tagName.toLowerCase() === "g" && el.getAttribute("id") !== null){
-            if (el.getAttribute("id") !== null) {
-                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;
-    }
-    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 !== null) {
-            var value = this.classListMap.get(element.id);
-            if (value == undefined)
-                return this;
-            value.forEach(v => {
-                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 !== "") {
-                            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;
-    }
-    countBarlines() {
-        this.container.querySelectorAll(".barLine").forEach(bl => {
-            bl.querySelectorAll("path").forEach((p, idx) => {
-                p.setAttribute("n", (idx + 1).toString());
-            });
-        });
-    }
-    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;
-    }
-    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 = SVGFiller;