How do you put text next to notes (i.e. to the right of notes)?

[alindsay55661]

Hi, this library is amazing, many thanks to the incredible work done by all contributors.

I am trying to render chord blocks in isolation (one chord block per stave) with the note names next to each note. I'd like to control the distance and styling of the note names so I can do things like mimic breaks in the stave lines. These labels need to come after any other right-side modifiers so there are no collisions. I do not need these labels to align with each other, just a fixed offset from the note is fine.

I've not been able to figure out how to do this with Modifier or Annotation position. I also could not figure out how to do it with justification settings. What is the best way to achieve this render?

[alindsay55661]

I was able to figure this out thanks to an idea posted by @sschmidTU in this discussion: #1424

Below is what I ended up doing. I would love to know if there is a better way. For now, I accomplished my goals. Thank you again for creating such a fantastic library.

// First draw the stave with it's voice/notes
trebleVoice.draw(renderContext, stave)

// In my case, I know there is only 1 tickable and I know it's a StaveNote
const staveNote = trebleVoice.getTickables()[0] as Vex.Flow.StaveNote
// @ts-ignore (getRightDisplacedHeadPx doesn't appear to be in the types)
const displacementPx = staveNote.getRightDisplacedHeadPx()

// Next, loop over note heads to get x/y coordinates
// This strategy relies on the staveNote.keys being in the same order as the noteHeads
// It would be ideal if the noteHead.keys accessor had the value - but this array is empty
// @ts-ignore (noteHeads accessor doesn't appear to be in the types)
staveNote.noteHeads.forEach((noteHead, idx) => {
  const noteName = staveNote.getKeys()[idx].replace(/\/[0-9]/, '').replace('b', '♭').replace('#', '♯')
  const hasAccidentals = noteName.includes('♭') || noteName.includes('♭')
  const offset = 135

  const x = noteHead.displaced ? displacementPx + offset : offset
  const y = noteHead.y + 4

  // @ts-ignore (setFont doesn't appear to be in the types)
  renderContext.setFont(labelFont)
  renderContext.setFillStyle('white')
  renderContext.fillRect(x - 1, y - 8, hasAccidentals ? 15 : 11, 8)
  renderContext.setFillStyle('blue')
  renderContext.fillText(noteName, x, y)
  renderContext.setFillStyle('black')
})