@needle-tools/engine/lib/engine-components/ui/Canvas.d.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

import { type NeedleXREventArgs } from "../../engine/xr/api.js";
import { Camera } from "../Camera.js";
import { UIRootComponent } from "./BaseUIComponent.js";
import type { ICanvas, ICanvasEventReceiver, ILayoutGroup, IRectTransform } from "./Interfaces.js";
export declare enum RenderMode {
    ScreenSpaceOverlay = 0,
    ScreenSpaceCamera = 1,
    WorldSpace = 2,
    Undefined = -1
}
/**
 * [Canvas](https://engine.needle.tools/docs/api/Canvas) is the root component for all UI elements in a scene.
 * Defines the rendering area and manages layout for child UI elements.
 *
 * **Render modes:**
 * - `WorldSpace` - UI exists in 3D space, can be viewed from any angle
 * - `ScreenSpaceOverlay` - UI rendered on top of everything (HUD)
 * - `ScreenSpaceCamera` - UI rendered at a distance from a specific camera
 *
 * **Usage:**
 * All UI components ({@link Button}, {@link Text}, {@link Image}) must be
 * children of a Canvas to render correctly. Multiple canvases can exist
 * in a scene with different settings.
 *
 * **Rendering options:**
 * - `renderOnTop` - Always render above other objects
 * - `depthWrite` - Write to depth buffer (affects occlusion)
 * - `doubleSided` - Render both sides of UI elements
 *
 * @example Create a world-space UI panel
 * ```ts
 * const canvas = panel.getComponent(Canvas);
 * canvas.renderMode = RenderMode.WorldSpace;
 * canvas.doubleSided = true;
 * ```
 *
 * @summary Root component for UI elements, managing layout and rendering settings
 * @category User Interface
 * @group Components
 * @see {@link RenderMode} for rendering options
 * @see {@link RectTransform} for UI layout
 * @see {@link Button} for clickable UI elements
 * @see {@link Text} for UI text rendering
 */
export declare class Canvas extends UIRootComponent implements ICanvas {
    get isCanvas(): boolean;
    get screenspace(): any;
    set renderOnTop(val: boolean);
    get renderOnTop(): boolean;
    private _renderOnTop;
    set depthWrite(val: boolean);
    get depthWrite(): boolean;
    private _depthWrite;
    set doubleSided(val: boolean);
    get doubleSided(): boolean;
    private _doubleSided;
    set castShadows(val: boolean);
    get castShadows(): boolean;
    private _castShadows;
    set receiveShadows(val: boolean);
    get receiveShadows(): boolean;
    private _receiveShadows;
    get renderMode(): RenderMode;
    set renderMode(val: RenderMode);
    private _renderMode;
    private _rootCanvas;
    set rootCanvas(val: Canvas);
    get rootCanvas(): Canvas;
    private _scaleFactor;
    get scaleFactor(): number;
    private set scaleFactor(value);
    worldCamera?: Camera;
    planeDistance: number;
    awake(): void;
    start(): void;
    onEnable(): void;
    onDisable(): void;
    private _boundRenderSettingsChanged;
    private previousParent;
    private _lastMatrixWorld;
    private _rectTransforms;
    registerTransform(rt: IRectTransform): void;
    unregisterTransform(rt: IRectTransform): void;
    private _layoutGroups;
    registerLayoutGroup(group: ILayoutGroup): void;
    unregisterLayoutGroup(group: ILayoutGroup): void;
    private _receivers;
    registerEventReceiver(receiver: ICanvasEventReceiver): void;
    unregisterEventReceiver(receiver: ICanvasEventReceiver): void;
    onEnterXR(args: NeedleXREventArgs): Promise<void>;
    onLeaveXR(args: NeedleXREventArgs): void;
    onBeforeRenderRoutine: () => void;
    onAfterRenderRoutine: () => void;
    private invokeBeforeRenderEvents;
    private handleLayoutUpdates;
    applyRenderSettings(): void;
    private _updateRenderSettingsRoutine?;
    private onRenderSettingsChanged;
    private _updateRenderSettingsDelayed;
    private _activeRenderMode;
    private _lastWidth;
    private _lastHeight;
    private onUpdateRenderMode;
}