Hey, i basically answered this in a new issue in #660.
The thing is, we wanted to avoid creating references to graphical classes in sheet model classes, to modularize OSMD and make it possible to use the sheet model without the graphics classes.
It should be almost as easy with the solution in #660 though. We can also add a static method to Cursor or GraphicalNote that gets you the GraphicalNote from a Note via the new dictionary.

How does this PR going? 👀

@Jack-Works As i said, we do not want a direct reference to graphical classes in our sheet model classes, but hopefully #660 will get resolved and then you will have a way to find a GraphicalNote from a Note that is almost as easy as a reference in Note.

@praisethemoon this is a great feature, when you design an interactive sheet music app.

@sschmidTU this library is a bridge layer between musicxml and vexflow, it is inevitable that you have to interact with the ui layer from model layer.

Maybe we can add a GraphicalNote property to Note.ts with datatype any, if you don't want to make a circular dependency.

With @praisethemoon 's change, we can access HTML element from the note data happily like this.

osmd.cursor.iterator.currentVoiceEntries[0].notes[0].graphicalNote.vfnote[0].attrs.el

If we dig the code deeper, I think there is no reason for AJAX.ts existing in this library. 😄

@sschmidTU

After rethinking, maybe we just need to add a currentGraphicalNotes attribute to osmd.cursor.iterator.

This can solve many ui interaction problems.

@ice6 thanks for your comments here also.
Our idea is to keep the general objectmodel built up from musicxml and also the cursor clean from the final graphical implementations. An Idea is for example: a musicxml audio player without even rendering any notes.
Our solution would be the dict described in #660 . Would you see any problems with this approach?

After more digging, I found that osmd.cursor.iterator.currentMeasure.verticalMeasureList[0].staffEntries[0].graphicalVoiceEntries[0].notes[0].vfnote[0].attrs.el, this already can solve many ui interaction requirements.

@matt-uib it is ok to use dictionary to solve the problem. and the final api is clean. If it is already implemented, I would not discuss here. :P

If we dig the code deeper, I think there is no reason for AJAX.ts existing in this library. 😄

@ice6 AJAX is used in OpenSheetMusicDisplay.ts:load() to retrieve a MusicXML file asynchronously from a website.

If we dig the code deeper, I think there is no reason for AJAX.ts existing in this library. 😄

@ice6 AJAX is used in OpenSheetMusicDisplay.ts:load() to retrieve a MusicXML file asynchronously from a website.

@sschmidTU sure, I know. just from the architecture perspective.

below is the code I use to retrieve file by url, it provides more flexibility some time.

let res = await fetch(url)
let content = await res.text()

There is now the static GraphicalNote.FromNote(note: Note, rules: EngravingRules),
so you can easily get the GraphicalNote like this:
const gNote = GraphicalNote.FromNote(note, osmd.rules);

See #660.

There is an even easier method now:
const gNote = osmd.rules.GNote(note) (in typescript: osmd.EngravingRules)
will give you the GraphicalNote from a Note reference.