feat(rendering): display tuning on staff lines

packages/alphatab/src/DisplaySettings.ts

@@ -248,6 +248,14 @@ export class DisplaySettings {
      */
     public accoladeBarPaddingRight: number = 3;
 
+    /**
+     * The padding between inline tuning labels and the start of the tab staff.
+     * @since 1.9.0
+     * @category Display
+     * @defaultValue `5`
+     */
+    public inlineTuningPaddingRight: number = 5;
+
     // Staff padding
 
     /**

packages/alphatab/src/generated/DisplaySettingsJson.ts

@@ -218,6 +218,13 @@ export interface DisplaySettingsJson {
      * @defaultValue `3`
      */
     accoladeBarPaddingRight?: number;
+    /**
+     * The padding between inline tuning labels and the start of the tab staff.
+     * @since 1.9.0
+     * @category Display
+     * @defaultValue `5`
+     */
+    inlineTuningPaddingRight?: number;
     /**
      * The top padding applied to the first main notation staff (standard, tabs, numbered, slash).
      * @since 1.8.0

packages/alphatab/src/generated/DisplaySettingsSerializer.ts

@@ -42,6 +42,7 @@ export class DisplaySettingsSerializer {
         o.set("systemlabelpaddingleft", obj.systemLabelPaddingLeft);
         o.set("systemlabelpaddingright", obj.systemLabelPaddingRight);
         o.set("accoladebarpaddingright", obj.accoladeBarPaddingRight);
+        o.set("inlinetuningpaddingright", obj.inlineTuningPaddingRight);
         o.set("firstnotationstaffpaddingtop", obj.firstNotationStaffPaddingTop);
         o.set("lastnotationstaffpaddingbottom", obj.lastNotationStaffPaddingBottom);
         o.set("notationstaffpaddingtop", obj.notationStaffPaddingTop);
@@ -109,6 +110,9 @@ export class DisplaySettingsSerializer {
             case "accoladebarpaddingright":
                 obj.accoladeBarPaddingRight = v! as number;
                 return true;
+            case "inlinetuningpaddingright":
+                obj.inlineTuningPaddingRight = v! as number;
+                return true;
             case "firstnotationstaffpaddingtop":
                 obj.firstNotationStaffPaddingTop = v! as number;
                 return true;

packages/alphatab/src/generated/model/RenderStylesheetSerializer.ts

@@ -6,6 +6,7 @@
 import { RenderStylesheet } from "@coderline/alphatab/model/RenderStylesheet";
 import { JsonHelper } from "@coderline/alphatab/io/JsonHelper";
 import { BracketExtendMode } from "@coderline/alphatab/model/RenderStylesheet";
+import { TuningDisplayMode } from "@coderline/alphatab/model/RenderStylesheet";
 import { TrackNamePolicy } from "@coderline/alphatab/model/RenderStylesheet";
 import { TrackNameMode } from "@coderline/alphatab/model/RenderStylesheet";
 import { TrackNameOrientation } from "@coderline/alphatab/model/RenderStylesheet";
@@ -29,6 +30,7 @@ export class RenderStylesheetSerializer {
         o.set("bracketextendmode", obj.bracketExtendMode as number);
         o.set("usesystemsignseparator", obj.useSystemSignSeparator);
         o.set("globaldisplaytuning", obj.globalDisplayTuning);
+        o.set("tuningdisplaymode", obj.tuningDisplayMode as number);
         if (obj.perTrackDisplayTuning !== null) {
             const m = new Map<string, unknown>();
             o.set("pertrackdisplaytuning", m);
@@ -80,6 +82,9 @@ export class RenderStylesheetSerializer {
             case "globaldisplaytuning":
                 obj.globalDisplayTuning = v! as boolean;
                 return true;
+            case "tuningdisplaymode":
+                obj.tuningDisplayMode = JsonHelper.parseEnum<TuningDisplayMode>(v, TuningDisplayMode)!;
+                return true;
             case "pertrackdisplaytuning":
                 obj.perTrackDisplayTuning = new Map<number, boolean>();
                 JsonHelper.forEach(v, (v, k) => {

packages/alphatab/src/importer/alphaTex/AlphaTex1EnumMappings.ts

@@ -18,7 +18,8 @@ import type {
     BracketExtendMode,
     TrackNameMode,
     TrackNameOrientation,
-    TrackNamePolicy
+    TrackNamePolicy,
+    TuningDisplayMode
 } from '@coderline/alphatab/model/RenderStylesheet';
 import type { SimileMark } from '@coderline/alphatab/model/SimileMark';
 import type { TremoloPickingStyle } from '@coderline/alphatab/model/TremoloPickingEffect';
@@ -198,6 +199,13 @@ export class AlphaTex1EnumMappings {
         ['shortname', 1]
     ]);
     public static readonly trackNameModeReversed = AlphaTex1EnumMappings._reverse(AlphaTex1EnumMappings.trackNameMode);
+    public static readonly tuningDisplayMode = new Map<string, TuningDisplayMode>([
+        ['score', 0],
+        ['staff', 1]
+    ]);
+    public static readonly tuningDisplayModeReversed = AlphaTex1EnumMappings._reverse(
+        AlphaTex1EnumMappings.tuningDisplayMode
+    );
     public static readonly textAlign = new Map<string, TextAlign>([
         ['left', 0],
         ['center', 1],

packages/alphatab/src/importer/alphaTex/AlphaTex1LanguageDefinitions.ts

@@ -181,6 +181,7 @@ export class AlphaTex1LanguageDefinitions {
         ['showdynamics', null],
         ['hidedynamics', null],
         ['usesystemsignseparator', null],
+        ['tuningdisplaymode', [[[[10, 17], 0, ['score', 'staff']]]]],
         ['multibarrest', null],
         ['bracketextendmode', [[[[10, 17], 0, ['nobrackets', 'groupstaves', 'groupsimilarinstruments']]]]],
         ['singletracktracknamepolicy', [[[[10, 17], 0, ['hidden', 'firstsystem', 'allsystems']]]]],
@@ -534,6 +535,7 @@ export class AlphaTex1LanguageDefinitions {
         ['showdynamics', null],
         ['hidedynamics', null],
         ['usesystemsignseparator', null],
+        ['tuningdisplaymode', null],
         ['multibarrest', null],
         ['bracketextendmode', null],
         ['singletracktracknamepolicy', null],

packages/alphatab/src/importer/alphaTex/AlphaTex1LanguageHandler.ts

@@ -71,7 +71,7 @@ import { NoteOrnament } from '@coderline/alphatab/model/NoteOrnament';
 import { Ottavia } from '@coderline/alphatab/model/Ottavia';
 import { PercussionMapper } from '@coderline/alphatab/model/PercussionMapper';
 import { PickStroke } from '@coderline/alphatab/model/PickStroke';
-import { BarNumberDisplay, type RenderStylesheet } from '@coderline/alphatab/model/RenderStylesheet';
+import { BarNumberDisplay, type RenderStylesheet, TuningDisplayMode } from '@coderline/alphatab/model/RenderStylesheet';
 import { HeaderFooterStyle, Score, ScoreStyle, ScoreSubElement } from '@coderline/alphatab/model/Score';
 import { Section } from '@coderline/alphatab/model/Section';
 import { SimileMark } from '@coderline/alphatab/model/SimileMark';
@@ -188,6 +188,18 @@ export class AlphaTex1LanguageHandler implements IAlphaTexLanguageImportHandler
             case 'usesystemsignseparator':
                 score.stylesheet.useSystemSignSeparator = true;
                 return ApplyNodeResult.Applied;
+            case 'tuningdisplaymode':
+                const tuningDisplayMode = AlphaTex1LanguageHandler._parseEnumValue(
+                    importer,
+                    metaData.arguments!,
+                    'tuning display mode',
+                    AlphaTex1EnumMappings.tuningDisplayMode
+                );
+                if (tuningDisplayMode === undefined) {
+                    return ApplyNodeResult.NotAppliedSemanticError;
+                }
+                score.stylesheet.tuningDisplayMode = tuningDisplayMode!;
+                return ApplyNodeResult.Applied;
             case 'multibarrest':
                 score.stylesheet.multiTrackMultiBarRest = true;
                 return ApplyNodeResult.Applied;
@@ -2562,6 +2574,14 @@ export class AlphaTex1LanguageHandler implements IAlphaTexLanguageImportHandler
         if (stylesheet.useSystemSignSeparator) {
             nodes.push(Atnf.meta('useSystemSignSeparator'));
         }
+        if (stylesheet.tuningDisplayMode !== TuningDisplayMode.Score) {
+            nodes.push(
+                Atnf.identMeta(
+                    'tuningDisplayMode',
+                    AlphaTex1EnumMappings.tuningDisplayModeReversed.get(stylesheet.tuningDisplayMode)!
+                )
+            );
+        }
         if (stylesheet.multiTrackMultiBarRest) {
             nodes.push(Atnf.meta('multiBarRest'));
         }

packages/alphatab/src/model/RenderStylesheet.ts

@@ -72,6 +72,22 @@ export enum TrackNameOrientation {
     Vertical = 1
 }
 
+/**
+ * Lists the different places where string tuning information is displayed.
+ * @public
+ */
+export enum TuningDisplayMode {
+    /**
+     * Tuning information is displayed above the score.
+     */
+    Score = 0,
+
+    /**
+     * Tuning note names are displayed beside the corresponding tab staff lines.
+     */
+    Staff = 1
+}
+
 /**
  * How bar numbers are displayed
  * @public
@@ -119,6 +135,11 @@ export class RenderStylesheet {
      */
     public globalDisplayTuning: boolean = true;
 
+    /**
+     * The place where tuning information is displayed.
+     */
+    public tuningDisplayMode: TuningDisplayMode = TuningDisplayMode.Score;
+
     /**
      * Whether to show the tuning.(per-track)
      */

packages/alphatab/src/model/_barrel.ts

@@ -51,6 +51,7 @@ export {
     TrackNamePolicy,
     TrackNameMode,
     TrackNameOrientation,
+    TuningDisplayMode,
     BarNumberDisplay
 } from '@coderline/alphatab/model/RenderStylesheet';
 export { RepeatGroup } from '@coderline/alphatab/model/RepeatGroup';

packages/alphatab/src/rendering/glyphs/InlineTuningGlyph.ts

@@ -0,0 +1,72 @@
+import { Tuning } from '@coderline/alphatab/model/Tuning';
+import { TrackSubElement } from '@coderline/alphatab/model/Track';
+import { NotationElement } from '@coderline/alphatab/NotationSettings';
+import { type ICanvas, TextAlign, TextBaseline } from '@coderline/alphatab/platform/ICanvas';
+import { TabBarRenderer } from '@coderline/alphatab/rendering/TabBarRenderer';
+import { Glyph } from '@coderline/alphatab/rendering/glyphs/Glyph';
+import type { RenderStaff } from '@coderline/alphatab/rendering/staves/RenderStaff';
+import { ElementStyleHelper } from '@coderline/alphatab/rendering/utils/ElementStyleHelper';
+
+/**
+ * @internal
+ */
+export class InlineTuningGlyph extends Glyph {
+    public readonly staff: RenderStaff;
+
+    private readonly _tabRenderer: TabBarRenderer;
+    private readonly _tunings: number[];
+
+    public constructor(staff: RenderStaff, tabRenderer: TabBarRenderer) {
+        super(0, 0);
+        this.staff = staff;
+        this._tabRenderer = tabRenderer;
+        this._tunings = staff.modelStaff.stringTuning.tunings;
+        this.renderer = tabRenderer;
+    }
+
+    public override doLayout(): void {
+        const canvas = this.renderer.scoreRenderer.canvas!;
+        const oldFont = canvas.font;
+        canvas.font = this.renderer.resources.elementFonts.get(NotationElement.GuitarTuning)!;
+
+        let textWidth = 0;
+        for (const tuning of this._tunings) {
+            textWidth = Math.max(textWidth, canvas.measureText(Tuning.getTextForTuning(tuning, false)).width);
+        }
+
+        canvas.font = oldFont;
+
+        this.width = textWidth > 0 ? textWidth + this.renderer.settings.display.inlineTuningPaddingRight : 0;
+        this.height = this._tabRenderer.height;
+    }
+
+    public override paint(cx: number, cy: number, canvas: ICanvas): void {
+        if (this.width === 0) {
+            return;
+        }
+
+        const oldFont = canvas.font;
+        const oldBaseLine = canvas.textBaseline;
+        const oldTextAlign = canvas.textAlign;
+
+        canvas.font = this.renderer.resources.elementFonts.get(NotationElement.GuitarTuning)!;
+        canvas.textBaseline = TextBaseline.Middle;
+        canvas.textAlign = TextAlign.Right;
+
+        const textEndX = cx - this.renderer.settings.display.inlineTuningPaddingRight;
+
+        using _ = ElementStyleHelper.track(canvas, TrackSubElement.StringTuning, this.staff.modelStaff.track, true);
+
+        for (let i = 0, j = this._tunings.length; i < j; i++) {
+            canvas.fillText(
+                Tuning.getTextForTuning(this._tunings[i], false),
+                textEndX,
+                cy + this._tabRenderer.y + this._tabRenderer.getLineY(i)
+            );
+        }
+
+        canvas.font = oldFont;
+        canvas.textBaseline = oldBaseLine;
+        canvas.textAlign = oldTextAlign;
+    }
+}

packages/alphatab/src/rendering/layout/ScoreLayout.ts

@@ -4,6 +4,7 @@ import { Logger } from '@coderline/alphatab/Logger';
 import type { Bar } from '@coderline/alphatab/model/Bar';
 import { Font, FontStyle, FontWeight } from '@coderline/alphatab/model/Font';
 import { ModelUtils } from '@coderline/alphatab/model/ModelUtils';
+import { TuningDisplayMode } from '@coderline/alphatab/model/RenderStylesheet';
 import { type Score, ScoreStyle, ScoreSubElement } from '@coderline/alphatab/model/Score';
 import type { Staff } from '@coderline/alphatab/model/Staff';
 import { type Track, TrackSubElement } from '@coderline/alphatab/model/Track';
@@ -305,7 +306,11 @@ export abstract class ScoreLayout {
                 }
             }
             // tuning info
-            if (stavesWithTuning.length > 0 && score.stylesheet.globalDisplayTuning) {
+            if (
+                stavesWithTuning.length > 0 &&
+                score.stylesheet.globalDisplayTuning &&
+                score.stylesheet.tuningDisplayMode === TuningDisplayMode.Score
+            ) {
                 this.tuningGlyph = new TuningContainerGlyph(0, 0);
                 this.tuningGlyph.renderer = fakeBarRenderer;
                 for (const staff of stavesWithTuning) {