@pmndrs/uikit/dist/scroll.d.ts

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

import { ReadonlySignal, Signal } from '@preact/signals-core';
import { Matrix4, Object3D, Vector2, Vector2Tuple, Vector3 } from 'three';
import { FlexNodeState } from './flex/node.js';
import { ColorRepresentation } from './utils.js';
import { ClippingRect } from './clipping.js';
import { PanelProperties } from './panel/instanced-panel.js';
import { OrderInfo, ZIndexOffset } from './order.js';
import { MergedProperties } from './properties/merged.js';
import { PanelGroupManager, PanelGroupProperties } from './panel/instanced-panel-group.js';
import { ParentContext } from './context.js';
import { ScrollListeners } from './listeners.js';
import { EventHandlers } from './events.js';
export type ScrollEventHandlers = Pick<EventHandlers, 'onPointerDown' | 'onPointerUp' | 'onPointerMove' | 'onWheel' | 'onPointerLeave' | 'onPointerCancel'>;
export declare function createScrollPosition(): Signal<Vector2Tuple>;
export declare function computedGlobalScrollMatrix(scrollPosition: Signal<Vector2Tuple>, globalMatrix: Signal<Matrix4 | undefined>, pixelSizeSignal: Signal<number>): ReadonlySignal<Matrix4 | undefined>;
export declare function computedAnyAncestorScrollable(scrollable: Signal<[boolean, boolean]>, anyAncestorScrollable: Signal<readonly [boolean, boolean]> | undefined): ReadonlySignal<readonly [boolean, boolean]>;
export declare function createScrollState(): {
    downPointerMap: Map<number, {
        type: "scroll-bar";
        localPoint: Vector3;
        axisIndex: number;
    } | {
        type: "scroll-panel";
        localPoint: Vector3;
        timestamp: number;
    }>;
    scrollVelocity: Vector2;
};
export type ScrollableComponentState = {
    scrollPosition: ReturnType<typeof createScrollPosition>;
    anyAncestorScrollable: ParentContext['anyAncestorScrollable'];
    root: ParentContext['root'];
    maxScrollPosition: FlexNodeState['maxScrollPosition'];
    scrollable: FlexNodeState['scrollable'];
    size: FlexNodeState['size'];
    borderInset: FlexNodeState['borderInset'];
    scrollbarWidth: ReadonlySignal<number>;
    scrollState: ReturnType<typeof createScrollState>;
};
export declare function computedScrollHandlers(state: ScrollableComponentState, listeners: Signal<ScrollListeners | undefined>, objectRef: {
    current?: Object3D | null;
}): ReadonlySignal<ScrollEventHandlers | undefined>;
export declare function setupScroll(state: ScrollableComponentState, listeners: Signal<ScrollListeners | undefined>, pixelSizeSignal: Signal<number>, object: Object3D, abortSignal: AbortSignal): void;
/**
 * true = positivie
 * false = negative
 */
export type Sign = boolean;
export type ScrollbarWidthProperties = {
    scrollbarWidth?: number;
};
export type ScrollbarBorderSizeProperties = {
    scrollbarBorderRightWidth?: number;
    scrollbarBorderTopWidth?: number;
    scrollbarBorderLeftWidth?: number;
    scrollbarBorderBottomWidth?: number;
};
export type ScrollbarProperties = {
    scrollbarOpacity?: number;
    scrollbarColor?: ColorRepresentation;
    scrollbarZIndexOffset?: ZIndexOffset;
} & ScrollbarWidthProperties & ScrollbarBorderSizeProperties & {
    [Key in Exclude<keyof PanelProperties, 'backgroundColor' | 'backgroundOpacity'> as `scrollbar${Capitalize<Key>}`]: PanelProperties[Key];
};
export declare function setupScrollbars(propertiesSignal: Signal<MergedProperties>, scrollPosition: Signal<Vector2Tuple>, flexState: FlexNodeState, globalMatrix: Signal<Matrix4 | undefined>, isVisible: Signal<boolean>, parentClippingRect: Signal<ClippingRect | undefined> | undefined, prevOrderInfo: Signal<OrderInfo | undefined>, prevPanelDeps: ReadonlySignal<Required<PanelGroupProperties>>, panelGroupManager: PanelGroupManager, scrollbarWidth: Signal<number>, abortSignal: AbortSignal): void;