Merge branch 'feature/OSMD-6_Porting' of https://github.com/opensheetmusicdisplay/opensheetmusicdisplay into feature/OSMD-6_Porting

external/vexflow/vexflow.d.ts

@@ -7,8 +7,8 @@ declare namespace Vex {
 
       public hasMinTotalWidth: boolean;
       public minTotalWidth: number;
-      public joinVoices(voices: Vex.Flow.Voice[]): void;
-
+      public joinVoices(voices: Voice[]): void;
+      public format(voices: Voice[], width: number): void;
       public preCalculateMinTotalWidth(voices: Voice[]): number;
     }
 
@@ -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[];
@@ -63,7 +64,7 @@ declare namespace Vex {
       public getSpacingBetweenLines(): number;
       public getNumLines(): number;
       public getLineForY(y: number): number;
-      public getModifiers(pos: any, cat: any): Vex.Flow.Clef[]; // FIXME
+      public getModifiers(pos: any, cat: any): Clef[]; // FIXME
       public setContext(ctx: any): Stave;
       public addModifier(mod: any, pos: any): void;
       public draw(): void;
@@ -88,8 +89,8 @@ declare namespace Vex {
       public x: number;
       public stave: Stave;
 
-      public getBoundingBox(): Vex.Flow.BoundingBox;
-      public setStave(stave: Vex.Flow.Stave): void;
+      public getBoundingBox(): BoundingBox;
+      public setStave(stave: Stave): void;
     }
 
     export class Renderer {

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/MusicSheetDrawer.ts

@@ -4,6 +4,7 @@ import {StaffLine} from "./StaffLine";
 import {RectangleF2D} from "../../Common/DataObjects/RectangleF2D";
 import {MusicSystem} from "./MusicSystem";
 import {GraphicalMusicPage} from "./GraphicalMusicPage";
+import {VexFlowMeasure} from "./VexFlow/VexFlowMeasure";
 
 export class MusicSheetDrawer {
     private graphicalMusicSheet: GraphicalMusicSheet;

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,8 +9,8 @@ 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 {VexFlowGraphicalNote} from "./VexFlowGraphicalNote";
+import {GraphicalNote} from "../GraphicalNote";
 
 export class VexFlowConverter {
     private static majorMap: {[_: number]: string; } = {
@@ -23,8 +23,22 @@ export class VexFlowConverter {
     };
 
     public static duration(fraction: Fraction): string {
-        // FIXME TODO
-        return "q";
+        let dur: number = fraction.RealValue;
+        switch (dur) {
+            case 0.25:
+                return "q";
+            case 0.5:
+                return "h";
+            case 1:
+                return "w";
+            case 0.125:
+                return "8";
+            case 0.0625:
+                return "16";
+            // FIXME TODO
+            default:
+                return "16";
+        }
     }
 
     /**
@@ -33,12 +47,10 @@ export class VexFlowConverter {
      * @param pitch
      * @returns {string[]}
      */
-    public static pitch(pitch: Pitch): [string, string] {
-        if (pitch.FundamentalNote === undefined) {
-            return ["", ""];
-        }
+    public static pitch(pitch: Pitch, octaveOffset: number): [string, string] {
         let fund: string = NoteEnum[pitch.FundamentalNote].toLowerCase();
-        let octave: number = pitch.Octave;
+        let octave: number = pitch.Octave + octaveOffset + 3;
+        console.log("pitch", pitch.Octave, octaveOffset);
         let acc: string = "";
 
         switch (pitch.Accidental) {
@@ -61,12 +73,18 @@ export class VexFlowConverter {
         return [fund + acc + "/" + octave, acc];
     }
 
-    public static StaveNote(voiceEntry: VoiceEntry): Vex.Flow.StaveNote {
+    public static StaveNote(notes: GraphicalNote[]): Vex.Flow.StaveNote {
         let keys: string[] = [];
-        let duration: string = VexFlowConverter.duration(voiceEntry.Notes[0].Length);
+        let duration: string = VexFlowConverter.duration(notes[0].sourceNote.Length);
         let accidentals: string[] = [];
-        for (let note of voiceEntry.Notes) {
-            let res: [string, string] = VexFlowConverter.pitch(note.Pitch);
+        for (let note of notes) {
+            let res: [string, string] = (note as VexFlowGraphicalNote).vfpitch;
+            if (res === undefined) {
+                keys = ["b/4"];
+                accidentals = [];
+                duration += "r";
+                break;
+            }
             keys.push(res[0]);
             accidentals.push(res[1]);
         }
@@ -127,14 +145,20 @@ export class VexFlowConverter {
         if (key === undefined) {
             return undefined;
         }
+        let ret: string;
         switch (key.Mode) {
             case KeyEnum.none:
-                return undefined;
+                ret = undefined;
+                break;
             case KeyEnum.minor:
-                return VexFlowConverter.minorMap[key.Key];
+                ret = VexFlowConverter.minorMap[key.Key] + "m";
+                break;
             case KeyEnum.major:
-                return VexFlowConverter.majorMap[key.Key] + "m";
+                ret = VexFlowConverter.majorMap[key.Key];
+                break;
             default:
         }
+        //console.log("keySignature", key, ret);
+        return ret;
     }
 }

src/MusicalScore/Graphical/VexFlow/VexFlowGraphicalNote.ts

@@ -1,9 +1,18 @@
 import {GraphicalNote} from "../GraphicalNote";
 import {Note} from "../../VoiceData/Note";
 import {GraphicalStaffEntry} from "../GraphicalStaffEntry";
+import {ClefInstruction} from "../../VoiceData/Instructions/ClefInstruction";
+import {VexFlowConverter} from "./VexFlowConverter";
 
 export class VexFlowGraphicalNote extends GraphicalNote {
-    constructor(note: Note, parent: GraphicalStaffEntry) {
+    constructor(note: Note, parent: GraphicalStaffEntry, activeClef: ClefInstruction) {
         super(note, parent);
+        if (note.Pitch) {
+            this.vfpitch = VexFlowConverter.pitch(note.Pitch, activeClef.OctaveOffset);
+        } else {
+            this.vfpitch = undefined;
+        }
     }
+
+    public vfpitch: [string, string];
 }

src/MusicalScore/Graphical/VexFlow/VexFlowGraphicalSymbolFactory.ts

@@ -17,6 +17,7 @@ import {OctaveEnum} from "../../VoiceData/Expressions/ContinuousExpressions/octa
 import {GraphicalNote} from "../GraphicalNote";
 import {Pitch} from "../../../Common/DataObjects/pitch";
 import {TechnicalInstruction} from "../../VoiceData/Instructions/TechnicalInstruction";
+import {VexFlowGraphicalNote} from "./VexFlowGraphicalNote";
 
 export class VexFlowGraphicalSymbolFactory implements IGraphicalSymbolFactory {
     /**
@@ -47,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);
     }
 
     /**
@@ -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,8 +93,16 @@ export class VexFlowGraphicalSymbolFactory implements IGraphicalSymbolFactory {
      */
     public createNote(note: Note, numberOfDots: number, graphicalStaffEntry: GraphicalStaffEntry,
                       activeClef: ClefInstruction, octaveShift: OctaveEnum = OctaveEnum.NONE): GraphicalNote {
-        let gn: GraphicalNote = new GraphicalNote(note, graphicalStaffEntry);
-        return gn;
+        // 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)) {
+            mynotes[voiceID] = [];
+        }
+        mynotes[voiceID].push(graphicalNote);
+        return graphicalNote;
     }
 
     /**
@@ -109,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

@@ -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) {
@@ -21,10 +19,18 @@ export class VexFlowMeasure extends StaffMeasure {
         //this.duration = this.parentSourceMeasure.Duration;
     }
 
+    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.
@@ -67,6 +73,7 @@ export class VexFlowMeasure extends StaffMeasure {
      * @param clef
      */
     public addClefAtBegin(clef: ClefInstruction): void {
+        this.octaveOffset = clef.OctaveOffset;
         let vfclef: string = VexFlowConverter.Clef(clef);
         this.stave.addClef(vfclef, undefined, undefined, Vex.Flow.Modifier.Position.BEGIN);
         this.increaseBeginInstructionWidth();
@@ -113,16 +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 {
-        // Already implemented in VexFlow, it does _not_ call .format()
-        this.stave.setX(x);
-    }
-
-    /**
      * Sets the overall x-width of the measure.
      * @param width
      */
@@ -132,7 +129,13 @@ export class VexFlowMeasure extends StaffMeasure {
         // modifiers like clefs. In PS, width is the total width of the stave.
         // @Andrea: The following could be improved by storing the values in this object.
         //          Now it calls .format() implicitly.
-        this.stave.setWidth(width - this.beginInstructionsWidth - this.endInstructionsWidth);
+        //
+        super.setWidth(width);
+        this.stave.setWidth(width * this.unit);
+        if (this.formatVoices) {
+            this.formatVoices((width - this.beginInstructionsWidth - this.endInstructionsWidth) * this.unit);
+            this.formatVoices = undefined;
+        }
     }
 
     /**
@@ -141,26 +144,11 @@ export class VexFlowMeasure extends StaffMeasure {
      * (multiply the minimal positions with the scaling factor, considering the BeginInstructionsWidth)
      */
     public layoutSymbols(): void {
-        // This is already done in the MusicSystemBuilder!
-        //this.setWidth(this.minimumStaffEntriesWidth * this.staffEntriesScaleFactor);
         this.stave.format();
     }
 
     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 {
@@ -182,10 +170,11 @@ export class VexFlowMeasure extends StaffMeasure {
     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;
+        this.beginInstructionsWidth += (padding + width) / this.unit;
     }
 
     private increaseEndInstructionWidth(): void {
@@ -193,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

@@ -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() {
@@ -78,10 +80,15 @@ 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;
         }
+        firstMeasure.formatVoices = (w: number) => {
+            formatter.format(allVoices, w);
+        };
         return width;
     }
 
@@ -140,7 +147,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]));
+            }
+        }
     }
 
     /**
@@ -151,14 +173,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

@@ -1,22 +1,35 @@
 import {MusicSheetDrawer} from "../MusicSheetDrawer";
 import {RectangleF2D} from "../../../Common/DataObjects/RectangleF2D";
-import {StaffMeasure} from "../StaffMeasure";
 import {VexFlowMeasure} from "./VexFlowMeasure";
+import {GraphicalMusicSheet} from "../GraphicalMusicSheet";
 /**
  * Created by Matthias on 22.06.2016.
  */
 export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
     constructor() {
         super();
+        // Create the canvas in the document:
+        this.canvas = document.createElement("canvas");
+        document.body.appendChild(this.canvas);
+        // FIXME: units
+        this.canvas.width = this.canvas.height = 10 * 100;
     }
 
-    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 = 100;
-        return (measure as VexFlowMeasure).draw(canvas);
+    private canvas: HTMLCanvasElement;
+
+    public drawSheet(graphicalMusicSheet: GraphicalMusicSheet): void {
+        let h1: Element = document.createElement("h1");
+        h1.textContent = "VexFlowMusicSheetDrawer Output";
+        document.body.appendChild(h1);
+        super.drawSheet(graphicalMusicSheet);
+    }
+
+    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/Graphical/VexFlow/VexFlowStaffEntry.ts

@@ -1,21 +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 voiceEntry of this.sourceStaffEntry.VoiceEntries) {
-            console.log("NEVER HERE!");
-            vfnotes[voiceEntry.ParentVoice.VoiceId] = VexFlowConverter.StaveNote(voiceEntry);
-        }
-        this.vfnotes = vfnotes;
-        console.log("vfnotes generated", vfnotes, "==>", this.sourceStaffEntry.VoiceEntries);
     }
 
-    public vfnotes: { [id: number]: Vex.Flow.StaveNote; };
+    public mynotes: { [id: number]: GraphicalNote[]; } = {};
 }