hy-virtual-tree 1.0.0

package/dist/index.js

@@ -0,0 +1,1218 @@
+/**
+ * js-booster - High-performance frontend library
+ * VirtualScroll - Virtual scrolling implementation
+ * @version "1.1.4"
+ * @author https://cg-zhou.top/
+ * @license MIT
+ */
+
+class VirtualScroll {
+  /**
+   * Create a virtual scroll instance
+   * @param {Object} options Configuration options
+   * @param {HTMLElement} options.container Scroll container element
+   * @param {Array} options.items Data items to display
+   * @param {number} [options.itemHeight=20] Height of each list item (pixels)
+   * @param {number} [options.bufferSize=10] Number of buffer items outside the visible area
+   * @param {Function} [options.renderItem] Custom item rendering function
+   * @param {Function} [options.renderHeader] Custom header rendering function
+   * @param {number} [options.maxHeight=26840000] Maximum height in pixels for the content wrapper
+   */
+  constructor(options) {
+    this.container = options.container;
+    this.items = options.items || [];
+    this.itemHeight = options.itemHeight || 20;
+    this.bufferSize = options.bufferSize || 10;
+    this.customRenderItem = options.renderItem;
+    this.customRenderHeader = options.renderHeader;
+    this.maxHeight = options.maxHeight || 26840000; // Add maximum height limit to prevent DOM height overflow
+
+    this.visibleStartIndex = 0;
+    this.visibleEndIndex = 0;
+    this.scrollContainer = null;
+    this.contentWrapper = null;
+    this.contentContainer = null;
+    this.totalHeight = this.items.length * this.itemHeight;
+    this.heightScale = 1; // Height scaling factor
+
+    // If total height exceeds maximum height, calculate scaling factor
+    if (this.totalHeight > this.maxHeight) {
+      this.heightScale = this.maxHeight / this.totalHeight;
+    }
+    this.initialize();
+  }
+
+  /**
+   * Initialize virtual scroll component
+   * @private
+   */
+  initialize() {
+    // Clear container
+    this.container.innerHTML = '';
+
+    // Create scroll container
+    this.scrollContainer = document.createElement('div');
+    // Add inline styles
+    Object.assign(this.scrollContainer.style, {
+      flex: '1',
+      overflow: 'auto',
+      position: 'relative',
+      minHeight: '0',
+      height: '100%',
+      boxSizing: 'border-box'
+    });
+
+    // If there's a custom header render function, render the header
+    if (this.customRenderHeader) {
+      const header = this.customRenderHeader();
+      if (header) {
+        this.scrollContainer.appendChild(header);
+      }
+    }
+
+    // Create content wrapper
+    this.contentWrapper = document.createElement('div');
+    // Add inline styles
+    Object.assign(this.contentWrapper.style, {
+      position: 'relative',
+      width: '100%'
+    });
+
+    // Use scaled height to ensure it doesn't exceed browser limits
+    const scaledHeight = this.totalHeight * this.heightScale;
+    this.contentWrapper.style.height = `${scaledHeight}px`;
+
+    // Create content container
+    this.contentContainer = document.createElement('div');
+    // Add inline styles
+    Object.assign(this.contentContainer.style, {
+      position: 'absolute',
+      width: '100%',
+      left: '0'
+    });
+
+    // Add scroll event listener
+    this.scrollContainer.addEventListener('scroll', this.handleScroll.bind(this));
+
+    // Assemble DOM
+    this.contentWrapper.appendChild(this.contentContainer);
+    this.scrollContainer.appendChild(this.contentWrapper);
+    this.container.appendChild(this.scrollContainer);
+
+    // Render initial visible items
+    this.renderVisibleItems(0, Math.min(100, this.items.length));
+  }
+
+  /**
+   * Handle scroll event
+   * @private
+   */
+  handleScroll() {
+    const scrollTop = this.scrollContainer.scrollTop;
+    const containerHeight = this.scrollContainer.clientHeight;
+
+    // Consider scaling factor in calculations
+    const realScrollTop = scrollTop / this.heightScale;
+
+    // Calculate visible range
+    const startIndex = Math.max(0, Math.floor(realScrollTop / this.itemHeight) - this.bufferSize);
+    const endIndex = Math.min(this.items.length, Math.ceil((realScrollTop + containerHeight / this.heightScale) / this.itemHeight) + this.bufferSize);
+
+    // Only update when visible range changes
+    if (startIndex !== this.visibleStartIndex || endIndex !== this.visibleEndIndex || endIndex === 0) {
+      this.renderVisibleItems(startIndex, endIndex);
+      this.visibleStartIndex = startIndex;
+      this.visibleEndIndex = endIndex;
+    }
+  }
+
+  /**
+   * Render visible items
+   * @param {number} startIndex Start index
+   * @param {number} endIndex End index
+   * @private
+   */
+  renderVisibleItems(startIndex, endIndex) {
+    // Clear content container
+    this.contentContainer.innerHTML = '';
+
+    // Set position considering scaling factor
+    this.contentContainer.style.transform = `translateY(${startIndex * this.itemHeight * this.heightScale}px)`;
+
+    // Render visible items
+    for (let i = startIndex; i < endIndex; i++) {
+      const item = this.items[i];
+      if (this.customRenderItem) {
+        // Use custom render function
+        const itemElement = this.customRenderItem(item, i);
+        if (itemElement) {
+          // Only set necessary height styles, other styles are determined by the caller
+          itemElement.style.height = `${this.itemHeight * this.heightScale}px`;
+          itemElement.style.boxSizing = 'border-box';
+          itemElement.style.width = '100%';
+          this.contentContainer.appendChild(itemElement);
+        }
+      } else {
+        // Use default rendering - very simple default implementation
+        const row = document.createElement('div');
+        Object.assign(row.style, {
+          height: `${this.itemHeight * this.heightScale}px`,
+          width: '100%',
+          boxSizing: 'border-box',
+          padding: '8px',
+          borderBottom: '1px solid #eee'
+        });
+        row.textContent = JSON.stringify(item);
+        this.contentContainer.appendChild(row);
+      }
+    }
+  }
+
+  /**
+   * Update data items and re-render
+   * @param {Array} items New data items array
+   * @public
+   */
+  updateItems(items) {
+    this.items = items || [];
+    this.totalHeight = this.items.length * this.itemHeight;
+
+    // Recalculate scaling factor
+    this.heightScale = 1;
+    if (this.totalHeight > this.maxHeight) {
+      this.heightScale = this.maxHeight / this.totalHeight;
+    }
+
+    // Ensure height is set correctly
+    if (this.contentWrapper) {
+      this.contentWrapper.style.height = `${this.totalHeight * this.heightScale}px`;
+    }
+    this.visibleStartIndex = 0;
+    this.visibleEndIndex = 0;
+
+    // Force recalculation of visible items
+    this.handleScroll();
+  }
+
+  /**
+   * Scroll to specified index
+   * @param {number} index Index of the item to scroll to
+   * @public
+   */
+  scrollToIndex(index) {
+    if (index >= 0 && index < this.items.length) {
+      // Apply scaling factor when scrolling
+      this.scrollContainer.scrollTop = index * this.itemHeight * this.heightScale;
+    }
+  }
+
+  /**
+   * Destroy component, remove event listeners, etc.
+   * @public
+   */
+  destroy() {
+    if (this.scrollContainer) {
+      this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+    }
+    if (this.container) {
+      this.container.innerHTML = '';
+    }
+    this.items = null;
+    this.container = null;
+    this.scrollContainer = null;
+    this.contentWrapper = null;
+    this.contentContainer = null;
+  }
+
+  /**
+   * Refresh virtual scroll, re-render current visible items
+   * @public
+   */
+  refresh() {
+    this.handleScroll();
+  }
+
+  /**
+   * Get scroll container element
+   * @returns {HTMLElement} Scroll container element
+   * @public
+   */
+  getScrollContainer() {
+    return this.scrollContainer;
+  }
+}
+
+/**
+ * js-booster - High-performance frontend library
+ * @version "1.1.4"
+ * @author https://cg-zhou.top/
+ * @license MIT
+ */
+
+// If in browser environment, add to global object
+if (typeof window !== 'undefined') {
+  window.JsBooster = {
+    VirtualScroll
+  };
+}
+
+const isString = (e) => typeof e === 'string';
+const isNumber = (e) => typeof e === 'number';
+const isObject = (e) => Object.prototype.toString.call(e) === '[object Object]';
+const isElement = (e) => e instanceof Element;
+const isFunction = (e) => typeof e === 'function';
+const isArray = (e) => Array.isArray(e);
+const isBoolean = (e) => typeof e === 'boolean';
+
+class Checkbox {
+    el;
+    checked = false;
+    label = '';
+    disabled = false;
+    indeterminate = false;
+    constructor(config) {
+        config = this.generateConfig(config);
+        this.label = config.label;
+        this.render(config);
+    }
+    generateConfig(config) {
+        return {
+            checked: false,
+            disabled: false,
+            indeterminate: false,
+            ...config
+        };
+    }
+    render(config) {
+        const el = document.createElement('span');
+        el.classList.add('hy-checkbox');
+        const content = document.createElement('span');
+        content.classList.add('hy-checkbox__input');
+        const inner = document.createElement('span');
+        inner.classList.add('hy-checkbox__inner');
+        content.appendChild(inner);
+        if (config.label) {
+            const label = document.createElement('span');
+            label.classList.add('hy-checkbox__label');
+            content.appendChild(label);
+        }
+        el.appendChild(content);
+        el.addEventListener('click', (e) => {
+            config.onClick && config.onClick(e);
+            e.stopPropagation();
+        });
+        this.el = el;
+        this.setStatus(config);
+    }
+    setStatus(config) {
+        if (!this.el)
+            return;
+        const classList = this.el.classList;
+        if (isBoolean(config.disabled)) {
+            classList[config.disabled ? 'add' : 'remove']('is-disabled');
+            this.disabled = config.disabled;
+            if (config.disabled) {
+                classList.remove('is-checked');
+                return;
+            }
+        }
+        if (isBoolean(config.indeterminate)) {
+            classList[config.indeterminate ? 'add' : 'remove']('is-indeterminate');
+            this.indeterminate = config.indeterminate;
+            if (config.indeterminate) {
+                classList.remove('is-checked');
+                return;
+            }
+        }
+        if (isBoolean(config.checked)) {
+            classList[config.checked ? 'add' : 'remove']('is-checked');
+            this.checked = config.checked;
+        }
+    }
+    mount(el) {
+        if (!this.el)
+            return;
+        el.appendChild(this.el);
+    }
+}
+
+class Radio {
+    el;
+    checked = false;
+    label = '';
+    disabled = false;
+    constructor(config) {
+        config = this.generateConfig(config);
+        this.label = config.label;
+        this.render(config);
+    }
+    generateConfig(config) {
+        return {
+            checked: false,
+            disabled: false,
+            ...config
+        };
+    }
+    render(config) {
+        const el = document.createElement('span');
+        el.classList.add('hy-radio');
+        const content = document.createElement('span');
+        content.classList.add('hy-radio__input');
+        const inner = document.createElement('span');
+        inner.classList.add('hy-radio__inner');
+        content.appendChild(inner);
+        if (config.label) {
+            const label = document.createElement('span');
+            label.classList.add('hy-radio__label');
+            content.appendChild(label);
+        }
+        el.appendChild(content);
+        el.addEventListener('click', (e) => {
+            config.onClick && config.onClick(e);
+            e.stopPropagation();
+        });
+        this.el = el;
+        this.setStatus(config);
+    }
+    setStatus(config) {
+        if (!this.el)
+            return;
+        const classList = this.el.classList;
+        if (isBoolean(config.disabled)) {
+            classList[config.disabled ? 'add' : 'remove']('is-disabled');
+            this.disabled = config.disabled;
+        }
+        if (isBoolean(config.checked)) {
+            classList[config.checked ? 'add' : 'remove']('is-checked');
+            this.checked = config.checked;
+        }
+    }
+    mount(el) {
+        if (!this.el)
+            return;
+        el.appendChild(this.el);
+    }
+}
+
+function useCheck(props, tree) {
+    const checkedKeys = new Set();
+    let indeterminateKeys = new Set();
+    const updateCheckedKeys = () => {
+        const { showSelect, checkStrictly } = props.rowSelection;
+        if (!tree || !showSelect || checkStrictly) {
+            return;
+        }
+        const { levelTreeNodeMap, maxLevel } = tree;
+        const checkedKeySet = checkedKeys;
+        const indeterminateKeySet = new Set();
+        for (let level = maxLevel - 1; level >= 1; --level) {
+            const nodes = levelTreeNodeMap.get(level);
+            if (!nodes)
+                continue;
+            nodes.forEach((node) => {
+                const children = node.children;
+                if (children) {
+                    let allChecked = true;
+                    let hasChecked = false;
+                    for (const childNode of children) {
+                        const key = childNode.key;
+                        if (checkedKeySet.has(key)) {
+                            hasChecked = true;
+                        }
+                        else if (indeterminateKeySet.has(key)) {
+                            allChecked = false;
+                            hasChecked = true;
+                            break;
+                        }
+                        else {
+                            allChecked = false;
+                        }
+                    }
+                    if (allChecked) {
+                        checkedKeySet.add(node.key);
+                    }
+                    else if (hasChecked) {
+                        indeterminateKeySet.add(node.key);
+                        checkedKeySet.delete(node.key);
+                    }
+                    else {
+                        checkedKeySet.delete(node.key);
+                        indeterminateKeySet.delete(node.key);
+                    }
+                }
+            });
+        }
+        indeterminateKeys = indeterminateKeySet;
+    };
+    const isChecked = (node) => checkedKeys.has(node.key);
+    const isIndeterminate = (node) => indeterminateKeys.has(node.key);
+    const toggleCheckbox = (node, isChecked, nodeClick = true, immediateUpdate = true) => {
+        const { type } = props.rowSelection;
+        const checkedKeySet = checkedKeys;
+        // 单选
+        if (type === 'radio') {
+            if (checkedKeySet.has(node.key))
+                return;
+            checkedKeySet.clear();
+            checkedKeySet.add(node.key);
+            return;
+        }
+        // 多选
+        const toggle = (node, checked) => {
+            checkedKeySet[checked ? 'add' : 'delete'](node.key);
+            const children = node.children;
+            if (!props.rowSelection.checkStrictly && children) {
+                children.forEach((childNode) => {
+                    if (!childNode.disabled) {
+                        toggle(childNode, checked);
+                    }
+                });
+            }
+        };
+        toggle(node, isChecked);
+        if (immediateUpdate) {
+            updateCheckedKeys();
+        }
+        if (nodeClick) {
+            afterNodeCheck(node, isChecked);
+        }
+    };
+    const afterNodeCheck = (node, checked) => {
+        const { checkedNodes, checkedKeys } = getChecked();
+        const { halfCheckedNodes, halfCheckedKeys } = getHalfChecked();
+        const { onCheckChange } = props.rowSelection;
+        // emit(NODE_CHECK, node.data, {
+        //   checkedKeys,
+        //   checkedNodes,
+        //   halfCheckedKeys,
+        //   halfCheckedNodes,
+        // })
+        // emit(NODE_CHECK_CHANGE, node.data, checked)
+        onCheckChange &&
+            onCheckChange(node.data, {
+                checkedKeys,
+                checkedNodes,
+                halfCheckedKeys,
+                halfCheckedNodes
+            }, checked);
+    };
+    // expose
+    function getCheckedKeys(leafOnly = false) {
+        return getChecked(leafOnly).checkedKeys;
+    }
+    function getCheckedNodes(leafOnly = false) {
+        return getChecked(leafOnly).checkedNodes;
+    }
+    function getHalfCheckedKeys() {
+        return getHalfChecked().halfCheckedKeys;
+    }
+    function getHalfCheckedNodes() {
+        return getHalfChecked().halfCheckedNodes;
+    }
+    function getChecked(leafOnly = false) {
+        const checkedNodes = [];
+        const keys = [];
+        if (tree && props.rowSelection.showSelect) {
+            const { treeNodeMap } = tree;
+            checkedKeys.forEach((key) => {
+                const node = treeNodeMap.get(key);
+                if (node && (!leafOnly || (leafOnly && node.isLeaf))) {
+                    keys.push(key);
+                    checkedNodes.push(node.data);
+                }
+            });
+        }
+        return {
+            checkedKeys: keys,
+            checkedNodes
+        };
+    }
+    function getHalfChecked() {
+        const halfCheckedNodes = [];
+        const halfCheckedKeys = [];
+        if (tree && props.rowSelection.showSelect) {
+            const { treeNodeMap } = tree;
+            indeterminateKeys.forEach((key) => {
+                const node = treeNodeMap.get(key);
+                if (node) {
+                    halfCheckedKeys.push(key);
+                    halfCheckedNodes.push(node.data);
+                }
+            });
+        }
+        return {
+            halfCheckedNodes,
+            halfCheckedKeys
+        };
+    }
+    function setCheckedKeys(keys) {
+        const { type } = props.rowSelection;
+        checkedKeys.clear();
+        indeterminateKeys.clear();
+        if (type === 'radio' && keys.length > 1) {
+            keys = [keys[0]];
+        }
+        _setCheckedKeys(keys);
+    }
+    function setChecked(key, isChecked) {
+        if (tree && props.rowSelection.showSelect) {
+            const node = tree.treeNodeMap.get(key);
+            if (node) {
+                toggleCheckbox(node, isChecked, false);
+            }
+        }
+    }
+    function _setCheckedKeys(keys) {
+        if (tree) {
+            const { treeNodeMap } = tree;
+            if (props.rowSelection.showSelect && treeNodeMap && keys?.length > 0) {
+                for (const key of keys) {
+                    const node = treeNodeMap.get(key);
+                    if (node && !isChecked(node)) {
+                        toggleCheckbox(node, true, false, false);
+                    }
+                }
+                updateCheckedKeys();
+            }
+        }
+    }
+    return {
+        checkedKeys,
+        updateCheckedKeys,
+        toggleCheckbox,
+        isChecked,
+        isIndeterminate,
+        // expose
+        getCheckedKeys,
+        getCheckedNodes,
+        getHalfCheckedKeys,
+        getHalfCheckedNodes,
+        setChecked,
+        setCheckedKeys
+    };
+}
+
+function useFilter(filterMethod, tree) {
+    const hiddenNodeKeySet = new Set([]);
+    const hiddenExpandIconKeySet = new Set([]);
+    function doFilter(params) {
+        if (!isFunction(filterMethod)) {
+            return;
+        }
+        const expandKeySet = new Set();
+        const hiddenExpandIconKeys = hiddenExpandIconKeySet;
+        const hiddenKeys = hiddenNodeKeySet;
+        const family = [];
+        const nodes = tree?.treeNodes || [];
+        const filter = filterMethod;
+        hiddenKeys.clear();
+        function traverse(nodes) {
+            nodes.forEach((node) => {
+                family.push(node);
+                if (filter?.(params, node.data, node)) {
+                    family.forEach((member) => {
+                        expandKeySet.add(member.key);
+                    });
+                }
+                else if (node.isLeaf) {
+                    hiddenKeys.add(node.key);
+                }
+                const children = node.children;
+                if (children) {
+                    traverse(children);
+                }
+                if (!node.isLeaf) {
+                    if (!expandKeySet.has(node.key)) {
+                        hiddenKeys.add(node.key);
+                    }
+                    else if (children) {
+                        // If all child nodes are hidden, then the expand icon will be hidden
+                        let allHidden = true;
+                        for (const childNode of children) {
+                            if (!hiddenKeys.has(childNode.key)) {
+                                allHidden = false;
+                                break;
+                            }
+                        }
+                        if (allHidden) {
+                            hiddenExpandIconKeys.add(node.key);
+                        }
+                        else {
+                            hiddenExpandIconKeys.delete(node.key);
+                        }
+                    }
+                }
+                family.pop();
+            });
+        }
+        traverse(nodes);
+        return expandKeySet;
+    }
+    function isForceHiddenExpandIcon(node) {
+        return hiddenExpandIconKeySet.has(node.key);
+    }
+    return {
+        hiddenExpandIconKeySet,
+        hiddenNodeKeySet,
+        doFilter,
+        isForceHiddenExpandIcon
+    };
+}
+
+function isShowCount(show, node) {
+    if (isBoolean(show))
+        return show;
+    if (isFunction(show))
+        return show(node.data, node);
+    return false;
+}
+class VirtualTree {
+    _virtualScroll;
+    _el = null;
+    _props = {
+        value: 'value',
+        label: 'string',
+        children: 'children',
+        disabled: 'disabled',
+        class: '',
+        showCount: false,
+        total: 'total',
+        count: 'count'
+    };
+    _tree;
+    _expandedKeySet = new Set(); // 展开的key
+    _hiddenNodeKeySet = new Set(); // 隐藏的key
+    _flattenTree = []; // 平铺树列表
+    _filterMethod;
+    _isForceHiddenExpandIcon;
+    _onNodeExpand;
+    _onNodeCollapse;
+    getCheckedKeys;
+    getCheckedNodes;
+    setChecked;
+    setCheckedKeys;
+    setRowSelection;
+    constructor(config) {
+        config = this.generateConfig(config);
+        this._el = this.getContainer(config.container);
+        if (!this._el) {
+            throw Error('【container参数错误】：请传入id或者class或者元素节点');
+        }
+        this._el.classList.add('hy-tree');
+        this._filterMethod = config.filterMethod;
+        this._onNodeExpand = config.onNodeExpand;
+        this._onNodeCollapse = config.onNodeCollapse;
+        this.render(config);
+    }
+    /** 生成config */
+    generateConfig(config) {
+        const props = Object.assign({
+            value: 'value',
+            label: 'string',
+            children: 'children',
+            disabled: 'disabled',
+            class: '',
+            showCount: false,
+            total: 'total',
+            count: 'count'
+        }, config.props);
+        const rowSelection = Object.assign({
+            type: 'checkbox',
+            checkStrictly: false,
+            showSelect: false
+        }, config.rowSelection);
+        config = {
+            itemHeight: 30,
+            bufferSize: 10,
+            expandOnClickNode: true,
+            checkOnClickNode: false,
+            indent: 16,
+            ...config,
+            props,
+            rowSelection
+        };
+        this._props = props;
+        return config;
+    }
+    /** 获取容器 */
+    getContainer(container) {
+        if (isString(container)) {
+            return document.querySelector(container);
+        }
+        if (isElement(container)) {
+            return container;
+        }
+        return null;
+    }
+    /** 创建树数据 */
+    createTree(data) {
+        const treeNodeMap = new Map();
+        const levelTreeNodeMap = new Map();
+        let maxLevel = 1;
+        const { countFilter, totalFilter } = this._props;
+        const isCountFiler = countFilter && isFunction(countFilter);
+        const isTotalFiler = totalFilter && isFunction(totalFilter);
+        const traverse = (nodes, level = 1, parent = undefined) => {
+            const siblings = [];
+            let count = 0;
+            let total = 0;
+            for (const rawNode of nodes) {
+                const value = this.getKey(rawNode);
+                const node = {
+                    level,
+                    key: value,
+                    data: rawNode
+                };
+                node.label = this.getLabel(rawNode);
+                node.parent = parent;
+                const children = this.getChildren(rawNode);
+                node.disabled = this.getDisabled(rawNode);
+                node.isLeaf = !children || children.length === 0;
+                node.expanded = this._expandedKeySet.has(value);
+                if (children && children.length) {
+                    const { list, count: childCount, total: childTotal } = traverse(children, level + 1, node);
+                    node.children = list;
+                    node.count = isCountFiler ? childCount : this.getCount(rawNode);
+                    node.total = isTotalFiler ? childTotal : this.getTotal(rawNode);
+                    count += childCount;
+                    total += childTotal;
+                }
+                else {
+                    node.count = 0;
+                    node.total = 0;
+                    // 统计
+                    if (isCountFiler) {
+                        count += countFilter(rawNode) ? 1 : 0;
+                    }
+                    if (isTotalFiler) {
+                        total += totalFilter(rawNode) ? 1 : 0;
+                    }
+                }
+                siblings.push(node);
+                treeNodeMap.set(value, node);
+                if (!levelTreeNodeMap.has(level)) {
+                    levelTreeNodeMap.set(level, []);
+                }
+                levelTreeNodeMap.get(level)?.push(node);
+            }
+            if (level > maxLevel) {
+                maxLevel = level;
+            }
+            return { list: siblings, count, total };
+        };
+        const { list } = traverse(data || []);
+        const treeNodes = list;
+        return {
+            treeNodeMap,
+            levelTreeNodeMap,
+            maxLevel,
+            treeNodes
+        };
+    }
+    /** 生成平铺树列表 */
+    genereateFlattenTree() {
+        const expandedKeys = this._expandedKeySet;
+        const hiddenKeys = this._hiddenNodeKeySet;
+        const flattenNodes = [];
+        const nodes = this._tree?.treeNodes || [];
+        const stack = [];
+        for (let i = nodes.length - 1; i >= 0; --i) {
+            stack.push(nodes[i]);
+        }
+        while (stack.length) {
+            const node = stack.pop();
+            if (hiddenKeys.has(node.key))
+                continue;
+            flattenNodes.push(node);
+            if (node.children && expandedKeys.has(node.key)) {
+                for (let i = node.children.length - 1; i >= 0; --i) {
+                    stack.push(node.children[i]);
+                }
+            }
+        }
+        return flattenNodes;
+    }
+    /** 获取key值 */
+    getKey(node) {
+        if (!node)
+            return '';
+        return node[this._props.value];
+    }
+    /** 获取label值 */
+    getLabel(node) {
+        if (!node)
+            return '';
+        return node[this._props.label];
+    }
+    /** 获取children值 */
+    getChildren(node) {
+        if (!node)
+            return '';
+        return node[this._props.children];
+    }
+    /** 获取disabled值 */
+    getDisabled(node) {
+        if (!node)
+            return '';
+        return node[this._props.disabled];
+    }
+    /** 获取count值 */
+    getCount(node) {
+        if (!node)
+            return;
+        return node[this._props.count];
+    }
+    /** 获取total值 */
+    getTotal(node) {
+        if (!node)
+            return;
+        return node[this._props.total];
+    }
+    /** 重排虚拟滚动列表，并刷新页面 */
+    refreshVirtualScroll() {
+        this._flattenTree = this.genereateFlattenTree();
+        this.refreshRender();
+    }
+    /** 重新渲染，isReal是否实时渲染 */
+    refreshRender = (() => {
+        let timer;
+        let timeout = 0;
+        return (isReal = true) => {
+            timer && clearTimeout(timer);
+            if (isReal || timeout >= 600) {
+                this.refresh();
+                timeout = 0;
+                return;
+            }
+            timeout += 200;
+            timer = setTimeout(() => {
+                this.refresh();
+            }, 200);
+        };
+    })();
+    /** 节点展开/收起处理 */
+    expandedHandle(node) {
+        const key = node.key;
+        if (this._expandedKeySet.has(key)) {
+            this._expandedKeySet.delete(key);
+            node.expanded = false;
+            this._onNodeCollapse && this._onNodeCollapse(node.data, node);
+        }
+        else {
+            this._expandedKeySet.add(key);
+            node.expanded = true;
+            this._onNodeExpand && this._onNodeExpand(node.data, node);
+        }
+    }
+    /** 渲染 */
+    render(config) {
+        if (this._virtualScroll)
+            return;
+        this._tree = this.createTree(config.data);
+        this._flattenTree = this.genereateFlattenTree();
+        const { checkedKeys, isIndeterminate, isChecked, toggleCheckbox, getCheckedKeys, getCheckedNodes, 
+        // getHalfCheckedKeys,
+        // getHalfCheckedNodes,
+        setChecked, setCheckedKeys } = useCheck(config, this._tree);
+        this.getCheckedKeys = getCheckedKeys;
+        this.getCheckedNodes = getCheckedNodes;
+        this.setChecked = setChecked;
+        this.setCheckedKeys = (keys) => {
+            setCheckedKeys(keys);
+            this.refreshRender();
+        };
+        this.setRowSelection = (rowSelection) => {
+            if (!rowSelection)
+                return;
+            Object.assign(config.rowSelection, rowSelection);
+            if (checkedKeys.size) {
+                setCheckedKeys([]);
+            }
+            this.refreshRender();
+        };
+        const useRenderItems = (config) => {
+            const { renderIcon, renderItem, renderStatus, onNodeClick, onNodeContextmenu } = config;
+            /** 生成图标 */
+            const generateExpandIcon = (item) => {
+                const el = document.createElement('div');
+                el.classList.add('hy-expand');
+                if (this._expandedKeySet.has(item.key)) {
+                    el.classList.add('expanded');
+                }
+                const icon = document.createElement('div');
+                icon.classList.add('hy-expand-icon');
+                el.appendChild(icon);
+                if (item.isLeaf) {
+                    el.style.setProperty('visibility', 'hidden');
+                }
+                else {
+                    el.addEventListener('click', (e) => {
+                        this.expandedHandle(item);
+                        this.refreshVirtualScroll();
+                        e.stopPropagation();
+                    });
+                }
+                return el;
+            };
+            /** 生成内容 */
+            const generateContent = (item) => {
+                if (renderItem)
+                    return renderItem(item.data, item);
+                const el = document.createElement('div');
+                el.classList.add('hy-tree-content');
+                if (item.label) {
+                    el.innerHTML = item.label;
+                }
+                // 生成统计
+                if (isShowCount(this._props.showCount, item)) {
+                    const count = document.createElement('span');
+                    count.classList.add('hy-tree-statistics');
+                    count.innerHTML = `(<span>${item.count || 0}</span>/${item.total || 0})`;
+                    el.appendChild(count);
+                }
+                return el;
+            };
+            /** 设置节点class */
+            const setNodeClass = (el, item) => {
+                let className = ['hy-tree-node'];
+                if (isString(this._props.class)) {
+                    className.push(...this._props.class.split(' '));
+                }
+                else if (isFunction(this._props.class)) {
+                    const value = this._props.class(item.data, item);
+                    if (isString(value)) {
+                        className.push(...value.split(' '));
+                    }
+                }
+                className = className.filter(Boolean);
+                el.classList.add(...className);
+            };
+            /** 渲染项 */
+            const generateItem = (item) => {
+                // console.log('item', item)
+                const { type, showSelect } = config.rowSelection;
+                const el = document.createElement('div');
+                setNodeClass(el, item);
+                const content = document.createElement('div');
+                content.classList.add('hy-tree-node__content');
+                content.style.setProperty('padding-left', `${(item.level - 1) * (config.indent || 0)}px`);
+                content.appendChild(generateExpandIcon(item));
+                // 多选框/单选框
+                if (isBoolean(showSelect)
+                    ? showSelect
+                    : isFunction(showSelect) && showSelect(item.data, item)) {
+                    if (type === 'checkbox') {
+                        const checkbox = new Checkbox({
+                            checked: isChecked(item),
+                            disabled: item.disabled,
+                            indeterminate: isIndeterminate(item),
+                            onClick: () => {
+                                toggleCheckbox(item, !isChecked(item), true, true);
+                                this.refresh();
+                            }
+                        });
+                        checkbox.mount(content);
+                    }
+                    else if (type === 'radio') {
+                        const radio = new Radio({
+                            checked: isChecked(item),
+                            disabled: item.disabled,
+                            onClick: () => {
+                                toggleCheckbox(item, true, true, false);
+                                this.refresh();
+                            }
+                        });
+                        radio.mount(content);
+                    }
+                }
+                // 图标
+                if (renderIcon) {
+                    const icon = renderIcon(item.data, item);
+                    if (isElement(icon)) {
+                        const iconContainer = document.createElement('div');
+                        iconContainer.classList.add('hy-tree-icon');
+                        iconContainer.appendChild(icon);
+                        content.appendChild(iconContainer);
+                    }
+                }
+                // 内容
+                content.appendChild(generateContent(item));
+                // 状态
+                if (renderStatus) {
+                    const status = renderStatus(item.data, item);
+                    isElement(status) && content.appendChild(status);
+                }
+                el.appendChild(content);
+                // 鼠标左键点击事件
+                el.addEventListener('click', (e) => {
+                    if (config.checkOnClickNode) {
+                        toggleCheckbox(item, !isChecked(item), true, true);
+                        if (!config.expandOnClickNode) {
+                            this.refresh();
+                        }
+                    }
+                    if (config.expandOnClickNode) {
+                        this.expandedHandle(item);
+                        this.refreshVirtualScroll();
+                    }
+                    onNodeClick && onNodeClick(item.data, item, e);
+                });
+                // 鼠标右键点击事件
+                el.addEventListener('contextmenu', (e) => {
+                    if (onNodeContextmenu) {
+                        onNodeContextmenu(item.data, item, e);
+                        e.preventDefault();
+                    }
+                });
+                return el;
+            };
+            return { renderItem: generateItem };
+        };
+        const { renderItem } = useRenderItems(config);
+        this._virtualScroll = new VirtualScroll({
+            container: this._el,
+            items: this._flattenTree,
+            itemHeight: config.itemHeight || 30,
+            bufferSize: config.bufferSize || 10,
+            renderItem
+        });
+    }
+    /** 全量更新数据 */
+    setData = (data) => {
+        this._tree = this.createTree(data);
+        this.refreshVirtualScroll();
+    };
+    /** 局部更新数据，仅可更新已有的数据，无法做到添加删除 */
+    updateData = (() => {
+        let cacheTimer;
+        let cacheTime = 0;
+        const cacheData = new Map();
+        const updateParnetCount = (keySet) => {
+            if (!this._tree)
+                return;
+            const { countFilter, totalFilter } = this._props;
+            const isCountFiler = countFilter && isFunction(countFilter);
+            const isTotalFiler = totalFilter && isFunction(totalFilter);
+            const parentKeySet = new Set();
+            for (const key of keySet) {
+                const target = this._tree.treeNodeMap.get(key);
+                if (!target)
+                    continue;
+                let count = isCountFiler ? 0 : target.data.count;
+                let total = isTotalFiler ? 0 : target.data.total;
+                if (isCountFiler || isTotalFiler) {
+                    for (let i = 0; i < target.children.length; i++) {
+                        const item = target.children[i];
+                        count = isCountFiler
+                            ? count + (item.children ? item.count : countFilter(item.data))
+                            : count;
+                        total = isTotalFiler
+                            ? total + (item.children ? item.total : totalFilter(item.data))
+                            : total;
+                    }
+                }
+                target.count = count;
+                target.total = total;
+                target.parent && parentKeySet.add(target.parent.key);
+            }
+            parentKeySet.size && updateParnetCount(parentKeySet);
+        };
+        return (data) => {
+            if (!this._tree)
+                return;
+            cacheTimer && clearTimeout(cacheTimer);
+            data.forEach((item) => cacheData.set(this.getKey(item), item));
+            // 150毫秒仅更新一次数据
+            if (Date.now() - cacheTime >= 150) {
+                cacheTime = Date.now();
+                const { treeNodeMap } = this.createTree(Array.from(cacheData.values()));
+                cacheData.clear();
+                const parentKeySet = new Set();
+                for (const [key, value] of treeNodeMap) {
+                    const target = this._tree.treeNodeMap.get(key);
+                    if (!target)
+                        continue;
+                    this._tree.treeNodeMap.set(key, Object.assign(target, {
+                        data: value.data,
+                        disabled: value.disabled,
+                        label: value.label
+                    }));
+                    target.parent && parentKeySet.add(target.parent.key);
+                }
+                updateParnetCount(parentKeySet);
+                this.refreshRender(false);
+            }
+            // 若仅更新一次，150毫秒后也会强制更新数据
+            else {
+                cacheTimer = setTimeout(() => {
+                    this.updateData([]);
+                }, 150);
+            }
+        };
+    })();
+    /** 获取指定节点 */
+    getNode = (data) => {
+        const key = isObject(data)
+            ? this.getKey(data)
+            : data;
+        return this._tree?.treeNodeMap.get(key);
+    };
+    /** 滚动到指定位置 */
+    scrollToIndex = (index) => {
+        if (!isNumber(index))
+            return;
+        this._virtualScroll && this._virtualScroll.scrollToIndex(index);
+    };
+    /** 滚动到指定key的位置 */
+    scrollToNode = (key) => {
+        if (!key || !this._flattenTree?.length)
+            return;
+        const node = this._tree?.treeNodeMap.get(key);
+        if (!node) {
+            console.warn(`找不到key为【${key}】的节点`);
+            return;
+        }
+        if (this._hiddenNodeKeySet.has(key)) {
+            console.warn(`key为【${key}】的节点已隐藏`);
+            return;
+        }
+        if (!this._expandedKeySet.has(key) && node.parent) {
+            let parent = node.parent;
+            while (parent && !this._expandedKeySet.has(parent.key)) {
+                this._expandedKeySet.add(parent.key);
+                parent = parent.parent;
+            }
+        }
+        this.refreshVirtualScroll();
+        setTimeout(() => {
+            this.scrollToIndex(this._flattenTree.indexOf(node));
+        });
+    };
+    /** 过滤方法 */
+    filter = (params) => {
+        const { doFilter, hiddenNodeKeySet, isForceHiddenExpandIcon } = useFilter(this._filterMethod, this._tree);
+        const keys = doFilter(params);
+        console.log('keys', this._filterMethod);
+        if (keys) {
+            this._hiddenNodeKeySet = hiddenNodeKeySet;
+            this._isForceHiddenExpandIcon = isForceHiddenExpandIcon;
+            this.refreshVirtualScroll();
+        }
+    };
+    /** 刷新视图 */
+    refresh = () => {
+        this._virtualScroll && this._virtualScroll.updateItems(this._flattenTree);
+    };
+    /** 销毁组件 */
+    destroy = () => {
+        this._virtualScroll && this._virtualScroll.destroy();
+        this._virtualScroll = null;
+        this._el = null;
+        this._tree = undefined;
+        this._expandedKeySet = new Set();
+        this._hiddenNodeKeySet = new Set();
+        this._flattenTree = [];
+    };
+}
+
+export { VirtualTree, isArray, isBoolean, isElement, isFunction, isNumber, isObject, isString };