vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
941 lines (636 loc) • 33.5 kB
HTML
<html>
<head>
<title>stemmablenote.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>stemmablenote.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><code>StemmableNote</code> is an abstract interface for notes with optional stems.
Examples of stemmable notes are <code>StaveNote</code> and <code>TabNote</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> { Stem } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stem'</span>;
<span class="hljs-keyword">import</span> { Glyph } <span class="hljs-keyword">from</span> <span class="hljs-string">'./glyph'</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">StemmableNote</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Note</span> </span>{
<span class="hljs-keyword">constructor</span>(note_struct) {
<span class="hljs-keyword">super</span>(note_struct);
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'StemmableNote'</span>);
<span class="hljs-keyword">this</span>.stem = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.stemExtensionOverride = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.beam = <span class="hljs-literal">null</span>;
}</pre></div>
<p>Get and set the note’s <code>Stem</code></p>
<div class='highlight'><pre> getStem() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.stem; }
setStem(stem) { <span class="hljs-keyword">this</span>.stem = stem; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }</pre></div>
<p>Builds and sets a new stem</p>
<div class='highlight'><pre> buildStem() {
<span class="hljs-keyword">const</span> stem = <span class="hljs-keyword">new</span> Stem();
<span class="hljs-keyword">this</span>.setStem(stem);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
buildFlag(category = <span class="hljs-string">'flag'</span>) {
<span class="hljs-keyword">const</span> { glyph, beam } = <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">const</span> shouldRenderFlag = beam === <span class="hljs-literal">null</span>;
<span class="hljs-keyword">if</span> (glyph && glyph.flag && shouldRenderFlag) {
<span class="hljs-keyword">const</span> flagCode = <span class="hljs-keyword">this</span>.getStemDirection() === Stem.DOWN
? glyph.code_flag_downstem
: glyph.code_flag_upstem;
<span class="hljs-keyword">this</span>.flag = <span class="hljs-keyword">new</span> Glyph(flagCode, <span class="hljs-keyword">this</span>.render_options.glyph_font_scale, { category });
}
}</pre></div>
<p>Get the custom glyph associated with the outer note head on the base of the stem.</p>
<div class='highlight'><pre> getBaseCustomNoteHeadGlyph() {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.getStemDirection() === Stem.DOWN) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.customGlyphs[<span class="hljs-keyword">this</span>.customGlyphs.length - <span class="hljs-number">1</span>];
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.customGlyphs[<span class="hljs-number">0</span>];
}
}</pre></div>
<p>Get the full length of stem</p>
<div class='highlight'><pre> getStemLength() {
<span class="hljs-keyword">return</span> Stem.HEIGHT + <span class="hljs-keyword">this</span>.getStemExtension();
}</pre></div>
<p>Get the number of beams for this duration</p>
<div class='highlight'><pre> getBeamCount() {
<span class="hljs-keyword">const</span> glyph = <span class="hljs-keyword">this</span>.getGlyph();
<span class="hljs-keyword">if</span> (glyph) {
<span class="hljs-keyword">return</span> glyph.beam_count;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
}</pre></div>
<p>Get the minimum length of stem</p>
<div class='highlight'><pre> getStemMinumumLength() {
<span class="hljs-keyword">const</span> frac = Flow.durationToFraction(<span class="hljs-keyword">this</span>.duration);
<span class="hljs-keyword">let</span> length = frac.value() <= <span class="hljs-number">1</span> ? <span class="hljs-number">0</span> : <span class="hljs-number">20</span>;</pre></div>
<p>if note is flagged, cannot shorten beam</p>
<div class='highlight'><pre> <span class="hljs-keyword">switch</span> (<span class="hljs-keyword">this</span>.duration) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'8'</span>:
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.beam == <span class="hljs-literal">null</span>) length = <span class="hljs-number">35</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'16'</span>:
length = <span class="hljs-keyword">this</span>.beam == <span class="hljs-literal">null</span> ? <span class="hljs-number">35</span> : <span class="hljs-number">25</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'32'</span>:
length = <span class="hljs-keyword">this</span>.beam == <span class="hljs-literal">null</span> ? <span class="hljs-number">45</span> : <span class="hljs-number">35</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'64'</span>:
length = <span class="hljs-keyword">this</span>.beam == <span class="hljs-literal">null</span> ? <span class="hljs-number">50</span> : <span class="hljs-number">40</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'128'</span>:
length = <span class="hljs-keyword">this</span>.beam == <span class="hljs-literal">null</span> ? <span class="hljs-number">55</span> : <span class="hljs-number">45</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
<span class="hljs-keyword">break</span>;
}
<span class="hljs-keyword">return</span> length;
}</pre></div>
<p>Get/set the direction of the stem</p>
<div class='highlight'><pre> getStemDirection() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.stem_direction; }
setStemDirection(direction) {
<span class="hljs-keyword">if</span> (!direction) direction = Stem.UP;
<span class="hljs-keyword">if</span> (direction !== Stem.UP && direction !== Stem.DOWN) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArgument'</span>, <span class="hljs-string">`Invalid stem direction: <span class="hljs-subst">${direction}</span>`</span>);
}
<span class="hljs-keyword">this</span>.stem_direction = direction;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stem) {
<span class="hljs-keyword">this</span>.stem.setDirection(direction);
<span class="hljs-keyword">this</span>.stem.setExtension(<span class="hljs-keyword">this</span>.getStemExtension());</pre></div>
<p>Lookup the base custom notehead (closest to the base of the stem) to extend or shorten
the stem appropriately. If there’s no custom note head, lookup the standard notehead.</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> glyph = <span class="hljs-keyword">this</span>.getBaseCustomNoteHeadGlyph() || <span class="hljs-keyword">this</span>.getGlyph();</pre></div>
<p>Get the font-specific customizations for the note heads.</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> offsets = <span class="hljs-keyword">this</span>.musicFont.lookupMetric(<span class="hljs-string">`stem.noteHead.<span class="hljs-subst">${glyph.code_head}</span>`</span>,
{ <span class="hljs-attr">offsetYBaseStemUp</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">offsetYTopStemUp</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">offsetYBaseStemDown</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">offsetYTopStemDown</span>: <span class="hljs-number">0</span>, });</pre></div>
<p>Configure the stem to use these offsets.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.stem.setOptions({
<span class="hljs-attr">stem_up_y_offset</span>: offsets.offsetYTopStemUp, <span class="hljs-comment">// glyph.stem_up_y_offset,</span>
stem_down_y_offset: offsets.offsetYTopStemDown, <span class="hljs-comment">// glyph.stem_down_y_offset,</span>
stem_up_y_base_offset: offsets.offsetYBaseStemUp, <span class="hljs-comment">// glyph.stem_up_y_base_offset,</span>
stem_down_y_base_offset: offsets.offsetYBaseStemDown, <span class="hljs-comment">// glyph.stem_down_y_base_offset,</span>
});
}</pre></div>
<p>Reset and reformat everything.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.reset();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.flag) { <span class="hljs-keyword">this</span>.buildFlag(); }
<span class="hljs-keyword">this</span>.beam = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.preFormatted) { <span class="hljs-keyword">this</span>.preFormat(); }
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Get the <code>x</code> coordinate of the stem</p>
<div class='highlight'><pre> getStemX() {
<span class="hljs-keyword">const</span> x_begin = <span class="hljs-keyword">this</span>.getAbsoluteX() + <span class="hljs-keyword">this</span>.x_shift;
<span class="hljs-keyword">const</span> x_end = <span class="hljs-keyword">this</span>.getAbsoluteX() + <span class="hljs-keyword">this</span>.x_shift + <span class="hljs-keyword">this</span>.getGlyphWidth();
<span class="hljs-keyword">const</span> stem_x = <span class="hljs-keyword">this</span>.stem_direction === Stem.DOWN ? x_begin : x_end;
<span class="hljs-keyword">return</span> stem_x;
}</pre></div>
<p>Get the <code>x</code> coordinate for the center of the glyph.
Used for <code>TabNote</code> stems and stemlets over rests</p>
<div class='highlight'><pre> getCenterGlyphX() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.getAbsoluteX() + <span class="hljs-keyword">this</span>.x_shift + (<span class="hljs-keyword">this</span>.getGlyphWidth() / <span class="hljs-number">2</span>);
}</pre></div>
<p>Get the stem extension for the current duration</p>
<div class='highlight'><pre> getStemExtension() {
<span class="hljs-keyword">const</span> glyph = <span class="hljs-keyword">this</span>.getGlyph();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stemExtensionOverride != <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.stemExtensionOverride;
}
<span class="hljs-keyword">if</span> (glyph) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.getStemDirection() === <span class="hljs-number">1</span>
? glyph.stem_up_extension
: glyph.stem_down_extension;
}
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}</pre></div>
<p>Set the stem length to a specific. Will override the default length.</p>
<div class='highlight'><pre> setStemLength(height) {
<span class="hljs-keyword">this</span>.stemExtensionOverride = (height - Stem.HEIGHT);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Get the top and bottom <code>y</code> values of the stem.</p>
<div class='highlight'><pre> getStemExtents() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.stem.getExtents();
}</pre></div>
<p>Sets the current note’s beam</p>
<div class='highlight'><pre> setBeam(beam) { <span class="hljs-keyword">this</span>.beam = beam; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }</pre></div>
<p>Get the <code>y</code> value for the top/bottom modifiers at a specific <code>textLine</code></p>
<div class='highlight'><pre> getYForTopText(textLine) {
<span class="hljs-keyword">const</span> extents = <span class="hljs-keyword">this</span>.getStemExtents();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.hasStem()) {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.min(
<span class="hljs-keyword">this</span>.stave.getYForTopText(textLine),
extents.topY - (<span class="hljs-keyword">this</span>.render_options.annotation_spacing * (textLine + <span class="hljs-number">1</span>))
);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.stave.getYForTopText(textLine);
}
}
getYForBottomText(textLine) {
<span class="hljs-keyword">const</span> extents = <span class="hljs-keyword">this</span>.getStemExtents();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.hasStem()) {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.max(
<span class="hljs-keyword">this</span>.stave.getYForTopText(textLine),
extents.baseY + (<span class="hljs-keyword">this</span>.render_options.annotation_spacing * (textLine))
);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.stave.getYForBottomText(textLine);
}
}
hasFlag() {
<span class="hljs-keyword">return</span> Flow.getGlyphProps(<span class="hljs-keyword">this</span>.duration).flag && !<span class="hljs-keyword">this</span>.beam;
}</pre></div>
<p>Post format the note</p>
<div class='highlight'><pre> postFormat() {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.beam) <span class="hljs-keyword">this</span>.beam.postFormat();
<span class="hljs-keyword">this</span>.postFormatted = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Render the stem onto the canvas</p>
<div class='highlight'><pre> drawStem(stem_struct) {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">this</span>.setStem(<span class="hljs-keyword">new</span> Stem(stem_struct));
<span class="hljs-keyword">this</span>.stem.setContext(<span class="hljs-keyword">this</span>.context).draw();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>