From 3cc35e8dba5cabd77ab04863423549047e80a70a Mon Sep 17 00:00:00 2001
From: Aadhavan Srinivasan <aadhavan@twomorecents.org>
Date: Thu, 10 Jul 2025 16:07:31 -0400
Subject: [PATCH] Added new attribute - start-fret for which fret the fretboard
 starts on

---
 js/src/guitar-diagrams-web-component.mjs | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/js/src/guitar-diagrams-web-component.mjs b/js/src/guitar-diagrams-web-component.mjs
index 3305b24..e94a795 100644
--- a/js/src/guitar-diagrams-web-component.mjs
+++ b/js/src/guitar-diagrams-web-component.mjs
@@ -152,6 +152,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       "orient-horizontally",
       "fret-count",
       "scale-factor",
+      "start-fret",
       "center-align",
     ];
   }
@@ -170,6 +171,9 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       case "scale-factor":
         this.#config.scaleFactor = parseFloat(newValue);
         break;
+      case "start-fret":
+        this.#config.fretStartingNumber = parseFloat(newValue);
+        break;
       case "center-align":
         if (newValue == "true") {
           let canvas = this.#docRoot.getElementById(this.#config.canvasID);
@@ -534,11 +538,21 @@ class GuitarDiagramsWebComponent extends HTMLElement {
         GuitarDiagramsWebComponent.stringNameFontSize *
         GuitarDiagramsWebComponent.stringNamePaddingFactor *
         this.#config.scaleFactor;
+      paramMarker.posY +=
+        this.#config.fretStartingNumber == 0
+          ? 0
+          : GuitarDiagramsWebComponent.fretNumberFontSize *
+            this.#config.scaleFactor;
     } else {
       paramMarker.posY +=
         GuitarDiagramsWebComponent.stringNameFontSize *
         GuitarDiagramsWebComponent.stringNamePaddingFactor *
         this.#config.scaleFactor;
+      paramMarker.posX +=
+        this.#config.fretStartingNumber == 0
+          ? 0
+          : GuitarDiagramsWebComponent.fretNumberFontSize *
+            this.#config.scaleFactor;
     }
 
     //    paramMarker.posX = posX + boundingRect.left - window.pageXOffset;
@@ -975,7 +989,11 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       baseFreq = 82;
     }
 
-    const semitoneOffset = Math.pow(2, marker.fret / 12);
+    let currentFret = parseFloat(marker.fret);
+    if (typeof this.#config.fretStartingNumber !== "undefined") {
+      currentFret += parseFloat(this.#config.fretStartingNumber);
+    }
+    const semitoneOffset = Math.pow(2, currentFret / 12);
     let finalNote = baseFreq * semitoneOffset;
     return finalNote;
   }