Improved x-layouting match of Vexflow notes and StaffEntries (mainly for first measures in system)

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -329,12 +329,10 @@ export class VexFlowMeasure extends GraphicalMeasure {
         // 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) {
-            // The width of the voices does not include the instructions (StaveModifiers)
-            this.formatVoices((this.PositionAndShape.BorderRight - this.beginInstructionsWidth - this.endInstructionsWidth) * unitInPixels);
+            // set the width of the voices to the current measure width:
+            // (The width of the voices does not include the instructions (StaveModifiers))
+            this.formatVoices((this.PositionAndShape.Size.width - this.beginInstructionsWidth - this.endInstructionsWidth) * unitInPixels);
         }
-
-        // Force the width of the Begin Instructions
-        this.stave.setNoteStartX(this.stave.getX() + unitInPixels * this.beginInstructionsWidth);
     }
 
     /**
@@ -693,18 +691,18 @@ export class VexFlowMeasure extends GraphicalMeasure {
      * space needed by Instructions (in VexFlow: StaveModifiers)
      */
     private updateInstructionWidth(): void {
-        let beginInstructionsWidth: number = 0;
-        let endInstructionsWidth: number = 0;
+        let vfBeginInstructionsWidth: number = 0;
+        let vfEndInstructionsWidth: number = 0;
         const modifiers: Vex.Flow.StaveModifier[] = this.stave.getModifiers();
         for (const mod of modifiers) {
             if (mod.getPosition() === Vex.Flow.StaveModifier.Position.BEGIN) {
-                beginInstructionsWidth += mod.getWidth() + mod.getPadding(undefined);
+                vfBeginInstructionsWidth += mod.getWidth() + mod.getPadding(undefined);
             } else if (mod.getPosition() === Vex.Flow.StaveModifier.Position.END) {
-                endInstructionsWidth += mod.getWidth() + mod.getPadding(undefined);
+                vfEndInstructionsWidth += mod.getWidth() + mod.getPadding(undefined);
             }
         }
 
-        this.beginInstructionsWidth = beginInstructionsWidth / unitInPixels;
-        this.endInstructionsWidth = endInstructionsWidth / unitInPixels;
+        this.beginInstructionsWidth = vfBeginInstructionsWidth / unitInPixels;
+        this.endInstructionsWidth = vfEndInstructionsWidth / unitInPixels;
     }
 }

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -51,14 +51,10 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
   protected formatMeasures(): void {
       for (const verticalMeasureList of this.graphicalMusicSheet.MeasureList) {
         const graphicalMeasure: VexFlowMeasure = verticalMeasureList[0] as VexFlowMeasure;
-        graphicalMeasure.formatVoices(graphicalMeasure.minimumStaffEntriesWidth);
-        for (const gM of verticalMeasureList) {
-          (<VexFlowMeasure>gM).format();
-        }
+        graphicalMeasure.format();
         for (const staffEntry of graphicalMeasure.staffEntries) {
           (<VexFlowStaffEntry>staffEntry).calculateXPosition();
         }
-        graphicalMeasure.PositionAndShape.calculateAbsolutePositionsOfChildren();
       }
   }
 

src/MusicalScore/Graphical/VexFlow/VexFlowStaffEntry.ts

@@ -41,7 +41,7 @@ export class VexFlowStaffEntry extends GraphicalStaffEntry {
         // Calculate parent absolute position and reverse calculate the relative position
         // All the modifiers signs, clefs, you name it have an offset in the measure. Therefore remove it.
         // NOTE: Somehow vexflows shift is off by 25px.
-        const modifierOffset: number = stave.getModifierXShift() - (this.parentMeasure.MeasureNumber === 1 ? 25 : 0);
+        const modifierOffset: number = stave.getModifierXShift(); // - (this.parentMeasure.MeasureNumber === 1 ? 25 : 0);
         // const modifierOffset: number = 0;
         // sets the vexflow x positions back into the bounding boxes of the staff entries in the osmd object model.
         // The positions are needed for cursor placement and mouse/tap interactions