Draw a filled treble clef on each staff.

The spiral sits on the G line, with the hook under the staff. The chart is a little wider so the holes stay the same size. Version 0.2.5.

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

src/lib/png-layout.ts

@@ -1,5 +1,5 @@
 import type { LineNote } from "@/lib/line";
-import { chartPixelHeight } from "@/lib/notation";
+import { chartOuterWidth, chartPixelHeight } from "@/lib/notation";
 
 export const PNG_CHART_WIDTH = 88;
 const GAP = 18;
@@ -20,12 +20,13 @@ export type PngItem = {
 };
 
 export function pngItemFromNote(note: Pick<LineNote, "kind" | "pitch" | "quarters" | "label">, chartWidth = PNG_CHART_WIDTH): PngItem {
+  const drawn = chartOuterWidth(chartWidth);
   const glyphHeight = chartPixelHeight(chartWidth);
   const caption = note.kind === "note" ? note.pitch : note.kind === "rest" ? "Rest" : "Space";
   return {
     kind: note.kind,
     caption,
-    glyphWidth: note.kind === "space" ? spacePixelWidth(note.quarters, chartWidth) : chartWidth,
+    glyphWidth: note.kind === "space" ? spacePixelWidth(note.quarters, drawn) : drawn,
     glyphHeight,
   };
 }