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

package/virtualizer/list-layout.js

@@ -0,0 +1,510 @@
+import { getChildNodes } from "./collection.js";
+import { Layout } from "./layout.js";
+import { LayoutInfo } from "./layout-info.js";
+import { Rect } from "./rect.js";
+import { Size } from "./size.js";
+const DEFAULT_HEIGHT = 48;
+/** Arranges items in a stack along its orientation; fixed and variable size items. */
+export class ListLayout extends Layout {
+    rowSize;
+    orientation;
+    estimatedRowSize;
+    headingSize;
+    estimatedHeadingSize;
+    loaderSize;
+    dropIndicatorThickness;
+    gap;
+    padding;
+    layoutNodes;
+    contentSize;
+    lastCollection;
+    rootNodes;
+    invalidateEverything;
+    /** The rectangle containing currently valid layout infos. */
+    validRect;
+    /** The rectangle of requested layout infos so far. */
+    requestedRect;
+    constructor(options = {}) {
+        super();
+        this.rowSize = options?.rowSize ?? options?.rowHeight ?? null;
+        this.orientation = options.orientation ?? "vertical";
+        this.estimatedRowSize = options?.estimatedRowSize ?? options?.estimatedRowHeight ?? null;
+        this.headingSize = options?.headingSize ?? options?.headingHeight ?? null;
+        this.estimatedHeadingSize = options?.estimatedHeadingSize ?? options?.estimatedHeadingHeight ?? null;
+        this.loaderSize = options?.loaderSize ?? options?.loaderHeight ?? null;
+        this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
+        this.gap = options.gap || 0;
+        this.padding = options.padding || 0;
+        this.layoutNodes = new Map();
+        this.rootNodes = [];
+        this.lastCollection = null;
+        this.invalidateEverything = false;
+        this.validRect = new Rect();
+        this.requestedRect = new Rect();
+        this.contentSize = new Size();
+    }
+    // Backward compatibility for subclassing.
+    get collection() {
+        return this.virtualizer.collection;
+    }
+    /** @deprecated Use `rowSize` instead. */
+    get rowHeight() {
+        return this.rowSize;
+    }
+    /** @deprecated Use `estimatedRowSize` instead. */
+    get estimatedRowHeight() {
+        return this.estimatedRowSize;
+    }
+    /** @deprecated Use `headingSize` instead. */
+    get headingHeight() {
+        return this.headingSize;
+    }
+    /** @deprecated Use `estimatedHeadingSize` instead. */
+    get estimatedHeadingHeight() {
+        return this.estimatedHeadingSize;
+    }
+    /** @deprecated Use `loaderSize` instead. */
+    get loaderHeight() {
+        return this.loaderSize;
+    }
+    get offsetProperty() {
+        return this.orientation === "horizontal" ? "x" : "y";
+    }
+    get maxOffsetProperty() {
+        return this.orientation === "horizontal" ? "maxX" : "maxY";
+    }
+    get sizeProperty() {
+        return this.orientation === "horizontal" ? "width" : "height";
+    }
+    get crossSizeProperty() {
+        return this.orientation === "horizontal" ? "height" : "width";
+    }
+    getLayoutInfo(key) {
+        this.ensureLayoutInfo(key);
+        return this.layoutNodes.get(key)?.layoutInfo || null;
+    }
+    getVisibleLayoutInfos(rect) {
+        const offsetProperty = this.offsetProperty;
+        const heightProperty = this.sizeProperty;
+        // Adjust rect to keep number of visible rows consistent (only if > 1 px, for getDropTargetFromPoint).
+        if (rect[heightProperty] > 1) {
+            const rowHeight = (this.rowSize ?? this.estimatedRowSize ?? DEFAULT_HEIGHT) + this.gap;
+            rect = rect.copy();
+            const offset = Math.floor(rect[offsetProperty] / rowHeight) * rowHeight;
+            const height = rect[heightProperty] + rect[offsetProperty] - offset;
+            rect[offsetProperty] = offset;
+            rect[heightProperty] = Math.ceil(height / rowHeight) * rowHeight;
+        }
+        // If layout hasn't yet been done for the requested rect, union it with the valid rect, and recompute.
+        this.layoutIfNeeded(rect);
+        const res = [];
+        const addNodes = (nodes) => {
+            for (const node of nodes) {
+                if (this.isVisible(node, rect)) {
+                    res.push(node.layoutInfo);
+                    if (node.children)
+                        addNodes(node.children);
+                }
+            }
+        };
+        addNodes(this.rootNodes);
+        return res;
+    }
+    layoutIfNeeded(rect) {
+        if (!this.lastCollection)
+            return;
+        if (!this.requestedRect.containsRect(rect)) {
+            this.requestedRect = this.requestedRect.union(rect);
+            this.rootNodes = this.buildCollection();
+        }
+        // Ensure all of the persisted keys are available.
+        for (const key of this.virtualizer.persistedKeys)
+            if (this.ensureLayoutInfo(key))
+                return;
+    }
+    ensureLayoutInfo(key) {
+        // Not found: it may be outside the area laid out so far (random access, e.g. Home/End). Lay out fully.
+        if (!this.layoutNodes.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
+            this.requestedRect = new Rect(0, 0, Infinity, Infinity);
+            this.rootNodes = this.buildCollection();
+            this.requestedRect = new Rect(0, 0, this.contentSize.width, this.contentSize.height);
+            return true;
+        }
+        return false;
+    }
+    isVisible(node, rect) {
+        return (node.layoutInfo.rect.intersects(rect) ||
+            node.layoutInfo.isSticky ||
+            node.layoutInfo.type === "header" ||
+            node.layoutInfo.type === "loader" ||
+            this.virtualizer.isPersistedKey(node.layoutInfo.key));
+    }
+    shouldInvalidateEverything(invalidationContext) {
+        const options = invalidationContext.layoutOptions;
+        return (!!invalidationContext.sizeChanged ||
+            this.rowSize !== (options?.rowSize ?? options?.rowHeight ?? this.rowSize) ||
+            this.orientation !== (options?.orientation ?? this.orientation) ||
+            this.headingSize !== (options?.headingSize ?? options?.headingHeight ?? this.headingSize) ||
+            this.loaderSize !== (options?.loaderSize ?? options?.loaderHeight ?? this.loaderSize) ||
+            this.gap !== (options?.gap ?? this.gap) ||
+            this.padding !== (options?.padding ?? this.padding));
+    }
+    shouldInvalidateLayoutOptions(newOptions, oldOptions) {
+        return ((newOptions?.rowSize ?? newOptions?.rowHeight) !== (oldOptions?.rowSize ?? oldOptions?.rowHeight) ||
+            newOptions.orientation !== oldOptions.orientation ||
+            (newOptions?.estimatedRowSize ?? newOptions?.estimatedRowHeight) !== (oldOptions?.estimatedRowSize ?? oldOptions?.estimatedRowHeight) ||
+            (newOptions?.headingSize ?? newOptions?.headingHeight) !== (oldOptions?.headingSize ?? oldOptions?.headingHeight) ||
+            (newOptions?.estimatedHeadingSize ?? newOptions?.estimatedHeadingHeight) !== (oldOptions?.estimatedHeadingSize ?? oldOptions?.estimatedHeadingHeight) ||
+            (newOptions?.loaderSize ?? newOptions?.loaderHeight) !== (oldOptions?.loaderSize ?? oldOptions?.loaderHeight) ||
+            newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness ||
+            newOptions.gap !== oldOptions.gap ||
+            newOptions.padding !== oldOptions.padding);
+    }
+    update(invalidationContext) {
+        const collection = this.virtualizer.collection;
+        // Reset the valid rect if everything is invalidated; else cached layout infos outside the visible rect stay.
+        this.invalidateEverything = this.shouldInvalidateEverything(invalidationContext);
+        if (this.invalidateEverything) {
+            this.requestedRect = this.virtualizer.visibleRect.copy();
+            this.layoutNodes.clear();
+        }
+        const options = invalidationContext.layoutOptions;
+        this.rowSize = options?.rowSize ?? options?.rowHeight ?? this.rowSize;
+        this.orientation = options?.orientation ?? this.orientation;
+        this.estimatedRowSize = options?.estimatedRowSize ?? options?.estimatedRowHeight ?? this.estimatedRowSize;
+        this.headingSize = options?.headingSize ?? options?.headingHeight ?? this.headingSize;
+        this.estimatedHeadingSize = options?.estimatedHeadingSize ?? options?.estimatedHeadingHeight ?? this.estimatedHeadingSize;
+        this.loaderSize = options?.loaderSize ?? options?.loaderHeight ?? this.loaderSize;
+        this.dropIndicatorThickness = options?.dropIndicatorThickness ?? this.dropIndicatorThickness;
+        this.gap = options?.gap ?? this.gap;
+        this.padding = options?.padding ?? this.padding;
+        this.rootNodes = this.buildCollection();
+        // Remove deleted layout nodes.
+        if (this.lastCollection && collection !== this.lastCollection) {
+            for (const key of this.lastCollection.getKeys())
+                if (!collection.getItem(key))
+                    this.layoutNodes.delete(key);
+        }
+        this.lastCollection = collection;
+        this.invalidateEverything = false;
+        this.validRect = this.requestedRect.copy();
+    }
+    buildCollection(offset = this.padding) {
+        const collection = this.virtualizer.collection;
+        const offsetProperty = this.offsetProperty;
+        const maxOffsetProperty = this.maxOffsetProperty;
+        // Content nodes (Tree) don't affect the height.
+        const collectionNodes = toArray(collection, (node) => node.type !== "content");
+        const loaderNodes = collectionNodes.filter((node) => node.type === "loader");
+        const nodes = [];
+        const isEmptyOrLoading = collection?.size === 0;
+        if (isEmptyOrLoading)
+            offset = 0;
+        for (const node of collectionNodes) {
+            const rowHeight = (this.rowSize ?? this.estimatedRowSize ?? DEFAULT_HEIGHT) + this.gap;
+            // Skip rows before the valid rectangle unless they are already cached.
+            if (node.type === "item" && offset + rowHeight < this.requestedRect[offsetProperty] && !this.isValid(node, offset)) {
+                offset += rowHeight;
+                continue;
+            }
+            const layoutNode = this.orientation === "horizontal" ? this.buildChild(node, offset, this.padding, null) : this.buildChild(node, this.padding, offset, null);
+            offset = layoutNode.layoutInfo.rect[maxOffsetProperty] + this.gap;
+            nodes.push(layoutNode);
+            if (node.type === "loader")
+                loaderNodes.splice(loaderNodes.indexOf(node), 1);
+            // Build each loader outside the visible rect so they are persisted at the proper estimated location
+            // (sections are always built to know their size).
+            if ((node.type === "item" || node.type === "loader") && offset > this.requestedRect[maxOffsetProperty]) {
+                let lastProcessedIndex = collectionNodes.indexOf(node);
+                for (const loaderNode of loaderNodes) {
+                    const loaderNodeIndex = collectionNodes.indexOf(loaderNode);
+                    // Subtract an additional 1 since the current item's height is already added.
+                    offset += (loaderNodeIndex - lastProcessedIndex - 1) * rowHeight;
+                    const loader = this.orientation === "horizontal"
+                        ? this.buildChild(loaderNode, offset, this.padding, null)
+                        : this.buildChild(loaderNode, this.padding, offset, null);
+                    nodes.push(loader);
+                    offset = loader.layoutInfo.rect[maxOffsetProperty];
+                    lastProcessedIndex = loaderNodeIndex;
+                }
+                // The rest of the items after the last loader.
+                offset += (collectionNodes.length - lastProcessedIndex - 1) * rowHeight;
+                break;
+            }
+        }
+        offset = Math.max(offset - this.gap, 0);
+        offset += isEmptyOrLoading ? 0 : this.padding;
+        this.contentSize = this.orientation === "horizontal" ? new Size(offset, this.virtualizer.size.height) : new Size(this.virtualizer.size.width, offset);
+        return nodes;
+    }
+    isValid(node, offset) {
+        const cached = this.layoutNodes.get(node.key);
+        return (!this.invalidateEverything &&
+            !!cached &&
+            cached.node === node &&
+            offset === cached.layoutInfo.rect[this.offsetProperty] &&
+            cached.layoutInfo.rect.intersects(this.validRect) &&
+            cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.requestedRect)));
+    }
+    buildChild(node, x, y, parentKey) {
+        if (this.isValid(node, this.orientation === "horizontal" ? x : y))
+            return this.layoutNodes.get(node.key);
+        const layoutNode = this.buildNode(node, x, y);
+        layoutNode.layoutInfo.parentKey = parentKey ?? null;
+        layoutNode.layoutInfo.allowOverflow = true;
+        this.layoutNodes.set(node.key, layoutNode);
+        return layoutNode;
+    }
+    buildNode(node, x, y) {
+        switch (node.type) {
+            case "section":
+                return this.buildSection(node, x, y);
+            case "item":
+                return this.buildItem(node, x, y);
+            case "header":
+                return this.buildSectionHeader(node, x, y);
+            case "loader":
+                return this.buildLoader(node, x, y);
+            case "separator":
+                return this.buildItem(node, x, y);
+            // A submenu trigger has a child node (the trigger) to process.
+            case "submenutrigger":
+                return this.buildSection(node, x, y);
+            default:
+                throw new Error("Unsupported node type: " + node.type);
+        }
+    }
+    buildLoader(node, x, y) {
+        const rect = new Rect(x, y, this.padding, 0);
+        const layoutInfo = new LayoutInfo(node.type, node.key, rect);
+        // An `isLoading` sentinel reserves room for the loader (also alongside an empty state).
+        if (this.orientation === "horizontal") {
+            rect.height = this.virtualizer.contentSize.height - this.padding - y;
+            rect.width = node.props.isLoading ? (this.loaderSize ?? this.rowSize ?? this.estimatedRowSize ?? DEFAULT_HEIGHT) : 0;
+        }
+        else {
+            rect.width = this.virtualizer.contentSize.width - this.padding - x;
+            rect.height = node.props.isLoading ? (this.loaderSize ?? this.rowSize ?? this.estimatedRowSize ?? DEFAULT_HEIGHT) : 0;
+        }
+        return { layoutInfo, validRect: rect.intersection(this.requestedRect) };
+    }
+    buildSection(node, x, y) {
+        const collection = this.virtualizer.collection;
+        const width = this.virtualizer.size.width - this.padding - x;
+        const height = this.virtualizer.size.height - this.padding - y;
+        const rect = this.orientation === "horizontal" ? new Rect(x, y, 0, height) : new Rect(x, y, width, 0);
+        const layoutInfo = new LayoutInfo(node.type, node.key, rect);
+        let offset = this.orientation === "horizontal" ? x : y;
+        const offsetProperty = this.offsetProperty;
+        const maxOffsetProperty = this.maxOffsetProperty;
+        const heightProperty = this.sizeProperty;
+        let skipped = 0;
+        const children = [];
+        for (const child of getChildNodes(node, collection)) {
+            // Content nodes (Tree) are skipped.
+            if (child.type === "content")
+                continue;
+            const rowHeight = (this.rowSize ?? this.estimatedRowSize ?? DEFAULT_HEIGHT) + this.gap;
+            // Skip rows before the valid rectangle unless they are already cached. Rivet: never the section header —
+            // a cold-started engine (resumed page, first scroll) lays out from the scrolled rect, not from 0 as upstream
+            // does, and a skipped header was estimated at the row height and never rendered (story `#vsections`).
+            if (child.type !== "header" && offset + rowHeight < this.requestedRect[offsetProperty] && !this.isValid(node, offset)) {
+                offset += rowHeight;
+                skipped++;
+                continue;
+            }
+            const layoutNode = this.orientation === "horizontal" ? this.buildChild(child, offset, y, layoutInfo.key) : this.buildChild(child, x, offset, layoutInfo.key);
+            offset = layoutNode.layoutInfo.rect[maxOffsetProperty] + this.gap;
+            children.push(layoutNode);
+            if (offset > this.requestedRect[maxOffsetProperty]) {
+                // Estimate the remaining height for rows that we don't need to layout right now.
+                offset += ([...getChildNodes(node, collection)].length - (children.length + skipped)) * rowHeight;
+                break;
+            }
+        }
+        offset -= this.gap;
+        rect[heightProperty] = offset - (this.orientation === "horizontal" ? x : y);
+        return { layoutInfo, children, validRect: layoutInfo.rect.intersection(this.requestedRect), node };
+    }
+    buildSectionHeader(node, x, y) {
+        const widthProperty = this.crossSizeProperty;
+        const heightProperty = this.sizeProperty;
+        const width = this.virtualizer.size[widthProperty] - this.padding - (this.orientation === "horizontal" ? y : x);
+        let rectHeight = this.headingSize;
+        let isEstimated = false;
+        // If no explicit height is available, use an estimated height.
+        if (rectHeight == null) {
+            // Reuse a previous height; estimated if the virtualizer size or the item content changed.
+            const previousLayoutNode = this.layoutNodes.get(node.key);
+            const previousLayoutInfo = previousLayoutNode?.layoutInfo;
+            if (previousLayoutInfo) {
+                const curNode = this.virtualizer.collection.getItem(node.key);
+                const lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
+                rectHeight = previousLayoutNode.layoutInfo.rect[heightProperty];
+                isEstimated = width !== previousLayoutInfo.rect[widthProperty] || curNode !== lastNode || previousLayoutInfo.estimatedSize;
+            }
+            else {
+                rectHeight = node.rendered ? this.estimatedHeadingSize : 0;
+                isEstimated = true;
+            }
+        }
+        if (rectHeight == null)
+            rectHeight = DEFAULT_HEIGHT;
+        const headerRect = this.orientation === "horizontal" ? new Rect(x, y, rectHeight, width - y) : new Rect(x, y, width - x, rectHeight);
+        const header = new LayoutInfo("header", node.key, headerRect);
+        header.estimatedSize = isEstimated;
+        return { layoutInfo: header, children: [], validRect: header.rect.intersection(this.requestedRect), node };
+    }
+    buildItem(node, x, y) {
+        const widthProperty = this.crossSizeProperty;
+        const heightProperty = this.sizeProperty;
+        const width = this.virtualizer.size[widthProperty] - this.padding - (this.orientation === "horizontal" ? y : x);
+        let rectHeight = this.rowSize;
+        let isEstimated = false;
+        // If no explicit height is available, use an estimated height.
+        if (rectHeight == null) {
+            // Reuse a previous height; estimated if the virtualizer size or the item content changed.
+            const previousLayoutNode = this.layoutNodes.get(node.key);
+            if (previousLayoutNode) {
+                rectHeight = previousLayoutNode.layoutInfo.rect[heightProperty];
+                isEstimated =
+                    width !== previousLayoutNode.layoutInfo.rect[widthProperty] || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
+            }
+            else {
+                rectHeight = this.estimatedRowSize;
+                isEstimated = true;
+            }
+        }
+        if (rectHeight == null)
+            rectHeight = DEFAULT_HEIGHT;
+        const rect = this.orientation === "horizontal" ? new Rect(x, y, rectHeight, width) : new Rect(x, y, width, rectHeight);
+        const layoutInfo = new LayoutInfo(node.type, node.key, rect);
+        layoutInfo.estimatedSize = isEstimated;
+        return { layoutInfo, children: [], validRect: layoutInfo.rect.intersection(this.requestedRect), node };
+    }
+    updateItemSize(key, size) {
+        const layoutNode = this.layoutNodes.get(key);
+        // If no layoutInfo, item has been deleted/removed.
+        if (!layoutNode)
+            return false;
+        const collection = this.virtualizer.collection;
+        const layoutInfo = layoutNode.layoutInfo;
+        const offsetProperty = this.offsetProperty;
+        const heightProperty = this.sizeProperty;
+        layoutInfo.estimatedSize = false;
+        if (layoutInfo.rect[heightProperty] !== size[heightProperty]) {
+            // Copy layout info rather than mutating so that later caches are invalidated.
+            const newLayoutInfo = layoutInfo.copy();
+            newLayoutInfo.rect[heightProperty] = size[heightProperty];
+            layoutNode.layoutInfo = newLayoutInfo;
+            // Items after this one move: only items above stay valid.
+            this.validRect[heightProperty] = Math.min(this.validRect[heightProperty], layoutInfo.rect[offsetProperty] - this.validRect[offsetProperty]);
+            // The requestedRect also needs to account for the height difference.
+            if (layoutNode.node?.type === "item")
+                this.requestedRect[heightProperty] += newLayoutInfo.rect[heightProperty] - layoutInfo.rect[heightProperty];
+            // Invalidate layout for this layout node and all parents.
+            this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
+            let node = layoutInfo.parentKey != null ? collection.getItem(layoutInfo.parentKey) : null;
+            while (node) {
+                this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
+                node = node.parentKey != null ? collection.getItem(node.parentKey) : null;
+            }
+            return true;
+        }
+        return false;
+    }
+    updateLayoutNode(key, oldLayoutInfo, newLayoutInfo) {
+        const n = this.layoutNodes.get(key);
+        if (n) {
+            // Invalidate by intersecting the validRect of this node with the overall validRect.
+            n.validRect = n.validRect.intersection(this.validRect);
+            if (n.layoutInfo === oldLayoutInfo)
+                n.layoutInfo = newLayoutInfo;
+        }
+    }
+    getContentSize() {
+        return this.contentSize;
+    }
+    getDropTargetFromPoint(x, y, isValidDropTarget) {
+        x += this.virtualizer.visibleRect.x;
+        y += this.virtualizer.visibleRect.y;
+        // Find the closest item within on either side of the point using the gap width.
+        const searchRect = new Rect(x, Math.max(0, y - this.gap), 1, Math.max(1, this.gap * 2));
+        const candidates = this.getVisibleLayoutInfos(searchRect);
+        let key = null;
+        let minDistance = Infinity;
+        for (const candidate of candidates) {
+            // Ignore items outside the search rect, e.g. persisted keys.
+            if (!candidate.rect.intersects(searchRect))
+                continue;
+            const dist = Math.min(Math.abs(candidate.rect.y - y), Math.abs(candidate.rect.maxY - y));
+            if (dist < minDistance) {
+                minDistance = dist;
+                key = candidate.key;
+            }
+        }
+        if (key == null || this.virtualizer.collection.size === 0)
+            return { type: "root" };
+        const layoutInfo = this.getLayoutInfo(key);
+        if (!layoutInfo)
+            return null;
+        const rect = layoutInfo.rect;
+        const target = { type: "item", key: layoutInfo.key, dropPosition: "on" };
+        // Dropping on the item not accepted: try before / after by y. Accepted: still before / after within
+        // 10px of the top or bottom.
+        if (!isValidDropTarget(target)) {
+            if (y <= rect.y + rect.height / 2 && isValidDropTarget({ ...target, dropPosition: "before" }))
+                target.dropPosition = "before";
+            else if (isValidDropTarget({ ...target, dropPosition: "after" }))
+                target.dropPosition = "after";
+        }
+        else if (y <= rect.y + 10 && isValidDropTarget({ ...target, dropPosition: "before" })) {
+            target.dropPosition = "before";
+        }
+        else if (y >= rect.maxY - 10 && isValidDropTarget({ ...target, dropPosition: "after" })) {
+            target.dropPosition = "after";
+        }
+        return target;
+    }
+    getDropTargetLayoutInfo(target) {
+        let layoutInfo = this.getLayoutInfo(target.key);
+        let rect;
+        const t = this.dropIndicatorThickness;
+        if (target.dropPosition === "before") {
+            rect =
+                this.orientation === "horizontal"
+                    ? new Rect(Math.max(0, layoutInfo.rect.x - t / 2), layoutInfo.rect.y, t, layoutInfo.rect.height)
+                    : new Rect(layoutInfo.rect.x, Math.max(0, layoutInfo.rect.y - t / 2), layoutInfo.rect.width, t);
+        }
+        else if (target.dropPosition === "after") {
+            // Render after the last visible descendant of the drop target.
+            const targetNode = this.collection.getItem(target.key);
+            if (targetNode) {
+                const targetLevel = targetNode.level ?? 0;
+                let currentKey = this.collection.getKeyAfter(target.key);
+                while (currentKey != null) {
+                    const node = this.collection.getItem(currentKey);
+                    if (!node || node.level <= targetLevel)
+                        break;
+                    layoutInfo = this.getLayoutInfo(currentKey) || layoutInfo;
+                    currentKey = this.collection.getKeyAfter(currentKey);
+                }
+            }
+            rect =
+                this.orientation === "horizontal"
+                    ? new Rect(layoutInfo.rect.maxX - t / 2, layoutInfo.rect.y, t, layoutInfo.rect.height)
+                    : new Rect(layoutInfo.rect.x, layoutInfo.rect.maxY - t / 2, layoutInfo.rect.width, t);
+        }
+        else {
+            rect = layoutInfo.rect;
+        }
+        return new LayoutInfo("dropIndicator", target.key + ":" + target.dropPosition, rect);
+    }
+}
+function toArray(collection, predicate) {
+    const result = [];
+    for (const node of collection)
+        if (predicate(node))
+            result.push(node);
+    return result;
+}

package/virtualizer/overscan-manager.d.ts

@@ -0,0 +1,9 @@
+import { Rect } from "./rect.js";
+/** Grows the visible rect by a third of the viewport in the scroll direction (velocity over the last 500 ms). */
+export declare class OverscanManager {
+    private startTime;
+    private velocity;
+    private visibleRect;
+    setVisibleRect(rect: Rect): void;
+    getOverscannedRect(): Rect;
+}

package/virtualizer/overscan-manager.js

@@ -0,0 +1,32 @@
+// Ported from React Spectrum (react-stately/src/virtualizer/OverscanManager.ts), Apache-2.0, © Adobe.
+import { Point } from "./point.js";
+import { Rect } from "./rect.js";
+/** Grows the visible rect by a third of the viewport in the scroll direction (velocity over the last 500 ms). */
+export class OverscanManager {
+    startTime = 0;
+    velocity = new Point(0, 0);
+    visibleRect = new Rect();
+    setVisibleRect(rect) {
+        const time = performance.now() - this.startTime;
+        if (time < 500) {
+            if (rect.x !== this.visibleRect.x && time > 0)
+                this.velocity.x = (rect.x - this.visibleRect.x) / time;
+            if (rect.y !== this.visibleRect.y && time > 0)
+                this.velocity.y = (rect.y - this.visibleRect.y) / time;
+        }
+        this.startTime = performance.now();
+        this.visibleRect = rect;
+    }
+    getOverscannedRect() {
+        const overscanned = this.visibleRect.copy();
+        const overscanY = this.visibleRect.height / 3;
+        overscanned.height += overscanY;
+        if (this.velocity.y < 0)
+            overscanned.y -= overscanY;
+        const overscanX = this.visibleRect.width / 3;
+        overscanned.width += overscanX;
+        if (this.velocity.x < 0)
+            overscanned.x -= overscanX;
+        return overscanned;
+    }
+}

package/virtualizer/point.d.ts

@@ -0,0 +1,13 @@
+export declare class Point {
+    /** The x-coordinate of the point. */
+    x: number;
+    /** The y-coordinate of the point. */
+    y: number;
+    constructor(x?: number, y?: number);
+    /** Returns a copy of this point. */
+    copy(): Point;
+    /** Checks if two points are equal. */
+    equals(point: Point): boolean;
+    /** Returns true if this point is the origin. */
+    isOrigin(): boolean;
+}

package/virtualizer/point.js

@@ -0,0 +1,23 @@
+// Ported from React Spectrum (react-stately/src/virtualizer/Point.ts), Apache-2.0, © Adobe.
+export class Point {
+    /** The x-coordinate of the point. */
+    x;
+    /** The y-coordinate of the point. */
+    y;
+    constructor(x = 0, y = 0) {
+        this.x = x;
+        this.y = y;
+    }
+    /** Returns a copy of this point. */
+    copy() {
+        return new Point(this.x, this.y);
+    }
+    /** Checks if two points are equal. */
+    equals(point) {
+        return this.x === point.x && this.y === point.y;
+    }
+    /** Returns true if this point is the origin. */
+    isOrigin() {
+        return this.x === 0 && this.y === 0;
+    }
+}

package/virtualizer/rect.d.ts

@@ -0,0 +1,49 @@
+import { Point } from "./point.js";
+import type { Size } from "./size.js";
+export type RectCorner = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+/** Represents a rectangle. */
+export declare class Rect {
+    /** The x-coordinate of the rectangle. */
+    x: number;
+    /** The y-coordinate of the rectangle. */
+    y: number;
+    /** The width of the rectangle. */
+    width: number;
+    /** The height of the rectangle. */
+    height: number;
+    constructor(x?: number, y?: number, width?: number, height?: number);
+    /** The maximum x-coordinate in the rectangle. */
+    get maxX(): number;
+    /** The maximum y-coordinate in the rectangle. */
+    get maxY(): number;
+    /** The area of the rectangle. */
+    get area(): number;
+    /** The top left corner of the rectangle. */
+    get topLeft(): Point;
+    /** The top right corner of the rectangle. */
+    get topRight(): Point;
+    /** The bottom left corner of the rectangle. */
+    get bottomLeft(): Point;
+    /** The bottom right corner of the rectangle. */
+    get bottomRight(): Point;
+    /** Returns whether this rectangle intersects another rectangle (both need a non-zero area). */
+    intersects(rect: Rect): boolean;
+    /** Returns whether this rectangle fully contains another rectangle. */
+    containsRect(rect: Rect): boolean;
+    /** Returns whether the rectangle contains the given point. */
+    containsPoint(point: Point): boolean;
+    /**
+     * Returns the first corner of this rectangle (from top to bottom, left to right)
+     * that is contained in the given rectangle, or null of the rectangles do not intersect.
+     */
+    getCornerInRect(rect: Rect): RectCorner | null;
+    equals(rect: Rect): boolean;
+    pointEquals(point: Point | Rect): boolean;
+    sizeEquals(size: Size | Rect): boolean;
+    /** Returns the union of this Rect and another. */
+    union(other: Rect): Rect;
+    /** Returns the intersection of this Rect with another; an all zero Rect if they do not intersect. */
+    intersection(other: Rect): Rect;
+    /** Returns a copy of this rectangle. */
+    copy(): Rect;
+}