feat: Implement new bracket/braces/system rendering (#1730)

Author: Danielku15

package.json

@@ -58,7 +58,7 @@
         "test": "mocha",
         "test-csharp": "cd src.csharp && dotnet test -c Release",
         "test-kotlin": "cd src.kotlin/alphaTab && gradlew testReleaseUnitTest --info",
-        "test-accept-reference": "node scripts/accept-new-reference-files.mjs"
+        "test-accept-reference": "tsx scripts/accept-new-reference-files.ts"
     },
     "devDependencies": {
         "@coderline/alphaskia": "^2.3.120",

rollup.plugin.server.ts

@@ -4,12 +4,13 @@ import fs from 'fs';
 import path from 'path';
 import cors from 'cors';
 import url from 'url';
+import { acceptOne } from './scripts/accept-new-reference-files.common'
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 export interface ServerOptions {
-    port: number,
-    openPage: string
+    port: number;
+    openPage: string;
 }
 
 let app: express.Express;
@@ -21,16 +22,9 @@ export default function server(options: ServerOptions) {
     app = express();
 
     app.use(cors());
-    
-    const exposedFolders = [
-        'dist',
-        'src',
-        'font',
-        'img',
-        'playground',
-        'playground-template',
-        'test-data'
-    ];
+    app.use(express.json());
+
+    const exposedFolders = ['dist', 'src', 'font', 'img', 'playground', 'playground-template', 'test-data'];
 
     for (const exposedFolder of exposedFolders) {
         app.use('/' + exposedFolder, express.static(exposedFolder));
@@ -41,15 +35,15 @@ export default function server(options: ServerOptions) {
             const response: any = [];
 
             async function crawl(d: string, name: string) {
-                console.log('Crawling ', d);
+                // console.log('Crawling ', d);
                 const dir = await fs.promises.opendir(d);
                 try {
                     while (true) {
                         const entry = await dir.read();
                         if (!entry) {
                             break;
                         } else if (entry.isDirectory() && entry.name !== '.' && entry.name !== '..') {
-                            await crawl(path.join(d, entry.name), name + '/' + entry.name)
+                            await crawl(path.join(d, entry.name), name + '/' + entry.name);
                         } else if (entry.isFile()) {
                             if (entry.name.endsWith('.new.png')) {
                                 response.push({
@@ -60,38 +54,64 @@ export default function server(options: ServerOptions) {
                             }
                         }
                     }
-                }
-                finally {
+                } finally {
                     await dir.close();
                 }
             }
 
             const testDataPath = path.join(__dirname, 'test-data');
-            console.log('will crawl: ', testDataPath)
+            // console.log('will crawl: ', testDataPath);
             await crawl(testDataPath, 'test-data');
 
             res.json(response);
+        } catch (e) {
+            res.json({
+                message: (e as Error).message,
+                stack: (e as Error).stack
+            });
         }
-        catch (e) {
+    });
+
+    app.post('/accept-test-result', async (req, res) => {
+        try {
+            const body = req.body;
+            // basic validation that nothing bad happens
+            if(typeof body.originalFile !== 'string'){
+                res.sendStatus(400);
+                return;
+            }
+            const newFile = path.normalize(path.resolve(path.join(__dirname, body.newFile)));
+            const testDataPath = path.normalize(path.resolve(path.join(__dirname, 'test-data')));
+            
+            if(!newFile.startsWith(testDataPath)){
+                res.sendStatus(400);
+                return;
+            }
+
+            await acceptOne(newFile);
+            res.json({
+                message: 'Accepted'
+            });
+        } catch (e) {
             res.json({
                 message: (e as Error).message,
                 stack: (e as Error).stack
             });
         }
-    })
+    });
 
     app.listen(options.port, () => {
         console.log('Server listening on port ' + options.port);
     });
 
-    let first = true
+    let first = true;
     return {
         name: 'server',
         generateBundle() {
             if (first) {
-                first = false
-                opener(`http://localhost:${options.port}` + options.openPage)
+                first = false;
+                opener(`http://localhost:${options.port}` + options.openPage);
             }
         }
     };
-}
+}

scripts/accept-new-reference-files.common.ts

@@ -0,0 +1,35 @@
+import path from 'path';
+import fs from 'fs';
+
+export async function acceptOne(newFile: string) {
+    console.log('Accepting ', newFile);
+    await fs.promises.rename(newFile, newFile.replace('.new.png', '.png'));
+
+    const diff = newFile.replace('.new.png', '.diff.png');
+    if (fs.existsSync(diff)) {
+        await fs.promises.unlink(diff);
+    }
+    console.log('Accepted ', newFile);
+}
+
+export async function acceptAll(d: string) {
+    const dir = await fs.promises.opendir(d);
+    try {
+        while (true) {
+            const entry = await dir.read();
+            if (!entry) {
+                break;
+            } else if (entry.isDirectory() && entry.name !== '.' && entry.name !== '..') {
+                await acceptAll(path.join(d, entry.name));
+            } else if (entry.isFile()) {
+                if (entry.name.endsWith('.new.png')) {
+                    acceptOne(path.join(entry.parentPath, entry.name));
+                } else if (entry.name.endsWith('.diff.png')) {
+                    fs.promises.unlink(path.join(entry.parentPath, entry.name));
+                }
+            }
+        }
+    } finally {
+        await dir.close();
+    }
+}

scripts/accept-new-reference-files.mjs

@@ -0,0 +1,11 @@
+import url from 'url';
+import path from 'path';
+import { acceptAll } from './accept-new-reference-files.common';
+
+async function run() {
+    const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+    const testDataPath = path.join(__dirname, '..', 'test-data');
+    await acceptAll(testDataPath);
+}
+
+run();

scripts/accept-new-reference-files.ts

@@ -135,6 +135,16 @@ export class DisplaySettings {
      */
     public effectStaffPaddingBottom: number = 0;
 
+    /**
+     * Gets or sets the left padding applied between the left line and the first glyph in the first staff in a system.
+     */
+    public firstStaffPaddingLeft: number = 6;
+
+    /**
+     * Gets or sets the left padding applied between the left line and the first glyph in the following staff in a system.
+     */
+    public staffPaddingLeft: number = 2;
+
     /**
      * Gets how the systems should be layed out.
      */

src/DisplaySettings.ts

@@ -104,6 +104,14 @@ export interface DisplaySettingsJson {
      * Gets or sets the bottom padding applied to effect annotation staffs.
      */
     effectStaffPaddingBottom?: number;
+    /**
+     * Gets or sets the left padding applied between the left line and the first glyph in the first staff in a system.
+     */
+    firstStaffPaddingLeft?: number;
+    /**
+     * Gets or sets the left padding applied between the left line and the first glyph in the following staff in a system.
+     */
+    staffPaddingLeft?: number;
     /**
      * Gets how the systems should be layed out.
      */

src/generated/DisplaySettingsJson.ts

@@ -43,6 +43,8 @@ export class DisplaySettingsSerializer {
         o.set("notationstaffpaddingbottom", obj.notationStaffPaddingBottom);
         o.set("effectstaffpaddingtop", obj.effectStaffPaddingTop);
         o.set("effectstaffpaddingbottom", obj.effectStaffPaddingBottom);
+        o.set("firststaffpaddingleft", obj.firstStaffPaddingLeft);
+        o.set("staffpaddingleft", obj.staffPaddingLeft);
         o.set("systemslayoutmode", obj.systemsLayoutMode as number);
         return o;
     }
@@ -111,6 +113,12 @@ export class DisplaySettingsSerializer {
             case "effectstaffpaddingbottom":
                 obj.effectStaffPaddingBottom = v! as number;
                 return true;
+            case "firststaffpaddingleft":
+                obj.firstStaffPaddingLeft = v! as number;
+                return true;
+            case "staffpaddingleft":
+                obj.staffPaddingLeft = v! as number;
+                return true;
             case "systemslayoutmode":
                 obj.systemsLayoutMode = JsonHelper.parseEnum<SystemsLayoutMode>(v, SystemsLayoutMode)!;
                 return true;

src/generated/DisplaySettingsSerializer.ts

@@ -5,6 +5,7 @@
 // </auto-generated>
 import { RenderStylesheet } from "@src/model/RenderStylesheet";
 import { JsonHelper } from "@src/io/JsonHelper";
+import { BracketExtendMode } from "@src/model/RenderStylesheet";
 export class RenderStylesheetSerializer {
     public static fromJson(obj: RenderStylesheet, m: unknown): void {
         if (!m) {
@@ -18,13 +19,21 @@ export class RenderStylesheetSerializer {
         }
         const o = new Map<string, unknown>();
         o.set("hidedynamics", obj.hideDynamics);
+        o.set("bracketextendmode", obj.bracketExtendMode as number);
+        o.set("usesystemsignseparator", obj.useSystemSignSeparator);
         return o;
     }
     public static setProperty(obj: RenderStylesheet, property: string, v: unknown): boolean {
         switch (property) {
             case "hidedynamics":
                 obj.hideDynamics = v! as boolean;
                 return true;
+            case "bracketextendmode":
+                obj.bracketExtendMode = JsonHelper.parseEnum<BracketExtendMode>(v, BracketExtendMode)!;
+                return true;
+            case "usesystemsignseparator":
+                obj.useSystemSignSeparator = v! as boolean;
+                return true;
         }
         return false;
     }

src/generated/model/RenderStylesheetSerializer.ts

@@ -5,6 +5,7 @@ import { GpBinaryHelpers } from '@src/importer/Gp3To5Importer';
 import { BendPoint } from '@src/model/BendPoint';
 import { Bounds } from '@src/rendering/utils/Bounds';
 import { Color } from '@src/model/Color';
+import { BracketExtendMode } from '@src/model/RenderStylesheet';
 
 enum DataType {
     Boolean,
@@ -111,11 +112,17 @@ export class BinaryStylesheet {
     }
 
     public apply(score: Score): void {
-        for(const [key, value] of this.raw) {
+        for (const [key, value] of this.raw) {
             switch (key) {
                 case 'StandardNotation/hideDynamics':
                     score.stylesheet.hideDynamics = value as boolean;
                     break;
+                case 'System/bracketExtendMode':
+                    score.stylesheet.bracketExtendMode = (value as number) as BracketExtendMode;
+                    break;
+                case 'Global/useSystemSignSeparator':
+                    score.stylesheet.useSystemSignSeparator = value as boolean;
+                    break;
             }
         }
     }
@@ -126,9 +133,11 @@ export class BinaryStylesheet {
 
     public static writeForScore(score: Score): Uint8Array {
         const writer = ByteBuffer.withCapacity(128);
-        IOHelper.writeInt32BE(writer, 1); // entry count
+        IOHelper.writeInt32BE(writer, 3); // entry count
 
         BinaryStylesheet.writeBooleanEntry(writer, 'StandardNotation/hideDynamics', score.stylesheet.hideDynamics);
+        BinaryStylesheet.writeNumberEntry(writer, 'System/bracketExtendMode', score.stylesheet.bracketExtendMode as number);
+        BinaryStylesheet.writeBooleanEntry(writer, 'Global/useSystemSignSeparator', score.stylesheet.useSystemSignSeparator);
 
         return writer.toArray();
     }
@@ -138,4 +147,10 @@ export class BinaryStylesheet {
         writer.writeByte(DataType.Boolean as number);
         writer.writeByte(value ? 1 : 0);
     }
+
+    private static writeNumberEntry(writer: ByteBuffer, key: string, value: number) {
+        GpBinaryHelpers.gpWriteString(writer, key);
+        writer.writeByte(DataType.Integer as number);
+        IOHelper.writeInt32BE(writer, value)
+    }
 }