Fixed cursor drawing via core code. vexflow x positions are handed back now to object model.

Added a test for rendering beamed notes in a color

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -323,6 +323,6 @@ export class VexFlowConverter {
      */
     public static style(styleId: OutlineAndFillStyleEnum): string {
         // TODO To be implemented
-        return "purple";
+        return "lightgreen";
     }
 }

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -226,6 +226,9 @@ export class VexFlowMeasure extends StaffMeasure {
         for (let connector of this.connectors) {
             connector.setContext(ctx).draw();
         }
+
+        // now we can finally set the vexflow x positions back into the osmd object model:
+        this.setStaffEntriesXPositions();
     }
 
     /**
@@ -298,6 +301,9 @@ export class VexFlowMeasure extends StaffMeasure {
                     }
                     if (notes.length > 1) {
                         vfbeams.push(new Vex.Flow.Beam(notes, true));
+                        for (let note of notes) {
+                            (<Vex.Flow.StaveNote> note).setStyle({fillStyle: "green", strokeStyle: "green"});
+                        }
                     } else {
                         Logging.log("Warning! Beam with no notes! Trying to ignore, but this is a serious problem.");
                     }
@@ -422,4 +428,21 @@ export class VexFlowMeasure extends StaffMeasure {
         this.beginInstructionsWidth = (this.stave.getNoteStartX() - this.stave.getX()) / unitInPixels;
         this.endInstructionsWidth = (this.stave.getX() + this.stave.getWidth() - this.stave.getNoteEndX()) / unitInPixels;
     }
+
+    /**
+     * 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
+     */
+    private setStaffEntriesXPositions(): void {
+        for (let idx3: number = 0, len3: number = this.staffEntries.length; idx3 < len3; ++idx3) {
+            let gse: VexFlowStaffEntry = (<VexFlowStaffEntry> this.staffEntries[idx3]);
+            let measure: StaffMeasure = gse.parentMeasure;
+            let x: number =
+                gse.getX() -
+                measure.PositionAndShape.RelativePosition.x -
+                measure.ParentStaffLine.PositionAndShape.RelativePosition.x -
+                measure.parentMusicSystem.PositionAndShape.RelativePosition.x;
+            gse.PositionAndShape.RelativePosition.x = x;
+        }
+    }
 }

src/OSMD/OSMD.ts

@@ -136,7 +136,14 @@ export class OSMD {
         // Calculate again
         this.graphic.reCalculate();
         this.graphic.Cursors.length = 0;
-        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(7, 1), OutlineAndFillStyleEnum.PlaybackCursor));
+        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(0, 4), OutlineAndFillStyleEnum.PlaybackCursor));
+        /*this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(1, 4), OutlineAndFillStyleEnum.PlaybackCursor));
+        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(2, 4), OutlineAndFillStyleEnum.PlaybackCursor));
+        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(3, 4), OutlineAndFillStyleEnum.PlaybackCursor));
+        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(4, 4), OutlineAndFillStyleEnum.PlaybackCursor));
+        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(5, 4), OutlineAndFillStyleEnum.PlaybackCursor));
+        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(6, 4), OutlineAndFillStyleEnum.PlaybackCursor));
+        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(7, 4), OutlineAndFillStyleEnum.PlaybackCursor));*/
         // Update Sheet Page
         let height: number = this.graphic.MusicPages[0].PositionAndShape.BorderBottom * 10.0 * this.zoom;
         this.drawer.resize(width, height);