vexflow

<!DOCTYPE html> <html> <head> <title>stave.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>stave.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> <a href="http://vexflow.com">VexFlow</a> - Copyright (c) Mohit Muthanna 2010. <div class='highlight'><pre> import { Vex } from './vex'; import { Element } from './element'; import { Flow } from './tables'; import { Barline } from './stavebarline'; import { StaveModifier } from './stavemodifier'; import { Repetition } from './staverepetition'; import { StaveSection } from './stavesection'; import { StaveTempo } from './stavetempo'; import { StaveText } from './stavetext'; import { BoundingBox } from './boundingbox'; import { Clef } from './clef'; import { KeySignature } from './keysignature'; import { TimeSignature } from './timesignature'; import { Volta } from './stavevolta'; export class Stave extends Element { constructor(x, y, width, options) { super(); this.setAttribute('type', 'Stave'); this.x = x; this.y = y; this.width = width; this.formatted = false; this.start_x = x + 5; this.end_x = x + width; this.modifiers = []; // stave modifiers (clef, key, time, barlines, coda, segno, etc.) this.measure = 0; this.clef = 'treble'; this.endClef = undefined; this.font = { family: 'sans-serif', size: 8, weight: '', }; this.options = { vertical_bar_width: 10, // Width around vertical bar end-marker glyph_spacing_px: 10, num_lines: 5, fill_style: '#999999', left_bar: true, // draw vertical bar on left right_bar: true, // draw vertical bar on right spacing_between_lines_px: 10, // in pixels space_above_staff_ln: 4, // in staff lines space_below_staff_ln: 4, // in staff lines top_text_position: 1, // in staff lines }; this.bounds = { x: this.x, y: this.y, w: this.width, h: 0 }; Vex.Merge(this.options, options); this.resetLines(); const BARTYPE = Barline.type;</pre></div> beg bar <div class='highlight'><pre> this.addModifier(new Barline(this.options.left_bar ? BARTYPE.SINGLE : BARTYPE.NONE));</pre></div> end bar <div class='highlight'><pre> this.addEndModifier(new Barline(this.options.right_bar ? BARTYPE.SINGLE : BARTYPE.NONE)); } space(spacing) { return this.options.spacing_between_lines_px * spacing; } resetLines() { this.options.line_config = []; for (let i = 0; i < this.options.num_lines; i++) { this.options.line_config.push({ visible: true }); } this.height = (this.options.num_lines + this.options.space_above_staff_ln) * this.options.spacing_between_lines_px; this.options.bottom_text_position = this.options.num_lines; } getOptions() { return this.options; } setNoteStartX(x) { if (!this.formatted) this.format(); this.start_x = x; const begBarline = this.modifiers[0]; begBarline.setX(this.start_x - begBarline.getWidth()); return this; } getNoteStartX() { if (!this.formatted) this.format(); return this.start_x; } getNoteEndX() { if (!this.formatted) this.format(); return this.end_x; } getTieStartX() { return this.start_x; } getTieEndX() { return this.x + this.width; } getX() { return this.x; } getNumLines() { return this.options.num_lines; } setNumLines(lines) { this.options.num_lines = parseInt(lines, 10); this.resetLines(); return this; } setY(y) { this.y = y; return this; } getTopLineTopY() { return this.getYForLine(0) - (Flow.STAVE_LINE_THICKNESS / 2); } getBottomLineBottomY() { return this.getYForLine(this.getNumLines() - 1) + (Flow.STAVE_LINE_THICKNESS / 2); } setX(x) { const shift = x - this.x; this.formatted = false; this.x = x; this.start_x += shift; this.end_x += shift; for (let i = 0; i < this.modifiers.length; i++) { const mod = this.modifiers[i]; if (mod.x !== undefined) { mod.x += shift; } } return this; } setWidth(width) { this.formatted = false; this.width = width; this.end_x = this.x + width;</pre></div> reset the x position of the end barline (TODO(0xfe): This makes no sense) this.modifiers[1].setX(this.end_x); <div class='highlight'><pre> return this; } getWidth() { return this.width; } getStyle() { return { fillStyle: this.options.fill_style, strokeStyle: this.options.fill_style, // yes, this is correct for legacy compatibility lineWidth: Flow.STAVE_LINE_THICKNESS, ...this.style || {} }; } setMeasure(measure) { this.measure = measure; return this; } /** * Gets the pixels to shift from the beginning of the stave * following the modifier at the provided index * @param {Number} index The index from which to determine the shift * @return {Number} The amount of pixels shifted */ getModifierXShift(index = 0) { if (typeof index !== 'number') { throw new Vex.RERR('InvalidIndex', 'Must be of number type'); } if (!this.formatted) this.format(); if (this.getModifiers(StaveModifier.Position.BEGIN).length === 1) { return 0; } let start_x = this.start_x - this.x; const begBarline = this.modifiers[0]; if (begBarline.getType() === Barline.type.REPEAT_BEGIN && start_x > begBarline.getWidth()) { start_x -= begBarline.getWidth(); } return start_x; }</pre></div> Coda & Segno Symbol functions <div class='highlight'><pre> setRepetitionTypeLeft(type, y) { this.modifiers.push(new Repetition(type, this.x, y)); return this; } setRepetitionTypeRight(type, y) { this.modifiers.push(new Repetition(type, this.x, y)); return this; }</pre></div> Volta functions <div class='highlight'><pre> setVoltaType(type, number_t, y) { this.modifiers.push(new Volta(type, number_t, this.x, y)); return this; }</pre></div> Section functions <div class='highlight'><pre> setSection(section, y) { this.modifiers.push(new StaveSection(section, this.x, y)); return this; }</pre></div> Tempo functions <div class='highlight'><pre> setTempo(tempo, y) { this.modifiers.push(new StaveTempo(tempo, this.x, y)); return this; }</pre></div> Text functions <div class='highlight'><pre> setText(text, position, options) { this.modifiers.push(new StaveText(text, position, options)); return this; } getHeight() { return this.height; } getSpacingBetweenLines() { return this.options.spacing_between_lines_px; } getBoundingBox() { return new BoundingBox(this.x, this.y, this.width, this.getBottomY() - this.y); } getBottomY() { const options = this.options; const spacing = options.spacing_between_lines_px; const score_bottom = this.getYForLine(options.num_lines) + (options.space_below_staff_ln * spacing); return score_bottom; } getBottomLineY() { return this.getYForLine(this.options.num_lines); }</pre></div> This returns the y for the center of a staff line <div class='highlight'><pre> getYForLine(line) { const options = this.options; const spacing = options.spacing_between_lines_px; const headroom = options.space_above_staff_ln; const y = this.y + (line * spacing) + (headroom * spacing); return y; } getLineForY(y) {</pre></div> Does the reverse of getYForLine - somewhat dumb and just calls getYForLine until the right value is reaches <div class='highlight'><pre> const options = this.options; const spacing = options.spacing_between_lines_px; const headroom = options.space_above_staff_ln; return ((y - this.y) / spacing) - headroom; } getYForTopText(line) { const l = line || 0; return this.getYForLine(-l - this.options.top_text_position); } getYForBottomText(line) { const l = line || 0; return this.getYForLine(this.options.bottom_text_position + l); } getYForNote(line) { const options = this.options; const spacing = options.spacing_between_lines_px; const headroom = options.space_above_staff_ln; const y = this.y + (headroom * spacing) + (5 * spacing) - (line * spacing); return y; } getYForGlyphs() { return this.getYForLine(3); }</pre></div> This method adds a stave modifier to the stave. Note that the first two modifiers (BarLines) are automatically added upon construction. <div class='highlight'><pre> addModifier(modifier, position) { if (position !== undefined) { modifier.setPosition(position); } modifier.setStave(this); this.formatted = false; this.modifiers.push(modifier); return this; } addEndModifier(modifier) { this.addModifier(modifier, StaveModifier.Position.END); return this; }</pre></div> Bar Line functions <div class='highlight'><pre> setBegBarType(type) {</pre></div> Only valid bar types at beginning of stave is none, single or begin repeat <div class='highlight'><pre> const { SINGLE, REPEAT_BEGIN, NONE } = Barline.type; if (type === SINGLE || type === REPEAT_BEGIN || type === NONE) { this.modifiers[0].setType(type); this.formatted = false; } return this; } setEndBarType(type) {</pre></div> Repeat end not valid at end of stave <div class='highlight'><pre> if (type !== Barline.type.REPEAT_BEGIN) { this.modifiers[1].setType(type); this.formatted = false; } return this; } setClef(clefSpec, size, annotation, position) { if (position === undefined) { position = StaveModifier.Position.BEGIN; } if (position === StaveModifier.Position.END) { this.endClef = clefSpec; } else { this.clef = clefSpec; } const clefs = this.getModifiers(position, Clef.CATEGORY); if (clefs.length === 0) { this.addClef(clefSpec, size, annotation, position); } else { clefs[0].setType(clefSpec, size, annotation); } return this; } setEndClef(clefSpec, size, annotation) { this.setClef(clefSpec, size, annotation, StaveModifier.Position.END); return this; } setKeySignature(keySpec, cancelKeySpec, position) { if (position === undefined) { position = StaveModifier.Position.BEGIN; } const keySignatures = this.getModifiers(position, KeySignature.CATEGORY); if (keySignatures.length === 0) { this.addKeySignature(keySpec, cancelKeySpec, position); } else { keySignatures[0].setKeySig(keySpec, cancelKeySpec); } return this; } setEndKeySignature(keySpec, cancelKeySpec) { this.setKeySignature(keySpec, cancelKeySpec, StaveModifier.Position.END); return this; } setTimeSignature(timeSpec, customPadding, position) { if (position === undefined) { position = StaveModifier.Position.BEGIN; } const timeSignatures = this.getModifiers(position, TimeSignature.CATEGORY); if (timeSignatures.length === 0) { this.addTimeSignature(timeSpec, customPadding, position); } else { timeSignatures[0].setTimeSig(timeSpec); } return this; } setEndTimeSignature(timeSpec, customPadding) { this.setTimeSignature(timeSpec, customPadding, StaveModifier.Position.END); return this; } addKeySignature(keySpec, cancelKeySpec, position) { if (position === undefined) { position = StaveModifier.Position.BEGIN; } this.addModifier(new KeySignature(keySpec, cancelKeySpec) .setPosition(position), position); return this; } addClef(clef, size, annotation, position) { if (position === undefined || position === StaveModifier.Position.BEGIN) { this.clef = clef; } else if (position === StaveModifier.Position.END) { this.endClef = clef; } this.addModifier(new Clef(clef, size, annotation), position); return this; } addEndClef(clef, size, annotation) { this.addClef(clef, size, annotation, StaveModifier.Position.END); return this; } addTimeSignature(timeSpec, customPadding, position) { this.addModifier(new TimeSignature(timeSpec, customPadding), position); return this; } addEndTimeSignature(timeSpec, customPadding) { this.addTimeSignature(timeSpec, customPadding, StaveModifier.Position.END); return this; }</pre></div> Deprecated <div class='highlight'><pre> addTrebleGlyph() { this.addClef('treble'); return this; } getModifiers(position, category) { if (position === undefined && category === undefined) return this.modifiers; return this.modifiers.filter(modifier => (position === undefined || position === modifier.getPosition()) && (category === undefined || category === modifier.getCategory()) ); } sortByCategory(items, order) { for (let i = items.length - 1; i >= 0; i--) { for (let j = 0; j < i; j++) { if (order[items[j].getCategory()] > order[items[j + 1].getCategory()]) { const temp = items[j]; items[j] = items[j + 1]; items[j + 1] = temp; } } } } format() { const begBarline = this.modifiers[0]; const endBarline = this.modifiers[1]; const begModifiers = this.getModifiers(StaveModifier.Position.BEGIN); const endModifiers = this.getModifiers(StaveModifier.Position.END); this.sortByCategory(begModifiers, { barlines: 0, clefs: 1, keysignatures: 2, timesignatures: 3, }); this.sortByCategory(endModifiers, { timesignatures: 0, keysignatures: 1, barlines: 2, clefs: 3, }); if (begModifiers.length > 1 && begBarline.getType() === Barline.type.REPEAT_BEGIN) { begModifiers.push(begModifiers.splice(0, 1)[0]); begModifiers.splice(0, 0, new Barline(Barline.type.SINGLE)); } if (endModifiers.indexOf(endBarline) > 0) { endModifiers.splice(0, 0, new Barline(Barline.type.NONE)); } let width; let padding; let modifier; let offset = 0; let x = this.x; for (let i = 0; i < begModifiers.length; i++) { modifier = begModifiers[i]; padding = modifier.getPadding(i + offset); width = modifier.getWidth(); x += padding; modifier.setX(x); x += width; if (padding + width === 0) offset--; } this.start_x = x; x = this.x + this.width; const widths = { left: 0, right: 0, paddingRight: 0, paddingLeft: 0, }; let lastBarlineIdx = 0; for (let i = 0; i < endModifiers.length; i++) { modifier = endModifiers[i]; lastBarlineIdx = (modifier.getCategory() === 'barlines') ? i : lastBarlineIdx; widths.right = 0; widths.left = 0; widths.paddingRight = 0; widths.paddingLeft = 0; const layoutMetrics = modifier.getLayoutMetrics(); if (layoutMetrics) { if (i !== 0) {