@visactor/vtable 0.22.0 → 0.22.2-alpha.0

package/dist/vtable.js

@@ -21687,6 +21687,7 @@
         _padding;
         _defaultPadding = [10, 16, 10, 16];
         _textStick;
+        _textStickBaseOnAlign;
         _textOverflow;
         _textAlign;
         _textBaseline;
@@ -21725,6 +21726,7 @@
             this._borderColor = style?.borderColor ?? bodyStyle?.borderColor;
             this._textOverflow = style?.textOverflow ?? bodyStyle?.textOverflow;
             this._textStick = style.textStick ?? bodyStyle?.textStick ?? false;
+            this._textStickBaseOnAlign = style.textStickBaseOnAlign ?? bodyStyle?.textStickBaseOnAlign ?? false;
             this._bgColor = style?.bgColor ?? bodyStyle?.bgColor;
             this._lineHeight = style?.lineHeight ?? bodyStyle?.lineHeight;
             this._underline = style?.underline ?? bodyStyle?.underline;
@@ -21806,6 +21808,12 @@
         set textStick(textStick) {
             this._textStick = textStick;
         }
+        get textStickBaseOnAlign() {
+            return this._textStickBaseOnAlign;
+        }
+        set textStickBaseOnAlign(textStickBaseOnAlign) {
+            this._textStickBaseOnAlign = textStickBaseOnAlign;
+        }
         get textAlign() {
             return this._textAlign;
         }
@@ -22089,6 +22097,7 @@
         _padding;
         _defaultPadding = [10, 16, 10, 16];
         _textStick;
+        _textStickBaseOnAlign;
         _marked;
         _textAlign;
         _textBaseline;
@@ -22122,6 +22131,7 @@
             this._fontStyle = style.fontStyle ?? headerStyle?.fontStyle;
             this._textOverflow = (style.textOverflow ?? headerStyle?.textOverflow) || 'ellipsis';
             this._textStick = style.textStick ?? headerStyle?.textStick ?? false;
+            this._textStickBaseOnAlign = style.textStickBaseOnAlign ?? headerStyle?.textStickBaseOnAlign ?? false;
             this._marked = style.marked ?? headerStyle?.marked ?? false;
             this._textAlign = (style.textAlign ?? headerStyle?.textAlign) || 'left';
             this._textBaseline = (style.textBaseline ?? headerStyle?.textBaseline) || 'middle';
@@ -22207,6 +22217,12 @@
         set textStick(textStick) {
             this._textStick = textStick;
         }
+        get textStickBaseOnAlign() {
+            return this._textStickBaseOnAlign;
+        }
+        set textStickBaseOnAlign(textStickBaseOnAlign) {
+            this._textStickBaseOnAlign = textStickBaseOnAlign;
+        }
         get marked() {
             return this._marked;
         }
@@ -33851,11 +33867,20 @@
                 if (typeof field === 'string' || typeof field === 'number') {
                     const beforeChangedValue = this.beforeChangedRecordsMap[dataIndex][field];
                     const record = this.getOriginalRecord(dataIndex);
+                    let formatValue = value;
                     if (typeof beforeChangedValue === 'number' && isAllDigits(value)) {
-                        record[field] = parseFloat(value);
+                        formatValue = parseFloat(value);
+                    }
+                    if (isPromise(record)) {
+                        record
+                            .then(record => {
+                            record[field] = formatValue;
+                        })
+                            .catch((err) => {
+                        });
                     }
                     else {
-                        record[field] = value;
+                        record[field] = formatValue;
                     }
                 }
             }
@@ -35475,7 +35500,9 @@
         });
     }
     function decodeReactDom(dom) {
-        if (!dom || !dom.$$typeof) {
+        if (!dom ||
+            (!isValid$3(dom.$$typeof) &&
+                !isValid$3(dom.vtype))) {
             return dom;
         }
         const type = dom.type;
@@ -36448,9 +36475,13 @@
         const height = table.getRowHeight(row);
         let contentWidth = width;
         let contentHeight = height;
+        let _contentOffset = 0;
+        if (isNumber$4(table.theme._contentOffset)) {
+            _contentOffset = table.theme._contentOffset;
+        }
         const percentCompleteBarGroup = new Group$1({
-            x: 0,
-            y: 0,
+            x: -_contentOffset,
+            y: -_contentOffset,
             width: contentWidth,
             height: contentHeight
         });
@@ -37779,7 +37810,7 @@
         }
         iconAttribute.marginLeft = (icon.marginLeft ?? 0) + hierarchyOffset;
         iconAttribute.marginRight = icon.marginRight ?? 0;
-        if (icon.interactive) {
+        if (icon.interactive === false) {
             iconAttribute.pickable = false;
         }
         if (icon.hover) {
@@ -38347,16 +38378,6 @@
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
-        let bgColorFunc;
-        if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
-            table.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
-                if (mappingRule.bgColor &&
-                    table.internalProps.layoutMap.getIndicatorKey(col, row) ===
-                        mappingRule.bgColor.indicatorKey) {
-                    bgColorFunc = mappingRule.bgColor.mapping;
-                }
-            });
-        }
         let cellGroup;
         if (type === 'text' || type === 'link') {
             if (type === 'link') {
@@ -38382,22 +38403,6 @@
                     }
                 }
             }
-            if (bgColorFunc) {
-                const cellValue = table.getCellOriginValue(col, row);
-                const bgColor = bgColorFunc(table, cellValue);
-                if (bgColor) {
-                    if (cellTheme) {
-                        cellTheme.group.fill = bgColor;
-                    }
-                    else {
-                        cellTheme = {
-                            group: {
-                                fill: bgColor
-                            }
-                        };
-                    }
-                }
-            }
             let customElementsGroup;
             let renderDefault = true;
             if (customResult) {
@@ -38601,16 +38606,6 @@
         const textAlign = cellTheme.text.textAlign;
         const textBaseline = cellTheme.text.textBaseline;
         let newCellGroup;
-        let bgColorFunc;
-        if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
-            table.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
-                if (mappingRule.bgColor &&
-                    table.internalProps.layoutMap.getIndicatorKey(col, row) ===
-                        mappingRule.bgColor.indicatorKey) {
-                    bgColorFunc = mappingRule.bgColor.mapping;
-                }
-            });
-        }
         let cellWidth;
         let cellHeight;
         if (range) {
@@ -38623,10 +38618,10 @@
         }
         if (isPromise(value)) {
             oldCellGroup.removeAllChild();
-            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult));
+            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult));
         }
         else {
-            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
+            newCellGroup = updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
         }
         if (isMerge) {
             const { width: contentWidth } = newCellGroup.attribute;
@@ -38637,7 +38632,7 @@
         }
         return newCellGroup;
     }
-    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
+    function updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
@@ -38676,10 +38671,10 @@
         for (let col = range.start.col; col <= range.end.col; col++) {
             for (let row = range.start.row; row <= range.end.row; row++) {
                 const cellGroup = table.scenegraph.getCell(col, row, true);
-                if (range.start.row !== range.end.row) {
+                if (cellGroup.role === 'cell' && range.start.row !== range.end.row && cellGroup.contentWidth !== cellWidth) {
                     updateCellContentHeight(cellGroup, cellHeight, cellHeight, table.heightMode === 'autoHeight', padding, textAlign, textBaseline);
                 }
-                if (range.start.col !== range.end.col) {
+                if (cellGroup.role === 'cell' && range.start.col !== range.end.col && cellGroup.contentHeight !== cellHeight) {
                     updateCellContentWidth(cellGroup, cellWidth, cellHeight, 0, table.heightMode === 'autoHeight', padding, textAlign, textBaseline, table.scenegraph);
                 }
                 cellGroup.contentWidth = cellWidth;
@@ -38718,7 +38713,7 @@
                 });
             }
         });
-        const lineWidth = cellGroup.attribute.lineWidth;
+        const lineWidth = cellGroup.attribute.strokeArrayWidth ?? cellGroup.attribute.lineWidth;
         const isLineWidthArray = isArray$3(lineWidth);
         const newLineWidth = [0, 0, 0, 0];
         if (col === range.start.col) {
@@ -39937,7 +39932,7 @@
         }
     }
     function computeRowHeight(row, startCol, endCol, table) {
-        let maxHeight = 0;
+        let maxHeight;
         if (table.isPivotChart() &&
             row >= table.columnHeaderLevelCount &&
             row < table.rowCount - table.bottomFrozenRowCount) {
@@ -39957,7 +39952,7 @@
         for (let col = startCol; col <= endCol; col++) {
             const customHeight = computeCustomRenderHeight(col, row, table);
             if (customHeight) {
-                maxHeight = Math.max(customHeight.height, maxHeight);
+                maxHeight = isValid$3(maxHeight) ? Math.max(customHeight.height, maxHeight) : customHeight.height;
                 if (!customHeight.renderDefault) {
                     continue;
                 }
@@ -39968,7 +39963,7 @@
                 if (axisConfig) {
                     const axisWidth = computeAxisComponentHeight(axisConfig, table);
                     if (typeof axisWidth === 'number') {
-                        maxHeight = Math.max(axisWidth, maxHeight);
+                        maxHeight = isValid$3(maxHeight) ? Math.max(axisWidth, maxHeight) : axisWidth;
                         continue;
                     }
                 }
@@ -39981,19 +39976,14 @@
             const cellType = table.isHeader(col, row)
                 ? table._getHeaderLayoutMap(col, row)?.headerType
                 : table.getBodyColumnType(col, row);
-            if (isValid$3(cellType) &&
-                cellType !== 'text' &&
-                cellType !== 'link' &&
-                cellType !== 'progressbar' &&
-                cellType !== 'checkbox') {
-                const defaultHeight = table.getDefaultRowHeight(row);
-                maxHeight = Math.max(maxHeight, isNumber$4(defaultHeight) ? defaultHeight : table.defaultRowHeight);
-                continue;
-            }
             const textHeight = computeTextHeight(col, row, cellType, table);
-            maxHeight = Math.max(textHeight, maxHeight);
+            maxHeight = isValid$3(maxHeight) ? Math.max(textHeight, maxHeight) : textHeight;
+        }
+        if (isValid$3(maxHeight)) {
+            return maxHeight;
         }
-        return maxHeight;
+        const defaultHeight = table.getDefaultRowHeight(row);
+        return isNumber$4(defaultHeight) ? defaultHeight : table.defaultRowHeight;
     }
     function checkFixedStyleAndNoWrap(table) {
         const { layoutMap } = table.internalProps;
@@ -40189,87 +40179,92 @@
         const fontFamily = getProp('fontFamily', actStyle, col, row, table);
         const autoWrapText = getProp('autoWrapText', actStyle, col, row, table);
         let text;
-        if (cellType === 'checkbox') {
-            text = isObject$4(cellValue) ? cellValue.text : cellValue;
+        if (cellType !== 'text' && cellType !== 'link' && cellType !== 'progressbar' && cellType !== 'checkbox') {
+            maxHeight = lineHeight;
         }
         else {
-            text = cellValue;
-        }
-        const lines = validToString(text).split('\n') || [];
-        const cellWidth = table.getColsWidth(col, endCol);
-        if (cellType === 'checkbox') {
-            const size = getProp('size', actStyle, col, row, table);
-            if (autoWrapText) {
-                const spaceBetweenTextAndIcon = getProp('spaceBetweenTextAndIcon', actStyle, col, row, table);
-                const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth - size - spaceBetweenTextAndIcon;
-                utilCheckBoxMark.setAttributes({
-                    text: {
-                        maxLineWidth,
-                        text: lines,
-                        fontSize,
-                        fontStyle,
-                        fontWeight,
-                        fontFamily,
-                        lineHeight,
-                        wordBreak: 'break-word'
-                    },
-                    icon: {
-                        width: Math.floor(size / 1.4),
-                        height: Math.floor(size / 1.4)
-                    },
-                    box: {
-                        width: size,
-                        height: size
-                    },
-                    spaceBetweenTextAndIcon
+            if (cellType === 'checkbox') {
+                text = isObject$4(cellValue) ? cellValue.text : cellValue;
+            }
+            else {
+                text = cellValue;
+            }
+            const lines = validToString(text).split('\n') || [];
+            const cellWidth = table.getColsWidth(col, endCol);
+            if (cellType === 'checkbox') {
+                const size = getProp('size', actStyle, col, row, table);
+                if (autoWrapText) {
+                    const spaceBetweenTextAndIcon = getProp('spaceBetweenTextAndIcon', actStyle, col, row, table);
+                    const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth - size - spaceBetweenTextAndIcon;
+                    utilCheckBoxMark.setAttributes({
+                        text: {
+                            maxLineWidth,
+                            text: lines,
+                            fontSize,
+                            fontStyle,
+                            fontWeight,
+                            fontFamily,
+                            lineHeight,
+                            wordBreak: 'break-word'
+                        },
+                        icon: {
+                            width: Math.floor(size / 1.4),
+                            height: Math.floor(size / 1.4)
+                        },
+                        box: {
+                            width: size,
+                            height: size
+                        },
+                        spaceBetweenTextAndIcon
+                    });
+                    utilCheckBoxMark.render();
+                    maxHeight = utilTextMark.AABBBounds.height();
+                }
+                else {
+                    maxHeight = Math.max(size, lines.length * lineHeight);
+                }
+            }
+            else if (iconInlineFront.length || iconInlineEnd.length) {
+                const textOption = Object.assign({
+                    text: cellValue?.toString(),
+                    fontFamily,
+                    fontSize,
+                    fontStyle,
+                    fontWeight,
+                    lineHeight
                 });
-                utilCheckBoxMark.render();
-                maxHeight = utilTextMark.AABBBounds.height();
+                textOption.textBaseline = 'middle';
+                const textConfig = [
+                    ...iconInlineFront.map(icon => dealWithRichTextIcon(icon)),
+                    textOption,
+                    ...iconInlineEnd.map(icon => dealWithRichTextIcon(icon))
+                ];
+                utilRichTextMark.setAttributes({
+                    width: cellWidth - (padding[1] + padding[3]) - iconWidth,
+                    height: 0,
+                    textConfig
+                });
+                maxHeight = utilRichTextMark.AABBBounds.height();
+            }
+            else if (autoWrapText) {
+                const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth;
+                utilTextMark.setAttributes({
+                    maxLineWidth,
+                    text: lines,
+                    fontSize,
+                    fontStyle,
+                    fontWeight,
+                    fontFamily,
+                    lineHeight,
+                    wordBreak: 'break-word',
+                    whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
+                });
+                maxHeight = utilTextMark.AABBBounds.height() || (typeof lineHeight === 'number' ? lineHeight : fontSize);
             }
             else {
-                maxHeight = Math.max(size, lines.length * lineHeight);
+                maxHeight = lines.length * lineHeight;
             }
         }
-        else if (iconInlineFront.length || iconInlineEnd.length) {
-            const textOption = Object.assign({
-                text: cellValue?.toString(),
-                fontFamily,
-                fontSize,
-                fontStyle,
-                fontWeight,
-                lineHeight
-            });
-            textOption.textBaseline = 'middle';
-            const textConfig = [
-                ...iconInlineFront.map(icon => dealWithRichTextIcon(icon)),
-                textOption,
-                ...iconInlineEnd.map(icon => dealWithRichTextIcon(icon))
-            ];
-            utilRichTextMark.setAttributes({
-                width: cellWidth - (padding[1] + padding[3]) - iconWidth,
-                height: 0,
-                textConfig
-            });
-            maxHeight = utilRichTextMark.AABBBounds.height();
-        }
-        else if (autoWrapText) {
-            const maxLineWidth = cellWidth - (padding[1] + padding[3]) - iconWidth;
-            utilTextMark.setAttributes({
-                maxLineWidth,
-                text: lines,
-                fontSize,
-                fontStyle,
-                fontWeight,
-                fontFamily,
-                lineHeight,
-                wordBreak: 'break-word',
-                whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
-            });
-            maxHeight = utilTextMark.AABBBounds.height() || (typeof lineHeight === 'number' ? lineHeight : fontSize);
-        }
-        else {
-            maxHeight = lines.length * lineHeight;
-        }
         return (Math.max(maxHeight, iconHeight) + padding[0] + padding[2]) / spanRow;
     }
     function getCellRect$1(col, row, table) {
@@ -40420,7 +40415,13 @@
                     if (customLayout || customRender) {
                         const style = scene.table._getCellStyle(col, row);
                         const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
-                        const customResult = dealWithCustom(customLayout, customRender, col, row, cell.attribute.width, cell.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
+                        let width = cell.attribute.width;
+                        let height = cell.attribute.height;
+                        if (isMergeCellGroup(cell)) {
+                            width = scene.table.getColsWidth(cell.mergeStartCol, cell.mergeEndCol);
+                            height = scene.table.getRowsHeight(cell.mergeStartRow, cell.mergeEndRow);
+                        }
+                        const customResult = dealWithCustom(customLayout, customRender, col, row, width, height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
                         customElementsGroup = customResult.elementsGroup;
                         renderDefault = customResult.renderDefault;
                     }
@@ -40432,13 +40433,10 @@
                     }
                 }
             }
-            if (renderDefault) {
-                const style = scene.table._getCellStyle(col, row);
-                updateMergeCellContentHeight(cell, distHeight, detaY, scene.table.heightMode === 'autoHeight', getQuadProps(style.padding), style.textAlign, style.textBaseline, scene.table);
-            }
+            updateMergeCellContentHeight(cell, distHeight, detaY, scene.table.heightMode === 'autoHeight', renderDefault, scene.table);
         }
     }
-    function updateMergeCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, padding, textAlign, textBaseline, table) {
+    function updateMergeCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, renderDefault, table) {
         if (isMergeCellGroup(cellGroup)) {
             distHeight = 0;
             for (let row = cellGroup.mergeStartRow; row <= cellGroup.mergeEndRow; row++) {
@@ -40454,7 +40452,10 @@
                             dy: 0
                         });
                     });
-                    updateCellContentHeight(singleCellGroup, distHeight, detaY, autoRowHeight, padding, textAlign, textBaseline);
+                    if (renderDefault) {
+                        const style = table._getCellStyle(col, row);
+                        updateCellContentHeight(singleCellGroup, distHeight, detaY, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline);
+                    }
                     const rangeHeight = table.getRowHeight(row);
                     const rangeWidth = table.getColWidth(col);
                     singleCellGroup.contentHeight = distHeight;
@@ -40475,7 +40476,8 @@
             }
         }
         else {
-            updateCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, padding, textAlign, textBaseline);
+            const style = table._getCellStyle(cellGroup.col, cellGroup.row);
+            updateCellContentHeight(cellGroup, distHeight, detaY, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline);
         }
     }
 
@@ -40720,7 +40722,13 @@
                     if (customLayout || customRender) {
                         const style = scene.table._getCellStyle(col, row);
                         const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
-                        const customResult = dealWithCustom(customLayout, customRender, col, row, cellGroup.attribute.width, cellGroup.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
+                        let width = cellGroup.attribute.width;
+                        let height = cellGroup.attribute.height;
+                        if (isMergeCellGroup(cellGroup)) {
+                            width = scene.table.getColsWidth(cellGroup.mergeStartCol, cellGroup.mergeEndCol);
+                            height = scene.table.getRowsHeight(cellGroup.mergeStartRow, cellGroup.mergeEndRow);
+                        }
+                        const customResult = dealWithCustom(customLayout, customRender, col, row, width, height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
                         customElementsGroup = customResult.elementsGroup;
                         renderDefault = customResult.renderDefault;
                         isHeightChange = true;
@@ -40733,14 +40741,12 @@
                     }
                 }
             }
-            if (renderDefault) {
-                const style = scene.table._getCellStyle(col, row);
-                isHeightChange = updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, getQuadProps(style.padding), style.textAlign, style.textBaseline, scene.table);
-            }
+            const cellChange = updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, renderDefault, scene.table);
+            isHeightChange = isHeightChange || cellChange;
         }
         return autoRowHeight && autoWrapText ? isHeightChange : false;
     }
-    function updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, padding, textAlign, textBaseline, table) {
+    function updateMergeCellContentWidth(cellGroup, distWidth, detaX, autoRowHeight, renderDefault, table) {
         if (isMergeCellGroup(cellGroup)) {
             distWidth = 0;
             let isHeightChange = false;
@@ -40754,6 +40760,9 @@
             const { colStart, colEnd, rowStart, rowEnd } = getCellMergeRange(cellGroup, table.scenegraph);
             for (let col = colStart; col <= colEnd; col++) {
                 for (let row = rowStart; row <= rowEnd; row++) {
+                    if (col === cellGroup.col && row !== cellGroup.row) {
+                        continue;
+                    }
                     const singleCellGroup = table.scenegraph.getCell(col, row);
                     singleCellGroup.forEachChildren((child) => {
                         child.setAttributes({
@@ -40761,13 +40770,20 @@
                             dy: 0
                         });
                     });
-                    const changed = updateCellContentWidth(singleCellGroup, distWidth, cellHeight, detaX, autoRowHeight, padding, textAlign, textBaseline, table.scenegraph);
-                    const hierarchyOffset = getHierarchyOffset(singleCellGroup.col, singleCellGroup.row, table);
-                    if (hierarchyOffset) {
-                        const text = singleCellGroup.getChildByName('text');
-                        const icon = singleCellGroup.getChildByName('expand') || singleCellGroup.getChildByName('collapse');
-                        if (icon?.role !== 'icon-left' && text) {
-                            text.setAttribute('dx', hierarchyOffset);
+                    let changed = false;
+                    if (renderDefault) {
+                        const style = table._getCellStyle(col, row);
+                        const padding = getQuadProps(style.padding);
+                        const textAlign = style.textAlign;
+                        const textBaseline = style.textBaseline;
+                        changed = updateCellContentWidth(singleCellGroup, distWidth, cellHeight, detaX, autoRowHeight, padding, textAlign, textBaseline, table.scenegraph);
+                        const hierarchyOffset = getHierarchyOffset(singleCellGroup.col, singleCellGroup.row, table);
+                        if (hierarchyOffset) {
+                            const text = singleCellGroup.getChildByName('text');
+                            const icon = singleCellGroup.getChildByName('expand') || singleCellGroup.getChildByName('collapse');
+                            if (icon?.role !== 'icon-left' && text) {
+                                text.setAttribute('dx', hierarchyOffset);
+                            }
                         }
                     }
                     const rangeHeight = table.getRowHeight(row);
@@ -40791,6 +40807,10 @@
             }
             return isHeightChange;
         }
+        const style = table._getCellStyle(cellGroup.col, cellGroup.row);
+        const padding = getQuadProps(style.padding);
+        const textAlign = style.textAlign;
+        const textBaseline = style.textBaseline;
         return updateCellContentWidth(cellGroup, distWidth, table.getRowHeight(cellGroup.row), detaX, autoRowHeight, padding, textAlign, textBaseline, table.scenegraph);
     }
     function resetRowHeight(scene, row) {
@@ -43057,6 +43077,7 @@
     }
 
     let customAlphabetCharSet = '';
+    let textMeasureMode = 'quick';
     const textMeasureModule = new ContainerModule((bind, unbind, isBound, rebind) => {
         if (isBound(TextMeasureContribution)) {
             rebind(TextMeasureContribution).to(FastTextMeasureContribution).inSingletonScope();
@@ -43104,13 +43125,13 @@
         measureTextWidth(text, options) {
             const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
             const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
+            const textMeasure = fastTextMeasure.measure(text, textMeasureMode);
             return textMeasure.width;
         }
         measureText(text, options) {
             const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
             const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
+            const textMeasure = fastTextMeasure.measure(text, textMeasureMode);
             return textMeasure;
         }
     }
@@ -43118,13 +43139,13 @@
         measureText(text, options) {
             const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
             const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
+            const textMeasure = fastTextMeasure.measure(text, textMeasureMode);
             return textMeasure;
         }
         measureTextWidth(text, options) {
             const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options;
             const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle);
-            const textMeasure = fastTextMeasure.measure(text);
+            const textMeasure = fastTextMeasure.measure(text, textMeasureMode);
             return textMeasure.width;
         }
         clipText(text, options, width) {
@@ -43198,6 +43219,7 @@
         fastTextMeasureCache.clear();
     }
     function restoreMeasureText() {
+        textMeasureMode = 'canvas';
         container.load(restoreTextMeasureModule);
     }
 
@@ -43582,8 +43604,9 @@
                 if (customLayoutObj.rootContainer instanceof Group$2) {
                     customLayoutObj.rootContainer = decodeReactDom(customLayoutObj.rootContainer);
                     dealPercentCalc(customLayoutObj.rootContainer, 0, table.getRowHeight(row));
+                    const setedWidth = customLayoutObj.rootContainer.attribute.width;
                     customLayoutObj.rootContainer.setStage(table.scenegraph.stage);
-                    width = customLayoutObj.rootContainer.AABBBounds.width() ?? 0;
+                    width = setedWidth > 0 ? setedWidth : customLayoutObj.rootContainer.AABBBounds.width() ?? 0;
                     renderDefault = customLayoutObj.renderDefault;
                     enableCellPadding = customLayoutObj.enableCellPadding;
                 }
@@ -43836,12 +43859,12 @@
                 columnGroup.updateColumnRowNumber(row);
                 if (isMerge) {
                     const rangeHeight = table.getRowHeight(row);
-                    const rangeWidth = table.getColWidth(col);
+                    table.getColWidth(col);
                     const { width: contentWidth } = cellGroup.attribute;
                     const { height: contentHeight } = cellGroup.attribute;
                     cellGroup.contentWidth = contentWidth;
                     cellGroup.contentHeight = contentHeight;
-                    resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table);
+                    dealWithMergeCellSize(range, contentWidth, contentHeight, padding, textAlign, textBaseline, table);
                     columnGroup.updateColumnHeight(rangeHeight);
                     y += rangeHeight;
                 }
@@ -43922,7 +43945,8 @@
         proxy.setParamsForColumn();
         let distCol;
         let distRow;
-        if (table.widthMode === 'adaptive') {
+        if (table.widthMode === 'adaptive' ||
+            (table.options.autoWrapText && (table.heightMode === 'adaptive' || table.heightMode === 'autoHeight'))) {
             distCol = table.colCount - 1;
         }
         else {
@@ -44877,7 +44901,7 @@
             computeColsWidth(this.table, this.currentCol + 1, endCol);
             for (let row = 0; row < this.table.rowCount; row++) {
                 const cellGroup = this.highPerformanceGetCell(this.currentCol, row);
-                if (isNumber$4(cellGroup.mergeStartCol) && cellGroup.mergeStartCol > this.currentCol) {
+                if (cellGroup.role === 'cell' && isNumber$4(cellGroup.mergeStartCol) && cellGroup.mergeStartCol > this.currentCol) {
                     this.table.scenegraph.updateCellContent(cellGroup.col, cellGroup.row);
                 }
             }
@@ -45615,6 +45639,22 @@
             scene.createCellSelectBorder(columnHeaderStartCol, columnHeaderStartRow, columnHeaderEndCol, columnHeaderEndRow, 'body', `${startCol}${startRow}${endCol}${endRow}`, strokeArray);
         }
     }
+    function hideCellSelectBorder(scene) {
+        scene.selectingRangeComponents.forEach((selectComp, key) => {
+            selectComp.rect.setAttribute('visible', false);
+        });
+        scene.selectedRangeComponents.forEach((selectComp, key) => {
+            selectComp.rect.setAttribute('visible', false);
+        });
+    }
+    function restoreCellSelectBorder(scene) {
+        scene.selectingRangeComponents.forEach((selectComp, key) => {
+            selectComp.rect.setAttribute('visible', false);
+        });
+        scene.selectedRangeComponents.forEach((selectComp, key) => {
+            selectComp.rect.setAttribute('visible', false);
+        });
+    }
 
     function createCellSelectBorder(scene, start_Col, start_Row, end_Col, end_Row, selectRangeType, selectId, strokes) {
         const startCol = Math.min(start_Col, end_Col);
@@ -52121,6 +52161,7 @@
                     const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
                     if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
                         this.table.scenegraph.updateAutoColWidth(resizeCol.col);
+                        this.table.internalProps._widthResizedColMap.add(resizeCol.col);
                         this.table.scenegraph.updateChartSize(resizeCol.col);
                         const state = this.table.stateManager;
                         if (state.columnResize.col < state.table.frozenColCount &&
@@ -55504,7 +55545,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.22.0";
+        version = "0.22.2-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -57281,6 +57322,16 @@
                 }
                 return cacheStyle;
             }
+            let bgColorFunc;
+            if (this.internalProps?.dataConfig?.mappingRules && !this.isHeader(col, row)) {
+                this.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
+                    if (mappingRule.bgColor &&
+                        this.internalProps.layoutMap.getIndicatorKey(col, row) ===
+                            mappingRule.bgColor.indicatorKey) {
+                        bgColorFunc = mappingRule.bgColor.mapping;
+                    }
+                });
+            }
             let cacheKey;
             const cellType = this.getCellType(col, row);
             if (this.isSeriesNumberInBody(col, row)) {
@@ -57321,6 +57372,9 @@
                 dataValue: this.getCellOriginValue(col, row),
                 cellHeaderPaths: this.getCellHeaderPaths(col, row)
             }, styleClass, this.options.autoWrapText, this.theme);
+            if (bgColorFunc) {
+                cacheStyle = mergeStyle(cacheStyle, { bgColor: bgColorFunc });
+            }
             if (!isFunction$3(style)) {
                 if (layoutMap.isBottomFrozenRow(row)) {
                     this.bodyBottomStyleCache.set(cacheKey, cacheStyle);
@@ -57625,7 +57679,7 @@
                                     const copyCellValue = getCopyCellValue(c, r, range);
                                     if (typeof Promise !== 'undefined' && copyCellValue instanceof Promise) ;
                                     else {
-                                        const strCellValue = `${copyCellValue}`;
+                                        const strCellValue = isValid$3(copyCellValue) ? `${copyCellValue}` : '';
                                         if (/^\[object .*\]$/.exec(strCellValue)) ;
                                         else {
                                             copyValue += strCellValue;
@@ -57750,13 +57804,23 @@
             return customLayout;
         }
         hasAutoImageColumn() {
-            return this.internalProps.layoutMap.columnObjects.find((column) => {
-                if ((column.cellType === 'image' || typeof column.cellType === 'function') &&
+            const bodyColumn = this.internalProps.layoutMap.columnObjects.find((column) => {
+                if ((column.cellType === 'image' || column.cellType === 'video' || typeof column.cellType === 'function') &&
                     column.define.imageAutoSizing) {
                     return true;
                 }
                 return false;
             });
+            const headerObj = this.internalProps.layoutMap.headerObjects.find((column) => {
+                if (column) {
+                    if ((column.headerType === 'image' || column.headerType === 'video' || typeof column.headerType === 'function') &&
+                        column.define.imageAutoSizing) {
+                        return true;
+                    }
+                }
+                return false;
+            });
+            return bodyColumn || headerObj;
         }
         _getActiveChartInstance() {
             const cellGroup = this.scenegraph.getCell(this.stateManager.hover?.cellPos?.col, this.stateManager.hover?.cellPos?.row);
@@ -57799,11 +57863,20 @@
                 this.scrollToCell({ col, row });
             }
             const cellRect = this.getCellRelativeRect(col, row);
+            if (this.stateManager.select?.ranges?.length > 0) {
+                hideCellSelectBorder(this.scenegraph);
+            }
+            const { col: hoverCol, row: hoverRow } = this.stateManager.hover.cellPos;
+            this.stateManager.updateHoverPos(-1, -1);
             const c = this.scenegraph.stage.toCanvas(false, new AABBBounds$1().set(cellRect.left + this.tableX + 1, cellRect.top + this.tableY + 1, cellRect.right + this.tableX, cellRect.bottom + this.tableY));
             if (!isInView) {
                 this.setScrollTop(scrollTop);
                 this.setScrollLeft(scrollLeft);
             }
+            if (this.stateManager.select?.ranges?.length > 0) {
+                restoreCellSelectBorder(this.scenegraph);
+            }
+            this.stateManager.updateHoverPos(hoverCol, hoverRow);
             return c.toDataURL();
         }
         exportCellRangeImg(cellRange) {
@@ -63362,7 +63435,7 @@
                                     dimension.indicatorKey === rowDimension.indicatorKey &&
                                     (!rowDimension.value || dimension.value === rowDimension.value))) {
                                 rowArr = dimension.children;
-                                if (needLowestLevel && !rowArr) {
+                                if (needLowestLevel && (!rowArr || rowArr.some(row => row.dimensionKey === 'axis'))) {
                                     rowDimensionFinded = dimension;
                                 }
                                 else if (!needLowestLevel) {
@@ -67563,7 +67636,7 @@
     }
 
     registerForVrender();
-    const version = "0.22.0";
+    const version = "0.22.2-alpha.0";
     function getIcons() {
         return get$2();
     }