vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
799 lines (561 loc) • 26.1 kB
HTML
<html>
<head>
<title>element.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>element.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 Mohit Cheppudira</p>
<h2 id="description">Description</h2>
<p>This file implements a generic base class for VexFlow, with implementations
of general functions and properties that can be inherited by all VexFlow elements.</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> { Registry } <span class="hljs-keyword">from</span> <span class="hljs-string">'./registry'</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">Element</span> </span>{
<span class="hljs-keyword">static</span> newID() { <span class="hljs-keyword">return</span> <span class="hljs-string">'auto'</span> + (Element.ID++); }
<span class="hljs-keyword">constructor</span>({ type } = {}) {
<span class="hljs-keyword">this</span>.attrs = {
<span class="hljs-attr">id</span>: Element.newID(),
<span class="hljs-attr">el</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">type</span>: type || <span class="hljs-string">'Base'</span>,
<span class="hljs-attr">classes</span>: {},
};
<span class="hljs-keyword">this</span>.boundingBox = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.context = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.rendered = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">this</span>.fontStack = Flow.DEFAULT_FONT_STACK;
<span class="hljs-keyword">this</span>.musicFont = Flow.DEFAULT_FONT_STACK[<span class="hljs-number">0</span>];</pre></div>
<p>If a default registry exist, then register with it right away.</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (Registry.getDefaultRegistry()) {
Registry.getDefaultRegistry().register(<span class="hljs-keyword">this</span>);
}
}</pre></div>
<p>set music font</p>
<div class='highlight'><pre> setFontStack(fontStack) {
<span class="hljs-keyword">this</span>.fontStack = fontStack;
<span class="hljs-keyword">this</span>.musicFont = fontStack[<span class="hljs-number">0</span>];
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
getFontStack() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.fontStack;
}</pre></div>
<p>set the draw style of a stemmable note:</p>
<div class='highlight'><pre> setStyle(style) { <span class="hljs-keyword">this</span>.style = style; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
getStyle() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.style; }</pre></div>
<p>Apply current style to Canvas <code>context</code></p>
<div class='highlight'><pre> applyStyle(context = <span class="hljs-keyword">this</span>.context, style = <span class="hljs-keyword">this</span>.getStyle()) {
<span class="hljs-keyword">if</span> (!style) <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
context.save();
<span class="hljs-keyword">if</span> (style.shadowColor) context.setShadowColor(style.shadowColor);
<span class="hljs-keyword">if</span> (style.shadowBlur) context.setShadowBlur(style.shadowBlur);
<span class="hljs-keyword">if</span> (style.fillStyle) context.setFillStyle(style.fillStyle);
<span class="hljs-keyword">if</span> (style.strokeStyle) context.setStrokeStyle(style.strokeStyle);
<span class="hljs-keyword">if</span> (style.lineWidth) context.setLineWidth(style.lineWidth);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
restoreStyle(context = <span class="hljs-keyword">this</span>.context, style = <span class="hljs-keyword">this</span>.getStyle()) {
<span class="hljs-keyword">if</span> (!style) <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
context.restore();
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>draw with style of an element.</p>
<div class='highlight'><pre> drawWithStyle() {
<span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">this</span>.applyStyle();
<span class="hljs-keyword">this</span>.draw();
<span class="hljs-keyword">this</span>.restoreStyle();
}</pre></div>
<p>An element can have multiple class labels.</p>
<div class='highlight'><pre> hasClass(className) { <span class="hljs-keyword">return</span> (<span class="hljs-keyword">this</span>.attrs.classes[className] === <span class="hljs-literal">true</span>); }
addClass(className) {
<span class="hljs-keyword">this</span>.attrs.classes[className] = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.registry) {
<span class="hljs-keyword">this</span>.registry.onUpdate({
<span class="hljs-attr">id</span>: <span class="hljs-keyword">this</span>.getAttribute(<span class="hljs-string">'id'</span>),
<span class="hljs-attr">name</span>: <span class="hljs-string">'class'</span>,
<span class="hljs-attr">value</span>: className,
<span class="hljs-attr">oldValue</span>: <span class="hljs-literal">null</span>,
});
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
removeClass(className) {
<span class="hljs-keyword">delete</span> <span class="hljs-keyword">this</span>.attrs.classes[className];
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.registry) {
<span class="hljs-keyword">this</span>.registry.onUpdate({
<span class="hljs-attr">id</span>: <span class="hljs-keyword">this</span>.getAttribute(<span class="hljs-string">'id'</span>),
<span class="hljs-attr">name</span>: <span class="hljs-string">'class'</span>,
<span class="hljs-attr">value</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">oldValue</span>: className,
});
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>This is called by the registry after the element is registered.</p>
<div class='highlight'><pre> onRegister(registry) { <span class="hljs-keyword">this</span>.registry = registry; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
isRendered() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.rendered; }
setRendered(rendered = <span class="hljs-literal">true</span>) { <span class="hljs-keyword">this</span>.rendered = rendered; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
getAttributes() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.attrs; }
getAttribute(name) { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.attrs[name]; }
setAttribute(name, value) {
<span class="hljs-keyword">const</span> id = <span class="hljs-keyword">this</span>.attrs.id;
<span class="hljs-keyword">const</span> oldValue = <span class="hljs-keyword">this</span>.attrs[name];
<span class="hljs-keyword">this</span>.attrs[name] = value;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.registry) {</pre></div>
<p>Register with old id to support id changes.</p>
<div class='highlight'><pre> <span class="hljs-keyword">this</span>.registry.onUpdate({ id, name, value, oldValue });
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
getContext() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.context; }
setContext(context) { <span class="hljs-keyword">this</span>.context = context; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
getBoundingBox() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.boundingBox; }</pre></div>
<p>Validators</p>
<div class='highlight'><pre> checkContext() {
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.context) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'NoContext'</span>, <span class="hljs-string">'No rendering context attached to instance'</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.context;
}
}
Element.ID = <span class="hljs-number">1000</span>;</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>