@visactor/vtable 0.17.10-alpha.7 → 0.17.10

package/dist/vtable.js

@@ -5970,11 +5970,13 @@
           global: global,
           viewport: viewport,
           autoPreventDefault = !1,
-          clickInterval: clickInterval
+          clickInterval: clickInterval,
+          supportsTouchEvents = global.supportsTouchEvents,
+          supportsPointerEvents = global.supportsPointerEvents
         } = params;
         this.manager = new EventManager$1(rootNode, {
           clickInterval: clickInterval
-        }), this.globalObj = global, this.supportsPointerEvents = global.supportsPointerEvents, this.supportsTouchEvents = global.supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
+        }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
         }, this.resolution = resolution, this.setTargetElement(targetElement);
@@ -6903,6 +6905,25 @@
       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";
@@ -7134,7 +7155,8 @@
       }
       constructor() {
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), params.background && this.loadImage(params.background, !0);
+        var _a;
+        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), params.background && this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0);
       }
       setMode(mode) {
         "3d" === mode ? this.set3dMode() : this.set2dMode();
@@ -8004,7 +8026,7 @@
     const SYMBOL_NUMBER_TYPE = genNumberType();
     const TEXT_NUMBER_TYPE = genNumberType();
     const GraphicService = Symbol.for("GraphicService");
-    const GraphicCreator$2 = Symbol.for("GraphicCreator");
+    const GraphicCreator$1 = Symbol.for("GraphicCreator");
     const SVG_PARSE_ATTRIBUTE_MAP = {
       "stroke-linecap": "lineCap",
       "stroke-linejoin": "lineJoin",
@@ -10157,13 +10179,14 @@
         return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
       }
       toCustomPath() {
-        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();
+        const attribute = this.attribute,
+          {
+            x: x,
+            y: y,
+            width: width,
+            height: height
+          } = normalizeRectAttributes(attribute),
+          path = new CustomPath2D();
         return path.moveTo(x, y), path.rect(x, y, width, height), path;
       }
       clone() {
@@ -12230,9 +12253,9 @@
         return !!visible || (aabbBounds.clear(), !1);
       }
     };
-    DefaultGraphicService = __decorate$19([injectable(), __param$F(0, inject(GraphicCreator$2)), __metadata$S("design:paramtypes", [Object])], DefaultGraphicService);
+    DefaultGraphicService = __decorate$19([injectable(), __param$F(0, inject(GraphicCreator$1)), __metadata$S("design:paramtypes", [Object])], DefaultGraphicService);
 
-    let GraphicCreator$1 = class GraphicCreator {
+    class GraphicCreator {
       constructor() {
         this.store = new Map();
       }
@@ -12243,12 +12266,12 @@
         const cb = this.store.get(name);
         return cb ? cb(params) : null;
       }
-    };
-    const graphicCreator$1 = new GraphicCreator$1();
+    }
+    const graphicCreator = new GraphicCreator();
 
-    let text$1;
-    function getTextBounds$1(params) {
-      return text$1 || (text$1 = graphicCreator$1.CreateGraphic("text", {})), text$1.setAttributes(params), text$1.AABBBounds;
+    let text;
+    function getTextBounds(params) {
+      return text || (text = graphicCreator.CreateGraphic("text", {})), text.setAttributes(params), text.AABBBounds;
     }
 
     const result = {
@@ -12518,20 +12541,22 @@
             const resW = data.width,
               resH = data.height;
             if ("repeat-x" === backgroundMode) {
-              w = resW * (targetH / resH);
+              w = resW * (targetH / resH), h = targetH;
             } else if ("repeat-y" === backgroundMode) {
-              h = resH * (targetW / resW);
+              h = resH * (targetW / resW), w = targetW;
             }
-            const canvas = canvasAllocate.allocate({
+            const dpr = context.dpr,
+              canvas = canvasAllocate.allocate({
                 width: w,
                 height: h,
-                dpr: context.dpr
+                dpr: dpr
               }),
               ctx = canvas.getContext("2d");
-            ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), document.body.appendChild(data), canvasAllocate.free(canvas);
+            ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), canvasAllocate.free(canvas);
           }
-          const pattern = context.createPattern(data, backgroundMode);
-          context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
+          const dpr = context.dpr,
+            pattern = context.createPattern(data, backgroundMode);
+          pattern.setTransform && pattern.setTransform(new DOMMatrix([1 / dpr, 0, 0, 1 / dpr, 0, 0])), context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
         }
       }
     }
@@ -14177,23 +14202,68 @@
     };
     DefaultCanvasSymbolRender = __decorate$10([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(SymbolRenderContribution)), __metadata$L("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
+    class DefaultBoundsAllocate {
+      constructor() {
+        this.pools = [];
+        for (let i = 0; i < 10; i++) this.pools.push(new AABBBounds());
+      }
+      allocate(x1, y1, x2, y2) {
+        if (!this.pools.length) return new AABBBounds().setValue(x1, y1, x2, y2);
+        const b = this.pools.pop();
+        return b.x1 = x1, b.y1 = y1, b.x2 = x2, b.y2 = y2, b;
+      }
+      allocateByObj(b) {
+        if (!this.pools.length) return new AABBBounds(b);
+        const _b = this.pools.pop();
+        return _b.x1 = b.x1, _b.y1 = b.y1, _b.x2 = b.x2, _b.y2 = b.y2, _b;
+      }
+      free(b) {
+        this.pools.push(b);
+      }
+      get length() {
+        return this.pools.length;
+      }
+      release() {
+        this.pools = [];
+      }
+    }
+    const boundsAllocate = new DefaultBoundsAllocate();
+
     class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRenderContribution {
       constructor() {
         super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
       }
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const {
-          background: background,
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit
         } = graphic.attribute;
+        let b,
+          {
+            background: background
+          } = graphic.attribute;
         if (!background) return;
-        const b = graphic.AABBBounds;
+        const shouldReCalBounds = isObject$4(background) && background.background,
+          onlyTranslate = graphic.transMatrix.onlyTranslate();
+        if (shouldReCalBounds) {
+          const _b = graphic.AABBBounds,
+            x = (null !== (_a = background.x) && void 0 !== _a ? _a : _b.x1) + (null !== (_c = background.dx) && void 0 !== _c ? _c : 0),
+            y = (null !== (_d = background.y) && void 0 !== _d ? _d : _b.y1) + (null !== (_e = background.dy) && void 0 !== _e ? _e : 0),
+            w = null !== (_f = background.width) && void 0 !== _f ? _f : _b.width(),
+            h = null !== (_g = background.height) && void 0 !== _g ? _g : _b.height();
+          if (b = boundsAllocate.allocate(x, y, x + w, y + h), background = background.background, !onlyTranslate) {
+            const w = b.width(),
+              h = b.height();
+            b.set((null !== (_h = background.x) && void 0 !== _h ? _h : 0) + (null !== (_j = background.dx) && void 0 !== _j ? _j : 0), (null !== (_k = background.y) && void 0 !== _k ? _k : 0) + (null !== (_l = background.dy) && void 0 !== _l ? _l : 0), w, h);
+          }
+        } else b = graphic.AABBBounds, onlyTranslate || b.set(0, 0, b.width(), b.height());
         if (graphic.backgroundImg && graphic.resources) {
           const res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
-          context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+          context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
+        } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+        shouldReCalBounds && boundsAllocate.free(b);
       }
     }
     const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();
@@ -14767,7 +14837,7 @@
     });
 
     var graphicModule = new ContainerModule(bind => {
-      bind(GraphicService).to(DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$2).toConstantValue(graphicCreator$1);
+      bind(GraphicService).to(DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$1).toConstantValue(graphicCreator);
     });
 
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
@@ -15258,7 +15328,7 @@
       getShadowRoot(interactiveLayer) {
         var _a;
         let group = interactiveLayer.getElementById("_interactive_group");
-        return group || (group = graphicCreator$1.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
+        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
       }
     }
     class Canvas3DDrawItemInterceptor {
@@ -15336,33 +15406,6 @@
       }
     }
 
-    class DefaultBoundsAllocate {
-      constructor() {
-        this.pools = [];
-        for (let i = 0; i < 10; i++) this.pools.push(new AABBBounds());
-      }
-      allocate(x1, y1, x2, y2) {
-        if (!this.pools.length) return new AABBBounds().setValue(x1, y1, x2, y2);
-        const b = this.pools.pop();
-        return b.x1 = x1, b.y1 = y1, b.x2 = x2, b.y2 = y2, b;
-      }
-      allocateByObj(b) {
-        if (!this.pools.length) return new AABBBounds(b);
-        const _b = this.pools.pop();
-        return _b.x1 = b.x1, _b.y1 = b.y1, _b.x2 = b.x2, _b.y2 = b.y2, _b;
-      }
-      free(b) {
-        this.pools.push(b);
-      }
-      get length() {
-        return this.pools.length;
-      }
-      release() {
-        this.pools = [];
-      }
-    }
-    const boundsAllocate = new DefaultBoundsAllocate();
-
     var __decorate$R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -15534,7 +15577,7 @@
         return this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
       clearScreen(renderService, context, drawContext) {
-        var _a;
+        var _a, _b;
         const {
           clear: clear
         } = drawContext;
@@ -15548,7 +15591,7 @@
             y = 0;
           context.clearRect(x, y, width, height);
           const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
-          if (stage && stage.backgroundImg && stage.resources) {
+          if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), 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, {
@@ -15804,10 +15847,7 @@
       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([])
-        };
-      }
-      init() {
-        super.init(), this.defaultRenderMap.set(this.lineRender.numberType, this.lineRender), this.defaultRenderMap.set(this.areaRender.numberType, this.areaRender);
+        }, 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* () {
@@ -16090,13 +16130,11 @@
         })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         let left = 0,
           top = 0;
-        if ("position" === anchorType) {
+        const b = graphic.globalAABBBounds;
+        if ("position" === anchorType || b.empty()) {
           const matrix = graphic.globalTransMatrix;
           left = matrix.e, top = matrix.f;
-        } else {
-          const b = graphic.globalAABBBounds;
-          left = b.x1, top = b.y1;
-        }
+        } else left = b.x1, top = b.y1;
         const containerTL = application.global.getElementTopLeft(nativeContainer, !1),
           windowTL = stage.window.getTopLeft(!1),
           offsetX = left + windowTL.left - containerTL.left,
@@ -16456,24 +16494,21 @@
 
     let _isBrowserEnv;
     function initIsBrowserEnv() {
-      if (null == _isBrowserEnv) {
-        try {
-          _isBrowserEnv = !!window;
-        } catch (err) {
-          _isBrowserEnv = !1;
-        }
-        if (_isBrowserEnv) try {
-          _isBrowserEnv = !tt;
-        } catch (err) {
-          _isBrowserEnv = !0;
-        }
+      if (null == _isBrowserEnv) try {
+        _isBrowserEnv = globalThis === window, _isBrowserEnv && (_isBrowserEnv = !!document.createElement);
+      } catch (err) {
+        _isBrowserEnv = !1;
       }
     }
     function isBrowserEnv() {
-      return initIsBrowserEnv(), _isBrowserEnv;
+      initIsBrowserEnv();
+      const env = application.global && application.global.env;
+      return env ? "browser" === env : _isBrowserEnv;
     }
     function isNodeEnv() {
-      return initIsBrowserEnv(), !_isBrowserEnv;
+      initIsBrowserEnv();
+      const env = application.global && application.global.env;
+      return env ? "node" === env : !_isBrowserEnv;
     }
 
     const DefaultConfig$1 = {
@@ -16577,6 +16612,8 @@
           resolution: this.window.dpr || this.global.devicePixelRatio,
           rootNode: this,
           global: this.global,
+          supportsPointerEvents: this.params.supportsPointerEvents,
+          supportsTouchEvents: this.params.supportsTouchEvents,
           viewport: {
             viewBox: this._viewBox,
             get x() {
@@ -17799,75 +17836,75 @@
     });
 
     function registerArcGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("arc", createArc);
+      graphicCreator.RegisterGraphicCreator("arc", createArc);
     }
 
     function registerArc3dGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("arc3d", createArc3d);
+      graphicCreator.RegisterGraphicCreator("arc3d", createArc3d);
     }
 
     function registerAreaGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("area", createArea);
+      graphicCreator.RegisterGraphicCreator("area", createArea);
     }
 
     function registerCircleGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("circle", createCircle);
+      graphicCreator.RegisterGraphicCreator("circle", createCircle);
     }
 
     function registerGlyphGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("glyph", createGlyph);
+      graphicCreator.RegisterGraphicCreator("glyph", createGlyph);
     }
 
     function registerGroupGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("group", createGroup);
+      graphicCreator.RegisterGraphicCreator("group", createGroup);
     }
 
     function registerImageGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("image", createImage);
+      graphicCreator.RegisterGraphicCreator("image", createImage);
     }
 
     function registerLineGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("line", createLine);
+      graphicCreator.RegisterGraphicCreator("line", createLine);
     }
 
     function registerPathGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("path", createPath);
+      graphicCreator.RegisterGraphicCreator("path", createPath);
     }
 
     function registerPolygonGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("polygon", createPolygon);
+      graphicCreator.RegisterGraphicCreator("polygon", createPolygon);
     }
 
     function registerPyramid3dGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("pyramid3d", createPyramid3d);
+      graphicCreator.RegisterGraphicCreator("pyramid3d", createPyramid3d);
     }
 
     function registerRectGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("rect", createRect);
+      graphicCreator.RegisterGraphicCreator("rect", createRect);
     }
 
     function registerRect3dGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("rect3d", createRect3d);
+      graphicCreator.RegisterGraphicCreator("rect3d", createRect3d);
     }
 
     function registerRichtextGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("richtext", createRichText);
+      graphicCreator.RegisterGraphicCreator("richtext", createRichText);
     }
 
     function registerSymbolGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("symbol", createSymbol);
+      graphicCreator.RegisterGraphicCreator("symbol", createSymbol);
     }
 
     function registerTextGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("text", createText);
+      graphicCreator.RegisterGraphicCreator("text", createText);
     }
 
     function registerShadowRootGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("shadowRoot", createShadowRoot);
+      graphicCreator.RegisterGraphicCreator("shadowRoot", createShadowRoot);
     }
 
     function registerWrapTextGraphic() {
-      graphicCreator$1.RegisterGraphicCreator("wrapText", createWrapText);
+      graphicCreator.RegisterGraphicCreator("wrapText", createWrapText);
     }
 
     const REACT_TO_CANOPUS_EVENTS = {
@@ -17918,40 +17955,40 @@
       onDblClick: "dblclick"
     };
     function VArc(params) {
-      return graphicCreator$1.arc(params ? params.attribute : {});
+      return graphicCreator.arc(params ? params.attribute : {});
     }
     function VArea(params) {
-      return graphicCreator$1.area(params ? params.attribute : {});
+      return graphicCreator.area(params ? params.attribute : {});
     }
     function VCircle(params) {
-      return graphicCreator$1.circle(params ? params.attribute : {});
+      return graphicCreator.circle(params ? params.attribute : {});
     }
     function VGroup(params) {
-      return graphicCreator$1.group(params ? params.attribute : {});
+      return graphicCreator.group(params ? params.attribute : {});
     }
     function VGlyph(params) {
-      return graphicCreator$1.glyph(params ? params.attribute : {});
+      return graphicCreator.glyph(params ? params.attribute : {});
     }
     function VImage(params) {
-      return graphicCreator$1.image(params ? params.attribute : {});
+      return graphicCreator.image(params ? params.attribute : {});
     }
     function VLine(params) {
-      return graphicCreator$1.line(params ? params.attribute : {});
+      return graphicCreator.line(params ? params.attribute : {});
     }
     function VPath(params) {
-      return graphicCreator$1.path(params ? params.attribute : {});
+      return graphicCreator.path(params ? params.attribute : {});
     }
     function VPolygon(params) {
-      return graphicCreator$1.polygon(params ? params.attribute : {});
+      return graphicCreator.polygon(params ? params.attribute : {});
     }
     function VRect(params) {
-      return graphicCreator$1.rect(params ? params.attribute : {});
+      return graphicCreator.rect(params ? params.attribute : {});
     }
     function VSymbol(params) {
-      return graphicCreator$1.symbol(params ? params.attribute : {});
+      return graphicCreator.symbol(params ? params.attribute : {});
     }
     function VText(params) {
-      return graphicCreator$1.text(params ? params.attribute : {});
+      return graphicCreator.text(params ? params.attribute : {});
     }
 
     var __rest$4 = undefined && undefined.__rest || function (s, e) {
@@ -17976,7 +18013,7 @@
         } = _a,
         props = __rest$4(_a, ["key", "attribute", "stateProxy"]);
       let c = type;
-      isString$2(type) && (c = graphicCreator$1[type]);
+      isString$2(type) && (c = graphicCreator[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];
@@ -20958,7 +20995,38 @@
       loaded || (loaded = !0, registerWrapTextGraphic());
     }
 
-    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();
+    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();
+    }
 
     var InteractionState;
     (function (InteractionState) {
@@ -23928,12 +23996,6 @@
     });
 
     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;
         }
@@ -24261,6 +24323,7 @@
       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";
@@ -24279,17 +24342,18 @@
     };
 
     function measureTextSize(text, textSpec) {
-      var _a;
+      let fontFamily = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_TEXT_FONT_FAMILY$1;
+      var _a, _b;
       if (!text) return {
         width: 0,
         height: 0
       };
-      const bounds = getTextBounds$1({
+      const bounds = getTextBounds({
         text: text,
-        fontFamily: textSpec.fontFamily,
+        fontFamily: null !== (_a = textSpec.fontFamily) && void 0 !== _a ? _a : fontFamily,
         fontSize: textSpec.fontSize || 12,
         fontWeight: textSpec.fontWeight,
-        textAlign: null !== (_a = textSpec.textAlign) && void 0 !== _a ? _a : "center",
+        textAlign: null !== (_b = textSpec.textAlign) && void 0 !== _b ? _b : "center",
         textBaseline: textSpec.textBaseline,
         ellipsis: !!textSpec.ellipsis,
         maxLineWidth: textSpec.maxLineWidth || 1 / 0,
@@ -24320,7 +24384,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
       render() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const {
             text = "",
             textStyle = {},
@@ -24425,11 +24489,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),
+          const textBounds = measureTextSize(textAttrs.text, textStyle, null === (_c = this.stage) || void 0 === _c ? void 0 : _c.getTheme().text.fontFamily),
             textWidth = textBounds.width,
             textHeight = textBounds.height;
           tagWidth += textWidth;
-          const size = null !== (_c = shape.size) && void 0 !== _c ? _c : 10,
+          const size = null !== (_d = shape.size) && void 0 !== _d ? _d : 10,
             maxSize = isNumber$3(size) ? size : Math.max(size[0], size[1]);
           tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
           const {
@@ -24932,7 +24996,7 @@
           }
           points.forEach((point, index) => {
             var _a, _b;
-            const line = graphicCreator$1.line(Object.assign(Object.assign({
+            const line = graphicCreator.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
@@ -24940,7 +25004,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$1.polygon(Object.assign(Object.assign({
+          const line = graphicCreator.polygon(Object.assign(Object.assign({
             points: this._clipPoints(this.attribute.points)
           }, array$1(lineStyle)[0]), {
             fill: !1,
@@ -24979,7 +25043,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$1.symbol(Object.assign(Object.assign(Object.assign({}, position), {
+          }, rotate = endAngle + Math.PI / 2), symbol = graphicCreator.symbol(Object.assign(Object.assign(Object.assign({}, position), {
             symbolType: symbolType,
             size: size,
             angle: autoRotate ? rotate + refAngle : 0,
@@ -25172,14 +25236,14 @@
       getBoundsWithoutRender(attributes) {
         const currentAttribute = cloneDeep(this.attribute);
         merge(this.attribute, attributes);
-        const offscreenGroup = graphicCreator$1.group({
+        const offscreenGroup = graphicCreator.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$1.group({
+        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -25201,13 +25265,13 @@
             line: line,
             items: items
           } = this.attribute,
-          axisContainer = graphicCreator$1.group({
+          axisContainer = graphicCreator.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$1.group({
+          const labelGroup = graphicCreator.group({
             x: 0,
             y: 0,
             pickable: !1
@@ -25240,14 +25304,14 @@
       }
       renderTicks(container) {
         const tickLineItems = this.getTickLineItems(),
-          tickLineGroup = graphicCreator$1.group({
+          tickLineGroup = graphicCreator.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$1.line(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
+          const line = graphicCreator.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);
@@ -25263,7 +25327,7 @@
         if (subTick && subTick.visible) {
           const subTickLineItems = this.getSubTickLineItems();
           subTickLineItems.length && subTickLineItems.forEach((item, index) => {
-            const line = graphicCreator$1.line(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
+            const line = graphicCreator.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 => {
@@ -25280,7 +25344,7 @@
         } = this.attribute.label;
         dataFilter && isFunction$1(dataFilter) && (items = dataFilter(items, layer));
         const data = this._transformItems(items),
-          labelGroup = graphicCreator$1.group({
+          labelGroup = graphicCreator.group({
             x: 0,
             y: 0,
             pickable: !1
@@ -25289,9 +25353,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$1.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.richtext(labelStyle)) : "html" === labelStyle.type ? (labelStyle.textConfig = [], labelStyle.html = Object.assign(Object.assign({
             dom: labelStyle.text
-          }, 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 {
+          }, 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 {
             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));
@@ -25747,7 +25811,7 @@
         if (panel && panel.visible) {
           const axisContainer = this.axisContainer,
             axisContainerBounds = axisContainer.AABBBounds,
-            bgRect = graphicCreator$1.rect(Object.assign({
+            bgRect = graphicCreator.rect(Object.assign({
               x: axisContainerBounds.x1,
               y: axisContainerBounds.y1,
               width: axisContainerBounds.width(),
@@ -25886,6 +25950,7 @@
         };
       }
       beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        var _a, _b, _c, _d;
         const {
           flush = !1
         } = this.attribute.label || {};
@@ -25900,55 +25965,51 @@
             last$1 = last(labelShapes),
             isInverse = isX ? first.attribute.x > last$1.attribute.x : first.attribute.y < last$1.attribute.y;
           if (isX) {
-            if (isInverse) {
-              const start = axisEnd.x,
-                end = axisStart.x,
-                startBound = first.AABBBounds.x2,
-                endBound = last$1.AABBBounds.x1;
-              startBound > start && first.setAttributes({
-                x: start,
-                textAlign: "right"
-              }), endBound < end && last$1.setAttributes({
-                x: end,
+            const leftMostLabel = isInverse ? last$1 : first,
+              rightMostLabel = isInverse ? first : last$1,
+              left = axisStart.x,
+              right = axisEnd.x,
+              leftBound = leftMostLabel.AABBBounds.x1,
+              rightBound = rightMostLabel.AABBBounds.x2;
+            if (leftBound < left) {
+              leftMostLabel.attribute.angle ? leftMostLabel.setAttributes({
+                dx: (null !== (_a = leftMostLabel.attribute.dx) && void 0 !== _a ? _a : 0) + left - leftBound
+              }) : leftMostLabel.setAttributes({
+                x: left,
                 textAlign: "left"
               });
-            } else {
-              const start = axisStart.x,
-                end = axisEnd.x,
-                startBound = first.AABBBounds.x1,
-                endBound = last$1.AABBBounds.x2;
-              startBound < start && first.setAttributes({
-                x: start,
-                textAlign: "left"
-              }), endBound > end && last$1.setAttributes({
-                x: end,
+            }
+            if (rightBound > right) {
+              rightMostLabel.attribute.angle ? rightMostLabel.setAttributes({
+                dx: (null !== (_b = rightMostLabel.attribute.dx) && void 0 !== _b ? _b : 0) + right - rightBound
+              }) : rightMostLabel.setAttributes({
+                x: right,
                 textAlign: "right"
               });
             }
-          } else if (isInverse) {
-            const startBound = first.AABBBounds.y1,
-              endBound = last$1.AABBBounds.y2,
-              start = axisStart.y,
-              end = axisEnd.y;
-            startBound < start && first.setAttributes({
-              y: start,
-              textBaseline: "top"
-            }), endBound > end && last$1.setAttributes({
-              y: end,
-              textBaseline: "bottom"
-            });
           } else {
-            const start = axisEnd.y,
-              end = axisStart.y,
-              startBound = first.AABBBounds.y2,
-              endBound = last$1.AABBBounds.y1;
-            startBound > start && first.setAttributes({
-              y: start,
-              textBaseline: "bottom"
-            }), endBound < end && last$1.setAttributes({
-              y: end,
-              textBaseline: "top"
-            });
+            const bottomMostLabel = isInverse ? last$1 : first,
+              topMostLabel = isInverse ? first : last$1,
+              bottomBound = bottomMostLabel.AABBBounds.y2,
+              topBound = topMostLabel.AABBBounds.y1,
+              top = axisStart.y,
+              bottom = axisEnd.y;
+            if (topBound < top) {
+              topMostLabel.attribute.angle ? topMostLabel.setAttributes({
+                dy: (null !== (_c = topMostLabel.attribute.dy) && void 0 !== _c ? _c : 0) + top - topBound
+              }) : topMostLabel.setAttributes({
+                y: top,
+                textBaseline: "top"
+              });
+            }
+            if (bottomBound > bottom) {
+              bottomMostLabel.attribute.angle ? bottomMostLabel.setAttributes({
+                dy: (null !== (_d = bottomMostLabel.attribute.dy) && void 0 !== _d ? _d : 0) + bottom - bottomBound
+              }) : bottomMostLabel.setAttributes({
+                y: bottom,
+                textBaseline: "bottom"
+              });
+            }
           }
         }
       }
@@ -26007,7 +26068,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$1.rect({
+          const bgRect = graphicCreator.rect({
             x: x,
             y: y,
             width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
@@ -26022,7 +26083,7 @@
         }
       }
       _getAxisLabelLimitLength(limitSize, layerCount) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const {
             label: label,
             title: title,
@@ -26036,7 +26097,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).height;
+          titleHeight = measureTextSize(title.text, title.textStyle, null === (_d = this.stage) || void 0 === _d ? void 0 : _d.getTheme().text.fontFamily).height;
           const padding = normalizePadding(title.padding);
           titleSpacing = title.space + padding[0] + padding[2];
         }
@@ -26099,7 +26160,7 @@
         };
       }
       render() {
-        var _a;
+        var _a, _b;
         this._reset();
         const {
           layout = "horizontal",
@@ -26112,7 +26173,7 @@
         this._current = defaultCurrent;
         const parsedPadding = normalizePadding(padding),
           isHorizontal = "horizontal" === layout,
-          container = graphicCreator$1.group({
+          container = graphicCreator.group({
             x: 0,
             y: 0
           }),
@@ -26125,7 +26186,7 @@
           nextShape: nextShape
         } = handler;
         preShape || (preShape = isHorizontal ? "triangleLeft" : "triangleUp"), nextShape || (nextShape = isHorizontal ? "triangleRight" : "triangleDown");
-        const preHandler = graphicCreator$1.symbol(Object.assign(Object.assign({
+        const preHandler = graphicCreator.symbol(Object.assign(Object.assign({
           strokeBoundsBuffer: 0,
           pickMode: "imprecise"
         }, handlerStyle), {
@@ -26141,10 +26202,10 @@
           } = measureTextSize(`${total}/${total}`, Object.assign({
             textAlign: "center",
             textBaseline: "middle"
-          }, textStyle)),
+          }, textStyle), null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme().text.fontFamily),
           handlerSizeX = isNumber$3(handlerSize) ? handlerSize : handlerSize[0],
           handlerSizeY = isNumber$3(handlerSize) ? handlerSize : handlerSize[1],
-          text = graphicCreator$1.text(Object.assign({
+          text = graphicCreator.text(Object.assign({
             x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0,
             y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2,
             text: `${defaultCurrent}/${total}`,
@@ -26153,7 +26214,7 @@
             lineHeight: null == textStyle ? void 0 : textStyle.fontSize
           }, textStyle));
         this.text = text, container.add(text);
-        const nextHandler = graphicCreator$1.symbol(Object.assign(Object.assign({
+        const nextHandler = graphicCreator.symbol(Object.assign(Object.assign({
           strokeBoundsBuffer: 0,
           pickMode: "imprecise"
         }, handlerStyle), {
@@ -26216,7 +26277,7 @@
             padding = 0
           } = this.attribute,
           parsedPadding = normalizePadding(padding),
-          innerView = graphicCreator$1.group({
+          innerView = graphicCreator.group({
             x: parsedPadding[3],
             y: parsedPadding[0],
             pickable: interactive,
@@ -26363,7 +26424,7 @@
         if (!1 === item.visible || isEmpty(items)) return;
         let legendItems = items;
         reversed && (legendItems = null == items ? void 0 : items.reverse());
-        const itemsContainer = graphicCreator$1.group({
+        const itemsContainer = graphicCreator.group({
           x: 0,
           y: 0
         });
@@ -26440,15 +26501,15 @@
           backgroundStyle = this._handleStyle(background, item, isSelected, index, items),
           parsedPadding = normalizePadding(padding);
         let itemGroup;
-        !1 === background.visible ? (itemGroup = graphicCreator$1.group({
+        !1 === background.visible ? (itemGroup = graphicCreator.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$1.group(Object.assign({
+        }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = graphicCreator.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$1.group({
+        const innerGroup = graphicCreator.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -26461,7 +26522,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$1.symbol(Object.assign(Object.assign({
+          const itemShape = graphicCreator.symbol(Object.assign(Object.assign({
             x: 0,
             y: 0,
             symbolType: "circle",
@@ -26475,7 +26536,7 @@
         let focusSpace = 0;
         if (focus) {
           const focusSize = get$5(focusIconStyle, "size", DEFAULT_SHAPE_SIZE);
-          focusShape = graphicCreator$1.symbol(Object.assign(Object.assign({
+          focusShape = graphicCreator.symbol(Object.assign(Object.assign({
             x: 0,
             y: -focusSize / 2 - 1,
             strokeBoundsBuffer: 0
@@ -26485,7 +26546,7 @@
             boundsPadding: parsedPadding
           })), this._appendDataToShape(focusShape, LEGEND_ELEMENT_NAME.focus, item, itemGroup), focusSpace = focusSize;
         }
-        const labelShape = graphicCreator$1.text(Object.assign(Object.assign({
+        const labelShape = graphicCreator.text(Object.assign(Object.assign({
           x: shapeSize / 2 + shapeSpace,
           y: 0,
           textAlign: "start",
@@ -26498,7 +26559,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$1.text(Object.assign(Object.assign({
+            valueShape = graphicCreator.text(Object.assign(Object.assign({
               x: 0,
               y: 0,
               textAlign: "start",
@@ -26605,7 +26666,7 @@
           });
         }
         pager.defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(pager.defaultCurrent - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(pager.defaultCurrent - 1) * (pageWidth + spaceCol)));
-        const clipGroup = graphicCreator$1.group({
+        const clipGroup = graphicCreator.group({
           x: 0,
           y: renderStartY,
           width: pageWidth,
@@ -27910,7 +27971,7 @@
         };
         const isHorizontal = "horizontal" === layout;
         this._isHorizontal = isHorizontal;
-        const innerView = graphicCreator$1.group({
+        const innerView = graphicCreator.group({
           x: 0,
           y: 0
         });
@@ -27918,7 +27979,7 @@
         let startTextShape,
           startLen = 0;
         if (startText && startText.visible) {
-          startTextShape = graphicCreator$1.text(Object.assign({
+          startTextShape = graphicCreator.text(Object.assign({
             x: isHorizontal ? 0 : railWidth / 2,
             y: isHorizontal ? railHeight / 2 : 0,
             textAlign: isHorizontal ? "start" : "center",
@@ -27929,19 +27990,19 @@
           const space = isValid$1(startText.space) ? startText.space : 0;
           startLen += (isHorizontal ? startTextShape.AABBBounds.width() : startTextShape.AABBBounds.height()) + space;
         }
-        const mainContainer = graphicCreator$1.group({
+        const mainContainer = graphicCreator.group({
           x: isHorizontal ? startLen : 0,
           y: isHorizontal ? 0 : startLen
         });
         innerView.add(mainContainer);
-        const railContainer = graphicCreator$1.group({
+        const railContainer = graphicCreator.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$1.text(Object.assign({
+          endTextShape = graphicCreator.text(Object.assign({
             x: isHorizontal ? startLen + space : railWidth / 2,
             y: isHorizontal ? railHeight / 2 : startLen + space,
             textAlign: isHorizontal ? "start" : "center",
@@ -27961,7 +28022,7 @@
         } = this.attribute;
         let cursor = "default";
         !1 !== slidable && (cursor = "pointer");
-        const railShape = graphicCreator$1.rect(Object.assign({
+        const railShape = graphicCreator.rect(Object.assign({
           x: 0,
           y: 0,
           width: railWidth,
@@ -28037,7 +28098,7 @@
         const isHorizontal = this._isHorizontal,
           railLen = isHorizontal ? railWidth : railHeight;
         range || (startValue = min);
-        const trackContainer = graphicCreator$1.group({
+        const trackContainer = graphicCreator.group({
           x: 0,
           y: 0,
           width: railWidth,
@@ -28052,7 +28113,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$1.rect(Object.assign({
+          track = graphicCreator.rect(Object.assign({
             x: isHorizontal ? startPos : 0,
             y: isHorizontal ? 0 : startPos,
             width: isHorizontal ? trackWidth : railWidth,
@@ -28062,7 +28123,7 @@
         track.name = SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track), container.add(trackContainer);
       }
       _renderHandler(style) {
-        return graphicCreator$1.symbol(style);
+        return graphicCreator.symbol(style);
       }
       _renderHandlerText(value, position) {
         var _a, _b, _c;
@@ -28086,7 +28147,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$1.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+        return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
       }
       _bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
@@ -28429,7 +28490,7 @@
             sizeBackground: sizeBackground,
             disableTriggerEvent: disableTriggerEvent
           } = this.attribute,
-          mainContainer = graphicCreator$1.group({
+          mainContainer = graphicCreator.group({
             x: 0,
             y: 0
           });
@@ -28467,7 +28528,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$1.path(Object.assign(Object.assign({
+        const background = graphicCreator.path(Object.assign(Object.assign({
           x: 0,
           y: start,
           path: path
@@ -29397,25 +29458,6 @@
 
     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",
@@ -30248,6 +30290,7 @@
                 end = { x: 0, y: height };
                 axisLength = height;
             }
+            const size = this.orient === 'top' || this.orient === 'bottom' ? height : width;
             const attrs = {
                 start: { x: this.x, y: this.y },
                 end,
@@ -30255,7 +30298,9 @@
                     text: this.option.title.text,
                     maxWidth: this._getTitleLimit(isX)
                 },
-                items: this.getLabelItems(axisLength)
+                items: this.getLabelItems(axisLength),
+                verticalLimitSize: size,
+                verticalMinSize: size
             };
             return attrs;
         }
@@ -31812,456 +31857,356 @@
         }
     };
 
-    function getProp(name, cellStyle, col, row, _table) {
-        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
-        if (typeof prop === 'function') {
+    function dealWithCustom(customLayout, customRender, col, row, width, height, autoWidth, autoHeight, padding, table) {
+        let renderDefault = true;
+        let enableCellPadding = false;
+        let expectedWidth;
+        let expectedHeight;
+        let customElements;
+        let elementsGroup;
+        if (typeof customLayout === 'function') {
             const arg = {
                 col,
                 row,
-                table: _table,
-                value: _table.getCellValue(col, row),
-                dataValue: _table.getCellOriginValue(col, row),
-                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
+                dataValue: table.getCellOriginValue(col, row),
+                value: table.getCellValue(col, row) || '',
+                rect: {
+                    left: 0,
+                    top: 0,
+                    right: width,
+                    bottom: height,
+                    width,
+                    height
+                },
+                table
             };
-            return prop(arg);
+            const customRenderObj = customLayout(arg);
+            if (customRenderObj.rootContainer) {
+                customRenderObj.rootContainer = decodeReactDom(customRenderObj.rootContainer);
+            }
+            if (customRenderObj.rootContainer instanceof Group$2) {
+                elementsGroup = customRenderObj.rootContainer;
+                elementsGroup.name = 'custom-container';
+            }
+            renderDefault = customRenderObj.renderDefault;
+            enableCellPadding = customRenderObj.enableCellPadding;
         }
-        return prop;
-    }
-    function getFunctionalProp(name, cellStyle, col, row, _table) {
-        const prop = cellStyle && isValid$1(cellStyle[name]) ? cellStyle[name] : null;
-        if (typeof prop === 'function') {
+        else if (typeof customRender === 'function') {
             const arg = {
                 col,
                 row,
-                table: _table,
-                value: _table.getCellValue(col, row),
-                dataValue: _table.getCellOriginValue(col, row),
-                cellHeaderPaths: _table.getCellHeaderPaths(col, row)
+                dataValue: table.getCellOriginValue(col, row),
+                value: table.getCellValue(col, row) || '',
+                rect: {
+                    left: 0,
+                    top: 0,
+                    right: width,
+                    bottom: height,
+                    width,
+                    height
+                },
+                table
             };
-            return prop(arg);
+            const customRenderObj = customRender(arg);
+            if (customRenderObj) {
+                customElements = customRenderObj.elements;
+                renderDefault = customRenderObj.renderDefault;
+                expectedWidth = customRenderObj.expectedWidth;
+                expectedHeight = customRenderObj.expectedHeight;
+            }
         }
-        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();
+        else if (customRender) {
+            expectedWidth = customRender.expectedWidth;
+            expectedHeight = customRender.expectedHeight;
+            customElements = customRender.elements;
+            renderDefault = customRender.renderDefault;
         }
-        getChildByName(name, deep) {
-            let result = null;
-            this.forEachChildren((child) => {
-                if (child.name === name) {
-                    result = child;
-                    return true;
-                }
-                return false;
+        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]
             });
-            if (deep) {
-                this.forEachChildren((child) => {
-                    if (child.getChildByName) {
-                        const target = child.getChildByName(name, true);
-                        if (target) {
-                            result = target;
-                            return true;
-                        }
+        }
+        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);
                     }
-                    return false;
-                });
+                    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 result;
-        }
-        get width() {
-            let width = this.AABBBounds.width();
-            if (width === Infinity || width === -Infinity) {
-                width = 0;
+        });
+        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 Math.max(width, this.attribute.width ?? 0);
-        }
-        get height() {
-            let height = this.AABBBounds.height();
-            if (height === Infinity || height === -Infinity) {
-                height = 0;
+            const rect = element;
+            if (isValid$1(rect.x)) {
+                rect.x = isString$2(rect.x)
+                    ? transformString(rect.x, width - borderLineWidths[1])
+                    : Number(rect.x);
             }
-            return Math.max(height, this.attribute.height ?? 0);
-        }
-        setDeltaWidth(deltaX) {
-            if (deltaX === 0) {
-                return;
+            if (isValid$1(rect.y)) {
+                rect.y = isString$2(rect.y)
+                    ? transformString(rect.y, height - borderLineWidths[2])
+                    : Number(rect.y);
             }
-            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 ('width' in element) {
+                element.width = isString$2(element.width)
+                    ? transformString(element.width, width - borderLineWidths[1])
+                    : Number(element.width);
             }
-        }
-        setDeltaHeight(deltaY) {
-            if (deltaY === 0) {
-                return;
+            if ('height' in element) {
+                element.height = isString$2(element.height)
+                    ? transformString(element.height, height - borderLineWidths[2])
+                    : Number(element.height);
             }
-            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);
-                }
+            if ('radius' in element) {
+                element.radius = isString$2(element.radius)
+                    ? transformString(element.radius, Math.min(width - borderLineWidths[1], height - borderLineWidths[2]))
+                    : Number(element.radius);
             }
-        }
-        setDeltaX(deltaX) {
-            if (deltaX === 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('x', this.attribute.x + deltaX);
+            rect.x = rect.x + left;
+            rect.y = rect.y + top;
+            result.push(element);
         }
-        setDeltaY(deltaY) {
-            if (deltaY === 0) {
-                return;
-            }
-            this.setAttribute('y', this.attribute.y + deltaY);
+        return result;
+    }
+    function transformString(str, size) {
+        if (str.endsWith('px')) {
+            return parseInt(str, 10);
         }
-        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();
+        else if (str.endsWith('%') && size) {
+            return (parseInt(str, 10) / 100) * size;
         }
-        updateColumnRowNumber(row) {
-            if (!this.rowNumber) {
-                this.rowNumber = row;
-            }
-            else {
-                this.rowNumber = Math.max(this.rowNumber, row);
-            }
+        return parseInt(str, 10);
+    }
+    function dealPercentCalc(group, parentWidth, parentHeight) {
+        if (!group) {
+            return;
         }
-        updateColumnHeight(cellHeight) {
-            if (!this.colHeight) {
-                this.colHeight = cellHeight;
+        group.forEachChildren((child) => {
+            if (!child) {
+                return;
             }
-            else {
-                this.colHeight += cellHeight;
+            if (isObject$4(child.attribute.width) && child.attribute.width.percent) {
+                child.setAttribute('width', (child.attribute.width.percent / 100) * parentWidth +
+                    (child.attribute.width.delta ?? 0));
             }
-        }
-    };
-    function after(group, selfChange) {
-        if (!group.stage.dirtyBounds) {
-            return;
-        }
-        if (!(group.stage && group.stage.renderCount)) {
-            return;
-        }
-        if (group.isContainer && !selfChange) {
-            return;
-        }
-        group.stage.dirty(group.globalAABBBounds);
-    }
-
-    const CHART_NUMBER_TYPE = genNumberType();
-    class Chart extends Group$2 {
-        type = 'chart';
-        chartInstance;
-        activeChartInstance;
-        active;
-        cacheCanvas;
-        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();
+            if (isObject$4(child.attribute.height) && child.attribute.height.percent) {
+                child.setAttribute('height', (child.attribute.height.percent / 100) * parentHeight +
+                    (child.attribute.height.delta ?? 0));
             }
-            else {
-                this.chartInstance = params.chartInstance;
+            if (child.type === 'group') {
+                dealPercentCalc(child, child.attribute.width, child.attribute.height);
             }
-        }
-        activate(table) {
-            this.active = true;
-            const { col, row } = this.parent;
-            const { x1, y1, x2, y2 } = this.getViewBox();
-            const tableBound = getTableBounds(col, row, table);
-            const clipBound = tableBound.intersect({
-                x1: x1 - table.scrollLeft,
-                x2: x2 - table.scrollLeft,
-                y1: y1 - table.scrollTop,
-                y2: y2 - table.scrollTop
-            });
-            this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, {
-                renderCanvas: this.attribute.canvas,
-                mode: 'desktop-browser',
-                canvasControled: false,
-                viewBox: {
-                    x1: x1 - table.scrollLeft,
-                    x2: x2 - table.scrollLeft,
-                    y1: y1 - table.scrollTop,
-                    y2: y2 - table.scrollTop
-                },
-                dpr: table.internalProps.pixelRatio,
-                animation: false,
-                interactive: true,
-                autoFit: false,
-                beforeRender: (stage) => {
-                    const ctx = stage.window.getContext();
-                    ctx.inuse = true;
-                    ctx.clearMatrix();
-                    ctx.setTransformForCurrent(true);
-                    ctx.beginPath();
-                    ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1);
-                    ctx.clip();
-                },
-                afterRender(stage) {
-                    const ctx = stage.window.getContext();
-                    ctx.inuse = false;
-                }
-            });
-            this.activeChartInstance.renderSync();
-            table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
-            this.activeChartInstance.on('click', (params) => {
-                if (Chart.temp) {
-                    table.scenegraph.updateChartState(params?.datum);
-                }
-            });
-            this.activeChartInstance.on('brushEnd', (params) => {
-                table.scenegraph.updateChartState(params?.value?.inBrushData);
-                Chart.temp = 0;
-                setTimeout(() => {
-                    Chart.temp = 1;
-                }, 0);
-            });
-            table._bindChartEvent?.(this.activeChartInstance);
-        }
-        static temp = 1;
-        deactivate() {
-            this.active = false;
-            this.activeChartInstance?.updateViewBox({
-                x1: -1000,
-                x2: -800,
-                y1: -1000,
-                y2: -800
-            }, false, false);
-            this.activeChartInstance?.release();
-            this.activeChartInstance = null;
-        }
-        updateData(data) {
-            this.attribute.data = data;
-        }
-        getViewBox() {
-            const cellGroup = this.parent;
-            const padding = this.attribute.cellPadding;
-            const table = this.stage.table;
-            return {
-                x1: Math.ceil(cellGroup.globalAABBBounds.x1 + padding[3] + table.scrollLeft),
-                x2: Math.ceil(cellGroup.globalAABBBounds.x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft),
-                y1: Math.ceil(cellGroup.globalAABBBounds.y1 + padding[0] + table.scrollTop),
-                y2: Math.ceil(cellGroup.globalAABBBounds.y1 + cellGroup.attribute.height - padding[2] + table.scrollTop)
-            };
-        }
+        });
     }
-    function getTableBounds(col, row, table) {
-        const { layoutMap } = table.internalProps;
-        const bodyBound = new Bounds();
-        const tableBound = table.scenegraph.tableGroup.globalAABBBounds;
-        bodyBound.x1 = tableBound.x1;
-        bodyBound.x2 = tableBound.x2;
-        bodyBound.y1 = tableBound.y1;
-        bodyBound.y2 = tableBound.y2;
-        if (!layoutMap.isFrozenColumn(col, row) && !layoutMap.isRightFrozenColumn(col, row)) {
-            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
-            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+    function decodeReactDom(dom) {
+        if (!dom || !dom.$$typeof) {
+            return dom;
         }
-        else if (layoutMap.isLeftBottomCorner(col, row) || layoutMap.isRightTopCorner(col, row)) ;
-        else if (layoutMap.isFrozenColumn(col, row)) {
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        const type = dom.type;
+        const { attribute, children, stateProxy } = dom.props;
+        const g = type({ attribute });
+        parseToGraphic(g, dom.props);
+        if (stateProxy) {
+            g.stateProxy = stateProxy;
         }
-        else if (layoutMap.isRightFrozenColumn(col, row)) {
-            bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight();
-            bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight();
+        g.id = attribute.id;
+        g.name = attribute.name;
+        if (isArray$1(children)) {
+            children.forEach((item) => {
+                const c = decodeReactDom(item);
+                c && c.type && g.add(c);
+            });
         }
-        else if (layoutMap.isBottomFrozenRow(col, row)) {
-            bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth();
-            bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth();
+        else if (children) {
+            g.add(decodeReactDom(children));
         }
-        return bodyBound;
-    }
-
-    const chartTypes = {};
-
-    const builtin = {};
-    function get$2() {
-        return extend(builtin, chartTypes);
+        return g;
     }
-
-    function createChartCellGroup(cellGroup, columnGroup, xOrigin, yOrigin, col, row, width, height, padding, dataValue, chartModule, chartSpec, chartInstance, dataId, table, cellTheme) {
-        const registerCharts = get$2();
-        const ClassType = registerCharts[chartModule];
-        const headerStyle = table._getCellStyle(col, row);
-        const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
-        if (isValid$1(functionalPadding)) {
-            padding = functionalPadding;
+    function parseToGraphic(g, props) {
+        let isGraphic = false;
+        switch (g.type) {
+            case 'richtext':
+                break;
+            case 'rich/image':
+                break;
+            default:
+                isGraphic = true;
         }
-        if (!cellGroup) {
-            cellGroup = new Group$1({
-                x: xOrigin,
-                y: yOrigin,
-                width,
-                height,
-                lineWidth: cellTheme?.group?.lineWidth ?? undefined,
-                fill: cellTheme?.group?.fill ?? undefined,
-                stroke: cellTheme?.group?.stroke ?? undefined,
-                strokeArrayWidth: cellTheme?.group?.strokeArrayWidth ?? undefined,
-                strokeArrayColor: cellTheme?.group?.strokeArrayColor ?? undefined,
-                cursor: cellTheme?.group?.cursor ?? undefined,
-                lineCap: 'square',
-                clip: true,
-                cornerRadius: cellTheme.group.cornerRadius
+        if (isGraphic) {
+            Object.keys(props).forEach(k => {
+                const en = REACT_TO_CANOPUS_EVENTS[k];
+                if (en) {
+                    g.on(en, props[k]);
+                }
             });
-            cellGroup.role = 'cell';
-            cellGroup.col = col;
-            cellGroup.row = row;
-            columnGroup?.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 = {};
@@ -32541,10 +32486,231 @@
             };
         }
     };
-    function get$1() {
+    function get$2() {
         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;
@@ -32582,7 +32748,38 @@
         return { x, y };
     }
 
-    get$1();
+    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();
     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);
@@ -32632,13 +32829,16 @@
                     _adjustWidthHeight(col, row, originImage.width, originImage.height, table.scenegraph, padding);
                 }
                 if (keepAspectRatio) {
-                    const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originImage.width, originImage.height, cellGroup.attribute.width - padding[1] - padding[3], cellGroup.attribute.height - padding[0] - padding[2]);
-                    const pos = calcStartPosition(0, 0, cellGroup.attribute.width, cellGroup.attribute.height, imageWidth, imageHeight, textAlign, textBaseline, padding);
+                    const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table);
+                    const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originImage.width, originImage.height, cellWidth - padding[1] - padding[3], cellHeight - padding[0] - padding[2]);
+                    const pos = calcStartPosition(0, 0, cellWidth, cellHeight, imageWidth, imageHeight, textAlign, textBaseline, padding);
                     image.setAttributes({
                         x: pos.x,
                         y: pos.y,
                         width: imageWidth,
-                        height: imageHeight
+                        height: imageHeight,
+                        dx: isMerge ? -table.getColsWidth(cellGroup.mergeStartCol, col - 1) : 0,
+                        dy: isMerge ? -table.getRowsHeight(cellGroup.mergeStartRow, row - 1) : 0
                     });
                 }
                 table.scenegraph.updateNextFrame();
@@ -32650,7 +32850,7 @@
             };
         }
         image.failCallback = () => {
-            const regedIcons = get$1();
+            const regedIcons = get$2();
             image.image = regedIcons.damage_pic.svg;
         };
         cellGroup.appendChild(image);
@@ -32660,20 +32860,36 @@
         let needInvalidate = false;
         let targetWidth = null;
         let targetHeight = null;
-        if (scene.table.getColWidth(col) < width + padding[1] + padding[3]) {
+        const cellGroup = scene.getCell(col, row, true);
+        const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, scene.table);
+        if (cellWidth < width + padding[1] + padding[3]) {
             targetWidth = width + padding[1] + padding[3];
             needInvalidate = true;
         }
-        if (scene.table.getRowHeight(row) < height + padding[2] + padding[0]) {
+        if (cellHeight < height + padding[2] + padding[0]) {
             targetHeight = height + padding[2] + padding[0];
             needInvalidate = true;
         }
         if (needInvalidate) {
             if (typeof targetWidth === 'number') {
-                scene.setColWidth(col, targetWidth);
+                if (isMerge) {
+                    for (let col = cellGroup.mergeStartCol; col <= cellGroup.mergeEndCol; col++) {
+                        scene.setColWidth(col, targetWidth / (cellGroup.mergeEndCol - cellGroup.mergeStartCol + 1));
+                    }
+                }
+                else {
+                    scene.setColWidth(col, targetWidth);
+                }
             }
             if (typeof targetHeight === 'number') {
-                scene.setRowHeight(row, targetHeight);
+                if (isMerge) {
+                    for (let row = cellGroup.mergeStartRow; row <= cellGroup.mergeEndRow; row++) {
+                        scene.setRowHeight(row, targetHeight / (cellGroup.mergeEndRow - cellGroup.mergeStartRow + 1));
+                    }
+                }
+                else {
+                    scene.setRowHeight(row, targetHeight);
+                }
             }
             scene.component.updateScrollBar();
             return true;
@@ -32692,8 +32908,9 @@
         const textBaseline = getProp('textBaseline', headerStyle, col, row, table) ?? 'middle';
         const padding = getQuadProps(getProp('padding', headerStyle, col, row, table)) ?? [0, 0, 0, 0];
         if (image.keepAspectRatio) {
-            const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originImage.width || originImage.videoWidth, originImage.height || originImage.videoHeight, cellGroup.attribute.width - (padding[1] + padding[3]), cellGroup.attribute.height - (padding[0] + padding[2]));
-            const pos = calcStartPosition(0, 0, cellGroup.attribute.width, cellGroup.attribute.height, imageWidth, imageHeight, textAlign, textBaseline, padding);
+            const { width: cellWidth, height: cellHeight } = getCellRange(cellGroup, table);
+            const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originImage.width || originImage.videoWidth, originImage.height || originImage.videoHeight, cellWidth - (padding[1] + padding[3]), cellHeight - (padding[0] + padding[2]));
+            const pos = calcStartPosition(0, 0, cellWidth, cellHeight, imageWidth, imageHeight, textAlign, textBaseline, padding);
             image.setAttributes({
                 x: pos.x,
                 y: pos.y,
@@ -32702,19 +32919,19 @@
             });
         }
         else {
+            const { width: cellWidth, height: cellHeight } = getCellRange(cellGroup, table);
             image.setAttributes({
                 x: padding[3],
                 y: padding[0],
-                width: cellGroup.attribute.width - padding[1] - padding[3],
-                height: cellGroup.attribute.height - padding[0] - padding[2]
+                width: cellWidth - padding[1] - padding[3],
+                height: cellHeight - padding[0] - padding[2]
             });
         }
         const playIcon = cellGroup.getChildByName('play-icon');
         if (playIcon) {
             const left = 0;
             const top = 0;
-            const width = cellGroup.attribute.width;
-            const height = cellGroup.attribute.height;
+            const { width, height } = getCellRange(cellGroup, table);
             const iconSize = Math.floor(Math.min(width - padding[1] - padding[3], height - padding[2] - padding[0]) / 2);
             const anchorX = left + (width > image.attribute.width ? image.attribute.x - left + image.attribute.width / 2 : width / 2);
             const anchorY = top + (height > image.attribute.height ? image.attribute.y - top + image.attribute.height / 2 : height / 2);
@@ -32726,6 +32943,23 @@
             });
         }
     }
+    function getCellRange(cellGroup, table) {
+        if (isValid$1(cellGroup.mergeStartCol) &&
+            isValid$1(cellGroup.mergeEndCol) &&
+            isValid$1(cellGroup.mergeStartRow) &&
+            isValid$1(cellGroup.mergeEndRow)) {
+            return {
+                width: table.getColsWidth(cellGroup.mergeStartCol, cellGroup.mergeEndCol),
+                height: table.getRowsHeight(cellGroup.mergeStartRow, cellGroup.mergeEndRow),
+                isMerge: true
+            };
+        }
+        return {
+            width: cellGroup.attribute.width,
+            height: cellGroup.attribute.height,
+            isMerge: false
+        };
+    }
 
     function createProgressBarCell(progressBarDefine, style, width, value, dataValue, col, row, padding, table) {
         if (progressBarDefine.dependField) {
@@ -33390,6 +33624,206 @@
         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;
@@ -33583,7 +34017,7 @@
         return cellHierarchyIndent;
     }
 
-    function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range) {
+    function createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, lineClamp, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme) {
         const leftIcons = [];
         const rightIcons = [];
         const contentLeftIcons = [];
@@ -33602,9 +34036,7 @@
         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 = range
-                    ? getHierarchyOffset(range.start.col, range.start.row, table)
-                    : getHierarchyOffset(cellGroup.col, cellGroup.row, table);
+                const hierarchyOffset = getHierarchyOffset(cellGroup.col, cellGroup.row, table);
                 const attribute = {
                     text: text.length === 1 ? text[0] : text,
                     maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
@@ -33651,7 +34083,7 @@
                 }
             });
             leftIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
                 iconMark.role = 'icon-left';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', leftIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -33661,7 +34093,7 @@
                 cellGroup.appendChild(iconMark);
             });
             rightIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
                 iconMark.role = 'icon-right';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', rightIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -33671,7 +34103,7 @@
                 cellGroup.appendChild(iconMark);
             });
             absoluteLeftIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
                 iconMark.role = 'icon-absolute-left';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', absoluteLeftIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -33680,7 +34112,7 @@
                 cellGroup.appendChild(iconMark);
             });
             absoluteRightIcons.forEach(icon => {
-                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
+                const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
                 iconMark.role = 'icon-absolute-right';
                 iconMark.name = icon.name;
                 iconMark.setAttribute('x', absoluteRightIconWidth + (iconMark.attribute.marginLeft ?? 0));
@@ -33748,13 +34180,13 @@
                     baseline: textBaseline
                 });
                 contentLeftIcons.forEach(icon => {
-                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, range, table);
+                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, 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, range, table);
+                    const iconMark = dealWithIcon(icon, undefined, cellGroup.col, cellGroup.row, table);
                     iconMark.role = 'icon-content-right';
                     iconMark.name = icon.name;
                     cellContent.addRightOccupyingIcon(iconMark);
@@ -33818,7 +34250,7 @@
             height: height + padding[0] + padding[2]
         });
     }
-    function dealWithIcon(icon, mark, col, row, range, table) {
+    function dealWithIcon(icon, mark, col, row, table) {
         const iconAttribute = {};
         if (icon.type === 'image') {
             iconAttribute.image = icon.src;
@@ -33836,9 +34268,7 @@
             isNumber$3(row) &&
             table &&
             (icon.funcType === IconFuncTypeEnum.collapse || icon.funcType === IconFuncTypeEnum.expand)) {
-            hierarchyOffset = range
-                ? getHierarchyOffset(range.start.col, range.start.row, table)
-                : getHierarchyOffset(col, row, table);
+            hierarchyOffset = getHierarchyOffset(col, row, table);
         }
         iconAttribute.marginLeft = (icon.marginLeft ?? 0) + hierarchyOffset;
         iconAttribute.marginRight = icon.marginRight ?? 0;
@@ -34060,7 +34490,7 @@
         return false;
     }
 
-    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme, range) {
+    function createCellGroup(table, value, columnGroup, xOrigin, yOrigin, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
         if (isValid$1(functionalPadding)) {
@@ -34102,15 +34532,9 @@
             const textStr = value;
             let icons;
             if (mayHaveIcon) {
-                let iconCol = col;
-                let iconRow = row;
-                if (range) {
-                    iconCol = range.start.col;
-                    iconRow = range.start.row;
-                }
-                icons = table.getCellIcons(iconCol, iconRow);
+                icons = table.getCellIcons(col, row);
             }
-            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme, range);
+            createCellContent(cellGroup, icons, textStr, padding, autoColWidth, autoRowHeight, autoWrapText, typeof lineClamp === 'number' ? lineClamp : undefined, cellWidth, cellHeight, textAlign, textBaseline, table, cellTheme);
             if (cellTheme?._vtable?.marked) {
                 const mark = createArc({
                     x: cellGroup.attribute.width,
@@ -34134,7 +34558,7 @@
         return cellGroup;
     }
 
-    const regedIcons$1 = get$1();
+    const regedIcons$1 = get$2();
     function createVideoCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
@@ -34389,7 +34813,7 @@
         return checkbox;
     }
 
-    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
+    function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme) {
         if (isPromise(value)) {
             value = table.getCellValue(col, row);
         }
@@ -34446,29 +34870,23 @@
             }
             let customElementsGroup;
             let renderDefault = true;
-            if (customResult) {
-                customElementsGroup = customResult.elementsGroup;
-                renderDefault = customResult.renderDefault;
+            let customRender;
+            let customLayout;
+            const cellLocation = table.getCellLocation(col, row);
+            if (cellLocation !== 'body') {
+                customRender = define?.headerCustomRender;
+                customLayout = define?.headerCustomLayout;
             }
             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;
-                }
+                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);
+            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, customElementsGroup, renderDefault, cellTheme);
             const axisConfig = table.internalProps.layoutMap.getAxisConfigInPivotChart(col, row);
             if (axisConfig) {
                 const axis = new CartesianAxis(axisConfig, cellGroup.attribute.width, cellGroup.attribute.height, padding, table);
@@ -34488,21 +34906,21 @@
             }
         }
         else if (type === 'image') {
-            cellGroup = createImageCellGroup(columnGroup, 0, y, col, row, table.getColWidth(col), table.getRowHeight(row), define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme);
+            cellGroup = createImageCellGroup(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme);
         }
         else if (type === 'video') {
-            cellGroup = createVideoCellGroup(columnGroup, 0, y, col, row, table.getColWidth(col), table.getRowHeight(row), define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme);
+            cellGroup = createVideoCellGroup(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme);
         }
         else if (type === 'chart') {
             const chartInstance = table.internalProps.layoutMap.getChartInstance(col, row);
-            cellGroup = createChartCellGroup(null, columnGroup, 0, y, col, row, table.getColWidth(col), table.getRowHeight(row), padding, value, define.chartModule, table.isPivotChart()
+            cellGroup = createChartCellGroup(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, value, define.chartModule, table.isPivotChart()
                 ? table.internalProps.layoutMap.getChartSpec(col, row)
                 : define.chartSpec, chartInstance, table.internalProps.layoutMap?.getChartDataId(col, row) ?? 'data', table, cellTheme);
         }
         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, range);
+            cellGroup = createCellGroup(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, false, null, true, cellTheme);
             const progressBarGroup = createProgressBarCell(define, style, colWidth, value, dataValue, col, row, padding, table);
             if (cellGroup.firstChild) {
                 cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
@@ -34524,45 +34942,14 @@
         const cellStyle = table._getCellStyle(col, row);
         const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText;
         const cellLocation = table.getCellLocation(col, row);
-        let value = table.getCellValue(col, row);
+        const define = cellLocation !== 'body' ? table.getHeaderDefine(col, row) : table.getBodyColumnDefine(col, row);
         let isMerge;
         let range;
-        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)) {
+        if (cellLocation !== 'body' || define?.mergeCell || table.internalProps.customMergeCell) {
             range = table.getCellRange(col, row);
             isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
         }
-        if (!cellTheme) {
-            cellTheme = getStyleTheme(cellStyle, table, isMerge ? range.start.col : col, isMerge ? range.start.row : row, getProp).theme;
-        }
+        let 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);
@@ -34637,11 +35024,27 @@
         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) => {
@@ -34652,6 +35055,14 @@
                 }
             });
         }
+        if (cellLocation !== 'body') {
+            define?.headerCustomRender;
+            define?.headerCustomLayout;
+        }
+        else {
+            define?.customRender || table.customRender;
+            define?.customLayout;
+        }
         let cellWidth;
         let cellHeight;
         if (range) {
@@ -34664,10 +35075,10 @@
         }
         if (isPromise(value)) {
             oldCellGroup.removeAllChild();
-            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult));
+            dealPromiseData(value, table, updateCellContent.bind(null, type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme));
         }
         else {
-            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
+            newCellGroup = updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme);
         }
         if (isMerge) {
             const rangeHeight = table.getRowHeight(row);
@@ -34680,14 +35091,14 @@
         }
         return newCellGroup;
     }
-    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
+    function updateCellContent(type, value, define, table, col, row, bgColorFunc, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme) {
         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, range, customResult);
+        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);
         if (!addNew && oldCellGroup.parent) {
             oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup);
             oldCellGroup.parent.removeChild(oldCellGroup);
@@ -34729,17 +35140,18 @@
         }
         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, customLayout, customRender } = customMerge;
+                    const { range: customMergeRange, text: customMergeText, style: customMergeStyle } = customMerge;
                     range = customMergeRange;
                     isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
                     if (isMerge) {
@@ -34749,21 +35161,8 @@
                     }
                     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;
@@ -34793,14 +35192,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, range, customResult));
+                dealPromiseData(value, table, createCell.bind(null, type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme));
                 columnGroup.updateColumnRowNumber(row);
                 const height = table.getRowHeight(row);
                 columnGroup.updateColumnHeight(height);
                 y += height;
             }
             else {
-                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
+                const cellGroup = createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme);
                 columnGroup.updateColumnRowNumber(row);
                 if (isMerge) {
                     const rangeHeight = table.getRowHeight(row);
@@ -34895,385 +35294,6 @@
         };
     }
 
-    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) &&
@@ -36833,33 +36853,31 @@
                 let customElementsGroup;
                 customContainer.removeAllChild();
                 cell.removeChild(customContainer);
-                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);
-                    }
+                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 (renderDefault) {
@@ -37108,34 +37126,32 @@
                 let customElementsGroup;
                 customContainer.removeAllChild();
                 cell.removeChild(customContainer);
-                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);
-                    }
+                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 (renderDefault) {
@@ -37488,7 +37504,7 @@
         }
     };
 
-    const regedIcons = get$1();
+    const regedIcons = get$2();
     class DrillIcon {
         icon;
         constructor() {
@@ -39308,9 +39324,10 @@
             for (let col = 0; col < table.colCount; col++) {
                 const newColWidth = newWidths[col] ?? table.getColWidth(col);
                 if (newColWidth !== oldColWidths[col]) {
-                    table._setColWidth(col, newColWidth);
+                    table._setColWidth(col, newColWidth, false, true);
                 }
             }
+            table.stateManager.checkFrozen();
             for (let col = 0; col < table.colCount; col++) {
                 const newColWidth = table.getColWidth(col);
                 if (newColWidth !== oldColWidths[col]) {
@@ -41337,6 +41354,10 @@
         });
         if (removeRows.length) {
             resetRowNumber(scene);
+            const beforeRow = removeRows[removeRows.length - 1] - 1;
+            const afterRow = removeRows[0] - removeRows.length + 1;
+            const rowUpdatePos = updateMergeCellGroup(beforeRow, afterRow, scene);
+            isNumber$3(rowUpdatePos) && (scene.proxy.rowUpdatePos = Math.min(scene.proxy.rowUpdatePos, rowUpdatePos));
         }
         scene.table._clearRowRangeHeightsMap();
         let updateAfter;
@@ -41346,6 +41367,12 @@
             rowHeightsMap.addAndReorder(row);
         });
         resetRowNumberAndY(scene);
+        if (addRows.length) {
+            const beforeRow = addRows[0] - 1;
+            const afterRow = addRows[addRows.length - 1] + 1;
+            const rowUpdatePos = updateMergeCellGroup(beforeRow, afterRow, scene);
+            isNumber$3(rowUpdatePos) && (scene.proxy.rowUpdatePos = Math.min(scene.proxy.rowUpdatePos, rowUpdatePos));
+        }
         for (let col = 0; col < table.colCount; col++) {
             updateRows.forEach(r => {
                 const mergeInfo = getCellMergeInfo(scene.table, col, r);
@@ -41361,6 +41388,12 @@
                 }
             });
         }
+        if (updateRows.length) {
+            const beforeRow = updateRows[0] - 1;
+            const afterRow = updateRows[updateRows.length - 1] + 1;
+            const rowUpdatePos = updateMergeCellGroup(beforeRow, afterRow, scene);
+            isNumber$3(rowUpdatePos) && (scene.proxy.rowUpdatePos = Math.min(scene.proxy.rowUpdatePos, rowUpdatePos));
+        }
         if (isNumber$3(updateAfter)) {
             for (let col = 0; col < table.colCount; col++) {
                 for (let row = updateAfter; row < table.rowCount; row++) {
@@ -41368,7 +41401,7 @@
                     cellGroup && (cellGroup.needUpdate = true);
                 }
             }
-            scene.proxy.rowUpdatePos = updateAfter;
+            scene.proxy.rowUpdatePos = Math.min(scene.proxy.rowUpdatePos, updateAfter);
         }
         if (addRows.length) {
             if (!isNumber$3(updateAfter)) {
@@ -41378,13 +41411,13 @@
             scene.proxy.rowUpdateDirection = 'up';
             scene.proxy.updateCellGroups(scene.proxy.screenRowCount * 2);
             updateBottomFrozeCellGroups();
-            scene.proxy.progress();
         }
         else if (removeRows.length) {
             scene.proxy.updateCellGroups(scene.proxy.screenRowCount * 2);
             updateBottomFrozeCellGroups();
             scene.proxy.progress();
         }
+        scene.proxy.progress();
         const newTotalHeight = table.getRowsHeight(table.frozenRowCount, table.rowCount - 1 - table.bottomFrozenRowCount);
         scene.updateContainerHeight(scene.table.frozenRowCount, newTotalHeight - scene.bodyGroup.attribute.height);
         function updateBottomFrozeCellGroups() {
@@ -41639,6 +41672,34 @@
             }
         }
     }
+    function updateMergeCellGroup(beforeRow, afterRow, scene) {
+        let updateRow;
+        for (let col = 0; col < scene.table.colCount; col++) {
+            const rangeBefore = scene.table.getCellRange(col, beforeRow);
+            if (rangeBefore.start.row <= beforeRow + 1 && rangeBefore.end.row >= beforeRow + 1) {
+                updateCellGroup(rangeBefore, scene);
+                updateRow = rangeBefore.start.row;
+            }
+            const rangeAfter = scene.table.getCellRange(col, afterRow);
+            if (rangeAfter.start.row <= afterRow - 1 && rangeAfter.end.row >= afterRow - 1) {
+                updateCellGroup(rangeAfter, scene);
+                updateRow = rangeBefore.start.row;
+            }
+        }
+        return updateRow;
+    }
+    function updateCellGroup(range, scene) {
+        const { start, end } = range;
+        for (let col = start.col; col <= end.col; col++) {
+            for (let row = start.row; row <= end.row; row++) {
+                const cellGroup = scene.highPerformanceGetCell(col, row, true);
+                if (!cellGroup) {
+                    continue;
+                }
+                cellGroup.needUpdate = true;
+            }
+        }
+    }
 
     function handleTextStick(table) {
         const { changedCells } = table.internalProps.stick;
@@ -41731,13 +41792,23 @@
         }
     }
     function dealVertical(cellGroup, minTop, maxTop, changedCells) {
-        const text = cellGroup.getChildByName('text', true);
-        if (!text) {
+        const graphic = cellGroup.getChildByName('text', true) || cellGroup.getChildByName('image', true);
+        if (!graphic) {
             return;
         }
-        text.AABBBounds.width();
-        const textTop = text.globalAABBBounds.y1;
-        const textBottom = text.globalAABBBounds.y2;
+        if (graphic.type === 'image') {
+            const { image: url } = graphic.attribute;
+            if (!url || !graphic.resources) {
+                return;
+            }
+            const res = graphic.resources.get(url);
+            if (res.state !== 'success') {
+                return;
+            }
+        }
+        graphic.AABBBounds.width();
+        const textTop = graphic.globalAABBBounds.y1;
+        const textBottom = graphic.globalAABBBounds.y2;
         if (textTop < minTop) {
             const deltaHeight = textTop - minTop;
             changedCells.push({
@@ -42162,6 +42233,22 @@
                 });
             });
         }
+        if (!scenegraph.table.isPivotChart() && scenegraph.table.rightFrozenColCount >= 1) {
+            for (let c = scenegraph.table.colCount - scenegraph.table.rightFrozenColCount; c <= scenegraph.table.colCount - 1; c++) {
+                const columnGroup = scenegraph.getColGroup(c);
+                columnGroup?.getChildren()?.forEach((cellNode) => {
+                    const width = scenegraph.table.getColWidth(cellNode.col);
+                    const height = scenegraph.table.getRowHeight(cellNode.row);
+                    cellNode.children.forEach((node) => {
+                        if (node.type === 'chart') {
+                            node.cacheCanvas = null;
+                            node.setAttribute('width', Math.ceil(width - node.attribute.cellPadding[3] - node.attribute.cellPadding[1]));
+                            node.setAttribute('height', Math.ceil(height - node.attribute.cellPadding[0] - node.attribute.cellPadding[2]));
+                        }
+                    });
+                });
+            }
+        }
     }
     function clearChartCacheImage(scenegraph) {
         for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
@@ -42341,7 +42428,7 @@
                 fontFamily: DefaultTextStyle.fontFamily,
                 fontSize: DefaultTextStyle.fontSize
             },
-            getTextBounds: useNaiveCanvas ? undefined : getTextBounds$1,
+            getTextBounds: useNaiveCanvas ? undefined : getTextBounds,
             specialCharSet: `{}()//&-/: .,@%'"~…${TextMeasure.ALPHABET_CHAR_SET}${TextMeasure.ALPHABET_CHAR_SET.toUpperCase()}0123456789`,
             ...(option ?? {})
         }, textSpec);
@@ -43080,6 +43167,7 @@
         }
     }
 
+    registerForVrender();
     loadPoptip();
     container.load(splitModule);
     container.load(textMeasureModule);
@@ -44558,10 +44646,8 @@
                     });
                 }
                 else if (col >= 0 && row >= 0) {
-                    state.select.ranges.push({
-                        start: { col, row },
-                        end: { col, row }
-                    });
+                    const cellRange = table.getCellRange(col, row);
+                    state.select.ranges.push(cellRange);
                 }
                 cellPos.col = col;
                 cellPos.row = row;
@@ -45962,6 +46048,10 @@
                     window.open(url);
                 }
                 else if (cellType === 'image') {
+                    const { clickToPreview } = columnDefine;
+                    if (clickToPreview === false) {
+                        return;
+                    }
                     const overlay = document.createElement('div');
                     overlay.style.width = '100%';
                     overlay.style.height = '100%';
@@ -45987,6 +46077,10 @@
                     document.body.appendChild(overlay);
                 }
                 else if (cellType === 'video') {
+                    const { clickToPreview } = columnDefine;
+                    if (clickToPreview === false) {
+                        return;
+                    }
                     const overlay = document.createElement('div');
                     overlay.style.width = '100%';
                     overlay.style.height = '100%';
@@ -47364,9 +47458,7 @@
                     const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
                     if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
                         this.table.scenegraph.updateAutoColWidth(resizeCol.col);
-                        if (this.table.isPivotChart()) {
-                            this.table.scenegraph.updateChartSize(resizeCol.col);
-                        }
+                        this.table.scenegraph.updateChartSize(resizeCol.col);
                         const state = this.table.stateManager;
                         if (state.columnResize.col < state.table.frozenColCount &&
                             !state.table.isPivotTable() &&
@@ -47726,7 +47818,7 @@
         _table;
         constructor(_table) {
             this._table = _table;
-            const regedIcons = get$1();
+            const regedIcons = get$2();
             this.expandIcon = regedIcons[InternalIconName.expandIconName];
             this.collapseIcon = regedIcons[InternalIconName.collapseIconName];
         }
@@ -47748,7 +47840,7 @@
                 else {
                     iconResults = iconDefine;
                 }
-                const regedIcons = get$1();
+                const regedIcons = get$2();
                 const addIcon = (columnIcon) => {
                     let icon;
                     if (typeof columnIcon === 'string') {
@@ -48493,7 +48585,7 @@
         _table;
         constructor(_table) {
             this._table = _table;
-            const regedIcons = get$1();
+            const regedIcons = get$2();
             this.freezeIcon = regedIcons[InternalIconName.freezeIconName];
             this.frozenIcon = regedIcons[InternalIconName.frozenIconName];
             this.frozenCurrentIcon = regedIcons[InternalIconName.frozenCurrentIconName];
@@ -48578,7 +48670,7 @@
                 else {
                     headerIconStrs = headerIcon;
                 }
-                const regedIcons = get$1();
+                const regedIcons = get$2();
                 const addIcon = (headerIcon) => {
                     let icon;
                     if (typeof headerIcon === 'string') {
@@ -50372,7 +50464,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.17.10-alpha.7";
+        version = "0.17.10";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -50474,7 +50566,7 @@
             internalProps.bodyHelper = new BodyHelper(this);
             internalProps.headerHelper = new HeaderHelper(this);
             internalProps.autoWrapText = options.autoWrapText;
-            internalProps.allowFrozenColCount = options.allowFrozenColCount ?? internalProps.colCount;
+            internalProps.allowFrozenColCount = options.allowFrozenColCount ?? 0;
             internalProps.limitMaxAutoWidth = options.limitMaxAutoWidth ?? 450;
             internalProps.limitMinWidth =
                 limitMinWidth !== null && limitMinWidth !== undefined
@@ -51478,7 +51570,7 @@
             internalProps.theme = themes.of(options.theme ?? themes.DEFAULT);
             this.scenegraph.updateStageBackground();
             internalProps.autoWrapText = options.autoWrapText;
-            internalProps.allowFrozenColCount = options.allowFrozenColCount ?? internalProps.colCount;
+            internalProps.allowFrozenColCount = options.allowFrozenColCount ?? 0;
             internalProps.limitMaxAutoWidth = options.limitMaxAutoWidth ?? 450;
             internalProps.limitMinWidth =
                 limitMinWidth !== null && limitMinWidth !== undefined
@@ -51894,7 +51986,7 @@
         getCustomMerge(col, row) {
             if (this.internalProps.customMergeCell) {
                 const customMerge = this.internalProps.customMergeCell(col, row, this);
-                if (customMerge && customMerge.range && (customMerge.text || customMerge.customLayout || this.customRender)) {
+                if (customMerge && customMerge.range && customMerge.text) {
                     if (customMerge.style) {
                         const styleClass = this.internalProps.bodyHelper.getStyleClass('text');
                         const style = customMerge.style;
@@ -53020,6 +53112,17 @@
             axisOption
         };
     }
+    function checkHasChart(layout) {
+        let isHasChart = false;
+        for (let i = 0; i < layout.columnObjects.length; i++) {
+            const columnObj = layout.columnObjects[i];
+            if (columnObj.chartSpec) {
+                isHasChart = true;
+                break;
+            }
+        }
+        return isHasChart;
+    }
 
     class SimpleHeaderLayoutMap {
         seqId = 0;
@@ -53781,6 +53884,9 @@
             const columnObj = this.transpose ? this._columns[_row] : this._columns[_col];
             return columnObj.chartInstance;
         }
+        checkHasChart() {
+            return checkHasChart(this);
+        }
         getAxisConfigInPivotChart(col, row) {
             return undefined;
         }
@@ -54492,13 +54598,36 @@
             }
         }
         _refreshHierarchyState(col, row) {
+            let notFillWidth = false;
+            let notFillHeight = false;
+            const checkHasChart = this.internalProps.layoutMap.checkHasChart();
+            if (checkHasChart) {
+                if (this.autoFillWidth) {
+                    notFillWidth = this.getAllColsWidth() <= this.tableNoFrameWidth;
+                }
+                if (this.autoFillHeight) {
+                    notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight;
+                }
+            }
             const index = this.getRecordShowIndexByCell(col, row);
             const diffDataIndices = this.dataSource.toggleHierarchyState(index);
             const diffPositions = this.internalProps.layoutMap.toggleHierarchyState(diffDataIndices);
             this.refreshRowColCount();
             this.clearCellStyleCache();
+            this.internalProps.layoutMap.clearCellRangeMap();
             this.scenegraph.updateHierarchyIcon(col, row);
             this.scenegraph.updateRow(diffPositions.removeCellPositions, diffPositions.addCellPositions);
+            if (checkHasChart) {
+                if (this.autoFillWidth && !notFillWidth) {
+                    notFillWidth = this.getAllColsWidth() <= this.tableNoFrameWidth;
+                }
+                if (this.autoFillHeight && !notFillHeight) {
+                    notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight;
+                }
+                if (this.widthMode === 'adaptive' || notFillWidth || this.heightMode === 'adaptive' || notFillHeight) {
+                    this.scenegraph.updateChartSize(0);
+                }
+            }
         }
         _hasHierarchyTreeHeader() {
             return (this.options.columns ?? this.options.header)?.some((column, i) => column.tree);
@@ -54759,8 +54888,8 @@
                         this.dataSource.changeFieldValue(value, recordIndex, field, startCol + j, startRow + i, this);
                     }
                     this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
-                        col: startCol,
-                        row: startRow,
+                        col: startCol + j,
+                        row: startRow + i,
                         rawValue: beforeChangeValue,
                         changedValue: this.getCellOriginValue(startCol + j, startRow + i)
                     });
@@ -57117,6 +57246,9 @@
             }
             return indicatorObj?.chartInstance;
         }
+        checkHasChart() {
+            return checkHasChart(this);
+        }
         getDimension(dimensionKey, type) {
             if (type === 'column') {
                 return this.columnsDefine?.find(dimension => typeof dimension === 'string' ? false : dimension.dimensionKey === dimensionKey);
@@ -59689,6 +59821,17 @@
             return false;
         }
         toggleHierarchyState(col, row) {
+            let notFillWidth = false;
+            let notFillHeight = false;
+            const checkHasChart = this.internalProps.layoutMap.checkHasChart();
+            if (checkHasChart) {
+                if (this.autoFillWidth) {
+                    notFillWidth = this.getAllColsWidth() <= this.tableNoFrameWidth;
+                }
+                if (this.autoFillHeight) {
+                    notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight;
+                }
+            }
             const hierarchyState = this.getHierarchyState(col, row);
             if (hierarchyState === HierarchyState.expand) {
                 this.fireListeners(PIVOT_TABLE_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
@@ -59710,6 +59853,17 @@
             this.clearCellStyleCache();
             this.scenegraph.updateHierarchyIcon(col, row);
             this.scenegraph.updateRow(result.removeCellPositions, result.addCellPositions, result.updateCellPositions);
+            if (checkHasChart) {
+                if (this.autoFillWidth && !notFillWidth) {
+                    notFillWidth = this.getAllColsWidth() <= this.tableNoFrameWidth;
+                }
+                if (this.autoFillHeight && !notFillHeight) {
+                    notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight;
+                }
+                if (this.widthMode === 'adaptive' || notFillWidth || this.heightMode === 'adaptive' || notFillHeight) {
+                    this.scenegraph.updateChartSize(0);
+                }
+            }
         }
         getHeaderCellAddressByPath(dimensionPaths) {
             const cellAddress = this.internalProps.layoutMap.getPivotCellAdress(dimensionPaths);
@@ -59875,8 +60029,8 @@
                     }
                     this._changeCellValueToDataSet(startCol + j, startRow + i, newValue);
                     this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
-                        col: startCol,
-                        row: startRow,
+                        col: startCol + j,
+                        row: startRow + i,
                         rawValue,
                         changedValue: this.getCellOriginValue(startCol + j, startRow + i)
                     });
@@ -60921,7 +61075,7 @@
         constructor(options) {
             let cache;
             if (isString$2(options.iconName)) {
-                const regedIcons = get$1();
+                const regedIcons = get$2();
                 cache = regedIcons[options.iconName];
                 if (cache) {
                     options.width = options.width ?? cache.width;
@@ -61345,9 +61499,10 @@
         return new Tag$1(params ? params.attribute : {});
     }
 
-    const version = "0.17.10-alpha.7";
+    registerForVrender();
+    const version = "0.17.10";
     function getIcons() {
-        return get$1();
+        return get$2();
     }
     function clearGlobal() {
         clearAll();