balala-revogrid 1.0.0

package/standalone/revogr-header-unified2.js

@@ -0,0 +1,781 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { H as HeaderRenderer, b as HeaderGroupRenderer, k as keyBy } from './header-group-renderer.js';
+import { e as HEADER_ROW_CLASS, f as HEADER_ACTUAL_ROW_CLASS } from './consts.js';
+import './platform.js';
+import { a as getItemByIndex } from './dimension.helpers.js';
+
+const revogrHeaderUnifiedStyleCss = "@charset \"UTF-8\";revogr-header-unified{display:flex;flex-direction:row;width:100%;position:absolute;top:0;left:0;right:0;z-index:5;pointer-events:none;background:transparent}revogr-header-unified .header-area{position:relative;display:block;pointer-events:auto;background:var(--revo-grid-header-bg, #f8f9fa);z-index:5;box-shadow:-1px 0 0 0 var(--revo-grid-header-border), -1px 0 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border)}revogr-header-unified .header-area .group-rgRow,revogr-header-unified .header-area .header-rgRow{display:block;position:relative}revogr-header-unified .header-area .group-rgRow{z-index:2;overflow:visible}revogr-header-unified .header-area .group-rgRow .rgHeaderCell.merged-header{z-index:5;top:0;align-items:center}revogr-header-unified .header-area .group-rgRow.header-rgRow.group{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revogr-header-unified .header-area .header-rgRow.group{z-index:0}revogr-header-unified .header-area .header-rgRow:not(.group){box-shadow:0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset}revogr-header-unified .header-area .header-rgRow.actual-rgRow{z-index:1}revogr-header-unified .header-area .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex;user-select:text}revogr-header-unified .header-area .rgHeaderCell:has(.resizable-r:hover),revogr-header-unified .header-area .rgHeaderCell:has(.resizable-l:hover){z-index:92}revogr-header-unified .header-area .rgHeaderCell.group-header{text-align:center}revogr-header-unified .header-area .rgHeaderCell.align-center{text-align:center}revogr-header-unified .header-area .rgHeaderCell.align-left{text-align:left}revogr-header-unified .header-area .rgHeaderCell.align-right{text-align:right}revogr-header-unified .header-area .rgHeaderCell.sortable{cursor:pointer}revogr-header-unified .header-area .rgHeaderCell i.asc:after,revogr-header-unified .header-area .rgHeaderCell i.desc:after{font-size:13px}revogr-header-unified .header-area .rgHeaderCell i.asc:after{content:\"↑\"}revogr-header-unified .header-area .rgHeaderCell i.desc:after{content:\"↓\"}revogr-header-unified .header-area .rgHeaderCell.active{z-index:10}revogr-header-unified .header-area .rgHeaderCell.active .resizable{background-color:deepskyblue}revogr-header-unified .header-area .rgHeaderCell .header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header-unified .header-area .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none;pointer-events:auto}revogr-header-unified .header-area .rgHeaderCell .resizable:not(.resizable-r):not(.resizable-l):hover{background-color:deepskyblue}revogr-header-unified .header-area .rgHeaderCell>.resizable-r{cursor:col-resize;width:14px;right:-7px;top:0;height:100%;background-color:transparent !important}revogr-header-unified .header-area .rgHeaderCell>.resizable-r::after{content:\"\";position:absolute;left:50%;transform:translateX(-50%);top:0;width:2px;min-width:2px;max-width:2px;height:100%;background-color:transparent;z-index:100}revogr-header-unified .header-area .rgHeaderCell>.resizable-l{cursor:col-resize;width:14px;left:-7px;height:100%;top:0;background-color:transparent !important}revogr-header-unified .header-area .rgHeaderCell>.resizable-l::after{content:\"\";position:absolute;left:50%;transform:translateX(-50%);top:0;width:2px;height:100%;background-color:transparent;z-index:100}revogr-header-unified .header-area .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header-unified .header-area .rv-filter{visibility:hidden}revogr-header-unified .header-area-colPinStart{flex:0 0 auto;z-index:13}revogr-header-unified .header-area-rgCol{flex:0 1 auto;min-width:0;z-index:12;overflow-x:hidden;overflow-y:visible}revogr-header-unified .header-area-colPinEnd{flex:0 0 auto;z-index:13}";
+
+const RevogrHeaderUnifiedComponent = /*@__PURE__*/ proxyCustomElement(class RevogrHeaderUnifiedComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.initialHeaderClick = createEvent(this, "beforeheaderclick", 7);
+        this.headerresize = createEvent(this, "headerresize", 7);
+        this.beforeResize = createEvent(this, "beforeheaderresize", 7);
+        this.headerdblClick = createEvent(this, "headerdblclick", 7);
+        this.beforeHeaderRender = createEvent(this, "beforeheaderrender", 7);
+        this.beforeGroupHeaderRender = createEvent(this, "beforegroupheaderrender", 7);
+        this.afterHeaderRender = createEvent(this, "afterheaderrender", 7);
+        /**
+         * 强制刷新计数器，用于触发重新渲染
+         */
+        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() {
+        // 在调整大小期间使用缓存的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(HeaderGroupRenderer, 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;
+    }
+    get element() { return this; }
+    static get style() { return revogrHeaderUnifiedStyleCss; }
+}, [256, "revogr-header-unified", {
+        "areas": [16],
+        "refreshCounter": [32],
+        "startResizingForAutoSize": [64],
+        "endResizingForAutoSize": [64],
+        "forceRefresh": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["revogr-header-unified"];
+    components.forEach(tagName => { switch (tagName) {
+        case "revogr-header-unified":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RevogrHeaderUnifiedComponent);
+            }
+            break;
+    } });
+}
+
+export { RevogrHeaderUnifiedComponent as R, defineCustomElement as d };
+//# sourceMappingURL=revogr-header-unified2.js.map
+
+//# sourceMappingURL=revogr-header-unified2.js.map