vibe-editor 0.0.0 → 0.0.1

package/src/scripts/js/utils/MEIOperations.js

@@ -1,20 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setArticulation = exports.getTimestamp = exports.getElementTimestampById = exports.insertTempo = exports.insertMeter = exports.replaceMeterInScoreDef = exports.insertKey = exports.replaceKeyInScoreDef = exports.insertClef = exports.replaceClefinScoreDef = exports.paste = exports.createTuplet = exports.removeStaff = exports.addStaff = exports.removeMeasure = exports.addMeasure = exports.cleanUp = exports.elementIsOverfilling = exports.changeDur = exports.changeDurationsInLayer = exports.fillLayerWithRests = exports.fillWithRests = exports.disableFeatures = exports.changeMeter = exports.transposeByStep = exports.mergeArticToParent = exports.mergeSectionScoreDefToLayer = exports.adjustAccids = exports.extrapolateMeter = exports.getAbsoluteRatio = exports.connectNotes = exports.addToMEI = exports.getMeterRatioLocal = exports.removeFromMEI = void 0;
+exports.setArticulation = exports.getTimestamp = exports.getElementTimestampById = exports.insertTempo = exports.insertMeter = exports.replaceMeterInScoreDef = exports.insertKey = exports.replaceKeyInScoreDef = exports.insertClef = exports.replaceClefinScoreDef = exports.paste = exports.createTuplet = exports.addLayerForStaff = exports.removeStaff = exports.addStaff = exports.removeMeasure = exports.addMeasure = exports.cleanUp = exports.elementIsOverfilling = exports.changeDur = exports.changeDurationsInLayer = exports.fillLayerWithRests = exports.fillWithRests = exports.disableFeatures = exports.changeMeter = exports.transposeByStep = exports.mergeArticToParent = exports.mergeSectionScoreDefToLayer = exports.adjustAccids = exports.extrapolateMeter = exports.getAbsoluteRatio = exports.connectNotes = exports.addToMEI = exports.getMeterRatioLocal = exports.removeFromMEI = void 0;
 const meiConverter = require("./MEIConverter");
 const random_1 = require("./random");
 const constants_1 = require("../constants");
 const mappings_1 = require("./mappings");
 const mei_template_1 = require("../assets/mei_template");
 const MeasureMatrix_1 = require("../datastructures/MeasureMatrix");
+/**
+ * This script is a collection of functions which help to manipulate the underlying MEI, so that it can be renderd anew.
+ * E.g.: Add and remove notes, process beams and slurs, cleanup empty elements, etc.
+ *
+ * Some extract features from the MEI which are not apparent in the MEI itself, like processing ratios and relationsships between notes.
+ *
+ */
 const countableNoteUnitSelector = ":scope > *[dur]:not([grace])";
 const overfillMeasure = false;
 const siblingNames = ["note", "chord", "clef", "beam"];
-// ":scope > note:not([grace])," +
-// ":scope > chord," +
-// ":scope > beam > chord," +
-// ":scope > beam > note:not([grace])," +
-// ":scope > rest"
 ////// DELETE //////
 /**
  * Remove Elements from MEI.
@@ -67,14 +69,7 @@ function removeFromMEI(scoreElements, currentMEI) {
                 }
             }
         });
-        //removeEmptyElements(currentMEI)
-        // For now: No Shifts (22.07.2021)
-        // if($(".measure").length > 1){
-        //   checkDeleteShifts(currentMEI);
-        // }
         cleanUp(currentMEI);
-        //fillWithRests(currentMEI)
-        // Warum ist das ein Problem?
         currentMEI = meiConverter.restoreXmlIdTags(currentMEI);
         resolve(currentMEI);
     });
@@ -161,12 +156,14 @@ exports.getMeterRatioLocal = getMeterRatioLocal;
  * @returns mei
  */
 function addToMEI(newSound, currentMEI, replace = false, scoreGraph = null) {
-    var _a, _b;
+    var _a;
     //return new Promise<Document>((resolve): void => {
     var currMeiClone = currentMEI.cloneNode(true);
     var newElem;
     var nearestNoteIsSameDurRest = false;
     if (newSound.hasOwnProperty("pname")) {
+        if (!newSound.nearestNoteId)
+            return currentMEI;
         var newNote = newSound;
         if (newNote.rest) {
             newElem = currentMEI.createElement("rest");
@@ -264,7 +261,7 @@ function addToMEI(newSound, currentMEI, replace = false, scoreGraph = null) {
                     }
                 }
                 if (replace) {
-                    let ms = Array.from(trueSibling.parentElement.querySelectorAll("note:not(chord note), chord, rest, mRest")); //querySelectorAll(":scope > *")
+                    let ms = Array.from(trueSibling.parentElement.querySelectorAll("note:not(chord note), chord, rest, mRest"));
                     if (newNote.relPosX === "left") {
                         var measureSiblings = ms.filter((_, i) => i >= ms.indexOf(trueSibling));
                         trueSibling.parentElement.insertBefore(newElem, trueSibling);
@@ -300,8 +297,40 @@ function addToMEI(newSound, currentMEI, replace = false, scoreGraph = null) {
         var newChord = newSound;
         newElem = convertToElement(newChord, currentMEI);
         var nearestElem = currentMEI.getElementById(newChord.nearestNoteId);
-        if ((nearestElem === null || nearestElem === void 0 ? void 0 : nearestElem.tagName) === "layer") {
-            nearestElem.insertBefore(newElem, nearestElem.firstChild);
+        // if (nearestElem?.tagName === "layer") {
+        //   nearestElem.insertBefore(newElem, nearestElem.firstChild)
+        var sibling = currentMEI.getElementById(newChord.nearestNoteId);
+        if (!sibling)
+            return;
+        var parentLayer = sibling.closest("layer");
+        var trueParent = sibling.parentElement;
+        var isTrueSibling = parentLayer == trueParent;
+        var trueSibling = sibling;
+        if (!isTrueSibling) {
+            var currParent = trueParent;
+            while (!isTrueSibling) {
+                trueSibling = currParent;
+                currParent = currParent === null || currParent === void 0 ? void 0 : currParent.parentElement;
+                isTrueSibling = currParent.tagName === "layer";
+            }
+        }
+        if (replace) {
+            let ms = Array.from(trueSibling.parentElement.querySelectorAll("note:not(chord note), chord, rest, mRest"));
+            if (newChord.relPosX === "left") {
+                var measureSiblings = ms.filter((_, i) => i >= ms.indexOf(trueSibling));
+                trueSibling.parentElement.insertBefore(newElem, trueSibling);
+                changeDurationsInLayer(currentMEI, measureSiblings, newElem);
+            }
+            else {
+                if (["clef"].every(el => { var _a; return ((_a = trueSibling.nextElementSibling) === null || _a === void 0 ? void 0 : _a.tagName) !== el; }) && trueSibling.nextElementSibling !== null) {
+                    var measureSiblings = ms.filter((_, i) => i >= ms.indexOf(trueSibling.nextElementSibling));
+                    trueSibling.parentElement.insertBefore(newElem, trueSibling.nextElementSibling);
+                    changeDurationsInLayer(currentMEI, measureSiblings, newElem);
+                }
+                else {
+                    trueSibling.parentElement.insertBefore(newElem, trueSibling.nextElementSibling);
+                }
+            }
         }
         else if (newChord.relPosX === "left") {
             nearestElem.parentElement.insertBefore(newElem, currentMEI.getElementById(newChord.nearestNoteId));
@@ -312,11 +341,61 @@ function addToMEI(newSound, currentMEI, replace = false, scoreGraph = null) {
     }
     // if measure overfills tie note to next measure
     var currentLayer = newElem.closest("layer");
+    currentMEI = tieToNextMeasure(currentMEI, newElem, currMeiClone, replace, newSound);
+    newElem = currentMEI.querySelector("#" + newElem.id);
+    fillLayerWithRests(currentLayer, currentMEI);
+    //reestablish beams
+    beams === null || beams === void 0 ? void 0 : beams.forEach(b => {
+        var first;
+        var last;
+        Array.from(b.children).forEach(bc => {
+            var existingChild = currentMEI.querySelector("#" + bc.id);
+            if (existingChild !== null) {
+                if (first == undefined) {
+                    first = bc;
+                }
+                else {
+                    last = bc;
+                }
+            }
+            else if (!first) {
+                first = newElem;
+            }
+        });
+        if (!last) {
+            last = newElem;
+        }
+        if (first && last) {
+            var newBeam = currentMEI.createElement("beam");
+            newBeam.id = b.id;
+            var beamElements = currentMEI.querySelectorAll("#" + first.id + ", #" + first.id + "~ *:not(#" + last.id + "~ *)"); // all elements in between first and last
+            beamElements[0].insertAdjacentElement("beforebegin", newBeam);
+            beamElements.forEach(be => {
+                newBeam.append(be);
+            });
+        }
+    });
+    cleanUp(currentMEI);
+    adjustAccids(currentMEI);
+    currentMEI = meiConverter.restoreXmlIdTags(currentMEI);
+    return currentMEI;
+}
+exports.addToMEI = addToMEI;
+/**
+ *
+ * @param currentMEI MEI to be changed
+ * @param newElem Element to tie to next measure
+ * @param currMeiClone clone of the original MEI to compute ratios before anything was changed
+ * @param replace replace flag, if addToMEI must be called again
+ * @param newSound change parameters of newSound if it has to be shifted to the right
+ */
+function tieToNextMeasure(currentMEI, newElem, currMeiClone, replace, newSound) {
+    var _a;
+    var currentLayer = newElem.closest("layer");
     if (!overfillMeasure) {
         var newMeasureRatio = getAbsoluteRatio(newElem.closest("layer"));
         var measureRatio = getMeterRatioLocal(currMeiClone, newElem);
         if (newMeasureRatio > measureRatio) {
-            //currentMEI = currMeiClone as Document
             // Decide if next measure should be created and what should be added
             var lastElement = Array.from(currentLayer.querySelectorAll(":scope > :is(note, chord)")).reverse()[0];
             var lastElementRatio = getAbsoluteRatio(lastElement);
@@ -345,54 +424,19 @@ function addToMEI(newSound, currentMEI, replace = false, scoreGraph = null) {
                 if (currentLayer.closest("measure").nextElementSibling === null) { // add measure if there is none to extend into
                     addMeasure(currentMEI);
                 }
-                var cl = currentMEI.getElementById(currentLayer.id);
-                newSound.nearestNoteId = (_b = cl.closest("measure").nextElementSibling.querySelector("staff[n='" + cl.closest("staff").getAttribute("n") + "'] layer[n='" + cl.getAttribute("n") + "'] :is(chord, note, rest, mRest)")) === null || _b === void 0 ? void 0 : _b.id;
-                newSound.relPosX = "left";
-                if (newSound.nearestNoteId !== null) {
-                    currentMEI = addToMEI(newSound, currentMEI, replace);
+                if (newSound) {
+                    var cl = currentMEI.getElementById(currentLayer.id);
+                    newSound.nearestNoteId = (_a = cl.closest("measure").nextElementSibling.querySelector("staff[n='" + cl.closest("staff").getAttribute("n") + "'] layer[n='" + cl.getAttribute("n") + "'] :is(chord, note, rest, mRest)")) === null || _a === void 0 ? void 0 : _a.id;
+                    newSound.relPosX = "left";
+                    if (newSound.nearestNoteId !== null) {
+                        currentMEI = addToMEI(newSound, currentMEI, replace);
+                    }
                 }
             }
         }
     }
-    newElem = currentMEI.querySelector("#" + newElem.id);
-    fillLayerWithRests(currentLayer, currentMEI);
-    //reestablish beams
-    beams.forEach(b => {
-        var first;
-        var last;
-        Array.from(b.children).forEach(bc => {
-            var existingChild = currentMEI.querySelector("#" + bc.id);
-            if (existingChild !== null) {
-                if (first == undefined) {
-                    first = bc;
-                }
-                else {
-                    last = bc;
-                }
-            }
-            else if (first == undefined) {
-                first = newElem;
-            }
-        });
-        if (last == undefined) {
-            last = newElem;
-        }
-        if (first != undefined && last != undefined) {
-            var newBeam = currentMEI.createElement("beam");
-            newBeam.id = b.id;
-            var beamElements = currentMEI.querySelectorAll("#" + first.id + ", #" + first.id + "~ *:not(#" + last.id + "~ *)"); // all elements in between first and last
-            beamElements[0].insertAdjacentElement("beforebegin", newBeam);
-            beamElements.forEach(be => {
-                newBeam.append(be);
-            });
-        }
-    });
-    cleanUp(currentMEI);
-    adjustAccids(currentMEI);
-    currentMEI = meiConverter.restoreXmlIdTags(currentMEI);
     return currentMEI;
 }
-exports.addToMEI = addToMEI;
 /**
  * Check if notes have to be shifted after insertion
  * @param currentMEI
@@ -1155,105 +1199,6 @@ function replaceWithRest(element, currentMEI) {
     elmei.parentElement.insertBefore(newRest, elmei);
     elmei.remove();
 }
-/**
- * @deprecated
- * Change duration of the following sound events. Elements to change duration are determined by the class to be "marked".
- * @param currentMEI  Current MEI as Document
- * @param additionalElements Elements to be considered to be changed.
- * @param refElement Reference Element after which all determined elements (.marked and additionElements) will be changed (e.g. replacing duration during a note insert).
- * If no refElement is given, filter the additionalElements to exclude the refElement
- * @param marked Consider marked elements
- * @returns
- */
-function _changeDuration(currentMEI, additionalElements = new Array(), refElement = null) {
-    var currMeiClone = currentMEI.cloneNode(true);
-    var changedFlag = "changed";
-    var multiplier;
-    var elmei;
-    var i = refElement === null ? 1 : 0;
-    for (i; i < additionalElements.length; i++) {
-        elmei = currentMEI.getElementById(additionalElements[i].id);
-        var elmeiRatio = getAbsoluteRatio(elmei);
-        var chord = elmei.closest("chord");
-        //Dur is attribute of chord and all notes will be changed accordingly
-        if (chord !== null) {
-            if (chord.classList.contains(changedFlag)) {
-                return;
-            }
-            else {
-                elmei = chord;
-                elmei.classList.add(changedFlag);
-            }
-        }
-        var dur = parseInt(elmei.getAttribute("dur"));
-        var dots = parseInt(elmei.getAttribute("dots")); // is NaN if elmei has no dots
-        if (dur > 0) {
-            var layerRatio = getAbsoluteRatio(elmei.closest("layer")); // current ratio of layer with already inserted new sound event
-            var localRatio = getMeterRatioLocal(currentMEI, elmei); //getMeterRatioGlobal(currentMEI )
-            var danglingRatio = layerRatio - localRatio;
-            if (danglingRatio > 0) {
-                var nextElementRatio = getAbsoluteRatio(elmei);
-                var neNewRatio = nextElementRatio - danglingRatio;
-                if (neNewRatio > 0) {
-                    var durArr = ratioToDur(neNewRatio);
-                    elmei.setAttribute("dur", durArr[0].toString());
-                    if (durArr[1] > 0) {
-                        elmei.setAttribute("dots", durArr[1].toString());
-                    }
-                    else {
-                        elmei.removeAttribute("dots");
-                    }
-                }
-                else {
-                    elmei.remove();
-                }
-            }
-            if ((layerRatio <= localRatio && refElement === null) || (layerRatio < localRatio && refElement !== null)) {
-                var nextElementRatio = getAbsoluteRatio(elmei);
-                var neNewRatio;
-                if (refElement !== null) {
-                    neNewRatio = nextElementRatio - getAbsoluteRatio(refElement);
-                }
-                else {
-                    var addRatios = (function (elements) {
-                        var r = 0;
-                        elements.forEach((v, i) => {
-                            if (i > 0) {
-                                r += getAbsoluteRatio(v);
-                            }
-                        });
-                        return r;
-                    });
-                    neNewRatio = nextElementRatio - (layerRatio - addRatios(additionalElements) - getAbsoluteRatio(additionalElements[0]));
-                }
-                if (neNewRatio > 0) {
-                    var durArr = ratioToDur(neNewRatio);
-                    elmei.setAttribute("dur", durArr[0].toString());
-                    if (durArr[1] > 0) {
-                        elmei.setAttribute("dots", durArr[1].toString());
-                    }
-                    else {
-                        elmei.removeAttribute("dots");
-                    }
-                }
-                else {
-                    elmei.remove();
-                }
-            }
-        }
-    }
-    if (!overfillMeasure && elmei != undefined && (elmei === null || elmei === void 0 ? void 0 : elmei.closest("layer")) !== null) {
-        var newMeasureRatio = getAbsoluteRatio(elmei.closest("layer"));
-        var localRatio = getMeterRatioLocal(currentMEI, elmei);
-        if (newMeasureRatio > localRatio) { //getMeterRatioGlobal(currentMEI )){
-            currentMEI = currMeiClone;
-        }
-    }
-    //clean up after changing durations
-    currentMEI.querySelectorAll(".changed").forEach(c => c.classList.remove(changedFlag));
-    cleanUp(currentMEI);
-    return currentMEI;
-}
 function addRatios(elements) {
     var r = 0;
     elements.forEach((v, i) => {
@@ -1291,11 +1236,6 @@ function changeDurationsInLayer(currentMEI, additionalElements = new Array(), re
         if (remainRatio < nnRatio) {
             var diffRatio = nnRatio - remainRatio;
             var nextNoteMEI = currentMEI.getElementById(nextNote.id);
-            //var dur = ratioToDur(diffRatio)
-            // currentMEI.getElementById(nextNote.id).setAttribute("dur", dur.shift().toString())
-            // if (dur.length > 0) {
-            //   currentMEI.getElementById(nextNote.id).setAttribute("dots", dur.shift().toString())
-            // }
             changeDur(nextNoteMEI, diffRatio);
             harm = currentMEI.querySelector('harm[startid="' + nextNote.id + '"]');
             if (harm !== null) {
@@ -1323,6 +1263,9 @@ function changeDurationsInLayer(currentMEI, additionalElements = new Array(), re
             changeDurationsInLayer(currentMEI, additionalElements, refElement, remainRatio, meiCopy);
         }
     }
+    else {
+        currentMEI = tieToNextMeasure(currentMEI, refElement, currentMEI.cloneNode(true), true, null);
+    }
     cleanUp(currentMEI);
     return currentMEI;
 }
@@ -1369,6 +1312,7 @@ function cleanUp(currentMEI) {
     removeEmptyElements(currentMEI);
     adjustRests(currentMEI);
     redistributeHarms(currentMEI);
+    reformatBreve(currentMEI);
 }
 exports.cleanUp = cleanUp;
 /**
@@ -1591,6 +1535,9 @@ function removeTiesFromDoc(currentMEI) {
         }
     });
 }
+function reformatBreve(currentMEI) {
+    currentMEI.querySelectorAll("[dur='0.5']").forEach(d => d.setAttribute("dur", "breve"));
+}
 function addMeasure(currentMEI) {
     var lastMeasure = Array.from(currentMEI.querySelectorAll("measure")).reverse()[0];
     var staffCounts = Array.from(lastMeasure.querySelectorAll("staff")).map(s => { return parseInt(s.getAttribute("n")); });
@@ -1633,6 +1580,7 @@ function addStaff(currentMEI, referenceStaff, relPos) {
     var refElement;
     currentMEI.querySelectorAll("staff[n=\"" + staffNum + "\"]").forEach(s => {
         var _a;
+        var layers = s.querySelectorAll("layer");
         var newStaff = new mei_template_1.default().createStaff(1, 1);
         switch (relPos) {
             case "above":
@@ -1653,7 +1601,7 @@ function addStaff(currentMEI, referenceStaff, relPos) {
         //copy elements from the current Staff that have to appear in new staff
         var newLayer = newStaff.querySelector("layer");
         var copyMeter = (_a = s.querySelector("meterSig")) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
-        if (copyMeter != undefined && copyMeter !== null) {
+        if (copyMeter) {
             newLayer.insertBefore(copyMeter, newLayer.firstChild);
         }
         refn = (refElement === null || refElement === void 0 ? void 0 : refElement.getAttribute("n")) || staffNum; // s.getAttribute("n")
@@ -1714,6 +1662,12 @@ function removeStaff(currentMEI, referenceStaff, relPos) {
     cleanUp(currentMEI);
 }
 exports.removeStaff = removeStaff;
+function addLayerForStaff(currentMEI, staffN, layerN) {
+    currentMEI.querySelectorAll(`staff[n='${staffN}']`).forEach(staff => {
+        staff.append(new mei_template_1.default().createLayer(layerN));
+    });
+}
+exports.addLayerForStaff = addLayerForStaff;
 /**
  * Create a tuplet out of given Elements.
  * Tuplet duration and kind will be derived from number and attributes of the given notes.
@@ -1765,10 +1719,10 @@ exports.createTuplet = createTuplet;
  * Paste copied ids. First position to which the Elements are copied is the Element according to the refId (= RefElement).
  * If multiple staffs are copied, overhanging staffs will be pasted to the staffs below the staff of the RefElement, if definedstaffs exist.
  * Else these copiedId will be not pasted.
- * @param ids
- * @param refId
+ * @param ids Array of Element IDs to be pasted
+ * @param pastePosition
  */
-function paste(ids, refId, currentMEI) {
+function paste(ids, pastePosition, currentMEI) {
     var _a;
     //ordered by staff
     var meiElements = new Array();
@@ -1788,36 +1742,36 @@ function paste(ids, refId, currentMEI) {
             }
         }
     });
-    var refElement = currentMEI.getElementById(refId);
+    var refElement = currentMEI.getElementById(pastePosition);
     refElement = (refElement === null || refElement === void 0 ? void 0 : refElement.closest("chord")) || refElement;
     var refStaff = refElement === null || refElement === void 0 ? void 0 : refElement.closest("staff");
     var refLayer = refElement === null || refElement === void 0 ? void 0 : refElement.closest("layer");
     var refMeasure = refElement === null || refElement === void 0 ? void 0 : refElement.closest("measure");
     var currentMeasure;
-    let anyNew;
+    var anyNew;
     //console.log(...meiElements)
     meiElements.forEach((staff, staffIdx) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        if (refElement === null)
+        if (!refElement)
             return;
         currentMeasure = refElement.closest("measure");
         staff.forEach((element, elementIdx) => {
             var _a, _b;
             if (["NOTE", "REST"].includes(element.tagName.toUpperCase())) {
-                var newNote = convertToNewNote(element);
+                const newNote = convertToNewNote(element);
                 newNote.nearestNoteId = refElement.id;
-                newNote.relPosX = "right";
+                newNote.relPosX = elementIdx === 0 ? "left" : "right"; // make sure to replace the element on the pasteposition
                 anyNew = newNote;
             }
             else if (element.tagName.toUpperCase() === "CHORD") {
-                var newChord = convertToNewChord(element);
+                const newChord = convertToNewChord(element);
                 newChord.nearestNoteId = refElement.id;
-                newChord.relPosX = "right";
+                newChord.relPosX = elementIdx === 0 ? "left" : "right"; // make sure to replace the element on the pasteposition
                 anyNew = newChord;
                 var elementArr = Array.from(element.querySelectorAll("note"));
             }
-            var replace = ((_b = (_a = document.querySelector(".activeContainer")) === null || _a === void 0 ? void 0 : _a.querySelector("#insertToggle")) === null || _b === void 0 ? void 0 : _b.checked) || true;
-            addToMEI(anyNew, currentMEI, replace);
+            const replace = ((_b = (_a = document.querySelector(".activeContainer")) === null || _a === void 0 ? void 0 : _a.querySelector("#insertToggle")) === null || _b === void 0 ? void 0 : _b.checked) || true;
+            currentMEI = addToMEI(anyNew, meiConverter.cleanIdAttr(currentMEI), replace);
             refElement = convertToElement(anyNew, currentMEI); //element
         });
         //when changing next staff, refElement musst be staff + 1
@@ -1827,10 +1781,10 @@ function paste(ids, refId, currentMEI) {
         refElement = currentMEI.querySelector("measure[n=\"" + refMeasureN + "\"] > staff[n=\"" + targetStaffN + "\"] > layer[n=\"" + refLayerN + "\"]");
     });
     //Element gets replaced in all other modes except keymode/textmode
-    if (!document.querySelector(".activeContainer").classList.contains("textmode") && ((_a = currentMEI.getElementById(refId)) === null || _a === void 0 ? void 0 : _a.tagName) !== "LAYER") {
-        removeFromMEI([currentMEI.getElementById(refId)], currentMEI);
+    if (!document.querySelector(".activeContainer").classList.contains("textmode") && ((_a = currentMEI.getElementById(pastePosition)) === null || _a === void 0 ? void 0 : _a.tagName) !== "LAYER") {
+        removeFromMEI([currentMEI.getElementById(pastePosition)], currentMEI);
     }
-    return anyNew === null || anyNew === void 0 ? void 0 : anyNew.id;
+    return [currentMEI, anyNew === null || anyNew === void 0 ? void 0 : anyNew.id];
 }
 exports.paste = paste;
 /**
@@ -1841,10 +1795,39 @@ exports.paste = paste;
  * @returns
  */
 function replaceClefinScoreDef(target, newClef, currentMEI) {
-    var staffN = document.querySelector(".activeContainer #vrvSVG #" + target.id).closest(".staff").getAttribute("n");
-    var staffDefClef = currentMEI.querySelector("staffDef[n=\"" + staffN + "\"] > clef");
-    staffDefClef.setAttribute("shape", newClef.charAt(0));
-    staffDefClef.setAttribute("line", mappings_1.clefToLine.get(newClef.charAt(0)));
+    const staffN = document.querySelector(".activeContainer #vrvSVG #" + target.id).closest(".staff").getAttribute("n");
+    const staffDefClef = currentMEI.querySelector("staffDef[n=\"" + staffN + "\"] > clef");
+    const shape = newClef.charAt(0);
+    var line = mappings_1.clefToLine.get(newClef.charAt(0));
+    if (shape === "C") { // get line depending on id of the cclef
+        line = mappings_1.clefToLine.get(newClef.match(/CClef(.*)/)[1]);
+    }
+    const disPlace = newClef.includes("OctDown") ? "below" : newClef.includes("OctUp") ? "above" : null;
+    if (staffDefClef) {
+        staffDefClef.setAttribute("shape", shape);
+        staffDefClef.setAttribute("line", line);
+        if (disPlace) {
+            staffDefClef.setAttribute("dis", "8");
+            staffDefClef.setAttribute("dis.place", disPlace);
+        }
+        else {
+            staffDefClef.removeAttribute("dis");
+            staffDefClef.removeAttribute("dis.place");
+        }
+    }
+    else {
+        const staffDef = currentMEI.querySelector("staffDef[n=\"" + staffN + "\"]");
+        staffDef === null || staffDef === void 0 ? void 0 : staffDef.setAttribute("clef.shape", shape);
+        staffDef === null || staffDef === void 0 ? void 0 : staffDef.setAttribute("clef.line", line);
+        if (disPlace) {
+            staffDef === null || staffDef === void 0 ? void 0 : staffDef.setAttribute("clef.dis", "8");
+            staffDef === null || staffDef === void 0 ? void 0 : staffDef.setAttribute("clef.dis.place", disPlace);
+        }
+        else {
+            staffDef === null || staffDef === void 0 ? void 0 : staffDef.removeAttribute("clef.dis");
+            staffDef === null || staffDef === void 0 ? void 0 : staffDef.removeAttribute("clef.dis.place");
+        }
+    }
     cleanUp(currentMEI);
     currentMEI = meiConverter.restoreXmlIdTags(currentMEI);
     return currentMEI;
@@ -1860,10 +1843,20 @@ function insertClef(target, newClef, currentMEI) {
     var targetStaffId = ((_a = target.closest(".measure").querySelector(".staff[n=\"" + target.getAttribute("n") + "\"]")) === null || _a === void 0 ? void 0 : _a.id) || ((_b = target.closest(".staff")) === null || _b === void 0 ? void 0 : _b.id);
     var targetLayerId = currentMEI.getElementById(targetStaffId).querySelector("layer").id;
     currentMEI.getElementById(targetLayerId).querySelectorAll("clef").forEach(c => c.remove());
+    const shape = newClef.charAt(0);
+    var line = mappings_1.clefToLine.get(newClef.charAt(0));
+    if (shape === "C") { // get line depending on id of the cclef
+        line = mappings_1.clefToLine.get(newClef.match(/CClef(.*)/)[1]);
+    }
+    var disPlace = newClef.includes("OctDown") ? "below" : newClef.includes("OctUp") ? "above" : null;
     var clefElement = currentMEI.createElement("clef");
     clefElement.setAttribute("id", random_1.uuidv4());
-    clefElement.setAttribute("shape", newClef.charAt(0));
-    clefElement.setAttribute("line", mappings_1.clefToLine.get(newClef.charAt(0)));
+    clefElement.setAttribute("shape", shape);
+    clefElement.setAttribute("line", line);
+    if (disPlace) {
+        clefElement.setAttribute("dis", "8");
+        clefElement.setAttribute("dis.place", disPlace);
+    }
     currentMEI.getElementById(targetLayerId).append(clefElement);
     cleanUp(currentMEI);
     currentMEI = meiConverter.restoreXmlIdTags(currentMEI);
@@ -2019,7 +2012,7 @@ function getTimestamp(note) {
     var layer = note.closest("layer");
     var elements = Array.from(layer.querySelectorAll("*[dur]"));
     elements = elements.filter((v, i) => i <= elements.indexOf(note));
-    var tstamp;
+    var tstamp = 0;
     elements.forEach(e => {
         var dur = parseInt(e.getAttribute("dur"));
         tstamp += 4 / dur;