Add a New line button for another fingering row.

Each line keeps its own charts and staff. Save PNG stacks every line. Version 0.2.3.

Co-authored-by: catpersonisme <catpersonisme@gmail.com>

src/lib/png-layout.ts

@@ -35,6 +35,17 @@ export function pngSlotWidth(item: PngItem): number {
   return Math.max(item.glyphWidth, text, 48);
 }
 
+export const PNG_ROW_GAP = 36;
+
+/** One header, then every fingering line stacked underneath. */
+export function pngStackLayout(rows: PngItem[][], title: string) {
+  const laid = rows.map((items) => pngLayout(items, title));
+  const width = Math.max(1, ...laid.map((row) => row.width));
+  const blocks = laid.reduce((sum, row) => sum + row.glyphHeight + 28, 0);
+  const height = PAD + 44 + blocks + PNG_ROW_GAP * Math.max(0, laid.length - 1) + PAD;
+  return { width, height, rows: laid, pad: PAD, rowGap: PNG_ROW_GAP };
+}
+
 export function pngLayout(items: PngItem[], title: string) {
   const slots = items.map((item) => ({ item, width: pngSlotWidth(item) }));
   const content =