@visactor/vchart 1.13.9-alpha.6 → 1.13.9

package/build/index.js

@@ -1759,6 +1759,37 @@
         y: anchorY
       };
     };
+    const aabbSeparation = (a, b) => Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
+    const obbSeparation = (a, b) => {
+      const axes = [{
+        x: Math.cos(a.angle),
+        y: Math.sin(a.angle)
+      }, {
+        x: -Math.sin(a.angle),
+        y: Math.cos(a.angle)
+      }, {
+        x: Math.cos(b.angle),
+        y: Math.sin(a.angle)
+      }, {
+        x: -Math.sin(b.angle),
+        y: Math.cos(a.angle)
+      }];
+      function getProjectionRange(obb, axisX, axisY) {
+        const projections = obb.getRotatedCorners().map(p => p.x * axisX + p.y * axisY);
+        return {
+          min: Math.min(...projections),
+          max: Math.max(...projections)
+        };
+      }
+      let maxDistance = 0;
+      for (const axis of axes) {
+        const rangeA = getProjectionRange(a, axis.x, axis.y),
+          rangeB = getProjectionRange(b, axis.x, axis.y);
+        let distance;
+        distance = rangeA.max < rangeB.min ? rangeB.min - rangeA.max : rangeB.max < rangeA.min ? rangeA.min - rangeB.max : 0, maxDistance = Math.max(maxDistance, distance);
+      }
+      return maxDistance;
+    };
 
     function transformBoundsWithMatrix(out, bounds, matrix) {
       const {
@@ -1918,6 +1949,25 @@
       clone() {
         return new OBBBounds(this);
       }
+      getRotatedCorners() {
+        const originPoint = {
+          x: (this.x1 + this.x2) / 2,
+          y: (this.y1 + this.y2) / 2
+        };
+        return [rotatePoint({
+          x: this.x1,
+          y: this.y1
+        }, this.angle, originPoint), rotatePoint({
+          x: this.x2,
+          y: this.y1
+        }, this.angle, originPoint), rotatePoint({
+          x: this.x1,
+          y: this.y2
+        }, this.angle, originPoint), rotatePoint({
+          x: this.x2,
+          y: this.y2
+        }, this.angle, originPoint)];
+      }
     }
 
     class Matrix {
@@ -8918,6 +8968,11 @@
         return this.context.tryUpdateLength();
       }
     };
+    class StepClosed extends Step$1 {
+      lineEnd() {
+        this.context.closePath();
+      }
+    }
     function genStepSegments(points, t) {
       let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       const {
@@ -8931,6 +8986,16 @@
     function genStepTypeSegments(path, points) {
       return genCurveSegments(path, points);
     }
+    function genStepClosedSegments(points, t) {
+      let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      const {
+        direction: direction,
+        startPoint: startPoint
+      } = params;
+      if (points.length < 2 - Number(!!startPoint)) return null;
+      const segContext = new SegContext("step", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+      return genStepTypeSegments(new StepClosed(segContext, t, startPoint), points), segContext;
+    }
 
     class LinearClosed extends Linear {
       lineEnd() {
@@ -9160,6 +9225,8 @@
           return genMonotoneYSegments(points, params);
         case "step":
           return genStepSegments(points, .5, params);
+        case "stepClosed":
+          return genStepClosedSegments(points, .5, params);
         case "stepBefore":
           return genStepSegments(points, 0, params);
         case "stepAfter":
@@ -9594,7 +9661,8 @@
       filter: "",
       cursor: null,
       html: null,
-      react: null
+      react: null,
+      vue: null
     }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
     const DefaultConnectAttribute = {
       connectedType: "none",
@@ -9702,6 +9770,12 @@
       cornerRadius: 0,
       closePath: !0
     });
+    const DefaultStarAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+      width: 100,
+      height: 100,
+      spikes: 5,
+      thickness: .5
+    });
     const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
       height: 0,
@@ -10027,6 +10101,7 @@
     function createColor(context, c, params) {
       let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
       let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+      var _a, _b, _c, _d;
       if (!c || !0 === c) return "black";
       let result, color;
       if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
@@ -10040,9 +10115,10 @@
         if (params.attribute) {
           const {
             scaleX = 1,
-            scaleY = 1
+            scaleY = 1,
+            angle = 0
           } = params.attribute;
-          w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+          w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY, (angle || 1 !== scaleX || 1 !== scaleY) && (x = null !== (_a = params.x1WithoutTransform) && void 0 !== _a ? _a : 0, y = null !== (_b = params.y1WithoutTransform) && void 0 !== _b ? _b : 0, w = null !== (_c = params.widthWithoutTransform) && void 0 !== _c ? _c : w, h = null !== (_d = params.heightWithoutTransform) && void 0 !== _d ? _d : h);
         }
         "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
       }
@@ -10067,7 +10143,7 @@
       const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
       return color.stops.forEach(stop => {
         canvasGradient.addColorStop(stop.offset, stop.color);
-      }), canvasGradient.GetPattern(w + x, h + y, undefined);
+      }), canvasGradient.GetPattern ? canvasGradient.GetPattern(w + x, h + y, undefined) : canvasGradient;
     }
 
     const DIRECTION_KEY = {
@@ -10142,6 +10218,7 @@
       ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
     }
     function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
+      if (desc.length <= 1) return 0;
       if (!width || width <= 0) return 0;
       const textMeasure = application.graphicUtil.textMeasure;
       let index = guessIndex,
@@ -10175,6 +10252,13 @@
     }
     function measureTextCanvas(text, character) {
       let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "actual";
+      var _a;
+      if ("" === text) return {
+        ascent: 0,
+        height: 0,
+        descent: 0,
+        width: 0
+      };
       const measurement = application.graphicUtil.textMeasure.measureText(text, character),
         result = {
           ascent: 0,
@@ -10184,7 +10268,9 @@
         },
         ascent = "actual" === mode ? measurement.actualBoundingBoxAscent : measurement.fontBoundingBoxAscent,
         descent = "actual" === mode ? measurement.actualBoundingBoxDescent : measurement.fontBoundingBoxDescent;
-      return "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent), result;
+      "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent);
+      const space = null !== (_a = character.space) && void 0 !== _a ? _a : 0;
+      return result.width += space, result;
     }
 
     var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -11322,6 +11408,7 @@
         text: DefaultTextAttribute,
         rect: DefaultRectAttribute,
         polygon: DefaultPolygonAttribute,
+        star: DefaultStarAttribute,
         richtext: DefaultRichTextAttribute,
         richtextIcon: DefaultRichTextIconAttribute,
         image: DefaultImageAttribute,
@@ -11340,6 +11427,7 @@
         text: Object.assign({}, defaultThemeObj.text),
         rect: Object.assign({}, defaultThemeObj.rect),
         polygon: Object.assign({}, defaultThemeObj.polygon),
+        star: Object.assign({}, defaultThemeObj.star),
         richtext: Object.assign({}, defaultThemeObj.richtext),
         richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),
         image: Object.assign({}, defaultThemeObj.image),
@@ -11819,7 +11907,7 @@
       }
       _composedDetailPath(params) {
         if (params && params.graphic) {
-          const g = this.pickParams.graphic;
+          const g = params.graphic;
           if (g.stage) {
             const path = g.stage.eventSystem.manager.propagationPath(g);
             this.detailPath.push(path), this._composedDetailPath(params.params);
@@ -15195,7 +15283,7 @@
     }
     var rect = new RectSymbol();
 
-    const tempBounds$1 = new AABBBounds();
+    const tempBounds = new AABBBounds();
     class CustomSymbolClass {
       constructor(type, path) {
         let isSvg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
@@ -15224,7 +15312,7 @@
             let {
               path: path
             } = _ref;
-            tempBounds$1.x1 = path.bounds.x1 * size, tempBounds$1.y1 = path.bounds.y1 * size, tempBounds$1.x2 = path.bounds.x2 * size, tempBounds$1.y2 = path.bounds.y2 * size, bounds.union(tempBounds$1);
+            tempBounds.x1 = path.bounds.x1 * size, tempBounds.y1 = path.bounds.y1 * size, tempBounds.x2 = path.bounds.x2 * size, tempBounds.y2 = path.bounds.y2 * size, bounds.union(tempBounds);
           });
         }
         this.path.bounds && (bounds.x1 = this.path.bounds.x1 * size, bounds.y1 = this.path.bounds.y1 * size, bounds.x2 = this.path.bounds.x2 * size, bounds.y2 = this.path.bounds.y2 * size);
@@ -15538,6 +15626,7 @@
     const RECT_NUMBER_TYPE = genNumberType();
     const RECT3D_NUMBER_TYPE = genNumberType();
     const RICHTEXT_NUMBER_TYPE = genNumberType();
+    genNumberType();
     const SYMBOL_NUMBER_TYPE = genNumberType();
     const TEXT_NUMBER_TYPE = genNumberType();
     const GraphicService = Symbol.for("GraphicService");
@@ -15556,8 +15645,8 @@
     const SVG_PARSE_ATTRIBUTE_MAP_KEYS = Object.keys(SVG_PARSE_ATTRIBUTE_MAP);
 
     const _tempBounds = new AABBBounds(),
-      tempMatrix = new Matrix(),
-      tempBounds = new AABBBounds();
+      tempMatrix = new Matrix();
+      new AABBBounds();
     const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
     const tempConstantXYKey = ["x", "y"],
       tempConstantScaleXYKey = ["scaleX", "scaleY"],
@@ -15792,6 +15881,9 @@
           y: y
         });
       }
+      setWidthHeightWithoutTransform(aabbBounds) {
+        this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
+      }
       setAttributes(params) {
         let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
         let context = arguments.length > 2 ? arguments[2] : undefined;
@@ -16073,24 +16165,12 @@
       needUpdateLayout() {
         return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
       }
-      getAnchor(anchor, params) {
+      getAnchor(anchor, params, resetScale) {
         const _anchor = [0, 0],
           getBounds = () => {
             if (params.b) return params.b;
-            const {
-              scaleX: scaleX,
-              scaleY: scaleY,
-              angle: angle
-            } = this.attribute;
-            return tempBounds.copy(this._AABBBounds), this.setAttributes({
-              scaleX: 1,
-              scaleY: 1,
-              angle: 0
-            }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
-              scaleX: scaleX,
-              scaleY: scaleY,
-              angle: angle
-            }), params.b;
+            const graphic = this.clone();
+            return graphic.attribute.angle = 0, graphic.attribute.scaleCenter = null, resetScale && (graphic.attribute.scaleX = 1, graphic.attribute.scaleY = 1), params.b = graphic.AABBBounds, params.b;
           };
         if ("string" == typeof anchor[0]) {
           const ratio = parseFloat(anchor[0]) / 100,
@@ -16117,9 +16197,9 @@
         } = this.attribute;
         let _anchor = [0, 0];
         const params = {};
-        if (anchor && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
+        if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
           const m = this._transMatrix;
-          m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+          m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params, !0), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
             x: _anchor[0],
             y: _anchor[1]
           });
@@ -17446,7 +17526,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        return updateBoundsOfCommonOuterBorder(attribute, circleTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, circleTheme, !1, this), aabbBounds;
+        return updateBoundsOfCommonOuterBorder(attribute, circleTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, circleTheme, !1, this), aabbBounds;
       }
       updateCircleAABBBoundsImprecise(attribute, circleTheme, aabbBounds) {
         const {
@@ -17696,7 +17776,7 @@
           const shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
           boundStroke(tb1, shadowBlurHalfWidth, !0, strokeBoundsBuffer), aabbBounds.union(tb1);
         }
-        return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
+        return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
       }
       updateSingallineAABBBounds(text) {
         this.updateMultilineAABBBounds([text]);
@@ -18077,7 +18157,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+        updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, this.x1WithoutTransform = aabbBounds.x1, this.y1WithoutTransform = aabbBounds.y1;
         const {
           lineJoin = symbolTheme.lineJoin
         } = attribute;
@@ -18149,7 +18229,7 @@
         return getTheme$1(this).line;
       }
       updateAABBBounds(attribute, lineTheme, aabbBounds) {
-        this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
+        this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
         const {
           lineJoin = lineTheme.lineJoin
         } = attribute;
@@ -18246,7 +18326,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
+        return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
       }
       needUpdateTags(keys) {
         return super.needUpdateTags(keys, RECT_UPDATE_TAG_KEY);
@@ -18617,6 +18697,7 @@
     }
     class Paragraph {
       constructor(text, newLine, character, ascentDescentMode) {
+        var _a, _b;
         this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic", this.ascentDescentMode = ascentDescentMode;
         const lineHeight = calculateLineHeight(character.lineHeight, this.fontSize);
         this.lineHeight = "number" == typeof lineHeight ? lineHeight > this.fontSize ? lineHeight : this.fontSize : Math.floor(1.2 * this.fontSize), this.height = this.lineHeight;
@@ -18629,7 +18710,7 @@
         let halfDetaHeight = 0,
           deltaAscent = 0,
           deltaDescent = 0;
-        this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height), this.ellipsisStr = "...";
+        this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, this.space = character.space, this.dx = null !== (_a = character.dx) && void 0 !== _a ? _a : 0, this.dy = null !== (_b = character.dy) && void 0 !== _b ? _b : 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height), this.ellipsisStr = "...";
       }
       updateWidth() {
         const {
@@ -18648,11 +18729,11 @@
           if ("hide" === this.ellipsis) return;
           if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
             const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-            if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
+            if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
               const {
                 width: width
               } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-              "vertical" === direction || (left -= this.ellipsisWidth - width);
+              left -= this.ellipsisWidth - width;
             }
           }
         }
@@ -18663,20 +18744,21 @@
         });
       }
       draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+        var _a;
         let baseline = top + ascent,
           text = this.text,
-          left = this.left + deltaLeft;
+          left = this.left + deltaLeft + (null !== (_a = this.space) && void 0 !== _a ? _a : 0) / 2;
         baseline += this.top;
         let direction = this.direction;
         if (this.verticalEllipsis) text = this.ellipsisStr, direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
           if ("hide" === this.ellipsis) return;
           if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
             const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-            if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
+            if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
               const {
                 width: width
               } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-              "vertical" === direction || (left -= this.ellipsisWidth - width);
+              left -= this.ellipsisWidth - width;
             }
           }
         }
@@ -18691,7 +18773,7 @@
         const {
           lineWidth = 1
         } = this.character;
-        if (this.character.stroke && lineWidth && ctx.strokeText(text, left, baseline), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill) if (this.character.lineThrough || this.character.underline) {
+        if (this.character.stroke && lineWidth && ctx.strokeText(text, left, baseline + this.dy), this.character.fill && ctx.fillText(text, left, baseline + this.dy), this.character.fill) if (this.character.lineThrough || this.character.underline) {
           if (this.character.underline) {
             const top = 1 + baseline,
               lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
@@ -18820,7 +18902,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        return updateBoundsOfCommonOuterBorder(attribute, imageTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, this), aabbBounds;
+        return updateBoundsOfCommonOuterBorder(attribute, imageTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, this), aabbBounds;
       }
       getDefaultAttribute(name) {
         return DefaultImageAttribute[name];
@@ -19163,7 +19245,7 @@
           maxWidth = richtextTheme.maxWidth,
           maxHeight = richtextTheme.maxHeight,
           textAlign = richtextTheme.textAlign,
-          verticalDirection = null !== (_b = null !== (_a = attribute.textBaseline) && void 0 !== _a ? _a : richtextTheme.textBaseline) && void 0 !== _b ? _b : richtextTheme.verticalDirection,
+          textBaseline = null !== (_b = null !== (_a = attribute.textBaseline) && void 0 !== _a ? _a : richtextTheme.textBaseline) && void 0 !== _b ? _b : "top",
           editOptions: editOptions
         } = attribute;
         if (width > 0 && height > 0) aabbBounds.set(0, 0, width, height);else {
@@ -19178,7 +19260,7 @@
         }
         editOptions && editOptions.keepHeightWhileEmpty && !aabbBounds.height() && !(null === (_c = attribute.textConfig) || void 0 === _c ? void 0 : _c.length) && (aabbBounds.y2 = aabbBounds.y1 + (null !== (_d = attribute.fontSize) && void 0 !== _d ? _d : 12), aabbBounds.x2 = aabbBounds.x1 + 2);
         let deltaY = 0;
-        switch (verticalDirection) {
+        switch (textBaseline) {
           case "top":
             deltaY = 0;
             break;
@@ -19199,7 +19281,7 @@
           case "right":
             deltaX = -aabbBounds.width();
         }
-        return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
+        return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
       }
       needUpdateTags(keys) {
         return super.needUpdateTags(keys, RICHTEXT_UPDATE_TAG_KEY);
@@ -19417,7 +19499,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+        updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
         const {
           lineJoin = pathTheme.lineJoin
         } = attribute;
@@ -19474,7 +19556,7 @@
         return getTheme$1(this).area;
       }
       updateAABBBounds(attribute, areaTheme, aabbBounds) {
-        this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
+        this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds), this.setWidthHeightWithoutTransform(aabbBounds);
         const {
           lineJoin = areaTheme.lineJoin
         } = attribute;
@@ -19679,7 +19761,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        updateBoundsOfCommonOuterBorder(attribute, arcTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+        updateBoundsOfCommonOuterBorder(attribute, arcTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.setWidthHeightWithoutTransform(aabbBounds);
         const {
           lineJoin = arcTheme.lineJoin
         } = attribute;
@@ -19807,7 +19889,7 @@
         return getTheme$1(this).polygon;
       }
       updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-        this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
+        this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
         const {
           lineJoin = polygonTheme.lineJoin
         } = attribute;
@@ -26872,6 +26954,7 @@
         return this.nativeContext.createRadialGradient(x0, y0, r0, x1, y1, r1);
       }
       createConicGradient(x, y, startAngle, endAngle) {
+        if (this.nativeContext.createConicGradient && Math.abs(endAngle - startAngle - 2 * Math.PI) < .001) return this.nativeContext.createConicGradient(startAngle, x, y);
         let pattern,
           edit = !1;
         const ctx = this;
@@ -31431,6 +31514,10 @@
     const SCROLLBAR_EVENT$1 = "scrollDrag";
     const SCROLLBAR_END_EVENT$1 = "scrollUp";
 
+    function getEndTriggersOfDrag() {
+      return "browser" === vglobal.env ? ["pointerup", "pointerleave", "pointercancel"] : ["pointerup", "pointerleave", "pointerupoutside"];
+    }
+
     const delayMap$3 = {
       debounce: debounce,
       throttle: throttle
@@ -31438,7 +31525,9 @@
     loadScrollbarComponent();
     let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._onRailPointerDown = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._handleTouchMove = e => {
+          isValid$1(this._prePos) && e.preventDefault();
+        }, this._onRailPointerDown = e => {
           const {
               viewX: viewX,
               viewY: viewY
@@ -31463,6 +31552,7 @@
           }
           this.setScrollRange([currentScrollValue - (range[1] - range[0]) / 2, currentScrollValue + (range[1] - range[0]) / 2], !1), this.stage && !this.stage.autoRender && this.stage.renderNextFrame();
         }, this._onSliderPointerDown = e => {
+          this._clearDragEvents();
           const {
             stopSliderDownPropagation = !0
           } = this.attribute;
@@ -31477,11 +31567,14 @@
           this._prePos = "horizontal" === direction ? x : y, this._dispatchEvent(SCROLLBAR_START_EVENT, {
             pos: this._prePos,
             event: e
-          }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-            capture: !0
-          }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+          });
+          const triggers = getEndTriggersOfDrag(),
+            obj = "browser" === vglobal.env ? vglobal : this.stage;
+          obj.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
             capture: !0
-          }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
+          }), triggers.forEach(trigger => {
+            obj.addEventListener(trigger, this._onSliderPointerUp);
+          });
         }, this._computeScrollValue = e => {
           const {
               direction: direction
@@ -31507,7 +31600,6 @@
             [currentPos, currentScrollValue] = this._computeScrollValue(e);
           this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
         }, this._onSliderPointerMoveWithDelay = 0 === this.attribute.delayTime ? this._onSliderPointerMove : delayMap$3[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime), this._onSliderPointerUp = e => {
-          e.preventDefault();
           const {
               range: preRange,
               limitRange = [0, 1]
@@ -31515,14 +31607,10 @@
             preScrollRange = this.getScrollRange(),
             [currentPos, currentScrollValue] = this._computeScrollValue(e),
             range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
-          this._dispatchEvent(SCROLLBAR_END_EVENT$1, {
+          this._prePos = null, this._dispatchEvent(SCROLLBAR_END_EVENT$1, {
             pre: preRange,
             value: clampRange$1(range, limitRange[0], limitRange[1])
-          }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-            capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-            capture: !0
-          }), this.stage.removeEventListener("pointerup", this._onSliderPointerUp), this.stage.removeEventListener("pointerupoutside", this._onSliderPointerUp));
+          }), this._clearDragEvents();
         };
       }
       setScrollRange(range) {
@@ -31561,7 +31649,9 @@
           delayType = "throttle",
           delayTime = 0
         } = this.attribute;
-        this._rail && this._rail.addEventListener("pointerdown", delayMap$3[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown);
+        this._rail && this._rail.addEventListener("pointerdown", delayMap$3[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        });
       }
       render() {
         this._reset();
@@ -31671,9 +31761,23 @@
           sliderSize = this._sliderSize;
         return "horizontal" === direction ? clampRange$1([x1 + min * width, x1 + max * width], x1, width - sliderSize) : clampRange$1([y1 + min * height, y1 + max * height], y1, height - sliderSize);
       }
+      _clearDragEvents() {
+        const triggers = getEndTriggersOfDrag(),
+          obj = "browser" === vglobal.env ? vglobal : this.stage;
+        obj.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+          capture: !0
+        }), triggers.forEach(trigger => {
+          obj.removeEventListener(trigger, this._onSliderPointerUp);
+        });
+      }
       _reset() {
         this._sliderRenderBounds = null, this._sliderLimitRange = null;
       }
+      release(all) {
+        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        }), this._clearDragEvents();
+      }
     };
     ScrollBar$1.defaultAttributes = {
       direction: "horizontal",
@@ -32392,6 +32496,7 @@
           contentStyle = {},
           panel: panel,
           logoSymbol: logoSymbol,
+          poptipAnchor = "position",
           logoText: logoText,
           logoTextStyle = {},
           triangleMode = "default",
@@ -32403,7 +32508,8 @@
           visible: visible,
           state: state,
           dx = 0,
-          dy = 0
+          dy = 0,
+          positionBounds: positionBounds
         } = this.attribute;
         let {
           title = "",
@@ -32489,21 +32595,28 @@
             titleShape.setAttribute("maxLineWidth", maxSpace - buf), contentShape.setAttribute("maxLineWidth", maxSpace - buf), poptipHeight = parsedPadding[0] + parsedPadding[2], titleVisible && (poptipHeight += titleShape.AABBBounds.height() + space), poptipHeight += contentShape.AABBBounds.height();
           }
         }
-        const layout = "auto" === position;
+        const layout = "auto" === position || isArray$1(position),
+          positionList = isArray$1(position) ? position : this.positionList;
         let maxBBoxI,
           maxBBoxSize = -1 / 0;
-        for (let i = 0; i < this.positionList.length + 1; i++) {
-          const p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position;
+        for (let i = 0; i < positionList.length + 1; i++) {
+          const p = layout ? positionList[i === positionList.length ? maxBBoxI : i] : position;
           let symbolType = "arrow2Left",
             offsetX = (isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 4,
             offsetY = 0;
-          "top" === p || "bottom" === p || "left" === p || "right" === p ? symbolType = "arrow2Left" : "concise" === triangleMode && (symbolType = conciseSymbolMap[p], offsetX = ["tl", "bl", "rt", "rb"].includes(position) ? (isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 2 : -(isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 2, offsetY = ["tl", "tr", "lb", "rb"].includes(position) ? -(isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2 : (isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2);
+          "top" === p || "bottom" === p || "left" === p || "right" === p ? symbolType = "arrow2Left" : "concise" === triangleMode && (symbolType = conciseSymbolMap[p], offsetX = ["tl", "bl", "rt", "rb"].includes(p) ? (isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 2 : -(isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 2, offsetY = ["tl", "tr", "lb", "rb"].includes(p) ? -(isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2 : (isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2);
           const {
             angle: angle,
             offset: offset
           } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray$1(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth], symbolType);
-          if (isBoolean$1(bgVisible)) {
-            const bgSymbol = group.createOrUpdateChild("poptip-symbol-panel", Object.assign(Object.assign({}, backgroundStyle), {
+          let bgSymbol,
+            anchorPoint = {
+              x: 0,
+              y: 0
+            };
+          if ("bounds" === poptipAnchor && positionBounds && (anchorPoint = this.calculateAnchorPoint(p, positionBounds)), isBoolean$1(bgVisible)) {
+            let bgRect;
+            bgSymbol = group.createOrUpdateChild("poptip-symbol-panel", Object.assign(Object.assign({}, backgroundStyle), {
               visible: bgVisible && (contentVisible || titleVisible),
               x: offsetX,
               y: offsetY,
@@ -32516,9 +32629,7 @@
               dy: offset[1] - (null !== (_j = backgroundStyle.space) && void 0 !== _j ? _j : 0),
               size: symbolSize,
               zIndex: 9
-            }), "symbol");
-            let bgRect;
-            isEmpty(null == state ? void 0 : state.panel) || (bgSymbol.states = state.panel), bgRect = panel.panelSymbolType ? group.createOrUpdateChild("poptip-rect-panel", Object.assign(Object.assign({}, backgroundStyle), {
+            }), "symbol"), isEmpty(null == state ? void 0 : state.panel) || (bgSymbol.states = state.panel), bgRect = panel.panelSymbolType ? group.createOrUpdateChild("poptip-rect-panel", Object.assign(Object.assign({}, backgroundStyle), {
               visible: bgVisible && (contentVisible || titleVisible),
               x: 0,
               y: 0,
@@ -32535,8 +32646,8 @@
             }), "rect"), isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
           }
           if (group.setAttributes({
-            x: -offset[0] + dx,
-            y: -offset[1] + dy,
+            x: -offset[0] + dx + anchorPoint.x,
+            y: -offset[1] + dy + anchorPoint.y,
             anchor: [offsetX, offsetY]
           }), logoSymbol) {
             const {
@@ -32564,20 +32675,87 @@
               zIndex: 10
             }), "text");
           }
-          if (!layout || !range) break;
+          if (!range) break;
           {
             _tBounds.setValue(0, 0, popTipWidth, poptipHeight).transformWithMatrix(group.globalTransMatrix);
             const b = _tBounds,
               stageBounds = new Bounds().setValue(0, 0, range[0], range[1]);
-            if (rectInsideAnotherRect(b, stageBounds, !1)) break;
-            {
-              const bbox = getRectIntersect(b, stageBounds, !1),
-                size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
-              size > maxBBoxSize && (maxBBoxSize = size, maxBBoxI = i);
+            if (layout) {
+              if (rectInsideAnotherRect(b, stageBounds, !1)) break;
+              {
+                const bbox = getRectIntersect(b, stageBounds, !1),
+                  size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
+                size > maxBBoxSize && (maxBBoxSize = size, maxBBoxI = i);
+              }
             }
+            if (["top", "bottom", "left", "right"].includes(p)) {
+              const isVerticalPosition = "top" === p || "bottom" === p,
+                isHorizontalPosition = "left" === p || "right" === p;
+              let mainDirectionOverlap = !1;
+              if (isVerticalPosition ? mainDirectionOverlap = "top" === p && b.y1 < 0 || "bottom" === p && b.y2 > stageBounds.y2 : isHorizontalPosition && (mainDirectionOverlap = "left" === p && b.x1 < 0 || "right" === p && b.x2 > stageBounds.x2), !mainDirectionOverlap) {
+                let secondaryOffset = 0;
+                const szNumber = (isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2;
+                isVerticalPosition ? (b.x1 < 0 ? secondaryOffset = -b.x1 : b.x2 > stageBounds.x2 && (secondaryOffset = stageBounds.x2 - b.x2), group.setAttribute("x", group.attribute.x + secondaryOffset), bgSymbol.setAttribute("dx", min$1(max$1(bgSymbol.attribute.dx - secondaryOffset, szNumber), b.width() - szNumber))) : isHorizontalPosition && (b.y1 < 0 ? secondaryOffset = -b.y1 : b.y2 > stageBounds.y2 && (secondaryOffset = stageBounds.y2 - b.y2), group.setAttribute("y", group.attribute.y + secondaryOffset), bgSymbol.setAttribute("dy", min$1(max$1(bgSymbol.attribute.dy - secondaryOffset, szNumber), b.height() - szNumber)));
+                break;
+              }
+            }
+            if (!layout) break;
           }
         }
       }
+      calculateAnchorPoint(position, positionBounds) {
+        if (!positionBounds) return {
+          x: 0,
+          y: 0
+        };
+        const {
+            x: x,
+            y: y
+          } = this.attribute,
+          {
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2
+          } = positionBounds,
+          width = x2 - x1,
+          height = y2 - y1;
+        switch (position) {
+          case "top":
+          case "tl":
+          case "tr":
+            return {
+              x: x1 + width / 2 - x,
+              y: y1 - y
+            };
+          case "bottom":
+          case "bl":
+          case "br":
+            return {
+              x: x1 + width / 2 - x,
+              y: y2 - y
+            };
+          case "left":
+          case "lt":
+          case "lb":
+            return {
+              x: x1 - x,
+              y: y1 + height / 2 - y
+            };
+          case "right":
+          case "rt":
+          case "rb":
+            return {
+              x: x2 - x,
+              y: y1 + height / 2 - y
+            };
+          default:
+            return {
+              x: 0,
+              y: 0
+            };
+        }
+      }
       getAngleAndOffset(position, width, height, size, symbolType) {
         const sizeH = "arrow2Left" === symbolType ? size[1] / 2 : size[1];
         switch (position) {
@@ -32739,10 +32917,12 @@
           this.poptipComponent.setAttributes(Object.assign(Object.assign({
             visibleAll: !0,
             pickable: !1,
-            childrenPickable: !1
+            childrenPickable: !1,
+            poptipAnchor: "bounds"
           }, poptip), {
             x: matrix.e,
-            y: matrix.f
+            y: matrix.f,
+            positionBounds: graphic.globalAABBBounds
           })), drawContext.stage.tryInitInteractiveLayer();
           const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
           interactiveLayer && interactiveLayer.add(this.poptipComponent);
@@ -33496,10 +33676,11 @@
     }
     function textIntersect(textA, textB, sep) {
       var _a;
-      let a, b;
-      const angle = null === (_a = textA.attribute) || void 0 === _a ? void 0 : _a.angle,
-        isAABBIntersects = (textA, textB, sep) => (a = textA.AABBBounds, b = textB.AABBBounds, sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2));
-      return isAngleHorizontal(angle, Number.EPSILON) ? isAABBIntersects(textA, textB, sep) : (a = textA.OBBBounds, b = textB.OBBBounds, !a || !b || a.empty() || b.empty() ? isAABBIntersects(textA, textB, sep) : a.intersects(b));
+      const angle = null === (_a = textA.attribute) || void 0 === _a ? void 0 : _a.angle;
+      if (isAngleHorizontal(angle, Number.EPSILON)) return sep > aabbSeparation(textA.AABBBounds, textB.AABBBounds);
+      const a = textA.OBBBounds,
+        b = textB.OBBBounds;
+      return !a || !b || a.empty() || b.empty() ? sep > aabbSeparation(textA.AABBBounds, textB.AABBBounds) : a.intersects(b) || sep > obbSeparation(a, b);
     }
     function hasOverlap$1(items, pad) {
       for (let b, i = 1, n = items.length, a = items[0]; i < n; a = b, ++i) if (b = items[i], textIntersect(a, b, pad)) return !0;
@@ -35728,7 +35909,9 @@
         super(...arguments), this.type = ScaleEnum.Linear;
       }
       clone() {
-        return new LinearScale().domain(this._domain, !0).range(this._range, !0).unknown(this._unknown).clamp(this.clamp(), null, !0).interpolate(this._interpolate);
+        var _a;
+        const scale = new LinearScale();
+        return scale.domain(this._domain, !0).range(this._range, !0).unknown(this._unknown).clamp(this.clamp(), null, !0).interpolate(this._interpolate), this._niceType && (scale._niceType = this._niceType, scale._domainValidator = this._domainValidator, scale._niceDomain = null === (_a = this._niceDomain) || void 0 === _a ? void 0 : _a.slice()), scale;
       }
       tickFormat() {
         return () => {};
@@ -39019,14 +39202,20 @@
         }, this.state = {
           start: 0,
           end: 1
-        }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
-          e.stopPropagation(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e), "browser" === vglobal.env && (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
+        }, this._statePointToData = state => state, this._handleTouchMove = e => {
+          this._activeState && e.preventDefault();
+        }, this._onHandlerPointerDown = (e, tag) => {
+          this._clearDragEvents(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e);
+          const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+            triggers = getEndTriggersOfDrag();
+          evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)), this.addEventListener("pointermove", this._onHandlerPointerMove, {
+          }), this.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
+          }), triggers.forEach(trigger => {
+            evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
           });
         }, this._pointerMove = e => {
-          e.stopPropagation();
           const {
               start: startAttr,
               end: endAttr,
@@ -39049,7 +39238,6 @@
             tag: this._activeTag
           }));
         }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap$2[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), this._onHandlerPointerUp = e => {
-          e.preventDefault();
           const {
             start: start,
             end: end,
@@ -39064,11 +39252,7 @@
             start: this.state.start,
             end: this.state.end,
             tag: this._activeTag
-          }), "browser" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), this.removeEventListener("pointerup", this._onHandlerPointerUp);
+          }), this._clearDragEvents();
         };
         const {
           position: position,
@@ -39087,7 +39271,9 @@
         } = this.attribute;
         this._startHandlerMask && this._startHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "start")), this._endHandlerMask && this._endHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "end")), this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleSymbol")), this._middleHandlerRect && this._middleHandlerRect.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleRect"));
         const selectedTag = brushSelect ? "background" : "middleRect";
-        this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && this._background && this._background.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave));
+        this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && this._background && this._background.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave)), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        });
       }
       dragMaskSize() {
         const {
@@ -39118,11 +39304,22 @@
           y: 0
         };
       }
+      _clearDragEvents() {
+        const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+          triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        }), triggers.forEach(trigger => {
+          evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        }), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        });
+      }
       _onHandlerPointerEnter(e) {
-        e.stopPropagation(), this._showText = !0, this.renderText();
+        this._showText = !0, this.renderText();
       }
       _onHandlerPointerLeave(e) {
-        e.stopPropagation(), this._showText = !1, this.renderText();
+        this._showText = !1, this.renderText();
       }
       backgroundDragZoom(startPos, endPos) {
         const {
@@ -39661,6 +39858,11 @@
       setStatePointToData(callback) {
         isFunction$1(callback) && (this._statePointToData = callback);
       }
+      release(all) {
+        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        }), this._clearDragEvents();
+      }
     };
     DataZoom$1.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
 
@@ -39830,17 +40032,26 @@
         l.animate().wait(delay + startSymbolDuration + index * stepDuration).to({
           clipRange: 1
         }, stepDuration, easing);
-      }), graphicFadeIn(line.endSymbol, delay + startSymbolDuration + lineDuration, endSymbolDuration, easing), graphicFadeIn(label.getTextShape(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing), graphicFadeIn(label.getBgRect(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing);
+      }), graphicFadeIn(line.endSymbol, delay + startSymbolDuration + lineDuration, endSymbolDuration, easing), array(label).forEach(labelNode => {
+        const delayTime = delay + startSymbolDuration + lineDuration + endSymbolDuration;
+        graphicFadeIn(labelNode.getTextShape(), delayTime, labelDuration, easing), graphicFadeIn(labelNode.getBgRect(), delayTime, labelDuration, easing);
+      });
     }
 
     function commonLineFadeIn(line, label, duration, delay, easing) {
-      segmentFadeIn(line, delay, duration, easing), tagFadeIn(label, delay, duration, easing);
+      segmentFadeIn(line, delay, duration, easing), array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+      });
     }
     function areaFadeIn(area, label, duration, delay, easing) {
-      graphicFadeIn(area, delay, duration, easing), tagFadeIn(label, delay, duration, easing);
+      graphicFadeIn(area, delay, duration, easing), array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+      });
     }
     function arcAreaFadeIn(area, label, duration, delay, easing) {
-      graphicFadeIn(area, delay, duration, easing), tagFadeIn(label, delay, duration, easing);
+      graphicFadeIn(area, delay, duration, easing), array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+      });
     }
     function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
       var _a;
@@ -39848,13 +40059,19 @@
     }
 
     function commonLineFadeOut(line, label, duration, delay, easing) {
-      segmentFadeOut(line, delay, duration, easing), tagFadeOut(label, delay, duration, easing);
+      segmentFadeOut(line, delay, duration, easing), array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+      });
     }
     function areaFadeOut(area, label, duration, delay, easing) {
-      graphicFadeOut(area, delay, duration, easing), tagFadeOut(label, delay, duration, easing);
+      graphicFadeOut(area, delay, duration, easing), array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+      });
     }
     function arcAreaFadeOut(area, label, duration, delay, easing) {
-      graphicFadeOut(area, delay, duration, easing), tagFadeOut(label, delay, duration, easing);
+      graphicFadeOut(area, delay, duration, easing), array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+      });
     }
     function pointFadeOut(itemLine, decorativeLine, item, duration, delay, easing) {
       var _a;
@@ -40026,6 +40243,57 @@
       delay: 0
     };
 
+    class MarkLabelMixin {
+      getLabel() {
+        return this._label;
+      }
+      _addMarkLabels(container, labelName, defaultLabelAttrs) {
+        const {
+            label: label,
+            state: state
+          } = this.attribute,
+          labelStates = array(null == state ? void 0 : state.label),
+          labelBackgroundStates = array(null == state ? void 0 : state.labelBackground),
+          labelShapes = array(label).map((labelAttrs, index) => {
+            var _a, _b;
+            const finalLabelAttrs = merge$1({}, defaultLabelAttrs, labelAttrs),
+              markLabel = new Tag(Object.assign(Object.assign({}, finalLabelAttrs), {
+                state: {
+                  panel: merge$1({}, DEFAULT_STATES$2, null !== (_a = labelBackgroundStates[index]) && void 0 !== _a ? _a : last(labelBackgroundStates)),
+                  text: merge$1({}, DEFAULT_STATES$2, null !== (_b = labelStates[index]) && void 0 !== _b ? _b : last(labelStates))
+                }
+              }));
+            return markLabel.name = labelName, container.add(markLabel), this.setLabelPos(markLabel, finalLabelAttrs), markLabel;
+          });
+        this._label = 1 === array(labelShapes).length ? labelShapes[0] : labelShapes;
+      }
+      _updateMarkLabels(defaultLabelAttrs) {
+        const {
+            label: label,
+            state: state
+          } = this.attribute,
+          labelShapes = array(this._label),
+          labelStates = array(null == state ? void 0 : state.label),
+          labelBackgroundStates = array(null == state ? void 0 : state.labelBackground);
+        if (labelShapes.length) {
+          const labels = array(label);
+          labelShapes.forEach((labelItem, index) => {
+            var _a, _b;
+            const finalLabelAttrs = merge$1({}, defaultLabelAttrs, labels[index]);
+            labelItem.setAttributes(Object.assign(Object.assign({
+              dx: 0,
+              dy: 0
+            }, finalLabelAttrs), {
+              state: {
+                panel: merge$1({}, DEFAULT_STATES$2, null !== (_a = labelBackgroundStates[index]) && void 0 !== _a ? _a : last(labelBackgroundStates)),
+                text: merge$1({}, DEFAULT_STATES$2, null !== (_b = labelStates[index]) && void 0 !== _b ? _b : last(labelStates))
+              }
+            })), this.setLabelPos(labelItem, finalLabelAttrs);
+          });
+        }
+      }
+    }
+
     class MarkCommonLine extends Marker {
       constructor() {
         super(...arguments), this.name = "markCommonLine", this.defaultUpdateAnimation = DefaultUpdateMarkLineAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
@@ -40033,24 +40301,20 @@
       getLine() {
         return this._line;
       }
-      getLabel() {
-        return this._label;
-      }
-      setLabelPos() {
+      setLabelPos(labelNode, labelAttrs) {
         const {
-            label = {},
             limitRect: limitRect
           } = this.attribute,
           {
             position: position,
             confine: confine,
             autoRotate: autoRotate
-          } = label,
-          labelPoint = this.getPointAttrByPosition(position),
+          } = labelAttrs,
+          labelPoint = this.getPointAttrByPosition(position, labelAttrs),
           labelAngle = position.toString().toLocaleLowerCase().includes("start") ? this._line.getStartAngle() || 0 : this._line.getEndAngle() || 0;
-        if (this._label.setAttributes(Object.assign(Object.assign({}, labelPoint.position), {
-          angle: autoRotate ? this.getRotateByAngle(labelPoint.angle) : 0,
-          textStyle: Object.assign(Object.assign({}, this.getTextStyle(position, labelAngle, autoRotate)), label.textStyle)
+        if (labelNode.setAttributes(Object.assign(Object.assign({}, labelPoint.position), {
+          angle: autoRotate ? this.getRotateByAngle(labelPoint.angle, labelAttrs) : 0,
+          textStyle: Object.assign(Object.assign({}, this.getTextStyle(position, labelAngle, autoRotate)), labelAttrs.textStyle)
         })), limitRect && confine) {
           const {
             x: x,
@@ -40058,7 +40322,7 @@
             width: width,
             height: height
           } = limitRect;
-          limitShapeInBounds(this._label, {
+          limitShapeInBounds(labelNode, {
             x1: x,
             y1: y,
             x2: x + width,
@@ -40067,36 +40331,14 @@
         }
       }
       initMarker(container) {
-        const {
-            label: label,
-            state: state
-          } = this.attribute,
-          line = this.createSegment();
-        line.name = "mark-common-line-line", this._line = line, container.add(line);
-        const markLabel = new Tag(Object.assign(Object.assign({}, label), {
-          state: {
-            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-          }
-        }));
-        markLabel.name = "mark-common-line-label", this._label = markLabel, container.add(markLabel), this.setLabelPos();
+        const line = this.createSegment();
+        line.name = "mark-common-line-line", this._line = line, container.add(line), this.addMarkLineLabels(container);
       }
       updateMarker() {
-        const {
-          label: label,
-          state: state
-        } = this.attribute;
-        this.setLineAttributes(), this._label && (this._label.setAttributes(Object.assign(Object.assign({
-          dx: 0,
-          dy: 0
-        }, label), {
-          state: {
-            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-          }
-        })), this.setLabelPos());
+        this.setLineAttributes(), this.updateMarkLineLabels();
       }
     }
+    mixin(MarkCommonLine, MarkLabelMixin);
 
     const FUZZY_EQUAL_DELTA = .001;
     const DEFAULT_MARK_LINE_THEME = {
@@ -40285,6 +40527,7 @@
         lineWidth: 0
       },
       label: {
+        autoRotate: !0,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         refX: 0,
         refY: 0,
@@ -40339,6 +40582,7 @@
     const DEFAULT_MARK_ARC_AREA_THEME = {
       interactive: !0,
       label: {
+        autoRotate: !0,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         textStyle: {
           fill: "#fff",
@@ -40594,15 +40838,12 @@
       constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkLine.defaultAttributes, attributes)), this.name = "markLine";
       }
-      getPointAttrByPosition(position) {
+      getPointAttrByPosition(position, labelAttrs) {
         var _a;
         const {
-            label = {}
-          } = this.attribute,
-          {
             refX = 0,
             refY = 0
-          } = label,
+          } = labelAttrs,
           points = this._line.getMainSegmentPoints(),
           lineEndAngle = null !== (_a = this._line.getEndAngle()) && void 0 !== _a ? _a : 0,
           labelAngle = (lineEndAngle),
@@ -40628,9 +40869,9 @@
           angle: labelAngle
         };
       }
-      getRotateByAngle(angle) {
+      getRotateByAngle(angle, labelAttrs) {
         var _a;
-        return (isPostiveXAxis(angle) ? angle : angle - Math.PI) + (null !== (_a = this.attribute.label.refAngle) && void 0 !== _a ? _a : 0);
+        return (isPostiveXAxis(angle) ? angle : angle - Math.PI) + (null !== (_a = labelAttrs.refAngle) && void 0 !== _a ? _a : 0);
       }
       getTextStyle(position, labelAngle, autoRotate) {
         return fuzzyEqualNumber(Math.abs(labelAngle), Math.PI / 2, FUZZY_EQUAL_DELTA) || fuzzyEqualNumber(Math.abs(labelAngle), 3 * Math.PI / 2, FUZZY_EQUAL_DELTA) ? getTextAlignAttrOfVerticalDir(autoRotate, labelAngle, position) : isPostiveXAxis(labelAngle) ? DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP.postiveXAxis[position] : DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP.negativeXAxis[position];
@@ -40696,6 +40937,12 @@
           });else if (!isValidNumber$1(point.x) || !isValidNumber$1(point.y)) return void (validFlag = !1);
         }), validFlag;
       }
+      addMarkLineLabels(container) {
+        this._addMarkLabels(container, "mark-common-line-label", MarkLine.defaultAttributes.label);
+      }
+      updateMarkLineLabels() {
+        this._updateMarkLabels(MarkLine.defaultAttributes.label);
+      }
     }
     MarkLine.defaultAttributes = DEFAULT_MARK_LINE_THEME;
 
@@ -40710,9 +40957,6 @@
       getArea() {
         return this._area;
       }
-      getLabel() {
-        return this._label;
-      }
       constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArea.defaultAttributes, attributes)), this.name = "markArea", this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
       }
@@ -40729,24 +40973,21 @@
           };
         return (position.includes("left") || position.includes("Left")) && (result.x = x1), (position.includes("right") || position.includes("Right")) && (result.x = x2), (position.includes("top") || position.includes("Top")) && (result.y = y1), (position.includes("bottom") || position.includes("Bottom")) && (result.y = y2), result;
       }
-      setLabelPos() {
+      setLabelPos(labelNode, labelAttrs) {
         var _a;
-        if (this._label && this._area) {
-          const {
-              label = {}
-            } = this.attribute,
-            labelPosition = null !== (_a = label.position) && void 0 !== _a ? _a : "middle",
+        if (this._area) {
+          const labelPosition = null !== (_a = labelAttrs.position) && void 0 !== _a ? _a : "middle",
             labelPoint = this.getPointAttrByPosition(labelPosition);
-          if (this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), {
-            textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
-          })), this.attribute.limitRect && label.confine) {
+          if (labelNode.setAttributes(Object.assign(Object.assign({}, labelPoint), {
+            textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle)
+          })), this.attribute.limitRect && labelAttrs.confine) {
             const {
               x: x,
               y: y,
               width: width,
               height: height
             } = this.attribute.limitRect;
-            limitShapeInBounds(this._label, {
+            limitShapeInBounds(labelNode, {
               x1: x,
               y1: y,
               x2: x + width,
@@ -40758,40 +40999,23 @@
       initMarker(container) {
         const {
             points: points,
-            label: label,
             areaStyle: areaStyle,
             state: state
           } = this.attribute,
           area = graphicCreator.polygon(Object.assign({
             points: points
           }, areaStyle));
-        area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "mark-area-polygon", this._area = area, container.add(area);
-        const markLabel = new Tag(Object.assign(Object.assign({}, label), {
-          state: {
-            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-          }
-        }));
-        markLabel.name = "mark-area-label", this._label = markLabel, container.add(markLabel), this.setLabelPos();
+        area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "mark-area-polygon", this._area = area, container.add(area), this._addMarkLabels(container, "mark-area-label", MarkArea.defaultAttributes.label);
       }
       updateMarker() {
         const {
           points: points,
-          label: label,
           areaStyle: areaStyle,
           state: state
         } = this.attribute;
         this._area && (this._area.setAttributes(Object.assign({
           points: points
-        }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._label && this._label.setAttributes(Object.assign(Object.assign({
-          dx: 0,
-          dy: 0
-        }, label), {
-          state: {
-            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-          }
-        })), this.setLabelPos();
+        }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._updateMarkLabels(MarkArea.defaultAttributes.label);
       }
       isValidPoints() {
         const {
@@ -40804,7 +41028,7 @@
         }), validFlag;
       }
     }
-    MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME;
+    MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME, mixin(MarkArea, MarkLabelMixin);
 
     loadMarkArcLineComponent();
     function registerMarkArcLineAnimate() {
@@ -40815,24 +41039,19 @@
         MarkArcLine._animate && this._animationConfig && MarkArcLine._animate(this._line, this._label, this._animationConfig, state);
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcLine.defaultAttributes, attributes, {
-          label: {
-            autoRotate: !0
-          }
-        })), this.name = "markArcLine";
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcLine.defaultAttributes, attributes)), this.name = "markArcLine";
       }
-      getPointAttrByPosition(direction) {
+      getPointAttrByPosition(direction, labelAttrs) {
         const {
             center: center,
             radius: radius,
             startAngle: startAngle,
-            endAngle: endAngle,
-            label: label
+            endAngle: endAngle
           } = this.attribute,
           {
             refX = 0,
             refY = 0
-          } = label;
+          } = labelAttrs;
         let angle;
         switch (direction) {
           case IMarkCommonArcLabelPosition.arcInnerStart:
@@ -40862,9 +41081,9 @@
       getTextStyle(position) {
         return DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[position];
       }
-      getRotateByAngle(angle) {
+      getRotateByAngle(angle, labelAttrs) {
         var _a;
-        return angle - Math.PI / 2 + (null !== (_a = this.attribute.label.refAngle) && void 0 !== _a ? _a : 0);
+        return angle - Math.PI / 2 + (null !== (_a = labelAttrs.refAngle) && void 0 !== _a ? _a : 0);
       }
       createSegment() {
         const {
@@ -40921,6 +41140,12 @@
       isValidPoints() {
         return !0;
       }
+      addMarkLineLabels(container) {
+        this._addMarkLabels(container, "mark-common-line-label", MarkArcLine.defaultAttributes.label);
+      }
+      updateMarkLineLabels() {
+        this._updateMarkLabels(MarkArcLine.defaultAttributes.label);
+      }
     }
     MarkArcLine.defaultAttributes = DEFAULT_MARK_ARC_LINE_THEME;
 
@@ -40935,29 +41160,21 @@
       getArea() {
         return this._area;
       }
-      getLabel() {
-        return this._label;
-      }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcArea.defaultAttributes, attributes, {
-          label: {
-            autoRotate: !0
-          }
-        })), this.name = "markArcArea", this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcArea.defaultAttributes, attributes)), this.name = "markArcArea", this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
       }
-      getPointAttrByPosition(position) {
+      getPointAttrByPosition(position, labelAttrs) {
         const {
             center: center,
             innerRadius: innerRadius,
             outerRadius: outerRadius,
             startAngle: startAngle,
-            endAngle: endAngle,
-            label: label
+            endAngle: endAngle
           } = this.attribute,
           {
             refX = 0,
             refY = 0
-          } = label;
+          } = labelAttrs;
         let radius, angle;
         switch (position) {
           case IMarkCommonArcLabelPosition.center:
@@ -40992,28 +41209,25 @@
           angle: angle
         };
       }
-      setLabelPos() {
+      setLabelPos(labelNode, labelAttrs) {
         var _a;
-        if (this._label && this._area) {
+        if (this._area) {
           const {
-              label = {}
-            } = this.attribute,
-            {
               position: labelPosition = "arcInnerMiddle",
               autoRotate: autoRotate
-            } = label,
-            labelAttr = this.getPointAttrByPosition(labelPosition);
-          if (this._label.setAttributes(Object.assign(Object.assign({}, labelAttr.position), {
-            angle: autoRotate ? labelAttr.angle - Math.PI / 2 + (null !== (_a = label.refAngle) && void 0 !== _a ? _a : 0) : 0,
-            textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
-          })), this.attribute.limitRect && label.confine) {
+            } = labelAttrs,
+            labelAttr = this.getPointAttrByPosition(labelPosition, labelAttrs);
+          if (labelNode.setAttributes(Object.assign(Object.assign({}, labelAttr.position), {
+            angle: autoRotate ? labelAttr.angle - Math.PI / 2 + (null !== (_a = labelAttrs.refAngle) && void 0 !== _a ? _a : 0) : 0,
+            textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle)
+          })), this.attribute.limitRect && labelAttrs.confine) {
             const {
               x: x,
               y: y,
               width: width,
               height: height
             } = this.attribute.limitRect;
-            limitShapeInBounds(this._label, {
+            limitShapeInBounds(labelNode, {
               x1: x,
               y1: y,
               x2: x + width,
@@ -41030,7 +41244,6 @@
             startAngle: startAngle,
             endAngle: endAngle,
             areaStyle: areaStyle,
-            label: label,
             state: state
           } = this.attribute,
           area = graphicCreator.arc(Object.assign({
@@ -41041,14 +41254,7 @@
             startAngle: startAngle,
             endAngle: endAngle
           }, areaStyle));
-        area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "polar-mark-area-area", this._area = area, container.add(area);
-        const markLabel = new Tag(Object.assign(Object.assign({}, label), {
-          state: {
-            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-          }
-        }));
-        markLabel.name = "mark-area-label", this._label = markLabel, container.add(markLabel), this.setLabelPos();
+        area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "polar-mark-area-area", this._area = area, container.add(area), this._addMarkLabels(container, "mark-area-label", MarkArcArea.defaultAttributes.label);
       }
       updateMarker() {
         const {
@@ -41068,21 +41274,13 @@
           outerRadius: outerRadius,
           startAngle: startAngle,
           endAngle: endAngle
-        }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._label && (this._label.setAttributes(Object.assign(Object.assign({
-          dx: 0,
-          dy: 0
-        }, label), {
-          state: {
-            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-          }
-        })), this.setLabelPos());
+        }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._updateMarkLabels(MarkArcArea.defaultAttributes.label);
       }
       isValidPoints() {
         return !0;
       }
     }
-    MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME;
+    MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME, mixin(MarkArcArea, MarkLabelMixin);
 
     loadMarkPointComponent();
     function registerMarkPointAnimate() {
@@ -42602,19 +42800,22 @@
           } = this.attribute;
           tooltip && tooltip.alwaysShow || (this._tooltipState = null, this._tooltipShape && this._tooltipShape.setAttribute("visible", !1), this._tooltipText && this._tooltipText.setAttribute("visible", !1), this._dispatchTooltipEvent("sliderTooltipHide"));
         }, this._onHandlerPointerdown = e => {
-          e.stopPropagation(), this._isChanging = !0;
+          this._clearAllDragEvents(), this._isChanging = !0;
           const {
             x: x,
             y: y
           } = this.stage.eventPointTransform(e);
-          this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
+          this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y;
+          const triggers = getEndTriggersOfDrag(),
+            obj = "browser" === vglobal.env ? vglobal : this.stage;
+          obj.addEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.addEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), this.stage.addEventListener("pointerup", this._onHandlerPointerUp), this.stage.addEventListener("pointerupoutside", this._onHandlerPointerUp));
+          }), triggers.forEach(trigger => {
+            obj.addEventListener(trigger, this._onHandlerPointerUp);
+          });
         }, this._onHandlerPointerMove = e => {
           var _a, _b;
-          e.stopPropagation(), this._isChanging = !0;
+          this._isChanging = !0;
           const {
             railWidth: railWidth,
             railHeight: railHeight,
@@ -42635,24 +42836,25 @@
             currentValue = this.calculateValueByPos(newPos);
           "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
         }, this._onHandlerPointerUp = e => {
-          e.preventDefault(), this._isChanging = !1, this._currentHandler = null, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.removeEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), this.stage.removeEventListener("pointerup", this._onHandlerPointerUp), this.stage.removeEventListener("pointerupoutside", this._onHandlerPointerUp));
+          this._isChanging = !1, this._currentHandler = null, this._clearAllDragEvents();
+        }, this._handleTouchMove = e => {
+          this._isChanging && e.preventDefault();
         }, this._onTrackPointerdown = e => {
-          e.stopPropagation(), this._isChanging = !0;
+          this._clearAllDragEvents(), this._isChanging = !0;
           const {
             x: x,
             y: y
           } = this.stage.eventPointTransform(e);
-          this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onTrackPointerMove, {
+          this._prePos = this._isHorizontal ? x : y;
+          const triggers = getEndTriggersOfDrag(),
+            obj = "browser" === vglobal.env ? vglobal : this.stage;
+          obj.addEventListener("pointermove", this._onTrackPointerMove, {
             capture: !0
-          }), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.addEventListener("pointermove", this._onTrackPointerMove, {
-            capture: !0
-          }), this.stage.addEventListener("pointerup", this._onTrackPointerUp), this.stage.addEventListener("pointerupoutside", this._onTrackPointerUp));
+          }), triggers.forEach(trigger => {
+            obj.addEventListener(trigger, this._onTrackPointerUp);
+          });
         }, this._onTrackPointerMove = e => {
-          e.stopPropagation(), this._isChanging = !0;
+          this._isChanging = !0;
           const {
             railWidth: railWidth,
             railHeight: railHeight,
@@ -42693,13 +42895,9 @@
           }
           this._prePos = currentPos, this._dispatchChangeEvent();
         }, this._onTrackPointerUp = e => {
-          e.preventDefault(), this._isChanging = !1, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onTrackPointerMove, {
-            capture: !0
-          }), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.removeEventListener("pointermove", this._onTrackPointerMove, {
-            capture: !0
-          }), this.stage.removeEventListener("pointerup", this._onTrackPointerUp), this.stage.removeEventListener("pointerupoutside", this._onTrackPointerUp));
+          this._isChanging = !1, this._clearAllDragEvents();
         }, this._onRailPointerDown = e => {
-          e.stopPropagation(), this._isChanging = !0;
+          this._clearAllDragEvents(), this._isChanging = !0;
           const {
             railWidth: railWidth,
             railHeight: railHeight,
@@ -43020,11 +43218,26 @@
           slidable: slidable,
           range: range
         } = this.attribute;
-        slidable && (this._startHandler && this._startHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._startHandlerText && this._startHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandler && this._endHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandlerText && this._endHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), isObject$2(range) && range.draggableTrack && this._track.addEventListener("pointerdown", this._onTrackPointerdown), this._railContainer.addEventListener("pointerdown", this._onRailPointerDown));
+        slidable && (this._startHandler && this._startHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._startHandlerText && this._startHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandler && this._endHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandlerText && this._endHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), isObject$2(range) && range.draggableTrack && this._track.addEventListener("pointerdown", this._onTrackPointerdown), this._railContainer.addEventListener("pointerdown", this._onRailPointerDown), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        }));
       }
       _bindTooltipEvents() {
         this.attribute.disableTriggerEvent || (this._mainContainer.addEventListener("pointerenter", this._onTooltipShow), this._mainContainer.addEventListener("pointermove", this._onTooltipUpdate), this._mainContainer.addEventListener("pointerleave", this._onTooltipHide));
       }
+      _clearAllDragEvents() {
+        const triggers = getEndTriggersOfDrag(),
+          obj = "browser" === vglobal.env ? vglobal : this.stage;
+        obj.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        }), triggers.forEach(trigger => {
+          obj.removeEventListener(trigger, this._onHandlerPointerUp);
+        }), obj.removeEventListener("pointermove", this._onTrackPointerMove, {
+          capture: !0
+        }), triggers.forEach(trigger => {
+          obj.removeEventListener(trigger, this._onTrackPointerUp);
+        });
+      }
       _updateTrack() {
         const {
             inverse: inverse,
@@ -43123,6 +43336,11 @@
           endHandler: endHandler
         };
       }
+      release(all) {
+        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        }), this._clearAllDragEvents();
+      }
     }
     Slider.defaultAttributes = {
       slidable: !0,
@@ -44398,13 +44616,13 @@
 
     var IOperateType;
     !function (IOperateType) {
-      IOperateType.drawStart = "drawStart", IOperateType.drawEnd = "drawEnd", IOperateType.drawing = "drawing", IOperateType.moving = "moving", IOperateType.moveStart = "moveStart", IOperateType.moveEnd = "moveEnd", IOperateType.brushClear = "brushClear";
+      IOperateType.drawStart = "drawStart", IOperateType.drawEnd = "drawEnd", IOperateType.drawing = "drawing", IOperateType.moving = "moving", IOperateType.moveStart = "moveStart", IOperateType.moveEnd = "moveEnd", IOperateType.brushActive = "brushActive", IOperateType.brushClear = "brushClear";
     }(IOperateType || (IOperateType = {}));
 
     const DEFAULT_BRUSH_ATTRIBUTES = {
       trigger: "pointerdown",
       updateTrigger: "pointermove",
-      endTrigger: "pointerup",
+      endTrigger: ["pointerup", "pointerleave"],
       resetTrigger: "pointerupoutside",
       hasMask: !0,
       brushMode: "single",
@@ -44420,10 +44638,10 @@
       delayType: "throttle",
       delayTime: 10,
       interactiveRange: {
-        y1: -1 / 0,
-        y2: 1 / 0,
-        x1: -1 / 0,
-        x2: 1 / 0
+        minY: -1 / 0,
+        maxY: 1 / 0,
+        minX: -1 / 0,
+        maxX: 1 / 0
       }
     };
     const DEFAULT_SIZE_THRESHOLD = 5;
@@ -44439,83 +44657,36 @@
     loadBrushComponent();
     let Brush$1 = class Brush extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeDrawState = !1, this._cacheDrawPoints = [], this._isDrawedBeforeEnd = !1, this._isDownBeforeUpOutside = !1, this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._onBrushStart = e => {
-          var _a;
-          if (this._outOfInteractiveRange(e)) return void (this._isDownBeforeUpOutside = !0);
-          e.stopPropagation();
-          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) || ((this._activeDrawState || this._activeMoveState) && e.stopPropagation(), this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e));
-        }, this._onBrushingWithDelay = 0 === this.attribute.delayTime ? this._onBrushing : delayMap$1[this.attribute.delayType](this._onBrushing, this.attribute.delayTime), this._onBrushEnd = e => {
-          var _a;
-          if (!this._activeDrawState && !this._activeMoveState) return;
-          e.preventDefault();
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeDrawState = !1, this._cacheDrawPoints = [], this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._firstUpdate = !0, this._onBrushStart = e => {
+          if (this._outOfInteractiveRange(e)) return void (this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)));
           const {
-            removeOnClick = !0
+            updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
+            endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
+            brushMoved = !0
           } = this.attribute;
-          this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick ? ((null === (_a = this._operatingMask) || void 0 === _a ? void 0 : _a._AABBBounds.empty()) && this._dispatchEvent(IOperateType.brushClear, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-          }), this._container.incrementalClearChild(), this._brushMaskAABBBoundsDict = {}) : (this._activeDrawState && this._dispatchEvent(IOperateType.drawEnd, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-          }), this._activeMoveState && this._dispatchEvent(IOperateType.moveEnd, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-          })), this._activeDrawState = !1, this._activeMoveState = !1, this._isDrawedBeforeEnd = !1, this._operatingMask && this._operatingMask.setAttribute("pickable", !1);
+          array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd)), e.stopPropagation(), this._firstUpdate = !0, this._activeMoveState = brushMoved && this._isPosInBrushMask(e), this._activeDrawState = !this._activeMoveState, this._startPos = this.eventPosToStagePos(e), this._cacheDrawPoints = [this._startPos];
+        }, this._onBrushing = e => {
+          this._outOfInteractiveRange(e) || (e.stopPropagation(), this._firstUpdate ? (this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e), this._firstUpdate = !1) : (this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e)));
+        }, this._onBrushingWithDelay = 0 === this.attribute.delayTime ? this._onBrushing : delayMap$1[this.attribute.delayType](this._onBrushing, this.attribute.delayTime), this._onBrushEnd = e => {
+          this._releaseBrushUpdateEvents(), e.preventDefault(), this._activeDrawState && this._drawEnd(e), this._activeMoveState && this._moveEnd(e), this._activeDrawState = !1, this._activeMoveState = !1;
         }, this._onBrushClear = e => {
-          e.preventDefault();
-          const {
-            removeOnClick = !0
-          } = this.attribute;
-          this._isDownBeforeUpOutside && removeOnClick && (this._dispatchEvent(IOperateType.brushClear, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-          }), this._container.incrementalClearChild(), this._brushMaskAABBBoundsDict = {}), this._activeDrawState = !1, this._activeMoveState = !1, this._isDrawedBeforeEnd = !1, this._isDownBeforeUpOutside = !1, this._operatingMask && this._operatingMask.setAttribute("pickable", !1);
+          e.preventDefault(), this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)), this._activeDrawState = !1, this._activeMoveState = !1;
         };
       }
       _bindBrushEvents() {
-        if (this.attribute.disableTriggerEvent) return;
+        if (this.releaseBrushEvents(), this.attribute.disableTriggerEvent) return;
         const {
           trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger,
-          updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
-          endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
           resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
         } = this.attribute;
-        array(trigger).forEach(t => vglobal.addEventListener(t, this._onBrushStart)), array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd)), array(resetTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushClear));
-      }
-      _isPosInBrushMask(e) {
-        const pos = this.eventPosToStagePos(e),
-          brushMasks = this._container.getChildren();
-        for (let i = 0; i < brushMasks.length; i++) {
-          const {
-              points = [],
-              dx = 0,
-              dy = 0
-            } = brushMasks[i].attribute,
-            pointsConsiderOffset = points.map(point => ({
-              x: point.x + dx,
-              y: point.y + dy
-            }));
-          if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) return this._operatingMask = brushMasks[i], !0;
-        }
-        return !1;
+        array(trigger).forEach(t => this.stage.addEventListener(t, this._onBrushStart)), array(resetTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushClear));
       }
       _initDraw(e) {
         const {
             brushMode: brushMode
           } = this.attribute,
           pos = this.eventPosToStagePos(e);
-        this._cacheDrawPoints = [pos], this._isDrawedBeforeEnd = !1, "single" === brushMode && (this._brushMaskAABBBoundsDict = {}, this._container.incrementalClearChild()), this._addBrushMask(), this._dispatchEvent(IOperateType.drawStart, {
-          operateMask: this._operatingMask,
-          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-          event: e
-        });
+        this._cacheDrawPoints.push(pos), "single" === brushMode && this._clearMask(), this._addBrushMask(), this._dispatchBrushEvent(IOperateType.drawStart, e), 1 === Object.keys(this._brushMaskAABBBoundsDict).length && this._dispatchBrushEvent(IOperateType.brushActive, e);
       }
       _initMove(e) {
         var _a, _b;
@@ -44539,17 +44710,12 @@
           maxMoveStepX = maxX - x2,
           minMoveStepY = minY - y1,
           maxMoveStepY = maxY - y2;
-        this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX], this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY], this._operatingMask.setAttribute("pickable", !0), this._dispatchEvent(IOperateType.moveStart, {
-          operateMask: this._operatingMask,
-          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-          event: e
-        });
+        this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX], this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY], this._operatingMask.setAttribute("pickable", !0), this._dispatchBrushEvent(IOperateType.moveStart, e);
       }
       _drawing(e) {
-        var _a, _b;
+        var _a;
         const pos = this.eventPosToStagePos(e),
           {
-            sizeThreshold = DEFAULT_SIZE_THRESHOLD,
             brushType: brushType
           } = this.attribute,
           cacheLength = this._cacheDrawPoints.length;
@@ -44559,18 +44725,7 @@
         }
         "polygon" === brushType || cacheLength <= 1 ? this._cacheDrawPoints.push(pos) : this._cacheDrawPoints[cacheLength - 1] = pos;
         const maskPoints = this._computeMaskPoints();
-        this._operatingMask.setAttribute("points", maskPoints);
-        const {
-          x1 = 0,
-          x2 = 0,
-          y1 = 0,
-          y2 = 0
-        } = null === (_b = this._operatingMask) || void 0 === _b ? void 0 : _b._AABBBounds;
-        this._isDrawedBeforeEnd = !this._operatingMask._AABBBounds.empty() && !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold), this._isDrawedBeforeEnd && (this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchEvent(IOperateType.drawing, {
-          operateMask: this._operatingMask,
-          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-          event: e
-        }));
+        this._operatingMask.setAttribute("points", maskPoints), this._dispatchBrushEvent(IOperateType.drawing, e);
       }
       _moving(e) {
         const startPos = this._cacheMovePoint,
@@ -44583,11 +44738,46 @@
         this._operatingMask.setAttributes({
           dx: moveX,
           dy: moveY
-        }), this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchEvent(IOperateType.moving, {
-          operateMask: this._operatingMask,
-          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-          event: e
-        });
+        }), this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchBrushEvent(IOperateType.moving, e);
+      }
+      _drawEnd(e) {
+        const {
+          removeOnClick = !0,
+          sizeThreshold = DEFAULT_SIZE_THRESHOLD
+        } = this.attribute;
+        if (this._outOfInteractiveRange(e)) this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e));else {
+          const {
+              x: x1,
+              y: y1
+            } = this._startPos,
+            {
+              x: x2,
+              y: y2
+            } = this.eventPosToStagePos(e);
+          Math.abs(x2 - x1) <= 1 && Math.abs(y2 - y1) <= 1 && removeOnClick ? this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)) : Math.abs(x2 - x1) < sizeThreshold && Math.abs(y1 - y2) < sizeThreshold ? (delete this._brushMaskAABBBoundsDict[this._operatingMask.name], this._container.setAttributes({}), this._container.removeChild(this._operatingMask), this._isEmptyMask() && this._dispatchBrushEvent(IOperateType.brushClear, e)) : (this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchBrushEvent(IOperateType.drawEnd, e));
+        }
+      }
+      _moveEnd(e) {
+        this._operatingMask && this._operatingMask.setAttribute("pickable", !1), this._dispatchBrushEvent(IOperateType.moveEnd, e);
+      }
+      render() {
+        this._bindBrushEvents();
+        const group = this.createOrUpdateChild("brush-container", {}, "group");
+        this._container = group;
+      }
+      releaseBrushEvents() {
+        const {
+          trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger,
+          resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
+        } = this.attribute;
+        array(trigger).forEach(t => this.stage.removeEventListener(t, this._onBrushStart)), array(resetTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushClear)), this._releaseBrushUpdateEvents();
+      }
+      _releaseBrushUpdateEvents() {
+        const {
+          updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
+          endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger
+        } = this.attribute;
+        array(updateTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushEnd));
       }
       _computeMaskPoints() {
         const {
@@ -44645,6 +44835,23 @@
           }));
         brushMask.name = `brush-${Date.now()}`, this._operatingMask = brushMask, this._container.add(brushMask), this._brushMaskAABBBoundsDict[brushMask.name] = brushMask.AABBBounds;
       }
+      _isPosInBrushMask(e) {
+        const pos = this.eventPosToStagePos(e),
+          brushMasks = this._container.getChildren();
+        for (let i = 0; i < brushMasks.length; i++) {
+          const {
+              points = [],
+              dx = 0,
+              dy = 0
+            } = brushMasks[i].attribute,
+            pointsConsiderOffset = points.map(point => ({
+              x: point.x + dx,
+              y: point.y + dy
+            }));
+          if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) return this._operatingMask = brushMasks[i], !0;
+        }
+        return !1;
+      }
       _outOfInteractiveRange(e) {
         const {
             interactiveRange: interactiveRange
@@ -44661,21 +44868,18 @@
       eventPosToStagePos(e) {
         return this.stage.eventPointTransform(e);
       }
-      render() {
-        this._bindBrushEvents();
-        const group = this.createOrUpdateChild("brush-container", {}, "group");
-        this._container = group;
+      _dispatchBrushEvent(operateType, e) {
+        this._dispatchEvent(operateType, {
+          operateMask: this._operatingMask,
+          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+          event: e
+        });
       }
-      releaseBrushEvents() {
-        const {
-          delayType = "throttle",
-          delayTime = 0,
-          trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger,
-          updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
-          endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
-          resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
-        } = this.attribute;
-        array(trigger).forEach(t => vglobal.removeEventListener(t, this._onBrushStart)), array(updateTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushEnd)), array(resetTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushClear));
+      _clearMask() {
+        this._brushMaskAABBBoundsDict = {}, this._container.incrementalClearChild(), this._operatingMask = null;
+      }
+      _isEmptyMask() {
+        return isEmpty(this._brushMaskAABBBoundsDict) || Object.keys(this._brushMaskAABBBoundsDict).every(key => this._brushMaskAABBBoundsDict[key].empty());
       }
     };
     Brush$1.defaultAttributes = DEFAULT_BRUSH_ATTRIBUTES;
@@ -56910,6 +57114,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         ChartEvent["brushChange"] = "brushChange";
         ChartEvent["brushEnd"] = "brushEnd";
         ChartEvent["brushClear"] = "brushClear";
+        ChartEvent["brushActive"] = "brushActive";
         ChartEvent["legendSelectedDataChange"] = "legendSelectedDataChange";
         ChartEvent["legendFilter"] = "legendFilter";
         ChartEvent["legendItemClick"] = "legendItemClick";
@@ -59561,6 +59766,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         beforeRelease() {
         }
+        clear() {
+            this.getMarks().forEach(m => { var _a; return (_a = m.clear) === null || _a === void 0 ? void 0 : _a.call(m); });
+        }
         release() {
             var _a;
             this._releaseEvent();
@@ -61713,6 +61921,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return undefined;
         }
+        clear() {
+            this._event.off(HOOK_EVENT.AFTER_DO_RENDER);
+        }
         release() {
             super.release();
             this.state.release();
@@ -63662,7 +63873,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.13.9-alpha.6";
+    const version = "1.13.9";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -67809,6 +68020,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (spec.label.state) {
                     axisAttrs.label.state = transformAxisLabelStateStyle(spec.label.state);
                 }
+                if (isFunction$1(spec.label.dataFilter)) {
+                    axisAttrs.label.dataFilter = (data, layer) => spec.label.dataFilter(data, layer, { vchart: this._option.globalInstance });
+                }
             }
             else {
                 axisAttrs.label = {
@@ -67821,7 +68035,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     length: spec.tick.tickSize,
                     inside: spec.tick.inside,
                     alignWithLabel: spec.tick.alignWithLabel,
-                    dataFilter: spec.tick.dataFilter
+                    dataFilter: isFunction$1(spec.tick.dataFilter)
+                        ? (data) => spec.tick.dataFilter(data, { vchart: this._option.globalInstance })
+                        : undefined
                 };
                 if (spec.tick.style) {
                     axisAttrs.tick.style = isFunction$1(spec.tick.style)
@@ -72750,9 +72966,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         else if (domainMin > 0) {
                             return scale.scale(domainMin);
                         }
-                        else {
-                            return scale.scale(0);
-                        }
+                        return scale.scale(0);
                     }
                 }
             };
@@ -76960,7 +77174,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return data;
         }
         if (!showAllZero && showEmptyCircle && isDataEmpty(data, angleField, supportNegative)) {
-            return data;
+            return [];
         }
         const appendArcInfo = (data, startAngle, angle) => {
             data[asStartAngle] = startAngle;
@@ -77449,6 +77663,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, {
                     dataView: false
                 });
+                this._emptyArcMark.setDepend(this._pieMark);
             }
         }
         startAngleScale(datum) {
@@ -77484,8 +77699,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const emptyPieMark = this._emptyArcMark;
             if (emptyPieMark) {
                 this.setMarkStyle(emptyPieMark, Object.assign(Object.assign({}, initialStyle), { visible: () => {
-                        const angleField = this.getAngleField()[0];
-                        return isDataEmpty(this.getViewData().latestData, angleField, this._supportNegative);
+                        const data = this.getViewData().latestData;
+                        return !data || !data.length;
                     } }), 'normal', AttributeLevel.Series);
             }
         }
@@ -79694,7 +79909,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     return value;
                 }
             }
-            return this.angleAxisHelper.dataToPosition([datum[this._angleField[0]]]);
+            const angle = this.angleAxisHelper.dataToPosition([datum[this._angleField[0]]]);
+            return this._spec.clamp ? valueInScaleRange(angle, this.angleAxisHelper.getScale(0)) : angle;
         }
         getDimensionField() {
             return this._specRadiusField;
@@ -79727,12 +79943,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 clip: true,
                 clipPath: () => {
                     const axis = this._getAngleAxis();
+                    const { x, y } = this.angleAxisHelper.center();
+                    const radius = this._computeLayoutRadius();
                     if (this._isTickMaskVisible(axis)) {
                         const { tickMask } = this._spec;
                         const { angle, offsetAngle, style = {} } = tickMask;
                         const subTickData = this._getAngleAxisSubTickData(axis);
-                        const { x, y } = this.angleAxisHelper.center();
-                        const radius = this._computeLayoutRadius();
                         const markStyle = style;
                         return subTickData.map(({ value }) => {
                             const pos = this.angleAxisHelper.dataToPosition([value]) + degreeToRadian(offsetAngle);
@@ -80153,7 +80369,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 leftPadding);
                         },
                         y1: (datum) => { var _a, _b; return valueInScaleRange(this.dataToPositionY(datum), (_b = (_a = this._yAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0)); },
-                        y: () => { var _a; return (_a = this._yAxisHelper) === null || _a === void 0 ? void 0 : _a.dataToPosition([0], { bandPosition: this._bandPosition }); },
+                        y: () => {
+                            var _a, _b, _c;
+                            const value = (_a = this._yAxisHelper) === null || _a === void 0 ? void 0 : _a.dataToPosition([0], { bandPosition: this._bandPosition });
+                            return this._spec.clamp ? valueInScaleRange(value, (_c = (_b = this._yAxisHelper) === null || _b === void 0 ? void 0 : _b.getScale) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) : value;
+                        },
                         width: this._spec.bandWidth - leftPadding - rightPadding,
                         cornerRadius: this._spec.cornerRadius,
                         fill: this.getColorAttribute()
@@ -80172,7 +80392,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 topPadding);
                         },
                         height: this._spec.bandWidth - topPadding - bottomPadding,
-                        x: () => { var _a; return (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.dataToPosition([0], { bandPosition: this._bandPosition }); },
+                        x: () => {
+                            var _a, _b, _c;
+                            const value = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.dataToPosition([0], { bandPosition: this._bandPosition });
+                            return this._spec.clamp ? valueInScaleRange(value, (_c = (_b = this._xAxisHelper) === null || _b === void 0 ? void 0 : _b.getScale) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) : value;
+                        },
                         cornerRadius: this._spec.cornerRadius,
                         fill: this.getColorAttribute()
                     }, 'normal', AttributeLevel.Series);
@@ -87608,12 +87832,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getAngleValueStartWithoutMask(datum) {
             const startAngle = this._getAngleValueStartWithoutPadAngle(datum);
             const endAngle = this._getAngleValueEndWithoutPadAngle(datum);
-            return clamper(startAngle, (startAngle + endAngle) / 2)(startAngle + (endAngle > startAngle ? 1 : -1) * Math.abs(this._padAngle / 2));
+            const angle = clamper(startAngle, (startAngle + endAngle) / 2)(startAngle + (endAngle > startAngle ? 1 : -1) * Math.abs(this._padAngle / 2));
+            return this._spec.clamp ? valueInScaleRange(angle, this.angleAxisHelper.getScale(0)) : angle;
         }
         _getAngleValueEndWithoutMask(datum) {
             const startAngle = this._getAngleValueStartWithoutPadAngle(datum);
             const endAngle = this._getAngleValueEndWithoutPadAngle(datum);
-            return clamper(endAngle, (startAngle + endAngle) / 2)(endAngle - (endAngle > startAngle ? 1 : -1) * Math.abs(this._padAngle / 2));
+            const angle = clamper(endAngle, (startAngle + endAngle) / 2)(endAngle - (endAngle > startAngle ? 1 : -1) * Math.abs(this._padAngle / 2));
+            return this._spec.clamp ? valueInScaleRange(angle, this.angleAxisHelper.getScale(0)) : angle;
         }
         _getAngleValueStartWithoutPadAngle(datum) {
             return isValid$1(datum[SEGMENT_FIELD_START])
@@ -89924,21 +90150,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return isValid$1(attr) && attr !== 'none' && !((_a = attr.includes) === null || _a === void 0 ? void 0 : _a.call(attr, 'url'));
     }
     const getLineWidth = (attributes) => {
-        const strokeWidth = parseFloat(attributes['strokeWidth']);
+        const strokeWidth = parseFloat(attributes.strokeWidth);
         if (!isNaN(strokeWidth)) {
             return strokeWidth;
         }
-        const stroke = attributes['stroke'];
+        const stroke = attributes.stroke;
         return stroke && isValidStrokeOrFill(stroke) ? 1 : 0;
     };
     const getFill = (attributes, defaultFill) => {
         var _a;
-        const fill = (_a = attributes['fill']) !== null && _a !== void 0 ? _a : defaultFill;
+        const fill = (_a = attributes.fill) !== null && _a !== void 0 ? _a : defaultFill;
         return fill && isValidStrokeOrFill(fill) ? fill : undefined;
     };
     const getStroke = (attributes, defaultStroke) => {
         var _a;
-        const stroke = (_a = attributes['stroke']) !== null && _a !== void 0 ? _a : defaultStroke;
+        const stroke = (_a = attributes.stroke) !== null && _a !== void 0 ? _a : defaultStroke;
         return stroke && isValidStrokeOrFill(stroke) ? stroke : false;
     };
     const commonAttributes = (attributes) => {
@@ -89947,7 +90173,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const graphicAttributeTransform = {
         group: (attributes) => {
             const common = commonAttributes(attributes);
-            return Object.assign(Object.assign({}, common), { visibleAll: common['visible'] !== false });
+            return Object.assign(Object.assign({}, common), { visibleAll: common.visible !== false });
         },
         rule: (attributes) => {
             return Object.assign(Object.assign({}, commonAttributes(attributes)), { x: parseFloat(attributes.x1), y: parseFloat(attributes.y1), x1: parseFloat(attributes.x2), y1: parseFloat(attributes.y2) });
@@ -89998,7 +90224,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 el._uniqueId = `${el.id}-${index}`;
                 el.data = undefined;
                 const { graphicType: type, transform } = el;
-                let finalAttributes = {
+                const finalAttributes = {
                     visible: el.attributes.visibility !== 'hidden' && el.attributes.visibility !== 'collapse'
                 };
                 if (el.graphicType === 'text') {
@@ -90033,7 +90259,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     return result;
                 });
                 if (children && children.length) {
-                    let startX = (_b = (_a = texts[i]._textGroupStyle) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
+                    const startX = (_b = (_a = texts[i]._textGroupStyle) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
                     let curX = startX;
                     for (let j = 0; j < children.length; j++) {
                         const currentChild = children[j];
@@ -91560,7 +91786,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _getDefaultSeriesSpec(spec) {
             var _a, _b;
-            const series = super._getDefaultSeriesSpec(spec, ['bandWidth', 'progress', 'track']);
+            const series = super._getDefaultSeriesSpec(spec, ['bandWidth', 'progress', 'track', 'clamp']);
             series.direction = (_a = spec.direction) !== null && _a !== void 0 ? _a : 'horizontal';
             series.cornerRadius = (_b = spec.cornerRadius) !== null && _b !== void 0 ? _b : 0;
             return series;
@@ -94422,7 +94648,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             Object.keys(this._stateByField).forEach(field => {
                 const fieldSpec = this._spec[field];
                 if (fieldSpec && fieldSpec.visible && fieldSpec.defaultSelect) {
-                    const { axisIndex, datum } = fieldSpec.defaultSelect;
+                    const { axisIndex = 0, datum } = fieldSpec.defaultSelect;
                     const axis = this._option.getComponentsByKey('axes').find(c => c.getSpecIndex() === axisIndex);
                     if (axis) {
                         this._stateByField[field].currentValue.clear();
@@ -94978,36 +95204,37 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
         }
         else if (type === 'rect') {
-            const extend = getRectSize(attributes, bandSize, cacheInfo.axis);
+            const [offset0, offset1] = getRectSize(attributes, bandSize, offsetSize, cacheInfo.axis);
             const { coordRange } = cacheInfo;
             positionAttribute = {
                 visible: true,
                 start: {
-                    [coordKey]: Math.max(coord - extend / 2 - offsetSize / 2, coordRange[0]),
+                    [coordKey]: Math.max(coord + offset0, coordRange[0]),
                     [anotherAxisKey]: sizeRange[0]
                 },
                 end: {
-                    [coordKey]: Math.min(coord + bandSize + extend / 2 + offsetSize / 2, coordRange[1]),
+                    [coordKey]: Math.min(coord + offset1, coordRange[1]),
                     [anotherAxisKey]: sizeRange[1]
                 }
             };
         }
         return positionAttribute;
     };
-    const getRectSize = (hair, bandSize, axis) => {
+    const getRectSize = (hair, bandSize, offsetSize, axis) => {
         var _a, _b, _c;
-        let extend = 0;
+        const visualSize = bandSize === 0 ? offsetSize : bandSize;
+        let size = visualSize;
         if ((_a = hair.style) === null || _a === void 0 ? void 0 : _a.sizePercent) {
-            extend = (hair.style.sizePercent - 1) * bandSize;
+            size = visualSize * hair.style.sizePercent;
         }
         else if (typeof ((_b = hair.style) === null || _b === void 0 ? void 0 : _b.size) === 'number') {
-            extend = hair.style.size - bandSize;
+            size = hair.style.size;
         }
         else if (typeof ((_c = hair.style) === null || _c === void 0 ? void 0 : _c.size) === 'function') {
             const axisRect = axis.getLayoutRect();
-            extend = hair.style.size(axisRect, axis) - bandSize;
+            size = hair.style.size(axisRect, axis);
         }
-        return extend;
+        return bandSize === 0 ? [-size / 2, size / 2] : [bandSize / 2 - size / 2, size / 2 + bandSize / 2];
     };
 
     class CartesianCrossHair extends BaseCrossHair {
@@ -97497,17 +97724,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         return offset;
     }
+    function getProcessInfo(spec) {
+        return {
+            isXProcess: isValid$1(spec.x),
+            isYProcess: isValid$1(spec.y),
+            isX1Process: isValid$1(spec.x1),
+            isY1Process: isValid$1(spec.y1),
+            isAngleProcess: isValid$1(spec.angle),
+            isRadiusProcess: isValid$1(spec.radius),
+            isAngle1Process: isValid$1(spec.angle1),
+            isRadius1Process: isValid$1(spec.radius1),
+            isCoordinatesProcess: isValid$1(spec.coordinates),
+            isValidProcess: isValid$1(spec.process)
+        };
+    }
     function getMarkLineProcessInfo(spec) {
-        const isXProcess = 'x' in spec;
-        const isYProcess = 'y' in spec;
-        const isX1Process = 'x1' in spec;
-        const isY1Process = 'y1' in spec;
-        const isAngleProcess = 'angle' in spec;
-        const isRadiusProcess = 'radius' in spec;
-        const isAngle1Process = 'angle1' in spec;
-        const isRadius1Process = 'radius1' in spec;
-        const isCoordinatesProcess = 'coordinates' in spec;
-        const isValidProcess = 'process' in spec;
+        const { isXProcess, isYProcess, isX1Process, isY1Process, isAngleProcess, isRadiusProcess, isAngle1Process, isRadius1Process, isCoordinatesProcess, isValidProcess } = getProcessInfo(spec);
         return {
             doXProcess: isXProcess && !isYProcess && !isY1Process,
             doXYY1Process: isXProcess && isYProcess && isY1Process,
@@ -97523,15 +97755,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         };
     }
     function getMarkAreaProcessInfo(spec) {
-        const isXProcess = 'x' in spec;
-        const isX1Process = 'x1' in spec;
-        const isYProcess = 'y' in spec;
-        const isY1Process = 'y1' in spec;
-        const isAngleProcess = 'angle' in spec;
-        const isRadiusProcess = 'radius' in spec;
-        const isAngle1Process = 'angle1' in spec;
-        const isRadius1Process = 'radius1' in spec;
-        const isCoordinatesProcess = 'coordinates' in spec;
+        const { isXProcess, isYProcess, isX1Process, isY1Process, isAngleProcess, isRadiusProcess, isAngle1Process, isRadius1Process, isCoordinatesProcess } = getProcessInfo(spec);
         return {
             doXProcess: isXProcess && isX1Process && !isYProcess && !isY1Process,
             doYProcess: isYProcess && isY1Process && !isXProcess && !isX1Process,
@@ -98049,13 +98273,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return 'cartesian';
         }
         _createMarkerComponent() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-            const { label = {}, startSymbol = {}, endSymbol = {} } = this._spec;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            const { startSymbol = {}, endSymbol = {} } = this._spec;
+            const label = array((_a = this._spec.label) !== null && _a !== void 0 ? _a : {});
             const markLineAttrs = {
                 zIndex: this.layoutZIndex,
-                interactive: (_a = this._spec.interactive) !== null && _a !== void 0 ? _a : true,
-                hover: (_b = this._spec.interactive) !== null && _b !== void 0 ? _b : true,
-                select: (_c = this._spec.interactive) !== null && _c !== void 0 ? _c : true,
+                interactive: (_b = this._spec.interactive) !== null && _b !== void 0 ? _b : true,
+                hover: (_c = this._spec.interactive) !== null && _c !== void 0 ? _c : true,
+                select: (_d = this._spec.interactive) !== null && _d !== void 0 ? _d : true,
                 points: [
                     { x: 0, y: 0 },
                     { x: 0, y: 0 }
@@ -98067,17 +98292,25 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 radius: 0,
                 startAngle: 0,
                 endAngle: 0,
-                lineStyle: transformStyle(transformToGraphic((_d = this._spec.line) === null || _d === void 0 ? void 0 : _d.style), this._markerData, this._markAttributeContext),
-                clipInRange: (_e = this._spec.clip) !== null && _e !== void 0 ? _e : false,
-                label: transformLabelAttributes(label, this._markerData, this._markAttributeContext),
+                lineStyle: transformStyle(transformToGraphic((_e = this._spec.line) === null || _e === void 0 ? void 0 : _e.style), this._markerData, this._markAttributeContext),
+                clipInRange: (_f = this._spec.clip) !== null && _f !== void 0 ? _f : false,
+                label: label.map(labelItem => {
+                    return transformLabelAttributes(labelItem, this._markerData, this._markAttributeContext);
+                }),
                 state: {
-                    line: transformState((_g = (_f = this._spec.line) === null || _f === void 0 ? void 0 : _f.state) !== null && _g !== void 0 ? _g : {}, this._markerData, this._markAttributeContext),
-                    lineStartSymbol: transformState((_j = (_h = this._spec.startSymbol) === null || _h === void 0 ? void 0 : _h.state) !== null && _j !== void 0 ? _j : {}, this._markerData, this._markAttributeContext),
-                    lineEndSymbol: transformState((_l = (_k = this._spec.endSymbol) === null || _k === void 0 ? void 0 : _k.state) !== null && _l !== void 0 ? _l : {}, this._markerData, this._markAttributeContext),
-                    label: transformState((_p = (_o = (_m = this._spec) === null || _m === void 0 ? void 0 : _m.label) === null || _o === void 0 ? void 0 : _o.state) !== null && _p !== void 0 ? _p : {}, this._markerData, this._markAttributeContext),
-                    labelBackground: transformState((_t = (_s = (_r = (_q = this._spec) === null || _q === void 0 ? void 0 : _q.label) === null || _r === void 0 ? void 0 : _r.labelBackground) === null || _s === void 0 ? void 0 : _s.state) !== null && _t !== void 0 ? _t : {}, this._markerData, this._markAttributeContext)
+                    line: transformState((_h = (_g = this._spec.line) === null || _g === void 0 ? void 0 : _g.state) !== null && _h !== void 0 ? _h : {}, this._markerData, this._markAttributeContext),
+                    lineStartSymbol: transformState((_k = (_j = this._spec.startSymbol) === null || _j === void 0 ? void 0 : _j.state) !== null && _k !== void 0 ? _k : {}, this._markerData, this._markAttributeContext),
+                    lineEndSymbol: transformState((_m = (_l = this._spec.endSymbol) === null || _l === void 0 ? void 0 : _l.state) !== null && _m !== void 0 ? _m : {}, this._markerData, this._markAttributeContext),
+                    label: label.map(labelItem => {
+                        var _a;
+                        return transformState((_a = labelItem.state) !== null && _a !== void 0 ? _a : {}, this._markerData, this._markAttributeContext);
+                    }),
+                    labelBackground: label.map(labelItem => {
+                        var _a, _b;
+                        return transformState((_b = (_a = labelItem.labelBackground) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : {}, this._markerData, this._markAttributeContext);
+                    })
                 },
-                animation: (_u = this._spec.animation) !== null && _u !== void 0 ? _u : false,
+                animation: (_o = this._spec.animation) !== null && _o !== void 0 ? _o : false,
                 animationEnter: this._spec.animationEnter,
                 animationExit: this._spec.animationExit,
                 animationUpdate: this._spec.animationUpdate
@@ -98102,7 +98335,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return markLine;
         }
         _getUpdateMarkerAttrs() {
-            var _a, _b, _c, _d;
+            var _a, _b;
             const spec = this._spec;
             const data = this._markerData;
             const startRelativeSeries = this._startRelativeSeries;
@@ -98112,7 +98345,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const seriesData = relativeSeries.getViewData().latestData;
             const dataPoints = data.latestData[0] && data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
             let limitRect;
-            if (spec.clip || ((_a = spec.label) === null || _a === void 0 ? void 0 : _a.confine)) {
+            if (spec.clip || array(spec.label).some(labelCfg => labelCfg === null || labelCfg === void 0 ? void 0 : labelCfg.confine)) {
                 const { minX, maxX, minY, maxY } = computeClipRange([
                     startRelativeSeries.getRegion(),
                     endRelativeSeries.getRegion(),
@@ -98125,10 +98358,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     height: maxY - minY
                 };
             }
-            const markerComponentAttr = (_c = (_b = this._markerComponent) === null || _b === void 0 ? void 0 : _b.attribute) !== null && _c !== void 0 ? _c : {};
-            const labelAttrs = Object.assign(Object.assign({}, markerComponentAttr.label), { text: this._spec.label.formatMethod
-                    ? this._spec.label.formatMethod(dataPoints, seriesData)
-                    : (_d = markerComponentAttr.label) === null || _d === void 0 ? void 0 : _d.text });
+            const markerComponentAttr = (_b = (_a = this._markerComponent) === null || _a === void 0 ? void 0 : _a.attribute) !== null && _b !== void 0 ? _b : {};
+            const prevLabelAttrs = array(markerComponentAttr.label);
+            const specLabels = array(this._spec.label);
+            const labelAttrs = prevLabelAttrs.map((prevLabel, index) => {
+                const specLabel = specLabels[index] || {};
+                return Object.assign(Object.assign({}, prevLabel), { text: specLabel.formatMethod ? specLabel.formatMethod(dataPoints, seriesData) : prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.text });
+            });
             return Object.assign(Object.assign({}, pointsAttr), { label: labelAttrs, limitRect, dx: this._layoutOffsetX, dy: this._layoutOffsetY });
         }
         _markerLayout() {
@@ -98230,7 +98466,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return { points };
         }
         _markerLayout() {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d;
             const updateAttrs = this._getUpdateMarkerAttrs();
             if (this._spec.type === 'type-step') {
                 const startRelativeSeries = this._startRelativeSeries;
@@ -98257,34 +98493,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 else {
                     expandDistanceValue = expandDistance;
                 }
-                const { points, label, limitRect } = updateAttrs;
+                const { points, limitRect } = updateAttrs;
                 const joinPoints = getInsertPoints(points[0], points[1], connectDirection, expandDistanceValue);
                 let labelPositionAttrs;
                 if (multiSegment && isValid$1(mainSegmentIndex)) {
                     labelPositionAttrs = {
                         position: 'middle',
-                        autoRotate: false,
-                        refX: 0,
-                        refY: 0
+                        autoRotate: false
                     };
                 }
                 else {
-                    labelPositionAttrs = Object.assign(Object.assign({ position: 'start', autoRotate: false }, getTextOffset(points[0], points[1], connectDirection, expandDistanceValue)), { refX: 0, refY: 0 });
-                }
-                if (isValidNumber$1((_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.refX)) {
-                    labelPositionAttrs.refX += this._spec.label.refX;
-                }
-                if (isValidNumber$1((_b = this._spec.label) === null || _b === void 0 ? void 0 : _b.refY)) {
-                    labelPositionAttrs.refY += this._spec.label.refY;
-                }
-                if (isValidNumber$1((_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.dx)) {
-                    labelPositionAttrs.dx = (labelPositionAttrs.dx || 0) + this._spec.label.dx;
-                }
-                if (isValidNumber$1((_d = this._spec.label) === null || _d === void 0 ? void 0 : _d.dy)) {
-                    labelPositionAttrs.dy = (labelPositionAttrs.dy || 0) + this._spec.label.dy;
+                    labelPositionAttrs = Object.assign({ position: 'start', autoRotate: false }, getTextOffset(points[0], points[1], connectDirection, expandDistanceValue));
                 }
-                const markerComponentAttr = (_f = (_e = this._markerComponent) === null || _e === void 0 ? void 0 : _e.attribute) !== null && _f !== void 0 ? _f : {};
-                (_g = this._markerComponent) === null || _g === void 0 ? void 0 : _g.setAttributes({
+                const markerComponentAttr = (_b = (_a = this._markerComponent) === null || _a === void 0 ? void 0 : _a.attribute) !== null && _b !== void 0 ? _b : {};
+                const prevLabelAttrs = array(markerComponentAttr.label);
+                const updateLabels = array(updateAttrs.label);
+                const labelsInSpec = array(this._spec.label);
+                (_c = this._markerComponent) === null || _c === void 0 ? void 0 : _c.setAttributes({
                     points: multiSegment
                         ? [
                             [joinPoints[0], joinPoints[1]],
@@ -98292,7 +98517,30 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             [joinPoints[2], joinPoints[3]]
                         ]
                         : joinPoints,
-                    label: Object.assign(Object.assign(Object.assign({}, label), labelPositionAttrs), { textStyle: Object.assign(Object.assign({}, markerComponentAttr.label.textStyle), { textAlign: 'center', textBaseline: 'middle' }) }),
+                    label: updateLabels.map((labelItem, index) => {
+                        var _a, _b, _c, _d;
+                        let refX = 0;
+                        let refY = 0;
+                        let dx = (_a = labelPositionAttrs.dx) !== null && _a !== void 0 ? _a : 0;
+                        let dy = (_b = labelPositionAttrs.dy) !== null && _b !== void 0 ? _b : 0;
+                        const labelSpec = (_c = labelsInSpec[index]) !== null && _c !== void 0 ? _c : labelsInSpec[0];
+                        if (isValidNumber$1(labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.refX)) {
+                            refX += labelSpec.refX;
+                        }
+                        if (isValidNumber$1(labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.refY)) {
+                            refY += labelSpec.refY;
+                        }
+                        if (isValidNumber$1(labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.dx)) {
+                            dx += labelSpec.dx;
+                        }
+                        if (isValidNumber$1(labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.dy)) {
+                            dy += labelSpec.dy;
+                        }
+                        return Object.assign(Object.assign(Object.assign({}, labelItem), labelPositionAttrs), { refX,
+                            refY,
+                            dx,
+                            dy, textStyle: Object.assign(Object.assign({}, (_d = prevLabelAttrs[index]) === null || _d === void 0 ? void 0 : _d.textStyle), { textAlign: 'center', textBaseline: 'middle' }) });
+                    }),
                     limitRect,
                     multiSegment,
                     mainSegmentIndex,
@@ -98301,7 +98549,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
             else {
-                (_h = this._markerComponent) === null || _h === void 0 ? void 0 : _h.setAttributes(updateAttrs);
+                (_d = this._markerComponent) === null || _d === void 0 ? void 0 : _d.setAttributes(updateAttrs);
             }
         }
         _computeOptions() {
@@ -98365,15 +98613,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     type: 'markerAggregation',
                     options
                 });
-                if (spec.process && 'x' in spec.process) {
+                if (spec.process && isValid$1(spec.process.x)) {
                     options = [this._processSpecByDims([{ dim: 'x', specValue: spec.process.x }])];
                     needAggr = true;
                 }
-                if (spec.process && 'y' in spec.process) {
+                if (spec.process && isValid$1(spec.process.y)) {
                     options = options = [this._processSpecByDims([{ dim: 'y', specValue: spec.process.y }])];
                     needAggr = true;
                 }
-                if (spec.process && 'xy' in spec.process) {
+                if (spec.process && isValid$1(spec.process.xy)) {
                     const { xField, yField } = relativeSeries.getSpec();
                     options = {
                         fieldX: xField,
@@ -98655,8 +98903,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return 'cartesian';
         }
         _createMarkerComponent() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-            const label = (_a = this._spec.label) !== null && _a !== void 0 ? _a : {};
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const label = array((_a = this._spec.label) !== null && _a !== void 0 ? _a : {});
             const markAreaAttrs = {
                 zIndex: this.layoutZIndex,
                 interactive: (_b = this._spec.interactive) !== null && _b !== void 0 ? _b : true,
@@ -98678,13 +98926,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 endAngle: 0,
                 areaStyle: transformStyle(transformToGraphic((_e = this._spec.area) === null || _e === void 0 ? void 0 : _e.style), this._markerData, this._markAttributeContext),
                 clipInRange: (_f = this._spec.clip) !== null && _f !== void 0 ? _f : false,
-                label: transformLabelAttributes(label, this._markerData, this._markAttributeContext),
+                label: label.map((labelItem) => {
+                    return transformLabelAttributes(labelItem, this._markerData, this._markAttributeContext);
+                }),
                 state: {
                     area: transformState((_g = this._spec.area) === null || _g === void 0 ? void 0 : _g.state, this._markerData, this._markAttributeContext),
-                    label: transformState((_h = this._spec.label) === null || _h === void 0 ? void 0 : _h.state, this._markerData, this._markAttributeContext),
-                    labelBackground: transformState((_l = (_k = (_j = this._spec) === null || _j === void 0 ? void 0 : _j.label) === null || _k === void 0 ? void 0 : _k.labelBackground) === null || _l === void 0 ? void 0 : _l.state, this._markerData, this._markAttributeContext)
+                    label: label.map((labelItem) => {
+                        return transformState(labelItem.state, this._markerData, this._markAttributeContext);
+                    }),
+                    labelBackground: label.map((labelItem) => {
+                        var _a;
+                        return transformState((_a = labelItem.labelBackground) === null || _a === void 0 ? void 0 : _a.state, this._markerData, this._markAttributeContext);
+                    })
                 },
-                animation: (_m = this._spec.animation) !== null && _m !== void 0 ? _m : false,
+                animation: (_h = this._spec.animation) !== null && _h !== void 0 ? _h : false,
                 animationEnter: this._spec.animationEnter,
                 animationExit: this._spec.animationExit,
                 animationUpdate: this._spec.animationUpdate
@@ -98693,7 +98948,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return markArea;
         }
         _markerLayout() {
-            var _a, _b, _c, _d;
+            var _a;
             const spec = this._spec;
             const data = this._markerData;
             const startRelativeSeries = this._startRelativeSeries;
@@ -98707,7 +98962,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     : data.latestData
                 : seriesData;
             let limitRect;
-            if (spec.clip || ((_a = spec.label) === null || _a === void 0 ? void 0 : _a.confine)) {
+            if (spec.clip || array(spec.label).some(labelCfg => labelCfg === null || labelCfg === void 0 ? void 0 : labelCfg.confine)) {
                 const { minX, maxX, minY, maxY } = computeClipRange([
                     startRelativeSeries.getRegion(),
                     endRelativeSeries.getRegion(),
@@ -98721,10 +98976,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 };
             }
             if (this._markerComponent) {
-                this._markerComponent.setAttributes(Object.assign(Object.assign({}, pointsAttr), { label: Object.assign(Object.assign({}, (_b = this._markerComponent.attribute) === null || _b === void 0 ? void 0 : _b.label), { text: this._spec.label.formatMethod
-                            ?
-                                this._spec.label.formatMethod(dataPoints, seriesData)
-                            : (_d = (_c = this._markerComponent.attribute) === null || _c === void 0 ? void 0 : _c.label) === null || _d === void 0 ? void 0 : _d.text }), limitRect, dx: this._layoutOffsetX, dy: this._layoutOffsetY }));
+                const prevLabelAttrs = array((_a = this._markerComponent.attribute) === null || _a === void 0 ? void 0 : _a.label);
+                const specLabels = array(this._spec.label);
+                this._markerComponent.setAttributes(Object.assign(Object.assign({}, pointsAttr), { label: prevLabelAttrs.map((prevLabel, index) => {
+                        const specLabel = specLabels[index] || {};
+                        return Object.assign(Object.assign({}, prevLabel), { text: specLabel.formatMethod
+                                ?
+                                    specLabel.formatMethod(dataPoints, seriesData)
+                                : prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.text });
+                    }), limitRect, dx: this._layoutOffsetX, dy: this._layoutOffsetY }));
             }
         }
         _initDataView() {
@@ -99953,9 +100213,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const spec = this._spec;
             const data = this._markerData;
             const relativeSeries = this._relativeSeries;
-            const isXYLayout = 'x' in spec && 'y' in spec;
-            const isCoordinateLayout = 'coordinate' in spec;
-            const isPositionLayout = 'position' in spec;
+            const isXYLayout = isValid$1(spec.x) && isValid$1(spec.y);
+            const isCoordinateLayout = isValid$1(spec.coordinate);
+            const isPositionLayout = isValid$1(spec.position);
             const autoRange = (_a = spec === null || spec === void 0 ? void 0 : spec.autoRange) !== null && _a !== void 0 ? _a : false;
             let point;
             if (isXYLayout) {
@@ -100078,7 +100338,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._outOfBrushElementsMap = {};
             this._linkedInBrushElementsMap = {};
             this._linkedOutOfBrushElementsMap = {};
-            this._needInitOutState = true;
             this._cacheInteractiveRangeAttrs = [];
             this._needDisablePickable = false;
             this._releatedAxes = [];
@@ -100086,6 +100345,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._axisDataZoomMap = {};
             this._zoomRecord = [];
         }
+        static getSpecInfo(chartSpec) {
+            return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+                return s.visible !== false;
+            });
+        }
         init() {
             const inBrushMarkAttr = this._transformBrushedMarkAttr(this._spec.inBrush);
             const outOfBrushMarkAttr = this._transformBrushedMarkAttr(this._spec.outOfBrush);
@@ -100098,9 +100362,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             });
         }
-        static getSpecInfo(chartSpec) {
-            return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
-                return s.visible !== false;
+        _initNeedOperatedItem() {
+            const seriesUserId = this._spec.seriesId;
+            const seriesIndex = this._spec.seriesIndex;
+            this._relativeRegions.forEach(r => {
+                const allMarks = [];
+                r.getSeries().forEach((s) => {
+                    if ((seriesUserId && array(seriesUserId).includes(s.userId.toString())) ||
+                        (seriesIndex && array(seriesIndex).includes(s.getSpecIndex())) ||
+                        (!seriesIndex && !seriesUserId)) {
+                        allMarks.push(...s.getMarksWithoutRoot());
+                    }
+                    this._itemMap[r.id] = allMarks;
+                });
+            });
+            this._linkedSeries.forEach(s => {
+                this._linkedItemMap[s.id] = s.getMarksWithoutRoot();
             });
         }
         created() {
@@ -100112,41 +100389,91 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initAxisDataZoomMap();
             this._initNeedOperatedItem();
         }
-        _extendDataInBrush(elementsMap) {
-            var _a, _b;
-            const data = [];
-            for (const brushName in elementsMap) {
-                for (const elementKey in elementsMap[brushName]) {
-                    data.push(Object.assign({}, (_b = (_a = elementsMap[brushName][elementKey]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0]));
+        _bindRegions() {
+            if (!isValid$1(this._spec.regionId) && !isValid$1(this._spec.regionIndex)) {
+                this._relativeRegions = this._option.getAllRegions();
+            }
+            else {
+                this._relativeRegions = this._option.getRegionsInUserIdOrIndex(array(this._spec.regionId), array(this._spec.regionIndex));
+            }
+        }
+        _bindLinkedSeries() {
+            if (!isValid$1(this._spec.brushLinkSeriesId) && !isValid$1(this._spec.brushLinkSeriesIndex)) {
+                return;
+            }
+            this._linkedSeries = this._option.getSeriesInUserIdOrIndex(array(this._spec.brushLinkSeriesId), array(this._spec.brushLinkSeriesIndex));
+        }
+        _initRegionAxisMap() {
+            if (isValid$1(this._spec.axisId)) {
+                array(this._spec.axisId).forEach((axisId) => {
+                    this._releatedAxes.push(this._option.getComponentByUserId(axisId));
+                });
+            }
+            else if (isValid$1(this._spec.axisIndex)) {
+                array(this._spec.axisIndex).forEach((axisIndex) => {
+                    this._releatedAxes.push(this._option.getComponentByIndex('axes', axisIndex));
+                });
+            }
+            else {
+                this._releatedAxes = this._option.getComponentsByKey('axes');
+            }
+            this._releatedAxes.forEach((axis) => {
+                axis === null || axis === void 0 ? void 0 : axis.getRegions().forEach((region) => {
+                    if (this._regionAxisMap['region_' + region.id]) {
+                        this._regionAxisMap['region_' + region.id].push(axis);
+                    }
+                    else {
+                        this._regionAxisMap['region_' + region.id] = [axis];
+                    }
+                });
+            });
+        }
+        _initAxisDataZoomMap() {
+            this._option.getComponentsByKey('dataZoom').forEach((dz) => {
+                if (dz.relatedAxisComponent) {
+                    this._axisDataZoomMap[dz.relatedAxisComponent.id] = dz;
                 }
+            });
+        }
+        initEvent() {
+        }
+        onRender(ctx) {
+        }
+        changeRegions(regions) {
+        }
+        _compareSpec(spec, prevSpec) {
+            if (this._brushComponents) {
+                this._relativeRegions.forEach((region, index) => {
+                    this._updateBrushComponent(region, index);
+                });
             }
-            return data;
+            const result = super._compareSpec(spec, prevSpec);
+            if (!isEqual(prevSpec, spec)) {
+                result.reRender = true;
+                result.reMake = true;
+            }
+            return result;
         }
-        _extendDatumOutOfBrush(elementsMap) {
+        onLayoutEnd(ctx) {
             var _a;
-            const data = [];
-            for (const elementKey in elementsMap) {
-                data.push((_a = elementsMap[elementKey].data) === null || _a === void 0 ? void 0 : _a[0]);
+            super.onLayoutEnd(ctx);
+            if (this._option.disableTriggerEvent) {
+                return;
+            }
+            const brushVisible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
+            if (brushVisible) {
+                if (!this._brushComponents) {
+                    this._brushComponents = [];
+                    this._relativeRegions.forEach((region, index) => {
+                        this._createBrushComponent(region, index);
+                    });
+                }
+                else {
+                    this._relativeRegions.forEach((region, index) => {
+                        this._updateBrushComponent(region, index);
+                    });
+                }
             }
-            return data;
-        }
-        _getBrushInteractiveAttr(region) {
-            const regionLayoutPosition = region.getLayoutStartPoint();
-            const regionLayoutRect = region.getLayoutRect();
-            const seriesRegionStartX = regionLayoutPosition.x;
-            const seriesRegionEndX = seriesRegionStartX + regionLayoutRect.width;
-            const seriesRegionStartY = regionLayoutPosition.y;
-            const seriesRegionEndY = seriesRegionStartY + regionLayoutRect.height;
-            return {
-                interactiveRange: {
-                    minY: seriesRegionStartY,
-                    maxY: seriesRegionEndY,
-                    minX: seriesRegionStartX,
-                    maxX: seriesRegionEndX
-                },
-                xRange: [seriesRegionStartX, seriesRegionEndX],
-                yRange: [seriesRegionStartY, seriesRegionEndY]
-            };
         }
         _updateBrushComponent(region, componentIndex) {
             const interactiveAttr = this._getBrushInteractiveAttr(region);
@@ -100154,7 +100481,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             brushComponent.setAttributes(interactiveAttr);
             this._initMarkBrushState(componentIndex, '');
             brushComponent.children[0].removeAllChild();
-            this._needInitOutState = true;
         }
         _createBrushComponent(region, componentIndex) {
             var _a, _b;
@@ -100162,9 +100488,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const brush = new Brush$1(Object.assign(Object.assign(Object.assign({ zIndex: this.layoutZIndex, brushStyle: transformToGraphic((_a = this._spec) === null || _a === void 0 ? void 0 : _a.style) }, interactiveAttr), this._spec), { disableTriggerEvent: this._option.disableTriggerEvent }));
             brush.id = (_b = this._spec.id) !== null && _b !== void 0 ? _b : `brush-${this.id}`;
             this.getContainer().add(brush);
-            const { brushMode = 'single' } = this._spec;
             this._brushComponents.push(brush);
             this._cacheInteractiveRangeAttrs.push(interactiveAttr);
+            brush.addEventListener(IOperateType.brushActive, (e) => {
+                this._initMarkBrushState(componentIndex, OUT_BRUSH_STATE);
+                this._emitEvent(ChartEvent.brushActive, region);
+            });
             brush.addEventListener(IOperateType.drawStart, (e) => {
                 this._emitEvent(ChartEvent.brushStart, region);
             });
@@ -100172,41 +100501,45 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._emitEvent(ChartEvent.brushStart, region);
             });
             brush.addEventListener(IOperateType.drawing, (e) => {
-                if (this._needInitOutState && brushMode === 'single') {
-                    this._initMarkBrushState(componentIndex, OUT_BRUSH_STATE);
-                }
-                this._needInitOutState = false;
                 this._needDisablePickable = true;
-                this._handleBrushChange(ChartEvent.brushChange, region, e);
+                this._handleBrushChange(region, e);
                 this._emitEvent(ChartEvent.brushChange, region);
             });
             brush.addEventListener(IOperateType.moving, (e) => {
-                this._handleBrushChange(ChartEvent.brushChange, region, e);
+                this._handleBrushChange(region, e);
                 this._emitEvent(ChartEvent.brushChange, region);
             });
             brush.addEventListener(IOperateType.brushClear, (e) => {
                 this._initMarkBrushState(componentIndex, '');
-                this._needInitOutState = true;
                 this._needDisablePickable = false;
-                this._handleBrushChange(ChartEvent.brushChange, region, e);
-                this._handleBrushChange(ChartEvent.brushClear, region, e);
-                this._emitEvent(ChartEvent.brushChange, region);
                 this._emitEvent(ChartEvent.brushClear, region);
             });
             brush.addEventListener(IOperateType.drawEnd, (e) => {
-                this._needInitOutState = true;
+                var _a;
                 this._needDisablePickable = false;
                 const { operateMask } = e.detail;
-                this._handleBrushChange(ChartEvent.brushEnd, region, e);
-                const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-                if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
-                    this._setAxisAndDataZoom(operateMask, region);
+                if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.onBrushEnd) {
+                    if (this._spec.onBrushEnd(e) === true) {
+                        this.clearGraphic();
+                        this._initMarkBrushState(componentIndex, '');
+                        this._needDisablePickable = false;
+                        this._emitEvent(ChartEvent.brushClear, region);
+                    }
+                    else {
+                        this._spec.onBrushEnd(e);
+                        this._emitEvent(ChartEvent.brushEnd, region);
+                    }
+                }
+                else {
+                    const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
+                    if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
+                        this._setAxisAndDataZoom(operateMask, region);
+                    }
+                    this._emitEvent(ChartEvent.brushEnd, region);
                 }
-                this._emitEvent(ChartEvent.brushEnd, region);
             });
             brush.addEventListener(IOperateType.moveEnd, (e) => {
                 const { operateMask } = e.detail;
-                this._handleBrushChange(ChartEvent.brushEnd, region, e);
                 const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
                 if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
                     this._setAxisAndDataZoom(operateMask, region);
@@ -100214,12 +100547,65 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._emitEvent(ChartEvent.brushEnd, region);
             });
         }
-        _handleBrushChange(eventType, region, e) {
+        _getBrushInteractiveAttr(region) {
+            const regionLayoutPosition = region.getLayoutStartPoint();
+            const regionLayoutRect = region.getLayoutRect();
+            const seriesRegionStartX = regionLayoutPosition.x;
+            const seriesRegionEndX = seriesRegionStartX + regionLayoutRect.width;
+            const seriesRegionStartY = regionLayoutPosition.y;
+            const seriesRegionEndY = seriesRegionStartY + regionLayoutRect.height;
+            return {
+                interactiveRange: {
+                    minY: seriesRegionStartY,
+                    maxY: seriesRegionEndY,
+                    minX: seriesRegionStartX,
+                    maxX: seriesRegionEndX
+                },
+                xRange: [seriesRegionStartX, seriesRegionEndX],
+                yRange: [seriesRegionStartY, seriesRegionEndY]
+            };
+        }
+        _transformBrushedMarkAttr(brushedStyle) {
+            const styleResult = {};
+            if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.symbol) {
+                styleResult.symbolType = brushedStyle.symbol;
+            }
+            if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.symbolSize) {
+                styleResult.size = brushedStyle.symbolSize;
+            }
+            if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.color) {
+                styleResult.fill = brushedStyle.color;
+            }
+            if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.colorAlpha) {
+                styleResult.fillOpacity = brushedStyle.colorAlpha;
+            }
+            return Object.assign(Object.assign({}, transformToGraphic(brushedStyle)), styleResult);
+        }
+        _handleBrushChange(region, e) {
             const { operateMask } = e.detail;
             this._reconfigItem(operateMask, region);
             this._reconfigLinkedItem(operateMask, region);
         }
+        _extendDataInBrush(elementsMap) {
+            var _a, _b;
+            const data = [];
+            for (const brushName in elementsMap) {
+                for (const elementKey in elementsMap[brushName]) {
+                    data.push(Object.assign({}, (_b = (_a = elementsMap[brushName][elementKey]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0]));
+                }
+            }
+            return data;
+        }
+        _extendDatumOutOfBrush(elementsMap) {
+            var _a;
+            const data = [];
+            for (const elementKey in elementsMap) {
+                data.push((_a = elementsMap[elementKey].data) === null || _a === void 0 ? void 0 : _a[0]);
+            }
+            return data;
+        }
         _emitEvent(eventType, region) {
+            var _a;
             this.event.emit(eventType, {
                 model: this,
                 value: {
@@ -100234,27 +100620,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     linkedInBrushElementsMap: this._linkedInBrushElementsMap,
                     linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap,
                     zoomRecord: this._zoomRecord
-                }
+                },
+                vchart: (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance
             });
         }
-        _transformBrushedMarkAttr(brushedStyle) {
-            const styleResult = {};
-            if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.symbol) {
-                styleResult.symbolType = brushedStyle.symbol;
-            }
-            if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.symbolSize) {
-                styleResult.size = brushedStyle.symbolSize;
-            }
-            if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.color) {
-                styleResult.fill = brushedStyle.color;
-            }
-            if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.colorAlpha) {
-                styleResult.fillOpacity = brushedStyle.colorAlpha;
-            }
-            return Object.assign(Object.assign({}, transformToGraphic(brushedStyle)), styleResult);
-        }
         _reconfigItem(operateMask, region) {
+            var _a, _b, _c;
+            if (!(operateMask === null || operateMask === void 0 ? void 0 : operateMask.globalTransMatrix) || !((_a = operateMask === null || operateMask === void 0 ? void 0 : operateMask.attribute) === null || _a === void 0 ? void 0 : _a.points)) {
+                return;
+            }
+            const points = (_c = (_b = operateMask === null || operateMask === void 0 ? void 0 : operateMask.attribute) === null || _b === void 0 ? void 0 : _b.points) !== null && _c !== void 0 ? _c : [];
+            const { a, b, c, d, e, f } = operateMask.globalTransMatrix;
+            const pointsCoord = points.map((p) => {
+                return {
+                    x: a * p.x + c * p.y + e,
+                    y: b * p.x + d * p.y + f
+                };
+            });
+            const { markTypeFilter = [] } = this._spec;
             this._itemMap[region.id].forEach((mark) => {
+                if (markTypeFilter.includes(mark.type)) {
+                    return;
+                }
                 const grammarMark = mark.getProduct();
                 if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
                     return;
@@ -100264,7 +100651,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     var _a, _b, _c;
                     const graphicItem = el.getGraphicItem();
                     const elementKey = mark.id + '_' + el.key;
-                    if (((_a = this._outOfBrushElementsMap) === null || _a === void 0 ? void 0 : _a[elementKey]) && this._isBrushContainItem(operateMask, graphicItem)) {
+                    const isBrushContainItem = this._isBrushContainItem(operateMask.globalAABBBounds, pointsCoord, graphicItem);
+                    if (((_a = this._outOfBrushElementsMap) === null || _a === void 0 ? void 0 : _a[elementKey]) && isBrushContainItem) {
                         el.addState(IN_BRUSH_STATE);
                         if (!this._inBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) {
                             this._inBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name] = {};
@@ -100272,8 +100660,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         this._inBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name][elementKey] = el;
                         delete this._outOfBrushElementsMap[elementKey];
                     }
-                    else if (((_c = (_b = this._inBrushElementsMap) === null || _b === void 0 ? void 0 : _b[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) === null || _c === void 0 ? void 0 : _c[elementKey]) &&
-                        !this._isBrushContainItem(operateMask, graphicItem)) {
+                    else if (((_c = (_b = this._inBrushElementsMap) === null || _b === void 0 ? void 0 : _b[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) === null || _c === void 0 ? void 0 : _c[elementKey]) && !isBrushContainItem) {
                         el.removeState(IN_BRUSH_STATE);
                         el.addState(OUT_BRUSH_STATE);
                         this._outOfBrushElementsMap[elementKey] = el;
@@ -100284,14 +100671,36 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         _reconfigLinkedItem(operateMask, region) {
+            var _a;
+            if (!(operateMask === null || operateMask === void 0 ? void 0 : operateMask.globalTransMatrix) || !((_a = operateMask === null || operateMask === void 0 ? void 0 : operateMask.attribute) === null || _a === void 0 ? void 0 : _a.points)) {
+                return;
+            }
             const regionLayoutPos = region.getLayoutStartPoint();
             const seriesId = region.getSeries().map(s => s.id);
             this._linkedSeries.forEach((s) => {
+                var _a, _b;
                 if (!seriesId.includes(s.id)) {
                     const sRegionLayoutPos = s.getRegion().getLayoutStartPoint();
                     const regionOffsetX = sRegionLayoutPos.x - regionLayoutPos.x;
                     const regionOffsetY = sRegionLayoutPos.y - regionLayoutPos.y;
+                    const points = (_b = (_a = operateMask === null || operateMask === void 0 ? void 0 : operateMask.attribute) === null || _a === void 0 ? void 0 : _a.points) !== null && _b !== void 0 ? _b : [];
+                    const { a, b, c, d, e, f } = operateMask.globalTransMatrix;
+                    const dx = regionOffsetX || 0;
+                    const dy = regionOffsetY || 0;
+                    const pointsCoord = points.map((p) => {
+                        return {
+                            x: a * p.x + c * p.y + e + dx,
+                            y: b * p.x + d * p.y + f + dy
+                        };
+                    });
+                    operateMask.globalAABBBounds
+                        .clone()
+                        .set(operateMask.globalAABBBounds.x1 + dx, operateMask.globalAABBBounds.y1 + dy, operateMask.globalAABBBounds.x2 + dx, operateMask.globalAABBBounds.y2 + dy);
+                    const { markTypeFilter = [] } = this._spec;
                     this._linkedItemMap[s.id].forEach((mark) => {
+                        if (markTypeFilter.includes(mark.type)) {
+                            return;
+                        }
                         const grammarMark = mark.getProduct();
                         if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
                             return;
@@ -100302,7 +100711,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             const graphicItem = el.getGraphicItem();
                             const elementKey = mark.id + '_' + el.key;
                             if (((_a = this._linkedOutOfBrushElementsMap) === null || _a === void 0 ? void 0 : _a[elementKey]) &&
-                                this._isBrushContainItem(operateMask, graphicItem, { dx: regionOffsetX, dy: regionOffsetY })) {
+                                this._isBrushContainItem(operateMask.globalAABBBounds, pointsCoord, graphicItem)) {
                                 el.addState(IN_BRUSH_STATE);
                                 if (!this._linkedInBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) {
                                     this._linkedInBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name] = {};
@@ -100311,7 +100720,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 delete this._linkedOutOfBrushElementsMap[elementKey];
                             }
                             else if (((_c = (_b = this._linkedInBrushElementsMap) === null || _b === void 0 ? void 0 : _b[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) === null || _c === void 0 ? void 0 : _c[elementKey]) &&
-                                !this._isBrushContainItem(operateMask, graphicItem, { dx: regionOffsetX, dy: regionOffsetY })) {
+                                !this._isBrushContainItem(operateMask.globalAABBBounds, pointsCoord, graphicItem)) {
                                 el.removeState(IN_BRUSH_STATE);
                                 el.addState(OUT_BRUSH_STATE);
                                 this._linkedOutOfBrushElementsMap[elementKey] = el;
@@ -100322,75 +100731,81 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             });
         }
-        _isBrushContainItem(brushMask, item, linkedOffset) {
-            var _a, _b, _c;
-            if (!(brushMask === null || brushMask === void 0 ? void 0 : brushMask.globalTransMatrix) || !((_a = brushMask === null || brushMask === void 0 ? void 0 : brushMask.attribute) === null || _a === void 0 ? void 0 : _a.points)) {
-                return false;
-            }
-            const points = (_c = (_b = brushMask === null || brushMask === void 0 ? void 0 : brushMask.attribute) === null || _b === void 0 ? void 0 : _b.points) !== null && _c !== void 0 ? _c : [];
-            const { a, b, c, d, e, f } = brushMask.globalTransMatrix;
-            const dx = (linkedOffset === null || linkedOffset === void 0 ? void 0 : linkedOffset.dx) || 0;
-            const dy = (linkedOffset === null || linkedOffset === void 0 ? void 0 : linkedOffset.dy) || 0;
-            const pointsCoord = points.map((p) => {
-                return {
-                    x: a * p.x + c * p.y + e + dx,
-                    y: b * p.x + d * p.y + f + dy
-                };
-            });
-            brushMask.globalAABBBounds
-                .clone()
-                .set(brushMask.globalAABBBounds.x1 + dx, brushMask.globalAABBBounds.y1 + dy, brushMask.globalAABBBounds.x2 + dx, brushMask.globalAABBBounds.y2 + dy);
-            const x = item.globalTransMatrix.e;
-            const y = item.globalTransMatrix.f;
+        _isBrushContainItem(brushMaskAABBBounds, brushMaskPointsCoord, item) {
             let itemBounds = [];
-            if (item.type === 'symbol') {
-                const { size: itemSize = 0 } = item === null || item === void 0 ? void 0 : item.attribute;
-                const size = array(itemSize)[0] / 2;
+            if (['symbol', 'rect'].includes(item.type)) {
+                const { x1, x2, y1, y2 } = item === null || item === void 0 ? void 0 : item.globalAABBBounds;
                 itemBounds = [
                     {
-                        x: x - size,
-                        y: y - size
+                        x: x1,
+                        y: y1
                     },
                     {
-                        x: x + size,
-                        y: y - size
+                        x: x2,
+                        y: y1
                     },
                     {
-                        x: x + size,
-                        y: y + size
+                        x: x2,
+                        y: y2
                     },
                     {
-                        x: x - size,
-                        y: y + size
+                        x: x1,
+                        y: y2
                     }
                 ];
-                return polygonIntersectPolygon(pointsCoord, itemBounds);
+                return polygonIntersectPolygon(brushMaskPointsCoord, itemBounds);
             }
-            else if (item.type === 'rect') {
-                const { x1, x2, y1, y2 } = item === null || item === void 0 ? void 0 : item.AABBBounds;
-                const width = Math.abs(x1 - x2);
-                const height = Math.abs(y1 - y2);
-                itemBounds = [
-                    {
-                        x: x,
-                        y: y
-                    },
-                    {
-                        x: x + width,
-                        y: y
-                    },
-                    {
-                        x: x + width,
-                        y: y + height
-                    },
-                    {
-                        x: x,
-                        y: y + height
+            return brushMaskAABBBounds.intersects(item.globalAABBBounds);
+        }
+        _initMarkBrushState(componentIndex, stateName) {
+            this._brushComponents.forEach((brush, index) => {
+                if (index !== componentIndex) {
+                    brush.children[0].removeAllChild();
+                }
+            });
+            this._inBrushElementsMap = {};
+            this._outOfBrushElementsMap = {};
+            this._linkedInBrushElementsMap = {};
+            this._linkedOutOfBrushElementsMap = {};
+            const { markTypeFilter = [] } = this._spec;
+            Object.entries(this._itemMap).forEach(([regionId, marks]) => {
+                marks.forEach((mark) => {
+                    if (markTypeFilter.includes(mark.type)) {
+                        return;
                     }
-                ];
-                return polygonIntersectPolygon(pointsCoord, itemBounds);
-            }
-            return brushMask.globalAABBBounds.intersects(item.globalAABBBounds);
+                    const grammarMark = mark.getProduct();
+                    if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
+                        return;
+                    }
+                    const elements = grammarMark.elements;
+                    elements.forEach((el) => {
+                        const elementKey = mark.id + '_' + el.key;
+                        el.removeState(IN_BRUSH_STATE);
+                        el.removeState(OUT_BRUSH_STATE);
+                        el.addState(stateName);
+                        this._outOfBrushElementsMap[elementKey] = el;
+                    });
+                });
+            });
+            Object.entries(this._linkedItemMap).forEach(([seriesId, marks]) => {
+                marks.forEach((mark) => {
+                    if (markTypeFilter.includes(mark.type)) {
+                        return;
+                    }
+                    const grammarMark = mark.getProduct();
+                    if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
+                        return;
+                    }
+                    const elements = grammarMark.elements;
+                    elements.forEach((el) => {
+                        const elementKey = mark.id + '_' + el.key;
+                        el.removeState(IN_BRUSH_STATE);
+                        el.removeState(OUT_BRUSH_STATE);
+                        el.addState(stateName);
+                        this._linkedOutOfBrushElementsMap[elementKey] = el;
+                    });
+                });
+            });
         }
         _stateClamp(state) {
             return Math.min(Math.max(0, state), 1);
@@ -100456,139 +100871,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
         }
-        _bindRegions() {
-            if (isValid$1(this._spec.regionId) && isValid$1(this._spec.regionIndex)) {
-                this._relativeRegions = this._option.getAllRegions();
-            }
-            this._relativeRegions = this._option.getRegionsInUserIdOrIndex(array(this._spec.regionId), array(this._spec.regionIndex));
-        }
-        _bindLinkedSeries() {
-            if (isValid$1(this._spec.brushLinkSeriesId) && isValid$1(this._spec.brushLinkSeriesIndex)) {
-                return;
-            }
-            this._linkedSeries = this._option.getSeriesInUserIdOrIndex(array(this._spec.brushLinkSeriesId), array(this._spec.brushLinkSeriesIndex));
-        }
-        _initRegionAxisMap() {
-            if (isValid$1(this._spec.axisId)) {
-                array(this._spec.axisId).forEach((axisId) => {
-                    this._releatedAxes.push(this._option.getComponentByUserId(axisId));
-                });
-            }
-            else if (isValid$1(this._spec.axisIndex)) {
-                array(this._spec.axisIndex).forEach((axisIndex) => {
-                    this._releatedAxes.push(this._option.getComponentByIndex('axes', axisIndex));
-                });
-            }
-            else {
-                this._releatedAxes = this._option.getComponentsByKey('axes');
-            }
-            this._releatedAxes.forEach((axis) => {
-                axis === null || axis === void 0 ? void 0 : axis.getRegions().forEach((region) => {
-                    if (this._regionAxisMap['region_' + region.id]) {
-                        this._regionAxisMap['region_' + region.id].push(axis);
-                    }
-                    else {
-                        this._regionAxisMap['region_' + region.id] = [axis];
-                    }
-                });
-            });
-        }
-        _initAxisDataZoomMap() {
-            this._option.getComponentsByKey('dataZoom').forEach((dz) => {
-                if (dz.relatedAxisComponent) {
-                    this._axisDataZoomMap[dz.relatedAxisComponent.id] = dz;
-                }
-            });
-        }
-        _initNeedOperatedItem() {
-            const seriesUserId = this._spec.seriesId;
-            const seriesIndex = this._spec.seriesIndex;
-            this._relativeRegions.forEach(r => {
-                const allMarks = [];
-                r.getSeries().forEach((s) => {
-                    if ((seriesUserId && array(seriesUserId).includes(s.userId.toString())) ||
-                        (seriesIndex && array(seriesIndex).includes(s.getSpecIndex())) ||
-                        (!seriesIndex && !seriesUserId)) {
-                        allMarks.push(...s.getMarksWithoutRoot());
-                    }
-                    this._itemMap[r.id] = allMarks;
-                });
-            });
-            this._linkedSeries.forEach(s => {
-                this._linkedItemMap[s.id] = s.getMarksWithoutRoot();
-            });
-        }
-        _initMarkBrushState(componentIndex, stateName) {
-            this._brushComponents.forEach((brush, index) => {
-                if (index !== componentIndex) {
-                    brush.children[0].removeAllChild();
-                }
-            });
-            this._inBrushElementsMap = {};
-            this._outOfBrushElementsMap = {};
-            this._linkedInBrushElementsMap = {};
-            this._linkedOutOfBrushElementsMap = {};
-            this._option.getAllSeries().forEach((s) => {
-                s.getMarksWithoutRoot().forEach((mark) => {
-                    const grammarMark = mark.getProduct();
-                    if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
-                        return;
-                    }
-                    const elements = grammarMark.elements;
-                    elements.forEach((el) => {
-                        const elementKey = mark.id + '_' + el.key;
-                        el.removeState(IN_BRUSH_STATE);
-                        el.removeState(OUT_BRUSH_STATE);
-                        el.addState(stateName);
-                        this._outOfBrushElementsMap[elementKey] = el;
-                        this._linkedOutOfBrushElementsMap[elementKey] = el;
-                    });
-                });
-            });
-        }
-        initEvent() {
-        }
-        onRender(ctx) {
-        }
-        changeRegions(regions) {
-        }
         _getNeedClearVRenderComponents() {
             return this._brushComponents;
         }
-        _compareSpec(spec, prevSpec) {
-            if (this._brushComponents) {
-                this._relativeRegions.forEach((region, index) => {
-                    this._updateBrushComponent(region, index);
-                });
-            }
-            const result = super._compareSpec(spec, prevSpec);
-            if (!isEqual(prevSpec, spec)) {
-                result.reRender = true;
-                result.reMake = true;
-            }
-            return result;
-        }
-        onLayoutEnd(ctx) {
-            var _a;
-            super.onLayoutEnd(ctx);
-            if (this._option.disableTriggerEvent) {
-                return;
-            }
-            const brushVisible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
-            if (brushVisible) {
-                if (!this._brushComponents) {
-                    this._brushComponents = [];
-                    this._relativeRegions.forEach((region, index) => {
-                        this._createBrushComponent(region, index);
-                    });
-                }
-                else {
-                    this._relativeRegions.forEach((region, index) => {
-                        this._updateBrushComponent(region, index);
-                    });
-                }
-            }
-        }
         clearGraphic() {
             if (this._brushComponents) {
                 this._brushComponents.forEach(brush => {
@@ -100599,7 +100884,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         clear() {
             if (this._brushComponents) {
                 const container = this.getContainer();
-                this._brushComponents.forEach(brush => {
+                this._brushComponents.forEach((brush, index) => {
+                    this._initMarkBrushState(index, '');
+                    this._needDisablePickable = false;
                     brush.removeAllChild();
                     brush.releaseBrushEvents();
                     if (container) {
@@ -102593,16 +102880,29 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _updateDomStyle(sizeKey = 'width') {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const rootDom = this._rootDom;
             const contentDom = [...rootDom.children].find(child => child.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME));
+            const titleDom = [...rootDom.children].find(child => child.className.includes(TOOLTIP_TITLE_CLASS_NAME));
             if (contentDom) {
                 const tooltipSpec = this._component.getSpec();
                 const contentStyle = {};
-                if (isValid$1((_a = tooltipSpec === null || tooltipSpec === void 0 ? void 0 : tooltipSpec.style) === null || _a === void 0 ? void 0 : _a.maxContentHeight)) {
-                    const titleDom = rootDom.children[0];
+                const titleLabel = (_a = tooltipSpec.style) === null || _a === void 0 ? void 0 : _a.titleLabel;
+                const autoFixTitleWidth = titleLabel && titleLabel.autoWidth && titleLabel.multiLine !== false;
+                if (autoFixTitleWidth && titleDom) {
+                    const maxWidth = [...contentDom.children].reduce((res, col) => {
+                        return sizeKey === 'height'
+                            ? res + col.getBoundingClientRect().width
+                            : Math.max(res, col.getBoundingClientRect().width);
+                    }, 0);
+                    if (maxWidth > 0) {
+                        titleDom.style.maxWidth = `${maxWidth}px`;
+                        titleDom.style.maxWidth = `${Math.ceil(contentDom.getBoundingClientRect().width)}px`;
+                    }
+                }
+                if (isValid$1((_b = tooltipSpec === null || tooltipSpec === void 0 ? void 0 : tooltipSpec.style) === null || _b === void 0 ? void 0 : _b.maxContentHeight)) {
                     const titleHeight = titleDom && titleDom.className.includes(TOOLTIP_TITLE_CLASS_NAME)
-                        ? titleDom.getBoundingClientRect().height + ((_b = tooltipSpec.style.spaceRow) !== null && _b !== void 0 ? _b : 0)
+                        ? titleDom.getBoundingClientRect().height + ((_c = tooltipSpec.style.spaceRow) !== null && _c !== void 0 ? _c : 0)
                         : 0;
                     const viewRect = this._chartOption.getChartViewRect();
                     const maxHeight = calcLayoutNumber(tooltipSpec.style.maxContentHeight, Math.min(viewRect.height, document.body.clientHeight) -
@@ -102620,7 +102920,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (rows) {
                     for (let i = 0; i < rows.length; i++) {
                         const row = rows[i];
-                        const cols = (_c = row.children) !== null && _c !== void 0 ? _c : [];
+                        const cols = (_d = row.children) !== null && _d !== void 0 ? _d : [];
                         for (let j = 0; j < cols.length; j++) {
                             const width = cols[j].getBoundingClientRect()[sizeKey];
                             if (widthByCol[j] === undefined || widthByCol[j] < width) {
@@ -102630,7 +102930,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                     for (let i = 0; i < rows.length; i++) {
                         const row = rows[i];
-                        const cols = (_d = row.children) !== null && _d !== void 0 ? _d : [];
+                        const cols = (_e = row.children) !== null && _e !== void 0 ? _e : [];
                         for (let j = 0; j < cols.length; j++) {
                             cols[j].style[sizeKey] = `${widthByCol[j]}px`;
                         }
@@ -103816,6 +104116,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.CanvasTooltipHandler = CanvasTooltipHandler;
     exports.CartesianAxis = CartesianAxis;
     exports.CartesianBandAxis = CartesianBandAxis;
+    exports.CartesianChartSpecTransformer = CartesianChartSpecTransformer;
     exports.CartesianCrossHair = CartesianCrossHair;
     exports.CartesianLinearAxis = CartesianLinearAxis;
     exports.CartesianLogAxis = CartesianLogAxis;