@woosh/meep-engine/editor/view/ecs/components/common/AutoCanvasView.js

Pure JavaScript game engine. Fully featured and production ready.

import { DomSizeObserver } from "../../../../../src/view/util/DomSizeObserver.js";
import { CanvasView } from "../../../../../src/view/elements/CanvasView.js";

/**
 * Automatically tracks size on the screen, including that computed from CSS and - re-renders content when size changes
 * @extends View
 */
export class AutoCanvasView extends CanvasView {
    constructor({ classList = [] } = {}) {
        super();

        this.addClasses(classList);

        const sizeObserver = new DomSizeObserver();
        this.__sizeObserver = sizeObserver;

        const size = sizeObserver.dimensions.size;

        // subscribe to visual dimension changes
        size.onChanged.add(this.render, this);

        sizeObserver.watchView(this);
        this.on.linked.add(this.render,this);
    }

    render() {
        const dimensions = this.__sizeObserver.dimensions;
        const size = dimensions.size;

        const width = size.x;
        const height = size.y;

        if (width <= 0 || height <= 0) {
            //canvas too small
            return;
        }

        // resize canvas as necessary
        this.size.set(width, height);

        this.draw(this.context2d, width, height);
    }

    /**
     *
     * @param {CanvasRenderingContext2D} ctx
     * @param {number} width
     * @param {number} height
     */
    draw(ctx, width, height) {
        //override this method
    }
}