Fallback Title Display

src/MusicSheetAPI.ts

@@ -5,106 +5,134 @@ import {GraphicalMusicSheet} from "./MusicalScore/Graphical/GraphicalMusicSheet"
 import {MusicSheetCalculator} from "./MusicalScore/Graphical/MusicSheetCalculator";
 import {VexFlowMusicSheetDrawer} from "./MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer";
 import {MusicSheet} from "./MusicalScore/MusicSheet";
-import {VexFlowTextMeasurer} from "./MusicalScore/Graphical/VexFlow/VexFlowTextMeasurer";
+import {Fraction} from "./Common/DataObjects/fraction";
+import {OutlineAndFillStyleEnum} from "./MusicalScore/Graphical/DrawingEnums";
 
 export class MusicSheetAPI {
-    constructor() {
-        this.free();
+    constructor(container: HTMLElement) {
+        this.container = container;
+        this.titles = document.createElement("div");
+        this.canvas = document.createElement("canvas");
+        this.container.appendChild(this.titles);
+        this.container.appendChild(this.canvas);
+        this.drawer = new VexFlowMusicSheetDrawer(this.titles, this.canvas);
     }
 
+    private container: HTMLElement;
+    private titles: HTMLElement;
     private canvas: HTMLCanvasElement;
     private sheet: MusicSheet;
     private drawer: VexFlowMusicSheetDrawer;
     private graphic: GraphicalMusicSheet;
-    private width: number;
     private zoom: number = 1.0;
     private unit: number = 10.0;
 
-    /**
-     * Initialize this object to default values
-     */
-    public free(): void {
-        this.width = undefined;
-        this.canvas = undefined;
-        this.sheet = undefined;
-        this.drawer = undefined;
-        this.graphic = undefined;
-        this.zoom = 1.0;
-        this.unit = 10.0;
-    }
+    private fraction: Fraction = new Fraction(0, 4);
 
     /**
      * Load a MusicXML file
      * @param doc is the root node of a MusicXML document
      */
-    public load(doc: Document): void {
-        let elem: Element = doc.getElementsByTagName("score-partwise")[0];
-        if (elem === undefined) {
-            throw new Error("Invalid partwise MusicXML document");
+    public load(content: string|Document): void {
+        this.reset();
+        let elem: Element;
+        let path: string = "Unknown path";
+        if (typeof content === "string") {
+            if ((<string>content).substr(0, 4) === "http") {
+                path = <string>content;
+                content = this.loadURL(path);
+            }
+            //if (<string>content.substr() === "")
+        }
+        if ("nodeName" in <any>content) {
+            elem = (<Document>content).getElementsByTagName("score-partwise")[0];
+            if (elem === undefined) {
+                throw new Error("Invalid partwise MusicXML document");
+            }
         }
         let score: IXmlElement = new IXmlElement(elem);
         let calc: MusicSheetCalculator = new VexFlowMusicSheetCalculator();
         let reader: MusicSheetReader = new MusicSheetReader();
-        this.sheet = reader.createMusicSheet(score, "*** unknown path ***");
+        this.sheet = reader.createMusicSheet(score, path);
         this.graphic = new GraphicalMusicSheet(this.sheet, calc);
-        this.display();
     }
 
     /**
-     * Set the drawing canvas
-     * @param canvas
+     * Set the zoom
+     * @param factor is the zooming factor
      */
-    public setCanvas(canvas: HTMLCanvasElement): void {
-        this.canvas = canvas;
-        this.drawer = new VexFlowMusicSheetDrawer(canvas, new VexFlowTextMeasurer());
+    public scale(factor: number): void {
+        this.zoom = factor;
     }
 
     /**
-     * Set the canvas width
-     * @param width
+     * Render the music sheet in the container
      */
-    public setWidth(width: number): void {
-        if (width === this.width) {
-            return;
-        }
-        this.width = width;
-        this.display();
-    }
-
-    /**
-     * Set the zoom
-     * @param k
-     */
-    public scale(k: number): void {
-        this.zoom = k;
-        this.display();
-    }
-
-    // FIXME: make the following private!
-    public display(): void {
-        if (this.width === undefined) {
-            return;
+    public render(): void {
+        this.resetTitle();
+        if (!this.graphic) {
+            throw new Error("OSMD: Before rendering a music sheet, please load a MusicXML file");
         }
-        if (this.canvas === undefined) {
-            return;
-        }
-        if (this.sheet === undefined) {
-            return;
+        let width: number = this.container.offsetWidth;
+        if (isNaN(width)) {
+            throw new Error("OSMD: Before rendering a music sheet, please set the width of the container");
         }
         // Set page width
-        this.sheet.pageWidth = this.width / this.zoom / this.unit;
+        this.sheet.pageWidth = width / this.zoom / this.unit;
         // Calculate again
         this.graphic.reCalculate();
         // Update Sheet Page
         let height: number = this.graphic.MusicPages[0].PositionAndShape.BorderBottom * this.unit * this.zoom;
-        this.drawer.resize(
-            this.width,
-            height
-        );
+        this.drawer.resize(width, height);
         // Fix the label problem
         // this.drawer.translate(0, 100);
         this.drawer.scale(this.zoom);
         // Finally, draw
         this.drawer.drawSheet(this.graphic);
     }
+
+    public next(): void {
+        //calculateCursorLineAtTimestamp
+        //let iterator: MusicPartManagerIterator = this.sheet.MusicPartManager.getIterator();
+        //while (!iterator.EndReached && iterator.CurrentVoiceEntries !== undefined) {
+        //    for (let idx: number = 0, len: number = iterator.CurrentVoiceEntries.length; idx < len; ++idx) {
+        //        let voiceEntry: VoiceEntry = iterator.CurrentVoiceEntries[idx];
+        //        for (let idx2: number = 0, len2: number = voiceEntry.Notes.length; idx2 < len2; ++idx2) {
+        //            let note: Note = voiceEntry.Notes[idx2];
+        //            note.state = NoteState.Normal;
+        //        }
+        //    }
+        //    iterator.moveToNext();
+        //}
+        this.graphic.Cursors.length = 0;
+        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(this.fraction, OutlineAndFillStyleEnum.PlaybackCursor));
+        this.fraction.Add(new Fraction(1, 8));
+        this.render();
+    }
+
+    private loadURL(url: string): Document {
+        return undefined;
+    }
+
+    //private loadMXL(content: string): Document {
+    //    return undefined;
+    //}
+
+    private resetTitle(): void {
+        // Empty this.titles
+        while (this.titles.firstChild) {
+            this.titles.removeChild(this.titles.firstChild);
+        }
+    }
+
+    /**
+     * Initialize this object to default values
+     */
+    private reset(): void {
+        this.sheet = undefined;
+        this.graphic = undefined;
+        this.zoom = 1.0;
+        this.unit = 10.0;
+        this.resetTitle();
+    }
 }

src/MusicalScore/Graphical/GraphicalMusicSheet.ts

@@ -300,7 +300,7 @@ export class GraphicalMusicSheet {
 
     public getOrCreateVerticalContainer(timestamp: Fraction): VerticalGraphicalStaffEntryContainer {
         if (this.verticalGraphicalStaffEntryContainers.length === 0 ||
-            timestamp > CollectionUtil.getLastElement(this.verticalGraphicalStaffEntryContainers).AbsoluteTimestamp) {
+            timestamp .lt(CollectionUtil.getLastElement(this.verticalGraphicalStaffEntryContainers).AbsoluteTimestamp)) {
             let verticalGraphicalStaffEntryContainer: VerticalGraphicalStaffEntryContainer =
                 new VerticalGraphicalStaffEntryContainer(this.numberOfStaves, timestamp);
             this.verticalGraphicalStaffEntryContainers.push(verticalGraphicalStaffEntryContainer);

src/MusicalScore/Graphical/VexFlow/VexFlowMeasure.ts

@@ -13,7 +13,6 @@ 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;
 import {Logging} from "../../../Common/logging";
 

src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -2,23 +2,26 @@ import Vex = require("vexflow");
 import {MusicSheetDrawer} from "../MusicSheetDrawer";
 import {RectangleF2D} from "../../../Common/DataObjects/RectangleF2D";
 import {VexFlowMeasure} from "./VexFlowMeasure";
-import {ITextMeasurer} from "../../Interfaces/ITextMeasurer";
 import {PointF2D} from "../../../Common/DataObjects/PointF2D";
 import {GraphicalLabel} from "../GraphicalLabel";
 import {VexFlowConverter} from "./VexFlowConverter";
+import {VexFlowTextMeasurer} from "./VexFlowTextMeasurer";
 
 export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
     private renderer: Vex.Flow.Renderer;
     private vfctx: Vex.Flow.CanvasContext;
     private ctx: CanvasRenderingContext2D;
+    private titles: HTMLElement;
+    private zoom: number = 1.0;
 
-    constructor(canvas: HTMLCanvasElement, textMeasurer: ITextMeasurer, isPreviewImageDrawer: boolean = false) {
-        super(textMeasurer, isPreviewImageDrawer);
+    constructor(titles: HTMLElement, canvas: HTMLCanvasElement, isPreviewImageDrawer: boolean = false) {
+        super(new VexFlowTextMeasurer(), isPreviewImageDrawer);
         this.renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
         this.vfctx = this.renderer.getContext();
         // The following is a hack to retrieve the actual canvas' drawing context
         // Not supposed to work forever....
         this.ctx = (this.vfctx as any).vexFlowCanvasContext;
+        this.titles = titles;
     }
 
     /**
@@ -26,6 +29,7 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
      * @param k is the zoom factor
      */
     public scale(k: number): void {
+        this.zoom = k;
         this.vfctx.scale(k, k);
     }
 
@@ -71,6 +75,20 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
      */
     protected renderLabel(graphicalLabel: GraphicalLabel, layer: number, bitmapWidth: number,
                           bitmapHeight: number, heightInPixel: number, screenPosition: PointF2D): void {
+        if (screenPosition.y < 0) {
+            // Temportary solution for title labels
+            let div: HTMLElement = document.createElement("div");
+            div.style.fontSize = (graphicalLabel.Label.fontHeight * this.zoom * 10.0) + "px";
+            //span.style.width = (bitmapWidth * this.zoom * 1.1) + "px";
+            //span.style.height = (bitmapHeight * this.zoom * 1.1) + "px";
+            //span.style.overflow = "hidden";
+            div.style.fontFamily = "Times New Roman";
+            //span.style.marginLeft = (screenPosition.x * this.zoom) + "px";
+            div.style.textAlign = "center";
+            div.appendChild(document.createTextNode(graphicalLabel.Label.text));
+            this.titles.appendChild(div);
+            return;
+        }
         let ctx: CanvasRenderingContext2D = (this.vfctx as any).vexFlowCanvasContext;
         let old: string = ctx.font;
         ctx.font = VexFlowConverter.font(

src/MusicalScore/MusicSheet.ts

@@ -39,7 +39,9 @@ export class PlaybackSettings {
 export class MusicSheet /*implements ISettableMusicSheet, IComparable<MusicSheet>*/ {
     constructor() {
         this.rules = EngravingRules.Rules;
-        // (*) this.playbackSettings = new PlaybackSettings(new Fraction(4, 4, false), 100);
+        this.playbackSettings = new PlaybackSettings();
+        // FIXME:
+        this.playbackSettings.rhythm = new Fraction(4, 4, false);
         this.userStartTempoInBPM = 100;
         this.pageWidth = 120;
         this.MusicPartManager = new MusicPartManager(this);

test/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -5,7 +5,6 @@ import {MusicSheetReader} from "../../../../src/MusicalScore/ScoreIO/MusicSheetR
 import {VexFlowMusicSheetCalculator} from "../../../../src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator";
 import {TestUtils} from "../../../Util/TestUtils";
 import {IXmlElement} from "../../../../src/Common/FileIO/Xml";
-import {VexFlowTextMeasurer} from "../../../../src/MusicalScore/Graphical/VexFlow/VexFlowTextMeasurer";
 import {Fraction} from "../../../../src/Common/DataObjects/fraction";
 import {OutlineAndFillStyleEnum} from "../../../../src/MusicalScore/Graphical/DrawingEnums";
 
@@ -24,12 +23,12 @@ describe("VexFlow Music Sheet Drawer", () => {
 
         // Create heading in the test page
         let h1: Element = document.createElement("h1");
-        h1.textContent = "VexFlowMusicSheetDrawer Output";
+        h1.textContent = "VexFlowMusicSheetDrawer Test Output";
         document.body.appendChild(h1);
         // Create the canvas in the document:
         let canvas: HTMLCanvasElement = document.createElement("canvas");
         document.body.appendChild(canvas);
-        (new VexFlowMusicSheetDrawer(canvas, new VexFlowTextMeasurer())).drawSheet(gms);
+        (new VexFlowMusicSheetDrawer(document.body, canvas)).drawSheet(gms);
         done();
     });