Additional refactoring for bracket and Brace layout

src/MusicalScore/Graphical/MusicSystem.ts

@@ -396,8 +396,21 @@ export abstract class MusicSystem extends GraphicalObject {
         //Empty
     }
 
-    protected calcInstrumentsBracketsWidth(): number {
-        throw new Error("not implemented");
+    /**
+     * Calculates the summed x-width of a possibly given Instrument Brace and/or Group Bracket(s).
+     * @returns {number} the x-width
+     */
+    protected calcBracketsWidth(): number {
+        let width: number = 0;
+        for (let idx: number = 0, len: number = this.GroupBrackets.length; idx < len; ++idx) {
+            let groupBracket: GraphicalObject = this.GroupBrackets[idx];
+            width = Math.max(width, groupBracket.PositionAndShape.Size.width);
+        }
+        for (let idx2: number = 0, len2: number = this.InstrumentBrackets.length; idx2 < len2; ++idx2) {
+            let instrumentBracket: GraphicalObject = this.InstrumentBrackets[idx2];
+            width = Math.max(width, instrumentBracket.PositionAndShape.Size.width);
+        }
+        return width;
     }
 
     protected createInstrumentBracket(firstStaffLine: StaffLine, lastStaffLine: StaffLine): void {

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -6,6 +6,8 @@ import {PointF2D} from "../../../Common/DataObjects/PointF2D";
 import {GraphicalLabel} from "../GraphicalLabel";
 import {VexFlowConverter} from "./VexFlowConverter";
 import {VexFlowTextMeasurer} from "./VexFlowTextMeasurer";
+import {MusicSystem} from "../MusicSystem";
+import {GraphicalObject} from "../GraphicalObject";
 
 /**
  * This is a global contant which denotes the height in pixels of the space between two lines of the stave
@@ -69,6 +71,14 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
         return measure.draw(this.vfctx);
     }
 
+    protected drawInstrumentBrace(bracket: GraphicalObject, system: MusicSystem): void {
+        // empty
+    }
+
+    protected drawGroupBracket(bracket: GraphicalObject, system: MusicSystem): void {
+        // empty
+    }
+
     /**
      * Renders a Label to the screen (e.g. Title, composer..)
      * @param graphicalLabel holds the label string, the text height in units and the font parameters

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSystem.ts

@@ -7,6 +7,7 @@ import {SystemLine} from "../SystemLine";
 import {VexFlowMeasure} from "./VexFlowMeasure";
 import {VexFlowConverter} from "./VexFlowConverter";
 import {StaffLine} from "../StaffLine";
+import {EngravingRules} from "../EngravingRules";
 
 export class VexFlowMusicSystem extends MusicSystem {
     constructor(parent: GraphicalMusicPage, id: number) {
@@ -14,6 +15,16 @@ export class VexFlowMusicSystem extends MusicSystem {
 
     }
 
+    public calculateBorders(rules: EngravingRules): void {
+        if (this.staffLines.length === 0) {
+            return;
+        }
+        let width: number = this.calcBracketsWidth();
+        this.boundingBox.BorderLeft = -width;
+        this.boundingBox.BorderMarginLeft = -width;
+        this.boundingBox.XBordersHaveBeenSet = true;
+    }
+
     /**
      * This method creates all the graphical lines and dots needed to render a system line (e.g. bold-thin-dots..).
      * @param xPosition
@@ -34,20 +45,12 @@ export class VexFlowMusicSystem extends MusicSystem {
     }
 
     /**
-     * Calculates the summed x-width of a possibly given Instrument Brace and/or Group Bracket(s).
-     * @returns {number} the x-width
-     */
-    protected calcInstrumentsBracketsWidth(): number {
-        return 0;
-    }
-
-    /**
      * creates an instrument brace for the given dimension.
      * The height and positioning can be inferred from the given points.
-     * @param rightUpper the upper right corner point of the bracket to create
-     * @param rightLower the lower right corner point of the bracket to create
+     * @param firstStaffLine the upper staff line of the bracket to create
+     * @param lastStaffLine the lower staff line of the bracket to create
      */
-    protected createInstrumentBracket(firstStaffLine: StaffLine, lastStaffLine: StaffLine): void {
+    protected createInstrumentBrace(firstStaffLine: StaffLine, lastStaffLine: StaffLine): void {
         return;
     }
 
@@ -55,8 +58,8 @@ export class VexFlowMusicSystem extends MusicSystem {
      * creates an instrument group bracket for the given dimension.
      * There can be cascaded bracket (e.g. a group of 2 in a group of 4) -
      * The recursion depth informs about the current depth level (needed for positioning)
-     * @param rightUpper rightUpper the upper right corner point of the bracket to create
-     * @param rightLower rightLower the lower right corner point of the bracket to create
+     * @param firstStaffLine the upper staff line of the bracket to create
+     * @param lastStaffLine the lower staff line of the bracket to create
      * @param staffHeight
      * @param recursionDepth
      */