@visactor/vchart 1.9.1 → 1.9.2

package/build/index.js

@@ -484,17 +484,17 @@
     const isDate = value => isType$1(value, "Date");
     var isDate$1 = isDate;
 
-    const isNumber$1 = function (value) {
+    const isNumber = 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$2 = isNumber$1;
+    var isNumber$1 = isNumber;
 
     const isNumeric = value => "string" == typeof value && !isNaN(Number(value)) && !isNaN(parseFloat(value));
     var isNumeric$1 = isNumeric;
 
-    const isValidNumber = value => isNumber$2(value) && Number.isFinite(value);
+    const isValidNumber = value => isNumber$1(value) && Number.isFinite(value);
     var isValidNumber$1 = isValidNumber;
 
     const isValidUrl = value => new RegExp(/^(http(s)?:\/\/)\w+[^\s]+(\.[^\s]+){1,}$/).test(value);
@@ -540,7 +540,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$1(value) || isNumber$2(value) || isString$1(value) ? value : isDate$1(value) ? new Date(+value) : void 0;
+      result = isArr ? new Array(length) : "object" == typeof value ? {} : isBoolean$1(value) || isNumber$1(value) || isString$1(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;) {
@@ -1007,10 +1007,10 @@
         return this.x = x, this.y = y, this;
       }
       add(point) {
-        return isNumber$2(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
+        return isNumber$1(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
       }
       sub(point) {
-        return isNumber$2(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
+        return isNumber$1(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
       }
       multi(point) {
         throw new Error("暂不支持");
@@ -1600,10 +1600,10 @@
       return ((value = Math.max(0, Math.min(255, Math.round(value) || 0))) < 16 ? "0" : "") + value.toString(16);
     }
     function rgb(value) {
-      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);
+      return isNumber$1(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$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);
+      return isNumber$1(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);
@@ -2248,7 +2248,7 @@
     }(LoggerLevel || (LoggerLevel = {}));
     class Logger {
       static getInstance(level, method) {
-        return Logger._instance && isNumber$2(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
+        return Logger._instance && isNumber$1(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
       }
       static setInstance(logger) {
         return Logger._instance = logger;
@@ -8336,6 +8336,9 @@
       clear() {
         this.transformCbList = null, this.commandList.length = 0, this.curves.length = 0;
       }
+      beginPath() {
+        this.clear();
+      }
       toString() {
         if (!this.toStringCbList) {
           const list = [];
@@ -8345,7 +8348,7 @@
             let path = "";
             for (let i = 0; i < bezierPathList.length; i += 6) path += `C${bezierPathList[i]} ${bezierPathList[i + 1]} ${bezierPathList[i + 2]} ${bezierPathList[i + 3]} ${bezierPathList[i + 4]} ${bezierPathList[i + 5]}`;
             return path;
-          }, list[enumCommandMap.Z] = cmd => "Z", this.toStringCbList = list;
+          }, list[enumCommandMap.R] = cmd => `M${cmd[1]} ${cmd[2]} h${cmd[3]} v${cmd[4]} H${cmd[1]}Z`, list[enumCommandMap.Z] = cmd => "Z", this.toStringCbList = list;
         }
         const list = this.toStringCbList;
         let path = "";
@@ -8684,6 +8687,7 @@
       zIndex: 0,
       layout: null,
       boundsPadding: 0,
+      renderStyle: "default",
       pickMode: "accurate",
       customPickShape: null,
       boundsMode: "accurate",
@@ -9236,9 +9240,6 @@
     function isNotAroundZero(val) {
       return val > EPSILON || val < -EPSILON;
     }
-    function isNumber(data) {
-      return "number" == typeof data && Number.isFinite(data);
-    }
     const _v0 = [0, 0],
       _v1 = [0, 0],
       _v2 = [0, 0];
@@ -10013,7 +10014,7 @@
     }
     const globalTheme = new Theme();
     function getTheme$1(graphic, theme) {
-      return graphic.glyphHost ? getTheme$1(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || globalTheme.getTheme();
+      return graphic.glyphHost ? getTheme$1(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || graphic.attachedThemeGraphic && getTheme$1(graphic.attachedThemeGraphic) || globalTheme.getTheme();
     }
     function getThemeFromGroup(graphic) {
       let g;
@@ -10178,10 +10179,13 @@
       delete() {
         this.parent && this.parent.removeChild(this);
       }
-      removeAllChild() {
+      removeAllChild(deep) {
         if (!this._idMap) return;
         let child = this._firstChild;
-        for (; child;) child.parent = null, child._prev = null, child._next = null, child = child._next;
+        for (; child;) {
+          const next = 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);
       }
       replaceChild(newChild, oldChild) {
@@ -11782,7 +11786,7 @@
       }
       onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        this.fromNumber = isNumber$2(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$2(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
+        this.fromNumber = isNumber$1(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$1(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
       }
       onEnd() {}
       onUpdate(end, ratio, out) {
@@ -12468,7 +12472,7 @@
       return res;
     };
     const samplingPoints = (points, count) => {
-      const validatePoints = points.filter(point => !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y));
+      const validatePoints = points.filter(point => !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y));
       if (0 === validatePoints.length) return [];
       if (1 === validatePoints.length) return new Array(count).fill(0).map(i => validatePoints[0]);
       const res = [];
@@ -12504,7 +12508,7 @@
         var _a;
         return res.concat(null !== (_a = seg.points) && void 0 !== _a ? _a : []);
       }, []));
-      const validatePoints = points.filter(point => !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y));
+      const validatePoints = points.filter(point => !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y));
       if (!validatePoints.length) return [];
       const allPoints = [];
       validatePoints.forEach(point => {
@@ -13087,18 +13091,10 @@
     class ResourceLoader {
       static GetImage(url, mark) {
         var _a;
-        let data = ResourceLoader.cache.get(url);
+        const data = ResourceLoader.cache.get(url);
         data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(() => {
           mark.imageLoadFail(url);
-        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : (data = {
-          type: "image",
-          loadState: "init"
-        }, ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise ? (data.waitingMark = [mark], data.dataPromise.then(res => {
-          var _a;
-          data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
-            (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
-          });
-        })) : (data.loadState = "fail", mark.imageLoadFail(url)));
+        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : ResourceLoader.loadImage(url, mark);
       }
       static GetSvg(svgStr, mark) {
         var _a;
@@ -13124,8 +13120,60 @@
           loadState: "init"
         }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
       }
+      static loading() {
+        setTimeout(() => {
+          if (!ResourceLoader.isLoading && ResourceLoader.toLoadAueue.length) {
+            ResourceLoader.isLoading = !0;
+            const tasks = ResourceLoader.toLoadAueue.splice(0, 10),
+              promises = [];
+            tasks.forEach(task => {
+              const {
+                  url: url,
+                  marks: marks
+                } = task,
+                data = {
+                  type: "image",
+                  loadState: "init"
+                };
+              if (ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise) {
+                data.waitingMark = marks;
+                const end = data.dataPromise.then(res => {
+                  var _a;
+                  data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
+                    (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
+                  });
+                });
+                promises.push(end);
+              } else data.loadState = "fail", marks.forEach(mark => mark.imageLoadFail(url));
+            }), Promise.all(promises).then(() => {
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            }).catch(error => {
+              console.error(error), ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            });
+          }
+        }, 0);
+      }
+      static loadImage(url, mark) {
+        const index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) return ResourceLoader.toLoadAueue[index].marks.push(mark), void ResourceLoader.loading();
+        ResourceLoader.toLoadAueue.push({
+          url: url,
+          marks: [mark]
+        }), ResourceLoader.loading();
+      }
+      static improveImageLoading(url) {
+        const index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) {
+          const elememt = ResourceLoader.toLoadAueue.splice(index, 1);
+          ResourceLoader.toLoadAueue.unshift(elememt[0]);
+        }
+      }
+    }
+    function getIndex(url, arr) {
+      for (let i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
+      return -1;
     }
-    ResourceLoader.cache = new Map();
+    ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [];
 
     const tempMatrix = new Matrix(),
       tempBounds$1 = new AABBBounds();
@@ -13221,7 +13269,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) {
@@ -13230,7 +13278,8 @@
         }
       }
       tryUpdateGlobalAABBBounds() {
-        return this._globalAABBBounds ? this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2) : this._globalAABBBounds = this.AABBBounds.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
+        const b = this.AABBBounds;
+        return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
       }
       tryUpdateGlobalTransMatrix() {
         if (this._globalTransMatrix) {
@@ -13741,7 +13790,7 @@
           data: "init",
           state: null
         };
-        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background);
+        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : isObject$2(image) ? (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
       }
       imageLoadSuccess(url, image, cb) {
         if (!this.resources) return;
@@ -14211,8 +14260,9 @@
         return child.stage = null, application.graphicService.onRemove(child), this.addUpdateBoundTag(), data;
       }
       removeAllChild() {
+        let deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
         this.forEachChildren(child => {
-          application.graphicService.onRemove(child);
+          application.graphicService.onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
         }), super.removeAllChild(), this.addUpdateBoundTag();
       }
       setStage(stage, layer) {
@@ -15538,7 +15588,7 @@
 
     class BaseSymbol {
       bounds(size, bounds) {
-        if (isNumber$2(size)) {
+        if (isNumber$1(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;
@@ -15969,10 +16019,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$2(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
+        return isNumber$1(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return isNumber$2(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
+        return isNumber$1(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
       }
     }
     var rect = new RectSymbol();
@@ -16450,16 +16500,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;
@@ -16608,9 +16649,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);
@@ -16801,17 +16842,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);
         });
       }
@@ -17035,10 +17066,10 @@
           }
         } else {
           const richTextConfig = textConfig[i];
-          if (isNumber$2(richTextConfig.text) && (richTextConfig.text = `${richTextConfig.text}`), richTextConfig.text.includes("\n")) {
+          if (isNumber$1(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,
@@ -17283,7 +17314,7 @@
           } = this.attribute;
         if (0 === cornerRadius || "0%" === cornerRadius) return 0;
         const deltaRadius = Math.abs(outerRadius - innerRadius);
-        return Math.min(isNumber$2(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
+        return Math.min(isNumber$1(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
       }
       getParsedAngle() {
         const arcTheme = getTheme$1(this).arc;
@@ -19127,7 +19158,7 @@
     const halfPi = pi$1 / 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$2(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs$1(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
+      if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$1(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs$1(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
         const cornerRadiusArr = rectCornerRadius;
         let cr0, cr1;
         switch (cornerRadiusArr.length) {
@@ -19235,7 +19266,7 @@
         y = bounds.y1,
         width = bounds.width(),
         height = bounds.height();
-      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]), {
+      return isNumber$1(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,
@@ -20092,11 +20123,12 @@
       }
       drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c, _d, _e;
+        const {
+          points: points
+        } = area.attribute;
+        if (points.length < 2) return;
         context.beginPath();
         const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
-          {
-            points: points
-          } = area.attribute,
           startP = points[0];
         context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (let i = 1; i < points.length; i++) {
@@ -20253,6 +20285,7 @@
       }
       _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, connect, fillCb, strokeCb) {
         var _a, _b, _c, _d;
+        if (!(cache && cache.top && cache.bottom && cache.top.curves && cache.top.curves.length && cache.bottom.curves && cache.bottom.curves.length)) return;
         let {
           connectedType: connectedType,
           connectedX: connectedX,
@@ -20261,7 +20294,6 @@
         } = attribute;
         const da = [];
         if (connect && (isArray$1(defaultAttribute) ? (connectedType = null !== (_a = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _a ? _a : defaultAttribute[1].connectedType, connectedX = null !== (_b = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _b ? _b : defaultAttribute[1].connectedX, connectedY = null !== (_c = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _c ? _c : defaultAttribute[1].connectedY, connectedStyle = null !== (_d = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _d ? _d : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), isArray$1(defaultAttribute) ? defaultAttribute.forEach(i => da.push(i)) : da.push(defaultAttribute), da.push(attribute)), connect && "none" === connectedType) return !1;
-        if (!cache) return;
         context.beginPath();
         const {
           points: points,
@@ -20930,7 +20962,9 @@
           image: url
         } = image.attribute;
         if (!url || !image.resources) return;
-        if ("success" !== image.resources.get(url).state) return;
+        const res = image.resources.get(url);
+        if ("loading" === res.state && isString$1(url)) return void ResourceLoader.improveImageLoading(url);
+        if ("success" !== res.state) return;
         const {
           context: context
         } = renderService.drawParams;
@@ -20970,6 +21004,197 @@
       },
       __metadata$V = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+      };
+    const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
+    const tempDirtyBounds = new AABBBounds();
+    class ShadowRootDrawItemInterceptorContribution {
+      constructor() {
+        this.order = 1;
+      }
+      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+      drawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.shadowRoot) return !1;
+        const {
+          context: context
+        } = drawContext;
+        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
+          tempDirtyBounds.copy(drawContribution.dirtyBounds);
+          const m = graphic.globalTransMatrix.getInverse();
+          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
+        }
+        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
+      }
+    }
+    class DebugDrawItemInterceptorContribution {
+      constructor() {
+        this.order = 1;
+      }
+      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return graphic.attribute._debug_bounds && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+      drawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.attribute._debug_bounds) return !1;
+        const {
+          context: context
+        } = drawContext;
+        context.highPerformanceSave(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
+        const b = graphic.AABBBounds;
+        return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
+      }
+    }
+    let CommonDrawItemInterceptorContribution = class {
+      constructor() {
+        this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
+      }
+      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 !0;
+        return !1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
+        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+    };
+    CommonDrawItemInterceptorContribution = __decorate$1d([injectable(), __metadata$V("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
+    class InteractiveDrawItemInterceptorContribution {
+      constructor() {
+        this.order = 1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
+      }
+      beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        let interactiveGraphic = graphic.interactiveGraphic;
+        if (graphic.attribute.globalZIndex) {
+          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
+            globalZIndex: 0,
+            zIndex: graphic.attribute.globalZIndex
+          }, !1, {
+            skipUpdateCallback: !0
+          }), drawContext.stage.tryInitInteractiveLayer();
+          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
+          }
+          return !0;
+        }
+        if (interactiveGraphic) {
+          drawContext.stage.tryInitInteractiveLayer();
+          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).removeChild(interactiveGraphic);
+          }
+          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
+        }
+        return !1;
+      }
+      beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        const baseGraphic = graphic.baseGraphic;
+        if (baseGraphic) {
+          this.processing = !0;
+          const {
+            context: context
+          } = drawContext;
+          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
+        }
+        return !1;
+      }
+      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();
+      }
+    }
+    class Canvas3DDrawItemInterceptor {
+      constructor() {
+        this.order = 1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
+        drawContext.in3dInterceptor = !0;
+        const {
+          context: context,
+          stage: stage
+        } = renderService.drawParams;
+        context.canvas;
+        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
+        const m = context.currentMatrix;
+        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
+        const matrix = mat4Allocate.allocate();
+        mat3Tomat4(matrix, m);
+        const lastModelMatrix = context.modelMatrix;
+        if (lastModelMatrix) {
+          if (matrix) {
+            const m = mat4Allocate.allocate();
+            context.modelMatrix = multiplyMat4Mat4(m, lastModelMatrix, matrix);
+          }
+        } else context.modelMatrix = matrix;
+        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
+          let isPie = !1,
+            is3d = !1;
+          if (graphic.forEachChildren(c => (isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie)), graphic.forEachChildren(c => (is3d = !!c.findFace, !is3d)), isPie) {
+            const children = graphic.getChildren(),
+              sortedChildren = [...children];
+            sortedChildren.sort((a, b) => {
+              var _a, _b, _c, _d;
+              let angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
+                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
+              for (; angle1 < 0;) angle1 += pi2;
+              for (; angle2 < 0;) angle2 += pi2;
+              return angle2 - angle1;
+            }), sortedChildren.forEach(c => {
+              c._next = null, c._prev = null;
+            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(c => {
+              graphic.appendChild(c);
+            });
+            const m = graphic.parent.globalTransMatrix;
+            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, m), graphic.removeAllChild(), children.forEach(c => {
+              c._next = null, c._prev = null;
+            }), children.forEach(c => {
+              graphic.appendChild(c);
+            });
+          } else if (is3d) {
+            const children = graphic.getChildren(),
+              zChildren = children.map(g => ({
+                ave_z: g.findFace().vertices.map(v => {
+                  var _a;
+                  return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
+                }).reduce((a, b) => a + b, 0),
+                g: g
+              }));
+            zChildren.sort((a, b) => b.ave_z - a.ave_z), graphic.removeAllChild(), zChildren.forEach(i => {
+              i.g._next = null, i.g._prev = null;
+            }), graphic.update(), zChildren.forEach(i => {
+              graphic.add(i.g);
+            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), children.forEach(g => {
+              g._next = null, g._prev = null;
+            }), graphic.update(), children.forEach(g => {
+              graphic.add(g);
+            });
+          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
+        } else drawContribution.renderItem(graphic, drawContext);
+        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
+      }
+      initCanvasCtx(context) {
+        context.setTransformForCurrent();
+      }
+    }
+
+    var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+        var d,
+          c = arguments.length,
+          r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+        if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+      },
+      __metadata$U = undefined && undefined.__metadata || function (k, v) {
+        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
       __param$z = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
@@ -21008,7 +21233,7 @@
         this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
       }
     };
-    DefaultRenderService = __decorate$1d([injectable(), __param$z(0, inject(DrawContribution)), __metadata$V("design:paramtypes", [Object])], DefaultRenderService);
+    DefaultRenderService = __decorate$1c([injectable(), __param$z(0, inject(DrawContribution)), __metadata$U("design:paramtypes", [Object])], DefaultRenderService);
 
     var renderModule$1 = new ContainerModule(bind => {
       bind(RenderService).to(DefaultRenderService).inSingletonScope();
@@ -21017,7 +21242,7 @@
     const PickerService = Symbol.for("PickerService");
     const GlobalPickerService = Symbol.for("GlobalPickerService");
 
-    var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -21050,7 +21275,7 @@
         return context.highPerformanceRestore(), result;
       }
     };
-    ShadowRootPickItemInterceptorContribution = __decorate$1c([injectable()], ShadowRootPickItemInterceptorContribution);
+    ShadowRootPickItemInterceptorContribution = __decorate$1b([injectable()], ShadowRootPickItemInterceptorContribution);
     let InteractivePickItemInterceptorContribution = class {
       constructor() {
         this.order = 1;
@@ -21069,7 +21294,7 @@
         return null;
       }
     };
-    InteractivePickItemInterceptorContribution = __decorate$1c([injectable()], InteractivePickItemInterceptorContribution);
+    InteractivePickItemInterceptorContribution = __decorate$1b([injectable()], InteractivePickItemInterceptorContribution);
     let Canvas3DPickItemInterceptor = class {
       constructor() {
         this.order = 1;
@@ -21129,7 +21354,7 @@
         context.setTransformForCurrent();
       }
     };
-    Canvas3DPickItemInterceptor = __decorate$1c([injectable()], Canvas3DPickItemInterceptor);
+    Canvas3DPickItemInterceptor = __decorate$1b([injectable()], Canvas3DPickItemInterceptor);
 
     var pickModule = new ContainerModule((bind, unbind, isBound) => {
       isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution), bind(InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -21142,14 +21367,14 @@
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
     const PluginService = Symbol.for("PluginService");
 
-    var __decorate$1b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$U = undefined && undefined.__metadata || function (k, v) {
+      __metadata$T = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
       __param$y = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -21192,7 +21417,7 @@
         }), this.onRegisterPlugin = [];
       }
     };
-    DefaultPluginService = __decorate$1b([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(AutoEnablePlugins)), __metadata$U("design:paramtypes", [Object])], DefaultPluginService);
+    DefaultPluginService = __decorate$1a([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(AutoEnablePlugins)), __metadata$T("design:paramtypes", [Object])], DefaultPluginService);
 
     var pluginModule = new ContainerModule(bind => {
       bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -21206,14 +21431,14 @@
       bind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
     });
 
-    var __decorate$1a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$19 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$T = undefined && undefined.__metadata || function (k, v) {
+      __metadata$S = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let CanvasLayerHandlerContribution = class {
@@ -21283,16 +21508,16 @@
         this.canvas.release();
       }
     };
-    CanvasLayerHandlerContribution = __decorate$1a([injectable(), __metadata$T("design:paramtypes", [])], CanvasLayerHandlerContribution);
+    CanvasLayerHandlerContribution = __decorate$19([injectable(), __metadata$S("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-    var __decorate$19 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$18 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$S = undefined && undefined.__metadata || function (k, v) {
+      __metadata$R = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let EmptyLayerHandlerContribution = class {
@@ -21327,16 +21552,16 @@
       }
       release() {}
     };
-    EmptyLayerHandlerContribution = __decorate$19([injectable(), __metadata$S("design:paramtypes", [])], EmptyLayerHandlerContribution);
+    EmptyLayerHandlerContribution = __decorate$18([injectable(), __metadata$R("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-    var __decorate$18 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$17 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$R = undefined && undefined.__metadata || function (k, v) {
+      __metadata$Q = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let OffscreenLayerHandlerContribution = class {
@@ -21398,7 +21623,7 @@
       }
       merge(layerHandlers) {}
     };
-    OffscreenLayerHandlerContribution = __decorate$18([injectable(), __metadata$R("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+    OffscreenLayerHandlerContribution = __decorate$17([injectable(), __metadata$Q("design:paramtypes", [])], OffscreenLayerHandlerContribution);
 
     var layerHandlerModules = new ContainerModule(bind => {
       bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(EmptyLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution), bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution), bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
@@ -21514,197 +21739,6 @@
       return result;
     }
 
-    var __decorate$17 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-        var d,
-          c = arguments.length,
-          r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-        if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-      },
-      __metadata$Q = undefined && undefined.__metadata || function (k, v) {
-        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-      };
-    const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
-    const tempDirtyBounds = new AABBBounds();
-    class ShadowRootDrawItemInterceptorContribution {
-      constructor() {
-        this.order = 1;
-      }
-      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-      drawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.shadowRoot) return !1;
-        const {
-          context: context
-        } = drawContext;
-        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
-          tempDirtyBounds.copy(drawContribution.dirtyBounds);
-          const m = graphic.globalTransMatrix.getInverse();
-          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
-        }
-        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
-      }
-    }
-    class DebugDrawItemInterceptorContribution {
-      constructor() {
-        this.order = 1;
-      }
-      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute._debug_bounds && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-      drawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.attribute._debug_bounds) return !1;
-        const {
-          context: context
-        } = drawContext;
-        context.highPerformanceSave(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
-        const b = graphic.AABBBounds;
-        return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
-      }
-    }
-    let CommonDrawItemInterceptorContribution = class {
-      constructor() {
-        this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
-      }
-      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 !0;
-        return !1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
-        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
-        return !1;
-      }
-    };
-    CommonDrawItemInterceptorContribution = __decorate$17([injectable(), __metadata$Q("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
-    class InteractiveDrawItemInterceptorContribution {
-      constructor() {
-        this.order = 1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
-      }
-      beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        let interactiveGraphic = graphic.interactiveGraphic;
-        if (graphic.attribute.globalZIndex) {
-          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
-            globalZIndex: 0,
-            zIndex: graphic.attribute.globalZIndex
-          }, !1, {
-            skipUpdateCallback: !0
-          }), drawContext.stage.tryInitInteractiveLayer();
-          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (interactiveLayer) {
-            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
-          }
-          return !0;
-        }
-        if (interactiveGraphic) {
-          drawContext.stage.tryInitInteractiveLayer();
-          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (interactiveLayer) {
-            this.getShadowRoot(interactiveLayer).removeChild(interactiveGraphic);
-          }
-          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
-        }
-        return !1;
-      }
-      beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        const baseGraphic = graphic.baseGraphic;
-        if (baseGraphic) {
-          this.processing = !0;
-          const {
-            context: context
-          } = drawContext;
-          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
-        }
-        return !1;
-      }
-      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();
-      }
-    }
-    class Canvas3DDrawItemInterceptor {
-      constructor() {
-        this.order = 1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
-        drawContext.in3dInterceptor = !0;
-        const {
-          context: context,
-          stage: stage
-        } = renderService.drawParams;
-        context.canvas;
-        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
-        const m = context.currentMatrix;
-        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
-        const matrix = mat4Allocate.allocate();
-        mat3Tomat4(matrix, m);
-        const lastModelMatrix = context.modelMatrix;
-        if (lastModelMatrix) {
-          if (matrix) {
-            const m = mat4Allocate.allocate();
-            context.modelMatrix = multiplyMat4Mat4(m, lastModelMatrix, matrix);
-          }
-        } else context.modelMatrix = matrix;
-        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
-          let isPie = !1,
-            is3d = !1;
-          if (graphic.forEachChildren(c => (isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie)), graphic.forEachChildren(c => (is3d = !!c.findFace, !is3d)), isPie) {
-            const children = graphic.getChildren(),
-              sortedChildren = [...children];
-            sortedChildren.sort((a, b) => {
-              var _a, _b, _c, _d;
-              let angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
-                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
-              for (; angle1 < 0;) angle1 += pi2;
-              for (; angle2 < 0;) angle2 += pi2;
-              return angle2 - angle1;
-            }), sortedChildren.forEach(c => {
-              c._next = null, c._prev = null;
-            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(c => {
-              graphic.appendChild(c);
-            });
-            const m = graphic.parent.globalTransMatrix;
-            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, m), graphic.removeAllChild(), children.forEach(c => {
-              c._next = null, c._prev = null;
-            }), children.forEach(c => {
-              graphic.appendChild(c);
-            });
-          } else if (is3d) {
-            const children = graphic.getChildren(),
-              zChildren = children.map(g => ({
-                ave_z: g.findFace().vertices.map(v => {
-                  var _a;
-                  return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
-                }).reduce((a, b) => a + b, 0),
-                g: g
-              }));
-            zChildren.sort((a, b) => b.ave_z - a.ave_z), graphic.removeAllChild(), zChildren.forEach(i => {
-              i.g._next = null, i.g._prev = null;
-            }), graphic.update(), zChildren.forEach(i => {
-              graphic.add(i.g);
-            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), children.forEach(g => {
-              g._next = null, g._prev = null;
-            }), graphic.update(), children.forEach(g => {
-              graphic.add(g);
-            });
-          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
-        } else drawContribution.renderItem(graphic, drawContext);
-        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
-      }
-      initCanvasCtx(context) {
-        context.setTransformForCurrent();
-      }
-    }
-
     var __decorate$16 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -21746,20 +21780,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.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("暂不支持");
@@ -21840,7 +21880,7 @@
       }
       getRenderContribution(graphic) {
         let renderer;
-        return renderer || (renderer = this.selectRenderByNumberType(graphic.numberType)), renderer || (renderer = this.selectRenderByType(graphic.type)), renderer;
+        return renderer || (renderer = this.selectRenderByNumberType(graphic.numberType, graphic)), renderer || (renderer = this.selectRenderByType(graphic.type)), renderer;
       }
       renderItem(graphic, drawContext, params) {
         if (this.InterceptorContributions.length) for (let i = 0; i < this.InterceptorContributions.length; i++) {
@@ -21872,8 +21912,13 @@
       selectRenderByType(type) {
         return Logger.getInstance().warn("未知错误，不应该走到这里"), null;
       }
-      selectRenderByNumberType(type) {
-        return this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
+      selectRenderByNumberType(type, graphic) {
+        let data;
+        if (graphic.attribute.renderStyle) {
+          const currentRenderMap = this.styleRenderMap.get(graphic.attribute.renderStyle);
+          data = currentRenderMap && currentRenderMap.get(type);
+        }
+        return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
       clearScreen(renderService, context, drawContext) {
         var _a, _b;
@@ -22160,14 +22205,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) {
@@ -22360,6 +22413,8 @@
       activate(context) {
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, stage => {
           stage && stage === this.pluginService.stage && this.drawHTML(context.stage.renderService);
+        }), application.graphicService.hooks.onRemove.tap(this.key, graphic => {
+          this.removeDom(graphic);
         }), application.graphicService.hooks.onRelease.tap(this.key, graphic => {
           this.removeDom(graphic);
         });
@@ -22404,28 +22459,29 @@
         } = html;
         graphic.bindDom || (graphic.bindDom = new Map());
         const lastDom = graphic.bindDom.get(dom);
-        if (lastDom && (!container || container === lastDom.container)) return;
-        let nativeDom, nativeContainer;
-        graphic.bindDom.forEach(_ref => {
-          let {
+        let wrapGroup, nativeContainer;
+        if (!lastDom || container && container !== lastDom.container) {
+          let nativeDom;
+          graphic.bindDom.forEach(_ref => {
+            let {
+              wrapGroup: wrapGroup
+            } = _ref;
+            application.global.removeDom(wrapGroup);
+          }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
+          const _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
+          nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
+            tagName: "div",
+            width: width,
+            height: height,
+            style: style,
+            parent: nativeContainer
+          }), wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
+            dom: nativeDom,
+            container: container,
             wrapGroup: wrapGroup
-          } = _ref;
-          application.global.removeDom(wrapGroup);
-        }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
-        const _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
-        nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer();
-        const wrapGroup = application.global.createDom({
-          tagName: "div",
-          width: width,
-          height: height,
-          style: style,
-          parent: nativeContainer
-        });
-        wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
-          dom: nativeDom,
-          container: container,
-          wrapGroup: wrapGroup
-        })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+          }));
+        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
+        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         let left = 0,
           top = 0;
         const b = graphic.globalAABBBounds;
@@ -22468,34 +22524,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$1(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,
@@ -22504,18 +22574,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,
@@ -22550,107 +22620,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(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();
@@ -23064,6 +23195,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;
@@ -23097,7 +23231,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) {
@@ -23124,7 +23258,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,
@@ -23723,11 +23858,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 = {
@@ -24439,7 +24580,7 @@
         if (v === null || v === undefined || v === '') {
             return false;
         }
-        if (isNumber$2(v)) {
+        if (isNumber$1(v)) {
             return true;
         }
         return +v === +v;
@@ -24532,7 +24673,7 @@
         const n = array.length;
         for (let i = 0; i < n; i += 1) {
           let value = valueGetter(array[i]);
-          isNil$1(value) || !isNumber$2(value = +value) || Number.isNaN(value) || (isNil$1(min) ? (min = value, max = value) : (min = Math.min(min, value), max = Math.max(max, value)));
+          isNil$1(value) || !isNumber$1(value = +value) || Number.isNaN(value) || (isNil$1(min) ? (min = value, max = value) : (min = Math.min(min, value), max = Math.max(max, value)));
         }
         return [min, max];
       }
@@ -25017,7 +25158,7 @@
         return this._isFixed && !!this._bandwidth;
       }
       _isBandwidthFixedByUser() {
-        return this._isFixed && this._userBandwidth && isNumber$2(this._userBandwidth);
+        return this._isFixed && this._userBandwidth && isNumber$1(this._userBandwidth);
       }
       clone() {
         var _a, _b, _c;
@@ -25285,13 +25426,13 @@
       }
     }
     function parseNiceOptions(originalDomain, option) {
-      const hasForceMin = isNumber$2(option.forceMin),
-        hasForceMax = isNumber$2(option.forceMax);
+      const hasForceMin = isNumber$1(option.forceMin),
+        hasForceMax = isNumber$1(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$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", {
+      return hasForceMin ? niceMinMax[0] = option.forceMin : isNumber$1(option.min) && option.min <= Math.min(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[0] = option.min), hasForceMax ? niceMinMax[1] = option.forceMax : isNumber$1(option.max) && option.max >= Math.max(originalDomain[0], originalDomain[originalDomain.length - 1]) && (niceMinMax[1] = option.max), isNumber$1(niceMinMax[0]) && isNumber$1(niceMinMax[1]) ? (niceDomain = originalDomain.slice(), niceDomain[0] = niceMinMax[0], niceDomain[niceDomain.length - 1] = niceMinMax[1]) : niceType = isNumber$1(niceMinMax[0]) || isNumber$1(niceMinMax[1]) ? isNumber$1(niceMinMax[0]) ? "max" : "min" : "all", {
         niceType: niceType,
         niceDomain: niceDomain,
         niceMinMax: niceMinMax,
@@ -26523,7 +26664,7 @@
       }] : [];
     }
     function getLinePoints(items, includeOnePoint, lastPoints, isArea) {
-      if (!items || !items.length || 1 === items.length && includeOnePoint) return [];
+      if (!items || !items.length || 1 === items.length && !includeOnePoint) return [];
       return items.some(item => isValidPointsChannel(Object.keys(item.nextAttrs), "line")) ? items.map((item, index) => {
         var _a;
         const attrs = item.nextAttrs,
@@ -26539,7 +26680,7 @@
     }
     function getLargeRectsPoints(items, includeOnePoint) {
       let lastPoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-      if (!items || !items.length || 1 === items.length && includeOnePoint) return [];
+      if (!items || !items.length || 1 === items.length && !includeOnePoint) return [];
       const arr = new Float32Array(4 * items.length);
       return items.forEach((item, index) => {
         var _a, _b, _c, _d;
@@ -26553,7 +26694,7 @@
     }
     function getLargeSymbolsPoints(items, includeOnePoint) {
       let lastPoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-      if (!items || !items.length || 1 === items.length && includeOnePoint) return [];
+      if (!items || !items.length || 1 === items.length && !includeOnePoint) return [];
       const arr = new Float32Array(2 * items.length);
       return items.forEach((item, index) => {
         var _a, _b;
@@ -26594,6 +26735,57 @@
       return [GrammarMarkType.line, GrammarMarkType.area, GrammarMarkType.largeRects, GrammarMarkType.largeSymbols].includes(markType);
     }
 
+    function invokeEncoderToItems(element, items, encoder, parameters, onlyFullEncodeFirst) {
+      encoder && (isFunctionType(encoder) ? items.forEach(item => {
+        const attributes = invokeFunctionType(encoder, parameters, item.datum, element);
+        Object.assign(item.nextAttrs, attributes);
+      }) : Object.keys(encoder).forEach(channel => {
+        var _a, _b;
+        const encode = encoder[channel],
+          encodeItems = onlyFullEncodeFirst && !isPositionOrSizeChannel(element.mark.markType, channel) ? [items[0]] : items;
+        if (isScaleEncode(encode)) {
+          const scale = getGrammarOutput(encode.scale, parameters),
+            offset = null !== (_a = null == encode ? void 0 : encode.offset) && void 0 !== _a ? _a : 0,
+            bandOffset = !isNil$1(encode.band) && scale.bandwidth ? scale.bandwidth() * encode.band : null,
+            hasField = isString$1(null == encode ? void 0 : encode.field),
+            fieldAccessor = hasField ? field$3(encode.field) : null;
+          let to = hasField ? null : isNil$1(null == encode ? void 0 : encode.value) ? 0 : null === (_b = scale.scale) || void 0 === _b ? void 0 : _b.call(scale, encode.value);
+          encodeItems.forEach(item => {
+            var _a;
+            hasField && (to = null === (_a = scale.scale) || void 0 === _a ? void 0 : _a.call(scale, fieldAccessor(item.datum))), item.nextAttrs[channel] = isNumber$1(to) || isNumber$1(bandOffset) ? to + offset + bandOffset : to;
+          });
+        } else if (isFieldEncode(encode)) {
+          const fieldAccessor = field$3(encode.field);
+          encodeItems.forEach(item => {
+            item.nextAttrs[channel] = fieldAccessor(item.datum);
+          });
+        } else encodeItems.forEach(item => {
+          item.nextAttrs[channel] = invokeFunctionType(encode, parameters, item.datum, element);
+        });
+      }));
+    }
+    function invokeEncoder(encoder, datum, element, parameters) {
+      if (!encoder) return null;
+      if (isFunctionType(encoder)) return invokeFunctionType(encoder, parameters, datum, element);
+      const attributes = {};
+      return Object.keys(encoder).forEach(channel => {
+        var _a, _b, _c;
+        const encode = encoder[channel];
+        if (isScaleEncode(encode)) {
+          const scale = getGrammarOutput(encode.scale, parameters),
+            offset = null !== (_a = null == encode ? void 0 : encode.offset) && void 0 !== _a ? _a : 0,
+            bandOffset = !isNil$1(encode.band) && scale.bandwidth ? scale.bandwidth() * encode.band : null,
+            hasField = isString$1(null == encode ? void 0 : encode.field),
+            fieldAccessor = hasField ? field$3(encode.field) : null,
+            to = hasField ? null === (_b = scale.scale) || void 0 === _b ? void 0 : _b.call(scale, fieldAccessor(datum)) : isNil$1(null == encode ? void 0 : encode.value) ? 0 : null === (_c = scale.scale) || void 0 === _c ? void 0 : _c.call(scale, encode.value);
+          attributes[channel] = isNumber$1(to) || isNumber$1(bandOffset) ? to + offset + bandOffset : to;
+        } else if (isFieldEncode(encode)) {
+          const fieldAccessor = field$3(encode.field);
+          attributes[channel] = fieldAccessor(datum);
+        } else attributes[channel] = invokeFunctionType(encode, parameters, datum, element);
+      }), attributes;
+    }
+
     class GlyphMeta {
       constructor(marks, encoders, defaultEncoder, progressiveChannels) {
         this.channelEncoder = {}, this.marks = marks, encoders && this.registerChannelEncoder(encoders), defaultEncoder && this.registerDefaultEncoder(defaultEncoder), this.progressiveChannels && this.registerProgressiveChannels(progressiveChannels);
@@ -26709,83 +26901,6 @@
       return creator ? creator(attributes) : null;
     };
 
-    function invokeEncoderToItems(element, items, encoder, parameters, onlyFullEncodeFirst) {
-      encoder && (isFunctionType(encoder) ? items.forEach(item => {
-        const attributes = invokeFunctionType(encoder, parameters, item.datum, element);
-        Object.assign(item.nextAttrs, attributes);
-      }) : Object.keys(encoder).forEach(channel => {
-        var _a, _b;
-        const encode = encoder[channel],
-          encodeItems = onlyFullEncodeFirst && !isPositionOrSizeChannel(element.mark.markType, channel) ? [items[0]] : items;
-        if (isScaleEncode(encode)) {
-          const scale = getGrammarOutput(encode.scale, parameters),
-            offset = null !== (_a = null == encode ? void 0 : encode.offset) && void 0 !== _a ? _a : 0,
-            bandOffset = !isNil$1(encode.band) && scale.bandwidth ? scale.bandwidth() * encode.band : null,
-            hasField = isString$1(null == encode ? void 0 : encode.field),
-            fieldAccessor = hasField ? field$3(encode.field) : null;
-          let to = hasField ? null : isNil$1(null == encode ? void 0 : encode.value) ? 0 : null === (_b = scale.scale) || void 0 === _b ? void 0 : _b.call(scale, encode.value);
-          encodeItems.forEach(item => {
-            var _a;
-            hasField && (to = null === (_a = scale.scale) || void 0 === _a ? void 0 : _a.call(scale, fieldAccessor(item.datum))), item.nextAttrs[channel] = isNumber$2(to) || isNumber$2(bandOffset) ? to + offset + bandOffset : to;
-          });
-        } else if (isFieldEncode(encode)) {
-          const fieldAccessor = field$3(encode.field);
-          encodeItems.forEach(item => {
-            item.nextAttrs[channel] = fieldAccessor(item.datum);
-          });
-        } else encodeItems.forEach(item => {
-          item.nextAttrs[channel] = invokeFunctionType(encode, parameters, item.datum, element);
-        });
-      }));
-    }
-    function invokeEncoder(encoder, datum, element, parameters) {
-      if (!encoder) return null;
-      if (isFunctionType(encoder)) return invokeFunctionType(encoder, parameters, datum, element);
-      const attributes = {};
-      return Object.keys(encoder).forEach(channel => {
-        var _a, _b, _c;
-        const encode = encoder[channel];
-        if (isScaleEncode(encode)) {
-          const scale = getGrammarOutput(encode.scale, parameters),
-            offset = null !== (_a = null == encode ? void 0 : encode.offset) && void 0 !== _a ? _a : 0,
-            bandOffset = !isNil$1(encode.band) && scale.bandwidth ? scale.bandwidth() * encode.band : null,
-            hasField = isString$1(null == encode ? void 0 : encode.field),
-            fieldAccessor = hasField ? field$3(encode.field) : null,
-            to = hasField ? null === (_b = scale.scale) || void 0 === _b ? void 0 : _b.call(scale, fieldAccessor(datum)) : isNil$1(null == encode ? void 0 : encode.value) ? 0 : null === (_c = scale.scale) || void 0 === _c ? void 0 : _c.call(scale, encode.value);
-          attributes[channel] = isNumber$2(to) || isNumber$2(bandOffset) ? to + offset + bandOffset : to;
-        } else if (isFieldEncode(encode)) {
-          const fieldAccessor = field$3(encode.field);
-          attributes[channel] = fieldAccessor(datum);
-        } else attributes[channel] = invokeFunctionType(encode, parameters, datum, element);
-      }), attributes;
-    }
-    function splitEncoderInLarge(markType, encoder, glyphType) {
-      if (isFunctionType(encoder)) return {
-        themeEncoder: {},
-        positionEncoder: encoder
-      };
-      const themeEncoder = {},
-        positionEncoder = {};
-      if (markType === GrammarMarkType.glyph && Factory$1.getGlyph(glyphType)) {
-        const glyphMeta = Factory$1.getGlyph(glyphType),
-          progressiveChannels = glyphMeta.getProgressiveChannels();
-        if (progressiveChannels) Object.keys(encoder).forEach(channel => {
-          progressiveChannels.includes(channel) ? positionEncoder[channel] = encoder[channel] : themeEncoder[channel] = encoder[channel];
-        });else {
-          const markTypes = Array.from(new Set(Object.values(glyphMeta.getMarks())));
-          Object.keys(encoder).forEach(channel => {
-            markTypes.some(type => isPositionOrSizeChannel(type, channel)) ? positionEncoder[channel] = encoder[channel] : themeEncoder[channel] = encoder[channel];
-          });
-        }
-      } else Object.keys(encoder).forEach(channel => {
-        isPositionOrSizeChannel(markType, channel) ? positionEncoder[channel] = encoder[channel] : themeEncoder[channel] = encoder[channel];
-      });
-      return {
-        positionEncoder: positionEncoder,
-        themeEncoder: themeEncoder
-      };
-    }
-
     const isMarkType = type => !!GrammarMarkType[type];
     function createGraphicItem(mark, markType) {
       let attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -27015,7 +27130,7 @@
       }
       updateGraphicItem(config) {
         if (!this.graphicItem) return;
-        isNil$1(config.clip) || this.graphicItem.setAttribute("clip", config.clip), isNil$1(config.interactive) || this.graphicItem.setAttribute("pickable", config.interactive), isNil$1(config.zIndex) || this.graphicItem.setAttribute("zIndex", config.zIndex), this.diffState === DiffState.exit ? this.graphicItem.releaseStatus = "willRelease" : this.graphicItem.releaseStatus = void 0;
+        isNil$1(config.clip) || this.graphicItem.setAttribute("clip", config.clip), isNil$1(config.zIndex) || this.graphicItem.setAttribute("zIndex", config.zIndex), isNil$1(config.clipPath) || this.graphicItem.setAttribute("path", isArray$1(config.clipPath) ? config.clipPath : config.clipPath([this])), isNil$1(config.interactive) || this.graphicItem.setAttribute("pickable", config.interactive), isNil$1(config.zIndex) || this.graphicItem.setAttribute("zIndex", config.zIndex), this.diffState === DiffState.exit ? this.graphicItem.releaseStatus = "willRelease" : this.graphicItem.releaseStatus = void 0;
         const stateAnimation = this.mark.animate.getAnimationConfigs("state");
         0 !== stateAnimation.length && (this.graphicItem.stateAnimateConfig = stateAnimation[0].originConfig);
       }
@@ -27394,7 +27509,7 @@
             handler: this.handleStart
           }];
         let eventName = triggerOff;
-        return "empty" === triggerOff ? (eventName = trigger, this._resetType = "view") : isString$1(triggerOff) ? triggerOff.includes("view:") ? (eventName = triggerOff.replace("view:", ""), this._resetType = "view") : (eventName = triggerOff, this._resetType = "self") : isNumber$2(triggerOff) ? (eventName = null, this._resetType = "timeout") : this._resetType = null, eventName && eventName !== trigger && events.push({
+        return "empty" === triggerOff ? (eventName = trigger, this._resetType = "view") : isString$1(triggerOff) ? triggerOff.includes("view:") ? (eventName = triggerOff.replace("view:", ""), this._resetType = "view") : (eventName = triggerOff, this._resetType = "self") : isNumber$1(triggerOff) ? (eventName = null, this._resetType = "timeout") : this._resetType = null, eventName && eventName !== trigger && events.push({
           type: eventName,
           handler: this.handleReset
         }), events;
@@ -30845,7 +30960,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$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 (!onlyTranslate || rect.shadowRoot || isNumber$1(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;
@@ -30913,7 +31028,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$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 (!onlyTranslate || isNumber$1(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;
@@ -32508,6 +32623,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$2(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();
@@ -32528,7 +32651,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
       render() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const {
             text = "",
             textStyle = {},
@@ -32560,7 +32683,7 @@
           shapeStyle = __rest$6(shape, ["visible"]);
         if (isBoolean$1(shapeVisible)) {
           const size = (null == shapeStyle ? void 0 : shapeStyle.size) || 10,
-            maxSize = isNumber$2(size) ? size : Math.max(size[0], size[1]);
+            maxSize = isNumber$1(size) ? size : Math.max(size[0], size[1]);
           symbol = group.createOrUpdateChild("tag-shape", Object.assign(Object.assign({
             symbolType: "circle",
             size: size,
@@ -32572,39 +32695,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$6(panel, ["visible"]);
-          if (visible && isBoolean$1(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
           });
@@ -32625,7 +32724,7 @@
           }
         } else {
           const textAttrs = Object.assign(Object.assign({
-            text: text,
+            text: isObject$2(text) && "type" in text && "text" === text.type ? text.text : text,
             visible: isValid$1(text) && !1 !== visible,
             lineHeight: null == textStyle ? void 0 : textStyle.fontSize
           }, textStyle), {
@@ -32633,12 +32732,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$2(size) ? size : Math.max(size[0], size[1]);
+          const size = null !== (_b = shape.size) && void 0 !== _b ? _b : 10,
+            maxSize = isNumber$1(size) ? size : Math.max(size[0], size[1]);
           tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
           const {
             textAlign: textAlign,
@@ -32646,11 +32745,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,
@@ -33910,18 +34019,7 @@
         state && !isEmpty(state) && (target.states = state);
       }
       _createLabelText(attributes) {
-        var _a, _b;
-        if ("rich" === attributes.textType) {
-          attributes.textConfig = attributes.text, 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;
-          return graphicCreator.richtext(attributes);
-        }
-        if ("html" === attributes.textType) {
-          attributes.textConfig = [], attributes.html = Object.assign(Object.assign({
-            dom: attributes.text
-          }, DEFAULT_HTML_TEXT_SPEC), attributes);
-          return graphicCreator.richtext(attributes);
-        }
-        return graphicCreator.text(attributes);
+        return isRichText(attributes, "textType") ? graphicCreator.richtext(richTextAttributeTransform(attributes)) : graphicCreator.text(attributes);
       }
       _prepare() {
         var _a, _b, _c, _d, _e;
@@ -33992,8 +34090,10 @@
           const textData = text.attribute,
             baseMark = this.getRelatedGraphic(textData);
           if (!baseMark) continue;
-          const textBounds = this.getGraphicBounds(text),
-            actualPosition = isFunction$1(position) ? position(textData) : position,
+          text.attachedThemeGraphic = this;
+          const textBounds = this.getGraphicBounds(text);
+          text.attachedThemeGraphic = null;
+          const actualPosition = isFunction$1(position) ? position(textData) : position,
             graphicBounds = this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(textData.id), actualPosition) : this.getGraphicBounds(baseMark, {
               x: textData.x,
               y: textData.y
@@ -35157,7 +35257,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Segment.defaultAttributes, attributes)), this.name = "segment";
       }
       render() {
-        this.removeAllChild(), this._reset();
+        this.removeAllChild(!0), this._reset();
         const {
           startSymbol: startSymbol,
           endSymbol: endSymbol,
@@ -35426,7 +35526,7 @@
         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(!0), this._prevInnerView = this._innerView, this._innerView = graphicCreator.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -35533,12 +35633,10 @@
             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.richtext(richTextAttributeTransform(labelStyle)) : graphicCreator.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$2({}, DEFAULT_STATES$2, this.attribute.label.state);
             Object.keys(labelState).forEach(key => {
               isFunction$1(labelState[key]) && (labelState[key] = labelState[key](item, index, data, layer));
@@ -36664,7 +36762,7 @@
         return this._prevInnerView;
       }
       render() {
-        this.removeAllChild(), this._prevInnerView = this._innerView, this._innerView = graphicCreator.group({
+        this.removeAllChild(!0), this._prevInnerView = this._innerView, this._innerView = graphicCreator.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -37877,7 +37975,7 @@
         var _a;
         this.setAttribute("pickable", !1);
         const markerVisible = null === (_a = this.attribute.visible) || void 0 === _a || _a;
-        !1 === this.attribute.interactive && this.setAttribute("childrenPickable", !1), markerVisible && this.isValidPoints() ? this._container ? (this._updateContainer(), this.updateMarker()) : (this._initContainer(), this.initMarker(this._container)) : (this._container = null, this.removeAllChild());
+        !1 === this.attribute.interactive && this.setAttribute("childrenPickable", !1), markerVisible && this.isValidPoints() ? this._container ? (this._updateContainer(), this.updateMarker()) : (this._initContainer(), this.initMarker(this._container)) : (this._container = null, this.removeAllChild(!0));
       }
     }
 
@@ -38664,8 +38762,8 @@
             textAlign: "center",
             textBaseline: "middle"
           }, textStyle), null === (_b = this.stage) || void 0 === _b ? void 0 : _b.getTheme().text.fontFamily),
-          handlerSizeX = isNumber$2(handlerSize) ? handlerSize : handlerSize[0],
-          handlerSizeY = isNumber$2(handlerSize) ? handlerSize : handlerSize[1],
+          handlerSizeX = isNumber$1(handlerSize) ? handlerSize : handlerSize[0],
+          handlerSizeY = isNumber$1(handlerSize) ? handlerSize : handlerSize[1],
           text = graphicCreator.text(Object.assign({
             x: isHorizontal ? handlerSizeX / 2 + handlerSpace + maxTextWidth / 2 : 0,
             y: isHorizontal ? 0 : handlerSizeY / 2 + handlerSpace + maxTextHeight / 2,
@@ -38694,7 +38792,7 @@
         this.attribute.disableTriggerEvent || (this.preHandler && (this.preHandler.addEventListener("pointerenter", this._onHover), this.preHandler.addEventListener("pointerleave", this._onUnHover), this.preHandler.addEventListener("pointerdown", this._onClick)), this.nextHandler && (this.nextHandler.addEventListener("pointerenter", this._onHover), this.nextHandler.addEventListener("pointerleave", this._onUnHover), this.nextHandler.addEventListener("pointerdown", this._onClick)));
       }
       _reset() {
-        this.removeAllChild(), this._current = 1, this._total = this.attribute.total, this.preHandler = this.nextHandler = this.text = null;
+        this.removeAllChild(!0), this._current = 1, this._total = this.attribute.total, this.preHandler = this.nextHandler = this.text = null;
       }
     }
     Pager.defaultAttributes = {
@@ -38731,7 +38829,7 @@
         super(...arguments), this.name = "legend", this._title = null;
       }
       render() {
-        this.removeAllChild();
+        this.removeAllChild(!0);
         const {
             interactive = !0,
             title: title,
@@ -38994,7 +39092,8 @@
             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$1(focusIconStyle, "size", DEFAULT_SHAPE_SIZE);
           focusShape = graphicCreator.symbol(Object.assign(Object.assign({
@@ -39007,29 +39106,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.richtext(richTextAttributeTransform(labelAttributes)) : graphicCreator.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$1(labelAttr, "space", DEFAULT_LABEL_SPACE);
         if (isValid$1(value)) {
           const valueSpace = get$1(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.richtext(richTextAttributeTransform(valueAttributes)) : graphicCreator.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,
@@ -39448,7 +39550,7 @@
       }
       render() {
         var _a, _b;
-        this.removeAllChild();
+        this.removeAllChild(!0);
         const {
           layout = "horizontal",
           railWidth: railWidth,
@@ -40261,7 +40363,7 @@
         super(...arguments), this.name = "indicator";
       }
       render() {
-        var _a, _b, _c;
+        var _a;
         const {
             visible: visible,
             title = {},
@@ -40278,20 +40380,7 @@
         if (!0 !== visible) return void (group && group.hideAll());
         if (isValid$1(title)) if (!1 !== title.visible) {
           const titleStyle = merge$2({}, get$1(DEFAULT_INDICATOR_THEME, "title.style"), title.style);
-          "rich" === titleStyle.type ? this._title = group.createOrUpdateChild("indicator-title", Object.assign(Object.assign({
-            textConfig: titleStyle.text
-          }, titleStyle), {
-            visible: title.visible,
-            x: 0,
-            y: 0,
-            width: null !== (_a = titleStyle.width) && void 0 !== _a ? _a : 0,
-            height: null !== (_b = titleStyle.height) && void 0 !== _b ? _b : 0
-          }), "richtext") : "html" === titleStyle.type ? this._title = group.createOrUpdateChild("indicator-title", Object.assign(Object.assign({
-            textConfig: [],
-            html: Object.assign(Object.assign({
-              dom: titleStyle.text
-            }, DEFAULT_HTML_TEXT_SPEC), titleStyle)
-          }, titleStyle), {
+          isRichText(titleStyle) ? this._title = group.createOrUpdateChild("indicator-title", Object.assign(Object.assign({}, richTextAttributeTransform(titleStyle)), {
             visible: title.visible,
             x: 0,
             y: 0
@@ -40309,24 +40398,10 @@
           const contents = array(content),
             contentComponents = [];
           contents.forEach((contentItem, i) => {
-            var _a, _b;
             if (!1 !== contentItem.visible) {
               const contentStyle = merge$2({}, get$1(DEFAULT_INDICATOR_THEME, "content.style"), contentItem.style);
               let contentComponent;
-              contentComponent = "rich" === contentStyle.type ? group.createOrUpdateChild("indicator-content-" + i, Object.assign(Object.assign({
-                textConfig: contentStyle.text
-              }, contentStyle), {
-                visible: title.visible,
-                x: 0,
-                y: 0,
-                width: null !== (_a = contentStyle.width) && void 0 !== _a ? _a : 0,
-                height: null !== (_b = contentStyle.height) && void 0 !== _b ? _b : 0
-              }), "richtext") : "html" === contentStyle.type ? group.createOrUpdateChild("indicator-content-" + i, Object.assign(Object.assign({
-                textConfig: [],
-                html: Object.assign(Object.assign({
-                  dom: contentStyle.text
-                }, DEFAULT_HTML_TEXT_SPEC), contentStyle)
-              }, contentStyle), {
+              contentComponent = isRichText(contentStyle) ? group.createOrUpdateChild("indicator-content-" + i, Object.assign(Object.assign({}, richTextAttributeTransform(contentStyle)), {
                 visible: title.visible,
                 x: 0,
                 y: 0
@@ -40343,7 +40418,7 @@
           }), this._content = contentComponents;
         }
         this._setGlobalAutoFit(limit), this._setYPosition();
-        const totalHeight = null !== (_c = null == group ? void 0 : group.AABBBounds.height()) && void 0 !== _c ? _c : 0;
+        const totalHeight = null !== (_a = null == group ? void 0 : group.AABBBounds.height()) && void 0 !== _a ? _a : 0;
         group.setAttribute("y", size.height / 2 - totalHeight / 2), group.setAttribute("x", size.width / 2);
       }
       _setLocalAutoFit(limit, indicatorItem, indicatorItemSpec) {
@@ -40719,7 +40794,7 @@
           railSectionLength = null !== (_a = isHorizontal$1(this._orient) ? this._railStyle.height : this._railStyle.width) && void 0 !== _a ? _a : RailDefaultSize[1],
           controllerPx = controllers.reduce((len, controller) => {
             const size = controller.style.size,
-              maxSize = isNumber$2(size) ? size : max$1(size[0], size[1]);
+              maxSize = isNumber$1(size) ? size : max$1(size[0], size[1]);
             return len + controller.space + maxSize;
           }, 0),
           sliderPx = this._sliderVisible ? (isHorizontal$1(this._orient) ? null === (_b = this._size) || void 0 === _b ? void 0 : _b.width : null === (_c = this._size) || void 0 === _c ? void 0 : _c.height) - controllerPx : 0,
@@ -40732,7 +40807,7 @@
                   size: size
                 }
               } = controller,
-              maxSize = isNumber$2(size) ? size : max$1(size[0], size[1]);
+              maxSize = isNumber$1(size) ? size : max$1(size[0], size[1]);
             return this._layoutInfo[key] = Object.assign(Object.assign({}, this._layoutInfo[key]), {
               size: maxSize,
               x: isHorizontal$1(this._orient) ? px + space : (this._size.width - maxSize) / 2,
@@ -40751,7 +40826,7 @@
                 size: size
               }
             } = controller,
-            maxSize = isNumber$2(size) ? size : max$1(size[0], size[1]);
+            maxSize = isNumber$1(size) ? size : max$1(size[0], size[1]);
           return this._layoutInfo[key] = Object.assign(Object.assign({}, this._layoutInfo[key]), {
             size: maxSize,
             x: isHorizontal$1(this._orient) ? px + space : (this._size.width - maxSize) / 2,
@@ -41431,7 +41506,7 @@
         const titleHeight = isVisible(titleAttr) ? titleAttr.height + titleAttr.spaceRow : 0;
         if (this._tooltipContent = this.createOrUpdateChild("tooltip-content", {
           visible: !0
-        }, "group"), this._tooltipContent.removeAllChild(), content && content.length) {
+        }, "group"), this._tooltipContent.removeAllChild(!0), content && content.length) {
           this._tooltipContent.setAttribute("x", padding[3]), this._tooltipContent.setAttribute("y", padding[0] + titleHeight);
           let lastYPos = 0;
           content.forEach((item, i) => {
@@ -42641,7 +42716,7 @@
     };
     const normalizePadding = value => {
       var _a, _b, _c, _d;
-      return isNumber$2(value) ? {
+      return isNumber$1(value) ? {
         top: value,
         bottom: value,
         left: value,
@@ -43523,10 +43598,10 @@
             delayAfter: delayAfter
           }), loopTime += delay + duration + delayAfter;
         });
-        const oneByOneDelay = isNumber$2(oneByOne) ? oneByOne : !0 === oneByOne ? loopTime : 0;
+        const oneByOneDelay = isNumber$1(oneByOne) ? oneByOne : !0 === oneByOne ? loopTime : 0;
         return {
           initialDelay: startTime,
-          loopCount: isNumber$2(loop) ? loop : !0 === loop ? 1 / 0 : 1,
+          loopCount: isNumber$1(loop) ? loop : !0 === loop ? 1 / 0 : 1,
           loopDelay: oneByOneDelay * index,
           loopDelayAfter: oneByOneDelay * (elementCount - index - 1),
           loopAnimateDuration: loopTime,
@@ -43626,7 +43701,7 @@
         if (this.markType === GrammarMarkType.group) return;
         const res = groupData(null != data ? data : DefaultMarkData, this.spec.groupBy, this.spec.groupSort),
           groupKeys = res.keys;
-        this._groupKeys = groupKeys, this.differ.setCurrentData(res);
+        this._groupKeys = groupKeys, this._groupEncodeResult = null, this.differ.setCurrentData(res);
       }
       _getTransformsAfterEncodeItems() {
         return this.transforms && this.transforms.filter(entry => "afterEncodeItems" === entry.markPhase);
@@ -43697,7 +43772,7 @@
         return nextTransforms && (this.attach(nextTransforms.refs), this.transforms = nextTransforms.transforms), this.spec.transform = transforms, this.commit(), this;
       }
       configure(config) {
-        const keys = ["clip", "zIndex", "interactive", "context", "setCustomizedShape", "large", "largeThreshold", "progressiveStep", "progressiveThreshold", "support3d", "morph", "morphKey", "morphElementKey", "attributeTransforms", "skipTheme", "enableSegments", "stateSort"];
+        const keys = ["clip", "clipPath", "zIndex", "interactive", "context", "setCustomizedShape", "large", "largeThreshold", "progressiveStep", "progressiveThreshold", "support3d", "morph", "morphKey", "morphElementKey", "attributeTransforms", "skipTheme", "enableSegments", "stateSort"];
         return null === config ? (keys.forEach(key => {
           isNil$1(this.spec[key]) || (this.spec[key] = void 0);
         }), this) : (keys.forEach(key => {
@@ -43777,7 +43852,7 @@
         this.graphicIndex = markIndex;
       }
       update(spec) {
-        this._context = this.spec.context, this.isUpdated = !0, this.renderContext.progressive || (spec.animation && this.animate.updateConfig(spec.animation), this.animate.updateState(spec.animationState)), this.markType !== GrammarMarkType.group ? (isNil$1(spec.zIndex) || this.graphicItem.setAttribute("zIndex", spec.zIndex), isNil$1(spec.clip) || this.graphicItem.setAttribute("clip", spec.clip), this.elementMap.forEach(element => {
+        this._context = this.spec.context, this.isUpdated = !0, this.renderContext.progressive || (spec.animation && this.animate.updateConfig(spec.animation), this.animate.updateState(spec.animationState)), this.markType !== GrammarMarkType.group ? (isNil$1(spec.zIndex) || this.graphicItem.setAttribute("zIndex", spec.zIndex), isNil$1(spec.clip) || this.graphicItem.setAttribute("clip", spec.clip), isNil$1(spec.clipPath) || this.graphicItem.setAttribute("path", isArray$1(spec.clipPath) ? spec.clipPath : spec.clipPath(this.elements)), this.elementMap.forEach(element => {
           element.updateGraphicItem({
             interactive: spec.interactive
           });
@@ -43785,7 +43860,8 @@
           element.updateGraphicItem({
             clip: spec.clip,
             zIndex: spec.zIndex,
-            interactive: spec.interactive
+            interactive: spec.interactive,
+            clipPath: spec.clipPath
           });
         });
       }
@@ -43834,25 +43910,27 @@
             items = [Object.assign({}, null === (_a = el.items) || void 0 === _a ? void 0 : _a[0], {
               nextAttrs: nextAttrs
             })];
-          return invokeEncoderToItems(el, items, groupEncode, parameters), nextAttrs;
+          return invokeEncoderToItems(el, items, groupEncode, parameters), this._groupEncodeResult = nextAttrs, nextAttrs;
         }
         if (!this._groupKeys || !groupEncode) return;
         const res = {};
         return this._groupKeys.forEach(key => {
           const el = elements.find(el => el.groupKey === key);
           el && (res[key] = invokeEncoder(groupEncode, el.items && el.items[0] && el.items[0].datum, el, parameters));
-        }), res;
+        }), this._groupEncodeResult = res, res;
       }
-      evaluateEncode(elements, encoders, parameters) {
+      evaluateEncode(elements, encoders, parameters, noGroupEncode) {
         if (encoders) {
           this.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_ELEMENT_ENCODE, {
             encoders: encoders,
             parameters: parameters
           }, this);
-          const groupEncodeAttrs = this.evaluateGroupEncode(elements, encoders[BuiltInEncodeNames.group], parameters);
+          const groupEncodeAttrs = noGroupEncode ? null : this.evaluateGroupEncode(elements, encoders[BuiltInEncodeNames.group], parameters);
           elements.forEach(element => {
             this.markType === GrammarMarkType.group && groupEncodeAttrs ? element.items.forEach(item => {
               item.nextAttrs = Object.assign(item.nextAttrs, groupEncodeAttrs);
+            }) : this.markType === GrammarMarkType.glyph && this._groupEncodeResult ? element.items.forEach(item => {
+              item.nextAttrs = Object.assign(item.nextAttrs, this._groupEncodeResult[element.groupKey]);
             }) : (null == groupEncodeAttrs ? void 0 : groupEncodeAttrs[element.groupKey]) && !this.isCollectionMark() && element.items.forEach(item => {
               item.nextAttrs = Object.assign(item.nextAttrs, groupEncodeAttrs[element.groupKey]);
             }), element.encodeItems(element.items, encoders, this._isReentered, parameters);
@@ -43951,41 +44029,17 @@
         };
       }
       evaluateEncodeProgressive(elements, encoders, parameters) {
-        if (!encoders) return void elements.forEach(element => {
-          element.initGraphicItem();
-        });
-        const positionEncoders = Object.keys(encoders).reduce((res, state) => (!encoders[state] || state !== BuiltInEncodeNames.enter && state !== BuiltInEncodeNames.exit && state !== BuiltInEncodeNames.update || (res[state] = splitEncoderInLarge(this.markType, encoders[state], this.glyphType).positionEncoder), res), {}),
-          progressiveIndex = this.renderContext.progressive.currentIndex,
-          isCollection = this.isCollectionMark();
-        this.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_ELEMENT_ENCODE, {
-          encoders: encoders,
-          parameters: parameters
-        }, this);
-        const groupEncodeAttrs = this.evaluateGroupEncode(elements, encoders[BuiltInEncodeNames.group], parameters);
-        if (elements.forEach((element, index) => {
-          const onlyPos = progressiveIndex > 0 || !isCollection && index > 0;
-          !onlyPos && (null == groupEncodeAttrs ? void 0 : groupEncodeAttrs[element.groupKey]) && element.items.forEach(item => {
-            item.nextAttrs = Object.assign(item.nextAttrs, groupEncodeAttrs[element.groupKey]);
-          }), element.encodeItems(element.items, onlyPos ? positionEncoders : encoders, this._isReentered, parameters);
-        }), this._isReentered = !1, this.evaluateTransform(this._getTransformsAfterEncodeItems(), elements, parameters), elements.forEach(element => {
-          element.encodeGraphic();
-        }), this.emit(exports.VGRAMMAR_HOOK_EVENT.AFTER_ELEMENT_ENCODE, {
-          encoders: encoders,
-          parameters: parameters
-        }, this), 0 === progressiveIndex && !isCollection) {
-          const firstChild = elements[0].getGraphicItem(),
-            group = null == firstChild ? void 0 : firstChild.parent;
-          if (group) {
-            const attrs = firstChild.attribute,
-              theme = {},
-              itemAttrs = {};
-            Object.keys(attrs).forEach(key => {
-              ["pickable", "zIndex"].includes(key) || (isPositionOrSizeChannel(this.markType, key) ? itemAttrs[key] = attrs[key] : theme[key] = attrs[key]);
-            }), group.setTheme({
-              common: theme
-            }), firstChild.initAttributes(itemAttrs);
+        const progressiveIndex = this.renderContext.progressive.currentIndex;
+        if (0 === progressiveIndex) {
+          if (this.evaluateEncode(elements, encoders, parameters), 0 === progressiveIndex && this._groupEncodeResult && !this.isCollectionMark() && this.markType !== GrammarMarkType.glyph) {
+            const firstElement = elements[0],
+              firstChild = firstElement.getGraphicItem(),
+              group = null == firstChild ? void 0 : firstChild.parent;
+            group && this._groupEncodeResult[firstElement.groupKey] && group.setTheme({
+              common: this._groupEncodeResult[firstElement.groupKey]
+            });
           }
-        }
+        } else this.evaluateEncode(elements, encoders, parameters, !0);
       }
       evaluateProgressive() {
         var _a, _b, _c;
@@ -44455,7 +44509,7 @@
           duration = invokeFunctionType(runningConfig.animation.duration, parameters, morphData, morphElements),
           oneByOne = invokeFunctionType(runningConfig.animation.oneByOne, parameters, morphData, morphElements),
           splitPath = invokeFunctionType(runningConfig.animation.splitPath, parameters, morphData, morphElements),
-          individualDelay = isValidNumber$1(oneByOne) && oneByOne > 0 ? index => isNumber$2(oneByOne) ? index * oneByOne : !0 === oneByOne ? index * duration : 0 : void 0;
+          individualDelay = isValidNumber$1(oneByOne) && oneByOne > 0 ? index => isNumber$1(oneByOne) ? index * oneByOne : !0 === oneByOne ? index * duration : 0 : void 0;
         1 !== prev.length && 0 !== prev.length || 1 !== next.length ? 1 === prev.length && next.length > 1 ? oneToMultiMorph(prev[0].getGraphicItem(), next.map(element => element.getGraphicItem()), {
           delay: delay,
           duration: duration,
@@ -45830,9 +45884,9 @@
         grammarWillDetach && (this.reuseCachedGrammars(normalizedRunningConfig), this.detachCachedGrammar());
         const hasResize = this._resizeRenderer(),
           hasUpdate = this._dataflow.hasCommitted();
-        return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), this._dataflow.evaluate(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, this._dataflow.evaluate()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!0), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
+        return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), this._dataflow.evaluate(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, this._dataflow.evaluate()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
           this._morph.morph(morphMarks.prev, morphMarks.next, normalizedRunningConfig);
-        }), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), this.doPreProgressive(), this) : this;
+        }), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), this.doRender(!0), this.doPreProgressive(), this) : this;
       }
       reuseCachedGrammars(runningConfig) {
         if (this._willMorphMarks || (this._willMorphMarks = []), runningConfig.reuse) {
@@ -47773,7 +47827,7 @@
         x1 = element.getGraphicAttribute("x1", !1),
         width = element.getGraphicAttribute("width", !1);
       let overallValue;
-      return options && "negative" === options.orient ? isNumber$2(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = overallValue) : overallValue = animationParameters.width : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? null == options ? void 0 : options.overall : 0, {
+      return options && "negative" === options.orient ? isNumber$1(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = overallValue) : overallValue = animationParameters.width : overallValue = isNumber$1(null == options ? void 0 : options.overall) ? null == options ? void 0 : options.overall : 0, {
         from: {
           x: overallValue,
           x1: isNil$1(x1) ? void 0 : overallValue,
@@ -47818,7 +47872,7 @@
       const x1 = element.getGraphicAttribute("x1", !1),
         width = element.getGraphicAttribute("width", !1);
       let overallValue;
-      return options && "negative" === options.orient ? isNumber$2(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = overallValue) : overallValue = animationParameters.width : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0, {
+      return options && "negative" === options.orient ? isNumber$1(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = overallValue) : overallValue = animationParameters.width : overallValue = isNumber$1(null == options ? void 0 : options.overall) ? options.overall : 0, {
         to: {
           x: overallValue,
           x1: isNil$1(x1) ? void 0 : overallValue,
@@ -47869,7 +47923,7 @@
         y1 = element.getGraphicAttribute("y1", !1),
         height = element.getGraphicAttribute("height", !1);
       let overallValue;
-      return options && "negative" === options.orient ? isNumber$2(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = overallValue) : overallValue = animationParameters.height : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0, {
+      return options && "negative" === options.orient ? isNumber$1(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = overallValue) : overallValue = animationParameters.height : overallValue = isNumber$1(null == options ? void 0 : options.overall) ? options.overall : 0, {
         from: {
           y: overallValue,
           y1: isNil$1(y1) ? void 0 : overallValue,
@@ -47914,7 +47968,7 @@
       const y1 = element.getGraphicAttribute("y1", !1),
         height = element.getGraphicAttribute("height", !1);
       let overallValue;
-      return options && "negative" === options.orient ? isNumber$2(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = overallValue) : overallValue = animationParameters.height : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0, {
+      return options && "negative" === options.orient ? isNumber$1(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = overallValue) : overallValue = animationParameters.height : overallValue = isNumber$1(null == options ? void 0 : options.overall) ? options.overall : 0, {
         to: {
           y: overallValue,
           y1: isNil$1(y1) ? void 0 : overallValue,
@@ -47944,7 +47998,7 @@
       },
       growAngleInOverall = (element, options, animationParameters) => {
         if (options && "anticlockwise" === options.orient) {
-          const overallValue = isNumber$2(options.overall) ? options.overall : 2 * Math.PI;
+          const overallValue = isNumber$1(options.overall) ? options.overall : 2 * Math.PI;
           return {
             from: {
               startAngle: overallValue,
@@ -47956,7 +48010,7 @@
             }
           };
         }
-        const overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0;
+        const overallValue = isNumber$1(null == options ? void 0 : options.overall) ? options.overall : 0;
         return {
           from: {
             startAngle: overallValue,
@@ -47989,7 +48043,7 @@
       },
       growAngleOutOverall = (element, options, animationParameters) => {
         if (options && "anticlockwise" === options.orient) {
-          const overallValue = isNumber$2(options.overall) ? options.overall : 2 * Math.PI;
+          const overallValue = isNumber$1(options.overall) ? options.overall : 2 * Math.PI;
           return {
             from: {
               startAngle: element.getGraphicAttribute("startAngle", !0),
@@ -48001,7 +48055,7 @@
             }
           };
         }
-        const overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0;
+        const overallValue = isNumber$1(null == options ? void 0 : options.overall) ? options.overall : 0;
         return {
           from: {
             startAngle: element.getGraphicAttribute("startAngle", !0),
@@ -48033,7 +48087,7 @@
         }
       },
       growRadiusInOverall = (element, options, animationParameters) => {
-        const overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0;
+        const overallValue = isNumber$1(null == options ? void 0 : options.overall) ? options.overall : 0;
         return {
           from: {
             innerRadius: overallValue,
@@ -48065,7 +48119,7 @@
         }
       },
       growRadiusOutOverall = (element, options, animationParameters) => {
-        const overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0;
+        const overallValue = isNumber$1(null == options ? void 0 : options.overall) ? options.overall : 0;
         return {
           from: {
             innerRadius: element.getGraphicAttribute("innerRadius", !0),
@@ -48504,7 +48558,7 @@
         return [{
           channels: ["size", "padding"],
           transform: (graphicAttributes, nextAttrs, storedAttrs) => {
-            if (isNumber$2(storedAttrs.padding) && storedAttrs.padding > 0) graphicAttributes.size = isArray$1(storedAttrs.size) ? storedAttrs.size.map(entry => Math.max(entry - storedAttrs.padding, 1)) : Math.max(storedAttrs.size - storedAttrs.padding, 1);else if (isArray$1(storedAttrs.padding) && 2 === storedAttrs.padding.length) {
+            if (isNumber$1(storedAttrs.padding) && storedAttrs.padding > 0) graphicAttributes.size = isArray$1(storedAttrs.size) ? storedAttrs.size.map(entry => Math.max(entry - storedAttrs.padding, 1)) : Math.max(storedAttrs.size - storedAttrs.padding, 1);else if (isArray$1(storedAttrs.padding) && 2 === storedAttrs.padding.length) {
               const arraySize = isArray$1(storedAttrs.size) ? storedAttrs.size : [storedAttrs.size, storedAttrs.size];
               graphicAttributes.size = [Math.max(arraySize[0] - storedAttrs.padding[0], 1), Math.max(arraySize[1] - storedAttrs.padding[1], 1)];
             } else graphicAttributes.size = storedAttrs.size;
@@ -49146,7 +49200,7 @@
     }
     function calcLayoutNumber(v, size, callOp) {
         var _a, _b;
-        if (isNumber$2(v)) {
+        if (isNumber$1(v)) {
             return v;
         }
         if (isPercent(v)) {
@@ -49168,7 +49222,7 @@
             left: 0,
             right: 0
         };
-        if (Object.values(paddingSpec).every(value => isNumber$2(value))) {
+        if (Object.values(paddingSpec).every(value => isNumber$1(value))) {
             result.top = (_a = paddingSpec.top) !== null && _a !== void 0 ? _a : 0;
             result.right = (_b = paddingSpec.right) !== null && _b !== void 0 ? _b : 0;
             result.bottom = (_c = paddingSpec.bottom) !== null && _c !== void 0 ? _c : 0;
@@ -49218,7 +49272,7 @@
             }
             return result;
         }
-        if (isNumber$2(spec) || isPercent(spec) || isFunction$1(spec) || isPercentOffset(spec)) {
+        if (isNumber$1(spec) || isPercent(spec) || isFunction$1(spec) || isPercentOffset(spec)) {
             result.top = result.left = result.bottom = result.right = spec;
             return result;
         }
@@ -51371,7 +51425,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         else if (typeof value === 'object') {
             result = {};
         }
-        else if (isBoolean$1(value) || isNumber$2(value) || isString$1(value)) {
+        else if (isBoolean$1(value) || isNumber$1(value) || isString$1(value)) {
             result = value;
         }
         else if (isDate$1(value)) {
@@ -56558,7 +56612,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initSpecStyle(spec, this.stateStyle, key);
         }
         convertAngleToRadian(styleConverter) {
-            if (isNumber$2(styleConverter)) {
+            if (isNumber$1(styleConverter)) {
                 return degreeToRadian(styleConverter);
             }
             else if (styleConverter.scale) {
@@ -57419,11 +57473,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._specInfo = (_a = this._chartSpecTransformer) === null || _a === void 0 ? void 0 : _a.createSpecInfo(this._spec);
         }
         _initChart(spec) {
-            var _a, _b;
+            var _a, _b, _c;
             if (!this._compiler) {
                 (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError('compiler is not initialized');
                 return;
             }
+            if (this._chart) {
+                (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError('chart is already initialized');
+                return;
+            }
             const chart = Factory.createChart(spec.type, spec, {
                 type: spec.type,
                 globalInstance: this,
@@ -57445,7 +57503,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 disableTriggerEvent: this._option.disableTriggerEvent === true
             });
             if (!chart) {
-                (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError('init chart fail');
+                (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError('init chart fail');
                 return;
             }
             this._chart = chart;
@@ -58736,7 +58794,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerChartPlugin(MediaQuery);
     };
 
-    const version = "1.9.1";
+    const version = "1.9.2";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -59360,13 +59418,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getDefaultSpecFromChart(chartSpec) {
             var _a;
             const spec = (_a = super._getDefaultSpecFromChart(chartSpec)) !== null && _a !== void 0 ? _a : {};
-            const { outerRadius, innerRadius } = chartSpec;
+            const { outerRadius, innerRadius, direction } = chartSpec;
             if (isValid$1(outerRadius)) {
                 spec.outerRadius = outerRadius;
             }
             if (isValid$1(innerRadius)) {
                 spec.innerRadius = innerRadius;
             }
+            if (isValid$1(direction)) {
+                spec.direction = direction;
+            }
             return Object.keys(spec).length > 0 ? spec : undefined;
         }
     }
@@ -60612,41 +60673,46 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getStackGroupFields() {
             return this.getGroupFields();
         }
+        getStackValue() {
+            var _a, _b;
+            const axisId = (_a = (this.direction === "horizontal" ? this.getXAxisHelper() : this.getYAxisHelper())) === null || _a === void 0 ? void 0 : _a.getAxisId();
+            return (_b = this._spec.stackValue) !== null && _b !== void 0 ? _b : `${PREFIX}_series_${this.type}_${axisId}`;
+        }
         getStackValueField() {
-            if (this.direction === "vertical") {
-                return array(this._spec.yField)[0];
+            if (this.direction === "horizontal") {
+                return array(this._spec.xField)[0];
             }
-            return array(this._spec.xField)[0];
+            return array(this._spec.yField)[0];
         }
         setValueFieldToStack() {
-            if (this.direction === "vertical") {
-                this.setFieldY(STACK_FIELD_END);
-                this.setFieldY2(STACK_FIELD_START);
-            }
-            else {
+            if (this.direction === "horizontal") {
                 this.setFieldX(STACK_FIELD_END);
                 this.setFieldX2(STACK_FIELD_START);
             }
+            else {
+                this.setFieldY(STACK_FIELD_END);
+                this.setFieldY2(STACK_FIELD_START);
+            }
         }
         setValueFieldToPercent() {
-            if (this.direction === "vertical") {
-                this.setFieldY(STACK_FIELD_END_PERCENT);
-                this.setFieldY2(STACK_FIELD_START_PERCENT);
-            }
-            else {
+            if (this.direction === "horizontal") {
                 this.setFieldX(STACK_FIELD_END_PERCENT);
                 this.setFieldX2(STACK_FIELD_START_PERCENT);
             }
+            else {
+                this.setFieldY(STACK_FIELD_END_PERCENT);
+                this.setFieldY2(STACK_FIELD_START_PERCENT);
+            }
         }
         setValueFieldToStackOffsetSilhouette() {
-            if (this.direction === "vertical") {
-                this.setFieldY(STACK_FIELD_END_OffsetSilhouette);
-                this.setFieldY2(STACK_FIELD_START_OffsetSilhouette);
-            }
-            else {
+            if (this.direction === "horizontal") {
                 this.setFieldX(STACK_FIELD_END_OffsetSilhouette);
                 this.setFieldX2(STACK_FIELD_START_OffsetSilhouette);
             }
+            else {
+                this.setFieldY(STACK_FIELD_END_OffsetSilhouette);
+                this.setFieldY2(STACK_FIELD_START_OffsetSilhouette);
+            }
         }
         onXAxisHelperUpdate() {
             this.onMarkPositionUpdate();
@@ -60820,22 +60886,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._buildScaleConfig();
         }
         getDimensionField() {
-            if (this._direction === "vertical") {
-                return this._specXField;
+            if (this._direction === "horizontal") {
+                return this._specYField;
             }
-            return this._specYField;
+            return this._specXField;
         }
         getDimensionContinuousField() {
-            if (this._direction === "vertical") {
-                return [this.fieldX[0], this.fieldX2];
+            if (this._direction === "horizontal") {
+                return [this.fieldY[0], this.fieldY2];
             }
-            return [this.fieldY[0], this.fieldY2];
+            return [this.fieldX[0], this.fieldX2];
         }
         getMeasureField() {
-            if (this._direction === "vertical") {
-                return this._specYField;
+            if (this._direction === "horizontal") {
+                return this._specXField;
             }
-            return this._specXField;
+            return this._specYField;
         }
         viewDataUpdate(d) {
             super.viewDataUpdate(d);
@@ -60875,9 +60941,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const fieldsX = this._fieldX;
                 samplingTrans.push({
                     type: 'sampling',
-                    size: this._direction === "vertical" ? width : height,
+                    size: this._direction === "horizontal" ? height : width,
                     factor: this._spec.samplingFactor,
-                    yfield: this._direction === "vertical" ? fieldsY[0] : fieldsX[0],
+                    yfield: this._direction === "horizontal" ? fieldsX[0] : fieldsY[0],
                     groupBy: this._seriesField,
                     mode: this._spec.sampling
                 });
@@ -60941,9 +61007,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 else {
                     const userCurveType = areaCurveType !== null && areaCurveType !== void 0 ? areaCurveType : (_b = (_a = this.getSpec().line) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.curveType;
                     const curveType = userCurveType === DEFAULT_SMOOTH_INTERPOLATE
-                        ? direction === "vertical"
-                            ? 'monotoneX'
-                            : 'monotoneY'
+                        ? direction === "horizontal"
+                            ? 'monotoneY'
+                            : 'monotoneX'
                         : userCurveType;
                     this.setMarkStyle(lineMark, {
                         curveType
@@ -63198,33 +63264,33 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d, _e;
             const userCurveType = ((_c = (_b = (_a = this.getSpec().area) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.curveType) !== null && _c !== void 0 ? _c : (_e = (_d = this.getSpec().line) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.curveType);
             const curveType = userCurveType === DEFAULT_SMOOTH_INTERPOLATE
-                ? this._direction === "vertical"
-                    ? 'monotoneX'
-                    : 'monotoneY'
+                ? this._direction === "horizontal"
+                    ? 'monotoneY'
+                    : 'monotoneX'
                 : userCurveType;
             const areaMark = this._areaMark;
             if (areaMark) {
-                if (this._direction === "vertical") {
+                if (this._direction === "horizontal") {
                     this.setMarkStyle(this._areaMark, {
                         x: this.dataToPositionX.bind(this),
-                        y1: (datum) => {
+                        x1: (datum) => {
                             var _a, _b;
-                            return valueInScaleRange(this.dataToPositionY1(datum), (_b = (_a = this._yAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0));
+                            return valueInScaleRange(this.dataToPositionX1(datum), (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0));
                         },
                         y: this.dataToPositionY.bind(this),
-                        z: this._fieldZ ? this.dataToPositionZ.bind(this) : null
+                        z: this._fieldZ ? this.dataToPositionZ.bind(this) : null,
+                        orient: this._direction
                     }, 'normal', exports.AttributeLevel.Series);
                 }
                 else {
                     this.setMarkStyle(this._areaMark, {
                         x: this.dataToPositionX.bind(this),
-                        x1: (datum) => {
+                        y1: (datum) => {
                             var _a, _b;
-                            return valueInScaleRange(this.dataToPositionX1(datum), (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0));
+                            return valueInScaleRange(this.dataToPositionY1(datum), (_b = (_a = this._yAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0));
                         },
                         y: this.dataToPositionY.bind(this),
-                        z: this._fieldZ ? this.dataToPositionZ.bind(this) : null,
-                        orient: this._direction
+                        z: this._fieldZ ? this.dataToPositionZ.bind(this) : null
                     }, 'normal', exports.AttributeLevel.Series);
                 }
                 this.setMarkStyle(areaMark, {
@@ -63844,30 +63910,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d;
             const xScale = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
             const yScale = (_d = (_c = this._yAxisHelper) === null || _c === void 0 ? void 0 : _c.getScale) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
-            if (this.direction === "vertical") {
-                this.setMarkStyle(this._barMark, {
-                    x: (datum) => valueInScaleRange(this.dataToPositionX(datum), xScale),
-                    x1: (datum) => valueInScaleRange(this.dataToPositionX1(datum), xScale),
-                    y: (datum, ctx, opt, dataView) => {
-                        if (this._shouldDoPreCalculate()) {
-                            this._calculateStackRectPosition(true);
-                            return datum[RECT_Y];
-                        }
-                        if (this._spec.barMinHeight) {
-                            return this._calculateRectPosition(datum, true);
-                        }
-                        return valueInScaleRange(this.dataToPositionY(datum), yScale);
-                    },
-                    y1: (datum) => {
-                        if (this._shouldDoPreCalculate()) {
-                            this._calculateStackRectPosition(true);
-                            return datum[RECT_Y1];
-                        }
-                        return valueInScaleRange(this.dataToPositionY1(datum), yScale);
-                    }
-                }, 'normal', exports.AttributeLevel.Series);
-            }
-            else {
+            if (this.direction === "horizontal") {
                 this.setMarkStyle(this._barMark, {
                     x: (datum) => {
                         if (this._shouldDoPreCalculate()) {
@@ -63890,42 +63933,65 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     y1: (datum) => valueInScaleRange(this.dataToPositionY1(datum), yScale)
                 }, 'normal', exports.AttributeLevel.Series);
             }
+            else {
+                this.setMarkStyle(this._barMark, {
+                    x: (datum) => valueInScaleRange(this.dataToPositionX(datum), xScale),
+                    x1: (datum) => valueInScaleRange(this.dataToPositionX1(datum), xScale),
+                    y: (datum, ctx, opt, dataView) => {
+                        if (this._shouldDoPreCalculate()) {
+                            this._calculateStackRectPosition(true);
+                            return datum[RECT_Y];
+                        }
+                        if (this._spec.barMinHeight) {
+                            return this._calculateRectPosition(datum, true);
+                        }
+                        return valueInScaleRange(this.dataToPositionY(datum), yScale);
+                    },
+                    y1: (datum) => {
+                        if (this._shouldDoPreCalculate()) {
+                            this._calculateStackRectPosition(true);
+                            return datum[RECT_Y1];
+                        }
+                        return valueInScaleRange(this.dataToPositionY1(datum), yScale);
+                    }
+                }, 'normal', exports.AttributeLevel.Series);
+            }
             this._initLinearBarBackgroundMarkStyle();
         }
         _initLinearBarBackgroundMarkStyle() {
             var _a, _b, _c, _d;
             const xScale = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
             const yScale = (_d = (_c = this._yAxisHelper) === null || _c === void 0 ? void 0 : _c.getScale) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
-            if (this.direction === "vertical") {
+            if (this.direction === "horizontal") {
                 this.setMarkStyle(this._barBackgroundMark, {
-                    x: (datum) => valueInScaleRange(this.dataToPositionX(datum), xScale),
-                    x1: (datum) => valueInScaleRange(this.dataToPositionX1(datum), xScale),
-                    y: () => {
-                        const range = yScale.range();
+                    x: () => {
+                        const range = xScale.range();
                         const min = Math.min(range[0], range[range.length - 1]);
                         return min;
                     },
-                    y1: () => {
-                        const range = yScale.range();
+                    x1: () => {
+                        const range = xScale.range();
                         const max = Math.max(range[0], range[range.length - 1]);
                         return max;
-                    }
+                    },
+                    y: (datum) => valueInScaleRange(this.dataToPositionY(datum), yScale),
+                    y1: (datum) => valueInScaleRange(this.dataToPositionY1(datum), yScale)
                 }, 'normal', exports.AttributeLevel.Series);
             }
             else {
                 this.setMarkStyle(this._barBackgroundMark, {
-                    x: () => {
-                        const range = xScale.range();
+                    x: (datum) => valueInScaleRange(this.dataToPositionX(datum), xScale),
+                    x1: (datum) => valueInScaleRange(this.dataToPositionX1(datum), xScale),
+                    y: () => {
+                        const range = yScale.range();
                         const min = Math.min(range[0], range[range.length - 1]);
                         return min;
                     },
-                    x1: () => {
-                        const range = xScale.range();
+                    y1: () => {
+                        const range = yScale.range();
                         const max = Math.max(range[0], range[range.length - 1]);
                         return max;
-                    },
-                    y: (datum) => valueInScaleRange(this.dataToPositionY(datum), yScale),
-                    y1: (datum) => valueInScaleRange(this.dataToPositionY1(datum), yScale)
+                    }
                 }, 'normal', exports.AttributeLevel.Series);
             }
         }
@@ -64042,9 +64108,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const fieldsX = this._fieldX;
                 samplingTrans.push({
                     type: 'sampling',
-                    size: this._direction === "vertical" ? width : height,
+                    size: this._direction === "horizontal" ? height : width,
                     factor: this._spec.samplingFactor,
-                    yfield: this._direction === "vertical" ? fieldsY[0] : fieldsX[0],
+                    yfield: this._direction === "horizontal" ? fieldsX[0] : fieldsY[0],
                     groupBy: this._seriesField,
                     mode: this._spec.sampling
                 });
@@ -64280,7 +64346,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isNil$1(sizeSpec)) {
                 return SCATTER_DEFAULT_SIZE;
             }
-            if (isNumber$2(sizeSpec)) {
+            if (isNumber$1(sizeSpec)) {
                 return sizeSpec;
             }
             if (isString$1(sizeSpec) && isNumeric$1(sizeSpec)) {
@@ -64345,7 +64411,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 y: this.dataToPositionY.bind(this),
                 z: this._fieldZ ? this.dataToPositionZ.bind(this) : null,
                 fill: this.getColorAttribute(),
-                size: isNumber$2(this._size) || isFunction$1(this._size) ? this._size : SCATTER_DEFAULT_SIZE,
+                size: isNumber$1(this._size) || isFunction$1(this._size) ? this._size : SCATTER_DEFAULT_SIZE,
                 symbolType: isString$1(this._shape) || isFunction$1(this._shape) ? this._shape : SCATTER_DEFAULT_SHAPE
             }, STATE_VALUE_ENUM.STATE_NORMAL, exports.AttributeLevel.Series);
             if (isValid$1(this._sizeField) || isValid$1(this._size)) {
@@ -66718,59 +66784,59 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         totalPositionX(datum, field, pos = 0.5) {
             const { dataToPosition, getBandwidth } = this._xAxisHelper;
-            if (this._direction === "vertical") {
-                return (dataToPosition([datum[field]], {
+            if (this._direction === "horizontal") {
+                return valueInScaleRange(dataToPosition([datum[field]], {
                     bandPosition: this._bandPosition
-                }) +
-                    getBandwidth(0) * 0.5 -
-                    this._barMark.getAttribute('width', datum) * (0.5 - pos));
+                }));
             }
-            return valueInScaleRange(dataToPosition([datum[field]], {
+            return (dataToPosition([datum[field]], {
                 bandPosition: this._bandPosition
-            }));
+            }) +
+                getBandwidth(0) * 0.5 -
+                this._barMark.getAttribute('width', datum) * (0.5 - pos));
         }
         totalPositionY(datum, field, pos = 0.5) {
             const { dataToPosition, getBandwidth } = this._yAxisHelper;
-            if (this._direction === "vertical") {
-                return valueInScaleRange(dataToPosition([datum[field]], {
+            if (this._direction === "horizontal") {
+                return (dataToPosition([datum[field]], {
                     bandPosition: this._bandPosition
-                }));
+                }) +
+                    getBandwidth(0) * 0.5 -
+                    this._barMark.getAttribute('height', datum) * (0.5 - pos));
             }
-            return (dataToPosition([datum[field]], {
+            return valueInScaleRange(dataToPosition([datum[field]], {
                 bandPosition: this._bandPosition
-            }) +
-                getBandwidth(0) * 0.5 -
-                this._barMark.getAttribute('height', datum) * (0.5 - pos));
+            }));
         }
         initMarkStyle() {
             super.initMarkStyle();
             if (this._leaderLineMark) {
-                if (this._direction === "vertical") {
+                if (this._direction === "horizontal") {
                     this.setMarkStyle(this._leaderLineMark, {
                         visible: (datum) => !isNil$1(datum.lastIndex),
-                        x: (datum) => {
+                        x: (datum) => this.totalPositionX(datum, 'lastEnd', 0),
+                        x1: (datum) => this.totalPositionX(datum, datum.isTotal ? 'end' : 'start', 0),
+                        y: (datum) => {
                             if (!datum.lastIndex) {
                                 return 0;
                             }
-                            return this.totalPositionX(datum, 'lastIndex', 1);
+                            return this.totalPositionY(datum, 'lastIndex', 1);
                         },
-                        x1: (datum) => this.totalPositionX(datum, 'index', 0),
-                        y: (datum) => this.totalPositionY(datum, 'lastEnd', 0),
-                        y1: (datum) => this.totalPositionY(datum, datum.isTotal ? 'end' : 'start', 0)
+                        y1: (datum) => this.totalPositionY(datum, 'index', 0)
                     }, 'normal', exports.AttributeLevel.Series);
                 }
                 else {
                     this.setMarkStyle(this._leaderLineMark, {
                         visible: (datum) => !isNil$1(datum.lastIndex),
-                        x: (datum) => this.totalPositionX(datum, 'lastEnd', 0),
-                        x1: (datum) => this.totalPositionX(datum, datum.isTotal ? 'end' : 'start', 0),
-                        y: (datum) => {
+                        x: (datum) => {
                             if (!datum.lastIndex) {
                                 return 0;
                             }
-                            return this.totalPositionY(datum, 'lastIndex', 1);
+                            return this.totalPositionX(datum, 'lastIndex', 1);
                         },
-                        y1: (datum) => this.totalPositionY(datum, 'index', 0)
+                        x1: (datum) => this.totalPositionX(datum, 'index', 0),
+                        y: (datum) => this.totalPositionY(datum, 'lastEnd', 0),
+                        y1: (datum) => this.totalPositionY(datum, datum.isTotal ? 'end' : 'start', 0)
                     }, 'normal', exports.AttributeLevel.Series);
                 }
             }
@@ -67117,15 +67183,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     minMaxFillOpacity: this._shaftFillOpacity,
                     stroke: (_b = this._strokeColor) !== null && _b !== void 0 ? _b : (this._shaftShape === 'line' ? this.getColorAttribute() : DEFAULT_STROKE_COLOR)
                 };
-                const boxPlotMarkStyles = this._direction === "vertical"
-                    ? Object.assign(Object.assign({ x: this.dataToPositionX.bind(this) }, commonBoxplotStyles), { boxWidth: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, ruleWidth: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, q1q3Width: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, minMaxWidth: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); } }) : Object.assign(Object.assign({ y: this.dataToPositionY.bind(this) }, commonBoxplotStyles), { boxHeight: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, ruleHeight: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, q1q3Height: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, minMaxHeight: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); } });
+                const boxPlotMarkStyles = this._direction === "horizontal"
+                    ? Object.assign(Object.assign({ y: this.dataToPositionY.bind(this) }, commonBoxplotStyles), { boxHeight: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, ruleHeight: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, q1q3Height: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, minMaxHeight: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); } }) : Object.assign(Object.assign({ x: this.dataToPositionX.bind(this) }, commonBoxplotStyles), { boxWidth: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, ruleWidth: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, q1q3Width: () => { var _a; return (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); }, minMaxWidth: () => { var _a; return (_a = this._shaftWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth(); } });
                 this.setMarkStyle(boxPlotMark, boxPlotMarkStyles, STATE_VALUE_ENUM.STATE_NORMAL, exports.AttributeLevel.Series);
             }
             const outlierMark = this._outlierMark;
             if (outlierMark) {
                 this.setMarkStyle(outlierMark, {
                     fill: (_d = (_c = this._outliersStyle) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.getColorAttribute(),
-                    size: isNumber$2((_e = this._outliersStyle) === null || _e === void 0 ? void 0 : _e.size) ? this._outliersStyle.size : DEFAULT_OUTLIER_SIZE,
+                    size: isNumber$1((_e = this._outliersStyle) === null || _e === void 0 ? void 0 : _e.size) ? this._outliersStyle.size : DEFAULT_OUTLIER_SIZE,
                     symbolType: 'circle'
                 }, STATE_VALUE_ENUM.STATE_NORMAL, exports.AttributeLevel.Series);
             }
@@ -67133,7 +67199,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initBoxPlotMarkStyle() {
             var _a, _b;
             const boxPlotMark = this._boxPlotMark;
-            const axisHelper = this._direction === "vertical" ? this._yAxisHelper : this._xAxisHelper;
+            const axisHelper = this._direction === "horizontal" ? this._xAxisHelper : this._yAxisHelper;
             if (boxPlotMark && axisHelper) {
                 const { dataToPosition } = axisHelper;
                 const scale = (_a = axisHelper === null || axisHelper === void 0 ? void 0 : axisHelper.getScale) === null || _a === void 0 ? void 0 : _a.call(axisHelper, 0);
@@ -67159,16 +67225,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (outlierMark && axisHelper) {
                 const { dataToPosition } = axisHelper;
                 const scale = (_b = axisHelper === null || axisHelper === void 0 ? void 0 : axisHelper.getScale) === null || _b === void 0 ? void 0 : _b.call(axisHelper, 0);
-                const outlierMarkPositionChannel = this._direction === "vertical"
+                const outlierMarkPositionChannel = this._direction === "horizontal"
                     ? {
-                        x: this.dataToPositionX.bind(this),
-                        y: (datum) => valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, BOX_PLOT_OUTLIER_VALUE_FIELD), {
+                        y: this.dataToPositionY.bind(this),
+                        x: (datum) => valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, BOX_PLOT_OUTLIER_VALUE_FIELD), {
                             bandPosition: this._bandPosition
                         }), scale)
                     }
                     : {
-                        y: this.dataToPositionY.bind(this),
-                        x: (datum) => valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, BOX_PLOT_OUTLIER_VALUE_FIELD), {
+                        x: this.dataToPositionX.bind(this),
+                        y: (datum) => valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, BOX_PLOT_OUTLIER_VALUE_FIELD), {
                             bandPosition: this._bandPosition
                         }), scale)
                     };
@@ -67190,7 +67256,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             outlierDataView.transform({
                 type: 'foldOutlierData',
                 options: {
-                    dimensionField: this._direction === "vertical" ? this._fieldX : this._fieldY,
+                    dimensionField: this._direction === "horizontal" ? this._fieldY : this._fieldX,
                     outliersField: this._outliersField
                 }
             });
@@ -67211,8 +67277,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (this._autoBoxWidth) {
                 return this._autoBoxWidth;
             }
-            const bandAxisHelper = this._direction === "vertical" ? this._xAxisHelper : this._yAxisHelper;
-            const xField = this._direction === "vertical" ? this._fieldX : this._fieldY;
+            const bandAxisHelper = this._direction === "horizontal" ? this._yAxisHelper : this._xAxisHelper;
+            const xField = this._direction === "horizontal" ? this._fieldY : this._fieldX;
             const innerBandWidth = bandAxisHelper.getBandwidth(xField.length - 1);
             const autoBoxWidth = innerBandWidth / xField.length;
             this._autoBoxWidth = autoBoxWidth;
@@ -67790,41 +67856,41 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d, _e;
             const userCurveType = (_c = (_b = (_a = this.getSpec().area) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.curveType) !== null && _c !== void 0 ? _c : (_e = (_d = this.getSpec().line) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.curveType;
             const curveType = userCurveType === DEFAULT_SMOOTH_INTERPOLATE
-                ? this._direction === "vertical"
-                    ? 'monotoneX'
-                    : 'monotoneY'
+                ? this._direction === "horizontal"
+                    ? 'monotoneY'
+                    : 'monotoneX'
                 : userCurveType;
             const areaMark = this._areaMark;
             if (areaMark) {
-                if (this._direction === "vertical") {
+                if (this._direction === "horizontal") {
                     this.setMarkStyle(this._areaMark, {
                         x: this.dataToPositionX.bind(this),
-                        y1: (datum) => {
-                            if (!this._yAxisHelper) {
+                        x1: (datum) => {
+                            if (!this._xAxisHelper) {
                                 return Number.NaN;
                             }
-                            const { dataToPosition } = this._yAxisHelper;
-                            return dataToPosition(this.getDatumPositionValues(datum, this._spec.yField[1]), {
+                            const { dataToPosition } = this._xAxisHelper;
+                            return dataToPosition(this.getDatumPositionValues(datum, this._spec.xField[1]), {
                                 bandPosition: this._bandPosition
                             });
                         },
-                        y: this.dataToPositionY.bind(this)
+                        y: this.dataToPositionY.bind(this),
+                        orient: this._direction
                     }, 'normal', exports.AttributeLevel.Series);
                 }
                 else {
                     this.setMarkStyle(this._areaMark, {
                         x: this.dataToPositionX.bind(this),
-                        x1: (datum) => {
-                            if (!this._xAxisHelper) {
+                        y1: (datum) => {
+                            if (!this._yAxisHelper) {
                                 return Number.NaN;
                             }
-                            const { dataToPosition } = this._xAxisHelper;
-                            return dataToPosition(this.getDatumPositionValues(datum, this._spec.xField[1]), {
+                            const { dataToPosition } = this._yAxisHelper;
+                            return dataToPosition(this.getDatumPositionValues(datum, this._spec.yField[1]), {
                                 bandPosition: this._bandPosition
                             });
                         },
-                        y: this.dataToPositionY.bind(this),
-                        orient: this._direction
+                        y: this.dataToPositionY.bind(this)
                     }, 'normal', exports.AttributeLevel.Series);
                 }
                 this.setMarkStyle(areaMark, {
@@ -69041,11 +69107,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         polarPointInterpolation(pointA, pointB, ratio) {
             const polarPointA0 = this._pointToCoord(pointA);
             const polarPointA1 = this._pointToCoord({ x: pointA.x1, y: pointA.y1 });
+            const angleA0 = normalizeAngle$1(polarPointA0.angle);
+            const angleA1 = normalizeAngle$1(polarPointA1.angle);
             const polarPointB0 = this._pointToCoord(pointB);
             const polarPointB1 = this._pointToCoord({ x: pointB.x1, y: pointB.y1 });
-            const angle0 = polarPointA0.angle + (polarPointB0.angle - polarPointA0.angle) * ratio;
+            const angleB0 = normalizeAngle$1(polarPointB0.angle);
+            const angleB1 = normalizeAngle$1(polarPointB1.angle);
+            const angle0 = angleA0 + (angleB0 - angleA0) * ratio;
             const radius0 = polarPointA0.radius + (polarPointB0.radius - polarPointA0.radius) * ratio;
-            const angle1 = polarPointA1.angle + (polarPointB1.angle - polarPointA1.angle) * ratio;
+            const angle1 = angleA1 + (angleB1 - angleA1) * ratio;
             const radius1 = polarPointA1.radius + (polarPointB1.radius - polarPointA1.radius) * ratio;
             const { x, y } = this._coordToPoint({ angle: angle0, radius: radius0 });
             const { x: x1, y: y1 } = this._coordToPoint({ angle: angle1, radius: radius1 });
@@ -72071,7 +72141,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         postProjection = options.postProjection;
       let fontSize = options.fontSize ? field$1(options.fontSize) : 14;
       const fontSizeRange = options.fontSizeRange;
-      if (fontSizeRange && !isNumber$2(fontSize)) {
+      if (fontSizeRange && !isNumber$1(fontSize)) {
         const fsize = fontSize,
           fontSizeSqrtScale = generateSqrtScale(extent$1(fsize, data), fontSizeRange);
         fontSize = datum => fontSizeSqrtScale(fsize(datum));
@@ -72109,7 +72179,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         progressive: layout
       } : layout.output();
     };
-    const field$1 = option => isString$1(option) || isNumber$2(option) || isFunction$1(option) ? option : datum => datum[option.field],
+    const field$1 = option => isString$1(option) || isNumber$1(option) || isFunction$1(option) ? option : datum => datum[option.field],
       sqrt = x => x < 0 ? -Math.sqrt(-x) : Math.sqrt(x),
       generateSqrtScale = (domain, range) => {
         if (domain[0] === domain[1]) return datum => range[0];
@@ -73832,7 +73902,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _computeLabelLimit(datum, labelSpec) {
             const limit = labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.limit;
-            if (isNumber$2(limit)) {
+            if (isNumber$1(limit)) {
                 return limit;
             }
             const points = this.getPoints(datum);
@@ -74510,11 +74580,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       }
       _filterChildren(node) {
         const maxDepth = this.options.maxDepth;
-        if (isNumber$2(maxDepth) && maxDepth >= 0 && node.depth >= maxDepth) return !1;
+        if (isNumber$1(maxDepth) && maxDepth >= 0 && node.depth >= maxDepth) return !1;
         const minChildrenVisibleArea = this.options.minChildrenVisibleArea;
-        if (isNumber$2(minChildrenVisibleArea) && Math.abs((node.x1 - node.x0) * (node.y1 - node.y0)) < minChildrenVisibleArea) return !1;
+        if (isNumber$1(minChildrenVisibleArea) && Math.abs((node.x1 - node.x0) * (node.y1 - node.y0)) < minChildrenVisibleArea) return !1;
         const minChildrenVisibleSize = this.options.minChildrenVisibleSize;
-        return !isNumber$2(minChildrenVisibleSize) || !(Math.abs(node.x1 - node.x0) < minChildrenVisibleSize || Math.abs(node.y1 - node.y0) < minChildrenVisibleSize);
+        return !isNumber$1(minChildrenVisibleSize) || !(Math.abs(node.x1 - node.x0) < minChildrenVisibleSize || Math.abs(node.y1 - node.y0) < minChildrenVisibleSize);
       }
       _layout(parent) {
         var _a;
@@ -74874,7 +74944,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         this.options = options;
         const keyOption = null == options ? void 0 : options.nodeKey,
           keyFunc = isFunction$1(keyOption) ? keyOption : keyOption ? field$3(keyOption) : null;
-        this._getNodeKey = keyFunc, this._getPadding = isNumber$2(null == options ? void 0 : options.padding) ? node => options.padding : isArray$1(null == options ? void 0 : options.padding) ? node => {
+        this._getNodeKey = keyFunc, this._getPadding = isNumber$1(null == options ? void 0 : options.padding) ? node => options.padding : isArray$1(null == options ? void 0 : options.padding) ? node => {
           var _a;
           return null !== (_a = options.padding[node.depth + 1]) && void 0 !== _a ? _a : 0;
         } : () => 0, this._maxDepth = -1;
@@ -75908,13 +75978,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           const ratio = clamp$1(parseFloat(nodeWidthOption.replace("%", "")) / 100, 0, 1);
           let stepWidth = width / (this._maxDepth - 1 + ratio);
           minStepWidth > 0 && (stepWidth = Math.max(minStepWidth, stepWidth)), nodeWidth = stepWidth * ratio, linkWidth = stepWidth * (1 - ratio), isEvenWidth = !0;
-        } else if (isNumber$2(nodeWidthOption)) {
-          if (nodeWidth = nodeWidthOption, isNumber$2(linkWidthOption)) linkWidth = linkWidthOption;else if (isNil$1(linkWidthOption)) {
+        } else if (isNumber$1(nodeWidthOption)) {
+          if (nodeWidth = nodeWidthOption, isNumber$1(linkWidthOption)) linkWidth = linkWidthOption;else if (isNil$1(linkWidthOption)) {
             let stepWidth = (width - nodeWidthOption) / (this._maxDepth - 1);
             minStepWidth > 0 && (stepWidth = Math.max(minStepWidth, stepWidth)), linkWidth = stepWidth - nodeWidthOption;
           }
           isEvenWidth = !0;
-        } else isFunction$1(nodeWidthOption) && isNumber$2(linkWidthOption) && (linkWidth = linkWidthOption);
+        } else isFunction$1(nodeWidthOption) && isNumber$1(linkWidthOption) && (linkWidth = linkWidthOption);
         const columns = [];
         for (let i = 0, len = nodes.length; i < len; i++) {
           const node = nodes[i];
@@ -76285,7 +76355,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         key: undefined,
                         value: (datum) => {
                             if (datum.source) {
-                                if (isNumber$2(datum.source)) {
+                                if (isNumber$1(datum.source)) {
                                     const seriesKeys = this.series.getSeriesKeys();
                                     return seriesKeys[datum.source] + ' => ' + seriesKeys[datum.target];
                                 }
@@ -78538,10 +78608,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const innerRadius = toPercent((_c = options.innerRadius) !== null && _c !== void 0 ? _c : 0, maxRadius);
         const outerRadius = toPercent(options.outerRadius, maxRadius);
         const center = [
-            isNumber$2((_d = options.center) === null || _d === void 0 ? void 0 : _d[0])
+            isNumber$1((_d = options.center) === null || _d === void 0 ? void 0 : _d[0])
                 ? options.center[0]
                 : viewBox.x0 + toPercent((_f = (_e = options.center) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : '50%', viewBox.x1 - viewBox.x0),
-            isNumber$2((_g = options.center) === null || _g === void 0 ? void 0 : _g[1])
+            isNumber$1((_g = options.center) === null || _g === void 0 ? void 0 : _g[1])
                 ? options.center[1]
                 : viewBox.y0 + toPercent((_j = (_h = options.center) === null || _h === void 0 ? void 0 : _h[1]) !== null && _j !== void 0 ? _j : '50%', viewBox.y1 - viewBox.y0)
         ];
@@ -80316,7 +80386,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             const dataFields = [spec.maxField, spec.medianField, spec.q1Field, spec.q3Field, spec.minField, spec.outliersField];
             const seriesSpec = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { boxPlot: spec.boxPlot, direction: (_a = spec.direction) !== null && _a !== void 0 ? _a : "vertical", minField: spec.minField, maxField: spec.maxField, q1Field: spec.q1Field, medianField: spec.medianField, q3Field: spec.q3Field, outliersField: spec.outliersField, outliersStyle: spec.outliersStyle });
-            seriesSpec[seriesSpec.direction === "vertical" ? 'yField' : 'xField'] = dataFields;
+            seriesSpec[seriesSpec.direction === "horizontal" ? 'xField' : 'yField'] = dataFields;
             return seriesSpec;
         }
         transformSpec(spec) {
@@ -81657,6 +81727,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         getBoundsInRect(rect) {
+            var _a;
             let result = { x1: 0, y1: 0, x2: 0, y2: 0 };
             if (!this._visible) {
                 return result;
@@ -81664,7 +81735,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._verticalLimitSize = isXAxis(this.getOrient()) ? rect.height : rect.width;
             this.setLayoutRect(rect);
             const isChanged = this.updateScaleRange();
-            if (isChanged || !isArray$1(this.getTickData().getLatestData())) {
+            if (isChanged || !isArray$1((_a = this.getTickData()) === null || _a === void 0 ? void 0 : _a.getLatestData())) {
                 this.computeData('range');
             }
             const context = { skipLayout: false };
@@ -81836,8 +81907,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return attrs;
         }
         getLabelItems(length) {
-            const tickData = this.getTickData();
-            const tickLatestData = tickData.getLatestData();
+            var _a;
+            const tickLatestData = (_a = this.getTickData()) === null || _a === void 0 ? void 0 : _a.getLatestData();
             if (tickLatestData && tickLatestData.length) {
                 return [
                     tickLatestData
@@ -82236,14 +82307,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (layerConfig.visible !== false && layerConfig.tickCount !== 0 && layerConfig.forceTickCount !== 0) {
                         const tickData = this._initTickDataSet(Object.assign(Object.assign({}, this._tickTransformOption()), layerConfig), layer);
                         tickData.target.addListener('change', this._forceLayout.bind(this));
-                        this._tickData.push(new CompilableData(this._option, tickData));
+                        const compilableData = new CompilableData(this._option, tickData);
+                        this._tickData.push(compilableData);
+                        if (!this._tickDataMap) {
+                            this._tickDataMap = {};
+                        }
+                        this._tickDataMap[layer] = compilableData;
                     }
                 }
             }
             else {
                 const tickData = this._initTickDataSet(this._tickTransformOption());
                 tickData.target.addListener('change', this._forceLayout.bind(this));
-                this._tickData = [new CompilableData(this._option, tickData)];
+                const compilableData = new CompilableData(this._option, tickData);
+                this._tickData = [compilableData];
+                this._tickDataMap = {
+                    0: compilableData
+                };
             }
         }
         dataToPosition(values, cfg = {}) {
@@ -82338,30 +82418,44 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getLabelItems(length) {
             const labelItems = [];
             let preData = [];
-            this._tickData.forEach((eachTickData, index) => {
-                const latestData = eachTickData.getLatestData();
-                if (latestData && latestData.length) {
+            this._scales.forEach((scale, index) => {
+                var _a;
+                const tickData = this._tickDataMap[index];
+                const isTickDataHaveData = (_a = tickData === null || tickData === void 0 ? void 0 : tickData.getLatestData()) === null || _a === void 0 ? void 0 : _a.length;
+                const ticks = isTickDataHaveData
+                    ? tickData.getLatestData().map((obj) => obj.value)
+                    : scale.domain();
+                if (ticks && ticks.length) {
                     if (preData && preData.length) {
                         const currentLabelItems = [];
                         const curData = [];
                         preData.forEach(value => {
-                            latestData.forEach((obj) => {
-                                const values = array(value).concat(obj.value);
+                            ticks.forEach(tick => {
+                                const values = array(value).concat(tick);
                                 curData.push(values);
-                                const axisItem = getAxisItem(obj.value, this._getNormalizedValue(values, length));
-                                currentLabelItems.push(axisItem);
+                                if (isTickDataHaveData) {
+                                    const axisItem = getAxisItem(tick, this._getNormalizedValue(values, length));
+                                    currentLabelItems.push(axisItem);
+                                }
                             });
                         });
-                        labelItems.push(currentLabelItems.filter((entry) => entry.value >= 0 && entry.value <= 1));
+                        if (isTickDataHaveData) {
+                            labelItems.push(currentLabelItems.filter((entry) => entry.value >= 0 && entry.value <= 1));
+                        }
                         preData = curData;
                     }
                     else {
-                        labelItems.push(latestData
-                            .map((obj) => {
-                            preData.push(obj.value);
-                            return getAxisItem(obj.value, this._getNormalizedValue([obj.value], length));
-                        })
-                            .filter((entry) => entry.value >= 0 && entry.value <= 1));
+                        ticks.forEach(tick => {
+                            preData.push(tick);
+                        });
+                        if (isTickDataHaveData) {
+                            labelItems.push(tickData
+                                .getLatestData()
+                                .map((obj) => {
+                                return getAxisItem(obj.value, this._getNormalizedValue([obj.value], length));
+                            })
+                                .filter((entry) => entry.value >= 0 && entry.value <= 1));
+                        }
                     }
                 }
             });
@@ -82531,16 +82625,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
         }
         getLabelItems(length) {
-            var _a;
+            var _a, _b;
             const items = [];
-            const tickData = this.getTickData();
-            const tickLatestData = tickData.getLatestData();
+            const tickLatestData = (_a = this.getTickData()) === null || _a === void 0 ? void 0 : _a.getLatestData();
             if (tickLatestData && tickLatestData.length) {
                 items.push(tickLatestData.map((obj) => {
                     return getAxisItem(obj.value, this._getNormalizedValue([obj.value], length));
                 }));
             }
-            const layerLatestData = (_a = this._layerTickData) === null || _a === void 0 ? void 0 : _a.getLatestData();
+            const layerLatestData = (_b = this._layerTickData) === null || _b === void 0 ? void 0 : _b.getLatestData();
             if (layerLatestData && layerLatestData.length) {
                 items.push(layerLatestData.map((obj) => {
                     return getAxisItem(obj.value, this._getNormalizedValue([obj.value], length));
@@ -82940,8 +83033,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return length === 0 ? 0 : (this.dataToPosition(values) - this._getStartValue()) / length;
         }
         getLabelItems(length) {
-            const tickData = this.getTickData();
-            const tickLatestData = tickData.getLatestData();
+            var _a;
+            const tickLatestData = (_a = this.getTickData()) === null || _a === void 0 ? void 0 : _a.getLatestData();
             if (tickLatestData && tickLatestData.length) {
                 return [
                     tickLatestData.map((obj) => {
@@ -84995,7 +85088,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._handleClickInEvent = (params) => {
                 this._handleIn(params);
                 this._clickLock = this._hasActive && this._spec.lockAfterClick;
-                if (this._clickLock && isNumber$2(this.triggerOff)) {
+                if (this._clickLock && isNumber$1(this.triggerOff)) {
                     if (this._timer) {
                         clearTimeout(this._timer);
                     }
@@ -85210,7 +85303,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (trigger) {
                 this.trigger = trigger;
             }
-            if (triggerOff === 'none' || (isNumber$2(triggerOff) && triggerOff > 0)) {
+            if (triggerOff === 'none' || (isNumber$1(triggerOff) && triggerOff > 0)) {
                 this.triggerOff = triggerOff;
             }
             if (labelZIndex !== undefined) {
@@ -85234,7 +85327,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const _d = style, { strokeOpacity, fillOpacity, opacity, stroke, fill, lineWidth } = _d, restStyle = __rest$7(_d, ["strokeOpacity", "fillOpacity", "opacity", "stroke", "fill", "lineWidth"]);
                 const isLineType = hair.type === 'line';
                 let finalOpacity = isLineType ? strokeOpacity : fillOpacity;
-                if (isNumber$2(opacity)) {
+                if (isNumber$1(opacity)) {
                     finalOpacity = (finalOpacity !== null && finalOpacity !== void 0 ? finalOpacity : 1) * opacity;
                 }
                 hair.style = Object.assign({ opacity: finalOpacity, pickable: false, visible: true }, restStyle);
@@ -86275,7 +86368,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b;
             const zoomLock = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.zoomLock) !== null && _b !== void 0 ? _b : false;
             if (zoomLock || end - start < this._minSpan || end - start > this._maxSpan) {
-                return;
+                this._shouldChange = false;
             }
         }
         _isReverse() {
@@ -86335,6 +86428,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutType = 'none';
             this._orient = 'left';
             this._cacheVisibility = undefined;
+            this._shouldChange = true;
             this._stateField = 'x';
             this._activeRoam = true;
             this._zoomAttr = {
@@ -87150,7 +87244,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (this._visible === false) {
                 return 0;
             }
-            if (isNumber$2(this._spec.width)) {
+            if (isNumber$1(this._spec.width)) {
                 return this._spec.width;
             }
             if (this._isHorizontal) {
@@ -87162,7 +87256,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (this._visible === false) {
                 return 0;
             }
-            if (isNumber$2(this._spec.height)) {
+            if (isNumber$1(this._spec.height)) {
                 return this._spec.height;
             }
             if (this._isHorizontal) {
@@ -87224,24 +87318,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _handleChange(start, end, updateComponent, tag) {
             super._handleChange(start, end, updateComponent);
-            if (updateComponent && this._component) {
-                this._component.setStartAndEnd(start, end);
-            }
-            this._start = start;
-            this._end = end;
-            const hasChange = this._handleStateChange(this._statePointToData(start), this._statePointToData(end), tag);
-            if (hasChange) {
-                this.event.emit(exports.ChartEvent.dataZoomChange, {
-                    model: this,
-                    value: {
-                        filterData: this._filterMode !== "axis",
-                        start,
-                        end,
-                        startValue: this._startValue,
-                        endValue: this._endValue,
-                        newDomain: this._newDomain
-                    }
-                });
+            if (this._shouldChange) {
+                if (updateComponent && this._component) {
+                    this._component.setStartAndEnd(start, end);
+                }
+                this._start = start;
+                this._end = end;
+                const hasChange = this._handleStateChange(this._statePointToData(start), this._statePointToData(end), tag);
+                if (hasChange) {
+                    this.event.emit(exports.ChartEvent.dataZoomChange, {
+                        model: this,
+                        value: {
+                            filterData: this._filterMode !== "axis",
+                            start,
+                            end,
+                            startValue: this._startValue,
+                            endValue: this._endValue,
+                            newDomain: this._newDomain
+                        }
+                    });
+                }
             }
         }
         _handleDataCollectionChange() {
@@ -87373,7 +87469,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _computeWidth() {
-            if (isNumber$2(this._spec.width)) {
+            if (isNumber$1(this._spec.width)) {
                 return this._spec.width;
             }
             if (this._isHorizontal) {
@@ -87382,7 +87478,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return SCROLL_BAR_DEFAULT_SIZE;
         }
         _computeHeight() {
-            if (isNumber$2(this._spec.height)) {
+            if (isNumber$1(this._spec.height)) {
                 return this._spec.height;
             }
             if (!this._isHorizontal) {
@@ -87411,24 +87507,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _handleChange(start, end, updateComponent) {
             super._handleChange(start, end, updateComponent);
-            if (updateComponent && this._component) {
-                this._component.setAttribute('range', [start, end]);
-            }
-            this._start = start;
-            this._end = end;
-            const hasChange = this._handleStateChange(this._statePointToData(start), this._statePointToData(end));
-            if (hasChange) {
-                this.event.emit(exports.ChartEvent.scrollBarChange, {
-                    model: this,
-                    value: {
-                        filterData: this._filterMode !== "axis",
-                        start: this._start,
-                        end: this._end,
-                        startValue: this._startValue,
-                        endValue: this._endValue,
-                        newDomain: this._newDomain
-                    }
-                });
+            if (this._shouldChange) {
+                if (updateComponent && this._component) {
+                    this._component.setAttribute('range', [start, end]);
+                }
+                this._start = start;
+                this._end = end;
+                const hasChange = this._handleStateChange(this._statePointToData(start), this._statePointToData(end));
+                if (hasChange) {
+                    this.event.emit(exports.ChartEvent.scrollBarChange, {
+                        model: this,
+                        value: {
+                            filterData: this._filterMode !== "axis",
+                            start: this._start,
+                            end: this._end,
+                            startValue: this._startValue,
+                            endValue: this._endValue,
+                            newDomain: this._newDomain
+                        }
+                    });
+                }
             }
         }
         _handleDataCollectionChange() {
@@ -87807,7 +87905,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     function getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint) {
         var _a, _b;
         const { relativeSeries } = refSeries;
-        isNumber$2(datum.x) &&
+        isNumber$1(datum.x) &&
             isNeedExtendDomain(xDomain, datum.x, autoRange) &&
             ((_b = relativeSeries === null || relativeSeries === void 0 ? void 0 : (_a = relativeSeries.getXAxisHelper()).setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_xAxis_extend', datum.x));
         let x;
@@ -87822,7 +87920,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     function getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint) {
         var _a, _b;
         const { relativeSeries } = refSeries;
-        isNumber$2(datum.y) &&
+        isNumber$1(datum.y) &&
             isNeedExtendDomain(yDomain, datum.y, autoRange) &&
             ((_b = (_a = relativeSeries.getYAxisHelper()) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_yAxis_extend', datum.y));
         let y;
@@ -87927,11 +88025,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const xValue = array(datum.x);
             const yValue = array(datum.y);
             xValue.length === 1 &&
-                isNumber$2(xValue[0]) &&
+                isNumber$1(xValue[0]) &&
                 isNeedExtendDomain(xDomain, xValue[0], autoRange) &&
                 ((_b = (_a = refRelativeSeries.getXAxisHelper()) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_xAxis_extend', xValue[0]));
             yValue.length === 1 &&
-                isNumber$2(yValue[0]) &&
+                isNumber$1(yValue[0]) &&
                 isNeedExtendDomain(yDomain, yValue[0], autoRange) &&
                 ((_d = (_c = refRelativeSeries.getYAxisHelper()) === null || _c === void 0 ? void 0 : _c.setExtendDomain) === null || _d === void 0 ? void 0 : _d.call(_c, 'marker_yAxis_extend', yValue[0]));
             points.push({
@@ -89137,7 +89235,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _computeWidth(rect) {
-            if (isNumber$2(this._spec.width)) {
+            if (isNumber$1(this._spec.width)) {
                 return Math.min(rect.width, Number(this._spec.width));
             }
             if (isVertical(this._orient)) {
@@ -89146,7 +89244,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return rect.width;
         }
         _computeHeight(rect) {
-            if (isNumber$2(this._spec.height)) {
+            if (isNumber$1(this._spec.height)) {
                 this._height = this._spec.height;
                 return Math.min(rect.height, Number(this._spec.height));
             }
@@ -89282,22 +89380,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             ? (_c = series.getXAxisHelper()) === null || _c === void 0 ? void 0 : _c.isInverse()
             : (_d = series.getYAxisHelper()) === null || _d === void 0 ? void 0 : _d.isInverse();
         let position = originPosition;
-        if (isString$1(originPosition) && position !== 'inside') {
+        if (isString$1(originPosition) && originPosition === 'outside') {
             position = (data) => {
                 const { data: datum } = data;
                 const dataField = series.getMeasureField()[0];
-                if (originPosition === 'outside') {
-                    const positionMap = { vertical: ['top', 'bottom'], horizontal: ['right', 'left'] };
-                    const index = ((datum === null || datum === void 0 ? void 0 : datum[dataField]) >= 0 && isInverse) || ((datum === null || datum === void 0 ? void 0 : datum[dataField]) < 0 && !isInverse) ? 1 : 0;
-                    return positionMap[direction][index];
-                }
-                if (originPosition === 'inside-bottom') {
-                    return series.direction === 'horizontal' ? 'inside-left' : 'inside-bottom';
-                }
-                if (originPosition === 'inside-top') {
-                    return series.direction === 'horizontal' ? 'inside-right' : 'inside-top';
-                }
-                return originPosition;
+                const positionMap = { vertical: ['top', 'bottom'], horizontal: ['right', 'left'] };
+                const index = ((datum === null || datum === void 0 ? void 0 : datum[dataField]) >= 0 && isInverse) || ((datum === null || datum === void 0 ? void 0 : datum[dataField]) < 0 && !isInverse) ? 1 : 0;
+                return positionMap[direction][index];
             };
         }
         let overlap;
@@ -89380,46 +89469,38 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const datum = label.data;
                     const attribute = textAttribute(labelInfo, datum, labelSpec.formatMethod);
                     const x = (datum) => {
-                        if (series.direction === "vertical") {
-                            return series.totalPositionX(datum, 'index', 0.5);
-                        }
-                        if (pos === 'middle') {
-                            return (series.totalPositionX(datum, 'end') + series.totalPositionY(datum, 'start')) * 0.5;
-                        }
-                        else if (pos === 'max') {
-                            return series.totalPositionX(datum, datum.end >= datum.start ? 'end' : 'start') + offset;
-                        }
-                        else if (pos === 'min') {
-                            return series.totalPositionX(datum, datum.end >= datum.start ? 'start' : 'end') - offset;
-                        }
-                        return series.totalPositionX(datum, 'end') + (datum.end >= datum.start ? offset : -offset);
-                    };
-                    const y = (datum) => {
-                        if (series.direction === "vertical") {
+                        if (series.direction === "horizontal") {
                             if (pos === 'middle') {
-                                return (series.totalPositionY(datum, 'end') + series.totalPositionY(datum, 'start')) * 0.5;
+                                return (series.totalPositionX(datum, 'end') + series.totalPositionY(datum, 'start')) * 0.5;
                             }
                             else if (pos === 'max') {
-                                return series.totalPositionY(datum, datum.end >= datum.start ? 'end' : 'start') - offset;
+                                return series.totalPositionX(datum, datum.end >= datum.start ? 'end' : 'start') + offset;
                             }
                             else if (pos === 'min') {
-                                return series.totalPositionY(datum, datum.end >= datum.start ? 'start' : 'end') + offset;
+                                return series.totalPositionX(datum, datum.end >= datum.start ? 'start' : 'end') - offset;
                             }
-                            return series.totalPositionY(datum, 'end') + (datum.end >= datum.start ? -offset : offset);
+                            return series.totalPositionX(datum, 'end') + (datum.end >= datum.start ? offset : -offset);
+                        }
+                        return series.totalPositionX(datum, 'index', 0.5);
+                    };
+                    const y = (datum) => {
+                        if (series.direction === "horizontal") {
+                            return series.totalPositionY(datum, 'index', 0.5);
+                        }
+                        if (pos === 'middle') {
+                            return (series.totalPositionY(datum, 'end') + series.totalPositionY(datum, 'start')) * 0.5;
+                        }
+                        else if (pos === 'max') {
+                            return series.totalPositionY(datum, datum.end >= datum.start ? 'end' : 'start') - offset;
                         }
-                        return series.totalPositionY(datum, 'index', 0.5);
+                        else if (pos === 'min') {
+                            return series.totalPositionY(datum, datum.end >= datum.start ? 'start' : 'end') + offset;
+                        }
+                        return series.totalPositionY(datum, 'end') + (datum.end >= datum.start ? -offset : offset);
                     };
                     attribute.x = x(datum);
                     attribute.y = y(datum);
-                    if (series.direction === "vertical") {
-                        attribute.textBaseline =
-                            pos === 'middle'
-                                ? pos
-                                : (pos === 'withChange' && datum.end - datum.start >= 0) || pos === 'max'
-                                    ? 'bottom'
-                                    : 'top';
-                    }
-                    else {
+                    if (series.direction === "horizontal") {
                         attribute.textAlign =
                             pos === 'middle'
                                 ? 'center'
@@ -89427,6 +89508,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                     ? 'left'
                                     : 'right';
                     }
+                    else {
+                        attribute.textBaseline =
+                            pos === 'middle'
+                                ? pos
+                                : (pos === 'withChange' && datum.end - datum.start >= 0) || pos === 'max'
+                                    ? 'bottom'
+                                    : 'top';
+                    }
                     return createText(Object.assign(Object.assign({}, attribute), { id: label.id }));
                 });
             },
@@ -91635,12 +91724,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const getActualTooltipPositionValue = (position, event) => {
         let result;
         if (isValid$1(position)) {
-            if (isNumber$2(position)) {
+            if (isNumber$1(position)) {
                 result = position;
             }
             else if (isFunction$1(position)) {
                 const tooltipPosition = position(event);
-                if (isNumber$2(tooltipPosition)) {
+                if (isNumber$1(tooltipPosition)) {
                     result = tooltipPosition;
                 }
             }
@@ -92637,7 +92726,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _throttle(callback) {
             const tooltipSpec = this._component.getSpec();
             let wait;
-            if (isNumber$2(tooltipSpec.throttleInterval)) {
+            if (isNumber$1(tooltipSpec.throttleInterval)) {
                 wait = tooltipSpec.throttleInterval;
             }
             else {
@@ -92656,14 +92745,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return Object.assign(Object.assign({}, DEFAULT_OPTIONS), { offsetX: (_a = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _a !== void 0 ? _a : DEFAULT_OPTIONS.offsetX, offsetY: (_b = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _b !== void 0 ? _b : DEFAULT_OPTIONS.offsetY });
         }
         _getTooltipBoxSize(actualTooltip, changePositionOnly) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c;
             if (!changePositionOnly || isNil$1(this._attributes)) {
                 const chartTheme = (_b = (_a = this._chartOption) === null || _a === void 0 ? void 0 : _a.getTheme()) !== null && _b !== void 0 ? _b : {};
                 this._attributes = getTooltipAttributes(actualTooltip, this._component.getSpec(), chartTheme);
             }
+            const { panel, panelDomHeight } = (_c = this._attributes) !== null && _c !== void 0 ? _c : {};
             return {
-                width: (_d = (_c = this._attributes) === null || _c === void 0 ? void 0 : _c.panel) === null || _d === void 0 ? void 0 : _d.width,
-                height: (_f = (_e = this._attributes) === null || _e === void 0 ? void 0 : _e.panel) === null || _f === void 0 ? void 0 : _f.height
+                width: panel === null || panel === void 0 ? void 0 : panel.width,
+                height: panelDomHeight !== null && panelDomHeight !== void 0 ? panelDomHeight : panel === null || panel === void 0 ? void 0 : panel.height
             };
         }
         _getPointerPositionRelativeToTooltipParent(params) {
@@ -92819,7 +92909,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             content: {},
             shapeColumn: {
                 common: shapeStyle,
-                items: [],
+                items: contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.map(({ spaceRow }, i) => ({
+                    marginTop: '0px',
+                    marginBottom: i < contentAttribute.length - 1 ? getPixelPropertyStr(spaceRow) : '0px'
+                })),
                 width: getPixelPropertyStr(shape.size),
                 marginRight: getPixelPropertyStr((_a = shape.spacing) !== null && _a !== void 0 ? _a : DEFAULT_SHAPE_SPACING)
             },
@@ -93010,7 +93103,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         fontWeight: 'normal'
     };
     const defaultShapeStyle = {
-        lineHeight: 'normal'
+        lineHeight: 'normal',
+        boxSizing: 'border-box'
     };
 
     class ShapeModel extends BaseTooltipModel {
@@ -93049,7 +93143,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         const { symbolType, fill, stroke, hollow = false } = option;
         const size = option.size ? valueToHtml(option.size) : '8px';
-        const marginTop = option.marginTop ? valueToHtml(option.marginTop) : '0px';
         const lineWidth = option.lineWidth ? valueToHtml(option.lineWidth) + 'px' : '0px';
         let fillString = 'currentColor';
         const getStroke = () => (stroke ? valueToHtml(stroke) : fillString);
@@ -93073,7 +93166,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             fillString = hollow ? 'none' : fill ? valueToHtml(fill) : 'currentColor';
             return `
     <svg width="${size}" height="${size}" viewBox="${viewBox}"
-      style="display: inline-block; vertical-align: middle; margin-top: ${marginTop};">
+      style="display: block;">
       <path
         d="${path}"
         style="fill: ${fillString}; stroke: ${getStroke()}; stroke-width: ${lineWidth}"
@@ -93099,7 +93192,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return `
     <svg width="${size}" height="${size}" viewBox="-0.5 -0.5 1 1"
-      style="display: inline-block; vertical-align: middle; margin-top: ${marginTop};">
+      style="display: block;">
       ${gradient}
       <path
         d="${path}"
@@ -93183,29 +93276,47 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super.setStyle(mergeSpec({}, defaultContentColumnStyle, tooltipStyle.content, this._getContentColumnStyle()));
             const renderContent = (_b = (_a = this._option.getTooltipActual()) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : [];
             const contentAttributes = (_d = (_c = this._option.getTooltipAttributes()) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : [];
+            const getKeyItemStyle = (line, i) => {
+                var _a, _b;
+                const { key, isKeyAdaptive } = line;
+                const { height } = contentAttributes[i];
+                const { keyColumn } = tooltipStyle;
+                const style = mergeSpec({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(height) }, defaultLabelStyle), keyColumn.common), (_a = keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
+                const hasContent = (isString$1(key) && ((_b = key === null || key === void 0 ? void 0 : key.trim) === null || _b === void 0 ? void 0 : _b.call(key)) !== '') || isNumber$1(key);
+                if (!hasContent && !style.visibility) {
+                    style.visibility = 'hidden';
+                }
+                else {
+                    style.visibility = 'visible';
+                }
+                return style;
+            };
+            const getValueItemStyle = (line, i) => {
+                var _a;
+                const { height } = contentAttributes[i];
+                const { valueColumn } = tooltipStyle;
+                const style = mergeSpec({}, defaultValueStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(height) }, defaultLabelStyle), valueColumn.common), (_a = valueColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
+                return style;
+            };
+            const getShapeItemStyle = (line, i) => {
+                var _a, _b, _c, _d;
+                const { height } = contentAttributes[i];
+                const { shapeColumn } = tooltipStyle;
+                const keyStyle = getKeyItemStyle(line, i);
+                const paddingTop = `calc((${(_b = (_a = keyStyle.lineHeight) !== null && _a !== void 0 ? _a : keyStyle.fontSize) !== null && _b !== void 0 ? _b : '18px'} - ${(_c = shapeColumn.width) !== null && _c !== void 0 ? _c : '8px'}) / 2)`;
+                const style = mergeSpec({}, defaultShapeStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(height), paddingTop }, shapeColumn.common), (_d = shapeColumn.items) === null || _d === void 0 ? void 0 : _d[i]));
+                return style;
+            };
             renderContent.forEach((line, i) => {
-                var _a, _b, _c, _d, _e;
-                let childStyle = {};
-                const { height, spaceRow = 0 } = contentAttributes[i];
+                var _a;
                 if (this.className === 'key-box') {
-                    const { key, isKeyAdaptive } = line;
-                    childStyle = mergeSpec({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(height) }, defaultLabelStyle), tooltipStyle.keyColumn.common), (_a = tooltipStyle.keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
-                    const hasContent = (isString$1(key) && ((_b = key === null || key === void 0 ? void 0 : key.trim) === null || _b === void 0 ? void 0 : _b.call(key)) !== '') || isNumber$2(key);
-                    if (!hasContent && !childStyle.visibility) {
-                        childStyle.visibility = 'hidden';
-                    }
-                    else {
-                        childStyle.visibility = 'visible';
-                    }
-                    this.children[i].setStyle(childStyle);
+                    this.children[i].setStyle(getKeyItemStyle(line, i));
                 }
                 else if (this.className === 'value-box') {
-                    childStyle = mergeSpec({}, defaultValueStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(height) }, defaultLabelStyle), tooltipStyle.valueColumn.common), (_c = tooltipStyle.valueColumn.items) === null || _c === void 0 ? void 0 : _c[i]));
-                    this.children[i].setStyle(childStyle);
+                    this.children[i].setStyle(getValueItemStyle(line, i));
                 }
                 else if (this.className === 'shape-box') {
-                    childStyle = mergeSpec({}, defaultShapeStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(height + (i < renderContent.length - 1 ? spaceRow : 0)) }, tooltipStyle.shapeColumn.common), (_d = tooltipStyle.shapeColumn.items) === null || _d === void 0 ? void 0 : _d[i]));
-                    (_e = this.children[i]) === null || _e === void 0 ? void 0 : _e.setStyle(childStyle, this._getShapeSvgOption(line, i));
+                    (_a = this.children[i]) === null || _a === void 0 ? void 0 : _a.setStyle(getShapeItemStyle(line, i), this._getShapeSvgOption(line, i));
                 }
             });
         }
@@ -93218,7 +93329,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 let childContent;
                 if (this.className === 'key-box') {
                     const keyContent = line.key;
-                    if ((isString$1(keyContent) && ((_a = keyContent === null || keyContent === void 0 ? void 0 : keyContent.trim) === null || _a === void 0 ? void 0 : _a.call(keyContent)) !== '') || isNumber$2(keyContent)) {
+                    if ((isString$1(keyContent) && ((_a = keyContent === null || keyContent === void 0 ? void 0 : keyContent.trim) === null || _a === void 0 ? void 0 : _a.call(keyContent)) !== '') || isNumber$1(keyContent)) {
                         childContent = keyContent;
                     }
                     else {
@@ -93228,7 +93339,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 else if (this.className === 'value-box') {
                     const valueContent = line.value;
-                    if ((isString$1(valueContent) && ((_d = valueContent === null || valueContent === void 0 ? void 0 : valueContent.trim) === null || _d === void 0 ? void 0 : _d.call(valueContent)) !== '') || isNumber$2(valueContent)) {
+                    if ((isString$1(valueContent) && ((_d = valueContent === null || valueContent === void 0 ? void 0 : valueContent.trim) === null || _d === void 0 ? void 0 : _d.call(valueContent)) !== '') || isNumber$1(valueContent)) {
                         childContent = valueContent;
                     }
                     else {
@@ -93258,10 +93369,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _getShapeSvgOption(line, index) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c;
             const tooltipStyle = this._option.getTooltipStyle();
             const shapeColumn = Object.assign(Object.assign({}, tooltipStyle.shapeColumn), (_a = tooltipStyle.shapeColumn.items) === null || _a === void 0 ? void 0 : _a[index]);
-            const keyColumn = Object.assign(Object.assign({}, tooltipStyle.keyColumn), (_b = tooltipStyle.keyColumn.items) === null || _b === void 0 ? void 0 : _b[index]);
+            Object.assign(Object.assign({}, tooltipStyle.keyColumn), (_b = tooltipStyle.keyColumn.items) === null || _b === void 0 ? void 0 : _b[index]);
             return {
                 hasShape: line.hasShape,
                 symbolType: line.shapeType,
@@ -93270,7 +93381,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 stroke: line.shapeStroke,
                 lineWidth: line.shapeLineWidth,
                 hollow: line.shapeHollow,
-                marginTop: `calc((${(_e = (_d = keyColumn.lineHeight) !== null && _d !== void 0 ? _d : keyColumn.fontSize) !== null && _e !== void 0 ? _e : '18px'} - ${(_f = shapeColumn.width) !== null && _f !== void 0 ? _f : '8px'}) / 2)`,
                 index
             };
         }