Drawing functions

external/vexflow/vexflow.d.ts

@@ -30,6 +30,7 @@ declare namespace Vex {
       public addTickables(notes: StaveNote[]): Voice;
       public addTickable(note: StaveNote): Voice;
       public setMode(mode: any): Voice;
+      public draw(ctx: any, stave: Stave): void;
     }
 
     export class StaveNote {
@@ -62,7 +63,7 @@ declare namespace Vex {
       public getNumLines(): number;
       public getLineForY(y: number): number;
       public getModifiers(pos: any, cat: any): Vex.Flow.Clef[]; // FIXME
-      public setContext(ctx: any): void;
+      public setContext(ctx: any): Stave;
       public addModifier(mod: any, pos: any): void;
       public draw(): void;
       public addTimeSignature(sig: string): void;

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -11,7 +11,6 @@ import {VexFlowStaffEntry} from "./VexFlowStaffEntry";
 //import {Fraction} from "../../../Common/DataObjects/fraction";
 
 import Vex = require("vexflow");
-import StaveModifier = Vex.Flow.StaveModifier;
 
 export class VexFlowMeasure extends StaffMeasure {
     constructor(staff: Staff, staffLine: StaffLine = undefined, sourceMeasure: SourceMeasure = undefined) {
@@ -169,6 +168,17 @@ export class VexFlowMeasure extends StaffMeasure {
         // TODO
     }
 
+    public draw(canvas: HTMLCanvasElement): void {
+        let renderer: Vex.Flow.Renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
+        let ctx: any = renderer.getContext();
+        this.stave.setContext(ctx).draw();
+        for (let voiceID in this.voices) {
+            if (this.voices.hasOwnProperty(voiceID)) {
+                this.voices[voiceID].draw(ctx, this.stave);
+            }
+        }
+    }
+
     private increaseBeginInstructionWidth(): void {
         let modifiers: Vex.Flow.StaveModifier[] = this.stave.getModifiers();
         let modifier: Vex.Flow.StaveModifier = modifiers[modifiers.length - 1];

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -11,8 +11,12 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
     }
 
     protected drawMeasure(measure: StaffMeasure): void {
-        let vfMeasure: VexFlowMeasure = <VexFlowMeasure> measure;
-        throw new Error("not implemented");
+        //let vfMeasure: VexFlowMeasure = <VexFlowMeasure> measure;
+        //throw new Error("not implemented");
+        let canvas: HTMLCanvasElement = document.createElement("canvas");
+        document.body.appendChild(canvas);
+        canvas.width = canvas.height = 100;
+        return (measure as VexFlowMeasure).draw(canvas);
     }
 
     protected applyScreenTransformation(rectangle: RectangleF2D): RectangleF2D {

test/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -5,6 +5,9 @@ import {GraphicalMusicSheet} from "../../../../src/MusicalScore/Graphical/Graphi
 import {IXmlElement} from "../../../../src/Common/FileIO/Xml";
 import {MusicSheet} from "../../../../src/MusicalScore/MusicSheet";
 import {MusicSheetReader} from "../../../../src/MusicalScore/ScoreIO/MusicSheetReader";
+import {VexFlowMusicSheetCalculator} from "../../../../src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator";
+import {SourceMeasure} from "../../../../src/MusicalScore/VoiceData/SourceMeasure";
+import {StaffMeasure} from "../../../../src/MusicalScore/Graphical/StaffMeasure";
 
 
 describe("VexFlow Measure Test", () => {
@@ -36,9 +39,9 @@ describe("VexFlow Measure Test", () => {
     //    done();
     //});
 
-    it("prepareGraphicalMusicSheet", (done: MochaDone) => {
-        let factory: IGraphicalSymbolFactory = new VexFlowGraphicalSymbolFactory();
-        let calc: MusicSheetCalculator = new MusicSheetCalculator(factory);
+    it("Full Music Sheet Reading", (done: MochaDone) => {
+        //let factory: IGraphicalSymbolFactory = new VexFlowGraphicalSymbolFactory();
+        let calc: MusicSheetCalculator = new VexFlowMusicSheetCalculator();
         let path: string = "test/data/MuzioClementi_SonatinaOpus36No1_Part1.xml";
         let doc: Document = ((window as any).__xml__)[path];
         chai.expect(doc).to.not.be.undefined;
@@ -49,4 +52,28 @@ describe("VexFlow Measure Test", () => {
         console.log(gms);
         done();
     });
+
+    it("Simple Measure", (done: MochaDone) => {
+        let sheet: MusicSheet = new MusicSheet();
+        let measure: SourceMeasure = new SourceMeasure(1);
+        sheet.addMeasure(measure);
+        let calc: MusicSheetCalculator = new VexFlowMusicSheetCalculator();
+        let gms: GraphicalMusicSheet = new GraphicalMusicSheet(sheet, calc);
+        chai.expect(gms.MeasureList.length).to.equal(1);
+        chai.expect(gms.MeasureList[0].length).to.equal(1);
+        let gm: StaffMeasure = gms.MeasureList[0][0];
+        console.log(gm);
+        done();
+    });
+
+    it("Empty Measure", (done: MochaDone) => {
+        let sheet: MusicSheet = new MusicSheet();
+        let measure: SourceMeasure = new SourceMeasure(1);
+        sheet.addMeasure(measure);
+        let calc: MusicSheetCalculator = new VexFlowMusicSheetCalculator();
+        let gms: GraphicalMusicSheet = new GraphicalMusicSheet(sheet, calc);
+        chai.expect(gms.MeasureList.length).to.equal(1);
+        chai.expect(gms.MeasureList[0].length).to.equal(0);
+        done();
+    });
 });