vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
787 lines (570 loc) • 26.2 kB
HTML
<html>
<head>
<title>system.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>system.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>
<p><a href="http://vexflow.com">VexFlow</a> - Copyright (c) Mohit Muthanna 2010.</p>
<p>This class implements a musical system, which is a collection of staves,
each which can have one or more voices. All voices across all staves in
the system are formatted together.</p>
<div class='highlight'><pre>
<span class="hljs-keyword">import</span> { Element } <span class="hljs-keyword">from</span> <span class="hljs-string">'./element'</span>;
<span class="hljs-keyword">import</span> { Factory } <span class="hljs-keyword">from</span> <span class="hljs-string">'./factory'</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> { Note } <span class="hljs-keyword">from</span> <span class="hljs-string">'./note'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">System</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Element</span> </span>{
<span class="hljs-keyword">constructor</span>(params = {}) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'System'</span>);
<span class="hljs-keyword">this</span>.setOptions(params);
<span class="hljs-keyword">this</span>.parts = [];
}
setOptions(options = {}) {
<span class="hljs-keyword">this</span>.options = {
<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">y</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">width</span>: <span class="hljs-number">500</span>,
<span class="hljs-attr">connector</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">spaceBetweenStaves</span>: <span class="hljs-number">12</span>, <span class="hljs-comment">// stave spaces</span>
factory: <span class="hljs-literal">null</span>,
<span class="hljs-attr">noJustification</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">debugFormatter</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">formatIterations</span>: <span class="hljs-number">0</span>, <span class="hljs-comment">// number of formatter tuning steps</span>
noPadding: <span class="hljs-literal">false</span>,
...options,
<span class="hljs-attr">details</span>: {
<span class="hljs-attr">alpha</span>: <span class="hljs-number">0.5</span>, <span class="hljs-comment">// formatter tuner learning/shifting rate</span>
...options.details,
},
};
<span class="hljs-keyword">this</span>.factory = <span class="hljs-keyword">this</span>.options.factory || <span class="hljs-keyword">new</span> Factory({ <span class="hljs-attr">renderer</span>: { <span class="hljs-attr">el</span>: <span class="hljs-literal">null</span> } });
}
setContext(context) {
<span class="hljs-keyword">super</span>.setContext(context);
<span class="hljs-keyword">this</span>.factory.setContext(context);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
addConnector(type = <span class="hljs-string">'double'</span>) {
<span class="hljs-keyword">this</span>.connector = <span class="hljs-keyword">this</span>.factory.StaveConnector({
<span class="hljs-attr">top_stave</span>: <span class="hljs-keyword">this</span>.parts[<span class="hljs-number">0</span>].stave,
<span class="hljs-attr">bottom_stave</span>: <span class="hljs-keyword">this</span>.parts[<span class="hljs-keyword">this</span>.parts.length - <span class="hljs-number">1</span>].stave,
type,
});
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.connector;
}
addStave(params) {
params = {
<span class="hljs-attr">stave</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">voices</span>: [],
<span class="hljs-attr">spaceAbove</span>: <span class="hljs-number">0</span>, <span class="hljs-comment">// stave spaces</span>
spaceBelow: <span class="hljs-number">0</span>, <span class="hljs-comment">// stave spaces</span>
debugNoteMetrics: <span class="hljs-literal">false</span>,
...params,
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">left_bar</span>: <span class="hljs-literal">false</span>,
...params.options,
},
};
<span class="hljs-keyword">if</span> (!params.stave) {
params.stave = <span class="hljs-keyword">this</span>.factory.Stave({
<span class="hljs-attr">x</span>: <span class="hljs-keyword">this</span>.options.x,
<span class="hljs-attr">y</span>: <span class="hljs-keyword">this</span>.options.y,
<span class="hljs-attr">width</span>: <span class="hljs-keyword">this</span>.options.width,
<span class="hljs-attr">options</span>: params.options,
});
}
params.voices.forEach(<span class="hljs-function"><span class="hljs-params">voice</span> =></span>
voice
.setContext(<span class="hljs-keyword">this</span>.context)
.setStave(params.stave)
.getTickables()
.forEach(<span class="hljs-function"><span class="hljs-params">tickable</span> =></span> tickable.setStave(params.stave))
);
<span class="hljs-keyword">this</span>.parts.push(params);
<span class="hljs-keyword">return</span> params.stave;
}
format() {
<span class="hljs-keyword">const</span> formatter = <span class="hljs-keyword">new</span> Formatter({ ...this.options.details });
<span class="hljs-keyword">this</span>.formatter = formatter;
<span class="hljs-keyword">let</span> y = <span class="hljs-keyword">this</span>.options.y;
<span class="hljs-keyword">let</span> startX = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> allVoices = [];
<span class="hljs-keyword">const</span> debugNoteMetricsYs = [];</pre></div>
<p>Join the voices for each stave.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.parts.forEach(<span class="hljs-function"><span class="hljs-params">part</span> =></span> {
y = y + part.stave.space(part.spaceAbove);
part.stave.setY(y);
formatter.joinVoices(part.voices);
y = y + part.stave.space(part.spaceBelow);
y = y + part.stave.space(<span class="hljs-keyword">this</span>.options.spaceBetweenStaves);
<span class="hljs-keyword">if</span> (part.debugNoteMetrics) {
debugNoteMetricsYs.push({ y, <span class="hljs-attr">voice</span>: part.voices[<span class="hljs-number">0</span>] });
y += <span class="hljs-number">15</span>;
}
allVoices = allVoices.concat(part.voices);
startX = <span class="hljs-built_in">Math</span>.max(startX, part.stave.getNoteStartX());
});</pre></div>
<p>Update the start position of all staves.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.parts.forEach(<span class="hljs-function"><span class="hljs-params">part</span> =></span> part.stave.setNoteStartX(startX));
<span class="hljs-keyword">const</span> justifyWidth = <span class="hljs-keyword">this</span>.options.noPadding ?
<span class="hljs-keyword">this</span>.options.width - <span class="hljs-keyword">this</span>.options.x :
<span class="hljs-keyword">this</span>.options.width - (startX - <span class="hljs-keyword">this</span>.options.x) - <span class="hljs-keyword">this</span>.musicFont.lookupMetric(<span class="hljs-string">'stave.padding'</span>);
formatter.format(allVoices, <span class="hljs-keyword">this</span>.options.noJustification ? <span class="hljs-number">0</span> : justifyWidth);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.options.formatIterations; i++) {
formatter.tune({ <span class="hljs-attr">alpha</span>: <span class="hljs-keyword">this</span>.options.details.alpha });
}
<span class="hljs-keyword">this</span>.startX = startX;
<span class="hljs-keyword">this</span>.debugNoteMetricsYs = debugNoteMetricsYs;
<span class="hljs-keyword">this</span>.lastY = y;
}
draw() {</pre></div>
<p>Render debugging information, if requested.</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> ctx = <span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.options.debugFormatter) {
Formatter.plotDebugging(ctx, <span class="hljs-keyword">this</span>.formatter, <span class="hljs-keyword">this</span>.startX, <span class="hljs-keyword">this</span>.options.y, <span class="hljs-keyword">this</span>.lastY);
}
<span class="hljs-keyword">this</span>.debugNoteMetricsYs.forEach(<span class="hljs-function"><span class="hljs-params">d</span> =></span> {
d.voice.getTickables().forEach(<span class="hljs-function"><span class="hljs-params">note</span> =></span> Note.plotMetrics(ctx, note, d.y));
});
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>