@visactor/vtable-plugins 1.22.2 → 1.22.3

package/dist/vtable-plugins.js

@@ -1954,16 +1954,17 @@
                 return;
             }
             let animation = true;
+            const screenTopRow = Math.max(this.table.scenegraph.proxy.screenTopRow, this.table.frozenRowCount);
             const customRow = this.customDistRowFunction && this.customDistRowFunction(this.row, this.table);
             if (customRow) {
                 this.row = customRow.distRow;
                 animation = customRow.animation ?? true;
             }
-            else if (isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== this.row) {
+            else if (isInteger(this.row) && screenTopRow !== this.row) {
                 this.row = this.table.frozenRowCount;
                 animation = false;
             }
-            else if (!isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== Math.floor(this.row)) {
+            else if (!isInteger(this.row) && screenTopRow !== Math.floor(this.row)) {
                 this.row = this.table.frozenRowCount;
                 animation = false;
             }
@@ -5901,10 +5902,14 @@
     class ConfigManager {
         pluginOptions;
         table;
+        expandRowCallback;
         constructor(pluginOptions, table) {
             this.pluginOptions = pluginOptions;
             this.table = table;
         }
+        setExpandRowCallback(callback) {
+            this.expandRowCallback = callback;
+        }
         hasChildren(record) {
             if (record && typeof record === 'object' && 'children' in record) {
                 const children = record.children;
@@ -5951,12 +5956,6 @@
             }
             this.disableRefreshHierarchyState();
         }
-        getDataCount() {
-            if (this.table.pagination) {
-                return this.table.dataSource?.currentPagerIndexedData?.length ?? 0;
-            }
-            return this.table.dataSource?.sourceLength ?? 0;
-        }
         disableRefreshHierarchyState() {
             setTimeout(() => {
                 const tableWithPrivateMethod = this.table;
@@ -5976,20 +5975,101 @@
         }
         processRecordsHierarchyStates(records) {
             const HierarchyState = VTable__namespace.TYPES.HierarchyState;
+            const headerExpandLevel = this.table.options.headerExpandLevel;
             const processRecords = (recordList) => {
                 recordList.forEach(record => {
                     if (record && typeof record === 'object') {
                         const recordObj = record;
-                        if (this.hasChildren(record)) {
-                            recordObj.hierarchyState = HierarchyState.collapse;
-                        }
-                        else if (recordObj.children === true) {
-                            recordObj.hierarchyState = HierarchyState.collapse;
+                        if (this.hasChildren(record) || recordObj.children === true) {
+                            if (recordObj.hierarchyState === 'expand') {
+                                recordObj.hierarchyState = HierarchyState.expand;
+                            }
+                            else if (recordObj.hierarchyState === 'collapse') {
+                                recordObj.hierarchyState = HierarchyState.collapse;
+                            }
+                            else if (!recordObj.hierarchyState) {
+                                if (headerExpandLevel && headerExpandLevel > 1) {
+                                    recordObj.hierarchyState = HierarchyState.expand;
+                                }
+                                else {
+                                    recordObj.hierarchyState = HierarchyState.collapse;
+                                }
+                            }
                         }
                     }
                 });
             };
             processRecords(records);
+            this.performInitialExpansion();
+        }
+        performInitialExpansion() {
+            const expandableRecords = this.getExpandableRecords();
+            if (expandableRecords.length === 0) {
+                return;
+            }
+            this.startAsyncExpansion(expandableRecords);
+        }
+        getExpandableRecords() {
+            const dataSource = this.table.dataSource;
+            const allRecords = dataSource.source || dataSource._source || this.table.dataSource.records;
+            const HierarchyState = VTable__namespace.TYPES.HierarchyState;
+            const expandableRecords = [];
+            const tableWithInternalProps = this.table;
+            if (!tableWithInternalProps.internalProps.expandedRecordIndices) {
+                tableWithInternalProps.internalProps.expandedRecordIndices = [];
+            }
+            const expandedRecordIndices = tableWithInternalProps.internalProps.expandedRecordIndices;
+            for (let recordIndex = 0; recordIndex < allRecords.length; recordIndex++) {
+                const record = allRecords[recordIndex];
+                if (record && typeof record === 'object') {
+                    const recordObj = record;
+                    if ((this.hasChildren(record) || recordObj.children === true) &&
+                        recordObj.hierarchyState === HierarchyState.expand) {
+                        if (!expandedRecordIndices.includes(recordIndex)) {
+                            expandedRecordIndices.push(recordIndex);
+                        }
+                        try {
+                            const bodyRowIndex = this.table.getBodyRowIndexByRecordIndex(recordIndex);
+                            if (bodyRowIndex >= 0) {
+                                const actualRowIndex = bodyRowIndex + this.table.columnHeaderLevelCount;
+                                expandableRecords.push({ recordIndex, actualRowIndex, record });
+                            }
+                        }
+                        catch (error) {
+                        }
+                    }
+                }
+            }
+            return expandableRecords;
+        }
+        startAsyncExpansion(expandableRecords) {
+            let currentIndex = 0;
+            const processNextExpansion = () => {
+                if (currentIndex >= expandableRecords.length) {
+                    return;
+                }
+                const { actualRowIndex } = expandableRecords[currentIndex];
+                if (this.isCellGroupCreated(actualRowIndex)) {
+                    if (this.expandRowCallback) {
+                        this.expandRowCallback(actualRowIndex);
+                    }
+                    currentIndex++;
+                    setTimeout(processNextExpansion, 0);
+                }
+                else {
+                    setTimeout(processNextExpansion, 16);
+                }
+            };
+            setTimeout(processNextExpansion, 0);
+        }
+        isCellGroupCreated(rowIndex) {
+            try {
+                const cellGroup = this.table.scenegraph.getCell(0, rowIndex);
+                return cellGroup && cellGroup.role === 'cell';
+            }
+            catch (error) {
+                return false;
+            }
         }
         getDetailConfigForRecord(record, bodyRowIndex) {
             const detailOptions = this.pluginOptions.detailTableOptions;
@@ -6056,7 +6136,7 @@
                             effectiveCellHeight = originalHeight;
                             const newHeight = effectiveCellHeight - (padding[0] + padding[2]);
                             cellGroup.forEachChildren((child) => {
-                                if (child.type === 'rect' || child.type === 'chart' || child.name === 'custom-container') {
+                                if (child.type === 'rect' || child.type === 'chart' || child.name === VTable__namespace.CUSTOM_CONTAINER_NAME) {
                                     return;
                                 }
                                 if (child.name === 'mark') {
@@ -6573,6 +6653,67 @@
             this.setupAntiFlickerMechanism(subTable);
             this.setupSubTableEventForwarding(bodyRowIndex, subTable);
             subTable.render();
+            if (detailConfig?.style?.height === 'auto') {
+                this.handleAutoHeightAfterRender(bodyRowIndex, subTable, detailConfig);
+            }
+        }
+        handleAutoHeightAfterRender(bodyRowIndex, subTable, detailConfig) {
+            try {
+                const actualContentHeight = this.calculateSubTableContentHeight(subTable);
+                const [marginTop, , marginBottom] = parseMargin(detailConfig?.style?.margin);
+                const totalRequiredHeight = actualContentHeight + marginTop + marginBottom;
+                if (this.onAutoHeightCalculated) {
+                    this.onAutoHeightCalculated(bodyRowIndex, totalRequiredHeight);
+                }
+            }
+            catch (error) {
+            }
+        }
+        calculateSubTableContentHeight(subTable) {
+            try {
+                const contentHeight = subTable.getAllRowsHeight();
+                let frameExtraHeight = 0;
+                const theme = subTable.theme;
+                if (theme?.frameStyle) {
+                    const frameStyle = theme.frameStyle;
+                    let borderTopWidth = 0;
+                    let borderBottomWidth = 0;
+                    if (frameStyle.borderLineWidth) {
+                        if (typeof frameStyle.borderLineWidth === 'number') {
+                            borderTopWidth = borderBottomWidth = frameStyle.borderLineWidth;
+                        }
+                        else if (Array.isArray(frameStyle.borderLineWidth)) {
+                            const borders = frameStyle.borderLineWidth;
+                            borderTopWidth = borders[0] || 0;
+                            borderBottomWidth = borders[2] || 0;
+                        }
+                    }
+                    let shadowTopHeight = 0;
+                    let shadowBottomHeight = 0;
+                    if (frameStyle.shadowBlur) {
+                        if (typeof frameStyle.shadowBlur === 'number') {
+                            shadowTopHeight = shadowBottomHeight = frameStyle.shadowBlur;
+                        }
+                        else if (Array.isArray(frameStyle.shadowBlur)) {
+                            const shadows = frameStyle.shadowBlur;
+                            shadowTopHeight = shadows[0] || 0;
+                            shadowBottomHeight = shadows[2] || 0;
+                        }
+                    }
+                    if (!frameStyle.innerBorder) {
+                        frameExtraHeight = borderTopWidth + borderBottomWidth + shadowTopHeight + shadowBottomHeight;
+                    }
+                }
+                const totalHeight = contentHeight + frameExtraHeight;
+                return totalHeight;
+            }
+            catch (error) {
+                return 300;
+            }
+        }
+        onAutoHeightCalculated;
+        setAutoHeightCallback(callback) {
+            this.onAutoHeightCalculated = callback;
         }
         columnRangeCache = null;
         getColumnRange() {
@@ -6614,7 +6755,14 @@
             }
             const [marginTop, marginRight, marginBottom, marginLeft] = parseMargin(detailConfig?.style?.margin);
             const configHeight = height ? height : detailConfig?.style?.height || 300;
-            if (configHeight <= marginTop + marginBottom) {
+            let actualHeight;
+            if (configHeight === 'auto') {
+                actualHeight = 300;
+            }
+            else {
+                actualHeight = typeof configHeight === 'number' ? configHeight : 300;
+            }
+            if (actualHeight <= marginTop + marginBottom) {
                 return {
                     x1: firstColRect.left + marginLeft,
                     y1: detailRowRect.top + originalHeight,
@@ -6626,7 +6774,7 @@
                 x1: firstColRect.left + marginLeft,
                 y1: detailRowRect.top + originalHeight + marginTop,
                 x2: lastColRect.right - marginRight,
-                y2: detailRowRect.top + originalHeight - marginBottom + configHeight
+                y2: detailRowRect.top + originalHeight - marginBottom + actualHeight
             };
             if (viewBox.x2 <= viewBox.x1 || viewBox.y2 <= viewBox.y1) {
                 return null;
@@ -7972,6 +8120,7 @@
             const enableCheckboxCascade = this.pluginOptions.enableCheckboxCascade ?? true;
             this.subTableManager = new SubTableManager(this.table, enableCheckboxCascade);
             this.configManager.setRowExpandedChecker((row) => this.eventManager.isRowExpanded(row));
+            this.configManager.setExpandRowCallback((rowIndex) => this.expandRow(rowIndex));
             this.eventManager.setCallbacks({
                 onUpdateSubTablePositions: () => this.subTableManager.recalculateAllSubTablePositions(),
                 onUpdateSubTablePositionsForRow: () => this.subTableManager.updateSubTablePositionsForRowResize(),
@@ -7984,6 +8133,9 @@
             this.subTableManager.setCallbacks({
                 getDetailConfigForRecord: (record, bodyRowIndex) => this.configManager.getDetailConfigForRecord(record, bodyRowIndex)
             });
+            this.subTableManager.setAutoHeightCallback((bodyRowIndex, newTotalHeight) => {
+                this.handleAutoHeightUpdate(bodyRowIndex, newTotalHeight);
+            });
         }
         setupMasterDetailFeatures() {
             this.initInternalProps();
@@ -8073,18 +8225,19 @@
             this.eventManager.addExpandedRow(rowIndex);
             const originalHeight = this.table.getRowHeight(rowIndex);
             if (internalProps.originalRowHeights) {
+                this.table.scenegraph.getCell(colIndex, rowIndex);
                 internalProps.originalRowHeights.set(bodyRowIndex, originalHeight);
             }
             const record = getRecordByRowIndex(this.table, bodyRowIndex);
             const detailConfig = this.configManager.getDetailConfigForRecord(record, bodyRowIndex);
             const height = detailConfig?.style?.height || 300;
             const childrenData = Array.isArray(record.children) ? record.children : [];
-            const deltaHeight = height;
+            const isAutoHeight = height === 'auto';
+            const deltaHeight = isAutoHeight ? 300 : typeof height === 'number' ? height : 300;
             this.updateRowHeightForExpand(rowIndex, deltaHeight);
             this.table.scenegraph.updateContainerHeight(rowIndex, deltaHeight);
             internalProps._heightResizedRowMap.add(rowIndex);
             this.subTableManager.renderSubTable(bodyRowIndex, childrenData, (record, bodyRowIndex) => this.configManager.getDetailConfigForRecord(record, bodyRowIndex));
-            this.subTableManager.recalculateAllSubTablePositions(bodyRowIndex + 1, undefined, (record, bodyRowIndex) => this.configManager.getDetailConfigForRecord(record, bodyRowIndex));
             if (rowIndex !== this.table.rowCount - 1) {
                 this.drawUnderlineForRow(rowIndex);
             }
@@ -8092,6 +8245,21 @@
             if (this.table.heightMode === 'adaptive') {
                 this.table.scenegraph.dealHeightMode();
             }
+            this.updateFrozenColumnShadowHeight();
+        }
+        handleAutoHeightUpdate(bodyRowIndex, newTotalHeight) {
+            try {
+                const rowIndex = bodyRowIndex + this.table.columnHeaderLevelCount;
+                const currentRowHeight = this.table.getRowHeight(rowIndex);
+                const internalProps = getInternalProps(this.table);
+                const originalHeight = internalProps.originalRowHeights?.get(bodyRowIndex) || 0;
+                const currentDetailHeight = currentRowHeight - originalHeight;
+                const heightDifference = newTotalHeight - currentDetailHeight;
+                this.updateRowHeightForExpand(rowIndex, heightDifference);
+                this.table.scenegraph.updateContainerHeight(rowIndex, heightDifference);
+            }
+            catch (error) {
+            }
         }
         collapseRow(rowIndex, colIndex) {
             const bodyRowIndex = rowIndex - this.table.columnHeaderLevelCount;
@@ -8123,11 +8291,11 @@
             if (rowIndex !== this.table.rowCount - 1) {
                 this.removeUnderlineFromRow(rowIndex);
             }
-            this.subTableManager.recalculateAllSubTablePositions(bodyRowIndex + 1, undefined, (record, bodyRowIndex) => this.configManager.getDetailConfigForRecord(record, bodyRowIndex));
             this.refreshRowIcon(rowIndex, colIndex);
             if (this.table.heightMode === 'adaptive') {
                 this.table.scenegraph.dealHeightMode();
             }
+            this.updateFrozenColumnShadowHeight();
         }
         collapseRowToNoRealRecordIndex(rowIndex) {
             const bodyRowIndex = rowIndex - this.table.columnHeaderLevelCount;
@@ -8149,11 +8317,11 @@
             if (rowIndex !== this.table.rowCount - 1) {
                 this.removeUnderlineFromRow(rowIndex);
             }
-            this.subTableManager.recalculateAllSubTablePositions(bodyRowIndex + 1, undefined, (record, bodyRowIndex) => this.configManager.getDetailConfigForRecord(record, bodyRowIndex));
             this.refreshRowIcon(rowIndex);
             if (this.table.heightMode === 'adaptive') {
                 this.table.scenegraph.dealHeightMode();
             }
+            this.updateFrozenColumnShadowHeight();
         }
         toggleRowExpand(rowIndex, colIndex) {
             if (this.eventManager.isRowExpanded(rowIndex)) {
@@ -8286,11 +8454,6 @@
                 this.table.scenegraph.updateHierarchyIcon(targetColumnIndex, rowIndex);
             }
         }
-        update() {
-            if (this.table) {
-                this.subTableManager.recalculateAllSubTablePositions(0, undefined, (record, bodyRowIndex) => this.configManager.getDetailConfigForRecord(record, bodyRowIndex));
-            }
-        }
         setRecordChildren(children, col, row) {
             const recordIndex = this.table.getRecordIndexByCell(col, row);
             if (recordIndex === undefined || recordIndex === null) {
@@ -8408,6 +8571,16 @@
             }
             return result;
         }
+        updateFrozenColumnShadowHeight() {
+            try {
+                const frozenColCount = this.table.frozenColCount;
+                if (frozenColCount > 0) {
+                    this.table.scenegraph.component.setFrozenColumnShadow(frozenColCount - 1);
+                }
+            }
+            catch (error) {
+            }
+        }
         cleanupMasterDetailFeatures() {
             if (this.mainTableClickHandler) {
                 this.table.off('click_cell', this.mainTableClickHandler);
@@ -9075,10 +9248,10 @@ ${recordsStr}
                     }
                 }, pluginOptions.cornerCellStyle),
                 checkMoveColumnOrder: (colIndex) => {
-                    return this.table.isColumnSelected(colIndex);
+                    return this.pluginOptions.dragOrder?.enableDragColumnOrder ? this.table.isColumnSelected(colIndex) : false;
                 },
                 checkMoveRowOrder: (rowIndex) => {
-                    return this.table.isRowSelected(rowIndex);
+                    return this.pluginOptions.dragOrder?.enableDragRowOrder ? this.table.isRowSelected(rowIndex) : false;
                 }
             });
             this.listenComponentEvents();
@@ -9101,6 +9274,7 @@ ${recordsStr}
                 for (let i = options.columns.length; i < this.pluginOptions.colCount; i++) {
                     const columnFields = {
                         field: i,
+                        key: i,
                         title: ``
                     };
                     options.columns.push(columnFields);
@@ -9327,8 +9501,12 @@ ${recordsStr}
             this.seriesNumberComponent.on(vrender.SeriesNumberEvent.rowSeriesNumberWidthChange, this.handleRowSeriesNumberWidthChange);
             this.seriesNumberComponent.on(vrender.SeriesNumberEvent.resizeColWidthStart, this.handleResizeColWidthStart);
             this.seriesNumberComponent.on(vrender.SeriesNumberEvent.resizeRowHeightStart, this.handleResizeRowHeightStart);
-            this.seriesNumberComponent.on(vrender.SeriesNumberEvent.dragColumnOrderStart, this.handleDragColumOrderStart);
-            this.seriesNumberComponent.on(vrender.SeriesNumberEvent.dragRowOrderStart, this.handleDragRowOrderStart);
+            if (this.pluginOptions.dragOrder?.enableDragColumnOrder) {
+                this.seriesNumberComponent.on(vrender.SeriesNumberEvent.dragColumnOrderStart, this.handleDragColumOrderStart);
+            }
+            if (this.pluginOptions.dragOrder?.enableDragRowOrder) {
+                this.seriesNumberComponent.on(vrender.SeriesNumberEvent.dragRowOrderStart, this.handleDragRowOrderStart);
+            }
         }
         release() {
             if (this.componentLayoutLayer) {
@@ -9791,7 +9969,9 @@ ${recordsStr}
                     });
                 }
             });
-            table.updateFilterRules([...this.filterFuncRule, ...this.filterValueRule]);
+            table.updateFilterRules([...this.filterFuncRule, ...this.filterValueRule], {
+                clearRowHeightCache: false
+            });
         }
         createFilterFunction(filter) {
             const { field, operator, condition } = filter;
@@ -9969,40 +10149,6 @@ ${recordsStr}
         }
         applyFilters() {
             this.engine.applyFilter(this.state, this.table);
-            this.updateColumnIcons();
-        }
-        updateColumnIcons() {
-            const columns = this.table.columns;
-            if (!columns) {
-                return;
-            }
-            const plugin = this.table.pluginManager.getPluginByName('Filter');
-            if (!plugin || !plugin.pluginOptions) {
-                return;
-            }
-            const filterIcon = plugin.pluginOptions.filterIcon;
-            const filteringIcon = plugin.pluginOptions.filteringIcon;
-            columns.forEach((col, index) => {
-                const field = col.field;
-                const filterConfig = this.state.filters.get(field);
-                const shouldEnableFilter = plugin.shouldEnableFilterForColumn
-                    ? plugin.shouldEnableFilterForColumn(index, col)
-                    : true;
-                if (shouldEnableFilter) {
-                    if (filterConfig && filterConfig.enable) {
-                        col.headerIcon = filteringIcon;
-                    }
-                    else {
-                        col.headerIcon = filterIcon;
-                    }
-                }
-                else {
-                    if (col.headerIcon === filterIcon || col.headerIcon === filteringIcon) {
-                        delete col.headerIcon;
-                    }
-                }
-            });
-            this.table.updateColumns(columns);
         }
         shouldApplyFilter(action) {
             const shouldApplyActions = [
@@ -11085,6 +11231,12 @@ ${recordsStr}
                 this.filterToolbar = new FilterToolbar(this.table, this.filterStateManager);
                 this.filterToolbar.render(document.body);
                 this.updateFilterIcons(eventArgs.options);
+                this.filterStateManager.subscribe(() => {
+                    this.updateFilterIcons(eventArgs.options);
+                    this.table.updateColumns(eventArgs.options.columns, {
+                        clearRowHeightCache: false
+                    });
+                });
             }
             else if (runtime === VTable.TABLE_EVENT_TYPE.BEFORE_UPDATE_OPTION) {
                 this.pluginOptions = {
@@ -11141,14 +11293,33 @@ ${recordsStr}
             });
         }
         updateFilterIcons(options) {
-            const columns = options.columns;
-            columns.forEach((col) => {
-                if (this.shouldEnableFilterForColumn(col.field, col)) {
-                    col.headerIcon = this.pluginOptions.filterIcon;
+            const filterIcon = this.pluginOptions.filterIcon;
+            const filteringIcon = this.pluginOptions.filteringIcon;
+            const isIconEqual = (a, b) => a === b || (a && b && typeof a === 'object' && typeof b === 'object' && a.name === b.name);
+            const toIconList = icons => (icons ? (Array.isArray(icons) ? icons : [icons]) : []);
+            const compactIcons = list => (list.length === 0 ? undefined : list.length === 1 ? list[0] : list);
+            options.columns.forEach(column => {
+                const shouldShow = this.shouldEnableFilterForColumn(column.field, column);
+                const isFiltering = !!this.filterStateManager.getFilterState(column.field)?.enable;
+                let icons = toIconList(column.headerIcon);
+                if (shouldShow) {
+                    if (isFiltering) {
+                        if (!icons.some(icon => isIconEqual(icon, filteringIcon))) {
+                            icons = icons.filter(icon => !isIconEqual(icon, filterIcon));
+                            icons.push(filteringIcon);
+                        }
+                    }
+                    else {
+                        if (!icons.some(icon => isIconEqual(icon, filterIcon))) {
+                            icons = icons.filter(icon => !isIconEqual(icon, filteringIcon));
+                            icons.push(filterIcon);
+                        }
+                    }
                 }
                 else {
-                    delete col.headerIcon;
+                    icons = icons.filter(icon => !isIconEqual(icon, filterIcon));
                 }
+                column.headerIcon = compactIcons(icons);
             });
         }
         shouldEnableFilterForColumn(field, column) {