Implemented showing octavated clefs.

Fixed note octave for octavated clefs.

external/vexflow/vexflow.d.ts

@@ -58,6 +58,8 @@ declare namespace Vex {
 
             public addAccidental(index: number, accidental: Accidental): StaveNote;
 
+            public addAnnotation(index: number, annotation: Annotation): StaveNote;
+
             public setStyle(style: any): void;
 
             public addDotToAll(): void;
@@ -132,7 +134,7 @@ declare namespace Vex {
         }
 
         export class Clef extends StaveModifier {
-            constructor(type: any);
+            constructor(type: string, size: number, annotation: string);
 
             public static category: string;
             public static types: { [type: string]: any; };
@@ -166,6 +168,10 @@ declare namespace Vex {
             constructor(type: string);
         }
 
+        export class Annotation {
+            constructor(type: string);
+        }
+
         export class Beam {
             constructor(notes: StaveNote[], auto_stem: boolean);
 

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -70,7 +70,7 @@ export class VexFlowConverter {
     public static pitch(pitch: Pitch, clef: ClefInstruction): [string, string, ClefInstruction] {
         let fund: string = NoteEnum[pitch.FundamentalNote].toLowerCase();
         // The octave seems to need a shift of three FIXME?
-        let octave: number = pitch.Octave + clef.OctaveOffset + 3;
+        let octave: number = pitch.Octave - clef.OctaveOffset + 3;
         let acc: string = VexFlowConverter.accidental(pitch.Accidental);
         return [fund + "n/" + octave, acc, clef];
     }
@@ -113,7 +113,7 @@ export class VexFlowConverter {
         let accidentals: string[] = [];
         let frac: Fraction = notes[0].graphicalNoteLength;
         let duration: string = VexFlowConverter.duration(frac);
-        let vfclef: string;
+        let vfClefType: string = undefined;
         let numDots: number = 0;
         for (let note of notes) {
             let res: [string, string, ClefInstruction] = (note as VexFlowGraphicalNote).vfpitch;
@@ -124,8 +124,9 @@ export class VexFlowConverter {
             }
             keys.push(res[0]);
             accidentals.push(res[1]);
-            if (!vfclef) {
-                vfclef = VexFlowConverter.Clef(res[2]);
+            if (!vfClefType) {
+                let vfClef: {type: string, annotation: string} = VexFlowConverter.Clef(res[2]);
+                vfClefType = vfClef.type;
             }
             if (numDots < note.numberOfDots) {
                 numDots = note.numberOfDots;
@@ -134,9 +135,10 @@ export class VexFlowConverter {
         for (let i: number = 0, len: number = numDots; i < len; ++i) {
             duration += "d";
         }
+
         let vfnote: Vex.Flow.StaveNote = new Vex.Flow.StaveNote({
             auto_stem: true,
-            clef: vfclef,
+            clef: vfClefType,
             duration: duration,
             duration_override: {
                 denominator: frac.Denominator,
@@ -144,6 +146,7 @@ export class VexFlowConverter {
             },
             keys: keys,
         });
+
         for (let i: number = 0, len: number = notes.length; i < len; i += 1) {
             (notes[i] as VexFlowGraphicalNote).setIndex(vfnote, i);
             if (accidentals[i]) {
@@ -153,6 +156,7 @@ export class VexFlowConverter {
         for (let i: number = 0, len: number = numDots; i < len; ++i) {
             vfnote.addDotToAll();
         }
+
         return vfnote;
     }
 
@@ -162,8 +166,10 @@ export class VexFlowConverter {
      * @returns {string}
      * @constructor
      */
-    public static Clef(clef: ClefInstruction): string {
+    public static Clef(clef: ClefInstruction): {type: string, annotation: string} {
         let type: string;
+        let annotation: string = undefined;
+
         switch (clef.ClefType) {
             case ClefEnum.G:
                 type = "treble";
@@ -182,7 +188,17 @@ export class VexFlowConverter {
                 break;
             default:
         }
-        return type;
+
+        switch (clef.OctaveOffset) {
+            case 1:
+                annotation = "8va";
+                break;
+            case -1:
+                annotation = "8vb";
+                break;
+            default:
+        }
+        return {type, annotation};
     }
 
     /**

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -100,8 +100,8 @@ export class VexFlowMeasure extends StaffMeasure {
      */
     public addClefAtBegin(clef: ClefInstruction): void {
         this.octaveOffset = clef.OctaveOffset;
-        let vfclef: string = VexFlowConverter.Clef(clef);
-        this.stave.addClef(vfclef, undefined, undefined, Vex.Flow.Modifier.Position.BEGIN);
+        let vfclef: {type: string, annotation: string} = VexFlowConverter.Clef(clef);
+        this.stave.addClef(vfclef.type, undefined, vfclef.annotation, Vex.Flow.Modifier.Position.BEGIN);
         this.updateInstructionWidth();
     }
 
@@ -141,8 +141,8 @@ export class VexFlowMeasure extends StaffMeasure {
      * @param clef
      */
     public addClefAtEnd(clef: ClefInstruction): void {
-        let vfclef: string = VexFlowConverter.Clef(clef);
-        this.stave.setEndClef(vfclef, undefined, undefined);
+        let vfclef: {type: string, annotation: string} = VexFlowConverter.Clef(clef);
+        this.stave.setEndClef(vfclef.type, undefined, vfclef.annotation);
         this.updateInstructionWidth();
     }