@visactor/vchart 1.8.8-alpha.1 → 1.8.10-alpha.0

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();
@@ -18592,20 +18595,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 +20256,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 +21460,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,
@@ -22161,13 +22184,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 +22548,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 +22661,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() {
@@ -33193,7 +33211,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 +33381,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 +33404,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 +33424,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 +33580,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 +33608,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 +33666,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 +33863,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 +35560,7 @@
         };
       }
       beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        var _a, _b, _c, _d;
         const {
           flush = !1
         } = this.attribute.label || {};
@@ -35554,55 +35575,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"
+              });
+            }
           }
         }
       }
@@ -40427,7 +40444,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 +41874,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;
@@ -44960,10 +44979,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 +50717,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 +52128,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 +53652,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;
+        }
+        _transformSpecBeforeMergingTheme(spec, chartSpec, chartSpecInfo) {
         }
-        _transformSpec(spec, chartSpec, chartSpecInfo) {
+        _transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo) {
         }
         _mergeThemeToSpec(spec, chartSpec) {
             const theme = this._theme;
@@ -53895,12 +53928,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 +53962,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 +53986,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);
@@ -54083,8 +54096,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 +54109,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 +54276,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,10 +54625,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
     }
-    function layoutRightStartOrMiddleItems(items, layout, limitHeight, isMiddle) {
+    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 = [];
@@ -54641,18 +54640,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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) {
+                    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);
@@ -54666,55 +54666,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isMiddle) {
                 adjustItemsToCenter(allItems, true, limitHeight);
             }
-            layout.rightCurrent = preRight - maxWidth;
-        }
-    }
-    function layoutLeftStartOrMiddleItems(items, layout, limitHeight, isMiddle) {
-        if (items.length) {
-            let maxWidth = 0;
-            let preLeft = layout.leftCurrent;
-            let preTop = layout.topCurrent;
-            const allItems = [];
-            let singleLineItems = [];
-            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;
-                    maxWidth = itemTotalWidth;
-                    preTop = layout.topCurrent + itemTotalHeight;
-                    item.setLayoutStartPosition({
-                        x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
-                        y: layout.topCurrent + item.layoutOffsetY + item.layoutPaddingTop
-                    });
-                    allItems.push(singleLineItems);
-                    singleLineItems = [item];
-                }
-                else {
-                    singleLineItems.push(item);
-                }
-            });
-            allItems.push(singleLineItems);
-            if (isMiddle) {
-                adjustItemsToCenter(allItems, true, limitHeight);
+            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 = [];
             items.forEach(item => {
@@ -54723,19 +54689,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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) {
                     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];
@@ -54748,57 +54715,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isMiddle) {
                 adjustItemsToCenter(allItems, false, limitWidth);
             }
-            layout.topCurrent = preTop + maxHeight;
-        }
-    }
-    function layoutBottomStartOrMiddleItems(items, layout, limitWidth, isMiddle) {
-        if (items.length) {
-            let maxHeight = 0;
-            let preLeft = layout.leftCurrent;
-            let preBottom = layout.bottomCurrent;
-            const allItems = [];
-            let singleLineItems = [];
-            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;
-                    maxHeight = itemTotalHeight;
-                    item.setLayoutStartPosition({
-                        x: layout.leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
-                        y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
-                    });
-                    singleLineItems = [item];
-                }
-                else {
-                    singleLineItems.push(item);
-                }
-            });
-            allItems.push(singleLineItems);
-            if (isMiddle) {
-                adjustItemsToCenter(allItems, false, limitWidth);
+            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;
@@ -54834,10 +54765,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     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;
@@ -54873,10 +54804,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     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;
@@ -54912,10 +54843,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     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;
@@ -54957,7 +54888,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 +54896,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 +54998,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 +55092,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 +55141,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 +56415,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 +57682,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 +58164,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.10-alpha.0";
 
     var ChartTypeEnum;
     (function (ChartTypeEnum) {
@@ -58984,8 +59017,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 +59051,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 +59143,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 +59274,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 +59286,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 +59476,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 +60387,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 +60407,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 +62582,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 +63387,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 +64902,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 +64944,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 +65100,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 +65182,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 +65288,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 +65309,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 +65368,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 +67379,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 +67709,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 +67792,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 +67879,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 +68074,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 +68478,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 +70338,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 +70395,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 +70425,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 +74696,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 +76874,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 +78327,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 +80440,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();
@@ -80655,6 +80709,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._scales = [];
             this._tick = undefined;
             this._layoutCache = { width: 0, height: 0, _lastComputeOutBounds: { x1: 0, x2: 0, y1: 0, y2: 0 } };
+            this._innerOffset = {
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0
+            };
             this.effect = {
                 scaleUpdate: params => {
                     this.computeData(params === null || params === void 0 ? void 0 : params.value);
@@ -80835,21 +80895,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         updateScaleRange() {
             let isScaleChange = false;
             const { width, height } = this.getLayoutRect();
+            const { left, right, top, bottom } = this._innerOffset;
             let newRange = [];
             if (isXAxis(this.getOrient())) {
                 if (isValidNumber$1(width)) {
-                    newRange = this._inverse ? [width, 0] : [0, width];
+                    newRange = this._inverse ? [width - right, left] : [left, width - right];
                 }
             }
             else if (isZAxis(this.getOrient())) {
                 if (isValidNumber$1(width)) {
-                    newRange = this._inverse ? [width, 0] : [0, width];
+                    newRange = this._inverse ? [width - right, left] : [left, width - right];
                     this._scale.range(newRange);
                 }
             }
             else {
                 if (isValidNumber$1(height)) {
-                    newRange = this._inverse ? [0, height] : [height, 0];
+                    newRange = this._inverse ? [top, height - bottom] : [height - bottom, top];
                 }
             }
             const [start, end] = this._scale.range();
@@ -80889,6 +80950,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const chartSpec = (_a = this._option.getChart()) === null || _a === void 0 ? void 0 : _a.getSpec();
             this._inverse = transformInverse(this._spec, (chartSpec === null || chartSpec === void 0 ? void 0 : chartSpec.direction) === Direction.horizontal);
         }
+        onLayoutStart(layoutRect, viewRect, ctx) {
+            super.onLayoutStart(layoutRect, viewRect, ctx);
+            if (!isZAxis(this.getOrient()) && this._spec.innerOffset) {
+                const spec = this._spec;
+                if (isYAxis(this.getOrient())) {
+                    ['top', 'bottom'].forEach(orient => {
+                        this._innerOffset[orient] = calcLayoutNumber(spec.innerOffset[orient], viewRect.height, viewRect);
+                    });
+                }
+                else {
+                    ['left', 'right'].forEach(orient => {
+                        this._innerOffset[orient] = calcLayoutNumber(spec.innerOffset[orient], viewRect.width, viewRect);
+                    });
+                }
+            }
+        }
         getSeriesStatisticsField(s) {
             let f;
             if (isXAxis(this.getOrient())) {
@@ -80996,7 +81073,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 +81102,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 +81215,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 +81434,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 +81682,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 +81749,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 +81764,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 +82056,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 +82205,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 +82225,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 +82431,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 +85706,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 +86412,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 +86548,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 +86562,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 +86854,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 +86866,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 +86903,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 +86913,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 +86957,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 +86999,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 +87015,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 +87025,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 +87050,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 +87079,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 +87096,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 +87764,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 +87790,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 +88971,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 +89037,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 +89192,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 +89218,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 +89234,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 +89257,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 +89294,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 +89333,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 +89741,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 +90263,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 +91087,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 +91105,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 +91226,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 +91243,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 +91506,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 +91643,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 +92460,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 +92803,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 +92824,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 +92863,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 };