vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
873 lines (637 loc) • 31.1 kB
HTML
<html>
<head>
<title>stavebarline.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>stavebarline.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>
<p>Author Larry Kuhns 2011</p>
<div class='highlight'><pre>
<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">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Barline</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">'barlines'</span>; }
<span class="hljs-keyword">static</span> get type() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">SINGLE</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">DOUBLE</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">END</span>: <span class="hljs-number">3</span>,
<span class="hljs-attr">REPEAT_BEGIN</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">REPEAT_END</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">REPEAT_BOTH</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">NONE</span>: <span class="hljs-number">7</span>,
};
}
<span class="hljs-keyword">static</span> get typeString() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">single</span>: Barline.type.SINGLE,
<span class="hljs-attr">double</span>: Barline.type.DOUBLE,
<span class="hljs-attr">end</span>: Barline.type.END,
<span class="hljs-attr">repeatBegin</span>: Barline.type.REPEAT_BEGIN,
<span class="hljs-attr">repeatEnd</span>: Barline.type.REPEAT_END,
<span class="hljs-attr">repeatBoth</span>: Barline.type.REPEAT_BOTH,
<span class="hljs-attr">none</span>: Barline.type.NONE,
};
}
<span class="hljs-comment">/**
* @constructor
*/</span>
<span class="hljs-keyword">constructor</span>(type) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Barline'</span>);
<span class="hljs-keyword">this</span>.thickness = Flow.STAVE_LINE_THICKNESS;
<span class="hljs-keyword">const</span> TYPE = Barline.type;
<span class="hljs-keyword">this</span>.widths = {};
<span class="hljs-keyword">this</span>.widths[TYPE.SINGLE] = <span class="hljs-number">5</span>;
<span class="hljs-keyword">this</span>.widths[TYPE.DOUBLE] = <span class="hljs-number">5</span>;
<span class="hljs-keyword">this</span>.widths[TYPE.END] = <span class="hljs-number">5</span>;
<span class="hljs-keyword">this</span>.widths[TYPE.REPEAT_BEGIN] = <span class="hljs-number">5</span>;
<span class="hljs-keyword">this</span>.widths[TYPE.REPEAT_END] = <span class="hljs-number">5</span>;
<span class="hljs-keyword">this</span>.widths[TYPE.REPEAT_BOTH] = <span class="hljs-number">5</span>;
<span class="hljs-keyword">this</span>.widths[TYPE.NONE] = <span class="hljs-number">5</span>;
<span class="hljs-keyword">this</span>.paddings = {};
<span class="hljs-keyword">this</span>.paddings[TYPE.SINGLE] = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.paddings[TYPE.DOUBLE] = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.paddings[TYPE.END] = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.paddings[TYPE.REPEAT_BEGIN] = <span class="hljs-number">15</span>;
<span class="hljs-keyword">this</span>.paddings[TYPE.REPEAT_END] = <span class="hljs-number">15</span>;
<span class="hljs-keyword">this</span>.paddings[TYPE.REPEAT_BOTH] = <span class="hljs-number">15</span>;
<span class="hljs-keyword">this</span>.paddings[TYPE.NONE] = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.layoutMetricsMap = {};
<span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.SINGLE] = {
<span class="hljs-attr">xMin</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">xMax</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>,
};
<span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.DOUBLE] = {
<span class="hljs-attr">xMin</span>: <span class="hljs-number">-3</span>,
<span class="hljs-attr">xMax</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>,
};
<span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.END] = {
<span class="hljs-attr">xMin</span>: <span class="hljs-number">-5</span>,
<span class="hljs-attr">xMax</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>,
};
<span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.REPEAT_END] = {
<span class="hljs-attr">xMin</span>: <span class="hljs-number">-10</span>,
<span class="hljs-attr">xMax</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>,
};
<span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.REPEAT_BEGIN] = {
<span class="hljs-attr">xMin</span>: <span class="hljs-number">-2</span>,
<span class="hljs-attr">xMax</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>,
};
<span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.REPEAT_BOTH] = {
<span class="hljs-attr">xMin</span>: <span class="hljs-number">-10</span>,
<span class="hljs-attr">xMax</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>,
};
<span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.NONE] = {
<span class="hljs-attr">xMin</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">xMax</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>,
};
<span class="hljs-keyword">this</span>.setPosition(StaveModifier.Position.BEGIN);
<span class="hljs-keyword">this</span>.setType(type);
}
getCategory() { <span class="hljs-keyword">return</span> Barline.CATEGORY; }
getType() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.type; }
setType(type) {
<span class="hljs-keyword">this</span>.type = <span class="hljs-keyword">typeof</span>(type) === <span class="hljs-string">'string'</span>
? Barline.typeString[type]
: type;
<span class="hljs-keyword">this</span>.setWidth(<span class="hljs-keyword">this</span>.widths[<span class="hljs-keyword">this</span>.type]);
<span class="hljs-keyword">this</span>.setPadding(<span class="hljs-keyword">this</span>.paddings[<span class="hljs-keyword">this</span>.type]);
<span class="hljs-keyword">this</span>.setLayoutMetrics(<span class="hljs-keyword">this</span>.layoutMetricsMap[<span class="hljs-keyword">this</span>.type]);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Draw barlines</p>
<div class='highlight'><pre> draw(stave) {
stave.checkContext();
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">switch</span> (<span class="hljs-keyword">this</span>.type) {
<span class="hljs-keyword">case</span> Barline.type.SINGLE:
<span class="hljs-keyword">this</span>.drawVerticalBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">false</span>);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Barline.type.DOUBLE:
<span class="hljs-keyword">this</span>.drawVerticalBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">true</span>);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Barline.type.END:
<span class="hljs-keyword">this</span>.drawVerticalEndBar(stave, <span class="hljs-keyword">this</span>.x);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Barline.type.REPEAT_BEGIN:</pre></div>
<p>If the barline is shifted over (in front of clef/time/key)
Draw vertical bar at the beginning.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.drawRepeatBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">true</span>);
<span class="hljs-keyword">if</span> (stave.getX() !== <span class="hljs-keyword">this</span>.x) {
<span class="hljs-keyword">this</span>.drawVerticalBar(stave, stave.getX());
}
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Barline.type.REPEAT_END:
<span class="hljs-keyword">this</span>.drawRepeatBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">false</span>);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Barline.type.REPEAT_BOTH:
<span class="hljs-keyword">this</span>.drawRepeatBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">false</span>);
<span class="hljs-keyword">this</span>.drawRepeatBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">true</span>);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:</pre></div>
<p>Default is NONE, so nothing to draw</p>
<div class='highlight'><pre> <span class="hljs-keyword">break</span>;
}
}
drawVerticalBar(stave, x, double_bar) {
stave.checkContext();
<span class="hljs-keyword">const</span> topY = stave.getTopLineTopY();
<span class="hljs-keyword">const</span> botY = stave.getBottomLineBottomY();
<span class="hljs-keyword">if</span> (double_bar) {
stave.context.fillRect(x - <span class="hljs-number">3</span>, topY, <span class="hljs-number">1</span>, botY - topY);
}
stave.context.fillRect(x, topY, <span class="hljs-number">1</span>, botY - topY);
}
drawVerticalEndBar(stave, x) {
stave.checkContext();
<span class="hljs-keyword">const</span> topY = stave.getTopLineTopY();
<span class="hljs-keyword">const</span> botY = stave.getBottomLineBottomY();
stave.context.fillRect(x - <span class="hljs-number">5</span>, topY, <span class="hljs-number">1</span>, botY - topY);
stave.context.fillRect(x - <span class="hljs-number">2</span>, topY, <span class="hljs-number">3</span>, botY - topY);
}
drawRepeatBar(stave, x, begin) {
stave.checkContext();
<span class="hljs-keyword">const</span> topY = stave.getTopLineTopY();
<span class="hljs-keyword">const</span> botY = stave.getBottomLineBottomY();
<span class="hljs-keyword">let</span> x_shift = <span class="hljs-number">3</span>;
<span class="hljs-keyword">if</span> (!begin) {
x_shift = <span class="hljs-number">-5</span>;
}
stave.context.fillRect(x + x_shift, topY, <span class="hljs-number">1</span>, botY - topY);
stave.context.fillRect(x - <span class="hljs-number">2</span>, topY, <span class="hljs-number">3</span>, botY - topY);
<span class="hljs-keyword">const</span> dot_radius = <span class="hljs-number">2</span>;</pre></div>
<p>Shift dots left or right</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (begin) {
x_shift += <span class="hljs-number">4</span>;
} <span class="hljs-keyword">else</span> {
x_shift -= <span class="hljs-number">4</span>;
}
<span class="hljs-keyword">const</span> dot_x = (x + x_shift) + (dot_radius / <span class="hljs-number">2</span>);</pre></div>
<p>calculate the y offset based on number of stave lines</p>
<div class='highlight'><pre> <span class="hljs-keyword">let</span> y_offset = (stave.getNumLines() - <span class="hljs-number">1</span>) * stave.getSpacingBetweenLines();
y_offset = (y_offset / <span class="hljs-number">2</span>) - (stave.getSpacingBetweenLines() / <span class="hljs-number">2</span>);
<span class="hljs-keyword">let</span> dot_y = topY + y_offset + (dot_radius / <span class="hljs-number">2</span>);</pre></div>
<p>draw the top repeat dot</p>
<div class='highlight'><pre> stave.context.beginPath();
stave.context.arc(dot_x, dot_y, dot_radius, <span class="hljs-number">0</span>, <span class="hljs-built_in">Math</span>.PI * <span class="hljs-number">2</span>, <span class="hljs-literal">false</span>);
stave.context.fill();</pre></div>
<p>draw the bottom repeat dot</p>
<div class='highlight'><pre> dot_y += stave.getSpacingBetweenLines();
stave.context.beginPath();
stave.context.arc(dot_x, dot_y, dot_radius, <span class="hljs-number">0</span>, <span class="hljs-built_in">Math</span>.PI * <span class="hljs-number">2</span>, <span class="hljs-literal">false</span>);
stave.context.fill();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>