moonwave99/fretboard.js

Feature Request : frettboard.on Event return full note element

Closed this issue · 6 comments

Would be great if Clicking on a fret/string that contains a dot returned that full note element and not just {string, fret}

Oh, I see that data is stored on the dot element ...

	fretboard.on('click', ({ fret, string }) => {	
		const className = `.dot-string-${string}.dot-fret-${fret}`;
		const thedot = document.querySelector(className);
		console.log(thedot.__data__);
	});  

Still being returned directly would make sense.

In the example I destructured just those two properties, you can access whatever you need.

fretboard.on('click', dot => {	
  // here you can use dot.propertyName as you wish
});  

Ah cool.. Ill give that a try.

The documentation on your site indicated that only the 'position' was returned

Events

You can listen to click and mousemove events on a fretboard instance. 
The callback function will be invoked with the corresponding Position (string/fret number).

fretboard.on(eventName, (position: Position) => void)

Ya, unless im missing something, event only returns the position {string, fret} not the dot.

https://codepen.io/aduffy/pen/dypvjKa

I was looking for the 'noteWithOctave' found in the dot

{
  degree: 4,
  fret: 7,
  interval: "4P",
  note: "D",
  noteWithOctave: "D4",
  octave: 3,
  string: 3
}

Aaaaah sorry, the handlers are attached to the fretboard itself, not to the drawn dots, as it was meant to interact with the empty fretboard.

You have to filter your dots manually to access them atm:

fretboard.on('click', ({ string, fret )) => {
  const clickedDot = dots.find(x => x.string === string && x.fret === fret);
  if (!clickedDot) {
    return;
  }
  /// do stuff with clickedDot
})

In the future, one could return the dot if present, makes sense.

Fixed in v0.2.4.