balala-revogrid 1.0.0

package/dist/collection/components/header/revogr-header-unified.js

@@ -0,0 +1,1013 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h, Host, } from "@stencil/core";
+import keyBy from "lodash/keyBy";
+import { getItemByIndex } from "../../store/index";
+import { HEADER_ACTUAL_ROW_CLASS, HEADER_ROW_CLASS } from "../../utils/consts";
+import HeaderRenderer from "./header-renderer";
+import GroupHeaderRenderer from "./header-group-renderer";
+/**
+ * 统一的表头组件
+ * 渲染所有三个区域（colPinStart, rgCol, colPinEnd）的表头
+ * 这样可以确保所有区域在同一个渲染周期内更新，避免异步渲染问题
+ */
+export class RevogrHeaderUnifiedComponent {
+    constructor() {
+        /**
+         * 强制刷新计数器，用于触发重新渲染
+         */
+        this.refreshCounter = 0;
+        this.rafScrollSyncId = null;
+        this.pendingScrollLeft = null;
+        this.lastAppliedScrollLeft = null;
+        this.scrollEndTimer = null;
+        this.mainViewportEl = null;
+        this.mainViewportResizeObserver = null;
+        this.rgColHeaderAreaEl = null;
+        this.rgColHeaderRows = [];
+        this.headerRowsNeedRefresh = true;
+        this.hasCachedBaseHeaderRowHeight = false;
+        this.cachedBaseHeaderRowHeight = null;
+        this.windowResizeHandler = null;
+        // 缓存扩展后的viewport items，用于在调整大小期间保持DOM稳定
+        this.cachedExpandedItems = new Map();
+        // 标记是否正在调整大小（不使用@State，避免触发重新渲染）
+        this.isResizingFlag = false;
+        // 缓存调整大小期间的areas，避免使用新的areas导致跳动
+        this.cachedAreas = null;
+        this.lastStableAreas = null;
+        // 定时器延迟时间（毫秒）
+        this.RESIZE_DEBOUNCE_TIME = 300;
+    }
+    setHeaderResizingState(active) {
+        const grid = this.gridElement || this.element.closest('revo-grid');
+        if (!grid) {
+            return;
+        }
+        const isActive = grid.hasAttribute('data-header-resizing');
+        if (active) {
+            if (!isActive) {
+                grid.setAttribute('data-header-resizing', '1');
+            }
+            return;
+        }
+        if (isActive) {
+            grid.removeAttribute('data-header-resizing');
+            grid.dispatchEvent(new CustomEvent('headerresizeend', {
+                bubbles: true,
+            }));
+        }
+    }
+    componentDidLoad() {
+        this.windowResizeHandler = () => {
+            this.hasCachedBaseHeaderRowHeight = false;
+            this.cachedBaseHeaderRowHeight = null;
+            this.scheduleHeaderScroll();
+        };
+        window.addEventListener('resize', this.windowResizeHandler, { passive: true });
+        // 延迟设置滚动同步，确保 viewport 元素已经渲染
+        setTimeout(() => {
+            this.setupScrollSync();
+        }, 100);
+    }
+    componentWillRender() {
+        var _a;
+        const grid = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('revo-grid');
+        if (!grid || !grid.hasAttribute('data-columns-updating')) {
+            return;
+        }
+        // console.log('[header] wait columns update', {
+        //   time: performance.now(),
+        // });
+        return new Promise(resolve => {
+            grid.addEventListener('columnsupdateend', () => {
+                // console.log('[header] columns update end', {
+                //   time: performance.now(),
+                // });
+                resolve();
+            }, { once: true });
+        });
+    }
+    /**
+     * 公开方法：开始调整大小（用于自动列宽）
+     */
+    async startResizingForAutoSize(type) {
+        if (type === 'rgCol') {
+            const area = this.areas.find(area => area.type === type);
+            if (area) {
+                this.startResizing(area);
+            }
+        }
+    }
+    /**
+     * 公开方法：结束调整大小（用于自动列宽）
+     */
+    async endResizingForAutoSize() {
+        this.resetResizeTimer();
+    }
+    /**
+     * 公开方法：强制刷新表头（用于跨区域列宽同步）
+     * 当一个区域的列宽变化影响到另一个区域时调用
+     */
+    async forceRefresh() {
+        // 通过修改 @State 变量触发组件重新渲染
+        this.refreshCounter++;
+    }
+    disconnectedCallback() {
+        // 清理滚动监听器
+        if (this.gridElement && this.gridScrollHandler) {
+            this.gridElement.removeEventListener('viewportscroll', this.gridScrollHandler);
+        }
+        if (this.gridElement && this.enhancedScrollHandler) {
+            this.gridElement.removeEventListener('enhancedscrollsync', this.enhancedScrollHandler);
+        }
+        if (this.scrollHandler) {
+            const viewports = document.querySelectorAll('revogr-viewport-scroll.rgCol');
+            viewports.forEach(viewport => {
+                viewport.removeEventListener('scroll', this.scrollHandler);
+            });
+        }
+        if (this.rafScrollSyncId !== null) {
+            cancelAnimationFrame(this.rafScrollSyncId);
+            this.rafScrollSyncId = null;
+        }
+        if (this.scrollEndTimer !== null) {
+            clearTimeout(this.scrollEndTimer);
+            this.scrollEndTimer = null;
+        }
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = undefined;
+        }
+        if (this.windowResizeHandler) {
+            window.removeEventListener('resize', this.windowResizeHandler);
+            this.windowResizeHandler = null;
+        }
+        if (this.mainViewportResizeObserver) {
+            this.mainViewportResizeObserver.disconnect();
+            this.mainViewportResizeObserver = null;
+        }
+        this.setHeaderResizingState(false);
+    }
+    /**
+     * 设置滚动同步
+     */
+    setupScrollSync() {
+        var _a;
+        if (!this.gridElement) {
+            this.gridElement =
+                this.element.closest('revo-grid') || undefined;
+        }
+        if (this.gridElement && !this.gridScrollHandler) {
+            this.gridScrollHandler = (e) => {
+                const detail = e.detail;
+                if (!detail || detail.dimension !== 'rgCol')
+                    return;
+                this.scheduleHeaderScroll();
+                this.scheduleScrollEndSync();
+            };
+            this.gridElement.addEventListener('viewportscroll', this.gridScrollHandler);
+        }
+        if (this.gridElement && !this.enhancedScrollHandler) {
+            this.enhancedScrollHandler = (e) => {
+                const detail = e.detail;
+                if (!detail)
+                    return;
+                this.scheduleHeaderScroll(detail.scrollLeft);
+                this.scheduleScrollEndSync();
+            };
+            this.gridElement.addEventListener('enhancedscrollsync', this.enhancedScrollHandler);
+        }
+        // 回退方案：直接监听 viewport 的 scroll 事件
+        this.scrollHandler = this.onViewportScroll.bind(this);
+        const viewports = document.querySelectorAll('revogr-viewport-scroll.rgCol');
+        this.mainViewportEl = (_a = this.gridElement) === null || _a === void 0 ? void 0 : _a.querySelector('revogr-viewport-scroll.rgCol:not(.grouping-overlay-viewport)');
+        if (this.mainViewportResizeObserver) {
+            this.mainViewportResizeObserver.disconnect();
+            this.mainViewportResizeObserver = null;
+        }
+        if (this.mainViewportEl) {
+            this.mainViewportResizeObserver = new ResizeObserver(() => {
+                this.syncHeaderTransformNow();
+            });
+            this.mainViewportResizeObserver.observe(this.mainViewportEl);
+        }
+        if (viewports.length === 0) {
+            // 如果还没找到，再延迟一次
+            setTimeout(() => this.setupScrollSync(), 200);
+            return;
+        }
+        viewports.forEach(viewport => {
+            viewport.addEventListener('scroll', this.scrollHandler);
+        });
+        // 初始化时同步一次，避免首次渲染有偏移
+        this.scheduleHeaderScroll();
+    }
+    /**
+     * Sync header translate with current rgCol scrollLeft immediately.
+     * Used during live resize to avoid one-frame lag between width update and transform update.
+     */
+    syncHeaderTransformNow() {
+        const scrollLeft = this.getMainViewportScrollLeft();
+        if (scrollLeft === null) {
+            return;
+        }
+        this.applyHeaderScroll(scrollLeft);
+        requestAnimationFrame(() => {
+            const latest = this.getMainViewportScrollLeft();
+            if (latest !== null) {
+                this.applyHeaderScroll(latest);
+            }
+        });
+    }
+    /**
+     * 处理 viewport 滚动事件
+     */
+    onViewportScroll(e) {
+        const viewport = e.target;
+        this.scheduleHeaderScroll(viewport.scrollLeft);
+        this.scheduleScrollEndSync();
+    }
+    scheduleHeaderScroll(scrollLeft) {
+        if (typeof scrollLeft === 'number') {
+            this.pendingScrollLeft = scrollLeft;
+            // 立即同步，减少快速滚动时的可见延迟
+            this.applyHeaderScroll(scrollLeft);
+            return;
+        }
+        if (this.rafScrollSyncId !== null) {
+            return;
+        }
+        this.rafScrollSyncId = requestAnimationFrame(() => {
+            var _a;
+            this.rafScrollSyncId = null;
+            let nextScrollLeft = (_a = this.pendingScrollLeft) !== null && _a !== void 0 ? _a : this.getMainViewportScrollLeft();
+            if (nextScrollLeft === null) {
+                nextScrollLeft = this.lastAppliedScrollLeft;
+            }
+            this.pendingScrollLeft = null;
+            if (nextScrollLeft === null) {
+                return;
+            }
+            this.applyHeaderScroll(nextScrollLeft);
+        });
+    }
+    scheduleScrollEndSync() {
+        if (this.scrollEndTimer !== null) {
+            clearTimeout(this.scrollEndTimer);
+        }
+        this.scrollEndTimer = window.setTimeout(() => {
+            this.scrollEndTimer = null;
+            // 滚动结束后再读取一次真实 scrollLeft，确保归位
+            this.scheduleHeaderScroll();
+        }, 80);
+    }
+    getMainViewportScrollLeft() {
+        var _a, _b;
+        if ((_a = this.mainViewportEl) === null || _a === void 0 ? void 0 : _a.isConnected) {
+            return this.mainViewportEl.scrollLeft;
+        }
+        const grid = this.gridElement || this.element.closest('revo-grid');
+        this.mainViewportEl = (_b = grid === null || grid === void 0 ? void 0 : grid.querySelector('revogr-viewport-scroll.rgCol:not(.grouping-overlay-viewport)')) !== null && _b !== void 0 ? _b : null;
+        return this.mainViewportEl ? this.mainViewportEl.scrollLeft : null;
+    }
+    ensureHeaderDomRefs() {
+        var _a;
+        if (!this.headerRowsNeedRefresh &&
+            ((_a = this.rgColHeaderAreaEl) === null || _a === void 0 ? void 0 : _a.isConnected) &&
+            this.rgColHeaderRows.length) {
+            return false;
+        }
+        this.rgColHeaderAreaEl = this.element.querySelector('.header-area-rgCol');
+        this.rgColHeaderRows = this.rgColHeaderAreaEl
+            ? Array.from(this.rgColHeaderAreaEl.querySelectorAll('.group-rgRow, .actual-rgRow'))
+            : [];
+        this.headerRowsNeedRefresh = false;
+        return true;
+    }
+    applyHeaderScroll(scrollLeft) {
+        const didRefreshRows = this.ensureHeaderDomRefs();
+        if (!this.rgColHeaderAreaEl || this.rgColHeaderRows.length === 0) {
+            return;
+        }
+        if (!didRefreshRows && this.lastAppliedScrollLeft === scrollLeft) {
+            return;
+        }
+        // 使用 transform 来移动表头内容
+        const transform = `translateX(${-scrollLeft}px)`;
+        this.rgColHeaderRows.forEach(row => {
+            if (row.style.transform !== transform) {
+                row.style.transform = transform;
+            }
+        });
+        this.lastAppliedScrollLeft = scrollLeft;
+    }
+    componentDidRender() {
+        var _a;
+        this.headerRowsNeedRefresh = true;
+        // 每次渲染后同步一次滚动位置，避免滚动后渲染导致的错位/消失
+        this.scheduleHeaderScroll();
+        // 触发每个区域的 afterHeaderRender 事件
+        (_a = this.areas) === null || _a === void 0 ? void 0 : _a.forEach(area => {
+            this.afterHeaderRender.emit({
+                type: area.type,
+                readonly: area.readonly,
+                data: area.colData,
+                viewport: area.viewportCol,
+                dimension: area.dimensionCol,
+                selection: area.selectionStore,
+            });
+        });
+    }
+    /**
+     * 处理表头区域的滚轮事件
+     */
+    onHeaderWheel(e) {
+        const viewportScroll = this.element.closest('revogr-viewport-scroll');
+        if (!viewportScroll) {
+            return;
+        }
+        const scrollWidth = viewportScroll.scrollWidth || 0;
+        const clientWidth = viewportScroll.clientWidth || 0;
+        const maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
+        const SCROLL_THRESHOLD = 10;
+        const absX = Math.abs(e.deltaX);
+        const absY = Math.abs(e.deltaY);
+        const isHorizontalScroll = (absX > absY && absX > 0) || (e.shiftKey && absY > 0);
+        if (isHorizontalScroll && maxScrollLeft <= SCROLL_THRESHOLD) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (isHorizontalScroll) {
+            e.stopPropagation();
+            const customEvent = new CustomEvent('mousewheel-horizontal', {
+                bubbles: true,
+                detail: {
+                    deltaX: e.deltaX,
+                    deltaY: e.deltaY,
+                    shiftKey: e.shiftKey,
+                    preventDefault: () => e.preventDefault(),
+                },
+            });
+            this.element.dispatchEvent(customEvent);
+        }
+    }
+    render() {
+        // 强制刷新：通过引用 refreshCounter 来触发重新渲染
+        // 即使不使用这个值，只要它变化了，Stencil 就会重新渲染
+        // @ts-ignore - 故意不使用这个变量，只是为了触发重新渲染
+        const _ = this.refreshCounter;
+        // 在调整大小期间使用缓存的areas，避免使用新的areas导致跳动
+        let areasToRender = this.isResizingFlag && this.cachedAreas ? this.cachedAreas : this.areas;
+        if (!areasToRender || areasToRender.length === 0) {
+            return h(Host, null);
+        }
+        const isSynced = areasToRender.every(area => {
+            var _a;
+            const viewportVersion = (_a = area.viewportCol) === null || _a === void 0 ? void 0 : _a.get('version');
+            const colVersion = area.colVersion;
+            if (viewportVersion === undefined || colVersion === undefined) {
+                return true;
+            }
+            return viewportVersion === colVersion;
+        });
+        if (!isSynced && this.lastStableAreas) {
+            areasToRender = this.lastStableAreas;
+        }
+        else if (isSynced && !this.isResizingFlag) {
+            this.lastStableAreas = areasToRender;
+        }
+        // 渲染所有区域的表头
+        const areaHeaders = areasToRender.map(area => this.renderArea(area));
+        return (h(Host, { onWheel: (e) => this.onHeaderWheel(e) }, areaHeaders));
+    }
+    /**
+     * 创建包含所有列的扩展viewport items
+     * 用于在调整大小期间防止虚拟滚动移除DOM
+     */
+    createExpandedItems(area) {
+        const allCols = area.colData;
+        const expandedCols = [];
+        let currentStart = 0;
+        for (let i = 0; i < allCols.length; i++) {
+            const col = allCols[i];
+            const size = (col === null || col === void 0 ? void 0 : col.size) || 100;
+            expandedCols.push({
+                itemIndex: i,
+                start: currentStart,
+                end: currentStart + size,
+                size: size,
+            });
+            currentStart += size;
+        }
+        this.cachedExpandedItems.set(area.type, expandedCols);
+    }
+    buildFullItems(area, sizes) {
+        var _a, _b, _c, _d, _e;
+        const total = area.colData.length;
+        const defaultSize = ((_b = (_a = area.dimensionCol) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.originItemSize) || 100;
+        const items = [];
+        let currentStart = 0;
+        for (let i = 0; i < total; i++) {
+            const size = (_e = (_c = sizes[i]) !== null && _c !== void 0 ? _c : (_d = area.colData[i]) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : defaultSize;
+            const end = currentStart + size;
+            items.push({
+                itemIndex: i,
+                start: currentStart,
+                end,
+                size,
+            });
+            currentStart = end;
+        }
+        return items;
+    }
+    /**
+     * 更新缓存中指定列的尺寸，并调整后续列的位置
+     */
+    updateCachedItemSize(type, index, newSize) {
+        const cached = this.cachedExpandedItems.get(type);
+        if (!cached)
+            return;
+        // 直接通过索引访问（假设itemIndex和数组索引一致）
+        const item = cached[index];
+        if (!item || item.itemIndex !== index) {
+            // 如果索引不匹配，回退到查找
+            const foundItem = cached.find(i => i.itemIndex === index);
+            if (!foundItem)
+                return;
+            const oldSize = foundItem.size;
+            const sizeDiff = newSize - oldSize;
+            foundItem.size = newSize;
+            foundItem.end = foundItem.start + newSize;
+            // 更新后续所有列的位置
+            for (const item of cached) {
+                if (item.itemIndex > index) {
+                    item.start += sizeDiff;
+                    item.end += sizeDiff;
+                }
+            }
+            return;
+        }
+        // 快速路径：直接通过索引更新
+        const oldSize = item.size;
+        const sizeDiff = newSize - oldSize;
+        item.size = newSize;
+        item.end = item.start + newSize;
+        // 更新后续所有列的位置
+        for (let i = index + 1; i < cached.length; i++) {
+            cached[i].start += sizeDiff;
+            cached[i].end += sizeDiff;
+        }
+    }
+    renderArea(area) {
+        var _a, _b, _c, _d, _e, _f;
+        // 直接从 Observable 读取最新数据，而不是使用 prop 中的缓存数据
+        // 这样即使 revo-grid 没有重新渲染，我们也能获取到最新的列宽度
+        const viewportItems = area.viewportCol.get('items');
+        const dimensionState = area.dimensionCol.state;
+        let cols = viewportItems;
+        // 无论是否在调整大小，都需要使用最新的 dimensionState.sizes 更新列宽度
+        // 因为 viewportItems 中的 size 可能是旧的
+        const sizes = (dimensionState === null || dimensionState === void 0 ? void 0 : dimensionState.sizes) || {};
+        const viewportStart = (_b = (_a = viewportItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
+        let currentStart = 0;
+        // 统一表头不依赖虚拟列列表，避免滚动时列缺失导致空白
+        // rgCol 类型始终使用完整列表，避免虚拟滚动导致的重新渲染
+        const useFullColumns = area.type === 'rgCol';
+        // 如果正在调整大小，使用缓存的扩展列（包含所有列）
+        if (this.isResizingFlag) {
+            const cached = this.cachedExpandedItems.get(area.type);
+            if (cached) {
+                currentStart = (_d = (_c = cached[0]) === null || _c === void 0 ? void 0 : _c.start) !== null && _d !== void 0 ? _d : 0;
+                // 使用最新尺寸重新计算位置
+                cols = cached.map(item => {
+                    var _a;
+                    const size = (_a = sizes[item.itemIndex]) !== null && _a !== void 0 ? _a : item.size;
+                    const result = Object.assign(Object.assign({}, item), { size, start: currentStart, end: currentStart + size });
+                    currentStart += size;
+                    return result;
+                });
+            }
+        }
+        else if (useFullColumns || viewportItems.length === 0) {
+            // rgCol 类型始终构建完整列表，避免虚拟滚动导致列重新渲染
+            cols = this.buildFullItems(area, sizes);
+            currentStart = (_f = (_e = cols[0]) === null || _e === void 0 ? void 0 : _e.start) !== null && _f !== void 0 ? _f : 0;
+        }
+        else {
+            // 不在调整大小时，也需要使用最新的 sizes 更新 viewportItems
+            currentStart = viewportStart;
+            cols = viewportItems.map(item => {
+                var _a;
+                const size = (_a = sizes[item.itemIndex]) !== null && _a !== void 0 ? _a : item.size;
+                const result = Object.assign(Object.assign({}, item), { size, start: currentStart, end: currentStart + size });
+                currentStart += size;
+                return result;
+            });
+        }
+        const range = area.selectionRange;
+        const groupedIndexes = this.getGroupedColumnIndexes(area);
+        const { groupedCells, ungroupedCells } = this.renderHeaderColumns(area, cols, range, groupedIndexes);
+        const groupRow = this.renderGroupingColumns(area, cols);
+        const multiRowHeight = this.getMultiHeaderRowHeight(area);
+        const rowStyle = multiRowHeight !== undefined
+            ? { height: `${multiRowHeight}px`, lineHeight: `${multiRowHeight}px` }
+            : undefined;
+        // 计算区域宽度
+        // 非冻结区域（rgCol）应该始终使用 realSize（所有列的总宽度）
+        // 冻结区域使用视口列的宽度
+        let areaWidth = 0;
+        if (area.type === 'rgCol') {
+            // 非冻结区域：使用 dimensionState.realSize（所有列的总宽度）
+            areaWidth = (dimensionState === null || dimensionState === void 0 ? void 0 : dimensionState.realSize) || 0;
+            if (!areaWidth && cols.length > 0) {
+                areaWidth = cols[cols.length - 1].end - cols[0].start;
+            }
+        }
+        else if (cols.length > 0) {
+            // 冻结区域：使用视口列的宽度
+            areaWidth = cols[cols.length - 1].end - cols[0].start;
+        }
+        const areaStyle = {
+            width: areaWidth > 0 ? `${areaWidth}px` : undefined,
+        };
+        // 统一使用分组结构：
+        // - 如果没有分组（groupingDepth === 0），所有列都放在 group-rgRow 中，actual-rgRow 为空
+        // - 如果有分组（groupingDepth > 0），未分组的列放在 group-rgRow 中，分组的子列放在 actual-rgRow 中
+        return (h("div", { class: `header-area header-area-${area.type}`, style: areaStyle, key: area.type }, h("div", { class: "group-rgRow", style: rowStyle }, groupRow, area.groupingDepth === 0 ? groupedCells : ungroupedCells), area.groupingDepth > 0 && (h("div", { class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}`, style: rowStyle }, groupedCells))));
+    }
+    getGroupedColumnIndexes(area) {
+        const groupedIndexes = new Set();
+        if (area.groupingDepth > 0 && area.groups) {
+            for (let i = 0; i < area.groupingDepth; i++) {
+                if (area.groups[i]) {
+                    for (const group of area.groups[i]) {
+                        for (const idx of group.indexes) {
+                            groupedIndexes.add(idx);
+                        }
+                    }
+                }
+            }
+        }
+        return groupedIndexes;
+    }
+    renderHeaderColumns(area, cols, range, groupedIndexes) {
+        const groupedCells = [];
+        const ungroupedCells = [];
+        const lastColIndex = cols.length > 0 ? cols[cols.length - 1].itemIndex : -1;
+        for (let i = 0; i < cols.length; i++) {
+            const rgCol = cols[i];
+            const colData = area.colData[rgCol.itemIndex];
+            const isGrouped = area.groupingDepth > 0 && groupedIndexes.has(rgCol.itemIndex);
+            const isLastColumn = rgCol.itemIndex === lastColIndex && ((area.hasColPinEnd && area.type === 'colPinEnd') ||
+                (!area.hasColPinEnd && area.hasRgCol && area.type === 'rgCol') ||
+                (!area.hasColPinEnd && !area.hasRgCol && area.type === 'colPinStart'));
+            const props = {
+                range,
+                column: rgCol,
+                data: Object.assign(Object.assign({}, colData), { index: rgCol.itemIndex, providers: {
+                        type: area.type,
+                        readonly: area.readonly,
+                        data: area.colData,
+                        viewport: area.viewportCol,
+                        dimension: area.dimensionCol,
+                        selection: area.selectionStore,
+                    } }),
+                canFilter: !!area.columnFilter,
+                canResize: (colData === null || colData === void 0 ? void 0 : colData.resizable) !== false && area.canResize,
+                active: area.resizeHandler || ['r'],
+                additionalData: area.additionalData,
+                onResize: e => this.onResize(area, e, rgCol.itemIndex),
+                onDblClick: e => this.headerdblClick.emit(e),
+                onClick: e => this.initialHeaderClick.emit(e),
+                merged: area.groupingDepth > 0 && !isGrouped,
+                groupingDepth: area.groupingDepth,
+                isGrouped,
+                isLastColumn,
+            };
+            const event = this.beforeHeaderRender.emit(props);
+            if (!event.defaultPrevented) {
+                const columnKey = (colData === null || colData === void 0 ? void 0 : colData.prop)
+                    ? `header-${area.type}-${colData.prop}`
+                    : `header-${area.type}-idx-${rgCol.itemIndex}`;
+                const cell = h(HeaderRenderer, Object.assign({ key: columnKey }, event.detail));
+                if (isGrouped) {
+                    groupedCells.push(cell);
+                }
+                else if (area.groupingDepth > 0) {
+                    ungroupedCells.push(cell);
+                }
+                else {
+                    groupedCells.push(cell);
+                }
+            }
+        }
+        return { groupedCells, ungroupedCells };
+    }
+    renderGroupingColumns(area, cols) {
+        var _a, _b, _c;
+        const groupRow = [];
+        const lastColIndex = cols.length > 0 ? cols[cols.length - 1].itemIndex : -1;
+        const multiRowHeight = this.getMultiHeaderRowHeight(area);
+        const groupDivStyle = multiRowHeight !== undefined ? { height: `${multiRowHeight}px` } : undefined;
+        const dimensionState = (_b = (_a = area.dimensionCol) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : area.dimensionState;
+        for (let i = 0; i < area.groupingDepth; i++) {
+            if (area.groups[i]) {
+                for (let group of area.groups[i]) {
+                    const groupStartIndex = (_c = group.indexes[0]) !== null && _c !== void 0 ? _c : -1;
+                    if (groupStartIndex > -1) {
+                        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
+                        // 使用维度数据的绝对坐标计算分组区间，避免受 viewport 裁剪影响导致分组标题丢失
+                        const startItem = getItemByIndex(dimensionState, groupStartIndex);
+                        const endItem = getItemByIndex(dimensionState, groupEndIndex);
+                        const groupStart = startItem.start;
+                        const groupEnd = endItem.end;
+                        const isLastColumn = groupEndIndex === lastColIndex && ((area.hasColPinEnd && area.type === 'colPinEnd') ||
+                            (!area.hasColPinEnd && area.hasRgCol && area.type === 'rgCol') ||
+                            (!area.hasColPinEnd && !area.hasRgCol && area.type === 'colPinStart'));
+                        const props = {
+                            providers: {
+                                type: area.type,
+                                readonly: area.readonly,
+                                data: area.colData,
+                                viewport: area.viewportCol,
+                                dimension: area.dimensionCol,
+                                selection: area.selectionStore,
+                            },
+                            start: groupStart,
+                            end: groupEnd,
+                            group,
+                            active: area.resizeHandler,
+                            canResize: false,
+                            additionalData: area.additionalData,
+                            onResize: e => { var _a; return this.onResizeGroup(area, (_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex); },
+                            isLastColumn,
+                        };
+                        const event = this.beforeGroupHeaderRender.emit(props);
+                        if (!event.defaultPrevented) {
+                            const groupKey = `group-header-${area.type}-${i}-${groupStartIndex}`;
+                            groupRow.push(h(GroupHeaderRenderer, Object.assign({ key: groupKey }, event.detail)));
+                        }
+                    }
+                }
+            }
+            groupRow.push(h("div", { class: `${HEADER_ROW_CLASS} group`, style: groupDivStyle }));
+        }
+        return groupRow;
+    }
+    /**
+     * 开始调整大小（第一次拖动时调用）
+     */
+    startResizing(area) {
+        if (!this.isResizingFlag) {
+            this.isResizingFlag = true;
+            this.setHeaderResizingState(true);
+            // 缓存当前的areas，避免在调整大小期间使用新的areas
+            this.cachedAreas = this.areas;
+            // 为所有区域创建扩展列缓存（包含所有列）
+            this.createExpandedItems(area);
+        }
+    }
+    /**
+     * 重置调整大小的定时器
+     */
+    resetResizeTimer() {
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = window.setTimeout(() => {
+            this.isResizingFlag = false;
+            this.cachedExpandedItems.clear();
+            this.cachedAreas = null;
+            this.setHeaderResizingState(false);
+        }, this.RESIZE_DEBOUNCE_TIME);
+    }
+    onResize(area, { width }, index) {
+        this.startResizing(area);
+        const col = area.colData[index];
+        const event = this.beforeResize.emit([
+            Object.assign(Object.assign({}, col), { size: width || undefined }),
+        ]);
+        if (event.defaultPrevented) {
+            return;
+        }
+        const sizes = { [index]: width || 0 };
+        this.emitResize(area, sizes);
+        this.syncHeaderTransformNow();
+        // 更新缓存中的列尺寸
+        if (area.type === 'rgCol' && this.cachedExpandedItems.has(area.type)) {
+            this.updateCachedItemSize(area.type, index, width || 0);
+        }
+        this.resetResizeTimer();
+    }
+    onResizeGroup(area, changedX, startIndex, endIndex) {
+        this.startResizing(area);
+        const sizes = {};
+        const items = area.viewportItems;
+        const cols = keyBy(items, 'itemIndex');
+        const change = changedX / (endIndex - startIndex + 1);
+        for (let i = startIndex; i <= endIndex; i++) {
+            const item = cols[i];
+            if (item) {
+                sizes[i] = item.size + change;
+            }
+        }
+        this.emitResize(area, sizes);
+        this.syncHeaderTransformNow();
+        // 批量更新缓存中的列尺寸
+        if (area.type === 'rgCol' && this.cachedExpandedItems.has(area.type)) {
+            for (const [idx, size] of Object.entries(sizes)) {
+                this.updateCachedItemSize(area.type, parseInt(idx), size);
+            }
+        }
+        this.resetResizeTimer();
+    }
+    /**
+     * 触发 resize 事件
+     */
+    emitResize(area, sizes) {
+        this.headerresize.emit(sizes);
+        // 调用区域的 onHeaderresize 回调
+        if (area.onHeaderresize) {
+            area.onHeaderresize(new CustomEvent('headerresize', { detail: sizes }));
+        }
+    }
+    getMultiHeaderRowHeight(area) {
+        if (!this.hasCachedBaseHeaderRowHeight) {
+            const computedStyle = getComputedStyle(this.element);
+            const cssHeight = computedStyle.getPropertyValue('--rg-header-row-height').trim();
+            const heightValue = cssHeight ? parseFloat(cssHeight) : NaN;
+            this.cachedBaseHeaderRowHeight = !isNaN(heightValue) ? heightValue : null;
+            this.hasCachedBaseHeaderRowHeight = true;
+        }
+        const baseHeight = this.cachedBaseHeaderRowHeight;
+        if (baseHeight !== null) {
+            // 如果有分组，每行高度为总高度的一半
+            // 如果没有分组，使用完整高度
+            return area.groupingDepth > 0 ? baseHeight / 2 : baseHeight;
+        }
+        return undefined;
+    }
+    static get is() { return "revogr-header-unified"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["revogr-header-unified-style.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["revogr-header-unified-style.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "areas": {
+                "type": "unknown",
+                "attribute": "areas",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderAreaData[]",
+                    "resolved": "HeaderAreaData[]",
+                    "references": {
+                        "HeaderAreaData": {
+                            "location": "local",
+                            "path": "/Users/liwenya/project/balala-revogrid/src/components/header/revogr-header-unified.tsx",
+                            "id": "src/components/header/revogr-header-unified.tsx::HeaderAreaData"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6240\u6709\u533A\u57DF\u7684\u6570\u636E"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "refreshCounter": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "initialHeaderClick",
+                "name": "beforeheaderclick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On initial header click"
+                },
+                "complexType": {
+                    "original": "InitialHeaderClick",
+                    "resolved": "{ index: number; originalEvent: MouseEvent; column: ColumnRegular; providers: ProvidersColumns<DimensionCols | \"rowHeaders\">; }",
+                    "references": {
+                        "InitialHeaderClick": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::InitialHeaderClick"
+                        }
+                    }
+                }
+            }, {
+                "method": "headerresize",
+                "name": "headerresize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On header resize"
+                },
+                "complexType": {
+                    "original": "ViewSettingSizeProp",
+                    "resolved": "{ [x: string]: number; }",
+                    "references": {
+                        "ViewSettingSizeProp": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ViewSettingSizeProp"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforeResize",
+                "name": "beforeheaderresize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On before header resize"
+                },
+                "complexType": {
+                    "original": "ColumnRegular[]",
+                    "resolved": "ColumnRegular[]",
+                    "references": {
+                        "ColumnRegular": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ColumnRegular"
+                        }
+                    }
+                }
+            }, {
+                "method": "headerdblClick",
+                "name": "headerdblclick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "On header double click"
+                },
+                "complexType": {
+                    "original": "InitialHeaderClick",
+                    "resolved": "{ index: number; originalEvent: MouseEvent; column: ColumnRegular; providers: ProvidersColumns<DimensionCols | \"rowHeaders\">; }",
+                    "references": {
+                        "InitialHeaderClick": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::InitialHeaderClick"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforeHeaderRender",
+                "name": "beforeheaderrender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Before each header cell render function"
+                },
+                "complexType": {
+                    "original": "HeaderRenderProps",
+                    "resolved": "{ column: VirtualPositionItem; additionalData: any; data: ColumnTemplateProp; range?: RangeArea | null | undefined; canResize?: boolean | undefined; canFilter?: boolean | undefined; merged?: boolean | undefined; groupingDepth?: number | undefined; isGrouped?: boolean | undefined; isLastColumn?: boolean | undefined; onResize?(e: ResizeEvent): void; onClick?(data: InitialHeaderClick): void; onDblClick?(data: InitialHeaderClick): void; } & Partial<Pick<ResizeProps, \"active\">>",
+                    "references": {
+                        "HeaderRenderProps": {
+                            "location": "import",
+                            "path": "./header-renderer",
+                            "id": "src/components/header/header-renderer.tsx::HeaderRenderProps"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforeGroupHeaderRender",
+                "name": "beforegroupheaderrender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Before each group header cell render function"
+                },
+                "complexType": {
+                    "original": "HeaderGroupRendererProps",
+                    "resolved": "{ start: number; end: number; group: Group; providers: ProvidersColumns<DimensionCols | \"rowHeaders\">; additionalData: any; canResize?: boolean | undefined; isLastColumn?: boolean | undefined; onResize?(e: ResizeEvent): void; } & Partial<Pick<ResizeProps, \"active\">>",
+                    "references": {
+                        "HeaderGroupRendererProps": {
+                            "location": "import",
+                            "path": "./header-group-renderer",
+                            "id": "src/components/header/header-group-renderer.tsx::HeaderGroupRendererProps"
+                        }
+                    }
+                }
+            }, {
+                "method": "afterHeaderRender",
+                "name": "afterheaderrender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "After all header cells rendered"
+                },
+                "complexType": {
+                    "original": "ProvidersColumns",
+                    "resolved": "ProvidersColumns<DimensionCols | \"rowHeaders\">",
+                    "references": {
+                        "ProvidersColumns": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ProvidersColumns"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "startResizingForAutoSize": {
+                "complexType": {
+                    "signature": "(type: DimensionCols) => Promise<void>",
+                    "parameters": [{
+                            "name": "type",
+                            "type": "DimensionColPin | \"rgCol\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DimensionCols": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionCols"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\u516C\u5F00\u65B9\u6CD5\uFF1A\u5F00\u59CB\u8C03\u6574\u5927\u5C0F\uFF08\u7528\u4E8E\u81EA\u52A8\u5217\u5BBD\uFF09",
+                    "tags": []
+                }
+            },
+            "endResizingForAutoSize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\u516C\u5F00\u65B9\u6CD5\uFF1A\u7ED3\u675F\u8C03\u6574\u5927\u5C0F\uFF08\u7528\u4E8E\u81EA\u52A8\u5217\u5BBD\uFF09",
+                    "tags": []
+                }
+            },
+            "forceRefresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\u516C\u5F00\u65B9\u6CD5\uFF1A\u5F3A\u5236\u5237\u65B0\u8868\u5934\uFF08\u7528\u4E8E\u8DE8\u533A\u57DF\u5217\u5BBD\u540C\u6B65\uFF09\n\u5F53\u4E00\u4E2A\u533A\u57DF\u7684\u5217\u5BBD\u53D8\u5316\u5F71\u54CD\u5230\u53E6\u4E00\u4E2A\u533A\u57DF\u65F6\u8C03\u7528",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=revogr-header-unified.js.map