@visactor/vrender-components 0.22.7-alpha.8 → 0.22.7

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, cos, sin, isString, pointAt, isNumber, getDecimalPlaces, isNil, Color, sqrt, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, cloneDeep, get, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, cos, sin, isString, pointAt, isNumber, getDecimalPlaces, isNil, Color, sqrt, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, aabbSeparation, obbSeparation, cloneDeep, get, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -2287,7 +2287,8 @@ const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
   filter: "",
   cursor: null,
   html: null,
-  react: null
+  react: null,
+  vue: null
 }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
 const DefaultConnectAttribute = {
   connectedType: "none",
@@ -2395,6 +2396,12 @@ const DefaultPolygonAttribute = Object.assign(Object.assign({}, DefaultAttribute
   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,
@@ -2720,6 +2727,7 @@ function getScaledStroke(context, width, dpr) {
 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;
   if (!c || !0 === c) return "black";
   let result, color;
   if (isArray(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
@@ -2733,9 +2741,10 @@ function createColor(context, c, params) {
     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 = 0, y = 0, w = null !== (_a = params.widthWithoutTransform) && void 0 !== _a ? _a : w, h = null !== (_b = params.heightWithoutTransform) && void 0 !== _b ? _b : 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));
   }
@@ -2835,6 +2844,7 @@ function applyStrokeStyle(ctx, character) {
   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,
@@ -2868,6 +2878,13 @@ function testLetter2(string, index) {
 }
 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,
@@ -2877,7 +2894,9 @@ function measureTextCanvas(text, character) {
     },
     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$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -3665,6 +3684,7 @@ const defaultThemeObj = {
     text: DefaultTextAttribute,
     rect: DefaultRectAttribute,
     polygon: DefaultPolygonAttribute,
+    star: DefaultStarAttribute,
     richtext: DefaultRichTextAttribute,
     richtextIcon: DefaultRichTextIconAttribute,
     image: DefaultImageAttribute,
@@ -3683,6 +3703,7 @@ function newThemeObj() {
     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),
@@ -4162,7 +4183,7 @@ class FederatedEvent {
   }
   _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);
@@ -5928,6 +5949,7 @@ genNumberType();
 const RECT_NUMBER_TYPE = genNumberType();
 genNumberType();
 const RICHTEXT_NUMBER_TYPE = genNumberType();
+genNumberType();
 const SYMBOL_NUMBER_TYPE = genNumberType();
 const TEXT_NUMBER_TYPE = genNumberType();
 const GraphicService = Symbol.for("GraphicService");
@@ -6182,6 +6204,9 @@ class Graphic extends Node {
       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;
@@ -6470,16 +6495,17 @@ class Graphic extends Node {
         const {
           scaleX: scaleX,
           scaleY: scaleY,
-          angle: angle
+          angle: angle,
+          scaleCenter: scaleCenter
         } = this.attribute;
         return tempBounds.copy(this._AABBBounds), this.setAttributes({
-          scaleX: 1,
-          scaleY: 1,
-          angle: 0
+          angle: 0,
+          scaleCenter: null
         }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
           scaleX: scaleX,
           scaleY: scaleY,
-          angle: angle
+          angle: angle,
+          scaleCenter: scaleCenter
         }), params.b;
       };
     if ("string" == typeof anchor[0]) {
@@ -6507,7 +6533,7 @@ class Graphic extends Node {
     } = 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, {
         x: _anchor[0],
@@ -7694,7 +7720,7 @@ class Circle extends Graphic {
       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 {
@@ -7944,7 +7970,7 @@ class Text extends Graphic {
       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]);
@@ -8469,7 +8495,7 @@ let Symbol$1 = class Symbol extends Graphic {
       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;
     const {
       lineJoin = symbolTheme.lineJoin
     } = attribute;
@@ -8541,7 +8567,7 @@ let Line$1 = class Line extends Graphic {
     return getTheme(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;
@@ -8638,7 +8664,7 @@ class Rect extends Graphic {
       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);
@@ -8830,6 +8856,7 @@ function getFixedLRTB(left, right, top, bottom) {
 }
 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;
@@ -8842,7 +8869,7 @@ class Paragraph {
     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 {
@@ -8861,11 +8888,11 @@ class Paragraph {
       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;
         }
       }
     }
@@ -8876,20 +8903,21 @@ class Paragraph {
     });
   }
   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;
         }
       }
     }
@@ -8904,7 +8932,7 @@ class Paragraph {
     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));
@@ -9033,7 +9061,7 @@ class Image extends Graphic {
       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];
@@ -9376,7 +9404,7 @@ class RichText extends Graphic {
       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 {
@@ -9391,7 +9419,7 @@ class RichText extends Graphic {
     }
     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;
@@ -9412,7 +9440,7 @@ class RichText extends Graphic {
       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);
@@ -9630,7 +9658,7 @@ class Path extends Graphic {
       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;
@@ -9687,7 +9715,7 @@ class Area extends Graphic {
     return getTheme(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;
@@ -9892,7 +9920,7 @@ class Arc extends Graphic {
       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;
@@ -9995,7 +10023,7 @@ class Polygon extends Graphic {
     return getTheme(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;
@@ -14909,6 +14937,13 @@ const SCROLLBAR_START_EVENT = 'scrollDown';
 const SCROLLBAR_EVENT = 'scrollDrag';
 const SCROLLBAR_END_EVENT = 'scrollUp';
 
+function getEndTriggersOfDrag() {
+    if (vglobal.env === 'browser') {
+        return ['pointerup', 'pointerleave', 'pointercancel'];
+    }
+    return ['pointerup', 'pointerleave', 'pointerupoutside'];
+}
+
 const delayMap$2 = {
     debounce: debounce,
     throttle: throttle
@@ -14942,6 +14977,7 @@ class ScrollBar extends AbstractComponent {
             }
         };
         this._onSliderPointerDown = (e) => {
+            this._clearDragEvents();
             const { stopSliderDownPropagation = true } = this.attribute;
             if (stopSliderDownPropagation) {
                 e.stopPropagation();
@@ -14953,15 +14989,12 @@ class ScrollBar extends AbstractComponent {
                 pos: this._prePos,
                 event: e
             });
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                vglobal.addEventListener('pointerup', this._onSliderPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                this.stage.addEventListener('pointerup', this._onSliderPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onSliderPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: true });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onSliderPointerUp);
+            });
         };
         this._computeScrollValue = (e) => {
             const { direction } = this.attribute;
@@ -14983,6 +15016,7 @@ class ScrollBar extends AbstractComponent {
             return [currentPos, currentScrollValue];
         };
         this._onSliderPointerMove = (e) => {
+            e.preventDefault();
             const { stopSliderMovePropagation = true } = this.attribute;
             if (stopSliderMovePropagation) {
                 e.stopPropagation();
@@ -14996,7 +15030,6 @@ class ScrollBar extends AbstractComponent {
             ? this._onSliderPointerMove
             : delayMap$2[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime);
         this._onSliderPointerUp = (e) => {
-            e.preventDefault();
             const { range: preRange, limitRange = [0, 1] } = this.attribute;
             const preScrollRange = this.getScrollRange();
             const [currentPos, currentScrollValue] = this._computeScrollValue(e);
@@ -15005,15 +15038,7 @@ class ScrollBar extends AbstractComponent {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
             });
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                this.stage.removeEventListener('pointerup', this._onSliderPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onSliderPointerUp);
-            }
+            this._clearDragEvents();
         };
     }
     setScrollRange(range, render = true) {
@@ -15146,6 +15171,14 @@ class ScrollBar extends AbstractComponent {
             ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
             : clampRange([y1 + min * height, y1 + max * height], y1, height - sliderSize);
     }
+    _clearDragEvents() {
+        const triggers = getEndTriggersOfDrag();
+        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+        obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onSliderPointerUp);
+        });
+    }
     _reset() {
         this._sliderRenderBounds = null;
         this._sliderLimitRange = null;
@@ -16227,7 +16260,7 @@ class PopTip extends AbstractComponent {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const { titleStyle = {}, position, contentStyle = {}, panel, logoSymbol, logoText, logoTextStyle = {}, triangleMode = 'default', space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, maxWidthPercent, visible, state, dx = 0, dy = 0 } = this.attribute;
+        const { titleStyle = {}, position, contentStyle = {}, panel, logoSymbol, poptipAnchor = 'position', logoText, logoTextStyle = {}, triangleMode = 'default', space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, maxWidthPercent, visible, state, dx = 0, dy = 0, positionBounds } = this.attribute;
         let { title = '', content = '' } = this.attribute;
         title = this.attribute.titleFormatMethod ? this.attribute.titleFormatMethod(title) : title;
         content = this.attribute.contentFormatMethod ? this.attribute.contentFormatMethod(content) : content;
@@ -16309,11 +16342,12 @@ class PopTip extends AbstractComponent {
                 poptipHeight += contentShape.AABBBounds.height();
             }
         }
-        const layout = position === 'auto';
+        const layout = position === 'auto' || isArray(position);
+        const positionList = isArray(position) ? position : this.positionList;
         let maxBBoxI;
         let maxBBoxSize = -Infinity;
-        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';
             let offsetX = (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
             let offsetY = 0;
@@ -16322,16 +16356,21 @@ class PopTip extends AbstractComponent {
             }
             else if (triangleMode === 'concise') {
                 symbolType = conciseSymbolMap[p];
-                offsetX = ['tl', 'bl', 'rt', 'rb'].includes(position)
+                offsetX = ['tl', 'bl', 'rt', 'rb'].includes(p)
                     ? (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2
                     : -(isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2;
-                offsetY = ['tl', 'tr', 'lb', 'rb'].includes(position)
+                offsetY = ['tl', 'tr', 'lb', 'rb'].includes(p)
                     ? -(isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2
                     : (isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2;
             }
             const { angle, offset } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth], symbolType);
+            let anchorPoint = { x: 0, y: 0 };
+            if (poptipAnchor === 'bounds' && positionBounds) {
+                anchorPoint = this.calculateAnchorPoint(p, positionBounds);
+            }
+            let bgSymbol;
             if (isBoolean(bgVisible)) {
-                const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: offsetX, y: offsetY, strokeBoundsBuffer: -1, boundsPadding: -2, anchor: [0, 0], symbolType, angle: angle, dx: offset[0], dy: offset[1] - ((_j = backgroundStyle.space) !== null && _j !== void 0 ? _j : 0), size: symbolSize, zIndex: 9 }), 'symbol');
+                bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: offsetX, y: offsetY, strokeBoundsBuffer: -1, boundsPadding: -2, anchor: [0, 0], symbolType, angle: angle, dx: offset[0], dy: offset[1] - ((_j = backgroundStyle.space) !== null && _j !== void 0 ? _j : 0), size: symbolSize, zIndex: 9 }), 'symbol');
                 if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
                     bgSymbol.states = state.panel;
                 }
@@ -16347,8 +16386,8 @@ class PopTip extends AbstractComponent {
                 }
             }
             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]
             });
             if (logoSymbol) {
@@ -16370,20 +16409,61 @@ class PopTip extends AbstractComponent {
                     group.createOrUpdateChild('poptip-logo-text', Object.assign(Object.assign({}, logoTextStyle), { x: 0, y: poptipHeight / 2, visible: bgVisible && (contentVisible || titleVisible), text: logoText, textAlign: 'center', textBaseline: 'middle', zIndex: 10 }), 'text');
                 }
             }
-            if (layout && range) {
+            if (range) {
                 _tBounds.setValue(0, 0, popTipWidth, poptipHeight).transformWithMatrix(group.globalTransMatrix);
                 const b = _tBounds;
                 const stageBounds = new Bounds().setValue(0, 0, range[0], range[1]);
-                if (rectInsideAnotherRect(b, stageBounds, false)) {
-                    break;
+                if (layout) {
+                    if (rectInsideAnotherRect(b, stageBounds, false)) {
+                        break;
+                    }
+                    else {
+                        const bbox = getRectIntersect(b, stageBounds, false);
+                        const size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
+                        if (size > maxBBoxSize) {
+                            maxBBoxSize = size;
+                            maxBBoxI = i;
+                        }
+                    }
                 }
-                else {
-                    const bbox = getRectIntersect(b, stageBounds, false);
-                    const size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
-                    if (size > maxBBoxSize) {
-                        maxBBoxSize = size;
-                        maxBBoxI = i;
+                if (['top', 'bottom', 'left', 'right'].includes(p)) {
+                    const isVerticalPosition = p === 'top' || p === 'bottom';
+                    const isHorizontalPosition = p === 'left' || p === 'right';
+                    let mainDirectionOverlap = false;
+                    if (isVerticalPosition) {
+                        mainDirectionOverlap = (p === 'top' && b.y1 < 0) || (p === 'bottom' && b.y2 > stageBounds.y2);
                     }
+                    else if (isHorizontalPosition) {
+                        mainDirectionOverlap = (p === 'left' && b.x1 < 0) || (p === 'right' && b.x2 > stageBounds.x2);
+                    }
+                    if (!mainDirectionOverlap) {
+                        let secondaryOffset = 0;
+                        const szNumber = (isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2;
+                        if (isVerticalPosition) {
+                            if (b.x1 < 0) {
+                                secondaryOffset = -b.x1;
+                            }
+                            else if (b.x2 > stageBounds.x2) {
+                                secondaryOffset = stageBounds.x2 - b.x2;
+                            }
+                            group.setAttribute('x', group.attribute.x + secondaryOffset);
+                            bgSymbol.setAttribute('dx', min(max(bgSymbol.attribute.dx - secondaryOffset, szNumber), b.width() - szNumber));
+                        }
+                        else if (isHorizontalPosition) {
+                            if (b.y1 < 0) {
+                                secondaryOffset = -b.y1;
+                            }
+                            else if (b.y2 > stageBounds.y2) {
+                                secondaryOffset = stageBounds.y2 - b.y2;
+                            }
+                            group.setAttribute('y', group.attribute.y + secondaryOffset);
+                            bgSymbol.setAttribute('dy', min(max(bgSymbol.attribute.dy - secondaryOffset, szNumber), b.height() - szNumber));
+                        }
+                        break;
+                    }
+                }
+                if (!layout) {
+                    break;
                 }
             }
             else {
@@ -16391,6 +16471,35 @@ class PopTip extends AbstractComponent {
             }
         }
     }
+    calculateAnchorPoint(position, positionBounds) {
+        if (!positionBounds) {
+            return { x: 0, y: 0 };
+        }
+        const { x, y } = this.attribute;
+        const { x1, y1, x2, y2 } = positionBounds;
+        const width = x2 - x1;
+        const 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 = symbolType === 'arrow2Left' ? size[1] / 2 : size[1];
         switch (position) {
@@ -16522,7 +16631,7 @@ let PopTipRenderContribution = class PopTipRenderContribution {
                 poptip.content = (_a = poptip.content) !== null && _a !== void 0 ? _a : graphic.attribute.text;
             }
             const matrix = graphic.globalTransMatrix;
-            this.poptipComponent.setAttributes(Object.assign(Object.assign({ visibleAll: true, pickable: false, childrenPickable: false }, poptip), { x: matrix.e, y: matrix.f }));
+            this.poptipComponent.setAttributes(Object.assign(Object.assign({ visibleAll: true, pickable: false, childrenPickable: false, poptipAnchor: 'bounds' }, poptip), { x: matrix.e, y: matrix.f, positionBounds: graphic.globalAABBBounds }));
             drawContext.stage.tryInitInteractiveLayer();
             const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
             if (interactiveLayer) {
@@ -17397,24 +17506,17 @@ function getPolygonPath(points, closed) {
 }
 function textIntersect(textA, textB, sep) {
     var _a;
-    let a;
-    let b;
     const angle = (_a = textA.attribute) === null || _a === void 0 ? void 0 : _a.angle;
     const isHorizontal = isAngleHorizontal(angle, Number.EPSILON);
-    const isAABBIntersects = (textA, textB, sep) => {
-        a = textA.AABBBounds;
-        b = textB.AABBBounds;
-        return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
-    };
     if (isHorizontal) {
-        return isAABBIntersects(textA, textB, sep);
+        return sep > aabbSeparation(textA.AABBBounds, textB.AABBBounds);
     }
-    a = textA.OBBBounds;
-    b = textB.OBBBounds;
+    const a = textA.OBBBounds;
+    const b = textB.OBBBounds;
     if (!a || !b || a.empty() || b.empty()) {
-        return isAABBIntersects(textA, textB, sep);
+        return sep > aabbSeparation(textA.AABBBounds, textB.AABBBounds);
     }
-    return a.intersects(b);
+    return a.intersects(b) || sep > obbSeparation(a, b);
 }
 function hasOverlap(items, pad) {
     for (let i = 1, n = items.length, a = items[0], b; i < n; a = b, ++i) {
@@ -23010,8 +23112,13 @@ class DataZoom extends AbstractComponent {
             end: 1
         };
         this._statePointToData = state => state;
+        this._handleTouchMove = (e) => {
+            if (this._activeState) {
+                e.preventDefault();
+            }
+        };
         this._onHandlerPointerDown = (e, tag) => {
-            e.stopPropagation();
+            this._clearDragEvents();
             if (tag === 'start') {
                 this._activeTag = DataZoomActiveTag.startHandler;
                 this._activeItem = this._startHandlerMask;
@@ -23035,14 +23142,15 @@ class DataZoom extends AbstractComponent {
             this._activeState = true;
             this._activeCache.startPos = this.eventPosToStagePos(e);
             this._activeCache.lastPos = this.eventPosToStagePos(e);
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            this.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+            const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+            const triggers = getEndTriggersOfDrag();
+            evtTarget.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._pointerMove = (e) => {
-            e.stopPropagation();
+            e.preventDefault();
             const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             const { attPos, max } = this._layoutCache;
@@ -23072,12 +23180,12 @@ class DataZoom extends AbstractComponent {
                         end = end + dis;
                     }
                 }
-                this._activeCache.lastPos = pos;
                 brushSelect && this.renderDragMask();
             }
             start = Math.min(Math.max(start, 0), 1);
             end = Math.min(Math.max(end, 0), 1);
             if (startAttr !== start || endAttr !== end) {
+                this._activeCache.lastPos = pos;
                 this.setStateAttr(start, end, true);
                 if (realTime) {
                     this._dispatchEvent('change', {
@@ -23092,7 +23200,6 @@ class DataZoom extends AbstractComponent {
             ? this._pointerMove
             : delayMap$1[this.attribute.delayType](this._pointerMove, this.attribute.delayTime);
         this._onHandlerPointerUp = (e) => {
-            e.preventDefault();
             const { start, end, brushSelect, realTime = true } = this.attribute;
             if (this._activeState) {
                 if (this._activeTag === DataZoomActiveTag.background) {
@@ -23107,12 +23214,7 @@ class DataZoom extends AbstractComponent {
                 end: this.state.end,
                 tag: this._activeTag
             });
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            this.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-            this.removeEventListener('pointerup', this._onHandlerPointerUp);
+            this._clearDragEvents();
         };
         const { position, showDetail } = attributes;
         this._activeCache.startPos = position;
@@ -23160,12 +23262,13 @@ class DataZoom extends AbstractComponent {
         if (this._selectedPreviewGroup) {
             this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
         }
-        this.addEventListener('pointerup', this._onHandlerPointerUp);
-        this.addEventListener('pointerupoutside', this._onHandlerPointerUp);
         if (showDetail === 'auto') {
             this.addEventListener('pointerenter', this._onHandlerPointerEnter);
             this.addEventListener('pointerleave', this._onHandlerPointerLeave);
         }
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
     }
     dragMaskSize() {
         const { position } = this.attribute;
@@ -23193,13 +23296,19 @@ class DataZoom extends AbstractComponent {
         var _a, _b;
         return (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventPointTransform(e)) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
     }
+    _clearDragEvents() {
+        const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+        const triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+    }
     _onHandlerPointerEnter(e) {
-        e.stopPropagation();
         this._showText = true;
         this.renderText();
     }
     _onHandlerPointerLeave(e) {
-        e.stopPropagation();
         this._showText = false;
         this.renderText();
     }
@@ -23709,6 +23818,13 @@ class DataZoom extends AbstractComponent {
     setStatePointToData(callback) {
         isFunction(callback) && (this._statePointToData = callback);
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearDragEvents();
+    }
 }
 DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
 
@@ -23998,21 +24114,30 @@ function commonLineClipIn(line, label, duration, delay, easing) {
             .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);
+    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);
+    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);
+    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);
+    array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+    });
 }
 function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
     var _a;
@@ -24028,15 +24153,21 @@ function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
 
 function commonLineFadeOut(line, label, duration, delay, easing) {
     segmentFadeOut(line, delay, duration, easing);
-    tagFadeOut(label, 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);
+    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);
+    array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+    });
 }
 function pointFadeOut(itemLine, decorativeLine, item, duration, delay, easing) {
     var _a;
@@ -24190,6 +24321,48 @@ const DefaultExitMarkerAnimation = {
     delay: 0
 };
 
+class MarkLabelMixin {
+    getLabel() {
+        return this._label;
+    }
+    _addMarkLabels(container, labelName, defaultLabelAttrs) {
+        const { label, state } = this.attribute;
+        const labelStates = array(state === null || state === void 0 ? void 0 : state.label);
+        const labelBackgroundStates = array(state === null || state === void 0 ? void 0 : state.labelBackground);
+        const labelShapes = array(label).map((labelAttrs, index) => {
+            var _a, _b;
+            const finalLabelAttrs = merge({}, defaultLabelAttrs, labelAttrs);
+            const markLabel = new Tag(Object.assign(Object.assign({}, finalLabelAttrs), { state: {
+                    panel: merge({}, DEFAULT_STATES$2, (_a = labelBackgroundStates[index]) !== null && _a !== void 0 ? _a : last(labelBackgroundStates)),
+                    text: merge({}, DEFAULT_STATES$2, (_b = labelStates[index]) !== null && _b !== void 0 ? _b : last(labelStates))
+                } }));
+            markLabel.name = labelName;
+            container.add(markLabel);
+            this.setLabelPos(markLabel, finalLabelAttrs);
+            return markLabel;
+        });
+        this._label = array(labelShapes).length === 1 ? labelShapes[0] : labelShapes;
+    }
+    _updateMarkLabels(defaultLabelAttrs) {
+        const { label, state } = this.attribute;
+        const labelShapes = array(this._label);
+        const labelStates = array(state === null || state === void 0 ? void 0 : state.label);
+        const labelBackgroundStates = array(state === null || state === void 0 ? void 0 : state.labelBackground);
+        if (labelShapes.length) {
+            const labels = array(label);
+            labelShapes.forEach((labelItem, index) => {
+                var _a, _b;
+                const finalLabelAttrs = merge({}, defaultLabelAttrs, labels[index]);
+                labelItem.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, finalLabelAttrs), { state: {
+                        panel: merge({}, DEFAULT_STATES$2, (_a = labelBackgroundStates[index]) !== null && _a !== void 0 ? _a : last(labelBackgroundStates)),
+                        text: merge({}, DEFAULT_STATES$2, (_b = labelStates[index]) !== null && _b !== void 0 ? _b : last(labelStates))
+                    } }));
+                this.setLabelPos(labelItem, finalLabelAttrs);
+            });
+        }
+    }
+}
+
 class MarkCommonLine extends Marker {
     constructor() {
         super(...arguments);
@@ -24200,20 +24373,17 @@ class MarkCommonLine extends Marker {
     getLine() {
         return this._line;
     }
-    getLabel() {
-        return this._label;
-    }
-    setLabelPos() {
-        const { label = {}, limitRect } = this.attribute;
-        const { position, confine, autoRotate } = label;
-        const labelPoint = this.getPointAttrByPosition(position);
+    setLabelPos(labelNode, labelAttrs) {
+        const { limitRect } = this.attribute;
+        const { position, confine, autoRotate } = labelAttrs;
+        const labelPoint = this.getPointAttrByPosition(position, labelAttrs);
         const labelAngle = position.toString().toLocaleLowerCase().includes('start')
             ? this._line.getStartAngle() || 0
             : this._line.getEndAngle() || 0;
-        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) }));
+        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) }));
         if (limitRect && confine) {
             const { x, y, width, height } = limitRect;
-            limitShapeInBounds(this._label, {
+            limitShapeInBounds(labelNode, {
                 x1: x,
                 y1: y,
                 x2: x + width,
@@ -24222,32 +24392,18 @@ class MarkCommonLine extends Marker {
         }
     }
     initMarker(container) {
-        const { label, state } = this.attribute;
         const 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({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-            } }));
-        markLabel.name = 'mark-common-line-label';
-        this._label = markLabel;
-        container.add(markLabel);
-        this.setLabelPos();
+        this.addMarkLineLabels(container);
     }
     updateMarker() {
-        const { label, state } = this.attribute;
         this.setLineAttributes();
-        if (this._label) {
-            this._label.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, label), { state: {
-                    panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-                } }));
-            this.setLabelPos();
-        }
+        this.updateMarkLineLabels();
     }
 }
+mixin(MarkCommonLine, MarkLabelMixin);
 
 const FUZZY_EQUAL_DELTA = 0.001;
 const DEFAULT_MARK_LINE_THEME = {
@@ -24436,6 +24592,7 @@ const DEFAULT_MARK_ARC_LINE_THEME = {
         lineWidth: 0
     },
     label: {
+        autoRotate: true,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         refX: 0,
         refY: 0,
@@ -24490,6 +24647,7 @@ const DEFAULT_MARK_AREA_THEME = {
 const DEFAULT_MARK_ARC_AREA_THEME = {
     interactive: true,
     label: {
+        autoRotate: true,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         textStyle: {
             fill: '#fff',
@@ -24748,10 +24906,9 @@ class MarkLine extends MarkCommonLine {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkLine.defaultAttributes, attributes));
         this.name = 'markLine';
     }
-    getPointAttrByPosition(position) {
+    getPointAttrByPosition(position, labelAttrs) {
         var _a;
-        const { label = {} } = this.attribute;
-        const { refX = 0, refY = 0 } = label;
+        const { refX = 0, refY = 0 } = labelAttrs;
         const points = this._line.getMainSegmentPoints();
         const lineEndAngle = (_a = this._line.getEndAngle()) !== null && _a !== void 0 ? _a : 0;
         const labelAngle = isPostiveXAxis(lineEndAngle) ? lineEndAngle : lineEndAngle;
@@ -24783,10 +24940,10 @@ class MarkLine extends MarkCommonLine {
             angle: labelAngle
         };
     }
-    getRotateByAngle(angle) {
+    getRotateByAngle(angle, labelAttrs) {
         var _a;
         const itemAngle = isPostiveXAxis(angle) ? angle : angle - Math.PI;
-        return itemAngle + ((_a = this.attribute.label.refAngle) !== null && _a !== void 0 ? _a : 0);
+        return itemAngle + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0);
     }
     getTextStyle(position, labelAngle, autoRotate) {
         if (fuzzyEqualNumber(Math.abs(labelAngle), Math.PI / 2, FUZZY_EQUAL_DELTA) ||
@@ -24857,6 +25014,12 @@ class MarkLine extends MarkCommonLine {
         });
         return 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;
 
@@ -24873,9 +25036,6 @@ class MarkArea extends Marker {
     getArea() {
         return this._area;
     }
-    getLabel() {
-        return this._label;
-    }
     constructor(attributes, options) {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArea.defaultAttributes, attributes));
         this.name = 'markArea';
@@ -24902,16 +25062,15 @@ class MarkArea extends Marker {
         }
         return result;
     }
-    setLabelPos() {
+    setLabelPos(labelNode, labelAttrs) {
         var _a;
-        if (this._label && this._area) {
-            const { label = {} } = this.attribute;
-            const labelPosition = (_a = label.position) !== null && _a !== void 0 ? _a : 'middle';
+        if (this._area) {
+            const labelPosition = (_a = labelAttrs.position) !== null && _a !== void 0 ? _a : 'middle';
             const labelPoint = this.getPointAttrByPosition(labelPosition);
-            this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle) }));
-            if (this.attribute.limitRect && label.confine) {
+            labelNode.setAttributes(Object.assign(Object.assign({}, labelPoint), { textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle) }));
+            if (this.attribute.limitRect && labelAttrs.confine) {
                 const { x, y, width, height } = this.attribute.limitRect;
-                limitShapeInBounds(this._label, {
+                limitShapeInBounds(labelNode, {
                     x1: x,
                     y1: y,
                     x2: x + width,
@@ -24921,34 +25080,21 @@ class MarkArea extends Marker {
         }
     }
     initMarker(container) {
-        const { points, label, areaStyle, state } = this.attribute;
+        const { points, areaStyle, state } = this.attribute;
         const area = graphicCreator.polygon(Object.assign({ points: points }, areaStyle));
         area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? 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({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-            } }));
-        markLabel.name = 'mark-area-label';
-        this._label = markLabel;
-        container.add(markLabel);
-        this.setLabelPos();
+        this._addMarkLabels(container, 'mark-area-label', MarkArea.defaultAttributes.label);
     }
     updateMarker() {
-        const { points, label, areaStyle, state } = this.attribute;
+        const { points, areaStyle, state } = this.attribute;
         if (this._area) {
             this._area.setAttributes(Object.assign({ points: points }, areaStyle));
             this._area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.area);
         }
-        if (this._label) {
-            this._label.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, label), { state: {
-                    panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-                } }));
-        }
-        this.setLabelPos();
+        this._updateMarkLabels(MarkArea.defaultAttributes.label);
     }
     isValidPoints() {
         const { points } = this.attribute;
@@ -24966,6 +25112,7 @@ class MarkArea extends Marker {
     }
 }
 MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME;
+mixin(MarkArea, MarkLabelMixin);
 
 loadMarkArcLineComponent();
 function registerMarkArcLineAnimate() {
@@ -24978,14 +25125,12 @@ class MarkArcLine extends MarkCommonLine {
         }
     }
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault)
-            ? attributes
-            : merge({}, MarkArcLine.defaultAttributes, attributes, { label: { autoRotate: true } }));
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArcLine.defaultAttributes, attributes));
         this.name = 'markArcLine';
     }
-    getPointAttrByPosition(direction) {
-        const { center, radius, startAngle, endAngle, label } = this.attribute;
-        const { refX = 0, refY = 0 } = label;
+    getPointAttrByPosition(direction, labelAttrs) {
+        const { center, radius, startAngle, endAngle } = this.attribute;
+        const { refX = 0, refY = 0 } = labelAttrs;
         let angle;
         switch (direction) {
             case IMarkCommonArcLabelPosition.arcInnerStart:
@@ -25017,9 +25162,9 @@ class MarkArcLine extends MarkCommonLine {
     getTextStyle(position) {
         return DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[position];
     }
-    getRotateByAngle(angle) {
+    getRotateByAngle(angle, labelAttrs) {
         var _a;
-        return angle - Math.PI / 2 + ((_a = this.attribute.label.refAngle) !== null && _a !== void 0 ? _a : 0);
+        return angle - Math.PI / 2 + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0);
     }
     createSegment() {
         const { center, radius, startAngle, endAngle, startSymbol, endSymbol, lineStyle, state } = this
@@ -25062,6 +25207,12 @@ class MarkArcLine extends MarkCommonLine {
     isValidPoints() {
         return true;
     }
+    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;
 
@@ -25078,20 +25229,15 @@ class MarkArcArea extends Marker {
     getArea() {
         return this._area;
     }
-    getLabel() {
-        return this._label;
-    }
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault)
-            ? attributes
-            : merge({}, MarkArcArea.defaultAttributes, attributes, { label: { autoRotate: true } }));
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArcArea.defaultAttributes, attributes));
         this.name = 'markArcArea';
         this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation;
         this.defaultExitAnimation = DefaultExitMarkerAnimation;
     }
-    getPointAttrByPosition(position) {
-        const { center, innerRadius, outerRadius, startAngle, endAngle, label } = this.attribute;
-        const { refX = 0, refY = 0 } = label;
+    getPointAttrByPosition(position, labelAttrs) {
+        const { center, innerRadius, outerRadius, startAngle, endAngle } = this.attribute;
+        const { refX = 0, refY = 0 } = labelAttrs;
         let radius;
         let angle;
         switch (position) {
@@ -25135,16 +25281,15 @@ class MarkArcArea extends Marker {
             angle
         };
     }
-    setLabelPos() {
+    setLabelPos(labelNode, labelAttrs) {
         var _a;
-        if (this._label && this._area) {
-            const { label = {} } = this.attribute;
-            const { position: labelPosition = 'arcInnerMiddle', autoRotate } = label;
-            const labelAttr = this.getPointAttrByPosition(labelPosition);
-            this._label.setAttributes(Object.assign(Object.assign({}, labelAttr.position), { angle: autoRotate ? labelAttr.angle - Math.PI / 2 + ((_a = label.refAngle) !== null && _a !== void 0 ? _a : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), label.textStyle) }));
-            if (this.attribute.limitRect && label.confine) {
+        if (this._area) {
+            const { position: labelPosition = 'arcInnerMiddle', autoRotate } = labelAttrs;
+            const labelAttr = this.getPointAttrByPosition(labelPosition, labelAttrs);
+            labelNode.setAttributes(Object.assign(Object.assign({}, labelAttr.position), { angle: autoRotate ? labelAttr.angle - Math.PI / 2 + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle) }));
+            if (this.attribute.limitRect && labelAttrs.confine) {
                 const { x, y, width, height } = this.attribute.limitRect;
-                limitShapeInBounds(this._label, {
+                limitShapeInBounds(labelNode, {
                     x1: x,
                     y1: y,
                     x2: x + width,
@@ -25154,7 +25299,7 @@ class MarkArcArea extends Marker {
         }
     }
     initMarker(container) {
-        const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, label, state } = this
+        const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, state } = this
             .attribute;
         const area = graphicCreator.arc(Object.assign({ x: center.x, y: center.y, innerRadius,
             outerRadius,
@@ -25164,14 +25309,7 @@ class MarkArcArea extends Marker {
         area.name = 'polar-mark-area-area';
         this._area = area;
         container.add(area);
-        const markLabel = new Tag(Object.assign(Object.assign({}, label), { state: {
-                panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-            } }));
-        markLabel.name = 'mark-area-label';
-        this._label = markLabel;
-        container.add(markLabel);
-        this.setLabelPos();
+        this._addMarkLabels(container, 'mark-area-label', MarkArcArea.defaultAttributes.label);
     }
     updateMarker() {
         const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, label, state } = this
@@ -25183,19 +25321,14 @@ class MarkArcArea extends Marker {
                 endAngle }, areaStyle));
             this._area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.area);
         }
-        if (this._label) {
-            this._label.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, label), { state: {
-                    panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
-                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
-                } }));
-            this.setLabelPos();
-        }
+        this._updateMarkLabels(MarkArcArea.defaultAttributes.label);
     }
     isValidPoints() {
         return true;
     }
 }
 MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME;
+mixin(MarkArcArea, MarkLabelMixin);
 
 loadMarkPointComponent();
 function registerMarkPointAnimate() {
@@ -27216,28 +27349,21 @@ class Slider extends AbstractComponent {
             this._dispatchTooltipEvent('sliderTooltipHide');
         };
         this._onHandlerPointerdown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._currentHandler = e.target;
             this._prePos = this._isHorizontal ? x : y;
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                this.stage.addEventListener('pointerup', this._onHandlerPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onHandlerPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._onHandlerPointerMove = (e) => {
             var _a, _b;
-            e.stopPropagation();
+            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27273,44 +27399,29 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onHandlerPointerUp = (e) => {
-            e.preventDefault();
             this._isChanging = false;
             this._currentHandler = null;
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                this.stage.removeEventListener('pointerup', this._onHandlerPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onHandlerPointerUp);
+            this._clearAllDragEvents();
+        };
+        this._handleTouchMove = (e) => {
+            if (this._isChanging) {
+                e.preventDefault();
             }
         };
         this._onTrackPointerdown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._prePos = this._isHorizontal ? x : y;
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                vglobal.addEventListener('pointerup', this._onTrackPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                this.stage.addEventListener('pointerup', this._onTrackPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onTrackPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onTrackPointerUp);
+            });
         };
         this._onTrackPointerMove = (e) => {
-            e.stopPropagation();
+            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max, inverse } = this.attribute;
             if (max === min) {
@@ -27362,24 +27473,11 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onTrackPointerUp = (e) => {
-            e.preventDefault();
             this._isChanging = false;
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                this.stage.removeEventListener('pointerup', this._onTrackPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onTrackPointerUp);
-            }
+            this._clearAllDragEvents();
         };
         this._onRailPointerDown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27757,6 +27855,9 @@ class Slider extends AbstractComponent {
                 this._track.addEventListener('pointerdown', this._onTrackPointerdown);
             }
             this._railContainer.addEventListener('pointerdown', this._onRailPointerDown);
+            (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+                passive: false
+            });
         }
     }
     _bindTooltipEvents() {
@@ -27767,6 +27868,18 @@ class Slider extends AbstractComponent {
         this._mainContainer.addEventListener('pointermove', this._onTooltipUpdate);
         this._mainContainer.addEventListener('pointerleave', this._onTooltipHide);
     }
+    _clearAllDragEvents() {
+        const triggers = getEndTriggersOfDrag();
+        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+        obj.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onTrackPointerUp);
+        });
+    }
     _updateTrack() {
         const { inverse, railWidth, railHeight } = this.attribute;
         const startHandler = this._startHandler;
@@ -27907,6 +28020,13 @@ class Slider extends AbstractComponent {
             endHandler
         };
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearAllDragEvents();
+    }
 }
 Slider.defaultAttributes = {
     slidable: true,
@@ -29606,7 +29726,7 @@ var IOperateType;
 const DEFAULT_BRUSH_ATTRIBUTES = {
     trigger: 'pointerdown',
     updateTrigger: 'pointermove',
-    endTrigger: ['pointerup', 'pointerleave'],
+    endTrigger: 'pointerup',
     resetTrigger: 'pointerupoutside',
     hasMask: true,
     brushMode: 'single',
@@ -29660,7 +29780,6 @@ class Brush extends AbstractComponent {
                 this._isDownBeforeUpOutside = true;
                 return;
             }
-            this._isDownBeforeUpOutside = false;
             e.stopPropagation();
             const brushMoved = (_a = this.attribute.brushMoved) !== null && _a !== void 0 ? _a : true;
             this._activeMoveState = brushMoved && this._isPosInBrushMask(e);
@@ -29683,14 +29802,6 @@ class Brush extends AbstractComponent {
             : delayMap[this.attribute.delayType](this._onBrushing, this.attribute.delayTime);
         this._onBrushEnd = (e) => {
             var _a;
-            if (this._isDownBeforeUpOutside) {
-                if (!this._isEmptyMask()) {
-                    this._clearMask();
-                    this._dispatchBrushEvent(IOperateType.brushClear, e);
-                }
-                this._isDownBeforeUpOutside = false;
-                return;
-            }
             if (!this._activeDrawState && !this._activeMoveState) {
                 return;
             }
@@ -29698,29 +29809,29 @@ class Brush extends AbstractComponent {
             const { removeOnClick = true } = this.attribute;
             if (this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick) {
                 if ((_a = this._operatingMask) === null || _a === void 0 ? void 0 : _a._AABBBounds.empty()) {
-                    if (!this._isEmptyMask()) {
-                        this._clearMask();
-                        this._dispatchBrushEvent(IOperateType.brushClear, e);
-                    }
-                }
-                else {
-                    delete this._brushMaskAABBBoundsDict[this._operatingMask.name];
-                    this._container.setAttributes({});
-                    this._container.removeChild(this._operatingMask);
-                    if (!this._isEmptyMask()) {
-                        this._dispatchBrushEvent(IOperateType.brushClear, e);
-                    }
-                    else {
-                        this._dispatchBrushEvent(IOperateType.drawEnd, e);
-                    }
+                    this._dispatchEvent(IOperateType.brushClear, {
+                        operateMask: this._operatingMask,
+                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+                        event: e
+                    });
                 }
+                this._container.incrementalClearChild();
+                this._brushMaskAABBBoundsDict = {};
             }
             else {
                 if (this._activeDrawState) {
-                    this._dispatchBrushEvent(IOperateType.drawEnd, e);
+                    this._dispatchEvent(IOperateType.drawEnd, {
+                        operateMask: this._operatingMask,
+                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+                        event: e
+                    });
                 }
                 if (this._activeMoveState) {
-                    this._dispatchBrushEvent(IOperateType.moveEnd, e);
+                    this._dispatchEvent(IOperateType.moveEnd, {
+                        operateMask: this._operatingMask,
+                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+                        event: e
+                    });
                 }
             }
             this._activeDrawState = false;
@@ -29732,14 +29843,23 @@ class Brush extends AbstractComponent {
         };
         this._onBrushClear = (e) => {
             e.preventDefault();
-            if (!this._isEmptyMask()) {
-                this._clearMask();
-                this._dispatchBrushEvent(IOperateType.brushClear, e);
+            const { removeOnClick = true } = this.attribute;
+            if (this._isDownBeforeUpOutside && removeOnClick) {
+                this._dispatchEvent(IOperateType.brushClear, {
+                    operateMask: this._operatingMask,
+                    operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+                    event: e
+                });
+                this._container.incrementalClearChild();
+                this._brushMaskAABBBoundsDict = {};
             }
             this._activeDrawState = false;
             this._activeMoveState = false;
             this._isDrawedBeforeEnd = false;
             this._isDownBeforeUpOutside = false;
+            if (this._operatingMask) {
+                this._operatingMask.setAttribute('pickable', false);
+            }
         };
     }
     _bindBrushEvents() {
@@ -29747,19 +29867,44 @@ class Brush extends AbstractComponent {
             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 => this.stage.addEventListener(t, this._onBrushStart));
+        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);
+        const brushMasks = this._container.getChildren();
+        for (let i = 0; i < brushMasks.length; i++) {
+            const { points = [], dx = 0, dy = 0 } = brushMasks[i].attribute;
+            const pointsConsiderOffset = points.map((point) => {
+                return {
+                    x: point.x + dx,
+                    y: point.y + dy
+                };
+            });
+            if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) {
+                this._operatingMask = brushMasks[i];
+                return true;
+            }
+        }
+        return false;
+    }
     _initDraw(e) {
         const { brushMode } = this.attribute;
         const pos = this.eventPosToStagePos(e);
         this._cacheDrawPoints = [pos];
         this._isDrawedBeforeEnd = false;
-        brushMode === 'single' && this._clearMask();
+        if (brushMode === 'single') {
+            this._brushMaskAABBBoundsDict = {};
+            this._container.incrementalClearChild();
+        }
         this._addBrushMask();
-        this._dispatchBrushEvent(IOperateType.drawStart, e);
+        this._dispatchEvent(IOperateType.drawStart, {
+            operateMask: this._operatingMask,
+            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+            event: e
+        });
     }
     _initMove(e) {
         var _a, _b;
@@ -29776,7 +29921,11 @@ class Brush extends AbstractComponent {
         this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX];
         this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY];
         this._operatingMask.setAttribute('pickable', true);
-        this._dispatchBrushEvent(IOperateType.moveStart, e);
+        this._dispatchEvent(IOperateType.moveStart, {
+            operateMask: this._operatingMask,
+            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+            event: e
+        });
     }
     _drawing(e) {
         var _a, _b;
@@ -29803,8 +29952,12 @@ class Brush extends AbstractComponent {
                 !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold);
         if (this._isDrawedBeforeEnd) {
             this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
+            this._dispatchEvent(IOperateType.drawing, {
+                operateMask: this._operatingMask,
+                operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+                event: e
+            });
         }
-        this._dispatchBrushEvent(IOperateType.drawing, e);
     }
     _moving(e) {
         const startPos = this._cacheMovePoint;
@@ -29823,20 +29976,11 @@ class Brush extends AbstractComponent {
             dy: moveY
         });
         this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
-        this._dispatchBrushEvent(IOperateType.moving, e);
-    }
-    render() {
-        this.releaseBrushEvents();
-        this._bindBrushEvents();
-        const group = this.createOrUpdateChild('brush-container', {}, 'group');
-        this._container = group;
-    }
-    releaseBrushEvents() {
-        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 => this.stage.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));
+        this._dispatchEvent(IOperateType.moving, {
+            operateMask: this._operatingMask,
+            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+            event: e
+        });
     }
     _computeMaskPoints() {
         const { brushType, xRange = [0, 0], yRange = [0, 0] } = this.attribute;
@@ -29905,30 +30049,12 @@ class Brush extends AbstractComponent {
     _addBrushMask() {
         var _a;
         const { brushStyle, hasMask } = this.attribute;
-        const brushMask = graphicCreator.polygon(Object.assign(Object.assign({ points: cloneDeep(this._cacheDrawPoints), cursor: 'move', pickable: false }, brushStyle), { opacity: hasMask ? ((_a = brushStyle.opacity) !== null && _a !== void 0 ? _a : 1) : 0 }));
+        const brushMask = graphicCreator.polygon(Object.assign(Object.assign({ points: cloneDeep(this._cacheDrawPoints), cursor: 'move', pickable: false }, brushStyle), { opacity: hasMask ? (_a = brushStyle.opacity) !== null && _a !== void 0 ? _a : 1 : 0 }));
         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);
-        const brushMasks = this._container.getChildren();
-        for (let i = 0; i < brushMasks.length; i++) {
-            const { points = [], dx = 0, dy = 0 } = brushMasks[i].attribute;
-            const pointsConsiderOffset = points.map((point) => {
-                return {
-                    x: point.x + dx,
-                    y: point.y + dy
-                };
-            });
-            if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) {
-                this._operatingMask = brushMasks[i];
-                return true;
-            }
-        }
-        return false;
-    }
     _outOfInteractiveRange(e) {
         const { interactiveRange } = this.attribute;
         const { minY = -Infinity, maxY = Infinity, minX = -Infinity, maxX = Infinity } = interactiveRange;
@@ -29941,21 +30067,17 @@ class Brush extends AbstractComponent {
     eventPosToStagePos(e) {
         return this.stage.eventPointTransform(e);
     }
-    _dispatchBrushEvent(operateType, e) {
-        this._dispatchEvent(operateType, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-        });
-    }
-    _clearMask() {
-        this._brushMaskAABBBoundsDict = {};
-        this._container.incrementalClearChild();
-        this._operatingMask = null;
+    render() {
+        this._bindBrushEvents();
+        const group = this.createOrUpdateChild('brush-container', {}, 'group');
+        this._container = group;
     }
-    _isEmptyMask() {
-        return (isEmpty(this._brushMaskAABBBoundsDict) ||
-            Object.keys(this._brushMaskAABBBoundsDict).every(key => this._brushMaskAABBBoundsDict[key].empty()));
+    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));
     }
 }
 Brush.defaultAttributes = DEFAULT_BRUSH_ATTRIBUTES;
@@ -31257,10 +31379,10 @@ class Switch extends AbstractComponent {
         });
         this._circle.setAttributes({
             y: circleY,
-            x: this.attribute.checked ? circleX : maxWidth - circleX
+            x: !this.attribute.checked ? circleX : maxWidth - circleX
         });
         this._text.setAttributes({
-            x: this.attribute.checked ? textX : maxWidth - textX - textWidth,
+            x: !this.attribute.checked ? textX : maxWidth - textX - textWidth,
             y: textY
         });
     }
@@ -31498,6 +31620,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.7-alpha.8";
+const version = "0.22.7";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };