@pmndrs/uikit/dist/components/root.d.ts

Build performant 3D user interfaces with Three.js and yoga.

import { Signal } from '@preact/signals-core';
import { RootContext } from '../context.js';
import { FlexNode, YogaProperties } from '../flex/index.js';
import { LayoutListeners, ScrollListeners } from '../listeners.js';
import { PanelProperties } from '../panel/instanced-panel.js';
import { PanelGroupManager, PanelGroupProperties } from '../panel/instanced-panel-group.js';
import { WithAllAliases } from '../properties/alias.js';
import { AllOptionalProperties, WithClasses, WithReactive } from '../properties/default.js';
import { MergedProperties } from '../properties/merged.js';
import { ScrollbarProperties } from '../scroll.js';
import { TransformProperties } from '../transform.js';
import { alignmentXMap, alignmentYMap } from '../utils.js';
import { UpdateMatrixWorldProperties, VisibilityProperties, WithConditionals } from './utils.js';
import { WithReversePainterSortStableCache } from '../order.js';
import { Camera, Matrix4, Object3D, Vector2Tuple, Vector3, WebGLRenderer } from 'three';
import { GlyphGroupManager } from '../text/render/instanced-glyph-group.js';
import { PointerEventsProperties } from '../panel/index.js';
import { EventHandlers, ThreeEventMap } from '../events.js';
export type InheritableRootProperties = WithClasses<WithConditionals<WithAllAliases<WithReactive<YogaProperties & TransformProperties & PanelProperties & ScrollbarProperties & PanelGroupProperties & {
    sizeX?: number;
    sizeY?: number;
    anchorX?: keyof typeof alignmentXMap;
    anchorY?: keyof typeof alignmentYMap;
} & VisibilityProperties & UpdateMatrixWorldProperties & PointerEventsProperties>>>>;
export type RootProperties<EM extends ThreeEventMap = ThreeEventMap> = InheritableRootProperties & LayoutListeners & ScrollListeners & EventHandlers<EM>;
export declare const DEFAULT_PIXEL_SIZE = 0.01;
export declare function createRootState<EM extends ThreeEventMap = ThreeEventMap>(objectRef: {
    current?: Object3D | null;
}, pixelSize: Signal<number>, style: Signal<RootProperties<EM> | undefined>, properties: Signal<RootProperties<EM> | undefined>, defaultProperties: Signal<AllOptionalProperties | undefined>, getCamera: () => Camera, renderer: WebGLRenderer, onFrameSet: Set<(delta: number) => void>, requestRender: () => void, requestFrame: () => void): {
    node: Signal<FlexNode | undefined>;
    size: Signal<Vector2Tuple | undefined>;
    relativeCenter: Signal<Vector2Tuple | undefined>;
    borderInset: Signal<import("../internals.js").Inset | undefined>;
    overflow: Signal<import("yoga-layout/load").Overflow>;
    displayed: Signal<boolean>;
    scrollable: Signal<[boolean, boolean]>;
    paddingInset: Signal<import("../internals.js").Inset | undefined>;
    maxScrollPosition: Signal<[(number | undefined)?, (number | undefined)?]>;
} & {
    interactionPanel: import("three").Mesh<import("three").PlaneGeometry, import("three").Material | import("three").Material[], import("three").Object3DEventMap> & {
        boundingSphere: import("three").Sphere;
    };
    root: WithReversePainterSortStableCache & Pick<RootContext, "requestRender" | "pixelSize" | "onFrameSet" | "requestFrame"> & {
        objectInvertedWorldMatrix: Matrix4;
        rayInGlobalSpaceMap: Map<any, any>;
        interactableDescendants: Object3D<import("three").Object3DEventMap>[];
        onUpdateMatrixWorldSet: Set<() => void>;
        requestCalculateLayout: () => void;
        objectRef: {
            current?: Object3D | null;
        };
        gylphGroupManager: GlyphGroupManager;
        panelGroupManager: PanelGroupManager;
        renderer: WebGLRenderer;
        size: Signal<Vector2Tuple | undefined>;
    };
    scrollState: {
        downPointerMap: Map<number, {
            type: "scroll-bar";
            localPoint: Vector3;
            axisIndex: number;
        } | {
            type: "scroll-panel";
            localPoint: Vector3;
            timestamp: number;
        }>;
        scrollVelocity: import("three").Vector2;
    };
    anyAncestorScrollable: Signal<[boolean, boolean]>;
    hoveredSignal: Signal<number[]>;
    activeSignal: Signal<number[]>;
    mergedProperties: import("@preact/signals-core").ReadonlySignal<MergedProperties>;
    transformMatrix: Signal<Matrix4 | undefined>;
    globalMatrix: import("@preact/signals-core").ReadonlySignal<Matrix4 | undefined>;
    groupDeps: import("@preact/signals-core").ReadonlySignal<Required<PanelGroupProperties>>;
    orderInfo: Signal<import("../order.js").OrderInfo | undefined>;
    isVisible: import("@preact/signals-core").ReadonlySignal<boolean>;
    scrollPosition: Signal<Vector2Tuple>;
    childrenMatrix: import("@preact/signals-core").ReadonlySignal<Matrix4 | undefined>;
    scrollbarWidth: Signal<number>;
    updateMatrixWorld: Signal<boolean>;
    defaultProperties: {
        pointerEvents: Signal<"auto" | "none" | "listener" | undefined>;
        pointerEventsOrder: Signal<number | undefined>;
        pointerEventsType: Signal<import("../internals.js").AllowedPointerEventsType | undefined>;
        renderOrder: Signal<number>;
        depthTest: Signal<boolean>;
        depthWrite: Signal<boolean>;
    };
    renderer: WebGLRenderer;
    getCamera: () => Camera;
} & {
    clippingRect: Signal<import("../clipping.js").ClippingRect | undefined>;
    handlers: import("@preact/signals-core").ReadonlySignal<EventHandlers>;
    ancestorsHaveListeners: import("@preact/signals-core").ReadonlySignal<boolean>;
};
export declare function setupRoot<EM extends ThreeEventMap = ThreeEventMap>(state: ReturnType<typeof createRootState>, style: Signal<RootProperties<EM> | undefined>, properties: Signal<RootProperties<EM> | undefined>, object: Object3D, childrenContainer: Object3D, abortSignal: AbortSignal): void;