Fixing y-layout

src/Common/DataObjects/PointF2D.ts

@@ -1,6 +1,6 @@
 export class PointF2D {
-    public x: number;
-    public y: number;
+    public x: number = 0;
+    public y: number = 0;
 
     constructor(x: number = 0, y: number = 0) {
         this.x = x;

src/Common/DataObjects/RectangleF2D.ts

@@ -2,10 +2,10 @@
 import {PointF2D} from "./PointF2D";
 
 export class RectangleF2D {
-    public x: number;
-    public y: number;
-    public width: number;
-    public height: number;
+    public x: number = 0;
+    public y: number = 0;
+    public width: number = 0;
+    public height: number = 0;
 
     constructor(x: number, y: number, width: number, height: number) {
         this.x = x;

src/MusicalScore/Graphical/BoundingBox.ts

@@ -5,23 +5,23 @@ import {RectangleF2D} from "../../Common/DataObjects/RectangleF2D";
 
 export class BoundingBox {
     protected isSymbol: boolean = false;
-    protected relativePositionHasBeenSet: boolean;
-    protected xBordersHaveBeenSet: boolean;
-    protected yBordersHaveBeenSet: boolean;
+    protected relativePositionHasBeenSet: boolean = false;
+    protected xBordersHaveBeenSet: boolean = false;
+    protected yBordersHaveBeenSet: boolean = false;
     protected absolutePosition: PointF2D = new PointF2D();
     protected relativePosition: PointF2D = new PointF2D();
     protected size: SizeF2D = new SizeF2D();
     protected marginSize: SizeF2D;
     protected upperLeftCorner: PointF2D;
     protected upperLeftMarginCorner: PointF2D;
-    protected borderLeft: number;
-    protected borderRight: number;
-    protected borderTop: number;
-    protected borderBottom: number;
-    protected borderMarginLeft: number;
-    protected borderMarginRight: number;
-    protected borderMarginTop: number;
-    protected borderMarginBottom: number;
+    protected borderLeft: number = 0;
+    protected borderRight: number = 0;
+    protected borderTop: number = 0;
+    protected borderBottom: number = 0;
+    protected borderMarginLeft: number = 0;
+    protected borderMarginRight: number = 0;
+    protected borderMarginTop: number = 0;
+    protected borderMarginBottom: number = 0;
     protected boundingRectangle: RectangleF2D;
     protected boundingMarginRectangle: RectangleF2D;
     protected childElements: BoundingBox[] = [];

src/MusicalScore/Graphical/StaffMeasure.ts

@@ -13,6 +13,7 @@ import {VoiceEntry} from "../VoiceData/VoiceEntry";
 import {GraphicalNote} from "./GraphicalNote";
 import {SystemLinesEnum} from "./SystemLinesEnum";
 import {BoundingBox} from "./BoundingBox";
+import {PointF2D} from "../../Common/DataObjects/PointF2D";
 
 export class StaffMeasure extends GraphicalObject {
     protected firstInstructionStaffEntry: GraphicalStaffEntry;
@@ -110,11 +111,11 @@ export class StaffMeasure extends GraphicalObject {
     }
 
     public setPositionInStaffline(xPos: number): void {
-        throw new Error("not implemented");
+        this.PositionAndShape.RelativePosition = new PointF2D(xPos, 0);
     }
 
     public setWidth(width: number): void {
-        throw new Error("not implemented");
+        this.PositionAndShape.BorderRight = width;
     }
 
     public layoutSymbols(): void {

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -1,6 +1,6 @@
+import Vex = require("vexflow");
 import {ClefEnum} from "../../VoiceData/Instructions/ClefInstruction";
 import {ClefInstruction} from "../../VoiceData/Instructions/ClefInstruction";
-import {VoiceEntry} from "../../VoiceData/VoiceEntry";
 import {Pitch} from "../../../Common/DataObjects/pitch";
 import {Fraction} from "../../../Common/DataObjects/fraction";
 import {RhythmInstruction} from "../../VoiceData/Instructions/RhythmInstruction";
@@ -9,9 +9,6 @@ import {KeyInstruction} from "../../VoiceData/Instructions/KeyInstruction";
 import {KeyEnum} from "../../VoiceData/Instructions/KeyInstruction";
 import {AccidentalEnum} from "../../../Common/DataObjects/pitch";
 import {NoteEnum} from "../../../Common/DataObjects/pitch";
-
-import Vex = require("vexflow");
-import Clef = Vex.Flow.Clef;
 import {VexFlowGraphicalNote} from "./VexFlowGraphicalNote";
 import {GraphicalNote} from "../GraphicalNote";
 
@@ -52,7 +49,8 @@ export class VexFlowConverter {
      */
     public static pitch(pitch: Pitch, octaveOffset: number): [string, string] {
         let fund: string = NoteEnum[pitch.FundamentalNote].toLowerCase();
-        let octave: number = pitch.Octave + octaveOffset;
+        let octave: number = pitch.Octave + octaveOffset + 3;
+        console.log("pitch", pitch.Octave, octaveOffset);
         let acc: string = "";
 
         switch (pitch.Accidental) {
@@ -75,7 +73,7 @@ export class VexFlowConverter {
         return [fund + acc + "/" + octave, acc];
     }
 
-    public static StaveNote(notes: GraphicalNote[], octaveOffset: number): Vex.Flow.StaveNote {
+    public static StaveNote(notes: GraphicalNote[]): Vex.Flow.StaveNote {
         let keys: string[] = [];
         let duration: string = VexFlowConverter.duration(notes[0].sourceNote.Length);
         let accidentals: string[] = [];

src/MusicalScore/Graphical/VexFlow/VexFlowGraphicalSymbolFactory.ts

@@ -48,8 +48,7 @@ export class VexFlowGraphicalSymbolFactory implements IGraphicalSymbolFactory {
      * @returns {VexFlowMeasure}
      */
     public createStaffMeasure(sourceMeasure: SourceMeasure, staff: Staff): StaffMeasure {
-        let measure: VexFlowMeasure = new VexFlowMeasure(staff, undefined, sourceMeasure);
-        return measure;
+        return new VexFlowMeasure(staff, undefined, sourceMeasure);
     }
 
     /**
@@ -95,7 +94,14 @@ export class VexFlowGraphicalSymbolFactory implements IGraphicalSymbolFactory {
      */
     public createNote(note: Note, numberOfDots: number, graphicalStaffEntry: GraphicalStaffEntry,
                       activeClef: ClefInstruction, octaveShift: OctaveEnum = OctaveEnum.NONE): GraphicalNote {
-        return new VexFlowGraphicalNote(note, graphicalStaffEntry, activeClef);
+        let graphicalNote: GraphicalNote = new VexFlowGraphicalNote(note, graphicalStaffEntry, activeClef);
+        let voiceID: number = note.ParentVoiceEntry.ParentVoice.VoiceId;
+        let mynotes: { [id: number]: GraphicalNote[]; } = (graphicalStaffEntry as VexFlowStaffEntry).mynotes;
+        if (!(voiceID in mynotes)) {
+            mynotes[voiceID] = [];
+        }
+        mynotes[voiceID].push(graphicalNote);
+        return graphicalNote;
     }
 
     /**

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -1,3 +1,4 @@
+import Vex = require("vexflow");
 import {StaffMeasure} from "../StaffMeasure";
 import {SourceMeasure} from "../../VoiceData/SourceMeasure";
 import {Staff} from "../../VoiceData/Staff";
@@ -8,9 +9,6 @@ import {KeyInstruction} from "../../VoiceData/Instructions/KeyInstruction";
 import {RhythmInstruction} from "../../VoiceData/Instructions/RhythmInstruction";
 import {VexFlowConverter} from "./VexFlowConverter";
 import {VexFlowStaffEntry} from "./VexFlowStaffEntry";
-//import {Fraction} from "../../../Common/DataObjects/fraction";
-
-import Vex = require("vexflow");
 
 export class VexFlowMeasure extends StaffMeasure {
     constructor(staff: Staff, staffLine: StaffLine = undefined, sourceMeasure: SourceMeasure = undefined) {
@@ -121,7 +119,9 @@ export class VexFlowMeasure extends StaffMeasure {
      * @param x
      */
     public setPositionInStaffline(x: number): void {
+        super.setPositionInStaffline(x);
         // Already implemented in VexFlow, it does _not_ call .format()
+        // Remove this:
         this.stave.setX(x);
     }
 
@@ -136,8 +136,8 @@ export class VexFlowMeasure extends StaffMeasure {
         // @Andrea: The following could be improved by storing the values in this object.
         //          Now it calls .format() implicitly.
         //
-        console.log("stave size", width, width - this.beginInstructionsWidth - this.endInstructionsWidth);
-        this.stave.setWidth(Math.floor(width));
+        super.setWidth(width);
+        this.stave.setWidth(width);
         if (this.formatVoices) {
             this.formatVoices(width - this.beginInstructionsWidth - this.endInstructionsWidth);
             this.formatVoices = undefined;
@@ -155,19 +155,6 @@ export class VexFlowMeasure extends StaffMeasure {
 
     public addGraphicalStaffEntry(entry: VexFlowStaffEntry): void {
         super.addGraphicalStaffEntry(entry);
-        let vfnotes: { [voiceID: number]: Vex.Flow.StaveNote; } = entry.vfnotes;
-        for (let id in vfnotes) {
-            if (vfnotes.hasOwnProperty(id)) {
-                if (!(id in this.voices)) {
-                    this.voices[id] = new Vex.Flow.Voice({
-                        beat_value: this.parentSourceMeasure.Duration.Denominator,
-                        num_beats: this.parentSourceMeasure.Duration.Numerator,
-                        resolution: Vex.Flow.RESOLUTION,
-                    }).setMode(Vex.Flow.Voice.Mode.SOFT);
-                }
-                this.voices[id].addTickable(vfnotes[id]);
-            }
-        }
     }
 
     public addGraphicalStaffEntryAtTimestamp(entry: VexFlowStaffEntry): void {
@@ -184,12 +171,14 @@ export class VexFlowMeasure extends StaffMeasure {
                 this.voices[voiceID].draw(ctx, this.stave);
             }
         }
+        console.log("X", (<any>this.stave).getX());
     }
 
     private increaseBeginInstructionWidth(): void {
         let modifiers: Vex.Flow.StaveModifier[] = this.stave.getModifiers();
         let modifier: Vex.Flow.StaveModifier = modifiers[modifiers.length - 1];
-        let padding: number = modifier.getCategory() === "keysignatures" ? modifier.getPadding(2) : 0;
+        //let padding: number = modifier.getCategory() === "keysignatures" ? modifier.getPadding(2) : 0;
+        let padding: number = modifier.getPadding(20);
         //modifier.getPadding(this.begModifiers);
         let width: number = modifier.getWidth();
         this.beginInstructionsWidth += padding + width;

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -29,6 +29,8 @@ import {VexFlowTextMeasurer} from "./VexFlowTextMeasurer";
 //import {VexFlowMeasure} from "./VexFlowMeasure";
 
 import Vex = require("vexflow");
+import {VexFlowStaffEntry} from "./VexFlowStaffEntry";
+import {VexFlowConverter} from "./VexFlowConverter";
 
 export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
     constructor() {
@@ -144,7 +146,22 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
      * @param graphicalStaffEntry
      */
     protected layoutStaffEntry(graphicalStaffEntry: GraphicalStaffEntry): void {
-        return;
+        let vfnotes: { [voiceID: number]: GraphicalNote[]; } = (graphicalStaffEntry as VexFlowStaffEntry).mynotes;
+        console.log("Unfortunately empty: ", vfnotes);
+        let measure: VexFlowMeasure = graphicalStaffEntry.parentMeasure as VexFlowMeasure;
+        let voices: { [voiceID: number]: Vex.Flow.Voice; } = measure.voices;
+        for (let id in vfnotes) {
+            if (vfnotes.hasOwnProperty(id)) {
+                if (!(id in voices)) {
+                    voices[id] = new Vex.Flow.Voice({
+                        beat_value: measure.parentSourceMeasure.Duration.Denominator,
+                        num_beats: measure.parentSourceMeasure.Duration.Numerator,
+                        resolution: Vex.Flow.RESOLUTION,
+                    }).setMode(Vex.Flow.Voice.Mode.SOFT);
+                }
+                voices[id].addTickable(VexFlowConverter.StaveNote(vfnotes[id]));
+            }
+        }
     }
 
     /**
@@ -155,14 +172,21 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
         for (let idx: number = 0, len: number = this.graphicalMusicSheet.MusicPages.length; idx < len; ++idx) {
             let graphicalMusicPage: GraphicalMusicPage = this.graphicalMusicSheet.MusicPages[idx];
             if (!this.leadSheet) {
+                let globalY: number = 0;
                 for (let idx2: number = 0, len2: number = graphicalMusicPage.MusicSystems.length; idx2 < len2; ++idx2) {
-                    //let musicSystem: MusicSystem = graphicalMusicPage.MusicSystems[idx2];
+                    let musicSystem: MusicSystem = graphicalMusicPage.MusicSystems[idx2];
                     // calculate y positions of stafflines within system
-                    // ...
+                    let y: number = 0;
+                    for (let line of musicSystem.StaffLines) {
+                        line.PositionAndShape.RelativePosition.y = y;
+                        y += 10;
+                    }
+                    // set y positions of systems using the previous system and a fixed distance.
+                    musicSystem.PositionAndShape.BorderBottom = y + 10;
+                    musicSystem.PositionAndShape.RelativePosition.y = globalY;
+                    globalY += y + 10;
                 }
             }
-            // set y positions of systems using the previous system and a fixed distance.
-            // ...
         }
     }
 

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -9,7 +9,13 @@ import {GraphicalMusicSheet} from "../GraphicalMusicSheet";
 export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
     constructor() {
         super();
+        this.canvas = document.createElement("canvas");
+        document.body.appendChild(this.canvas);
+        this.canvas.width = this.canvas.height = 10000;
     }
+
+    private canvas: HTMLCanvasElement;
+
     public drawSheet(graphicalMusicSheet: GraphicalMusicSheet): void {
         let h1: Element = document.createElement("h1");
         h1.textContent = "VexFlowMusicSheetDrawer Output";
@@ -18,12 +24,10 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
     }
 
     protected drawMeasure(measure: StaffMeasure): void {
-        //let vfMeasure: VexFlowMeasure = <VexFlowMeasure> measure;
-        //throw new Error("not implemented");
-        let canvas: HTMLCanvasElement = document.createElement("canvas");
-        document.body.appendChild(canvas);
-        canvas.width = canvas.height = 200;
-        return (measure as VexFlowMeasure).draw(canvas);
+        (measure as any).stave.setY(measure.PositionAndShape.AbsolutePosition.y);
+        (measure as any).stave.setX(measure.PositionAndShape.AbsolutePosition.x);
+        //this.stave.setX(x);
+        return (measure as VexFlowMeasure).draw(this.canvas);
     }
 
     protected applyScreenTransformation(rectangle: RectangleF2D): RectangleF2D {

src/MusicalScore/Graphical/VexFlow/VexFlowStaffEntry.ts

@@ -1,23 +1,12 @@
 import {GraphicalStaffEntry} from "../GraphicalStaffEntry";
 import {VexFlowMeasure} from "./VexFlowMeasure";
 import {SourceStaffEntry} from "../../VoiceData/SourceStaffEntry";
-import {VexFlowConverter} from "./VexFlowConverter";
+import {GraphicalNote} from "../GraphicalNote";
 
 export class VexFlowStaffEntry extends GraphicalStaffEntry {
     constructor(measure: VexFlowMeasure, sourceStaffEntry: SourceStaffEntry, staffEntryParent: VexFlowStaffEntry) {
         super(measure, sourceStaffEntry, staffEntryParent);
-
-        // Generate Vex.Flow.StaveNotes
-        let vfnotes: { [id: number]: Vex.Flow.StaveNote; } = {};
-        for (let note of this.notes) {
-            vfnotes[note[0].sourceNote.ParentVoiceEntry.ParentVoice.VoiceId] = VexFlowConverter.StaveNote(
-                note,
-                (this.parentMeasure as VexFlowMeasure).octaveOffset
-            );
-        }
-        this.vfnotes = vfnotes;
-        console.log("vfnotes generated", vfnotes);
     }
 
-    public vfnotes: { [id: number]: Vex.Flow.StaveNote; };
+    public mynotes: { [id: number]: GraphicalNote[]; } = {};
 }

src/MusicalScore/MusicSheet.ts

@@ -41,7 +41,7 @@ export class MusicSheet /*implements ISettableMusicSheet, IComparable<MusicSheet
         this.rules = EngravingRules.Rules;
         // (*) this.playbackSettings = new PlaybackSettings(new Fraction(4, 4, false), 100);
         this.userStartTempoInBPM = 100;
-        this.pageWidth = 120;
+        this.pageWidth = 1200;
         this.MusicPartManager = new MusicPartManager(this);
     }
     public static defaultTitle: string = "[kein Titel]";