vexflow

<!DOCTYPE html> <html> <head> <title>factory.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" /> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div class="container"> <div class="page"> <div class="header"> <h1>factory.js</h1> <div class="toc"> <h3>Table of Contents</h3> <ol> <li> <a class="source" href="accidental.html"> accidental.js </a> </li> <li> <a class="source" href="annotation.html"> annotation.js </a> </li> <li> <a class="source" href="articulation.html"> articulation.js </a> </li> <li> <a class="source" href="barnote.html"> barnote.js </a> </li> <li> <a class="source" href="beam.html"> beam.js </a> </li> <li> <a class="source" href="bend.html"> bend.js </a> </li> <li> <a class="source" href="boundingbox.html"> boundingbox.js </a> </li> <li> <a class="source" href="boundingboxcomputation.html"> boundingboxcomputation.js </a> </li> <li> <a class="source" href="canvascontext.html"> canvascontext.js </a> </li> <li> <a class="source" href="clef.html"> clef.js </a> </li> <li> <a class="source" href="clefnote.html"> clefnote.js </a> </li> <li> <a class="source" href="crescendo.html"> crescendo.js </a> </li> <li> <a class="source" href="curve.html"> curve.js </a> </li> <li> <a class="source" href="dot.html"> dot.js </a> </li> <li> <a class="source" href="easyscore.html"> easyscore.js </a> </li> <li> <a class="source" href="element.html"> element.js </a> </li> <li> <a class="source" href="factory.html"> factory.js </a> </li> <li> <a class="source" href="formatter.html"> formatter.js </a> </li> <li> <a class="source" href="fraction.html"> fraction.js </a> </li> <li> <a class="source" href="frethandfinger.html"> frethandfinger.js </a> </li> <li> <a class="source" href="ghostnote.html"> ghostnote.js </a> </li> <li> <a class="source" href="glyph.html"> glyph.js </a> </li> <li> <a class="source" href="glyphnote.html"> glyphnote.js </a> </li> <li> <a class="source" href="gracenote.html"> gracenote.js </a> </li> <li> <a class="source" href="gracenotegroup.html"> gracenotegroup.js </a> </li> <li> <a class="source" href="gracetabnote.html"> gracetabnote.js </a> </li> <li> <a class="source" href="index.html"> index.js </a> </li> <li> <a class="source" href="keymanager.html"> keymanager.js </a> </li> <li> <a class="source" href="keysignature.html"> keysignature.js </a> </li> <li> <a class="source" href="keysignote.html"> keysignote.js </a> </li> <li> <a class="source" href="modifier.html"> modifier.js </a> </li> <li> <a class="source" href="modifiercontext.html"> modifiercontext.js </a> </li> <li> <a class="source" href="multimeasurerest.html"> multimeasurerest.js </a> </li> <li> <a class="source" href="music.html"> music.js </a> </li> <li> <a class="source" href="note.html"> note.js </a> </li> <li> <a class="source" href="notehead.html"> notehead.js </a> </li> <li> <a class="source" href="notesubgroup.html"> notesubgroup.js </a> </li> <li> <a class="source" href="ornament.html"> ornament.js </a> </li> <li> <a class="source" href="parser.html"> parser.js </a> </li> <li> <a class="source" href="pedalmarking.html"> pedalmarking.js </a> </li> <li> <a class="source" href="raphaelcontext.html"> raphaelcontext.js </a> </li> <li> <a class="source" href="registry.html"> registry.js </a> </li> <li> <a class="source" href="renderer.html"> renderer.js </a> </li> <li> <a class="source" href="repeatnote.html"> repeatnote.js </a> </li> <li> <a class="source" href="smufl.html"> smufl.js </a> </li> <li> <a class="source" href="stave.html"> stave.js </a> </li> <li> <a class="source" href="stavebarline.html"> stavebarline.js </a> </li> <li> <a class="source" href="staveconnector.html"> staveconnector.js </a> </li> <li> <a class="source" href="stavehairpin.html"> stavehairpin.js </a> </li> <li> <a class="source" href="staveline.html"> staveline.js </a> </li> <li> <a class="source" href="stavemodifier.html"> stavemodifier.js </a> </li> <li> <a class="source" href="stavenote.html"> stavenote.js </a> </li> <li> <a class="source" href="staverepetition.html"> staverepetition.js </a> </li> <li> <a class="source" href="stavesection.html"> stavesection.js </a> </li> <li> <a class="source" href="stavetempo.html"> stavetempo.js </a> </li> <li> <a class="source" href="stavetext.html"> stavetext.js </a> </li> <li> <a class="source" href="stavetie.html"> stavetie.js </a> </li> <li> <a class="source" href="stavevolta.html"> stavevolta.js </a> </li> <li> <a class="source" href="stem.html"> stem.js </a> </li> <li> <a class="source" href="stemmablenote.html"> stemmablenote.js </a> </li> <li> <a class="source" href="stringnumber.html"> stringnumber.js </a> </li> <li> <a class="source" href="strokes.html"> strokes.js </a> </li> <li> <a class="source" href="svgcontext.html"> svgcontext.js </a> </li> <li> <a class="source" href="system.html"> system.js </a> </li> <li> <a class="source" href="tables.html"> tables.js </a> </li> <li> <a class="source" href="tabnote.html"> tabnote.js </a> </li> <li> <a class="source" href="tabslide.html"> tabslide.js </a> </li> <li> <a class="source" href="tabstave.html"> tabstave.js </a> </li> <li> <a class="source" href="tabtie.html"> tabtie.js </a> </li> <li> <a class="source" href="textbracket.html"> textbracket.js </a> </li> <li> <a class="source" href="textdynamics.html"> textdynamics.js </a> </li> <li> <a class="source" href="textnote.html"> textnote.js </a> </li> <li> <a class="source" href="tickable.html"> tickable.js </a> </li> <li> <a class="source" href="tickcontext.html"> tickcontext.js </a> </li> <li> <a class="source" href="timesignature.html"> timesignature.js </a> </li> <li> <a class="source" href="timesignote.html"> timesignote.js </a> </li> <li> <a class="source" href="tremolo.html"> tremolo.js </a> </li> <li> <a class="source" href="tuning.html"> tuning.js </a> </li> <li> <a class="source" href="tuplet.html"> tuplet.js </a> </li> <li> <a class="source" href="vex.html"> vex.js </a> </li> <li> <a class="source" href="vibrato.html"> vibrato.js </a> </li> <li> <a class="source" href="vibratobracket.html"> vibratobracket.js </a> </li> <li> <a class="source" href="voice.html"> voice.js </a> </li> <li> <a class="source" href="voicegroup.html"> voicegroup.js </a> </li> </ol> </div> </div> <a href="http://vexflow.com">VexFlow</a> - Copyright (c) Mohit Muthanna 2010. @author Mohit Cheppudira <h2 id="description">Description</h2> This file implements a high level API around VexFlow. It will eventually become the canonical way to use VexFlow. This API is currently DRAFT <div class='highlight'><pre> import { Vex } from './vex'; import { Accidental } from './accidental'; import { Articulation } from './articulation'; import { Annotation } from './annotation'; import { Formatter } from './formatter'; import { FretHandFinger } from './frethandfinger'; import { StringNumber } from './stringnumber'; import { TextDynamics } from './textdynamics'; import { ModifierContext } from './modifiercontext'; import { MultiMeasureRest } from './multimeasurerest'; import { Renderer } from './renderer'; import { Stave } from './stave'; import { StaveTie } from './stavetie'; import { StaveLine } from './staveline'; import { StaveNote } from './stavenote'; import { GlyphNote } from './glyphnote'; import { RepeatNote } from './repeatnote'; import { StaveConnector } from './staveconnector'; import { System } from './system'; import { TickContext } from './tickcontext'; import { Tuplet } from './tuplet'; import { Voice } from './voice'; import { Beam } from './beam'; import { Curve } from './curve'; import { GraceNote } from './gracenote'; import { GraceNoteGroup } from './gracenotegroup'; import { NoteSubGroup } from './notesubgroup'; import { EasyScore } from './easyscore'; import { TimeSigNote } from './timesignote'; import { KeySigNote } from './keysignote'; import { ClefNote } from './clefnote'; import { PedalMarking } from './pedalmarking'; import { TextBracket } from './textbracket'; import { VibratoBracket } from './vibratobracket'; import { GhostNote } from './ghostnote'; import { BarNote } from './barnote'; import { TabNote } from './tabnote'; import { TabStave } from './tabstave'; import { TextNote } from './textnote';</pre></div> To enable logging for this class. Set <code>Vex.Flow.Factory.DEBUG</code> to <code>true</code>. <div class='highlight'><pre>function L(...args) { if (Factory.DEBUG) Vex.L('Vex.Flow.Factory', args); } export const X = Vex.MakeException('FactoryError'); function setDefaults(params = {}, defaults) { const default_options = defaults.options; params = Object.assign(defaults, params); params.options = Object.assign(default_options, params.options); return params; } export class Factory { constructor(options) { L('New factory: ', options); const defaults = { stave: { space: 10, }, renderer: { context: null, elementId: '', backend: Renderer.Backends.SVG, width: 500, height: 200, background: '#FFF', }, font: { face: 'Arial', point: 10, style: '', }, }; this.options = defaults; this.setOptions(options); } static newFromElementId(elementId, width = 500, height = 200) { return new Factory({ renderer: { elementId, width, height } }); } reset() { this.renderQ = []; this.systems = []; this.staves = []; this.voices = []; this.stave = null; // current stave } getOptions() { return this.options; } setOptions(options) { for (const key of ['stave', 'renderer', 'font']) { Object.assign(this.options[key], options[key]); } if (this.options.renderer.elementId !== null || this.options.renderer.context) { this.initRenderer(); } this.reset(); } initRenderer() { const { elementId, backend, width, height, background } = this.options.renderer; if (elementId === '') { throw new X('HTML DOM element not set in Factory'); } this.context = Renderer.buildContext(elementId, backend, width, height, background); } getContext() { return this.context; } setContext(context) { this.context = context; return this; } getStave() { return this.stave; } getVoices() { return this.voices; }</pre></div> Returns pixels from current stave spacing. <div class='highlight'><pre> space(spacing) { return this.options.stave.space * spacing; } Stave(params) { params = setDefaults(params, { x: 0, y: 0, width: this.options.renderer.width - this.space(1), options: { spacing_between_lines_px: this.options.stave.space, }, }); const stave = new Stave(params.x, params.y, params.width, params.options); this.staves.push(stave); stave.setContext(this.context); this.stave = stave; return stave; } TabStave(params) { params = setDefaults(params, { x: 0, y: 0, width: this.options.renderer.width - this.space(1), options: { spacing_between_lines_px: this.options.stave.space * 1.3, }, }); const stave = new TabStave(params.x, params.y, params.width, params.options); this.staves.push(stave); stave.setContext(this.context); this.stave = stave; return stave; } StaveNote(noteStruct) { const note = new StaveNote(noteStruct); if (this.stave) note.setStave(this.stave); note.setContext(this.context); this.renderQ.push(note); return note; } GlyphNote(glyph, noteStruct, options) { const note = new GlyphNote(glyph, noteStruct, options); if (this.stave) note.setStave(this.stave); note.setContext(this.context); this.renderQ.push(note); return note; } RepeatNote(type, noteStruct, options) { const note = new RepeatNote(type, noteStruct, options); if (this.stave) note.setStave(this.stave); note.setContext(this.context); this.renderQ.push(note); return note; } GhostNote(noteStruct) { const ghostNote = new GhostNote(noteStruct); if (this.stave) ghostNote.setStave(this.stave); ghostNote.setContext(this.context); this.renderQ.push(ghostNote); return ghostNote; } TextNote(textNoteStruct) { const textNote = new TextNote(textNoteStruct); if (this.stave) textNote.setStave(this.stave); textNote.setContext(this.context); this.renderQ.push(textNote); return textNote; } BarNote(params) { params = setDefaults(params, { type: 'single', options: {}, }); const barNote = new BarNote(params.type); if (this.stave) barNote.setStave(this.stave); barNote.setContext(this.context); this.renderQ.push(barNote); return barNote; } ClefNote(params) { params = setDefaults(params, { type: 'treble', options: { size: 'default', }, }); const clefNote = new ClefNote(params.type, params.options.size, params.options.annotation); if (this.stave) clefNote.setStave(this.stave); clefNote.setContext(this.context); this.renderQ.push(clefNote); return clefNote; } TimeSigNote(params) { params = setDefaults(params, { time: '4/4', options: {}, }); const timeSigNote = new TimeSigNote(params.time); if (this.stave) timeSigNote.setStave(this.stave); timeSigNote.setContext(this.context); this.renderQ.push(timeSigNote); return timeSigNote; } KeySigNote(params) { const keySigNote = new KeySigNote(params.key, params.cancelKey, params.alterKey); if (this.stave) keySigNote.setStave(this.stave); keySigNote.setContext(this.context); this.renderQ.push(keySigNote); return keySigNote; } TabNote(noteStruct) { const note = new TabNote(noteStruct); if (this.stave) note.setStave(this.stave); note.setContext(this.context); this.renderQ.push(note); return note; } GraceNote(noteStruct) { const note = new GraceNote(noteStruct); if (this.stave) note.setStave(this.stave); note.setContext(this.context); return note; } GraceNoteGroup(params) { const group = new GraceNoteGroup(params.notes, params.slur); group.setContext(this.context); return group; } Accidental(params) { params = setDefaults(params, { type: null, options: {}, }); const accid = new Accidental(params.type); accid.setContext(this.context); return accid; } Annotation(params) { params = setDefaults(params, { text: 'p', vJustify: 'below', hJustify: 'center', fontFamily: 'Times', fontSize: 14, fontWeight: 'bold italic', options: {}, }); const annotation = new Annotation(params.text); annotation.setJustification(params.hJustify); annotation.setVerticalJustification(params.vJustify); annotation.setFont(params.fontFamily, params.fontSize, params.fontWeight); annotation.setContext(this.context); return annotation; } Articulation(params) { params = setDefaults(params, { type: 'a.', position: 'above', options: {}, }); const articulation = new Articulation(params.type); articulation.setPosition(params.position); articulation.setContext(this.context); return articulation; } TextDynamics(params) { params = setDefaults(params, { text: 'p', duration: 'q', dots: 0, line: 0, options: {}, }); const text = new TextDynamics({ text: params.text, line: params.line, duration: params.duration, dots: params.dots, }); if (this.stave) text.setStave(this.stave); text.setContext(this.context); this.renderQ.push(text); return text; } Fingering(params) { params = setDefaults(params, { number: '0', position: 'left', options: {}, }); const fingering = new FretHandFinger(params.number); fingering.setPosition(params.position); fingering.setContext(this.context); return fingering; } StringNumber(params) { params = setDefaults(params, { number: '0', position: 'left', options: {}, }); const stringNumber = new StringNumber(params.number); stringNumber.setPosition(params.position); stringNumber.setContext(this.context); return stringNumber; } TickContext() { return new TickContext().setContext(this.context); } ModifierContext() { return new ModifierContext(); } MultiMeasureRest(params) { const multimeasurerest = new MultiMeasureRest(params.number_of_measures, params); multimeasurerest.setContext(this.context); this.renderQ.push(multimeasurerest); return multimeasurerest; } Voice(params) { params = setDefaults(params, { time: '4/4', options: {}, }); const voice = new Voice(params.time, params.options); this.voices.push(voice); return voice; } StaveConnector(params) { params = setDefaults(params, { top_stave: null, bottom_stave: null, type: 'double', options: {}, }); const connector = new StaveConnector(params.top_stave, params.bottom_stave); connector.setType(params.type).setContext(this.context); this.renderQ.push(connector); return connector; } Formatter() { return new Formatter(); } Tuplet(params) { params = setDefaults(params, { notes: [], options: {}, }); const tuplet = new Tuplet(params.notes, params.options).setContext(this.context); this.renderQ.push(tuplet); return tuplet; } Beam(params) { params = setDefaults(params, { notes: [], options: { autoStem: false, secondaryBeamBreaks: [], }, }); const beam = new Beam(params.notes, params.options.autoStem).setContext(this.context); beam.breakSecondaryAt(params.options.secondaryBeamBreaks); this.renderQ.push(beam); return beam; } Curve(params) { params = setDefaults(params, { from: null, to: null, options: {}, }); const curve = new Curve(params.from, params.to, params.options).setContext(this.context); this.renderQ.push(curve); return curve; } StaveTie(params) { params = setDefaults(params, { from: null, to: null, first_indices: [0], last_indices: [0], text: null, options: { direction: undefined, }, }); const tie = new StaveTie({ first_note: params.from, last_note: params.to, first_indices: params.first_indices, last_indices: params.last_indices, }, params.text); if (params.options.direction) tie.setDirection(params.options.direction); tie.setContext(this.context); this.renderQ.push(tie); return tie; } StaveLine(params) { params = setDefaults(params, { from: null, to: null, first_indices: [0], last_indices: [0], options: {}, }); const line = new StaveLine({ first_note: params.from, last_note: params.to, first_indices: params.first_indices, last_indices: params.last_indices, }); if (params.options.text) line.setText(params.options.text); if (params.options.font) line.setFont(params.options.font); line.setContext(this.context); this.renderQ.push(line); return line; } VibratoBracket(params) { params = setDefaults(params, { from: null, to: null, options: { harsh: false, }, }); const vibratoBracket = new VibratoBracket({ start: params.from, stop: params.to, }); if (params.options.line) vibratoBracket.setLine(params.options.line); if (params.options.harsh) vibratoBracket.setHarsh(params.options.harsh); vibratoBracket.setContext(this.context); this.renderQ.push(vibratoBracket); return vibratoBracket; } TextBracket(params) { params = setDefaults(params, { from: null, to: null, text: '', options: { superscript: '', position: 1, }, }); const textBracket = new TextBracket({ start: params.from, stop: params.to, text: params.text, superscript: params.options.superscript, position: params.options.position, }); if (params.options.line) textBracket.setLine(params.options.line); if (params.options.font) textBracket.setFont(params.options.font); textBracket.setContext(this.context); this.renderQ.push(textBracket); return textBracket; } System(params = {}) { params.factory = this; const system = new System(params).setContext(this.context); this.systems.push(system);