@tarojs/components-advanced 4.0.8-beta.0 → 4.0.8-beta.3

package/dist/components/water-flow/node.js

@@ -0,0 +1,99 @@
+import '../../utils/index.js';
+import { SectionEvents } from './section.js';
+import { StatefulEventBus } from './stateful-event-bus.js';
+import { getRectSizeSync } from '../../utils/dom.js';
+
+const NodeEvents = {
+    Resize: Symbol.for('resize'),
+};
+class Node extends StatefulEventBus {
+    constructor(root, section, props) {
+        const { height, childIndex, order, col } = props;
+        super({
+            top: 0,
+            width: 0,
+            height,
+            scrollTop: 0,
+            layouted: false,
+        });
+        this.root = root;
+        this.section = section;
+        const nodeId = `${root.id}-${section.id}-item-${childIndex}`;
+        Object.assign(this, { id: nodeId, childIndex, order, col });
+        this.setupSubscriptions();
+    }
+    setupSubscriptions() {
+        this.sub('layouted', () => {
+            /**
+             * 如果当前分组所有的节点都完成布局计算，那么向分组推送 `AllNodesLayouted` 事件，section会在这个时机做一些计算
+             */
+            if ([...this.section.nodes.values()].every((node) => node.getState().layouted)) {
+                this.section.notify(SectionEvents.AllNodesLayouted);
+            }
+        });
+        /**
+         * 如果节点的尺寸发生了变化（这通常出现在节点内容包含网络数据的情况下，比如图片，这时要求用户调用 useFlowItemPositioner 返回的 resize 方法通知数据模型去重新计算布局）
+         *
+         * - 更新当前节点所在列之后的所有节点的位置信息
+         *
+         * - 通知 section 更新布局
+         */
+        this.sub(NodeEvents.Resize, async () => {
+            const { width, height } = this.getState();
+            const newSize = await this.measure();
+            if (newSize.height === height && newSize.width === width) {
+                return;
+            }
+            this.updateBehindNodesPosition();
+            this.section.pub(SectionEvents.Resize, {
+                node: this,
+                newSize,
+                originalSize: { width, height },
+            });
+        });
+    }
+    /**
+     * 测量节点的尺寸信息
+     */
+    async measure() {
+        const { height, width } = await getRectSizeSync(`#${this.id}`, 100, 3);
+        this.setStateBatch({
+            width,
+            height,
+            layouted: true,
+        });
+        return { width, height };
+    }
+    /**
+     * 更新节点所在列后面的节点的位置
+     */
+    updateBehindNodesPosition() {
+        const currentColumn = this.section.columnMap[this.col];
+        let start = this.order + 1;
+        if (start > currentColumn.length - 1) {
+            return;
+        }
+        for (; start < currentColumn.length; start++) {
+            const node = currentColumn[start];
+            const previousNode = currentColumn[start - 1];
+            const { top: previousNodeTop, height: previousNodeHeight, scrollTop: previousNodeScrollTop, } = previousNode.getState();
+            const rowGap = this.section.rowGap;
+            node.setStateBatch({
+                top: previousNodeTop + previousNodeHeight + rowGap,
+                scrollTop: previousNodeScrollTop + previousNodeHeight + rowGap,
+            });
+        }
+    }
+    /**
+     * 节点是否可见
+     */
+    get isInRange() {
+        const { scrollBoundaryStart, scrollBoundaryEnd } = this.root;
+        const { height: nodeHeight, scrollTop: nodeScrollTop } = this.getState();
+        return (nodeScrollTop < scrollBoundaryEnd &&
+            nodeScrollTop + nodeHeight > scrollBoundaryStart);
+    }
+}
+
+export { Node, NodeEvents };
+//# sourceMappingURL=node.js.map

package/dist/components/water-flow/node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.js","sources":["../../../src/components/water-flow/node.ts"],"sourcesContent":["import { getRectSizeSync } from '../../utils'\nimport { Root } from './root'\nimport { Section, SectionEvents } from './section'\nimport { StatefulEventBus } from './stateful-event-bus'\n\ninterface NodeProps {\n  /**\n   * 原始索引，即一维数组中的索引\n   */\n  childIndex: number\n  /**\n   * 在列里的顺序\n   */\n  order: number\n  /**\n   * 位于哪一列\n   */\n  col: number\n  height: number\n}\n\ntype NodeState = {\n  top: number\n  width: number\n  height: number\n  layouted: boolean\n  scrollTop: number\n};\n\nexport const NodeEvents = {\n  Resize: Symbol.for('resize'),\n}\n\nexport class Node extends StatefulEventBus<NodeState> {\n  id: string\n  /**\n   * 原始索引，即一维数组中的索引\n   */\n  childIndex: number\n  /**\n   * 在列里的顺序\n   */\n  order: number\n  /**\n   * 位于哪一列\n   */\n  col: number\n  constructor(public root: Root, public section: Section, props: NodeProps) {\n    const { height, childIndex, order, col } = props\n    super({\n      top: 0,\n      width: 0,\n      height,\n      scrollTop: 0,\n      layouted: false,\n    })\n    const nodeId = `${root.id}-${section.id}-item-${childIndex}`\n    Object.assign(this, { id: nodeId, childIndex, order, col })\n    this.setupSubscriptions()\n  }\n\n  private setupSubscriptions() {\n    this.sub('layouted', () => {\n      /**\n       * 如果当前分组所有的节点都完成布局计算，那么向分组推送 `AllNodesLayouted` 事件，section会在这个时机做一些计算\n       */\n      if (\n        [...this.section.nodes.values()].every(\n          (node) => node.getState().layouted\n        )\n      ) {\n        this.section.notify(SectionEvents.AllNodesLayouted)\n      }\n    })\n\n    /**\n     * 如果节点的尺寸发生了变化（这通常出现在节点内容包含网络数据的情况下，比如图片，这时要求用户调用 useFlowItemPositioner 返回的 resize 方法通知数据模型去重新计算布局）\n     *\n     * - 更新当前节点所在列之后的所有节点的位置信息\n     *\n     * - 通知 section 更新布局\n     */\n    this.sub(NodeEvents.Resize, async () => {\n      const { width, height } = this.getState()\n      const newSize = await this.measure()\n      if (newSize.height === height && newSize.width === width) {\n        return\n      }\n      this.updateBehindNodesPosition()\n      this.section.pub(SectionEvents.Resize, {\n        node: this,\n        newSize,\n        originalSize: { width, height },\n      })\n    })\n  }\n\n  /**\n   * 测量节点的尺寸信息\n   */\n  public async measure() {\n    const { height, width } = await getRectSizeSync(`#${this.id}`, 100, 3)\n    this.setStateBatch({\n      width,\n      height,\n      layouted: true,\n    })\n    return { width, height }\n  }\n\n  /**\n   * 更新节点所在列后面的节点的位置\n   */\n  updateBehindNodesPosition() {\n    const currentColumn = this.section.columnMap[this.col]\n    let start = this.order + 1\n\n    if (start > currentColumn.length - 1) {\n      return\n    }\n    for (; start < currentColumn.length; start++) {\n      const node = currentColumn[start]\n      const previousNode = currentColumn[start - 1]\n      const {\n        top: previousNodeTop,\n        height: previousNodeHeight,\n        scrollTop: previousNodeScrollTop,\n      } = previousNode.getState()\n      const rowGap = this.section.rowGap\n      node.setStateBatch({\n        top: previousNodeTop + previousNodeHeight + rowGap,\n        scrollTop: previousNodeScrollTop + previousNodeHeight + rowGap,\n      })\n    }\n  }\n\n  /**\n   * 节点是否可见\n   */\n  get isInRange() {\n    const { scrollBoundaryStart, scrollBoundaryEnd } = this.root\n    const { height: nodeHeight, scrollTop: nodeScrollTop } = this.getState()\n    return (\n      nodeScrollTop < scrollBoundaryEnd &&\n      nodeScrollTop + nodeHeight > scrollBoundaryStart\n    )\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/water-flow/root.d.ts

@@ -0,0 +1,144 @@
+import { Node } from './node';
+import { Section } from './section';
+import { StatefulEventBus } from './stateful-event-bus';
+import type { BaseProps, ScrollDirection, Size, WaterFlowProps } from './interface';
+export type RootProps = Pick<WaterFlowProps, 'cacheCount' | 'lowerThresholdCount' | 'upperThresholdCount'> & Required<Pick<BaseProps, 'id'>>;
+type RootState = {
+    /** 是否在滚动中 */
+    isScrolling: boolean;
+    /** 滚动偏移量 */
+    scrollOffset: number;
+    /**
+     * 滚动方向
+     *
+     * - forward 向下滚动
+     *
+     * - backward 向上滚动
+     */
+    scrollDirection: ScrollDirection;
+    /** 滚动高度 */
+    scrollHeight: number;
+    /** 容器的尺寸信息 */
+    containerSize: Size;
+    /** 渲染的分组区间范围 */
+    renderRange: [number, number];
+};
+export declare const RootEvents: {
+    ReachUpperThreshold: symbol;
+    ReachLowerThreshold: symbol;
+    Resize: symbol;
+    AllSectionsLayouted: symbol;
+    InitialRenderCompleted: symbol;
+};
+type Events = keyof typeof RootEvents;
+/**
+ * 数据模型继承自有状态的事件总线，便于在节点之间通信，以及通过 useSyncExternalStore 关联 React 视图
+ */
+export declare class Root extends StatefulEventBus<RootState, Events> {
+    /**
+     * 瀑布流根节点唯一标识
+     */
+    id: string;
+    /**
+     * 分组映射表，便于查找分组
+     */
+    sectionMap: Map<string, Section>;
+    /**
+     * 节点映射表，便于查找节点
+     */
+    nodeMap: Map<string, Node>;
+    /**
+     * 分组列表，基于计算出的渲染的分组区间范围 sections.slice(start, end + 1) 进行渲染
+     */
+    sections: Section[];
+    /**
+     * 设置预加载的 Item 条数。
+     */
+    cacheCount: number;
+    upperThresholdCount: number;
+    lowerThresholdCount: number;
+    /**
+     * 触发滚动阈值对应的 scrollTop 值
+     */
+    upperThresholdScrollTop: number;
+    /**
+     * 触发滚动阈值对应的 scrollTop 值
+     */
+    lowerThresholdScrollTop: number;
+    constructor(props: RootProps);
+    /**
+     * 设置订阅事件
+     */
+    private setupSubscriptions;
+    /**
+     * 渐进式渲染
+     *
+     * 因为初始没法知道每个分组的高度信息，不知道渲染边界，所以需要渐进式渲染
+     *
+     * 当目前的渲染批次的首个分组的scrollTop大于容器的高度，说明容器可视区域已经填满，没必要再往下渲染了
+     *
+     * @param [i=0] 从第几个分组开始渲染
+     *
+     */
+    renderInitialLayout(i?: number): void;
+    /**
+     * 计算滚动阈值对应的 scrollTop 并设置 upperThresholdScrollTop
+     * 当距顶部还有 upperThresholdCount 个 FlowItem 时的 scrollTop 值
+     */
+    private setUpperThresholdScrollTop;
+    /**
+     * 计算滚动阈值对应的 scrollTop 并设置 lowerThresholdScrollTop
+     * 当距底部还有 lowerThresholdCount 个 FlowItem 时的 scrollTop 值
+     */
+    private setLowerThresholdScrollTop;
+    /**
+     * 处理滚动到阈值的情况
+     * 检测当前滚动位置是否达到了上下阈值，并触发相应的事件
+     */
+    private handleReachThreshold;
+    /**
+     * 容器的滚动上边界
+     */
+    get scrollBoundaryStart(): number;
+    /**
+     * 容器的滚动下边界
+     */
+    get scrollBoundaryEnd(): number;
+    /**
+     * 计算每个section的底部位置
+     *
+     * sectionBottomRange = [ [section1.top, section1.bottom], [section2.top, section2.bottom], ..., [sectionN.top, sectionN.bottom] ]
+     *
+     * @returns [number,number][]
+     */
+    get sectionRange(): number[][];
+    /**
+     * 计算滚动高度
+     */
+    updateScrollHeight(): void;
+    /**
+     * 注册分组
+     */
+    registerSection(section: Section): void;
+    /**
+     * 注册节点
+     */
+    registerNode(node: Node): void;
+    /**
+     * 查找分组
+     */
+    findSection(id: string): Section;
+    /**
+     * 查找节点
+     */
+    findNode(id: string): Node;
+    /**
+     * 获取分组渲染区间
+     */
+    getSectionRenderRange(): [number, number];
+    /**
+     * 计算预渲染的分组个数
+     */
+    private calcCacheSection;
+}
+export {};

package/dist/components/water-flow/root.js

@@ -0,0 +1,383 @@
+import { nextTick } from '@tarojs/taro';
+import '../../utils/index.js';
+import { StatefulEventBus } from './stateful-event-bus.js';
+import { getSysInfo, isSameRenderRange } from './utils.js';
+import { getRectSizeSync } from '../../utils/dom.js';
+
+/* eslint-disable no-labels */
+const { windowHeight, windowWidth } = getSysInfo();
+const RootEvents = {
+    ReachUpperThreshold: Symbol.for('ReachUpperThreshold'),
+    ReachLowerThreshold: Symbol.for('ReachLowerThreshold'),
+    Resize: Symbol.for('Resize'),
+    AllSectionsLayouted: Symbol.for('AllSectionsLayouted'),
+    InitialRenderCompleted: Symbol.for('InitialRenderCompleted'),
+};
+/**
+ * 数据模型继承自有状态的事件总线，便于在节点之间通信，以及通过 useSyncExternalStore 关联 React 视图
+ */
+class Root extends StatefulEventBus {
+    constructor(props) {
+        const { id, cacheCount, lowerThresholdCount, upperThresholdCount } = props;
+        super({
+            isScrolling: false,
+            scrollOffset: 0,
+            scrollDirection: 'forward',
+            scrollHeight: windowHeight,
+            renderRange: [0, 0],
+            containerSize: {
+                width: windowWidth,
+                height: windowHeight,
+            },
+        });
+        /**
+         * 分组映射表，便于查找分组
+         */
+        this.sectionMap = new Map();
+        /**
+         * 节点映射表，便于查找节点
+         */
+        this.nodeMap = new Map();
+        /**
+         * 分组列表，基于计算出的渲染的分组区间范围 sections.slice(start, end + 1) 进行渲染
+         */
+        this.sections = [];
+        /**
+         * 设置预加载的 Item 条数。
+         */
+        this.cacheCount = 1;
+        this.upperThresholdCount = 0;
+        this.lowerThresholdCount = 0;
+        /**
+         * 触发滚动阈值对应的 scrollTop 值
+         */
+        this.upperThresholdScrollTop = -Infinity;
+        /**
+         * 触发滚动阈值对应的 scrollTop 值
+         */
+        this.lowerThresholdScrollTop = Infinity;
+        Object.assign(this, {
+            id,
+            cacheCount,
+            lowerThresholdCount,
+            upperThresholdCount,
+        });
+        this.setupSubscriptions();
+        getRectSizeSync(`#${id}`, 100).then(({ width = windowWidth, height = windowHeight }) => {
+            this.setStateIn('containerSize', {
+                width,
+                height,
+            });
+        });
+        this.renderInitialLayout();
+    }
+    /**
+     * 设置订阅事件
+     */
+    setupSubscriptions() {
+        /**
+         * 滚动过程中计算渲染的分组区间
+         * 滚动过程中分组的最大高度会发生更新，可以在这时计算滚动高度
+         */
+        this.sub('scrollOffset', () => {
+            this.setStateIn('renderRange', this.getSectionRenderRange());
+            this.handleReachThreshold();
+            if (this.getState().scrollDirection === 'forward') {
+                this.updateScrollHeight();
+            }
+        });
+        this.sub('scrollOffset', () => {
+            const sectionSize = this.sections.length;
+            const lastSection = this.sections[sectionSize - 1];
+            // 最后一个分组的每一列最后一行都已经完成了布局计算，那么这个时候的总高度应该是准确的
+            if (lastSection.columnMap.every((column) => column[column.length - 1].getState().layouted)) {
+                this.setLowerThresholdScrollTop();
+            }
+        });
+        this.sub(RootEvents.AllSectionsLayouted, () => {
+            this.setUpperThresholdScrollTop();
+        });
+        this.sub(RootEvents.Resize, () => {
+            this.setUpperThresholdScrollTop();
+            this.setLowerThresholdScrollTop();
+        });
+    }
+    /**
+     * 渐进式渲染
+     *
+     * 因为初始没法知道每个分组的高度信息，不知道渲染边界，所以需要渐进式渲染
+     *
+     * 当目前的渲染批次的首个分组的scrollTop大于容器的高度，说明容器可视区域已经填满，没必要再往下渲染了
+     *
+     * @param [i=0] 从第几个分组开始渲染
+     *
+     */
+    renderInitialLayout(i = 0) {
+        nextTick(() => {
+            const sectionSize = this.sections.length;
+            if (i >= sectionSize || i < 0) {
+                this.pub(RootEvents.InitialRenderCompleted, null);
+                return;
+            }
+            const section = this.sections[i];
+            section.layoutedSignal.promise.then(() => {
+                this.setStateIn('renderRange', [0, i + 1 > sectionSize ? sectionSize - 1 : i + 1]);
+                // 容器可视区域已经填满了，没必要再继续
+                if (section.getState().scrollTop > this.getState().containerSize.height) {
+                    this.pub(RootEvents.InitialRenderCompleted, section);
+                    return;
+                }
+                this.renderInitialLayout(i + 1);
+            });
+        });
+    }
+    /**
+     * 计算滚动阈值对应的 scrollTop 并设置 upperThresholdScrollTop
+     * 当距顶部还有 upperThresholdCount 个 FlowItem 时的 scrollTop 值
+     */
+    setUpperThresholdScrollTop() {
+        // 如果没有设置阈值或阈值为0，则返回0
+        if (!this.upperThresholdCount) {
+            this.upperThresholdScrollTop = 0;
+            return 0;
+        }
+        const sectionSize = this.sections.length;
+        const tracker = Array.from({ length: sectionSize }, () => new Map() // Map<列, { 当前列累计个数，当前列累计高度 }>
+        );
+        // 从第一个分组开始扫描
+        loopSeciton: for (let i = 0; i < sectionSize; i++) {
+            const section = this.sections[i];
+            const sectionTracker = tracker[i];
+            const columnMap = section.columnMap;
+            // 扫描当前分组的每一列
+            for (let col = 0; col < columnMap.length; col++) {
+                const column = columnMap[col];
+                const columnSize = column.length;
+                if (!sectionTracker.has(col)) {
+                    if (i === 0) {
+                        sectionTracker.set(col, { accCount: 0, accHeight: 0 });
+                    }
+                    else {
+                        const previousSectionTracker = tracker[i - 1];
+                        sectionTracker.set(col, {
+                            accCount: Math.max(...[...previousSectionTracker.values()].map((nodeTracker) => nodeTracker.accCount)),
+                            accHeight: section.getState().scrollTop,
+                        });
+                    }
+                }
+                const colTracker = sectionTracker.get(col);
+                // 扫描当前列的每一行
+                loopItem: for (let j = 0; j < columnSize; j++) {
+                    colTracker.accCount += 1;
+                    colTracker.accHeight += column[j].getState().height + (j === 0 ? 0 : section.rowGap);
+                    if (colTracker.accCount >= this.upperThresholdCount) {
+                        break loopItem;
+                    }
+                }
+            }
+            for (const [, colTracker] of sectionTracker) {
+                if (colTracker.accCount >= this.upperThresholdCount) {
+                    this.upperThresholdScrollTop = colTracker.accHeight;
+                    break loopSeciton;
+                }
+            }
+        }
+        return this.upperThresholdScrollTop;
+    }
+    /**
+     * 计算滚动阈值对应的 scrollTop 并设置 lowerThresholdScrollTop
+     * 当距底部还有 lowerThresholdCount 个 FlowItem 时的 scrollTop 值
+     */
+    setLowerThresholdScrollTop() {
+        if (this.lowerThresholdCount === 0) {
+            this.lowerThresholdScrollTop = this.getState().scrollHeight - this.getState().containerSize.height;
+            return 0;
+        }
+        const sectionSize = this.sections.length;
+        const tracker = Array.from({ length: sectionSize }, () => new Map());
+        // 从最后一个分组开始计算
+        loopSeciton: for (let i = sectionSize - 1; i >= 0; i--) {
+            const section = this.sections[i];
+            const sectionTracker = tracker[i];
+            const columnMap = section.columnMap;
+            // 扫描当前分组的每一列
+            for (let col = 0; col < columnMap.length; col++) {
+                const column = columnMap[col];
+                const columnSize = column.length;
+                if (!sectionTracker.has(col)) {
+                    if (i === sectionSize - 1) {
+                        sectionTracker.set(col, { accCount: 0, scrollTop: 0 });
+                    }
+                    else {
+                        const belowSectionTracker = tracker[i + 1];
+                        sectionTracker.set(col, {
+                            accCount: Math.max(...[...belowSectionTracker.values()].map((nodeTracker) => nodeTracker.accCount)),
+                            scrollTop: 0,
+                        });
+                    }
+                }
+                const colTracker = sectionTracker.get(col);
+                // 从当前列的最后一行开始往前扫描
+                loopItem: for (let j = columnSize - 1; j >= 0; j--) {
+                    colTracker.accCount += 1;
+                    colTracker.scrollTop = column[j].getState().scrollTop;
+                    if (colTracker.accCount >= this.lowerThresholdCount) {
+                        break loopItem;
+                    }
+                }
+            }
+            for (const [, colTracker] of sectionTracker) {
+                if (colTracker.accCount >= this.lowerThresholdCount) {
+                    this.lowerThresholdScrollTop = colTracker.scrollTop;
+                    break loopSeciton;
+                }
+            }
+        }
+        return this.lowerThresholdScrollTop;
+    }
+    /**
+     * 处理滚动到阈值的情况
+     * 检测当前滚动位置是否达到了上下阈值，并触发相应的事件
+     */
+    handleReachThreshold() {
+        const { upperThresholdScrollTop } = this;
+        const { scrollOffset, scrollDirection, containerSize } = this.getState();
+        if (scrollDirection === 'backward' &&
+            this.upperThresholdScrollTop !== -Infinity &&
+            scrollOffset <= upperThresholdScrollTop) {
+            this.pub(RootEvents.ReachUpperThreshold);
+        }
+        if (scrollDirection === 'forward' &&
+            this.lowerThresholdCount !== Infinity &&
+            scrollOffset + containerSize.height >= this.lowerThresholdScrollTop) {
+            this.pub(RootEvents.ReachLowerThreshold);
+        }
+    }
+    /**
+     * 容器的滚动上边界
+     */
+    get scrollBoundaryStart() {
+        return this.getState().scrollOffset;
+    }
+    /**
+     * 容器的滚动下边界
+     */
+    get scrollBoundaryEnd() {
+        return this.scrollBoundaryStart + this.getStateIn('containerSize').height;
+    }
+    /**
+     * 计算每个section的底部位置
+     *
+     * sectionBottomRange = [ [section1.top, section1.bottom], [section2.top, section2.bottom], ..., [sectionN.top, sectionN.bottom] ]
+     *
+     * @returns [number,number][]
+     */
+    get sectionRange() {
+        const length = this.sections.length;
+        if (length === 0)
+            return [];
+        const range = Array.from({ length }, () => [0, this.sections[0].maxColumnHeight]);
+        for (let i = 1; i < length; i++) {
+            const previous = range[i - 1];
+            range[i] = [previous[1], previous[1] + this.sections[i].maxColumnHeight];
+        }
+        return range;
+    }
+    /**
+     * 计算滚动高度
+     */
+    updateScrollHeight() {
+        this.setStateIn('scrollHeight', this.sectionRange[this.sectionRange.length - 1][1]);
+    }
+    /**
+     * 注册分组
+     */
+    registerSection(section) {
+        const { id, order } = section;
+        this.sectionMap.set(id, section);
+        this.sections[order] = section;
+    }
+    /**
+     * 注册节点
+     */
+    registerNode(node) {
+        this.nodeMap.set(node.id, node);
+    }
+    /**
+     * 查找分组
+     */
+    findSection(id) {
+        return this.sectionMap.get(id);
+    }
+    /**
+     * 查找节点
+     */
+    findNode(id) {
+        return this.nodeMap.get(id);
+    }
+    /**
+     * 获取分组渲染区间
+     */
+    getSectionRenderRange() {
+        const result = [Infinity, -Infinity];
+        for (let i = 0; i < this.sections.length; i++) {
+            const section = this.sections[i];
+            if (section.isInRange) {
+                result[0] = Math.min(result[0], i);
+                result[1] = Math.max(result[1], i);
+            }
+        }
+        if (result[0] === Infinity) {
+            result[0] = 0;
+        }
+        if (result[1] === -Infinity) {
+            result[1] = this.sections.length - 1;
+        }
+        const scrollDirection = this.getState().scrollDirection;
+        const [backwardCache, forwardCache] = this.calcCacheSection(result);
+        const backwardDistance = scrollDirection === 'backward' ? backwardCache : 0;
+        const forwardDistance = scrollDirection === 'forward' ? forwardCache : 0;
+        const overscanBackward = result[0] - backwardDistance;
+        const overscanForward = result[1] + forwardDistance;
+        result[0] = overscanBackward < 0 ? 0 : overscanBackward;
+        result[1] = overscanForward > this.sections.length ? this.sections.length - 1 : overscanForward;
+        return isSameRenderRange(result, this.getState().renderRange) ? this.getState().renderRange : result;
+    }
+    /**
+     * 计算预渲染的分组个数
+     */
+    calcCacheSection(renderRange) {
+        var _a, _b, _c, _d;
+        const clientHeight = this.getState().containerSize.height;
+        const sectionCount = this.sectionMap.size;
+        let [start, end] = renderRange;
+        let cacheBackward = 1;
+        let cacheForward = 1;
+        if (start > 0) {
+            let acc = (_b = (_a = this.sections[--start]) === null || _a === void 0 ? void 0 : _a.getState().height) !== null && _b !== void 0 ? _b : 0;
+            while (--start > 0) {
+                const prevSection = this.sections[start];
+                acc += prevSection.getState().height;
+                cacheBackward += 1;
+                if (acc >= clientHeight >>> 1) {
+                    break;
+                }
+            }
+        }
+        if (end < sectionCount - 1) {
+            let acc = (_d = (_c = this.sections[++end]) === null || _c === void 0 ? void 0 : _c.getState().height) !== null && _d !== void 0 ? _d : 0;
+            while (++end < sectionCount - 1) {
+                const nextSection = this.sections[end];
+                acc += nextSection.getState().height;
+                cacheForward += 1;
+                if (acc >= clientHeight >>> 1) {
+                    break;
+                }
+            }
+        }
+        return [cacheBackward, cacheForward];
+    }
+}
+
+export { Root, RootEvents };
+//# sourceMappingURL=root.js.map