@needle-tools/engine/lib/engine-components/ui/Button.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 { RGBAColor } from "../../engine/js-extensions/index.js";
import { Animator } from "../Animator.js";
import { Behaviour } from "../Component.js";
import { EventList } from "../EventList.js";
import type { IPointerEventHandler, PointerEventData } from "./PointerEvents.js";
export declare enum Transition {
    None = 0,
    ColorTint = 1,
    SpriteSwap = 2,
    Animation = 3
}
declare class ButtonColors {
    colorMultiplier: 1;
    disabledColor: RGBAColor;
    fadeDuration: number;
    highlightedColor: RGBAColor;
    normalColor: RGBAColor;
    pressedColor: RGBAColor;
    selectedColor: RGBAColor;
}
declare class AnimationTriggers {
    disabledTrigger: string;
    highlightedTrigger: string;
    normalTrigger: string;
    pressedTrigger: string;
    selectedTrigger: string;
}
/**
 * [Button](https://engine.needle.tools/docs/api/Button) is a UI component that can be clicked to trigger actions.
 * Supports visual states (normal, highlighted, pressed, disabled) with
 * color tints or animation transitions.
 *
 * **Visual transitions:**
 * - `ColorTint` - Tint the button image with state colors
 * - `Animation` - Trigger animator states for each button state
 * - `SpriteSwap` - Swap sprites for each state (not fully supported)
 *
 * **Requirements:**
 * - Typically paired with an {@link Image} component for visuals or any 3D object
 *
 * @example Listen to button clicks
 * ```ts
 * const button = myButton.getComponent(Button);
 * button.onClick.addEventListener(() => {
 *   console.log("Button clicked!");
 * });
 * ```
 *
 * @example Programmatically click a button
 * ```ts
 * button.click(); // Triggers onClick event
 * ```
 *
 * @summary UI Button that can be clicked to perform actions
 * @category User Interface
 * @group Components
 * @see {@link EventList} for onClick callback handling
 * @see {@link Image} for button visuals
 * @see {@link GraphicRaycaster} for UI interaction
 * @see {@link Transition} for visual state options
 */
export declare class Button extends Behaviour implements IPointerEventHandler {
    /**
     * Invokes the onClick event
     */
    click(): void;
    onClick: EventList<void>;
    private _isHovered;
    onPointerEnter(evt: PointerEventData): void;
    onPointerExit(): void;
    onPointerDown(_: any): void;
    onPointerUp(_: any): void;
    onPointerClick(args: PointerEventData): void;
    colors?: ButtonColors;
    transition?: Transition;
    animationTriggers?: AnimationTriggers;
    animator?: Animator;
    set interactable(value: boolean);
    get interactable(): boolean;
    private _interactable;
    private set_interactable;
    awake(): void;
    start(): void;
    onEnable(): void;
    onDisable(): void;
    onDestroy(): void;
    private _requestedAnimatorTrigger?;
    private setAnimatorTriggerAtEndOfFrame;
    private _isInit;
    private _image?;
    private init;
    private stateSetup;
    private getFinalColor;
}
export {};