Vexflow: Joined voices, one with doted note, are not aligned within measure

[jhkst]

When having multiple voices and in one measure one contains half note with dot and second only quarters, then they are badly engraved so two barlines appears:

    var VF = Vex.Flow;
    var container = $(this.element);
    container.empty();
    var renderer = new VF.Renderer(container[0], VF.Renderer.Backends.SVG);
    renderer.resize(700, 300);
    var context = renderer.getContext();
    context.setFont('Arial', 10, '').setBackgroundFillStyle('#eed');
    var voices = [
        new VF.Voice({num_beats:4, beat_value: 4, resolution: VF.RESOLUTION}),
        new VF.Voice({num_beats:4, beat_value: 4, resolution: VF.RESOLUTION})
    ];

    voices[0].setStrict(false);
    voices[1].setStrict(false);

    var notes = [
        [
            new VF.StaveNote({keys: ["c/5"], duration: '2', stem_direction: 1}).addDotToAll(),
            new VF.StaveNote({keys: ["e/5"], duration: '4', stem_direction: 1}),
            new VF.BarNote(Vex.Flow.Barline.type.SINGLE),
            new VF.StaveNote({keys: ["f/5"], duration: '2', stem_direction: 1}),
            new VF.StaveNote({keys: ["d/5"], duration: '4', stem_direction: 1}),
            new VF.StaveNote({keys: ["f/5"], duration: '4', stem_direction: 1})
        ], [
            new VF.StaveNote({keys: ["f/4"], duration: '4', stem_direction: -1}),
            new VF.StaveNote({keys: ["g/4"], duration: '4', stem_direction: -1}),
            new VF.StaveNote({keys: ["a/4"], duration: '4', stem_direction: -1}),
            new VF.StaveNote({keys: ["f/4"], duration: '4', stem_direction: -1}),
            new VF.BarNote(Vex.Flow.Barline.type.SINGLE),
            new VF.StaveNote({keys: ["b/4"], duration: '2', stem_direction: -1}),
            new VF.StaveNote({keys: ["b/4"], duration: '4', stem_direction: -1}),
            new VF.StaveNote({keys: ["b/4"], duration: '4', stem_direction: -1})

        ]
    ];


    notes[0][2].setStyle({fillStyle: "blue", strokeStyle: "blue"});

    voices[0].addTickables(notes[0]);
    voices[1].addTickables(notes[1]);


    var formatter = new VF.Formatter();
    formatter.joinVoices([voices[0], voices[1]]);


    formatter.preCalculateMinTotalWidth(voices);
    var width = formatter.getMinTotalWidth();

    var staves = [
        new VF.Stave(10, 20, width*3)
    ];

    staves[0].addClef('treble', 'default', '8vb').addTimeSignature(stave.timeSig.n + '/' + stave.timeSig.d).setKeySignature(stave.key.keyName);

    formatter.formatToStave(voices, staves[0]);

    staves[0].setContext(context).draw();

    voices[0].draw(context, staves[0]);
    voices[1].draw(context, staves[0]);

The result is like this:

[sug1no]

About add{ToAll} and note duration, please refer to the following comment:

https://github.com/0xfe/vexflow/issues/584#issuecomment-342189059

.addDot() and .addDotToAll() do not actually affect the duration of a StaveNote, only how it is rendered. The duration is set when creating a StaveNote:

So, with duration: '2d' the result is as follows:

http://jsfiddle.net/eo47gvmc/2/

[sschmidTU]

I also thought Vexflow had this issue, thanks sug1no for the hint!
Note that for rests, the "r" has to come after the "d"s for dots, not before, which was OSMD's problem.