@playcanvas/pcui/types/components/Container/index.d.ts

User interface component library for the web

import { Element, ElementArgs, IFlexArgs, IParentArgs } from '../Element';
/**
 * The arguments for the {@link Container} constructor.
 */
interface ContainerArgs extends ElementArgs, IParentArgs, IFlexArgs {
    /**
     * Sets whether the {@link Container} is resizable and where the resize handle is located. Can
     * be one of 'top', 'bottom', 'right', 'left'. Defaults to `null` which disables resizing.
     */
    resizable?: string;
    /**
     * Sets the minimum size the {@link Container} can take when resized in pixels.
     */
    resizeMin?: number;
    /**
     * Sets the maximum size the {@link Container} can take when resized in pixels.
     */
    resizeMax?: number;
    /**
     * Called when the {@link Container} has been resized.
     */
    onResize?: () => void;
    /**
     * Sets whether the {@link Container} should be scrollable.
     */
    scrollable?: boolean;
    /**
     * Sets whether the {@link Container} supports the grid layout.
     */
    grid?: boolean;
    /**
     * Sets the {@link Container}'s align items property.
     */
    alignItems?: string;
}
/**
 * A container is the basic building block for {@link Element}s that are grouped together. A
 * container can contain any other element including other containers.
 */
declare class Container extends Element {
    /**
     * Fired when a child Element gets added to the Container.
     *
     * @event
     * @example
     * ```ts
     * const container = new Container();
     * container.on('append', (element: Element) => {
     *     console.log('Element added to container:', element);
     * });
     * ```
     */
    static readonly EVENT_APPEND = "append";
    /**
     * Fired when a child Element gets removed from the Container.
     *
     * @event
     * @example
     * ```ts
     * const container = new Container();
     * container.on('remove', (element: Element) => {
     *     console.log('Element removed from container:', element);
     * });
     * ```
     */
    static readonly EVENT_REMOVE = "remove";
    /**
     * Fired when the container is scrolled. The native DOM scroll event is passed to the event handler.
     *
     * @event
     * @example
     * ```ts
     * const container = new Container();
     * container.on('scroll', (event: Event) => {
     *     console.log('Container scrolled:', event);
     * });
     * ```
     */
    static readonly EVENT_SCROLL = "scroll";
    /**
     * Fired when the container gets resized using the resize handle.
     *
     * @event
     * @example
     * ```ts
     * const container = new Container();
     * container.on('resize', () => {
     *     console.log('Container resized to:', container.width, container.height, 'px');
     * });
     * ```
     */
    static readonly EVENT_RESIZE = "resize";
    protected _scrollable: boolean;
    protected _flex: boolean;
    protected _grid: boolean;
    protected _domResizeHandle: HTMLDivElement;
    protected _resizePointerId: number;
    protected _resizeData: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    protected _resizeHorizontally: boolean;
    protected _resizeMin: number;
    protected _resizeMax: number;
    protected _draggedStartIndex: number;
    protected _domContent: HTMLElement;
    protected _resizable: string;
    /**
     * Creates a new Container.
     *
     * @param args - The arguments.
     */
    constructor(args?: Readonly<ContainerArgs>);
    destroy(): void;
    /**
     * Appends an element to the container.
     *
     * @param {Element} element - The element to append.
     */
    append(element: any): void;
    /**
     * Appends an element to the container before the specified reference element.
     *
     * @param {Element} element - The element to append.
     * @param {Element} referenceElement - The element before which the element will be appended.
     */
    appendBefore(element: any, referenceElement: any): void;
    /**
     * Appends an element to the container just after the specified reference element.
     *
     * @param {Element} element - The element to append.
     * @param {Element} referenceElement - The element after which the element will be appended.
     */
    appendAfter(element: any, referenceElement: any): void;
    /**
     * Inserts an element in the beginning of the container.
     *
     * @param {Element} element - The element to prepend.
     */
    prepend(element: any): void;
    /**
     * Removes the specified child element from the container.
     *
     * @param element - The element to remove.
     */
    remove(element: Element): void;
    /**
     * Moves the specified child at the specified index.
     *
     * @param element - The element to move.
     * @param index - The index to move the element to.
     */
    move(element: Element, index: number): void;
    /**
     * Clears all children from the container.
     */
    clear(): void;
    protected _getDomFromElement(element: any): any;
    protected _onAppendChild(element: Element): void;
    protected _onRemoveChild(element: Element): void;
    protected _onScroll: (evt: Event) => void;
    protected _createResizeHandle(): void;
    protected _onResizeStart: (evt: PointerEvent) => void;
    protected _onResizeMove: (evt: PointerEvent) => void;
    protected _onResizeEnd: (evt: PointerEvent) => void;
    protected _resizeStart(): void;
    protected _resizeMove(x: number, y: number): void;
    protected _resizeEnd(): void;
    /**
     * Resize the container.
     *
     * @param x - The number of pixels to resize the width.
     * @param y - The number of pixels to resize the height.
     */
    resize(x?: number, y?: number): void;
    protected _getDraggedChildIndex(draggedChild: Element): number;
    protected _onChildDragStart(evt: MouseEvent, childPanel: Element): void;
    protected _onChildDragMove(evt: MouseEvent, childPanel: Element): void;
    protected _onChildDragEnd(evt: MouseEvent, childPanel: Element): void;
    /**
     * Iterate over each child element using the supplied function. To early out of the iteration,
     * return `false` from the function.
     *
     * @param fn - The function to call for each child element.
     */
    forEachChild(fn: (child: Element, index: number) => void | false): void;
    /**
     * If the current node contains a root, recursively append its children to this node
     * and return it. Otherwise return the current node. Also add each child to the parent
     * under its keyed name.
     *
     * @param node - The current element in the dom structure which must be recursively
     * traversed and appended to its parent.
     * @param node.root - The root node of the dom structure.
     * @param node.children - The children of the root node.
     * @returns The recursively appended element node.
     */
    protected _buildDomNode(node: {
        [x: string]: any;
        root?: any;
        children?: any;
    }): Container;
    /**
     * Takes an array of pcui elements, each of which can contain their own child elements, and
     * appends them to this container. These child elements are traversed recursively using
     * _buildDomNode.
     *
     * @param dom - An array of child pcui elements to append to this container.
     *
     * @example
     * buildDom([
     *     {
     *         child1: pcui.Label()
     *     },
     *     {
     *         root: {
     *             container1: pcui.Container()
     *         },
     *         children: [
     *             {
     *                 child2: pcui.Label()
     *             },
     *             {
     *                 child3: pcui.Label()
     *             }
     *         ]
     *     }
     * ]);
     */
    buildDom(dom: any[]): void;
    /**
     * Sets whether the Element supports flex layout.
     */
    set flex(value: boolean);
    /**
     * Gets whether the Element supports flex layout.
     */
    get flex(): boolean;
    /**
     * Sets whether the Element supports the grid layout.
     */
    set grid(value: boolean);
    /**
     * Gets whether the Element supports the grid layout.
     */
    get grid(): boolean;
    /**
     * Sets whether the Element should be scrollable.
     */
    set scrollable(value: boolean);
    /**
     * Gets whether the Element should be scrollable.
     */
    get scrollable(): boolean;
    /**
     * Sets whether the Element is resizable and where the resize handle is located. Can be one of
     * 'top', 'bottom', 'right', 'left'. Set to null to disable resizing.
     */
    set resizable(value: string);
    /**
     * Gets whether the Element is resizable and where the resize handle is located.
     */
    get resizable(): string;
    /**
     * Sets the minimum size the Element can take when resized in pixels.
     */
    set resizeMin(value: number);
    /**
     * Gets the minimum size the Element can take when resized in pixels.
     */
    get resizeMin(): number;
    /**
     * Sets the maximum size the Element can take when resized in pixels.
     */
    set resizeMax(value: number);
    /**
     * Gets the maximum size the Element can take when resized in pixels.
     */
    get resizeMax(): number;
    /**
     * Sets the internal DOM element used as a the container of all children. Can be overridden by
     * derived classes.
     */
    set domContent(value: HTMLElement);
    /**
     * Gets the internal DOM element used as a the container of all children.
     */
    get domContent(): HTMLElement;
}
export { Container, ContainerArgs };