VexFlowMeasure.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. import Vex = require("vexflow");
  2. import {StaffMeasure} from "../StaffMeasure";
  3. import {SourceMeasure} from "../../VoiceData/SourceMeasure";
  4. import {Staff} from "../../VoiceData/Staff";
  5. import {StaffLine} from "../StaffLine";
  6. import {SystemLinesEnum} from "../SystemLinesEnum";
  7. import {ClefInstruction} from "../../VoiceData/Instructions/ClefInstruction";
  8. import {KeyInstruction} from "../../VoiceData/Instructions/KeyInstruction";
  9. import {RhythmInstruction} from "../../VoiceData/Instructions/RhythmInstruction";
  10. import {VexFlowConverter} from "./VexFlowConverter";
  11. import {VexFlowStaffEntry} from "./VexFlowStaffEntry";
  12. import {Beam} from "../../VoiceData/Beam";
  13. import {GraphicalNote} from "../GraphicalNote";
  14. import {GraphicalStaffEntry} from "../GraphicalStaffEntry";
  15. export class VexFlowMeasure extends StaffMeasure {
  16. constructor(staff: Staff, staffLine: StaffLine = undefined, sourceMeasure: SourceMeasure = undefined) {
  17. super(staff, sourceMeasure, staffLine);
  18. this.minimumStaffEntriesWidth = -1;
  19. this.stave = new Vex.Flow.Stave(0, 0, 0);
  20. this.vfVoices = {};
  21. //this.duration = this.parentSourceMeasure.Duration;
  22. }
  23. public octaveOffset: number = 3; // FIXME
  24. public vfVoices: { [voiceID: number]: Vex.Flow.Voice; };
  25. public formatVoices: (width: number) => void;
  26. public unit: number = 10.0;
  27. private stave: Vex.Flow.Stave;
  28. private beams: { [voiceID: number]: [Beam, VexFlowStaffEntry[]][]; } = {};
  29. private vfbeams: { [voiceID: number]: Vex.Flow.Beam[]; } = {};
  30. public setAbsoluteCoordinates(x: number, y: number): void {
  31. this.stave.setX(x);
  32. this.stave.setY(y);
  33. }
  34. /**
  35. * Reset all the geometric values and parameters of this measure and put it in an initialized state.
  36. * This is needed to evaluate a measure a second time by system builder.
  37. */
  38. public resetLayout(): void {
  39. this.beginInstructionsWidth = 0;
  40. this.endInstructionsWidth = 0;
  41. }
  42. /**
  43. * returns the x-width of a given measure line.
  44. * @param line
  45. * @returns {SystemLinesEnum} the x-width
  46. */
  47. public getLineWidth(line: SystemLinesEnum): number {
  48. // FIXME: See values in VexFlow's stavebarline.js
  49. switch (line) {
  50. case SystemLinesEnum.SingleThin:
  51. return 5;
  52. case SystemLinesEnum.DoubleThin:
  53. return 5;
  54. case SystemLinesEnum.ThinBold:
  55. return 5;
  56. case SystemLinesEnum.BoldThinDots:
  57. return 5;
  58. case SystemLinesEnum.DotsThinBold:
  59. return 5;
  60. case SystemLinesEnum.DotsBoldBoldDots:
  61. return 5;
  62. case SystemLinesEnum.None:
  63. return 0;
  64. default:
  65. return 0;
  66. }
  67. }
  68. /**
  69. * adds the given clef to the begin of the measure.
  70. * This has to update/increase BeginInstructionsWidth.
  71. * @param clef
  72. */
  73. public addClefAtBegin(clef: ClefInstruction): void {
  74. this.octaveOffset = clef.OctaveOffset;
  75. let vfclef: string = VexFlowConverter.Clef(clef);
  76. this.stave.addClef(vfclef, undefined, undefined, Vex.Flow.Modifier.Position.BEGIN);
  77. this.increaseBeginInstructionWidth();
  78. }
  79. /**
  80. * adds the given key to the begin of the measure.
  81. * This has to update/increase BeginInstructionsWidth.
  82. * @param currentKey the new valid key.
  83. * @param previousKey the old cancelled key. Needed to show which accidentals are not valid any more.
  84. * @param currentClef the valid clef. Needed to put the accidentals on the right y-positions.
  85. */
  86. public addKeyAtBegin(currentKey: KeyInstruction, previousKey: KeyInstruction, currentClef: ClefInstruction): void {
  87. let keySig: Vex.Flow.KeySignature = new Vex.Flow.KeySignature(
  88. VexFlowConverter.keySignature(currentKey),
  89. VexFlowConverter.keySignature(previousKey)
  90. );
  91. this.stave.addModifier(keySig, Vex.Flow.Modifier.Position.BEGIN);
  92. }
  93. /**
  94. * adds the given rhythm to the begin of the measure.
  95. * This has to update/increase BeginInstructionsWidth.
  96. * @param rhythm
  97. */
  98. public addRhythmAtBegin(rhythm: RhythmInstruction): void {
  99. let timeSig: Vex.Flow.TimeSignature = VexFlowConverter.TimeSignature(rhythm);
  100. this.stave.addModifier(
  101. timeSig,
  102. Vex.Flow.Modifier.Position.BEGIN
  103. );
  104. this.increaseBeginInstructionWidth();
  105. }
  106. /**
  107. * adds the given clef to the end of the measure.
  108. * This has to update/increase EndInstructionsWidth.
  109. * @param clef
  110. */
  111. public addClefAtEnd(clef: ClefInstruction): void {
  112. let vfclef: string = VexFlowConverter.Clef(clef);
  113. this.stave.setEndClef(vfclef, undefined, undefined);
  114. this.increaseEndInstructionWidth();
  115. }
  116. /**
  117. * Sets the overall x-width of the measure.
  118. * @param width
  119. */
  120. public setWidth(width: number): void {
  121. // Widths in PS and VexFlow work differently.
  122. // In VexFlow, width is only the width of the actual voices, without considering
  123. // modifiers like clefs. In PS, width is the total width of the stave.
  124. // @Andrea: The following could be improved by storing the values in this object.
  125. // Now it calls .format() implicitly.
  126. //
  127. super.setWidth(width);
  128. this.stave.setWidth(width * this.unit);
  129. if (this.formatVoices) {
  130. this.formatVoices((width - this.beginInstructionsWidth - this.endInstructionsWidth) * this.unit);
  131. }
  132. }
  133. /**
  134. * This method is called after the StaffEntriesScaleFactor has been set.
  135. * Here the final x-positions of the staff entries have to be set.
  136. * (multiply the minimal positions with the scaling factor, considering the BeginInstructionsWidth)
  137. */
  138. public layoutSymbols(): void {
  139. this.stave.format();
  140. }
  141. public addGraphicalStaffEntry(entry: VexFlowStaffEntry): void {
  142. super.addGraphicalStaffEntry(entry);
  143. }
  144. public addGraphicalStaffEntryAtTimestamp(entry: VexFlowStaffEntry): void {
  145. super.addGraphicalStaffEntryAtTimestamp(entry);
  146. // TODO
  147. }
  148. public draw(ctx: Vex.Flow.CanvasContext): void {
  149. this.stave.setContext(ctx).draw();
  150. for (let voiceID in this.vfVoices) {
  151. if (this.vfVoices.hasOwnProperty(voiceID)) {
  152. this.vfVoices[voiceID].draw(ctx, this.stave);
  153. }
  154. }
  155. for (let voiceID in this.vfbeams) {
  156. if (this.vfbeams.hasOwnProperty(voiceID)) {
  157. for (let beam of this.vfbeams[voiceID]) {
  158. beam.setContext(ctx).draw();
  159. }
  160. }
  161. }
  162. }
  163. public handleBeam(graphicalNote: GraphicalNote, beam: Beam): void {
  164. let voiceID: number = graphicalNote.sourceNote.ParentVoiceEntry.ParentVoice.VoiceId;
  165. let beams: [Beam, VexFlowStaffEntry[]][] = this.beams[voiceID];
  166. if (beams === undefined) {
  167. beams = this.beams[voiceID] = [];
  168. }
  169. let data: [Beam, VexFlowStaffEntry[]];
  170. for (let mybeam of beams) {
  171. if (mybeam[0] === beam) {
  172. data = mybeam;
  173. }
  174. }
  175. if (data === undefined) {
  176. data = [beam, []];
  177. beams.push(data);
  178. }
  179. let parent: VexFlowStaffEntry = graphicalNote.parentStaffEntry as VexFlowStaffEntry;
  180. if (data[1].indexOf(parent) === -1) {
  181. data[1].push(parent);
  182. }
  183. }
  184. public finalizeBeams(): void {
  185. for (let voiceID in this.beams) {
  186. if (this.beams.hasOwnProperty(voiceID)) {
  187. let vfbeams: Vex.Flow.Beam[] = this.vfbeams[voiceID];
  188. if (vfbeams === undefined) {
  189. vfbeams = this.vfbeams[voiceID] = [];
  190. }
  191. for (let beam of this.beams[voiceID]) {
  192. let notes: Vex.Flow.StaveNote[] = [];
  193. for (let entry of beam[1]) {
  194. notes.push((entry as VexFlowStaffEntry).vfNotes[voiceID]);
  195. }
  196. vfbeams.push(new Vex.Flow.Beam(notes, true));
  197. }
  198. }
  199. }
  200. }
  201. public layoutStaffEntry(graphicalStaffEntry: GraphicalStaffEntry): void {
  202. let gnotes: { [voiceID: number]: GraphicalNote[]; } = (graphicalStaffEntry as VexFlowStaffEntry).graphicalNotes;
  203. let vfVoices: { [voiceID: number]: Vex.Flow.Voice; } = this.vfVoices;
  204. for (let voiceID in gnotes) {
  205. if (gnotes.hasOwnProperty(voiceID)) {
  206. if (!(voiceID in vfVoices)) {
  207. vfVoices[voiceID] = new Vex.Flow.Voice({
  208. beat_value: this.parentSourceMeasure.Duration.Denominator,
  209. num_beats: this.parentSourceMeasure.Duration.Numerator,
  210. resolution: Vex.Flow.RESOLUTION,
  211. }).setMode(Vex.Flow.Voice.Mode.SOFT);
  212. }
  213. let vfnote: Vex.Flow.StaveNote = VexFlowConverter.StaveNote(gnotes[voiceID]);
  214. (graphicalStaffEntry as VexFlowStaffEntry).vfNotes[voiceID] = vfnote;
  215. vfVoices[voiceID].addTickable(vfnote);
  216. }
  217. }
  218. }
  219. private increaseBeginInstructionWidth(): void {
  220. let modifiers: Vex.Flow.StaveModifier[] = this.stave.getModifiers();
  221. let modifier: Vex.Flow.StaveModifier = modifiers[modifiers.length - 1];
  222. //let padding: number = modifier.getCategory() === "keysignatures" ? modifier.getPadding(2) : 0;
  223. let padding: number = modifier.getPadding(20);
  224. //modifier.getPadding(this.begModifiers);
  225. let width: number = modifier.getWidth();
  226. this.beginInstructionsWidth += (padding + width) / this.unit;
  227. }
  228. private increaseEndInstructionWidth(): void {
  229. let modifiers: Vex.Flow.StaveModifier[] = this.stave.getModifiers();
  230. let modifier: Vex.Flow.StaveModifier = modifiers[modifiers.length - 1];
  231. let padding: number = 0; //modifier.getPadding(this.endModifiers++);
  232. let width: number = modifier.getWidth();
  233. this.endInstructionsWidth += (padding + width) / this.unit;
  234. }
  235. }