vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
925 lines (692 loc) • 106 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>tables.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>tables.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">/* eslint-disable key-spacing */</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> { Fraction } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fraction'</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> { DefaultFontStack } <span class="hljs-keyword">from</span> <span class="hljs-string">'./smufl'</span>;
<span class="hljs-keyword">const</span> Flow = {
<span class="hljs-attr">STEM_WIDTH</span>: <span class="hljs-number">1.5</span>,
<span class="hljs-attr">STEM_HEIGHT</span>: <span class="hljs-number">35</span>,
<span class="hljs-attr">STAVE_LINE_THICKNESS</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">RESOLUTION</span>: <span class="hljs-number">16384</span>,
<span class="hljs-attr">DEFAULT_FONT_STACK</span>: DefaultFontStack,
<span class="hljs-attr">DEFAULT_NOTATION_FONT_SCALE</span>: <span class="hljs-number">39</span>,
<span class="hljs-attr">DEFAULT_TABLATURE_FONT_SCALE</span>: <span class="hljs-number">39</span>,
<span class="hljs-attr">SLASH_NOTEHEAD_WIDTH</span>: <span class="hljs-number">15</span>,</pre></div>
<p>HACK:
Since text origins are positioned at the baseline, we must
compensate for the ascender of the text. Of course, 1 staff space is
a very poor approximation.</p>
<p>This will be deprecated in the future. This is a temporary solution until
we have more robust text metrics.</p>
<div class='highlight'><pre> TEXT_HEIGHT_OFFSET_HACK: <span class="hljs-number">1</span>,
<span class="hljs-comment">/* Kerning (DEPRECATED) */</span>
IsKerned: <span class="hljs-literal">true</span>,
};
Flow.clefProperties = <span class="hljs-function"><span class="hljs-params">clef</span> =></span> {
<span class="hljs-keyword">if</span> (!clef) <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 clef: '</span> + clef);
<span class="hljs-keyword">const</span> props = Flow.clefProperties.values[clef];
<span class="hljs-keyword">if</span> (!props) <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 clef: '</span> + clef);
<span class="hljs-keyword">return</span> props;
};
Flow.clefProperties.values = {
<span class="hljs-string">'treble'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">0</span> },
<span class="hljs-string">'bass'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">6</span> },
<span class="hljs-string">'tenor'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">4</span> },
<span class="hljs-string">'alto'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">3</span> },
<span class="hljs-string">'soprano'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">1</span> },
<span class="hljs-string">'percussion'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">0</span> },
<span class="hljs-string">'mezzo-soprano'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">2</span> },
<span class="hljs-string">'baritone-c'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">5</span> },
<span class="hljs-string">'baritone-f'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">5</span> },
<span class="hljs-string">'subbass'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">7</span> },
<span class="hljs-string">'french'</span>: { <span class="hljs-attr">line_shift</span>: <span class="hljs-number">-1</span> },
};
<span class="hljs-comment">/*
Take a note in the format "Key/Octave" (e.g., "C/5") and return properties.
The last argument, params, is a struct the currently can contain one option,
octave_shift for clef ottavation (0 = default; 1 = 8va; -1 = 8vb, etc.).
*/</span>
Flow.keyProperties = <span class="hljs-function">(<span class="hljs-params">key, clef, params</span>) =></span> {
<span class="hljs-keyword">if</span> (clef === <span class="hljs-literal">undefined</span>) {
clef = <span class="hljs-string">'treble'</span>;
}
<span class="hljs-keyword">const</span> options = { <span class="hljs-attr">octave_shift</span>: <span class="hljs-number">0</span> };
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> params === <span class="hljs-string">'object'</span>) {
Vex.Merge(options, params);
}
<span class="hljs-keyword">const</span> pieces = key.split(<span class="hljs-string">'/'</span>);
<span class="hljs-keyword">if</span> (pieces.length < <span class="hljs-number">2</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">`Key must have note + octave and an optional glyph: <span class="hljs-subst">${key}</span>`</span>);
}
<span class="hljs-keyword">const</span> k = pieces[<span class="hljs-number">0</span>].toUpperCase();
<span class="hljs-keyword">const</span> value = Flow.keyProperties.note_values[k];
<span class="hljs-keyword">if</span> (!value) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">'Invalid key name: '</span> + k);
<span class="hljs-keyword">if</span> (value.octave) pieces[<span class="hljs-number">1</span>] = value.octave;
<span class="hljs-keyword">let</span> octave = <span class="hljs-built_in">parseInt</span>(pieces[<span class="hljs-number">1</span>], <span class="hljs-number">10</span>);</pre></div>
<p>Octave_shift is the shift to compensate for clef 8va/8vb.</p>
<div class='highlight'><pre> octave += <span class="hljs-number">-1</span> * options.octave_shift;
<span class="hljs-keyword">const</span> base_index = (octave * <span class="hljs-number">7</span>) - (<span class="hljs-number">4</span> * <span class="hljs-number">7</span>);
<span class="hljs-keyword">let</span> line = (base_index + value.index) / <span class="hljs-number">2</span>;
line += Flow.clefProperties(clef).line_shift;
<span class="hljs-keyword">let</span> stroke = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (line <= <span class="hljs-number">0</span> && (((line * <span class="hljs-number">2</span>) % <span class="hljs-number">2</span>) === <span class="hljs-number">0</span>)) stroke = <span class="hljs-number">1</span>; <span class="hljs-comment">// stroke up</span>
<span class="hljs-keyword">if</span> (line >= <span class="hljs-number">6</span> && (((line * <span class="hljs-number">2</span>) % <span class="hljs-number">2</span>) === <span class="hljs-number">0</span>)) stroke = <span class="hljs-number">-1</span>; <span class="hljs-comment">// stroke down</span></pre></div>
<p>Integer value for note arithmetic.</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> int_value = <span class="hljs-keyword">typeof</span> (value.int_val) !== <span class="hljs-string">'undefined'</span>
? (octave * <span class="hljs-number">12</span>) + value.int_val
: <span class="hljs-literal">null</span>;
<span class="hljs-comment">/* Check if the user specified a glyph. */</span>
<span class="hljs-keyword">const</span> code = value.code;
<span class="hljs-keyword">const</span> shift_right = value.shift_right;
<span class="hljs-keyword">let</span> extraProps = {};
<span class="hljs-keyword">if</span> (pieces.length > <span class="hljs-number">2</span> && pieces[<span class="hljs-number">2</span>]) {
<span class="hljs-keyword">const</span> glyph_name = pieces[<span class="hljs-number">2</span>].toUpperCase();
extraProps = Flow.keyProperties.customNoteHeads[glyph_name] || {};
}
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">key</span>: k,
octave,
line,
int_value,
<span class="hljs-attr">accidental</span>: value.accidental,
code,
stroke,
shift_right,
<span class="hljs-attr">displaced</span>: <span class="hljs-literal">false</span>,
...extraProps,
};
};
Flow.keyProperties.note_values = {
<span class="hljs-string">'C'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-literal">null</span> },
<span class="hljs-string">'CN'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'n'</span> },
<span class="hljs-string">'C#'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'#'</span> },
<span class="hljs-string">'C##'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'##'</span> },
<span class="hljs-string">'CB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">-1</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'b'</span> },
<span class="hljs-string">'CBB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">-2</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'bb'</span> },
<span class="hljs-string">'D'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-literal">null</span> },
<span class="hljs-string">'DN'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'n'</span> },
<span class="hljs-string">'D#'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'#'</span> },
<span class="hljs-string">'D##'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'##'</span> },
<span class="hljs-string">'DB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'b'</span> },
<span class="hljs-string">'DBB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'bb'</span> },
<span class="hljs-string">'E'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-literal">null</span> },
<span class="hljs-string">'EN'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'n'</span> },
<span class="hljs-string">'E#'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'#'</span> },
<span class="hljs-string">'E##'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'##'</span> },
<span class="hljs-string">'EB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'b'</span> },
<span class="hljs-string">'EBB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'bb'</span> },
<span class="hljs-string">'F'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-literal">null</span> },
<span class="hljs-string">'FN'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'n'</span> },
<span class="hljs-string">'F#'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'#'</span> },
<span class="hljs-string">'F##'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'##'</span> },
<span class="hljs-string">'FB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'b'</span> },
<span class="hljs-string">'FBB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'bb'</span> },
<span class="hljs-string">'G'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-literal">null</span> },
<span class="hljs-string">'GN'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'n'</span> },
<span class="hljs-string">'G#'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'#'</span> },
<span class="hljs-string">'G##'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'##'</span> },
<span class="hljs-string">'GB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'b'</span> },
<span class="hljs-string">'GBB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'bb'</span> },
<span class="hljs-string">'A'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-literal">null</span> },
<span class="hljs-string">'AN'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'n'</span> },
<span class="hljs-string">'A#'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'#'</span> },
<span class="hljs-string">'A##'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">11</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'##'</span> },
<span class="hljs-string">'AB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'b'</span> },
<span class="hljs-string">'ABB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">7</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'bb'</span> },
<span class="hljs-string">'B'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">11</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-literal">null</span> },
<span class="hljs-string">'BN'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">11</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'n'</span> },
<span class="hljs-string">'B#'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">12</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'#'</span> },
<span class="hljs-string">'B##'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">13</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'##'</span> },
<span class="hljs-string">'BB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'b'</span> },
<span class="hljs-string">'BBB'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">accidental</span>: <span class="hljs-string">'bb'</span> },
<span class="hljs-string">'R'</span>: { <span class="hljs-attr">index</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">int_val</span>: <span class="hljs-number">9</span>, <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span> }, <span class="hljs-comment">// Rest</span>
<span class="hljs-string">'X'</span>: {
<span class="hljs-attr">index</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">accidental</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">octave</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadXBlack'</span>,
<span class="hljs-attr">shift_right</span>: <span class="hljs-number">5.5</span>,
},
};
Flow.integerToNote = <span class="hljs-function"><span class="hljs-params">integer</span> =></span> {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> (integer) === <span class="hljs-string">'undefined'</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">'Undefined integer for integerToNote'</span>);
}
<span class="hljs-keyword">if</span> (integer < <span class="hljs-number">-2</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">`integerToNote requires integer > -2: <span class="hljs-subst">${integer}</span>`</span>);
}
<span class="hljs-keyword">const</span> noteValue = Flow.integerToNote.table[integer];
<span class="hljs-keyword">if</span> (!noteValue) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">`Unknown note value for integer: <span class="hljs-subst">${integer}</span>`</span>);
}
<span class="hljs-keyword">return</span> noteValue;
};
Flow.integerToNote.table = {
<span class="hljs-number">0</span>: <span class="hljs-string">'C'</span>,
<span class="hljs-number">1</span>: <span class="hljs-string">'C#'</span>,
<span class="hljs-number">2</span>: <span class="hljs-string">'D'</span>,
<span class="hljs-number">3</span>: <span class="hljs-string">'D#'</span>,
<span class="hljs-number">4</span>: <span class="hljs-string">'E'</span>,
<span class="hljs-number">5</span>: <span class="hljs-string">'F'</span>,
<span class="hljs-number">6</span>: <span class="hljs-string">'F#'</span>,
<span class="hljs-number">7</span>: <span class="hljs-string">'G'</span>,
<span class="hljs-number">8</span>: <span class="hljs-string">'G#'</span>,
<span class="hljs-number">9</span>: <span class="hljs-string">'A'</span>,
<span class="hljs-number">10</span>: <span class="hljs-string">'A#'</span>,
<span class="hljs-number">11</span>: <span class="hljs-string">'B'</span>,
};
Flow.tabToGlyph = <span class="hljs-function">(<span class="hljs-params">fret, scale = <span class="hljs-number">1.0</span></span>) =></span> {
<span class="hljs-keyword">let</span> glyph = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">let</span> width = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> shift_y = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (fret.toString().toUpperCase() === <span class="hljs-string">'X'</span>) {
<span class="hljs-keyword">const</span> glyphMetrics = <span class="hljs-keyword">new</span> Glyph(<span class="hljs-string">'accidentalDoubleSharp'</span>, Flow.DEFAULT_TABLATURE_FONT_SCALE).getMetrics();
glyph = <span class="hljs-string">'accidentalDoubleSharp'</span>;
width = glyphMetrics.width;
shift_y = -glyphMetrics.height / <span class="hljs-number">2</span>;
} <span class="hljs-keyword">else</span> {
width = Flow.textWidth(fret.toString());
}
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">text</span>: fret,
<span class="hljs-attr">code</span>: glyph,
<span class="hljs-attr">getWidth</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> width * scale,
shift_y,
};
};
Flow.textWidth = <span class="hljs-function"><span class="hljs-params">text</span> =></span> <span class="hljs-number">7</span> * text.toString().length;
Flow.articulationCodes = <span class="hljs-function"><span class="hljs-params">artic</span> =></span> Flow.articulationCodes.articulations[artic];
Flow.articulationCodes.articulations = {
<span class="hljs-string">'a.'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'augmentationDot'</span>, <span class="hljs-attr">between_lines</span>: <span class="hljs-literal">true</span> }, <span class="hljs-comment">// Staccato</span>
<span class="hljs-string">'av'</span>: {
<span class="hljs-attr">aboveCode</span>: <span class="hljs-string">'articStaccatissimoAbove'</span>,
<span class="hljs-attr">belowCode</span>: <span class="hljs-string">'articStaccatissimoBelow'</span>,
<span class="hljs-attr">between_lines</span>: <span class="hljs-literal">true</span>
}, <span class="hljs-comment">// Staccatissimo</span>
<span class="hljs-string">'a>'</span>: {
<span class="hljs-attr">aboveCode</span>: <span class="hljs-string">'articAccentAbove'</span>,
<span class="hljs-attr">belowCode</span>: <span class="hljs-string">'articAccentBelow'</span>,
<span class="hljs-attr">between_lines</span>: <span class="hljs-literal">true</span>
}, <span class="hljs-comment">// Accent</span>
<span class="hljs-string">'a-'</span>: {
<span class="hljs-attr">aboveCode</span>: <span class="hljs-string">'articTenutoAbove'</span>,
<span class="hljs-attr">belowCode</span>: <span class="hljs-string">'articTenutoBelow'</span>,
<span class="hljs-attr">between_lines</span>: <span class="hljs-literal">true</span>
}, <span class="hljs-comment">// Tenuto</span>
<span class="hljs-string">'a^'</span>: {
<span class="hljs-attr">aboveCode</span>: <span class="hljs-string">'articMarcatoAbove'</span>,
<span class="hljs-attr">belowCode</span>: <span class="hljs-string">'articMarcatoBelow'</span>,
<span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span>
}, <span class="hljs-comment">// Marcato</span>
<span class="hljs-string">'a+'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'pluckedLeftHandPizzicato'</span>, <span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span> }, <span class="hljs-comment">// Left hand pizzicato</span>
<span class="hljs-string">'ao'</span>: {
<span class="hljs-attr">aboveCode</span>: <span class="hljs-string">'pluckedSnapPizzicatoAbove'</span>,
<span class="hljs-attr">belowCode</span>: <span class="hljs-string">'pluckedSnapPizzicatoBelow'</span>,
<span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span>
}, <span class="hljs-comment">// Snap pizzicato</span>
<span class="hljs-string">'ah'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'stringsHarmonic'</span>, <span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span> }, <span class="hljs-comment">// Natural harmonic or open note</span>
<span class="hljs-string">'a@'</span>: { <span class="hljs-attr">aboveCode</span>: <span class="hljs-string">'fermataAbove'</span>, <span class="hljs-attr">belowCode</span>: <span class="hljs-string">'fermataBelow'</span>, <span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span> }, <span class="hljs-comment">// Fermata</span>
<span class="hljs-string">'a@a'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'fermataAbove'</span>, <span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span> }, <span class="hljs-comment">// Fermata above staff</span>
<span class="hljs-string">'a@u'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'fermataBelow'</span>, <span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span> }, <span class="hljs-comment">// Fermata below staff</span>
<span class="hljs-string">'a|'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'stringsUpBow'</span>, <span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span> }, <span class="hljs-comment">// Bow up - up stroke</span>
<span class="hljs-string">'am'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'stringsDownBow'</span>, <span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span> }, <span class="hljs-comment">// Bow down - down stroke</span>
<span class="hljs-string">'a,'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'pictChokeCymbal'</span>, <span class="hljs-attr">between_lines</span>: <span class="hljs-literal">false</span> }, <span class="hljs-comment">// Choked</span>
};
Flow.accidentalCodes = <span class="hljs-function"><span class="hljs-params">acc</span> =></span> Flow.accidentalCodes.accidentals[acc];
Flow.accidentalCodes.accidentals = {
<span class="hljs-string">'#'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalSharp'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'##'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalDoubleSharp'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'b'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalFlat'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-2</span> },
<span class="hljs-string">'bb'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalDoubleFlat'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-2</span> },
<span class="hljs-string">'n'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalNatural'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'{'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalParensLeft'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'}'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalParensRight'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'db'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalThreeQuarterTonesFlatZimmermann'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'d'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalQuarterToneFlatStein'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">0</span> },
<span class="hljs-string">'++'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalThreeQuarterTonesSharpStein'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'+'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalQuarterToneSharpStein'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'+-'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalKucukMucennebSharp'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'bs'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalBakiyeFlat'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'bss'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalBuyukMucennebFlat'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
<span class="hljs-string">'o'</span>: { <span class="hljs-attr">