@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/virtualizer/table-column-layout.d.ts

@@ -0,0 +1,44 @@
+import type { Key } from "../collections/index.js";
+import type { GridNode, TableCollection } from "./table-collection.js";
+/** A column width: px number, percentage (`"40%"`) or fraction (`"2fr"`). */
+export type ColumnSize = number | `${number}%` | `${number}fr` | string;
+export declare function isStatic(width?: ColumnSize | null): boolean;
+export declare function parseFractionalUnit(width?: ColumnSize | null): number;
+export declare function parseStaticWidth(width: number | string, tableWidth: number): number;
+export declare function getMaxWidth(maxWidth: number | string | null | undefined, tableWidth: number): number;
+export declare function getMinWidth(minWidth: number | string, tableWidth: number): number;
+export interface IColumn {
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    width?: number | string;
+    defaultWidth?: number | string;
+    key: Key;
+}
+/**
+ * The flex algorithm of https://www.w3.org/TR/css-flexbox-1/#layout-algorithm for one row of columns: basis 0
+ * unless static, grow = shrink = the column's fr; whole-pixel widths via cascade rounding (the sum is kept).
+ */
+export declare function calculateColumnSizes(availableWidth: number, columns: IColumn[], changedColumns: Map<Key, ColumnSize>, getDefaultWidth?: (index: number) => ColumnSize | null | undefined, getDefaultMinWidth?: (index: number) => ColumnSize | null | undefined): number[];
+export interface TableColumnLayoutOptions<T> {
+    getDefaultWidth?: (column: GridNode<T>) => ColumnSize | null | undefined;
+    getDefaultMinWidth?: (column: GridNode<T>) => ColumnSize | null | undefined;
+}
+export declare class TableColumnLayout<T> {
+    getDefaultWidth: (column: GridNode<T>) => ColumnSize | null | undefined;
+    getDefaultMinWidth: (column: GridNode<T>) => ColumnSize | null | undefined;
+    columnWidths: Map<Key, number>;
+    columnMinWidths: Map<Key, number>;
+    columnMaxWidths: Map<Key, number>;
+    constructor(options: TableColumnLayoutOptions<T>);
+    /** Splits columns into controlled (`props.width`) and uncontrolled ones. */
+    splitColumnsIntoControlledAndUncontrolled(columns: Array<GridNode<T>>): [Map<Key, GridNode<T>>, Map<Key, GridNode<T>>];
+    /** Joins uncontrolled and controlled widths into a single Map. */
+    recombineColumns(columns: Array<GridNode<T>>, uncontrolledWidths: Map<Key, ColumnSize>, uncontrolledColumns: Map<Key, GridNode<T>>, controlledColumns: Map<Key, GridNode<T>>): Map<Key, ColumnSize>;
+    /** Initial Map of the uncontrolled widths based on default widths. */
+    getInitialUncontrolledWidths(uncontrolledColumns: Map<Key, GridNode<T>>): Map<Key, ColumnSize>;
+    getColumnWidth(key: Key): number;
+    getColumnMinWidth(key: Key): number;
+    getColumnMaxWidth(key: Key): number;
+    resizeColumnWidth(collection: TableCollection<T>, uncontrolledWidths: Map<Key, ColumnSize>, col: Key, width: number): Map<Key, ColumnSize>;
+    buildColumnWidths(tableWidth: number, collection: TableCollection<T>, widths: Map<Key, ColumnSize>): Map<Key, number>;
+}

package/virtualizer/table-column-layout.js

@@ -0,0 +1,210 @@
+// Numbers and percents are static; *fr units or a lack of units are dynamic.
+export function isStatic(width) {
+    return width != null && (!isNaN(width) || String(width).match(/^(\d+)(?=%$)/) !== null);
+}
+export function parseFractionalUnit(width) {
+    if (!width || typeof width === "number")
+        return 1;
+    const match = width.match(/^(.+)(?=fr$)/);
+    // An incorrect format defaults to 1fr.
+    if (!match)
+        return 1;
+    return parseFloat(match[0]);
+}
+export function parseStaticWidth(width, tableWidth) {
+    if (typeof width === "string") {
+        const match = width.match(/^(\d+)(?=%$)/);
+        if (!match)
+            throw new Error("Only percentages or numbers are supported for static column widths");
+        return tableWidth * (parseFloat(match[0]) / 100);
+    }
+    return width;
+}
+export function getMaxWidth(maxWidth, tableWidth) {
+    return maxWidth != null ? parseStaticWidth(maxWidth, tableWidth) : Number.MAX_SAFE_INTEGER;
+}
+// Cannot support FR units: we'd need to know everything else in the table.
+export function getMinWidth(minWidth, tableWidth) {
+    return minWidth != null ? parseStaticWidth(minWidth, tableWidth) : 0;
+}
+/**
+ * The flex algorithm of https://www.w3.org/TR/css-flexbox-1/#layout-algorithm for one row of columns: basis 0
+ * unless static, grow = shrink = the column's fr; whole-pixel widths via cascade rounding (the sum is kept).
+ */
+export function calculateColumnSizes(availableWidth, columns, changedColumns, getDefaultWidth, getDefaultMinWidth) {
+    const originalWidth = availableWidth;
+    const flooredWidth = Math.floor(availableWidth);
+    const hasFractionalWidth = availableWidth - flooredWidth > 0;
+    availableWidth = flooredWidth;
+    let hasNonFrozenItems = false;
+    const flexItems = columns.map((column, index) => {
+        const width = (changedColumns.get(column.key) != null
+            ? (changedColumns.get(column.key) ?? "1fr")
+            : (column.width ?? column.defaultWidth ?? getDefaultWidth?.(index) ?? "1fr"));
+        let frozen = false;
+        let baseSize = 0;
+        let flex = 0;
+        let targetMainSize = 0;
+        if (isStatic(width)) {
+            baseSize = parseStaticWidth(width, availableWidth);
+            frozen = true;
+        }
+        else {
+            flex = parseFractionalUnit(width);
+            if (flex <= 0)
+                frozen = true;
+        }
+        const min = getMinWidth(column.minWidth ?? getDefaultMinWidth?.(index) ?? 0, availableWidth);
+        const max = getMaxWidth(column.maxWidth, availableWidth);
+        const hypotheticalMainSize = Math.max(min, Math.min(baseSize, max));
+        // 9.7.1 / 9.7.2: flex basis is always 0, so always in 'grow' mode.
+        if (frozen) {
+            targetMainSize = hypotheticalMainSize;
+        }
+        else if (baseSize > hypotheticalMainSize) {
+            frozen = true;
+            targetMainSize = hypotheticalMainSize;
+        }
+        // 9.7.3
+        if (!frozen)
+            hasNonFrozenItems = true;
+        return { frozen, baseSize, hypotheticalMainSize, min, max, flex, targetMainSize, violation: 0 };
+    });
+    // 9.7.4
+    while (hasNonFrozenItems) {
+        // 9.7.4.b: remaining free space.
+        let usedWidth = 0;
+        let flexFactors = 0;
+        for (const item of flexItems) {
+            if (item.frozen) {
+                usedWidth += item.targetMainSize;
+            }
+            else {
+                usedWidth += item.baseSize;
+                flexFactors += item.flex;
+            }
+        }
+        const remainingFreeSpace = availableWidth - usedWidth;
+        // 9.7.4.c: distribute the free space proportionally to the flex factors (integer fr only).
+        if (remainingFreeSpace > 0) {
+            for (const item of flexItems)
+                if (!item.frozen)
+                    item.targetMainSize = item.baseSize + (item.flex / flexFactors) * remainingFreeSpace;
+        }
+        // 9.7.4.d: fix min/max violations.
+        let totalViolation = 0;
+        for (const item of flexItems) {
+            item.violation = 0;
+            if (!item.frozen) {
+                const { min, max, targetMainSize } = item;
+                item.targetMainSize = Math.max(min, Math.min(targetMainSize, max));
+                item.violation = item.targetMainSize - targetMainSize;
+                totalViolation += item.violation;
+            }
+        }
+        // 9.7.4.e: freeze over-flexed items (zero: all; positive: min violations; negative: max violations).
+        hasNonFrozenItems = false;
+        for (const item of flexItems) {
+            if (totalViolation === 0 || Math.sign(totalViolation) === Math.sign(item.violation))
+                item.frozen = true;
+            else if (!item.frozen)
+                hasNonFrozenItems = true;
+        }
+    }
+    const columnSizes = cascadeRounding(flexItems);
+    // The leftover sub-pixel width goes to the last column, so the columns sum to the available width.
+    if (hasFractionalWidth && columnSizes.length > 0) {
+        const tableFractionalWidth = originalWidth.toString().split(".")[1];
+        const columnWidth = columnSizes[columnSizes.length - 1].toString();
+        columnSizes[columnSizes.length - 1] = Number(columnWidth + "." + tableFractionalWidth);
+    }
+    return columnSizes;
+}
+/** Rounds floats summing to an integer into integers with the same sum. */
+function cascadeRounding(flexItems) {
+    let fpTotal = 0;
+    let intTotal = 0;
+    const roundedArray = [];
+    for (const item of flexItems) {
+        const float = item.targetMainSize;
+        const integer = Math.round(float + fpTotal) - intTotal;
+        fpTotal += float;
+        intTotal += integer;
+        roundedArray.push(integer);
+    }
+    return roundedArray;
+}
+export class TableColumnLayout {
+    getDefaultWidth;
+    getDefaultMinWidth;
+    columnWidths = new Map();
+    columnMinWidths = new Map();
+    columnMaxWidths = new Map();
+    constructor(options) {
+        this.getDefaultWidth = options?.getDefaultWidth ?? (() => "1fr");
+        this.getDefaultMinWidth = options?.getDefaultMinWidth ?? (() => 75);
+    }
+    /** Splits columns into controlled (`props.width`) and uncontrolled ones. */
+    splitColumnsIntoControlledAndUncontrolled(columns) {
+        return columns.reduce((acc, col) => {
+            if (col.props.width != null)
+                acc[0].set(col.key, col);
+            else
+                acc[1].set(col.key, col);
+            return acc;
+        }, [new Map(), new Map()]);
+    }
+    /** Joins uncontrolled and controlled widths into a single Map. */
+    recombineColumns(columns, uncontrolledWidths, uncontrolledColumns, controlledColumns) {
+        return new Map(columns.map((col) => [col.key, uncontrolledColumns.has(col.key) ? uncontrolledWidths.get(col.key) : controlledColumns.get(col.key).props.width]));
+    }
+    /** Initial Map of the uncontrolled widths based on default widths. */
+    getInitialUncontrolledWidths(uncontrolledColumns) {
+        return new Map(Array.from(uncontrolledColumns).map(([key, col]) => [key, col.props.defaultWidth ?? this.getDefaultWidth?.(col) ?? "1fr"]));
+    }
+    getColumnWidth(key) {
+        return this.columnWidths.get(key) ?? 0;
+    }
+    getColumnMinWidth(key) {
+        return this.columnMinWidths.get(key) ?? 0;
+    }
+    getColumnMaxWidth(key) {
+        return this.columnMaxWidths.get(key) ?? 0;
+    }
+    resizeColumnWidth(collection, uncontrolledWidths, col, width) {
+        const prevColumnWidths = this.columnWidths;
+        let freeze = true;
+        const newWidths = new Map();
+        width = Math.max(this.getColumnMinWidth(col), Math.min(this.getColumnMaxWidth(col), Math.floor(width)));
+        for (const column of collection.columns) {
+            if (column.key === col) {
+                newWidths.set(column.key, width);
+                freeze = false;
+            }
+            else if (freeze) {
+                // Freeze columns to the left to their previous pixel value.
+                newWidths.set(column.key, prevColumnWidths.get(column.key) ?? 0);
+            }
+            else {
+                newWidths.set(column.key, column.props.width ?? uncontrolledWidths.get(column.key));
+            }
+        }
+        return newWidths;
+    }
+    buildColumnWidths(tableWidth, collection, widths) {
+        this.columnWidths = new Map();
+        this.columnMinWidths = new Map();
+        this.columnMaxWidths = new Map();
+        // Initial layout or table/window resizing.
+        const columnWidths = calculateColumnSizes(tableWidth, collection.columns.map((col) => ({ ...col.props, key: col.key })), widths, (i) => this.getDefaultWidth(collection.columns[i]), (i) => this.getDefaultMinWidth(collection.columns[i]));
+        // Columns going in are in the same order as the columns coming out.
+        columnWidths.forEach((width, index) => {
+            const column = collection.columns[index];
+            const key = column.key;
+            this.columnWidths.set(key, width);
+            this.columnMinWidths.set(key, getMinWidth((column.props.minWidth ?? this.getDefaultMinWidth(column)), tableWidth));
+            this.columnMaxWidths.set(key, getMaxWidth(column.props.maxWidth, tableWidth));
+        });
+        return this.columnWidths;
+    }
+}

package/virtualizer/table-layout.d.ts

@@ -0,0 +1,55 @@
+import type { Key } from "../collections/index.js";
+import { LayoutInfo } from "./layout-info.js";
+import { type LayoutNode, ListLayout, type ListLayoutOptions } from "./list-layout.js";
+import { Rect } from "./rect.js";
+import type { GridNode, TableCollection } from "./table-collection.js";
+import type { DropTarget, InvalidationContext, ItemDropTarget } from "./types.js";
+export interface TableLayoutProps extends Omit<ListLayoutOptions, "orientation" | "rowSize" | "estimatedRowSize" | "headingSize" | "estimatedHeadingSize" | "loaderSize"> {
+    /** The fixed height of a row in px. Default 48. */
+    rowHeight?: number;
+    /** The estimated height of a row, when row heights are variable. */
+    estimatedRowHeight?: number;
+    /** The fixed height of a section header (column header row) in px. Default 48. */
+    headingHeight?: number;
+    /** The estimated height of a section header, when the height is variable. */
+    estimatedHeadingHeight?: number;
+    /** The fixed height of a "load more" loader element in px. Default 48. */
+    loaderHeight?: number;
+    /** Column widths (px) by column key, e.g. from column resizing; computed from the columns otherwise. */
+    columnWidths?: Map<Key, number>;
+}
+/** Arranges items in rows and columns (sticky header, row groups, per-cell virtualization along x). */
+export declare class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
+    protected lastCollection: TableCollection<T> | null;
+    private columnWidths;
+    private stickyColumnIndices;
+    private lastPersistedKeys;
+    private persistedIndices;
+    constructor(options?: TableLayoutProps);
+    protected get collection(): TableCollection<T>;
+    private get table();
+    private columnsChanged;
+    shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
+    update(invalidationContext: InvalidationContext<O>): void;
+    protected buildCollection(): LayoutNode[];
+    protected buildTableHeader(): LayoutNode;
+    protected buildHeaderRow(headerRow: GridNode<T>, x: number, y: number): LayoutNode;
+    private setChildHeights;
+    private getRenderedColumnWidth;
+    private getEstimatedHeight;
+    protected getEstimatedRowHeight(): number;
+    protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected isStickyColumn(_node: GridNode<T>): boolean;
+    protected buildBody(y: number): LayoutNode;
+    protected buildRowGroup(y: number, node: GridNode<T>): LayoutNode;
+    protected buildLoader(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected buildNode(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected buildCell(node: GridNode<T>, x: number, y: number): LayoutNode;
+    getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+    private addVisibleLayoutInfos;
+    private binarySearch;
+    private buildPersistedIndices;
+    getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null;
+    getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
+}