Lots of changes - fixed font sizes, added play chord button, minified sample loading

js/src/Tonejs-Instruments.js

@@ -37,10 +37,7 @@ export var SampleLibrary = {
     var i;
     for (i = 0; i <= this.list.length - 1; i++) {
       for (var property in this[this.list[i]]) {
-        this[this.list[i]][property] = this[this.list[i]][property].replace(
+        this[this.list[i]][property] = this[this.list[i]][property].replace(this.ext, newExt);
-          this.ext,
-          newExt,
-        );
       }
     }
     this.ext = newExt;
@@ -288,7 +285,7 @@ export var SampleLibrary = {
     D5: "D5.[mp3|ogg]",
     "D#2": "Ds2.[mp3|ogg]",
     "D#3": "Ds3.[mp3|ogg]",
-    "D#4": "Ds3.[mp3|ogg]",
+    "D#4": "Ds4.[mp3|ogg]",
     E2: "E2.[mp3|ogg]",
     E3: "E3.[mp3|ogg]",
     E4: "E4.[mp3|ogg]",

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

@@ -84,6 +84,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
     this.#outputSpeaker = SampleLibrary.load({
       instruments: "guitar-acoustic",
       ext: ".ogg",
+      minify: true,
     });
     this.#outputSpeaker.toMaster();
 
@@ -134,10 +135,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
     if (markerList.length > 0 && this.getAttribute("show-chord") == "true") {
       let chordsButton = document.createElement("button");
       const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
-      chordsButton.setAttribute(
+      chordsButton.setAttribute("onclick", "this.getRootNode().host.playAllMarkers()");
-        "onclick",
-        "this.getRootNode().host.playAllMarkers()",
-      );
       chordsButton.innerHTML = "Play chord";
 
       this.#docRoot.appendChild(chordsButton);
@@ -152,6 +150,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       "orient-horizontally",
       "fret-count",
       "scale-factor",
+      "start-fret",
       "center-align",
     ];
   }
@@ -170,6 +169,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);
@@ -200,21 +202,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
     const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
     const context = canvas.getContext("2d");
 
-    let fretNumberFontSize = this.#scale(
+    let fretNumberFontSize = this.#scale(GuitarDiagramsWebComponent.fretNumberFontSize);
-      GuitarDiagramsWebComponent.fretNumberFontSize,
+    let fretNumberIndent = this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
-    );
+    let stringNameFontSize = this.#scale(GuitarDiagramsWebComponent.stringNameFontSize);
-    let fretNumberIndent =
-      this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
-    let stringNameFontSize = this.#scale(
-      GuitarDiagramsWebComponent.stringNameFontSize,
-    );
     let stringNameIndent =
       this.#config.stringNamesEnabled == false
         ? 0
-        : stringNameFontSize *
+        : stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor;
-          GuitarDiagramsWebComponent.stringNamePaddingFactor;
+    let canvasHeight = this.#scale(this.#getFretboardLength()) + stringNameIndent;
-    let canvasHeight =
-      this.#scale(this.#getFretboardLength()) + stringNameIndent;
     let canvasWidth = this.#scale(this.#getFretboardWidth()) + fretNumberIndent;
 
     if (this.#config.orientHorizontally == true) {
@@ -247,14 +242,9 @@ class GuitarDiagramsWebComponent extends HTMLElement {
     if (this.#config.stringNamesEnabled) {
       let stringSpacing = this.#scale(GuitarDiagramsWebComponent.stringSpacing);
       let stringIndent = this.#scale(GuitarDiagramsWebComponent.stringIndent);
-      let stringNameFontSize = this.#scale(
+      let stringNameFontSize = this.#scale(GuitarDiagramsWebComponent.stringNameFontSize);
-        GuitarDiagramsWebComponent.stringNameFontSize,
+      let fretNumberFontSize = this.#scale(GuitarDiagramsWebComponent.fretNumberFontSize);
-      );
+      let stringNamesIndent = this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
-      let fretNumberFontSize = this.#scale(
-        GuitarDiagramsWebComponent.fretNumberFontSize,
-      );
-      let stringNamesIndent =
-        this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
       let posX;
       let posY;
       let stringNames = [...this.#config.stringNames];
@@ -266,11 +256,9 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       for (const [stringNumber, stringName] of Object.entries(stringNames)) {
         if (this.#config.orientHorizontally == true) {
           posX = stringNameFontSize / 2;
-          posY =
+          posY = stringIndent + stringNumber * stringSpacing + stringNamesIndent;
-            stringIndent + stringNumber * stringSpacing + stringNamesIndent;
         } else {
-          posX =
+          posX = stringIndent + stringNumber * stringSpacing + stringNamesIndent;
-            stringIndent + stringNumber * stringSpacing + stringNamesIndent;
           posY = stringNameFontSize / 2;
         }
 
@@ -286,15 +274,13 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
       if (this.#config.orientHorizontally == true) {
         canvas.translate(
-          stringNameFontSize *
+          stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor,
-            GuitarDiagramsWebComponent.stringNamePaddingFactor,
           0,
         );
       } else {
         canvas.translate(
           0,
-          stringNameFontSize *
+          stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor,
-            GuitarDiagramsWebComponent.stringNamePaddingFactor,
         );
       }
     }
@@ -302,9 +288,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
   #drawFretNumber() {
     const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
-    let fretNumberFontSize = this.#scale(
+    let fretNumberFontSize = this.#scale(GuitarDiagramsWebComponent.fretNumberFontSize);
-      GuitarDiagramsWebComponent.fretNumberFontSize,
-    );
 
     if (this.#config.fretStartingNumber != 0) {
       canvas.beginPath();
@@ -365,10 +349,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
   #drawAllFretMarkers() {
     if (this.#config.fretMarkersEnabled) {
-      if (
+      if (this.#config.fretStartingNumber != 0 && this.#config.fretStartingNumber % 2 == 0) {
-        this.#config.fretStartingNumber != 0 &&
-        this.#config.fretStartingNumber % 2 == 0
-      ) {
         this.#drawFretMarker(1);
         this.#drawFretMarker(3);
       } else {
@@ -387,9 +368,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
     const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
     let fretboardWidth = this.#scale(this.#getFretboardWidth());
     let fretSpacing = this.#scale(GuitarDiagramsWebComponent.fretSpacing);
-    let fretMarkerRadius = this.#scale(
+    let fretMarkerRadius = this.#scale(GuitarDiagramsWebComponent.fretMarkerRadius);
-      GuitarDiagramsWebComponent.fretMarkerRadius,
-    );
     let posX = fretboardWidth / 2;
     let posY = fretSpacing / 2 + fretSpacing * paramFretNumber;
 
@@ -448,12 +427,8 @@ class GuitarDiagramsWebComponent extends HTMLElement {
     const stringCount = this.#config.stringNames.length;
     let stringIndent = this.#scale(GuitarDiagramsWebComponent.stringIndent);
     let stringSpacing = this.#scale(GuitarDiagramsWebComponent.stringSpacing);
-    let stringBaseWidth = this.#scale(
+    let stringBaseWidth = this.#scale(GuitarDiagramsWebComponent.stringBaseWidth);
-      GuitarDiagramsWebComponent.stringBaseWidth,
+    let stringWidthFactor = this.#scale(GuitarDiagramsWebComponent.stringWidthFactor);
-    );
-    let stringWidthFactor = this.#scale(
-      GuitarDiagramsWebComponent.stringWidthFactor,
-    );
     let fretboardLength = this.#scale(this.#getFretboardLength());
     let fretboardWidth = this.#scale(this.#getFretboardWidth());
     let posX = 0;
@@ -469,18 +444,11 @@ class GuitarDiagramsWebComponent extends HTMLElement {
         (paramStringNumber - 1) * stringSpacing -
         stringBaseWidth / 2;
       endX = fretboardLength;
-      endY =
+      endY = stringBaseWidth + (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
-        stringBaseWidth +
-        (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
     } else {
-      posX =
+      posX = stringIndent + (paramStringNumber - 1) * stringSpacing - stringBaseWidth / 2;
-        stringIndent +
-        (paramStringNumber - 1) * stringSpacing -
-        stringBaseWidth / 2;
       posY = 0;
-      endX =
+      endX = stringBaseWidth + (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
-        stringBaseWidth +
-        (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
       endY = fretboardLength;
     }
 
@@ -502,9 +470,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
     let strokeWidth = this.#scale(this.#config.markerStrokeWidth);
     let markerFontSize = this.#scale(this.#config.markerFontSize);
     let posX =
-      stringIndent +
+      stringIndent + (stringCount - paramMarker.string) * stringSpacing + strokeWidth * 0.5;
-      (stringCount - paramMarker.string) * stringSpacing +
-      strokeWidth * 0.5;
     let posY = (paramMarker.fret - 1) * fretSpacing + fretSpacing / 2;
 
     if (paramMarker.fret == 0) {
@@ -512,16 +478,11 @@ class GuitarDiagramsWebComponent extends HTMLElement {
     }
 
     if (this.#config.orientHorizontally == true) {
-      posX =
+      posX = stringIndent + (paramMarker.string - 1) * stringSpacing + strokeWidth * 0.5;
-        stringIndent +
-        (paramMarker.string - 1) * stringSpacing +
-        strokeWidth * 0.5;
       [posX, posY] = [posY, posX];
     }
 
-    const boundingRect = this.shadowRoot
+    const boundingRect = this.shadowRoot.querySelector("canvas").getBoundingClientRect();
-      .querySelector("canvas")
-      .getBoundingClientRect();
 
     paramMarker.relativePosX = posX;
     paramMarker.relativePosY = posY;
@@ -534,11 +495,19 @@ 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;
@@ -666,19 +635,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
       if (
         this.#config.changeOrientationEnabled &&
-        !this.#docRoot.getElementById(
+        !this.#docRoot.getElementById(this.#config.canvasID + "-change-orientation-button")
-          this.#config.canvasID + "-change-orientation-button",
-        )
       ) {
         let changeOrientationButton = this.#docRoot.createElement("input");
 
         changeOrientationButton.type = "button";
-        changeOrientationButton.id =
+        changeOrientationButton.id = this.#config.canvasID + "-change-orientation-button";
-          this.#config.canvasID + "-change-orientation-button";
         changeOrientationButton.style = "margin: " + controlMargins + ";";
-        changeOrientationButton.classList.add(
+        changeOrientationButton.classList.add(controlClassPrefix + "change-orientation-button");
-          controlClassPrefix + "change-orientation-button",
-        );
         changeOrientationButton.classList.add(controlClass);
         changeOrientationButton.value = String.fromCodePoint(0x1f500);
 
@@ -693,18 +657,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
 
       if (
         this.#config.downloadImageEnabled &&
-        !this.#docRoot.getElementById(
+        !this.#docRoot.getElementById(this.#config.canvasID + "-download-image-button")
-          this.#config.canvasID + "-download-image-button",
-        )
       ) {
         let downloadButton = this.#docRoot.createElement("input");
 
         downloadButton.type = "button";
         downloadButton.id = this.#config.canvasID + "-download-image-button";
         downloadButton.style = "margin: " + controlMargins + ";";
-        downloadButton.classList.add(
+        downloadButton.classList.add(controlClassPrefix + "download-image-button");
-          controlClassPrefix + "download-image-button",
-        );
         downloadButton.classList.add(controlClass);
         downloadButton.value = String.fromCodePoint(0x1f4be);
 
@@ -733,8 +693,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
   #getFretboardWidth() {
     let stringSpacing = GuitarDiagramsWebComponent.stringSpacing;
     let stringIndent = GuitarDiagramsWebComponent.stringIndent;
-    let fretboardWidth =
+    let fretboardWidth = this.#config.stringNames.length * stringSpacing + stringIndent / 2;
-      this.#config.stringNames.length * stringSpacing + stringIndent / 2;
 
     return fretboardWidth;
   }
@@ -802,18 +761,12 @@ class GuitarDiagramsWebComponent extends HTMLElement {
       marker.fret = paramFret;
       marker.text = paramText;
       marker.playSound = playSound;
-      marker.shape =
+      marker.shape = paramShape == null ? GuitarDiagramsWebComponent.Shape.Circle : paramShape;
-        paramShape == null
-          ? GuitarDiagramsWebComponent.Shape.Circle
-          : paramShape;
       marker.eventCallbacks = callbacks == null ? new Map() : callbacks;
 
       if (playSound) {
         marker.eventCallbacks.set("click", (elem) => {
-          this.#outputSpeaker.triggerAttackRelease(
+          this.#outputSpeaker.triggerAttackRelease(this.markerToNoteFrequency(marker), "2n");
-            this.markerToNoteFrequency(marker),
-            "2n",
-          );
         });
         marker.eventCallbacks.set("mousemove", (elem) => {
           console.log("marker hovered");
@@ -850,13 +803,8 @@ class GuitarDiagramsWebComponent extends HTMLElement {
           markersWithEvent.forEach((marker) => {
             if (marker.shape == GuitarDiagramsWebComponent.Shape.Circle) {
               if (
-                Math.pow(marker.posX - mouseX, 2) +
+                Math.pow(marker.posX - mouseX, 2) + Math.pow(marker.posY - mouseY, 2) <
-                  Math.pow(marker.posY - mouseY, 2) <
+                Math.pow(GuitarDiagramsWebComponent.markerRadius * this.#config.scaleFactor, 2)
-                Math.pow(
-                  GuitarDiagramsWebComponent.markerRadius *
-                    this.#config.scaleFactor,
-                  2,
-                )
               ) {
                 marker.eventCallbacks.get(event.type)();
               }
@@ -869,35 +817,20 @@ class GuitarDiagramsWebComponent extends HTMLElement {
           markersWithEvent.forEach((marker) => {
             if (marker.shape == GuitarDiagramsWebComponent.Shape.Circle) {
               if (
-                Math.pow(marker.posX - mouseX, 2) +
+                Math.pow(marker.posX - mouseX, 2) + Math.pow(marker.posY - mouseY, 2) <
-                  Math.pow(marker.posY - mouseY, 2) <
+                Math.pow(GuitarDiagramsWebComponent.markerRadius * this.#config.scaleFactor, 2)
-                Math.pow(
-                  GuitarDiagramsWebComponent.markerRadius *
-                    this.#config.scaleFactor,
-                  2,
-                )
               ) {
                 cursorPointer = true;
-                const canvas = this.shadowRoot
+                const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
-                  .querySelector("canvas")
-                  .getContext("2d");
                 canvas.beginPath();
                 canvas.fillStyle = "yellow";
-                this.#drawMarkerCircle(
+                this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
-                  marker.relativePosX,
-                  marker.relativePosY,
-                );
                 canvas.closePath();
               } else {
-                const canvas = this.shadowRoot
+                const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
-                  .querySelector("canvas")
-                  .getContext("2d");
                 canvas.beginPath();
                 canvas.fillStyle = marker.colorFill;
-                this.#drawMarkerCircle(
+                this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
-                  marker.relativePosX,
-                  marker.relativePosY,
-                );
                 canvas.closePath();
               }
             }
@@ -913,9 +846,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
   }
 
   playAllMarkers() {
-    let allNoteFrequencies = this.#markers.map((marker) =>
+    let allNoteFrequencies = this.#markers.map((marker) => this.markerToNoteFrequency(marker));
-      this.markerToNoteFrequency(marker),
-    );
 
     // play slowly
     let timeGap = 0;
@@ -975,7 +906,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;
   }