vibe-editor 0.0.4 → 0.0.5

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

@@ -12,9 +12,9 @@ class VerovioWrapper {
         //@ts-ignore
         this.vrvToolkit = new verovio.toolkit() || null;
         this.r = 1;
-        // if (this.isRetina()) {
-        //   this.r = 2
-        // }
+        if (this.isRetina()) {
+            this.r = 2;
+        }
         this.widthValue = 1500;
         var pageWidth = (this.widthValue / (window.devicePixelRatio / this.r)) / (screen.availHeight / window.innerWidth);
         this.options = {
@@ -24,7 +24,7 @@ class VerovioWrapper {
             pageMarginTop: 50,
             adjustPageHeight: true,
             font: 'Bravura',
-            pageWidth: pageWidth,
+            //pageWidth: pageWidth, // adjust size with window size
             //pageHeight: pageWidth / 4,
             //justifyVertically: true,
             svgViewBox: true,

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformToDOMMatrixCoordinates = exports.getDOMMatrixCoordinates = void 0;
+exports.transformToDOMMatrixCoordinates = exports.getCanvasCordinates = 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
@@ -33,9 +33,33 @@ function getDOMMatrixCoordinates(element, canvas = null) {
     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 };
+    return { left: ptLT.x, top: ptLT.y, right: ptRB.x, bottom: ptRB.y, width: width, height: height, x: ptLT.x, y: ptLT.y, matrix: canvasMatrix };
 }
 exports.getDOMMatrixCoordinates = getDOMMatrixCoordinates;
+function getCanvasCordinates(coords, canvas = null) {
+    if (!coords.matrix) {
+        throw new Error("DOMMatrix is missing.");
+    }
+    if (canvas === null) {
+        canvas = canvas instanceof Element ? canvas.closest(".canvas") : null;
+        if (canvas instanceof DOMRect) {
+            throw new Error("Canvas must be provided, if input is instance of DOMRect. Actual instance: " + canvas.constructor.name);
+        }
+        if (canvas === null)
+            return;
+    }
+    // Reverse the transformation
+    var canvasMatrix = coords.matrix.inverse();
+    var ptLT = new DOMPoint(coords.left, coords.top);
+    ptLT = ptLT.matrixTransform(canvasMatrix);
+    var ptRB = new DOMPoint(coords.right, coords.bottom);
+    ptRB = ptRB.matrixTransform(canvasMatrix);
+    var width = ptRB.x - ptLT.x;
+    var height = ptRB.y - ptLT.y;
+    // Create and return the DOMRect
+    return new DOMRect(ptLT.x, ptLT.y, width, height);
+}
+exports.getCanvasCordinates = getCanvasCordinates;
 /**
  * Transforms the given coordinates for a given canvas
  * @param x

package/src/scripts/js/MusicPlayer.js

@@ -1,572 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const Tone = require("tone");
-const mappings_1 = require("./utils/mappings");
-const midi_player_js_1 = require("midi-player-js");
-const Soundfont = require("soundfont-player");
-const constants_1 = require("./constants");
-const coordinates = require("./utils/coordinates");
-const cq = require("./utils/convenienceQueries");
-const buffer_1 = require("buffer");
-const currentlyPlayingFlag = "currentlyPlaying";
-const followerRectID = "followerRect";
-const ac = window.AudioContext;
-const synth = new Tone.Synth().toDestination();
-class MusicPlayer {
-    constructor(containerId) {
-        this.playBtn = (function playBtn(e) {
-            e.preventDefault();
-            this.context.resume().then(() => this.playMidi());
-        }).bind(this);
-        this.rewindBtn = (function rewindBtn(e) {
-            e.preventDefault();
-            this.rewind();
-        }).bind(this);
-        this.playHandler = (function playHandler(e) {
-            if (!this.hasContainerFocus())
-                return;
-            this.playFunction(e);
-        }).bind(this);
-        this.setCurrentNoteHandler = (function setCurrentNoteHandler(e) {
-            this.currentNote = e.target;
-        }).bind(this);
-        /**
-         *  Set last clicked element to restartpoint
-         */
-        this.startPointHandler = (function startPointHandler(e) {
-            if (!this.hasContainerFocus())
-                return;
-            var playingNote = e.target;
-            playingNote = cq.getVrvSVG(this.containerId).querySelector("#" + playingNote.closest("[refId]").getAttribute("refId"));
-            playingNote = playingNote.closest(".note") || playingNote.closest(".rest") || playingNote.closest(".mRest");
-            if (playingNote !== null) {
-                var it = this.durationMap.values();
-                var res = it.next();
-                while (!res.done) {
-                    if (playingNote.id === res.value.note.id) {
-                        this.restartTime = res.value.tick;
-                        break;
-                    }
-                    res = it.next();
-                }
-            }
-        }).bind(this);
-        /**
-         * Adds Class to be highlighted.
-         * Dispatches event for every Note which was started most currently
-         */
-        this.addClass = (function addClass(n, className) {
-            return new Promise(resolve => {
-                n.classList.add(className);
-                n.dispatchEvent(this.noteEvent);
-                resolve(true);
-            });
-        }).bind(this);
-        this.setContainerId(containerId);
-        this.noteEvent = new Event("currentNote");
-        this.playStartEvent = new Event("playStart");
-        this.playEndEvent = new Event("playEnd");
-        this.restartTime = 0;
-        this.setPlayListener();
-        if (navigator.userAgent.toLocaleLowerCase().indexOf("firefox") > 0) {
-            this.isFirefox = true;
-        }
-        else {
-            this.isFirefox = false;
-        }
-        this.getMidiInput();
-    }
-    /**
-     * Add Canvas in which all MusicPlayer SVGs are contained
-     */
-    addCanvas() {
-        //this.root = this.interactionOverlay //document.getElementById(c._vrvSVGID_)
-        this.rootBBox = this.interactionOverlay.getBoundingClientRect();
-        var rootWidth = this.rootBBox.width.toString();
-        var rootHeigth = this.rootBBox.height.toString();
-        if (this.canvasMP == undefined) {
-            this.canvasMP = document.createElementNS(constants_1.constants._SVGNS_, "svg");
-            this.canvasMP.setAttribute("id", "canvasMusicPlayer");
-            this.canvasMP.classList.add("canvas");
-            this.canvasMP.setAttribute("viewBox", ["0", "0", rootWidth, rootHeigth].join(" "));
-        }
-        this.canvasMP.innerHTML = ""; // will delete followerRect if present (usually when score is loaded)
-        this.interactionOverlay = cq.getInteractOverlay(this.containerId);
-        this.interactionOverlay.insertBefore(this.canvasMP, this.interactionOverlay.firstChild);
-    }
-    /**
-     * Initialize Player
-     */
-    initPlayer() {
-        var that = this;
-        //@ts-ignore
-        this.player = new midi_player_js_1.default.Player(function (event) {
-            if (event.name === "Set Tempo") {
-                that.tempo = event.data;
-                //that.pulse = (60000/ (event.data / 2 * 24))/10 //(60000/ (event.data * 24))/10000 //duration is in seconds
-                that.pulse = ((60 / event.data) * 1000) / 120;
-            }
-            if (event.name === 'Note on' && event.velocity !== 0) {
-                var track = event.track;
-                var time = event.tick;
-                var key = track.toString() + "," + event.byteIndex.toString();
-                if (!that.durationMap.has(key)) {
-                    return;
-                }
-                var duration = that.durationMap.get(key).duration;
-                that.restartTime = event.tick;
-                that.highlight(time, duration * 1000);
-                if (!that.isFirefox) {
-                    that.drawFollowerRect();
-                }
-                if (that.instruments != undefined) {
-                    var instr = that.instruments[track - 2];
-                    instr.play(event.noteName, that.context.currentTime, { gain: event.velocity / 100, duration: duration });
-                }
-            }
-        });
-        this.player.loadArrayBuffer(buffer_1.Buffer.from(this.midi, "base64"));
-        this.mapDurations();
-        if (this.instruments == undefined) { // instruments only have to be updated, when new instrument (= track) is added
-            this.context = new ac();
-            this.instruments = new Array(this.player.getEvents().length - 1);
-            this.initInstruments();
-        }
-    }
-    //some change
-    /**
-     * Stop playing
-     */
-    stopInstruments() {
-        var _a;
-        document.dispatchEvent(this.playEndEvent);
-        this.player.stop();
-        (_a = this.instruments) === null || _a === void 0 ? void 0 : _a.forEach(instr => instr.stop(this.context.currentTime));
-        this.player = undefined;
-        this.stopTimeouts();
-        if (this.restartTime === 0) {
-            if (document.getElementById(followerRectID) !== null) {
-                document.getElementById(followerRectID).remove();
-            }
-            Array.from(document.getElementsByClassName(currentlyPlayingFlag)).forEach(element => {
-                element.classList.remove(currentlyPlayingFlag);
-            });
-        }
-        this.initPlayer();
-    }
-    rewind() {
-        if (this.player != undefined) {
-            this.restartTime = 0;
-            this.stopInstruments();
-        }
-    }
-    /**
-     * Initialize Instrument for
-     */
-    initInstruments() {
-        this.setSoundfontsRecursive();
-    }
-    setSoundfontsRecursive(counter = 0) {
-        var i = counter;
-        var that = this;
-        if (i < this.instruments.length) {
-            Soundfont.instrument(this.context, "acoustic_grand_piano").then((instrument) => {
-                that.instruments[i] = instrument;
-                i += 1;
-                that.setSoundfontsRecursive(i);
-            });
-        }
-    }
-    playMidi() {
-        if (!cq.hasActiveElement(this.containerId))
-            return;
-        if (this.player.isPlaying()) {
-            this.stopInstruments();
-        }
-        else {
-            this.player.on("endOfFile", () => {
-                this.rewind();
-            });
-            this.player.division = 120;
-            //this.player.tempo = this.tempo
-            this.player.tick = this.restartTime;
-            this.player.skipToTick(this.restartTime);
-            this.player.play();
-            document.dispatchEvent(this.playStartEvent);
-        }
-    }
-    ///// LISTENERS ////
-    setListeners() {
-        var that = this;
-        if (this.midiTimes == undefined) {
-            return;
-        }
-        var it = this.midiTimes.values();
-        var result = it.next();
-        while (!result.done) {
-            var arr = result.value;
-            arr.forEach(note => {
-                var _a;
-                if (note == undefined)
-                    return;
-                note.addEventListener("currentNote", this.setCurrentNoteHandler);
-                var id = ((_a = note.querySelector(".notehead")) === null || _a === void 0 ? void 0 : _a.id) || note.id;
-                var interactRect = cq.getInteractOverlay(that.containerId).querySelector("#scoreRects g[refId=\"" + id + "\"]");
-                interactRect.addEventListener("click", this.startPointHandler);
-            });
-            result = it.next();
-        }
-        this.container.querySelector("#playBtn").addEventListener("click", this.playBtn);
-        this.container.querySelector("#rewindBtn").addEventListener("click", this.rewindBtn);
-    }
-    removeListeners() {
-        var that = this;
-        if (this.midiTimes == undefined) {
-            return;
-        }
-        var it = this.midiTimes.values();
-        var result = it.next();
-        while (!result.done) {
-            var arr = result.value;
-            arr.forEach(note => {
-                var _a;
-                note.removeEventListener("currentNote", this.setCurrentNoteHandler);
-                var id = ((_a = note.querySelector(".notehead")) === null || _a === void 0 ? void 0 : _a.id) || note.id;
-                var interactRect = cq.getInteractOverlay(that.containerId).querySelector("#scoreRects g[refId=\"" + id + "\"]");
-                interactRect.removeEventListener("click", this.startPointHandler);
-            });
-            result = it.next();
-        }
-    }
-    resetListeners() {
-        this.removeListeners();
-        this.setListeners();
-    }
-    /**
-     * Separate Listeners to set player options externally
-     */
-    setPlayListener() {
-        document.addEventListener("keydown", this.playHandler);
-    }
-    removePlayListener() {
-        document.removeEventListener("keydown", this.playHandler);
-    }
-    playFunction(e) {
-        if (!this.hasContainerFocus())
-            return;
-        if (e.code === "Space") {
-            e.preventDefault();
-            if (e.shiftKey || document.getElementById("followerRect") !== null) {
-                this.context.resume().then(() => this.playMidi());
-            }
-            else if (typeof this.player != undefined) {
-                this.stopInstruments();
-            }
-        }
-    }
-    /**
-     * Map all durations and notes to make them available asynchronically
-     */
-    mapDurations() {
-        var durationMap = new Map(); // key: tracknumber,byteindex
-        var mapByNote = new Map();
-        var eventTracks = this.player.getEvents();
-        eventTracks.forEach(eventArray => {
-            //@ts-ignore
-            Array.from(eventArray).forEach((event, eventIdx) => {
-                var e = event;
-                if (e.name === "Set Tempo") {
-                    this.tempo = e.data;
-                    this.pulse = ((60 / e.data) * 1000) / 120;
-                }
-                else if (e.name === "Note on") {
-                    var time = e.tick; //* this.pulse //* 1000 * 2
-                    var notes = this.getClosestEntry(time);
-                    if (notes == undefined) {
-                        return;
-                    }
-                    //iterate because notes can be in a chord
-                    notes.forEach(note => {
-                        var meiNote = this.mei.getElementById(note.id);
-                        var staffNumber = parseInt(meiNote.closest("staff").getAttribute("n")) + 1;
-                        if (!meiNote.hasAttribute("grace")) {
-                            var key = e.track.toString() + "," + e.byteIndex.toString();
-                            if (!durationMap.has(key) && e.track === staffNumber) {
-                                if (!meiNote.hasAttribute("dur")) {
-                                    meiNote = meiNote.closest("chord");
-                                }
-                                var baseDur = this.getDur(parseInt(meiNote.getAttribute("dur")), parseInt(meiNote.getAttribute("dots")) || 0, 4);
-                                //find any prolongated Notes
-                                var tie = this.mei.querySelector("tie[startid='#" + note.id + "']");
-                                if (tie !== null) {
-                                    var endid = tie.getAttribute("endid"); //endid alway includes # at beginnig
-                                    var prolongNote = this.mei.querySelector(endid);
-                                    if (prolongNote !== null) {
-                                        var pnDur = prolongNote.getAttribute("dur");
-                                        var pnDot = prolongNote.getAttribute("dots");
-                                        baseDur += this.getDur(parseInt(pnDur), parseInt(pnDot) || 0, 4);
-                                    }
-                                }
-                                //concat duration
-                                var dur = baseDur * 60 / this.tempo;
-                                var valueFound = false;
-                                var it = durationMap.values();
-                                var res = it.next();
-                                if (!valueFound) { // why do I check here?
-                                    durationMap.set(key, { note: note, duration: dur, tick: e.tick });
-                                    mapByNote.set(note, { duration: dur, tick: e.tick });
-                                }
-                                else {
-                                    //console.log(key, note, dur, e.tick)
-                                    //console.log(durationMap.get(key))
-                                }
-                            }
-                        }
-                    });
-                }
-            });
-        });
-        this.durationMap = durationMap;
-        this.durationMapByNote = mapByNote;
-        //console.log(this.durationMap, this.durationMapByNote)
-    }
-    /**
-     * Computation of time and midi times have some divergence (by floating number)
-     * Finding closest entry is sufficient, but has to be made for all entries, since the miditimes-iterator is not ordered.
-     * @param time
-     * @returns
-     */
-    getClosestEntry(time) {
-        var targetEntry;
-        var temp = Infinity;
-        for (const [key, value] of this.midiTimes.entries()) {
-            var diff = Math.abs(time - key);
-            if (diff < temp) {
-                targetEntry = value;
-                temp = diff;
-            }
-        }
-        return targetEntry;
-    }
-    getDur(dur, dots, base) {
-        var baseDur = base / dur;
-        var add = baseDur;
-        if (dots > 0) {
-            for (var i = 0; i < dots; i++) {
-                add = add / 2;
-                baseDur += add;
-            }
-        }
-        return baseDur;
-    }
-    setAudioContext() {
-        var that = this;
-        return new Promise((resolve, reject) => {
-            window.onload = function () {
-                resolve();
-            };
-        });
-    }
-    setMidi(midi) {
-        this.midi = midi;
-        return this;
-    }
-    /**
-     * Highlight playing Elements
-     * @param time Time at which Element is played (in ms)
-     * @param duration Duration of Element (in ms)
-     */
-    highlight(time, duration) {
-        var notes = this.getClosestEntry(time);
-        this.timeouts = new Array();
-        notes.forEach(n => {
-            this.addClass(n, currentlyPlayingFlag).then(() => {
-                var to = setTimeout(() => { n.classList.remove(currentlyPlayingFlag); }, duration);
-                this.timeouts.push(to);
-            });
-        });
-    }
-    /**
-     * Draw follower rectangle over all staves for last sounding element
-     */
-    drawFollowerRect() {
-        // var canvas =  document.getElementById(this.containerId).querySelector("#canvasMusicPlayer") //document.getElementById("canvasMusicPlayer")
-        // var canvasBBox = canvas.getBoundingClientRect();
-        var followerRect;
-        if (document.getElementById(followerRectID) !== null) {
-            followerRect = document.getElementById(followerRectID);
-        }
-        else {
-            followerRect = document.createElementNS(constants_1.constants._SVGNS_, "rect");
-            this.canvasMP.appendChild(followerRect);
-        }
-        var margin = 5;
-        var ptCurrentNote = coordinates.getDOMMatrixCoordinates(this.currentNote, this.canvasMP);
-        var parentMeasureRect = this.currentNote.closest(".measure").getBoundingClientRect();
-        var ptParentMeasure = coordinates.getDOMMatrixCoordinates(parentMeasureRect, this.canvasMP);
-        var upperBound = (ptParentMeasure.top - margin);
-        var lowerBound = (ptParentMeasure.bottom + margin);
-        var leftBound = (ptCurrentNote.left - margin);
-        var rightBound = (ptCurrentNote.right + margin);
-        followerRect.setAttribute("id", followerRectID);
-        followerRect.setAttribute("y", upperBound.toString());
-        followerRect.setAttribute("x", leftBound.toString());
-        followerRect.setAttribute("width", (rightBound - leftBound).toString());
-        followerRect.setAttribute("height", (lowerBound - upperBound).toString());
-    }
-    hasContainerFocus() {
-        return document.getElementById(this.containerId).classList.contains("activeContainer");
-    }
-    ///SYNTH////
-    generateTone(newNote) {
-        if (newNote.rest) {
-            return;
-        }
-        let note = newNote.pname;
-        let dur = newNote.dur + "n";
-        if (typeof newNote.keysig !== "undefined" && newNote.keysig !== "0") {
-            let signMap;
-            if (newNote.keysig.charAt(1) === "s") {
-                signMap = mappings_1.noteToCross;
-            }
-            else if (newNote.keysig.charAt(1) === "f") {
-                signMap = mappings_1.noteToB;
-            }
-            let signCount = parseInt(newNote.keysig.charAt(0));
-            let submap = new Map();
-            let i = 0;
-            for (const [key, value] of signMap.entries()) {
-                if (i < signCount) {
-                    submap.set(key, value);
-                }
-                i += 1;
-            }
-            if (submap.has(note)) {
-                note = submap.get(note);
-                note = note.charAt(0).toUpperCase() + note.charAt(1).toUpperCase() + newNote.oct;
-            }
-            else {
-                note = note.toUpperCase() + newNote.oct;
-            }
-        }
-        else {
-            note = note.toUpperCase() + newNote.oct;
-        }
-        if (!note.includes("undefined") && !dur.includes("undefined")) {
-            dur = "16n";
-            synth.triggerAttackRelease(note, dur);
-            Tone.start();
-        }
-    }
-    // UTILS
-    setMEI(mei) {
-        this.mei = mei;
-        return this;
-    }
-    setMidiTimes(midiTimes) {
-        this.midiTimes = midiTimes;
-        return this;
-    }
-    setScoreGraph(scoreGraph) {
-        this.scoreGraph = scoreGraph;
-        return this;
-    }
-    stopTimeouts() {
-        if (typeof this.timeouts !== "undefined") {
-            this.timeouts.forEach(to => {
-                clearTimeout(to);
-            });
-        }
-    }
-    setContainerId(containerId) {
-        this.containerId = containerId;
-        this.interactionOverlay = cq.getInteractOverlay(containerId);
-        this.vrvSVG = cq.getVrvSVG(containerId);
-        this.container = document.getElementById(containerId);
-        return this;
-    }
-    resetInstruments() {
-        this.instruments = undefined;
-    }
-    getRestartTime() {
-        return this.restartTime;
-    }
-    setRestartTimeBySeconds(time) {
-        return this.restartTime = time;
-    }
-    setRestartTimeByElement(el) {
-        throw Error("Not yet implemented");
-    }
-    getIsPlaying() {
-        var _a;
-        return (_a = this.player) === null || _a === void 0 ? void 0 : _a.isPlaying();
-    }
-    update() {
-        this.resetInstruments();
-        this.resetListeners();
-        this.initPlayer();
-        return this;
-    }
-    //// Experimantal
-    getMidiInput() {
-        var navigator = require('web-midi-api');
-        // consider using var navigator = require('jzz');
-        var midi;
-        var inputs;
-        var outputs;
-        function onMIDIFailure(msg) {
-            console.log('Failed to get MIDI access - ' + msg);
-            process.exit(1);
-        }
-        function onMIDISuccess(midiAccess) {
-            midi = midiAccess;
-            inputs = midi.inputs;
-            outputs = midi.outputs;
-            console.log("general midi info:", midi);
-            setTimeout(testOutputs, 500);
-        }
-        function testOutputs() {
-            console.log('Testing MIDI-Out ports...');
-            outputs.forEach(function (port) {
-                console.log('id:', port.id, 'manufacturer:', port.manufacturer, 'name:', port.name, 'version:', port.version);
-                port.open();
-                port.send([0x90, 60, 0x7f]);
-            });
-            setTimeout(stopOutputs, 1000);
-        }
-        function stopOutputs() {
-            outputs.forEach(function (port) {
-                port.send([0x80, 60, 0]);
-            });
-            testInputs();
-        }
-        function onMidiIn(ev) {
-            var arr = [];
-            for (var i = 0; i < ev.data.length; i++) {
-                arr.push((ev.data[i] < 16 ? '0' : '') + ev.data[i].toString(16));
-            }
-            console.log('MIDI:', arr.join(' '));
-            console.log(ev.data);
-        }
-        function testInputs() {
-            console.log('Testing MIDI-In ports...');
-            inputs.forEach(function (port) {
-                console.log('id:', port.id, 'manufacturer:', port.manufacturer, 'name:', port.name, 'version:', port.version);
-                port.onmidimessage = onMidiIn;
-            });
-            setTimeout(stopInputs, 5000);
-        }
-        function stopInputs() {
-            console.log('Thank you!');
-            navigator.close(); // This will close MIDI inputs, otherwise Node.js will wait for MIDI input forever.
-            process.exit(0);
-        }
-        navigator.requestMIDIAccess().then(access => {
-            console.log(access);
-            access.onstatechange = (e) => { console.log("State Changed", e); };
-            onMIDISuccess(access);
-            onMIDIFailure(access);
-        });
-    }
-}
-exports.default = MusicPlayer;