From 4f8d7f569f0e853f955247a4bc137b453cc191b1 Mon Sep 17 00:00:00 2001
From: Raphael Voellmy <r.voellmy@gmail.com>
Date: Mon, 18 Jul 2022 22:39:29 +0400
Subject: [PATCH] fix(chord chart): fix text on open/silent strings in
 horizontal orientation

---
 src/svguitar.ts       | 10 ++++++++--
 test/svguitar.test.ts | 20 ++++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/svguitar.ts b/src/svguitar.ts
index f71ef2d..3be0023 100644
--- a/src/svguitar.ts
+++ b/src/svguitar.ts
@@ -722,10 +722,15 @@ export class SVGuitarChord {
           const fontFamily = this.settings.fontFamily ?? defaultSettings.fontFamily
           const classNames = [ElementType.STRING_TEXT, `${ElementType.STRING_TEXT}-${stringIndex}`]
 
-          this.renderer.text(
-            fingerOptions.text,
+          const { x: textX, y: textY } = this.coordinates(
             stringXPositions[stringIndex],
             y + padding + size / 2,
+          )
+
+          this.renderer.text(
+            fingerOptions.text,
+            textX,
+            textY,
             textSize,
             textColor,
             fontFamily,
@@ -738,6 +743,7 @@ export class SVGuitarChord {
         if (value === OPEN) {
           // draw an O
           const classNames = [ElementType.OPEN_STRING, `${ElementType.OPEN_STRING}-${stringIndex}`]
+
           const { x: lineX1, y: lineY1 } = this.rectCoordinates(
             stringXPositions[stringIndex] - size / 2,
             y + padding,
diff --git a/test/svguitar.test.ts b/test/svguitar.test.ts
index 3f1b94c..79798c0 100644
--- a/test/svguitar.test.ts
+++ b/test/svguitar.test.ts
@@ -226,6 +226,26 @@ describe('SVGuitarChord', () => {
     saveSvg('silent and open colored', container.outerHTML)
   })
 
+  it('Should render text on silent and open string indicators vertically', () => {
+    svguitar
+      .chord({
+        fingers: [
+          [2, 0, 'A'],
+          [3, 'x', 'B'],
+          [4, 0, { text: 'C', textColor: 'green' }],
+          [5, 'x', { text: 'D', textColor: 'blue' }],
+        ],
+        barres: [],
+      })
+      .configure({
+        orientation: Orientation.horizontal,
+        title: 'Text on Open & Silent Strings Horizontal',
+      })
+      .draw()
+
+    saveSvg('silent and open colored', container.outerHTML)
+  })
+
   it('Should render nuts with a different color', () => {
     svguitar
       .chord({