How is addClass method supposed to work?

[utanashati]

Hi Vexflow team! Thank you for this great lib!

I have an issue with the addClass method, of a StaveNote, in particular. I tried using it on a StaveNote to add a custom class to the corresponding G element, and while after I use it, the StaveNote instance does get updated with the new class name, it's not reflected in the final SVG.

Could you please explain, is this a bug or a feature, and how is it supposed to work? At which point do the classes get appended to the G elements?

I reproduced the issue in a code sandbox.

[AaronDavidNewman]

Unfortunately, that's not what Element.addClass does. Element.setAttribute('id') will do the expected thing, though. So you can find a StaveNote element by its ID and add classes to it after it's drawn. And this also works on most modifiers that are rendered in an SVG group.

An SVG class would be attached to the group, which you can always do by using openGroup and wrapping whatever you are drawing in a group, and add the class to that. But, you probably don't draw individual notes so this won't help with StaveNote.

Edit: I should add that you can also do some direct styling for elements such as note heads. Check out the style_tests.ts test cases file.

[utanashati]

Thanks for the reply! I'm curious, what is addClass method for then? Is it used internally somehow?

I ended up with an even more straightforward approach, directly modifying the styles of the needed note G elements by the index, btw. I needed to color the notes that are being played at a particular moment.

[AaronDavidNewman]

@utanashati it is used for EasyScore. You can attach the class to the element instance in the easy score language, and then tell one instance from another in an array of notes, for instance. And I suppose it could be used for any text to vex widget. But canvas renderer doesn't have an equivalent of SVG class that affects the display, so it's not used when rendering.