Merge pull request #658 from no-chris/fix-chordlyrics-renderer

Fix edge case in chordLyric renderer when the lyric line finishes in the middle of a chord symbol
no-chris · Jan 27, 2024 · ebd57ba · ebd57ba
2 parents f6a3670 + 9851628
commit ebd57ba
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/packages/chord-mark/src/renderer/components/renderChordLyricLine.js b/packages/chord-mark/src/renderer/components/renderChordLyricLine.js
@@ -124,15 +124,21 @@ function getAllBreakpoints(allChordTokens, allLyricTokens) {
 		lyricLineBreakPoints
 	);
 
-	const longestLineBreakpoints =
-		_last(chordLineBreakPoints) > _last(lyricLineBreakPoints)
-			? chordLineBreakPoints
-			: lyricLineBreakPoints;
-
-	const lastBreakpoint = _last(allBreakpoints);
-	const remainingBreakpoints = longestLineBreakpoints.slice(
-		longestLineBreakpoints.indexOf(lastBreakpoint) + 1
+	let shortestLineBreakpoints;
+	let longestLineBreakpoints;
+
+	if (_last(chordLineBreakPoints) > _last(lyricLineBreakPoints)) {
+		longestLineBreakpoints = chordLineBreakPoints;
+		shortestLineBreakpoints = lyricLineBreakPoints;
+	} else {
+		longestLineBreakpoints = lyricLineBreakPoints;
+		shortestLineBreakpoints = chordLineBreakPoints;
+	}
+
+	const remainingBreakpoints = longestLineBreakpoints.filter(
+		(bp) => bp > _last(shortestLineBreakpoints)
 	);
+
 	if (remainingBreakpoints.length) {
 		allBreakpoints.push(...remainingBreakpoints);
 	}

diff --git a/packages/chord-mark/tests/unit/renderer/components/renderChordLyricLine.spec.js b/packages/chord-mark/tests/unit/renderer/components/renderChordLyricLine.spec.js
@@ -20,7 +20,6 @@ describe('renderChordLyricLine', () => {
 					['|', ''],
 				],
 			],
-			/**/
 			[
 				'Longer chord line, 2',
 				'C G',
@@ -201,6 +200,29 @@ describe('renderChordLyricLine', () => {
 					['|', ''],
 				],
 			],
+			/**/
+			[
+				'Marcia Martienne',
+				'Bm7 Bm7.. D7/F#..',
+				'_Voir ma bouche a_vide',
+				//|Bm7            |Bm7.. D7/F#. |
+				// Voir ma bouche avide
+				[
+					['|', ' '],
+					['Bm7 ', 'Voir'],
+					[' ', ' '],
+					['  ', 'ma'],
+					[' ', ' '],
+					['      ', 'bouche'],
+					[' ', ' '],
+					['|Bm7..', 'avide'],
+					[' ', ''],
+					['D7/F#..', ''],
+					[' ', ''],
+					['|', ''],
+				],
+				{ printChordsDuration: 'always' },
+			],
 			/* */
 		])('%s', (title, chordLine, lyricLine, pairs, options) => {
 			test(`${chordLine} ${lyricLine}`, () => {