Vexflow: Incrorrect x-position when showing Vex.Flow.Repetition.type.DS with "B" key signature

Created on 19 Jan 2020  Â·  7Comments  Â·  Source: 0xfe/vexflow

example code:

            VF = Vex.Flow;
            var div = document.getElementById("boo")
            var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);

            renderer.resize(500, 500);
            var context = renderer.getContext();
            context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

            var stave = new VF.Stave(10, 40, 400);
            stave.addClef("treble").addTimeSignature("4/4");
            stave.setKeySignature("B");
            stave.addModifier(new Vex.Flow.Repetition(Vex.Flow.Repetition.type.DS, 0, 50), Vex.Flow.StaveModifier.Position.RIGHT);

            stave.setContext(context).draw();

which rendered as:

image

The x-position of "D.S." goes too far away to the end of stave.

Most helpful comment

Same issure happens to "volta".

code:

            VF = Vex.Flow;
            var div = document.getElementById("boo")
            var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);

            renderer.resize(500, 500);
            var context = renderer.getContext();
            context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

            var stave = new VF.Stave(10, 40, 400);
            stave.addClef("treble").addTimeSignature("4/4");
            stave.setKeySignature("B");

            stave.setVoltaType(Vex.Flow.Volta.type.BEGIN_END, 1, 0);
            stave.setContext(context).draw();

image

correct result should be:

image

The responsible code would be(in stavevolta.js):

draw(stave, x) {
    const ctx = stave.checkContext();
    this.setRendered();

    //let width = stave.width;
    //we should not include x(offset) for width
    let width = stave.width - x;

All 7 comments

I'm trying to fix it with modification as follow(in stave.js):

  getModifierXShift(index = 0) {
    if (typeof index !== 'number') {
      throw new Vex.RERR('InvalidIndex', 'Must be of number type');
    }

    if (!this.formatted) this.format();

    if (this.getModifiers(StaveModifier.Position.BEGIN).length === 1) {
      return 0;
    }

    //fix by compilelife: for modifiers goes to right position, zero-shift seems to work correctly
    if (this.modifiers[index].getPosition() === StaveModifier.Position.RIGHT) {
      return 0;
    }

    let start_x = this.start_x - this.x;
    const begBarline = this.modifiers[0];
    if (begBarline.getType() === Barline.type.REPEAT_BEGIN && start_x > begBarline.getWidth()) {
      start_x -= begBarline.getWidth();
    }

    return start_x;
  }

rendered as follow:

image

Could you please help me examine that?

Another related x-position issue is the right space seems too large.

image

Compare to musescore:

image

which is exactly close to the end barline

I would guess it's releated to the code below:

drawSymbolText(stave, x, text, draw_coda) {
    //……
    if (this.symbol_type === Repetition.type.CODA_LEFT) {
      // Offset Coda text to right of stave beginning
      text_x = this.x + stave.options.vertical_bar_width;
      symbol_x = text_x + ctx.measureText(text).width + 12;
    } else {
      // Offset Signo text to left stave end
      //comment by me: -5 and -12 here is magic to me, which introduce the right space of 'D.S.'
      symbol_x = this.x + x + stave.width - 5 + this.x_shift;
      text_x = symbol_x - + ctx.measureText(text).width - 12;
    }

Could you please give me some info about the -5 and -12?

Same issure happens to "volta".

code:

            VF = Vex.Flow;
            var div = document.getElementById("boo")
            var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);

            renderer.resize(500, 500);
            var context = renderer.getContext();
            context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

            var stave = new VF.Stave(10, 40, 400);
            stave.addClef("treble").addTimeSignature("4/4");
            stave.setKeySignature("B");

            stave.setVoltaType(Vex.Flow.Volta.type.BEGIN_END, 1, 0);
            stave.setContext(context).draw();

image

correct result should be:

image

The responsible code would be(in stavevolta.js):

draw(stave, x) {
    const ctx = stave.checkContext();
    this.setRendered();

    //let width = stave.width;
    //we should not include x(offset) for width
    let width = stave.width - x;

Thanks for the report -- will take a look.

I also bumped into this issue with volta, and the fix above looks correct, it will be cool if you apply it to the codebase soon :)

I'll check this for side effects and make a PR, if noone's on it already ^^

for the DS spacing, could this be to leave space for the coda sign in "D.S. al [coda sign]"?
image
http://www.vexflow.com/tests/

Of course it should only take the space if we have an added "al coda".
I'll take a look.

I submitted PR #796 that should fix these issues, if anyone wants to take a look.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

CrystalShardz picture CrystalShardz  Â·  4Comments

sug1no picture sug1no  Â·  7Comments

Silverwolf90 picture Silverwolf90  Â·  4Comments

graciano picture graciano  Â·  4Comments

HollyJHuber picture HollyJHuber  Â·  5Comments