@coderline/alphatab 1.8.0-alpha.1637 → 1.8.0-alpha.1640

package/dist/alphaTab.js

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.8.0-alpha.1637 (develop, build 1637)
+ * alphaTab v1.8.0-alpha.1640 (develop, build 1640)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -209,9 +209,9 @@
      * @internal
      */
     class VersionInfo {
-        static version = '1.8.0-alpha.1637';
-        static date = '2025-12-07T02:26:27.382Z';
-        static commit = 'aa2c8101456d3ddfc777491468bc483789cc6c12';
+        static version = '1.8.0-alpha.1640';
+        static date = '2025-12-10T02:19:08.776Z';
+        static commit = '343f59ee6b39b4f3a41636b3c33db34bccf631f9';
         static print(print) {
             print(`alphaTab ${VersionInfo.version}`);
             print(`commit: ${VersionInfo.commit}`);
@@ -48533,7 +48533,7 @@
         onNotes;
         minWidth = 0;
         get onTimeX() {
-            return this.onNotes.x + this.onNotes.centerX;
+            return this.onNotes.x + this.onNotes.onTimeX;
         }
         constructor(beat, voiceContainer) {
             super(0, 0);
@@ -48557,8 +48557,8 @@
             return helper.hasFlag(false, undefined);
         }
         registerLayoutingInfo(layoutings) {
-            const preBeatStretch = this.preNotes.computedWidth + this.onNotes.centerX;
-            let postBeatStretch = this.onNotes.computedWidth - this.onNotes.centerX;
+            const preBeatStretch = this.preNotes.computedWidth + this.onNotes.onTimeX;
+            let postBeatStretch = this.onNotes.computedWidth - this.onNotes.onTimeX;
             // make space for flag
             const helper = this.renderer.helpers.getBeamingHelperForBeat(this.beat);
             if (this.beat.graceType !== GraceType.None) {
@@ -48701,7 +48701,7 @@
                 beatBoundings.realBounds.y = barBounds.realBounds.y;
                 beatBoundings.realBounds.w = this.width;
                 beatBoundings.realBounds.h = barBounds.realBounds.h;
-                beatBoundings.onNotesX = cx + this.x + this.onNotes.centerX;
+                beatBoundings.onNotesX = cx + this.x + this.onNotes.x + this.onNotes.onTimeX;
             }
             else {
                 beatBoundings.visualBounds = new Bounds();
@@ -48739,7 +48739,7 @@
                 beatBoundings.realBounds.y = barBounds.realBounds.y;
                 beatBoundings.realBounds.w = this.width;
                 beatBoundings.realBounds.h = barBounds.realBounds.h;
-                beatBoundings.onNotesX = cx + this.x + this.onNotes.x + this.onNotes.centerX;
+                beatBoundings.onNotesX = cx + this.x + this.onNotes.x + this.onNotes.onTimeX;
             }
             barBounds.addBeat(beatBoundings);
             if (this.renderer.settings.core.includeNoteBounds) {
@@ -54364,6 +54364,7 @@
     class ScalableHtmlElementContainer extends HtmlElementContainer {
         _xscale;
         _yscale;
+        centerAtPosition = false;
         constructor(element, xscale, yscale) {
             super(element);
             this._xscale = xscale;
@@ -54405,7 +54406,11 @@
             else {
                 h = h / this._yscale;
             }
-            this.element.style.transform = `translate(${x}px, ${y}px) scale(${w}, ${h})`;
+            let transform = `translate(${x}px, ${y}px) scale(${w}, ${h})`;
+            if (this.centerAtPosition) {
+                transform += ` translateX(-50%)`;
+            }
+            this.element.style.transform = transform;
             this.element.style.transformOrigin = 'top left';
             this.lastBounds.x = x;
             this.lastBounds.y = y;
@@ -55266,6 +55271,7 @@
             beatCursor.style.willChange = 'transform';
             beatCursorContainer.width = 3;
             beatCursorContainer.height = 1;
+            beatCursorContainer.centerAtPosition = true;
             beatCursorContainer.setBounds(0, 0, 1, 1);
             // add cursors to UI
             element.insertBefore(cursorWrapper, element.firstChild);
@@ -56640,7 +56646,7 @@
          */
         BeatXPosition[BeatXPosition["OnNotes"] = 1] = "OnNotes";
         /**
-         * Gets the middle-notes position which is located after in the middle the note heads.
+         * Gets the middle-notes position which is located after in the exact center of the note heads.
          */
         BeatXPosition[BeatXPosition["MiddleNotes"] = 2] = "MiddleNotes";
         /**
@@ -56670,12 +56676,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.
@@ -59063,6 +59069,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
@@ -59533,6 +59970,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.
@@ -59654,7 +60148,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) {
@@ -59747,23 +60240,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) {
@@ -60369,6 +60862,7 @@
                     if (newBarDisplayScale > barDisplayScale) {
                         barDisplayScale = newBarDisplayScale;
                     }
+                    lastBar.afterReverted();
                 }
                 this.width -= width;
                 this.computedWidth -= width;
@@ -60888,12 +61382,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);
@@ -61162,17 +61660,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)) {
@@ -61338,7 +61825,8 @@
      */
     class BeatOnNoteGlyphBase extends BeatGlyphBase {
         beamingHelper;
-        centerX = 0;
+        onTimeX = 0;
+        middleX = 0;
         updateBeamingHelper() {
         }
         buildBoundingsLookup(_beatBounds, _cx, _cy) {
@@ -62161,6 +62649,7 @@
         _voiceContainers = new Map();
         _postBeatGlyphs = new LeftToRightLayoutingGlyphGroup();
         _ties = [];
+        _multiSystemSlurs;
         topEffects;
         bottomEffects;
         get nextRenderer() {
@@ -62313,6 +62802,11 @@
             }
         }
         _appliedLayoutingInfo = 0;
+        afterReverted() {
+            this.staff = undefined;
+            this.registerMultiSystemSlurs(undefined);
+            this.isFinalized = false;
+        }
         afterStaffBarReverted() {
             this.topEffects.afterStaffBarReverted();
             this.bottomEffects.afterStaffBarReverted();
@@ -62358,13 +62852,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) {
@@ -62385,6 +62892,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) {
@@ -62565,6 +63087,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);
@@ -62630,7 +63162,7 @@
                     case BeatXPosition.OnNotes:
                         return container.voiceContainer.x + container.x + container.onNotes.x;
                     case BeatXPosition.MiddleNotes:
-                        return container.voiceContainer.x + container.x + container.onTimeX;
+                        return container.voiceContainer.x + container.x + container.onNotes.x + container.onNotes.middleX;
                     case BeatXPosition.Stem:
                         const offset = container.onNotes.beamingHelper
                             ? container.onNotes.beamingHelper.getBeatLineX(beat)
@@ -64643,6 +65175,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;
@@ -65104,7 +65643,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];
@@ -65286,7 +65825,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
@@ -66052,375 +66591,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);
@@ -66428,54 +66615,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;
@@ -66483,41 +66641,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;
         }
     }
 
@@ -66525,23 +66685,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) {
@@ -66553,9 +66721,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
@@ -66568,9 +66738,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);
                 }
             }
         }
@@ -66963,10 +67135,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;
@@ -66974,7 +67147,6 @@
                         ? NumberedBeatGlyph.minorKeySignatureOneValues
                         : NumberedBeatGlyph.majorKeySignatureOneValues;
                     const oneNoteValue = oneNoteValues[ksi];
-                    const note = this.container.beat.notes[0];
                     if (note.isDead) {
                         numberWithinOctave = 'X';
                     }
@@ -67021,7 +67193,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);
                     }
@@ -67049,21 +67221,22 @@
                     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);
                 }
             }
             super.doLayout();
             if (this.container.beat.isEmpty) {
-                this.centerX = this.width / 2;
+                this.onTimeX = this.width / 2;
             }
             else if (this.noteHeads) {
-                this.centerX = this.noteHeads.x + this.noteHeads.width / 2;
+                this.onTimeX = this.noteHeads.x + this.noteHeads.width / 2;
             }
             else if (this.deadSlapped) {
-                this.centerX = this.deadSlapped.x + this.deadSlapped.width / 2;
+                this.onTimeX = this.deadSlapped.x + this.deadSlapped.width / 2;
             }
+            this.middleX = this.onTimeX;
         }
     }
 
@@ -67519,7 +67692,7 @@
                 }
             }
         }
-        getNoteLine() {
+        getNoteLine(_note) {
             return 0;
         }
         get tupletOffset() {
@@ -67929,6 +68102,7 @@
         upLineX = 0;
         downLineX = 0;
         noteStartX = 0;
+        onTimeX = 0;
         constructor() {
             super(0, 0);
         }
@@ -68015,6 +68189,8 @@
             // align all notes so that they align with the stem positions
             const stemPosition = anyDisplaced || direction === BeamDirection.Up ? stemUpX : stemDownX;
             let w = 0;
+            let displacedWidth = 0;
+            let nonDisplacedWidth = 0;
             for (let i = 0, j = this._infos.length; i < j; i++) {
                 const g = this._infos[i].glyph;
                 const alignDisplaced = displaced.get(i);
@@ -68030,7 +68206,14 @@
                     }
                 }
                 g.x += this.noteStartX;
-                w = Math.max(w, g.x + g.width);
+                const gw = g.x + g.width;
+                w = Math.max(w, gw);
+                if (alignDisplaced) {
+                    displacedWidth = Math.max(displacedWidth, gw);
+                }
+                else {
+                    nonDisplacedWidth = Math.max(nonDisplacedWidth, gw);
+                }
                 // after size calculation, re-align glyph to stem if needed
                 if (g instanceof NoteHeadGlyph && g.centerOnStem) {
                     g.x = stemPosition;
@@ -68044,6 +68227,23 @@
                 this.upLineX = stemUpX;
                 this.downLineX = stemDownX;
             }
+            // the center of score notes, (used for aligning the beat to the right on-time position)
+            // is always the center of the "correct note" position.
+            // * If the stem is upwards, the center is the middle of the left hand side note head
+            // * If the stem is downards, the center is the middle of the right-hand-side note head
+            if (anyDisplaced) {
+                if (direction === BeamDirection.Up) {
+                    this.onTimeX = nonDisplacedWidth / 2;
+                }
+                else {
+                    const displacedRawWith = displacedWidth - stemPosition;
+                    this.onTimeX = stemPosition + (displacedRawWith / 2);
+                }
+            }
+            else {
+                // for no displaced notes it is simply the center
+                this.onTimeX = w / 2;
+            }
             this.width = w;
         }
         paint(cx, cy, canvas) {
@@ -68220,6 +68420,7 @@
                 this._deadSlapped.renderer = this.renderer;
                 this._deadSlapped.doLayout();
                 this.width = this._deadSlapped.width;
+                this.onTimeX = this.width / 2;
             }
             let aboveBeatEffectsY = 0;
             let belowBeatEffectsY = 0;
@@ -69118,13 +69319,16 @@
             }
             super.doLayout();
             if (this.container.beat.isEmpty) {
-                this.centerX = this.width / 2;
+                this.onTimeX = this.width / 2;
+                this.middleX = this.onTimeX;
             }
             else if (this.restGlyph) {
-                this.centerX = this.restGlyph.x + this.restGlyph.width / 2;
+                this.onTimeX = this.restGlyph.x + this.restGlyph.width / 2;
+                this.middleX = this.onTimeX;
             }
             else if (this.noteHeads) {
-                this.centerX = this.noteHeads.x + this.noteHeads.width / 2;
+                this.onTimeX = this.noteHeads.x + this.noteHeads.onTimeX;
+                this.middleX = this.noteHeads.x + this.noteHeads.width / 2;
             }
         }
         _createBeatDot(line, group) {
@@ -69734,87 +69938,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);
+            }
+        }
+        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));
         }
-        getEndY() {
-            const endNoteScoreRenderer = this.endNoteRenderer;
+        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);
-        }
     }
 
     /**
@@ -70014,142 +70259,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;
+        }
+        calculateStartX() {
+            return (this.renderer.x +
+                (this._isStartCentered()
+                    ? this.renderer.getBeatX(this.startNote.beat, BeatXPosition.MiddleNotes)
+                    : this.renderer.getNoteX(this.startNote, NoteXPosition.Right)));
         }
-        getStartY() {
+        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;
         }
     }
 
@@ -70199,12 +70408,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
@@ -70214,17 +70422,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);
             }
@@ -70233,7 +70440,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);
             }
@@ -70255,7 +70462,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) {
@@ -70265,7 +70472,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));
                 }
             }
         }
@@ -70645,6 +70852,9 @@
                 this.addBeatGlyph(container);
             }
         }
+        getNoteLine(note) {
+            return this.accidentalHelper.getNoteSteps(note) / 2;
+        }
         getNoteSteps(n) {
             return this.accidentalHelper.getNoteSteps(n);
         }
@@ -70701,43 +70911,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) {
+    class SlashTieGlyph extends NoteTieGlyph {
+        calculateTieDirection() {
             return BeamDirection.Down;
         }
-        static getBeamDirectionForNote(_note) {
-            return BeamDirection.Down;
-        }
-        getStartY() {
-            return this.startNoteRenderer.getNoteY(this.startNote, NoteYPosition.Center);
-        }
-        getEndY() {
-            return this.getStartY();
-        }
-        getStartX() {
-            if (this._isLeftHandTap) {
-                return this.getEndX() - this.renderer.smuflMetrics.leftHandTabTieWidth;
-            }
-            return this.startNoteRenderer.getNoteX(this.startNote, NoteXPosition.Right);
+        getStartNotePosition() {
+            return NoteXPosition.Right;
         }
-        getEndX() {
-            return this.endNoteRenderer.getNoteX(this.endNote, NoteXPosition.Left);
+        getEndNotePosition() {
+            return NoteXPosition.Left;
         }
     }
 
@@ -70752,12 +70934,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);
             }
@@ -70884,8 +71066,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;
@@ -70918,22 +71099,23 @@
             //
             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();
             if (this.container.beat.isEmpty) {
-                this.centerX = this.width / 2;
+                this.onTimeX = this.width / 2;
             }
             else if (this.restGlyph) {
-                this.centerX = this.restGlyph.x + this.restGlyph.width / 2;
+                this.onTimeX = this.restGlyph.x + this.restGlyph.width / 2;
             }
             else if (this.noteHeads) {
-                this.centerX = this.noteHeads.x + this.noteHeads.width / 2;
+                this.onTimeX = this.noteHeads.x + this.noteHeads.width / 2;
             }
             else if (this.deadSlapped) {
-                this.centerX = this.deadSlapped.x + this.deadSlapped.width / 2;
+                this.onTimeX = this.deadSlapped.x + this.deadSlapped.width / 2;
             }
+            this.middleX = this.onTimeX;
         }
     }
 
@@ -71000,7 +71182,7 @@
                 this.registerOverflowTop(this.tupletSize);
             }
         }
-        getNoteLine() {
+        getNoteLine(_note) {
             return 0;
         }
         getFlagTopY(beat, _direction) {
@@ -71337,77 +71519,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
      */
@@ -71432,15 +71543,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
@@ -71453,7 +71564,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);
                 }
@@ -71468,7 +71579,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);
                 }
@@ -71887,7 +71998,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;
@@ -71917,19 +72028,20 @@
             this.width = w;
             this.computedWidth = w;
             if (this.container.beat.isEmpty) {
-                this.centerX = this.width / 2;
+                this.onTimeX = this.width / 2;
             }
             else if (this.restGlyph) {
-                this.centerX = this.restGlyph.x + this.restGlyph.width / 2;
+                this.onTimeX = this.restGlyph.x + this.restGlyph.width / 2;
             }
             else if (this.noteNumbers) {
-                this.centerX = this.noteNumbers.x + this.noteNumbers.noteStringWidth / 2;
+                this.onTimeX = this.noteNumbers.x + this.noteNumbers.noteStringWidth / 2;
             }
             else if (this.slash) {
-                this.centerX = this.slash.x + this.slash.width / 2;
+                this.onTimeX = this.slash.x + this.slash.width / 2;
             }
+            this.middleX = this.onTimeX;
             for (const g of centeredEffectGlyphs) {
-                g.x = this.centerX;
+                g.x = this.onTimeX;
             }
         }
         updateBeamingHelper() {
@@ -71946,8 +72058,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);
@@ -72138,17 +72250,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;
@@ -72237,7 +72340,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 &&
@@ -72258,7 +72361,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);