osmd-extended/src/MusicSheetAPI.ts

import {IXmlElement} from "./Common/FileIO/Xml";
import {VexFlowMusicSheetCalculator} from "./MusicalScore/Graphical/VexFlow/VexFlowMusicSheetCalculator";
import {MusicSheetReader} from "./MusicalScore/ScoreIO/MusicSheetReader";
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";

export class MusicSheetAPI {
    constructor() {
        this.free();
    }

    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;
    }

    /**
     * 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");
        }
        let score: IXmlElement = new IXmlElement(elem);
        let calc: MusicSheetCalculator = new VexFlowMusicSheetCalculator();
        let reader: MusicSheetReader = new MusicSheetReader();
        this.sheet = reader.createMusicSheet(score, "*** unknown path ***");
        this.graphic = new GraphicalMusicSheet(this.sheet, calc);
        this.display();
    }

    /**
     * Set the drawing canvas
     * @param canvas
     */
    public setCanvas(canvas: HTMLCanvasElement): void {
        this.canvas = canvas;
        this.drawer = new VexFlowMusicSheetDrawer(canvas, new VexFlowTextMeasurer());
    }

    /**
     * Set the canvas width
     * @param width
     */
    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;
        }
        if (this.canvas === undefined) {
            return;
        }
        if (this.sheet === undefined) {
            return;
        }
        // Set page width
        this.sheet.pageWidth = this.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
        );
        // Fix the label problem
        // this.drawer.translate(0, 100);
        this.drawer.scale(this.zoom);
        // Finally, draw
        this.drawer.drawSheet(this.graphic);
    }
}