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

package/dist/alphaTab.core.mjs

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.8.0-alpha.1639 (develop, build 1639)
+ * alphaTab v1.8.0-alpha.1640 (develop, build 1640)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -203,9 +203,9 @@ class AlphaTabError extends Error {
  * @internal
  */
 class VersionInfo {
-    static version = '1.8.0-alpha.1639';
-    static date = '2025-12-09T02:16:01.440Z';
-    static commit = 'af86866e4f9d89a3ccc34006d01473a549dbbe7f';
+    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}`);
@@ -48527,7 +48527,7 @@ class BeatContainerGlyph extends Glyph {
     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);
@@ -48551,8 +48551,8 @@ class BeatContainerGlyph extends Glyph {
         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) {
@@ -48695,7 +48695,7 @@ class BeatContainerGlyph extends Glyph {
             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();
@@ -48733,7 +48733,7 @@ class BeatContainerGlyph extends Glyph {
             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) {
@@ -54358,6 +54358,7 @@ class Cursors {
 class ScalableHtmlElementContainer extends HtmlElementContainer {
     _xscale;
     _yscale;
+    centerAtPosition = false;
     constructor(element, xscale, yscale) {
         super(element);
         this._xscale = xscale;
@@ -54399,7 +54400,11 @@ class ScalableHtmlElementContainer extends HtmlElementContainer {
         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;
@@ -55260,6 +55265,7 @@ class BrowserUiFacade {
         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);
@@ -56634,7 +56640,7 @@ var BeatXPosition;
      */
     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";
     /**
@@ -61813,7 +61819,8 @@ class BeatGlyphBase extends GlyphGroup {
  */
 class BeatOnNoteGlyphBase extends BeatGlyphBase {
     beamingHelper;
-    centerX = 0;
+    onTimeX = 0;
+    middleX = 0;
     updateBeamingHelper() {
     }
     buildBoundingsLookup(_beatBounds, _cx, _cy) {
@@ -63149,7 +63156,7 @@ class BarRendererBase {
                 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)
@@ -67215,14 +67222,15 @@ class NumberedBeatGlyph extends BeatOnNoteGlyphBase {
         }
         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;
     }
 }
 
@@ -68088,6 +68096,7 @@ class ScoreNoteChordGlyphBase extends Glyph {
     upLineX = 0;
     downLineX = 0;
     noteStartX = 0;
+    onTimeX = 0;
     constructor() {
         super(0, 0);
     }
@@ -68174,6 +68183,8 @@ class ScoreNoteChordGlyphBase extends Glyph {
         // 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);
@@ -68189,7 +68200,14 @@ class ScoreNoteChordGlyphBase extends Glyph {
                 }
             }
             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;
@@ -68203,6 +68221,23 @@ class ScoreNoteChordGlyphBase extends Glyph {
             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) {
@@ -68379,6 +68414,7 @@ class ScoreNoteChordGlyph extends ScoreNoteChordGlyphBase {
             this._deadSlapped.renderer = this.renderer;
             this._deadSlapped.doLayout();
             this.width = this._deadSlapped.width;
+            this.onTimeX = this.width / 2;
         }
         let aboveBeatEffectsY = 0;
         let belowBeatEffectsY = 0;
@@ -69277,13 +69313,16 @@ class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
         }
         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) {
@@ -71059,17 +71098,18 @@ class SlashBeatGlyph extends BeatOnNoteGlyphBase {
         }
         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;
     }
 }
 
@@ -71982,19 +72022,20 @@ class TabBeatGlyph extends BeatOnNoteGlyphBase {
         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() {

package/dist/alphaTab.js

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.8.0-alpha.1639 (develop, build 1639)
+ * 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.1639';
-        static date = '2025-12-09T02:16:01.440Z';
-        static commit = 'af86866e4f9d89a3ccc34006d01473a549dbbe7f';
+        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";
         /**
@@ -61819,7 +61825,8 @@
      */
     class BeatOnNoteGlyphBase extends BeatGlyphBase {
         beamingHelper;
-        centerX = 0;
+        onTimeX = 0;
+        middleX = 0;
         updateBeamingHelper() {
         }
         buildBoundingsLookup(_beatBounds, _cx, _cy) {
@@ -63155,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)
@@ -67221,14 +67228,15 @@
             }
             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;
         }
     }
 
@@ -68094,6 +68102,7 @@
         upLineX = 0;
         downLineX = 0;
         noteStartX = 0;
+        onTimeX = 0;
         constructor() {
             super(0, 0);
         }
@@ -68180,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);
@@ -68195,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;
@@ -68209,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) {
@@ -68385,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;
@@ -69283,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) {
@@ -71065,17 +71104,18 @@
             }
             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;
         }
     }
 
@@ -71988,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() {