feat(Instantanious expressions done): yep done

yep yep done

Bounding boxes had no width

external/vexflow/vexflow.d.ts

@@ -23,13 +23,13 @@ declare namespace Vex {
 
             public mergeWith(bb: BoundingBox): BoundingBox;
 
-            public getX(): number;
+            public x: number;
 
-            public getY(): number;
+            public y: number;
 
-            public getW(): number;
+            public w: number;
 
-            public getH(): number;
+            public h: number;
 
             public draw(ctx: Vex.Flow.RenderContext): void;
         }

src/MusicalScore/Graphical/BoundingBox.ts

@@ -38,11 +38,12 @@ export class BoundingBox {
      * Create a bounding box
      * @param dataObject Graphical object where the bounding box will be attached
      * @param parent Parent bounding box of an object in a higher hierarchy position
-     * @param connectChildToParent Create a child to parent relationship too. Will be true by default
+     * @param isSymbol Defines the bounding box to be symbol thus not calculating it's boundaries by itself. NOTE: Borders need to be set!
      */
-    constructor(dataObject: Object = undefined, parent: BoundingBox = undefined) {
+    constructor(dataObject: Object = undefined, parent: BoundingBox = undefined, isSymbol: boolean = false) {
         this.parent = parent;
         this.dataObject = dataObject;
+        this.isSymbol = isSymbol;
         this.xBordersHaveBeenSet = false;
         this.yBordersHaveBeenSet = false;
         if (parent !== undefined) {

src/MusicalScore/Graphical/GraphicalVoiceEntry.ts

@@ -12,7 +12,7 @@ export class GraphicalVoiceEntry extends GraphicalObject {
         super();
         this.parentVoiceEntry = parentVoiceEntry;
         this.parentStaffEntry = parentStaffEntry;
-        this.PositionAndShape = new BoundingBox(this, parentStaffEntry ? parentStaffEntry.PositionAndShape : undefined);
+        this.PositionAndShape = new BoundingBox(this, parentStaffEntry ? parentStaffEntry.PositionAndShape : undefined, true);
         this.notes = [];
     }
 

src/MusicalScore/Graphical/VexFlow/VexFlowInstantaniousDynamicExpression.ts

@@ -21,12 +21,13 @@ export class VexFlowInstantaniousDynamicExpression extends GraphicalInstantaniou
         this.mLabel = new GraphicalLabel(new Label(this.Expression),
                                          EngravingRules.Rules.ContinuousDynamicTextHeight,
                                          TextAlignment.LeftTop,
-                                         staffEntry.PositionAndShape);
+                                         staffEntry ? staffEntry.PositionAndShape : undefined);
 
-        const offset: number = staffEntry.parentMeasure.ParentStaffLine
-                                       .SkyBottomLineCalculator.getBottomLineMaxInBoundingBox(staffEntry.parentMeasure.PositionAndShape);
+        const offset: number = staffEntry ? staffEntry.parentMeasure.ParentStaffLine
+                                       .SkyBottomLineCalculator.getBottomLineMaxInBoundingBox(staffEntry.parentMeasure.PositionAndShape) : 0;
         this.mLabel.PositionAndShape.RelativePosition.y += offset;
         this.mLabel.Label.fontStyle = FontStyles.BoldItalic;
+        this.mLabel.setLabelPositionAndShapeBorders();
     }
 
     public calculcateBottomLine(measure: GraphicalMeasure): void {

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -57,8 +57,10 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
         const firstMeasure: VexFlowMeasure = verticalMeasureList[0] as VexFlowMeasure;
         // first measure has formatting method as lambda function object, but formats all measures. TODO this could be refactored
         firstMeasure.format();
-        for (const staffEntry of firstMeasure.staffEntries) {
-          (<VexFlowStaffEntry>staffEntry).calculateXPosition();
+        for (const measure of verticalMeasureList) {
+          for (const staffEntry of measure.staffEntries) {
+            (<VexFlowStaffEntry>staffEntry).calculateXPosition();
+          }
         }
       }
   }
@@ -118,7 +120,6 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
         // };
         MusicSheetCalculator.setMeasuresMinStaffEntriesWidth(measures, minStaffEntriesWidth);
         for (const measure of measures) {
-          measure.PositionAndShape.BorderRight = minStaffEntriesWidth;
           if (measure === measures[0]) {
             const vexflowMeasure: VexFlowMeasure = (measure as VexFlowMeasure);
             // prepare format function for voices, will be called later for formatting measure again

src/MusicalScore/Graphical/VexFlow/VexFlowStaffEntry.ts

@@ -29,6 +29,8 @@ export class VexFlowStaffEntry extends GraphicalStaffEntry {
             const tickable: Vex.Flow.StemmableNote = (gve as VexFlowVoiceEntry).vfStaveNote;
             // This will let the tickable know how to calculate it's bounding box
             tickable.setStave(stave);
+            // setting Borders from Vexflow to OSMD
+            (gve as VexFlowVoiceEntry).applyBordersFromVexflow();
             // The middle of the tickable is also the OSMD BoundingBox center
             if (tickable.getAttribute("type") === "StaveNote") {
                 // The middle of the tickable is also the OSMD BoundingBox center
@@ -49,8 +51,9 @@ export class VexFlowStaffEntry extends GraphicalStaffEntry {
         // 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
-        this.PositionAndShape.RelativePosition.x = (tickablePosition - stave.getNoteStartX() + modifierOffset) / unitInPixels
-            + 0.5; // half note head offset
+        if (!(this.graphicalVoiceEntries[0] as VexFlowVoiceEntry).parentVoiceEntry.IsGrace) {
+            this.PositionAndShape.RelativePosition.x = (this.graphicalVoiceEntries[0] as VexFlowVoiceEntry).vfStaveNote.getBoundingBox().x / unitInPixels;
+        }
         this.PositionAndShape.calculateBoundingBox();
     }
 }

src/MusicalScore/Graphical/VexFlow/VexFlowVoiceEntry.ts

@@ -1,11 +1,30 @@
 import { VoiceEntry } from "../../VoiceData/VoiceEntry";
 import { GraphicalVoiceEntry } from "../GraphicalVoiceEntry";
 import { GraphicalStaffEntry } from "../GraphicalStaffEntry";
+import { unitInPixels } from "./VexFlowMusicSheetDrawer";
 
 export class VexFlowVoiceEntry extends GraphicalVoiceEntry {
+    private mVexFlowStaveNote: Vex.Flow.StemmableNote;
+
     constructor(parentVoiceEntry: VoiceEntry, parentStaffEntry: GraphicalStaffEntry) {
         super(parentVoiceEntry, parentStaffEntry);
     }
 
-    public vfStaveNote: Vex.Flow.StemmableNote;
+    public applyBordersFromVexflow(): void {
+        const a: any = (this.vfStaveNote as any);
+        const bb: any = a.getBoundingBox();
+        this.PositionAndShape.RelativePosition.y = bb.y / unitInPixels;
+        this.PositionAndShape.BorderTop = 0;
+        this.PositionAndShape.BorderBottom = bb.h / unitInPixels;
+        this.PositionAndShape.BorderLeft = bb.x / unitInPixels;
+        this.PositionAndShape.BorderRight = bb.w / unitInPixels;
+    }
+
+    public set vfStaveNote(value: Vex.Flow.StemmableNote) {
+        this.mVexFlowStaveNote = value;
+    }
+
+    public get vfStaveNote(): Vex.Flow.StemmableNote {
+        return this.mVexFlowStaveNote;
+    }
 }