vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
1,186 lines • 50.7 kB
HTML
<!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="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="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>
<p><a href="http://vexflow.com">VexFlow</a> - Copyright (c) Mohit Muthanna 2010.
@author Mohit Cheppudira</p>
<h2 id="description">Description</h2>
<p>This file implements a high level API around VexFlow. It will eventually
become the canonical way to use VexFlow.</p>
<p><em>This API is currently DRAFT</em></p>
<div class='highlight'><pre>
<span class="hljs-keyword">import</span> { Vex } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vex'</span>;
<span class="hljs-keyword">import</span> { Accidental } <span class="hljs-keyword">from</span> <span class="hljs-string">'./accidental'</span>;
<span class="hljs-keyword">import</span> { Articulation } <span class="hljs-keyword">from</span> <span class="hljs-string">'./articulation'</span>;
<span class="hljs-keyword">import</span> { Annotation } <span class="hljs-keyword">from</span> <span class="hljs-string">'./annotation'</span>;
<span class="hljs-keyword">import</span> { Formatter } <span class="hljs-keyword">from</span> <span class="hljs-string">'./formatter'</span>;
<span class="hljs-keyword">import</span> { FretHandFinger } <span class="hljs-keyword">from</span> <span class="hljs-string">'./frethandfinger'</span>;
<span class="hljs-keyword">import</span> { StringNumber } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stringnumber'</span>;
<span class="hljs-keyword">import</span> { TextDynamics } <span class="hljs-keyword">from</span> <span class="hljs-string">'./textdynamics'</span>;
<span class="hljs-keyword">import</span> { ModifierContext } <span class="hljs-keyword">from</span> <span class="hljs-string">'./modifiercontext'</span>;
<span class="hljs-keyword">import</span> { MultiMeasureRest } <span class="hljs-keyword">from</span> <span class="hljs-string">'./multimeasurerest'</span>;
<span class="hljs-keyword">import</span> { Renderer } <span class="hljs-keyword">from</span> <span class="hljs-string">'./renderer'</span>;
<span class="hljs-keyword">import</span> { Stave } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stave'</span>;
<span class="hljs-keyword">import</span> { StaveTie } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavetie'</span>;
<span class="hljs-keyword">import</span> { StaveLine } <span class="hljs-keyword">from</span> <span class="hljs-string">'./staveline'</span>;
<span class="hljs-keyword">import</span> { StaveNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavenote'</span>;
<span class="hljs-keyword">import</span> { StaveConnector } <span class="hljs-keyword">from</span> <span class="hljs-string">'./staveconnector'</span>;
<span class="hljs-keyword">import</span> { System } <span class="hljs-keyword">from</span> <span class="hljs-string">'./system'</span>;
<span class="hljs-keyword">import</span> { TickContext } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tickcontext'</span>;
<span class="hljs-keyword">import</span> { Tuplet } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tuplet'</span>;
<span class="hljs-keyword">import</span> { Voice } <span class="hljs-keyword">from</span> <span class="hljs-string">'./voice'</span>;
<span class="hljs-keyword">import</span> { Beam } <span class="hljs-keyword">from</span> <span class="hljs-string">'./beam'</span>;
<span class="hljs-keyword">import</span> { Curve } <span class="hljs-keyword">from</span> <span class="hljs-string">'./curve'</span>;
<span class="hljs-keyword">import</span> { GraceNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./gracenote'</span>;
<span class="hljs-keyword">import</span> { GraceNoteGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">'./gracenotegroup'</span>;
<span class="hljs-keyword">import</span> { NoteSubGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">'./notesubgroup'</span>;
<span class="hljs-keyword">import</span> { EasyScore } <span class="hljs-keyword">from</span> <span class="hljs-string">'./easyscore'</span>;
<span class="hljs-keyword">import</span> { TimeSigNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./timesignote'</span>;
<span class="hljs-keyword">import</span> { KeySigNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./keysignote'</span>;
<span class="hljs-keyword">import</span> { ClefNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./clefnote'</span>;
<span class="hljs-keyword">import</span> { PedalMarking } <span class="hljs-keyword">from</span> <span class="hljs-string">'./pedalmarking'</span>;
<span class="hljs-keyword">import</span> { TextBracket } <span class="hljs-keyword">from</span> <span class="hljs-string">'./textbracket'</span>;
<span class="hljs-keyword">import</span> { VibratoBracket } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vibratobracket'</span>;
<span class="hljs-keyword">import</span> { GhostNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./ghostnote'</span>;
<span class="hljs-keyword">import</span> { BarNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./barnote'</span>;
<span class="hljs-keyword">import</span> { TabNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tabnote'</span>;
<span class="hljs-keyword">import</span> { TabStave } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tabstave'</span>;
<span class="hljs-keyword">import</span> { TextNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./textnote'</span>;</pre></div>
<p>To enable logging for this class. Set <code>Vex.Flow.Factory.DEBUG</code> to <code>true</code>.</p>
<div class='highlight'><pre><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">L</span>(<span class="hljs-params">...args</span>) </span>{ <span class="hljs-keyword">if</span> (Factory.DEBUG) Vex.L(<span class="hljs-string">'Vex.Flow.Factory'</span>, args); }
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> X = Vex.MakeException(<span class="hljs-string">'FactoryError'</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setDefaults</span>(<span class="hljs-params">params = {}, defaults</span>) </span>{
<span class="hljs-keyword">const</span> default_options = defaults.options;
params = <span class="hljs-built_in">Object</span>.assign(defaults, params);
params.options = <span class="hljs-built_in">Object</span>.assign(default_options, params.options);
<span class="hljs-keyword">return</span> params;
}
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Factory</span> </span>{
<span class="hljs-keyword">constructor</span>(options) {
L(<span class="hljs-string">'New factory: '</span>, options);
<span class="hljs-keyword">const</span> defaults = {
<span class="hljs-attr">stave</span>: {
<span class="hljs-attr">space</span>: <span class="hljs-number">10</span>,
},
<span class="hljs-attr">renderer</span>: {
<span class="hljs-attr">context</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">elementId</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">backend</span>: Renderer.Backends.SVG,
<span class="hljs-attr">width</span>: <span class="hljs-number">500</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">background</span>: <span class="hljs-string">'#FFF'</span>,
},
<span class="hljs-attr">font</span>: {
<span class="hljs-attr">face</span>: <span class="hljs-string">'Arial'</span>,
<span class="hljs-attr">point</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">style</span>: <span class="hljs-string">''</span>,
},
};
<span class="hljs-keyword">this</span>.options = defaults;
<span class="hljs-keyword">this</span>.setOptions(options);
}
<span class="hljs-keyword">static</span> newFromElementId(elementId, width = <span class="hljs-number">500</span>, height = <span class="hljs-number">200</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Factory({ <span class="hljs-attr">renderer</span>: { elementId, width, height } });
}
reset() {
<span class="hljs-keyword">this</span>.renderQ = [];
<span class="hljs-keyword">this</span>.systems = [];
<span class="hljs-keyword">this</span>.staves = [];
<span class="hljs-keyword">this</span>.voices = [];
<span class="hljs-keyword">this</span>.stave = <span class="hljs-literal">null</span>; <span class="hljs-comment">// current stave</span>
}
getOptions() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.options; }
setOptions(options) {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> key <span class="hljs-keyword">of</span> [<span class="hljs-string">'stave'</span>, <span class="hljs-string">'renderer'</span>, <span class="hljs-string">'font'</span>]) {
<span class="hljs-built_in">Object</span>.assign(<span class="hljs-keyword">this</span>.options[key], options[key]);
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.options.renderer.elementId !== <span class="hljs-literal">null</span> || <span class="hljs-keyword">this</span>.options.renderer.context) {
<span class="hljs-keyword">this</span>.initRenderer();
}
<span class="hljs-keyword">this</span>.reset();
}
initRenderer() {
<span class="hljs-keyword">const</span> { elementId, backend, width, height, background } = <span class="hljs-keyword">this</span>.options.renderer;
<span class="hljs-keyword">if</span> (elementId === <span class="hljs-string">''</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> X(<span class="hljs-string">'HTML DOM element not set in Factory'</span>);
}
<span class="hljs-keyword">this</span>.context = Renderer.buildContext(elementId, backend, width, height, background);
}
getContext() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.context; }
setContext(context) { <span class="hljs-keyword">this</span>.context = context; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
getStave() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.stave; }
getVoices() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.voices; }</pre></div>
<p>Returns pixels from current stave spacing.</p>
<div class='highlight'><pre> space(spacing) { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.options.stave.space * spacing; }
Stave(params) {
params = setDefaults(params, {
<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">width</span>: <span class="hljs-keyword">this</span>.options.renderer.width - <span class="hljs-keyword">this</span>.space(<span class="hljs-number">1</span>),
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">spacing_between_lines_px</span>: <span class="hljs-keyword">this</span>.options.stave.space,
},
});
<span class="hljs-keyword">const</span> stave = <span class="hljs-keyword">new</span> Stave(params.x, params.y, params.width, params.options);
<span class="hljs-keyword">this</span>.staves.push(stave);
stave.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.stave = stave;
<span class="hljs-keyword">return</span> stave;
}
TabStave(params) {
params = setDefaults(params, {
<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">width</span>: <span class="hljs-keyword">this</span>.options.renderer.width - <span class="hljs-keyword">this</span>.space(<span class="hljs-number">1</span>),
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">spacing_between_lines_px</span>: <span class="hljs-keyword">this</span>.options.stave.space * <span class="hljs-number">1.3</span>,
},
});
<span class="hljs-keyword">const</span> stave = <span class="hljs-keyword">new</span> TabStave(params.x, params.y, params.width, params.options);
<span class="hljs-keyword">this</span>.staves.push(stave);
stave.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.stave = stave;
<span class="hljs-keyword">return</span> stave;
}
StaveNote(noteStruct) {
<span class="hljs-keyword">const</span> note = <span class="hljs-keyword">new</span> StaveNote(noteStruct);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) note.setStave(<span class="hljs-keyword">this</span>.stave);
note.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(note);
<span class="hljs-keyword">return</span> note;
}
GhostNote(noteStruct) {
<span class="hljs-keyword">const</span> ghostNote = <span class="hljs-keyword">new</span> GhostNote(noteStruct);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) ghostNote.setStave(<span class="hljs-keyword">this</span>.stave);
ghostNote.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(ghostNote);
<span class="hljs-keyword">return</span> ghostNote;
}
TextNote(textNoteStruct) {
<span class="hljs-keyword">const</span> textNote = <span class="hljs-keyword">new</span> TextNote(textNoteStruct);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) textNote.setStave(<span class="hljs-keyword">this</span>.stave);
textNote.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(textNote);
<span class="hljs-keyword">return</span> textNote;
}
BarNote(params) {
params = setDefaults(params, {
<span class="hljs-attr">type</span>: <span class="hljs-string">'single'</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> barNote = <span class="hljs-keyword">new</span> BarNote(params.type);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) barNote.setStave(<span class="hljs-keyword">this</span>.stave);
barNote.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(barNote);
<span class="hljs-keyword">return</span> barNote;
}
ClefNote(params) {
params = setDefaults(params, {
<span class="hljs-attr">type</span>: <span class="hljs-string">'treble'</span>,
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">size</span>: <span class="hljs-string">'default'</span>,
},
});
<span class="hljs-keyword">const</span> clefNote = <span class="hljs-keyword">new</span> ClefNote(params.type, params.options.size, params.options.annotation);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) clefNote.setStave(<span class="hljs-keyword">this</span>.stave);
clefNote.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(clefNote);
<span class="hljs-keyword">return</span> clefNote;
}
TimeSigNote(params) {
params = setDefaults(params, {
<span class="hljs-attr">time</span>: <span class="hljs-string">'4/4'</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> timeSigNote = <span class="hljs-keyword">new</span> TimeSigNote(params.time);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) timeSigNote.setStave(<span class="hljs-keyword">this</span>.stave);
timeSigNote.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(timeSigNote);
<span class="hljs-keyword">return</span> timeSigNote;
}
KeySigNote(params) {
<span class="hljs-keyword">const</span> keySigNote = <span class="hljs-keyword">new</span> KeySigNote(params.key, params.cancelKey, params.alterKey);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) keySigNote.setStave(<span class="hljs-keyword">this</span>.stave);
keySigNote.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(keySigNote);
<span class="hljs-keyword">return</span> keySigNote;
}
TabNote(noteStruct) {
<span class="hljs-keyword">const</span> note = <span class="hljs-keyword">new</span> TabNote(noteStruct);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) note.setStave(<span class="hljs-keyword">this</span>.stave);
note.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(note);
<span class="hljs-keyword">return</span> note;
}
GraceNote(noteStruct) {
<span class="hljs-keyword">const</span> note = <span class="hljs-keyword">new</span> GraceNote(noteStruct);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) note.setStave(<span class="hljs-keyword">this</span>.stave);
note.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">return</span> note;
}
GraceNoteGroup(params) {
<span class="hljs-keyword">const</span> group = <span class="hljs-keyword">new</span> GraceNoteGroup(params.notes, params.slur);
group.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">return</span> group;
}
Accidental(params) {
params = setDefaults(params, {
<span class="hljs-attr">type</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> accid = <span class="hljs-keyword">new</span> Accidental(params.type);
accid.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">return</span> accid;
}
Annotation(params) {
params = setDefaults(params, {
<span class="hljs-attr">text</span>: <span class="hljs-string">'p'</span>,
<span class="hljs-attr">vJustify</span>: <span class="hljs-string">'below'</span>,
<span class="hljs-attr">hJustify</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'Times'</span>,
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'bold italic'</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> annotation = <span class="hljs-keyword">new</span> Annotation(params.text);
annotation.setJustification(params.hJustify);
annotation.setVerticalJustification(params.vJustify);
annotation.setFont(params.fontFamily, params.fontSize, params.fontWeight);
annotation.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">return</span> annotation;
}
Articulation(params) {
params = setDefaults(params, {
<span class="hljs-attr">type</span>: <span class="hljs-string">'a.'</span>,
<span class="hljs-attr">position</span>: <span class="hljs-string">'above'</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> articulation = <span class="hljs-keyword">new</span> Articulation(params.type);
articulation.setPosition(params.position);
articulation.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">return</span> articulation;
}
TextDynamics(params) {
params = setDefaults(params, {
<span class="hljs-attr">text</span>: <span class="hljs-string">'p'</span>,
<span class="hljs-attr">duration</span>: <span class="hljs-string">'q'</span>,
<span class="hljs-attr">dots</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> text = <span class="hljs-keyword">new</span> TextDynamics({
<span class="hljs-attr">text</span>: params.text,
<span class="hljs-attr">line</span>: params.line,
<span class="hljs-attr">duration</span>: params.duration,
<span class="hljs-attr">dots</span>: params.dots,
});
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stave) text.setStave(<span class="hljs-keyword">this</span>.stave);
text.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(text);
<span class="hljs-keyword">return</span> text;
}
Fingering(params) {
params = setDefaults(params, {
<span class="hljs-attr">number</span>: <span class="hljs-string">'0'</span>,
<span class="hljs-attr">position</span>: <span class="hljs-string">'left'</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> fingering = <span class="hljs-keyword">new</span> FretHandFinger(params.number);
fingering.setPosition(params.position);
fingering.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">return</span> fingering;
}
StringNumber(params) {
params = setDefaults(params, {
<span class="hljs-attr">number</span>: <span class="hljs-string">'0'</span>,
<span class="hljs-attr">position</span>: <span class="hljs-string">'left'</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> stringNumber = <span class="hljs-keyword">new</span> StringNumber(params.number);
stringNumber.setPosition(params.position);
stringNumber.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">return</span> stringNumber;
}
TickContext() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> TickContext().setContext(<span class="hljs-keyword">this</span>.context);
}
ModifierContext() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> ModifierContext();
}
MultiMeasureRest(params) {
<span class="hljs-keyword">const</span> multimeasurerest = <span class="hljs-keyword">new</span> MultiMeasureRest(params.number_of_measures, params);
multimeasurerest.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(multimeasurerest);
<span class="hljs-keyword">return</span> multimeasurerest;
}
Voice(params) {
params = setDefaults(params, {
<span class="hljs-attr">time</span>: <span class="hljs-string">'4/4'</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> voice = <span class="hljs-keyword">new</span> Voice(params.time);
<span class="hljs-keyword">this</span>.voices.push(voice);
<span class="hljs-keyword">return</span> voice;
}
StaveConnector(params) {
params = setDefaults(params, {
<span class="hljs-attr">top_stave</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">bottom_stave</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'double'</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> connector = <span class="hljs-keyword">new</span> StaveConnector(params.top_stave, params.bottom_stave);
connector.setType(params.type).setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(connector);
<span class="hljs-keyword">return</span> connector;
}
Formatter() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Formatter();
}
Tuplet(params) {
params = setDefaults(params, {
<span class="hljs-attr">notes</span>: [],
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> tuplet = <span class="hljs-keyword">new</span> Tuplet(params.notes, params.options).setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(tuplet);
<span class="hljs-keyword">return</span> tuplet;
}
Beam(params) {
params = setDefaults(params, {
<span class="hljs-attr">notes</span>: [],
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">autoStem</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">secondaryBeamBreaks</span>: [],
},
});
<span class="hljs-keyword">const</span> beam = <span class="hljs-keyword">new</span> Beam(params.notes, params.options.autoStem).setContext(<span class="hljs-keyword">this</span>.context);
beam.breakSecondaryAt(params.options.secondaryBeamBreaks);
<span class="hljs-keyword">this</span>.renderQ.push(beam);
<span class="hljs-keyword">return</span> beam;
}
Curve(params) {
params = setDefaults(params, {
<span class="hljs-attr">from</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">to</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> curve = <span class="hljs-keyword">new</span> Curve(params.from, params.to, params.options).setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(curve);
<span class="hljs-keyword">return</span> curve;
}
StaveTie(params) {
params = setDefaults(params, {
<span class="hljs-attr">from</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">to</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">first_indices</span>: [<span class="hljs-number">0</span>],
<span class="hljs-attr">last_indices</span>: [<span class="hljs-number">0</span>],
<span class="hljs-attr">text</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">direction</span>: <span class="hljs-literal">undefined</span>,
},
});
<span class="hljs-keyword">const</span> tie = <span class="hljs-keyword">new</span> StaveTie({
<span class="hljs-attr">first_note</span>: params.from,
<span class="hljs-attr">last_note</span>: params.to,
<span class="hljs-attr">first_indices</span>: params.first_indices,
<span class="hljs-attr">last_indices</span>: params.last_indices,
}, params.text);
<span class="hljs-keyword">if</span> (params.options.direction) tie.setDirection(params.options.direction);
tie.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(tie);
<span class="hljs-keyword">return</span> tie;
}
StaveLine(params) {
params = setDefaults(params, {
<span class="hljs-attr">from</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">to</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">first_indices</span>: [<span class="hljs-number">0</span>],
<span class="hljs-attr">last_indices</span>: [<span class="hljs-number">0</span>],
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> line = <span class="hljs-keyword">new</span> StaveLine({
<span class="hljs-attr">first_note</span>: params.from,
<span class="hljs-attr">last_note</span>: params.to,
<span class="hljs-attr">first_indices</span>: params.first_indices,
<span class="hljs-attr">last_indices</span>: params.last_indices,
});
<span class="hljs-keyword">if</span> (params.options.text) line.setText(params.options.text);
<span class="hljs-keyword">if</span> (params.options.font) line.setFont(params.options.font);
line.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(line);
<span class="hljs-keyword">return</span> line;
}
VibratoBracket(params) {
params = setDefaults(params, {
<span class="hljs-attr">from</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">to</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">harsh</span>: <span class="hljs-literal">false</span>,
},
});
<span class="hljs-keyword">const</span> vibratoBracket = <span class="hljs-keyword">new</span> VibratoBracket({
<span class="hljs-attr">start</span>: params.from,
<span class="hljs-attr">stop</span>: params.to,
});
<span class="hljs-keyword">if</span> (params.options.line) vibratoBracket.setLine(params.options.line);
<span class="hljs-keyword">if</span> (params.options.harsh) vibratoBracket.setHarsh(params.options.harsh);
vibratoBracket.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(vibratoBracket);
<span class="hljs-keyword">return</span> vibratoBracket;
}
TextBracket(params) {
params = setDefaults(params, {
<span class="hljs-attr">from</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">to</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">superscript</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">position</span>: <span class="hljs-number">1</span>,
},
});
<span class="hljs-keyword">const</span> textBracket = <span class="hljs-keyword">new</span> TextBracket({
<span class="hljs-attr">start</span>: params.from,
<span class="hljs-attr">stop</span>: params.to,
<span class="hljs-attr">text</span>: params.text,
<span class="hljs-attr">superscript</span>: params.options.superscript,
<span class="hljs-attr">position</span>: params.options.position,
});
<span class="hljs-keyword">if</span> (params.options.line) textBracket.setLine(params.options.line);
<span class="hljs-keyword">if</span> (params.options.font) textBracket.setFont(params.options.font);
textBracket.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(textBracket);
<span class="hljs-keyword">return</span> textBracket;
}
System(params = {}) {
params.factory = <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">const</span> system = <span class="hljs-keyword">new</span> System(params).setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.systems.push(system);
<span class="hljs-keyword">return</span> system;
}
EasyScore(params = {}) {
params.factory = <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> EasyScore(params);
}
PedalMarking(params = {}) {
params = setDefaults(params, {
<span class="hljs-attr">notes</span>: [],
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">style</span>: <span class="hljs-string">'mixed'</span>,
},
});
<span class="hljs-keyword">const</span> pedal = <span class="hljs-keyword">new</span> PedalMarking(params.notes);
pedal.setStyle(PedalMarking.StylesString[params.options.style]);
pedal.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">this</span>.renderQ.push(pedal);
<span class="hljs-keyword">return</span> pedal;
}
NoteSubGroup(params = {}) {
params = setDefaults(params, {
<span class="hljs-attr">notes</span>: [],
<span class="hljs-attr">options</span>: {},
});
<span class="hljs-keyword">const</span> group = <span class="hljs-keyword">new</span> NoteSubGroup(params.notes);
group.setContext(<span class="hljs-keyword">this</span>.context);
<span class="hljs-keyword">return</span> group;
}
draw() {
<span class="hljs-keyword">this</span>.systems.forEach(<span class="hljs-function"><span class="hljs-params">i</span> =></span> i.setContext(<span class="hljs-keyword">this</span>.context).format());
<span class="hljs-keyword">this</span>.staves.forEach(<span class="hljs-function"><span class="hljs-params">i</span> =></span> i.setContext(<span class="hljs-keyword">this</span>.context).draw());
<span class="hljs-keyword">this</span>.voices.forEach(<span class="hljs-function"><span class="hljs-params">i</span> =></span> i.setContext(<span class="hljs-keyword">this</span>.context).draw());
<span class="hljs-keyword">this</span>.renderQ.forEach(<span class="hljs-function"><span class="hljs-params">i</span> =></span> {
<span class="hljs-keyword">if</span> (!i.isRendered()) i.setContext(<span class="hljs-keyword">this</span>.context).draw();
});
<span class="hljs-keyword">this</span>.systems.forEach(<span class="hljs-function"><span class="hljs-params">i</span> =></span> i.setContext(<span class="hljs-keyword">this</span>.context).draw());
<span class="hljs-keyword">this</span>.reset();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>