import { ColorSource, Container, DestroyOptions, EventMode, Graphics, Optional, PointData, Size, Ticker } from 'pixi.js'; import { Signal } from 'typed-signals'; import { List } from './List'; import { Trackpad } from './utils/trackpad/Trackpad'; import type { ListOptions, ListType } from './List'; export type ScrollBoxOptions = { width?: number; height?: number; background?: ColorSource; type?: ListType; radius?: number; disableDynamicRendering?: boolean; disableEasing?: boolean; dragTrashHold?: number; globalScroll?: boolean; shiftScroll?: boolean; proximityRange?: number; proximityDebounce?: number; disableProximityCheck?: boolean; } & Omit; type ProximityEventData = { item: Container; index: number; inRange: boolean; }; /** * Scrollable view, for arranging lists of Pixi container-based elements. * * Items, that are out of the visible area, are not rendered by default. * This behavior can be changed by setting 'disableDynamicRendering' option to true. * @example * new ScrollBox({ * background: 0XFFFFFF, * width: 200, * height: 300, * items: [ * new Graphics().drawRect(0, 0, 200, 50).fill(0x000000), * new Graphics().drawRect(0, 0, 200, 50).fill(0x000000), * new Graphics().drawRect(0, 0, 200, 50).fill(0x000000), * new Graphics().drawRect(0, 0, 200, 50).fill(0x000000), * new Graphics().drawRect(0, 0, 200, 50).fill(0x000000), * new Graphics().drawRect(0, 0, 200, 50).fill(0x000000), * new Graphics().drawRect(0, 0, 200, 50).fill(0x000000), * ], * }); */ export declare class ScrollBox extends Container { protected background: Graphics | undefined; protected borderMask: Graphics | undefined; protected lastWidth: number; protected lastHeight: number; protected _width: number; protected _height: number; protected _dimensionChanged: boolean; /** * Arrange container, that holds all inner elements. * Use this control inner arrange container size in case of bidirectional scroll type. */ list: List | undefined; protected _trackpad: Trackpad | undefined; protected isDragging: number; protected interactiveStorage: { item: Container; eventMode: EventMode; }[]; protected visibleItems: Container[]; protected pressedChild: Container | undefined; protected ticker: Ticker; protected options: ScrollBoxOptions; protected stopRenderHiddenItemsTimeout: NodeJS.Timeout | undefined; protected onMouseScrollBinding: (event: WheelEvent) => void; protected dragStarTouchPoint: PointData | undefined; protected isOver: boolean; protected proximityRange: number; protected proximityStatusCache: boolean[]; protected lastScrollX: number | undefined; protected lastScrollY: number | undefined; protected proximityCheckFrameCounter: number; onProximityChange: Signal<(data: ProximityEventData) => void>; onScroll: Signal<(value: number | PointData) => void>; /** * @param options * @param {number} options.background - background color of the ScrollBox. * @param {number} options.width - width of the ScrollBox. * @param {number} options.height - height of the ScrollBox. * @param {number} options.radius - radius of the ScrollBox and its masks corners. * @param {number} options.elementsMargin - margin between elements. * @param {number} options.vertPadding - vertical padding of the ScrollBox. * @param {number} options.horPadding - horizontal padding of the ScrollBox. * @param {number} options.padding - padding of the ScrollBox (same horizontal and vertical). * @param {boolean} options.disableDynamicRendering - disables dynamic rendering of the ScrollBox, * so even elements the are not visible will be rendered. Be careful with this options as it can impact performance. * @param {boolean} [options.globalScroll=true] - if true, the ScrollBox will scroll even if the mouse is not over it. * @param {boolean} [options.shiftScroll=false] - if true, the ScrollBox will only scroll horizontally if the shift key * is pressed, and the type is set to 'horizontal'. */ constructor(options?: ScrollBoxOptions); /** * Initiates ScrollBox. * @param options * @param {number} options.background - background color of the ScrollBox. * @param {number} options.width - width of the ScrollBox. * @param {number} options.height - height of the ScrollBox. * @param {number} options.radius - radius of the ScrollBox and its masks corners. * @param {number} options.elementsMargin - margin between elements. * @param {number} options.vertPadding - vertical padding of the ScrollBox. * @param {number} options.horPadding - horizontal padding of the ScrollBox. * @param {number} options.padding - padding of the ScrollBox (same horizontal and vertical). * @param {boolean} options.disableDynamicRendering - disables dynamic rendering of the ScrollBox, * so even elements the are not visible will be rendered. Be careful with this options as it can impact performance. * @param {boolean} [options.globalScroll=true] - if true, the ScrollBox will scroll even if the mouse is not over it. * @param {boolean} [options.shiftScroll=false] - if true, the ScrollBox will only scroll horizontally if the shift key */ init(options: ScrollBoxOptions): void; protected get hasBounds(): boolean; /** * Adds array of items to a scrollable list. * @param {Container[]} items - items to add. */ addItems(items: Container[]): void; /** Remove all items from a scrollable list. */ removeItems(): void; /** * Adds one or more items to a scrollable list. * @param {Container} items - one or more items to add. */ addItem(...items: T): T[0]; /** * Removes an item from a scrollable list. * @param {number} itemID - id of the item to remove. */ removeItem(itemID: number): void; /** * Checks if the item is visible or scrolled out of the visible part of the view.* Adds an item to a scrollable list. * @param {Container} item - item to check. * @param padding - proximity padding to consider the item visible. */ isItemVisible(item: Container, padding?: number): boolean; /** * Returns all inner items in a list. * @returns {Array | Array} - list of items. */ get items(): Container[] | []; /** * Set ScrollBox background. * @param {number | string} background - background color or texture. */ setBackground(background?: ColorSource): void; protected addMask(): void; protected makeScrollable(): void; protected setInteractive(interactive: boolean): void; protected get listHeight(): number; protected get listWidth(): number; /** * Controls item positions and visibility. * @param force */ resize(force?: boolean): void; protected onMouseScroll(event: WheelEvent): void; /** Makes it scroll down to the last element. */ scrollBottom(): void; /** Makes it scroll up to the first element. */ scrollTop(): void; protected renderAllItems(): void; protected stopRenderHiddenItems(): void; protected updateVisibleItems(): void; /** * Scrolls to the element with the given ID. * @param elementID */ scrollTo(elementID: number): void; /** * Scrolls to the given position. * @param position - x and y position object. * @param position.x - x position. * @param position.y - y position. */ scrollToPosition({ x, y }: Partial): void; /** Gets component height. */ get height(): number; set height(value: number); /** Gets component width. */ get width(): number; set width(value: number); setSize(value: number | Optional, height?: number): void; getSize(out?: Size): Size; /** Gets the current raw scroll position on the x-axis (Negated Value). */ get scrollX(): number; /** Sets the current raw scroll position on the x-axis (Negated Value). */ set scrollX(value: number); /** Gets the current raw scroll position on the y-axis (Negated Value). */ get scrollY(): number; /** Sets the current raw scroll position on the y-axis (Negated Value). */ set scrollY(value: number); protected update(): void; /** * Destroys the component. * @param {boolean | DestroyOptions} [options] - Options parameter. * A boolean will act as if all options have been set to that value */ destroy(options?: DestroyOptions | boolean): void; protected restoreItemsInteractivity(): void; protected revertClick(item: Container): void; get scrollHeight(): number; get scrollWidth(): number; protected get isVertical(): boolean; protected get isHorizontal(): boolean; protected get isBidirectional(): boolean; } export {}; //# sourceMappingURL=ScrollBox.d.ts.map