How to use vexflow - 10 common examples

}

        if (this.duration === undefined) {
            // console.log(this);
            return undefined;
        }
        const vfd = this.duration.vexflowDuration;
        if (vfd === undefined) {
            return undefined;
        }
        const vexflowKey = this.pitch.vexflowName(clef);

        // Not supported: Double;  None is done elsewhere?
        const vfnStemDirection
            = useStemDirection === 'down'
                ? Vex.Flow.StaveNote.STEM_DOWN
                : Vex.Flow.StaveNote.STEM_UP;

        const vfn = new Vex.Flow.StaveNote({
            keys: [vexflowKey],
            duration: vfd,
            stem_direction: vfnStemDirection,
        });
        this.vexflowAccidentalsAndDisplay(vfn, params); // clean up stuff...
        if (this.pitch.accidental !== undefined) {
            if (
                this.pitch.accidental.vexflowModifier !== 'n'
                && this.pitch.accidental.displayStatus !== false
            ) {
                vfn.addAccidental(
                    0,
                    new Vex.Flow.Accidental(

var keys = [];

  var i;
  var dataNote;

  for (i = 0; i < dataNotes.length; i++) {
    dataNote = dataNotes[i];
    if (chordTie) {
      dataNote.tie = true;
    }

    var octave = parseInt(dataNote.octave) + parseInt(chordOctaveShift);
    keys.push(dataNote.pitch + "/" + octave);
  }

  var note = new Vex.Flow.StaveNote({
    keys: keys,
    duration: vexFlowDuration.value,
    dots: vexFlowDuration.dots,
    type: "n",
    clef: this.state.key.clef
  });

  // TODO: set beam direction for notes (up/down)
  // TODO: beam direction should have two modes:
  //   automatic (for single voice on stave) and manual (for multiple voices on the same stave)

  for (i = 0; i < dataNotes.length; i++) {
    dataNote = dataNotes[i];

    for (var j = 0; j < vexFlowDuration.dots; j++) {
      note.addDot(i);

.get(0);
                        bottomVFStaff = lastPartVoice.activeVFStave;
                        if (bottomVFStaff === undefined) {
                            console.warn(
                                'No active VexFlow Staves defined for at least one measure'
                            );
                            continue;
                        }
                    }
                }
                for (
                    let i = 0;
                    i < s.renderOptions.staffConnectors.length;
                    i++
                ) {
                    const sc = new Vex.Flow.StaveConnector(
                        topVFStaff,
                        bottomVFStaff
                    );
                    const scTypeM21 = s.renderOptions.staffConnectors[i];
                    const scTypeVF = this.staffConnectorsMap(scTypeM21);
                    sc.setType(scTypeVF);
                    sc.setContext(this.ctx);
                    sc.draw();
                }
            }
        }
    }

note.keys.forEach(function (key, i) {
                const keyValue = key.split("/")[0];
                const accidental = keyValue.slice(1, (keyValue.length + 1) || 9e9);

                if (accidental.length > 0) {
                    staveNote.addAccidental(i, new Vex.Flow.Accidental(accidental));
                }
            });

VexAbcRenderer.prototype.createAnnotation = function(text, style, verticalPosition, justification) {
  var annotation = new Vex.Flow.Annotation(text);

  if (!style) {
    style = VexAbcUtil.getVexFlowAnnotationStyle("text");
  }

  annotation.setFont(style.fontName, style.fontSize, style.fontWeight);

  if (!verticalPosition) {
    verticalPosition = style.verticalPosition;
  }

  console.log(verticalPosition);

  if (verticalPosition === "above") {
    annotation.setVerticalJustification(Vex.Flow.Annotation.VerticalJustify.TOP);
  } else if (verticalPosition === "center") {

const windowWidth =
      window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    const widthThreshold = 600;
    const margin = 20;
    const width = windowWidth >= widthThreshold ? widthThreshold : windowWidth - margin;
    const staveWidth = width - margin;
    const height = this.props.staveCount * 100;
    const ctx = this.ctx;

    ctx.clear();

    const ratio = this.getPixelRatio();
    this.setCanvasExtent(canvas, width, height, ratio);

    const rightHandStave = new Vex.Flow.Stave(10, 0, staveWidth);
    rightHandStave
      .addClef("treble")
      .setKeySignature(this.props.keySignature)
      .setContext(ctx);

    const leftHandStave = new Vex.Flow.Stave(10, 80, staveWidth);
    leftHandStave
      .addClef("bass")
      .setKeySignature(this.props.keySignature)
      .setContext(ctx);

    this.colorizeKeys();

    [[rightHandStave, "treble"], [leftHandStave, "bass"]].map(([stave, clef], index) => {
      const keys = this.props.keys[clef];
      if (index < this.props.staveCount) {

LayoutManager.prototype.getStaves = function getStaves(measure, leftMeasure, aboveMeasure, firstMeasure) {
        var positions = this.getStavePositions(measure, leftMeasure, aboveMeasure, firstMeasure);

        var staves = [];
        for (var i = 0; i < positions.length; i++) {
            var position = positions[i];
            var stave = new Vex.Flow.Stave(position['x'], position['y'],
                                measure['width'], Table.STAVE_DEFAULT_OPTIONS);
            staves.push(stave);
        }

        return staves;
    };

function Renderer(musicjson, options) {
        this.backends = Vex.Flow.Renderer.Backends.RAPHAEL;
        this.musicjson = musicjson;

        if (!options)
            return;

        if (options.backends)
            this.backends = options.backends;

        if (options.$container) {
            this.$container = options.$container;

            this.numPages = LayoutTool.getNumPages(musicjson);
            this.pages = [];
            this.doms = [];
            this.pageSize = LayoutTool.getPageSize(musicjson);
            for (var i = 0; i < this.numPages; i++)

VexAbcRenderer.prototype.endVolta = function() {
  if (!this.state.volta) {
    return;
  }

  var type, text;
  if (this.state.voltaBeginMeasure === this.state.staveCount) {
    type = Vex.Flow.Volta.type.BEGIN_END;
    text = this.state.voltaText;
  } else {
    type = Vex.Flow.Volta.type.END;
    text = "";
  }

  var stave = this.state.stave;
  stave.setVoltaType(type, text, 0);

  this.state.volta = false;
  this.state.voltaBeginMeasure = -1;
  this.state.voltaText = null;
};