feat: Add numbered notation (Jianpu)

src/Environment.ts

@@ -61,6 +61,7 @@ import { Font } from './model';
 import { Settings } from './Settings';
 import { AlphaTabError, AlphaTabErrorType } from './AlphaTabError';
 import { SlashBarRendererFactory } from './rendering/SlashBarRendererFactory';
+import { NumberedBarRendererFactory } from './rendering/NumberedBarRendererFactory';
 
 export class LayoutEngineFactory {
     public readonly vertical: boolean;
@@ -133,6 +134,7 @@ export class Environment {
             }
             .at-surface-svg text {
                 dominant-baseline: central;
+                white-space:pre;
             }
             .at {
                  font-family: 'alphaTab';
@@ -442,11 +444,11 @@ export class Environment {
 
     /**
      * Enables the usage of alphaSkia as rendering backend.
-     * @param musicFontData The raw binary data of the music font. 
+     * @param musicFontData The raw binary data of the music font.
      * @param alphaSkia The alphaSkia module.
      */
     public static enableAlphaSkia(musicFontData: ArrayBuffer, alphaSkia: unknown) {
-        SkiaCanvas.enable(musicFontData, alphaSkia)
+        SkiaCanvas.enable(musicFontData, alphaSkia);
     }
 
     /**
@@ -456,9 +458,7 @@ export class Environment {
      * @param fontInfo If provided the font info provided overrules
      * @returns The font info under which the font was registered.
      */
-    public static registerAlphaSkiaCustomFont(
-        fontData: Uint8Array,
-        fontInfo?: Font | undefined): Font {
+    public static registerAlphaSkiaCustomFont(fontData: Uint8Array, fontInfo?: Font | undefined): Font {
         return SkiaCanvas.registerFont(fontData, fontInfo);
     }
 
@@ -485,7 +485,7 @@ export class Environment {
                 new TripletFeelEffectInfo(),
                 new MarkerEffectInfo(),
                 new TextEffectInfo(),
-                new ChordsEffectInfo(),
+                new ChordsEffectInfo()
             ]),
             new SlashBarRendererFactory(),
             new EffectBarRendererFactory('score-effects', [
@@ -501,6 +501,7 @@ export class Environment {
                 new AlternateEndingsEffectInfo()
             ]),
             new ScoreBarRendererFactory(),
+            new NumberedBarRendererFactory(),
             new EffectBarRendererFactory('tab-effects', [
                 new CrescendoEffectInfo(),
                 new OttaviaEffectInfo(false),
@@ -535,8 +536,8 @@ export class Environment {
                 new TripletFeelEffectInfo(),
                 new MarkerEffectInfo(),
                 new TextEffectInfo(),
-                new ChordsEffectInfo(),
-            ]), 
+                new ChordsEffectInfo()
+            ]),
             new SlashBarRendererFactory(),
             new EffectBarRendererFactory('score-effects', [
                 new FermataEffectInfo(),
@@ -632,15 +633,12 @@ export class Environment {
         createWebWorker: (settings: Settings) => Worker,
         createAudioWorklet: (context: AudioContext, settings: Settings) => Promise<void>
     ) {
-        if(Environment.isRunningInWorker || Environment.isRunningInAudioWorklet) {
+        if (Environment.isRunningInWorker || Environment.isRunningInAudioWorklet) {
             return;
         }
-        
+
         // browser polyfills
-        if (
-            Environment.webPlatform === WebPlatform.Browser ||
-            Environment.webPlatform === WebPlatform.BrowserModule
-        ) {
+        if (Environment.webPlatform === WebPlatform.Browser || Environment.webPlatform === WebPlatform.BrowserModule) {
             Environment.registerJQueryPlugin();
             Environment.HighDpiFactor = window.devicePixelRatio;
             // ResizeObserver API does not yet exist so long on Safari (only start 2020 with iOS Safari 13.7 and Desktop 13.1)
@@ -660,7 +658,9 @@ export class Environment {
                     this.append(...nodes);
                 };
                 (Document.prototype as Document).replaceChildren = (Element.prototype as Element).replaceChildren;
-                (DocumentFragment.prototype as DocumentFragment).replaceChildren = (Element.prototype as Element).replaceChildren;
+                (DocumentFragment.prototype as DocumentFragment).replaceChildren = (
+                    Element.prototype as Element
+                ).replaceChildren;
             }
             if (!('replaceAll' in String.prototype)) {
                 (String.prototype as any).replaceAll = function (str: string, newStr: string) {
@@ -676,19 +676,24 @@ export class Environment {
     /**
      * @target web
      */
-    public static get alphaTabWorker(): any { return this.globalThis.Worker }
+    public static get alphaTabWorker(): any {
+        return this.globalThis.Worker;
+    }
 
     /**
      * @target web
      */
     public static initializeWorker() {
         if (!Environment.isRunningInWorker) {
-            throw new AlphaTabError(AlphaTabErrorType.General, "Not running in worker, cannot run worker initialization");
+            throw new AlphaTabError(
+                AlphaTabErrorType.General,
+                'Not running in worker, cannot run worker initialization'
+            );
         }
         AlphaTabWebWorker.init();
         AlphaSynthWebWorker.init();
         Environment.createWebWorker = _ => {
-            throw new AlphaTabError(AlphaTabErrorType.General, "Nested workers are not supported");
+            throw new AlphaTabError(AlphaTabErrorType.General, 'Nested workers are not supported');
         };
     }
 
@@ -697,7 +702,10 @@ export class Environment {
      */
     public static initializeAudioWorklet() {
         if (!Environment.isRunningInAudioWorklet) {
-            throw new AlphaTabError(AlphaTabErrorType.General, "Not running in audio worklet, cannot run worklet initialization");
+            throw new AlphaTabError(
+                AlphaTabErrorType.General,
+                'Not running in audio worklet, cannot run worklet initialization'
+            );
         }
         AlphaSynthWebWorklet.init();
     }
@@ -761,4 +769,4 @@ export class Environment {
 
         return WebPlatform.Browser;
     }
-}
+}

src/RenderingResources.ts

@@ -40,6 +40,16 @@ export class RenderingResources {
      */
     public fretboardNumberFont: Font = new Font(RenderingResources.sansFont, 11, FontStyle.Plain);
 
+    /**
+     * Gets or sets the font to use for displaying the numbered music notation in the music sheet.
+     */
+    public numberedNotationFont: Font = new Font(RenderingResources.sansFont, 16, FontStyle.Plain);
+
+    /**
+     * Gets or sets the font to use for displaying the grace notes in numbered music notation in the music sheet.
+     */
+    public numberedNotationGraceFont: Font = new Font(RenderingResources.sansFont, 14, FontStyle.Plain);
+
     /**
      * Gets or sets the font to use for displaying the guitar tablature numbers in the music sheet.
      */

src/generated/RenderingResourcesJson.ts

@@ -36,6 +36,14 @@ export interface RenderingResourcesJson {
      * Gets or sets the font to use for displaying the fretboard numbers in chord diagrams.
      */
     fretboardNumberFont?: FontJson;
+    /**
+     * Gets or sets the font to use for displaying the numbered music notation in the music sheet.
+     */
+    numberedNotationFont?: FontJson;
+    /**
+     * Gets or sets the font to use for displaying the grace notes in numbered music notation in the music sheet.
+     */
+    numberedNotationGraceFont?: FontJson;
     /**
      * Gets or sets the font to use for displaying the guitar tablature numbers in the music sheet.
      */

src/generated/RenderingResourcesSerializer.ts

@@ -25,6 +25,8 @@ export class RenderingResourcesSerializer {
         o.set("wordsfont", Font.toJson(obj.wordsFont));
         o.set("effectfont", Font.toJson(obj.effectFont));
         o.set("fretboardnumberfont", Font.toJson(obj.fretboardNumberFont));
+        o.set("numberednotationfont", Font.toJson(obj.numberedNotationFont));
+        o.set("numberednotationgracefont", Font.toJson(obj.numberedNotationGraceFont));
         o.set("tablaturefont", Font.toJson(obj.tablatureFont));
         o.set("gracefont", Font.toJson(obj.graceFont));
         o.set("stafflinecolor", Color.toJson(obj.staffLineColor));
@@ -58,6 +60,12 @@ export class RenderingResourcesSerializer {
             case "fretboardnumberfont":
                 obj.fretboardNumberFont = Font.fromJson(v)!;
                 return true;
+            case "numberednotationfont":
+                obj.numberedNotationFont = Font.fromJson(v)!;
+                return true;
+            case "numberednotationgracefont":
+                obj.numberedNotationGraceFont = Font.fromJson(v)!;
+                return true;
             case "tablaturefont":
                 obj.tablatureFont = Font.fromJson(v)!;
                 return true;

src/generated/model/StaffSerializer.ts

@@ -35,6 +35,7 @@ export class StaffSerializer {
         o.set("displaytranspositionpitch", obj.displayTranspositionPitch);
         o.set("stringtuning", TuningSerializer.toJson(obj.stringTuning));
         o.set("showslash", obj.showSlash);
+        o.set("shownumbered", obj.showNumbered);
         o.set("showtablature", obj.showTablature);
         o.set("showstandardnotation", obj.showStandardNotation);
         o.set("ispercussion", obj.isPercussion);
@@ -71,6 +72,9 @@ export class StaffSerializer {
             case "showslash":
                 obj.showSlash = v! as boolean;
                 return true;
+            case "shownumbered":
+                obj.showNumbered = v! as boolean;
+                return true;
             case "showtablature":
                 obj.showTablature = v! as boolean;
                 return true;

src/importer/AlphaTexImporter.ts

@@ -1075,6 +1075,7 @@ export class AlphaTexImporter extends ScoreImporter {
         let showStandardNotation: boolean = false;
         let showTabs: boolean = false;
         let showSlash: boolean = false;
+        let showNumbered: boolean = false;
         while (this._sy === AlphaTexSymbols.String) {
             switch ((this._syData as string).toLowerCase()) {
                 case 'score':
@@ -1089,15 +1090,20 @@ export class AlphaTexImporter extends ScoreImporter {
                     showSlash = true;
                     this._sy = this.newSy();
                     break;
+                case 'numbered':
+                    showNumbered = true;
+                    this._sy = this.newSy();
+                    break;
                 default:
                     this.error('staff-properties', AlphaTexSymbols.String, false);
                     break;
             }
         }
-        if (showStandardNotation || showTabs || showSlash) {
+        if (showStandardNotation || showTabs || showSlash || showNumbered) {
             this._currentStaff.showStandardNotation = showStandardNotation;
             this._currentStaff.showTablature = showTabs;
             this._currentStaff.showSlash = showSlash;
+            this._currentStaff.showNumbered = showNumbered;
         }
         if (this._sy !== AlphaTexSymbols.RBrace) {
             this.error('staff-properties', AlphaTexSymbols.RBrace, true);

src/importer/PartConfiguration.ts

@@ -41,6 +41,7 @@ class PartConfigurationScoreView {
 }
 
 class PartConfigurationTrackViewGroup {
+    public showNumbered: boolean = false;
     public showSlash: boolean = false;
     public showStandardNotation: boolean = false;
     public showTablature: boolean = false;
@@ -61,6 +62,7 @@ export class PartConfiguration {
                         staff.showTablature = trackConfig.showTablature;
                         staff.showStandardNotation = trackConfig.showStandardNotation;
                         staff.showSlash = trackConfig.showSlash;
+                        staff.showNumbered = trackConfig.showNumbered;
                     }
                 }
                 trackIndex++;
@@ -91,6 +93,7 @@ export class PartConfiguration {
                 trackConfiguration.showStandardNotation = (flags & 0x01) !== 0;
                 trackConfiguration.showTablature = (flags & 0x02) !== 0;
                 trackConfiguration.showSlash = (flags & 0x04) !== 0;
+                trackConfiguration.showNumbered = (flags & 0x08) !== 0;
                 scoreView.trackViewGroups.push(trackConfiguration);
             }
         }
@@ -110,6 +113,7 @@ export class PartConfiguration {
             trackConfiguration.showStandardNotation = track.staves[0].showStandardNotation;
             trackConfiguration.showTablature = track.staves[0].showTablature;
             trackConfiguration.showSlash = track.staves[0].showSlash;
+            trackConfiguration.showNumbered = track.staves[0].showNumbered;
 
             scoreViews[0].trackViewGroups.push(trackConfiguration);
 
@@ -133,6 +137,9 @@ export class PartConfiguration {
                 if(track.showSlash) {
                     flags = flags | 0x04;
                 }
+                if(track.showNumbered) {
+                    flags = flags | 0x08;
+                }
                 writer.writeByte(flags);
             }
         }

src/model/Staff.ts

@@ -82,6 +82,11 @@ export class Staff {
      */
     public showSlash: boolean = false;
 
+    /**
+     * Gets or sets whether the numbered notation is shown.
+     */
+    public showNumbered: boolean = false;
+
     /**
      * Gets or sets whether the tabs are shown.
      */