@coderline/alphatab 1.3.0-alpha.411 → 1.3.0-alpha.418

package/dist/alphaTab.mjs

@@ -1,5 +1,5 @@
 /**
- * alphaTab v1.3.0-alpha.411 (develop, build 411)
+ * alphaTab v1.3.0-alpha.418 (develop, build 418)
  * 
  * Copyright © 2022, Daniel Kuschny and Contributors, All rights reserved.
  * 
@@ -24144,6 +24144,10 @@ class BeatContainerGlyph extends Glyph {
     get onTimeX() {
         return this.onNotes.x + this.onNotes.centerX;
     }
+    addTie(tie) {
+        tie.renderer = this.renderer;
+        this.ties.push(tie);
+    }
     registerLayoutingInfo(layoutings) {
         let preBeatStretch = this.preNotes.computedWidth + this.onNotes.centerX;
         if (this.beat.graceGroup && !this.beat.graceGroup.isComplete) {
@@ -24152,8 +24156,11 @@ class BeatContainerGlyph extends Glyph {
         let postBeatStretch = this.onNotes.computedWidth - this.onNotes.centerX;
         // make space for flag
         const helper = this.renderer.helpers.getBeamingHelperForBeat(this.beat);
-        if (helper && helper.hasFlag || this.beat.graceType !== GraceType.None) {
-            postBeatStretch += (FlagGlyph.FlagWidth * this.scale * (this.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1));
+        if ((helper && helper.hasFlag) || this.beat.graceType !== GraceType.None) {
+            postBeatStretch +=
+                FlagGlyph.FlagWidth *
+                    this.scale *
+                    (this.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1);
         }
         for (const tie of this.ties) {
             postBeatStretch += tie.width;
@@ -24193,6 +24200,7 @@ class BeatContainerGlyph extends Glyph {
         while (i >= 0) {
             this.createTies(this.beat.notes[i--]);
         }
+        this.renderer.registerTies(this.ties);
         this.updateWidth();
     }
     updateWidth() {
@@ -24224,9 +24232,6 @@ class BeatContainerGlyph extends Glyph {
         this.width = this.minWidth;
     }
     scaleToWidth(beatWidth) {
-        for (let tie of this.ties) {
-            tie.doLayout();
-        }
         this.onNotes.updateBeamingHelper();
         this.width = beatWidth;
     }
@@ -25024,6 +25029,7 @@ class AlphaTabApiBase {
         this._playerState = PlayerState.Paused;
         // we need to update our position caches if we render a tablature
         this.renderer.postRenderFinished.on(() => {
+            this._currentBeat = null;
             this.cursorUpdateTick(this._previousTick, false, this._previousTick > 10);
         });
         if (this.player) {
@@ -25747,7 +25753,7 @@ class BrowserMouseEventArgs {
 class HtmlElementContainer {
     constructor(element) {
         this._resizeListeners = 0;
-        this._lastBounds = new Bounds();
+        this.lastBounds = new Bounds();
         this.element = element;
         this.mouseDown = {
             on: (value) => {
@@ -25838,23 +25844,23 @@ class HtmlElementContainer {
     }
     setBounds(x, y, w, h) {
         if (isNaN(x)) {
-            x = this._lastBounds.x;
+            x = this.lastBounds.x;
         }
         if (isNaN(y)) {
-            y = this._lastBounds.y;
+            y = this.lastBounds.y;
         }
         if (isNaN(w)) {
-            w = this._lastBounds.w;
+            w = this.lastBounds.w;
         }
         if (isNaN(h)) {
-            h = this._lastBounds.h;
+            h = this.lastBounds.h;
         }
         this.element.style.transform = `translate(${x}px, ${y}px) scale(${w}, ${h})`;
         this.element.style.transformOrigin = 'top left';
-        this._lastBounds.x = x;
-        this._lastBounds.y = y;
-        this._lastBounds.w = w;
-        this._lastBounds.h = h;
+        this.lastBounds.x = x;
+        this.lastBounds.y = y;
+        this.lastBounds.w = w;
+        this.lastBounds.h = h;
     }
     appendChild(child) {
         this.element.appendChild(child.element);
@@ -26933,6 +26939,71 @@ class AlphaSynthAudioWorkletOutput extends AlphaSynthWebAudioOutputBase {
     }
 }
 
+/**
+ * An IContainer implementation which can be used for cursors and select ranges
+ * where browser scaling is relevant.
+ *
+ * The problem is that with having 1x1 pixel elements which are sized then to the actual size with a
+ * scale transform this cannot be combined properly with a browser zoom.
+ *
+ * The browser will apply first the browser zoom to the 1x1px element and then apply the scale leaving it always
+ * at full scale instead of a 50% browser zoom.
+ *
+ * This is solved in this container by scaling the element first up to a higher degree (as specified)
+ * so that the browser can do a scaling according to typical zoom levels and then the scaling will work.
+ * @target web
+ */
+class ScalableHtmlElementContainer extends HtmlElementContainer {
+    constructor(element, xscale, yscale) {
+        super(element);
+        this._xscale = xscale;
+        this._yscale = yscale;
+    }
+    get width() {
+        return this.element.offsetWidth / this._xscale;
+    }
+    set width(value) {
+        this.element.style.width = value * this._xscale + 'px';
+    }
+    get height() {
+        return this.element.offsetHeight / this._yscale;
+    }
+    set height(value) {
+        if (value >= 0) {
+            this.element.style.height = value * this._yscale + 'px';
+        }
+        else {
+            this.element.style.height = '100%';
+        }
+    }
+    setBounds(x, y, w, h) {
+        if (isNaN(x)) {
+            x = this.lastBounds.x;
+        }
+        if (isNaN(y)) {
+            y = this.lastBounds.y;
+        }
+        if (isNaN(w)) {
+            w = this.lastBounds.w;
+        }
+        else {
+            w = w / this._xscale;
+        }
+        if (isNaN(h)) {
+            h = this.lastBounds.h;
+        }
+        else {
+            h = h / this._yscale;
+        }
+        this.element.style.transform = `translate(${x}px, ${y}px) scale(${w}, ${h})`;
+        this.element.style.transformOrigin = 'top left';
+        this.lastBounds.x = x;
+        this.lastBounds.y = y;
+        this.lastBounds.w = w;
+        this.lastBounds.h = h;
+    }
+}
+
 /**
  * @target web
  */
@@ -27417,9 +27488,11 @@ class BrowserUiFacade {
         cursorWrapper.classList.add('at-cursors');
         let selectionWrapper = document.createElement('div');
         selectionWrapper.classList.add('at-selection');
-        let barCursor = document.createElement('div');
+        const barCursorContainer = this.createScalingElement();
+        const beatCursorContainer = this.createScalingElement();
+        let barCursor = barCursorContainer.element;
         barCursor.classList.add('at-cursor-bar');
-        let beatCursor = document.createElement('div');
+        let beatCursor = beatCursorContainer.element;
         beatCursor.classList.add('at-cursor-beat');
         // required css styles
         element.style.position = 'relative';
@@ -27433,21 +27506,23 @@ class BrowserUiFacade {
         barCursor.style.left = '0';
         barCursor.style.top = '0';
         barCursor.style.willChange = 'transform';
-        barCursor.style.width = '1px';
-        barCursor.style.height = '1px';
+        barCursorContainer.width = 1;
+        barCursorContainer.height = 1;
+        barCursorContainer.setBounds(0, 0, 1, 1);
         beatCursor.style.position = 'absolute';
         beatCursor.style.transition = 'all 0s linear';
         beatCursor.style.left = '0';
         beatCursor.style.top = '0';
         beatCursor.style.willChange = 'transform';
-        beatCursor.style.width = '3px';
-        beatCursor.style.height = '1px';
+        beatCursorContainer.width = 3;
+        beatCursorContainer.height = 1;
+        beatCursorContainer.setBounds(0, 0, 1, 1);
         // add cursors to UI
         element.insertBefore(cursorWrapper, element.firstChild);
         cursorWrapper.appendChild(selectionWrapper);
         cursorWrapper.appendChild(barCursor);
         cursorWrapper.appendChild(beatCursor);
-        return new Cursors(new HtmlElementContainer(cursorWrapper), new HtmlElementContainer(barCursor), new HtmlElementContainer(beatCursor), new HtmlElementContainer(selectionWrapper));
+        return new Cursors(new HtmlElementContainer(cursorWrapper), barCursorContainer, beatCursorContainer, new HtmlElementContainer(selectionWrapper));
     }
     getOffset(scrollContainer, container) {
         let element = container.element;
@@ -27501,11 +27576,20 @@ class BrowserUiFacade {
         return this._scrollContainer;
     }
     createSelectionElement() {
-        let element = document.createElement('div');
+        return this.createScalingElement();
+    }
+    createScalingElement() {
+        const element = document.createElement('div');
         element.style.position = 'absolute';
-        element.style.width = '1px';
-        element.style.height = '1px';
-        return new HtmlElementContainer(element);
+        // to typical browser zoom levels are:
+        // Chromium: 25,33,50,67,75,80,90, 100, 110, 125, 150, 175, 200, 250, 300, 400, 500
+        // Firefox: 30, 50, 67, 80, 90, 100, 110, 120, 133, 150, 170, 200, 240, 300, 400, 500
+        // with having a 100x100 scaling container we should be able to provide appropriate scaling
+        const container = new ScalableHtmlElementContainer(element, 100, 100);
+        container.width = 1;
+        container.height = 1;
+        container.setBounds(0, 0, 1, 1);
+        return container;
     }
     scrollToY(element, scrollTargetY, speed) {
         this.internalScrollToY(element.element, scrollTargetY, speed);
@@ -29420,6 +29504,7 @@ class BarRendererBase {
         this._preBeatGlyphs = new LeftToRightLayoutingGlyphGroup();
         this._voiceContainers = new Map();
         this._postBeatGlyphs = new LeftToRightLayoutingGlyphGroup();
+        this._ties = [];
         this.x = 0;
         this.y = 0;
         this.width = 0;
@@ -29470,18 +29555,25 @@ class BarRendererBase {
         }
         return this.scoreRenderer.layout.getRendererForBar(this.staff.staveId, this.bar.previousBar);
     }
+    registerTies(ties) {
+        this._ties.push(...ties);
+    }
     get middleYPosition() {
         return 0;
     }
     registerOverflowTop(topOverflow) {
         if (topOverflow > this.topOverflow) {
             this.topOverflow = topOverflow;
+            return true;
         }
+        return false;
     }
     registerOverflowBottom(bottomOverflow) {
         if (bottomOverflow > this.bottomOverflow) {
             this.bottomOverflow = bottomOverflow;
+            return true;
         }
+        return false;
     }
     scaleToWidth(width) {
         // preBeat and postBeat glyphs do not get resized
@@ -29547,12 +29639,35 @@ class BarRendererBase {
     }
     finalizeRenderer() {
         this.isFinalized = true;
+        let didChangeOverflows = false;
+        // allow spacing to be used for tie overflows
+        const barTop = this.y - this.staff.topSpacing;
+        const barBottom = this.y + this.height + this.staff.bottomSpacing;
+        for (const tie of this._ties) {
+            tie.doLayout();
+            if (tie.height > 0) {
+                const bottomOverflow = tie.y + tie.height - barBottom;
+                if (bottomOverflow > 0) {
+                    if (this.registerOverflowBottom(bottomOverflow)) {
+                        didChangeOverflows = true;
+                    }
+                }
+                const topOverflow = tie.y - barTop;
+                if (topOverflow < 0) {
+                    if (this.registerOverflowTop(topOverflow * -1)) {
+                        didChangeOverflows = true;
+                    }
+                }
+            }
+        }
+        return didChangeOverflows;
     }
     doLayout() {
         if (!this.bar) {
             return;
         }
         this.helpers.initialize();
+        this._ties = [];
         this._preBeatGlyphs = new LeftToRightLayoutingGlyphGroup();
         this._preBeatGlyphs.renderer = this;
         this._voiceContainers.clear();
@@ -29641,7 +29756,7 @@ class BarRendererBase {
     paintBackground(cx, cy, canvas) {
         this.layoutingInfo.paint(cx + this.x + this._preBeatGlyphs.x + this._preBeatGlyphs.width, cy + this.y + this.height, canvas);
         // canvas.color = Color.random();
-        // canvas.fillRect(cx + this.x + this._preBeatGlyphs.x, cy + this.y, this._preBeatGlyphs.width, this.height);
+        // canvas.fillRect(cx + this.x, cy + this.y, this.width, this.height);
     }
     buildBoundingsLookup(masterBarBounds, cx, cy) {
         let barBounds = new BarBounds();
@@ -30114,12 +30229,15 @@ class EffectBarRenderer extends BarRendererBase {
         super.updateSizes();
     }
     finalizeRenderer() {
-        super.finalizeRenderer();
-        this.updateHeight();
+        let didChange = super.finalizeRenderer();
+        if (this.updateHeight()) {
+            didChange = true;
+        }
+        return didChange;
     }
     updateHeight() {
         if (!this.sizingInfo) {
-            return;
+            return false;
         }
         let y = 0;
         for (let slot of this.sizingInfo.slots) {
@@ -30130,7 +30248,11 @@ class EffectBarRenderer extends BarRendererBase {
             }
             y += slot.shared.height;
         }
-        this.height = y;
+        if (y !== this.height) {
+            this.height = y;
+            return true;
+        }
+        return false;
     }
     applyLayoutingInfo() {
         if (!super.applyLayoutingInfo()) {
@@ -31400,20 +31522,20 @@ class TrillGlyph extends EffectGlyph {
     }
     doLayout() {
         super.doLayout();
-        this.height = 20 * this.scale;
+        this.height = this.renderer.resources.markerFont.size * this.scale;
     }
     paint(cx, cy, canvas) {
         let res = this.renderer.resources;
         canvas.font = res.markerFont;
         let textw = canvas.measureText('tr');
-        canvas.fillText('tr', cx + this.x, cy + this.y + canvas.font.size / 2);
+        canvas.fillText('tr', cx + this.x, cy + this.y);
         let startX = textw + 3 * this.scale;
         let endX = this.width - startX;
         let waveScale = 1.2;
         let step = 11 * this.scale * waveScale;
         let loops = Math.max(1, (endX - startX) / step);
         let loopX = startX;
-        let loopY = cy + this.y + this.height;
+        let loopY = cy + this.y + this.height * 1.2;
         for (let i = 0; i < loops; i++) {
             canvas.fillMusicFontSymbol(cx + this.x + loopX, loopY, waveScale, MusicFontSymbol.WiggleTrill, false);
             loopX += step;
@@ -31972,8 +32094,15 @@ class RenderStaff {
         // the space over the bar renderers, for now we evenly apply the space to all bars
         let difference = width - this.staveGroup.width;
         let spacePerBar = difference / this.barRenderers.length;
+        let x = 0;
+        let topOverflow = this.topOverflow;
         for (let i = 0, j = this.barRenderers.length; i < j; i++) {
-            this.barRenderers[i].scaleToWidth(this.barRenderers[i].width + spacePerBar);
+            this.barRenderers[i].x = x;
+            this.barRenderers[i].y = this.topSpacing + topOverflow;
+            if (difference !== 0) {
+                this.barRenderers[i].scaleToWidth(this.barRenderers[i].width + spacePerBar);
+            }
+            x += this.barRenderers[i].width;
         }
     }
     get topOverflow() {
@@ -31997,19 +32126,29 @@ class RenderStaff {
         return m;
     }
     finalizeStaff() {
-        let x = 0;
         this.height = 0;
+        // 1st pass: let all renderers finalize themselves, this might cause
+        // changes in the overflows
+        let needsSecondPass = false;
         let topOverflow = this.topOverflow;
-        let bottomOverflow = this.bottomOverflow;
         for (let i = 0; i < this.barRenderers.length; i++) {
-            this.barRenderers[i].x = x;
             this.barRenderers[i].y = this.topSpacing + topOverflow;
             this.height = Math.max(this.height, this.barRenderers[i].height);
-            this.barRenderers[i].finalizeRenderer();
-            x += this.barRenderers[i].width;
+            if (this.barRenderers[i].finalizeRenderer()) {
+                needsSecondPass = true;
+            }
+        }
+        // 2nd pass: move renderers to correct position respecting the new overflows
+        if (needsSecondPass) {
+            topOverflow = this.topOverflow;
+            for (let i = 0; i < this.barRenderers.length; i++) {
+                this.barRenderers[i].y = this.topSpacing + topOverflow;
+                this.height = Math.max(this.height, this.barRenderers[i].height);
+                this.barRenderers[i].finalizeRenderer();
+            }
         }
         if (this.height > 0) {
-            this.height += this.topSpacing + topOverflow + bottomOverflow + this.bottomSpacing;
+            this.height += this.topSpacing + topOverflow + this.bottomOverflow + this.bottomSpacing;
         }
     }
     paint(cx, cy, canvas, startIndex, count) {
@@ -33199,7 +33338,7 @@ class HorizontalScreenLayout extends ScoreLayout {
                 ' to ' +
                 currentPartial.masterBars[currentPartial.masterBars.length - 1].index, null);
         }
-        this._group.finalizeGroup();
+        this.finalizeGroup();
         this.height = Math.floor(this._group.y + this._group.height);
         this.width = this._group.x + this._group.width + this._pagePadding[2];
         currentBarIndex = 0;
@@ -33237,6 +33376,10 @@ class HorizontalScreenLayout extends ScoreLayout {
         }
         this.height = this.layoutAndRenderAnnotation(this.height) + this._pagePadding[3];
     }
+    finalizeGroup() {
+        this._group.scaleToWidth(this._group.width);
+        this._group.finalizeGroup();
+    }
 }
 HorizontalScreenLayout.PagePadding = [20, 20, 20, 20];
 HorizontalScreenLayout.GroupSpacing = 20;
@@ -33433,7 +33576,6 @@ class PageViewLayout extends ScoreLayout {
             for (let i = 0; i < this._groups.length; i++) {
                 let group = this._groups[i];
                 this.fitGroup(group);
-                group.finalizeGroup();
                 y += this.paintGroup(group, oldHeight);
             }
         }
@@ -33466,7 +33608,6 @@ class PageViewLayout extends ScoreLayout {
                     group.isLast = this.lastBarIndex === group.lastBarIndex;
                     this._groups.push(group);
                     this.fitGroup(group);
-                    group.finalizeGroup();
                     y += this.paintGroup(group, oldHeight);
                     // note: we do not increase currentIndex here to have it added to the next group
                     group = this.createEmptyStaveGroup();
@@ -33478,7 +33619,6 @@ class PageViewLayout extends ScoreLayout {
             group.isLast = this.lastBarIndex === group.lastBarIndex;
             // don't forget to finish the last group
             this.fitGroup(group);
-            group.finalizeGroup();
             y += this.paintGroup(group, oldHeight);
         }
         return y;
@@ -33497,7 +33637,6 @@ class PageViewLayout extends ScoreLayout {
             currentBarIndex = group.lastBarIndex + 1;
             // finalize group (sizing etc).
             this.fitGroup(group);
-            group.finalizeGroup();
             Logger.debug(this.name, 'Rendering partial from bar ' + group.firstBarIndex + ' to ' + group.lastBarIndex, null);
             y += this.paintGroup(group, y);
         }
@@ -33534,6 +33673,10 @@ class PageViewLayout extends ScoreLayout {
         if (group.isFull || group.width > this.maxWidth) {
             group.scaleToWidth(this.maxWidth);
         }
+        else {
+            group.scaleToWidth(group.width);
+        }
+        group.finalizeGroup();
     }
     createStaveGroup(currentBarIndex, endIndex) {
         let group = this.createEmptyStaveGroup();
@@ -33958,27 +34101,33 @@ class TieGlyph extends Glyph {
         this.startNoteRenderer = null;
         this.endNoteRenderer = null;
         this.tieDirection = BeamDirection.Up;
+        this._startX = 0;
+        this._startY = 0;
+        this._endX = 0;
+        this._endY = 0;
+        this._tieHeight = 0;
+        this._shouldDraw = false;
         this.startBeat = startBeat;
         this.endBeat = endBeat;
         this.forEnd = forEnd;
     }
     doLayout() {
         this.width = 0;
-    }
-    paint(cx, cy, canvas) {
+        // TODO fix nullability of start/end beat,
         if (!this.endBeat) {
+            this._shouldDraw = false;
             return;
         }
-        // TODO fix nullability of start/end beat,
         let startNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staveId, this.startBeat.voice.bar);
         this.startNoteRenderer = startNoteRenderer;
         let endNoteRenderer = this.renderer.scoreRenderer.layout.getRendererForBar(this.renderer.staff.staveId, this.endBeat.voice.bar);
         this.endNoteRenderer = endNoteRenderer;
-        let startX = 0;
-        let endX = 0;
-        let startY = 0;
-        let endY = 0;
-        let shouldDraw = false;
+        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
@@ -33987,39 +34136,54 @@ class TieGlyph extends Glyph {
         if (!this.forEnd && startNoteRenderer) {
             // line break or bar break
             if (startNoteRenderer !== endNoteRenderer) {
-                startX = cx + startNoteRenderer.x + this.getStartX();
-                startY = cy + startNoteRenderer.y + this.getStartY() + this.yOffset;
+                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) {
-                    endX = cx + startNoteRenderer.x + startNoteRenderer.width;
-                    endY = startY;
+                    this._endX = startNoteRenderer.x + startNoteRenderer.width;
+                    this._endY = this._startY;
                 }
                 else {
-                    endX = cx + endNoteRenderer.x + this.getEndX();
-                    endY = cy + endNoteRenderer.y + this.getEndY() + this.yOffset;
+                    this._endX = endNoteRenderer.x + this.getEndX();
+                    this._endY = endNoteRenderer.y + this.getEndY() + this.yOffset;
                 }
             }
             else {
-                startX = cx + startNoteRenderer.x + this.getStartX();
-                endX = cx + endNoteRenderer.x + this.getEndX();
-                startY = cy + startNoteRenderer.y + this.getStartY() + this.yOffset;
-                endY = cy + endNoteRenderer.y + this.getEndY() + this.yOffset;
+                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;
             }
-            shouldDraw = true;
+            this._shouldDraw = true;
         }
         else if (!startNoteRenderer || startNoteRenderer.staff !== endNoteRenderer.staff) {
-            startX = cx + endNoteRenderer.x;
-            endX = cx + endNoteRenderer.x + this.getEndX();
-            startY = cy + endNoteRenderer.y + this.getEndY() + this.yOffset;
-            endY = startY;
-            shouldDraw = true;
+            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;
+        }
+        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);
+                this.height = TieGlyph.calculateActualTieHeight(this.renderer.scale, this._startX, this._startY, this._endX, this._endY, this.tieDirection === BeamDirection.Down, this._tieHeight, 4).h;
+            }
+            if (this.tieDirection === BeamDirection.Up) {
+                this.y -= this.height;
+            }
         }
-        if (shouldDraw) {
+    }
+    paint(cx, cy, canvas) {
+        if (this._shouldDraw) {
             if (this.shouldDrawBendSlur()) {
-                TieGlyph.drawBendSlur(canvas, startX, startY, endX, endY, this.tieDirection === BeamDirection.Down, this.scale);
+                TieGlyph.drawBendSlur(canvas, cx + this._startX, cy + this._startY, cx + this._endX, cy + this._endY, this.tieDirection === BeamDirection.Down, this.scale);
             }
             else {
-                TieGlyph.paintTie(canvas, this.scale, startX, startY, endX, endY, this.tieDirection === BeamDirection.Down, this.getTieHeight(startX, startY, endX, endY), 4);
+                TieGlyph.paintTie(canvas, this.scale, cx + this._startX, cy + this._startY, cx + this._endX, cy + this._endY, this.tieDirection === BeamDirection.Down, this._tieHeight, 4);
             }
         }
     }
@@ -34044,9 +34208,42 @@ class TieGlyph extends Glyph {
     getEndX() {
         return 0;
     }
-    static paintTie(canvas, scale, x1, y1, x2, y2, down = false, offset = 22, size = 4) {
+    static calculateActualTieHeight(scale, x1, y1, x2, y2, down, offset, size) {
+        const cp = TieGlyph.computeBezierControlPoints(scale, x1, y1, x2, y2, down, offset, size);
+        x1 = cp[0];
+        y1 = cp[1];
+        const cpx = cp[2];
+        const cpy = cp[3];
+        x2 = cp[6];
+        y2 = cp[7];
+        const tx = (x1 - cpx) / (x1 - 2 * cpx + x2);
+        const ex = TieGlyph.calculateExtrema(x1, y1, cpx, cpy, x2, y2, tx);
+        const xMin = ex.length > 0 ? Math.min(x1, x2, ex[0]) : Math.min(x1, x2);
+        const xMax = ex.length > 0 ? Math.max(x1, x2, ex[0]) : Math.max(x1, x2);
+        const ty = (y1 - cpy) / (y1 - 2 * cpy + y2);
+        const ey = TieGlyph.calculateExtrema(x1, y1, cpx, cpy, x2, y2, ty);
+        const yMin = ey.length > 0 ? Math.min(y1, y2, ey[1]) : Math.min(y1, y2);
+        const yMax = ey.length > 0 ? Math.max(y1, y2, ey[1]) : Math.max(y1, y2);
+        const b = new Bounds();
+        b.x = xMin;
+        b.y = yMin;
+        b.w = xMax - xMin;
+        b.h = yMax - yMin;
+        return b;
+    }
+    static calculateExtrema(x1, y1, cpx, cpy, x2, y2, t) {
+        if (t <= 0 || 1 <= t) {
+            return [];
+        }
+        const c1x = x1 + (cpx - x1) * t;
+        const c1y = y1 + (cpy - y1) * t;
+        const c2x = cpx + (x2 - cpx) * t;
+        const c2y = cpy + (y2 - cpy) * t;
+        return [c1x + (c2x - c1x) * t, c1y + (c2y - c1y) * t];
+    }
+    static computeBezierControlPoints(scale, x1, y1, x2, y2, down, offset, size) {
         if (x1 === x2 && y1 === y2) {
-            return;
+            return [];
         }
         // ensure endX > startX
         if (x2 < x1) {
@@ -34083,12 +34280,26 @@ class TieGlyph extends Glyph {
         let cp1Y = centerY + offset * normalVectorY;
         let cp2X = centerX + (offset - size) * normalVectorX;
         let cp2Y = centerY + (offset - size) * normalVectorY;
+        return [x1, y1, cp1X, cp1Y, cp2X, cp2Y, x2, y2];
+    }
+    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(x1, y1);
-        canvas.quadraticCurveTo(cp1X, cp1Y, x2, y2);
-        canvas.quadraticCurveTo(cp2X, cp2Y, x1, y1);
+        canvas.moveTo(cps[0], cps[1]);
+        canvas.quadraticCurveTo(cps[2], cps[3], cps[6], cps[7]);
+        canvas.quadraticCurveTo(cps[4], cps[5], cps[0], cps[1]);
         canvas.closePath();
         canvas.fill();
+        // const c = canvas.color;
+        // canvas.color = Color.random(100);
+        // canvas.fillCircle(cps[0], cps[1], 4);
+        // canvas.fillCircle(cps[2], cps[3], 4);
+        // canvas.fillCircle(cps[4], cps[5], 4);
+        // canvas.fillCircle(cps[7], cps[6], 4);
+        // canvas.color = Color.random(100);
+        // const bbox = TieGlyph.calculateActualTieHeight(scale, x1, y1, x2, y2, down, offset, size);
+        // canvas.fillRect(bbox.x, bbox.y, bbox.w, bbox.h);
+        // canvas.color = c;
     }
     static drawBendSlur(canvas, x1, y1, x2, y2, down, scale, slurText) {
         let normalVectorX = y2 - y1;
@@ -36910,7 +37121,7 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
                 while (destination.nextBeat && destination.nextBeat.isLegatoDestination) {
                     destination = destination.nextBeat;
                 }
-                this.ties.push(new ScoreLegatoGlyph(this.beat, destination, false));
+                this.addTie(new ScoreLegatoGlyph(this.beat, destination, false));
             }
         }
         else if (this.beat.isLegatoDestination) {
@@ -36920,7 +37131,7 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
                 while (origin.previousBeat && origin.previousBeat.isLegatoOrigin) {
                     origin = origin.previousBeat;
                 }
-                this.ties.push(new ScoreLegatoGlyph(origin, this.beat, true));
+                this.addTie(new ScoreLegatoGlyph(origin, this.beat, true));
             }
         }
         if (this._bend) {
@@ -36944,32 +37155,32 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
             n.tieDestination.isVisible) {
             // tslint:disable-next-line: no-unnecessary-type-assertion
             let tie = new ScoreTieGlyph(n, n.tieDestination, false);
-            this.ties.push(tie);
+            this.addTie(tie);
         }
         if (n.isTieDestination && !n.tieOrigin.hasBend && !n.beat.hasWhammyBar) {
             let tie = new ScoreTieGlyph(n.tieOrigin, n, true);
-            this.ties.push(tie);
+            this.addTie(tie);
         }
         // TODO: depending on the type we have other positioning
         // we should place glyphs in the preNotesGlyph or postNotesGlyph if needed
         if (n.slideInType !== SlideInType.None || n.slideOutType !== SlideOutType.None) {
             let l = new ScoreSlideLineGlyph(n.slideInType, n.slideOutType, n, this);
-            this.ties.push(l);
+            this.addTie(l);
         }
         if (n.isSlurOrigin && n.slurDestination && n.slurDestination.isVisible) {
             // tslint:disable-next-line: no-unnecessary-type-assertion
             let tie = new ScoreSlurGlyph(n, n.slurDestination, false);
-            this.ties.push(tie);
+            this.addTie(tie);
         }
         if (n.isSlurDestination) {
             let tie = new ScoreSlurGlyph(n.slurOrigin, n, true);
-            this.ties.push(tie);
+            this.addTie(tie);
         }
         // start effect slur on first beat
         if (!this._effectSlur && n.isEffectSlurOrigin && n.effectSlurDestination) {
             const effectSlur = new ScoreSlurGlyph(n, n.effectSlurDestination, false);
             this._effectSlur = effectSlur;
-            this.ties.push(effectSlur);
+            this.addTie(effectSlur);
         }
         // end effect slur on last beat
         if (!this._effectEndSlur && n.beat.isEffectSlurDestination && n.beat.effectSlurOrigin) {
@@ -36978,14 +37189,14 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
             let endNote = direction === BeamDirection.Up ? n.beat.minNote : n.beat.maxNote;
             const effectEndSlur = new ScoreSlurGlyph(startNote, endNote, true);
             this._effectEndSlur = effectEndSlur;
-            this.ties.push(effectEndSlur);
+            this.addTie(effectEndSlur);
         }
         if (n.hasBend) {
             if (!this._bend) {
                 const bend = new ScoreBendGlyph(n.beat);
                 this._bend = bend;
                 bend.renderer = this.renderer;
-                this.ties.push(bend);
+                this.addTie(bend);
             }
             // tslint:disable-next-line: no-unnecessary-type-assertion
             this._bend.addBends(n);
@@ -38127,15 +38338,15 @@ class TabBeatContainerGlyph extends BeatContainerGlyph {
         let renderer = this.renderer;
         if (n.isTieOrigin && renderer.showTiedNotes && n.tieDestination.isVisible) {
             let tie = new TabTieGlyph(n, n.tieDestination, false);
-            this.ties.push(tie);
+            this.addTie(tie);
         }
         if (n.isTieDestination && renderer.showTiedNotes) {
             let tie = new TabTieGlyph(n.tieOrigin, n, true);
-            this.ties.push(tie);
+            this.addTie(tie);
         }
         if (n.isLeftHandTapped && !n.isHammerPullDestination) {
             let tapSlur = new TabTieGlyph(n, n, false);
-            this.ties.push(tapSlur);
+            this.addTie(tapSlur);
         }
         // start effect slur on first beat
         if (n.isEffectSlurOrigin && n.effectSlurDestination) {
@@ -38149,7 +38360,7 @@ class TabBeatContainerGlyph extends BeatContainerGlyph {
             if (!expanded) {
                 let effectSlur = new TabSlurGlyph(n, n.effectSlurDestination, false, false);
                 this._effectSlurs.push(effectSlur);
-                this.ties.push(effectSlur);
+                this.addTie(effectSlur);
             }
         }
         // end effect slur on last beat
@@ -38164,19 +38375,19 @@ class TabBeatContainerGlyph extends BeatContainerGlyph {
             if (!expanded) {
                 let effectSlur = new TabSlurGlyph(n.effectSlurOrigin, n, false, true);
                 this._effectSlurs.push(effectSlur);
-                this.ties.push(effectSlur);
+                this.addTie(effectSlur);
             }
         }
         if (n.slideInType !== SlideInType.None || n.slideOutType !== SlideOutType.None) {
             let l = new TabSlideLineGlyph(n.slideInType, n.slideOutType, n, this);
-            this.ties.push(l);
+            this.addTie(l);
         }
         if (n.hasBend) {
             if (!this._bend) {
                 const bend = new TabBendGlyph();
                 this._bend = bend;
                 bend.renderer = this.renderer;
-                this.ties.push(bend);
+                this.addTie(bend);
             }
             this._bend.addBends(n);
         }
@@ -41167,8 +41378,8 @@ class CoreSettings {
 // </auto-generated>
 class VersionInfo {
 }
-VersionInfo.version = '1.3.0-alpha.411';
-VersionInfo.date = '2022-10-04T01:07:09.329Z';
+VersionInfo.version = '1.3.0-alpha.418';
+VersionInfo.date = '2022-10-11T00:58:31.859Z';
 
 var index$5 = /*#__PURE__*/Object.freeze({
     __proto__: null,