vibe-editor 0.0.0

package/src/scripts/js/handlers/ModHandler.js

@@ -0,0 +1,311 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../constants");
+const random_1 = require("../utils/random");
+const meiConverter = require("../utils/MEIConverter");
+const meiOperation = require("../utils/MEIOperations");
+const cq = require("../utils/convenienceQueries");
+const modSelector = ".slur, .tie, .accid";
+/**
+ * Handler for all options which could modulate the given score. These functions are related to all buttons in the sidebar and toolbar
+ */
+class ModHandler {
+    constructor(containerId) {
+        this.resetListenerFunction = (function resetListenerFunction(e) {
+            e.preventDefault();
+            this.resetListeners();
+        }).bind(this);
+        /** Wrapperfunction for Eventslistener */
+        this.connectNotesFunction = (function connectNotesFunction(e) {
+            e.preventDefault();
+            this.connectNotes(e);
+        }).bind(this);
+        /** Wrapperfunction for Eventslistener */
+        this.organizeBeamsFunction = (function organizeBeamsFunction(e) {
+            e.preventDefault();
+            this.organizeBeams(e);
+        }).bind(this);
+        this.alterFunction = (function alterFunction(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.alterNotes(e);
+        }).bind(this);
+        this.articulationHandlerFunction = (function articulationHandlerFunction(e) {
+            e.preventDefault();
+            this.articulationHandler(e);
+        }).bind(this);
+        this.setContainerId(containerId);
+        this.tieNotesButton = this.container.querySelector("#tieNotes");
+        this.organizeBeamsButton = this.container.querySelector("#organizeBeams");
+        var a = this.alterUpButton = this.container.querySelector("#alterUp");
+        var b = this.alterDownButton = this.container.querySelector("#alterDown");
+        var c = this.alterNeutralButton = this.container.querySelector("#alterNeutral");
+        var d = this.alterDUpButton = this.container.querySelector("#alterDUp");
+        var e = this.alterDDownButton = this.container.querySelector("#alterDDown");
+        this.alterButtons = [a, b, c, d, e];
+        this.articButtons = new Array();
+        this.tabButtons = Array.from(this.container.querySelectorAll(".tabBtn"));
+    }
+    setListeners() {
+        this.tabButtons.forEach(tb => {
+            tb.addEventListener("click", this.resetListenerFunction);
+        });
+        this.tieNotesButton.addEventListener("click", this.connectNotesFunction);
+        this.organizeBeamsButton.addEventListener("click", this.organizeBeamsFunction);
+        this.alterButtons.forEach(ab => {
+            ab.addEventListener("click", this.alterFunction);
+        });
+        if (this.articButtons.length === 0) {
+            cq.getContainer(this.containerId).querySelectorAll("#articGroup .btn").forEach(btn => this.articButtons.push(btn));
+        }
+        this.articButtons.forEach(ab => {
+            ab.addEventListener("click", this.articulationHandlerFunction);
+        });
+        this.makeScoreElementsClickable();
+    }
+    removeListeners() {
+        this.tabButtons.forEach(tb => {
+            tb.removeEventListener("click", this.resetListenerFunction);
+        });
+        this.tieNotesButton.removeEventListener("click", this.connectNotesFunction);
+        this.organizeBeamsButton.removeEventListener("click", this.organizeBeamsFunction);
+        this.alterButtons.forEach(ab => {
+            ab.removeEventListener("click", this.alterFunction);
+        });
+        this.articButtons.forEach(ab => {
+            ab.removeEventListener("click", this.articulationHandlerFunction);
+        });
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+        return this;
+    }
+    /**
+     * Make slur or tie for 2 or more elements when tie button is clicked
+     * Tie, only when there are two selected elemets which are the same pitch
+     * Delete otherwise
+     * @param e
+     */
+    connectNotes(e) {
+        var markedElements = Array.from(this.vrvSVG.querySelectorAll(".note.marked"));
+        markedElements = markedElements.filter(me => me.closest(".layer").getAttribute("n") === markedElements[0].closest(".layer").getAttribute("n"));
+        if (markedElements.length <= 1) {
+            return;
+        }
+        var makeSlur = markedElements.length > 2;
+        //if(!makeSlur && markedElements.length > 1){ // assert only 2 items
+        var leftId = markedElements[0].id;
+        var rightId = markedElements.reverse()[0].id;
+        var leftMeiElement = this.currentMEI.getElementById(leftId);
+        var rightMeiElement = this.currentMEI.getElementById(rightId);
+        var leftpname = leftMeiElement.getAttribute("pname");
+        var leftoct = leftMeiElement.getAttribute("oct");
+        var leftAccid = leftMeiElement.getAttribute("accid") || leftMeiElement.getAttribute("accid.ges");
+        var rightpname = rightMeiElement.getAttribute("pname");
+        var rightoct = rightMeiElement.getAttribute("oct");
+        var rightAccid = rightMeiElement.getAttribute("accid") || rightMeiElement.getAttribute("accid.ges");
+        if (!(leftpname === rightpname && leftoct === rightoct && leftAccid === rightAccid)) {
+            makeSlur = true;
+        }
+        //}
+        var connections = this.currentMEI.querySelectorAll("tie, slur");
+        var deleted = false;
+        connections.forEach(c => {
+            var sid = c.getAttribute("startid").replace("#", "");
+            var eid = c.getAttribute("endid").replace("#", "");
+            if (sid === leftId && eid === rightId) {
+                c.remove();
+                deleted = true;
+            }
+        });
+        if (!deleted) {
+            var tieElement;
+            if (makeSlur) {
+                tieElement = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "slur");
+            }
+            else {
+                tieElement = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "tie");
+            }
+            tieElement.setAttribute("startid", "#" + leftId);
+            tieElement.setAttribute("endid", "#" + rightId);
+            tieElement.setAttribute("id", random_1.uuidv4());
+            this.currentMEI.getElementById(leftId).closest("measure").append(tieElement);
+        }
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false);
+    }
+    /**
+     * Pack selected elements in own beam element. Only for dur > 4
+     * @param e
+     */
+    organizeBeams(e) {
+        var markedElements = Array.from(this.vrvSVG.querySelectorAll(".marked")); // (".note.marked, .chord.marked"))
+        markedElements = markedElements.filter(me => {
+            var isInLayer = me.closest(".layer").getAttribute("n") === markedElements[0].closest(".layer").getAttribute("n");
+            var hasDur = this.currentMEI.getElementById(me.id) !== null ? this.currentMEI.getElementById(me.id).getAttribute("dur") !== null : false;
+            return isInLayer && hasDur;
+        });
+        if (markedElements.length === 0) {
+            return;
+        }
+        var haveRightDur = markedElements.filter(me => {
+            var _a;
+            var dur = (_a = this.currentMEI.getElementById(me.id)) === null || _a === void 0 ? void 0 : _a.getAttribute("dur");
+            return parseInt(dur) > 4;
+        }).length >= 2;
+        if (haveRightDur) {
+            var firstMeiElement = this.currentMEI.getElementById(markedElements[0].id);
+            var newBeam = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "beam");
+            var oldBeam = firstMeiElement.closest("beam");
+            firstMeiElement.parentElement.insertBefore(newBeam, firstMeiElement);
+            markedElements.forEach(me => {
+                newBeam.append(this.currentMEI.getElementById(me.id));
+            });
+            if (oldBeam !== null && oldBeam.childElementCount > 1) {
+                var beamCandidates = new Array();
+                var bc;
+                oldBeam.querySelectorAll(":scope > *").forEach(cn => {
+                    if (cn.tagName.toLowerCase() === "beam") {
+                        if (beamCandidates.length > 0) {
+                            if (beamCandidates.length === 1) {
+                                bc = beamCandidates[0];
+                            }
+                            else if (beamCandidates.length > 1) {
+                                bc = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "beam");
+                                beamCandidates.forEach(b => bc.append(b));
+                            }
+                            oldBeam.parentElement.insertBefore(bc, oldBeam);
+                            beamCandidates = new Array();
+                        }
+                        oldBeam.parentElement.insertBefore(cn, oldBeam);
+                    }
+                    else {
+                        beamCandidates.push(cn);
+                    }
+                });
+                if (beamCandidates.length > 0) { // if array is still full after loop
+                    if (beamCandidates.length === 1) {
+                        bc = beamCandidates[0];
+                    }
+                    else if (beamCandidates.length > 1) {
+                        bc = this.currentMEI.createElementNS(constants_1.constants._MEINS_, "beam");
+                        beamCandidates.forEach(b => bc.append(b));
+                    }
+                    oldBeam.parentElement.insertBefore(bc, oldBeam);
+                }
+            }
+            else if ((oldBeam === null || oldBeam === void 0 ? void 0 : oldBeam.childElementCount) === 1) {
+                if (oldBeam.firstElementChild.tagName.toLowerCase() === "beam") {
+                    Array.from(oldBeam.firstElementChild.children).forEach(c => {
+                        oldBeam.parentElement.insertBefore(c, oldBeam);
+                    });
+                }
+                else {
+                    oldBeam.parentElement.insertBefore(oldBeam.firstElementChild, oldBeam);
+                }
+                oldBeam.remove();
+            }
+            meiOperation.cleanUp(this.currentMEI);
+            var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+            this.loadDataCallback("", mei, false);
+        }
+    }
+    /**
+     * Alter Notes (accid) according to button.
+     * @param e
+     * @returns
+     */
+    alterNotes(e) {
+        var target = e.target;
+        var accidSig;
+        switch (target.id) {
+            case "alterUp":
+                accidSig = "s";
+                break;
+            case "alterDown":
+                accidSig = "f";
+                break;
+            case "alterDUp":
+                accidSig = "ss";
+                break;
+            case "alterDDown":
+                accidSig = "ff";
+                break;
+            case "alterNeutral":
+                accidSig = "n";
+                break;
+            default:
+                console.error(target.id, "No such option for accid alteration");
+                return;
+        }
+        this.vrvSVG.querySelectorAll(".note.marked").forEach(nm => {
+            var meiElement = this.currentMEI.getElementById(nm.id);
+            meiElement.setAttribute("accid", accidSig);
+            meiElement.removeAttribute("accid.ges");
+        });
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        meiOperation.adjustAccids(mei);
+        this.loadDataCallback("", mei, false);
+    }
+    /**
+     * Make Score Elements Clickable (and mark them), which are important for functions in the modulation toolbar group
+     * @returns this
+     */
+    makeScoreElementsClickable() {
+        var that = this;
+        cq.getInteractOverlay(this.containerId).querySelectorAll(modSelector).forEach(c => {
+            c.addEventListener("click", function (e) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                that.vrvSVG.querySelectorAll(modSelector).forEach(c => c.classList.remove("marked"));
+                var originSVG = that.vrvSVG.querySelector("#" + this.getAttribute("refId"));
+                if (originSVG.classList.contains("marked")) {
+                    originSVG.classList.remove("marked");
+                }
+                else {
+                    originSVG.classList.add("marked");
+                }
+            });
+        });
+    }
+    articulationHandler(e) {
+        var target = e.target;
+        var articulation = target.id.replace("Btn", "");
+        var artic;
+        switch (articulation) {
+            case "accent":
+                artic = "acc";
+                break;
+            case "tenuto":
+                artic = "ten";
+                break;
+            case "marcato":
+                artic = "marc";
+                break;
+            case "staccato":
+                artic = "stacc";
+                break;
+        }
+        meiOperation.setArticulation(this.currentMEI, artic);
+        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
+        this.loadDataCallback("", mei, false);
+    }
+    //GETTER/ SETTER
+    setCurrentMEI(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        this.vrvSVG = cq.getVrvSVG(containerId);
+        this.container = document.getElementById(containerId);
+        return this;
+    }
+}
+exports.default = ModHandler;

package/src/scripts/js/handlers/NoteDragHandler copy.js

@@ -0,0 +1,148 @@
+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;
+/**
+ * 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/NoteDragHandler.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const coordinates = require("../utils/coordinates");
+const cq = require("../utils/convenienceQueries");
+const interactjs_1 = require("interactjs");
+/**
+ * Class that handles insert mode, events, and actions.
+ */
+class NoteDragHandler {
+    constructor(containerId) {
+        this.setContainerId(containerId);
+    }
+    setListeners() {
+        var that = this;
+        this.noteDragListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .notehead rect")
+            .draggable({
+            startAxis: "y",
+            lockAxis: "y",
+            listeners: {
+                move: this.dragNote.bind(this),
+                end(event) {
+                    that.deleteTempDistances();
+                    that.insertCallback(that.newNote, true);
+                }
+            },
+            modifiers: [
+                interactjs_1.default.modifiers.restrictRect({
+                    endOnly: true
+                })
+            ]
+        });
+    }
+    removeListeners() {
+        var _a;
+        (_a = this.noteDragListener) === null || _a === void 0 ? void 0 : _a.unset();
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+        return this;
+    }
+    deleteTempDistances() {
+        var _a;
+        (_a = cq.getInteractOverlay(this.containerId)) === null || _a === void 0 ? void 0 : _a.querySelectorAll("*[distY]").forEach(d => {
+            d.removeAttribute("distY");
+            d.classList.remove("moving");
+        });
+    }
+    dragNote(e) {
+        var _a;
+        var noteHeadBBox = e.target;
+        this.noteDragEvent = new MouseEvent("draggingNote", e);
+        noteHeadBBox.dispatchEvent(this.noteDragEvent);
+        var refNote = cq.getVrvSVG(this.containerId).querySelector("#" + noteHeadBBox.parentElement.getAttribute("refId")).closest(".note");
+        var note = cq.getInteractOverlay(this.containerId).querySelector("*[refId=\"" + refNote.id + "\"] rect");
+        if (!noteHeadBBox.classList.contains("moving"))
+            noteHeadBBox.classList.add("moving");
+        var headPos = this.newPos(noteHeadBBox, e);
+        this.m2s.defineNote(headPos.x, headPos.y, {});
+        this.newNote = this.m2s.getNewNote();
+        if (refNote.closest(".chord") !== null) {
+            this.newNote.chordElement = refNote.closest(".chord");
+            (_a = this.currentMEI.querySelector("#" + refNote.id)) === null || _a === void 0 ? void 0 : _a.remove();
+        }
+    }
+    newPos(target, e) {
+        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, target.closest("*[viewBox]"));
+        var edy = pt.y;
+        var ptDist = coordinates.transformToDOMMatrixCoordinates(target.getBoundingClientRect().x, target.getBoundingClientRect().y, target.closest("*[viewBox]"));
+        var distY = (parseFloat(target.getAttribute('distY'))) || edy - ptDist.y;
+        target.setAttribute("distY", distY.toString());
+        target.setAttribute("y", (edy - distY).toString());
+        return { x: pt.x, y: pt.y };
+    }
+    //////////////// GETTER/ SETTER ////////////
+    setMusicProcessor(musicPlayer) {
+        this.musicPlayer = musicPlayer;
+        return this;
+    }
+    setCurrentMEI(xmlDoc) {
+        this.currentMEI = xmlDoc;
+        return this;
+    }
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setInsertCallback(insertCallback) {
+        this.insertCallback = insertCallback;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        return this;
+    }
+}
+exports.default = NoteDragHandler;