the-world-engine/dist/esm/engine/script/render/CssRenderer.d.ts

three.js based, unity like game engine for browser

import type { ReadonlyVector2 } from "../../../engine/math/ReadonlyVector2";
import { Component } from "../../hierarchy_object/Component";
import { CSS3DObject } from "../../render/CSS3DRenderer";
import { CssFilter } from "./filter/CssFilter";
/**
 * Options for rendering css objects of unknown size.
 */
export interface IUnknownSizeCssRenderOption {
    /**
     * element viewScale
     *
     * value to scaling html element. the smaller value, the higher resolution of element.
     *
     * note: if the viewScale is greater than 1, render will have different behaviour depending on the browser. In the case of firefox, normal operation is guaranteed.
     * @param value
     */
    viewScale: number;
    /**
     * if true, pointerEvents is auto that means is receive pointerEvent like onClick.
     * otherwise, pointerEvents is none.
     */
    pointerEvents: boolean;
    /**
     * css filter
     */
    filter: CssFilter;
}
/**
 * Options used on most css objects with finite size.
 */
export interface ICssRenderOption extends IUnknownSizeCssRenderOption {
    /**
     * centerOffset is offset from center of object.
     *
     * if centerOffset is (0.5, 0), object center is left center.
     * if centerOffset is (0.5, 0.5), object center is top left center.
     */
    centerOffset: ReadonlyVector2;
}
/**
 * precision problems occur when css space and actual game space are 1:1
 *
 * This constant specifies the ratio of css space to match the game space
 *
 * The default value is 0.1, and the css space and game space correspond to 10:1
 *
 * This value is not designed to be changed by default. However, if an engine bug occurs in the future, the value may change.
 */
export declare const enum CssRendererConst {
    LengthUnitScalar = 0.1
}
/**
 * css renderer base class
 *
 * you can't use this class directly, but you can use its subclasses e.g. `CssSpriteRenderer`, `CssTextRenderer`
 */
export declare class CssRenderer<T extends HTMLElement> extends Component implements ICssRenderOption {
    protected css3DObject: CSS3DObject | null;
    protected htmlElement: T | null;
    private readonly _centerOffset;
    private _viewScale;
    private _pointerEvents;
    private readonly onFilterUpdate;
    private readonly _filter;
    private _readyToDraw;
    /**
     * start method will initialize css3DObject and add it to scene.
     *
     * process:
     * 1. set `readyToDraw` to true.
     * 2. call `renderInitialize()` method.
     */
    start(): void;
    /**
     * when object is destroyed, this method will be called.
     *
     * process:
     * 1. enqueue css3DObject to render queue for update viewport
     * 2. remove css3DObject from scene
     * 3. set `css3DObject` and `htmlElement` to null
     */
    onDestroy(): void;
    /**
     * when object is enabled, this method will be called.
     *
     * process:
     * 1. show css3DObject
     * 2. enqueue css3DObject to render queue for update viewport
     */
    onEnable(): void;
    /**
     * when object is disabled, this method will be called.
     *
     * process:
     * 1. hide css3DObject
     * 2. enqueue css3DObject to render queue for update viewport
     */
    onDisable(): void;
    /**
     * when world matrix is updated, this method will be called
     *
     * process:
     * 1. enqueue css3DObject to render queue for update viewport
     * 2. update raw Three.js object's matrix recursively
     */
    onWorldMatrixUpdated(): void;
    /**
     * initialize css3DObject. you must implement this method in derived class.
     *
     * this method is called when start() message is invoked.
     *
     * this method must set `css3DObject` and `htmlElement` to non-null value.
     */
    protected renderInitialize(): void;
    /**
     * create css3DObject with basic properties
     * you must call this method in renderInitialize() for create css3DObject
     *
     * @param reCreate if true, recreate css3DObject else use existing css3DObject
     * @returns css3DObject
     */
    protected initializeBaseComponents(reCreate: boolean): CSS3DObject;
    /**
     * update centerOffset. you must implement this method in derived class.
     * @param _updateTransform if true, matrix will be updated and render will be enqueued
     */
    protected updateCenterOffset(_updateTransform: boolean): void;
    /**
     * update viewScale. you must implement this method in derived class.
     * @param _updateTransform if true, matrix will be updated and render will be enqueued
     */
    protected updateViewScale(_updateTransform: boolean): void;
    /**
     * centerOffset is offset from center of object.
     *
     * if centerOffset is (0.5, 0), object center is left center.
     * if centerOffset is (0.5, 0.5), object center is top left center.
     */
    get centerOffset(): ReadonlyVector2;
    /**
     * centerOffset is offset from center of object.
     *
     * if centerOffset is (0.5, 0), object center is left center.
     * if centerOffset is (0.5, 0.5), object center is top left center.
     */
    set centerOffset(value: ReadonlyVector2);
    /**
     * element viewScale
     *
     * value to scaling html element. the smaller value, the higher resolution of element.
     *
     * note: if the viewScale is greater than 1, render will have different behaviour depending on the browser. In the case of firefox, normal operation is guaranteed.
     * @param value
     */
    get viewScale(): number;
    /**
     * element viewScale
     *
     * value to scaling html element. the smaller value, the higher resolution of element.
     *
     * note: if the viewScale is greater than 1, render will have different behaviour depending on the browser. In the case of firefox, normal operation is guaranteed.
     * @param value
     */
    set viewScale(value: number);
    /**
     * if true, pointerEvents is auto that means is receive pointerEvent like onClick.
     * otherwise, pointerEvents is none.
     */
    get pointerEvents(): boolean;
    /**
     * if true, pointerEvents is auto that means is receive pointerEvent like onClick.
     * otherwise, pointerEvents is none.
     */
    set pointerEvents(value: boolean);
    /**
     * css filter
     */
    get filter(): CssFilter;
    /**
     * on start() message is invoked, this value will be set to true.
     */
    protected get readyToDraw(): boolean;
    /**
     * html element events
     */
    get htmlElementEventHandler(): GlobalEventHandlers | null;
}