|
@@ -0,0 +1,1210 @@
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+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()) {
|
|
|
+ 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,
|
|
|
+ maxLine: maxL,
|
|
|
+ minLine: minL,
|
|
|
+ isrest: notes[i].isRest(),
|
|
|
+ stemDirection,
|
|
|
+ stemMax,
|
|
|
+ stemMin,
|
|
|
+ voice_shift: notes[i].getVoiceShiftWidth(),
|
|
|
+ is_displaced: notes[i].isDisplaced(),
|
|
|
+ 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;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const lineDiff = Math.abs(noteU.line - noteL.line);
|
|
|
+ if (noteU.note.glyph.stem && noteL.note.glyph.stem) {
|
|
|
+
|
|
|
+
|
|
|
+ if ((noteU.note.duration === "h" && noteL.note.duration !== "h") ||
|
|
|
+ (noteU.note.duration !== "h" && noteL.note.duration === "h") ||
|
|
|
+ noteU.note.dots !== noteL.note.dots) {
|
|
|
+ noteL.note.setXShift(xShift);
|
|
|
+ if (noteU.note.dots > 0) {
|
|
|
+ let foundDots = 0;
|
|
|
+ for (const modifier of noteU.note.modifiers) {
|
|
|
+ if (modifier instanceof Dot) {
|
|
|
+ foundDots++;
|
|
|
+
|
|
|
+
|
|
|
+ modifier.setYShift(-10 * (noteL.maxLine - noteU.line + 1));
|
|
|
+ if (foundDots === noteU.note.dots) {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (lineDiff < 1 && lineDiff > 0) {
|
|
|
+ noteL.note.setXShift(xShift);
|
|
|
+ } else if (noteU.note.voice !== noteL.note.voice) {
|
|
|
+ if (noteU.stemDirection === noteL.stemDirection) {
|
|
|
+ if (noteU.line > noteL.line) {
|
|
|
+
|
|
|
+ if (noteU.stemDirection === 1) {
|
|
|
+ noteL.note.renderFlag = false;
|
|
|
+ } else {
|
|
|
+ noteU.note.renderFlag = false;
|
|
|
+ }
|
|
|
+ } else if (noteL.line > noteU.line) {
|
|
|
+
|
|
|
+ if (noteL.stemDirection === 1) {
|
|
|
+ noteU.note.renderFlag = false;
|
|
|
+ } else {
|
|
|
+ noteL.note.renderFlag = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+
|
|
|
+ if (noteL.stemDirection === 1) {
|
|
|
+ noteL.stemDirection = -1;
|
|
|
+ noteL.note.setStemDirection(-1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if ((!noteU.note.glyph.stem && !noteL.note.glyph.stem && lineDiff < 1.5)) {
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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.maxLine < bottomNote.maxLine) {
|
|
|
+ topNote = notes[i + 1];
|
|
|
+ bottomNote = notes[i];
|
|
|
+ }
|
|
|
+
|
|
|
+ const topKeys = topNote.getKeyProps();
|
|
|
+ const bottomKeys = bottomNote.getKeyProps();
|
|
|
+
|
|
|
+ const HALF_NOTEHEAD_HEIGHT = 0.5;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const topNoteBottomY = topNote
|
|
|
+ .getStave()
|
|
|
+ .getYForLine(5 - topKeys[0].line + HALF_NOTEHEAD_HEIGHT);
|
|
|
+
|
|
|
+ const bottomNoteTopY = bottomNote
|
|
|
+ .getStave()
|
|
|
+ .getYForLine(5 - bottomKeys[bottomKeys.length - 1].line - HALF_NOTEHEAD_HEIGHT);
|
|
|
+
|
|
|
+ const areNotesColliding = bottomNoteTopY - topNoteBottomY < 0;
|
|
|
+ if (areNotesColliding) {
|
|
|
+
|
|
|
+ if (topNote.voice === bottomNote.voice) {
|
|
|
+ xShift = topNote.getVoiceShiftWidth() + 2;
|
|
|
+ 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.setAttribute('type', 'StaveNote');
|
|
|
+
|
|
|
+ this.keys = noteStruct.keys;
|
|
|
+ this.clef = noteStruct.clef;
|
|
|
+ this.octave_shift = noteStruct.octave_shift;
|
|
|
+ this.beam = null;
|
|
|
+
|
|
|
+
|
|
|
+ this.glyph = Flow.getGlyphProps(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.addDotsCount = 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.reset();
|
|
|
+ this.buildFlag();
|
|
|
+ }
|
|
|
+
|
|
|
+ reset() {
|
|
|
+ super.reset();
|
|
|
+
|
|
|
+
|
|
|
+ const noteHeadStyles = this.note_heads.map(noteHead => noteHead.getStyle());
|
|
|
+ this.buildNoteHeads();
|
|
|
+ this.note_heads.forEach((noteHead, index) => noteHead.setStyle(noteHeadStyles[index]));
|
|
|
+
|
|
|
+ if (this.stave) {
|
|
|
+ this.note_heads.forEach(head => head.setStave(this.stave));
|
|
|
+ }
|
|
|
+ this.calcExtraPx();
|
|
|
+ }
|
|
|
+
|
|
|
+ setBeam(beam) {
|
|
|
+ this.beam = beam;
|
|
|
+ this.calcExtraPx();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+
|
|
|
+ getCategory() { return StaveNote.CATEGORY; }
|
|
|
+
|
|
|
+
|
|
|
+ buildStem() {
|
|
|
+ this.setStem(new Stem({ hide: !!this.isRest(), }));
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ buildNoteHeads() {
|
|
|
+ this.note_heads = [];
|
|
|
+ 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,
|
|
|
+ stem_up_x_offset: noteProps.stem_up_x_offset,
|
|
|
+ stem_down_x_offset: noteProps.stem_down_x_offset,
|
|
|
+ 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() && this.renderFlag;
|
|
|
+ }
|
|
|
+
|
|
|
+ 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, options) {
|
|
|
+ options = options || {};
|
|
|
+ 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() &&
|
|
|
+ (options.forceFlagRight || 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) {
|
|
|
+ super.setStyle(style);
|
|
|
+ this.note_heads.forEach(notehead => notehead.setStyle(style));
|
|
|
+ if (this.stem){
|
|
|
+ this.stem.setStyle(style);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setStemStyle(style) {
|
|
|
+ if (this.stem){
|
|
|
+ const stem = this.getStem();
|
|
|
+ stem.setStyle(style);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getStemStyle() { return this.stem.getStyle(); }
|
|
|
+
|
|
|
+ setLedgerLineStyle(style) { this.ledgerLineStyle = style; }
|
|
|
+ getLedgerLineStyle() { return this.ledgerLineStyle; }
|
|
|
+
|
|
|
+ setFlagStyle(style) { this.flagStyle = style; }
|
|
|
+ getFlagStyle() { return this.flagStyle; }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ setKeyStyle(index, style) {
|
|
|
+ this.note_heads[index].setStyle(style);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+
|
|
|
+ setKeyLine(index, line) {
|
|
|
+ this.keyProps[index].line = line;
|
|
|
+ this.reset();
|
|
|
+ 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.addDotsCount++;
|
|
|
+ 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.renderFlag && this.glyph.flag && this.beam === null && this.stem_direction === Stem.UP) {
|
|
|
+ width += this.getGlyphWidth();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setWidth(width);
|
|
|
+ this.setPreFormatted(true);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ * @typedef {Object} noteHeadBounds
|
|
|
+ * @property {number} y_top the highest notehead bound
|
|
|
+ * @property {number} y_bottom the lowest notehead bound
|
|
|
+ * @property {number|Null} displaced_x the starting x for displaced noteheads
|
|
|
+ * @property {number|Null} non_displaced_x the starting x for non-displaced noteheads
|
|
|
+ * @property {number} highest_line the highest notehead line in traditional music line
|
|
|
+ * numbering (bottom line = 1, top line = 5)
|
|
|
+ * @property {number} lowest_line the lowest notehead line
|
|
|
+ * @property {number|false} highest_displaced_line the highest staff line number
|
|
|
+ * for a displaced notehead
|
|
|
+ * @property {number|false} lowest_displaced_line
|
|
|
+ * @property {number} highest_non_displaced_line
|
|
|
+ * @property {number} lowest_non_displaced_line
|
|
|
+ */
|
|
|
+
|
|
|
+
|
|
|
+ * Get the staff line and y value for the highest & lowest noteheads
|
|
|
+ * @returns {noteHeadBounds}
|
|
|
+ */
|
|
|
+ getNoteHeadBounds() {
|
|
|
+
|
|
|
+ let yTop = null;
|
|
|
+ let yBottom = null;
|
|
|
+ let nonDisplacedX = null;
|
|
|
+ let displacedX = null;
|
|
|
+
|
|
|
+ let highestLine = this.stave.getNumLines();
|
|
|
+ let lowestLine = 1;
|
|
|
+ let highestDisplacedLine = false;
|
|
|
+ let lowestDisplacedLine = false;
|
|
|
+ let highestNonDisplacedLine = highestLine;
|
|
|
+ let lowestNonDisplacedLine = lowestLine;
|
|
|
+
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (displacedX === null && notehead.isDisplaced()) {
|
|
|
+ displacedX = notehead.getAbsoluteX();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (nonDisplacedX === null && !notehead.isDisplaced()) {
|
|
|
+ nonDisplacedX = notehead.getAbsoluteX();
|
|
|
+ }
|
|
|
+
|
|
|
+ highestLine = line > highestLine ? line : highestLine;
|
|
|
+ lowestLine = line < lowestLine ? line : lowestLine;
|
|
|
+
|
|
|
+ if (notehead.isDisplaced()) {
|
|
|
+ highestDisplacedLine = (highestDisplacedLine === false) ?
|
|
|
+ line : Math.max(line, highestDisplacedLine);
|
|
|
+ lowestDisplacedLine = (lowestDisplacedLine === false) ?
|
|
|
+ line : Math.min(line, lowestDisplacedLine);
|
|
|
+ } else {
|
|
|
+ highestNonDisplacedLine = Math.max(line, highestNonDisplacedLine);
|
|
|
+ lowestNonDisplacedLine = Math.min(line, lowestNonDisplacedLine);
|
|
|
+ }
|
|
|
+ }, this);
|
|
|
+
|
|
|
+ return {
|
|
|
+ y_top: yTop,
|
|
|
+ y_bottom: yBottom,
|
|
|
+ displaced_x: displacedX,
|
|
|
+ non_displaced_x: nonDisplacedX,
|
|
|
+ highest_line: highestLine,
|
|
|
+ lowest_line: lowestLine,
|
|
|
+ highest_displaced_line: highestDisplacedLine,
|
|
|
+ lowest_displaced_line: lowestDisplacedLine,
|
|
|
+ highest_non_displaced_line: highestNonDisplacedLine,
|
|
|
+ lowest_non_displaced_line: lowestNonDisplacedLine,
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ getNoteHeadBeginX() {
|
|
|
+ return this.getAbsoluteX() + this.x_shift;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ getNoteHeadEndX() {
|
|
|
+ const xBegin = this.getNoteHeadBeginX();
|
|
|
+ return xBegin + this.getGlyphWidth();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ drawLedgerLines() {
|
|
|
+ const {
|
|
|
+ stave, glyph,
|
|
|
+ render_options: { stroke_px },
|
|
|
+ context: ctx,
|
|
|
+ } = this;
|
|
|
+
|
|
|
+ const width = glyph.getWidth() + (stroke_px * 2);
|
|
|
+ const doubleWidth = 2 * (glyph.getWidth() + stroke_px) - (Stem.WIDTH / 2);
|
|
|
+
|
|
|
+ if (this.isRest()) return;
|
|
|
+ if (!ctx) {
|
|
|
+ throw new Vex.RERR('NoCanvasContext', "Can't draw without a canvas context.");
|
|
|
+ }
|
|
|
+
|
|
|
+ const {
|
|
|
+ highest_line,
|
|
|
+ lowest_line,
|
|
|
+ highest_displaced_line,
|
|
|
+ highest_non_displaced_line,
|
|
|
+ lowest_displaced_line,
|
|
|
+ lowest_non_displaced_line,
|
|
|
+ displaced_x,
|
|
|
+ non_displaced_x,
|
|
|
+ } = this.getNoteHeadBounds();
|
|
|
+
|
|
|
+ const min_x = Math.min(displaced_x, non_displaced_x);
|
|
|
+
|
|
|
+ const drawLedgerLine = (y, normal, displaced) => {
|
|
|
+ let x;
|
|
|
+ if (displaced && normal) x = min_x - stroke_px;
|
|
|
+ else if (normal) x = non_displaced_x - stroke_px;
|
|
|
+ else x = displaced_x - stroke_px;
|
|
|
+ const ledgerWidth = (normal && displaced) ? doubleWidth : width;
|
|
|
+
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(x, y);
|
|
|
+ ctx.lineTo(x + ledgerWidth, y);
|
|
|
+ ctx.stroke();
|
|
|
+ };
|
|
|
+
|
|
|
+ const style = { ...stave.getStyle() || {}, ...this.getLedgerLineStyle() || {} };
|
|
|
+ this.applyStyle(ctx, style);
|
|
|
+
|
|
|
+
|
|
|
+ for (let line = 6; line <= highest_line; ++line) {
|
|
|
+ const normal = (non_displaced_x !== null) && (line <= highest_non_displaced_line);
|
|
|
+ const displaced = (displaced_x !== null) && (line <= highest_displaced_line);
|
|
|
+ drawLedgerLine(stave.getYForNote(line), normal, displaced);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ for (let line = 0; line >= lowest_line; --line) {
|
|
|
+ const normal = (non_displaced_x !== null) && (line >= lowest_non_displaced_line);
|
|
|
+ const displaced = (displaced_x !== null) && (line >= lowest_displaced_line);
|
|
|
+ drawLedgerLine(stave.getYForNote(line), normal, displaced);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.restoreStyle(ctx, style);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ 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();
|
|
|
+ notehead.applyStyle(ctx, noteheadStyle);
|
|
|
+ modifier.setContext(ctx);
|
|
|
+ modifier.drawWithStyle();
|
|
|
+ notehead.restoreStyle(ctx, noteheadStyle);
|
|
|
+ }
|
|
|
+ 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 && this.renderFlag;
|
|
|
+ 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.applyStyle(ctx, this.getFlagStyle() || false);
|
|
|
+ this.flag.render(ctx, flagX, flagY);
|
|
|
+ this.restoreStyle(ctx, this.getFlagStyle() || false);
|
|
|
+ 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));
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.stem) {
|
|
|
+ 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));
|
|
|
+
|
|
|
+ if(this.stem) {
|
|
|
+
|
|
|
+ const stemX = this.getStemX();
|
|
|
+ this.stem.setNoteHeadXBounds(stemX, stemX);
|
|
|
+ }
|
|
|
+
|
|
|
+ L('Rendering ', this.isChord() ? 'chord :' : 'note :', this.keys);
|
|
|
+
|
|
|
+
|
|
|
+ this.drawLedgerLines();
|
|
|
+
|
|
|
+
|
|
|
+ this.applyStyle();
|
|
|
+ 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();
|
|
|
+ this.restoreStyle();
|
|
|
+ this.setRendered();
|
|
|
+ }
|
|
|
+}
|