@visactor/vtable 0.20.0 → 0.20.1-alpha.0

package/dist/vtable.js

@@ -31520,7 +31520,7 @@
         userPagination;
         pagination;
         _currentPagerIndexedData;
-        enableHierarchyState = false;
+        hierarchyExpandLevel = 0;
         static get EVENT_TYPE() {
             return EVENT_TYPE;
         }
@@ -31547,29 +31547,32 @@
                 currentPage: 0
             };
             if (hierarchyExpandLevel >= 1) {
-                this.enableHierarchyState = true;
+                this.hierarchyExpandLevel = hierarchyExpandLevel;
             }
             this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i);
-            if (this.enableHierarchyState) {
+            this.initTreeHierarchyState();
+            this.updatePagerData();
+        }
+        initTreeHierarchyState() {
+            if (this.hierarchyExpandLevel) {
+                this.treeDataHierarchyState = new Map();
                 for (let i = 0; i < this._sourceLength; i++) {
                     const nodeData = this.getOriginalRecord(i);
                     nodeData.children && this.treeDataHierarchyState.set(i, HierarchyState.collapse);
                 }
-            }
-            if (hierarchyExpandLevel > 1) {
+                this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i);
                 let nodeLength = this._sourceLength;
                 for (let i = 0; i < nodeLength; i++) {
                     const indexKey = this.currentIndexedData[i];
                     const nodeData = this.getOriginalRecord(indexKey);
                     if (nodeData.children?.length > 0) {
                         this.treeDataHierarchyState.set(Array.isArray(indexKey) ? indexKey.join(',') : indexKey, HierarchyState.expand);
-                        const childrenLength = this.initChildrenNodeHierarchy(indexKey, hierarchyExpandLevel, 2, nodeData);
+                        const childrenLength = this.initChildrenNodeHierarchy(indexKey, this.hierarchyExpandLevel, 2, nodeData);
                         i += childrenLength;
                         nodeLength += childrenLength;
                     }
                 }
             }
-            this.updatePagerData();
         }
         registerAggregator(type, aggregator) {
             this.registedAggregators[type] = aggregator;
@@ -31710,6 +31713,9 @@
             return _getIndex(this.currentPagerIndexedData, index);
         }
         getTableIndex(colOrRow) {
+            if (Array.isArray(colOrRow)) {
+                return this.currentPagerIndexedData.findIndex(value => arrayEqual(value, colOrRow));
+            }
             return this.currentPagerIndexedData.findIndex(value => value === colOrRow);
         }
         getField(index, field, col, row, table) {
@@ -31825,6 +31831,7 @@
             this.source.splice(index, 0, record);
             this.currentIndexedData.push(this.currentIndexedData.length);
             this._sourceLength += 1;
+            this.initTreeHierarchyState();
             if (this.userPagination) {
                 this.pagination.totalCount = this._sourceLength;
                 const { perPageCount, currentPage } = this.pagination;
@@ -31985,7 +31992,7 @@
                 }, this._sourceLength, orderFn, order, index => this.getOriginalField(index, field));
             }
             this.currentIndexedData = sortedIndexArray;
-            if (this.enableHierarchyState) {
+            if (this.hierarchyExpandLevel) {
                 let nodeLength = sortedIndexArray.length;
                 window.performance.now();
                 for (let i = 0; i < nodeLength; i++) {
@@ -32691,7 +32698,7 @@
         fn(table);
         table.internalProps.dataSourceEventIds = [
             table.internalProps.handler.on(table.internalProps.dataSource, DataSource.EVENT_TYPE.CHANGE_ORDER, () => {
-                if (table.dataSource.enableHierarchyState) {
+                if (table.dataSource.hierarchyExpandLevel) {
                     table.refreshRowColCount();
                 }
                 table.render();
@@ -32946,476 +32953,363 @@
         }
     };
 
-    function getProp(name, cellStyle, col, row, _table) {
-        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
-        if (typeof prop === 'function') {
+    function dealWithCustom(customLayout, customRender, col, row, width, height, autoWidth, autoHeight, padding, table) {
+        let renderDefault = true;
+        let enableCellPadding = false;
+        let expectedWidth;
+        let expectedHeight;
+        let customElements;
+        let elementsGroup;
+        if (typeof customLayout === 'function') {
             const arg = {
                 col,
                 row,
-                table: _table,
-                value: _table.getCellValue(col, row),
-                dataValue: _table.getCellOriginValue(col, row),
-                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
+                dataValue: table.getCellOriginValue(col, row),
+                value: table.getCellValue(col, row) || '',
+                rect: {
+                    left: 0,
+                    top: 0,
+                    right: width,
+                    bottom: height,
+                    width,
+                    height
+                },
+                table
             };
-            return prop(arg);
+            const customRenderObj = customLayout(arg);
+            if (customRenderObj.rootContainer) {
+                customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer);
+            }
+            if (customRenderObj.rootContainer instanceof Group$2) {
+                elementsGroup = customRenderObj.rootContainer;
+                elementsGroup.name = 'custom-container';
+            }
+            renderDefault = customRenderObj.renderDefault;
+            enableCellPadding = customRenderObj.enableCellPadding;
         }
-        return prop;
-    }
-    function getFunctionalProp(name, cellStyle, col, row, _table) {
-        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
-        if (typeof prop === 'function') {
+        else if (typeof customRender === 'function') {
             const arg = {
                 col,
                 row,
-                table: _table,
-                value: _table.getCellValue(col, row),
-                dataValue: _table.getCellOriginValue(col, row),
-                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
+                dataValue: table.getCellOriginValue(col, row),
+                value: table.getCellValue(col, row) || '',
+                rect: {
+                    left: 0,
+                    top: 0,
+                    right: width,
+                    bottom: height,
+                    width,
+                    height
+                },
+                table
             };
-            return prop(arg);
-        }
-        return undefined;
-    }
-
-    let Group$1 = class Group extends Group$2 {
-        role;
-        col;
-        row;
-        mergeStartCol;
-        mergeStartRow;
-        mergeEndCol;
-        mergeEndRow;
-        contentWidth;
-        contentHeight;
-        rowNumber;
-        colHeight;
-        border;
-        needUpdate;
-        needUpdateWidth;
-        needUpdateHeight;
-        clear() {
-            this.removeAllChild();
-        }
-        getChildByName(name, deep) {
-            let result = null;
-            this.forEachChildren((child) => {
-                if (child.name === name) {
-                    result = child;
-                    return true;
-                }
-                return false;
-            });
-            if (deep) {
-                this.forEachChildren((child) => {
-                    if (child.getChildByName) {
-                        const target = child.getChildByName(name, true);
-                        if (target) {
-                            result = target;
-                            return true;
-                        }
-                    }
-                    return false;
-                });
-            }
-            return result;
-        }
-        get width() {
-            let width = this.AABBBounds.width();
-            if (width === Infinity || width === -Infinity) {
-                width = 0;
-            }
-            return Math.max(width, this.attribute.width ?? 0);
-        }
-        get height() {
-            let height = this.AABBBounds.height();
-            if (height === Infinity || height === -Infinity) {
-                height = 0;
-            }
-            return Math.max(height, this.attribute.height ?? 0);
-        }
-        setDeltaWidth(deltaX) {
-            if (deltaX === 0) {
-                return;
-            }
-            this.setAttribute('width', (this.attribute.width ?? 0) + deltaX);
-            if (this.border) {
-                this.border.setAttribute('width', this.border.attribute.width + deltaX);
-                if (this.border.type === 'group') {
-                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.width + deltaX);
-                }
+            const customRenderObj = customRender(arg);
+            if (customRenderObj) {
+                customElements = customRenderObj.elements;
+                renderDefault = customRenderObj.renderDefault;
+                expectedWidth = customRenderObj.expectedWidth;
+                expectedHeight = customRenderObj.expectedHeight;
             }
         }
-        setDeltaHeight(deltaY) {
-            if (deltaY === 0) {
-                return;
-            }
-            this.setAttribute('height', (this.attribute.height ?? 0) + deltaY);
-            if (this.border) {
-                this.border.setAttribute('height', this.border.attribute.height + deltaY);
-                if (this.border.type === 'group') {
-                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.height + deltaY);
-                }
-            }
+        else if (customRender) {
+            expectedWidth = customRender.expectedWidth;
+            expectedHeight = customRender.expectedHeight;
+            customElements = customRender.elements;
+            renderDefault = customRender.renderDefault;
         }
-        setDeltaX(deltaX) {
-            if (deltaX === 0) {
-                return;
-            }
-            this.setAttribute('x', this.attribute.x + deltaX);
+        if (customElements) {
+            const value = table.getCellValue(col, row);
+            elementsGroup = adjustElementToGroup(customElements, autoWidth ? expectedWidth : width, autoHeight ? expectedHeight : height, value);
         }
-        setDeltaY(deltaY) {
-            if (deltaY === 0) {
-                return;
-            }
-            this.setAttribute('y', this.attribute.y + deltaY);
+        if (enableCellPadding) {
+            elementsGroup.setAttributes({
+                x: padding[3],
+                y: padding[0],
+                width: width - padding[1] - padding[3],
+                height: height - padding[0] - padding[2]
+            });
         }
-        forEachChildrenSkipChild(cb, skipChildName = 'border-rect', reverse = false) {
-            if (reverse) {
-                let child = this._lastChild;
-                let i = 0;
-                while (child) {
-                    if (child.name !== skipChildName) {
-                        const breakTag = cb(child, i++);
-                        if (breakTag) {
-                            return;
-                        }
-                    }
-                    child = child._prev;
-                }
+        dealPercentCalc(elementsGroup, width, height);
+        return {
+            elementsGroup,
+            renderDefault
+        };
+    }
+    function adjustElementToGroup(elements, width, height, value) {
+        const customGroup = new Group$2({
+            x: 0,
+            y: 0,
+            width,
+            height,
+            fill: false,
+            stroke: false,
+            pickable: false
+        });
+        customGroup.name = 'custom-container';
+        const elementsAdjusted = adjustElementsPos(elements, width, height, value);
+        elementsAdjusted.forEach(element => {
+            if (element.clickable) {
+                element.pickable = element.clickable;
             }
-            else {
-                let child = this._firstChild;
-                let i = 0;
-                while (child) {
-                    if (child.name !== skipChildName) {
-                        const breakTag = cb(child, i++);
-                        if (breakTag) {
-                            return;
-                        }
+            switch (element.type) {
+                case 'arc':
+                    const arc = createArc({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        fill: element.fill,
+                        stroke: element.stroke,
+                        outerRadius: element.radius,
+                        startAngle: element.startAngle,
+                        endAngle: element.endAngle,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    arc.name = element.name;
+                    customGroup.appendChild(arc);
+                    break;
+                case 'text':
+                    if (element.background) {
+                        const expandX = element.background?.expandX ?? 0;
+                        const expandY = element.background?.expandY ?? 0;
+                        const textBackRect = createRect({
+                            x: element.x - expandX,
+                            y: element.y - expandY,
+                            dx: (element.dx ?? 0),
+                            dy: (element.dy ?? 0),
+                            width: element.width + expandX * 2,
+                            height: element.height + expandY * 2,
+                            cornerRadius: element.background?.cornerRadius ?? 0,
+                            fill: element.background?.fill ?? '#888'
+                        });
+                        customGroup.appendChild(textBackRect);
                     }
-                    child = child._next;
-                }
-            }
-        }
-        getColGroup(col) {
-            let c = this._firstChild;
-            if (!c) {
-                return null;
+                    const text = new Text$1(Object.assign({
+                        pickable: !!element.pickable,
+                        fill: element.color ?? element.fill
+                    }, element));
+                    text.name = element.name;
+                    customGroup.appendChild(text);
+                    break;
+                case 'rect':
+                    const rect = createRect({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        width: element.width,
+                        height: element.height,
+                        cornerRadius: element.radius,
+                        fill: element.fill,
+                        stroke: element.stroke,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    rect.name = element.name;
+                    customGroup.appendChild(rect);
+                    break;
+                case 'circle':
+                    const circle = createCircle({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        radius: element.radius,
+                        fill: element.fill,
+                        stroke: element.stroke,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    circle.name = element.name;
+                    customGroup.appendChild(circle);
+                    break;
+                case 'icon':
+                    const icon = new Icon$1({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        width: element.width,
+                        height: element.height,
+                        image: element.svg,
+                        backgroundWidth: element.hover ? (element.hover.width ?? element.width) : undefined,
+                        backgroundHeight: element.hover ? (element.hover.width ?? element.width) : undefined,
+                        backgroundColor: element.hover ? element.hover.bgColor ?? 'rgba(22,44,66,0.2)' : undefined,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    icon.name = element.name;
+                    icon.role = 'icon-custom';
+                    customGroup.appendChild(icon);
+                    break;
+                case 'image':
+                    const image = new Icon$1({
+                        x: element.x,
+                        y: element.y,
+                        dx: (element.dx ?? 0),
+                        dy: (element.dy ?? 0),
+                        width: element.width,
+                        height: element.height,
+                        image: element.src,
+                        backgroundWidth: element.hover ? (element.hover.width ?? element.width) : undefined,
+                        backgroundHeight: element.hover ? (element.hover.width ?? element.width) : undefined,
+                        backgroundColor: element.hover ? element.hover.bgColor ?? 'rgba(22,44,66,0.2)' : undefined,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor,
+                        shape: element.shape
+                    });
+                    image.name = element.name;
+                    image.role = 'image-custom';
+                    customGroup.appendChild(image);
+                    break;
+                case 'line':
+                    const line = createLine({
+                        points: element.points,
+                        stroke: element.stroke,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    line.name = element.name;
+                    customGroup.appendChild(line);
+                    break;
             }
-            for (let i = 0; i < this.childrenCount; i++) {
-                if (c.col === col) {
-                    return c;
+        });
+        return customGroup;
+    }
+    function adjustElementsPos(originalElements, width, height, value) {
+        const result = [];
+        const left = 0;
+        const top = 0;
+        const borderLineWidths = [0, 0, 0, 0];
+        for (let i = 0; i < originalElements.length; i++) {
+            const originalElement = originalElements[i];
+            const element = Object.assign({}, originalElement);
+            for (const name in element) {
+                if (element.hasOwnProperty(name) && isFunction$1(element[name])) {
+                    element[name] = element[name](value);
                 }
-                c = c._next;
             }
-            return null;
-        }
-        getRowGroup(row) {
-            let c = this._firstChild;
-            if (!c) {
-                return null;
+            const rect = element;
+            if (isValid$1(rect.x)) {
+                rect.x = isString$2(rect.x)
+                    ? transformString(rect.x, width - borderLineWidths[1])
+                    : Number(rect.x);
             }
-            for (let i = 0; i < this.childrenCount; i++) {
-                if (c.row === row) {
-                    return c;
-                }
-                c = c._next;
+            if (isValid$1(rect.y)) {
+                rect.y = isString$2(rect.y)
+                    ? transformString(rect.y, height - borderLineWidths[2])
+                    : Number(rect.y);
             }
-            return null;
-        }
-        addCellGroup(cellGroup) {
-            if (this.childrenCount === 0 || this.lastChild.row === cellGroup.row - 1) {
-                this.addChild(cellGroup);
+            if ('width' in element) {
+                element.width = isString$2(element.width)
+                    ? transformString(element.width, width - borderLineWidths[1])
+                    : Number(element.width);
             }
-            else {
-                let c = this._firstChild;
-                for (let i = 0; i < this.childrenCount; i++) {
-                    if (c.row === cellGroup.row - 1) {
-                        this.insertAfter(cellGroup, c);
-                        return;
-                    }
-                    c = c._next;
-                }
-                this.addChild(cellGroup);
+            if ('height' in element) {
+                element.height = isString$2(element.height)
+                    ? transformString(element.height, height - borderLineWidths[2])
+                    : Number(element.height);
             }
-        }
-        getChildAt(index) {
-            const child = super.getChildAt(index);
-            if (child && child.name === 'border-rect') {
-                return child._next;
+            if ('radius' in element) {
+                element.radius = isString$2(element.radius)
+                    ? transformString(element.radius, Math.min(width - borderLineWidths[1], height - borderLineWidths[2]))
+                    : Number(element.radius);
             }
-            return child;
-        }
-        tryUpdateAABBBounds() {
-            if (this.role === 'cell') {
-                if (!this.shouldUpdateAABBBounds()) {
-                    return this._AABBBounds;
-                }
-                const selfChange = this.shouldSelfChangeUpdateAABBBounds();
-                const bounds = this.doUpdateAABBBounds();
-                this.addUpdateLayoutTag();
-                after(this, selfChange);
-                return bounds;
+            if ('hover' in element) {
+                element.hover.x = isString$2(element.hover.x)
+                    ? transformString(element.hover.x, width - borderLineWidths[1])
+                    : Number(element.hover.x);
+                element.hover.y = isString$2(element.hover.y)
+                    ? transformString(element.hover.y, height - borderLineWidths[2])
+                    : Number(element.hover.y);
+                element.hover.width = isString$2(element.hover.width)
+                    ? transformString(element.hover.width, width - borderLineWidths[1])
+                    : Number(element.hover.width);
+                element.hover.height = isString$2(element.hover.height)
+                    ? transformString(element.hover.height, height - borderLineWidths[2])
+                    : Number(element.hover.height);
+                element.hover.x += left;
+                element.hover.y += top;
             }
-            return super.tryUpdateAABBBounds();
+            rect.x = rect.x + left;
+            rect.y = rect.y + top;
+            result.push(element);
         }
-        doUpdateAABBBounds() {
-            if (this.role === 'cell') {
-                const attribute = this.attribute;
-                const { x, y, width, height } = attribute;
-                this._AABBBounds.setValue(x, y, x + width, y + height);
-                this.parent && this.parent.addChildUpdateBoundTag();
-                this.clearUpdateBoundTag();
-                return this._AABBBounds;
-            }
-            else if (this.role === 'body' ||
-                this.role === 'row-header' ||
-                this.role === 'col-header' ||
-                this.role === 'right-frozen' ||
-                this.role === 'bottom-frozen' ||
-                this.role === 'corner-header' ||
-                this.role === 'corner-right-top-header' ||
-                this.role === 'corner-right-bottom-header' ||
-                this.role === 'corner-left-bottom-header') {
-                this._AABBBounds.setValue(-Infinity, -Infinity, Infinity, Infinity);
-                this.parent && this.parent.addChildUpdateBoundTag();
-                this.clearUpdateBoundTag();
-                return this._AABBBounds;
-            }
-            return super.doUpdateAABBBounds();
+        return result;
+    }
+    function transformString(str, size) {
+        if (str.endsWith('px')) {
+            return parseInt(str, 10);
         }
-        updateColumnRowNumber(row) {
-            if (!this.rowNumber) {
-                this.rowNumber = row;
+        else if (str.endsWith('%') && size) {
+            return (parseInt(str, 10) / 100) * size;
+        }
+        return parseInt(str, 10);
+    }
+    function dealPercentCalc(group, parentWidth, parentHeight) {
+        if (!group) {
+            return;
+        }
+        group.forEachChildren((child) => {
+            if (!child) {
+                return;
             }
-            else {
-                this.rowNumber = Math.max(this.rowNumber, row);
+            if (isObject$4(child.attribute.width) && child.attribute.width.percent) {
+                child.setAttribute('width', (child.attribute.width.percent / 100) * parentWidth +
+                    (child.attribute.width.delta ?? 0));
             }
-        }
-        updateColumnHeight(cellHeight) {
-            if (!this.colHeight) {
-                this.colHeight = cellHeight;
+            if (isObject$4(child.attribute.height) && child.attribute.height.percent) {
+                child.setAttribute('height', (child.attribute.height.percent / 100) * parentHeight +
+                    (child.attribute.height.delta ?? 0));
             }
-            else {
-                this.colHeight += cellHeight;
+            if (child.type === 'group') {
+                dealPercentCalc(child, child.attribute.width, child.attribute.height);
             }
-        }
-    };
-    function after(group, selfChange) {
-        if (!group.stage.dirtyBounds) {
-            return;
-        }
-        if (!(group.stage && group.stage.renderCount)) {
-            return;
-        }
-        if (group.isContainer && !selfChange) {
-            return;
-        }
-        group.stage.dirty(group.globalAABBBounds);
-    }
-
-    const CHART_NUMBER_TYPE = genNumberType();
-    class Chart extends Group$2 {
-        type = 'chart';
-        chartInstance;
-        activeChartInstance;
-        active;
-        cacheCanvas;
-        isShareChartSpec;
-        constructor(isShareChartSpec, params) {
-            super(params);
-            this.numberType = CHART_NUMBER_TYPE;
-            this.isShareChartSpec = isShareChartSpec;
-            if (!params.chartInstance) {
-                const chartInstance = new params.ClassType(params.spec, {
-                    renderCanvas: params.canvas,
-                    mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
-                    modeParams: this.attribute.modeParams,
-                    canvasControled: false,
-                    viewBox: { x1: 0, x2: 0, y1: 0, y2: 0 },
-                    dpr: params.dpr,
-                    interactive: false,
-                    animation: false,
-                    autoFit: false
-                });
-                chartInstance.renderSync();
-                params.chartInstance = this.chartInstance = chartInstance;
-            }
-            else {
-                this.chartInstance = params.chartInstance;
-            }
-        }
-        activate(table) {
-            this.active = true;
-            const { col, row } = this.parent;
-            const { x1, y1, x2, y2 } = this.getViewBox();
-            const tableBound = getTableBounds(col, row, table);
-            const clipBound = tableBound.intersect({
-                x1: x1 - table.scrollLeft,
-                x2: x2 - table.scrollLeft,
-                y1: y1 - table.scrollTop,
-                y2: y2 - table.scrollTop
-            });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
-                renderCanvas: this.attribute.canvas,
-                mode: 'desktop-browser',
-                canvasControled: false,
-                viewBox: {
-                    x1: x1 - table.scrollLeft,
-                    x2: x2 - table.scrollLeft,
-                    y1: y1 - table.scrollTop,
-                    y2: y2 - table.scrollTop
-                },
-                dpr: table.internalProps.pixelRatio,
-                animation: false,
-                interactive: true,
-                autoFit: false,
-                beforeRender: (stage) => {
-                    const ctx = stage.window.getContext();
-                    ctx.inuse = true;
-                    ctx.clearMatrix();
-                    ctx.setTransformForCurrent(true);
-                    ctx.beginPath();
-                    ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
-                    ctx.clip();
-                },
-                afterRender(stage) {
-                    const ctx = stage.window.getContext();
-                    ctx.inuse = false;
-                }
-            });
-            this.activeChartInstance.renderSync();
-            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
-            this.activeChartInstance.on('click', (params) => {
-                if (Chart.temp) {
-                    table.scenegraph.updateChartState(params?.datum);
-                }
-            });
-            this.activeChartInstance.on('brushEnd', (params) => {
-                table.scenegraph.updateChartState(params?.value?.inBrushData);
-                Chart.temp = 0;
-                setTimeout(() => {
-                    Chart.temp = 1;
-                }, 0);
-            });
-            table._bindChartEvent?.(this.activeChartInstance);
-        }
-        static temp = 1;
-        deactivate() {
-            this.active = false;
-            this.activeChartInstance?.updateViewBox({
-                x1: -1000,
-                x2: -800,
-                y1: -1000,
-                y2: -800
-            }, false, false);
-            this.activeChartInstance?.release();
-            this.activeChartInstance = null;
-        }
-        updateData(data) {
-            this.attribute.data = data;
-        }
-        getViewBox() {
-            const cellGroup = this.parent;
-            const padding = this.attribute.cellPadding;
-            const table = this.stage.table;
-            return {
-                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
-                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
-                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
-                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
-            };
-        }
+        });
     }
-    function getTableBounds(col, row, table) {
-        const { layoutMap } = table.internalProps;
-        const bodyBound = new Bounds();
-        const tableBound = table.scenegraph.tableGroup.globalAABBBounds;
-        bodyBound.x1 = tableBound.x1;
-        bodyBound.x2 = tableBound.x2;
-        bodyBound.y1 = tableBound.y1;
-        bodyBound.y2 = tableBound.y2;
-        if (!layoutMap.isFrozenColumn(col, row) && !layoutMap.isRightFrozenColumn(col, row)) {
-            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
-            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+    function decodeReactDom(dom) {
+        if (!dom || !dom.$$typeof) {
+            return dom;
         }
-        else if (layoutMap.isLeftBottomCorner(col, row) || layoutMap.isRightTopCorner(col, row)) ;
-        else if (layoutMap.isFrozenColumn(col, row)) {
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        const type = dom.type;
+        const { attribute, children, stateProxy } = dom.props;
+        const g = type({ attribute });
+        parseToGraphic(g, dom.props);
+        if (stateProxy) {
+            g.stateProxy = stateProxy;
         }
-        else if (layoutMap.isRightFrozenColumn(col, row)) {
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        g.id = attribute.id;
+        g.name = attribute.name;
+        if (isArray$1(children)) {
+            children.forEach((item) => {
+                const c = decodeReactDom(item);
+                c && c.type && g.add(c);
+            });
         }
-        else if (layoutMap.isBottomFrozenRow(col, row)) {
-            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
-            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
+        else if (children) {
+            g.add(decodeReactDom(children));
         }
-        return bodyBound;
-    }
-
-    const chartTypes = {};
-
-    const builtin = {};
-    function get$2() {
-        return extend(builtin, chartTypes);
+        return g;
     }
-
-    function createChartCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, dataValue, chartModule, chartSpec, chartInstance, dataId, table, cellTheme, isShareChartSpec) {
-        const registerCharts = get$2();
-        const ClassType = registerCharts[chartModule];
-        const headerStyle = table._getCellStyle(col, row);
-        const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
-        if (isValid$1(functionalPadding)) {
-            padding = functionalPadding;
+    function parseToGraphic(g, props) {
+        let isGraphic = false;
+        switch (g.type) {
+            case 'richtext':
+                break;
+            case 'rich/image':
+                break;
+            default:
+                isGraphic = true;
         }
-        if (!cellGroup) {
-            cellGroup = new Group$1({
-                x: xOrigin,
-                y: yOrigin,
-                width,
-                height,
-                lineWidth: cellTheme?.group?.lineWidth ?? undefined,
-                fill: cellTheme?.group?.fill ?? undefined,
-                stroke: cellTheme?.group?.stroke ?? undefined,
-                strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
-                strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
-                cursor: cellTheme?.group?.cursor ?? undefined,
-                lineDash: cellTheme?.group?.lineDash ?? undefined,
-                lineCap: 'square',
-                clip: true,
-                cornerRadius: cellTheme.group.cornerRadius
+        if (isGraphic) {
+            Object.keys(props).forEach(k => {
+                const en = REACT_TO_CANOPUS_EVENTS[k];
+                if (en) {
+                    g.on(en, props[k]);
+                }
             });
-            cellGroup.role = 'cell';
-            cellGroup.col = col;
-            cellGroup.row = row;
-            columnGroup?.addCellGroup(cellGroup);
         }
-        cellGroup.AABBBounds.width();
-        const chartGroup = new Chart(isShareChartSpec, {
-            stroke: false,
-            x: padding[3],
-            y: padding[0],
-            canvas: table.canvas ?? table.scenegraph.stage.window.getContext().canvas,
-            mode: table.options.mode,
-            modeParams: table.options.modeParams,
-            spec: chartSpec,
-            ClassType,
-            width: width - padding[3] - padding[1],
-            height: height - padding[2] - padding[0],
-            chartInstance,
-            dataId,
-            data: table.getCellValue(col, row),
-            cellPadding: padding,
-            dpr: table.internalProps.pixelRatio,
-            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
-        });
-        cellGroup.appendChild(chartGroup);
-        table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
-        return cellGroup;
     }
 
     const icons = {};
@@ -33705,25 +33599,262 @@
             };
         }
     };
-    function get$1() {
+    function get$2() {
         return extend(builtins, icons);
     }
 
-    function calcKeepAspectRatioSize(width, height, maxWidth, maxHeight) {
-        const rectWidth = width;
-        const rectHeight = height;
-        const containerWidth = maxWidth;
-        const containerHeight = maxHeight;
-        const containerRatio = containerWidth / containerHeight;
-        const rectRatio = rectWidth / rectHeight;
-        let newWidth;
-        let newHeight;
-        if (rectRatio > containerRatio) {
-            newWidth = containerWidth;
-            newHeight = newWidth / rectRatio;
-        }
-        else {
-            newHeight = containerHeight;
+    let Group$1 = class Group extends Group$2 {
+        role;
+        col;
+        row;
+        mergeStartCol;
+        mergeStartRow;
+        mergeEndCol;
+        mergeEndRow;
+        contentWidth;
+        contentHeight;
+        rowNumber;
+        colHeight;
+        border;
+        needUpdate;
+        needUpdateWidth;
+        needUpdateHeight;
+        clear() {
+            this.removeAllChild();
+        }
+        getChildByName(name, deep) {
+            let result = null;
+            this.forEachChildren((child) => {
+                if (child.name === name) {
+                    result = child;
+                    return true;
+                }
+                return false;
+            });
+            if (deep) {
+                this.forEachChildren((child) => {
+                    if (child.getChildByName) {
+                        const target = child.getChildByName(name, true);
+                        if (target) {
+                            result = target;
+                            return true;
+                        }
+                    }
+                    return false;
+                });
+            }
+            return result;
+        }
+        get width() {
+            let width = this.AABBBounds.width();
+            if (width === Infinity || width === -Infinity) {
+                width = 0;
+            }
+            return Math.max(width, this.attribute.width ?? 0);
+        }
+        get height() {
+            let height = this.AABBBounds.height();
+            if (height === Infinity || height === -Infinity) {
+                height = 0;
+            }
+            return Math.max(height, this.attribute.height ?? 0);
+        }
+        setDeltaWidth(deltaX) {
+            if (deltaX === 0) {
+                return;
+            }
+            this.setAttribute('width', (this.attribute.width ?? 0) + deltaX);
+            if (this.border) {
+                this.border.setAttribute('width', this.border.attribute.width + deltaX);
+                if (this.border.type === 'group') {
+                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.width + deltaX);
+                }
+            }
+        }
+        setDeltaHeight(deltaY) {
+            if (deltaY === 0) {
+                return;
+            }
+            this.setAttribute('height', (this.attribute.height ?? 0) + deltaY);
+            if (this.border) {
+                this.border.setAttribute('height', this.border.attribute.height + deltaY);
+                if (this.border.type === 'group') {
+                    this.border.firstChild.setAttribute('width', this.border.firstChild.attribute.height + deltaY);
+                }
+            }
+        }
+        setDeltaX(deltaX) {
+            if (deltaX === 0) {
+                return;
+            }
+            this.setAttribute('x', this.attribute.x + deltaX);
+        }
+        setDeltaY(deltaY) {
+            if (deltaY === 0) {
+                return;
+            }
+            this.setAttribute('y', this.attribute.y + deltaY);
+        }
+        forEachChildrenSkipChild(cb, skipChildName = 'border-rect', reverse = false) {
+            if (reverse) {
+                let child = this._lastChild;
+                let i = 0;
+                while (child) {
+                    if (child.name !== skipChildName) {
+                        const breakTag = cb(child, i++);
+                        if (breakTag) {
+                            return;
+                        }
+                    }
+                    child = child._prev;
+                }
+            }
+            else {
+                let child = this._firstChild;
+                let i = 0;
+                while (child) {
+                    if (child.name !== skipChildName) {
+                        const breakTag = cb(child, i++);
+                        if (breakTag) {
+                            return;
+                        }
+                    }
+                    child = child._next;
+                }
+            }
+        }
+        getColGroup(col) {
+            let c = this._firstChild;
+            if (!c) {
+                return null;
+            }
+            for (let i = 0; i < this.childrenCount; i++) {
+                if (c.col === col) {
+                    return c;
+                }
+                c = c._next;
+            }
+            return null;
+        }
+        getRowGroup(row) {
+            let c = this._firstChild;
+            if (!c) {
+                return null;
+            }
+            for (let i = 0; i < this.childrenCount; i++) {
+                if (c.row === row) {
+                    return c;
+                }
+                c = c._next;
+            }
+            return null;
+        }
+        addCellGroup(cellGroup) {
+            if (this.childrenCount === 0 || this.lastChild.row === cellGroup.row - 1) {
+                this.addChild(cellGroup);
+            }
+            else {
+                let c = this._firstChild;
+                for (let i = 0; i < this.childrenCount; i++) {
+                    if (c.row === cellGroup.row - 1) {
+                        this.insertAfter(cellGroup, c);
+                        return;
+                    }
+                    c = c._next;
+                }
+                this.addChild(cellGroup);
+            }
+        }
+        getChildAt(index) {
+            const child = super.getChildAt(index);
+            if (child && child.name === 'border-rect') {
+                return child._next;
+            }
+            return child;
+        }
+        tryUpdateAABBBounds() {
+            if (this.role === 'cell') {
+                if (!this.shouldUpdateAABBBounds()) {
+                    return this._AABBBounds;
+                }
+                const selfChange = this.shouldSelfChangeUpdateAABBBounds();
+                const bounds = this.doUpdateAABBBounds();
+                this.addUpdateLayoutTag();
+                after(this, selfChange);
+                return bounds;
+            }
+            return super.tryUpdateAABBBounds();
+        }
+        doUpdateAABBBounds() {
+            if (this.role === 'cell') {
+                const attribute = this.attribute;
+                const { x, y, width, height } = attribute;
+                this._AABBBounds.setValue(x, y, x + width, y + height);
+                this.parent && this.parent.addChildUpdateBoundTag();
+                this.clearUpdateBoundTag();
+                return this._AABBBounds;
+            }
+            else if (this.role === 'body' ||
+                this.role === 'row-header' ||
+                this.role === 'col-header' ||
+                this.role === 'right-frozen' ||
+                this.role === 'bottom-frozen' ||
+                this.role === 'corner-header' ||
+                this.role === 'corner-right-top-header' ||
+                this.role === 'corner-right-bottom-header' ||
+                this.role === 'corner-left-bottom-header') {
+                this._AABBBounds.setValue(-Infinity, -Infinity, Infinity, Infinity);
+                this.parent && this.parent.addChildUpdateBoundTag();
+                this.clearUpdateBoundTag();
+                return this._AABBBounds;
+            }
+            return super.doUpdateAABBBounds();
+        }
+        updateColumnRowNumber(row) {
+            if (!this.rowNumber) {
+                this.rowNumber = row;
+            }
+            else {
+                this.rowNumber = Math.max(this.rowNumber, row);
+            }
+        }
+        updateColumnHeight(cellHeight) {
+            if (!this.colHeight) {
+                this.colHeight = cellHeight;
+            }
+            else {
+                this.colHeight += cellHeight;
+            }
+        }
+    };
+    function after(group, selfChange) {
+        if (!group.stage.dirtyBounds) {
+            return;
+        }
+        if (!(group.stage && group.stage.renderCount)) {
+            return;
+        }
+        if (group.isContainer && !selfChange) {
+            return;
+        }
+        group.stage.dirty(group.globalAABBBounds);
+    }
+
+    function calcKeepAspectRatioSize(width, height, maxWidth, maxHeight) {
+        const rectWidth = width;
+        const rectHeight = height;
+        const containerWidth = maxWidth;
+        const containerHeight = maxHeight;
+        const containerRatio = containerWidth / containerHeight;
+        const rectRatio = rectWidth / rectHeight;
+        let newWidth;
+        let newHeight;
+        if (rectRatio > containerRatio) {
+            newWidth = containerWidth;
+            newHeight = newWidth / rectRatio;
+        }
+        else {
+            newHeight = containerHeight;
             newWidth = newHeight * rectRatio;
         }
         return {
@@ -33752,10 +33883,41 @@
         return { x, y };
     }
 
-    function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
-        const headerStyle = table._getCellStyle(col, row);
-        const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
-        if (isValid$1(functionalPadding)) {
+    function getProp(name, cellStyle, col, row, _table) {
+        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
+        if (typeof prop === 'function') {
+            const arg = {
+                col,
+                row,
+                table: _table,
+                value: _table.getCellValue(col, row),
+                dataValue: _table.getCellOriginValue(col, row),
+                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
+            };
+            return prop(arg);
+        }
+        return prop;
+    }
+    function getFunctionalProp(name, cellStyle, col, row, _table) {
+        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
+        if (typeof prop === 'function') {
+            const arg = {
+                col,
+                row,
+                table: _table,
+                value: _table.getCellValue(col, row),
+                dataValue: _table.getCellOriginValue(col, row),
+                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
+            };
+            return prop(arg);
+        }
+        return undefined;
+    }
+
+    function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
+        const headerStyle = table._getCellStyle(col, row);
+        const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
+        if (isValid$1(functionalPadding)) {
             padding = functionalPadding;
         }
         if (cellTheme?.text?.textAlign) {
@@ -33823,7 +33985,7 @@
             }
         }
         image.failCallback = () => {
-            const regedIcons = get$1();
+            const regedIcons = get$2();
             image.image = regedIcons.damage_pic.svg;
         };
         cellGroup.appendChild(image);
@@ -33973,7 +34135,7 @@
         }
     }
     function isDamagePic(image) {
-        const regedIcons = get$1();
+        const regedIcons = get$2();
         return image.attribute.image === regedIcons.damage_pic.svg;
     }
 
@@ -34641,6 +34803,210 @@
         return group;
     }
 
+    const CHART_NUMBER_TYPE = genNumberType();
+    class Chart extends Group$2 {
+        type = 'chart';
+        chartInstance;
+        activeChartInstance;
+        active;
+        cacheCanvas;
+        isShareChartSpec;
+        constructor(isShareChartSpec, params) {
+            super(params);
+            this.numberType = CHART_NUMBER_TYPE;
+            this.isShareChartSpec = isShareChartSpec;
+            if (!params.chartInstance) {
+                const chartInstance = new params.ClassType(params.spec, {
+                    renderCanvas: params.canvas,
+                    mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser',
+                    modeParams: this.attribute.modeParams,
+                    canvasControled: false,
+                    viewBox: { x1: 0, x2: 0, y1: 0, y2: 0 },
+                    dpr: params.dpr,
+                    interactive: false,
+                    animation: false,
+                    autoFit: false
+                });
+                chartInstance.renderSync();
+                params.chartInstance = this.chartInstance = chartInstance;
+            }
+            else {
+                this.chartInstance = params.chartInstance;
+            }
+        }
+        activate(table) {
+            this.active = true;
+            const { col, row } = this.parent;
+            const { x1, y1, x2, y2 } = this.getViewBox();
+            const tableBound = getTableBounds(col, row, table);
+            const clipBound = tableBound.intersect({
+                x1: x1 - table.scrollLeft,
+                x2: x2 - table.scrollLeft,
+                y1: y1 - table.scrollTop,
+                y2: y2 - table.scrollTop
+            });
+            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
+                renderCanvas: this.attribute.canvas,
+                mode: 'desktop-browser',
+                canvasControled: false,
+                viewBox: {
+                    x1: x1 - table.scrollLeft,
+                    x2: x2 - table.scrollLeft,
+                    y1: y1 - table.scrollTop,
+                    y2: y2 - table.scrollTop
+                },
+                dpr: table.internalProps.pixelRatio,
+                animation: false,
+                interactive: true,
+                autoFit: false,
+                beforeRender: (stage) => {
+                    const ctx = stage.window.getContext();
+                    ctx.inuse = true;
+                    ctx.clearMatrix();
+                    ctx.setTransformForCurrent(true);
+                    ctx.beginPath();
+                    ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
+                    ctx.clip();
+                },
+                afterRender(stage) {
+                    const ctx = stage.window.getContext();
+                    ctx.inuse = false;
+                }
+            });
+            this.activeChartInstance.renderSync();
+            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
+            this.activeChartInstance.on('click', (params) => {
+                if (Chart.temp) {
+                    table.scenegraph.updateChartState(params?.datum);
+                }
+            });
+            this.activeChartInstance.on('brushEnd', (params) => {
+                table.scenegraph.updateChartState(params?.value?.inBrushData);
+                Chart.temp = 0;
+                setTimeout(() => {
+                    Chart.temp = 1;
+                }, 0);
+            });
+            table._bindChartEvent?.(this.activeChartInstance);
+        }
+        static temp = 1;
+        deactivate() {
+            this.active = false;
+            this.activeChartInstance?.updateViewBox({
+                x1: -1000,
+                x2: -800,
+                y1: -1000,
+                y2: -800
+            }, false, false);
+            this.activeChartInstance?.release();
+            this.activeChartInstance = null;
+        }
+        updateData(data) {
+            this.attribute.data = data;
+        }
+        getViewBox() {
+            const cellGroup = this.parent;
+            const padding = this.attribute.cellPadding;
+            const table = this.stage.table;
+            return {
+                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
+                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
+                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
+                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
+            };
+        }
+    }
+    function getTableBounds(col, row, table) {
+        const { layoutMap } = table.internalProps;
+        const bodyBound = new Bounds();
+        const tableBound = table.scenegraph.tableGroup.globalAABBBounds;
+        bodyBound.x1 = tableBound.x1;
+        bodyBound.x2 = tableBound.x2;
+        bodyBound.y1 = tableBound.y1;
+        bodyBound.y2 = tableBound.y2;
+        if (!layoutMap.isFrozenColumn(col, row) && !layoutMap.isRightFrozenColumn(col, row)) {
+            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
+            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
+            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
+            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        }
+        else if (layoutMap.isLeftBottomCorner(col, row) || layoutMap.isRightTopCorner(col, row)) ;
+        else if (layoutMap.isFrozenColumn(col, row)) {
+            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
+            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        }
+        else if (layoutMap.isRightFrozenColumn(col, row)) {
+            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
+            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        }
+        else if (layoutMap.isBottomFrozenRow(col, row)) {
+            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
+            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
+        }
+        return bodyBound;
+    }
+
+    const chartTypes = {};
+
+    const builtin = {};
+    function get$1() {
+        return extend(builtin, chartTypes);
+    }
+
+    function createChartCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, dataValue, chartModule, chartSpec, chartInstance, dataId, table, cellTheme, isShareChartSpec) {
+        const registerCharts = get$1();
+        const ClassType = registerCharts[chartModule];
+        const headerStyle = table._getCellStyle(col, row);
+        const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
+        if (isValid$1(functionalPadding)) {
+            padding = functionalPadding;
+        }
+        if (!cellGroup) {
+            cellGroup = new Group$1({
+                x: xOrigin,
+                y: yOrigin,
+                width,
+                height,
+                lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+                fill: cellTheme?.group?.fill ?? undefined,
+                stroke: cellTheme?.group?.stroke ?? undefined,
+                strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
+                strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
+                cursor: cellTheme?.group?.cursor ?? undefined,
+                lineDash: cellTheme?.group?.lineDash ?? undefined,
+                lineCap: 'square',
+                clip: true,
+                cornerRadius: cellTheme.group.cornerRadius
+            });
+            cellGroup.role = 'cell';
+            cellGroup.col = col;
+            cellGroup.row = row;
+            columnGroup?.addCellGroup(cellGroup);
+        }
+        cellGroup.AABBBounds.width();
+        const chartGroup = new Chart(isShareChartSpec, {
+            stroke: false,
+            x: padding[3],
+            y: padding[0],
+            canvas: table.canvas ?? table.scenegraph.stage.window.getContext().canvas,
+            mode: table.options.mode,
+            modeParams: table.options.modeParams,
+            spec: chartSpec,
+            ClassType,
+            width: width - padding[3] - padding[1],
+            height: height - padding[2] - padding[0],
+            chartInstance,
+            dataId,
+            data: table.getCellValue(col, row),
+            cellPadding: padding,
+            dpr: table.internalProps.pixelRatio,
+            axes: table.isPivotChart() ? table.internalProps.layoutMap.getChartAxes(col, row) : []
+        });
+        cellGroup.appendChild(chartGroup);
+        table.internalProps.layoutMap.setChartInstance(col, row, chartGroup.chartInstance);
+        return cellGroup;
+    }
+
     class CellContent extends Group$1 {
         _leftGroup;
         _rightGroup;
@@ -35386,7 +35752,7 @@
         return cellGroup;
     }
 
-    const regedIcons$1 = get$1();
+    const regedIcons$1 = get$2();
     function createVideoCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
@@ -35946,587 +36312,88 @@
         if (!addNew && oldCellGroup.parent) {
             oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
             oldCellGroup.parent.removeChild(oldCellGroup);
-            if (table.scenegraph?.proxy.cellCache.get(col)) {
-                table.scenegraph?.proxy.cellCache.set(col, newCellGroup);
-            }
-        }
-        return newCellGroup;
-    }
-    function canUseFastUpdate(col, row, oldCellGroup, autoWrapText, table) {
-        const define = table.getBodyColumnDefine(col, row);
-        const mayHaveIcon = !!define?.icon || !!define?.tree;
-        const cellType = table.getBodyColumnType(col, row);
-        const autoRowHeight = table.heightMode === 'autoHeight';
-        const value = table.getCellValue(col, row);
-        if (!table.isHeader(col, row) &&
-            oldCellGroup.role === 'cell' &&
-            cellType === 'text' &&
-            !autoWrapText &&
-            !autoRowHeight &&
-            !mayHaveIcon &&
-            oldCellGroup.firstChild?.type === 'text' &&
-            !isPromise(value)) {
-            return true;
-        }
-        return false;
-    }
-    function dealWithMergeCellSize(range, cellWidth, cellHeight, padding, textAlign, textBaseline, table) {
-        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) {
-                    updateCellContentHeight(cellGroup, cellHeight, cellHeight, table.heightMode === 'autoHeight', padding, textAlign, textBaseline);
-                }
-                if (range.start.col !== range.end.col) {
-                    updateCellContentWidth(cellGroup, cellWidth, cellHeight, 0, table.heightMode === 'autoHeight', padding, textAlign, textBaseline, table.scenegraph);
-                }
-                cellGroup.contentWidth = cellWidth;
-                cellGroup.contentHeight = cellHeight;
-                const rangeHeight = table.getRowHeight(row);
-                const rangeWidth = table.getColWidth(col);
-                resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table);
-            }
-        }
-    }
-
-    function createComplexColumn(columnGroup, col, colWidth, rowStart, rowEnd, mergeMap, defaultRowHeight, table, cellLocation, rowLimit) {
-        let padding;
-        let textAlign;
-        let textBaseline;
-        let y = 0;
-        if (columnGroup.lastChild && columnGroup.lastChild.row === rowStart - 1) {
-            y = columnGroup.lastChild.attribute.y + columnGroup.lastChild.attribute.height;
-        }
-        else if (columnGroup.colHeight) {
-            y = columnGroup.colHeight;
-        }
-        for (let j = rowStart; j <= rowEnd; j++) {
-            const row = j;
-            let value = table.getCellValue(col, row);
-            let cellWidth = colWidth;
-            let cellHeight = table.getRowHeight(row);
-            let range;
-            let isMerge;
-            let customStyle;
-            let customResult;
-            if (table.internalProps.customMergeCell) {
-                const customMerge = table.getCustomMerge(col, row);
-                if (customMerge) {
-                    const { range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout, customRender } = customMerge;
-                    range = customMergeRange;
-                    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);
-                        cellWidth = mergeSize.cellWidth;
-                        cellHeight = mergeSize.cellHeight;
-                    }
-                    value = customMergeText;
-                    customStyle = customMergeStyle;
-                    if (customLayout || customRender) {
-                        customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), false, table.heightMode === 'autoHeight', [0, 0, 0, 0], table);
-                    }
-                }
-            }
-            let colForDefine = col;
-            let rowForDefine = row;
-            if (range) {
-                colForDefine = range.start.col;
-                rowForDefine = range.start.row;
-            }
-            const define = cellLocation !== 'body'
-                ? table.getHeaderDefine(colForDefine, rowForDefine)
-                : table.getBodyColumnDefine(colForDefine, rowForDefine);
-            const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
-            if (!range && (cellLocation !== 'body' || define?.mergeCell)) {
-                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);
-                    cellWidth = mergeSize.cellWidth;
-                    cellHeight = mergeSize.cellHeight;
-                }
-            }
-            const cellStyle = customStyle || table._getCellStyle(col, row);
-            const cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
-            cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
-            cellTheme.group.width = colWidth;
-            cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight;
-            if (cellTheme._vtable.padding) {
-                padding = cellTheme._vtable.padding;
-            }
-            if (cellTheme.text.textAlign) {
-                textAlign = cellTheme.text.textAlign;
-            }
-            if (cellTheme.text.textBaseline) {
-                textBaseline = cellTheme.text.textBaseline;
-            }
-            if (cellLocation !== 'body' && !cellTheme.group.fill) {
-                cellTheme.group.fill = '#fff';
-            }
-            const type = (table.isHeader(col, row) ? table._getHeaderLayoutMap(col, row).headerType : table.getBodyColumnType(col, row)) ||
-                'text';
-            if (isPromise(value)) {
-                dealPromiseData(value, table, createCell.bind(null, type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult));
-                columnGroup.updateColumnRowNumber(row);
-                const height = table.getRowHeight(row);
-                columnGroup.updateColumnHeight(height);
-                y += height;
-            }
-            else {
-                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
-                columnGroup.updateColumnRowNumber(row);
-                if (isMerge) {
-                    const rangeHeight = table.getRowHeight(row);
-                    const rangeWidth = 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);
-                    columnGroup.updateColumnHeight(rangeHeight);
-                    y += rangeHeight;
-                }
-                else {
-                    columnGroup.updateColumnHeight(cellGroup.attribute.height);
-                    y += cellGroup.attribute.height;
-                }
-            }
-            if (rowLimit && row > rowLimit) {
-                break;
-            }
-        }
-        columnGroup.setAttribute('width', colWidth);
-        return {
-            width: colWidth,
-            height: y
-        };
-    }
-    function resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table) {
-        const { col, row } = cellGroup;
-        const dx = -table.getColsWidth(range.start.col, col - 1);
-        const dy = -table.getRowsHeight(range.start.row, row - 1);
-        cellGroup.forEachChildren((child) => {
-            child.setAttributes({
-                dx: (child.attribute.dx ?? 0) + dx,
-                dy: (child.attribute.dy ?? 0) + dy
-            });
-        });
-        const lineWidth = cellGroup.attribute.lineWidth;
-        const isLineWidthArray = isArray$1(lineWidth);
-        const newLineWidth = [0, 0, 0, 0];
-        if (col === range.start.col) {
-            newLineWidth[3] = isLineWidthArray ? lineWidth[3] : lineWidth;
-        }
-        if (row === range.start.row) {
-            newLineWidth[0] = isLineWidthArray ? lineWidth[0] : lineWidth;
-        }
-        if (col === range.end.col) {
-            newLineWidth[1] = isLineWidthArray ? lineWidth[1] : lineWidth;
-        }
-        if (row === range.end.row) {
-            newLineWidth[2] = isLineWidthArray ? lineWidth[2] : lineWidth;
-        }
-        const widthChange = rangeWidth !== cellGroup.attribute.width;
-        const heightChange = rangeHeight !== cellGroup.attribute.height;
-        cellGroup.setAttributes({
-            width: rangeWidth,
-            height: rangeHeight,
-            strokeArrayWidth: newLineWidth
-        });
-        cellGroup.mergeStartCol = range.start.col;
-        cellGroup.mergeStartRow = range.start.row;
-        cellGroup.mergeEndCol = range.end.col;
-        cellGroup.mergeEndRow = range.end.row;
-        return {
-            widthChange,
-            heightChange
-        };
-    }
-    function dealMerge(range, mergeMap, table, forceUpdate) {
-        let cellWidth = 0;
-        let cellHeight = 0;
-        const mergeResult = mergeMap.get(`${range.start.col},${range.start.row};${range.end.col},${range.end.row}`);
-        if (!mergeResult || forceUpdate) {
-            for (let col = range.start.col; col <= range.end.col; col++) {
-                cellWidth += table.getColWidth(col);
-            }
-            for (let i = range.start.row; i <= range.end.row; i++) {
-                cellHeight += table.getRowHeight(i);
-            }
-            mergeMap.set(`${range.start.col},${range.start.row};${range.end.col},${range.end.row}`, {
-                cellWidth,
-                cellHeight
-            });
-        }
-        else {
-            cellWidth = mergeResult.cellWidth;
-            cellHeight = mergeResult.cellHeight;
-        }
-        return {
-            cellWidth,
-            cellHeight
-        };
-    }
-
-    function dealWithCustom(customLayout, customRender, col, row, width, height, autoWidth, autoHeight, padding, table) {
-        let renderDefault = true;
-        let enableCellPadding = false;
-        let expectedWidth;
-        let expectedHeight;
-        let customElements;
-        let elementsGroup;
-        if (typeof customLayout === 'function') {
-            const arg = {
-                col,
-                row,
-                dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
-                rect: {
-                    left: 0,
-                    top: 0,
-                    right: width,
-                    bottom: height,
-                    width,
-                    height
-                },
-                table
-            };
-            const customRenderObj = customLayout(arg);
-            if (customRenderObj.rootContainer) {
-                customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer);
-            }
-            if (customRenderObj.rootContainer instanceof Group$2) {
-                elementsGroup = customRenderObj.rootContainer;
-                elementsGroup.name = 'custom-container';
-            }
-            renderDefault = customRenderObj.renderDefault;
-            enableCellPadding = customRenderObj.enableCellPadding;
-        }
-        else if (typeof customRender === 'function') {
-            const arg = {
-                col,
-                row,
-                dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
-                rect: {
-                    left: 0,
-                    top: 0,
-                    right: width,
-                    bottom: height,
-                    width,
-                    height
-                },
-                table
-            };
-            const customRenderObj = customRender(arg);
-            if (customRenderObj) {
-                customElements = customRenderObj.elements;
-                renderDefault = customRenderObj.renderDefault;
-                expectedWidth = customRenderObj.expectedWidth;
-                expectedHeight = customRenderObj.expectedHeight;
-            }
-        }
-        else if (customRender) {
-            expectedWidth = customRender.expectedWidth;
-            expectedHeight = customRender.expectedHeight;
-            customElements = customRender.elements;
-            renderDefault = customRender.renderDefault;
-        }
-        if (customElements) {
-            const value = table.getCellValue(col, row);
-            elementsGroup = adjustElementToGroup(customElements, autoWidth ? expectedWidth : width, autoHeight ? expectedHeight : height, value);
-        }
-        if (enableCellPadding) {
-            elementsGroup.setAttributes({
-                x: padding[3],
-                y: padding[0],
-                width: width - padding[1] - padding[3],
-                height: height - padding[0] - padding[2]
-            });
-        }
-        dealPercentCalc(elementsGroup, width, height);
-        return {
-            elementsGroup,
-            renderDefault
-        };
-    }
-    function adjustElementToGroup(elements, width, height, value) {
-        const customGroup = new Group$2({
-            x: 0,
-            y: 0,
-            width,
-            height,
-            fill: false,
-            stroke: false,
-            pickable: false
-        });
-        customGroup.name = 'custom-container';
-        const elementsAdjusted = adjustElementsPos(elements, width, height, value);
-        elementsAdjusted.forEach(element => {
-            if (element.clickable) {
-                element.pickable = element.clickable;
-            }
-            switch (element.type) {
-                case 'arc':
-                    const arc = createArc({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        fill: element.fill,
-                        stroke: element.stroke,
-                        outerRadius: element.radius,
-                        startAngle: element.startAngle,
-                        endAngle: element.endAngle,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    arc.name = element.name;
-                    customGroup.appendChild(arc);
-                    break;
-                case 'text':
-                    if (element.background) {
-                        const expandX = element.background?.expandX ?? 0;
-                        const expandY = element.background?.expandY ?? 0;
-                        const textBackRect = createRect({
-                            x: element.x - expandX,
-                            y: element.y - expandY,
-                            dx: (element.dx ?? 0),
-                            dy: (element.dy ?? 0),
-                            width: element.width + expandX * 2,
-                            height: element.height + expandY * 2,
-                            cornerRadius: element.background?.cornerRadius ?? 0,
-                            fill: element.background?.fill ?? '#888'
-                        });
-                        customGroup.appendChild(textBackRect);
-                    }
-                    const text = new Text$1(Object.assign({
-                        pickable: !!element.pickable,
-                        fill: element.color ?? element.fill
-                    }, element));
-                    text.name = element.name;
-                    customGroup.appendChild(text);
-                    break;
-                case 'rect':
-                    const rect = createRect({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        width: element.width,
-                        height: element.height,
-                        cornerRadius: element.radius,
-                        fill: element.fill,
-                        stroke: element.stroke,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    rect.name = element.name;
-                    customGroup.appendChild(rect);
-                    break;
-                case 'circle':
-                    const circle = createCircle({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        radius: element.radius,
-                        fill: element.fill,
-                        stroke: element.stroke,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    circle.name = element.name;
-                    customGroup.appendChild(circle);
-                    break;
-                case 'icon':
-                    const icon = new Icon$1({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        width: element.width,
-                        height: element.height,
-                        image: element.svg,
-                        backgroundWidth: element.hover ? (element.hover.width ?? element.width) : undefined,
-                        backgroundHeight: element.hover ? (element.hover.width ?? element.width) : undefined,
-                        backgroundColor: element.hover ? element.hover.bgColor ?? 'rgba(22,44,66,0.2)' : undefined,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    icon.name = element.name;
-                    icon.role = 'icon-custom';
-                    customGroup.appendChild(icon);
-                    break;
-                case 'image':
-                    const image = new Icon$1({
-                        x: element.x,
-                        y: element.y,
-                        dx: (element.dx ?? 0),
-                        dy: (element.dy ?? 0),
-                        width: element.width,
-                        height: element.height,
-                        image: element.src,
-                        backgroundWidth: element.hover ? (element.hover.width ?? element.width) : undefined,
-                        backgroundHeight: element.hover ? (element.hover.width ?? element.width) : undefined,
-                        backgroundColor: element.hover ? element.hover.bgColor ?? 'rgba(22,44,66,0.2)' : undefined,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor,
-                        shape: element.shape
-                    });
-                    image.name = element.name;
-                    image.role = 'image-custom';
-                    customGroup.appendChild(image);
-                    break;
-                case 'line':
-                    const line = createLine({
-                        points: element.points,
-                        stroke: element.stroke,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    line.name = element.name;
-                    customGroup.appendChild(line);
-                    break;
-            }
-        });
-        return customGroup;
-    }
-    function adjustElementsPos(originalElements, width, height, value) {
-        const result = [];
-        const left = 0;
-        const top = 0;
-        const borderLineWidths = [0, 0, 0, 0];
-        for (let i = 0; i < originalElements.length; i++) {
-            const originalElement = originalElements[i];
-            const element = Object.assign({}, originalElement);
-            for (const name in element) {
-                if (element.hasOwnProperty(name) && isFunction$1(element[name])) {
-                    element[name] = element[name](value);
-                }
-            }
-            const rect = element;
-            if (isValid$1(rect.x)) {
-                rect.x = isString$2(rect.x)
-                    ? transformString(rect.x, width - borderLineWidths[1])
-                    : Number(rect.x);
-            }
-            if (isValid$1(rect.y)) {
-                rect.y = isString$2(rect.y)
-                    ? transformString(rect.y, height - borderLineWidths[2])
-                    : Number(rect.y);
-            }
-            if ('width' in element) {
-                element.width = isString$2(element.width)
-                    ? transformString(element.width, width - borderLineWidths[1])
-                    : Number(element.width);
-            }
-            if ('height' in element) {
-                element.height = isString$2(element.height)
-                    ? transformString(element.height, height - borderLineWidths[2])
-                    : Number(element.height);
-            }
-            if ('radius' in element) {
-                element.radius = isString$2(element.radius)
-                    ? transformString(element.radius, Math.min(width - borderLineWidths[1], height - borderLineWidths[2]))
-                    : Number(element.radius);
-            }
-            if ('hover' in element) {
-                element.hover.x = isString$2(element.hover.x)
-                    ? transformString(element.hover.x, width - borderLineWidths[1])
-                    : Number(element.hover.x);
-                element.hover.y = isString$2(element.hover.y)
-                    ? transformString(element.hover.y, height - borderLineWidths[2])
-                    : Number(element.hover.y);
-                element.hover.width = isString$2(element.hover.width)
-                    ? transformString(element.hover.width, width - borderLineWidths[1])
-                    : Number(element.hover.width);
-                element.hover.height = isString$2(element.hover.height)
-                    ? transformString(element.hover.height, height - borderLineWidths[2])
-                    : Number(element.hover.height);
-                element.hover.x += left;
-                element.hover.y += top;
-            }
-            rect.x = rect.x + left;
-            rect.y = rect.y + top;
-            result.push(element);
-        }
-        return result;
-    }
-    function transformString(str, size) {
-        if (str.endsWith('px')) {
-            return parseInt(str, 10);
-        }
-        else if (str.endsWith('%') && size) {
-            return (parseInt(str, 10) / 100) * size;
-        }
-        return parseInt(str, 10);
-    }
-    function dealPercentCalc(group, parentWidth, parentHeight) {
-        if (!group) {
-            return;
-        }
-        group.forEachChildren((child) => {
-            if (!child) {
-                return;
-            }
-            if (isObject$4(child.attribute.width) && child.attribute.width.percent) {
-                child.setAttribute('width', (child.attribute.width.percent / 100) * parentWidth +
-                    (child.attribute.width.delta ?? 0));
-            }
-            if (isObject$4(child.attribute.height) && child.attribute.height.percent) {
-                child.setAttribute('height', (child.attribute.height.percent / 100) * parentHeight +
-                    (child.attribute.height.delta ?? 0));
-            }
-            if (child.type === 'group') {
-                dealPercentCalc(child, child.attribute.width, child.attribute.height);
+            if (table.scenegraph?.proxy.cellCache.get(col)) {
+                table.scenegraph?.proxy.cellCache.set(col, newCellGroup);
             }
-        });
+        }
+        return newCellGroup;
     }
-    function decodeReactDom(dom) {
-        if (!dom || !dom.$$typeof) {
-            return dom;
+    function canUseFastUpdate(col, row, oldCellGroup, autoWrapText, table) {
+        const define = table.getBodyColumnDefine(col, row);
+        const mayHaveIcon = !!define?.icon || !!define?.tree;
+        const cellType = table.getBodyColumnType(col, row);
+        const autoRowHeight = table.heightMode === 'autoHeight';
+        const value = table.getCellValue(col, row);
+        if (!table.isHeader(col, row) &&
+            oldCellGroup.role === 'cell' &&
+            cellType === 'text' &&
+            !autoWrapText &&
+            !autoRowHeight &&
+            !mayHaveIcon &&
+            oldCellGroup.firstChild?.type === 'text' &&
+            !isPromise(value)) {
+            return true;
         }
-        const type = dom.type;
-        const { attribute, children, stateProxy } = dom.props;
-        const g = type({ attribute });
-        parseToGraphic(g, dom.props);
-        if (stateProxy) {
-            g.stateProxy = stateProxy;
+        return false;
+    }
+    function dealWithMergeCellSize(range, cellWidth, cellHeight, padding, textAlign, textBaseline, table) {
+        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) {
+                    updateCellContentHeight(cellGroup, cellHeight, cellHeight, table.heightMode === 'autoHeight', padding, textAlign, textBaseline);
+                }
+                if (range.start.col !== range.end.col) {
+                    updateCellContentWidth(cellGroup, cellWidth, cellHeight, 0, table.heightMode === 'autoHeight', padding, textAlign, textBaseline, table.scenegraph);
+                }
+                cellGroup.contentWidth = cellWidth;
+                cellGroup.contentHeight = cellHeight;
+                const rangeHeight = table.getRowHeight(row);
+                const rangeWidth = table.getColWidth(col);
+                resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table);
+            }
         }
-        g.id = attribute.id;
-        g.name = attribute.name;
-        if (isArray$1(children)) {
-            children.forEach((item) => {
-                const c = decodeReactDom(item);
-                c && c.type && g.add(c);
+    }
+    function resizeCellGroup(cellGroup, rangeWidth, rangeHeight, range, table) {
+        const { col, row } = cellGroup;
+        const dx = -table.getColsWidth(range.start.col, col - 1);
+        const dy = -table.getRowsHeight(range.start.row, row - 1);
+        cellGroup.forEachChildren((child) => {
+            child.setAttributes({
+                dx: (child.attribute.dx ?? 0) + dx,
+                dy: (child.attribute.dy ?? 0) + dy
             });
+        });
+        const lineWidth = cellGroup.attribute.lineWidth;
+        const isLineWidthArray = isArray$1(lineWidth);
+        const newLineWidth = [0, 0, 0, 0];
+        if (col === range.start.col) {
+            newLineWidth[3] = isLineWidthArray ? lineWidth[3] : lineWidth;
         }
-        else if (children) {
-            g.add(decodeReactDom(children));
+        if (row === range.start.row) {
+            newLineWidth[0] = isLineWidthArray ? lineWidth[0] : lineWidth;
         }
-        return g;
-    }
-    function parseToGraphic(g, props) {
-        let isGraphic = false;
-        switch (g.type) {
-            case 'richtext':
-                break;
-            case 'rich/image':
-                break;
-            default:
-                isGraphic = true;
+        if (col === range.end.col) {
+            newLineWidth[1] = isLineWidthArray ? lineWidth[1] : lineWidth;
         }
-        if (isGraphic) {
-            Object.keys(props).forEach(k => {
-                const en = REACT_TO_CANOPUS_EVENTS[k];
-                if (en) {
-                    g.on(en, props[k]);
-                }
-            });
+        if (row === range.end.row) {
+            newLineWidth[2] = isLineWidthArray ? lineWidth[2] : lineWidth;
         }
+        const widthChange = rangeWidth !== cellGroup.attribute.width;
+        const heightChange = rangeHeight !== cellGroup.attribute.height;
+        cellGroup.setAttributes({
+            width: rangeWidth,
+            height: rangeHeight,
+            strokeArrayWidth: newLineWidth
+        });
+        cellGroup.mergeStartCol = range.start.col;
+        cellGroup.mergeStartRow = range.start.row;
+        cellGroup.mergeEndCol = range.end.col;
+        cellGroup.mergeEndRow = range.end.row;
+        return {
+            widthChange,
+            heightChange
+        };
     }
     function getCustomCellMergeCustom(col, row, cellGroup, table) {
         if (table.internalProps.customMergeCell) {
@@ -38850,7 +38717,7 @@
         }
     };
 
-    const regedIcons = get$1();
+    const regedIcons = get$2();
     class DrillIcon {
         icon;
         constructor() {
@@ -40725,7 +40592,7 @@
                 return false;
             }
             if (!loadingImage) {
-                const regedIcons = get$1();
+                const regedIcons = get$2();
                 const svg = regedIcons.loading_pic.svg;
                 const width = regedIcons.loading_pic.width;
                 const height = regedIcons.loading_pic.height;
@@ -41195,6 +41062,146 @@
     const emptyGroup = new Group$1({});
     emptyGroup.role = 'empty';
 
+    function createComplexColumn(columnGroup, col, colWidth, rowStart, rowEnd, mergeMap, defaultRowHeight, table, cellLocation, rowLimit) {
+        let padding;
+        let textAlign;
+        let textBaseline;
+        let y = 0;
+        if (columnGroup.lastChild && columnGroup.lastChild.row === rowStart - 1) {
+            y = columnGroup.lastChild.attribute.y + columnGroup.lastChild.attribute.height;
+        }
+        else if (columnGroup.colHeight) {
+            y = columnGroup.colHeight;
+        }
+        for (let j = rowStart; j <= rowEnd; j++) {
+            const row = j;
+            let value = table.getCellValue(col, row);
+            let cellWidth = colWidth;
+            let cellHeight = table.getRowHeight(row);
+            let range;
+            let isMerge;
+            let customStyle;
+            let customResult;
+            if (table.internalProps.customMergeCell) {
+                const customMerge = table.getCustomMerge(col, row);
+                if (customMerge) {
+                    const { range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout, customRender } = customMerge;
+                    range = customMergeRange;
+                    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);
+                        cellWidth = mergeSize.cellWidth;
+                        cellHeight = mergeSize.cellHeight;
+                    }
+                    value = customMergeText;
+                    customStyle = customMergeStyle;
+                    if (customLayout || customRender) {
+                        customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), false, table.heightMode === 'autoHeight', [0, 0, 0, 0], table);
+                    }
+                }
+            }
+            let colForDefine = col;
+            let rowForDefine = row;
+            if (range) {
+                colForDefine = range.start.col;
+                rowForDefine = range.start.row;
+            }
+            const define = cellLocation !== 'body'
+                ? table.getHeaderDefine(colForDefine, rowForDefine)
+                : table.getBodyColumnDefine(colForDefine, rowForDefine);
+            const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
+            if (!range && (cellLocation !== 'body' || define?.mergeCell)) {
+                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);
+                    cellWidth = mergeSize.cellWidth;
+                    cellHeight = mergeSize.cellHeight;
+                }
+            }
+            const cellStyle = customStyle || table._getCellStyle(col, row);
+            const cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
+            cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
+            cellTheme.group.width = colWidth;
+            cellTheme.group.height = Array.isArray(defaultRowHeight) ? defaultRowHeight[row] : defaultRowHeight;
+            if (cellTheme._vtable.padding) {
+                padding = cellTheme._vtable.padding;
+            }
+            if (cellTheme.text.textAlign) {
+                textAlign = cellTheme.text.textAlign;
+            }
+            if (cellTheme.text.textBaseline) {
+                textBaseline = cellTheme.text.textBaseline;
+            }
+            if (cellLocation !== 'body' && !cellTheme.group.fill) {
+                cellTheme.group.fill = '#fff';
+            }
+            const type = (table.isHeader(col, row) ? table._getHeaderLayoutMap(col, row).headerType : table.getBodyColumnType(col, row)) ||
+                'text';
+            if (isPromise(value)) {
+                dealPromiseData(value, table, createCell.bind(null, type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult));
+                columnGroup.updateColumnRowNumber(row);
+                const height = table.getRowHeight(row);
+                columnGroup.updateColumnHeight(height);
+                y += height;
+            }
+            else {
+                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
+                columnGroup.updateColumnRowNumber(row);
+                if (isMerge) {
+                    const rangeHeight = table.getRowHeight(row);
+                    const rangeWidth = 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);
+                    columnGroup.updateColumnHeight(rangeHeight);
+                    y += rangeHeight;
+                }
+                else {
+                    columnGroup.updateColumnHeight(cellGroup.attribute.height);
+                    y += cellGroup.attribute.height;
+                }
+            }
+            if (rowLimit && row > rowLimit) {
+                break;
+            }
+        }
+        columnGroup.setAttribute('width', colWidth);
+        return {
+            width: colWidth,
+            height: y
+        };
+    }
+    function dealMerge(range, mergeMap, table, forceUpdate) {
+        let cellWidth = 0;
+        let cellHeight = 0;
+        const mergeResult = mergeMap.get(`${range.start.col},${range.start.row};${range.end.col},${range.end.row}`);
+        if (!mergeResult || forceUpdate) {
+            for (let col = range.start.col; col <= range.end.col; col++) {
+                cellWidth += table.getColWidth(col);
+            }
+            for (let i = range.start.row; i <= range.end.row; i++) {
+                cellHeight += table.getRowHeight(i);
+            }
+            mergeMap.set(`${range.start.col},${range.start.row};${range.end.col},${range.end.row}`, {
+                cellWidth,
+                cellHeight
+            });
+        }
+        else {
+            cellWidth = mergeResult.cellWidth;
+            cellHeight = mergeResult.cellHeight;
+        }
+        return {
+            cellWidth,
+            cellHeight
+        };
+    }
+
     function createColGroup(containerGroup, xOrigin, yOrigin, colStart, colEnd, rowStart, rowEnd, cellLocation, table, rowLimit) {
         if (colStart > colEnd || rowStart > rowEnd) {
             return;
@@ -49568,7 +49575,7 @@
         _table;
         constructor(_table) {
             this._table = _table;
-            const regedIcons = get$1();
+            const regedIcons = get$2();
             this.expandIcon = regedIcons[InternalIconName.expandIconName];
             this.collapseIcon = regedIcons[InternalIconName.collapseIconName];
         }
@@ -49590,7 +49597,7 @@
                 else {
                     iconResults = iconDefine;
                 }
-                const regedIcons = get$1();
+                const regedIcons = get$2();
                 const addIcon = (columnIcon) => {
                     let icon;
                     if (typeof columnIcon === 'string') {
@@ -50336,7 +50343,7 @@
         _table;
         constructor(_table) {
             this._table = _table;
-            const regedIcons = get$1();
+            const regedIcons = get$2();
             this.freezeIcon = regedIcons[InternalIconName.freezeIconName];
             this.frozenIcon = regedIcons[InternalIconName.frozenIconName];
             this.frozenCurrentIcon = regedIcons[InternalIconName.frozenCurrentIconName];
@@ -50421,7 +50428,7 @@
                 else {
                     headerIconStrs = headerIcon;
                 }
-                const regedIcons = get$1();
+                const regedIcons = get$2();
                 const addIcon = (headerIcon) => {
                     let icon;
                     if (typeof headerIcon === 'string') {
@@ -52453,7 +52460,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.20.0";
+        version = "0.20.1-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -56385,7 +56392,7 @@
                 range1.start.row === range2.start.row &&
                 range1.end.row === range2.end.row);
         }
-        getRecordIndexByCell(col, row) {
+        getRecordShowIndexByCell(col, row) {
             const skipRowCount = this.hasAggregationOnTopCount ? this.headerLevelCount + 1 : this.headerLevelCount;
             if (this.transpose) {
                 if (col < skipRowCount) {
@@ -57152,7 +57159,12 @@
         }
         getRecordShowIndexByCell(col, row) {
             const { layoutMap } = this.internalProps;
-            return layoutMap.getRecordIndexByCell(col, row);
+            return layoutMap.getRecordShowIndexByCell(col, row);
+        }
+        getRecordIndexByCell(col, row) {
+            const { layoutMap } = this.internalProps;
+            const recordShowIndex = layoutMap.getRecordShowIndexByCell(col, row);
+            return this.dataSource.currentPagerIndexedData[recordShowIndex];
         }
         getTableIndexByRecordIndex(recordIndex) {
             if (this.transpose) {
@@ -59285,7 +59297,7 @@
         getRecordStartRowByRecordIndex(index) {
             return this.columnHeaderLevelCount + index;
         }
-        getRecordIndexByCell(col, row) {
+        getRecordShowIndexByCell(col, row) {
             return undefined;
         }
         getCellHeaderPathsWidthTreeNode(col, row) {
@@ -63506,7 +63518,7 @@
         constructor(options) {
             let cache;
             if (isString$2(options.iconName)) {
-                const regedIcons = get$1();
+                const regedIcons = get$2();
                 cache = regedIcons[options.iconName];
                 if (cache) {
                     options.width = options.width ?? cache.width;
@@ -63931,9 +63943,9 @@
     }
 
     registerForVrender();
-    const version = "0.20.0";
+    const version = "0.20.1-alpha.0";
     function getIcons() {
-        return get$1();
+        return get$2();
     }
     function clearGlobal() {
         clearAll();