vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
841 lines (561 loc) • 27 kB
HTML
<html>
<head>
<title>modifier.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>modifier.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>Modifier</code> is an abstract interface for notational elements that modify
a <code>Note</code>. Examples of modifiers are <code>Accidental</code>, <code>Annotation</code>, <code>Stroke</code>, etc.</p>
<p>For a <code>Modifier</code> instance to be positioned correctly, it must be part of
a <code>ModifierContext</code>. All modifiers in the same context are rendered relative to
one another.</p>
<p>Typically, all modifiers to a note are part of the same <code>ModifierContext</code> instance. Also,
in multi-voice staves, all modifiers to notes on the same <code>tick</code> are part of the same
<code>ModifierContext</code>. This ensures that multiple voices don’t trample all over each other.</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>;</pre></div>
<p>To enable logging for this class. Set <code>Vex.Flow.Modifier.DEBUG</code> to <code>true</code>.
function L(…args) { if (Modifier.DEBUG) Vex.L(‘Vex.Flow.Modifier’, args); }</p>
<div class='highlight'><pre>
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Modifier</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">'none'</span>; }</pre></div>
<p>Modifiers can be positioned almost anywhere, relative to a note.</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get Position() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">LEFT</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">RIGHT</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">ABOVE</span>: <span class="hljs-number">3</span>,
<span class="hljs-attr">BELOW</span>: <span class="hljs-number">4</span>,
};
}
<span class="hljs-keyword">static</span> get PositionString() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">above</span>: Modifier.Position.ABOVE,
<span class="hljs-attr">below</span>: Modifier.Position.BELOW,
<span class="hljs-attr">left</span>: Modifier.Position.LEFT,
<span class="hljs-attr">right</span>: Modifier.Position.RIGHT,
};
}
<span class="hljs-keyword">constructor</span>() {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Modifier'</span>);
<span class="hljs-keyword">this</span>.width = <span class="hljs-number">0</span>;</pre></div>
<p>Modifiers are attached to a note and an index. An index is a
specific head in a chord.</p>
<div class='highlight'><pre> <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>;</pre></div>
<p>The <code>text_line</code> is reserved space above or below a stave.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.text_line = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.position = Modifier.Position.LEFT;
<span class="hljs-keyword">this</span>.modifier_context = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.x_shift = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.y_shift = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.spacingFromNextModifier = <span class="hljs-number">0</span>;
}</pre></div>
<p>Called when position changes</p>
<div class='highlight'><pre> reset() {</pre></div>
<p>do nothing</p>
<div class='highlight'><pre> }</pre></div>
<p>Every modifier has a category. The <code>ModifierContext</code> uses this to determine
the type and order of the modifiers.</p>
<div class='highlight'><pre> getCategory() { <span class="hljs-keyword">return</span> Modifier.CATEGORY; }</pre></div>
<p>Get and set modifier widths.</p>
<div class='highlight'><pre> getWidth() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.width; }
setWidth(width) { <span class="hljs-keyword">this</span>.width = width; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }</pre></div>
<p>Get and set attached note (<code>StaveNote</code>, <code>TabNote</code>, etc.)</p>
<div class='highlight'><pre> getNote() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.note; }
setNote(note) { <span class="hljs-keyword">this</span>.note = note; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }</pre></div>
<p>Get and set note index, which is a specific note in a chord.</p>
<div class='highlight'><pre> getIndex() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.index; }
setIndex(index) { <span class="hljs-keyword">this</span>.index = index; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }</pre></div>
<p>Every modifier must be part of a <code>ModifierContext</code>.</p>
<div class='highlight'><pre> getModifierContext() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.modifier_context; }
setModifierContext(c) { <span class="hljs-keyword">this</span>.modifier_context = c; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }</pre></div>
<p>Get and set articulation position.</p>
<div class='highlight'><pre> getPosition() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.position; }
setPosition(position) {
<span class="hljs-keyword">this</span>.position = <span class="hljs-keyword">typeof</span>(position) === <span class="hljs-string">'string'</span>
? Modifier.PositionString[position]
: position;
<span class="hljs-keyword">this</span>.reset();
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Set the <code>text_line</code> for the modifier.</p>
<div class='highlight'><pre> setTextLine(line) { <span class="hljs-keyword">this</span>.text_line = line; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }</pre></div>
<p>Shift modifier down <code>y</code> pixels. Negative values shift up.</p>
<div class='highlight'><pre> setYShift(y) { <span class="hljs-keyword">this</span>.y_shift = y; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setSpacingFromNextModifier(x) {
<span class="hljs-keyword">this</span>.spacingFromNextModifier = x;
}
getSpacingFromNextModifier() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.spacingFromNextModifier; }</pre></div>
<p>Shift modifier <code>x</code> pixels in the direction of the modifier. Negative values
shift reverse.</p>
<div class='highlight'><pre> setXShift(x) {
<span class="hljs-keyword">this</span>.x_shift = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.position === Modifier.Position.LEFT) {
<span class="hljs-keyword">this</span>.x_shift -= x;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.x_shift += x;
}
}
getXShift() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.x_shift; }</pre></div>
<p>Render the modifier onto the canvas.</p>
<div class='highlight'><pre> draw() {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'MethodNotImplemented'</span>, <span class="hljs-string">'draw() not implemented for this modifier.'</span>);
}</pre></div>
<p>aligns sub notes of NoteSubGroup (or GraceNoteGroup) to the main note with correct x-offset</p>
<div class='highlight'><pre> alignSubNotesWithNote(subNotes, note) {</pre></div>
<p>Shift over the tick contexts of each note</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> tickContext = note.getTickContext();
<span class="hljs-keyword">const</span> metrics = tickContext.getMetrics();
<span class="hljs-keyword">const</span> subNoteXOffset = tickContext.getX() - metrics.modLeftPx - metrics.modRightPx
+ <span class="hljs-keyword">this</span>.getSpacingFromNextModifier();
subNotes.forEach(<span class="hljs-function">(<span class="hljs-params">subNote</span>) =></span> {
<span class="hljs-keyword">const</span> subTickContext = subNote.getTickContext();
subNote.setStave(note.stave);
subTickContext.setXOffset(subNoteXOffset); <span class="hljs-comment">// don't touch baseX to avoid shift each render</span>
});
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>