Two new attributes: center-align will align the fretboard horizontally to the center (it'll try, atleast); show-chord will show (or hide) the 'play chord' button

js/src/guitar-diagrams-web-component.mjs

@@ -1,7 +1,7 @@
 import { GuitarDiagramsJSConfig } from "./guitar-diagrams-config.mjs";
 import { GuitarDiagramsJSMarker } from "./guitar-diagrams-marker.mjs";
 import "./tone.js";
-import { SampleLibrary } from "./tonejs-instruments/Tonejs-Instruments.js";
+import { SampleLibrary } from "./Tonejs-Instruments.js";
 
 class GuitarDiagramsWebComponent extends HTMLElement {
   // ========== BEGIN private members
@@ -97,6 +97,26 @@ class GuitarDiagramsWebComponent extends HTMLElement {
   }
 
   connectedCallback() {
+    if (this.getAttribute("center-align") == "true") {
+      let canvas = this.#docRoot.getElementById(this.#config.canvasID);
+      // canvas.style["position"] = "absolute";
+      // canvas.style["left"] = "50vw";
+      // canvas.style["transform"] = "translate(-50%, -50%)";
+      //
+      //          canvas.style["padding-left"] = 0;
+      //          canvas.style["padding-right"] = 0;
+      //          canvas.style["margin-left"] = "auto";
+      //          canvas.style["margin-right"] = "auto";
+      //          canvas.style["display"] = "block";
+      //          canvas.style["width"] = "1000px";
+      //   canvas.style.width = "50vw";
+      canvas.style.display = "block";
+      canvas.style.margin = "0 auto";
+      canvas.style.position = "relative";
+      canvas.style.left = "50%";
+      canvas.style["padding-bottom"] = "1em";
+      canvas.style.transform = "translateX(-50%)";
+    }
     this.drawNeck();
 
     let markerList = Array.from(this.getElementsByTagName("marker"));
@@ -111,21 +131,29 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       );
     });
 
-    let chordsButton = document.createElement("button");
+    if (markerList.length > 0 && this.getAttribute("show-chord") == "true") {
-    const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
+      let chordsButton = document.createElement("button");
-    chordsButton.setAttribute(
+      const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
-      "onclick",
+      chordsButton.setAttribute(
-      "this.getRootNode().host.playAllMarkers()",
+        "onclick",
-    );
+        "this.getRootNode().host.playAllMarkers()",
-    chordsButton.innerHTML = "Play chord";
+      );
+      chordsButton.innerHTML = "Play chord";
 
-    this.#docRoot.appendChild(chordsButton);
+      this.#docRoot.appendChild(chordsButton);
+    }
 
     this.drawAllMarkers();
   }
 
   static get observedAttributes() {
-    return ["canvas-id", "orient-horizontally", "fret-count", "scale-factor"];
+    return [
+      "canvas-id",
+      "orient-horizontally",
+      "fret-count",
+      "scale-factor",
+      "center-align",
+    ];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -142,6 +170,26 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       case "scale-factor":
         this.#config.scaleFactor = parseFloat(newValue);
         break;
+      case "center-align":
+        if (newValue == "true") {
+          let canvas = this.#docRoot.getElementById(this.#config.canvasID);
+          // canvas.style["position"] = "absolute";
+          // canvas.style["left"] = "50vw";
+          // canvas.style["transform"] = "translate(-50%, -50%)";
+          //
+          //          canvas.style["padding-left"] = 0;
+          //          canvas.style["padding-right"] = 0;
+          //          canvas.style["margin-left"] = "auto";
+          //          canvas.style["margin-right"] = "auto";
+          //          canvas.style["display"] = "block";
+          //          canvas.style["width"] = "1000px";
+          //          canvas.style.width = "50vw";
+          canvas.style.display = "block";
+          canvas.style.margin = "0 auto";
+          canvas.style.position = "relative";
+          canvas.style.left = "50%";
+          canvas.style.transform = "translateX(-50%)";
+        }
     }
     this.drawNeck();
     this.drawAllMarkers();
@@ -173,7 +221,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       [canvasHeight, canvasWidth] = [canvasWidth, canvasHeight];
     }
 
+    //    if (this.#docRoot.getElementById(this.#config.canvasID).style.width) {
+    //      canvasWidth = this.#docRoot.getElementById(this.#config.canvasID).style
+    //        .width;
+    //    }
     canvas.setAttribute("width", canvasWidth);
+    if (this.getAttribute("center-align") == "true") {
+      canvas.style["width"] = canvasWidth + "px";
+    }
     canvas.setAttribute("height", canvasHeight);
 
     let colorDiagramBackground = this.#config.colorDiagramBackground;
@@ -323,6 +378,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
         this.#drawFretMarker(2);
         this.#drawFretMarker(4);
+        this.#drawFretMarker(6);
       }
     }
   }