wip attempt to split lines by commas

martijnversluis · martijnversluis · commit 124ea432286a · 2024-08-20T15:10:21.000+02:00
diff --git a/src/formatter/pdf_formatter.ts b/src/formatter/pdf_formatter.ts
@@ -67,7 +67,7 @@ type LayoutItem = {
 };
 
 type MeasuredItem = {
-  item: ChordLyricsPair | Comment | SoftLineBreak,
+  item: ChordLyricsPair | Comment | SoftLineBreak | Tag | Item,
   width: number,
   chordHeight?: number,
 };
@@ -356,43 +356,73 @@ class PdfFormatter extends Formatter {
     });
   }
 
+  splitString(str: string, regex: RegExp): string[] {
+    const position = str.search(regex);
+
+    if (position === -1) {
+      return [str];
+    }
+
+    const first = str.substring(0, position);
+    const rest = str.substring(position + 1);
+
+    return [first, ...this.splitString(rest, regex)];
+  }
+
   formatLine(line: Line) {
     const chordFont = this.getFontConfiguration('chord');
     const lyricsFont: FontConfiguration = this.getFontConfiguration('text');
     const commentFont: FontConfiguration = this.getFontConfiguration('comment');
 
-    const renderedLine = line.items.map((item) => {
+    const renderedLine = line.items.flatMap((item): MeasuredItem[] => {
       if (isChordLyricsPair(item)) {
-        const chordLyricsPair = item as ChordLyricsPair;
-        const { chords, lyrics } = chordLyricsPair;
-        const chordWidth = this.getTextDimensions(chords, chordFont).w;
-        const lyricWidth = this.getTextDimensions(lyrics, lyricsFont).w;
-
-        const pairWidth = (chordWidth > lyricWidth)
-          ? this.getTextDimensions(`${chords}${this.spaces}`, chordFont).w
-          : lyricWidth;
-
-        return {
-          item: chordLyricsPair,
-          width: pairWidth,
-          chordHeight: this.getTextDimensions(chords, chordFont).h,
-        };
+        return this.prepareAndMeasureChordLyricsItem(item as ChordLyricsPair, chordFont, lyricsFont);
       } else if (isTag(item) && isComment(item as Tag)) {
         const comment = item as Tag;
         const commentWidth = this.getTextDimensions(comment.value, commentFont).w;
 
-        return {
+        return [{
           item: comment,
           width: commentWidth,
-        };
+        }];
       } else {
-        return { item, width: 0 };
+        return [{ item, width: 0 }];
       }
     });
 
     this.renderLineItems(renderedLine);
   }
 
+  private prepareAndMeasureChordLyricsItem(item: ChordLyricsPair, chordFont: FontConfiguration, lyricsFont: FontConfiguration): MeasuredItem[] {
+    const chordLyricsPair = item as ChordLyricsPair;
+    const { chords, lyrics } = chordLyricsPair;
+    const lyricParts = this.splitString(lyrics || '', /,\s*/);
+
+    return lyricParts.flatMap((itemLyrics, index): MeasuredItem[] => {
+      const itemChords = (index === 0) ? chords : '';
+      const { w: chordWidth, h: chordHeight } = this.getTextDimensions(itemChords, chordFont);
+      const lyricWidth = this.getTextDimensions(itemLyrics, lyricsFont).w;
+
+      const pairWidth = (chordWidth > lyricWidth)
+        ? this.getTextDimensions(`${itemChords}${this.spaces}`, chordFont).w
+        : lyricWidth;
+
+      const ret: MeasuredItem[] = [];
+
+      if (index === 0) {
+        ret.push({ item: new SoftLineBreak(), width: 0 });
+      }
+
+      ret.push({
+        item: new ChordLyricsPair(itemChords, itemLyrics),
+        width: pairWidth,
+        chordHeight,
+      });
+
+      return ret;
+    });
+  }
+
   get spaces() {
     let str = '';
 
diff --git a/test/formatter/pdf/index.html b/test/formatter/pdf/index.html
@@ -10,8 +10,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/json/json.min.js"></script>
     <style>
-        #editors { height: 98vh; width: 49%;  float: left;}
-        #pdfViewer { height: 98vh; width: 49%; float: right; }
+        #editors { height: 98vh; width: 49%;  float: left; display: none; }
+        #pdfViewer { height: 98vh; width: 100%; float: right; }
     </style>
 </head>
 <body style="height: 100%;">
