@tarojs/components-advanced 4.1.0-alpha.1 → 4.1.0-alpha.2

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './virtual-list';
 export * from './virtual-waterfall';
+export * from './water-flow';

package/dist/components/index.js

@@ -1,3 +1,7 @@
 export { VirtualList } from './virtual-list/index.js';
 export { VirtualWaterfall } from './virtual-waterfall/index.js';
+import './water-flow/index.js';
+export { FlowItem, useFlowItemPositioner } from './water-flow/flow-item.js';
+export { FlowSection } from './water-flow/flow-section.js';
+export { WaterFlow } from './water-flow/water-flow.js';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from 'react';
+import type { FlowItemContainerProps } from './interface';
+export declare const useFlowItemPositioner: () => {
+    resize: (this: unknown) => void;
+    top: number;
+    scrollTop: number;
+    width: number;
+    height: number;
+};
+export declare function FlowItemContainer({ children, ...props }: PropsWithChildren<FlowItemContainerProps>): import("react").ReactElement<import("@tarojs/components").ViewProps, string | import("react").JSXElementConstructor<any>>;
+export declare function FlowItem(props: PropsWithChildren): import("react").ReactNode;

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

@@ -0,0 +1,70 @@
+import { __rest } from 'tslib';
+import { View } from '@tarojs/components';
+import { createContext, useContext, useRef, useMemo, useEffect, useLayoutEffect, createElement } from 'react';
+import { NodeEvents } from './node.js';
+import { useMemoizedFn } from './use-memoized-fn.js';
+import { useObservedAttr } from './use-observed-attr.js';
+import { isWeb } from './utils.js';
+
+const FlowItemContext = createContext(Object.create(null));
+const useFlowItemPositioner = () => {
+    const nodeModel = useContext(FlowItemContext).node;
+    const width$ = useObservedAttr(nodeModel, 'width');
+    const height$ = useObservedAttr(nodeModel, 'height');
+    const top$ = useObservedAttr(nodeModel, 'top');
+    const scrollTop$ = useObservedAttr(nodeModel, 'scrollTop');
+    return {
+        resize: useMemoizedFn(() => {
+            if (!isWeb()) {
+                nodeModel.pub(NodeEvents.Resize);
+            }
+        }),
+        top: top$,
+        scrollTop: scrollTop$,
+        width: width$,
+        height: height$,
+    };
+};
+function FlowItemContainer(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { node } = props;
+    const layouted$ = useObservedAttr(node, 'layouted');
+    const top$ = useObservedAttr(node, 'top');
+    const height$ = useObservedAttr(node, 'height');
+    const refFlowItem = useRef();
+    const itemStyle = useMemo(() => {
+        const baseStyle = {
+            width: '100%',
+            minHeight: node.section.defaultSize,
+        };
+        if (!layouted$) {
+            return baseStyle;
+        }
+        Reflect.deleteProperty(baseStyle, 'minHeight');
+        return Object.assign(Object.assign({}, baseStyle), { height: height$, transition: 'transform 20ms cubic-bezier(0.075, 0.82, 0.165, 1)', willChange: 'transform', position: 'absolute', top: 0, left: 0, transform: `translate3d(0px, ${top$}px, 0px)` });
+    }, [top$, layouted$, height$]);
+    useEffect(() => {
+        let observer;
+        if (isWeb() && typeof ResizeObserver !== 'undefined') {
+            observer = new ResizeObserver(() => {
+                node.pub(NodeEvents.Resize);
+            });
+            observer.observe(refFlowItem.current);
+        }
+        return () => {
+            if (observer) {
+                observer.disconnect();
+            }
+        };
+    }, [node]);
+    useLayoutEffect(() => {
+        node.measure();
+    }, [node]);
+    return createElement(View, { style: itemStyle, key: node.id }, createElement(View, { id: node.id, ref: refFlowItem }, createElement(FlowItemContext.Provider, { value: { node } }, children)));
+}
+function FlowItem(props) {
+    return props.children;
+}
+
+export { FlowItem, FlowItemContainer, useFlowItemPositioner };
+//# sourceMappingURL=flow-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flow-item.js","sources":["../../../src/components/water-flow/flow-item.ts"],"sourcesContent":["import { View } from '@tarojs/components'\nimport {\n  type CSSProperties,\n  type PropsWithChildren,\n  createContext,\n  createElement,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { Node, NodeEvents } from './node'\nimport { useMemoizedFn } from './use-memoized-fn'\nimport { useObservedAttr } from './use-observed-attr'\nimport { isWeb } from './utils'\n\nimport type { FlowItemContainerProps } from './interface'\n\nconst FlowItemContext = createContext<{ node: Node }>(Object.create(null))\nexport const useFlowItemPositioner = () => {\n  const nodeModel = useContext(FlowItemContext).node\n  const width$ = useObservedAttr(nodeModel, 'width')\n  const height$ = useObservedAttr(nodeModel, 'height')\n  const top$ = useObservedAttr(nodeModel, 'top')\n  const scrollTop$ = useObservedAttr(nodeModel, 'scrollTop')\n\n  return {\n    resize: useMemoizedFn(() => {\n      if (!isWeb()) {\n        nodeModel.pub(NodeEvents.Resize)\n      }\n    }),\n    top: top$,\n    scrollTop: scrollTop$,\n    width: width$,\n    height: height$,\n  }\n}\n\nexport function FlowItemContainer({\n  children,\n  ...props\n}: PropsWithChildren<FlowItemContainerProps>) {\n  const { node } = props\n  const layouted$ = useObservedAttr(node, 'layouted')\n  const top$ = useObservedAttr(node, 'top')\n  const height$ = useObservedAttr(node, 'height')\n  const refFlowItem = useRef<HTMLElement>()\n\n  const itemStyle: CSSProperties = useMemo(() => {\n    const baseStyle: CSSProperties = {\n      width: '100%',\n      minHeight: node.section.defaultSize,\n    }\n    if (!layouted$) {\n      return baseStyle\n    }\n    Reflect.deleteProperty(baseStyle, 'minHeight')\n    return {\n      ...baseStyle,\n      height: height$,\n      transition: 'transform 20ms cubic-bezier(0.075, 0.82, 0.165, 1)',\n      willChange: 'transform',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      transform: `translate3d(0px, ${top$}px, 0px)`,\n    }\n  }, [top$, layouted$, height$])\n\n  useEffect(() => {\n    let observer: ResizeObserver\n    if (isWeb() && typeof ResizeObserver !== 'undefined') {\n      observer = new ResizeObserver(() => {\n        node.pub(NodeEvents.Resize)\n      })\n      observer.observe(refFlowItem.current!)\n    }\n    return () => {\n      if (observer) {\n        observer.disconnect()\n      }\n    }\n  }, [node])\n\n  useLayoutEffect(() => {\n    node.measure()\n  }, [node])\n\n  return createElement(\n    View,\n    { style: itemStyle, key: node.id },\n    createElement(\n      View,\n      { id: node.id, ref: refFlowItem },\n      createElement(FlowItemContext.Provider, { value: { node } }, children)\n    )\n  )\n}\n\nexport function FlowItem(props: PropsWithChildren) {\n  return props.children\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { type PropsWithChildren } from 'react';
+import { Section } from './section';
+import type { FlowSectionProps } from './interface';
+export interface _FlowSectionProps extends FlowSectionProps {
+    section: Section;
+}
+export declare function FlowSection({ children, ...props }: PropsWithChildren<FlowSectionProps>): import("react").ReactElement<import("@tarojs/components").ViewProps, string | import("react").JSXElementConstructor<any>>;

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

@@ -0,0 +1,66 @@
+import { __rest } from 'tslib';
+import { View } from '@tarojs/components';
+import { useMemo, Children, createElement } from 'react';
+import { FlowItemContainer } from './flow-item.js';
+import { useObservedAttr } from './use-observed-attr.js';
+
+function FlowSection(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { id, className, style, section, rowGap = 0, columnGap = 0, } = props;
+    const layouted$ = useObservedAttr(section, 'layouted');
+    const height$ = useObservedAttr(section, 'height');
+    const renderRange$ = useObservedAttr(section, 'renderRange');
+    const scrollTop$ = useObservedAttr(section, 'scrollTop');
+    const sectionStyle = useMemo(() => {
+        const baseStyle = Object.assign({ display: 'flex', flexDirection: 'row', width: '100%', height: height$, gap: columnGap, visibility: layouted$ ? 'visible' : 'hidden' }, style);
+        if (!layouted$) {
+            return baseStyle;
+        }
+        return Object.assign(Object.assign({}, baseStyle), { position: 'absolute', top: 0, transform: `translate3d(0px, ${scrollTop$}px, 0px)`, left: 0 });
+    }, [height$, style, layouted$, scrollTop$, columnGap]);
+    const columns = useMemo(() => {
+        const childNodes = Children.toArray(children);
+        const columnStyle = {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rowGap,
+            flex: 1,
+        };
+        /** 已经完成布局计算，使用虚拟滚动 */
+        if (layouted$) {
+            return renderRange$.map(([startIndex, endIndex], colIndex) => {
+                const columnId = `col-${colIndex}`;
+                return createElement(View, {
+                    style: columnStyle,
+                    id: columnId,
+                    key: columnId,
+                }, section.columnMap[colIndex]
+                    .slice(startIndex, endIndex + 1)
+                    .map((node) => {
+                    const childNode = childNodes[node.childIndex];
+                    const columnProps = {
+                        node,
+                        key: `${id}-item-${node.childIndex}`,
+                    };
+                    return createElement(FlowItemContainer, columnProps, childNode);
+                }));
+            });
+        }
+        return section.columnMap.map((column, colIndex) => {
+            const columnId = `col-${colIndex}`;
+            return createElement(View, { style: columnStyle, id: columnId, key: columnId }, column.map((node) => {
+                const childNode = childNodes[node.childIndex];
+                const columnProps = {
+                    node,
+                    key: `${id}-item-${node.childIndex}`,
+                };
+                return createElement(FlowItemContainer, columnProps, childNode);
+            }));
+        });
+    }, [children, layouted$, section.columnMap, renderRange$, id]);
+    return createElement(View, { style: sectionStyle, className, id: id !== null && id !== void 0 ? id : section.id }, columns);
+}
+
+export { FlowSection };
+//# sourceMappingURL=flow-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flow-section.js","sources":["../../../src/components/water-flow/flow-section.ts"],"sourcesContent":["import { View } from '@tarojs/components'\nimport {\n  type CSSProperties,\n  type PropsWithChildren,\n  Children,\n  createElement,\n  useMemo,\n} from 'react'\n\nimport { FlowItemContainer } from './flow-item'\nimport { Section } from './section'\nimport { useObservedAttr } from './use-observed-attr'\n\nimport type { FlowSectionProps } from './interface'\n\nexport interface _FlowSectionProps extends FlowSectionProps {\n  section: Section\n}\n\nexport function FlowSection({\n  children,\n  ...props\n}: PropsWithChildren<FlowSectionProps>) {\n  const {\n    id,\n    className,\n    style,\n    section,\n    rowGap = 0,\n    columnGap = 0,\n  } = props as _FlowSectionProps\n  const layouted$ = useObservedAttr(section, 'layouted')\n  const height$ = useObservedAttr(section, 'height')\n  const renderRange$ = useObservedAttr(section, 'renderRange')\n  const scrollTop$ = useObservedAttr(section, 'scrollTop')\n\n  const sectionStyle: CSSProperties = useMemo(() => {\n    const baseStyle: CSSProperties = {\n      display: 'flex',\n      flexDirection: 'row',\n      width: '100%',\n      height: height$,\n      gap: columnGap,\n      visibility: layouted$ ? 'visible' : 'hidden',\n      ...style,\n    }\n\n    if (!layouted$) {\n      return baseStyle\n    }\n\n    return {\n      ...baseStyle,\n      position: 'absolute',\n      top: 0,\n      transform: `translate3d(0px, ${scrollTop$}px, 0px)`,\n      left: 0,\n    }\n  }, [height$, style, layouted$, scrollTop$, columnGap])\n\n  const columns = useMemo(() => {\n    const childNodes = Children.toArray(children)\n    const columnStyle: CSSProperties = {\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: rowGap,\n      flex: 1,\n    }\n    /** 已经完成布局计算，使用虚拟滚动 */\n    if (layouted$) {\n      return renderRange$.map(([startIndex, endIndex], colIndex) => {\n        const columnId = `col-${colIndex}`\n        return createElement(\n          View,\n          {\n            style: columnStyle,\n            id: columnId,\n            key: columnId,\n          },\n          section.columnMap[colIndex]\n            .slice(startIndex, endIndex + 1)\n            .map((node) => {\n              const childNode = childNodes[node.childIndex]\n              const columnProps: any = {\n                node,\n                key: `${id}-item-${node.childIndex}`,\n              }\n              return createElement(FlowItemContainer, columnProps, childNode)\n            })\n        )\n      })\n    }\n\n    return section.columnMap.map((column, colIndex) => {\n      const columnId = `col-${colIndex}`\n      return createElement(\n        View,\n        { style: columnStyle, id: columnId, key: columnId },\n        column.map((node) => {\n          const childNode = childNodes[node.childIndex]\n          const columnProps: any = {\n            node,\n            key: `${id}-item-${node.childIndex}`,\n          }\n          return createElement(FlowItemContainer, columnProps, childNode)\n        })\n      )\n    })\n  }, [children, layouted$, section.columnMap, renderRange$, id])\n\n  return createElement(\n    View,\n    { style: sectionStyle, className, id: id ?? section.id },\n    columns\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+export { FlowItem, useFlowItemPositioner } from './flow-item';
+export { FlowSection } from './flow-section';
+export type { FlowSectionProps, WaterFlowProps } from './interface';
+export { WaterFlow } from './water-flow';

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

@@ -0,0 +1,4 @@
+export { FlowItem, useFlowItemPositioner } from './flow-item.js';
+export { FlowSection } from './flow-section.js';
+export { WaterFlow } from './water-flow.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -0,0 +1,54 @@
+import { ScrollViewProps } from '@tarojs/components';
+import { Node } from './node';
+import type { CSSProperties } from 'react';
+export interface BaseProps {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface WaterFlowProps extends Omit<ScrollViewProps, 'cacheExtent' | 'upperThreshold' | 'lowerThreshold' | 'style'>, Pick<BaseProps, 'style'> {
+    /**
+     * 距顶部多少个FlowItem时，触发 scrolltoupper 事件
+     * @default 0
+     */
+    upperThresholdCount?: number;
+    /**
+     * @default 0
+     * 距底部多少个 FlowItem时，触发 scrolltolower 事件
+     */
+    lowerThresholdCount?: number;
+    /**
+     * 设置预加载的 Item 条数。
+     * @default 50
+     */
+    cacheCount?: number;
+}
+export interface FlowSectionProps extends BaseProps {
+    /**
+     * 列数
+     */
+    column?: number;
+    /**
+     * 该分组的行间距
+     */
+    rowGap?: number;
+    /**
+     * 该分组的列间距
+     */
+    columnGap?: number;
+}
+export interface FlowItemContainerProps extends BaseProps {
+    node: Node;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+/**
+ * 滚动方向
+ *
+ * - forward 向下滚动
+ *
+ * - backward 向上滚动
+ */
+export type ScrollDirection = 'forward' | 'backward';

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

@@ -0,0 +1,63 @@
+import { Root } from './root';
+import { Section } from './section';
+import { StatefulEventBus } from './stateful-event-bus';
+interface NodeProps {
+    /**
+     * 原始索引，即一维数组中的索引
+     */
+    childIndex: number;
+    /**
+     * 在列里的顺序
+     */
+    order: number;
+    /**
+     * 位于哪一列
+     */
+    col: number;
+    height: number;
+}
+type NodeState = {
+    top: number;
+    width: number;
+    height: number;
+    layouted: boolean;
+    scrollTop: number;
+};
+export declare const NodeEvents: {
+    Resize: symbol;
+};
+export declare class Node extends StatefulEventBus<NodeState> {
+    root: Root;
+    section: Section;
+    id: string;
+    /**
+     * 原始索引，即一维数组中的索引
+     */
+    childIndex: number;
+    /**
+     * 在列里的顺序
+     */
+    order: number;
+    /**
+     * 位于哪一列
+     */
+    col: number;
+    constructor(root: Root, section: Section, props: NodeProps);
+    private setupSubscriptions;
+    /**
+     * 测量节点的尺寸信息
+     */
+    measure(): Promise<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * 更新节点所在列后面的节点的位置
+     */
+    updateBehindNodesPosition(): void;
+    /**
+     * 节点是否可见
+     */
+    get isInRange(): boolean;
+}
+export {};

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[][];
+    /**
+     * 计算滚动高度
+     */
+    private updateScrollHeight;
+    /**
+     * 注册分组
+     */
+    registerSection(section: Section): void;
+    /**
+     * 注册节点
+     */
+    registerNode(node: Node): void;
+    /**
+     * 查找分组
+     */
+    findSection(id: string): Section;
+    /**
+     * 查找节点
+     */
+    findNode(id: string): Node;
+    /**
+     * 获取分组渲染区间
+     */
+    getSectionRenderRange(): [number, number];
+    /**
+     * 计算预渲染的分组个数
+     */
+    private calcCacheSection;
+}
+export {};