KCarlile / guitar-diagrams-js

Open source JavaScript library for drawing guitar chords and scales on an HTML5 canvas.
https://demo.kcarlile.com/guitar-diagrams-js/
GNU General Public License v3.0
0 stars 0 forks source link

Consider builder pattern for creating diagrams #29

Open KCarlile opened 2 months ago

KCarlile commented 2 months ago

Background

See this video at 1:35 for an explanation of the builder pattern. Essentially, it may simplify the way that the library is called for configuring a drawing. For example, this:

let gdj2 = new GuitarDiagramsJS();
gdj2.config.canvasID = 'diagram-2-canvas';
gdj2.config.stringNamesEnabled = true;
gdj2.addCanvas('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'
gdj2.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond); // add a diamond marker on string 3, fret 3, text '3'
gdj2.addMarker(4, 4, '4'); // add a default (circle) marker on string 4, fret 4, text '4'
gdj2.addMarker(5, 0, '0'); // add a default (circle) marker on string 5, fret 0, text '0'
gdj2.addMarker(6, 0, 'X'); // add a default (circle) marker on string 6, fret 0, text 'X'
gdj2.addMarker(3, 1); // add a default (circle) marker on string 3, fret 1, text empty

...might become simpler like this:

let gdj2 = new GuitarDiagramsJS();
gdj2.config.setCanvasID('diagram-2-canvas')
    .setStringNamesEnabled(true);
gdj2.addCanvas('diagram-2')
    .drawNeck()
    .addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square)
    .addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle)
    .addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond)
    .addMarker(4, 4, '4')
    .addMarker(5, 0, '0')
    .addMarker(6, 0, 'X')
    .addMarker(3, 1);

Acceptance Criteria

Approach

Notes

TBD