@coderline/alphatab 1.3.0-alpha.135 → 1.3.0-alpha.139

package/dist/alphaTab.js

@@ -1,5 +1,5 @@
 /**
- * alphaTab v1.3.0-alpha.135 (develop, build 135)
+ * alphaTab v1.3.0-alpha.139 (develop, build 139)
  * 
  * Copyright © 2021, Daniel Kuschny and Contributors, All rights reserved.
  * 
@@ -6926,6 +6926,9 @@
                     break;
             }
         }
+        isNoteText(txt) {
+            return txt === 'x' || txt === '-' || txt === 'r';
+        }
         note(beat) {
             // fret.string
             let isDead = false;
@@ -7328,7 +7331,7 @@
                     let text = this._syData;
                     this._sy = this.newSy();
                     let marker = '';
-                    if (this._sy === AlphaTexSymbols.String) {
+                    if (this._sy === AlphaTexSymbols.String && !this.isNoteText(this._syData.toLowerCase())) {
                         marker = text;
                         text = this._syData;
                         this._sy = this.newSy();
@@ -17249,6 +17252,7 @@
         set masterVolume(value) {
             value = Math.max(value, SynthConstants.MinVolume);
             this._synthesizer.masterVolume = value;
+            this.onAudioSettingsUpdate();
         }
         get metronomeVolume() {
             return this._metronomeVolume;
@@ -17257,6 +17261,7 @@
             value = Math.max(value, SynthConstants.MinVolume);
             this._metronomeVolume = value;
             this._synthesizer.metronomeVolume = value;
+            this.onAudioSettingsUpdate();
         }
         get countInVolume() {
             return this._countInVolume;
@@ -17278,7 +17283,7 @@
             value = SynthHelper.clamp(value, SynthConstants.MinPlaybackSpeed, SynthConstants.MaxPlaybackSpeed);
             let oldSpeed = this._sequencer.playbackSpeed;
             this._sequencer.playbackSpeed = value;
-            this.updateTimePosition(this._timePosition * (oldSpeed / value), true);
+            this.timePosition = this.timePosition * (oldSpeed / value);
         }
         get tickPosition() {
             return this._tickPosition;
@@ -17430,16 +17435,25 @@
         }
         setChannelMute(channel, mute) {
             this._synthesizer.channelSetMute(channel, mute);
+            this.onAudioSettingsUpdate();
         }
         resetChannelStates() {
             this._synthesizer.resetChannelStates();
         }
         setChannelSolo(channel, solo) {
             this._synthesizer.channelSetSolo(channel, solo);
+            this.onAudioSettingsUpdate();
         }
         setChannelVolume(channel, volume) {
             volume = Math.max(volume, SynthConstants.MinVolume);
             this._synthesizer.channelSetMixVolume(channel, volume);
+            this.onAudioSettingsUpdate();
+        }
+        onAudioSettingsUpdate() {
+            // seeking to the currently known position, will ensure we
+            // clear all audio buffers and re-generate the audio 
+            // which was not actually played yet. 
+            this.timePosition = this.timePosition;
         }
         onSamplesPlayed(sampleCount) {
             let playedMillis = (sampleCount / this._synthesizer.outSampleRate) * 1000;
@@ -20848,6 +20862,18 @@
      */
     class RenderFinishedEventArgs {
         constructor() {
+            /**
+             * Gets or sets the unique id of this event args.
+             */
+            this.id = ModelUtils.newGuid();
+            /**
+             * Gets or sets the x position of the current rendering result.
+             */
+            this.x = 0;
+            /**
+             * Gets or sets the y position of the current rendering result.
+             */
+            this.y = 0;
             /**
              * Gets or sets the width of the current rendering result.
              */
@@ -21386,6 +21412,7 @@
             this.preRender = new EventEmitterOfT();
             this.renderFinished = new EventEmitterOfT();
             this.partialRenderFinished = new EventEmitterOfT();
+            this.partialLayoutFinished = new EventEmitterOfT();
             this.postRenderFinished = new EventEmitter();
             this.error = new EventEmitterOfT();
             this.settings = settings;
@@ -21457,6 +21484,21 @@
         updateSettings(settings) {
             this.settings = settings;
         }
+        renderResult(resultId) {
+            try {
+                const layout = this.layout;
+                if (layout) {
+                    Logger.debug('Rendering', 'Request render of lazy partial ' + resultId);
+                    layout.renderLazyPartial(resultId);
+                }
+                else {
+                    Logger.warning('Rendering', 'Request render of lazy partial ' + resultId + ' ignored, no layout exists');
+                }
+            }
+            catch (e) {
+                this.error.trigger(e);
+            }
+        }
         render() {
             if (this.width === 0) {
                 Logger.warning('Rendering', 'AlphaTab skipped rendering because of width=0 (element invisible)', null);
@@ -21490,7 +21532,6 @@
                 this.preRender.trigger(true);
                 this.canvas.settings = this.settings;
                 this.layout.resize();
-                this.layout.renderAnnotation();
                 this.onRenderFinished();
                 this.postRenderFinished.trigger();
             }
@@ -21502,7 +21543,6 @@
         layoutAndRender() {
             Logger.debug('Rendering', 'Rendering at scale ' + this.settings.display.scale + ' with layout ' + this.layout.name, null);
             this.layout.layoutAndRender();
-            this.layout.renderAnnotation();
             this._renderedTracks = this.tracks;
             this.onRenderFinished();
             this.postRenderFinished.trigger();
@@ -21541,6 +21581,12 @@
                             result: result
                         });
                     });
+                    this._renderer.partialLayoutFinished.on(result => {
+                        this._main.postMessage({
+                            cmd: 'alphaTab.partialLayoutFinished',
+                            result: result
+                        });
+                    });
                     this._renderer.renderFinished.on(result => {
                         this._main.postMessage({
                             cmd: 'alphaTab.renderFinished',
@@ -21568,6 +21614,9 @@
                 case 'alphaTab.resizeRender':
                     this._renderer.resizeRender();
                     break;
+                case 'alphaTab.renderResult':
+                    this._renderer.renderResult(data.resultId);
+                    break;
                 case 'alphaTab.setWidth':
                     this._renderer.width = data.width;
                     break;
@@ -23937,7 +23986,8 @@
             this.renderer.preRender.on(_ => {
                 this._startTime = Date.now();
             });
-            this.renderer.partialRenderFinished.on(this.appendRenderResult.bind(this));
+            this.renderer.partialLayoutFinished.on(this.appendRenderResult.bind(this));
+            this.renderer.partialRenderFinished.on(this.updateRenderResult.bind(this));
             this.renderer.renderFinished.on(r => {
                 this.appendRenderResult(r);
                 this.appendRenderResult(null); // marks last element
@@ -24099,8 +24149,11 @@
                     this._cursorWrapper.height = result.totalHeight;
                 }
             }
-            if (!result || result.renderResult) {
-                this.uiFacade.beginAppendRenderResults(result);
+            this.uiFacade.beginAppendRenderResults(result);
+        }
+        updateRenderResult(result) {
+            if (result && result.renderResult) {
+                this.uiFacade.beginUpdateRenderResults(result);
             }
         }
         /**
@@ -25956,6 +26009,7 @@
             this.boundsLookup = null;
             this.preRender = new EventEmitterOfT();
             this.partialRenderFinished = new EventEmitterOfT();
+            this.partialLayoutFinished = new EventEmitterOfT();
             this.renderFinished = new EventEmitterOfT();
             this.postRenderFinished = new EventEmitter();
             this.error = new EventEmitterOfT();
@@ -26008,6 +26062,12 @@
                 cmd: 'alphaTab.resizeRender'
             });
         }
+        renderResult(resultId) {
+            this._worker.postMessage({
+                cmd: 'alphaTab.renderResult',
+                resultId: resultId
+            });
+        }
         get width() {
             return this._width;
         }
@@ -26028,6 +26088,9 @@
                 case 'alphaTab.partialRenderFinished':
                     this.partialRenderFinished.trigger(data.result);
                     break;
+                case 'alphaTab.partialLayoutFinished':
+                    this.partialLayoutFinished.trigger(data.result);
+                    break;
                 case 'alphaTab.renderFinished':
                     this.renderFinished.trigger(data.result);
                     break;
@@ -26241,6 +26304,16 @@
         }
     }
 
+    /**
+     * @target web
+     */
+    var ResultState;
+    (function (ResultState) {
+        ResultState[ResultState["LayoutDone"] = 0] = "LayoutDone";
+        ResultState[ResultState["RenderRequested"] = 1] = "RenderRequested";
+        ResultState[ResultState["RenderDone"] = 2] = "RenderDone";
+        ResultState[ResultState["Detached"] = 3] = "Detached";
+    })(ResultState || (ResultState = {}));
     /**
      * @target web
      */
@@ -26252,12 +26325,12 @@
             this._totalResultCount = 0;
             this._initialTrackIndexes = null;
             this._barToElementLookup = new Map();
+            this._resultIdToElementLookup = new Map();
             this.rootContainerBecameVisible = new EventEmitter();
             this.canRenderChanged = new EventEmitter();
             this._highlightedElements = [];
             this._scrollContainer = null;
-            if (Environment.webPlatform !== WebPlatform.Browser &&
-                Environment.webPlatform !== WebPlatform.BrowserModule) {
+            if (Environment.webPlatform !== WebPlatform.Browser && Environment.webPlatform !== WebPlatform.BrowserModule) {
                 throw new AlphaTabError(exports.AlphaTabErrorType.General, 'Usage of AlphaTabApi is only possible in browser environments. For usage in node use the Low Level APIs');
             }
             rootElement.classList.add('alphaTab');
@@ -26300,15 +26373,34 @@
         }
         onElementVisibilityChanged(entries) {
             for (const e of entries) {
-                if (e.isIntersecting) {
-                    const htmlElement = e.target;
-                    if (htmlElement === this.rootContainer.element) {
+                const htmlElement = e.target;
+                if (htmlElement === this.rootContainer.element) {
+                    if (e.isIntersecting) {
                         this.rootContainerBecameVisible.trigger();
                         this._intersectionObserver.unobserve(this.rootContainer.element);
                     }
-                    else if ('svg' in htmlElement.dataset) {
-                        this.replacePlaceholder(htmlElement, htmlElement.dataset['svg']);
-                        this._intersectionObserver.unobserve(htmlElement);
+                }
+                else if ('layoutResultId' in htmlElement && this._api.settings.core.enableLazyLoading) {
+                    const placeholder = htmlElement;
+                    if (e.isIntersecting) {
+                        // missing result or result not matching layout -> request render
+                        if (placeholder.renderedResultId !== placeholder.layoutResultId) {
+                            if (this._resultIdToElementLookup.has(placeholder.layoutResultId)) {
+                                this._api.renderer.renderResult(placeholder.layoutResultId);
+                            }
+                            else {
+                                htmlElement.replaceChildren();
+                            }
+                        }
+                        // detached and became visible
+                        else if (placeholder.resultState === ResultState.Detached) {
+                            htmlElement.replaceChildren(...placeholder.renderedResult);
+                            placeholder.resultState = ResultState.RenderDone;
+                        }
+                    }
+                    else if (placeholder.resultState === ResultState.RenderDone) {
+                        placeholder.resultState = ResultState.Detached;
+                        placeholder.replaceChildren();
                     }
                 }
             }
@@ -26437,6 +26529,7 @@
         initialRender() {
             this._api.renderer.preRender.on((_) => {
                 this._totalResultCount = 0;
+                this._resultIdToElementLookup.clear();
                 this._barToElementLookup.clear();
             });
             const initialRender = () => {
@@ -26559,57 +26652,68 @@
             }
             return dataAttributes;
         }
+        beginUpdateRenderResults(renderResult) {
+            if (!this._resultIdToElementLookup.has(renderResult.id)) {
+                return;
+            }
+            const placeholder = this._resultIdToElementLookup.get(renderResult.id);
+            const body = renderResult.renderResult;
+            if (typeof body === 'string') {
+                placeholder.innerHTML = body;
+            }
+            else if ('nodeType' in body) {
+                placeholder.replaceChildren(body);
+            }
+            placeholder.resultState = ResultState.RenderDone;
+            placeholder.renderedResultId = renderResult.id;
+            placeholder.renderedResult = Array.from(placeholder.children);
+        }
         beginAppendRenderResults(renderResult) {
-            let canvasElement = this._api.canvasElement.element;
+            const canvasElement = this._api.canvasElement.element;
             // null result indicates that the rendering finished
             if (!renderResult) {
                 // so we remove elements that might be from a previous render session
                 while (canvasElement.childElementCount > this._totalResultCount) {
+                    if (this._api.settings.core.enableLazyLoading) {
+                        this._intersectionObserver.unobserve(canvasElement.lastChild);
+                    }
                     canvasElement.removeChild(canvasElement.lastChild);
                 }
             }
             else {
-                let body = renderResult.renderResult;
-                if (typeof body === 'string') {
-                    let placeholder;
-                    if (this._totalResultCount < canvasElement.childElementCount) {
-                        placeholder = canvasElement.childNodes.item(this._totalResultCount);
-                    }
-                    else {
-                        placeholder = document.createElement('div');
-                        canvasElement.appendChild(placeholder);
-                    }
-                    placeholder.style.width = renderResult.width + 'px';
-                    placeholder.style.height = renderResult.height + 'px';
-                    placeholder.style.display = 'inline-block';
-                    if (!this._api.settings.core.enableLazyLoading) {
-                        this.replacePlaceholder(placeholder, body);
-                    }
-                    else {
-                        placeholder.dataset['svg'] = body;
-                        this._intersectionObserver.observe(placeholder);
-                    }
-                    // remember which bar is contained in which node for faster lookup
-                    // on highlight/unhighlight
-                    for (let i = renderResult.firstMasterBarIndex; i <= renderResult.lastMasterBarIndex; i++) {
-                        this._barToElementLookup.set(i, placeholder);
-                    }
+                let placeholder;
+                if (this._totalResultCount < canvasElement.childElementCount) {
+                    placeholder = canvasElement.childNodes.item(this._totalResultCount);
                 }
                 else {
-                    if (this._totalResultCount < canvasElement.childElementCount) {
-                        canvasElement.replaceChild(renderResult.renderResult, canvasElement.childNodes.item(this._totalResultCount));
-                    }
-                    else {
-                        canvasElement.appendChild(renderResult.renderResult);
-                    }
+                    placeholder = document.createElement('div');
+                    canvasElement.appendChild(placeholder);
+                }
+                placeholder.style.zIndex = '1';
+                placeholder.style.position = 'absolute';
+                placeholder.style.left = renderResult.x + 'px';
+                placeholder.style.top = renderResult.y + 'px';
+                placeholder.style.width = renderResult.width + 'px';
+                placeholder.style.height = renderResult.height + 'px';
+                placeholder.style.display = 'inline-block';
+                placeholder.layoutResultId = renderResult.id;
+                placeholder.resultState = ResultState.LayoutDone;
+                delete placeholder.renderedResultId;
+                delete placeholder.renderedResult;
+                this._resultIdToElementLookup.set(renderResult.id, placeholder);
+                // remember which bar is contained in which node for faster lookup
+                // on highlight/unhighlight
+                for (let i = renderResult.firstMasterBarIndex; i <= renderResult.lastMasterBarIndex; i++) {
+                    this._barToElementLookup.set(i, placeholder);
+                }
+                if (this._api.settings.core.enableLazyLoading) {
+                    // re-observe to fire event
+                    this._intersectionObserver.unobserve(placeholder);
+                    this._intersectionObserver.observe(placeholder);
                 }
                 this._totalResultCount++;
             }
         }
-        replacePlaceholder(placeholder, body) {
-            placeholder.innerHTML = body;
-            delete placeholder.dataset['svg'];
-        }
         /**
          * This method creates the player. It detects browser compatibility and
          * initializes a alphaSynth version for the client.
@@ -32073,6 +32177,12 @@
         }
     }
 
+    class LazyPartial {
+        constructor(args, renderCallback) {
+            this.args = args;
+            this.renderCallback = renderCallback;
+        }
+    }
     /**
      * This is the base public class for creating new layouting engines for the score renderer.
      */
@@ -32084,11 +32194,17 @@
             this.scoreInfoGlyphs = new Map();
             this.chordDiagrams = null;
             this.tuningGlyph = null;
+            this._lazyPartials = new Map();
             this.firstBarIndex = 0;
             this.lastBarIndex = 0;
             this.renderer = renderer;
         }
+        resize() {
+            this._lazyPartials.clear();
+            this.doResize();
+        }
         layoutAndRender() {
+            this._lazyPartials.clear();
             let score = this.renderer.score;
             let startIndex = this.renderer.settings.display.startBar;
             startIndex--; // map to array index
@@ -32104,6 +32220,28 @@
             this.createScoreInfoGlyphs();
             this.doLayoutAndRender();
         }
+        registerPartial(args, callback) {
+            this.renderer.partialLayoutFinished.trigger(args);
+            if (!this.renderer.settings.core.enableLazyLoading) {
+                this.internalRenderLazyPartial(args, callback);
+            }
+            else {
+                this._lazyPartials.set(args.id, new LazyPartial(args, callback));
+            }
+        }
+        internalRenderLazyPartial(args, callback) {
+            const canvas = this.renderer.canvas;
+            canvas.beginRender(args.width, args.height);
+            callback(canvas);
+            args.renderResult = canvas.endRender();
+            this.renderer.partialRenderFinished.trigger(args);
+        }
+        renderLazyPartial(resultId) {
+            if (this._lazyPartials.has(resultId)) {
+                const lazyPartial = this._lazyPartials.get(resultId);
+                this.internalRenderLazyPartial(lazyPartial.args, lazyPartial.renderCallback);
+            }
+        }
         createScoreInfoGlyphs() {
             Logger.debug('ScoreLayout', 'Creating score info glyphs');
             let notation = this.renderer.settings.notation;
@@ -32240,30 +32378,33 @@
             }
             return null;
         }
-        renderAnnotation() {
+        layoutAndRenderAnnotation(y) {
             // attention, you are not allowed to remove change this notice within any version of this library without permission!
             let msg = 'rendered by alphaTab';
-            let canvas = this.renderer.canvas;
             let resources = this.renderer.settings.display.resources;
             let size = 12 * this.renderer.settings.display.scale;
-            let height = size * 2;
-            this.height += height;
-            let x = this.width / 2;
-            canvas.beginRender(this.width, height);
-            canvas.color = resources.mainGlyphColor;
-            canvas.font = new Font(resources.copyrightFont.family, size, FontStyle.Plain, FontWeight.Bold);
-            canvas.textAlign = TextAlign.Center;
-            canvas.fillText(msg, x, size);
-            let result = canvas.endRender();
-            let e = new RenderFinishedEventArgs();
-            e.width = this.width;
+            let height = Math.floor(size * 2);
+            const e = new RenderFinishedEventArgs();
+            const font = new Font(resources.copyrightFont.family, size, FontStyle.Plain, FontWeight.Bold);
+            this.renderer.canvas.font = font;
+            const centered = Environment.getLayoutEngineFactory(this.renderer.settings.display.layoutMode).vertical;
+            e.width = this.renderer.canvas.measureText(msg);
             e.height = height;
-            e.renderResult = result;
+            e.x = centered
+                ? (this.width - e.width) / 2
+                : this.firstBarX;
+            e.y = y;
             e.totalWidth = this.width;
             e.totalHeight = this.height;
             e.firstMasterBarIndex = -1;
             e.lastMasterBarIndex = -1;
-            this.renderer.partialRenderFinished.trigger(e);
+            this.registerPartial(e, canvas => {
+                canvas.color = resources.mainGlyphColor;
+                canvas.font = font;
+                canvas.textAlign = TextAlign.Left;
+                canvas.fillText(msg, 0, size);
+            });
+            return y + height;
         }
     }
 
@@ -32288,7 +32429,19 @@
         get supportsResize() {
             return false;
         }
-        resize() { }
+        get padding() {
+            return this._pagePadding;
+        }
+        get firstBarX() {
+            let x = this._pagePadding[0];
+            if (this._group) {
+                x += this._group.accoladeSpacing;
+            }
+            return x;
+        }
+        doResize() {
+            // not supported
+        }
         doLayoutAndRender() {
             this._pagePadding = this.renderer.settings.display.padding;
             if (!this._pagePadding) {
@@ -32311,7 +32464,6 @@
                 ];
             }
             let score = this.renderer.score;
-            let canvas = this.renderer.canvas;
             let startIndex = this.renderer.settings.display.startBar;
             startIndex--; // map to array index
             startIndex = Math.min(score.masterBars.length - 1, Math.max(0, startIndex));
@@ -32370,35 +32522,39 @@
                     currentPartial.masterBars[currentPartial.masterBars.length - 1].index, null);
             }
             this._group.finalizeGroup();
-            this.height = this._group.y + this._group.height + this._pagePadding[3];
+            this.height = Math.floor(this._group.y + this._group.height);
             this.width = this._group.x + this._group.width + this._pagePadding[2];
             currentBarIndex = 0;
+            let x = 0;
             for (let i = 0; i < partials.length; i++) {
                 let partial = partials[i];
-                canvas.beginRender(partial.width, this.height);
-                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) {
-                    renderX -= this._group.x + this._group.accoladeSpacing;
-                }
-                Logger.debug(this.name, 'Rendering partial from bar ' +
-                    partial.masterBars[0].index +
-                    ' to ' +
-                    partial.masterBars[partial.masterBars.length - 1].index, null);
-                this._group.paintPartial(-renderX, this._group.y, this.renderer.canvas, currentBarIndex, partial.masterBars.length);
-                let result = canvas.endRender();
-                let e = new RenderFinishedEventArgs();
+                const e = new RenderFinishedEventArgs();
+                e.x = x;
+                e.y = 0;
                 e.totalWidth = this.width;
                 e.totalHeight = this.height;
                 e.width = partial.width;
                 e.height = this.height;
-                e.renderResult = result;
                 e.firstMasterBarIndex = partial.masterBars[0].index;
                 e.lastMasterBarIndex = partial.masterBars[partial.masterBars.length - 1].index;
-                this.renderer.partialRenderFinished.trigger(e);
+                x += partial.width;
+                const partialBarIndex = currentBarIndex;
+                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) {
+                        renderX -= this._group.x + this._group.accoladeSpacing;
+                    }
+                    Logger.debug(this.name, 'Rendering partial from bar ' +
+                        partial.masterBars[0].index +
+                        ' to ' +
+                        partial.masterBars[partial.masterBars.length - 1].index, null);
+                    this._group.paintPartial(-renderX, this._group.y, canvas, partialBarIndex, partial.masterBars.length);
+                });
                 currentBarIndex += partial.masterBars.length;
             }
+            this.height = this.layoutAndRenderAnnotation(this.height) + this._pagePadding[3];
         }
     }
     HorizontalScreenLayout.PagePadding = [20, 20, 20, 20];
@@ -32439,13 +32595,12 @@
                     this._pagePadding[1]
                 ];
             }
-            let x = this._pagePadding[0];
-            let y = this._pagePadding[1];
+            let y = 0;
             this.width = this.renderer.width;
             this._allMasterBarRenderers = [];
             //
             // 1. Score Info
-            y = this.layoutAndRenderScoreInfo(x, y, -1);
+            y = this.layoutAndRenderScoreInfo(y, -1);
             //
             // 2. Tunings
             y = this.layoutAndRenderTunings(y, -1);
@@ -32454,20 +32609,30 @@
             y = this.layoutAndRenderChordDiagrams(y, -1);
             //
             // 4. One result per StaveGroup
-            y = this.layoutAndRenderScore(x, y);
+            y = this.layoutAndRenderScore(y);
+            y = this.layoutAndRenderAnnotation(y);
             this.height = y + this._pagePadding[3];
         }
         get supportsResize() {
             return true;
         }
-        resize() {
+        get padding() {
+            return this._pagePadding;
+        }
+        get firstBarX() {
             let x = this._pagePadding[0];
-            let y = this._pagePadding[1];
+            if (this._groups.length > 0) {
+                x += this._groups[0].accoladeSpacing;
+            }
+            return x;
+        }
+        doResize() {
+            let y = 0;
             this.width = this.renderer.width;
             let oldHeight = this.height;
             //
             // 1. Score Info
-            y = this.layoutAndRenderScoreInfo(x, y, oldHeight);
+            y = this.layoutAndRenderScoreInfo(y, oldHeight);
             //
             // 2. Tunings
             y = this.layoutAndRenderTunings(y, oldHeight);
@@ -32476,7 +32641,8 @@
             y = this.layoutAndRenderChordDiagrams(y, oldHeight);
             //
             // 4. One result per StaveGroup
-            y = this.resizeAndRenderScore(x, y, oldHeight);
+            y = this.resizeAndRenderScore(y, oldHeight);
+            y = this.layoutAndRenderAnnotation(y);
             this.height = y + this._pagePadding[3];
         }
         layoutAndRenderTunings(y, totalHeight = -1) {
@@ -32484,54 +32650,56 @@
                 return y;
             }
             let res = this.renderer.settings.display.resources;
+            this.tuningGlyph.x = this._pagePadding[0];
             this.tuningGlyph.width = this.width;
             this.tuningGlyph.doLayout();
             let tuningHeight = this.tuningGlyph.height + 11 * this.scale;
-            y += tuningHeight;
-            let canvas = this.renderer.canvas;
-            canvas.beginRender(this.width, tuningHeight);
-            canvas.color = res.scoreInfoColor;
-            canvas.textAlign = TextAlign.Center;
-            this.tuningGlyph.paint(this._pagePadding[0], 0, canvas);
-            let result = canvas.endRender();
-            let e = new RenderFinishedEventArgs();
+            const e = new RenderFinishedEventArgs();
+            e.x = 0;
+            e.y = y;
             e.width = this.width;
             e.height = tuningHeight;
-            e.renderResult = result;
             e.totalWidth = this.width;
-            e.totalHeight = totalHeight < 0 ? y : totalHeight;
+            e.totalHeight = totalHeight < 0 ? y + e.height : totalHeight;
             e.firstMasterBarIndex = -1;
             e.lastMasterBarIndex = -1;
-            this.renderer.partialRenderFinished.trigger(e);
-            return y;
+            this.registerPartial(e, (canvas) => {
+                canvas.color = res.scoreInfoColor;
+                canvas.textAlign = TextAlign.Center;
+                this.tuningGlyph.paint(0, 0, canvas);
+            });
+            return y + tuningHeight;
         }
         layoutAndRenderChordDiagrams(y, totalHeight = -1) {
             if (!this.chordDiagrams) {
                 return y;
             }
-            let res = this.renderer.settings.display.resources;
+            const res = this.renderer.settings.display.resources;
             this.chordDiagrams.width = this.width;
             this.chordDiagrams.doLayout();
-            let canvas = this.renderer.canvas;
-            canvas.beginRender(this.width, this.chordDiagrams.height);
-            canvas.color = res.scoreInfoColor;
-            canvas.textAlign = TextAlign.Center;
-            this.chordDiagrams.paint(0, 0, canvas);
-            let result = canvas.endRender();
-            y += this.chordDiagrams.height;
-            let e = new RenderFinishedEventArgs();
+            const diagramHeight = Math.floor(this.chordDiagrams.height);
+            const e = new RenderFinishedEventArgs();
+            e.x = 0;
+            e.y = y;
             e.width = this.width;
-            e.height = this.chordDiagrams.height;
-            e.renderResult = result;
+            e.height = diagramHeight;
             e.totalWidth = this.width;
-            e.totalHeight = totalHeight < 0 ? y : totalHeight;
+            e.totalHeight = totalHeight < 0 ? y + diagramHeight : totalHeight;
             e.firstMasterBarIndex = -1;
             e.lastMasterBarIndex = -1;
-            this.renderer.partialRenderFinished.trigger(e);
-            return y;
+            this.registerPartial(e, (canvas) => {
+                canvas.color = res.scoreInfoColor;
+                canvas.textAlign = TextAlign.Center;
+                this.chordDiagrams.paint(0, 0, canvas);
+            });
+            return y + diagramHeight;
         }
-        layoutAndRenderScoreInfo(x, y, totalHeight = -1) {
+        layoutAndRenderScoreInfo(y, totalHeight = -1) {
             Logger.debug(this.name, 'Layouting score info');
+            const e = new RenderFinishedEventArgs();
+            e.x = 0;
+            e.y = y;
+            let infoHeight = this._pagePadding[1];
             let scale = this.scale;
             let res = this.renderer.settings.display.resources;
             let centeredGlyphs = [
@@ -32545,9 +32713,9 @@
                 if (this.scoreInfoGlyphs.has(centeredGlyphs[i])) {
                     let glyph = this.scoreInfoGlyphs.get(centeredGlyphs[i]);
                     glyph.x = this.width / 2;
-                    glyph.y = y;
+                    glyph.y = infoHeight;
                     glyph.textAlign = TextAlign.Center;
-                    y += glyph.font.size * scale;
+                    infoHeight += glyph.font.size * scale;
                 }
             }
             let musicOrWords = false;
@@ -32555,51 +32723,46 @@
             if (this.scoreInfoGlyphs.has(NotationElement.ScoreMusic)) {
                 let glyph = this.scoreInfoGlyphs.get(NotationElement.ScoreMusic);
                 glyph.x = this.width - this._pagePadding[2];
-                glyph.y = y;
+                glyph.y = infoHeight;
                 glyph.textAlign = TextAlign.Right;
                 musicOrWords = true;
                 musicOrWordsHeight = glyph.font.size * scale;
             }
             if (this.scoreInfoGlyphs.has(NotationElement.ScoreWords)) {
                 let glyph = this.scoreInfoGlyphs.get(NotationElement.ScoreWords);
-                glyph.x = x;
-                glyph.y = y;
+                glyph.x = this._pagePadding[0];
+                glyph.y = infoHeight;
                 glyph.textAlign = TextAlign.Left;
                 musicOrWords = true;
                 musicOrWordsHeight = glyph.font.size * scale;
             }
             if (musicOrWords) {
-                y += musicOrWordsHeight;
+                infoHeight += musicOrWordsHeight;
             }
-            y += 17 * this.scale;
-            let canvas = this.renderer.canvas;
-            canvas.beginRender(this.width, y);
-            canvas.color = res.scoreInfoColor;
-            canvas.textAlign = TextAlign.Center;
-            for (const g of this.scoreInfoGlyphs.values()) {
-                g.paint(0, 0, canvas);
-            }
-            let result = canvas.endRender();
-            let e = new RenderFinishedEventArgs();
+            infoHeight = Math.floor(infoHeight + 17 * this.scale);
             e.width = this.width;
-            e.height = y;
-            e.renderResult = result;
+            e.height = infoHeight;
             e.totalWidth = this.width;
-            e.totalHeight = totalHeight < 0 ? y : totalHeight;
+            e.totalHeight = totalHeight < 0 ? y + e.height : totalHeight;
             e.firstMasterBarIndex = -1;
             e.lastMasterBarIndex = -1;
-            this.renderer.partialRenderFinished.trigger(e);
-            return y;
+            this.registerPartial(e, (canvas) => {
+                canvas.color = res.scoreInfoColor;
+                canvas.textAlign = TextAlign.Center;
+                for (const g of this.scoreInfoGlyphs.values()) {
+                    g.paint(0, 0, canvas);
+                }
+            });
+            return y + infoHeight;
         }
-        resizeAndRenderScore(x, y, oldHeight) {
-            let canvas = this.renderer.canvas;
+        resizeAndRenderScore(y, oldHeight) {
             // if we have a fixed number of bars per row, we only need to refit them.
             if (this.renderer.settings.display.barsPerRow !== -1) {
                 for (let i = 0; i < this._groups.length; i++) {
                     let group = this._groups[i];
                     this.fitGroup(group);
                     group.finalizeGroup();
-                    y += this.paintGroup(group, oldHeight, canvas);
+                    y += this.paintGroup(group, oldHeight);
                 }
             }
             else {
@@ -32608,7 +32771,7 @@
                 let maxWidth = this.maxWidth;
                 let group = this.createEmptyStaveGroup();
                 group.index = this._groups.length;
-                group.x = x;
+                group.x = this._pagePadding[0];
                 group.y = y;
                 while (currentIndex < this._allMasterBarRenderers.length) {
                     // if the current renderer still has space in the current group add it
@@ -32632,11 +32795,11 @@
                         this._groups.push(group);
                         this.fitGroup(group);
                         group.finalizeGroup();
-                        y += this.paintGroup(group, oldHeight, canvas);
+                        y += this.paintGroup(group, oldHeight);
                         // note: we do not increase currentIndex here to have it added to the next group
                         group = this.createEmptyStaveGroup();
                         group.index = this._groups.length;
-                        group.x = x;
+                        group.x = this._pagePadding[0];
                         group.y = y;
                     }
                 }
@@ -32644,12 +32807,11 @@
                 // don't forget to finish the last group
                 this.fitGroup(group);
                 group.finalizeGroup();
-                y += this.paintGroup(group, oldHeight, canvas);
+                y += this.paintGroup(group, oldHeight);
             }
             return y;
         }
-        layoutAndRenderScore(x, y) {
-            let canvas = this.renderer.canvas;
+        layoutAndRenderScore(y) {
             let startIndex = this.firstBarIndex;
             let currentBarIndex = startIndex;
             let endBarIndex = this.lastBarIndex;
@@ -32658,38 +32820,38 @@
                 // create group and align set proper coordinates
                 let group = this.createStaveGroup(currentBarIndex, endBarIndex);
                 this._groups.push(group);
-                group.x = x;
+                group.x = this._pagePadding[0];
                 group.y = y;
                 currentBarIndex = group.lastBarIndex + 1;
                 // finalize group (sizing etc).
                 this.fitGroup(group);
                 group.finalizeGroup();
                 Logger.debug(this.name, 'Rendering partial from bar ' + group.firstBarIndex + ' to ' + group.lastBarIndex, null);
-                y += this.paintGroup(group, y, canvas);
+                y += this.paintGroup(group, y);
             }
             return y;
         }
-        paintGroup(group, totalHeight, canvas) {
+        paintGroup(group, totalHeight) {
             // paint into canvas
-            let height = group.height + 20 * this.scale;
-            canvas.beginRender(this.width, height);
-            this.renderer.canvas.color = this.renderer.settings.display.resources.mainGlyphColor;
-            this.renderer.canvas.textAlign = TextAlign.Left;
-            // NOTE: we use this negation trick to make the group paint itself to 0/0 coordinates
-            // since we use partial drawing
-            group.paint(0, -group.y, canvas);
-            // calculate coordinates for next group
-            totalHeight += height;
-            let result = canvas.endRender();
-            let args = new RenderFinishedEventArgs();
+            let height = Math.floor(group.height + 20 * this.scale);
+            const args = new RenderFinishedEventArgs();
+            args.x = 0;
+            args.y = group.y;
             args.totalWidth = this.width;
             args.totalHeight = totalHeight;
             args.width = this.width;
             args.height = height;
-            args.renderResult = result;
             args.firstMasterBarIndex = group.firstBarIndex;
             args.lastMasterBarIndex = group.lastBarIndex;
-            this.renderer.partialRenderFinished.trigger(args);
+            this.registerPartial(args, canvas => {
+                this.renderer.canvas.color = this.renderer.settings.display.resources.mainGlyphColor;
+                this.renderer.canvas.textAlign = TextAlign.Left;
+                // NOTE: we use this negation trick to make the group paint itself to 0/0 coordinates
+                // since we use partial drawing
+                group.paint(0, -args.y, canvas);
+            });
+            // calculate coordinates for next group
+            totalHeight += height;
             return height;
         }
         /**
@@ -32699,7 +32861,6 @@
             if (group.isFull || group.width > this.maxWidth) {
                 group.scaleToWidth(this.maxWidth);
             }
-            this.width = Math.max(this.width, group.width);
         }
         createStaveGroup(currentBarIndex, endIndex) {
             let group = this.createEmptyStaveGroup();
@@ -40278,8 +40439,8 @@
     // </auto-generated>
     class VersionInfo {
     }
-    VersionInfo.version = '1.3.0-alpha.135';
-    VersionInfo.date = '2021-11-28T15:06:34.564Z';
+    VersionInfo.version = '1.3.0-alpha.139';
+    VersionInfo.date = '2021-12-29T17:37:24.580Z';
 
     var index$5 = /*#__PURE__*/Object.freeze({
         __proto__: null,