vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
890 lines (584 loc) • 29.3 kB
HTML
<html>
<head>
<title>stem.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>stem.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 the <code>Stem</code> object. Generally this object is handled
by its parent <code>StemmableNote</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> { Element } <span class="hljs-keyword">from</span> <span class="hljs-string">'./element'</span>;
<span class="hljs-keyword">import</span> { Flow } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tables'</span>;</pre></div>
<p>To enable logging for this class. Set <code>Vex.Flow.Stem.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> (Stem.DEBUG) Vex.L(<span class="hljs-string">'Vex.Flow.Stem'</span>, args); }
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Stem</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Element</span> </span>{
<span class="hljs-keyword">static</span> get CATEGORY() { <span class="hljs-keyword">return</span> <span class="hljs-string">'stem'</span>; }</pre></div>
<p>Stem directions</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get UP() {
<span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
}
<span class="hljs-keyword">static</span> get DOWN() {
<span class="hljs-keyword">return</span> <span class="hljs-number">-1</span>;
}</pre></div>
<p>Theme</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get WIDTH() {
<span class="hljs-keyword">return</span> Flow.STEM_WIDTH;
}
<span class="hljs-keyword">static</span> get HEIGHT() {
<span class="hljs-keyword">return</span> Flow.STEM_HEIGHT;
}
<span class="hljs-keyword">constructor</span>(options = {}) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Stem'</span>);</pre></div>
<p>Default notehead x bounds</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.x_begin = options.x_begin || <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.x_end = options.x_end || <span class="hljs-number">0</span>;</pre></div>
<p>Y bounds for top/bottom most notehead</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.y_top = options.y_top || <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.y_bottom = options.y_bottom || <span class="hljs-number">0</span>;</pre></div>
<p>Stem top extension</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.stem_extension = options.stem_extension || <span class="hljs-number">0</span>;</pre></div>
<p>Direction of the stem</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.stem_direction = options.stem_direction || <span class="hljs-number">0</span>;</pre></div>
<p>Flag to override all draw calls</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.hide = options.hide || <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.isStemlet = options.isStemlet || <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.stemletHeight = options.stemletHeight || <span class="hljs-number">0</span>;</pre></div>
<p>Use to adjust the rendered height without affecting
the results of <code>.getExtents()</code></p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.renderHeightAdjustment = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.setOptions(options);
}
setOptions(options) {</pre></div>
<p>Changing where the stem meets the head</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.stem_up_y_offset = options.stem_up_y_offset || <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.stem_down_y_offset = options.stem_down_y_offset || <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.stem_up_y_base_offset = options.stem_up_y_base_offset || <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.stem_down_y_base_offset = options.stem_down_y_base_offset || <span class="hljs-number">0</span>;
}</pre></div>
<p>Set the x bounds for the default notehead</p>
<div class='highlight'><pre> setNoteHeadXBounds(x_begin, x_end) {
<span class="hljs-keyword">this</span>.x_begin = x_begin;
<span class="hljs-keyword">this</span>.x_end = x_end;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Set the direction of the stem in relation to the noteheads</p>
<div class='highlight'><pre> setDirection(direction) { <span class="hljs-keyword">this</span>.stem_direction = direction; }</pre></div>
<p>Set the extension for the stem, generally for flags or beams</p>
<div class='highlight'><pre> setExtension(ext) { <span class="hljs-keyword">this</span>.stem_extension = ext; }
getExtension() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.stem_extension; }</pre></div>
<p>The the y bounds for the top and bottom noteheads</p>
<div class='highlight'><pre> setYBounds(y_top, y_bottom) {
<span class="hljs-keyword">this</span>.y_top = y_top;
<span class="hljs-keyword">this</span>.y_bottom = y_bottom;
}</pre></div>
<p>The category of the object</p>
<div class='highlight'><pre> getCategory() { <span class="hljs-keyword">return</span> Stem.CATEGORY; }</pre></div>
<p>Gets the entire height for the stem</p>
<div class='highlight'><pre> getHeight() {
<span class="hljs-keyword">const</span> y_offset = (<span class="hljs-keyword">this</span>.stem_direction === Stem.UP) ? <span class="hljs-keyword">this</span>.stem_up_y_offset : <span class="hljs-keyword">this</span>.stem_down_y_offset; <span class="hljs-comment">// eslint-disable-line max-len</span>
<span class="hljs-keyword">return</span> ((<span class="hljs-keyword">this</span>.y_bottom - <span class="hljs-keyword">this</span>.y_top) * <span class="hljs-keyword">this</span>.stem_direction) +
((Stem.HEIGHT - y_offset + <span class="hljs-keyword">this</span>.stem_extension) * <span class="hljs-keyword">this</span>.stem_direction);
}
getBoundingBox() {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'NotImplemented'</span>, <span class="hljs-string">'getBoundingBox() not implemented.'</span>);
}</pre></div>
<p>Get the y coordinates for the very base of the stem to the top of
the extension</p>
<div class='highlight'><pre> getExtents() {
<span class="hljs-keyword">const</span> isStemUp = <span class="hljs-keyword">this</span>.stem_direction === Stem.UP;
<span class="hljs-keyword">const</span> ys = [<span class="hljs-keyword">this</span>.y_top, <span class="hljs-keyword">this</span>.y_bottom];
<span class="hljs-keyword">const</span> stemHeight = Stem.HEIGHT + <span class="hljs-keyword">this</span>.stem_extension;
<span class="hljs-keyword">const</span> innerMostNoteheadY = (isStemUp ? <span class="hljs-built_in">Math</span>.min : <span class="hljs-built_in">Math</span>.max)(...ys);
<span class="hljs-keyword">const</span> outerMostNoteheadY = (isStemUp ? <span class="hljs-built_in">Math</span>.max : <span class="hljs-built_in">Math</span>.min)(...ys);
<span class="hljs-keyword">const</span> stemTipY = innerMostNoteheadY + (stemHeight * -<span class="hljs-keyword">this</span>.stem_direction);
<span class="hljs-keyword">return</span> { <span class="hljs-attr">topY</span>: stemTipY, <span class="hljs-attr">baseY</span>: outerMostNoteheadY };
}
setVisibility(isVisible) {
<span class="hljs-keyword">this</span>.hide = !isVisible;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setStemlet(isStemlet, stemletHeight) {
<span class="hljs-keyword">this</span>.isStemlet = isStemlet;
<span class="hljs-keyword">this</span>.stemletHeight = stemletHeight;
<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> draw() {
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.hide) <span class="hljs-keyword">return</span>;
<span class="hljs-keyword">const</span> ctx = <span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">let</span> stem_x;
<span class="hljs-keyword">let</span> stem_y;
<span class="hljs-keyword">const</span> stem_direction = <span class="hljs-keyword">this</span>.stem_direction;
<span class="hljs-keyword">let</span> y_base_offset = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (stem_direction === Stem.DOWN) {</pre></div>
<p>Down stems are rendered to the left of the head.</p>
<div class='highlight'><pre> stem_x = <span class="hljs-keyword">this</span>.x_begin;
stem_y = <span class="hljs-keyword">this</span>.y_top + <span class="hljs-keyword">this</span>.stem_down_y_offset;
y_base_offset = <span class="hljs-keyword">this</span>.stem_down_y_base_offset;
} <span class="hljs-keyword">else</span> {</pre></div>
<p>Up stems are rendered to the right of the head.</p>
<div class='highlight'><pre> stem_x = <span class="hljs-keyword">this</span>.x_end;
stem_y = <span class="hljs-keyword">this</span>.y_bottom - <span class="hljs-keyword">this</span>.stem_up_y_offset;
y_base_offset = <span class="hljs-keyword">this</span>.stem_up_y_base_offset;
}
<span class="hljs-keyword">const</span> stemHeight = <span class="hljs-keyword">this</span>.getHeight();
L(<span class="hljs-string">'Rendering stem - '</span>, <span class="hljs-string">'Top Y: '</span>, <span class="hljs-keyword">this</span>.y_top, <span class="hljs-string">'Bottom Y: '</span>, <span class="hljs-keyword">this</span>.y_bottom);</pre></div>
<p>The offset from the stem’s base which is required fo satisfy the stemlet height</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> stemletYOffset = <span class="hljs-keyword">this</span>.isStemlet
? stemHeight - <span class="hljs-keyword">this</span>.stemletHeight * <span class="hljs-keyword">this</span>.stem_direction
: <span class="hljs-number">0</span>;</pre></div>
<p>Draw the stem</p>
<div class='highlight'><pre> ctx.save();
<span class="hljs-keyword">this</span>.applyStyle(ctx);
ctx.beginPath();
ctx.setLineWidth(Stem.WIDTH);
ctx.moveTo(stem_x, stem_y - stemletYOffset + y_base_offset);
ctx.lineTo(stem_x, stem_y - stemHeight - (<span class="hljs-keyword">this</span>.renderHeightAdjustment * stem_direction));
ctx.stroke();
<span class="hljs-keyword">this</span>.restoreStyle(ctx);
ctx.restore();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>