vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
899 lines (661 loc) • 34 kB
HTML
<html>
<head>
<title>strokes.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>strokes.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.
Author: Larry Kuhns</p>
<h2 id="description">Description</h2>
<p>This file implements the <code>Stroke</code> class which renders chord strokes
that can be arpeggiated, brushed, rasquedo, etc.</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> { Modifier } <span class="hljs-keyword">from</span> <span class="hljs-string">'./modifier'</span>;
<span class="hljs-keyword">import</span> { StaveNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavenote'</span>;
<span class="hljs-keyword">import</span> { Glyph } <span class="hljs-keyword">from</span> <span class="hljs-string">'./glyph'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Stroke</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">'strokes'</span>; }
<span class="hljs-keyword">static</span> get Type() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">BRUSH_DOWN</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">BRUSH_UP</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">ROLL_DOWN</span>: <span class="hljs-number">3</span>, <span class="hljs-comment">// Arpeggiated chord</span>
ROLL_UP: <span class="hljs-number">4</span>, <span class="hljs-comment">// Arpeggiated chord</span>
RASQUEDO_DOWN: <span class="hljs-number">5</span>,
<span class="hljs-attr">RASQUEDO_UP</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">ARPEGGIO_DIRECTIONLESS</span>: <span class="hljs-number">7</span>, <span class="hljs-comment">// Arpeggiated chord without upwards or downwards arrow</span>
};
}</pre></div>
<p>Arrange strokes inside <code>ModifierContext</code></p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> format(strokes, state) {
<span class="hljs-keyword">const</span> left_shift = state.left_shift;
<span class="hljs-keyword">const</span> stroke_spacing = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (!strokes || strokes.length === <span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">const</span> strokeList = strokes.map(<span class="hljs-function">(<span class="hljs-params">stroke</span>) =></span> {
<span class="hljs-keyword">const</span> note = stroke.getNote();
<span class="hljs-keyword">if</span> (note <span class="hljs-keyword">instanceof</span> StaveNote) {
<span class="hljs-keyword">const</span> { line } = note.getKeyProps()[stroke.getIndex()];
<span class="hljs-keyword">const</span> shift = note.getLeftDisplacedHeadPx();
<span class="hljs-keyword">return</span> { line, shift, stroke };
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> { <span class="hljs-attr">str</span>: string } = note.getPositions()[stroke.getIndex()];
<span class="hljs-keyword">return</span> { <span class="hljs-attr">line</span>: string, <span class="hljs-attr">shift</span>: <span class="hljs-number">0</span>, stroke };
}
});
<span class="hljs-keyword">const</span> strokeShift = left_shift;</pre></div>
<p>There can only be one stroke .. if more than one, they overlay each other</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> xShift = strokeList.reduce(<span class="hljs-function">(<span class="hljs-params">xShift, { stroke, shift }</span>) =></span> {
stroke.setXShift(strokeShift + shift);
<span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.max(stroke.getWidth() + stroke_spacing, xShift);
}, <span class="hljs-number">0</span>);
state.left_shift += xShift;
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">constructor</span>(type, options) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Stroke'</span>);
<span class="hljs-keyword">this</span>.note = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.options = Vex.Merge({}, options);</pre></div>
<p>multi voice - span stroke across all voices if true</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.all_voices = <span class="hljs-string">'all_voices'</span> <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span>.options ? <span class="hljs-keyword">this</span>.options.all_voices : <span class="hljs-literal">true</span>;</pre></div>
<p>multi voice - end note of stroke, set in draw()</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.note_end = <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>.type = type;
<span class="hljs-keyword">this</span>.position = Modifier.Position.LEFT;
<span class="hljs-keyword">this</span>.render_options = {
<span class="hljs-attr">font_scale</span>: <span class="hljs-number">38</span>,
<span class="hljs-attr">stroke_px</span>: <span class="hljs-number">3</span>,
<span class="hljs-attr">stroke_spacing</span>: <span class="hljs-number">10</span>,
};
<span class="hljs-keyword">this</span>.font = {
<span class="hljs-attr">family</span>: <span class="hljs-string">'serif'</span>,
<span class="hljs-attr">size</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">weight</span>: <span class="hljs-string">'bold italic'</span>,
};
<span class="hljs-keyword">this</span>.setXShift(<span class="hljs-number">0</span>);
<span class="hljs-keyword">this</span>.setWidth(<span class="hljs-number">10</span>);
}
getCategory() { <span class="hljs-keyword">return</span> Stroke.CATEGORY; }
getPosition() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.position; }
addEndNote(note) { <span class="hljs-keyword">this</span>.note_end = note; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
draw() {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">if</span> (!(<span class="hljs-keyword">this</span>.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.RERR(<span class="hljs-string">'NoAttachedNote'</span>, <span class="hljs-string">"Can't draw stroke without a note and index."</span>);
}
<span class="hljs-keyword">const</span> start = <span class="hljs-keyword">this</span>.note.getModifierStartXY(<span class="hljs-keyword">this</span>.position, <span class="hljs-keyword">this</span>.index);
<span class="hljs-keyword">let</span> ys = <span class="hljs-keyword">this</span>.note.getYs();
<span class="hljs-keyword">let</span> topY = start.y;
<span class="hljs-keyword">let</span> botY = start.y;
<span class="hljs-keyword">const</span> x = start.x - <span class="hljs-number">5</span>;
<span class="hljs-keyword">const</span> line_space = <span class="hljs-keyword">this</span>.note.stave.options.spacing_between_lines_px;
<span class="hljs-keyword">const</span> notes = <span class="hljs-keyword">this</span>.getModifierContext().getModifiers(<span class="hljs-keyword">this</span>.note.getCategory());
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < notes.length; i++) {
ys = notes[i].getYs();
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> n = <span class="hljs-number">0</span>; n < ys.length; n++) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.note === notes[i] || <span class="hljs-keyword">this</span>.all_voices) {
topY = Vex.Min(topY, ys[n]);
botY = Vex.Max(botY, ys[n]);
}
}
}
<span class="hljs-keyword">let</span> arrow;
<span class="hljs-keyword">let</span> arrow_shift_x;
<span class="hljs-keyword">let</span> arrow_y;
<span class="hljs-keyword">let</span> text_shift_x;
<span class="hljs-keyword">let</span> text_y;
<span class="hljs-keyword">switch</span> (<span class="hljs-keyword">this</span>.type) {
<span class="hljs-keyword">case</span> Stroke.Type.BRUSH_DOWN:
arrow = <span class="hljs-string">'arrowheadBlackUp'</span>;
arrow_shift_x = <span class="hljs-number">-3</span>;
arrow_y = topY - (line_space / <span class="hljs-number">2</span>) + <span class="hljs-number">10</span>;
botY += (line_space / <span class="hljs-number">2</span>);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Stroke.Type.BRUSH_UP:
arrow = <span class="hljs-string">'arrowheadBlackDown'</span>;
arrow_shift_x = <span class="hljs-number">0.5</span>;
arrow_y = botY + (line_space / <span class="hljs-number">2</span>);
topY -= (line_space / <span class="hljs-number">2</span>);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Stroke.Type.ROLL_DOWN:
<span class="hljs-keyword">case</span> Stroke.Type.RASQUEDO_DOWN:
arrow = <span class="hljs-string">'arrowheadBlackUp'</span>;
arrow_shift_x = <span class="hljs-number">-3</span>;
text_shift_x = <span class="hljs-keyword">this</span>.x_shift + arrow_shift_x - <span class="hljs-number">2</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.note <span class="hljs-keyword">instanceof</span> StaveNote) {
topY += <span class="hljs-number">1.5</span> * line_space;
<span class="hljs-keyword">if</span> ((botY - topY) % <span class="hljs-number">2</span> !== <span class="hljs-number">0</span>) {
botY += <span class="hljs-number">0.5</span> * line_space;
} <span class="hljs-keyword">else</span> {
botY += line_space;
}
arrow_y = topY - line_space;
text_y = botY + line_space + <span class="hljs-number">2</span>;
} <span class="hljs-keyword">else</span> {
topY += <span class="hljs-number">1.5</span> * line_space;
botY += line_space;
arrow_y = topY - <span class="hljs-number">0.75</span> * line_space;
text_y = botY + <span class="hljs-number">0.25</span> * line_space;
}
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Stroke.Type.ROLL_UP:
<span class="hljs-keyword">case</span> Stroke.Type.RASQUEDO_UP:
arrow = <span class="hljs-string">'arrowheadBlackDown'</span>;
arrow_shift_x = <span class="hljs-number">-4</span>;
text_shift_x = <span class="hljs-keyword">this</span>.x_shift + arrow_shift_x - <span class="hljs-number">1</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.note <span class="hljs-keyword">instanceof</span> StaveNote) {
arrow_y = line_space / <span class="hljs-number">2</span>;
topY += <span class="hljs-number">0.5</span> * line_space;
<span class="hljs-keyword">if</span> ((botY - topY) % <span class="hljs-number">2</span> === <span class="hljs-number">0</span>) {
botY += line_space / <span class="hljs-number">2</span>;
}
arrow_y = botY + <span class="hljs-number">0.5</span> * line_space;
text_y = topY - <span class="hljs-number">1.25</span> * line_space;
} <span class="hljs-keyword">else</span> {
topY += <span class="hljs-number">0.25</span> * line_space;
botY += <span class="hljs-number">0.5</span> * line_space;
arrow_y = botY + <span class="hljs-number">0.25</span> * line_space;
text_y = topY - line_space;
}
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Stroke.Type.ARPEGGIO_DIRECTIONLESS:
topY += <span class="hljs-number">0.5</span> * line_space;
botY += line_space; <span class="hljs-comment">// * 0.5 can lead to slight underlap instead of overlap sometimes</span>
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'InvalidType'</span>, <span class="hljs-string">`The stroke type <span class="hljs-subst">${<span class="hljs-keyword">this</span>.type}</span> does not exist`</span>);
}
<span class="hljs-keyword">let</span> strokeLine = <span class="hljs-string">'straight'</span>;</pre></div>
<p>Draw the stroke</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.type === Stroke.Type.BRUSH_DOWN || <span class="hljs-keyword">this</span>.type === Stroke.Type.BRUSH_UP) {
<span class="hljs-keyword">this</span>.context.fillRect(x + <span class="hljs-keyword">this</span>.x_shift, topY, <span class="hljs-number">1</span>, botY - topY);
} <span class="hljs-keyword">else</span> {
strokeLine = <span class="hljs-string">'wiggly'</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.note <span class="hljs-keyword">instanceof</span> StaveNote) {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = topY; i <= botY; i += line_space) {
Glyph.renderGlyph(
<span class="hljs-keyword">this</span>.context,
x + <span class="hljs-keyword">this</span>.x_shift - <span class="hljs-number">4</span>,
i,
<span class="hljs-keyword">this</span>.render_options.font_scale,
<span class="hljs-string">'vexWiggleArpeggioUp'</span>
);
}
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">let</span> i;
<span class="hljs-keyword">for</span> (i = topY; i <= botY; i += <span class="hljs-number">10</span>) {
Glyph.renderGlyph(
<span class="hljs-keyword">this</span>.context,
x + <span class="hljs-keyword">this</span>.x_shift - <span class="hljs-number">4</span>,
i,
<span class="hljs-keyword">this</span>.render_options.font_scale,
<span class="hljs-string">'vexWiggleArpeggioUp'</span>
);
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.type === Stroke.Type.RASQUEDO_DOWN) {
text_y = i + <span class="hljs-number">0.25</span> * line_space;
}
}
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.type === Stroke.Type.ARPEGGIO_DIRECTIONLESS) {
<span class="hljs-keyword">return</span>; <span class="hljs-comment">// skip drawing arrow heads or text</span>
}</pre></div>
<p>Draw the arrow head</p>
<div class='highlight'><pre> Glyph.renderGlyph(
<span class="hljs-keyword">this</span>.context,
x + <span class="hljs-keyword">this</span>.x_shift + arrow_shift_x,
arrow_y,
<span class="hljs-keyword">this</span>.render_options.font_scale,
arrow,
{ <span class="hljs-attr">category</span>: <span class="hljs-string">`stroke.<span class="hljs-subst">${arrow}</span>.<span class="hljs-subst">${strokeLine}</span>`</span> }
);</pre></div>
<p>Draw the rasquedo “R”</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.type === Stroke.Type.RASQUEDO_DOWN || <span class="hljs-keyword">this</span>.type === Stroke.Type.RASQUEDO_UP) {
<span class="hljs-keyword">this</span>.context.save();
<span class="hljs-keyword">this</span>.context.setFont(<span class="hljs-keyword">this</span>.font.family, <span class="hljs-keyword">this</span>.font.size, <span class="hljs-keyword">this</span>.font.weight);
<span class="hljs-keyword">this</span>.context.fillText(<span class="hljs-string">'R'</span>, x + text_shift_x, text_y);
<span class="hljs-keyword">this</span>.context.restore();
}
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>