vibe-editor 0.0.0 → 0.0.1-dev

package/src/scripts/js/handlers/ScoreManipulatorHandler.js

@@ -5,19 +5,25 @@ const constants_1 = require("../constants");
 const meiOperation = require("../utils/MEIOperations");
 const meiConverter = require("../utils/MEIConverter");
 const cq = require("../utils/convenienceQueries");
+const mei_template_1 = require("../assets/mei_template");
 const manipSelector = ".manipulator";
 const canvasId = "manipulatorCanvas";
 /**
- * Handler for all options which could modulate the given score from within the score. These functions are related to all elements seen inside a score
+ * Handler for all options which could change the given score with methods which are not bound to the toolsbars.
+ * These functions are related to all elements seen inside a score. (Adding Staves, Measures and Layers)
  */
 class ScoreManipulatorHandler {
     constructor() {
+        this.cacheLayers = {};
         this.addMeasure = (function addMeasure(e) {
             e.target.dispatchEvent(this.manipulateEvent);
             e.preventDefault();
             e.stopPropagation();
             meiOperation.addMeasure(this.currentMEI);
-            this.loadDataCallback("last", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+            var that = this;
+            this.loadDataCallback("last", meiConverter.restoreXmlIdTags(this.currentMEI), false).then(() => {
+                that.setActiveLayers();
+            });
         }).bind(this);
         this.removeMeasure = (function removeMeasure(e) {
             e.target.dispatchEvent(this.manipulateEvent);
@@ -34,7 +40,10 @@ class ScoreManipulatorHandler {
             var relpos = target.classList.contains("below") ? "below" : "above";
             meiOperation.addStaff(this.currentMEI, document.getElementById(target.getAttribute("refId")), relpos);
             this.musicPlayer.resetMidiInstruments();
-            this.loadDataCallback("1", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+            var that = this;
+            this.loadDataCallback("1", meiConverter.restoreXmlIdTags(this.currentMEI), false).then(() => {
+                that.setActiveLayers();
+            });
         }).bind(this);
         this.removeStaff = (function removeStaff(e) {
             var target = e.target.closest(".manipulator");
@@ -50,6 +59,9 @@ class ScoreManipulatorHandler {
         this.removeFunction = (function removeElementsFunction() {
             this.removeElements();
         }).bind(this);
+        this.selectVoiceHandler = (function selectVoiceHandler(e) {
+            this.selectVoice(e);
+        }).bind(this);
         this.sm = new ScoreManipulator_1.default();
         this.manipulateEvent = new Event("manipulated");
     }
@@ -61,18 +73,19 @@ class ScoreManipulatorHandler {
         this.manipulatorCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
         this.manipulatorCanvas.setAttribute("id", canvasId);
         this.manipulatorCanvas.classList.add("canvas");
-        this.manipulatorCanvas.setAttribute("preserveAspectRatio", "xMinYMin meet");
-        this.manipulatorCanvas.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "));
+        //this.manipulatorCanvas.setAttribute("preserveAspectRatio", "xMinYMin meet")
+        //this.manipulatorCanvas.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "))
         (_a = this.interactionOverlay.querySelector("#" + canvasId)) === null || _a === void 0 ? void 0 : _a.remove();
         this.manipulatorCanvas.insertAdjacentElement("beforebegin", this.interactionOverlay.querySelector("#scoreRects"));
         this.interactionOverlay.append(this.manipulatorCanvas);
     }
     drawElements() {
         this.addCanvas();
-        this.sm.drawMeasureAdder();
-        this.sm.drawMeasureRemover();
+        this.sm.drawMeasureManipulators();
         this.sm.drawStaffManipulators();
+        this.sm.drawVoiceSelectors();
         this.setListeners();
+        return this;
     }
     removeElements() {
         //this.removeListeners()
@@ -91,6 +104,12 @@ class ScoreManipulatorHandler {
         this.interactionOverlay.querySelectorAll(".removeStaff").forEach(as => {
             as.addEventListener("click", that.removeStaff, true);
         });
+        this.interactionOverlay.querySelectorAll(".voiceBtn").forEach(vb => {
+            vb.addEventListener("click", that.selectVoiceHandler, true);
+        });
+        // if(!this.interactionOverlay.querySelector(".voiceBtn.selected")){
+        //     (this.interactionOverlay.querySelector(".voiceBtn") as HTMLElement).click()
+        // }
     }
     removeListeners() {
         var _a, _b;
@@ -103,20 +122,88 @@ class ScoreManipulatorHandler {
         this.interactionOverlay.querySelectorAll(".removeStaff").forEach(as => {
             as.removeEventListener("click", that.removeStaff);
         });
+        this.interactionOverlay.querySelectorAll(".voiceBtn").forEach(vb => {
+            vb.removeEventListener("click", that.selectVoiceHandler);
+        });
+    }
+    /**
+     * Logic for behaviour if when a voice btn is selected:
+     * Creating new layer, deactivating and reactivating layers.
+     * Afterwards the MEI will be rendered anew.
+     * @param e
+     */
+    selectVoice(e) {
+        var t = e.target.closest(".voiceBtn");
+        var staffN = t.getAttribute("staffN");
+        var btnN = t.getAttribute("btnN");
+        // change between selected and inactive button
+        if (t.classList.contains("selected")) {
+            t.classList.remove("selected");
+            t.classList.add("inactive");
+        }
+        else if (t.classList.contains("inactive")) {
+            t.classList.remove("inactive");
+            t.classList.add("selected");
+        }
+        var that = this;
+        //In this case there is no existing layer for the selected voice
+        if (!this.currentMEI.querySelector(`staff[n='${staffN}'] layer[n='${btnN}']`) && !this.cacheLayers[staffN + btnN]) {
+            meiOperation.addLayerForStaff(this.currentMEI, staffN, btnN);
+            this.loadDataCallback("1", meiConverter.restoreXmlIdTags(this.currentMEI), false).then(() => {
+                that.setActiveLayerClass(staffN, btnN);
+            });
+        }
+        else {
+            // if the button is really inactive, cache the layer for this layer and staff
+            if (t.classList.contains("inactive")) {
+                this.cacheLayers[staffN + btnN] = this.currentMEI.querySelectorAll(`staff[n='${staffN}'] layer[n='${btnN}']`);
+                console.log(this.cacheLayers);
+                this.currentMEI.querySelectorAll(`staff[n='${staffN}'] layer[n='${btnN}']`).forEach(el => el.remove());
+            }
+            else if (this.cacheLayers[staffN + btnN]) { // bring the layers back to life
+                this.currentMEI.querySelectorAll(`staff[n='${staffN}']`).forEach((staff, i) => {
+                    if (this.cacheLayers[staffN + btnN][i]) {
+                        staff.insertBefore(this.cacheLayers[staffN + btnN][i], staff.querySelector(`layer[n='${(parseInt(btnN) + 1).toString()}']`));
+                    }
+                    else {
+                        staff.append(new mei_template_1.default().createLayer(btnN));
+                    }
+                });
+                delete this.cacheLayers[staffN + btnN];
+            }
+            this.loadDataCallback("", meiConverter.restoreXmlIdTags(this.currentMEI), false).then(() => {
+                that.setActiveLayerClass(staffN, btnN);
+            });
+        }
+    }
+    setActiveLayerClass(staffN, btnN) {
+        this.interactionOverlay.querySelectorAll(`.voiceBtn[staffN='${staffN}'].selected`).forEach(vb => vb.classList.remove("selected"));
+        this.interactionOverlay.querySelectorAll(`.voiceBtn:not(.inactive)[staffN='${staffN}'][btnN='${btnN}']`).forEach(vb => vb.classList.add("selected"));
+        cq.getContainer(this.containerId).querySelectorAll(`.staff[n='${staffN}'] > .activeLayer`).forEach(layer => layer.classList.remove("activeLayer"));
+        cq.getContainer(this.containerId).querySelectorAll(`.staff[n='${staffN}'] > .layer[n='${btnN}']`).forEach(layer => {
+            layer.classList.add("activeLayer");
+        });
+        return this;
+    }
+    setActiveLayers() {
+        cq.getContainer(this.containerId).querySelectorAll(".activeLayer").forEach(al => {
+            var staffN = al.closest(".staff").getAttribute("n");
+            this.setActiveLayerClass(staffN, al.getAttribute("n"));
+        });
+        cq.getContainer(this.containerId).querySelectorAll("#vrvSVG .staff:not(:has(.activeLayer))").forEach(staff => {
+            this.setActiveLayerClass(staff.getAttribute("n"), "1");
+        });
     }
-    // drawFunction = (function drawFunction(e: TransitionEvent) {
-    //     var that = this
-    //     setTimeout(function () {
-    //         that.drawElements()
-    //     }, 500)
-    //     //this.drawElements()
-    // }).bind(this)
     //SETTER////
     setMEI(mei) {
         this.currentMEI = mei;
         this.sm.setMEI(mei);
         return this;
     }
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
     setMusicProcessor(mp) {
         this.musicPlayer = mp;
         return this;

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

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const d3 = require("d3");
 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
          */
@@ -61,16 +66,32 @@ class SelectionHandler {
         this.selectEndEvent = new Event("selectEnd");
         this.shiftPressed = false;
         this.setKeyListeners();
-        this.canvas = d3.select("#" + this.containerId + " #interactionOverlay"); // draw directly in svg
-        var dragSelectAction = d3.drag()
-            .on('start', selStart)
-            .on('drag', selecting)
-            .on('end', selEnd);
         var that = this;
-        function selStart() {
-            if (document.getElementById(that.containerId).classList.contains("annotMode"))
-                return; // prevent selecting when resizing annotation objects
-            var pt = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, cq.getInteractOverlay(that.containerId));
+        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()){
@@ -80,11 +101,16 @@ class SelectionHandler {
                 });
             }
             that.initRect(that.initialX, that.initialY);
-        }
-        function selecting() {
+            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
-            var pt = coordinates.transformToDOMMatrixCoordinates(d3.event.sourceEvent.clientX, d3.event.sourceEvent.clientY, cq.getInteractOverlay(that.containerId));
+            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;
@@ -129,12 +155,20 @@ class SelectionHandler {
                     chord === null || chord === void 0 ? void 0 : chord.classList.remove(marked);
                 }
             });
-        }
-        function selEnd() {
+        }).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 = that.interactionOverlay.querySelector("#selectRect");
+            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);
             }
@@ -153,31 +187,34 @@ class SelectionHandler {
                 (_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.dsa = dragSelectAction;
-        this.setListeners();
-        //this.canvas.call(dragSelectAction);
+            //this.interactionOverlay.dispatchEvent(new Event("resetClickHandler"))
+        }).bind(this);
+        this.resetListeners();
     }
     initRect(ulx, uly) {
-        this.canvas.append('rect')
-            .attr('x', ulx)
-            .attr('y', uly)
-            .attr('width', 0)
-            .attr('height', 0)
-            .attr('id', 'selectRect')
-            .attr('stroke', 'black')
-            .attr('stroke-width', "1px")
-            .attr('fill', 'none');
+        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) {
-        d3.select('#selectRect')
-            .attr('x', newX)
-            .attr('y', newY)
-            .attr('width', currentWidth)
-            .attr('height', 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);
+        //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);
         });
@@ -185,10 +222,14 @@ class SelectionHandler {
         this.interactionOverlay.removeEventListener("keyup", this.shiftKeyHandler);
     }
     setListeners() {
-        this.canvas.call(this.dsa);
+        //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);
@@ -214,5 +255,8 @@ class SelectionHandler {
         this.vrvSVG = cq.getVrvSVG(id);
         return this;
     }
+    getIsSelecting() {
+        return this.isSelecting;
+    }
 }
 exports.default = SelectionHandler;

package/src/scripts/js/handlers/SideBarHandler.js

@@ -158,6 +158,7 @@ class SidebarHandler {
             //this.interactionOverlay.querySelectorAll("*").forEach(c => {
             c.addEventListener("click", function (e) {
                 var _a, _b;
+                cq.getContainer(that.containerId).querySelectorAll(".marked").forEach(m => m.classList.remove("marked"));
                 if (c.classList.contains("marked")) {
                     c.classList.remove("marked");
                     (_a = that.getElementInSVG(c.getAttribute("refId"))) === null || _a === void 0 ? void 0 : _a.classList.remove("marked");
@@ -177,6 +178,7 @@ class SidebarHandler {
      * @param element
      */
     changeSelectedElementInSidebar(element) {
+        var _a, _b;
         if (!element.classList.contains("meterSig"))
             return;
         var baseEl = this.vrvSVG.querySelector("#" + element.getAttribute("refId"));
@@ -184,7 +186,7 @@ class SidebarHandler {
         var count = "";
         var unit = "";
         baseEl.querySelectorAll("use").forEach(u => {
-            var num = mappings_1.unicodeToTimesig.get(u.getAttribute("href").slice(1, 5));
+            var num = mappings_1.unicodeToTimesig.get(u.getAttribute("xlink:href").slice(1, 5));
             if (count === "") {
                 count = num;
             }
@@ -199,8 +201,9 @@ class SidebarHandler {
             }
             tempY = u.getAttribute("y");
         });
-        this.container.querySelector("#timeCount").value = count;
-        this.container.querySelector("#timeUnit").value = unit;
+        cq.getContainer(this.containerId).querySelectorAll("#timeDiv .selected").forEach(s => s.removeAttribute("selected"));
+        (_a = cq.getContainer(this.containerId).querySelector(`#timeCount > [value='${count}']`)) === null || _a === void 0 ? void 0 : _a.setAttribute("selected", "");
+        (_b = cq.getContainer(this.containerId).querySelector(`#timeUnit > [value='${unit}']`)) === null || _b === void 0 ? void 0 : _b.setAttribute("selected", "");
     }
     setTimeForSelectedElements(e) {
         var target = e.target;
@@ -362,6 +365,10 @@ class SidebarHandler {
             ds.style.width = (that.container.getBoundingClientRect().right - target.getBoundingClientRect().right).toString() + "px";
         });
     }
+    /**
+     * Find next possible element to drop element from sidebar on
+     * @param e
+     */
     findDropTarget(e) {
         /** TODO: dropflags müssen auch in scoreRects eigegeben werden */
         e.preventDefault();

package/src/scripts/js/handlers/WindowHandler.js

@@ -100,15 +100,15 @@ class WindowHandler {
             this.reloadTimer.push(setTimeout(function () {
                 that.updateXY();
                 var mei = meiConverter.restoreXmlIdTags(that.currentMEI);
-                that.loadDataCallback("", mei, false);
+                that.loadDataCallback("", mei, false, null);
                 that.reloadTimer = new Array();
             }, e.elapsedTime * 1000 + 10));
         }
-        else if (e.type === "resize" || e.type === "resizemove") {
+        else if (e.type === "resize" || e.type === "resizemove" || t.id.startsWith("zoom")) {
             this.reloadTimer.push(setTimeout(function () {
                 that.updateXY();
                 var mei = meiConverter.restoreXmlIdTags(that.currentMEI);
-                that.loadDataCallback("", mei, false);
+                that.loadDataCallback("", mei, false, null);
                 that.reloadTimer = new Array();
             }, 500));
         }
@@ -170,7 +170,28 @@ class WindowHandler {
         (_a = this.zoomTimer) === null || _a === void 0 ? void 0 : _a.forEach(zt => clearTimeout(zt));
         this.zoomTimer.push(setTimeout(function () {
             var svgContainer = cq.getContainer(that.containerId).querySelector("#svgContainer");
-            svgContainer.style.width = (100 * delta).toString() + "%";
+            svgContainer.querySelectorAll("#interactionOverlay, #vrvSVG").forEach((el) => {
+                el.style.transformOrigin = "0 0";
+                el.style.transform = "scale(" + delta.toString() + ")";
+                // if(el.id === "interactionOverlay"){
+                //     const transformValue = window.getComputedStyle(el).getPropertyValue('transform');
+                //     const matrix = new DOMMatrix(transformValue);
+                //     const scaleX = matrix.a;
+                //     const scaleY = matrix.d;
+                //     var vbsplit = el.getAttribute("viewBox").split(" ")
+                //     var newVb = new Array<string>()
+                //     vbsplit.forEach((n, i) => {
+                //         if(i === 2){
+                //             newVb.push((parseFloat(n)/scaleX).toString())
+                //         }else if(i === 3){
+                //             newVb.push((parseFloat(n)/scaleY).toString())
+                //         }else{
+                //             newVb.push((parseFloat(n)).toString())
+                //         }
+                //     })
+                //     el.setAttribute("viewBox", newVb.join(" "))
+                // }
+            });
         }, 10));
     }
     /**

package/src/scripts/js/utils/DOMCreator.js

@@ -125,7 +125,7 @@ exports.makeNewDatalist = makeNewDatalist;
 function makeNewSelect(id, optionValues, placeHolder = null) {
     var dataList = document.createElement("select");
     dataList.setAttribute("id", id);
-    if (placeHolder !== null) {
+    if (placeHolder) {
         var option = document.createElement("option");
         option.setAttribute("value", " ");
         option.textContent = placeHolder;

package/src/scripts/js/utils/MEIConverter.js

@@ -2,7 +2,7 @@
 //@ts-ignore
 //const $ = H5P.jQuery
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.restoreXmlIdTags = exports.standardizeAccid = exports.docToMei = exports.meiToDoc = exports.reformatMEI = void 0;
+exports.restoreXmlIdTags = exports.standardizeAccid = exports.docToMei = exports.meiToDoc = exports.cleanIdAttr = exports.reformatMEI = exports.cleanMEI = void 0;
 /**
 * clean mei to make it parsable as document
 * @param mei the mei to be cleaned
@@ -14,6 +14,7 @@ function cleanMEI(mei) {
     mei = mei.replace(/\s{2,}/g, ""); // delete all unnecessary whitespaces
     return mei;
 }
+exports.cleanMEI = cleanMEI;
 function reformatMEI(mei) {
     mei = mei.replace(/\n/g, ""); // delete all unnecessary newline
     mei = mei.replace(/\s{2,}/g, ""); // delete all unnecessary whitespaces
@@ -21,6 +22,17 @@ function reformatMEI(mei) {
     return mei;
 }
 exports.reformatMEI = reformatMEI;
+function cleanIdAttr(mei) {
+    mei.querySelectorAll("*").forEach(xi => {
+        if (!xi.hasAttribute('xml:id'))
+            return;
+        const id = xi.getAttribute("xml:id");
+        xi.removeAttribute("xml:id");
+        xi.setAttribute("id", id);
+    });
+    return mei;
+}
+exports.cleanIdAttr = cleanIdAttr;
 /**
  * Converts MEI-String to DOM-conform objec
  * @param mei