@visactor/vtable 0.17.10-alpha.6 → 0.17.10-alpha.7

package/dist/vtable.js

@@ -6903,25 +6903,6 @@
       return lineHeight;
     };
 
-    const normalizeRectAttributes = attribute => {
-      if (!attribute) return {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      };
-      let width = isNil$1(attribute.width) ? attribute.x1 - attribute.x : attribute.width,
-        height = isNil$1(attribute.height) ? attribute.y1 - attribute.y : attribute.height,
-        x = 0,
-        y = 0;
-      return width < 0 ? (x = width, width = -width) : Number.isNaN(width) && (width = 0), height < 0 ? (y = height, height = -height) : Number.isNaN(height) && (height = 0), {
-        x: x,
-        y: y,
-        width: width,
-        height: height
-      };
-    };
-
     var ColorType;
     !function (ColorType) {
       ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
@@ -8023,7 +8004,7 @@
     const SYMBOL_NUMBER_TYPE = genNumberType();
     const TEXT_NUMBER_TYPE = genNumberType();
     const GraphicService = Symbol.for("GraphicService");
-    const GraphicCreator$1 = Symbol.for("GraphicCreator");
+    const GraphicCreator$2 = Symbol.for("GraphicCreator");
     const SVG_PARSE_ATTRIBUTE_MAP = {
       "stroke-linecap": "lineCap",
       "stroke-linejoin": "lineJoin",
@@ -10176,14 +10157,13 @@
         return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
       }
       toCustomPath() {
-        const attribute = this.attribute,
-          {
-            x: x,
-            y: y,
-            width: width,
-            height: height
-          } = normalizeRectAttributes(attribute),
-          path = new CustomPath2D();
+        const attribute = this.attribute;
+        let width = isNil$1(attribute.width) ? attribute.x1 - attribute.x : attribute.width,
+          height = isNil$1(attribute.height) ? attribute.y1 - attribute.y : attribute.height,
+          x = 0,
+          y = 0;
+        width < 0 && (x = width, width = -width), height < 0 && (y = height, height = -height);
+        const path = new CustomPath2D();
         return path.moveTo(x, y), path.rect(x, y, width, height), path;
       }
       clone() {
@@ -12250,9 +12230,9 @@
         return !!visible || (aabbBounds.clear(), !1);
       }
     };
-    DefaultGraphicService = __decorate$19([injectable(), __param$F(0, inject(GraphicCreator$1)), __metadata$S("design:paramtypes", [Object])], DefaultGraphicService);
+    DefaultGraphicService = __decorate$19([injectable(), __param$F(0, inject(GraphicCreator$2)), __metadata$S("design:paramtypes", [Object])], DefaultGraphicService);
 
-    class GraphicCreator {
+    let GraphicCreator$1 = class GraphicCreator {
       constructor() {
         this.store = new Map();
       }
@@ -12263,12 +12243,12 @@
         const cb = this.store.get(name);
         return cb ? cb(params) : null;
       }
-    }
-    const graphicCreator = new GraphicCreator();
+    };
+    const graphicCreator$1 = new GraphicCreator$1();
 
-    let text;
-    function getTextBounds(params) {
-      return text || (text = graphicCreator.CreateGraphic("text", {})), text.setAttributes(params), text.AABBBounds;
+    let text$1;
+    function getTextBounds$1(params) {
+      return text$1 || (text$1 = graphicCreator$1.CreateGraphic("text", {})), text$1.setAttributes(params), text$1.AABBBounds;
     }
 
     const result = {
@@ -14787,7 +14767,7 @@
     });
 
     var graphicModule = new ContainerModule(bind => {
-      bind(GraphicService).to(DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$1).toConstantValue(graphicCreator);
+      bind(GraphicService).to(DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$2).toConstantValue(graphicCreator$1);
     });
 
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
@@ -15278,7 +15258,7 @@
       getShadowRoot(interactiveLayer) {
         var _a;
         let group = interactiveLayer.getElementById("_interactive_group");
-        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
+        return group || (group = graphicCreator$1.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
       }
     }
     class Canvas3DDrawItemInterceptor {
@@ -15554,7 +15534,7 @@
         return this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
       clearScreen(renderService, context, drawContext) {
-        var _a, _b;
+        var _a;
         const {
           clear: clear
         } = drawContext;
@@ -15568,7 +15548,7 @@
             y = 0;
           context.clearRect(x, y, width, height);
           const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
-          if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
+          if (stage && stage.backgroundImg && stage.resources) {
             const res = stage.resources.get(clear);
             res && "success" === res.state && res.data && context.drawImage(res.data, x, y, width, height);
           } else context.fillStyle = createColor(context, clear, {
@@ -15824,7 +15804,10 @@
       constructor(contributions, lineRender, areaRender, drawItemInterceptorContributions) {
         super(contributions, drawItemInterceptorContributions), this.contributions = contributions, this.lineRender = lineRender, this.areaRender = areaRender, this.drawItemInterceptorContributions = drawItemInterceptorContributions, this.rendering = !1, this.currFrameStartAt = 0, this.currentIdx = 0, this.status = STATUS.NORMAL, this.checkingForDrawPromise = null, this.hooks = {
           completeDraw: new SyncHook([])
-        }, this.defaultRenderMap.set(this.lineRender.numberType, this.lineRender), this.defaultRenderMap.set(this.areaRender.numberType, this.areaRender);
+        };
+      }
+      init() {
+        super.init(), this.defaultRenderMap.set(this.lineRender.numberType, this.lineRender), this.defaultRenderMap.set(this.areaRender.numberType, this.areaRender);
       }
       draw(renderService, drawContext) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -16473,10 +16456,17 @@
 
     let _isBrowserEnv;
     function initIsBrowserEnv() {
-      if (null == _isBrowserEnv) try {
-        _isBrowserEnv = !!window;
-      } catch (err) {
-        _isBrowserEnv = !1;
+      if (null == _isBrowserEnv) {
+        try {
+          _isBrowserEnv = !!window;
+        } catch (err) {
+          _isBrowserEnv = !1;
+        }
+        if (_isBrowserEnv) try {
+          _isBrowserEnv = !tt;
+        } catch (err) {
+          _isBrowserEnv = !0;
+        }
       }
     }
     function isBrowserEnv() {
@@ -17809,75 +17799,75 @@
     });
 
     function registerArcGraphic() {
-      graphicCreator.RegisterGraphicCreator("arc", createArc);
+      graphicCreator$1.RegisterGraphicCreator("arc", createArc);
     }
 
     function registerArc3dGraphic() {
-      graphicCreator.RegisterGraphicCreator("arc3d", createArc3d);
+      graphicCreator$1.RegisterGraphicCreator("arc3d", createArc3d);
     }
 
     function registerAreaGraphic() {
-      graphicCreator.RegisterGraphicCreator("area", createArea);
+      graphicCreator$1.RegisterGraphicCreator("area", createArea);
     }
 
     function registerCircleGraphic() {
-      graphicCreator.RegisterGraphicCreator("circle", createCircle);
+      graphicCreator$1.RegisterGraphicCreator("circle", createCircle);
     }
 
     function registerGlyphGraphic() {
-      graphicCreator.RegisterGraphicCreator("glyph", createGlyph);
+      graphicCreator$1.RegisterGraphicCreator("glyph", createGlyph);
     }
 
     function registerGroupGraphic() {
-      graphicCreator.RegisterGraphicCreator("group", createGroup);
+      graphicCreator$1.RegisterGraphicCreator("group", createGroup);
     }
 
     function registerImageGraphic() {
-      graphicCreator.RegisterGraphicCreator("image", createImage);
+      graphicCreator$1.RegisterGraphicCreator("image", createImage);
     }
 
     function registerLineGraphic() {
-      graphicCreator.RegisterGraphicCreator("line", createLine);
+      graphicCreator$1.RegisterGraphicCreator("line", createLine);
     }
 
     function registerPathGraphic() {
-      graphicCreator.RegisterGraphicCreator("path", createPath);
+      graphicCreator$1.RegisterGraphicCreator("path", createPath);
     }
 
     function registerPolygonGraphic() {
-      graphicCreator.RegisterGraphicCreator("polygon", createPolygon);
+      graphicCreator$1.RegisterGraphicCreator("polygon", createPolygon);
     }
 
     function registerPyramid3dGraphic() {
-      graphicCreator.RegisterGraphicCreator("pyramid3d", createPyramid3d);
+      graphicCreator$1.RegisterGraphicCreator("pyramid3d", createPyramid3d);
     }
 
     function registerRectGraphic() {
-      graphicCreator.RegisterGraphicCreator("rect", createRect);
+      graphicCreator$1.RegisterGraphicCreator("rect", createRect);
     }
 
     function registerRect3dGraphic() {
-      graphicCreator.RegisterGraphicCreator("rect3d", createRect3d);
+      graphicCreator$1.RegisterGraphicCreator("rect3d", createRect3d);
     }
 
     function registerRichtextGraphic() {
-      graphicCreator.RegisterGraphicCreator("richtext", createRichText);
+      graphicCreator$1.RegisterGraphicCreator("richtext", createRichText);
     }
 
     function registerSymbolGraphic() {
-      graphicCreator.RegisterGraphicCreator("symbol", createSymbol);
+      graphicCreator$1.RegisterGraphicCreator("symbol", createSymbol);
     }
 
     function registerTextGraphic() {
-      graphicCreator.RegisterGraphicCreator("text", createText);
+      graphicCreator$1.RegisterGraphicCreator("text", createText);
     }
 
     function registerShadowRootGraphic() {
-      graphicCreator.RegisterGraphicCreator("shadowRoot", createShadowRoot);
+      graphicCreator$1.RegisterGraphicCreator("shadowRoot", createShadowRoot);
     }
 
     function registerWrapTextGraphic() {
-      graphicCreator.RegisterGraphicCreator("wrapText", createWrapText);
+      graphicCreator$1.RegisterGraphicCreator("wrapText", createWrapText);
     }
 
     const REACT_TO_CANOPUS_EVENTS = {
@@ -17928,40 +17918,40 @@
       onDblClick: "dblclick"
     };
     function VArc(params) {
-      return graphicCreator.arc(params ? params.attribute : {});
+      return graphicCreator$1.arc(params ? params.attribute : {});
     }
     function VArea(params) {
-      return graphicCreator.area(params ? params.attribute : {});
+      return graphicCreator$1.area(params ? params.attribute : {});
     }
     function VCircle(params) {
-      return graphicCreator.circle(params ? params.attribute : {});
+      return graphicCreator$1.circle(params ? params.attribute : {});
     }
     function VGroup(params) {
-      return graphicCreator.group(params ? params.attribute : {});
+      return graphicCreator$1.group(params ? params.attribute : {});
     }
     function VGlyph(params) {
-      return graphicCreator.glyph(params ? params.attribute : {});
+      return graphicCreator$1.glyph(params ? params.attribute : {});
     }
     function VImage(params) {
-      return graphicCreator.image(params ? params.attribute : {});
+      return graphicCreator$1.image(params ? params.attribute : {});
     }
     function VLine(params) {
-      return graphicCreator.line(params ? params.attribute : {});
+      return graphicCreator$1.line(params ? params.attribute : {});
     }
     function VPath(params) {
-      return graphicCreator.path(params ? params.attribute : {});
+      return graphicCreator$1.path(params ? params.attribute : {});
     }
     function VPolygon(params) {
-      return graphicCreator.polygon(params ? params.attribute : {});
+      return graphicCreator$1.polygon(params ? params.attribute : {});
     }
     function VRect(params) {
-      return graphicCreator.rect(params ? params.attribute : {});
+      return graphicCreator$1.rect(params ? params.attribute : {});
     }
     function VSymbol(params) {
-      return graphicCreator.symbol(params ? params.attribute : {});
+      return graphicCreator$1.symbol(params ? params.attribute : {});
     }
     function VText(params) {
-      return graphicCreator.text(params ? params.attribute : {});
+      return graphicCreator$1.text(params ? params.attribute : {});
     }
 
     var __rest$4 = undefined && undefined.__rest || function (s, e) {
@@ -17986,7 +17976,7 @@
         } = _a,
         props = __rest$4(_a, ["key", "attribute", "stateProxy"]);
       let c = type;
-      isString$2(type) && (c = graphicCreator[type]);
+      isString$2(type) && (c = graphicCreator$1[type]);
       const childrenList = [];
       for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
         children[_key - 2] = arguments[_key];
@@ -20968,38 +20958,7 @@
       loaded || (loaded = !0, registerWrapTextGraphic());
     }
 
-    let registed = false;
-    function registerForVrender() {
-        if (registed) {
-            return;
-        }
-        registed = true;
-        preLoadAllModule();
-        if (isBrowserEnv()) {
-            loadBrowserEnv(container);
-        }
-        else if (isNodeEnv()) {
-            loadNodeEnv(container);
-        }
-        registerArc();
-        registerArc3d();
-        registerArea();
-        registerCircle();
-        registerGlyph();
-        registerGroup();
-        registerImage();
-        registerLine();
-        registerPath();
-        registerPolygon();
-        registerPyramid3d();
-        registerRect();
-        registerRect3d();
-        registerRichtext();
-        registerShadowRoot();
-        registerSymbol();
-        registerText();
-        registerWrapText();
-    }
+    preLoadAllModule(), isBrowserEnv() ? loadBrowserEnv(container) : isNodeEnv() && loadNodeEnv(container), registerArc(), registerArc3d(), registerArea(), registerCircle(), registerGlyph(), registerGroup(), registerImage(), registerLine(), registerPath(), registerPolygon(), registerPyramid3d(), registerRect(), registerRect3d(), registerRichtext(), registerShadowRoot(), registerSymbol(), registerText(), registerWrapText();
 
     var InteractionState;
     (function (InteractionState) {
@@ -23969,6 +23928,12 @@
     });
 
     function getCellMergeInfo(table, col, row) {
+        if (table.internalProps.customMergeCell) {
+            const customMerge = table.getCustomMerge(col, row);
+            if (customMerge) {
+                return customMerge.range;
+            }
+        }
         if (!table.isHeader(col, row) && !table.getBodyColumnDefine(col, row)?.mergeCell) {
             return false;
         }
@@ -24296,7 +24261,6 @@
       return direct ? angleLargeThanPI ? 2 * Math.PI - ang : ang : angleLargeThanPI ? ang : 2 * Math.PI - ang;
     }
 
-    const DEFAULT_TEXT_FONT_FAMILY$1 = "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol";
     var StateValue;
     !function (StateValue) {
       StateValue.selected = "selected", StateValue.selectedReverse = "selected_reverse", StateValue.hover = "hover", StateValue.hoverReverse = "hover_reverse";
@@ -24315,18 +24279,17 @@
     };
 
     function measureTextSize(text, textSpec) {
-      let fontFamily = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_TEXT_FONT_FAMILY$1;
-      var _a, _b;
+      var _a;
       if (!text) return {
         width: 0,
         height: 0
       };
-      const bounds = getTextBounds({
+      const bounds = getTextBounds$1({
         text: text,
-        fontFamily: null !== (_a = textSpec.fontFamily) && void 0 !== _a ? _a : fontFamily,
+        fontFamily: textSpec.fontFamily,
         fontSize: textSpec.fontSize || 12,
         fontWeight: textSpec.fontWeight,
-        textAlign: null !== (_b = textSpec.textAlign) && void 0 !== _b ? _b : "center",
+        textAlign: null !== (_a = textSpec.textAlign) && void 0 !== _a ? _a : "center",
         textBaseline: textSpec.textBaseline,
         ellipsis: !!textSpec.ellipsis,
         maxLineWidth: textSpec.maxLineWidth || 1 / 0,
@@ -24357,7 +24320,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
       render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const {
             text = "",
             textStyle = {},
@@ -24462,11 +24425,11 @@
             y: 0
           });
           isNil$1(textAttrs.lineHeight) && (textAttrs.lineHeight = textStyle.fontSize), textShape = group.createOrUpdateChild("tag-text", textAttrs, "text"), isEmpty(null == state ? void 0 : state.text) || (textShape.states = state.text);
-          const textBounds = measureTextSize(textAttrs.text, textStyle, null === (_c = this.stage) || void 0 === _c ? void 0 : _c.getTheme().text.fontFamily),
+          const textBounds = measureTextSize(textAttrs.text, textStyle),
             textWidth = textBounds.width,
             textHeight = textBounds.height;
           tagWidth += textWidth;
-          const size = null !== (_d = shape.size) && void 0 !== _d ? _d : 10,
+          const size = null !== (_c = shape.size) && void 0 !== _c ? _c : 10,
             maxSize = isNumber$3(size) ? size : Math.max(size[0], size[1]);
           tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
           const {
@@ -24969,7 +24932,7 @@
           }
           points.forEach((point, index) => {
             var _a, _b;
-            const line = graphicCreator.line(Object.assign(Object.assign({
+            const line = graphicCreator$1.line(Object.assign(Object.assign({
               points: point
             }, isArray$1(lineStyle) ? null !== (_a = lineStyle[index]) && void 0 !== _a ? _a : lineStyle[lineStyle.length - 1] : lineStyle), {
               fill: !1
@@ -24977,7 +24940,7 @@
             line.name = `${this.name}-line`, line.id = this._getNodeId("line" + index), isEmpty(null == state ? void 0 : state.line) || (line.states = isArray$1(state.line) ? null !== (_b = state.line[index]) && void 0 !== _b ? _b : state.line[state.line.length - 1] : state.line), this.add(line);
           });
         } else {
-          const line = graphicCreator.polygon(Object.assign(Object.assign({
+          const line = graphicCreator$1.polygon(Object.assign(Object.assign({
             points: this._clipPoints(this.attribute.points)
           }, array$1(lineStyle)[0]), {
             fill: !1,
@@ -25016,7 +24979,7 @@
           }, rotate = startAngle + Math.PI / 2) : (position = {
             x: end.x + (isValidNumber$1(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
             y: end.y + (isValidNumber$1(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
-          }, rotate = endAngle + Math.PI / 2), symbol = graphicCreator.symbol(Object.assign(Object.assign(Object.assign({}, position), {
+          }, rotate = endAngle + Math.PI / 2), symbol = graphicCreator$1.symbol(Object.assign(Object.assign(Object.assign({}, position), {
             symbolType: symbolType,
             size: size,
             angle: autoRotate ? rotate + refAngle : 0,
@@ -25209,14 +25172,14 @@
       getBoundsWithoutRender(attributes) {
         const currentAttribute = cloneDeep(this.attribute);
         merge(this.attribute, attributes);
-        const offscreenGroup = graphicCreator.group({
+        const offscreenGroup = graphicCreator$1.group({
           x: this.attribute.x,
           y: this.attribute.y
         });
         return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), this.attribute = currentAttribute, offscreenGroup.AABBBounds;
       }
       render() {
-        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator.group({
+        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -25238,13 +25201,13 @@
             line: line,
             items: items
           } = this.attribute,
-          axisContainer = graphicCreator.group({
+          axisContainer = graphicCreator$1.group({
             x: 0,
             y: 0,
             zIndex: 1
           });
         if (axisContainer.name = AXIS_ELEMENT_NAME.axisContainer, axisContainer.id = this._getNodeId("container"), axisContainer.setMode(this.mode), this.axisContainer = axisContainer, container.add(axisContainer), line && line.visible && this.renderLine(axisContainer), items && items.length && (this.data = this._transformItems(items[0]), tick && tick.visible && this.renderTicks(axisContainer), label && label.visible)) {
-          const labelGroup = graphicCreator.group({
+          const labelGroup = graphicCreator$1.group({
             x: 0,
             y: 0,
             pickable: !1
@@ -25277,14 +25240,14 @@
       }
       renderTicks(container) {
         const tickLineItems = this.getTickLineItems(),
-          tickLineGroup = graphicCreator.group({
+          tickLineGroup = graphicCreator$1.group({
             x: 0,
             y: 0,
             pickable: !1
           });
         tickLineGroup.name = AXIS_ELEMENT_NAME.tickContainer, tickLineGroup.id = this._getNodeId("tick-container"), container.add(tickLineGroup), tickLineItems.forEach((item, index) => {
           var _a;
-          const line = graphicCreator.line(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
+          const line = graphicCreator$1.line(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
           if (line.name = AXIS_ELEMENT_NAME.tick, line.id = this._getNodeId(item.id), isEmpty(null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.state)) line.states = DEFAULT_STATES$2;else {
             const data = this.data[index],
               tickLineState = merge({}, DEFAULT_STATES$2, this.attribute.tick.state);
@@ -25300,7 +25263,7 @@
         if (subTick && subTick.visible) {
           const subTickLineItems = this.getSubTickLineItems();
           subTickLineItems.length && subTickLineItems.forEach((item, index) => {
-            const line = graphicCreator.line(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
+            const line = graphicCreator$1.line(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
             if (line.name = AXIS_ELEMENT_NAME.subTick, line.id = this._getNodeId(`${index}`), isEmpty(subTick.state)) line.states = DEFAULT_STATES$2;else {
               const subTickLineState = merge({}, DEFAULT_STATES$2, subTick.state);
               Object.keys(subTickLineState).forEach(key => {
@@ -25317,7 +25280,7 @@
         } = this.attribute.label;
         dataFilter && isFunction$1(dataFilter) && (items = dataFilter(items, layer));
         const data = this._transformItems(items),
-          labelGroup = graphicCreator.group({
+          labelGroup = graphicCreator$1.group({
             x: 0,
             y: 0,
             pickable: !1
@@ -25326,9 +25289,9 @@
           var _a, _b, _c;
           const labelStyle = this._getLabelAttribute(item, index, data, layer);
           let text;
-          if ("rich" === labelStyle.type ? (labelStyle.textConfig = labelStyle.text, labelStyle.width = null !== (_a = labelStyle.width) && void 0 !== _a ? _a : 0, labelStyle.height = null !== (_b = labelStyle.height) && void 0 !== _b ? _b : 0, text = graphicCreator.richtext(labelStyle)) : "html" === labelStyle.type ? (labelStyle.textConfig = [], labelStyle.html = Object.assign(Object.assign({
+          if ("rich" === labelStyle.type ? (labelStyle.textConfig = labelStyle.text, labelStyle.width = null !== (_a = labelStyle.width) && void 0 !== _a ? _a : 0, labelStyle.height = null !== (_b = labelStyle.height) && void 0 !== _b ? _b : 0, text = graphicCreator$1.richtext(labelStyle)) : "html" === labelStyle.type ? (labelStyle.textConfig = [], labelStyle.html = Object.assign(Object.assign({
             dom: labelStyle.text
-          }, DEFAULT_HTML_TEXT_SPEC), labelStyle), text = graphicCreator.richtext(labelStyle)) : text = graphicCreator.text(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_c = this.attribute.label) || void 0 === _c ? void 0 : _c.state)) text.states = DEFAULT_STATES$2;else {
+          }, DEFAULT_HTML_TEXT_SPEC), labelStyle), text = graphicCreator$1.richtext(labelStyle)) : text = graphicCreator$1.text(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_c = this.attribute.label) || void 0 === _c ? void 0 : _c.state)) text.states = DEFAULT_STATES$2;else {
             const labelState = merge({}, DEFAULT_STATES$2, this.attribute.label.state);
             Object.keys(labelState).forEach(key => {
               isFunction$1(labelState[key]) && (labelState[key] = labelState[key](item, index, data, layer));
@@ -25784,7 +25747,7 @@
         if (panel && panel.visible) {
           const axisContainer = this.axisContainer,
             axisContainerBounds = axisContainer.AABBBounds,
-            bgRect = graphicCreator.rect(Object.assign({
+            bgRect = graphicCreator$1.rect(Object.assign({
               x: axisContainerBounds.x1,
               y: axisContainerBounds.y1,
               width: axisContainerBounds.width(),
@@ -26044,7 +26007,7 @@
           const minSize = this._getAxisLabelLimitLength(verticalMinSize, layerCount);
           let x, y;
           axisLabelContainerSize = Math.max(axisLabelContainerSize, minSize), "left" === orient ? (x = axisLabelContainerBounds.x2 - axisLabelContainerSize, y = axisLabelContainerBounds.y1) : "right" === orient ? (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y1) : "top" === orient ? (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y2 - axisLabelContainerSize) : "bottom" === orient && (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y1);
-          const bgRect = graphicCreator.rect({
+          const bgRect = graphicCreator$1.rect({
             x: x,
             y: y,
             width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
@@ -26059,7 +26022,7 @@
         }
       }
       _getAxisLabelLimitLength(limitSize, layerCount) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const {
             label: label,
             title: title,
@@ -26073,7 +26036,7 @@
         const axisLineWidth = line && line.visible ? null !== (_b = line.style.lineWidth) && void 0 !== _b ? _b : 1 : 0,
           tickLength = tick && tick.visible ? null !== (_c = tick.length) && void 0 !== _c ? _c : 4 : 0;
         if (title && title.visible && "string" == typeof title.text) {
-          titleHeight = measureTextSize(title.text, title.textStyle, null === (_d = this.stage) || void 0 === _d ? void 0 : _d.getTheme().text.fontFamily).height;
+          titleHeight = measureTextSize(title.text, title.textStyle).height;
           const padding = normalizePadding(title.padding);
           titleSpacing = title.space + padding[0] + padding[2];
         }
@@ -26136,7 +26099,7 @@
         };
       }
       render() {
-        var _a, _b;
+        var _a;
         this._reset();
         const {
           layout = "horizontal",
@@ -26149,7 +26112,7 @@
         this._current = defaultCurrent;
         const parsedPadding = normalizePadding(padding),
           isHorizontal = "horizontal" === layout,
-          container = graphicCreator.group({
+          container = graphicCreator$1.group({
             x: 0,
             y: 0
           }),
@@ -26162,7 +26125,7 @@
           nextShape: nextShape
         } = handler;
         preShape || (preShape = isHorizontal ? "triangleLeft" : "triangleUp"), nextShape || (nextShape = isHorizontal ? "triangleRight" : "triangleDown");
-        const preHandler = graphicCreator.symbol(Object.assign(Object.assign({
+        const preHandler = graphicCreator$1.symbol(Object.assign(Object.assign({
           strokeBoundsBuffer: 0,
           pickMode: "imprecise"
         }, handlerStyle), {
@@ -26178,10 +26141,10 @@
           } = measureTextSize(`${total}/${total}`, Object.assign({
             textAlign: "center",
             textBaseline: "middle"
-          }, textStyle), null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme().text.fontFamily),
+          }, textStyle)),
           handlerSizeX = isNumber$3(handlerSize) ? handlerSize : handlerSize[0],
           handlerSizeY = isNumber$3(handlerSize) ? handlerSize : handlerSize[1],
-          text = graphicCreator.text(Object.assign({
+          text = graphicCreator$1.text(Object.assign({
             x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0,
             y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2,
             text: `${defaultCurrent}/${total}`,
@@ -26190,7 +26153,7 @@
             lineHeight: null == textStyle ? void 0 : textStyle.fontSize
           }, textStyle));
         this.text = text, container.add(text);
-        const nextHandler = graphicCreator.symbol(Object.assign(Object.assign({
+        const nextHandler = graphicCreator$1.symbol(Object.assign(Object.assign({
           strokeBoundsBuffer: 0,
           pickMode: "imprecise"
         }, handlerStyle), {
@@ -26253,7 +26216,7 @@
             padding = 0
           } = this.attribute,
           parsedPadding = normalizePadding(padding),
-          innerView = graphicCreator.group({
+          innerView = graphicCreator$1.group({
             x: parsedPadding[3],
             y: parsedPadding[0],
             pickable: interactive,
@@ -26400,7 +26363,7 @@
         if (!1 === item.visible || isEmpty(items)) return;
         let legendItems = items;
         reversed && (legendItems = null == items ? void 0 : items.reverse());
-        const itemsContainer = graphicCreator.group({
+        const itemsContainer = graphicCreator$1.group({
           x: 0,
           y: 0
         });
@@ -26477,15 +26440,15 @@
           backgroundStyle = this._handleStyle(background, item, isSelected, index, items),
           parsedPadding = normalizePadding(padding);
         let itemGroup;
-        !1 === background.visible ? (itemGroup = graphicCreator.group({
+        !1 === background.visible ? (itemGroup = graphicCreator$1.group({
           x: 0,
           y: 0,
           cursor: null === (_a = backgroundStyle.style) || void 0 === _a ? void 0 : _a.cursor
-        }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = graphicCreator.group(Object.assign({
+        }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = graphicCreator$1.group(Object.assign({
           x: 0,
           y: 0
         }, backgroundStyle.style)), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state)), itemGroup.id = `${null != id ? id : label}-${index}`, itemGroup.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
-        const innerGroup = graphicCreator.group({
+        const innerGroup = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -26498,7 +26461,7 @@
         if (shapeAttr && !1 !== shapeAttr.visible) {
           const s = get$5(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE);
           shapeSize = isArray$1(s) ? s[0] || 0 : s, shapeSpace = get$5(shapeAttr, "space", DEFAULT_SHAPE_SPACE);
-          const itemShape = graphicCreator.symbol(Object.assign(Object.assign({
+          const itemShape = graphicCreator$1.symbol(Object.assign(Object.assign({
             x: 0,
             y: 0,
             symbolType: "circle",
@@ -26512,7 +26475,7 @@
         let focusSpace = 0;
         if (focus) {
           const focusSize = get$5(focusIconStyle, "size", DEFAULT_SHAPE_SIZE);
-          focusShape = graphicCreator.symbol(Object.assign(Object.assign({
+          focusShape = graphicCreator$1.symbol(Object.assign(Object.assign({
             x: 0,
             y: -focusSize / 2 - 1,
             strokeBoundsBuffer: 0
@@ -26522,7 +26485,7 @@
             boundsPadding: parsedPadding
           })), this._appendDataToShape(focusShape, LEGEND_ELEMENT_NAME.focus, item, itemGroup), focusSpace = focusSize;
         }
-        const labelShape = graphicCreator.text(Object.assign(Object.assign({
+        const labelShape = graphicCreator$1.text(Object.assign(Object.assign({
           x: shapeSize / 2 + shapeSpace,
           y: 0,
           textAlign: "start",
@@ -26535,7 +26498,7 @@
         const labelSpace = get$5(labelAttr, "space", DEFAULT_LABEL_SPACE);
         if (isValid$1(value)) {
           const valueSpace = get$5(valueAttr, "space", focus ? DEFAULT_VALUE_SPACE : 0),
-            valueShape = graphicCreator.text(Object.assign(Object.assign({
+            valueShape = graphicCreator$1.text(Object.assign(Object.assign({
               x: 0,
               y: 0,
               textAlign: "start",
@@ -26642,7 +26605,7 @@
           });
         }
         pager.defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(pager.defaultCurrent - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(pager.defaultCurrent - 1) * (pageWidth + spaceCol)));
-        const clipGroup = graphicCreator.group({
+        const clipGroup = graphicCreator$1.group({
           x: 0,
           y: renderStartY,
           width: pageWidth,
@@ -27947,7 +27910,7 @@
         };
         const isHorizontal = "horizontal" === layout;
         this._isHorizontal = isHorizontal;
-        const innerView = graphicCreator.group({
+        const innerView = graphicCreator$1.group({
           x: 0,
           y: 0
         });
@@ -27955,7 +27918,7 @@
         let startTextShape,
           startLen = 0;
         if (startText && startText.visible) {
-          startTextShape = graphicCreator.text(Object.assign({
+          startTextShape = graphicCreator$1.text(Object.assign({
             x: isHorizontal ? 0 : railWidth / 2,
             y: isHorizontal ? railHeight / 2 : 0,
             textAlign: isHorizontal ? "start" : "center",
@@ -27966,19 +27929,19 @@
           const space = isValid$1(startText.space) ? startText.space : 0;
           startLen += (isHorizontal ? startTextShape.AABBBounds.width() : startTextShape.AABBBounds.height()) + space;
         }
-        const mainContainer = graphicCreator.group({
+        const mainContainer = graphicCreator$1.group({
           x: isHorizontal ? startLen : 0,
           y: isHorizontal ? 0 : startLen
         });
         innerView.add(mainContainer);
-        const railContainer = graphicCreator.group({
+        const railContainer = graphicCreator$1.group({
           x: 0,
           y: 0
         });
         let endTextShape;
         if (railContainer.name = SLIDER_ELEMENT_NAME.railContainer, this._railContainer = railContainer, mainContainer.add(railContainer), this._renderRail(railContainer), startLen += isHorizontal ? railWidth : railHeight, endText && endText.visible) {
           const space = isValid$1(endText.space) ? endText.space : 0;
-          endTextShape = graphicCreator.text(Object.assign({
+          endTextShape = graphicCreator$1.text(Object.assign({
             x: isHorizontal ? startLen + space : railWidth / 2,
             y: isHorizontal ? railHeight / 2 : startLen + space,
             textAlign: isHorizontal ? "start" : "center",
@@ -27998,7 +27961,7 @@
         } = this.attribute;
         let cursor = "default";
         !1 !== slidable && (cursor = "pointer");
-        const railShape = graphicCreator.rect(Object.assign({
+        const railShape = graphicCreator$1.rect(Object.assign({
           x: 0,
           y: 0,
           width: railWidth,
@@ -28074,7 +28037,7 @@
         const isHorizontal = this._isHorizontal,
           railLen = isHorizontal ? railWidth : railHeight;
         range || (startValue = min);
-        const trackContainer = graphicCreator.group({
+        const trackContainer = graphicCreator$1.group({
           x: 0,
           y: 0,
           width: railWidth,
@@ -28089,7 +28052,7 @@
         cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
         const trackWidth = max === min ? railLen : (endValue - startValue) / (max - min) * railLen,
           startPos = max === min ? 0 : (startValue - min) / (max - min) * railLen,
-          track = graphicCreator.rect(Object.assign({
+          track = graphicCreator$1.rect(Object.assign({
             x: isHorizontal ? startPos : 0,
             y: isHorizontal ? 0 : startPos,
             width: isHorizontal ? trackWidth : railWidth,
@@ -28099,7 +28062,7 @@
         track.name = SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track), container.add(trackContainer);
       }
       _renderHandler(style) {
-        return graphicCreator.symbol(style);
+        return graphicCreator$1.symbol(style);
       }
       _renderHandlerText(value, position) {
         var _a, _b, _c;
@@ -28123,7 +28086,7 @@
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           };
         isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = handlerStart) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = handlerStart);
-        return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+        return graphicCreator$1.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
       }
       _bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
@@ -28466,7 +28429,7 @@
             sizeBackground: sizeBackground,
             disableTriggerEvent: disableTriggerEvent
           } = this.attribute,
-          mainContainer = graphicCreator.group({
+          mainContainer = graphicCreator$1.group({
             x: 0,
             y: 0
           });
@@ -28504,7 +28467,7 @@
         let path,
           start = 0;
         "horizontal" === layout ? "top" === align ? (path = `M0,0L${railWidth},0L${railWidth},12Z`, start = railHeight) : (path = `M0,12L${railWidth},12L${railWidth},0Z`, slider.setAttribute("y", 12)) : "left" === align ? path = `M${railWidth},0L${railWidth},0L${railWidth + 12},${railHeight}L${railWidth},${railHeight}Z` : (path = `M0,${railHeight}L12,${railHeight}L12,0Z`, slider.setAttribute("x", 12));
-        const background = graphicCreator.path(Object.assign(Object.assign({
+        const background = graphicCreator$1.path(Object.assign(Object.assign({
           x: 0,
           y: start,
           path: path
@@ -29434,6 +29397,25 @@
 
     const DEFAULT_CONTINUOUS_TICK_COUNT$1 = 5;
 
+    class GraphicCreator {
+      constructor() {
+        this.store = new Map();
+      }
+      RegisterGraphicCreator(name, cb) {
+        this.store.set(name, cb), this[name] = cb;
+      }
+      CreateGraphic(name, params) {
+        const cb = this.store.get(name);
+        return cb ? cb(params) : null;
+      }
+    }
+    const graphicCreator = new GraphicCreator();
+
+    let text;
+    function getTextBounds(params) {
+      return text || (text = graphicCreator.CreateGraphic("text", {})), text.setAttributes(params), text.AABBBounds;
+    }
+
     const initTextMeasure$1 = (textSpec, option, useNaiveCanvas, defaultFontParams) => new TextMeasure(Object.assign({
       defaultFontParams: Object.assign({
         fontFamily: "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
@@ -31830,356 +31812,456 @@
         }
     };
 
-    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') {
+    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,
-                dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
-                rect: {
-                    left: 0,
-                    top: 0,
-                    right: width,
-                    bottom: height,
-                    width,
-                    height
-                },
-                table
+                table: _table,
+                value: _table.getCellValue(col, row),
+                dataValue: _table.getCellOriginValue(col, row),
+                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
             };
-            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(arg);
         }
-        else if (typeof customRender === 'function') {
+        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,
-                dataValue: table.getCellOriginValue(col, row),
-                value: table.getCellValue(col, row) || '',
-                rect: {
-                    left: 0,
-                    top: 0,
-                    right: width,
-                    bottom: height,
-                    width,
-                    height
-                },
-                table
+                table: _table,
+                value: _table.getCellValue(col, row),
+                dataValue: _table.getCellOriginValue(col, row),
+                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
             };
-            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;
+            return prop(arg);
         }
-        if (customElements) {
-            const value = table.getCellValue(col, row);
-            elementsGroup = adjustElementToGroup(customElements, autoWidth ? expectedWidth : width, autoHeight ? expectedHeight : height, value);
+        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();
         }
-        if (enableCellPadding) {
-            elementsGroup.setAttributes({
-                x: padding[3],
-                y: padding[0],
-                width: width - padding[1] - padding[3],
-                height: height - padding[0] - padding[2]
+        getChildByName(name, deep) {
+            let result = null;
+            this.forEachChildren((child) => {
+                if (child.name === name) {
+                    result = child;
+                    return true;
+                }
+                return false;
             });
-        }
-        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
-                    });
-                    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);
+            if (deep) {
+                this.forEachChildren((child) => {
+                    if (child.getChildByName) {
+                        const target = child.getChildByName(name, true);
+                        if (target) {
+                            result = target;
+                            return true;
+                        }
                     }
-                    const text = new Text$1(Object.assign({
-                        pickable: !!element.pickable,
-                        fill: element.color ?? element.fill
-                    }, element));
-                    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
-                    });
-                    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
-                    });
-                    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.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.role = 'image-custom';
-                    customGroup.appendChild(image);
-                    break;
-                case 'line':
-                    const line = createLine({
-                        points: element.points,
-                        stroke: element.stroke,
-                        pickable: !!element.pickable,
-                        cursor: element.cursor
-                    });
-                    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);
-                }
+                    return false;
+                });
             }
-            const rect = element;
-            if (isValid$1(rect.x)) {
-                rect.x = isString$2(rect.x)
-                    ? transformString(rect.x, width - borderLineWidths[1])
-                    : Number(rect.x);
+            return result;
+        }
+        get width() {
+            let width = this.AABBBounds.width();
+            if (width === Infinity || width === -Infinity) {
+                width = 0;
             }
-            if (isValid$1(rect.y)) {
-                rect.y = isString$2(rect.y)
-                    ? transformString(rect.y, height - borderLineWidths[2])
-                    : Number(rect.y);
+            return Math.max(width, this.attribute.width ?? 0);
+        }
+        get height() {
+            let height = this.AABBBounds.height();
+            if (height === Infinity || height === -Infinity) {
+                height = 0;
             }
-            if ('width' in element) {
-                element.width = isString$2(element.width)
-                    ? transformString(element.width, width - borderLineWidths[1])
-                    : Number(element.width);
+            return Math.max(height, this.attribute.height ?? 0);
+        }
+        setDeltaWidth(deltaX) {
+            if (deltaX === 0) {
+                return;
             }
-            if ('height' in element) {
-                element.height = isString$2(element.height)
-                    ? transformString(element.height, height - borderLineWidths[2])
-                    : Number(element.height);
+            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);
+                }
             }
-            if ('radius' in element) {
-                element.radius = isString$2(element.radius)
-                    ? transformString(element.radius, Math.min(width - borderLineWidths[1], height - borderLineWidths[2]))
-                    : Number(element.radius);
+        }
+        setDeltaHeight(deltaY) {
+            if (deltaY === 0) {
+                return;
             }
-            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;
+            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);
+                }
             }
-            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;
+        setDeltaX(deltaX) {
+            if (deltaX === 0) {
+                return;
+            }
+            this.setAttribute('x', this.attribute.x + deltaX);
         }
-        group.forEachChildren((child) => {
-            if (!child) {
+        setDeltaY(deltaY) {
+            if (deltaY === 0) {
                 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));
+            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;
+                }
             }
-            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 {
+                let child = this._firstChild;
+                let i = 0;
+                while (child) {
+                    if (child.name !== skipChildName) {
+                        const breakTag = cb(child, i++);
+                        if (breakTag) {
+                            return;
+                        }
+                    }
+                    child = child._next;
+                }
             }
-            if (child.type === 'group') {
-                dealPercentCalc(child, child.attribute.width, child.attribute.height);
+        }
+        getColGroup(col) {
+            let c = this._firstChild;
+            if (!c) {
+                return null;
             }
-        });
-    }
-    function decodeReactDom(dom) {
-        if (!dom || !dom.$$typeof) {
-            return dom;
+            for (let i = 0; i < this.childrenCount; i++) {
+                if (c.col === col) {
+                    return c;
+                }
+                c = c._next;
+            }
+            return null;
         }
-        const type = dom.type;
-        const { attribute, children, stateProxy } = dom.props;
-        const g = type({ attribute });
-        parseToGraphic(g, dom.props);
-        if (stateProxy) {
-            g.stateProxy = stateProxy;
+        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;
         }
-        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);
-            });
+        getChildAt(index) {
+            const child = super.getChildAt(index);
+            if (child && child.name === 'border-rect') {
+                return child._next;
+            }
+            return child;
         }
-        else if (children) {
-            g.add(decodeReactDom(children));
+        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();
         }
-        return g;
+        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 parseToGraphic(g, props) {
-        let isGraphic = false;
-        switch (g.type) {
-            case 'richtext':
-                break;
-            case 'rich/image':
-                break;
-            default:
-                isGraphic = true;
+
+    const CHART_NUMBER_TYPE = genNumberType();
+    class Chart extends Group$2 {
+        type = 'chart';
+        chartInstance;
+        activeChartInstance;
+        active;
+        cacheCanvas;
+        constructor(params) {
+            super(params);
+            this.numberType = CHART_NUMBER_TYPE;
+            if (!params.chartInstance) {
+                params.chartInstance = this.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
+                });
+                this.chartInstance.renderSync();
+            }
+            else {
+                this.chartInstance = params.chartInstance;
+            }
         }
-        if (isGraphic) {
-            Object.keys(props).forEach(k => {
-                const en = REACT_TO_CANOPUS_EVENTS[k];
-                if (en) {
-                    g.on(en, props[k]);
+        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$2() {
+        return extend(builtin, chartTypes);
+    }
+
+    function createChartCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, dataValue, chartModule, chartSpec, chartInstance, dataId, table, cellTheme) {
+        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;
+        }
+        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,
+                lineCap: 'square',
+                clip: true,
+                cornerRadius: cellTheme.group.cornerRadius
+            });
+            cellGroup.role = 'cell';
+            cellGroup.col = col;
+            cellGroup.row = row;
+            columnGroup?.addChild(cellGroup);
+        }
+        cellGroup.AABBBounds.width();
+        const chartGroup = new Chart({
+            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 = {};
@@ -32459,231 +32541,10 @@
             };
         }
     };
-    function get$2() {
+    function get$1() {
         return extend(builtins, icons);
     }
 
-    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;
-        }
-        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) {
         let newWidth = width;
         let newHeight = height;
@@ -32721,38 +32582,7 @@
         return { x, y };
     }
 
-    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;
-    }
-
-    get$2();
+    get$1();
     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);
@@ -32820,7 +32650,7 @@
             };
         }
         image.failCallback = () => {
-            const regedIcons = get$2();
+            const regedIcons = get$1();
             image.image = regedIcons.damage_pic.svg;
         };
         cellGroup.appendChild(image);
@@ -33560,206 +33390,6 @@
         return group;
     }
 
-    const CHART_NUMBER_TYPE = genNumberType();
-    class Chart extends Group$2 {
-        type = 'chart';
-        chartInstance;
-        activeChartInstance;
-        active;
-        cacheCanvas;
-        constructor(params) {
-            super(params);
-            this.numberType = CHART_NUMBER_TYPE;
-            if (!params.chartInstance) {
-                params.chartInstance = this.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
-                });
-                this.chartInstance.renderSync();
-            }
-            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) {
-        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,
-                lineCap: 'square',
-                clip: true,
-                cornerRadius: cellTheme.group.cornerRadius
-            });
-            cellGroup.role = 'cell';
-            cellGroup.col = col;
-            cellGroup.row = row;
-            columnGroup?.addChild(cellGroup);
-        }
-        cellGroup.AABBBounds.width();
-        const chartGroup = new Chart({
-            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;
@@ -33953,7 +33583,7 @@
         return cellHierarchyIndent;
     }
 
-    function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme) {
+    function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range) {
         const leftIcons = [];
         const rightIcons = [];
         const contentLeftIcons = [];
@@ -33972,7 +33602,9 @@
         if (!Array.isArray(icons) || icons.length === 0) {
             if (isValid$1(textStr)) {
                 const text = convertInternal(textStr).replace(/\r?\n/g, '\n').replace(/\r/g, '\n').split('\n');
-                const hierarchyOffset = getHierarchyOffset(cellGroup.col, cellGroup.row, table);
+                const hierarchyOffset = range
+                    ? getHierarchyOffset(range.start.col, range.start.row, table)
+                    : getHierarchyOffset(cellGroup.col, cellGroup.row, table);
                 const attribute = {
                     text: text.length === 1 ? text[0] : text,
                     maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
@@ -34019,7 +33651,7 @@
                 }
             });
             leftIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                 iconMark.role = 'icon-left';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', leftIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -34029,7 +33661,7 @@
                 cellGroup.appendChild(iconMark);
             });
             rightIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                 iconMark.role = 'icon-right';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', rightIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -34039,7 +33671,7 @@
                 cellGroup.appendChild(iconMark);
             });
             absoluteLeftIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                 iconMark.role = 'icon-absolute-left';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', absoluteLeftIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -34048,7 +33680,7 @@
                 cellGroup.appendChild(iconMark);
             });
             absoluteRightIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                 iconMark.role = 'icon-absolute-right';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', absoluteRightIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -34116,13 +33748,13 @@
                     baseline: textBaseline
                 });
                 contentLeftIcons.forEach(icon => {
-                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                     iconMark.role = 'icon-content-left';
                     iconMark.name = icon.name;
                     cellContent.addLeftOccupyingIcon(iconMark);
                 });
                 contentRightIcons.forEach(icon => {
-                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
+                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
                     iconMark.role = 'icon-content-right';
                     iconMark.name = icon.name;
                     cellContent.addRightOccupyingIcon(iconMark);
@@ -34186,7 +33818,7 @@
             height: height + padding[0] + padding[2]
         });
     }
-    function dealWithIcon(icon, mark, col, row, table) {
+    function dealWithIcon(icon, mark, col, row, range, table) {
         const iconAttribute = {};
         if (icon.type === 'image') {
             iconAttribute.image = icon.src;
@@ -34204,7 +33836,9 @@
             isNumber$3(row) &&
             table &&
             (icon.funcType === IconFuncTypeEnum.collapse || icon.funcType === IconFuncTypeEnum.expand)) {
-            hierarchyOffset = getHierarchyOffset(col, row, table);
+            hierarchyOffset = range
+                ? getHierarchyOffset(range.start.col, range.start.row, table)
+                : getHierarchyOffset(col, row, table);
         }
         iconAttribute.marginLeft = (icon.marginLeft ?? 0) + hierarchyOffset;
         iconAttribute.marginRight = icon.marginRight ?? 0;
@@ -34426,7 +34060,7 @@
         return false;
     }
 
-    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme) {
+    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
         if (isValid$1(functionalPadding)) {
@@ -34468,9 +34102,15 @@
             const textStr = value;
             let icons;
             if (mayHaveIcon) {
-                icons = table.getCellIcons(col, row);
+                let iconCol = col;
+                let iconRow = row;
+                if (range) {
+                    iconCol = range.start.col;
+                    iconRow = range.start.row;
+                }
+                icons = table.getCellIcons(iconCol, iconRow);
             }
-            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme);
+            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range);
             if (cellTheme?._vtable?.marked) {
                 const mark = createArc({
                     x: cellGroup.attribute.width,
@@ -34494,7 +34134,7 @@
         return cellGroup;
     }
 
-    const regedIcons$1 = get$2();
+    const regedIcons$1 = get$1();
     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);
@@ -34749,7 +34389,7 @@
         return checkbox;
     }
 
-    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme) {
+    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
@@ -34806,23 +34446,29 @@
             }
             let customElementsGroup;
             let renderDefault = true;
-            let customRender;
-            let customLayout;
-            const cellLocation = table.getCellLocation(col, row);
-            if (cellLocation !== 'body') {
-                customRender = define?.headerCustomRender;
-                customLayout = define?.headerCustomLayout;
-            }
-            else {
-                customRender = define?.customRender || table.customRender;
-                customLayout = define?.customLayout;
-            }
-            if (customLayout || customRender) {
-                const customResult = dealWithCustom(customLayout, customRender, col, row, cellWidth, cellHeight, false, table.heightMode === 'autoHeight', padding, table);
+            if (customResult) {
                 customElementsGroup = customResult.elementsGroup;
                 renderDefault = customResult.renderDefault;
             }
-            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme);
+            else {
+                let customRender;
+                let customLayout;
+                const cellLocation = table.getCellLocation(col, row);
+                if (cellLocation !== 'body') {
+                    customRender = define?.headerCustomRender;
+                    customLayout = define?.headerCustomLayout;
+                }
+                else {
+                    customRender = define?.customRender || table.customRender;
+                    customLayout = define?.customLayout;
+                }
+                if (customLayout || customRender) {
+                    const customResult = dealWithCustom(customLayout, customRender, col, row, cellWidth, cellHeight, false, table.heightMode === 'autoHeight', padding, table);
+                    customElementsGroup = customResult.elementsGroup;
+                    renderDefault = customResult.renderDefault;
+                }
+            }
+            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range);
             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
                 const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, table);
@@ -34856,7 +34502,7 @@
         else if (type === 'progressbar') {
             const style = table._getCellStyle(col, row);
             const dataValue = table.getCellOriginValue(col, row);
-            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, null, true, cellTheme);
+            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, null, true, cellTheme, range);
             const progressBarGroup = createProgressBarCell(define, style, colWidth, value, dataValue, col, row, padding, table);
             if (cellGroup.firstChild) {
                 cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
@@ -34878,14 +34524,45 @@
         const cellStyle = table._getCellStyle(col, row);
         const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText;
         const cellLocation = table.getCellLocation(col, row);
-        const define = cellLocation !== 'body' ? table.getHeaderDefine(col, row) : table.getBodyColumnDefine(col, row);
+        let value = table.getCellValue(col, row);
         let isMerge;
         let range;
-        if (cellLocation !== 'body' || define?.mergeCell || table.internalProps.customMergeCell) {
+        let cellTheme;
+        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;
+                value = customMergeText;
+                customStyle = customMergeStyle;
+                if (customStyle) {
+                    cellTheme = getStyleTheme(customStyle, table, range.start.col, range.start.row, getProp).theme;
+                    cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
+                }
+                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);
+        if (!range && (cellLocation !== 'body' || define?.mergeCell)) {
             range = table.getCellRange(col, row);
             isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
         }
-        let cellTheme = getStyleTheme(cellStyle, table, isMerge ? range.start.col : col, isMerge ? range.start.row : row, getProp).theme;
+        if (!cellTheme) {
+            cellTheme = getStyleTheme(cellStyle, table, isMerge ? range.start.col : col, isMerge ? range.start.row : row, getProp).theme;
+        }
         cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
         if (!addNew && !isMerge && canUseFastUpdate(col, row, oldCellGroup, autoWrapText, table)) {
             const cellWidth = table.getColWidth(col);
@@ -34960,27 +34637,11 @@
         const type = table.isHeader(col, row)
             ? table._getHeaderLayoutMap(col, row).headerType
             : table.getBodyColumnType(col, row);
-        let value = table.getCellValue(col, row);
-        let customStyle;
-        if (table.internalProps.customMergeCell) {
-            const customMerge = table.getCustomMerge(col, row);
-            if (customMerge) {
-                const { range: customMergeRange, text: customMergeText, style: customMergeStyle } = customMerge;
-                range = customMergeRange;
-                isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
-                value = customMergeText;
-                customStyle = customMergeStyle;
-                if (customStyle) {
-                    cellTheme = getStyleTheme(customStyle, table, range.start.col, range.start.row, getProp).theme;
-                    cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table);
-                }
-            }
-        }
-        let newCellGroup;
         const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
         const padding = cellTheme._vtable.padding;
         const textAlign = cellTheme._vtable.textAlign;
         const textBaseline = cellTheme._vtable.textBaseline;
+        let newCellGroup;
         let bgColorFunc;
         if (table.internalProps?.dataConfig?.mappingRules && !table.isHeader(col, row)) {
             table.internalProps?.dataConfig?.mappingRules?.forEach((mappingRule, i) => {
@@ -34991,14 +34652,6 @@
                 }
             });
         }
-        if (cellLocation !== 'body') {
-            define?.headerCustomRender;
-            define?.headerCustomLayout;
-        }
-        else {
-            define?.customRender || table.customRender;
-            define?.customLayout;
-        }
         let cellWidth;
         let cellHeight;
         if (range) {
@@ -35011,10 +34664,10 @@
         }
         if (isPromise(value)) {
             oldCellGroup.removeAllChild();
-            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme));
+            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult));
         }
         else {
-            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme);
+            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
         }
         if (isMerge) {
             const rangeHeight = table.getRowHeight(row);
@@ -35027,14 +34680,14 @@
         }
         return newCellGroup;
     }
-    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme) {
+    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
         if (!addNew && (oldCellGroup.row !== row || oldCellGroup.col !== col)) {
             return null;
         }
-        const newCellGroup = createCell(type, value, define, table, col, row, table.getColWidth(col), cellWidth, cellHeight, addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent, addNew ? 0 : table.scenegraph.getCellGroupY(row), padding, textAlign, textBaseline, mayHaveIcon, cellTheme);
+        const newCellGroup = createCell(type, value, define, table, col, row, table.getColWidth(col), cellWidth, cellHeight, addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent, addNew ? 0 : table.scenegraph.getCellGroupY(row), padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
         if (!addNew && oldCellGroup.parent) {
             oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
             oldCellGroup.parent.removeChild(oldCellGroup);
@@ -35076,18 +34729,17 @@
         }
         for (let j = rowStart; j <= rowEnd; j++) {
             const row = j;
-            const define = cellLocation !== 'body' ? table.getHeaderDefine(col, row) : table.getBodyColumnDefine(col, row);
-            const mayHaveIcon = cellLocation !== 'body' ? true : !!define?.icon || !!define?.tree;
             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 } = 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) {
@@ -35097,8 +34749,21 @@
                     }
                     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;
@@ -35128,14 +34793,14 @@
             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));
+                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);
+                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);
@@ -35230,6 +34895,385 @@
         };
     }
 
+    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
+                    });
+                    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));
+                    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
+                    });
+                    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
+                    });
+                    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.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.role = 'image-custom';
+                    customGroup.appendChild(image);
+                    break;
+                case 'line':
+                    const line = createLine({
+                        points: element.points,
+                        stroke: element.stroke,
+                        pickable: !!element.pickable,
+                        cursor: element.cursor
+                    });
+                    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);
+            }
+        });
+    }
+    function decodeReactDom(dom) {
+        if (!dom || !dom.$$typeof) {
+            return dom;
+        }
+        const type = dom.type;
+        const { attribute, children, stateProxy } = dom.props;
+        const g = type({ attribute });
+        parseToGraphic(g, dom.props);
+        if (stateProxy) {
+            g.stateProxy = stateProxy;
+        }
+        g.id = attribute.id;
+        g.name = attribute.name;
+        if (isArray$1(children)) {
+            children.forEach((item) => {
+                const c = decodeReactDom(item);
+                g.add(c);
+            });
+        }
+        else if (children) {
+            g.add(decodeReactDom(children));
+        }
+        return g;
+    }
+    function parseToGraphic(g, props) {
+        let isGraphic = false;
+        switch (g.type) {
+            case 'richtext':
+                break;
+            case 'rich/image':
+                break;
+            default:
+                isGraphic = true;
+        }
+        if (isGraphic) {
+            Object.keys(props).forEach(k => {
+                const en = REACT_TO_CANOPUS_EVENTS[k];
+                if (en) {
+                    g.on(en, props[k]);
+                }
+            });
+        }
+    }
+    function getCustomCellMergeCustom(col, row, cellGroup, table) {
+        if (table.internalProps.customMergeCell) {
+            const customMerge = table.getCustomMerge(col, row);
+            if (customMerge) {
+                const { range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout: customMergeLayout, customRender: customMergeRender } = customMerge;
+                if (customMergeLayout || customMergeRender) {
+                    const customResult = dealWithCustom(customMergeLayout, customMergeRender, 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);
+                    const customElementsGroup = customResult.elementsGroup;
+                    if (cellGroup.childrenCount > 0 && customElementsGroup) {
+                        cellGroup.insertBefore(customElementsGroup, cellGroup.firstChild);
+                    }
+                    else if (customElementsGroup) {
+                        cellGroup.appendChild(customElementsGroup);
+                    }
+                    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, customMergeRange, table);
+                    return customResult;
+                }
+            }
+        }
+        return undefined;
+    }
+
     function isMergeCellGroup(cellGroup) {
         if (cellGroup.role === 'cell' &&
             isNumber$3(cellGroup.mergeStartCol) &&
@@ -36789,31 +36833,33 @@
                 let customElementsGroup;
                 customContainer.removeAllChild();
                 cell.removeChild(customContainer);
-                let customRender;
-                let customLayout;
-                const cellLocation = scene.table.getCellLocation(col, row);
-                if (cellLocation !== 'body') {
-                    const define = scene.table.getHeaderDefine(col, row);
-                    customRender = define?.headerCustomRender;
-                    customLayout = define?.headerCustomLayout;
-                }
-                else {
-                    const define = scene.table.getBodyColumnDefine(col, row);
-                    customRender = define?.customRender || scene.table.customRender;
-                    customLayout = define?.customLayout;
-                }
-                if (customLayout || customRender) {
-                    const style = scene.table._getCellStyle(col, row);
-                    const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
-                    const customResult = dealWithCustom(customLayout, customRender, col, row, cell.attribute.width, cell.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
-                    customElementsGroup = customResult.elementsGroup;
-                    renderDefault = customResult.renderDefault;
-                }
-                if (cell.childrenCount > 0) {
-                    cell.insertBefore(customElementsGroup, cell.firstChild);
-                }
-                else {
-                    cell.appendChild(customElementsGroup);
+                if (!getCustomCellMergeCustom(col, row, cell, scene.table)) {
+                    let customRender;
+                    let customLayout;
+                    const cellLocation = scene.table.getCellLocation(col, row);
+                    if (cellLocation !== 'body') {
+                        const define = scene.table.getHeaderDefine(col, row);
+                        customRender = define?.headerCustomRender;
+                        customLayout = define?.headerCustomLayout;
+                    }
+                    else {
+                        const define = scene.table.getBodyColumnDefine(col, row);
+                        customRender = define?.customRender || scene.table.customRender;
+                        customLayout = define?.customLayout;
+                    }
+                    if (customLayout || customRender) {
+                        const style = scene.table._getCellStyle(col, row);
+                        const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
+                        const customResult = dealWithCustom(customLayout, customRender, col, row, cell.attribute.width, cell.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
+                        customElementsGroup = customResult.elementsGroup;
+                        renderDefault = customResult.renderDefault;
+                    }
+                    if (cell.childrenCount > 0 && customElementsGroup) {
+                        cell.insertBefore(customElementsGroup, cell.firstChild);
+                    }
+                    else if (customElementsGroup) {
+                        cell.appendChild(customElementsGroup);
+                    }
                 }
             }
             if (renderDefault) {
@@ -37062,32 +37108,34 @@
                 let customElementsGroup;
                 customContainer.removeAllChild();
                 cell.removeChild(customContainer);
-                let customRender;
-                let customLayout;
-                const cellType = scene.table.getCellLocation(col, row);
-                if (cellType !== 'body') {
-                    const define = scene.table.getHeaderDefine(col, row);
-                    customRender = define?.headerCustomRender;
-                    customLayout = define?.headerCustomLayout;
-                }
-                else {
-                    const define = scene.table.getBodyColumnDefine(col, row);
-                    customRender = define?.customRender || scene.table.customRender;
-                    customLayout = define?.customLayout;
-                }
-                if (customLayout || customRender) {
-                    const style = scene.table._getCellStyle(col, row);
-                    const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
-                    const customResult = dealWithCustom(customLayout, customRender, col, row, cellGroup.attribute.width, cellGroup.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
-                    customElementsGroup = customResult.elementsGroup;
-                    renderDefault = customResult.renderDefault;
-                    isHeightChange = true;
-                }
-                if (cell.childrenCount > 0) {
-                    cell.insertBefore(customElementsGroup, cell.firstChild);
-                }
-                else {
-                    cell.appendChild(customElementsGroup);
+                if (!getCustomCellMergeCustom(col, row, cell, scene.table)) {
+                    let customRender;
+                    let customLayout;
+                    const cellType = scene.table.getCellLocation(col, row);
+                    if (cellType !== 'body') {
+                        const define = scene.table.getHeaderDefine(col, row);
+                        customRender = define?.headerCustomRender;
+                        customLayout = define?.headerCustomLayout;
+                    }
+                    else {
+                        const define = scene.table.getBodyColumnDefine(col, row);
+                        customRender = define?.customRender || scene.table.customRender;
+                        customLayout = define?.customLayout;
+                    }
+                    if (customLayout || customRender) {
+                        const style = scene.table._getCellStyle(col, row);
+                        const padding = getQuadProps(getProp('padding', style, col, row, scene.table));
+                        const customResult = dealWithCustom(customLayout, customRender, col, row, cellGroup.attribute.width, cellGroup.attribute.height, false, scene.table.heightMode === 'autoHeight', padding, scene.table);
+                        customElementsGroup = customResult.elementsGroup;
+                        renderDefault = customResult.renderDefault;
+                        isHeightChange = true;
+                    }
+                    if (cell.childrenCount > 0 && customElementsGroup) {
+                        cell.insertBefore(customElementsGroup, cell.firstChild);
+                    }
+                    else if (customElementsGroup) {
+                        cell.appendChild(customElementsGroup);
+                    }
                 }
             }
             if (renderDefault) {
@@ -37440,7 +37488,7 @@
         }
     };
 
-    const regedIcons = get$2();
+    const regedIcons = get$1();
     class DrillIcon {
         icon;
         constructor() {
@@ -42293,7 +42341,7 @@
                 fontFamily: DefaultTextStyle.fontFamily,
                 fontSize: DefaultTextStyle.fontSize
             },
-            getTextBounds: useNaiveCanvas ? undefined : getTextBounds,
+            getTextBounds: useNaiveCanvas ? undefined : getTextBounds$1,
             specialCharSet: `{}()//&-/: .,@%'"~…${TextMeasure.ALPHABET_CHAR_SET}${TextMeasure.ALPHABET_CHAR_SET.toUpperCase()}0123456789`,
             ...(option ?? {})
         }, textSpec);
@@ -43032,7 +43080,6 @@
         }
     }
 
-    registerForVrender();
     loadPoptip();
     container.load(splitModule);
     container.load(textMeasureModule);
@@ -47679,7 +47726,7 @@
         _table;
         constructor(_table) {
             this._table = _table;
-            const regedIcons = get$2();
+            const regedIcons = get$1();
             this.expandIcon = regedIcons[InternalIconName.expandIconName];
             this.collapseIcon = regedIcons[InternalIconName.collapseIconName];
         }
@@ -47701,7 +47748,7 @@
                 else {
                     iconResults = iconDefine;
                 }
-                const regedIcons = get$2();
+                const regedIcons = get$1();
                 const addIcon = (columnIcon) => {
                     let icon;
                     if (typeof columnIcon === 'string') {
@@ -48446,7 +48493,7 @@
         _table;
         constructor(_table) {
             this._table = _table;
-            const regedIcons = get$2();
+            const regedIcons = get$1();
             this.freezeIcon = regedIcons[InternalIconName.freezeIconName];
             this.frozenIcon = regedIcons[InternalIconName.frozenIconName];
             this.frozenCurrentIcon = regedIcons[InternalIconName.frozenCurrentIconName];
@@ -48531,7 +48578,7 @@
                 else {
                     headerIconStrs = headerIcon;
                 }
-                const regedIcons = get$2();
+                const regedIcons = get$1();
                 const addIcon = (headerIcon) => {
                     let icon;
                     if (typeof headerIcon === 'string') {
@@ -50325,7 +50372,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.17.10-alpha.6";
+        version = "0.17.10-alpha.7";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51847,7 +51894,7 @@
         getCustomMerge(col, row) {
             if (this.internalProps.customMergeCell) {
                 const customMerge = this.internalProps.customMergeCell(col, row, this);
-                if (customMerge && customMerge.range && customMerge.text) {
+                if (customMerge && customMerge.range && (customMerge.text || customMerge.customLayout || this.customRender)) {
                     if (customMerge.style) {
                         const styleClass = this.internalProps.bodyHelper.getStyleClass('text');
                         const style = customMerge.style;
@@ -60874,7 +60921,7 @@
         constructor(options) {
             let cache;
             if (isString$2(options.iconName)) {
-                const regedIcons = get$2();
+                const regedIcons = get$1();
                 cache = regedIcons[options.iconName];
                 if (cache) {
                     options.width = options.width ?? cache.width;
@@ -61298,10 +61345,9 @@
         return new Tag$1(params ? params.attribute : {});
     }
 
-    registerForVrender();
-    const version = "0.17.10-alpha.6";
+    const version = "0.17.10-alpha.7";
     function getIcons() {
-        return get$2();
+        return get$1();
     }
     function clearGlobal() {
         clearAll();