vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
984 lines (696 loc) • 33 kB
HTML
<html>
<head>
<title>fraction.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>fraction.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>Fraction class that represents a rational number</p>
<p>@author zz85
@author incompleteopus (modifications)</p>
<div class='highlight'><pre>
<span class="hljs-comment">/* eslint-disable no-underscore-dangle */</span>
<span class="hljs-keyword">import</span> { Vex } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vex'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Fraction</span> </span>{
<span class="hljs-comment">/**
* GCD: Find greatest common divisor using Euclidean algorithm
*/</span>
<span class="hljs-keyword">static</span> GCD(a, b) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> a !== <span class="hljs-string">'number'</span> || <span class="hljs-keyword">typeof</span> b !== <span class="hljs-string">'number'</span>) {
<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 numbers: <span class="hljs-subst">${a}</span>, <span class="hljs-subst">${b}</span>`</span>);
}
<span class="hljs-keyword">let</span> t;
<span class="hljs-keyword">while</span> (b !== <span class="hljs-number">0</span>) {
t = b;
b = a % b;
a = t;
}
<span class="hljs-keyword">return</span> a;
}
<span class="hljs-comment">/**
* LCM: Lowest common multiple
*/</span>
<span class="hljs-keyword">static</span> LCM(a, b) {
<span class="hljs-keyword">return</span> ((a * b) / Fraction.GCD(a, b));
}
<span class="hljs-comment">/**
* LCMM: Lowest common multiple for more than two numbers
*/</span>
<span class="hljs-keyword">static</span> LCMM(args) {
<span class="hljs-keyword">if</span> (args.length === <span class="hljs-number">0</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (args.length === <span class="hljs-number">1</span>) {
<span class="hljs-keyword">return</span> args[<span class="hljs-number">0</span>];
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (args.length === <span class="hljs-number">2</span>) {
<span class="hljs-keyword">return</span> Fraction.LCM(args[<span class="hljs-number">0</span>], args[<span class="hljs-number">1</span>]);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> arg0 = args[<span class="hljs-number">0</span>];
args.shift();
<span class="hljs-keyword">return</span> Fraction.LCM(arg0, Fraction.LCMM(args));
}
}
<span class="hljs-keyword">constructor</span>(numerator, denominator) {
<span class="hljs-keyword">this</span>.set(numerator, denominator);
}
set(numerator, denominator) {
<span class="hljs-keyword">this</span>.numerator = numerator === <span class="hljs-literal">undefined</span> ? <span class="hljs-number">1</span> : numerator;
<span class="hljs-keyword">this</span>.denominator = denominator === <span class="hljs-literal">undefined</span> ? <span class="hljs-number">1</span> : denominator;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
value() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.numerator / <span class="hljs-keyword">this</span>.denominator;
}
simplify() {
<span class="hljs-keyword">let</span> u = <span class="hljs-keyword">this</span>.numerator;
<span class="hljs-keyword">let</span> d = <span class="hljs-keyword">this</span>.denominator;
<span class="hljs-keyword">const</span> gcd = Fraction.GCD(u, d);
u /= gcd;
d /= gcd;
<span class="hljs-keyword">if</span> (d < <span class="hljs-number">0</span>) {
d = -d;
u = -u;
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.set(u, d);
}
add(param1, param2) {
<span class="hljs-keyword">let</span> otherNumerator;
<span class="hljs-keyword">let</span> otherDenominator;
<span class="hljs-keyword">if</span> (param1 <span class="hljs-keyword">instanceof</span> Fraction) {
otherNumerator = param1.numerator;
otherDenominator = param1.denominator;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (param1 !== <span class="hljs-literal">undefined</span>) {
otherNumerator = param1;
} <span class="hljs-keyword">else</span> {
otherNumerator = <span class="hljs-number">0</span>;
}
<span class="hljs-keyword">if</span> (param2 !== <span class="hljs-literal">undefined</span>) {
otherDenominator = param2;
} <span class="hljs-keyword">else</span> {
otherDenominator = <span class="hljs-number">1</span>;
}
}
<span class="hljs-keyword">const</span> lcm = Fraction.LCM(<span class="hljs-keyword">this</span>.denominator, otherDenominator);
<span class="hljs-keyword">const</span> a = lcm / <span class="hljs-keyword">this</span>.denominator;
<span class="hljs-keyword">const</span> b = lcm / otherDenominator;
<span class="hljs-keyword">const</span> u = <span class="hljs-keyword">this</span>.numerator * a + otherNumerator * b;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.set(u, lcm);
}
subtract(param1, param2) {
<span class="hljs-keyword">let</span> otherNumerator;
<span class="hljs-keyword">let</span> otherDenominator;
<span class="hljs-keyword">if</span> (param1 <span class="hljs-keyword">instanceof</span> Fraction) {
otherNumerator = param1.numerator;
otherDenominator = param1.denominator;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (param1 !== <span class="hljs-literal">undefined</span>) {
otherNumerator = param1;
} <span class="hljs-keyword">else</span> {
otherNumerator = <span class="hljs-number">0</span>;
}
<span class="hljs-keyword">if</span> (param2 !== <span class="hljs-literal">undefined</span>) {
otherDenominator = param2;
} <span class="hljs-keyword">else</span> {
otherDenominator = <span class="hljs-number">1</span>;
}
}
<span class="hljs-keyword">const</span> lcm = Fraction.LCM(<span class="hljs-keyword">this</span>.denominator, otherDenominator);
<span class="hljs-keyword">const</span> a = lcm / <span class="hljs-keyword">this</span>.denominator;
<span class="hljs-keyword">const</span> b = lcm / otherDenominator;
<span class="hljs-keyword">const</span> u = <span class="hljs-keyword">this</span>.numerator * a - otherNumerator * b;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.set(u, lcm);
}
multiply(param1, param2) {
<span class="hljs-keyword">let</span> otherNumerator;
<span class="hljs-keyword">let</span> otherDenominator;
<span class="hljs-keyword">if</span> (param1 <span class="hljs-keyword">instanceof</span> Fraction) {
otherNumerator = param1.numerator;
otherDenominator = param1.denominator;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (param1 !== <span class="hljs-literal">undefined</span>) {
otherNumerator = param1;
} <span class="hljs-keyword">else</span> {
otherNumerator = <span class="hljs-number">1</span>;
}
<span class="hljs-keyword">if</span> (param2 !== <span class="hljs-literal">undefined</span>) {
otherDenominator = param2;
} <span class="hljs-keyword">else</span> {
otherDenominator = <span class="hljs-number">1</span>;
}
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.set(<span class="hljs-keyword">this</span>.numerator * otherNumerator, <span class="hljs-keyword">this</span>.denominator * otherDenominator);
}
divide(param1, param2) {
<span class="hljs-keyword">let</span> otherNumerator;
<span class="hljs-keyword">let</span> otherDenominator;
<span class="hljs-keyword">if</span> (param1 <span class="hljs-keyword">instanceof</span> Fraction) {
otherNumerator = param1.numerator;
otherDenominator = param1.denominator;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (param1 !== <span class="hljs-literal">undefined</span>) {
otherNumerator = param1;
} <span class="hljs-keyword">else</span> {
otherNumerator = <span class="hljs-number">1</span>;
}
<span class="hljs-keyword">if</span> (param2 !== <span class="hljs-literal">undefined</span>) {
otherDenominator = param2;
} <span class="hljs-keyword">else</span> {
otherDenominator = <span class="hljs-number">1</span>;
}
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.set(<span class="hljs-keyword">this</span>.numerator * otherDenominator, <span class="hljs-keyword">this</span>.denominator * otherNumerator);
}</pre></div>
<p>Simplifies both sides and checks if they are equal.</p>
<div class='highlight'><pre> equals(compare) {
<span class="hljs-keyword">const</span> a = Fraction.__compareA.copy(compare).simplify();
<span class="hljs-keyword">const</span> b = Fraction.__compareB.copy(<span class="hljs-keyword">this</span>).simplify();
<span class="hljs-keyword">return</span> (a.numerator === b.numerator) && (a.denominator === b.denominator);
}</pre></div>
<p>Greater than operator.</p>
<div class='highlight'><pre> greaterThan(compare) {
<span class="hljs-keyword">const</span> a = Fraction.__compareB.copy(<span class="hljs-keyword">this</span>);
a.subtract(compare);
<span class="hljs-keyword">return</span> (a.numerator > <span class="hljs-number">0</span>);
}</pre></div>
<p>Greater than or equals operator.</p>
<div class='highlight'><pre> greaterThanEquals(compare) {
<span class="hljs-keyword">const</span> a = Fraction.__compareB.copy(<span class="hljs-keyword">this</span>);
a.subtract(compare);
<span class="hljs-keyword">return</span> (a.numerator >= <span class="hljs-number">0</span>);
}</pre></div>
<p>Less than operator.</p>
<div class='highlight'><pre> lessThan(compare) {
<span class="hljs-keyword">return</span> !(<span class="hljs-keyword">this</span>.greaterThanEquals(compare));
}</pre></div>
<p>Less than or equals operator.</p>
<div class='highlight'><pre> lessThanEquals(compare) {
<span class="hljs-keyword">return</span> !(<span class="hljs-keyword">this</span>.greaterThan(compare));
}</pre></div>
<p>Creates a new copy with this current values.</p>
<div class='highlight'><pre> clone() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Fraction(<span class="hljs-keyword">this</span>.numerator, <span class="hljs-keyword">this</span>.denominator);
}</pre></div>
<p>Copies value of another Fraction into itself.</p>
<div class='highlight'><pre> copy(copy) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> copy === <span class="hljs-string">'number'</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.set(copy || <span class="hljs-number">0</span>, <span class="hljs-number">1</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.set(copy.numerator, copy.denominator);
}</pre></div>
<p>Returns the integer component eg. (4/2) == 2</p>
<div class='highlight'><pre> quotient() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.floor(<span class="hljs-keyword">this</span>.numerator / <span class="hljs-keyword">this</span>.denominator);
}</pre></div>
<p>Returns the fraction component when reduced to a mixed number</p>
<div class='highlight'><pre> fraction() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.numerator % <span class="hljs-keyword">this</span>.denominator;
}</pre></div>
<p>Returns the absolute value</p>
<div class='highlight'><pre> abs() {
<span class="hljs-keyword">this</span>.denominator = <span class="hljs-built_in">Math</span>.abs(<span class="hljs-keyword">this</span>.denominator);
<span class="hljs-keyword">this</span>.numerator = <span class="hljs-built_in">Math</span>.abs(<span class="hljs-keyword">this</span>.numerator);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}</pre></div>
<p>Returns a raw string representation</p>
<div class='highlight'><pre> toString() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.numerator + <span class="hljs-string">'/'</span> + <span class="hljs-keyword">this</span>.denominator;
}</pre></div>
<p>Returns a simplified string respresentation</p>
<div class='highlight'><pre> toSimplifiedString() {
<span class="hljs-keyword">return</span> Fraction.__tmp.copy(<span class="hljs-keyword">this</span>).simplify().toString();
}</pre></div>
<p>Returns string representation in mixed form</p>
<div class='highlight'><pre> toMixedString() {
<span class="hljs-keyword">let</span> s = <span class="hljs-string">''</span>;
<span class="hljs-keyword">const</span> q = <span class="hljs-keyword">this</span>.quotient();
<span class="hljs-keyword">const</span> f = Fraction.__tmp.copy(<span class="hljs-keyword">this</span>);
<span class="hljs-keyword">if</span> (q < <span class="hljs-number">0</span>) {
f.abs().fraction();
} <span class="hljs-keyword">else</span> {
f.fraction();
}
<span class="hljs-keyword">if</span> (q !== <span class="hljs-number">0</span>) {
s += q;
<span class="hljs-keyword">if</span> (f.numerator !== <span class="hljs-number">0</span>) {
s += <span class="hljs-string">' '</span> + f.toSimplifiedString();
}
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (f.numerator === <span class="hljs-number">0</span>) {
s = <span class="hljs-string">'0'</span>;
} <span class="hljs-keyword">else</span> {
s = f.toSimplifiedString();
}
}
<span class="hljs-keyword">return</span> s;
}</pre></div>
<p>Parses a fraction string</p>
<div class='highlight'><pre> parse(str) {
<span class="hljs-keyword">const</span> i = str.split(<span class="hljs-string">'/'</span>);
<span class="hljs-keyword">const</span> n = <span class="hljs-built_in">parseInt</span>(i[<span class="hljs-number">0</span>], <span class="hljs-number">10</span>);
<span class="hljs-keyword">const</span> d = (i[<span class="hljs-number">1</span>]) ? <span class="hljs-built_in">parseInt</span>(i[<span class="hljs-number">1</span>], <span class="hljs-number">10</span>) : <span class="hljs-number">1</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.set(n, d);
}
}</pre></div>
<p>Temporary cached objects</p>
<div class='highlight'><pre>Fraction.__compareA = <span class="hljs-keyword">new</span> Fraction();
Fraction.__compareB = <span class="hljs-keyword">new</span> Fraction();
Fraction.__tmp = <span class="hljs-keyword">new</span> Fraction();</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>