system.js

Table of Contents

  1. accidental.js
  2. annotation.js
  3. articulation.js
  4. barnote.js
  5. beam.js
  6. bend.js
  7. boundingbox.js
  8. boundingboxcomputation.js
  9. canvascontext.js
  10. clef.js
  11. clefnote.js
  12. crescendo.js
  13. curve.js
  14. dot.js
  15. easyscore.js
  16. element.js
  17. factory.js
  18. formatter.js
  19. fraction.js
  20. frethandfinger.js
  21. ghostnote.js
  22. glyph.js
  23. gracenote.js
  24. gracenotegroup.js
  25. gracetabnote.js
  26. index.js
  27. keymanager.js
  28. keysignature.js
  29. modifier.js
  30. modifiercontext.js
  31. music.js
  32. note.js
  33. notehead.js
  34. notesubgroup.js
  35. ornament.js
  36. parser.js
  37. pedalmarking.js
  38. raphaelcontext.js
  39. renderer.js
  40. stave.js
  41. stavebarline.js
  42. staveconnector.js
  43. stavehairpin.js
  44. staveline.js
  45. stavemodifier.js
  46. stavenote.js
  47. staverepetition.js
  48. stavesection.js
  49. stavetempo.js
  50. stavetext.js
  51. stavetie.js
  52. stavevolta.js
  53. stem.js
  54. stemmablenote.js
  55. stringnumber.js
  56. strokes.js
  57. svgcontext.js
  58. system.js
  59. tables.js
  60. tabnote.js
  61. tabslide.js
  62. tabstave.js
  63. tabtie.js
  64. textbracket.js
  65. textdynamics.js
  66. textnote.js
  67. tickable.js
  68. tickcontext.js
  69. timesignature.js
  70. timesignote.js
  71. tremolo.js
  72. tuning.js
  73. tuplet.js
  74. vex.js
  75. vibrato.js
  76. vibratobracket.js
  77. voice.js
  78. voicegroup.js

VexFlow - Copyright (c) Mohit Muthanna 2010.

This class implements a musical system, which is a collection of staves, each which can have one or more voices. All voices across all staves in the system are formatted together.

import { Element } from './element';
import { Factory } from './factory';
import { Formatter } from './formatter';
import { Note } from './note';

function setDefaults(params, defaults) {
  const default_options = defaults.options;
  params = Object.assign(defaults, params);
  params.options = Object.assign(default_options, params.options);
  return params;
}

export class System extends Element {
  constructor(params = {}) {
    super();
    this.setAttribute('type', 'System');
    this.setOptions(params);
    this.parts = [];
  }

  setOptions(options = {}) {
    this.options = setDefaults(options, {
      x: 10,
      y: 10,
      width: 500,
      connector: null,
      spaceBetweenStaves: 12, // stave spaces
      factory: null,
      debugFormatter: false,
      formatIterations: 0,   // number of formatter tuning steps
      options: {},
    });

    this.factory = this.options.factory || new Factory({ renderer: { el: null } });
  }

  setContext(context) {
    super.setContext(context);
    this.factory.setContext(context);
    return this;
  }

  addConnector() {
    this.connector = this.factory.StaveConnector({
      top_stave: this.parts[0].stave,
      bottom_stave: this.parts[this.parts.length - 1].stave,
    });
    return this.connector;
  }

  addStave(params) {
    params = setDefaults(params, {
      stave: null,
      voices: [],
      spaceAbove: 0, // stave spaces
      spaceBelow: 0, // stave spaces
      debugNoteMetrics: false,
      options: {},
    });

    if (!params.stave) {
      const options = { left_bar: false };
      params.stave = this.factory.Stave(
        { x: this.options.x, y: this.options.y, width: this.options.width, options });
    }

    params.voices.forEach(voice => voice.setContext(this.context).setStave(params.stave));
    this.parts.push(params);
    return params.stave;
  }

  draw() {
    const ctx = this.checkContext();
    const formatter = new Formatter();

    let y = this.options.y;
    let startX = 0;
    let allVoices = [];
    const debugNoteMetricsYs = [];

Join the voices for each stave.

    this.parts.forEach(part => {
      y = y + part.stave.space(part.spaceAbove);
      part.stave.setY(y);
      formatter.joinVoices(part.voices);
      y = y + part.stave.space(part.spaceBelow);
      y = y + part.stave.space(this.options.spaceBetweenStaves);
      if (part.debugNoteMetrics) {
        debugNoteMetricsYs.push({ y, voice: part.voices[0] });
        y += 15;
      }
      allVoices = allVoices.concat(part.voices);

      startX = Math.max(startX, part.stave.getNoteStartX());
    });

Update the start position of all staves.

    this.parts.forEach(part => part.stave.setNoteStartX(startX));
    const justifyWidth = this.options.width - (startX - this.options.x) - Note.STAVEPADDING;
    formatter.format(allVoices, justifyWidth);

    for (let i = 0; i < this.options.formatIterations; i++) {
      formatter.tune();
    }

Render.

    this.parts.forEach(part => {
      part.voices.forEach(voice => voice.draw());
    });

Render debug info.

    if (this.options.debugFormatter) {
      Formatter.plotDebugging(ctx, formatter, startX, this.options.y, y);
    }

    debugNoteMetricsYs.forEach(d => {
      d.voice.getTickables().forEach(note => Note.plotMetrics(ctx, note, d.y));
    });
  }
}
h