vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
1,056 lines (765 loc) • 41.8 kB
HTML
<html>
<head>
<title>tuplet.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>tuplet.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>
<div class='highlight'><pre>
<span class="hljs-comment">/**
* ## Description
*
* Create a new tuplet from the specified notes. The notes must
* be part of the same voice. If they are of different rhythmic
* values, then options.num_notes must be set.
*
* @constructor
* @param {Array.<Vex.Flow.StaveNote>} A set of notes: staveNotes,
* notes, etc... any class that inherits stemmableNote at some
* point in its prototype chain.
* @param options: object {
*
* num_notes: fit this many notes into...
* notes_occupied: ...the space of this many notes
*
* Together, these two properties make up the tuplet ratio
* in the form of num_notes : notes_occupied.
* num_notes defaults to the number of notes passed in, so
* it is important that if you omit this property, all of
* the notes passed should be of the same note value.
* notes_occupied defaults to 2 -- so you should almost
* certainly pass this parameter for anything other than
* a basic triplet.
*
* location:
* default 1, which is above the notes: ┌─── 3 ───┐
* -1 is below the notes └─── 3 ───┘
*
* bracketed: boolean, draw a bracket around the tuplet number
* when true: ┌─── 3 ───┐ when false: 3
* defaults to true if notes are not beamed, false otherwise
*
* ratioed: boolean
* when true: ┌─── 7:8 ───┐, when false: ┌─── 7 ───┐
* defaults to true if the difference between num_notes and
* notes_occupied is greater than 1.
*
* y_offset: int, default 0
* manually offset a tuplet, for instance to avoid collisions
* with articulations, etc...
* }
*/</span>
<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> { Formatter } <span class="hljs-keyword">from</span> <span class="hljs-string">'./formatter'</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> { Stem } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stem'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Tuplet</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Element</span> </span>{
<span class="hljs-keyword">static</span> get LOCATION_TOP() {
<span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
}
<span class="hljs-keyword">static</span> get LOCATION_BOTTOM() {
<span class="hljs-keyword">return</span> <span class="hljs-number">-1</span>;
}
<span class="hljs-keyword">static</span> get NESTING_OFFSET() {
<span class="hljs-keyword">return</span> <span class="hljs-number">15</span>;
}
<span class="hljs-keyword">constructor</span>(notes, options) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Tuplet'</span>);
<span class="hljs-keyword">if</span> (!notes || !notes.length) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">'No notes provided for tuplet.'</span>);
}
<span class="hljs-keyword">this</span>.options = Vex.Merge({}, options);
<span class="hljs-keyword">this</span>.notes = notes;
<span class="hljs-keyword">this</span>.num_notes = <span class="hljs-string">'num_notes'</span> <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span>.options ?
<span class="hljs-keyword">this</span>.options.num_notes : notes.length;</pre></div>
<p>We accept beats_occupied, but warn that it’s deprecated:
the preferred property name is now notes_occupied.</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.options.beats_occupied) {
<span class="hljs-keyword">this</span>.beatsOccupiedDeprecationWarning();
}
<span class="hljs-keyword">this</span>.notes_occupied = <span class="hljs-keyword">this</span>.options.notes_occupied ||
<span class="hljs-keyword">this</span>.options.beats_occupied ||
<span class="hljs-number">2</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-string">'bracketed'</span> <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span>.options) {
<span class="hljs-keyword">this</span>.bracketed = <span class="hljs-keyword">this</span>.options.bracketed;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.bracketed =
notes.some(<span class="hljs-function"><span class="hljs-params">note</span> =></span> note.beam === <span class="hljs-literal">null</span>);
}
<span class="hljs-keyword">this</span>.ratioed = <span class="hljs-string">'ratioed'</span> <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span>.options ?
<span class="hljs-keyword">this</span>.options.ratioed :
(<span class="hljs-built_in">Math</span>.abs(<span class="hljs-keyword">this</span>.notes_occupied - <span class="hljs-keyword">this</span>.num_notes) > <span class="hljs-number">1</span>);
<span class="hljs-keyword">this</span>.point = <span class="hljs-keyword">this</span>.musicFont.lookupMetric(<span class="hljs-string">'digits.tupletPoint'</span>);
<span class="hljs-keyword">this</span>.y_pos = <span class="hljs-number">16</span>;
<span class="hljs-keyword">this</span>.x_pos = <span class="hljs-number">100</span>;
<span class="hljs-keyword">this</span>.width = <span class="hljs-number">200</span>;
<span class="hljs-keyword">this</span>.location = <span class="hljs-keyword">this</span>.options.location || Tuplet.LOCATION_TOP;
Formatter.AlignRestsToNotes(notes, <span class="hljs-literal">true</span>, <span class="hljs-literal">true</span>);
<span class="hljs-keyword">this</span>.resolveGlyphs();
<span class="hljs-keyword">this</span>.attach();
}
attach() {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.notes.length; i++) {
<span class="hljs-keyword">const</span> note = <span class="hljs-keyword">this</span>.notes[i];
note.setTuplet(<span class="hljs-keyword">this</span>);
}
}
detach() {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.notes.length; i++) {
<span class="hljs-keyword">const</span> note = <span class="hljs-keyword">this</span>.notes[i];
note.resetTuplet(<span class="hljs-keyword">this</span>);
}
}
<span class="hljs-comment">/**
* Set whether or not the bracket is drawn.
*/</span>
setBracketed(bracketed) {
<span class="hljs-keyword">this</span>.bracketed = !!bracketed;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
<span class="hljs-comment">/**
* Set whether or not the ratio is shown.
*/</span>
setRatioed(ratioed) {
<span class="hljs-keyword">this</span>.ratioed = !!ratioed;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
<span class="hljs-comment">/**
* Set the tuplet to be displayed either on the top or bottom of the stave
*/</span>
setTupletLocation(location) {
<span class="hljs-keyword">if</span> (!location) {
location = Tuplet.LOCATION_TOP;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (location !== Tuplet.LOCATION_TOP && location !== Tuplet.LOCATION_BOTTOM) {
<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 tuplet location: '</span> + location);
}
<span class="hljs-keyword">this</span>.location = location;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
getNotes() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.notes;
}
getNoteCount() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.num_notes;
}
beatsOccupiedDeprecationWarning() {
<span class="hljs-keyword">const</span> msg = [
<span class="hljs-string">'beats_occupied has been deprecated as an '</span>,
<span class="hljs-string">'option for tuplets. Please use notes_occupied '</span>,
<span class="hljs-string">'instead. Calls to getBeatsOccupied and '</span>,
<span class="hljs-string">'setBeatsOccupied should now be routed to '</span>,
<span class="hljs-string">'getNotesOccupied and setNotesOccupied instead'</span>,
].join(<span class="hljs-string">''</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">console</span> && <span class="hljs-built_in">console</span>.warn) { <span class="hljs-comment">// eslint-disable-line no-console</span>
<span class="hljs-built_in">console</span>.warn(msg); <span class="hljs-comment">// eslint-disable-line no-console</span>
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-built_in">console</span>) {
<span class="hljs-built_in">console</span>.log(msg); <span class="hljs-comment">// eslint-disable-line no-console</span>
}
}
getBeatsOccupied() {
<span class="hljs-keyword">this</span>.beatsOccupiedDeprecationWarning();
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.getNotesOccupied();
}
setBeatsOccupied(beats) {
<span class="hljs-keyword">this</span>.beatsOccupiedDeprecationWarning();
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.setNotesOccupied(beats);
}
getNotesOccupied() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.notes_occupied;
}
setNotesOccupied(notes) {
<span class="hljs-keyword">this</span>.detach();
<span class="hljs-keyword">this</span>.notes_occupied = notes;
<span class="hljs-keyword">this</span>.resolveGlyphs();
<span class="hljs-keyword">this</span>.attach();
}
resolveGlyphs() {
<span class="hljs-keyword">this</span>.numerator_glyphs = [];
<span class="hljs-keyword">let</span> n = <span class="hljs-keyword">this</span>.num_notes;
<span class="hljs-keyword">while</span> (n >= <span class="hljs-number">1</span>) {
<span class="hljs-keyword">this</span>.numerator_glyphs.unshift(<span class="hljs-keyword">new</span> Glyph(<span class="hljs-string">'timeSig'</span> + (n % <span class="hljs-number">10</span>), <span class="hljs-keyword">this</span>.point));
n = <span class="hljs-built_in">parseInt</span>(n / <span class="hljs-number">10</span>, <span class="hljs-number">10</span>);
}
<span class="hljs-keyword">this</span>.denom_glyphs = [];
n = <span class="hljs-keyword">this</span>.notes_occupied;
<span class="hljs-keyword">while</span> (n >= <span class="hljs-number">1</span>) {
<span class="hljs-keyword">this</span>.denom_glyphs.unshift(<span class="hljs-keyword">new</span> Glyph(<span class="hljs-string">'timeSig'</span> + (n % <span class="hljs-number">10</span>), <span class="hljs-keyword">this</span>.point));
n = <span class="hljs-built_in">parseInt</span>(n / <span class="hljs-number">10</span>, <span class="hljs-number">10</span>);
}
}</pre></div>
<p>determine how many tuplets are nested within this tuplet
on the same side (above/below), to calculate a y
offset for this tuplet:</p>
<div class='highlight'><pre> getNestedTupletCount() {
<span class="hljs-keyword">const</span> location = <span class="hljs-keyword">this</span>.location;
<span class="hljs-keyword">const</span> first_note = <span class="hljs-keyword">this</span>.notes[<span class="hljs-number">0</span>];
<span class="hljs-keyword">let</span> maxTupletCount = countTuplets(first_note, location);
<span class="hljs-keyword">let</span> minTupletCount = countTuplets(first_note, location);</pre></div>
<p>Count the tuplets that are on the same side (above/below)
as this tuplet:</p>
<div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">countTuplets</span>(<span class="hljs-params">note, location</span>) </span>{
<span class="hljs-keyword">return</span> note.tupletStack.filter(<span class="hljs-function"><span class="hljs-params">tuplet</span> =></span> tuplet.location === location).length;
}
<span class="hljs-keyword">this</span>.notes.forEach(<span class="hljs-function"><span class="hljs-params">note</span> =></span> {
<span class="hljs-keyword">const</span> tupletCount = countTuplets(note, location);
maxTupletCount = tupletCount > maxTupletCount ? tupletCount : maxTupletCount;
minTupletCount = tupletCount < minTupletCount ? tupletCount : minTupletCount;
});
<span class="hljs-keyword">return</span> maxTupletCount - minTupletCount;
}</pre></div>
<p>determine the y position of the tuplet:</p>
<div class='highlight'><pre> getYPosition() {</pre></div>
<p>offset the tuplet for any nested tuplets between
it and the notes:</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> nested_tuplet_y_offset =
<span class="hljs-keyword">this</span>.getNestedTupletCount() *
Tuplet.NESTING_OFFSET *
-<span class="hljs-keyword">this</span>.location;</pre></div>
<p>offset the tuplet for any manual y_offset:</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> y_offset = <span class="hljs-keyword">this</span>.options.y_offset || <span class="hljs-number">0</span>;</pre></div>
<p>now iterate through the notes and find our highest
or lowest locations, to form a base y_pos</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> first_note = <span class="hljs-keyword">this</span>.notes[<span class="hljs-number">0</span>];
<span class="hljs-keyword">let</span> y_pos;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.location === Tuplet.LOCATION_TOP) {
y_pos = first_note.getStave().getYForLine(<span class="hljs-number">0</span>) - <span class="hljs-number">15</span>;</pre></div>
<p>y_pos = first_note.getStemExtents().topY - 10;</p>
<div class='highlight'><pre>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.notes.length; ++i) {
<span class="hljs-keyword">const</span> top_y = <span class="hljs-keyword">this</span>.notes[i].getStemDirection() === Stem.UP
? <span class="hljs-keyword">this</span>.notes[i].getStemExtents().topY - <span class="hljs-number">10</span>
: <span class="hljs-keyword">this</span>.notes[i].getStemExtents().baseY - <span class="hljs-number">20</span>;
<span class="hljs-keyword">if</span> (top_y < y_pos) {
y_pos = top_y;
}
}
} <span class="hljs-keyword">else</span> {
y_pos = first_note.getStave().getYForLine(<span class="hljs-number">4</span>) + <span class="hljs-number">20</span>;
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.notes.length; ++i) {
<span class="hljs-keyword">const</span> bottom_y = <span class="hljs-keyword">this</span>.notes[i].getStemDirection() === Stem.UP
? <span class="hljs-keyword">this</span>.notes[i].getStemExtents().baseY + <span class="hljs-number">20</span>
: <span class="hljs-keyword">this</span>.notes[i].getStemExtents().topY + <span class="hljs-number">10</span>;
<span class="hljs-keyword">if</span> (bottom_y > y_pos) {
y_pos = bottom_y;
}
}
}
<span class="hljs-keyword">return</span> y_pos + nested_tuplet_y_offset + y_offset;
}
draw() {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">this</span>.setRendered();</pre></div>
<p>determine x value of left bound of tuplet</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> first_note = <span class="hljs-keyword">this</span>.notes[<span class="hljs-number">0</span>];
<span class="hljs-keyword">const</span> last_note = <span class="hljs-keyword">this</span>.notes[<span class="hljs-keyword">this</span>.notes.length - <span class="hljs-number">1</span>];
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.bracketed) {
<span class="hljs-keyword">this</span>.x_pos = first_note.getStemX();
<span class="hljs-keyword">this</span>.width = last_note.getStemX() - <span class="hljs-keyword">this</span>.x_pos;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.x_pos = first_note.getTieLeftX() - <span class="hljs-number">5</span>;
<span class="hljs-keyword">this</span>.width = last_note.getTieRightX() - <span class="hljs-keyword">this</span>.x_pos + <span class="hljs-number">5</span>;
}</pre></div>
<p>determine y value for tuplet</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.y_pos = <span class="hljs-keyword">this</span>.getYPosition();
<span class="hljs-keyword">const</span> addGlyphWidth = <span class="hljs-function">(<span class="hljs-params">width, glyph</span>) =></span> width + glyph.getMetrics().width;</pre></div>
<p>calculate total width of tuplet notation</p>
<div class='highlight'><pre> <span class="hljs-keyword">let</span> width = <span class="hljs-keyword">this</span>.numerator_glyphs.reduce(addGlyphWidth, <span class="hljs-number">0</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.ratioed) {
width = <span class="hljs-keyword">this</span>.denom_glyphs.reduce(addGlyphWidth, width);
width += <span class="hljs-keyword">this</span>.point * <span class="hljs-number">0.32</span>;
}
<span class="hljs-keyword">const</span> notation_center_x = <span class="hljs-keyword">this</span>.x_pos + (<span class="hljs-keyword">this</span>.width / <span class="hljs-number">2</span>);
<span class="hljs-keyword">const</span> notation_start_x = notation_center_x - (width / <span class="hljs-number">2</span>);</pre></div>
<p>draw bracket if the tuplet is not beamed</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.bracketed) {
<span class="hljs-keyword">const</span> line_width = <span class="hljs-keyword">this</span>.width / <span class="hljs-number">2</span> - width / <span class="hljs-number">2</span> - <span class="hljs-number">5</span>;</pre></div>
<p>only draw the bracket if it has positive length</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (line_width > <span class="hljs-number">0</span>) {
<span class="hljs-keyword">this</span>.context.fillRect(<span class="hljs-keyword">this</span>.x_pos, <span class="hljs-keyword">this</span>.y_pos, line_width, <span class="hljs-number">1</span>);
<span class="hljs-keyword">this</span>.context.fillRect(
<span class="hljs-keyword">this</span>.x_pos + <span class="hljs-keyword">this</span>.width / <span class="hljs-number">2</span> + width / <span class="hljs-number">2</span> + <span class="hljs-number">5</span>,
<span class="hljs-keyword">this</span>.y_pos,
line_width,
<span class="hljs-number">1</span>
);
<span class="hljs-keyword">this</span>.context.fillRect(
<span class="hljs-keyword">this</span>.x_pos,
<span class="hljs-keyword">this</span>.y_pos + (<span class="hljs-keyword">this</span>.location === Tuplet.LOCATION_BOTTOM),
<span class="hljs-number">1</span>,
<span class="hljs-keyword">this</span>.location * <span class="hljs-number">10</span>
);
<span class="hljs-keyword">this</span>.context.fillRect(
<span class="hljs-keyword">this</span>.x_pos + <span class="hljs-keyword">this</span>.width,
<span class="hljs-keyword">this</span>.y_pos + (<span class="hljs-keyword">this</span>.location === Tuplet.LOCATION_BOTTOM),
<span class="hljs-number">1</span>,
<span class="hljs-keyword">this</span>.location * <span class="hljs-number">10</span>
);
}
}</pre></div>
<p>draw numerator glyphs</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> shiftY = <span class="hljs-keyword">this</span>.musicFont.lookupMetric(<span class="hljs-string">'digits.shiftY'</span>, <span class="hljs-number">0</span>);
<span class="hljs-keyword">let</span> x_offset = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.numerator_glyphs.forEach(<span class="hljs-function"><span class="hljs-params">glyph</span> =></span> {
glyph.render(<span class="hljs-keyword">this</span>.context, notation_start_x + x_offset, <span class="hljs-keyword">this</span>.y_pos + (<span class="hljs-keyword">this</span>.point / <span class="hljs-number">3</span>) - <span class="hljs-number">2</span> + shiftY);
x_offset += glyph.getMetrics().width;
});</pre></div>
<p>display colon and denominator if the ratio is to be shown</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.ratioed) {
<span class="hljs-keyword">const</span> colon_x = notation_start_x + x_offset + <span class="hljs-keyword">this</span>.point * <span class="hljs-number">0.16</span>;
<span class="hljs-keyword">const</span> colon_radius = <span class="hljs-keyword">this</span>.point * <span class="hljs-number">0.06</span>;
<span class="hljs-keyword">this</span>.context.beginPath();
<span class="hljs-keyword">this</span>.context.arc(colon_x, <span class="hljs-keyword">this</span>.y_pos - <span class="hljs-keyword">this</span>.point * <span class="hljs-number">0.08</span>, colon_radius, <span class="hljs-number">0</span>, <span class="hljs-built_in">Math</span>.PI * <span class="hljs-number">2</span>, <span class="hljs-literal">true</span>);
<span class="hljs-keyword">this</span>.context.closePath();
<span class="hljs-keyword">this</span>.context.fill();
<span class="hljs-keyword">this</span>.context.beginPath();
<span class="hljs-keyword">this</span>.context.arc(colon_x, <span class="hljs-keyword">this</span>.y_pos + <span class="hljs-keyword">this</span>.point * <span class="hljs-number">0.12</span>, colon_radius, <span class="hljs-number">0</span>, <span class="hljs-built_in">Math</span>.PI * <span class="hljs-number">2</span>, <span class="hljs-literal">true</span>);
<span class="hljs-keyword">this</span>.context.closePath();
<span class="hljs-keyword">this</span>.context.fill();
x_offset += <span class="hljs-keyword">this</span>.point * <span class="hljs-number">0.32</span>;
<span class="hljs-keyword">this</span>.denom_glyphs.forEach(<span class="hljs-function"><span class="hljs-params">glyph</span> =></span> {
glyph.render(<span class="hljs-keyword">this</span>.context, notation_start_x + x_offset, <span class="hljs-keyword">this</span>.y_pos + (<span class="hljs-keyword">this</span>.point / <span class="hljs-number">3</span>) - <span class="hljs-number">2</span> + shiftY);
x_offset += glyph.getMetrics().width;
});
}
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>