Rockingcool/interactive-fretboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aadhavan Srinivasan
2025-08-04 16:25:41 -04:00
parent 80cbec0c9d
commit 315b220724
1 changed files with 44 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
js/src/guitar-diagrams-web-component.mjs
View File

@@ -84,6 +84,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
this.#outputSpeaker = SampleLibrary.load({ this.#outputSpeaker = SampleLibrary.load({
instruments: "guitar-acoustic", instruments: "guitar-acoustic",
ext: ".ogg", ext: ".ogg",
minify: true,
}); });
this.#outputSpeaker.toMaster(); this.#outputSpeaker.toMaster();
@@ -134,10 +135,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
if (markerList.length > 0 && this.getAttribute("show-chord") == "true") { if (markerList.length > 0 && this.getAttribute("show-chord") == "true") {
let chordsButton = document.createElement("button"); let chordsButton = document.createElement("button");
const canvas = this.shadowRoot.getElementById(this.#config.canvasID); 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"; chordsButton.innerHTML = "Play chord";
this.#docRoot.appendChild(chordsButton); this.#docRoot.appendChild(chordsButton);
@@ -204,21 +202,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
const canvas = this.shadowRoot.getElementById(this.#config.canvasID); const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
const context = canvas.getContext("2d"); 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 = let stringNameIndent =
this.#config.stringNamesEnabled == false this.#config.stringNamesEnabled == false
? 0 ? 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; let canvasWidth = this.#scale(this.#getFretboardWidth()) + fretNumberIndent;
if (this.#config.orientHorizontally == true) { if (this.#config.orientHorizontally == true) {
@@ -251,14 +242,9 @@ class GuitarDiagramsWebComponent extends HTMLElement {
if (this.#config.stringNamesEnabled) { if (this.#config.stringNamesEnabled) {
let stringSpacing = this.#scale(GuitarDiagramsWebComponent.stringSpacing); let stringSpacing = this.#scale(GuitarDiagramsWebComponent.stringSpacing);
let stringIndent = this.#scale(GuitarDiagramsWebComponent.stringIndent); 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 posX;
let posY; let posY;
let stringNames = [...this.#config.stringNames]; let stringNames = [...this.#config.stringNames];
@@ -270,11 +256,9 @@ class GuitarDiagramsWebComponent extends HTMLElement {
for (const [stringNumber, stringName] of Object.entries(stringNames)) { for (const [stringNumber, stringName] of Object.entries(stringNames)) {
if (this.#config.orientHorizontally == true) { if (this.#config.orientHorizontally == true) {
posX = stringNameFontSize / 2; posX = stringNameFontSize / 2;
posY = posY = stringIndent + stringNumber * stringSpacing + stringNamesIndent;
stringIndent + stringNumber * stringSpacing + stringNamesIndent;
} else { } else {
posX = posX = stringIndent + stringNumber * stringSpacing + stringNamesIndent;
stringIndent + stringNumber * stringSpacing + stringNamesIndent;
posY = stringNameFontSize / 2; posY = stringNameFontSize / 2;
} }
@@ -290,15 +274,13 @@ class GuitarDiagramsWebComponent extends HTMLElement {
if (this.#config.orientHorizontally == true) { if (this.#config.orientHorizontally == true) {
canvas.translate( canvas.translate(
stringNameFontSize * stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor,
GuitarDiagramsWebComponent.stringNamePaddingFactor,
0, 0,
); );
} else { } else {
canvas.translate( canvas.translate(
0, 0,
stringNameFontSize * stringNameFontSize * GuitarDiagramsWebComponent.stringNamePaddingFactor,
GuitarDiagramsWebComponent.stringNamePaddingFactor,
); );
} }
} }
@@ -306,9 +288,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
#drawFretNumber() { #drawFretNumber() {
const canvas = this.shadowRoot.querySelector("canvas").getContext("2d"); 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) { if (this.#config.fretStartingNumber != 0) {
canvas.beginPath(); canvas.beginPath();
@@ -369,10 +349,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
#drawAllFretMarkers() { #drawAllFretMarkers() {
if (this.#config.fretMarkersEnabled) { 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(1);
this.#drawFretMarker(3); this.#drawFretMarker(3);
} else { } else {
@@ -391,9 +368,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
const canvas = this.shadowRoot.querySelector("canvas").getContext("2d"); const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
let fretboardWidth = this.#scale(this.#getFretboardWidth()); let fretboardWidth = this.#scale(this.#getFretboardWidth());
let fretSpacing = this.#scale(GuitarDiagramsWebComponent.fretSpacing); let fretSpacing = this.#scale(GuitarDiagramsWebComponent.fretSpacing);
let fretMarkerRadius = this.#scale( let fretMarkerRadius = this.#scale(GuitarDiagramsWebComponent.fretMarkerRadius);
GuitarDiagramsWebComponent.fretMarkerRadius,
);
let posX = fretboardWidth / 2; let posX = fretboardWidth / 2;
let posY = fretSpacing / 2 + fretSpacing * paramFretNumber; let posY = fretSpacing / 2 + fretSpacing * paramFretNumber;
@@ -452,12 +427,8 @@ class GuitarDiagramsWebComponent extends HTMLElement {
const stringCount = this.#config.stringNames.length; const stringCount = this.#config.stringNames.length;
let stringIndent = this.#scale(GuitarDiagramsWebComponent.stringIndent); let stringIndent = this.#scale(GuitarDiagramsWebComponent.stringIndent);
let stringSpacing = this.#scale(GuitarDiagramsWebComponent.stringSpacing); 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 fretboardLength = this.#scale(this.#getFretboardLength());
let fretboardWidth = this.#scale(this.#getFretboardWidth()); let fretboardWidth = this.#scale(this.#getFretboardWidth());
let posX = 0; let posX = 0;
@@ -473,18 +444,11 @@ class GuitarDiagramsWebComponent extends HTMLElement {
(paramStringNumber - 1) * stringSpacing - (paramStringNumber - 1) * stringSpacing -
stringBaseWidth / 2; stringBaseWidth / 2;
endX = fretboardLength; endX = fretboardLength;
endY = endY = stringBaseWidth + (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
stringBaseWidth +
(stringCount - (paramStringNumber - 1)) * stringWidthFactor;
} else { } else {
posX = posX = stringIndent + (paramStringNumber - 1) * stringSpacing - stringBaseWidth / 2;
stringIndent +
(paramStringNumber - 1) * stringSpacing -
stringBaseWidth / 2;
posY = 0; posY = 0;
endX = endX = stringBaseWidth + (stringCount - (paramStringNumber - 1)) * stringWidthFactor;
stringBaseWidth +
(stringCount - (paramStringNumber - 1)) * stringWidthFactor;
endY = fretboardLength; endY = fretboardLength;
} }
@@ -506,9 +470,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
let strokeWidth = this.#scale(this.#config.markerStrokeWidth); let strokeWidth = this.#scale(this.#config.markerStrokeWidth);
let markerFontSize = this.#scale(this.#config.markerFontSize); let markerFontSize = this.#scale(this.#config.markerFontSize);
let posX = 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; let posY = (paramMarker.fret - 1) * fretSpacing + fretSpacing / 2;
if (paramMarker.fret == 0) { if (paramMarker.fret == 0) {
@@ -516,16 +478,11 @@ class GuitarDiagramsWebComponent extends HTMLElement {
} }
if (this.#config.orientHorizontally == true) { 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]; [posX, posY] = [posY, posX];
} }
const boundingRect = this.shadowRoot const boundingRect = this.shadowRoot.querySelector("canvas").getBoundingClientRect();
.querySelector("canvas")
.getBoundingClientRect();
paramMarker.relativePosX = posX; paramMarker.relativePosX = posX;
paramMarker.relativePosY = posY; paramMarker.relativePosY = posY;
@@ -541,8 +498,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
paramMarker.posY += paramMarker.posY +=
this.#config.fretStartingNumber == 0 this.#config.fretStartingNumber == 0
? 0 ? 0
: GuitarDiagramsWebComponent.fretNumberFontSize * : GuitarDiagramsWebComponent.fretNumberFontSize * this.#config.scaleFactor;
this.#config.scaleFactor;
} else { } else {
paramMarker.posY += paramMarker.posY +=
GuitarDiagramsWebComponent.stringNameFontSize * GuitarDiagramsWebComponent.stringNameFontSize *
@@ -551,8 +507,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
paramMarker.posX += paramMarker.posX +=
this.#config.fretStartingNumber == 0 this.#config.fretStartingNumber == 0
? 0 ? 0
: GuitarDiagramsWebComponent.fretNumberFontSize * : GuitarDiagramsWebComponent.fretNumberFontSize * this.#config.scaleFactor;
this.#config.scaleFactor;
} }
// paramMarker.posX = posX + boundingRect.left - window.pageXOffset; // paramMarker.posX = posX + boundingRect.left - window.pageXOffset;
@@ -680,19 +635,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
if ( if (
this.#config.changeOrientationEnabled && 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"); let changeOrientationButton = this.#docRoot.createElement("input");
changeOrientationButton.type = "button"; changeOrientationButton.type = "button";
changeOrientationButton.id = changeOrientationButton.id = this.#config.canvasID + "-change-orientation-button";
this.#config.canvasID + "-change-orientation-button";
changeOrientationButton.style = "margin: " + controlMargins + ";"; changeOrientationButton.style = "margin: " + controlMargins + ";";
changeOrientationButton.classList.add( changeOrientationButton.classList.add(controlClassPrefix + "change-orientation-button");
controlClassPrefix + "change-orientation-button",
);
changeOrientationButton.classList.add(controlClass); changeOrientationButton.classList.add(controlClass);
changeOrientationButton.value = String.fromCodePoint(0x1f500); changeOrientationButton.value = String.fromCodePoint(0x1f500);
@@ -707,18 +657,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
if ( if (
this.#config.downloadImageEnabled && 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"); let downloadButton = this.#docRoot.createElement("input");
downloadButton.type = "button"; downloadButton.type = "button";
downloadButton.id = this.#config.canvasID + "-download-image-button"; downloadButton.id = this.#config.canvasID + "-download-image-button";
downloadButton.style = "margin: " + controlMargins + ";"; downloadButton.style = "margin: " + controlMargins + ";";
downloadButton.classList.add( downloadButton.classList.add(controlClassPrefix + "download-image-button");
controlClassPrefix + "download-image-button",
);
downloadButton.classList.add(controlClass); downloadButton.classList.add(controlClass);
downloadButton.value = String.fromCodePoint(0x1f4be); downloadButton.value = String.fromCodePoint(0x1f4be);
@@ -747,8 +693,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
#getFretboardWidth() { #getFretboardWidth() {
let stringSpacing = GuitarDiagramsWebComponent.stringSpacing; let stringSpacing = GuitarDiagramsWebComponent.stringSpacing;
let stringIndent = GuitarDiagramsWebComponent.stringIndent; let stringIndent = GuitarDiagramsWebComponent.stringIndent;
let fretboardWidth = let fretboardWidth = this.#config.stringNames.length * stringSpacing + stringIndent / 2;
this.#config.stringNames.length * stringSpacing + stringIndent / 2;
return fretboardWidth; return fretboardWidth;
} }
@@ -816,18 +761,12 @@ class GuitarDiagramsWebComponent extends HTMLElement {
marker.fret = paramFret; marker.fret = paramFret;
marker.text = paramText; marker.text = paramText;
marker.playSound = playSound; 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; marker.eventCallbacks = callbacks == null ? new Map() : callbacks;
if (playSound) { if (playSound) {
marker.eventCallbacks.set("click", (elem) => { marker.eventCallbacks.set("click", (elem) => {
this.#outputSpeaker.triggerAttackRelease( this.#outputSpeaker.triggerAttackRelease(this.markerToNoteFrequency(marker), "2n");
this.markerToNoteFrequency(marker),
"2n",
);
}); });
marker.eventCallbacks.set("mousemove", (elem) => { marker.eventCallbacks.set("mousemove", (elem) => {
console.log("marker hovered"); console.log("marker hovered");
@@ -864,13 +803,8 @@ class GuitarDiagramsWebComponent extends HTMLElement {
markersWithEvent.forEach((marker) => { markersWithEvent.forEach((marker) => {
if (marker.shape == GuitarDiagramsWebComponent.Shape.Circle) { if (marker.shape == GuitarDiagramsWebComponent.Shape.Circle) {
if ( 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)(); marker.eventCallbacks.get(event.type)();
} }
@@ -883,35 +817,20 @@ class GuitarDiagramsWebComponent extends HTMLElement {
markersWithEvent.forEach((marker) => { markersWithEvent.forEach((marker) => {
if (marker.shape == GuitarDiagramsWebComponent.Shape.Circle) { if (marker.shape == GuitarDiagramsWebComponent.Shape.Circle) {
if ( 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; cursorPointer = true;
const canvas = this.shadowRoot const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
.querySelector("canvas")
.getContext("2d");
canvas.beginPath(); canvas.beginPath();
canvas.fillStyle = "yellow"; canvas.fillStyle = "yellow";
this.#drawMarkerCircle( this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
marker.relativePosX,
marker.relativePosY,
);
canvas.closePath(); canvas.closePath();
} else { } else {
const canvas = this.shadowRoot const canvas = this.shadowRoot.querySelector("canvas").getContext("2d");
.querySelector("canvas")
.getContext("2d");
canvas.beginPath(); canvas.beginPath();
canvas.fillStyle = marker.colorFill; canvas.fillStyle = marker.colorFill;
this.#drawMarkerCircle( this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
marker.relativePosX,
marker.relativePosY,
);
canvas.closePath(); canvas.closePath();
} }
} }
@@ -927,9 +846,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
} }
playAllMarkers() { playAllMarkers() {
let allNoteFrequencies = this.#markers.map((marker) => let allNoteFrequencies = this.#markers.map((marker) => this.markerToNoteFrequency(marker));
this.markerToNoteFrequency(marker),
);
// play slowly // play slowly
let timeGap = 0; let timeGap = 0;