@coderline/alphatab 1.4.0-alpha.1313 → 1.4.0-alpha.1322

package/dist/alphaTab.core.mjs

@@ -1,5 +1,5 @@
 /**
- * alphaTab v1.4.0-alpha.1313 (develop, build 1313)
+ * alphaTab v1.4.0-alpha.1322 (develop, build 1322)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -2137,6 +2137,7 @@ var PickStroke;
 var MusicFontSymbol;
 (function (MusicFontSymbol) {
     MusicFontSymbol[MusicFontSymbol["None"] = -1] = "None";
+    MusicFontSymbol[MusicFontSymbol["Space"] = 32] = "Space";
     MusicFontSymbol[MusicFontSymbol["Brace"] = 57344] = "Brace";
     MusicFontSymbol[MusicFontSymbol["BracketTop"] = 57347] = "BracketTop";
     MusicFontSymbol[MusicFontSymbol["BracketBottom"] = 57348] = "BracketBottom";
@@ -2186,6 +2187,17 @@ var MusicFontSymbol;
     MusicFontSymbol[MusicFontSymbol["NoteheadSlashWhiteHalf"] = 57603] = "NoteheadSlashWhiteHalf";
     MusicFontSymbol[MusicFontSymbol["NoteQuarterUp"] = 57813] = "NoteQuarterUp";
     MusicFontSymbol[MusicFontSymbol["NoteEighthUp"] = 57815] = "NoteEighthUp";
+    MusicFontSymbol[MusicFontSymbol["TextBlackNoteLongStem"] = 57841] = "TextBlackNoteLongStem";
+    MusicFontSymbol[MusicFontSymbol["TextBlackNoteFrac8thLongStem"] = 57843] = "TextBlackNoteFrac8thLongStem";
+    MusicFontSymbol[MusicFontSymbol["TextBlackNoteFrac16thLongStem"] = 57845] = "TextBlackNoteFrac16thLongStem";
+    MusicFontSymbol[MusicFontSymbol["TextBlackNoteFrac32ndLongStem"] = 57846] = "TextBlackNoteFrac32ndLongStem";
+    MusicFontSymbol[MusicFontSymbol["TextCont8thBeamLongStem"] = 57848] = "TextCont8thBeamLongStem";
+    MusicFontSymbol[MusicFontSymbol["TextCont16thBeamLongStem"] = 57850] = "TextCont16thBeamLongStem";
+    MusicFontSymbol[MusicFontSymbol["TextCont32ndBeamLongStem"] = 57851] = "TextCont32ndBeamLongStem";
+    MusicFontSymbol[MusicFontSymbol["TextAugmentationDot"] = 57852] = "TextAugmentationDot";
+    MusicFontSymbol[MusicFontSymbol["TextTupletBracketStartLongStem"] = 57857] = "TextTupletBracketStartLongStem";
+    MusicFontSymbol[MusicFontSymbol["TextTuplet3LongStem"] = 57858] = "TextTuplet3LongStem";
+    MusicFontSymbol[MusicFontSymbol["TextTupletBracketEndLongStem"] = 57859] = "TextTupletBracketEndLongStem";
     MusicFontSymbol[MusicFontSymbol["Tremolo3"] = 57890] = "Tremolo3";
     MusicFontSymbol[MusicFontSymbol["Tremolo2"] = 57889] = "Tremolo2";
     MusicFontSymbol[MusicFontSymbol["Tremolo1"] = 57888] = "Tremolo1";
@@ -23047,7 +23059,7 @@ class VorbisResidue0 {
                             const idx = partWordCache[ch][entryIdx][dimensionIdx];
                             if ((this._cascade[idx] & (1 << stage)) != 0) {
                                 const book = this._books[idx][stage];
-                                if (book != null) {
+                                if (book) {
                                     if (this.writeVectors(book, packet, buffer, ch, offset, this._partitionSize)) {
                                         // bad packet...  exit now and try to use what we already have
                                         partitionIdx = partitionCount;
@@ -24671,16 +24683,16 @@ class Envelope {
         // EG times need to be converted from timecents to seconds.
         // Pin very short EG segments.  Timecents don't get to zero, and our EG is
         // happier with zero values.
-        this.delay = this.delay < -11950.0 ? 0.0 : SynthHelper.timecents2Secs(this.delay);
-        this.attack = this.attack < -11950.0 ? 0.0 : SynthHelper.timecents2Secs(this.attack);
-        this.release = this.release < -11950.0 ? 0.0 : SynthHelper.timecents2Secs(this.release);
+        this.delay = this.delay < -11950 ? 0.0 : SynthHelper.timecents2Secs(this.delay);
+        this.attack = this.attack < -11950 ? 0.0 : SynthHelper.timecents2Secs(this.attack);
+        this.release = this.release < -11950 ? 0.0 : SynthHelper.timecents2Secs(this.release);
         // If we have dynamic hold or decay times depending on key number we need
         // to keep the values in timecents so we can calculate it during startNote
         if (this.keynumToHold === 0) {
-            this.hold = this.hold < -11950.0 ? 0.0 : SynthHelper.timecents2Secs(this.hold);
+            this.hold = this.hold < -11950 ? 0.0 : SynthHelper.timecents2Secs(this.hold);
         }
         if (this.keynumToDecay === 0) {
-            this.decay = this.decay < -11950.0 ? 0.0 : SynthHelper.timecents2Secs(this.decay);
+            this.decay = this.decay < -11950 ? 0.0 : SynthHelper.timecents2Secs(this.decay);
         }
         if (this.sustain < 0.0) {
             this.sustain = 0.0;
@@ -24869,19 +24881,19 @@ class Region {
         this.pitchKeyTrack = 100;
         this.pitchKeyCenter = -1;
         // SF2 defaults in timecents.
-        this.ampEnv.delay = -12000.0;
-        this.ampEnv.attack = -12000.0;
-        this.ampEnv.hold = -12000.0;
-        this.ampEnv.decay = -12000.0;
-        this.ampEnv.release = -12000.0;
-        this.modEnv.delay = -12000.0;
-        this.modEnv.attack = -12000.0;
-        this.modEnv.hold = -12000.0;
-        this.modEnv.decay = -12000.0;
-        this.modEnv.release = -12000.0;
+        this.ampEnv.delay = -12e3;
+        this.ampEnv.attack = -12e3;
+        this.ampEnv.hold = -12e3;
+        this.ampEnv.decay = -12e3;
+        this.ampEnv.release = -12e3;
+        this.modEnv.delay = -12e3;
+        this.modEnv.attack = -12e3;
+        this.modEnv.hold = -12e3;
+        this.modEnv.decay = -12e3;
+        this.modEnv.release = -12e3;
         this.initialFilterFc = 13500;
-        this.delayModLFO = -12000.0;
-        this.delayVibLFO = -12000.0;
+        this.delayModLFO = -12e3;
+        this.delayVibLFO = -12e3;
     }
     operator(genOper, amount) {
         switch (genOper) {
@@ -25125,7 +25137,7 @@ class VoiceEnvelope {
                             }
                         }
                         else {
-                            this.slope = -1.0 / this.samplesUntilNextSegment;
+                            this.slope = -1 / this.samplesUntilNextSegment;
                             this.samplesUntilNextSegment =
                                 (this.parameters.decay * (1.0 - this.parameters.sustain) * outSampleRate) | 0;
                             this.segmentIsExponential = false;
@@ -25173,12 +25185,12 @@ class VoiceEnvelope {
         if (this.parameters.keynumToHold > 0) {
             this.parameters.hold += this.parameters.keynumToHold * (60.0 - midiNoteNumber);
             this.parameters.hold =
-                this.parameters.hold < -10000.0 ? 0.0 : SynthHelper.timecents2Secs(this.parameters.hold);
+                this.parameters.hold < -1e4 ? 0.0 : SynthHelper.timecents2Secs(this.parameters.hold);
         }
         if (this.parameters.keynumToDecay > 0) {
             this.parameters.decay += this.parameters.keynumToDecay * (60.0 - midiNoteNumber);
             this.parameters.decay =
-                this.parameters.decay < -10000.0 ? 0.0 : SynthHelper.timecents2Secs(this.parameters.decay);
+                this.parameters.decay < -1e4 ? 0.0 : SynthHelper.timecents2Secs(this.parameters.decay);
         }
         this.midiVelocity = midiVelocity | 0;
         this.isAmpEnv = isAmpEnv;
@@ -25226,9 +25238,9 @@ class VoiceLfo {
             this.delta = -this.delta;
             this.level = 2.0 - this.level;
         }
-        else if (this.level < -1.0) {
+        else if (this.level < -1) {
             this.delta = -this.delta;
-            this.level = -2.0 - this.level;
+            this.level = -2 - this.level;
         }
     }
 }
@@ -26829,11 +26841,11 @@ class TinySoundFont {
                                     zoneRegion.modEnv.envToSecs(false);
                                     // LFO times need to be converted from timecents to seconds.
                                     zoneRegion.delayModLFO =
-                                        zoneRegion.delayModLFO < -11950.0
+                                        zoneRegion.delayModLFO < -11950
                                             ? 0.0
                                             : SynthHelper.timecents2Secs(zoneRegion.delayModLFO);
                                     zoneRegion.delayVibLFO =
-                                        zoneRegion.delayVibLFO < -11950.0
+                                        zoneRegion.delayVibLFO < -11950
                                             ? 0.0
                                             : SynthHelper.timecents2Secs(zoneRegion.delayVibLFO);
                                     // Pin values to their ranges.
@@ -27970,6 +27982,11 @@ class BarBounds {
  */
 class BeatBounds {
     constructor() {
+        /**
+         * Gets or sets x-position where the timely center of the notes for this beat is.
+         * This is where the cursor should be at the time when this beat is played.
+         */
+        this.onNotesX = 0;
         /**
          * Gets or sets the individual note positions of this beat (if {@link CoreSettings.includeNoteBounds} was set to true).
          */
@@ -28223,6 +28240,7 @@ class BoundsLookup {
                         let bb = {};
                         bb.visualBounds = this.boundsToJson(beat.visualBounds);
                         bb.realBounds = this.boundsToJson(beat.realBounds);
+                        bb.onNotesX = beat.onNotesX;
                         let bbd = bb;
                         bbd.beatIndex = beat.beat.index;
                         bbd.voiceIndex = beat.beat.voice.index;
@@ -28277,6 +28295,7 @@ class BoundsLookup {
                         let bb = new BeatBounds();
                         bb.visualBounds = BoundsLookup.boundsFromJson(beat.visualBounds);
                         bb.realBounds = BoundsLookup.boundsFromJson(beat.realBounds);
+                        bb.onNotesX = beat.onNotesX;
                         let bd = beat;
                         bb.beat =
                             score.tracks[bd.trackIndex].staves[bd.staffIndex].bars[bd.barIndex].voices[bd.voiceIndex].beats[bd.beatIndex];
@@ -31849,39 +31868,31 @@ class BeatContainerGlyph extends Glyph {
     }
     registerLayoutingInfo(layoutings) {
         let preBeatStretch = this.preNotes.computedWidth + this.onNotes.centerX;
-        if (this.beat.graceGroup && !this.beat.graceGroup.isComplete) {
-            preBeatStretch += BeatContainerGlyph.GraceBeatPadding;
-        }
         let postBeatStretch = this.onNotes.computedWidth - this.onNotes.centerX;
         // make space for flag
         const helper = this.renderer.helpers.getBeamingHelperForBeat(this.beat);
-        if ((helper && this.drawBeamHelperAsFlags(helper)) || this.beat.graceType !== GraceType.None) {
-            postBeatStretch +=
-                FlagGlyph.FlagWidth *
-                    (this.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1);
+        if (this.beat.graceType !== GraceType.None) {
+            // flagged grace
+            if (this.beat.graceGroup.beats.length === 1) {
+                postBeatStretch += FlagGlyph.FlagWidth * NoteHeadGlyph.GraceScale;
+            }
+            // grace with bars, some space for bar unless last
+            else if (this.beat.graceIndex < this.beat.graceGroup.beats.length - 1) {
+                postBeatStretch += 7;
+            }
+            else {
+                postBeatStretch += BeatContainerGlyph.GraceBeatPadding;
+            }
+        }
+        else if (helper && this.drawBeamHelperAsFlags(helper)) {
+            postBeatStretch += FlagGlyph.FlagWidth;
         }
         for (const tie of this.ties) {
             postBeatStretch += tie.width;
         }
-        // Add some further spacing to grace notes
-        if (this.beat.graceType !== GraceType.None) {
-            postBeatStretch += BeatContainerGlyph.GraceBeatPadding;
-        }
         layoutings.addBeatSpring(this.beat, preBeatStretch, postBeatStretch);
-        // store sizes for special renderers like the EffectBarRenderer
-        layoutings.setPreBeatSize(this.beat, this.preNotes.computedWidth);
-        layoutings.setOnBeatSize(this.beat, this.onNotes.computedWidth);
-        layoutings.setBeatCenterX(this.beat, this.onNotes.centerX);
     }
     applyLayoutingInfo(info) {
-        let offset = info.getBeatCenterX(this.beat) - this.onNotes.centerX;
-        if (this.beat.graceGroup && !this.beat.graceGroup.isComplete) {
-            offset += BeatContainerGlyph.GraceBeatPadding;
-        }
-        this.preNotes.x = offset;
-        this.preNotes.width = info.getPreBeatSize(this.beat);
-        this.onNotes.width = info.getOnBeatSize(this.beat);
-        this.onNotes.x = this.preNotes.x + this.preNotes.width;
         this.onNotes.updateBeamingHelper();
         this.updateWidth();
     }
@@ -31943,11 +31954,6 @@ class BeatContainerGlyph extends Glyph {
         if (this.beat.voice.isEmpty) {
             return;
         }
-        let isEmptyGlyph = this.preNotes.isEmpty && this.onNotes.isEmpty && this.ties.length === 0;
-        if (isEmptyGlyph) {
-            return;
-        }
-        canvas.beginGroup(BeatContainerGlyph.getGroupId(this.beat));
         // var c = canvas.color;
         // var ta = canvas.textAlign;
         // canvas.color = new Color(255, 0, 0);
@@ -31966,21 +31972,25 @@ class BeatContainerGlyph extends Glyph {
         // canvas.font = new Font("Arial", 10);
         // canvas.color = new Color(0, 0, 0);
         // canvas.fillText(this.beat.voice.index + ":" + this.beat.index, cx + this.x, cy + this.y + 15 * this.beat.voice.index);
+        // const c = canvas.color;
         // if (this.beat.voice.index === 0) {
+        //     canvas.color = new Color(0, 0, 200, 100);
+        //     canvas.strokeRect(cx + this.x, cy + this.y, this.width, 10);
         //     canvas.color = new Color(200, 0, 0, 100);
-        //     canvas.strokeRect(cx + this.x, cy + this.y + this.preNotes.y + 30, this.width, 10);
+        //     canvas.strokeRect(cx + this.x + this.preNotes.x, cy + this.y + 10, this.preNotes.width, 10);
+        //     canvas.color = new Color(0, 200, 0, 100);
+        //     canvas.strokeRect(cx + this.x + this.onNotes.x, cy + this.y + 10, this.onNotes.width, 10);
+        //     canvas.color = new Color(0, 200, 200, 100);
+        //     canvas.strokeRect(cx + this.x  + this.onNotes.x + this.onNotes.centerX, cy, 1, this.renderer.height);
         // }
+        // canvas.color = c;
+        let isEmptyGlyph = this.preNotes.isEmpty && this.onNotes.isEmpty && this.ties.length === 0;
+        if (isEmptyGlyph) {
+            return;
+        }
+        canvas.beginGroup(BeatContainerGlyph.getGroupId(this.beat));
         this.preNotes.paint(cx + this.x, cy + this.y, canvas);
-        // if (this.beat.voice.index === 0) {
-        //     canvas.color = new Color(200, 0, 0, 100);
-        //     canvas.strokeRect(cx + this.x + this.preNotes.x, cy + this.y + this.preNotes.y, this.preNotes.width, 10);
-        // }
         this.onNotes.paint(cx + this.x, cy + this.y, canvas);
-        // if (this.beat.voice.index === 0) {
-        //     canvas.color = new Color(0, 200, 0, 100);
-        //     canvas.strokeRect(cx + this.x + this.onNotes.x, cy + this.y + this.onNotes.y - 10, this.onNotes.width, 10);
-        // }
-        // paint the ties relative to the whole staff,
         // reason: we have possibly multiple staves involved and need to calculate the correct positions.
         let staffX = cx - this.voiceContainer.x - this.renderer.x;
         let staffY = cy - this.voiceContainer.y - this.renderer.y;
@@ -31994,19 +32004,55 @@ class BeatContainerGlyph extends Glyph {
     buildBoundingsLookup(barBounds, cx, cy, isEmptyBar) {
         let beatBoundings = new BeatBounds();
         beatBoundings.beat = this.beat;
-        beatBoundings.visualBounds = new Bounds();
-        beatBoundings.visualBounds.x = cx + this.x + this.onNotes.x;
-        beatBoundings.visualBounds.y = barBounds.visualBounds.y;
-        beatBoundings.visualBounds.w = this.onNotes.width;
-        beatBoundings.visualBounds.h = barBounds.visualBounds.h;
-        beatBoundings.realBounds = new Bounds();
-        beatBoundings.realBounds.x = cx + this.x;
-        beatBoundings.realBounds.y = barBounds.realBounds.y;
-        beatBoundings.realBounds.w = this.width;
-        beatBoundings.realBounds.h = barBounds.realBounds.h;
-        if (isEmptyBar) {
+        if (this.beat.isEmpty) {
+            beatBoundings.visualBounds = new Bounds();
             beatBoundings.visualBounds.x = cx + this.x;
-            beatBoundings.realBounds.x = beatBoundings.visualBounds.x;
+            beatBoundings.visualBounds.y = barBounds.visualBounds.y;
+            beatBoundings.visualBounds.w = this.width;
+            beatBoundings.visualBounds.h = barBounds.visualBounds.h;
+            beatBoundings.realBounds = new Bounds();
+            beatBoundings.realBounds.x = cx + this.x;
+            beatBoundings.realBounds.y = barBounds.realBounds.y;
+            beatBoundings.realBounds.w = this.width;
+            beatBoundings.realBounds.h = barBounds.realBounds.h;
+            beatBoundings.onNotesX = cx + this.x + this.onNotes.centerX;
+        }
+        else {
+            beatBoundings.visualBounds = new Bounds();
+            beatBoundings.visualBounds.x = cx + this.x;
+            if (!this.preNotes.isEmpty) {
+                beatBoundings.visualBounds.x = cx + this.x + this.preNotes.x;
+            }
+            else if (!this.onNotes.isEmpty) {
+                beatBoundings.visualBounds.x = cx + this.x + this.onNotes.x;
+            }
+            else {
+                beatBoundings.visualBounds.x = cx + this.x;
+            }
+            let visualEndX = 0;
+            if (!this.onNotes.isEmpty) {
+                visualEndX = cx + this.x + this.onNotes.x + this.onNotes.width;
+            }
+            else if (!this.preNotes.isEmpty) {
+                visualEndX = cx + this.x + this.preNotes.x + this.preNotes.width;
+            }
+            else {
+                visualEndX = cx + this.x + this.width;
+            }
+            beatBoundings.visualBounds.w = visualEndX - beatBoundings.visualBounds.x;
+            const helper = this.renderer.helpers.getBeamingHelperForBeat(this.beat);
+            if ((helper && this.drawBeamHelperAsFlags(helper)) || this.beat.graceType !== GraceType.None) {
+                beatBoundings.visualBounds.w +=
+                    FlagGlyph.FlagWidth * (this.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1);
+            }
+            beatBoundings.visualBounds.y = barBounds.visualBounds.y;
+            beatBoundings.visualBounds.h = barBounds.visualBounds.h;
+            beatBoundings.realBounds = new Bounds();
+            beatBoundings.realBounds.x = cx + this.x;
+            beatBoundings.realBounds.y = barBounds.realBounds.y;
+            beatBoundings.realBounds.w = this.width;
+            beatBoundings.realBounds.h = barBounds.realBounds.h;
+            beatBoundings.onNotesX = cx + this.x + this.onNotes.x + this.onNotes.centerX;
         }
         barBounds.addBeat(beatBoundings);
         if (this.renderer.settings.core.includeNoteBounds) {
@@ -32910,7 +32956,7 @@ class AlphaTabApiBase {
             if (this.settings.player.enableAnimatedBeatCursor) {
                 beatCursor.stopAnimation();
             }
-            beatCursor.setBounds(beatBoundings.visualBounds.x, barBounds.y, 1, barBounds.h);
+            beatCursor.setBounds(beatBoundings.onNotesX, barBounds.y, 1, barBounds.h);
         }
         // if playing, animate the cursor to the next beat
         if (this.settings.player.enableElementHighlighting) {
@@ -32934,7 +32980,7 @@ class AlphaTabApiBase {
                     let nextBeatBoundings = cache.findBeat(nextBeat);
                     if (nextBeatBoundings &&
                         nextBeatBoundings.barBounds.masterBarBounds.staffSystemBounds === barBoundings.staffSystemBounds) {
-                        nextBeatX = nextBeatBoundings.visualBounds.x;
+                        nextBeatX = nextBeatBoundings.onNotesX;
                     }
                 }
                 // we need to put the transition to an own animation frame
@@ -36187,7 +36233,6 @@ class VoiceContainerGlyph extends GlyphGroup {
         }
     }
     registerLayoutingInfo(info) {
-        info.updateVoiceSize(this.width);
         let beatGlyphs = this.beatGlyphs;
         for (let b of beatGlyphs) {
             b.registerLayoutingInfo(info);
@@ -36231,8 +36276,8 @@ VoiceContainerGlyph.KeySizeBeat = 'Beat';
 
 class BeatLines {
     constructor() {
-        this.maxLine = -1000;
-        this.minLine = -1000;
+        this.maxLine = -1e3;
+        this.minLine = -1e3;
     }
 }
 /**
@@ -36259,11 +36304,11 @@ class AccidentalHelper {
         /**
          * The line of the highest note added to this helper.
          */
-        this.maxLine = -1000;
+        this.maxLine = -1e3;
         /**
          * The line of the lowest note added to this helper.
          */
-        this.minLine = -1000;
+        this.minLine = -1e3;
         this._barRenderer = barRenderer;
         this._bar = barRenderer.bar;
     }
@@ -36469,11 +36514,11 @@ class AccidentalHelper {
         else {
             this._appliedScoreLinesByValue.set(noteValue, line);
         }
-        if (this.minLine === -1000 || this.minLine < line) {
+        if (this.minLine === -1e3 || this.minLine < line) {
             this.minLine = line;
             this.minLineBeat = relatedBeat;
         }
-        if (this.maxLine === -1000 || this.maxLine > line) {
+        if (this.maxLine === -1e3 || this.maxLine > line) {
             this.maxLine = line;
             this.maxLineBeat = relatedBeat;
         }
@@ -36491,10 +36536,10 @@ class AccidentalHelper {
             lines = new BeatLines();
             this._beatLines.set(relatedBeat.id, lines);
         }
-        if (lines.minLine === -1000 || line < lines.minLine) {
+        if (lines.minLine === -1e3 || line < lines.minLine) {
             lines.minLine = line;
         }
-        if (lines.minLine === -1000 || line > lines.maxLine) {
+        if (lines.minLine === -1e3 || line > lines.maxLine) {
             lines.maxLine = line;
         }
     }
@@ -37017,14 +37062,14 @@ class ReservedLayoutAreaSlot {
 }
 class ReservedLayoutArea {
     constructor(beat) {
-        this.topY = -1000;
-        this.bottomY = -1000;
+        this.topY = -1e3;
+        this.bottomY = -1e3;
         this.slots = [];
         this.beat = beat;
     }
     addSlot(topY, bottomY) {
         this.slots.push(new ReservedLayoutAreaSlot(topY, bottomY));
-        if (this.topY === -1000) {
+        if (this.topY === -1e3) {
             this.topY = topY;
             this.bottomY = bottomY;
         }
@@ -37046,10 +37091,10 @@ class BarCollisionHelper {
         this.restDurationsByDisplayTime = new Map();
     }
     getBeatMinMaxY() {
-        let minY = -1000;
-        let maxY = -1000;
+        let minY = -1e3;
+        let maxY = -1e3;
         for (const v of this.reservedLayoutAreasByDisplayTime.values()) {
-            if (minY === -1000) {
+            if (minY === -1e3) {
                 minY = v.topY;
                 maxY = v.bottomY;
             }
@@ -37062,7 +37107,7 @@ class BarCollisionHelper {
                 }
             }
         }
-        if (minY === -1000) {
+        if (minY === -1e3) {
             return [0, 0];
         }
         return [minY, maxY];
@@ -37727,12 +37772,8 @@ class BarLayoutingInfo {
          * an internal version number that increments whenever a change was made.
          */
         this.version = 0;
-        this.preBeatSizes = new Map();
-        this.onBeatSizes = new Map();
-        this.onBeatCenterX = new Map();
         this.preBeatSize = 0;
         this.postBeatSize = 0;
-        this.voiceSize = 0;
         this.minStretchForce = 0;
         this.totalSpringConstant = 0;
         this.incompleteGraceRods = new Map();
@@ -37740,51 +37781,37 @@ class BarLayoutingInfo {
         this.springs = new Map();
         this.height = 0;
     }
-    updateVoiceSize(size) {
-        if (size > this.voiceSize) {
-            this.voiceSize = size;
-            this.version++;
-        }
-    }
-    setPreBeatSize(beat, size) {
-        if (!this.preBeatSizes.has(beat.id) || this.preBeatSizes.get(beat.id) < size) {
-            this.preBeatSizes.set(beat.id, size);
-            this.version++;
+    updateMinStretchForce(force) {
+        if (this.minStretchForce < force) {
+            this.minStretchForce = force;
         }
     }
     getPreBeatSize(beat) {
-        if (this.preBeatSizes.has(beat.id)) {
-            return this.preBeatSizes.get(beat.id);
-        }
-        return 0;
-    }
-    setOnBeatSize(beat, size) {
-        if (!this.onBeatSizes.has(beat.id) || this.onBeatSizes.get(beat.id) < size) {
-            this.onBeatSizes.set(beat.id, size);
-            this.version++;
-        }
-    }
-    getOnBeatSize(beat) {
-        if (this.onBeatSizes.has(beat.id)) {
-            return this.onBeatSizes.get(beat.id);
+        if (beat.graceType !== GraceType.None) {
+            const groupId = beat.graceGroup.id;
+            const graceRod = this.allGraceRods.get(groupId)[beat.graceIndex];
+            return graceRod.preBeatWidth;
         }
-        return 0;
-    }
-    getBeatCenterX(beat) {
-        if (this.onBeatCenterX.has(beat.id)) {
-            return this.onBeatCenterX.get(beat.id);
+        else {
+            const start = beat.absoluteDisplayStart;
+            if (!this.springs.has(start)) {
+                return 0;
+            }
+            return this.springs.get(start).preBeatWidth;
         }
-        return 0;
     }
-    setBeatCenterX(beat, x) {
-        if (!this.onBeatCenterX.has(beat.id) || this.onBeatCenterX.get(beat.id) < x) {
-            this.onBeatCenterX.set(beat.id, x);
-            this.version++;
+    getPostBeatSize(beat) {
+        if (beat.graceType !== GraceType.None) {
+            const groupId = beat.graceGroup.id;
+            const graceRod = this.allGraceRods.get(groupId)[beat.graceIndex];
+            return graceRod.postSpringWidth;
         }
-    }
-    updateMinStretchForce(force) {
-        if (this.minStretchForce < force) {
-            this.minStretchForce = force;
+        else {
+            const start = beat.absoluteDisplayStart;
+            if (!this.springs.has(start)) {
+                return 0;
+            }
+            return this.springs.get(start).postSpringWidth;
         }
     }
     addSpring(start, duration, graceBeatWidth, preBeatWidth, postSpringSize) {
@@ -37842,7 +37869,7 @@ class BarLayoutingInfo {
         let start = beat.absoluteDisplayStart;
         if (beat.graceType !== GraceType.None) {
             // For grace beats we just remember the the sizes required for them
-            // these sizes are then considered when the target beat is added. 
+            // these sizes are then considered when the target beat is added.
             const groupId = beat.graceGroup.id;
             if (!this.allGraceRods.has(groupId)) {
                 this.allGraceRods.set(groupId, new Array(beat.graceGroup.beats.length));
@@ -37881,23 +37908,15 @@ class BarLayoutingInfo {
         }
     }
     finish() {
-        for (const [k, s] of this.allGraceRods) {
-            let offset = 0;
-            if (this.incompleteGraceRods.has(k)) {
-                for (const sp of s) {
-                    offset += sp.preBeatWidth;
-                    sp.graceBeatWidth = offset;
-                    offset += sp.postSpringWidth;
-                }
-            }
-            else {
-                for (let i = s.length - 1; i >= 0; i--) {
-                    // for grace beats we store the offset 
-                    // in the 'graceBeatWidth' for later use during applying
-                    // beat positions
-                    s[i].graceBeatWidth = offset;
-                    offset -= (s[i].preBeatWidth + s[i].postSpringWidth);
-                }
+        for (const [_, s] of this.allGraceRods) {
+            // for grace beats we store the offset
+            // in the 'graceBeatWidth' for later use during applying
+            // beat positions
+            let x = 0;
+            for (const sp of s) {
+                x += sp.preBeatWidth;
+                sp.graceBeatWidth = x;
+                x += sp.postSpringWidth;
             }
         }
         this._incompleteGraceRodsWidth = 0;
@@ -37953,7 +37972,7 @@ class BarLayoutingInfo {
                 let nextSpring = sortedSprings[i + 1];
                 requiredSpace = currentSpring.postSpringWidth + nextSpring.preSpringWidth;
             }
-            // for the first spring we need to ensure we take the initial 
+            // for the first spring we need to ensure we take the initial
             // pre-spring width into account
             if (i === 0) {
                 requiredSpace += currentSpring.preSpringWidth;
@@ -38643,12 +38662,12 @@ class StaffSystem {
         let x = this.x + _firstStaffInBrackets.x;
         let staffSystemBounds = new StaffSystemBounds();
         staffSystemBounds.visualBounds = new Bounds();
-        staffSystemBounds.visualBounds.x = cx;
+        staffSystemBounds.visualBounds.x = cx + this.x;
         staffSystemBounds.visualBounds.y = cy + this.y;
         staffSystemBounds.visualBounds.w = this.width;
         staffSystemBounds.visualBounds.h = this.height - this.topPadding - this.bottomPadding;
         staffSystemBounds.realBounds = new Bounds();
-        staffSystemBounds.realBounds.x = cx;
+        staffSystemBounds.realBounds.x = cx + this.x;
         staffSystemBounds.realBounds.y = cy + this.y;
         staffSystemBounds.realBounds.w = this.width;
         staffSystemBounds.realBounds.h = this.height;
@@ -39693,29 +39712,28 @@ class EffectBand extends Glyph {
     }
     alignGlyph(sizing, beat) {
         let g = this._effectGlyphs[beat.voice.index].get(beat.index);
-        let pos;
         let container = this.renderer.getBeatContainer(beat);
+        // container is aligned with the "onTimeX" position of the beat in effect renders
         switch (sizing) {
             case EffectBarGlyphSizing.SinglePreBeat:
-                pos = container.preNotes;
-                g.x = this.renderer.beatGlyphsStart + pos.x + container.x;
-                g.width = pos.width;
+                // shift to the start using the biggest pre-beat size of the respective beat
+                const offsetToBegin = this.renderer.layoutingInfo.getPreBeatSize(beat);
+                g.x = this.renderer.beatGlyphsStart + container.x - offsetToBegin;
                 break;
             case EffectBarGlyphSizing.SingleOnBeat:
             case EffectBarGlyphSizing.GroupedOnBeat:
-                pos = container.onNotes;
-                g.x = this.renderer.beatGlyphsStart + pos.x + container.x;
-                g.width = pos.width;
+                g.x = this.renderer.beatGlyphsStart + container.x;
                 break;
             case EffectBarGlyphSizing.SingleOnBeatToEnd:
             case EffectBarGlyphSizing.GroupedOnBeatToEnd:
-                pos = container.onNotes;
-                g.x = this.renderer.beatGlyphsStart + pos.x + container.x;
+                g.x = this.renderer.beatGlyphsStart + container.x;
                 if (container.beat.isLastOfVoice) {
                     g.width = this.renderer.width - g.x;
                 }
                 else {
-                    g.width = container.width - container.preNotes.width - container.preNotes.x;
+                    // shift to the start using the biggest post-beat size of the respective beat
+                    const offsetToEnd = this.renderer.layoutingInfo.getPostBeatSize(beat);
+                    g.width = offsetToEnd;
                 }
                 break;
             case EffectBarGlyphSizing.FullBar:
@@ -41229,116 +41247,134 @@ class TripletFeelGlyph extends EffectGlyph {
         cx += this.x;
         cy += this.y;
         let noteY = cy + this.height * NoteHeadGlyph.GraceScale;
+        let tupletY = noteY + 8;
         canvas.font = this.renderer.resources.effectFont;
         canvas.fillText('(', cx, cy + this.height * 0.3);
         let leftNoteX = cx + 10;
         let rightNoteX = cx + 40;
+        let leftNoteSymbols = [];
+        let rightAugmentationSymbols = [];
+        let rightNoteSymbols = [];
+        let rightTupletSymbols = [];
         switch (this._tripletFeel) {
             case TripletFeel.NoTripletFeel:
-                this.renderBarNote(leftNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [TripletFeelGlyphBarType.Full]);
-                this.renderBarNote(rightNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [TripletFeelGlyphBarType.Full]);
+                leftNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont8thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac8thLongStem
+                ];
+                rightNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont8thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac8thLongStem
+                ];
                 break;
             case TripletFeel.Triplet8th:
-                this.renderBarNote(leftNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [TripletFeelGlyphBarType.Full]);
-                canvas.fillMusicFontSymbol(rightNoteX, noteY, TripletFeelGlyph.NoteScale, MusicFontSymbol.NoteQuarterUp, false);
-                canvas.fillMusicFontSymbol(rightNoteX + TripletFeelGlyph.NoteSeparation, noteY, TripletFeelGlyph.NoteScale, MusicFontSymbol.NoteEighthUp, false);
-                this.renderTriplet(rightNoteX, cy, canvas);
+                leftNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont8thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac8thLongStem
+                ];
+                rightNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.Space,
+                    MusicFontSymbol.NoteEighthUp
+                ];
+                rightTupletSymbols = [
+                    MusicFontSymbol.TextTupletBracketStartLongStem,
+                    MusicFontSymbol.TextTuplet3LongStem,
+                    MusicFontSymbol.TextTupletBracketEndLongStem
+                ];
                 break;
             case TripletFeel.Triplet16th:
-                this.renderBarNote(leftNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.Full
-                ]);
-                this.renderBarNote(rightNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.PartialRight
-                ]);
-                this.renderTriplet(rightNoteX, cy, canvas);
+                leftNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont8thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac8thLongStem
+                ];
+                rightNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont8thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac16thLongStem
+                ];
+                rightTupletSymbols = [
+                    MusicFontSymbol.TextTupletBracketStartLongStem,
+                    MusicFontSymbol.TextTuplet3LongStem,
+                    MusicFontSymbol.TextTupletBracketEndLongStem
+                ];
                 break;
             case TripletFeel.Dotted8th:
-                this.renderBarNote(leftNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [TripletFeelGlyphBarType.Full]);
-                this.renderBarNote(rightNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.PartialRight
-                ]);
-                canvas.fillCircle(rightNoteX + 9, noteY, 1);
+                leftNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont8thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac8thLongStem
+                ];
+                rightAugmentationSymbols = [
+                    MusicFontSymbol.TextAugmentationDot,
+                ];
+                rightNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont8thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac16thLongStem
+                ];
                 break;
             case TripletFeel.Dotted16th:
-                this.renderBarNote(leftNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.Full
-                ]);
-                this.renderBarNote(rightNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.PartialRight
-                ]);
+                leftNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont16thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac16thLongStem
+                ];
+                rightAugmentationSymbols = [
+                    MusicFontSymbol.TextAugmentationDot,
+                ];
+                rightNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont16thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac32ndLongStem
+                ];
                 canvas.fillCircle(rightNoteX + 9, noteY, 1);
                 break;
             case TripletFeel.Scottish8th:
-                this.renderBarNote(leftNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [TripletFeelGlyphBarType.Full]);
-                this.renderBarNote(rightNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.PartialLeft
-                ]);
-                canvas.fillCircle(rightNoteX + TripletFeelGlyph.NoteSeparation + 8, noteY, 1);
+                leftNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont8thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac8thLongStem
+                ];
+                rightNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont16thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac8thLongStem,
+                    MusicFontSymbol.TextAugmentationDot,
+                ];
                 break;
             case TripletFeel.Scottish16th:
-                this.renderBarNote(leftNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.Full
-                ]);
-                this.renderBarNote(rightNoteX, noteY, TripletFeelGlyph.NoteScale, canvas, [
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.Full,
-                    TripletFeelGlyphBarType.PartialLeft
-                ]);
-                canvas.fillCircle(rightNoteX + TripletFeelGlyph.NoteSeparation + 8, noteY, 1);
-                break;
-        }
-        canvas.fillText('=', cx + 30, cy + 5);
-        canvas.fillText(')', cx + 65, cy + this.height * 0.3);
-    }
-    renderBarNote(cx, noteY, noteScale, canvas, bars) {
-        canvas.fillMusicFontSymbol(cx, noteY, noteScale, MusicFontSymbol.NoteQuarterUp, false);
-        let partialBarWidth = (TripletFeelGlyph.NoteSeparation / 2);
-        for (let i = 0; i < bars.length; i++) {
-            switch (bars[i]) {
-                case TripletFeelGlyphBarType.Full:
-                    canvas.fillRect(cx + 4, noteY - TripletFeelGlyph.NoteHeight + TripletFeelGlyph.BarSeparation * i, TripletFeelGlyph.NoteSeparation, TripletFeelGlyph.BarHeight);
-                    break;
-                case TripletFeelGlyphBarType.PartialLeft:
-                    canvas.fillRect(cx + 4, noteY - TripletFeelGlyph.NoteHeight + TripletFeelGlyph.BarSeparation * i, partialBarWidth, TripletFeelGlyph.BarHeight);
-                    break;
-                case TripletFeelGlyphBarType.PartialRight:
-                    canvas.fillRect(cx + 4 + partialBarWidth, noteY - TripletFeelGlyph.NoteHeight + TripletFeelGlyph.BarSeparation * i, partialBarWidth, TripletFeelGlyph.BarHeight);
-                    break;
-            }
+                leftNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont16thBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac16thLongStem
+                ];
+                rightNoteSymbols = [
+                    MusicFontSymbol.TextBlackNoteLongStem,
+                    MusicFontSymbol.TextCont32ndBeamLongStem,
+                    MusicFontSymbol.TextBlackNoteFrac16thLongStem,
+                    MusicFontSymbol.TextAugmentationDot,
+                ];
+                break;
         }
-        canvas.fillMusicFontSymbol(cx + TripletFeelGlyph.NoteSeparation, noteY, noteScale, MusicFontSymbol.NoteQuarterUp, false);
-    }
-    renderTriplet(cx, cy, canvas) {
-        cy += 2;
-        let font = this.renderer.resources.effectFont;
-        canvas.font = Font.withFamilyList(font.families, font.size * 0.8, font.style);
-        let rightX = cx + TripletFeelGlyph.NoteSeparation + 3;
-        canvas.beginPath();
-        canvas.moveTo(cx, cy + 3);
-        canvas.lineTo(cx, cy);
-        canvas.lineTo(cx + 5, cy);
-        canvas.moveTo(rightX + 5, cy + 3);
-        canvas.lineTo(rightX + 5, cy);
-        canvas.lineTo(rightX, cy);
-        canvas.stroke();
-        canvas.fillText('3', cx + 7, cy - 10);
-        canvas.font = font;
+        canvas.fillMusicFontSymbols(leftNoteX, noteY, TripletFeelGlyph.NoteScale, leftNoteSymbols, false);
+        canvas.fillText('=', cx + 32, cy + 5);
+        canvas.fillMusicFontSymbols(rightNoteX, noteY, TripletFeelGlyph.NoteScale, rightNoteSymbols, false);
+        if (rightAugmentationSymbols.length > 0) {
+            canvas.fillMusicFontSymbols(rightNoteX + 7, noteY, TripletFeelGlyph.NoteScale, rightAugmentationSymbols, false);
+        }
+        if (rightTupletSymbols.length > 0) {
+            canvas.fillMusicFontSymbols(rightNoteX, tupletY, TripletFeelGlyph.TupletScale, rightTupletSymbols, false);
+        }
+        canvas.fillText(')', cx + 65, cy + this.height * 0.3);
     }
 }
-TripletFeelGlyph.NoteScale = 0.4;
-TripletFeelGlyph.NoteHeight = 12;
-TripletFeelGlyph.NoteSeparation = 12;
-TripletFeelGlyph.BarHeight = 2;
-TripletFeelGlyph.BarSeparation = 3;
+TripletFeelGlyph.NoteScale = 0.5;
+TripletFeelGlyph.TupletScale = 0.7;
 
 class TripletFeelEffectInfo extends EffectBarRendererInfo {
     get notationElement() {
@@ -42977,7 +43013,7 @@ class ScoreRestGlyph extends MusicFontGlyph {
 class AccidentalColumnInfo {
     constructor() {
         this.x = 0;
-        this.y = -3000;
+        this.y = -3e3;
         this.width = 0;
     }
 }
@@ -44289,7 +44325,7 @@ SlashNoteHeadGlyph.WholeNoteHeadWidth = 32;
 class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
     constructor() {
         super(...arguments);
-        this._collisionOffset = -1000;
+        this._collisionOffset = -1e3;
         this._skipPaint = false;
         this.slash = null;
         this.noteHeads = null;
@@ -44312,7 +44348,7 @@ class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
         }
         else if (this.restGlyph) {
             this.restGlyph.updateBeamingHelper(this.container.x + this.x);
-            if (this.renderer.bar.isMultiVoice && this._collisionOffset === -1000) {
+            if (this.renderer.bar.isMultiVoice && this._collisionOffset === -1e3) {
                 this._collisionOffset = this.renderer.helpers.collisionHelper.applyRestCollisionOffset(this.container.beat, this.restGlyph.y, this.renderer.getScoreHeight(1));
                 this.y += this._collisionOffset;
                 const existingRests = this.renderer.helpers.collisionHelper.restDurationsByDisplayTime;
@@ -44698,32 +44734,30 @@ class ScoreBeatPreNotesGlyph extends BeatGlyphBase {
             }
             if (!preBends.isEmpty) {
                 this.addGlyph(preBends);
-                this.addGlyph(new SpacingGlyph(0, 0, 4 *
-                    (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
+                this.addGlyph(new SpacingGlyph(0, 0, 4 * (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
             }
             if (this.container.beat.brushType !== BrushType.None) {
                 this.addGlyph(new ScoreBrushGlyph(this.container.beat));
                 this.addGlyph(new SpacingGlyph(0, 0, 4));
             }
             if (!fingering.isEmpty) {
-                this.addGlyph(new SpacingGlyph(0, 0, 2 *
-                    (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
+                if (!this.isEmpty) {
+                    this.addGlyph(new SpacingGlyph(0, 0, 2 * (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
+                }
                 this.addGlyph(fingering);
-                this.addGlyph(new SpacingGlyph(0, 0, 2 *
-                    (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
+                this.addGlyph(new SpacingGlyph(0, 0, 2 * (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
             }
             if (!ghost.isEmpty) {
                 this.addGlyph(ghost);
-                this.addGlyph(new SpacingGlyph(0, 0, 4 *
-                    (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
+                this.addGlyph(new SpacingGlyph(0, 0, 4 * (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
             }
             if (!accidentals.isEmpty) {
                 this.accidentals = accidentals;
-                this.addGlyph(new SpacingGlyph(0, 0, 2 *
-                    (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
+                if (!this.isEmpty) {
+                    this.addGlyph(new SpacingGlyph(0, 0, 2 * (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
+                }
                 this.addGlyph(accidentals);
-                this.addGlyph(new SpacingGlyph(0, 0, 2 *
-                    (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
+                this.addGlyph(new SpacingGlyph(0, 0, 2 * (this.container.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1)));
             }
         }
         super.doLayout();
@@ -45253,7 +45287,7 @@ class ScoreSlideLineGlyph extends Glyph {
     drawSlideOut(cx, cy, canvas) {
         let startNoteRenderer = this.renderer;
         let sizeX = 12;
-        let endOffsetX = 1;
+        let offsetX = 2;
         let offsetY = 2;
         let startX = 0;
         let startY = 0;
@@ -45266,7 +45300,8 @@ class ScoreSlideLineGlyph extends Glyph {
                 startX =
                     cx +
                         startNoteRenderer.x +
-                        startNoteRenderer.getBeatX(this._startNote.beat, BeatXPosition.PostNotes);
+                        startNoteRenderer.getBeatX(this._startNote.beat, BeatXPosition.PostNotes) +
+                        offsetX;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
                 if (this._startNote.slideTarget) {
                     let endNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staveId, this._startNote.slideTarget.beat.voice.bar);
@@ -45279,7 +45314,7 @@ class ScoreSlideLineGlyph extends Glyph {
                             cx +
                                 endNoteRenderer.x +
                                 endNoteRenderer.getBeatX(this._startNote.slideTarget.beat, BeatXPosition.PreNotes) -
-                                endOffsetX;
+                                offsetX;
                         endY = cy + endNoteRenderer.y + endNoteRenderer.getNoteY(this._startNote.slideTarget, NoteYPosition.Center);
                     }
                     if (this._startNote.slideTarget.realValue > this._startNote.realValue) {
@@ -45297,19 +45332,19 @@ class ScoreSlideLineGlyph extends Glyph {
                 }
                 break;
             case SlideOutType.OutUp:
-                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right);
+                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right) + offsetX;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
                 endX = startX + sizeX;
                 endY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Top);
                 break;
             case SlideOutType.OutDown:
-                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right);
+                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right) + offsetX;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
                 endX = startX + sizeX;
                 endY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Bottom);
                 break;
             case SlideOutType.PickSlideUp:
-                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right);
+                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right) + offsetX * 2;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
                 endY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Top);
                 endX = cx + startNoteRenderer.x + startNoteRenderer.width;
@@ -45323,7 +45358,7 @@ class ScoreSlideLineGlyph extends Glyph {
                 waves = true;
                 break;
             case SlideOutType.PickSlideDown:
-                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right);
+                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right) + offsetX * 2;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
                 endY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Bottom);
                 endX = cx + startNoteRenderer.x + startNoteRenderer.width;
@@ -46862,15 +46897,16 @@ class TabSlideLineGlyph extends Glyph {
         let startY = 0;
         let endX = 0;
         let endY = 0;
+        const offsetX = 2;
         switch (this._inType) {
             case SlideInType.IntoFromBelow:
-                endX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Left);
+                endX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Left) - offsetX;
                 endY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
                 startX = endX - sizeX;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center) + sizeY;
                 break;
             case SlideInType.IntoFromAbove:
-                endX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Left);
+                endX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Left) - offsetX;
                 endY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
                 startX = endX - sizeX;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center) - sizeY;
@@ -46889,14 +46925,15 @@ class TabSlideLineGlyph extends Glyph {
         let endX = 0;
         let endY = 0;
         let waves = false;
-        const endXOffset = 2;
+        const offsetX = 2;
         switch (this._outType) {
             case SlideOutType.Shift:
             case SlideOutType.Legato:
                 startX =
                     cx +
                         startNoteRenderer.x +
-                        startNoteRenderer.getBeatX(this._startNote.beat, BeatXPosition.PostNotes);
+                        startNoteRenderer.getBeatX(this._startNote.beat, BeatXPosition.PostNotes)
+                        + offsetX;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
                 if (this._startNote.slideTarget) {
                     let endNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staveId, this._startNote.slideTarget.beat.voice.bar);
@@ -46909,7 +46946,7 @@ class TabSlideLineGlyph extends Glyph {
                             cx +
                                 endNoteRenderer.x +
                                 endNoteRenderer.getBeatX(this._startNote.slideTarget.beat, BeatXPosition.OnNotes)
-                                - endXOffset;
+                                - offsetX;
                         endY =
                             cy +
                                 endNoteRenderer.y +
@@ -46930,31 +46967,43 @@ class TabSlideLineGlyph extends Glyph {
                 }
                 break;
             case SlideOutType.OutUp:
-                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right);
+                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right) + offsetX;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
-                endX = startX + sizeX - endXOffset;
+                endX = startX + sizeX;
                 endY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center) - sizeY;
                 break;
             case SlideOutType.OutDown:
-                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right);
+                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right) + offsetX;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
-                endX = startX + sizeX - endXOffset;
+                endX = startX + sizeX;
                 endY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center) + sizeY;
                 break;
             case SlideOutType.PickSlideDown:
-                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right);
+                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right) + offsetX * 2;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
-                endX =
-                    cx + startNoteRenderer.x + startNoteRenderer.getBeatX(this._startNote.beat, BeatXPosition.EndBeat);
+                endX = cx + startNoteRenderer.x + startNoteRenderer.width;
                 endY = startY + sizeY * 3;
+                if (this._startNote.beat.nextBeat &&
+                    this._startNote.beat.nextBeat.voice === this._startNote.beat.voice) {
+                    endX =
+                        cx +
+                            startNoteRenderer.x +
+                            startNoteRenderer.getBeatX(this._startNote.beat.nextBeat, BeatXPosition.PreNotes);
+                }
                 waves = true;
                 break;
             case SlideOutType.PickSlideUp:
-                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right);
+                startX = cx + startNoteRenderer.x + startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right) + offsetX * 2;
                 startY = cy + startNoteRenderer.y + startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
-                endX =
-                    cx + startNoteRenderer.x + startNoteRenderer.getBeatX(this._startNote.beat, BeatXPosition.EndBeat);
+                endX = cx + startNoteRenderer.x + startNoteRenderer.width;
                 endY = startY - sizeY * 3;
+                if (this._startNote.beat.nextBeat &&
+                    this._startNote.beat.nextBeat.voice === this._startNote.beat.voice) {
+                    endX =
+                        cx +
+                            startNoteRenderer.x +
+                            startNoteRenderer.getBeatX(this._startNote.beat.nextBeat, BeatXPosition.PreNotes);
+                }
                 waves = true;
                 break;
             default:
@@ -52072,8 +52121,8 @@ class CoreSettings {
 // </auto-generated>
 class VersionInfo {
 }
-VersionInfo.version = '1.4.0-alpha.1313';
-VersionInfo.date = '2025-02-20T00:47:36.314Z';
+VersionInfo.version = '1.4.0-alpha.1322';
+VersionInfo.date = '2025-02-26T02:15:01.756Z';
 
 var index$4 = /*#__PURE__*/Object.freeze({
     __proto__: null,