Implemented drawing ties in vexflow. Ties are visible, but still some bugs..

external/vexflow/vexflow.d.ts

@@ -1,136 +1,194 @@
 declare namespace Vex {
-  export module Flow {
-    const RESOLUTION: any;
+    export module Flow {
+        const RESOLUTION: any;
 
-    export class Formatter {
-      constructor(opts?: any);
+        export class Formatter {
+            constructor(opts?: any);
 
-      public hasMinTotalWidth: boolean;
-      public minTotalWidth: number;
-      public joinVoices(voices: Voice[]): void;
-      public format(voices: Voice[], width: number): void;
-      public preCalculateMinTotalWidth(voices: Voice[]): number;
-    }
+            public hasMinTotalWidth: boolean;
+            public minTotalWidth: number;
 
-    export class BoundingBox {
-      constructor(x: number, y: number, w: number, h: number);
+            public joinVoices(voices: Voice[]): void;
 
-      public mergeWith(bb: BoundingBox): BoundingBox;
-      public getX(): number;
-      public getY(): number;
-      public getW(): number;
-      public getH(): number;
-    }
+            public format(voices: Voice[], width: number): void;
 
-    export class Voice {
-      constructor(time: any);
-      public static Mode: any;
+            public preCalculateMinTotalWidth(voices: Voice[]): number;
+        }
 
-      public getBoundingBox(): BoundingBox;
-      public setStave(stave: Stave): Voice;
-      public addTickables(notes: StaveNote[]): Voice;
-      public addTickable(note: StaveNote): Voice;
-      public setMode(mode: any): Voice;
-      public draw(ctx: any, stave: Stave): void;
-    }
+        export class BoundingBox {
+            constructor(x: number, y: number, w: number, h: number);
 
-    export class StaveNote {
-      constructor(note_struct: any);
+            public mergeWith(bb: BoundingBox): BoundingBox;
 
-      public getNoteHeadBounds(): any;
-      public getNoteHeadBeginX(): number;
-      public getNoteHeadEndX(): number;
-      public addAccidental(index: number, accidental: Accidental): StaveNote;
-      public setStyle(style: any): void;
-    }
+            public getX(): number;
 
-    export class Stave {
-      constructor(x: number, y: number, width: number, options: any);
-
-      public setX(x: number): Stave;
-      public setY(y: number): Stave;
-      public getX(): number;
-      public addClef(clefSpec: string, size: any, annotation: any, position: any): void;
-      public setEndClef(clefSpec: string, size: any, annotation: any): void;
-      public getModifiers(): StaveModifier[];
-      public getYForGlyphs(): number;
-      public getWidth(): number;
-      public setWidth(width: number): Stave;
-      public getNoteStartX(): number;
-      public getNoteEndX(): number;
-      public setNoteStartX(x: number): Stave;
-      public setKeySignature(keySpec: any, cancelKeySpec: any, position: any): Stave;
-      public format(): void;
-      public getSpacingBetweenLines(): number;
-      public getNumLines(): number;
-      public getLineForY(y: number): number;
-      public getModifiers(pos: any, cat: any): Clef[]; // FIXME
-      public setContext(ctx: CanvasContext): Stave;
-      public addModifier(mod: any, pos: any): void;
-      public draw(): void;
-      public addTimeSignature(sig: string): void;
-    }
+            public getY(): number;
 
-    export class Modifier {
-      public static Position: any;
-      public getCategory(): string;
-      public getWidth(): number;
-      public getPadding(index: number): number;
-    }
+            public getW(): number;
 
-    export class StaveModifier extends Modifier {}
+            public getH(): number;
+        }
 
-    export class Clef extends StaveModifier {
-      constructor(type: any);
+        export class Voice {
+            constructor(time: any);
 
-      public static category: string;
-      public static types: { [type: string]: any; } ;
-      public glyph: any;
-      public x: number;
-      public stave: Stave;
+            public static Mode: any;
 
-      public getBoundingBox(): BoundingBox;
-      public setStave(stave: Stave): void;
-    }
+            public getBoundingBox(): BoundingBox;
 
-    export class Renderer {
-      constructor(canvas: HTMLCanvasElement, backend: any);
+            public setStave(stave: Stave): Voice;
 
-      public static Backends: any;
-      public resize(a: number, b: number): void;
-      public getContext(): CanvasContext;
-    }
+            public addTickables(notes: StaveNote[]): Voice;
 
-    export class TimeSignature {
-      constructor(timeSpec: string, customPadding?: any);
-    }
-    export class KeySignature {
-      constructor(keySpec: string, cancelKeySpec: string, alterKeySpec?: string);
-    }
+            public addTickable(note: StaveNote): Voice;
 
-    export class Accidental {
-      constructor(type: string);
-    }
+            public setMode(mode: any): Voice;
 
-    export class Beam {
-      constructor(notes: StaveNote[], auto_stem: boolean);
-      public setContext(ctx: CanvasContext): Beam;
-      public draw(): void;
-    }
+            public draw(ctx: any, stave: Stave): void;
+        }
 
-    export class CanvasContext {
-      public scale(x: number, y: number): CanvasContext;
-    }
+        export class StaveNote {
+            constructor(note_struct: any);
 
-    export class StaveConnector {
-      constructor(top: Stave, bottom: Stave);
-      public static type: any;
-      public setType(type: any): StaveConnector;
-      public setContext(ctx: CanvasContext): StaveConnector;
-      public draw(): void;
-    }
+            public getNoteHeadBounds(): any;
+
+            public getNoteHeadBeginX(): number;
+
+            public getNoteHeadEndX(): number;
+
+            public addAccidental(index: number, accidental: Accidental): StaveNote;
+
+            public setStyle(style: any): void;
+        }
+
+        export class StaveTie {
+            constructor(notes_struct: any);
+
+            public setContext(ctx: CanvasContext): StaveTie;
+
+            public draw(): void;
+        }
+
+        export class Stave {
+            constructor(x: number, y: number, width: number, options: any);
+
+            public setX(x: number): Stave;
+
+            public setY(y: number): Stave;
+
+            public getX(): number;
+
+            public addClef(clefSpec: string, size: any, annotation: any, position: any): void;
+
+            public setEndClef(clefSpec: string, size: any, annotation: any): void;
+
+            public getModifiers(): StaveModifier[];
+
+            public getYForGlyphs(): number;
+
+            public getWidth(): number;
+
+            public setWidth(width: number): Stave;
+
+            public getNoteStartX(): number;
+
+            public getNoteEndX(): number;
+
+            public setNoteStartX(x: number): Stave;
 
-  }
+            public setKeySignature(keySpec: any, cancelKeySpec: any, position: any): Stave;
+
+            public format(): void;
+
+            public getSpacingBetweenLines(): number;
+
+            public getNumLines(): number;
+
+            public getLineForY(y: number): number;
+
+            public getModifiers(pos: any, cat: any): Clef[]; // FIXME
+            public setContext(ctx: CanvasContext): Stave;
+
+            public addModifier(mod: any, pos: any): void;
+
+            public draw(): void;
+
+            public addTimeSignature(sig: string): void;
+        }
+
+        export class Modifier {
+            public static Position: any;
+
+            public getCategory(): string;
+
+            public getWidth(): number;
+
+            public getPadding(index: number): number;
+        }
+
+        export class StaveModifier extends Modifier {
+        }
+
+        export class Clef extends StaveModifier {
+            constructor(type: any);
+
+            public static category: string;
+            public static types: { [type: string]: any; };
+            public glyph: any;
+            public x: number;
+            public stave: Stave;
+
+            public getBoundingBox(): BoundingBox;
+
+            public setStave(stave: Stave): void;
+        }
+
+        export class Renderer {
+            constructor(canvas: HTMLCanvasElement, backend: any);
+
+            public static Backends: any;
+
+            public resize(a: number, b: number): void;
+
+            public getContext(): CanvasContext;
+        }
+
+        export class TimeSignature {
+            constructor(timeSpec: string, customPadding?: any);
+        }
+        export class KeySignature {
+            constructor(keySpec: string, cancelKeySpec: string, alterKeySpec?: string);
+        }
+
+        export class Accidental {
+            constructor(type: string);
+        }
+
+        export class Beam {
+            constructor(notes: StaveNote[], auto_stem: boolean);
+
+            public setContext(ctx: CanvasContext): Beam;
+
+            public draw(): void;
+        }
+
+        export class CanvasContext {
+            public scale(x: number, y: number): CanvasContext;
+        }
+
+        export class StaveConnector {
+            constructor(top: Stave, bottom: Stave);
+
+            public static type: any;
+
+            public setType(type: any): StaveConnector;
+
+            public setContext(ctx: CanvasContext): StaveConnector;
+
+            public draw(): void;
+        }
+
+    }
 }
 
 declare module "vexflow" {

src/MusicalScore/Graphical/GraphicalStaffEntry.ts

@@ -81,10 +81,8 @@ export abstract class GraphicalStaffEntry extends GraphicalObject {
             for (let idx2: number = 0, len2: number = graphicalNotes.length; idx2 < len2; ++idx2) {
                 let graphicalNote: GraphicalNote = graphicalNotes[idx2];
                 let note: Note = graphicalNote.sourceNote;
-                if (
-                    note.Pitch !== undefined && note.Pitch.FundamentalNote === tieNote.Pitch.FundamentalNote
-                    && note.Pitch.Octave === tieNote.Pitch.Octave && note.getAbsoluteTimestamp() === tieNote.getAbsoluteTimestamp()
-                ) {
+                if (note.Pitch !== undefined && note.Pitch.FundamentalNote === tieNote.Pitch.FundamentalNote
+                    && note.Pitch.Octave === tieNote.Pitch.Octave && note.getAbsoluteTimestamp().Equals(tieNote.getAbsoluteTimestamp())) {
                     return graphicalNote;
                 }
             }

src/MusicalScore/Graphical/VexFlow/VexFlowGraphicalNote.ts

@@ -25,7 +25,7 @@ export class VexFlowGraphicalNote extends GraphicalNote {
     // The pitch of this note as given by VexFlowConverter.pitch
     public vfpitch: [string, string, ClefInstruction];
     // The corresponding VexFlow StaveNote (plus its index in the chord)
-    private vfnote: [Vex.Flow.StaveNote, number];
+    public vfnote: [Vex.Flow.StaveNote, number];
     // The current clef
     private clef: ClefInstruction;
 

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -30,6 +30,8 @@ export class VexFlowMeasure extends StaffMeasure {
     public vfVoices: { [voiceID: number]: Vex.Flow.Voice; } = {};
     // Call this function (if present) to x-format all the voices in the measure
     public formatVoices: (width: number) => void;
+    // The VexFlow Ties in the measure
+    public vfTies: Vex.Flow.StaveTie[] = [];
 
     // The VexFlow Stave (one measure in one line)
     private stave: Vex.Flow.Stave;
@@ -199,6 +201,12 @@ export class VexFlowMeasure extends StaffMeasure {
                 }
             }
         }
+
+        // Draw ties
+        for (let tie of this.vfTies) {
+            tie.setContext(ctx).draw();
+        }
+
         // Draw vertical lines
         for (let connector of this.connectors) {
             connector.setContext(ctx).draw();

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -28,6 +28,7 @@ import {VexFlowTextMeasurer} from "./VexFlowTextMeasurer";
 import Vex = require("vexflow");
 import {Logging} from "../../../Common/Logging";
 import {unitInPixels} from "./VexFlowMusicSheetDrawer";
+import {VexFlowGraphicalNote} from "./VexFlowGraphicalNote";
 
 export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
     constructor() {
@@ -172,7 +173,29 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
     }
 
     protected layoutGraphicalTie(tie: GraphicalTie, tieIsAtSystemBreak: boolean): void {
-        return;
+        let startNote: VexFlowGraphicalNote = (tie.StartNote as VexFlowGraphicalNote);
+        let vfStartNote: Vex.Flow.StaveNote = undefined;
+        if (startNote !== undefined) {
+            vfStartNote = startNote.vfnote[0];
+            let measure: VexFlowMeasure = (startNote.parentStaffEntry.parentMeasure as VexFlowMeasure);
+            measure.vfTies.push()
+        }
+
+        let endNote: VexFlowGraphicalNote = (tie.EndNote as VexFlowGraphicalNote);
+        let vfEndNote: Vex.Flow.StaveNote = undefined;
+        if (endNote !== undefined) {
+            vfEndNote = endNote.vfnote[0];
+        }
+        let vfTie = new Vex.Flow.StaveTie({
+            first_note: vfStartNote,
+            last_note : vfEndNote
+        });
+        let tieAnchorNote: VexFlowGraphicalNote = startNote;
+        if (startNote !== undefined) {
+            tieAnchorNote = endNote;
+        }
+        let measure: VexFlowMeasure = (tieAnchorNote.parentStaffEntry.parentMeasure as VexFlowMeasure);
+        measure.vfTies.push(vfTie);
     }
 
     protected calculateSingleStaffLineLyricsPosition(staffLine: StaffLine, lyricVersesNumber: number[]): void {