adding id to text element in SVG

[Gregg Larson]

Hello,

I am playing around with attaching an event to the SVG elements.  Specifically, I am trying to attach functions to events on the tab stave.  For reference,  If I create a StaveNote, such as: 

 

note = new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q" });

after I draw it with:

var voice = new Vex.Flow.Voice({num_beats: 1, beat_value: 4, resolution: Vex.Flow.RESOLUTION});

voice.addTickables([note]);

// Format and justify the notes to 400 pixels. 

var formatter = new Vex.Flow.Formatter().joinVoices([voice]).format([voice], 500);

// Render voice

voice.draw(context, stave);

I can access the element using something like:

document.getElementById('vf-' + note.attrs.id).addEventListener('click',function(){

   console.log("clicketyclack");

});

because the attrs object within notes has the id:

attrs: Object

classes: {}

el: null

id: "auto1151"

type: "StaveNote"

which outputs:

<g class="vf-stavenote" id="vf-auto1151">

however, if I create a TabNote, even though it also has an id within it's attrs object, that id does not get added to the svg text element.

<text stroke-width="0.3" fill="black" stroke="none" stroke-dasharray="none" font-family="Arial" font-size="10pt" font-weight="normal" font-style="normal" x="41.422399999999996" y="105">7</text>

Is there a reason for this that would stop me from attempting to do it, and, if not, are there some pointers you could give me to help me make this change?  I am assuming it has something to do with groups, I did attempt to add "draw_stem" and "stem_direction" when creating the TabNote, but, while that did add a group, it did not add any IDs:

let testnote = new VF.TabNote({

 positions: [{str: 6, fret: 7}],

 dots: 10,

 stem_direction:-1,

 duration: "q"},{draw_stem:true})

testnote attrs:

attrs: Object

classes: {}

el: null

id: "auto1149"

type: "TabNote"

SVG output:

<text stroke-width="0.3" fill="black" stroke="none" stroke-dasharray="none" font-family="Arial" font-size="10pt" font-weight="normal" font-style="normal" x="41.422399999999996" y="105">7</text>
<g class="vf-stem" pointer-events="bounding-box">
<path stroke-width="1.5" fill="none" stroke="black" stroke-dasharray="none" d="M45.180212499999996 95L45.180212499999996 130"></path>
</g>

Thanks for any insight!

Gregg

[minapre999]

Hi Gregg, just wondering if you found a solution to this problem.  I have recently started to use vexflow and asking the same questions!

thanks,

Peter