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

package/dist/alphaTab.js

@@ -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.
  * 
@@ -24150,6 +24150,10 @@
         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) {
@@ -24158,8 +24162,11 @@
             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;
@@ -24199,6 +24206,7 @@
             while (i >= 0) {
                 this.createTies(this.beat.notes[i--]);
             }
+            this.renderer.registerTies(this.ties);
             this.updateWidth();
         }
         updateWidth() {
@@ -24230,9 +24238,6 @@
             this.width = this.minWidth;
         }
         scaleToWidth(beatWidth) {
-            for (let tie of this.ties) {
-                tie.doLayout();
-            }
             this.onNotes.updateBeamingHelper();
             this.width = beatWidth;
         }
@@ -25030,6 +25035,7 @@
             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) {
@@ -25753,7 +25759,7 @@
     class HtmlElementContainer {
         constructor(element) {
             this._resizeListeners = 0;
-            this._lastBounds = new Bounds();
+            this.lastBounds = new Bounds();
             this.element = element;
             this.mouseDown = {
                 on: (value) => {
@@ -25844,23 +25850,23 @@
         }
         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);
@@ -26939,6 +26945,71 @@
         }
     }
 
+    /**
+     * 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
      */
@@ -27423,9 +27494,11 @@
             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';
@@ -27439,21 +27512,23 @@
             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;
@@ -27507,11 +27582,20 @@
             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);
@@ -29426,6 +29510,7 @@
             this._preBeatGlyphs = new LeftToRightLayoutingGlyphGroup();
             this._voiceContainers = new Map();
             this._postBeatGlyphs = new LeftToRightLayoutingGlyphGroup();
+            this._ties = [];
             this.x = 0;
             this.y = 0;
             this.width = 0;
@@ -29476,18 +29561,25 @@
             }
             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
@@ -29553,12 +29645,35 @@
         }
         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();
@@ -29647,7 +29762,7 @@
         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();
@@ -30120,12 +30235,15 @@
             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) {
@@ -30136,7 +30254,11 @@
                 }
                 y += slot.shared.height;
             }
-            this.height = y;
+            if (y !== this.height) {
+                this.height = y;
+                return true;
+            }
+            return false;
         }
         applyLayoutingInfo() {
             if (!super.applyLayoutingInfo()) {
@@ -31406,20 +31528,20 @@
         }
         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;
@@ -31978,8 +32100,15 @@
             // 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() {
@@ -32003,19 +32132,29 @@
             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) {
@@ -33205,7 +33344,7 @@
                     ' 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;
@@ -33243,6 +33382,10 @@
             }
             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;
@@ -33439,7 +33582,6 @@
                 for (let i = 0; i < this._groups.length; i++) {
                     let group = this._groups[i];
                     this.fitGroup(group);
-                    group.finalizeGroup();
                     y += this.paintGroup(group, oldHeight);
                 }
             }
@@ -33472,7 +33614,6 @@
                         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();
@@ -33484,7 +33625,6 @@
                 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;
@@ -33503,7 +33643,6 @@
                 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);
             }
@@ -33540,6 +33679,10 @@
             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();
@@ -33964,27 +34107,33 @@
             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
@@ -33993,39 +34142,54 @@
             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);
                 }
             }
         }
@@ -34050,9 +34214,42 @@
         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) {
@@ -34089,12 +34286,26 @@
             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;
@@ -36916,7 +37127,7 @@
                     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) {
@@ -36926,7 +37137,7 @@
                     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) {
@@ -36950,32 +37161,32 @@
                 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) {
@@ -36984,14 +37195,14 @@
                 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);
@@ -38133,15 +38344,15 @@
             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) {
@@ -38155,7 +38366,7 @@
                 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
@@ -38170,19 +38381,19 @@
                 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);
             }
@@ -41173,8 +41384,8 @@
     // </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,