@visactor/vrender-components 0.22.7-alpha.3 → 0.23.0-alpha.3

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, Color, isNumber, cos, sin, isString, pointAt, sqrt, OBBBounds, isNil, 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, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, array, isRotateAABBIntersect, isLess, isGreater, cloneDeep, get, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -577,6 +577,25 @@ const EnvContribution = Symbol.for("EnvContribution");
 const VGlobal = Symbol.for("VGlobal");
 const DEFAULT_TEXT_FONT_FAMILY$1 = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
 
+class PerformanceRAF {
+  constructor() {
+    this.nextAnimationFrameCbs = [], this._rafHandle = null, this.runAnimationFrame = time => {
+      this._rafHandle = null;
+      const cbs = this.nextAnimationFrameCbs;
+      this.nextAnimationFrameCbs = [];
+      for (let i = 0; i < cbs.length; i++) cbs[i] && cbs[i](time);
+    }, this.tryRunAnimationFrameNextFrame = () => {
+      null === this._rafHandle && 0 !== this.nextAnimationFrameCbs.length && (this._rafHandle = vglobal.getRequestAnimationFrame()(this.runAnimationFrame));
+    };
+  }
+  addAnimationFrameCb(callback) {
+    return this.nextAnimationFrameCbs.push(callback), this.tryRunAnimationFrameNextFrame(), this.nextAnimationFrameCbs.length - 1;
+  }
+  removeAnimationFrameCb(index) {
+    return index >= 0 && index < this.nextAnimationFrameCbs.length && (this.nextAnimationFrameCbs[index] = null, !0);
+  }
+}
+
 var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
@@ -661,7 +680,7 @@ let DefaultGlobal = class {
     this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
   }
   constructor(contributions) {
-    this.contributions = contributions, this._isImageAnonymous = !0, this.id = Generator.GenAutoIncrementId(), this.hooks = {
+    this.contributions = contributions, this._isImageAnonymous = !0, this._performanceRAFList = [], this.id = Generator.GenAutoIncrementId(), this.hooks = {
       onSetEnv: new SyncHook(["lastEnv", "env", "global"])
     }, this.measureTextMethod = "native", this.optimizeVisible = !1;
   }
@@ -717,6 +736,16 @@ let DefaultGlobal = class {
   getRequestAnimationFrame() {
     return this._env || this.setEnv("browser"), this.envContribution.getRequestAnimationFrame();
   }
+  getSpecifiedRequestAnimationFrame(id) {
+    this._env || this.setEnv("browser"), this._performanceRAFList[id] || (this._performanceRAFList[id] = new PerformanceRAF());
+    const performanceRAF = this._performanceRAFList[id];
+    return callback => performanceRAF.addAnimationFrameCb(callback);
+  }
+  getSpecifiedCancelAnimationFrame(id) {
+    if (this._env || this.setEnv("browser"), !this._performanceRAFList[id]) return () => !1;
+    const performanceRAF = this._performanceRAFList[id];
+    return handle => performanceRAF.removeAnimationFrameCb(handle);
+  }
   getCancelAnimationFrame() {
     return this._env || this.setEnv("browser"), this.envContribution.getCancelAnimationFrame();
   }
@@ -938,22 +967,22 @@ var AttributeUpdateType;
 !function (AttributeUpdateType) {
   AttributeUpdateType[AttributeUpdateType.INIT = 0] = "INIT", AttributeUpdateType[AttributeUpdateType.DEFAULT = 1] = "DEFAULT", AttributeUpdateType[AttributeUpdateType.STATE = 2] = "STATE", AttributeUpdateType[AttributeUpdateType.ANIMATE_BIND = 10] = "ANIMATE_BIND", AttributeUpdateType[AttributeUpdateType.ANIMATE_PLAY = 11] = "ANIMATE_PLAY", AttributeUpdateType[AttributeUpdateType.ANIMATE_START = 12] = "ANIMATE_START", AttributeUpdateType[AttributeUpdateType.ANIMATE_UPDATE = 13] = "ANIMATE_UPDATE", AttributeUpdateType[AttributeUpdateType.ANIMATE_END = 14] = "ANIMATE_END", AttributeUpdateType[AttributeUpdateType.TRANSLATE = 20] = "TRANSLATE", AttributeUpdateType[AttributeUpdateType.TRANSLATE_TO = 21] = "TRANSLATE_TO", AttributeUpdateType[AttributeUpdateType.SCALE = 22] = "SCALE", AttributeUpdateType[AttributeUpdateType.SCALE_TO = 23] = "SCALE_TO", AttributeUpdateType[AttributeUpdateType.ROTATE = 24] = "ROTATE", AttributeUpdateType[AttributeUpdateType.ROTATE_TO = 25] = "ROTATE_TO";
 }(AttributeUpdateType || (AttributeUpdateType = {}));
-var AnimateStatus;
+var AnimateStatus$1;
 !function (AnimateStatus) {
   AnimateStatus[AnimateStatus.INITIAL = 0] = "INITIAL", AnimateStatus[AnimateStatus.RUNNING = 1] = "RUNNING", AnimateStatus[AnimateStatus.PAUSED = 2] = "PAUSED", AnimateStatus[AnimateStatus.END = 3] = "END";
-}(AnimateStatus || (AnimateStatus = {}));
-var AnimateMode;
+}(AnimateStatus$1 || (AnimateStatus$1 = {}));
+var AnimateMode$1;
 !function (AnimateMode) {
   AnimateMode[AnimateMode.NORMAL = 0] = "NORMAL", AnimateMode[AnimateMode.SET_ATTR_IMMEDIATELY = 1] = "SET_ATTR_IMMEDIATELY";
-}(AnimateMode || (AnimateMode = {}));
-var AnimateStepType;
+}(AnimateMode$1 || (AnimateMode$1 = {}));
+var AnimateStepType$1;
 !function (AnimateStepType) {
   AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", AnimateStepType.customAnimate = "customAnimate";
-}(AnimateStepType || (AnimateStepType = {}));
-var Direction$1;
+}(AnimateStepType$1 || (AnimateStepType$1 = {}));
+var Direction;
 !function (Direction) {
   Direction[Direction.ROW = 1] = "ROW", Direction[Direction.COLUMN = 2] = "COLUMN";
-}(Direction$1 || (Direction$1 = {}));
+}(Direction || (Direction = {}));
 var CurveTypeEnum;
 !function (CurveTypeEnum) {
   CurveTypeEnum[CurveTypeEnum.CubicBezierCurve = 0] = "CubicBezierCurve", CurveTypeEnum[CurveTypeEnum.QuadraticBezierCurve = 1] = "QuadraticBezierCurve", CurveTypeEnum[CurveTypeEnum.ArcCurve = 2] = "ArcCurve", CurveTypeEnum[CurveTypeEnum.LineCurve = 3] = "LineCurve", CurveTypeEnum[CurveTypeEnum.EllipseCurve = 4] = "EllipseCurve", CurveTypeEnum[CurveTypeEnum.MoveCurve = 5] = "MoveCurve";
@@ -1126,7 +1155,7 @@ class QuadraticBezierCurve extends Curve {
     return this._validPoint() ? quadLength(this.p0, this.p1, this.p2) : 60;
   }
   calcProjLength(direction) {
-    return direction === Direction$1.ROW ? abs(this.p0.x - this.p2.x) : direction === Direction$1.COLUMN ? abs(this.p0.y - this.p2.y) : 0;
+    return direction === Direction.ROW ? abs(this.p0.x - this.p2.x) : direction === Direction.COLUMN ? abs(this.p0.y - this.p2.y) : 0;
   }
   getAngleAt(t) {
     const minT = max(t - .01, 0),
@@ -1190,7 +1219,7 @@ class CubicBezierCurve extends Curve {
     return this._validPoint() ? cubicLength(this.p0, this.p1, this.p2, this.p3) : 60;
   }
   calcProjLength(direction) {
-    return direction === Direction$1.ROW ? abs(this.p0.x - this.p3.x) : direction === Direction$1.COLUMN ? abs(this.p0.y - this.p3.y) : 0;
+    return direction === Direction.ROW ? abs(this.p0.x - this.p3.x) : direction === Direction.COLUMN ? abs(this.p0.y - this.p3.y) : 0;
   }
   getAngleAt(t) {
     const minT = max(t - .01, 0),
@@ -1243,7 +1272,7 @@ class LineCurve extends Curve {
     return this._validPoint() ? PointService.distancePP(this.p0, this.p1) : 60;
   }
   calcProjLength(direction) {
-    return direction === Direction$1.ROW ? abs(this.p0.x - this.p1.x) : direction === Direction$1.COLUMN ? abs(this.p0.y - this.p1.y) : 0;
+    return direction === Direction.ROW ? abs(this.p0.x - this.p1.x) : direction === Direction.COLUMN ? abs(this.p0.y - this.p1.y) : 0;
   }
   draw(path, x, y, sx, sy, percent) {
     if (path.moveTo(this.p0.x * sx + x, this.p0.y * sy + y), percent >= 1) path.lineTo(this.p1.x * sx + x, this.p1.y * sy + y);else if (percent > 0) {
@@ -1319,14 +1348,14 @@ class SegContext {
   }
   getLength(direction) {
     var _a, _b;
-    if (direction === Direction$1.COLUMN) {
+    if (direction === Direction.COLUMN) {
       if (!this.curves.length) return 0;
       const sc = this.curves[0],
         ec = this.curves[this.curves.length - 1],
         endP = null !== (_a = ec.p3) && void 0 !== _a ? _a : ec.p1;
       return abs(sc.p0.y - endP.y);
     }
-    if (direction === Direction$1.ROW) {
+    if (direction === Direction.ROW) {
       if (!this.curves.length) return 0;
       const sc = this.curves[0],
         ec = this.curves[this.curves.length - 1],
@@ -1356,7 +1385,7 @@ function genCurveSegments(path, points) {
   for (let i = 0, n = points.length; i <= n; i++) i >= n === defined0 && ((defined0 = !defined0) ? path.lineStart() : path.lineEnd()), defined0 && path.point(points[i]);
 }
 function genSegContext(curveType, direction, points) {
-  const curveDirection = null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN;
+  const curveDirection = null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction.ROW : Direction.COLUMN;
   return "monotoneY" === curveType ? new ReflectSegContext(curveType, curveDirection) : new SegContext(curveType, curveDirection);
 }
 
@@ -1618,7 +1647,7 @@ function genStepSegments(points, t) {
     startPoint: startPoint
   } = params;
   if (points.length < 2 - Number(!!startPoint)) return null;
-  const segContext = new SegContext("step", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+  const segContext = new SegContext("step", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction.ROW : Direction.COLUMN);
   return genStepTypeSegments(new Step$1(segContext, t, startPoint), points), segContext;
 }
 function genStepTypeSegments(path, points) {
@@ -1949,7 +1978,7 @@ class CustomPath2D extends CurvePath {
     } = line.attribute;
     if (!points) return;
     const cache = calcLineCache(points, curveType);
-    "x" === clipRangeByDimension ? this.direction = Direction$1.ROW : "y" === clipRangeByDimension ? this.direction = Direction$1.COLUMN : "auto" === clipRangeByDimension && (this.direction = cache.direction), this._curves = cache.curves;
+    "x" === clipRangeByDimension ? this.direction = Direction.ROW : "y" === clipRangeByDimension ? this.direction = Direction.COLUMN : "auto" === clipRangeByDimension && (this.direction = cache.direction), this._curves = cache.curves;
   }
   fromCustomPath2D(path, x, y, sX, sY) {
     return this.clear(), this._runCommandList(path.commandList, x, y, sX, sY), this._updateBounds(), this;
@@ -2111,13 +2140,13 @@ class CustomPath2D extends CurvePath {
     this.commandList = [], this._boundsContext = null, this._ctx = null;
   }
   getLength() {
-    if (this.direction === Direction$1.COLUMN) {
+    if (this.direction === Direction.COLUMN) {
       if (!this._curves.length) return 0;
       const sc = this._curves[0],
         ec = this._curves[this._curves.length - 1];
       return abs(sc.p0.y - ec.p1.y);
     }
-    if (this.direction === Direction$1.ROW) {
+    if (this.direction === Direction.ROW) {
       if (!this._curves.length) return 0;
       const sc = this._curves[0],
         ec = this._curves[this._curves.length - 1];
@@ -4212,801 +4241,97 @@ const EventTarget = {
   }
 };
 
-class Easing {
-  constructor() {}
-  static linear(t) {
-    return t;
-  }
-  static none() {
-    return this.linear;
-  }
-  static get(amount) {
-    return amount < -1 ? amount = -1 : amount > 1 && (amount = 1), function (t) {
-      return 0 === amount ? t : amount < 0 ? t * (t * -amount + 1 + amount) : t * ((2 - t) * amount + (1 - amount));
-    };
-  }
-  static getPowIn(pow) {
-    return function (t) {
-      return Math.pow(t, pow);
-    };
-  }
-  static getPowOut(pow) {
-    return function (t) {
-      return 1 - Math.pow(1 - t, pow);
-    };
-  }
-  static getPowInOut(pow) {
-    return function (t) {
-      return (t *= 2) < 1 ? .5 * Math.pow(t, pow) : 1 - .5 * Math.abs(Math.pow(2 - t, pow));
-    };
-  }
-  static getBackIn(amount) {
-    return function (t) {
-      return t * t * ((amount + 1) * t - amount);
-    };
-  }
-  static getBackOut(amount) {
-    return function (t) {
-      return --t * t * ((amount + 1) * t + amount) + 1;
-    };
-  }
-  static getBackInOut(amount) {
-    return amount *= 1.525, function (t) {
-      return (t *= 2) < 1 ? t * t * ((amount + 1) * t - amount) * .5 : .5 * ((t -= 2) * t * ((amount + 1) * t + amount) + 2);
-    };
-  }
-  static sineIn(t) {
-    return 1 - Math.cos(t * Math.PI / 2);
-  }
-  static sineOut(t) {
-    return Math.sin(t * Math.PI / 2);
-  }
-  static sineInOut(t) {
-    return -(Math.cos(Math.PI * t) - 1) / 2;
-  }
-  static expoIn(t) {
-    return 0 === t ? 0 : Math.pow(2, 10 * t - 10);
-  }
-  static expoOut(t) {
-    return 1 === t ? 1 : 1 - Math.pow(2, -10 * t);
-  }
-  static expoInOut(t) {
-    return 0 === t ? 0 : 1 === t ? 1 : t < .5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
-  }
-  static circIn(t) {
-    return -(Math.sqrt(1 - t * t) - 1);
-  }
-  static circOut(t) {
-    return Math.sqrt(1 - --t * t);
-  }
-  static circInOut(t) {
-    return (t *= 2) < 1 ? -.5 * (Math.sqrt(1 - t * t) - 1) : .5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
-  }
-  static bounceOut(t) {
-    return t < 1 / 2.75 ? 7.5625 * t * t : t < 2 / 2.75 ? 7.5625 * (t -= 1.5 / 2.75) * t + .75 : t < 2.5 / 2.75 ? 7.5625 * (t -= 2.25 / 2.75) * t + .9375 : 7.5625 * (t -= 2.625 / 2.75) * t + .984375;
-  }
-  static bounceIn(t) {
-    return 1 - Easing.bounceOut(1 - t);
-  }
-  static bounceInOut(t) {
-    return t < .5 ? .5 * Easing.bounceIn(2 * t) : .5 * Easing.bounceOut(2 * t - 1) + .5;
-  }
-  static getElasticIn(amplitude, period) {
-    return function (t) {
-      if (0 === t || 1 === t) return t;
-      const s = period / pi2 * Math.asin(1 / amplitude);
-      return -amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * pi2 / period);
-    };
-  }
-  static getElasticOut(amplitude, period) {
-    return function (t) {
-      if (0 === t || 1 === t) return t;
-      const s = period / pi2 * Math.asin(1 / amplitude);
-      return amplitude * Math.pow(2, -10 * t) * Math.sin((t - s) * pi2 / period) + 1;
-    };
-  }
-  static getElasticInOut(amplitude, period) {
-    return function (t) {
-      const s = period / pi2 * Math.asin(1 / amplitude);
-      return (t *= 2) < 1 ? amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * -.5 : amplitude * Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * .5 + 1;
-    };
+var ColorType;
+!function (ColorType) {
+  ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
+}(ColorType || (ColorType = {}));
+class ColorStore {
+  static Get(str) {
+    let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorType.Color1;
+    let arr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 0, 1];
+    if (size === ColorType.Color1) {
+      const color = ColorStore.store1[str];
+      if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
+      const c = Color.parseColorString(str);
+      if (c) {
+        const data = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
+        ColorStore.store1[str] = data, ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = data[0], arr[1] = data[1], arr[2] = data[2], arr[3] = data[3];
+      }
+      return arr;
+    }
+    const color = ColorStore.store255[str];
+    if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
+    const c = Color.parseColorString(str);
+    return c && (ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity], ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = c.r, arr[1] = c.g, arr[2] = c.b, arr[3] = c.opacity), arr;
   }
-  static registerFunc(name, func) {
-    Easing[name] = func;
+  static Set(str, size, arr) {
+    if (size === ColorType.Color1) {
+      if (ColorStore.store1[str]) return;
+      ColorStore.store1[str] = arr, ColorStore.store255[str] = [Math.floor(255 * arr[0]), Math.floor(255 * arr[1]), Math.floor(255 * arr[2]), Math.floor(255 * arr[3])];
+    } else {
+      if (ColorStore.store255[str]) return;
+      ColorStore.store255[str] = arr, ColorStore.store1[str] = [arr[0] / 255, arr[1] / 255, arr[2] / 255, arr[3]];
+    }
   }
 }
-function flicker(t, n) {
-  const step = 1 / n;
-  let flag = 1;
-  for (; t > step;) t -= step, flag *= -1;
-  const v = flag * t / step;
-  return v > 0 ? v : 1 + v;
-}
-Easing.quadIn = Easing.getPowIn(2), Easing.quadOut = Easing.getPowOut(2), Easing.quadInOut = Easing.getPowInOut(2), Easing.cubicIn = Easing.getPowIn(3), Easing.cubicOut = Easing.getPowOut(3), Easing.cubicInOut = Easing.getPowInOut(3), Easing.quartIn = Easing.getPowIn(4), Easing.quartOut = Easing.getPowOut(4), Easing.quartInOut = Easing.getPowInOut(4), Easing.quintIn = Easing.getPowIn(5), Easing.quintOut = Easing.getPowOut(5), Easing.quintInOut = Easing.getPowInOut(5), Easing.backIn = Easing.getBackIn(1.7), Easing.backOut = Easing.getBackOut(1.7), Easing.backInOut = Easing.getBackInOut(1.7), Easing.elasticIn = Easing.getElasticIn(1, .3), Easing.elasticOut = Easing.getElasticOut(1, .3), Easing.elasticInOut = Easing.getElasticInOut(1, .3 * 1.5), Easing.easeInOutQuad = t => (t /= .5) < 1 ? .5 * Math.pow(t, 2) : -.5 * ((t -= 2) * t - 2), Easing.easeOutElastic = x => {
-  const c4 = 2 * Math.PI / 3;
-  return 0 === x ? 0 : 1 === x ? 1 : Math.pow(2, -10 * x) * Math.sin((10 * x - .75) * c4) + 1;
-}, Easing.easeInOutElastic = x => {
-  const c5 = 2 * Math.PI / 4.5;
-  return 0 === x ? 0 : 1 === x ? 1 : x < .5 ? -Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
-};
-for (let i = 0; i < 10; i++) Easing[`flicker${i}`] = t => flicker(t, i);
-for (let i = 2; i < 10; i++) Easing[`aIn${i}`] = t => i * t * t + (1 - i) * t;
+ColorStore.store255 = {}, ColorStore.store1 = {};
 
-class DefaultTimeline {
-  constructor() {
-    this.id = Generator.GenAutoIncrementId(), this.animateHead = null, this.animateTail = null, this.animateCount = 0, this.paused = !1;
-  }
-  addAnimate(animate) {
-    this.animateTail ? (this.animateTail.nextAnimate = animate, animate.prevAnimate = this.animateTail, this.animateTail = animate, animate.nextAnimate = null) : (this.animateHead = animate, this.animateTail = animate), this.animateCount++;
-  }
-  pause() {
-    this.paused = !0;
-  }
-  resume() {
-    this.paused = !1;
-  }
-  tick(delta) {
-    if (this.paused) return;
-    let animate = this.animateHead;
-    for (this.animateCount = 0; animate;) animate.status === AnimateStatus.END ? this.removeAnimate(animate) : animate.status === AnimateStatus.RUNNING || animate.status === AnimateStatus.INITIAL ? (this.animateCount++, animate.advance(delta)) : animate.status === AnimateStatus.PAUSED && this.animateCount++, animate = animate.nextAnimate;
-  }
-  clear() {
-    let animate = this.animateHead;
-    for (; animate;) animate.release(), animate = animate.nextAnimate;
-    this.animateHead = null, this.animateTail = null, this.animateCount = 0;
-  }
-  removeAnimate(animate) {
-    let release = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    animate._onRemove && animate._onRemove.forEach(cb => cb()), animate === this.animateHead ? (this.animateHead = animate.nextAnimate, animate === this.animateTail ? this.animateTail = null : this.animateHead.prevAnimate = null) : animate === this.animateTail ? (this.animateTail = animate.prevAnimate, this.animateTail.nextAnimate = null) : (animate.prevAnimate.nextAnimate = animate.nextAnimate, animate.nextAnimate.prevAnimate = animate.prevAnimate), release && animate.release();
-  }
+function colorArrayToString(color) {
+  let alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+  return Array.isArray(color) && isNumber(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
 }
-const defaultTimeline = new DefaultTimeline();
-
-class ACustomAnimate {
-  constructor(from, to, duration, easing, params) {
-    this.from = from, this.to = to, this.duration = duration, this.easing = easing, this.params = params, this.updateCount = 0;
-  }
-  bind(target, subAni) {
-    this.target = target, this.subAnimate = subAni, this.onBind();
-  }
-  onBind() {}
-  onFirstRun() {}
-  onStart() {}
-  onEnd() {}
-  getEndProps() {
-    return this.to;
-  }
-  getFromProps() {
-    return this.from;
-  }
-  getMergedEndProps() {
-    var _a;
-    const thisEndProps = this.getEndProps();
-    return thisEndProps ? this._endProps === thisEndProps ? this._mergedEndProps : (this._endProps = thisEndProps, void (this._mergedEndProps = Object.assign({}, null !== (_a = this.step.prev.getLastProps()) && void 0 !== _a ? _a : {}, thisEndProps))) : this.step.prev ? this.step.prev.getLastProps() : thisEndProps;
+function interpolateColor(from, to, ratio, alphaChannel, cb) {
+  if (Array.isArray(from) && !isNumber(from[0]) || Array.isArray(to) && !isNumber(to[0])) {
+    return new Array(4).fill(0).map((_, index) => _interpolateColor(isArray(from) ? from[index] : from, isArray(to) ? to[index] : to, ratio, alphaChannel));
   }
-  update(end, ratio, out) {
-    if (0 === this.updateCount) {
-      this.onFirstRun();
-      const props = this.step.getLastProps();
-      Object.keys(props).forEach(k => {
-        this.subAnimate.animate.validAttr(k) && (out[k] = props[k]);
+  return _interpolateColor(from, to, ratio, alphaChannel, cb);
+}
+function _interpolateColor(from, to, ratio, alphaChannel, cb) {
+  if (!from || !to) return from && colorArrayToString(from) || to && colorArrayToString(to) || !1;
+  let fromArray,
+    toArray,
+    fromGradient = !1,
+    toGradient = !1;
+  if (Array.isArray(from) ? fromArray = from : "string" == typeof from ? fromArray = ColorStore.Get(from, ColorType.Color255) : fromGradient = !0, Array.isArray(to) ? toArray = to : "string" == typeof to ? toArray = ColorStore.Get(to, ColorType.Color255) : toGradient = !0, fromGradient !== toGradient) {
+    const gradient = fromGradient ? from : to,
+      pure = fromGradient ? to : from,
+      gradientFromPure = Object.assign(Object.assign({}, gradient), {
+        stops: gradient.stops.map(v => Object.assign(Object.assign({}, v), {
+          color: colorArrayToString(pure)
+        }))
       });
+    return fromGradient ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb) : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
+  }
+  if (fromGradient) {
+    if (from.gradient === to.gradient) {
+      const fc = from,
+        tc = to,
+        fromStops = fc.stops,
+        toStops = tc.stops;
+      if (fromStops.length !== toStops.length) return !1;
+      if ("linear" === fc.gradient) return interpolateGradientLinearColor(fc, tc, ratio);
+      if ("radial" === fc.gradient) return interpolateGradientRadialColor(fc, tc, ratio);
+      if ("conical" === fc.gradient) return interpolateGradientConicalColor(fc, tc, ratio);
     }
-    this.updateCount += 1, this.onUpdate(end, ratio, out), end && this.onEnd();
+    return !1;
   }
+  cb && cb(fromArray, toArray);
+  return colorArrayToString(interpolatePureColorArray(fromArray, toArray, ratio), alphaChannel);
 }
-class CbAnimate extends ACustomAnimate {
-  constructor(cb) {
-    super(null, null, 0, "linear"), this.cb = cb;
-  }
-  onUpdate(end, ratio, out) {}
-  onStart() {
-    this.cb();
-  }
-}
-class Animate {
-  constructor() {
-    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Generator.GenAutoIncrementId();
-    let timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline;
-    let slience = arguments.length > 2 ? arguments[2] : undefined;
-    this.id = id, this.timeline = timeline || defaultTimeline, this.status = AnimateStatus.INITIAL, this.tailAnimate = new SubAnimate(this), this.subAnimates = [this.tailAnimate], this.timeScale = 1, this.rawPosition = -1, this._startTime = 0, this._duringTime = 0, this.timeline.addAnimate(this), this.slience = slience;
-  }
-  setTimeline(timeline) {
-    timeline !== this.timeline && (this.timeline.removeAnimate(this, !1), timeline.addAnimate(this));
-  }
-  getStartTime() {
-    return this._startTime;
-  }
-  getDuration() {
-    return this.subAnimates.reduce((t, subAnimate) => t + subAnimate.totalDuration, 0);
-  }
-  after(animate) {
-    const t = animate.getDuration();
-    return this._startTime = t, this;
-  }
-  afterAll(list) {
-    let maxT = -1 / 0;
-    return list.forEach(a => {
-      maxT = max(a.getDuration(), maxT);
-    }), this._startTime = maxT, this;
-  }
-  parallel(animate) {
-    return this._startTime = animate.getStartTime(), this;
-  }
-  static AddInterpolate(name, cb) {
-    Animate.interpolateMap.set(name, cb);
-  }
-  play(customAnimate) {
-    if (this.tailAnimate.play(customAnimate), this.target) {
-      const stage = this.target.stage;
-      stage && stage.renderNextFrame();
-    }
-    return 1 === this.subAnimates.length && this.tailAnimate.totalDuration === customAnimate.duration && this.trySetAttribute(customAnimate.getFromProps(), customAnimate.mode), this;
-  }
-  trySetAttribute(attr) {
-    let mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Animate.mode;
-    attr && mode & AnimateMode.SET_ATTR_IMMEDIATELY && this.target.setAttributes && this.target.setAttributes(attr, !1, {
-      type: AttributeUpdateType.ANIMATE_PLAY
-    });
-  }
-  runCb(cb) {
-    const customAnimate = new CbAnimate(() => {
-      cb(this, customAnimate.step.prev);
-    });
-    return this.tailAnimate.play(customAnimate), this;
-  }
-  customInterpolate(key, ratio, from, to, target, ret) {
-    const func = Animate.interpolateMap.get(key) || Animate.interpolateMap.get("");
-    return !!func && func(key, ratio, from, to, target, ret);
-  }
-  pause() {
-    this.status === AnimateStatus.RUNNING && (this.status = AnimateStatus.PAUSED);
-  }
-  resume() {
-    this.status === AnimateStatus.PAUSED && (this.status = AnimateStatus.RUNNING);
-  }
-  to(props, duration, easing, params) {
-    if (this.tailAnimate.to(props, duration, easing, params), this.target) {
-      const stage = this.target.stage;
-      stage && stage.renderNextFrame();
-    }
-    return this;
-  }
-  from(props, duration, easing, params) {
-    if (this.tailAnimate.from(props, duration, easing, params), this.target) {
-      const stage = this.target.stage;
-      stage && stage.renderNextFrame();
-    }
-    return this;
-  }
-  wait(duration) {
-    if (this.tailAnimate.wait(duration), this.target) {
-      const stage = this.target.stage;
-      stage && stage.renderNextFrame();
-    }
-    return this;
-  }
-  startAt(t) {
-    if (this.tailAnimate.startAt(t), this.target) {
-      const stage = this.target.stage;
-      stage && stage.renderNextFrame();
-    }
-    return this;
-  }
-  loop(l) {
-    if (this.tailAnimate.loop = l, this.target) {
-      const stage = this.target.stage;
-      stage && stage.renderNextFrame();
-    }
-    return this;
-  }
-  reversed(r) {
-    if (this.tailAnimate.reversed = r, this.target) {
-      const stage = this.target.stage;
-      stage && stage.renderNextFrame();
-    }
-    return this;
-  }
-  bounce(b) {
-    if (this.tailAnimate.bounce = b, this.target) {
-      const stage = this.target.stage;
-      stage && stage.renderNextFrame();
-    }
-    return this;
-  }
-  subAnimate() {
-    const sa = new SubAnimate(this, this.tailAnimate);
-    return this.tailAnimate = sa, this.subAnimates.push(sa), sa.bind(this.target), this;
-  }
-  getStartProps() {
-    return this.subAnimates[0].getStartProps();
-  }
-  getEndProps() {
-    return this.tailAnimate.getEndProps();
-  }
-  depreventAttr(key) {
-    this._preventAttrs && this._preventAttrs.delete(key);
-  }
-  preventAttr(key) {
-    this._preventAttrs || (this._preventAttrs = new Set()), this._preventAttrs.add(key);
-  }
-  preventAttrs(keys) {
-    keys.forEach(key => this.preventAttr(key));
-  }
-  validAttr(key) {
-    return !this._preventAttrs || !this._preventAttrs.has(key);
-  }
-  bind(target) {
-    return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.subAnimates.forEach(sa => {
-      sa.bind(target);
-    }), this;
-  }
-  advance(delta) {
-    if (this._duringTime < this._startTime) {
-      if (this._duringTime + delta * this.timeScale < this._startTime) return void (this._duringTime += delta * this.timeScale);
-      delta = this._duringTime + delta * this.timeScale - this._startTime, this._duringTime = this._startTime;
-    }
-    this.status === AnimateStatus.INITIAL && (this.status = AnimateStatus.RUNNING, this._onStart && this._onStart.forEach(cb => cb()));
-    this.setPosition(Math.max(this.rawPosition, 0) + delta * this.timeScale) && this.status === AnimateStatus.RUNNING && (this.status = AnimateStatus.END, this._onEnd && this._onEnd.forEach(cb => cb()));
-  }
-  setPosition(rawPosition) {
-    let sa,
-      d = 0;
-    const prevRawPos = this.rawPosition,
-      maxRawPos = this.subAnimates.reduce((a, b) => a + b.totalDuration, 0);
-    rawPosition < 0 && (rawPosition = 0);
-    const end = rawPosition >= maxRawPos;
-    if (end && (rawPosition = maxRawPos), rawPosition === prevRawPos) return end;
-    for (let i = 0; i < this.subAnimates.length && (sa = this.subAnimates[i], !(d + sa.totalDuration >= rawPosition)); i++) d += sa.totalDuration, sa = void 0;
-    return this.rawPosition = rawPosition, sa.setPosition(rawPosition - d), end;
-  }
-  onStart(cb) {
-    this._onStart || (this._onStart = []), this._onStart.push(cb);
-  }
-  onEnd(cb) {
-    this._onEnd || (this._onEnd = []), this._onEnd.push(cb);
-  }
-  onRemove(cb) {
-    this._onRemove || (this._onRemove = []), this._onRemove.push(cb);
-  }
-  onFrame(cb) {
-    this._onFrame || (this._onFrame = []), this._onFrame.push(cb);
-  }
-  release() {
-    this.status = AnimateStatus.END;
-  }
-  stop(nextVal) {
-    nextVal || this.target.onStop(), "start" === nextVal ? this.target.onStop(this.getStartProps()) : "end" === nextVal ? this.target.onStop(this.getEndProps()) : this.target.onStop(nextVal), this.release();
-  }
-}
-Animate.mode = AnimateMode.NORMAL, Animate.interpolateMap = new Map();
-class SubAnimate {
-  get totalDuration() {
-    return this.calcAttr(), this._totalDuration + this._startAt;
-  }
-  constructor(animate, lastSubAnimate) {
-    this.rawPosition = -1, this.position = 0, this.loop = 0, this.duration = 0, this.animate = animate, this.stepHead = new Step(0, 0, lastSubAnimate ? Object.assign({}, lastSubAnimate.stepTail.props) : {}), this.stepTail = this.stepHead, this.dirty = !0, this._startAt = 0;
-  }
-  calcAttr() {
-    this.dirty && (this._totalDuration = this.duration * (this.loop + 1));
-  }
-  bind(target) {
-    return this.target = target, this;
-  }
-  play(customAnimate) {
-    let duration = customAnimate.duration;
-    (null == duration || duration < 0) && (duration = 0);
-    const easing = customAnimate.easing,
-      easingFunc = "string" == typeof easing ? Easing[easing] : easing,
-      step = this._addStep(duration, null, easingFunc);
-    return step.type = AnimateStepType.customAnimate, this._appendProps(customAnimate.getEndProps(), step, !1), this._appendCustomAnimate(customAnimate, step), this;
-  }
-  to(props, duration, easing, params) {
-    (null == duration || duration < 0) && (duration = 0);
-    const easingFunc = "string" == typeof easing ? Easing[easing] : easing,
-      step = this._addStep(duration, null, easingFunc);
-    return step.type = AnimateStepType.to, this._appendProps(props, step, !!params && params.tempProps), step.propKeys || (step.propKeys = Object.keys(step.props)), params && params.noPreventAttrs || this.target.animates && this.target.animates.forEach(a => {
-      a.id !== this.animate.id && a.preventAttrs(step.propKeys);
-    }), this;
-  }
-  from(props, duration, easing, params) {
-    this.to(props, 0, easing, params);
-    const toProps = {};
-    this.stepTail.propKeys || (this.stepTail.propKeys = Object.keys(this.stepTail.props)), this.stepTail.propKeys.forEach(k => {
-      toProps[k] = this.getLastPropByName(k, this.stepTail);
-    }), this.to(toProps, duration, easing, params), this.stepTail.type = AnimateStepType.from;
-  }
-  startAt(t) {
-    return t < 0 && (t = 0), this._startAt = t, this;
-  }
-  getStartProps() {
-    var _a;
-    return null === (_a = this.stepHead) || void 0 === _a ? void 0 : _a.props;
-  }
-  getEndProps() {
-    return this.stepTail.props;
-  }
-  getLastStep() {
-    return this._lastStep;
-  }
-  wait(duration) {
-    if (duration > 0) {
-      const step = this._addStep(+duration, null);
-      step.type = AnimateStepType.wait, step.prev.customAnimate ? step.props = step.prev.customAnimate.getEndProps() : step.props = step.prev.props, this.target.onAddStep && this.target.onAddStep(step);
-    }
-    return this;
-  }
-  _addStep(duration, props, easingFunc) {
-    const step = new Step(this.duration, duration, props, easingFunc);
-    return this.duration += duration, this.stepTail.append(step), this.stepTail = step, step;
-  }
-  _appendProps(props, step, tempProps) {
-    step.props = tempProps ? props : Object.assign({}, props);
-    let lastStep = step.prev;
-    const _props = step.props;
-    for (step.propKeys || (step.propKeys = Object.keys(step.props)), step.propKeys.forEach(k => {
-      void 0 === step.props[k] && (step.props[k] = this.target.getDefaultAttribute(k));
-    }); lastStep.prev;) lastStep.props && (lastStep.propKeys || (lastStep.propKeys = Object.keys(lastStep.props)), lastStep.propKeys.forEach(key => {
-      void 0 === _props[key] && (_props[key] = lastStep.props[key]);
-    })), step.propKeys = Object.keys(step.props), lastStep = lastStep.prev;
-    const initProps = this.stepHead.props;
-    step.propKeys || (step.propKeys = Object.keys(_props)), step.propKeys.forEach(key => {
-      if (void 0 === initProps[key]) {
-        const parentAnimateInitProps = this.animate.getStartProps();
-        initProps[key] = parentAnimateInitProps[key] = this.target.getComputedAttribute(key);
-      }
-    }), this.target.onAddStep && this.target.onAddStep(step);
-  }
-  _appendCustomAnimate(customAnimate, step) {
-    step.customAnimate = customAnimate, customAnimate.step = step, customAnimate.bind(this.target, this);
-  }
-  setPosition(rawPosition) {
-    var _a;
-    const d = this.duration,
-      loopCount = this.loop,
-      prevRawPos = this.rawPosition;
-    let loop,
-      position,
-      end = !1;
-    const startAt = null !== (_a = this._startAt) && void 0 !== _a ? _a : 0;
-    if (rawPosition < 0 && (rawPosition = 0), rawPosition < startAt) return this.rawPosition = rawPosition, !1;
-    if (rawPosition -= startAt, d <= 0 && (end = !0, d < 0)) return end;
-    if (loop = Math.floor(rawPosition / d), position = rawPosition - loop * d, end = rawPosition >= loopCount * d + d, end && (position = d, loop = loopCount, rawPosition = position * loop + d), rawPosition === prevRawPos) return end;
-    const rev = !this.reversed != !(this.bounce && loop % 2);
-    return rev && (position = d - position), this._deltaPosition = position - this.position, this.position = position, this.rawPosition = rawPosition + startAt, this.updatePosition(end, rev), end;
-  }
-  updatePosition(end, rev) {
-    if (!this.stepHead) return;
-    let step = this.stepHead.next;
-    const position = this.position,
-      duration = this.duration;
-    if (this.target && step) {
-      let stepNext = step.next;
-      for (; stepNext && stepNext.position <= position;) step = stepNext, stepNext = step.next;
-      let ratio = end ? 0 === duration ? 1 : position / duration : (position - step.position) / step.duration;
-      step.easing && (ratio = step.easing(ratio)), this.tryCallCustomAnimateLifeCycle(step, this._lastStep || (rev ? this.stepTail : this.stepHead), rev), this.updateTarget(step, ratio, end), this._lastStep = step, this.animate._onFrame && this.animate._onFrame.forEach(cb => cb(step, ratio));
-    }
-  }
-  tryCallCustomAnimateLifeCycle(step, lastStep, rev) {
-    if (step !== lastStep) if (rev) {
-      let _step = lastStep.prev;
-      for (; _step && _step !== step;) _step.customAnimate && (_step.customAnimate.onStart && _step.customAnimate.onStart(), _step.customAnimate.onEnd && _step.customAnimate.onEnd()), _step = step.prev;
-      lastStep && lastStep.customAnimate && lastStep.customAnimate.onEnd && lastStep.customAnimate.onEnd(), step && step.customAnimate && step.customAnimate.onStart && step.customAnimate.onStart();
-    } else {
-      let _step = lastStep.next;
-      for (; _step && _step !== step;) _step.customAnimate && (_step.customAnimate.onStart && _step.customAnimate.onStart(), _step.customAnimate.onEnd && _step.customAnimate.onEnd()), _step = _step.next;
-      lastStep && lastStep.customAnimate && lastStep.customAnimate.onEnd && lastStep.customAnimate.onEnd(), step && step.customAnimate && step.customAnimate.onStart && step.customAnimate.onStart();
-    }
-  }
-  getLastPropByName(name, step) {
-    let lastStep = step.prev;
-    for (; lastStep;) {
-      if (lastStep.props && void 0 !== lastStep.props[name]) return lastStep.props[name];
-      if (lastStep.customAnimate) {
-        const val = lastStep.customAnimate.getEndProps()[name];
-        if (void 0 !== val) return val;
-      }
-      lastStep = lastStep.prev;
-    }
-    return Logger.getInstance().warn("未知错误，step中找不到属性"), step.props[name];
-  }
-  updateTarget(step, ratio, end) {
-    null == step.props && null == step.customAnimate || this.target.onStep(this, this.animate, step, ratio, end);
-  }
-}
-class Step {
-  constructor(position, duration, props, easing) {
-    this.duration = duration, this.position = position, this.props = props, this.easing = easing;
-  }
-  append(step) {
-    step.prev = this, step.next = this.next, this.next = step;
-  }
-  getLastProps() {
-    let step = this.prev;
-    for (; step;) {
-      if (step.props) return step.props;
-      if (step.customAnimate) return step.customAnimate.getMergedEndProps();
-      step = step.prev;
-    }
-    return null;
-  }
-}
-
-const DefaultStateAnimateConfig = {
-  duration: 200,
-  easing: "cubicOut"
-};
-
-var Edge;
-!function (Edge) {
-  Edge[Edge.Top = 1] = "Top", Edge[Edge.Right = 2] = "Right", Edge[Edge.Bottom = 4] = "Bottom", Edge[Edge.Left = 8] = "Left", Edge[Edge.ALL = 15] = "ALL";
-}(Edge || (Edge = {}));
-const _strokeVec4 = [!1, !1, !1, !1];
-const parseStroke = stroke => {
-  var _a;
-  let isFullStroke = !0;
-  if (isBoolean(stroke, !0)) {
-    for (let i = 0; i < 4; i++) _strokeVec4[i] = stroke, isFullStroke && (isFullStroke = !(null !== (_a = _strokeVec4[i]) && void 0 !== _a && !_a));
-    isFullStroke = stroke;
-  } else if (Array.isArray(stroke)) for (let i = 0; i < 4; i++) _strokeVec4[i] = !!stroke[i], isFullStroke && (isFullStroke = !!_strokeVec4[i]);else _strokeVec4[0] = !1, _strokeVec4[1] = !1, _strokeVec4[2] = !1, _strokeVec4[3] = !1;
-  return {
-    isFullStroke: isFullStroke,
-    stroke: _strokeVec4
-  };
-};
-const _paddingVec4 = [0, 0, 0, 0];
-const parsePadding = padding => padding ? isArray(padding) ? 0 === padding.length ? 0 : 1 === padding.length ? padding[0] : 2 === padding.length ? (_paddingVec4[0] = padding[0], _paddingVec4[2] = padding[0], _paddingVec4[1] = padding[1], _paddingVec4[3] = padding[1], _paddingVec4) : padding : padding : 0;
-const _coords = [{
-    x: 0,
-    y: 0
-  }, {
-    x: 0,
-    y: 0
-  }, {
-    x: 0,
-    y: 0
-  }, {
-    x: 0,
-    y: 0
-  }],
-  indexList = [1, 2, 3, 0, 1, 2, 3, 0];
-function circleBounds(startAngle, endAngle, radius, bounds) {
-  for (; startAngle >= pi2;) startAngle -= pi2;
-  for (; startAngle < 0;) startAngle += pi2;
-  for (; startAngle > endAngle;) endAngle += pi2;
-  _coords[0].x = radius, _coords[1].y = radius, _coords[2].x = -radius, _coords[3].y = -radius;
-  const startIdx = Math.ceil(startAngle / halfPi$1) % 4,
-    endIdx = Math.ceil(endAngle / halfPi$1) % 4;
-  if (bounds.add(cos(startAngle) * radius, sin(startAngle) * radius), bounds.add(cos(endAngle) * radius, sin(endAngle) * radius), startIdx !== endIdx || endAngle - startAngle > pi) {
-    let match = !1;
-    for (let i = 0; i < indexList.length; i++) if (match || startIdx !== indexList[i]) {
-      if (match && endIdx === indexList[i]) break;
-      if (match) {
-        const p = _coords[indexList[i]];
-        bounds.add(p.x, p.y);
-      }
-    } else {
-      match = !0;
-      const p = _coords[startIdx];
-      bounds.add(p.x, p.y);
-    }
-  }
-}
-function pointInterpolation(pointA, pointB, ratio) {
-  const {
-      x: x,
-      y: y
-    } = pointAt(pointA.x, pointA.y, pointB.x, pointB.y, ratio),
-    {
-      x: x1,
-      y: y1
-    } = pointAt(pointA.x1, pointA.y1, pointB.x1, pointB.y1, ratio),
-    point = new Point(x, y, x1, y1);
-  return point.defined = pointB.defined, point;
-}
-function pointsInterpolation(pointsA, pointsB, ratio) {
-  if (!pointsA || !pointsB) return [];
-  Array.isArray(pointsA) || (pointsA = [pointsA]), Array.isArray(pointsB) || (pointsB = [pointsB]);
-  let points = [];
-  if (pointsA.length > pointsB.length) {
-    points = pointsB.map(point => {
-      const p = new Point(point.x, point.y, point.x1, point.y1);
-      return p.defined = point.defined, p;
-    });
-    for (let i = 0; i < pointsB.length; i++) points[i] = pointInterpolation(pointsA[i], pointsB[i], ratio);
-  } else {
-    points = pointsB.map(point => {
-      const p = new Point(point.x, point.y, point.x1, point.y1);
-      return p.defined = point.defined, p;
-    });
-    for (let i = 0; i < pointsA.length; i++) points[i] = pointInterpolation(pointsA[i], pointsB[i], ratio);
-  }
-  return points;
-}
-function getAttributeFromDefaultAttrList(attr, key) {
-  if (isArray(attr)) {
-    let val;
-    for (let i = 0; i < attr.length && void 0 === val; i++) val = attr[i][key];
-    return val;
-  }
-  return attr[key];
-}
-const _calculateLineHeight = (lineHeight, fontSize) => {
-  if (isString(lineHeight) && "%" === lineHeight[lineHeight.length - 1]) {
-    return fontSize * (Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100);
-  }
-  return lineHeight;
-};
-const calculateLineHeight = (lineHeight, fontSize) => {
-  const _lh = _calculateLineHeight(lineHeight, fontSize);
-  return isNaN(_lh) ? _lh : Math.max(fontSize, _lh);
-};
-
-class IncreaseCount extends ACustomAnimate {
-  constructor(from, to, duration, easing, params) {
-    super(from, to, duration, easing, params);
-  }
-  getEndProps() {
-    return !1 === this.valid ? {} : {
-      text: this.to
-    };
-  }
-  onBind() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    this.fromNumber = isNumber(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
-  }
-  onEnd() {}
-  onUpdate(end, ratio, out) {
-    var _a;
-    !1 !== this.valid && (out.text = end ? null === (_a = this.to) || void 0 === _a ? void 0 : _a.text : (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(this.decimalLength));
-  }
-}
-var Direction;
-!function (Direction) {
-  Direction[Direction.LEFT_TO_RIGHT = 0] = "LEFT_TO_RIGHT", Direction[Direction.RIGHT_TO_LEFT = 1] = "RIGHT_TO_LEFT", Direction[Direction.TOP_TO_BOTTOM = 2] = "TOP_TO_BOTTOM", Direction[Direction.BOTTOM_TO_TOP = 3] = "BOTTOM_TO_TOP", Direction[Direction.STROKE = 4] = "STROKE";
-}(Direction || (Direction = {}));
-class InputText extends ACustomAnimate {
-  constructor() {
-    super(...arguments), this.fromText = "", this.toText = "";
-  }
-  getEndProps() {
-    return !1 === this.valid ? {} : {
-      text: this.to
-    };
-  }
-  onBind() {
-    var _a, _b, _c;
-    this.fromText = null !== (_b = null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) && void 0 !== _b ? _b : "", this.toText = (null === (_c = this.to) || void 0 === _c ? void 0 : _c.text) || "", (!this.toText || isArray(this.toText) && 0 === this.toText.length) && (this.valid = !1), isArray(this.toText) && (this.toText = this.toText.map(item => (item || "").toString()));
-  }
-  onEnd() {
-    this.target.detachShadow();
-  }
-  onUpdate(end, ratio, out) {
-    if (!1 === this.valid) return;
-    const fromCount = this.fromText.length,
-      toTextIsArray = isArray(this.toText),
-      toCount = toTextIsArray ? this.toText.reduce((c, t) => c + (t || "").length, 0) : this.toText.length,
-      count = Math.ceil(fromCount + (toCount - fromCount) * ratio);
-    if (toTextIsArray) {
-      out.text = [];
-      let len = 0;
-      this.toText.forEach(t => {
-        len + t.length > count ? (out.text.push(t.substr(0, count - len)), len = count) : (out.text.push(t), len += t.length);
-      });
-    } else out.text = this.toText.substr(0, count);
-  }
-}
-
-const normalizeRectAttributes = attribute => {
-  if (!attribute) return {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  };
-  let width = isNil(attribute.width) ? attribute.x1 - attribute.x : attribute.width,
-    height = isNil(attribute.height) ? attribute.y1 - attribute.y : attribute.height,
-    x = 0,
-    y = 0;
-  return width < 0 ? (x = width, width = -width) : Number.isNaN(width) && (width = 0), height < 0 ? (y = height, height = -height) : Number.isNaN(height) && (height = 0), {
-    x: x,
-    y: y,
-    width: width,
-    height: height
-  };
-};
-
-var ColorType;
-!function (ColorType) {
-  ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
-}(ColorType || (ColorType = {}));
-class ColorStore {
-  static Get(str) {
-    let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorType.Color1;
-    let arr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 0, 1];
-    if (size === ColorType.Color1) {
-      const color = ColorStore.store1[str];
-      if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
-      const c = Color.parseColorString(str);
-      if (c) {
-        const data = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
-        ColorStore.store1[str] = data, ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = data[0], arr[1] = data[1], arr[2] = data[2], arr[3] = data[3];
-      }
-      return arr;
-    }
-    const color = ColorStore.store255[str];
-    if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
-    const c = Color.parseColorString(str);
-    return c && (ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity], ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = c.r, arr[1] = c.g, arr[2] = c.b, arr[3] = c.opacity), arr;
-  }
-  static Set(str, size, arr) {
-    if (size === ColorType.Color1) {
-      if (ColorStore.store1[str]) return;
-      ColorStore.store1[str] = arr, ColorStore.store255[str] = [Math.floor(255 * arr[0]), Math.floor(255 * arr[1]), Math.floor(255 * arr[2]), Math.floor(255 * arr[3])];
-    } else {
-      if (ColorStore.store255[str]) return;
-      ColorStore.store255[str] = arr, ColorStore.store1[str] = [arr[0] / 255, arr[1] / 255, arr[2] / 255, arr[3]];
-    }
-  }
-}
-ColorStore.store255 = {}, ColorStore.store1 = {};
-
-function colorArrayToString(color) {
-  let alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-  return Array.isArray(color) && isNumber(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
-}
-function interpolateColor(from, to, ratio, alphaChannel, cb) {
-  if (Array.isArray(from) && !isNumber(from[0]) || Array.isArray(to) && !isNumber(to[0])) {
-    return new Array(4).fill(0).map((_, index) => _interpolateColor(isArray(from) ? from[index] : from, isArray(to) ? to[index] : to, ratio, alphaChannel));
-  }
-  return _interpolateColor(from, to, ratio, alphaChannel, cb);
-}
-function _interpolateColor(from, to, ratio, alphaChannel, cb) {
-  if (!from || !to) return from && colorArrayToString(from) || to && colorArrayToString(to) || !1;
-  let fromArray,
-    toArray,
-    fromGradient = !1,
-    toGradient = !1;
-  if (Array.isArray(from) ? fromArray = from : "string" == typeof from ? fromArray = ColorStore.Get(from, ColorType.Color255) : fromGradient = !0, Array.isArray(to) ? toArray = to : "string" == typeof to ? toArray = ColorStore.Get(to, ColorType.Color255) : toGradient = !0, fromGradient !== toGradient) {
-    const gradient = fromGradient ? from : to,
-      pure = fromGradient ? to : from,
-      gradientFromPure = Object.assign(Object.assign({}, gradient), {
-        stops: gradient.stops.map(v => Object.assign(Object.assign({}, v), {
-          color: colorArrayToString(pure)
-        }))
-      });
-    return fromGradient ? interpolateColor(gradient, gradientFromPure, ratio, alphaChannel, cb) : interpolateColor(gradientFromPure, gradient, ratio, alphaChannel, cb);
-  }
-  if (fromGradient) {
-    if (from.gradient === to.gradient) {
-      const fc = from,
-        tc = to,
-        fromStops = fc.stops,
-        toStops = tc.stops;
-      if (fromStops.length !== toStops.length) return !1;
-      if ("linear" === fc.gradient) return interpolateGradientLinearColor(fc, tc, ratio);
-      if ("radial" === fc.gradient) return interpolateGradientRadialColor(fc, tc, ratio);
-      if ("conical" === fc.gradient) return interpolateGradientConicalColor(fc, tc, ratio);
-    }
-    return !1;
-  }
-  cb && cb(fromArray, toArray);
-  return colorArrayToString(interpolatePureColorArray(fromArray, toArray, ratio), alphaChannel);
-}
-function interpolateGradientLinearColor(fc, tc, ratio) {
-  const fStops = fc.stops,
-    tStops = tc.stops;
-  return {
-    gradient: "linear",
-    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
-    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
-    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
-    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
-    stops: new Array(fStops.length).fill(0).map((_, i) => ({
-      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
-      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
-    }))
-  };
+function interpolateGradientLinearColor(fc, tc, ratio) {
+  const fStops = fc.stops,
+    tStops = tc.stops;
+  return {
+    gradient: "linear",
+    x0: fc.x0 + (tc.x0 - fc.x0) * ratio,
+    x1: fc.x1 + (tc.x1 - fc.x1) * ratio,
+    y0: fc.y0 + (tc.y0 - fc.y0) * ratio,
+    y1: fc.y1 + (tc.y1 - fc.y1) * ratio,
+    stops: new Array(fStops.length).fill(0).map((_, i) => ({
+      color: colorStringInterpolationToStr(fStops[i].color, tStops[i].color, ratio),
+      offset: fStops[i].offset + (tStops[i].offset - fStops[i].offset) * ratio
+    }))
+  };
 }
 function interpolateGradientRadialColor(fc, tc, ratio) {
   const fStops = fc.stops,
@@ -5043,6 +4368,9 @@ function interpolateGradientConicalColor(fc, tc, ratio) {
 function interpolatePureColorArray(from, to, ratio) {
   return [from[0] + (to[0] - from[0]) * ratio, from[1] + (to[1] - from[1]) * ratio, from[2] + (to[2] - from[2]) * ratio, from[3] + (to[3] - from[3]) * ratio];
 }
+function interpolatePureColorArrayToStr(from, to, ratio) {
+  return `rgba(${from[0] + (to[0] - from[0]) * ratio},${from[1] + (to[1] - from[1]) * ratio},${from[2] + (to[2] - from[2]) * ratio},${from[3] + (to[3] - from[3]) * ratio})`;
+}
 const _fromColorRGB = [0, 0, 0, 0],
   _toColorRGB = [0, 0, 0, 0];
 function colorStringInterpolationToStr(fromColor, toColor, ratio) {
@@ -5137,6 +4465,111 @@ function getIndex(url, arr) {
 }
 ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [], ResourceLoader.onLoadSuccessCb = [];
 
+var Edge;
+!function (Edge) {
+  Edge[Edge.Top = 1] = "Top", Edge[Edge.Right = 2] = "Right", Edge[Edge.Bottom = 4] = "Bottom", Edge[Edge.Left = 8] = "Left", Edge[Edge.ALL = 15] = "ALL";
+}(Edge || (Edge = {}));
+const _strokeVec4 = [!1, !1, !1, !1];
+const parseStroke = stroke => {
+  var _a;
+  let isFullStroke = !0;
+  if (isBoolean(stroke, !0)) {
+    for (let i = 0; i < 4; i++) _strokeVec4[i] = stroke, isFullStroke && (isFullStroke = !(null !== (_a = _strokeVec4[i]) && void 0 !== _a && !_a));
+    isFullStroke = stroke;
+  } else if (Array.isArray(stroke)) for (let i = 0; i < 4; i++) _strokeVec4[i] = !!stroke[i], isFullStroke && (isFullStroke = !!_strokeVec4[i]);else _strokeVec4[0] = !1, _strokeVec4[1] = !1, _strokeVec4[2] = !1, _strokeVec4[3] = !1;
+  return {
+    isFullStroke: isFullStroke,
+    stroke: _strokeVec4
+  };
+};
+const _paddingVec4 = [0, 0, 0, 0];
+const parsePadding = padding => padding ? isArray(padding) ? 0 === padding.length ? 0 : 1 === padding.length ? padding[0] : 2 === padding.length ? (_paddingVec4[0] = padding[0], _paddingVec4[2] = padding[0], _paddingVec4[1] = padding[1], _paddingVec4[3] = padding[1], _paddingVec4) : padding : padding : 0;
+const _coords = [{
+    x: 0,
+    y: 0
+  }, {
+    x: 0,
+    y: 0
+  }, {
+    x: 0,
+    y: 0
+  }, {
+    x: 0,
+    y: 0
+  }],
+  indexList = [1, 2, 3, 0, 1, 2, 3, 0];
+function circleBounds(startAngle, endAngle, radius, bounds) {
+  for (; startAngle >= pi2;) startAngle -= pi2;
+  for (; startAngle < 0;) startAngle += pi2;
+  for (; startAngle > endAngle;) endAngle += pi2;
+  _coords[0].x = radius, _coords[1].y = radius, _coords[2].x = -radius, _coords[3].y = -radius;
+  const startIdx = Math.ceil(startAngle / halfPi$1) % 4,
+    endIdx = Math.ceil(endAngle / halfPi$1) % 4;
+  if (bounds.add(cos(startAngle) * radius, sin(startAngle) * radius), bounds.add(cos(endAngle) * radius, sin(endAngle) * radius), startIdx !== endIdx || endAngle - startAngle > pi) {
+    let match = !1;
+    for (let i = 0; i < indexList.length; i++) if (match || startIdx !== indexList[i]) {
+      if (match && endIdx === indexList[i]) break;
+      if (match) {
+        const p = _coords[indexList[i]];
+        bounds.add(p.x, p.y);
+      }
+    } else {
+      match = !0;
+      const p = _coords[startIdx];
+      bounds.add(p.x, p.y);
+    }
+  }
+}
+function pointInterpolation(pointA, pointB, ratio) {
+  const {
+      x: x,
+      y: y
+    } = pointAt(pointA.x, pointA.y, pointB.x, pointB.y, ratio),
+    {
+      x: x1,
+      y: y1
+    } = pointAt(pointA.x1, pointA.y1, pointB.x1, pointB.y1, ratio),
+    point = new Point(x, y, x1, y1);
+  return point.defined = pointB.defined, point;
+}
+function pointsInterpolation(pointsA, pointsB, ratio) {
+  if (!pointsA || !pointsB) return [];
+  Array.isArray(pointsA) || (pointsA = [pointsA]), Array.isArray(pointsB) || (pointsB = [pointsB]);
+  let points = [];
+  if (pointsA.length > pointsB.length) {
+    points = pointsB.map(point => {
+      const p = new Point(point.x, point.y, point.x1, point.y1);
+      return p.defined = point.defined, p;
+    });
+    for (let i = 0; i < pointsB.length; i++) points[i] = pointInterpolation(pointsA[i], pointsB[i], ratio);
+  } else {
+    points = pointsB.map(point => {
+      const p = new Point(point.x, point.y, point.x1, point.y1);
+      return p.defined = point.defined, p;
+    });
+    for (let i = 0; i < pointsA.length; i++) points[i] = pointInterpolation(pointsA[i], pointsB[i], ratio);
+  }
+  return points;
+}
+function getAttributeFromDefaultAttrList(attr, key) {
+  if (isArray(attr)) {
+    let val;
+    for (let i = 0; i < attr.length && void 0 === val; i++) val = attr[i][key];
+    return val;
+  }
+  return attr[key];
+}
+const _calculateLineHeight = (lineHeight, fontSize) => {
+  if (isString(lineHeight) && "%" === lineHeight[lineHeight.length - 1]) {
+    return fontSize * (Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100);
+  }
+  return lineHeight;
+};
+const calculateLineHeight = (lineHeight, fontSize) => {
+  const _lh = _calculateLineHeight(lineHeight, fontSize);
+  return isNaN(_lh) ? _lh : Math.max(fontSize, _lh);
+};
+
 class BaseSymbol {
   bounds(size, bounds) {
     if (isNumber(size)) {
@@ -5945,6 +5378,11 @@ const SVG_PARSE_ATTRIBUTE_MAP = {
 };
 const SVG_PARSE_ATTRIBUTE_MAP_KEYS = Object.keys(SVG_PARSE_ATTRIBUTE_MAP);
 
+const DefaultStateAnimateConfig = {
+  duration: 200,
+  easing: "cubicOut"
+};
+
 const _tempBounds = new AABBBounds(),
   tempMatrix = new Matrix(),
   tempBounds = new AABBBounds();
@@ -6011,6 +5449,9 @@ class Graphic extends Node {
     var _a;
     super(), this._AABBBounds = new AABBBounds(), this._updateTag = UpdateTag.INIT, this.attribute = params, this.valid = this.isValid(), this.updateAABBBoundsStamp = 0, params.background ? this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic);
   }
+  getAttributes() {
+    return this.attribute;
+  }
   setMode(mode) {
     "3d" === mode ? this.set3dMode() : this.set2dMode();
   }
@@ -6317,23 +5758,6 @@ class Graphic extends Node {
   skewTo(b, c) {
     return this;
   }
-  animate(params) {
-    var _a;
-    this.animates || (this.animates = new Map());
-    const animate = new Animate(null == params ? void 0 : params.id, null !== (_a = null == params ? void 0 : params.timeline) && void 0 !== _a ? _a : this.stage && this.stage.getTimeline(), null == params ? void 0 : params.slience);
-    if (animate.bind(this), params) {
-      const {
-        onStart: onStart,
-        onFrame: onFrame,
-        onEnd: onEnd,
-        onRemove: onRemove
-      } = params;
-      null != onStart && animate.onStart(onStart), null != onFrame && animate.onFrame(onFrame), null != onEnd && animate.onEnd(onEnd), null != onRemove && animate.onRemove(onRemove), animate.interpolateFunc = params.interpolate;
-    }
-    return this.animates.set(animate.id, animate), animate.onRemove(() => {
-      animate.stop(), this.animates.delete(animate.id);
-    }), animate;
-  }
   onAttributeUpdate(context) {
     context && context.skipUpdateCallback || (application.graphicService.onAttributeUpdate(this), this._emitCustomEvent("afterAttributeUpdate", context));
   }
@@ -6348,7 +5772,7 @@ class Graphic extends Node {
     return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
   }
   applyStateAttrs(attrs, stateNames, hasAnimation, isClear) {
-    var _a, _b, _c, _d;
+    var _a, _b;
     if (hasAnimation) {
       const keys = Object.keys(attrs),
         noWorkAttrs = this.getNoWorkAnimateAttr(),
@@ -6357,10 +5781,16 @@ class Graphic extends Node {
       keys.forEach(key => {
         noWorkAttrs[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = isClear && void 0 === attrs[key] ? this.getDefaultAttribute(key) : attrs[key];
       });
-      const animate = this.animate({
-        slience: !0
-      });
-      animate.stateNames = stateNames, animate.to(animateAttrs, null !== (_b = null === (_a = this.stateAnimateConfig) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : DefaultStateAnimateConfig.duration, null !== (_d = null === (_c = this.stateAnimateConfig) || void 0 === _c ? void 0 : _c.easing) && void 0 !== _d ? _d : DefaultStateAnimateConfig.easing), noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
+      const stateAnimateConfig = null !== (_b = null !== (_a = this.context.stateAnimateConfig) && void 0 !== _a ? _a : this.stateAnimateConfig) && void 0 !== _b ? _b : DefaultStateAnimateConfig;
+      this.applyAnimationState(["state"], [{
+        name: "state",
+        animation: {
+          type: "state",
+          to: animateAttrs,
+          duration: stateAnimateConfig.duration,
+          easing: stateAnimateConfig.easing
+        }
+      }]), noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
         type: AttributeUpdateType.STATE
       });
     } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
@@ -6536,7 +5966,7 @@ class Graphic extends Node {
       if (this.stage = stage, this.layer = layer, this.setStageToShadowRoot(stage, layer), this.animates && this.animates.size) {
         const timeline = stage.getTimeline();
         this.animates.forEach(a => {
-          a.timeline === defaultTimeline && a.setTimeline(timeline);
+          a.timeline.isGlobal && (a.setTimeline(timeline), timeline.addAnimate(a));
         });
       }
       this._onSetStage && this._onSetStage(this, stage, layer), application.graphicService.onSetStage(this, stage);
@@ -8606,6 +8036,25 @@ function createLine(attributes) {
   return new Line$1(attributes);
 }
 
+const normalizeRectAttributes = attribute => {
+  if (!attribute) return {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  };
+  let width = isNil(attribute.width) ? attribute.x1 - attribute.x : attribute.width,
+    height = isNil(attribute.height) ? attribute.y1 - attribute.y : attribute.height,
+    x = 0,
+    y = 0;
+  return width < 0 ? (x = width, width = -width) : Number.isNaN(width) && (width = 0), height < 0 ? (y = height, height = -height) : Number.isNaN(height) && (height = 0), {
+    x: x,
+    y: y,
+    width: width,
+    height: height
+  };
+};
+
 const RECT_UPDATE_TAG_KEY = ["width", "x1", "y1", "height", "cornerRadius", ...GRAPHIC_UPDATE_TAG_KEY];
 class Rect extends Graphic {
   constructor(params) {
@@ -10952,7 +10401,7 @@ class BaseRender {
     const p = context.project(x, y, z);
     context.translate(p.x, p.y, !1), context.scale(scaleX, scaleY, !1), context.rotate(angle, !1), context.translate(-p.x, -p.y, !1), context.setTransformForCurrent();
   }
-  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
+  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params, themeAttribute) {
     const {
       context: context
     } = drawContext;
@@ -10969,7 +10418,7 @@ class BaseRender {
         z: z,
         lastModelMatrix: lastModelMatrix
       } = data;
-    this.z = z, this.drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
+    this.z = z, this.drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params, null, null, themeAttribute), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
   }
 }
 
@@ -11054,9 +10503,9 @@ let DefaultCanvasArcRender = class extends BaseRender {
     } else context.lineTo(cx + innerRadius * cos(innerStartAngle), cy + innerRadius * sin(innerStartAngle));
     return collapsedToLine;
   }
-  drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
-    const arcAttribute = getTheme(arc, null == params ? void 0 : params.theme).arc,
-      {
+  drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb, arcAttribute) {
+    arcAttribute = null != arcAttribute ? arcAttribute : getTheme(arc, null == params ? void 0 : params.theme).arc;
+    const {
         fill = arcAttribute.fill,
         stroke = arcAttribute.stroke,
         x: originX = arcAttribute.x,
@@ -11097,17 +10546,7 @@ let DefaultCanvasArcRender = class extends BaseRender {
       isFullStroke: isFullStroke,
       stroke: arrayStroke
     } = parseStroke(stroke);
-    if (doFill || isFullStroke) {
-      context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
-      const _runFill = () => {
-          doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
-        },
-        _runStroke = () => {
-          doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()));
-        };
-      fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
-    }
-    if (!isFullStroke && doStroke) {
+    if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), fillStrokeOrder ? (this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb), this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb)) : (this._runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb), this._runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb))), !isFullStroke && doStroke) {
       context.beginPath();
       drawArcPath(arc, context, x, y, outerRadius, innerRadius, arrayStroke);
       beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
@@ -11143,9 +10582,15 @@ let DefaultCanvasArcRender = class extends BaseRender {
     }
     this.afterRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), tempChangeConicalColor && (fill.startAngle += conicalOffset, fill.endAngle += conicalOffset);
   }
+  _runFill(arc, context, x, y, arcAttribute, doFill, fVisible, originX, originY, fillCb) {
+    doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
+  }
+  _runStroke(arc, context, x, y, arcAttribute, doStroke, sVisible, strokeCb) {
+    doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+  }
   draw(arc, renderService, drawContext, params) {
     const arcAttribute = getTheme(arc, null == params ? void 0 : params.theme).arc;
-    this._draw(arc, arcAttribute, !1, drawContext, params);
+    this._draw(arc, arcAttribute, !1, drawContext, params, arcAttribute);
   }
 };
 DefaultCanvasArcRender = __decorate$G([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(ArcRenderContribution)), __metadata$z("design:paramtypes", [Object])], DefaultCanvasArcRender);
@@ -11266,7 +10711,7 @@ function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
   }
   if (percent <= 0) return;
   let direction;
-  "x" === clipRangeByDimension ? direction = Direction$1.ROW : "y" === clipRangeByDimension ? direction = Direction$1.COLUMN : "auto" === clipRangeByDimension && (direction = segPath.direction);
+  "x" === clipRangeByDimension ? direction = Direction.ROW : "y" === clipRangeByDimension ? direction = Direction.COLUMN : "auto" === clipRangeByDimension && (direction = segPath.direction);
   const totalDrawLength = percent * segPath.tryUpdateLength(direction);
   let drawedLengthUntilLast = 0,
     defined0 = !0,
@@ -11499,8 +10944,8 @@ function drawAreaSegments(path, segPath, percent, params) {
     endP = null !== (_a = topCurves[topCurves.length - 1].p3) && void 0 !== _a ? _a : topCurves[topCurves.length - 1].p1,
     xTotalLength = abs(endP.x - topCurves[0].p0.x),
     yTotalLength = abs(endP.y - topCurves[0].p0.y);
-  direction = null != direction ? direction : xTotalLength > yTotalLength ? Direction$1.ROW : Direction$1.COLUMN, Number.isFinite(xTotalLength) || (direction = Direction$1.COLUMN), Number.isFinite(yTotalLength) || (direction = Direction$1.ROW);
-  const totalDrawLength = percent * (direction === Direction$1.ROW ? xTotalLength : yTotalLength);
+  direction = null != direction ? direction : xTotalLength > yTotalLength ? Direction.ROW : Direction.COLUMN, Number.isFinite(xTotalLength) || (direction = Direction.COLUMN), Number.isFinite(yTotalLength) || (direction = Direction.ROW);
+  const totalDrawLength = percent * (direction === Direction.ROW ? xTotalLength : yTotalLength);
   let drawedLengthUntilLast = 0,
     lastDefined = !0;
   const topList = [],
@@ -11741,14 +11186,14 @@ let DefaultCanvasAreaRender = class extends BaseRender {
     } = area.attribute;
     let endP,
       startP,
-      direction = Direction$1.ROW;
+      direction = Direction.ROW;
     if (segments) {
       const endSeg = segments[segments.length - 1];
       startP = segments[0].points[0], endP = endSeg.points[endSeg.points.length - 1];
     } else startP = points[0], endP = points[points.length - 1];
     const xTotalLength = abs(endP.x - startP.x),
       yTotalLength = abs(endP.y - startP.y);
-    direction = null == endP.x1 ? Direction$1.ROW : null == endP.y1 ? Direction$1.COLUMN : Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction$1.ROW : Direction$1.COLUMN : Direction$1.ROW, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
+    direction = null == endP.x1 ? Direction.ROW : null == endP.y1 ? Direction.COLUMN : Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction.ROW : Direction.COLUMN : Direction.ROW, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
       offsetX: offsetX,
       offsetY: offsetY,
       offsetZ: offsetZ,
@@ -11767,7 +11212,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
         const {
           stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
         } = attribute;
-        isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? "x" : "y", {
+        isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction.ROW ? "x" : "y", {
           offsetX: offsetX,
           offsetY: offsetY,
           offsetZ: offsetZ
@@ -11856,26 +11301,25 @@ let DefaultCanvasRectRender = class extends BaseRender {
   constructor(rectRenderContribitions) {
     super(), this.rectRenderContribitions = rectRenderContribitions, this.type = "rect", this.numberType = RECT_NUMBER_TYPE, this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution], this.init(rectRenderContribitions);
   }
-  drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-    var _a;
-    const rectAttribute = null !== (_a = this.tempTheme) && void 0 !== _a ? _a : getTheme(rect, null == params ? void 0 : params.theme).rect,
-      {
-        fill = rectAttribute.fill,
-        background: background,
-        stroke = rectAttribute.stroke,
-        cornerRadius = rectAttribute.cornerRadius,
-        cornerType = rectAttribute.cornerType,
-        opacity = rectAttribute.opacity,
-        fillOpacity = rectAttribute.fillOpacity,
-        lineWidth = rectAttribute.lineWidth,
-        strokeOpacity = rectAttribute.strokeOpacity,
-        visible = rectAttribute.visible,
-        x1: x1,
-        y1: y1,
-        x: originX = rectAttribute.x,
-        y: originY = rectAttribute.y,
-        fillStrokeOrder = rectAttribute.fillStrokeOrder
-      } = rect.attribute;
+  drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb, rectAttribute) {
+    rectAttribute = null != rectAttribute ? rectAttribute : getTheme(rect, null == params ? void 0 : params.theme).rect;
+    const {
+      fill = rectAttribute.fill,
+      background: background,
+      stroke = rectAttribute.stroke,
+      cornerRadius = rectAttribute.cornerRadius,
+      cornerType = rectAttribute.cornerType,
+      opacity = rectAttribute.opacity,
+      fillOpacity = rectAttribute.fillOpacity,
+      lineWidth = rectAttribute.lineWidth,
+      strokeOpacity = rectAttribute.strokeOpacity,
+      visible = rectAttribute.visible,
+      x1: x1,
+      y1: y1,
+      x: originX = rectAttribute.x,
+      y: originY = rectAttribute.y,
+      fillStrokeOrder = rectAttribute.fillStrokeOrder
+    } = rect.attribute;
     let {
       width: width,
       height: height
@@ -11893,18 +11337,17 @@ let DefaultCanvasRectRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     };
-    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-    const _runFill = () => {
-        doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill()));
-      },
-      _runStroke = () => {
-        doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke()));
-      };
-    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke), fillStrokeOrder ? (this._runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb), this._runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb)) : (this._runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb), this._runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb)), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+  }
+  _runFill(rect, context, x, y, rectAttribute, doFillOrStroke, fVisible, originX, originY, fillCb) {
+    doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill()));
+  }
+  _runStroke(rect, context, x, y, rectAttribute, doFillOrStroke, sVisible, originX, originY, strokeCb) {
+    doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke()));
   }
   draw(rect, renderService, drawContext, params) {
     const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect;
-    this.tempTheme = rectAttribute, this._draw(rect, rectAttribute, !1, drawContext, params), this.tempTheme = null;
+    this._draw(rect, rectAttribute, !1, drawContext, params, rectAttribute);
   }
 };
 DefaultCanvasRectRender = __decorate$B([injectable(), __param$s(0, inject(ContributionProvider)), __param$s(0, named(RectRenderContribution)), __metadata$v("design:paramtypes", [Object])], DefaultCanvasRectRender);
@@ -11928,10 +11371,10 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
   constructor(symbolRenderContribitions) {
     super(), this.symbolRenderContribitions = symbolRenderContribitions, this.numberType = SYMBOL_NUMBER_TYPE, this.builtinContributions = [defaultSymbolRenderContribution, defaultSymbolBackgroundRenderContribution, defaultSymbolTextureRenderContribution, defaultSymbolClipRangeStrokeRenderContribution], this.init(symbolRenderContribitions);
   }
-  drawShape(symbol, context, x, y, drawContext, params, fillCb, strokeCb) {
+  drawShape(symbol, context, x, y, drawContext, params, fillCb, strokeCb, symbolAttribute) {
     var _a;
-    const symbolAttribute = getTheme(symbol, null == params ? void 0 : params.theme).symbol,
-      {
+    symbolAttribute = null != symbolAttribute ? symbolAttribute : getTheme(symbol, null == params ? void 0 : params.theme).symbol;
+    const {
         size = symbolAttribute.size,
         x: originX = symbolAttribute.x,
         y: originY = symbolAttribute.y,
@@ -11976,14 +11419,13 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
           a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && clipRange >= 1 && (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
         };
       fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
-    }) && context.closePath(), context.camera = camera, context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
-    const _runFill = () => {
-        doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill()));
-      },
-      _runStroke = () => {
-        doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && clipRange >= 1 && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
-      };
-    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+    }) && context.closePath(), context.camera = camera, context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), fillStrokeOrder ? (this._runStroke(symbol, context, x, y, symbolAttribute, doStroke, sVisible, originX, originY, parsedPath, clipRange, scaleX, scaleY, strokeCb), this._runFill(symbol, context, x, y, symbolAttribute, doFill, fVisible, originX, originY, parsedPath, fillCb)) : (this._runFill(symbol, context, x, y, symbolAttribute, doFill, fVisible, originX, originY, parsedPath, fillCb), this._runStroke(symbol, context, x, y, symbolAttribute, doStroke, sVisible, originX, originY, parsedPath, clipRange, scaleX, scaleY, strokeCb)), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+  }
+  _runFill(symbol, context, x, y, symbolAttribute, doFill, fVisible, originX, originY, parsedPath, fillCb) {
+    doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill()));
+  }
+  _runStroke(symbol, context, x, y, symbolAttribute, doStroke, sVisible, originX, originY, parsedPath, clipRange, scaleX, scaleY, strokeCb) {
+    doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && clipRange >= 1 && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
   }
   draw(symbol, renderService, drawContext, params) {
     const symbolAttribute = getTheme(symbol, null == params ? void 0 : params.theme).symbol;
@@ -12358,16 +11800,19 @@ let DefaultCanvasGroupRender = class {
   constructor(groupRenderContribitions) {
     this.groupRenderContribitions = groupRenderContribitions, this.numberType = GROUP_NUMBER_TYPE;
   }
-  drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb) {
-    const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
-      {
-        fill = groupAttribute.fill,
-        background: background,
-        stroke = groupAttribute.stroke,
+  drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb, groupAttribute) {
+    const {
+      clip: clip,
+      fill: fill,
+      stroke: stroke,
+      background: background
+    } = group.attribute;
+    if (!(clip || fill || stroke || background)) return;
+    groupAttribute = null != groupAttribute ? groupAttribute : getTheme(group, null == params ? void 0 : params.theme).group;
+    const {
         opacity = groupAttribute.opacity,
         width = groupAttribute.width,
         height = groupAttribute.height,
-        clip = groupAttribute.clip,
         fillOpacity = groupAttribute.fillOpacity,
         strokeOpacity = groupAttribute.strokeOpacity,
         cornerRadius = groupAttribute.cornerRadius,
@@ -12415,6 +11860,7 @@ let DefaultCanvasGroupRender = class {
     });
   }
   draw(group, renderService, drawContext, params) {
+    var _a;
     const {
       context: context
     } = drawContext;
@@ -12422,16 +11868,18 @@ let DefaultCanvasGroupRender = class {
     const {
         clip: clip,
         baseOpacity = 1,
-        drawMode: drawMode,
-        x: x,
-        y: y,
-        width: width,
-        height: height
+        drawMode: drawMode
       } = group.attribute,
       lastNativeContext = context.nativeContext,
       lastNativeCanvas = context.canvas.nativeCanvas;
     if (drawMode > 0) {
-      const canvas = context.canvas,
+      const {
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        } = group.attribute,
+        canvas = context.canvas,
         newCanvas = vglobal.createCanvas({
           width: canvas.width,
           height: canvas.height,
@@ -12444,21 +11892,27 @@ let DefaultCanvasGroupRender = class {
     clip ? context.save() : context.highPerformanceSave();
     const baseGlobalAlpha = context.baseGlobalAlpha;
     context.baseGlobalAlpha *= baseOpacity;
-    const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
-      lastModelMatrix = context.modelMatrix;
+    const lastModelMatrix = context.modelMatrix;
     if (context.camera) {
-      const nextModelMatrix = mat4Allocate.allocate(),
+      const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
+        nextModelMatrix = mat4Allocate.allocate(),
         modelMatrix = mat4Allocate.allocate();
       getModelMatrix(modelMatrix, group, groupAttribute), multiplyMat4Mat4(nextModelMatrix, lastModelMatrix || nextModelMatrix, modelMatrix), context.modelMatrix = nextModelMatrix, mat4Allocate.free(modelMatrix), context.setTransform(1, 0, 0, 1, 0, 0, !0);
     } else context.transformFromMatrix(group.transMatrix, !0);
-    context.beginPath(), params.skipDraw ? this.drawShape(group, context, 0, 0, drawContext, params, () => !1, () => !1) : this.drawShape(group, context, 0, 0, drawContext);
+    context.beginPath(), params.skipDraw ? this.drawShape(group, context, 0, 0, drawContext, params, () => !1, () => !1) : this.drawShape(group, context, 0, 0, drawContext, null, null, null);
     const {
-      scrollX = groupAttribute.scrollX,
-      scrollY = groupAttribute.scrollY
+      scrollX: scrollX,
+      scrollY: scrollY
     } = group.attribute;
     let p;
-    if ((scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.drawingCb && (p = params.drawingCb()), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.baseGlobalAlpha = baseGlobalAlpha, drawMode > 0) {
-      const newContext = context.nativeContext,
+    if ((scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.renderInGroup && (p = params.renderInGroup(params.skipDraw, group, drawContext, null === (_a = params.renderInGroupParams) || void 0 === _a ? void 0 : _a.nextM)), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.baseGlobalAlpha = baseGlobalAlpha, drawMode > 0) {
+      const {
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        } = group.attribute,
+        newContext = context.nativeContext,
         newCanvas = context.canvas.nativeCanvas;
       lastNativeContext.save(), lastNativeContext.setTransform(context.dpr, 0, 0, context.dpr, 0, 0, !0), 1 === drawMode && newContext.rect(x, y, width, height), lastNativeContext.drawImage(newCanvas, 0, 0, newCanvas.width, newCanvas.height, 0, 0, context.canvas.displayWidth, context.canvas.displayHeight);
       const transform = newContext.getTransform();
@@ -12671,6 +12125,7 @@ let CommonDrawItemInterceptorContribution = class {
     this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
   }
   afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+    if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
     for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
     return !1;
   }
@@ -13211,7 +12666,14 @@ var __decorate$q = undefined && undefined.__decorate || function (decorators, ta
   };
 let DefaultDrawContribution = class {
   constructor(contributions, drawItemInterceptorContributions) {
-    this.contributions = contributions, this.drawItemInterceptorContributions = drawItemInterceptorContributions, this.currentRenderMap = new Map(), this.defaultRenderMap = new Map(), this.styleRenderMap = new Map(), this.dirtyBounds = new Bounds(), this.backupDirtyBounds = new Bounds(), this.global = application.global, this.layerService = application.layerService, isArray(this.contributions) || (this.contributions = [this.contributions]), this.init();
+    this.contributions = contributions, this.drawItemInterceptorContributions = drawItemInterceptorContributions, this._renderInGroup = (skipSort, group, drawContext, nextM) => {
+      var _a;
+      skipSort ? group.forEachChildren(item => {
+        drawContext.break || (item.isContainer ? this.renderGroup(item, drawContext, nextM) : this.renderItem(item, drawContext));
+      }) : foreach(group, DefaultAttribute.zIndex, item => {
+        drawContext.break || (item.isContainer ? this.renderGroup(item, drawContext, nextM) : this.renderItem(item, drawContext));
+      }, !1, !!(null === (_a = drawContext.context) || void 0 === _a ? void 0 : _a.camera));
+    }, this.currentRenderMap = new Map(), this.defaultRenderMap = new Map(), this.styleRenderMap = new Map(), this.dirtyBounds = new Bounds(), this.backupDirtyBounds = new Bounds(), this.global = application.global, this.layerService = application.layerService, isArray(this.contributions) || (this.contributions = [this.contributions]), this.init();
   }
   init() {
     this.contributions.forEach(item => {
@@ -13239,12 +12701,12 @@ let DefaultDrawContribution = class {
       dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
     }
     const d = context.dpr % 1;
-    (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(), context.setTransformForCurrent(!0), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort((a, b) => {
+    (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.save(), context.reset(!1), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), renderService.renderTreeRoots.sort((a, b) => {
       var _a, _b;
       return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
     }).forEach(group => {
       group.isContainer ? this.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : this.renderItem(group, drawContext);
-    }), context.restore(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1, context.draw();
+    }), context.restore(), context.draw();
   }
   doRegister() {
     throw new Error("暂不支持");
@@ -13270,15 +12732,12 @@ let DefaultDrawContribution = class {
       const gm = group.transMatrix;
       nextM = matrixAllocate.allocateByObj(parentMatrix).multiply(gm.a, gm.b, gm.c, gm.d, gm.e, gm.f), this.dirtyBounds.copy(this.backupDirtyBounds).transformWithMatrix(nextM.getInverse());
     }
-    this.renderItem(group, drawContext, {
-      drawingCb: () => {
-        var _a;
-        skipSort ? group.forEachChildren(item => {
-          drawContext.break || (item.isContainer ? this.renderGroup(item, drawContext, nextM) : this.renderItem(item, drawContext));
-        }) : foreach(group, DefaultAttribute.zIndex, item => {
-          drawContext.break || (item.isContainer ? this.renderGroup(item, drawContext, nextM) : this.renderItem(item, drawContext));
-        }, !1, !!(null === (_a = drawContext.context) || void 0 === _a ? void 0 : _a.camera));
-      }
+    drawContext.isGroupScroll = !(!group.attribute.scrollX && !group.attribute.scrollY), this.renderItem(group, drawContext, {
+      renderInGroupParams: {
+        skipSort: skipSort,
+        nextM: nextM
+      },
+      renderInGroup: this._renderInGroup
     }), this.useDirtyBounds && (this.dirtyBounds.copy(tempBounds), boundsAllocate.free(tempBounds), matrixAllocate.free(nextM));
   }
   _increaseRender(group, drawContext) {
@@ -13335,13 +12794,13 @@ let DefaultDrawContribution = class {
     const renderer = this.getRenderContribution(graphic);
     if (!renderer) return;
     let tempBounds,
-      retrans = this.scrollMatrix && (0 !== this.scrollMatrix.e || 0 !== this.scrollMatrix.f);
-    if (graphic.parent) {
+      retrans = !1;
+    if (drawContext.isGroupScroll) {
       const {
         scrollX = 0,
         scrollY = 0
       } = graphic.parent.attribute;
-      (scrollX || scrollY) && (retrans = !0, this.scrollMatrix || (this.scrollMatrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0)), this.scrollMatrix.translate(-scrollX, -scrollY));
+      retrans = !0, this.scrollMatrix || (this.scrollMatrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0)), this.scrollMatrix.translate(-scrollX, -scrollY);
     }
     if (retrans && (tempBounds = this.dirtyBounds.clone().transformWithMatrix(this.scrollMatrix)), this.useDirtyBounds && !graphic.isContainer && "empty" !== graphic.attribute.boundsMode && !isRectIntersect(graphic.AABBBounds, null != tempBounds ? tempBounds : this.dirtyBounds, !1)) {
       if (retrans && graphic.parent) {
@@ -14909,13 +14368,6 @@ const SCROLLBAR_START_EVENT = 'scrollDown';
 const SCROLLBAR_EVENT = 'scrollDrag';
 const SCROLLBAR_END_EVENT = 'scrollUp';
 
-function getEndTriggersOfDrag() {
-    if (vglobal.env === 'browser') {
-        return ['pointerup', 'pointerleave'];
-    }
-    return ['pointerup', 'pointerleave', 'pointerupoutside'];
-}
-
 const delayMap$2 = {
     debounce: debounce,
     throttle: throttle
@@ -14949,7 +14401,6 @@ class ScrollBar extends AbstractComponent {
             }
         };
         this._onSliderPointerDown = (e) => {
-            this._clearDragEvents();
             const { stopSliderDownPropagation = true } = this.attribute;
             if (stopSliderDownPropagation) {
                 e.stopPropagation();
@@ -14961,12 +14412,15 @@ class ScrollBar extends AbstractComponent {
                 pos: this._prePos,
                 event: e
             });
-            const triggers = getEndTriggersOfDrag();
-            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-            triggers.forEach((trigger) => {
-                obj.addEventListener(trigger, this._onSliderPointerUp);
-            });
+            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);
+            }
         };
         this._computeScrollValue = (e) => {
             const { direction } = this.attribute;
@@ -15010,7 +14464,15 @@ class ScrollBar extends AbstractComponent {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
             });
-            this._clearDragEvents();
+            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);
+            }
         };
     }
     setScrollRange(range, render = true) {
@@ -15143,14 +14605,6 @@ 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 });
-        triggers.forEach((trigger) => {
-            obj.removeEventListener(trigger, this._onSliderPointerUp);
-        });
-    }
     _reset() {
         this._sliderRenderBounds = null;
         this._sliderLimitRange = null;
@@ -15946,17 +15400,14 @@ class Tag extends AbstractComponent {
         tagWidth += symbolPlaceWidth;
         textX += symbolPlaceWidth;
         let textShape;
-        let textWidth;
-        let textHeight;
         const isRich = isRichText({ text }) || type === 'rich';
         if (isRich) {
             const richTextAttrs = Object.assign(Object.assign(Object.assign({}, richTextAttributeTransform(Object.assign({ type, text }, textStyle))), textStyle), { visible: isValid(text) && visible !== false, x: textX, y: 0 });
-            if (isNil(richTextAttrs.lineHeight)) {
-                richTextAttrs.lineHeight = textStyle.fontSize;
-            }
             textShape = group.createOrUpdateChild('tag-text', richTextAttrs, 'richtext');
-            textWidth = textShape.AABBBounds.width();
-            textHeight = textShape.AABBBounds.height();
+            tagWidth += textShape.AABBBounds.width();
+            tagHeight += textShape.AABBBounds.height();
+            tagX += textShape.AABBBounds.x1;
+            tagY += textShape.AABBBounds.y1;
         }
         else {
             const textAttrs = Object.assign(Object.assign({ text: isObject(text) && 'type' in text && text.type === 'text' ? text.text : text, visible: isValid(text) && visible !== false, lineHeight: textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize }, textStyle), { x: textX, y: 0 });
@@ -15964,134 +15415,126 @@ class Tag extends AbstractComponent {
                 textAttrs.lineHeight = textStyle.fontSize;
             }
             textShape = group.createOrUpdateChild('tag-text', textAttrs, 'text');
+            if (!isEmpty(state === null || state === void 0 ? void 0 : state.text)) {
+                textShape.states = state.text;
+            }
             const textBounds = measureTextSize(textAttrs.text, textStyle, (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.getTheme()) === null || _b === void 0 ? void 0 : _b.text);
-            textWidth = textBounds.width;
-            textHeight = textBounds.height;
-        }
-        tagWidth += textWidth;
-        const size = (_c = shape.size) !== null && _c !== void 0 ? _c : 10;
-        const maxSize = (isNumber(size) ? size : Math.max(size[0], size[1]));
-        tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
-        const { textAlign, textBaseline } = textStyle;
-        if (isValid(minWidth) || isValid(maxWidth)) {
-            if (isValid(minWidth) && tagWidth < minWidth) {
-                tagWidth = minWidth;
+            const textWidth = textBounds.width;
+            const textHeight = textBounds.height;
+            tagWidth += textWidth;
+            const size = (_c = shape.size) !== null && _c !== void 0 ? _c : 10;
+            const maxSize = (isNumber(size) ? size : Math.max(size[0], size[1]));
+            tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
+            const { textAlign, textBaseline } = textStyle;
+            if (isValid(minWidth) || isValid(maxWidth)) {
+                if (isValid(minWidth) && tagWidth < minWidth) {
+                    tagWidth = minWidth;
+                }
+                if (isValid(maxWidth) && tagWidth > maxWidth) {
+                    tagWidth = maxWidth;
+                    textShape.setAttribute('maxLineWidth', maxWidth - parsedPadding[1] - parsedPadding[2]);
+                }
             }
-            if (isValid(maxWidth) && tagWidth > maxWidth) {
-                tagWidth = maxWidth;
-                textShape.setAttribute('maxLineWidth', maxWidth - parsedPadding[1] - parsedPadding[2]);
+            tagX = 0;
+            tagY = 0;
+            let flag = 0;
+            if (textAlign === 'left' || textAlign === 'start') {
+                flag = 1;
             }
-        }
-        tagX = 0;
-        tagY = 0;
-        let flag = 0;
-        if (textAlign === 'left' || textAlign === 'start') {
-            flag = 1;
-        }
-        else if (textAlign === 'right' || textAlign === 'end') {
-            flag = -1;
-        }
-        else if (textAlign === 'center') {
-            flag = 0;
-        }
-        if (!flag) {
-            tagX -= tagWidth / 2;
-            if (symbol) {
-                symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth / 2);
+            else if (textAlign === 'right' || textAlign === 'end') {
+                flag = -1;
             }
-            group.setAttribute('x', -symbolPlaceWidth / 2);
-        }
-        else if (flag < 0) {
-            tagX -= tagWidth;
-            if (symbol) {
-                symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth);
+            else if (textAlign === 'center') {
+                flag = 0;
             }
-            group.setAttribute('x', -parsedPadding[1] - symbolPlaceWidth);
-        }
-        else if (flag > 0) {
-            group.setAttribute('x', parsedPadding[3]);
-        }
-        const shouldCenter = containerTextAlign ? containerTextAlign === 'center' : textAlwaysCenter;
-        const shouldRight = containerTextAlign === 'right' || containerTextAlign === 'end';
-        const shouldLeft = containerTextAlign === 'left' || containerTextAlign === 'start';
-        const updateTextAttrs = (textX, textAlign) => {
-            if (textShape.type === 'richtext') {
+            if (!flag) {
+                tagX -= tagWidth / 2;
+                if (symbol) {
+                    symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth / 2);
+                }
+                group.setAttribute('x', -symbolPlaceWidth / 2);
+            }
+            else if (flag < 0) {
+                tagX -= tagWidth;
+                if (symbol) {
+                    symbol.setAttribute('x', (symbol.attribute.x || 0) - textWidth);
+                }
+                group.setAttribute('x', -parsedPadding[1] - symbolPlaceWidth);
+            }
+            else if (flag > 0) {
+                group.setAttribute('x', parsedPadding[3]);
+            }
+            const shouldCenter = containerTextAlign ? containerTextAlign === 'center' : textAlwaysCenter;
+            const shouldRight = containerTextAlign === 'right' || containerTextAlign === 'end';
+            const shouldLeft = containerTextAlign === 'left' || containerTextAlign === 'start';
+            if (shouldCenter && flag) {
+                const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
+                const tsWidth = textWidth + symbolPlaceWidth;
+                const textX = flag === 1
+                    ? (containerWidth - tsWidth) / 2 + symbolPlaceWidth + textWidth / 2
+                    : parsedPadding[0] + symbolPlaceWidth - (tagWidth / 2 + tsWidth / 2 - symbolPlaceWidth) + textWidth / 2;
                 textShape.setAttributes({
                     x: textX,
-                    textAlign,
-                    textConfig: array(textShape.attribute.textConfig).map(t => {
-                        return Object.assign(Object.assign({}, t), { textAlign });
-                    })
+                    textAlign: 'center'
                 });
+                if (symbol) {
+                    const symbolX = textX - textWidth / 2 - symbolPlaceWidth + maxSize / 2;
+                    symbol.setAttributes({
+                        x: symbolX
+                    });
+                }
             }
-            else {
+            if (shouldLeft && flag !== 1) {
+                const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
+                const offset = flag === 0
+                    ? -containerWidth / 2 + symbolPlaceWidth / 2
+                    : -tagWidth + parsedPadding[3] + parsedPadding[1] + symbolPlaceWidth;
+                const textX = offset + symbolPlaceWidth;
                 textShape.setAttributes({
                     x: textX,
-                    textAlign
-                });
-            }
-        };
-        if (shouldCenter && flag) {
-            const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
-            const tsWidth = textWidth + symbolPlaceWidth;
-            const textX = flag === 1
-                ? (containerWidth - tsWidth) / 2 + symbolPlaceWidth + textWidth / 2
-                : parsedPadding[0] + symbolPlaceWidth - (tagWidth / 2 + tsWidth / 2 - symbolPlaceWidth) + textWidth / 2;
-            updateTextAttrs(textX, 'center');
-            if (symbol) {
-                const symbolX = textX - textWidth / 2 - symbolPlaceWidth + maxSize / 2;
-                symbol.setAttributes({
-                    x: symbolX
-                });
-            }
-        }
-        if (shouldLeft && flag !== 1) {
-            const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
-            const offset = flag === 0
-                ? -containerWidth / 2 + symbolPlaceWidth / 2
-                : -tagWidth + parsedPadding[3] + parsedPadding[1] + symbolPlaceWidth;
-            const textX = offset + symbolPlaceWidth;
-            updateTextAttrs(textX, 'left');
-            if (symbol) {
-                const symbolX = offset + maxSize / 2;
-                symbol.setAttributes({
-                    x: symbolX
+                    textAlign: 'left'
                 });
+                if (symbol) {
+                    const symbolX = offset + maxSize / 2;
+                    symbol.setAttributes({
+                        x: symbolX
+                    });
+                }
             }
-        }
-        if (shouldRight && flag !== -1) {
-            const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
-            const textX = flag === 0 ? containerWidth / 2 + symbolPlaceWidth / 2 : containerWidth;
-            updateTextAttrs(textX, 'right');
-            if (symbol) {
-                const symbolX = textX - textWidth - symbolPlaceWidth + maxSize / 2;
-                symbol.setAttributes({
-                    x: symbolX
+            if (shouldRight && flag !== -1) {
+                const containerWidth = tagWidth - parsedPadding[1] - parsedPadding[3];
+                const textX = flag === 0 ? containerWidth / 2 + symbolPlaceWidth / 2 : containerWidth;
+                textShape.setAttributes({
+                    x: textX,
+                    textAlign: 'right'
                 });
+                if (symbol) {
+                    const symbolX = textX - textWidth - symbolPlaceWidth + maxSize / 2;
+                    symbol.setAttributes({
+                        x: symbolX
+                    });
+                }
             }
-        }
-        if (textBaseline === 'middle') {
-            tagY -= tagHeight / 2;
-            if (symbol) {
-                symbol.setAttribute('y', 0);
+            if (textBaseline === 'middle') {
+                tagY -= tagHeight / 2;
+                if (symbol) {
+                    symbol.setAttribute('y', 0);
+                }
             }
-        }
-        else if (textBaseline === 'bottom') {
-            tagY -= tagHeight;
-            if (symbol) {
-                symbol.setAttribute('y', -textHeight / 2);
+            else if (textBaseline === 'bottom') {
+                tagY -= tagHeight;
+                if (symbol) {
+                    symbol.setAttribute('y', -textHeight / 2);
+                }
+                group.setAttribute('y', -parsedPadding[2]);
             }
-            group.setAttribute('y', -parsedPadding[2]);
-        }
-        else if (textBaseline === 'top') {
-            group.setAttribute('y', parsedPadding[0]);
-            if (symbol) {
-                symbol.setAttribute('y', textHeight / 2);
+            else if (textBaseline === 'top') {
+                group.setAttribute('y', parsedPadding[0]);
+                if (symbol) {
+                    symbol.setAttribute('y', textHeight / 2);
+                }
             }
         }
-        if (!isEmpty(state === null || state === void 0 ? void 0 : state.text)) {
-            textShape.states = state.text;
-        }
         const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
         if (visible && isBoolean(bgVisible)) {
             const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, width: tagWidth, height: tagHeight, x: tagX, y: tagY }), 'rect');
@@ -16449,32 +15892,6 @@ class PopTip extends AbstractComponent {
                 };
         }
     }
-    appearAnimate(animateConfig) {
-        const { duration = 1000, easing = 'quadOut' } = animateConfig;
-        this.setAttributes({ scaleX: 0, scaleY: 0 });
-        this.animate().to({ scaleX: 1, scaleY: 1 }, (duration / 3) * 2, easing);
-        this.titleShape &&
-            this.titleShape
-                .animate()
-                .play(new InputText({ text: '' }, { text: this.titleShape.attribute.text }, duration, easing));
-        this.contentShape &&
-            this.contentShape
-                .animate()
-                .play(new InputText({ text: '' }, { text: this.contentShape.attribute.text }, duration, easing));
-        if (animateConfig.wave) {
-            const dur = duration / 6;
-            this.group
-                .animate()
-                .to({ angle: animateConfig.wave }, dur, easing)
-                .to({ angle: -animateConfig.wave }, dur * 2, easing)
-                .to({ angle: animateConfig.wave }, dur * 2, easing)
-                .to({ angle: 0 }, dur, easing);
-        }
-    }
-    disappearAnimate(animateConfig) {
-        const { duration = 1000, easing = 'quadOut' } = animateConfig;
-        this.animate().to({ scaleX: 0, scaleY: 0 }, duration, easing);
-    }
 }
 PopTip.defaultAttributes = {
     position: 'rt',
@@ -19122,17 +18539,633 @@ class CircleAxis extends AxisBase {
                 textBaseline: this.getTextBaseline(vector)
             };
         }
-        return {
-            textAlign: 'center',
-            textBaseline: 'middle'
-        };
-    }
-    getLabelPosition(point, vector, text, style) {
-        return point;
+        return {
+            textAlign: 'center',
+            textBaseline: 'middle'
+        };
+    }
+    getLabelPosition(point, vector, text, style) {
+        return point;
+    }
+}
+CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
+mixin(CircleAxis, CircleAxisMixin);
+
+var AnimateMode;
+!function (AnimateMode) {
+  AnimateMode[AnimateMode.NORMAL = 0] = "NORMAL", AnimateMode[AnimateMode.SET_ATTR_IMMEDIATELY = 1] = "SET_ATTR_IMMEDIATELY";
+}(AnimateMode || (AnimateMode = {}));
+
+var AnimateStepType;
+!function (AnimateStepType) {
+  AnimateStepType.wait = "wait", AnimateStepType.from = "from", AnimateStepType.to = "to", AnimateStepType.customAnimate = "customAnimate";
+}(AnimateStepType || (AnimateStepType = {}));
+var AnimateStatus;
+!function (AnimateStatus) {
+  AnimateStatus[AnimateStatus.INITIAL = 0] = "INITIAL", AnimateStatus[AnimateStatus.RUNNING = 1] = "RUNNING", AnimateStatus[AnimateStatus.PAUSED = 2] = "PAUSED", AnimateStatus[AnimateStatus.END = 3] = "END";
+}(AnimateStatus || (AnimateStatus = {}));
+
+class Easing {
+  constructor() {}
+  static linear(t) {
+    return t;
+  }
+  static none() {
+    return this.linear;
+  }
+  static get(amount) {
+    return amount < -1 ? amount = -1 : amount > 1 && (amount = 1), function (t) {
+      return 0 === amount ? t : amount < 0 ? t * (t * -amount + 1 + amount) : t * ((2 - t) * amount + (1 - amount));
+    };
+  }
+  static getPowIn(pow) {
+    return function (t) {
+      return Math.pow(t, pow);
+    };
+  }
+  static getPowOut(pow) {
+    return function (t) {
+      return 1 - Math.pow(1 - t, pow);
+    };
+  }
+  static getPowInOut(pow) {
+    return function (t) {
+      return (t *= 2) < 1 ? .5 * Math.pow(t, pow) : 1 - .5 * Math.abs(Math.pow(2 - t, pow));
+    };
+  }
+  static getBackIn(amount) {
+    return function (t) {
+      return t * t * ((amount + 1) * t - amount);
+    };
+  }
+  static getBackOut(amount) {
+    return function (t) {
+      return --t * t * ((amount + 1) * t + amount) + 1;
+    };
+  }
+  static getBackInOut(amount) {
+    return amount *= 1.525, function (t) {
+      return (t *= 2) < 1 ? t * t * ((amount + 1) * t - amount) * .5 : .5 * ((t -= 2) * t * ((amount + 1) * t + amount) + 2);
+    };
+  }
+  static sineIn(t) {
+    return 1 - Math.cos(t * Math.PI / 2);
+  }
+  static sineOut(t) {
+    return Math.sin(t * Math.PI / 2);
+  }
+  static sineInOut(t) {
+    return -(Math.cos(Math.PI * t) - 1) / 2;
+  }
+  static expoIn(t) {
+    return 0 === t ? 0 : Math.pow(2, 10 * t - 10);
+  }
+  static expoOut(t) {
+    return 1 === t ? 1 : 1 - Math.pow(2, -10 * t);
+  }
+  static expoInOut(t) {
+    return 0 === t ? 0 : 1 === t ? 1 : t < .5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
+  }
+  static circIn(t) {
+    return -(Math.sqrt(1 - t * t) - 1);
+  }
+  static circOut(t) {
+    return Math.sqrt(1 - --t * t);
+  }
+  static circInOut(t) {
+    return (t *= 2) < 1 ? -.5 * (Math.sqrt(1 - t * t) - 1) : .5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+  }
+  static bounceOut(t) {
+    return t < 1 / 2.75 ? 7.5625 * t * t : t < 2 / 2.75 ? 7.5625 * (t -= 1.5 / 2.75) * t + .75 : t < 2.5 / 2.75 ? 7.5625 * (t -= 2.25 / 2.75) * t + .9375 : 7.5625 * (t -= 2.625 / 2.75) * t + .984375;
+  }
+  static bounceIn(t) {
+    return 1 - Easing.bounceOut(1 - t);
+  }
+  static bounceInOut(t) {
+    return t < .5 ? .5 * Easing.bounceIn(2 * t) : .5 * Easing.bounceOut(2 * t - 1) + .5;
+  }
+  static getElasticIn(amplitude, period) {
+    return function (t) {
+      if (0 === t || 1 === t) return t;
+      const s = period / pi2 * Math.asin(1 / amplitude);
+      return -amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * pi2 / period);
+    };
+  }
+  static getElasticOut(amplitude, period) {
+    return function (t) {
+      if (0 === t || 1 === t) return t;
+      const s = period / pi2 * Math.asin(1 / amplitude);
+      return amplitude * Math.pow(2, -10 * t) * Math.sin((t - s) * pi2 / period) + 1;
+    };
+  }
+  static getElasticInOut(amplitude, period) {
+    return function (t) {
+      const s = period / pi2 * Math.asin(1 / amplitude);
+      return (t *= 2) < 1 ? amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * -.5 : amplitude * Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * .5 + 1;
+    };
+  }
+  static registerFunc(name, func) {
+    Easing[name] = func;
+  }
+}
+function flicker(t, n) {
+  const step = 1 / n;
+  let flag = 1;
+  for (; t > step;) t -= step, flag *= -1;
+  const v = flag * t / step;
+  return v > 0 ? v : 1 + v;
+}
+Easing.quadIn = Easing.getPowIn(2), Easing.quadOut = Easing.getPowOut(2), Easing.quadInOut = Easing.getPowInOut(2), Easing.cubicIn = Easing.getPowIn(3), Easing.cubicOut = Easing.getPowOut(3), Easing.cubicInOut = Easing.getPowInOut(3), Easing.quartIn = Easing.getPowIn(4), Easing.quartOut = Easing.getPowOut(4), Easing.quartInOut = Easing.getPowInOut(4), Easing.quintIn = Easing.getPowIn(5), Easing.quintOut = Easing.getPowOut(5), Easing.quintInOut = Easing.getPowInOut(5), Easing.backIn = Easing.getBackIn(1.7), Easing.backOut = Easing.getBackOut(1.7), Easing.backInOut = Easing.getBackInOut(1.7), Easing.elasticIn = Easing.getElasticIn(1, .3), Easing.elasticOut = Easing.getElasticOut(1, .3), Easing.elasticInOut = Easing.getElasticInOut(1, .3 * 1.5), Easing.easeInOutQuad = t => (t /= .5) < 1 ? .5 * Math.pow(t, 2) : -.5 * ((t -= 2) * t - 2), Easing.easeOutElastic = x => {
+  const c4 = 2 * Math.PI / 3;
+  return 0 === x ? 0 : 1 === x ? 1 : Math.pow(2, -10 * x) * Math.sin((10 * x - .75) * c4) + 1;
+}, Easing.easeInOutElastic = x => {
+  const c5 = 2 * Math.PI / 4.5;
+  return 0 === x ? 0 : 1 === x ? 1 : x < .5 ? -Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
+};
+for (let i = 0; i < 10; i++) Easing[`flicker${i}`] = t => flicker(t, i);
+for (let i = 2; i < 10; i++) Easing[`aIn${i}`] = t => i * t * t + (1 - i) * t;
+
+function interpolateNumber(from, to, ratio) {
+  return from + (to - from) * ratio;
+}
+
+class InterpolateUpdateStore {
+  constructor() {
+    this.opacity = (key, from, to, ratio, step, target) => {
+      target.attribute.opacity = interpolateNumber(from, to, ratio);
+    }, this.fillOpacity = (key, from, to, ratio, step, target) => {
+      target.attribute.fillOpacity = interpolateNumber(from, to, ratio);
+    }, this.strokeOpacity = (key, from, to, ratio, step, target) => {
+      target.attribute.strokeOpacity = interpolateNumber(from, to, ratio);
+    }, this.zIndex = (key, from, to, ratio, step, target) => {
+      target.attribute.zIndex = interpolateNumber(from, to, ratio);
+    }, this.backgroundOpacity = (key, from, to, ratio, step, target) => {
+      target.attribute.backgroundOpacity = interpolateNumber(from, to, ratio);
+    }, this.shadowOffsetX = (key, from, to, ratio, step, target) => {
+      target.attribute.shadowOffsetX = interpolateNumber(from, to, ratio);
+    }, this.shadowOffsetY = (key, from, to, ratio, step, target) => {
+      target.attribute.shadowOffsetY = interpolateNumber(from, to, ratio);
+    }, this.shadowBlur = (key, from, to, ratio, step, target) => {
+      target.attribute.shadowBlur = interpolateNumber(from, to, ratio);
+    }, this.fill = (key, from, to, ratio, step, target) => {
+      target.attribute.fill = interpolateColor(from, to, ratio, !1);
+    }, this.fillPure = (key, from, to, ratio, step, target) => {
+      target.attribute.fill = step.fromParsedProps.fill ? interpolatePureColorArrayToStr(step.fromParsedProps.fill, step.toParsedProps.fill, ratio) : step.toParsedProps.fill;
+    }, this.stroke = (key, from, to, ratio, step, target) => {
+      target.attribute.stroke = interpolateColor(from, to, ratio, !1);
+    }, this.strokePure = (key, from, to, ratio, step, target) => {
+      target.attribute.stroke = step.fromParsedProps.stroke ? interpolatePureColorArrayToStr(step.fromParsedProps.stroke, step.toParsedProps.stroke, ratio) : step.toParsedProps.stroke;
+    }, this.width = (key, from, to, ratio, step, target) => {
+      target.attribute.width = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.height = (key, from, to, ratio, step, target) => {
+      target.attribute.height = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.x = (key, from, to, ratio, step, target) => {
+      target.attribute.x = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.y = (key, from, to, ratio, step, target) => {
+      target.attribute.y = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.angle = (key, from, to, ratio, step, target) => {
+      target.attribute.angle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.scaleX = (key, from, to, ratio, step, target) => {
+      target.attribute.scaleX = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.scaleY = (key, from, to, ratio, step, target) => {
+      target.attribute.scaleY = interpolateNumber(from, to, ratio), target.addUpdateBoundTag(), target.addUpdatePositionTag();
+    }, this.lineWidth = (key, from, to, ratio, step, target) => {
+      target.attribute.lineWidth = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.startAngle = (key, from, to, ratio, step, target) => {
+      target.attribute.startAngle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.endAngle = (key, from, to, ratio, step, target) => {
+      target.attribute.endAngle = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.radius = (key, from, to, ratio, step, target) => {
+      target.attribute.radius = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.outerRadius = (key, from, to, ratio, step, target) => {
+      target.attribute.outerRadius = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.innerRadius = (key, from, to, ratio, step, target) => {
+      target.attribute.innerRadius = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.size = (key, from, to, ratio, step, target) => {
+      target.attribute.size = interpolateNumber(from, to, ratio), target.addUpdateBoundTag();
+    }, this.points = (key, from, to, ratio, step, target) => {
+      target.attribute.points = pointsInterpolation(from, to, ratio), target.addUpdateBoundTag();
+    };
+  }
+}
+const interpolateUpdateStore = new InterpolateUpdateStore();
+function commonInterpolateUpdate(key, from, to, ratio, step, target) {
+  if (Number.isFinite(to) && Number.isFinite(from)) return target.attribute[key] = from + (to - from) * ratio, !0;
+  if (Array.isArray(to) && Array.isArray(from) && to.length === from.length) {
+    const nextList = [];
+    let valid = !0;
+    for (let i = 0; i < to.length; i++) {
+      const v = from[i],
+        val = v + (to[i] - v) * ratio;
+      if (!Number.isFinite(val)) {
+        valid = !1;
+        break;
+      }
+      nextList.push(val);
+    }
+    return valid && (target.attribute[key] = nextList), !0;
+  }
+  return !1;
+}
+
+function noop() {}
+class Step {
+  constructor(type, props, duration, easing) {
+    this._startTime = 0, this._hasFirstRun = !1, this.type = type, this.props = props, this.duration = duration, this.easing = easing ? "function" == typeof easing ? easing : Easing[easing] : Easing.linear, "wait" === type && (this.onUpdate = noop);
+  }
+  bind(target, animate) {
+    this.target = target, this.animate = animate, this.onBind();
+  }
+  append(step) {
+    this.next = step, step.prev = this, step.setStartTime(this.getStartTime() + this.duration, !1);
+  }
+  updateDownstreamStartTimes() {
+    let currentStep = this.next,
+      currentStartTime = this._startTime + this.duration;
+    for (; currentStep;) currentStep.setStartTime(currentStartTime, !1), currentStartTime += currentStep.duration, currentStep = currentStep.next;
+    this.animate.updateDuration();
+  }
+  getLastProps() {
+    return this.prev ? this.prev.props || {} : this.animate.getStartProps();
+  }
+  setDuration(duration) {
+    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    this.duration = duration, updateDownstream && this.updateDownstreamStartTimes();
+  }
+  getDuration() {
+    return this.duration;
+  }
+  determineInterpolateUpdateFunction() {
+    if (!this.props) return;
+    const funcs = [];
+    this.propKeys.forEach(key => {
+      if ("fill" === key || "stroke" === key) {
+        const from = this.fromProps[key],
+          to = this.props[key];
+        if (isString(from) && isString(to)) {
+          const fromArray = ColorStore.Get(from, ColorType.Color255),
+            toArray = ColorStore.Get(to, ColorType.Color255);
+          this.fromParsedProps || (this.fromParsedProps = {}), this.toParsedProps || (this.toParsedProps = {}), this.fromParsedProps[key] = fromArray, this.toParsedProps[key] = toArray, funcs.push(interpolateUpdateStore["fill" === key ? "fillPure" : "strokePure"]);
+        } else interpolateUpdateStore[key] ? funcs.push(interpolateUpdateStore[key]) : funcs.push(commonInterpolateUpdate);
+      } else interpolateUpdateStore[key] ? funcs.push(interpolateUpdateStore[key]) : funcs.push(commonInterpolateUpdate);
+    }), this.interpolateUpdateFunctions = funcs;
+  }
+  setStartTime(time) {
+    let updateDownstream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    this._startTime = time, updateDownstream && this.updateDownstreamStartTimes();
+  }
+  getStartTime() {
+    return this._startTime;
+  }
+  onBind() {}
+  onFirstRun() {}
+  onStart() {
+    if (!this._hasFirstRun) {
+      this._hasFirstRun = !0, this.fromProps = this.getLastProps();
+      const startProps = this.animate.getStartProps();
+      this.propKeys && this.propKeys.forEach(key => {
+        var _a;
+        this.fromProps[key] = null !== (_a = this.fromProps[key]) && void 0 !== _a ? _a : startProps[key];
+      }), this.determineInterpolateUpdateFunction(), this.tryPreventConflict(), this.trySyncStartProps(), this.onFirstRun();
+    }
+  }
+  tryPreventConflict() {
+    const animate = this.animate;
+    this.target.animates.forEach(a => {
+      if (a === animate || a.priority > animate.priority) return;
+      const fromProps = a.getStartProps();
+      this.propKeys.forEach(key => {
+        null != fromProps[key] && a.preventAttr(key);
+      });
+    });
+  }
+  deleteSelfAttr(key) {
+    var _a;
+    delete this.props[key], this.fromProps && delete this.fromProps[key];
+    const index = this.propKeys.indexOf(key);
+    -1 !== index && (this.propKeys.splice(index, 1), null === (_a = this.interpolateUpdateFunctions) || void 0 === _a || _a.splice(index, 1));
+  }
+  trySyncStartProps() {
+    this.propKeys.forEach(key => {
+      this.fromProps[key] = this.animate.target.getComputedAttribute(key);
+    });
+  }
+  update(end, ratio, out) {
+    if (this.onStart(), !this.props || !this.propKeys) return;
+    const easedRatio = this.easing(ratio);
+    this.animate.interpolateUpdateFunction ? this.animate.interpolateUpdateFunction(this.fromProps, this.props, easedRatio, this, this.target) : this.interpolateUpdateFunctions.forEach((func, index) => {
+      if (!this.animate.validAttr(this.propKeys[index])) return;
+      const key = this.propKeys[index];
+      func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
+    }), this.onUpdate(end, easedRatio, out);
+  }
+  onUpdate(end, ratio, out) {}
+  onEnd(cb) {
+    this.target.setAttributes(this.props), cb ? this._endCb = cb : this._endCb && this._endCb(this.animate, this);
+  }
+  getEndProps() {
+    return this.props;
+  }
+  getFromProps() {
+    return this.fromProps;
+  }
+  getMergedEndProps() {
+    return this.getEndProps();
+  }
+  stop() {}
+}
+class WaitStep extends Step {
+  constructor(type, props, duration, easing) {
+    super(type, props, duration, easing);
+  }
+  update(end, ratio, out) {
+    this.onStart();
+  }
+  determineInterpolateUpdateFunction() {}
+}
+
+class DefaultTimeline {
+  get animateCount() {
+    return this.animates.length;
+  }
+  constructor() {
+    this.animates = [], this._playSpeed = 1, this._totalDuration = 0, this._startTime = 0, this._currentTime = 0, this._endAnimatePtr = -1, this.id = Generator.GenAutoIncrementId(), this.animates = [], this.paused = !1;
+  }
+  isRunning() {
+    return !this.paused && this._endAnimatePtr >= 0;
+  }
+  forEachAccessAnimate(cb) {
+    for (let i = 0; i <= this._endAnimatePtr; i++) cb(this.animates[i], i);
+  }
+  addAnimate(animate) {
+    this.animates.push(animate), this._endAnimatePtr++, this.animates[this.animates.length - 1] = this.animates[this._endAnimatePtr], this.animates[this._endAnimatePtr] = animate, this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
+  }
+  pause() {
+    this.paused = !0;
+  }
+  resume() {
+    this.paused = !1;
+  }
+  tick(delta) {
+    if (this.paused) return;
+    const scaledDelta = delta * this._playSpeed;
+    this._currentTime += scaledDelta, this.forEachAccessAnimate((animate, i) => {
+      animate.status === AnimateStatus$1.END ? this.removeAnimate(animate, !0, i) : animate.status !== AnimateStatus$1.RUNNING && animate.status !== AnimateStatus$1.INITIAL || animate.advance(scaledDelta);
+    });
+  }
+  clear() {
+    this.forEachAccessAnimate(animate => {
+      animate.release();
+    }), this.animates = [], this._totalDuration = 0;
+  }
+  removeAnimate(animate) {
+    let release = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+    let index = arguments.length > 2 ? arguments[2] : undefined;
+    this._endAnimatePtr < 0 || (release && (animate._onRemove && animate._onRemove.forEach(cb => cb()), animate.release()), index = null != index ? index : this.animates.indexOf(animate), this.animates[index] = this.animates[this._endAnimatePtr], this._endAnimatePtr--);
+  }
+  recalculateTotalDuration() {
+    this._totalDuration = 0, this.animates.forEach(animate => {
+      this._totalDuration = Math.max(this._totalDuration, animate.getStartTime() + animate.getDuration());
+    });
+  }
+  getTotalDuration() {
+    return this._totalDuration;
+  }
+  getPlaySpeed() {
+    return this._playSpeed;
+  }
+  setPlaySpeed(speed) {
+    this._playSpeed = speed;
+  }
+  getPlayState() {
+    return this.paused ? "paused" : 0 === this.animateCount ? "stopped" : "playing";
+  }
+  setStartTime(time) {
+    this._startTime = time;
+  }
+  getStartTime() {
+    return this._startTime;
+  }
+  getCurrentTime() {
+    return this._currentTime;
+  }
+  setCurrentTime(time) {
+    this._currentTime = time;
+  }
+}
+const defaultTimeline = new DefaultTimeline();
+defaultTimeline.isGlobal = !0;
+
+class Animate {
+  constructor() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Generator.GenAutoIncrementId();
+    let timeline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTimeline;
+    let slience = arguments.length > 2 ? arguments[2] : undefined;
+    this.id = id, this.status = AnimateStatus.INITIAL, this._timeline = timeline, timeline.addAnimate(this), this.slience = slience, this._startTime = 0, this._duration = 0, this._totalDuration = 0, this._loopCount = 0, this._currentLoop = 0, this._bounce = !1, this._firstStep = null, this._lastStep = null, this._startProps = {}, this._endProps = {}, this._preventAttrs = new Set(), this.currentTime = 0, this.interpolateUpdateFunction = null, this.priority = 0;
+  }
+  getStartProps() {
+    return this._startProps;
+  }
+  getEndProps() {
+    return this._endProps;
+  }
+  setTimeline(timeline) {
+    this._timeline = timeline;
+  }
+  getTimeline() {
+    return this._timeline;
+  }
+  get timeline() {
+    return this._timeline;
+  }
+  bind(target) {
+    return this.target = target, this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
+  }
+  to(props) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
+    const step = new Step(AnimateStepType.to, props, duration, easing);
+    return step.bind(this.target, this), this.updateStepAfterAppend(step), this;
+  }
+  wait(delay) {
+    const step = new WaitStep(AnimateStepType.wait, {}, delay, "linear");
+    return step.bind(this.target, this), this.updateStepAfterAppend(step), this;
+  }
+  updateStepAfterAppend(step) {
+    this._firstStep ? (this._lastStep.append(step), this._lastStep = step) : (this._firstStep = step, this._lastStep = step), this.parseStepProps(step), this.updateDuration();
+  }
+  parseStepProps(step) {
+    this._lastStep && (step.propKeys = step.propKeys || Object.keys(step.props), Object.keys(this._endProps).forEach(key => {
+      var _a;
+      step.props[key] = null !== (_a = step.props[key]) && void 0 !== _a ? _a : this._endProps[key];
+    }), step.propKeys.forEach(key => {
+      this._endProps[key] = step.props[key];
+    }));
+  }
+  reSyncProps() {
+    if (!this._lastStep) return;
+    this._endProps = {};
+    let currentStep = this._firstStep;
+    for (; currentStep;) Object.keys(this._endProps).forEach(key => {
+      var _a;
+      currentStep.props[key] = null !== (_a = currentStep.props[key]) && void 0 !== _a ? _a : this._endProps[key];
+    }), currentStep.propKeys.forEach(key => {
+      this._endProps[key] = currentStep.props[key];
+    }), currentStep = currentStep.next;
+  }
+  from(props) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+    let easing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "linear";
+    const step = new Step(AnimateStepType.from, props, duration, easing);
+    return this._firstStep ? (this._lastStep.append(step), this._lastStep = step) : (this._firstStep = step, this._lastStep = step), this.updateDuration(), this;
+  }
+  play(customAnimate) {
+    return customAnimate.bind(this.target, this), this.updateStepAfterAppend(customAnimate), this;
+  }
+  pause() {
+    this.status === AnimateStatus.RUNNING && (this.status = AnimateStatus.PAUSED);
+  }
+  resume() {
+    this.status === AnimateStatus.PAUSED && (this.status = AnimateStatus.RUNNING);
+  }
+  onStart(cb) {
+    var _a;
+    cb ? (this._onStart || (this._onStart = []), this._onStart.push(cb)) : (null === (_a = this._onStart) || void 0 === _a || _a.forEach(cb => cb()), Object.keys(this._endProps).forEach(key => {
+      this._startProps[key] = this.target.getComputedAttribute(key);
+    }));
+  }
+  onEnd(cb) {
+    var _a;
+    cb ? (this._onEnd || (this._onEnd = []), this._onEnd.push(cb)) : null === (_a = this._onEnd) || void 0 === _a || _a.forEach(cb => cb());
+  }
+  onFrame(cb) {
+    cb && (this._onFrame || (this._onFrame = []), this._onFrame.push(cb));
+  }
+  onRemove(cb) {
+    var _a;
+    cb ? (this._onRemove || (this._onRemove = []), this._onRemove.push(cb)) : null === (_a = this._onRemove) || void 0 === _a || _a.forEach(cb => cb());
+  }
+  preventAttr(key) {
+    this._preventAttrs.add(key), delete this._startProps[key], delete this._endProps[key];
+    let step = this._firstStep;
+    for (; step;) step.deleteSelfAttr(key), step = step.next;
+  }
+  preventAttrs(keys) {
+    keys.forEach(key => this._preventAttrs.add(key));
+  }
+  validAttr(key) {
+    return !this._preventAttrs.has(key);
+  }
+  runCb(cb) {
+    var _a;
+    return null === (_a = this._lastStep) || void 0 === _a || _a.onEnd(cb), this;
+  }
+  startAt(t) {
+    return this._startTime = t, this;
+  }
+  customInterpolate(key, ratio, from, to, target, ret) {
+    return !1;
+  }
+  getFromValue() {
+    return this._startProps;
+  }
+  getToValue() {
+    return this._endProps;
+  }
+  stop(type) {
+    let step = this._firstStep;
+    for (; step;) step.stop(), step = step.next;
+    this.status = AnimateStatus.END, this.onEnd(), this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
+  }
+  release() {
+    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
+  }
+  getDuration() {
+    return this._duration;
+  }
+  getStartTime() {
+    return this._startTime;
+  }
+  afterAll(list) {
+    if (!list || 0 === list.length) return this;
+    let maxEndTime = 0;
+    return list.forEach(animate => {
+      const endTime = animate.getStartTime() + animate.getTotalDuration();
+      maxEndTime = Math.max(maxEndTime, endTime);
+    }), this.startAt(maxEndTime);
+  }
+  after(animate) {
+    if (!animate) return this;
+    const endTime = animate.getStartTime() + animate.getTotalDuration();
+    return this.startAt(endTime);
+  }
+  parallel(animate) {
+    return animate ? (this.startAt(animate.getStartTime()), this) : this;
+  }
+  loop(n) {
+    return !0 === n ? n = 1 / 0 : !1 === n && (n = 0), this._loopCount = n, this.updateDuration(), this;
+  }
+  bounce(b) {
+    return this._bounce = b, this;
+  }
+  advance(delta) {
+    var _a;
+    if (this.status === AnimateStatus.END) return void console.warn("aaa 动画已经结束，不能推进");
+    const nextTime = this.currentTime + delta;
+    if (nextTime < this._startTime) return void (this.currentTime = nextTime);
+    if (nextTime >= this._startTime + this._totalDuration) return null === (_a = this._lastStep) || void 0 === _a || _a.onEnd(), this.onEnd(), void (this.status = AnimateStatus.END);
+    this.status = AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
+    let cycleTime = nextTime - this._startTime,
+      newLoop = !1,
+      bounceTime = !1;
+    if (this._loopCount > 0) {
+      cycleTime = (nextTime - this._startTime) % this._duration;
+      const currentLoop = Math.floor((nextTime - this._startTime) / this._duration);
+      newLoop = currentLoop > this._currentLoop, this._currentLoop = currentLoop, bounceTime = this._bounce && currentLoop % 2 == 1, bounceTime && (cycleTime = this._duration - cycleTime);
+    }
+    newLoop && !bounceTime && this.target.setAttributes(this._startProps);
+    let targetStep = null;
+    if (this._lastStep === this._firstStep) targetStep = this._firstStep;else {
+      let currentStep = this._firstStep;
+      for (; currentStep;) {
+        const stepStartTime = currentStep.getStartTime(),
+          stepDuration = currentStep.getDuration();
+        if (cycleTime >= stepStartTime && cycleTime <= stepStartTime + stepDuration) {
+          targetStep = currentStep;
+          break;
+        }
+        currentStep = currentStep.next;
+      }
     }
+    if (!targetStep) return;
+    const ratio = (cycleTime - targetStep.getStartTime()) / targetStep.getDuration(),
+      isEnd = ratio >= 1;
+    targetStep.update(isEnd, ratio, {}), isEnd && targetStep.onEnd();
+  }
+  updateDuration() {
+    this._lastStep ? (this._duration = this._lastStep.getStartTime() + this._lastStep.getDuration(), this._totalDuration = this._duration * (this._loopCount + 1)) : this._duration = 0;
+  }
+  getTotalDuration() {
+    return this._totalDuration;
+  }
+  getLoop() {
+    return this._loopCount;
+  }
+}
+
+class ACustomAnimate extends Step {
+  constructor(customFrom, customTo, duration, easing, params) {
+    super("customAnimate", customTo, duration, easing), this.type = "customAnimate", this.customFrom = customFrom, this.params = params;
+  }
+  update(end, ratio, out) {
+    if (this.onStart(), !this.props || !this.propKeys) return;
+    const easedRatio = this.easing(ratio);
+    this.onUpdate(end, easedRatio, out);
+  }
+  setProps(props) {
+    this.props = props, this.propKeys = Object.keys(props), this.animate.reSyncProps();
+  }
 }
-CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
-mixin(CircleAxis, CircleAxisMixin);
 
 class GroupTransition extends ACustomAnimate {
     constructor() {
@@ -20028,11 +20061,10 @@ function bitmapTool(width, height, padding = { top: 0, left: 0, right: 0, bottom
 }
 function clampRangeByBitmap($, range) {
     const { x1, x2, y1, y2 } = range;
-    const { top = 0, left = 0, right = 0, bottom = 0 } = $.padding;
-    const _x1 = clamp(x1, -left, $.width + right);
-    const _x2 = clamp(x2, -left, $.width + right);
-    const _y1 = clamp(y1, -top, $.height + bottom);
-    const _y2 = clamp(y2, -top, $.height + bottom);
+    const _x1 = clamp(x1, 0, $.width);
+    const _x2 = clamp(x2, 0, $.width);
+    const _y1 = clamp(y1, 0, $.height);
+    const _y2 = clamp(y2, 0, $.height);
     return {
         x1: $.x(_x1),
         x2: $.x(_x2),
@@ -20167,91 +20199,6 @@ function clampText(text, width, height, padding = {}) {
     return { dx, dy };
 }
 
-const fadeIn = (textAttribute = {}) => {
-    var _a, _b, _c;
-    return {
-        from: {
-            opacity: 0,
-            fillOpacity: 0,
-            strokeOpacity: 0
-        },
-        to: {
-            opacity: (_a = textAttribute.opacity) !== null && _a !== void 0 ? _a : 1,
-            fillOpacity: (_b = textAttribute.fillOpacity) !== null && _b !== void 0 ? _b : 1,
-            strokeOpacity: (_c = textAttribute.strokeOpacity) !== null && _c !== void 0 ? _c : 1
-        }
-    };
-};
-const fadeOut = (textAttribute = {}) => {
-    var _a, _b, _c;
-    return {
-        from: {
-            opacity: (_a = textAttribute.opacity) !== null && _a !== void 0 ? _a : 1,
-            fillOpacity: (_b = textAttribute.fillOpacity) !== null && _b !== void 0 ? _b : 1,
-            strokeOpacity: (_c = textAttribute.strokeOpacity) !== null && _c !== void 0 ? _c : 1
-        },
-        to: {
-            opacity: 0,
-            fillOpacity: 0,
-            strokeOpacity: 0
-        }
-    };
-};
-const animationEffects = { fadeIn, fadeOut };
-function getAnimationAttributes(textAttribute, type) {
-    var _a, _b;
-    return (_b = (_a = animationEffects[type]) === null || _a === void 0 ? void 0 : _a.call(animationEffects, textAttribute)) !== null && _b !== void 0 ? _b : { from: {}, to: {} };
-}
-function updateAnimation(prev, next, animationConfig) {
-    const changeAttributes = (prev, next) => {
-        const changed = {};
-        for (const key in next.attribute) {
-            if (prev.attribute[key] !== next.attribute[key]) {
-                changed[key] = next.attribute[key];
-            }
-        }
-        return changed;
-    };
-    if (!isArray(animationConfig)) {
-        const { duration, easing, increaseEffect = true } = animationConfig;
-        prev.animate().to(changeAttributes(prev, next), duration, easing);
-        if (increaseEffect && prev.type === 'text' && next.type === 'text') {
-            playIncreaseCount(prev, next, duration, easing);
-        }
-        return;
-    }
-    animationConfig.forEach(cfg => {
-        const { duration, easing, increaseEffect = true, channel } = cfg;
-        const { to } = update(prev, next, channel, cfg.options);
-        if (!isEmpty(to)) {
-            prev.animate().to(changeAttributes(prev, next), duration, easing);
-        }
-        if (increaseEffect && prev.type === 'text' && next.type === 'text') {
-            playIncreaseCount(prev, next, duration, easing);
-        }
-    });
-}
-const update = (prev, next, channel, options) => {
-    const from = Object.assign({}, prev.attribute);
-    const to = Object.assign({}, next.attribute);
-    array(options === null || options === void 0 ? void 0 : options.excludeChannels).forEach(key => {
-        delete to[key];
-    });
-    Object.keys(to).forEach(key => {
-        if (channel && !channel.includes(key)) {
-            delete to[key];
-        }
-    });
-    return { from, to };
-};
-function playIncreaseCount(prev, next, duration, easing) {
-    if (prev.attribute.text !== next.attribute.text &&
-        isValidNumber(Number(prev.attribute.text) * Number(next.attribute.text))) {
-        prev
-            .animate()
-            .play(new IncreaseCount({ text: prev.attribute.text }, { text: next.attribute.text }, duration, easing));
-    }
-}
 const DefaultLabelAnimation = {
     mode: 'same-time',
     duration: 300,
@@ -20730,8 +20677,8 @@ class LabelBase extends AbstractComponent {
                     }, attrs, new CustomPath2D());
                 };
             }
-            if (baseMark && baseMark.attribute.fill) {
-                lineGraphic.setAttribute('stroke', baseMark.attribute.fill);
+            if (baseMark && baseMark.getAttributes(true).fill) {
+                lineGraphic.setAttribute('stroke', baseMark.getAttributes(true).fill);
             }
             if (this.attribute.line && !isEmpty(this.attribute.line.style)) {
                 lineGraphic.setAttributes(this.attribute.line.style);
@@ -20921,11 +20868,12 @@ class LabelBase extends AbstractComponent {
             if (!baseMark) {
                 continue;
             }
+            const graphicAttribute = baseMark.getAttributes(true);
             const labelAttribute = Object.assign(Object.assign({ fill: this._isCollectionBase
-                    ? isArray(baseMark.attribute.stroke)
-                        ? baseMark.attribute.stroke.find(entry => !!entry && entry !== true)
-                        : baseMark.attribute.stroke
-                    : baseMark.attribute.fill }, textStyle), textData);
+                    ? isArray(graphicAttribute.stroke)
+                        ? graphicAttribute.stroke.find(entry => !!entry && entry !== true)
+                        : graphicAttribute.stroke
+                    : graphicAttribute.fill }, textStyle), textData);
             const text = this._createLabelText(labelAttribute);
             labels.push(text);
         }
@@ -20983,9 +20931,7 @@ class LabelBase extends AbstractComponent {
         return this._overlapByStrategy(labels, option, bmpTool, bitmap);
     }
     _overlapGlobal(labels, option, bmpTool, bitmap) {
-        let result = labels.filter(label => label.attribute.visible &&
-            label.attribute.opacity !== 0 &&
-            this.isMarkInsideRect(this.getRelatedGraphic(label.attribute), bmpTool));
+        let result = labels.filter(label => label.attribute.visible && label.attribute.opacity !== 0);
         const { clampForce = true, hideOnHit = true, overlapPadding, strategy } = option;
         if (clampForce) {
             for (let i = 0; i < result.length; i++) {
@@ -21077,7 +21023,7 @@ class LabelBase extends AbstractComponent {
             const text = labels[i];
             const baseMark = this.getRelatedGraphic(text.attribute);
             text.update();
-            if (!this.isMarkInsideRect(baseMark, bmpTool)) {
+            if (!isRectIntersect(baseMark.AABBBounds, { x1: 0, x2: bmpTool.width, y1: 0, y2: bmpTool.height }, true)) {
                 continue;
             }
             if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce, overlapPadding)) {
@@ -21117,23 +21063,6 @@ class LabelBase extends AbstractComponent {
         }
         return result;
     }
-    isMarkInsideRect(baseMark, bmpTool) {
-        const { left, right, top, bottom } = bmpTool.padding;
-        const rect = { x1: -left, x2: bmpTool.width + right, y1: -top, y2: bmpTool.height + bottom };
-        const bounds = baseMark.AABBBounds;
-        if (bounds.width() !== 0 && bounds.height() !== 0) {
-            return isRectIntersect(baseMark.AABBBounds, rect, true);
-        }
-        const { attribute } = baseMark;
-        if (baseMark.type === 'rect') {
-            const { x, x1, y, y1 } = attribute;
-            return pointInRect({ x: x !== null && x !== void 0 ? x : x1, y: y !== null && y !== void 0 ? y : y1 }, rect, true);
-        }
-        else if ('x' in attribute && 'y' in attribute) {
-            return pointInRect({ x: attribute.x, y: attribute.y }, rect, true);
-        }
-        return false;
-    }
     getBaseMarkGroup() {
         const { baseMarkGroupName } = this.attribute;
         if (!baseMarkGroupName) {
@@ -21197,54 +21126,67 @@ class LabelBase extends AbstractComponent {
         this._removeLabel(prevTextMap);
         this._graphicToText = currentTextMap;
     }
-    _addLabel(label, texts, labelLines, index) {
-        const { text, labelLine } = label;
+    runEnterAnimation(text) {
+        if (this._enableAnimation === false || !this._animationConfig.enter) {
+            return;
+        }
         const relatedGraphic = this.getRelatedGraphic(text.attribute);
-        this._syncStateWithRelatedGraphic(relatedGraphic);
-        if (this._enableAnimation !== false && this._animationConfig.enter !== false) {
-            if (relatedGraphic) {
-                const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
-                if (text) {
-                    this.add(text);
-                }
-                if (labelLine) {
-                    labelLines.push(labelLine);
-                    this.add(labelLine);
+        const { enter } = this._animationConfig;
+        text.applyAnimationState(['enter'], [
+            {
+                name: 'enter',
+                animation: Object.assign(Object.assign({}, enter), { selfOnly: true, customParameters: {
+                        relatedGraphic
+                    } })
+            }
+        ]);
+    }
+    _runUpdateAnimation(prevLabel, currentLabel) {
+        if (this._enableAnimation === false || !this._animationConfig.update) {
+            return;
+        }
+        const { text: prevText, labelLine: prevLabelLine } = prevLabel;
+        const { text: curText, labelLine: curLabelLine } = currentLabel;
+        const { duration, easing } = this._animationConfig.update;
+        prevText.applyAnimationState(['update'], [
+            {
+                name: 'update',
+                animation: {
+                    type: 'labelUpdate',
+                    duration,
+                    easing,
+                    customParameters: {
+                        prevText,
+                        curText,
+                        prevLabelLine,
+                        curLabelLine
+                    }
                 }
-                this._animationConfig.enter.duration > 0 &&
-                    relatedGraphic.once('animate-bind', a => {
-                        text.setAttributes(from);
-                        labelLine && labelLine.setAttributes(from);
-                        const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, this._animationConfig.enter);
-                        relatedGraphic.on('afterAttributeUpdate', listener);
-                    });
             }
+        ]);
+    }
+    _addLabel(label, texts, labelLines, index) {
+        const { text, labelLine } = label;
+        if (text) {
+            this.add(text);
         }
-        else {
-            if (text) {
-                this.add(text);
-            }
-            if (labelLine) {
-                this.add(labelLine);
-            }
+        if (labelLine) {
+            this.add(labelLine);
         }
+        this.runEnterAnimation(text);
     }
     _updateLabel(prevLabel, currentLabel) {
         const { text: prevText, labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
-        if (this._enableAnimation !== false && this._animationConfig.update !== false) {
-            const { duration, easing } = this._animationConfig.update;
-            updateAnimation(prevText, curText, this._animationConfig.update);
-            if (prevLabelLine && curLabelLine) {
-                prevLabel.labelLine.animate().to(curLabelLine.attribute, duration, easing);
-            }
-        }
-        else {
+        if (this._enableAnimation === false || !this._animationConfig.update) {
             prevLabel.text.setAttributes(curText.attribute);
             if (prevLabelLine && curLabelLine) {
                 prevLabel.labelLine.setAttributes(curLabelLine.attribute);
             }
         }
+        else {
+            this._runUpdateAnimation(prevLabel, currentLabel);
+        }
     }
     _removeLabel(textMap) {
         const removeLabelAndLine = (label) => {
@@ -21254,12 +21196,23 @@ class LabelBase extends AbstractComponent {
             }
         };
         if (this._enableAnimation !== false && this._animationConfig.exit !== false) {
-            const { duration, easing } = this._animationConfig.exit;
             textMap.forEach(label => {
                 var _a;
-                (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
+                label.text.applyAnimationState(['exit'], [
+                    {
+                        name: 'exit',
+                        animation: Object.assign({ type: 'fadeOut' }, this._animationConfig.exit)
+                    }
+                ], () => {
                     removeLabelAndLine(label);
                 });
+                (_a = label.labelLine) === null || _a === void 0 ? void 0 : _a.applyAnimationState(['exit'], [
+                    {
+                        name: 'exit',
+                        animation: Object.assign({ type: 'fadeOut' }, this._animationConfig.exit)
+                    }
+                ], () => {
+                });
             });
         }
         else {
@@ -21280,75 +21233,6 @@ class LabelBase extends AbstractComponent {
             }
         });
     }
-    _syncStateWithRelatedGraphic(relatedGraphic) {
-        if (this.attribute.syncState && relatedGraphic) {
-            relatedGraphic.on('afterAttributeUpdate', this._handleRelatedGraphicSetState);
-        }
-    }
-    _afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, { mode, duration, easing, delay }) {
-        const listener = (event) => {
-            var _a, _b, _c;
-            const { detail } = event;
-            if (!detail) {
-                return {};
-            }
-            const step = (_a = detail.animationState) === null || _a === void 0 ? void 0 : _a.step;
-            const isValidAnimateState = detail.type === AttributeUpdateType.ANIMATE_UPDATE &&
-                step &&
-                !(step.type === 'wait' && ((_b = step.prev) === null || _b === void 0 ? void 0 : _b.type) == null);
-            if (!isValidAnimateState) {
-                return {};
-            }
-            if (detail.type === AttributeUpdateType.ANIMATE_END) {
-                text.setAttributes(to);
-                labelLine && labelLine.setAttributes(to);
-                return;
-            }
-            const onStart = () => {
-                if (relatedGraphic) {
-                    relatedGraphic.onAnimateBind = undefined;
-                    relatedGraphic.removeEventListener('afterAttributeUpdate', listener);
-                }
-            };
-            switch (mode) {
-                case 'after':
-                    if (detail.animationState.end) {
-                        text.animate({ onStart }).wait(delay).to(to, duration, easing);
-                        labelLine && labelLine.animate().wait(delay).to(to, duration, easing);
-                    }
-                    break;
-                case 'after-all':
-                    if (index === texts.length - 1) {
-                        if (detail.animationState.end) {
-                            texts.forEach(t => {
-                                t.animate({ onStart }).wait(delay).to(to, duration, easing);
-                            });
-                            labelLines.forEach(t => {
-                                t.animate().wait(delay).to(to, duration, easing);
-                            });
-                        }
-                    }
-                    break;
-                case 'same-time':
-                default:
-                    if (this._isCollectionBase) {
-                        const point = this._idToPoint.get(text.attribute.id);
-                        if (point &&
-                            (!text.animates || !text.animates.has('label-animate')) &&
-                            relatedGraphic.containsPoint(point.x, point.y, IContainPointMode.LOCAL, (_c = this.stage) === null || _c === void 0 ? void 0 : _c.getPickerService())) {
-                            text.animate({ onStart }).wait(delay).to(to, duration, easing);
-                            labelLine && labelLine.animate().wait(delay).to(to, duration, easing);
-                        }
-                    }
-                    else if (detail.animationState.isFirstFrameOfStep) {
-                        text.animate({ onStart }).wait(delay).to(to, duration, easing);
-                        labelLine && labelLine.animate().wait(delay).to(to, duration, easing);
-                    }
-                    break;
-            }
-        };
-        return listener;
-    }
     _smartInvert(labels) {
         var _a, _b, _c, _d, _e, _f, _g;
         const option = (isObject(this.attribute.smartInvert) ? this.attribute.smartInvert : {});
@@ -21367,7 +21251,7 @@ class LabelBase extends AbstractComponent {
                 continue;
             }
             const baseMark = this.getRelatedGraphic(label.attribute);
-            let backgroundColor = baseMark.attribute.fill;
+            let backgroundColor = baseMark.getAttributes(true).fill;
             let foregroundColor = label.attribute.fill;
             if (isObject(backgroundColor) && backgroundColor.gradient) {
                 const firstStopColor = (_g = (_f = backgroundColor.stops) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.color;
@@ -21687,7 +21571,7 @@ class ArcLabel extends LabelBase {
         data.forEach((d, index) => {
             var _a, _b;
             const currentMark = this._idToGraphic.get(d.id);
-            const graphicAttribute = currentMark.attribute;
+            const graphicAttribute = currentMark.getAttributes(true);
             const center = { x: (_a = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.y) !== null && _b !== void 0 ? _b : 0 };
             if (!isNil(data[index]) && !isNil(textBoundsArray[index])) {
                 const item = data[index] ? data[index] : null;
@@ -21872,8 +21756,8 @@ class ArcLabel extends LabelBase {
         };
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.attribute.outerRadius > maxRadius) {
-                maxRadius = currentMark.attribute.outerRadius;
+            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
+                maxRadius = currentMark.getAttributes(true).outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -22106,8 +21990,8 @@ class ArcLabel extends LabelBase {
         const labelConfig = attribute;
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.attribute.outerRadius > maxRadius) {
-                maxRadius = currentMark.attribute.outerRadius;
+            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
+                maxRadius = currentMark.getAttributes(true).outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -22149,8 +22033,8 @@ class ArcLabel extends LabelBase {
         const plotRect = { width: center.x * 2, height: center.y * 2 };
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.attribute.outerRadius > maxRadius) {
-                maxRadius = currentMark.attribute.outerRadius;
+            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
+                maxRadius = currentMark.getAttributes(true).outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -22221,8 +22105,8 @@ class ArcLabel extends LabelBase {
         const line1MinLength = labelConfig.line.line1MinLength;
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.attribute.outerRadius > maxRadius) {
-                maxRadius = currentMark.attribute.outerRadius;
+            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
+                maxRadius = currentMark.getAttributes(true).outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -22310,7 +22194,7 @@ class ArcLabel extends LabelBase {
                 });
             }
             if (baseMark.type === 'arc3d' && baseMark) {
-                const { beta, x, y } = baseMark.attribute;
+                const { beta, x, y } = baseMark.getAttributes(true);
                 lineGraphic.setAttributes({
                     beta,
                     anchor3d: [x, y]
@@ -27222,17 +27106,23 @@ class Slider extends AbstractComponent {
         };
         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;
-            const triggers = getEndTriggersOfDrag();
-            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-            triggers.forEach((trigger) => {
-                obj.addEventListener(trigger, this._onHandlerPointerUp);
-            });
+            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);
+            }
         };
         this._onHandlerPointerMove = (e) => {
             var _a, _b;
@@ -27275,20 +27165,38 @@ class Slider extends AbstractComponent {
             e.preventDefault();
             this._isChanging = false;
             this._currentHandler = null;
-            this._clearAllDragEvents();
+            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._onTrackPointerdown = (e) => {
             e.stopPropagation();
-            this._clearAllDragEvents();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._prePos = this._isHorizontal ? x : y;
-            const triggers = getEndTriggersOfDrag();
-            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.addEventListener('pointermove', this._onTrackPointerMove, { capture: true });
-            triggers.forEach((trigger) => {
-                obj.addEventListener(trigger, this._onTrackPointerUp);
-            });
+            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);
+            }
         };
         this._onTrackPointerMove = (e) => {
             e.stopPropagation();
@@ -27345,11 +27253,22 @@ class Slider extends AbstractComponent {
         this._onTrackPointerUp = (e) => {
             e.preventDefault();
             this._isChanging = false;
-            this._clearAllDragEvents();
+            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._onRailPointerDown = (e) => {
             e.stopPropagation();
-            this._clearAllDragEvents();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27737,18 +27656,6 @@ 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 });
-        triggers.forEach((trigger) => {
-            obj.removeEventListener(trigger, this._onHandlerPointerUp);
-        });
-        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true });
-        triggers.forEach((trigger) => {
-            obj.removeEventListener(trigger, this._onTrackPointerUp);
-        });
-    }
     _updateTrack() {
         const { inverse, railWidth, railHeight } = this.attribute;
         const startHandler = this._startHandler;
@@ -31346,97 +31253,6 @@ class StoryLabelItem extends AbstractComponent {
         this._titleBottom = titleBottom;
         this._line = line;
     }
-    appearAnimate(animateConfig) {
-        const { duration = 1000, easing = 'quadOut', symbolStartOuterType = 'scale', titleType = 'typewriter', titlePanelType = 'scale' } = animateConfig;
-        const symbolTime = duration / 10;
-        this._symbolStart.setAttributes({ scaleX: 0, scaleY: 0 });
-        this._symbolStart.animate().to({ scaleX: 1, scaleY: 1 }, symbolTime * 5, easing);
-        let symbolStartOuterFrom;
-        let symbolStartOuterTo;
-        if (symbolStartOuterType === 'scale') {
-            symbolStartOuterFrom = { scaleX: 0, scaleY: 0 };
-            symbolStartOuterTo = { scaleX: 1, scaleY: 1 };
-        }
-        else {
-            symbolStartOuterFrom = { clipRange: 0 };
-            symbolStartOuterTo = { clipRange: 1 };
-        }
-        this._symbolStartOuter.setAttributes(symbolStartOuterFrom);
-        this._symbolStartOuter.animate().to(symbolStartOuterTo, symbolTime * 5, easing);
-        this._symbolEnd.setAttributes({ scaleX: 0, scaleY: 0 });
-        this._symbolEnd
-            .animate()
-            .wait(symbolTime * 8)
-            .to({ scaleX: 1, scaleY: 1 }, symbolTime * 2, easing);
-        this._line.setAttributes({ clipRange: 0 });
-        this._line.animate().to({ clipRange: 1 }, symbolTime * 9, easing);
-        if (titleType === 'typewriter') {
-            const titleTopText = this._titleTop.attribute.text;
-            this._titleTop.setAttributes({ text: '' });
-            this._titleTop
-                .animate()
-                .wait(symbolTime * 5)
-                .play(new InputText({ text: '' }, { text: titleTopText }, symbolTime * 4, 'linear'));
-            const titleBottomText = this._titleBottom.attribute.text;
-            this._titleBottom.setAttributes({ text: '' });
-            this._titleBottom
-                .animate()
-                .wait(symbolTime * 5)
-                .play(new InputText({ text: '' }, { text: titleBottomText }, symbolTime * 4, 'linear'));
-        }
-        else {
-            this._titleTop.setAttributes({ dy: this._titleTop.AABBBounds.height() + 10 });
-            this._titleTop
-                .animate()
-                .wait(symbolTime * 5)
-                .to({ dy: 0 }, symbolTime * 4, 'linear');
-            this._titleBottom.setAttributes({ dy: -(10 + this._titleBottom.AABBBounds.height()) });
-            this._titleBottom
-                .animate()
-                .wait(symbolTime * 5)
-                .to({ dy: 0 }, symbolTime * 4, 'linear');
-        }
-        if (titlePanelType === 'scale') {
-            [this._titleTopPanel, this._titleBottomPanel].forEach(panel => {
-                const scaleX = panel.attribute.scaleX;
-                panel.setAttributes({ scaleX: 0 });
-                panel.animate().to({ scaleX }, duration, 'circInOut');
-            });
-        }
-        else if (titlePanelType === 'stroke') {
-            [this._titleTopPanel, this._titleBottomPanel].forEach(panel => {
-                const b = panel.AABBBounds;
-                const totalLen = (b.width() + b.height()) * 2;
-                panel.setAttributes({ lineDash: [0, totalLen * 10] });
-                panel.animate().to({ lineDash: [totalLen, totalLen * 10] }, duration, 'quadOut');
-            });
-        }
-    }
-    disappearAnimate(animateConfig) {
-        if (animateConfig.mode === 'scale') {
-            const { duration = 1000, easing = 'quadOut' } = animateConfig;
-            this.animate().to({ scaleX: 0, scaleY: 0 }, duration, easing);
-        }
-        else {
-            const { duration = 1000, easing = 'quadOut' } = animateConfig;
-            this._line.animate().to({ clipRange: 0 }, duration, easing);
-            this._symbolStart
-                .animate()
-                .wait(duration / 2)
-                .to({ scaleX: 0, scaleY: 0 }, duration / 2, easing);
-            this._symbolEnd.animate().to({ scaleX: 0, scaleY: 0 }, duration, easing);
-            this._titleTop.animate().to({ dy: this._titleTop.AABBBounds.height() + 10 }, duration / 2, easing);
-            this._titleBottom
-                .animate()
-                .to({ dy: -(10 + this._titleBottom.AABBBounds.height()) }, duration / 2, easing);
-            this._symbolStartOuter
-                .animate()
-                .wait(duration / 2)
-                .to({ clipRange: 0 }, duration / 2, easing);
-            this._titleTopPanel.animate().to({ scaleX: 0 }, duration, 'circInOut');
-            this._titleBottomPanel.animate().to({ scaleX: 0 }, duration, 'circInOut');
-        }
-    }
 }
 StoryLabelItem.defaultAttributes = {
     contentOffsetX: 100,
@@ -31482,6 +31298,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.7-alpha.3";
+const version = "0.23.0-alpha.3";
 
 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 };