@visactor/vchart 1.8.8-alpha.1 → 1.8.9

package/build/index.js

@@ -10829,11 +10829,13 @@
           global: global,
           viewport: viewport,
           autoPreventDefault = !1,
-          clickInterval: clickInterval
+          clickInterval: clickInterval,
+          supportsTouchEvents = global.supportsTouchEvents,
+          supportsPointerEvents = global.supportsPointerEvents
         } = params;
         this.manager = new EventManager(rootNode, {
           clickInterval: clickInterval
-        }), this.globalObj = global, this.supportsPointerEvents = global.supportsPointerEvents, this.supportsTouchEvents = global.supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
+        }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
         }, this.resolution = resolution, this.setTargetElement(targetElement);
@@ -13185,7 +13187,8 @@
       }
       constructor() {
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), params.background && this.loadImage(params.background, !0);
+        var _a;
+        super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), params.background && this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0);
       }
       setMode(mode) {
         "3d" === mode ? this.set3dMode() : this.set2dMode();
@@ -13319,7 +13322,7 @@
         const context = {
           type: AttributeUpdateType.INIT
         };
-        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background && this.loadImage(params.background, !0), this._updateTag = UpdateTag.INIT, this.onAttributeUpdate(context);
+        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background && this.loadImage(params.background, !0), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
       }
       translate(x, y) {
         var _a, _b;
@@ -16694,6 +16697,12 @@
           this.failCallback && this.failCallback();
         });
       }
+      setAttributes(params, forceUpdateTag, context) {
+        return params.image && this.loadImage(params.image), super.setAttributes(params, forceUpdateTag, context);
+      }
+      setAttribute(key, value, forceUpdateTag, context) {
+        return "image" === key && this.loadImage(value), super.setAttribute(key, value, forceUpdateTag, context);
+      }
       doUpdateAABBBounds() {
         const imageTheme = getTheme$1(this).image;
         this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
@@ -18319,7 +18328,7 @@
 
     let text, richText;
     function getTextBounds(params) {
-      return text || (text = graphicCreator.CreateGraphic("text", {})), text.setAttributes(params), text.AABBBounds;
+      return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
     }
     function getRichTextBounds(params) {
       return richText || (richText = graphicCreator.CreateGraphic("richtext", {})), richText.setAttributes(params), richText.AABBBounds;
@@ -18453,6 +18462,234 @@
       }
     }
 
+    const parse = function () {
+      const tokens = {
+        linearGradient: /^(linear\-gradient)/i,
+        radialGradient: /^(radial\-gradient)/i,
+        conicGradient: /^(conic\-gradient)/i,
+        sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+        extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+        positionKeywords: /^(left|center|right|top|bottom)/i,
+        pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+        percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+        emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+        angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        fromAngleValue: /^from\s*(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        startCall: /^\(/,
+        endCall: /^\)/,
+        comma: /^,/,
+        hexColor: /(^\#[0-9a-fA-F]+)/,
+        literalColor: /^([a-zA-Z]+)/,
+        rgbColor: /^(rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))/i,
+        rgbaColor: /^(rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*((\d\.\d+)|\d{1,3})\))/i,
+        number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
+      };
+      let input = "";
+      function error(msg) {
+        const err = new Error(input + ": " + msg);
+        throw err.source = input, err;
+      }
+      function getAST() {
+        const ast = matchListing(matchDefinition);
+        return input.length > 0 && error("Invalid input not EOF"), ast;
+      }
+      function matchDefinition() {
+        return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+      }
+      function matchGradient(gradientType, pattern, orientationMatcher) {
+        return function (pattern, callback) {
+          const captures = scan(pattern);
+          if (captures) {
+            scan(tokens.startCall) || error("Missing (");
+            const result = callback(captures);
+            return scan(tokens.endCall) || error("Missing )"), result;
+          }
+        }(pattern, function (captures) {
+          const orientation = orientationMatcher();
+          return orientation && (scan(tokens.comma) || error("Missing comma before color stops")), {
+            type: gradientType,
+            orientation: orientation,
+            colorStops: matchListing(matchColorStop)
+          };
+        });
+      }
+      function matchLinearOrientation() {
+        return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+      }
+      function matchConicalOrientation() {
+        return match("angular", tokens.fromAngleValue, 1);
+      }
+      function matchListRadialOrientations() {
+        let radialOrientations,
+          lookaheadCache,
+          radialOrientation = matchRadialOrientation();
+        return radialOrientation && (radialOrientations = [], radialOrientations.push(radialOrientation), lookaheadCache = input, scan(tokens.comma) && (radialOrientation = matchRadialOrientation(), radialOrientation ? radialOrientations.push(radialOrientation) : input = lookaheadCache)), radialOrientations;
+      }
+      function matchRadialOrientation() {
+        let radialType = function () {
+          const circle = match("shape", /^(circle)/i, 0);
+          circle && (circle.style = matchLength() || matchExtentKeyword());
+          return circle;
+        }() || function () {
+          const ellipse = match("shape", /^(ellipse)/i, 0);
+          ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
+          return ellipse;
+        }();
+        if (radialType) radialType.at = matchAtPosition();else {
+          const extent = matchExtentKeyword();
+          if (extent) {
+            radialType = extent;
+            const positionAt = matchAtPosition();
+            positionAt && (radialType.at = positionAt);
+          } else {
+            const defaultPosition = matchPositioning();
+            defaultPosition && (radialType = {
+              type: "default-radial",
+              at: defaultPosition
+            });
+          }
+        }
+        return radialType;
+      }
+      function matchExtentKeyword() {
+        return match("extent-keyword", tokens.extentKeywords, 1);
+      }
+      function matchAtPosition() {
+        if (match("position", /^at/, 0)) {
+          const positioning = matchPositioning();
+          return positioning || error("Missing positioning value"), positioning;
+        }
+      }
+      function matchPositioning() {
+        const location = {
+          x: matchDistance(),
+          y: matchDistance()
+        };
+        if (location.x || location.y) return {
+          type: "position",
+          value: location
+        };
+      }
+      function matchListing(matcher) {
+        let captures = matcher();
+        const result = [];
+        if (captures) for (result.push(captures); scan(tokens.comma);) captures = matcher(), captures ? result.push(captures) : error("One extra comma");
+        return result;
+      }
+      function matchColorStop() {
+        const color = match("hex", tokens.hexColor, 1) || match("rgba", tokens.rgbaColor, 1) || match("rgb", tokens.rgbColor, 1) || match("literal", tokens.literalColor, 0);
+        return color || error("Expected color definition"), color.length = matchDistance(), color;
+      }
+      function matchDistance() {
+        return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+      }
+      function matchLength() {
+        return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+      }
+      function match(type, pattern, captureIndex) {
+        const captures = scan(pattern);
+        if (captures) return {
+          type: type,
+          value: captures[captureIndex]
+        };
+      }
+      function scan(regexp) {
+        const blankCaptures = /^[\n\r\t\s]+/.exec(input);
+        blankCaptures && consume(blankCaptures[0].length);
+        const captures = regexp.exec(input);
+        return captures && consume(captures[0].length), captures;
+      }
+      function consume(size) {
+        input = input.substr(size);
+      }
+      return function (code) {
+        return input = code.toString(), getAST();
+      };
+    }();
+    class GradientParser {
+      static IsGradient(c) {
+        return !("string" == typeof c && c.length < 10);
+      }
+      static IsGradientStr(c) {
+        return "string" == typeof c && c.length > 10;
+      }
+      static Parse(c) {
+        if (GradientParser.IsGradientStr(c)) try {
+          const datum = parse(c)[0];
+          if (datum) {
+            if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
+            if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
+            if ("conic" === datum.type) return GradientParser.ParseConic(datum);
+          }
+        } catch (err) {
+          return c;
+        }
+        return c;
+      }
+      static ParseConic(datum) {
+        const {
+            orientation: orientation,
+            colorStops = []
+          } = datum,
+          halfPi = pi$1 / 2,
+          sa = parseFloat(orientation.value) / 180 * pi$1 - halfPi;
+        return {
+          gradient: "conical",
+          x: .5,
+          y: .5,
+          startAngle: sa,
+          endAngle: sa + pi2,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+      static ParseRadial(datum) {
+        const {
+          colorStops = []
+        } = datum;
+        return {
+          gradient: "radial",
+          x0: .5,
+          y0: .5,
+          x1: .5,
+          y1: .5,
+          r0: 0,
+          r1: 1,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+      static ParseLinear(datum) {
+        const {
+            orientation: orientation,
+            colorStops = []
+          } = datum,
+          halfPi = pi$1 / 2;
+        let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi$1 : 0;
+        for (; angle < 0;) angle += pi2;
+        for (; angle > pi2;) angle -= pi2;
+        let x0 = 0,
+          y0 = 0,
+          x1 = 0,
+          y1 = 0;
+        return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = Math.cos(angle)) : angle < pi$1 ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi$1 + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi$1), y1 = Math.cos(angle - pi$1)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi$1), y1 -= Math.sin(angle - halfPi - pi$1)), {
+          gradient: "linear",
+          x0: x0,
+          y0: y0,
+          x1: x1,
+          y1: y1,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+    }
+
     function getScaledStroke(context, width, dpr) {
       let strokeWidth = width;
       const {
@@ -18469,7 +18706,7 @@
       if (!c || !0 === c) return "black";
       let result, color;
       if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
-      return "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
+      return color = GradientParser.Parse(color), "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
     }
     function createLinearGradient(context, color, params) {
       let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
@@ -18592,20 +18829,22 @@
             const resW = data.width,
               resH = data.height;
             if ("repeat-x" === backgroundMode) {
-              w = resW * (targetH / resH);
+              w = resW * (targetH / resH), h = targetH;
             } else if ("repeat-y" === backgroundMode) {
-              h = resH * (targetW / resW);
+              h = resH * (targetW / resW), w = targetW;
             }
-            const canvas = canvasAllocate.allocate({
+            const dpr = context.dpr,
+              canvas = canvasAllocate.allocate({
                 width: w,
                 height: h,
-                dpr: context.dpr
+                dpr: dpr
               }),
               ctx = canvas.getContext("2d");
-            ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), document.body.appendChild(data), canvasAllocate.free(canvas);
+            ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), canvasAllocate.free(canvas);
           }
-          const pattern = context.createPattern(data, backgroundMode);
-          context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
+          const dpr = context.dpr,
+            pattern = context.createPattern(data, backgroundMode);
+          pattern.setTransform && pattern.setTransform(new DOMMatrix([1 / dpr, 0, 0, 1 / dpr, 0, 0])), context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
         }
       }
     }
@@ -20251,23 +20490,68 @@
     };
     DefaultCanvasSymbolRender = __decorate$1h([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(SymbolRenderContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
+    class DefaultBoundsAllocate {
+      constructor() {
+        this.pools = [];
+        for (let i = 0; i < 10; i++) this.pools.push(new AABBBounds());
+      }
+      allocate(x1, y1, x2, y2) {
+        if (!this.pools.length) return new AABBBounds().setValue(x1, y1, x2, y2);
+        const b = this.pools.pop();
+        return b.x1 = x1, b.y1 = y1, b.x2 = x2, b.y2 = y2, b;
+      }
+      allocateByObj(b) {
+        if (!this.pools.length) return new AABBBounds(b);
+        const _b = this.pools.pop();
+        return _b.x1 = b.x1, _b.y1 = b.y1, _b.x2 = b.x2, _b.y2 = b.y2, _b;
+      }
+      free(b) {
+        this.pools.push(b);
+      }
+      get length() {
+        return this.pools.length;
+      }
+      release() {
+        this.pools = [];
+      }
+    }
+    const boundsAllocate = new DefaultBoundsAllocate();
+
     class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRenderContribution {
       constructor() {
         super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
       }
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const {
-          background: background,
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit
         } = graphic.attribute;
+        let b,
+          {
+            background: background
+          } = graphic.attribute;
         if (!background) return;
-        const b = graphic.AABBBounds;
+        const shouldReCalBounds = isObject$2(background) && background.background,
+          onlyTranslate = graphic.transMatrix.onlyTranslate();
+        if (shouldReCalBounds) {
+          const _b = graphic.AABBBounds,
+            x = (null !== (_a = background.x) && void 0 !== _a ? _a : _b.x1) + (null !== (_c = background.dx) && void 0 !== _c ? _c : 0),
+            y = (null !== (_d = background.y) && void 0 !== _d ? _d : _b.y1) + (null !== (_e = background.dy) && void 0 !== _e ? _e : 0),
+            w = null !== (_f = background.width) && void 0 !== _f ? _f : _b.width(),
+            h = null !== (_g = background.height) && void 0 !== _g ? _g : _b.height();
+          if (b = boundsAllocate.allocate(x, y, x + w, y + h), background = background.background, !onlyTranslate) {
+            const w = b.width(),
+              h = b.height();
+            b.set((null !== (_h = background.x) && void 0 !== _h ? _h : 0) + (null !== (_j = background.dx) && void 0 !== _j ? _j : 0), (null !== (_k = background.y) && void 0 !== _k ? _k : 0) + (null !== (_l = background.dy) && void 0 !== _l ? _l : 0), w, h);
+          }
+        } else b = graphic.AABBBounds, onlyTranslate || b.set(0, 0, b.width(), b.height());
         if (graphic.backgroundImg && graphic.resources) {
           const res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
-          context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+          context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
+        } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+        shouldReCalBounds && boundsAllocate.free(b);
       }
     }
     const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();
@@ -21410,33 +21694,6 @@
       }
     }
 
-    class DefaultBoundsAllocate {
-      constructor() {
-        this.pools = [];
-        for (let i = 0; i < 10; i++) this.pools.push(new AABBBounds());
-      }
-      allocate(x1, y1, x2, y2) {
-        if (!this.pools.length) return new AABBBounds().setValue(x1, y1, x2, y2);
-        const b = this.pools.pop();
-        return b.x1 = x1, b.y1 = y1, b.x2 = x2, b.y2 = y2, b;
-      }
-      allocateByObj(b) {
-        if (!this.pools.length) return new AABBBounds(b);
-        const _b = this.pools.pop();
-        return _b.x1 = b.x1, _b.y1 = b.y1, _b.x2 = b.x2, _b.y2 = b.y2, _b;
-      }
-      free(b) {
-        this.pools.push(b);
-      }
-      get length() {
-        return this.pools.length;
-      }
-      release() {
-        this.pools = [];
-      }
-    }
-    const boundsAllocate = new DefaultBoundsAllocate();
-
     var __decorate$16 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -21982,11 +22239,10 @@
       container.load(renderModule);
     }
 
-    let loaded$r = !1;
     function preLoadAllModule() {
-      loaded$r || (loaded$r = !0, container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$2(container), load$1(container));
+      preLoadAllModule.__loaded || (preLoadAllModule.__loaded = !0, container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$2(container), load$1(container));
     }
-    preLoadAllModule();
+    preLoadAllModule.__loaded = !1, preLoadAllModule();
     const vglobal = container.get(VGlobal);
     application.global = vglobal;
     const graphicUtil = container.get(GraphicUtil);
@@ -22144,7 +22400,7 @@
             wrapGroup: wrapGroup
           } = _ref;
           application.global.removeDom(wrapGroup);
-        }), nativeDom = "string" == typeof dom ? new DOMParser().parseFromString(dom, "text/html").firstChild : dom;
+        }), "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({
@@ -22161,13 +22417,11 @@
         })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         let left = 0,
           top = 0;
-        if ("position" === anchorType) {
+        const b = graphic.globalAABBBounds;
+        if ("position" === anchorType || b.empty()) {
           const matrix = graphic.globalTransMatrix;
           left = matrix.e, top = matrix.f;
-        } else {
-          const b = graphic.globalAABBBounds;
-          left = b.x1, top = b.y1;
-        }
+        } else left = b.x1, top = b.y1;
         const containerTL = application.global.getElementTopLeft(nativeContainer, !1),
           windowTL = stage.window.getTopLeft(!1),
           offsetX = left + windowTL.left - containerTL.left,
@@ -22527,21 +22781,16 @@
 
     let _isBrowserEnv;
     function initIsBrowserEnv() {
-      if (null == _isBrowserEnv) {
-        try {
-          _isBrowserEnv = !!window;
-        } catch (err) {
-          _isBrowserEnv = !1;
-        }
-        if (_isBrowserEnv) try {
-          _isBrowserEnv = !tt;
-        } catch (err) {
-          _isBrowserEnv = !0;
-        }
+      if (null == _isBrowserEnv) try {
+        _isBrowserEnv = globalThis === window, _isBrowserEnv && (_isBrowserEnv = !!document.createElement);
+      } catch (err) {
+        _isBrowserEnv = !1;
       }
     }
     function isBrowserEnv() {
-      return initIsBrowserEnv(), _isBrowserEnv;
+      initIsBrowserEnv();
+      const env = application.global && application.global.env;
+      return env ? "browser" === env : _isBrowserEnv;
     }
 
     const DefaultConfig$1 = {
@@ -22645,6 +22894,8 @@
           resolution: this.window.dpr || this.global.devicePixelRatio,
           rootNode: this,
           global: this.global,
+          supportsPointerEvents: this.params.supportsPointerEvents,
+          supportsTouchEvents: this.params.supportsTouchEvents,
           viewport: {
             viewBox: this._viewBox,
             get x() {
@@ -26797,7 +27048,7 @@
       encodeGraphic(attrs) {
         this.coordinateTransformEncode(this.items);
         const graphicAttributes = this.transformElementItems(this.items, this.mark.markType);
-        attrs && Object.assign(graphicAttributes, attrs), this.graphicItem ? (this.graphicItem.clearStates(), this.graphicItem.states = {}, this.graphicItem.stateProxy = null, this.applyGraphicAttributes(graphicAttributes)) : this.initGraphicItem(graphicAttributes), this.diffState !== DiffState.enter && this.diffState !== DiffState.update || !this.states.length || this.useStates(this.states), this.mark.markType === GrammarMarkType.shape && (this.graphicItem.datum = this.items[0].datum), this.items.forEach(item => {
+        attrs && (this.mark.isCollectionMark() && delete attrs.defined, Object.assign(graphicAttributes, attrs)), this.graphicItem ? (this.graphicItem.clearStates(), this.graphicItem.states = {}, this.graphicItem.stateProxy = null, this.applyGraphicAttributes(graphicAttributes)) : this.initGraphicItem(graphicAttributes), this.diffState !== DiffState.enter && this.diffState !== DiffState.update || !this.states.length || this.useStates(this.states), this.mark.markType === GrammarMarkType.shape && (this.graphicItem.datum = this.items[0].datum), this.items.forEach(item => {
           item.nextAttrs = {};
         }), this._setCustomizedShape();
       }
@@ -27997,10 +28248,11 @@
     };
     DefaultCanvasGroupPicker = __decorate$Q([injectable()], DefaultCanvasGroupPicker);
 
-    let loaded$q = !1;
-    var canvasModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-      loaded$q || (loaded$q = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
+    const m$2 = new ContainerModule((bind, unbind, isBound, rebind) => {
+      m$2.__vloaded || (m$2.__vloaded = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
     });
+    m$2.__vloaded = !1;
+    var canvasModule = m$2;
 
     const canvasPickerModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       isBound(DefaultCanvasPickerService) || bind(DefaultCanvasPickerService).toSelf().inSingletonScope(), isBound(PickerService) ? rebind(PickerService).toService(DefaultCanvasPickerService) : bind(PickerService).toService(DefaultCanvasPickerService);
@@ -28261,7 +28513,7 @@
       }
       getNativeAABBBounds(_dom) {
         let dom = _dom;
-        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild), dom.getBoundingClientRect) {
+        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild, dom.lastChild && (dom = dom.lastChild.firstChild)), dom.getBoundingClientRect) {
           const b = dom.getBoundingClientRect();
           return new DynamicB(b);
         }
@@ -28374,15 +28626,15 @@
     };
     BrowserEnvContribution = __decorate$O([injectable(), __metadata$D("design:paramtypes", [])], BrowserEnvContribution);
 
-    let isBrowserBound = !1;
     const browserEnvModule = new ContainerModule(bind => {
-      isBrowserBound || (isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
+      browserEnvModule.isBrowserBound || (browserEnvModule.isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
     });
-    let loaded$p = !1;
+    browserEnvModule.isBrowserBound = !1;
     function loadBrowserEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$p || (loaded$p = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
+      loadBrowserEnv.__loaded || (loadBrowserEnv.__loaded = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
     }
+    loadBrowserEnv.__loaded = !1;
 
     var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -28645,10 +28897,11 @@
     };
     DefaultMathPickerService = __decorate$K([injectable(), __param$r(0, inject(ContributionProvider)), __param$r(0, named(MathPickerContribution)), __param$r(1, inject(ContributionProvider)), __param$r(1, named(PickItemInterceptor)), __metadata$A("design:paramtypes", [Object, Object])], DefaultMathPickerService);
 
-    let loaded$o = !1;
-    var mathModule = new ContainerModule(bind => {
-      loaded$o || (loaded$o = !0, bindContributionProvider(bind, MathPickerContribution));
+    const m$1 = new ContainerModule(bind => {
+      m$1.__vloaded || (m$1.__vloaded = !0, bindContributionProvider(bind, MathPickerContribution));
     });
+    m$1.__vloaded = !1;
+    var mathModule = m$1;
 
     const mathPickerModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       isBound(DefaultMathPickerService) || bind(DefaultMathPickerService).toSelf().inSingletonScope(), isBound(PickerService) ? rebind(PickerService).toService(DefaultMathPickerService) : bind(PickerService).toService(DefaultMathPickerService);
@@ -28763,15 +29016,15 @@
     };
     FeishuEnvContribution = __decorate$J([injectable(), __metadata$z("design:paramtypes", [])], FeishuEnvContribution);
 
-    let isFeishuBound = !1;
     const feishuEnvModule = new ContainerModule(bind => {
-      isFeishuBound || (isFeishuBound = !0, bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution));
+      feishuEnvModule.isFeishuBound || (feishuEnvModule.isFeishuBound = !0, bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution));
     });
-    let loaded$n = !1;
+    feishuEnvModule.isFeishuBound = !1;
     function loadFeishuEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$n || (loaded$n = !0, container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule), loadPicker && loadMathPicker(container));
+      loadFeishuEnv.__loaded || (loadFeishuEnv.__loaded = !0, container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule), loadPicker && loadMathPicker(container));
     }
+    loadFeishuEnv.__loaded = !1;
 
     var __decorate$I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -29140,15 +29393,15 @@
     };
     LynxEnvContribution = __decorate$F([injectable(), __metadata$w("design:paramtypes", [])], LynxEnvContribution);
 
-    let isLynxBound = !1;
     const lynxEnvModule = new ContainerModule(bind => {
-      isLynxBound || (isLynxBound = !0, bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution));
+      lynxEnvModule.isLynxBound || (lynxEnvModule.isLynxBound = !0, bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution));
     });
-    let loaded$m = !1;
+    lynxEnvModule.isLynxBound = !1;
     function loadLynxEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$m || (loaded$m = !0, container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule), loadPicker && loadMathPicker(container));
+      loadLynxEnv.__loaded || (loadLynxEnv.__loaded = !0, container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule), loadPicker && loadMathPicker(container));
     }
+    loadLynxEnv.__loaded = !1;
 
     var __decorate$E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -29390,14 +29643,14 @@
     };
     NodeEnvContribution = __decorate$B([injectable()], NodeEnvContribution);
 
-    let isNodeBound = !1;
     const nodeEnvModule = new ContainerModule(bind => {
-      isNodeBound || (isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
+      nodeEnvModule.isNodeBound || (nodeEnvModule.isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
     });
-    let loaded$l = !1;
+    nodeEnvModule.isNodeBound = !1;
     function loadNodeEnv(container) {
-      loaded$l || (loaded$l = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
+      loadNodeEnv.__loaded || (loadNodeEnv.__loaded = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
     }
+    loadNodeEnv.__loaded = !1;
 
     var __decorate$A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -29786,15 +30039,15 @@
     };
     TaroEnvContribution = __decorate$x([injectable(), __metadata$q("design:paramtypes", [])], TaroEnvContribution);
 
-    let isTaroBound = !1;
     const taroEnvModule = new ContainerModule(bind => {
-      isTaroBound || (isTaroBound = !0, bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution));
+      taroEnvModule.isTaroBound || (taroEnvModule.isTaroBound = !0, bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution));
     });
-    let loaded$k = !1;
+    taroEnvModule.isTaroBound = !1;
     function loadTaroEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$k || (loaded$k = !0, container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule), loadPicker && loadMathPicker(container));
+      loadTaroEnv.__loaded || (loadTaroEnv.__loaded = !0, container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule), loadPicker && loadMathPicker(container));
     }
+    loadTaroEnv.__loaded = !1;
 
     var __decorate$w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -30108,25 +30361,25 @@
     };
     WxEnvContribution = __decorate$t([injectable(), __metadata$n("design:paramtypes", [])], WxEnvContribution);
 
-    let isWxBound = !1;
     const wxEnvModule = new ContainerModule(bind => {
-      isWxBound || (isWxBound = !0, bind(WxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(WxEnvContribution));
+      wxEnvModule._isWxBound || (wxEnvModule._isWxBound = !0, bind(WxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(WxEnvContribution));
     });
-    let loaded$j = !1;
+    wxEnvModule._isWxBound = !1;
     function loadWxEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$j || (loaded$j = !0, container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule), loadPicker && loadMathPicker(container));
+      loadWxEnv.__loaded || (loadWxEnv.__loaded = !0, container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule), loadPicker && loadMathPicker(container));
     }
+    loadWxEnv.__loaded = !1;
 
     function loadAllEnv(container) {
       loadAllModule(container);
     }
-    let loaded$i = !1;
     function loadAllModule(container) {
-      loaded$i || (loaded$i = !0, loadBrowserEnv(container, !1), loadFeishuEnv(container, !1), loadLynxEnv(container, !1), loadNodeEnv(container), loadTaroEnv(container, !1), loadWxEnv(container, !1), loadCanvasPicker(container), vglobal.hooks.onSetEnv.tap("loadMathPicker", (lastEnv, env) => {
+      loadAllModule.__loaded || (loadAllModule.__loaded = !0, loadBrowserEnv(container, !1), loadFeishuEnv(container, !1), loadLynxEnv(container, !1), loadNodeEnv(container), loadTaroEnv(container, !1), loadWxEnv(container, !1), loadCanvasPicker(container), vglobal.hooks.onSetEnv.tap("loadMathPicker", (lastEnv, env) => {
         "browser" !== env && loadMathPicker(container);
       }));
     }
+    loadAllModule.__loaded = !1;
     function initAllEnv() {
       loadAllEnv(container);
     }
@@ -31437,95 +31690,113 @@
 
     const browser = isBrowserEnv();
 
-    let loaded$h = !1;
-    function registerArc() {
-      loaded$h || (loaded$h = !0, registerArcGraphic$1(), container.load(arcModule), container.load(browser ? arcCanvasPickModule : arcMathPickModule));
+    function _registerArc() {
+      _registerArc.__loaded || (_registerArc.__loaded = !0, registerArcGraphic$1(), container.load(arcModule), container.load(browser ? arcCanvasPickModule : arcMathPickModule));
     }
+    _registerArc.__loaded = !1;
+    const registerArc = _registerArc;
 
-    let loaded$g = !1;
-    function registerArc3d() {
-      loaded$g || (loaded$g = !0, registerArc3dGraphic$1(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
+    function _registerArc3d() {
+      _registerArc3d.__loaded || (_registerArc3d.__loaded = !0, registerArc3dGraphic$1(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
     }
+    _registerArc3d.__loaded = !1;
+    const registerArc3d = _registerArc3d;
 
-    let loaded$f = !1;
-    function registerArea() {
-      loaded$f || (loaded$f = !0, registerAreaGraphic$1(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
+    function _registerArea() {
+      _registerArea.__loaded || (_registerArea.__loaded = !0, registerAreaGraphic$1(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
     }
+    _registerArea.__loaded = !1;
+    const registerArea = _registerArea;
 
-    let loaded$e = !1;
-    function registerCircle() {
-      loaded$e || (loaded$e = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser ? circleCanvasPickModule : circleMathPickModule));
+    function _registerCircle() {
+      _registerCircle.__loaded || (_registerCircle.__loaded = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser ? circleCanvasPickModule : circleMathPickModule));
     }
+    _registerCircle.__loaded = !1;
+    const registerCircle = _registerCircle;
 
-    let loaded$d = !1;
-    function registerGlyph() {
-      loaded$d || (loaded$d = !0, registerGlyphGraphic$1(), container.load(glyphModule), container.load(browser ? glyphCanvasPickModule : glyphMathPickModule));
+    function _registerGlyph() {
+      _registerGlyph.__loaded || (_registerGlyph.__loaded = !0, registerGlyphGraphic$1(), container.load(glyphModule), container.load(browser ? glyphCanvasPickModule : glyphMathPickModule));
     }
+    _registerGlyph.__loaded = !1;
+    const registerGlyph = _registerGlyph;
 
-    let loaded$c = !1;
-    function registerGroup() {
-      loaded$c || (loaded$c = !0, registerGroupGraphic$1());
+    function _registerGroup() {
+      _registerGroup.__loaded || (_registerGroup.__loaded = !0, registerGroupGraphic$1());
     }
+    _registerGroup.__loaded = !1;
+    const registerGroup = _registerGroup;
 
-    let loaded$b = !1;
-    function registerImage() {
-      loaded$b || (loaded$b = !0, registerImageGraphic$1(), container.load(imageModule), container.load(browser ? imageCanvasPickModule : imageMathPickModule));
+    function _registerImage() {
+      _registerImage.__loaded || (_registerImage.__loaded = !0, registerImageGraphic$1(), container.load(imageModule), container.load(browser ? imageCanvasPickModule : imageMathPickModule));
     }
+    _registerImage.__loaded = !1;
+    const registerImage = _registerImage;
 
-    let loaded$a = !1;
-    function registerLine() {
-      loaded$a || (loaded$a = !0, registerLineGraphic$1(), container.load(lineModule), container.load(browser ? lineCanvasPickModule : lineMathPickModule));
+    function _registerLine() {
+      _registerLine.__loaded || (_registerLine.__loaded = !0, registerLineGraphic$1(), container.load(lineModule), container.load(browser ? lineCanvasPickModule : lineMathPickModule));
     }
+    _registerLine.__loaded = !1;
+    const registerLine = _registerLine;
 
-    let loaded$9 = !1;
-    function registerPath() {
-      loaded$9 || (loaded$9 = !0, registerPathGraphic$1(), container.load(pathModule), container.load(browser ? pathCanvasPickModule : pathMathPickModule));
+    function _registerPath() {
+      _registerPath.__loaded || (_registerPath.__loaded = !0, registerPathGraphic$1(), container.load(pathModule), container.load(browser ? pathCanvasPickModule : pathMathPickModule));
     }
+    _registerPath.__loaded = !1;
+    const registerPath = _registerPath;
 
-    let loaded$8 = !1;
-    function registerPolygon() {
-      loaded$8 || (loaded$8 = !0, registerPolygonGraphic$1(), container.load(polygonModule), container.load(browser ? polygonCanvasPickModule : polygonMathPickModule));
+    function _registerPolygon() {
+      _registerPolygon.__loaded || (_registerPolygon.__loaded = !0, registerPolygonGraphic$1(), container.load(polygonModule), container.load(browser ? polygonCanvasPickModule : polygonMathPickModule));
     }
+    _registerPolygon.__loaded = !1;
+    const registerPolygon = _registerPolygon;
 
-    let loaded$7 = !1;
-    function registerPyramid3d() {
-      loaded$7 || (loaded$7 = !0, registerPyramid3dGraphic$1(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
+    function _registerPyramid3d() {
+      _registerPyramid3d.__loaded || (_registerPyramid3d.__loaded = !0, registerPyramid3dGraphic$1(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
     }
+    _registerPyramid3d.__loaded = !1;
+    const registerPyramid3d = _registerPyramid3d;
 
-    let loaded$6 = !1;
-    function registerRect() {
-      loaded$6 || (loaded$6 = !0, registerRectGraphic$1(), container.load(rectModule), container.load(browser ? rectCanvasPickModule : rectMathPickModule));
+    function _registerRect() {
+      _registerRect.__loaded || (_registerRect.__loaded = !0, registerRectGraphic$1(), container.load(rectModule), container.load(browser ? rectCanvasPickModule : rectMathPickModule));
     }
+    _registerRect.__loaded = !1;
+    const registerRect = _registerRect;
 
-    let loaded$5 = !1;
-    function registerRect3d() {
-      loaded$5 || (loaded$5 = !0, registerRect3dGraphic$1(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
+    function _registerRect3d() {
+      _registerRect3d.__loaded || (_registerRect3d.__loaded = !0, registerRect3dGraphic$1(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
     }
+    _registerRect3d.__loaded = !1;
+    const registerRect3d = _registerRect3d;
 
-    let loaded$4 = !1;
-    function registerRichtext() {
-      loaded$4 || (loaded$4 = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser ? richtextCanvasPickModule : richTextMathPickModule));
+    function _registerRichtext() {
+      _registerRichtext.__loaded || (_registerRichtext.__loaded = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser ? richtextCanvasPickModule : richTextMathPickModule));
     }
+    _registerRichtext.__loaded = !1;
+    const registerRichtext = _registerRichtext;
 
-    let loaded$3 = !1;
-    function registerShadowRoot() {
-      loaded$3 || (loaded$3 = !0, registerShadowRootGraphic());
+    function _registerShadowRoot() {
+      _registerShadowRoot.__loaded || (_registerShadowRoot.__loaded = !0, registerShadowRootGraphic());
     }
+    _registerShadowRoot.__loaded = !1;
+    const registerShadowRoot = _registerShadowRoot;
 
-    let loaded$2 = !1;
-    function registerSymbol() {
-      loaded$2 || (loaded$2 = !0, registerSymbolGraphic$1(), container.load(symbolModule), container.load(browser ? symbolCanvasPickModule : symbolMathPickModule));
+    function _registerSymbol() {
+      _registerSymbol.__loaded || (_registerSymbol.__loaded = !0, registerSymbolGraphic$1(), container.load(symbolModule), container.load(browser ? symbolCanvasPickModule : symbolMathPickModule));
     }
+    _registerSymbol.__loaded = !1;
+    const registerSymbol = _registerSymbol;
 
-    let loaded$1 = !1;
-    function registerText() {
-      loaded$1 || (loaded$1 = !0, registerTextGraphic$1(), container.load(textModule), container.load(browser ? textCanvasPickModule : textMathPickModule));
+    function _registerText() {
+      _registerText.__loaded || (_registerText.__loaded = !0, registerTextGraphic$1(), container.load(textModule), container.load(browser ? textCanvasPickModule : textMathPickModule));
     }
+    _registerText.__loaded = !1;
+    const registerText = _registerText;
 
-    let loaded = !1;
-    function registerWrapText() {
-      loaded || (loaded = !0, registerWrapTextGraphic());
+    function _registerWrapText() {
+      _registerWrapText.__loaded || (_registerWrapText.__loaded = !0, registerWrapTextGraphic());
     }
+    _registerWrapText.__loaded = !1;
+    const registerWrapText = _registerWrapText;
 
     function loadScrollbarComponent() {
       registerGroup(), registerRect();
@@ -33193,7 +33464,10 @@
     function labelingLineOrArea(textBounds, graphicBounds) {
       let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "end";
       let offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-      if (!textBounds || !graphicBounds) return;
+      if (!textBounds || !graphicBounds) return {
+        x: 1 / 0,
+        y: 1 / 0
+      };
       const {
           x1: x1,
           x2: x2
@@ -33360,11 +33634,14 @@
               baseMark = currentBaseMarks[i];
             textData && baseMark && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), this._idToGraphic.set(textData.id, baseMark));
           }
-          !1 !== this.attribute.animation && (this._animationConfig = {
-            enter: merge$1({}, DefaultLabelAnimation, this.attribute.animation, null !== (_c = this.attribute.animationEnter) && void 0 !== _c ? _c : {}),
-            exit: merge$1({}, DefaultLabelAnimation, this.attribute.animation, null !== (_d = this.attribute.animationExit) && void 0 !== _d ? _d : {}),
-            update: isArray$1(this.attribute.animationUpdate) ? this.attribute.animationUpdate : merge$1({}, DefaultLabelAnimation, this.attribute.animation, null !== (_e = this.attribute.animationUpdate) && void 0 !== _e ? _e : {})
-          });
+          if (!1 !== this.attribute.animation) {
+            const animation = isObject$2(this.attribute.animation) ? this.attribute.animation : {};
+            this._animationConfig = {
+              enter: merge$1({}, DefaultLabelAnimation, animation, null !== (_c = this.attribute.animationEnter) && void 0 !== _c ? _c : {}),
+              exit: merge$1({}, DefaultLabelAnimation, animation, null !== (_d = this.attribute.animationExit) && void 0 !== _d ? _d : {}),
+              update: isArray$1(this.attribute.animationUpdate) ? this.attribute.animationUpdate : merge$1({}, DefaultLabelAnimation, animation, null !== (_e = this.attribute.animationUpdate) && void 0 !== _e ? _e : {})
+            };
+          }
         }
       }
       getRelatedGraphic(item) {
@@ -33380,8 +33657,9 @@
           labels = [];
         for (let i = 0; i < data.length; i++) {
           const textData = data[i],
-            baseMark = this.getRelatedGraphic(textData),
-            labelAttribute = Object.assign(Object.assign({
+            baseMark = this.getRelatedGraphic(textData);
+          if (!baseMark) continue;
+          const labelAttribute = Object.assign(Object.assign({
               fill: this._isCollectionBase ? isArray$1(baseMark.attribute.stroke) ? baseMark.attribute.stroke.find(entry => !!entry && !0 !== entry) : baseMark.attribute.stroke : baseMark.attribute.fill
             }, textStyle), textData),
             text = this._createLabelText(labelAttribute),
@@ -33399,7 +33677,7 @@
       _overlapping(labels) {
         var _a, _b, _c, _d;
         if (0 === labels.length) return [];
-        const option = this.attribute.overlap,
+        const option = isObject$2(this.attribute.overlap) ? this.attribute.overlap : {},
           result = [],
           baseMarkGroup = this.getBaseMarkGroup(),
           size = null !== (_a = option.size) && void 0 !== _a ? _a : {
@@ -33555,9 +33833,7 @@
                 duration: duration,
                 easing: easing
               } = this._animationConfig.update;
-            updateAnimation(prevText, text, this._animationConfig.update), prevLabel.labelLine && labelLine && prevLabel.labelLine.animate().to(merge$1({}, prevLabel.labelLine.attribute, {
-              points: labelLine.attribute.points
-            }), duration, easing);
+            updateAnimation(prevText, text, this._animationConfig.update), prevLabel.labelLine && labelLine && prevLabel.labelLine.animate().to(labelLine.attribute, duration, easing);
           }
         }), prevTextMap.forEach(label => {
           var _a;
@@ -33585,9 +33861,7 @@
             text: text
           }), this.add(text), labelLine && this.add(labelLine), this._syncStateWithRelatedGraphic(relatedGraphic);else if ("update" === state) {
             const prevLabel = prevTextMap.get(textKey);
-            prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), prevLabel.text.setAttributes(text.attribute), prevLabel.labelLine && labelLine && prevLabel.labelLine.setAttributes({
-              points: labelLine.attribute.points
-            });
+            prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), prevLabel.text.setAttributes(text.attribute), prevLabel.labelLine && labelLine && prevLabel.labelLine.setAttributes(labelLine.attribute);
           }
         }), prevTextMap.forEach(label => {
           this.removeChild(label.text), label.labelLine && this.removeChild(label.labelLine);
@@ -33645,7 +33919,7 @@
       }
       _smartInvert(labels) {
         var _a, _b, _c, _d, _e;
-        const option = this.attribute.smartInvert || {},
+        const option = isObject$2(this.attribute.smartInvert) ? this.attribute.smartInvert : {},
           {
             textType: textType,
             contrastRatiosThreshold: contrastRatiosThreshold,
@@ -33842,16 +34116,15 @@
       getGraphicBounds(graphic) {
         let point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "end";
-        var _a;
         if (!graphic || "line" !== graphic.type) return super.getGraphicBounds(graphic, point);
-        const points = (null === (_a = null == graphic ? void 0 : graphic.attribute) || void 0 === _a ? void 0 : _a.points) || [point],
+        const points = graphic.attribute.points || [point],
           index = "start" === position ? 0 : points.length - 1;
-        return {
+        return points[index] ? {
           x1: points[index].x,
           x2: points[index].x,
           y1: points[index].y,
           y2: points[index].y
-        };
+        } : void 0;
       }
       labeling(textBounds, graphicBounds) {
         let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "end";
@@ -35540,6 +35813,7 @@
         };
       }
       beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        var _a, _b, _c, _d;
         const {
           flush = !1
         } = this.attribute.label || {};
@@ -35554,55 +35828,51 @@
             last$1 = last(labelShapes),
             isInverse = isX ? first.attribute.x > last$1.attribute.x : first.attribute.y < last$1.attribute.y;
           if (isX) {
-            if (isInverse) {
-              const start = axisEnd.x,
-                end = axisStart.x,
-                startBound = first.AABBBounds.x2,
-                endBound = last$1.AABBBounds.x1;
-              startBound > start && first.setAttributes({
-                x: start,
-                textAlign: "right"
-              }), endBound < end && last$1.setAttributes({
-                x: end,
+            const leftMostLabel = isInverse ? last$1 : first,
+              rightMostLabel = isInverse ? first : last$1,
+              left = axisStart.x,
+              right = axisEnd.x,
+              leftBound = leftMostLabel.AABBBounds.x1,
+              rightBound = rightMostLabel.AABBBounds.x2;
+            if (leftBound < left) {
+              leftMostLabel.attribute.angle ? leftMostLabel.setAttributes({
+                dx: (null !== (_a = leftMostLabel.attribute.dx) && void 0 !== _a ? _a : 0) + left - leftBound
+              }) : leftMostLabel.setAttributes({
+                x: left,
                 textAlign: "left"
               });
-            } else {
-              const start = axisStart.x,
-                end = axisEnd.x,
-                startBound = first.AABBBounds.x1,
-                endBound = last$1.AABBBounds.x2;
-              startBound < start && first.setAttributes({
-                x: start,
-                textAlign: "left"
-              }), endBound > end && last$1.setAttributes({
-                x: end,
+            }
+            if (rightBound > right) {
+              rightMostLabel.attribute.angle ? rightMostLabel.setAttributes({
+                dx: (null !== (_b = rightMostLabel.attribute.dx) && void 0 !== _b ? _b : 0) + right - rightBound
+              }) : rightMostLabel.setAttributes({
+                x: right,
                 textAlign: "right"
               });
             }
-          } else if (isInverse) {
-            const startBound = first.AABBBounds.y1,
-              endBound = last$1.AABBBounds.y2,
-              start = axisStart.y,
-              end = axisEnd.y;
-            startBound < start && first.setAttributes({
-              y: start,
-              textBaseline: "top"
-            }), endBound > end && last$1.setAttributes({
-              y: end,
-              textBaseline: "bottom"
-            });
           } else {
-            const start = axisEnd.y,
-              end = axisStart.y,
-              startBound = first.AABBBounds.y2,
-              endBound = last$1.AABBBounds.y1;
-            startBound > start && first.setAttributes({
-              y: start,
-              textBaseline: "bottom"
-            }), endBound < end && last$1.setAttributes({
-              y: end,
-              textBaseline: "top"
-            });
+            const bottomMostLabel = isInverse ? last$1 : first,
+              topMostLabel = isInverse ? first : last$1,
+              bottomBound = bottomMostLabel.AABBBounds.y2,
+              topBound = topMostLabel.AABBBounds.y1,
+              top = axisStart.y,
+              bottom = axisEnd.y;
+            if (topBound < top) {
+              topMostLabel.attribute.angle ? topMostLabel.setAttributes({
+                dy: (null !== (_c = topMostLabel.attribute.dy) && void 0 !== _c ? _c : 0) + top - topBound
+              }) : topMostLabel.setAttributes({
+                y: top,
+                textBaseline: "top"
+              });
+            }
+            if (bottomBound > bottom) {
+              bottomMostLabel.attribute.angle ? bottomMostLabel.setAttributes({
+                dy: (null !== (_d = bottomMostLabel.attribute.dy) && void 0 !== _d ? _d : 0) + bottom - bottomBound
+              }) : bottomMostLabel.setAttributes({
+                y: bottom,
+                textBaseline: "bottom"
+              });
+            }
           }
         }
       }
@@ -39527,7 +39797,7 @@
           }, textStyle);
           this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
         } else isValid$1(text) && (this._mainTitle = group.createOrUpdateChild("mainTitle", Object.assign(Object.assign({
-          text: [text]
+          text: isArray$1(text) ? text : [text]
         }, textStyle), {
           maxLineWidth: null !== (_t = textStyle.maxLineWidth) && void 0 !== _t ? _t : width,
           heightLimit: textStyle.heightLimit,
@@ -39568,7 +39838,7 @@
           }, subtextStyle);
           this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
         } else isValid$1(subtext) && (this._subTitle = group.createOrUpdateChild("subTitle", Object.assign(Object.assign({
-          text: [subtext]
+          text: isArray$1(subtext) ? subtext : [subtext]
         }, subtextStyle), {
           maxLineWidth: null !== (_12 = subtextStyle.maxLineWidth) && void 0 !== _12 ? _12 : width,
           heightLimit: subtextStyle.heightLimit,
@@ -40427,7 +40697,7 @@
           const brushMoved = null === (_a = this.attribute.brushMoved) || void 0 === _a || _a;
           this._activeMoveState = brushMoved && this._isPosInBrushMask(e), this._activeDrawState = !this._activeMoveState, this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e);
         }, this._onBrushing = e => {
-          this._outOfInteractiveRange(e) || (e.stopPropagation(), this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e));
+          this._outOfInteractiveRange(e) || ((this._activeDrawState || this._activeMoveState) && e.stopPropagation(), this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e));
         }, this._onBrushEnd = e => {
           e.preventDefault();
           const {
@@ -41857,7 +42127,9 @@
             autoRender: !0,
             pluginList: viewOptions.pluginList,
             enableHtmlAttribute: viewOptions.enableHtmlAttribute,
-            optimize: viewOptions.optimize
+            optimize: viewOptions.optimize,
+            supportsTouchEvents: viewOptions.supportsTouchEvents,
+            supportsPointerEvents: viewOptions.supportsPointerEvents
           });
         (null === (_b = viewOptions.options3d) || void 0 === _b ? void 0 : _b.enable) && stage.set3dOptions(viewOptions.options3d), stage.enableIncrementalAutoRender(), this._viewBox = viewOptions.viewBox, this._view.emit(exports.VGRAMMAR_HOOK_EVENT.AFTER_CREATE_VRENDER_STAGE), this._view.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_CREATE_VRENDER_LAYER);
         const layer = null !== (_c = viewOptions.layer) && void 0 !== _c ? _c : stage.defaultLayer;
@@ -42414,7 +42686,7 @@
         const computePoints = isValidPointsChannel(fromKeys, element.mark.markType) && !isValid$1(from.segments);
         if (computePoints) {
           const items = element.items.map(item => Object.assign({}, item, {
-            nextAttrs: from
+            nextAttrs: Object.assign({}, from)
           }));
           attributes.from = element.transformElementItems(items, element.mark.markType, computePoints);
         }
@@ -42428,7 +42700,7 @@
         const computePoints = isValidPointsChannel(toKeys, element.mark.markType) && !isValid$1(to.segments);
         if (computePoints) {
           const items = element.items.map(item => Object.assign({}, item, {
-            nextAttrs: to
+            nextAttrs: Object.assign({}, to)
           }));
           attributes.to = element.transformElementItems(items, element.mark.markType, computePoints);
         }
@@ -43256,14 +43528,8 @@
         if (!this._groupKeys || !groupEncode) return;
         const res = {};
         return this._groupKeys.forEach(key => {
-          var _a;
           const el = elements.find(el => el.groupKey === key);
-          if (!el) return;
-          const nextAttrs = {},
-            items = [Object.assign({}, null === (_a = el.items) || void 0 === _a ? void 0 : _a[0], {
-              nextAttrs: nextAttrs
-            })];
-          invokeEncoderToItems(el, items, groupEncode, parameters), res[key] = nextAttrs;
+          el && (res[key] = invokeEncoder(groupEncode, el.items && el.items[0] && el.items[0].datum, el, parameters));
         }), res;
       }
       evaluateEncode(elements, encoders, parameters) {
@@ -44960,10 +45226,18 @@
       }
       getMarksBySelector(selector) {
         if (!selector) return null;
-        const selectors = array(selector);
-        let res = [];
+        const selectors = array(selector),
+          res = [];
         return selectors.forEach(selectorStr => {
-          isGrammar(selectorStr) ? res = res.concat(selectorStr) : (selectorStr[0] === ID_PREFIX && (res = res.concat(this.getMarkById(selectorStr.slice(1)))), selectorStr[0] === NAME_PREFIX && (res = res.concat(this.getMarksByName(selectorStr.slice(1)))), isMarkType(selectorStr) && (res = res.concat(this.getMarksByType(selectorStr))));
+          if (isGrammar(selectorStr)) return void res.push(selectorStr);
+          if (selectorStr[0] === ID_PREFIX) {
+            const mark = this.getMarkById(selectorStr.slice(1));
+            return void (mark && res.push(mark));
+          }
+          const marks = selectorStr[0] === NAME_PREFIX ? this.getMarksByName(selectorStr.slice(1)) : isMarkType(selectorStr) ? this.getMarksByType(selectorStr) : null;
+          marks && marks.length && marks.forEach(mark => {
+            res.push(mark);
+          });
         }), res;
       }
       updateSignal(signal, value) {
@@ -50690,7 +50964,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return themes.has(name);
     };
     const getMergedTheme = (theme) => {
-        const baseTheme = getTheme(defaultThemeName);
+        var _a;
+        const baseThemeName = (_a = theme.type) !== null && _a !== void 0 ? _a : defaultThemeName;
+        const baseTheme = getTheme(baseThemeName);
         return mergeTheme({}, baseTheme, theme);
     };
 
@@ -52099,13 +52375,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const filter = handler.filter;
                 if (!handler.query || this._filter(filter, type, params)) {
                     const callback = handler.wrappedCallback || handler.callback;
-                    let stopBubble = callback.call(null, this._prepareParams(filter, params));
-                    if ((_a = handler.query) === null || _a === void 0 ? void 0 : _a.consume) {
-                        stopBubble = true;
+                    const stopBubble = callback.call(null, this._prepareParams(filter, params));
+                    const doStopBubble = stopBubble !== null && stopBubble !== void 0 ? stopBubble : (_a = handler.query) === null || _a === void 0 ? void 0 : _a.consume;
+                    if (doStopBubble) {
                         (_b = params.event) === null || _b === void 0 ? void 0 : _b.stopPropagation();
                         (_c = params.event) === null || _c === void 0 ? void 0 : _c.preventDefault();
                     }
-                    return stopBubble;
+                    return !!doStopBubble;
                 }
                 return undefined;
             });
@@ -53623,10 +53899,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return undefined;
         }
         transformSpec(spec, chartSpec, chartSpecInfo) {
-            this._transformSpec(spec, chartSpec, chartSpecInfo);
-            return this._initTheme(spec, chartSpec);
+            this._transformSpecBeforeMergingTheme(spec, chartSpec, chartSpecInfo);
+            const result = this._initTheme(spec, chartSpec);
+            this._transformSpecAfterMergingTheme(result.spec, chartSpec, chartSpecInfo);
+            return result;
         }
-        _transformSpec(spec, chartSpec, chartSpecInfo) {
+        _transformSpecBeforeMergingTheme(spec, chartSpec, chartSpecInfo) {
+        }
+        _transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo) {
         }
         _mergeThemeToSpec(spec, chartSpec) {
             const theme = this._theme;
@@ -53895,12 +54175,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         set layoutOrient(v) {
             this._layoutOrient = v;
         }
-        get indent() {
-            return this._indent;
-        }
-        get layoutExcludeIndent() {
-            return this._layoutExcludeIndent;
-        }
         get model() {
             return this._model;
         }
@@ -53935,18 +54209,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutPaddingTop = 0;
             this.layoutPaddingRight = 0;
             this.layoutPaddingBottom = 0;
-            this._indent = {
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0
-            };
-            this._layoutExcludeIndent = {
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0
-            };
             this.layoutOffsetX = 0;
             this.layoutOffsetY = 0;
             this.layoutLevel = exports.LayoutLevel.Region;
@@ -53971,8 +54233,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.layoutPaddingRight = paddingValue.right;
                 this.layoutPaddingTop = paddingValue.top;
                 this.layoutPaddingBottom = paddingValue.bottom;
-                const indent = normalizeLayoutPaddingSpec(spec.indent);
-                this._indent = calcPadding(indent, chartViewRect, chartViewRect);
                 this._minHeight = isNil$1(spec.minHeight)
                     ? (_a = this._minHeight) !== null && _a !== void 0 ? _a : null
                     : calcLayoutNumber(spec.minHeight, chartViewRect.height, chartViewRect);
@@ -54005,6 +54265,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!isNil$1(spec.offsetY)) {
                     this.layoutOffsetY = calcLayoutNumber(spec.offsetY, chartViewRect.height, chartViewRect);
                 }
+                if (spec.alignSelf) {
+                    this.alignSelf = spec.alignSelf;
+                }
             }
         }
         setAttrFromSpec(spec, chartViewRect) {
@@ -54083,8 +54346,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isValidNumber$1(pos.y)) {
                 this._layoutStartPoint.y = pos.y;
             }
-            this._layoutExcludeIndent.x = this._layoutStartPoint.x + this._indent.left;
-            this._layoutExcludeIndent.y = this._layoutStartPoint.y + this._indent.top;
             (_b = (_a = this._model).afterSetLayoutStartPoint) === null || _b === void 0 ? void 0 : _b.call(_a, this._layoutStartPoint);
         }
         setLayoutRect({ width, height }, levelMap) {
@@ -54098,8 +54359,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._layoutRectLevelMap.height = (_d = levelMap === null || levelMap === void 0 ? void 0 : levelMap.height) !== null && _d !== void 0 ? _d : DEFAULT_LAYOUT_RECT_LEVEL;
             }
             this.setRectInSpec(this._layoutRect);
-            this._layoutExcludeIndent.width = Math.max(this._layoutRect.width - this._indent.left - this._indent.right, 1);
-            this._layoutExcludeIndent.height = Math.max(this._layoutRect.height - this._indent.top - this._indent.bottom, 1);
         }
         getLayout() {
             return {
@@ -54267,18 +54526,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._forceLayoutTag = true;
             (_a = this._option.globalInstance.getChart()) === null || _a === void 0 ? void 0 : _a.setLayoutTag(true);
         }
-        getLayoutPositionExcludeIndent() {
-            let { x, y } = this.getLayoutStartPoint();
-            x += this._layout.indent.left;
-            y += this._layout.indent.top;
-            return { x, y };
-        }
-        getLayoutRectExcludeIndent() {
-            let { width, height } = this.getLayoutRect();
-            width -= this._layout.indent.left + this._layout.indent.right;
-            height -= this._layout.indent.top + this._layout.indent.bottom;
-            return { width, height };
-        }
         getLayoutStartPoint() {
             return this._layout ? this._layout.getLayoutStartPoint() : this._layoutStartPos;
         }
@@ -54628,324 +54875,287 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
     }
-    function layoutRightStartOrMiddleItems(items, layout, limitHeight, isMiddle) {
+    function alignSelfOfItems(allItems, isVertical, maxSizes, sign) {
+        let maxSize;
+        allItems.forEach((lineItems, index) => {
+            if (lineItems.length > 1) {
+                maxSize = maxSizes[index];
+                lineItems.forEach(item => {
+                    if (!item.alignSelf || item.alignSelf === 'start') {
+                        return;
+                    }
+                    const pos = item.getLayoutStartPoint();
+                    const ratio = item.alignSelf === 'middle' ? 0.5 : 1;
+                    const delta = isVertical
+                        ? maxSize - (item.getLayoutRect().width + item.layoutPaddingLeft + item.layoutPaddingRight)
+                        : maxSize - (item.getLayoutRect().height + item.layoutPaddingTop + item.layoutPaddingBottom);
+                    if (isVertical) {
+                        item.setLayoutStartPosition({
+                            x: pos.x + sign * delta * ratio,
+                            y: pos.y
+                        });
+                    }
+                    else {
+                        item.setLayoutStartPosition({
+                            x: pos.x,
+                            y: pos.y + sign * delta * ratio
+                        });
+                    }
+                });
+            }
+        });
+    }
+    function layoutLeftRightStartOrMiddleItems(items, layout, limitHeight, isMiddle, position) {
         if (items.length) {
             let maxWidth = 0;
-            let preRight = layout.rightCurrent;
+            const isRight = position === 'right';
+            const xSign = isRight ? -1 : 1;
+            let preX = isRight ? layout.rightCurrent : layout.leftCurrent;
             let preTop = layout.topCurrent;
             const allItems = [];
             let singleLineItems = [];
+            const maxWidths = [];
             items.forEach(item => {
                 const layoutRect = layout.getItemComputeLayoutRect(item);
                 const rect = item.computeBoundsInRect(layoutRect);
                 item.setLayoutRect(rect);
                 const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
                 const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+                const itemOffsetX = isRight ? -rect.width - item.layoutPaddingRight : item.layoutPaddingLeft;
                 item.setLayoutStartPosition({
-                    x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+                    x: preX + item.layoutOffsetX + itemOffsetX,
                     y: preTop + item.layoutOffsetY + item.layoutPaddingTop
                 });
-                maxWidth = Math.max(maxWidth, itemTotalWidth);
                 preTop += itemTotalHeight;
-                if (preTop > limitHeight) {
-                    preRight -= maxWidth;
+                if (preTop > limitHeight && singleLineItems.length) {
+                    maxWidths.push(maxWidth);
+                    preX += xSign * maxWidth;
                     maxWidth = itemTotalWidth;
                     preTop = layout.topCurrent + itemTotalHeight;
                     item.setLayoutStartPosition({
-                        x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+                        x: preX + item.layoutOffsetX + itemOffsetX,
                         y: layout.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
                     });
                     allItems.push(singleLineItems);
                     singleLineItems = [item];
                 }
                 else {
+                    maxWidth = Math.max(maxWidth, itemTotalWidth);
                     singleLineItems.push(item);
                 }
             });
+            maxWidths.push(maxWidth);
             allItems.push(singleLineItems);
+            alignSelfOfItems(allItems, true, maxWidths, xSign);
             if (isMiddle) {
                 adjustItemsToCenter(allItems, true, limitHeight);
             }
-            layout.rightCurrent = preRight - maxWidth;
+            if (isRight) {
+                layout.rightCurrent = preX + xSign * maxWidth;
+            }
+            else {
+                layout.leftCurrent = preX + xSign * maxWidth;
+            }
         }
     }
-    function layoutLeftStartOrMiddleItems(items, layout, limitHeight, isMiddle) {
+    function layoutLeftRightEndItems(items, layout, limitWidth, position) {
         if (items.length) {
             let maxWidth = 0;
-            let preLeft = layout.leftCurrent;
-            let preTop = layout.topCurrent;
+            const isRight = position === 'right';
+            const xSign = isRight ? -1 : 1;
+            let preX = isRight ? layout.rightCurrent : layout.leftCurrent;
+            let preBottom = layout.bottomCurrent;
             const allItems = [];
             let singleLineItems = [];
+            const maxWidths = [];
             items.forEach(item => {
                 const layoutRect = layout.getItemComputeLayoutRect(item);
                 const rect = item.computeBoundsInRect(layoutRect);
                 item.setLayoutRect(rect);
                 const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
                 const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
-                item.setLayoutStartPosition({
-                    x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
-                    y: preTop + item.layoutOffsetY + item.layoutPaddingTop
-                });
-                maxWidth = Math.max(maxWidth, itemTotalWidth);
-                preTop += itemTotalHeight;
-                if (preTop > limitHeight) {
-                    preLeft += maxWidth;
+                const itemOffsetX = isRight ? -rect.width - item.layoutPaddingRight : item.layoutPaddingLeft;
+                if (preBottom < itemTotalHeight && singleLineItems.length) {
+                    maxWidths.push(maxWidth);
+                    preX += xSign * maxWidth;
                     maxWidth = itemTotalWidth;
-                    preTop = layout.topCurrent + itemTotalHeight;
+                    preBottom = layout.bottomCurrent;
                     item.setLayoutStartPosition({
-                        x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
-                        y: layout.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+                        x: preX + item.layoutOffsetX + itemOffsetX,
+                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
                     });
                     allItems.push(singleLineItems);
                     singleLineItems = [item];
                 }
                 else {
+                    item.setLayoutStartPosition({
+                        x: preX + item.layoutOffsetX + itemOffsetX,
+                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+                    });
+                    maxWidth = Math.max(maxWidth, itemTotalWidth);
+                    preBottom -= itemTotalHeight;
                     singleLineItems.push(item);
                 }
             });
+            maxWidths.push(maxWidth);
             allItems.push(singleLineItems);
-            if (isMiddle) {
-                adjustItemsToCenter(allItems, true, limitHeight);
+            alignSelfOfItems(allItems, true, maxWidths, xSign);
+            if (isRight) {
+                layout.rightCurrent = preX + xSign * maxWidth;
+            }
+            else {
+                layout.leftCurrent = preX + xSign * maxWidth;
             }
-            layout.leftCurrent = preLeft + maxWidth;
         }
     }
-    function layoutTopStartOrMiddleItems(items, layout, limitWidth, isMiddle) {
+    function layoutTopBottomStartOrMiddleItems(items, layout, limitWidth, isMiddle, position) {
         if (items.length) {
+            const isTop = position === 'top';
+            const ySign = isTop ? 1 : -1;
             let maxHeight = 0;
             let preLeft = layout.leftCurrent;
-            let preTop = layout.topCurrent;
+            let preY = isTop ? layout.topCurrent : layout.bottomCurrent;
             const allItems = [];
             let singleLineItems = [];
+            const maxHeights = [];
             items.forEach(item => {
                 const layoutRect = layout.getItemComputeLayoutRect(item);
                 const rect = item.computeBoundsInRect(layoutRect);
                 item.setLayoutRect(rect);
                 const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
                 const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+                const itemOffsetY = isTop ? item.layoutPaddingTop : -rect.height - item.layoutPaddingBottom;
                 item.setLayoutStartPosition({
                     x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
-                    y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+                    y: preY + item.layoutOffsetY + itemOffsetY
                 });
-                maxHeight = Math.max(maxHeight, itemTotalHeight);
                 preLeft += itemTotalWidth;
-                if (preLeft > limitWidth) {
+                if (preLeft > limitWidth && singleLineItems.length) {
+                    maxHeights.push(maxHeight);
                     preLeft = layout.leftCurrent + itemTotalWidth;
-                    preTop += maxHeight;
+                    preY += ySign * maxHeight;
                     maxHeight = itemTotalHeight;
                     item.setLayoutStartPosition({
                         x: layout.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
-                        y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+                        y: preY + item.layoutOffsetY + itemOffsetY
                     });
                     allItems.push(singleLineItems);
                     singleLineItems = [item];
                 }
                 else {
+                    maxHeight = Math.max(maxHeight, itemTotalHeight);
                     singleLineItems.push(item);
                 }
             });
+            maxHeights.push(maxHeight);
             allItems.push(singleLineItems);
+            alignSelfOfItems(allItems, false, maxHeights, ySign);
             if (isMiddle) {
                 adjustItemsToCenter(allItems, false, limitWidth);
             }
-            layout.topCurrent = preTop + maxHeight;
+            if (isTop) {
+                layout.topCurrent = preY + ySign * maxHeight;
+            }
+            else {
+                layout.bottomCurrent = preY + ySign * maxHeight;
+            }
         }
     }
-    function layoutBottomStartOrMiddleItems(items, layout, limitWidth, isMiddle) {
+    function layoutTopBottomEndItems(items, layout, limitWidth, position) {
         if (items.length) {
+            const isTop = position === 'top';
+            const ySign = isTop ? 1 : -1;
             let maxHeight = 0;
-            let preLeft = layout.leftCurrent;
-            let preBottom = layout.bottomCurrent;
+            let preRight = layout.rightCurrent;
+            let preY = isTop ? layout.topCurrent : layout.bottomCurrent;
             const allItems = [];
             let singleLineItems = [];
+            const maxHeights = [];
             items.forEach(item => {
                 const layoutRect = layout.getItemComputeLayoutRect(item);
                 const rect = item.computeBoundsInRect(layoutRect);
                 item.setLayoutRect(rect);
                 const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
                 const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
-                item.setLayoutStartPosition({
-                    x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
-                    y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-                });
-                maxHeight = Math.max(maxHeight, itemTotalHeight);
-                preLeft += itemTotalWidth;
-                if (preLeft > limitWidth) {
-                    allItems.push(singleLineItems);
-                    preLeft = layout.leftCurrent + itemTotalWidth;
-                    preBottom -= maxHeight;
+                const itemOffsetY = isTop ? item.layoutPaddingTop : -rect.height - item.layoutPaddingBottom;
+                if (preRight < itemTotalWidth && singleLineItems.length) {
+                    preRight = layout.rightCurrent;
+                    preY += ySign * maxHeight;
                     maxHeight = itemTotalHeight;
                     item.setLayoutStartPosition({
-                        x: layout.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
-                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+                        x: layout.rightCurrent + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+                        y: preY + item.layoutOffsetY + itemOffsetY
                     });
+                    allItems.push(singleLineItems);
                     singleLineItems = [item];
                 }
                 else {
                     singleLineItems.push(item);
+                    item.setLayoutStartPosition({
+                        x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+                        y: preY + item.layoutOffsetY + itemOffsetY
+                    });
+                    maxHeight = Math.max(maxHeight, itemTotalHeight);
+                    preRight -= itemTotalWidth;
                 }
             });
+            maxHeights.push(maxHeight);
             allItems.push(singleLineItems);
-            if (isMiddle) {
-                adjustItemsToCenter(allItems, false, limitWidth);
+            alignSelfOfItems(allItems, false, maxHeights, ySign);
+            if (isTop) {
+                layout.topCurrent = preY + ySign * maxHeight;
+            }
+            else {
+                layout.bottomCurrent = preY + ySign * maxHeight;
             }
-            layout.bottomCurrent = preBottom - maxHeight;
         }
     }
     function layoutLeftInlineItems(items, layout, limitHeight) {
         const { startItems, middleItems, endItems } = getPositionItems(items);
         if (startItems.length) {
-            layoutLeftStartOrMiddleItems(startItems, layout, limitHeight, false);
+            layoutLeftRightStartOrMiddleItems(startItems, layout, limitHeight, false, 'left');
         }
         if (middleItems.length) {
-            layoutLeftStartOrMiddleItems(middleItems, layout, limitHeight, true);
+            layoutLeftRightStartOrMiddleItems(middleItems, layout, limitHeight, true, 'left');
         }
         if (endItems.length) {
-            let maxWidth = 0;
-            let preLeft = layout.leftCurrent;
-            let preBottom = layout.bottomCurrent;
-            endItems.forEach(item => {
-                const layoutRect = layout.getItemComputeLayoutRect(item);
-                const rect = item.computeBoundsInRect(layoutRect);
-                item.setLayoutRect(rect);
-                const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
-                const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
-                if (preBottom < itemTotalHeight) {
-                    preLeft += maxWidth;
-                    maxWidth = itemTotalWidth;
-                    preBottom = layout.bottomCurrent;
-                    item.setLayoutStartPosition({
-                        x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
-                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-                    });
-                }
-                else {
-                    item.setLayoutStartPosition({
-                        x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
-                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-                    });
-                    maxWidth = Math.max(maxWidth, itemTotalWidth);
-                    preBottom -= itemTotalHeight;
-                }
-            });
-            layout.leftCurrent = preLeft + maxWidth;
+            layoutLeftRightEndItems(endItems, layout, limitHeight, 'left');
         }
     }
     function layoutRightInlineItems(items, layout, limitHeight) {
         const { startItems, middleItems, endItems } = getPositionItems(items);
         if (startItems.length) {
-            layoutRightStartOrMiddleItems(startItems, layout, limitHeight, false);
+            layoutLeftRightStartOrMiddleItems(startItems, layout, limitHeight, false, 'right');
         }
         if (middleItems.length) {
-            layoutRightStartOrMiddleItems(middleItems, layout, limitHeight, true);
+            layoutLeftRightStartOrMiddleItems(middleItems, layout, limitHeight, true, 'right');
         }
         if (endItems.length) {
-            let maxWidth = 0;
-            let preRight = layout.rightCurrent;
-            let preBottom = layout.bottomCurrent;
-            endItems.forEach(item => {
-                const layoutRect = layout.getItemComputeLayoutRect(item);
-                const rect = item.computeBoundsInRect(layoutRect);
-                item.setLayoutRect(rect);
-                const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
-                const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
-                if (preBottom < itemTotalHeight) {
-                    preRight -= maxWidth;
-                    maxWidth = itemTotalWidth;
-                    preBottom = layout.bottomCurrent;
-                    item.setLayoutStartPosition({
-                        x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
-                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-                    });
-                }
-                else {
-                    item.setLayoutStartPosition({
-                        x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
-                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-                    });
-                    maxWidth = Math.max(maxWidth, itemTotalWidth);
-                    preBottom -= itemTotalHeight;
-                }
-            });
-            layout.rightCurrent = preRight - maxWidth;
+            layoutLeftRightEndItems(endItems, layout, limitHeight, 'right');
         }
     }
     function layoutTopInlineItems(items, layout, limitWidth) {
         const { startItems, middleItems, endItems } = getPositionItems(items);
         if (startItems.length) {
-            layoutTopStartOrMiddleItems(startItems, layout, limitWidth, false);
+            layoutTopBottomStartOrMiddleItems(startItems, layout, limitWidth, false, 'top');
         }
         if (middleItems.length) {
-            layoutTopStartOrMiddleItems(middleItems, layout, limitWidth, true);
+            layoutTopBottomStartOrMiddleItems(middleItems, layout, limitWidth, true, 'top');
         }
         if (endItems.length) {
-            let maxHeight = 0;
-            let preTop = layout.topCurrent;
-            let preRight = layout.rightCurrent;
-            endItems.forEach(item => {
-                const layoutRect = layout.getItemComputeLayoutRect(item);
-                const rect = item.computeBoundsInRect(layoutRect);
-                item.setLayoutRect(rect);
-                const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
-                const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
-                if (preRight < itemTotalWidth) {
-                    preRight = layout.rightCurrent;
-                    preTop += maxHeight;
-                    maxHeight = itemTotalHeight;
-                    item.setLayoutStartPosition({
-                        x: layout.rightCurrent + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
-                        y: preTop + item.layoutOffsetY + item.layoutPaddingTop
-                    });
-                }
-                else {
-                    item.setLayoutStartPosition({
-                        x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
-                        y: preTop + item.layoutOffsetY + item.layoutPaddingTop
-                    });
-                    maxHeight = Math.max(maxHeight, itemTotalHeight);
-                    preRight -= itemTotalWidth;
-                }
-            });
-            layout.topCurrent = preTop + maxHeight;
+            layoutTopBottomEndItems(endItems, layout, limitWidth, 'top');
         }
     }
     function layoutBottomInlineItems(items, layout, limitWidth) {
         const { startItems, middleItems, endItems } = getPositionItems(items);
         if (startItems.length) {
-            layoutBottomStartOrMiddleItems(startItems, layout, limitWidth, false);
+            layoutTopBottomStartOrMiddleItems(startItems, layout, limitWidth, false, 'bottom');
         }
         if (middleItems.length) {
-            layoutBottomStartOrMiddleItems(middleItems, layout, limitWidth, true);
+            layoutTopBottomStartOrMiddleItems(middleItems, layout, limitWidth, true, 'bottom');
         }
         if (endItems.length) {
-            let maxHeight = 0;
-            let preBottom = layout.bottomCurrent;
-            let preRight = layout.rightCurrent;
-            endItems.forEach(item => {
-                const layoutRect = layout.getItemComputeLayoutRect(item);
-                const rect = item.computeBoundsInRect(layoutRect);
-                item.setLayoutRect(rect);
-                const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
-                const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
-                if (preRight < itemTotalWidth) {
-                    preRight = layout.rightCurrent;
-                    preBottom -= maxHeight;
-                    maxHeight = itemTotalHeight;
-                    item.setLayoutStartPosition({
-                        x: layout.rightCurrent + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
-                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-                    });
-                }
-                else {
-                    item.setLayoutStartPosition({
-                        x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
-                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-                    });
-                    maxHeight = Math.max(maxHeight, itemTotalHeight);
-                    preRight -= itemTotalWidth;
-                }
-            });
-            layout.bottomCurrent = preBottom - maxHeight;
+            layoutTopBottomEndItems(endItems, layout, limitWidth, 'bottom');
         }
     }
 
@@ -54957,7 +55167,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.bottomCurrent = 0;
             this._onError = ctx === null || ctx === void 0 ? void 0 : ctx.onError;
         }
-        layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
+        _layoutInit(_chart, items, chartLayoutRect, chartViewBox) {
             this._chartLayoutRect = chartLayoutRect;
             this._chartViewBox = chartViewBox;
             this.leftCurrent = chartLayoutRect.x;
@@ -54965,28 +55175,65 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.rightCurrent = chartLayoutRect.x + chartLayoutRect.width;
             this.bottomCurrent = chartLayoutRect.height + chartLayoutRect.y;
             items.sort((a, b) => b.layoutLevel - a.layoutLevel);
+        }
+        _layoutNormalItems(items) {
             this.layoutNormalInlineItems(items.filter(x => x.layoutType === 'normal-inline'));
             this.layoutNormalItems(items.filter(x => x.layoutType === 'normal'));
+        }
+        _groupItems(items) {
+            const regionItems = items.filter(x => x.layoutType === 'region');
+            const relativeItems = items.filter(x => x.layoutType === 'region-relative');
+            const relativeOverlapItems = items.filter(x => x.layoutType === 'region-relative-overlap');
+            const allRelatives = relativeItems.concat(relativeOverlapItems);
+            const overlapItems = {
+                left: { items: [], rect: { width: 0, height: 0 } },
+                right: { items: [], rect: { width: 0, height: 0 } },
+                top: { items: [], rect: { width: 0, height: 0 } },
+                bottom: { items: [], rect: { width: 0, height: 0 } },
+                z: { items: [], rect: { width: 0, height: 0 } }
+            };
+            relativeOverlapItems.forEach(i => {
+                overlapItems[i.layoutOrient].items.push(i);
+            });
+            return {
+                regionItems,
+                relativeItems,
+                relativeOverlapItems,
+                allRelatives,
+                overlapItems
+            };
+        }
+        layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
+            this._layoutInit(_chart, items, chartLayoutRect, chartViewBox);
+            this._layoutNormalItems(items);
             const layoutTemp = {
                 left: this.leftCurrent,
                 top: this.topCurrent,
                 right: this.rightCurrent,
                 bottom: this.bottomCurrent
             };
-            const regionItems = items.filter(x => x.layoutType === 'region');
-            const relativeItems = items.filter(x => x.layoutType === 'region-relative');
-            this.layoutRegionItems(regionItems, relativeItems);
-            if (relativeItems.some(i => i.autoIndent)) {
-                const { top, bottom, left, right } = this._checkAutoIndent(relativeItems, layoutTemp);
+            const { regionItems, relativeItems, relativeOverlapItems, allRelatives, overlapItems } = this._groupItems(items);
+            this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems);
+            this._processAutoIndent(regionItems, relativeItems, relativeOverlapItems, overlapItems, allRelatives, layoutTemp);
+            this.layoutAbsoluteItems(items.filter(x => x.layoutType === 'absolute'));
+        }
+        _processAutoIndent(regionItems, relativeItems, relativeOverlapItems, overlapItems = {
+            left: { items: [], rect: { width: 0, height: 0 } },
+            right: { items: [], rect: { width: 0, height: 0 } },
+            top: { items: [], rect: { width: 0, height: 0 } },
+            bottom: { items: [], rect: { width: 0, height: 0 } },
+            z: { items: [], rect: { width: 0, height: 0 } }
+        }, allRelatives, layoutTemp) {
+            if (allRelatives.some(i => i.autoIndent)) {
+                const { top, bottom, left, right } = this._checkAutoIndent(allRelatives, layoutTemp);
                 if (top || bottom || left || right) {
                     this.topCurrent = layoutTemp.top + top;
                     this.bottomCurrent = layoutTemp.bottom - bottom;
                     this.leftCurrent = layoutTemp.left + left;
                     this.rightCurrent = layoutTemp.right - right;
-                    this.layoutRegionItems(regionItems, relativeItems);
+                    this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems);
                 }
             }
-            this.layoutAbsoluteItems(items.filter(x => x.layoutType === 'absolute'));
         }
         layoutNormalItems(normalItems) {
             normalItems.forEach(item => {
@@ -55030,54 +55277,88 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const bottomItems = normalItems.filter(item => item.layoutOrient === 'bottom');
             const limitWidth = this._chartLayoutRect.width + this._chartLayoutRect.x;
             const limitHeight = this._chartLayoutRect.height + this._chartLayoutRect.y;
-            layoutLeftInlineItems(leftItems, this, limitHeight);
-            layoutTopInlineItems(topItems, this, limitWidth);
-            layoutRightInlineItems(rightItems, this, limitHeight);
-            layoutBottomInlineItems(bottomItems, this, limitWidth);
+            leftItems.length && layoutLeftInlineItems(leftItems, this, limitHeight);
+            topItems.length && layoutTopInlineItems(topItems, this, limitWidth);
+            rightItems.length && layoutRightInlineItems(rightItems, this, limitHeight);
+            bottomItems.length && layoutBottomInlineItems(bottomItems, this, limitWidth);
         }
-        layoutRegionItems(regionItems, regionRelativeItems) {
-            let regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
-            let regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
-            regionRelativeItems
-                .filter(x => x.layoutOrient === 'left' || x.layoutOrient === 'right')
-                .forEach(item => {
+        _layoutRelativeOverlap(orient, info) {
+            info.items.forEach((item) => {
                 const layoutRect = this.getItemComputeLayoutRect(item);
                 const rect = item.computeBoundsInRect(layoutRect);
-                item.setLayoutRect({ width: rect.width });
-                if (item.layoutOrient === 'left') {
+                info.rect.width = Math.max(rect.width, info.rect.width);
+                info.rect.height = Math.max(rect.height, info.rect.height);
+            });
+            info.items.forEach((item) => {
+                item.setLayoutRect(info.rect);
+                if (orient === 'left') {
                     item.setLayoutStartPosition({
                         x: this.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft
                     });
-                    this.leftCurrent += rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
                 }
-                else if (item.layoutOrient === 'right') {
-                    this.rightCurrent -= rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+                else if (orient === 'right') {
                     item.setLayoutStartPosition({
                         x: this.rightCurrent + item.layoutOffsetX + item.layoutPaddingLeft
                     });
                 }
-            });
-            regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
-            regionRelativeItems
-                .filter(x => x.layoutOrient === 'top' || x.layoutOrient === 'bottom')
-                .forEach(item => {
-                const layoutRect = this.getItemComputeLayoutRect(item);
-                const rect = item.computeBoundsInRect(layoutRect);
-                item.setLayoutRect({ height: rect.height });
-                if (item.layoutOrient === 'top') {
+                else if (orient === 'top') {
                     item.setLayoutStartPosition({
-                        y: this.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+                        x: this.topCurrent + item.layoutOffsetX + item.layoutPaddingLeft
                     });
-                    this.topCurrent += rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
                 }
-                else if (item.layoutOrient === 'bottom') {
-                    this.bottomCurrent -= rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+                else {
                     item.setLayoutStartPosition({
-                        y: this.bottomCurrent + item.layoutOffsetY + item.layoutPaddingTop
+                        x: this.bottomCurrent + item.layoutOffsetX + item.layoutPaddingLeft
                     });
                 }
             });
-            regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
+            if (orient === 'left') {
+                this.leftCurrent += info.rect.width;
+            }
+            else if (orient === 'right') {
+                this.rightCurrent -= info.rect.width;
+            }
+            else if (orient === 'top') {
+                this.topCurrent += info.rect.height;
+            }
+            else {
+                this.bottomCurrent -= info.rect.height;
+            }
+        }
+        _layoutRelativeItem(item, layoutRect) {
+            const rect = item.computeBoundsInRect(layoutRect);
+            if (item.layoutOrient === 'left' || item.layoutOrient === 'right') {
+                item.setLayoutRect({ width: rect.width });
+            }
+            else {
+                item.setLayoutRect({ height: rect.height });
+            }
+            if (item.layoutOrient === 'left') {
+                item.setLayoutStartPosition({
+                    x: this.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft
+                });
+                this.leftCurrent += rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+            }
+            else if (item.layoutOrient === 'right') {
+                this.rightCurrent -= rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+                item.setLayoutStartPosition({
+                    x: this.rightCurrent + item.layoutOffsetX + item.layoutPaddingLeft
+                });
+            }
+            else if (item.layoutOrient === 'top') {
+                item.setLayoutStartPosition({
+                    y: this.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+                });
+                this.topCurrent += rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+            }
+            else if (item.layoutOrient === 'bottom') {
+                this.bottomCurrent -= rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+                item.setLayoutStartPosition({
+                    y: this.bottomCurrent + item.layoutOffsetY + item.layoutPaddingTop
+                });
+            }
+        }
+        _layoutRegionItem(regionItems, regionRelativeTotalWidth, regionRelativeTotalHeight) {
             const regionWidth = Math.max(Math.min(regionRelativeTotalWidth, ...regionItems.map(region => { var _a; return (_a = region.maxWidth) !== null && _a !== void 0 ? _a : Number.MAX_VALUE; })), 0);
             const regionHeight = Math.max(Math.min(regionRelativeTotalHeight, ...regionItems.map(region => { var _a; return (_a = region.maxHeight) !== null && _a !== void 0 ? _a : Number.MAX_VALUE; })), 0);
             regionItems.forEach(region => {
@@ -55090,14 +55371,45 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     y: this.topCurrent + region.layoutOffsetY + region.layoutPaddingTop
                 });
             });
-            regionRelativeItems.forEach(item => {
+            return {
+                regionHeight,
+                regionWidth
+            };
+        }
+        layoutRegionItems(regionItems, regionRelativeItems, regionRelativeOverlapItems, overlapItems = {
+            left: { items: [], rect: { width: 0, height: 0 } },
+            right: { items: [], rect: { width: 0, height: 0 } },
+            top: { items: [], rect: { width: 0, height: 0 } },
+            bottom: { items: [], rect: { width: 0, height: 0 } },
+            z: { items: [], rect: { width: 0, height: 0 } }
+        }) {
+            let regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
+            let regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
+            regionRelativeItems
+                .filter(x => x.layoutOrient === 'left' || x.layoutOrient === 'right')
+                .forEach(item => {
+                this._layoutRelativeItem(item, this.getItemComputeLayoutRect(item));
+            });
+            this._layoutRelativeOverlap('left', overlapItems.left);
+            this._layoutRelativeOverlap('right', overlapItems.right);
+            regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
+            regionRelativeItems
+                .filter(x => x.layoutOrient === 'top' || x.layoutOrient === 'bottom')
+                .forEach(item => {
+                this._layoutRelativeItem(item, this.getItemComputeLayoutRect(item));
+            });
+            this._layoutRelativeOverlap('top', overlapItems.top);
+            this._layoutRelativeOverlap('bottom', overlapItems.bottom);
+            regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
+            const { regionWidth, regionHeight } = this._layoutRegionItem(regionItems, regionRelativeTotalWidth, regionRelativeTotalHeight);
+            regionRelativeItems.concat(regionRelativeOverlapItems).forEach(item => {
                 if (['left', 'right'].includes(item.layoutOrient)) {
                     const relativeRegion = this.filterRegionsWithID(regionItems, item.layoutBindRegionID[0]);
                     item.setLayoutRect({
-                        height: relativeRegion.layoutExcludeIndent.height
+                        height: relativeRegion.getLayoutRect().height
                     });
                     item.setLayoutStartPosition({
-                        y: relativeRegion.layoutExcludeIndent.y + item.layoutOffsetY + item.layoutPaddingTop
+                        y: relativeRegion.getLayoutStartPoint().y + item.layoutOffsetY + item.layoutPaddingTop
                     });
                     if (item.layoutOrient === 'right') {
                         item.setLayoutStartPosition({
@@ -55108,10 +55420,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 else if (['top', 'bottom'].includes(item.layoutOrient)) {
                     const relativeRegion = this.filterRegionsWithID(regionItems, item.layoutBindRegionID[0]);
                     item.setLayoutRect({
-                        width: relativeRegion.layoutExcludeIndent.width
+                        width: relativeRegion.getLayoutRect().width
                     });
                     item.setLayoutStartPosition({
-                        x: relativeRegion.layoutExcludeIndent.x + item.layoutOffsetX + item.layoutPaddingLeft
+                        x: relativeRegion.getLayoutStartPoint().x + item.layoutOffsetX + item.layoutPaddingLeft
                     });
                     if (item.layoutOrient === 'bottom') {
                         item.setLayoutStartPosition({
@@ -56382,7 +56694,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 update: [
                     {
                         type: 'update',
-                        options: { excludeChannels: 'points' }
+                        options: { excludeChannels: ['points', 'defined'] }
                     },
                     {
                         channel: ['points'],
@@ -57649,7 +57961,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const handledDatum = series
                     .getViewData()
                     .latestData.find((viewDatum) => keys.every(k => viewDatum[k] == datum[k]));
-                const seriesLayoutStartPoint = series.getRegion().getLayoutPositionExcludeIndent();
+                const seriesLayoutStartPoint = series.getRegion().getLayoutStartPoint();
                 let point;
                 if (handledDatum) {
                     point = series.dataToPosition(handledDatum);
@@ -58131,7 +58443,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerChartPlugin(MediaQuery);
     };
 
-    const version = "1.8.8-alpha.1";
+    const version = "1.8.9";
 
     var ChartTypeEnum;
     (function (ChartTypeEnum) {
@@ -58984,8 +59296,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return mergeSpec({}, theme, themeWithDirection);
         }
         transformSpec(spec, chartSpec, chartSpecInfo) {
-            this._transformSpec(spec, chartSpec, chartSpecInfo);
-            const result = this._initTheme(spec, chartSpec);
+            const result = super.transformSpec(spec, chartSpec, chartSpecInfo);
             this._transformLabelSpec(result.spec);
             return Object.assign(Object.assign({}, result), { markLabelSpec: this.markLabelSpec });
         }
@@ -59019,7 +59330,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._region;
         }
         getLayoutStartPoint() {
-            return this._region.getLayoutPositionExcludeIndent();
+            return this._region.getLayoutStartPoint();
         }
         getRootMark() {
             return this._rootMark;
@@ -59111,8 +59422,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.getLayoutRect = () => {
                 var _a, _b;
                 return {
-                    width: (_a = this._layoutRect.width) !== null && _a !== void 0 ? _a : this._region.getLayoutRectExcludeIndent().width,
-                    height: (_b = this._layoutRect.height) !== null && _b !== void 0 ? _b : this._region.getLayoutRectExcludeIndent().height
+                    width: (_a = this._layoutRect.width) !== null && _a !== void 0 ? _a : this._region.getLayoutRect().width,
+                    height: (_b = this._layoutRect.height) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().height
                 };
             };
             this._rootMark = null;
@@ -59242,7 +59553,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         getRawDataStatisticsByField(field, isNumeric) {
-            var _a;
+            var _a, _b;
             if (!this._rawStatisticsCache) {
                 this._rawStatisticsCache = {};
             }
@@ -59254,9 +59565,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._rawStatisticsCache[field] = this._viewDataStatistics.latestData[field];
                 }
                 else if (this._rawData) {
-                    this._rawStatisticsCache[field] = dimensionStatisticsOfSimpleData(this._rawData.latestData, [
-                        { key: field, operations: isNumeric ? ['min', 'max'] : ['values'] }
-                    ])[field];
+                    const fieldInfo = (_b = this._rawData.getFields()) === null || _b === void 0 ? void 0 : _b[field];
+                    if (fieldInfo && fieldInfo.lockStatisticsByDomain && fieldInfo.domain) {
+                        this._rawStatisticsCache[field] = {};
+                        if (isNumeric) {
+                            this._rawStatisticsCache[field].min = Math.min(fieldInfo.domain);
+                            this._rawStatisticsCache[field].max = Math.max(fieldInfo.domain);
+                        }
+                        else {
+                            this._rawStatisticsCache[field].values = fieldInfo.domain;
+                        }
+                    }
+                    else {
+                        this._rawStatisticsCache[field] = dimensionStatisticsOfSimpleData(this._rawData.latestData, [
+                            { key: field, operations: isNumeric ? ['min', 'max'] : ['values'] }
+                        ])[field];
+                    }
                 }
             }
             return this._rawStatisticsCache[field];
@@ -59431,10 +59755,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 parent: (_b = (_a = this._region).getGroupMark) === null || _b === void 0 ? void 0 : _b.call(_a),
                 dataView: false
             });
-            this.setMarkStyle(this._rootMark, {
-                x: () => this._region.layout.indent.left,
-                y: () => this._region.layout.indent.top
-            }, 'normal', exports.AttributeLevel.Base_Series);
             this._rootMark.setZIndex(this.layoutZIndex);
         }
         _initExtensionMark(options) {
@@ -60346,9 +60666,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _sortDataInAxisDomain() {
-            var _a, _b;
+            var _a, _b, _c;
             if ((_b = (_a = this.getViewData()) === null || _a === void 0 ? void 0 : _a.latestData) === null || _b === void 0 ? void 0 : _b.length) {
                 sortDataInAxisHelper(this._direction === Direction.horizontal ? this._yAxisHelper : this._xAxisHelper, this._direction === Direction.horizontal ? this._fieldY[0] : this._fieldX[0], this.getViewData().latestData);
+                (_c = this._data) === null || _c === void 0 ? void 0 : _c.updateData(true);
             }
         }
         reInit(spec) {
@@ -60365,7 +60686,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class LineLikeSeriesMixin {
         addSamplingCompile() {
             if (this._spec.sampling) {
-                const { width, height } = this._region.getLayoutRectExcludeIndent();
+                const { width, height } = this._region.getLayoutRect();
                 const samplingTrans = [];
                 const fieldsY = this._fieldY;
                 const fieldsX = this._fieldX;
@@ -62540,58 +62861,56 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._addMarkLabelSpec(spec, exports.SeriesMarkNameEnum.area);
             }
         }
-    }
-
-    class AreaSeries extends CartesianSeries {
-        constructor() {
-            super(...arguments);
-            this.type = exports.SeriesTypeEnum.area;
-            this.transformerConstructor = AreaSeriesSpecTransformer;
-            this._supportStack = true;
-            this._sortDataByAxis = false;
-        }
-        setAttrFromSpec() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            super.setAttrFromSpec();
-            const isAreaVisible = ((_a = this._spec.area) === null || _a === void 0 ? void 0 : _a.visible) !== false && ((_c = (_b = this._spec.area) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.visible) !== false;
-            const isLineVisible = ((_d = this._spec.line) === null || _d === void 0 ? void 0 : _d.visible) !== false && ((_f = (_e = this._spec.line) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.visible) !== false;
-            const areaSpec = (_g = this._spec.area) !== null && _g !== void 0 ? _g : {};
-            const lineSpec = (_h = this._spec.line) !== null && _h !== void 0 ? _h : {};
-            areaSpec.interactive = areaSpec.interactive || lineSpec.interactive;
-            areaSpec.support3d = areaSpec.support3d || lineSpec.support3d;
-            areaSpec.zIndex =
-                isValid$1(areaSpec.zIndex) || isValid$1(lineSpec.zIndex)
-                    ? Math.max((_j = areaSpec.zIndex) !== null && _j !== void 0 ? _j : 0, (_k = lineSpec.zIndex) !== null && _k !== void 0 ? _k : 0)
-                    : undefined;
-            if (areaSpec.style) {
-                delete areaSpec.style.stroke;
-            }
-            if (areaSpec.state) {
-                Object.keys(areaSpec.state).forEach(state => {
-                    if ('style' in areaSpec.state[state]) {
-                        delete areaSpec.state[state].style.stroke;
+        _transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo) {
+            var _a, _b, _c, _d, _e;
+            super._transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo);
+            const { area = {}, line = {}, seriesMark = 'area' } = spec;
+            const isAreaVisible = area.visible !== false && ((_a = area.style) === null || _a === void 0 ? void 0 : _a.visible) !== false;
+            const isLineVisible = line.visible !== false && ((_b = line.style) === null || _b === void 0 ? void 0 : _b.visible) !== false;
+            area.interactive = !!(area.interactive || ((_c = line.interactive) !== null && _c !== void 0 ? _c : true));
+            area.support3d = !!(area.support3d || line.support3d);
+            area.zIndex =
+                isValid$1(area.zIndex) || isValid$1(line.zIndex) ? Math.max((_d = area.zIndex) !== null && _d !== void 0 ? _d : 0, (_e = line.zIndex) !== null && _e !== void 0 ? _e : 0) : undefined;
+            if (area.style) {
+                delete area.style.stroke;
+            }
+            if (area.state) {
+                Object.keys(area.state).forEach(state => {
+                    if ('style' in area.state[state]) {
+                        delete area.state[state].style.stroke;
                     }
                     else {
-                        delete areaSpec.state[state].stroke;
+                        delete area.state[state].stroke;
                     }
                 });
             }
-            let mainSpec = areaSpec;
-            let subSpec = lineSpec;
-            const seriesMark = (_l = this._spec.seriesMark) !== null && _l !== void 0 ? _l : 'area';
+            let mainSpec = area;
+            let subSpec = line;
             if (seriesMark === 'line' || (isLineVisible && !isAreaVisible)) {
-                mainSpec = lineSpec;
-                subSpec = areaSpec;
+                mainSpec = line;
+                subSpec = area;
             }
-            areaSpec.style = mergeSpec({}, subSpec.style, mainSpec.style);
-            areaSpec.state = mergeSpec({}, subSpec.state, mainSpec.state);
+            area.style = mergeSpec({}, subSpec.style, mainSpec.style);
+            area.state = mergeSpec({}, subSpec.state, mainSpec.state);
             if (!isAreaVisible) {
-                areaSpec.style.fill = false;
+                area.style.fill = false;
             }
             if (!isLineVisible) {
-                areaSpec.style.stroke = false;
+                area.style.stroke = false;
             }
-            areaSpec.visible = !(!isAreaVisible && !isLineVisible);
+            area.visible = !(!isAreaVisible && !isLineVisible);
+            spec.area = area;
+            spec.line = line;
+        }
+    }
+
+    class AreaSeries extends CartesianSeries {
+        constructor() {
+            super(...arguments);
+            this.type = exports.SeriesTypeEnum.area;
+            this.transformerConstructor = AreaSeriesSpecTransformer;
+            this._supportStack = true;
+            this._sortDataByAxis = false;
         }
         initMark() {
             var _a, _b, _c, _d, _e;
@@ -63347,7 +63666,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         compile() {
             super.compile();
             if (this._spec.sampling) {
-                const { width, height } = this._region.getLayoutRectExcludeIndent();
+                const { width, height } = this._region.getLayoutRect();
                 const samplingTrans = [];
                 const fieldsY = this._fieldY;
                 const fieldsX = this._fieldX;
@@ -64862,30 +65181,32 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _scrollEventDispatch(params, regionOrSeries, callback) {
+            let stopBubble = false;
             if (!this._isGestureListener && (!params.event || this._option.disableTriggerEvent)) {
-                return;
+                return stopBubble;
             }
             const event = this._isGestureListener ? params : params.event;
             this._zoomableTrigger.parserScrollEvent(event);
             const { scrollX, scrollY, canvasX, canvasY } = event;
             if (isNil$1(scrollX) && isNil$1(scrollY)) {
-                return;
+                return stopBubble;
             }
             if (!pointInRect({
                 x: canvasX,
                 y: canvasY
             }, this._getRegionOrSeriesLayout(regionOrSeries), false)) {
-                return;
+                return stopBubble;
             }
             this._clickEnable = false;
             if (callback) {
-                callback({ scrollX, scrollY }, event);
+                stopBubble = callback({ scrollX, scrollY }, event);
             }
             this._eventObj.emit('scroll', {
                 scrollX,
                 scrollY,
                 model: this
             });
+            return stopBubble;
         }
         _bindScrollEventAsRegion(eventObj, regionOrSeries, callback, option) {
             var _a, _b;
@@ -64902,7 +65223,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._zoomableTrigger.clearScroll();
             }, delayTime));
             event.on(...scrollParams, delayMap[delayType]((params) => {
-                this._scrollEventDispatch(params, regionOrSeries, callback);
+                return this._scrollEventDispatch(params, regionOrSeries, callback);
             }, delayTime));
         }
         initScrollEventOfSeries(s, callback, option) {
@@ -65058,6 +65379,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 type: 'mercator'
             };
             this._actualScale = 1;
+            this._initialScale = 1;
             this.effect = {
                 scaleUpdate: () => {
                     this.coordinateHelper();
@@ -65139,6 +65461,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._projectionSpec.zoom = this._spec.zoomLimit.min;
             }
             this._actualScale = (_c = this._projectionSpec.zoom) !== null && _c !== void 0 ? _c : 1;
+            this._initialScale = this._actualScale;
             this._longitudeField = this._spec.longitudeField;
             this._latitudeField = this._spec.latitudeField;
         }
@@ -65244,8 +65567,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         onLayoutEnd(ctx) {
-            this.setLayoutRect(this._regions[0].getLayoutRectExcludeIndent());
-            this.setLayoutStartPosition(this._regions[0].getLayoutPositionExcludeIndent());
+            this.setLayoutRect(this._regions[0].getLayoutRect());
+            this.setLayoutStartPosition(this._regions[0].getLayoutStartPoint());
             const { width, height } = this.getLayoutRect();
             const { translate, scale, center } = this.evaluateProjection([0, 0], [width, height]);
             translate && this._projection.translate(translate);
@@ -65265,7 +65588,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }
             });
-            this._actualScale = 1;
+            this._actualScale = this._initialScale;
             super.onLayoutEnd(ctx);
         }
         onRender(ctx) {
@@ -65324,11 +65647,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._projection.invert(point);
         }
         evaluateProjection(start, size) {
-            var _a, _b;
+            var _a;
             const evaluated = this._projection.evaluate(start, size, this.collectFeatures());
             let translate = evaluated.translate();
-            const scale = evaluated.scale() * ((_a = this._projectionSpec.zoom) !== null && _a !== void 0 ? _a : 1);
-            const center = (_b = this._projectionSpec.center) !== null && _b !== void 0 ? _b : evaluated.invert([size[0] / 2, size[1] / 2]);
+            const scale = evaluated.scale() * this._initialScale;
+            const center = (_a = this._projectionSpec.center) !== null && _a !== void 0 ? _a : evaluated.invert([size[0] / 2, size[1] / 2]);
             center && (translate = [size[0] / 2, size[1] / 2]);
             return { translate, scale, center };
         }
@@ -67335,7 +67658,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._trigger.setStateKeys([...this._angleField, ...this._radiusField]);
         }
         _computeLayoutRadius() {
-            const { width, height } = this._region.getLayoutRectExcludeIndent();
+            const { width, height } = this._region.getLayoutRect();
             return Math.min(width / 2, height / 2);
         }
         fillData() {
@@ -67665,16 +67988,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         get center() {
             var _a, _b, _c, _d;
             return {
-                x: (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerX) !== null && _b !== void 0 ? _b : this._region.getLayoutRectExcludeIndent().width / 2,
-                y: (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.centerY) !== null && _d !== void 0 ? _d : this._region.getLayoutRectExcludeIndent().height / 2
+                x: (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerX) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2,
+                y: (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.centerY) !== null && _d !== void 0 ? _d : this._region.getLayoutRect().height / 2
             };
         }
         _buildMarkAttributeContext() {
             super._buildMarkAttributeContext();
             this._markAttributeContext.getCenter = () => {
                 return {
-                    x: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRectExcludeIndent().width / 2; },
-                    y: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : this._region.getLayoutRectExcludeIndent().height / 2; }
+                    x: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2; },
+                    y: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().height / 2; }
                 };
             };
             this._markAttributeContext.startAngleScale = (datum) => this.startAngleScale(datum);
@@ -67748,8 +68071,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const pieMark = this._pieMark;
             if (pieMark) {
                 this.setMarkStyle(pieMark, {
-                    x: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRectExcludeIndent().width / 2; },
-                    y: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : this._region.getLayoutRectExcludeIndent().height / 2; },
+                    x: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2; },
+                    y: () => { var _a, _b; return (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().height / 2; },
                     fill: this.getColorAttribute(),
                     outerRadius: isSpecValueWithScale(this._outerRadius)
                         ? this._outerRadius
@@ -67835,7 +68158,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return style;
         }
         computeLayoutRadius() {
-            const { width, height } = this._region.getLayoutRectExcludeIndent();
+            const { width, height } = this._region.getLayoutRect();
             return Math.min(width / 2, height / 2);
         }
         computeCenter(datum) {
@@ -68030,8 +68353,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             params3d.anchor3d = (datum) => {
                 var _a, _b, _c, _d;
                 const anchor = [
-                    (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRectExcludeIndent().width / 2,
-                    (_d = (_c = this._center) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : this._region.getLayoutRectExcludeIndent().height / 2
+                    (_b = (_a = this._center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : this._region.getLayoutRect().width / 2,
+                    (_d = (_c = this._center) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : this._region.getLayoutRect().height / 2
                 ];
                 return anchor;
             };
@@ -68434,7 +68757,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 disappear: preset === 'clipIn' ? undefined : radarPresetAnimation(params, preset, 'out'),
                 update: [
                     {
-                        options: { excludeChannels: 'points' }
+                        options: { excludeChannels: ['points', 'defined'] }
                     },
                     {
                         channel: ['points'],
@@ -70294,7 +70617,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         compile() {
             var _a, _b;
             super.compile();
-            const { width, height } = this._region.getLayoutRectExcludeIndent();
+            const { width, height } = this._region.getLayoutRect();
             if (!isValidNumber$1(width) || !isValidNumber$1(height) || !(height > 0 && width > 0)) {
                 return;
             }
@@ -70351,7 +70674,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _wordCloudTransformOption() {
             var _a, _b, _c, _d, _e;
-            const { width, height } = this._region.getLayoutRectExcludeIndent();
+            const { width, height } = this._region.getLayoutRect();
             const wordStyleSpec = (_b = (_a = this._spec.word) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
             return {
                 layoutType: !isTrueBrowser(this._option.mode) ? 'fast' : this._wordCloudConfig.layoutMode,
@@ -70381,7 +70704,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _wordCloudShapeTransformOption() {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            const { width, height } = this._region.getLayoutRectExcludeIndent();
+            const { width, height } = this._region.getLayoutRect();
             const wordStyleSpec = (_b = (_a = this._spec.word) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
             const wordCloudShapeConfig = (_c = this._wordCloudShapeConfig) !== null && _c !== void 0 ? _c : {};
             const fillingRotateAngles = this._wordCloudShapeConfig.fillingRotateAngles;
@@ -74652,11 +74975,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _computeRadius(radius) {
             if (isArray$1(radius)) {
                 return radius.map(r => {
-                    const { width, height } = this.getRegion().getLayoutRectExcludeIndent();
+                    const { width, height } = this.getRegion().getLayoutRect();
                     return Math.min(width / 2, height / 2) * r;
                 });
             }
-            const { width, height } = this.getRegion().getLayoutRectExcludeIndent();
+            const { width, height } = this.getRegion().getLayoutRect();
             return Math.min(width / 2, height / 2) * radius;
         }
         _computeLevel() {
@@ -76830,7 +77153,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onLayoutEnd(ctx) {
             super.onLayoutEnd(ctx);
-            this._viewBox.set(0, 0, this._region.getLayoutRectExcludeIndent().width, this._region.getLayoutRectExcludeIndent().height);
+            this._viewBox.set(0, 0, this._region.getLayoutRect().width, this._region.getLayoutRect().height);
             this.getViewData().reRunAllTransform();
             this._nodesSeriesData.updateData();
             this._linksSeriesData.updateData();
@@ -78283,7 +78606,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onLayoutEnd(ctx) {
             super.onLayoutEnd(ctx);
-            this._viewBox.set(0, 0, this._region.getLayoutRectExcludeIndent().width, this._region.getLayoutRectExcludeIndent().height);
+            this._viewBox.set(0, 0, this._region.getLayoutRect().width, this._region.getLayoutRect().height);
             this._rawData.reRunAllTransform();
             this.getViewData().reRunAllTransform();
         }
@@ -80396,9 +80719,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.updateScaleDomain();
                 });
             }
+            eachSeries(this._regions, s => {
+                s.event.on(exports.ChartEvent.rawDataUpdate, { filter: ({ model }) => (model === null || model === void 0 ? void 0 : model.id) === s.id }, () => {
+                    this._clearRawDomain();
+                });
+            }, {
+                userId: this._seriesUserId,
+                specIndex: this._seriesIndex
+            });
         }
         updateScaleDomain() {
         }
+        _clearRawDomain() {
+        }
         computeData(updateType) {
             if (this._tickData && (updateType === 'force' || !isEqual$1(this._scale.range(), [0, 1]))) {
                 this._tickData.getDataView().reRunAllTransform();
@@ -80724,11 +81057,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const isX = isXAxis(this.getOrient());
                     const isValidAxis = (item) => {
                         var _a;
-                        return ((isX ? !isXAxis(item.orient) : isXAxis(item.orient)) &&
+                        return (isX ? !isXAxis(item.getOrient()) : isXAxis(item.getOrient())) &&
                             isContinuous(item.getScale().type) &&
-                            ((_a = item
+                            item.getTickData()
+                            ? (_a = item
                                 .getTickData()
-                                .getLatestData()) === null || _a === void 0 ? void 0 : _a.find((d) => d.value === 0)));
+                                .getLatestData()) === null || _a === void 0 ? void 0 : _a.find((d) => d.value === 0)
+                            : item.getScale().ticks().includes(0);
                     };
                     const relativeAxes = axesComponents.filter(item => isValidAxis(item));
                     if (relativeAxes.length) {
@@ -80996,7 +81331,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             return scales;
         }
-        collectData(depth) {
+        collectData(depth, rawData) {
             const data = [];
             eachSeries(this._regions, s => {
                 var _a, _b, _c;
@@ -81025,8 +81360,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (field) {
                     field.forEach(f => {
                         var _a;
-                        if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
-                            data.push(seriesData.latestData[f]);
+                        if (rawData) {
+                            data.push(s.getRawDataStatisticsByField(f, false));
+                        }
+                        else {
+                            if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
+                                data.push(seriesData.latestData[f]);
+                            }
                         }
                     });
                 }
@@ -81133,12 +81473,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!ignoreGrid) {
                 const regions = this.getRegions();
                 let { x: minX, y: minY } = regions[0].getLayoutStartPoint();
-                let maxX = minX + regions[0].getLayoutRectExcludeIndent().width;
-                let maxY = minY + regions[0].getLayoutRectExcludeIndent().height;
+                let maxX = minX + regions[0].getLayoutRect().width;
+                let maxY = minY + regions[0].getLayoutRect().height;
                 for (let index = 1; index < regions.length; index++) {
                     const region = regions[index];
-                    const { x, y } = region.getLayoutPositionExcludeIndent();
-                    const { width, height } = region.getLayoutRectExcludeIndent();
+                    const { x, y } = region.getLayoutStartPoint();
+                    const { width, height } = region.getLayoutRect();
                     minX = Math.min(minX, x);
                     maxX = Math.max(maxX, width + x);
                     minY = Math.min(minY, y);
@@ -81352,15 +81692,34 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.setScaleNice();
         }
         setLinearScaleNice() {
-            var _a, _b, _c, _d, _e;
-            let tickCount = (_d = (_b = (_a = this._spec.tick) === null || _a === void 0 ? void 0 : _a.forceTickCount) !== null && _b !== void 0 ? _b : (_c = this._spec.tick) === null || _c === void 0 ? void 0 : _c.tickCount) !== null && _d !== void 0 ? _d : DEFAULT_TICK_COUNT;
-            if (!isValidNumber$1(tickCount)) {
+            var _a;
+            let tickCount = DEFAULT_TICK_COUNT;
+            const tick = this._spec.tick || {};
+            if (isValidNumber$1(tick.forceTickCount)) {
+                tickCount = tick.forceTickCount;
+            }
+            else if (isFunction$1(tick.tickCount)) {
+                const range = this._scale.range();
+                let rangeSize = Math.abs(range[range.length - 1] - range[0]);
+                if (rangeSize === 1 && this._option) {
+                    const isX = isXAxis(this._orient);
+                    rangeSize = isX ? this._option.getChartViewRect().width : this._option.getChartViewRect().height;
+                }
+                tickCount = tick.tickCount({
+                    rangeSize,
+                    labelStyle: this._spec.label && this._spec.label.style
+                });
+            }
+            else if (isValidNumber$1(tick.tickCount)) {
+                tickCount = tick.tickCount;
+            }
+            else {
                 tickCount = DEFAULT_TICK_COUNT;
             }
             if (this._spec.niceType === 'accurateFirst') {
                 tickCount = Math.max(DEFAULT_TICK_COUNT, tickCount);
             }
-            const { min, max } = (_e = this._domain) !== null && _e !== void 0 ? _e : {};
+            const { min, max } = (_a = this._domain) !== null && _a !== void 0 ? _a : {};
             if (isNil$1(min) && isNil$1(max)) {
                 this._nice && this._scale.nice(tickCount);
             }
@@ -81581,6 +81940,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class BandAxisMixin {
+        constructor() {
+            this._rawDomainIndex = [];
+        }
         dataToPosition(values, cfg = {}) {
             var _a, _b;
             if (values.length === 0 || this._scales.length === 0) {
@@ -81645,9 +82007,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return Array.from(tempSet);
         }
         updateScaleDomain() {
+            var _a;
             if (!this.isSeriesDataEnable()) {
                 return;
             }
+            if (!((_a = this._rawDomainIndex) === null || _a === void 0 ? void 0 : _a.length) && this._scales.length) {
+                this._updateRawDomain();
+            }
             const userDomain = this._spec.domain;
             for (let i = 0; i < this._scales.length; i++) {
                 if (userDomain && userDomain.length && i === 0) {
@@ -81656,13 +82022,31 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 else {
                     const data = this.collectData(i);
                     const domain = this.computeDomain(data);
-                    this._scales[i].domain(domain);
+                    this._scales[i].domain(domain.sort((a, b) => this._rawDomainIndex[i][a] - this._rawDomainIndex[i][b]));
                 }
             }
             this.transformScaleDomain();
             this.event.emit(exports.ChartEvent.scaleDomainUpdate, { model: this });
             this.event.emit(exports.ChartEvent.scaleUpdate, { model: this, value: 'domain' });
         }
+        _updateRawDomain() {
+            this._rawDomainIndex = [];
+            const userDomain = this._spec.domain;
+            for (let i = 0; i < this._scales.length; i++) {
+                if (userDomain && userDomain.length && i === 0) {
+                    this._scales[i].domain(userDomain);
+                }
+                else {
+                    const data = this.collectData(i, true);
+                    const domain = this.computeDomain(data);
+                    this._rawDomainIndex[i] = {};
+                    domain.forEach((d, _i) => (this._rawDomainIndex[i][d] = _i));
+                }
+            }
+        }
+        _clearRawDomain() {
+            this._rawDomainIndex = [];
+        }
     }
 
     class CartesianBandAxis extends CartesianAxis {
@@ -81930,7 +82314,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._transformLayoutPosition = (pos) => {
                 var _a;
                 const region = (_a = this.getRegions()) === null || _a === void 0 ? void 0 : _a[0];
-                return region ? region.getLayoutPositionExcludeIndent() : pos;
+                return region ? region.getLayoutStartPoint() : pos;
             };
         }
         get center() {
@@ -82079,7 +82463,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._scale.range(newRange);
             return true;
         }
-        collectData(depth) {
+        collectData(depth, rawData) {
             const data = [];
             eachSeries(this._regions, s => {
                 var _a, _b, _c;
@@ -82099,8 +82483,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (field) {
                     field.forEach(f => {
                         var _a;
-                        if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
-                            data.push(seriesData.latestData[f]);
+                        if (rawData) {
+                            data.push(s.getRawDataStatisticsByField(f, false));
+                        }
+                        else {
+                            if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
+                                data.push(seriesData.latestData[f]);
+                            }
                         }
                     });
                 }
@@ -82300,7 +82689,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return (Math.min(width, height) / 2) * innerRadius;
         }
         getRefLayoutRect() {
-            return this.getRegions()[0].getLayoutRectExcludeIndent();
+            return this.getRegions()[0].getLayoutRect();
         }
         getRefSeriesRadius() {
             let outerRadius = POLAR_DEFAULT_RADIUS;
@@ -85575,8 +85964,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         });
         const activeType = (_a = opt.activeType) !== null && _a !== void 0 ? _a : (markInfoList.length > 1 ? 'dimension' : 'mark');
-        const regionPos = region.getLayoutPositionExcludeIndent();
-        const regionRect = region.getLayoutRectExcludeIndent();
+        const regionPos = region.getLayoutStartPoint();
+        const regionRect = region.getLayoutRect();
         const container = componentOptions.globalInstance.getContainer();
         const containerPos = Object.assign({ x: 0, y: 0 }, (container ? getElementAbsolutePosition(container) : {}));
         const bound = (pos) => ({
@@ -86281,6 +86670,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.trigger = 'hover';
             this.triggerOff = 'hover';
             this._handleEvent = throttle((params) => {
+                if (!this._option) {
+                    return;
+                }
                 const { event } = params;
                 const layer = this._option.getCompiler().getStage().getLayer(undefined);
                 const point = { x: event.viewX, y: event.viewY };
@@ -86414,11 +86806,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 const regions = axis.getRegions();
                 regions.forEach(r => {
-                    const { x: regionStartX, y: regionStartY } = r.getLayoutPositionExcludeIndent();
+                    const { x: regionStartX, y: regionStartY } = r.getLayoutStartPoint();
                     x1 = Math.min(x1, regionStartX - sx);
                     y1 = Math.min(y1, regionStartY - sy);
-                    x2 = Math.max(x2, regionStartX + r.getLayoutRectExcludeIndent().width - sx);
-                    y2 = Math.max(y2, regionStartY + r.getLayoutRectExcludeIndent().height - sy);
+                    x2 = Math.max(x2, regionStartX + r.getLayoutRect().width - sx);
+                    y2 = Math.max(y2, regionStartY + r.getLayoutRect().height - sy);
                 });
                 map.set(idx, { x1, y1, x2, y2, axis: axis });
             });
@@ -86428,8 +86820,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onLayoutEnd(ctx) {
             const region = this._regions[0];
-            this.setLayoutRect(region.getLayoutRectExcludeIndent());
-            this.setLayoutStartPosition(region.getLayoutPositionExcludeIndent());
+            this.setLayoutRect(region.getLayoutRect());
+            this.setLayoutStartPosition(region.getLayoutStartPoint());
             super.onLayoutEnd(ctx);
         }
         onRender(ctx) {
@@ -86720,6 +87112,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             let xCrossHairInfo = {
                 height: 0,
                 leftPos: 0,
+                rightPos: 0,
                 topPos: 0,
                 x: 0,
                 bottom: { visible: false, text: '', dx: 0, dy: 0 },
@@ -86731,6 +87124,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 width: 0,
                 leftPos: 0,
                 topPos: 0,
+                bottomPos: 0,
                 y: 0,
                 left: { visible: false, text: '', dx: 0, dy: 0 },
                 right: { visible: false, text: '', dx: 0, dy: 0 },
@@ -86767,7 +87161,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             getRegionArea(xRegion, this._currValueX);
             getRegionArea(yRegion, this._currValueY);
             let indexWidth;
+            let offsetWidth = 0;
             let valueHeight;
+            let offsetHeight = 0;
             if (this._xHair) {
                 this._currValueX.forEach(({ axis, v }) => {
                     var _a;
@@ -86775,6 +87171,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const xScale = axis.getScale();
                     if (isDiscrete(xScale.type)) {
                         indexWidth = xScale.bandwidth();
+                        if (indexWidth === 0 && xScale.step) {
+                            offsetWidth = xScale.step();
+                        }
                     }
                     else if (isContinuous(xScale.type)) {
                         const fieldX = series.fieldX[0];
@@ -86816,6 +87215,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const yScale = axis.getScale();
                     if (isDiscrete(yScale.type)) {
                         valueHeight = yScale.bandwidth();
+                        if (valueHeight === 0 && yScale.step) {
+                            offsetHeight = yScale.step();
+                        }
                     }
                     else if (isContinuous(yScale.type)) {
                         const fieldY = series.fieldY[0];
@@ -86855,6 +87257,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             else {
                 xCrossHairInfo.leftPos = xRegion.x1;
+                xCrossHairInfo.rightPos = xRegion.x2;
                 xCrossHairInfo.topPos = xRegion.y1;
                 xCrossHairInfo.height = xRegion.y2 - xRegion.y1;
                 xCrossHairInfo.x = x + this.getLayoutStartPoint().x;
@@ -86870,6 +87273,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             else {
                 yCrossHairInfo.leftPos = yRegion.x1;
                 yCrossHairInfo.topPos = yRegion.y1;
+                yCrossHairInfo.bottomPos = yRegion.y2;
                 yCrossHairInfo.width = yRegion.x2 - yRegion.x1;
                 yCrossHairInfo.y = y + this.getLayoutStartPoint().y;
                 if ((_d = (_c = this._yHair) === null || _c === void 0 ? void 0 : _c.label) === null || _d === void 0 ? void 0 : _d.formatMethod) {
@@ -86879,15 +87283,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
             if (tag) {
-                LayoutType.HORIZONTAL && this._layoutHorizontal(yCrossHairInfo, valueHeight !== null && valueHeight !== void 0 ? valueHeight : 0);
-                LayoutType.VERTICAL && this._layoutVertical(xCrossHairInfo, indexWidth !== null && indexWidth !== void 0 ? indexWidth : 0);
+                LayoutType.HORIZONTAL && this._layoutHorizontal(yCrossHairInfo, valueHeight !== null && valueHeight !== void 0 ? valueHeight : 0, offsetHeight);
+                LayoutType.VERTICAL && this._layoutVertical(xCrossHairInfo, indexWidth !== null && indexWidth !== void 0 ? indexWidth : 0, offsetWidth);
             }
             if (this.enableRemain) {
                 this._cacheXCrossHairInfo = Object.assign(Object.assign({}, xCrossHairInfo), { _isCache: true });
                 this._cacheYCrossHairInfo = Object.assign(Object.assign({}, yCrossHairInfo), { _isCache: true });
             }
         }
-        _layoutVertical(crosshairInfo, bandWidth) {
+        _layoutVertical(crosshairInfo, bandWidth, offsetWidth) {
             var _a, _b;
             if ((crosshairInfo._isCache && this.enableRemain) || !this._xHair) {
                 return;
@@ -86904,9 +87308,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 else if (type === 'rect') {
                     const extend = this._getRectSize(this._xHair, bandWidth, crosshairInfo.axis);
+                    const { leftPos, rightPos } = crosshairInfo;
                     positionAttribute = {
-                        start: { x: x - extend / 2, y: topPos },
-                        end: { x: x + bandWidth + extend / 2, y: topPos + height }
+                        start: { x: Math.max(x - extend / 2 - offsetWidth / 2, leftPos), y: topPos },
+                        end: { x: Math.min(x + bandWidth + extend / 2 + offsetWidth / 2, rightPos), y: topPos + height }
                     };
                 }
                 this._updateCrosshair('x', type, positionAttribute);
@@ -86932,7 +87337,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
         }
-        _layoutHorizontal(crosshairInfo, bandHeight) {
+        _layoutHorizontal(crosshairInfo, bandHeight, offsetHeight) {
             var _a, _b;
             if ((crosshairInfo._isCache && this.enableRemain) || !this._yHair) {
                 return;
@@ -86949,9 +87354,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 else if (type === 'rect') {
                     const extend = this._getRectSize(this._yHair, bandHeight, crosshairInfo.axis);
+                    const { topPos, bottomPos } = crosshairInfo;
                     positionAttribute = {
-                        start: { x: leftPos, y: y - extend / 2 },
-                        end: { x: leftPos + width, y: y + bandHeight + extend / 2 }
+                        start: { x: leftPos, y: Math.max(y - extend / 2 - offsetHeight / 2, topPos) },
+                        end: { x: leftPos + width, y: Math.min(y + bandHeight + extend / 2 + offsetHeight / 2, bottomPos) }
                     };
                 }
                 this._updateCrosshair('y', type, positionAttribute);
@@ -87616,7 +88022,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 const { zoomDelta, zoomX, zoomY } = params;
                 const { x, y } = this._regions[0].getLayoutStartPoint();
-                const { width, height } = this._regions[0].getLayoutRectExcludeIndent();
+                const { width, height } = this._regions[0].getLayoutRect();
                 const delta = Math.abs(this._start - this._end);
                 const zoomRate = (_b = (_a = this._spec.roamZoom) === null || _a === void 0 ? void 0 : _a.rate) !== null && _b !== void 0 ? _b : 1;
                 if (delta >= 1 && zoomDelta < 1) {
@@ -87642,14 +88048,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._handleChartScroll = (params, e) => {
                 var _a;
                 if (!this._activeRoam) {
-                    return;
+                    return false;
                 }
                 const { scrollX, scrollY } = params;
                 let value = this._isHorizontal ? scrollX : scrollY;
+                const active = this._isHorizontal ? abs$1(scrollX / scrollY) >= 0.5 : abs$1(scrollY / scrollX) >= 0.5;
                 if (!this._scrollAttr.reverse) {
                     value = -value;
                 }
-                this._handleChartMove(value, (_a = this._scrollAttr.rate) !== null && _a !== void 0 ? _a : 1);
+                if (active) {
+                    this._handleChartMove(value, (_a = this._scrollAttr.rate) !== null && _a !== void 0 ? _a : 1);
+                }
+                return active;
             };
             this._handleChartDrag = (delta, e) => {
                 var _a;
@@ -88819,8 +89229,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _getIndicatorAttrs() {
             const region = this._regions[0];
-            const { width, height } = region.getLayoutRectExcludeIndent();
-            const { x, y } = region.getLayoutPositionExcludeIndent();
+            const { width, height } = region.getLayoutRect();
+            const { x, y } = region.getLayoutStartPoint();
             const contentComponentSpec = [];
             array(this._spec.content).forEach((eachItem) => {
                 const contentSpec = mergeSpec({}, this._theme.content, eachItem);
@@ -88885,7 +89295,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _computeLayoutRadius() {
             const region = this._regions[0];
-            const { width, height } = region.getLayoutRectExcludeIndent();
+            const { width, height } = region.getLayoutRect();
             return Math.min(width / 2, height / 2);
         }
         isRelativeModel(model) {
@@ -89040,13 +89450,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
     function xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange) {
         const regionStart = startRelativeSeries.getRegion();
-        const regionStartLayoutStartPoint = regionStart.getLayoutPositionExcludeIndent();
+        const regionStartLayoutStartPoint = regionStart.getLayoutStartPoint();
         const regionEnd = endRelativeSeries.getRegion();
-        const regionEndLayoutStartPoint = regionEnd.getLayoutPositionExcludeIndent();
+        const regionEndLayoutStartPoint = regionEnd.getLayoutStartPoint();
         const regionWidth = Math.abs(Math.min(regionStartLayoutStartPoint.x, regionEndLayoutStartPoint.x) -
-            Math.max(regionStartLayoutStartPoint.x + regionStart.getLayoutRectExcludeIndent().width, regionEndLayoutStartPoint.x + regionEnd.getLayoutRectExcludeIndent().width));
+            Math.max(regionStartLayoutStartPoint.x + regionStart.getLayoutRect().width, regionEndLayoutStartPoint.x + regionEnd.getLayoutRect().width));
         const regionHeight = Math.abs(Math.min(regionStartLayoutStartPoint.y, regionEndLayoutStartPoint.y) -
-            Math.max(regionStartLayoutStartPoint.y + regionStart.getLayoutRectExcludeIndent().height, regionEndLayoutStartPoint.y + regionEnd.getLayoutRectExcludeIndent().height));
+            Math.max(regionStartLayoutStartPoint.y + regionStart.getLayoutRect().height, regionEndLayoutStartPoint.y + regionEnd.getLayoutRect().height));
         const refSeries = {
             relativeSeries,
             startRelativeSeries,
@@ -89066,7 +89476,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             else if (isValid$1(datum.x)) {
                 const x = getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint);
-                const y = Math.max(regionStartLayoutStartPoint.y + regionStart.getLayoutRectExcludeIndent().height, regionEndLayoutStartPoint.y + regionEnd.getLayoutRectExcludeIndent().height);
+                const y = Math.max(regionStartLayoutStartPoint.y + regionStart.getLayoutRect().height, regionEndLayoutStartPoint.y + regionEnd.getLayoutRect().height);
                 const y1 = Math.min(regionStartLayoutStartPoint.y, regionEndLayoutStartPoint.y);
                 lines.push([
                     {
@@ -89082,7 +89492,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             else if (isValid$1(datum.y)) {
                 const x = Math.min(regionStartLayoutStartPoint.x, regionEndLayoutStartPoint.x);
                 const y = getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint);
-                const x1 = Math.max(regionStartLayoutStartPoint.x + regionStart.getLayoutRectExcludeIndent().width, regionEndLayoutStartPoint.x + regionEnd.getLayoutRectExcludeIndent().width);
+                const x1 = Math.max(regionStartLayoutStartPoint.x + regionStart.getLayoutRect().width, regionEndLayoutStartPoint.x + regionEnd.getLayoutRect().width);
                 lines.push([
                     {
                         x: x,
@@ -89105,8 +89515,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d;
             const refRelativeSeries = (datum === null || datum === void 0 ? void 0 : datum.getRefRelativeSeries) ? datum.getRefRelativeSeries() : relativeSeries;
             const regionStart = refRelativeSeries.getRegion();
-            const regionStartLayoutStartPoint = regionStart.getLayoutPositionExcludeIndent();
-            const { width: regionWidth, height: regionHeight } = regionStart.getLayoutRectExcludeIndent();
+            const regionStartLayoutStartPoint = regionStart.getLayoutStartPoint();
+            const { width: regionWidth, height: regionHeight } = regionStart.getLayoutRect();
             let offsetX = 0;
             let offsetY = 0;
             if (coordinatesOffset) {
@@ -89142,8 +89552,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     function positionLayout(positions, series, regionRelative) {
         if (regionRelative) {
             const region = series.getRegion();
-            const { x: regionStartX, y: regionStartY } = region.getLayoutPositionExcludeIndent();
-            const { width: regionWidth, height: regionHeight } = region.getLayoutRectExcludeIndent();
+            const { x: regionStartX, y: regionStartY } = region.getLayoutStartPoint();
+            const { width: regionWidth, height: regionHeight } = region.getLayoutRect();
             return positions.map(position => {
                 let { x, y } = position;
                 if (isPercent(x)) {
@@ -89181,8 +89591,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         let minY = Infinity;
         let maxY = -Infinity;
         regions.forEach((region) => {
-            const regionPos = region.getLayoutPositionExcludeIndent();
-            const regionRect = region.getLayoutRectExcludeIndent();
+            const regionPos = region.getLayoutStartPoint();
+            const regionRect = region.getLayoutRect();
             if (regionPos.x < minX) {
                 minX = regionPos.x;
             }
@@ -89589,17 +89999,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 let expandDistanceValue;
                 if (isPercent(expandDistance)) {
                     const regionStart = startRelativeSeries.getRegion();
-                    const regionStartLayoutStartPoint = regionStart.getLayoutPositionExcludeIndent();
+                    const regionStartLayoutStartPoint = regionStart.getLayoutStartPoint();
                     const regionEnd = endRelativeSeries.getRegion();
-                    const regionEndLayoutStartPoint = regionEnd.getLayoutPositionExcludeIndent();
+                    const regionEndLayoutStartPoint = regionEnd.getLayoutStartPoint();
                     if (connectDirection === 'bottom' || connectDirection === 'top') {
                         const regionHeight = Math.abs(Math.min(regionStartLayoutStartPoint.y, regionEndLayoutStartPoint.y) -
-                            Math.max(regionStartLayoutStartPoint.y + regionStart.getLayoutRectExcludeIndent().height, regionEndLayoutStartPoint.y + regionEnd.getLayoutRectExcludeIndent().height));
+                            Math.max(regionStartLayoutStartPoint.y + regionStart.getLayoutRect().height, regionEndLayoutStartPoint.y + regionEnd.getLayoutRect().height));
                         expandDistanceValue = (Number(expandDistance.substring(0, expandDistance.length - 1)) * regionHeight) / 100;
                     }
                     else {
                         const regionWidth = Math.abs(Math.min(regionStartLayoutStartPoint.x, regionEndLayoutStartPoint.x) -
-                            Math.max(regionStartLayoutStartPoint.x + regionStart.getLayoutRectExcludeIndent().width, regionEndLayoutStartPoint.x + regionEnd.getLayoutRectExcludeIndent().width));
+                            Math.max(regionStartLayoutStartPoint.x + regionStart.getLayoutRect().width, regionEndLayoutStartPoint.x + regionEnd.getLayoutRect().width));
                         expandDistanceValue = (Number(expandDistance.substring(0, expandDistance.length - 1)) * regionWidth) / 100;
                     }
                 }
@@ -90111,6 +90521,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (!isEqual$1(attrs, this._cacheAttrs)) {
                         this._cacheAttrs = attrs;
                         this._playerComponent.setAttributes(attrs);
+                        this._playerComponent._initAttributes();
+                        this._playerComponent.render();
                     }
                 }
                 else {
@@ -90933,8 +91345,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 .filter(cmp => cmp.type === 'totalLabel')
                                 .map(cmp => cmp.getMarks()[0].getProductId())
                         },
-                        x: labelInfos[0].series.getRegion().layout.indent.left,
-                        y: labelInfos[0].series.getRegion().layout.indent.top
+                        x: 0,
+                        y: 0
                     }, defaultLabelConfig(rule, labelInfo), Object.assign(Object.assign(Object.assign({}, pickWithout(labelSpec, ['position', 'style', 'state', 'type'])), interactive), { centerOffset }));
                     if (rule === 'line' || rule === 'area') {
                         spec.type = rule;
@@ -90951,7 +91363,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         : textAttribute(labelInfos[params.labelIndex], datum, labelSpec.formatMethod, labelSpec.formatter);
                 }
             })
-                .size(() => labelInfos[0].series.getRegion().getLayoutRectExcludeIndent());
+                .size(() => labelInfos[0].series.getRegion().getLayoutRect());
         }
         compileMarks() {
             this.getMarks().forEach(m => {
@@ -91072,8 +91484,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         return mergeSpec({
                             textStyle: { pickable: this._spec.interactive === true },
                             position: totalLabelPosition(series, this._baseMark.type),
-                            x: series.getRegion().layout.indent.left,
-                            y: series.getRegion().layout.indent.top
+                            x: 0,
+                            y: 0
                         }, Object.assign({ offset,
                             animation,
                             overlap, dataFilter: (data) => {
@@ -91089,7 +91501,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         labelSpec: series.getSpec().totalLabel
                     }, datum, this._spec.formatMethod);
                 })
-                    .size(() => this._regions[0].getLayoutRectExcludeIndent());
+                    .size(() => this._regions[0].getLayoutRect());
             });
         }
         compileMarks() {
@@ -91352,8 +91764,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return data;
         }
         _getBrushInteractiveAttr(region) {
-            const regionLayoutPosition = region.getLayoutPositionExcludeIndent();
-            const regionLayoutRect = region.getLayoutRectExcludeIndent();
+            const regionLayoutPosition = region.getLayoutStartPoint();
+            const regionLayoutRect = region.getLayoutRect();
             const seriesRegionStartX = regionLayoutPosition.x;
             const seriesRegionEndX = seriesRegionStartX + regionLayoutRect.width;
             const seriesRegionStartY = regionLayoutPosition.y;
@@ -91489,11 +91901,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         _reconfigLinkedItem(operateMask, region) {
-            const regionLayoutPos = region.getLayoutPositionExcludeIndent();
+            const regionLayoutPos = region.getLayoutStartPoint();
             const seriesId = region.getSeries().map(s => s.id);
             this._linkedSeries.forEach((s) => {
                 if (!seriesId.includes(s.id)) {
-                    const sRegionLayoutPos = s.getRegion().getLayoutPositionExcludeIndent();
+                    const sRegionLayoutPos = s.getRegion().getLayoutStartPoint();
                     const regionOffsetX = sRegionLayoutPos.x - regionLayoutPos.x;
                     const regionOffsetY = sRegionLayoutPos.y - regionLayoutPos.y;
                     this._linkedItemMap[s.id].forEach((mark) => {
@@ -92306,7 +92718,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
                 const datum = this._data.getLatestData()[i];
                 const anchor = this.dataToPosition(datum);
-                const regionPos = this.getRegions()[0].getLayoutPositionExcludeIndent();
+                const regionPos = this.getRegions()[0].getLayoutStartPoint();
                 const showLeader = !!(((_b = this._spec.leader) === null || _b === void 0 ? void 0 : _b.visible) && (icon || nameLabel || valueLabel));
                 this._markerComponents[i].setAttributes({
                     x: regionPos.x,
@@ -92649,22 +93061,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class Layout3d extends Layout {
         layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
-            this._chartLayoutRect = chartLayoutRect;
-            this._chartViewBox = chartViewBox;
-            this.leftCurrent = chartLayoutRect.x;
-            this.topCurrent = chartLayoutRect.y;
-            this.rightCurrent = chartLayoutRect.x + chartLayoutRect.width;
-            this.bottomCurrent = chartLayoutRect.height + chartLayoutRect.y;
-            items.sort((a, b) => b.layoutLevel - a.layoutLevel);
-            this.layoutNormalItems(items.filter(x => x.layoutType === 'normal'));
+            this._layoutInit(_chart, items, chartLayoutRect, chartViewBox);
+            this._layoutNormalItems(items);
             const layoutTemp = {
-                leftCurrent: this.leftCurrent,
-                _topCurrent: this.topCurrent,
-                _rightCurrent: this.rightCurrent,
-                _bottomCurrent: this.bottomCurrent
+                left: this.leftCurrent,
+                top: this.topCurrent,
+                right: this.rightCurrent,
+                bottom: this.bottomCurrent
             };
-            const regionItems = items.filter(x => x.layoutType === 'region');
-            const relativeItems = items.filter(x => x.layoutType === 'region-relative');
             const absoluteItem = items.filter(x => x.layoutType === 'absolute');
             const zItems = absoluteItem.filter(i => {
                 return i.layoutOrient === 'z';
@@ -92678,23 +93082,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.rightCurrent -= extraWH.width / 8;
             this.topCurrent += extraWH.height / 8;
             this.bottomCurrent -= extraWH.height / 8;
-            const offsetWH = {
-                offsetBottom: 0,
-                offsetTop: 0,
-                offsetLeft: 0,
-                offsetRight: 0
-            };
-            this.layoutRegionItems(regionItems, relativeItems, offsetWH);
-            if (relativeItems.some(i => i.autoIndent)) {
-                const { top, bottom, left, right } = this._checkAutoIndent(relativeItems);
-                if (top || bottom || left || right) {
-                    this.topCurrent = layoutTemp._topCurrent + top;
-                    this.bottomCurrent = layoutTemp._bottomCurrent - bottom;
-                    this.leftCurrent = layoutTemp.leftCurrent + left;
-                    this.rightCurrent = layoutTemp._rightCurrent - right;
-                    this.layoutRegionItems(regionItems, relativeItems);
-                }
-            }
+            const { regionItems, relativeItems, relativeOverlapItems, allRelatives, overlapItems } = this._groupItems(items);
+            this.layoutRegionItems(regionItems, relativeItems, relativeOverlapItems, overlapItems);
+            this._processAutoIndent(regionItems, relativeItems, relativeOverlapItems, overlapItems, allRelatives, layoutTemp);
             const absoluteItemExceptZAxis = absoluteItem.filter(i => i.layoutOrient !== 'z');
             this.layoutAbsoluteItems(absoluteItemExceptZAxis);
             const xAxis = relativeItems.filter(item => {
@@ -92731,84 +93121,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 item.absoluteLayoutInRect(zRect);
             });
         }
-        layoutRegionItems(regionItems, regionRelativeItems, extraOffset) {
-            let regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
-            let regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
-            if (!extraOffset) {
-                extraOffset = { offsetLeft: 0, offsetRight: 0, offsetTop: 0, offsetBottom: 0 };
-            }
-            regionRelativeItems
-                .filter(x => x.layoutOrient === 'left' || x.layoutOrient === 'right')
-                .forEach(item => {
-                const layoutRect = this.getItemComputeLayoutRect(item, extraOffset);
-                const rect = item.computeBoundsInRect(layoutRect);
-                item.setLayoutRect({ width: rect.width });
-                if (item.layoutOrient === 'left') {
-                    item.setLayoutStartPosition({
-                        x: this.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft + extraOffset.offsetLeft
-                    });
-                    this.leftCurrent += rect.width + item.layoutPaddingLeft + item.layoutPaddingRight + extraOffset.offsetLeft;
-                }
-                else if (item.layoutOrient === 'right') {
-                    this.rightCurrent -= rect.width + item.layoutPaddingLeft + item.layoutPaddingRight + extraOffset.offsetRight;
-                    item.setLayoutStartPosition({
-                        x: this.rightCurrent + item.layoutOffsetX + item.layoutPaddingLeft
-                    });
-                }
-            });
-            regionRelativeTotalWidth = this.rightCurrent - this.leftCurrent;
-            regionRelativeItems
-                .filter(x => x.layoutOrient === 'top' || x.layoutOrient === 'bottom')
-                .forEach(item => {
-                const layoutRect = this.getItemComputeLayoutRect(item, extraOffset);
-                const rect = item.computeBoundsInRect(layoutRect);
-                item.setLayoutRect({ height: rect.height });
-                if (item.layoutOrient === 'top') {
-                    item.setLayoutStartPosition({
-                        y: this.topCurrent + item.layoutOffsetY + item.layoutPaddingTop + extraOffset.offsetTop
-                    });
-                    this.topCurrent += rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
-                }
-                else if (item.layoutOrient === 'bottom') {
-                    this.bottomCurrent -=
-                        rect.height + item.layoutPaddingTop + item.layoutPaddingBottom + extraOffset.offsetBottom;
-                    item.setLayoutStartPosition({
-                        y: this.bottomCurrent + item.layoutOffsetY + item.layoutPaddingTop
-                    });
-                }
-            });
-            regionRelativeTotalHeight = this.bottomCurrent - this.topCurrent;
-            regionItems.forEach(region => {
-                region.setLayoutRect({
-                    width: regionRelativeTotalWidth,
-                    height: regionRelativeTotalHeight
-                });
-                region.setLayoutStartPosition({
-                    x: this.leftCurrent + region.layoutOffsetX + region.layoutPaddingLeft,
-                    y: this.topCurrent + region.layoutOffsetY + region.layoutPaddingTop
-                });
-            });
-            regionRelativeItems.forEach(item => {
-                if (['left', 'right'].includes(item.layoutOrient)) {
-                    const relativeRegion = this.filterRegionsWithID(regionItems, item.layoutBindRegionID[0]);
-                    item.setLayoutRect({
-                        height: relativeRegion.layoutExcludeIndent.height
-                    });
-                    item.setLayoutStartPosition({
-                        y: relativeRegion.layoutExcludeIndent.y + item.layoutOffsetY + item.layoutPaddingTop
-                    });
-                }
-                else if (['top', 'bottom'].includes(item.layoutOrient)) {
-                    const relativeRegion = this.filterRegionsWithID(regionItems, item.layoutBindRegionID[0]);
-                    item.setLayoutRect({
-                        width: relativeRegion.layoutExcludeIndent.width
-                    });
-                    item.setLayoutStartPosition({
-                        x: relativeRegion.layoutExcludeIndent.x + item.layoutOffsetX + item.layoutPaddingLeft
-                    });
-                }
-            });
-        }
         getItemComputeLayoutRect(item, extraOffset) {
             if (!extraOffset) {
                 extraOffset = { offsetLeft: 0, offsetRight: 0, offsetTop: 0, offsetBottom: 0 };