vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
1,256 lines (859 loc) • 77.3 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>beam.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>beam.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>
<h2 id="description">Description</h2>
<p>This file implements <code>Beams</code> that span over a set of <code>StemmableNotes</code>.</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> { Flow } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tables'</span>;
<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> { Fraction } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fraction'</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> { Stem } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stem'</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">calculateStemDirection</span>(<span class="hljs-params">notes</span>) </span>{
<span class="hljs-keyword">let</span> lineSum = <span class="hljs-number">0</span>;
notes.forEach(<span class="hljs-function"><span class="hljs-params">note</span> =></span> {
<span class="hljs-keyword">if</span> (note.keyProps) {
note.keyProps.forEach(<span class="hljs-function"><span class="hljs-params">keyProp</span> =></span> {
lineSum += (keyProp.line - <span class="hljs-number">3</span>);
});
}
});
<span class="hljs-keyword">if</span> (lineSum >= <span class="hljs-number">0</span>) {
<span class="hljs-keyword">return</span> Stem.DOWN;
}
<span class="hljs-keyword">return</span> Stem.UP;
}
<span class="hljs-keyword">const</span> getStemSlope = <span class="hljs-function">(<span class="hljs-params">firstNote, lastNote</span>) =></span> {
<span class="hljs-keyword">const</span> firstStemTipY = firstNote.getStemExtents().topY;
<span class="hljs-keyword">const</span> firstStemX = firstNote.getStemX();
<span class="hljs-keyword">const</span> lastStemTipY = lastNote.getStemExtents().topY;
<span class="hljs-keyword">const</span> lastStemX = lastNote.getStemX();
<span class="hljs-keyword">return</span> (lastStemTipY - firstStemTipY) / (lastStemX - firstStemX);
};
<span class="hljs-keyword">const</span> BEAM_LEFT = <span class="hljs-string">'L'</span>;
<span class="hljs-keyword">const</span> BEAM_RIGHT = <span class="hljs-string">'R'</span>;
<span class="hljs-keyword">const</span> BEAM_BOTH = <span class="hljs-string">'B'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Beam</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Element</span> </span>{</pre></div>
<p>Gets the default beam groups for a provided time signature.
Attempts to guess if the time signature is not found in table.
Currently this is fairly naive.</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> getDefaultBeamGroups(time_sig) {
<span class="hljs-keyword">if</span> (!time_sig || time_sig === <span class="hljs-string">'c'</span>) {
time_sig = <span class="hljs-string">'4/4'</span>;
}
<span class="hljs-keyword">const</span> defaults = {
<span class="hljs-string">'1/2'</span>: [<span class="hljs-string">'1/2'</span>],
<span class="hljs-string">'2/2'</span>: [<span class="hljs-string">'1/2'</span>],
<span class="hljs-string">'3/2'</span>: [<span class="hljs-string">'1/2'</span>],
<span class="hljs-string">'4/2'</span>: [<span class="hljs-string">'1/2'</span>],
<span class="hljs-string">'1/4'</span>: [<span class="hljs-string">'1/4'</span>],
<span class="hljs-string">'2/4'</span>: [<span class="hljs-string">'1/4'</span>],
<span class="hljs-string">'3/4'</span>: [<span class="hljs-string">'1/4'</span>],
<span class="hljs-string">'4/4'</span>: [<span class="hljs-string">'1/4'</span>],
<span class="hljs-string">'1/8'</span>: [<span class="hljs-string">'1/8'</span>],
<span class="hljs-string">'2/8'</span>: [<span class="hljs-string">'2/8'</span>],
<span class="hljs-string">'3/8'</span>: [<span class="hljs-string">'3/8'</span>],
<span class="hljs-string">'4/8'</span>: [<span class="hljs-string">'2/8'</span>],
<span class="hljs-string">'1/16'</span>: [<span class="hljs-string">'1/16'</span>],
<span class="hljs-string">'2/16'</span>: [<span class="hljs-string">'2/16'</span>],
<span class="hljs-string">'3/16'</span>: [<span class="hljs-string">'3/16'</span>],
<span class="hljs-string">'4/16'</span>: [<span class="hljs-string">'2/16'</span>],
};
<span class="hljs-keyword">const</span> groups = defaults[time_sig];
<span class="hljs-keyword">if</span> (groups === <span class="hljs-literal">undefined</span>) {</pre></div>
<p>If no beam groups found, naively determine
the beam groupings from the time signature</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> beatTotal = <span class="hljs-built_in">parseInt</span>(time_sig.split(<span class="hljs-string">'/'</span>)[<span class="hljs-number">0</span>], <span class="hljs-number">10</span>);
<span class="hljs-keyword">const</span> beatValue = <span class="hljs-built_in">parseInt</span>(time_sig.split(<span class="hljs-string">'/'</span>)[<span class="hljs-number">1</span>], <span class="hljs-number">10</span>);
<span class="hljs-keyword">const</span> tripleMeter = beatTotal % <span class="hljs-number">3</span> === <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (tripleMeter) {
<span class="hljs-keyword">return</span> [<span class="hljs-keyword">new</span> Fraction(<span class="hljs-number">3</span>, beatValue)];
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (beatValue > <span class="hljs-number">4</span>) {
<span class="hljs-keyword">return</span> [<span class="hljs-keyword">new</span> Fraction(<span class="hljs-number">2</span>, beatValue)];
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (beatValue <= <span class="hljs-number">4</span>) {
<span class="hljs-keyword">return</span> [<span class="hljs-keyword">new</span> Fraction(<span class="hljs-number">1</span>, beatValue)];
}
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> groups.map(<span class="hljs-function"><span class="hljs-params">group</span> =></span> <span class="hljs-keyword">new</span> Fraction().parse(group));
}
<span class="hljs-keyword">return</span> [<span class="hljs-keyword">new</span> Fraction(<span class="hljs-number">1</span>, <span class="hljs-number">4</span>)];
}</pre></div>
<p>A helper function to automatically build basic beams for a voice. For more
complex auto-beaming use <code>Beam.generateBeams()</code>.</p>
<p>Parameters:</p>
<ul>
<li><code>voice</code> - The voice to generate the beams for</li>
<li><code>stem_direction</code> - A stem direction to apply to the entire voice</li>
<li><code>groups</code> - An array of <code>Fraction</code> representing beat groupings for the beam</li>
</ul>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> applyAndGetBeams(voice, stem_direction, groups) {
<span class="hljs-keyword">return</span> Beam.generateBeams(voice.getTickables(), {
groups,
stem_direction,
});
}</pre></div>
<p>A helper function to autimatically build beams for a voice with
configuration options.</p>
<p>Example configuration object:</p>
<pre><code>config = {
<span class="hljs-attr">groups</span>: [<span class="hljs-keyword">new</span> Vex.Flow.Fraction(<span class="hljs-number">2</span>, <span class="hljs-number">8</span>)],
<span class="hljs-attr">stem_direction</span>: <span class="hljs-number">-1</span>,
<span class="hljs-attr">beam_rests</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">beam_middle_only</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">show_stemlets</span>: <span class="hljs-literal">false</span>
};</code></pre><p>Parameters:</p>
<ul>
<li><code>notes</code> - An array of notes to create the beams for</li>
<li><code>config</code> - The configuration object<ul>
<li><code>groups</code> - Array of <code>Fractions</code> that represent the beat structure to beam the notes</li>
<li><code>stem_direction</code> - Set to apply the same direction to all notes</li>
<li><code>beam_rests</code> - Set to <code>true</code> to include rests in the beams</li>
<li><code>beam_middle_only</code> - Set to <code>true</code> to only beam rests in the middle of the beat</li>
<li><code>show_stemlets</code> - Set to <code>true</code> to draw stemlets for rests</li>
<li><code>maintain_stem_directions</code> - Set to <code>true</code> to not apply new stem directions</li>
</ul>
</li>
</ul>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> generateBeams(notes, config) {
<span class="hljs-keyword">if</span> (!config) config = {};
<span class="hljs-keyword">if</span> (!config.groups || !config.groups.length) {
config.groups = [<span class="hljs-keyword">new</span> Fraction(<span class="hljs-number">2</span>, <span class="hljs-number">8</span>)];
}</pre></div>
<p>Convert beam groups to tick amounts</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> tickGroups = config.groups.map(<span class="hljs-function"><span class="hljs-params">group</span> =></span> {
<span class="hljs-keyword">if</span> (!group.multiply) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'InvalidBeamGroups'</span>,
<span class="hljs-string">'The beam groups must be an array of Vex.Flow.Fractions'</span>);
}
<span class="hljs-keyword">return</span> group.clone().multiply(Flow.RESOLUTION, <span class="hljs-number">1</span>);
});
<span class="hljs-keyword">const</span> unprocessedNotes = notes;
<span class="hljs-keyword">let</span> currentTickGroup = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> noteGroups = [];
<span class="hljs-keyword">let</span> currentGroup = [];
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getTotalTicks</span>(<span class="hljs-params">vf_notes</span>) </span>{
<span class="hljs-keyword">return</span> vf_notes.reduce(<span class="hljs-function">(<span class="hljs-params">memo, note</span>) =></span> note.getTicks().clone().add(memo), <span class="hljs-keyword">new</span> Fraction(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>));
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">nextTickGroup</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">if</span> (tickGroups.length - <span class="hljs-number">1</span> > currentTickGroup) {
currentTickGroup += <span class="hljs-number">1</span>;
} <span class="hljs-keyword">else</span> {
currentTickGroup = <span class="hljs-number">0</span>;
}
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createGroups</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">let</span> nextGroup = [];
unprocessedNotes.forEach(<span class="hljs-function"><span class="hljs-params">unprocessedNote</span> =></span> {
nextGroup = [];
<span class="hljs-keyword">if</span> (unprocessedNote.shouldIgnoreTicks()) {
noteGroups.push(currentGroup);
currentGroup = nextGroup;
<span class="hljs-keyword">return</span>; <span class="hljs-comment">// Ignore untickables (like bar notes)</span>
}
currentGroup.push(unprocessedNote);
<span class="hljs-keyword">const</span> ticksPerGroup = tickGroups[currentTickGroup].clone();
<span class="hljs-keyword">const</span> totalTicks = getTotalTicks(currentGroup);</pre></div>
<p>Double the amount of ticks in a group, if it’s an unbeamable tuplet</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> unbeamable = Flow.durationToNumber(unprocessedNote.duration) < <span class="hljs-number">8</span>;
<span class="hljs-keyword">if</span> (unbeamable && unprocessedNote.tuplet) {
ticksPerGroup.numerator *= <span class="hljs-number">2</span>;
}</pre></div>
<p>If the note that was just added overflows the group tick total</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (totalTicks.greaterThan(ticksPerGroup)) {</pre></div>
<p>If the overflow note can be beamed, start the next group
with it. Unbeamable notes leave the group overflowed.</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (!unbeamable) {
nextGroup.push(currentGroup.pop());
}
noteGroups.push(currentGroup);
currentGroup = nextGroup;
nextTickGroup();
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (totalTicks.equals(ticksPerGroup)) {
noteGroups.push(currentGroup);
currentGroup = nextGroup;
nextTickGroup();
}
});</pre></div>
<p>Adds any remainder notes</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (currentGroup.length > <span class="hljs-number">0</span>) {
noteGroups.push(currentGroup);
}
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getBeamGroups</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> noteGroups.filter(<span class="hljs-function"><span class="hljs-params">group</span> =></span> {
<span class="hljs-keyword">if</span> (group.length > <span class="hljs-number">1</span>) {
<span class="hljs-keyword">let</span> beamable = <span class="hljs-literal">true</span>;
group.forEach(<span class="hljs-function"><span class="hljs-params">note</span> =></span> {
<span class="hljs-keyword">if</span> (note.getIntrinsicTicks() >= Flow.durationToTicks(<span class="hljs-string">'4'</span>)) {
beamable = <span class="hljs-literal">false</span>;
}
});
<span class="hljs-keyword">return</span> beamable;
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
});
}</pre></div>
<p>Splits up groups by Rest</p>
<div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sanitizeGroups</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">const</span> sanitizedGroups = [];
noteGroups.forEach(<span class="hljs-function"><span class="hljs-params">group</span> =></span> {
<span class="hljs-keyword">let</span> tempGroup = [];
group.forEach(<span class="hljs-function">(<span class="hljs-params">note, index, group</span>) =></span> {
<span class="hljs-keyword">const</span> isFirstOrLast = index === <span class="hljs-number">0</span> || index === group.length - <span class="hljs-number">1</span>;
<span class="hljs-keyword">const</span> prevNote = group[index - <span class="hljs-number">1</span>];
<span class="hljs-keyword">const</span> breaksOnEachRest = !config.beam_rests && note.isRest();
<span class="hljs-keyword">const</span> breaksOnFirstOrLastRest = (config.beam_rests &&
config.beam_middle_only && note.isRest() && isFirstOrLast);
<span class="hljs-keyword">let</span> breakOnStemChange = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (config.maintain_stem_directions && prevNote &&
!note.isRest() && !prevNote.isRest()) {
<span class="hljs-keyword">const</span> prevDirection = prevNote.getStemDirection();
<span class="hljs-keyword">const</span> currentDirection = note.getStemDirection();
breakOnStemChange = currentDirection !== prevDirection;
}
<span class="hljs-keyword">const</span> isUnbeamableDuration = <span class="hljs-built_in">parseInt</span>(note.duration, <span class="hljs-number">10</span>) < <span class="hljs-number">8</span>;</pre></div>
<p>Determine if the group should be broken at this note</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> shouldBreak = breaksOnEachRest || breaksOnFirstOrLastRest ||
breakOnStemChange || isUnbeamableDuration;
<span class="hljs-keyword">if</span> (shouldBreak) {</pre></div>
<p>Add current group</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (tempGroup.length > <span class="hljs-number">0</span>) {
sanitizedGroups.push(tempGroup);
}</pre></div>
<p>Start a new group. Include the current note if the group
was broken up by stem direction, as that note needs to start
the next group of notes</p>
<div class='highlight'><pre> tempGroup = breakOnStemChange ? [note] : [];
} <span class="hljs-keyword">else</span> {</pre></div>
<p>Add note to group</p>
<div class='highlight'><pre> tempGroup.push(note);
}
});</pre></div>
<p>If there is a remaining group, add it as well</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (tempGroup.length > <span class="hljs-number">0</span>) {
sanitizedGroups.push(tempGroup);
}
});
noteGroups = sanitizedGroups;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">formatStems</span>(<span class="hljs-params"></span>) </span>{
noteGroups.forEach(<span class="hljs-function"><span class="hljs-params">group</span> =></span> {
<span class="hljs-keyword">let</span> stemDirection;
<span class="hljs-keyword">if</span> (config.maintain_stem_directions) {
<span class="hljs-keyword">const</span> note = findFirstNote(group);
stemDirection = note ? note.getStemDirection() : Stem.UP;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (config.stem_direction) {
stemDirection = config.stem_direction;
} <span class="hljs-keyword">else</span> {
stemDirection = calculateStemDirection(group);
}
}
applyStemDirection(group, stemDirection);
});
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">findFirstNote</span>(<span class="hljs-params">group</span>) </span>{
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < group.length; i++) {
<span class="hljs-keyword">const</span> note = group[i];
<span class="hljs-keyword">if</span> (!note.isRest()) {
<span class="hljs-keyword">return</span> note;
}
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">applyStemDirection</span>(<span class="hljs-params">group, direction</span>) </span>{
group.forEach(<span class="hljs-function"><span class="hljs-params">note</span> =></span> {
note.setStemDirection(direction);
});
}</pre></div>
<p>Get all of the tuplets in all of the note groups</p>
<div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getTuplets</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">const</span> uniqueTuplets = [];</pre></div>
<p>Go through all of the note groups and inspect for tuplets</p>
<div class='highlight'><pre> noteGroups.forEach(<span class="hljs-function"><span class="hljs-params">group</span> =></span> {
<span class="hljs-keyword">let</span> tuplet = <span class="hljs-literal">null</span>;
group.forEach(<span class="hljs-function"><span class="hljs-params">note</span> =></span> {
<span class="hljs-keyword">if</span> (note.tuplet && (tuplet !== note.tuplet)) {
tuplet = note.tuplet;
uniqueTuplets.push(tuplet);
}
});
});
<span class="hljs-keyword">return</span> uniqueTuplets;
}</pre></div>
<p>Using closures to store the variables throughout the various functions
IMO Keeps it this process lot cleaner - but not super consistent with
the rest of the API’s style - Silverwolf90 (Cyril)</p>
<div class='highlight'><pre> createGroups();
sanitizeGroups();
formatStems();</pre></div>
<p>Get the notes to be beamed</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> beamedNoteGroups = getBeamGroups();</pre></div>
<p>Get the tuplets in order to format them accurately</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> allTuplets = getTuplets();</pre></div>
<p>Create a Vex.Flow.Beam from each group of notes to be beamed</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> beams = [];
beamedNoteGroups.forEach(<span class="hljs-function"><span class="hljs-params">group</span> =></span> {
<span class="hljs-keyword">const</span> beam = <span class="hljs-keyword">new</span> Beam(group);
<span class="hljs-keyword">if</span> (config.show_stemlets) {
beam.render_options.show_stemlets = <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">if</span> (config.secondary_breaks) {
beam.render_options.secondary_break_ticks = Flow.durationToTicks(config.secondary_breaks);
}
<span class="hljs-keyword">if</span> (config.flat_beams === <span class="hljs-literal">true</span>) {
beam.render_options.flat_beams = <span class="hljs-literal">true</span>;
beam.render_options.flat_beam_offset = config.flat_beam_offset;
}
beams.push(beam);
});</pre></div>
<p>Reformat tuplets</p>
<div class='highlight'><pre> allTuplets.forEach(<span class="hljs-function"><span class="hljs-params">tuplet</span> =></span> {</pre></div>
<p>Set the tuplet location based on the stem direction</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> direction = tuplet.notes[<span class="hljs-number">0</span>].stem_direction === Stem.DOWN ?
Tuplet.LOCATION_BOTTOM : Tuplet.LOCATION_TOP;
tuplet.setTupletLocation(direction);</pre></div>
<p>If any of the notes in the tuplet are not beamed, draw a bracket.</p>
<div class='highlight'><pre> <span class="hljs-keyword">let</span> bracketed = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < tuplet.notes.length; i++) {
<span class="hljs-keyword">const</span> note = tuplet.notes[i];
<span class="hljs-keyword">if</span> (note.beam === <span class="hljs-literal">null</span>) {
bracketed = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">break</span>;
}
}
tuplet.setBracketed(bracketed);
});
<span class="hljs-keyword">return</span> beams;
}
<span class="hljs-keyword">constructor</span>(notes, auto_stem) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Beam'</span>);
<span class="hljs-keyword">if</span> (!notes || notes === []) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">'No notes provided for beam.'</span>);
}
<span class="hljs-keyword">if</span> (notes.length === <span class="hljs-number">1</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">'Too few notes for beam.'</span>);
}</pre></div>
<p>Validate beam line, direction and ticks.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.ticks = notes[<span class="hljs-number">0</span>].getIntrinsicTicks();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.ticks >= Flow.durationToTicks(<span class="hljs-string">'4'</span>)) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'BadArguments'</span>,
<span class="hljs-string">'Beams can only be applied to notes shorter than a quarter note.'</span>);
}
<span class="hljs-keyword">let</span> i; <span class="hljs-comment">// shared iterator</span>
<span class="hljs-keyword">let</span> note;
<span class="hljs-keyword">this</span>.stem_direction = Stem.UP;
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < notes.length; ++i) {
note = notes[i];
<span class="hljs-keyword">if</span> (note.hasStem()) {
<span class="hljs-keyword">this</span>.stem_direction = note.getStemDirection();
<span class="hljs-keyword">break</span>;
}
}
<span class="hljs-keyword">let</span> stem_direction = <span class="hljs-keyword">this</span>.stem_direction;</pre></div>
<p>Figure out optimal stem direction based on given notes</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (auto_stem && notes[<span class="hljs-number">0</span>].getCategory() === <span class="hljs-string">'stavenotes'</span>) {
stem_direction = calculateStemDirection(notes);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (auto_stem && notes[<span class="hljs-number">0</span>].getCategory() === <span class="hljs-string">'tabnotes'</span>) {</pre></div>
<p>Auto Stem TabNotes</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> stem_weight = notes.reduce(<span class="hljs-function">(<span class="hljs-params">memo, note</span>) =></span> memo + note.stem_direction, <span class="hljs-number">0</span>);
stem_direction = stem_weight > <span class="hljs-number">-1</span> ? Stem.UP : Stem.DOWN;
}</pre></div>
<p>Apply stem directions and attach beam to notes</p>
<div class='highlight'><pre> <span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < notes.length; ++i) {
note = notes[i];
<span class="hljs-keyword">if</span> (auto_stem) {
note.setStemDirection(stem_direction);
<span class="hljs-keyword">this</span>.stem_direction = stem_direction;
}
note.setBeam(<span class="hljs-keyword">this</span>);
}
<span class="hljs-keyword">this</span>.postFormatted = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.notes = notes;
<span class="hljs-keyword">this</span>.beam_count = <span class="hljs-keyword">this</span>.getBeamCount();
<span class="hljs-keyword">this</span>.break_on_indices = [];
<span class="hljs-keyword">this</span>.render_options = {
<span class="hljs-attr">beam_width</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">max_slope</span>: <span class="hljs-number">0.25</span>,
<span class="hljs-attr">min_slope</span>: <span class="hljs-number">-0.25</span>,
<span class="hljs-attr">slope_iterations</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">slope_cost</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">show_stemlets</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">stemlet_extension</span>: <span class="hljs-number">7</span>,
<span class="hljs-attr">partial_beam_length</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">flat_beams</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">min_flat_beam_offset</span>: <span class="hljs-number">15</span>,
};
}</pre></div>
<p>Get the notes in this beam</p>
<div class='highlight'><pre> getNotes() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.notes; }</pre></div>
<p>Get the max number of beams in the set of notes</p>
<div class='highlight'><pre> getBeamCount() {
<span class="hljs-keyword">const</span> beamCounts = <span class="hljs-keyword">this</span>.notes.map(<span class="hljs-function"><span class="hljs-params">note</span> =></span> note.getGlyph().beam_count);
<span class="hljs-keyword">const</span> maxBeamCount = beamCounts.reduce(<span class="hljs-function">(<span class="hljs-params">max, beamCount</span>) =></span> beamCount > max ? beamCount : max);
<span class="hljs-keyword">return</span> maxBeamCount;
}</pre></div>
<p>Set which note <code>indices</code> to break the secondary beam at</p>
<div class='highlight'><pre> breakSecondaryAt(indices) {
<span class="hljs-keyword">this</span>.break_on_indices = indices;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Return the y coordinate for linear function</p>
<div class='highlight'><pre> getSlopeY(x, first_x_px, first_y_px, slope) {
<span class="hljs-keyword">return</span> first_y_px + ((x - first_x_px) * slope);
}</pre></div>
<p>Calculate the best possible slope for the provided notes</p>
<div class='highlight'><pre> calculateSlope() {
<span class="hljs-keyword">const</span> {
notes,
<span class="hljs-attr">stem_direction</span>: stemDirection,
<span class="hljs-attr">render_options</span>: { max_slope, min_slope, slope_iterations, slope_cost },
} = <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">const</span> firstNote = notes[<span class="hljs-number">0</span>];
<span class="hljs-keyword">const</span> initialSlope = getStemSlope(firstNote, notes[notes.length - <span class="hljs-number">1</span>]);
<span class="hljs-keyword">const</span> increment = (max_slope - min_slope) / slope_iterations;
<span class="hljs-keyword">let</span> minCost = <span class="hljs-built_in">Number</span>.MAX_VALUE;
<span class="hljs-keyword">let</span> bestSlope = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> yShift = <span class="hljs-number">0</span>;</pre></div>
<p>iterate through slope values to find best weighted fit</p>
<div class='highlight'><pre> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> slope = min_slope; slope <= max_slope; slope += increment) {
<span clas