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

package/dist/alphaTab.js

@@ -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.
  *
@@ -209,9 +209,9 @@
      * @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}`);
@@ -12956,25 +12956,31 @@
         /**
          * 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;
+        }
     }
 
     /**
@@ -49460,16 +49466,6 @@
         }
     }
 
-    /**
-     * @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}
@@ -51569,8 +51565,8 @@
         }
         _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
@@ -51813,8 +51809,8 @@
                 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);
@@ -51834,7 +51830,7 @@
             }
             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);
                 }
             }
@@ -51853,45 +51849,7 @@
                 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);
@@ -51913,13 +51871,13 @@
                 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() {
@@ -51988,24 +51946,230 @@
                 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;
@@ -52014,7 +52178,17 @@
                 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 =
@@ -52031,18 +52205,24 @@
                 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 {
@@ -52051,6 +52231,7 @@
                 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.
@@ -56489,12 +56670,12 @@
             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.
@@ -58882,6 +59063,437 @@
         }
     }
 
+    /**
+     * @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
@@ -59352,6 +59964,63 @@
         }
     }
 
+    /**
+     * 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.
@@ -59473,7 +60142,6 @@
             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) {
@@ -59566,23 +60234,23 @@
             // 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) {
@@ -60188,6 +60856,7 @@
                     if (newBarDisplayScale > barDisplayScale) {
                         barDisplayScale = newBarDisplayScale;
                     }
+                    lastBar.afterReverted();
                 }
                 this.width -= width;
                 this.computedWidth -= width;
@@ -60707,12 +61376,16 @@
         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);
@@ -60981,17 +61654,6 @@
                 }
             }
         }
-        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)) {
@@ -61980,6 +62642,7 @@
         _voiceContainers = new Map();
         _postBeatGlyphs = new LeftToRightLayoutingGlyphGroup();
         _ties = [];
+        _multiSystemSlurs;
         topEffects;
         bottomEffects;
         get nextRenderer() {
@@ -62132,6 +62795,11 @@
             }
         }
         _appliedLayoutingInfo = 0;
+        afterReverted() {
+            this.staff = undefined;
+            this.registerMultiSystemSlurs(undefined);
+            this.isFinalized = false;
+        }
         afterStaffBarReverted() {
             this.topEffects.afterStaffBarReverted();
             this.bottomEffects.afterStaffBarReverted();
@@ -62177,13 +62845,26 @@
             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) {
@@ -62204,6 +62885,21 @@
                     }
                 }
             }
+            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) {
@@ -62384,6 +63080,16 @@
             }
             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);
@@ -64462,6 +65168,13 @@
                 }
             }
             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;
@@ -64923,7 +65636,7 @@
                 // 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];
@@ -65105,7 +65818,7 @@
                 }
                 // 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
@@ -65871,375 +66584,23 @@
     /**
      * @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);
@@ -66247,54 +66608,25 @@
         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;
@@ -66302,41 +66634,43 @@
             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;
         }
     }
 
@@ -66344,23 +66678,31 @@
      * @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) {
@@ -66372,9 +66714,11 @@
                     }
                 }
                 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
@@ -66387,9 +66731,11 @@
                     }
                 }
                 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);
                 }
             }
         }
@@ -66782,10 +67128,11 @@
             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;
@@ -66793,7 +67140,6 @@
                         ? NumberedBeatGlyph.minorKeySignatureOneValues
                         : NumberedBeatGlyph.majorKeySignatureOneValues;
                     const oneNoteValue = oneNoteValues[ksi];
-                    const note = this.container.beat.notes[0];
                     if (note.isDead) {
                         numberWithinOctave = 'X';
                     }
@@ -66840,7 +67186,7 @@
                 // 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);
                     }
@@ -66868,7 +67214,7 @@
                     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);
                 }
@@ -67338,7 +67684,7 @@
                 }
             }
         }
-        getNoteLine() {
+        getNoteLine(_note) {
             return 0;
         }
         get tupletOffset() {
@@ -69553,87 +69899,128 @@
      * @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);
-        }
     }
 
     /**
@@ -69833,142 +70220,106 @@
     /**
      * @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;
         }
     }
 
@@ -70018,12 +70369,11 @@
                 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
@@ -70033,17 +70383,16 @@
                 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);
             }
@@ -70052,7 +70401,7 @@
                 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);
             }
@@ -70074,7 +70423,7 @@
                     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) {
@@ -70084,7 +70433,7 @@
                     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));
                 }
             }
         }
@@ -70464,6 +70813,9 @@
                 this.addBeatGlyph(container);
             }
         }
+        getNoteLine(note) {
+            return this.accidentalHelper.getNoteSteps(note) / 2;
+        }
         getNoteSteps(n) {
             return this.accidentalHelper.getNoteSteps(n);
         }
@@ -70520,43 +70872,15 @@
     /**
      * @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;
         }
     }
 
@@ -70571,12 +70895,12 @@
                 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);
             }
@@ -70703,8 +71027,7 @@
         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;
@@ -70737,7 +71060,7 @@
             //
             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();
@@ -70819,7 +71142,7 @@
                 this.registerOverflowTop(this.tupletSize);
             }
         }
-        getNoteLine() {
+        getNoteLine(_note) {
             return 0;
         }
         getFlagTopY(beat, _direction) {
@@ -71156,77 +71479,6 @@
         }
     }
 
-    /**
-     * @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
      */
@@ -71251,15 +71503,15 @@
             }
             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
@@ -71272,7 +71524,7 @@
                     }
                 }
                 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);
                 }
@@ -71287,7 +71539,7 @@
                     }
                 }
                 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);
                 }
@@ -71706,7 +71958,7 @@
             }
             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;
@@ -71765,8 +72017,8 @@
         _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);
@@ -71957,17 +72209,8 @@
             }
             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;
@@ -72056,7 +72299,7 @@
             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 &&
@@ -72077,7 +72320,7 @@
         _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);