@visactor/vtable-plugins 1.17.6 → 1.17.7-alpha.1

package/dist/vtable-plugins.js

@@ -1525,10 +1525,13 @@
 
     class CurvePath {
       constructor() {
-        this.curves = [], this.bounds = new AABBBounds();
+        this._curves = [], this.bounds = new AABBBounds();
+      }
+      get curves() {
+        return this._curves;
       }
       getCurveLengths() {
-        return this.curves.map(curve => curve.getLength());
+        return this._curves.map(curve => curve.getLength());
       }
       getPointAt(t) {
         return {
@@ -1770,7 +1773,83 @@
         y = cubicCalc(p0.y, p1.y, p2.y, p3.y, t);
       return new Point(x, y);
     }
+    function quadCalc(p0, p1, p2, t) {
+      const one = 1 - t;
+      return one * one * p0 + 2 * one * t * p1 + t * t * p2;
+    }
+    function quadPointAt(p0, p1, p2, t) {
+      const x = quadCalc(p0.x, p1.x, p2.x, t),
+        y = quadCalc(p0.y, p1.y, p2.y, t);
+      return new Point(x, y);
+    }
+    function quadLength(p0, p1, p2, iterationCount) {
+      return snapLength([p0.x, p1.x, p2.x], [p0.y, p1.y, p2.y]);
+    }
 
+    class QuadraticBezierCurve extends Curve {
+      constructor(p0, p1, p2) {
+        super(), this.type = CurveTypeEnum.QuadraticBezierCurve, this.p0 = p0, this.p1 = p1, this.p2 = p2;
+      }
+      _validPoint() {
+        return Number.isFinite(this.p0.x + this.p0.y + this.p1.x + this.p1.y + this.p2.x + this.p2.y);
+      }
+      getPointAt(t) {
+        if (!1 !== this.defined) return quadPointAt(this.p0, this.p1, this.p2, t);
+        throw new Error("defined为false的点不能getPointAt");
+      }
+      calcLength() {
+        return this._validPoint() ? quadLength(this.p0, this.p1, this.p2) : 60;
+      }
+      calcProjLength(direction) {
+        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),
+          maxT = min(t + .01, 1),
+          minP = this.getPointAt(minT),
+          maxP = this.getPointAt(maxT);
+        return atan2(maxP.y - minP.y, maxP.x - minP.x);
+      }
+      draw(path, x, y, sx, sy, percent) {
+        if (path.moveTo(this.p0.x * sx + x, this.p0.y * sy + y), percent >= 1) path.quadraticCurveTo(this.p1.x * sx + x, this.p1.y * sy + y, this.p2.x * sx + x, this.p2.y * sy + y);else if (percent > 0) {
+          const [curve1] = divideQuad(this, percent);
+          path.quadraticCurveTo(curve1.p1.x * sx + x, curve1.p1.y * sy + y, curve1.p2.x * sx + x, curve1.p2.y * sy + y);
+        }
+      }
+      getYAt(x) {
+        throw new Error("QuadraticBezierCurve暂不支持getYAt");
+      }
+      includeX(x) {
+        throw new Error("QuadraticBezierCurve暂不支持includeX");
+      }
+    }
+
+    function divideCubic(curve, t) {
+      const {
+          p0: p0,
+          p1: p1,
+          p2: p2,
+          p3: p3
+        } = curve,
+        pt = cubicPointAt(p0, p1, p2, p3, t),
+        c1 = PointService.pointAtPP(p0, p1, t),
+        c2 = PointService.pointAtPP(p1, p2, t),
+        c3 = PointService.pointAtPP(p2, p3, t),
+        c12 = PointService.pointAtPP(c1, c2, t),
+        c23 = PointService.pointAtPP(c2, c3, t);
+      return [new CubicBezierCurve(p0, c1, c12, pt), new CubicBezierCurve(pt, c23, c3, p3)];
+    }
+    function divideQuad(curve, t) {
+      const {
+          p0: p0,
+          p1: p1,
+          p2: p2
+        } = curve,
+        pt = quadPointAt(p0, p1, p2, t),
+        c1 = PointService.pointAtPP(p0, p1, t),
+        c2 = PointService.pointAtPP(p1, p2, t);
+      return [new QuadraticBezierCurve(p0, c1, pt), new QuadraticBezierCurve(pt, c2, p2)];
+    }
     class CubicBezierCurve extends Curve {
       constructor(p0, p1, p2, p3) {
         super(), this.type = CurveTypeEnum.CubicBezierCurve, this.p0 = p0, this.p1 = p1, this.p2 = p2, this.p3 = p3;
@@ -1795,6 +1874,22 @@
           maxP = this.getPointAt(maxT);
         return atan2(maxP.y - minP.y, maxP.x - minP.x);
       }
+      draw(path, x, y, sx, sy, percent) {
+        if (path.moveTo(this.p0.x * sx + x, this.p0.y * sy + y), percent >= 1) path.bezierCurveTo(this.p1.x * sx + x, this.p1.y * sy + y, this.p2.x * sx + x, this.p2.y * sy + y, this.p3.x * sx + x, this.p3.y * sy + y);else if (percent > 0) {
+          const [curve1] = divideCubic(this, percent);
+          path.bezierCurveTo(curve1.p1.x * sx + x, curve1.p1.y * sy + y, curve1.p2.x * sx + x, curve1.p2.y * sy + y, curve1.p3.x * sx + x, curve1.p3.y * sy + y);
+        }
+      }
+      includeX(x) {
+        const minX = min(this.p0.x, this.p1.x, this.p2.x, this.p3.x),
+          maxX = max(this.p0.x, this.p1.x, this.p2.x, this.p3.x);
+        return x >= minX && x <= maxX;
+      }
+      getYAt(x) {
+        const minX = min(this.p0.x, this.p1.x, this.p2.x, this.p3.x),
+          t = (x - minX) / (max(this.p0.x, this.p1.x, this.p2.x, this.p3.x) - minX);
+        return this.getPointAt(t).y;
+      }
     }
 
     class LineCurve extends Curve {
@@ -1817,6 +1912,25 @@
       calcProjLength(direction) {
         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) {
+          const p = this.getPointAt(percent);
+          path.lineTo(p.x * sx + x, p.y * sy + y);
+        }
+      }
+      includeX(x) {
+        return x >= this.p0.x && x <= this.p1.x || x >= this.p1.x && x <= this.p0.x;
+      }
+      getYAt(x) {
+        if (this.includeX(x)) {
+          let minP = this.p0,
+            maxP = this.p1;
+          this.p0.x > this.p1.x && (minP = this.p1, maxP = this.p0);
+          const percent = (x - minP.x) / (maxP.x - minP.x);
+          return minP.y + percent * (maxP.y - minP.y);
+        }
+        return 1 / 0;
+      }
     }
 
     class SegContext {
@@ -2155,7 +2269,7 @@
           default:
             if (this._t <= 0) this.context.lineTo(this._x, y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);else {
               const x1 = this._x * (1 - this._t) + x * this._t;
-              this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
+              .5 === this._t ? this.context.lineTo(x1, this._y, !1 !== this._lastDefined, this.lastPoint) : this.context.lineTo(x1, this._y, !1 !== this._lastDefined && !1 !== p.defined, this.lastPoint), this.context.lineTo(x1, y, !1 !== this._lastDefined && !1 !== p.defined, p);
             }
         }
         this._lastDefined = p.defined, this._x = x, this._y = y, this.lastPoint = p;
@@ -2353,6 +2467,45 @@
     }
     const genCatmullRomClosedSegments = commonGenCatmullRomSegments("catmullRomClosed", CatmullRomClosed);
 
+    class CurveContext {
+      constructor(path) {
+        this.path = path, this._lastX = this._lastY = this._startX = this._startY = 0;
+      }
+      moveTo(x, y) {
+        return this._lastX = this._startX = x, this._lastY = this._startY = y, this;
+      }
+      lineTo(x, y) {
+        const curve = this.addLinearCurve(x, y);
+        this.path.addCurve(curve), this._lastX = x, this._lastY = y;
+      }
+      addLinearCurve(x, y) {
+        return new LineCurve(new Point(this._lastX, this._lastY), new Point(x, y));
+      }
+      quadraticCurveTo(aCPx, aCPy, aX, aY) {
+        const curve = new QuadraticBezierCurve(new Point(this._lastX, this._lastY), new Point(aCPx, aCPy), new Point(aX, aY));
+        this.path.addCurve(curve), this._lastX = aX, this._lastY = aY;
+      }
+      bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+        const curve = new CubicBezierCurve(new Point(this._lastX, this._lastY), new Point(cp1x, cp1y), new Point(cp2x, cp2y), new Point(x, y));
+        this.path.addCurve(curve), this._lastX = x, this._lastY = y;
+      }
+      arcTo(aX1, aY1, aX2, aY2, aRadius) {
+        throw new Error("CurveContext不支持调用arcTo");
+      }
+      ellipse(aX, aY, xRadius, yRadius, aRotation, aStartAngle, aEndAngle, aClockwise) {
+        throw new Error("CurveContext不支持调用ellipse");
+      }
+      rect(x, y, w, h) {
+        throw new Error("CurveContext不支持调用rect");
+      }
+      arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+        throw new Error("CurveContext不支持调用arc");
+      }
+      closePath() {
+        this.path.curves.length < 2 || this.lineTo(this._startX, this._startY);
+      }
+    }
+
     function calcLineCache(points, curveType, params) {
       var _a, _b;
       switch (curveType) {
@@ -2384,6 +2537,9 @@
       constructor(ctx) {
         super(), this.commandList = [], ctx && (this._ctx = ctx), this._boundsContext = new BoundsContext(this.bounds);
       }
+      get curves() {
+        return this.tryBuildCurves();
+      }
       setCtx(ctx) {
         this._ctx = ctx;
       }
@@ -2415,14 +2571,21 @@
         return this.commandList.push([enumCommandMap.Z]), this._ctx && this._ctx.closePath(), this;
       }
       addCurve(curve) {
-        this.curves.push(curve);
+        this._curves.push(curve);
       }
       clear() {
-        this.transformCbList = null, this.commandList.length = 0, this.curves.length = 0;
+        this.transformCbList = null, this.commandList.length = 0, this._curves.length = 0;
       }
       beginPath() {
         this.clear();
       }
+      tryBuildCurves() {
+        if (!this._curves || !this._curves.length) {
+          const curveContext = new CurveContext(this);
+          renderCommandList(this.commandList, curveContext, 0, 0, 1, 1);
+        }
+        return this._curves;
+      }
       toString() {
         if (!this.toStringCbList) {
           const list = [];
@@ -2453,7 +2616,7 @@
         } = line.attribute;
         if (!points) return;
         const cache = calcLineCache(points, curveType);
-        "x" === clipRangeByDimension ? this.direction = Direction.ROW : "y" === clipRangeByDimension ? this.direction = Direction.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;
@@ -2541,10 +2704,10 @@
               x = current[5], y = current[6], controlX = current[3], controlY = current[4], this.bezierCurveTo(current[1] + l, current[2] + t, controlX + l, controlY + t, x + l, y + t);
               break;
             case "s":
-              tempX = x + current[3], tempY = y + current[4], controlX = 2 * x - controlX, controlY = 2 * y - controlY, this.bezierCurveTo(controlX + l, controlY + t, x + current[1] + l, y + current[2] + t, tempX + l, tempY + t), controlX = x + current[1], controlY = y + current[2], x = tempX, y = tempY;
+              tempX = x + current[3], tempY = y + current[4], null === previous[0].match(/[CcSs]/) ? (controlX = x, controlY = y) : (controlX = 2 * x - controlX, controlY = 2 * y - controlY), tempControlX = x + current[1], tempControlY = y + current[2], this.bezierCurveTo(controlX + l, controlY + t, tempControlX + l, tempControlY + t, tempX + l, tempY + t), controlX = tempControlX, controlY = tempControlY, x = tempX, y = tempY;
               break;
             case "S":
-              tempX = current[3], tempY = current[4], controlX = 2 * x - controlX, controlY = 2 * y - controlY, this.bezierCurveTo(controlX + l, controlY + t, current[1] + l, current[2] + t, tempX + l, tempY + t), x = tempX, y = tempY, controlX = current[1], controlY = current[2];
+              tempX = current[3], tempY = current[4], null === previous[0].match(/[CcSs]/) ? (controlX = x, controlY = y) : (controlX = 2 * x - controlX, controlY = 2 * y - controlY), tempControlX = current[1], tempControlY = current[2], this.bezierCurveTo(controlX + l, controlY + t, tempControlX + l, tempControlY + t, tempX + l, tempY + t), controlX = tempControlX, controlY = tempControlY, x = tempX, y = tempY;
               break;
             case "q":
               tempX = x + current[3], tempY = y + current[4], controlX = x + current[1], controlY = y + current[2], this.quadraticCurveTo(controlX + l, controlY + t, tempX + l, tempY + t), x = tempX, y = tempY;
@@ -2616,21 +2779,29 @@
       }
       getLength() {
         if (this.direction === Direction.COLUMN) {
-          if (!this.curves.length) return 0;
-          const sc = this.curves[0],
-            ec = this.curves[this.curves.length - 1];
+          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.ROW) {
-          if (!this.curves.length) return 0;
-          const sc = this.curves[0],
-            ec = this.curves[this.curves.length - 1];
+          if (!this._curves.length) return 0;
+          const sc = this._curves[0],
+            ec = this._curves[this._curves.length - 1];
           return abs(sc.p0.x - ec.p1.x);
         }
-        return this.curves.reduce((l, c) => l + c.getLength(), 0);
+        return this._curves.reduce((l, c) => l + c.getLength(), 0);
+      }
+      getYAt(x) {
+        if (!this.curves) return 1 / 0;
+        for (let i = 0; i < this.curves.length; i++) {
+          const curve = this.curves[i];
+          if (curve.includeX(x)) return curve.getYAt(x);
+        }
+        return 1 / 0;
       }
       getAttrAt(distance) {
-        if (!this.curves) return {
+        if (!this._curves) return {
           pos: {
             x: 0,
             y: 0
@@ -2639,8 +2810,8 @@
         };
         let curve,
           _dis = 0;
-        for (let i = 0; i < this.curves.length; i++) {
-          curve = this.curves[i];
+        for (let i = 0; i < this._curves.length; i++) {
+          curve = this._curves[i];
           const cl = curve.getLength(this.direction);
           if (_dis + cl >= distance) break;
           _dis += cl;
@@ -2651,6 +2822,21 @@
           angle: curve.getAngleAt(t)
         };
       }
+      drawWithClipRange(ctx, size, x, y, clipRange) {
+        this.tryBuildCurves();
+        const totalLen = this.getLength() * clipRange;
+        let currLen = 0;
+        for (let i = 0; i < this._curves.length; i++) {
+          const curve = this._curves[i],
+            cl = curve.getLength(this.direction);
+          if (!(currLen + cl <= totalLen)) {
+            const percent = 1 - (currLen + cl - totalLen) / cl;
+            curve.draw(ctx, x, y, size, size, percent);
+            break;
+          }
+          curve.draw(ctx, x, y, size, size, 1), currLen += cl;
+        }
+      }
     }
     const temp = ["l", 0, 0, 0, 0, 0, 0, 0];
     function scale(current, sX, sY) {
@@ -2748,6 +2934,9 @@
       forceBoundsHeight: void 0,
       opacity: 1,
       background: null,
+      autoAnimateTexture: !1,
+      textureRatio: 1,
+      textureOptions: null,
       backgroundOpacity: 1,
       backgroundCornerRadius: 0,
       texture: null,
@@ -2756,7 +2945,13 @@
       texturePadding: 2,
       backgroundMode: "no-repeat",
       backgroundFit: !0,
+      backgroundKeepAspectRatio: !1,
+      backgroundClip: !0,
+      backgroundScale: 1,
+      backgroundOffsetX: 0,
+      backgroundOffsetY: 0,
       blur: 0,
+      filter: "",
       cursor: null,
       html: null,
       react: null
@@ -2793,7 +2988,8 @@
       globalCompositeOperation: "",
       overflow: "hidden",
       shadowPickMode: "graphic",
-      keepStrokeScale: !1
+      keepStrokeScale: !1,
+      clipConfig: null
     }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
     const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       startAngle: 0,
@@ -2834,7 +3030,8 @@
       justifyContent: "flex-start",
       alignItems: "flex-start",
       alignContent: "flex-start",
-      baseOpacity: 1
+      baseOpacity: 1,
+      cornerType: "round"
     });
     const DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: "",
@@ -2855,6 +3052,7 @@
     const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: new CustomPath2D(),
       fillStrokeOrder: 1,
+      clipRange: 1,
       customPath: () => {
         Logger.getInstance().warn("空函数");
       }
@@ -2870,7 +3068,8 @@
       x1: 0,
       y1: 0,
       strokeBoundsBuffer: 0,
-      cornerRadius: 0
+      cornerRadius: 0,
+      cornerType: "round"
     });
     Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
@@ -2878,19 +3077,24 @@
       x1: 0,
       y1: 0,
       cornerRadius: 0,
-      length: 0
+      length: 0,
+      cornerType: "round"
     });
     const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       symbolType: "circle",
       size: 10,
-      keepDirIn3d: !0
+      keepDirIn3d: !0,
+      clipRange: 1
     });
     const DefaultTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
       strokeBoundsBuffer: 0,
       keepDirIn3d: !0
     });
     const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
+      upgradeAttrs: null,
       editable: !1,
+      editOptions: null,
+      ascentDescentMode: "actual",
       width: 300,
       height: 300,
       ellipsis: !0,
@@ -2910,10 +3114,13 @@
       repeatY: "no-repeat",
       image: "",
       width: 0,
-      height: 0
+      height: 0,
+      maxWidth: 500,
+      maxHeight: 500
     }, DefaultAttribute), {
       fill: !0,
-      cornerRadius: 0
+      cornerRadius: 0,
+      cornerType: "round"
     });
     const DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImageAttribute), {
       backgroundShowMode: "never",
@@ -3593,8 +3800,26 @@
           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.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() {
@@ -3673,7 +3898,7 @@
         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, 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;
+        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));
@@ -3869,7 +4094,7 @@
         (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.forEach(a => {
+        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;
       }
@@ -4248,7 +4473,785 @@
     }
     ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [], ResourceLoader.onLoadSuccessCb = [];
 
-    const tempMatrix = new Matrix(),
+    class BaseSymbol {
+      bounds(size, bounds) {
+        if (isNumber$1(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$1(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);
+      }
+      return ctx.closePath(), !0;
+    }
+    class StarSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "star", this.pathStr = "M0 -1L0.22451398828979266 -0.3090169943749474L0.9510565162951535 -0.30901699437494745L0.3632712640026804 0.1180339887498948L0.5877852522924732 0.8090169943749473L8.326672684688674e-17 0.3819660112501051L-0.587785252292473 0.8090169943749476L-0.3632712640026804 0.11803398874989487L-0.9510565162951536 -0.30901699437494723L-0.22451398828979274 -0.30901699437494734Z";
+      }
+      draw(ctx, size, transX, transY) {
+        return star(ctx, this.parseSize(size) / 2, transX, transY);
+      }
+      drawOffset(ctx, size, transX, transY, offset) {
+        return star(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+      }
+    }
+    var star$1 = new StarSymbol();
+
+    const sqrt3$1 = sqrt(3);
+    function arrow(ctx, r, transX, transY) {
+      const triangleH = r,
+        trangleBottomSide = triangleH / sqrt3$1,
+        rectW = trangleBottomSide / 5,
+        rectH = r;
+      return ctx.moveTo(0 + transX, -triangleH + transY), ctx.lineTo(trangleBottomSide / 2 + transX, transY), ctx.lineTo(rectW / 2 + transX, transY), ctx.lineTo(rectW / 2 + transX, rectH + transY), ctx.lineTo(-rectW / 2 + transX, rectH + transY), ctx.lineTo(-rectW / 2 + transX, transY), ctx.lineTo(-trangleBottomSide / 2 + transX, transY), ctx.closePath(), !0;
+    }
+    class ArrowSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "arrow", this.pathStr = "M-0.07142857142857142,0.5L0.07142857142857142,0.5L0.07142857142857142,-0.0625L0.2,-0.0625L0,-0.5L-0.2,-0.0625L-0.07142857142857142,-0.0625Z";
+      }
+      draw(ctx, size, transX, transY) {
+        return arrow(ctx, this.parseSize(size) / 2, transX, transY);
+      }
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+      }
+    }
+    var arrow$1 = new ArrowSymbol();
+
+    function wedge(ctx, r, transX, transY) {
+      const h = 2 * r;
+      return ctx.moveTo(transX, -r + transY), ctx.lineTo(h / 3 / 2 + transX, r + transY), ctx.lineTo(-h / 3 / 2 + transX, r + transY), ctx.closePath(), !0;
+    }
+    class WedgeSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "wedge", this.pathStr = "M0,-0.5773502691896257L-0.125,0.28867513459481287L0.125,0.28867513459481287Z";
+      }
+      draw(ctx, size, transX, transY) {
+        return wedge(ctx, this.parseSize(size) / 2, transX, transY);
+      }
+      drawOffset(ctx, size, transX, transY, offset) {
+        return wedge(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+      }
+    }
+    var wedge$1 = new WedgeSymbol();
+
+    function stroke(ctx, r, transX, transY) {
+      return ctx.moveTo(-r + transX, transY), ctx.lineTo(transX, r + transY), !1;
+    }
+    class StrokeSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "stroke", this.pathStr = "";
+      }
+      draw(ctx, size, transX, transY) {
+        return stroke(ctx, this.parseSize(size) / 2, transX, transY);
+      }
+      drawOffset(ctx, size, transX, transY, offset) {
+        return stroke(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+      }
+    }
+    var stroke$1 = new StrokeSymbol();
+
+    const c = -.5,
+      s = sqrt(3) / 2,
+      k = 1 / sqrt(12);
+    function wye(ctx, r, transX, transY) {
+      const x0 = r / 2,
+        y0 = r * k,
+        x1 = x0,
+        y1 = r * k + r,
+        x2 = -x1,
+        y2 = y1;
+      return ctx.moveTo(x0 + transX, y0 + transY), ctx.lineTo(x1 + transX, y1 + transY), ctx.lineTo(x2 + transX, y2 + transY), ctx.lineTo(c * x0 - s * y0 + transX, s * x0 + c * y0 + transY), ctx.lineTo(c * x1 - s * y1 + transX, s * x1 + c * y1 + transY), ctx.lineTo(c * x2 - s * y2 + transX, s * x2 + c * y2 + transY), ctx.lineTo(c * x0 + s * y0 + transX, c * y0 - s * x0 + transY), ctx.lineTo(c * x1 + s * y1 + transX, c * y1 - s * x1 + transY), ctx.lineTo(c * x2 + s * y2 + transX, c * y2 - s * x2 + transY), ctx.closePath(), !1;
+    }
+    class WyeSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "wye", this.pathStr = "M0.25 0.14433756729740646L0.25 0.6443375672974064L-0.25 0.6443375672974064L-0.25 0.14433756729740643L-0.6830127018922193 -0.10566243270259357L-0.4330127018922193 -0.5386751345948129L0 -0.28867513459481287L0.4330127018922193 -0.5386751345948129L0.6830127018922193 -0.10566243270259357Z";
+      }
+      draw(ctx, size, transX, transY) {
+        return wye(ctx, this.parseSize(size) / 2, transX, transY);
+      }
+      drawOffset(ctx, size, transX, transY, offset) {
+        return wye(ctx, this.parseSize(size) / 2 + offset, transX, transY);
+      }
+    }
+    var wye$1 = new WyeSymbol();
+
+    function trianglLeftOffset(ctx, r, x, y, offset) {
+      return ctx.moveTo(-r + x - 2 * offset, y), ctx.lineTo(r + x + offset, r + y + 2 * offset), ctx.lineTo(r + x + offset, y - r - 2 * offset), ctx.closePath(), !0;
+    }
+    class TriangleLeftSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "triangleLeft", this.pathStr = "M-0.5,0 L0.5,0.5 L0.5,-0.5 Z";
+      }
+      draw(ctx, size, x, y) {
+        return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, 0);
+      }
+      drawOffset(ctx, size, x, y, offset) {
+        return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, offset);
+      }
+    }
+    var triangleLeft = new TriangleLeftSymbol();
+
+    function trianglRightOffset(ctx, r, x, y) {
+      let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+      return ctx.moveTo(x - r - offset, r + y + 2 * offset), ctx.lineTo(r + x + 2 * offset, y), ctx.lineTo(x - r - offset, y - r - 2 * offset), ctx.closePath(), !0;
+    }
+    class TriangleRightSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "triangleRight", this.pathStr = "M-0.5,0.5 L0.5,0 L-0.5,-0.5 Z";
+      }
+      draw(ctx, size, x, y) {
+        return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y);
+      }
+      drawOffset(ctx, size, x, y, offset) {
+        return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y, offset);
+      }
+    }
+    var triangleRight = new TriangleRightSymbol();
+
+    function trianglDownOffset(ctx, r, x, y) {
+      let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+      return ctx.moveTo(x - r - 2 * offset, y - r - offset), ctx.lineTo(x + r + 2 * offset, y - r - offset), ctx.lineTo(x, y + r + 2 * offset), ctx.closePath(), !0;
+    }
+    class TriangleDownSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "triangleDown", this.pathStr = "M-0.5,-0.5 L0.5,-0.5 L0,0.5 Z";
+      }
+      draw(ctx, size, x, y) {
+        return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y);
+      }
+      drawOffset(ctx, size, x, y, offset) {
+        return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y, offset);
+      }
+    }
+    var triangleDown = new TriangleDownSymbol();
+
+    const sqrt3 = sqrt(3);
+    function thinTriangle(ctx, r, x, y) {
+      const h = r * sqrt3;
+      return ctx.moveTo(x, y + -h / 3 * 2), ctx.lineTo(r + x, y + h), ctx.lineTo(x - r, y + h), ctx.closePath(), !0;
+    }
+    class ThinTriangleSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "thinTriangle", this.pathStr = "M0,-0.5773502691896257L-0.5,0.28867513459481287L0.5,0.28867513459481287Z";
+      }
+      draw(ctx, size, x, y) {
+        return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3, x, y);
+      }
+      drawOffset(ctx, size, x, y, offset) {
+        return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3 + offset, x, y);
+      }
+    }
+    var thinTriangle$1 = new ThinTriangleSymbol();
+
+    function arrow2Left(ctx, r, transX, transY) {
+      const r2 = 2 * r;
+      return ctx.moveTo(r + transX, transY - r2), ctx.lineTo(transX - r, transY), ctx.lineTo(r + transX, r2 + transY), !0;
+    }
+    class Arrow2LeftSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "arrow2Left", this.pathStr = "M 0.25 -0.5 L -0.25 0 l 0.25 0.5";
+      }
+      draw(ctx, size, transX, transY) {
+        return arrow2Left(ctx, this.parseSize(size) / 4, transX, transY);
+      }
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow2Left(ctx, this.parseSize(size) / 4 + offset, transX, transY);
+      }
+    }
+    var arrow2Left$1 = new Arrow2LeftSymbol();
+
+    function arrow2Right(ctx, r, transX, transY) {
+      const r2 = 2 * r;
+      return ctx.moveTo(transX - r, transY - r2), ctx.lineTo(transX + r, transY), ctx.lineTo(transX - r, r2 + transY), !0;
+    }
+    class Arrow2RightSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "arrow2Right", this.pathStr = "M -0.25 -0.5 l 0.25 0 l -0.25 0.5";
+      }
+      draw(ctx, size, transX, transY) {
+        return arrow2Right(ctx, this.parseSize(size) / 4, transX, transY);
+      }
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow2Right(ctx, this.parseSize(size) / 4 + offset, transX, transY);
+      }
+    }
+    var arrow2Right$1 = new Arrow2RightSymbol();
+
+    function arrow2Up(ctx, r, transX, transY) {
+      const r2 = 2 * r;
+      return ctx.moveTo(transX - r2, transY + r), ctx.lineTo(transX, transY - r), ctx.lineTo(transX + r2, transY + r), !0;
+    }
+    class Arrow2UpSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "arrow2Up", this.pathStr = "M -0.5 0.25 L 0 -0.25 l 0.5 0.25";
+      }
+      draw(ctx, size, transX, transY) {
+        return arrow2Up(ctx, this.parseSize(size) / 4, transX, transY);
+      }
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow2Up(ctx, this.parseSize(size) / 4 + offset, transX, transY);
+      }
+    }
+    var arrow2Up$1 = new Arrow2UpSymbol();
+
+    function arrow2Down(ctx, r, transX, transY) {
+      const r2 = 2 * r;
+      return ctx.moveTo(transX - r2, transY - r), ctx.lineTo(transX, transY + r), ctx.lineTo(transX + r2, transY - r), !0;
+    }
+    class Arrow2DownSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "arrow2Down", this.pathStr = "M -0.5 -0.25 L 0 0.25 l 0.5 -0.25";
+      }
+      draw(ctx, size, transX, transY) {
+        return arrow2Down(ctx, this.parseSize(size) / 4, transX, transY);
+      }
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow2Down(ctx, this.parseSize(size) / 4 + offset, transX, transY);
+      }
+    }
+    var arrow2Down$1 = new Arrow2DownSymbol();
+
+    function lineV(ctx, r, x, y, z) {
+      return ctx.moveTo(x, y - r), ctx.lineTo(x, y + r), !0;
+    }
+    class LineVSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "lineV", this.pathStr = "M0,-0.5L0,0.5";
+      }
+      draw(ctx, size, x, y, z) {
+        return lineV(ctx, this.parseSize(size) / 2, x, y);
+      }
+      drawOffset(ctx, size, x, y, offset, z) {
+        return lineV(ctx, this.parseSize(size) / 2 + offset, x, y);
+      }
+      drawToSvgPath(size, x, y, z) {
+        const r = this.parseSize(size) / 2;
+        return `M ${x}, ${y - r} L ${x},${y + r}`;
+      }
+    }
+    var lineV$1 = new LineVSymbol();
+
+    function lineH(ctx, r, x, y, z) {
+      return ctx.moveTo(x - r, y), ctx.lineTo(x + r, y), !0;
+    }
+    class LineHSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "lineH", this.pathStr = "M-0.5,0L0.5,0";
+      }
+      draw(ctx, size, x, y, z) {
+        return lineH(ctx, this.parseSize(size) / 2, x, y);
+      }
+      drawOffset(ctx, size, x, y, offset, z) {
+        return lineH(ctx, this.parseSize(size) / 2 + offset, x, y);
+      }
+      drawToSvgPath(size, x, y, z) {
+        const r = this.parseSize(size) / 2;
+        return `M ${x - r}, ${y} L ${x + r},${y}`;
+      }
+    }
+    var lineH$1 = new LineHSymbol();
+
+    function close(ctx, r, x, y, z) {
+      return ctx.moveTo(x - r, y - r), ctx.lineTo(x + r, y + r), ctx.moveTo(x + r, y - r), ctx.lineTo(x - r, y + r), !0;
+    }
+    class CloseSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "close", this.pathStr = "M-0.5,-0.5L0.5,0.5,M0.5,-0.5L-0.5,0.5";
+      }
+      draw(ctx, size, x, y, z) {
+        return close(ctx, this.parseSize(size) / 2, x, y);
+      }
+      drawOffset(ctx, size, x, y, offset, z) {
+        return close(ctx, this.parseSize(size) / 2 + offset, x, y);
+      }
+      drawToSvgPath(size, x, y, z) {
+        const r = this.parseSize(size) / 2;
+        return `M ${x - r}, ${y - r} L ${x + r},${y + r} M ${x + r}, ${y - r} L ${x - r},${y + r}`;
+      }
+    }
+    var close$1 = new CloseSymbol();
+
+    function rectSizeArray(ctx, size, x, y) {
+      return ctx.rect(x - size[0] / 2, y - size[1] / 2, size[0], size[1]), !1;
+    }
+    function rectSize(ctx, size, x, y) {
+      const w = size,
+        h = size / 2;
+      return ctx.rect(x - w / 2, y - h / 2, w, h), !1;
+    }
+    class RectSymbol extends BaseSymbol {
+      constructor() {
+        super(...arguments), this.type = "rect", this.pathStr = "M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z";
+      }
+      draw(ctx, size, x, y) {
+        return isNumber$1(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
+      }
+      drawWithClipRange(ctx, size, x, y, clipRange, z, cb) {
+        isNumber$1(size) && (size = [size, size / 2]);
+        const drawLength = 2 * (size[0] + size[1]) * clipRange,
+          points = [{
+            x: x + size[0] / 2,
+            y: y - size[1] / 2
+          }, {
+            x: x + size[0] / 2,
+            y: y + size[1] / 2
+          }, {
+            x: x - size[0] / 2,
+            y: y + size[1] / 2
+          }, {
+            x: x - size[0] / 2,
+            y: y - size[1] / 2
+          }];
+        let currLength = 0,
+          lastP = points[3];
+        ctx.moveTo(lastP.x, lastP.y);
+        for (let i = 0; i < points.length; i++) {
+          const p = points[i],
+            len = Math.sqrt((p.x - lastP.x) * (p.x - lastP.x) + (p.y - lastP.y) * (p.y - lastP.y));
+          if (currLength + len > drawLength) {
+            const dx = (p.x - lastP.x) * (drawLength - currLength) / len,
+              dy = (p.y - lastP.y) * (drawLength - currLength) / len;
+            ctx.lineTo(lastP.x + dx, lastP.y + dy);
+            break;
+          }
+          ctx.lineTo(p.x, p.y), lastP = p, currLength += len;
+        }
+        return !1;
+      }
+      drawOffset(ctx, size, x, y, offset) {
+        return isNumber$1(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
+      }
+    }
+    var rect = new RectSymbol();
+
+    const tempBounds$1 = new AABBBounds();
+    class CustomSymbolClass {
+      constructor(type, path) {
+        let isSvg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+        this.pathStr = "", this.type = type, isArray$1(path) ? this.svgCache = path : this.path = path, this.isSvg = isSvg;
+      }
+      drawOffset(ctx, size, x, y, offset, z, cb) {
+        return size = this.parseSize(size), this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
+          ctx.beginPath(), renderCommandList(item.path.commandList, ctx, x, y, size, size), cb && cb(item.path, item.attribute);
+        }), !1) : (renderCommandList(this.path.commandList, ctx, x, y, size + offset, size + offset), !1);
+      }
+      draw(ctx, size, x, y, z, cb) {
+        return size = this.parseSize(size), this.drawOffset(ctx, size, x, y, 0, z, cb);
+      }
+      parseSize(size) {
+        return isNumber$1(size) ? size : Math.min(size[0], size[1]);
+      }
+      drawWithClipRange(ctx, size, x, y, clipRange, z, cb) {
+        return size = this.parseSize(size), this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
+          item.path.drawWithClipRange(ctx, size, x, y, clipRange), cb && cb(item.path, item.attribute);
+        }), !1) : (this.path.drawWithClipRange(ctx, size, x, y, clipRange), !1);
+      }
+      bounds(size, bounds) {
+        if (size = this.parseSize(size), this.isSvg) {
+          if (!this.svgCache) return;
+          return bounds.clear(), void this.svgCache.forEach(_ref => {
+            let {
+              path: path
+            } = _ref;
+            tempBounds$1.x1 = path.bounds.x1 * size, tempBounds$1.y1 = path.bounds.y1 * size, tempBounds$1.x2 = path.bounds.x2 * size, tempBounds$1.y2 = path.bounds.y2 * size, bounds.union(tempBounds$1);
+          });
+        }
+        this.path.bounds && (bounds.x1 = this.path.bounds.x1 * size, bounds.y1 = this.path.bounds.y1 * size, bounds.x2 = this.path.bounds.x2 * size, bounds.y2 = this.path.bounds.y2 * size);
+      }
+    }
+
+    const builtinSymbols = [circle$1, cross$1, diamond$1, square$1, thinTriangle$1, triangle, star$1, arrow$1, wedge$1, stroke$1, wye$1, triangleLeft, triangleRight, triangleUp, triangleDown, arrow2Left$1, arrow2Right$1, arrow2Up$1, arrow2Down$1, rect, lineV$1, lineH$1, close$1];
+    const builtinSymbolsMap = {};
+    builtinSymbols.forEach(symbol => {
+      builtinSymbolsMap[symbol.type] = symbol;
+    });
+    const builtInSymbolStrMap = {
+      arrowLeft: "M 0.25 -0.5 L -0.25 0 l 0.5 0.5",
+      arrowRight: "M -0.25 -0.5 l 0.5 0.5 l -0.5 0.5",
+      rectRound: "M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z",
+      roundLine: "M 1.2392 -0.258 L -1.3432 -0.258 C -1.4784 -0.258 -1.588 -0.1436 -1.588 -0.002 c 0 0.1416 0.1096 0.256 0.2448 0.256 l 2.5824 0 c 0.1352 0 0.2448 -0.1144 0.2448 -0.256 C 1.484 -0.1436 1.3744 -0.258 1.2392 -0.258 z"
+    };
+
+    function getAllMatches(string, regex) {
+      const matches = [];
+      let match = regex.exec(string);
+      for (; match;) {
+        const allmatches = [];
+        allmatches.startIndex = regex.lastIndex - match[0].length;
+        const len = match.length;
+        for (let index = 0; index < len; index++) allmatches.push(match[index]);
+        matches.push(allmatches), match = regex.exec(string);
+      }
+      return matches;
+    }
+
+    class XmlNode {
+      constructor(tagname) {
+        this.tagname = tagname, this.child = [], this[":@"] = {};
+      }
+      add(key, val) {
+        "__proto__" === key && (key = "#__proto__"), this.child.push({
+          [key]: val
+        });
+      }
+      addChild(node) {
+        "__proto__" === node.tagname && (node.tagname = "#__proto__"), node[":@"] && Object.keys(node[":@"]).length > 0 ? this.child.push({
+          [node.tagname]: node.child,
+          ":@": node[":@"]
+        }) : this.child.push({
+          [node.tagname]: node.child
+        });
+      }
+    }
+    function findClosingIndex(xmlData, str, i, errMsg) {
+      const closingIndex = xmlData.indexOf(str, i);
+      if (-1 === closingIndex) throw new Error(errMsg);
+      return closingIndex + str.length - 1;
+    }
+    function tagExpWithClosingIndex(xmlData, i) {
+      let closingChar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ">";
+      let attrBoundary,
+        tagExp = "";
+      for (let index = i; index < xmlData.length; index++) {
+        let ch = xmlData[index];
+        if (attrBoundary) ch === attrBoundary && (attrBoundary = "");else if ('"' === ch || "'" === ch) attrBoundary = ch;else if (ch === closingChar[0]) {
+          if (!closingChar[1]) return {
+            data: tagExp,
+            index: index
+          };
+          if (xmlData[index + 1] === closingChar[1]) return {
+            data: tagExp,
+            index: index
+          };
+        } else "\t" === ch && (ch = " ");
+        tagExp += ch;
+      }
+    }
+    function readTagExp(xmlData, i, removeNSPrefix) {
+      let closingChar = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ">";
+      const result = tagExpWithClosingIndex(xmlData, i + 1, closingChar);
+      if (!result) return;
+      let tagExp = result.data;
+      const closeIndex = result.index,
+        separatorIndex = tagExp.search(/\s/);
+      let tagName = tagExp,
+        attrExpPresent = !0;
+      -1 !== separatorIndex && (tagName = tagExp.substr(0, separatorIndex).replace(/\s\s*$/, ""), tagExp = tagExp.substr(separatorIndex + 1));
+      const rawTagName = tagName;
+      if (removeNSPrefix) {
+        const colonIndex = tagName.indexOf(":");
+        -1 !== colonIndex && (tagName = tagName.substr(colonIndex + 1), attrExpPresent = tagName !== result.data.substr(colonIndex + 1));
+      }
+      return {
+        tagName: tagName,
+        tagExp: tagExp,
+        closeIndex: closeIndex,
+        attrExpPresent: attrExpPresent,
+        rawTagName: rawTagName
+      };
+    }
+    const attrsRegx = new RegExp("([^\\s=]+)\\s*(=\\s*(['\"])([\\s\\S]*?)\\3)?", "gm");
+    class OrderedObjParser {
+      constructor(options) {
+        this.currentNode = null, this.options = options, this.tagsNodeStack = [], this.docTypeEntities = {};
+      }
+      addChild(currentNode, childNode, jPath) {
+        const result = childNode.tagname;
+        "string" == typeof result ? (childNode.tagname = result, currentNode.addChild(childNode)) : currentNode.addChild(childNode);
+      }
+      buildAttributesMap(attrStr, jPath, tagName) {
+        const attrs = {};
+        if (!attrStr) return;
+        const matches = getAllMatches(attrStr, attrsRegx),
+          len = matches.length;
+        for (let i = 0; i < len; i++) {
+          const attrName = matches[i][1],
+            oldVal = matches[i][4],
+            aName = attrName;
+          attrName && (attrs[aName] = void 0 === oldVal || (isNaN(oldVal) ? oldVal : Number(oldVal)));
+        }
+        return attrs;
+      }
+      parseXml(xmlData) {
+        xmlData = xmlData.replace(/\r\n?/g, "\n");
+        const xmlObj = new XmlNode("!xml");
+        let currentNode = xmlObj,
+          textData = "",
+          jPath = "";
+        for (let i = 0; i < xmlData.length; i++) {
+          if ("<" === xmlData[i]) {
+            if ("/" === xmlData[i + 1]) {
+              const closeIndex = findClosingIndex(xmlData, ">", i, "Closing Tag is not closed."),
+                propIndex = jPath.lastIndexOf(".");
+              jPath = jPath.substring(0, propIndex), currentNode = this.tagsNodeStack.pop(), currentNode && currentNode.child && textData && currentNode.child[currentNode.child.length - 1][":@"] && (currentNode.child[currentNode.child.length - 1][":@"].text = textData), textData = "", i = closeIndex;
+            } else if ("?" === xmlData[i + 1]) {
+              i = readTagExp(xmlData, i, !1, "?>").closeIndex + 1;
+            } else if ("!--" === xmlData.substr(i + 1, 3)) {
+              i = findClosingIndex(xmlData, "--\x3e", i + 4, "Comment is not closed.");
+            } else {
+              const result = readTagExp(xmlData, i, !1);
+              let tagName = result.tagName,
+                tagExp = result.tagExp;
+              const attrExpPresent = result.attrExpPresent,
+                closeIndex = result.closeIndex;
+              if (tagName !== xmlObj.tagname && (jPath += jPath ? "." + tagName : tagName), tagExp.length > 0 && tagExp.lastIndexOf("/") === tagExp.length - 1) {
+                "/" === tagName[tagName.length - 1] ? (tagName = tagName.substr(0, tagName.length - 1), jPath = jPath.substr(0, jPath.length - 1), tagExp = tagName) : tagExp = tagExp.substr(0, tagExp.length - 1);
+                const childNode = new XmlNode(tagName);
+                tagName !== tagExp && attrExpPresent && (childNode[":@"] = this.buildAttributesMap(tagExp, jPath, tagName)), this.addChild(currentNode, childNode, jPath), jPath = jPath.substr(0, jPath.lastIndexOf("."));
+              } else {
+                const childNode = new XmlNode(tagName);
+                this.tagsNodeStack.push(currentNode), tagName !== tagExp && attrExpPresent && (childNode[":@"] = this.buildAttributesMap(tagExp, jPath, tagName)), this.addChild(currentNode, childNode, jPath), currentNode = childNode;
+              }
+              textData = "", i = closeIndex;
+            }
+          } else textData += xmlData[i];
+        }
+        return xmlObj.child;
+      }
+    }
+
+    function prettify(node, options) {
+      return compress(node);
+    }
+    function compress(arr, jPath) {
+      const compressedObj = {};
+      for (let i = 0; i < arr.length; i++) {
+        const tagObj = arr[i],
+          property = propName(tagObj);
+        if (void 0 !== property && tagObj[property]) {
+          const val = compress(tagObj[property]);
+          isLeafTag(val);
+          tagObj[":@"] && assignAttributes(val, tagObj[":@"]), void 0 !== compressedObj[property] && compressedObj.hasOwnProperty(property) ? (Array.isArray(compressedObj[property]) || (compressedObj[property] = [compressedObj[property]]), compressedObj[property].push(val)) : compressedObj[property] = val;
+        }
+      }
+      return compressedObj;
+    }
+    function propName(obj) {
+      const keys = Object.keys(obj);
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        if (":@" !== key) return key;
+      }
+    }
+    function assignAttributes(obj, attrMap, jpath) {
+      if (attrMap) {
+        const keys = Object.keys(attrMap),
+          len = keys.length;
+        for (let i = 0; i < len; i++) {
+          const atrrName = keys[i];
+          obj[atrrName] = attrMap[atrrName];
+        }
+      }
+    }
+    function isLeafTag(obj) {
+      return 0 === Object.keys(obj).length;
+    }
+
+    class XMLParser {
+      constructor(options) {
+        this.options = Object.assign({}, XMLParser.defaultOptions, options);
+      }
+      valid(xml) {
+        return xml.startsWith("<");
+      }
+      parse(xmlData) {
+        if (!this.valid) return !1;
+        const orderedResult = new OrderedObjParser(this.options).parseXml(xmlData);
+        return prettify(orderedResult, this.options);
+      }
+    }
+    XMLParser.defaultOptions = {};
+    function isSvg(str) {
+      return str.startsWith("<svg") || str.startsWith("<?xml");
+    }
+
+    undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+      return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) {
+          try {
+            step(generator.next(value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function rejected(value) {
+          try {
+            step(generator.throw(value));
+          } catch (e) {
+            reject(e);
+          }
+        }
+        function step(result) {
+          var value;
+          result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
+            resolve(value);
+          })).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
+    };
+    let NUMBER_TYPE = 0;
+    function genNumberType() {
+      return NUMBER_TYPE++;
+    }
+    var TextDirection;
+    !function (TextDirection) {
+      TextDirection[TextDirection.HORIZONTAL = 0] = "HORIZONTAL", TextDirection[TextDirection.VERTICAL = 1] = "VERTICAL";
+    }(TextDirection || (TextDirection = {}));
+    const rotateCharList = ["…", "（", "）", "—", "【", "】", "「", "」", "《", "》"],
+      rotateCharMap = new Map();
+    rotateCharList.forEach(c => rotateCharMap.set(c, !0));
+    const noRotateCharList = [""],
+      noRotateCharMap = new Map();
+    noRotateCharList.forEach(c => noRotateCharMap.set(c, !0));
+
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    const RECT_NUMBER_TYPE = genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    genNumberType();
+    const SVG_PARSE_ATTRIBUTE_MAP = {
+      "stroke-linecap": "lineCap",
+      "stroke-linejoin": "lineJoin",
+      "stroke-dasharray": "lineDash",
+      "stroke-dashoffset": "lineDashOffset",
+      "stroke-width": "lineWidth",
+      "fill-opacity": "fillOpacity",
+      "stroke-opacity": "strokeOpacity",
+      stroke: "stroke",
+      fill: "fill"
+    };
+    const SVG_PARSE_ATTRIBUTE_MAP_KEYS = Object.keys(SVG_PARSE_ATTRIBUTE_MAP);
+
+    const _tempBounds = new AABBBounds(),
+      tempMatrix = new Matrix(),
       tempBounds = new AABBBounds();
     const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
     const tempConstantXYKey = ["x", "y"],
@@ -4294,7 +5297,7 @@
         }
       }
       get AABBBounds() {
-        return this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode);
+        return this.tryUpdateAABBBounds();
       }
       get OBBBounds() {
         return this.tryUpdateOBBBounds();
@@ -4338,12 +5341,13 @@
       onAnimateBind(animate) {
         this._emitCustomEvent("animate-bind", animate);
       }
-      tryUpdateAABBBounds(full) {
+      tryUpdateAABBBounds() {
+        const full = "imprecise" === this.attribute.boundsMode;
         if (!this.shouldUpdateAABBBounds()) return this._AABBBounds;
         if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
         application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         const bounds = this.doUpdateAABBBounds(full);
-        return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
+        return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
       }
       tryUpdateOBBBounds() {
         if (this._OBBBounds || (this._OBBBounds = new OBBBounds()), this.tryUpdateAABBBounds(), this.updateOBBBoundsStamp === this.updateAABBBoundsStamp) return this._OBBBounds;
@@ -4359,6 +5363,58 @@
       doUpdateOBBBounds() {
         return this._OBBBounds;
       }
+      getClipPath() {
+        const {
+          clipConfig: clipConfig
+        } = this.attribute;
+        if (!clipConfig) return null;
+        this.clipPathMap || (this.clipPathMap = new Map());
+        const {
+          shape: shape
+        } = clipConfig;
+        let path = this.clipPathMap.get(shape) || null;
+        return path || (this.clipPathMap.size > 10 && this.clipPathMap.clear(), path = this.parsePath(shape), path && this.clipPathMap.set(shape, path)), path;
+      }
+      parsePath(symbolType) {
+        if (!symbolType) return null;
+        let path = builtinSymbolsMap[symbolType];
+        if (path) return path;
+        if (path = Graphic.userSymbolMap[symbolType], path) return path;
+        const _symbolType = builtInSymbolStrMap[symbolType];
+        if (!0 === isSvg(symbolType = _symbolType || symbolType)) {
+          const parser = new XMLParser(),
+            {
+              svg: svg
+            } = parser.parse(symbolType);
+          if (!svg) return null;
+          const path = isArray$1(svg.path) ? svg.path : [svg.path];
+          _tempBounds.clear();
+          const cacheList = [];
+          path.forEach(item => {
+            const cache = new CustomPath2D().fromString(item.d),
+              attribute = {};
+            SVG_PARSE_ATTRIBUTE_MAP_KEYS.forEach(k => {
+              item[k] && (attribute[SVG_PARSE_ATTRIBUTE_MAP[k]] = item[k]);
+            }), cacheList.push({
+              path: cache,
+              attribute: attribute
+            }), _tempBounds.union(cache.bounds);
+          });
+          const width = _tempBounds.width(),
+            height = _tempBounds.height(),
+            scale = 1 / max(width, height);
+          cacheList.forEach(cache => cache.path.transform(0, 0, scale, scale));
+          const _parsedPath = new CustomSymbolClass(symbolType, cacheList, !0);
+          return Graphic.userSymbolMap[symbolType] = _parsedPath, _parsedPath;
+        }
+        const cache = new CustomPath2D().fromString(symbolType),
+          width = cache.bounds.width(),
+          height = cache.bounds.height(),
+          scale = 1 / max(width, height);
+        cache.transform(0, 0, scale, scale);
+        const _parsedPath = new CustomSymbolClass(symbolType, cache);
+        return Graphic.userSymbolMap[symbolType] = _parsedPath, _parsedPath;
+      }
       doUpdateAABBBounds(full) {
         this.updateAABBBoundsStamp++;
         const graphicTheme = this.getGraphicTheme();
@@ -4567,8 +5623,9 @@
         return this;
       }
       animate(params) {
+        var _a;
         this.animates || (this.animates = new Map());
-        const animate = new Animate(null == params ? void 0 : params.id, this.stage && this.stage.getTimeline(), null == params ? void 0 : params.slience);
+        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,
@@ -4579,14 +5636,14 @@
           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(() => {
-          this.animates.delete(animate.id);
+          animate.stop(), this.animates.delete(animate.id);
         }), animate;
       }
       onAttributeUpdate(context) {
         context && context.skipUpdateCallback || (application.graphicService.onAttributeUpdate(this), this._emitCustomEvent("afterAttributeUpdate", context));
       }
       update(d) {
-        d ? (d.bounds && this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode), d.trans && this.tryUpdateLocalTransMatrix()) : (this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode), this.tryUpdateLocalTransMatrix());
+        d ? (d.bounds && this.tryUpdateAABBBounds(), d.trans && this.tryUpdateLocalTransMatrix()) : (this.tryUpdateAABBBounds(), this.tryUpdateLocalTransMatrix());
       }
       hasState(stateName) {
         return !(!this.currentStates || !this.currentStates.length) && (!!isNil$1(stateName) || this.currentStates.includes(stateName));
@@ -4644,9 +5701,10 @@
         this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
       }
       removeState(stateName, hasAnimation) {
-        if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) >= 0) {
-          const currentStates = this.currentStates.filter(state => state !== stateName);
-          this.useStates(currentStates, hasAnimation);
+        if (this.currentStates) {
+          const filter = isArray$1(stateName) ? s => !stateName.includes(s) : s => s !== stateName,
+            newStates = this.currentStates.filter(filter);
+          newStates.length !== this.currentStates.length && this.useStates(newStates, hasAnimation);
         }
       }
       toggleState(stateName, hasAnimation) {
@@ -4783,7 +5841,7 @@
           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.setTimeline(timeline);
+              a.timeline === defaultTimeline && a.setTimeline(timeline);
             });
           }
           this._onSetStage && this._onSetStage(this, stage, layer), application.graphicService.onSetStage(this, stage);
@@ -4830,7 +5888,7 @@
         }), step.parsedProps = nextParsedProps;
       }
       defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) {
-        if (Number.isFinite(nextStepVal)) return nextAttributes[key] = lastStepVal + (nextStepVal - lastStepVal) * ratio, !0;
+        if (Number.isFinite(nextStepVal) && Number.isFinite(lastStepVal)) return nextAttributes[key] = lastStepVal + (nextStepVal - lastStepVal) * ratio, !0;
         if ("fill" === key) {
           nextParsedProps || (nextParsedProps = {});
           const fillColorArray = nextParsedProps.fillColorArray,
@@ -4855,6 +5913,20 @@
             });
           return color && (nextAttributes[key] = color), !0;
         }
+        if (Array.isArray(nextStepVal) && nextStepVal.length === lastStepVal.length) {
+          const nextList = [];
+          let valid = !0;
+          for (let i = 0; i < nextStepVal.length; i++) {
+            const v = lastStepVal[i],
+              val = v + (nextStepVal[i] - v) * ratio;
+            if (!Number.isFinite(val)) {
+              valid = !1;
+              break;
+            }
+            nextList.push(val);
+          }
+          valid && (nextAttributes[key] = nextList);
+        }
         return !1;
       }
       _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {}
@@ -4873,7 +5945,7 @@
         return shadowRoot && (shadowRoot.shadowHost = this), this.shadowRoot = null != shadowRoot ? shadowRoot : application.graphicService.creator.shadowRoot(this), this.addUpdateBoundTag(), this.shadowRoot.setStage(this.stage, this.layer), this.shadowRoot;
       }
       detachShadow() {
-        this.shadowRoot && (this.addUpdateBoundTag(), this.shadowRoot = null);
+        this.shadowRoot && (this.addUpdateBoundTag(), this.shadowRoot.release(!0), this.shadowRoot = null);
       }
       toJson() {
         return {
@@ -4925,7 +5997,7 @@
         });
       }
       release() {
-        this.releaseStatus = "released", application.graphicService.onRelease(this);
+        this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this);
       }
       _emitCustomEvent(type, context) {
         var _a, _b;
@@ -4938,64 +6010,7 @@
     function backgroundNotImage(image) {
       return !(!image.fill && !image.stroke);
     }
-    Graphic.mixin(EventTarget);
-
-    undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-      return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) {
-          try {
-            step(generator.next(value));
-          } catch (e) {
-            reject(e);
-          }
-        }
-        function rejected(value) {
-          try {
-            step(generator.throw(value));
-          } catch (e) {
-            reject(e);
-          }
-        }
-        function step(result) {
-          var value;
-          result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
-            resolve(value);
-          })).then(fulfilled, rejected);
-        }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-      });
-    };
-    let NUMBER_TYPE = 0;
-    function genNumberType() {
-      return NUMBER_TYPE++;
-    }
-    var TextDirection;
-    !function (TextDirection) {
-      TextDirection[TextDirection.HORIZONTAL = 0] = "HORIZONTAL", TextDirection[TextDirection.VERTICAL = 1] = "VERTICAL";
-    }(TextDirection || (TextDirection = {}));
-    const rotateCharList = ["…", "（", "）", "—", "【", "】", "「", "」", "《", "》"],
-      rotateCharMap = new Map();
-    rotateCharList.forEach(c => rotateCharMap.set(c, !0));
-    const noRotateCharList = [""],
-      noRotateCharMap = new Map();
-    noRotateCharList.forEach(c => noRotateCharMap.set(c, !0));
-
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    const RECT_NUMBER_TYPE = genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
-    genNumberType();
+    Graphic.userSymbolMap = {}, Graphic.mixin(EventTarget);
 
     const updateBoundsOfCommonOuterBorder = (attribute, theme, aabbBounds) => {
       const {