Class Factory

constructor

• new Factory(options?): 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 Vex.Flow.Factory({renderer: { elementId: 'boo', width: 1200, height: 600 }});

  Parameters

  • options: FactoryOptions = {}

  Returns Factory

Static DEBUG

Static TEXT_FONT

Accidental

• Accidental(params): Accidental

• Parameters

  • params: {
        type: string;
    }

    • type: string

  Returns Accidental

Annotation

• Annotation(params?): Annotation

• Parameters

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

    • Optional font?: FontInfo

    • Optional hJustify?: string | AnnotationHorizontalJustify

    • Optional text?: string

    • Optional vJustify?: string | AnnotationVerticalJustify

  Returns Annotation

Articulation

• Articulation(params?): Articulation

• Parameters

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

    • Optional betweenLines?: boolean

    • Optional position?: string | number

    • Optional type?: string

  Returns Articulation

BarNote

• BarNote(params?): BarNote

• Parameters

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

    • Optional type?: string | BarlineType

  Returns BarNote

Beam

• Beam(params): Beam

• Parameters

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

    • notes: StemmableNote[]

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

      • Optional autoStem?: boolean

      • Optional partialBeamDirections?: {
            [noteIndex: number]: PartialBeamDirection;
        }

        • [noteIndex: number]: PartialBeamDirection

      • Optional secondaryBeamBreaks?: number[]

  Returns Beam

ChordSymbol

• ChordSymbol(params?): ChordSymbol

• Parameters

  • Optional params: {
        fontFamily?: string;
        fontSize?: number;
        fontWeight?: string;
        hJustify?: string;
        kerning?: boolean;
        reportWidth?: boolean;
        vJustify?: string;
    }

    • Optional fontFamily?: string

    • Optional fontSize?: number

    • Optional fontWeight?: string

    • Optional hJustify?: string

    • Optional kerning?: boolean

    • Optional reportWidth?: boolean

    • Optional vJustify?: string

  Returns ChordSymbol

ClefNote

• ClefNote(params?): ClefNote

• Parameters

  • Optional params: {
        options?: {
            annotation?: string;
            size?: string;
        };
        type?: string;
    }

    • Optional options?: {
          annotation?: string;
          size?: string;
      }

      • Optional annotation?: string

      • Optional size?: string

    • Optional type?: string

  Returns ClefNote

Curve

• Curve(params): Curve

• Parameters

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

    • from: Note

    • options: CurveOptions

    • to: Note

  Returns Curve

EasyScore

• EasyScore(options?): EasyScore

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

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

  Parameters

  • options: EasyScoreOptions = {}

  Returns EasyScore

Fingering

• Fingering(params): FretHandFinger

• Parameters

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

    • Optional number?: string

    • Optional position?: string

  Returns FretHandFinger

Formatter

• Formatter(options?): Formatter

• Parameters

  • Optional options: FormatterOptions

  Returns Formatter

GhostNote

• GhostNote(noteStruct): GhostNote

• Parameters

  • noteStruct: string | NoteStruct

  Returns GhostNote

GlyphNote

• GlyphNote(glyph, noteStruct, options?): GlyphNote

• Parameters

  • glyph: Glyph

  • noteStruct: NoteStruct

  • Optional options: GlyphNoteOptions

  Returns GlyphNote

GraceNote

• GraceNote(noteStruct): GraceNote

• Parameters

  • noteStruct: GraceNoteStruct

  Returns GraceNote

GraceNoteGroup

• GraceNoteGroup(params): GraceNoteGroup

• Parameters

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

    • notes: StemmableNote[]

    • Optional slur?: boolean

  Returns GraceNoteGroup

KeySigNote

• KeySigNote(params): KeySigNote

• Parameters

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

    • Optional alterKey?: string[]

    • Optional cancelKey?: string

    • key: string

  Returns KeySigNote

ModifierContext

• ModifierContext(): ModifierContext

• Returns ModifierContext

MultiMeasureRest

• MultiMeasureRest(params): MultiMeasureRest

• Parameters

  • params: MultimeasureRestRenderOptions

  Returns MultiMeasureRest

NoteSubGroup

• NoteSubGroup(params?): NoteSubGroup

• Parameters

  • Optional params: {
        notes?: Note[];
    }

    • Optional notes?: Note[]

  Returns NoteSubGroup

Ornament

• Ornament(type, params?): Ornament

• Parameters

  • type: string

  • Optional params: {
        delayed?: boolean;
        lowerAccidental?: string;
        position?: string | number;
        upperAccidental?: string;
    }

    • Optional delayed?: boolean

    • Optional lowerAccidental?: string

    • Optional position?: string | number

    • Optional upperAccidental?: string

  Returns Ornament

PedalMarking

• PedalMarking(params?): PedalMarking

• Parameters

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

    • Optional notes?: StaveNote[]

    • Optional options?: {
          style: string;
      }

      • style: string

  Returns PedalMarking

RepeatNote

• RepeatNote(type, noteStruct?, options?): RepeatNote

• Parameters

  • type: string

  • Optional noteStruct: NoteStruct

  • Optional options: GlyphNoteOptions

  Returns RepeatNote

Stave

• Stave(params?): Stave

• Return pixels from current stave spacing.

  Parameters

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

    • Optional options?: StaveOptions

    • Optional width?: number

    • Optional x?: number

    • Optional y?: number

  Returns Stave

StaveConnector

• StaveConnector(params): StaveConnector

• Parameters

  • params: {
        bottom_stave: Stave;
        top_stave: Stave;
        type: StaveConnectorType;
    }

    • bottom_stave: Stave

    • top_stave: Stave

    • type: StaveConnectorType

  Returns StaveConnector

StaveLine

• StaveLine(params): StaveLine

• Parameters

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

    • first_indices: number[]

    • from: StaveNote

    • last_indices: number[]

    • Optional options?: {
          font?: FontInfo;
          text?: string;
      }

      • Optional font?: FontInfo

      • Optional text?: string

    • to: StaveNote

  Returns StaveLine

StaveNote

• StaveNote(noteStruct): StaveNote

• Parameters

  • noteStruct: StaveNoteStruct

  Returns StaveNote

StaveTie

• StaveTie(params): StaveTie

• Parameters

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

    • Optional first_indices?: number[]

    • Optional from?: null | Note

    • Optional last_indices?: number[]

    • Optional options?: {
          direction?: number;
      }

      • Optional direction?: number

    • Optional text?: string

    • Optional to?: null | Note

  Returns StaveTie

StringNumber

• StringNumber(params, drawCircle?): StringNumber

• Parameters

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

    • number: string

    • position: string

  • drawCircle: boolean = true

  Returns StringNumber

System

• System(params?): System

• Parameters

  • params: SystemOptions = {}

  Returns System

TabNote

• TabNote(noteStruct): TabNote

• Parameters

  • noteStruct: TabNoteStruct

  Returns TabNote

TabStave

• TabStave(params?): TabStave

• Parameters

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

    • Optional options?: StaveOptions

    • Optional width?: number

    • Optional x?: number

    • Optional y?: number

  Returns TabStave

TextBracket

• TextBracket(params): TextBracket

• Parameters

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

    • from: Note

    • options: {
          font?: FontInfo;
          line?: number;
          position: string;
          superscript: string;
      }

      • Optional font?: FontInfo

      • Optional line?: number

      • position: string

      • superscript: string

    • text: string

    • to: Note

  Returns TextBracket

TextDynamics

• TextDynamics(params?): TextDynamics

• Parameters

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

    • Optional dots?: number

    • Optional duration?: string

    • Optional line?: number

    • Optional text?: string

  Returns TextDynamics

TextNote

• TextNote(noteStruct): TextNote

• Parameters

  • noteStruct: TextNoteStruct

  Returns TextNote

TickContext

• TickContext(): TickContext

• Returns TickContext

TimeSigNote

• TimeSigNote(params?): TimeSigNote

• Parameters

  • Optional params: {
        time?: string;
    }

    • Optional time?: string

  Returns TimeSigNote

Tuplet

• Tuplet(params?): Tuplet

• Parameters

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

    • Optional notes?: Note[]

    • Optional options?: TupletOptions

  Returns Tuplet

VibratoBracket

• VibratoBracket(params): VibratoBracket

• Parameters

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

    • from: null | Note

    • options: {
          harsh?: boolean;
          line?: number;
      }

      • Optional harsh?: boolean

      • Optional line?: number

    • to: null | Note

  Returns VibratoBracket

Voice

• Voice(params?): Voice

• Parameters

  • Optional params: {
        time?: string | VoiceTime;
    }

    • Optional time?: string | VoiceTime

  Returns Voice

draw

• draw(): void

• Render the score.

  Returns void

getContext

• getContext(): RenderContext

• Returns RenderContext

getStave

• getStave(): undefined | Stave

• Returns undefined | Stave

getVoices

• getVoices(): Voice[]

• Returns Voice[]

initRenderer

• initRenderer(): void

• Returns void

reset

• reset(): void

• Returns void

setContext

• setContext(context): Factory

• Parameters

  • context: RenderContext

  Returns Factory

setOptions

• setOptions(options?): void

• Parameters

  • Optional options: FactoryOptions

  Returns void

Static newFromElementId

• newFromElementId(elementId, width?, height?): 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 = Vex.Flow.Factory.newFromElementId('boo', 1200, 600 );

  Parameters

  • elementId: null | string

  • width: number = 500

  • height: number = 200

  Returns Factory