vexflow
Version:
A JavaScript library for rendering music notation and guitar tablature
886 lines (657 loc) • 34.2 kB
HTML
<html>
<head>
<title>stringnumber.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>stringnumber.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</p>
<h2 id="description">Description</h2>
<p>This file implements the <code>StringNumber</code> class which renders string
number annotations beside notes.</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> { Modifier } <span class="hljs-keyword">from</span> <span class="hljs-string">'./modifier'</span>;
<span class="hljs-keyword">import</span> { Renderer } <span class="hljs-keyword">from</span> <span class="hljs-string">'./renderer'</span>;
<span class="hljs-keyword">import</span> { StaveNote } <span class="hljs-keyword">from</span> <span class="hljs-string">'./stavenote'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">StringNumber</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Modifier</span> </span>{
<span class="hljs-keyword">static</span> get CATEGORY() { <span class="hljs-keyword">return</span> <span class="hljs-string">'stringnumber'</span>; }</pre></div>
<h2 id="static-methods">Static Methods</h2>
<p>Arrange string numbers inside a <code>ModifierContext</code></p>
<div class='highlight'><pre> <span class="hljs-keyword">static</span> format(nums, state) {
<span class="hljs-keyword">const</span> left_shift = state.left_shift;
<span class="hljs-keyword">const</span> right_shift = state.right_shift;
<span class="hljs-keyword">const</span> num_spacing = <span class="hljs-number">1</span>;
<span class="hljs-keyword">if</span> (!nums || nums.length === <span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
<span class="hljs-keyword">const</span> nums_list = [];
<span class="hljs-keyword">let</span> prev_note = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">let</span> shift_left = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> shift_right = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> i;
<span class="hljs-keyword">let</span> num;
<span class="hljs-keyword">let</span> note;
<span class="hljs-keyword">let</span> pos;
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < nums.length; ++i) {
num = nums[i];
note = num.getNote();
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < nums.length; ++i) {
num = nums[i];
note = num.getNote();
pos = num.getPosition();
<span class="hljs-keyword">const</span> props = note.getKeyProps()[num.getIndex()];
<span class="hljs-keyword">if</span> (note !== prev_note) {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> n = <span class="hljs-number">0</span>; n < note.keys.length; ++n) {
<span class="hljs-keyword">if</span> (left_shift === <span class="hljs-number">0</span>) {
shift_left = <span class="hljs-built_in">Math</span>.max(note.getLeftDisplacedHeadPx(), shift_left);
}
<span class="hljs-keyword">if</span> (right_shift === <span class="hljs-number">0</span>) {
shift_right = <span class="hljs-built_in">Math</span>.max(note.getRightDisplacedHeadPx(), shift_right);
}
}
prev_note = note;
}
nums_list.push({
pos,
note,
num,
<span class="hljs-attr">line</span>: props.line,
<span class="hljs-attr">shiftL</span>: shift_left,
<span class="hljs-attr">shiftR</span>: shift_right,
});
}
}</pre></div>
<p>Sort string numbers by line number.</p>
<div class='highlight'><pre> nums_list.sort(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =></span> b.line - a.line);</pre></div>
<p>TODO: This variable never gets assigned to anything. Is that a bug or can this be removed?</p>
<div class='highlight'><pre> <span class="hljs-keyword">let</span> num_shiftL = <span class="hljs-number">0</span>; <span class="hljs-comment">// eslint-disable-line</span>
<span class="hljs-keyword">let</span> num_shiftR = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> x_widthL = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> x_widthR = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> last_line = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">let</span> last_note = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < nums_list.length; ++i) {
<span class="hljs-keyword">let</span> num_shift = <span class="hljs-number">0</span>;
note = nums_list[i].note;
pos = nums_list[i].pos;
num = nums_list[i].num;
<span class="hljs-keyword">const</span> line = nums_list[i].line;
<span class="hljs-keyword">const</span> shiftL = nums_list[i].shiftL;
<span class="hljs-keyword">const</span> shiftR = nums_list[i].shiftR;</pre></div>
<p>Reset the position of the string number every line.</p>
<div class='highlight'><pre> <span class="hljs-keyword">if</span> (line !== last_line || note !== last_note) {
num_shiftL = left_shift + shiftL;
num_shiftR = right_shift + shiftR;
}
<span class="hljs-keyword">const</span> num_width = num.getWidth() + num_spacing;
<span class="hljs-keyword">if</span> (pos === Modifier.Position.LEFT) {
num.setXShift(left_shift);
num_shift = shift_left + num_width; <span class="hljs-comment">// spacing</span>
x_widthL = (num_shift > x_widthL) ? num_shift : x_widthL;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (pos === Modifier.Position.RIGHT) {
num.setXShift(num_shiftR);
num_shift += num_width; <span class="hljs-comment">// spacing</span>
x_widthR = (num_shift > x_widthR) ? num_shift : x_widthR;
}
last_line = line;
last_note = note;
}
state.left_shift += x_widthL;
state.right_shift += x_widthR;
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">constructor</span>(number) {
<span class="hljs-keyword">super</span>();
<span class="hljs-keyword">this</span>.setAttribute(<span class="hljs-string">'type'</span>, <span class="hljs-string">'StringNumber'</span>);
<span class="hljs-keyword">this</span>.note = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.last_note = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.index = <span class="hljs-literal">null</span>;
<span class="hljs-keyword">this</span>.string_number = number;
<span class="hljs-keyword">this</span>.setWidth(<span class="hljs-number">20</span>); <span class="hljs-comment">// ???</span>
<span class="hljs-keyword">this</span>.position = Modifier.Position.ABOVE; <span class="hljs-comment">// Default position above stem or note head</span>
<span class="hljs-keyword">this</span>.x_shift = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.y_shift = <span class="hljs-number">0</span>;
<span class="hljs-keyword">this</span>.x_offset = <span class="hljs-number">0</span>; <span class="hljs-comment">// Horizontal offset from default</span>
<span class="hljs-keyword">this</span>.y_offset = <span class="hljs-number">0</span>; <span class="hljs-comment">// Vertical offset from default</span>
<span class="hljs-keyword">this</span>.dashed = <span class="hljs-literal">true</span>; <span class="hljs-comment">// true - draw dashed extension false - no extension</span>
<span class="hljs-keyword">this</span>.leg = Renderer.LineEndType.NONE; <span class="hljs-comment">// draw upward/downward leg at the of extension line</span>
<span class="hljs-keyword">this</span>.radius = <span class="hljs-number">8</span>;
<span class="hljs-keyword">this</span>.font = {
<span class="hljs-attr">family</span>: <span class="hljs-string">'sans-serif'</span>,
<span class="hljs-attr">size</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">weight</span>: <span class="hljs-string">'bold'</span>,
};
}
getCategory() { <span class="hljs-keyword">return</span> StringNumber.CATEGORY; }
getNote() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.note; }
setNote(note) { <span class="hljs-keyword">this</span>.note = note; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
getIndex() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.index; }
setIndex(index) { <span class="hljs-keyword">this</span>.index = index; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setLineEndType(leg) {
<span class="hljs-keyword">if</span> (leg >= Renderer.LineEndType.NONE && leg <= Renderer.LineEndType.DOWN) {
<span class="hljs-keyword">this</span>.leg = leg;
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
}
setStringNumber(number) { <span class="hljs-keyword">this</span>.string_number = number; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setOffsetX(x) { <span class="hljs-keyword">this</span>.x_offset = x; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setOffsetY(y) { <span class="hljs-keyword">this</span>.y_offset = y; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setLastNote(note) { <span class="hljs-keyword">this</span>.last_note = note; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
setDashed(dashed) { <span class="hljs-keyword">this</span>.dashed = dashed; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }
draw() {
<span class="hljs-keyword">const</span> ctx = <span class="hljs-keyword">this</span>.checkContext();
<span class="hljs-keyword">if</span> (!(<span class="hljs-keyword">this</span>.note && (<span class="hljs-keyword">this</span>.index != <span class="hljs-literal">null</span>))) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(<span class="hljs-string">'NoAttachedNote'</span>, <span class="hljs-string">"Can't draw string number without a note and index."</span>);
}
<span class="hljs-keyword">this</span>.setRendered();
<span class="hljs-keyword">const</span> line_space = <span class="hljs-keyword">this</span>.note.stave.options.spacing_between_lines_px;
<span class="hljs-keyword">const</span> start = <span class="hljs-keyword">this</span>.note.getModifierStartXY(<span class="hljs-keyword">this</span>.position, <span class="hljs-keyword">this</span>.index);
<span class="hljs-keyword">let</span> dot_x = (start.x + <span class="hljs-keyword">this</span>.x_shift + <span class="hljs-keyword">this</span>.x_offset);
<span class="hljs-keyword">let</span> dot_y = start.y + <span class="hljs-keyword">this</span>.y_shift + <span class="hljs-keyword">this</span>.y_offset;
<span class="hljs-keyword">switch</span> (<span class="hljs-keyword">this</span>.position) {
<span class="hljs-keyword">case</span> Modifier.Position.ABOVE:
<span class="hljs-keyword">case</span> Modifier.Position.BELOW: {
<span class="hljs-keyword">const</span> stem_ext = <span class="hljs-keyword">this</span>.note.getStemExtents();
<span class="hljs-keyword">let</span> top = stem_ext.topY;
<span class="hljs-keyword">let</span> bottom = stem_ext.baseY + <span class="hljs-number">2</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.note.stem_direction === StaveNote.STEM_DOWN) {
top = stem_ext.baseY;
bottom = stem_ext.topY - <span class="hljs-number">2</span>;
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.position === Modifier.Position.ABOVE) {
dot_y = <span class="hljs-keyword">this</span>.note.hasStem()
? top - (line_space * <span class="hljs-number">1.75</span>)
: start.y - (line_space * <span class="hljs-number">1.75</span>);
} <span class="hljs-keyword">else</span> {
dot_y = <span class="hljs-keyword">this</span>.note.hasStem()
? bottom + (line_space * <span class="hljs-number">1.5</span>)
: start.y + (line_space * <span class="hljs-number">1.75</span>);
}
dot_y += <span class="hljs-keyword">this</span>.y_shift + <span class="hljs-keyword">this</span>.y_offset;
<span class="hljs-keyword">break</span>;
} <span class="hljs-keyword">case</span> Modifier.Position.LEFT:
dot_x -= (<span class="hljs-keyword">this</span>.radius / <span class="hljs-number">2</span>) + <span class="hljs-number">5</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Modifier.Position.RIGHT:
dot_x += (<span class="hljs-keyword">this</span>.radius / <span class="hljs-number">2</span>) + <span class="hljs-number">6</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Vex.RERR(
<span class="hljs-string">'InvalidPosition'</span>, <span class="hljs-string">`The position <span class="hljs-subst">${<span class="hljs-keyword">this</span>.position}</span> is invalid`</span>
);
}
ctx.save();
ctx.beginPath();
ctx.arc(dot_x, dot_y, <span class="hljs-keyword">this</span>.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>);
ctx.lineWidth = <span class="hljs-number">1.5</span>;
ctx.stroke();
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);
<span class="hljs-keyword">const</span> x = dot_x - ctx.measureText(<span class="hljs-keyword">this</span>.string_number).width / <span class="hljs-number">2</span>;
ctx.fillText(<span class="hljs-string">''</span> + <span class="hljs-keyword">this</span>.string_number, x, dot_y + <span class="hljs-number">4.5</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.last_note != <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">const</span> end = <span class="hljs-keyword">this</span>.last_note.getStemX() - <span class="hljs-keyword">this</span>.note.getX() + <span class="hljs-number">5</span>;
ctx.strokeStyle = <span class="hljs-string">'#000000'</span>;
ctx.lineCap = <span class="hljs-string">'round'</span>;
ctx.lineWidth = <span class="hljs-number">0.6</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.dashed) {
Renderer.drawDashedLine(ctx, dot_x + <span class="hljs-number">10</span>, dot_y, dot_x + end, dot_y, [<span class="hljs-number">3</span>, <span class="hljs-number">3</span>]);
} <span class="hljs-keyword">else</span> {
Renderer.drawDashedLine(ctx, dot_x + <span class="hljs-number">10</span>, dot_y, dot_x + end, dot_y, [<span class="hljs-number">3</span>, <span class="hljs-number">0</span>]);
}
<span class="hljs-keyword">let</span> len;
<span class="hljs-keyword">let</span> pattern;
<span class="hljs-keyword">switch</span> (<span class="hljs-keyword">this</span>.leg) {
<span class="hljs-keyword">case</span> Renderer.LineEndType.UP:
len = <span class="hljs-number">-10</span>;
pattern = <span class="hljs-keyword">this</span>.dashed ? [<span class="hljs-number">3</span>, <span class="hljs-number">3</span>] : [<span class="hljs-number">3</span>, <span class="hljs-number">0</span>];
Renderer.drawDashedLine(ctx, dot_x + end, dot_y, dot_x + end, dot_y + len, pattern);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> Renderer.LineEndType.DOWN:
len = <span class="hljs-number">10</span>;
pattern = <span class="hljs-keyword">this</span>.dashed ? [<span class="hljs-number">3</span>, <span class="hljs-number">3</span>] : [<span class="hljs-number">3</span>, <span class="hljs-number">0</span>];
Renderer.drawDashedLine(ctx, dot_x + end, dot_y, dot_x + end, dot_y + len, pattern);
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
<span class="hljs-keyword">break</span>;
}
}
ctx.restore();
}
}</pre></div>
<div class="fleur">h</div>
</div>
</div>
</body>
</html>