lazy-widgets/dist/widgets/CanvasEffectsContainer.js

Typescript retained mode GUI for the HTML canvas API

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { damageField } from '../decorators/FlagFields.js';
import { SingleParentXMLInputConfig } from '../xml/SingleParentXMLInputConfig.js';
import { CanvasContainer } from './CanvasContainer.js';
// TODO filter-less shadows. this should also let us use damage regions without
//      destroying performance (see shadow(Offset[XY]|Color|Blur).
//      for this to be worth it we need to know exactly the pixel radius of a
//      shadowBlur unit. apparently 1 shadowBlur unit = 0.5 gaussian blur
//      standard deviations. how much is a standard deviation as radius pixels?
//      who knows...
/**
 * A {@link CanvasContainer} which applies visual effects to the child widget.
 */
export class CanvasEffectsContainer extends CanvasContainer {
    constructor(child, properties) {
        var _a, _b, _c;
        super(child, properties);
        this.opacity = (_a = properties === null || properties === void 0 ? void 0 : properties.opacity) !== null && _a !== void 0 ? _a : 1;
        this.compositeOperation = (_b = properties === null || properties === void 0 ? void 0 : properties.compositeOperation) !== null && _b !== void 0 ? _b : 'source-over';
        this.filter = (_c = properties === null || properties === void 0 ? void 0 : properties.filter) !== null && _c !== void 0 ? _c : 'none';
    }
    handleInternalCanvasPainting(clippedViewportRect) {
        const ctx = this.viewport.context;
        ctx.save();
        ctx.globalAlpha = this.opacity;
        ctx.globalCompositeOperation = this.compositeOperation;
        if (this.filter !== 'none') {
            ctx.filter = this.filter;
            ctx.beginPath();
            ctx.rect(this.x, this.y, this.width, this.height);
            ctx.clip();
        }
        super.handleInternalCanvasPainting(clippedViewportRect);
        ctx.restore();
    }
    handleCanvasDamage(rect) {
        if (this.filter !== 'none') {
            // XXX assume damage to the whole container if there is a filter, as
            //     the filter could be non-local (such as shadows and blur)
            rect[0] = this.x;
            rect[1] = this.y;
            rect[2] = this.width;
            rect[3] = this.height;
        }
        return true;
    }
}
CanvasEffectsContainer.autoXML = {
    name: 'canvas-effects-container',
    inputConfig: SingleParentXMLInputConfig
};
__decorate([
    damageField
], CanvasEffectsContainer.prototype, "opacity", void 0);
__decorate([
    damageField
], CanvasEffectsContainer.prototype, "compositeOperation", void 0);
__decorate([
    damageField
], CanvasEffectsContainer.prototype, "filter", void 0);
//# sourceMappingURL=CanvasEffectsContainer.js.map