stavenote.js

import { Vex } from './vex';
import { Flow } from './tables';
import { BoundingBox } from './boundingbox';
import { Stem } from './stem';
import { NoteHead } from './notehead';
import { StemmableNote } from './stemmablenote';
import { Modifier } from './modifier';
import { Dot } from './dot';

function L(...args) { if (StaveNote.DEBUG) Vex.L('Vex.Flow.StaveNote', args); }

const getStemAdjustment = (note) => Stem.WIDTH / (2 * -note.getStemDirection());

const isInnerNoteIndex = (note, index) =>
  index === (note.getStemDirection() === Stem.UP ? note.keyProps.length - 1 : 0);

function shiftRestVertical(rest, note, dir) {
  const delta = (note.isrest ? 0.0 : 1.0) * dir;

  rest.line += delta;
  rest.maxLine += delta;
  rest.minLine += delta;
  rest.note.setKeyLine(0, rest.note.getKeyLine(0) + (delta));
}

function centerRest(rest, noteU, noteL) {
  const delta = rest.line - Vex.MidLine(noteU.minLine, noteL.maxLine);
  rest.note.setKeyLine(0, rest.note.getKeyLine(0) - delta);
  rest.line -= delta;
  rest.maxLine -= delta;
  rest.minLine -= delta;
}

export class StaveNote extends StemmableNote {
  static get CATEGORY() { return 'stavenotes'; }
  static get STEM_UP() { return Stem.UP; }
  static get STEM_DOWN() { return Stem.DOWN; }
  static get DEFAULT_LEDGER_LINE_OFFSET() { return 3; }

  static format(notes, state) {
    if (!notes || notes.length < 2) return false;

    if (notes[0].getStave() != null) return StaveNote.formatByY(notes, state);

    const notesList = [];

    for (let i = 0; i < notes.length; i++) {
      const props = notes[i].getKeyProps();
      const line = props[0].line;
      let minL = props[props.length - 1].line;
      const stemDirection = notes[i].getStemDirection();
      const stemMax = notes[i].getStemLength() / 10;
      const stemMin = notes[i].getStemMinumumLength() / 10;

      let maxL;
      if (notes[i].isRest()) {
        maxL = line + notes[i].glyph.line_above;
        minL = line - notes[i].glyph.line_below;
      } else {
        maxL = stemDirection === 1
          ? props[props.length - 1].line + stemMax
          : props[props.length - 1].line;

        minL = stemDirection === 1
          ? props[0].line
          : props[0].line - stemMax;
      }

      notesList.push({
        line: props[0].line, // note/rest base line
        maxLine: maxL, // note/rest upper bounds line
        minLine: minL, // note/rest lower bounds line
        isrest: notes[i].isRest(),
        stemDirection,
        stemMax, // Maximum (default) note stem length;
        stemMin, // minimum note stem length
        voice_shift: notes[i].getVoiceShiftWidth(),
        is_displaced: notes[i].isDisplaced(), // note manually displaced
        note: notes[i],
      });
    }

    const voices = notesList.length;

    let noteU = notesList[0];
    const noteM = voices > 2 ? notesList[1] : null;
    let noteL = voices > 2 ? notesList[2] : notesList[1];

    if (voices === 2 && noteU.stemDirection === -1 && noteL.stemDirection === 1) {
      noteU = notesList[1];
      noteL = notesList[0];
    }

    const voiceXShift = Math.max(noteU.voice_shift, noteL.voice_shift);
    let xShift = 0;
    let stemDelta;

    if (voices === 2) {
      const lineSpacing = noteU.stemDirection === noteL.stemDirection ? 0.0 : 0.5;

      if (noteU.stemDirection === noteL.stemDirection &&
          noteU.minLine <= noteL.maxLine) {
        if (!noteU.isrest) {
          stemDelta = Math.abs(noteU.line - (noteL.maxLine + 0.5));
          stemDelta = Math.max(stemDelta, noteU.stemMin);
          noteU.minLine = noteU.line - stemDelta;
          noteU.note.setStemLength(stemDelta * 10);
        }
      }
      if (noteU.minLine <= noteL.maxLine + lineSpacing) {
        if (noteU.isrest) {

          shiftRestVertical(noteU, noteL, 1);
        } else if (noteL.isrest) {

          shiftRestVertical(noteL, noteU, -1);
        } else {
          xShift = voiceXShift;
          if (noteU.stemDirection === noteL.stemDirection) {

            noteU.note.setXShift(xShift + 3);
          } else {

            noteL.note.setXShift(xShift);
          }
        }
      }

      return true;
    }

    if (noteM !== null && noteM.minLine < noteL.maxLine + 0.5) {
      if (!noteM.isrest) {
        stemDelta = Math.abs(noteM.line - (noteL.maxLine + 0.5));
        stemDelta = Math.max(stemDelta, noteM.stemMin);
        noteM.minLine = noteM.line - stemDelta;
        noteM.note.setStemLength(stemDelta * 10);
      }
    }

    if (noteM.isrest && !noteU.isrest && !noteL.isrest) {
      if (noteU.minLine <= noteM.maxLine || noteM.minLine <= noteL.maxLine) {
        const restHeight = noteM.maxLine - noteM.minLine;
        const space = noteU.minLine - noteL.maxLine;
        if (restHeight < space) {

          centerRest(noteM, noteU, noteL);
        } else {
          xShift = voiceXShift + 3;    // shift middle rest right
          noteM.note.setXShift(xShift);
        }

        return true;
      }
    }

    if (noteU.isrest && noteM.isrest && noteL.isrest) {

      shiftRestVertical(noteU, noteM, 1);

      shiftRestVertical(noteL, noteM, -1);

      return true;
    }

    if (noteM.isrest && noteU.isrest && noteM.minLine <= noteL.maxLine) {

      shiftRestVertical(noteM, noteL, 1);
    }
    if (noteM.isrest && noteL.isrest && noteU.minLine <= noteM.maxLine) {

      shiftRestVertical(noteM, noteU, -1);
    }
    if (noteU.isrest && noteU.minLine <= noteM.maxLine) {

      shiftRestVertical(noteU, noteM, 1);
    }
    if (noteL.isrest && noteM.minLine <= noteL.maxLine) {

      shiftRestVertical(noteL, noteM, -1);
    }

    if ((!noteU.isrest && !noteM.isrest && noteU.minLine <= noteM.maxLine + 0.5) ||
        (!noteM.isrest && !noteL.isrest && noteM.minLine <= noteL.maxLine)) {
      xShift = voiceXShift + 3;      // shift middle note right
      noteM.note.setXShift(xShift);
    }

    return true;
  }

  static formatByY(notes, state) {

    let hasStave = true;

    for (let i = 0; i < notes.length; i++) {
      hasStave = hasStave && notes[i].getStave() != null;
    }

    if (!hasStave) {
      throw new Vex.RERR(
        'Stave Missing',
        'All notes must have a stave - Vex.Flow.ModifierContext.formatMultiVoice!'
      );
    }

    let xShift = 0;

    for (let i = 0; i < notes.length - 1; i++) {
      let topNote = notes[i];
      let bottomNote = notes[i + 1];

      if (topNote.getStemDirection() === Stem.DOWN) {
        topNote = notes[i + 1];
        bottomNote = notes[i];
      }

      const topKeys = topNote.getKeyProps();
      const bottomKeys = bottomNote.getKeyProps();

      const topY = topNote.getStave().getYForLine(topKeys[0].line);
      const bottomY = bottomNote.getStave().getYForLine(bottomKeys[bottomKeys.length - 1].line);

      const lineSpace = topNote.getStave().options.spacing_between_lines_px;
      if (Math.abs(topY - bottomY) === lineSpace / 2) {
        xShift = topNote.getVoiceShiftWidth();
        bottomNote.setXShift(xShift);
      }
    }

    state.right_shift += xShift;
  }

  static postFormat(notes) {
    if (!notes) return false;

    notes.forEach(note => note.postFormat());

    return true;
  }

  constructor(noteStruct) {
    super(noteStruct);
    this.attrs.type = 'StaveNote';

    this.keys = noteStruct.keys;
    this.clef = noteStruct.clef;
    this.octave_shift = noteStruct.octave_shift;
    this.beam = null;

    this.glyph = Flow.durationToGlyph(this.duration, this.noteType);

    if (!this.glyph) {
      throw new Vex.RuntimeError(
        'BadArguments',
        `Invalid note initialization data (No glyph found): ${JSON.stringify(noteStruct)}`
      );
    }

    this.displaced = false;
    this.dot_shiftY = 0;

    this.keyProps = [];

    this.use_default_head_x = false;

    this.note_heads = [];
    this.modifiers = [];

    Vex.Merge(this.render_options, {

      glyph_font_scale: noteStruct.glyph_font_scale || Flow.DEFAULT_NOTATION_FONT_SCALE,

      stroke_px: noteStruct.stroke_px || StaveNote.DEFAULT_LEDGER_LINE_OFFSET,
    });

    this.calculateKeyProps();

    this.buildStem();

    if (noteStruct.auto_stem) {
      this.autoStem();
    } else {
      this.setStemDirection(noteStruct.stem_direction);
    }

    this.buildFlag();
    this.buildNoteHeads();

    this.calcExtraPx();
  }

  getCategory() { return StaveNote.CATEGORY; }

  buildStem() {
    const glyph = this.getGlyph();
    const yExtend = glyph.code_head === 'v95' || glyph.code_head === 'v3e' ? -4 : 0;

    this.setStem(new Stem({
      yExtend,
      hide: !!this.isRest(),
    }));
  }

  buildNoteHeads() {
    const stemDirection = this.getStemDirection();
    const keys = this.getKeys();

    let lastLine = null;
    let lineDiff = null;
    let displaced = false;

    let start;
    let end;
    let step;
    if (stemDirection === Stem.UP) {
      start = 0;
      end = keys.length;
      step = 1;
    } else if (stemDirection === Stem.DOWN) {
      start = keys.length - 1;
      end = -1;
      step = -1;
    }

    for (let i = start; i !== end; i += step) {
      const noteProps = this.keyProps[i];
      const line = noteProps.line;

      if (lastLine === null) {
        lastLine = line;
      } else {
        lineDiff = Math.abs(lastLine - line);
        if (lineDiff === 0 || lineDiff === 0.5) {
          displaced = !displaced;
        } else {
          displaced = false;
          this.use_default_head_x = true;
        }
      }
      lastLine = line;

      const notehead = new NoteHead({
        duration: this.duration,
        note_type: this.noteType,
        displaced,
        stem_direction: stemDirection,
        custom_glyph_code: noteProps.code,
        glyph_font_scale: this.render_options.glyph_font_scale,
        x_shift: noteProps.shift_right,
        line: noteProps.line,
      });

      this.note_heads[i] = notehead;
    }
  }

  autoStem() {

    this.minLine = this.keyProps[0].line;
    this.maxLine = this.keyProps[this.keyProps.length - 1].line;

    const MIDDLE_LINE = 3;
    const decider = (this.minLine + this.maxLine) / 2;
    const stemDirection = decider < MIDDLE_LINE ? Stem.UP : Stem.DOWN;

    this.setStemDirection(stemDirection);
  }

  calculateKeyProps() {
    let lastLine = null;
    for (let i = 0; i < this.keys.length; ++i) {
      const key = this.keys[i];

      if (this.glyph.rest) this.glyph.position = key;

      const options = { octave_shift: this.octave_shift || 0 };
      const props = Flow.keyProperties(key, this.clef, options);

      if (!props) {
        throw new Vex.RuntimeError('BadArguments', `Invalid key for note properties: ${key}`);
      }

      if (props.key === 'R') {
        if (this.duration === '1' || this.duration === 'w') {
          props.line = 4;
        } else {
          props.line = 3;
        }
      }

      const line = props.line;
      if (lastLine === null) {
        lastLine = line;
      } else {
        if (Math.abs(lastLine - line) === 0.5) {
          this.displaced = true;
          props.displaced = true;

          if (this.keyProps.length > 0) {
            this.keyProps[i - 1].displaced = true;
          }
        }
      }

      lastLine = line;
      this.keyProps.push(props);
    }

    lastLine = -Infinity;
    this.keyProps.forEach(key => {
      if (key.line < lastLine) {
        Vex.W(
          'Unsorted keys in note will be sorted. ' +
          'See https://github.com/0xfe/vexflow/issues/104 for details.'
        );
      }
      lastLine = key.line;
    });
    this.keyProps.sort((a, b) => a.line - b.line);
  }

  getBoundingBox() {
    if (!this.preFormatted) {
      throw new Vex.RERR('UnformattedNote', "Can't call getBoundingBox on an unformatted note.");
    }

    const { width: w, modLeftPx, extraLeftPx } = this.getMetrics();
    const x = this.getAbsoluteX() - modLeftPx - extraLeftPx;

    let minY = 0;
    let maxY = 0;
    const halfLineSpacing = this.getStave().getSpacingBetweenLines() / 2;
    const lineSpacing = halfLineSpacing * 2;

    if (this.isRest()) {
      const y = this.ys[0];
      const frac = Flow.durationToFraction(this.duration);
      if (frac.equals(1) || frac.equals(2)) {
        minY = y - halfLineSpacing;
        maxY = y + halfLineSpacing;
      } else {
        minY = y - (this.glyph.line_above * lineSpacing);
        maxY = y + (this.glyph.line_below * lineSpacing);
      }
    } else if (this.glyph.stem) {
      const ys = this.getStemExtents();
      ys.baseY += halfLineSpacing * this.stem_direction;
      minY = Math.min(ys.topY, ys.baseY);
      maxY = Math.max(ys.topY, ys.baseY);
    } else {
      minY = null;
      maxY = null;

      for (let i = 0; i < this.ys.length; ++i) {
        const yy = this.ys[i];
        if (i === 0) {
          minY = yy;
          maxY = yy;
        } else {
          minY = Math.min(yy, minY);
          maxY = Math.max(yy, maxY);
        }
      }
      minY -= halfLineSpacing;
      maxY += halfLineSpacing;
    }

    return new BoundingBox(x, minY, w, maxY - minY);
  }

  getLineNumber(isTopNote) {
    if (!this.keyProps.length) {
      throw new Vex.RERR(
        'NoKeyProps', "Can't get bottom note line, because note is not initialized properly."
      );
    }

    let resultLine = this.keyProps[0].line;

    for (let i = 0; i < this.keyProps.length; i++) {
      const thisLine = this.keyProps[i].line;
      if (isTopNote) {
        if (thisLine > resultLine) resultLine = thisLine;
      } else {
        if (thisLine < resultLine) resultLine = thisLine;
      }
    }

    return resultLine;
  }

  isRest() { return this.glyph.rest; }

  isChord() { return !this.isRest() && this.keys.length > 1; }

  hasStem() { return this.glyph.stem; }

  hasFlag() {
    return super.hasFlag() && !this.isRest();
  }

  getStemX() {
    if (this.noteType === 'r') {
      return this.getCenterGlyphX();
    } else {

      return super.getStemX() + getStemAdjustment(this);
    }
  }

  getYForTopText(textLine) {
    const extents = this.getStemExtents();
    return Math.min(
      this.stave.getYForTopText(textLine),
      extents.topY - (this.render_options.annotation_spacing * (textLine + 1))
    );
  }
  getYForBottomText(textLine) {
    const extents = this.getStemExtents();
    return Math.max(
      this.stave.getYForTopText(textLine),
      extents.baseY + (this.render_options.annotation_spacing * (textLine))
    );
  }

  setStave(stave) {
    super.setStave(stave);

    const ys = this.note_heads.map(notehead => {
      notehead.setStave(stave);
      return notehead.getY();
    });

    this.setYs(ys);

    if (this.stem) {
      const { y_top, y_bottom } = this.getNoteHeadBounds();
      this.stem.setYBounds(y_top, y_bottom);
    }

    return this;
  }

  getKeys() { return this.keys; }

  getKeyProps() {
    return this.keyProps;
  }

  isDisplaced() {
    return this.displaced;
  }

  setNoteDisplaced(displaced) {
    this.displaced = displaced;
    return this;
  }

  getTieRightX() {
    let tieStartX = this.getAbsoluteX();
    tieStartX += this.getGlyphWidth() + this.x_shift + this.extraRightPx;
    if (this.modifierContext) tieStartX += this.modifierContext.getExtraRightPx();
    return tieStartX;
  }

  getTieLeftX() {
    let tieEndX = this.getAbsoluteX();
    tieEndX += this.x_shift - this.extraLeftPx;
    return tieEndX;
  }

  getLineForRest() {
    let restLine = this.keyProps[0].line;
    if (this.keyProps.length > 1) {
      const lastLine  = this.keyProps[this.keyProps.length - 1].line;
      const top = Math.max(restLine, lastLine);
      const bot = Math.min(restLine, lastLine);
      restLine = Vex.MidLine(top, bot);
    }

    return restLine;
  }

  getModifierStartXY(position, index) {
    if (!this.preFormatted) {
      throw new Vex.RERR('UnformattedNote', "Can't call GetModifierStartXY on an unformatted note");
    }

    if (this.ys.length === 0) {
      throw new Vex.RERR('NoYValues', 'No Y-Values calculated for this note.');
    }

    const { ABOVE, BELOW, LEFT, RIGHT } = Modifier.Position;
    let x = 0;
    if (position === LEFT) {

      x = -1 * 2;
    } else if (position === RIGHT) {

      x = this.getGlyphWidth() + this.x_shift + 2;

      if (this.stem_direction === Stem.UP && this.hasFlag() && isInnerNoteIndex(this, index)) {
        x += this.flag.getMetrics().width;
      }
    } else if (position === BELOW || position === ABOVE) {
      x = this.getGlyphWidth() / 2;
    }

    return {
      x: this.getAbsoluteX() + x,
      y: this.ys[index],
    };
  }

  setStyle(style) {
    this.note_heads.forEach(notehead => notehead.setStyle(style));
    this.stem.setStyle(style);
  }

  setKeyStyle(index, style) {
    this.note_heads[index].setStyle(style);
    return this;
  }

  setKeyLine(index, line) {
    this.keyProps[index].line = line;
    this.note_heads[index].setLine(line);
    return this;
  }

  getKeyLine(index) {
    return this.keyProps[index].line;
  }

  addToModifierContext(mContext) {
    this.setModifierContext(mContext);
    for (let i = 0; i < this.modifiers.length; ++i) {
      this.modifierContext.addModifier(this.modifiers[i]);
    }
    this.modifierContext.addModifier(this);
    this.setPreFormatted(false);
    return this;
  }

  addModifier(index, modifier) {
    modifier.setNote(this);
    modifier.setIndex(index);
    this.modifiers.push(modifier);
    this.setPreFormatted(false);
    return this;
  }

  addAccidental(index, accidental) {
    return this.addModifier(index, accidental);
  }

  addArticulation(index, articulation) {
    return this.addModifier(index, articulation);
  }

  addAnnotation(index, annotation) {
    return this.addModifier(index, annotation);
  }

  addDot(index) {
    const dot = new Dot();
    dot.setDotShiftY(this.glyph.dot_shiftY);
    this.dots++;
    return this.addModifier(index, dot);
  }

  addDotToAll() {
    for (let i = 0; i < this.keys.length; ++i) {
      this.addDot(i);
    }
    return this;
  }

  getAccidentals() {
    return this.modifierContext.getModifiers('accidentals');
  }

  getDots() {
    return this.modifierContext.getModifiers('dots');
  }

  getVoiceShiftWidth() {

    return this.getGlyphWidth() * (this.displaced ? 2 : 1);
  }

  calcExtraPx() {
    this.setExtraLeftPx(
      this.displaced && this.stem_direction === Stem.DOWN
        ? this.getGlyphWidth()
        : 0
    );

    this.setExtraRightPx(
      !this.hasFlag() && this.displaced && this.stem_direction === Stem.UP
        ? this.getGlyphWidth()
        : 0
    );
  }

  preFormat() {
    if (this.preFormatted) return;
    if (this.modifierContext) this.modifierContext.preFormat();

    let width = this.getGlyphWidth() + this.extraLeftPx + this.extraRightPx;

    if (this.glyph.flag && this.beam === null && this.stem_direction === Stem.UP) {
      width += this.getGlyphWidth();
    }

    this.setWidth(width);
    this.setPreFormatted(true);
  }

  getNoteHeadBounds() {

    let yTop = null;
    let yBottom = null;

    let highestLine = this.stave.getNumLines();
    let lowestLine = 1;

    this.note_heads.forEach(notehead => {
      const line = notehead.getLine();
      const y = notehead.getY();

      if (yTop === null || y < yTop)  {
        yTop = y;
      }

      if (yBottom === null || y > yBottom) {
        yBottom = y;
      }

      highestLine = line > highestLine ? line : highestLine;
      lowestLine = line < lowestLine ? line : lowestLine;
    }, this);

    return {
      y_top: yTop,
      y_bottom: yBottom,
      highest_line: highestLine,
      lowest_line: lowestLine,
    };
  }

  getNoteHeadBeginX() {
    return this.getAbsoluteX() + this.x_shift;
  }

  getNoteHeadEndX() {
    const xBegin = this.getNoteHeadBeginX();
    return xBegin + this.getGlyphWidth();
  }

  drawLedgerLines() {
    const {
      note_heads, stave, use_default_head_x, x_shift, glyph,
      render_options: { stroke_px },
      context: ctx,
    } = this;

    if (this.isRest()) return;
    if (!ctx) {
      throw new Vex.RERR('NoCanvasContext', "Can't draw without a canvas context.");
    }

    const { highest_line, lowest_line } = this.getNoteHeadBounds();
    let headX = note_heads[0].getAbsoluteX();

    const drawLedgerLine = (y) => {
      if (use_default_head_x === true)  {
        headX = this.getAbsoluteX() + x_shift;
      }
      const x = headX - stroke_px;
      const length = ((headX + glyph.getWidth()) - headX) + (stroke_px * 2);

      ctx.fillRect(x, y, length, 1);
    };

    for (let line = 6; line <= highest_line; ++line) {
      drawLedgerLine(stave.getYForNote(line));
    }

    for (let line = 0; line >= lowest_line; --line) {
      drawLedgerLine(stave.getYForNote(line));
    }
  }

  drawModifiers() {
    if (!this.context) {
      throw new Vex.RERR('NoCanvasContext', "Can't draw without a canvas context.");
    }

    const ctx = this.context;
    ctx.openGroup('modifiers');
    for (let i = 0; i < this.modifiers.length; i++) {
      const modifier = this.modifiers[i];
      const notehead = this.note_heads[modifier.getIndex()];
      const noteheadStyle = notehead.getStyle();
      if (noteheadStyle) {
        ctx.save();
        notehead.applyStyle(ctx);
      }
      modifier.setContext(ctx);
      modifier.draw();
      if (noteheadStyle) {
        ctx.restore();
      }
    }
    ctx.closeGroup();
  }

  drawFlag() {
    const { stem, beam, context: ctx } = this;

    if (!ctx) {
      throw new Vex.RERR('NoCanvasContext', "Can't draw without a canvas context.");
    }

    const shouldRenderFlag = beam === null;
    const glyph = this.getGlyph();

    if (glyph.flag && shouldRenderFlag) {
      const { y_top, y_bottom } = this.getNoteHeadBounds();
      const noteStemHeight = stem.getHeight();
      const flagX = this.getStemX();

      const flagY = this.getStemDirection() === Stem.DOWN

          ? y_top - noteStemHeight + 2

          : y_bottom - noteStemHeight - 2;

      ctx.openGroup('flag', null, { pointerBBox: true });
      this.flag.render(ctx, flagX, flagY);
      ctx.closeGroup();
    }
  }

  drawNoteHeads() {
    this.note_heads.forEach(notehead => {
      this.context.openGroup('notehead', null, { pointerBBox: true });
      notehead.setContext(this.context).draw();
      this.context.closeGroup();
    });
  }

  drawStem(stemStruct) {
    if (!this.context) {
      throw new Vex.RERR('NoCanvasContext', "Can't draw without a canvas context.");
    }

    if (stemStruct) {
      this.setStem(new Stem(stemStruct));
    }

    this.context.openGroup('stem', null, { pointerBBox: true });
    this.stem.setContext(this.context).draw();
    this.context.closeGroup();
  }

  draw() {
    if (!this.context) {
      throw new Vex.RERR('NoCanvasContext', "Can't draw without a canvas context.");
    }
    if (!this.stave) {
      throw new Vex.RERR('NoStave', "Can't draw without a stave.");
    }
    if (this.ys.length === 0) {
      throw new Vex.RERR('NoYValues', "Can't draw note without Y values.");
    }

    const xBegin = this.getNoteHeadBeginX();
    const shouldRenderStem = this.hasStem() && !this.beam;

    this.note_heads.forEach(notehead => notehead.setX(xBegin));

    const stemX = this.getStemX();
    this.stem.setNoteHeadXBounds(stemX, stemX);

    L('Rendering ', this.isChord() ? 'chord :' : 'note :', this.keys);

    this.drawLedgerLines();

    this.setAttribute('el', this.context.openGroup('stavenote', this.getAttribute('id')));
    this.context.openGroup('note', null, { pointerBBox: true });
    if (shouldRenderStem) this.drawStem();
    this.drawNoteHeads();
    this.drawFlag();
    this.context.closeGroup();
    this.drawModifiers();
    this.context.closeGroup();
  }
}