Fixed display of instrument labels

Gruntfile.js

@@ -36,6 +36,16 @@ module.exports = function (grunt) {
                     banner: "<%= banner %>"
                 }
             },
+            debugDemo: {
+                src: [].concat(typings, src),
+                dest: '<%= outputDir.build %>/osmd-demo.js',
+                options: {
+                    banner: "<%= banner %>",
+                    browserifyOptions: {
+                        debug: true
+                    }
+                }
+            },
             debug: {
                 src: [].concat(typings, src, test),
                 dest: '<%= outputDir.build %>/osmd-debug.js',

external/vexflow/vexflow.d.ts

@@ -44,7 +44,7 @@ declare namespace Vex {
     }
 
     export class Stave {
-      constructor(x: number, y: number, width: number);
+      constructor(x: number, y: number, width: number, options: any);
 
       public x: number;
       public start_x: number;

src/MusicalScore/Graphical/GraphicalLabel.ts

@@ -20,6 +20,10 @@ export class GraphicalLabel extends Clickable {
         return this.label;
     }
 
+    public toString(): string {
+        return this.label.text;
+    }
+
     public setLabelPositionAndShapeBorders(): void {
         if (this.Label.text.trim() === "") {
             return;

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -55,7 +55,10 @@ export class VexFlowMeasure extends StaffMeasure {
         // Will be changed when repetitions will be implemented
         this.beginInstructionsWidth = 20 / this.unit;
         this.endInstructionsWidth = 20 / this.unit;
-        this.stave = new Vex.Flow.Stave(0, 0, 0);
+        this.stave = new Vex.Flow.Stave(0, 0, 0, {
+            space_above_staff_ln: 0,
+            space_below_staff_ln: 0,
+        });
     }
 
     public clean(): void {

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -136,7 +136,7 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
                 for (let idx2: number = 0, len2: number = graphicalMusicPage.MusicSystems.length; idx2 < len2; ++idx2) {
                     let musicSystem: MusicSystem = graphicalMusicPage.MusicSystems[idx2];
                     // calculate y positions of stafflines within system
-                    let y: number = 0;
+                    let y: number = 10;
                     for (let line of musicSystem.StaffLines) {
                         line.PositionAndShape.RelativePosition.y = y;
                         y += 10;

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -28,7 +28,7 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
 
     public translate(x: number, y: number): void {
         // FIXME
-        (this.ctx as any).vexFlowCanvasContext.translate(x, y);
+        //(this.ctx as any).vexFlowCanvasContext.translate(x, y);
     }
 
     /**
@@ -63,8 +63,7 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
         // ToDo: implement!
         let ctx: CanvasRenderingContext2D = (this.ctx as any).vexFlowCanvasContext;
         ctx.font = Math.floor(graphicalLabel.Label.fontHeight * 10) + "px 'Times New Roman'";
-        console.log(graphicalLabel.Label.text, screenPosition.x, screenPosition.y);
-        ctx.fillText(graphicalLabel.Label.text, screenPosition.x, screenPosition.y);
+        ctx.fillText(graphicalLabel.Label.text, screenPosition.x, screenPosition.y + heightInPixel);
     }
 
     /**

test/MusicalScore/Calculation/MeasureSizeCalculator.ts

@@ -6,7 +6,7 @@ import Vex = require("vexflow");
 
 describe("Measure Size Calculator Tests", () => {
   // Initialization
-  let stave: Vex.Flow.Stave = new Vex.Flow.Stave(0, 0, 0);
+  let stave: Vex.Flow.Stave = new Vex.Flow.Stave(0, 0, 0, {});
   let voices: Vex.Flow.Voice[];
   let formatter: Vex.Flow.Formatter;
   let voice: Vex.Flow.Voice;
@@ -65,7 +65,7 @@ describe("Measure Size Calculator Tests", () => {
 
     visual((renderer: any, ctx: any): void => {
       renderer.resize(420, 120);
-      let stave2: Vex.Flow.Stave = new Vex.Flow.Stave(10, 0, 410);
+      let stave2: Vex.Flow.Stave = new Vex.Flow.Stave(10, 0, 410, {});
       stave2.setContext(ctx);
       for (let t in Vex.Flow.Clef.types) {
         if (Vex.Flow.Clef.types.hasOwnProperty(t)) {

tsconfig.json

@@ -4,6 +4,7 @@
     "moduleResolution": "node"
   },
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "test"
   ]
 }