@visactor/vrender-components 0.22.6 → 0.23.0-alpha.2

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 {
@@ -938,22 +938,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 +1126,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 +1190,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 +1243,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 +1319,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 +1356,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 +1618,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 +1949,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 +2111,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,530 +4212,229 @@ const EventTarget = {
   }
 };
 
-class Easing {
-  constructor() {}
-  static linear(t) {
-    return t;
-  }
-  static none() {
-    return this.linear;
+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 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 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]];
+    }
   }
-  static getPowIn(pow) {
-    return function (t) {
-      return Math.pow(t, pow);
-    };
+}
+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));
   }
-  static getPowOut(pow) {
-    return function (t) {
-      return 1 - Math.pow(1 - t, pow);
-    };
+  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);
   }
-  static getPowInOut(pow) {
-    return function (t) {
-      return (t *= 2) < 1 ? .5 * Math.pow(t, pow) : 1 - .5 * Math.abs(Math.pow(2 - t, pow));
-    };
+  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;
   }
-  static getBackIn(amount) {
-    return function (t) {
-      return t * t * ((amount + 1) * t - amount);
-    };
+  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 interpolateGradientRadialColor(fc, tc, ratio) {
+  const fStops = fc.stops,
+    tStops = tc.stops;
+  return {
+    gradient: "radial",
+    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,
+    r0: fc.r0 + (tc.r0 - fc.r0) * ratio,
+    r1: fc.r1 + (tc.r1 - fc.r1) * 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 interpolateGradientConicalColor(fc, tc, ratio) {
+  const fStops = fc.stops,
+    tStops = tc.stops;
+  return {
+    gradient: "conical",
+    startAngle: fc.startAngle + (tc.startAngle - fc.startAngle) * ratio,
+    endAngle: fc.endAngle + (tc.endAngle - fc.endAngle) * ratio,
+    x: fc.x + (tc.x - fc.x) * ratio,
+    y: fc.y + (tc.y - fc.y) * 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 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) {
+  return ColorStore.Get(fromColor, ColorType.Color255, _fromColorRGB), ColorStore.Get(toColor, ColorType.Color255, _toColorRGB), `rgba(${Math.round(_fromColorRGB[0] + (_toColorRGB[0] - _fromColorRGB[0]) * ratio)},${Math.round(_fromColorRGB[1] + (_toColorRGB[1] - _fromColorRGB[1]) * ratio)},${Math.round(_fromColorRGB[2] + (_toColorRGB[2] - _fromColorRGB[2]) * ratio)},${_fromColorRGB[3] + (_toColorRGB[3] - _fromColorRGB[3]) * ratio})`;
+}
+
+class ResourceLoader {
+  static GetImage(url, mark) {
+    var _a;
+    const data = ResourceLoader.cache.get(url);
+    data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(() => {
+      mark.imageLoadFail(url);
+    }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : ResourceLoader.loadImage(url, mark);
   }
-  static getBackOut(amount) {
-    return function (t) {
-      return --t * t * ((amount + 1) * t + amount) + 1;
-    };
+  static GetSvg(svgStr, mark) {
+    var _a;
+    let data = ResourceLoader.cache.get(svgStr);
+    data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(() => {
+      mark.imageLoadFail(svgStr);
+    }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(svgStr, data.data) : (data = {
+      type: "image",
+      loadState: "init"
+    }, ResourceLoader.cache.set(svgStr, data), data.dataPromise = application.global.loadSvg(svgStr), data.dataPromise ? (data.waitingMark = [mark], data.dataPromise.then(res => {
+      var _a;
+      data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
+        (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(svgStr, res.data)) : (data.loadState = "fail", mark.imageLoadFail(svgStr));
+      }), data.waitingMark && (data.waitingMark = []);
+    })) : (data.loadState = "fail", mark.imageLoadFail(svgStr)));
   }
-  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 GetFile(url, type) {
+    let data = ResourceLoader.cache.get(url);
+    return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+      type: type,
+      loadState: "init"
+    }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
   }
-  static sineIn(t) {
-    return 1 - Math.cos(t * Math.PI / 2);
+  static loading() {
+    setTimeout(() => {
+      if (!ResourceLoader.isLoading && ResourceLoader.toLoadAueue.length) {
+        ResourceLoader.isLoading = !0;
+        const tasks = ResourceLoader.toLoadAueue.splice(0, 10),
+          promises = [];
+        tasks.forEach(task => {
+          const {
+              url: url,
+              marks: marks
+            } = task,
+            data = {
+              type: "image",
+              loadState: "init"
+            };
+          if (ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise) {
+            data.waitingMark = marks;
+            const end = data.dataPromise.then(res => {
+              var _a;
+              data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
+                (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
+              }), data.waitingMark && (data.waitingMark = []);
+            });
+            promises.push(end);
+          } else data.loadState = "fail", marks.forEach(mark => mark.imageLoadFail(url));
+        }), Promise.all(promises).then(() => {
+          ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
+        }).catch(error => {
+          console.error(error), ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
+        });
+      }
+    }, 0);
   }
-  static sineOut(t) {
-    return Math.sin(t * Math.PI / 2);
+  static loadImage(url, mark) {
+    const index = getIndex(url, ResourceLoader.toLoadAueue);
+    if (-1 !== index) return ResourceLoader.toLoadAueue[index].marks.push(mark), void ResourceLoader.loading();
+    ResourceLoader.toLoadAueue.push({
+      url: url,
+      marks: [mark]
+    }), ResourceLoader.loading();
   }
-  static sineInOut(t) {
-    return -(Math.cos(Math.PI * t) - 1) / 2;
+  static improveImageLoading(url) {
+    const index = getIndex(url, ResourceLoader.toLoadAueue);
+    if (-1 !== index) {
+      const elememt = ResourceLoader.toLoadAueue.splice(index, 1);
+      ResourceLoader.toLoadAueue.unshift(elememt[0]);
+    }
   }
-  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;
-
-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();
-  }
-}
-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;
-  }
-  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]);
-      });
-    }
-    this.updateCount += 1, this.onUpdate(end, ratio, out), end && this.onEnd();
-  }
-}
-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);
+  static onLoadSuccess(cb) {
+    this.onLoadSuccessCb.push(cb);
   }
 }
-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;
-  }
+function getIndex(url, arr) {
+  for (let i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
+  return -1;
 }
-
-const DefaultStateAnimateConfig = {
-  duration: 200,
-  easing: "cubicOut"
-};
+ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [], ResourceLoader.onLoadSuccessCb = [];
 
 var Edge;
 !function (Edge) {
@@ -4842,424 +4541,129 @@ const 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)));
+class BaseSymbol {
+  bounds(size, bounds) {
+    if (isNumber(size)) {
+      const halfS = size / 2;
+      bounds.x1 = -halfS, bounds.x2 = halfS, bounds.y1 = -halfS, bounds.y2 = halfS;
+    } else bounds.x1 = -size[0] / 2, bounds.x2 = size[0] / 2, bounds.y1 = -size[1] / 2, bounds.y2 = size[1] / 2;
   }
-  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));
+  parseSize(size) {
+    return isNumber(size) ? size : Math.min(size[0], size[1]);
   }
 }
-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 {
+
+function circle(ctx, r, x, y, z) {
+  return z ? ctx.arc(x, y, r, 0, tau, !1, z) : ctx.arc(x, y, r, 0, tau), !1;
+}
+class CircleSymbol extends BaseSymbol {
   constructor() {
-    super(...arguments), this.fromText = "", this.toText = "";
-  }
-  getEndProps() {
-    return !1 === this.valid ? {} : {
-      text: this.to
-    };
+    super(...arguments), this.type = "circle", this.pathStr = "M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0";
   }
-  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()));
+  draw(ctx, size, x, y, z) {
+    return circle(ctx, this.parseSize(size) / 2, x, y, z);
   }
-  onEnd() {
-    this.target.detachShadow();
+  drawOffset(ctx, size, x, y, offset, z) {
+    return circle(ctx, this.parseSize(size) / 2 + offset, x, y, z);
   }
-  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);
+  drawToSvgPath(size, x, y, z) {
+    const r = this.parseSize(size) / 2;
+    return `M ${x - r}, ${y} a ${r},${r} 0 1,0 ${2 * r},0 a ${r},${r} 0 1,0 -${2 * r},0`;
   }
 }
+var circle$1 = new CircleSymbol();
 
-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;
+function cross(ctx, r, x, y, z) {
+  return ctx.moveTo(-3 * r + x, -r + y, z), ctx.lineTo(-r + x, -r + y, z), ctx.lineTo(-r + x, -3 * r + y, z), ctx.lineTo(r + x, -3 * r + y, z), ctx.lineTo(r + x, -r + y, z), ctx.lineTo(3 * r + x, -r + y, z), ctx.lineTo(3 * r + x, r + y, z), ctx.lineTo(r + x, r + y, z), ctx.lineTo(r + x, 3 * r + y, z), ctx.lineTo(-r + x, 3 * r + y, z), ctx.lineTo(-r + x, r + y, z), ctx.lineTo(-3 * r + x, r + y, z), ctx.closePath(), !0;
+}
+function crossOffset(ctx, r, x, y, offset, z) {
+  return ctx.moveTo(-3 * r + x - offset, -r + y - offset, z), ctx.lineTo(-r + x - offset, -r + y - offset, z), ctx.lineTo(-r + x - offset, -3 * r + y - offset, z), ctx.lineTo(r + x + offset, -3 * r + y - offset, z), ctx.lineTo(r + x + offset, -r + y - offset, z), ctx.lineTo(3 * r + x + offset, -r + y - offset, z), ctx.lineTo(3 * r + x + offset, r + y + offset, z), ctx.lineTo(r + x + offset, r + y + offset, z), ctx.lineTo(r + x + offset, 3 * r + y + offset, z), ctx.lineTo(-r + x - offset, 3 * r + y + offset, z), ctx.lineTo(-r + x - offset, r + y + offset, z), ctx.lineTo(-3 * r + x - offset, r + y + offset, z), ctx.closePath(), !0;
+}
+class CrossSymbol extends BaseSymbol {
+  constructor() {
+    super(...arguments), this.type = "cross", this.pathStr = "M-0.5,-0.2L-0.5,0.2L-0.2,0.2L-0.2,0.5L0.2,0.5L0.2,0.2L0.5,0.2L0.5,-0.2L0.2,-0.2L0.2,-0.5L-0.2,-0.5L-0.2,-0.2Z";
   }
-  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]];
-    }
+  draw(ctx, size, x, y, z) {
+    return cross(ctx, this.parseSize(size) / 6, x, y, z);
+  }
+  drawOffset(ctx, size, x, y, offset, z) {
+    return crossOffset(ctx, this.parseSize(size) / 6, x, y, offset, z);
   }
 }
-ColorStore.store255 = {}, ColorStore.store1 = {};
+var cross$1 = new CrossSymbol();
 
-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 diamond(ctx, r, x, y, z) {
+  return ctx.moveTo(x, y - r, z), ctx.lineTo(r + x, y, z), ctx.lineTo(x, y + r, z), ctx.lineTo(x - r, y, z), ctx.closePath(), !0;
 }
-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));
+class DiamondSymbol extends BaseSymbol {
+  constructor() {
+    super(...arguments), this.type = "diamond", this.pathStr = "M-0.5,0L0,-0.5L0.5,0L0,0.5Z";
   }
-  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);
+  draw(ctx, size, x, y, z) {
+    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
   }
-  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;
+  drawFitDir(ctx, size, x, y, z) {
+    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
+  }
+  drawOffset(ctx, size, x, y, offset, z) {
+    return diamond(ctx, this.parseSize(size) / 2 + offset, x, y, z);
   }
-  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
-    }))
-  };
+var diamond$1 = new DiamondSymbol();
+
+function square(ctx, r, x, y) {
+  const wh = 2 * r;
+  return ctx.rect(x - r, y - r, wh, wh), !1;
 }
-function interpolateGradientRadialColor(fc, tc, ratio) {
-  const fStops = fc.stops,
-    tStops = tc.stops;
-  return {
-    gradient: "radial",
-    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,
-    r0: fc.r0 + (tc.r0 - fc.r0) * ratio,
-    r1: fc.r1 + (tc.r1 - fc.r1) * 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
-    }))
-  };
+class SquareSymbol extends BaseSymbol {
+  constructor() {
+    super(...arguments), this.type = "square", this.pathStr = "M-0.5,-0.5h1v1h-1Z";
+  }
+  draw(ctx, size, x, y) {
+    return square(ctx, this.parseSize(size) / 2, x, y);
+  }
+  drawOffset(ctx, size, x, y, offset) {
+    return square(ctx, this.parseSize(size) / 2 + offset, x, y);
+  }
 }
-function interpolateGradientConicalColor(fc, tc, ratio) {
-  const fStops = fc.stops,
-    tStops = tc.stops;
-  return {
-    gradient: "conical",
-    startAngle: fc.startAngle + (tc.startAngle - fc.startAngle) * ratio,
-    endAngle: fc.endAngle + (tc.endAngle - fc.endAngle) * ratio,
-    x: fc.x + (tc.x - fc.x) * ratio,
-    y: fc.y + (tc.y - fc.y) * 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
-    }))
-  };
+var square$1 = new SquareSymbol();
+
+function trianglUpOffset(ctx, r, x, y) {
+  let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  return ctx.moveTo(x + r + 2 * offset, r + y + offset), ctx.lineTo(x - r - 2 * offset, r + y + offset), ctx.lineTo(x, y - r - 2 * offset), ctx.closePath(), !0;
 }
-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];
+class TriangleUpSymbol extends BaseSymbol {
+  constructor() {
+    super(...arguments), this.type = "triangleUp", this.pathStr = "M0.5,0.5 L-0.5,0.5 L0,-0.5 Z";
+  }
+  draw(ctx, size, x, y) {
+    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y);
+  }
+  drawOffset(ctx, size, x, y, offset) {
+    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y, offset);
+  }
 }
-const _fromColorRGB = [0, 0, 0, 0],
-  _toColorRGB = [0, 0, 0, 0];
-function colorStringInterpolationToStr(fromColor, toColor, ratio) {
-  return ColorStore.Get(fromColor, ColorType.Color255, _fromColorRGB), ColorStore.Get(toColor, ColorType.Color255, _toColorRGB), `rgba(${Math.round(_fromColorRGB[0] + (_toColorRGB[0] - _fromColorRGB[0]) * ratio)},${Math.round(_fromColorRGB[1] + (_toColorRGB[1] - _fromColorRGB[1]) * ratio)},${Math.round(_fromColorRGB[2] + (_toColorRGB[2] - _fromColorRGB[2]) * ratio)},${_fromColorRGB[3] + (_toColorRGB[3] - _fromColorRGB[3]) * ratio})`;
+var triangleUp = new TriangleUpSymbol();
+
+class TriangleSymbol extends TriangleUpSymbol {
+  constructor() {
+    super(...arguments), this.type = "triangle";
+  }
 }
+var triangle = new TriangleSymbol();
 
-class ResourceLoader {
-  static GetImage(url, mark) {
-    var _a;
-    const data = ResourceLoader.cache.get(url);
-    data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(() => {
-      mark.imageLoadFail(url);
-    }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : ResourceLoader.loadImage(url, mark);
-  }
-  static GetSvg(svgStr, mark) {
-    var _a;
-    let data = ResourceLoader.cache.get(svgStr);
-    data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(() => {
-      mark.imageLoadFail(svgStr);
-    }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(svgStr, data.data) : (data = {
-      type: "image",
-      loadState: "init"
-    }, ResourceLoader.cache.set(svgStr, data), data.dataPromise = application.global.loadSvg(svgStr), data.dataPromise ? (data.waitingMark = [mark], data.dataPromise.then(res => {
-      var _a;
-      data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
-        (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(svgStr, res.data)) : (data.loadState = "fail", mark.imageLoadFail(svgStr));
-      }), data.waitingMark && (data.waitingMark = []);
-    })) : (data.loadState = "fail", mark.imageLoadFail(svgStr)));
-  }
-  static GetFile(url, type) {
-    let data = ResourceLoader.cache.get(url);
-    return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
-      type: type,
-      loadState: "init"
-    }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
-  }
-  static loading() {
-    setTimeout(() => {
-      if (!ResourceLoader.isLoading && ResourceLoader.toLoadAueue.length) {
-        ResourceLoader.isLoading = !0;
-        const tasks = ResourceLoader.toLoadAueue.splice(0, 10),
-          promises = [];
-        tasks.forEach(task => {
-          const {
-              url: url,
-              marks: marks
-            } = task,
-            data = {
-              type: "image",
-              loadState: "init"
-            };
-          if (ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise) {
-            data.waitingMark = marks;
-            const end = data.dataPromise.then(res => {
-              var _a;
-              data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
-                (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
-              }), data.waitingMark && (data.waitingMark = []);
-            });
-            promises.push(end);
-          } else data.loadState = "fail", marks.forEach(mark => mark.imageLoadFail(url));
-        }), Promise.all(promises).then(() => {
-          ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
-        }).catch(error => {
-          console.error(error), ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
-        });
-      }
-    }, 0);
-  }
-  static loadImage(url, mark) {
-    const index = getIndex(url, ResourceLoader.toLoadAueue);
-    if (-1 !== index) return ResourceLoader.toLoadAueue[index].marks.push(mark), void ResourceLoader.loading();
-    ResourceLoader.toLoadAueue.push({
-      url: url,
-      marks: [mark]
-    }), ResourceLoader.loading();
-  }
-  static improveImageLoading(url) {
-    const index = getIndex(url, ResourceLoader.toLoadAueue);
-    if (-1 !== index) {
-      const elememt = ResourceLoader.toLoadAueue.splice(index, 1);
-      ResourceLoader.toLoadAueue.unshift(elememt[0]);
-    }
-  }
-  static onLoadSuccess(cb) {
-    this.onLoadSuccessCb.push(cb);
-  }
-}
-function getIndex(url, arr) {
-  for (let i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
-  return -1;
-}
-ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [], ResourceLoader.onLoadSuccessCb = [];
-
-class BaseSymbol {
-  bounds(size, bounds) {
-    if (isNumber(size)) {
-      const halfS = size / 2;
-      bounds.x1 = -halfS, bounds.x2 = halfS, bounds.y1 = -halfS, bounds.y2 = halfS;
-    } else bounds.x1 = -size[0] / 2, bounds.x2 = size[0] / 2, bounds.y1 = -size[1] / 2, bounds.y2 = size[1] / 2;
-  }
-  parseSize(size) {
-    return isNumber(size) ? size : Math.min(size[0], size[1]);
-  }
-}
-
-function circle(ctx, r, x, y, z) {
-  return z ? ctx.arc(x, y, r, 0, tau, !1, z) : ctx.arc(x, y, r, 0, tau), !1;
-}
-class CircleSymbol extends BaseSymbol {
-  constructor() {
-    super(...arguments), this.type = "circle", this.pathStr = "M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0";
-  }
-  draw(ctx, size, x, y, z) {
-    return circle(ctx, this.parseSize(size) / 2, x, y, z);
-  }
-  drawOffset(ctx, size, x, y, offset, z) {
-    return circle(ctx, this.parseSize(size) / 2 + offset, x, y, z);
-  }
-  drawToSvgPath(size, x, y, z) {
-    const r = this.parseSize(size) / 2;
-    return `M ${x - r}, ${y} a ${r},${r} 0 1,0 ${2 * r},0 a ${r},${r} 0 1,0 -${2 * r},0`;
-  }
-}
-var circle$1 = new CircleSymbol();
-
-function cross(ctx, r, x, y, z) {
-  return ctx.moveTo(-3 * r + x, -r + y, z), ctx.lineTo(-r + x, -r + y, z), ctx.lineTo(-r + x, -3 * r + y, z), ctx.lineTo(r + x, -3 * r + y, z), ctx.lineTo(r + x, -r + y, z), ctx.lineTo(3 * r + x, -r + y, z), ctx.lineTo(3 * r + x, r + y, z), ctx.lineTo(r + x, r + y, z), ctx.lineTo(r + x, 3 * r + y, z), ctx.lineTo(-r + x, 3 * r + y, z), ctx.lineTo(-r + x, r + y, z), ctx.lineTo(-3 * r + x, r + y, z), ctx.closePath(), !0;
-}
-function crossOffset(ctx, r, x, y, offset, z) {
-  return ctx.moveTo(-3 * r + x - offset, -r + y - offset, z), ctx.lineTo(-r + x - offset, -r + y - offset, z), ctx.lineTo(-r + x - offset, -3 * r + y - offset, z), ctx.lineTo(r + x + offset, -3 * r + y - offset, z), ctx.lineTo(r + x + offset, -r + y - offset, z), ctx.lineTo(3 * r + x + offset, -r + y - offset, z), ctx.lineTo(3 * r + x + offset, r + y + offset, z), ctx.lineTo(r + x + offset, r + y + offset, z), ctx.lineTo(r + x + offset, 3 * r + y + offset, z), ctx.lineTo(-r + x - offset, 3 * r + y + offset, z), ctx.lineTo(-r + x - offset, r + y + offset, z), ctx.lineTo(-3 * r + x - offset, r + y + offset, z), ctx.closePath(), !0;
-}
-class CrossSymbol extends BaseSymbol {
-  constructor() {
-    super(...arguments), this.type = "cross", this.pathStr = "M-0.5,-0.2L-0.5,0.2L-0.2,0.2L-0.2,0.5L0.2,0.5L0.2,0.2L0.5,0.2L0.5,-0.2L0.2,-0.2L0.2,-0.5L-0.2,-0.5L-0.2,-0.2Z";
-  }
-  draw(ctx, size, x, y, z) {
-    return cross(ctx, this.parseSize(size) / 6, x, y, z);
-  }
-  drawOffset(ctx, size, x, y, offset, z) {
-    return crossOffset(ctx, this.parseSize(size) / 6, x, y, offset, z);
-  }
-}
-var cross$1 = new CrossSymbol();
-
-function diamond(ctx, r, x, y, z) {
-  return ctx.moveTo(x, y - r, z), ctx.lineTo(r + x, y, z), ctx.lineTo(x, y + r, z), ctx.lineTo(x - r, y, z), ctx.closePath(), !0;
-}
-class DiamondSymbol extends BaseSymbol {
-  constructor() {
-    super(...arguments), this.type = "diamond", this.pathStr = "M-0.5,0L0,-0.5L0.5,0L0,0.5Z";
-  }
-  draw(ctx, size, x, y, z) {
-    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
-  }
-  drawFitDir(ctx, size, x, y, z) {
-    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
-  }
-  drawOffset(ctx, size, x, y, offset, z) {
-    return diamond(ctx, this.parseSize(size) / 2 + offset, x, y, z);
-  }
-}
-var diamond$1 = new DiamondSymbol();
-
-function square(ctx, r, x, y) {
-  const wh = 2 * r;
-  return ctx.rect(x - r, y - r, wh, wh), !1;
-}
-class SquareSymbol extends BaseSymbol {
-  constructor() {
-    super(...arguments), this.type = "square", this.pathStr = "M-0.5,-0.5h1v1h-1Z";
-  }
-  draw(ctx, size, x, y) {
-    return square(ctx, this.parseSize(size) / 2, x, y);
-  }
-  drawOffset(ctx, size, x, y, offset) {
-    return square(ctx, this.parseSize(size) / 2 + offset, x, y);
-  }
-}
-var square$1 = new SquareSymbol();
-
-function trianglUpOffset(ctx, r, x, y) {
-  let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  return ctx.moveTo(x + r + 2 * offset, r + y + offset), ctx.lineTo(x - r - 2 * offset, r + y + offset), ctx.lineTo(x, y - r - 2 * offset), ctx.closePath(), !0;
-}
-class TriangleUpSymbol extends BaseSymbol {
-  constructor() {
-    super(...arguments), this.type = "triangleUp", this.pathStr = "M0.5,0.5 L-0.5,0.5 L0,-0.5 Z";
-  }
-  draw(ctx, size, x, y) {
-    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y);
-  }
-  drawOffset(ctx, size, x, y, offset) {
-    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y, offset);
-  }
-}
-var triangleUp = new TriangleUpSymbol();
-
-class TriangleSymbol extends TriangleUpSymbol {
-  constructor() {
-    super(...arguments), this.type = "triangle";
-  }
-}
-var triangle = new TriangleSymbol();
-
-const kr = Math.sin(Math.PI / 10) / Math.sin(7 * Math.PI / 10),
-  kx = Math.sin(tau / 10) * kr,
-  ky = -Math.cos(tau / 10) * kr;
-function star(ctx, r, transX, transY) {
-  const x = kx * r,
-    y = ky * r;
-  ctx.moveTo(transX, -r + transY), ctx.lineTo(x + transX, y + transY);
-  for (let i = 1; i < 5; ++i) {
-    const a = tau * i / 5,
-      c = Math.cos(a),
-      s = Math.sin(a);
-    ctx.lineTo(s * r + transX, -c * r + transY), ctx.lineTo(c * x - s * y + transX, s * x + c * y + transY);
+const kr = Math.sin(Math.PI / 10) / Math.sin(7 * Math.PI / 10),
+  kx = Math.sin(tau / 10) * kr,
+  ky = -Math.cos(tau / 10) * kr;
+function star(ctx, r, transX, transY) {
+  const x = kx * r,
+    y = ky * r;
+  ctx.moveTo(transX, -r + transY), ctx.lineTo(x + transX, y + transY);
+  for (let i = 1; i < 5; ++i) {
+    const a = tau * i / 5,
+      c = Math.cos(a),
+      s = Math.sin(a);
+    ctx.lineTo(s * r + transX, -c * r + transY), ctx.lineTo(c * x - s * y + transX, s * x + c * y + transY);
   }
   return ctx.closePath(), !0;
 }
@@ -5945,6 +5349,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 +5420,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 +5729,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 +5743,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 +5752,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 +5937,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 +8007,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) {
@@ -11266,7 +10686,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 +10919,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 +11161,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 +11187,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
@@ -15889,284 +15309,1001 @@ function limitShapeInBounds(shape, bounds) {
     }
 }
 
-function loadTagComponent() {
-    registerGroup();
-    registerRect();
-    registerSymbol();
-    registerRichtext();
-    registerText();
+function loadTagComponent() {
+    registerGroup();
+    registerRect();
+    registerSymbol();
+    registerRichtext();
+    registerText();
+}
+
+loadTagComponent();
+class Tag extends AbstractComponent {
+    getBgRect() {
+        return this._bgRect;
+    }
+    getTextShape() {
+        return this._textShape;
+    }
+    constructor(attributes, options) {
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, Tag.defaultAttributes, attributes));
+        this.name = 'tag';
+        this._tagStates = [];
+        this._rectStates = [];
+        this._symbolStates = [];
+        this._textStates = [];
+    }
+    render() {
+        var _a, _b, _c;
+        this.cacheStates();
+        const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state, type, textAlwaysCenter, containerTextAlign } = this.attribute;
+        const parsedPadding = normalizePadding(padding);
+        const group = this.createOrUpdateChild('tag-content', { x: 0, y: 0, zIndex: 1 }, 'group');
+        let symbol;
+        let tagX = -parsedPadding[3];
+        let tagY = -parsedPadding[0];
+        let tagWidth = parsedPadding[1] + parsedPadding[3];
+        let tagHeight = parsedPadding[0] + parsedPadding[2];
+        let textX = 0;
+        let symbolPlaceWidth = 0;
+        const { visible: shapeVisible } = shape, shapeStyle = __rest(shape, ["visible"]);
+        if (isBoolean(shapeVisible)) {
+            const size = (shapeStyle === null || shapeStyle === void 0 ? void 0 : shapeStyle.size) || 10;
+            const maxSize = (isNumber(size) ? size : Math.max(size[0], size[1]));
+            symbol = group.createOrUpdateChild('tag-shape', Object.assign(Object.assign({ symbolType: 'circle', size, strokeBoundsBuffer: 0 }, shapeStyle), { visible: shapeVisible, x: maxSize / 2, y: maxSize / 2 }), 'symbol');
+            if (!isEmpty(state === null || state === void 0 ? void 0 : state.shape)) {
+                symbol.states = state.shape;
+            }
+            if (shapeVisible) {
+                symbolPlaceWidth = maxSize + space;
+            }
+        }
+        tagWidth += symbolPlaceWidth;
+        textX += symbolPlaceWidth;
+        let textShape;
+        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 });
+            textShape = group.createOrUpdateChild('tag-text', richTextAttrs, 'richtext');
+            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 });
+            if (isNil(textAttrs.lineHeight)) {
+                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);
+            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]);
+                }
+            }
+            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);
+                }
+                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: '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;
+                textShape.setAttributes({
+                    x: textX,
+                    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;
+                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);
+                }
+            }
+            else if (textBaseline === 'bottom') {
+                tagY -= tagHeight;
+                if (symbol) {
+                    symbol.setAttribute('y', -textHeight / 2);
+                }
+                group.setAttribute('y', -parsedPadding[2]);
+            }
+            else if (textBaseline === 'top') {
+                group.setAttribute('y', parsedPadding[0]);
+                if (symbol) {
+                    symbol.setAttribute('y', textHeight / 2);
+                }
+            }
+        }
+        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');
+            if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
+                bgRect.states = state.panel;
+            }
+            if (backgroundStyle.customShape) {
+                const customShape = backgroundStyle.customShape;
+                bgRect.pathProxy = (attrs) => {
+                    return customShape(this, attrs, new CustomPath2D());
+                };
+            }
+            this._bgRect = bgRect;
+        }
+        this._textShape = textShape;
+        this._symbol = symbol;
+        this.resetStates();
+    }
+    initAttributes(params, options) {
+        params = (options === null || options === void 0 ? void 0 : options.skipDefault) ? params : merge({}, Tag.defaultAttributes, params);
+        super.initAttributes(params);
+        this.render();
+    }
+    addState(stateName, keepCurrentStates, hasAnimation) {
+        super.addState(stateName, keepCurrentStates, hasAnimation);
+        if (this._textShape) {
+            this._textShape.addState(stateName, keepCurrentStates, hasAnimation);
+        }
+        if (this._bgRect) {
+            this._bgRect.addState(stateName, keepCurrentStates, hasAnimation);
+        }
+        if (this._symbol) {
+            this._symbol.addState(stateName, keepCurrentStates, hasAnimation);
+        }
+    }
+    removeState(stateName, hasAnimation) {
+        super.removeState(stateName, hasAnimation);
+        if (this._textShape) {
+            this._textShape.removeState(stateName, hasAnimation);
+        }
+        if (this._bgRect) {
+            this._bgRect.removeState(stateName, hasAnimation);
+        }
+        if (this._symbol) {
+            this._symbol.removeState(stateName, hasAnimation);
+        }
+    }
+    cacheStates() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        this._tagStates = (_b = (_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.slice()) !== null && _b !== void 0 ? _b : [];
+        this._rectStates = (_e = (_d = (_c = this._bgRect) === null || _c === void 0 ? void 0 : _c.currentStates) === null || _d === void 0 ? void 0 : _d.slice()) !== null && _e !== void 0 ? _e : [];
+        this._symbolStates = (_h = (_g = (_f = this._symbol) === null || _f === void 0 ? void 0 : _f.currentStates) === null || _g === void 0 ? void 0 : _g.slice()) !== null && _h !== void 0 ? _h : [];
+        this._textStates = (_l = (_k = (_j = this._textShape) === null || _j === void 0 ? void 0 : _j.currentStates) === null || _k === void 0 ? void 0 : _k.slice()) !== null && _l !== void 0 ? _l : [];
+        this.clearStates();
+        (_m = this._bgRect) === null || _m === void 0 ? void 0 : _m.clearStates();
+        (_o = this._symbol) === null || _o === void 0 ? void 0 : _o.clearStates();
+        (_p = this._textShape) === null || _p === void 0 ? void 0 : _p.clearStates();
+    }
+    resetStates() {
+        var _a, _b, _c;
+        this._tagStates.length && this.useStates(this._tagStates);
+        this._rectStates.length && ((_a = this._bgRect) === null || _a === void 0 ? void 0 : _a.useStates(this._rectStates));
+        this._symbolStates.length && ((_b = this._symbol) === null || _b === void 0 ? void 0 : _b.useStates(this._symbolStates));
+        this._textStates.length && ((_c = this._textShape) === null || _c === void 0 ? void 0 : _c.useStates(this._textStates));
+    }
+}
+Tag.defaultAttributes = {
+    visible: true,
+    textStyle: {
+        fontSize: 12,
+        fill: '#000',
+        textAlign: 'left',
+        textBaseline: 'top'
+    },
+    space: 4,
+    padding: 4,
+    shape: {
+        fill: '#000'
+    }
+};
+
+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 = interpolatePureColorArrayToStr(step.fromParsedProps.fill, step.toParsedProps.fill, ratio);
+    }, 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 = interpolatePureColorArrayToStr(step.fromParsedProps.stroke, step.toParsedProps.stroke, ratio);
+    }, 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();
+    };
+  }
+}
+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.getLastProps()[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);
+    }), 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() {
+    this._hasFirstRun || (this._hasFirstRun = !0, this.fromProps = this.getLastProps(), 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) {
+    cb ? this._endCb = cb : this._endCb && (this.target.setAttributes(this.props), this._endCb(this.animate, this));
+  }
+  getEndProps() {
+    return this.props;
+  }
+  getFromProps() {
+    return this.fromProps;
+  }
+  getMergedEndProps() {
+    return this.getEndProps();
+  }
+}
+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 this.updateStepAfterAppend(step), step.bind(this.target, this), this;
+  }
+  wait(delay) {
+    const step = new WaitStep(AnimateStepType.wait, {}, delay, "linear");
+    return this.updateStepAfterAppend(step), step.bind(this.target, this), 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 this.updateStepAfterAppend(customAnimate), customAnimate.bind(this.target, this), 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) {
+    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();
+  }
 }
 
-loadTagComponent();
-class Tag extends AbstractComponent {
-    getBgRect() {
-        return this._bgRect;
-    }
-    getTextShape() {
-        return this._textShape;
-    }
-    constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, Tag.defaultAttributes, attributes));
-        this.name = 'tag';
-        this._tagStates = [];
-        this._rectStates = [];
-        this._symbolStates = [];
-        this._textStates = [];
-    }
-    render() {
-        var _a, _b, _c;
-        this.cacheStates();
-        const { text = '', textStyle = {}, shape = {}, panel = {}, space = 4, minWidth, maxWidth, padding = 4, visible, state, type, textAlwaysCenter, containerTextAlign } = this.attribute;
-        const parsedPadding = normalizePadding(padding);
-        const group = this.createOrUpdateChild('tag-content', { x: 0, y: 0, zIndex: 1 }, 'group');
-        let symbol;
-        let tagX = -parsedPadding[3];
-        let tagY = -parsedPadding[0];
-        let tagWidth = parsedPadding[1] + parsedPadding[3];
-        let tagHeight = parsedPadding[0] + parsedPadding[2];
-        let textX = 0;
-        let symbolPlaceWidth = 0;
-        const { visible: shapeVisible } = shape, shapeStyle = __rest(shape, ["visible"]);
-        if (isBoolean(shapeVisible)) {
-            const size = (shapeStyle === null || shapeStyle === void 0 ? void 0 : shapeStyle.size) || 10;
-            const maxSize = (isNumber(size) ? size : Math.max(size[0], size[1]));
-            symbol = group.createOrUpdateChild('tag-shape', Object.assign(Object.assign({ symbolType: 'circle', size, strokeBoundsBuffer: 0 }, shapeStyle), { visible: shapeVisible, x: maxSize / 2, y: maxSize / 2 }), 'symbol');
-            if (!isEmpty(state === null || state === void 0 ? void 0 : state.shape)) {
-                symbol.states = state.shape;
-            }
-            if (shapeVisible) {
-                symbolPlaceWidth = maxSize + space;
-            }
-        }
-        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();
-        }
-        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 });
-            if (isNil(textAttrs.lineHeight)) {
-                textAttrs.lineHeight = textStyle.fontSize;
-            }
-            textShape = group.createOrUpdateChild('tag-text', textAttrs, '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;
-            }
-            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;
-        }
-        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);
-            }
-            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';
-        const updateTextAttrs = (textX, textAlign) => {
-            if (textShape.type === 'richtext') {
-                textShape.setAttributes({
-                    x: textX,
-                    textAlign,
-                    textConfig: array(textShape.attribute.textConfig).map(t => {
-                        return Object.assign(Object.assign({}, t), { textAlign });
-                    })
-                });
-            }
-            else {
-                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
-                });
-            }
-        }
-        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 (textBaseline === 'middle') {
-            tagY -= tagHeight / 2;
-            if (symbol) {
-                symbol.setAttribute('y', 0);
-            }
-        }
-        else if (textBaseline === 'bottom') {
-            tagY -= tagHeight;
-            if (symbol) {
-                symbol.setAttribute('y', -textHeight / 2);
-            }
-            group.setAttribute('y', -parsedPadding[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');
-            if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
-                bgRect.states = state.panel;
-            }
-            if (backgroundStyle.customShape) {
-                const customShape = backgroundStyle.customShape;
-                bgRect.pathProxy = (attrs) => {
-                    return customShape(this, attrs, new CustomPath2D());
-                };
-            }
-            this._bgRect = bgRect;
-        }
-        this._textShape = textShape;
-        this._symbol = symbol;
-        this.resetStates();
-    }
-    initAttributes(params, options) {
-        params = (options === null || options === void 0 ? void 0 : options.skipDefault) ? params : merge({}, Tag.defaultAttributes, params);
-        super.initAttributes(params);
-        this.render();
-    }
-    addState(stateName, keepCurrentStates, hasAnimation) {
-        super.addState(stateName, keepCurrentStates, hasAnimation);
-        if (this._textShape) {
-            this._textShape.addState(stateName, keepCurrentStates, hasAnimation);
-        }
-        if (this._bgRect) {
-            this._bgRect.addState(stateName, keepCurrentStates, hasAnimation);
-        }
-        if (this._symbol) {
-            this._symbol.addState(stateName, keepCurrentStates, hasAnimation);
-        }
-    }
-    removeState(stateName, hasAnimation) {
-        super.removeState(stateName, hasAnimation);
-        if (this._textShape) {
-            this._textShape.removeState(stateName, hasAnimation);
-        }
-        if (this._bgRect) {
-            this._bgRect.removeState(stateName, hasAnimation);
-        }
-        if (this._symbol) {
-            this._symbol.removeState(stateName, hasAnimation);
-        }
-    }
-    cacheStates() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        this._tagStates = (_b = (_a = this.currentStates) === null || _a === void 0 ? void 0 : _a.slice()) !== null && _b !== void 0 ? _b : [];
-        this._rectStates = (_e = (_d = (_c = this._bgRect) === null || _c === void 0 ? void 0 : _c.currentStates) === null || _d === void 0 ? void 0 : _d.slice()) !== null && _e !== void 0 ? _e : [];
-        this._symbolStates = (_h = (_g = (_f = this._symbol) === null || _f === void 0 ? void 0 : _f.currentStates) === null || _g === void 0 ? void 0 : _g.slice()) !== null && _h !== void 0 ? _h : [];
-        this._textStates = (_l = (_k = (_j = this._textShape) === null || _j === void 0 ? void 0 : _j.currentStates) === null || _k === void 0 ? void 0 : _k.slice()) !== null && _l !== void 0 ? _l : [];
-        this.clearStates();
-        (_m = this._bgRect) === null || _m === void 0 ? void 0 : _m.clearStates();
-        (_o = this._symbol) === null || _o === void 0 ? void 0 : _o.clearStates();
-        (_p = this._textShape) === null || _p === void 0 ? void 0 : _p.clearStates();
+class IncreaseCount extends ACustomAnimate {
+  constructor(from, to, duration, easing, params) {
+    super(from, to, duration, easing, params), this.formatTemplate = null, this.decimalLength = null == params ? void 0 : params.decimalLength, (null == params ? void 0 : params.formatTemplate) && params.formatTemplate.includes("{{var}}") && (this.formatTemplate = params.formatTemplate);
+  }
+  onFirstRun() {
+    var _a, _b, _c;
+    const fromProps = this.getLastProps(),
+      toProps = this.getEndProps(),
+      fromText = null !== (_a = fromProps.text) && void 0 !== _a ? _a : 0,
+      toText = null !== (_b = toProps.text) && void 0 !== _b ? _b : 0;
+    this.valid = !0;
+    let fromNum = 0,
+      toNum = 0,
+      fromFormat = "",
+      toFormat = "",
+      maxDecimalLength = 0;
+    if ("number" == typeof fromText) {
+      fromNum = fromText;
+      const decimalPart = fromText.toString().split(".")[1] || "";
+      maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+    } else {
+      if ("string" != typeof fromText) return void (this.valid = !1);
+      if (fromText.endsWith("%")) {
+        fromFormat = "%";
+        const cleanNumStr = fromText.substring(0, fromText.length - 1).replace(/,/g, "");
+        if (fromNum = parseFloat(cleanNumStr) / 100, isNaN(fromNum)) return void (this.valid = !1);
+        const decimalPart = cleanNumStr.split(".")[1] || "";
+        maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length + 2);
+      } else {
+        const cleanNumStr = fromText.replace(/,/g, "");
+        if (fromNum = parseFloat(cleanNumStr), isNaN(fromNum)) return void (this.valid = !1);
+        fromText.includes(",") && (fromFormat = ",");
+        const decimalPart = cleanNumStr.split(".")[1] || "";
+        maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+      }
     }
-    resetStates() {
-        var _a, _b, _c;
-        this._tagStates.length && this.useStates(this._tagStates);
-        this._rectStates.length && ((_a = this._bgRect) === null || _a === void 0 ? void 0 : _a.useStates(this._rectStates));
-        this._symbolStates.length && ((_b = this._symbol) === null || _b === void 0 ? void 0 : _b.useStates(this._symbolStates));
-        this._textStates.length && ((_c = this._textShape) === null || _c === void 0 ? void 0 : _c.useStates(this._textStates));
+    if ("number" == typeof toText) {
+      toNum = toText;
+      const decimalPart = toText.toString().split(".")[1] || "";
+      maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+    } else {
+      if ("string" != typeof toText) return void (this.valid = !1);
+      if (toText.endsWith("%")) {
+        toFormat = "%";
+        const cleanNumStr = toText.substring(0, toText.length - 1).replace(/,/g, "");
+        if (toNum = parseFloat(cleanNumStr) / 100, isNaN(toNum)) return void (this.valid = !1);
+        const decimalPart = cleanNumStr.split(".")[1] || "";
+        maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length + 2);
+      } else {
+        const cleanNumStr = toText.replace(/,/g, "");
+        if (toNum = parseFloat(cleanNumStr), isNaN(toNum)) return void (this.valid = !1);
+        toText.includes(",") && (toFormat = ",");
+        const decimalPart = cleanNumStr.split(".")[1] || "";
+        maxDecimalLength = Math.max(maxDecimalLength, decimalPart.length);
+      }
     }
+    if (null === (_c = this.params) || void 0 === _c ? void 0 : _c.format) {
+      switch (this.params.format) {
+        case "percent":
+          this.format = "%";
+          break;
+        case "thousandth":
+          this.format = ",";
+          break;
+        case "none":
+          this.format = "";
+          break;
+        default:
+          this.format = toFormat || fromFormat;
+      }
+      "%" === this.format && "%" !== toFormat && "%" !== fromFormat && void 0 === this.decimalLength && (this.decimalLength = 2), "%" === this.format || "%" !== toFormat && "%" !== fromFormat || (fromNum *= 100, toNum *= 100);
+    } else this.format = toFormat || fromFormat;
+    this.fromNumber = fromNum, this.toNumber = toNum, void 0 === this.decimalLength && (this.decimalLength = maxDecimalLength);
+  }
+  onEnd(cb) {
+    super.onEnd(cb), cb || this.props && this.target.setAttributes(this.props);
+  }
+  onUpdate(end, ratio, out) {
+    if (!this.valid) return;
+    const currentNumber = this.fromNumber + (this.toNumber - this.fromNumber) * ratio;
+    let formattedText = "";
+    const format = this.format,
+      numberWithDecimals = ("%" === format ? 100 * currentNumber : currentNumber).toFixed(this.decimalLength);
+    let formattedWithBasicFormat,
+      formattedNumber = numberWithDecimals;
+    if (parseFloat(numberWithDecimals) === Math.floor(parseFloat(numberWithDecimals)) && (formattedNumber = Math.floor(parseFloat(numberWithDecimals))), "%" === format) formattedWithBasicFormat = `${formattedNumber}%`;else if ("," === format) {
+      const parts = formattedNumber.toString().split(".");
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), formattedWithBasicFormat = parts.join(".");
+    } else formattedWithBasicFormat = formattedNumber;
+    formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, this.target.setAttribute("text", formattedText);
+  }
+}
+
+class InputText extends ACustomAnimate {
+  constructor(from, to, duration, easing, params) {
+    super(from, to, duration, easing, params), this.fromText = "", this.toText = "", this.showCursor = !1, this.cursorChar = "|", this.blinkCursor = !0, this.beforeText = "", this.afterText = "", void 0 !== (null == params ? void 0 : params.showCursor) && (this.showCursor = params.showCursor), void 0 !== (null == params ? void 0 : params.cursorChar) && (this.cursorChar = params.cursorChar), void 0 !== (null == params ? void 0 : params.blinkCursor) && (this.blinkCursor = params.blinkCursor), void 0 !== (null == params ? void 0 : params.beforeText) && (this.beforeText = params.beforeText), void 0 !== (null == params ? void 0 : params.afterText) && (this.afterText = params.afterText);
+  }
+  onFirstRun() {
+    var _a, _b;
+    const fromProps = this.getLastProps(),
+      toProps = this.getEndProps(),
+      fromText = null !== (_a = fromProps.text) && void 0 !== _a ? _a : "",
+      toText = null !== (_b = toProps.text) && void 0 !== _b ? _b : "";
+    this.valid = !0, this.fromText = fromText.toString(), this.toText = toText.toString(), this.toText || "" === this.toText || (this.valid = !1);
+  }
+  onEnd(cb) {
+    super.onEnd(cb), cb || (this.showCursor && !this.blinkCursor ? this.target.setAttribute("text", this.beforeText + this.toText + this.cursorChar + this.afterText) : this.target.setAttribute("text", this.beforeText + this.toText + this.afterText));
+  }
+  onUpdate(end, ratio, out) {
+    if (!this.valid) return;
+    const totalChars = this.toText.length,
+      fromChars = this.fromText.length;
+    let currentLength, currentText;
+    fromChars > totalChars ? (currentLength = Math.round(fromChars - (fromChars - totalChars) * ratio), currentText = this.fromText.substring(0, currentLength)) : (currentLength = Math.round(fromChars + (totalChars - fromChars) * ratio), currentText = this.toText.startsWith(this.fromText) ? this.toText.substring(0, currentLength) : currentLength <= fromChars ? this.fromText.substring(0, currentLength) : this.toText.substring(0, currentLength - fromChars + Math.min(fromChars, currentLength)));
+    let displayText = this.beforeText + currentText + this.afterText;
+    if (this.showCursor) if (this.blinkCursor) {
+      const blinkRate = .1;
+      Math.floor(ratio / blinkRate) % 2 == 0 && (displayText = this.beforeText + currentText + this.cursorChar + this.afterText);
+    } else displayText = this.beforeText + currentText + this.cursorChar + this.afterText;
+    this.target.setAttribute("text", displayText);
+  }
 }
-Tag.defaultAttributes = {
-    visible: true,
-    textStyle: {
-        fontSize: 12,
-        fill: '#000',
-        textAlign: 'left',
-        textBaseline: 'top'
-    },
-    space: 4,
-    padding: 4,
-    shape: {
-        fill: '#000'
-    }
-};
 
 const DEFAULT_THEME = {
     visible: true,
@@ -20023,11 +20160,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),
@@ -20198,18 +20334,9 @@ function getAnimationAttributes(textAttribute, type) {
     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);
+        prev.animate().to(next.attribute, duration, easing);
         if (increaseEffect && prev.type === 'text' && next.type === 'text') {
             playIncreaseCount(prev, next, duration, easing);
         }
@@ -20219,7 +20346,7 @@ function updateAnimation(prev, next, animationConfig) {
         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);
+            prev.animate().to(to, duration, easing);
         }
         if (increaseEffect && prev.type === 'text' && next.type === 'text') {
             playIncreaseCount(prev, next, duration, easing);
@@ -20978,9 +21105,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++) {
@@ -21072,7 +21197,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)) {
@@ -21112,23 +21237,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) {
@@ -31500,6 +31608,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.6";
+const version = "0.23.0-alpha.2";
 
 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 };