ghost notes rendering, but wrong position in list

external/vexflow/vexflow.d.ts

@@ -40,6 +40,8 @@ declare namespace Vex {
             public setStave(stave: Stave);
 
             public getBoundingBox(): BoundingBox;
+
+            public getAttribute(arg: string): string;
         }
 
         export class Voice {
@@ -74,15 +76,13 @@ declare namespace Vex {
         export class StemmableNote extends Note {
             public getStemDirection(): number;
             public setStemDirection(direction: number): StemmableNote;
+            public x_shift: number;
+            public getAbsoluteX(): number;
         }
 
         export class GhostNote extends StemmableNote {
             constructor(note_struct: any);
-            isRest(): boolean;
-
-            setStave(stave): void;
-
-            draw(): void;
+            public setStave(stave): void;
         }
 
         export class StaveNote extends StemmableNote {

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -385,9 +385,9 @@ export class VexFlowMeasure extends StaffMeasure {
                 const gNotesStartTimestamp: Fraction = gNotesPerVoice[0].sourceNote.getAbsoluteTimestamp();
 
                 // These 3 lines one render all "regular" notes:
-                const gnotes: { [voiceID: number]: GraphicalNote[]; } = staffEntry.graphicalNotes;
-                const vfnote: StaveNote = VexFlowConverter.StaveNote(gnotes[voiceId]);
-                staffEntry.vfNotes[voiceId] = vfnote;
+                // const gnotes: { [voiceID: number]: GraphicalNote[]; } = staffEntry.graphicalNotes;
+                // const vfnote: StaveNote = VexFlowConverter.StaveNote(gnotes[voiceId]);
+                // staffEntry.vfNotes[voiceId] = vfnote;
 
                 // find the voiceEntry end timestamp:
                 let gNotesEndTimestamp: Fraction = new Fraction();
@@ -408,9 +408,9 @@ export class VexFlowMeasure extends StaffMeasure {
                     // if this voice is new, check for a gap from measure start to the start of the current voice entry:
                     const gapFromMeasureStart: Fraction = Fraction.minus(gNotesStartTimestamp, this.parentSourceMeasure.AbsoluteTimestamp);
                     if (gapFromMeasureStart.RealValue > 0) {
-                        console.log("Ghost Found at start",  this)
+                        console.log("Ghost Found at start",  staffEntry.vfNotes[voiceId]);
                         const vfghost: Vex.Flow.GhostNote = VexFlowConverter.GhostNote(gapFromMeasureStart);
-                        // staffEntry.vfNotes[voiceId] = (vfghost as any);
+                        staffEntry.vfNotes[voiceId] = (vfghost as any);
                         // ToDo: fill the gap with a rest ghost note
                         // from this.parentSourceMeasure.AbsoluteTimestamp
                         // with length gapFromMeasureStart:
@@ -422,7 +422,7 @@ export class VexFlowMeasure extends StaffMeasure {
                     const restLength: Fraction = Fraction.minus(gNotesStartTimestamp, latestVoiceTimestamp);
 
                     if (restLength.RealValue > 0) {
-                        console.log("Ghost Found in between",  this)
+                        console.log("Ghost Found in between",  staffEntry.vfNotes[voiceId]);
                         // ToDo: fill the gap with a rest ghost note
                         // starting from latestVoiceTimestamp
                         // with length restLength:
@@ -446,7 +446,7 @@ export class VexFlowMeasure extends StaffMeasure {
                     // fill the gap with a rest ghost note
                     // starting from lastFraction
                     // with length restLength:
-                    console.log("Ghost Found at end",  this)
+                    console.log("Ghost Found at end",  this);
                 }
             }
         }
@@ -589,12 +589,13 @@ export class VexFlowMeasure extends StaffMeasure {
     }
 
     public staffMeasureCreatedCalculations(): void {
-        for (const graphicalStaffEntry of this.staffEntries) {
+        for (const graphicalStaffEntry of this.staffEntries as VexFlowStaffEntry[]) {
             // create vex flow Stave Notes:
             for (const gve of graphicalStaffEntry.graphicalVoiceEntries) {
                 (gve as VexFlowVoiceEntry).vfStaveNote = VexFlowConverter.StaveNote(gve.notes);
             }
         }
+        this.fillMissingRests();
 
         this.finalizeBeams();
         this.finalizeTuplets();

src/MusicalScore/Graphical/VexFlow/VexFlowStaffEntry.ts

@@ -23,8 +23,16 @@ export class VexFlowStaffEntry extends GraphicalStaffEntry {
             // This will let the tickable know how to calculate it's bounding box
             tickable.setStave(stave);
             // The middle of the tickable is also the OSMD BoundingBox center
-            const staveNote: Vex.Flow.StaveNote = (<Vex.Flow.StaveNote>tickable);
-            tickablePosition += staveNote.getNoteHeadEndX() - staveNote.getGlyphWidth() / 2;
+            if (tickable.getAttribute("type") === "StaveNote") {
+                // The middle of the tickable is also the OSMD BoundingBox center
+                const staveNote: Vex.Flow.StaveNote = tickable;
+                tickablePosition += staveNote.getNoteHeadEndX() - staveNote.getGlyphWidth() / 2;
+            } else {
+                console.log(tickable);
+                const ghostNote: Vex.Flow.GhostNote = tickable;
+                // That's basically the same as the StaveNote does.
+                tickablePosition = ghostNote.getAbsoluteX() + ghostNote.x_shift;
+            }
             numberOfValidTickables++;
         }
         tickablePosition = tickablePosition / numberOfValidTickables;