vibe-editor 0.0.3 → 0.0.5

package/src/scripts/js/scripts/handlers/PhantomElementHandler.js

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../constants");
+const PhantomElement_1 = require("../gui/PhantomElement");
+const coordinates = require("../utils/coordinates");
+const cq = require("../utils/convenienceQueries");
+class PhantomElementHandler {
+    constructor(containerId) {
+        this.trackMouseHandler = (function handler(e) {
+            var that = this;
+            that.trackMouse(e);
+        }).bind(this);
+        this.timeMarkerHandler = (function timeMarkerHandler(e) {
+            this.drawMarkers(e);
+        }).bind(this);
+        this.setContainerId(containerId);
+        this.addCanvas();
+        this.phantom = new PhantomElement_1.default("note", containerId);
+        this.isTrackingMouse = false;
+    }
+    addCanvas() {
+        if (cq.getInteractOverlay(this.containerId).querySelector("#phantomCanvas") !== null)
+            return;
+        this.rootBBox = this.vrvSVG.getBoundingClientRect();
+        var rootWidth = this.rootBBox.width.toString();
+        var rootHeigth = this.rootBBox.height.toString();
+        if (this.phantomCanvas == undefined) {
+            this.phantomCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
+            this.phantomCanvas.setAttribute("id", "phantomCanvas");
+        }
+        this.interactionOverlay.insertBefore(this.phantomCanvas, this.interactionOverlay.firstChild);
+    }
+    setListeners() {
+        this.interactionOverlay.addEventListener("mousemove", this.trackMouseHandler);
+        this.interactionOverlay.querySelectorAll(".notehead rect").forEach(n => n.addEventListener("draggingNote", this.trackMouseHandler));
+        // Listener just for staves
+        this.interactionOverlay.querySelectorAll(".staffLine").forEach(element => {
+            element.addEventListener('click', this.trackMouseHandler);
+        });
+        this.interactionOverlay.querySelectorAll(".staff").forEach(s => {
+            s.addEventListener("currStaffChanged", this.timeMarkerHandler);
+        });
+        return this;
+    }
+    setPhantomLineListeners() {
+        this.interactionOverlay.querySelectorAll(".phantomLine").forEach(element => {
+            element.addEventListener('click', this.trackMouseHandler);
+        });
+    }
+    removeListeners() {
+        this.interactionOverlay.removeEventListener("mousemove", this.trackMouseHandler);
+        this.interactionOverlay.querySelectorAll(".notehead rect").forEach(n => n.removeEventListener("draggingNote", this.trackMouseHandler));
+        this.interactionOverlay.querySelectorAll(".staff").forEach(s => {
+            s.removeEventListener("currStaffChanged", this.timeMarkerHandler);
+        });
+        this.interactionOverlay.querySelectorAll(".staffLine").forEach(element => {
+            element.removeEventListener('click', this.trackMouseHandler);
+            clearInterval(this.trackMouseHandler);
+        });
+        if (this.phantom) {
+            this.phantom.removePhantomNote();
+            this.phantom = undefined;
+        }
+        return this;
+    }
+    removePhantomLineListeners() {
+        this.interactionOverlay.querySelectorAll(".phantomLine").forEach(element => {
+            element.removeEventListener('click', this.trackMouseHandler);
+        });
+    }
+    /**
+     * Draw circle under mouse cursor
+     * @param e
+     */
+    trackMouse(e) {
+        var _a, _b, _c, _d, _e;
+        if (this.m2s.getLastMouseEnter().staff === null)
+            return;
+        // var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay)
+        // var relX = pt.x
+        // var relY = pt.y
+        var definitionScale = (_b = cq.getVrvSVG(this.containerId).querySelector("#" + ((_a = this.m2s.getLastMouseEnter().staff) === null || _a === void 0 ? void 0 : _a.getAttribute("refId")))) === null || _b === void 0 ? void 0 : _b.closest(".definition-scale");
+        if (definitionScale == undefined || definitionScale == null)
+            return;
+        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay);
+        var relX = pt.x;
+        var relY = pt.y;
+        var dsCoords = coordinates.getDOMMatrixCoordinates(definitionScale, definitionScale.closest(".page"));
+        //console.log(relX, dsCoords, definitionScale.getBoundingClientRect())
+        if (relX < dsCoords.left || relX > dsCoords.right) {
+            this.isTrackingMouse = false;
+            return;
+        }
+        this.isTrackingMouse = true;
+        var target = e.target;
+        target = target.closest("g");
+        var options = {};
+        if (target === null || target === void 0 ? void 0 : target.classList.contains("staffLine")) {
+            options["staffLineId"] = target.id;
+        }
+        var phantomNoteElement = this.phantom.getNoteElement();
+        if (phantomNoteElement == undefined) {
+            return;
+        }
+        phantomNoteElement.setAttribute("cx", relX.toString());
+        phantomNoteElement.setAttribute("cy", relY.toString());
+        phantomNoteElement.setAttribute("r", ((_d = (_c = this.m2s) === null || _c === void 0 ? void 0 : _c.getLineDist()) === null || _d === void 0 ? void 0 : _d.toString()) || "0");
+        phantomNoteElement.setAttribute("visibility", phantomNoteElement.getAttribute("visibility") || "visible");
+        this.m2s.defineNote(relX, relY, options);
+        var newCY = (_e = (this.m2s.getNewNoteY())) === null || _e === void 0 ? void 0 : _e.toString();
+        phantomNoteElement.setAttribute("cy", (newCY || "0"));
+        this.removeLines();
+        if (this.m2s.getPhantomLines() != undefined) {
+            this.phantomLines = new Array();
+            this.m2s.getPhantomLines().forEach(pl => {
+                this.phantomLines.push(new PhantomElement_1.default("line", this.containerId, { lineX: relX, lineY: pl }, this.phantomCanvas));
+            });
+            this.setPhantomLineListeners();
+        }
+        // if(e.type === "draggingNote"){
+        //     console.log(phantomNoteElement, this.phantomLines)
+        // }
+    }
+    removeLines() {
+        var lines = this.interactionOverlay.querySelectorAll(".phantomLine");
+        this.removePhantomLineListeners();
+        if (lines.length > 0) {
+            lines.forEach(l => {
+                l.remove();
+            });
+        }
+        return this;
+    }
+    drawMarkers(e) {
+        this.container.querySelectorAll(".phantomMarker").forEach(pm => pm.remove());
+        var pm = new PhantomElement_1.default("timeMarkers", this.containerId, { lastStaffEnteredId: e.target.getAttribute("refId"),
+            measureMatrix: this.m2s.getMeasureMatrix() });
+    }
+    resetCanvas() {
+        this.setContainerId(this.containerId);
+        this.rootBBox = this.vrvSVG.getBoundingClientRect();
+        this.phantomCanvas = this.interactionOverlay.querySelector("#phantomCanvas");
+        this.removeListeners();
+        this.removePhantomLineListeners();
+        this.phantom = new PhantomElement_1.default("note", this.containerId);
+        this.setListeners();
+        this.setPhantomLineListeners();
+    }
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setContainerId(id) {
+        this.containerId = id;
+        this.vrvSVG = cq.getVrvSVG(id);
+        this.interactionOverlay = cq.getInteractOverlay(id);
+        this.container = document.getElementById(id);
+        return this;
+    }
+    setPhantomNote(note = undefined) {
+        this.phantom = note || new PhantomElement_1.default("note", this.containerId);
+        return this;
+    }
+    getIsTrackingMouse() {
+        return this.isTrackingMouse;
+    }
+}
+exports.default = PhantomElementHandler;

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

@@ -0,0 +1,233 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ScoreManipulator_1 = require("../gui/ScoreManipulator");
+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 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);
+            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);
+            e.preventDefault();
+            e.stopPropagation();
+            meiOperation.removeMeasure(this.currentMEI);
+            this.loadDataCallback("last", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+        }).bind(this);
+        this.addStaff = (function addStaff(e) {
+            var target = e.target.closest(".manipulator");
+            target.dispatchEvent(this.manipulateEvent);
+            e.preventDefault();
+            e.stopPropagation();
+            var relpos = target.classList.contains("below") ? "below" : "above";
+            meiOperation.addStaff(this.currentMEI, document.getElementById(target.getAttribute("refId")), relpos);
+            this.musicPlayer.resetMidiInstruments();
+            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");
+            target.dispatchEvent(this.manipulateEvent);
+            e.preventDefault();
+            e.stopPropagation();
+            var relpos = target.classList.contains("below") ? "below" : "above";
+            meiOperation.removeStaff(this.currentMEI, document.getElementById(target.getAttribute("refId")), relpos);
+            this.musicPlayer.resetMidiInstruments();
+            this.loadDataCallback("1", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+            e.target.dispatchEvent(this.manipulateEvent);
+        }).bind(this);
+        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");
+    }
+    addCanvas() {
+        var _a;
+        var rootBBox = cq.getVrvSVG(this.containerId).firstElementChild.getBoundingClientRect();
+        var rootWidth = rootBBox.width.toString();
+        var rootHeigth = rootBBox.height.toString();
+        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(" "))
+        (_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.drawMeasureManipulators();
+        this.sm.drawStaffManipulators();
+        this.sm.drawVoiceSelectors();
+        this.setListeners();
+        return this;
+    }
+    removeElements() {
+        //this.removeListeners()
+        this.interactionOverlay.querySelectorAll(manipSelector).forEach(m => {
+            m.remove();
+        });
+    }
+    setListeners() {
+        var that = this;
+        this.removeListeners();
+        this.interactionOverlay.querySelector("#measureAdder").addEventListener("click", this.addMeasure, true);
+        this.interactionOverlay.querySelector("#measureRemover").addEventListener("click", this.removeMeasure, true);
+        this.interactionOverlay.querySelectorAll(".addStaff").forEach(as => {
+            as.addEventListener("click", that.addStaff, true);
+        });
+        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;
+        var that = this;
+        (_a = this.interactionOverlay.querySelector("#measureAdder")) === null || _a === void 0 ? void 0 : _a.removeEventListener("click", this.addMeasure);
+        (_b = this.interactionOverlay.querySelector("#measureRemover")) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.removeMeasure);
+        this.interactionOverlay.querySelectorAll(".addStaff").forEach(as => {
+            as.removeEventListener("click", that.addStaff);
+        });
+        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");
+        });
+        var activeNotes = Array.from(cq.getContainer(this.containerId).querySelectorAll(".activeLayer > .note")).reverse();
+        var hasNotes = activeNotes.length > 0;
+        var lastNode = cq.getContainer(this.containerId).querySelector(".activeLayer > :is(.rest, .mRest");
+        if (hasNotes) {
+            lastNode = activeNotes[0];
+        }
+        this.scoreGraph.setCurrentNodeById(lastNode.id);
+    }
+    //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;
+    }
+    setScoreGraph(sg) {
+        this.scoreGraph = sg;
+        return this;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        this.sm.setContainerId(this.containerId);
+        return this;
+    }
+}
+exports.default = ScoreManipulatorHandler;