UNPKG

vexflow

Version:

A JavaScript library for rendering music notation and guitar tablature

714 lines (508 loc) 21.7 kB
<!DOCTYPE html> <html> <head> <title>smufl.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>smufl.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> <div class='highlight'><pre><span class="hljs-keyword">import</span> { Vex } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vex'</span>; <span class="hljs-keyword">import</span> { BravuraFont } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fonts/bravura_glyphs'</span>; <span class="hljs-keyword">import</span> { BravuraMetrics } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fonts/bravura_metrics'</span>; <span class="hljs-keyword">import</span> { GonvilleFont } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fonts/gonville_glyphs'</span>; <span class="hljs-keyword">import</span> { GonvilleMetrics } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fonts/gonville_metrics'</span>; <span class="hljs-keyword">import</span> { PetalumaFont } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fonts/petaluma_glyphs'</span>; <span class="hljs-keyword">import</span> { PetalumaMetrics } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fonts/petaluma_metrics'</span>; <span class="hljs-keyword">import</span> { CustomFont } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fonts/custom_glyphs'</span>; <span class="hljs-keyword">import</span> { CustomMetrics } <span class="hljs-keyword">from</span> <span class="hljs-string">'./fonts/custom_metrics'</span>; <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Font</span> </span>{ <span class="hljs-keyword">constructor</span>(name, metrics, fontData) { <span class="hljs-keyword">this</span>.name = name; <span class="hljs-keyword">this</span>.metrics = metrics; <span class="hljs-keyword">this</span>.fontData = fontData; <span class="hljs-keyword">this</span>.codePoints = {}; } getName() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.name; } getResolution() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.fontData.resolution; } getMetrics() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.metrics; } lookupMetric(key, defaultValue = <span class="hljs-literal">undefined</span>) { <span class="hljs-keyword">const</span> parts = key.split(<span class="hljs-string">'.'</span>); <span class="hljs-keyword">let</span> val = <span class="hljs-keyword">this</span>.metrics;</pre></div> <p>console.log(‘lookupMetric:’, key);</p> <div class='highlight'><pre> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; parts.length; i++) { <span class="hljs-keyword">if</span> (val[parts[i]] === <span class="hljs-literal">undefined</span>) { <span class="hljs-keyword">if</span> (defaultValue !== <span class="hljs-literal">undefined</span>) { <span class="hljs-keyword">return</span> defaultValue; } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'INVALID_KEY'</span>, <span class="hljs-string">`Invalid music font metric key: <span class="hljs-subst">${key}</span>`</span>); } } val = val[parts[i]]; }</pre></div> <p>console.log(‘found:’, key, val);</p> <div class='highlight'><pre> <span class="hljs-keyword">return</span> val; } getFontData() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.fontData; } getGlyphs() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.fontData.glyphs; } getCodePoints() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.codePoints; } setCodePoints(codePoints) { <span class="hljs-keyword">this</span>.codePoints = codePoints; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; } } <span class="hljs-keyword">const</span> Fonts = { <span class="hljs-attr">Bravura</span>: <span class="hljs-keyword">new</span> Font(<span class="hljs-string">'Bravura'</span>, BravuraMetrics, BravuraFont), <span class="hljs-attr">Gonville</span>: <span class="hljs-keyword">new</span> Font(<span class="hljs-string">'Gonville'</span>, GonvilleMetrics, GonvilleFont), <span class="hljs-attr">Petaluma</span>: <span class="hljs-keyword">new</span> Font(<span class="hljs-string">'Petaluma'</span>, PetalumaMetrics, PetalumaFont), <span class="hljs-attr">Custom</span>: <span class="hljs-keyword">new</span> Font(<span class="hljs-string">'Custom'</span>, CustomMetrics, CustomFont), }; <span class="hljs-keyword">const</span> DefaultFontStack = [Fonts.Bravura, Fonts.Gonville, Fonts.Custom]; <span class="hljs-keyword">export</span> { Fonts, DefaultFontStack, Font };</pre></div> <div class="fleur">h</div> </div> </div> </body> </html>