vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
846 lines (591 loc) • 29.4 kB
HTML
<html>
<head>
<title>gracenotegroup.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>gracenotegroup.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>GraceNoteGroup</code> which is used to format and
render grace notes.</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> { Modifier } <span class="hljs-keyword">from</span> <span class="hljs-string">'./modifier'</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> { 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> { StaveTie } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavetie'</span>;
<span class="hljs-keyword">import</span> { TabTie } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tabtie'</span>;
<span class="hljs-keyword">import</span> { StaveNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavenote'</span>;</pre></div>
<p>To enable logging for this class. Set <code>Vex.Flow.GraceNoteGroup.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> (GraceNoteGroup.DEBUG) Vex.L(<span class="hljs-string">'Vex.Flow.GraceNoteGroup'</span>, args); }
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">GraceNoteGroup</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Modifier</span> </span>{
<span class="hljs-keyword">static</span> get CATEGORY() { <span class="hljs-keyword">return</span> <span class="hljs-string">'gracenotegroups'</span>; }</pre></div>
<p>Arrange groups inside a <code>ModifierContext</code></p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> format(gracenote_groups, state) {
<span class="hljs-keyword">const</span> group_spacing_stave = <span class="hljs-number">4</span>;
<span class="hljs-keyword">const</span> group_spacing_tab = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (!gracenote_groups || gracenote_groups.length === <span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
<span class="hljs-keyword">const</span> group_list = [];
<span class="hljs-keyword">let</span> prev_note = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">let</span> shiftL = <span class="hljs-number">0</span>;
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < gracenote_groups.length; ++i) {
<span class="hljs-keyword">const</span> gracenote_group = gracenote_groups[i];
<span class="hljs-keyword">const</span> note = gracenote_group.getNote();
<span class="hljs-keyword">const</span> is_stavenote = (note.getCategory() === StaveNote.CATEGORY);
<span class="hljs-keyword">const</span> spacing = (is_stavenote ? group_spacing_stave : group_spacing_tab);
<span class="hljs-keyword">if</span> (is_stavenote && note !== prev_note) {</pre></div>
<p>Iterate through all notes to get the displaced pixels</p>
<div class='highlight'><pre> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> n = <span class="hljs-number">0</span>; n < note.keys.length; ++n) {
shiftL = <span class="hljs-built_in">Math</span>.max(note.getLeftDisplacedHeadPx(), shiftL);
}
prev_note = note;
}
group_list.push({ <span class="hljs-attr">shift</span>: shiftL, gracenote_group, spacing });
}</pre></div>
<p>If first note left shift in case it is displaced</p>
<div class='highlight'><pre> <span class="hljs-keyword">let</span> group_shift = group_list[<span class="hljs-number">0</span>].shift;
<span class="hljs-keyword">let</span> formatWidth;
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < group_list.length; ++i) {
<span class="hljs-keyword">const</span> gracenote_group = group_list[i].gracenote_group;
gracenote_group.preFormat();
formatWidth = gracenote_group.getWidth() + group_list[i].spacing;
group_shift = <span class="hljs-built_in">Math</span>.max(formatWidth, group_shift);
}
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < group_list.length; ++i) {
<span class="hljs-keyword">const</span> gracenote_group = group_list[i].gracenote_group;
formatWidth = gracenote_group.getWidth() + group_list[i].spacing;
gracenote_group.setSpacingFromNextModifier(group_shift - <span class="hljs-built_in">Math</span>.min(formatWidth, group_shift));
}
state.left_shift += group_shift;
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}</pre></div>
<h2 id="prototype-methods">Prototype Methods</h2>
<p><code>GraceNoteGroup</code> inherits from <code>Modifier</code> and is placed inside a
<code>ModifierContext</code>.</p>
<div class='highlight'><pre> <span class="hljs-keyword">constructor</span>(grace_notes, show_slur) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'GraceNoteGroup'</span>);
<span class="hljs-keyword">this</span>.note = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.index = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.position = Modifier.Position.LEFT;
<span class="hljs-keyword">this</span>.grace_notes = grace_notes;
<span class="hljs-keyword">this</span>.width = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.preFormatted = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.show_slur = show_slur;
<span class="hljs-keyword">this</span>.slur = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.formatter = <span class="hljs-keyword">new</span> Formatter();
<span class="hljs-keyword">this</span>.voice = <span class="hljs-keyword">new</span> Voice({
<span class="hljs-attr">num_beats</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">beat_value</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">resolution</span>: Flow.RESOLUTION,
}).setStrict(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">this</span>.render_options = {
<span class="hljs-attr">slur_y_shift</span>: <span class="hljs-number">0</span>,
};
<span class="hljs-keyword">this</span>.beams = [];
<span class="hljs-keyword">this</span>.voice.addTickables(<span class="hljs-keyword">this</span>.grace_notes);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
getCategory() { <span class="hljs-keyword">return</span> GraceNoteGroup.CATEGORY; }
preFormat() {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.preFormatted) <span class="hljs-keyword">return</span>;
<span class="hljs-keyword">this</span>.formatter.joinVoices([<span class="hljs-keyword">this</span>.voice]).format([<span class="hljs-keyword">this</span>.voice], <span class="hljs-number">0</span>);
<span class="hljs-keyword">this</span>.setWidth(<span class="hljs-keyword">this</span>.formatter.getMinTotalWidth());
<span class="hljs-keyword">this</span>.preFormatted = <span class="hljs-literal">true</span>;
}
beamNotes(grace_notes) {
grace_notes = grace_notes || <span class="hljs-keyword">this</span>.grace_notes;
<span class="hljs-keyword">if</span> (grace_notes.length > <span class="hljs-number">1</span>) {
<span class="hljs-keyword">const</span> beam = <span class="hljs-keyword">new</span> Beam(grace_notes);
beam.render_options.beam_width = <span class="hljs-number">3</span>;
beam.render_options.partial_beam_length = <span class="hljs-number">4</span>;
<span class="hljs-keyword">this</span>.beams.push(beam);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setNote(note) {
<span class="hljs-keyword">this</span>.note = note;
}
setWidth(width) {
<span class="hljs-keyword">this</span>.width = width;
}
getWidth() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.width;
}
getGraceNotes() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.grace_notes;
}
draw() {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">const</span> note = <span class="hljs-keyword">this</span>.getNote();
L(<span class="hljs-string">'Drawing grace note group for:'</span>, note);
<span class="hljs-keyword">if</span> (!(note && (<span class="hljs-keyword">this</span>.index !== <span class="hljs-literal">null</span>))) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'NoAttachedNote'</span>,
<span class="hljs-string">"Can't draw grace note without a parent note and parent note index."</span>);
}
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">this</span>.alignSubNotesWithNote(<span class="hljs-keyword">this</span>.getGraceNotes(), note); <span class="hljs-comment">// Modifier function</span></pre></div>
<p>Draw notes</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.grace_notes.forEach(<span class="hljs-function"><span class="hljs-params">graceNote</span> =></span> {
graceNote.setContext(<span class="hljs-keyword">this</span>.context).draw();
});</pre></div>
<p>Draw beam</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.beams.forEach(<span class="hljs-function"><span class="hljs-params">beam</span> =></span> {
beam.setContext(<span class="hljs-keyword">this</span>.context).draw();
});
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.show_slur) {</pre></div>
<p>Create and draw slur</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> is_stavenote = (<span class="hljs-keyword">this</span>.getNote().getCategory() === StaveNote.CATEGORY);
<span class="hljs-keyword">const</span> TieClass = (is_stavenote ? StaveTie : TabTie);
<span class="hljs-keyword">this</span>.slur = <span class="hljs-keyword">new</span> TieClass({
<span class="hljs-attr">last_note</span>: <span class="hljs-keyword">this</span>.grace_notes[<span class="hljs-number">0</span>],
<span class="hljs-attr">first_note</span>: note,
<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-keyword">this</span>.slur.render_options.cp2 = <span class="hljs-number">12</span>;
<span class="hljs-keyword">this</span>.slur.render_options.y_shift = (is_stavenote ? <span class="hljs-number">7</span> : <span class="hljs-number">5</span>) + <span class="hljs-keyword">this</span>.render_options.slur_y_shift;
<span class="hljs-keyword">this</span>.slur.setContext(<span class="hljs-keyword">this</span>.context).draw();
}
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>