vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
859 lines (586 loc) • 27.3 kB
HTML
<html>
<head>
<title>vex.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>vex.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>
<h2 id="description">Description</h2>
<p>This file implements utility methods used by the rest of the VexFlow
codebase.</p>
<div class='highlight'><pre>
<span class="hljs-comment">/* eslint max-classes-per-file: "off" */</span>
<span class="hljs-keyword">const</span> Vex = <span class="hljs-function"><span class="hljs-params">()</span> =></span> { };</pre></div>
<p>Default log function sends all arguments to console.</p>
<div class='highlight'><pre>Vex.L = <span class="hljs-function">(<span class="hljs-params">block, args</span>) =></span> {
<span class="hljs-keyword">if</span> (!args) <span class="hljs-keyword">return</span>;
<span class="hljs-keyword">const</span> line = <span class="hljs-built_in">Array</span>.prototype.slice.call(args).join(<span class="hljs-string">' '</span>);
<span class="hljs-built_in">window</span>.console.log(block + <span class="hljs-string">': '</span> + line);
};
Vex.MakeException = <span class="hljs-function">(<span class="hljs-params">name</span>) =></span> {
<span class="hljs-keyword">const</span> exception = <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Error</span> </span>{
<span class="hljs-keyword">constructor</span>(message, data) {
<span class="hljs-keyword">super</span>(message);
<span class="hljs-keyword">this</span>.name = name;
<span class="hljs-keyword">this</span>.message = message;
<span class="hljs-keyword">this</span>.data = data;
}
};
<span class="hljs-keyword">return</span> exception;
};</pre></div>
<p>Default runtime exception.</p>
<div class='highlight'><pre><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">RuntimeError</span> </span>{
<span class="hljs-keyword">constructor</span>(code, message) {
<span class="hljs-keyword">this</span>.code = code;
<span class="hljs-keyword">this</span>.message = message;
}
toString() {
<span class="hljs-keyword">return</span> <span class="hljs-string">'[RuntimeError] '</span> + <span class="hljs-keyword">this</span>.code + <span class="hljs-string">':'</span> + <span class="hljs-keyword">this</span>.message;
}
}</pre></div>
<p>Shortcut method for <code>RuntimeError</code>.</p>
<div class='highlight'><pre>Vex.RuntimeError = RuntimeError;
Vex.RERR = Vex.RuntimeError;</pre></div>
<p>Merge <code>destination</code> hash with <code>source</code> hash, overwriting like keys
in <code>source</code> if necessary.</p>
<div class='highlight'><pre>Vex.Merge = <span class="hljs-function">(<span class="hljs-params">destination, source</span>) =></span> {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> property <span class="hljs-keyword">in</span> source) { <span class="hljs-comment">// eslint-disable-line guard-for-in</span>
destination[property] = source[property];
}
<span class="hljs-keyword">return</span> destination;
};</pre></div>
<p>DEPRECATED. Use <code>Math.*</code>.</p>
<div class='highlight'><pre>Vex.Min = <span class="hljs-built_in">Math</span>.min;
Vex.Max = <span class="hljs-built_in">Math</span>.max;
Vex.forEach = <span class="hljs-function">(<span class="hljs-params">a, fn</span>) =></span> {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < a.length; i++) {
fn(a[i], i);
}
};</pre></div>
<p>Round number to nearest fractional value (<code>.5</code>, <code>.25</code>, etc.)</p>
<div class='highlight'><pre>Vex.RoundN = <span class="hljs-function">(<span class="hljs-params">x, n</span>) =></span>
(x % n) >= (n / <span class="hljs-number">2</span>)
? <span class="hljs-built_in">parseInt</span>(x / n, <span class="hljs-number">10</span>) * n + n
: <span class="hljs-built_in">parseInt</span>(x / n, <span class="hljs-number">10</span>) * n;</pre></div>
<p>Locate the mid point between stave lines. Returns a fractional line if a space.</p>
<div class='highlight'><pre>Vex.MidLine = <span class="hljs-function">(<span class="hljs-params">a, b</span>) =></span> {
<span class="hljs-keyword">let</span> mid_line = b + (a - b) / <span class="hljs-number">2</span>;
<span class="hljs-keyword">if</span> (mid_line % <span class="hljs-number">2</span> > <span class="hljs-number">0</span>) {
mid_line = Vex.RoundN(mid_line * <span class="hljs-number">10</span>, <span class="hljs-number">5</span>) / <span class="hljs-number">10</span>;
}
<span class="hljs-keyword">return</span> mid_line;
};</pre></div>
<p>Take <code>arr</code> and return a new list consisting of the sorted, unique,
contents of arr. Does not modify <code>arr</code>.</p>
<div class='highlight'><pre>Vex.SortAndUnique = <span class="hljs-function">(<span class="hljs-params">arr, cmp, eq</span>) =></span> {
<span class="hljs-keyword">if</span> (arr.length > <span class="hljs-number">1</span>) {
<span class="hljs-keyword">const</span> newArr = [];
<span class="hljs-keyword">let</span> last;
arr.sort(cmp);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < arr.length; ++i) {
<span class="hljs-keyword">if</span> (i === <span class="hljs-number">0</span> || !eq(arr[i], last)) {
newArr.push(arr[i]);
}
last = arr[i];
}
<span class="hljs-keyword">return</span> newArr;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> arr;
}
};</pre></div>
<p>Check if array <code>a</code> contains <code>obj</code>.</p>
<div class='highlight'><pre>Vex.Contains = <span class="hljs-function">(<span class="hljs-params">a, obj</span>) =></span> {
<span class="hljs-keyword">let</span> i = a.length;
<span class="hljs-keyword">while</span> (i--) {
<span class="hljs-keyword">if</span> (a[i] === obj) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
};</pre></div>
<p>Get the 2D Canvas context from DOM element <code>canvas_sel</code>.</p>
<div class='highlight'><pre>Vex.getCanvasContext = <span class="hljs-function"><span class="hljs-params">canvas_sel</span> =></span> {
<span class="hljs-keyword">if</span> (!canvas_sel) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArgument'</span>, <span class="hljs-string">'Invalid canvas selector: '</span> + canvas_sel);
}
<span class="hljs-keyword">const</span> canvas = <span class="hljs-built_in">document</span>.getElementById(canvas_sel);
<span class="hljs-keyword">if</span> (!(canvas && canvas.getContext)) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(
<span class="hljs-string">'UnsupportedBrowserError'</span>, <span class="hljs-string">'This browser does not support HTML5 Canvas'</span>
);
}
<span class="hljs-keyword">return</span> canvas.getContext(<span class="hljs-string">'2d'</span>);
};</pre></div>
<p>Draw a tiny dot marker on the specified canvas. A great debugging aid.</p>
<p><code>ctx</code>: Canvas context.
<code>x</code>, <code>y</code>: Dot coordinates.</p>
<div class='highlight'><pre>Vex.drawDot = <span class="hljs-function">(<span class="hljs-params">ctx, x, y, color = <span class="hljs-string">'#55'</span></span>) =></span> {
ctx.save();
ctx.setFillStyle(color);</pre></div>
<p>draw a circle</p>
<div class='highlight'><pre> ctx.beginPath();
ctx.arc(x, y, <span class="hljs-number">3</span>, <span class="hljs-number">0</span>, <span class="hljs-built_in">Math</span>.PI * <span class="hljs-number">2</span>, <span class="hljs-literal">true</span>);
ctx.closePath();
ctx.fill();
ctx.restore();
};</pre></div>
<p>Benchmark. Run function <code>f</code> once and report time elapsed shifted by <code>s</code> milliseconds.</p>
<div class='highlight'><pre>Vex.BM = <span class="hljs-function">(<span class="hljs-params">s, f</span>) =></span> {
<span class="hljs-keyword">const</span> start_time = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime();
f();
<span class="hljs-keyword">const</span> elapsed = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime() - start_time;
Vex.L(s + elapsed + <span class="hljs-string">'ms'</span>);
};</pre></div>
<p>Get stack trace.</p>
<div class='highlight'><pre>Vex.StackTrace = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
<span class="hljs-keyword">const</span> err = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>();
<span class="hljs-keyword">return</span> err.stack;
};</pre></div>
<p>Dump warning to console.</p>
<div class='highlight'><pre>Vex.W = <span class="hljs-function">(<span class="hljs-params">...args</span>) =></span> {
<span class="hljs-keyword">const</span> line = args.join(<span class="hljs-string">' '</span>);
<span class="hljs-built_in">window</span>.console.log(<span class="hljs-string">'Warning: '</span>, line, Vex.StackTrace());
};</pre></div>
<p>Used by various classes (e.g., SVGContext) to provide a
unique prefix to element names (or other keys in shared namespaces).</p>
<div class='highlight'><pre>Vex.Prefix = <span class="hljs-function"><span class="hljs-params">text</span> =></span> Vex.Prefix.prefix + text;
Vex.Prefix.prefix = <span class="hljs-string">'vf-'</span>;
<span class="hljs-keyword">export</span> { Vex };</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>