Class Factory

constructor

• new Factory(options?: FactoryOptions): Factory

  Example:

  Create an SVG renderer and attach it to the DIV element named "boo" to render using 1200 and 600

  const vf: Factory = new VexFlow.Factory({renderer: { elementId: 'boo', width: 1200, height: 600 }});

  Parameters

  • options: FactoryOptions = {}

  Returns Factory

StaticDEBUG

Accidental

• Accidental(params: { type: string }): Accidental

  Parameters

  • params: { type: string }

  Returns Accidental

Annotation

• Annotation(
      params?: {
          font?: FontInfo;
          hJustify?: string | AnnotationHorizontalJustify;
          text?: string;
          vJustify?: string | AnnotationVerticalJustify;
      },
  ): Annotation

  Parameters

  • Optionalparams: {
        font?: FontInfo;
        hJustify?: string | AnnotationHorizontalJustify;
        text?: string;
        vJustify?: string | AnnotationVerticalJustify;
    }

  Returns Annotation

Articulation

• Articulation(
      params?: {
          betweenLines?: boolean;
          position?: string | number;
          type?: string;
      },
  ): Articulation

  Parameters

  • Optionalparams: { betweenLines?: boolean; position?: string | number; type?: string }

  Returns Articulation

BarNote

• BarNote(params?: { type?: string | BarlineType }): BarNote

  Parameters

  • params: { type?: string | BarlineType } = {}

  Returns BarNote

Beam

• Beam(
      params: {
          notes: StemmableNote[];
          options?: {
              autoStem?: boolean;
              partialBeamDirections?: { [noteIndex: number]: PartialBeamDirection };
              secondaryBeamBreaks?: number[];
          };
      },
  ): Beam

  Parameters

  • params: {
        notes: StemmableNote[];
        options?: {
            autoStem?: boolean;
            partialBeamDirections?: { [noteIndex: number]: PartialBeamDirection };
            secondaryBeamBreaks?: number[];
        };
    }

  Returns Beam

ChordSymbol

• ChordSymbol(
      params?: {
          fontFamily?: string;
          fontSize?: number;
          fontWeight?: string;
          hJustify?: string;
          vJustify?: string;
      },
  ): ChordSymbol

  Parameters

  • Optionalparams: {
        fontFamily?: string;
        fontSize?: number;
        fontWeight?: string;
        hJustify?: string;
        vJustify?: string;
    }

  Returns ChordSymbol

ClefNote

• ClefNote(
      params?: {
          options?: { annotation?: string; size?: string };
          type?: string;
      },
  ): ClefNote

  Parameters

  • Optionalparams: { options?: { annotation?: string; size?: string }; type?: string }

  Returns ClefNote

Curve

• Curve(
      params: {
          from: undefined | Note;
          options: CurveOptions;
          to: undefined | Note;
      },
  ): Curve

  Parameters

  • params: { from: undefined | Note; options: CurveOptions; to: undefined | Note }

  Returns Curve

draw

• draw(): void

  Render the score.

  Returns void

EasyScore

• EasyScore(options?: EasyScoreOptions): EasyScore

  Creates EasyScore. Normally the first step after constructing a Factory. For example:

  const vf: Factory = new VexFlow.Factory({renderer: { elementId: 'boo', width: 1200, height: 600 }});
  const score: EasyScore = vf.EasyScore();
  Copy

  Parameters

  • options: EasyScoreOptions = {}

    • Optionalbuilder?: Builder

    • OptionalcommitHooks?: CommitHook[]

    • Optionalfactory?: Factory

    • OptionalthrowOnError?: boolean

  Returns EasyScore

Fingering

• Fingering(params: { number?: string; position?: string }): FretHandFinger

  Parameters

  • params: { number?: string; position?: string }

  Returns FretHandFinger

Formatter

• Formatter(options?: FormatterOptions): Formatter

  Parameters

  • Optionaloptions: FormatterOptions

  Returns Formatter

getContext

• getContext(): RenderContext

  Returns RenderContext

getStave

• getStave(): undefined | Stave

  Returns undefined | Stave

getVoices

• getVoices(): Voice[]

  Returns Voice[]

GhostNote

• GhostNote(noteStruct: string | NoteStruct): GhostNote

  Parameters

  • noteStruct: string | NoteStruct

  Returns GhostNote

GlyphNote

• GlyphNote(
      glyph: string,
      noteStruct: NoteStruct,
      options?: GlyphNoteOptions,
  ): GlyphNote

  Parameters

  • glyph: string
  • noteStruct: NoteStruct
  • Optionaloptions: GlyphNoteOptions

  Returns GlyphNote

GraceNote

• GraceNote(noteStruct: GraceNoteStruct): GraceNote

  Parameters

  • noteStruct: GraceNoteStruct

  Returns GraceNote

GraceNoteGroup

• GraceNoteGroup(
      params: { notes: StemmableNote[]; slur?: boolean },
  ): GraceNoteGroup

  Parameters

  • params: { notes: StemmableNote[]; slur?: boolean }

  Returns GraceNoteGroup

initRenderer

• initRenderer(): void

  Returns void

KeySigNote

• KeySigNote(
      params: { alterKey?: string[]; cancelKey?: string; key: string },
  ): KeySigNote

  Parameters

  • params: { alterKey?: string[]; cancelKey?: string; key: string }

  Returns KeySigNote

ModifierContext

• ModifierContext(): ModifierContext

  Returns ModifierContext

MultiMeasureRest

• MultiMeasureRest(params: MultimeasureRestRenderOptions): MultiMeasureRest

  Parameters

  • params: MultimeasureRestRenderOptions

  Returns MultiMeasureRest

NoteSubGroup

• NoteSubGroup(params?: { notes?: Note[] }): NoteSubGroup

  Parameters

  • Optionalparams: { notes?: Note[] }

  Returns NoteSubGroup

Ornament

• Ornament(
      type: string,
      params?: {
          delayed?: boolean;
          lowerAccidental?: string;
          position?: string | number;
          upperAccidental?: string;
      },
  ): Ornament

  Parameters

  • type: string
  • Optionalparams: {
        delayed?: boolean;
        lowerAccidental?: string;
        position?: string | number;
        upperAccidental?: string;
    }

  Returns Ornament

PedalMarking

• PedalMarking(
      params?: { notes?: StaveNote[]; options?: { style: string } },
  ): PedalMarking

  Parameters

  • Optionalparams: { notes?: StaveNote[]; options?: { style: string } }

  Returns PedalMarking

RepeatNote

• RepeatNote(
      type: string,
      noteStruct?: NoteStruct,
      options?: GlyphNoteOptions,
  ): RepeatNote

  Parameters

  • type: string
  • OptionalnoteStruct: NoteStruct
  • Optionaloptions: GlyphNoteOptions

  Returns RepeatNote

reset

• reset(): void

  Returns void

setContext

• setContext(context: RenderContext): this

  Parameters

  • context: RenderContext

  Returns this

setOptions

• setOptions(options?: FactoryOptions): void

  Parameters

  • Optionaloptions: FactoryOptions

  Returns void

Stave

• Stave(
      params?: {
          options?: StaveOptions;
          width?: number;
          x?: number;
          y?: number;
      },
  ): Stave

  Return pixels from current stave spacing.

  Parameters

  • Optionalparams: { options?: StaveOptions; width?: number; x?: number; y?: number }

  Returns Stave

StaveConnector

• StaveConnector(
      params: {
          bottomStave: Stave;
          topStave: Stave;
          type: StaveConnectorType;
      },
  ): StaveConnector

  Parameters

  • params: { bottomStave: Stave; topStave: Stave; type: StaveConnectorType }

  Returns StaveConnector

StaveLine

• StaveLine(
      params: {
          firstIndexes: number[];
          from: StaveNote;
          lastIndexes: number[];
          options?: { font?: FontInfo; text?: string };
          to: StaveNote;
      },
  ): StaveLine

  Parameters

  • params: {
        firstIndexes: number[];
        from: StaveNote;
        lastIndexes: number[];
        options?: { font?: FontInfo; text?: string };
        to: StaveNote;
    }

  Returns StaveLine

StaveNote

• StaveNote(noteStruct: StaveNoteStruct): StaveNote

  Parameters

  • noteStruct: StaveNoteStruct

  Returns StaveNote

StaveTie

• StaveTie(
      params: {
          firstIndexes?: number[];
          from?: null | Note;
          lastIndexes?: number[];
          options?: { direction?: number };
          text?: string;
          to?: null | Note;
      },
  ): StaveTie

  Parameters

  • params: {
        firstIndexes?: number[];
        from?: null | Note;
        lastIndexes?: number[];
        options?: { direction?: number };
        text?: string;
        to?: null | Note;
    }

  Returns StaveTie

StringNumber

• StringNumber(
      params: { number: string; position: string },
      drawCircle?: boolean,
  ): StringNumber

  Parameters

  • params: { number: string; position: string }
  • drawCircle: boolean = true

  Returns StringNumber

System

• System(params?: SystemOptions): System

  Parameters

  • params: SystemOptions = {}

  Returns System

TabNote

• TabNote(noteStruct: TabNoteStruct): TabNote

  Parameters

  • noteStruct: TabNoteStruct

  Returns TabNote

TabStave

• TabStave(
      params?: {
          options?: StaveOptions;
          width?: number;
          x?: number;
          y?: number;
      },
  ): TabStave

  Parameters

  • Optionalparams: { options?: StaveOptions; width?: number; x?: number; y?: number }

  Returns TabStave

TextBracket

• TextBracket(
      params: {
          from: Note;
          options: {
              font?: FontInfo;
              line?: number;
              position: string;
              superscript: string;
          };
          text: string;
          to: Note;
      },
  ): TextBracket

  Parameters

  • params: {
        from: Note;
        options: {
            font?: FontInfo;
            line?: number;
            position: string;
            superscript: string;
        };
        text: string;
        to: Note;
    }

  Returns TextBracket

TextDynamics

• TextDynamics(
      params?: {
          dots?: number;
          duration?: string;
          line?: number;
          text?: string;
      },
  ): TextDynamics

  Parameters

  • Optionalparams: { dots?: number; duration?: string; line?: number; text?: string }

  Returns TextDynamics

TextNote

• TextNote(noteStruct: TextNoteStruct): TextNote

  Parameters

  • noteStruct: TextNoteStruct

  Returns TextNote

TickContext

• TickContext(): TickContext

  Returns TickContext

TimeSigNote

• TimeSigNote(params?: { time?: string }): TimeSigNote

  Parameters

  • Optionalparams: { time?: string }

  Returns TimeSigNote

Tuplet

• Tuplet(params?: { notes?: Note[]; options?: TupletOptions }): Tuplet

  Parameters

  • Optionalparams: { notes?: Note[]; options?: TupletOptions }

  Returns Tuplet

VibratoBracket

• VibratoBracket(
      params: {
          from: null | Note;
          options: { code?: number; line?: number };
          to: null | Note;
      },
  ): VibratoBracket

  Parameters

  • params: {
        from: null | Note;
        options: { code?: number; line?: number };
        to: null | Note;
    }

  Returns VibratoBracket

Voice

• Voice(params?: { time?: string | VoiceTime }): Voice

  Parameters

  • Optionalparams: { time?: string | VoiceTime }

  Returns Voice

StaticnewFromElementId

• newFromElementId(
      elementId: null | string,
      width?: number,
      height?: number,
  ): Factory

  Static simplified function to access constructor without providing FactoryOptions

  Example:

  Create an SVG renderer and attach it to the DIV element named "boo" to render using 1200 and 600

  const vf: Factory = VexFlow.Factory.newFromElementId('boo', 1200, 600 );

  Parameters

  • elementId: null | string
  • width: number = 500
  • height: number = 200

  Returns Factory