fix(repeat): don't draw vertical line at the beginning of a system for single staff systems (#834)

If single system line, and repeat is at beginning (but offset due to clef etc.) do not render opening single barline

Co-authored-by: Justin Litten
(code by)

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -270,11 +270,45 @@ export class VexFlowMeasure extends GraphicalMeasure {
         this.updateInstructionWidth();
     }
 
-    public addMeasureLine(lineType: SystemLinesEnum, linePosition: SystemLinePosition): void {
+    // Render initial line is whether or not to render a single bar line at the beginning (if the repeat line we are drawing is
+    // offset by a clef, for ex.)
+    public addMeasureLine(lineType: SystemLinesEnum, linePosition: SystemLinePosition, renderInitialLine: boolean = true): void {
         switch (linePosition) {
             case SystemLinePosition.MeasureBegin:
                 switch (lineType) {
                     case SystemLinesEnum.BoldThinDots:
+                        //customize the barline draw function if repeat is beginning of system
+                        if (!renderInitialLine) {
+                            (this.stave as any).modifiers[0].draw = function(stave: Vex.Flow.Stave): void {
+                                (stave as any).checkContext();
+                                this.setRendered();
+                                switch (this.type) {
+                                    case Vex.Flow.Barline.type.SINGLE:
+                                    this.drawVerticalBar(stave, this.x, false);
+                                    break;
+                                    case Vex.Flow.Barline.type.DOUBLE:
+                                    this.drawVerticalBar(stave, this.x, true);
+                                    break;
+                                    case Vex.Flow.Barline.type.END:
+                                    this.drawVerticalEndBar(stave, this.x);
+                                    break;
+                                    case Vex.Flow.Barline.type.REPEAT_BEGIN:
+                                    //removed the vertical line rendering that exists in VF codebase
+                                    this.drawRepeatBar(stave, this.x, true);
+                                    break;
+                                    case Vex.Flow.Barline.type.REPEAT_END:
+                                    this.drawRepeatBar(stave, this.x, false);
+                                    break;
+                                    case Vex.Flow.Barline.type.REPEAT_BOTH:
+                                    this.drawRepeatBar(stave, this.x, false);
+                                    this.drawRepeatBar(stave, this.x, true);
+                                    break;
+                                    default:
+                                    // Default is NONE, so nothing to draw
+                                    break;
+                                }
+                            };
+                        }
                         this.stave.setBegBarType(Vex.Flow.Barline.type.REPEAT_BEGIN);
                         break;
                     default:

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSystem.ts

@@ -56,13 +56,18 @@ export class VexFlowMusicSystem extends MusicSystem {
     protected createSystemLine(xPosition: number, lineWidth: number, lineType: SystemLinesEnum, linePosition: SystemLinePosition,
                                musicSystem: MusicSystem, topMeasure: GraphicalMeasure, bottomMeasure: GraphicalMeasure = undefined): SystemLine {
         const vfMeasure: VexFlowMeasure = topMeasure as VexFlowMeasure;
-        vfMeasure.addMeasureLine(lineType, linePosition);
+        let renderInitialLine: boolean = false;
+
         if (bottomMeasure) {
-          // ToDo: feature/Repetitions
-          // create here the correct lines according to the given lineType.
-          (bottomMeasure as VexFlowMeasure).lineTo(topMeasure as VexFlowMeasure, VexFlowConverter.line(lineType, linePosition));
-          (bottomMeasure as VexFlowMeasure).addMeasureLine(lineType, linePosition);
+            renderInitialLine = true;
+            // ToDo: feature/Repetitions
+            // create here the correct lines according to the given lineType.
+            (bottomMeasure as VexFlowMeasure).lineTo(topMeasure as VexFlowMeasure, VexFlowConverter.line(lineType, linePosition));
+            (bottomMeasure as VexFlowMeasure).addMeasureLine(lineType, linePosition);
         }
+
+        vfMeasure.addMeasureLine(lineType, linePosition, renderInitialLine);
+
         return new SystemLine(lineType, linePosition, this, topMeasure, bottomMeasure);
     }