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

package/dist/alphaTab.js

@@ -1,5 +1,5 @@
 /**
- * alphaTab v1.3.0-alpha.136 (develop, build 136)
+ * alphaTab v1.3.0-alpha.140 (develop, build 140)
  * 
  * Copyright © 2021, Daniel Kuschny and Contributors, All rights reserved.
  * 
@@ -138,7 +138,7 @@
     })(exports.AlphaTabErrorType || (exports.AlphaTabErrorType = {}));
     class AlphaTabError extends Error {
         constructor(type, message = "", inner) {
-            super(message);
+            super(message !== null && message !== void 0 ? message : "");
             this.type = type;
             this.inner = inner !== null && inner !== void 0 ? inner : null;
             Object.setPrototypeOf(this, AlphaTabError.prototype);
@@ -150,8 +150,8 @@
      * binary data does not contain a reader compatible structure.
      */
     class UnsupportedFormatError extends AlphaTabError {
-        constructor(message = 'Unsupported format', inner = null) {
-            super(exports.AlphaTabErrorType.Format, message);
+        constructor(message = null, inner = null) {
+            super(exports.AlphaTabErrorType.Format, message !== null && message !== void 0 ? message : 'Unsupported format');
             this.inner = inner;
             Object.setPrototypeOf(this, UnsupportedFormatError.prototype);
         }
@@ -202,6 +202,7 @@
      * Automations are used to change the behaviour of a song.
      * @cloneable
      * @json
+     * @json_strict
      */
     class Automation {
         constructor() {
@@ -330,6 +331,7 @@
     /**
      * A bar is a single block within a track, also known as Measure.
      * @json
+     * @json_strict
      */
     class Bar {
         constructor() {
@@ -391,11 +393,11 @@
             voice.index = this.voices.length;
             this.voices.push(voice);
         }
-        finish(settings) {
+        finish(settings, sharedDataBag) {
             this.isMultiVoice = false;
             for (let i = 0, j = this.voices.length; i < j; i++) {
                 let voice = this.voices[i];
-                voice.finish(settings);
+                voice.finish(settings, sharedDataBag);
                 if (i > 0 && !voice.isEmpty) {
                     this.isMultiVoice = true;
                 }
@@ -475,6 +477,7 @@
      * describe WhammyBar and String Bending effects.
      * @cloneable
      * @json
+     * @json_strict
      */
     class BendPoint {
         /**
@@ -1742,6 +1745,7 @@
     /**
      * Describes an instrument articulation which is used for percussions.
      * @json
+     * @json_strict
      */
     class InstrumentArticulation {
         constructor(elementType = "", staffLine = 0, outputMidiNumber = 0, noteHeadDefault = MusicFontSymbol.None, noteHeadHalf = MusicFontSymbol.None, noteHeadWhole = MusicFontSymbol.None, techniqueSymbol = MusicFontSymbol.None, techniqueSymbolPlacement = TextBaseline.Middle) {
@@ -1963,12 +1967,23 @@
         [34, new InstrumentArticulation("snare", 3, 38, MusicFontSymbol.NoteheadBlack, MusicFontSymbol.NoteheadBlack, MusicFontSymbol.NoteheadBlack)]
     ]);
 
+    class NoteIdBag {
+        constructor() {
+            this.tieDestinationNoteId = -1;
+            this.tieOriginNoteId = -1;
+            this.slurDestinationNoteId = -1;
+            this.slurOriginNoteId = -1;
+            this.hammerPullDestinationNoteId = -1;
+            this.hammerPullOriginNoteId = -1;
+        }
+    }
     /**
      * A note is a single played sound on a fretted instrument.
      * It consists of a fret offset and a string on which the note is played on.
      * It also can be modified by a lot of different effects.
      * @cloneable
      * @json
+     * @json_strict
      */
     class Note {
         constructor() {
@@ -2009,7 +2024,7 @@
              * @clone_add addBendPoint
              * @json_add addBendPoint
              */
-            this.bendPoints = [];
+            this.bendPoints = null;
             /**
              * Gets or sets the bend point with the highest bend value.
              * @clone_ignore
@@ -2147,25 +2162,33 @@
              */
             this.isHammerPullOrigin = false;
             /**
-             * Gets the origin note id of the hammeron/pull-off of this note.
+             * Gets the origin of the hammeron/pulloff of this note.
+             * @clone_ignore
+             * @json_ignore
              */
-            this.hammerPullOriginNoteId = -1;
+            this.hammerPullOrigin = null;
             /**
-             * Gets the destination note id of the hammeron/pull-off of this note.
+             * Gets the destination for the hammeron/pullof started by this note.
+             * @clone_ignore
+             * @json_ignore
              */
-            this.hammerPullDestinationNoteId = -1;
+            this.hammerPullDestination = null;
             /**
              * Gets or sets whether this note finishes a slur.
              */
             this.isSlurDestination = false;
             /**
-             * Gets the note id where the slur of this note starts.
+             * Gets or sets the note where the slur of this note starts.
+             * @clone_ignore
+             * @json_ignore
              */
-            this.slurOriginNoteId = -1;
+            this.slurOrigin = null;
             /**
-             * Gets or sets the note id where the slur of this note ends.
+             * Gets or sets the note where the slur of this note ends.
+             * @clone_ignore
+             * @json_ignore
              */
-            this.slurDestinationNoteId = -1;
+            this.slurDestination = null;
             /**
              * Gets or sets the harmonic type applied to this note.
              */
@@ -2231,13 +2254,17 @@
              */
             this.vibrato = VibratoType.None;
             /**
-             * Gets the origin note id of the tied if this note is tied.
+             * Gets the origin of the tied if this note is tied.
+             * @clone_ignore
+             * @json_ignore
              */
-            this.tieOriginNoteId = -1;
+            this.tieOrigin = null;
             /**
-             * Gets the desination note id of the tie.
+             * Gets the desination of the tie.
+             * @clone_ignore
+             * @json_ignore
              */
-            this.tieDestinationNoteId = -1;
+            this.tieDestination = null;
             /**
              * Gets or sets whether this note is ends a tied note.
              */
@@ -2294,9 +2321,10 @@
              * @json_ignore
              */
             this.effectSlurDestination = null;
+            this._noteIdBag = null;
         }
         get hasBend() {
-            return this.bendType !== BendType.None;
+            return this.bendPoints !== null && this.bendType !== BendType.None;
         }
         get isStringed() {
             return this.string >= 0;
@@ -2324,50 +2352,14 @@
         get isHammerPullDestination() {
             return !!this.hammerPullOrigin;
         }
-        /**
-         * Gets the origin of the hammeron/pulloff of this note.
-         */
-        get hammerPullOrigin() {
-            return this.hammerPullOriginNoteId === -1 ? null : this.beat.voice.bar.staff.track.score.getNoteById(this.hammerPullOriginNoteId);
-        }
-        /**
-         * Gets the destination for the hammeron/pullof started by this note.
-         */
-        get hammerPullDestination() {
-            return this.hammerPullDestinationNoteId === -1 ? null : this.beat.voice.bar.staff.track.score.getNoteById(this.hammerPullDestinationNoteId);
-        }
         get isSlurOrigin() {
             return !!this.slurDestination;
         }
-        /**
-         * Gets or sets the note where the slur of this note starts.
-         */
-        get slurOrigin() {
-            return this.slurOriginNoteId === -1 ? null : this.beat.voice.bar.staff.track.score.getNoteById(this.slurOriginNoteId);
-        }
-        /**
-         * Gets or sets the note where the slur of this note ends.
-         */
-        get slurDestination() {
-            return this.slurDestinationNoteId === -1 ? null : this.beat.voice.bar.staff.track.score.getNoteById(this.slurDestinationNoteId);
-        }
         get isHarmonic() {
             return this.harmonicType !== HarmonicType.None;
         }
-        /**
-         * Gets the origin of the tied if this note is tied.
-         */
-        get tieOrigin() {
-            return this.tieOriginNoteId === -1 ? null : this.beat.voice.bar.staff.track.score.getNoteById(this.tieOriginNoteId);
-        }
-        /**
-         * Gets the desination of the tie.
-         */
-        get tieDestination() {
-            return this.tieDestinationNoteId === -1 ? null : this.beat.voice.bar.staff.track.score.getNoteById(this.tieDestinationNoteId);
-        }
         get isTieOrigin() {
-            return this.tieDestinationNoteId !== -1;
+            return this.tieDestination !== null;
         }
         get trillFret() {
             return this.trillValue - this.stringTuning;
@@ -2568,7 +2560,12 @@
             return false;
         }
         addBendPoint(point) {
-            this.bendPoints.push(point);
+            let points = this.bendPoints;
+            if (points === null) {
+                points = [];
+                this.bendPoints = points;
+            }
+            points.push(point);
             if (!this.maxBendPoint || point.value > this.maxBendPoint.value) {
                 this.maxBendPoint = point;
             }
@@ -2576,12 +2573,12 @@
                 this.bendType = BendType.Custom;
             }
         }
-        finish(settings) {
+        finish(settings, sharedDataBag) {
             let nextNoteOnLine = new Lazy(() => Note.nextNoteOnSameLine(this));
             let isSongBook = settings && settings.notation.notationMode === exports.NotationMode.SongBook;
             // connect ties
             if (this.isTieDestination) {
-                this.chain();
+                this.chain(sharedDataBag);
                 // implicit let ring
                 if (isSongBook && this.tieOrigin && this.tieOrigin.isLetRing) {
                     this.isLetRing = true;
@@ -2615,8 +2612,8 @@
                     this.isHammerPullOrigin = false;
                 }
                 else {
-                    this.hammerPullDestinationNoteId = hammerPullDestination.id;
-                    hammerPullDestination.hammerPullOriginNoteId = this.id;
+                    this.hammerPullDestination = hammerPullDestination;
+                    hammerPullDestination.hammerPullOrigin = this;
                 }
             }
             // set slides
@@ -2654,14 +2651,15 @@
             }
             // try to detect what kind of bend was used and cleans unneeded points if required
             // Guitar Pro 6 and above (gpif.xml) uses exactly 4 points to define all bends
-            if (this.bendPoints.length > 0 && this.bendType === BendType.Custom) {
+            const points = this.bendPoints;
+            if (points != null && points.length > 0 && this.bendType === BendType.Custom) {
                 let isContinuedBend = this.isTieDestination && this.tieOrigin.hasBend;
                 this.isContinuedBend = isContinuedBend;
-                if (this.bendPoints.length === 4) {
-                    let origin = this.bendPoints[0];
-                    let middle1 = this.bendPoints[1];
-                    let middle2 = this.bendPoints[2];
-                    let destination = this.bendPoints[3];
+                if (points.length === 4) {
+                    let origin = points[0];
+                    let middle1 = points[1];
+                    let middle2 = points[2];
+                    let destination = points[3];
                     // the middle points are used for holds, anything else is a new feature we do not support yet
                     if (middle1.value === middle2.value) {
                         // bend higher?
@@ -2671,26 +2669,26 @@
                             }
                             else if (!isContinuedBend && origin.value > 0) {
                                 this.bendType = BendType.PrebendBend;
-                                this.bendPoints.splice(2, 1);
-                                this.bendPoints.splice(1, 1);
+                                points.splice(2, 1);
+                                points.splice(1, 1);
                             }
                             else {
                                 this.bendType = BendType.Bend;
-                                this.bendPoints.splice(2, 1);
-                                this.bendPoints.splice(1, 1);
+                                points.splice(2, 1);
+                                points.splice(1, 1);
                             }
                         }
                         else if (destination.value < origin.value) {
                             // origin must be > 0 otherwise it's no release, we cannot bend negative
                             if (isContinuedBend) {
                                 this.bendType = BendType.Release;
-                                this.bendPoints.splice(2, 1);
-                                this.bendPoints.splice(1, 1);
+                                points.splice(2, 1);
+                                points.splice(1, 1);
                             }
                             else {
                                 this.bendType = BendType.PrebendRelease;
-                                this.bendPoints.splice(2, 1);
-                                this.bendPoints.splice(1, 1);
+                                points.splice(2, 1);
+                                points.splice(1, 1);
                             }
                         }
                         else {
@@ -2699,13 +2697,13 @@
                             }
                             else if (origin.value > 0 && !isContinuedBend) {
                                 this.bendType = BendType.Prebend;
-                                this.bendPoints.splice(2, 1);
-                                this.bendPoints.splice(1, 1);
+                                points.splice(2, 1);
+                                points.splice(1, 1);
                             }
                             else {
                                 this.bendType = BendType.Hold;
-                                this.bendPoints.splice(2, 1);
-                                this.bendPoints.splice(1, 1);
+                                points.splice(2, 1);
+                                points.splice(1, 1);
                             }
                         }
                     }
@@ -2713,9 +2711,9 @@
                         Logger.warning('Model', 'Unsupported bend type detected, fallback to custom', null);
                     }
                 }
-                else if (this.bendPoints.length === 2) {
-                    let origin = this.bendPoints[0];
-                    let destination = this.bendPoints[1];
+                else if (points.length === 2) {
+                    let origin = points[0];
+                    let destination = points[1];
                     // bend higher?
                     if (destination.value > origin.value) {
                         if (!isContinuedBend && origin.value > 0) {
@@ -2739,7 +2737,7 @@
                     }
                 }
             }
-            else if (this.bendPoints.length === 0) {
+            else if (points === null || points.length === 0) {
                 this.bendType = BendType.None;
             }
             // initial bend pitch offsets and forced accidentals don't play well together
@@ -2835,35 +2833,134 @@
             }
             return null;
         }
-        chain() {
-            this.beat.voice.bar.staff.track.score.registerNote(this);
-            if (!this.isTieDestination) {
-                return;
-            }
-            let tieOrigin;
-            if (this.tieOriginNoteId === -1) {
-                tieOrigin = Note.findTieOrigin(this);
-                this.tieOriginNoteId = tieOrigin ? tieOrigin.id : -1;
+        chain(sharedDataBag) {
+            // if we have some IDs from a serialization flow, 
+            // we need to lookup/register the notes correctly
+            if (this._noteIdBag != null) {
+                // get or create lookup
+                let noteIdLookup;
+                if (sharedDataBag.has(Note.NoteIdLookupKey)) {
+                    noteIdLookup = sharedDataBag.get(Note.NoteIdLookupKey);
+                }
+                else {
+                    noteIdLookup = new Map();
+                    sharedDataBag.set(Note.NoteIdLookupKey, noteIdLookup);
+                }
+                // if this note is a source note for any effect, remember it for later
+                // the destination note will look it up for linking
+                if (this._noteIdBag.hammerPullDestinationNoteId !== -1 ||
+                    this._noteIdBag.tieDestinationNoteId !== -1 ||
+                    this._noteIdBag.slurDestinationNoteId !== -1) {
+                    noteIdLookup.set(this.id, this);
+                }
+                // on any effect destiniation, lookup the origin which should already be 
+                // registered
+                if (this._noteIdBag.hammerPullOriginNoteId !== -1) {
+                    this.hammerPullOrigin = noteIdLookup.get(this._noteIdBag.hammerPullOriginNoteId);
+                    this.hammerPullOrigin.hammerPullDestination = this;
+                }
+                if (this._noteIdBag.tieOriginNoteId !== -1) {
+                    this.tieOrigin = noteIdLookup.get(this._noteIdBag.tieOriginNoteId);
+                    this.tieOrigin.tieDestination = this;
+                }
+                if (this._noteIdBag.slurOriginNoteId !== -1) {
+                    this.slurOrigin = noteIdLookup.get(this._noteIdBag.slurOriginNoteId);
+                    this.slurOrigin.slurDestination = this;
+                }
+                this._noteIdBag = null; // not needed anymore
             }
             else {
-                tieOrigin = this.tieOrigin;
+                if (!this.isTieDestination && this.tieOrigin == null) {
+                    return;
+                }
+                let tieOrigin = Note.findTieOrigin(this);
+                if (!tieOrigin) {
+                    this.isTieDestination = false;
+                }
+                else {
+                    tieOrigin.tieDestination = this;
+                    this.tieOrigin = tieOrigin;
+                    this.fret = tieOrigin.fret;
+                    this.octave = tieOrigin.octave;
+                    this.tone = tieOrigin.tone;
+                    if (tieOrigin.hasBend) {
+                        this.bendOrigin = this.tieOrigin;
+                    }
+                }
+            }
+        }
+        /**
+         * @internal
+         */
+        toJson(o) {
+            // inject linked note ids into JSON
+            if (this.tieDestination !== null) {
+                o.set("tiedestinationnoteid", this.tieDestination.id);
             }
-            if (!tieOrigin) {
-                this.isTieDestination = false;
+            if (this.tieOrigin !== null) {
+                o.set("tieoriginnoteid", this.tieOrigin.id);
             }
-            else {
-                tieOrigin.tieDestinationNoteId = this.id;
-                this.fret = tieOrigin.fret;
-                this.octave = tieOrigin.octave;
-                this.tone = tieOrigin.tone;
-                if (tieOrigin.hasBend) {
-                    this.bendOrigin = this.tieOrigin;
-                }
+            if (this.slurDestination !== null) {
+                o.set("slurdestinationnoteid", this.slurDestination.id);
+            }
+            if (this.slurOrigin !== null) {
+                o.set("sluroriginnoteid", this.slurOrigin.id);
+            }
+            if (this.hammerPullOrigin !== null) {
+                o.set("hammerpulloriginnoteid", this.hammerPullOrigin.id);
+            }
+            if (this.hammerPullDestination !== null) {
+                o.set("hammerpulldestinationnoteid", this.hammerPullDestination.id);
             }
         }
+        /**
+         * @internal
+         */
+        setProperty(property, v) {
+            switch (property) {
+                case "tiedestinationnoteid":
+                    if (this._noteIdBag == null) {
+                        this._noteIdBag = new NoteIdBag();
+                    }
+                    this._noteIdBag.tieDestinationNoteId = v;
+                    return true;
+                case "tieoriginnoteid":
+                    if (this._noteIdBag == null) {
+                        this._noteIdBag = new NoteIdBag();
+                    }
+                    this._noteIdBag.tieOriginNoteId = v;
+                    return true;
+                case "slurdestinationnoteid":
+                    if (this._noteIdBag == null) {
+                        this._noteIdBag = new NoteIdBag();
+                    }
+                    this._noteIdBag.slurDestinationNoteId = v;
+                    return true;
+                case "sluroriginnoteid":
+                    if (this._noteIdBag == null) {
+                        this._noteIdBag = new NoteIdBag();
+                    }
+                    this._noteIdBag.slurOriginNoteId = v;
+                    return true;
+                case "hammerpulloriginnoteid":
+                    if (this._noteIdBag == null) {
+                        this._noteIdBag = new NoteIdBag();
+                    }
+                    this._noteIdBag.hammerPullOriginNoteId = v;
+                    return true;
+                case "hammerpulldestinationnoteid":
+                    if (this._noteIdBag == null) {
+                        this._noteIdBag = new NoteIdBag();
+                    }
+                    this._noteIdBag.hammerPullDestinationNoteId = v;
+                    return true;
+            }
+            return false;
+        }
     }
     Note.GlobalNoteId = 0;
-    Note.MaxOffsetForSameLineSearch = 3;
+    Note.MaxOffsetForSameLineSearch = 3;
+    Note.NoteIdLookupKey = "NoteIdLookup";
 
     /**
      * Represents a list of beats that are grouped within the same tuplet.
@@ -3009,9 +3106,11 @@
             clone.bendType = original.bendType;
             clone.bendStyle = original.bendStyle;
             clone.isContinuedBend = original.isContinuedBend;
-            clone.bendPoints = [];
-            for (const i of original.bendPoints) {
-                clone.addBendPoint(BendPointCloner.clone(i));
+            if (original.bendPoints) {
+                clone.bendPoints = [];
+                for (const i of original.bendPoints) {
+                    clone.addBendPoint(BendPointCloner.clone(i));
+                }
             }
             clone.fret = original.fret;
             clone.string = original.string;
@@ -3021,11 +3120,7 @@
             clone.isVisible = original.isVisible;
             clone.isLeftHandTapped = original.isLeftHandTapped;
             clone.isHammerPullOrigin = original.isHammerPullOrigin;
-            clone.hammerPullOriginNoteId = original.hammerPullOriginNoteId;
-            clone.hammerPullDestinationNoteId = original.hammerPullDestinationNoteId;
             clone.isSlurDestination = original.isSlurDestination;
-            clone.slurOriginNoteId = original.slurOriginNoteId;
-            clone.slurDestinationNoteId = original.slurDestinationNoteId;
             clone.harmonicType = original.harmonicType;
             clone.harmonicValue = original.harmonicValue;
             clone.isGhost = original.isGhost;
@@ -3036,8 +3131,6 @@
             clone.slideInType = original.slideInType;
             clone.slideOutType = original.slideOutType;
             clone.vibrato = original.vibrato;
-            clone.tieOriginNoteId = original.tieOriginNoteId;
-            clone.tieDestinationNoteId = original.tieDestinationNoteId;
             clone.isTieDestination = original.isTieDestination;
             clone.leftHandFinger = original.leftHandFinger;
             clone.rightHandFinger = original.rightHandFinger;
@@ -3098,9 +3191,11 @@
             clone.tupletNumerator = original.tupletNumerator;
             clone.isContinuedWhammy = original.isContinuedWhammy;
             clone.whammyBarType = original.whammyBarType;
-            clone.whammyBarPoints = [];
-            for (const i of original.whammyBarPoints) {
-                clone.addWhammyBarPoint(BendPointCloner.clone(i));
+            if (original.whammyBarPoints) {
+                clone.whammyBarPoints = [];
+                for (const i of original.whammyBarPoints) {
+                    clone.addWhammyBarPoint(BendPointCloner.clone(i));
+                }
             }
             clone.vibrato = original.vibrato;
             clone.chordId = original.chordId;
@@ -3178,6 +3273,7 @@
      * A beat is a single block within a bar. A beat is a combination
      * of several notes played at the same time.
      * @json
+     * @json_strict
      * @cloneable
      */
     class Beat {
@@ -3352,7 +3448,7 @@
              * @json_add addWhammyBarPoint
              * @clone_add addWhammyBarPoint
              */
-            this.whammyBarPoints = [];
+            this.whammyBarPoints = null;
             /**
              * Gets or sets the highest point with for the highest whammy bar value.
              * @json_ignore
@@ -3473,13 +3569,13 @@
                 !(this.tupletDenominator === 1 && this.tupletNumerator === 1));
         }
         get hasWhammyBar() {
-            return this.whammyBarType !== WhammyType.None;
+            return this.whammyBarPoints !== null && this.whammyBarType !== WhammyType.None;
         }
         get hasChord() {
             return !!this.chordId;
         }
         get chord() {
-            return this.chordId ? this.voice.bar.staff.chords.get(this.chordId) : null;
+            return this.chordId ? this.voice.bar.staff.getChord(this.chordId) : null;
         }
         get isTremolo() {
             return !!this.tremoloSpeed;
@@ -3494,7 +3590,12 @@
             return !!this.effectSlurOrigin;
         }
         addWhammyBarPoint(point) {
-            this.whammyBarPoints.push(point);
+            let points = this.whammyBarPoints;
+            if (points === null) {
+                points = [];
+                this.whammyBarPoints = points;
+            }
+            points.push(point);
             if (!this.maxWhammyPoint || point.value > this.maxWhammyPoint.value) {
                 this.maxWhammyPoint = point;
             }
@@ -3507,16 +3608,17 @@
         }
         removeWhammyBarPoint(index) {
             // check index
-            if (index < 0 || index >= this.whammyBarPoints.length) {
+            const points = this.whammyBarPoints;
+            if (points === null || index < 0 || index >= points.length) {
                 return;
             }
             // remove point
-            this.whammyBarPoints.splice(index, 1);
-            let point = this.whammyBarPoints[index];
+            points.splice(index, 1);
+            let point = points[index];
             // update maxWhammy point if required
             if (point === this.maxWhammyPoint) {
                 this.maxWhammyPoint = null;
-                for (let currentPoint of this.whammyBarPoints) {
+                for (let currentPoint of points) {
                     if (!this.maxWhammyPoint || currentPoint.value > this.maxWhammyPoint.value) {
                         this.maxWhammyPoint = currentPoint;
                     }
@@ -3524,7 +3626,7 @@
             }
             if (point === this.minWhammyPoint) {
                 this.minWhammyPoint = null;
-                for (let currentPoint of this.whammyBarPoints) {
+                for (let currentPoint of points) {
                     if (!this.minWhammyPoint || currentPoint.value < this.minWhammyPoint.value) {
                         this.minWhammyPoint = currentPoint;
                     }
@@ -3619,7 +3721,7 @@
                 this.tupletGroup = currentTupletGroup;
             }
         }
-        finish(settings) {
+        finish(settings, sharedDataBag) {
             if (this.getAutomation(AutomationType.Instrument) === null &&
                 this.index === 0 &&
                 this.voice.index === 0 &&
@@ -3658,7 +3760,7 @@
             for (let i = 0, j = this.notes.length; i < j; i++) {
                 let note = this.notes[i];
                 note.dynamics = this.dynamics;
-                note.finish(settings);
+                note.finish(settings, sharedDataBag);
                 if (note.isLetRing) {
                     this.isLetRing = true;
                 }
@@ -3749,17 +3851,18 @@
             }
             // try to detect what kind of bend was used and cleans unneeded points if required
             // Guitar Pro 6 and above (gpif.xml) uses exactly 4 points to define all whammys
-            if (this.whammyBarPoints.length > 0 && this.whammyBarType === WhammyType.Custom) {
+            const points = this.whammyBarPoints;
+            if (points !== null && points.length > 0 && this.whammyBarType === WhammyType.Custom) {
                 if (displayMode === exports.NotationMode.SongBook) {
                     this.whammyStyle = isGradual ? BendStyle.Gradual : BendStyle.Fast;
                 }
                 let isContinuedWhammy = !!this.previousBeat && this.previousBeat.hasWhammyBar;
                 this.isContinuedWhammy = isContinuedWhammy;
-                if (this.whammyBarPoints.length === 4) {
-                    let origin = this.whammyBarPoints[0];
-                    let middle1 = this.whammyBarPoints[1];
-                    let middle2 = this.whammyBarPoints[2];
-                    let destination = this.whammyBarPoints[3];
+                if (points.length === 4) {
+                    let origin = points[0];
+                    let middle1 = points[1];
+                    let middle2 = points[2];
+                    let destination = points[3];
                     // the middle points are used for holds, anything else is a new feature we do not support yet
                     if (middle1.value === middle2.value) {
                         // constant decrease or increase
@@ -3771,14 +3874,14 @@
                             else {
                                 this.whammyBarType = WhammyType.Dive;
                             }
-                            this.whammyBarPoints.splice(2, 1);
-                            this.whammyBarPoints.splice(1, 1);
+                            points.splice(2, 1);
+                            points.splice(1, 1);
                         }
                         else if ((origin.value > middle1.value && middle1.value < destination.value) ||
                             (origin.value < middle1.value && middle1.value > destination.value)) {
                             this.whammyBarType = WhammyType.Dip;
                             if (middle1.offset === middle2.offset || displayMode === exports.NotationMode.SongBook) {
-                                this.whammyBarPoints.splice(2, 1);
+                                points.splice(2, 1);
                             }
                         }
                         else if (origin.value === middle1.value && middle1.value === destination.value) {
@@ -3788,8 +3891,8 @@
                             else {
                                 this.whammyBarType = WhammyType.Hold;
                             }
-                            this.whammyBarPoints.splice(2, 1);
-                            this.whammyBarPoints.splice(1, 1);
+                            points.splice(2, 1);
+                            points.splice(1, 1);
                         }
                         else {
                             Logger.warning('Model', 'Unsupported whammy type detected, fallback to custom', null);
@@ -3813,17 +3916,17 @@
                     // remove bend on cloned note
                     cloneNote.bendType = BendType.None;
                     cloneNote.maxBendPoint = null;
-                    cloneNote.bendPoints = [];
+                    cloneNote.bendPoints = null;
                     cloneNote.bendStyle = BendStyle.Default;
                     cloneNote.id = Note.GlobalNoteId++;
                     // fix ties
                     if (note.isTieOrigin) {
-                        cloneNote.tieDestinationNoteId = note.tieDestination.id;
-                        note.tieDestination.tieOriginNoteId = cloneNote.id;
+                        cloneNote.tieDestination = note.tieDestination;
+                        note.tieDestination.tieOrigin = cloneNote;
                     }
                     if (note.isTieDestination) {
-                        cloneNote.tieOriginNoteId = note.tieOrigin ? note.tieOrigin.id : -1;
-                        note.tieOrigin.tieDestinationNoteId = cloneNote.id;
+                        cloneNote.tieOrigin = note.tieOrigin ? note.tieOrigin : null;
+                        note.tieOrigin.tieDestination = cloneNote;
                     }
                     // if the note has a bend which is continued on the next note
                     // we need to convert this note into a hold bend
@@ -3876,16 +3979,17 @@
         hasNoteOnString(noteString) {
             return this.noteStringLookup.has(noteString);
         }
+        // TODO: can be likely eliminated
         getNoteWithRealValue(noteRealValue) {
             if (this.noteValueLookup.has(noteRealValue)) {
                 return this.noteValueLookup.get(noteRealValue);
             }
             return null;
         }
-        chain() {
+        chain(sharedDataBag) {
             for (const n of this.notes) {
                 this.noteValueLookup.set(n.realValue, n);
-                n.chain();
+                n.chain(sharedDataBag);
             }
         }
     }
@@ -3896,6 +4000,7 @@
     /**
      * A chord definition.
      * @json
+     * @json_strict
      */
     class Chord {
         constructor() {
@@ -4188,6 +4293,7 @@
      * The MasterBar stores information about a bar which affects
      * all tracks.
      * @json
+     * @json_strict
      */
     class MasterBar {
         constructor() {
@@ -4257,8 +4363,9 @@
             this.tempoAutomation = null;
             /**
              * Gets or sets the fermatas for this bar. The key is the offset of the fermata in midi ticks.
+             * @json_add addFermata
              */
-            this.fermata = new Map();
+            this.fermata = null;
             /**
              * The timeline position of the voice within the whole score. (unit: midi ticks)
              */
@@ -4300,7 +4407,12 @@
          * @param fermata The fermata.
          */
         addFermata(offset, fermata) {
-            this.fermata.set(offset, fermata);
+            let fermataMap = this.fermata;
+            if (fermataMap === null) {
+                fermataMap = new Map();
+                this.fermata = fermataMap;
+            }
+            fermataMap.set(offset, fermata);
         }
         /**
          * Gets the fermata for a given beat.
@@ -4308,8 +4420,12 @@
          * @returns
          */
         getFermata(beat) {
-            if (this.fermata.has(beat.playbackStart)) {
-                return this.fermata.get(beat.playbackStart);
+            const fermataMap = this.fermata;
+            if (fermataMap === null) {
+                return null;
+            }
+            if (fermataMap.has(beat.playbackStart)) {
+                return fermataMap.get(beat.playbackStart);
             }
             return null;
         }
@@ -4320,6 +4436,7 @@
      * This class represents the rendering stylesheet.
      * It contains settings which control the display of the score when rendered.
      * @json
+     * @json_strict
      */
     class RenderStylesheet {
         constructor() {
@@ -4382,10 +4499,10 @@
      * model. It stores the basic information of
      * a song and stores the sub components.
      * @json
+     * @json_strict
      */
     class Score {
         constructor() {
-            this._noteByIdLookup = new Map();
             this._currentRepeatGroup = new RepeatGroup();
             /**
              * The album of this song.
@@ -4485,25 +4602,18 @@
             this.tracks.push(track);
         }
         finish(settings) {
-            this._noteByIdLookup.clear();
+            const sharedDataBag = new Map();
             for (let i = 0, j = this.tracks.length; i < j; i++) {
-                this.tracks[i].finish(settings);
+                this.tracks[i].finish(settings, sharedDataBag);
             }
         }
-        registerNote(note) {
-            this._noteByIdLookup.set(note.id, note);
-        }
-        getNoteById(noteId) {
-            return this._noteByIdLookup.has(noteId)
-                ? this._noteByIdLookup.get(noteId)
-                : null;
-        }
     }
 
     /**
      * This public class is used to describe the beginning of a
      * section within a song. It acts like a marker.
      * @json
+     * @json_strict
      */
     class Section {
         constructor() {
@@ -4576,50 +4686,48 @@
         }
         static fromJson(v) {
             switch (typeof v) {
-                case 'number':
-                    {
-                        const c = new Color(0, 0, 0, 0);
-                        c.raw = v;
-                        c.updateRgba();
-                        return c;
+                case 'number': {
+                    const c = new Color(0, 0, 0, 0);
+                    c.raw = v;
+                    c.updateRgba();
+                    return c;
+                }
+                case 'string': {
+                    const json = v;
+                    if (json.startsWith('#')) {
+                        if (json.length === 4) {
+                            // #RGB
+                            return new Color(parseInt(json.substring(1, 1), 16) * 17, parseInt(json.substring(2, 1), 16) * 17, parseInt(json.substring(3, 1), 16) * 17);
+                        }
+                        if (json.length === 5) {
+                            // #RGBA
+                            return new Color(parseInt(json.substring(1, 1), 16) * 17, parseInt(json.substring(2, 1), 16) * 17, parseInt(json.substring(3, 1), 16) * 17, parseInt(json.substring(4, 1), 16) * 17);
+                        }
+                        if (json.length === 7) {
+                            // #RRGGBB
+                            return new Color(parseInt(json.substring(1, 2), 16), parseInt(json.substring(3, 2), 16), parseInt(json.substring(5, 2), 16));
+                        }
+                        if (json.length === 9) {
+                            // #RRGGBBAA
+                            return new Color(parseInt(json.substring(1, 2), 16), parseInt(json.substring(3, 2), 16), parseInt(json.substring(5, 2), 16), parseInt(json.substring(7, 2), 16));
+                        }
                     }
-                case 'string':
-                    {
-                        const json = v;
-                        if (json.startsWith('#')) {
-                            if (json.length === 4) {
-                                // #RGB
-                                return new Color(parseInt(json.substring(1, 1), 16) * 17, parseInt(json.substring(2, 1), 16) * 17, parseInt(json.substring(3, 1), 16) * 17);
-                            }
-                            if (json.length === 5) {
-                                // #RGBA
-                                return new Color(parseInt(json.substring(1, 1), 16) * 17, parseInt(json.substring(2, 1), 16) * 17, parseInt(json.substring(3, 1), 16) * 17, parseInt(json.substring(4, 1), 16) * 17);
-                            }
-                            if (json.length === 7) {
-                                // #RRGGBB
-                                return new Color(parseInt(json.substring(1, 2), 16), parseInt(json.substring(3, 2), 16), parseInt(json.substring(5, 2), 16));
-                            }
-                            if (json.length === 9) {
-                                // #RRGGBBAA
-                                return new Color(parseInt(json.substring(1, 2), 16), parseInt(json.substring(3, 2), 16), parseInt(json.substring(5, 2), 16), parseInt(json.substring(7, 2), 16));
-                            }
+                    else if (json.startsWith('rgba') || json.startsWith('rgb')) {
+                        const start = json.indexOf('(');
+                        const end = json.lastIndexOf(')');
+                        if (start === -1 || end === -1) {
+                            throw new FormatError('No values specified for rgb/rgba function');
                         }
-                        else if (json.startsWith('rgba') || json.startsWith('rgb')) {
-                            const start = json.indexOf('(');
-                            const end = json.lastIndexOf(')');
-                            if (start === -1 || end === -1) {
-                                throw new FormatError('No values specified for rgb/rgba function');
-                            }
-                            const numbers = json.substring(start + 1, end).split(',');
-                            if (numbers.length === 3) {
-                                return new Color(parseInt(numbers[0]), parseInt(numbers[1]), parseInt(numbers[2]));
-                            }
-                            if (numbers.length === 4) {
-                                return new Color(parseInt(numbers[0]), parseInt(numbers[1]), parseInt(numbers[2]), parseFloat(numbers[3]) * 255);
-                            }
+                        const numbers = json.substring(start + 1, end).split(',');
+                        if (numbers.length === 3) {
+                            return new Color(parseInt(numbers[0]), parseInt(numbers[1]), parseInt(numbers[2]));
+                        }
+                        if (numbers.length === 4) {
+                            return new Color(parseInt(numbers[0]), parseInt(numbers[1]), parseInt(numbers[2]), parseFloat(numbers[3]) * 255);
                         }
-                        return null;
                     }
+                    return null;
+                }
             }
             throw new FormatError('Unsupported format for color');
         }
@@ -4633,6 +4741,7 @@
      * This public class stores the midi specific information of a track needed
      * for playback.
      * @json
+     * @json_strict
      */
     class PlaybackInformation {
         constructor() {
@@ -4674,6 +4783,7 @@
     /**
      * This public class represents a predefined string tuning.
      * @json
+     * @json_strict
      */
     class Tuning {
         /**
@@ -4829,6 +4939,7 @@
      * This class describes a single staff within a track. There are instruments like pianos
      * where a single track can contain multiple staffs.
      * @json
+     * @json_strict
      */
     class Staff {
         constructor() {
@@ -4846,7 +4957,7 @@
              * Gets or sets a list of all chords defined for this staff. {@link Beat.chordId} refers to entries in this lookup.
              * @json_add addChord
              */
-            this.chords = new Map();
+            this.chords = null;
             /**
              * Gets or sets the fret on which a capo is set.
              */
@@ -4900,15 +5011,28 @@
         get isStringed() {
             return this.stringTuning.tunings.length > 0;
         }
-        finish(settings) {
+        finish(settings, sharedDataBag) {
             this.stringTuning.finish();
             for (let i = 0, j = this.bars.length; i < j; i++) {
-                this.bars[i].finish(settings);
+                this.bars[i].finish(settings, sharedDataBag);
             }
         }
         addChord(chordId, chord) {
             chord.staff = this;
-            this.chords.set(chordId, chord);
+            let chordMap = this.chords;
+            if (chordMap === null) {
+                chordMap = new Map();
+                this.chords = chordMap;
+            }
+            chordMap.set(chordId, chord);
+        }
+        hasChord(chordId) {
+            var _a, _b;
+            return (_b = (_a = this.chords) === null || _a === void 0 ? void 0 : _a.has(chordId)) !== null && _b !== void 0 ? _b : false;
+        }
+        getChord(chordId) {
+            var _a, _b;
+            return (_b = (_a = this.chords) === null || _a === void 0 ? void 0 : _a.get(chordId)) !== null && _b !== void 0 ? _b : null;
         }
         addBar(bar) {
             let bars = this.bars;
@@ -4926,6 +5050,7 @@
      * This public class describes a single track or instrument of score.
      * It is bascially a list of staffs containing individual music notation kinds.
      * @json
+     * @json_strict
      */
     class Track {
         constructor() {
@@ -4971,7 +5096,7 @@
             staff.track = this;
             this.staves.push(staff);
         }
-        finish(settings) {
+        finish(settings, sharedDataBag) {
             if (!this.shortName) {
                 this.shortName = this.name;
                 if (this.shortName.length > Track.ShortNameMaxLength) {
@@ -4979,7 +5104,7 @@
                 }
             }
             for (let i = 0, j = this.staves.length; i < j; i++) {
-                this.staves[i].finish(settings);
+                this.staves[i].finish(settings, sharedDataBag);
             }
         }
         applyLyrics(lyrics) {
@@ -5017,6 +5142,7 @@
      * A voice represents a group of beats
      * that can be played during a bar.
      * @json
+     * @json_strict
      */
     class Voice$1 {
         constructor() {
@@ -5057,7 +5183,7 @@
                 this.isEmpty = false;
             }
         }
-        chain(beat) {
+        chain(beat, sharedDataBag) {
             if (!this.bar) {
                 return;
             }
@@ -5075,7 +5201,7 @@
                     beat.nextBeat.previousBeat = beat;
                 }
             }
-            beat.chain();
+            beat.chain(sharedDataBag);
         }
         addGraceBeat(beat) {
             if (this.beats.length === 0) {
@@ -5097,13 +5223,13 @@
             }
             return null;
         }
-        finish(settings) {
+        finish(settings, sharedDataBag) {
             this._beatLookup = new Map();
             let currentGraceGroup = null;
             for (let index = 0; index < this.beats.length; index++) {
                 let beat = this.beats[index];
                 beat.index = index;
-                this.chain(beat);
+                this.chain(beat, sharedDataBag);
                 if (beat.graceType === GraceType.None) {
                     beat.graceGroup = currentGraceGroup;
                     if (currentGraceGroup) {
@@ -5123,7 +5249,7 @@
             for (let i = 0; i < this.beats.length; i++) {
                 let beat = this.beats[i];
                 beat.index = i;
-                beat.finish(settings);
+                beat.finish(settings, sharedDataBag);
                 // if this beat is a non-grace but has grace notes
                 // we need to first steal the duration from the right beat
                 // and place the grace beats correctly
@@ -5209,7 +5335,18 @@
     }
     Voice$1._globalBarId = 0;
 
+    /**
+     * @target web
+     */
     class TypeConversions {
+        static float64ToBytes(v) {
+            TypeConversions._dataView.setFloat64(0, v, true);
+            return this._conversionByteArray;
+        }
+        static bytesToFloat64(bytes) {
+            TypeConversions._conversionByteArray.set(bytes, 0);
+            throw TypeConversions._dataView.getFloat64(0, true);
+        }
         static uint16ToInt16(v) {
             TypeConversions._dataView.setUint16(0, v, true);
             return TypeConversions._dataView.getInt16(0, true);
@@ -5236,6 +5373,7 @@
         }
     }
     TypeConversions._conversionBuffer = new ArrayBuffer(8);
+    TypeConversions._conversionByteArray = new Uint8Array(TypeConversions._conversionBuffer);
     TypeConversions._dataView = new DataView(TypeConversions._conversionBuffer);
 
     class IOHelper {
@@ -5374,30 +5512,29 @@
             return decoder.encode(str);
         }
         static writeInt32BE(o, v) {
-            o.writeByte((v >> 24) & 0xFF);
-            o.writeByte((v >> 16) & 0xFF);
-            o.writeByte((v >> 8) & 0xFF);
-            o.writeByte((v >> 0) & 0xFF);
+            o.writeByte((v >> 24) & 0xff);
+            o.writeByte((v >> 16) & 0xff);
+            o.writeByte((v >> 8) & 0xff);
+            o.writeByte((v >> 0) & 0xff);
         }
         static writeInt32LE(o, v) {
-            o.writeByte((v >> 0) & 0xFF);
-            o.writeByte((v >> 8) & 0xFF);
-            o.writeByte((v >> 16) & 0xFF);
-            o.writeByte((v >> 24) & 0xFF);
+            o.writeByte((v >> 0) & 0xff);
+            o.writeByte((v >> 8) & 0xff);
+            o.writeByte((v >> 16) & 0xff);
+            o.writeByte((v >> 24) & 0xff);
         }
         static writeUInt16LE(o, v) {
-            o.writeByte((v >> 0) & 0xFF);
-            o.writeByte((v >> 8) & 0xFF);
+            o.writeByte((v >> 0) & 0xff);
+            o.writeByte((v >> 8) & 0xff);
         }
         static writeInt16LE(o, v) {
-            o.writeByte((v >> 0) & 0xFF);
-            o.writeByte((v >> 8) & 0xFF);
+            o.writeByte((v >> 0) & 0xff);
+            o.writeByte((v >> 8) & 0xff);
         }
     }
 
     class ByteBuffer {
         constructor() {
-            this._capacity = 0;
             this.length = 0;
             this.position = 0;
         }
@@ -5413,14 +5550,12 @@
         static withCapacity(capacity) {
             let buffer = new ByteBuffer();
             buffer._buffer = new Uint8Array(capacity);
-            buffer._capacity = capacity;
             return buffer;
         }
         static fromBuffer(data) {
             let buffer = new ByteBuffer();
             buffer._buffer = data;
             buffer.length = data.length;
-            buffer._capacity = buffer.length;
             return buffer;
         }
         static fromString(contents) {
@@ -5433,18 +5568,6 @@
         skip(offset) {
             this.position += offset;
         }
-        setCapacity(value) {
-            if (value !== this._capacity) {
-                if (value > 0) {
-                    let newBuffer = new Uint8Array(value);
-                    if (this.length > 0) {
-                        newBuffer.set(this._buffer.subarray(0, 0 + this.length), 0);
-                    }
-                    this._buffer = newBuffer;
-                }
-                this._capacity = value;
-            }
-        }
         readByte() {
             let n = this.length - this.position;
             if (n <= 0) {
@@ -5460,53 +5583,43 @@
             if (n <= 0) {
                 return 0;
             }
-            if (n <= 8) {
-                let byteCount = n;
-                while (--byteCount >= 0) {
-                    buffer[offset + byteCount] = this._buffer[this.position + byteCount];
-                }
-            }
-            else {
-                buffer.set(this._buffer.subarray(this.position, this.position + n), offset);
-            }
+            buffer.set(this._buffer.subarray(this.position, this.position + n), offset);
             this.position += n;
             return n;
         }
         writeByte(value) {
-            let buffer = new Uint8Array(1);
-            buffer[0] = value;
-            this.write(buffer, 0, 1);
+            let i = this.position + 1;
+            this.ensureCapacity(i);
+            this._buffer[this.position] = value & 0xFF;
+            if (i > this.length) {
+                this.length = i;
+            }
+            this.position = i;
         }
         write(buffer, offset, count) {
             let i = this.position + count;
+            this.ensureCapacity(i);
+            let count1 = Math.min(count, buffer.length - offset);
+            this._buffer.set(buffer.subarray(offset, offset + count1), this.position);
             if (i > this.length) {
-                if (i > this._capacity) {
-                    this.ensureCapacity(i);
-                }
                 this.length = i;
             }
-            if (count <= 8 && buffer !== this._buffer) {
-                let byteCount = count;
-                while (--byteCount >= 0) {
-                    this._buffer[this.position + byteCount] = buffer[offset + byteCount];
-                }
-            }
-            else {
-                let count1 = Math.min(count, buffer.length - offset);
-                this._buffer.set(buffer.subarray(offset, offset + count1), this.position);
-            }
             this.position = i;
         }
         ensureCapacity(value) {
-            if (value > this._capacity) {
+            if (value > this._buffer.length) {
                 let newCapacity = value;
                 if (newCapacity < 256) {
                     newCapacity = 256;
                 }
-                if (newCapacity < this._capacity * 2) {
-                    newCapacity = this._capacity * 2;
+                if (newCapacity < this._buffer.length * 2) {
+                    newCapacity = this._buffer.length * 2;
                 }
-                this.setCapacity(newCapacity);
+                let newBuffer = new Uint8Array(newCapacity);
+                if (this.length > 0) {
+                    newBuffer.set(this._buffer.subarray(0, 0 + this.length), 0);
+                }
+                this._buffer = newBuffer;
             }
         }
         readAll() {
@@ -6167,6 +6280,7 @@
             return anyMeta;
         }
         handleStaffMeta() {
+            var _a, _b;
             let syData = this._syData.toLowerCase();
             switch (syData) {
                 case 'capo':
@@ -6210,7 +6324,7 @@
                             this.error('tuning', AlphaTexSymbols.Tuning, true);
                             break;
                     }
-                    if (strings !== this._currentStaff.tuning.length && this._currentStaff.chords.size > 0) {
+                    if (strings !== this._currentStaff.tuning.length && ((_b = (_a = this._currentStaff.chords) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0) > 0) {
                         this.errorMessage('Tuning must be defined before any chord');
                     }
                     return true;
@@ -6761,23 +6875,25 @@
                     beat.addWhammyBarPoint(new BendPoint(offset, value));
                     this._sy = this.newSy();
                 }
-                while (beat.whammyBarPoints.length > 60) {
-                    beat.removeWhammyBarPoint(beat.whammyBarPoints.length - 1);
-                }
-                // set positions
-                if (!exact) {
-                    let count = beat.whammyBarPoints.length;
-                    let step = (60 / count) | 0;
-                    let i = 0;
-                    while (i < count) {
-                        beat.whammyBarPoints[i].offset = Math.min(60, i * step);
-                        i++;
+                if (beat.whammyBarPoints != null) {
+                    while (beat.whammyBarPoints.length > 60) {
+                        beat.removeWhammyBarPoint(beat.whammyBarPoints.length - 1);
+                    }
+                    // set positions
+                    if (!exact) {
+                        let count = beat.whammyBarPoints.length;
+                        let step = (60 / count) | 0;
+                        let i = 0;
+                        while (i < count) {
+                            beat.whammyBarPoints[i].offset = Math.min(60, i * step);
+                            i++;
+                        }
+                    }
+                    else {
+                        beat.whammyBarPoints.sort((a, b) => {
+                            return a.offset - b.offset;
+                        });
                     }
-                }
-                else {
-                    beat.whammyBarPoints.sort((a, b) => {
-                        return a.offset - b.offset;
-                    });
                 }
                 this._allowNegatives = false;
                 if (this._sy !== AlphaTexSymbols.RParensis) {
@@ -6791,7 +6907,7 @@
                 this._sy = this.newSy();
                 let chordName = this._syData;
                 let chordId = this.getChordId(this._currentStaff, chordName);
-                if (!this._currentStaff.chords.has(chordId)) {
+                if (!this._currentStaff.hasChord(chordId)) {
                     let chord = new Chord();
                     chord.showDiagram = false;
                     chord.name = chordName;
@@ -7034,22 +7150,25 @@
                         note.addBendPoint(new BendPoint(offset, value));
                         this._sy = this.newSy();
                     }
-                    while (note.bendPoints.length > 60) {
-                        note.bendPoints.splice(note.bendPoints.length - 1, 1);
-                    }
-                    // set positions
-                    if (exact) {
-                        note.bendPoints.sort((a, b) => {
-                            return a.offset - b.offset;
-                        });
-                    }
-                    else {
-                        let count = note.bendPoints.length;
-                        let step = (60 / (count - 1)) | 0;
-                        let i = 0;
-                        while (i < count) {
-                            note.bendPoints[i].offset = Math.min(60, i * step);
-                            i++;
+                    const points = note.bendPoints;
+                    if (points != null) {
+                        while (points.length > 60) {
+                            points.splice(points.length - 1, 1);
+                        }
+                        // set positions
+                        if (exact) {
+                            points.sort((a, b) => {
+                                return a.offset - b.offset;
+                            });
+                        }
+                        else {
+                            let count = points.length;
+                            let step = (60 / (count - 1)) | 0;
+                            let i = 0;
+                            while (i < count) {
+                                points[i].offset = Math.min(60, i * step);
+                                i++;
+                            }
                         }
                     }
                     if (this._sy !== AlphaTexSymbols.RParensis) {
@@ -8785,6 +8904,7 @@
     /**
      * Represents a fermata.
      * @json
+     * @json_strict
      */
     class Fermata {
         constructor() {
@@ -12346,7 +12466,8 @@
             super(exports.AlphaTabErrorType.Format, 'Unexpected end of data within reader');
             Object.setPrototypeOf(this, EndOfReaderError.prototype);
         }
-    }
+    }
+
     /**
      * This utility public class allows bitwise reading of a stream
      */
@@ -13428,7 +13549,7 @@
             }
             else if (element.getAttribute('type') === 'stop' && this._tieStarts.length > 0 && !note.isTieDestination) {
                 note.isTieDestination = true;
-                note.tieOriginNoteId = this._tieStarts[0].id;
+                note.tieOrigin = this._tieStarts[0];
                 this._tieStarts.splice(0, 1);
                 this._tieStartIds.delete(note.id);
             }
@@ -13471,8 +13592,8 @@
                                     if (this._slurStarts.has(slurNumber)) {
                                         note.isSlurDestination = true;
                                         let slurStart = this._slurStarts.get(slurNumber);
-                                        slurStart.slurDestinationNoteId = note.id;
-                                        note.slurOriginNoteId = note.id;
+                                        slurStart.slurDestination = note;
+                                        note.slurOrigin = note;
                                     }
                                     break;
                             }
@@ -17252,6 +17373,7 @@
         set masterVolume(value) {
             value = Math.max(value, SynthConstants.MinVolume);
             this._synthesizer.masterVolume = value;
+            this.onAudioSettingsUpdate();
         }
         get metronomeVolume() {
             return this._metronomeVolume;
@@ -17260,6 +17382,7 @@
             value = Math.max(value, SynthConstants.MinVolume);
             this._metronomeVolume = value;
             this._synthesizer.metronomeVolume = value;
+            this.onAudioSettingsUpdate();
         }
         get countInVolume() {
             return this._countInVolume;
@@ -17281,7 +17404,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;
@@ -17433,16 +17556,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;
@@ -17817,8 +17949,7 @@
             }
             else if (parts.length >= 1) {
                 this.size = parts[0];
-                if (this._currentToken &&
-                    this._currentToken.text.indexOf('/') === 0) {
+                if (this._currentToken && this._currentToken.text.indexOf('/') === 0) {
                     // size / line-height (with spaces befor and after slash)
                     if (this._currentToken.text === '/') {
                         this.nextToken();
@@ -18484,20 +18615,20 @@
             }
             const o = new Map();
             /*@target web*/
-            o.set("scriptFile", obj.scriptFile);
+            o.set("scriptfile", obj.scriptFile);
             /*@target web*/
-            o.set("fontDirectory", obj.fontDirectory);
+            o.set("fontdirectory", obj.fontDirectory);
             /*@target web*/
             o.set("file", obj.file);
             /*@target web*/
             o.set("tex", obj.tex);
             /*@target web*/
             o.set("tracks", obj.tracks);
-            o.set("enableLazyLoading", obj.enableLazyLoading);
+            o.set("enablelazyloading", obj.enableLazyLoading);
             o.set("engine", obj.engine);
-            o.set("logLevel", obj.logLevel);
-            o.set("useWorkers", obj.useWorkers);
-            o.set("includeNoteBounds", obj.includeNoteBounds);
+            o.set("loglevel", obj.logLevel);
+            o.set("useworkers", obj.useWorkers);
+            o.set("includenotebounds", obj.includeNoteBounds);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -18554,23 +18685,23 @@
                 return null;
             }
             const o = new Map();
-            o.set("copyrightFont", Font.toJson(obj.copyrightFont));
-            o.set("titleFont", Font.toJson(obj.titleFont));
-            o.set("subTitleFont", Font.toJson(obj.subTitleFont));
-            o.set("wordsFont", Font.toJson(obj.wordsFont));
-            o.set("effectFont", Font.toJson(obj.effectFont));
-            o.set("fretboardNumberFont", Font.toJson(obj.fretboardNumberFont));
-            o.set("tablatureFont", Font.toJson(obj.tablatureFont));
-            o.set("graceFont", Font.toJson(obj.graceFont));
-            o.set("staffLineColor", Color.toJson(obj.staffLineColor));
-            o.set("barSeparatorColor", Color.toJson(obj.barSeparatorColor));
-            o.set("barNumberFont", Font.toJson(obj.barNumberFont));
-            o.set("barNumberColor", Color.toJson(obj.barNumberColor));
-            o.set("fingeringFont", Font.toJson(obj.fingeringFont));
-            o.set("markerFont", Font.toJson(obj.markerFont));
-            o.set("mainGlyphColor", Color.toJson(obj.mainGlyphColor));
-            o.set("secondaryGlyphColor", Color.toJson(obj.secondaryGlyphColor));
-            o.set("scoreInfoColor", Color.toJson(obj.scoreInfoColor));
+            o.set("copyrightfont", Font.toJson(obj.copyrightFont));
+            o.set("titlefont", Font.toJson(obj.titleFont));
+            o.set("subtitlefont", Font.toJson(obj.subTitleFont));
+            o.set("wordsfont", Font.toJson(obj.wordsFont));
+            o.set("effectfont", Font.toJson(obj.effectFont));
+            o.set("fretboardnumberfont", Font.toJson(obj.fretboardNumberFont));
+            o.set("tablaturefont", Font.toJson(obj.tablatureFont));
+            o.set("gracefont", Font.toJson(obj.graceFont));
+            o.set("stafflinecolor", Color.toJson(obj.staffLineColor));
+            o.set("barseparatorcolor", Color.toJson(obj.barSeparatorColor));
+            o.set("barnumberfont", Font.toJson(obj.barNumberFont));
+            o.set("barnumbercolor", Color.toJson(obj.barNumberColor));
+            o.set("fingeringfont", Font.toJson(obj.fingeringFont));
+            o.set("markerfont", Font.toJson(obj.markerFont));
+            o.set("mainglyphcolor", Color.toJson(obj.mainGlyphColor));
+            o.set("secondaryglyphcolor", Color.toJson(obj.secondaryGlyphColor));
+            o.set("scoreinfocolor", Color.toJson(obj.scoreInfoColor));
             return o;
         }
         static setProperty(obj, property, v) {
@@ -18644,13 +18775,13 @@
             }
             const o = new Map();
             o.set("scale", obj.scale);
-            o.set("stretchForce", obj.stretchForce);
-            o.set("layoutMode", obj.layoutMode);
-            o.set("staveProfile", obj.staveProfile);
-            o.set("barsPerRow", obj.barsPerRow);
-            o.set("startBar", obj.startBar);
-            o.set("barCount", obj.barCount);
-            o.set("barCountPerPartial", obj.barCountPerPartial);
+            o.set("stretchforce", obj.stretchForce);
+            o.set("layoutmode", obj.layoutMode);
+            o.set("staveprofile", obj.staveProfile);
+            o.set("barsperrow", obj.barsPerRow);
+            o.set("startbar", obj.startBar);
+            o.set("barcount", obj.barCount);
+            o.set("barcountperpartial", obj.barCountPerPartial);
             o.set("resources", RenderingResourcesSerializer.toJson(obj.resources));
             o.set("padding", obj.padding);
             return o;
@@ -18714,8 +18845,8 @@
                 return null;
             }
             const o = new Map();
-            o.set("notationMode", obj.notationMode);
-            o.set("fingeringMode", obj.fingeringMode);
+            o.set("notationmode", obj.notationMode);
+            o.set("fingeringmode", obj.fingeringMode);
             {
                 const m = new Map();
                 o.set("elements", m);
@@ -18723,14 +18854,14 @@
                     m.set(k.toString(), v);
                 }
             }
-            o.set("rhythmMode", obj.rhythmMode);
-            o.set("rhythmHeight", obj.rhythmHeight);
-            o.set("transpositionPitches", obj.transpositionPitches);
-            o.set("displayTranspositionPitches", obj.displayTranspositionPitches);
-            o.set("smallGraceTabNotes", obj.smallGraceTabNotes);
-            o.set("extendBendArrowsOnTiedNotes", obj.extendBendArrowsOnTiedNotes);
-            o.set("extendLineEffectsToBeatEnd", obj.extendLineEffectsToBeatEnd);
-            o.set("slurHeight", obj.slurHeight);
+            o.set("rhythmmode", obj.rhythmMode);
+            o.set("rhythmheight", obj.rhythmHeight);
+            o.set("transpositionpitches", obj.transpositionPitches);
+            o.set("displaytranspositionpitches", obj.displayTranspositionPitches);
+            o.set("smallgracetabnotes", obj.smallGraceTabNotes);
+            o.set("extendbendarrowsontiednotes", obj.extendBendArrowsOnTiedNotes);
+            o.set("extendlineeffectstobeatend", obj.extendLineEffectsToBeatEnd);
+            o.set("slurheight", obj.slurHeight);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -18789,8 +18920,8 @@
             }
             const o = new Map();
             o.set("encoding", obj.encoding);
-            o.set("mergePartGroupsInMusicXml", obj.mergePartGroupsInMusicXml);
-            o.set("beatTextAsLyrics", obj.beatTextAsLyrics);
+            o.set("mergepartgroupsinmusicxml", obj.mergePartGroupsInMusicXml);
+            o.set("beattextaslyrics", obj.beatTextAsLyrics);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -18821,14 +18952,14 @@
                 return null;
             }
             const o = new Map();
-            o.set("noteWideLength", obj.noteWideLength);
-            o.set("noteWideAmplitude", obj.noteWideAmplitude);
-            o.set("noteSlightLength", obj.noteSlightLength);
-            o.set("noteSlightAmplitude", obj.noteSlightAmplitude);
-            o.set("beatWideLength", obj.beatWideLength);
-            o.set("beatWideAmplitude", obj.beatWideAmplitude);
-            o.set("beatSlightLength", obj.beatSlightLength);
-            o.set("beatSlightAmplitude", obj.beatSlightAmplitude);
+            o.set("notewidelength", obj.noteWideLength);
+            o.set("notewideamplitude", obj.noteWideAmplitude);
+            o.set("noteslightlength", obj.noteSlightLength);
+            o.set("noteslightamplitude", obj.noteSlightAmplitude);
+            o.set("beatwidelength", obj.beatWideLength);
+            o.set("beatwideamplitude", obj.beatWideAmplitude);
+            o.set("beatslightlength", obj.beatSlightLength);
+            o.set("beatslightamplitude", obj.beatSlightAmplitude);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -18874,9 +19005,9 @@
                 return null;
             }
             const o = new Map();
-            o.set("simpleSlidePitchOffset", obj.simpleSlidePitchOffset);
-            o.set("simpleSlideDurationRatio", obj.simpleSlideDurationRatio);
-            o.set("shiftSlideDurationRatio", obj.shiftSlideDurationRatio);
+            o.set("simpleslidepitchoffset", obj.simpleSlidePitchOffset);
+            o.set("simpleslidedurationratio", obj.simpleSlideDurationRatio);
+            o.set("shiftslidedurationratio", obj.shiftSlideDurationRatio);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -18907,24 +19038,24 @@
                 return null;
             }
             const o = new Map();
-            o.set("soundFont", obj.soundFont);
-            o.set("scrollElement", obj.scrollElement);
-            o.set("enablePlayer", obj.enablePlayer);
-            o.set("enableCursor", obj.enableCursor);
-            o.set("enableAnimatedBeatCursor", obj.enableAnimatedBeatCursor);
-            o.set("enableElementHighlighting", obj.enableElementHighlighting);
-            o.set("enableUserInteraction", obj.enableUserInteraction);
-            o.set("scrollOffsetX", obj.scrollOffsetX);
-            o.set("scrollOffsetY", obj.scrollOffsetY);
-            o.set("scrollMode", obj.scrollMode);
-            o.set("scrollSpeed", obj.scrollSpeed);
+            o.set("soundfont", obj.soundFont);
+            o.set("scrollelement", obj.scrollElement);
+            o.set("enableplayer", obj.enablePlayer);
+            o.set("enablecursor", obj.enableCursor);
+            o.set("enableanimatedbeatcursor", obj.enableAnimatedBeatCursor);
+            o.set("enableelementhighlighting", obj.enableElementHighlighting);
+            o.set("enableuserinteraction", obj.enableUserInteraction);
+            o.set("scrolloffsetx", obj.scrollOffsetX);
+            o.set("scrolloffsety", obj.scrollOffsetY);
+            o.set("scrollmode", obj.scrollMode);
+            o.set("scrollspeed", obj.scrollSpeed);
             /*@target web*/
-            o.set("nativeBrowserSmoothScroll", obj.nativeBrowserSmoothScroll);
-            o.set("songBookBendDuration", obj.songBookBendDuration);
-            o.set("songBookDipDuration", obj.songBookDipDuration);
+            o.set("nativebrowsersmoothscroll", obj.nativeBrowserSmoothScroll);
+            o.set("songbookbendduration", obj.songBookBendDuration);
+            o.set("songbookdipduration", obj.songBookDipDuration);
             o.set("vibrato", VibratoPlaybackSettingsSerializer.toJson(obj.vibrato));
             o.set("slide", SlidePlaybackSettingsSerializer.toJson(obj.slide));
-            o.set("playTripletFeel", obj.playTripletFeel);
+            o.set("playtripletfeel", obj.playTripletFeel);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -19186,7 +19317,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -19215,17 +19346,17 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
                 return null;
             }
             const o = new Map();
-            o.set("isLinear", obj.isLinear);
+            o.set("islinear", obj.isLinear);
             o.set("type", obj.type);
             o.set("value", obj.value);
-            o.set("ratioPosition", obj.ratioPosition);
+            o.set("ratioposition", obj.ratioPosition);
             o.set("text", obj.text);
             return o;
         }
@@ -19256,7 +19387,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -19285,26 +19416,26 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
                 return null;
             }
             const o = new Map();
-            o.set("alternateEndings", obj.alternateEndings);
-            o.set("keySignature", obj.keySignature);
-            o.set("keySignatureType", obj.keySignatureType);
-            o.set("isDoubleBar", obj.isDoubleBar);
-            o.set("isRepeatStart", obj.isRepeatStart);
-            o.set("repeatCount", obj.repeatCount);
-            o.set("timeSignatureNumerator", obj.timeSignatureNumerator);
-            o.set("timeSignatureDenominator", obj.timeSignatureDenominator);
-            o.set("timeSignatureCommon", obj.timeSignatureCommon);
-            o.set("tripletFeel", obj.tripletFeel);
+            o.set("alternateendings", obj.alternateEndings);
+            o.set("keysignature", obj.keySignature);
+            o.set("keysignaturetype", obj.keySignatureType);
+            o.set("isdoublebar", obj.isDoubleBar);
+            o.set("isrepeatstart", obj.isRepeatStart);
+            o.set("repeatcount", obj.repeatCount);
+            o.set("timesignaturenumerator", obj.timeSignatureNumerator);
+            o.set("timesignaturedenominator", obj.timeSignatureDenominator);
+            o.set("timesignaturecommon", obj.timeSignatureCommon);
+            o.set("tripletfeel", obj.tripletFeel);
             o.set("section", SectionSerializer.toJson(obj.section));
-            o.set("tempoAutomation", AutomationSerializer.toJson(obj.tempoAutomation));
-            {
+            o.set("tempoautomation", AutomationSerializer.toJson(obj.tempoAutomation));
+            if (obj.fermata !== null) {
                 const m = new Map();
                 o.set("fermata", m);
                 for (const [k, v] of obj.fermata) {
@@ -19312,7 +19443,7 @@
                 }
             }
             o.set("start", obj.start);
-            o.set("isAnacrusis", obj.isAnacrusis);
+            o.set("isanacrusis", obj.isAnacrusis);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -19352,7 +19483,7 @@
                     JsonHelper.forEach(v, (v, k) => {
                         const i = new Fermata();
                         FermataSerializer.fromJson(i, v);
-                        obj.fermata.set(parseInt(k), i);
+                        obj.addFermata(parseInt(k), i);
                     });
                     return true;
                 case "start":
@@ -19391,7 +19522,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -19420,53 +19551,51 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
+            var _a;
             if (!obj) {
                 return null;
             }
             const o = new Map();
             o.set("id", obj.id);
             o.set("accentuated", obj.accentuated);
-            o.set("bendType", obj.bendType);
-            o.set("bendStyle", obj.bendStyle);
-            o.set("isContinuedBend", obj.isContinuedBend);
-            o.set("bendPoints", obj.bendPoints.map(i => BendPointSerializer.toJson(i)));
+            o.set("bendtype", obj.bendType);
+            o.set("bendstyle", obj.bendStyle);
+            o.set("iscontinuedbend", obj.isContinuedBend);
+            if (obj.bendPoints !== null) {
+                o.set("bendpoints", (_a = obj.bendPoints) === null || _a === void 0 ? void 0 : _a.map(i => BendPointSerializer.toJson(i)));
+            }
             o.set("fret", obj.fret);
             o.set("string", obj.string);
             o.set("octave", obj.octave);
             o.set("tone", obj.tone);
-            o.set("percussionArticulation", obj.percussionArticulation);
-            o.set("isVisible", obj.isVisible);
-            o.set("isLeftHandTapped", obj.isLeftHandTapped);
-            o.set("isHammerPullOrigin", obj.isHammerPullOrigin);
-            o.set("hammerPullOriginNoteId", obj.hammerPullOriginNoteId);
-            o.set("hammerPullDestinationNoteId", obj.hammerPullDestinationNoteId);
-            o.set("isSlurDestination", obj.isSlurDestination);
-            o.set("slurOriginNoteId", obj.slurOriginNoteId);
-            o.set("slurDestinationNoteId", obj.slurDestinationNoteId);
-            o.set("harmonicType", obj.harmonicType);
-            o.set("harmonicValue", obj.harmonicValue);
-            o.set("isGhost", obj.isGhost);
-            o.set("isLetRing", obj.isLetRing);
-            o.set("isPalmMute", obj.isPalmMute);
-            o.set("isDead", obj.isDead);
-            o.set("isStaccato", obj.isStaccato);
-            o.set("slideInType", obj.slideInType);
-            o.set("slideOutType", obj.slideOutType);
+            o.set("percussionarticulation", obj.percussionArticulation);
+            o.set("isvisible", obj.isVisible);
+            o.set("islefthandtapped", obj.isLeftHandTapped);
+            o.set("ishammerpullorigin", obj.isHammerPullOrigin);
+            o.set("isslurdestination", obj.isSlurDestination);
+            o.set("harmonictype", obj.harmonicType);
+            o.set("harmonicvalue", obj.harmonicValue);
+            o.set("isghost", obj.isGhost);
+            o.set("isletring", obj.isLetRing);
+            o.set("ispalmmute", obj.isPalmMute);
+            o.set("isdead", obj.isDead);
+            o.set("isstaccato", obj.isStaccato);
+            o.set("slideintype", obj.slideInType);
+            o.set("slideouttype", obj.slideOutType);
             o.set("vibrato", obj.vibrato);
-            o.set("tieOriginNoteId", obj.tieOriginNoteId);
-            o.set("tieDestinationNoteId", obj.tieDestinationNoteId);
-            o.set("isTieDestination", obj.isTieDestination);
-            o.set("leftHandFinger", obj.leftHandFinger);
-            o.set("rightHandFinger", obj.rightHandFinger);
-            o.set("isFingering", obj.isFingering);
-            o.set("trillValue", obj.trillValue);
-            o.set("trillSpeed", obj.trillSpeed);
-            o.set("durationPercent", obj.durationPercent);
-            o.set("accidentalMode", obj.accidentalMode);
+            o.set("istiedestination", obj.isTieDestination);
+            o.set("lefthandfinger", obj.leftHandFinger);
+            o.set("righthandfinger", obj.rightHandFinger);
+            o.set("isfingering", obj.isFingering);
+            o.set("trillvalue", obj.trillValue);
+            o.set("trillspeed", obj.trillSpeed);
+            o.set("durationpercent", obj.durationPercent);
+            o.set("accidentalmode", obj.accidentalMode);
             o.set("dynamics", obj.dynamics);
+            obj.toJson(o);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -19487,11 +19616,13 @@
                     obj.isContinuedBend = v;
                     return true;
                 case "bendpoints":
-                    obj.bendPoints = [];
-                    for (const o of v) {
-                        const i = new BendPoint();
-                        BendPointSerializer.fromJson(i, o);
-                        obj.addBendPoint(i);
+                    if (v) {
+                        obj.bendPoints = [];
+                        for (const o of v) {
+                            const i = new BendPoint();
+                            BendPointSerializer.fromJson(i, o);
+                            obj.addBendPoint(i);
+                        }
                     }
                     return true;
                 case "fret":
@@ -19518,21 +19649,9 @@
                 case "ishammerpullorigin":
                     obj.isHammerPullOrigin = v;
                     return true;
-                case "hammerpulloriginnoteid":
-                    obj.hammerPullOriginNoteId = v;
-                    return true;
-                case "hammerpulldestinationnoteid":
-                    obj.hammerPullDestinationNoteId = v;
-                    return true;
                 case "isslurdestination":
                     obj.isSlurDestination = v;
                     return true;
-                case "sluroriginnoteid":
-                    obj.slurOriginNoteId = v;
-                    return true;
-                case "slurdestinationnoteid":
-                    obj.slurDestinationNoteId = v;
-                    return true;
                 case "harmonictype":
                     obj.harmonicType = JsonHelper.parseEnum(v, HarmonicType);
                     return true;
@@ -19563,12 +19682,6 @@
                 case "vibrato":
                     obj.vibrato = JsonHelper.parseEnum(v, VibratoType);
                     return true;
-                case "tieoriginnoteid":
-                    obj.tieOriginNoteId = v;
-                    return true;
-                case "tiedestinationnoteid":
-                    obj.tieDestinationNoteId = v;
-                    return true;
                 case "istiedestination":
                     obj.isTieDestination = v;
                     return true;
@@ -19597,7 +19710,7 @@
                     obj.dynamics = JsonHelper.parseEnum(v, DynamicValue);
                     return true;
             }
-            return false;
+            return obj.setProperty(property, v);
         }
     }
 
@@ -19606,50 +19719,53 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
+            var _a;
             if (!obj) {
                 return null;
             }
             const o = new Map();
             o.set("id", obj.id);
             o.set("notes", obj.notes.map(i => NoteSerializer.toJson(i)));
-            o.set("isEmpty", obj.isEmpty);
-            o.set("whammyStyle", obj.whammyStyle);
+            o.set("isempty", obj.isEmpty);
+            o.set("whammystyle", obj.whammyStyle);
             o.set("ottava", obj.ottava);
-            o.set("isLegatoOrigin", obj.isLegatoOrigin);
+            o.set("islegatoorigin", obj.isLegatoOrigin);
             o.set("duration", obj.duration);
             o.set("automations", obj.automations.map(i => AutomationSerializer.toJson(i)));
             o.set("dots", obj.dots);
-            o.set("fadeIn", obj.fadeIn);
+            o.set("fadein", obj.fadeIn);
             o.set("lyrics", obj.lyrics);
-            o.set("hasRasgueado", obj.hasRasgueado);
+            o.set("hasrasgueado", obj.hasRasgueado);
             o.set("pop", obj.pop);
             o.set("slap", obj.slap);
             o.set("tap", obj.tap);
             o.set("text", obj.text);
-            o.set("brushType", obj.brushType);
-            o.set("brushDuration", obj.brushDuration);
-            o.set("tupletDenominator", obj.tupletDenominator);
-            o.set("tupletNumerator", obj.tupletNumerator);
-            o.set("isContinuedWhammy", obj.isContinuedWhammy);
-            o.set("whammyBarType", obj.whammyBarType);
-            o.set("whammyBarPoints", obj.whammyBarPoints.map(i => BendPointSerializer.toJson(i)));
+            o.set("brushtype", obj.brushType);
+            o.set("brushduration", obj.brushDuration);
+            o.set("tupletdenominator", obj.tupletDenominator);
+            o.set("tupletnumerator", obj.tupletNumerator);
+            o.set("iscontinuedwhammy", obj.isContinuedWhammy);
+            o.set("whammybartype", obj.whammyBarType);
+            if (obj.whammyBarPoints !== null) {
+                o.set("whammybarpoints", (_a = obj.whammyBarPoints) === null || _a === void 0 ? void 0 : _a.map(i => BendPointSerializer.toJson(i)));
+            }
             o.set("vibrato", obj.vibrato);
-            o.set("chordId", obj.chordId);
-            o.set("graceType", obj.graceType);
-            o.set("pickStroke", obj.pickStroke);
-            o.set("tremoloSpeed", obj.tremoloSpeed);
+            o.set("chordid", obj.chordId);
+            o.set("gracetype", obj.graceType);
+            o.set("pickstroke", obj.pickStroke);
+            o.set("tremolospeed", obj.tremoloSpeed);
             o.set("crescendo", obj.crescendo);
-            o.set("displayStart", obj.displayStart);
-            o.set("playbackStart", obj.playbackStart);
-            o.set("displayDuration", obj.displayDuration);
-            o.set("playbackDuration", obj.playbackDuration);
+            o.set("displaystart", obj.displayStart);
+            o.set("playbackstart", obj.playbackStart);
+            o.set("displayduration", obj.displayDuration);
+            o.set("playbackduration", obj.playbackDuration);
             o.set("dynamics", obj.dynamics);
-            o.set("invertBeamDirection", obj.invertBeamDirection);
-            o.set("preferredBeamDirection", obj.preferredBeamDirection);
-            o.set("beamingMode", obj.beamingMode);
+            o.set("invertbeamdirection", obj.invertBeamDirection);
+            o.set("preferredbeamdirection", obj.preferredBeamDirection);
+            o.set("beamingmode", obj.beamingMode);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -19731,11 +19847,13 @@
                     obj.whammyBarType = JsonHelper.parseEnum(v, WhammyType);
                     return true;
                 case "whammybarpoints":
-                    obj.whammyBarPoints = [];
-                    for (const o of v) {
-                        const i = new BendPoint();
-                        BendPointSerializer.fromJson(i, o);
-                        obj.addWhammyBarPoint(i);
+                    if (v) {
+                        obj.whammyBarPoints = [];
+                        for (const o of v) {
+                            const i = new BendPoint();
+                            BendPointSerializer.fromJson(i, o);
+                            obj.addWhammyBarPoint(i);
+                        }
                     }
                     return true;
                 case "vibrato":
@@ -19790,7 +19908,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -19799,7 +19917,7 @@
             const o = new Map();
             o.set("id", obj.id);
             o.set("beats", obj.beats.map(i => BeatSerializer.toJson(i)));
-            o.set("isEmpty", obj.isEmpty);
+            o.set("isempty", obj.isEmpty);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -19828,7 +19946,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -19837,9 +19955,9 @@
             const o = new Map();
             o.set("id", obj.id);
             o.set("clef", obj.clef);
-            o.set("clefOttava", obj.clefOttava);
+            o.set("clefottava", obj.clefOttava);
             o.set("voices", obj.voices.map(i => VoiceSerializer.toJson(i)));
-            o.set("simileMark", obj.simileMark);
+            o.set("similemark", obj.simileMark);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -19874,7 +19992,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -19882,12 +20000,12 @@
             }
             const o = new Map();
             o.set("name", obj.name);
-            o.set("firstFret", obj.firstFret);
+            o.set("firstfret", obj.firstFret);
             o.set("strings", obj.strings);
-            o.set("barreFrets", obj.barreFrets);
-            o.set("showName", obj.showName);
-            o.set("showDiagram", obj.showDiagram);
-            o.set("showFingering", obj.showFingering);
+            o.set("barrefrets", obj.barreFrets);
+            o.set("showname", obj.showName);
+            o.set("showdiagram", obj.showDiagram);
+            o.set("showfingering", obj.showFingering);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -19923,14 +20041,14 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
                 return null;
             }
             const o = new Map();
-            o.set("isStandard", obj.isStandard);
+            o.set("isstandard", obj.isStandard);
             o.set("name", obj.name);
             o.set("tunings", obj.tunings);
             return o;
@@ -19956,7 +20074,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -19964,7 +20082,7 @@
             }
             const o = new Map();
             o.set("bars", obj.bars.map(i => BarSerializer.toJson(i)));
-            {
+            if (obj.chords !== null) {
                 const m = new Map();
                 o.set("chords", m);
                 for (const [k, v] of obj.chords) {
@@ -19972,13 +20090,13 @@
                 }
             }
             o.set("capo", obj.capo);
-            o.set("transpositionPitch", obj.transpositionPitch);
-            o.set("displayTranspositionPitch", obj.displayTranspositionPitch);
-            o.set("stringTuning", TuningSerializer.toJson(obj.stringTuning));
-            o.set("showTablature", obj.showTablature);
-            o.set("showStandardNotation", obj.showStandardNotation);
-            o.set("isPercussion", obj.isPercussion);
-            o.set("standardNotationLineCount", obj.standardNotationLineCount);
+            o.set("transpositionpitch", obj.transpositionPitch);
+            o.set("displaytranspositionpitch", obj.displayTranspositionPitch);
+            o.set("stringtuning", TuningSerializer.toJson(obj.stringTuning));
+            o.set("showtablature", obj.showTablature);
+            o.set("showstandardnotation", obj.showStandardNotation);
+            o.set("ispercussion", obj.isPercussion);
+            o.set("standardnotationlinecount", obj.standardNotationLineCount);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -20034,7 +20152,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -20045,10 +20163,10 @@
             o.set("balance", obj.balance);
             o.set("port", obj.port);
             o.set("program", obj.program);
-            o.set("primaryChannel", obj.primaryChannel);
-            o.set("secondaryChannel", obj.secondaryChannel);
-            o.set("isMute", obj.isMute);
-            o.set("isSolo", obj.isSolo);
+            o.set("primarychannel", obj.primaryChannel);
+            o.set("secondarychannel", obj.secondaryChannel);
+            o.set("ismute", obj.isMute);
+            o.set("issolo", obj.isSolo);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -20087,21 +20205,21 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
                 return null;
             }
             const o = new Map();
-            o.set("elementType", obj.elementType);
-            o.set("staffLine", obj.staffLine);
-            o.set("noteHeadDefault", obj.noteHeadDefault);
-            o.set("noteHeadHalf", obj.noteHeadHalf);
-            o.set("noteHeadWhole", obj.noteHeadWhole);
-            o.set("techniqueSymbol", obj.techniqueSymbol);
-            o.set("techniqueSymbolPlacement", obj.techniqueSymbolPlacement);
-            o.set("outputMidiNumber", obj.outputMidiNumber);
+            o.set("elementtype", obj.elementType);
+            o.set("staffline", obj.staffLine);
+            o.set("noteheaddefault", obj.noteHeadDefault);
+            o.set("noteheadhalf", obj.noteHeadHalf);
+            o.set("noteheadwhole", obj.noteHeadWhole);
+            o.set("techniquesymbol", obj.techniqueSymbol);
+            o.set("techniquesymbolplacement", obj.techniqueSymbolPlacement);
+            o.set("outputmidinumber", obj.outputMidiNumber);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -20140,7 +20258,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -20148,11 +20266,11 @@
             }
             const o = new Map();
             o.set("staves", obj.staves.map(i => StaffSerializer.toJson(i)));
-            o.set("playbackInfo", PlaybackInformationSerializer.toJson(obj.playbackInfo));
+            o.set("playbackinfo", PlaybackInformationSerializer.toJson(obj.playbackInfo));
             o.set("color", Color.toJson(obj.color));
             o.set("name", obj.name);
-            o.set("shortName", obj.shortName);
-            o.set("percussionArticulations", obj.percussionArticulations.map(i => InstrumentArticulationSerializer.toJson(i)));
+            o.set("shortname", obj.shortName);
+            o.set("percussionarticulations", obj.percussionArticulations.map(i => InstrumentArticulationSerializer.toJson(i)));
             return o;
         }
         static setProperty(obj, property, v) {
@@ -20196,14 +20314,14 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
                 return null;
             }
             const o = new Map();
-            o.set("hideDynamics", obj.hideDynamics);
+            o.set("hidedynamics", obj.hideDynamics);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -20221,7 +20339,7 @@
             if (!m) {
                 return;
             }
-            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k.toLowerCase(), v));
+            JsonHelper.forEach(m, (v, k) => this.setProperty(obj, k, v));
         }
         static toJson(obj) {
             if (!obj) {
@@ -20234,13 +20352,13 @@
             o.set("instructions", obj.instructions);
             o.set("music", obj.music);
             o.set("notices", obj.notices);
-            o.set("subTitle", obj.subTitle);
+            o.set("subtitle", obj.subTitle);
             o.set("title", obj.title);
             o.set("words", obj.words);
             o.set("tab", obj.tab);
             o.set("tempo", obj.tempo);
-            o.set("tempoLabel", obj.tempoLabel);
-            o.set("masterBars", obj.masterBars.map(i => MasterBarSerializer.toJson(i)));
+            o.set("tempolabel", obj.tempoLabel);
+            o.set("masterbars", obj.masterBars.map(i => MasterBarSerializer.toJson(i)));
             o.set("tracks", obj.tracks.map(i => TrackSerializer.toJson(i)));
             o.set("stylesheet", RenderStylesheetSerializer.toJson(obj.stylesheet));
             return o;
@@ -20851,6 +20969,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.
              */
@@ -21389,6 +21519,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;
@@ -21421,20 +21552,22 @@
         renderScore(score, trackIndexes) {
             try {
                 this.score = score;
-                let tracks;
-                if (!trackIndexes) {
-                    tracks = score.tracks.slice(0);
-                }
-                else {
-                    tracks = [];
-                    for (let track of trackIndexes) {
-                        if (track >= 0 && track < score.tracks.length) {
-                            tracks.push(score.tracks[track]);
+                let tracks = null;
+                if (score != null && trackIndexes != null) {
+                    if (!trackIndexes) {
+                        tracks = score.tracks.slice(0);
+                    }
+                    else {
+                        tracks = [];
+                        for (let track of trackIndexes) {
+                            if (track >= 0 && track < score.tracks.length) {
+                                tracks.push(score.tracks[track]);
+                            }
                         }
                     }
-                }
-                if (tracks.length === 0 && score.tracks.length > 0) {
-                    tracks.push(score.tracks[0]);
+                    if (tracks.length === 0 && score.tracks.length > 0) {
+                        tracks.push(score.tracks[0]);
+                    }
                 }
                 this.tracks = tracks;
                 this.render();
@@ -21460,27 +21593,49 @@
         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);
                 return;
             }
             this.boundsLookup = new BoundsLookup();
-            if (!this.tracks || this.tracks.length === 0) {
-                return;
-            }
             this.recreateCanvas();
             this.canvas.lineWidth = this.settings.display.scale;
             this.canvas.settings = this.settings;
-            Logger.debug('Rendering', 'Rendering ' + this.tracks.length + ' tracks');
-            for (let i = 0; i < this.tracks.length; i++) {
-                let track = this.tracks[i];
-                Logger.debug('Rendering', 'Track ' + i + ': ' + track.name);
+            if (!this.tracks || this.tracks.length === 0 || !this.score) {
+                Logger.debug('Rendering', 'Clearing rendered tracks because no score or tracks are set');
+                this.preRender.trigger(false);
+                this._renderedTracks = null;
+                this.onRenderFinished();
+                this.postRenderFinished.trigger();
+                Logger.debug('Rendering', 'Clearing finished');
+            }
+            else {
+                Logger.debug('Rendering', 'Rendering ' + this.tracks.length + ' tracks');
+                for (let i = 0; i < this.tracks.length; i++) {
+                    let track = this.tracks[i];
+                    Logger.debug('Rendering', 'Track ' + i + ': ' + track.name);
+                }
+                this.preRender.trigger(false);
+                this.recreateLayout();
+                this.layoutAndRender();
+                Logger.debug('Rendering', 'Rendering finished');
             }
-            this.preRender.trigger(false);
-            this.recreateLayout();
-            this.layoutAndRender();
-            Logger.debug('Rendering', 'Rendering finished');
         }
         resizeRender() {
             if (this.recreateLayout() || this.recreateCanvas() || this._renderedTracks !== this.tracks || !this.tracks) {
@@ -21493,7 +21648,6 @@
                 this.preRender.trigger(true);
                 this.canvas.settings = this.settings;
                 this.layout.resize();
-                this.layout.renderAnnotation();
                 this.onRenderFinished();
                 this.postRenderFinished.trigger();
             }
@@ -21505,7 +21659,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();
@@ -21544,6 +21697,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',
@@ -21571,12 +21730,15 @@
                 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;
                 case 'alphaTab.renderScore':
                     this.updateFontSizes(data.fontSizes);
-                    let score = JsonConverter.jsObjectToScore(data.score, this._renderer.settings);
+                    let score = data.score == null ? null : JsonConverter.jsObjectToScore(data.score, this._renderer.settings);
                     this.renderMultiple(score, data.trackIndexes);
                     break;
                 case 'alphaTab.updateSettings':
@@ -23940,7 +24102,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
@@ -24102,8 +24265,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);
             }
         }
         /**
@@ -25959,6 +26125,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();
@@ -26011,6 +26178,12 @@
                 cmd: 'alphaTab.resizeRender'
             });
         }
+        renderResult(resultId) {
+            this._worker.postMessage({
+                cmd: 'alphaTab.renderResult',
+                resultId: resultId
+            });
+        }
         get width() {
             return this._width;
         }
@@ -26031,6 +26204,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;
@@ -26044,7 +26220,7 @@
             }
         }
         renderScore(score, trackIndexes) {
-            let jsObject = JsonConverter.scoreToJsObject(score);
+            let jsObject = score == null ? null : JsonConverter.scoreToJsObject(score);
             this._worker.postMessage({
                 cmd: 'alphaTab.renderScore',
                 score: jsObject,
@@ -26244,6 +26420,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
      */
@@ -26255,12 +26441,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');
@@ -26303,15 +26489,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();
                     }
                 }
             }
@@ -26440,6 +26645,7 @@
         initialRender() {
             this._api.renderer.preRender.on((_) => {
                 this._totalResultCount = 0;
+                this._resultIdToElementLookup.clear();
                 this._barToElementLookup.clear();
             });
             const initialRender = () => {
@@ -26562,57 +26768,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.
@@ -28840,7 +29057,7 @@
             this.getVoiceContainer(g.beat.voice).addGlyph(g);
         }
         getVoiceContainer(voice) {
-            return this._voiceContainers.get(voice.index);
+            return this._voiceContainers.has(voice.index) ? this._voiceContainers.get(voice.index) : undefined;
         }
         getBeatContainer(beat) {
             var _a, _b;
@@ -32076,6 +32293,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.
      */
@@ -32087,11 +32310,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
@@ -32107,6 +32336,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;
@@ -32165,11 +32416,14 @@
                 let chords = new Map();
                 for (let track of this.renderer.tracks) {
                     for (let staff of track.staves) {
-                        for (const [chordId, chord] of staff.chords) {
-                            if (!chords.has(chordId)) {
-                                if (chord.showDiagram) {
-                                    chords.set(chordId, chord);
-                                    this.chordDiagrams.addChord(chord);
+                        const sc = staff.chords;
+                        if (sc) {
+                            for (const [chordId, chord] of sc) {
+                                if (!chords.has(chordId)) {
+                                    if (chord.showDiagram) {
+                                        chords.set(chordId, chord);
+                                        this.chordDiagrams.addChord(chord);
+                                    }
                                 }
                             }
                         }
@@ -32243,30 +32497,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;
         }
     }
 
@@ -32291,7 +32548,16 @@
         get supportsResize() {
             return false;
         }
-        resize() { }
+        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) {
@@ -32314,7 +32580,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));
@@ -32373,35 +32638,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];
@@ -32442,13 +32711,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);
@@ -32457,20 +32725,27 @@
             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 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);
@@ -32479,7 +32754,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) {
@@ -32487,54 +32763,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 = [
@@ -32548,9 +32826,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;
@@ -32558,51 +32836,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;
-            }
-            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);
+                infoHeight += musicOrWordsHeight;
             }
-            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 {
@@ -32611,7 +32884,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
@@ -32635,11 +32908,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;
                     }
                 }
@@ -32647,12 +32920,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;
@@ -32661,38 +32933,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;
         }
         /**
@@ -32702,7 +32974,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();
@@ -39135,7 +39406,7 @@
                             }
                             else if (c.attributes.has('end') && this._tieStarts.length > 0 && !note.isTieDestination) {
                                 note.isTieDestination = true;
-                                note.tieOriginNoteId = this._tieStarts[0].id;
+                                note.tieOrigin = this._tieStarts[0];
                                 this._tieStarts.splice(0, 1);
                                 this._tieStartIds.delete(note.id);
                             }
@@ -40281,8 +40552,8 @@
     // </auto-generated>
     class VersionInfo {
     }
-    VersionInfo.version = '1.3.0-alpha.136';
-    VersionInfo.date = '2021-11-28T16:51:01.877Z';
+    VersionInfo.version = '1.3.0-alpha.140';
+    VersionInfo.date = '2021-12-29T23:06:43.677Z';
 
     var index$5 = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -41174,95 +41445,98 @@
             const diagramCollectionProperty = properties.addElement('Property');
             diagramCollectionProperty.attributes.set('name', name);
             const diagramCollectionItems = diagramCollectionProperty.addElement('Items');
-            for (const [id, chord] of staff.chords) {
-                const diagramCollectionItem = diagramCollectionItems.addElement('Item');
-                diagramCollectionItem.attributes.set('id', id);
-                diagramCollectionItem.attributes.set('name', chord.name);
-                const diagram = diagramCollectionItem.addElement('Diagram');
-                diagram.attributes.set('stringCount', chord.strings.length.toString());
-                diagram.attributes.set('fretCount', '5');
-                diagram.attributes.set('baseFret', (chord.firstFret - 1).toString());
-                diagram.attributes.set('barStates', chord.strings.map(_ => '1').join(' '));
-                const frets = [];
-                const fretToStrings = new Map();
-                for (let i = 0; i < chord.strings.length; i++) {
-                    let chordFret = chord.strings[i];
-                    if (chordFret !== -1) {
-                        const fretNode = diagram.addElement('Fret');
-                        const chordString = (chord.strings.length - 1 - i);
-                        fretNode.attributes.set('string', chordString.toString());
-                        fretNode.attributes.set('fret', (chordFret - chord.firstFret + 1).toString());
-                        if (!fretToStrings.has(chordFret)) {
-                            fretToStrings.set(chordFret, []);
-                            frets.push(chordFret);
-                        }
-                        fretToStrings.get(chordFret).push(chordString);
-                    }
-                }
-                frets.sort();
-                // try to rebuild the barre frets
-                const fingering = diagram.addElement('Fingering');
-                if (chord.barreFrets.length > 0) {
-                    const fingers = [
-                        Fingers.LittleFinger,
-                        Fingers.AnnularFinger,
-                        Fingers.MiddleFinger,
-                        Fingers.IndexFinger,
-                    ];
-                    for (const fret of frets) {
-                        const fretStrings = fretToStrings.get(fret);
-                        if (fretStrings.length > 1 && chord.barreFrets.indexOf(fret) >= 0) {
-                            const finger = fingers.length > 0 ? fingers.pop() : Fingers.IndexFinger;
-                            for (const fretString of fretStrings) {
-                                const position = fingering.addElement('Position');
-                                switch (finger) {
-                                    case Fingers.LittleFinger:
-                                        position.attributes.set('finger', 'Pinky');
-                                        break;
-                                    case Fingers.AnnularFinger:
-                                        position.attributes.set('finger', 'Ring');
-                                        break;
-                                    case Fingers.MiddleFinger:
-                                        position.attributes.set('finger', 'Middle');
-                                        break;
-                                    case Fingers.IndexFinger:
-                                        position.attributes.set('finger', 'Index');
-                                        break;
+            const sc = staff.chords;
+            if (sc) {
+                for (const [id, chord] of sc) {
+                    const diagramCollectionItem = diagramCollectionItems.addElement('Item');
+                    diagramCollectionItem.attributes.set('id', id);
+                    diagramCollectionItem.attributes.set('name', chord.name);
+                    const diagram = diagramCollectionItem.addElement('Diagram');
+                    diagram.attributes.set('stringCount', chord.strings.length.toString());
+                    diagram.attributes.set('fretCount', '5');
+                    diagram.attributes.set('baseFret', (chord.firstFret - 1).toString());
+                    diagram.attributes.set('barStates', chord.strings.map(_ => '1').join(' '));
+                    const frets = [];
+                    const fretToStrings = new Map();
+                    for (let i = 0; i < chord.strings.length; i++) {
+                        let chordFret = chord.strings[i];
+                        if (chordFret !== -1) {
+                            const fretNode = diagram.addElement('Fret');
+                            const chordString = (chord.strings.length - 1 - i);
+                            fretNode.attributes.set('string', chordString.toString());
+                            fretNode.attributes.set('fret', (chordFret - chord.firstFret + 1).toString());
+                            if (!fretToStrings.has(chordFret)) {
+                                fretToStrings.set(chordFret, []);
+                                frets.push(chordFret);
+                            }
+                            fretToStrings.get(chordFret).push(chordString);
+                        }
+                    }
+                    frets.sort();
+                    // try to rebuild the barre frets
+                    const fingering = diagram.addElement('Fingering');
+                    if (chord.barreFrets.length > 0) {
+                        const fingers = [
+                            Fingers.LittleFinger,
+                            Fingers.AnnularFinger,
+                            Fingers.MiddleFinger,
+                            Fingers.IndexFinger,
+                        ];
+                        for (const fret of frets) {
+                            const fretStrings = fretToStrings.get(fret);
+                            if (fretStrings.length > 1 && chord.barreFrets.indexOf(fret) >= 0) {
+                                const finger = fingers.length > 0 ? fingers.pop() : Fingers.IndexFinger;
+                                for (const fretString of fretStrings) {
+                                    const position = fingering.addElement('Position');
+                                    switch (finger) {
+                                        case Fingers.LittleFinger:
+                                            position.attributes.set('finger', 'Pinky');
+                                            break;
+                                        case Fingers.AnnularFinger:
+                                            position.attributes.set('finger', 'Ring');
+                                            break;
+                                        case Fingers.MiddleFinger:
+                                            position.attributes.set('finger', 'Middle');
+                                            break;
+                                        case Fingers.IndexFinger:
+                                            position.attributes.set('finger', 'Index');
+                                            break;
+                                    }
+                                    position.attributes.set('fret', (fret - chord.firstFret + 1).toString());
+                                    position.attributes.set('string', fretString.toString());
                                 }
-                                position.attributes.set('fret', (fret - chord.firstFret + 1).toString());
-                                position.attributes.set('string', fretString.toString());
                             }
                         }
                     }
+                    const showName = diagram.addElement('Property');
+                    showName.attributes.set('name', 'ShowName');
+                    showName.attributes.set('type', 'bool');
+                    showName.attributes.set('value', chord.showName ? "true" : "false");
+                    const showDiagram = diagram.addElement('Property');
+                    showDiagram.attributes.set('name', 'ShowDiagram');
+                    showDiagram.attributes.set('type', 'bool');
+                    showDiagram.attributes.set('value', chord.showDiagram ? "true" : "false");
+                    const showFingering = diagram.addElement('Property');
+                    showFingering.attributes.set('name', 'ShowFingering');
+                    showFingering.attributes.set('type', 'bool');
+                    showFingering.attributes.set('value', chord.showFingering ? "true" : "false");
+                    // TODO Chord details
+                    const chordNode = diagram.addElement('Chord');
+                    const keyNoteNode = chordNode.addElement('KeyNote');
+                    keyNoteNode.attributes.set('step', 'C');
+                    keyNoteNode.attributes.set('accidental', 'Natural');
+                    const bassNoteNode = chordNode.addElement('BassNote');
+                    bassNoteNode.attributes.set('step', 'C');
+                    bassNoteNode.attributes.set('accidental', 'Natural');
+                    const degree1Node = chordNode.addElement('Degree');
+                    degree1Node.attributes.set('interval', 'Third');
+                    degree1Node.attributes.set('alteration', 'Major');
+                    degree1Node.attributes.set('omitted', 'false');
+                    const degree2Node = chordNode.addElement('Degree');
+                    degree2Node.attributes.set('interval', 'Fifth');
+                    degree2Node.attributes.set('alteration', 'Perfect');
+                    degree2Node.attributes.set('omitted', 'false');
                 }
-                const showName = diagram.addElement('Property');
-                showName.attributes.set('name', 'ShowName');
-                showName.attributes.set('type', 'bool');
-                showName.attributes.set('value', chord.showName ? "true" : "false");
-                const showDiagram = diagram.addElement('Property');
-                showDiagram.attributes.set('name', 'ShowDiagram');
-                showDiagram.attributes.set('type', 'bool');
-                showDiagram.attributes.set('value', chord.showDiagram ? "true" : "false");
-                const showFingering = diagram.addElement('Property');
-                showFingering.attributes.set('name', 'ShowFingering');
-                showFingering.attributes.set('type', 'bool');
-                showFingering.attributes.set('value', chord.showFingering ? "true" : "false");
-                // TODO Chord details
-                const chordNode = diagram.addElement('Chord');
-                const keyNoteNode = chordNode.addElement('KeyNote');
-                keyNoteNode.attributes.set('step', 'C');
-                keyNoteNode.attributes.set('accidental', 'Natural');
-                const bassNoteNode = chordNode.addElement('BassNote');
-                bassNoteNode.attributes.set('step', 'C');
-                bassNoteNode.attributes.set('accidental', 'Natural');
-                const degree1Node = chordNode.addElement('Degree');
-                degree1Node.attributes.set('interval', 'Third');
-                degree1Node.attributes.set('alteration', 'Major');
-                degree1Node.attributes.set('omitted', 'false');
-                const degree2Node = chordNode.addElement('Degree');
-                degree2Node.attributes.set('interval', 'Fifth');
-                degree2Node.attributes.set('alteration', 'Perfect');
-                degree2Node.attributes.set('omitted', 'false');
             }
         }
         writeSimplePropertyNode(parent, propertyName, propertyValueTagName, propertyValue) {
@@ -41465,10 +41739,12 @@
             this.writeFermatas(masterBarNode, masterBar);
         }
         writeFermatas(parent, masterBar) {
-            if (masterBar.fermata.size === 0) {
+            var _a, _b;
+            const fermataCount = ((_b = (_a = masterBar.fermata) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0);
+            if (fermataCount === 0) {
                 return;
             }
-            if (masterBar.fermata.size > 0) {
+            if (fermataCount > 0) {
                 const fermatas = parent.addElement('Fermatas');
                 for (const [offset, fermata] of masterBar.fermata) {
                     this.writeFermata(fermatas, offset, fermata);