fix(chord chart): fix text on open/silent strings in horizontal orien…

…tation
omnibrain · Jul 18, 2022 · 4f8d7f5 · 4f8d7f5
1 parent dd3a80c
commit 4f8d7f5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git 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
@@ -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({