@coderline/alphatab 1.3.0-alpha.140 → 1.3.0-alpha.144

package/dist/alphaTab.mjs

@@ -1,7 +1,7 @@
 /**
- * alphaTab v1.3.0-alpha.140 (develop, build 140)
+ * alphaTab v1.3.0-alpha.144 (develop, build 144)
  * 
- * Copyright © 2021, Daniel Kuschny and Contributors, All rights reserved.
+ * Copyright © 2022, Daniel Kuschny and Contributors, All rights reserved.
  * 
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -4579,7 +4579,12 @@ class Score {
         if (this.masterBars.length !== 0) {
             bar.previousMasterBar = this.masterBars[this.masterBars.length - 1];
             bar.previousMasterBar.nextMasterBar = bar;
-            bar.start = bar.previousMasterBar.start + bar.previousMasterBar.calculateDuration();
+            // TODO: this will not work on anacrusis. Correct anacrusis durations are only working
+            // when there are beats with playback positions already computed which requires full finish
+            // chicken-egg problem here. temporarily forcing anacrusis length here to 0
+            bar.start =
+                bar.previousMasterBar.start +
+                    (bar.previousMasterBar.isAnacrusis ? 0 : bar.previousMasterBar.calculateDuration());
         }
         // if the group is closed only the next upcoming header can
         // reopen the group in case of a repeat alternative, so we
@@ -14405,7 +14410,7 @@ class MidiSequencerState {
         this.firstTimeSignatureNumerator = 0;
         this.firstTimeSignatureDenominator = 0;
         this.synthData = [];
-        this.division = 0;
+        this.division = MidiUtils.QuarterTime;
         this.eventIndex = 0;
         this.currentTime = 0;
         this.playbackRange = null;
@@ -14915,13 +14920,12 @@ class Hydra {
         const samples = new Float32Array(samplesLeft);
         let samplesPos = 0;
         const sampleBuffer = new Uint8Array(2048);
-        const testBuffer = new Int16Array((sampleBuffer.length / 2) | 0);
         while (samplesLeft > 0) {
             let samplesToRead = Math.min(samplesLeft, (sampleBuffer.length / 2) | 0);
             reader.read(sampleBuffer, 0, samplesToRead * 2);
             for (let i = 0; i < samplesToRead; i++) {
-                testBuffer[i] = (sampleBuffer[i * 2 + 1] << 8) | sampleBuffer[i * 2];
-                samples[samplesPos + i] = testBuffer[i] / 32767;
+                const shortSample = TypeConversions.int32ToInt16((sampleBuffer[i * 2 + 1] << 8) | sampleBuffer[i * 2]);
+                samples[samplesPos + i] = shortSample / 32767;
             }
             samplesLeft -= samplesToRead;
             samplesPos += samplesToRead;
@@ -21507,6 +21511,9 @@ class ScoreRenderer {
         this.canvas = null;
         this.score = null;
         this.tracks = null;
+        /**
+         * @internal
+         */
         this.layout = null;
         this.boundsLookup = null;
         this.width = 0;
@@ -24033,6 +24040,7 @@ class AlphaTabApiBase {
         this._previousTick = 0;
         this._playerState = PlayerState.Paused;
         this._currentBeat = null;
+        this._currentBarBounds = null;
         this._previousStateForCursor = PlayerState.Paused;
         this._previousCursorCache = null;
         this._lastScroll = 0;
@@ -24635,7 +24643,7 @@ class AlphaTabApiBase {
         this._playerState = PlayerState.Paused;
         // we need to update our position caches if we render a tablature
         this.renderer.postRenderFinished.on(() => {
-            this.cursorUpdateTick(this._previousTick, false);
+            this.cursorUpdateTick(this._previousTick, false, this._previousTick > 10);
         });
         if (this.player) {
             this.player.positionChanged.on(e => {
@@ -24662,15 +24670,16 @@ class AlphaTabApiBase {
      * updates the cursors to highlight the beat at the specified tick position
      * @param tick
      * @param stop
+     * @param shouldScroll whether we should scroll to the bar (if scrolling is active)
      */
-    cursorUpdateTick(tick, stop) {
+    cursorUpdateTick(tick, stop, shouldScroll = false) {
         let cache = this._tickCache;
         if (cache) {
             let tracks = this.tracks;
             if (tracks.length > 0) {
                 let beat = cache.findBeat(tracks, tick, this._currentBeat);
                 if (beat) {
-                    this.cursorUpdateBeat(beat, stop);
+                    this.cursorUpdateBeat(beat, stop, shouldScroll);
                 }
             }
         }
@@ -24678,7 +24687,7 @@ class AlphaTabApiBase {
     /**
      * updates the cursors to highlight the specified beat
      */
-    cursorUpdateBeat(lookupResult, stop) {
+    cursorUpdateBeat(lookupResult, stop, shouldScroll) {
         const beat = lookupResult.currentBeat;
         const nextBeat = lookupResult.nextBeat;
         const duration = lookupResult.duration;
@@ -24693,9 +24702,6 @@ class AlphaTabApiBase {
         let previousBeat = this._currentBeat;
         let previousCache = this._previousCursorCache;
         let previousState = this._previousStateForCursor;
-        this._currentBeat = lookupResult;
-        this._previousCursorCache = cache;
-        this._previousStateForCursor = this._playerState;
         if (beat === (previousBeat === null || previousBeat === void 0 ? void 0 : previousBeat.currentBeat) && cache === previousCache && previousState === this._playerState) {
             return;
         }
@@ -24703,15 +24709,81 @@ class AlphaTabApiBase {
         if (!beatBoundings) {
             return;
         }
+        // only if we really found some bounds we remember the beat and cache we used to
+        // actually show the cursor
+        this._currentBeat = lookupResult;
+        this._previousCursorCache = cache;
+        this._previousStateForCursor = this._playerState;
         this.uiFacade.beginInvoke(() => {
-            this.internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings);
+            this.internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings, shouldScroll);
         });
     }
-    internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings) {
+    /**
+     * Initiates a scroll to the cursor
+     */
+    scrollToCursor() {
+        const barBounds = this._currentBarBounds;
+        if (barBounds) {
+            this.internalScrollToCursor(barBounds);
+        }
+    }
+    internalScrollToCursor(barBoundings) {
+        let scrollElement = this.uiFacade.getScrollContainer();
+        let isVertical = Environment.getLayoutEngineFactory(this.settings.display.layoutMode).vertical;
+        let mode = this.settings.player.scrollMode;
+        if (isVertical) {
+            // when scrolling on the y-axis, we preliminary check if the new beat/bar have
+            // moved on the y-axis
+            let y = barBoundings.realBounds.y + this.settings.player.scrollOffsetY;
+            if (y !== this._lastScroll) {
+                this._lastScroll = y;
+                switch (mode) {
+                    case ScrollMode.Continuous:
+                        let elementOffset = this.uiFacade.getOffset(scrollElement, this.container);
+                        this.uiFacade.scrollToY(scrollElement, elementOffset.y + y, this.settings.player.scrollSpeed);
+                        break;
+                    case ScrollMode.OffScreen:
+                        let elementBottom = scrollElement.scrollTop + this.uiFacade.getOffset(null, scrollElement).h;
+                        if (barBoundings.visualBounds.y + barBoundings.visualBounds.h >= elementBottom ||
+                            barBoundings.visualBounds.y < scrollElement.scrollTop) {
+                            let scrollTop = barBoundings.realBounds.y + this.settings.player.scrollOffsetY;
+                            this.uiFacade.scrollToY(scrollElement, scrollTop, this.settings.player.scrollSpeed);
+                        }
+                        break;
+                }
+            }
+        }
+        else {
+            // when scrolling on the x-axis, we preliminary check if the new bar has
+            // moved on the x-axis
+            let x = barBoundings.visualBounds.x;
+            if (x !== this._lastScroll) {
+                this._lastScroll = x;
+                switch (mode) {
+                    case ScrollMode.Continuous:
+                        let scrollLeftContinuous = barBoundings.realBounds.x + this.settings.player.scrollOffsetX;
+                        this._lastScroll = barBoundings.visualBounds.x;
+                        this.uiFacade.scrollToX(scrollElement, scrollLeftContinuous, this.settings.player.scrollSpeed);
+                        break;
+                    case ScrollMode.OffScreen:
+                        let elementRight = scrollElement.scrollLeft + this.uiFacade.getOffset(null, scrollElement).w;
+                        if (barBoundings.visualBounds.x + barBoundings.visualBounds.w >= elementRight ||
+                            barBoundings.visualBounds.x < scrollElement.scrollLeft) {
+                            let scrollLeftOffScreen = barBoundings.realBounds.x + this.settings.player.scrollOffsetX;
+                            this._lastScroll = barBoundings.visualBounds.x;
+                            this.uiFacade.scrollToX(scrollElement, scrollLeftOffScreen, this.settings.player.scrollSpeed);
+                        }
+                        break;
+                }
+            }
+        }
+    }
+    internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings, shouldScroll) {
         let barCursor = this._barCursor;
         let beatCursor = this._beatCursor;
         let barBoundings = beatBoundings.barBounds.masterBarBounds;
         let barBounds = barBoundings.visualBounds;
+        this._currentBarBounds = barBoundings;
         barCursor.setBounds(barBounds.x, barBounds.y, barBounds.w, barBounds.h);
         // move beat to start position immediately
         if (this.settings.player.enableAnimatedBeatCursor) {
@@ -24722,90 +24794,45 @@ class AlphaTabApiBase {
         if (this.settings.player.enableElementHighlighting) {
             this.uiFacade.removeHighlights();
         }
-        if (this._playerState === PlayerState.Playing || stop) {
-            duration /= this.playbackSpeed;
-            if (!stop) {
-                if (this.settings.player.enableElementHighlighting && beatsToHighlight) {
-                    for (let highlight of beatsToHighlight) {
-                        let className = BeatContainerGlyph.getGroupId(highlight);
-                        this.uiFacade.highlightElements(className, beat.voice.bar.index);
-                    }
-                }
-                if (this.settings.player.enableAnimatedBeatCursor) {
-                    let nextBeatX = barBoundings.visualBounds.x + barBoundings.visualBounds.w;
-                    // get position of next beat on same stavegroup
-                    if (nextBeat) {
-                        // if we are moving within the same bar or to the next bar
-                        // transition to the next beat, otherwise transition to the end of the bar.
-                        if ((nextBeat.voice.bar.index === beat.voice.bar.index && nextBeat.index > beat.index) ||
-                            nextBeat.voice.bar.index === beat.voice.bar.index + 1) {
-                            let nextBeatBoundings = cache.findBeat(nextBeat);
-                            if (nextBeatBoundings &&
-                                nextBeatBoundings.barBounds.masterBarBounds.staveGroupBounds ===
-                                    barBoundings.staveGroupBounds) {
-                                nextBeatX = nextBeatBoundings.visualBounds.x;
-                            }
-                        }
-                    }
-                    // we need to put the transition to an own animation frame
-                    // otherwise the stop animation above is not applied.
-                    this.uiFacade.beginInvoke(() => {
-                        beatCursor.transitionToX(duration, nextBeatX);
-                    });
-                }
-            }
-            if (!this._beatMouseDown && this.settings.player.scrollMode !== ScrollMode.Off) {
-                let scrollElement = this.uiFacade.getScrollContainer();
-                let isVertical = Environment.getLayoutEngineFactory(this.settings.display.layoutMode).vertical;
-                let mode = this.settings.player.scrollMode;
-                if (isVertical) {
-                    // when scrolling on the y-axis, we preliminary check if the new beat/bar have
-                    // moved on the y-axis
-                    let y = barBoundings.realBounds.y + this.settings.player.scrollOffsetY;
-                    if (y !== this._lastScroll) {
-                        this._lastScroll = y;
-                        switch (mode) {
-                            case ScrollMode.Continuous:
-                                let elementOffset = this.uiFacade.getOffset(scrollElement, this.container);
-                                this.uiFacade.scrollToY(scrollElement, elementOffset.y + y, this.settings.player.scrollSpeed);
-                                break;
-                            case ScrollMode.OffScreen:
-                                let elementBottom = scrollElement.scrollTop + this.uiFacade.getOffset(null, scrollElement).h;
-                                if (barBoundings.visualBounds.y + barBoundings.visualBounds.h >= elementBottom ||
-                                    barBoundings.visualBounds.y < scrollElement.scrollTop) {
-                                    let scrollTop = barBoundings.realBounds.y + this.settings.player.scrollOffsetY;
-                                    this.uiFacade.scrollToY(scrollElement, scrollTop, this.settings.player.scrollSpeed);
-                                }
-                                break;
-                        }
-                    }
-                }
-                else {
-                    // when scrolling on the x-axis, we preliminary check if the new bar has
-                    // moved on the x-axis
-                    let x = barBoundings.visualBounds.x;
-                    if (x !== this._lastScroll) {
-                        this._lastScroll = x;
-                        switch (mode) {
-                            case ScrollMode.Continuous:
-                                let scrollLeftContinuous = barBoundings.realBounds.x + this.settings.player.scrollOffsetX;
-                                this._lastScroll = barBoundings.visualBounds.x;
-                                this.uiFacade.scrollToX(scrollElement, scrollLeftContinuous, this.settings.player.scrollSpeed);
-                                break;
-                            case ScrollMode.OffScreen:
-                                let elementRight = scrollElement.scrollLeft + this.uiFacade.getOffset(null, scrollElement).w;
-                                if (barBoundings.visualBounds.x + barBoundings.visualBounds.w >= elementRight ||
-                                    barBoundings.visualBounds.x < scrollElement.scrollLeft) {
-                                    let scrollLeftOffScreen = barBoundings.realBounds.x + this.settings.player.scrollOffsetX;
-                                    this._lastScroll = barBoundings.visualBounds.x;
-                                    this.uiFacade.scrollToX(scrollElement, scrollLeftOffScreen, this.settings.player.scrollSpeed);
-                                }
-                                break;
+        // actively playing? -> animate cursor and highlight items
+        let shouldNotifyBeatChange = false;
+        if (this._playerState === PlayerState.Playing && !stop) {
+            if (this.settings.player.enableElementHighlighting && beatsToHighlight) {
+                for (let highlight of beatsToHighlight) {
+                    let className = BeatContainerGlyph.getGroupId(highlight);
+                    this.uiFacade.highlightElements(className, beat.voice.bar.index);
+                }
+            }
+            if (this.settings.player.enableAnimatedBeatCursor) {
+                let nextBeatX = barBoundings.visualBounds.x + barBoundings.visualBounds.w;
+                // get position of next beat on same stavegroup
+                if (nextBeat) {
+                    // if we are moving within the same bar or to the next bar
+                    // transition to the next beat, otherwise transition to the end of the bar.
+                    if ((nextBeat.voice.bar.index === beat.voice.bar.index && nextBeat.index > beat.index) ||
+                        nextBeat.voice.bar.index === beat.voice.bar.index + 1) {
+                        let nextBeatBoundings = cache.findBeat(nextBeat);
+                        if (nextBeatBoundings &&
+                            nextBeatBoundings.barBounds.masterBarBounds.staveGroupBounds ===
+                                barBoundings.staveGroupBounds) {
+                            nextBeatX = nextBeatBoundings.visualBounds.x;
                         }
                     }
                 }
+                // we need to put the transition to an own animation frame
+                // otherwise the stop animation above is not applied.
+                this.uiFacade.beginInvoke(() => {
+                    beatCursor.transitionToX(duration / this.playbackSpeed, nextBeatX);
+                });
             }
-            // trigger an event for others to indicate which beat/bar is played
+            shouldScroll = !stop;
+            shouldNotifyBeatChange = true;
+        }
+        if (shouldScroll && !this._beatMouseDown && this.settings.player.scrollMode !== ScrollMode.Off) {
+            this.internalScrollToCursor(barBoundings);
+        }
+        // trigger an event for others to indicate which beat/bar is played
+        if (shouldNotifyBeatChange) {
             this.onPlayedBeatChanged(beat);
         }
     }
@@ -25112,8 +25139,10 @@ class AlphaTabApiBase {
         if (this._isDestroyed) {
             return;
         }
-        this.playerPositionChanged.trigger(e);
-        this.uiFacade.triggerEvent(this.container, 'playerPositionChanged', e);
+        if (this.score !== null && this.tracks.length > 0) {
+            this.playerPositionChanged.trigger(e);
+            this.uiFacade.triggerEvent(this.container, 'playerPositionChanged', e);
+        }
     }
     onMidiEventsPlayed(e) {
         if (this._isDestroyed) {
@@ -26574,6 +26603,7 @@ class BrowserUiFacade {
         canvasElement.style.fontSize = '0';
         canvasElement.style.overflow = 'hidden';
         canvasElement.style.lineHeight = '0';
+        canvasElement.style.position = 'relative';
         return new HtmlElementContainer(canvasElement);
     }
     triggerEvent(container, name, details = null, originalEvent) {
@@ -32036,7 +32066,6 @@ class StaveGroup {
         this.paintPartial(cx + this.x, cy + this.y, canvas, 0, this.masterBarsRenderers.length);
     }
     paintPartial(cx, cy, canvas, startIndex, count) {
-        this.buildBoundingsLookup(cx, cy);
         for (let i = 0, j = this._allStaves.length; i < j; i++) {
             this._allStaves[i].paint(cx, cy, canvas, startIndex, count);
         }
@@ -32294,7 +32323,7 @@ class LazyPartial {
     }
 }
 /**
- * This is the base public class for creating new layouting engines for the score renderer.
+ * This is the base class for creating new layouting engines for the score renderer.
  */
 class ScoreLayout {
     constructor(renderer) {
@@ -32508,7 +32537,7 @@ class ScoreLayout {
             : this.firstBarX;
         e.y = y;
         e.totalWidth = this.width;
-        e.totalHeight = this.height;
+        e.totalHeight = y + height;
         e.firstMasterBarIndex = -1;
         e.lastMasterBarIndex = -1;
         this.registerPartial(e, canvas => {
@@ -32523,6 +32552,7 @@ class ScoreLayout {
 
 class HorizontalScreenLayoutPartialInfo {
     constructor() {
+        this.x = 0;
         this.width = 0;
         this.masterBars = [];
     }
@@ -32591,6 +32621,7 @@ class HorizontalScreenLayout extends ScoreLayout {
         let countPerPartial = this.renderer.settings.display.barCountPerPartial;
         let partials = [];
         let currentPartial = new HorizontalScreenLayoutPartialInfo();
+        let renderX = 0;
         while (currentBarIndex <= endBarIndex) {
             let result = this._group.addBars(this.renderer.tracks, currentBarIndex);
             if (result) {
@@ -32600,6 +32631,8 @@ class HorizontalScreenLayout extends ScoreLayout {
                     let previousPartial = partials[partials.length - 1];
                     previousPartial.masterBars.push(score.masterBars[currentBarIndex]);
                     previousPartial.width += result.width;
+                    renderX += result.width;
+                    currentPartial.x += renderX;
                 }
                 else {
                     currentPartial.masterBars.push(score.masterBars[currentBarIndex]);
@@ -32607,14 +32640,17 @@ class HorizontalScreenLayout extends ScoreLayout {
                     // no targetPartial here because previous partials already handled this code
                     if (currentPartial.masterBars.length >= countPerPartial) {
                         if (partials.length === 0) {
-                            currentPartial.width += this._group.x + this._group.accoladeSpacing;
+                            // respect accolade and on first partial
+                            currentPartial.width += this._group.accoladeSpacing + this._pagePadding[0];
                         }
+                        renderX += currentPartial.width;
                         partials.push(currentPartial);
                         Logger.debug(this.name, 'Finished partial from bar ' +
                             currentPartial.masterBars[0].index +
                             ' to ' +
                             currentPartial.masterBars[currentPartial.masterBars.length - 1].index, null);
                         currentPartial = new HorizontalScreenLayoutPartialInfo();
+                        currentPartial.x = renderX;
                     }
                 }
             }
@@ -32623,7 +32659,7 @@ class HorizontalScreenLayout extends ScoreLayout {
         // don't miss the last partial if not empty
         if (currentPartial.masterBars.length > 0) {
             if (partials.length === 0) {
-                currentPartial.width += this._group.x + this._group.accoladeSpacing;
+                currentPartial.width += this._group.accoladeSpacing + this._pagePadding[0];
             }
             partials.push(currentPartial);
             Logger.debug(this.name, 'Finished partial from bar ' +
@@ -32637,7 +32673,7 @@ class HorizontalScreenLayout extends ScoreLayout {
         currentBarIndex = 0;
         let x = 0;
         for (let i = 0; i < partials.length; i++) {
-            let partial = partials[i];
+            const partial = partials[i];
             const e = new RenderFinishedEventArgs();
             e.x = x;
             e.y = 0;
@@ -32648,14 +32684,19 @@ class HorizontalScreenLayout extends ScoreLayout {
             e.firstMasterBarIndex = partial.masterBars[0].index;
             e.lastMasterBarIndex = partial.masterBars[partial.masterBars.length - 1].index;
             x += partial.width;
+            // pull to local scope for lambda
             const partialBarIndex = currentBarIndex;
+            const partialIndex = i;
+            this._group.buildBoundingsLookup(this._group.x, this._group.y);
             this.registerPartial(e, canvas => {
                 canvas.color = this.renderer.settings.display.resources.mainGlyphColor;
                 canvas.textAlign = TextAlign.Left;
                 let renderX = this._group.getBarX(partial.masterBars[0].index) + this._group.accoladeSpacing;
-                if (i === 0) {
+                if (partialIndex === 0) {
                     renderX -= this._group.x + this._group.accoladeSpacing;
                 }
+                canvas.color = this.renderer.settings.display.resources.mainGlyphColor;
+                canvas.textAlign = TextAlign.Left;
                 Logger.debug(this.name, 'Rendering partial from bar ' +
                     partial.masterBars[0].index +
                     ' to ' +
@@ -32950,6 +32991,7 @@ class PageViewLayout extends ScoreLayout {
         args.height = height;
         args.firstMasterBarIndex = group.firstBarIndex;
         args.lastMasterBarIndex = group.lastBarIndex;
+        group.buildBoundingsLookup(0, 0);
         this.registerPartial(args, canvas => {
             this.renderer.canvas.color = this.renderer.settings.display.resources.mainGlyphColor;
             this.renderer.canvas.textAlign = TextAlign.Left;
@@ -40102,23 +40144,25 @@ class Environment {
      * @target web
      */
     static detectScriptFile() {
-        // normal browser include as <script>
-        if ('document' in Environment.globalThis && document.currentScript) {
-            return document.currentScript.src;
-        }
         // browser include as ES6 import
         // <script type="module">
         // import * as alphaTab from 'dist/alphaTab.js';
         try {
             // @ts-ignore
-            const meta = import.meta;
-            if ('url' in meta) {
-                return meta.url;
+            const importUrl = import.meta.url;
+            // avoid using file:// urls in case of 
+            // bundlers like webpack
+            if (importUrl && importUrl.indexOf('file://') === -1) {
+                return importUrl;
             }
         }
         catch (e) {
             // ignore potential errors
         }
+        // normal browser include as <script>
+        if ('document' in Environment.globalThis && document.currentScript) {
+            return document.currentScript.src;
+        }
         return null;
     }
     /**
@@ -40546,8 +40590,8 @@ class CoreSettings {
 // </auto-generated>
 class VersionInfo {
 }
-VersionInfo.version = '1.3.0-alpha.140';
-VersionInfo.date = '2021-12-29T23:06:43.677Z';
+VersionInfo.version = '1.3.0-alpha.144';
+VersionInfo.date = '2022-01-16T17:33:59.910Z';
 
 var index$5 = /*#__PURE__*/Object.freeze({
     __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@coderline/alphatab",
-    "version": "1.3.0-alpha.140",
+    "version": "1.3.0-alpha.144",
     "description": "alphaTab is a music notation and guitar tablature rendering library",
     "keywords": [
         "guitar",