diff --git a/js/src/guitar-diagrams-web-component.mjs b/js/src/guitar-diagrams-web-component.mjs index e94a795..548c4bf 100644 --- a/js/src/guitar-diagrams-web-component.mjs +++ b/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( - "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;