Call draw with a canvas

package.json

@@ -4,9 +4,9 @@
   "description": "Open Sheet Music Display library",
   "main": "build/osmd.min.js",
   "scripts": {
-    "start": "alias grunt=\"'PATH=$(npm bin):$PATH' grunt\"",
-    "test": "grunt npmtest",
-    "prepublish": "grunt publish"
+    "start": "echo",
+    "test": "$(npm bin)/grunt npmtest",
+    "prepublish": "$(npm bin)/grunt publish"
   },
   "repository": {
     "type": "git",
@@ -25,27 +25,24 @@
   },
   "homepage": "http://opensheetmusicdisplay.org",
   "dependencies": {
-    "browserify": "",
     "es6-promise": "",
-    "grunt": "",
+    "jszip": "",
+    "vexflow": ""
+  },
+  "devDependencies": {
+    "browserify": "",
+    "chai": "^3.4.1",
+    "grunt": "^1.0.1",
     "grunt-browserify": "",
     "grunt-contrib-clean": "",
     "grunt-contrib-jshint": "",
     "grunt-contrib-uglify": "",
     "grunt-contrib-watch": "",
+    "grunt-karma": "",
     "grunt-tslint": "",
     "grunt-typings": "",
-    "grunt-karma": "",
-    "jszip": "",
-    "tsify": "",
-    "tslint": "3.8.0",
-    "typescript": "",
-    "typescript-collections": "",
-    "vexflow": ""
-  },
-  "devDependencies": {
-    "chai": "^3.4.1",
     "karma": "",
+    "karma-base64-to-js-preprocessor": "",
     "karma-chai": "",
     "karma-chrome-launcher": "",
     "karma-firefox-launcher": "",
@@ -53,8 +50,11 @@
     "karma-mocha-reporter": "",
     "karma-phantomjs-launcher": "",
     "karma-xml2js-preprocessor": "",
-    "karma-base64-to-js-preprocessor": "",
     "mocha": "^2.5.2",
-    "phantomjs-prebuilt": ""
+    "phantomjs-prebuilt": "",
+    "tsify": "",
+    "tslint": "3.8.0",
+    "typescript": "",
+    "typescript-collections": ""
   }
 }

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -7,15 +7,8 @@ import {GraphicalMusicSheet} from "../GraphicalMusicSheet";
  * Created by Matthias on 22.06.2016.
  */
 export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
-    constructor() {
+    constructor(canvas: HTMLCanvasElement) {
         super();
-        // Create heading (FIXME)
-        let h1: Element = document.createElement("h1");
-        h1.textContent = "VexFlowMusicSheetDrawer Output";
-        document.body.appendChild(h1);
-        // Create the canvas in the document:
-        let canvas: HTMLCanvasElement = document.createElement("canvas");
-        document.body.appendChild(canvas);
         this.renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
         this.ctx = this.renderer.getContext();
 

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSystem.ts

@@ -29,7 +29,9 @@ export class VexFlowMusicSystem extends MusicSystem {
     protected createSystemLine(xPosition: number, lineWidth: number, lineType: SystemLinesEnum, linePosition: SystemLinePosition,
                                musicSystem: MusicSystem, topMeasure: StaffMeasure, bottomMeasure: StaffMeasure = undefined): SystemLine {
         // ToDo: create line in Vexflow
-        (topMeasure as VexFlowMeasure).connectTo(bottomMeasure as VexFlowMeasure, VexFlowConverter.line(lineType));
+        if (bottomMeasure) {
+            (topMeasure as VexFlowMeasure).connectTo(bottomMeasure as VexFlowMeasure, VexFlowConverter.line(lineType));
+        }
         return new SystemLine(lineType, linePosition, this, topMeasure, bottomMeasure);
     }
 

test/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -9,7 +9,7 @@ import {IXmlElement} from "../../../../src/Common/FileIO/Xml";
 describe("VexFlow Music Sheet Drawer", () => {
 
     it(".drawSheet (Clementi pt. 1)", (done: MochaDone) => {
-        let path: string = "test/data/MuzioClementi_SonatinaOpus36No1_Part2.xml";
+        let path: string = "test/data/MuzioClementi_SonatinaOpus36No1_Part1.xml";
         // "test/data/MuzioClementi_SonatinaOpus36No1_Part1.xml";
         let score: IXmlElement = TestUtils.getScore(path);
         chai.expect(score).to.not.be.undefined;
@@ -17,7 +17,15 @@ describe("VexFlow Music Sheet Drawer", () => {
         let reader: MusicSheetReader = new MusicSheetReader();
         let sheet: MusicSheet = reader.createMusicSheet(score, path);
         let gms: GraphicalMusicSheet = new GraphicalMusicSheet(sheet, calc);
-        (new VexFlowMusicSheetDrawer()).drawSheet(gms);
+
+        // Create heading in the test page
+        let h1: Element = document.createElement("h1");
+        h1.textContent = "VexFlowMusicSheetDrawer Output";
+        document.body.appendChild(h1);
+        // Create the canvas in the document:
+        let canvas: HTMLCanvasElement = document.createElement("canvas");
+        document.body.appendChild(canvas);
+        (new VexFlowMusicSheetDrawer(canvas)).drawSheet(gms);
         done();
     });