@visactor/vtable 0.18.3 → 0.18.5-alpha.0

package/dist/vtable.js

@@ -1329,14 +1329,14 @@
     const isDate = value => isType$1(value, "Date");
     var isDate$1 = isDate;
 
-    const isNumber$2 = function (value) {
+    const isNumber$1 = function (value) {
       let fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
       const type = typeof value;
       return fuzzy ? "number" === type : "number" === type || isType$1(value, "Number");
     };
-    var isNumber$3 = isNumber$2;
+    var isNumber$2 = isNumber$1;
 
-    const isValidNumber = value => isNumber$3(value) && Number.isFinite(value);
+    const isValidNumber = value => isNumber$2(value) && Number.isFinite(value);
     var isValidNumber$1 = isValidNumber;
 
     const isValidUrl = value => new RegExp(/^(http(s)?:\/\/)\w+[^\s]+(\.[^\s]+){1,}$/).test(value);
@@ -1382,7 +1382,7 @@
       if (!isValid$1(value) || "object" != typeof value) return value;
       const isArr = isArray$1(value),
         length = value.length;
-      result = isArr ? new Array(length) : "object" == typeof value ? {} : isBoolean$2(value) || isNumber$3(value) || isString$2(value) ? value : isDate$1(value) ? new Date(+value) : void 0;
+      result = isArr ? new Array(length) : "object" == typeof value ? {} : isBoolean$2(value) || isNumber$2(value) || isString$2(value) ? value : isDate$1(value) ? new Date(+value) : void 0;
       const props = isArr ? void 0 : Object.keys(Object(value));
       let index = -1;
       if (result) for (; ++index < (props || value).length;) {
@@ -1767,10 +1767,10 @@
         return this.x = x, this.y = y, this;
       }
       add(point) {
-        return isNumber$3(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
+        return isNumber$2(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
       }
       sub(point) {
-        return isNumber$3(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
+        return isNumber$2(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
       }
       multi(point) {
         throw new Error("暂不支持");
@@ -2357,10 +2357,10 @@
       return ((value = Math.max(0, Math.min(255, Math.round(value) || 0))) < 16 ? "0" : "") + value.toString(16);
     }
     function rgb(value) {
-      return isNumber$3(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
+      return isNumber$2(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
     }
     function rgba(value) {
-      return isNumber$3(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
+      return isNumber$2(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
     }
     function SRGBToLinear(c) {
       return c < .04045 ? .0773993808 * c : Math.pow(.9478672986 * c + .0521327014, 2.4);
@@ -2929,7 +2929,7 @@
     }(LoggerLevel || (LoggerLevel = {}));
     class Logger {
       static getInstance(level, method) {
-        return Logger._instance && isNumber$3(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
+        return Logger._instance && isNumber$2(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
       }
       static setInstance(logger) {
         return Logger._instance = logger;
@@ -4726,9 +4726,6 @@
     function wrapCanvas(params) {
       return container.getNamed(CanvasFactory, application.global.env)(params);
     }
-    function isNumber$1(data) {
-      return "number" == typeof data && Number.isFinite(data);
-    }
 
     class DefaultCanvasAllocate {
       constructor() {
@@ -5154,7 +5151,7 @@
     }
     const globalTheme = new Theme();
     function getTheme(graphic, theme) {
-      return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || globalTheme.getTheme();
+      return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || graphic.attachedThemeGraphic && getTheme(graphic.attachedThemeGraphic) || globalTheme.getTheme();
     }
     function getThemeFromGroup(graphic) {
       let g;
@@ -5324,7 +5321,7 @@
         let child = this._firstChild;
         for (; child;) {
           const next = child._next;
-          child.parent = null, child._prev = null, child._next = null, child = next;
+          child.parent = null, child._prev = null, child._next = null, child = child._next, child = next;
         }
         this._firstChild = null, this._lastChild = null, this._idMap.clear(), this._structEdit = !0, this.setCount(1 - this._count);
       }
@@ -7236,7 +7233,7 @@
         if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
         application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         const bounds = this.doUpdateAABBBounds(full);
-        return this.addUpdateLayoutTag(), application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
+        return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
       }
       combindShadowAABBBounds(bounds) {
         if (this.shadowRoot) {
@@ -8074,7 +8071,7 @@
     const SYMBOL_NUMBER_TYPE = genNumberType();
     const TEXT_NUMBER_TYPE = genNumberType();
     const GraphicService = Symbol.for("GraphicService");
-    const GraphicCreator$1 = Symbol.for("GraphicCreator");
+    const GraphicCreator$2 = Symbol.for("GraphicCreator");
     const SVG_PARSE_ATTRIBUTE_MAP = {
       "stroke-linecap": "lineCap",
       "stroke-linejoin": "lineJoin",
@@ -9534,7 +9531,7 @@
 
     class BaseSymbol {
       bounds(size, bounds) {
-        if (isNumber$3(size)) {
+        if (isNumber$2(size)) {
           const halfS = size / 2;
           bounds.x1 = -halfS, bounds.x2 = halfS, bounds.y1 = -halfS, bounds.y2 = halfS;
         } else bounds.x1 = -size[0] / 2, bounds.x2 = size[0] / 2, bounds.y1 = -size[1] / 2, bounds.y2 = size[1] / 2;
@@ -9965,10 +9962,10 @@
         super(...arguments), this.type = "rect", this.pathStr = "M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z";
       }
       draw(ctx, size, x, y) {
-        return isNumber$3(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
+        return isNumber$2(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return isNumber$3(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
+        return isNumber$2(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
       }
     }
     var rect = new RectSymbol();
@@ -10446,16 +10443,7 @@
             deltaY = -height;
         }
         let deltaX = 0;
-        switch (this.globalAlign) {
-          case "left":
-            deltaX = 0;
-            break;
-          case "center":
-            deltaX = -width / 2;
-            break;
-          case "right":
-            deltaX = -width;
-        }
+        "right" === this.globalAlign || "end" === this.globalAlign ? deltaX = -width : "center" === this.globalAlign && (deltaX = -width / 2);
         let frameHeight = this[this.directionKey.height];
         this.singleLine && (frameHeight = this.lines[0].height + 1);
         let lastLineTag = !1;
@@ -10604,9 +10592,9 @@
         let direction = this.direction;
         if (this.verticalEllipsis) text = "...", direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
           if ("hide" === this.ellipsis) return;
-          if ("add" === this.ellipsis) text += "...", "right" === textAlign && (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
+          if ("add" === this.ellipsis) text += "...", "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
             const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-            if (text = text.slice(0, index), text += "...", "right" === textAlign) {
+            if (text = text.slice(0, index), text += "...", "right" === textAlign || "end" === textAlign) {
               const {
                 width: width
               } = measureTextCanvas(this.text.slice(index), this.character);
@@ -10797,17 +10785,7 @@
           maxHeight = this.height;
         let x = this.left,
           spacing = 0;
-        if (this.actualWidth < width && !isWidthMax) switch (this.textAlign) {
-          case "right":
-            x = width - this.actualWidth;
-            break;
-          case "center":
-            x = (width - this.actualWidth) / 2;
-            break;
-          case "justify":
-            this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1);
-        }
-        this.paragraphs.map(function (paragraph) {
+        this.actualWidth < width && !isWidthMax && ("right" === this.textAlign || "end" === this.textAlign ? x = width - this.actualWidth : "center" === this.textAlign ? x = (width - this.actualWidth) / 2 : "justify" === this.textAlign && (this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1))), this.paragraphs.map(function (paragraph) {
           paragraph instanceof RichTextIcon ? (paragraph["_" + directionKey.x] = x, x += paragraph[directionKey.width] + spacing, paragraph["_" + directionKey.y] = "top" === paragraph.attribute.textBaseline ? 0 : "bottom" === paragraph.attribute.textBaseline ? maxHeight - paragraph.height : (maxHeight - paragraph.height) / 2) : (paragraph[directionKey.left] = x, x += paragraph[directionKey.width] + spacing);
         });
       }
@@ -11031,10 +11009,10 @@
           }
         } else {
           const richTextConfig = textConfig[i];
-          if (isNumber$3(richTextConfig.text) && (richTextConfig.text = `${richTextConfig.text}`), richTextConfig.text.includes("\n")) {
+          if (isNumber$2(richTextConfig.text) && (richTextConfig.text = `${richTextConfig.text}`), richTextConfig.text && richTextConfig.text.includes("\n")) {
             const textParts = richTextConfig.text.split("\n");
             for (let j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig));
-          } else paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
+          } else richTextConfig.text && paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
         }
         const maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
           maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
@@ -11279,7 +11257,7 @@
           } = this.attribute;
         if (0 === cornerRadius || "0%" === cornerRadius) return 0;
         const deltaRadius = Math.abs(outerRadius - innerRadius);
-        return Math.min(isNumber$3(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
+        return Math.min(isNumber$2(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
       }
       getParsedAngle() {
         const arcTheme = getTheme(this).arc;
@@ -12312,9 +12290,9 @@
         return !!visible || (aabbBounds.clear(), !1);
       }
     };
-    DefaultGraphicService = __decorate$19([injectable(), __param$F(0, inject(GraphicCreator$1)), __metadata$S("design:paramtypes", [Object])], DefaultGraphicService);
+    DefaultGraphicService = __decorate$19([injectable(), __param$F(0, inject(GraphicCreator$2)), __metadata$S("design:paramtypes", [Object])], DefaultGraphicService);
 
-    class GraphicCreator {
+    let GraphicCreator$1 = class GraphicCreator {
       constructor() {
         this.store = new Map();
       }
@@ -12325,12 +12303,12 @@
         const cb = this.store.get(name);
         return cb ? cb(params) : null;
       }
-    }
-    const graphicCreator = new GraphicCreator();
+    };
+    const graphicCreator$1 = new GraphicCreator$1();
 
-    let text;
-    function getTextBounds(params) {
-      return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
+    let text$1;
+    function getTextBounds$1(params) {
+      return text$1 || (text$1 = graphicCreator$1.CreateGraphic("text", {})), text$1.initAttributes(params), text$1.AABBBounds;
     }
 
     const result = {
@@ -13120,7 +13098,7 @@
     const halfPi = pi / 2;
     function createRectPath(path, x, y, width, height, rectCornerRadius) {
       let cornerRadius;
-      if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$3(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
+      if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$2(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
         const cornerRadiusArr = rectCornerRadius;
         let cr0, cr1;
         switch (cornerRadiusArr.length) {
@@ -13228,7 +13206,7 @@
         y = bounds.y1,
         width = bounds.width(),
         height = bounds.height();
-      return isNumber$3(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
+      return isNumber$2(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
         x: x,
         y: y,
         width: width,
@@ -15069,7 +15047,7 @@
       getShadowRoot(interactiveLayer) {
         var _a;
         let group = interactiveLayer.getElementById("_interactive_group");
-        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
+        return group || (group = graphicCreator$1.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
       }
     }
     class Canvas3DDrawItemInterceptor {
@@ -15322,7 +15300,7 @@
     });
 
     var graphicModule = new ContainerModule(bind => {
-      bind(GraphicService).to(DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$1).toConstantValue(graphicCreator);
+      bind(GraphicService).to(DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$2).toConstantValue(graphicCreator$1);
     });
 
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
@@ -15741,20 +15719,26 @@
           height: height
         } = drawContext;
         if (!context) return;
+        if (drawContext.keepMatrix) {
+          if (context.nativeContext && context.nativeContext.getTransform) {
+            const t = context.nativeContext.getTransform();
+            context.setTransformFromMatrix(t, !0, 1);
+          }
+        } else context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
         const dirtyBounds = this.dirtyBounds.setValue(0, 0, width, height);
         if (stage.dirtyBounds && !stage.dirtyBounds.empty()) {
           const b = getRectIntersect(dirtyBounds, stage.dirtyBounds, !1);
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         const d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds);
         const drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
-        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.clear(), this.backupDirtyBounds.clear()), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
           group.isContainer ? this.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : this.renderItem(group, drawContext);
-        }), context.restore(), context.restore(), context.draw(), context.inuse = !1;
+        }), context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1);
       }
       doRegister() {
         throw new Error("暂不支持");
@@ -15807,7 +15791,7 @@
         }, subLayers.set(group._uid, incrementalLayer));
         const incrementalContext = incrementalLayer.layer.getNativeHandler().getContext(),
           idc = incrementalLayer.drawContribution || container.get(IncrementalDrawContribution);
-        idc.dirtyBounds.clear(), idc.backupDirtyBounds.clear(), idc.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), {
+        idc.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), idc.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), idc.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), {
           drawContribution: idc,
           clear: "transparent",
           layer: incrementalLayer.layer,
@@ -16155,14 +16139,22 @@
             x = 0,
             y = 0
           } = drawContext;
-          context && (context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), renderService.renderTreeRoots.sort((a, b) => {
-            var _a, _b;
-            return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
-          }).forEach(group => {
-            this.renderGroup(group, drawContext);
-          }), this.hooks.completeDraw.tap("top-draw", () => {
-            context.restore(), context.restore(), context.draw(), context.inuse = !1, this.rendering = !1;
-          }));
+          if (context) {
+            if (drawContext.keepMatrix) {
+              if (context.nativeContext && context.nativeContext.getTransform) {
+                const t = context.nativeContext.getTransform();
+                context.setTransformFromMatrix(t, !0, 1);
+              }
+            } else context.inuse = !0, context.clearMatrix();
+            context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+              var _a, _b;
+              return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
+            }).forEach(group => {
+              this.renderGroup(group, drawContext);
+            }), this.hooks.completeDraw.tap("top-draw", () => {
+              context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1), this.rendering = !1;
+            });
+          }
         });
       }
       _increaseRender(group, drawContext) {
@@ -16463,34 +16455,48 @@
       constructor() {
         this.name = "FlexLayoutPlugin", this.activeEvent = "onRegister", this.id = Generator.GenAutoIncrementId(), this.key = this.name + this.id, this.tempBounds = new AABBBounds();
       }
+      pauseLayout(p) {
+        this.pause = p;
+      }
+      tryLayoutChildren(graphic) {
+        graphic.firstChild && this.tryLayout(graphic.firstChild);
+      }
       tryLayout(graphic) {
-        if (this.layouting) return;
-        this.layouting = !0;
+        let force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+        if (this.pause) return;
         const p = graphic.parent;
-        if (!p || !graphic.needUpdateLayout()) return;
+        if (!(force || p && graphic.needUpdateLayout())) return;
         const theme = getTheme(p).group,
           {
             display = theme.display
           } = p.attribute;
         if ("flex" !== display) return;
         const {
-          flexDirection = theme.flexDirection,
-          flexWrap = theme.flexWrap,
-          justifyContent = theme.justifyContent,
-          alignItems = theme.alignItems,
-          alignContent = theme.alignContent,
-          clip = theme.clip
+            flexDirection = theme.flexDirection,
+            flexWrap = theme.flexWrap,
+            alignItems = theme.alignItems,
+            clip = theme.clip
+          } = p.attribute,
+          {
+            alignContent = null != alignItems ? alignItems : theme.alignContent
+          } = p.attribute;
+        let {
+          width: width,
+          height: height,
+          justifyContent = theme.justifyContent
         } = p.attribute;
-        let childrenWidth = 0,
-          childrenHeight = 0,
-          boundsLegal = 0;
-        if (p.forEachChildren(child => {
-          const bounds = child.AABBBounds;
-          "column" === flexDirection || "column-reverse" === flexDirection ? (childrenHeight += bounds.height(), childrenWidth = Math.max(childrenWidth, bounds.width())) : (childrenWidth += bounds.width(), childrenHeight = Math.max(childrenHeight, bounds.height())), boundsLegal += bounds.x1, boundsLegal += bounds.y1, boundsLegal += bounds.x2, boundsLegal += bounds.y2;
-        }), !isFinite(boundsLegal)) return;
-        const width = p.attribute.width || childrenWidth,
-          height = p.attribute.height || childrenHeight;
-        p.attribute.width || (p.attribute.width = 0), p.attribute.height || (p.attribute.height = 0), this.tempBounds.copy(p._AABBBounds);
+        const children = p.getChildren();
+        if (null == width || null == height) {
+          let childrenWidth = 0,
+            childrenHeight = 0,
+            boundsLegal = 0;
+          if (children.forEach(child => {
+            const bounds = this.getAABBBounds(child);
+            bounds.empty() || ("column" === flexDirection || "column-reverse" === flexDirection ? (childrenHeight += bounds.height(), childrenWidth = Math.max(childrenWidth, bounds.width())) : (childrenWidth += bounds.width(), childrenHeight = Math.max(childrenHeight, bounds.height())), boundsLegal += bounds.x1, boundsLegal += bounds.y1, boundsLegal += bounds.x2, boundsLegal += bounds.y2);
+          }), !isFinite(boundsLegal)) return;
+          width = childrenWidth, height = childrenHeight;
+        }
+        p.attribute.width = width, p.attribute.height = height, this.tempBounds.copy(p._AABBBounds);
         const result = {
             main: {
               len: width,
@@ -16499,18 +16505,18 @@
             cross: {
               len: height,
               field: "y"
-            },
-            dir: 1
+            }
           },
           main = result.main,
           cross = result.cross;
-        "row-reverse" === flexDirection ? result.dir = -1 : "column" === flexDirection ? (main.len = height, cross.len = width, main.field = "y", cross.field = "x") : "column-reverse" === flexDirection && (main.len = height, cross.len = width, main.field = "y", cross.field = "x", result.dir = -1);
+        "column" !== flexDirection && "column-reverse" !== flexDirection || (main.len = height, cross.len = width, main.field = "y", cross.field = "x"), "row-reverse" !== flexDirection && "column-reverse" !== flexDirection || ("flex-start" === justifyContent ? justifyContent = "flex-end" : "flex-end" === justifyContent ? justifyContent = "flex-start" : children.reverse());
         let mainLen = 0,
           crossLen = 0;
         const mianLenArray = [];
-        p.forEachChildren(c => {
-          const b = c.AABBBounds,
-            ml = "x" === main.field ? b.width() : b.height(),
+        children.forEach(c => {
+          const b = this.getAABBBounds(c);
+          if (b.empty()) return;
+          const ml = "x" === main.field ? b.width() : b.height(),
             cl = "x" === cross.field ? b.width() : b.height();
           mianLenArray.push({
             mainLen: ml,
@@ -16545,107 +16551,168 @@
           mainLen: mainLen,
           crossLen: crossLen
         });
-        const children = p.getChildren();
         let lastIdx = 0;
         if (mainList.forEach(s => {
           this.layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, s), lastIdx = s.idx + 1;
         }), crossLen = mainList.reduce((a, b) => a + b.crossLen, 0), 1 === mainList.length) {
-          if ("flex-end" === alignItems) {
-            const anchorPos = cross.len;
-            this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
-          } else if ("center" === alignItems) {
-            const anchorPos = cross.len / 2;
-            this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
-          } else children.forEach(child => {
-            child.attribute[cross.field] = getPadding(child, cross.field);
-          });
+          const anchorPosMap = {
+            "flex-start": 0,
+            "flex-end": cross.len,
+            center: cross.len / 2
+          };
+          this.layoutCross(children, alignItems, cross, anchorPosMap, mianLenArray, mainList[0], 0);
         } else if ("flex-start" === alignContent) {
           lastIdx = 0;
           let anchorPos = 0;
           mainList.forEach((s, i) => {
-            this.layoutCross(children, "flex-start", cross, anchorPos, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen;
+            const anchorPosMap = {
+              "flex-start": anchorPos,
+              "flex-end": anchorPos + s.crossLen,
+              center: anchorPos + s.crossLen / 2
+            };
+            this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen;
           });
         } else if ("center" === alignContent) {
           lastIdx = 0;
           let anchorPos = Math.max(0, (cross.len - crossLen) / 2);
           mainList.forEach((s, i) => {
-            this.layoutCross(children, "center", cross, anchorPos + s.crossLen / 2, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen;
+            const anchorPosMap = {
+              "flex-start": anchorPos,
+              "flex-end": anchorPos + s.crossLen,
+              center: anchorPos + s.crossLen / 2
+            };
+            this.layoutCross(children, "center", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen;
           });
         } else if ("space-around" === alignContent) {
           lastIdx = 0;
           const padding = Math.max(0, (cross.len - crossLen) / mainList.length / 2);
           let anchorPos = padding;
           mainList.forEach((s, i) => {
-            this.layoutCross(children, "flex-start", cross, anchorPos, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen + 2 * padding;
+            const anchorPosMap = {
+              "flex-start": anchorPos,
+              "flex-end": anchorPos + s.crossLen,
+              center: anchorPos + s.crossLen / 2
+            };
+            this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen + 2 * padding;
           });
         } else if ("space-between" === alignContent) {
           lastIdx = 0;
           const padding = Math.max(0, (cross.len - crossLen) / (2 * mainList.length - 2));
           let anchorPos = 0;
           mainList.forEach((s, i) => {
-            this.layoutCross(children, "flex-start", cross, anchorPos, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen + 2 * padding;
+            const anchorPosMap = {
+              "flex-start": anchorPos,
+              "flex-end": anchorPos + s.crossLen,
+              center: anchorPos + s.crossLen / 2
+            };
+            this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen + 2 * padding;
           });
         }
         children.forEach((child, idx) => {
           child.addUpdateBoundTag(), child.addUpdatePositionTag(), child.clearUpdateLayoutTag();
-        }), p.addUpdateLayoutTag(), clip || this.tempBounds.equals(p.AABBBounds) || (this.tryLayout(p), this.layouting = !1);
+        }), p.addUpdateLayoutTag();
+        const b = this.getAABBBounds(p);
+        clip || this.tempBounds.equals(b) || this.tryLayout(p, !1);
+      }
+      getAABBBounds(graphic) {
+        this.skipBoundsTrigger = !0;
+        const b = graphic.AABBBounds;
+        return this.skipBoundsTrigger = !1, b;
+      }
+      updateChildPos(posBaseLeftTop, lastP, lastBP) {
+        return posBaseLeftTop + (null != lastP ? lastP : 0) - lastBP;
       }
       layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, currSeg) {
         if ("flex-start" === justifyContent) {
           let pos = 0;
-          for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen;
+          for (let i = lastIdx; i <= currSeg.idx; i++) {
+            const posBaseLeftTop = pos + getPadding(children[i], main.field),
+              b = this.getAABBBounds(children[i]);
+            !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b[`${main.field}1`])), pos += mianLenArray[i].mainLen;
+          }
         } else if ("flex-end" === justifyContent) {
           let pos = main.len;
-          for (let i = lastIdx; i <= currSeg.idx; i++) pos -= mianLenArray[i].mainLen, children[i].attribute[main.field] = pos + getPadding(children[i], main.field);
+          for (let i = lastIdx; i <= currSeg.idx; i++) {
+            pos -= mianLenArray[i].mainLen;
+            const posBaseLeftTop = pos + getPadding(children[i], main.field),
+              b = this.getAABBBounds(children[i]);
+            !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b[`${main.field}1`]));
+          }
         } else if ("space-around" === justifyContent) {
           if (currSeg.mainLen >= main.len) {
             let pos = 0;
-            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen;
+            for (let i = lastIdx; i <= currSeg.idx; i++) {
+              const posBaseLeftTop = pos + getPadding(children[i], main.field),
+                b = this.getAABBBounds(children[i]);
+              !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b[`${main.field}1`])), pos += mianLenArray[i].mainLen;
+            }
           } else {
             const size = currSeg.idx - lastIdx + 1,
               padding = (main.len - currSeg.mainLen) / size / 2;
             let pos = padding;
-            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen + 2 * padding;
+            for (let i = lastIdx; i <= currSeg.idx; i++) {
+              const posBaseLeftTop = pos + getPadding(children[i], main.field),
+                b = this.getAABBBounds(children[i]);
+              !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b[`${main.field}1`])), pos += mianLenArray[i].mainLen + 2 * padding;
+            }
           }
         } else if ("space-between" === justifyContent) {
           if (currSeg.mainLen >= main.len) {
             let pos = 0;
-            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen;
+            for (let i = lastIdx; i <= currSeg.idx; i++) {
+              const posBaseLeftTop = pos + getPadding(children[i], main.field),
+                b = this.getAABBBounds(children[i]);
+              !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b[`${main.field}1`])), pos += mianLenArray[i].mainLen;
+            }
           } else {
             const size = currSeg.idx - lastIdx + 1,
               padding = (main.len - currSeg.mainLen) / (2 * size - 2);
             let pos = 0;
-            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen + 2 * padding;
+            for (let i = lastIdx; i <= currSeg.idx; i++) {
+              const posBaseLeftTop = pos + getPadding(children[i], main.field),
+                b = this.getAABBBounds(children[i]);
+              !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b[`${main.field}1`])), pos += mianLenArray[i].mainLen + 2 * padding;
+            }
           }
         } else if ("center" === justifyContent) {
           let pos = (main.len - currSeg.mainLen) / 2;
-          for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen;
+          for (let i = lastIdx; i <= currSeg.idx; i++) {
+            const posBaseLeftTop = pos + getPadding(children[i], main.field),
+              b = this.getAABBBounds(children[i]);
+            !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b[`${main.field}1`])), pos += mianLenArray[i].mainLen;
+          }
         }
       }
-      layoutCross(children, alignItem, cross, anchorPos, lenArray, currSeg, lastIdx) {
-        if ("flex-end" === alignItem) for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen + getPadding(children[i], cross.field);else if ("center" === alignItem) for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen / 2 + getPadding(children[i], cross.field);else for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos + getPadding(children[i], cross.field);
+      layoutCross(children, alignItem, cross, anchorPosMap, lenArray, currSeg, lastIdx) {
+        var _a;
+        for (let i = lastIdx; i <= currSeg.idx; i++) {
+          const child = children[i];
+          let {
+            alignSelf: alignSelf
+          } = child.attribute;
+          alignSelf && "auto" !== alignSelf || (alignSelf = alignItem);
+          const b = this.getAABBBounds(child),
+            anchorPos = null !== (_a = anchorPosMap[alignSelf]) && void 0 !== _a ? _a : anchorPosMap["flex-start"];
+          "flex-end" === alignSelf ? !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos - lenArray[i].crossLen + getPadding(child, cross.field), child.attribute[cross.field], b[`${cross.field}1`])) : "center" === alignSelf ? !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos - lenArray[i].crossLen / 2 + getPadding(child, cross.field), child.attribute[cross.field], b[`${cross.field}1`])) : !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos + getPadding(child, cross.field), child.attribute[cross.field], b[`${cross.field}1`]));
+        }
       }
       activate(context) {
         this.pluginService = context, application.graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {
-          graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic), this.layouting = !1;
+          graphic.glyphHost && (graphic = graphic.glyphHost), graphic.stage && graphic.stage === this.pluginService.stage && this.tryLayout(graphic, !1);
         }), application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
-          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === this.pluginService.stage && graphic.isContainer && _tempBounds.copy(bounds);
+          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === this.pluginService.stage && graphic.isContainer && !this.skipBoundsTrigger && _tempBounds.copy(bounds);
         }), application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
-          stage && stage === this.pluginService.stage && graphic.isContainer && (_tempBounds.equals(bounds) || (this.tryLayout(graphic), this.layouting = !1));
+          stage && stage === this.pluginService.stage && graphic.isContainer && !this.skipBoundsTrigger && (_tempBounds.equals(bounds) || this.tryLayout(graphic, !1));
         }), application.graphicService.hooks.onSetStage.tap(this.key, graphic => {
-          graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic), this.layouting = !1;
+          graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic, !1);
         });
       }
       deactivate(context) {
-        application.graphicService.hooks.onAttributeUpdate.taps = application.graphicService.hooks.onAttributeUpdate.taps.filter(item => item.name !== this.key), application.graphicService.hooks.onSetStage.taps = application.graphicService.hooks.onSetStage.taps.filter(item => item.name !== this.key);
+        application.graphicService.hooks.onAttributeUpdate.taps = application.graphicService.hooks.onAttributeUpdate.taps.filter(item => item.name !== this.key), application.graphicService.hooks.beforeUpdateAABBBounds.taps = application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => item.name !== this.key), application.graphicService.hooks.afterUpdateAABBBounds.taps = application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => item.name !== this.key), application.graphicService.hooks.onSetStage.taps = application.graphicService.hooks.onSetStage.taps.filter(item => item.name !== this.key);
       }
     }
     function getPadding(graphic, field) {
-      if (!graphic.attribute.boundsPadding) return 0;
-      if (isNumber$1(graphic.attribute.boundsPadding)) return graphic.attribute.boundsPadding;
-      if (isArray$1(graphic.attribute.boundsPadding) && 1 === graphic.attribute.boundsPadding.length) return graphic.attribute.boundsPadding[0];
-      const paddingArray = parsePadding(graphic.attribute.boundsPadding);
-      return "x" === field ? paddingArray[3] : "y" === field ? paddingArray[0] : 0;
+      return 0;
     }
 
     const defaultTicker = new DefaultTicker();
@@ -17064,6 +17131,9 @@
           this.pluginService.unRegister(plugin);
         }));
       }
+      getPluginsByName(name) {
+        return this.pluginService.findPluginsByName(name);
+      }
       tryUpdateAABBBounds() {
         const viewBox = this._viewBox;
         return this._AABBBounds.setValue(viewBox.x1, viewBox.y1, viewBox.x2, viewBox.y2), this._AABBBounds;
@@ -17097,7 +17167,7 @@
       render(layers, params) {
         this.ticker.start(), this.timeline.resume();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children, params), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       combineLayersToWindow() {}
       renderNextFrame(layers, force) {
@@ -17124,7 +17194,8 @@
             background: layer === this.defaultLayer ? this.background : void 0,
             updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty())
           }, Object.assign({
-            renderStyle: this.renderStyle
+            renderStyle: this.renderStyle,
+            keepMatrix: this.params.renderKeepMatrix
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
@@ -17507,11 +17578,17 @@
           if (!params.bounds.contains(point.x, point.y)) return result;
           offsetX = params.bounds.x1, offsetY = params.bounds.y1;
         }
-        this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
+        if (this.pickContext) if (params.keepMatrix) {
+          if (this.pickContext.nativeContext && this.pickContext.nativeContext.getTransform) {
+            const t = this.pickContext.nativeContext.getTransform();
+            this.pickContext.setTransformFromMatrix(t, !0, 1);
+          }
+        } else this.pickContext.inuse = !0, this.pickContext.clearMatrix(!0, 1);
+        params.pickContext = this.pickContext;
         const parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
         let group;
         for (let i = graphics.length - 1; i >= 0 && (result = graphics[i].isContainer ? this.pickGroup(graphics[i], point, parentMatrix, params) : this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
-        if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
+        if (result.graphic || (result.group = group), this.pickContext && !params.keepMatrix && (this.pickContext.inuse = !1), result.graphic) {
           let g = result.graphic;
           for (; g.parent;) g = g.parent;
           g.shadowHost && (result.params = {
@@ -18129,75 +18206,75 @@
     });
 
     function registerArcGraphic() {
-      graphicCreator.RegisterGraphicCreator("arc", createArc);
+      graphicCreator$1.RegisterGraphicCreator("arc", createArc);
     }
 
     function registerArc3dGraphic() {
-      graphicCreator.RegisterGraphicCreator("arc3d", createArc3d);
+      graphicCreator$1.RegisterGraphicCreator("arc3d", createArc3d);
     }
 
     function registerAreaGraphic() {
-      graphicCreator.RegisterGraphicCreator("area", createArea);
+      graphicCreator$1.RegisterGraphicCreator("area", createArea);
     }
 
     function registerCircleGraphic() {
-      graphicCreator.RegisterGraphicCreator("circle", createCircle);
+      graphicCreator$1.RegisterGraphicCreator("circle", createCircle);
     }
 
     function registerGlyphGraphic() {
-      graphicCreator.RegisterGraphicCreator("glyph", createGlyph);
+      graphicCreator$1.RegisterGraphicCreator("glyph", createGlyph);
     }
 
     function registerGroupGraphic() {
-      graphicCreator.RegisterGraphicCreator("group", createGroup);
+      graphicCreator$1.RegisterGraphicCreator("group", createGroup);
     }
 
     function registerImageGraphic() {
-      graphicCreator.RegisterGraphicCreator("image", createImage);
+      graphicCreator$1.RegisterGraphicCreator("image", createImage);
     }
 
     function registerLineGraphic() {
-      graphicCreator.RegisterGraphicCreator("line", createLine);
+      graphicCreator$1.RegisterGraphicCreator("line", createLine);
     }
 
     function registerPathGraphic() {
-      graphicCreator.RegisterGraphicCreator("path", createPath);
+      graphicCreator$1.RegisterGraphicCreator("path", createPath);
     }
 
     function registerPolygonGraphic() {
-      graphicCreator.RegisterGraphicCreator("polygon", createPolygon);
+      graphicCreator$1.RegisterGraphicCreator("polygon", createPolygon);
     }
 
     function registerPyramid3dGraphic() {
-      graphicCreator.RegisterGraphicCreator("pyramid3d", createPyramid3d);
+      graphicCreator$1.RegisterGraphicCreator("pyramid3d", createPyramid3d);
     }
 
     function registerRectGraphic() {
-      graphicCreator.RegisterGraphicCreator("rect", createRect);
+      graphicCreator$1.RegisterGraphicCreator("rect", createRect);
     }
 
     function registerRect3dGraphic() {
-      graphicCreator.RegisterGraphicCreator("rect3d", createRect3d);
+      graphicCreator$1.RegisterGraphicCreator("rect3d", createRect3d);
     }
 
     function registerRichtextGraphic() {
-      graphicCreator.RegisterGraphicCreator("richtext", createRichText);
+      graphicCreator$1.RegisterGraphicCreator("richtext", createRichText);
     }
 
     function registerSymbolGraphic() {
-      graphicCreator.RegisterGraphicCreator("symbol", createSymbol);
+      graphicCreator$1.RegisterGraphicCreator("symbol", createSymbol);
     }
 
     function registerTextGraphic() {
-      graphicCreator.RegisterGraphicCreator("text", createText);
+      graphicCreator$1.RegisterGraphicCreator("text", createText);
     }
 
     function registerShadowRootGraphic() {
-      graphicCreator.RegisterGraphicCreator("shadowRoot", createShadowRoot);
+      graphicCreator$1.RegisterGraphicCreator("shadowRoot", createShadowRoot);
     }
 
     function registerWrapTextGraphic() {
-      graphicCreator.RegisterGraphicCreator("wrapText", createWrapText);
+      graphicCreator$1.RegisterGraphicCreator("wrapText", createWrapText);
     }
 
     const REACT_TO_CANOPUS_EVENTS = {
@@ -18248,40 +18325,40 @@
       onDblClick: "dblclick"
     };
     function VArc(params) {
-      return graphicCreator.arc(params ? params.attribute : {});
+      return graphicCreator$1.arc(params ? params.attribute : {});
     }
     function VArea(params) {
-      return graphicCreator.area(params ? params.attribute : {});
+      return graphicCreator$1.area(params ? params.attribute : {});
     }
     function VCircle(params) {
-      return graphicCreator.circle(params ? params.attribute : {});
+      return graphicCreator$1.circle(params ? params.attribute : {});
     }
     function VGroup(params) {
-      return graphicCreator.group(params ? params.attribute : {});
+      return graphicCreator$1.group(params ? params.attribute : {});
     }
     function VGlyph(params) {
-      return graphicCreator.glyph(params ? params.attribute : {});
+      return graphicCreator$1.glyph(params ? params.attribute : {});
     }
     function VImage(params) {
-      return graphicCreator.image(params ? params.attribute : {});
+      return graphicCreator$1.image(params ? params.attribute : {});
     }
     function VLine(params) {
-      return graphicCreator.line(params ? params.attribute : {});
+      return graphicCreator$1.line(params ? params.attribute : {});
     }
     function VPath(params) {
-      return graphicCreator.path(params ? params.attribute : {});
+      return graphicCreator$1.path(params ? params.attribute : {});
     }
     function VPolygon(params) {
-      return graphicCreator.polygon(params ? params.attribute : {});
+      return graphicCreator$1.polygon(params ? params.attribute : {});
     }
     function VRect(params) {
-      return graphicCreator.rect(params ? params.attribute : {});
+      return graphicCreator$1.rect(params ? params.attribute : {});
     }
     function VSymbol(params) {
-      return graphicCreator.symbol(params ? params.attribute : {});
+      return graphicCreator$1.symbol(params ? params.attribute : {});
     }
     function VText(params) {
-      return graphicCreator.text(params ? params.attribute : {});
+      return graphicCreator$1.text(params ? params.attribute : {});
     }
 
     var __rest$4 = undefined && undefined.__rest || function (s, e) {
@@ -18306,7 +18383,7 @@
         } = _a,
         props = __rest$4(_a, ["key", "attribute", "stateProxy"]);
       let c = type;
-      isString$2(type) && (c = graphicCreator[type]);
+      isString$2(type) && (c = graphicCreator$1[type]);
       const childrenList = [];
       for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
         children[_key - 2] = arguments[_key];
@@ -20039,7 +20116,7 @@
           x += point.x, y += point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
         let picked = !0;
-        if (!onlyTranslate || rect.shadowRoot || isNumber$3(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
+        if (!onlyTranslate || rect.shadowRoot || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
           if (picked) return !0;
           const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth,
             pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
@@ -20107,7 +20184,7 @@
           x += point.x, y += point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
         let picked = !0;
-        if (!onlyTranslate || isNumber$3(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
+        if (!onlyTranslate || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
           if (picked) return !0;
           const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth,
             pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
@@ -24666,7 +24743,7 @@
         width: 0,
         height: 0
       };
-      const bounds = getTextBounds({
+      const bounds = getTextBounds$1({
         text: text,
         fontFamily: null !== (_a = textSpec.fontFamily) && void 0 !== _a ? _a : fontFamily,
         fontSize: textSpec.fontSize || 12,
@@ -24682,6 +24759,14 @@
         height: bounds.height()
       };
     }
+    function isRichText(attributes) {
+      let typeKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "type";
+      return typeKey in attributes && "rich" === attributes[typeKey] || isObject$4(attributes.text) && "rich" === attributes.text.type;
+    }
+    function richTextAttributeTransform(attributes) {
+      var _a, _b;
+      return attributes.width = null !== (_a = attributes.width) && void 0 !== _a ? _a : 0, attributes.height = null !== (_b = attributes.height) && void 0 !== _b ? _b : 0, attributes.maxWidth = attributes.maxLineWidth, attributes.textConfig = attributes.text.text || attributes.text, attributes;
+    }
 
     function loadTagComponent() {
       registerGroup(), registerRect(), registerSymbol(), registerRichtext(), registerText();
@@ -24702,7 +24787,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
       render() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const {
             text = "",
             textStyle = {},
@@ -24734,7 +24819,7 @@
           shapeStyle = __rest$3(shape, ["visible"]);
         if (isBoolean$2(shapeVisible)) {
           const size = (null == shapeStyle ? void 0 : shapeStyle.size) || 10,
-            maxSize = isNumber$3(size) ? size : Math.max(size[0], size[1]);
+            maxSize = isNumber$2(size) ? size : Math.max(size[0], size[1]);
           symbol = group.createOrUpdateChild("tag-shape", Object.assign(Object.assign({
             symbolType: "circle",
             size: size,
@@ -24746,39 +24831,15 @@
           }), "symbol"), isEmpty(null == state ? void 0 : state.shape) || (symbol.states = state.shape), shapeVisible && (symbolPlaceWidth = maxSize + space);
         }
         let textShape;
-        if (tagWidth += symbolPlaceWidth, textX += symbolPlaceWidth, "rich" === type) {
-          const richTextAttrs = Object.assign(Object.assign({
-            textConfig: text,
-            visible: isValid$1(text) && !1 !== visible
-          }, textStyle), {
-            x: textX,
-            y: 0,
-            width: null !== (_a = textStyle.width) && void 0 !== _a ? _a : 0,
-            height: null !== (_b = textStyle.height) && void 0 !== _b ? _b : 0
-          });
-          textShape = group.createOrUpdateChild("tag-text", richTextAttrs, "richtext");
-          const {
-              visible: bgVisible
-            } = panel,
-            backgroundStyle = __rest$3(panel, ["visible"]);
-          if (visible && isBoolean$2(bgVisible)) {
-            const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
-              visible: bgVisible && !!text,
-              x: textShape.AABBBounds.x1,
-              y: textShape.AABBBounds.y1,
-              width: textShape.AABBBounds.width(),
-              height: textShape.AABBBounds.height()
-            }), "rect");
-            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
-          }
-        } else if ("html" === type) {
-          const richTextAttrs = Object.assign(Object.assign({
-            textConfig: [],
+        tagWidth += symbolPlaceWidth, textX += symbolPlaceWidth;
+        if (isRichText({
+          text: text
+        }) || "rich" === type) {
+          const richTextAttrs = Object.assign(Object.assign(Object.assign({}, richTextAttributeTransform(Object.assign({
+            type: type,
+            text: text
+          }, textStyle))), textStyle), {
             visible: isValid$1(text) && !1 !== visible,
-            html: Object.assign(Object.assign({
-              dom: text
-            }, DEFAULT_HTML_TEXT_SPEC), textStyle)
-          }, textStyle), {
             x: textX,
             y: 0
           });
@@ -24799,7 +24860,7 @@
           }
         } else {
           const textAttrs = Object.assign(Object.assign({
-            text: text,
+            text: isObject$4(text) && "type" in text && "text" === text.type ? text.text : text,
             visible: isValid$1(text) && !1 !== visible,
             lineHeight: null == textStyle ? void 0 : textStyle.fontSize
           }, textStyle), {
@@ -24807,12 +24868,12 @@
             y: 0
           });
           isNil$1(textAttrs.lineHeight) && (textAttrs.lineHeight = textStyle.fontSize), textShape = group.createOrUpdateChild("tag-text", textAttrs, "text"), isEmpty(null == state ? void 0 : state.text) || (textShape.states = state.text);
-          const textBounds = measureTextSize(textAttrs.text, textStyle, null === (_c = this.stage) || void 0 === _c ? void 0 : _c.getTheme().text.fontFamily),
+          const textBounds = measureTextSize(textAttrs.text, textStyle, null === (_a = this.stage) || void 0 === _a ? void 0 : _a.getTheme().text.fontFamily),
             textWidth = textBounds.width,
             textHeight = textBounds.height;
           tagWidth += textWidth;
-          const size = null !== (_d = shape.size) && void 0 !== _d ? _d : 10,
-            maxSize = isNumber$3(size) ? size : Math.max(size[0], size[1]);
+          const size = null !== (_b = shape.size) && void 0 !== _b ? _b : 10,
+            maxSize = isNumber$2(size) ? size : Math.max(size[0], size[1]);
           tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
           const {
             textAlign: textAlign,
@@ -24820,11 +24881,21 @@
           } = textStyle;
           (isValid$1(minWidth) || isValid$1(maxWidth)) && (isValid$1(minWidth) && tagWidth < minWidth && (tagWidth = minWidth), isValid$1(maxWidth) && tagWidth > maxWidth && (tagWidth = maxWidth, textShape.setAttribute("maxLineWidth", maxWidth - parsedPadding[1] - parsedPadding[2])));
           let x = 0,
-            y = 0;
-          "center" === textAlign ? (x -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2)) : "right" === textAlign || "end" === textAlign ? (x -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : "left" !== textAlign && "start" !== textAlign || group.setAttribute("x", parsedPadding[3]), !textAlwaysCenter || "left" !== textAlign && "start" !== textAlign || textShape.setAttributes({
-            x: textX + tagWidth / 2,
-            textAlign: "center"
-          }), "middle" === textBaseline ? (y -= tagHeight / 2, symbol && symbol.setAttribute("y", 0)) : "bottom" === textBaseline ? (y -= tagHeight, symbol && symbol.setAttribute("y", -textHeight / 2), group.setAttribute("y", -parsedPadding[2])) : "top" === textBaseline && (group.setAttribute("y", parsedPadding[0]), symbol && symbol.setAttribute("y", textHeight / 2));
+            y = 0,
+            flag = 0;
+          if ("left" === textAlign || "start" === textAlign ? flag = 1 : "right" === textAlign || "end" === textAlign ? flag = -1 : "center" === textAlign && (flag = 0), flag ? flag < 0 ? (x -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : flag > 0 && group.setAttribute("x", parsedPadding[3]) : (x -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2)), textAlwaysCenter && flag) {
+            const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3],
+              tsWidth = textWidth + symbolPlaceWidth,
+              textX = (containerWidth - tsWidth) / 2 + symbolPlaceWidth + textWidth / 2,
+              symbolX = (containerWidth - tsWidth) / 2 + maxSize / 2;
+            textShape.setAttributes({
+              x: textX * flag,
+              textAlign: "center"
+            }), null == symbol || symbol.setAttributes({
+              x: symbolX * flag
+            }), group.setAttribute("x", parsedPadding[2 + flag] * flag);
+          }
+          "middle" === textBaseline ? (y -= tagHeight / 2, symbol && symbol.setAttribute("y", 0)) : "bottom" === textBaseline ? (y -= tagHeight, symbol && symbol.setAttribute("y", -textHeight / 2), group.setAttribute("y", -parsedPadding[2])) : "top" === textBaseline && (group.setAttribute("y", parsedPadding[0]), symbol && symbol.setAttribute("y", textHeight / 2));
           const {
               visible: bgVisible
             } = panel,
@@ -25314,7 +25385,7 @@
           }
           points.forEach((point, index) => {
             var _a, _b;
-            const line = graphicCreator.line(Object.assign(Object.assign({
+            const line = graphicCreator$1.line(Object.assign(Object.assign({
               points: point
             }, isArray$1(lineStyle) ? null !== (_a = lineStyle[index]) && void 0 !== _a ? _a : lineStyle[lineStyle.length - 1] : lineStyle), {
               fill: !1
@@ -25322,7 +25393,7 @@
             line.name = `${this.name}-line`, line.id = this._getNodeId("line" + index), isEmpty(null == state ? void 0 : state.line) || (line.states = isArray$1(state.line) ? null !== (_b = state.line[index]) && void 0 !== _b ? _b : state.line[state.line.length - 1] : state.line), this.add(line);
           });
         } else {
-          const line = graphicCreator.polygon(Object.assign(Object.assign({
+          const line = graphicCreator$1.polygon(Object.assign(Object.assign({
             points: this._clipPoints(this.attribute.points)
           }, array$1(lineStyle)[0]), {
             fill: !1,
@@ -25361,7 +25432,7 @@
           }, rotate = startAngle + Math.PI / 2) : (position = {
             x: end.x + (isValidNumber$1(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
             y: end.y + (isValidNumber$1(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
-          }, rotate = endAngle + Math.PI / 2), symbol = graphicCreator.symbol(Object.assign(Object.assign(Object.assign({}, position), {
+          }, rotate = endAngle + Math.PI / 2), symbol = graphicCreator$1.symbol(Object.assign(Object.assign(Object.assign({}, position), {
             symbolType: symbolType,
             size: size,
             angle: autoRotate ? rotate + refAngle : 0,
@@ -25554,14 +25625,14 @@
       getBoundsWithoutRender(attributes) {
         const currentAttribute = cloneDeep(this.attribute);
         merge(this.attribute, attributes);
-        const offscreenGroup = graphicCreator.group({
+        const offscreenGroup = graphicCreator$1.group({
           x: this.attribute.x,
           y: this.attribute.y
         });
         return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), this.attribute = currentAttribute, offscreenGroup.AABBBounds;
       }
       render() {
-        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator.group({
+        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -25583,13 +25654,13 @@
             line: line,
             items: items
           } = this.attribute,
-          axisContainer = graphicCreator.group({
+          axisContainer = graphicCreator$1.group({
             x: 0,
             y: 0,
             zIndex: 1
           });
         if (axisContainer.name = AXIS_ELEMENT_NAME.axisContainer, axisContainer.id = this._getNodeId("container"), axisContainer.setMode(this.mode), this.axisContainer = axisContainer, container.add(axisContainer), line && line.visible && this.renderLine(axisContainer), items && items.length && (this.data = this._transformItems(items[0]), tick && tick.visible && this.renderTicks(axisContainer), label && label.visible)) {
-          const labelGroup = graphicCreator.group({
+          const labelGroup = graphicCreator$1.group({
             x: 0,
             y: 0,
             pickable: !1
@@ -25622,14 +25693,14 @@
       }
       renderTicks(container) {
         const tickLineItems = this.getTickLineItems(),
-          tickLineGroup = graphicCreator.group({
+          tickLineGroup = graphicCreator$1.group({
             x: 0,
             y: 0,
             pickable: !1
           });
         tickLineGroup.name = AXIS_ELEMENT_NAME.tickContainer, tickLineGroup.id = this._getNodeId("tick-container"), container.add(tickLineGroup), tickLineItems.forEach((item, index) => {
           var _a;
-          const line = graphicCreator.line(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
+          const line = graphicCreator$1.line(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
           if (line.name = AXIS_ELEMENT_NAME.tick, line.id = this._getNodeId(item.id), isEmpty(null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.state)) line.states = DEFAULT_STATES$2;else {
             const data = this.data[index],
               tickLineState = merge({}, DEFAULT_STATES$2, this.attribute.tick.state);
@@ -25645,7 +25716,7 @@
         if (subTick && subTick.visible) {
           const subTickLineItems = this.getSubTickLineItems();
           subTickLineItems.length && subTickLineItems.forEach((item, index) => {
-            const line = graphicCreator.line(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
+            const line = graphicCreator$1.line(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
             if (line.name = AXIS_ELEMENT_NAME.subTick, line.id = this._getNodeId(`${index}`), isEmpty(subTick.state)) line.states = DEFAULT_STATES$2;else {
               const subTickLineState = merge({}, DEFAULT_STATES$2, subTick.state);
               Object.keys(subTickLineState).forEach(key => {
@@ -25662,18 +25733,16 @@
         } = this.attribute.label;
         dataFilter && isFunction$1(dataFilter) && (items = dataFilter(items, layer));
         const data = this._transformItems(items),
-          labelGroup = graphicCreator.group({
+          labelGroup = graphicCreator$1.group({
             x: 0,
             y: 0,
             pickable: !1
           });
         return labelGroup.name = `${AXIS_ELEMENT_NAME.labelContainer}-layer-${layer}`, labelGroup.id = this._getNodeId(`label-container-layer-${layer}`), container.add(labelGroup), data.forEach((item, index) => {
-          var _a, _b, _c;
+          var _a;
           const labelStyle = this._getLabelAttribute(item, index, data, layer);
           let text;
-          if ("rich" === labelStyle.type ? (labelStyle.textConfig = labelStyle.text, labelStyle.width = null !== (_a = labelStyle.width) && void 0 !== _a ? _a : 0, labelStyle.height = null !== (_b = labelStyle.height) && void 0 !== _b ? _b : 0, text = graphicCreator.richtext(labelStyle)) : "html" === labelStyle.type ? (labelStyle.textConfig = [], labelStyle.html = Object.assign(Object.assign({
-            dom: labelStyle.text
-          }, DEFAULT_HTML_TEXT_SPEC), labelStyle), text = graphicCreator.richtext(labelStyle)) : text = graphicCreator.text(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_c = this.attribute.label) || void 0 === _c ? void 0 : _c.state)) text.states = DEFAULT_STATES$2;else {
+          if (text = isRichText(labelStyle) ? graphicCreator$1.richtext(richTextAttributeTransform(labelStyle)) : graphicCreator$1.text(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.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));
@@ -26129,7 +26198,7 @@
         if (panel && panel.visible) {
           const axisContainer = this.axisContainer,
             axisContainerBounds = axisContainer.AABBBounds,
-            bgRect = graphicCreator.rect(Object.assign({
+            bgRect = graphicCreator$1.rect(Object.assign({
               x: axisContainerBounds.x1,
               y: axisContainerBounds.y1,
               width: axisContainerBounds.width(),
@@ -26386,7 +26455,7 @@
           const minSize = this._getAxisLabelLimitLength(verticalMinSize, layerCount);
           let x, y;
           axisLabelContainerSize = Math.max(axisLabelContainerSize, minSize), "left" === orient ? (x = axisLabelContainerBounds.x2 - axisLabelContainerSize, y = axisLabelContainerBounds.y1) : "right" === orient ? (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y1) : "top" === orient ? (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y2 - axisLabelContainerSize) : "bottom" === orient && (x = axisLabelContainerBounds.x1, y = axisLabelContainerBounds.y1);
-          const bgRect = graphicCreator.rect({
+          const bgRect = graphicCreator$1.rect({
             x: x,
             y: y,
             width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
@@ -26491,7 +26560,7 @@
         this._current = defaultCurrent;
         const parsedPadding = normalizePadding(padding),
           isHorizontal = "horizontal" === layout,
-          container = graphicCreator.group({
+          container = graphicCreator$1.group({
             x: 0,
             y: 0
           }),
@@ -26504,7 +26573,7 @@
           nextShape: nextShape
         } = handler;
         preShape || (preShape = isHorizontal ? "triangleLeft" : "triangleUp"), nextShape || (nextShape = isHorizontal ? "triangleRight" : "triangleDown");
-        const preHandler = graphicCreator.symbol(Object.assign(Object.assign({
+        const preHandler = graphicCreator$1.symbol(Object.assign(Object.assign({
           strokeBoundsBuffer: 0,
           pickMode: "imprecise"
         }, handlerStyle), {
@@ -26521,9 +26590,9 @@
             textAlign: "center",
             textBaseline: "middle"
           }, 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.text(Object.assign({
+          handlerSizeX = isNumber$2(handlerSize) ? handlerSize : handlerSize[0],
+          handlerSizeY = isNumber$2(handlerSize) ? handlerSize : handlerSize[1],
+          text = graphicCreator$1.text(Object.assign({
             x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0,
             y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2,
             text: `${defaultCurrent}/${total}`,
@@ -26532,7 +26601,7 @@
             lineHeight: null == textStyle ? void 0 : textStyle.fontSize
           }, textStyle));
         this.text = text, container.add(text);
-        const nextHandler = graphicCreator.symbol(Object.assign(Object.assign({
+        const nextHandler = graphicCreator$1.symbol(Object.assign(Object.assign({
           strokeBoundsBuffer: 0,
           pickMode: "imprecise"
         }, handlerStyle), {
@@ -26595,7 +26664,7 @@
             padding = 0
           } = this.attribute,
           parsedPadding = normalizePadding(padding),
-          innerView = graphicCreator.group({
+          innerView = graphicCreator$1.group({
             x: parsedPadding[3],
             y: parsedPadding[0],
             pickable: interactive,
@@ -26742,7 +26811,7 @@
         if (!1 === item.visible || isEmpty(items)) return;
         let legendItems = items;
         reversed && (legendItems = null == items ? void 0 : items.reverse());
-        const itemsContainer = graphicCreator.group({
+        const itemsContainer = graphicCreator$1.group({
           x: 0,
           y: 0
         });
@@ -26819,15 +26888,15 @@
           backgroundStyle = this._handleStyle(background, item, isSelected, index, items),
           parsedPadding = normalizePadding(padding);
         let itemGroup;
-        !1 === background.visible ? (itemGroup = graphicCreator.group({
+        !1 === background.visible ? (itemGroup = graphicCreator$1.group({
           x: 0,
           y: 0,
           cursor: null === (_a = backgroundStyle.style) || void 0 === _a ? void 0 : _a.cursor
-        }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = graphicCreator.group(Object.assign({
+        }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = graphicCreator$1.group(Object.assign({
           x: 0,
           y: 0
         }, backgroundStyle.style)), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state)), itemGroup.id = `${null != id ? id : label}-${index}`, itemGroup.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
-        const innerGroup = graphicCreator.group({
+        const innerGroup = graphicCreator$1.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -26840,7 +26909,7 @@
         if (shapeAttr && !1 !== shapeAttr.visible) {
           const s = get$5(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE);
           shapeSize = isArray$1(s) ? s[0] || 0 : s, shapeSpace = get$5(shapeAttr, "space", DEFAULT_SHAPE_SPACE);
-          const itemShape = graphicCreator.symbol(Object.assign(Object.assign({
+          const itemShape = graphicCreator$1.symbol(Object.assign(Object.assign({
             x: 0,
             y: 0,
             symbolType: "circle",
@@ -26851,10 +26920,11 @@
             shape.fill && isNil$1(shapeStyle.state[key].fill) && color && (shapeStyle.state[key].fill = color), shape.stroke && isNil$1(shapeStyle.state[key].stroke) && color && (shapeStyle.state[key].stroke = color);
           }), this._appendDataToShape(itemShape, LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeStyle.state), itemShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), innerGroup.add(itemShape);
         }
-        let focusSpace = 0;
+        let labelShape,
+          focusSpace = 0;
         if (focus) {
           const focusSize = get$5(focusIconStyle, "size", DEFAULT_SHAPE_SIZE);
-          focusShape = graphicCreator.symbol(Object.assign(Object.assign({
+          focusShape = graphicCreator$1.symbol(Object.assign(Object.assign({
             x: 0,
             y: -focusSize / 2 - 1,
             strokeBoundsBuffer: 0
@@ -26864,29 +26934,32 @@
             boundsPadding: parsedPadding
           })), this._appendDataToShape(focusShape, LEGEND_ELEMENT_NAME.focus, item, itemGroup), focusSpace = focusSize;
         }
-        const labelShape = graphicCreator.text(Object.assign(Object.assign({
-          x: shapeSize / 2 + shapeSpace,
-          y: 0,
-          textAlign: "start",
-          textBaseline: "middle",
-          lineHeight: null === (_b = labelStyle.style) || void 0 === _b ? void 0 : _b.fontSize
-        }, labelStyle.style), {
-          text: labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label
-        }));
-        this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), innerGroup.add(labelShape);
+        const text = labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label,
+          labelAttributes = Object.assign(Object.assign({
+            x: shapeSize / 2 + shapeSpace,
+            y: 0,
+            textAlign: "start",
+            textBaseline: "middle",
+            lineHeight: null === (_b = labelStyle.style) || void 0 === _b ? void 0 : _b.fontSize
+          }, labelStyle.style), {
+            text: text
+          });
+        labelShape = isRichText(labelAttributes) ? graphicCreator$1.richtext(richTextAttributeTransform(labelAttributes)) : graphicCreator$1.text(labelAttributes), this._appendDataToShape(labelShape, LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state), labelShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), innerGroup.add(labelShape);
         const labelSpace = get$5(labelAttr, "space", DEFAULT_LABEL_SPACE);
         if (isValid$1(value)) {
           const valueSpace = get$5(valueAttr, "space", focus ? DEFAULT_VALUE_SPACE : 0),
-            valueShape = graphicCreator.text(Object.assign(Object.assign({
+            valueText = valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value,
+            valueAttributes = Object.assign(Object.assign({
               x: 0,
               y: 0,
               textAlign: "start",
               textBaseline: "middle",
               lineHeight: valueStyle.style.fontSize
             }, valueStyle.style), {
-              text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value
-            }));
-          if (this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser) {
+              text: valueText
+            });
+          let valueShape;
+          if (valueShape = isRichText(valueAttributes) ? graphicCreator$1.richtext(richTextAttributeTransform(valueAttributes)) : graphicCreator$1.text(valueAttributes), this._appendDataToShape(valueShape, LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state), valueShape.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected), this._itemWidthByUser) {
             const layoutWidth = this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - labelSpace - focusSpace - valueSpace,
               valueBounds = valueShape.AABBBounds,
               labelBounds = labelShape.AABBBounds,
@@ -26984,7 +27057,7 @@
           });
         }
         pager.defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(pager.defaultCurrent - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(pager.defaultCurrent - 1) * (pageWidth + spaceCol)));
-        const clipGroup = graphicCreator.group({
+        const clipGroup = graphicCreator$1.group({
           x: 0,
           y: renderStartY,
           width: pageWidth,
@@ -27566,7 +27639,7 @@
         return this._isFixed && !!this._bandwidth;
       }
       _isBandwidthFixedByUser() {
-        return this._isFixed && this._userBandwidth && isNumber$3(this._userBandwidth);
+        return this._isFixed && this._userBandwidth && isNumber$2(this._userBandwidth);
       }
       clone() {
         var _a, _b, _c;
@@ -27834,13 +27907,13 @@
       }
     }
     function parseNiceOptions(originalDomain, option) {
-      const hasForceMin = isNumber$3(option.forceMin),
-        hasForceMax = isNumber$3(option.forceMax);
+      const hasForceMin = isNumber$2(option.forceMin),
+        hasForceMax = isNumber$2(option.forceMax);
       let niceType = null;
       const niceMinMax = [];
       let niceDomain = null;
       const domainValidator = hasForceMin && hasForceMax ? x => x >= option.forceMin && x <= option.forceMax : hasForceMin ? x => x >= option.forceMin : hasForceMax ? x => x <= option.forceMax : null;
-      return hasForceMin ? niceMinMax[0] = option.forceMin : isNumber$3(option.min) && option.min <= Math.min(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[0] = option.min), hasForceMax ? niceMinMax[1] = option.forceMax : isNumber$3(option.max) && option.max >= Math.max(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[1] = option.max), isNumber$3(niceMinMax[0]) && isNumber$3(niceMinMax[1]) ? (niceDomain = originalDomain.slice(), niceDomain[0] = niceMinMax[0], niceDomain[niceDomain.length - 1] = niceMinMax[1]) : niceType = isNumber$3(niceMinMax[0]) || isNumber$3(niceMinMax[1]) ? isNumber$3(niceMinMax[0]) ? "max" : "min" : "all", {
+      return hasForceMin ? niceMinMax[0] = option.forceMin : isNumber$2(option.min) && option.min <= Math.min(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[0] = option.min), hasForceMax ? niceMinMax[1] = option.forceMax : isNumber$2(option.max) && option.max >= Math.max(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[1] = option.max), isNumber$2(niceMinMax[0]) && isNumber$2(niceMinMax[1]) ? (niceDomain = originalDomain.slice(), niceDomain[0] = niceMinMax[0], niceDomain[niceDomain.length - 1] = niceMinMax[1]) : niceType = isNumber$2(niceMinMax[0]) || isNumber$2(niceMinMax[1]) ? isNumber$2(niceMinMax[0]) ? "max" : "min" : "all", {
         niceType: niceType,
         niceDomain: niceDomain,
         niceMinMax: niceMinMax,
@@ -27848,6 +27921,30 @@
       };
     }
     const fixPrecision = (start, stop, value) => Math.abs(stop - start) < 1 ? +value.toFixed(1) : Math.round(+value);
+    const d3TicksForLog = memoize((start, stop, count, base, transformer, untransformer, options) => {
+      let u = start,
+        v = stop;
+      const r = v < u;
+      r && ([u, v] = [v, u]);
+      let k,
+        t,
+        i = transformer(u),
+        j = transformer(v),
+        z = [];
+      if (!(base % 1) && j - i < count) {
+        if (i = Math.floor(i), j = Math.ceil(j), u > 0) {
+          for (; i <= j; ++i) for (k = 1; k < base; ++k) if (t = i < 0 ? k / untransformer(-i) : k * untransformer(i), !(t < u)) {
+            if (t > v) break;
+            z.push(t);
+          }
+        } else for (; i <= j; ++i) for (k = base - 1; k >= 1; --k) if (t = i > 0 ? k / untransformer(-i) : k * untransformer(i), !(t < u)) {
+          if (t > v) break;
+          z.push(t);
+        }
+        2 * z.length < count && (z = ticks$1(u, v, count));
+      } else z = ticks$1(i, j, Math.min(j - i, count)).map(untransformer);
+      return z = z.filter(t => 0 !== t), (null == options ? void 0 : options.noDecimals) && (z = Array.from(new Set(z.map(t => Math.floor(t))))), r ? z.reverse() : z;
+    });
     const ticksBaseTransform = memoize((start, stop, count, base, transformer, untransformer) => {
       const ticksResult = [],
         ticksMap = {},
@@ -27986,29 +28083,11 @@
       }
       d3Ticks() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
-        const d = this.domain();
-        let u = this._limit(d[0]),
+        let options = arguments.length > 1 ? arguments[1] : undefined;
+        const d = this.domain(),
+          u = this._limit(d[0]),
           v = this._limit(d[d.length - 1]);
-        const r = v < u;
-        r && ([u, v] = [v, u]);
-        let k,
-          t,
-          i = this._logs(u),
-          j = this._logs(v),
-          z = [];
-        if (!(this._base % 1) && j - i < count) {
-          if (i = Math.floor(i), j = Math.ceil(j), u > 0) {
-            for (; i <= j; ++i) for (k = 1; k < this._base; ++k) if (t = i < 0 ? k / this._pows(-i) : k * this._pows(i), !(t < u)) {
-              if (t > v) break;
-              z.push(t);
-            }
-          } else for (; i <= j; ++i) for (k = this._base - 1; k >= 1; --k) if (t = i > 0 ? k / this._pows(-i) : k * this._pows(i), !(t < u)) {
-            if (t > v) break;
-            z.push(t);
-          }
-          2 * z.length < count && (z = ticks$1(u, v, count));
-        } else z = ticks$1(i, j, Math.min(j - i, count)).map(this._pows);
-        return z = z.filter(t => 0 !== t), r ? z.reverse() : z;
+        return d3TicksForLog(u, v, count, this._base, this.transformer, this.untransformer, options);
       }
       ticks() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
@@ -28073,6 +28152,14 @@
       constant(_, slience) {
         return arguments.length ? (this._const = _, this.transformer = symlog(_), this.untransformer = symexp(_), this.rescale(slience)) : this._const;
       }
+      d3Ticks() {
+        let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+        let options = arguments.length > 1 ? arguments[1] : undefined;
+        const d = this.domain(),
+          u = d[0],
+          v = d[d.length - 1];
+        return d3TicksForLog(u, v, count, this._const, this.transformer, this.untransformer, options);
+      }
       ticks() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
         const d = this.calculateVisibleDomain(this._range);
@@ -28289,7 +28376,7 @@
         };
         const isHorizontal = "horizontal" === layout;
         this._isHorizontal = isHorizontal;
-        const innerView = graphicCreator.group({
+        const innerView = graphicCreator$1.group({
           x: 0,
           y: 0
         });
@@ -28297,7 +28384,7 @@
         let startTextShape,
           startLen = 0;
         if (startText && startText.visible) {
-          startTextShape = graphicCreator.text(Object.assign({
+          startTextShape = graphicCreator$1.text(Object.assign({
             x: isHorizontal ? 0 : railWidth / 2,
             y: isHorizontal ? railHeight / 2 : 0,
             textAlign: isHorizontal ? "start" : "center",
@@ -28308,19 +28395,19 @@
           const space = isValid$1(startText.space) ? startText.space : 0;
           startLen += (isHorizontal ? startTextShape.AABBBounds.width() : startTextShape.AABBBounds.height()) + space;
         }
-        const mainContainer = graphicCreator.group({
+        const mainContainer = graphicCreator$1.group({
           x: isHorizontal ? startLen : 0,
           y: isHorizontal ? 0 : startLen
         });
         innerView.add(mainContainer);
-        const railContainer = graphicCreator.group({
+        const railContainer = graphicCreator$1.group({
           x: 0,
           y: 0
         });
         let endTextShape;
         if (railContainer.name = SLIDER_ELEMENT_NAME.railContainer, this._railContainer = railContainer, mainContainer.add(railContainer), this._renderRail(railContainer), startLen += isHorizontal ? railWidth : railHeight, endText && endText.visible) {
           const space = isValid$1(endText.space) ? endText.space : 0;
-          endTextShape = graphicCreator.text(Object.assign({
+          endTextShape = graphicCreator$1.text(Object.assign({
             x: isHorizontal ? startLen + space : railWidth / 2,
             y: isHorizontal ? railHeight / 2 : startLen + space,
             textAlign: isHorizontal ? "start" : "center",
@@ -28340,7 +28427,7 @@
         } = this.attribute;
         let cursor = "default";
         !1 !== slidable && (cursor = "pointer");
-        const railShape = graphicCreator.rect(Object.assign({
+        const railShape = graphicCreator$1.rect(Object.assign({
           x: 0,
           y: 0,
           width: railWidth,
@@ -28416,7 +28503,7 @@
         const isHorizontal = this._isHorizontal,
           railLen = isHorizontal ? railWidth : railHeight;
         range || (startValue = min);
-        const trackContainer = graphicCreator.group({
+        const trackContainer = graphicCreator$1.group({
           x: 0,
           y: 0,
           width: railWidth,
@@ -28431,7 +28518,7 @@
         cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
         const trackWidth = max === min ? railLen : (endValue - startValue) / (max - min) * railLen,
           startPos = max === min ? 0 : (startValue - min) / (max - min) * railLen,
-          track = graphicCreator.rect(Object.assign({
+          track = graphicCreator$1.rect(Object.assign({
             x: isHorizontal ? startPos : 0,
             y: isHorizontal ? 0 : startPos,
             width: isHorizontal ? trackWidth : railWidth,
@@ -28441,7 +28528,7 @@
         track.name = SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track), container.add(trackContainer);
       }
       _renderHandler(style) {
-        return graphicCreator.symbol(style);
+        return graphicCreator$1.symbol(style);
       }
       _renderHandlerText(value, position) {
         var _a, _b, _c;
@@ -28465,7 +28552,7 @@
             cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
           };
         isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = handlerStart) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = handlerStart);
-        return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+        return graphicCreator$1.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
       }
       _bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
@@ -28808,7 +28895,7 @@
             sizeBackground: sizeBackground,
             disableTriggerEvent: disableTriggerEvent
           } = this.attribute,
-          mainContainer = graphicCreator.group({
+          mainContainer = graphicCreator$1.group({
             x: 0,
             y: 0
           });
@@ -28846,7 +28933,7 @@
         let path,
           start = 0;
         "horizontal" === layout ? "top" === align ? (path = `M0,0L${railWidth},0L${railWidth},12Z`, start = railHeight) : (path = `M0,12L${railWidth},12L${railWidth},0Z`, slider.setAttribute("y", 12)) : "left" === align ? path = `M${railWidth},0L${railWidth},0L${railWidth + 12},${railHeight}L${railWidth},${railHeight}Z` : (path = `M0,${railHeight}L12,${railHeight}L12,0Z`, slider.setAttribute("x", 12));
-        const background = graphicCreator.path(Object.assign(Object.assign({
+        const background = graphicCreator$1.path(Object.assign(Object.assign({
           x: 0,
           y: start,
           path: path
@@ -29777,6 +29864,25 @@
 
     const DEFAULT_CONTINUOUS_TICK_COUNT$1 = 5;
 
+    class GraphicCreator {
+      constructor() {
+        this.store = new Map();
+      }
+      RegisterGraphicCreator(name, cb) {
+        this.store.set(name, cb), this[name] = cb;
+      }
+      CreateGraphic(name, params) {
+        const cb = this.store.get(name);
+        return cb ? cb(params) : null;
+      }
+    }
+    const graphicCreator = new GraphicCreator();
+
+    let text;
+    function getTextBounds(params) {
+      return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(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",
@@ -31635,7 +31741,7 @@
     }
 
     function getQuadProps(paddingOrigin) {
-        if (isNumber$3(paddingOrigin) || isString$2(paddingOrigin) || isArray$1(paddingOrigin)) {
+        if (isNumber$2(paddingOrigin) || isString$2(paddingOrigin) || isArray$1(paddingOrigin)) {
             let padding = parsePadding(paddingOrigin);
             if (typeof padding === 'number' || typeof padding === 'string') {
                 padding = [padding, padding, padding, padding];
@@ -31901,7 +32007,7 @@
         if (isNil$1(v)) {
             return false;
         }
-        if (isNumber$3(v)) {
+        if (isNumber$2(v)) {
             return true;
         }
         return +v === +v;
@@ -32867,6 +32973,16 @@
                 cursor: 'pointer'
             };
         },
+        get loading_pic() {
+            return {
+                type: 'svg',
+                svg: '<svg viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="50" y="65" width="301" height="170"><path d="M350.3 65H50v169.8h300.3V65Z" fill="#fff"/></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M58.3 233.2h32.8v-36.8H58.3v36.8Z" fill="#C7DEFF"/><path d="M91.1 224.5v8.8H58.3M82.4 196.2H58.3" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M305.4 182.5s-2.7 12.6 0 17.4c2.7 4.8 8.3 6.7 12.4 4.4 4.2-2.4 5.3-8.1 2.6-12.9-2.7-4.8-15-8.9-15-8.9ZM336 204.7c4.3 2 9.7-.4 12-5.4 2.3-5-1.5-17.3-1.5-17.3s-11.8 5.1-14.1 10.1c-2.3 5-.7 10.6 3.6 12.6Z" fill="#00E4E5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M326.7 174s-10 11.8-10 18.6c0 6.7 4.5 12.2 10 12.2s10-5.5 10-12.3c0-6.8-10-18.5-10-18.5Z" fill="#00E4E5"/><path d="M332.3 181.5c2.3 3.6 4.4 7.8 4.4 10.9M316.7 192.5c0-3.1 2.1-7.2 4.3-10.8" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M343.1 227.3v-9.7h-34v9.7c0 3.7 3 6.6 6.6 6.6h20.9c3.6 0 6.5-2.9 6.5-6.6Z" fill="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M350.4 220.8V198H302v22.8c0 5.9 4.8 10.7 10.7 10.7h26.9c5.9 0 10.7-4.8 10.8-10.7Z" fill="#C7DEFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M331.7 74.2H117.8L87.4 203h213.8l30.5-128.8Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M337 74.2h-6.2l-30.6 129.2h6.2L337 74.2Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M303.8 203.5h2.4l30.7-129.3h-1.8l-31.3 129.3Z" fill="#C7DEFF"/><path d="m337 74.2-30.6 129.2h-5.9" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M229.9 202.1h-47.6l2 9.6h47.3l-1.7-9.6Z" fill="#C7DEFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.7 172.6 87.4 203h213.1l7.8-30.4H94.7Z" fill="#006EFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.7 172.6 87.4 203h213.1l7.8-30.4H94.7Z" fill="#006EFF"/><path d="M138.5 74.2h193.2l-23.4 98.6M94.5 172.7l11-46.3M104.8 155.4l-2.3 11.5h6.7M316 112.1l1.1-4.5" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M148.3 138.1h97V119h-97v19.1Z" fill="#00E4E5"/><path d="M303.1 80.6h20.3l-4.6 19.6M228.3 234.3c3.6 0 6.3-3.2 5.7-6.8l-4.1-24.1" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M226.2 229.5h-68.9v1.2c0 2 1.6 3.7 3.7 3.7h60.1c2.8 0 5-2.2 5.1-4.9Z" fill="#C7DEFF"/><path d="M180.699 226.8h-19.9c-2.8 0-4.6 3-3.3 5.5m0 0c.6 1.2 1.9 2 3.3 2h57.8M175.9 203.4l3.6 17.6M241.2 234.3h65.1M104.6 234.3h41.3" stroke="#071F4D"/><path d="M206.2 234.3h14.9c3.1 0 5.5-2.8 5-5.9l-4.3-24.9M160.7 226.8h46M62.2 226.1h-9.5c-1.2 0-2.2-1-2.2-2.2v-18.3c0-1.2 1-2.2 2.2-2.2h9.5" stroke="#071F4D"/><path d="M53.4 171.7H68c2.1 0 3.7 1.7 3.7 3.7v16.1M79.1 192v-21.8c0-2.5 2-4.6 4.6-4.6h2.2c2.5 0 4.5-2 4.5-4.5m0 0c0-2.5-2-4.5-4.5-4.5H56.1c-2.4 0-4.3-1.9-4.3-4.3V148M71.2 165.2h-18M64 181.7v10.1" stroke="#C7DEFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M85.7 120H124c4.3 0 7.7-3.5 7.7-7.7V65.5H94.2c-4.7 0-8.5 4.9-8.5 11V120Z" fill="#C7DEFF"/><path d="M85.7 110.7V73c0-4.1 3.4-7.5 7.5-7.5h38.5M146.2 73.8v-2.5c0-3.2-2-5.8-5.8-5.8-2.8 0-6 1.1-6 5.8v42.4c0 4.7-3.8 8.5-8.5 8.5h-15.6" stroke="#071F4D"/><path d="M119.7 122.3H87c-6.1 0-11.1-5-11.1-11.1m0 0h39M126.1 122.3c-6.1 0-11.1-5-11.1-11.1" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M85.4 122.1h37.2c-6.5-1.8-8-10.5-8-10.5H76.2c.6 8.8 9.2 10.5 9.2 10.5Z" fill="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M95.8 102.9h4.8V83.6h-4.8v19.3ZM106.6 102.9h4.8V77.6h-4.8v25.3ZM117.3 102.9h4.8V89.1h-4.8v13.8Z" fill="#fff"/><path d="M273.2 195.9h16.9M261.2 195.9h5" stroke="#fff"/><path d="M62.4 201.9v2.9M62.4 224.5v2.9" stroke="#071F4D"/><path d="m153.6 138.1 9.7-19.1M168.8 138.1l9.7-19.1M184.1 138.1l9.7-19.1M199.4 138.1l9.7-19.1M214.6 138.1l9.8-19.1M229.9 138.1l9.7-19.1" stroke="#fff"/><path d="M148.3 138.1h121.6V119H148.3v19.1Z" stroke="#071F4D"/></g></svg>',
+                width: 400,
+                height: 300,
+                name: 'loading_pic',
+                positionType: IconPosition.left
+            };
+        },
         get expand() {
             return {
                 type: 'svg',
@@ -32939,15 +33055,21 @@
     }
 
     function calcKeepAspectRatioSize(width, height, maxWidth, maxHeight) {
-        let newWidth = width;
-        let newHeight = height;
-        if (newWidth > maxWidth) {
-            newWidth = maxWidth;
-            newHeight = (newWidth * height) / width;
+        const rectWidth = width;
+        const rectHeight = height;
+        const containerWidth = maxWidth;
+        const containerHeight = maxHeight;
+        const containerRatio = containerWidth / containerHeight;
+        const rectRatio = rectWidth / rectHeight;
+        let newWidth;
+        let newHeight;
+        if (rectRatio > containerRatio) {
+            newWidth = containerWidth;
+            newHeight = newWidth / rectRatio;
         }
-        if (newHeight > maxHeight) {
-            newHeight = maxHeight;
-            newWidth = (newHeight * width) / height;
+        else {
+            newHeight = containerHeight;
+            newWidth = newHeight * rectRatio;
         }
         return {
             width: newWidth,
@@ -32975,7 +33097,6 @@
         return { x, y };
     }
 
-    get$1();
     function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
@@ -33019,31 +33140,29 @@
         image.name = 'image';
         image.keepAspectRatio = keepAspectRatio;
         if (keepAspectRatio || imageAutoSizing) {
-            image.successCallback = () => {
-                const originImage = image.resources.get(image.attribute.image).data;
-                if (imageAutoSizing) {
-                    _adjustWidthHeight(col, row, originImage.width, originImage.height, table.scenegraph, padding);
-                }
-                if (keepAspectRatio) {
-                    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,
-                        dx: isMerge ? -table.getColsWidth(cellGroup.mergeStartCol, col - 1) : 0,
-                        dy: isMerge ? -table.getRowsHeight(cellGroup.mergeStartRow, row - 1) : 0
-                    });
-                }
-                table.scenegraph.updateNextFrame();
-            };
+            if (image.resources &&
+                image.resources.has(image.attribute.image) &&
+                image.resources.get(image.attribute.image).state === 'success') {
+                updateAutoSizingAndKeepAspectRatio(imageAutoSizing, keepAspectRatio, padding, textAlign, textBaseline, image, cellGroup, table);
+            }
+            else {
+                image.successCallback = () => {
+                    updateAutoSizingAndKeepAspectRatio(imageAutoSizing, keepAspectRatio, padding, textAlign, textBaseline, image, cellGroup, table);
+                    table.scenegraph.updateNextFrame();
+                };
+            }
         }
         else {
-            image.successCallback = () => {
+            if (image.resources &&
+                image.resources.has(image.attribute.image) &&
+                image.resources.get(image.attribute.image).state === 'success') {
                 updateImageCellContentWhileResize(cellGroup, col, row, table);
-            };
+            }
+            else {
+                image.successCallback = () => {
+                    updateImageCellContentWhileResize(cellGroup, col, row, table);
+                };
+            }
         }
         image.failCallback = () => {
             const regedIcons = get$1();
@@ -33156,6 +33275,47 @@
             isMerge: false
         };
     }
+    function updateImageDxDy(startCol, endCol, startRow, endRow, table) {
+        for (let col = startCol; col <= endCol; col++) {
+            for (let row = startRow; row <= endRow; row++) {
+                const cellGroup = table.scenegraph.getCell(col, row);
+                if (cellGroup) {
+                    const image = cellGroup.getChildByName('image');
+                    if (image) {
+                        image.setAttributes({
+                            dx: -table.getColsWidth(cellGroup.mergeStartCol, col - 1),
+                            dy: -table.getRowsHeight(cellGroup.mergeStartRow, row - 1)
+                        });
+                    }
+                }
+            }
+        }
+    }
+    function updateAutoSizingAndKeepAspectRatio(imageAutoSizing, keepAspectRatio, padding, textAlign, textBaseline, image, cellGroup, table) {
+        const originImage = image.resources.get(image.attribute.image).data;
+        const { col, row } = cellGroup;
+        if (imageAutoSizing && !isDamagePic(image)) {
+            _adjustWidthHeight(col, row, originImage.width, originImage.height, table.scenegraph, padding);
+        }
+        if (keepAspectRatio || isDamagePic(image)) {
+            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
+            });
+            if (isMerge) {
+                updateImageDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
+            }
+        }
+    }
+    function isDamagePic(image) {
+        const regedIcons = get$1();
+        return image.attribute.image === regedIcons.damage_pic.svg;
+    }
 
     function createProgressBarCell(progressBarDefine, style, width, value, dataValue, col, row, padding, table) {
         if (progressBarDefine.dependField) {
@@ -34262,8 +34422,8 @@
         iconAttribute.funcType = icon.funcType;
         iconAttribute.interactive = icon.interactive;
         let hierarchyOffset = 0;
-        if (isNumber$3(col) &&
-            isNumber$3(row) &&
+        if (isNumber$2(col) &&
+            isNumber$2(row) &&
             table &&
             (icon.funcType === IconFuncTypeEnum.collapse || icon.funcType === IconFuncTypeEnum.expand)) {
             hierarchyOffset = range
@@ -35706,10 +35866,10 @@
 
     function isMergeCellGroup(cellGroup) {
         if (cellGroup.role === 'cell' &&
-            isNumber$3(cellGroup.mergeStartCol) &&
-            isNumber$3(cellGroup.mergeStartRow) &&
-            isNumber$3(cellGroup.mergeEndCol) &&
-            isNumber$3(cellGroup.mergeEndRow)) {
+            isNumber$2(cellGroup.mergeStartCol) &&
+            isNumber$2(cellGroup.mergeStartRow) &&
+            isNumber$2(cellGroup.mergeEndCol) &&
+            isNumber$2(cellGroup.mergeEndRow)) {
             return true;
         }
         return false;
@@ -35731,10 +35891,10 @@
                 max = domainMax + (domainMax - domainMin) * axisOption.expand.max;
             }
         }
-        if (isNumber$3(axisOption?.min)) {
+        if (isNumber$2(axisOption?.min)) {
             min = axisOption.min;
         }
-        if (isNumber$3(axisOption?.max)) {
+        if (isNumber$2(axisOption?.max)) {
             max = axisOption.max;
         }
         let scale;
@@ -35776,7 +35936,7 @@
         delete scale._niceType;
         let scaleTicks;
         if (!skipTick) {
-            scaleTicks = scale.ticks(isNumber$3(axisOption?.tickCount) ? axisOption?.tickCount : DEFAULT_CONTINUOUS_TICK_COUNT, {
+            scaleTicks = scale.ticks(isNumber$2(axisOption?.tickCount) ? axisOption?.tickCount : DEFAULT_CONTINUOUS_TICK_COUNT, {
                 noDecimals: axisOption?.tick?.noDecimals
             });
         }
@@ -36011,13 +36171,13 @@
                         }
                     }
                 }
-                if (isNumber$3(axisOption?.min)) {
+                if (isNumber$2(axisOption?.min)) {
                     range.min = axisOption.min;
                     if (range.min > 0) {
                         axisOption.zero = false;
                     }
                 }
-                if (isNumber$3(axisOption?.max)) {
+                if (isNumber$2(axisOption?.max)) {
                     range.max = axisOption.max;
                     if (range.max < 0) {
                         axisOption.zero = false;
@@ -36062,13 +36222,13 @@
                         }
                     }
                 }
-                if (isNumber$3(axisOption?.min)) {
+                if (isNumber$2(axisOption?.min)) {
                     range.min = axisOption.min;
                     if (range.min > 0) {
                         axisOption.zero = false;
                     }
                 }
-                if (isNumber$3(axisOption?.max)) {
+                if (isNumber$2(axisOption?.max)) {
                     range.max = axisOption.max;
                     if (range.max < 0) {
                         axisOption.zero = false;
@@ -36144,13 +36304,13 @@
                         }
                     }
                 }
-                if (isNumber$3(axisOption?.min)) {
+                if (isNumber$2(axisOption?.min)) {
                     range.min = axisOption.min;
                     if (range.min > 0) {
                         axisOption.zero = false;
                     }
                 }
-                if (isNumber$3(axisOption?.max)) {
+                if (isNumber$2(axisOption?.max)) {
                     range.max = axisOption.max;
                     if (range.max < 0) {
                         axisOption.zero = false;
@@ -36192,13 +36352,13 @@
                         }
                     }
                 }
-                if (isNumber$3(axisOption?.min)) {
+                if (isNumber$2(axisOption?.min)) {
                     range.min = axisOption.min;
                     if (range.min > 0) {
                         axisOption.zero = false;
                     }
                 }
-                if (isNumber$3(axisOption?.max)) {
+                if (isNumber$2(axisOption?.max)) {
                     range.max = axisOption.max;
                     if (range.max < 0) {
                         axisOption.zero = false;
@@ -36378,13 +36538,13 @@
         const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, layout._table.getColWidth(col));
         range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
         range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
-        if (isNumber$3(axisOption?.min)) {
+        if (isNumber$2(axisOption?.min)) {
             range.min = axisOption.min;
             if (range.min > 0) {
                 axisOption.zero = false;
             }
         }
-        if (isNumber$3(axisOption?.max)) {
+        if (isNumber$2(axisOption?.max)) {
             range.max = axisOption.max;
             if (range.max < 0) {
                 axisOption.zero = false;
@@ -36860,7 +37020,7 @@
             }
             else {
                 const defaultHeight = table.getDefaultRowHeight(row);
-                if (isNumber$3(defaultHeight)) {
+                if (isNumber$2(defaultHeight)) {
                     return defaultHeight;
                 }
             }
@@ -36894,7 +37054,7 @@
                 : table.getBodyColumnType(col, row);
             if (cellType !== 'text' && cellType !== 'link' && cellType !== 'progressbar' && cellType !== 'checkbox') {
                 const defaultHeight = table.getDefaultRowHeight(row);
-                maxHeight = Math.max(maxHeight, isNumber$3(defaultHeight) ? defaultHeight : table.defaultRowHeight);
+                maxHeight = Math.max(maxHeight, isNumber$2(defaultHeight) ? defaultHeight : table.defaultRowHeight);
                 continue;
             }
             const textHeight = computeTextHeight(col, row, cellType, table);
@@ -37168,7 +37328,7 @@
                 wordBreak: 'break-word',
                 whiteSpace: lines.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
             });
-            maxHeight = utilTextMark.AABBBounds.height();
+            maxHeight = utilTextMark.AABBBounds.height() || (typeof lineHeight === 'number' ? lineHeight : fontSize);
         }
         else {
             maxHeight = lines.length * lineHeight;
@@ -39732,6 +39892,90 @@
         injectable()
     ], SplitRectAfterRenderContribution);
 
+    let loadingImage;
+    let VTableDrawItemInterceptorContribution = class VTableDrawItemInterceptorContribution {
+        order = 1;
+        interceptors;
+        constructor() {
+            this.interceptors = [new ImageDrawItemInterceptorContribution()];
+        }
+        afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            for (let i = 0; i < this.interceptors.length; i++) {
+                if (this.interceptors[i].afterDrawItem &&
+                    this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            if ((!graphic.in3dMode || drawContext.in3dInterceptor) &&
+                !graphic.shadowRoot &&
+                !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) {
+                return false;
+            }
+            for (let i = 0; i < this.interceptors.length; i++) {
+                if (this.interceptors[i].beforeDrawItem &&
+                    this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+    };
+    VTableDrawItemInterceptorContribution = __decorate([
+        injectable()
+    ], VTableDrawItemInterceptorContribution);
+    class ImageDrawItemInterceptorContribution {
+        order = 1;
+        afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            if (graphic.type === 'image') {
+                this.drawItem(graphic, renderService, drawContext, drawContribution, params);
+            }
+            return false;
+        }
+        drawItem(graphic, renderService, drawContext, drawContribution, params) {
+            const { image: url } = graphic.attribute;
+            if (!url || !graphic.resources) {
+                return false;
+            }
+            const res = graphic.resources.get(url);
+            if (res.state !== 'loading') {
+                return false;
+            }
+            if (!loadingImage) {
+                const regedIcons = get$1();
+                const svg = regedIcons.loading_pic.svg;
+                const width = regedIcons.loading_pic.width;
+                const height = regedIcons.loading_pic.height;
+                loadingImage = createImage({
+                    width,
+                    height,
+                    image: svg
+                });
+            }
+            const { image: loadingUrl } = loadingImage.attribute;
+            if (!url || !loadingImage.resources) {
+                return false;
+            }
+            const loadingRes = loadingImage.resources.get(loadingUrl);
+            if (loadingRes.state !== 'success') {
+                return false;
+            }
+            const { context } = drawContext;
+            context.highPerformanceSave();
+            graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
+            graphic.glyphHost &&
+                graphic.glyphHost.parent &&
+                context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, true);
+            const b = graphic.AABBBounds;
+            const { width, height } = calcKeepAspectRatioSize(loadingRes.data.width, loadingRes.data.height, b.width(), b.height());
+            context.drawImage(loadingRes.data, b.x1 + (b.width() - width) / 2, b.y1 + (b.height() - height) / 2, width, height);
+            context.highPerformanceRestore();
+            return true;
+        }
+    }
+
     var splitModule = new ContainerModule((bind, unbind, isBound, rebind) => {
         if (isBound(SplitRectBeforeRenderContribution$1)) {
             rebind(SplitRectBeforeRenderContribution$1).to(SplitRectBeforeRenderContribution).inSingletonScope();
@@ -39774,6 +40018,8 @@
         bind(GroupRenderContribution).toService(ClipBodyGroupBeforeRenderContribution);
         bind(ClipBodyGroupAfterRenderContribution).toSelf().inSingletonScope();
         bind(GroupRenderContribution).toService(ClipBodyGroupAfterRenderContribution);
+        bind(VTableDrawItemInterceptorContribution).toSelf().inSingletonScope();
+        bind(DrawItemInterceptor).toService(VTableDrawItemInterceptorContribution);
     });
 
     function computeColsWidth(table, colStart, colEnd, update) {
@@ -40185,7 +40431,7 @@
             columnGroup.role = 'column';
             columnGroup.col = i;
             containerGroup.addChild(columnGroup);
-            const { width: default2Width, height: default2Height } = createComplexColumn(columnGroup, col, colWidth, rowStart, rowEnd, table.scenegraph.mergeMap, cellLocation === 'columnHeader' && isNumber$3(defaultHeaderRowHeight) ? defaultHeaderRowHeight : defaultRowHeight, table, cellLocation, rowLimit);
+            const { width: default2Width, height: default2Height } = createComplexColumn(columnGroup, col, colWidth, rowStart, rowEnd, table.scenegraph.mergeMap, cellLocation === 'columnHeader' && isNumber$2(defaultHeaderRowHeight) ? defaultHeaderRowHeight : defaultRowHeight, table, cellLocation, rowLimit);
             x += default2Width;
             heightMax = Math.max(heightMax, default2Height);
         }
@@ -40403,7 +40649,7 @@
             const deltaX = screenLeftX - (colGroup.attribute.x + proxy.table.getFrozenColsWidth() + proxy.table.scenegraph.proxy.deltaX);
             proxy.table.scenegraph.proxy.deltaX += deltaX;
             proxy.currentCol = direction === 'left' ? proxy.currentCol + count : proxy.currentCol - count;
-            proxy.totalCol = direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count;
+            proxy.totalCol = Math.max(0, Math.min(proxy.table.colCount - 1, direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count));
             proxy.referenceCol = proxy.colStart + Math.floor((proxy.colEnd - proxy.colStart) / 2);
             proxy.colUpdatePos = distStartCol;
             proxy.colUpdateDirection = direction;
@@ -40440,7 +40686,7 @@
                 proxy.table.scenegraph.proxy.deltaX = deltaX;
             }
             proxy.currentCol = direction === 'left' ? proxy.currentCol + count : proxy.currentCol - count;
-            proxy.totalCol = direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count;
+            proxy.totalCol = Math.max(0, Math.min(proxy.table.colCount - 1, direction === 'left' ? proxy.totalCol + count : proxy.totalCol - count));
             proxy.referenceCol = proxy.colStart + Math.floor((proxy.colEnd - proxy.colStart) / 2);
             proxy.colUpdatePos = proxy.colStart;
             proxy.colUpdateDirection = distEndCol > proxy.bodyRightCol - (proxy.colEnd - proxy.colStart + 1) ? 'right' : 'left';
@@ -41104,7 +41350,7 @@
             computeColsWidth(this.table, this.currentCol + 1, endCol);
             for (let row = 0; row < this.table.rowCount; row++) {
                 const cellGroup = this.highPerformanceGetCell(this.currentCol, row);
-                if (isNumber$3(cellGroup.mergeStartCol) && cellGroup.mergeStartCol > this.currentCol) {
+                if (isNumber$2(cellGroup.mergeStartCol) && cellGroup.mergeStartCol > this.currentCol) {
                     this.table.scenegraph.updateCellContent(cellGroup.col, cellGroup.row);
                 }
             }
@@ -41912,7 +42158,7 @@
             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));
+            isNumber$2(rowUpdatePos) && (scene.proxy.rowUpdatePos = Math.min(scene.proxy.rowUpdatePos, rowUpdatePos));
         }
         scene.table._clearRowRangeHeightsMap();
         let updateAfter;
@@ -41926,7 +42172,7 @@
             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));
+            isNumber$2(rowUpdatePos) && (scene.proxy.rowUpdatePos = Math.min(scene.proxy.rowUpdatePos, rowUpdatePos));
         }
         for (let col = 0; col < table.colCount; col++) {
             updateRows.forEach(r => {
@@ -41947,9 +42193,9 @@
             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));
+            isNumber$2(rowUpdatePos) && (scene.proxy.rowUpdatePos = Math.min(scene.proxy.rowUpdatePos, rowUpdatePos));
         }
-        if (isNumber$3(updateAfter)) {
+        if (isNumber$2(updateAfter)) {
             for (let col = 0; col < table.colCount; col++) {
                 for (let row = updateAfter; row < table.rowCount; row++) {
                     const cellGroup = scene.highPerformanceGetCell(col, row, true);
@@ -41959,7 +42205,7 @@
             scene.proxy.rowUpdatePos = Math.min(scene.proxy.rowUpdatePos, updateAfter);
         }
         if (addRows.length) {
-            if (!isNumber$3(updateAfter)) {
+            if (!isNumber$2(updateAfter)) {
                 const minRow = Math.min(...addRows);
                 scene.proxy.rowUpdatePos = Math.min(minRow, scene.proxy.rowUpdatePos);
             }
@@ -42267,7 +42513,7 @@
                 });
             });
         });
-        changedCells.length = 0;
+        changedCells.clear();
         const { scrollTop, scrollLeft, frozenRowCount, frozenColCount } = table;
         const frozenRowsHeight = table.getFrozenRowsHeight();
         const frozenColsWidth = table.getFrozenColsWidth();
@@ -42331,10 +42577,10 @@
         }
     }
     function adjustCellContentVerticalLayout(cellGroup, minTop, maxTop, changedCells, table) {
-        if (isNumber$3(cellGroup.mergeStartCol) &&
-            isNumber$3(cellGroup.mergeStartRow) &&
-            isNumber$3(cellGroup.mergeEndCol) &&
-            isNumber$3(cellGroup.mergeEndRow)) {
+        if (isNumber$2(cellGroup.mergeStartCol) &&
+            isNumber$2(cellGroup.mergeStartRow) &&
+            isNumber$2(cellGroup.mergeEndCol) &&
+            isNumber$2(cellGroup.mergeEndRow)) {
             for (let col = cellGroup.mergeStartCol; col <= cellGroup.mergeEndCol; col++) {
                 for (let row = cellGroup.mergeStartRow; row <= cellGroup.mergeEndRow; row++) {
                     const singleCellGroup = table.scenegraph.getCell(col, row);
@@ -42366,34 +42612,36 @@
         const textBottom = graphic.globalAABBBounds.y2;
         if (textTop < minTop) {
             const deltaHeight = textTop - minTop;
-            changedCells.push({
-                col: cellGroup.col,
-                row: cellGroup.row,
-                dx: cellGroup.firstChild?.attribute.dx ?? 0,
-                dy: cellGroup.firstChild?.attribute.dy ?? 0
-            });
+            !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                    col: cellGroup.col,
+                    row: cellGroup.row,
+                    dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                    dy: cellGroup.firstChild?.attribute.dy ?? 0
+                });
             cellGroup.forEachChildren((child) => {
                 child.setAttribute('dy', (child.attribute.dy ?? 0) - deltaHeight + 2);
             });
         }
         else if (textBottom > maxTop) {
             const deltaHeight = textBottom - maxTop;
-            changedCells.push({
-                col: cellGroup.col,
-                row: cellGroup.row,
-                dx: cellGroup.firstChild?.attribute.dx ?? 0,
-                dy: cellGroup.firstChild?.attribute.dy ?? 0
-            });
+            !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                    col: cellGroup.col,
+                    row: cellGroup.row,
+                    dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                    dy: cellGroup.firstChild?.attribute.dy ?? 0
+                });
             cellGroup.forEachChildren((child) => {
                 child.setAttribute('dy', (child.attribute.dy ?? 0) - deltaHeight);
             });
         }
     }
     function adjustCellContentHorizontalLayout(cellGroup, minLeft, maxLeft, changedCells, table) {
-        if (isNumber$3(cellGroup.mergeStartCol) &&
-            isNumber$3(cellGroup.mergeStartRow) &&
-            isNumber$3(cellGroup.mergeEndCol) &&
-            isNumber$3(cellGroup.mergeEndRow)) {
+        if (isNumber$2(cellGroup.mergeStartCol) &&
+            isNumber$2(cellGroup.mergeStartRow) &&
+            isNumber$2(cellGroup.mergeEndCol) &&
+            isNumber$2(cellGroup.mergeEndRow)) {
             for (let col = cellGroup.mergeStartCol; col <= cellGroup.mergeEndCol; col++) {
                 for (let row = cellGroup.mergeStartRow; row <= cellGroup.mergeEndRow; row++) {
                     const singleCellGroup = table.scenegraph.getCell(col, row);
@@ -42415,24 +42663,26 @@
         const textRight = text.globalAABBBounds.x2;
         if (textLeft < minLeft) {
             const deltaWidth = textLeft - minLeft;
-            changedCells.push({
-                col: cellGroup.col,
-                row: cellGroup.row,
-                dx: cellGroup.firstChild?.attribute.dx ?? 0,
-                dy: cellGroup.firstChild?.attribute.dy ?? 0
-            });
+            !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                    col: cellGroup.col,
+                    row: cellGroup.row,
+                    dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                    dy: cellGroup.firstChild?.attribute.dy ?? 0
+                });
             cellGroup.forEachChildren((child) => {
                 child.setAttribute('dx', (child.attribute.dx ?? 0) - deltaWidth + 2);
             });
         }
         else if (textRight > maxLeft) {
             const deltaWidth = textRight - maxLeft;
-            changedCells.push({
-                col: cellGroup.col,
-                row: cellGroup.row,
-                dx: cellGroup.firstChild?.attribute.dx ?? 0,
-                dy: cellGroup.firstChild?.attribute.dy ?? 0
-            });
+            !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                    col: cellGroup.col,
+                    row: cellGroup.row,
+                    dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                    dy: cellGroup.firstChild?.attribute.dy ?? 0
+                });
             cellGroup.forEachChildren((child) => {
                 child.setAttribute('dx', (child.attribute.dx ?? 0) - deltaWidth);
             });
@@ -42983,7 +43233,7 @@
                 fontFamily: DefaultTextStyle.fontFamily,
                 fontSize: DefaultTextStyle.fontSize
             },
-            getTextBounds: useNaiveCanvas ? undefined : getTextBounds,
+            getTextBounds: useNaiveCanvas ? undefined : getTextBounds$1,
             specialCharSet: `{}()//&-/: .,@%'"~…${TextMeasure.ALPHABET_CHAR_SET}${TextMeasure.ALPHABET_CHAR_SET.toUpperCase()}0123456789`,
             ...(option ?? {})
         }, textSpec);
@@ -43425,7 +43675,7 @@
                 }
             }
         });
-        if (isNumber$3(updateAfter)) {
+        if (isNumber$2(updateAfter)) {
             for (let col = updateAfter; col < table.colCount; col++) {
                 for (let row = 0; row < table.rowCount; row++) {
                     const cellGroup = scene.highPerformanceGetCell(col, row, true);
@@ -43435,7 +43685,7 @@
             scene.proxy.colUpdatePos = updateAfter;
         }
         if (addCols.length) {
-            if (!isNumber$3(updateAfter)) {
+            if (!isNumber$2(updateAfter)) {
                 const minCol = Math.min(...addCols);
                 scene.proxy.colUpdatePos = minCol;
             }
@@ -45209,7 +45459,10 @@
                 }
                 else if (col >= 0 && row >= 0) {
                     const cellRange = table.getCellRange(col, row);
-                    state.select.ranges.push(cellRange);
+                    state.select.ranges.push({
+                        start: { col: cellRange.start.col, row: cellRange.start.row },
+                        end: { col: cellRange.end.col, row: cellRange.end.row }
+                    });
                 }
                 cellPos.col = col;
                 cellPos.row = row;
@@ -51028,7 +51281,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.18.3";
+        version = "0.18.5-alpha.0";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -51083,7 +51336,7 @@
                 internalProps.context = internalProps.canvas.getContext('2d');
             }
             internalProps.handler = new EventHandler();
-            if (isNumber$3(this.options.resizeTime)) {
+            if (isNumber$2(this.options.resizeTime)) {
                 internalProps.handler.resizeTime = this.options.resizeTime;
             }
             internalProps.pixelRatio = pixelRatio;
@@ -51173,7 +51426,7 @@
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
             this.bodyBottomStyleCache = new Map();
-            internalProps.stick = { changedCells: [] };
+            internalProps.stick = { changedCells: new Map() };
             internalProps.customMergeCell = options.customMergeCell;
         }
         throttleInvalidate = throttle2(this.render.bind(this), 200);
@@ -51477,11 +51730,11 @@
             return Math.round(w);
         }
         getRowHeight(row) {
-            if (this.rowHeightsMap.get(row)) {
+            if (isValid$1(this.rowHeightsMap.get(row))) {
                 return this.rowHeightsMap.get(row);
             }
             const defaultHeight = this.getDefaultRowHeight(row);
-            if (isNumber$3(defaultHeight)) {
+            if (isNumber$2(defaultHeight)) {
                 return defaultHeight;
             }
             return this.defaultRowHeight;
@@ -51515,9 +51768,9 @@
                 const height = Math.round(cachedLowerRowHeight +
                     (this.rowHeightsMap.get(endRow) ??
                         (this.isColumnHeader(0, endRow) || this.isCornerHeader(0, endRow)
-                            ? Array.isArray(this.defaultHeaderRowHeight) && isNumber$3(this.defaultHeaderRowHeight[endRow])
+                            ? Array.isArray(this.defaultHeaderRowHeight) && isNumber$2(this.defaultHeaderRowHeight[endRow])
                                 ? this.defaultHeaderRowHeight[endRow]
-                                : isNumber$3(this.defaultHeaderRowHeight)
+                                : isNumber$2(this.defaultHeaderRowHeight)
                                     ? this.defaultHeaderRowHeight
                                     : this.internalProps.defaultRowHeight
                             : this.internalProps.defaultRowHeight)));
@@ -51701,7 +51954,7 @@
             const height = this.getRowHeight(row);
             if (isFrozenCell && isFrozenCell.row) {
                 if (this.isBottomFrozenRow(col, row)) {
-                    absoluteLeft = this.tableNoFrameHeight - (this.getRowsHeight(row, this.rowCount - 1) ?? 0);
+                    absoluteTop = this.tableNoFrameHeight - (this.getRowsHeight(row, this.rowCount - 1) ?? 0);
                 }
                 else {
                     absoluteTop = this.getRowsHeight(0, row - 1);
@@ -51722,14 +51975,54 @@
             return new Rect$1(Math.round(absoluteLeft), Math.round(absoluteTop), Math.round(width), Math.round(height));
         }
         getCellRelativeRect(col, row) {
-            return this._toRelativeRect(this.getCellRect(col, row));
+            const isFrozenCell = this.isFrozenCell(col, row);
+            let relativeX = true;
+            let relativeY = true;
+            if (isFrozenCell?.col && isFrozenCell?.row) {
+                relativeX = false;
+                relativeY = false;
+            }
+            else if (isFrozenCell?.col) {
+                relativeX = false;
+            }
+            else if (isFrozenCell?.row) {
+                relativeY = false;
+            }
+            const cellRect = this.getCellRect(col, row);
+            return this._toRelativeRect(cellRect, relativeX, relativeY);
         }
         getCellRangeRelativeRect(range) {
             if (range.start) {
-                return this._toRelativeRect(this.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row));
+                const isFrozenCell = this.isFrozenCell(range.start.col, range.start.row);
+                let relativeX = true;
+                let relativeY = true;
+                if (isFrozenCell?.col && isFrozenCell?.row) {
+                    relativeX = false;
+                    relativeY = false;
+                }
+                else if (isFrozenCell?.col) {
+                    relativeX = false;
+                }
+                else if (isFrozenCell?.row) {
+                    relativeY = false;
+                }
+                return this._toRelativeRect(this.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row), relativeX, relativeY);
             }
             const cellRange = this.getCellRange(range.col, range.row);
-            return this._toRelativeRect(this.getCellsRect(cellRange.start.col, cellRange.start.row, cellRange.end.col, cellRange.end.row));
+            const isFrozenCell = this.isFrozenCell(range.col, range.row);
+            let relativeX = true;
+            let relativeY = true;
+            if (isFrozenCell?.col && isFrozenCell?.row) {
+                relativeX = false;
+                relativeY = false;
+            }
+            else if (isFrozenCell?.col) {
+                relativeX = false;
+            }
+            else if (isFrozenCell?.row) {
+                relativeY = false;
+            }
+            return this._toRelativeRect(this.getCellsRect(cellRange.start.col, cellRange.start.row, cellRange.end.col, cellRange.end.row), relativeX, relativeY);
         }
         getVisibleCellRangeRelativeRect(range) {
             let cellRange;
@@ -51919,11 +52212,11 @@
                 }, 0);
             });
         }
-        _toRelativeRect(absoluteRect) {
+        _toRelativeRect(absoluteRect, relativeX = true, relativeY = true) {
             const rect = absoluteRect.copy();
             const visibleRect = this.getVisibleRect();
-            rect.offsetLeft(this.tableX - visibleRect.left);
-            rect.offsetTop(this.tableY - visibleRect.top);
+            rect.offsetLeft(this.tableX - (relativeX ? visibleRect.left : 0));
+            rect.offsetTop(this.tableY - (relativeY ? visibleRect.top : 0));
             return rect;
         }
         getVisibleRect() {
@@ -52139,6 +52432,7 @@
             this.colWidthsMap = new NumberMap();
             this.colContentWidthsMap = new NumberMap();
             this.colWidthsLimit = {};
+            internalProps.stick.changedCells.clear();
             internalProps.theme = themes.of(options.theme ?? themes.DEFAULT);
             this.scenegraph.updateStageBackground();
             internalProps.autoWrapText = options.autoWrapText;
@@ -53595,10 +53889,10 @@
                         }
                     }
                 }
-                if (isNumber$3(axisOption?.min)) {
+                if (isNumber$2(axisOption?.min)) {
                     range.min = axisOption.min;
                 }
-                if (isNumber$3(axisOption?.max)) {
+                if (isNumber$2(axisOption?.max)) {
                     range.max = axisOption.max;
                 }
                 axes.push(merge({
@@ -53651,10 +53945,10 @@
                         }
                     }
                 }
-                if (isNumber$3(axisOption?.min)) {
+                if (isNumber$2(axisOption?.min)) {
                     range.min = axisOption.min;
                 }
-                if (isNumber$3(axisOption?.max)) {
+                if (isNumber$2(axisOption?.max)) {
                     range.max = axisOption.max;
                 }
                 axes.push(merge({
@@ -53734,10 +54028,10 @@
             range.min = axisRange[0];
             range.max = axisRange[1];
         }
-        if (isNumber$3(axisOption?.min)) {
+        if (isNumber$2(axisOption?.min)) {
             range.min = axisOption.min;
         }
-        if (isNumber$3(axisOption?.max)) {
+        if (isNumber$2(axisOption?.max)) {
             range.max = axisOption.max;
         }
         return {
@@ -62286,7 +62580,7 @@
     }
 
     registerForVrender();
-    const version = "0.18.3";
+    const version = "0.18.5-alpha.0";
     function getIcons() {
         return get$1();
     }