Auto-beaming in EasyScore

[dino-prpic]

Is there a way to auto-beam voices using EasyScore? I built this code below and it works perfectly until i try to add beams (look for NOT WORKING comment). No matter what I put in beam.setContext(), I get NoTickContext: Can't getAbsoluteX() without a TickContext error.

The code:

// my classes
import Key   from './key.js';
import Tone  from './tone.js';
import Note  from './note.js';

// vexflow's classes
import {Vex} from '../vexflow/vexflow.js';
import {Accidental} from '../vexflow/src/accidental.js';
import {Beam} from '../vexflow/src/beam.js';

const VF = Vex.Flow;

export default class File {
    beats;
    beatValue;
    keySignature;
    score = [];

    constructor(beats, beatValue, keySignature) {
        this.beats = beats || 4;
        this.beatValue = beatValue || 4;
        this.keySignature = keySignature || new Key(0, 'major');

        // add first measure
        this.addMeasure();
    } 

    render(elementId = 'beatascoreoutput') {
		document.getElementById(elementId).innerHTML = ''; // delete previous render
	
		let keyForceMajor = this.keySignature;
		keyForceMajor.type = 'major';
		keyForceMajor = keyForceMajor.tonic.toString;

		let keySignatureWidth = this.keySignature.accidentals.length * 12;
		
		// Create an SVG renderer and attach it to the DIV element named "beatascoreoutput".
		let vf = new VF.Factory({renderer: {elementId: elementId, width: (this.score.length*this.beats*60)+70+keySignatureWidth, height: 270}}); 
		let score = vf.EasyScore();

		score.set({time: this.beats + '/' + this.beatValue});

		let x = 15; // x position of first measure

		
		// for each measure
		for (let m = 0; m < this.score.length; m++) {

			let voices = [[], [], [], []]; // reset voices

			// for each voice
			for (let v = 0; v < 4; v++) {
				let note; // reset note

				// for each beat
				for (let b = 0; b < this.score[m].length; b++) {
					let tone = new Tone(this.score[m][b][v]);

					// if tone is a prolongation increase span of previous note
					if (tone.type == 'prolongation' && note) {
						note.span++;
					} else {
						// add previous note to voices if it exists
						if (note) {
							voices[v].push(note.toString);
						}

						// create new note
						note = new Note(m+'-'+b+'-'+v, tone, v, this.beatValue);

					}
					
					// add note if last beat of measure
					if (b == this.score[m].length-1) {
						voices[v].push(note.toString);
					}
				}
			}

			console.log(voices);

			// let system = makeSystem((this.beats*60)+50);
			let width = (this.beats*60);
			if (m == 0) {
				width += 50;
				width += keySignatureWidth;
			}
			let system = vf.System({x: x, y: 15, width: width, spaceBetweenStaves: 13});
			x += width;

		
			system.addStave({
				voices: [
					score.voice(score.notes(voices[0].join(', '), {clef: 'treble', stem: 'up'})),
					score.voice(score.notes(voices[1].join(', '), {clef: 'treble', stem: 'down'}))
				]
			});
			system.addStave({
				voices: [
					score.voice(score.notes(voices[2].join(', '), {clef: 'bass', stem: 'up'})),
					score.voice(score.notes(voices[3].join(', '), {clef: 'bass', stem: 'down'}))
				]
			});
			if (m == 0) {
				system.partStaves[0].addClef('treble').addTimeSignature(this.beats + '/' + this.beatValue).addKeySignature(keyForceMajor);
				system.partStaves[1].addClef('bass').addTimeSignature(this.beats + '/' + this.beatValue).addKeySignature(keyForceMajor);
				system.addConnector('brace');
			}
			system.addConnector('singleRight');
			system.addConnector('singleLeft');
			if (m == this.score.length - 1) {
				system.addConnector('boldDoubleRight');
			}

			// apply key accidentals and remember in voices
			Accidental.applyAccidentals([system.partVoices[0], system.partVoices[1]], keyForceMajor); // SA
			Accidental.applyAccidentals([system.partVoices[2], system.partVoices[3]], keyForceMajor); // TB


			// NOT WORKING
			var beams = Beam.generateBeams(system.partVoices[0].getTickables(), {
				groups: [new Vex.Flow.Fraction(2, 8)]
			});
			beams.forEach(function(beam) {
				beam.setContext(vf.getContext()).draw();
    		});

		}

		vf.draw();

    }

    [...]
    
}

[AaronDavidNewman]

For auto-beam in easy score, use score.beam(score.notes(....

See https://github.com/0xfe/vexflow/blob/master/tests/bach_tests.ts or https://github.com/0xfe/vexflow/blob/master/tests/easyscore_tests.ts for examples.

[dino-prpic]

Thank you for your response!
As I see from these tests, beam(notes) is being called for every beam group. When I tried to beam all notes in a voice i got Uncaught Error: [RuntimeError] BadArguments: Beams can only be applied to notes shorter than a quarter note. at new Beam (beam.js:45:19) at Factory.Beam (factory.js:349:22) at EasyScore.beam (easyscore.js:354:22) at File.render (file.js:93:22) in my console.
So this, unfortunately, does not solve my problem.

However, Beam.generateBeams() that I used firstly does the job perfectly. It deletes the stems and flags on the notes that will be beamed.
The issue I encounter is when providing context for each beam.

beams.forEach(function(beam) {
    beam.setContext(🙈).draw();
});

I tried with vf.getContext() and vf.context (vf meaning the Factory object), but it is missing TickContext for some reason.

[dino-prpic]

I found the problem. It appears that TickContext is being created after calling the draw() method from Factory instance.

So for future reference:
Define let beams = []; after defining let factory = new Vex.Flow.Factory(...); and then use

beams = beams.concat(Beam.generateBeams(system.partVoices[v].getTickables(), {
    groups: [new Vex.Flow.Fraction(2, 8)]
}));

for each voice in each system.

At the end of the score first call factory.draw();, and then beams.forEach((beam) => beam.setContext(factory.getContext()).draw());!

[AaronDavidNewman]

Glad you figured it out.

Beams can only be applied to notes shorter than a quarter note.

You will always get this error if you try to beam something >= 1/4 note. That doesn't have anything to do with factory.draw, you must have been score.beam 'ing a longer note.

It appears that TickContext is being created after calling the draw()

If you are rendering manually, you need to draw in order: 1) stave, 2) voices 3) beams. Until the voices are drawn, the notehead locations aren't known (that is what the TickContext does, but kind of a cryptic error message if you don't know this). If you use factory.draw it takes care of that order for you.

[dino-prpic]

I use EasyScore to create staves and voices. Then I expand the capabilities by importing low level api classes, like the Beam class in this example.

You previously stated:

For auto-beam in easy score, use score.beam(score.notes(....

This does NOT auto-beam, it creates just one beam. And indeed, there is no way to auto-beam if only using EasyScore.

Although, in the beam.js docs I found a static method called generateBeams(notes, config) which can take all notes in a voice (even if there are longer notes than eight note) and then create beams for them automatically according to the config we give it.

---

Until the voices are drawn, the notehead locations aren't known (that is what the TickContext does, but kind of a cryptic error message if you don't know this).

Thank you for clarifying that! I tried console logging factory.getContext() and I saw it existed before drawing. But i didn't have a clue what TickContext was and when it's being created.