@tarojs/components-advanced 4.0.13-alpha.0 → 4.0.13

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

@@ -0,0 +1,395 @@
+import Taro 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.updateScrollHeight();
+            this.handleReachThreshold();
+        });
+        const lowerThresholdScrollTopDisposer = 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();
+                lowerThresholdScrollTopDisposer();
+            }
+        });
+        this.sub(RootEvents.AllSectionsLayouted, () => {
+            this.setUpperThresholdScrollTop();
+        });
+        this.sub(RootEvents.Resize, () => {
+            this.setUpperThresholdScrollTop();
+            this.setLowerThresholdScrollTop();
+        });
+    }
+    /**
+     * 渐进式渲染
+     *
+     * 因为初始没法知道每个分组的高度信息，不知道渲染边界，所以需要渐进式渲染
+     *
+     * 当目前的渲染批次的首个分组的scrollTop大于容器的高度，说明容器可视区域已经填满，没必要再往下渲染了
+     *
+     * @param [i=0] 从第几个分组开始渲染
+     *
+     */
+    renderInitialLayout(i = 0) {
+        Taro.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

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

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

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

@@ -0,0 +1,110 @@
+import { Node } from './node';
+import { Root } from './root';
+import { StatefulEventBus } from './stateful-event-bus';
+export interface SectionProps {
+    /** 分组的唯一标识 */
+    id: string;
+    /** 分组的列数 */
+    col: number;
+    /** 分组的顺序 */
+    order: number;
+    /** 节点数量 */
+    count: number;
+    /** 该分组的行间距 */
+    rowGap: number;
+    /** 该分组的列间距  */
+    columnGap: number;
+}
+/**
+ * 分组状态
+ */
+type SectionState = {
+    /**
+     * 分组是否已经布局计算
+     */
+    layouted: boolean;
+    /**
+     * 分组顶部距离容器顶部的距离
+     */
+    scrollTop: number;
+    /**
+     * 分组的高度
+     */
+    height: number;
+    /**
+     * 每个列的渲染范围
+     * 每个元素为一个二元组，第一个元素为起始索引，第二个元素为结束索引
+     */
+    renderRange: [number, number][];
+};
+export declare const SectionEvents: {
+    AllNodesLayouted: symbol;
+    Resize: symbol;
+};
+export declare class Section extends StatefulEventBus<SectionState> {
+    root: Root;
+    id: string;
+    order: number;
+    col: number;
+    columnMap: Node[][];
+    nodes: Map<string, Node>;
+    defaultSize: number;
+    count: number;
+    rowGap: number;
+    columnGap: number;
+    layoutedSignal: {
+        promise: Promise<void>;
+        resolve: () => void;
+        reject: (reason?: any) => void;
+    };
+    constructor(root: Root, props: SectionProps);
+    /**
+     * 订阅事件
+     */
+    private setupSubscriptions;
+    /**
+     * 获取当前分组的最大高度，分组的最大高度由分组最高列决定
+     * @returns 当前分组的最大高度
+     */
+    get maxColumnHeight(): number;
+    /**
+     * 当前分组是否在可视区域
+     *
+     * 滚动偏移为 scrollOffset，容器的高度为 containerSize.height
+     *
+     * 当前容器滚动上边界(scrollBoundaryStart)为 scrollOffset，容器滚动的下边界(scrollBoundaryEnd)为 scrollOffset + containerSize.height
+     *
+     * 如果分组的 scrollTop 小于滚动下边界并且 scrollTop + 分组高度大于滚动上边界，那么分组在可视区域
+     */
+    get isInRange(): boolean;
+    /**
+     * 注册节点
+     */
+    private register;
+    /**
+     * 初始化分组内的列，即将一维数组转二维数组
+     */
+    private initializeColumnMap;
+    /**
+     * 更新当前分组之后的分组的位置信息
+     */
+    private updateBehindSectionsPosition;
+    /**
+     * 更新指定列的节点位置信息
+     * @param col 列索引
+     */
+    private updateColumnNode;
+    /**
+     * 更新每列节点的位置
+     */
+    private updateNodes;
+    /**
+     * 计算当前分组的 scrollTop，即该分组之前的所有分组的最大列高度之和
+     */
+    private calcScrollTop;
+    /**
+     * 计算当前分组内每列应该渲染的节点索引区间
+     */
+    getNodeRenderRange(): [number, number][];
+}
+export {};