UNPKG

vexflow

Version:

A JavaScript library for rendering music notation and guitar tablature

vexflow.com

0xfe/vexflow

1,723 lines • 106 kB
<!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> =&gt;</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>) =&gt;</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 &lt; <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 &lt;= <span class="hljs-number">0</span> &amp;&amp; (((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 &gt;= <span class="hljs-number">6</span> &amp;&amp; (((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 &gt; <span class="hljs-number">2</span> &amp;&amp; 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> =&gt;</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 &lt; <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 &gt; -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>) =&gt;</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> =&gt;</span> width * scale,
    shift_y,
  };
};

Flow.textWidth = <span class="hljs-function"><span class="hljs-params">text</span> =&gt;</span> <span class="hljs-number">7</span> * text.toString().length;

Flow.articulationCodes = <span class="hljs-function"><span class="hljs-params">artic</span> =&gt;</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&gt;'</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> =&gt;</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">code</span>: <span class="hljs-string">'accidentalSori'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
  <span class="hljs-string">'k'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'accidentalKoron'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
  <span class="hljs-string">'bbs'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'vexAccidentalMicrotonal1'</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">'vexAccidentalMicrotonal2'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
  <span class="hljs-string">'ashs'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'vexAccidentalMicrotonal3'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
  <span class="hljs-string">'afhf'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'vexAccidentalMicrotonal4'</span>, <span class="hljs-attr">parenRightPaddingAdjustment</span>: <span class="hljs-number">-1</span> },
};

Flow.accidentalColumnsTable = {
  <span class="hljs-number">1</span>: {
    <span class="hljs-attr">a</span>: [<span class="hljs-number">1</span>],
    <span class="hljs-attr">b</span>: [<span class="hljs-number">1</span>],
  },
  <span class="hljs-number">2</span>: {
    <span class="hljs-attr">a</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>],
  },
  <span class="hljs-number">3</span>: {
    <span class="hljs-attr">a</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>],
    <span class="hljs-attr">b</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">1</span>],
    <span class="hljs-attr">second_on_bottom</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>],
  },
  <span class="hljs-number">4</span>: {
    <span class="hljs-attr">a</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">2</span>],
    <span class="hljs-attr">b</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>],
    <span class="hljs-attr">spaced_out_tetrachord</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>],
  },
  <span class="hljs-number">5</span>: {
    <span class="hljs-attr">a</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>, <span class="hljs-number">4</span>, <span class="hljs-number">2</span>],
    <span class="hljs-attr">b</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>],
    <span class="hljs-attr">spaced_out_pentachord</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>, <span class="hljs-number">1</span>],
    <span class="hljs-attr">very_spaced_out_pentachord</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">1</span>],
  },
  <span class="hljs-number">6</span>: {
    <span class="hljs-attr">a</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>, <span class="hljs-number">6</span>, <span class="hljs-number">4</span>, <span class="hljs-number">2</span>],
    <span class="hljs-attr">b</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1</span>],
    <span class="hljs-attr">spaced_out_hexachord</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>, <span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>],
    <span class="hljs-attr">very_spaced_out_hexachord</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>],
  },
};

Flow.ornamentCodes = <span class="hljs-function"><span class="hljs-params">acc</span> =&gt;</span> Flow.ornamentCodes.ornaments[acc];

Flow.ornamentCodes.ornaments = {
  <span class="hljs-string">'mordent'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentShortTrill'</span> },
  <span class="hljs-string">'mordent_inverted'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentMordent'</span> },
  <span class="hljs-string">'turn'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentTurn'</span> },
  <span class="hljs-string">'turn_inverted'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentTurnSlash'</span> },
  <span class="hljs-string">'tr'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentTrill'</span> },
  <span class="hljs-string">'upprall'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentPrecompSlideTrillDAnglebert'</span> },
  <span class="hljs-string">'downprall'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentPrecompDoubleCadenceUpperPrefix'</span> },
  <span class="hljs-string">'prallup'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentPrecompTrillSuffixDandrieu'</span> },
  <span class="hljs-string">'pralldown'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentPrecompTrillLowerSuffix'</span> },
  <span class="hljs-string">'upmordent'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentPrecompSlideTrillBach'</span> },
  <span class="hljs-string">'downmordent'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentPrecompDoubleCadenceUpperPrefixTurn'</span> },
  <span class="hljs-string">'lineprall'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentPrecompAppoggTrill'</span> },
  <span class="hljs-string">'prallprall'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'ornamentTremblement'</span> },
};

Flow.keySignature = <span class="hljs-function"><span class="hljs-params">spec</span> =&gt;</span> {
  <span class="hljs-keyword">const</span> keySpec = Flow.keySignature.keySpecs[spec];

  <span class="hljs-keyword">if</span> (!keySpec) {
    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadKeySignature'</span>, <span class="hljs-string">`Bad key signature spec: '<span class="hljs-subst">${spec}</span>'`</span>);
  }

  <span class="hljs-keyword">if</span> (!keySpec.acc) {
    <span class="hljs-keyword">return</span> [];
  }

  <span class="hljs-keyword">const</span> notes = Flow.keySignature.accidentalList(keySpec.acc);

  <span class="hljs-keyword">const</span> acc_list = [];
  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; keySpec.num; ++i) {
    <span class="hljs-keyword">const</span> line = notes[i];
    acc_list.push({ <span class="hljs-attr">type</span>: keySpec.acc, line });
  }

  <span class="hljs-keyword">return</span> acc_list;
};

Flow.keySignature.keySpecs = {
  <span class="hljs-string">'C'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">0</span> },
  <span class="hljs-string">'Am'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">0</span> },
  <span class="hljs-string">'F'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">1</span> },
  <span class="hljs-string">'Dm'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">1</span> },
  <span class="hljs-string">'Bb'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">2</span> },
  <span class="hljs-string">'Gm'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">2</span> },
  <span class="hljs-string">'Eb'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">3</span> },
  <span class="hljs-string">'Cm'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">3</span> },
  <span class="hljs-string">'Ab'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">4</span> },
  <span class="hljs-string">'Fm'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">4</span> },
  <span class="hljs-string">'Db'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">5</span> },
  <span class="hljs-string">'Bbm'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">5</span> },
  <span class="hljs-string">'Gb'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">6</span> },
  <span class="hljs-string">'Ebm'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">6</span> },
  <span class="hljs-string">'Cb'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">7</span> },
  <span class="hljs-string">'Abm'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'b'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">7</span> },
  <span class="hljs-string">'G'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">1</span> },
  <span class="hljs-string">'Em'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">1</span> },
  <span class="hljs-string">'D'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">2</span> },
  <span class="hljs-string">'Bm'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">2</span> },
  <span class="hljs-string">'A'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">3</span> },
  <span class="hljs-string">'F#m'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">3</span> },
  <span class="hljs-string">'E'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">4</span> },
  <span class="hljs-string">'C#m'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">4</span> },
  <span class="hljs-string">'B'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">5</span> },
  <span class="hljs-string">'G#m'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">5</span> },
  <span class="hljs-string">'F#'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">6</span> },
  <span class="hljs-string">'D#m'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">6</span> },
  <span class="hljs-string">'C#'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">7</span> },
  <span class="hljs-string">'A#m'</span>: { <span class="hljs-attr">acc</span>: <span class="hljs-string">'#'</span>, <span class="hljs-attr">num</span>: <span class="hljs-number">7</span> },
};

Flow.unicode = {</pre></div>
        
      
        
        <p>Unicode accidentals</p>

        
          <div class='highlight'><pre>  <span class="hljs-string">'sharp'</span>: <span class="hljs-built_in">String</span>.fromCharCode(<span class="hljs-built_in">parseInt</span>(<span class="hljs-string">'266F'</span>, <span class="hljs-number">16</span>)),
  <span class="hljs-string">'flat'</span>: <span class="hljs-built_in">String</span>.fromCharCode(<span class="hljs-built_in">parseInt</span>(<span class="hljs-string">'266D'</span>, <span class="hljs-number">16</span>)),
  <span class="hljs-string">'natural'</span>: <span class="hljs-built_in">String</span>.fromCharCode(<span class="hljs-built_in">parseInt</span>(<span class="hljs-string">'266E'</span>, <span class="hljs-number">16</span>)),</pre></div>
        
      
        
        <p>Major Chord</p>

        
          <div class='highlight'><pre>  <span class="hljs-string">'triangle'</span>: <span class="hljs-built_in">String</span>.fromCharCode(<span class="hljs-built_in">parseInt</span>(<span class="hljs-string">'25B3'</span>, <span class="hljs-number">16</span>)),</pre></div>
        
      
        
        <p>half-diminished</p>

        
          <div class='highlight'><pre>  <span class="hljs-string">'o-with-slash'</span>: <span class="hljs-built_in">String</span>.fromCharCode(<span class="hljs-built_in">parseInt</span>(<span class="hljs-string">'00F8'</span>, <span class="hljs-number">16</span>)),</pre></div>
        
      
        
        <p>Diminished</p>

        
          <div class='highlight'><pre>  <span class="hljs-string">'degrees'</span>: <span class="hljs-built_in">String</span>.fromCharCode(<span class="hljs-built_in">parseInt</span>(<span class="hljs-string">'00B0'</span>, <span class="hljs-number">16</span>)),
  <span class="hljs-string">'circle'</span>: <span class="hljs-built_in">String</span>.fromCharCode(<span class="hljs-built_in">parseInt</span>(<span class="hljs-string">'25CB'</span>, <span class="hljs-number">16</span>)),
};

Flow.keySignature.accidentalList = <span class="hljs-function">(<span class="hljs-params">acc</span>) =&gt;</span> {
  <span class="hljs-keyword">const</span> patterns = {
    <span class="hljs-string">'b'</span>: [<span class="hljs-number">2</span>, <span class="hljs-number">0.5</span>, <span class="hljs-number">2.5</span>, <span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">1.5</span>, <span class="hljs-number">3.5</span>],
    <span class="hljs-string">'#'</span>: [<span class="hljs-number">0</span>, <span class="hljs-number">1.5</span>, <span class="hljs-number">-0.5</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2.5</span>, <span class="hljs-number">0.5</span>, <span class="hljs-number">2</span>],
  };

  <span class="hljs-keyword">return</span> patterns[acc];
};</pre></div>
        
      
        
        <p>Used to convert duration aliases to the number based duration.
If the input isn’t an alias, simply return the input.</p>
<p>example: ‘q’ -&gt; ‘4’, ‘8’ -&gt; ‘8’</p>

        
          <div class='highlight'><pre>Flow.sanitizeDuration = <span class="hljs-function"><span class="hljs-params">duration</span> =&gt;</span> {
  <span class="hljs-keyword">const</span> alias = Flow.durationAliases[duration];
  <span class="hljs-keyword">if</span> (alias !== <span class="hljs-literal">undefined</span>) {
    duration = alias;
  }

  <span class="hljs-keyword">if</span> (Flow.durationToTicks.durations[duration] === <span class="hljs-literal">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">`The provided duration is not valid: <span class="hljs-subst">${duration}</span>`</span>);
  }

  <span class="hljs-keyword">return</span> duration;
};</pre></div>
        
      
        
        <p>Convert the <code>duration</code> to an fraction</p>

        
          <div class='highlight'><pre>Flow.durationToFraction = <span class="hljs-function"><span class="hljs-params">duration</span> =&gt;</span> <span class="hljs-keyword">new</span> Fraction().parse(Flow.sanitizeDuration(duration));</pre></div>
        
      
        
        <p>Convert the <code>duration</code> to an number</p>

        
          <div class='highlight'><pre>Flow.durationToNumber = <span class="hljs-function"><span class="hljs-params">duration</span> =&gt;</span> Flow.durationToFraction(duration).value();</pre></div>
        
      
        
        <p>Convert the <code>duration</code> to total ticks</p>

        
          <div class='highlight'><pre>Flow.durationToTicks = <span class="hljs-function"><span class="hljs-params">duration</span> =&gt;</span> {
  duration = Flow.sanitizeDuration(duration);

  <span class="hljs-keyword">const</span> ticks = Flow.durationToTicks.durations[duration];
  <span class="hljs-keyword">if</span> (ticks === <span class="hljs-literal">undefined</span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
  }

  <span class="hljs-keyword">return</span> ticks;
};

Flow.durationToTicks.durations = {
  <span class="hljs-string">'1/2'</span>: Flow.RESOLUTION * <span class="hljs-number">2</span>,
  <span class="hljs-string">'1'</span>: Flow.RESOLUTION / <span class="hljs-number">1</span>,
  <span class="hljs-string">'2'</span>: Flow.RESOLUTION / <span class="hljs-number">2</span>,
  <span class="hljs-string">'4'</span>: Flow.RESOLUTION / <span class="hljs-number">4</span>,
  <span class="hljs-string">'8'</span>: Flow.RESOLUTION / <span class="hljs-number">8</span>,
  <span class="hljs-string">'16'</span>: Flow.RESOLUTION / <span class="hljs-number">16</span>,
  <span class="hljs-string">'32'</span>: Flow.RESOLUTION / <span class="hljs-number">32</span>,
  <span class="hljs-string">'64'</span>: Flow.RESOLUTION / <span class="hljs-number">64</span>,
  <span class="hljs-string">'128'</span>: Flow.RESOLUTION / <span class="hljs-number">128</span>,
  <span class="hljs-string">'256'</span>: Flow.RESOLUTION / <span class="hljs-number">256</span>,
};

Flow.durationAliases = {
  <span class="hljs-string">'w'</span>: <span class="hljs-string">'1'</span>,
  <span class="hljs-string">'h'</span>: <span class="hljs-string">'2'</span>,
  <span class="hljs-string">'q'</span>: <span class="hljs-string">'4'</span>,</pre></div>
        
      
        
        <p>This is the default duration used to render bars (BarNote). Bars no longer
consume ticks, so this should be a no-op.</p>
<p>TODO(0xfe): This needs to be cleaned up.</p>

        
          <div class='highlight'><pre>  <span class="hljs-string">'b'</span>: <span class="hljs-string">'256'</span>,
};</pre></div>
        
      
        
        <p>Return a glyph given duration and type. The type can be a custom glyph code from customNoteHeads.</p>

        
          <div class='highlight'><pre>Flow.getGlyphProps = <span class="hljs-function">(<span class="hljs-params">duration, type</span>) =&gt;</span> {
  duration = Flow.sanitizeDuration(duration);
  type = type || <span class="hljs-string">'n'</span>; <span class="hljs-comment">// default type is a regular note</span></pre></div>
        
      
        
        <p>Lookup duration for default glyph head code</p>

        
          <div class='highlight'><pre>  <span class="hljs-keyword">const</span> code = Flow.getGlyphProps.duration_codes[duration];
  <span class="hljs-keyword">if</span> (code === <span class="hljs-literal">undefined</span>) { <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>; }</pre></div>
        
      
        
        <p>Get glyph properties for ‘type’ from duration string (note, rest, harmonic, muted, slash)</p>

        
          <div class='highlight'><pre>  <span class="hljs-keyword">let</span> glyphTypeProperties = code.type[type];</pre></div>
        
      
        
        <p>If this isn’t a standard type, then lookup the custom note head map.</p>

        
          <div class='highlight'><pre>  <span class="hljs-keyword">if</span> (glyphTypeProperties === <span class="hljs-literal">undefined</span>) {</pre></div>
        
      
        
        <p>Try and get it from the custom list of note heads</p>

        
          <div class='highlight'><pre>    <span class="hljs-keyword">const</span> customGlyphTypeProperties = Flow.keyProperties.customNoteHeads[type.toUpperCase()];</pre></div>
        
      
        
        <p>If not, then return with nothing</p>

        
          <div class='highlight'><pre>    <span class="hljs-keyword">if</span> (customGlyphTypeProperties === <span class="hljs-literal">undefined</span>) { <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>; }</pre></div>
        
      
        
        <p>Otherwise set it as the code_head value</p>

        
          <div class='highlight'><pre>    glyphTypeProperties = {
      <span class="hljs-attr">code_head</span>: customGlyphTypeProperties.code,
      ...customGlyphTypeProperties,
    };
  }</pre></div>
        
      
        
        <p>Merge duration props for ‘duration’ with the note head properties.</p>

        
          <div class='highlight'><pre>  <span class="hljs-keyword">return</span> { ...code.common, ...glyphTypeProperties };
};

Flow.getGlyphProps.validTypes = {
  <span class="hljs-string">'n'</span>: { <span class="hljs-attr">name</span>: <span class="hljs-string">'note'</span> },
  <span class="hljs-string">'r'</span>: { <span class="hljs-attr">name</span>: <span class="hljs-string">'rest'</span> },
  <span class="hljs-string">'h'</span>: { <span class="hljs-attr">name</span>: <span class="hljs-string">'harmonic'</span> },
  <span class="hljs-string">'m'</span>: { <span class="hljs-attr">name</span>: <span class="hljs-string">'muted'</span> },
  <span class="hljs-string">'s'</span>: { <span class="hljs-attr">name</span>: <span class="hljs-string">'slash'</span> },
};</pre></div>
        
      
        
        <p>Custom note heads</p>

        
          <div class='highlight'><pre>Flow.keyProperties.customNoteHeads = {
  <span class="hljs-comment">/* Diamond */</span>
  <span class="hljs-string">'D0'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadDiamondWhole'</span>, },
  <span class="hljs-string">'D1'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadDiamondHalf'</span> },
  <span class="hljs-string">'D2'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadDiamondBlack'</span> },
  <span class="hljs-string">'D3'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadDiamondBlack'</span> },

  <span class="hljs-comment">/* Triangle */</span>
  <span class="hljs-string">'T0'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadTriangleUpWhole'</span> },
  <span class="hljs-string">'T1'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadTriangleUpHalf'</span> },
  <span class="hljs-string">'T2'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadTriangleUpBlack'</span> },
  <span class="hljs-string">'T3'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadTriangleUpBlack'</span> },

  <span class="hljs-comment">/* Cross */</span>
  <span class="hljs-string">'X0'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadXWhole'</span>, },
  <span class="hljs-string">'X1'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadXHalf'</span> },
  <span class="hljs-string">'X2'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadXBlack'</span> },
  <span class="hljs-string">'X3'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadCircleX'</span> },

  <span class="hljs-comment">/* Square */</span>
  <span class="hljs-string">'S1'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadSquareWhite'</span> },
  <span class="hljs-string">'S2'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'noteheadSquareBlack'</span> },

  <span class="hljs-comment">/* Rectangle */</span>
  <span class="hljs-string">'R1'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'vexNoteHeadRectWhite'</span> }, <span class="hljs-comment">// no smufl code</span>
  <span class="hljs-string">'R2'</span>: { <span class="hljs-attr">code</span>: <span class="hljs-string">'vexNoteHeadRectBlack'</span> }, <span class="hljs-comment">// no smufl code</span>
};

Flow.getGlyphProps.duration_codes = {
  <span class="hljs-string">'1/2'</span>: {
    <span class="hljs-attr">common</span>: {
      getWidth(scale = Flow.DEFAULT_NOTATION_FONT_SCALE) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.code_head || <span class="hljs-string">'v53'</span>, scale).getMetrics().width;
      },
      <span class="hljs-attr">stem</span>: <span class="hljs-literal">false</span>,
      <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">flag</span>: <span class="hljs-literal">false</span>,
      <span class="hljs-attr">stem_up_extension</span>: -Flow.STEM_HEIGHT,
      <span class="hljs-attr">stem_down_extension</span>: -Flow.STEM_HEIGHT,
      <span class="hljs-attr">tabnote_stem_up_extension</span>: -Flow.STEM_HEIGHT,
      <span class="hljs-attr">tabnote_stem_down_extension</span>: -Flow.STEM_HEIGHT,
      <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_above</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_below</span>: <span class="hljs-number">0</span>,
    },
    <span class="hljs-attr">type</span>: {
      <span class="hljs-string">'n'</span>: { <span class="hljs-comment">// Breve note</span>
        code_head: <span class="hljs-string">'noteheadDoubleWhole'</span>,
      },
      <span class="hljs-string">'h'</span>: { <span class="hljs-comment">// Breve note harmonic</span>
        code_head: <span class="hljs-string">'unpitchedPercussionClef1'</span>,
      },
      <span class="hljs-string">'m'</span>: { <span class="hljs-comment">// Breve note muted -</span>
        code_head: <span class="hljs-string">'vexNoteHeadMutedBreve'</span>,
        <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      },
      <span class="hljs-string">'r'</span>: { <span class="hljs-comment">// Breve rest</span>
        code_head: <span class="hljs-string">'restDoubleWhole'</span>,
        <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/5'</span>,
        <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0.5</span>,
      },
      <span class="hljs-string">'s'</span>: { <span class="hljs-comment">// Breve note slash -</span></pre></div>
        
      
        
        <p>Drawn with canvas primitives</p>

        
          <div class='highlight'><pre>        getWidth: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> Flow.SLASH_NOTEHEAD_WIDTH,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
      },
    },
  },
  <span class="hljs-string">'1'</span>: {
    <span class="hljs-attr">common</span>: {
      getWidth(scale = Flow.DEFAULT_NOTATION_FONT_SCALE) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.code_head || <span class="hljs-string">'v1d'</span>, scale).getMetrics().width;
      },
      <span class="hljs-attr">stem</span>: <span class="hljs-literal">false</span>,
      <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">flag</span>: <span class="hljs-literal">false</span>,
      <span class="hljs-attr">stem_up_extension</span>: -Flow.STEM_HEIGHT,
      <span class="hljs-attr">stem_down_extension</span>: -Flow.STEM_HEIGHT,
      <span class="hljs-attr">tabnote_stem_up_extension</span>: -Flow.STEM_HEIGHT,
      <span class="hljs-attr">tabnote_stem_down_extension</span>: -Flow.STEM_HEIGHT,
      <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_above</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_below</span>: <span class="hljs-number">0</span>,
    },
    <span class="hljs-attr">type</span>: {
      <span class="hljs-string">'n'</span>: { <span class="hljs-comment">// Whole note</span>
        code_head: <span class="hljs-string">'noteheadWhole'</span>,
      },
      <span class="hljs-string">'h'</span>: { <span class="hljs-comment">// Whole note harmonic</span>
        code_head: <span class="hljs-string">'noteheadDiamondWhole'</span>,
      },
      <span class="hljs-string">'m'</span>: { <span class="hljs-comment">// Whole note muted</span>
        code_head: <span class="hljs-string">'noteheadXWhole'</span>,
        <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">-3</span>,
      },
      <span class="hljs-string">'r'</span>: { <span class="hljs-comment">// Whole rest</span>
        code_head: <span class="hljs-string">'restWhole'</span>,
        <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'D/5'</span>,
        <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0.5</span>,
      },
      <span class="hljs-string">'s'</span>: { <span class="hljs-comment">// Whole note slash</span></pre></div>
        
      
        
        <p>Drawn with canvas primitives</p>

        
          <div class='highlight'><pre>        getWidth: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> Flow.SLASH_NOTEHEAD_WIDTH,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
      },
    },
  },
  <span class="hljs-string">'2'</span>: {
    <span class="hljs-attr">common</span>: {
      getWidth(scale = Flow.DEFAULT_NOTATION_FONT_SCALE) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.code_head || <span class="hljs-string">'noteheadHalf'</span>, scale).getMetrics().width;
      },
      <span class="hljs-attr">stem</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">flag</span>: <span class="hljs-literal">false</span>,
      <span class="hljs-attr">stem_up_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">stem_down_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">tabnote_stem_up_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">tabnote_stem_down_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_above</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_below</span>: <span class="hljs-number">0</span>,
    },
    <span class="hljs-attr">type</span>: {
      <span class="hljs-string">'n'</span>: { <span class="hljs-comment">// Half note</span>
        code_head: <span class="hljs-string">'noteheadHalf'</span>,
      },
      <span class="hljs-string">'h'</span>: { <span class="hljs-comment">// Half note harmonic</span>
        code_head: <span class="hljs-string">'noteheadDiamondHalf'</span>,
      },
      <span class="hljs-string">'m'</span>: { <span class="hljs-comment">// Half note muted</span>
        code_head: <span class="hljs-string">'noteheadXHalf'</span>,
        <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">-3</span>,
      },
      <span class="hljs-string">'r'</span>: { <span class="hljs-comment">// Half rest</span>
        code_head: <span class="hljs-string">'restHalf'</span>,
        <span class="hljs-attr">stem</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
        <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">-0.5</span>,
      },
      <span class="hljs-string">'s'</span>: { <span class="hljs-comment">// Half note slash</span></pre></div>
        
      
        
        <p>Drawn with canvas primitives</p>

        
          <div class='highlight'><pre>        getWidth: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> Flow.SLASH_NOTEHEAD_WIDTH,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
      },
    },
  },
  <span class="hljs-string">'4'</span>: {
    <span class="hljs-attr">common</span>: {
      getWidth(scale = Flow.DEFAULT_NOTATION_FONT_SCALE) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.code_head || <span class="hljs-string">'noteheadBlack'</span>, scale).getMetrics().width;
      },
      <span class="hljs-attr">stem</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">flag</span>: <span class="hljs-literal">false</span>,
      <span class="hljs-attr">stem_up_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">stem_down_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">tabnote_stem_up_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">tabnote_stem_down_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_above</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_below</span>: <span class="hljs-number">0</span>,
    },
    <span class="hljs-attr">type</span>: {
      <span class="hljs-string">'n'</span>: { <span class="hljs-comment">// Quarter note</span>
        code_head: <span class="hljs-string">'noteheadBlack'</span>,
      },
      <span class="hljs-string">'h'</span>: { <span class="hljs-comment">// Quarter harmonic</span>
        code_head: <span class="hljs-string">'noteheadDiamondBlack'</span>,
      },
      <span class="hljs-string">'m'</span>: { <span class="hljs-comment">// Quarter muted</span>
        code_head: <span class="hljs-string">'noteheadXBlack'</span>,
      },
      <span class="hljs-string">'r'</span>: { <span class="hljs-comment">// Quarter rest</span>
        code_head: <span class="hljs-string">'restQuarter'</span>,
        <span class="hljs-attr">stem</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
        <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">-0.5</span>,
        <span class="hljs-attr">line_above</span>: <span class="hljs-number">1.5</span>,
        <span class="hljs-attr">line_below</span>: <span class="hljs-number">1.5</span>,
      },
      <span class="hljs-string">'s'</span>: { <span class="hljs-comment">// Quarter slash</span></pre></div>
        
      
        
        <p>Drawn with canvas primitives</p>

        
          <div class='highlight'><pre>        getWidth: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> Flow.SLASH_NOTEHEAD_WIDTH,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
      },
    },
  },
  <span class="hljs-string">'8'</span>: {
    <span class="hljs-attr">common</span>: {
      getWidth(scale = Flow.DEFAULT_NOTATION_FONT_SCALE) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.code_head || <span class="hljs-string">'noteheadBlack'</span>, scale).getMetrics().width;
      },
      <span class="hljs-attr">stem</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">flag</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">beam_count</span>: <span class="hljs-number">1</span>,
      <span class="hljs-attr">code_flag_upstem</span>: <span class="hljs-string">'flag8thUp'</span>,
      <span class="hljs-attr">code_flag_downstem</span>: <span class="hljs-string">'flag8thDown'</span>,
      <span class="hljs-attr">stem_up_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">stem_down_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">tabnote_stem_up_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">tabnote_stem_down_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_above</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_below</span>: <span class="hljs-number">0</span>,
    },
    <span class="hljs-attr">type</span>: {
      <span class="hljs-string">'n'</span>: { <span class="hljs-comment">// Eighth note</span>
        code_head: <span class="hljs-string">'noteheadBlack'</span>,
      },
      <span class="hljs-string">'h'</span>: { <span class="hljs-comment">// Eighth note harmonic</span>
        code_head: <span class="hljs-string">'noteheadDiamondBlack'</span>,
      },
      <span class="hljs-string">'m'</span>: { <span class="hljs-comment">// Eighth note muted</span>
        code_head: <span class="hljs-string">'noteheadXBlack'</span>,
      },
      <span class="hljs-string">'r'</span>: { <span class="hljs-comment">// Eighth rest</span>
        code_head: <span class="hljs-string">'rest8th'</span>,
        <span class="hljs-attr">stem</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">flag</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
        <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">-0.5</span>,
        <span class="hljs-attr">line_above</span>: <span class="hljs-number">1.0</span>,
        <span class="hljs-attr">line_below</span>: <span class="hljs-number">1.0</span>,
      },
      <span class="hljs-string">'s'</span>: { <span class="hljs-comment">// Eight slash</span></pre></div>
        
      
        
        <p>Drawn with canvas primitives</p>

        
          <div class='highlight'><pre>        getWidth: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> Flow.SLASH_NOTEHEAD_WIDTH,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
      },
    },
  },
  <span class="hljs-string">'16'</span>: {
    <span class="hljs-attr">common</span>: {
      <span class="hljs-attr">beam_count</span>: <span class="hljs-number">2</span>,
      getWidth(scale = Flow.DEFAULT_NOTATION_FONT_SCALE) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.code_head || <span class="hljs-string">'noteheadBlack'</span>, scale).getMetrics().width;
      },
      <span class="hljs-attr">stem</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">flag</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">code_flag_upstem</span>: <span class="hljs-string">'flag16thUp'</span>,
      <span class="hljs-attr">code_flag_downstem</span>: <span class="hljs-string">'flag16thDown'</span>,
      <span class="hljs-attr">stem_up_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">stem_down_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">tabnote_stem_up_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">tabnote_stem_down_extension</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_above</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_below</span>: <span class="hljs-number">0</span>,
    },
    <span class="hljs-attr">type</span>: {
      <span class="hljs-string">'n'</span>: { <span class="hljs-comment">// Sixteenth note</span>
        code_head: <span class="hljs-string">'noteheadBlack'</span>,
      },
      <span class="hljs-string">'h'</span>: { <span class="hljs-comment">// Sixteenth note harmonic</span>
        code_head: <span class="hljs-string">'noteheadDiamondBlack'</span>,
      },
      <span class="hljs-string">'m'</span>: { <span class="hljs-comment">// Sixteenth note muted</span>
        code_head: <span class="hljs-string">'noteheadXBlack'</span>,
      },
      <span class="hljs-string">'r'</span>: { <span class="hljs-comment">// Sixteenth rest</span>
        code_head: <span class="hljs-string">'rest16th'</span>,
        <span class="hljs-attr">stem</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">flag</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
        <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">-0.5</span>,
        <span class="hljs-attr">line_above</span>: <span class="hljs-number">1.0</span>,
        <span class="hljs-attr">line_below</span>: <span class="hljs-number">2.0</span>,
      },
      <span class="hljs-string">'s'</span>: { <span class="hljs-comment">// Sixteenth slash</span></pre></div>
        
      
        
        <p>Drawn with canvas primitives</p>

        
          <div class='highlight'><pre>        getWidth: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> Flow.SLASH_NOTEHEAD_WIDTH,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
      },
    },
  },
  <span class="hljs-string">'32'</span>: {
    <span class="hljs-attr">common</span>: {
      <span class="hljs-attr">beam_count</span>: <span class="hljs-number">3</span>,
      getWidth(scale = Flow.DEFAULT_NOTATION_FONT_SCALE) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.code_head || <span class="hljs-string">'noteheadBlack'</span>, scale).getMetrics().width;
      },
      <span class="hljs-attr">stem</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">flag</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">code_flag_upstem</span>: <span class="hljs-string">'flag32ndUp'</span>,
      <span class="hljs-attr">code_flag_downstem</span>: <span class="hljs-string">'flag32ndDown'</span>,
      <span class="hljs-attr">stem_up_extension</span>: <span class="hljs-number">9</span>,
      <span class="hljs-attr">stem_down_extension</span>: <span class="hljs-number">9</span>,
      <span class="hljs-attr">tabnote_stem_up_extension</span>: <span class="hljs-number">8</span>,
      <span class="hljs-attr">tabnote_stem_down_extension</span>: <span class="hljs-number">5</span>,
      <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_above</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_below</span>: <span class="hljs-number">0</span>,
    },
    <span class="hljs-attr">type</span>: {
      <span class="hljs-string">'n'</span>: { <span class="hljs-comment">// Thirty-second note</span>
        code_head: <span class="hljs-string">'noteheadBlack'</span>,
      },
      <span class="hljs-string">'h'</span>: { <span class="hljs-comment">// Thirty-second harmonic</span>
        code_head: <span class="hljs-string">'noteheadDiamondBlack'</span>,
      },
      <span class="hljs-string">'m'</span>: { <span class="hljs-comment">// Thirty-second muted</span>
        code_head: <span class="hljs-string">'noteheadXBlack'</span>,
      },
      <span class="hljs-string">'r'</span>: { <span class="hljs-comment">// Thirty-second rest</span>
        code_head: <span class="hljs-string">'rest32nd'</span>,
        <span class="hljs-attr">stem</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">flag</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
        <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">-1.5</span>,
        <span class="hljs-attr">line_above</span>: <span class="hljs-number">2.0</span>,
        <span class="hljs-attr">line_below</span>: <span class="hljs-number">2.0</span>,
      },
      <span class="hljs-string">'s'</span>: { <span class="hljs-comment">// Thirty-second slash</span></pre></div>
        
      
        
        <p>Drawn with canvas primitives</p>

        
          <div class='highlight'><pre>        getWidth: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> Flow.SLASH_NOTEHEAD_WIDTH,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
      },
    },
  },
  <span class="hljs-string">'64'</span>: {
    <span class="hljs-attr">common</span>: {
      <span class="hljs-attr">beam_count</span>: <span class="hljs-number">4</span>,
      getWidth(scale = Flow.DEFAULT_NOTATION_FONT_SCALE) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.code_head || <span class="hljs-string">'noteheadBlack'</span>, scale).getMetrics().width;
      },
      <span class="hljs-attr">stem</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">flag</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">code_flag_upstem</span>: <span class="hljs-string">'flag64thUp'</span>,
      <span class="hljs-attr">code_flag_downstem</span>: <span class="hljs-string">'flag64thDown'</span>,
      <span class="hljs-attr">stem_up_extension</span>: <span class="hljs-number">13</span>,
      <span class="hljs-attr">stem_down_extension</span>: <span class="hljs-number">13</span>,
      <span class="hljs-attr">tabnote_stem_up_extension</span>: <span class="hljs-number">12</span>,
      <span class="hljs-attr">tabnote_stem_down_extension</span>: <span class="hljs-number">9</span>,
      <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_above</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_below</span>: <span class="hljs-number">0</span>,
    },
    <span class="hljs-attr">type</span>: {
      <span class="hljs-string">'n'</span>: { <span class="hljs-comment">// Sixty-fourth note</span>
        code_head: <span class="hljs-string">'noteheadBlack'</span>,
      },
      <span class="hljs-string">'h'</span>: { <span class="hljs-comment">// Sixty-fourth harmonic</span>
        code_head: <span class="hljs-string">'noteheadDiamondBlack'</span>,
      },
      <span class="hljs-string">'m'</span>: { <span class="hljs-comment">// Sixty-fourth muted</span>
        code_head: <span class="hljs-string">'noteheadXBlack'</span>,
      },
      <span class="hljs-string">'r'</span>: { <span class="hljs-comment">// Sixty-fourth rest</span>
        code_head: <span class="hljs-string">'rest64th'</span>,
        <span class="hljs-attr">stem</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">flag</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
        <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">-1.5</span>,
        <span class="hljs-attr">line_above</span>: <span class="hljs-number">2.0</span>,
        <span class="hljs-attr">line_below</span>: <span class="hljs-number">3.0</span>,
      },
      <span class="hljs-string">'s'</span>: { <span class="hljs-comment">// Sixty-fourth slash</span></pre></div>
        
      
        
        <p>Drawn with canvas primitives</p>

        
          <div class='highlight'><pre>        getWidth: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> Flow.SLASH_NOTEHEAD_WIDTH,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
      },
    },
  },
  <span class="hljs-string">'128'</span>: {
    <span class="hljs-attr">common</span>: {
      <span class="hljs-attr">beam_count</span>: <span class="hljs-number">5</span>,
      getWidth(scale = Flow.DEFAULT_NOTATION_FONT_SCALE) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.code_head || <span class="hljs-string">'noteheadBlack'</span>, scale).getMetrics().width;
      },
      <span class="hljs-attr">stem</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">stem_offset</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">flag</span>: <span class="hljs-literal">true</span>,
      <span class="hljs-attr">code_flag_upstem</span>: <span class="hljs-string">'flag128thUp'</span>,
      <span class="hljs-attr">code_flag_downstem</span>: <span class="hljs-string">'flag128thDown'</span>,
      <span class="hljs-attr">stem_up_extension</span>: <span class="hljs-number">22</span>,
      <span class="hljs-attr">stem_down_extension</span>: <span class="hljs-number">22</span>,
      <span class="hljs-attr">tabnote_stem_up_extension</span>: <span class="hljs-number">21</span>,
      <span class="hljs-attr">tabnote_stem_down_extension</span>: <span class="hljs-number">18</span>,
      <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_above</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">line_below</span>: <span class="hljs-number">0</span>,
    },
    <span class="hljs-attr">type</span>: {
      <span class="hljs-string">'n'</span>: {  <span class="hljs-comment">// Hundred-twenty-eight note</span>
        code_head: <span class="hljs-string">'noteheadBlack'</span>,
      },
      <span class="hljs-string">'h'</span>: { <span class="hljs-comment">// Hundred-twenty-eight harmonic</span>
        code_head: <span class="hljs-string">'noteheadDiamondBlack'</span>,
      },
      <span class="hljs-string">'m'</span>: { <span class="hljs-comment">// Hundred-twenty-eight muted</span>
        code_head: <span class="hljs-string">'noteheadXBlack'</span>,
      },
      <span class="hljs-string">'r'</span>: {  <span class="hljs-comment">// Hundred-twenty-eight rest</span>
        code_head: <span class="hljs-string">'rest128th'</span>,
        <span class="hljs-attr">stem</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">flag</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">rest</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
        <span class="hljs-attr">dot_shiftY</span>: <span class="hljs-number">1.5</span>,
        <span class="hljs-attr">line_above</span>: <span class="hljs-number">3.0</span>,
        <span class="hljs-attr">line_below</span>: <span class="hljs-number">3.0</span>,
      },
      <span class="hljs-string">'s'</span>: { <span class="hljs-comment">// Hundred-twenty-eight rest</span></pre></div>
        
      
        
        <p>Drawn with canvas primitives</p>

        
          <div class='highlight'><pre>        getWidth: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> Flow.SLASH_NOTEHEAD_WIDTH,
        <span class="hljs-attr">position</span>: <span class="hljs-string">'B/4'</span>,
      },
    },
  },
};</pre></div>
        
      
        
        <p>Some defaults</p>

        
          <div class='highlight'><pre>Flow.TIME4_4 = {
  <span class="hljs-attr">num_beats</span>: <span class="hljs-number">4</span>,
  <span class="hljs-attr">beat_value</span>: <span class="hljs-number">4</span>,
  <span class="hljs-attr">resolution</span>: Flow.RESOLUTION,
};
<span class="hljs-keyword">export</span> { Flow };</pre></div>
        
      
      <div class="fleur">h</div>
    </div>
  </div>
</body>
</html>