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

package/dist/alphaTab.js

@@ -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.
  *
@@ -2143,6 +2143,7 @@
     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";
@@ -2192,6 +2193,17 @@
         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";
@@ -23053,7 +23065,7 @@
                                 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;
@@ -24677,16 +24689,16 @@
             // 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;
@@ -24875,19 +24887,19 @@
             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) {
@@ -25131,7 +25143,7 @@
                                 }
                             }
                             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;
@@ -25179,12 +25191,12 @@
             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;
@@ -25232,9 +25244,9 @@
                 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;
             }
         }
     }
@@ -26835,11 +26847,11 @@
                                         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.
@@ -27976,6 +27988,11 @@
      */
     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).
              */
@@ -28229,6 +28246,7 @@
                             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;
@@ -28283,6 +28301,7 @@
                             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];
@@ -31855,39 +31874,31 @@
         }
         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();
         }
@@ -31949,11 +31960,6 @@
             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);
@@ -31972,21 +31978,25 @@
             // 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;
@@ -32000,19 +32010,55 @@
         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) {
@@ -32916,7 +32962,7 @@
                 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) {
@@ -32940,7 +32986,7 @@
                         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
@@ -36193,7 +36239,6 @@
             }
         }
         registerLayoutingInfo(info) {
-            info.updateVoiceSize(this.width);
             let beatGlyphs = this.beatGlyphs;
             for (let b of beatGlyphs) {
                 b.registerLayoutingInfo(info);
@@ -36237,8 +36282,8 @@
 
     class BeatLines {
         constructor() {
-            this.maxLine = -1000;
-            this.minLine = -1000;
+            this.maxLine = -1e3;
+            this.minLine = -1e3;
         }
     }
     /**
@@ -36265,11 +36310,11 @@
             /**
              * 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;
         }
@@ -36475,11 +36520,11 @@
             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;
             }
@@ -36497,10 +36542,10 @@
                 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;
             }
         }
@@ -37023,14 +37068,14 @@
     }
     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;
             }
@@ -37052,10 +37097,10 @@
             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;
                 }
@@ -37068,7 +37113,7 @@
                     }
                 }
             }
-            if (minY === -1000) {
+            if (minY === -1e3) {
                 return [0, 0];
             }
             return [minY, maxY];
@@ -37733,12 +37778,8 @@
              * 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();
@@ -37746,51 +37787,37 @@
             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) {
@@ -37848,7 +37875,7 @@
             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));
@@ -37887,23 +37914,15 @@
             }
         }
         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;
@@ -37959,7 +37978,7 @@
                     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;
@@ -38649,12 +38668,12 @@
             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;
@@ -39699,29 +39718,28 @@
         }
         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:
@@ -41235,116 +41253,134 @@
             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() {
@@ -42983,7 +43019,7 @@
     class AccidentalColumnInfo {
         constructor() {
             this.x = 0;
-            this.y = -3000;
+            this.y = -3e3;
             this.width = 0;
         }
     }
@@ -44295,7 +44331,7 @@
     class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
         constructor() {
             super(...arguments);
-            this._collisionOffset = -1000;
+            this._collisionOffset = -1e3;
             this._skipPaint = false;
             this.slash = null;
             this.noteHeads = null;
@@ -44318,7 +44354,7 @@
             }
             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;
@@ -44704,32 +44740,30 @@
                 }
                 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();
@@ -45259,7 +45293,7 @@
         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;
@@ -45272,7 +45306,8 @@
                     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);
@@ -45285,7 +45320,7 @@
                                 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) {
@@ -45303,19 +45338,19 @@
                     }
                     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;
@@ -45329,7 +45364,7 @@
                     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;
@@ -46868,15 +46903,16 @@
             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;
@@ -46895,14 +46931,15 @@
             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);
@@ -46915,7 +46952,7 @@
                                 cx +
                                     endNoteRenderer.x +
                                     endNoteRenderer.getBeatX(this._startNote.slideTarget.beat, BeatXPosition.OnNotes)
-                                    - endXOffset;
+                                    - offsetX;
                             endY =
                                 cy +
                                     endNoteRenderer.y +
@@ -46936,31 +46973,43 @@
                     }
                     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:
@@ -52078,8 +52127,8 @@
     // </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,