@visactor/vtable-plugins 1.17.7-alpha.0 → 1.17.7

package/dist/vtable-plugins.js

@@ -1,10 +1,29 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.VTable = global.VTable || {}, global.VTable.plugins = {})));
-})(this, (function (exports) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@visactor/vtable')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@visactor/vtable'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.VTable = global.VTable || {}, global.VTable.plugins = {}), global.VTable));
+})(this, (function (exports, VTable) { 'use strict';
 
-    function isInteger(value) {
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var VTable__namespace = /*#__PURE__*/_interopNamespaceDefault(VTable);
+
+    function isInteger$1(value) {
         return Math.floor(value) === value;
     }
     class CarouselAnimationPlugin {
@@ -92,11 +111,11 @@
                 this.row = customRow.distRow;
                 animation = customRow.animation ?? true;
             }
-            else if (isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== this.row) {
+            else if (isInteger$1(this.row) && this.table.scenegraph.proxy.screenTopRow !== this.row) {
                 this.row = this.table.frozenRowCount;
                 animation = false;
             }
-            else if (!isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== Math.floor(this.row)) {
+            else if (!isInteger$1(this.row) && this.table.scenegraph.proxy.screenTopRow !== Math.floor(this.row)) {
                 this.row = this.table.frozenRowCount;
                 animation = false;
             }
@@ -120,11 +139,11 @@
                 this.col = customCol.distCol;
                 animation = customCol.animation ?? true;
             }
-            else if (isInteger(this.col) && this.table.scenegraph.proxy.screenLeftCol !== this.col) {
+            else if (isInteger$1(this.col) && this.table.scenegraph.proxy.screenLeftCol !== this.col) {
                 this.col = this.table.frozenColCount;
                 animation = false;
             }
-            else if (!isInteger(this.col) && this.table.scenegraph.proxy.screenLeftCol !== Math.floor(this.col)) {
+            else if (!isInteger$1(this.col) && this.table.scenegraph.proxy.screenLeftCol !== Math.floor(this.col)) {
                 this.col = this.table.frozenColCount;
                 animation = false;
             }
@@ -902,6 +921,25 @@
       clone() {
         return new OBBBounds(this);
       }
+      getRotatedCorners() {
+        const originPoint = {
+          x: (this.x1 + this.x2) / 2,
+          y: (this.y1 + this.y2) / 2
+        };
+        return [rotatePoint({
+          x: this.x1,
+          y: this.y1
+        }, this.angle, originPoint), rotatePoint({
+          x: this.x2,
+          y: this.y1
+        }, this.angle, originPoint), rotatePoint({
+          x: this.x1,
+          y: this.y2
+        }, this.angle, originPoint), rotatePoint({
+          x: this.x2,
+          y: this.y2
+        }, this.angle, originPoint)];
+      }
     }
 
     class Matrix {
@@ -1525,10 +1563,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 +1811,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 +1912,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 +1950,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 +2307,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 +2505,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 +2575,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 +2609,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 +2654,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 +2742,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 +2817,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 +2848,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 +2860,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 +2972,9 @@
       forceBoundsHeight: void 0,
       opacity: 1,
       background: null,
+      autoAnimateTexture: !1,
+      textureRatio: 1,
+      textureOptions: null,
       backgroundOpacity: 1,
       backgroundCornerRadius: 0,
       texture: null,
@@ -2756,10 +2983,17 @@
       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
+      react: null,
+      vue: null
     }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
     const DefaultConnectAttribute = {
       connectedType: "none",
@@ -2793,7 +3027,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 +3069,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 +3091,7 @@
     const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: new CustomPath2D(),
       fillStrokeOrder: 1,
+      clipRange: 1,
       customPath: () => {
         Logger.getInstance().warn("空函数");
       }
@@ -2864,13 +3101,20 @@
       cornerRadius: 0,
       closePath: !0
     });
+    const DefaultStarAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+      width: 100,
+      height: 100,
+      spikes: 5,
+      thickness: .5
+    });
     const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
       height: 0,
       x1: 0,
       y1: 0,
       strokeBoundsBuffer: 0,
-      cornerRadius: 0
+      cornerRadius: 0,
+      cornerType: "round"
     });
     Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
@@ -2878,19 +3122,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 +3159,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",
@@ -2947,6 +3199,7 @@
         text: DefaultTextAttribute,
         rect: DefaultRectAttribute,
         polygon: DefaultPolygonAttribute,
+        star: DefaultStarAttribute,
         richtext: DefaultRichTextAttribute,
         richtextIcon: DefaultRichTextIconAttribute,
         image: DefaultImageAttribute,
@@ -2965,6 +3218,7 @@
         text: Object.assign({}, defaultThemeObj.text),
         rect: Object.assign({}, defaultThemeObj.rect),
         polygon: Object.assign({}, defaultThemeObj.polygon),
+        star: Object.assign({}, defaultThemeObj.star),
         richtext: Object.assign({}, defaultThemeObj.richtext),
         richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),
         image: Object.assign({}, defaultThemeObj.image),
@@ -3444,7 +3698,7 @@
       }
       _composedDetailPath(params) {
         if (params && params.graphic) {
-          const g = this.pickParams.graphic;
+          const g = params.graphic;
           if (g.stage) {
             const path = g.stage.eventSystem.manager.propagationPath(g);
             this.detailPath.push(path), this._composedDetailPath(params.params);
@@ -3593,8 +3847,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;
+      }
     }
-    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);
+    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() {
@@ -3673,7 +3945,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 +4141,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,697 +4520,713 @@
     }
     ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [], ResourceLoader.onLoadSuccessCb = [];
 
-    const tempMatrix = new Matrix(),
-      tempBounds = new AABBBounds();
-    const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
-    const tempConstantXYKey = ["x", "y"],
-      tempConstantScaleXYKey = ["scaleX", "scaleY"],
-      tempConstantAngleKey = ["angle"],
-      point = new Point();
-    const NOWORK_ANIMATE_ATTR = {
-      strokeSeg: 1,
-      boundsPadding: 2,
-      pickMode: 1,
-      boundsMode: 1,
-      customPickShape: 1,
-      pickable: 1,
-      childrenPickable: 1,
-      visible: 1,
-      zIndex: 1,
-      layout: 1,
-      keepDirIn3d: 1,
-      globalZIndex: 1,
-      outerBorder: 1,
-      innerBorder: 1,
-      lineDash: 1,
-      lineCap: 1,
-      lineJoin: 1,
-      miterLimit: 2,
-      strokeBoundsBuffer: 2,
-      scaleCenter: 1,
-      anchor: 1,
-      anchor3d: 1,
-      postMatrix: 1,
-      backgroundMode: 2,
-      background: 1,
-      texture: 1,
-      cursor: 1,
-      html: 1
-    };
-    class Graphic extends Node {
-      static mixin(source) {
-        const keys = Object.keys(source);
-        for (let i = 0; i < keys.length; ++i) {
-          const propertyName = keys[i];
-          Object.defineProperty(Graphic.prototype, propertyName, Object.getOwnPropertyDescriptor(source, propertyName));
-        }
+    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;
       }
-      get AABBBounds() {
-        return this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode);
+      parseSize(size) {
+        return isNumber$1(size) ? size : Math.min(size[0], size[1]);
       }
-      get OBBBounds() {
-        return this.tryUpdateOBBBounds();
+    }
+
+    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";
       }
-      get globalAABBBounds() {
-        return this.tryUpdateGlobalAABBBounds();
+      draw(ctx, size, x, y, z) {
+        return circle(ctx, this.parseSize(size) / 2, x, y, z);
       }
-      get transMatrix() {
-        return this.tryUpdateLocalTransMatrix(!0);
+      drawOffset(ctx, size, x, y, offset, z) {
+        return circle(ctx, this.parseSize(size) / 2 + offset, x, y, z);
       }
-      get globalTransMatrix() {
-        return this.tryUpdateGlobalTransMatrix(!0);
+      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() {
-        let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        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);
+        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";
       }
-      setMode(mode) {
-        "3d" === mode ? this.set3dMode() : this.set2dMode();
+      draw(ctx, size, x, y, z) {
+        return cross(ctx, this.parseSize(size) / 6, x, y, z);
       }
-      set3dMode() {
-        this.in3dMode = !0;
+      drawOffset(ctx, size, x, y, offset, z) {
+        return crossOffset(ctx, this.parseSize(size) / 6, x, y, offset, z);
       }
-      set2dMode() {
-        this.in3dMode = !1;
+    }
+    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";
       }
-      getOffsetXY(attr) {
-        let includeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-        var _a, _b;
-        const {
-          dx = attr.dx,
-          dy = attr.dy
-        } = this.attribute;
-        if (includeScroll && this.parent) {
-          const attribute = this.parent.attribute;
-          point.x = dx + (null !== (_a = attribute.scrollX) && void 0 !== _a ? _a : 0), point.y = dy + (null !== (_b = attribute.scrollY) && void 0 !== _b ? _b : 0);
-        } else point.x = dx, point.y = dy;
-        return point;
+      draw(ctx, size, x, y, z) {
+        return diamond(ctx, this.parseSize(size) / 2, x, y, z);
       }
-      onAnimateBind(animate) {
-        this._emitCustomEvent("animate-bind", animate);
+      drawFitDir(ctx, size, x, y, z) {
+        return diamond(ctx, this.parseSize(size) / 2, x, y, z);
       }
-      tryUpdateAABBBounds(full) {
-        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;
+      drawOffset(ctx, size, x, y, offset, z) {
+        return diamond(ctx, this.parseSize(size) / 2 + offset, x, y, z);
       }
-      tryUpdateOBBBounds() {
-        if (this._OBBBounds || (this._OBBBounds = new OBBBounds()), this.tryUpdateAABBBounds(), this.updateOBBBoundsStamp === this.updateAABBBoundsStamp) return this._OBBBounds;
-        if (this.updateOBBBoundsStamp = this.updateAABBBoundsStamp, !this.valid) return this._OBBBounds.clear(), this._OBBBounds;
-        return this.doUpdateOBBBounds();
+    }
+    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";
       }
-      combindShadowAABBBounds(bounds) {
-        if (this.shadowRoot) {
-          const b = this.shadowRoot.AABBBounds.clone();
-          bounds.union(b);
-        }
+      draw(ctx, size, x, y) {
+        return square(ctx, this.parseSize(size) / 2, x, y);
       }
-      doUpdateOBBBounds() {
-        return this._OBBBounds;
+      drawOffset(ctx, size, x, y, offset) {
+        return square(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
-      doUpdateAABBBounds(full) {
-        this.updateAABBBoundsStamp++;
-        const graphicTheme = this.getGraphicTheme();
-        this._AABBBounds.clear();
-        const attribute = this.attribute,
-          bounds = this.updateAABBBounds(attribute, graphicTheme, this._AABBBounds, full),
-          {
-            boundsPadding = graphicTheme.boundsPadding
-          } = attribute,
-          paddingArray = parsePadding(boundsPadding);
-        return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
+    }
+    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";
       }
-      updatePathProxyAABBBounds(aabbBounds) {
-        const path = "function" == typeof this.pathProxy ? this.pathProxy(this.attribute) : this.pathProxy;
-        if (!path) return !1;
-        const boundsContext = new BoundsContext(aabbBounds);
-        return renderCommandList(path.commandList, boundsContext, 0, 0), !0;
+      draw(ctx, size, x, y) {
+        return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y);
       }
-      tryUpdateGlobalAABBBounds() {
-        const b = this.AABBBounds;
-        return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this._globalAABBBounds.empty() || this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
+      drawOffset(ctx, size, x, y, offset) {
+        return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
-      tryUpdateGlobalTransMatrix() {
-        if (this._globalTransMatrix) {
-          if (this.parent) {
-            const m = this.parent.globalTransMatrix;
-            this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f);
-          }
-        } else this._globalTransMatrix = this.parent ? this.parent.globalTransMatrix.clone() : this.transMatrix.clone();
-        return this.shouldUpdateGlobalMatrix() && this.doUpdateGlobalMatrix(), this._globalTransMatrix;
+    }
+    var triangleUp = new TriangleUpSymbol();
+
+    class TriangleSymbol extends TriangleUpSymbol {
+      constructor() {
+        super(...arguments), this.type = "triangle";
       }
-      shouldUpdateGlobalMatrix() {
-        return !0;
+    }
+    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";
       }
-      tryUpdateLocalTransMatrix() {
-        let clearTag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
-        return this._transMatrix || (this._transMatrix = new Matrix()), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
+      draw(ctx, size, transX, transY) {
+        return star(ctx, this.parseSize(size) / 2, transX, transY);
       }
-      shouldUpdateAABBBounds() {
-        return this.shadowRoot ? (!!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds()) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this) : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this);
+      drawOffset(ctx, size, transX, transY, offset) {
+        return star(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
-      shouldSelfChangeUpdateAABBBounds() {
-        return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
+    }
+    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";
       }
-      shouldUpdateLocalMatrix() {
-        return !!(this._updateTag & UpdateTag.UPDATE_LOCAL_MATRIX);
+      draw(ctx, size, transX, transY) {
+        return arrow(ctx, this.parseSize(size) / 2, transX, transY);
       }
-      isValid() {
-        var _a, _b;
-        const attribute = this.attribute;
-        return Number.isFinite((null !== (_a = attribute.x) && void 0 !== _a ? _a : 0) + (null !== (_b = attribute.y) && void 0 !== _b ? _b : 0));
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
-      _validNumber(num) {
-        return null == num || Number.isFinite(num);
+    }
+    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";
       }
-      shouldUpdateShape() {
-        return !!(this._updateTag & UpdateTag.UPDATE_SHAPE);
+      draw(ctx, size, transX, transY) {
+        return wedge(ctx, this.parseSize(size) / 2, transX, transY);
       }
-      clearUpdateShapeTag() {
-        this._updateTag &= UpdateTag.CLEAR_SHAPE;
+      drawOffset(ctx, size, transX, transY, offset) {
+        return wedge(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
-      containsPoint(x, y, mode, picker) {
-        if (!picker) return !1;
-        if (mode === IContainPointMode.GLOBAL) {
-          const point = new Point(x, y);
-          this.parent && this.parent.globalTransMatrix.transformPoint(point, point), x = point.x, y = point.y;
-        }
-        return picker.containsPoint(this, {
-          x: x,
-          y: y
-        });
+    }
+    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 = "";
       }
-      setAttributes(params) {
-        let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-        let context = arguments.length > 2 ? arguments[2] : undefined;
-        (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context);
+      draw(ctx, size, transX, transY) {
+        return stroke(ctx, this.parseSize(size) / 2, transX, transY);
       }
-      _setAttributes(params) {
-        let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-        let context = arguments.length > 2 ? arguments[2] : undefined;
-        const keys = Object.keys(params);
-        for (let i = 0; i < keys.length; i++) {
-          const key = keys[i];
-          this.attribute[key] = params[key];
-        }
-        this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTags(keys) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context);
+      drawOffset(ctx, size, transX, transY, offset) {
+        return stroke(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
-      setAttribute(key, value, forceUpdateTag, context) {
-        var _a;
-        const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
-          [key]: value
-        }, this.attribute, key, context);
-        params ? this._setAttributes(params, forceUpdateTag, context) : isNil$1(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, "background" === key ? this.loadImage(value, !0) : "shadowGraphic" === key && this.setShadowGraphic(value);
+    }
+    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";
       }
-      needUpdateTags(keys) {
-        let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GRAPHIC_UPDATE_TAG_KEY;
-        for (let i = 0; i < k.length; i++) {
-          const attrKey = k[i];
-          if (-1 !== keys.indexOf(attrKey)) return !0;
-        }
-        return !1;
+      draw(ctx, size, transX, transY) {
+        return wye(ctx, this.parseSize(size) / 2, transX, transY);
       }
-      needUpdateTag(key) {
-        let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GRAPHIC_UPDATE_TAG_KEY;
-        for (let i = 0; i < k.length; i++) {
-          if (key === k[i]) return !0;
-        }
-        return !1;
+      drawOffset(ctx, size, transX, transY, offset) {
+        return wye(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
-      initAttributes(params) {
-        const context = {
-          type: AttributeUpdateType.INIT
-        };
-        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
+    }
+    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";
       }
-      translate(x, y) {
-        var _a, _b;
-        if (0 === x && 0 === y) return this;
-        const context = {
-            type: AttributeUpdateType.TRANSLATE
-          },
-          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
-            x: x,
-            y: y
-          }, this.attribute, tempConstantXYKey, context);
-        params && (x = params.x, y = params.y, delete params.x, delete params.y, this._setAttributes(params));
-        const attribute = this.attribute,
-          postMatrix = attribute.postMatrix;
-        return postMatrix ? application.transformUtil.fromMatrix(postMatrix, postMatrix).translate(x, y) : (attribute.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : DefaultTransform.x) + x, attribute.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : DefaultTransform.y) + y), this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this;
+      draw(ctx, size, x, y) {
+        return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, 0);
       }
-      translateTo(x, y) {
-        const attribute = this.attribute;
-        if (attribute.x === x && attribute.y === y) return this;
-        const context = {
-            type: AttributeUpdateType.TRANSLATE_TO
-          },
-          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
-            x: x,
-            y: y
-          }, this.attribute, tempConstantXYKey, context);
-        return params ? (this._setAttributes(params, !1, context), this) : (attribute.x = x, attribute.y = y, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this);
+      drawOffset(ctx, size, x, y, offset) {
+        return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
-      scale(scaleX, scaleY, scaleCenter) {
-        var _a, _b;
-        if (1 === scaleX && 1 === scaleY) return this;
-        const context = {
-            type: AttributeUpdateType.SCALE
-          },
-          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
-            scaleX: scaleX,
-            scaleY: scaleY,
-            scaleCenter: scaleCenter
-          }, this.attribute, tempConstantScaleXYKey, context);
-        params && (scaleX = params.scaleX, scaleY = params.scaleY, delete params.scaleX, delete params.scaleY, this._setAttributes(params));
-        const attribute = this.attribute;
-        if (scaleCenter) {
-          let {
-            postMatrix: postMatrix
-          } = this.attribute;
-          postMatrix || (postMatrix = new Matrix(), attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter);
-        } else attribute.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : DefaultTransform.scaleX) * scaleX, attribute.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : DefaultTransform.scaleY) * scaleY;
-        return this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this;
+    }
+    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";
       }
-      scaleTo(scaleX, scaleY) {
-        const attribute = this.attribute;
-        if (attribute.scaleX === scaleX && attribute.scaleY === scaleY) return this;
-        const context = {
-            type: AttributeUpdateType.SCALE_TO
-          },
-          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
-            scaleX: scaleX,
-            scaleY: scaleY
-          }, this.attribute, tempConstantScaleXYKey, context);
-        return params ? (this._setAttributes(params, !1, context), this) : (attribute.scaleX = scaleX, attribute.scaleY = scaleY, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this);
+      draw(ctx, size, x, y) {
+        return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y);
       }
-      rotate(angle, rotateCenter) {
-        var _a;
-        if (0 === angle) return this;
-        const context = {
-            type: AttributeUpdateType.ROTATE
-          },
-          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
-            angle: angle,
-            rotateCenter: rotateCenter
-          }, this.attribute, tempConstantAngleKey, context);
-        params && (delete params.angle, this._setAttributes(params, !1, context));
-        const attribute = this.attribute;
-        if (rotateCenter) {
-          let {
-            postMatrix: postMatrix
-          } = this.attribute;
-          postMatrix || (postMatrix = new Matrix(), attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
-        } else attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
-        return this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this;
+      drawOffset(ctx, size, x, y, offset) {
+        return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
-      rotateTo(angle) {
-        const attribute = this.attribute;
-        if (attribute.angle === angle) return this;
-        const context = {
-            type: AttributeUpdateType.ROTATE_TO
-          },
-          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(angle, this.attribute, tempConstantAngleKey, context);
-        return params ? (this._setAttributes(params, !1, context), this) : (attribute.angle = angle, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this);
+    }
+    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";
       }
-      skewTo(b, c) {
-        return this;
+      draw(ctx, size, x, y) {
+        return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y);
       }
-      animate(params) {
-        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);
-        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(() => {
-          this.animates.delete(animate.id);
-        }), animate;
+      drawOffset(ctx, size, x, y, offset) {
+        return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
-      onAttributeUpdate(context) {
-        context && context.skipUpdateCallback || (application.graphicService.onAttributeUpdate(this), this._emitCustomEvent("afterAttributeUpdate", context));
+    }
+    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";
       }
-      update(d) {
-        d ? (d.bounds && this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode), d.trans && this.tryUpdateLocalTransMatrix()) : (this.tryUpdateAABBBounds("imprecise" === this.attribute.boundsMode), this.tryUpdateLocalTransMatrix());
+      draw(ctx, size, x, y) {
+        return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3, x, y);
       }
-      hasState(stateName) {
-        return !(!this.currentStates || !this.currentStates.length) && (!!isNil$1(stateName) || this.currentStates.includes(stateName));
+      drawOffset(ctx, size, x, y, offset) {
+        return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3 + offset, x, y);
       }
-      getState(stateName) {
-        var _a;
-        return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
+    }
+    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";
       }
-      applyStateAttrs(attrs, stateNames, hasAnimation, isClear) {
-        var _a, _b, _c, _d;
-        if (hasAnimation) {
-          const keys = Object.keys(attrs),
-            noWorkAttrs = this.getNoWorkAnimateAttr(),
-            animateAttrs = {};
-          let noAnimateAttrs;
-          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, {
-            type: AttributeUpdateType.STATE
-          });
-        } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
-          type: AttributeUpdateType.STATE
-        });
+      draw(ctx, size, transX, transY) {
+        return arrow2Left(ctx, this.parseSize(size) / 4, transX, transY);
       }
-      updateNormalAttrs(stateAttrs) {
-        const newNormalAttrs = {};
-        this.normalAttrs ? (Object.keys(stateAttrs).forEach(key => {
-          key in this.normalAttrs ? (newNormalAttrs[key] = this.normalAttrs[key], delete this.normalAttrs[key]) : newNormalAttrs[key] = this.getNormalAttribute(key);
-        }), Object.keys(this.normalAttrs).forEach(key => {
-          stateAttrs[key] = this.normalAttrs[key];
-        })) : Object.keys(stateAttrs).forEach(key => {
-          newNormalAttrs[key] = this.getNormalAttribute(key);
-        }), this.normalAttrs = newNormalAttrs;
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow2Left(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
-      stopStateAnimates() {
-        let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "end";
-        this.animates && this.animates.forEach(animate => {
-          animate.stateNames && (animate.stop(type), this.animates.delete(animate.id));
-        });
+    }
+    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";
       }
-      getNormalAttribute(key) {
-        let value = this.attribute[key];
-        return this.animates && this.animates.forEach(animate => {
-          if (animate.stateNames) {
-            const endProps = animate.getEndProps();
-            has$1(endProps, key) && (value = endProps[key]);
-          }
-        }), value;
+      draw(ctx, size, transX, transY) {
+        return arrow2Right(ctx, this.parseSize(size) / 4, transX, transY);
       }
-      clearStates(hasAnimation) {
-        this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow2Right(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
-      removeState(stateName, hasAnimation) {
-        if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) >= 0) {
-          const currentStates = this.currentStates.filter(state => state !== stateName);
-          this.useStates(currentStates, hasAnimation);
-        }
+    }
+    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";
       }
-      toggleState(stateName, hasAnimation) {
-        if (this.hasState(stateName)) this.removeState(stateName, hasAnimation);else {
-          if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) < 0) {
-            const nextStates = this.currentStates ? this.currentStates.slice() : [];
-            nextStates.push(stateName), this.useStates(nextStates, hasAnimation);
-          }
-        }
+      draw(ctx, size, transX, transY) {
+        return arrow2Up(ctx, this.parseSize(size) / 4, transX, transY);
       }
-      addState(stateName, keepCurrentStates, hasAnimation) {
-        var _a;
-        if (this.currentStates && this.currentStates.includes(stateName) && (keepCurrentStates || 1 === this.currentStates.length)) return;
-        const newStates = keepCurrentStates && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? this.currentStates.concat([stateName]) : [stateName];
-        this.useStates(newStates, hasAnimation);
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow2Up(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
-      useStates(states, hasAnimation) {
-        var _a;
-        if (!states.length) return void this.clearStates(hasAnimation);
-        if (!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) !== states.length || states.some((stateName, index) => this.currentStates[index] !== stateName))) return;
-        const stateAttrs = {};
-        states.forEach(stateName => {
-          var _a;
-          const attrs = this.stateProxy ? this.stateProxy(stateName, states) : null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
-          attrs && Object.assign(stateAttrs, attrs);
-        }), this.updateNormalAttrs(stateAttrs), this.currentStates = states, this.applyStateAttrs(stateAttrs, states, hasAnimation);
+    }
+    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";
       }
-      addUpdateBoundTag() {
-        this._updateTag |= UpdateTag.UPDATE_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), this.glyphHost && this.glyphHost.addUpdateBoundTag();
+      draw(ctx, size, transX, transY) {
+        return arrow2Down(ctx, this.parseSize(size) / 4, transX, transY);
       }
-      addUpdateShapeTag() {
-        this._updateTag |= UpdateTag.UPDATE_SHAPE;
+      drawOffset(ctx, size, transX, transY, offset) {
+        return arrow2Down(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
-      addUpdateShapeAndBoundsTag() {
-        this._updateTag |= UpdateTag.UPDATE_SHAPE_AND_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), this.glyphHost && this.glyphHost.addUpdateBoundTag();
+    }
+    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";
       }
-      updateShapeAndBoundsTagSetted() {
-        return (this._updateTag & UpdateTag.UPDATE_SHAPE_AND_BOUNDS) === UpdateTag.UPDATE_SHAPE_AND_BOUNDS;
+      draw(ctx, size, x, y, z) {
+        return lineV(ctx, this.parseSize(size) / 2, x, y);
       }
-      clearUpdateBoundTag() {
-        this._updateTag &= UpdateTag.CLEAR_BOUNDS;
+      drawOffset(ctx, size, x, y, offset, z) {
+        return lineV(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
-      addUpdatePositionTag() {
-        this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX;
+      drawToSvgPath(size, x, y, z) {
+        const r = this.parseSize(size) / 2;
+        return `M ${x}, ${y - r} L ${x},${y + r}`;
       }
-      addUpdateGlobalPositionTag() {
-        this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= UpdateTag.UPDATE_GLOBAL_MATRIX;
+    }
+    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";
       }
-      clearUpdateLocalPositionTag() {
-        this._updateTag &= UpdateTag.CLEAR_LOCAL_MATRIX;
+      draw(ctx, size, x, y, z) {
+        return lineH(ctx, this.parseSize(size) / 2, x, y);
       }
-      clearUpdateGlobalPositionTag() {
-        this._updateTag &= UpdateTag.CLEAR_GLOBAL_MATRIX;
+      drawOffset(ctx, size, x, y, offset, z) {
+        return lineH(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
-      addUpdateLayoutTag() {
-        this._updateTag |= UpdateTag.UPDATE_LAYOUT;
+      drawToSvgPath(size, x, y, z) {
+        const r = this.parseSize(size) / 2;
+        return `M ${x - r}, ${y} L ${x + r},${y}`;
       }
-      clearUpdateLayoutTag() {
-        this._updateTag &= UpdateTag.CLEAR_LAYOUT;
+    }
+    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";
       }
-      needUpdateLayout() {
-        return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
+      draw(ctx, size, x, y, z) {
+        return close(ctx, this.parseSize(size) / 2, x, y);
       }
-      getAnchor(anchor, params) {
-        const _anchor = [0, 0],
-          getBounds = () => {
-            if (params.b) return params.b;
-            const {
-              scaleX: scaleX,
-              scaleY: scaleY,
-              angle: angle
-            } = this.attribute;
-            return tempBounds.copy(this._AABBBounds), this.setAttributes({
-              scaleX: 1,
-              scaleY: 1,
-              angle: 0
-            }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
-              scaleX: scaleX,
-              scaleY: scaleY,
-              angle: angle
-            }), params.b;
-          };
-        if ("string" == typeof anchor[0]) {
-          const ratio = parseFloat(anchor[0]) / 100,
-            bounds = getBounds();
-          _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-        } else _anchor[0] = anchor[0];
-        if ("string" == typeof anchor[1]) {
-          const ratio = parseFloat(anchor[1]) / 100,
-            bounds = getBounds();
-          _anchor[1] = bounds.y1 + (bounds.y2 - bounds.y1) * ratio;
-        } else _anchor[1] = anchor[1];
-        return _anchor;
+      drawOffset(ctx, size, x, y, offset, z) {
+        return close(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
-      doUpdateLocalMatrix() {
-        const {
-          x = DefaultTransform.x,
-          y = DefaultTransform.y,
-          scaleX = DefaultTransform.scaleX,
-          scaleY = DefaultTransform.scaleY,
-          angle = DefaultTransform.angle,
-          scaleCenter: scaleCenter,
-          anchor: anchor,
-          postMatrix: postMatrix
-        } = this.attribute;
-        let _anchor = [0, 0];
-        const params = {};
-        if (anchor && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
-          const m = this._transMatrix;
-          m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
-            x: _anchor[0],
-            y: _anchor[1]
-          });
-        }
-        const p = this.getOffsetXY(DefaultTransform);
-        if (this._transMatrix.e += p.x, this._transMatrix.f += p.y, postMatrix) {
-          const m1 = tempMatrix.setValue(postMatrix.a, postMatrix.b, postMatrix.c, postMatrix.d, postMatrix.e, postMatrix.f),
-            m2 = this._transMatrix;
-          m1.multiply(m2.a, m2.b, m2.c, m2.d, m2.e, m2.f), m2.setValue(m1.a, m1.b, m1.c, m1.d, m1.e, m1.f);
-        }
+      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}`;
       }
-      doUpdateGlobalMatrix() {
-        if (this.parent) {
-          this._globalTransMatrix.multiply(this.transMatrix.a, this.transMatrix.b, this.transMatrix.c, this.transMatrix.d, this.transMatrix.e, this.transMatrix.f);
-          const {
-            scrollX = 0,
-            scrollY = 0
-          } = this.parent.attribute;
-          this._globalTransMatrix.translate(scrollX, scrollY);
+    }
+    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;
       }
-      setStage(stage, layer) {
-        if (this.stage !== stage) {
-          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);
-            });
-          }
-          this._onSetStage && this._onSetStage(this, stage, layer), application.graphicService.onSetStage(this, stage);
+      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);
       }
-      setStageToShadowRoot(stage, layer) {
-        this.shadowRoot && this.shadowRoot.setStage(stage, layer);
+    }
+
+    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[":@"] = {};
       }
-      onAddStep(step) {}
-      onStop(props) {
-        props && this.setAttributes(props, !1, {
-          type: AttributeUpdateType.ANIMATE_END
+      add(key, val) {
+        "__proto__" === key && (key = "#__proto__"), this.child.push({
+          [key]: val
         });
       }
-      onStep(subAnimate, animate, step, ratio, end) {
-        const nextAttributes = {};
-        if (step.customAnimate) step.customAnimate.update(end, ratio, nextAttributes);else {
-          const nextProps = step.props,
-            nextParsedProps = step.parsedProps,
-            propKeys = step.propKeys;
-          this.stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, void 0, nextParsedProps, propKeys);
-        }
-        this.setAttributes(nextAttributes, !1, {
-          type: AttributeUpdateType.ANIMATE_UPDATE,
-          animationState: {
-            ratio: ratio,
-            end: end,
-            step: step,
-            isFirstFrameOfStep: subAnimate.getLastStep() !== step
-          }
-        }), this.stage && this.stage.renderNextFrame();
+      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
+        });
       }
-      stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, lastProps, nextParsedProps, propKeys) {
-        propKeys || (propKeys = Object.keys(nextProps), step.propKeys = propKeys), end ? step.propKeys.forEach(key => {
-          animate.validAttr(key) && (nextAttributes[key] = nextProps[key]);
-        }) : propKeys.forEach(key => {
-          var _a;
-          if (!animate.validAttr(key)) return;
-          const nextStepVal = nextProps[key],
-            lastStepVal = null !== (_a = lastProps && lastProps[key]) && void 0 !== _a ? _a : subAnimate.getLastPropByName(key, step);
-          if (null == nextStepVal || null == lastStepVal || nextStepVal === lastStepVal) return void (nextAttributes[key] = nextStepVal);
-          let match;
-          match = animate.interpolateFunc && animate.interpolateFunc(key, ratio, lastStepVal, nextStepVal, nextAttributes), match || (match = animate.customInterpolate(key, ratio, lastStepVal, nextStepVal, this, nextAttributes), match || this.defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) || this._interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes));
-        }), step.parsedProps = nextParsedProps;
+    }
+    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;
       }
-      defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) {
-        if (Number.isFinite(nextStepVal)) return nextAttributes[key] = lastStepVal + (nextStepVal - lastStepVal) * ratio, !0;
-        if ("fill" === key) {
-          nextParsedProps || (nextParsedProps = {});
-          const fillColorArray = nextParsedProps.fillColorArray,
-            color = interpolateColor(lastStepVal, null != fillColorArray ? fillColorArray : nextStepVal, ratio, !1, (fArray, tArray) => {
-              nextParsedProps.fillColorArray = tArray;
-            });
-          return color && (nextAttributes[key] = color), !0;
-        }
-        if ("stroke" === key) {
-          nextParsedProps || (nextParsedProps = {});
-          const strokeColorArray = nextParsedProps.strokeColorArray,
-            color = interpolateColor(lastStepVal, null != strokeColorArray ? strokeColorArray : nextStepVal, ratio, !1, (fArray, tArray) => {
-              nextParsedProps.strokeColorArray = tArray;
-            });
-          return color && (nextAttributes[key] = color), !0;
+    }
+    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)));
         }
-        if ("shadowColor" === key) {
-          nextParsedProps || (nextParsedProps = {});
-          const shadowColorArray = nextParsedProps.shadowColorArray,
-            color = interpolateColor(lastStepVal, null != shadowColorArray ? shadowColorArray : nextStepVal, ratio, !0, (fArray, tArray) => {
-              nextParsedProps.shadowColorArray = tArray;
-            });
-          return color && (nextAttributes[key] = color), !0;
+        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 !1;
-      }
-      _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {}
-      getDefaultAttribute(name) {
-        return this.getGraphicTheme()[name];
+        return xmlObj.child;
       }
-      getComputedAttribute(name) {
-        var _a;
-        return null !== (_a = this.attribute[name]) && void 0 !== _a ? _a : this.getDefaultAttribute(name);
+    }
+
+    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;
+        }
       }
-      onSetStage(cb) {
-        let immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-        this._onSetStage = cb, immediate && this.stage && cb(this, this.stage);
+      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;
       }
-      attachShadow(shadowRoot) {
-        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;
+    }
+    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];
+        }
       }
-      detachShadow() {
-        this.shadowRoot && (this.addUpdateBoundTag(), this.shadowRoot = null);
+    }
+    function isLeafTag(obj) {
+      return 0 === Object.keys(obj).length;
+    }
+
+    class XMLParser {
+      constructor(options) {
+        this.options = Object.assign({}, XMLParser.defaultOptions, options);
       }
-      toJson() {
-        return {
-          attribute: this.attribute,
-          _uid: this._uid,
-          type: this.type,
-          name: this.name,
-          children: this.children.map(item => item.toJson())
-        };
+      valid(xml) {
+        return xml.startsWith("<");
       }
-      createPathProxy(path) {
-        return isString$1(path, !0) ? this.pathProxy = new CustomPath2D().fromString(path) : this.pathProxy = new CustomPath2D(), this.pathProxy;
-      }
-      loadImage(image) {
-        let background = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-        if (!image || background && backgroundNotImage(image)) return;
-        const url = image;
-        this.resources || (this.resources = new Map());
-        const cache = {
-          data: "init",
-          state: null
-        };
-        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : isObject$1(image) ? (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
-      }
-      setShadowGraphic(graphic) {
-        if (graphic) {
-          this.attachShadow().add(graphic);
-        } else this.detachShadow();
-      }
-      imageLoadSuccess(url, image, cb) {
-        if (!this.resources) return;
-        const res = this.resources.get(url);
-        res && (res.state = "success", res.data = image, cb && cb(), this.addUpdateBoundTag(), this.stage && this.stage.renderNextFrame());
-      }
-      imageLoadFail(url, cb) {
-        if (!this.resources) return;
-        const res = this.resources.get(url);
-        res && (res.state = "fail", cb && cb());
-      }
-      _stopAnimates(animates) {
-        animates && animates.forEach(animate => {
-          animate.stop();
-        });
-      }
-      stopAnimates() {
-        let stopChildren = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
-        this._stopAnimates(this.animates), this.shadowRoot && this.shadowRoot.stopAnimates(!0), this.isContainer && stopChildren && this.forEachChildren(c => {
-          c.stopAnimates(stopChildren);
-        });
-      }
-      release() {
-        this.releaseStatus = "released", application.graphicService.onRelease(this);
-      }
-      _emitCustomEvent(type, context) {
-        var _a, _b;
-        if (this._events && type in this._events) {
-          const changeEvent = new CustomEvent(type, context);
-          changeEvent.bubbles = !1, changeEvent.manager = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem) || void 0 === _b ? void 0 : _b.manager, this.dispatchEvent(changeEvent);
-        }
+      parse(xmlData) {
+        if (!this.valid) return !1;
+        const orderedResult = new OrderedObjParser(this.options).parseXml(xmlData);
+        return prettify(orderedResult, this.options);
       }
     }
-    function backgroundNotImage(image) {
-      return !(!image.fill && !image.stroke);
+    XMLParser.defaultOptions = {};
+    function isSvg(str) {
+      return str.startsWith("<svg") || str.startsWith("<?xml");
     }
-    Graphic.mixin(EventTarget);
 
     undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
       return new (P || (P = Promise))(function (resolve, reject) {
@@ -4996,128 +5284,1870 @@
     genNumberType();
     genNumberType();
     genNumberType();
-
-    const updateBoundsOfCommonOuterBorder = (attribute, theme, aabbBounds) => {
-      const {
-        outerBorder: outerBorder,
-        shadowBlur = theme.shadowBlur
-      } = attribute;
-      if (outerBorder) {
-        const defaultOuterBorder = theme.outerBorder,
-          {
-            distance = defaultOuterBorder.distance,
-            lineWidth = defaultOuterBorder.lineWidth
-          } = outerBorder;
-        aabbBounds.expand(distance + (shadowBlur + lineWidth) / 2);
-      }
-      return aabbBounds;
+    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 RECT_UPDATE_TAG_KEY = ["width", "x1", "y1", "height", "cornerRadius", ...GRAPHIC_UPDATE_TAG_KEY];
-    class Rect extends Graphic {
-      constructor(params) {
-        super(params), this.type = "rect", this.numberType = RECT_NUMBER_TYPE;
+    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"],
+      tempConstantScaleXYKey = ["scaleX", "scaleY"],
+      tempConstantAngleKey = ["angle"],
+      point = new Point();
+    const NOWORK_ANIMATE_ATTR = {
+      strokeSeg: 1,
+      boundsPadding: 2,
+      pickMode: 1,
+      boundsMode: 1,
+      customPickShape: 1,
+      pickable: 1,
+      childrenPickable: 1,
+      visible: 1,
+      zIndex: 1,
+      layout: 1,
+      keepDirIn3d: 1,
+      globalZIndex: 1,
+      outerBorder: 1,
+      innerBorder: 1,
+      lineDash: 1,
+      lineCap: 1,
+      lineJoin: 1,
+      miterLimit: 2,
+      strokeBoundsBuffer: 2,
+      scaleCenter: 1,
+      anchor: 1,
+      anchor3d: 1,
+      postMatrix: 1,
+      backgroundMode: 2,
+      background: 1,
+      texture: 1,
+      cursor: 1,
+      html: 1
+    };
+    class Graphic extends Node {
+      static mixin(source) {
+        const keys = Object.keys(source);
+        for (let i = 0; i < keys.length; ++i) {
+          const propertyName = keys[i];
+          Object.defineProperty(Graphic.prototype, propertyName, Object.getOwnPropertyDescriptor(source, propertyName));
+        }
       }
-      isValid() {
-        return super.isValid() && this._isValid();
+      get AABBBounds() {
+        return this.tryUpdateAABBBounds();
       }
-      _isValid() {
-        return !0;
+      get OBBBounds() {
+        return this.tryUpdateOBBBounds();
       }
-      getGraphicTheme() {
-        return getTheme(this).rect;
+      get globalAABBBounds() {
+        return this.tryUpdateGlobalAABBBounds();
       }
-      updateAABBBounds(attribute, rectTheme, aabbBounds) {
-        if (!this.updatePathProxyAABBBounds(aabbBounds)) {
-          let {
-            width: width,
-            height: height
-          } = attribute;
-          const {
-            x1: x1,
-            y1: y1,
-            x: x,
-            y: y
-          } = attribute;
-          width = null != width ? width : x1 - x, height = null != height ? height : y1 - y, (isFinite(width) || isFinite(height) || isFinite(x) || isFinite(y)) && aabbBounds.set(0, 0, width || 0, height || 0);
-        }
+      get transMatrix() {
+        return this.tryUpdateLocalTransMatrix(!0);
+      }
+      get globalTransMatrix() {
+        return this.tryUpdateGlobalTransMatrix(!0);
+      }
+      constructor() {
+        let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        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);
+      }
+      setMode(mode) {
+        "3d" === mode ? this.set3dMode() : this.set2dMode();
+      }
+      set3dMode() {
+        this.in3dMode = !0;
+      }
+      set2dMode() {
+        this.in3dMode = !1;
+      }
+      getOffsetXY(attr) {
+        let includeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        var _a, _b;
         const {
-          tb1: tb1,
-          tb2: tb2
-        } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
+          dx = attr.dx,
+          dy = attr.dy
+        } = this.attribute;
+        if (includeScroll && this.parent) {
+          const attribute = this.parent.attribute;
+          point.x = dx + (null !== (_a = attribute.scrollX) && void 0 !== _a ? _a : 0), point.y = dy + (null !== (_b = attribute.scrollY) && void 0 !== _b ? _b : 0);
+        } else point.x = dx, point.y = dy;
+        return point;
       }
-      needUpdateTags(keys) {
-        return super.needUpdateTags(keys, RECT_UPDATE_TAG_KEY);
+      onAnimateBind(animate) {
+        this._emitCustomEvent("animate-bind", animate);
       }
-      needUpdateTag(key) {
-        return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
+      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), "empty" === this.attribute.boundsMode && bounds.clear(), bounds;
       }
-      toCustomPath() {
+      tryUpdateOBBBounds() {
+        if (this._OBBBounds || (this._OBBBounds = new OBBBounds()), this.tryUpdateAABBBounds(), this.updateOBBBoundsStamp === this.updateAABBBoundsStamp) return this._OBBBounds;
+        if (this.updateOBBBoundsStamp = this.updateAABBBoundsStamp, !this.valid) return this._OBBBounds.clear(), this._OBBBounds;
+        return this.doUpdateOBBBounds();
+      }
+      combindShadowAABBBounds(bounds) {
+        if (this.shadowRoot) {
+          const b = this.shadowRoot.AABBBounds.clone();
+          bounds.union(b);
+        }
+      }
+      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();
+        this._AABBBounds.clear();
         const attribute = this.attribute,
+          bounds = this.updateAABBBounds(attribute, graphicTheme, this._AABBBounds, full),
           {
-            x: x,
-            y: y,
-            width: width,
-            height: height
-          } = normalizeRectAttributes(attribute),
-          path = new CustomPath2D();
-        return path.moveTo(x, y), path.rect(x, y, width, height), path;
+            boundsPadding = graphicTheme.boundsPadding
+          } = attribute,
+          paddingArray = parsePadding(boundsPadding);
+        return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
       }
-      clone() {
-        return new Rect(Object.assign({}, this.attribute));
+      updatePathProxyAABBBounds(aabbBounds) {
+        const path = "function" == typeof this.pathProxy ? this.pathProxy(this.attribute) : this.pathProxy;
+        if (!path) return !1;
+        const boundsContext = new BoundsContext(aabbBounds);
+        return renderCommandList(path.commandList, boundsContext, 0, 0), !0;
       }
-      getNoWorkAnimateAttr() {
-        return Rect.NOWORK_ANIMATE_ATTR;
+      tryUpdateGlobalAABBBounds() {
+        const b = this.AABBBounds;
+        return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this._globalAABBBounds.empty() || this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
       }
+      tryUpdateGlobalTransMatrix() {
+        if (this._globalTransMatrix) {
+          if (this.parent) {
+            const m = this.parent.globalTransMatrix;
+            this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f);
+          }
+        } else this._globalTransMatrix = this.parent ? this.parent.globalTransMatrix.clone() : this.transMatrix.clone();
+        return this.shouldUpdateGlobalMatrix() && this.doUpdateGlobalMatrix(), this._globalTransMatrix;
+      }
+      shouldUpdateGlobalMatrix() {
+        return !0;
+      }
+      tryUpdateLocalTransMatrix() {
+        let clearTag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+        return this._transMatrix || (this._transMatrix = new Matrix()), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
+      }
+      shouldUpdateAABBBounds() {
+        return this.shadowRoot ? (!!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds()) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this) : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this);
+      }
+      shouldSelfChangeUpdateAABBBounds() {
+        return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
+      }
+      shouldUpdateLocalMatrix() {
+        return !!(this._updateTag & UpdateTag.UPDATE_LOCAL_MATRIX);
+      }
+      isValid() {
+        var _a, _b;
+        const attribute = this.attribute;
+        return Number.isFinite((null !== (_a = attribute.x) && void 0 !== _a ? _a : 0) + (null !== (_b = attribute.y) && void 0 !== _b ? _b : 0));
+      }
+      _validNumber(num) {
+        return null == num || Number.isFinite(num);
+      }
+      shouldUpdateShape() {
+        return !!(this._updateTag & UpdateTag.UPDATE_SHAPE);
+      }
+      clearUpdateShapeTag() {
+        this._updateTag &= UpdateTag.CLEAR_SHAPE;
+      }
+      containsPoint(x, y, mode, picker) {
+        if (!picker) return !1;
+        if (mode === IContainPointMode.GLOBAL) {
+          const point = new Point(x, y);
+          this.parent && this.parent.globalTransMatrix.transformPoint(point, point), x = point.x, y = point.y;
+        }
+        return picker.containsPoint(this, {
+          x: x,
+          y: y
+        });
+      }
+      setWidthHeightWithoutTransform(aabbBounds) {
+        this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
+      }
+      setAttributes(params) {
+        let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        let context = arguments.length > 2 ? arguments[2] : undefined;
+        (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context);
+      }
+      _setAttributes(params) {
+        let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        let context = arguments.length > 2 ? arguments[2] : undefined;
+        const keys = Object.keys(params);
+        for (let i = 0; i < keys.length; i++) {
+          const key = keys[i];
+          this.attribute[key] = params[key];
+        }
+        this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTags(keys) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context);
+      }
+      setAttribute(key, value, forceUpdateTag, context) {
+        var _a;
+        const params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+          [key]: value
+        }, this.attribute, key, context);
+        params ? this._setAttributes(params, forceUpdateTag, context) : isNil$1(null === (_a = this.normalAttrs) || void 0 === _a ? void 0 : _a[key]) ? (this.attribute[key] = value, this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context)) : this.normalAttrs[key] = value, "background" === key ? this.loadImage(value, !0) : "shadowGraphic" === key && this.setShadowGraphic(value);
+      }
+      needUpdateTags(keys) {
+        let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GRAPHIC_UPDATE_TAG_KEY;
+        for (let i = 0; i < k.length; i++) {
+          const attrKey = k[i];
+          if (-1 !== keys.indexOf(attrKey)) return !0;
+        }
+        return !1;
+      }
+      needUpdateTag(key) {
+        let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GRAPHIC_UPDATE_TAG_KEY;
+        for (let i = 0; i < k.length; i++) {
+          if (key === k[i]) return !0;
+        }
+        return !1;
+      }
+      initAttributes(params) {
+        const context = {
+          type: AttributeUpdateType.INIT
+        };
+        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
+      }
+      translate(x, y) {
+        var _a, _b;
+        if (0 === x && 0 === y) return this;
+        const context = {
+            type: AttributeUpdateType.TRANSLATE
+          },
+          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            x: x,
+            y: y
+          }, this.attribute, tempConstantXYKey, context);
+        params && (x = params.x, y = params.y, delete params.x, delete params.y, this._setAttributes(params));
+        const attribute = this.attribute,
+          postMatrix = attribute.postMatrix;
+        return postMatrix ? application.transformUtil.fromMatrix(postMatrix, postMatrix).translate(x, y) : (attribute.x = (null !== (_a = attribute.x) && void 0 !== _a ? _a : DefaultTransform.x) + x, attribute.y = (null !== (_b = attribute.y) && void 0 !== _b ? _b : DefaultTransform.y) + y), this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this;
+      }
+      translateTo(x, y) {
+        const attribute = this.attribute;
+        if (attribute.x === x && attribute.y === y) return this;
+        const context = {
+            type: AttributeUpdateType.TRANSLATE_TO
+          },
+          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            x: x,
+            y: y
+          }, this.attribute, tempConstantXYKey, context);
+        return params ? (this._setAttributes(params, !1, context), this) : (attribute.x = x, attribute.y = y, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this);
+      }
+      scale(scaleX, scaleY, scaleCenter) {
+        var _a, _b;
+        if (1 === scaleX && 1 === scaleY) return this;
+        const context = {
+            type: AttributeUpdateType.SCALE
+          },
+          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            scaleX: scaleX,
+            scaleY: scaleY,
+            scaleCenter: scaleCenter
+          }, this.attribute, tempConstantScaleXYKey, context);
+        params && (scaleX = params.scaleX, scaleY = params.scaleY, delete params.scaleX, delete params.scaleY, this._setAttributes(params));
+        const attribute = this.attribute;
+        if (scaleCenter) {
+          let {
+            postMatrix: postMatrix
+          } = this.attribute;
+          postMatrix || (postMatrix = new Matrix(), attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).scale(scaleX, scaleY, scaleCenter);
+        } else attribute.scaleX = (null !== (_a = attribute.scaleX) && void 0 !== _a ? _a : DefaultTransform.scaleX) * scaleX, attribute.scaleY = (null !== (_b = attribute.scaleY) && void 0 !== _b ? _b : DefaultTransform.scaleY) * scaleY;
+        return this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this;
+      }
+      scaleTo(scaleX, scaleY) {
+        const attribute = this.attribute;
+        if (attribute.scaleX === scaleX && attribute.scaleY === scaleY) return this;
+        const context = {
+            type: AttributeUpdateType.SCALE_TO
+          },
+          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            scaleX: scaleX,
+            scaleY: scaleY
+          }, this.attribute, tempConstantScaleXYKey, context);
+        return params ? (this._setAttributes(params, !1, context), this) : (attribute.scaleX = scaleX, attribute.scaleY = scaleY, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this);
+      }
+      rotate(angle, rotateCenter) {
+        var _a;
+        if (0 === angle) return this;
+        const context = {
+            type: AttributeUpdateType.ROTATE
+          },
+          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+            angle: angle,
+            rotateCenter: rotateCenter
+          }, this.attribute, tempConstantAngleKey, context);
+        params && (delete params.angle, this._setAttributes(params, !1, context));
+        const attribute = this.attribute;
+        if (rotateCenter) {
+          let {
+            postMatrix: postMatrix
+          } = this.attribute;
+          postMatrix || (postMatrix = new Matrix(), attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
+        } else attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
+        return this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this;
+      }
+      rotateTo(angle) {
+        const attribute = this.attribute;
+        if (attribute.angle === angle) return this;
+        const context = {
+            type: AttributeUpdateType.ROTATE_TO
+          },
+          params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(angle, this.attribute, tempConstantAngleKey, context);
+        return params ? (this._setAttributes(params, !1, context), this) : (attribute.angle = angle, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this);
+      }
+      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));
+      }
+      update(d) {
+        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));
+      }
+      getState(stateName) {
+        var _a;
+        return null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
+      }
+      applyStateAttrs(attrs, stateNames, hasAnimation, isClear) {
+        var _a, _b, _c, _d;
+        if (hasAnimation) {
+          const keys = Object.keys(attrs),
+            noWorkAttrs = this.getNoWorkAnimateAttr(),
+            animateAttrs = {};
+          let noAnimateAttrs;
+          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, {
+            type: AttributeUpdateType.STATE
+          });
+        } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
+          type: AttributeUpdateType.STATE
+        });
+      }
+      updateNormalAttrs(stateAttrs) {
+        const newNormalAttrs = {};
+        this.normalAttrs ? (Object.keys(stateAttrs).forEach(key => {
+          key in this.normalAttrs ? (newNormalAttrs[key] = this.normalAttrs[key], delete this.normalAttrs[key]) : newNormalAttrs[key] = this.getNormalAttribute(key);
+        }), Object.keys(this.normalAttrs).forEach(key => {
+          stateAttrs[key] = this.normalAttrs[key];
+        })) : Object.keys(stateAttrs).forEach(key => {
+          newNormalAttrs[key] = this.getNormalAttribute(key);
+        }), this.normalAttrs = newNormalAttrs;
+      }
+      stopStateAnimates() {
+        let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "end";
+        this.animates && this.animates.forEach(animate => {
+          animate.stateNames && (animate.stop(type), this.animates.delete(animate.id));
+        });
+      }
+      getNormalAttribute(key) {
+        let value = this.attribute[key];
+        return this.animates && this.animates.forEach(animate => {
+          if (animate.stateNames) {
+            const endProps = animate.getEndProps();
+            has$1(endProps, key) && (value = endProps[key]);
+          }
+        }), value;
+      }
+      clearStates(hasAnimation) {
+        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) {
+          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) {
+        if (this.hasState(stateName)) this.removeState(stateName, hasAnimation);else {
+          if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) < 0) {
+            const nextStates = this.currentStates ? this.currentStates.slice() : [];
+            nextStates.push(stateName), this.useStates(nextStates, hasAnimation);
+          }
+        }
+      }
+      addState(stateName, keepCurrentStates, hasAnimation) {
+        var _a;
+        if (this.currentStates && this.currentStates.includes(stateName) && (keepCurrentStates || 1 === this.currentStates.length)) return;
+        const newStates = keepCurrentStates && (null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) ? this.currentStates.concat([stateName]) : [stateName];
+        this.useStates(newStates, hasAnimation);
+      }
+      useStates(states, hasAnimation) {
+        var _a;
+        if (!states.length) return void this.clearStates(hasAnimation);
+        if (!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) !== states.length || states.some((stateName, index) => this.currentStates[index] !== stateName))) return;
+        const stateAttrs = {};
+        states.forEach(stateName => {
+          var _a;
+          const attrs = this.stateProxy ? this.stateProxy(stateName, states) : null === (_a = this.states) || void 0 === _a ? void 0 : _a[stateName];
+          attrs && Object.assign(stateAttrs, attrs);
+        }), this.updateNormalAttrs(stateAttrs), this.currentStates = states, this.applyStateAttrs(stateAttrs, states, hasAnimation);
+      }
+      addUpdateBoundTag() {
+        this._updateTag |= UpdateTag.UPDATE_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), this.glyphHost && this.glyphHost.addUpdateBoundTag();
+      }
+      addUpdateShapeTag() {
+        this._updateTag |= UpdateTag.UPDATE_SHAPE;
+      }
+      addUpdateShapeAndBoundsTag() {
+        this._updateTag |= UpdateTag.UPDATE_SHAPE_AND_BOUNDS, this.parent && this.parent.addChildUpdateBoundTag(), this.glyphHost && this.glyphHost.addUpdateBoundTag();
+      }
+      updateShapeAndBoundsTagSetted() {
+        return (this._updateTag & UpdateTag.UPDATE_SHAPE_AND_BOUNDS) === UpdateTag.UPDATE_SHAPE_AND_BOUNDS;
+      }
+      clearUpdateBoundTag() {
+        this._updateTag &= UpdateTag.CLEAR_BOUNDS;
+      }
+      addUpdatePositionTag() {
+        this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= UpdateTag.UPDATE_GLOBAL_LOCAL_MATRIX;
+      }
+      addUpdateGlobalPositionTag() {
+        this.shadowRoot && this.shadowRoot.addUpdateGlobalPositionTag(), this._updateTag |= UpdateTag.UPDATE_GLOBAL_MATRIX;
+      }
+      clearUpdateLocalPositionTag() {
+        this._updateTag &= UpdateTag.CLEAR_LOCAL_MATRIX;
+      }
+      clearUpdateGlobalPositionTag() {
+        this._updateTag &= UpdateTag.CLEAR_GLOBAL_MATRIX;
+      }
+      addUpdateLayoutTag() {
+        this._updateTag |= UpdateTag.UPDATE_LAYOUT;
+      }
+      clearUpdateLayoutTag() {
+        this._updateTag &= UpdateTag.CLEAR_LAYOUT;
+      }
+      needUpdateLayout() {
+        return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
+      }
+      getAnchor(anchor, params) {
+        const _anchor = [0, 0],
+          getBounds = () => {
+            if (params.b) return params.b;
+            const {
+              scaleX: scaleX,
+              scaleY: scaleY,
+              angle: angle,
+              scaleCenter: scaleCenter
+            } = this.attribute;
+            return tempBounds.copy(this._AABBBounds), this.setAttributes({
+              angle: 0,
+              scaleCenter: null
+            }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
+              scaleX: scaleX,
+              scaleY: scaleY,
+              angle: angle,
+              scaleCenter: scaleCenter
+            }), params.b;
+          };
+        if ("string" == typeof anchor[0]) {
+          const ratio = parseFloat(anchor[0]) / 100,
+            bounds = getBounds();
+          _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+        } else _anchor[0] = anchor[0];
+        if ("string" == typeof anchor[1]) {
+          const ratio = parseFloat(anchor[1]) / 100,
+            bounds = getBounds();
+          _anchor[1] = bounds.y1 + (bounds.y2 - bounds.y1) * ratio;
+        } else _anchor[1] = anchor[1];
+        return _anchor;
+      }
+      doUpdateLocalMatrix() {
+        const {
+          x = DefaultTransform.x,
+          y = DefaultTransform.y,
+          scaleX = DefaultTransform.scaleX,
+          scaleY = DefaultTransform.scaleY,
+          angle = DefaultTransform.angle,
+          scaleCenter: scaleCenter,
+          anchor: anchor,
+          postMatrix: postMatrix
+        } = this.attribute;
+        let _anchor = [0, 0];
+        const params = {};
+        if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
+          const m = this._transMatrix;
+          m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+            x: _anchor[0],
+            y: _anchor[1]
+          });
+        }
+        const p = this.getOffsetXY(DefaultTransform);
+        if (this._transMatrix.e += p.x, this._transMatrix.f += p.y, postMatrix) {
+          const m1 = tempMatrix.setValue(postMatrix.a, postMatrix.b, postMatrix.c, postMatrix.d, postMatrix.e, postMatrix.f),
+            m2 = this._transMatrix;
+          m1.multiply(m2.a, m2.b, m2.c, m2.d, m2.e, m2.f), m2.setValue(m1.a, m1.b, m1.c, m1.d, m1.e, m1.f);
+        }
+      }
+      doUpdateGlobalMatrix() {
+        if (this.parent) {
+          this._globalTransMatrix.multiply(this.transMatrix.a, this.transMatrix.b, this.transMatrix.c, this.transMatrix.d, this.transMatrix.e, this.transMatrix.f);
+          const {
+            scrollX = 0,
+            scrollY = 0
+          } = this.parent.attribute;
+          this._globalTransMatrix.translate(scrollX, scrollY);
+        }
+      }
+      setStage(stage, layer) {
+        if (this.stage !== stage) {
+          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);
+            });
+          }
+          this._onSetStage && this._onSetStage(this, stage, layer), application.graphicService.onSetStage(this, stage);
+        }
+      }
+      setStageToShadowRoot(stage, layer) {
+        this.shadowRoot && this.shadowRoot.setStage(stage, layer);
+      }
+      onAddStep(step) {}
+      onStop(props) {
+        props && this.setAttributes(props, !1, {
+          type: AttributeUpdateType.ANIMATE_END
+        });
+      }
+      onStep(subAnimate, animate, step, ratio, end) {
+        const nextAttributes = {};
+        if (step.customAnimate) step.customAnimate.update(end, ratio, nextAttributes);else {
+          const nextProps = step.props,
+            nextParsedProps = step.parsedProps,
+            propKeys = step.propKeys;
+          this.stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, void 0, nextParsedProps, propKeys);
+        }
+        this.setAttributes(nextAttributes, !1, {
+          type: AttributeUpdateType.ANIMATE_UPDATE,
+          animationState: {
+            ratio: ratio,
+            end: end,
+            step: step,
+            isFirstFrameOfStep: subAnimate.getLastStep() !== step
+          }
+        }), this.stage && this.stage.renderNextFrame();
+      }
+      stepInterpolate(subAnimate, animate, nextAttributes, step, ratio, end, nextProps, lastProps, nextParsedProps, propKeys) {
+        propKeys || (propKeys = Object.keys(nextProps), step.propKeys = propKeys), end ? step.propKeys.forEach(key => {
+          animate.validAttr(key) && (nextAttributes[key] = nextProps[key]);
+        }) : propKeys.forEach(key => {
+          var _a;
+          if (!animate.validAttr(key)) return;
+          const nextStepVal = nextProps[key],
+            lastStepVal = null !== (_a = lastProps && lastProps[key]) && void 0 !== _a ? _a : subAnimate.getLastPropByName(key, step);
+          if (null == nextStepVal || null == lastStepVal || nextStepVal === lastStepVal) return void (nextAttributes[key] = nextStepVal);
+          let match;
+          match = animate.interpolateFunc && animate.interpolateFunc(key, ratio, lastStepVal, nextStepVal, nextAttributes), match || (match = animate.customInterpolate(key, ratio, lastStepVal, nextStepVal, this, nextAttributes), match || this.defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) || this._interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes));
+        }), step.parsedProps = nextParsedProps;
+      }
+      defaultInterpolate(nextStepVal, lastStepVal, key, nextAttributes, nextParsedProps, ratio) {
+        if (Number.isFinite(nextStepVal) && Number.isFinite(lastStepVal)) return nextAttributes[key] = lastStepVal + (nextStepVal - lastStepVal) * ratio, !0;
+        if ("fill" === key) {
+          nextParsedProps || (nextParsedProps = {});
+          const fillColorArray = nextParsedProps.fillColorArray,
+            color = interpolateColor(lastStepVal, null != fillColorArray ? fillColorArray : nextStepVal, ratio, !1, (fArray, tArray) => {
+              nextParsedProps.fillColorArray = tArray;
+            });
+          return color && (nextAttributes[key] = color), !0;
+        }
+        if ("stroke" === key) {
+          nextParsedProps || (nextParsedProps = {});
+          const strokeColorArray = nextParsedProps.strokeColorArray,
+            color = interpolateColor(lastStepVal, null != strokeColorArray ? strokeColorArray : nextStepVal, ratio, !1, (fArray, tArray) => {
+              nextParsedProps.strokeColorArray = tArray;
+            });
+          return color && (nextAttributes[key] = color), !0;
+        }
+        if ("shadowColor" === key) {
+          nextParsedProps || (nextParsedProps = {});
+          const shadowColorArray = nextParsedProps.shadowColorArray,
+            color = interpolateColor(lastStepVal, null != shadowColorArray ? shadowColorArray : nextStepVal, ratio, !0, (fArray, tArray) => {
+              nextParsedProps.shadowColorArray = tArray;
+            });
+          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) {}
+      getDefaultAttribute(name) {
+        return this.getGraphicTheme()[name];
+      }
+      getComputedAttribute(name) {
+        var _a;
+        return null !== (_a = this.attribute[name]) && void 0 !== _a ? _a : this.getDefaultAttribute(name);
+      }
+      onSetStage(cb) {
+        let immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        this._onSetStage = cb, immediate && this.stage && cb(this, this.stage);
+      }
+      attachShadow(shadowRoot) {
+        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.release(!0), this.shadowRoot = null);
+      }
+      toJson() {
+        return {
+          attribute: this.attribute,
+          _uid: this._uid,
+          type: this.type,
+          name: this.name,
+          children: this.children.map(item => item.toJson())
+        };
+      }
+      createPathProxy(path) {
+        return isString$1(path, !0) ? this.pathProxy = new CustomPath2D().fromString(path) : this.pathProxy = new CustomPath2D(), this.pathProxy;
+      }
+      loadImage(image) {
+        let background = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        if (!image || background && backgroundNotImage(image)) return;
+        const url = image;
+        this.resources || (this.resources = new Map());
+        const cache = {
+          data: "init",
+          state: null
+        };
+        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : isObject$1(image) ? (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
+      }
+      setShadowGraphic(graphic) {
+        if (graphic) {
+          this.attachShadow().add(graphic);
+        } else this.detachShadow();
+      }
+      imageLoadSuccess(url, image, cb) {
+        if (!this.resources) return;
+        const res = this.resources.get(url);
+        res && (res.state = "success", res.data = image, cb && cb(), this.addUpdateBoundTag(), this.stage && this.stage.renderNextFrame());
+      }
+      imageLoadFail(url, cb) {
+        if (!this.resources) return;
+        const res = this.resources.get(url);
+        res && (res.state = "fail", cb && cb());
+      }
+      _stopAnimates(animates) {
+        animates && animates.forEach(animate => {
+          animate.stop();
+        });
+      }
+      stopAnimates() {
+        let stopChildren = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+        this._stopAnimates(this.animates), this.shadowRoot && this.shadowRoot.stopAnimates(!0), this.isContainer && stopChildren && this.forEachChildren(c => {
+          c.stopAnimates(stopChildren);
+        });
+      }
+      release() {
+        this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this);
+      }
+      _emitCustomEvent(type, context) {
+        var _a, _b;
+        if (this._events && type in this._events) {
+          const changeEvent = new CustomEvent(type, context);
+          changeEvent.bubbles = !1, changeEvent.manager = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem) || void 0 === _b ? void 0 : _b.manager, this.dispatchEvent(changeEvent);
+        }
+      }
+    }
+    function backgroundNotImage(image) {
+      return !(!image.fill && !image.stroke);
+    }
+    Graphic.userSymbolMap = {}, Graphic.mixin(EventTarget);
+
+    const updateBoundsOfCommonOuterBorder = (attribute, theme, aabbBounds) => {
+      const {
+        outerBorder: outerBorder,
+        shadowBlur = theme.shadowBlur
+      } = attribute;
+      if (outerBorder) {
+        const defaultOuterBorder = theme.outerBorder,
+          {
+            distance = defaultOuterBorder.distance,
+            lineWidth = defaultOuterBorder.lineWidth
+          } = outerBorder;
+        aabbBounds.expand(distance + (shadowBlur + lineWidth) / 2);
+      }
+      return aabbBounds;
+    };
+
+    const RECT_UPDATE_TAG_KEY = ["width", "x1", "y1", "height", "cornerRadius", ...GRAPHIC_UPDATE_TAG_KEY];
+    class Rect extends Graphic {
+      constructor(params) {
+        super(params), this.type = "rect", this.numberType = RECT_NUMBER_TYPE;
+      }
+      isValid() {
+        return super.isValid() && this._isValid();
+      }
+      _isValid() {
+        return !0;
+      }
+      getGraphicTheme() {
+        return getTheme(this).rect;
+      }
+      updateAABBBounds(attribute, rectTheme, aabbBounds) {
+        if (!this.updatePathProxyAABBBounds(aabbBounds)) {
+          let {
+            width: width,
+            height: height
+          } = attribute;
+          const {
+            x1: x1,
+            y1: y1,
+            x: x,
+            y: y
+          } = attribute;
+          width = null != width ? width : x1 - x, height = null != height ? height : y1 - y, (isFinite(width) || isFinite(height) || isFinite(x) || isFinite(y)) && aabbBounds.set(0, 0, width || 0, height || 0);
+        }
+        const {
+          tb1: tb1,
+          tb2: tb2
+        } = application.graphicService.updateTempAABBBounds(aabbBounds);
+        return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
+      }
+      needUpdateTags(keys) {
+        return super.needUpdateTags(keys, RECT_UPDATE_TAG_KEY);
+      }
+      needUpdateTag(key) {
+        return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
+      }
+      toCustomPath() {
+        const attribute = this.attribute,
+          {
+            x: x,
+            y: y,
+            width: width,
+            height: height
+          } = normalizeRectAttributes(attribute),
+          path = new CustomPath2D();
+        return path.moveTo(x, y), path.rect(x, y, width, height), path;
+      }
+      clone() {
+        return new Rect(Object.assign({}, this.attribute));
+      }
+      getNoWorkAnimateAttr() {
+        return Rect.NOWORK_ANIMATE_ATTR;
+      }
+    }
+    Rect.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
+    function createRect(attributes) {
+      return new Rect(attributes);
+    }
+
+    function isSameRange$2(range1, range2) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return !range1 && !range2 || !(!range1 || !range2) && (null === (_a = range1.start) || void 0 === _a ? void 0 : _a.col) === (null === (_b = range2.start) || void 0 === _b ? void 0 : _b.col) && (null === (_c = range1.start) || void 0 === _c ? void 0 : _c.row) === (null === (_d = range2.start) || void 0 === _d ? void 0 : _d.row) && (null === (_e = range1.end) || void 0 === _e ? void 0 : _e.col) === (null === (_f = range2.end) || void 0 === _f ? void 0 : _f.col) && (null === (_g = range1.end) || void 0 === _g ? void 0 : _g.row) === (null === (_h = range2.end) || void 0 === _h ? void 0 : _h.row);
+    }
+
+    const isNode = "undefined" == typeof window || void 0 === window.window;
+    function analyzeUserAgent() {
+      if (isNode) return {
+        IE: !1,
+        Edge: !1,
+        Chrome: !1,
+        Firefox: !1,
+        Safari: !1
+      };
+      const ua = window.navigator.userAgent.toLowerCase();
+      return {
+        IE: !!/(msie|trident)/.exec(ua),
+        Edge: ua.indexOf("edge") > -1,
+        Chrome: ua.indexOf("chrome") > -1 && -1 === ua.indexOf("edge"),
+        Firefox: ua.indexOf("firefox") > -1,
+        Safari: ua.indexOf("safari") > -1 && -1 === ua.indexOf("edge")
+      };
+    }
+    analyzeUserAgent();
+    function cellInRange(range, col, row) {
+      return range.start.col <= col && col <= range.end.col && range.start.row <= row && row <= range.end.row || range.end.col <= col && col <= range.start.col && range.end.row <= row && row <= range.start.row || range.end.col <= col && col <= range.start.col && range.start.row <= row && row <= range.end.row || range.start.col <= col && col <= range.end.col && range.end.row <= row && row <= range.start.row;
+    }
+
+    class InvertHighlightPlugin {
+        table;
+        range;
+        _fill;
+        _opacity;
+        constructor(table, options) {
+            this.table = table;
+            this._fill = options?.fill ?? '#000';
+            this._opacity = options?.opacity ?? 0.5;
+        }
+        setInvertHighlightRange(range) {
+            if (isSameRange$2(this.range, range)) {
+                return;
+            }
+            this.range = range;
+            if (!range) {
+                this.deleteAllCellGroupShadow();
+            }
+            else {
+                this.updateCellGroupShadow();
+            }
+            this.table.scenegraph.updateNextFrame();
+        }
+        deleteAllCellGroupShadow() {
+            if (!this.table.isPivotTable()) {
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup);
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup);
+            }
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup);
+        }
+        updateCellGroupShadow() {
+            if (!this.table.isPivotTable()) {
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.rowHeaderGroup, this.range);
+                this.updateCellGroupShadowInContainer(this.table.scenegraph.leftBottomCornerGroup, this.range);
+            }
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bodyGroup, this.range);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightFrozenGroup, this.range);
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.bottomFrozenGroup), this.range;
+            this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup, this.range);
+        }
+        updateCellGroupShadowInContainer(container, range) {
+            container.forEachChildrenSkipChild((item) => {
+                const column = item;
+                if (column.role === 'column') {
+                    column.forEachChildrenSkipChild((item) => {
+                        const cell = item;
+                        if (cell.role !== 'cell') {
+                            return;
+                        }
+                        cell.attachShadow(cell.shadowRoot);
+                        const shadowGroup = cell.shadowRoot;
+                        if (!range) {
+                            shadowGroup.removeAllChild();
+                        }
+                        else if (cellInRange(range, cell.col, cell.row)) {
+                            shadowGroup.removeAllChild();
+                        }
+                        else if (!shadowGroup.firstChild) {
+                            const shadowRect = createRect({
+                                x: 0,
+                                y: 0,
+                                width: cell.attribute.width,
+                                height: cell.attribute.height,
+                                fill: this._fill,
+                                opacity: this._opacity
+                            });
+                            shadowRect.name = 'shadow-rect';
+                            shadowGroup.appendChild(shadowRect);
+                        }
+                    });
+                }
+            });
+        }
+    }
+
+    class HeaderHighlightPlugin {
+        table;
+        options;
+        colHeaderRange;
+        rowHeaderRange;
+        constructor(table, options) {
+            this.table = table;
+            this.options = options;
+            this.registerStyle();
+            this.bindEvent();
+        }
+        registerStyle() {
+            this.table.registerCustomCellStyle('col-highlight', {
+                bgColor: this.options?.colHighlightBGColor ?? '#82b2f5',
+                color: this.options?.colHighlightColor ?? '#FFF'
+            });
+            this.table.registerCustomCellStyle('row-highlight', {
+                bgColor: this.options?.rowHighlightBGColor ?? '#82b2f5',
+                color: this.options?.rowHighlightColor ?? '#FFF'
+            });
+        }
+        bindEvent() {
+            this.table.on('selected_cell', () => {
+                this.updateHighlight();
+            });
+            this.table.on('selected_clear', () => {
+                this.clearHighlight();
+            });
+            this.table.on('mousemove_table', () => {
+                if (this.table.stateManager.select.selecting) {
+                    this.updateHighlight();
+                }
+            });
+        }
+        clearHighlight() {
+            this.colHeaderRange && this.table.arrangeCustomCellStyle({ range: this.colHeaderRange }, undefined, true);
+            this.rowHeaderRange && this.table.arrangeCustomCellStyle({ range: this.rowHeaderRange }, undefined, true);
+            this.colHeaderRange = undefined;
+            this.rowHeaderRange = undefined;
+        }
+        updateHighlight() {
+            if (this.options?.colHighlight === false && this.options?.rowHighlight === false) {
+                return;
+            }
+            const selectRanges = this.table.getSelectedCellRanges();
+            if (selectRanges.length === 0) {
+                this.clearHighlight();
+                return;
+            }
+            const selectRange = selectRanges[0];
+            const rowSelectRange = [selectRange.start.row, selectRange.end.row];
+            rowSelectRange.sort((a, b) => a - b);
+            const colSelectRange = [selectRange.start.col, selectRange.end.col];
+            colSelectRange.sort((a, b) => a - b);
+            let colHeaderRange;
+            let rowHeaderRange;
+            if (this.table.isPivotTable()) {
+                colHeaderRange = {
+                    start: {
+                        col: colSelectRange[0],
+                        row: 0
+                    },
+                    end: {
+                        col: colSelectRange[1],
+                        row: this.table.columnHeaderLevelCount - 1
+                    }
+                };
+                rowHeaderRange = {
+                    start: {
+                        col: 0,
+                        row: rowSelectRange[0]
+                    },
+                    end: {
+                        col: this.table.rowHeaderLevelCount - 1,
+                        row: rowSelectRange[1]
+                    }
+                };
+            }
+            else if (this.table.internalProps.transpose) {
+                rowHeaderRange = {
+                    start: {
+                        col: 0,
+                        row: rowSelectRange[0]
+                    },
+                    end: {
+                        col: this.table.rowHeaderLevelCount - 1,
+                        row: rowSelectRange[1]
+                    }
+                };
+            }
+            else {
+                colHeaderRange = {
+                    start: {
+                        col: colSelectRange[0],
+                        row: 0
+                    },
+                    end: {
+                        col: colSelectRange[1],
+                        row: this.table.columnHeaderLevelCount - 1
+                    }
+                };
+                if (this.table.internalProps.rowSeriesNumber) {
+                    rowHeaderRange = {
+                        start: {
+                            col: 0,
+                            row: rowSelectRange[0]
+                        },
+                        end: {
+                            col: 0,
+                            row: rowSelectRange[1]
+                        }
+                    };
+                }
+            }
+            if (this.options?.colHighlight !== false && !isSameRange$1(this.colHeaderRange, colHeaderRange)) {
+                this.colHeaderRange && this.table.arrangeCustomCellStyle({ range: this.colHeaderRange }, undefined);
+                colHeaderRange && this.table.arrangeCustomCellStyle({ range: colHeaderRange }, 'col-highlight');
+                this.colHeaderRange = colHeaderRange;
+            }
+            if (this.options?.rowHighlight !== false && !isSameRange$1(this.rowHeaderRange, rowHeaderRange)) {
+                this.rowHeaderRange && this.table.arrangeCustomCellStyle({ range: this.rowHeaderRange }, undefined);
+                rowHeaderRange && this.table.arrangeCustomCellStyle({ range: rowHeaderRange }, 'row-highlight');
+                this.rowHeaderRange = rowHeaderRange;
+            }
+        }
+    }
+    function isSameRange$1(a, b) {
+        if (a === undefined && b === undefined) {
+            return true;
+        }
+        if (a === undefined || b === undefined) {
+            return false;
+        }
+        return (a.start.col === b.start.col && a.start.row === b.start.row && a.end.col === b.end.col && a.end.row === b.end.row);
+    }
+
+    class AddRowColumnPlugin {
+        id = 'add-row-column';
+        runTime = [
+            VTable__namespace.TABLE_EVENT_TYPE.MOUSEENTER_CELL,
+            VTable__namespace.TABLE_EVENT_TYPE.MOUSELEAVE_CELL,
+            VTable__namespace.TABLE_EVENT_TYPE.MOUSELEAVE_TABLE
+        ];
+        pluginOptions;
+        table;
+        hoverCell;
+        hideAllTimeoutId_addColumn;
+        hideAllTimeoutId_addRow;
+        leftDotForAddColumn;
+        rightDotForAddColumn;
+        addIconForAddColumn;
+        addLineForAddColumn;
+        topDotForAddRow;
+        bottomDotForAddRow;
+        addIconForAddRow;
+        addLineForAddRow;
+        constructor(pluginOptions = {
+            addColumnEnable: true,
+            addRowEnable: true
+        }) {
+            this.pluginOptions = pluginOptions;
+            this.pluginOptions.addColumnEnable = this.pluginOptions.addColumnEnable ?? true;
+            this.pluginOptions.addRowEnable = this.pluginOptions.addRowEnable ?? true;
+            if (this.pluginOptions.addColumnEnable) {
+                this.initAddColumnDomElement();
+                this.bindEventForAddColumn();
+            }
+            if (this.pluginOptions.addRowEnable) {
+                this.initAddRowDomElement();
+                this.bindEventForAddRow();
+            }
+        }
+        run(...args) {
+            const eventArgs = args[0];
+            const runTime = args[1];
+            const table = args[2];
+            this.table = table;
+            if (runTime === VTable__namespace.TABLE_EVENT_TYPE.MOUSEENTER_CELL) {
+                clearTimeout(this.hideAllTimeoutId_addColumn);
+                clearTimeout(this.hideAllTimeoutId_addRow);
+                const canvasBounds = table.canvas.getBoundingClientRect();
+                const cell = table.getCellAtRelativePosition(eventArgs.event.clientX - canvasBounds.left, eventArgs.event.clientY - canvasBounds.top);
+                this.hoverCell = cell;
+                const cellRect = table.getCellRelativeRect(cell.col, cell.row);
+                if (this.pluginOptions.addColumnEnable) {
+                    const isRowSerierNumberCol = table.isSeriesNumber(cell.col, 0);
+                    this.showDotForAddColumn(canvasBounds.top - 6, cellRect.left + canvasBounds.left, cellRect.right + canvasBounds.left, !isRowSerierNumberCol);
+                }
+                if (this.pluginOptions.addRowEnable) {
+                    const isHeader = table.isHeader(cell.col, cell.row);
+                    this.showDotForAddRow(cellRect.top + canvasBounds.top, canvasBounds.left - 6, cellRect.bottom + canvasBounds.top, !isHeader, !isHeader);
+                }
+            }
+            else if (runTime === VTable__namespace.TABLE_EVENT_TYPE.MOUSELEAVE_CELL) ;
+            else if (runTime === VTable__namespace.TABLE_EVENT_TYPE.MOUSELEAVE_TABLE) {
+                if (this.pluginOptions.addColumnEnable) {
+                    this.delayHideAllForAddColumn();
+                }
+                if (this.pluginOptions.addRowEnable) {
+                    this.delayHideAllForAddRow();
+                }
+            }
+        }
+        initAddColumnDomElement() {
+            this.leftDotForAddColumn = document.createElement('div');
+            this.leftDotForAddColumn.style.width = '6px';
+            this.leftDotForAddColumn.style.height = '6px';
+            this.leftDotForAddColumn.style.backgroundColor = '#4A90E2';
+            this.leftDotForAddColumn.style.position = 'absolute';
+            this.leftDotForAddColumn.style.cursor = 'pointer';
+            this.leftDotForAddColumn.style.zIndex = '1000';
+            this.leftDotForAddColumn.style.borderRadius = '50%';
+            this.leftDotForAddColumn.style.border = '1px solid white';
+            this.leftDotForAddColumn.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
+            document.body.appendChild(this.leftDotForAddColumn);
+            this.rightDotForAddColumn = document.createElement('div');
+            this.rightDotForAddColumn.style.width = '6px';
+            this.rightDotForAddColumn.style.height = '6px';
+            this.rightDotForAddColumn.style.backgroundColor = '#4A90E2';
+            this.rightDotForAddColumn.style.position = 'absolute';
+            this.rightDotForAddColumn.style.cursor = 'pointer';
+            this.rightDotForAddColumn.style.zIndex = '1000';
+            this.rightDotForAddColumn.style.borderRadius = '50%';
+            this.rightDotForAddColumn.style.border = '1px solid white';
+            this.rightDotForAddColumn.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
+            document.body.appendChild(this.rightDotForAddColumn);
+            this.addIconForAddColumn = document.createElement('div');
+            this.addIconForAddColumn.style.width = '18px';
+            this.addIconForAddColumn.style.height = '18px';
+            this.addIconForAddColumn.style.backgroundColor = '#4A90E2';
+            this.addIconForAddColumn.style.position = 'absolute';
+            this.addIconForAddColumn.style.zIndex = '1001';
+            this.addIconForAddColumn.style.display = 'none';
+            this.addIconForAddColumn.style.borderRadius = '50%';
+            this.addIconForAddColumn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
+            this.addIconForAddColumn.style.display = 'flex';
+            this.addIconForAddColumn.style.justifyContent = 'center';
+            this.addIconForAddColumn.style.alignItems = 'center';
+            this.addIconForAddColumn.style.border = '1px solid white';
+            document.body.appendChild(this.addIconForAddColumn);
+            const addIconText = document.createElement('div');
+            addIconText.textContent = '+';
+            addIconText.style.color = 'white';
+            addIconText.style.fontSize = '18px';
+            addIconText.style.fontWeight = 'bold';
+            addIconText.style.lineHeight = '15px';
+            addIconText.style.userSelect = 'none';
+            addIconText.style.cursor = 'pointer';
+            addIconText.style.verticalAlign = 'top';
+            addIconText.style.textAlign = 'center';
+            this.addIconForAddColumn.appendChild(addIconText);
+            this.addLineForAddColumn = document.createElement('div');
+            this.addLineForAddColumn.style.width = '2px';
+            this.addLineForAddColumn.style.height = '10px';
+            this.addLineForAddColumn.style.backgroundColor = '#4A90E2';
+            this.addLineForAddColumn.style.position = 'absolute';
+            this.addLineForAddColumn.style.zIndex = '1001';
+            this.addLineForAddColumn.style.display = 'none';
+            document.body.appendChild(this.addLineForAddColumn);
+        }
+        bindEventForAddColumn() {
+            this.leftDotForAddColumn.addEventListener('mouseenter', () => {
+                clearTimeout(this.hideAllTimeoutId_addColumn);
+                this.addIconForAddColumn.style.display = 'block';
+                const dotWidth = this.leftDotForAddColumn.offsetWidth;
+                const dotHeight = this.leftDotForAddColumn.offsetHeight;
+                this.showAddIconForAddColumn(this.leftDotForAddColumn.offsetLeft + dotWidth / 2, this.leftDotForAddColumn.offsetTop + dotHeight / 2, true);
+                this.showSplitLineForAddColumn(this.leftDotForAddColumn.offsetLeft + dotWidth / 2 - 1, this.leftDotForAddColumn.offsetTop + dotHeight / 2 + 2, this.table.getDrawRange().height);
+            });
+            this.rightDotForAddColumn.addEventListener('mouseenter', () => {
+                clearTimeout(this.hideAllTimeoutId_addColumn);
+                this.addIconForAddColumn.style.display = 'block';
+                const dotWidth = this.rightDotForAddColumn.offsetWidth;
+                const dotHeight = this.rightDotForAddColumn.offsetHeight;
+                this.showAddIconForAddColumn(this.rightDotForAddColumn.offsetLeft + dotWidth / 2, this.rightDotForAddColumn.offsetTop + dotHeight / 2, false);
+                this.showSplitLineForAddColumn(this.rightDotForAddColumn.offsetLeft + dotWidth / 2 - 1, this.rightDotForAddColumn.offsetTop + dotHeight / 2 + 2, this.table.getDrawRange().height);
+            });
+            this.addIconForAddColumn.addEventListener('mouseleave', () => {
+                this.addIconForAddColumn.style.display = 'none';
+                this.addLineForAddColumn.style.display = 'none';
+                this.delayHideAllForAddColumn();
+            });
+            this.addIconForAddColumn.addEventListener('click', (e) => {
+                const isLeft = this.addIconForAddColumn.dataset.addIconType === 'left';
+                const columns = this.table.options.columns;
+                const col = this.hoverCell.col;
+                const addColIndex = isLeft ? col : col + 1;
+                if (this.pluginOptions.addColumnCallback) {
+                    this.pluginOptions.addColumnCallback(addColIndex);
+                }
+                else {
+                    columns.splice(addColIndex, 0, {
+                        field: ``,
+                        title: `New Column ${col}`,
+                        width: 100
+                    });
+                    this.table.updateColumns(columns);
+                }
+                this.delayHideAllForAddColumn(0);
+            });
+        }
+        showDotForAddColumn(top, left, right, isShowLeft = true, isShowRight = true) {
+            const dotWidth = this.leftDotForAddColumn.offsetWidth;
+            const dotHeight = this.leftDotForAddColumn.offsetHeight;
+            this.leftDotForAddColumn.style.left = `${left - dotWidth / 2}px`;
+            this.leftDotForAddColumn.style.top = `${top - dotHeight / 2}px`;
+            this.rightDotForAddColumn.style.left = `${right - dotWidth / 2}px`;
+            this.rightDotForAddColumn.style.top = `${top - dotHeight / 2}px`;
+            this.leftDotForAddColumn.style.display = isShowLeft ? 'block' : 'none';
+            this.rightDotForAddColumn.style.display = isShowRight ? 'block' : 'none';
+        }
+        showAddIconForAddColumn(left, top, isLeft) {
+            const iconWidth = this.addIconForAddColumn.offsetWidth;
+            const iconHeight = this.addIconForAddColumn.offsetHeight;
+            const dotHeight = this.leftDotForAddColumn.offsetHeight;
+            this.addIconForAddColumn.style.left = `${left - iconWidth / 2}px`;
+            this.addIconForAddColumn.style.top = `${top - iconHeight / 2 - dotHeight / 2}px`;
+            if (isLeft) {
+                this.addIconForAddColumn.dataset.addIconType = 'left';
+            }
+            else {
+                this.addIconForAddColumn.dataset.addIconType = 'right';
+            }
+        }
+        showSplitLineForAddColumn(left, top, height) {
+            this.addLineForAddColumn.style.left = `${left}px`;
+            this.addLineForAddColumn.style.top = `${top}px`;
+            this.addLineForAddColumn.style.height = `${height}px`;
+            this.addLineForAddColumn.style.display = 'block';
+        }
+        delayHideAllForAddColumn(delay = 1000) {
+            this.hideAllTimeoutId_addColumn = setTimeout(() => {
+                this.addIconForAddColumn.style.display = 'none';
+                this.addLineForAddColumn.style.display = 'none';
+                this.leftDotForAddColumn.style.display = 'none';
+                this.rightDotForAddColumn.style.display = 'none';
+            }, delay);
+        }
+        initAddRowDomElement() {
+            this.topDotForAddRow = document.createElement('div');
+            this.topDotForAddRow.style.width = '6px';
+            this.topDotForAddRow.style.height = '6px';
+            this.topDotForAddRow.style.backgroundColor = '#4A90E2';
+            this.topDotForAddRow.style.position = 'absolute';
+            this.topDotForAddRow.style.cursor = 'pointer';
+            this.topDotForAddRow.style.zIndex = '1000';
+            this.topDotForAddRow.style.borderRadius = '50%';
+            this.topDotForAddRow.style.border = '1px solid white';
+            this.topDotForAddRow.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
+            document.body.appendChild(this.topDotForAddRow);
+            this.bottomDotForAddRow = document.createElement('div');
+            this.bottomDotForAddRow.style.width = '6px';
+            this.bottomDotForAddRow.style.height = '6px';
+            this.bottomDotForAddRow.style.backgroundColor = '#4A90E2';
+            this.bottomDotForAddRow.style.position = 'absolute';
+            this.bottomDotForAddRow.style.cursor = 'pointer';
+            this.bottomDotForAddRow.style.zIndex = '1000';
+            this.bottomDotForAddRow.style.borderRadius = '50%';
+            this.bottomDotForAddRow.style.border = '1px solid white';
+            this.bottomDotForAddRow.style.boxShadow = '0 1px 3px rgba(0,0,0,0.2)';
+            document.body.appendChild(this.bottomDotForAddRow);
+            this.addIconForAddRow = document.createElement('div');
+            this.addIconForAddRow.style.width = '18px';
+            this.addIconForAddRow.style.height = '18px';
+            this.addIconForAddRow.style.backgroundColor = '#4A90E2';
+            this.addIconForAddRow.style.position = 'absolute';
+            this.addIconForAddRow.style.zIndex = '1001';
+            this.addIconForAddRow.style.display = 'none';
+            this.addIconForAddRow.style.borderRadius = '50%';
+            this.addIconForAddRow.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
+            this.addIconForAddRow.style.display = 'flex';
+            this.addIconForAddRow.style.justifyContent = 'center';
+            this.addIconForAddRow.style.alignItems = 'center';
+            this.addIconForAddRow.style.border = '1px solid white';
+            document.body.appendChild(this.addIconForAddRow);
+            const addIconText = document.createElement('div');
+            addIconText.textContent = '+';
+            addIconText.style.color = 'white';
+            addIconText.style.fontSize = '18px';
+            addIconText.style.fontWeight = 'bold';
+            addIconText.style.lineHeight = '15px';
+            addIconText.style.userSelect = 'none';
+            addIconText.style.cursor = 'pointer';
+            addIconText.style.verticalAlign = 'top';
+            addIconText.style.textAlign = 'center';
+            this.addIconForAddRow.appendChild(addIconText);
+            this.addLineForAddRow = document.createElement('div');
+            this.addLineForAddRow.style.width = '10px';
+            this.addLineForAddRow.style.height = '2px';
+            this.addLineForAddRow.style.backgroundColor = '#4A90E2';
+            this.addLineForAddRow.style.position = 'absolute';
+            this.addLineForAddRow.style.zIndex = '1001';
+            this.addLineForAddRow.style.display = 'none';
+            document.body.appendChild(this.addLineForAddRow);
+        }
+        bindEventForAddRow() {
+            this.topDotForAddRow.addEventListener('mouseenter', () => {
+                clearTimeout(this.hideAllTimeoutId_addRow);
+                this.addIconForAddRow.style.display = 'block';
+                const dotWidth = this.topDotForAddRow.offsetWidth;
+                const dotHeight = this.topDotForAddRow.offsetHeight;
+                this.showAddIconForAddRow(this.topDotForAddRow.offsetLeft + dotWidth / 2, this.topDotForAddRow.offsetTop + dotHeight / 2, true);
+                this.showSplitLineForAddRow(this.topDotForAddRow.offsetLeft + dotWidth + 2, this.topDotForAddRow.offsetTop + dotHeight / 2 - 1, this.table.getDrawRange().width);
+            });
+            this.bottomDotForAddRow.addEventListener('mouseenter', () => {
+                clearTimeout(this.hideAllTimeoutId_addRow);
+                this.addIconForAddRow.style.display = 'block';
+                const dotWidth = this.bottomDotForAddRow.offsetWidth;
+                const dotHeight = this.bottomDotForAddRow.offsetHeight;
+                this.showAddIconForAddRow(this.bottomDotForAddRow.offsetLeft + dotWidth / 2, this.bottomDotForAddRow.offsetTop + dotHeight / 2, false);
+                this.showSplitLineForAddRow(this.bottomDotForAddRow.offsetLeft + dotWidth + 2, this.bottomDotForAddRow.offsetTop + dotHeight / 2 - 1, this.table.getDrawRange().height);
+            });
+            this.addIconForAddRow.addEventListener('mouseleave', () => {
+                this.addIconForAddRow.style.display = 'none';
+                this.addLineForAddRow.style.display = 'none';
+                this.delayHideAllForAddRow();
+            });
+            this.addIconForAddRow.addEventListener('click', (e) => {
+                const isTop = this.addIconForAddRow.dataset.addIconType === 'top';
+                const row = this.hoverCell.row;
+                const addRowIndex = isTop ? row : row + 1;
+                if (this.pluginOptions.addRowCallback) {
+                    this.pluginOptions.addRowCallback(addRowIndex);
+                }
+                else {
+                    const recordIndex = this.table.getRecordIndexByCell(0, addRowIndex);
+                    this.table.addRecord({}, recordIndex);
+                }
+                this.delayHideAllForAddRow(0);
+            });
+        }
+        showDotForAddRow(top, left, bottom, isShowTop = true, isShowBottom = true) {
+            const dotWidth = this.topDotForAddRow.offsetWidth;
+            const dotHeight = this.topDotForAddRow.offsetHeight;
+            this.topDotForAddRow.style.left = `${left - dotWidth / 2}px`;
+            this.topDotForAddRow.style.top = `${top - dotHeight / 2}px`;
+            this.bottomDotForAddRow.style.left = `${left - dotWidth / 2}px`;
+            this.bottomDotForAddRow.style.top = `${bottom - dotHeight / 2}px`;
+            this.topDotForAddRow.style.display = isShowTop ? 'block' : 'none';
+            this.bottomDotForAddRow.style.display = isShowBottom ? 'block' : 'none';
+        }
+        showAddIconForAddRow(left, top, isTop) {
+            const iconWidth = this.addIconForAddRow.offsetWidth;
+            const iconHeight = this.addIconForAddRow.offsetHeight;
+            const dotWidth = this.topDotForAddRow.offsetWidth;
+            this.addIconForAddRow.style.left = `${left - iconWidth / 2 - dotWidth / 2}px`;
+            this.addIconForAddRow.style.top = `${top - iconHeight / 2}px`;
+            if (isTop) {
+                this.addIconForAddRow.dataset.addIconType = 'top';
+            }
+            else {
+                this.addIconForAddRow.dataset.addIconType = 'bottom';
+            }
+        }
+        showSplitLineForAddRow(left, top, width) {
+            this.addLineForAddRow.style.left = `${left}px`;
+            this.addLineForAddRow.style.top = `${top}px`;
+            this.addLineForAddRow.style.width = `${width}px`;
+            this.addLineForAddRow.style.display = 'block';
+        }
+        delayHideAllForAddRow(delay = 1000) {
+            this.hideAllTimeoutId_addRow = setTimeout(() => {
+                this.addIconForAddRow.style.display = 'none';
+                this.addLineForAddRow.style.display = 'none';
+                this.topDotForAddRow.style.display = 'none';
+                this.bottomDotForAddRow.style.display = 'none';
+            }, delay);
+        }
+        release() {
+            this.leftDotForAddColumn.remove();
+            this.rightDotForAddColumn.remove();
+            this.addIconForAddColumn.remove();
+            this.addLineForAddColumn.remove();
+            this.topDotForAddRow.remove();
+            this.bottomDotForAddRow.remove();
+            this.addIconForAddRow.remove();
+            this.addLineForAddRow.remove();
+        }
+    }
+
+    class ColumnSeriesPlugin {
+        id = 'column-series';
+        runTime = [VTable__namespace.TABLE_EVENT_TYPE.BEFORE_INIT, VTable__namespace.TABLE_EVENT_TYPE.BEFORE_KEYDOWN];
+        pluginOptions;
+        table;
+        columns = [];
+        constructor(pluginOptions) {
+            this.pluginOptions = Object.assign({ columnCount: 100, autoExtendColumn: true }, pluginOptions);
+        }
+        run(...args) {
+            if (args[1] === VTable__namespace.TABLE_EVENT_TYPE.BEFORE_INIT) {
+                const eventArgs = args[0];
+                const table = args[2];
+                this.table = table;
+                const options = eventArgs.options;
+                this.columns = this.generateColumns(this.pluginOptions.columnCount);
+                options.columns = this.columns;
+            }
+            else if (args[1] === VTable__namespace.TABLE_EVENT_TYPE.BEFORE_KEYDOWN) {
+                const eventArgs = args[0];
+                const e = eventArgs.event;
+                if (e.key === 'ArrowRight') {
+                    if (this.pluginOptions.autoExtendColumn &&
+                        this.table.stateManager.select.cellPos.col === this.table.colCount - 1) {
+                        this.table.addColumn(this.generateColumn(this.table.colCount - 1));
+                    }
+                }
+            }
+        }
+        generateColumns(columnCount) {
+            const columnFields = [];
+            for (let i = 0; i < columnCount; i++) {
+                columnFields.push(this.generateColumn(i));
+            }
+            return columnFields;
+        }
+        generateColumn(index) {
+            const column = {
+                title: this.pluginOptions.generateColumnTitle
+                    ? this.pluginOptions.generateColumnTitle(index)
+                    : this.generateColumnField(index)
+            };
+            return column;
+        }
+        generateColumnField(index) {
+            if (index < 26) {
+                return String.fromCharCode(65 + index);
+            }
+            const title = [];
+            index++;
+            while (index > 0) {
+                index--;
+                title.unshift(String.fromCharCode(65 + (index % 26)));
+                index = Math.floor(index / 26);
+            }
+            return title.join('');
+        }
+        resetColumnCount(columnCount) {
+            this.pluginOptions.columnCount = columnCount;
+            this.columns = this.generateColumns(columnCount);
+            this.table.updateColumns(this.columns);
+        }
+    }
+
+    class RowSeriesPlugin {
+        id = 'row-series';
+        runTime = [VTable.TABLE_EVENT_TYPE.BEFORE_INIT, VTable.TABLE_EVENT_TYPE.BEFORE_KEYDOWN];
+        pluginOptions;
+        table;
+        constructor(pluginOptions) {
+            this.pluginOptions = Object.assign({ rowCount: 100, autoExtendRow: true }, pluginOptions);
+        }
+        run(...args) {
+            if (args[1] === VTable.TABLE_EVENT_TYPE.BEFORE_INIT) {
+                const eventArgs = args[0];
+                const table = args[2];
+                this.table = table;
+                const options = eventArgs.options;
+                const records = options.records ?? [];
+                for (let i = records.length; i < this.pluginOptions.rowCount; i++) {
+                    records.push(this.pluginOptions.fillRowRecord ? this.pluginOptions.fillRowRecord(i) : {});
+                }
+                options.records = records;
+                if (this.pluginOptions.rowSeriesNumber) {
+                    options.rowSeriesNumber = this.pluginOptions.rowSeriesNumber;
+                    if (!this.pluginOptions.rowSeriesNumber.width) {
+                        options.rowSeriesNumber.width = 'auto';
+                    }
+                }
+                else if (!options.rowSeriesNumber) {
+                    options.rowSeriesNumber = {
+                        width: 'auto'
+                    };
+                }
+            }
+            else if (args[1] === VTable.TABLE_EVENT_TYPE.BEFORE_KEYDOWN) {
+                const eventArgs = args[0];
+                const e = eventArgs.event;
+                if (e.key === 'ArrowDown') {
+                    if (this.pluginOptions.autoExtendRow &&
+                        this.table.stateManager.select.cellPos.row === this.table.rowCount - 1) {
+                        this.table.addRecord(this.pluginOptions.fillRowRecord
+                            ? this.pluginOptions.fillRowRecord(this.table.rowCount - this.table.columnHeaderLevelCount)
+                            : {});
+                    }
+                }
+            }
+        }
+    }
+
+    class HighlightHeaderWhenSelectCellPlugin {
+        id = 'highlight-header-when-select-cell';
+        runTime = [
+            VTable.TABLE_EVENT_TYPE.INITIALIZED,
+            VTable.TABLE_EVENT_TYPE.SELECTED_CLEAR,
+            VTable.TABLE_EVENT_TYPE.SELECTED_CELL,
+            VTable.TABLE_EVENT_TYPE.MOUSEMOVE_TABLE
+        ];
+        table;
+        pluginOptions;
+        colHeaderRanges = [];
+        rowHeaderRanges = [];
+        constructor(pluginOptions) {
+            this.pluginOptions = pluginOptions;
+        }
+        run(...args) {
+            const runTime = args[1];
+            const table = args[2];
+            this.table = table;
+            if (runTime === VTable.TABLE_EVENT_TYPE.SELECTED_CLEAR) {
+                this.clearHighlight();
+            }
+            else if (runTime === VTable.TABLE_EVENT_TYPE.SELECTED_CELL) {
+                this.updateHighlight();
+            }
+            else if (runTime === VTable.TABLE_EVENT_TYPE.MOUSEMOVE_TABLE) {
+                this.updateHighlight();
+            }
+            else if (runTime === VTable.TABLE_EVENT_TYPE.INITIALIZED) {
+                this.registerStyle();
+            }
+        }
+        registerStyle() {
+            this.table.registerCustomCellStyle('col-highlight', {
+                bgColor: this.pluginOptions?.colHighlightBGColor ?? '#82b2f5',
+                color: this.pluginOptions?.colHighlightColor ?? '#FFF'
+            });
+            this.table.registerCustomCellStyle('row-highlight', {
+                bgColor: this.pluginOptions?.rowHighlightBGColor ?? '#82b2f5',
+                color: this.pluginOptions?.rowHighlightColor ?? 'yellow'
+            });
+        }
+        clearHighlight() {
+            if (this.colHeaderRanges) {
+                this.colHeaderRanges.forEach(range => {
+                    this.table.arrangeCustomCellStyle({ range }, undefined);
+                });
+            }
+            if (this.rowHeaderRanges) {
+                this.rowHeaderRanges.forEach(range => {
+                    this.table.arrangeCustomCellStyle({ range }, undefined);
+                });
+            }
+            this.colHeaderRanges = [];
+            this.rowHeaderRanges = [];
+        }
+        updateHighlight() {
+            if (this.pluginOptions?.colHighlight === false && this.pluginOptions?.rowHighlight === false) {
+                return;
+            }
+            const selectRanges = this.table.getSelectedCellRanges();
+            if (selectRanges.length < 2) {
+                this.clearHighlight();
+            }
+            for (let i = 0; i < selectRanges.length; i++) {
+                const selectRange = selectRanges[i];
+                const rowSelectRange = [selectRange.start.row, selectRange.end.row];
+                rowSelectRange.sort((a, b) => a - b);
+                const colSelectRange = [selectRange.start.col, selectRange.end.col];
+                colSelectRange.sort((a, b) => a - b);
+                let colHeaderRange;
+                let rowHeaderRange;
+                if (this.table.isPivotTable()) {
+                    colHeaderRange = {
+                        start: {
+                            col: colSelectRange[0],
+                            row: 0
+                        },
+                        end: {
+                            col: colSelectRange[1],
+                            row: this.table.columnHeaderLevelCount - 1
+                        }
+                    };
+                    rowHeaderRange = {
+                        start: {
+                            col: 0,
+                            row: rowSelectRange[0]
+                        },
+                        end: {
+                            col: this.table.rowHeaderLevelCount - 1,
+                            row: rowSelectRange[1]
+                        }
+                    };
+                }
+                else if (this.table.internalProps.transpose) {
+                    rowHeaderRange = {
+                        start: {
+                            col: 0,
+                            row: rowSelectRange[0]
+                        },
+                        end: {
+                            col: this.table.rowHeaderLevelCount - 1,
+                            row: rowSelectRange[1]
+                        }
+                    };
+                }
+                else {
+                    colHeaderRange = {
+                        start: {
+                            col: colSelectRange[0],
+                            row: 0
+                        },
+                        end: {
+                            col: colSelectRange[1],
+                            row: this.table.columnHeaderLevelCount - 1
+                        }
+                    };
+                    if (this.table.internalProps.rowSeriesNumber) {
+                        rowHeaderRange = {
+                            start: {
+                                col: 0,
+                                row: rowSelectRange[0]
+                            },
+                            end: {
+                                col: 0,
+                                row: rowSelectRange[1]
+                            }
+                        };
+                    }
+                }
+                if (this.pluginOptions?.colHighlight !== false &&
+                    !this.colHeaderRanges.find(range => isSameRange(range, colHeaderRange))) {
+                    colHeaderRange && this.table.arrangeCustomCellStyle({ range: colHeaderRange }, 'col-highlight');
+                    this.colHeaderRanges.push(colHeaderRange);
+                }
+                if (this.pluginOptions?.rowHighlight !== false &&
+                    !this.rowHeaderRanges.find(range => isSameRange(range, rowHeaderRange))) {
+                    rowHeaderRange && this.table.arrangeCustomCellStyle({ range: rowHeaderRange }, 'row-highlight');
+                    this.rowHeaderRanges.push(rowHeaderRange);
+                }
+            }
+        }
+        release() {
+            this.rowHeaderRanges = [];
+            this.colHeaderRanges = [];
+        }
+    }
+    function isSameRange(a, b) {
+        if (a === undefined && b === undefined) {
+            return true;
+        }
+        if (a === undefined || b === undefined) {
+            return false;
+        }
+        return (a.start.col === b.start.col && a.start.row === b.start.row && a.end.col === b.end.col && a.end.row === b.end.row);
+    }
+
+    class ExcelEditCellKeyboardPlugin {
+        id = 'excel-edit-cell-keyboard';
+        runTime = [VTable__namespace.TABLE_EVENT_TYPE.INITIALIZED];
+        table;
+        pluginOptions;
+        constructor(pluginOptions) {
+            this.pluginOptions = pluginOptions;
+            this.bindEvent();
+        }
+        run(...args) {
+            const table = args[2];
+            this.table = table;
+        }
+        bindEvent() {
+            document.addEventListener('keydown', this.handleKeyDown.bind(this), true);
+        }
+        handleKeyDown(event) {
+            if (this.table.editorManager) {
+                if (this.table.editorManager.beginTriggerEditCellMode === 'keydown') {
+                    if (this.table.editorManager.editingEditor && this.isExcelShortcutKey(event)) {
+                        const { col, row } = this.table.editorManager.editCell;
+                        this.table.editorManager.completeEdit();
+                        this.table.getElement().focus();
+                        if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                            if (event.key === 'Enter') {
+                                this.table.selectCell(col, row + 1);
+                            }
+                            else if (event.key === 'Tab') {
+                                this.table.selectCell(col + 1, row);
+                            }
+                            else if (event.key === 'ArrowLeft') {
+                                this.table.selectCell(col - 1, row);
+                            }
+                            else if (event.key === 'ArrowRight') {
+                                this.table.selectCell(col + 1, row);
+                            }
+                            else if (event.key === 'ArrowDown') {
+                                this.table.selectCell(col, row + 1);
+                            }
+                            else if (event.key === 'ArrowUp') {
+                                this.table.selectCell(col, row - 1);
+                            }
+                            event.stopPropagation();
+                            event.preventDefault();
+                        }
+                    }
+                }
+                else {
+                    const { col, row } = this.table.stateManager.select.cellPos;
+                    if (this.table.editorManager.editingEditor && (event.key === 'Enter' || event.key === 'Tab')) {
+                        this.table.editorManager.completeEdit();
+                        this.table.getElement().focus();
+                        if (event.key === 'Enter') {
+                            this.table.selectCell(col, row + 1);
+                        }
+                        else if (event.key === 'Tab') {
+                            this.table.selectCell(col + 1, row);
+                        }
+                        event.stopPropagation();
+                        event.preventDefault();
+                    }
+                    else if (event.key === 'Delete') {
+                        const selectCells = this.table.getSelectedCellInfos();
+                        if (selectCells?.length > 0) {
+                            deleteSelectRange(selectCells, this.table);
+                        }
+                        event.stopPropagation();
+                        event.preventDefault();
+                    }
+                }
+            }
+        }
+        isExcelShortcutKey(event) {
+            return (event.key === 'Enter' ||
+                event.key === 'Tab' ||
+                event.key === 'ArrowLeft' ||
+                event.key === 'ArrowRight' ||
+                event.key === 'ArrowDown' ||
+                event.key === 'ArrowUp');
+        }
+        release() {
+            document.removeEventListener('keydown', this.handleKeyDown, true);
+        }
     }
-    Rect.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
-    function createRect(attributes) {
-      return new Rect(attributes);
-    }
-
-    function isSameRange$1(range1, range2) {
-      return !range1 && !range2 || !(!range1 || !range2) && range1.start.col === range2.start.col && range1.start.row === range2.start.row && range1.end.col === range2.end.col && range1.end.row === range2.end.row;
-    }
-
-    const isNode = "undefined" == typeof window || void 0 === window.window;
-    function analyzeUserAgent() {
-      if (isNode) return {
-        IE: !1,
-        Edge: !1,
-        Chrome: !1,
-        Firefox: !1,
-        Safari: !1
-      };
-      const ua = window.navigator.userAgent.toLowerCase();
-      return {
-        IE: !!/(msie|trident)/.exec(ua),
-        Edge: ua.indexOf("edge") > -1,
-        Chrome: ua.indexOf("chrome") > -1 && -1 === ua.indexOf("edge"),
-        Firefox: ua.indexOf("firefox") > -1,
-        Safari: ua.indexOf("safari") > -1 && -1 === ua.indexOf("edge")
-      };
-    }
-    analyzeUserAgent();
-    function cellInRange(range, col, row) {
-      return range.start.col <= col && col <= range.end.col && range.start.row <= row && row <= range.end.row || range.end.col <= col && col <= range.start.col && range.end.row <= row && row <= range.start.row || range.end.col <= col && col <= range.start.col && range.start.row <= row && row <= range.end.row || range.start.col <= col && col <= range.end.col && range.end.row <= row && row <= range.start.row;
+    function deleteSelectRange(selectCells, tableInstance) {
+        for (let i = 0; i < selectCells.length; i++) {
+            for (let j = 0; j < selectCells[i].length; j++) {
+                tableInstance.changeCellValue(selectCells[i][j].col, selectCells[i][j].row, '');
+            }
+        }
     }
 
-    class InvertHighlightPlugin {
+    class FocusHighlightPlugin {
+        id = 'focus-highlight';
+        name = 'Focus Highlight';
+        runTime = [VTable.TABLE_EVENT_TYPE.INITIALIZED, VTable.TABLE_EVENT_TYPE.SELECTED_CELL, VTable.TABLE_EVENT_TYPE.SELECTED_CLEAR];
         table;
         range;
-        _fill;
-        _opacity;
-        constructor(table, options) {
-            this.table = table;
-            this._fill = options?.fill ?? '#000';
-            this._opacity = options?.opacity ?? 0.5;
+        pluginOptions;
+        constructor(options = {
+            fill: '#000',
+            opacity: 0.5,
+            highlightRange: undefined
+        }) {
+            this.pluginOptions = Object.assign({
+                fill: '#000',
+                opacity: 0.5
+            }, options);
         }
-        setInvertHighlightRange(range) {
-            if (isSameRange$1(this.range, range)) {
+        run(...args) {
+            if (!this.table) {
+                this.table = args[2];
+            }
+            if (args[1] === VTable.TABLE_EVENT_TYPE.INITIALIZED) {
+                this.pluginOptions.highlightRange && this.setFocusHighlightRange(this.pluginOptions.highlightRange);
+            }
+            else if (args[1] === VTable.TABLE_EVENT_TYPE.SELECTED_CELL) {
+                const posCell = this.table.stateManager.select.cellPos;
+                if (this.table.isHeader(posCell.col, posCell.row)) {
+                    this.setFocusHighlightRange(undefined);
+                }
+                else {
+                    const ranges = this.table.stateManager.select.ranges;
+                    const min_col = 0;
+                    const max_col = this.table.colCount - 1;
+                    const min_row = Math.min(ranges[0].start.row, ranges[0].end.row);
+                    const max_row = Math.max(ranges[0].start.row, ranges[0].end.row);
+                    this.setFocusHighlightRange({
+                        start: { col: min_col, row: min_row },
+                        end: { col: max_col, row: max_row }
+                    });
+                }
+            }
+            else if (args[1] === VTable.TABLE_EVENT_TYPE.SELECTED_CLEAR) {
+                this.setFocusHighlightRange(undefined);
+            }
+        }
+        setFocusHighlightRange(range) {
+            let cellRange;
+            if (range && 'start' in range && 'end' in range) {
+                cellRange = range;
+            }
+            else if (range) {
+                cellRange = {
+                    start: range,
+                    end: range
+                };
+            }
+            if (isSameRange$2(this.range, cellRange)) {
                 return;
             }
-            this.range = range;
+            this.range = cellRange;
             if (!range) {
                 this.deleteAllCellGroupShadow();
             }
@@ -5147,6 +7177,16 @@
             this.updateCellGroupShadowInContainer(this.table.scenegraph.rightBottomCornerGroup, this.range);
         }
         updateCellGroupShadowInContainer(container, range) {
+            let cellRange;
+            if (range && 'start' in range && 'end' in range) {
+                cellRange = range;
+            }
+            else if (range) {
+                cellRange = {
+                    start: range,
+                    end: range
+                };
+            }
             container.forEachChildrenSkipChild((item) => {
                 const column = item;
                 if (column.role === 'column') {
@@ -5157,10 +7197,10 @@
                         }
                         cell.attachShadow(cell.shadowRoot);
                         const shadowGroup = cell.shadowRoot;
-                        if (!range) {
+                        if (!cellRange) {
                             shadowGroup.removeAllChild();
                         }
-                        else if (cellInRange(range, cell.col, cell.row)) {
+                        else if (cellInRange(cellRange, cell.col, cell.row)) {
                             shadowGroup.removeAllChild();
                         }
                         else if (!shadowGroup.firstChild) {
@@ -5169,8 +7209,8 @@
                                 y: 0,
                                 width: cell.attribute.width,
                                 height: cell.attribute.height,
-                                fill: this._fill,
-                                opacity: this._opacity
+                                fill: this.pluginOptions.fill,
+                                opacity: this.pluginOptions.opacity
                             });
                             shadowRect.name = 'shadow-rect';
                             shadowGroup.appendChild(shadowRect);
@@ -5181,144 +7221,138 @@
         }
     }
 
-    class HeaderHighlightPlugin {
+    function isInteger(value) {
+        return Math.floor(value) === value;
+    }
+    class TableCarouselAnimationPlugin {
+        id = 'table-carousel-animation';
+        runTime = [VTable.TABLE_EVENT_TYPE.INITIALIZED];
         table;
-        options;
-        colHeaderRange;
-        rowHeaderRange;
-        constructor(table, options) {
-            this.table = table;
-            this.options = options;
-            this.registerStyle();
-            this.bindEvent();
+        rowCount;
+        colCount;
+        animationDuration;
+        animationDelay;
+        animationEasing;
+        playing;
+        row;
+        col;
+        willUpdateRow = false;
+        willUpdateCol = false;
+        autoPlay;
+        autoPlayDelay;
+        customDistRowFunction;
+        customDistColFunction;
+        constructor(options = {}) {
+            this.rowCount = options?.rowCount ?? undefined;
+            this.colCount = options?.colCount ?? undefined;
+            this.animationDuration = options?.animationDuration ?? 500;
+            this.animationDelay = options?.animationDelay ?? 1000;
+            this.animationEasing = options?.animationEasing ?? 'linear';
+            this.autoPlay = options?.autoPlay ?? false;
+            this.autoPlayDelay = options?.autoPlayDelay ?? 0;
+            this.customDistColFunction = options.customDistColFunction;
+            this.customDistRowFunction = options.customDistRowFunction;
         }
-        registerStyle() {
-            this.table.registerCustomCellStyle('col-highlight', {
-                bgColor: this.options?.colHighlightBGColor ?? '#82b2f5',
-                color: this.options?.colHighlightColor ?? '#FFF'
-            });
-            this.table.registerCustomCellStyle('row-highlight', {
-                bgColor: this.options?.rowHighlightBGColor ?? '#82b2f5',
-                color: this.options?.rowHighlightColor ?? '#FFF'
-            });
+        run(...args) {
+            if (!this.table) {
+                this.table = args[2];
+            }
+            this.reset();
+            if (this.autoPlay) {
+                setTimeout(() => {
+                    this.play();
+                }, this.autoPlayDelay);
+            }
         }
-        bindEvent() {
-            this.table.on('selected_cell', () => {
-                this.updateHighlight();
-            });
-            this.table.on('selected_clear', () => {
-                this.clearHighlight();
-            });
-            this.table.on('mousemove_table', () => {
-                if (this.table.stateManager.select.selecting) {
-                    this.updateHighlight();
-                }
-            });
+        reset() {
+            this.playing = false;
+            this.row = this.table.frozenRowCount;
+            this.col = this.table.frozenColCount;
         }
-        clearHighlight() {
-            this.colHeaderRange && this.table.arrangeCustomCellStyle({ range: this.colHeaderRange }, undefined, true);
-            this.rowHeaderRange && this.table.arrangeCustomCellStyle({ range: this.rowHeaderRange }, undefined, true);
-            this.colHeaderRange = undefined;
-            this.rowHeaderRange = undefined;
+        play() {
+            if (!this.table) {
+                throw new Error('table is not initialized');
+            }
+            this.playing = true;
+            if (this.rowCount && !this.willUpdateRow) {
+                this.updateRow();
+            }
+            else if (this.colCount && !this.willUpdateCol) {
+                this.updateCol();
+            }
         }
-        updateHighlight() {
-            if (this.options?.colHighlight === false && this.options?.rowHighlight === false) {
+        pause() {
+            this.playing = false;
+        }
+        updateRow() {
+            if (!this.playing || this.table.isReleased) {
                 return;
             }
-            const selectRanges = this.table.getSelectedCellRanges();
-            if (selectRanges.length === 0) {
-                this.clearHighlight();
-                return;
+            let animation = true;
+            const customRow = this.customDistRowFunction && this.customDistRowFunction(this.row, this.table);
+            if (customRow) {
+                this.row = customRow.distRow;
+                animation = customRow.animation ?? true;
             }
-            const selectRange = selectRanges[0];
-            const rowSelectRange = [selectRange.start.row, selectRange.end.row];
-            rowSelectRange.sort((a, b) => a - b);
-            const colSelectRange = [selectRange.start.col, selectRange.end.col];
-            colSelectRange.sort((a, b) => a - b);
-            let colHeaderRange;
-            let rowHeaderRange;
-            if (this.table.isPivotTable()) {
-                colHeaderRange = {
-                    start: {
-                        col: colSelectRange[0],
-                        row: 0
-                    },
-                    end: {
-                        col: colSelectRange[1],
-                        row: this.table.columnHeaderLevelCount - 1
-                    }
-                };
-                rowHeaderRange = {
-                    start: {
-                        col: 0,
-                        row: rowSelectRange[0]
-                    },
-                    end: {
-                        col: this.table.rowHeaderLevelCount - 1,
-                        row: rowSelectRange[1]
-                    }
-                };
+            else if (isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== this.row) {
+                this.row = this.table.frozenRowCount;
+                animation = false;
             }
-            else if (this.table.internalProps.transpose) {
-                rowHeaderRange = {
-                    start: {
-                        col: 0,
-                        row: rowSelectRange[0]
-                    },
-                    end: {
-                        col: this.table.rowHeaderLevelCount - 1,
-                        row: rowSelectRange[1]
-                    }
-                };
+            else if (!isInteger(this.row) && this.table.scenegraph.proxy.screenTopRow !== Math.floor(this.row)) {
+                this.row = this.table.frozenRowCount;
+                animation = false;
             }
             else {
-                colHeaderRange = {
-                    start: {
-                        col: colSelectRange[0],
-                        row: 0
-                    },
-                    end: {
-                        col: colSelectRange[1],
-                        row: this.table.columnHeaderLevelCount - 1
-                    }
-                };
-                if (this.table.internalProps.rowSeriesNumber) {
-                    rowHeaderRange = {
-                        start: {
-                            col: 0,
-                            row: rowSelectRange[0]
-                        },
-                        end: {
-                            col: 0,
-                            row: rowSelectRange[1]
-                        }
-                    };
-                }
+                this.row += this.rowCount;
             }
-            if (this.options?.colHighlight !== false && !isSameRange(this.colHeaderRange, colHeaderRange)) {
-                this.colHeaderRange && this.table.arrangeCustomCellStyle({ range: this.colHeaderRange }, undefined);
-                colHeaderRange && this.table.arrangeCustomCellStyle({ range: colHeaderRange }, 'col-highlight');
-                this.colHeaderRange = colHeaderRange;
+            this.table.scrollToRow(this.row, animation ? { duration: this.animationDuration, easing: this.animationEasing } : undefined);
+            this.willUpdateRow = true;
+            setTimeout(() => {
+                this.willUpdateRow = false;
+                this.updateRow();
+            }, this.animationDuration + this.animationDelay);
+        }
+        updateCol() {
+            if (!this.playing || this.table.isReleased) {
+                return;
             }
-            if (this.options?.rowHighlight !== false && !isSameRange(this.rowHeaderRange, rowHeaderRange)) {
-                this.rowHeaderRange && this.table.arrangeCustomCellStyle({ range: this.rowHeaderRange }, undefined);
-                rowHeaderRange && this.table.arrangeCustomCellStyle({ range: rowHeaderRange }, 'row-highlight');
-                this.rowHeaderRange = rowHeaderRange;
+            let animation = true;
+            const customCol = this.customDistColFunction && this.customDistColFunction(this.col, this.table);
+            if (customCol) {
+                this.col = customCol.distCol;
+                animation = customCol.animation ?? true;
             }
+            else if (isInteger(this.col) && this.table.scenegraph.proxy.screenLeftCol !== this.col) {
+                this.col = this.table.frozenColCount;
+                animation = false;
+            }
+            else if (!isInteger(this.col) && this.table.scenegraph.proxy.screenLeftCol !== Math.floor(this.col)) {
+                this.col = this.table.frozenColCount;
+                animation = false;
+            }
+            else {
+                this.col += this.colCount;
+            }
+            this.table.scrollToCol(this.col, animation ? { duration: this.animationDuration, easing: this.animationEasing } : undefined);
+            this.willUpdateCol = true;
+            setTimeout(() => {
+                this.willUpdateCol = false;
+                this.updateCol();
+            }, this.animationDuration + this.animationDelay);
         }
-    }
-    function isSameRange(a, b) {
-        if (a === undefined && b === undefined) {
-            return true;
-        }
-        if (a === undefined || b === undefined) {
-            return false;
+        release() {
         }
-        return (a.start.col === b.start.col && a.start.row === b.start.row && a.end.col === b.end.col && a.end.row === b.end.row);
     }
 
+    exports.AddRowColumnPlugin = AddRowColumnPlugin;
     exports.CarouselAnimationPlugin = CarouselAnimationPlugin;
+    exports.ColumnSeriesPlugin = ColumnSeriesPlugin;
+    exports.ExcelEditCellKeyboardPlugin = ExcelEditCellKeyboardPlugin;
+    exports.FocusHighlightPlugin = FocusHighlightPlugin;
     exports.HeaderHighlightPlugin = HeaderHighlightPlugin;
+    exports.HighlightHeaderWhenSelectCellPlugin = HighlightHeaderWhenSelectCellPlugin;
     exports.InvertHighlightPlugin = InvertHighlightPlugin;
+    exports.RowSeriesPlugin = RowSeriesPlugin;
+    exports.TableCarouselAnimationPlugin = TableCarouselAnimationPlugin;
 
 }));