vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
882 lines (657 loc) • 32.5 kB
HTML
<html>
<head>
<title>clef.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>clef.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="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="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 Cheppudira 2013.
Co-author: Benjamin W. Bohl</p>
<h2 id="description">Description</h2>
<p>This file implements various types of clefs that can be rendered on a stave.</p>
<p>See <code>tests/clef_tests.js</code> for usage examples.</p>
<div class='highlight'><pre>
<span class="hljs-keyword">import</span> { Vex } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vex'</span>;
<span class="hljs-keyword">import</span> { StaveModifier } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavemodifier'</span>;
<span class="hljs-keyword">import</span> { Glyph } <span class="hljs-keyword">from</span> <span class="hljs-string">'./glyph'</span>;</pre></div>
<p>To enable logging for this class, set <code>Vex.Flow.Clef.DEBUG</code> to <code>true</code>.</p>
<div class='highlight'><pre><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">L</span>(<span class="hljs-params">...args</span>) </span>{ <span class="hljs-keyword">if</span> (Clef.DEBUG) Vex.L(<span class="hljs-string">'Vex.Flow.Clef'</span>, args); }
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Clef</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StaveModifier</span> </span>{
<span class="hljs-keyword">static</span> get CATEGORY() { <span class="hljs-keyword">return</span> <span class="hljs-string">'clefs'</span>; }</pre></div>
<p>Every clef name is associated with a glyph code from the font file
and a default stave line number.</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get types() {
<span class="hljs-keyword">return</span> {
<span class="hljs-string">'treble'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v83'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">3</span>,
},
<span class="hljs-string">'bass'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v79'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">1</span>,
},
<span class="hljs-string">'alto'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'vad'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">2</span>,
},
<span class="hljs-string">'tenor'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'vad'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">1</span>,
},
<span class="hljs-string">'percussion'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v59'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">2</span>,
},
<span class="hljs-string">'soprano'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'vad'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">4</span>,
},
<span class="hljs-string">'mezzo-soprano'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'vad'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">3</span>,
},
<span class="hljs-string">'baritone-c'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'vad'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-string">'baritone-f'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v79'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">2</span>,
},
<span class="hljs-string">'subbass'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v79'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-string">'french'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v83'</span>,
<span class="hljs-attr">line</span>: <span class="hljs-number">4</span>,
},
<span class="hljs-string">'tab'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v2f'</span>,
},
};
}</pre></div>
<p>Sizes affect the point-size of the clef.</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get sizes() {
<span class="hljs-keyword">return</span> {
<span class="hljs-string">'default'</span>: <span class="hljs-number">40</span>,
<span class="hljs-string">'small'</span>: <span class="hljs-number">32</span>,
};
}</pre></div>
<p>Annotations attach to clefs – such as “8” for octave up or down.</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get annotations() {
<span class="hljs-keyword">return</span> {
<span class="hljs-string">'8va'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v8'</span>,
<span class="hljs-attr">sizes</span>: {
<span class="hljs-string">'default'</span>: {
<span class="hljs-attr">point</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">attachments</span>: {
<span class="hljs-string">'treble'</span>: {
<span class="hljs-attr">line</span>: <span class="hljs-number">-1.2</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">11</span>,
},
},
},
<span class="hljs-string">'small'</span>: {
<span class="hljs-attr">point</span>: <span class="hljs-number">18</span>,
<span class="hljs-attr">attachments</span>: {
<span class="hljs-string">'treble'</span>: {
<span class="hljs-attr">line</span>: <span class="hljs-number">-0.4</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">8</span>,
},
},
},
},
},
<span class="hljs-string">'8vb'</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">'v8'</span>,
<span class="hljs-attr">sizes</span>: {
<span class="hljs-string">'default'</span>: {
<span class="hljs-attr">point</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">attachments</span>: {
<span class="hljs-string">'treble'</span>: {
<span class="hljs-attr">line</span>: <span class="hljs-number">6.3</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">10</span>,
},
<span class="hljs-string">'bass'</span>: {
<span class="hljs-attr">line</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">1</span>,
},
},
},
<span class="hljs-string">'small'</span>: {
<span class="hljs-attr">point</span>: <span class="hljs-number">18</span>,
<span class="hljs-attr">attachments</span>: {
<span class="hljs-string">'treble'</span>: {
<span class="hljs-attr">line</span>: <span class="hljs-number">5.8</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">6</span>,
},
<span class="hljs-string">'bass'</span>: {
<span class="hljs-attr">line</span>: <span class="hljs-number">3.5</span>,
<span class="hljs-attr">x_shift</span>: <span class="hljs-number">0.5</span>,
},
},
},
},
},
};
}</pre></div>
<p>Create a new clef. The parameter <code>clef</code> must be a key from
<code>Clef.types</code>.</p>
<div class='highlight'><pre> <span class="hljs-keyword">constructor</span>(type, size, annotation) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Clef'</span>);
<span class="hljs-keyword">this</span>.setPosition(StaveModifier.Position.BEGIN);
<span class="hljs-keyword">this</span>.setType(type, size, annotation);
<span class="hljs-keyword">this</span>.setWidth(<span class="hljs-keyword">this</span>.glyph.getMetrics().width);
L(<span class="hljs-string">'Creating clef:'</span>, type);
}
getCategory() { <span class="hljs-keyword">return</span> Clef.CATEGORY; }
setType(type, size, annotation) {
<span class="hljs-keyword">this</span>.type = type;
<span class="hljs-keyword">this</span>.clef = Clef.types[type];
<span class="hljs-keyword">if</span> (size === <span class="hljs-literal">undefined</span>) {
<span class="hljs-keyword">this</span>.size = <span class="hljs-string">'default'</span>;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.size = size;
}
<span class="hljs-keyword">this</span>.clef.point = Clef.sizes[<span class="hljs-keyword">this</span>.size];
<span class="hljs-keyword">this</span>.glyph = <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.clef.code, <span class="hljs-keyword">this</span>.clef.point);</pre></div>
<p>If an annotation, such as 8va, is specified, add it to the Clef object.</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (annotation !== <span class="hljs-literal">undefined</span>) {
<span class="hljs-keyword">const</span> anno_dict = Clef.annotations[annotation];
<span class="hljs-keyword">this</span>.annotation = {
<span class="hljs-attr">code</span>: anno_dict.code,
<span class="hljs-attr">point</span>: anno_dict.sizes[<span class="hljs-keyword">this</span>.size].point,
<span class="hljs-attr">line</span>: anno_dict.sizes[<span class="hljs-keyword">this</span>.size].attachments[<span class="hljs-keyword">this</span>.type].line,
<span class="hljs-attr">x_shift</span>: anno_dict.sizes[<span class="hljs-keyword">this</span>.size].attachments[<span class="hljs-keyword">this</span>.type].x_shift,
};
<span class="hljs-keyword">this</span>.attachment = <span class="hljs-keyword">new</span> Glyph(<span class="hljs-keyword">this</span>.annotation.code, <span class="hljs-keyword">this</span>.annotation.point);
<span class="hljs-keyword">this</span>.attachment.metrics.x_max = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.attachment.setXShift(<span class="hljs-keyword">this</span>.annotation.x_shift);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.annotation = <span class="hljs-literal">undefined</span>;
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
getWidth() {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.type === <span class="hljs-string">'tab'</span> && !<span class="hljs-keyword">this</span>.stave) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'ClefError'</span>, <span class="hljs-string">"Can't get width without stave."</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.width;
}
setStave(stave) {
<span class="hljs-keyword">this</span>.stave = stave;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.type !== <span class="hljs-string">'tab'</span>) <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">let</span> glyphScale;
<span class="hljs-keyword">let</span> glyphOffset;
<span class="hljs-keyword">const</span> numLines = <span class="hljs-keyword">this</span>.stave.getOptions().num_lines;
<span class="hljs-keyword">switch</span> (numLines) {
<span class="hljs-keyword">case</span> <span class="hljs-number">8</span>:
glyphScale = <span class="hljs-number">55</span>;
glyphOffset = <span class="hljs-number">14</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-number">7</span>:
glyphScale = <span class="hljs-number">47</span>;
glyphOffset = <span class="hljs-number">8</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-number">6</span>:
glyphScale = <span class="hljs-number">40</span>;
glyphOffset = <span class="hljs-number">1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-number">5</span>:
glyphScale = <span class="hljs-number">30</span>;
glyphOffset = <span class="hljs-number">-6</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-number">4</span>:
glyphScale = <span class="hljs-number">23</span>;
glyphOffset = <span class="hljs-number">-12</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'ClefError'</span>, <span class="hljs-string">`Invalid number of lines: <span class="hljs-subst">${numLines}</span>`</span>);
}
<span class="hljs-keyword">this</span>.glyph.setPoint(glyphScale);
<span class="hljs-keyword">this</span>.glyph.setYShift(glyphOffset);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
draw() {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.x) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'ClefError'</span>, <span class="hljs-string">"Can't draw clef without x."</span>);
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.stave) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'ClefError'</span>, <span class="hljs-string">"Can't draw clef without stave."</span>);
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">this</span>.glyph.setStave(<span class="hljs-keyword">this</span>.stave);
<span class="hljs-keyword">this</span>.glyph.setContext(<span class="hljs-keyword">this</span>.stave.context);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.clef.line !== <span class="hljs-literal">undefined</span>) {
<span class="hljs-keyword">this</span>.placeGlyphOnLine(<span class="hljs-keyword">this</span>.glyph, <span class="hljs-keyword">this</span>.stave, <span class="hljs-keyword">this</span>.clef.line);
}
<span class="hljs-keyword">this</span>.glyph.renderToStave(<span class="hljs-keyword">this</span>.x);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.annotation !== <span class="hljs-literal">undefined</span>) {
<span class="hljs-keyword">this</span>.placeGlyphOnLine(<span class="hljs-keyword">this</span>.attachment, <span class="hljs-keyword">this</span>.stave, <span class="hljs-keyword">this</span>.annotation.line);
<span class="hljs-keyword">this</span>.attachment.setStave(<span class="hljs-keyword">this</span>.stave);
<span class="hljs-keyword">this</span>.attachment.setContext(<span class="hljs-keyword">this</span>.stave.context);
<span class="hljs-keyword">this</span>.attachment.renderToStave(<span class="hljs-keyword">this</span>.x);
}
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>