Vexflow: Rendering issue crash drum notation

[jeroenlammerts]

        let notes = [
          new VF.StaveNote({ keys: ['f/4', 'g/5/x3'], duration: '8' }),
          new VF.StaveNote({ keys: ['f/5/x2'], duration: '8' }),
          new VF.StaveNote({ keys: ['c/5', 'f/5/x2'], duration: '8' }),
          new VF.StaveNote({ keys: ['f/5/x2'], duration: '16' }),
          new VF.StaveNote({ keys: ['f/4'], duration: '16' }),
          new VF.StaveNote({ keys: ['f/4', 'f/5/x2'], duration: '8' }),
          new VF.StaveNote({ keys: ['f/4', 'f/5/x2'], duration: '8' }),
          new VF.StaveNote({ keys: ['c/5', 'f/5/x2'], duration: '8' }),
          new VF.StaveNote({ keys: ['f/5/x2'], duration: '8' }),
        ];

          let voice1 = new VF.Voice({})
            .addTickables(notes)
            .setStave(measure);

          let beams = VF.Beam.generateBeams(voice1.getTickables(), {
            maintain_stem_directions: true,
            flat_beams: true,
          });

          new VF.Formatter()
            .joinVoices([voice1])
            .formatToStave([voice1], measure);

          voice1.setContext(this.ctx).draw();

          beams.forEach(beam => {
            beam.setContext(this.ctx).draw();
          });

The crash should be more to the left.

[0xfe]

Looking into this. More weird cases:

[0xfe]

This was a super thorny issue -- took three hours to figure out and fix. Running regression tests now and hope I haven't broken anything in the process.

[0xfe]

Okay, all fixed, however there are still some minor adjustments required on a few glyphs. Whew.

[jeroenlammerts]

Thanks @0xfe for the effort looking into this. Actually the latest release (1.2.91) gives me some error.

I've tested it with 1.2.90 which doesn't show the error:

[0xfe]

How are you importing the library? Can you send me reproducible sample please?

[jeroenlammerts]

import * as Vex from 'vexflow';

but now only works with

import Vex from 'vexflow';

[sschmidTU]

I can confirm, the OSMD webpack build actually still compiled, but starting with Vexflow 1.2.91, when running the build/webpack server, Vex.Flow was undefined at runtime.
We had to use:
import Vex from "vexflow";
instead of:
import Vex = require("vexflow");

Also, in Typescript, I had to add this to tsconfig.json (to existing compilerOptions):

  "compilerOptions": {
    "esModuleInterop": true,
  }

Without that, this new import syntax was giving compile errors.

Now the build is running fine and looking good, so far!

It's unfortunate we weren't discussing this in a dedicated issue.