style(Use vexflow types): Inlucded vexflow types

Also removed the old files and updated all classes to the changes (if any)

#473 #105

external/vexflow/vexflow.d.ts

@@ -1,429 +0,0 @@
-
-
-declare namespace Vex {
-
-    export module Flow {
-        const RESOLUTION: any;
-        const DEFAULT_NOTATION_FONT_SCALE: number;
-
-        export class Formatter {
-            constructor();
-
-            public hasMinTotalWidth: boolean;
-            public minTotalWidth: number;
-
-            public joinVoices(voices: Voice[]): void;
-
-            public format(voices: Voice[], width: number, options?: any): void;
-
-            public preCalculateMinTotalWidth(voices: Voice[]): number;
-        }
-
-        export class BoundingBox {
-            constructor(x: number, y: number, w: number, h: number);
-
-            public mergeWith(bb: BoundingBox): BoundingBox;
-
-            public x: number;
-
-            public y: number;
-
-            public w: number;
-
-            public h: number;
-
-            public draw(ctx: Vex.Flow.RenderContext): void;
-        }
-
-        export class Tickable {
-            public reset(): void;
-
-            public setStave(stave: Stave);
-
-            public getBoundingBox(): BoundingBox;
-
-            public getAttribute(arg: string): string;
-        }
-
-        export class Voice {
-            constructor(time: any);
-
-            public static Mode: any;
-
-            public context: RenderContext;
-
-            public tickables: Tickable[];
-
-            public getBoundingBox(): BoundingBox;
-
-            public setStave(stave: Stave): Voice;
-
-            public addTickables(tickables: Tickable[]): Voice;
-
-            public addTickable(tickable: Tickable): Voice;
-
-            public setMode(mode: any): Voice;
-
-            public draw(ctx: any, stave: Stave): void;
-        }
-
-        export class Note extends Tickable {
-            public addStroke(index: number, stroke: Stroke): void;
-        }
-
-        class NoteHead extends Note {
-            constructor(head_options: Object);
-            static CATEGORY(): string;
-        }
-
-        export class TextBracket {
-            constructor(note_struct: any);
-            
-            public setContext(ctx: RenderContext): TextBracket;
-
-            public draw(): void;
-
-        }
-
-        export class TextNote extends Note {
-            constructor(note_struct: any);
-            
-            public setContext(ctx: RenderContext): TextBracket;
-
-            public draw(): void;
-        }
-
-        export class Stem {
-            public static UP: number;
-            public static DOWN: number;
-        }
-        export class StemmableNote extends Note {
-            public getStemDirection(): number;
-            public setStemDirection(direction: number): StemmableNote;
-            public x_shift: number;
-            public getAbsoluteX(): number;
-            public addModifier(index: number, modifier: Modifier): StemmableNote;
-            public preFormatted: boolean;
-        }
-
-        export class GhostNote extends StemmableNote {
-            constructor(note_struct: any);
-            public setStave(stave): void;
-        }
-
-        export class StaveNote extends StemmableNote {
-            constructor(note_struct: any);
-
-            public getNoteHeadBounds(): any;
-
-            public getNoteHeadBeginX(): number;
-
-            public getNoteHeadEndX(): number;
-
-            public getGlyphWidth(): number;
-
-            public addAccidental(index: number, accidental: Accidental): StaveNote;
-
-            public addAnnotation(index: number, annotation: Annotation): StaveNote;
-
-            public addDotToAll(): void;
-
-            public addModifier(index: number, modifier: Modifier): StaveNote;
-
-            public setStyle(style: any): void;
-            public setStemStyle(style: any): void;
-            public setFlagStyle(style: any): void;
-
-            public getKeyProps(): Object[];
-
-            // temp solution until noteheadStyles PR is through
-            public note_heads: any; // NoteHead[]; 
-            public flag: Element;
-            public beam: Beam;
-        }
-
-        export class GraceNote extends StaveNote {
-            static SCALE: number;
-            static LEDGER_LINE_OFFSET: number;
-            constructor(note_struct: any);
-        }
-
-        export class GraceNoteGroup extends Modifier {
-            constructor(grace_notes: GraceNote[], show_slur: boolean);
-            public beamNotes(): GraceNoteGroup;
-        }
-
-        export class StaveTie {
-            constructor(notes_struct: any);
-
-            public setContext(ctx: RenderContext): 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 setBegBarType(type: any): Stave;
-
-            public setEndBarType(type: any): Stave;
-
-            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 getModifierXShift(): number;
-
-            public getNoteEndX(): number;
-
-            public setNoteStartX(x: number): Stave;
-
-            public setKeySignature(keySpec: any, cancelKeySpec: any, position: any): Stave;
-
-            public setText(text: string, position: number, options: any): void;
-
-            public format(): void;
-
-            public getSpacingBetweenLines(): number;
-
-            public getNumLines(): number;
-
-            public getLineForY(y: number): number;
-
-            public getYForLine(y: number): number;
-
-            public getModifiers(pos: any, cat: any): Clef[]; // FIXME
-
-            public setContext(ctx: RenderContext): Stave;
-
-            public addModifier(mod: any, pos: any): void;
-
-            public draw(): void;
-
-            public addTimeSignature(sig: string): void;
-
-            public setVoltaType(type: number, number_t: number, y: number): void;
-
-            public setTempo(tempo: Object, y: number): Stave;
-
-            public setShiftX(x: number): Stave;
-        }
-
-        export class StaveTempo extends StaveModifier { // needs Vexflow PR to be exported/usable
-            constructor(tempo: Object, x: number, shift_y: number);
-        }
-
-        export class Volta extends StaveModifier {
-            public static type: any;
-        }
-
-        export class Modifier {
-            public static Position: any;
-
-            public getCategory(): string;
-
-            public getWidth(): number;
-
-            public getPadding(index: number): number;
-
-            public getPosition(): number;
-
-            public setPosition(position: number): Modifier;
-
-            public setIndex(index: number): void;
-        }
-
-        export class FretHandFinger extends Modifier {
-            constructor(finger: string);
-        }
-
-        export class StringNumber extends Modifier {
-            constructor(string: string);
-            setOffsetY(value: number);
-        }
-        
-        export class Stroke extends Modifier {
-            constructor(type: number);
-            public static Type: any; // unreliable values, use Arpeggio.ArpeggioType instead
-        }
-
-        export class NoteSubGroup extends Modifier {
-            constructor(notes: Object);
-        }
-
-        export class StaveModifier extends Modifier {
-            public getPosition(): number;
-
-        }
-
-        export class Repetition extends StaveModifier {
-            constructor(type: any, x: number, y_shift: number);
-        }
-
-        export class Clef extends StaveModifier {
-            constructor(type: string, size: string, annotation: string);
-
-            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 ClefNote  extends Note {
-            constructor(type: string, size: string, annotation: string);
-
-            public type: string;
-        }
-
-        export class Renderer {
-            constructor(canvas: HTMLElement, backend: number);
-
-            public static Backends: {
-                CANVAS: number,
-                RAPHAEL: number,
-                SVG: number,
-                VML: number
-            };
-
-            public resize(a: number, b: number): void;
-
-            public getContext(): CanvasContext | SVGContext;
-        }
-
-        export class TimeSignature extends StaveModifier {
-            constructor(timeSpec: string, customPadding?: any);
-        }
-        export class KeySignature extends StaveModifier {
-            constructor(keySpec: string, cancelKeySpec: string, alterKeySpec?: string);
-        }
-
-        export class Accidental {
-            constructor(type: string);
-        }
-
-        export class Annotation {
-            constructor(type: string);
-        }
-
-        export class Articulation extends Modifier {
-            constructor(type: string);
-        }
-
-        export class Ornament extends Modifier {
-            constructor(type: string);
-            setDelayed(delayed: boolean): void;
-            setUpperAccidental(acc: string): void;
-            setLowerAccidental(acc: string): void;
-        }
-
-        export class Tremolo extends Modifier {
-            constructor(numberOfSlashes: number);
-        }
-        
-        export class Beam {
-            constructor(notes: StaveNote[], auto_stem: boolean);
-
-            public setContext(ctx: RenderContext): Beam;
-            public draw(): void;
-            public static generateBeams(notes: Vex.Flow.StemmableNote[], optionsObject?: any): Beam[];
-            public setStyle(style: any): void;
-        }
-
-        export class Fraction { // Vex.Flow.Fraction, used for generateBeams
-            constructor(nominator: number, denominator: number);
-        }
-
-        export class Tuplet {
-            constructor(notes: StaveNote[], options: any);
-
-            public setContext(ctx: RenderContext): Tuplet;
-
-            public draw(): void;
-        }
-
-        // interface for class Curve to draw slurs. The options are set to undefined
-        export class Curve {
-            constructor(from: StemmableNote, to: StemmableNote, options: any);
-            
-            public setContext(ctx: RenderContext): Curve;
-
-            public draw(): void;
-        }
-
-        export class RenderContext {
-            public scale(x: number, y: number): RenderContext;
-            public fillRect(x: number, y: number, width: number, height: number): RenderContext
-            public fillText(text: string, x: number, y: number): RenderContext;
-            public setFont(family: string, size: number, weight: string): RenderContext;
-            public beginPath(): RenderContext;
-            public moveTo(x, y): RenderContext;
-            public lineTo(x, y): RenderContext;
-            public bezierCurveTo(cp1_x: number, cp1_y: number, cp2_x: number, cp2_y: number, end_x: number, end_y: number): RenderContext;
-            public closePath(): RenderContext;
-            public stroke(): RenderContext;
-            public fill(): RenderContext;
-            public save(): RenderContext;
-            public restore(): RenderContext;
-            public lineWidth: number;
-        }
-
-        export class CanvasContext extends RenderContext {
-            public vexFlowCanvasContext: CanvasRenderingContext2D;
-        }
-
-        export class SVGContext extends RenderContext {
-            public svg: SVGElement;
-            public attributes: any;
-            public state: any;
-        }
-
-        export class StaveConnector {
-            constructor(top: Stave, bottom: Stave);
-
-            public static type: any;
-
-            public setType(type: any): StaveConnector;
-
-            public setContext(ctx: RenderContext): StaveConnector;
-
-            public setXShift(shift: number): StaveConnector;
-
-            public top_stave: Stave;
-
-            public bottom_stave: Stave;
-
-            public thickness: number;
-
-            public width: number;
-
-            public x_shift: number;
-
-            public draw(): void;
-        }
-    }
-}
-
-declare module "vexflow" {
-    export = Vex;
-}

package.json

@@ -52,6 +52,7 @@
     "jszip": "^3.0.0",
     "loglevel": "^1.5.0",
     "typescript-collections": "^1.1.2",
+    "@types/vexflow": "^1.2.32",
     "vexflow": "^1.2.87"
   },
   "devDependencies": {

src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts

@@ -22,7 +22,6 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
         container.appendChild(this.inner);
         this.renderer = new Vex.Flow.Renderer(this.canvas, this.getBackendType());
         this.ctx = <Vex.Flow.CanvasContext>this.renderer.getContext();
-        this.canvasRenderingCtx = this.ctx.vexFlowCanvasContext;
     }
 
     /**
@@ -36,7 +35,6 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
         (this.canvas as any).height = height;
         this.renderer = new Vex.Flow.Renderer(this.canvas, this.getBackendType());
         this.ctx = <Vex.Flow.CanvasContext>this.renderer.getContext();
-        this.canvasRenderingCtx = this.ctx.vexFlowCanvasContext;
     }
 
     public getContext(): Vex.Flow.CanvasContext {
@@ -52,40 +50,40 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
     }
 
     public translate(x: number, y: number): void {
-        this.canvasRenderingCtx.translate(x, y);
+        this.CanvasRenderingCtx.translate(x, y);
     }
     public renderText(fontHeight: number, fontStyle: FontStyles, font: Fonts, text: string,
                       heightInPixel: number, screenPosition: PointF2D, color: string = undefined): void  {
-        const old: string = this.canvasRenderingCtx.font;
-        this.canvasRenderingCtx.save();
-        this.canvasRenderingCtx.font = VexFlowConverter.font(
+        const old: string = this.CanvasRenderingCtx.font;
+        this.CanvasRenderingCtx.save();
+        this.CanvasRenderingCtx.font = VexFlowConverter.font(
             fontHeight,
             fontStyle,
             font
         );
-        this.canvasRenderingCtx.fillStyle = color;
-        this.canvasRenderingCtx.strokeStyle = color;
-        this.canvasRenderingCtx.fillText(text, screenPosition.x, screenPosition.y + heightInPixel);
-        this.canvasRenderingCtx.restore();
-        this.canvasRenderingCtx.font = old;
+        this.CanvasRenderingCtx.fillStyle = color;
+        this.CanvasRenderingCtx.strokeStyle = color;
+        this.CanvasRenderingCtx.fillText(text, screenPosition.x, screenPosition.y + heightInPixel);
+        this.CanvasRenderingCtx.restore();
+        this.CanvasRenderingCtx.font = old;
     }
     public renderRectangle(rectangle: RectangleF2D, styleId: number, alpha: number = 1): void {
-        const old: string | CanvasGradient | CanvasPattern = this.canvasRenderingCtx.fillStyle;
-        this.canvasRenderingCtx.fillStyle = VexFlowConverter.style(styleId);
-        this.canvasRenderingCtx.globalAlpha = alpha;
+        const old: string | CanvasGradient | CanvasPattern = this.CanvasRenderingCtx.fillStyle;
+        this.CanvasRenderingCtx.fillStyle = VexFlowConverter.style(styleId);
+        this.CanvasRenderingCtx.globalAlpha = alpha;
         this.ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
-        this.canvasRenderingCtx.fillStyle = old;
-        this.canvasRenderingCtx.globalAlpha = 1;
+        this.CanvasRenderingCtx.fillStyle = old;
+        this.CanvasRenderingCtx.globalAlpha = 1;
     }
 
     public renderLine(start: PointF2D, stop: PointF2D, color: string = "#FF0000FF", lineWidth: number= 2): void {
-        const oldStyle: string | CanvasGradient | CanvasPattern = this.canvasRenderingCtx.strokeStyle;
-        this.canvasRenderingCtx.strokeStyle = color;
-        this.canvasRenderingCtx.beginPath();
-        this.canvasRenderingCtx.moveTo(start.x, start.y);
-        this.canvasRenderingCtx.lineTo(stop.x, stop.y);
-        this.canvasRenderingCtx.stroke();
-        this.canvasRenderingCtx.strokeStyle = oldStyle;
+        const oldStyle: string | CanvasGradient | CanvasPattern = this.CanvasRenderingCtx.strokeStyle;
+        this.CanvasRenderingCtx.strokeStyle = color;
+        this.CanvasRenderingCtx.beginPath();
+        this.CanvasRenderingCtx.moveTo(start.x, start.y);
+        this.CanvasRenderingCtx.lineTo(stop.x, stop.y);
+        this.CanvasRenderingCtx.stroke();
+        this.CanvasRenderingCtx.strokeStyle = oldStyle;
     }
 
     public renderCurve(points: PointF2D[]): void {
@@ -115,5 +113,11 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
     }
 
     private ctx: Vex.Flow.CanvasContext;
-    private canvasRenderingCtx: CanvasRenderingContext2D;
+
+    public get CanvasRenderingCtx(): CanvasRenderingContext2D {
+        // This clusterfuck is only there to counter act my favorite vexflow line:
+        // ctx.vexFlowCanvasContext = ctx;
+        // No idea why they are saving the context but we wrap the types here
+        return <CanvasRenderingContext2D>(ctx as any).vexFlowCanvasContext;
+    }
 }

src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts

@@ -28,7 +28,7 @@ export abstract class VexFlowBackend {
     return this.renderer;
   }
 
-  public abstract getContext(): Vex.Flow.RenderContext;
+  public abstract getContext(): Vex.IRenderContext;
 
   // public abstract setWidth(width: number): void;
   // public abstract setHeight(height: number): void;

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -24,6 +24,7 @@ import { Notehead, NoteHeadShape } from "../../VoiceData/Notehead";
 import { unitInPixels } from "./VexFlowMusicSheetDrawer";
 import { EngravingRules } from "../EngravingRules";
 import { Note } from "../..";
+import StaveNote = Vex.Flow.StaveNote;
 
 /**
  * Helper class, which contains static methods which actually convert
@@ -235,7 +236,7 @@ export class VexFlowConverter {
 
         let vfnote: Vex.Flow.StaveNote;
 
-        const vfnoteStruct: Object = {
+        const vfnoteStruct: any = {
             align_center: alignCenter,
             auto_stem: true,
             clef: vfClefType,
@@ -246,8 +247,8 @@ export class VexFlowConverter {
 
         const firstNote: Note = gve.notes[0].sourceNote;
         if (firstNote.IsCueNote) {
-            (<any>vfnoteStruct).glyph_font_scale = Vex.Flow.DEFAULT_NOTATION_FONT_SCALE * Vex.Flow.GraceNote.SCALE;
-            (<any>vfnoteStruct).stroke_px = Vex.Flow.GraceNote.LEDGER_LINE_OFFSET;
+            vfnoteStruct.glyph_font_scale = Vex.Flow.DEFAULT_NOTATION_FONT_SCALE * Vex.Flow.GraceNote.SCALE;
+            vfnoteStruct.stroke_px = Vex.Flow.GraceNote.LEDGER_LINE_OFFSET;
         }
 
         if (gve.parentVoiceEntry.IsGrace || gve.notes[0].sourceNote.IsCueNote) {
@@ -390,7 +391,7 @@ export class VexFlowConverter {
             }
             if (vfArt !== undefined) {
                 vfArt.setPosition(vfArtPosition);
-                vfnote.addModifier(0, vfArt);
+                (vfnote as StaveNote).addModifier(0, vfArt);
             }
         }
     }
@@ -451,7 +452,7 @@ export class VexFlowConverter {
                 vfOrna.setUpperAccidental(Pitch.accidentalVexflow(oContainer.AccidentalAbove));
             }
             vfOrna.setPosition(vfPosition);
-            vfnote.addModifier(0, vfOrna);
+            (vfnote as StaveNote).addModifier(0, vfOrna);
         }
     }
 
@@ -703,28 +704,4 @@ export class VexFlowConverter {
     }
 }
 
-export enum VexFlowRepetitionType {
-    NONE = 1,         // no coda or segno
-    CODA_LEFT = 2,    // coda at beginning of stave
-    CODA_RIGHT = 3,   // coda at end of stave
-    SEGNO_LEFT = 4,   // segno at beginning of stave
-    SEGNO_RIGHT = 5,  // segno at end of stave
-    DC = 6,           // D.C. at end of stave
-    DC_AL_CODA = 7,   // D.C. al coda at end of stave
-    DC_AL_FINE = 8,   // D.C. al Fine end of stave
-    DS = 9,           // D.S. at end of stave
-    DS_AL_CODA = 10,  // D.S. al coda at end of stave
-    DS_AL_FINE = 11,  // D.S. al Fine at end of stave
-    FINE = 12,        // Fine at end of stave
-}
-
-export enum VexFlowBarlineType {
-    SINGLE = 1,
-    DOUBLE = 2,
-    END = 3,
-    REPEAT_BEGIN = 4,
-    REPEAT_END = 5,
-    REPEAT_BOTH = 6,
-    NONE = 7,
-}
 

src/MusicalScore/Graphical/VexFlow/VexFlowInstrumentBracket.ts

@@ -24,7 +24,7 @@ export class VexFlowInstrumentBracket extends GraphicalObject {
      * Render the bracket using the given backend
      * @param ctx Render Vexflow context
      */
-    public draw(ctx: Vex.Flow.RenderContext): void {
+    public draw(ctx: Vex.IRenderContext): void {
         // Draw vexflow brace. This sets the positions inside the connector.
         this.vexflowConnector.setContext(ctx).draw();
         // Set bounding box

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -7,7 +7,7 @@ import {SystemLinesEnum} from "../SystemLinesEnum";
 import {ClefInstruction} from "../../VoiceData/Instructions/ClefInstruction";
 import {KeyInstruction} from "../../VoiceData/Instructions/KeyInstruction";
 import {RhythmInstruction} from "../../VoiceData/Instructions/RhythmInstruction";
-import {VexFlowConverter, VexFlowRepetitionType, VexFlowBarlineType} from "./VexFlowConverter";
+import {VexFlowConverter} from "./VexFlowConverter";
 import {VexFlowStaffEntry} from "./VexFlowStaffEntry";
 import {Beam} from "../../VoiceData/Beam";
 import {GraphicalNote} from "../GraphicalNote";
@@ -31,7 +31,6 @@ import {EngravingRules} from "../EngravingRules";
 import {OrnamentContainer} from "../../VoiceData/OrnamentContainer";
 import {TechnicalInstruction} from "../../VoiceData/Instructions/TechnicalInstruction";
 import {PlacementEnum} from "../../VoiceData/Expressions/AbstractExpression";
-import {ArpeggioType} from "../../VoiceData/Arpeggio";
 import {VexFlowGraphicalNote} from "./VexFlowGraphicalNote";
 import {AutoBeamOptions} from "../../../OpenSheetMusicDisplay/OSMDOptions";
 
@@ -130,7 +129,7 @@ export class VexFlowMeasure extends GraphicalMeasure {
     public addClefAtBegin(clef: ClefInstruction): void {
         this.octaveOffset = clef.OctaveOffset;
         const vfclef: { type: string, size: string, annotation: string } = VexFlowConverter.Clef(clef, "default");
-        this.stave.addClef(vfclef.type, vfclef.size, vfclef.annotation, Vex.Flow.Modifier.Position.BEGIN);
+        this.stave.addClef(vfclef.type, vfclef.size, vfclef.annotation, Vex.Flow.StaveModifier.Position.BEGIN);
         this.updateInstructionWidth();
     }
 
@@ -159,7 +158,7 @@ export class VexFlowMeasure extends GraphicalMeasure {
         const timeSig: Vex.Flow.TimeSignature = VexFlowConverter.TimeSignature(rhythm);
         this.stave.addModifier(
             timeSig,
-            Vex.Flow.Modifier.Position.BEGIN
+            Vex.Flow.StaveModifier.Position.BEGIN
         );
         this.updateInstructionWidth();
     }
@@ -180,7 +179,7 @@ export class VexFlowMeasure extends GraphicalMeasure {
             case SystemLinePosition.MeasureBegin:
                 switch (lineType) {
                     case SystemLinesEnum.BoldThinDots:
-                        this.stave.setBegBarType(VexFlowBarlineType.REPEAT_BEGIN);
+                        this.stave.setBegBarType(Vex.Flow.Barline.type.REPEAT_BEGIN);
                         break;
                     default:
                         break;
@@ -189,16 +188,16 @@ export class VexFlowMeasure extends GraphicalMeasure {
             case SystemLinePosition.MeasureEnd:
                 switch (lineType) {
                     case SystemLinesEnum.DotsBoldBoldDots:
-                        this.stave.setEndBarType(VexFlowBarlineType.REPEAT_BOTH);
+                        this.stave.setEndBarType(Vex.Flow.Barline.type.REPEAT_BOTH);
                         break;
                     case SystemLinesEnum.DotsThinBold:
-                        this.stave.setEndBarType(VexFlowBarlineType.REPEAT_END);
+                        this.stave.setEndBarType(Vex.Flow.Barline.type.REPEAT_END);
                         break;
                     case SystemLinesEnum.DoubleThin:
-                        this.stave.setEndBarType(VexFlowBarlineType.DOUBLE);
+                        this.stave.setEndBarType(Vex.Flow.Barline.type.DOUBLE);
                         break;
                     case SystemLinesEnum.ThinBold:
-                        this.stave.setEndBarType(VexFlowBarlineType.END);
+                        this.stave.setEndBarType(Vex.Flow.Barline.type.END);
                         break;
                     default:
                         break;
@@ -227,42 +226,42 @@ export class VexFlowMeasure extends GraphicalMeasure {
     }
 
     public addWordRepetition(repetitionInstruction: RepetitionInstruction): void {
-        let instruction: VexFlowRepetitionType = undefined;
-        let position: any = Vex.Flow.Modifier.Position.END;
+        let instruction: Vex.Flow.Repetition.type = undefined;
+        let position: any = Vex.Flow.StaveModifier.Position.END;
         switch (repetitionInstruction.type) {
           case RepetitionInstructionEnum.Segno:
             // create Segno Symbol:
-            instruction = VexFlowRepetitionType.SEGNO_LEFT;
-            position = Vex.Flow.Modifier.Position.BEGIN;
+            instruction = Vex.Flow.Repetition.type.SEGNO_LEFT;
+            position = Vex.Flow.StaveModifier.Position.BEGIN;
             break;
           case RepetitionInstructionEnum.Coda:
             // create Coda Symbol:
-            instruction = VexFlowRepetitionType.CODA_LEFT;
-            position = Vex.Flow.Modifier.Position.BEGIN;
+            instruction = Vex.Flow.Repetition.type.CODA_LEFT;
+            position = Vex.Flow.StaveModifier.Position.BEGIN;
             break;
           case RepetitionInstructionEnum.DaCapo:
-            instruction = VexFlowRepetitionType.DC;
+            instruction = Vex.Flow.Repetition.type.DC;
             break;
           case RepetitionInstructionEnum.DalSegno:
-            instruction = VexFlowRepetitionType.DS;
+            instruction = Vex.Flow.Repetition.type.DS;
             break;
           case RepetitionInstructionEnum.Fine:
-            instruction = VexFlowRepetitionType.FINE;
+            instruction = Vex.Flow.Repetition.type.FINE;
             break;
           case RepetitionInstructionEnum.ToCoda:
             //instruction = "To Coda";
             break;
           case RepetitionInstructionEnum.DaCapoAlFine:
-            instruction = VexFlowRepetitionType.DC_AL_FINE;
+            instruction = Vex.Flow.Repetition.type.DC_AL_FINE;
             break;
           case RepetitionInstructionEnum.DaCapoAlCoda:
-            instruction = VexFlowRepetitionType.DC_AL_CODA;
+            instruction = Vex.Flow.Repetition.type.DC_AL_CODA;
             break;
           case RepetitionInstructionEnum.DalSegnoAlFine:
-            instruction = VexFlowRepetitionType.DS_AL_FINE;
+            instruction = Vex.Flow.Repetition.type.DS_AL_FINE;
             break;
           case RepetitionInstructionEnum.DalSegnoAlCoda:
-            instruction = VexFlowRepetitionType.DS_AL_CODA;
+            instruction = Vex.Flow.Repetition.type.DS_AL_CODA;
             break;
           default:
             break;
@@ -327,7 +326,7 @@ export class VexFlowMeasure extends GraphicalMeasure {
      * Draw this measure on a VexFlow CanvasContext
      * @param ctx
      */
-    public draw(ctx: Vex.Flow.RenderContext): void {
+    public draw(ctx: Vex.IRenderContext): void {
 
         // Draw stave lines
         this.stave.setContext(ctx).draw();
@@ -785,7 +784,7 @@ export class VexFlowMeasure extends GraphicalMeasure {
                         }
                     }
                     const graceNoteGroup: Vex.Flow.GraceNoteGroup = new Vex.Flow.GraceNoteGroup(graceNotes, graceSlur);
-                    (gve as VexFlowVoiceEntry).vfStaveNote.addModifier(0, graceNoteGroup);
+                    ((gve as VexFlowVoiceEntry).vfStaveNote as StaveNote).addModifier(0, graceNoteGroup);
                     graceGVoiceEntriesBefore = [];
                 }
             }
@@ -839,7 +838,8 @@ export class VexFlowMeasure extends GraphicalMeasure {
                     if (vfse && vfse.vfClefBefore !== undefined) {
                         // add clef as NoteSubGroup so that we get modifier layouting
                         const clefModifier: NoteSubGroup = new NoteSubGroup( [vfse.vfClefBefore] );
-                        vexFlowVoiceEntry.vfStaveNote.addModifier(0, clefModifier);
+                        // The cast is necesary because...vexflow -> see types
+                        (vexFlowVoiceEntry.vfStaveNote as Vex.Flow.StaveNote).addModifier(0, clefModifier);
                     }
                 }
 
@@ -850,7 +850,7 @@ export class VexFlowMeasure extends GraphicalMeasure {
 
                 // add Arpeggio
                 if (voiceEntry.parentVoiceEntry && voiceEntry.parentVoiceEntry.Arpeggio !== undefined) {
-                    const type: ArpeggioType = voiceEntry.parentVoiceEntry.Arpeggio.type;
+                    const type: Vex.Flow.Stroke.Type = voiceEntry.parentVoiceEntry.Arpeggio.type;
                     vexFlowVoiceEntry.vfStaveNote.addStroke(0, new Vex.Flow.Stroke(type));
                 }
 
@@ -936,30 +936,30 @@ export class VexFlowMeasure extends GraphicalMeasure {
             if (technicalInstruction.placement !== PlacementEnum.NotYetDefined) {
                 fingeringPosition = technicalInstruction.placement;
             }
-            let modifierPosition: any; // Vex.Flow.Modifier.Position
+            let modifierPosition: any; // Vex.Flow.Stavemodifier.Position
             switch (fingeringPosition) {
                 default:
                 case PlacementEnum.Left:
-                    modifierPosition = Vex.Flow.Modifier.Position.LEFT;
+                    modifierPosition = Vex.Flow.StaveModifier.Position.LEFT;
                     break;
                 case PlacementEnum.Right:
-                    modifierPosition = Vex.Flow.Modifier.Position.RIGHT;
+                    modifierPosition = Vex.Flow.StaveModifier.Position.RIGHT;
                     break;
                 case PlacementEnum.Above:
-                    modifierPosition = Vex.Flow.Modifier.Position.ABOVE;
+                    modifierPosition = Vex.Flow.StaveModifier.Position.ABOVE;
                     break;
                 case PlacementEnum.Below:
-                    modifierPosition = Vex.Flow.Modifier.Position.BELOW;
+                    modifierPosition = Vex.Flow.StaveModifier.Position.BELOW;
                     break;
                 case PlacementEnum.NotYetDefined: // automatic fingering placement, could be more complex/customizable
                     const sourceStaff: Staff = voiceEntry.parentStaffEntry.sourceStaffEntry.ParentStaff;
                     if (voiceEntry.notes.length > 1 || voiceEntry.parentStaffEntry.graphicalVoiceEntries.length > 1) {
-                        modifierPosition = Vex.Flow.Modifier.Position.LEFT;
+                        modifierPosition = Vex.Flow.StaveModifier.Position.LEFT;
                     } else if (sourceStaff.idInMusicSheet === 0) {
-                        modifierPosition = Vex.Flow.Modifier.Position.ABOVE;
+                        modifierPosition = Vex.Flow.StaveModifier.Position.ABOVE;
                         fingeringPosition = PlacementEnum.Above;
                     } else {
-                        modifierPosition = Vex.Flow.Modifier.Position.BELOW;
+                        modifierPosition = Vex.Flow.StaveModifier.Position.BELOW;
                         fingeringPosition = PlacementEnum.Below;
                     }
             }
@@ -981,11 +981,13 @@ export class VexFlowMeasure extends GraphicalMeasure {
                     (<any>stringNumber).radius = 0; // hack to remove the circle around the number
                     stringNumber.setPosition(modifierPosition);
                     stringNumber.setOffsetY(offsetYSign * ordering * stringNumber.getWidth() * 2 / 3);
-                    vexFlowVoiceEntry.vfStaveNote.addModifier(i, stringNumber);
+                    // Vexflow made a mess with the addModifier signature that changes through each class so we just cast to any :(
+                    vexFlowVoiceEntry.vfStaveNote.addModifier((i as any), (stringNumber as any));
                     continue;
                 }
             }
-            vexFlowVoiceEntry.vfStaveNote.addModifier(i, fretFinger);
+            // Vexflow made a mess with the addModifier signature that changes through each class so we just cast to any :(
+            vexFlowVoiceEntry.vfStaveNote.addModifier((i as any), (fretFinger as any));
         }
     }
 

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -271,9 +271,12 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
     protected drawOctaveShifts(staffLine: StaffLine): void {
         for (const graphicalOctaveShift of staffLine.OctaveShifts) {
             if (graphicalOctaveShift) {
-                const ctx: Vex.Flow.RenderContext = this.backend.getContext();
+                const ctx: Vex.IRenderContext = this.backend.getContext();
                 const textBracket: Vex.Flow.TextBracket = (graphicalOctaveShift as VexFlowOctaveShift).getTextBracket();
                 textBracket.setContext(ctx);
+                const headroom: number = staffLine.SkyBottomLineCalculator
+                                                  .getSkyLineMinInRange(textBracket.start.getX() / 10, textBracket.stop.getX() / 10);
+                textBracket.start.getStave().options.space_above_staff_ln = Math.floor(headroom) - 2;
                 textBracket.draw();
             }
         }

src/MusicalScore/Graphical/VexFlow/VexFlowOctaveShift.ts

@@ -16,7 +16,7 @@ export class VexFlowOctaveShift extends GraphicalOctaveShift {
     /** Defines the note where the octave shift ends */
     private endNote: Vex.Flow.StemmableNote;
     /** Top or bottom of the staffline */
-    private position: string;
+    private position: Vex.Flow.TextBracket.Positions;
     /** Supscript is a smaller text after the regular text (e.g. va after 8) */
     private supscript: string;
     /** Main text element */
@@ -31,22 +31,22 @@ export class VexFlowOctaveShift extends GraphicalOctaveShift {
         super(octaveShift, parent);
         switch (octaveShift.Type) {
             case OctaveEnum.VA8:
-                this.position = "top";
+                this.position = Vex.Flow.TextBracket.Positions.TOP;
                 this.supscript = "va";
                 this.text = "8";
                 break;
-                case OctaveEnum.MA15:
-                this.position = "top";
+            case OctaveEnum.MA15:
+                this.position = Vex.Flow.TextBracket.Positions.TOP;
                 this.supscript = "ma";
                 this.text = "15";
                 break;
-                case OctaveEnum.VB8:
-                this.position = "bottom";
+            case OctaveEnum.VB8:
+                this.position = Vex.Flow.TextBracket.Positions.BOTTOM;
                 this.supscript = "vb";
                 this.text = "8";
                 break;
-                case OctaveEnum.MB15:
-                this.position = "bottom";
+            case OctaveEnum.MB15:
+                this.position = Vex.Flow.TextBracket.Positions.BOTTOM;
                 this.supscript = "mb";
                 this.text = "15";
                 break;

src/MusicalScore/Graphical/VexFlow/VexFlowStaffEntry.ts

@@ -34,7 +34,7 @@ export class VexFlowStaffEntry extends GraphicalStaffEntry {
                     continue;
                 }
                 gve.applyBordersFromVexflow();
-                this.PositionAndShape.RelativePosition.x = gve.vfStaveNote.getBoundingBox().x / unitInPixels;
+                this.PositionAndShape.RelativePosition.x = gve.vfStaveNote.getBoundingBox().getX() / unitInPixels;
                 const sourceNote: Note = gve.notes[0].sourceNote;
                 if (sourceNote.isRest() && sourceNote.Length.WholeValue === 1) { // whole rest
                     this.PositionAndShape.RelativePosition.x +=

src/MusicalScore/ScoreIO/VoiceGenerator.ts

@@ -26,7 +26,7 @@ import { CollectionUtil } from "../../Util/CollectionUtil";
 import { ArticulationReader } from "./MusicSymbolModules/ArticulationReader";
 import { SlurReader } from "./MusicSymbolModules/SlurReader";
 import { Notehead } from "../VoiceData/Notehead";
-import { Arpeggio, ArpeggioType } from "../VoiceData/Arpeggio";
+import { Arpeggio } from "../VoiceData/Arpeggio";
 
 export class VoiceGenerator {
   constructor(instrument: Instrument, voiceId: number, slurReader: SlurReader, mainVoice: Voice = undefined) {
@@ -149,18 +149,18 @@ export class VoiceGenerator {
           if (this.currentVoiceEntry.Arpeggio !== undefined) { // add note to existing Arpeggio
             currentArpeggio = this.currentVoiceEntry.Arpeggio;
           } else { // create new Arpeggio
-            let arpeggioType: ArpeggioType;
+            let arpeggioType: Vex.Flow.Stroke.Type;
             const directionAttr: Attr = arpeggioNode.attribute("direction");
             if (directionAttr !== null) {
               switch (directionAttr.value) {
                 case "up":
-                  arpeggioType = ArpeggioType.ROLL_UP;
+                  arpeggioType = Vex.Flow.Stroke.Type.ROLL_UP;
                   break;
                 case "down":
-                  arpeggioType = ArpeggioType.ROLL_DOWN;
+                  arpeggioType = Vex.Flow.Stroke.Type.ROLL_DOWN;
                   break;
                 default:
-                  arpeggioType = ArpeggioType.ARPEGGIO_DIRECTIONLESS;
+                  arpeggioType = Vex.Flow.Stroke.Type.ARPEGGIO_DIRECTIONLESS;
               }
             }
 

src/MusicalScore/VoiceData/Arpeggio.ts

@@ -1,23 +1,8 @@
 import { VoiceEntry } from "./VoiceEntry";
 import { Note } from "./Note";
 
-/** Type and direction of an Arpeggio.
- * The values should correspond to Vex.Flow.Strokes.Type values.
- * Somehow they don't correspond to Vexflow code, but they were confirmed to work, for whatever reason.
- * For now, we only support one Arpeggio per VoiceEntry.
- */
-export enum ArpeggioType {
-    BRUSH_DOWN = 2,
-    BRUSH_UP = 1,
-    ROLL_DOWN = 4, // Arpeggio with downwards arrow
-    ROLL_UP = 3, // Arpeggio with upwards arrow
-    RASQUEDO_DOWN = 5, // this is UP, can't find a value for DOWN that works in Vexflow right now
-    RASQUEDO_UP = 5,
-    ARPEGGIO_DIRECTIONLESS = 7 // currently not supported in Vexflow
-}
-
 export class Arpeggio {
-    constructor(parentVoiceEntry: VoiceEntry, type: ArpeggioType = ArpeggioType.ARPEGGIO_DIRECTIONLESS) {
+    constructor(parentVoiceEntry: VoiceEntry, type: Vex.Flow.Stroke.Type = Vex.Flow.Stroke.Type.ARPEGGIO_DIRECTIONLESS) {
         this.parentVoiceEntry = parentVoiceEntry;
         this.type = type;
         this.notes = [];
@@ -25,7 +10,7 @@ export class Arpeggio {
 
     public parentVoiceEntry: VoiceEntry;
     public notes: Note[];
-    public type: ArpeggioType;
+    public type: Vex.Flow.Stroke.Type;
 
     public addNote(note: Note): void {
         this.notes.push(note);