vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
926 lines (615 loc) • 30.2 kB
HTML
<html>
<head>
<title>textbracket.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>textbracket.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 implement <code>TextBrackets</code> which extend between two notes.
The octave transposition markings (8va, 8vb, 15va, 15vb) can be created
using this class.</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> { Element } <span class="hljs-keyword">from</span> <span class="hljs-string">'./element'</span>;
<span class="hljs-keyword">import</span> { Renderer } <span class="hljs-keyword">from</span> <span class="hljs-string">'./renderer'</span>;</pre></div>
<p>To enable logging for this class. Set <code>Vex.Flow.TextBracket.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> (TextBracket.DEBUG) Vex.L(<span class="hljs-string">'Vex.Flow.TextBracket'</span>, args); }
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TextBracket</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Element</span> </span>{</pre></div>
<p>FIXME: Modifier.Position is singular while this is plural, make consistent</p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> get Positions() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">TOP</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">BOTTOM</span>: <span class="hljs-number">-1</span>,
};
}
<span class="hljs-keyword">static</span> get PositionString() {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">top</span>: TextBracket.Positions.TOP,
<span class="hljs-attr">bottom</span>: TextBracket.Positions.BOTTOM,
};
}
<span class="hljs-keyword">constructor</span>({
start,
stop,
text = <span class="hljs-string">''</span>,
superscript = <span class="hljs-string">''</span>,
position = TextBracket.Positions.TOP,
}) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'TextBracket'</span>);
<span class="hljs-keyword">this</span>.start = start;
<span class="hljs-keyword">this</span>.stop = stop;
<span class="hljs-keyword">this</span>.text = text;
<span class="hljs-keyword">this</span>.superscript = superscript;
<span class="hljs-keyword">this</span>.position = <span class="hljs-keyword">typeof</span> position === <span class="hljs-string">'string'</span>
? TextBracket.PositionString[position]
: position;
<span class="hljs-keyword">this</span>.line = <span class="hljs-number">1</span>;
<span class="hljs-keyword">this</span>.font = {
<span class="hljs-attr">family</span>: <span class="hljs-string">'Serif'</span>,
<span class="hljs-attr">size</span>: <span class="hljs-number">15</span>,
<span class="hljs-attr">weight</span>: <span class="hljs-string">'italic'</span>,
};
<span class="hljs-keyword">this</span>.render_options = {
<span class="hljs-attr">dashed</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">dash</span>: [<span class="hljs-number">5</span>],
<span class="hljs-attr">color</span>: <span class="hljs-string">'black'</span>,
<span class="hljs-attr">line_width</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">show_bracket</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">bracket_height</span>: <span class="hljs-number">8</span>,</pre></div>
<p>In the BOTTOM position, the bracket line can extend
under the superscript.</p>
<div class='highlight'><pre> underline_superscript: <span class="hljs-literal">true</span>,
};
}</pre></div>
<p>Apply the text backet styling to the provided <code>context</code></p>
<div class='highlight'><pre> applyStyle(context) {</pre></div>
<p>Apply style for the octave bracket</p>
<div class='highlight'><pre> context.setFont(<span class="hljs-keyword">this</span>.font.family, <span class="hljs-keyword">this</span>.font.size, <span class="hljs-keyword">this</span>.font.weight);
context.setStrokeStyle(<span class="hljs-keyword">this</span>.render_options.color);
context.setFillStyle(<span class="hljs-keyword">this</span>.render_options.color);
context.setLineWidth(<span class="hljs-keyword">this</span>.render_options.line_width);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Set whether the bracket line should be <code>dashed</code>. You can also
optionally set the <code>dash</code> pattern by passing in an array of numbers</p>
<div class='highlight'><pre> setDashed(dashed, dash) {
<span class="hljs-keyword">this</span>.render_options.dashed = dashed;
<span class="hljs-keyword">if</span> (dash) <span class="hljs-keyword">this</span>.render_options.dash = dash;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Set the font for the text</p>
<div class='highlight'><pre> setFont(font) {</pre></div>
<p>We use Object.assign to support partial updates to the font object</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.font = { ...this.font, ...font };
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Set the rendering <code>context</code> for the octave bracket</p>
<div class='highlight'><pre> setLine(line) { <span class="hljs-keyword">this</span>.line = line; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }</pre></div>
<p>Draw the octave bracket on the rendering context</p>
<div class='highlight'><pre> draw() {
<span class="hljs-keyword">const</span> ctx = <span class="hljs-keyword">this</span>.context;
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">let</span> y = <span class="hljs-number">0</span>;
<span class="hljs-keyword">switch</span> (<span class="hljs-keyword">this</span>.position) {
<span class="hljs-keyword">case</span> TextBracket.Positions.TOP:
y = <span class="hljs-keyword">this</span>.start.getStave().getYForTopText(<span class="hljs-keyword">this</span>.line);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> TextBracket.Positions.BOTTOM:
y = <span class="hljs-keyword">this</span>.start.getStave().getYForBottomText(<span class="hljs-keyword">this</span>.line + Flow.TEXT_HEIGHT_OFFSET_HACK);
<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">'InvalidPosition'</span>, <span class="hljs-string">`The position <span class="hljs-subst">${<span class="hljs-keyword">this</span>.position}</span> is invalid`</span>);
}</pre></div>
<p>Get the preliminary start and stop coordintates for the bracket</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> start = { <span class="hljs-attr">x</span>: <span class="hljs-keyword">this</span>.start.getAbsoluteX(), y };
<span class="hljs-keyword">const</span> stop = { <span class="hljs-attr">x</span>: <span class="hljs-keyword">this</span>.stop.getAbsoluteX(), y };
L(<span class="hljs-string">'Rendering TextBracket: start:'</span>, start, <span class="hljs-string">'stop:'</span>, stop, <span class="hljs-string">'y:'</span>, y);
<span class="hljs-keyword">const</span> bracket_height = <span class="hljs-keyword">this</span>.render_options.bracket_height * <span class="hljs-keyword">this</span>.position;
ctx.save();
<span class="hljs-keyword">this</span>.applyStyle(ctx);</pre></div>
<p>Draw text</p>
<div class='highlight'><pre> ctx.fillText(<span class="hljs-keyword">this</span>.text, start.x, start.y);</pre></div>
<p>Get the width and height for the octave number</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> main_width = ctx.measureText(<span class="hljs-keyword">this</span>.text).width;
<span class="hljs-keyword">const</span> main_height = ctx.measureText(<span class="hljs-string">'M'</span>).width;</pre></div>
<p>Calculate the y position for the super script</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> super_y = start.y - (main_height / <span class="hljs-number">2.5</span>);</pre></div>
<p>Draw the superscript</p>
<div class='highlight'><pre> ctx.setFont(<span class="hljs-keyword">this</span>.font.family, <span class="hljs-keyword">this</span>.font.size / <span class="hljs-number">1.4</span>, <span class="hljs-keyword">this</span>.font.weight);
ctx.fillText(<span class="hljs-keyword">this</span>.superscript, start.x + main_width + <span class="hljs-number">1</span>, super_y);</pre></div>
<p>Determine width and height of the superscript</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> superscript_width = ctx.measureText(<span class="hljs-keyword">this</span>.superscript).width;
<span class="hljs-keyword">const</span> super_height = ctx.measureText(<span class="hljs-string">'M'</span>).width;</pre></div>
<p>Setup initial coordinates for the bracket line</p>
<div class='highlight'><pre> <span class="hljs-keyword">let</span> start_x = start.x;
<span class="hljs-keyword">let</span> line_y = super_y;
<span class="hljs-keyword">const</span> end_x = stop.x + <span class="hljs-keyword">this</span>.stop.getGlyph().getWidth();</pre></div>
<p>Adjust x and y coordinates based on position</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.position === TextBracket.Positions.TOP) {
start_x += main_width + superscript_width + <span class="hljs-number">5</span>;
line_y -= super_height / <span class="hljs-number">2.7</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.position === TextBracket.Positions.BOTTOM) {
line_y += super_height / <span class="hljs-number">2.7</span>;
start_x += main_width + <span class="hljs-number">2</span>;
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.render_options.underline_superscript) {
start_x += superscript_width;
}
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.render_options.dashed) {</pre></div>
<p>Main line</p>
<div class='highlight'><pre> Renderer.drawDashedLine(
ctx,
start_x,
line_y,
end_x,
line_y,
<span class="hljs-keyword">this</span>.render_options.dash
);</pre></div>
<p>Ending Bracket</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.render_options.show_bracket) {
Renderer.drawDashedLine(
ctx,
end_x,
line_y + (<span class="hljs-number">1</span> * <span class="hljs-keyword">this</span>.position),
end_x,
line_y + bracket_height,
<span class="hljs-keyword">this</span>.render_options.dash
);
}
} <span class="hljs-keyword">else</span> {
ctx.beginPath();
ctx.moveTo(start_x, line_y);</pre></div>
<p>Main line</p>
<div class='highlight'><pre> ctx.lineTo(end_x, line_y);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.render_options.show_bracket) {</pre></div>
<p>Ending bracket</p>
<div class='highlight'><pre> ctx.lineTo(end_x, line_y + bracket_height);
}
ctx.stroke();
ctx.closePath();
}
ctx.restore();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>