@coderline/alphatab 1.8.0-alpha.1636 → 1.8.0-alpha.1639

package/dist/alphaTab.core.mjs

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.8.0-alpha.1636 (develop, build 1636)
+ * alphaTab v1.8.0-alpha.1639 (develop, build 1639)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -203,9 +203,9 @@ class AlphaTabError extends Error {
  * @internal
  */
 class VersionInfo {
-    static version = '1.8.0-alpha.1636';
-    static date = '2025-12-06T02:04:52.462Z';
-    static commit = '49c68ed64403080028c852fe371cc6bdcca8dc3a';
+    static version = '1.8.0-alpha.1639';
+    static date = '2025-12-09T02:16:01.440Z';
+    static commit = 'af86866e4f9d89a3ccc34006d01473a549dbbe7f';
     static print(print) {
         print(`alphaTab ${VersionInfo.version}`);
         print(`commit: ${VersionInfo.commit}`);
@@ -12950,25 +12950,31 @@ class Bounds {
     /**
      * Gets or sets the X-position of the rectangle within the music notation.
      */
-    x = 0;
+    x;
     /**
      * Gets or sets the Y-position of the rectangle within the music notation.
      */
-    y = 0;
+    y;
     /**
      * Gets or sets the width of the rectangle.
      */
-    w = 0;
+    w;
     /**
      * Gets or sets the height of the rectangle.
      */
-    h = 0;
+    h;
     scaleWith(scale) {
         this.x *= scale;
         this.y *= scale;
         this.w *= scale;
         this.h *= scale;
     }
+    constructor(x = 0, y = 0, w = 0, h = 0) {
+        this.x = x;
+        this.y = y;
+        this.h = h;
+        this.w = w;
+    }
 }
 
 /**
@@ -49454,16 +49460,6 @@ class ExternalMediaPlayer extends BackingTrackPlayer {
     }
 }
 
-/**
- * @internal
- */
-class SelectionInfo {
-    beat;
-    bounds = null;
-    constructor(beat) {
-        this.beat = beat;
-    }
-}
 /**
  * This class represents the public API of alphaTab and provides all logic to display
  * a music sheet in any UI using the given {@link IUiFacade}
@@ -51563,8 +51559,8 @@ class AlphaTabApiBase {
     }
     _isBeatMouseDown = false;
     _isNoteMouseDown = false;
-    _selectionStart = null;
-    _selectionEnd = null;
+    _selectionStart;
+    _selectionEnd;
     /**
      * This event is fired whenever a the user presses the mouse button on a beat.
      * @eventProperty
@@ -51807,8 +51803,8 @@ class AlphaTabApiBase {
             return;
         }
         if (this._hasCursor && this.settings.player.enableUserInteraction) {
-            this._selectionStart = new SelectionInfo(beat);
-            this._selectionEnd = null;
+            this._selectionStart = { beat };
+            this._selectionEnd = undefined;
         }
         this._isBeatMouseDown = true;
         this.beatMouseDown.trigger(beat);
@@ -51828,7 +51824,7 @@ class AlphaTabApiBase {
         }
         if (this.settings.player.enableUserInteraction) {
             if (!this._selectionEnd || this._selectionEnd.beat !== beat) {
-                this._selectionEnd = new SelectionInfo(beat);
+                this._selectionEnd = { beat };
                 this._cursorSelectRange(this._selectionStart, this._selectionEnd);
             }
         }
@@ -51847,45 +51843,7 @@ class AlphaTabApiBase {
             return;
         }
         if (this._hasCursor && this.settings.player.enableUserInteraction) {
-            if (this._selectionEnd) {
-                const startTick = this._tickCache?.getBeatStart(this._selectionStart.beat) ??
-                    this._selectionStart.beat.absolutePlaybackStart;
-                const endTick = this._tickCache?.getBeatStart(this._selectionEnd.beat) ??
-                    this._selectionEnd.beat.absolutePlaybackStart;
-                if (endTick < startTick) {
-                    const t = this._selectionStart;
-                    this._selectionStart = this._selectionEnd;
-                    this._selectionEnd = t;
-                }
-            }
-            if (this._selectionStart && this._tickCache) {
-                // get the start and stop ticks (which consider properly repeats)
-                const tickCache = this._tickCache;
-                const realMasterBarStart = tickCache.getMasterBarStart(this._selectionStart.beat.voice.bar.masterBar);
-                // move to selection start
-                this._currentBeat = null; // reset current beat so it is updating the cursor
-                if (this._player.state === PlayerState.Paused) {
-                    this._cursorUpdateTick(this._tickCache.getBeatStart(this._selectionStart.beat), false, 1);
-                }
-                this.tickPosition = realMasterBarStart + this._selectionStart.beat.playbackStart;
-                // set playback range
-                if (this._selectionEnd && this._selectionStart.beat !== this._selectionEnd.beat) {
-                    const realMasterBarEnd = tickCache.getMasterBarStart(this._selectionEnd.beat.voice.bar.masterBar);
-                    const range = new PlaybackRange();
-                    range.startTick = realMasterBarStart + this._selectionStart.beat.playbackStart;
-                    range.endTick =
-                        realMasterBarEnd +
-                            this._selectionEnd.beat.playbackStart +
-                            this._selectionEnd.beat.playbackDuration -
-                            50;
-                    this.playbackRange = range;
-                }
-                else {
-                    this._selectionStart = null;
-                    this.playbackRange = null;
-                    this._cursorSelectRange(this._selectionStart, this._selectionEnd);
-                }
-            }
+            this.applyPlaybackRangeFromHighlight();
         }
         this.beatMouseUp.trigger(beat);
         this.uiFacade.triggerEvent(this.container, 'beatMouseUp', beat, originalEvent);
@@ -51907,13 +51865,13 @@ class AlphaTabApiBase {
             const startBeat = this._tickCache.findBeat(this._trackIndexLookup, range.startTick);
             const endBeat = this._tickCache.findBeat(this._trackIndexLookup, range.endTick);
             if (startBeat && endBeat) {
-                const selectionStart = new SelectionInfo(startBeat.beat);
-                const selectionEnd = new SelectionInfo(endBeat.beat);
+                const selectionStart = { beat: startBeat.beat };
+                const selectionEnd = { beat: endBeat.beat };
                 this._cursorSelectRange(selectionStart, selectionEnd);
             }
         }
         else {
-            this._cursorSelectRange(null, null);
+            this._cursorSelectRange(undefined, undefined);
         }
     }
     _setupClickHandling() {
@@ -51982,24 +51940,230 @@ class AlphaTabApiBase {
             this._cursorSelectRange(this._selectionStart, this._selectionEnd);
         });
     }
+    /**
+     * Places the highlight markers at the specified start and end-beat range.
+     * @param startBeat The start beat where the selection should start
+     * @param endBeat The end beat where the selection should end.
+     *
+     * @remarks
+     * Unlike actually setting {@link playbackRange} this method only places the selection markers without actually
+     * changing the playback range. This method can be used when building custom selection systems (e.g. having draggable handles).
+     *
+     * @category Methods - Player
+     * @since 1.8.0
+     *
+     * @example
+     * JavaScript
+     * ```js
+     * const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));
+     * const startBeat = api.score.tracks[0].staves[0].bars[0].voices[0].beats[0];
+     * const endBeat = api.score.tracks[0].staves[0].bars[3].voices[0].beats[0];
+     * api.highlightPlaybackRange(startBeat, endBeat);
+     * ```
+     *
+     * @example
+     * C#
+     * ```cs
+     * var api = new AlphaTabApi<MyControl>(...);
+     * api.ChangeTrackVolume(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, 1.5);
+     * api.ChangeTrackVolume(new Track[] { api.Score.Tracks[2] }, 0.5);
+     * var startBeat = api.Score.Tracks[0].Staves[0].Bars[0].Voices[0].Beats[0];
+     * var endBeat = api.Score.Tracks[0].Staves[0].Bars[3].Voices[0].Beats[0];
+     * api.HighlightPlaybackRange(startBeat, endBeat);
+     * ```
+     *
+     * @example
+     * Android
+     * ```kotlin
+     * val api = AlphaTabApi<MyControl>(...)
+     * val startBeat = api.score.tracks[0].staves[0].bars[0].voices[0].beats[0]
+     * val endBeat = api.score.tracks[0].staves[0].bars[3].voices[0].beats[0]
+     * api.highlightPlaybackRange(startBeat, endBeat)
+     * ```
+     */
+    highlightPlaybackRange(startBeat, endBeat) {
+        this._selectionStart = { beat: startBeat };
+        this._selectionEnd = { beat: endBeat };
+        this._cursorSelectRange(this._selectionStart, this._selectionEnd);
+    }
+    /**
+     * Applies the playback range from the currently highlighted range.
+     *
+     * @remarks
+     * This method can be used when building custom selection systems (e.g. having draggable handles).
+     *
+     * @category Methods - Player
+     * @since 1.8.0
+     *
+     * @example
+     * JavaScript
+     * ```js
+     * const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));
+     * const startBeat = api.score.tracks[0].staves[0].bars[0].voices[0].beats[0];
+     * const endBeat = api.score.tracks[0].staves[0].bars[3].voices[0].beats[0];
+     * api.highlightPlaybackRange(startBeat, endBeat);
+     * api.applyPlaybackRangeFromHighlight();
+     * ```
+     *
+     * @example
+     * C#
+     * ```cs
+     * var api = new AlphaTabApi<MyControl>(...);
+     * api.ChangeTrackVolume(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, 1.5);
+     * api.ChangeTrackVolume(new Track[] { api.Score.Tracks[2] }, 0.5);
+     * var startBeat = api.Score.Tracks[0].Staves[0].Bars[0].Voices[0].Beats[0];
+     * var endBeat = api.Score.Tracks[0].Staves[0].Bars[3].Voices[0].Beats[0];
+     * api.HighlightPlaybackRange(startBeat, endBeat);
+     * api.ApplyPlaybackRangeFromHighlight();
+     * ```
+     *
+     * @example
+     * Android
+     * ```kotlin
+     * val api = AlphaTabApi<MyControl>(...)
+     * val startBeat = api.score.tracks[0].staves[0].bars[0].voices[0].beats[0]
+     * val endBeat = api.score.tracks[0].staves[0].bars[3].voices[0].beats[0]
+     * api.highlightPlaybackRange(startBeat, endBeat)
+     * api.applyPlaybackRangeFromHighlight()
+     * ```
+     */
+    applyPlaybackRangeFromHighlight() {
+        if (this._selectionEnd) {
+            const startTick = this._tickCache?.getBeatStart(this._selectionStart.beat) ??
+                this._selectionStart.beat.absolutePlaybackStart;
+            const endTick = this._tickCache?.getBeatStart(this._selectionEnd.beat) ??
+                this._selectionEnd.beat.absolutePlaybackStart;
+            if (endTick < startTick) {
+                const t = this._selectionStart;
+                this._selectionStart = this._selectionEnd;
+                this._selectionEnd = t;
+            }
+        }
+        if (this._selectionStart && this._tickCache) {
+            // get the start and stop ticks (which consider properly repeats)
+            const tickCache = this._tickCache;
+            const realMasterBarStart = tickCache.getMasterBarStart(this._selectionStart.beat.voice.bar.masterBar);
+            // move to selection start
+            this._currentBeat = null; // reset current beat so it is updating the cursor
+            if (this._player.state === PlayerState.Paused) {
+                this._cursorUpdateTick(this._tickCache.getBeatStart(this._selectionStart.beat), false, 1);
+            }
+            this.tickPosition = realMasterBarStart + this._selectionStart.beat.playbackStart;
+            // set playback range
+            if (this._selectionEnd && this._selectionStart.beat !== this._selectionEnd.beat) {
+                const realMasterBarEnd = tickCache.getMasterBarStart(this._selectionEnd.beat.voice.bar.masterBar);
+                const range = new PlaybackRange();
+                range.startTick = realMasterBarStart + this._selectionStart.beat.playbackStart;
+                range.endTick =
+                    realMasterBarEnd +
+                        this._selectionEnd.beat.playbackStart +
+                        this._selectionEnd.beat.playbackDuration -
+                        50;
+                this.playbackRange = range;
+            }
+            else {
+                this._selectionStart = undefined;
+                this.playbackRange = null;
+                this._cursorSelectRange(this._selectionStart, this._selectionEnd);
+            }
+        }
+    }
+    /**
+     * Clears the highlight markers marking the currently selected playback range.
+     *
+     * @remarks
+     * Unlike actually setting {@link playbackRange} this method only clears the selection markers without actually
+     * changing the playback range. This method can be used when building custom selection systems (e.g. having draggable handles).
+     *
+     * @category Methods - Player
+     * @since 1.8.0
+     *
+     * @example
+     * JavaScript
+     * ```js
+     * const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));
+     * api.clearPlaybackRangeHighlight();
+     * ```
+     *
+     * @example
+     * C#
+     * ```cs
+     * var api = new AlphaTabApi<MyControl>(...);
+     * api.clearPlaybackRangeHighlight();
+     * ```
+     *
+     * @example
+     * Android
+     * ```kotlin
+     * val api = AlphaTabApi<MyControl>(...)
+     * api.clearPlaybackRangeHighlight()
+     * ```
+     */
+    clearPlaybackRangeHighlight() {
+        this._cursorSelectRange(undefined, undefined);
+    }
+    /**
+     * This event is fired the shown highlights for the selected playback range changes.
+     *
+     * @remarks
+     * This event is fired already during selection and not only when the selection is completed.
+     * This event can be used to place additional custom selection markers (like drag handles).
+     *
+     * @eventProperty
+     * @category Events - Player
+     * @since 1.8.0
+     *
+     * @example
+     * JavaScript
+     * ```js
+     * const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));
+     * api.playbackRangeHighlightChanged.on(e => {
+     *    updateSelectionHandles(e);
+     * });
+     * ```
+     *
+     * @example
+     * C#
+     * ```cs
+     * var api = new AlphaTabApi<MyControl>(...);
+     * api.PlaybackRangeHighlightChanged.On(e =>
+     * {
+     *    UpdateSelectionHandles(e);
+     * });
+     * ```
+     *
+     * @example
+     * Android
+     * ```kotlin
+     * val api = AlphaTabApi<MyControl>(...)
+     * api.playbackRangeHighlightChanged.on { e ->
+     *     updateSelectionHandles(e)
+     * }
+     * ```
+     *
+     */
+    playbackRangeHighlightChanged = new EventEmitterOfT();
     _cursorSelectRange(startBeat, endBeat) {
         const cache = this._renderer.boundsLookup;
         if (!cache) {
+            this.playbackRangeHighlightChanged.trigger({});
             return;
         }
         const selectionWrapper = this._selectionWrapper;
         if (!selectionWrapper) {
+            this.playbackRangeHighlightChanged.trigger({});
             return;
         }
         selectionWrapper.clear();
         if (!startBeat || !endBeat || startBeat.beat === endBeat.beat) {
+            this.playbackRangeHighlightChanged.trigger({});
             return;
         }
         if (!startBeat.bounds) {
-            startBeat.bounds = cache.findBeat(startBeat.beat);
+            startBeat.bounds = cache.findBeat(startBeat.beat) ?? undefined;
         }
         if (!endBeat.bounds) {
-            endBeat.bounds = cache.findBeat(endBeat.beat);
+            endBeat.bounds = cache.findBeat(endBeat.beat) ?? undefined;
         }
         const startTick = this._tickCache?.getBeatStart(startBeat.beat) ?? startBeat.beat.absolutePlaybackStart;
         const endTick = this._tickCache?.getBeatStart(endBeat.beat) ?? endBeat.beat.absolutePlaybackStart;
@@ -52008,7 +52172,17 @@ class AlphaTabApiBase {
             startBeat = endBeat;
             endBeat = t;
         }
-        const startX = startBeat.bounds.realBounds.x;
+        const eventArgs = {
+            startBeat: startBeat.beat,
+            startBeatBounds: startBeat.bounds,
+            endBeat: endBeat.beat,
+            endBeatBounds: endBeat.bounds,
+            highlightBlocks: []
+        };
+        let startX = startBeat.bounds.realBounds.x;
+        if (startBeat.beat.index === 0) {
+            startX = startBeat.bounds.barBounds.masterBarBounds.realBounds.x;
+        }
         let endX = endBeat.bounds.realBounds.x + endBeat.bounds.realBounds.w;
         if (endBeat.beat.index === endBeat.beat.voice.beats.length - 1) {
             endX =
@@ -52025,18 +52199,24 @@ class AlphaTabApiBase {
             const staffEndX = startBeat.bounds.barBounds.masterBarBounds.staffSystemBounds.visualBounds.x +
                 startBeat.bounds.barBounds.masterBarBounds.staffSystemBounds.visualBounds.w;
             const startSelection = this.uiFacade.createSelectionElement();
-            startSelection.setBounds(startX, startBeat.bounds.barBounds.masterBarBounds.visualBounds.y, staffEndX - startX, startBeat.bounds.barBounds.masterBarBounds.visualBounds.h);
+            const startSelectionBounds = new Bounds(startX, startBeat.bounds.barBounds.masterBarBounds.visualBounds.y, staffEndX - startX, startBeat.bounds.barBounds.masterBarBounds.visualBounds.h);
+            startSelection.setBounds(startSelectionBounds.x, startSelectionBounds.y, startSelectionBounds.w, startSelectionBounds.h);
+            eventArgs.highlightBlocks.push(startSelectionBounds);
             selectionWrapper.appendChild(startSelection);
             const staffStartIndex = startBeat.bounds.barBounds.masterBarBounds.staffSystemBounds.index + 1;
             const staffEndIndex = endBeat.bounds.barBounds.masterBarBounds.staffSystemBounds.index;
             for (let staffIndex = staffStartIndex; staffIndex < staffEndIndex; staffIndex++) {
                 const staffBounds = cache.staffSystems[staffIndex];
                 const middleSelection = this.uiFacade.createSelectionElement();
-                middleSelection.setBounds(staffStartX, staffBounds.visualBounds.y, staffEndX - staffStartX, staffBounds.visualBounds.h);
+                const middleSelectionBounds = new Bounds(staffStartX, staffBounds.visualBounds.y, staffEndX - staffStartX, staffBounds.visualBounds.h);
+                eventArgs.highlightBlocks.push(middleSelectionBounds);
+                middleSelection.setBounds(middleSelectionBounds.x, middleSelectionBounds.y, middleSelectionBounds.w, middleSelectionBounds.h);
                 selectionWrapper.appendChild(middleSelection);
             }
             const endSelection = this.uiFacade.createSelectionElement();
-            endSelection.setBounds(staffStartX, endBeat.bounds.barBounds.masterBarBounds.visualBounds.y, endX - staffStartX, endBeat.bounds.barBounds.masterBarBounds.visualBounds.h);
+            const endSelectionBounds = new Bounds(staffStartX, endBeat.bounds.barBounds.masterBarBounds.visualBounds.y, endX - staffStartX, endBeat.bounds.barBounds.masterBarBounds.visualBounds.h);
+            eventArgs.highlightBlocks.push(endSelectionBounds);
+            endSelection.setBounds(endSelectionBounds.x, endSelectionBounds.y, endSelectionBounds.w, endSelectionBounds.h);
             selectionWrapper.appendChild(endSelection);
         }
         else {
@@ -52045,6 +52225,7 @@ class AlphaTabApiBase {
             selection.setBounds(startX, startBeat.bounds.barBounds.masterBarBounds.visualBounds.y, endX - startX, startBeat.bounds.barBounds.masterBarBounds.visualBounds.h);
             selectionWrapper.appendChild(selection);
         }
+        this.playbackRangeHighlightChanged.trigger(eventArgs);
     }
     /**
      * This event is fired whenever a new song is loaded.
@@ -56483,12 +56664,12 @@ class GroupedEffectGlyph extends EffectGlyph {
         this.endPosition = endPosition;
     }
     get isLinkedWithPrevious() {
-        return !!this.previousGlyph && this.previousGlyph.renderer.staff.system === this.renderer.staff.system;
+        return !!this.previousGlyph && this.previousGlyph.renderer.staff?.system === this.renderer.staff.system;
     }
     get isLinkedWithNext() {
         return (!!this.nextGlyph &&
             this.nextGlyph.renderer.isFinalized &&
-            this.nextGlyph.renderer.staff.system === this.renderer.staff.system);
+            this.nextGlyph.renderer.staff?.system === this.renderer.staff.system);
     }
     paint(cx, cy, canvas) {
         // if we are linked with the previous, the first glyph of the group will also render this one.
@@ -58876,6 +59057,437 @@ class LeftToRightLayoutingGlyphGroup extends GlyphGroup {
     }
 }
 
+/**
+ * @internal
+ */
+class TieGlyph extends Glyph {
+    tieDirection = BeamDirection.Up;
+    slurEffectId;
+    isForEnd;
+    constructor(slurEffectId, forEnd) {
+        super(0, 0);
+        this.slurEffectId = slurEffectId;
+        this.isForEnd = forEnd;
+    }
+    _startX = 0;
+    _startY = 0;
+    _endX = 0;
+    _endY = 0;
+    _tieHeight = 0;
+    _boundingBox;
+    _shouldPaint = false;
+    get checkForOverflow() {
+        return this._shouldPaint && this._boundingBox !== undefined;
+    }
+    getBoundingBoxTop() {
+        if (this._boundingBox) {
+            return this._boundingBox.y;
+        }
+        return this._startY;
+    }
+    getBoundingBoxBottom() {
+        if (this._boundingBox) {
+            return this._boundingBox.y + this._boundingBox.h;
+        }
+        return this._startY;
+    }
+    doLayout() {
+        this.width = 0;
+        const startNoteRenderer = this.lookupStartBeatRenderer();
+        const endNoteRenderer = this.lookupEndBeatRenderer();
+        this._startX = 0;
+        this._endX = 0;
+        this._startY = 0;
+        this._endY = 0;
+        this.height = 0;
+        // if we are on the tie start, we check if we
+        // either can draw till the end note, or we just can draw till the bar end
+        this.tieDirection = this.calculateTieDirection();
+        const forEnd = this.isForEnd;
+        this._shouldPaint = false;
+        if (!forEnd) {
+            if (startNoteRenderer !== endNoteRenderer) {
+                this._startX = this.calculateStartX();
+                this._startY = this.calculateStartY();
+                if (!endNoteRenderer || startNoteRenderer.staff !== endNoteRenderer.staff) {
+                    const lastRendererInStaff = startNoteRenderer.staff.barRenderers[startNoteRenderer.staff.barRenderers.length - 1];
+                    this._endX = lastRendererInStaff.x + lastRendererInStaff.width;
+                    this._endY = this._startY;
+                    startNoteRenderer.scoreRenderer.layout.slurRegistry.startMultiSystemSlur(this);
+                }
+                else {
+                    this._endX = this.calculateEndX();
+                    this._endY = this.caclculateEndY();
+                }
+            }
+            else {
+                this._shouldPaint = true;
+                this._startX = this.calculateStartX();
+                this._endX = this.calculateEndX();
+                this._startY = this.calculateStartY();
+                this._endY = this.caclculateEndY();
+            }
+            this._shouldPaint = true;
+        }
+        else if (startNoteRenderer.staff !== endNoteRenderer.staff) {
+            const firstRendererInStaff = startNoteRenderer.staff.barRenderers[0];
+            this._startX = firstRendererInStaff.x;
+            this._endX = this.calculateEndX();
+            const startGlyph = startNoteRenderer.scoreRenderer.layout.slurRegistry.completeMultiSystemSlur(this);
+            if (startGlyph) {
+                this._startY = startGlyph.calculateMultiSystemSlurY(endNoteRenderer);
+            }
+            else {
+                this._startY = this.caclculateEndY();
+            }
+            this._endY = this.caclculateEndY();
+            this._shouldPaint = startNoteRenderer.staff !== endNoteRenderer.staff;
+        }
+        this._boundingBox = undefined;
+        this.y = Math.min(this._startY, this._endY);
+        if (this.shouldDrawBendSlur()) {
+            this._tieHeight = 0; // TODO: Bend slur height to be considered?
+        }
+        else {
+            this._tieHeight = this.getTieHeight(this._startX, this._startY, this._endX, this._endY);
+            const tieBoundingBox = TieGlyph.calculateActualTieHeight(1, this._startX, this._startY, this._endX, this._endY, this.tieDirection === BeamDirection.Down, this._tieHeight, this.renderer.smuflMetrics.tieMidpointThickness);
+            this._boundingBox = tieBoundingBox;
+            this.height = tieBoundingBox.h;
+            if (this.tieDirection === BeamDirection.Up) {
+                // the tie might go above `this.y` due to its shape
+                // here we calculate how much this is so we can consider the
+                // respective overflow
+                const overlap = this.y - tieBoundingBox.y;
+                if (overlap > 0) {
+                    this.y -= overlap;
+                }
+            }
+        }
+    }
+    paint(cx, cy, canvas) {
+        if (!this._shouldPaint) {
+            return;
+        }
+        if (this.shouldDrawBendSlur()) {
+            TieGlyph.drawBendSlur(canvas, cx + this._startX, cy + this._startY, cx + this._endX, cy + this._endY, this.tieDirection === BeamDirection.Down, 1, this.renderer.smuflMetrics.tieHeight);
+        }
+        else {
+            TieGlyph.paintTie(canvas, 1, cx + this._startX, cy + this._startY, cx + this._endX, cy + this._endY, this.tieDirection === BeamDirection.Down, this._tieHeight, this.renderer.smuflMetrics.tieMidpointThickness);
+        }
+    }
+    getTieHeight(_startX, _startY, _endX, _endY) {
+        return this.renderer.smuflMetrics.tieHeight;
+    }
+    calculateMultiSystemSlurY(renderer) {
+        const startRenderer = this.lookupStartBeatRenderer();
+        const startY = this.calculateStartY();
+        const relY = startY - startRenderer.y;
+        return renderer.y + relY;
+    }
+    shouldCreateMultiSystemSlur(renderer) {
+        const endStaff = this.lookupEndBeatRenderer()?.staff;
+        if (!endStaff) {
+            return true;
+        }
+        return renderer.staff.system.index < endStaff.system.index;
+    }
+    static calculateActualTieHeight(scale, x1, y1, x2, y2, down, offset, size) {
+        const cp = TieGlyph._computeBezierControlPoints(scale, x1, y1, x2, y2, down, offset, size);
+        if (cp.length === 0) {
+            return new Bounds(x1, y1, x2 - x1, y2 - y1);
+        }
+        // For a musical tie/slur, the extrema occur predictably near the midpoint
+        // Evaluate at midpoint (t=0.5) and check endpoints
+        const p0x = cp[0];
+        const p0y = cp[1];
+        const c1x = cp[2];
+        const c1y = cp[3];
+        const c2x = cp[4];
+        const c2y = cp[5];
+        const p1x = cp[6];
+        const p1y = cp[7];
+        // Evaluate at t=0.5 for midpoint
+        const midX = 0.125 * p0x + 0.375 * c1x + 0.375 * c2x + 0.125 * p1x;
+        const midY = 0.125 * p0y + 0.375 * c1y + 0.375 * c2y + 0.125 * p1y;
+        // Bounds are simply min/max of start, end, and midpoint
+        const xMin = Math.min(p0x, p1x, midX);
+        const xMax = Math.max(p0x, p1x, midX);
+        let yMin = Math.min(p0y, p1y, midY);
+        let yMax = Math.max(p0y, p1y, midY);
+        // Account for thickness of the tie/slur
+        if (down) {
+            yMax += size;
+        }
+        else {
+            yMin -= size;
+        }
+        const b = new Bounds();
+        b.x = xMin;
+        b.y = yMin;
+        b.w = xMax - xMin;
+        b.h = yMax - yMin;
+        return b;
+    }
+    static _computeBezierControlPoints(scale, x1, y1, x2, y2, down, offset, size) {
+        if (x1 === x2 && y1 === y2) {
+            return [];
+        }
+        // ensure endX > startX
+        if (x2 < x1) {
+            let t = x1;
+            x1 = x2;
+            x2 = t;
+            t = y1;
+            y1 = y2;
+            y2 = t;
+        }
+        //
+        // calculate control points
+        //
+        offset *= scale;
+        size *= scale;
+        if (down) {
+            offset *= -1;
+            size *= -1;
+        }
+        if (scale >= 1) {
+            size *= 1.2;
+        }
+        // calculate control points on horizontal axis then rotate:
+        /*
+              cp1x/cpy1                  cp2x/cpy2
+                      *----------------*
+                     /                  \
+                    /                    \
+            x1/y1  *                      * x2/y2
+
+            cp3 and cp4 are simply with lower height
+         */
+        const dY = y2 - y1;
+        const dX = x2 - x1;
+        const length = Math.sqrt(dX * dX + dY * dY);
+        let cp1x = x1 + length * 0.25;
+        let cp1y = y1 - offset;
+        let cp2x = x1 + length * 0.75;
+        let cp2y = y1 - offset;
+        let cp3x = x1 + length * 0.75;
+        let cp3y = y1 - offset - size;
+        let cp4x = x1 + length * 0.25;
+        let cp4y = y1 - offset - size;
+        const angle = Math.atan2(dY, dX);
+        [cp1x, cp1y] = TieGlyph._rotate(cp1x, cp1y, x1, y1, angle);
+        [cp2x, cp2y] = TieGlyph._rotate(cp2x, cp2y, x1, y1, angle);
+        [cp3x, cp3y] = TieGlyph._rotate(cp3x, cp3y, x1, y1, angle);
+        [cp4x, cp4y] = TieGlyph._rotate(cp4x, cp4y, x1, y1, angle);
+        return [x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2, cp3x, cp3y, cp4x, cp4y, x1, y1];
+    }
+    static _rotate(x, y, rotateX, rotateY, angle) {
+        const dx = x - rotateX;
+        const dy = y - rotateY;
+        const rx = dx * Math.cos(angle) - dy * Math.sin(angle);
+        const ry = dx * Math.sin(angle) + dy * Math.cos(angle);
+        return [rotateX + rx, rotateY + ry];
+    }
+    static paintTie(canvas, scale, x1, y1, x2, y2, down /*= false*/, offset /*= 22*/, size /*= 4*/) {
+        const cps = TieGlyph._computeBezierControlPoints(scale, x1, y1, x2, y2, down, offset, size);
+        canvas.beginPath();
+        canvas.moveTo(cps[0], cps[1]);
+        canvas.bezierCurveTo(cps[2], cps[3], cps[4], cps[5], cps[6], cps[7]);
+        canvas.bezierCurveTo(cps[8], cps[9], cps[10], cps[11], cps[12], cps[13]);
+        canvas.closePath();
+        canvas.fill();
+    }
+    static calculateBendSlurTopY(x1, y1, x2, y2, down, scale, bendSlurHeight) {
+        let normalVectorX = y2 - y1;
+        let normalVectorY = x2 - x1;
+        const length = Math.sqrt(normalVectorX * normalVectorX + normalVectorY * normalVectorY);
+        if (down) {
+            normalVectorX *= -1;
+        }
+        else {
+            normalVectorY *= -1;
+        }
+        // make to unit vector
+        normalVectorX /= length;
+        normalVectorY /= length;
+        let offset = bendSlurHeight * scale;
+        if (x2 - x1 < 20) {
+            offset /= 2;
+        }
+        const centerY = (y2 + y1) / 2;
+        const cp1Y = centerY + offset * normalVectorY;
+        return cp1Y;
+    }
+    static drawBendSlur(canvas, x1, y1, x2, y2, down, scale, bendSlurHeight, slurText) {
+        let normalVectorX = y2 - y1;
+        let normalVectorY = x2 - x1;
+        const length = Math.sqrt(normalVectorX * normalVectorX + normalVectorY * normalVectorY);
+        if (down) {
+            normalVectorX *= -1;
+        }
+        else {
+            normalVectorY *= -1;
+        }
+        // make to unit vector
+        normalVectorX /= length;
+        normalVectorY /= length;
+        // center of connection
+        // TODO: should be 1/3
+        const centerX = (x2 + x1) / 2;
+        const centerY = (y2 + y1) / 2;
+        let offset = bendSlurHeight * scale;
+        if (x2 - x1 < 20) {
+            offset /= 2;
+        }
+        const cp1X = centerX + offset * normalVectorX;
+        const cp1Y = centerY + offset * normalVectorY;
+        canvas.beginPath();
+        canvas.moveTo(x1, y1);
+        canvas.lineTo(cp1X, cp1Y);
+        canvas.lineTo(x2, y2);
+        canvas.stroke();
+        if (slurText) {
+            const w = canvas.measureText(slurText).width;
+            const textOffset = down ? 0 : -canvas.font.size;
+            canvas.fillText(slurText, cp1X - w / 2, cp1Y + textOffset);
+        }
+    }
+}
+/**
+ * A common tie implementation using note details for positioning
+ * @internal
+ */
+class NoteTieGlyph extends TieGlyph {
+    startNote;
+    endNote;
+    startNoteRenderer = null;
+    endNoteRenderer = null;
+    constructor(slurEffectId, startNote, endNote, forEnd) {
+        super(slurEffectId, forEnd);
+        this.startNote = startNote;
+        this.endNote = endNote;
+    }
+    get isLeftHandTap() {
+        return this.startNote === this.endNote;
+    }
+    getTieHeight(startX, startY, endX, endY) {
+        if (this.isLeftHandTap) {
+            return this.renderer.smuflMetrics.tieHeight;
+        }
+        return super.getTieHeight(startX, startY, endX, endY);
+    }
+    calculateTieDirection() {
+        // invert direction (if stems go up, ties go down to not cross them)
+        switch (this.lookupStartBeatRenderer().getBeatDirection(this.startNote.beat)) {
+            case BeamDirection.Up:
+                return BeamDirection.Down;
+            default:
+                return BeamDirection.Up;
+        }
+    }
+    calculateStartX() {
+        const startNoteRenderer = this.lookupStartBeatRenderer();
+        if (this.isLeftHandTap) {
+            return this.calculateEndX() - startNoteRenderer.smuflMetrics.leftHandTabTieWidth;
+        }
+        return startNoteRenderer.x + startNoteRenderer.getNoteX(this.startNote, this.getStartNotePosition());
+    }
+    getStartNotePosition() {
+        return NoteXPosition.Center;
+    }
+    calculateStartY() {
+        const startNoteRenderer = this.lookupStartBeatRenderer();
+        if (this.isLeftHandTap) {
+            return startNoteRenderer.y + startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Center);
+        }
+        switch (this.tieDirection) {
+            case BeamDirection.Up:
+                return startNoteRenderer.y + startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Top);
+            default:
+                return startNoteRenderer.y + startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Bottom);
+        }
+    }
+    calculateEndX() {
+        const endNoteRenderer = this.lookupEndBeatRenderer();
+        if (!endNoteRenderer) {
+            return this.calculateStartY() + this.renderer.smuflMetrics.leftHandTabTieWidth;
+        }
+        if (this.isLeftHandTap) {
+            return endNoteRenderer.x + endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Left);
+        }
+        return endNoteRenderer.x + endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Center);
+    }
+    getEndNotePosition() {
+        return NoteXPosition.Center;
+    }
+    caclculateEndY() {
+        const endNoteRenderer = this.lookupEndBeatRenderer();
+        if (!endNoteRenderer) {
+            return this.calculateStartY();
+        }
+        if (this.isLeftHandTap) {
+            return endNoteRenderer.y + endNoteRenderer.getNoteY(this.endNote, NoteYPosition.Center);
+        }
+        switch (this.tieDirection) {
+            case BeamDirection.Up:
+                return endNoteRenderer.y + endNoteRenderer.getNoteY(this.endNote, NoteYPosition.Top);
+            default:
+                return endNoteRenderer.y + endNoteRenderer.getNoteY(this.endNote, NoteYPosition.Bottom);
+        }
+    }
+    lookupEndBeatRenderer() {
+        if (!this.endNoteRenderer) {
+            this.endNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staffId, this.endNote.beat.voice.bar);
+        }
+        return this.endNoteRenderer;
+    }
+    lookupStartBeatRenderer() {
+        if (!this.startNoteRenderer) {
+            this.startNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staffId, this.startNote.beat.voice.bar);
+        }
+        return this.startNoteRenderer;
+    }
+    shouldDrawBendSlur() {
+        return false;
+    }
+}
+/**
+ * A tie glyph for continued multi-system ties/slurs
+ * @internal
+ */
+class ContinuationTieGlyph extends TieGlyph {
+    _startTie;
+    constructor(startTie) {
+        super(startTie.slurEffectId, false);
+        this._startTie = startTie;
+    }
+    lookupStartBeatRenderer() {
+        return this.renderer;
+    }
+    lookupEndBeatRenderer() {
+        return this.renderer;
+    }
+    shouldDrawBendSlur() {
+        return false;
+    }
+    calculateTieDirection() {
+        return this._startTie.tieDirection;
+    }
+    calculateStartY() {
+        return this._startTie.calculateMultiSystemSlurY(this.renderer);
+    }
+    caclculateEndY() {
+        return this.calculateStartY();
+    }
+    calculateStartX() {
+        return this.renderer.staff.barRenderers[0].x;
+    }
+    calculateEndX() {
+        const last = this.renderer.staff.barRenderers[this.renderer.staff.barRenderers.length - 1];
+        return last.x + last.width;
+    }
+}
+
 /**
  * This glyph acts as container for handling
  * multiple voice rendering
@@ -59346,6 +59958,63 @@ class TuningGlyph extends GlyphGroup {
     }
 }
 
+/**
+ * This registry keeps track of which slurs and ties were started and needs completion.
+ * Slurs might span multiple systems, and in such cases we need to create additional
+ * slur/ties in the intermediate and end system.
+ *
+ * @internal
+ *
+ */
+class SlurRegistry {
+    _staffLookup = new Map();
+    clear() {
+        this._staffLookup.clear();
+    }
+    startMultiSystemSlur(startGlyph) {
+        const staffId = SlurRegistry._staffId(startGlyph.renderer.staff);
+        let container;
+        if (!this._staffLookup.has(staffId)) {
+            container = {
+                startedSlurs: new Map()
+            };
+            this._staffLookup.set(staffId, container);
+        }
+        else {
+            container = this._staffLookup.get(staffId);
+        }
+        container.startedSlurs.set(startGlyph.slurEffectId, { startGlyph });
+    }
+    static _staffId(staff) {
+        return `${staff.modelStaff.index}.${staff.modelStaff.track.index}.${staff.staffId}`;
+    }
+    completeMultiSystemSlur(endGlyph) {
+        const staffId = SlurRegistry._staffId(endGlyph.renderer.staff);
+        if (!this._staffLookup.has(staffId)) {
+            return undefined;
+        }
+        const container = this._staffLookup.get(staffId);
+        if (container.startedSlurs.has(endGlyph.slurEffectId)) {
+            const info = container.startedSlurs.get(endGlyph.slurEffectId);
+            info.endGlyph = endGlyph;
+            return info.startGlyph;
+        }
+        return undefined;
+    }
+    *getAllContinuations(renderer) {
+        const staffId = SlurRegistry._staffId(renderer.staff);
+        if (!this._staffLookup.has(staffId) || renderer.index > 0) {
+            return;
+        }
+        const container = this._staffLookup.get(staffId);
+        for (const g of container.startedSlurs.values()) {
+            if (g.startGlyph.shouldCreateMultiSystemSlur(renderer)) {
+                yield g.startGlyph;
+            }
+        }
+    }
+}
+
 /**
  * A Staff represents a single line within a StaffSystem.
  * It stores BarRenderer instances created from a given factory.
@@ -59467,7 +60136,6 @@ class RenderStaff {
         this._sharedLayoutData = new Map();
         const lastBar = this.barRenderers[this.barRenderers.length - 1];
         this.barRenderers.splice(this.barRenderers.length - 1, 1);
-        this.system.layout.unregisterBarRenderer(this.staffId, lastBar);
         this.topOverflow = 0;
         this.bottomOverflow = 0;
         for (const r of this.barRenderers) {
@@ -59560,23 +60228,23 @@ class RenderStaff {
         // changes in the overflows
         let needsSecondPass = false;
         let topOverflow = this.topOverflow;
-        for (let i = 0; i < this.barRenderers.length; i++) {
-            this.barRenderers[i].y = this.topPadding + topOverflow;
-            if (this.barRenderers[i].finalizeRenderer()) {
+        for (const renderer of this.barRenderers) {
+            renderer.registerMultiSystemSlurs(this.system.layout.slurRegistry.getAllContinuations(renderer));
+            if (renderer.finalizeRenderer()) {
                 needsSecondPass = true;
             }
-            this.height = Math.max(this.height, this.barRenderers[i].height);
+            this.height = Math.max(this.height, renderer.height);
         }
         // 2nd pass: move renderers to correct position respecting the new overflows
         if (needsSecondPass) {
             topOverflow = this.topOverflow;
             // shift all the renderers to the new position to match required spacing
-            for (let i = 0; i < this.barRenderers.length; i++) {
-                this.barRenderers[i].y = this.topPadding + topOverflow;
+            for (const renderer of this.barRenderers) {
+                renderer.y = this.topPadding + topOverflow;
             }
             // finalize again (to align ties)
-            for (let i = 0; i < this.barRenderers.length; i++) {
-                this.barRenderers[i].finalizeRenderer();
+            for (const renderer of this.barRenderers) {
+                renderer.finalizeRenderer();
             }
         }
         if (this.height > 0) {
@@ -60182,6 +60850,7 @@ class StaffSystem {
                 if (newBarDisplayScale > barDisplayScale) {
                     barDisplayScale = newBarDisplayScale;
                 }
+                lastBar.afterReverted();
             }
             this.width -= width;
             this.computedWidth -= width;
@@ -60701,12 +61370,16 @@ class ScoreLayout {
     constructor(renderer) {
         this.renderer = renderer;
     }
+    slurRegistry = new SlurRegistry();
     resize() {
         this._lazyPartials.clear();
+        this.slurRegistry.clear();
         this.doResize();
     }
     layoutAndRender() {
         this._lazyPartials.clear();
+        this.slurRegistry.clear();
+        this._barRendererLookup.clear();
         this.profile = Environment.staveProfiles.get(this.renderer.settings.display.staveProfile);
         const score = this.renderer.score;
         this.firstBarIndex = ModelUtils.computeFirstDisplayedBarIndex(score, this.renderer.settings);
@@ -60975,17 +61648,6 @@ class ScoreLayout {
             }
         }
     }
-    unregisterBarRenderer(key, renderer) {
-        if (this._barRendererLookup.has(key)) {
-            const lookup = this._barRendererLookup.get(key);
-            lookup.delete(renderer.bar.id);
-            if (renderer.additionalMultiRestBars) {
-                for (const b of renderer.additionalMultiRestBars) {
-                    lookup.delete(b.id);
-                }
-            }
-        }
-    }
     getRendererForBar(key, bar) {
         const barRendererId = bar.id;
         if (this._barRendererLookup.has(key) && this._barRendererLookup.get(key).has(barRendererId)) {
@@ -61974,6 +62636,7 @@ class BarRendererBase {
     _voiceContainers = new Map();
     _postBeatGlyphs = new LeftToRightLayoutingGlyphGroup();
     _ties = [];
+    _multiSystemSlurs;
     topEffects;
     bottomEffects;
     get nextRenderer() {
@@ -62126,6 +62789,11 @@ class BarRendererBase {
         }
     }
     _appliedLayoutingInfo = 0;
+    afterReverted() {
+        this.staff = undefined;
+        this.registerMultiSystemSlurs(undefined);
+        this.isFinalized = false;
+    }
     afterStaffBarReverted() {
         this.topEffects.afterStaffBarReverted();
         this.bottomEffects.afterStaffBarReverted();
@@ -62171,13 +62839,26 @@ class BarRendererBase {
         return true;
     }
     isFinalized = false;
-    finalizeRenderer() {
-        this.isFinalized = true;
+    registerMultiSystemSlurs(startedTies) {
+        if (!startedTies) {
+            this._multiSystemSlurs = undefined;
+            return;
+        }
+        let ties = undefined;
+        for (const g of startedTies) {
+            const continuation = new ContinuationTieGlyph(g);
+            continuation.renderer = this;
+            continuation.tieDirection = g.tieDirection;
+            if (!ties) {
+                ties = [];
+            }
+            ties.push(continuation);
+        }
+        this._multiSystemSlurs = ties;
+    }
+    _finalizeTies(ties, barTop, barBottom) {
         let didChangeOverflows = false;
-        // allow spacing to be used for tie overflows
-        const barTop = this.y;
-        const barBottom = this.y + this.height;
-        for (const t of this._ties) {
+        for (const t of ties) {
             const tie = t;
             tie.doLayout();
             if (t.checkForOverflow) {
@@ -62198,6 +62879,21 @@ class BarRendererBase {
                 }
             }
         }
+        return didChangeOverflows;
+    }
+    finalizeRenderer() {
+        this.isFinalized = true;
+        let didChangeOverflows = false;
+        // allow spacing to be used for tie overflows
+        const barTop = this.y;
+        const barBottom = this.y + this.height;
+        if (this._finalizeTies(this._ties, barTop, barBottom)) {
+            didChangeOverflows = true;
+        }
+        const multiSystemSlurs = this._multiSystemSlurs;
+        if (multiSystemSlurs && this._finalizeTies(multiSystemSlurs, barTop, barBottom)) {
+            didChangeOverflows = true;
+        }
         const topHeightChanged = this.topEffects.finalizeEffects();
         const bottomHeightChanged = this.bottomEffects.finalizeEffects();
         if (topHeightChanged || bottomHeightChanged) {
@@ -62378,6 +63074,16 @@ class BarRendererBase {
         }
         canvas.color = this.resources.mainGlyphColor;
         this._postBeatGlyphs.paint(cx + this.x, cy + this.y, canvas);
+        this._paintMultiSystemSlurs(cx, cy, canvas);
+    }
+    _paintMultiSystemSlurs(cx, cy, canvas) {
+        const multiSystemSlurs = this._multiSystemSlurs;
+        if (!multiSystemSlurs) {
+            return;
+        }
+        for (const slur of multiSystemSlurs) {
+            slur.paint(cx, cy, canvas);
+        }
     }
     paintBackground(cx, cy, canvas) {
         this.layoutingInfo.paint(cx + this.x + this._preBeatGlyphs.x + this._preBeatGlyphs.width, cy + this.y + this.height, canvas);
@@ -64456,6 +65162,13 @@ class PageViewLayout extends ScoreLayout {
             }
         }
         else {
+            // clear out staves during re-layout, this info is outdated during
+            // re-layout of the bars
+            for (const r of this._allMasterBarRenderers) {
+                for (const b of r.renderers) {
+                    b.afterReverted();
+                }
+            }
             this._systems = [];
             let currentIndex = 0;
             const maxWidth = this._maxWidth;
@@ -64917,7 +65630,7 @@ class BarLineGlyph extends LeftToRightLayoutingGlyphGroup {
             // as during layout things are still moving
             let actualLineHeight = this.height;
             const thisStaff = renderer.staff;
-            const allStaves = renderer.staff.system.allStaves;
+            const allStaves = thisStaff.system.allStaves;
             let isExtended = false;
             if (this._extendToNextStaff && thisStaff.index < allStaves.length - 1) {
                 const nextStaff = allStaves[thisStaff.index + 1];
@@ -65099,7 +65812,7 @@ class LineBarRenderer extends BarRendererBase {
             }
             // during system fitting it can happen that we have fraction widths
             // but to have lines until the full end-pixel we round up.
-            // this way we avoid holes, 
+            // this way we avoid holes,
             const lineWidth = this.width;
             // we want the lines to be exactly virtually aligned with the respective Y-position
             // for note heads to align correctly
@@ -65865,375 +66578,23 @@ class LineBarRenderer extends BarRendererBase {
 /**
  * @internal
  */
-class TieGlyph extends Glyph {
-    startBeat;
-    endBeat;
-    yOffset = 0;
-    forEnd;
-    startNoteRenderer = null;
-    endNoteRenderer = null;
-    tieDirection = BeamDirection.Up;
-    constructor(startBeat, endBeat, forEnd) {
-        super(0, 0);
-        this.startBeat = startBeat;
-        this.endBeat = endBeat;
-        this.forEnd = forEnd;
-    }
-    _startX = 0;
-    _startY = 0;
-    _endX = 0;
-    _endY = 0;
-    _tieHeight = 0;
-    _shouldDraw = false;
-    _boundingBox;
-    get checkForOverflow() {
-        return this._boundingBox !== undefined;
-    }
-    getBoundingBoxTop() {
-        if (this._boundingBox) {
-            return this._boundingBox.y;
-        }
-        return this._startY;
-    }
-    getBoundingBoxBottom() {
-        if (this._boundingBox) {
-            return this._boundingBox.y + this._boundingBox.h;
-        }
-        return this._startY;
-    }
-    doLayout() {
-        this.width = 0;
-        // TODO fix nullability of start/end beat,
-        if (!this.endBeat) {
-            this._shouldDraw = false;
-            return;
-        }
-        const startNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staffId, this.startBeat.voice.bar);
-        this.startNoteRenderer = startNoteRenderer;
-        const endNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staffId, this.endBeat.voice.bar);
-        this.endNoteRenderer = endNoteRenderer;
-        this._startX = 0;
-        this._endX = 0;
-        this._startY = 0;
-        this._endY = 0;
-        this.height = 0;
-        this._shouldDraw = false;
-        // if we are on the tie start, we check if we
-        // either can draw till the end note, or we just can draw till the bar end
-        this.tieDirection = !startNoteRenderer
-            ? this.getBeamDirection(this.endBeat, endNoteRenderer)
-            : this.getBeamDirection(this.startBeat, startNoteRenderer);
-        if (!this.forEnd && startNoteRenderer) {
-            // line break or bar break
-            if (startNoteRenderer !== endNoteRenderer) {
-                this._startX = startNoteRenderer.x + this.getStartX();
-                this._startY = startNoteRenderer.y + this.getStartY() + this.yOffset;
-                // line break: to bar end
-                if (!endNoteRenderer || startNoteRenderer.staff !== endNoteRenderer.staff) {
-                    this._endX = startNoteRenderer.x + startNoteRenderer.width;
-                    this._endY = this._startY;
-                }
-                else {
-                    this._endX = endNoteRenderer.x + this.getEndX();
-                    this._endY = endNoteRenderer.y + this.getEndY() + this.yOffset;
-                }
-            }
-            else {
-                this._startX = startNoteRenderer.x + this.getStartX();
-                this._endX = endNoteRenderer.x + this.getEndX();
-                this._startY = startNoteRenderer.y + this.getStartY() + this.yOffset;
-                this._endY = endNoteRenderer.y + this.getEndY() + this.yOffset;
-            }
-            this._shouldDraw = true;
-        }
-        else if (!startNoteRenderer || startNoteRenderer.staff !== endNoteRenderer.staff) {
-            this._startX = endNoteRenderer.x;
-            this._endX = endNoteRenderer.x + this.getEndX();
-            this._startY = endNoteRenderer.y + this.getEndY() + this.yOffset;
-            this._endY = this._startY;
-            this._shouldDraw = true;
-        }
-        this._boundingBox = undefined;
-        if (this._shouldDraw) {
-            this.y = Math.min(this._startY, this._endY);
-            if (this.shouldDrawBendSlur()) {
-                this._tieHeight = 0; // TODO: Bend slur height to be considered?
-            }
-            else {
-                this._tieHeight = this.getTieHeight(this._startX, this._startY, this._endX, this._endY);
-                const tieBoundingBox = TieGlyph.calculateActualTieHeight(1, this._startX, this._startY, this._endX, this._endY, this.tieDirection === BeamDirection.Down, this._tieHeight, this.renderer.smuflMetrics.tieMidpointThickness);
-                this._boundingBox = tieBoundingBox;
-                this.height = tieBoundingBox.h;
-                if (this.tieDirection === BeamDirection.Up) {
-                    // the tie might go above `this.y` due to its shape
-                    // here we calculate how much this is so we can consider the
-                    // respective overflow
-                    const overlap = this.y - tieBoundingBox.y;
-                    if (overlap > 0) {
-                        this.y -= overlap;
-                    }
-                }
-            }
-        }
-    }
-    paint(cx, cy, canvas) {
-        if (this._shouldDraw) {
-            if (this.shouldDrawBendSlur()) {
-                TieGlyph.drawBendSlur(canvas, cx + this._startX, cy + this._startY, cx + this._endX, cy + this._endY, this.tieDirection === BeamDirection.Down, 1, this.renderer.smuflMetrics.tieHeight);
-            }
-            else {
-                TieGlyph.paintTie(canvas, 1, cx + this._startX, cy + this._startY, cx + this._endX, cy + this._endY, this.tieDirection === BeamDirection.Down, this._tieHeight, this.renderer.smuflMetrics.tieMidpointThickness);
-            }
-        }
-    }
-    shouldDrawBendSlur() {
-        return false;
-    }
-    getTieHeight(_startX, _startY, _endX, _endY) {
-        return this.renderer.smuflMetrics.tieHeight;
-    }
-    getBeamDirection(_beat, _noteRenderer) {
-        return BeamDirection.Down;
-    }
-    getStartY() {
-        return 0;
-    }
-    getEndY() {
-        return 0;
-    }
-    getStartX() {
-        return 0;
-    }
-    getEndX() {
-        return 0;
-    }
-    static calculateActualTieHeight(scale, x1, y1, x2, y2, down, offset, size) {
-        const cp = TieGlyph._computeBezierControlPoints(scale, x1, y1, x2, y2, down, offset, size);
-        // For a musical tie/slur, the extrema occur predictably near the midpoint
-        // Evaluate at midpoint (t=0.5) and check endpoints
-        const p0x = cp[0];
-        const p0y = cp[1];
-        const c1x = cp[2];
-        const c1y = cp[3];
-        const c2x = cp[4];
-        const c2y = cp[5];
-        const p1x = cp[6];
-        const p1y = cp[7];
-        // Evaluate at t=0.5 for midpoint
-        const midX = 0.125 * p0x + 0.375 * c1x + 0.375 * c2x + 0.125 * p1x;
-        const midY = 0.125 * p0y + 0.375 * c1y + 0.375 * c2y + 0.125 * p1y;
-        // Bounds are simply min/max of start, end, and midpoint
-        const xMin = Math.min(p0x, p1x, midX);
-        const xMax = Math.max(p0x, p1x, midX);
-        let yMin = Math.min(p0y, p1y, midY);
-        let yMax = Math.max(p0y, p1y, midY);
-        // Account for thickness of the tie/slur
-        if (down) {
-            yMax += size;
-        }
-        else {
-            yMin -= size;
-        }
-        const b = new Bounds();
-        b.x = xMin;
-        b.y = yMin;
-        b.w = xMax - xMin;
-        b.h = yMax - yMin;
-        return b;
-    }
-    static _computeBezierControlPoints(scale, x1, y1, x2, y2, down, offset, size) {
-        if (x1 === x2 && y1 === y2) {
-            return [];
-        }
-        // ensure endX > startX
-        if (x2 < x1) {
-            let t = x1;
-            x1 = x2;
-            x2 = t;
-            t = y1;
-            y1 = y2;
-            y2 = t;
-        }
-        //
-        // calculate control points
-        //
-        offset *= scale;
-        size *= scale;
-        if (down) {
-            offset *= -1;
-            size *= -1;
-        }
-        if (scale >= 1) {
-            size *= 1.2;
-        }
-        // calculate control points on horizontal axis then rotate:
-        /*
-              cp1x/cpy1                  cp2x/cpy2
-                      *----------------*
-                     /                  \
-                    /                    \
-            x1/y1  *                      * x2/y2
-
-            cp3 and cp4 are simply with lower height
-         */
-        const dY = y2 - y1;
-        const dX = x2 - x1;
-        const length = Math.sqrt(dX * dX + dY * dY);
-        let cp1x = x1 + length * 0.25;
-        let cp1y = y1 - offset;
-        let cp2x = x1 + length * 0.75;
-        let cp2y = y1 - offset;
-        let cp3x = x1 + length * 0.75;
-        let cp3y = y1 - offset - size;
-        let cp4x = x1 + length * 0.25;
-        let cp4y = y1 - offset - size;
-        const angle = Math.atan2(dY, dX);
-        [cp1x, cp1y] = TieGlyph._rotate(cp1x, cp1y, x1, y1, angle);
-        [cp2x, cp2y] = TieGlyph._rotate(cp2x, cp2y, x1, y1, angle);
-        [cp3x, cp3y] = TieGlyph._rotate(cp3x, cp3y, x1, y1, angle);
-        [cp4x, cp4y] = TieGlyph._rotate(cp4x, cp4y, x1, y1, angle);
-        return [x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2, cp3x, cp3y, cp4x, cp4y, x1, y1];
-    }
-    static _rotate(x, y, rotateX, rotateY, angle) {
-        const dx = x - rotateX;
-        const dy = y - rotateY;
-        const rx = dx * Math.cos(angle) - dy * Math.sin(angle);
-        const ry = dx * Math.sin(angle) + dy * Math.cos(angle);
-        return [rotateX + rx, rotateY + ry];
-    }
-    static paintTie(canvas, scale, x1, y1, x2, y2, down /*= false*/, offset /*= 22*/, size /*= 4*/) {
-        const cps = TieGlyph._computeBezierControlPoints(scale, x1, y1, x2, y2, down, offset, size);
-        canvas.beginPath();
-        canvas.moveTo(cps[0], cps[1]);
-        canvas.bezierCurveTo(cps[2], cps[3], cps[4], cps[5], cps[6], cps[7]);
-        canvas.bezierCurveTo(cps[8], cps[9], cps[10], cps[11], cps[12], cps[13]);
-        canvas.closePath();
-        canvas.fill();
-    }
-    static calculateBendSlurTopY(x1, y1, x2, y2, down, scale, bendSlurHeight) {
-        let normalVectorX = y2 - y1;
-        let normalVectorY = x2 - x1;
-        const length = Math.sqrt(normalVectorX * normalVectorX + normalVectorY * normalVectorY);
-        if (down) {
-            normalVectorX *= -1;
-        }
-        else {
-            normalVectorY *= -1;
-        }
-        // make to unit vector
-        normalVectorX /= length;
-        normalVectorY /= length;
-        let offset = bendSlurHeight * scale;
-        if (x2 - x1 < 20) {
-            offset /= 2;
-        }
-        const centerY = (y2 + y1) / 2;
-        const cp1Y = centerY + offset * normalVectorY;
-        return cp1Y;
-    }
-    static drawBendSlur(canvas, x1, y1, x2, y2, down, scale, bendSlurHeight, slurText) {
-        let normalVectorX = y2 - y1;
-        let normalVectorY = x2 - x1;
-        const length = Math.sqrt(normalVectorX * normalVectorX + normalVectorY * normalVectorY);
-        if (down) {
-            normalVectorX *= -1;
-        }
-        else {
-            normalVectorY *= -1;
-        }
-        // make to unit vector
-        normalVectorX /= length;
-        normalVectorY /= length;
-        // center of connection
-        // TODO: should be 1/3
-        const centerX = (x2 + x1) / 2;
-        const centerY = (y2 + y1) / 2;
-        let offset = bendSlurHeight * scale;
-        if (x2 - x1 < 20) {
-            offset /= 2;
-        }
-        const cp1X = centerX + offset * normalVectorX;
-        const cp1Y = centerY + offset * normalVectorY;
-        canvas.beginPath();
-        canvas.moveTo(x1, y1);
-        canvas.lineTo(cp1X, cp1Y);
-        canvas.lineTo(x2, y2);
-        canvas.stroke();
-        if (slurText) {
-            const w = canvas.measureText(slurText).width;
-            const textOffset = down ? 0 : -canvas.font.size;
-            canvas.fillText(slurText, cp1X - w / 2, cp1Y + textOffset);
-        }
-    }
-}
-
-/**
- * @internal
- */
-class NumberedTieGlyph extends TieGlyph {
-    startNote;
-    endNote;
-    constructor(startNote, endNote, forEnd = false) {
-        super(!startNote ? null : startNote.beat, !endNote ? null : endNote.beat, forEnd);
-        this.startNote = startNote;
-        this.endNote = endNote;
-    }
-    get _isLeftHandTap() {
-        return this.startNote === this.endNote;
-    }
+class NumberedTieGlyph extends NoteTieGlyph {
     shouldDrawBendSlur() {
         return (this.renderer.settings.notation.extendBendArrowsOnTiedNotes &&
             !!this.startNote.bendOrigin &&
             this.startNote.isTieOrigin);
     }
-    doLayout() {
-        super.doLayout();
-    }
-    getBeamDirection(_beat, _noteRenderer) {
+    calculateTieDirection() {
         return BeamDirection.Up;
     }
-    getStartY() {
-        return this.startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Top);
-    }
-    getEndY() {
-        return this.getStartY();
-    }
-    getStartX() {
-        if (this._isLeftHandTap) {
-            return this.getEndX() - this.startNoteRenderer.smuflMetrics.leftHandTabTieWidth;
-        }
-        return this.startNoteRenderer.getNoteX(this.startNote, NoteXPosition.Center);
-    }
-    getEndX() {
-        if (this._isLeftHandTap) {
-            return this.endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Left);
-        }
-        return this.endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Center);
-    }
 }
 
 /**
  * @internal
  */
-class TabTieGlyph extends TieGlyph {
-    startNote;
-    endNote;
-    constructor(startNote, endNote, forEnd = false) {
-        super(startNote.beat, endNote.beat, forEnd);
-        this.startNote = startNote;
-        this.endNote = endNote;
-    }
-    get _isLeftHandTap() {
-        return this.startNote === this.endNote;
-    }
-    getTieHeight(startX, startY, endX, endY) {
-        if (this._isLeftHandTap) {
-            return this.startNoteRenderer.smuflMetrics.tieHeight;
-        }
-        return super.getTieHeight(startX, startY, endX, endY);
-    }
-    getBeamDirection(_beat, _noteRenderer) {
-        if (this._isLeftHandTap) {
+class TabTieGlyph extends NoteTieGlyph {
+    calculateTieDirection() {
+        if (this.isLeftHandTap) {
             return BeamDirection.Up;
         }
         return TabTieGlyph.getBeamDirectionForNote(this.startNote);
@@ -66241,54 +66602,25 @@ class TabTieGlyph extends TieGlyph {
     static getBeamDirectionForNote(note) {
         return note.string > 3 ? BeamDirection.Up : BeamDirection.Down;
     }
-    getStartY() {
-        if (this._isLeftHandTap) {
-            return this.startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Center);
-        }
-        if (this.tieDirection === BeamDirection.Up) {
-            return this.startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Top);
-        }
-        return this.startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Bottom);
-    }
-    getEndY() {
-        return this.getStartY();
-    }
-    getStartX() {
-        if (this._isLeftHandTap) {
-            return this.getEndX() - this.renderer.smuflMetrics.leftHandTabTieWidth;
-        }
-        return this.startNoteRenderer.getNoteX(this.startNote, NoteXPosition.Center);
-    }
-    getEndX() {
-        if (this._isLeftHandTap) {
-            return this.endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Left);
-        }
-        return this.endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Center);
-    }
 }
 
 /**
  * @internal
  */
-class NumberedSlurGlyph extends TabTieGlyph {
-    _direction;
+class TabSlurGlyph extends TabTieGlyph {
     _forSlide;
-    constructor(startNote, endNote, forSlide, forEnd = false) {
-        super(startNote, endNote, forEnd);
-        this._direction = BeamDirection.Up;
+    constructor(slurEffectId, startNote, endNote, forSlide, forEnd) {
+        super(slurEffectId, startNote, endNote, forEnd);
         this._forSlide = forSlide;
     }
     getTieHeight(startX, _startY, endX, _endY) {
-        return Math.log(endX - startX + 1) * this.renderer.settings.notation.slurHeight / 2;
+        return (Math.log(endX - startX + 1) * this.renderer.settings.notation.slurHeight) / 2;
     }
     tryExpand(startNote, endNote, forSlide, forEnd) {
         // same type required
         if (this._forSlide !== forSlide) {
             return false;
         }
-        if (this.forEnd !== forEnd) {
-            return false;
-        }
         // same start and endbeat
         if (this.startNote.beat.id !== startNote.beat.id) {
             return false;
@@ -66296,41 +66628,43 @@ class NumberedSlurGlyph extends TabTieGlyph {
         if (this.endNote.beat.id !== endNote.beat.id) {
             return false;
         }
+        const isForEnd = this.renderer === this.lookupEndBeatRenderer();
+        if (isForEnd !== forEnd) {
+            return false;
+        }
+        // same draw direction
+        if (this.tieDirection !== TabTieGlyph.getBeamDirectionForNote(startNote)) {
+            return false;
+        }
         // if we can expand, expand in correct direction
-        switch (this._direction) {
+        switch (this.tieDirection) {
             case BeamDirection.Up:
                 if (startNote.realValue > this.startNote.realValue) {
                     this.startNote = startNote;
-                    this.startBeat = startNote.beat;
                 }
                 if (endNote.realValue > this.endNote.realValue) {
                     this.endNote = endNote;
-                    this.endBeat = endNote.beat;
                 }
                 break;
             case BeamDirection.Down:
                 if (startNote.realValue < this.startNote.realValue) {
                     this.startNote = startNote;
-                    this.startBeat = startNote.beat;
                 }
                 if (endNote.realValue < this.endNote.realValue) {
                     this.endNote = endNote;
-                    this.endBeat = endNote.beat;
                 }
                 break;
         }
         return true;
     }
-    paint(cx, cy, canvas) {
-        const startNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staffId, this.startBeat.voice.bar);
-        const direction = this.getBeamDirection(this.startBeat, startNoteRenderer);
-        const slurId = `numbered.slur.${this.startNote.beat.id}.${this.endNote.beat.id}.${direction}`;
-        const renderer = this.renderer;
-        const isSlurRendered = renderer.staff.getSharedLayoutData(slurId, false);
-        if (!isSlurRendered) {
-            renderer.staff.setSharedLayoutData(slurId, true);
-            super.paint(cx, cy, canvas);
-        }
+}
+
+/**
+ * @internal
+ */
+class NumberedSlurGlyph extends TabSlurGlyph {
+    calculateTieDirection() {
+        return BeamDirection.Up;
     }
 }
 
@@ -66338,23 +66672,31 @@ class NumberedSlurGlyph extends TabTieGlyph {
  * @internal
  */
 class NumberedBeatContainerGlyph extends BeatContainerGlyph {
+    _slurs = new Map();
     _effectSlurs = [];
+    doLayout() {
+        this._slurs.clear();
+        this._effectSlurs = [];
+        super.doLayout();
+    }
     createTies(n) {
         // create a tie if any effect requires it
         if (!n.isVisible) {
             return;
         }
-        if (n.isTieOrigin && n.tieDestination.isVisible) {
-            const tie = new NumberedTieGlyph(n, n.tieDestination, false);
+        if (n.isTieOrigin && n.tieDestination.isVisible && !this._slurs.has('numbered.tie')) {
+            const tie = new NumberedTieGlyph(`numbered.tie.${n.beat.id}`, n, n.tieDestination, false);
             this.addTie(tie);
+            this._slurs.set(tie.slurEffectId, tie);
         }
         if (n.isTieDestination) {
-            const tie = new NumberedTieGlyph(n.tieOrigin, n, true);
+            const tie = new NumberedTieGlyph(`numbered.tie.${n.tieOrigin.beat.id}`, n.tieOrigin, n, true);
             this.addTie(tie);
         }
-        if (n.isLeftHandTapped && !n.isHammerPullDestination) {
-            const tapSlur = new NumberedTieGlyph(n, n, false);
+        if (n.isLeftHandTapped && !n.isHammerPullDestination && !this._slurs.has(`numbered.tie.leftHandTap.${n.beat.id}`)) {
+            const tapSlur = new NumberedTieGlyph(`numbered.tie.leftHandTap.${n.beat.id}`, n, n, false);
             this.addTie(tapSlur);
+            this._slurs.set(tapSlur.slurEffectId, tapSlur);
         }
         // start effect slur on first beat
         if (n.isEffectSlurOrigin && n.effectSlurDestination) {
@@ -66366,9 +66708,11 @@ class NumberedBeatContainerGlyph extends BeatContainerGlyph {
                 }
             }
             if (!expanded) {
-                const effectSlur = new NumberedSlurGlyph(n, n.effectSlurDestination, false, false);
+                const effectSlur = new NumberedSlurGlyph(`numbered.slur.effect`, n, n.effectSlurDestination, false, false);
                 this._effectSlurs.push(effectSlur);
                 this.addTie(effectSlur);
+                this._slurs.set(effectSlur.slurEffectId, effectSlur);
+                this._slurs.set('numbered.slur.effect', effectSlur);
             }
         }
         // end effect slur on last beat
@@ -66381,9 +66725,11 @@ class NumberedBeatContainerGlyph extends BeatContainerGlyph {
                 }
             }
             if (!expanded) {
-                const effectSlur = new NumberedSlurGlyph(n.effectSlurOrigin, n, false, true);
+                const effectSlur = new NumberedSlurGlyph(`numbered.slur.effect`, n.effectSlurOrigin, n, false, true);
                 this._effectSlurs.push(effectSlur);
                 this.addTie(effectSlur);
+                this._slurs.set(effectSlur.slurEffectId, effectSlur);
+                this._slurs.set('numbered.slur.effect', effectSlur);
             }
         }
     }
@@ -66776,10 +67122,11 @@ class NumberedBeatGlyph extends BeatOnNoteGlyphBase {
         if (sr.shortestDuration < this.container.beat.duration) {
             sr.shortestDuration = this.container.beat.duration;
         }
-        const glyphY = sr.getLineY(sr.getNoteLine());
         if (!this.container.beat.isEmpty) {
+            const glyphY = sr.getLineY(0);
             let numberWithinOctave = '0';
             if (this.container.beat.notes.length > 0) {
+                const note = this.container.beat.notes[0];
                 const kst = this.renderer.bar.keySignatureType;
                 const ks = this.renderer.bar.keySignature;
                 const ksi = ks + 7;
@@ -66787,7 +67134,6 @@ class NumberedBeatGlyph extends BeatOnNoteGlyphBase {
                     ? NumberedBeatGlyph.minorKeySignatureOneValues
                     : NumberedBeatGlyph.majorKeySignatureOneValues;
                 const oneNoteValue = oneNoteValues[ksi];
-                const note = this.container.beat.notes[0];
                 if (note.isDead) {
                     numberWithinOctave = 'X';
                 }
@@ -66834,7 +67180,7 @@ class NumberedBeatGlyph extends BeatOnNoteGlyphBase {
             // Note dots
             if (this.container.beat.dots > 0 && this.container.beat.duration >= Duration.Quarter) {
                 for (let i = 0; i < this.container.beat.dots; i++) {
-                    const dot = new AugmentationDotGlyph(0, sr.getLineY(0));
+                    const dot = new AugmentationDotGlyph(0, glyphY);
                     dot.renderer = this.renderer;
                     this.addEffect(dot);
                 }
@@ -66862,7 +67208,7 @@ class NumberedBeatGlyph extends BeatOnNoteGlyphBase {
                 numberOfQuarterNotes += numberOfAddedQuarters;
             }
             for (let i = 0; i < numberOfQuarterNotes - 1; i++) {
-                const dash = new NumberedDashGlyph(0, sr.getLineY(0), this.container.beat);
+                const dash = new NumberedDashGlyph(0, glyphY, this.container.beat);
                 dash.renderer = this.renderer;
                 this.addNormal(dash);
             }
@@ -67332,7 +67678,7 @@ class NumberedBarRenderer extends LineBarRenderer {
             }
         }
     }
-    getNoteLine() {
+    getNoteLine(_note) {
         return 0;
     }
     get tupletOffset() {
@@ -69547,87 +69893,128 @@ class ScoreBendGlyph extends ScoreHelperNotesBaseGlyph {
  * @internal
  */
 class ScoreLegatoGlyph extends TieGlyph {
-    constructor(startBeat, endBeat, forEnd = false) {
-        super(startBeat, endBeat, forEnd);
+    startBeat;
+    endBeat;
+    startBeatRenderer = null;
+    endBeatRenderer = null;
+    constructor(slurEffectId, startBeat, endBeat, forEnd) {
+        super(slurEffectId, forEnd);
+        this.startBeat = startBeat;
+        this.endBeat = endBeat;
     }
     doLayout() {
         super.doLayout();
     }
-    getBeamDirection(beat, noteRenderer) {
-        if (beat.isRest) {
+    lookupStartBeatRenderer() {
+        if (!this.startBeatRenderer) {
+            this.startBeatRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staffId, this.startBeat.voice.bar);
+        }
+        return this.startBeatRenderer;
+    }
+    lookupEndBeatRenderer() {
+        if (!this.endBeatRenderer) {
+            this.endBeatRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staffId, this.endBeat.voice.bar);
+        }
+        return this.endBeatRenderer;
+    }
+    shouldDrawBendSlur() {
+        return false;
+    }
+    calculateTieDirection() {
+        if (this.startBeat.isRest) {
             return BeamDirection.Up;
         }
         // invert direction (if stems go up, ties go down to not cross them)
-        switch (noteRenderer.getBeatDirection(beat)) {
+        switch (this.lookupStartBeatRenderer().getBeatDirection(this.startBeat)) {
             case BeamDirection.Up:
                 return BeamDirection.Down;
             default:
                 return BeamDirection.Up;
         }
     }
-    getStartY() {
+    calculateStartX() {
+        const startBeatRenderer = this.lookupStartBeatRenderer();
+        return startBeatRenderer.x + startBeatRenderer.getBeatX(this.startBeat, BeatXPosition.MiddleNotes);
+    }
+    calculateStartY() {
+        const startBeatRenderer = this.lookupStartBeatRenderer();
         if (this.startBeat.isRest) {
-            // below all lines
-            return this.startNoteRenderer.getScoreY(9);
+            switch (this.tieDirection) {
+                case BeamDirection.Up:
+                    return (startBeatRenderer.y +
+                        startBeatRenderer.getBeatContainer(this.startBeat).onNotes.getBoundingBoxTop());
+                default:
+                    return (startBeatRenderer.y +
+                        startBeatRenderer.getBeatContainer(this.startBeat).onNotes.getBoundingBoxBottom());
+            }
         }
         switch (this.tieDirection) {
             case BeamDirection.Up:
                 // below lowest note
-                return this.startNoteRenderer.getNoteY(this.startBeat.maxNote, NoteYPosition.Top);
+                return startBeatRenderer.y + startBeatRenderer.getNoteY(this.startBeat.maxNote, NoteYPosition.Top);
             default:
-                return this.startNoteRenderer.getNoteY(this.startBeat.minNote, NoteYPosition.Bottom);
+                return startBeatRenderer.y + startBeatRenderer.getNoteY(this.startBeat.minNote, NoteYPosition.Bottom);
         }
     }
-    getEndY() {
-        const endNoteScoreRenderer = this.endNoteRenderer;
+    calculateEndX() {
+        const endBeatRenderer = this.lookupEndBeatRenderer();
+        if (!endBeatRenderer) {
+            return this.calculateStartX() + this.renderer.smuflMetrics.leftHandTabTieWidth;
+        }
+        const endBeamDirection = endBeatRenderer.getBeatDirection(this.endBeat);
+        return (endBeatRenderer.x +
+            endBeatRenderer.getBeatX(this.endBeat, this.endBeat.duration > Duration.Whole && endBeamDirection === this.tieDirection
+                ? BeatXPosition.Stem
+                : BeatXPosition.MiddleNotes));
+    }
+    caclculateEndY() {
+        const endBeatRenderer = this.lookupEndBeatRenderer();
+        if (!endBeatRenderer) {
+            return this.calculateStartY();
+        }
         if (this.endBeat.isRest) {
             switch (this.tieDirection) {
                 case BeamDirection.Up:
-                    return endNoteScoreRenderer.getScoreY(9);
+                    return (endBeatRenderer.y + endBeatRenderer.getBeatContainer(this.endBeat).onNotes.getBoundingBoxTop());
                 default:
-                    return endNoteScoreRenderer.getScoreY(0);
+                    return (endBeatRenderer.y +
+                        endBeatRenderer.getBeatContainer(this.endBeat).onNotes.getBoundingBoxBottom());
             }
         }
-        const startBeamDirection = this.startNoteRenderer.getBeatDirection(this.startBeat);
-        const endBeamDirection = endNoteScoreRenderer.getBeatDirection(this.endBeat);
+        const startBeamDirection = this.lookupStartBeatRenderer().getBeatDirection(this.startBeat);
+        const endBeamDirection = endBeatRenderer.getBeatDirection(this.endBeat);
         if (startBeamDirection !== endBeamDirection && this.startBeat.graceType === GraceType.None) {
             if (endBeamDirection === this.tieDirection) {
                 switch (this.tieDirection) {
                     case BeamDirection.Up:
                         // stem upper end
-                        return endNoteScoreRenderer.getNoteY(this.endBeat.maxNote, NoteYPosition.TopWithStem);
+                        return (endBeatRenderer.y +
+                            endBeatRenderer.getNoteY(this.endBeat.maxNote, NoteYPosition.TopWithStem));
                     default:
                         // stem lower end
-                        return endNoteScoreRenderer.getNoteY(this.endBeat.minNote, NoteYPosition.BottomWithStem);
+                        return (endBeatRenderer.y +
+                            endBeatRenderer.getNoteY(this.endBeat.minNote, NoteYPosition.BottomWithStem));
                 }
             }
             switch (this.tieDirection) {
                 case BeamDirection.Up:
                     // stem upper end
-                    return endNoteScoreRenderer.getNoteY(this.endBeat.maxNote, NoteYPosition.BottomWithStem);
+                    return (endBeatRenderer.y +
+                        endBeatRenderer.getNoteY(this.endBeat.maxNote, NoteYPosition.BottomWithStem));
                 default:
                     // stem lower end
-                    return endNoteScoreRenderer.getNoteY(this.endBeat.minNote, NoteYPosition.TopWithStem);
+                    return (endBeatRenderer.y + endBeatRenderer.getNoteY(this.endBeat.minNote, NoteYPosition.TopWithStem));
             }
         }
         switch (this.tieDirection) {
             case BeamDirection.Up:
                 // below lowest note
-                return endNoteScoreRenderer.getNoteY(this.endBeat.maxNote, NoteYPosition.Top);
+                return endBeatRenderer.y + endBeatRenderer.getNoteY(this.endBeat.maxNote, NoteYPosition.Top);
             default:
                 // above highest note
-                return endNoteScoreRenderer.getNoteY(this.endBeat.minNote, NoteYPosition.Bottom);
+                return endBeatRenderer.y + endBeatRenderer.getNoteY(this.endBeat.minNote, NoteYPosition.Bottom);
         }
     }
-    getStartX() {
-        return this.startNoteRenderer.getBeatX(this.startBeat, BeatXPosition.MiddleNotes);
-    }
-    getEndX() {
-        const endBeamDirection = this.endNoteRenderer.getBeatDirection(this.endBeat);
-        return this.endNoteRenderer.getBeatX(this.endBeat, this.endBeat.duration > Duration.Whole && endBeamDirection === this.tieDirection
-            ? BeatXPosition.Stem
-            : BeatXPosition.MiddleNotes);
-    }
 }
 
 /**
@@ -69827,142 +70214,106 @@ class ScoreSlideLineGlyph extends Glyph {
 /**
  * @internal
  */
-class ScoreSlurGlyph extends ScoreLegatoGlyph {
-    _startNote;
-    _endNote;
-    constructor(startNote, endNote, forEnd = false) {
-        super(startNote.beat, endNote.beat, forEnd);
-        this._startNote = startNote;
-        this._endNote = endNote;
+class ScoreTieGlyph extends NoteTieGlyph {
+    shouldDrawBendSlur() {
+        return (this.renderer.settings.notation.extendBendArrowsOnTiedNotes &&
+            !!this.startNote.bendOrigin &&
+            this.startNote.isTieOrigin);
+    }
+    calculateStartX() {
+        if (this.isLeftHandTap) {
+            return this.calculateEndX() - this.renderer.smuflMetrics.leftHandTabTieWidth;
+        }
+        return this.renderer.x + this.renderer.getBeatX(this.startNote.beat, BeatXPosition.PostNotes);
     }
+    calculateEndX() {
+        const endNoteRenderer = this.lookupEndBeatRenderer();
+        if (!endNoteRenderer) {
+            return this.calculateStartX() + this.renderer.smuflMetrics.leftHandTabTieWidth;
+        }
+        if (this.isLeftHandTap) {
+            return endNoteRenderer.x + endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Left);
+        }
+        return endNoteRenderer.x + endNoteRenderer.getBeatX(this.endNote.beat, BeatXPosition.PreNotes);
+    }
+}
+
+/**
+ * @internal
+ */
+class ScoreSlurGlyph extends ScoreTieGlyph {
     getTieHeight(startX, _startY, endX, _endY) {
-        return Math.log2(endX - startX + 1) * this.renderer.settings.notation.slurHeight / 2;
+        return (Math.log2(endX - startX + 1) * this.renderer.settings.notation.slurHeight) / 2;
     }
-    getStartY() {
+    calculateStartX() {
+        return (this.renderer.x +
+            (this._isStartCentered()
+                ? this.renderer.getBeatX(this.startNote.beat, BeatXPosition.MiddleNotes)
+                : this.renderer.getNoteX(this.startNote, NoteXPosition.Right)));
+    }
+    calculateStartY() {
         if (this._isStartCentered()) {
             switch (this.tieDirection) {
                 case BeamDirection.Up:
-                    // below lowest note
-                    return this.startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Top);
+                    return this.renderer.y + this.renderer.getNoteY(this.startNote, NoteYPosition.Top);
                 default:
-                    return this.startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Bottom);
+                    return this.renderer.y + this.renderer.getNoteY(this.startNote, NoteYPosition.Bottom);
             }
         }
-        return this.startNoteRenderer.getNoteY(this._startNote, NoteYPosition.Center);
+        return this.renderer.y + this.renderer.getNoteY(this.startNote, NoteYPosition.Center);
     }
-    getEndY() {
+    calculateEndX() {
+        const endNoteRenderer = this.lookupEndBeatRenderer();
+        if (!endNoteRenderer) {
+            return this.calculateStartX() + this.renderer.smuflMetrics.leftHandTabTieWidth;
+        }
+        if (this._isEndCentered()) {
+            if (this._isEndOnStem()) {
+                return endNoteRenderer.x + endNoteRenderer.getBeatX(this.endNote.beat, BeatXPosition.Stem);
+            }
+            return endNoteRenderer.x + endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Center);
+        }
+        return endNoteRenderer.x + endNoteRenderer.getBeatX(this.endNote.beat, BeatXPosition.PreNotes);
+    }
+    caclculateEndY() {
+        const endNoteRenderer = this.lookupEndBeatRenderer();
+        if (!endNoteRenderer) {
+            return this.calculateStartY();
+        }
         if (this._isEndCentered()) {
             if (this._isEndOnStem()) {
                 switch (this.tieDirection) {
                     case BeamDirection.Up:
-                        return this.endNoteRenderer.getNoteY(this._endNote, NoteYPosition.TopWithStem);
+                        return endNoteRenderer.y + endNoteRenderer.getNoteY(this.endNote, NoteYPosition.TopWithStem);
                     default:
-                        return this.endNoteRenderer.getNoteY(this._endNote, NoteYPosition.BottomWithStem);
+                        return endNoteRenderer.y + endNoteRenderer.getNoteY(this.endNote, NoteYPosition.BottomWithStem);
                 }
             }
             switch (this.tieDirection) {
                 case BeamDirection.Up:
-                    return this.endNoteRenderer.getNoteY(this._endNote, NoteYPosition.Top);
+                    return endNoteRenderer.y + endNoteRenderer.getNoteY(this.endNote, NoteYPosition.Top);
                 default:
-                    return this.endNoteRenderer.getNoteY(this._endNote, NoteYPosition.Bottom);
+                    return endNoteRenderer.y + endNoteRenderer.getNoteY(this.endNote, NoteYPosition.Bottom);
             }
         }
-        return this.endNoteRenderer.getNoteY(this._endNote, NoteYPosition.Center);
+        return endNoteRenderer.y + endNoteRenderer.getNoteY(this.endNote, NoteYPosition.Center);
     }
     _isStartCentered() {
-        return ((this._startNote === this._startNote.beat.maxNote && this.tieDirection === BeamDirection.Up) ||
-            (this._startNote === this._startNote.beat.minNote && this.tieDirection === BeamDirection.Down));
+        return ((this.startNote === this.startNote.beat.maxNote && this.tieDirection === BeamDirection.Up) ||
+            (this.startNote === this.startNote.beat.minNote && this.tieDirection === BeamDirection.Down));
     }
     _isEndCentered() {
-        return (this._startNote.beat.graceType === GraceType.None &&
-            ((this._endNote === this._endNote.beat.maxNote && this.tieDirection === BeamDirection.Up) ||
-                (this._endNote === this._endNote.beat.minNote && this.tieDirection === BeamDirection.Down)));
+        return (this.startNote.beat.graceType === GraceType.None &&
+            ((this.endNote === this.endNote.beat.maxNote && this.tieDirection === BeamDirection.Up) ||
+                (this.endNote === this.endNote.beat.minNote && this.tieDirection === BeamDirection.Down)));
     }
     _isEndOnStem() {
-        const endNoteScoreRenderer = this.endNoteRenderer;
-        const startBeamDirection = this.startNoteRenderer.getBeatDirection(this.startBeat);
-        const endBeamDirection = endNoteScoreRenderer.getBeatDirection(this.endBeat);
-        return startBeamDirection !== endBeamDirection && this.startBeat.graceType === GraceType.None;
-    }
-    getStartX() {
-        return this._isStartCentered()
-            ? this.startNoteRenderer.getBeatX(this._startNote.beat, BeatXPosition.MiddleNotes)
-            : this.startNoteRenderer.getNoteX(this._startNote, NoteXPosition.Right);
-    }
-    getEndX() {
-        if (this._isEndCentered()) {
-            if (this._isEndOnStem()) {
-                return this.endNoteRenderer.getBeatX(this._endNote.beat, BeatXPosition.Stem);
-            }
-            return this.endNoteRenderer.getNoteX(this._endNote, NoteXPosition.Center);
-        }
-        return this.endNoteRenderer.getBeatX(this._endNote.beat, BeatXPosition.PreNotes);
-    }
-}
-
-/**
- * @internal
- */
-class ScoreTieGlyph extends TieGlyph {
-    startNote;
-    endNote;
-    constructor(startNote, endNote, forEnd = false) {
-        super(!startNote ? null : startNote.beat, !endNote ? null : endNote.beat, forEnd);
-        this.startNote = startNote;
-        this.endNote = endNote;
-    }
-    shouldDrawBendSlur() {
-        return (this.renderer.settings.notation.extendBendArrowsOnTiedNotes &&
-            !!this.startNote.bendOrigin &&
-            this.startNote.isTieOrigin);
-    }
-    doLayout() {
-        super.doLayout();
-    }
-    getBeamDirection(beat, noteRenderer) {
-        // invert direction (if stems go up, ties go down to not cross them)
-        switch (noteRenderer.getBeatDirection(beat)) {
-            case BeamDirection.Up:
-                return BeamDirection.Down;
-            default:
-                return BeamDirection.Up;
-        }
-    }
-    getStartY() {
-        if (this.startBeat.isRest) {
-            // below all lines
-            return this.startNoteRenderer.getScoreY(9);
-        }
-        switch (this.tieDirection) {
-            case BeamDirection.Up:
-                // below lowest note
-                return this.startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Top);
-            default:
-                return this.startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Bottom);
-        }
-    }
-    getEndY() {
-        const endNoteScoreRenderer = this.endNoteRenderer;
-        if (this.endBeat.isRest) {
-            switch (this.tieDirection) {
-                case BeamDirection.Up:
-                    return endNoteScoreRenderer.getScoreY(9);
-                default:
-                    return endNoteScoreRenderer.getScoreY(0);
-            }
-        }
-        switch (this.tieDirection) {
-            case BeamDirection.Up:
-                return endNoteScoreRenderer.getNoteY(this.endNote, NoteYPosition.Top);
-            default:
-                return endNoteScoreRenderer.getNoteY(this.endNote, NoteYPosition.Bottom);
-        }
-    }
-    getStartX() {
-        return this.startNoteRenderer.getBeatX(this.startNote.beat, BeatXPosition.PostNotes);
-    }
-    getEndX() {
-        return this.endNoteRenderer.getBeatX(this.endNote.beat, BeatXPosition.PreNotes);
+        const startBeamDirection = this.lookupStartBeatRenderer().getBeatDirection(this.startNote.beat);
+        const endBeatRenderer = this.lookupEndBeatRenderer();
+        const endBeamDirection = endBeatRenderer
+            ? endBeatRenderer.getBeatDirection(this.endNote.beat)
+            : startBeamDirection;
+        return startBeamDirection !== endBeamDirection && this.startNote.beat.graceType === GraceType.None;
     }
 }
 
@@ -70012,12 +70363,11 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
             n.beat.graceType !== GraceType.BendGrace &&
             n.tieDestination &&
             n.tieDestination.isVisible) {
-            // tslint:disable-next-line: no-unnecessary-type-assertion
-            const tie = new ScoreTieGlyph(n, n.tieDestination, false);
+            const tie = new ScoreTieGlyph(`score.tie.${n.id}`, n, n.tieDestination, false);
             this.addTie(tie);
         }
         if (n.isTieDestination && !n.tieOrigin.hasBend && !n.beat.hasWhammyBar) {
-            const tie = new ScoreTieGlyph(n.tieOrigin, n, true);
+            const tie = new ScoreTieGlyph(`score.tie.${n.tieOrigin.id}`, n.tieOrigin, n, true);
             this.addTie(tie);
         }
         // TODO: depending on the type we have other positioning
@@ -70027,17 +70377,16 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
             this.addTie(l);
         }
         if (n.isSlurOrigin && n.slurDestination && n.slurDestination.isVisible) {
-            // tslint:disable-next-line: no-unnecessary-type-assertion
-            const tie = new ScoreSlurGlyph(n, n.slurDestination, false);
+            const tie = new ScoreSlurGlyph(`score.slur.${n.id}`, n, n.slurDestination, false);
             this.addTie(tie);
         }
         if (n.isSlurDestination) {
-            const tie = new ScoreSlurGlyph(n.slurOrigin, n, true);
+            const tie = new ScoreSlurGlyph(`score.slur.${n.slurOrigin.id}`, n.slurOrigin, n, true);
             this.addTie(tie);
         }
         // start effect slur on first beat
         if (!this._effectSlur && n.isEffectSlurOrigin && n.effectSlurDestination) {
-            const effectSlur = new ScoreSlurGlyph(n, n.effectSlurDestination, false);
+            const effectSlur = new ScoreSlurGlyph(`score.slur.effect.${n.beat.id}`, n, n.effectSlurDestination, false);
             this._effectSlur = effectSlur;
             this.addTie(effectSlur);
         }
@@ -70046,7 +70395,7 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
             const direction = this.onNotes.beamingHelper.direction;
             const startNote = direction === BeamDirection.Up ? n.beat.effectSlurOrigin.minNote : n.beat.effectSlurOrigin.maxNote;
             const endNote = direction === BeamDirection.Up ? n.beat.minNote : n.beat.maxNote;
-            const effectEndSlur = new ScoreSlurGlyph(startNote, endNote, true);
+            const effectEndSlur = new ScoreSlurGlyph(`score.slur.effect.${startNote.beat.id}`, startNote, endNote, true);
             this._effectEndSlur = effectEndSlur;
             this.addTie(effectEndSlur);
         }
@@ -70068,7 +70417,7 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
                 while (destination.nextBeat && destination.nextBeat.isLegatoDestination) {
                     destination = destination.nextBeat;
                 }
-                this.addTie(new ScoreLegatoGlyph(this.beat, destination, false));
+                this.addTie(new ScoreLegatoGlyph(`score.legato.${this.beat.id}`, this.beat, destination, false));
             }
         }
         else if (this.beat.isLegatoDestination) {
@@ -70078,7 +70427,7 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
                 while (origin.previousBeat && origin.previousBeat.isLegatoOrigin) {
                     origin = origin.previousBeat;
                 }
-                this.addTie(new ScoreLegatoGlyph(origin, this.beat, true));
+                this.addTie(new ScoreLegatoGlyph(`score.legato.${origin.id}`, origin, this.beat, true));
             }
         }
     }
@@ -70458,6 +70807,9 @@ class ScoreBarRenderer extends LineBarRenderer {
             this.addBeatGlyph(container);
         }
     }
+    getNoteLine(note) {
+        return this.accidentalHelper.getNoteSteps(note) / 2;
+    }
     getNoteSteps(n) {
         return this.accidentalHelper.getNoteSteps(n);
     }
@@ -70514,43 +70866,15 @@ class ScoreBarRendererFactory extends BarRendererFactory {
 /**
  * @internal
  */
-class SlashTieGlyph extends TieGlyph {
-    startNote;
-    endNote;
-    constructor(startNote, endNote, forEnd = false) {
-        super(startNote.beat, endNote.beat, forEnd);
-        this.startNote = startNote;
-        this.endNote = endNote;
-    }
-    get _isLeftHandTap() {
-        return this.startNote === this.endNote;
-    }
-    getTieHeight(startX, startY, endX, endY) {
-        if (this._isLeftHandTap) {
-            return this.startNoteRenderer.smuflMetrics.tieHeight;
-        }
-        return super.getTieHeight(startX, startY, endX, endY);
-    }
-    getBeamDirection(_beat, _noteRenderer) {
-        return BeamDirection.Down;
-    }
-    static getBeamDirectionForNote(_note) {
+class SlashTieGlyph extends NoteTieGlyph {
+    calculateTieDirection() {
         return BeamDirection.Down;
     }
-    getStartY() {
-        return this.startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Center);
+    getStartNotePosition() {
+        return NoteXPosition.Right;
     }
-    getEndY() {
-        return this.getStartY();
-    }
-    getStartX() {
-        if (this._isLeftHandTap) {
-            return this.getEndX() - this.renderer.smuflMetrics.leftHandTabTieWidth;
-        }
-        return this.startNoteRenderer.getNoteX(this.startNote, NoteXPosition.Right);
-    }
-    getEndX() {
-        return this.endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Left);
+    getEndNotePosition() {
+        return NoteXPosition.Left;
     }
 }
 
@@ -70565,12 +70889,12 @@ class SlashBeatContainerGlyph extends BeatContainerGlyph {
             return;
         }
         if (!this._tiedNoteTie && n.isTieOrigin && n.tieDestination.isVisible) {
-            const tie = new SlashTieGlyph(n, n.tieDestination, false);
+            const tie = new SlashTieGlyph('slash.tie', n, n.tieDestination, false);
             this._tiedNoteTie = tie;
             this.addTie(tie);
         }
         if (!this._tiedNoteTie && n.isTieDestination) {
-            const tie = new SlashTieGlyph(n.tieOrigin, n, true);
+            const tie = new SlashTieGlyph('slash.tie', n.tieOrigin, n, true);
             this._tiedNoteTie = tie;
             this.addTie(tie);
         }
@@ -70697,8 +71021,7 @@ class SlashBeatGlyph extends BeatOnNoteGlyphBase {
     doLayout() {
         // create glyphs
         const sr = this.renderer;
-        const line = sr.getNoteLine();
-        const glyphY = sr.getLineY(line);
+        const glyphY = sr.getLineY(0);
         if (this.container.beat.deadSlapped) {
             const deadSlapped = new DeadSlappedBeatGlyph();
             deadSlapped.renderer = this.renderer;
@@ -70731,7 +71054,7 @@ class SlashBeatGlyph extends BeatOnNoteGlyphBase {
         //
         if (this.container.beat.dots > 0) {
             for (let i = 0; i < this.container.beat.dots; i++) {
-                this.addEffect(new AugmentationDotGlyph(0, sr.getLineY(sr.getNoteLine()) - sr.getLineHeight(0.5)));
+                this.addEffect(new AugmentationDotGlyph(0, glyphY - sr.getLineHeight(0.5)));
             }
         }
         super.doLayout();
@@ -70813,7 +71136,7 @@ class SlashBarRenderer extends LineBarRenderer {
             this.registerOverflowTop(this.tupletSize);
         }
     }
-    getNoteLine() {
+    getNoteLine(_note) {
         return 0;
     }
     getFlagTopY(beat, _direction) {
@@ -71150,77 +71473,6 @@ class TabSlideLineGlyph extends Glyph {
     }
 }
 
-/**
- * @internal
- */
-class TabSlurGlyph extends TabTieGlyph {
-    _direction;
-    _forSlide;
-    constructor(startNote, endNote, forSlide, forEnd = false) {
-        super(startNote, endNote, forEnd);
-        this._direction = TabTieGlyph.getBeamDirectionForNote(startNote);
-        this._forSlide = forSlide;
-    }
-    getTieHeight(startX, _startY, endX, _endY) {
-        return Math.log(endX - startX + 1) * this.renderer.settings.notation.slurHeight / 2;
-    }
-    tryExpand(startNote, endNote, forSlide, forEnd) {
-        // same type required
-        if (this._forSlide !== forSlide) {
-            return false;
-        }
-        if (this.forEnd !== forEnd) {
-            return false;
-        }
-        // same start and endbeat
-        if (this.startNote.beat.id !== startNote.beat.id) {
-            return false;
-        }
-        if (this.endNote.beat.id !== endNote.beat.id) {
-            return false;
-        }
-        // same draw direction
-        if (this._direction !== TabTieGlyph.getBeamDirectionForNote(startNote)) {
-            return false;
-        }
-        // if we can expand, expand in correct direction
-        switch (this._direction) {
-            case BeamDirection.Up:
-                if (startNote.realValue > this.startNote.realValue) {
-                    this.startNote = startNote;
-                    this.startBeat = startNote.beat;
-                }
-                if (endNote.realValue > this.endNote.realValue) {
-                    this.endNote = endNote;
-                    this.endBeat = endNote.beat;
-                }
-                break;
-            case BeamDirection.Down:
-                if (startNote.realValue < this.startNote.realValue) {
-                    this.startNote = startNote;
-                    this.startBeat = startNote.beat;
-                }
-                if (endNote.realValue < this.endNote.realValue) {
-                    this.endNote = endNote;
-                    this.endBeat = endNote.beat;
-                }
-                break;
-        }
-        return true;
-    }
-    paint(cx, cy, canvas) {
-        const startNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staffId, this.startBeat.voice.bar);
-        const direction = this.getBeamDirection(this.startBeat, startNoteRenderer);
-        const slurId = `tab.slur.${this.startNote.beat.id}.${this.endNote.beat.id}.${direction}`;
-        const renderer = this.renderer;
-        const isSlurRendered = renderer.staff.getSharedLayoutData(slurId, false);
-        if (!isSlurRendered) {
-            renderer.staff.setSharedLayoutData(slurId, true);
-            super.paint(cx, cy, canvas);
-        }
-    }
-}
-
 /**
  * @internal
  */
@@ -71245,15 +71497,15 @@ class TabBeatContainerGlyph extends BeatContainerGlyph {
         }
         const renderer = this.renderer;
         if (n.isTieOrigin && renderer.showTiedNotes && n.tieDestination.isVisible) {
-            const tie = new TabTieGlyph(n, n.tieDestination, false);
+            const tie = new TabTieGlyph(`tab.tie.${n.id}`, n, n.tieDestination, false);
             this.addTie(tie);
         }
         if (n.isTieDestination && renderer.showTiedNotes) {
-            const tie = new TabTieGlyph(n.tieOrigin, n, true);
+            const tie = new TabTieGlyph(`tab.tie.${n.tieOrigin.id}`, n.tieOrigin, n, true);
             this.addTie(tie);
         }
         if (n.isLeftHandTapped && !n.isHammerPullDestination) {
-            const tapSlur = new TabTieGlyph(n, n, false);
+            const tapSlur = new TabTieGlyph(`tab.tie.leftHandTap.${n.id}`, n, n, false);
             this.addTie(tapSlur);
         }
         // start effect slur on first beat
@@ -71266,7 +71518,7 @@ class TabBeatContainerGlyph extends BeatContainerGlyph {
                 }
             }
             if (!expanded) {
-                const effectSlur = new TabSlurGlyph(n, n.effectSlurDestination, false, false);
+                const effectSlur = new TabSlurGlyph(`tab.slur.effect.${n.id}`, n, n.effectSlurDestination, false, false);
                 this._effectSlurs.push(effectSlur);
                 this.addTie(effectSlur);
             }
@@ -71281,7 +71533,7 @@ class TabBeatContainerGlyph extends BeatContainerGlyph {
                 }
             }
             if (!expanded) {
-                const effectSlur = new TabSlurGlyph(n.effectSlurOrigin, n, false, true);
+                const effectSlur = new TabSlurGlyph(`tab.slur.effect.${n.effectSlurOrigin.id}`, n.effectSlurOrigin, n, false, true);
                 this._effectSlurs.push(effectSlur);
                 this.addTie(effectSlur);
             }
@@ -71700,7 +71952,7 @@ class TabBeatGlyph extends BeatOnNoteGlyphBase {
         }
         else {
             const line = Math.floor((this.renderer.bar.staff.tuning.length - 1) / 2);
-            const y = tabRenderer.getTabY(line);
+            const y = tabRenderer.getLineY(line);
             const restGlyph = new TabRestGlyph(0, y, tabRenderer.showRests, this.container.beat.duration);
             this.restGlyph = restGlyph;
             restGlyph.beat = this.container.beat;
@@ -71759,8 +72011,8 @@ class TabBeatGlyph extends BeatOnNoteGlyphBase {
     _createNoteGlyph(n) {
         const tr = this.renderer;
         const noteNumberGlyph = new NoteNumberGlyph(0, 0, n);
-        const l = n.beat.voice.bar.staff.tuning.length - n.string;
-        noteNumberGlyph.y = tr.getTabY(l);
+        const l = tr.getNoteLine(n);
+        noteNumberGlyph.y = tr.getLineY(l);
         noteNumberGlyph.renderer = this.renderer;
         noteNumberGlyph.doLayout();
         this.noteNumbers.addNoteGlyph(noteNumberGlyph, n);
@@ -71951,17 +72203,8 @@ class TabBarRenderer extends LineBarRenderer {
         }
         return mode;
     }
-    /**
-     * Gets the relative y position of the given steps relative to first line.
-     * @param line the line of the particular string where 0 is the most top line
-     * @param correction
-     * @returns
-     */
-    getTabY(line) {
-        return super.getLineY(line);
-    }
-    getTabHeight(line) {
-        return super.getLineHeight(line);
+    getNoteLine(note) {
+        return this.bar.staff.tuning.length - note.string;
     }
     minString = Number.NaN;
     maxString = Number.NaN;
@@ -72050,7 +72293,7 @@ class TabBarRenderer extends LineBarRenderer {
         if (this.isFirstOfLine) {
             const center = (this.bar.staff.tuning.length - 1) / 2;
             this.createStartSpacing();
-            this.addPreBeatGlyph(new TabClefGlyph(0, this.getTabY(center)));
+            this.addPreBeatGlyph(new TabClefGlyph(0, this.getLineY(center)));
         }
         // Time Signature
         if (this.showTimeSignature &&
@@ -72071,7 +72314,7 @@ class TabBarRenderer extends LineBarRenderer {
     _createTimeSignatureGlyphs() {
         this.addPreBeatGlyph(new SpacingGlyph(0, 0, this.smuflMetrics.oneStaffSpace));
         const lines = (this.bar.staff.tuning.length + 1) / 2 - 1;
-        this.addPreBeatGlyph(new TabTimeSignatureGlyph(0, this.getTabY(lines), this.bar.masterBar.timeSignatureNumerator, this.bar.masterBar.timeSignatureDenominator, this.bar.masterBar.timeSignatureCommon, this.bar.masterBar.isFreeTime));
+        this.addPreBeatGlyph(new TabTimeSignatureGlyph(0, this.getLineY(lines), this.bar.masterBar.timeSignatureNumerator, this.bar.masterBar.timeSignatureDenominator, this.bar.masterBar.timeSignatureCommon, this.bar.masterBar.isFreeTime));
     }
     createVoiceGlyphs(v) {
         super.createVoiceGlyphs(v);