feat: Add tempo label and adjust tempo marker rendering

src/importer/AlphaTexImporter.ts

@@ -3060,6 +3060,7 @@ export class AlphaTexImporter extends ScoreImporter {
             tempoAutomation.isLinear = false;
             tempoAutomation.type = AutomationType.Tempo;
             tempoAutomation.value = this._score.tempo;
+            tempoAutomation.text = this._score.tempoLabel;
             master.tempoAutomations.push(tempoAutomation);
         }
         return anyMeta;

src/rendering/BarRendererBase.ts

@@ -249,12 +249,15 @@ export class BarRendererBase {
         this._postBeatGlyphs.width = this.layoutingInfo.postBeatSize;
         this.width = Math.ceil(this._postBeatGlyphs.x + this._postBeatGlyphs.width);
         this.computedWidth = this.width;
-        
+
         // For cases like in the horizontal layout we need to set the fixed width early
         // to have correct partials splitting. the proper alignment to this scale will happen
         // later in the workflow.
         const fixedBarWidth = this.barDisplayWidth;
-        if (fixedBarWidth > 0 && this.scoreRenderer.layout!.systemsLayoutMode == InternalSystemsLayoutMode.FromModelWithWidths) {
+        if (
+            fixedBarWidth > 0 &&
+            this.scoreRenderer.layout!.systemsLayoutMode == InternalSystemsLayoutMode.FromModelWithWidths
+        ) {
             this.width = fixedBarWidth;
             this.computedWidth = fixedBarWidth;
         }
@@ -452,7 +455,7 @@ export class BarRendererBase {
     }
 
     protected createBeatGlyphs(): void {
-        for(const voice of this.bar.voices) {
+        for (const voice of this.bar.voices) {
             if (this.hasVoiceContainer(voice)) {
                 this.createVoiceGlyphs(voice);
             }
@@ -499,6 +502,15 @@ export class BarRendererBase {
         return 0;
     }
 
+    public getRatioPositionX(ticks: number): number {
+        const firstOnNoteX = this.bar.isEmpty
+            ? this.beatGlyphsStart
+            : this.getBeatX(this.bar.voices[0].beats[0], BeatXPosition.OnNotes);
+        const x = firstOnNoteX;
+        const w = this.postBeatGlyphsStart - firstOnNoteX;
+        return x + w * ticks;
+    }
+
     public getNoteX(note: Note, requestedPosition: NoteXPosition): number {
         let container = this.getBeatContainer(note.beat);
         if (container) {
@@ -529,7 +541,7 @@ export class BarRendererBase {
         this.updateSizes();
         this.registerLayoutingInfo();
     }
-    
+
     protected recreatePreBeatGlyphs() {
         this._preBeatGlyphs = new LeftToRightLayoutingGlyphGroup();
         this._preBeatGlyphs.renderer = this;

src/rendering/glyphs/BarTempoGlyph.ts

@@ -1,7 +1,6 @@
 import { ICanvas, TextBaseline } from '@src/platform';
 import { EffectGlyph } from './EffectGlyph';
 import { Automation, MusicFontSymbol } from '@src/model';
-import { NoteHeadGlyph } from './NoteHeadGlyph';
 
 /**
  * This glyph renders tempo annotations for tempo automations
@@ -21,26 +20,30 @@ export class BarTempoGlyph extends EffectGlyph {
     }
 
     public override paint(cx: number, cy: number, canvas: ICanvas): void {
-        const startX = cx + this.x;
-        const endX = cx + this.renderer.postBeatGlyphsStart;
+        for (const automation of this.tempoAutomations) {
+            let x = cx + this.renderer.getRatioPositionX(automation.ratioPosition);
 
-        for(const automation of this.tempoAutomations) {
-            const x = cx + this.x + (endX - startX) * automation.ratioPosition;
             const res = this.renderer.resources;
             canvas.font = res.markerFont;
+
+            canvas.textBaseline = TextBaseline.Top;
+            if (automation.text) {
+                const size = canvas.measureText(automation.text);
+                canvas.fillText(automation.text, x, cy + this.y + canvas.font.size / 2);
+                x += size.width + canvas.font.size * 0.7;
+            }
             canvas.fillMusicFontSymbol(
                 x,
                 cy + this.y + this.height * 0.8,
-                NoteHeadGlyph.GraceScale,
+                0.5,
                 MusicFontSymbol.NoteQuarterUp,
-                false
+                true
             );
-            canvas.textBaseline = TextBaseline.Top;
             canvas.fillText(
                 '= ' + automation.value.toString(),
-                x + this.height / 2,
+                x + 8,
                 cy + this.y + canvas.font.size / 2
             );
         }
     }
-}
+}

src/rendering/glyphs/SustainPedalGlyph.ts

@@ -2,7 +2,6 @@ import { ICanvas } from '@src/platform';
 import { EffectGlyph } from './EffectGlyph';
 import { SustainPedalMarker, SustainPedalMarkerType } from '@src/model/Bar';
 import { MusicFontSymbol } from '@src/model';
-import { BeatXPosition } from '../BeatXPosition';
 
 export class SustainPedalGlyph extends EffectGlyph {
     private static readonly TextHeight = 19;
@@ -24,13 +23,7 @@ export class SustainPedalGlyph extends EffectGlyph {
     public override paint(cx: number, cy: number, canvas: ICanvas): void {
         const renderer = this.renderer;
 
-        const firstOnNoteX = renderer.bar.isEmpty
-            ? renderer.beatGlyphsStart
-            : renderer.getBeatX(renderer.bar.voices[0].beats[0], BeatXPosition.OnNotes);
-
-        const x = cx + this.x + firstOnNoteX;
         const y = cy + this.y;
-        const w = renderer.postBeatGlyphsStart - firstOnNoteX;
         const h = this.height;
 
         let markers = renderer.bar.sustainPedals;
@@ -39,34 +32,32 @@ export class SustainPedalGlyph extends EffectGlyph {
         while (markerIndex < markers.length) {
             let marker: SustainPedalMarker | null = markers[markerIndex];
             while (marker != null) {
-                const markerX = x + w * marker.ratioPosition;
+                const markerX = cx + this.renderer.getRatioPositionX(marker.ratioPosition);
 
                 // real own marker
                 let linePadding = 0;
                 if (marker.pedalType === SustainPedalMarkerType.Down) {
                     canvas.fillMusicFontSymbol(markerX, y + h, 1, MusicFontSymbol.KeyboardPedalPed, true);
-                    linePadding =
-                        (SustainPedalGlyph.TextWidth / 2) + SustainPedalGlyph.TextLinePadding;
+                    linePadding = SustainPedalGlyph.TextWidth / 2 + SustainPedalGlyph.TextLinePadding;
                 } else if (marker.pedalType === SustainPedalMarkerType.Up) {
                     canvas.fillMusicFontSymbol(markerX, y + h, 1, MusicFontSymbol.KeyboardPedalUp, true);
-                    linePadding =
-                        (SustainPedalGlyph.StarSize / 2) + SustainPedalGlyph.StarLinePadding;
+                    linePadding = SustainPedalGlyph.StarSize / 2 + SustainPedalGlyph.StarLinePadding;
                 }
 
                 // line to next marker or end-of-bar
                 if (marker.nextPedalMarker) {
                     if (marker.nextPedalMarker.bar === marker.bar) {
-                        let nextX = x + w * marker.nextPedalMarker.ratioPosition;
+                        let nextX = cx + this.renderer.getRatioPositionX(marker.nextPedalMarker.ratioPosition);
 
                         switch (marker.nextPedalMarker.pedalType) {
                             case SustainPedalMarkerType.Down:
-                                nextX -= (SustainPedalGlyph.TextWidth / 2);
+                                nextX -= SustainPedalGlyph.TextWidth / 2;
                                 break;
                             case SustainPedalMarkerType.Hold:
                                 // no offset on hold
                                 break;
                             case SustainPedalMarkerType.Up:
-                                nextX -= (SustainPedalGlyph.StarSize / 2);
+                                nextX -= SustainPedalGlyph.StarSize / 2;
                                 break;
                         }
 

src/synth/IAlphaSynth.ts

@@ -136,7 +136,7 @@ export interface IAlphaSynth {
     applyTranspositionPitches(transpositionPitches: Map<number, number>): void;
 
     /**
-     * Sets the transposition pitch a channel. This pitch is additionally applied beside the 
+     * Sets the transposition pitch of a given channel. This pitch is additionally applied beside the 
      * ones applied already via {@link applyTranspositionPitches}.
      * @param channel The channel number
      * @param semitones The number of semitones to apply as pitch offset.

test/visualTests/features/EffectsAndAnnotations.test.ts

@@ -17,6 +17,17 @@ describe('EffectsAndAnnotationsTests', () => {
         await VisualTestHelper.runVisualTest('effects-and-annotations/tempo.gp');
     });
 
+    it('tempo-text', async () => {
+        await VisualTestHelper.runVisualTestTex(
+            `
+            \\tempo 90 "First"
+            .
+            :4 3.3*4 | 3.3 3.3 {v f tempo 120 "Other" } 3.3 6.3
+        `,
+            `effects-and-annotations/tempo-text.png`
+        );
+    });
+
     it('beat-tempo-change', async () => {
         await VisualTestHelper.runVisualTest('effects-and-annotations/beat-tempo-change.gp');
     });
@@ -245,15 +256,19 @@ describe('EffectsAndAnnotationsTests', () => {
     });
 
     it('bend-vibrato-default', async () => {
-        const inputFileData = await TestPlatform.loadFile(`test-data/visual-tests/effects-and-annotations/bend-vibrato.gp`);
+        const inputFileData = await TestPlatform.loadFile(
+            `test-data/visual-tests/effects-and-annotations/bend-vibrato.gp`
+        );
         const referenceFileName = 'effects-and-annotations/bend-vibrato-default.png';
         const settings = new Settings();
         const score = ScoreLoader.loadScoreFromBytes(inputFileData, settings);
         await VisualTestHelper.runVisualTestScore(score, referenceFileName, settings);
     });
 
     it('bend-vibrato-songbook', async () => {
-        const inputFileData = await TestPlatform.loadFile(`test-data/visual-tests/effects-and-annotations/bend-vibrato.gp`);
+        const inputFileData = await TestPlatform.loadFile(
+            `test-data/visual-tests/effects-and-annotations/bend-vibrato.gp`
+        );
         const referenceFileName = 'effects-and-annotations/bend-vibrato-songbook.png';
         const settings = new Settings();
         settings.setSongBookModeSettings();