vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
921 lines (636 loc) • 31.8 kB
HTML
<html>
<head>
<title>tickable.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>tickable.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>The tickable interface. Tickables are things that sit on a score and
have a duration, i.e., they occupy space in the musical rendering dimension.</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>;
<span class="hljs-keyword">import</span> { Fraction } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fraction'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Tickable</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Element</span> </span>{
<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">'Tickable'</span>);</pre></div>
<p>These properties represent the duration of
this tickable element.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.ticks = <span class="hljs-keyword">new</span> Fraction(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>); <span class="hljs-comment">// Fractional value of ticks</span>
<span class="hljs-keyword">this</span>.intrinsicTicks = <span class="hljs-number">0</span>; <span class="hljs-comment">// Floating point value of ticks</span>
<span class="hljs-keyword">this</span>.tickMultiplier = <span class="hljs-keyword">new</span> Fraction(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>);</pre></div>
<p>Formatter metrics</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.width = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.x_shift = <span class="hljs-number">0</span>; <span class="hljs-comment">// Shift from tick context</span>
<span class="hljs-keyword">this</span>.voice = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.tickContext = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.modifierContext = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.modifiers = [];
<span class="hljs-keyword">this</span>.preFormatted = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.postFormatted = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.tuplet = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.tupletStack = [];
<span class="hljs-keyword">this</span>.align_center = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.center_x_shift = <span class="hljs-number">0</span>; <span class="hljs-comment">// Shift from tick context if center aligned</span></pre></div>
<p>This flag tells the formatter to ignore this tickable during
formatting and justification. It is set by tickables such as BarNote.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.ignore_ticks = <span class="hljs-literal">false</span>;</pre></div>
<p>This is a space for an external formatting class or function to maintain
metrics.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.formatterMetrics = {</pre></div>
<p>The freedom of a tickable is the distance it can move without colliding
with neighboring elements. A formatter can set these values during its
formatting pass, which a different formatter can then use to fine tune.</p>
<div class='highlight'><pre> freedom: { <span class="hljs-attr">left</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">right</span>: <span class="hljs-number">0</span> },</pre></div>
<p>The simplified rational duration of this tick as a string. It can be
used as an index to a map or hashtable.</p>
<div class='highlight'><pre> duration: <span class="hljs-string">''</span>,</pre></div>
<p>The number of formatting iterations undergone.</p>
<div class='highlight'><pre> iterations: <span class="hljs-number">0</span>,</pre></div>
<p>The space in pixels allocated by this formatter, along with the mean space
for tickables of this duration, and the deviation from the mean.</p>
<div class='highlight'><pre> space: {
<span class="hljs-attr">used</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">mean</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">deviation</span>: <span class="hljs-number">0</span>,
},
};
}
reset() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
getTicks() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.ticks; }
shouldIgnoreTicks() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.ignore_ticks; }</pre></div>
<p>Get and set width of note. Used by the formatter for positioning.</p>
<div class='highlight'><pre> setWidth(width) { <span class="hljs-keyword">this</span>.width = width; }
getWidth() {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.preFormatted) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'UnformattedNote'</span>, <span class="hljs-string">"Can't call GetWidth on an unformatted note."</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.width + (<span class="hljs-keyword">this</span>.modifierContext ? <span class="hljs-keyword">this</span>.modifierContext.getWidth() : <span class="hljs-number">0</span>);
}</pre></div>
<p>Displace note by <code>x</code> pixels. Used by the formatter.</p>
<div class='highlight'><pre> setXShift(x) { <span class="hljs-keyword">this</span>.x_shift = x; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
getXShift() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.x_shift; }</pre></div>
<p>Get <code>X</code> position of this tick context.</p>
<div class='highlight'><pre> getX() {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.tickContext) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'NoTickContext'</span>, <span class="hljs-string">'Note needs a TickContext assigned for an X-Value'</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.tickContext.getX() + <span class="hljs-keyword">this</span>.x_shift;
}
getFormatterMetrics() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.formatterMetrics; }
getCenterXShift() {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.isCenterAligned()) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.center_x_shift;
}
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
isCenterAligned() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.align_center; }
setCenterAlignment(align_center) {
<span class="hljs-keyword">this</span>.align_center = align_center;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Every tickable must be associated with a voice. This allows formatters
and preFormatter to associate them with the right modifierContexts.</p>
<div class='highlight'><pre> getVoice() {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.voice) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'NoVoice'</span>, <span class="hljs-string">'Tickable has no voice.'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.voice;
}
setVoice(voice) { <span class="hljs-keyword">this</span>.voice = voice; }
getTuplet() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.tuplet; }
<span class="hljs-comment">/*
* resetTuplet
* @param tuplet -- the specific tuplet to reset
* if this is not provided, all tuplets are reset.
* @returns this
*
* Removes any prior tuplets from the tick calculation and
* resets the intrinsic tick value to
*/</span>
resetTuplet(tuplet) {
<span class="hljs-keyword">let</span> noteCount;
<span class="hljs-keyword">let</span> notesOccupied;
<span class="hljs-keyword">if</span> (tuplet) {
<span class="hljs-keyword">const</span> i = <span class="hljs-keyword">this</span>.tupletStack.indexOf(tuplet);
<span class="hljs-keyword">if</span> (i !== <span class="hljs-number">-1</span>) {
<span class="hljs-keyword">this</span>.tupletStack.splice(i, <span class="hljs-number">1</span>);
noteCount = tuplet.getNoteCount();
notesOccupied = tuplet.getNotesOccupied();</pre></div>
<p>Revert old multiplier by inverting numerator & denom.:</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.applyTickMultiplier(noteCount, notesOccupied);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
<span class="hljs-keyword">while</span> (<span class="hljs-keyword">this</span>.tupletStack.length) {
tuplet = <span class="hljs-keyword">this</span>.tupletStack.pop();
noteCount = tuplet.getNoteCount();
notesOccupied = tuplet.getNotesOccupied();</pre></div>
<p>Revert old multiplier by inverting numerator & denom.:</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.applyTickMultiplier(noteCount, notesOccupied);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setTuplet(tuplet) {</pre></div>
<p>Attach to new tuplet</p>
<div class='highlight'><pre>
<span class="hljs-keyword">if</span> (tuplet) {
<span class="hljs-keyword">this</span>.tupletStack.push(tuplet);
<span class="hljs-keyword">const</span> noteCount = tuplet.getNoteCount();
<span class="hljs-keyword">const</span> notesOccupied = tuplet.getNotesOccupied();
<span class="hljs-keyword">this</span>.applyTickMultiplier(notesOccupied, noteCount);
}
<span class="hljs-keyword">this</span>.tuplet = tuplet;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
<span class="hljs-comment">/** optional, if tickable has modifiers **/</span>
addToModifierContext(mc) {
<span class="hljs-keyword">this</span>.modifierContext = mc;</pre></div>
<p>Add modifiers to modifier context (if any)</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.preFormatted = <span class="hljs-literal">false</span>;
}
<span class="hljs-comment">/** optional, if tickable has modifiers **/</span>
addModifier(mod) {
<span class="hljs-keyword">this</span>.modifiers.push(mod);
<span class="hljs-keyword">this</span>.preFormatted = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
getModifiers() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.modifiers;
}
setTickContext(tc) {
<span class="hljs-keyword">this</span>.tickContext = tc;
<span class="hljs-keyword">this</span>.preFormatted = <span class="hljs-literal">false</span>;
}
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>.width = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.modifierContext) {
<span class="hljs-keyword">this</span>.modifierContext.preFormat();
<span class="hljs-keyword">this</span>.width += <span class="hljs-keyword">this</span>.modifierContext.getWidth();
}
}
postFormat() {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.postFormatted) <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
<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>;
}
getIntrinsicTicks() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.intrinsicTicks;
}
setIntrinsicTicks(intrinsicTicks) {
<span class="hljs-keyword">this</span>.intrinsicTicks = intrinsicTicks;
<span class="hljs-keyword">this</span>.ticks = <span class="hljs-keyword">this</span>.tickMultiplier.clone().multiply(<span class="hljs-keyword">this</span>.intrinsicTicks);
}
getTickMultiplier() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.tickMultiplier;
}
applyTickMultiplier(numerator, denominator) {
<span class="hljs-keyword">this</span>.tickMultiplier.multiply(numerator, denominator);
<span class="hljs-keyword">this</span>.ticks = <span class="hljs-keyword">this</span>.tickMultiplier.clone().multiply(<span class="hljs-keyword">this</span>.intrinsicTicks);
}
setDuration(duration) {
<span class="hljs-keyword">const</span> ticks = duration.numerator * (Flow.RESOLUTION / duration.denominator);
<span class="hljs-keyword">this</span>.ticks = <span class="hljs-keyword">this</span>.tickMultiplier.clone().multiply(ticks);
<span class="hljs-keyword">this</span>.intrinsicTicks = <span class="hljs-keyword">this</span>.ticks.value();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>