@wonderlandengine/react-ui/dist/renderer.d.ts

React-based UI in Wonderland Engine.

import { Component, Material, Mesh, Object3D, Texture, ViewComponent, WonderlandEngine } from '@wonderlandengine/api';
import { ReactNode } from 'react';
import type { Config, Node as YogaNode } from 'yoga-layout/load';
export { Align, Display, FlexDirection, Justify, Overflow, PositionType, Wrap, } from 'yoga-layout/load';
import { Align, Display, FlexDirection, Justify, Overflow, PositionType, Wrap } from 'yoga-layout/load';
import { Cursor, EventTypes } from '@wonderlandengine/components';
type ValueType = number | 'auto' | `${number}%`;
type ValueTypeNoAuto = number | `${number}%`;
export interface YogaNodeProps {
    height?: ValueType;
    width?: ValueType;
    alignContent?: Align;
    alignItems?: Align;
    alignSelf?: Align;
    justifyContent?: Justify;
    aspectRatio?: number;
    display?: Display;
    flex?: number;
    flexDirection?: FlexDirection;
    flexGrow?: number;
    flexBasis?: ValueType;
    flexShrink?: number;
    flexWrap?: Wrap;
    isReferenceBaseline?: boolean;
    gap?: number;
    columnGap?: number;
    rowGap?: number;
    border?: number;
    borderTop?: number;
    borderBottom?: number;
    borderLeft?: number;
    borderRight?: number;
    margin?: ValueType;
    marginTop?: ValueType;
    marginBottom?: ValueType;
    marginLeft?: ValueType;
    marginRight?: ValueType;
    maxHeight?: ValueTypeNoAuto;
    maxWidth?: ValueTypeNoAuto;
    minHeight?: ValueTypeNoAuto;
    minWidth?: ValueTypeNoAuto;
    overflow?: Overflow;
    padding?: ValueTypeNoAuto;
    paddingTop?: ValueTypeNoAuto;
    paddingBottom?: ValueTypeNoAuto;
    paddingLeft?: ValueTypeNoAuto;
    paddingRight?: ValueTypeNoAuto;
    z?: number;
    top?: ValueTypeNoAuto;
    left?: ValueTypeNoAuto;
    right?: ValueTypeNoAuto;
    bottom?: ValueTypeNoAuto;
    position?: PositionType;
    onClick?: (e: {
        x: number;
        y: number;
        e: MouseEvent;
    }) => void;
    onUp?: (e: {
        x: number;
        y: number;
        e: PointerEvent;
    }) => void;
    onDown?: (e: {
        x: number;
        y: number;
        e: PointerEvent;
    }) => void;
    onMove?: (e: {
        x: number;
        y: number;
        e: PointerEvent;
    }) => void;
    onHover?: (e: {
        x: number;
        y: number;
        e: PointerEvent;
    }) => void;
    onUnhover?: (e: {
        x: number;
        y: number;
        e: PointerEvent;
    }) => void;
}
/**
 * Properties for text components
 */
export interface TextProps extends YogaNodeProps {
    text?: string;
    fontSize?: number;
    material?: Material | null;
    textAlign?: 'left' | 'center' | 'right';
}
/**
 * Properties for roundedRectangle components
 */
export interface RoundedRectangleProps extends YogaNodeProps {
    material?: Material | null;
    borderMaterial?: Material | null;
    rounding?: number;
    resolution?: number;
    roundTopLeft?: boolean;
    roundTopRight?: boolean;
    roundBottomLeft?: boolean;
    roundBottomRight?: boolean;
}
/**
 * Properties for mesh components
 */
export interface MeshProps extends YogaNodeProps {
    material?: Material | null;
    mesh?: Mesh | null;
}
/**
 * Properties for nineSlice components
 */
export interface NineSliceProps extends YogaNodeProps {
    material?: Material | null;
    texture?: Texture | null;
    borderSize?: number;
    borderTextureSize?: number;
}
declare class NodeWrapper {
    node: YogaNode;
    tag: string;
    props: any;
    object: Object3D | null;
    parent: NodeWrapper | null;
    children: NodeWrapper[];
    ctx: Context;
    hovering: boolean[];
    dirty: boolean;
    constructor(ctx: Context, node: YogaNode, tag: string);
}
declare class Context {
    root: NodeWrapper | null;
    config: Config;
    comp: ReactComp;
    wrappers: NodeWrapper[];
    constructor(c: ReactComp);
    addNodeWrapper(w: NodeWrapper): void;
    removeNodeWrapper(w: NodeWrapper): void;
    printTree(node?: NodeWrapper, prefix?: string): void;
}
type ReactComp = Component & {
    needsUpdate: boolean;
    textMaterial: Material;
    scaling: number[];
    renderCallback: () => void;
    callbacks: Record<string, any>;
    setContext(c: Context): void;
    updateLayout(): void;
    render(): ReactNode;
};
export declare enum UISpace {
    World = 0,
    Screen = 1
}
export declare enum ScalingType {
    /**
     * The sizes absolute to the screen size. A pixel in the UI is a pixel on screen.
     * This is the default.
     */
    Absolute = 0,
    /**
     * The height of the UI will be fixed to the value set in the `manualHeight` property.
     */
    FixedHeight = 1,
    /**
     * The height of the UI will be fixed to the value set in the `manualHeight` property.
     * But if the width is below a certain threshold, the height will be scaled down anyway
     */
    FixedHeightLimitedWidth = 2
}
export declare abstract class ReactUiBase extends Component implements ReactComp {
    static TypeName: string;
    space: number;
    textMaterial: Material;
    panelMaterial: Material;
    panelMaterialTextured: Material;
    width: number;
    height: number;
    scalingMode: ScalingType;
    manualHeight: number;
    manualWidth: number;
    /**
     * Device pixel ratio, defaults to 1. Used on mobile/tablet devices to scale.
     */
    dpr: number;
    get pixelSizeAdjustment(): number;
    static onRegister(engine: WonderlandEngine): void;
    _onViewportResize: () => void;
    scaling: number[];
    renderer?: any;
    ctx: Context | null;
    protected _viewComponent?: ViewComponent;
    needsUpdate: boolean;
    viewportChanged: boolean;
    setContext(c: Context): void;
    updateLayout(): void;
    init(): void;
    start(): Promise<void>;
    update(dt?: number | undefined): void;
    callbacks: Record<string, any>;
    getCursorPosition(c: Cursor): [number, number];
    onActivate(): void;
    onDeactivate(): void;
    onDestroy(): void;
    forEachElementUnderneath(node: NodeWrapper | null, x: number, y: number, callback: (node: NodeWrapper) => boolean): NodeWrapper | null;
    emitEvent(eventName: string, x: number, y: number, e: Event): NodeWrapper | null;
    /** 'pointermove' event listener */
    curGen: number;
    onPointerMove(e: PointerEvent): null | undefined;
    onMove: ({ x, y, e }: {
        x: number;
        y: number;
        e: any;
    }) => null | undefined;
    updateHoverState(x: number, y: number, e: PointerEvent, node?: NodeWrapper | null): void;
    /** 'click' event listener */
    onClick: (e: {
        x: number;
        y: number;
        e: EventTypes;
    }) => NodeWrapper | null;
    onDown: (e: {
        x: number;
        y: number;
        e: EventTypes;
    }) => NodeWrapper | null;
    onUp: (e: {
        x: number;
        y: number;
        e: EventTypes;
    }) => NodeWrapper | null;
    onPointerClick(e: PointerEvent): void;
    /** 'pointerdown' event listener */
    onPointerDown(e: PointerEvent): NodeWrapper | null;
    /** 'pointerup' event listener */
    onPointerUp(e: PointerEvent): NodeWrapper | null;
    renderCallback(): void;
    private _dpiAdjust;
    abstract render(): ReactNode;
}
export declare function initializeRenderer(): Promise<{
    rootContainer: null;
    unmountRoot(): void;
    render(element: ReactNode, reactComp: ReactComp, callback?: () => void): void;
}>;