How to sustain Active Notes on Mouse Over?

[kyasuzuki]

Hi Kevin,
Thank you so much for your contribution of react-piano. I am utilizing your package to display different piano chord shapes - when a user selects a chord shape (e.g. Major), I have set those notes in Active Notes (& in turn, Active Notes highlights the 3 keys on the piano that make C Major). This all functions correctly. However, if I move my mouse over any of the highlighted keys (active), they become unhighlighted (inactive). How can I change this property such that unless a new array of Active notes is provided, the keys remain highlighted & are unaffected by mouseover? Thank you!

[kevinsqi]

That's a cool idea and a feature I'd been thinking about - being able to render static non-interactive pianos. I think it would take a few changes to make that happen though.

(related to: #27)

[ilionic]

Also interested. Do I understand correctly code responsible for it is here?

react-piano/src/Piano.js

Lines 49 to 52 in 5d6c62a

	onMouseDown={props.onNoteDown}
	onMouseUp={props.onNoteUp}
	onMouseEnter={props.isMouseDown ? props.onNoteDown : null}
	onMouseLeave={props.isMouseDown ? props.onNoteUp : null}

[agualdron]

I posted a possible solution on: #27
#27 (comment)