From 816cc891ccbcf669544c1d26606c15b428e9e879 Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Wed, 12 Jun 2024 16:17:04 -0700 Subject: [PATCH] Renaming addCanvas() method to addCanvasToElement() --- docs/examples/index.html | 14 +++++++------- .../js/guitar-diagrams-js/guitar-diagrams.mjs | 12 ++++++------ docs/examples/js/main.js | 12 ++++++------ docs/examples/js/testing.js | 2 +- docs/index.md | 12 ++++++------ src/guitar-diagrams.mjs | 4 ++-- 6 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/examples/index.html b/docs/examples/index.html index c4f8428..65808b2 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -27,7 +27,7 @@

Preface - Setup

<div id="diagram-1"></div>

That div's ID doesn't need to be diagram-1 as shown, but it needs to be a unique name that you will reference later on in your code, like this:

- 
gdj1.addCanvas('diagram-1');
+ 
gdj1.addCanvasToElement('diagram-1');
@@ -41,7 +41,7 @@

Example 1 - Basic fretboard

Code
let gdj1 = new GuitarDiagramsJS();
 gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
-gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
+gdj1.addCanvasToElement('diagram-1'); // add the canvas to the specified element ID on the page
 gdj1.drawNeck(); // draw the fretboard
@@ -62,7 +62,7 @@
Code
let gdj2 = new GuitarDiagramsJS();
 gdj2.config.canvasID = 'diagram-2-canvas';
 gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram-2');
+gdj2.addCanvasToElement('diagram-2');
 gdj2.drawNeck();
 gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
 gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
@@ -99,7 +99,7 @@ 
Code

 gdj3.config.fretStartingNumber = 3; // set starting fret
 gdj3.config.stringNames = ['D','A','D','G']; // set string names and count
 gdj3.config.fretCount = 3; // set starting fret
-gdj3.addCanvas('diagram-3');
+gdj3.addCanvasToElement('diagram-3');
 gdj3.drawNeck();
 gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -135,7 +135,7 @@ 
Code

                     
let gdj4 = new GuitarDiagramsJS();
 gdj4.config.canvasID = 'diagram-4-canvas';
 gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
-gdj4.addCanvas('diagram-4');
+gdj4.addCanvasToElement('diagram-4');
 gdj4.drawNeck();
 gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -189,7 +189,7 @@ 
Code

 gdj5.config.colorLabel = '#FFFFFF'; // specify the label color for string names and starting fret
 gdj5.config.markerStrokeWidth = 1; // specify the marker's stroke width
 gdj5.config.markerFontSize = 10; // specify the marker text's font size
-gdj5.addCanvas('diagram-5');
+gdj5.addCanvasToElement('diagram-5');
 gdj5.drawNeck();
 gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -224,7 +224,7 @@ 
Code

 gdj6.config.controlsEnabled = true;
 gdj6.config.downloadImageEnabled = true;
 gdj6.config.changeOrientationEnabled = true;
-gdj6.addCanvas('diagram-6');
+gdj6.addCanvasToElement('diagram-6');
 gdj6.drawNeck();
 gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
diff --git a/docs/examples/js/guitar-diagrams-js/guitar-diagrams.mjs b/docs/examples/js/guitar-diagrams-js/guitar-diagrams.mjs
index b9357ae..e114173 100644
--- a/docs/examples/js/guitar-diagrams-js/guitar-diagrams.mjs
+++ b/docs/examples/js/guitar-diagrams-js/guitar-diagrams.mjs
@@ -154,7 +154,7 @@ export class GuitarDiagramsJS {
             let stringNamesIndent = this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
             let posX;
             let posY;
-            let stringNames = this.#config.stringNames;
+            let stringNames = [...this.#config.stringNames]; // deep copy array
 
             // vertical draws string names left to right, but horizontal needs to draw them bottom to top
             if (this.#config.orientHorizontally == true) {
@@ -561,13 +561,13 @@ export class GuitarDiagramsJS {
             const controlClass = 'guitar-diagrams-control';
             const controlClassPrefix = 'guitar-diagrams-';
 
-            let canvasElement = document.getElementById(this.#config.canvasID);
+            const canvasElement = document.getElementById(this.#config.canvasID);
 
-            let controlsDiv = document.createElement('div');
+            const controlsDiv = document.createElement('div');
             controlsDiv.style = 'display: block; margin-top: .5em';
             canvasElement.insertAdjacentElement('afterend', controlsDiv);
 
-            // add the controls in reverse order of display order
+            // add the controls in reverse order of desired display order (last to first)
             // other controls go here
             /*
             if (this.#config.someFeatureEnabled) {
@@ -667,9 +667,9 @@ export class GuitarDiagramsJS {
      * Adds the canvas element to the parent element with the specified ID.
      * @param {string} paramParentElementID - The parent element's ID to which the canvas element will be added.
      */
-    addCanvas(paramParentElementID) {
+    addCanvasToElement(paramParentElementID) {
         document.getElementById(paramParentElementID).appendChild(this.getCanvasElement());
-    } // end addCanvas method
+    } // end addCanvasToElement method
 
     /**
      * Sets the canvas element's ID for an existing canvas.
diff --git a/docs/examples/js/main.js b/docs/examples/js/main.js
index 7251d7d..143b2b5 100644
--- a/docs/examples/js/main.js
+++ b/docs/examples/js/main.js
@@ -13,7 +13,7 @@ import { GuitarDiagramsJS } from './guitar-diagrams-js/guitar-diagrams.mjs';
 // ========== BEGIN example 1
 let gdj1 = new GuitarDiagramsJS();
 gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
-gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
+gdj1.addCanvasToElement('diagram-1'); // add the canvas to the specified element ID on the page
 gdj1.drawNeck(); // draw the fretboard
 // ========== END example 1
 
@@ -21,7 +21,7 @@ gdj1.drawNeck(); // draw the fretboard
 let gdj2 = new GuitarDiagramsJS();
 gdj2.config.canvasID = 'diagram-2-canvas';
 gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram-2');
+gdj2.addCanvasToElement('diagram-2');
 gdj2.drawNeck();
 gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
 gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
@@ -41,7 +41,7 @@ gdj3.config.orientHorizontally = true; // set horizontal orientation
 gdj3.config.fretStartingNumber = 3; // set starting fret
 gdj3.config.stringNames = ['D','A','D','G']; // set string names and count
 gdj3.config.fretCount = 3; // set starting fret
-gdj3.addCanvas('diagram-3');
+gdj3.addCanvasToElement('diagram-3');
 gdj3.drawNeck();
 gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -57,7 +57,7 @@ gdj3.drawAllMarkers();
 let gdj4 = new GuitarDiagramsJS();
 gdj4.config.canvasID = 'diagram-4-canvas';
 gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
-gdj4.addCanvas('diagram-4');
+gdj4.addCanvasToElement('diagram-4');
 gdj4.drawNeck();
 gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -84,7 +84,7 @@ gdj5.config.colorDiagramBackground = '#000000'; // specify the diagram backgroun
 gdj5.config.colorLabel = '#FFFFFF'; // specify the label color for string names and starting fret
 gdj5.config.markerStrokeWidth = 1; // specify the marker's stroke width
 gdj5.config.markerFontSize = 10; // specify the marker text's font size
-gdj5.addCanvas('diagram-5');
+gdj5.addCanvasToElement('diagram-5');
 gdj5.drawNeck();
 gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -103,7 +103,7 @@ gdj6.config.stringNamesEnabled = true;
 gdj6.config.controlsEnabled = true;
 gdj6.config.downloadImageEnabled = true;
 gdj6.config.changeOrientationEnabled = true;
-gdj6.addCanvas('diagram-6');
+gdj6.addCanvasToElement('diagram-6');
 gdj6.drawNeck();
 gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
diff --git a/docs/examples/js/testing.js b/docs/examples/js/testing.js
index b49fa94..02c4683 100644
--- a/docs/examples/js/testing.js
+++ b/docs/examples/js/testing.js
@@ -22,7 +22,7 @@ gdjTesting.config.enableAllControls();
 //gdjTesting.config.changeOrientationEnabled = true;
 
 //gdj4.config.scaleFactor = .5;
-gdjTesting.addCanvas('diagram-testing');
+gdjTesting.addCanvasToElement('diagram-testing');
 gdjTesting.drawNeck();
 gdjTesting.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdjTesting.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
diff --git a/docs/index.md b/docs/index.md
index 51abbd7..ffae2c4 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -37,7 +37,7 @@ If you want to use a CDN-hosted package (e.g., Guitar Diagrams JS on JSDelivr at
 
 ```
 
-Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvasToElement('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
 
 ```html
 

@@ -62,7 +62,7 @@ You can also install this package manually by downloading it, placing the files
    
    ```
 
-1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvasToElement('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
 
    ```html
    

@@ -89,7 +89,7 @@ After your import statement, add the JavaScript to associate your block-level el
 ```javascript
 let gdj1 = new GuitarDiagramsJS();
 gdj1.config.canvasID = 'diagram-1-canvas';
-gdj1.addCanvas('diagram-1');
+gdj1.addCanvasToElement('diagram-1');
 gdj1.drawNeck();
 ```
 
@@ -99,7 +99,7 @@ This will result in the most basic guitar diagram of a blank fretboard. The foll
 | ---- | ---- | ----------- | ----- |
 | 1 | `let gdj1 = new GuitarDiagramsJS();`| Instantiate a new `GuitarDiagramsJS` object and assign it to the `gdj1` variable|  |
 | 2 | `gdj1.config.canvasID = 'diagram-1-canvas';` | Set the canvasID value of the gdj1's config object to `'diagram-1-canvas'` | `'diagram-1-canvas'` is a unique ID for the `` HTML element that will be added to your HTML within the block-level element. This ID is important so you can reference it later if you want to style the canvas itself. |
-| 3 | `gdj1.addCanvas('diagram-1');` | Add the Guitar Diagrams JS HTML `` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above: ```
``` |
+| 3 | `gdj1.addCanvasToElement('diagram-1');` | Add the Guitar Diagrams JS HTML `` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above: ```
``` |
 | 4 | `gdj1.drawNeck();` | Draw the neck of the diagram with the previously specified parameters |  |
 
 See _Example 1_ on the [Examples page](examples/index.html).
@@ -112,7 +112,7 @@ To add markers to a diagram, after calling `gdj1.drawNeck();`, you'll need to sp
 let gdj2 = new GuitarDiagramsJS();
 gdj2.config.canvasID = 'diagram-2-canvas';
 gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram-2');
+gdj2.addCanvasToElement('diagram-2');
 gdj2.drawNeck();
 gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -130,7 +130,7 @@ This will result in a basic guitar fretboard diagram with 7 different markers ad
 | ---- | ---- | ----------- | ----- |
 | 1 | `let gdj2 = new GuitarDiagramsJS();`| Instantiate a new `GuitarDiagramsJS` object and assign it to the `gdj1` variable|  |
 | 2 | `gdj2.config.canvasID = 'diagram-2-canvas';` | Set the canvasID value of the gdj1's config object to `'diagram-2-canvas'` | `'diagram-2-canvas'` is a unique ID for the `` HTML element that will be added to your HTML within the block-level element. This ID is important so you can reference it later if you want to style the canvas itself. |
-| 3 | `gdj1.addCanvas('diagram-2');` | Add the Guitar Diagrams JS HTML `` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above, but with a different ID for diagram 2: ```
``` |
+| 3 | `gdj1.addCanvasToElement('diagram-2');` | Add the Guitar Diagrams JS HTML `` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above, but with a different ID for diagram 2: ```
``` |
 | 4 | `gdj1.drawNeck();` | Draw the neck of the diagram with the previously specified parameters |  |
 | 5 | `gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);` | Adds a marker on the string 1, fret 1, with text "1", and square shape |  |
 | 6 | `gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);` | Adds a marker on the string 2, fret 2, with text "2", and triangle shape |  |
diff --git a/src/guitar-diagrams.mjs b/src/guitar-diagrams.mjs
index c7400ee..e114173 100644
--- a/src/guitar-diagrams.mjs
+++ b/src/guitar-diagrams.mjs
@@ -667,9 +667,9 @@ export class GuitarDiagramsJS {
      * Adds the canvas element to the parent element with the specified ID.
      * @param {string} paramParentElementID - The parent element's ID to which the canvas element will be added.
      */
-    addCanvas(paramParentElementID) {
+    addCanvasToElement(paramParentElementID) {
         document.getElementById(paramParentElementID).appendChild(this.getCanvasElement());
-    } // end addCanvas method
+    } // end addCanvasToElement method
 
     /**
      * Sets the canvas element's ID for an existing canvas.