@coderline/alphatab 1.3.0-alpha.138 → 1.3.0-alpha.142

package/dist/alphaTab.js

@@ -1,7 +1,7 @@
 /**
- * alphaTab v1.3.0-alpha.138 (develop, build 138)
+ * alphaTab v1.3.0-alpha.142 (develop, build 142)
  * 
- * Copyright © 2021, Daniel Kuschny and Contributors, All rights reserved.
+ * Copyright © 2022, Daniel Kuschny and Contributors, All rights reserved.
  * 
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -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;
+                    }
+                }
             }
-            if (!tieOrigin) {
-                this.isTieDestination = false;
+        }
+        /**
+         * @internal
+         */
+        toJson(o) {
+            // inject linked note ids into JSON
+            if (this.tieDestination !== null) {
+                o.set("tiedestinationnoteid", this.tieDestination.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.tieOrigin !== null) {
+                o.set("tieoriginnoteid", this.tieOrigin.id);
+            }
+            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.
@@ -4468,7 +4585,12 @@
             if (this.masterBars.length !== 0) {
                 bar.previousMasterBar = this.masterBars[this.masterBars.length - 1];
                 bar.previousMasterBar.nextMasterBar = bar;
-                bar.start = bar.previousMasterBar.start + bar.previousMasterBar.calculateDuration();
+                // TODO: this will not work on anacrusis. Correct anacrusis durations are only working
+                // when there are beats with playback positions already computed which requires full finish
+                // chicken-egg problem here. temporarily forcing anacrusis length here to 0
+                bar.start =
+                    bar.previousMasterBar.start +
+                        (bar.previousMasterBar.isAnacrusis ? 0 : bar.previousMasterBar.calculateDuration());
             }
             // if the group is closed only the next upcoming header can
             // reopen the group in case of a repeat alternative, so we
@@ -4485,25 +4607,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 +4691,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 +4746,7 @@
      * This public class stores the midi specific information of a track needed
      * for playback.
      * @json
+     * @json_strict
      */
     class PlaybackInformation {
         constructor() {
@@ -4674,6 +4788,7 @@
     /**
      * This public class represents a predefined string tuning.
      * @json
+     * @json_strict
      */
     class Tuning {
         /**
@@ -4829,6 +4944,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 +4962,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 +5016,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 +5055,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 +5101,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 +5109,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 +5147,7 @@
      * A voice represents a group of beats
      * that can be played during a bar.
      * @json
+     * @json_strict
      */
     class Voice$1 {
         constructor() {
@@ -5057,7 +5188,7 @@
                 this.isEmpty = false;
             }
         }
-        chain(beat) {
+        chain(beat, sharedDataBag) {
             if (!this.bar) {
                 return;
             }
@@ -5075,7 +5206,7 @@
                     beat.nextBeat.previousBeat = beat;
                 }
             }
-            beat.chain();
+            beat.chain(sharedDataBag);
         }
         addGraceBeat(beat) {
             if (this.beats.length === 0) {
@@ -5097,13 +5228,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 +5254,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 +5340,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 +5378,7 @@
         }
     }
     TypeConversions._conversionBuffer = new ArrayBuffer(8);
+    TypeConversions._conversionByteArray = new Uint8Array(TypeConversions._conversionBuffer);
     TypeConversions._dataView = new DataView(TypeConversions._conversionBuffer);
 
     class IOHelper {
@@ -5374,30 +5517,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 +5555,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 +5573,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 +5588,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;
+                }
+                let newBuffer = new Uint8Array(newCapacity);
+                if (this.length > 0) {
+                    newBuffer.set(this._buffer.subarray(0, 0 + this.length), 0);
                 }
-                this.setCapacity(newCapacity);
+                this._buffer = newBuffer;
             }
         }
         readAll() {
@@ -6167,6 +6285,7 @@
             return anyMeta;
         }
         handleStaffMeta() {
+            var _a, _b;
             let syData = this._syData.toLowerCase();
             switch (syData) {
                 case 'capo':
@@ -6210,7 +6329,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 +6880,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 +6912,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 +7155,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 +8909,7 @@
     /**
      * Represents a fermata.
      * @json
+     * @json_strict
      */
     class Fermata {
         constructor() {
@@ -12346,7 +12471,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 +13554,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 +13597,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;
                             }
@@ -14290,7 +14416,7 @@
             this.firstTimeSignatureNumerator = 0;
             this.firstTimeSignatureDenominator = 0;
             this.synthData = [];
-            this.division = 0;
+            this.division = MidiUtils.QuarterTime;
             this.eventIndex = 0;
             this.currentTime = 0;
             this.playbackRange = null;
@@ -14800,13 +14926,12 @@
             const samples = new Float32Array(samplesLeft);
             let samplesPos = 0;
             const sampleBuffer = new Uint8Array(2048);
-            const testBuffer = new Int16Array((sampleBuffer.length / 2) | 0);
             while (samplesLeft > 0) {
                 let samplesToRead = Math.min(samplesLeft, (sampleBuffer.length / 2) | 0);
                 reader.read(sampleBuffer, 0, samplesToRead * 2);
                 for (let i = 0; i < samplesToRead; i++) {
-                    testBuffer[i] = (sampleBuffer[i * 2 + 1] << 8) | sampleBuffer[i * 2];
-                    samples[samplesPos + i] = testBuffer[i] / 32767;
+                    const shortSample = TypeConversions.int32ToInt16((sampleBuffer[i * 2 + 1] << 8) | sampleBuffer[i * 2]);
+                    samples[samplesPos + i] = shortSample / 32767;
                 }
                 samplesLeft -= samplesToRead;
                 samplesPos += samplesToRead;
@@ -17828,8 +17953,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();
@@ -18495,20 +18619,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) {
@@ -18565,23 +18689,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) {
@@ -18655,13 +18779,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;
@@ -18725,8 +18849,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);
@@ -18734,14 +18858,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) {
@@ -18800,8 +18924,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) {
@@ -18832,14 +18956,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) {
@@ -18885,9 +19009,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) {
@@ -18918,24 +19042,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) {
@@ -19197,7 +19321,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) {
@@ -19226,17 +19350,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;
         }
@@ -19267,7 +19391,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) {
@@ -19296,26 +19420,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) {
@@ -19323,7 +19447,7 @@
                 }
             }
             o.set("start", obj.start);
-            o.set("isAnacrusis", obj.isAnacrusis);
+            o.set("isanacrusis", obj.isAnacrusis);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -19363,7 +19487,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":
@@ -19402,7 +19526,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) {
@@ -19431,53 +19555,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) {
@@ -19498,11 +19620,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":
@@ -19529,21 +19653,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;
@@ -19574,12 +19686,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;
@@ -19608,7 +19714,7 @@
                     obj.dynamics = JsonHelper.parseEnum(v, DynamicValue);
                     return true;
             }
-            return false;
+            return obj.setProperty(property, v);
         }
     }
 
@@ -19617,50 +19723,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) {
@@ -19742,11 +19851,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":
@@ -19801,7 +19912,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) {
@@ -19810,7 +19921,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) {
@@ -19839,7 +19950,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) {
@@ -19848,9 +19959,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) {
@@ -19885,7 +19996,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) {
@@ -19893,12 +20004,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) {
@@ -19934,14 +20045,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;
@@ -19967,7 +20078,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) {
@@ -19975,7 +20086,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) {
@@ -19983,13 +20094,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) {
@@ -20045,7 +20156,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) {
@@ -20056,10 +20167,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) {
@@ -20098,21 +20209,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) {
@@ -20151,7 +20262,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) {
@@ -20159,11 +20270,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) {
@@ -20207,14 +20318,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) {
@@ -20232,7 +20343,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) {
@@ -20245,13 +20356,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;
@@ -20862,6 +20973,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.
              */
@@ -21394,12 +21517,16 @@
             this.canvas = null;
             this.score = null;
             this.tracks = null;
+            /**
+             * @internal
+             */
             this.layout = null;
             this.boundsLookup = null;
             this.width = 0;
             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;
@@ -21432,20 +21559,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();
@@ -21471,27 +21600,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) {
@@ -21504,7 +21655,6 @@
                 this.preRender.trigger(true);
                 this.canvas.settings = this.settings;
                 this.layout.resize();
-                this.layout.renderAnnotation();
                 this.onRenderFinished();
                 this.postRenderFinished.trigger();
             }
@@ -21516,7 +21666,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();
@@ -21555,6 +21704,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',
@@ -21582,12 +21737,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':
@@ -23888,6 +24046,7 @@
             this._previousTick = 0;
             this._playerState = PlayerState.Paused;
             this._currentBeat = null;
+            this._currentBarBounds = null;
             this._previousStateForCursor = PlayerState.Paused;
             this._previousCursorCache = null;
             this._lastScroll = 0;
@@ -23951,7 +24110,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
@@ -24113,8 +24273,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);
             }
         }
         /**
@@ -24486,7 +24649,7 @@
             this._playerState = PlayerState.Paused;
             // we need to update our position caches if we render a tablature
             this.renderer.postRenderFinished.on(() => {
-                this.cursorUpdateTick(this._previousTick, false);
+                this.cursorUpdateTick(this._previousTick, false, this._previousTick > 10);
             });
             if (this.player) {
                 this.player.positionChanged.on(e => {
@@ -24513,15 +24676,16 @@
          * updates the cursors to highlight the beat at the specified tick position
          * @param tick
          * @param stop
+         * @param shouldScroll whether we should scroll to the bar (if scrolling is active)
          */
-        cursorUpdateTick(tick, stop) {
+        cursorUpdateTick(tick, stop, shouldScroll = false) {
             let cache = this._tickCache;
             if (cache) {
                 let tracks = this.tracks;
                 if (tracks.length > 0) {
                     let beat = cache.findBeat(tracks, tick, this._currentBeat);
                     if (beat) {
-                        this.cursorUpdateBeat(beat, stop);
+                        this.cursorUpdateBeat(beat, stop, shouldScroll);
                     }
                 }
             }
@@ -24529,7 +24693,7 @@
         /**
          * updates the cursors to highlight the specified beat
          */
-        cursorUpdateBeat(lookupResult, stop) {
+        cursorUpdateBeat(lookupResult, stop, shouldScroll) {
             const beat = lookupResult.currentBeat;
             const nextBeat = lookupResult.nextBeat;
             const duration = lookupResult.duration;
@@ -24544,9 +24708,6 @@
             let previousBeat = this._currentBeat;
             let previousCache = this._previousCursorCache;
             let previousState = this._previousStateForCursor;
-            this._currentBeat = lookupResult;
-            this._previousCursorCache = cache;
-            this._previousStateForCursor = this._playerState;
             if (beat === (previousBeat === null || previousBeat === void 0 ? void 0 : previousBeat.currentBeat) && cache === previousCache && previousState === this._playerState) {
                 return;
             }
@@ -24554,15 +24715,81 @@
             if (!beatBoundings) {
                 return;
             }
+            // only if we really found some bounds we remember the beat and cache we used to
+            // actually show the cursor
+            this._currentBeat = lookupResult;
+            this._previousCursorCache = cache;
+            this._previousStateForCursor = this._playerState;
             this.uiFacade.beginInvoke(() => {
-                this.internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings);
+                this.internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings, shouldScroll);
             });
         }
-        internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings) {
+        /**
+         * Initiates a scroll to the cursor
+         */
+        scrollToCursor() {
+            const barBounds = this._currentBarBounds;
+            if (barBounds) {
+                this.internalScrollToCursor(barBounds);
+            }
+        }
+        internalScrollToCursor(barBoundings) {
+            let scrollElement = this.uiFacade.getScrollContainer();
+            let isVertical = Environment.getLayoutEngineFactory(this.settings.display.layoutMode).vertical;
+            let mode = this.settings.player.scrollMode;
+            if (isVertical) {
+                // when scrolling on the y-axis, we preliminary check if the new beat/bar have
+                // moved on the y-axis
+                let y = barBoundings.realBounds.y + this.settings.player.scrollOffsetY;
+                if (y !== this._lastScroll) {
+                    this._lastScroll = y;
+                    switch (mode) {
+                        case exports.ScrollMode.Continuous:
+                            let elementOffset = this.uiFacade.getOffset(scrollElement, this.container);
+                            this.uiFacade.scrollToY(scrollElement, elementOffset.y + y, this.settings.player.scrollSpeed);
+                            break;
+                        case exports.ScrollMode.OffScreen:
+                            let elementBottom = scrollElement.scrollTop + this.uiFacade.getOffset(null, scrollElement).h;
+                            if (barBoundings.visualBounds.y + barBoundings.visualBounds.h >= elementBottom ||
+                                barBoundings.visualBounds.y < scrollElement.scrollTop) {
+                                let scrollTop = barBoundings.realBounds.y + this.settings.player.scrollOffsetY;
+                                this.uiFacade.scrollToY(scrollElement, scrollTop, this.settings.player.scrollSpeed);
+                            }
+                            break;
+                    }
+                }
+            }
+            else {
+                // when scrolling on the x-axis, we preliminary check if the new bar has
+                // moved on the x-axis
+                let x = barBoundings.visualBounds.x;
+                if (x !== this._lastScroll) {
+                    this._lastScroll = x;
+                    switch (mode) {
+                        case exports.ScrollMode.Continuous:
+                            let scrollLeftContinuous = barBoundings.realBounds.x + this.settings.player.scrollOffsetX;
+                            this._lastScroll = barBoundings.visualBounds.x;
+                            this.uiFacade.scrollToX(scrollElement, scrollLeftContinuous, this.settings.player.scrollSpeed);
+                            break;
+                        case exports.ScrollMode.OffScreen:
+                            let elementRight = scrollElement.scrollLeft + this.uiFacade.getOffset(null, scrollElement).w;
+                            if (barBoundings.visualBounds.x + barBoundings.visualBounds.w >= elementRight ||
+                                barBoundings.visualBounds.x < scrollElement.scrollLeft) {
+                                let scrollLeftOffScreen = barBoundings.realBounds.x + this.settings.player.scrollOffsetX;
+                                this._lastScroll = barBoundings.visualBounds.x;
+                                this.uiFacade.scrollToX(scrollElement, scrollLeftOffScreen, this.settings.player.scrollSpeed);
+                            }
+                            break;
+                    }
+                }
+            }
+        }
+        internalCursorUpdateBeat(beat, nextBeat, duration, stop, beatsToHighlight, cache, beatBoundings, shouldScroll) {
             let barCursor = this._barCursor;
             let beatCursor = this._beatCursor;
             let barBoundings = beatBoundings.barBounds.masterBarBounds;
             let barBounds = barBoundings.visualBounds;
+            this._currentBarBounds = barBoundings;
             barCursor.setBounds(barBounds.x, barBounds.y, barBounds.w, barBounds.h);
             // move beat to start position immediately
             if (this.settings.player.enableAnimatedBeatCursor) {
@@ -24573,90 +24800,45 @@
             if (this.settings.player.enableElementHighlighting) {
                 this.uiFacade.removeHighlights();
             }
-            if (this._playerState === PlayerState.Playing || stop) {
-                duration /= this.playbackSpeed;
-                if (!stop) {
-                    if (this.settings.player.enableElementHighlighting && beatsToHighlight) {
-                        for (let highlight of beatsToHighlight) {
-                            let className = BeatContainerGlyph.getGroupId(highlight);
-                            this.uiFacade.highlightElements(className, beat.voice.bar.index);
-                        }
-                    }
-                    if (this.settings.player.enableAnimatedBeatCursor) {
-                        let nextBeatX = barBoundings.visualBounds.x + barBoundings.visualBounds.w;
-                        // get position of next beat on same stavegroup
-                        if (nextBeat) {
-                            // if we are moving within the same bar or to the next bar
-                            // transition to the next beat, otherwise transition to the end of the bar.
-                            if ((nextBeat.voice.bar.index === beat.voice.bar.index && nextBeat.index > beat.index) ||
-                                nextBeat.voice.bar.index === beat.voice.bar.index + 1) {
-                                let nextBeatBoundings = cache.findBeat(nextBeat);
-                                if (nextBeatBoundings &&
-                                    nextBeatBoundings.barBounds.masterBarBounds.staveGroupBounds ===
-                                        barBoundings.staveGroupBounds) {
-                                    nextBeatX = nextBeatBoundings.visualBounds.x;
-                                }
-                            }
-                        }
-                        // we need to put the transition to an own animation frame
-                        // otherwise the stop animation above is not applied.
-                        this.uiFacade.beginInvoke(() => {
-                            beatCursor.transitionToX(duration, nextBeatX);
-                        });
-                    }
-                }
-                if (!this._beatMouseDown && this.settings.player.scrollMode !== exports.ScrollMode.Off) {
-                    let scrollElement = this.uiFacade.getScrollContainer();
-                    let isVertical = Environment.getLayoutEngineFactory(this.settings.display.layoutMode).vertical;
-                    let mode = this.settings.player.scrollMode;
-                    if (isVertical) {
-                        // when scrolling on the y-axis, we preliminary check if the new beat/bar have
-                        // moved on the y-axis
-                        let y = barBoundings.realBounds.y + this.settings.player.scrollOffsetY;
-                        if (y !== this._lastScroll) {
-                            this._lastScroll = y;
-                            switch (mode) {
-                                case exports.ScrollMode.Continuous:
-                                    let elementOffset = this.uiFacade.getOffset(scrollElement, this.container);
-                                    this.uiFacade.scrollToY(scrollElement, elementOffset.y + y, this.settings.player.scrollSpeed);
-                                    break;
-                                case exports.ScrollMode.OffScreen:
-                                    let elementBottom = scrollElement.scrollTop + this.uiFacade.getOffset(null, scrollElement).h;
-                                    if (barBoundings.visualBounds.y + barBoundings.visualBounds.h >= elementBottom ||
-                                        barBoundings.visualBounds.y < scrollElement.scrollTop) {
-                                        let scrollTop = barBoundings.realBounds.y + this.settings.player.scrollOffsetY;
-                                        this.uiFacade.scrollToY(scrollElement, scrollTop, this.settings.player.scrollSpeed);
-                                    }
-                                    break;
-                            }
-                        }
-                    }
-                    else {
-                        // when scrolling on the x-axis, we preliminary check if the new bar has
-                        // moved on the x-axis
-                        let x = barBoundings.visualBounds.x;
-                        if (x !== this._lastScroll) {
-                            this._lastScroll = x;
-                            switch (mode) {
-                                case exports.ScrollMode.Continuous:
-                                    let scrollLeftContinuous = barBoundings.realBounds.x + this.settings.player.scrollOffsetX;
-                                    this._lastScroll = barBoundings.visualBounds.x;
-                                    this.uiFacade.scrollToX(scrollElement, scrollLeftContinuous, this.settings.player.scrollSpeed);
-                                    break;
-                                case exports.ScrollMode.OffScreen:
-                                    let elementRight = scrollElement.scrollLeft + this.uiFacade.getOffset(null, scrollElement).w;
-                                    if (barBoundings.visualBounds.x + barBoundings.visualBounds.w >= elementRight ||
-                                        barBoundings.visualBounds.x < scrollElement.scrollLeft) {
-                                        let scrollLeftOffScreen = barBoundings.realBounds.x + this.settings.player.scrollOffsetX;
-                                        this._lastScroll = barBoundings.visualBounds.x;
-                                        this.uiFacade.scrollToX(scrollElement, scrollLeftOffScreen, this.settings.player.scrollSpeed);
-                                    }
-                                    break;
+            // actively playing? -> animate cursor and highlight items
+            let shouldNotifyBeatChange = false;
+            if (this._playerState === PlayerState.Playing && !stop) {
+                if (this.settings.player.enableElementHighlighting && beatsToHighlight) {
+                    for (let highlight of beatsToHighlight) {
+                        let className = BeatContainerGlyph.getGroupId(highlight);
+                        this.uiFacade.highlightElements(className, beat.voice.bar.index);
+                    }
+                }
+                if (this.settings.player.enableAnimatedBeatCursor) {
+                    let nextBeatX = barBoundings.visualBounds.x + barBoundings.visualBounds.w;
+                    // get position of next beat on same stavegroup
+                    if (nextBeat) {
+                        // if we are moving within the same bar or to the next bar
+                        // transition to the next beat, otherwise transition to the end of the bar.
+                        if ((nextBeat.voice.bar.index === beat.voice.bar.index && nextBeat.index > beat.index) ||
+                            nextBeat.voice.bar.index === beat.voice.bar.index + 1) {
+                            let nextBeatBoundings = cache.findBeat(nextBeat);
+                            if (nextBeatBoundings &&
+                                nextBeatBoundings.barBounds.masterBarBounds.staveGroupBounds ===
+                                    barBoundings.staveGroupBounds) {
+                                nextBeatX = nextBeatBoundings.visualBounds.x;
                             }
                         }
                     }
+                    // we need to put the transition to an own animation frame
+                    // otherwise the stop animation above is not applied.
+                    this.uiFacade.beginInvoke(() => {
+                        beatCursor.transitionToX(duration / this.playbackSpeed, nextBeatX);
+                    });
                 }
-                // trigger an event for others to indicate which beat/bar is played
+                shouldScroll = !stop;
+                shouldNotifyBeatChange = true;
+            }
+            if (shouldScroll && !this._beatMouseDown && this.settings.player.scrollMode !== exports.ScrollMode.Off) {
+                this.internalScrollToCursor(barBoundings);
+            }
+            // trigger an event for others to indicate which beat/bar is played
+            if (shouldNotifyBeatChange) {
                 this.onPlayedBeatChanged(beat);
             }
         }
@@ -24963,8 +25145,10 @@
             if (this._isDestroyed) {
                 return;
             }
-            this.playerPositionChanged.trigger(e);
-            this.uiFacade.triggerEvent(this.container, 'playerPositionChanged', e);
+            if (this.score !== null && this.tracks.length > 0) {
+                this.playerPositionChanged.trigger(e);
+                this.uiFacade.triggerEvent(this.container, 'playerPositionChanged', e);
+            }
         }
         onMidiEventsPlayed(e) {
             if (this._isDestroyed) {
@@ -25970,6 +26154,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();
@@ -26022,6 +26207,12 @@
                 cmd: 'alphaTab.resizeRender'
             });
         }
+        renderResult(resultId) {
+            this._worker.postMessage({
+                cmd: 'alphaTab.renderResult',
+                resultId: resultId
+            });
+        }
         get width() {
             return this._width;
         }
@@ -26042,6 +26233,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;
@@ -26055,7 +26249,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,
@@ -26255,6 +26449,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
      */
@@ -26266,12 +26470,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');
@@ -26314,15 +26518,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();
                     }
                 }
             }
@@ -26386,6 +26609,7 @@
             canvasElement.style.fontSize = '0';
             canvasElement.style.overflow = 'hidden';
             canvasElement.style.lineHeight = '0';
+            canvasElement.style.position = 'relative';
             return new HtmlElementContainer(canvasElement);
         }
         triggerEvent(container, name, details = null, originalEvent) {
@@ -26451,6 +26675,7 @@
         initialRender() {
             this._api.renderer.preRender.on((_) => {
                 this._totalResultCount = 0;
+                this._resultIdToElementLookup.clear();
                 this._barToElementLookup.clear();
             });
             const initialRender = () => {
@@ -26573,57 +26798,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.
@@ -28851,7 +29087,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;
@@ -31836,7 +32072,6 @@
             this.paintPartial(cx + this.x, cy + this.y, canvas, 0, this.masterBarsRenderers.length);
         }
         paintPartial(cx, cy, canvas, startIndex, count) {
-            this.buildBoundingsLookup(cx, cy);
             for (let i = 0, j = this._allStaves.length; i < j; i++) {
                 this._allStaves[i].paint(cx, cy, canvas, startIndex, count);
             }
@@ -32087,8 +32322,14 @@
         }
     }
 
+    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.
+     * This is the base class for creating new layouting engines for the score renderer.
      */
     class ScoreLayout {
         constructor(renderer) {
@@ -32098,11 +32339,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
@@ -32118,6 +32365,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;
@@ -32176,11 +32445,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);
+                                    }
                                 }
                             }
                         }
@@ -32254,35 +32526,39 @@
             }
             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.totalHeight = y + 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;
         }
     }
 
     class HorizontalScreenLayoutPartialInfo {
         constructor() {
+            this.x = 0;
             this.width = 0;
             this.masterBars = [];
         }
@@ -32302,7 +32578,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) {
@@ -32325,7 +32610,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));
@@ -32343,6 +32627,7 @@
             let countPerPartial = this.renderer.settings.display.barCountPerPartial;
             let partials = [];
             let currentPartial = new HorizontalScreenLayoutPartialInfo();
+            let renderX = 0;
             while (currentBarIndex <= endBarIndex) {
                 let result = this._group.addBars(this.renderer.tracks, currentBarIndex);
                 if (result) {
@@ -32352,6 +32637,8 @@
                         let previousPartial = partials[partials.length - 1];
                         previousPartial.masterBars.push(score.masterBars[currentBarIndex]);
                         previousPartial.width += result.width;
+                        renderX += result.width;
+                        currentPartial.x += renderX;
                     }
                     else {
                         currentPartial.masterBars.push(score.masterBars[currentBarIndex]);
@@ -32359,14 +32646,17 @@
                         // no targetPartial here because previous partials already handled this code
                         if (currentPartial.masterBars.length >= countPerPartial) {
                             if (partials.length === 0) {
-                                currentPartial.width += this._group.x + this._group.accoladeSpacing;
+                                // respect accolade and on first partial
+                                currentPartial.width += this._group.accoladeSpacing + this._pagePadding[0];
                             }
+                            renderX += currentPartial.width;
                             partials.push(currentPartial);
                             Logger.debug(this.name, 'Finished partial from bar ' +
                                 currentPartial.masterBars[0].index +
                                 ' to ' +
                                 currentPartial.masterBars[currentPartial.masterBars.length - 1].index, null);
                             currentPartial = new HorizontalScreenLayoutPartialInfo();
+                            currentPartial.x = renderX;
                         }
                     }
                 }
@@ -32375,7 +32665,7 @@
             // don't miss the last partial if not empty
             if (currentPartial.masterBars.length > 0) {
                 if (partials.length === 0) {
-                    currentPartial.width += this._group.x + this._group.accoladeSpacing;
+                    currentPartial.width += this._group.accoladeSpacing + this._pagePadding[0];
                 }
                 partials.push(currentPartial);
                 Logger.debug(this.name, 'Finished partial from bar ' +
@@ -32384,35 +32674,44 @@
                     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 partial = partials[i];
+                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;
+                // pull to local scope for lambda
+                const partialBarIndex = currentBarIndex;
+                const partialIndex = i;
+                this._group.buildBoundingsLookup(this._group.x, this._group.y);
+                this.registerPartial(e, canvas => {
+                    canvas.color = this.renderer.settings.display.resources.mainGlyphColor;
+                    canvas.textAlign = TextAlign.Left;
+                    let renderX = this._group.getBarX(partial.masterBars[0].index) + this._group.accoladeSpacing;
+                    if (partialIndex === 0) {
+                        renderX -= this._group.x + this._group.accoladeSpacing;
+                    }
+                    canvas.color = this.renderer.settings.display.resources.mainGlyphColor;
+                    canvas.textAlign = TextAlign.Left;
+                    Logger.debug(this.name, 'Rendering partial from bar ' +
+                        partial.masterBars[0].index +
+                        ' to ' +
+                        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];
@@ -32453,13 +32752,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);
@@ -32468,20 +32766,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);
@@ -32490,7 +32795,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) {
@@ -32498,54 +32804,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 = [
@@ -32559,9 +32867,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;
@@ -32569,51 +32877,46 @@
             if (this.scoreInfoGlyphs.has(NotationElement.ScoreMusic)) {
                 let glyph = this.scoreInfoGlyphs.get(NotationElement.ScoreMusic);
                 glyph.x = this.width - this._pagePadding[2];
-                glyph.y = y;
+                glyph.y = infoHeight;
                 glyph.textAlign = TextAlign.Right;
                 musicOrWords = true;
                 musicOrWordsHeight = glyph.font.size * scale;
             }
             if (this.scoreInfoGlyphs.has(NotationElement.ScoreWords)) {
                 let glyph = this.scoreInfoGlyphs.get(NotationElement.ScoreWords);
-                glyph.x = x;
-                glyph.y = y;
+                glyph.x = this._pagePadding[0];
+                glyph.y = infoHeight;
                 glyph.textAlign = TextAlign.Left;
                 musicOrWords = true;
                 musicOrWordsHeight = glyph.font.size * scale;
             }
             if (musicOrWords) {
-                y += musicOrWordsHeight;
+                infoHeight += musicOrWordsHeight;
             }
-            y += 17 * this.scale;
-            let canvas = this.renderer.canvas;
-            canvas.beginRender(this.width, y);
-            canvas.color = res.scoreInfoColor;
-            canvas.textAlign = TextAlign.Center;
-            for (const g of this.scoreInfoGlyphs.values()) {
-                g.paint(0, 0, canvas);
-            }
-            let result = canvas.endRender();
-            let e = new RenderFinishedEventArgs();
+            infoHeight = Math.floor(infoHeight + 17 * this.scale);
             e.width = this.width;
-            e.height = y;
-            e.renderResult = result;
+            e.height = infoHeight;
             e.totalWidth = this.width;
-            e.totalHeight = totalHeight < 0 ? y : totalHeight;
+            e.totalHeight = totalHeight < 0 ? y + e.height : totalHeight;
             e.firstMasterBarIndex = -1;
             e.lastMasterBarIndex = -1;
-            this.renderer.partialRenderFinished.trigger(e);
-            return y;
+            this.registerPartial(e, (canvas) => {
+                canvas.color = res.scoreInfoColor;
+                canvas.textAlign = TextAlign.Center;
+                for (const g of this.scoreInfoGlyphs.values()) {
+                    g.paint(0, 0, canvas);
+                }
+            });
+            return y + infoHeight;
         }
-        resizeAndRenderScore(x, y, oldHeight) {
-            let canvas = this.renderer.canvas;
+        resizeAndRenderScore(y, oldHeight) {
             // if we have a fixed number of bars per row, we only need to refit them.
             if (this.renderer.settings.display.barsPerRow !== -1) {
                 for (let i = 0; i < this._groups.length; i++) {
                     let group = this._groups[i];
                     this.fitGroup(group);
                     group.finalizeGroup();
-                    y += this.paintGroup(group, oldHeight, canvas);
+                    y += this.paintGroup(group, oldHeight);
                 }
             }
             else {
@@ -32622,7 +32925,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
@@ -32646,11 +32949,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;
                     }
                 }
@@ -32658,12 +32961,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;
@@ -32672,38 +32974,39 @@
                 // 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);
+            group.buildBoundingsLookup(0, 0);
+            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;
         }
         /**
@@ -32713,7 +33016,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();
@@ -39146,7 +39448,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);
                             }
@@ -40292,8 +40594,8 @@
     // </auto-generated>
     class VersionInfo {
     }
-    VersionInfo.version = '1.3.0-alpha.138';
-    VersionInfo.date = '2021-12-29T15:54:57.422Z';
+    VersionInfo.version = '1.3.0-alpha.142';
+    VersionInfo.date = '2022-01-15T17:24:56.552Z';
 
     var index$5 = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -41185,95 +41487,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) {
@@ -41476,10 +41781,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);