UNPKG

vexflow

Version:

A JavaScript library for rendering music notation and guitar tablature

873 lines (637 loc) 31.1 kB
<!DOCTYPE html> <html> <head> <title>stavebarline.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>stavebarline.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> <p>Author Larry Kuhns 2011</p> <div class='highlight'><pre> <span class="hljs-keyword">import</span> { Flow } <span class="hljs-keyword">from</span> <span class="hljs-string">'./tables'</span>; <span class="hljs-keyword">import</span> { StaveModifier } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavemodifier'</span>; <span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Barline</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">'barlines'</span>; } <span class="hljs-keyword">static</span> get type() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">SINGLE</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">DOUBLE</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">END</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">REPEAT_BEGIN</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">REPEAT_END</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">REPEAT_BOTH</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">NONE</span>: <span class="hljs-number">7</span>, }; } <span class="hljs-keyword">static</span> get typeString() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">single</span>: Barline.type.SINGLE, <span class="hljs-attr">double</span>: Barline.type.DOUBLE, <span class="hljs-attr">end</span>: Barline.type.END, <span class="hljs-attr">repeatBegin</span>: Barline.type.REPEAT_BEGIN, <span class="hljs-attr">repeatEnd</span>: Barline.type.REPEAT_END, <span class="hljs-attr">repeatBoth</span>: Barline.type.REPEAT_BOTH, <span class="hljs-attr">none</span>: Barline.type.NONE, }; } <span class="hljs-comment">/** * @constructor */</span> <span class="hljs-keyword">constructor</span>(type) { <span class="hljs-keyword">super</span>(); <span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'Barline'</span>); <span class="hljs-keyword">this</span>.thickness = Flow.STAVE_LINE_THICKNESS; <span class="hljs-keyword">const</span> TYPE = Barline.type; <span class="hljs-keyword">this</span>.widths = {}; <span class="hljs-keyword">this</span>.widths[TYPE.SINGLE] = <span class="hljs-number">5</span>; <span class="hljs-keyword">this</span>.widths[TYPE.DOUBLE] = <span class="hljs-number">5</span>; <span class="hljs-keyword">this</span>.widths[TYPE.END] = <span class="hljs-number">5</span>; <span class="hljs-keyword">this</span>.widths[TYPE.REPEAT_BEGIN] = <span class="hljs-number">5</span>; <span class="hljs-keyword">this</span>.widths[TYPE.REPEAT_END] = <span class="hljs-number">5</span>; <span class="hljs-keyword">this</span>.widths[TYPE.REPEAT_BOTH] = <span class="hljs-number">5</span>; <span class="hljs-keyword">this</span>.widths[TYPE.NONE] = <span class="hljs-number">5</span>; <span class="hljs-keyword">this</span>.paddings = {}; <span class="hljs-keyword">this</span>.paddings[TYPE.SINGLE] = <span class="hljs-number">0</span>; <span class="hljs-keyword">this</span>.paddings[TYPE.DOUBLE] = <span class="hljs-number">0</span>; <span class="hljs-keyword">this</span>.paddings[TYPE.END] = <span class="hljs-number">0</span>; <span class="hljs-keyword">this</span>.paddings[TYPE.REPEAT_BEGIN] = <span class="hljs-number">15</span>; <span class="hljs-keyword">this</span>.paddings[TYPE.REPEAT_END] = <span class="hljs-number">15</span>; <span class="hljs-keyword">this</span>.paddings[TYPE.REPEAT_BOTH] = <span class="hljs-number">15</span>; <span class="hljs-keyword">this</span>.paddings[TYPE.NONE] = <span class="hljs-number">0</span>; <span class="hljs-keyword">this</span>.layoutMetricsMap = {}; <span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.SINGLE] = { <span class="hljs-attr">xMin</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">xMax</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>, }; <span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.DOUBLE] = { <span class="hljs-attr">xMin</span>: <span class="hljs-number">-3</span>, <span class="hljs-attr">xMax</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>, }; <span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.END] = { <span class="hljs-attr">xMin</span>: <span class="hljs-number">-5</span>, <span class="hljs-attr">xMax</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>, }; <span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.REPEAT_END] = { <span class="hljs-attr">xMin</span>: <span class="hljs-number">-10</span>, <span class="hljs-attr">xMax</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>, }; <span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.REPEAT_BEGIN] = { <span class="hljs-attr">xMin</span>: <span class="hljs-number">-2</span>, <span class="hljs-attr">xMax</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>, }; <span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.REPEAT_BOTH] = { <span class="hljs-attr">xMin</span>: <span class="hljs-number">-10</span>, <span class="hljs-attr">xMax</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>, }; <span class="hljs-keyword">this</span>.layoutMetricsMap[TYPE.NONE] = { <span class="hljs-attr">xMin</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">xMax</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">paddingLeft</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">paddingRight</span>: <span class="hljs-number">5</span>, }; <span class="hljs-keyword">this</span>.setPosition(StaveModifier.Position.BEGIN); <span class="hljs-keyword">this</span>.setType(type); } getCategory() { <span class="hljs-keyword">return</span> Barline.CATEGORY; } getType() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.type; } setType(type) { <span class="hljs-keyword">this</span>.type = <span class="hljs-keyword">typeof</span>(type) === <span class="hljs-string">'string'</span> ? Barline.typeString[type] : type; <span class="hljs-keyword">this</span>.setWidth(<span class="hljs-keyword">this</span>.widths[<span class="hljs-keyword">this</span>.type]); <span class="hljs-keyword">this</span>.setPadding(<span class="hljs-keyword">this</span>.paddings[<span class="hljs-keyword">this</span>.type]); <span class="hljs-keyword">this</span>.setLayoutMetrics(<span class="hljs-keyword">this</span>.layoutMetricsMap[<span class="hljs-keyword">this</span>.type]); <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }</pre></div> <p>Draw barlines</p> <div class='highlight'><pre> draw(stave) { stave.checkContext(); <span class="hljs-keyword">this</span>.setRendered(); <span class="hljs-keyword">switch</span> (<span class="hljs-keyword">this</span>.type) { <span class="hljs-keyword">case</span> Barline.type.SINGLE: <span class="hljs-keyword">this</span>.drawVerticalBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">false</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Barline.type.DOUBLE: <span class="hljs-keyword">this</span>.drawVerticalBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">true</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Barline.type.END: <span class="hljs-keyword">this</span>.drawVerticalEndBar(stave, <span class="hljs-keyword">this</span>.x); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Barline.type.REPEAT_BEGIN:</pre></div> <p>If the barline is shifted over (in front of clef/time/key) Draw vertical bar at the beginning.</p> <div class='highlight'><pre> <span class="hljs-keyword">this</span>.drawRepeatBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">true</span>); <span class="hljs-keyword">if</span> (stave.getX() !== <span class="hljs-keyword">this</span>.x) { <span class="hljs-keyword">this</span>.drawVerticalBar(stave, stave.getX()); } <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Barline.type.REPEAT_END: <span class="hljs-keyword">this</span>.drawRepeatBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">false</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> Barline.type.REPEAT_BOTH: <span class="hljs-keyword">this</span>.drawRepeatBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">false</span>); <span class="hljs-keyword">this</span>.drawRepeatBar(stave, <span class="hljs-keyword">this</span>.x, <span class="hljs-literal">true</span>); <span class="hljs-keyword">break</span>; <span class="hljs-keyword">default</span>:</pre></div> <p>Default is NONE, so nothing to draw</p> <div class='highlight'><pre> <span class="hljs-keyword">break</span>; } } drawVerticalBar(stave, x, double_bar) { stave.checkContext(); <span class="hljs-keyword">const</span> topY = stave.getTopLineTopY(); <span class="hljs-keyword">const</span> botY = stave.getBottomLineBottomY(); <span class="hljs-keyword">if</span> (double_bar) { stave.context.fillRect(x - <span class="hljs-number">3</span>, topY, <span class="hljs-number">1</span>, botY - topY); } stave.context.fillRect(x, topY, <span class="hljs-number">1</span>, botY - topY); } drawVerticalEndBar(stave, x) { stave.checkContext(); <span class="hljs-keyword">const</span> topY = stave.getTopLineTopY(); <span class="hljs-keyword">const</span> botY = stave.getBottomLineBottomY(); stave.context.fillRect(x - <span class="hljs-number">5</span>, topY, <span class="hljs-number">1</span>, botY - topY); stave.context.fillRect(x - <span class="hljs-number">2</span>, topY, <span class="hljs-number">3</span>, botY - topY); } drawRepeatBar(stave, x, begin) { stave.checkContext(); <span class="hljs-keyword">const</span> topY = stave.getTopLineTopY(); <span class="hljs-keyword">const</span> botY = stave.getBottomLineBottomY(); <span class="hljs-keyword">let</span> x_shift = <span class="hljs-number">3</span>; <span class="hljs-keyword">if</span> (!begin) { x_shift = <span class="hljs-number">-5</span>; } stave.context.fillRect(x + x_shift, topY, <span class="hljs-number">1</span>, botY - topY); stave.context.fillRect(x - <span class="hljs-number">2</span>, topY, <span class="hljs-number">3</span>, botY - topY); <span class="hljs-keyword">const</span> dot_radius = <span class="hljs-number">2</span>;</pre></div> <p>Shift dots left or right</p> <div class='highlight'><pre> <span class="hljs-keyword">if</span> (begin) { x_shift += <span class="hljs-number">4</span>; } <span class="hljs-keyword">else</span> { x_shift -= <span class="hljs-number">4</span>; } <span class="hljs-keyword">const</span> dot_x = (x + x_shift) + (dot_radius / <span class="hljs-number">2</span>);</pre></div> <p>calculate the y offset based on number of stave lines</p> <div class='highlight'><pre> <span class="hljs-keyword">let</span> y_offset = (stave.getNumLines() - <span class="hljs-number">1</span>) * stave.getSpacingBetweenLines(); y_offset = (y_offset / <span class="hljs-number">2</span>) - (stave.getSpacingBetweenLines() / <span class="hljs-number">2</span>); <span class="hljs-keyword">let</span> dot_y = topY + y_offset + (dot_radius / <span class="hljs-number">2</span>);</pre></div> <p>draw the top repeat dot</p> <div class='highlight'><pre> stave.context.beginPath(); stave.context.arc(dot_x, dot_y, dot_radius, <span class="hljs-number">0</span>, <span class="hljs-built_in">Math</span>.PI * <span class="hljs-number">2</span>, <span class="hljs-literal">false</span>); stave.context.fill();</pre></div> <p>draw the bottom repeat dot</p> <div class='highlight'><pre> dot_y += stave.getSpacingBetweenLines(); stave.context.beginPath(); stave.context.arc(dot_x, dot_y, dot_radius, <span class="hljs-number">0</span>, <span class="hljs-built_in">Math</span>.PI * <span class="hljs-number">2</span>, <span class="hljs-literal">false</span>); stave.context.fill(); } }</pre></div> <div class="fleur">h</div> </div> </div> </body> </html>