vibe-editor 0.0.0

package/src/scripts/js/utils/VerovioWrapper copy.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//@ts-ignore
+//const $ = H5P.jQuery;
+/**
+ * A wrapper around the verovio web worker to permit mocking in tests.
+ */
+class VerovioWrapper {
+    constructor() {
+        //@ts-ignore
+        this.vrvToolkit = new verovio.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/VerovioWrapper.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const midi_1 = require("@tonejs/midi");
+const buffer_1 = require("buffer");
+//@ts-ignore
+//const $ = H5P.jQuery;
+/**
+ * A wrapper around the verovio web worker to permit mocking in tests.
+ */
+class VerovioWrapper {
+    constructor() {
+        //@ts-ignore
+        this.vrvToolkit = new verovio.toolkit() || null;
+        this.r = 1;
+        // if (this.isRetina()) {
+        //   this.r = 2
+        // }
+        this.widthValue = 1500;
+        var pageWidth = (this.widthValue / (window.devicePixelRatio / this.r)) / (screen.availHeight / window.innerWidth);
+        this.options = {
+            footer: 'none',
+            header: 'none',
+            pageMarginLeft: 50,
+            pageMarginTop: 50,
+            adjustPageHeight: true,
+            font: 'Bravura',
+            pageWidth: pageWidth / 2,
+            //pageHeight: pageWidth / 4,
+            //justifyVertically: true,
+            svgViewBox: true,
+        };
+        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.svg = 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(data.pageNo);
+                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;
+        }
+        var render = this.vrvToolkit.renderData(meiString, {});
+        // when page count reaches 2 then each one should be rendered seperately
+        return render;
+    }
+    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(pageNo) {
+        return this.vrvToolkit.renderToSVG(pageNo);
+    }
+    renderToMidi() {
+        return this.vrvToolkit.renderToMIDI();
+    }
+    getMidiJSON() {
+        var midiString = this.renderToMidi();
+        var buffer = buffer_1.Buffer.from(midiString, "base64");
+        return new midi_1.Midi(buffer);
+    }
+    /**
+     * 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.options.pageWidth = wv;
+        this.vrvToolkit.setOptions(this.options);
+    }
+    setHeightValue(hv) {
+        if (typeof hv === "string")
+            hv = parseFloat(hv);
+        this.options.pageHeight = hv + 250;
+        this.vrvToolkit.setOptions(this.options);
+    }
+}
+exports.default = VerovioWrapper;

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

@@ -0,0 +1,156 @@
+"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/convenienceQueries.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasActiveElement = exports.getBySelector = exports.getContainer = exports.getInteractOverlay = exports.getVrvSVG = void 0;
+function getVrvSVG(containerId, pageNo = 1) {
+    return document.querySelector("#" + containerId + " #vrvSVG");
+}
+exports.getVrvSVG = getVrvSVG;
+function getInteractOverlay(containerId) {
+    return document.querySelector("#" + containerId + " #interactionOverlay");
+}
+exports.getInteractOverlay = getInteractOverlay;
+function getContainer(id) {
+    return document.getElementById(id);
+}
+exports.getContainer = getContainer;
+/**
+ * Get any element by defining parent, target an selector. Booleans will define if the strings are handeled as ids
+ */
+function getBySelector(parent, parentModulator, target, targetModulator, selector, all = false) {
+    if (parentModulator !== null) {
+        parent = parentModulator + parent;
+    }
+    if (targetModulator) {
+        target = targetModulator + target;
+    }
+    if (all) {
+        return Array.from(document.querySelectorAll(parent + " " + selector + " " + target));
+    }
+    else {
+        return document.querySelector(parent + " " + selector + " " + target);
+    }
+}
+exports.getBySelector = getBySelector;
+function hasActiveElement(containerId) {
+    return document.getElementById(containerId).classList.contains("activeContainer");
+}
+exports.hasActiveElement = hasActiveElement;

package/src/scripts/js/utils/coordinates.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformToDOMMatrixCoordinates = exports.getDOMMatrixCoordinates = void 0;
+/**
+ * Get DOMMatrix coordnates of element according to parent canvas class. Returns null if no canvas is found. If element is DOMRect, canvas must be provided
+ * @param element
+ * @param canvas provide canvas for element, otherwise closest canvas class will be retrieved
+ * @returns
+ */
+function getDOMMatrixCoordinates(element, canvas = null) {
+    if (canvas === null) {
+        canvas = element instanceof Element ? element.closest(".canvas") : null;
+        if (element instanceof DOMRect) {
+            throw new Error("Canvas must be provided, if input is instance of DOMRect. Actual instance: " + element.constructor.name);
+        }
+        if (canvas === null)
+            return;
+    }
+    if (canvas.id === "vrvSVG")
+        canvas = canvas.previousElementSibling;
+    var canvasMatrix = canvas.getScreenCTM().inverse();
+    //var elementBBox = !(element instanceof Element) ? element : element.getBoundingClientRect()
+    var elementBBox;
+    try {
+        elementBBox = element.getBoundingClientRect();
+    }
+    catch (error) {
+        elementBBox = element;
+    }
+    var ptLT = new DOMPoint(elementBBox.left, elementBBox.top);
+    ptLT = ptLT.matrixTransform(canvasMatrix);
+    var ptRB = new DOMPoint(elementBBox.right, elementBBox.bottom);
+    ptRB = ptRB.matrixTransform(canvasMatrix);
+    var width = ptRB.x - ptLT.x;
+    var height = ptRB.y - ptLT.y;
+    return { left: ptLT.x, top: ptLT.y, right: ptRB.x, bottom: ptRB.y, width: width, height: height, x: ptLT.x, y: ptLT.y };
+}
+exports.getDOMMatrixCoordinates = getDOMMatrixCoordinates;
+/**
+ * Transforms the given coordinates for a given canvas
+ * @param x
+ * @param y
+ * @param canvas
+ * @returns
+ */
+function transformToDOMMatrixCoordinates(x, y, canvas) {
+    if (canvas.id === "vrvSVG")
+        canvas = canvas.previousElementSibling;
+    var canvasMatrix = canvas.getScreenCTM().inverse();
+    var pt = new DOMPoint(x, y);
+    pt = pt.matrixTransform(canvasMatrix);
+    return { x: pt.x, y: pt.y };
+}
+exports.transformToDOMMatrixCoordinates = transformToDOMMatrixCoordinates;