???

external/vexflow/vexflow.d.ts

@@ -122,6 +122,14 @@ declare namespace Vex {
 
     }
 
+    export class StaveConnector {
+      constructor(top: Stave, bottom: Stave);
+      public static type: any;
+      public setType(type: any): StaveConnector;
+      public setContext(ctx: CanvasContext): StaveConnector;
+      public draw(): void;
+    }
+
   }
 }
 

karma.conf.js

@@ -55,7 +55,7 @@ module.exports = function (config) {
 
         // level of logging
         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_DEBUG,
+        logLevel: config.LOG_INFO,
 
         // enable / disable watching file and executing tests whenever any file changes
         autoWatch: false,

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -11,6 +11,7 @@ import {AccidentalEnum} from "../../../Common/DataObjects/pitch";
 import {NoteEnum} from "../../../Common/DataObjects/pitch";
 import {VexFlowGraphicalNote} from "./VexFlowGraphicalNote";
 import {GraphicalNote} from "../GraphicalNote";
+import {SystemLinesEnum} from "../SystemLinesEnum";
 
 export class VexFlowConverter {
     private static majorMap: {[_: number]: string; } = {
@@ -169,4 +170,8 @@ export class VexFlowConverter {
         }
         return ret;
     }
+
+    public static line(lineType: SystemLinesEnum): any {
+        return Vex.Flow.StaveConnector.type.DOUBLE;
+    }
 }

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -12,6 +12,9 @@ import {VexFlowStaffEntry} from "./VexFlowStaffEntry";
 import {Beam} from "../../VoiceData/Beam";
 import {GraphicalNote} from "../GraphicalNote";
 import {GraphicalStaffEntry} from "../GraphicalStaffEntry";
+import StaveConnector = Vex.Flow.StaveConnector;
+import StaveModifier = Vex.Flow.StaveModifier;
+import StaveNote = Vex.Flow.StaveNote;
 
 export class VexFlowMeasure extends StaffMeasure {
     constructor(staff: Staff, staffLine: StaffLine = undefined, sourceMeasure: SourceMeasure = undefined) {
@@ -28,6 +31,7 @@ export class VexFlowMeasure extends StaffMeasure {
     public unit: number = 10.0;
 
     private stave: Vex.Flow.Stave;
+    private connectors: Vex.Flow.StaveConnector[] = [];
 
     private beams: { [voiceID: number]: [Beam, VexFlowStaffEntry[]][]; } = {};
     private vfbeams: { [voiceID: number]: Vex.Flow.Beam[]; } = {};
@@ -172,6 +176,9 @@ export class VexFlowMeasure extends StaffMeasure {
                 }
             }
         }
+        for (let connector of this.connectors) {
+            connector.setContext(ctx).draw();
+        }
     }
 
     public handleBeam(graphicalNote: GraphicalNote, beam: Beam): void {
@@ -226,16 +233,26 @@ export class VexFlowMeasure extends StaffMeasure {
                         resolution: Vex.Flow.RESOLUTION,
                     }).setMode(Vex.Flow.Voice.Mode.SOFT);
                 }
-                let vfnote: Vex.Flow.StaveNote = VexFlowConverter.StaveNote(gnotes[voiceID]);
+                let vfnote: StaveNote = VexFlowConverter.StaveNote(gnotes[voiceID]);
                 (graphicalStaffEntry as VexFlowStaffEntry).vfNotes[voiceID] = vfnote;
                 vfVoices[voiceID].addTickable(vfnote);
             }
         }
     }
 
+    public connectTo(bottom: VexFlowMeasure, lineType: any): void {
+        let connector: StaveConnector = new Vex.Flow.StaveConnector(this.stave, bottom.getVFStave());
+        connector.setType(lineType);
+        this.connectors.push(connector);
+    }
+
+    public getVFStave(): Vex.Flow.Stave {
+        return this.stave;
+    }
+
     private increaseBeginInstructionWidth(): void {
-        let modifiers: Vex.Flow.StaveModifier[] = this.stave.getModifiers();
-        let modifier: Vex.Flow.StaveModifier = modifiers[modifiers.length - 1];
+        let modifiers: StaveModifier[] = this.stave.getModifiers();
+        let modifier: StaveModifier = modifiers[modifiers.length - 1];
         //let padding: number = modifier.getCategory() === "keysignatures" ? modifier.getPadding(2) : 0;
         let padding: number = modifier.getPadding(20);
         //modifier.getPadding(this.begModifiers);
@@ -244,8 +261,8 @@ export class VexFlowMeasure extends StaffMeasure {
     }
 
     private increaseEndInstructionWidth(): void {
-        let modifiers: Vex.Flow.StaveModifier[] = this.stave.getModifiers();
-        let modifier: Vex.Flow.StaveModifier = modifiers[modifiers.length - 1];
+        let modifiers: StaveModifier[] = this.stave.getModifiers();
+        let modifier: StaveModifier = modifiers[modifiers.length - 1];
         let padding: number = 0; //modifier.getPadding(this.endModifiers++);
         let width: number = modifier.getWidth();
         this.endInstructionsWidth += (padding + width) / this.unit;

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -76,7 +76,7 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
                 }
             }
             if (voices.length === 0) {
-                console.log("Found a measure with no voices... Continuing anyway.", mvoices);
+                console.warn("Found a measure with no voices... Continuing anyway.", mvoices);
                 continue;
             }
             formatter.joinVoices(voices);
@@ -118,6 +118,21 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
         musicSystemBuilder.buildMusicSystems();
         this.checkMeasuresForWholeRestNotes();
         this.calculateSystemYLayout();
+        for (let page of this.graphicalMusicSheet.MusicPages) {
+            for (let system of page.MusicSystems) {
+                //system.setMusicSystemLabelsYPosition();
+                if (!this.leadSheet) {
+                    system.setYPositionsToVerticalLineObjectsAndCreateLines(this.rules);
+                    system.createSystemLeftLine(this.rules.SystemThinLineWidth, this.rules.SystemLabelsRightMargin);
+                    //system.createInstrumentBrackets(this.graphicalMusicSheet.ParentMusicSheet.Instruments, this.rules.StaffHeight);
+                    //system.createGroupBrackets(this.graphicalMusicSheet.ParentMusicSheet.InstrumentalGroups, this.rules.StaffHeight, 0);
+                    //system.alignBeginInstructions();
+                } else if (system === system.Parent.MusicSystems[0]) {
+                    system.createSystemLeftLine(this.rules.SystemThinLineWidth, this.rules.SystemLabelsRightMargin);
+                }
+                //system.calculateBorders(this.rules);
+            }
+        }
     }
 
     protected updateStaffLineBorders(staffLine: StaffLine): void {

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSystem.ts

@@ -6,6 +6,10 @@ import {PointF2D} from "../../../Common/DataObjects/PointF2D";
 import {SystemLinePosition} from "../SystemLinePosition";
 import {StaffMeasure} from "../StaffMeasure";
 import {SystemLine} from "../SystemLine";
+import {VexFlowMeasure} from "./VexFlowMeasure";
+import {VexFlowConverter} from "./VexFlowConverter";
+
+//import Vex = require("vexflow");
 
 export class VexFlowMusicSystem extends MusicSystem {
     constructor(parent: GraphicalMusicPage, id: number) {
@@ -18,8 +22,18 @@ export class VexFlowMusicSystem extends MusicSystem {
      * @param lineWidth
      * @param systemLabelsRightMargin
      */
-    public createSystemLeftVerticalLineObject(lineWidth: number, systemLabelsRightMargin: number): void {
-        return;
+    public createSystemLeftLine(lineWidth: number, systemLabelsRightMargin: number): void {
+        //let len: number = this.graphicalMeasures.length;
+        //if (len > 1) {
+        //    (this.graphicalMeasures[0][0] as VexFlowMeasure).connectTo(
+        //        this.graphicalMeasures[len - 1][0] as VexFlowMeasure,
+        //        Vex.Flow.StaveConnector.type.SINGLE
+        //    );
+        //}
+        //(this.systemLines as VexFlowMeasure).connectTo(
+        //    this.graphicalMeasures[len - 1][0] as VexFlowMeasure,
+        //    Vex.Flow.StaveConnector.type.SINGLE
+        //);
     }
 
     /**
@@ -46,7 +60,7 @@ export class VexFlowMusicSystem extends MusicSystem {
     public createSystemLine(xPosition: number, lineWidth: number, lineType: SystemLinesEnum, linePosition: SystemLinePosition,
                             musicSystem: MusicSystem, topMeasure: StaffMeasure, bottomMeasure: StaffMeasure = undefined): SystemLine {
         // ToDo: create line in Vexflow
-
+        (topMeasure as VexFlowMeasure).connectTo(bottomMeasure as VexFlowMeasure, VexFlowConverter.line(lineType));
         return new SystemLine(lineType, linePosition, this, topMeasure, bottomMeasure);
     }