@thi.ng/layout/stacked-layout.d.ts

Configurable nested 2D grid layout generators

import type { CellSpan, LayoutBox } from "./api.js";
import { GridLayout } from "./grid-layout.js";
/**
 * An extension of {@link GridLayout} which tracks individual column-based
 * heights and so can create more complex, irregular, packed, space-filling
 * layout arrangements. This layout algorithm prioritizes allocating the
 * column(s) with the currently lowest height.
 *
 * The class also provides a {@link StackedLayout.availableSpan} method to find
 * available space and help equalize columns and fill/allocate any bottom gaps.
 *
 * **IMPORTANT:** As with {@link GridLayout}, nested layouts MUST be completed
 * first before requesting new cells (aka {@link LayoutBox}es) from a parent,
 * otherwise unintended overlaps will occur. Also see {@link IGridLayout.nest}
 * for more details.
 */
export declare class StackedLayout extends GridLayout {
    /** Number of rows per column */
    offsets: Uint32Array;
    currSpan: number;
    constructor(parent: GridLayout | null, x: number, y: number, width: number, cols: number, rowH: number, gapX: number, gapY?: number);
    nest(cols: number, spans?: CellSpan, gapX?: number, gapY?: number): StackedLayout;
    next(spans?: CellSpan): LayoutBox;
    /**
     * Finds the largest available span of free area, such that if it'll be
     * allocated via {@link StackedLayout.next} or {@link StackedLayout.nest},
     * the impacted columns will all have the same height, and that height will
     * match that of the next column after (if any). Repeated use of this method
     * can be used to fill up (aka equalize) any bottom gaps of a layout
     * container until all columns are equal. If the function returns a vertical
     * span of 0, all columns are equalized already.
     *
     * @remarks
     * An optional `maxSpan` can be provided to constrain the returned span (by
     * default unconstrained).
     *
     * @param maxSpan
     */
    availableSpan(maxSpan?: CellSpan): CellSpan;
    propagateSize(rspan: number): void;
    /**
     * Returns true if all column offsets/heights in the layout are equal.
     */
    isEqualized(): boolean;
}
/**
 * Syntax sugar for {@link StackedLayout} ctor. By default creates a 4-column
 * layout at given position and total width.
 *
 * @param x -
 * @param y -
 * @param width -
 * @param cols -
 * @param rowH -
 * @param gapX -
 * @param gapY -
 */
export declare const stackedLayout: (x: number, y: number, width: number, cols?: number, rowH?: number, gapX?: number, gapY?: number) => StackedLayout;
//# sourceMappingURL=stacked-layout.d.ts.map