Added new attribute - start-fret for which fret the fretboard starts on

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;
   }