UNPKG

vexflow

Version:

A JavaScript library for rendering music notation and guitar tablature

772 lines (559 loc) 26.9 kB
<!DOCTYPE html> <html> <head> <title>staverepetition.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>staverepetition.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 Larry Kuhns 2011</p> <div class='highlight'><pre> <span class="hljs-keyword">import</span> { StaveModifier } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavemodifier'</span>; <span class="hljs-keyword">import</span> { Glyph } <span class="hljs-keyword">from</span> <span class="hljs-string">'./glyph'</span>; <span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Repetition</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StaveModifier</span> </span>{ <span class="hljs-keyword">static</span> get CATEGORY() { <span class="hljs-keyword">return</span> <span class="hljs-string">'repetitions'</span>; } <span class="hljs-keyword">static</span> get type() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">NONE</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// no coda or segno</span> CODA_LEFT: <span class="hljs-number">2</span>, <span class="hljs-comment">// coda at beginning of stave</span> CODA_RIGHT: <span class="hljs-number">3</span>, <span class="hljs-comment">// coda at end of stave</span> SEGNO_LEFT: <span class="hljs-number">4</span>, <span class="hljs-comment">// segno at beginning of stave</span> SEGNO_RIGHT: <span class="hljs-number">5</span>, <span class="hljs-comment">// segno at end of stave</span> DC: <span class="hljs-number">6</span>, <span class="hljs-comment">// D.C. at end of stave</span> DC_AL_CODA: <span class="hljs-number">7</span>, <span class="hljs-comment">// D.C. al coda at end of stave</span> DC_AL_FINE: <span class="hljs-number">8</span>, <span class="hljs-comment">// D.C. al Fine end of stave</span> DS: <span class="hljs-number">9</span>, <span class="hljs-comment">// D.S. at end of stave</span> DS_AL_CODA: <span class="hljs-number">10</span>, <span class="hljs-comment">// D.S. al coda at end of stave</span> DS_AL_FINE: <span class="hljs-number">11</span>, <span class="hljs-comment">// D.S. al Fine at end of stave</span> FINE: <span class="hljs-number">12</span>, <span class="hljs-comment">// Fine at end of stave</span> }; } <span class="hljs-keyword">constructor</span>(type, x, y_shift) { <span class="hljs-keyword">super</span>(); <span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Repetition'</span>); <span class="hljs-keyword">this</span>.symbol_type = type; <span class="hljs-keyword">this</span>.x = x; <span class="hljs-keyword">this</span>.x_shift = <span class="hljs-number">0</span>; <span class="hljs-keyword">this</span>.y_shift = y_shift; <span class="hljs-keyword">this</span>.font = { <span class="hljs-attr">family</span>: <span class="hljs-string">'times'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">12</span>, <span class="hljs-attr">weight</span>: <span class="hljs-string">'bold italic'</span>, }; } getCategory() { <span class="hljs-keyword">return</span> Repetition.CATEGORY; } setShiftX(x) { <span class="hljs-keyword">this</span>.x_shift = x; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; } setShiftY(y) { <span class="hljs-keyword">this</span>.y_shift = y; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; } draw(stave, x) { <span class="hljs-keyword">this</span>.setRendered(); <span class="hljs-keyword">switch</span> (<span class="hljs-keyword">this</span>.symbol_type) { <span class="hljs-keyword">case</span> Repetition.type.CODA_RIGHT: <span class="hljs-keyword">this</span>.drawCodaFixed(stave, x + stave.width); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.CODA_LEFT: <span class="hljs-keyword">this</span>.drawSymbolText(stave, x, <span class="hljs-string">'Coda'</span>, <span class="hljs-literal">true</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.SEGNO_LEFT: <span class="hljs-keyword">this</span>.drawSignoFixed(stave, x); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.SEGNO_RIGHT: <span class="hljs-keyword">this</span>.drawSignoFixed(stave, x + stave.width); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.DC: <span class="hljs-keyword">this</span>.drawSymbolText(stave, x, <span class="hljs-string">'D.C.'</span>, <span class="hljs-literal">false</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.DC_AL_CODA: <span class="hljs-keyword">this</span>.drawSymbolText(stave, x, <span class="hljs-string">'D.C. al'</span>, <span class="hljs-literal">true</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.DC_AL_FINE: <span class="hljs-keyword">this</span>.drawSymbolText(stave, x, <span class="hljs-string">'D.C. al Fine'</span>, <span class="hljs-literal">false</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.DS: <span class="hljs-keyword">this</span>.drawSymbolText(stave, x, <span class="hljs-string">'D.S.'</span>, <span class="hljs-literal">false</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.DS_AL_CODA: <span class="hljs-keyword">this</span>.drawSymbolText(stave, x, <span class="hljs-string">'D.S. al'</span>, <span class="hljs-literal">true</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.DS_AL_FINE: <span class="hljs-keyword">this</span>.drawSymbolText(stave, x, <span class="hljs-string">'D.S. al Fine'</span>, <span class="hljs-literal">false</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Repetition.type.FINE: <span class="hljs-keyword">this</span>.drawSymbolText(stave, x, <span class="hljs-string">'Fine'</span>, <span class="hljs-literal">false</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">default</span>: <span class="hljs-keyword">break</span>; } <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; } drawCodaFixed(stave, x) { <span class="hljs-keyword">const</span> y = stave.getYForTopText(stave.options.num_lines) + <span class="hljs-keyword">this</span>.y_shift; Glyph.renderGlyph(stave.context, <span class="hljs-keyword">this</span>.x + x + <span class="hljs-keyword">this</span>.x_shift, y + <span class="hljs-number">25</span>, <span class="hljs-number">40</span>, <span class="hljs-string">'coda'</span>, { <span class="hljs-attr">category</span>: <span class="hljs-string">'coda'</span> }); <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; } drawSignoFixed(stave, x) { <span class="hljs-keyword">const</span> y = stave.getYForTopText(stave.options.num_lines) + <span class="hljs-keyword">this</span>.y_shift; Glyph.renderGlyph(stave.context, <span class="hljs-keyword">this</span>.x + x + <span class="hljs-keyword">this</span>.x_shift, y + <span class="hljs-number">25</span>, <span class="hljs-number">30</span>, <span class="hljs-string">'segno'</span>, { <span class="hljs-attr">category</span>: <span class="hljs-string">'segno'</span> }); <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; } drawSymbolText(stave, x, text, draw_coda) { <span class="hljs-keyword">const</span> ctx = stave.checkContext(); ctx.save(); ctx.setFont(<span class="hljs-keyword">this</span>.font.family, <span class="hljs-keyword">this</span>.font.size, <span class="hljs-keyword">this</span>.font.weight);</pre></div> <p>Default to right symbol</p> <div class='highlight'><pre> <span class="hljs-keyword">let</span> text_x = <span class="hljs-number">0</span> + <span class="hljs-keyword">this</span>.x_shift; <span class="hljs-keyword">let</span> symbol_x = x + <span class="hljs-keyword">this</span>.x_shift; <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.symbol_type === Repetition.type.CODA_LEFT) {</pre></div> <p>Offset Coda text to right of stave beginning</p> <div class='highlight'><pre> text_x = <span class="hljs-keyword">this</span>.x + stave.options.vertical_bar_width; symbol_x = text_x + ctx.measureText(text).width + <span class="hljs-number">12</span>; } <span class="hljs-keyword">else</span> {</pre></div> <p>Offset Signo text to left stave end</p> <div class='highlight'><pre> symbol_x = <span class="hljs-keyword">this</span>.x + x + stave.width - <span class="hljs-number">5</span> + <span class="hljs-keyword">this</span>.x_shift; text_x = symbol_x - + ctx.measureText(text).width - <span class="hljs-number">12</span>; } <span class="hljs-keyword">const</span> y = stave.getYForTopText(stave.options.num_lines) + <span class="hljs-keyword">this</span>.y_shift; <span class="hljs-keyword">if</span> (draw_coda) { Glyph.renderGlyph(ctx, symbol_x, y, <span class="hljs-number">40</span>, <span class="hljs-string">'coda'</span>, { <span class="hljs-attr">category</span>: <span class="hljs-string">'coda'</span> }); } ctx.fillText(text, text_x, y + <span class="hljs-number">5</span>); ctx.restore(); <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; } }</pre></div> <div class="fleur">h</div> </div> </div> </body> </html>