vibe-editor 0.0.3 → 0.0.5

package/src/scripts/js/handlers/AnnotationLineHandler.js

@@ -1,113 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const d3 = require("d3");
-//@ts-ignore
-//const $ = H5P.jQuery;
-/**
- * Class that handles insert mode, events, and actions.
- */
-class AnnotationLineHandler {
-    constructor() {
-        this.initDragRects();
-        this.initAnnots();
-        //this.initCustomShapes()
-    }
-    setListeners() {
-        // if(typeof this.customShapes !== "undefined"){
-        //   this.customShapes.call(this.dragShapeBehaviour)
-        // }
-        if (typeof this.annotations !== "undefined") {
-            //this.annotations.call(this.dragAnnotBehaviour);
-            this.lines.call(this.dragLineBehaviour);
-        }
-        return this;
-    }
-    removeListeners() {
-        // if(typeof this.customShapes !== "undefined"){
-        //   this.customShapes.on(".drag", null);
-        // }
-        if (typeof this.annotations !== "undefined") {
-            //this.annotations.on(".drag", null);
-            this.lines.on(".drag", null);
-        }
-        return this;
-    }
-    resetListeners() {
-        this.removeListeners();
-        this.setListeners();
-    }
-    dragStarted() {
-        this.draggedAnnot = d3.event.sourceEvent.currentTarget;
-        this.draggedLine = d3.event.sourceEvent.currentTarget;
-        this.draggedShape = d3.event.sourceEvent.currentTarget;
-        try {
-            this.attachedLine = this.draggedAnnot.closest("g").getElementsByTagName("line")[0];
-        }
-        catch (_a) {
-            this.attachedLine = undefined;
-        }
-        this.dragStartCoords = [d3.event.x, d3.event.y];
-        this.dx = this.dragStartCoords[0];
-        this.dy = this.dragStartCoords[1];
-    }
-    ////////// ANNOTS //////////
-    initAnnots() {
-        this.dragAnnotBehaviour = d3.drag()
-            .on('start', this.dragStarted.bind(this))
-            .on('drag', this.draggingAnnot.bind(this))
-            .on('end', this.dragAnnotEnded.bind(this));
-        this.annotations = d3.selectAll(".annotText");
-        this.dragStartCoords = new Array(this.annotations.size());
-        this.draggedAnnot = null;
-        this.resetListeners();
-    }
-    draggingAnnot() {
-        this.dx = d3.event.x;
-        this.dy = d3.event.y;
-        this.draggedAnnot.setAttribute("x", (this.dx).toString());
-        this.draggedAnnot.setAttribute("y", (this.dy).toString());
-        this.attachedLine.setAttribute("x1", this.draggedAnnot.getAttribute("x"));
-        this.attachedLine.setAttribute("y1", this.draggedAnnot.getAttribute("y"));
-    }
-    dragAnnotEnded() {
-    }
-    //////////// LINE ////////////////////
-    initDragRects() {
-        this.dragLineBehaviour = d3.drag()
-            .on('start', this.dragStarted.bind(this))
-            .on('drag', this.draggingLine.bind(this))
-            .on('end', this.dragLineEnded.bind(this));
-        this.lines = d3.selectAll(".lineDragRect");
-        this.dragStartCoords = new Array(this.lines.size());
-        this.draggedLine = null;
-        this.resetListeners();
-    }
-    draggingLine() {
-        this.dx = d3.event.x;
-        this.dy = d3.event.y;
-        this.draggedLine.setAttribute("x", (this.dx).toString());
-        this.draggedLine.setAttribute("y", (this.dy).toString());
-        this.attachedLine.setAttribute("x2", this.draggedLine.getAttribute("x"));
-        this.attachedLine.setAttribute("y2", this.draggedLine.getAttribute("y"));
-        this.highlightObjectCallback(this.draggedLine);
-    }
-    dragLineEnded() {
-        this.snapToObjCallback(this.attachedLine);
-    }
-    //////////// CALLBACKS ////////////
-    setSnapToObjCallback(snapToObj) {
-        this.snapToObjCallback = snapToObj;
-        return this;
-    }
-    removeUpdateAnnotationIDsCallback() {
-        this.snapToObjCallback = undefined;
-        return this;
-    }
-    sethighlightObjectCallback(highlightObjectCallback) {
-        this.highlightObjectCallback = highlightObjectCallback;
-    }
-    setUpdateCallback(updateCallback) {
-        this.updateCallback = updateCallback;
-    }
-}
-exports.default = AnnotationLineHandler;

package/src/scripts/js/handlers/ArticulationHandler.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const cq = require("../utils/convenienceQueries");
-class ArticulatioHandler {
-    setListeners() {
-    }
-    removeListeners() {
-        throw new Error("Method not implemented.");
-    }
-    setM2S(m2s) {
-        this.m2s = m2s;
-        return;
-    }
-    setContainerId(containerId) {
-        this.containerId = containerId;
-        this.container = cq.
-        ;
-        return this;
-    }
-}

package/src/scripts/js/handlers/HarmonyHandler.js

@@ -1,282 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const meiConverter = require("../utils/MEIConverter");
-const constants_1 = require("../constants");
-const random_1 = require("../utils/random");
-const HarmonyLabel_1 = require("../gui/HarmonyLabel");
-const coordinates = require("../utils/coordinates");
-class HarmonyHandler {
-    constructor() {
-        this.setHarmonyLabelHandlerClick = (function setHarmonyLabelHandler(e) {
-            if (document.body.classList.contains("harmonyMode")) {
-                this.harmonyLabelHandler(e);
-            }
-        }).bind(this);
-        this.setHarmonyLabelHandlerKey = (function setHarmonyLabelHandler(e) {
-            if (e.ctrlKey || e.metaKey) {
-                if (e.key === "k" && Array.from(document.querySelectorAll(".note, .chord, .rest, .mrest")).some(el => el.classList.contains("marked"))) {
-                    e.preventDefault();
-                    this.harmonyLabelHandler(e);
-                }
-            }
-        }).bind(this);
-        this.activateHarmonyHighlight = (function highlightNextHarmonyHandler(e) {
-            if (e.type === "mouseleave" && !this.isGlobal) {
-                document.getElementById(constants_1.constants._ROOTSVGID_).addEventListener("mousemove", this.activateHarmonyHighlight);
-            }
-            if (!this.isGlobal) {
-                this.highlightNextHarmony(e);
-            }
-        }).bind(this);
-        this.deactivateHarmonyHighlight = (function deactivateHighlight(e) {
-            // document.querySelectorAll(".marked").forEach(m => {
-            //     m.classList.remove("marked")
-            // })
-            document.getElementById(constants_1.constants._ROOTSVGID_).removeEventListener("mousemove", this.activateHarmonyHighlight);
-        }).bind(this);
-        this.modifyLabelHandler = (function modifyLabelHandler(e) {
-            document.querySelectorAll(".marked").forEach(m => {
-                m.classList.remove("marked");
-            });
-            this.modifyLabel(e);
-        }).bind(this);
-        this.submitLabelHandler = (function submitHandler(e) {
-            if (e.key === "Enter" && this.harmonyCanvas.hasChildNodes()) {
-                this.submitLabel();
-            }
-        }).bind(this);
-        this.closeModifyWindowHandler = (function closeModifyWindow(e) {
-            if (e.key === "Escape") {
-                this.closeModifyWindow();
-            }
-        }).bind(this);
-        this.addCanvas();
-        this.harmonyElements = new Map();
-    }
-    addCanvas() {
-        if (typeof this.harmonyCanvas === "undefined") {
-            this.harmonyCanvas = document.createElementNS(constants_1.constants._SVGNS_, "svg");
-            this.harmonyCanvas.setAttribute("id", "harmonyCanvas");
-        }
-        this.root = document.getElementById(constants_1.constants._ROOTSVGID_);
-        this.root.insertBefore(this.harmonyCanvas, this.root.firstChild);
-    }
-    setListeners() {
-        document.querySelectorAll(".sylTextRect").forEach(s => {
-            s.remove();
-        });
-        if (!this.isGlobal) {
-            document.getElementById(constants_1.constants._ROOTSVGID_).addEventListener("click", this.setHarmonyLabelHandlerClick, true);
-            document.getElementById(constants_1.constants._ROOTSVGID_).addEventListener("mousemove", this.activateHarmonyHighlight);
-            document.getElementById(constants_1.constants._ROOTSVGID_).addEventListener("keydown", this.closeModifyWindowHandler, true);
-        }
-        document.addEventListener("keydown", this.setHarmonyLabelHandlerKey);
-        document.querySelectorAll(".harm").forEach(h => {
-            h.addEventListener("mouseover", this.deactivateHarmonyHighlight);
-            h.addEventListener("mouseleave", this.activateHarmonyHighlight);
-            h.addEventListener("dblclick", this.modifyLabelHandler);
-        });
-        return this;
-    }
-    removeListeners() {
-        document.getElementById(constants_1.constants._ROOTSVGID_).removeEventListener("click", this.setHarmonyLabelHandlerClick);
-        document.removeEventListener("keydown", this.setHarmonyLabelHandlerKey);
-        document.getElementById(constants_1.constants._ROOTSVGID_).removeEventListener("mousemove", this.activateHarmonyHighlight);
-        document.getElementById(constants_1.constants._ROOTSVGID_).removeEventListener("keydown", this.closeModifyWindowHandler);
-        document.querySelectorAll(".harm").forEach(h => {
-            h.removeEventListener("mouseenter", this.deactivateHarmonyHighlight);
-            h.removeEventListener("mouseleave", this.activateHarmonyHighlight);
-            h.removeEventListener("dblclick", this.modifyLabelHandler);
-        });
-        return this;
-    }
-    /**
-     * Open Inputbox for (first) selected Note
-     */
-    harmonyLabelHandler(e) {
-        var root = document.getElementById(constants_1.constants._ROOTSVGID_);
-        var rootBBox = root.getBoundingClientRect();
-        var nextNote = document.querySelector(".note.marked, .chord.marked");
-        if (nextNote === null) {
-            return;
-        }
-        var nextNoteBBox = nextNote.getBoundingClientRect();
-        var staffBBox = nextNote.closest(".staff").getBoundingClientRect();
-        var posx = nextNoteBBox.left - nextNoteBBox.width / 2 - window.scrollX - rootBBox.x - root.scrollLeft;
-        var posy = staffBBox.bottom - window.scrollY - rootBBox.y - root.scrollLeft;
-        if (this.currentMEI.querySelector("harm[startid=\"" + nextNote.id + "\"]") === null && !this.harmonyCanvas.hasChildNodes()) {
-            this.createInputBox(posx, posy, nextNote.id);
-        }
-        else if (this.harmonyCanvas.hasChildNodes()) {
-            this.closeModifyWindow();
-        }
-    }
-    setHarmonyLabel(label, bboxId) {
-        var harmonyLabel = new HarmonyLabel_1.default(label, bboxId, this.currentMEI); // TODO: Make Dynamically
-        this.harmonyElements.set(harmonyLabel.getHarmElement().id, harmonyLabel);
-        var measure = this.currentMEI.getElementById(bboxId).closest("measure");
-        measure.appendChild(harmonyLabel.getHarmElement());
-        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
-        this.loadDataCallback("", mei, false, constants_1.constants._TARGETDIVID_).then(() => {
-            this.reset();
-        });
-        return harmonyLabel;
-    }
-    highlightNextHarmony(e, active = true) {
-        if (!active) {
-            return;
-        }
-        var posx = coordinates.adjustToPage(e.pageX, "x");
-        var posy = coordinates.adjustToPage(e.pageY, "y");
-        var nextNoteBBox = this.m2m.findScoreTarget(posx, posy);
-        var el = document.getElementById(nextNoteBBox.id);
-        if (el.closest(".chord") !== null) {
-            el = el.closest(".chord");
-        }
-        if (!el.classList.contains("marked")) {
-            document.querySelectorAll(".marked").forEach(m => {
-                m.classList.remove("marked");
-            });
-            el.classList.add("marked");
-        }
-    }
-    modifyLabel(e) {
-        var target = e.target;
-        target = target.closest(".harm");
-        target.setAttribute("visibility", "hidden");
-        this.harmId = target.id;
-        var targetBBox = target.getBoundingClientRect();
-        var root = document.getElementById(constants_1.constants._ROOTSVGID_);
-        var rootBBox = root.getBoundingClientRect();
-        var posx = targetBBox.x - window.scrollX - rootBBox.left - root.scrollLeft; //coordinates.adjustToPage(e.pageX, "x")
-        var posy = targetBBox.y - window.scrollY - rootBBox.top - root.scrollTop; //coordinates.adjustToPage(e.pageY, "y")
-        if (document.querySelector("*[refHarmId=\"" + target.id + "\"]") !== null) {
-            return;
-        }
-        this.createInputBox(posx, posy, target.id);
-    }
-    closeModifyWindow() {
-        Array.from(this.harmonyCanvas.children).forEach(c => {
-            c.remove();
-        });
-        // clean MEI from empty harm Elements
-        this.currentMEI.querySelectorAll("harm").forEach(h => {
-            var _a;
-            (_a = document.getElementById(h.id)) === null || _a === void 0 ? void 0 : _a.setAttribute("visibility", "visible");
-            if (h.childElementCount > 0) {
-                if (h.firstElementChild.childElementCount === 0) {
-                    h.remove();
-                }
-            }
-            else if (h.textContent.length === 0) {
-                h.remove();
-            }
-        });
-    }
-    submitLabel() {
-        var harmonyDiv = this.harmonyCanvas.getElementsByClassName("harmonyDiv")[0];
-        var text = harmonyDiv.textContent;
-        var harmLabel = this.harmonyElements.get(harmonyDiv.closest("g").getAttribute("refHarmId"));
-        if (typeof harmLabel !== "undefined") {
-            harmLabel.modifyLabel(text);
-            var currentHarm = this.currentMEI.getElementById(harmLabel.getHarmElement().id);
-            currentHarm.parentElement.replaceChild(harmLabel.getHarmElement(), currentHarm);
-        }
-        else {
-            harmLabel = this.setHarmonyLabel(harmonyDiv.textContent, harmonyDiv.closest("g").getAttribute("refHarmId"));
-            var oldLabel = this.currentMEI.getElementById(this.harmId);
-            harmLabel.getHarmElement().setAttribute("tstamp", oldLabel.getAttribute("tstamp"));
-            harmLabel.getHarmElement().setAttribute("startid", oldLabel.getAttribute("startid"));
-            oldLabel.remove();
-        }
-        this.closeModifyWindow();
-        var mei = meiConverter.restoreXmlIdTags(this.currentMEI);
-        this.loadDataCallback("", mei, false, constants_1.constants._TARGETDIVID_).then(() => {
-            this.reset();
-        });
-    }
-    createInputBox(posx, posy, targetId) {
-        var textGroup = document.createElementNS(constants_1.constants._SVGNS_, "g");
-        textGroup.setAttribute("id", random_1.uuidv4());
-        textGroup.setAttribute("refHarmId", targetId);
-        var text = document.createElementNS(constants_1.constants._SVGNS_, "svg");
-        text.classList.add("harmonyText");
-        var textForeignObject = document.createElementNS(constants_1.constants._SVGNS_, "foreignObject");
-        textForeignObject.classList.add("harmonyFO");
-        var textDiv = document.createElement("div");
-        textDiv.setAttribute("contenteditable", "true");
-        textDiv.textContent = typeof this.harmonyElements.get(targetId) !== "undefined" ? this.harmonyElements.get(targetId).getInputString() : "";
-        textDiv.classList.add("harmonyDiv");
-        text.append(textForeignObject);
-        document.body.appendChild(textDiv);
-        var rectPadding = 5;
-        text.setAttribute("x", (posx + rectPadding).toString());
-        text.setAttribute("y", (posy).toString());
-        textForeignObject.setAttribute("x", "0");
-        textForeignObject.setAttribute("y", "0");
-        textForeignObject.setAttribute("height", (textDiv.clientHeight + 2 * rectPadding).toString());
-        textForeignObject.setAttribute("width", (100 + 2 * rectPadding).toString());
-        this.harmonyCanvas.appendChild(textGroup);
-        textGroup.appendChild(text);
-        textForeignObject.appendChild(textDiv);
-        // Special Listeners while Editing Harmonies
-        var that = this;
-        textDiv.addEventListener("focus", function () {
-            that.removeListeners();
-            that.musicPlayer.removePlayListener();
-        });
-        textDiv.addEventListener("blur", function () {
-            that.setListeners();
-            that.musicPlayer.setPlayListener();
-        });
-        textDiv.addEventListener("keydown", this.submitLabelHandler);
-        textDiv.focus();
-    }
-    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;
-        elements.forEach(e => {
-            var dur = parseInt(e.getAttribute("dur"));
-            tstamp += 4 / dur;
-            var dots = e.getAttribute("dots");
-            var add = dur;
-            if (dots !== null) {
-                for (var i = 0; i < parseInt(dots); i++) {
-                    add = add / 2;
-                    tstamp += add;
-                }
-            }
-        });
-        return tstamp;
-    }
-    reset() {
-        this.setListeners();
-        this.addCanvas();
-    }
-    setM2M(m2m) {
-        this.m2m = m2m;
-        return this;
-    }
-    setCurrentMEI(mei) {
-        this.currentMEI = mei;
-        return this;
-    }
-    setMusicPlayer(musicPlayer) {
-        this.musicPlayer = musicPlayer;
-        return this;
-    }
-    setGlobal(global) {
-        this.isGlobal = global;
-        return this;
-    }
-    getGlobal() {
-        return this.isGlobal;
-    }
-    setLoadDataCallback(loadDataCallback) {
-        this.loadDataCallback = loadDataCallback;
-        return this;
-    }
-}
-exports.default = HarmonyHandler;