tickable.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. canvascontext.js
  9. clef.js
  10. clefnote.js
  11. crescendo.js
  12. curve.js
  13. dot.js
  14. flow.js
  15. vexflow_font.js
  16. formatter.js
  17. fraction.js
  18. frethandfinger.js
  19. ghostnote.js
  20. glyph.js
  21. gracenote.js
  22. gracenotegroup.js
  23. keymanager.js
  24. keysignature.js
  25. modifier.js
  26. modifiercontext.js
  27. music.js
  28. note.js
  29. notehead.js
  30. ornament.js
  31. pedalmarking.js
  32. raphaelcontext.js
  33. renderer.js
  34. stave.js
  35. stavebarline.js
  36. staveconnector.js
  37. stavehairpin.js
  38. staveline.js
  39. stavemodifier.js
  40. stavenote.js
  41. staverepetition.js
  42. stavesection.js
  43. stavetempo.js
  44. stavetext.js
  45. stavetie.js
  46. stavevolta.js
  47. stem.js
  48. stemmablenote.js
  49. stringnumber.js
  50. strokes.js
  51. svgcontext.js
  52. tables.js
  53. tabnote.js
  54. tabslide.js
  55. tabstave.js
  56. tabtie.js
  57. textbracket.js
  58. textdynamics.js
  59. textnote.js
  60. tickable.js
  61. tickcontext.js
  62. timesignature.js
  63. timesignote.js
  64. tremolo.js
  65. tuning.js
  66. tuplet.js
  67. vex.js
  68. vibrato.js
  69. voice.js
  70. voicegroup.js

Vex Flow Copyright Mohit Cheppudira mohit@muthanna.com

The tickable interface. Tickables are things that sit on a score and have a duration, i.e., they occupy space in the musical rendering dimension.

/** @constructor */
Vex.Flow.Tickable = (function() {
  function Tickable() {
    this.init();
  }

  Tickable.prototype = {
    init: function() {
      this.intrinsicTicks = 0;
      this.tickMultiplier = new Vex.Flow.Fraction(1, 1);
      this.ticks = new Vex.Flow.Fraction(0, 1);
      this.width = 0;
      this.x_shift = 0; // Shift from tick context
      this.voice = null;
      this.tickContext = null;
      this.modifierContext = null;
      this.modifiers = [];
      this.preFormatted = false;
      this.postFormatted = false;
      this.tuplet = null;

For interactivity

      this.id = null;
      this.elem = null;

      this.align_center = false;
      this.center_x_shift = 0; // Shift from tick context if center aligned

This flag tells the formatter to ignore this tickable during formatting and justification. It is set by tickables such as BarNote.

      this.ignore_ticks = false;
      this.context = null;
    },

    setContext: function(context) { this.context = context; },

Set the DOM ID of the element. Must be called before draw(). TODO: Update ID of element if has already been rendered.

    setId: function(id) { this.id = id; },
    getId: function() { return this.id; },
    getElem: function() { return this.elem; },
    getBoundingBox: function() { return null; },
    getTicks: function() { return this.ticks; },
    shouldIgnoreTicks: function() { return this.ignore_ticks; },
    getWidth: function() { return this.width; },
    setXShift: function(x) { this.x_shift = x; },
    getCenterXShift: function() {
      if (this.isCenterAligned()) {
        return this.center_x_shift;
      }

      return 0;
    },

    isCenterAligned: function() { return this.align_center; },
    setCenterAlignment: function(align_center) {
      this.align_center = align_center;
      return this;
    },

Every tickable must be associated with a voice. This allows formatters and preFormatter to associate them with the right modifierContexts.

    getVoice: function() {
      if (!this.voice) throw new Vex.RERR("NoVoice", "Tickable has no voice.");
      return this.voice;
    },
    setVoice: function(voice) { this.voice = voice; },

    getTuplet: function() { return this.tuplet; },
    setTuplet: function(tuplet) {

Detach from previous tuplet

      var noteCount, beatsOccupied;

      if (this.tuplet) {
        noteCount = this.tuplet.getNoteCount();
        beatsOccupied = this.tuplet.getBeatsOccupied();

Revert old multiplier

        this.applyTickMultiplier(noteCount, beatsOccupied);
      }

Attach to new tuplet

      if (tuplet) {
        noteCount = tuplet.getNoteCount();
        beatsOccupied = tuplet.getBeatsOccupied();

        this.applyTickMultiplier(beatsOccupied, noteCount);
      }

      this.tuplet = tuplet;

      return this;
    },

    /** optional, if tickable has modifiers **/
    addToModifierContext: function(mc) {
      this.modifierContext = mc;

Add modifiers to modifier context (if any)

      this.preFormatted = false;
    },

    /** optional, if tickable has modifiers **/
    addModifier: function(mod) {
      this.modifiers.push(mod);
      this.preFormatted = false;
      return this;
    },

    setTickContext: function(tc) {
      this.tickContext = tc;
      this.preFormatted = false;
    },

    preFormat: function() {
      if (this.preFormatted) return;

      this.width = 0;
      if (this.modifierContext) {
        this.modifierContext.preFormat();
        this.width += this.modifierContext.getWidth();
      }
    },
    postFormat: function() {
      if (this.postFormatted) return;
      this.postFormatted = true;
      return this;
    },
    getIntrinsicTicks: function() {
      return this.intrinsicTicks;
    },
    setIntrinsicTicks: function(intrinsicTicks) {
      this.intrinsicTicks = intrinsicTicks;
      this.ticks = this.tickMultiplier.clone().multiply(this.intrinsicTicks);
    },
    getTickMultiplier: function() {
      return this.tickMultiplier;
    },
    applyTickMultiplier: function(numerator, denominator) {
      this.tickMultiplier.multiply(numerator, denominator);
      this.ticks = this.tickMultiplier.clone().multiply(this.intrinsicTicks);
    },
    setDuration: function(duration) {
      var ticks = duration.numerator * (Vex.Flow.RESOLUTION / duration.denominator);
      this.ticks = this.tickMultiplier.clone().multiply(ticks);
      this.intrinsicTicks = this.ticks.value();
    }
  };

  return Tickable;
}());
h