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