Added instrument brace/bracket feature

src/MusicalScore/Graphical/VexFlow/VexFlowInstrumentBracket.ts

@@ -0,0 +1,42 @@
+import Vex = require("vexflow");
+import {GraphicalObject} from "../GraphicalObject";
+import {VexFlowStaffLine} from "./VexFlowStaffLine";
+import { BoundingBox } from "../BoundingBox";
+import { VexFlowMeasure } from "./VexFlowMeasure";
+
+/**
+ * Class that defines a instrument bracket at the beginning of a line.
+ */
+export class VexFlowInstrumentBracket extends GraphicalObject {
+
+    private vexflowConnector: Vex.Flow.StaveConnector;
+
+    constructor(firstVexFlowStaffLine: VexFlowStaffLine, lastVexFlowStaffLine: VexFlowStaffLine) {
+        super();
+        // FIXME: B.Giesinger: Fill in sizes after calculation
+        this.boundingBox = new BoundingBox(this);
+        const firstVexMeasure: VexFlowMeasure = firstVexFlowStaffLine.Measures[0] as VexFlowMeasure;
+        const lastVexMeasure: VexFlowMeasure = lastVexFlowStaffLine.Measures[0] as VexFlowMeasure;
+        this.addConnector(firstVexMeasure.getVFStave(), lastVexMeasure.getVFStave(), Vex.Flow.StaveConnector.type.BRACE);
+    }
+
+    /**
+     * Render the bracket using the given backend
+     * @param ctx Render Vexflow context
+     */
+    public draw(ctx: Vex.Flow.RenderContext): void {
+        this.vexflowConnector.setContext(ctx).draw();
+    }
+
+    /**
+     * Adds a connector between two staves
+     *
+     * @param {Stave} stave1: First stave
+     * @param {Stave} stave2: Second stave
+     * @param {Flow.StaveConnector.type} type: Type of connector
+     */
+    private addConnector(stave1: Vex.Flow.Stave, stave2: Vex.Flow.Stave, type: any): void {
+        this.vexflowConnector = new Vex.Flow.StaveConnector(stave1, stave2)
+        .setType(type);
+    }
+}

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -9,6 +9,7 @@ import {GraphicalObject} from "../GraphicalObject";
 import {GraphicalLayers} from "../DrawingEnums";
 import {GraphicalStaffEntry} from "../GraphicalStaffEntry";
 import {VexFlowBackend} from "./VexFlowBackend";
+import { VexFlowInstrumentBracket } from "./VexFlowInstrumentBracket";
 
 /**
  * This is a global constant which denotes the height in pixels of the space between two lines of the stave
@@ -84,8 +85,9 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
     }
 
     protected drawInstrumentBrace(brace: GraphicalObject, system: MusicSystem): void {
-      // cast brace to VexFlowInstrumentBrace
-      // render it with Vexflow.
+        // Draw InstrumentBrackets at beginning of line
+        const vexBrace: VexFlowInstrumentBracket = (brace as VexFlowInstrumentBracket);
+        vexBrace.draw(this.backend.getContext());
     }
 
     protected drawGroupBracket(bracket: GraphicalObject, system: MusicSystem): void {

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSystem.ts

@@ -4,10 +4,12 @@ import {SystemLinesEnum} from "../SystemLinesEnum";
 import {SystemLinePosition} from "../SystemLinePosition";
 import {StaffMeasure} from "../StaffMeasure";
 import {SystemLine} from "../SystemLine";
+import {VexFlowStaffLine} from "./VexFlowStaffLine";
 import {VexFlowMeasure} from "./VexFlowMeasure";
 import {VexFlowConverter} from "./VexFlowConverter";
 import {StaffLine} from "../StaffLine";
 import {EngravingRules} from "../EngravingRules";
+import { VexFlowInstrumentBracket } from "./VexFlowInstrumentBracket";
 
 export class VexFlowMusicSystem extends MusicSystem {
     constructor(parent: GraphicalMusicPage, id: number) {
@@ -50,22 +52,13 @@ export class VexFlowMusicSystem extends MusicSystem {
      * @param firstStaffLine the upper StaffLine (use a cast to get the VexFlowStaffLine) of the brace to create
      * @param lastStaffLine the lower StaffLine (use a cast to get the VexFlowStaffLine) of the brace to create
      */
-    protected createInstrumentBrace(firstStaffLine: StaffLine, lastStaffLine: StaffLine): void {
-      // first cast the staff lines to get the VexFlow content:
-      // let firstVexFlowStaffLine: VexFlowStaffLine = (firstStaffLine as VexFlowStaffLine);
-      // let lastVexFlowStaffLine: VexFlowStaffLine = (lastStaffLine as VexFlowStaffLine);
-      // Create a VexFlowInstrumentBrace object (class doesn't exist yet, shall extend GraphicalObject to have a BoundingBox)
-      // do the following in the constructor of the VexFlowInstrumentBrace (which takes firstVexFlowStaffLine and lastVexFlowStaffLine as arguments):
-      // create the Vexflow stave connector,
-      // correctly connect it to the first and last VexFlowStaffLines
-      // infer from VexFlow the bounding box size of the created brace.
-      // transform the Vexflow coordinates to unit coordinate space.
-      // set the VexFlowInstrumentBrace.boundingBox to these coordinates
-      // finally add the graphical element to the music system with:
-      // this.boundingBox.ChildElements.push(vexFlowInstrumentBrace.boundingBox);
-      // and very importantly add the brace to the braces list of this system (needed to call the draw method in VexFlowMusicSheetDrawer later):
-      // this.instrumentBrackets.push(vexFlowInstrumentBrace);
-      return;
+    protected createInstrumentBracket(firstStaffLine: StaffLine, lastStaffLine: StaffLine): void {
+        // You could write this in one line but the linter doesn't let me.
+        const firstVexStaff: VexFlowStaffLine = (firstStaffLine as VexFlowStaffLine);
+        const lastVexStaff: VexFlowStaffLine = (lastStaffLine as VexFlowStaffLine);
+        const vexFlowBracket: VexFlowInstrumentBracket = new VexFlowInstrumentBracket(firstVexStaff, lastVexStaff);
+        this.InstrumentBrackets.push(vexFlowBracket);
+        return;
     }
 
     /**