vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
814 lines (600 loc) • 28.1 kB
HTML
<html>
<head>
<title>stavetie.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>stavetie.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 class implements varies types of ties between contiguous notes. The
ties include: regular ties, hammer ons, pull offs, and slides.</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> { Element } <span class="hljs-keyword">from</span> <span class="hljs-string">'./element'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">StaveTie</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Element</span> </span>{
<span class="hljs-keyword">constructor</span>(notes, text) {
<span class="hljs-comment">/**
* Notes is a struct that has:
*
* {
* first_note: Note,
* last_note: Note,
* first_indices: [n1, n2, n3],
* last_indices: [n1, n2, n3]
* }
*
**/</span>
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'StaveTie'</span>);
<span class="hljs-keyword">this</span>.notes = notes;
<span class="hljs-keyword">this</span>.context = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.text = text;
<span class="hljs-keyword">this</span>.direction = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.render_options = {
<span class="hljs-attr">cp1</span>: <span class="hljs-number">8</span>, <span class="hljs-comment">// Curve control point 1</span>
cp2: <span class="hljs-number">12</span>, <span class="hljs-comment">// Curve control point 2</span>
text_shift_x: <span class="hljs-number">0</span>,
<span class="hljs-attr">first_x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">last_x_shift</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y_shift</span>: <span class="hljs-number">7</span>,
<span class="hljs-attr">tie_spacing</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">font</span>: { <span class="hljs-attr">family</span>: <span class="hljs-string">'Arial'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">style</span>: <span class="hljs-string">''</span> },
};
<span class="hljs-keyword">this</span>.font = <span class="hljs-keyword">this</span>.render_options.font;
<span class="hljs-keyword">this</span>.setNotes(notes);
}
setFont(font) { <span class="hljs-keyword">this</span>.font = font; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setDirection(direction) { <span class="hljs-keyword">this</span>.direction = direction; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
<span class="hljs-comment">/**
* Set the notes to attach this tie to.
*
* @param {!Object} notes The notes to tie up.
*/</span>
setNotes(notes) {
<span class="hljs-keyword">if</span> (!notes.first_note && !notes.last_note) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(
<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">'Tie needs to have either first_note or last_note set.'</span>
);
}
<span class="hljs-keyword">if</span> (!notes.first_indices) notes.first_indices = [<span class="hljs-number">0</span>];
<span class="hljs-keyword">if</span> (!notes.last_indices) notes.last_indices = [<span class="hljs-number">0</span>];
<span class="hljs-keyword">if</span> (notes.first_indices.length !== notes.last_indices.length) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RuntimeError(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">'Tied notes must have similar index sizes'</span>);
}</pre></div>
<p>Success. Lets grab ‘em notes.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.first_note = notes.first_note;
<span class="hljs-keyword">this</span>.first_indices = notes.first_indices;
<span class="hljs-keyword">this</span>.last_note = notes.last_note;
<span class="hljs-keyword">this</span>.last_indices = notes.last_indices;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
<span class="hljs-comment">/**
* @return {boolean} Returns true if this is a partial bar.
*/</span>
isPartial() {
<span class="hljs-keyword">return</span> (!<span class="hljs-keyword">this</span>.first_note || !<span class="hljs-keyword">this</span>.last_note);
}
renderTie(params) {
<span class="hljs-keyword">if</span> (params.first_ys.length === <span class="hljs-number">0</span> || params.last_ys.length === <span class="hljs-number">0</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">'No Y-values to render'</span>);
}
<span class="hljs-keyword">const</span> ctx = <span class="hljs-keyword">this</span>.context;
<span class="hljs-keyword">let</span> cp1 = <span class="hljs-keyword">this</span>.render_options.cp1;
<span class="hljs-keyword">let</span> cp2 = <span class="hljs-keyword">this</span>.render_options.cp2;
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">Math</span>.abs(params.last_x_px - params.first_x_px) < <span class="hljs-number">10</span>) {
cp1 = <span class="hljs-number">2</span>; cp2 = <span class="hljs-number">8</span>;
}
<span class="hljs-keyword">const</span> first_x_shift = <span class="hljs-keyword">this</span>.render_options.first_x_shift;
<span class="hljs-keyword">const</span> last_x_shift = <span class="hljs-keyword">this</span>.render_options.last_x_shift;
<span class="hljs-keyword">const</span> y_shift = <span class="hljs-keyword">this</span>.render_options.y_shift * params.direction;
<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>.first_indices.length; ++i) {
<span class="hljs-keyword">const</span> cp_x = ((params.last_x_px + last_x_shift) +
(params.first_x_px + first_x_shift)) / <span class="hljs-number">2</span>;
<span class="hljs-keyword">const</span> first_y_px = params.first_ys[<span class="hljs-keyword">this</span>.first_indices[i]] + y_shift;
<span class="hljs-keyword">const</span> last_y_px = params.last_ys[<span class="hljs-keyword">this</span>.last_indices[i]] + y_shift;
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">isNaN</span>(first_y_px) || <span class="hljs-built_in">isNaN</span>(last_y_px)) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'BadArguments'</span>, <span class="hljs-string">'Bad indices for tie rendering.'</span>);
}
<span class="hljs-keyword">const</span> top_cp_y = ((first_y_px + last_y_px) / <span class="hljs-number">2</span>) + (cp1 * params.direction);
<span class="hljs-keyword">const</span> bottom_cp_y = ((first_y_px + last_y_px) / <span class="hljs-number">2</span>) + (cp2 * params.direction);
ctx.beginPath();
ctx.moveTo(params.first_x_px + first_x_shift, first_y_px);
ctx.quadraticCurveTo(cp_x, top_cp_y, params.last_x_px + last_x_shift, last_y_px);
ctx.quadraticCurveTo(cp_x, bottom_cp_y, params.first_x_px + first_x_shift, first_y_px);
ctx.closePath();
ctx.fill();
}
}
renderText(first_x_px, last_x_px) {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.text) <span class="hljs-keyword">return</span>;
<span class="hljs-keyword">let</span> center_x = (first_x_px + last_x_px) / <span class="hljs-number">2</span>;
center_x -= <span class="hljs-keyword">this</span>.context.measureText(<span class="hljs-keyword">this</span>.text).width / <span class="hljs-number">2</span>;
<span class="hljs-keyword">this</span>.context.save();
<span class="hljs-keyword">this</span>.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.style);
<span class="hljs-keyword">this</span>.context.fillText(
<span class="hljs-keyword">this</span>.text,
center_x + <span class="hljs-keyword">this</span>.render_options.text_shift_x,
(<span class="hljs-keyword">this</span>.first_note || <span class="hljs-keyword">this</span>.last_note).getStave().getYForTopText() - <span class="hljs-number">1</span>
);
<span class="hljs-keyword">this</span>.context.restore();
}
draw() {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">const</span> first_note = <span class="hljs-keyword">this</span>.first_note;
<span class="hljs-keyword">const</span> last_note = <span class="hljs-keyword">this</span>.last_note;
<span class="hljs-keyword">let</span> first_x_px;
<span class="hljs-keyword">let</span> last_x_px;
<span class="hljs-keyword">let</span> first_ys;
<span class="hljs-keyword">let</span> last_ys;
<span class="hljs-keyword">let</span> stem_direction;
<span class="hljs-keyword">if</span> (first_note) {
first_x_px = first_note.getTieRightX() + <span class="hljs-keyword">this</span>.render_options.tie_spacing;
stem_direction = first_note.getStemDirection();
first_ys = first_note.getYs();
} <span class="hljs-keyword">else</span> {
first_x_px = last_note.getStave().getTieStartX();
first_ys = last_note.getYs();
<span class="hljs-keyword">this</span>.first_indices = <span class="hljs-keyword">this</span>.last_indices;
}
<span class="hljs-keyword">if</span> (last_note) {
last_x_px = last_note.getTieLeftX() + <span class="hljs-keyword">this</span>.render_options.tie_spacing;
stem_direction = last_note.getStemDirection();
last_ys = last_note.getYs();
} <span class="hljs-keyword">else</span> {
last_x_px = first_note.getStave().getTieEndX();
last_ys = first_note.getYs();
<span class="hljs-keyword">this</span>.last_indices = <span class="hljs-keyword">this</span>.first_indices;
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.direction) {
stem_direction = <span class="hljs-keyword">this</span>.direction;
}
<span class="hljs-keyword">this</span>.renderTie({
first_x_px,
last_x_px,
first_ys,
last_ys,
<span class="hljs-attr">direction</span>: stem_direction,
});
<span class="hljs-keyword">this</span>.renderText(first_x_px, last_x_px);
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>