vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
1,031 lines (726 loc) • 39.8 kB
HTML
<html>
<head>
<title>keysignature.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>keysignature.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.
Author: Cyril Silverman</p>
<h2 id="description">Description</h2>
<p>This file implements key signatures. A key signature sits on a stave
and indicates the notes with implicit accidentals.</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> { Flow } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tables'</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>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">KeySignature</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">'keysignatures'</span>; }</pre></div>
<p>Space between natural and following accidental depending
on vertical position</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get accidentalSpacing() {
<span class="hljs-keyword">return</span> {
<span class="hljs-string">'#'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">4</span>,
},
<span class="hljs-string">'b'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">7</span>,
},
<span class="hljs-string">'n'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">1</span>,
},
<span class="hljs-string">'##'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">4</span>,
},
<span class="hljs-string">'bb'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">7</span>,
},
<span class="hljs-string">'db'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">7</span>,
},
<span class="hljs-string">'d'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">7</span>,
},
<span class="hljs-string">'bbs'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">7</span>,
},
<span class="hljs-string">'++'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">4</span>,
},
<span class="hljs-string">'+'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">4</span>,
},
<span class="hljs-string">'+-'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">4</span>,
},
<span class="hljs-string">'++-'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">4</span>,
},
<span class="hljs-string">'bs'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">10</span>,
},
<span class="hljs-string">'bss'</span>: {
<span class="hljs-attr">above</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">below</span>: <span class="hljs-number">10</span>,
},
};
}</pre></div>
<p>Create a new Key Signature based on a <code>key_spec</code></p>
<div class='highlight'><pre> <span class="hljs-keyword">constructor</span>(keySpec, cancelKeySpec, alterKeySpec) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'KeySignature'</span>);
<span class="hljs-keyword">this</span>.setKeySig(keySpec, cancelKeySpec, alterKeySpec);
<span class="hljs-keyword">this</span>.setPosition(StaveModifier.Position.BEGIN);
<span class="hljs-keyword">this</span>.glyphFontScale = <span class="hljs-number">38</span>; <span class="hljs-comment">// TODO(0xFE): Should this match StaveNote?</span>
<span class="hljs-keyword">this</span>.glyphs = [];
<span class="hljs-keyword">this</span>.xPositions = []; <span class="hljs-comment">// relative to this.x</span>
<span class="hljs-keyword">this</span>.paddingForced = <span class="hljs-literal">false</span>;
}
getCategory() { <span class="hljs-keyword">return</span> KeySignature.CATEGORY; }</pre></div>
<p>Add an accidental glyph to the <code>KeySignature</code> instance which represents
the provided <code>acc</code>. If <code>nextAcc</code> is also provided, the appropriate
spacing will be included in the glyph’s position</p>
<div class='highlight'><pre> convertToGlyph(acc, nextAcc) {
<span class="hljs-keyword">const</span> accGlyphData = Flow.accidentalCodes(acc.type);
<span class="hljs-keyword">const</span> glyph = <span class="hljs-keyword">new</span> Glyph(accGlyphData.code, <span class="hljs-keyword">this</span>.glyphFontScale);</pre></div>
<p>Determine spacing between current accidental and the next accidental</p>
<div class='highlight'><pre> <span class="hljs-keyword">let</span> extraWidth = <span class="hljs-number">1</span>;
<span class="hljs-keyword">if</span> (acc.type === <span class="hljs-string">'n'</span> && nextAcc) {
<span class="hljs-keyword">const</span> spacing = KeySignature.accidentalSpacing[nextAcc.type];
<span class="hljs-keyword">if</span> (spacing) {
<span class="hljs-keyword">const</span> isAbove = nextAcc.line >= acc.line;
extraWidth = isAbove ? spacing.above : spacing.below;
}
}</pre></div>
<p>Place the glyph on the stave</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.placeGlyphOnLine(glyph, <span class="hljs-keyword">this</span>.stave, acc.line);
<span class="hljs-keyword">this</span>.glyphs.push(glyph);
<span class="hljs-keyword">const</span> xPosition = <span class="hljs-keyword">this</span>.xPositions[<span class="hljs-keyword">this</span>.xPositions.length - <span class="hljs-number">1</span>];
<span class="hljs-keyword">const</span> glyphWidth = glyph.getMetrics().width + extraWidth;</pre></div>
<p>Store the next accidental’s x position</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.xPositions.push(xPosition + glyphWidth);</pre></div>
<p>Expand size of key signature</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.width += glyphWidth;
}</pre></div>
<p>Cancel out a key signature provided in the <code>spec</code> parameter. This will
place appropriate natural accidentals before the key signature.</p>
<div class='highlight'><pre> cancelKey(spec) {
<span class="hljs-keyword">this</span>.formatted = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.cancelKeySpec = spec;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
convertToCancelAccList(spec) {</pre></div>
<p>Get the accidental list for the cancelled key signature</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> cancel_accList = Flow.keySignature(spec);</pre></div>
<p>If the cancelled key has a different accidental type, ie: # vs b</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> different_types = <span class="hljs-keyword">this</span>.accList.length > <span class="hljs-number">0</span>
&& cancel_accList.length > <span class="hljs-number">0</span>
&& cancel_accList[<span class="hljs-number">0</span>].type !== <span class="hljs-keyword">this</span>.accList[<span class="hljs-number">0</span>].type;</pre></div>
<p>Determine how many naturals needed to add</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> naturals = different_types
? cancel_accList.length
: cancel_accList.length - <span class="hljs-keyword">this</span>.accList.length;</pre></div>
<p>Return if no naturals needed</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (naturals < <span class="hljs-number">1</span>) <span class="hljs-keyword">return</span> <span class="hljs-literal">undefined</span>;</pre></div>
<p>Get the line position for each natural</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> cancelled = [];
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < naturals; i++) {
<span class="hljs-keyword">let</span> index = i;
<span class="hljs-keyword">if</span> (!different_types) {
index = cancel_accList.length - naturals + i;
}
<span class="hljs-keyword">const</span> acc = cancel_accList[index];
cancelled.push({ <span class="hljs-attr">type</span>: <span class="hljs-string">'n'</span>, <span class="hljs-attr">line</span>: acc.line });
}</pre></div>
<p>Combine naturals with main accidental list for the key signature</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.accList = cancelled.concat(<span class="hljs-keyword">this</span>.accList);
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">accList</span>: cancelled,
<span class="hljs-attr">type</span>: cancel_accList[<span class="hljs-number">0</span>].type
};
}</pre></div>
<p>Deprecated</p>
<div class='highlight'><pre> addToStave(stave) {
<span class="hljs-keyword">this</span>.paddingForced = <span class="hljs-literal">true</span>;
stave.addModifier(<span class="hljs-keyword">this</span>);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Apply the accidental staff line placement based on the <code>clef</code> and
the accidental <code>type</code> for the key signature (‘# or ‘b’).</p>
<div class='highlight'><pre> convertAccLines(clef, type, accList = <span class="hljs-keyword">this</span>.accList) {
<span class="hljs-keyword">let</span> offset = <span class="hljs-number">0.0</span>; <span class="hljs-comment">// if clef === "treble"</span>
<span class="hljs-keyword">let</span> customLines; <span class="hljs-comment">// when clef doesn't follow treble key sig shape</span>
<span class="hljs-keyword">switch</span> (clef) {</pre></div>
<p>Treble & Subbass both have offsets of 0, so are not included.</p>
<div class='highlight'><pre> <span class="hljs-keyword">case</span> <span class="hljs-string">'soprano'</span>:
<span class="hljs-keyword">if</span> (type === <span class="hljs-string">'#'</span>) customLines = [<span class="hljs-number">2.5</span>, <span class="hljs-number">0.5</span>, <span class="hljs-number">2</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-keyword">else</span> offset = <span class="hljs-number">-1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'mezzo-soprano'</span>:
<span class="hljs-keyword">if</span> (type === <span class="hljs-string">'b'</span>) customLines = [<span class="hljs-number">0</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-keyword">else</span> offset = <span class="hljs-number">1.5</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'alto'</span>:
offset = <span class="hljs-number">0.5</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'tenor'</span>:
<span class="hljs-keyword">if</span> (type === <span class="hljs-string">'#'</span>) customLines = [<span class="hljs-number">3</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-number">0</span>, <span class="hljs-number">1.5</span>];
<span class="hljs-keyword">else</span> offset = <span class="hljs-number">-0.5</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'baritone-f'</span>:
<span class="hljs-keyword">case</span> <span class="hljs-string">'baritone-c'</span>:
<span class="hljs-keyword">if</span> (type === <span class="hljs-string">'b'</span>) customLines = [<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-number">2</span>];
<span class="hljs-keyword">else</span> offset = <span class="hljs-number">2</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'bass'</span>:
<span class="hljs-keyword">case</span> <span class="hljs-string">'french'</span>:
offset = <span class="hljs-number">1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
<span class="hljs-keyword">break</span>;
}</pre></div>
<p>If there’s a special case, assign those lines/spaces:</p>
<div class='highlight'><pre> <span class="hljs-keyword">let</span> i;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> customLines !== <span class="hljs-string">'undefined'</span>) {
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < accList.length; ++i) {
accList[i].line = customLines[i];
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (offset !== <span class="hljs-number">0</span>) {
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < accList.length; ++i) {
accList[i].line += offset;
}
}
}
getPadding(index) {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.formatted) <span class="hljs-keyword">this</span>.format();
<span class="hljs-keyword">return</span> (
<span class="hljs-keyword">this</span>.glyphs.length === <span class="hljs-number">0</span> || (!<span class="hljs-keyword">this</span>.paddingForced && index < <span class="hljs-number">2</span>) ?
<span class="hljs-number">0</span> : <span class="hljs-keyword">this</span>.padding
);
}
getWidth() {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.formatted) <span class="hljs-keyword">this</span>.format();
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.width;
}
setKeySig(keySpec, cancelKeySpec, alterKeySpec) {
<span class="hljs-keyword">this</span>.formatted = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.keySpec = keySpec;
<span class="hljs-keyword">this</span>.cancelKeySpec = cancelKeySpec;
<span class="hljs-keyword">this</span>.alterKeySpec = alterKeySpec;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Alter the accidentals of a key spec one by one.
Each alteration is a new accidental that replaces the
original accidental (or the canceled one).</p>
<div class='highlight'><pre> alterKey(alterKeySpec) {
<span class="hljs-keyword">this</span>.formatted = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.alterKeySpec = alterKeySpec;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
convertToAlterAccList(alterKeySpec) {
<span class="hljs-keyword">const</span> max = <span class="hljs-built_in">Math</span>.min(alterKeySpec.length, <span class="hljs-keyword">this</span>.accList.length);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < max; ++i) {
<span class="hljs-keyword">if</span> (alterKeySpec[i]) {
<span class="hljs-keyword">this</span>.accList[i].type = alterKeySpec[i];
}
}
}
format() {
<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">'KeySignatureError'</span>, <span class="hljs-string">"Can't draw key signature without stave."</span>);
}
<span class="hljs-keyword">this</span>.width = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.glyphs = [];
<span class="hljs-keyword">this</span>.xPositions = [<span class="hljs-number">0</span>]; <span class="hljs-comment">// initialize with initial x position</span>
<span class="hljs-keyword">this</span>.accList = Flow.keySignature(<span class="hljs-keyword">this</span>.keySpec);
<span class="hljs-keyword">const</span> accList = <span class="hljs-keyword">this</span>.accList;
<span class="hljs-keyword">const</span> firstAccidentalType = accList.length > <span class="hljs-number">0</span> ? accList[<span class="hljs-number">0</span>].type : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">let</span> cancelAccList;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.cancelKeySpec) {
cancelAccList = <span class="hljs-keyword">this</span>.convertToCancelAccList(<span class="hljs-keyword">this</span>.cancelKeySpec);
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.alterKeySpec) {
<span class="hljs-keyword">this</span>.convertToAlterAccList(<span class="hljs-keyword">this</span>.alterKeySpec);
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.accList.length > <span class="hljs-number">0</span>) {
<span class="hljs-keyword">const</span> clef = ((<span class="hljs-keyword">this</span>.position === StaveModifier.Position.END) ?
<span class="hljs-keyword">this</span>.stave.endClef : <span class="hljs-keyword">this</span>.stave.clef) || <span class="hljs-keyword">this</span>.stave.clef;
<span class="hljs-keyword">if</span> (cancelAccList) {
<span class="hljs-keyword">this</span>.convertAccLines(clef, cancelAccList.type, cancelAccList.accList);
}
<span class="hljs-keyword">this</span>.convertAccLines(clef, firstAccidentalType, accList);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.accList.length; ++i) {
<span class="hljs-keyword">this</span>.convertToGlyph(<span class="hljs-keyword">this</span>.accList[i], <span class="hljs-keyword">this</span>.accList[i + <span class="hljs-number">1</span>]);
}
}
<span class="hljs-keyword">this</span>.formatted = <span class="hljs-literal">true</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">'KeySignatureError'</span>, <span class="hljs-string">"Can't draw key signature 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">'KeySignatureError'</span>, <span class="hljs-string">"Can't draw key signature without stave."</span>);
}
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.formatted) <span class="hljs-keyword">this</span>.format();
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.glyphs.length; i++) {
<span class="hljs-keyword">const</span> glyph = <span class="hljs-keyword">this</span>.glyphs[i];
<span class="hljs-keyword">const</span> x = <span class="hljs-keyword">this</span>.x + <span class="hljs-keyword">this</span>.xPositions[i];
glyph.setStave(<span class="hljs-keyword">this</span>.stave);
glyph.setContext(<span class="hljs-keyword">this</span>.stave.context);
glyph.renderToStave(x);
}
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>