vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
810 lines (582 loc) • 27.5 kB
HTML
<html>
<head>
<title>gracenote.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>gracenote.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>
<div class='highlight'><pre>
<span class="hljs-keyword">import</span> { StaveNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavenote'</span>;
<span class="hljs-keyword">import</span> { Stem } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stem'</span>;
<span class="hljs-keyword">import</span> { Flow } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tables'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">GraceNote</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StaveNote</span> </span>{
<span class="hljs-keyword">static</span> get CATEGORY() { <span class="hljs-keyword">return</span> <span class="hljs-string">'gracenotes'</span>; }
<span class="hljs-keyword">static</span> get LEDGER_LINE_OFFSET() { <span class="hljs-keyword">return</span> <span class="hljs-number">2</span>; }
<span class="hljs-keyword">static</span> get SCALE() { <span class="hljs-keyword">return</span> <span class="hljs-number">0.66</span>; }
<span class="hljs-keyword">constructor</span>(note_struct) {
<span class="hljs-keyword">super</span>(<span class="hljs-built_in">Object</span>.assign(note_struct, {
<span class="hljs-attr">glyph_font_scale</span>: Flow.DEFAULT_NOTATION_FONT_SCALE * GraceNote.SCALE,
<span class="hljs-attr">stroke_px</span>: GraceNote.LEDGER_LINE_OFFSET,
}));
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'GraceNote'</span>);
<span class="hljs-keyword">this</span>.slash = note_struct.slash;
<span class="hljs-keyword">this</span>.slur = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">this</span>.buildNoteHeads();
<span class="hljs-keyword">this</span>.width = <span class="hljs-number">3</span>;
}
getStemExtension() {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.stem_extension_override != <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.stem_extension_override;
}
<span class="hljs-keyword">const</span> glyph = <span class="hljs-keyword">this</span>.getGlyph();
<span class="hljs-keyword">if</span> (glyph) {
<span class="hljs-keyword">let</span> ret = <span class="hljs-keyword">super</span>.getStemExtension();
<span class="hljs-keyword">if</span> (glyph.stem) {
<span class="hljs-keyword">const</span> staveNoteScale = <span class="hljs-keyword">this</span>.getStaveNoteScale();
ret = ((Stem.HEIGHT + ret) * staveNoteScale) - Stem.HEIGHT;
}
<span class="hljs-keyword">return</span> ret;
}
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
getCategory() { <span class="hljs-keyword">return</span> GraceNote.CATEGORY; }</pre></div>
<p>FIXME: move this to more basic class.</p>
<div class='highlight'><pre> getStaveNoteScale() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.render_options.glyph_font_scale / Flow.DEFAULT_NOTATION_FONT_SCALE;
}
draw() {
<span class="hljs-keyword">super</span>.draw();
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">const</span> stem = <span class="hljs-keyword">this</span>.stem;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.slash && stem) {
<span class="hljs-keyword">const</span> staveNoteScale = <span class="hljs-keyword">this</span>.getStaveNoteScale();</pre></div>
<p>some magic numbers are based on the staveNoteScale 0.66.</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> offsetScale = staveNoteScale / <span class="hljs-number">0.66</span>;
<span class="hljs-keyword">let</span> slashBBox = <span class="hljs-literal">undefined</span>;
<span class="hljs-keyword">const</span> beam = <span class="hljs-keyword">this</span>.beam;
<span class="hljs-keyword">if</span> (beam) {</pre></div>
<p>FIXME: should render slash after beam?</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (!beam.postFormatted) {
beam.postFormat();
}
slashBBox = <span class="hljs-keyword">this</span>.calcBeamedNotesSlashBBox(<span class="hljs-number">8</span> * offsetScale,
<span class="hljs-number">8</span> * offsetScale,
{
<span class="hljs-attr">stem</span>: <span class="hljs-number">6</span> * offsetScale,
<span class="hljs-attr">beam</span>: <span class="hljs-number">5</span> * offsetScale,
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> stem_direction = <span class="hljs-keyword">this</span>.getStemDirection();
<span class="hljs-keyword">const</span> noteHeadBounds = <span class="hljs-keyword">this</span>.getNoteHeadBounds();
<span class="hljs-keyword">const</span> noteStemHeight = stem.getHeight();
<span class="hljs-keyword">let</span> x = <span class="hljs-keyword">this</span>.getAbsoluteX();
<span class="hljs-keyword">let</span> y = stem_direction === Flow.Stem.DOWN ?
noteHeadBounds.y_top - noteStemHeight :
noteHeadBounds.y_bottom - noteStemHeight;
<span class="hljs-keyword">const</span> defaultStemExtention = stem_direction === Flow.Stem.DOWN ?
<span class="hljs-keyword">this</span>.glyph.stem_down_extension :
<span class="hljs-keyword">this</span>.glyph.stem_up_extension;
<span class="hljs-keyword">let</span> defaultOffsetY = Flow.STEM_HEIGHT;
defaultOffsetY -= (defaultOffsetY / <span class="hljs-number">2.8</span>);
defaultOffsetY += defaultStemExtention;
y += ((defaultOffsetY * staveNoteScale) * stem_direction);
<span class="hljs-keyword">const</span> offsets = stem_direction === Flow.Stem.UP ? {
<span class="hljs-attr">x1</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">y1</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">x2</span>: <span class="hljs-number">13</span>,
<span class="hljs-attr">y2</span>: <span class="hljs-number">-9</span>,
} : {
<span class="hljs-attr">x1</span>: <span class="hljs-number">-4</span>,
<span class="hljs-attr">y1</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">x2</span>: <span class="hljs-number">13</span>,
<span class="hljs-attr">y2</span>: <span class="hljs-number">9</span>,
};
x += (offsets.x1 * offsetScale);
y += (offsets.y1 * offsetScale);
slashBBox = {
<span class="hljs-attr">x1</span>: x,
<span class="hljs-attr">y1</span>: y,
<span class="hljs-attr">x2</span>: x + (offsets.x2 * offsetScale),
<span class="hljs-attr">y2</span>: y + (offsets.y2 * offsetScale),
};
}</pre></div>
<p>FIXME: avoide staff lines, leadger lines or others.</p>
<div class='highlight'><pre>
<span class="hljs-keyword">const</span> ctx = <span class="hljs-keyword">this</span>.context;
ctx.save();
ctx.setLineWidth(<span class="hljs-number">1</span> * offsetScale); <span class="hljs-comment">// <span class="hljs-doctag">FIXME:</span> use more appropriate value.</span>
ctx.beginPath();
ctx.moveTo(slashBBox.x1, slashBBox.y1);
ctx.lineTo(slashBBox.x2, slashBBox.y2);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
calcBeamedNotesSlashBBox(slashStemOffset, slashBeamOffset, protrusions) {
<span class="hljs-keyword">const</span> beam = <span class="hljs-keyword">this</span>.beam;
<span class="hljs-keyword">const</span> beam_slope = beam.slope;
<span class="hljs-keyword">const</span> isBeamEndNote = (beam.notes[beam.notes.length - <span class="hljs-number">1</span>] === <span class="hljs-keyword">this</span>);
<span class="hljs-keyword">const</span> scaleX = isBeamEndNote ? <span class="hljs-number">-1</span> : <span class="hljs-number">1</span>;
<span class="hljs-keyword">const</span> beam_angle = <span class="hljs-built_in">Math</span>.atan(beam_slope * scaleX);</pre></div>
<p>slash line intersecting point on beam.</p>
<div class='highlight'><pre> <span class="hljs-keyword">const</span> iPointOnBeam = {
<span class="hljs-attr">dx</span>: <span class="hljs-built_in">Math</span>.cos(beam_angle) * slashBeamOffset,
<span class="hljs-attr">dy</span>: <span class="hljs-built_in">Math</span>.sin(beam_angle) * slashBeamOffset,
};
slashStemOffset *= <span class="hljs-keyword">this</span>.getStemDirection();
<span class="hljs-keyword">const</span> slash_angle = <span class="hljs-built_in">Math</span>.atan((iPointOnBeam.dy - slashStemOffset) / iPointOnBeam.dx);
<span class="hljs-keyword">const</span> protrusion_stem_dx = <span class="hljs-built_in">Math</span>.cos(slash_angle) * protrusions.stem * scaleX;
<span class="hljs-keyword">const</span> protrusion_stem_dy = <span class="hljs-built_in">Math</span>.sin(slash_angle) * protrusions.stem;
<span class="hljs-keyword">const</span> protrusion_beam_dx = <span class="hljs-built_in">Math</span>.cos(slash_angle) * protrusions.beam * scaleX;
<span class="hljs-keyword">const</span> protrusion_beam_dy = <span class="hljs-built_in">Math</span>.sin(slash_angle) * protrusions.beam;
<span class="hljs-keyword">const</span> stemX = <span class="hljs-keyword">this</span>.getStemX();
<span class="hljs-keyword">const</span> stem0X = beam.notes[<span class="hljs-number">0</span>].getStemX();
<span class="hljs-keyword">const</span> stemY = <span class="hljs-keyword">this</span>.beam.getBeamYToDraw() + ((stemX - stem0X) * beam_slope);
<span class="hljs-keyword">const</span> ret = {
<span class="hljs-attr">x1</span>: stemX - protrusion_stem_dx,
<span class="hljs-attr">y1</span>: (stemY + slashStemOffset - protrusion_stem_dy),
<span class="hljs-attr">x2</span>: stemX + (iPointOnBeam.dx * scaleX) + protrusion_beam_dx,
<span class="hljs-attr">y2</span>: stemY + iPointOnBeam.dy + protrusion_beam_dy,
};
<span class="hljs-keyword">return</span> ret;
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>