@visactor/vtable 1.26.3 → 1.26.4-alpha.0

package/dist/vtable.js

@@ -41545,6 +41545,41 @@
         getGroupLength() {
             return this.dataConfig?.groupByRules?.length ?? 0;
         }
+        refreshRecords(records = [], dataConfig, pagination, columns, rowHierarchyType, hierarchyExpandLevel) {
+            this.clearCache();
+            this.beforeChangedRecordsMap.clear();
+            this.groupAggregator = null;
+            this.addRecordRule = dataConfig?.addRecordRule || 'Object';
+            this.dataConfig = dataConfig;
+            this.columns = columns;
+            this._isGrouped = isArray$5(dataConfig?.groupByRules);
+            this.rowHierarchyType = rowHierarchyType;
+            this.dataSourceObj = {
+                get: (index) => records[index],
+                length: records.length,
+                records
+            };
+            this._source = this.processRecords(records);
+            this.sourceLength = this.source?.length || 0;
+            this.sortedIndexMap.clear();
+            this._currentPagerIndexedData = [];
+            this.userPagination = pagination;
+            this.pagination = pagination || {
+                totalCount: this.sourceLength,
+                perPageCount: this.sourceLength,
+                currentPage: 0
+            };
+            this.hierarchyExpandLevel = hierarchyExpandLevel >= 1 ? hierarchyExpandLevel : 0;
+            this.currentIndexedData = Array.from({ length: this.sourceLength }, (_, i) => i);
+            if (!this.userPagination) {
+                this.pagination.perPageCount = this.sourceLength;
+                this.pagination.totalCount = this.sourceLength;
+            }
+            if (rowHierarchyType === 'tree') {
+                this.initTreeHierarchyState();
+            }
+            this.updatePagerData();
+        }
         updateGroup() {
             this.clearCache();
             const oldSource = this.source;
@@ -42308,17 +42343,21 @@
             })
         ];
     }
-    function _setRecords(table, records = []) {
+    function getListTableRowHierarchyType(table) {
         const tableWithPlugins = table;
+        let rowHierarchyType = table.internalProps.layoutMap.rowHierarchyType;
+        if (isArray$5(table.internalProps.dataConfig?.groupByRules)) {
+            rowHierarchyType = 'tree';
+        }
+        if (tableWithPlugins.pluginManager?.getPluginByName('Master Detail Plugin')) {
+            rowHierarchyType = 'grid';
+        }
+        return rowHierarchyType;
+    }
+    function _setRecords(table, records = []) {
         _dealWithUpdateDataSource(table, () => {
             table.internalProps.records = records;
-            let rowHierarchyType = table.internalProps.layoutMap.rowHierarchyType;
-            if (isArray$5(table.internalProps.dataConfig?.groupByRules)) {
-                rowHierarchyType = 'tree';
-            }
-            if (tableWithPlugins.pluginManager.getPluginByName('Master Detail Plugin')) {
-                rowHierarchyType = 'grid';
-            }
+            const rowHierarchyType = getListTableRowHierarchyType(table);
             const newDataSource = (table.internalProps.dataSource = CachedDataSource.ofArray(records, table.internalProps.dataConfig, table.pagination, table.internalProps.columns, rowHierarchyType, getHierarchyExpandLevel(table)));
             table.addReleaseObj(newDataSource);
         });
@@ -43533,7 +43572,7 @@
                 col: range?.start.col ?? col,
                 row: range?.start.row ?? row,
                 dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row),
+                value: table.getCellValue(col, row) || '',
                 rect: {
                     left: 0,
                     top: 0,
@@ -43569,7 +43608,7 @@
                 col,
                 row,
                 dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row),
+                value: table.getCellValue(col, row) || '',
                 rect: {
                     left: 0,
                     top: 0,
@@ -44622,7 +44661,7 @@
     }
 
     function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range) {
-        let contentWidth;
+        let contentWidth = 0;
         let leftIconWidth = 0;
         let rightIconWidth = 0;
         let absoluteRightIconWidth = 0;
@@ -44667,8 +44706,9 @@
                 wrapText.name = 'text';
                 wrapText.textBaseline = textBaseline;
                 cellGroup.appendChild(wrapText);
-                contentWidth = wrapText.AABBBounds.width();
-                wrapText.AABBBounds.height();
+                if (autoColWidth) {
+                    contentWidth = wrapText.AABBBounds.width();
+                }
             }
         }
         else {
@@ -44782,8 +44822,9 @@
                 cellContent.addContent(textMark);
                 cellGroup.appendChild(cellContent);
                 cellContent.layout();
-                contentWidth = cellContent.AABBBounds.width();
-                cellContent.AABBBounds.height();
+                if (autoColWidth) {
+                    contentWidth = cellContent.AABBBounds.width();
+                }
             }
             else {
                 if (cellGroup.firstChild) {
@@ -44792,8 +44833,9 @@
                 else {
                     cellGroup.appendChild(textMark);
                 }
-                contentWidth = textMark.AABBBounds.width();
-                textMark.AABBBounds.height();
+                if (autoColWidth) {
+                    contentWidth = textMark.AABBBounds.width();
+                }
             }
         }
         const width = autoColWidth
@@ -45679,7 +45721,7 @@
         }
     }
 
-    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
+    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, headerStyle) {
         let isAsync = false;
         let cellGroup;
         if (isPromise(value)) {
@@ -45728,7 +45770,7 @@
             }
             const { customElementsGroup, renderDefault } = _generateCustomElementsGroup(table, define, col, row, cellWidth, cellHeight, padding, range, customResult);
             const createTextCellGroup = Factory.getFunction('createTextCellGroup');
-            cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync);
+            cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle);
             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
                 const CartesianAxis = Factory.getComponent('axis');
@@ -45766,7 +45808,7 @@
             const style = table._getCellStyle(col, row);
             const dataValue = table.getCellOriginValue(col, row);
             const createTextCellGroup = Factory.getFunction('createTextCellGroup');
-            cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync);
+            cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle);
             const createProgressBarCell = Factory.getFunction('createProgressBarCell');
             const progressBarGroup = createProgressBarCell(define, style, colWidth, value, dataValue, col, row, padding, table, range);
             if (cellGroup.firstChild) {
@@ -45784,7 +45826,7 @@
             const isAggregation = 'isAggregation' in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row);
             if (isAggregation) {
                 const createTextCellGroup = Factory.getFunction('createTextCellGroup');
-                cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, undefined, true, cellTheme, range, isAsync);
+                cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, undefined, true, cellTheme, range, isAsync, headerStyle);
             }
             else {
                 const createCheckboxCellGroup = Factory.getFunction('createCheckboxCellGroup');
@@ -45795,7 +45837,7 @@
             const isAggregation = 'isAggregation' in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row);
             if (isAggregation) {
                 const createTextCellGroup = Factory.getFunction('createTextCellGroup');
-                cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, undefined, true, cellTheme, range, isAsync);
+                cellGroup = createTextCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, undefined, true, cellTheme, range, isAsync, headerStyle);
             }
             else {
                 const createRadioCellGroup = Factory.getFunction('createRadioCellGroup');
@@ -47012,7 +47054,7 @@
                 col: cellRange?.start.col ?? col,
                 row: cellRange?.start.row ?? row,
                 dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row),
+                value: table.getCellValue(col, row) || '',
                 rect: getCellRect$1(col, row, table),
                 table,
                 originCol: col,
@@ -53567,7 +53609,7 @@
                 col: cellRange?.start.col ?? col,
                 row: cellRange?.start.row ?? row,
                 dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row),
+                value: table.getCellValue(col, row) || '',
                 rect: getCellRect(col, row, table),
                 table,
                 originCol: col,
@@ -53972,6 +54014,7 @@
             let customStyle;
             let customResult;
             let isCustomMerge = false;
+            let rawRecord;
             if (table.internalProps.customMergeCell) {
                 const customMerge = table.getCustomMerge(col, row);
                 if (customMerge) {
@@ -54021,8 +54064,19 @@
                     !(isAggregation && isSeriesNumber);
             if (!range &&
                 (table.internalProps.enableTreeNodeMerge || cellLocation !== 'body' || define?.mergeCell)) {
-                range = table.getCellRange(col, row);
-                isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
+                if (table.internalProps.enableTreeNodeMerge &&
+                    cellLocation === 'body' &&
+                    !define?.mergeCell) {
+                    rawRecord = table.getCellRawRecord(col, row);
+                    if (rawRecord?.vtableMerge) {
+                        range = table.getCellRange(col, row);
+                        isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
+                    }
+                }
+                else {
+                    range = table.getCellRange(col, row);
+                    isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
+                }
                 if (isMerge) {
                     const needUpdateRange = rowStart > range.start.row;
                     const mergeSize = dealMerge(range, mergeMap, table, needUpdateRange);
@@ -54032,7 +54086,7 @@
             }
             let isVtableMerge = false;
             if (table.internalProps.enableTreeNodeMerge && isMerge) {
-                const rawRecord = table.getCellRawRecord(range.start.col, range.start.row);
+                rawRecord = rawRecord ?? table.getCellRawRecord(range.start.col, range.start.row);
                 const { vtableMergeName, vtableMerge } = rawRecord ?? {};
                 isVtableMerge = vtableMerge;
                 if (vtableMerge) {
@@ -54093,7 +54147,7 @@
                 if (cellLocation !== 'body' && !cellTheme.group.fill) {
                     cellTheme.group.fill = '#fff';
                 }
-                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
+                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, cellStyle);
                 columnGroup.updateColumnRowNumber(row);
                 if (isMerge) {
                     const rangeHeight = table.getRowHeight(row);
@@ -54143,7 +54197,7 @@
         if (cellLocation !== 'body' && !cellTheme.group.fill) {
             cellTheme.group.fill = '#fff';
         }
-        createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
+        createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, cellStyle);
     }
     function dealMerge(range, mergeMap, table, forceUpdate) {
         let cellWidth = 0;
@@ -60217,42 +60271,42 @@
             this.updateNextFrame();
         }
         updateContainerAttrHeightAndY() {
-            for (let i = 0; i < this.cornerHeaderGroup.children.length; i++) {
-                updateContainerChildrenY(this.cornerHeaderGroup.children[i], 0);
-            }
-            for (let i = 0; i < this.colHeaderGroup.children.length; i++) {
-                updateContainerChildrenY(this.colHeaderGroup.children[i], 0);
-            }
-            for (let i = 0; i < this.rightTopCornerGroup.children.length; i++) {
-                updateContainerChildrenY(this.rightTopCornerGroup.children[i], 0);
-            }
-            for (let i = 0; i < this.rowHeaderGroup.children.length; i++) {
-                this.rowHeaderGroup.children[i].firstChild &&
-                    updateContainerChildrenY(this.rowHeaderGroup.children[i], this.rowHeaderGroup.children[i].firstChild.row > 0
-                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, this.rowHeaderGroup.children[i].firstChild.row - 1)
+            this.cornerHeaderGroup.forEachChildrenSkipChild((column) => {
+                updateContainerChildrenY(column, 0);
+            });
+            this.colHeaderGroup.forEachChildrenSkipChild((column) => {
+                updateContainerChildrenY(column, 0);
+            });
+            this.rightTopCornerGroup.forEachChildrenSkipChild((column) => {
+                updateContainerChildrenY(column, 0);
+            });
+            this.rowHeaderGroup.forEachChildrenSkipChild((column) => {
+                column.firstChild &&
+                    updateContainerChildrenY(column, column.firstChild.row > 0
+                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, column.firstChild.row - 1)
                         : 0);
-            }
-            for (let i = 0; i < this.bodyGroup.children.length; i++) {
-                this.bodyGroup.children[i].firstChild &&
-                    updateContainerChildrenY(this.bodyGroup.children[i], this.bodyGroup.children[i].firstChild.row > 0
-                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, this.bodyGroup.children[i].firstChild.row - 1)
+            });
+            this.bodyGroup.forEachChildrenSkipChild((column) => {
+                column.firstChild &&
+                    updateContainerChildrenY(column, column.firstChild.row > 0
+                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, column.firstChild.row - 1)
                         : 0);
-            }
-            for (let i = 0; i < this.rightFrozenGroup.children.length; i++) {
-                this.rightFrozenGroup.children[i].firstChild &&
-                    updateContainerChildrenY(this.rightFrozenGroup.children[i], this.rightFrozenGroup.children[i].firstChild.row > 0
-                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, this.rightFrozenGroup.children[i].firstChild.row - 1)
+            });
+            this.rightFrozenGroup.forEachChildrenSkipChild((column) => {
+                column.firstChild &&
+                    updateContainerChildrenY(column, column.firstChild.row > 0
+                        ? this.table.getRowsHeight(this.table.frozenRowCount ?? 0, column.firstChild.row - 1)
                         : 0);
-            }
-            for (let i = 0; i < this.leftBottomCornerGroup.children.length; i++) {
-                updateContainerChildrenY(this.leftBottomCornerGroup.children[i], 0);
-            }
-            for (let i = 0; i < this.bottomFrozenGroup.children.length; i++) {
-                updateContainerChildrenY(this.bottomFrozenGroup.children[i], 0);
-            }
-            for (let i = 0; i < this.rightBottomCornerGroup.children.length; i++) {
-                updateContainerChildrenY(this.rightBottomCornerGroup.children[i], 0);
-            }
+            });
+            this.leftBottomCornerGroup.forEachChildrenSkipChild((column) => {
+                updateContainerChildrenY(column, 0);
+            });
+            this.bottomFrozenGroup.forEachChildrenSkipChild((column) => {
+                updateContainerChildrenY(column, 0);
+            });
+            this.rightBottomCornerGroup.forEachChildrenSkipChild((column) => {
+                updateContainerChildrenY(column, 0);
+            });
         }
         updateContainer(updateConfig = { async: false, needUpdateCellY: false }) {
             if (updateConfig.async) {
@@ -65166,19 +65220,15 @@
             if (e.button !== 0) {
                 return;
             }
-            const endedResizeCol = stateManager.isResizeCol();
-            const endedResizeRow = stateManager.isResizeRow();
-            const endedMoveCol = stateManager.isMoveCol();
-            const shouldSkipClickCell = endedResizeCol || endedResizeRow;
             if (stateManager.interactionState === 'grabing') {
                 stateManager.updateInteractionState(InteractionState.default);
-                if (endedResizeCol) {
+                if (stateManager.isResizeCol()) {
                     endResizeCol(table);
                 }
-                else if (endedResizeRow) {
+                else if (stateManager.isResizeRow()) {
                     endResizeRow(table);
                 }
-                else if (endedMoveCol) {
+                else if (stateManager.isMoveCol()) {
                     const endMoveColSuccess = table.stateManager.endMoveCol();
                     fireMoveColEventListeners(table, endMoveColSuccess, e.nativeEvent);
                 }
@@ -65208,7 +65258,7 @@
             else if (stateManager.interactionState === InteractionState.scrolling) {
                 stateManager.updateInteractionState(InteractionState.default);
             }
-            if (!table.eventManager.isDraging && !shouldSkipClickCell) {
+            if (!table.eventManager.isDraging) {
                 const eventArgsSet = getEventArgsSet(e);
                 if (!eventManager.isTouchMove &&
                     e.button === 0 &&
@@ -72059,7 +72109,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.26.3";
+        version = "1.26.2";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -73914,7 +73964,9 @@
             internalProps.emptyTip = null;
             internalProps.layoutMap.release();
             clearChartRenderQueue();
-            this.scenegraph.clearCells();
+            if (!updateConfig?.skipClearCells) {
+                this.scenegraph.clearCells();
+            }
             this.scenegraph.updateComponent();
             this.stateManager.updateOptionSetState();
             this._updateSize();
@@ -80180,8 +80232,19 @@
             clearRowHeightCache: true
         }) {
             const internalProps = this.internalProps;
+            const prevSortState = internalProps.sortState;
+            const nextSortStates = Array.isArray(options.sortState)
+                ? options.sortState
+                : options.sortState
+                    ? [options.sortState]
+                    : [];
+            const hasActiveSortState = nextSortStates.some(item => item?.field && item?.order && item.order !== 'normal');
+            const shouldSkipInitialClearCells = Boolean(options.records) || (!!options.dataSource && this.dataSource !== options.dataSource);
             this.pluginManager.removeOrAddPlugins(options.plugins);
-            super.updateOption(options, updateConfig);
+            super.updateOption(options, {
+                ...updateConfig,
+                skipClearCells: shouldSkipInitialClearCells
+            });
             internalProps.frozenColDragHeaderMode =
                 options.dragOrder?.frozenColDragHeaderMode ?? options.frozenColDragHeaderMode;
             this.pagination = options.pagination;
@@ -80219,6 +80282,13 @@
             if (options.dataSource && this.dataSource !== options.dataSource) {
                 this.dataSource = options.dataSource;
             }
+            else if (options.records &&
+                options.records === internalProps.records &&
+                options.sortState === prevSortState &&
+                !hasActiveSortState &&
+                this.dataSource instanceof CachedDataSource) {
+                this._refreshCurrentRecordsForOptionUpdate(options.records);
+            }
             else if (options.records) {
                 this.setRecords(options.records, {
                     sortState: options.sortState
@@ -80253,6 +80323,34 @@
                 setTimeout(resolve, 0);
             });
         }
+        _refreshCurrentRecordsForOptionUpdate(records) {
+            const dataSource = this.dataSource;
+            this.stateManager.endResizeIfResizing();
+            clearChartRenderQueue();
+            const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row };
+            this.scenegraph.clearCells();
+            this.internalProps.records = records;
+            dataSource.refreshRecords(records, this.internalProps.dataConfig, this.pagination, this.internalProps.columns, getListTableRowHierarchyType(this), getHierarchyExpandLevel(this));
+            this.refreshRowColCount();
+            this.stateManager.initCheckedState(records);
+            this.clearCellStyleCache();
+            this.scenegraph.createSceneGraph();
+            this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
+            this._updateSize();
+            const layoutOrder = this.options.componentLayoutOrder ?? ['legend', 'title'];
+            layoutOrder.forEach(component => {
+                if (component === 'legend') {
+                    this.internalProps.legends?.forEach(legend => {
+                        legend?.resize();
+                    });
+                }
+                else if (component === 'title') {
+                    this.internalProps.title?.resize();
+                }
+            });
+            this.scenegraph.resize();
+            this.render();
+        }
         updatePagination(pagination) {
             if (this.pagination) {
                 typeof pagination.currentPage === 'number' &&
@@ -86277,8 +86375,8 @@
         }
     }
 
-    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync) {
-        const headerStyle = table._getCellStyle(col, row);
+    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range, isAsync, headerStyle) {
+        headerStyle = headerStyle || table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
         if (isValid$1(functionalPadding)) {
             padding = functionalPadding;
@@ -96723,7 +96821,7 @@
     }
 
     registerForVrender();
-    const version = "1.26.3";
+    const version = "1.26.2";
     function getIcons() {
         return get$2();
     }