How to align notes with accidentals to equal x position in both clefs?

[TeemuKoivisto]

Hey, as I am drawing my notes to clefs I noticed that accidentals in either of the clefs move the notes so that they are just bit off for the rest of the bar.

I wonder how to prevent this?

I rendered that example with:

    const el = document.querySelector('#score')
    const renderer = new Renderer(el, Renderer.Backends.SVG)
    renderer.resize(732, 360)
    const ctx = renderer.getContext()
    ctx.scale(2.0, 2.0)
    const tickContext = new Vex.Flow.TickContext()
    const tclef = new Stave(0, 0, 200).addClef('treble') //.addTimeSignature('4/4')
    const bclef = new Stave(0, 60, 200).addClef('bass')
    const trebleNotes = [
      new StaveNote({ keys: ['g#/4'], duration: 'q' }),
      new StaveNote({ keys: ['b/4'], duration: 'qr' }),
      new StaveNote({ keys: ['c/4'], duration: 'q' }),
      new StaveNote({ keys: ['a/4', 'c/5', 'e/5'], duration: 'q' })
    ]
    const bassNotes = [
      new StaveNote({ clef: 'bass', keys: ['f/3'], duration: 'q' }),
      new StaveNote({ clef: 'bass', keys: ['b/3'], duration: 'qr' }),
      new StaveNote({ clef: 'bass', keys: ['b/2'], duration: 'q' }),
      new StaveNote({ clef: 'bass', keys: ['c/3', 'e/3', 'g/3'], duration: 'q' })
    ]
    trebleNotes[0].addModifier(new Accidental('#'), 0)
    const v1 = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }).addTickables(trebleNotes)
    const v2 = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }).addTickables(bassNotes)
    const formatter1 = new Vex.Flow.Formatter().joinVoices([v1]).formatToStave([v1], tclef).joinVoices([v2]).formatToStave([v2], bclef)
    v1.draw(ctx, tclef)
    v2.draw(ctx, bclef)
    tclef.setContext(ctx).draw()
    bclef.setContext(ctx).draw()

[TeemuKoivisto]

Okay I found a solution from the FAQ https://github.com/0xfe/vexflow/wiki/FAQ#how-do-i-align-multiple-voices-across-staves. It seems you have to manually calculate the offset where the notes start.

    const el = document.querySelector('#score')
    const renderer = new Renderer(el, Renderer.Backends.SVG)
    renderer.resize(732, 360)
    const ctx = renderer.getContext()
    ctx.scale(2.0, 2.0)
    const tclef = new Stave(0, 0, 200).addClef('treble').addKeySignature('B')
    const bclef = new Stave(0, 60, 200).addClef('bass').addKeySignature('B')
    const trebleNotes = [
      new StaveNote({ keys: ['g#/4'], duration: 'q' }),
      new StaveNote({ keys: ['b/4'], duration: 'qr' }),
      new StaveNote({ keys: ['c/4'], duration: 'q' }),
      new StaveNote({ keys: ['a/4', 'c/5', 'e/5'], duration: 'q' })
    ]
    const bassNotes = [
      new StaveNote({ clef: 'bass', keys: ['f/3'], duration: 'q' }),
      new StaveNote({ clef: 'bass', keys: ['b/3'], duration: 'qr' }),
      new StaveNote({ clef: 'bass', keys: ['b/2'], duration: 'q' }),
      new StaveNote({ clef: 'bass', keys: ['c/3', 'e/3', 'g/3'], duration: 'q' })
    ]
    trebleNotes[0].addModifier(new Accidental('#'), 0)
    const v1 = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }).addTickables(trebleNotes)
    const v2 = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }).addTickables(bassNotes)
    // Make sure the staves have the same starting point for notes
    const startX = Math.max(tclef.getNoteStartX(), bclef.getNoteStartX())
    tclef.setNoteStartX(startX)
    bclef.setNoteStartX(startX)
    const formatter = new Vex.Flow.Formatter()
    formatter.joinVoices([v1])
    formatter.joinVoices([v2])
    formatter.format([v1, v2], 190 - startX)
    v1.draw(ctx, tclef)
    v2.draw(ctx, bclef)
    tclef.setContext(ctx).draw()
    bclef.setContext(ctx).draw()