fix(chord diagram): prevent fret markers outside the diagram

omnibrain · Oct 10, 2024 · 6c3bb7c · 6c3bb7c
1 parent 6267628
commit 6c3bb7c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/svguitar.ts b/src/svguitar.ts
@@ -725,7 +725,7 @@ export class SVGuitarChord {
       textY = y + padding
     } else {
       const lastFret = y
-      const firstFret = y - (this.settings.frets ?? defaultSettings.frets) * this.fretSpacing()
+      const firstFret = y - (this.numFrets()) * this.fretSpacing()
       textX = firstFret + (lastFret - firstFret) / 2
       textY = this.y(startX, 0) + padding
     }
@@ -897,6 +897,10 @@ export class SVGuitarChord {
     return this.settings.strings ?? defaultSettings.strings
   }
 
+  private numFrets() {
+    return this.settings.frets ?? defaultSettings.frets
+  }
+
   private stringSpacing(): number {
     const sidePadding = this.settings.sidePadding ?? defaultSettings.sidePadding
     const strings = this.numStrings()
@@ -915,7 +919,7 @@ export class SVGuitarChord {
   }
 
   private fretLinesYPos(startY: number): number[] {
-    const frets = this.settings.frets ?? defaultSettings.frets
+    const frets = this.numFrets()
     const fretSpacing = this.fretSpacing()
 
     return range(frets, 1).map((i) => startY + fretSpacing * i)
@@ -1041,7 +1045,7 @@ export class SVGuitarChord {
   }
 
   private drawGrid(y: number): number {
-    const frets = this.settings.frets ?? defaultSettings.frets
+    const frets = this.numFrets()
     const fretSize = this.settings.fretSize ?? defaultSettings.fretSize
     const relativeFingerSize = this.settings.fingerSize ?? defaultSettings.fingerSize
     const stringXPositions = this.stringXPos()
@@ -1205,6 +1209,11 @@ export class SVGuitarChord {
           fret: fretMarker,
         } : fretMarker) as DoubleFretMarker | SingleFretMarker
 
+        if (fretMarkerOptions.fret > this.numFrets()) {
+          // don't draw fret markers outside the chord diagram
+          return;
+        }
+
         const fretMarkerIndex = fretMarkerOptions.fret
         const fretMarkerCenterX = constants.width / 2
         const fretMarkerCenterY = y + (fretMarkerIndex + 1) * fretSpacing - fretSpacing / 2

diff --git a/test/svguitar.test.ts b/test/svguitar.test.ts
@@ -1118,6 +1118,7 @@ describe('SVGuitarChord', () => {
 
     saveSvg('fret markers horizontal', container.outerHTML)
   })
+
   it('Should remove all fret markers', () => {
     svguitar
     .chord({