fmodica / fretboard Goto Github PK

The api needs:

api.removeNotesClickedCallback(functionName);

The angular directive needs to bind new callbacks:

$scope.config.notesClickedCallbacks = [ functionName ];

A common documentation method for chords, arpeggios, octaves, etc is a vertical fretboard. I know there has not been a lot of movement on this code in a while, but it would be great to have an option to rotate the fretboard 90 degrees to display patterns and such while keeping the text correctly oriented. The minimum number of fret could also be 5 for this view.

This will trigger 2 animations of everything on the fretboard (strings, notes, etc.):

api.setTuning(someOtherTuning);
api.setNumFrets(24);

While it is probably rare to change multiple things at once after the fretboard is created, a potential solution is to combine all of the API into one update method:

api.update({
    tuning: someOtherTuning,
    numFrets: 24
});

Another potential solution is to use setTimeout to schedule a calculation which will only happen once.

If a config property is defined, it will render and then the corresponding set API method will be called, causing another render.

Example: Set your tuning

$scope.config = {
    tuning: someTuning
};

The initial render will happen, and then the directive will call:

api.setTuning(someTuning);

You can have:

[{
    letter: "E",
    octave: 4
}, {
    letter: "E",
    octave: 2
}]

But not:

[{
    letter: "E",
    octave: 4
}, {
    letter: "E",
    octave: 4
}]

Hopefully it is rare to want a tuning with 2 notes of the same pitch.

When multiple notes exist on the same string, specifying the stringItsOn property each time is awkward:

var clickedNotes = [{
    stringItsOn: {
        letter: "E",
        octave: 4
    },
    fret: 3
}, {
    stringItsOn: {
        letter: "E",
        octave: 4
    },
    fret: 5
}, {
    stringItsOn: {
        letter: "E",
        octave: 4
    },
    fret: 6
}, {
    stringItsOn: {
        letter: "B",
        octave: 3
    },
    fret: 3
}, {
    stringItsOn: {
        letter: "B",
        octave: 3
    },
    fret: 5
}, {
    stringItsOn: {
        letter: "B",
        octave: 3
    },
    fret: 6
}];

api.setClickedNotes(clickedNotes);

Solution:

var clickedNotes = [{
    string: {
        letter: "E",
        octave: 4,
    },
    notes: [{
        fret: 3
    }, {
        fret: 5
    }, {
        fret: 6
    }]
}, {
    string: {
        letter: "B",
        octave: 3,
    },
    notes: [{
        fret: 3
    }, {
        fret: 5
    }, {
        fret: 6
    }]
}];

api.setClickedNotes(clickedNotes);