Fixing units

external/vexflow/vexflow.d.ts

@@ -51,6 +51,7 @@ declare namespace Vex {
       public end_x: number;
 
       public setX(x: number): Stave;
+      public setY(y: number): Stave;
       public addClef(clefSpec: string, size: any, annotation: any, position: any): void;
       public setEndClef(clefSpec: string, size: any, annotation: any): void;
       public getModifiers(): StaveModifier[];

src/MusicalScore/Graphical/VexFlow/VexFlowGraphicalSymbolFactory.ts

@@ -57,8 +57,7 @@ export class VexFlowGraphicalSymbolFactory implements IGraphicalSymbolFactory {
      * @returns {VexFlowMeasure}
      */
     public createExtraStaffMeasure(staffLine: StaffLine): StaffMeasure {
-        let measure: VexFlowMeasure = new VexFlowMeasure(staffLine.ParentStaff, staffLine);
-        return measure;
+        return new VexFlowMeasure(staffLine.ParentStaff, staffLine);
     }
 
     /**
@@ -94,7 +93,9 @@ export class VexFlowGraphicalSymbolFactory implements IGraphicalSymbolFactory {
      */
     public createNote(note: Note, numberOfDots: number, graphicalStaffEntry: GraphicalStaffEntry,
                       activeClef: ClefInstruction, octaveShift: OctaveEnum = OctaveEnum.NONE): GraphicalNote {
+        // Creates the note:
         let graphicalNote: GraphicalNote = new VexFlowGraphicalNote(note, graphicalStaffEntry, activeClef);
+        // Adds the note to the right (graphical) voice (mynotes)
         let voiceID: number = note.ParentVoiceEntry.ParentVoice.VoiceId;
         let mynotes: { [id: number]: GraphicalNote[]; } = (graphicalStaffEntry as VexFlowStaffEntry).mynotes;
         if (!(voiceID in mynotes)) {
@@ -115,8 +116,7 @@ export class VexFlowGraphicalSymbolFactory implements IGraphicalSymbolFactory {
      */
     public createGraceNote(note: Note, numberOfDots: number, graphicalStaffEntry: GraphicalStaffEntry,
                            activeClef: ClefInstruction, octaveShift: OctaveEnum = OctaveEnum.NONE): GraphicalNote {
-        let gn: GraphicalNote = new GraphicalNote(note, graphicalStaffEntry);
-        return gn;
+        return new GraphicalNote(note, graphicalStaffEntry);
     }
 
     /**

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -22,9 +22,15 @@ export class VexFlowMeasure extends StaffMeasure {
     public octaveOffset: number = 3; // FIXME
     public voices: { [voiceID: number]: Vex.Flow.Voice; };
     public formatVoices: (width: number) => void;
+    public unit: number = 10.0;
     private stave: Vex.Flow.Stave;
     //private duration: Fraction;
 
+    public setAbsoluteCoordinates(x: number, y: number): void {
+        this.stave.setX(x);
+        this.stave.setY(y);
+    }
+
     /**
      * Reset all the geometric values and parameters of this measure and put it in an initialized state.
      * This is needed to evaluate a measure a second time by system builder.
@@ -114,18 +120,6 @@ export class VexFlowMeasure extends StaffMeasure {
     }
 
     /**
-     * Set the x-position relative to the staffline.
-     * (y-Position is always 0 relative to the staffline)
-     * @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);
-    }
-
-    /**
      * Sets the overall x-width of the measure.
      * @param width
      */
@@ -137,9 +131,9 @@ export class VexFlowMeasure extends StaffMeasure {
         //          Now it calls .format() implicitly.
         //
         super.setWidth(width);
-        this.stave.setWidth(width);
+        this.stave.setWidth(width * this.unit);
         if (this.formatVoices) {
-            this.formatVoices(width - this.beginInstructionsWidth - this.endInstructionsWidth);
+            this.formatVoices((width - this.beginInstructionsWidth - this.endInstructionsWidth) * this.unit);
             this.formatVoices = undefined;
         }
     }
@@ -171,7 +165,6 @@ export class VexFlowMeasure extends StaffMeasure {
                 this.voices[voiceID].draw(ctx, this.stave);
             }
         }
-        console.log("X", (<any>this.stave).getX());
     }
 
     private increaseBeginInstructionWidth(): void {
@@ -181,7 +174,7 @@ export class VexFlowMeasure extends StaffMeasure {
         let padding: number = modifier.getPadding(20);
         //modifier.getPadding(this.begModifiers);
         let width: number = modifier.getWidth();
-        this.beginInstructionsWidth += padding + width;
+        this.beginInstructionsWidth += (padding + width) / this.unit;
     }
 
     private increaseEndInstructionWidth(): void {
@@ -189,6 +182,6 @@ export class VexFlowMeasure extends StaffMeasure {
         let modifier: Vex.Flow.StaveModifier = modifiers[modifiers.length - 1];
         let padding: number = 0; //modifier.getPadding(this.endModifiers++);
         let width: number = modifier.getWidth();
-        this.endInstructionsWidth += padding + width;
+        this.endInstructionsWidth += (padding + width) / this.unit;
     }
 }

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator.ts

@@ -80,12 +80,13 @@ export class VexFlowMusicSheetCalculator extends MusicSheetCalculator {
             }
             formatter.joinVoices(voices);
         }
-        let width: number = formatter.preCalculateMinTotalWidth(allVoices);
+        let firstMeasure: VexFlowMeasure = measures[0] as VexFlowMeasure;
+        let width: number = formatter.preCalculateMinTotalWidth(allVoices) / firstMeasure.unit;
         for (let measure of measures) {
             measure.minimumStaffEntriesWidth = width;
             (measure as VexFlowMeasure).formatVoices = undefined;
         }
-        (measures[0] as VexFlowMeasure).formatVoices = (w: number) => {
+        firstMeasure.formatVoices = (w: number) => {
             formatter.format(allVoices, w);
         };
         return width;

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -1,6 +1,5 @@
 import {MusicSheetDrawer} from "../MusicSheetDrawer";
 import {RectangleF2D} from "../../../Common/DataObjects/RectangleF2D";
-import {StaffMeasure} from "../StaffMeasure";
 import {VexFlowMeasure} from "./VexFlowMeasure";
 import {GraphicalMusicSheet} from "../GraphicalMusicSheet";
 /**
@@ -9,9 +8,11 @@ import {GraphicalMusicSheet} from "../GraphicalMusicSheet";
 export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
     constructor() {
         super();
+        // Create the canvas in the document:
         this.canvas = document.createElement("canvas");
         document.body.appendChild(this.canvas);
-        this.canvas.width = this.canvas.height = 10000;
+        // FIXME: units
+        this.canvas.width = this.canvas.height = 10 * 100;
     }
 
     private canvas: HTMLCanvasElement;
@@ -23,11 +24,12 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
         super.drawSheet(graphicalMusicSheet);
     }
 
-    protected drawMeasure(measure: StaffMeasure): void {
-        (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 drawMeasure(measure: VexFlowMeasure): void {
+        measure.setAbsoluteCoordinates(
+            measure.PositionAndShape.AbsolutePosition.x * (measure as VexFlowMeasure).unit,
+            measure.PositionAndShape.AbsolutePosition.y * (measure as VexFlowMeasure).unit
+        );
+        return measure.draw(this.canvas);
     }
 
     protected applyScreenTransformation(rectangle: RectangleF2D): RectangleF2D {

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 = 1200;
+        this.pageWidth = 120;
         this.MusicPartManager = new MusicPartManager(this);
     }
     public static defaultTitle: string = "[kein Titel]";