Small fixes for correct x-layouting

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -22,7 +22,7 @@ export class VexFlowMeasure extends StaffMeasure {
         this.minimumStaffEntriesWidth = -1;
         this.resetLayout();
     }
-
+    private realBegin: number = 0;
     // octaveOffset according to active clef
     public octaveOffset: number = 3;
     // The VexFlow Voices in the measure
@@ -147,7 +147,7 @@ export class VexFlowMeasure extends StaffMeasure {
         // Set the width of the Vex.Flow.Stave
         this.stave.setWidth(width * 10.0);
         // Force the width of the Begin Instructions
-        this.stave.setNoteStartX(this.beginInstructionsWidth * 10.0);
+        //this.stave.setNoteStartX(this.beginInstructionsWidth * 10.0);
         // If this is the first stave in the vertical measure, call the format
         // method to set the width of all the voices
         if (this.formatVoices) {
@@ -162,7 +162,7 @@ export class VexFlowMeasure extends StaffMeasure {
      * (multiply the minimal positions with the scaling factor, considering the BeginInstructionsWidth)
      */
     public layoutSymbols(): void {
-        this.stave.format();
+        //this.stave.format();
     }
 
     //public addGraphicalStaffEntry(entry: VexFlowStaffEntry): void {
@@ -179,6 +179,8 @@ export class VexFlowMeasure extends StaffMeasure {
      * @param ctx
      */
     public draw(ctx: Vex.Flow.CanvasContext): void {
+        // Force the width of the Begin Instructions
+        this.stave.setNoteStartX(this.stave.getNoteStartX() + 10.0 * (- this.realBegin + this.beginInstructionsWidth));
         // Draw stave lines
         this.stave.setContext(ctx).draw();
         // Draw all voices
@@ -311,6 +313,7 @@ export class VexFlowMeasure extends StaffMeasure {
 
     private updateInstructionWidth(): void {
         this.stave.format();
+        this.realBegin = this.stave.getNoteStartX() / 10.0;
         this.beginInstructionsWidth = this.stave.getNoteStartX() / 10.0;
         this.endInstructionsWidth = this.stave.getNoteEndX() / 10.0;
     }

src/OSMD/AJAX.ts

@@ -19,7 +19,7 @@ export function ajax(url: string): Promise<string> {
     return new Promise((resolve: (value: string) => void, reject: (error: any) => void) => {
         xhttp.onreadystatechange = () => {
             if (xhttp.readyState === XMLHttpRequest.DONE) {
-                if (xhttp.status === 200) {
+                if (xhttp.status === 200 || xhttp.status === 0) {
                     resolve(xhttp.responseText);
                 } else {
                     //reject(new Error("AJAX error: '" + xhttp.statusText + "'"));

src/OSMD/OSMD.ts

@@ -10,6 +10,7 @@ import {MXLtoXMLstring} from "../Common/FileIO/Mxl";
 import {Promise} from "es6-promise";
 import {handleResize} from "./ResizeHandler";
 import {ajax} from "./AJAX";
+import {Logging} from "../Common/Logging";
 
 export class OSMD {
     /**
@@ -74,6 +75,7 @@ export class OSMD {
                         return self.load(str);
                     },
                     (err: any) => {
+                        Logging.debug(err);
                         throw new Error("OSMD: Invalid MXL file");
                     }
                 );
@@ -163,6 +165,8 @@ export class OSMD {
         this.graphic = undefined;
         this.zoom = 1.0;
         this.resetHeadings();
+        this.canvas.width = 0;
+        this.canvas.height = 0;
     }
 
     /**