lazy-widgets/dist/widgets/CanvasEffectsContainer.d.ts

Typescript retained mode GUI for the HTML canvas API

import { ClippedViewportRect } from '../core/BaseViewport.js';
import { type Rect } from '../helpers/Rect.js';
import { type WidgetAutoXML } from '../xml/WidgetAutoXML.js';
import { CanvasContainer } from './CanvasContainer.js';
import { Widget, type WidgetProperties } from './Widget.js';
export interface CanvasEffectsContainerProperties extends WidgetProperties {
    /** Sets {@link CanvasEffectsContainer#opacity}. */
    opacity?: number;
    /** Sets {@link CanvasEffectsContainer#compositeOperation}. */
    compositeOperation?: GlobalCompositeOperation;
    /** Sets {@link CanvasEffectsContainer#filter}. */
    filter?: string;
}
/**
 * A {@link CanvasContainer} which applies visual effects to the child widget.
 */
export declare class CanvasEffectsContainer<W extends Widget = Widget> extends CanvasContainer<W> {
    static autoXML: WidgetAutoXML;
    /**
     * The opacity of the container, as a factor from 0 to 1. Defaults to 1
     * (opaque).
     *
     * Although you can apply opacity via filters, it's much cheaper to use this
     * property. See the {@link CanvasEffectsContainer#filter} documentation for
     * details.
     */
    opacity: number;
    /**
     * The compositing or blending mode to use when painting the canvas:
     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation}
     */
    compositeOperation: GlobalCompositeOperation;
    /**
     * Applies a CSS filter to the container. This can be anything accepted by
     * the filter property:
     * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter}
     *
     * Note that applying CSS filters is expensive. This is because filters
     * could be anything, meaning we have to assume the worst-case scenario;
     * non-local filters. Since some filters like drop-shadows and blur affect
     * their surrounding pixels (non-local), we have to apply
     * otherwise-unnecessary clipping, as well as assume that any damage to the
     * child widget could propagate to the entire container.
     *
     * Note also that, for now, widgets can only paint to their bounds. This
     * means that if you have an effect that goes outside of the child widget's
     * bounds, you need to use container padding, otherwise the effect will be
     * clipped.
     *
     * For this reason, you should only use this property if there is no
     * alternative. For example, don't use this property for opacity; instead,
     * use {@link CanvasEffectsContainer#opacity}.
     */
    filter: string;
    constructor(child: W, properties?: Readonly<CanvasEffectsContainerProperties>);
    protected handleInternalCanvasPainting(clippedViewportRect: ClippedViewportRect): void;
    protected handleCanvasDamage(rect: Rect): boolean;
}