@stringsync/vexml/dist/esm/rendering/debugrect.js

MusicXML to Vexflow

import * as util from '../util';
import { Point } from '../spatial';
import { Label } from './label';
const DEFAULT_STYLE_FONT_COLOR = 'rgb(230, 0, 0)';
const DEFAULT_STYLE_FILL = 'rgba(255, 0, 0, 0.2)';
const DEFAULT_STYLE_STROKE = 'rgba(255, 0, 0, 0.5)';
export class DebugRect {
    config;
    log;
    label;
    rect;
    style;
    ctx = null;
    constructor(config, log, label, rect, style) {
        this.config = config;
        this.log = log;
        this.label = label;
        this.rect = rect;
        this.style = style;
    }
    setContext(ctx) {
        this.ctx = ctx;
        return this;
    }
    draw() {
        const ctx = this.ctx;
        util.assertNotNull(ctx);
        ctx.save();
        const padding = {};
        const font = {
            color: DEFAULT_STYLE_FONT_COLOR,
            size: '8px',
            family: 'monospace',
        };
        // Draw the main label in the bottom left corner.
        if (this.label) {
            const bottomLeft = this.rect.bottomLeft();
            const position = new Point(bottomLeft.x + 1, bottomLeft.y - 1);
            Label.singleLine(this.config, this.log, this.label, position, padding, font).setContext(ctx).draw();
        }
        // Draw the height label on the middle of the left side.
        const heightLabelPosition = new Point(this.rect.x + 1, this.rect.center().y + 3);
        const heightLabel = `${Math.round(this.rect.h)}`;
        Label.singleLine(this.config, this.log, heightLabel, heightLabelPosition, padding, font).setContext(ctx).draw();
        // Draw the width label on the middle of the bottom side.
        const widthLabelPosition = new Point(this.rect.center().x, this.rect.y + this.rect.h - 1);
        const widthLabel = `${Math.round(this.rect.w)}`;
        Label.singleLine(this.config, this.log, widthLabel, widthLabelPosition, padding, font).setContext(ctx).draw();
        // Draw the position label on the top left corner.
        const positionLabelPosition = new Point(this.rect.x + 1, this.rect.y + 8);
        const positionLabel = `${Math.round(this.rect.x)},${Math.round(this.rect.y)}`;
        Label.singleLine(this.config, this.log, positionLabel, positionLabelPosition, padding, font).setContext(ctx).draw();
        this.drawRect(this.rect);
        ctx.restore();
        return this;
    }
    drawRect(rect) {
        const ctx = this.ctx;
        util.assertNotNull(ctx);
        ctx.save();
        const stroke = this.style?.stroke ?? DEFAULT_STYLE_STROKE;
        ctx.setStrokeStyle(stroke);
        ctx.beginPath();
        ctx.rect(rect.x, rect.y, rect.w, rect.h);
        ctx.stroke();
        ctx.closePath();
        const fill = this.style?.fill ?? DEFAULT_STYLE_FILL;
        ctx.setFillStyle(fill);
        ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
        ctx.restore();
    }
}