@needle-tools/engine/lib/engine-components/ui/Text.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 { Graphic } from './Graphic.js';
import { type ICanvas, type ICanvasEventReceiver, type IHasAlphaFactor } from './Interfaces.js';
export declare enum TextAnchor {
    UpperLeft = 0,
    UpperCenter = 1,
    UpperRight = 2,
    MiddleLeft = 3,
    MiddleCenter = 4,
    MiddleRight = 5,
    LowerLeft = 6,
    LowerCenter = 7,
    LowerRight = 8
}
export declare enum VerticalWrapMode {
    Truncate = 0,
    Overflow = 1
}
declare enum HorizontalWrapMode {
    Wrap = 0,
    Overflow = 1
}
export declare enum FontStyle {
    Normal = 0,
    Bold = 1,
    Italic = 2,
    BoldAndItalic = 3
}
/**
 * [Text](https://engine.needle.tools/docs/api/Text) displays text content in the UI. Supports custom fonts, colors,
 * alignment, and basic rich text formatting.
 *
 * **Text properties:**
 * - `text` - The string content to display
 * - `fontSize` - Size of the text in pixels
 * - `color` - Text color (inherited from Graphic)
 * - `alignment` - Text anchor position (UpperLeft, MiddleCenter, etc.)
 *
 * **Fonts:**
 * Set the `font` property to a URL pointing to a font file.
 * Supports MSDF (Multi-channel Signed Distance Field) fonts for crisp rendering.
 *
 * @example Update text at runtime
 * ```ts
 * const text = myLabel.getComponent(Text);
 * text.text = "Score: " + score;
 * text.fontSize = 24;
 * text.color = new RGBAColor(1, 1, 1, 1);
 * ```
 *
 * @summary Display text in the UI
 * @category User Interface
 * @group Components
 * @see {@link Canvas} for the UI root
 * @see {@link TextAnchor} for alignment options
 * @see {@link FontStyle} for bold/italic styles
 */
export declare class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiver {
    alignment: TextAnchor;
    verticalOverflow: VerticalWrapMode;
    horizontalOverflow: HorizontalWrapMode;
    lineSpacing: number;
    supportRichText: boolean;
    font?: string;
    fontStyle: FontStyle;
    setAlphaFactor(factor: number): void;
    get text(): string;
    set text(val: string);
    private set_text;
    get fontSize(): number;
    set fontSize(val: number);
    private sRGBTextColor;
    protected onColorChanged(): void;
    onParentRectTransformChanged(): void;
    onBeforeCanvasRender(_canvas: ICanvas): void;
    private updateOverflow;
    protected onCreate(_opts: any): void;
    onAfterAddedToScene(): void;
    private _text;
    private _fontSize;
    private _textMeshUi;
    private getTextOpts;
    onEnable(): void;
    onDisable(): void;
    onDestroy(): void;
    private getAlignment;
    private feedText;
    private _didHandleTextRenderOnTop;
    private handleTextRenderOnTop;
    private renderOnTopCoroutine;
    private handleTag;
    private getText;
    private getNextTag;
    /**
     * Update provided opts to have a proper fontDefinition : family+weight+style
     * Ensure Family and Variant are registered in FontLibrary
     *
     * @param opts
     * @param fontStyle
     * @private
     */
    private setFont;
    private getFamilyNameWithCorrectSuffix;
}
export {};