gracenote.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. formatter.js
  16. fraction.js
  17. frethandfinger.js
  18. ghostnote.js
  19. glyph.js
  20. gracenote.js
  21. gracenotegroup.js
  22. index.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

VexFlow - Copyright (c) Mohit Muthanna 2010.

import { Vex } from './vex';
import { StaveNote } from './stavenote';

export class GraceNote extends StaveNote {
  static get CATEGORY() { return 'gracenotes'; }

  constructor(note_struct) {
    super(note_struct);

    this.render_options.glyph_font_scale = 22;
    this.render_options.stem_height = 20;
    this.render_options.stroke_px = 2;
    this.glyph.head_width = 6;

    this.slash = note_struct.slash;
    this.slur = true;

    this.buildNoteHeads();

    this.width = 3;
  }

  getStemExtension() {
    const glyph = this.getGlyph();

    if (this.stem_extension_override != null) {
      return this.stem_extension_override;
    }

    if (glyph) {
      return this.getStemDirection() === 1 ? glyph.gracenote_stem_up_extension :
        glyph.gracenote_stem_down_extension;
    }

    return 0;
  }

  getCategory() { return GraceNote.CATEGORY; }

  draw() {
    super.draw();
    const ctx = this.context;
    const stem_direction = this.getStemDirection();

    if (this.slash) {
      ctx.beginPath();

      let x = this.getAbsoluteX();
      let y = this.getYs()[0] - (this.stem.getHeight() / 2.8);
      if (stem_direction === 1) {
        x += 1;
        ctx.moveTo(x, y);
        ctx.lineTo(x + 13, y - 9);
      } else if (stem_direction === -1) {
        x -= 4;
        y += 1;
        ctx.moveTo(x, y);
        ctx.lineTo(x + 13, y + 9);
      }

      ctx.closePath();
      ctx.stroke();
    }
  }
}
h