vibe-editor 0.0.4 → 0.0.6

package/src/scripts/js/utils/VerovioWrapperLocal.js

@@ -1,156 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const verovio_1 = require("verovio");
-//@ts-ignore
-//const $ = H5P.jQuery;
-/**
- * A wrapper around the verovio web worker to permit mocking in tests.
- */
-class VerovioWrapper {
-    constructor() {
-        this.vrvToolkit = new verovio_1.default.toolkit() || null;
-        this.r = 1;
-        if (this.isRetina()) {
-            this.r = 2;
-        }
-        this.widthValue = 2500;
-        this.options = {
-            // from: 'mei',
-            footer: 'none',
-            header: 'none',
-            pageMarginLeft: 50,
-            pageMarginTop: 100,
-            pageMarginBottom: 0,
-            font: 'Bravura',
-            //adjustPageWidth: 0,
-            //adjustPageHeight: 0,
-            noJustification: 1,
-            pageWidth: (this.widthValue / (window.devicePixelRatio / this.r)) / (screen.availHeight / window.innerWidth),
-            //svgRemoveXlink: true,
-            svgViewBox: true,
-            //svgBoundingBoxes: true
-            //pageHeight: 60000
-        };
-        this.vrvToolkit.setOptions(this.options);
-    }
-    /**
-     * Detect, if retina display is used.
-     * This will be important to adjust the pagewith with the given zoom level
-     * @returns
-     */
-    isRetina() {
-        if (window.matchMedia) {
-            var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
-            return (mq && mq.matches);
-        }
-    }
-    setMessage(data) {
-        this.r = 1;
-        if (this.isRetina()) {
-            this.r = 2;
-        }
-        this.vrvToolkit.setOptions({
-            //pageWidth: (this.vrvToolkit.getOptions().pageWidth / (window.devicePixelRatio / this.r)) / (screen.availHeight / window.innerWidth)
-            pageWidth: (this.widthValue / (window.devicePixelRatio / this.r)) / (screen.availHeight / window.innerWidth)
-        });
-        this.data = data || null;
-        var result = {
-            id: data.id
-        };
-        switch (data.action) {
-            case 'renderData':
-                result.mei = this.renderData();
-                break;
-            case 'getElementAttr':
-                result.attributes = this.getElementAttr();
-                break;
-            case 'getTimeForElement':
-                result.time = this.getTimeForElement();
-                break;
-            case "getTimesForElement":
-                result.times = this.getTimesForElement();
-            case 'edit':
-                result.result = this.edit();
-                break;
-            case 'getMEI':
-                result.mei = this.getMEI();
-                break;
-            case 'editInfo':
-                result.info = this.editInfo();
-                break;
-            case 'renderToSVG':
-                result.svg = this.renderToSVG();
-                break;
-            case 'renderToMidi':
-                result.midi = this.renderToMidi();
-            default:
-                break;
-        }
-        return result;
-    }
-    getID() {
-        return this.data.id;
-    }
-    renderData() {
-        var meiString;
-        if (this.data.isUrl) {
-            const req = new XMLHttpRequest();
-            req.open('GET', this.data.mei, false);
-            //req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
-            //req.onerror = (e) => reject(Error(`Network Error: ` + e));
-            req.send();
-            if (req.status === 200) {
-                meiString = req.response;
-            }
-        }
-        else {
-            meiString = this.data.mei;
-        }
-        return this.vrvToolkit.renderData(meiString, {});
-    }
-    getElementAttr() {
-        return this.vrvToolkit.getElementAttr(this.data.elementId);
-    }
-    getTimeForElement() {
-        return this.vrvToolkit.getTimeForElement(this.data.elementId);
-    }
-    getTimesForElement() {
-        return this.vrvToolkit.getTimesForElement(this.data.elementId);
-    }
-    edit() {
-        return this.vrvToolkit.edit(this.data.editorAction);
-    }
-    getMEI() {
-        return this.vrvToolkit.getMEI({
-            pageNo: 0,
-            scoreBased: true
-        });
-    }
-    editInfo() {
-        return this.vrvToolkit.editInfo();
-    }
-    renderToSVG() {
-        return this.vrvToolkit.renderToSVG(1);
-    }
-    renderToMidi() {
-        return this.vrvToolkit.renderToMIDI();
-    }
-    /**
-     * Get Toolkit instance to use any method of verovio outside of score editor.
-     * FOr all available methods go to: https://book.verovio.org/toolkit-reference/toolkit-methods.html
-     * @returns toolkit instance
-     */
-    getToolkit() {
-        return this.vrvToolkit;
-    }
-    getOptions() {
-        return this.options;
-    }
-    setWidthValue(wv) {
-        this.widthValue = wv;
-    }
-    setHeightValue(hv) {
-        this.heightValue = hv;
-    }
-}
-exports.default = VerovioWrapper;

package/src/scripts/js/utils/firefoxBBoxes.js

@@ -1,143 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.adjustBBox = void 0;
-const coordinates = require("./coordinates");
-const allowedClasses = ["chord", "note", "notehead", "staff", "rest", "mRest", "clef", "meterSig", "keySig", "stem"];
-/**
- * Compute new bounding box coordinates for relevant elements. And attach new translate function to element
- * @param element can be either element in #vrvSVG .definition-scale or #interactionOverlay #scoreRects
- * @returns
- */
-function adjustBBox(element) {
-    var _a;
-    var elClass;
-    if (!allowedClasses.some(ac => {
-        if (element.classList.contains(ac)) {
-            elClass = ac;
-            return true;
-        }
-    })) {
-        return;
-    }
-    //target = element in #scoreRects
-    var target;
-    //source = element in #vrvSVG
-    var source;
-    if (element.getAttribute("refId") === null) {
-        target = (_a = document.querySelector("[refId=" + element.id + "]")) === null || _a === void 0 ? void 0 : _a.querySelector("rect");
-        source = element;
-    }
-    else {
-        target = element.querySelector("rect");
-        source = document.getElementById(element.getAttribute("refId"));
-    }
-    if (source === null || target === null) {
-        throw new Error("Referenced Element is null. BBox can't be computed for" + element.toString());
-    }
-    switch (elClass) {
-        case "clef":
-        case "keySig":
-            simpleTranslate(source, target);
-            break;
-        case "mRest":
-            simpleTranslate(source, target);
-            halfWidth(target);
-            break;
-        case "rest":
-            simpleTranslate(source, target);
-            adjustHightToLowestStaffLine(source, target);
-            halfWidth(target);
-            break;
-        case "meterSig":
-            simpleTranslate(source, target);
-            adjustHightToLowestStaffLine(source, target);
-            break;
-        case "staff":
-            adjustHightToLowestStaffLine(source, target);
-            adjustWidthToBarLine(source, target);
-            break;
-        case "note":
-            translateNotehead(source, target);
-            adjustToBetweenStemNoteheadBounds(source, target);
-            break;
-        case "chord":
-            simpleTranslate(source, target);
-            adjustToBetweenStemNoteheadBounds(source, target);
-            break;
-        case "stem":
-            nullifyBBox(target);
-            break;
-    }
-}
-exports.adjustBBox = adjustBBox;
-function simpleTranslate(source, target) {
-    var useElement = source.querySelector("use") || source.querySelector("rect");
-    var translateY = -parseFloat(useElement.getAttribute("y"));
-    var translateX = -parseFloat(useElement.getAttribute("x"));
-    target.setAttribute("transform", "translate(" + translateX.toString() + "," + translateY.toString() + ")");
-}
-function adjustHightToLowestStaffLine(source, target) {
-    var closestStaff;
-    if (source.classList.contains("staff")) {
-        closestStaff = source;
-    }
-    else {
-        closestStaff = source.closest(".staff");
-    }
-    var lowestStaffLine = Array.from(closestStaff.querySelectorAll(":scope > path")).reverse()[0];
-    var coordsStaffline = coordinates.getDOMMatrixCoordinates(lowestStaffLine, source.closest("#vrvSVG"));
-    var coordsTarget = coordinates.getDOMMatrixCoordinates(target, target.closest("#interactionOverlay"));
-    var targetHeight = coordsStaffline.y - coordsTarget.y;
-    target.setAttribute("height", targetHeight.toString());
-}
-function adjustWidthToBarLine(source, target) {
-    var closestMeasure = source.closest(".measure");
-    var barline = closestMeasure.querySelector(".barLine");
-    var coordsBarline = coordinates.getDOMMatrixCoordinates(barline, source.closest("#vrvSVG"));
-    var coordsTarget = coordinates.getDOMMatrixCoordinates(target, target.closest("#interactionOverlay"));
-    var targetWidth = coordsBarline.x - coordsTarget.x;
-    target.setAttribute("width", targetWidth.toString());
-}
-function translateNotehead(source, target) {
-    var noteHeadSource = source.querySelector(".notehead");
-    var noteHeadTarget = target.closest("#interactionOverlay").querySelector("[refId=" + noteHeadSource.id + "]");
-    simpleTranslate(noteHeadSource, noteHeadTarget);
-}
-function adjustToBetweenStemNoteheadBounds(source, target) {
-    var _a, _b;
-    if (source.classList.contains("chord")) {
-        var noteHeadSource = Array.from(source.querySelectorAll(".notehead")).reverse()[0];
-    }
-    else {
-        noteHeadSource = source.querySelector(".notehead");
-    }
-    var noteHeadTarget = target.closest("#interactionOverlay").querySelector("[refId=" + noteHeadSource.id + "]");
-    var coordsNoteHead = coordinates.getDOMMatrixCoordinates(noteHeadTarget, target.closest("#interactionOverlay"));
-    var upperBoundSource = source.querySelector(".stem")
-        || ((_a = source.closest(".chord")) === null || _a === void 0 ? void 0 : _a.querySelector(".stem"))
-        || ((_b = source.closest(".chord")) === null || _b === void 0 ? void 0 : _b.querySelector(".notehead"))
-        || source.querySelector(".notehead");
-    var upperBoundTarget = target.closest("#interactionOverlay").querySelector("[refId=" + upperBoundSource.id + "]");
-    var coordsUpperBound = coordinates.getDOMMatrixCoordinates(upperBoundTarget, target.closest("#interactionOverlay"));
-    var targetWidth;
-    targetWidth = parseFloat(target.closest("#interactionOverlay").querySelector(".barLine rect").getAttribute("width")) * 2; // very crude heuristic
-    noteHeadTarget.querySelector("rect").setAttribute("width", targetWidth.toString());
-    target.setAttribute("width", targetWidth.toString());
-    target.setAttribute("x", coordsNoteHead.x.toString());
-    target.setAttribute("y", coordsUpperBound.y.toString());
-    var noteHeadHeight;
-    noteHeadHeight = parseFloat(target.closest("#interactionOverlay").querySelector(".barLine rect").getAttribute("width")) * 2; // very crude heuristic
-    noteHeadTarget.querySelector("rect").setAttribute("height", noteHeadHeight.toString());
-    coordsNoteHead = coordinates.getDOMMatrixCoordinates(noteHeadTarget, target.closest("#interactionOverlay"));
-    if (source.querySelector(".stem") !== null) {
-        adjustHightToLowestStaffLine(source, target);
-    }
-}
-function nullifyBBox(target) {
-    target.setAttribute("width", "1");
-    target.setAttribute("height", "1");
-}
-function halfWidth(target) {
-    var w = parseFloat(target.getAttribute("width")) / 2;
-    target.setAttribute("width", w.toString());
-}