@visactor/vrender-components 0.16.2 → 0.16.3

package/dist/index.js

@@ -2782,17 +2782,17 @@
   var EnvContribution = Symbol["for"]("EnvContribution");
   var VGlobal = Symbol["for"]("VGlobal");
 
-  var __decorate$R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$n = undefined && undefined.__metadata || function (k, v) {
+    __metadata$r = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$n = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$o = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -2818,26 +2818,41 @@
       key: "supportEvent",
       get: function get() {
         return this._env || this.setEnv("browser"), this.envContribution.supportEvent;
+      },
+      set: function set(support) {
+        this._env || this.setEnv("browser"), this.envContribution.supportEvent = support;
       }
     }, {
       key: "supportsTouchEvents",
       get: function get() {
         return this._env || this.setEnv("browser"), this.envContribution.supportsTouchEvents;
+      },
+      set: function set(support) {
+        this._env || this.setEnv("browser"), this.envContribution.supportsTouchEvents = support;
       }
     }, {
       key: "supportsPointerEvents",
       get: function get() {
         return this._env || this.setEnv("browser"), this.envContribution.supportsPointerEvents;
+      },
+      set: function set(support) {
+        this._env || this.setEnv("browser"), this.envContribution.supportsPointerEvents = support;
       }
     }, {
       key: "supportsMouseEvents",
       get: function get() {
         return this._env || this.setEnv("browser"), this.envContribution.supportsMouseEvents;
+      },
+      set: function set(support) {
+        this._env || this.setEnv("browser"), this.envContribution.supportsMouseEvents = support;
       }
     }, {
       key: "applyStyles",
       get: function get() {
         return this._env || this.setEnv("browser"), this.envContribution.applyStyles;
+      },
+      set: function set(support) {
+        this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
       }
     }, {
       key: "bindContribution",
@@ -3017,7 +3032,7 @@
     }]);
     return DefaultGlobal;
   }();
-  DefaultGlobal = __decorate$R([injectable(), __param$n(0, inject(ContributionProvider)), __param$n(0, named(EnvContribution)), __metadata$n("design:paramtypes", [Object])], DefaultGlobal);
+  DefaultGlobal = __decorate$X([injectable(), __param$o(0, inject(ContributionProvider)), __param$o(0, named(EnvContribution)), __metadata$r("design:paramtypes", [Object])], DefaultGlobal);
 
   var circleThreshold = vutils.tau - 1e-8;
   var BoundsContext = /*#__PURE__*/function () {
@@ -3795,10 +3810,10 @@
       value: function lineEnd() {
         switch (this._point) {
           case 2:
-            this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined2, this.lastPoint1);
+            this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined1 && !1 !== this._lastDefined2, this.lastPoint1);
             break;
           case 3:
-            _point(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined2, this.lastPoint1);
+            _point(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined1 && !1 !== this._lastDefined2, this.lastPoint1);
         }
         (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line = 1 - this._line;
       }
@@ -4737,7 +4752,7 @@
     return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
   }
 
-  var __decorate$Q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -4943,9 +4958,9 @@
     }]);
     return ATextMeasure;
   }();
-  ATextMeasure = __decorate$Q([injectable()], ATextMeasure);
+  ATextMeasure = __decorate$W([injectable()], ATextMeasure);
 
-  var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -4962,7 +4977,7 @@
     }
     return _createClass(DefaultTextMeasureContribution);
   }(ATextMeasure);
-  DefaultTextMeasureContribution = __decorate$P([injectable()], DefaultTextMeasureContribution);
+  DefaultTextMeasureContribution = __decorate$V([injectable()], DefaultTextMeasureContribution);
 
   var container = new Container();
 
@@ -4971,18 +4986,376 @@
   function wrapCanvas(params) {
     return container.getNamed(CanvasFactory, application.global.env)(params);
   }
+  var EPSILON_NUMERIC = 1e-4,
+    THREE_SQRT = Math.sqrt(3),
+    ONE_THIRD = 1 / 3;
+  function isAroundZero(val) {
+    return val > -EPSILON && val < EPSILON;
+  }
+  function isNotAroundZero(val) {
+    return val > EPSILON || val < -EPSILON;
+  }
+  var _v0 = [0, 0],
+    _v1 = [0, 0],
+    _v2 = [0, 0];
+  function distanceSquare(v1, v2) {
+    return (v1[0] - v2[0]) * (v1[0] - v2[0]) + (v1[1] - v2[1]) * (v1[1] - v2[1]);
+  }
+  function quadraticAt(p0, p1, p2, t) {
+    var onet = 1 - t;
+    return onet * (onet * p0 + 2 * t * p1) + t * t * p2;
+  }
+  function cubicAt(p0, p1, p2, p3, t) {
+    var onet = 1 - t;
+    return onet * onet * (onet * p0 + 3 * t * p1) + t * t * (t * p3 + 3 * onet * p2);
+  }
+  function quadraticRootAt(p0, p1, p2, val, roots) {
+    var a = p0 - 2 * p1 + p2,
+      b = 2 * (p1 - p0),
+      c = p0 - val;
+    var n = 0;
+    if (isAroundZero(a)) {
+      if (isNotAroundZero(b)) {
+        var t1 = -c / b;
+        t1 >= 0 && t1 <= 1 && (roots[n++] = t1);
+      }
+    } else {
+      var disc = b * b - 4 * a * c;
+      if (isAroundZero(disc)) {
+        var _t2 = -b / (2 * a);
+        _t2 >= 0 && _t2 <= 1 && (roots[n++] = _t2);
+      } else if (disc > 0) {
+        var discSqrt = Math.sqrt(disc),
+          _t3 = (-b + discSqrt) / (2 * a),
+          t2 = (-b - discSqrt) / (2 * a);
+        _t3 >= 0 && _t3 <= 1 && (roots[n++] = _t3), t2 >= 0 && t2 <= 1 && (roots[n++] = t2);
+      }
+    }
+    return n;
+  }
+  function quadraticExtremum(p0, p1, p2) {
+    var divider = p0 + p2 - 2 * p1;
+    return 0 === divider ? .5 : (p0 - p1) / divider;
+  }
+  function quadraticProjectPoint(x0, y0, x1, y1, x2, y2, x, y, out) {
+    var t = 0,
+      interval = .005,
+      d = 1 / 0;
+    _v0[0] = x, _v0[1] = y;
+    for (var _t = 0; _t < 1; _t += .05) {
+      _v1[0] = quadraticAt(x0, x1, x2, _t), _v1[1] = quadraticAt(y0, y1, y2, _t);
+      var d1 = distanceSquare(_v0, _v1);
+      d1 < d && (t = _t, d = d1);
+    }
+    d = 1 / 0;
+    for (var i = 0; i < 32 && !(interval < EPSILON_NUMERIC); i++) {
+      var prev = t - interval,
+        next = t + interval;
+      _v1[0] = quadraticAt(x0, x1, x2, prev), _v1[1] = quadraticAt(y0, y1, y2, prev);
+      var _d = distanceSquare(_v1, _v0);
+      if (prev >= 0 && _d < d) t = prev, d = _d;else {
+        _v2[0] = quadraticAt(x0, x1, x2, next), _v2[1] = quadraticAt(y0, y1, y2, next);
+        var d2 = distanceSquare(_v2, _v0);
+        next <= 1 && d2 < d ? (t = next, d = d2) : interval *= .5;
+      }
+    }
+    return out && (out[0] = quadraticAt(x0, x1, x2, t), out[1] = quadraticAt(y0, y1, y2, t)), Math.sqrt(d);
+  }
+  function cubicProjectPoint(x0, y0, x1, y1, x2, y2, x3, y3, x, y, out) {
+    var prev,
+      next,
+      d1,
+      d2,
+      t = 0,
+      interval = .005,
+      d = 1 / 0;
+    _v0[0] = x, _v0[1] = y;
+    for (var _t = 0; _t < 1; _t += .05) _v1[0] = cubicAt(x0, x1, x2, x3, _t), _v1[1] = cubicAt(y0, y1, y2, y3, _t), d1 = distanceSquare(_v0, _v1), d1 < d && (t = _t, d = d1);
+    d = 1 / 0;
+    for (var i = 0; i < 32 && !(interval < EPSILON_NUMERIC); i++) prev = t - interval, next = t + interval, _v1[0] = cubicAt(x0, x1, x2, x3, prev), _v1[1] = cubicAt(y0, y1, y2, y3, prev), d1 = distanceSquare(_v1, _v0), prev >= 0 && d1 < d ? (t = prev, d = d1) : (_v2[0] = cubicAt(x0, x1, x2, x3, next), _v2[1] = cubicAt(y0, y1, y2, y3, next), d2 = distanceSquare(_v2, _v0), next <= 1 && d2 < d ? (t = next, d = d2) : interval *= .5);
+    return out && (out[0] = cubicAt(x0, x1, x2, x3, t), out[1] = cubicAt(y0, y1, y2, y3, t)), Math.sqrt(d);
+  }
+  function normalizeRadian(angle) {
+    return (angle %= vutils.pi2) < 0 && (angle += vutils.pi2), angle;
+  }
+  function windingLine(x0, y0, x1, y1, x, y) {
+    if (y > y0 && y > y1 || y < y0 && y < y1) return 0;
+    if (y1 === y0) return 0;
+    var t = (y - y0) / (y1 - y0);
+    var dir = y1 < y0 ? 1 : -1;
+    1 !== t && 0 !== t || (dir = y1 < y0 ? .5 : -.5);
+    var x_ = t * (x1 - x0) + x0;
+    return x_ === x ? 1 / 0 : x_ > x ? dir : 0;
+  }
+  function containQuadStroke(x0, y0, x1, y1, x2, y2, lineWidth, x, y) {
+    if (0 === lineWidth) return !1;
+    var _l = lineWidth;
+    if (y > y0 + _l && y > y1 + _l && y > y2 + _l || y < y0 - _l && y < y1 - _l && y < y2 - _l || x > x0 + _l && x > x1 + _l && x > x2 + _l || x < x0 - _l && x < x1 - _l && x < x2 - _l) return !1;
+    return quadraticProjectPoint(x0, y0, x1, y1, x2, y2, x, y, null) <= _l / 2;
+  }
+  function containCubicStroke(x0, y0, x1, y1, x2, y2, x3, y3, lineWidth, x, y) {
+    if (0 === lineWidth) return !1;
+    var _l = lineWidth;
+    if (y > y0 + _l && y > y1 + _l && y > y2 + _l && y > y3 + _l || y < y0 - _l && y < y1 - _l && y < y2 - _l && y < y3 - _l || x > x0 + _l && x > x1 + _l && x > x2 + _l && x > x3 + _l || x < x0 - _l && x < x1 - _l && x < x2 - _l && x < x3 - _l) return !1;
+    return cubicProjectPoint(x0, y0, x1, y1, x2, y2, x3, y3, x, y, null) <= _l / 2;
+  }
+  function containArcStroke(cx, cy, r, startAngle, endAngle, anticlockwise, lineWidth, x, y) {
+    if (0 === lineWidth) return !1;
+    var _l = lineWidth;
+    x -= cx, y -= cy;
+    var d = Math.sqrt(x * x + y * y);
+    if (d - _l > r || d + _l < r) return !1;
+    if (Math.abs(startAngle - endAngle) % vutils.pi2 < 1e-4) return !0;
+    if (anticlockwise) {
+      var tmp = startAngle;
+      startAngle = normalizeRadian(endAngle), endAngle = normalizeRadian(tmp);
+    } else startAngle = normalizeRadian(startAngle), endAngle = normalizeRadian(endAngle);
+    startAngle > endAngle && (endAngle += vutils.pi2);
+    var angle = Math.atan2(y, x);
+    return angle < 0 && (angle += vutils.pi2), angle >= startAngle && angle <= endAngle || angle + vutils.pi2 >= startAngle && angle + vutils.pi2 <= endAngle;
+  }
+  function containLineStroke(x0, y0, x1, y1, lineWidth, x, y) {
+    if (0 === lineWidth) return !1;
+    var _l = lineWidth,
+      _halfL = lineWidth / 2;
+    var _a = 0,
+      _b = x0;
+    if (y > y0 + _halfL && y > y1 + _halfL || y < y0 - _halfL && y < y1 - _halfL || x > x0 + _halfL && x > x1 + _halfL || x < x0 - _halfL && x < x1 - _halfL) return !1;
+    if (x0 === x1) return Math.abs(x - x0) <= _l / 2;
+    _a = (y0 - y1) / (x0 - x1), _b = (x0 * y1 - x1 * y0) / (x0 - x1);
+    var tmp = _a * x - y + _b;
+    return tmp * tmp / (_a * _a + 1) <= _l / 2 * _l / 2;
+  }
+  var EPSILON = 1e-4;
+  function cubicRootAt(p0, p1, p2, p3, val, roots) {
+    var a = p3 + 3 * (p1 - p2) - p0,
+      b = 3 * (p2 - 2 * p1 + p0),
+      c = 3 * (p1 - p0),
+      d = p0 - val,
+      A = b * b - 3 * a * c,
+      B = b * c - 9 * a * d,
+      C = c * c - 3 * b * d;
+    var n = 0;
+    if (isAroundZero(A) && isAroundZero(B)) {
+      if (isAroundZero(b)) roots[0] = 0;else {
+        var t1 = -c / b;
+        t1 >= 0 && t1 <= 1 && (roots[n++] = t1);
+      }
+    } else {
+      var disc = B * B - 4 * A * C;
+      if (isAroundZero(disc)) {
+        var K = B / A,
+          _t4 = -b / a + K,
+          t2 = -K / 2;
+        _t4 >= 0 && _t4 <= 1 && (roots[n++] = _t4), t2 >= 0 && t2 <= 1 && (roots[n++] = t2);
+      } else if (disc > 0) {
+        var discSqrt = Math.sqrt(disc);
+        var Y1 = A * b + 1.5 * a * (-B + discSqrt),
+          Y2 = A * b + 1.5 * a * (-B - discSqrt);
+        Y1 = Y1 < 0 ? -Math.pow(-Y1, ONE_THIRD) : Math.pow(Y1, ONE_THIRD), Y2 = Y2 < 0 ? -Math.pow(-Y2, ONE_THIRD) : Math.pow(Y2, ONE_THIRD);
+        var _t5 = (-b - (Y1 + Y2)) / (3 * a);
+        _t5 >= 0 && _t5 <= 1 && (roots[n++] = _t5);
+      } else {
+        var T = (2 * A * b - 3 * a * B) / (2 * Math.sqrt(A * A * A)),
+          theta = Math.acos(T) / 3,
+          ASqrt = Math.sqrt(A),
+          tmp = Math.cos(theta),
+          _t6 = (-b - 2 * ASqrt * tmp) / (3 * a),
+          _t7 = (-b + ASqrt * (tmp + THREE_SQRT * Math.sin(theta))) / (3 * a),
+          t3 = (-b + ASqrt * (tmp - THREE_SQRT * Math.sin(theta))) / (3 * a);
+        _t6 >= 0 && _t6 <= 1 && (roots[n++] = _t6), _t7 >= 0 && _t7 <= 1 && (roots[n++] = _t7), t3 >= 0 && t3 <= 1 && (roots[n++] = t3);
+      }
+    }
+    return n;
+  }
+  function cubicExtrema(p0, p1, p2, p3, extrema) {
+    var b = 6 * p2 - 12 * p1 + 6 * p0,
+      a = 9 * p1 + 3 * p3 - 3 * p0 - 9 * p2,
+      c = 3 * p1 - 3 * p0;
+    var n = 0;
+    if (isAroundZero(a)) {
+      if (isNotAroundZero(b)) {
+        var t1 = -c / b;
+        t1 >= 0 && t1 <= 1 && (extrema[n++] = t1);
+      }
+    } else {
+      var disc = b * b - 4 * a * c;
+      if (isAroundZero(disc)) extrema[0] = -b / (2 * a);else if (disc > 0) {
+        var discSqrt = Math.sqrt(disc),
+          _t8 = (-b + discSqrt) / (2 * a),
+          t2 = (-b - discSqrt) / (2 * a);
+        _t8 >= 0 && _t8 <= 1 && (extrema[n++] = _t8), t2 >= 0 && t2 <= 1 && (extrema[n++] = t2);
+      }
+    }
+    return n;
+  }
+  function isAroundEqual(a, b) {
+    return Math.abs(a - b) < EPSILON;
+  }
+  var roots = [-1, -1, -1],
+    extrema = [-1, -1];
+  function swapExtrema() {
+    var tmp = extrema[0];
+    extrema[0] = extrema[1], extrema[1] = tmp;
+  }
+  function windingCubic(x0, y0, x1, y1, x2, y2, x3, y3, x, y) {
+    if (y > y0 && y > y1 && y > y2 && y > y3 || y < y0 && y < y1 && y < y2 && y < y3) return 0;
+    var nRoots = cubicRootAt(y0, y1, y2, y3, y, roots);
+    if (0 === nRoots) return 0;
+    var w = 0,
+      nExtrema = -1,
+      y0_ = 0,
+      y1_ = 0;
+    for (var i = 0; i < nRoots; i++) {
+      var t = roots[i],
+        unit = 0 === t || 1 === t ? .5 : 1;
+      cubicAt(x0, x1, x2, x3, t) < x || (nExtrema < 0 && (nExtrema = cubicExtrema(y0, y1, y2, y3, extrema), extrema[1] < extrema[0] && nExtrema > 1 && swapExtrema(), y0_ = cubicAt(y0, y1, y2, y3, extrema[0]), nExtrema > 1 && (y1_ = cubicAt(y0, y1, y2, y3, extrema[1]))), 2 === nExtrema ? t < extrema[0] ? w += y0_ < y0 ? unit : -unit : t < extrema[1] ? w += y1_ < y0_ ? unit : -unit : w += y3 < y1_ ? unit : -unit : t < extrema[0] ? w += y0_ < y0 ? unit : -unit : w += y3 < y0_ ? unit : -unit);
+    }
+    return w;
+  }
+  function windingQuadratic(x0, y0, x1, y1, x2, y2, x, y) {
+    if (y > y0 && y > y1 && y > y2 || y < y0 && y < y1 && y < y2) return 0;
+    var nRoots = quadraticRootAt(y0, y1, y2, y, roots);
+    if (0 === nRoots) return 0;
+    var t = quadraticExtremum(y0, y1, y2);
+    if (t >= 0 && t <= 1) {
+      var w = 0;
+      var y_ = quadraticAt(y0, y1, y2, t);
+      for (var i = 0; i < nRoots; i++) {
+        var _unit = 0 === roots[i] || 1 === roots[i] ? .5 : 1;
+        quadraticAt(x0, x1, x2, roots[i]) < x || (roots[i] < t ? w += y_ < y0 ? _unit : -_unit : w += y2 < y_ ? _unit : -_unit);
+      }
+      return w;
+    }
+    var unit = 0 === roots[0] || 1 === roots[0] ? .5 : 1;
+    return quadraticAt(x0, x1, x2, roots[0]) < x ? 0 : y2 < y0 ? unit : -unit;
+  }
+  function windingArc(cx, cy, r, startAngle, endAngle, anticlockwise, x, y) {
+    if ((y -= cy) > r || y < -r) return 0;
+    var tmp = Math.sqrt(r * r - y * y);
+    roots[0] = -tmp, roots[1] = tmp;
+    var dTheta = Math.abs(startAngle - endAngle);
+    if (dTheta < 1e-4) return 0;
+    if (dTheta >= vutils.pi2 - 1e-4) {
+      startAngle = 0, endAngle = vutils.pi2;
+      var dir = anticlockwise ? 1 : -1;
+      return x >= roots[0] + cx && x <= roots[1] + cx ? dir : 0;
+    }
+    if (startAngle > endAngle) {
+      var _tmp = startAngle;
+      startAngle = endAngle, endAngle = _tmp;
+    }
+    startAngle < 0 && (startAngle += vutils.pi2, endAngle += vutils.pi2);
+    var w = 0;
+    for (var i = 0; i < 2; i++) {
+      var x_ = roots[i];
+      if (x_ + cx > x) {
+        var angle = Math.atan2(y, x_),
+          _dir = anticlockwise ? 1 : -1;
+        angle < 0 && (angle = vutils.pi2 + angle), (angle >= startAngle && angle <= endAngle || angle + vutils.pi2 >= startAngle && angle + vutils.pi2 <= endAngle) && (angle > vutils.pi / 2 && angle < 1.5 * vutils.pi && (_dir = -_dir), w += _dir);
+      }
+    }
+    return w;
+  }
+  function modpi2(radian) {
+    return Math.round(radian / vutils.pi * 1e8) / 1e8 % 2 * vutils.pi;
+  }
+  function normalizeArcAngles(angles, anticlockwise) {
+    var newStartAngle = modpi2(angles[0]);
+    newStartAngle < 0 && (newStartAngle += vutils.pi2);
+    var delta = newStartAngle - angles[0];
+    var newEndAngle = angles[1];
+    newEndAngle += delta, !anticlockwise && newEndAngle - newStartAngle >= vutils.pi2 ? newEndAngle = newStartAngle + vutils.pi2 : anticlockwise && newStartAngle - newEndAngle >= vutils.pi2 ? newEndAngle = newStartAngle - vutils.pi2 : !anticlockwise && newStartAngle > newEndAngle ? newEndAngle = newStartAngle + (vutils.pi2 - modpi2(newStartAngle - newEndAngle)) : anticlockwise && newStartAngle < newEndAngle && (newEndAngle = newStartAngle - (vutils.pi2 - modpi2(newEndAngle - newStartAngle))), angles[0] = newStartAngle, angles[1] = newEndAngle;
+  }
+  var tmpAngles = [0, 0];
+  function containPath(commands, lineWidth, isStroke, x, y) {
+    var data = commands,
+      len = commands.length;
+    var x1,
+      y1,
+      w = 0,
+      xi = 0,
+      yi = 0,
+      x0 = 0,
+      y0 = 0;
+    for (var i = 0; i < len; i++) {
+      var command = data[i],
+        isFirst = 0 === i;
+      command[0] === enumCommandMap.M && i > 1 && (isStroke || (w += windingLine(xi, yi, x0, y0, x, y))), isFirst && (xi = command[1], yi = command[2], x0 = xi, y0 = yi);
+      var c0 = command[0],
+        c1 = command[1],
+        c2 = command[2],
+        c3 = command[3],
+        c4 = command[4],
+        c5 = command[5],
+        c6 = command[6];
+      var startAngle = c4,
+        endAngle = c5;
+      tmpAngles[0] = startAngle, tmpAngles[1] = endAngle, normalizeArcAngles(tmpAngles, Boolean(command[6])), startAngle = tmpAngles[0], endAngle = tmpAngles[1];
+      var theta = startAngle,
+        dTheta = endAngle - startAngle,
+        anticlockwise = !!(1 - (command[6] ? 0 : 1)),
+        _x = (x - c1) * c3 / c3 + c1;
+      switch (c0) {
+        case enumCommandMap.M:
+          x0 = c1, y0 = c2, xi = x0, yi = y0;
+          break;
+        case enumCommandMap.L:
+          if (isStroke) {
+            if (containLineStroke(xi, yi, c1, c2, lineWidth, x, y)) return !0;
+          } else w += windingLine(xi, yi, c1, c2, x, y) || 0;
+          xi = c1, yi = c2;
+          break;
+        case enumCommandMap.C:
+          if (isStroke) {
+            if (containCubicStroke(xi, yi, c1, c2, c3, c4, c5, c6, lineWidth, x, y)) return !0;
+          } else w += windingCubic(xi, yi, c1, c2, c3, c4, c5, c6, x, y) || 0;
+          xi = c5, yi = c6;
+          break;
+        case enumCommandMap.Q:
+          if (isStroke) {
+            if (containQuadStroke(xi, yi, c1, c2, c3, c4, lineWidth, x, y)) return !0;
+          } else w += windingQuadratic(xi, yi, c1, c2, c3, c4, x, y) || 0;
+          xi = c3, yi = c4;
+          break;
+        case enumCommandMap.A:
+          if (x1 = Math.cos(theta) * c3 + c1, y1 = Math.sin(theta) * c3 + c2, isFirst ? (x0 = x1, y0 = y1) : w += windingLine(xi, yi, x1, y1, x, y), isStroke) {
+            if (containArcStroke(c1, c2, c3, theta, theta + dTheta, anticlockwise, lineWidth, _x, y)) return !0;
+          } else w += windingArc(c1, c2, c3, theta, theta + dTheta, anticlockwise, _x, y);
+          xi = Math.cos(theta + dTheta) * c3 + c1, yi = Math.sin(theta + dTheta) * c3 + c2;
+          break;
+        case enumCommandMap.R:
+          if (x0 = xi = c1, y0 = yi = c2, x1 = x0 + c3, y1 = y0 + c4, isStroke) {
+            if (containLineStroke(x0, y0, x1, y0, lineWidth, x, y) || containLineStroke(x1, y0, x1, y1, lineWidth, x, y) || containLineStroke(x1, y1, x0, y1, lineWidth, x, y) || containLineStroke(x0, y1, x0, y0, lineWidth, x, y)) return !0;
+          } else w += windingLine(x1, y0, x1, y1, x, y), w += windingLine(x0, y1, x0, y0, x, y);
+          break;
+        case enumCommandMap.Z:
+          if (isStroke) {
+            if (containLineStroke(xi, yi, x0, y0, lineWidth, x, y)) return !0;
+          } else w += windingLine(xi, yi, x0, y0, x, y);
+          xi = x0, yi = y0;
+      }
+    }
+    return isStroke || isAroundEqual(yi, y0) || (w += windingLine(xi, yi, x0, y0, x, y) || 0), 0 !== w;
+  }
+  function contain(commands, x, y) {
+    return containPath(commands, 0, !1, x, y);
+  }
+  function containStroke(commands, lineWidth, x, y) {
+    return containPath(commands, lineWidth, !0, x, y);
+  }
 
-  var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$m = undefined && undefined.__metadata || function (k, v) {
+    __metadata$q = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$m = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$n = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -5053,7 +5426,7 @@
     }]);
     return DefaultGraphicUtil;
   }();
-  DefaultGraphicUtil = __decorate$O([injectable(), __param$m(0, inject(ContributionProvider)), __param$m(0, named(TextMeasureContribution)), __param$m(1, inject(VGlobal)), __metadata$m("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
+  DefaultGraphicUtil = __decorate$U([injectable(), __param$n(0, inject(ContributionProvider)), __param$n(0, named(TextMeasureContribution)), __param$n(1, inject(VGlobal)), __metadata$q("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
   var TransformMode;
   !function (TransformMode) {
     TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -5130,7 +5503,7 @@
     }]);
     return DefaultTransformUtil;
   }();
-  DefaultTransformUtil = __decorate$O([injectable(), __metadata$m("design:paramtypes", [])], DefaultTransformUtil);
+  DefaultTransformUtil = __decorate$U([injectable(), __metadata$q("design:paramtypes", [])], DefaultTransformUtil);
 
   var defaultThemeObj = {
       arc: DefaultArcAttribute,
@@ -5916,6 +6289,8 @@
     return _createClass(CustomEvent);
   }(FederatedEvent);
 
+  "object" == (typeof performance === "undefined" ? "undefined" : _typeof(performance)) && performance.now ? performance : Date;
+
   var EventTarget = {
     pickable: !0,
     visible: !0,
@@ -5929,6 +6304,292 @@
     }
   };
 
+  var ManualTickHandler = /*#__PURE__*/function () {
+    function ManualTickHandler() {
+      _classCallCheck(this, ManualTickHandler);
+      this.time = 0;
+    }
+    _createClass(ManualTickHandler, [{
+      key: "avaliable",
+      value: function avaliable() {
+        return ManualTickHandler.Avaliable();
+      }
+    }, {
+      key: "tick",
+      value: function tick(interval, cb) {
+        this.time = Math.max(0, interval + this.time), cb(this, {
+          once: !0
+        });
+      }
+    }, {
+      key: "tickTo",
+      value: function tickTo(t, cb) {
+        this.time = Math.max(0, t), cb(this, {
+          once: !0
+        });
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        this.timerId > 0 && (this.timerId = -1);
+      }
+    }, {
+      key: "getTime",
+      value: function getTime() {
+        return this.time;
+      }
+    }], [{
+      key: "Avaliable",
+      value: function Avaliable() {
+        return !0;
+      }
+    }]);
+    return ManualTickHandler;
+  }();
+  var TimeOutTickHandler = /*#__PURE__*/function () {
+    function TimeOutTickHandler() {
+      _classCallCheck(this, TimeOutTickHandler);
+    }
+    _createClass(TimeOutTickHandler, [{
+      key: "avaliable",
+      value: function avaliable() {
+        return TimeOutTickHandler.Avaliable();
+      }
+    }, {
+      key: "tick",
+      value: function tick(interval, cb) {
+        var _this = this;
+        this.timerId = setTimeout(function () {
+          cb(_this);
+        }, interval);
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        this.timerId > 0 && (clearTimeout(this.timerId), this.timerId = -1);
+      }
+    }, {
+      key: "getTime",
+      value: function getTime() {
+        return Date.now();
+      }
+    }], [{
+      key: "Avaliable",
+      value: function Avaliable() {
+        return !0;
+      }
+    }]);
+    return TimeOutTickHandler;
+  }();
+  var RAFTickHandler = /*#__PURE__*/function () {
+    function RAFTickHandler() {
+      _classCallCheck(this, RAFTickHandler);
+    }
+    _createClass(RAFTickHandler, [{
+      key: "avaliable",
+      value: function avaliable() {
+        return RAFTickHandler.Avaliable();
+      }
+    }, {
+      key: "tick",
+      value: function tick(interval, cb) {
+        var _this2 = this;
+        application.global.getRequestAnimationFrame()(function () {
+          _this2.released || cb(_this2);
+        });
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        this.released = !0;
+      }
+    }, {
+      key: "getTime",
+      value: function getTime() {
+        return Date.now();
+      }
+    }], [{
+      key: "Avaliable",
+      value: function Avaliable() {
+        return !!application.global.getRequestAnimationFrame();
+      }
+    }]);
+    return RAFTickHandler;
+  }();
+  var STATUS$1;
+  !function (STATUS) {
+    STATUS[STATUS.INITIAL = 0] = "INITIAL", STATUS[STATUS.RUNNING = 1] = "RUNNING", STATUS[STATUS.PAUSE = 2] = "PAUSE";
+  }(STATUS$1 || (STATUS$1 = {}));
+  var DefaultTicker = /*#__PURE__*/function () {
+    function DefaultTicker() {
+      var _this3 = this;
+      var timelines = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      _classCallCheck(this, DefaultTicker);
+      this.handleTick = function (handler, params) {
+        var _ref = null != params ? params : {},
+          _ref$once = _ref.once,
+          once = _ref$once === void 0 ? !1 : _ref$once;
+        _this3.ifCanStop() ? _this3.stop() : (_this3._handlerTick(handler), once || handler.tick(_this3.interval, _this3.handleTick));
+      }, this._handlerTick = function (handler) {
+        var time = _this3.tickerHandler.getTime();
+        var delta = 0;
+        _this3.lastFrameTime >= 0 && (delta = time - _this3.lastFrameTime), _this3.lastFrameTime = time, _this3.status === STATUS$1.RUNNING && (_this3.tickCounts++, _this3.timelines.forEach(function (t) {
+          t.tick(delta);
+        }));
+      }, this.init(), this.lastFrameTime = -1, this.tickCounts = 0, this.timelines = timelines, this.autoStop = !0;
+    }
+    _createClass(DefaultTicker, [{
+      key: "mode",
+      get: function get() {
+        return this._mode;
+      },
+      set: function set(m) {
+        this._mode !== m && (this._mode = m, this.setupTickHandler());
+      }
+    }, {
+      key: "init",
+      value: function init() {
+        var _this4 = this;
+        this.interval = NaN, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("window", function () {
+          _this4.initHandler();
+        }), application.global.env && this.initHandler();
+      }
+    }, {
+      key: "addTimeline",
+      value: function addTimeline(timeline) {
+        this.timelines.push(timeline);
+      }
+    }, {
+      key: "remTimeline",
+      value: function remTimeline(timeline) {
+        this.timelines = this.timelines.filter(function (t) {
+          return t !== timeline;
+        });
+      }
+    }, {
+      key: "initHandler",
+      value: function initHandler() {
+        if (this._mode) return null;
+        var ticks = [{
+          mode: "raf",
+          cons: RAFTickHandler
+        }, {
+          mode: "timeout",
+          cons: TimeOutTickHandler
+        }, {
+          mode: "manual",
+          cons: ManualTickHandler
+        }];
+        for (var i = 0; i < ticks.length; i++) if (ticks[i].cons.Avaliable()) {
+          this.mode = ticks[i].mode;
+          break;
+        }
+        return null;
+      }
+    }, {
+      key: "setupTickHandler",
+      value: function setupTickHandler() {
+        var handler;
+        switch (this._mode) {
+          case "raf":
+            handler = new RAFTickHandler();
+            break;
+          case "timeout":
+            handler = new TimeOutTickHandler();
+            break;
+          case "manual":
+            handler = new ManualTickHandler();
+            break;
+          default:
+            console.warn("非法的计时器模式"), handler = new RAFTickHandler();
+        }
+        return !!handler.avaliable() && (this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0);
+      }
+    }, {
+      key: "setInterval",
+      value: function setInterval(interval) {
+        this.interval = interval;
+      }
+    }, {
+      key: "getInterval",
+      value: function getInterval() {
+        return this.interval;
+      }
+    }, {
+      key: "setFPS",
+      value: function setFPS(fps) {
+        this.setInterval(1e3 / fps);
+      }
+    }, {
+      key: "getFPS",
+      value: function getFPS() {
+        return 1e3 / this.interval;
+      }
+    }, {
+      key: "tick",
+      value: function tick(interval) {
+        var _this5 = this;
+        this.tickerHandler.tick(interval, function (handler) {
+          _this5.handleTick(handler, {
+            once: !0
+          });
+        });
+      }
+    }, {
+      key: "tickTo",
+      value: function tickTo(t) {
+        var _this6 = this;
+        this.tickerHandler.tickTo && this.tickerHandler.tickTo(t, function (handler) {
+          _this6.handleTick(handler, {
+            once: !0
+          });
+        });
+      }
+    }, {
+      key: "pause",
+      value: function pause() {
+        return this.status !== STATUS$1.INITIAL && (this.status = STATUS$1.PAUSE, !0);
+      }
+    }, {
+      key: "resume",
+      value: function resume() {
+        return this.status !== STATUS$1.INITIAL && (this.status = STATUS$1.RUNNING, !0);
+      }
+    }, {
+      key: "ifCanStop",
+      value: function ifCanStop() {
+        if (this.autoStop) {
+          if (!this.timelines.length) return !0;
+          if (0 === this.timelines.reduce(function (a, b) {
+            return a + b.animateCount;
+          }, 0)) return !0;
+        }
+        return !1;
+      }
+    }, {
+      key: "start",
+      value: function start() {
+        var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+        if (this.status === STATUS$1.RUNNING) return !1;
+        if (!this.tickerHandler) return !1;
+        if (!force) {
+          if (this.status === STATUS$1.PAUSE) return !1;
+          if (!this.timelines.length) return !1;
+          if (0 === this.timelines.reduce(function (a, b) {
+            return a + b.animateCount;
+          }, 0)) return !1;
+        }
+        return this.status = STATUS$1.RUNNING, this.tickerHandler.tick(0, this.handleTick), !0;
+      }
+    }, {
+      key: "stop",
+      value: function stop() {
+        this.status = STATUS$1.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
+      }
+    }]);
+    return DefaultTicker;
+  }();
+
   var Easing = /*#__PURE__*/function () {
     function Easing() {
       _classCallCheck(this, Easing);
@@ -6982,6 +7643,10 @@
     return ColorStore.Get(fromColor, ColorType.Color255, _fromColorRGB), ColorStore.Get(toColor, ColorType.Color255, _toColorRGB), "rgba(".concat(Math.round(_fromColorRGB[0] + (_toColorRGB[0] - _fromColorRGB[0]) * ratio), ",").concat(Math.round(_fromColorRGB[1] + (_toColorRGB[1] - _fromColorRGB[1]) * ratio), ",").concat(Math.round(_fromColorRGB[2] + (_toColorRGB[2] - _fromColorRGB[2]) * ratio), ",").concat(_fromColorRGB[3] + (_toColorRGB[3] - _fromColorRGB[3]) * ratio, ")");
   }
 
+  Object.keys(vutils.DEFAULT_COLORS).forEach(function (k) {
+    vutils.DEFAULT_COLORS[k];
+  });
+
   var ResourceLoader = /*#__PURE__*/function () {
     function ResourceLoader() {
       _classCallCheck(this, ResourceLoader);
@@ -8637,17 +9302,17 @@
   var DynamicLayerHandlerContribution = Symbol["for"]("DynamicLayerHandlerContribution");
   var VirtualLayerHandlerContribution = Symbol["for"]("VirtualLayerHandlerContribution");
 
-  var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$l = undefined && undefined.__metadata || function (k, v) {
+    __metadata$p = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$l = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$m = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -8728,19 +9393,19 @@
     }]);
     return DefaultLayerService;
   }();
-  DefaultLayerService = __decorate$N([injectable(), __param$l(0, inject(VGlobal)), __metadata$l("design:paramtypes", [Object])], DefaultLayerService);
+  DefaultLayerService = __decorate$T([injectable(), __param$m(0, inject(VGlobal)), __metadata$p("design:paramtypes", [Object])], DefaultLayerService);
 
-  var __decorate$M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$k = undefined && undefined.__metadata || function (k, v) {
+    __metadata$o = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$k = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$l = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -8895,7 +9560,7 @@
     }]);
     return DefaultWindow;
   }();
-  __decorate$M([postConstruct(), __metadata$k("design:type", Function), __metadata$k("design:paramtypes", []), __metadata$k("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$M([injectable(), __param$k(0, inject(VGlobal)), __metadata$k("design:paramtypes", [Object])], DefaultWindow);
+  __decorate$S([postConstruct(), __metadata$o("design:type", Function), __metadata$o("design:paramtypes", []), __metadata$o("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$S([injectable(), __param$l(0, inject(VGlobal)), __metadata$o("design:paramtypes", [Object])], DefaultWindow);
 
   var coreModule = new ContainerModule(function (bind) {
     bind(DefaultGlobal).toSelf().inSingletonScope(), bind(VGlobal).toService(DefaultGlobal), bind(DefaultWindow).to(DefaultWindow), bind(VWindow).toService(DefaultWindow), bind(DefaultGraphicUtil).toSelf().inSingletonScope(), bind(GraphicUtil).toService(DefaultGraphicUtil), bind(DefaultTransformUtil).toSelf().inSingletonScope(), bind(TransformUtil).toService(DefaultTransformUtil), bind(DefaultLayerService).toSelf().inSingletonScope(), bind(LayerService).toService(DefaultLayerService);
@@ -12183,6 +12848,10 @@
     cap: 1
   }, NOWORK_ANIMATE_ATTR);
 
+  Object.assign({
+    cap: 1
+  }, NOWORK_ANIMATE_ATTR);
+
   var POLYGON_UPDATE_TAG_KEY = ["points", "cornerRadius"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
   var Polygon = /*#__PURE__*/function (_Graphic) {
     _inherits(Polygon, _Graphic);
@@ -12265,7 +12934,7 @@
   }(Graphic);
   Polygon.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
 
-  var __decorate$L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -12295,9 +12964,9 @@
     }]);
     return DefaultOuterBorderBoundsContribution;
   }();
-  DefaultOuterBorderBoundsContribution = __decorate$L([injectable()], DefaultOuterBorderBoundsContribution);
+  DefaultOuterBorderBoundsContribution = __decorate$R([injectable()], DefaultOuterBorderBoundsContribution);
 
-  var __decorate$K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$Q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -12314,9 +12983,9 @@
     }
     return _createClass(DefaultRectOuterBorderBoundsContribution);
   }(DefaultOuterBorderBoundsContribution);
-  DefaultRectOuterBorderBoundsContribution = __decorate$K([injectable()], DefaultRectOuterBorderBoundsContribution);
+  DefaultRectOuterBorderBoundsContribution = __decorate$Q([injectable()], DefaultRectOuterBorderBoundsContribution);
 
-  var __decorate$J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -12352,9 +13021,9 @@
     }]);
     return DefaultSymbolOuterBorderBoundsContribution;
   }(DefaultOuterBorderBoundsContribution);
-  DefaultSymbolOuterBorderBoundsContribution = __decorate$J([injectable()], DefaultSymbolOuterBorderBoundsContribution);
+  DefaultSymbolOuterBorderBoundsContribution = __decorate$P([injectable()], DefaultSymbolOuterBorderBoundsContribution);
 
-  var __decorate$I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -12371,9 +13040,9 @@
     }
     return _createClass(DefaultCircleOuterBorderBoundsContribution);
   }(DefaultOuterBorderBoundsContribution);
-  DefaultCircleOuterBorderBoundsContribution = __decorate$I([injectable()], DefaultCircleOuterBorderBoundsContribution);
+  DefaultCircleOuterBorderBoundsContribution = __decorate$O([injectable()], DefaultCircleOuterBorderBoundsContribution);
 
-  var __decorate$H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -12390,9 +13059,9 @@
     }
     return _createClass(DefaultArcOuterBorderBoundsContribution);
   }(DefaultOuterBorderBoundsContribution);
-  DefaultArcOuterBorderBoundsContribution = __decorate$H([injectable()], DefaultArcOuterBorderBoundsContribution);
+  DefaultArcOuterBorderBoundsContribution = __decorate$N([injectable()], DefaultArcOuterBorderBoundsContribution);
 
-  var __decorate$G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -12409,7 +13078,7 @@
     }
     return _createClass(DefaultPathOuterBorderBoundsContribution);
   }(DefaultOuterBorderBoundsContribution);
-  DefaultPathOuterBorderBoundsContribution = __decorate$G([injectable()], DefaultPathOuterBorderBoundsContribution);
+  DefaultPathOuterBorderBoundsContribution = __decorate$M([injectable()], DefaultPathOuterBorderBoundsContribution);
 
   function createMat4() {
     return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
@@ -12497,17 +13166,17 @@
   var matrixAllocate = new DefaultMatrixAllocate();
   var mat4Allocate = new DefaultMat4Allocate();
 
-  var __decorate$F = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$j = undefined && undefined.__metadata || function (k, v) {
+    __metadata$n = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$j = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$k = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -13131,7 +13800,7 @@
     }]);
     return DefaultGraphicService;
   }();
-  DefaultGraphicService = __decorate$F([injectable(), __param$j(0, inject(GraphicCreator)), __param$j(1, inject(ContributionProvider)), __param$j(1, named(RectBoundsContribution)), __param$j(2, inject(ContributionProvider)), __param$j(2, named(SymbolBoundsContribution)), __param$j(3, inject(ContributionProvider)), __param$j(3, named(CircleBoundsContribution)), __param$j(4, inject(ContributionProvider)), __param$j(4, named(ArcBoundsContribution)), __param$j(5, inject(ContributionProvider)), __param$j(5, named(PathBoundsContribution)), __metadata$j("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
+  DefaultGraphicService = __decorate$L([injectable(), __param$k(0, inject(GraphicCreator)), __param$k(1, inject(ContributionProvider)), __param$k(1, named(RectBoundsContribution)), __param$k(2, inject(ContributionProvider)), __param$k(2, named(SymbolBoundsContribution)), __param$k(3, inject(ContributionProvider)), __param$k(3, named(CircleBoundsContribution)), __param$k(4, inject(ContributionProvider)), __param$k(4, named(ArcBoundsContribution)), __param$k(5, inject(ContributionProvider)), __param$k(5, named(PathBoundsContribution)), __metadata$n("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
 
   var ShadowRoot = /*#__PURE__*/function (_Group) {
     _inherits(ShadowRoot, _Group);
@@ -13253,7 +13922,7 @@
   }
   createRichText({});
 
-  var __decorate$E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -13423,19 +14092,19 @@
     }]);
     return BaseRender;
   }();
-  BaseRender = __decorate$E([injectable()], BaseRender);
+  BaseRender = __decorate$K([injectable()], BaseRender);
 
-  var __decorate$D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$i = undefined && undefined.__metadata || function (k, v) {
+    __metadata$m = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$i = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$j = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -13605,19 +14274,19 @@
     }]);
     return DefaultCanvasArcRender;
   }(BaseRender);
-  DefaultCanvasArcRender = __decorate$D([injectable(), __param$i(0, inject(ContributionProvider)), __param$i(0, named(ArcRenderContribution)), __metadata$i("design:paramtypes", [Object])], DefaultCanvasArcRender);
+  DefaultCanvasArcRender = __decorate$J([injectable(), __param$j(0, inject(ContributionProvider)), __param$j(0, named(ArcRenderContribution)), __metadata$m("design:paramtypes", [Object])], DefaultCanvasArcRender);
 
-  var __decorate$C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$h = undefined && undefined.__metadata || function (k, v) {
+    __metadata$l = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$h = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$i = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -13663,7 +14332,7 @@
     }]);
     return DefaultCanvasCircleRender;
   }(BaseRender);
-  DefaultCanvasCircleRender = __decorate$C([injectable(), __param$h(0, inject(ContributionProvider)), __param$h(0, named(CircleRenderContribution)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasCircleRender);
+  DefaultCanvasCircleRender = __decorate$I([injectable(), __param$i(0, inject(ContributionProvider)), __param$i(0, named(CircleRenderContribution)), __metadata$l("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
   function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
     var _a;
@@ -13803,7 +14472,7 @@
     }
   }
 
-  var __decorate$B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -13961,7 +14630,7 @@
     }]);
     return DefaultCanvasLineRender;
   }(BaseRender);
-  DefaultCanvasLineRender = __decorate$B([injectable()], DefaultCanvasLineRender);
+  DefaultCanvasLineRender = __decorate$H([injectable()], DefaultCanvasLineRender);
 
   function drawAreaSegments(path, segPath, percent, params) {
     var _a;
@@ -14102,17 +14771,17 @@
     }
   }
 
-  var __decorate$A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$g = undefined && undefined.__metadata || function (k, v) {
+    __metadata$k = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$g = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$h = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -14332,19 +15001,19 @@
     }]);
     return DefaultCanvasAreaRender;
   }(BaseRender);
-  DefaultCanvasAreaRender = __decorate$A([injectable(), __param$g(0, inject(ContributionProvider)), __param$g(0, named(AreaRenderContribution)), __metadata$g("design:paramtypes", [Object])], DefaultCanvasAreaRender);
+  DefaultCanvasAreaRender = __decorate$G([injectable(), __param$h(0, inject(ContributionProvider)), __param$h(0, named(AreaRenderContribution)), __metadata$k("design:paramtypes", [Object])], DefaultCanvasAreaRender);
 
-  var __decorate$z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$F = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$f = undefined && undefined.__metadata || function (k, v) {
+    __metadata$j = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$f = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$g = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -14390,7 +15059,7 @@
     }]);
     return DefaultCanvasPathRender;
   }(BaseRender);
-  DefaultCanvasPathRender = __decorate$z([injectable(), __param$f(0, inject(ContributionProvider)), __param$f(0, named(PathRenderContribution)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasPathRender);
+  DefaultCanvasPathRender = __decorate$F([injectable(), __param$g(0, inject(ContributionProvider)), __param$g(0, named(PathRenderContribution)), __metadata$j("design:paramtypes", [Object])], DefaultCanvasPathRender);
 
   var halfPi = vutils.pi / 2;
   function createRectPath(path, x, y, width, height, rectCornerRadius) {
@@ -14450,17 +15119,17 @@
     return path.closePath(), path;
   }
 
-  var __decorate$y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$e = undefined && undefined.__metadata || function (k, v) {
+    __metadata$i = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$e = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$f = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -14529,19 +15198,19 @@
     }]);
     return DefaultCanvasRectRender;
   }(BaseRender);
-  DefaultCanvasRectRender = __decorate$y([injectable(), __param$e(0, inject(ContributionProvider)), __param$e(0, named(RectRenderContribution)), __metadata$e("design:paramtypes", [Object])], DefaultCanvasRectRender);
+  DefaultCanvasRectRender = __decorate$E([injectable(), __param$f(0, inject(ContributionProvider)), __param$f(0, named(RectRenderContribution)), __metadata$i("design:paramtypes", [Object])], DefaultCanvasRectRender);
 
-  var __decorate$x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$d = undefined && undefined.__metadata || function (k, v) {
+    __metadata$h = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$d = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$e = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -14602,19 +15271,19 @@
     }]);
     return DefaultCanvasSymbolRender;
   }(BaseRender);
-  DefaultCanvasSymbolRender = __decorate$x([injectable(), __param$d(0, inject(ContributionProvider)), __param$d(0, named(SymbolRenderContribution)), __metadata$d("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
+  DefaultCanvasSymbolRender = __decorate$D([injectable(), __param$e(0, inject(ContributionProvider)), __param$e(0, named(SymbolRenderContribution)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
-  var __decorate$w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$c = undefined && undefined.__metadata || function (k, v) {
+    __metadata$g = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$c = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$d = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -14844,7 +15513,19 @@
     }]);
     return DefaultCanvasTextRender;
   }(BaseRender);
-  DefaultCanvasTextRender = __decorate$w([injectable(), __param$c(0, inject(ContributionProvider)), __param$c(0, named(TextRenderContribution)), __metadata$c("design:paramtypes", [Object])], DefaultCanvasTextRender);
+  DefaultCanvasTextRender = __decorate$C([injectable(), __param$d(0, inject(ContributionProvider)), __param$d(0, named(TextRenderContribution)), __metadata$g("design:paramtypes", [Object])], DefaultCanvasTextRender);
+
+  var __decorate$B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var d,
+      c = arguments.length,
+      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  var AbstractGraphicRender = /*#__PURE__*/_createClass(function AbstractGraphicRender() {
+    _classCallCheck(this, AbstractGraphicRender);
+  });
+  AbstractGraphicRender = __decorate$B([injectable()], AbstractGraphicRender);
 
   function drawPolygon(path, points, x, y) {
     path.moveTo(points[0].x + x, points[0].y + y);
@@ -14897,17 +15578,17 @@
     };
   }
 
-  var __decorate$v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$b = undefined && undefined.__metadata || function (k, v) {
+    __metadata$f = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$b = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$c = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -14955,19 +15636,19 @@
     }]);
     return DefaultCanvasPolygonRender;
   }(BaseRender);
-  DefaultCanvasPolygonRender = __decorate$v([injectable(), __param$b(0, inject(ContributionProvider)), __param$b(0, named(PolygonRenderContribution)), __metadata$b("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
+  DefaultCanvasPolygonRender = __decorate$A([injectable(), __param$c(0, inject(ContributionProvider)), __param$c(0, named(PolygonRenderContribution)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
 
-  var __decorate$u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$a = undefined && undefined.__metadata || function (k, v) {
+    __metadata$e = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$a = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$b = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -15035,7 +15716,7 @@
     }]);
     return DefaultCanvasImageRender;
   }(BaseRender);
-  DefaultCanvasImageRender = __decorate$u([injectable(), __param$a(0, inject(ContributionProvider)), __param$a(0, named(ImageRenderContribution)), __metadata$a("design:paramtypes", [Object])], DefaultCanvasImageRender);
+  DefaultCanvasImageRender = __decorate$z([injectable(), __param$b(0, inject(ContributionProvider)), __param$b(0, named(ImageRenderContribution)), __metadata$e("design:paramtypes", [Object])], DefaultCanvasImageRender);
 
   var IncrementalDrawContribution = Symbol["for"]("IncrementalDrawContribution");
   var ArcRender = Symbol["for"]("ArcRender");
@@ -15198,17 +15879,17 @@
   }();
   var canvasAllocate = new DefaultCanvasAllocate();
 
-  var __decorate$t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$9 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$d = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$9 = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$a = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -15242,7 +15923,7 @@
     }]);
     return DefaultBaseBackgroundRenderContribution;
   }();
-  DefaultBaseBackgroundRenderContribution = __decorate$t([injectable()], DefaultBaseBackgroundRenderContribution);
+  DefaultBaseBackgroundRenderContribution = __decorate$y([injectable()], DefaultBaseBackgroundRenderContribution);
   var DefaultBaseInteractiveRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseInteractiveRenderContribution(subRenderContribitions) {
       _classCallCheck(this, DefaultBaseInteractiveRenderContribution);
@@ -15258,7 +15939,7 @@
     }]);
     return DefaultBaseInteractiveRenderContribution;
   }();
-  DefaultBaseInteractiveRenderContribution = __decorate$t([injectable(), __param$9(0, inject(ContributionProvider)), __param$9(0, named(InteractiveSubRenderContribution)), __metadata$9("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+  DefaultBaseInteractiveRenderContribution = __decorate$y([injectable(), __param$a(0, inject(ContributionProvider)), __param$a(0, named(InteractiveSubRenderContribution)), __metadata$d("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
   var DefaultBaseTextureRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseTextureRenderContribution() {
       _classCallCheck(this, DefaultBaseTextureRenderContribution);
@@ -15400,9 +16081,9 @@
     }]);
     return DefaultBaseTextureRenderContribution;
   }();
-  DefaultBaseTextureRenderContribution = __decorate$t([injectable()], DefaultBaseTextureRenderContribution);
+  DefaultBaseTextureRenderContribution = __decorate$y([injectable()], DefaultBaseTextureRenderContribution);
 
-  var __decorate$s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15484,7 +16165,7 @@
     }]);
     return DefaultArcRenderContribution;
   }();
-  DefaultArcRenderContribution = __decorate$s([injectable()], DefaultArcRenderContribution);
+  DefaultArcRenderContribution = __decorate$x([injectable()], DefaultArcRenderContribution);
   var DefaultArcBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
     _inherits(DefaultArcBackgroundRenderContribution, _DefaultBaseBackgroun);
     var _super = _createSuper(DefaultArcBackgroundRenderContribution);
@@ -15496,7 +16177,7 @@
     }
     return _createClass(DefaultArcBackgroundRenderContribution);
   }(DefaultBaseBackgroundRenderContribution);
-  DefaultArcBackgroundRenderContribution = __decorate$s([injectable()], DefaultArcBackgroundRenderContribution);
+  DefaultArcBackgroundRenderContribution = __decorate$x([injectable()], DefaultArcBackgroundRenderContribution);
   var DefaultArcTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
     _inherits(DefaultArcTextureRenderContribution, _DefaultBaseTextureRe);
     var _super2 = _createSuper(DefaultArcTextureRenderContribution);
@@ -15508,9 +16189,9 @@
     }
     return _createClass(DefaultArcTextureRenderContribution);
   }(DefaultBaseTextureRenderContribution);
-  DefaultArcTextureRenderContribution = __decorate$s([injectable()], DefaultArcTextureRenderContribution);
+  DefaultArcTextureRenderContribution = __decorate$x([injectable()], DefaultArcTextureRenderContribution);
 
-  var __decorate$r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15572,7 +16253,7 @@
     }]);
     return DefaultCircleRenderContribution;
   }();
-  DefaultCircleRenderContribution = __decorate$r([injectable()], DefaultCircleRenderContribution);
+  DefaultCircleRenderContribution = __decorate$w([injectable()], DefaultCircleRenderContribution);
   var DefaultCircleBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
     _inherits(DefaultCircleBackgroundRenderContribution, _DefaultBaseBackgroun);
     var _super = _createSuper(DefaultCircleBackgroundRenderContribution);
@@ -15584,7 +16265,7 @@
     }
     return _createClass(DefaultCircleBackgroundRenderContribution);
   }(DefaultBaseBackgroundRenderContribution);
-  DefaultCircleBackgroundRenderContribution = __decorate$r([injectable()], DefaultCircleBackgroundRenderContribution);
+  DefaultCircleBackgroundRenderContribution = __decorate$w([injectable()], DefaultCircleBackgroundRenderContribution);
   var DefaultCircleTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
     _inherits(DefaultCircleTextureRenderContribution, _DefaultBaseTextureRe);
     var _super2 = _createSuper(DefaultCircleTextureRenderContribution);
@@ -15596,9 +16277,9 @@
     }
     return _createClass(DefaultCircleTextureRenderContribution);
   }(DefaultBaseTextureRenderContribution);
-  DefaultCircleTextureRenderContribution = __decorate$r([injectable()], DefaultCircleTextureRenderContribution);
+  DefaultCircleTextureRenderContribution = __decorate$w([injectable()], DefaultCircleTextureRenderContribution);
 
-  var __decorate$q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15629,9 +16310,9 @@
     }]);
     return DefaultGroupBackgroundRenderContribution;
   }(DefaultBaseBackgroundRenderContribution);
-  DefaultGroupBackgroundRenderContribution = __decorate$q([injectable()], DefaultGroupBackgroundRenderContribution);
+  DefaultGroupBackgroundRenderContribution = __decorate$v([injectable()], DefaultGroupBackgroundRenderContribution);
 
-  var __decorate$p = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15696,7 +16377,7 @@
     }]);
     return DefaultImageBackgroundRenderContribution;
   }(DefaultBaseBackgroundRenderContribution);
-  DefaultImageBackgroundRenderContribution = __decorate$p([injectable()], DefaultImageBackgroundRenderContribution);
+  DefaultImageBackgroundRenderContribution = __decorate$u([injectable()], DefaultImageBackgroundRenderContribution);
   function getActualPosition(graphic) {
     var boundsPadding = parsePadding(graphic.attribute.boundsPadding),
       bounds = graphic.AABBBounds;
@@ -15712,7 +16393,7 @@
     };
   }
 
-  var __decorate$o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15784,7 +16465,7 @@
     }]);
     return DefaultRectRenderContribution;
   }();
-  DefaultRectRenderContribution = __decorate$o([injectable()], DefaultRectRenderContribution);
+  DefaultRectRenderContribution = __decorate$t([injectable()], DefaultRectRenderContribution);
   var DefaultRectBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
     _inherits(DefaultRectBackgroundRenderContribution, _DefaultBaseBackgroun);
     var _super = _createSuper(DefaultRectBackgroundRenderContribution);
@@ -15796,7 +16477,7 @@
     }
     return _createClass(DefaultRectBackgroundRenderContribution);
   }(DefaultBaseBackgroundRenderContribution);
-  DefaultRectBackgroundRenderContribution = __decorate$o([injectable()], DefaultRectBackgroundRenderContribution);
+  DefaultRectBackgroundRenderContribution = __decorate$t([injectable()], DefaultRectBackgroundRenderContribution);
   var DefaultRectTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
     _inherits(DefaultRectTextureRenderContribution, _DefaultBaseTextureRe);
     var _super2 = _createSuper(DefaultRectTextureRenderContribution);
@@ -15808,7 +16489,7 @@
     }
     return _createClass(DefaultRectTextureRenderContribution);
   }(DefaultBaseTextureRenderContribution);
-  DefaultRectTextureRenderContribution = __decorate$o([injectable()], DefaultRectTextureRenderContribution);
+  DefaultRectTextureRenderContribution = __decorate$t([injectable()], DefaultRectTextureRenderContribution);
   var SplitRectBeforeRenderContribution = /*#__PURE__*/function () {
     function SplitRectBeforeRenderContribution() {
       _classCallCheck(this, SplitRectBeforeRenderContribution);
@@ -15826,7 +16507,7 @@
     }]);
     return SplitRectBeforeRenderContribution;
   }();
-  SplitRectBeforeRenderContribution = __decorate$o([injectable()], SplitRectBeforeRenderContribution);
+  SplitRectBeforeRenderContribution = __decorate$t([injectable()], SplitRectBeforeRenderContribution);
   var SplitRectAfterRenderContribution = /*#__PURE__*/function () {
     function SplitRectAfterRenderContribution() {
       _classCallCheck(this, SplitRectAfterRenderContribution);
@@ -15855,9 +16536,9 @@
     }]);
     return SplitRectAfterRenderContribution;
   }();
-  SplitRectAfterRenderContribution = __decorate$o([injectable()], SplitRectAfterRenderContribution);
+  SplitRectAfterRenderContribution = __decorate$t([injectable()], SplitRectAfterRenderContribution);
 
-  var __decorate$n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -15917,7 +16598,7 @@
     }]);
     return DefaultSymbolRenderContribution;
   }();
-  DefaultSymbolRenderContribution = __decorate$n([injectable()], DefaultSymbolRenderContribution);
+  DefaultSymbolRenderContribution = __decorate$s([injectable()], DefaultSymbolRenderContribution);
   var DefaultSymbolBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
     _inherits(DefaultSymbolBackgroundRenderContribution, _DefaultBaseBackgroun);
     var _super = _createSuper(DefaultSymbolBackgroundRenderContribution);
@@ -15941,17 +16622,17 @@
     return _createClass(DefaultSymbolTextureRenderContribution);
   }(DefaultBaseTextureRenderContribution);
 
-  var __decorate$m = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$8 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$c = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$8 = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$9 = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -16007,7 +16688,7 @@
     }]);
     return DefaultRenderService;
   }();
-  DefaultRenderService = __decorate$m([injectable(), __param$8(0, inject(DrawContribution)), __metadata$8("design:paramtypes", [Object])], DefaultRenderService);
+  DefaultRenderService = __decorate$r([injectable(), __param$9(0, inject(DrawContribution)), __metadata$c("design:paramtypes", [Object])], DefaultRenderService);
 
   var renderModule$1 = new ContainerModule(function (bind) {
     bind(DefaultRenderService).toSelf(), bind(RenderService).toService(DefaultRenderService);
@@ -16016,17 +16697,17 @@
   var PickerService = Symbol["for"]("PickerService");
   var GlobalPickerService = Symbol["for"]("GlobalPickerService");
 
-  var __decorate$l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$7 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$b = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$7 = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$8 = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -16108,9 +16789,9 @@
     }]);
     return DefaultGlobalPickerService;
   }();
-  DefaultGlobalPickerService = __decorate$l([injectable(), __param$7(0, inject(VGlobal)), __metadata$7("design:paramtypes", [Object])], DefaultGlobalPickerService);
+  DefaultGlobalPickerService = __decorate$q([injectable(), __param$8(0, inject(VGlobal)), __metadata$b("design:paramtypes", [Object])], DefaultGlobalPickerService);
 
-  var __decorate$k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$p = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -16154,7 +16835,7 @@
     }]);
     return ShadowRootPickItemInterceptorContribution;
   }();
-  ShadowRootPickItemInterceptorContribution = __decorate$k([injectable()], ShadowRootPickItemInterceptorContribution);
+  ShadowRootPickItemInterceptorContribution = __decorate$p([injectable()], ShadowRootPickItemInterceptorContribution);
   var InteractivePickItemInterceptorContribution = /*#__PURE__*/function () {
     function InteractivePickItemInterceptorContribution() {
       _classCallCheck(this, InteractivePickItemInterceptorContribution);
@@ -16178,7 +16859,7 @@
     }]);
     return InteractivePickItemInterceptorContribution;
   }();
-  InteractivePickItemInterceptorContribution = __decorate$k([injectable()], InteractivePickItemInterceptorContribution);
+  InteractivePickItemInterceptorContribution = __decorate$p([injectable()], InteractivePickItemInterceptorContribution);
   var Canvas3DPickItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DPickItemInterceptor() {
       _classCallCheck(this, Canvas3DPickItemInterceptor);
@@ -16255,7 +16936,7 @@
     }]);
     return Canvas3DPickItemInterceptor;
   }();
-  Canvas3DPickItemInterceptor = __decorate$k([injectable()], Canvas3DPickItemInterceptor);
+  Canvas3DPickItemInterceptor = __decorate$p([injectable()], Canvas3DPickItemInterceptor);
 
   var pickModule = new ContainerModule(function (bind) {
     bind(PickerService).toService(GlobalPickerService), bind(DefaultGlobalPickerService).toSelf().inSingletonScope(), bind(GlobalPickerService).toService(DefaultGlobalPickerService), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution), bind(InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -16268,17 +16949,17 @@
   var AutoEnablePlugins = Symbol["for"]("AutoEnablePlugins");
   var PluginService = Symbol["for"]("PluginService");
 
-  var __decorate$j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$6 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$a = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$6 = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$7 = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -16326,7 +17007,7 @@
     }]);
     return DefaultPluginService;
   }();
-  DefaultPluginService = __decorate$j([injectable(), __param$6(0, inject(ContributionProvider)), __param$6(0, named(AutoEnablePlugins)), __metadata$6("design:paramtypes", [Object])], DefaultPluginService);
+  DefaultPluginService = __decorate$o([injectable(), __param$7(0, inject(ContributionProvider)), __param$7(0, named(AutoEnablePlugins)), __metadata$a("design:paramtypes", [Object])], DefaultPluginService);
 
   var pluginModule = new ContainerModule(function (bind) {
     bind(DefaultPluginService).toSelf(), bind(PluginService).toService(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -16340,17 +17021,17 @@
     bind(DefaultTextMeasureContribution).toSelf().inSingletonScope(), bind(TextMeasureContribution).toService(DefaultTextMeasureContribution), bindContributionProvider(bind, TextMeasureContribution);
   });
 
-  var __decorate$i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$5 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$9 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$5 = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$6 = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -16445,19 +17126,19 @@
     }]);
     return CanvasLayerHandlerContribution;
   }();
-  CanvasLayerHandlerContribution = __decorate$i([injectable(), __param$5(0, inject(VGlobal)), __metadata$5("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
+  CanvasLayerHandlerContribution = __decorate$n([injectable(), __param$6(0, inject(VGlobal)), __metadata$9("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
 
-  var __decorate$h = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$m = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$4 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$8 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$4 = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$5 = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -16517,19 +17198,19 @@
     }]);
     return EmptyLayerHandlerContribution;
   }();
-  EmptyLayerHandlerContribution = __decorate$h([injectable(), __param$4(0, inject(VGlobal)), __metadata$4("design:paramtypes", [Object])], EmptyLayerHandlerContribution);
+  EmptyLayerHandlerContribution = __decorate$m([injectable(), __param$5(0, inject(VGlobal)), __metadata$8("design:paramtypes", [Object])], EmptyLayerHandlerContribution);
 
-  var __decorate$g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$3 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$7 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$3 = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$4 = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -16618,7 +17299,7 @@
     }]);
     return OffscreenLayerHandlerContribution;
   }();
-  OffscreenLayerHandlerContribution = __decorate$g([injectable(), __param$3(0, inject(VGlobal)), __metadata$3("design:paramtypes", [Object])], OffscreenLayerHandlerContribution);
+  OffscreenLayerHandlerContribution = __decorate$l([injectable(), __param$4(0, inject(VGlobal)), __metadata$7("design:paramtypes", [Object])], OffscreenLayerHandlerContribution);
 
   var layerHandlerModules = new ContainerModule(function (bind) {
     bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(EmptyLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution), bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution), bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
@@ -16745,7 +17426,7 @@
     return result;
   }
 
-  var __decorate$f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -16784,7 +17465,7 @@
     }]);
     return ShadowRootDrawItemInterceptorContribution;
   }();
-  ShadowRootDrawItemInterceptorContribution = __decorate$f([injectable()], ShadowRootDrawItemInterceptorContribution);
+  ShadowRootDrawItemInterceptorContribution = __decorate$k([injectable()], ShadowRootDrawItemInterceptorContribution);
   var CommonDrawItemInterceptorContribution = /*#__PURE__*/function () {
     function CommonDrawItemInterceptorContribution() {
       _classCallCheck(this, CommonDrawItemInterceptorContribution);
@@ -16812,7 +17493,7 @@
     }]);
     return CommonDrawItemInterceptorContribution;
   }();
-  CommonDrawItemInterceptorContribution = __decorate$f([injectable()], CommonDrawItemInterceptorContribution);
+  CommonDrawItemInterceptorContribution = __decorate$k([injectable()], CommonDrawItemInterceptorContribution);
   var InteractiveDrawItemInterceptorContribution = /*#__PURE__*/function () {
     function InteractiveDrawItemInterceptorContribution() {
       _classCallCheck(this, InteractiveDrawItemInterceptorContribution);
@@ -16871,7 +17552,7 @@
     }]);
     return InteractiveDrawItemInterceptorContribution;
   }();
-  InteractiveDrawItemInterceptorContribution = __decorate$f([injectable()], InteractiveDrawItemInterceptorContribution);
+  InteractiveDrawItemInterceptorContribution = __decorate$k([injectable()], InteractiveDrawItemInterceptorContribution);
   var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DDrawItemInterceptor() {
       _classCallCheck(this, Canvas3DDrawItemInterceptor);
@@ -16960,19 +17641,19 @@
     }]);
     return Canvas3DDrawItemInterceptor;
   }();
-  Canvas3DDrawItemInterceptor = __decorate$f([injectable()], Canvas3DDrawItemInterceptor);
+  Canvas3DDrawItemInterceptor = __decorate$k([injectable()], Canvas3DDrawItemInterceptor);
 
-  var __decorate$e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$2 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$6 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$2 = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$3 = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -17174,9 +17855,9 @@
     }]);
     return DefaultDrawContribution;
   }();
-  __decorate$e([inject(VGlobal), __metadata$2("design:type", Object)], DefaultDrawContribution.prototype, "global", void 0), __decorate$e([postConstruct(), __metadata$2("design:type", Function), __metadata$2("design:paramtypes", []), __metadata$2("design:returntype", void 0)], DefaultDrawContribution.prototype, "init", null), DefaultDrawContribution = __decorate$e([injectable(), __param$2(0, multiInject(GraphicRender)), __param$2(1, inject(RenderSelector)), __param$2(2, inject(LayerService)), __param$2(3, inject(ContributionProvider)), __param$2(3, named(DrawItemInterceptor)), __metadata$2("design:paramtypes", [Array, Object, Object, Object])], DefaultDrawContribution);
+  __decorate$j([inject(VGlobal), __metadata$6("design:type", Object)], DefaultDrawContribution.prototype, "global", void 0), __decorate$j([postConstruct(), __metadata$6("design:type", Function), __metadata$6("design:paramtypes", []), __metadata$6("design:returntype", void 0)], DefaultDrawContribution.prototype, "init", null), DefaultDrawContribution = __decorate$j([injectable(), __param$3(0, multiInject(GraphicRender)), __param$3(1, inject(RenderSelector)), __param$3(2, inject(LayerService)), __param$3(3, inject(ContributionProvider)), __param$3(3, named(DrawItemInterceptor)), __metadata$6("design:paramtypes", [Array, Object, Object, Object])], DefaultDrawContribution);
 
-  var __decorate$d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -17195,19 +17876,19 @@
     }]);
     return DefaultRenderSelector;
   }();
-  DefaultRenderSelector = __decorate$d([injectable()], DefaultRenderSelector);
+  DefaultRenderSelector = __decorate$i([injectable()], DefaultRenderSelector);
 
-  var __decorate$c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$h = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$1 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$5 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param$1 = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$2 = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -17309,9 +17990,9 @@
     }]);
     return DefaultCanvasGroupRender;
   }();
-  DefaultCanvasGroupRender = __decorate$c([injectable(), __param$1(0, inject(ContributionProvider)), __param$1(0, named(GroupRenderContribution)), __metadata$1("design:paramtypes", [Object])], DefaultCanvasGroupRender);
+  DefaultCanvasGroupRender = __decorate$h([injectable(), __param$2(0, inject(ContributionProvider)), __param$2(0, named(GroupRenderContribution)), __metadata$5("design:paramtypes", [Object])], DefaultCanvasGroupRender);
 
-  var __decorate$b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -17375,9 +18056,9 @@
     }]);
     return DefaultIncrementalCanvasLineRender;
   }(DefaultCanvasLineRender);
-  DefaultIncrementalCanvasLineRender = __decorate$b([injectable()], DefaultIncrementalCanvasLineRender);
+  DefaultIncrementalCanvasLineRender = __decorate$g([injectable()], DefaultIncrementalCanvasLineRender);
 
-  var __decorate$a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -17432,20 +18113,20 @@
     }]);
     return DefaultIncrementalCanvasAreaRender;
   }(DefaultCanvasAreaRender);
-  DefaultIncrementalCanvasAreaRender = __decorate$a([injectable()], DefaultIncrementalCanvasAreaRender);
+  DefaultIncrementalCanvasAreaRender = __decorate$f([injectable()], DefaultIncrementalCanvasAreaRender);
 
   var STATUS,
-    __decorate$9 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    __decorate$e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata = undefined && undefined.__metadata || function (k, v) {
+    __metadata$4 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
-    __param = undefined && undefined.__param || function (paramIndex, decorator) {
+    __param$1 = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
@@ -17801,9 +18482,9 @@
     }]);
     return DefaultIncrementalDrawContribution;
   }(DefaultDrawContribution);
-  __decorate$9([inject(VGlobal), __metadata("design:type", Object)], DefaultIncrementalDrawContribution.prototype, "global", void 0), DefaultIncrementalDrawContribution = __decorate$9([injectable(), __param(0, multiInject(GraphicRender)), __param(1, inject(RenderSelector)), __param(2, inject(DefaultIncrementalCanvasLineRender)), __param(3, inject(DefaultIncrementalCanvasAreaRender)), __param(4, inject(LayerService)), __param(5, inject(ContributionProvider)), __param(5, named(DrawItemInterceptor)), __metadata("design:paramtypes", [Array, Object, Object, Object, Object, Object])], DefaultIncrementalDrawContribution);
+  __decorate$e([inject(VGlobal), __metadata$4("design:type", Object)], DefaultIncrementalDrawContribution.prototype, "global", void 0), DefaultIncrementalDrawContribution = __decorate$e([injectable(), __param$1(0, multiInject(GraphicRender)), __param$1(1, inject(RenderSelector)), __param$1(2, inject(DefaultIncrementalCanvasLineRender)), __param$1(3, inject(DefaultIncrementalCanvasAreaRender)), __param$1(4, inject(LayerService)), __param$1(5, inject(ContributionProvider)), __param$1(5, named(DrawItemInterceptor)), __metadata$4("design:paramtypes", [Array, Object, Object, Object, Object, Object])], DefaultIncrementalDrawContribution);
 
-  var __decorate$8 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -17945,9 +18626,9 @@
     }]);
     return DefaultCanvasRect3dRender;
   }(BaseRender);
-  DefaultCanvasRect3dRender = __decorate$8([injectable()], DefaultCanvasRect3dRender);
+  DefaultCanvasRect3dRender = __decorate$d([injectable()], DefaultCanvasRect3dRender);
 
-  var __decorate$7 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -18029,9 +18710,9 @@
     }]);
     return DefaultCanvasRichTextRender;
   }(BaseRender);
-  DefaultCanvasRichTextRender = __decorate$7([injectable()], DefaultCanvasRichTextRender);
+  DefaultCanvasRichTextRender = __decorate$c([injectable()], DefaultCanvasRichTextRender);
 
-  var __decorate$6 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -18068,9 +18749,9 @@
     }]);
     return DefaultCanvasGlyphRender;
   }();
-  DefaultCanvasGlyphRender = __decorate$6([injectable()], DefaultCanvasGlyphRender);
+  DefaultCanvasGlyphRender = __decorate$b([injectable()], DefaultCanvasGlyphRender);
 
-  var __decorate$5 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -18196,9 +18877,9 @@
     }]);
     return DefaultCanvasArc3DRender;
   }(BaseRender);
-  DefaultCanvasArc3DRender = __decorate$5([injectable()], DefaultCanvasArc3DRender);
+  DefaultCanvasArc3DRender = __decorate$a([injectable()], DefaultCanvasArc3DRender);
 
-  var __decorate$4 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$9 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -18323,9 +19004,9 @@
     }]);
     return DefaultCanvasPyramid3dRender;
   }(BaseRender);
-  DefaultCanvasPyramid3dRender = __decorate$4([injectable()], DefaultCanvasPyramid3dRender);
+  DefaultCanvasPyramid3dRender = __decorate$9([injectable()], DefaultCanvasPyramid3dRender);
 
-  var __decorate$3 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$8 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -18343,7 +19024,7 @@
     }
     return _createClass(DefaultPolygonBackgroundRenderContribution);
   }(DefaultBaseBackgroundRenderContribution);
-  DefaultPolygonBackgroundRenderContribution = __decorate$3([injectable()], DefaultPolygonBackgroundRenderContribution);
+  DefaultPolygonBackgroundRenderContribution = __decorate$8([injectable()], DefaultPolygonBackgroundRenderContribution);
   var DefaultPolygonTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
     _inherits(DefaultPolygonTextureRenderContribution, _DefaultBaseTextureRe);
     var _super2 = _createSuper(DefaultPolygonTextureRenderContribution);
@@ -18355,9 +19036,9 @@
     }
     return _createClass(DefaultPolygonTextureRenderContribution);
   }(DefaultBaseTextureRenderContribution);
-  DefaultPolygonTextureRenderContribution = __decorate$3([injectable()], DefaultPolygonTextureRenderContribution);
+  DefaultPolygonTextureRenderContribution = __decorate$8([injectable()], DefaultPolygonTextureRenderContribution);
 
-  var __decorate$2 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$7 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -18375,7 +19056,7 @@
     }
     return _createClass(DefaultPathBackgroundRenderContribution);
   }(DefaultBaseBackgroundRenderContribution);
-  DefaultPathBackgroundRenderContribution = __decorate$2([injectable()], DefaultPathBackgroundRenderContribution);
+  DefaultPathBackgroundRenderContribution = __decorate$7([injectable()], DefaultPathBackgroundRenderContribution);
   var DefaultPathTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
     _inherits(DefaultPathTextureRenderContribution, _DefaultBaseTextureRe);
     var _super2 = _createSuper(DefaultPathTextureRenderContribution);
@@ -18387,9 +19068,9 @@
     }
     return _createClass(DefaultPathTextureRenderContribution);
   }(DefaultBaseTextureRenderContribution);
-  DefaultPathTextureRenderContribution = __decorate$2([injectable()], DefaultPathTextureRenderContribution);
+  DefaultPathTextureRenderContribution = __decorate$7([injectable()], DefaultPathTextureRenderContribution);
 
-  var __decorate$1 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$6 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
       r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -18407,7 +19088,7 @@
     }
     return _createClass(DefaultAreaBackgroundRenderContribution);
   }(DefaultBaseBackgroundRenderContribution);
-  DefaultAreaBackgroundRenderContribution = __decorate$1([injectable()], DefaultAreaBackgroundRenderContribution);
+  DefaultAreaBackgroundRenderContribution = __decorate$6([injectable()], DefaultAreaBackgroundRenderContribution);
   var DefaultAreaTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
     _inherits(DefaultAreaTextureRenderContribution, _DefaultBaseTextureRe);
     var _super2 = _createSuper(DefaultAreaTextureRenderContribution);
@@ -18465,7 +19146,7 @@
     }]);
     return DefaultAreaTextureRenderContribution;
   }(DefaultBaseTextureRenderContribution);
-  DefaultAreaTextureRenderContribution = __decorate$1([injectable()], DefaultAreaTextureRenderContribution);
+  DefaultAreaTextureRenderContribution = __decorate$6([injectable()], DefaultAreaTextureRenderContribution);
 
   var renderModule = new ContainerModule(function (bind) {
     bind(DefaultDrawContribution).toSelf(), bind(DrawContribution).toService(DefaultDrawContribution), bind(DefaultIncrementalDrawContribution).toSelf(), bind(IncrementalDrawContribution).toService(DefaultIncrementalDrawContribution), bind(DefaultRenderSelector).toSelf(), bind(RenderSelector).toService(DefaultRenderSelector), bind(DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(DefaultCanvasCircleRender), bind(GraphicRender).to(DefaultCanvasCircleRender), bind(DefaultCircleRenderContribution).toSelf().inSingletonScope(), bind(DefaultCircleBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultCircleTextureRenderContribution).toSelf().inSingletonScope(), bind(CircleRenderContribution).toService(DefaultCircleRenderContribution), bind(CircleRenderContribution).toService(DefaultCircleBackgroundRenderContribution), bind(CircleRenderContribution).toService(DefaultCircleTextureRenderContribution), bindContributionProvider(bind, CircleRenderContribution), bind(DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(DefaultCanvasRectRender), bind(GraphicRender).to(DefaultCanvasRectRender), bind(DefaultCanvasRect3dRender).toSelf().inSingletonScope(), bind(Rect3DRender).toService(DefaultCanvasRect3dRender), bind(GraphicRender).toService(Rect3DRender), bind(DefaultRectRenderContribution).toSelf().inSingletonScope(), bind(DefaultRectBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultRectTextureRenderContribution).toSelf().inSingletonScope(), bind(SplitRectBeforeRenderContribution).toSelf().inSingletonScope(), bind(SplitRectAfterRenderContribution).toSelf().inSingletonScope(), bind(RectRenderContribution).toService(DefaultRectRenderContribution), bind(RectRenderContribution).toService(DefaultRectBackgroundRenderContribution), bind(RectRenderContribution).toService(DefaultRectTextureRenderContribution), bind(RectRenderContribution).toService(SplitRectBeforeRenderContribution), bind(RectRenderContribution).toService(SplitRectAfterRenderContribution), bindContributionProvider(bind, RectRenderContribution), bind(DefaultCanvasTextRender).toSelf().inSingletonScope(), bind(TextRender).to(DefaultCanvasTextRender), bind(GraphicRender).to(DefaultCanvasTextRender), bindContributionProvider(bind, TextRenderContribution), bind(DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(DefaultCanvasPathRender), bind(GraphicRender).to(DefaultCanvasPathRender), bind(DefaultPathBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultPathTextureRenderContribution).toSelf().inSingletonScope(), bind(PathRenderContribution).toService(DefaultPathBackgroundRenderContribution), bind(PathRenderContribution).toService(DefaultPathTextureRenderContribution), bindContributionProvider(bind, PathRenderContribution), bind(DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(DefaultCanvasSymbolRender), bind(GraphicRender).to(DefaultCanvasSymbolRender), bind(DefaultSymbolRenderContribution).toSelf().inSingletonScope(), bind(DefaultSymbolBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultSymbolTextureRenderContribution).toSelf().inSingletonScope(), bind(SymbolRenderContribution).toService(DefaultSymbolRenderContribution), bind(SymbolRenderContribution).toService(DefaultSymbolBackgroundRenderContribution), bind(SymbolRenderContribution).toService(DefaultSymbolTextureRenderContribution), bindContributionProvider(bind, SymbolRenderContribution), bind(DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(DefaultCanvasArcRender), bind(GraphicRender).to(DefaultCanvasArcRender), bind(DefaultCanvasArc3DRender).toSelf().inSingletonScope(), bind(Arc3dRender).toService(DefaultCanvasArc3DRender), bind(GraphicRender).toService(Arc3dRender), bind(DefaultArcRenderContribution).toSelf().inSingletonScope(), bind(DefaultArcBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultArcTextureRenderContribution).toSelf().inSingletonScope(), bind(ArcRenderContribution).toService(DefaultArcRenderContribution), bind(ArcRenderContribution).toService(DefaultArcBackgroundRenderContribution), bind(ArcRenderContribution).toService(DefaultArcTextureRenderContribution), bindContributionProvider(bind, ArcRenderContribution), bind(DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(DefaultCanvasLineRender), bind(GraphicRender).to(DefaultCanvasLineRender), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope(), bind(DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(DefaultCanvasAreaRender), bind(GraphicRender).to(DefaultCanvasAreaRender), bind(DefaultAreaBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultAreaTextureRenderContribution).toSelf().inSingletonScope(), bind(AreaRenderContribution).toService(DefaultAreaBackgroundRenderContribution), bind(AreaRenderContribution).toService(DefaultAreaTextureRenderContribution), bindContributionProvider(bind, AreaRenderContribution), bind(DefaultCanvasGroupRender).toSelf().inSingletonScope(), bind(GroupRender).to(DefaultCanvasGroupRender), bind(GraphicRender).to(DefaultCanvasGroupRender), bind(DefaultGroupBackgroundRenderContribution).toSelf().inSingletonScope(), bind(GroupRenderContribution).toService(DefaultGroupBackgroundRenderContribution), bindContributionProvider(bind, GroupRenderContribution), bind(DefaultCanvasPolygonRender).toSelf().inSingletonScope(), bind(PolygonRender).to(DefaultCanvasPolygonRender), bind(GraphicRender).to(DefaultCanvasPolygonRender), bind(DefaultPolygonBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultPolygonTextureRenderContribution).toSelf().inSingletonScope(), bind(PolygonRenderContribution).toService(DefaultPolygonBackgroundRenderContribution), bind(PolygonRenderContribution).toService(DefaultPolygonTextureRenderContribution), bindContributionProvider(bind, PolygonRenderContribution), bind(DefaultCanvasGlyphRender).toSelf().inSingletonScope(), bind(GlyphRender).toService(DefaultCanvasGlyphRender), bind(GraphicRender).toService(GlyphRender), bind(DefaultCanvasImageRender).toSelf().inSingletonScope(), bind(ImageRender).toService(DefaultCanvasImageRender), bind(GraphicRender).toService(ImageRender), bind(DefaultImageBackgroundRenderContribution).toSelf().inSingletonScope(), bind(ImageRenderContribution).toService(DefaultImageBackgroundRenderContribution), bindContributionProvider(bind, ImageRenderContribution), bind(DefaultCanvasRichTextRender).toSelf().inSingletonScope(), bind(RichTextRender).toService(DefaultCanvasRichTextRender), bind(GraphicRender).toService(RichTextRender), bind(DefaultCanvasPyramid3dRender).toSelf().inSingletonScope(), bind(Pyramid3dRender).toService(DefaultCanvasPyramid3dRender), bind(GraphicRender).toService(Pyramid3dRender), bind(DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bind(TextRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(ArcRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(PathRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(SymbolRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(RectRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(ImageRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(CircleRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(AreaRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(ShadowRootDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(ShadowRootDrawItemInterceptorContribution), bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bind(Canvas3DDrawItemInterceptor).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(Canvas3DDrawItemInterceptor), bind(InteractiveDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(InteractiveDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
@@ -18488,148 +19169,982 @@
   var layerService = container.get(LayerService);
   application.layerService = layerService;
 
-  const GROUP_ATTRIBUTES = [
-      'x',
-      'y',
-      'dx',
-      'dy',
-      'scaleX',
-      'scaleY',
-      'angle',
-      'anchor',
-      'postMatrix',
-      'visible',
-      'clip',
-      'pickable',
-      'childrenPickable',
-      'zIndex',
-      'cursor'
-  ];
-  class AbstractComponent extends Group {
-      constructor(attributes, mode = '2d') {
-          super(attributes);
-          this.mode = mode;
-          this.setTheme({
-              common: {
-                  strokeBoundsBuffer: 0
-              }
-          });
-          this.attribute = attributes;
-          this.onSetStage(() => {
-              this.render();
-              this.bindEvents();
-          });
+  new vutils.AABBBounds();
+
+  new vutils.AABBBounds();
+
+  var defaultTicker = new DefaultTicker();
+  defaultTicker.addTimeline(defaultTimeline);
+  defaultTicker.setFPS(60);
+
+  var params;
+  !function (params) {
+    params[params.W = 1] = "W", params[params.H = 2] = "H", params[params.WH = 3] = "WH";
+  }(params || (params = {}));
+
+  var __decorate$5 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      var d,
+        c = arguments.length,
+        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    },
+    __metadata$3 = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    };
+  var initMatrix = new vutils.Matrix(1, 0, 0, 1, 0, 0),
+    globalPoint = {
+      x: 0,
+      y: 0
+    };
+  var EmptyContext2d = /*#__PURE__*/function () {
+    function EmptyContext2d(canvas, dpr) {
+      _classCallCheck(this, EmptyContext2d);
+      this.matrix = new vutils.Matrix(1, 0, 0, 1, 0, 0), this.stack = [], this.dpr = dpr, this.applyedMatrix = new vutils.Matrix(1, 0, 0, 1, 0, 0), this.path = new CustomPath2D();
+    }
+    _createClass(EmptyContext2d, [{
+      key: "nativeContext",
+      get: function get() {
+        return this.path;
       }
-      setAttribute(key, value, forceUpdateTag) {
-          if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(value)) {
-              vutils.merge(this.attribute[key], value);
-          }
-          else {
-              this.attribute[key] = value;
-          }
-          if (!GROUP_ATTRIBUTES.includes(key)) {
-              this.render();
-          }
-          this.valid = this.isValid();
-          if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTag(key))) {
-              this.addUpdateShapeAndBoundsTag();
-          }
-          else {
-              this.addUpdateBoundTag();
-          }
-          this.addUpdatePositionTag();
-          this.onAttributeUpdate();
+    }, {
+      key: "getCanvas",
+      value: function getCanvas() {
+        throw new Error("不支持getCanvas");
       }
-      setAttributes(params, forceUpdateTag) {
-          const keys = Object.keys(params);
-          this._mergeAttributes(params, keys);
-          if (!keys.every(key => GROUP_ATTRIBUTES.includes(key))) {
-              this.render();
-          }
-          this.valid = this.isValid();
-          if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTags(keys))) {
-              this.addUpdateShapeAndBoundsTag();
-          }
-          else {
-              this.addUpdateBoundTag();
-          }
-          this.addUpdatePositionTag();
-          this.onAttributeUpdate();
+    }, {
+      key: "getContext",
+      value: function getContext() {
+        throw new Error("不支持getContext");
       }
-      _mergeAttributes(params, keys) {
-          if (vutils.isNil(keys)) {
-              keys = Object.keys(params);
-          }
-          for (let i = 0; i < keys.length; i++) {
-              const key = keys[i];
-              if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(params[key])) {
-                  vutils.merge(this.attribute[key], params[key]);
-              }
-              else {
-                  this.attribute[key] = params[key];
-              }
-          }
+    }, {
+      key: "setTransformForCurrent",
+      value: function setTransformForCurrent() {
+        var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
+        !force && this.applyedMatrix.equalToMatrix(this.matrix) || (this.applyedMatrix = this.cloneMatrix(this.matrix));
       }
-      bindEvents() {
+    }, {
+      key: "currentMatrix",
+      get: function get() {
+        return this.matrix;
       }
-      _getNodeId(id) {
-          return `${this.id}-${this.name}-${id}`;
+    }, {
+      key: "cloneMatrix",
+      value: function cloneMatrix(m) {
+        return matrixAllocate.allocateByObj(m);
       }
-  }
-
-  class ScrollBar extends AbstractComponent {
-      constructor(attributes) {
-          super(vutils.merge({}, ScrollBar.defaultAttributes, attributes));
-          this.name = 'scrollbar';
-          this._onRailPointerDown = (e) => {
-              var _a, _b;
-              const { viewX, viewY } = e;
-              const { direction, width, height, range } = this.attribute;
-              const sliderSize = this._sliderSize;
-              const [min, max] = this._getScrollRange();
-              let currentScrollValue;
-              if (direction === 'vertical') {
-                  const relativeY = viewY - this._viewPosition.y;
-                  const currentYPos = vutils.clamp(relativeY - sliderSize / 2, min, max);
-                  currentScrollValue = relativeY / height;
-                  this._slider.setAttribute('y', currentYPos, true);
-              }
-              else {
-                  const relativeX = viewX - this._viewPosition.x;
-                  const currentXPos = vutils.clamp(relativeX - sliderSize / 2, min, max);
-                  currentScrollValue = relativeX / width;
-                  this._slider.setAttribute('x', currentXPos, true);
-              }
-              this.setScrollRange([currentScrollValue - (range[1] - range[0]) / 2, currentScrollValue + (range[1] - range[0]) / 2], false);
-              if (!((_a = this.stage) === null || _a === void 0 ? void 0 : _a.autoRender)) {
-                  (_b = this.stage) === null || _b === void 0 ? void 0 : _b.renderNextFrame();
-              }
-          };
-          this._onSliderPointerDown = (e) => {
-              e.stopPropagation();
-              const { direction } = this.attribute;
-              this._prePos = direction === 'horizontal' ? e.clientX : e.clientY;
-              if (vglobal.env === 'browser') {
-                  vglobal.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
-                  vglobal.addEventListener('pointerup', this._onSliderPointerUp);
-              }
-              else {
-                  this._slider.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
-                  this._slider.addEventListener('pointerup', this._onSliderPointerUp);
-                  this._slider.addEventListener('pointerupoutside', this._onSliderPointerUp);
-              }
-          };
-          this._onSliderPointerMove = (e) => {
-              e.stopPropagation();
-              const { direction } = this.attribute;
-              let currentScrollValue;
-              let currentPos;
-              let delta = 0;
-              const preScrollRange = this.getScrollRange();
-              const { width, height } = this._getSliderRenderBounds();
-              if (direction === 'vertical') {
-                  currentPos = e.clientY;
-                  delta = currentPos - this._prePos;
+    }, {
+      key: "clear",
+      value: function clear() {
+        this.save(), this.resetTransform(), this.restore();
+      }
+    }, {
+      key: "restore",
+      value: function restore() {
+        this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop(), this.setTransformForCurrent());
+      }
+    }, {
+      key: "highPerformanceRestore",
+      value: function highPerformanceRestore() {
+        this.stack.length > 0 && (matrixAllocate.free(this.matrix), this.matrix = this.stack.pop());
+      }
+    }, {
+      key: "rotate",
+      value: function rotate(rad) {
+        var setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+        this.matrix.rotate(rad), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "save",
+      value: function save() {
+        var matrix = this.cloneMatrix(this.matrix);
+        this.stack.push(matrix);
+      }
+    }, {
+      key: "highPerformanceSave",
+      value: function highPerformanceSave() {
+        var matrix = this.cloneMatrix(this.matrix);
+        this.stack.push(matrix);
+      }
+    }, {
+      key: "scale",
+      value: function scale(sx, sy) {
+        var setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+        this.matrix.scale(sx, sy), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "setScale",
+      value: function setScale(sx, sy) {
+        var setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+        this.matrix.setScale(sx, sy), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "scalePoint",
+      value: function scalePoint(sx, sy, px, py) {
+        var setTransform = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !0;
+        this.translate(px, py, !1), this.scale(sx, sy, !1), this.translate(-px, -py, !1), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "setTransform",
+      value: function setTransform(a, b, c, d, e, f) {
+        var _setTransform = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !0;
+        var dpr = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : this.dpr;
+        this.matrix.setValue(dpr * a, dpr * b, dpr * c, dpr * d, dpr * e, dpr * f), _setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "setTransformFromMatrix",
+      value: function setTransformFromMatrix(matrix) {
+        var setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+        var dpr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.dpr;
+        this.matrix.setValue(matrix.a * dpr, matrix.b * dpr, matrix.c * dpr, matrix.d * dpr, matrix.e * dpr, matrix.f * dpr), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "resetTransform",
+      value: function resetTransform() {
+        var setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+        var dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
+        this.setTransform(dpr, 0, 0, dpr, 0, 0), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "transform",
+      value: function transform(a, b, c, d, e, f) {
+        var setTransform = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !0;
+        this.matrix.multiply(a, b, c, d, e, f), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "transformFromMatrix",
+      value: function transformFromMatrix(matrix, setTransform) {
+        this.matrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "translate",
+      value: function translate(x, y) {
+        var setTransform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+        this.matrix.translate(x, y), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "rotateDegrees",
+      value: function rotateDegrees(deg) {
+        var setTransform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+        var rad = deg * Math.PI / 180;
+        this.rotate(rad, setTransform);
+      }
+    }, {
+      key: "rotateAbout",
+      value: function rotateAbout(rad, x, y) {
+        var setTransform = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !0;
+        this.translate(x, y, !1), this.rotate(rad, !1), this.translate(-x, -y, !1), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "rotateDegreesAbout",
+      value: function rotateDegreesAbout(deg, x, y) {
+        var setTransform = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !0;
+        this.translate(x, y, !1), this.rotateDegrees(deg, !1), this.translate(-x, -y, !1), setTransform && this.setTransformForCurrent();
+      }
+    }, {
+      key: "beginPath",
+      value: function beginPath() {
+        this.path.clear();
+      }
+    }, {
+      key: "clip",
+      value: function clip(path, fillRule) {}
+    }, {
+      key: "arc",
+      value: function arc(x, y, radius, startAngle, endAngle, anticlockwise) {
+        this.path.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+      }
+    }, {
+      key: "arcTo",
+      value: function arcTo(x1, y1, x2, y2, radiusX) {
+        this.path.arcTo(x1, y1, x2, y2, radiusX);
+      }
+    }, {
+      key: "bezierCurveTo",
+      value: function bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+        this.path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+      }
+    }, {
+      key: "closePath",
+      value: function closePath() {
+        this.path.closePath();
+      }
+    }, {
+      key: "ellipse",
+      value: function ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {}
+    }, {
+      key: "lineTo",
+      value: function lineTo(x, y) {
+        this.path.lineTo(x, y);
+      }
+    }, {
+      key: "moveTo",
+      value: function moveTo(x, y) {
+        this.path.moveTo(x, y);
+      }
+    }, {
+      key: "quadraticCurveTo",
+      value: function quadraticCurveTo(cpx, cpy, x, y) {
+        this.path.quadraticCurveTo(cpx, cpy, x, y);
+      }
+    }, {
+      key: "rect",
+      value: function rect(x, y, w, h) {
+        this.path.rect(x, y, w, h);
+      }
+    }, {
+      key: "createImageData",
+      value: function createImageData(imageDataOrSw, sh) {
+        return null;
+      }
+    }, {
+      key: "createLinearGradient",
+      value: function createLinearGradient(x0, y0, x1, y1) {
+        throw new Error("不支持createLinearGradient");
+      }
+    }, {
+      key: "createPattern",
+      value: function createPattern(image, repetition) {
+        throw new Error("不支持createPattern");
+      }
+    }, {
+      key: "createRadialGradient",
+      value: function createRadialGradient(x0, y0, r0, x1, y1, r1) {
+        throw new Error("不支持createRadialGradient");
+      }
+    }, {
+      key: "createConicGradient",
+      value: function createConicGradient(x, y, startAngle, endAngle) {
+        return null;
+      }
+    }, {
+      key: "fill",
+      value: function fill(path, fillRule) {}
+    }, {
+      key: "fillRect",
+      value: function fillRect(x, y, width, height) {
+        this.path.rect(x, y, width, height);
+      }
+    }, {
+      key: "clearRect",
+      value: function clearRect(x, y, w, h) {}
+    }, {
+      key: "fillText",
+      value: function fillText(text, x, y) {}
+    }, {
+      key: "getImageData",
+      value: function getImageData(sx, sy, sw, sh) {
+        return null;
+      }
+    }, {
+      key: "getLineDash",
+      value: function getLineDash() {
+        return [];
+      }
+    }, {
+      key: "isPointInPath",
+      value: function isPointInPath(x, y) {
+        return this.matrix.transformPoint({
+          x: x,
+          y: y
+        }, globalPoint), contain(this.path.commandList, globalPoint.x, globalPoint.y);
+      }
+    }, {
+      key: "isPointInStroke",
+      value: function isPointInStroke(x, y) {
+        if (!this.lineWidth) return !1;
+        this.matrix.transformPoint({
+          x: x,
+          y: y
+        }, globalPoint);
+        var lineWidth = getScaledStroke(this, this.lineWidth, this.dpr);
+        return containStroke(this.path.commandList, lineWidth, globalPoint.x, globalPoint.y);
+      }
+    }, {
+      key: "measureText",
+      value: function measureText(text) {
+        throw new Error("不支持measureText");
+      }
+    }, {
+      key: "putImageData",
+      value: function putImageData(imagedata, dx, dy) {
+        throw new Error("不支持measureText");
+      }
+    }, {
+      key: "setLineDash",
+      value: function setLineDash(segments) {}
+    }, {
+      key: "stroke",
+      value: function stroke(path) {}
+    }, {
+      key: "strokeRect",
+      value: function strokeRect(x, y, width, height) {
+        this.path.rect(x, y, width, height);
+      }
+    }, {
+      key: "strokeText",
+      value: function strokeText(text, x, y) {}
+    }, {
+      key: "drawImage",
+      value: function drawImage() {}
+    }, {
+      key: "setCommonStyle",
+      value: function setCommonStyle(params, attribute, offsetX, offsetY, defaultParams) {}
+    }, {
+      key: "_setCommonStyle",
+      value: function _setCommonStyle(params, offsetX, offsetY, defaultParams) {}
+    }, {
+      key: "setStrokeStyle",
+      value: function setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {}
+    }, {
+      key: "_setStrokeStyle",
+      value: function _setStrokeStyle(params, offsetX, offsetY, defaultParams) {}
+    }, {
+      key: "setTextStyleWithoutAlignBaseline",
+      value: function setTextStyleWithoutAlignBaseline(params, defaultParams) {}
+    }, {
+      key: "setTextStyle",
+      value: function setTextStyle(params, defaultParams) {}
+    }, {
+      key: "draw",
+      value: function draw() {}
+    }, {
+      key: "clearMatrix",
+      value: function clearMatrix() {
+        var setTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+        var dpr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.dpr;
+        this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+      }
+    }, {
+      key: "onlyTranslate",
+      value: function onlyTranslate() {
+        var dpr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.dpr;
+        return this.matrix.a === dpr && 0 === this.matrix.b && 0 === this.matrix.c && this.matrix.d === dpr;
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        this.stack.forEach(function (m) {
+          return matrixAllocate.free(m);
+        }), this.stack.length = 0;
+      }
+    }]);
+    return EmptyContext2d;
+  }();
+  EmptyContext2d = __decorate$5([injectable(), __metadata$3("design:paramtypes", [Object, Number])], EmptyContext2d);
+
+  var __decorate$4 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      var d,
+        c = arguments.length,
+        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    },
+    __metadata$2 = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    };
+  var DefaultConfig = {
+    WIDTH: 500,
+    HEIGHT: 500,
+    DPR: 1
+  };
+  var BaseCanvas = /*#__PURE__*/function () {
+    function BaseCanvas(params) {
+      _classCallCheck(this, BaseCanvas);
+      var nativeCanvas = params.nativeCanvas,
+        _params$width = params.width,
+        width = _params$width === void 0 ? DefaultConfig.WIDTH : _params$width,
+        _params$height = params.height,
+        height = _params$height === void 0 ? DefaultConfig.HEIGHT : _params$height,
+        _params$dpr = params.dpr,
+        dpr = _params$dpr === void 0 ? DefaultConfig.DPR : _params$dpr,
+        x = params.x,
+        y = params.y,
+        _params$canvasControl = params.canvasControled,
+        canvasControled = _params$canvasControl === void 0 ? !0 : _params$canvasControl;
+      this._x = null != x ? x : 0, this._y = null != y ? y : 0, this._pixelWidth = width * dpr, this._pixelHeight = height * dpr, this._visiable = !1 !== params.visiable, this.controled = canvasControled, this._displayWidth = width, this._displayHeight = height, this._dpr = dpr, this._nativeCanvas = nativeCanvas, this._id = nativeCanvas.id, this.init(params);
+    }
+    _createClass(BaseCanvas, [{
+      key: "displayWidth",
+      get: function get() {
+        return this._pixelWidth / this._dpr;
+      }
+    }, {
+      key: "displayHeight",
+      get: function get() {
+        return this._pixelHeight / this._dpr;
+      }
+    }, {
+      key: "id",
+      get: function get() {
+        return this._id;
+      }
+    }, {
+      key: "x",
+      get: function get() {
+        return this._x;
+      },
+      set: function set(_x) {
+        this._x = _x;
+      }
+    }, {
+      key: "y",
+      get: function get() {
+        return this._y;
+      },
+      set: function set(_y) {
+        this._y = _y;
+      }
+    }, {
+      key: "nativeCanvas",
+      get: function get() {
+        return this._nativeCanvas;
+      }
+    }, {
+      key: "width",
+      get: function get() {
+        return this._pixelWidth;
+      },
+      set: function set(width) {
+        this._pixelWidth = width, this._displayWidth = width / (this._dpr || 1);
+      }
+    }, {
+      key: "height",
+      get: function get() {
+        return this._pixelHeight;
+      },
+      set: function set(height) {
+        this._pixelHeight = height, this._displayHeight = height / (this._dpr || 1);
+      }
+    }, {
+      key: "getContext",
+      value: function getContext(str) {
+        return this._context;
+      }
+    }, {
+      key: "visiable",
+      get: function get() {
+        return this._visiable;
+      },
+      set: function set(visiable) {
+        this._visiable = visiable, visiable ? this.show() : this.hide();
+      }
+    }, {
+      key: "dpr",
+      get: function get() {
+        return this._dpr;
+      },
+      set: function set(dpr) {
+        this._dpr = dpr, this.resize(this._displayWidth, this._displayHeight);
+      }
+    }, {
+      key: "getNativeCanvas",
+      value: function getNativeCanvas() {
+        return this._nativeCanvas;
+      }
+    }, {
+      key: "hide",
+      value: function hide() {}
+    }, {
+      key: "show",
+      value: function show() {}
+    }, {
+      key: "applyPosition",
+      value: function applyPosition() {}
+    }, {
+      key: "resetStyle",
+      value: function resetStyle(params) {}
+    }, {
+      key: "resize",
+      value: function resize(width, height) {}
+    }, {
+      key: "toDataURL",
+      value: function toDataURL(mimeType, quality) {
+        return "";
+      }
+    }, {
+      key: "readPixels",
+      value: function readPixels(x, y, w, h) {
+        return this._context.getImageData(x, y, w, h);
+      }
+    }, {
+      key: "convertToBlob",
+      value: function convertToBlob(options) {
+        throw new Error("暂未实现");
+      }
+    }, {
+      key: "transferToImageBitmap",
+      value: function transferToImageBitmap() {
+        throw new Error("暂未实现");
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        this.controled && this._nativeCanvas.parentElement && this._nativeCanvas.parentElement.removeChild(this._nativeCanvas);
+      }
+    }]);
+    return BaseCanvas;
+  }();
+  BaseCanvas.env = "browser", BaseCanvas = __decorate$4([injectable(), __metadata$2("design:paramtypes", [Object])], BaseCanvas);
+
+  var __decorate$3 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var d,
+      c = arguments.length,
+      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+    if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  var BaseEnvContribution = /*#__PURE__*/function () {
+    function BaseEnvContribution() {
+      _classCallCheck(this, BaseEnvContribution);
+    }
+    _createClass(BaseEnvContribution, [{
+      key: "configure",
+      value: function configure(service) {
+        service.env === this.type && service.setActiveEnvContribution(this);
+      }
+    }, {
+      key: "getNativeAABBBounds",
+      value: function getNativeAABBBounds(dom) {
+        return new vutils.AABBBounds();
+      }
+    }, {
+      key: "removeDom",
+      value: function removeDom(dom) {
+        return !1;
+      }
+    }, {
+      key: "createDom",
+      value: function createDom(params) {
+        return null;
+      }
+    }, {
+      key: "getDynamicCanvasCount",
+      value: function getDynamicCanvasCount() {
+        return 999;
+      }
+    }, {
+      key: "getStaticCanvasCount",
+      value: function getStaticCanvasCount() {
+        return 999;
+      }
+    }, {
+      key: "getElementById",
+      value: function getElementById(str) {
+        return document.getElementById(str);
+      }
+    }, {
+      key: "getRootElement",
+      value: function getRootElement() {
+        return document.body;
+      }
+    }, {
+      key: "loadJson",
+      value: function loadJson(url) {
+        var jsonPromise = fetch(url).then(function (data) {
+          return data.json();
+        });
+        return jsonPromise.then(function (json) {
+          return {
+            data: json,
+            state: "success"
+          };
+        })["catch"](function () {
+          return {
+            data: null,
+            state: "fail"
+          };
+        }), jsonPromise;
+      }
+    }, {
+      key: "loadArrayBuffer",
+      value: function loadArrayBuffer(url) {
+        return fetch(url).then(function (data) {
+          return data.arrayBuffer();
+        }).then(function (arrayBuffer) {
+          return {
+            data: arrayBuffer,
+            loadState: "success"
+          };
+        })["catch"](function () {
+          return {
+            data: null,
+            loadState: "fail"
+          };
+        });
+      }
+    }, {
+      key: "loadBlob",
+      value: function loadBlob(url) {
+        return fetch(url).then(function (data) {
+          return data.blob();
+        }).then(function (blob) {
+          return {
+            data: blob,
+            loadState: "success"
+          };
+        })["catch"](function () {
+          return {
+            data: null,
+            loadState: "fail"
+          };
+        });
+      }
+    }, {
+      key: "getElementTop",
+      value: function getElementTop(dom, baseWindow) {
+        return 0;
+      }
+    }, {
+      key: "getElementLeft",
+      value: function getElementLeft(dom, baseWindow) {
+        return 0;
+      }
+    }, {
+      key: "getElementTopLeft",
+      value: function getElementTopLeft(dom, baseWindow) {
+        return {
+          top: 0,
+          left: 0
+        };
+      }
+    }]);
+    return BaseEnvContribution;
+  }();
+  BaseEnvContribution = __decorate$3([injectable()], BaseEnvContribution);
+
+  var __decorate$2 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      var d,
+        c = arguments.length,
+        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    },
+    __metadata$1 = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    };
+  var BaseWindowHandlerContribution = /*#__PURE__*/function () {
+    function BaseWindowHandlerContribution() {
+      _classCallCheck(this, BaseWindowHandlerContribution);
+      this._uid = Generator.GenAutoIncrementId();
+    }
+    _createClass(BaseWindowHandlerContribution, [{
+      key: "onChange",
+      value: function onChange(cb) {
+        this._onChangeCb = cb;
+      }
+    }, {
+      key: "configure",
+      value: function configure(window, global) {
+        global.env === this.type && window.setWindowHandler(this);
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        this.releaseWindow();
+      }
+    }, {
+      key: "isVisible",
+      value: function isVisible(bbox) {
+        return !0;
+      }
+    }, {
+      key: "onVisibleChange",
+      value: function onVisibleChange(cb) {}
+    }, {
+      key: "getTopLeft",
+      value: function getTopLeft(baseWindow) {
+        return {
+          top: 0,
+          left: 0
+        };
+      }
+    }]);
+    return BaseWindowHandlerContribution;
+  }();
+  BaseWindowHandlerContribution = __decorate$2([injectable(), __metadata$1("design:paramtypes", [])], BaseWindowHandlerContribution);
+
+  var __decorate$1 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      var d,
+        c = arguments.length,
+        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    },
+    __metadata = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    },
+    __param = undefined && undefined.__param || function (paramIndex, decorator) {
+      return function (target, key) {
+        decorator(target, key, paramIndex);
+      };
+    };
+  var DefaultPickService = /*#__PURE__*/function () {
+    function DefaultPickService(global, pickItemInterceptorContributions) {
+      _classCallCheck(this, DefaultPickService);
+      this.global = global, this.pickItemInterceptorContributions = pickItemInterceptorContributions, this.type = "default";
+    }
+    _createClass(DefaultPickService, [{
+      key: "_init",
+      value: function _init() {
+        this.InterceptorContributions = this.pickItemInterceptorContributions.getContributions().sort(function (a, b) {
+          return a.order - b.order;
+        });
+      }
+    }, {
+      key: "pick",
+      value: function pick(graphics, point, params) {
+        var result = {
+          graphic: null,
+          group: null
+        };
+        params.pickerService = this;
+        var offsetX = 0,
+          offsetY = 0;
+        if (params && params.bounds) {
+          if (!params.bounds.contains(point.x, point.y)) return result;
+          offsetX = params.bounds.x1, offsetY = params.bounds.y1;
+        }
+        this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
+        var parentMatrix = new vutils.Matrix(1, 0, 0, 1, offsetX, offsetY);
+        var group;
+        for (var i = graphics.length - 1; i >= 0 && (result = graphics[i].isContainer ? this.pickGroup(graphics[i], point, parentMatrix, params) : this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
+        if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
+          var g = result.graphic;
+          for (; g.parent;) g = g.parent;
+          g.shadowHost && (result.params = {
+            shadowTarget: result.graphic
+          }, result.graphic = g.shadowHost);
+        }
+        return result;
+      }
+    }, {
+      key: "containsPoint",
+      value: function containsPoint(graphic, point, params) {
+        var _a;
+        return !!(null === (_a = this.pickItem(graphic, point, null, null != params ? params : {
+          pickContext: this.pickContext,
+          pickerService: this
+        })) || void 0 === _a ? void 0 : _a.graphic);
+      }
+    }, {
+      key: "pickGroup",
+      value: function pickGroup(group, point, parentMatrix, params) {
+        var _this = this;
+        var result = {
+          group: null,
+          graphic: null
+        };
+        if (!1 === group.attribute.visibleAll) return result;
+        var context = params.pickContext,
+          lastMatrix = context.modelMatrix;
+        if (context.camera) {
+          var m = group.transMatrix,
+            matrix = mat4Allocate.allocate();
+          if (mat3Tomat4(matrix, m), lastMatrix) {
+            if (matrix) {
+              var _m = mat4Allocate.allocate();
+              context.modelMatrix = multiplyMat4Mat4(_m, lastMatrix, matrix), mat4Allocate.free(matrix);
+            }
+          } else mat3Tomat4(matrix, group.globalTransMatrix), context.modelMatrix = matrix;
+        }
+        if (this.InterceptorContributions.length) for (var i = 0; i < this.InterceptorContributions.length; i++) {
+          var drawContribution = this.InterceptorContributions[i];
+          if (drawContribution.beforePickItem) {
+            var _result = drawContribution.beforePickItem(group, this, point, params, {
+              parentMatrix: parentMatrix
+            });
+            if (_result) return context.modelMatrix !== lastMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastMatrix, _result;
+          }
+        }
+        var transMatrix = group.transMatrix,
+          currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix),
+          newPoint = new vutils.Point(point.x, point.y);
+        currentGroupMatrix.transformPoint(newPoint, newPoint);
+        var insideGroup = group.AABBBounds.containsPoint(newPoint);
+        if (!insideGroup && !group.stage.camera) return result;
+        var pickedItem = this.pickItem(group, newPoint.clone(), parentMatrix, params);
+        pickedItem && pickedItem.graphic && (result.graphic = pickedItem.graphic, result.params = pickedItem.params);
+        var groupPicked = !1 !== group.attribute.pickable && insideGroup;
+        return currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), !1 === group.attribute.childrenPickable || pickedItem && pickedItem.graphic || foreach(group, DefaultAttribute.zIndex, function (graphic) {
+          if (graphic.isContainer) {
+            var _newPoint = new vutils.Point(point.x, point.y),
+              theme = getTheme(group).group,
+              _group$attribute = group.attribute,
+              _group$attribute$scro = _group$attribute.scrollX,
+              scrollX = _group$attribute$scro === void 0 ? theme.scrollX : _group$attribute$scro,
+              _group$attribute$scro2 = _group$attribute.scrollY,
+              scrollY = _group$attribute$scro2 === void 0 ? theme.scrollY : _group$attribute$scro2;
+            _newPoint.x -= scrollX, _newPoint.y -= scrollY, result = _this.pickGroup(graphic, _newPoint, currentGroupMatrix, params);
+          } else {
+            var _newPoint2 = new vutils.Point(point.x, point.y);
+            currentGroupMatrix.transformPoint(_newPoint2, _newPoint2);
+            var _theme = getTheme(group).group,
+              _group$attribute2 = group.attribute,
+              _group$attribute2$scr = _group$attribute2.scrollX,
+              _scrollX = _group$attribute2$scr === void 0 ? _theme.scrollX : _group$attribute2$scr,
+              _group$attribute2$scr2 = _group$attribute2.scrollY,
+              _scrollY = _group$attribute2$scr2 === void 0 ? _theme.scrollY : _group$attribute2$scr2;
+            _newPoint2.x -= _scrollX, _newPoint2.y -= _scrollY;
+            var _pickedItem = _this.pickItem(graphic, _newPoint2, parentMatrix, params);
+            _pickedItem && _pickedItem.graphic && (result.graphic = _pickedItem.graphic, result.params = _pickedItem.params);
+          }
+          return !!result.graphic || !!result.group;
+        }, !0, !!context.camera), context.modelMatrix !== lastMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastMatrix, result.graphic || result.group || !groupPicked || group.stage.camera || (result.group = group), matrixAllocate.free(currentGroupMatrix), result;
+      }
+    }, {
+      key: "selectPicker",
+      value: function selectPicker(graphic) {
+        var picker = this.pickerMap.get(graphic.numberType);
+        return picker || null;
+      }
+    }]);
+    return DefaultPickService;
+  }();
+  DefaultPickService = __decorate$1([injectable(), __param(0, inject(VGlobal)), __param(1, inject(ContributionProvider)), __param(1, named(PickItemInterceptor)), __metadata("design:paramtypes", [Object, Object])], DefaultPickService);
+
+  const GROUP_ATTRIBUTES = [
+      'x',
+      'y',
+      'dx',
+      'dy',
+      'scaleX',
+      'scaleY',
+      'angle',
+      'anchor',
+      'postMatrix',
+      'visible',
+      'clip',
+      'pickable',
+      'childrenPickable',
+      'zIndex',
+      'cursor'
+  ];
+  class AbstractComponent extends Group {
+      constructor(attributes, mode = '2d') {
+          super(attributes);
+          this.mode = mode;
+          this.setTheme({
+              common: {
+                  strokeBoundsBuffer: 0
+              }
+          });
+          this.attribute = attributes;
+          this.onSetStage(() => {
+              this.render();
+              this.bindEvents();
+          });
+      }
+      setAttribute(key, value, forceUpdateTag) {
+          if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(value)) {
+              vutils.merge(this.attribute[key], value);
+          }
+          else {
+              this.attribute[key] = value;
+          }
+          if (!GROUP_ATTRIBUTES.includes(key)) {
+              this.render();
+          }
+          this.valid = this.isValid();
+          if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTag(key))) {
+              this.addUpdateShapeAndBoundsTag();
+          }
+          else {
+              this.addUpdateBoundTag();
+          }
+          this.addUpdatePositionTag();
+          this.onAttributeUpdate();
+      }
+      setAttributes(params, forceUpdateTag) {
+          const keys = Object.keys(params);
+          this._mergeAttributes(params, keys);
+          if (!keys.every(key => GROUP_ATTRIBUTES.includes(key))) {
+              this.render();
+          }
+          this.valid = this.isValid();
+          if (!this.updateShapeAndBoundsTagSetted() && (forceUpdateTag || this.needUpdateTags(keys))) {
+              this.addUpdateShapeAndBoundsTag();
+          }
+          else {
+              this.addUpdateBoundTag();
+          }
+          this.addUpdatePositionTag();
+          this.onAttributeUpdate();
+      }
+      _mergeAttributes(params, keys) {
+          if (vutils.isNil(keys)) {
+              keys = Object.keys(params);
+          }
+          for (let i = 0; i < keys.length; i++) {
+              const key = keys[i];
+              if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(params[key])) {
+                  vutils.merge(this.attribute[key], params[key]);
+              }
+              else {
+                  this.attribute[key] = params[key];
+              }
+          }
+      }
+      bindEvents() {
+      }
+      _getNodeId(id) {
+          return `${this.id}-${this.name}-${id}`;
+      }
+  }
+
+  class ScrollBar extends AbstractComponent {
+      constructor(attributes) {
+          super(vutils.merge({}, ScrollBar.defaultAttributes, attributes));
+          this.name = 'scrollbar';
+          this._onRailPointerDown = (e) => {
+              var _a, _b;
+              const { viewX, viewY } = e;
+              const { direction, width, height, range } = this.attribute;
+              const sliderSize = this._sliderSize;
+              const [min, max] = this._getScrollRange();
+              let currentScrollValue;
+              if (direction === 'vertical') {
+                  const relativeY = viewY - this._viewPosition.y;
+                  const currentYPos = vutils.clamp(relativeY - sliderSize / 2, min, max);
+                  currentScrollValue = relativeY / height;
+                  this._slider.setAttribute('y', currentYPos, true);
+              }
+              else {
+                  const relativeX = viewX - this._viewPosition.x;
+                  const currentXPos = vutils.clamp(relativeX - sliderSize / 2, min, max);
+                  currentScrollValue = relativeX / width;
+                  this._slider.setAttribute('x', currentXPos, true);
+              }
+              this.setScrollRange([currentScrollValue - (range[1] - range[0]) / 2, currentScrollValue + (range[1] - range[0]) / 2], false);
+              if (!((_a = this.stage) === null || _a === void 0 ? void 0 : _a.autoRender)) {
+                  (_b = this.stage) === null || _b === void 0 ? void 0 : _b.renderNextFrame();
+              }
+          };
+          this._onSliderPointerDown = (e) => {
+              e.stopPropagation();
+              const { direction } = this.attribute;
+              this._prePos = direction === 'horizontal' ? e.clientX : e.clientY;
+              if (vglobal.env === 'browser') {
+                  vglobal.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
+                  vglobal.addEventListener('pointerup', this._onSliderPointerUp);
+              }
+              else {
+                  this._slider.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
+                  this._slider.addEventListener('pointerup', this._onSliderPointerUp);
+                  this._slider.addEventListener('pointerupoutside', this._onSliderPointerUp);
+              }
+          };
+          this._onSliderPointerMove = (e) => {
+              e.stopPropagation();
+              const { direction } = this.attribute;
+              let currentScrollValue;
+              let currentPos;
+              let delta = 0;
+              const preScrollRange = this.getScrollRange();
+              const { width, height } = this._getSliderRenderBounds();
+              if (direction === 'vertical') {
+                  currentPos = e.clientY;
+                  delta = currentPos - this._prePos;
                   currentScrollValue = delta / height;
               }
               else {
@@ -19735,6 +21250,12 @@
           this.activeEvent = 'onRegister';
           this._uid = Generator.GenAutoIncrementId();
           this.key = this.name + this._uid;
+          this.pointerlave = (e) => {
+              const { stage } = this.pluginService;
+              if (e.target === stage) {
+                  this.unpoptip(e);
+              }
+          };
           this.poptip = (e) => {
               const graphic = e.target;
               if (graphic.type !== 'text' || !graphic.cliped || graphic.isContainer || !graphic.attribute) {
@@ -19768,6 +21289,7 @@
           this.pluginService = context;
           const { stage } = this.pluginService;
           stage.addEventListener('pointerover', this.poptip);
+          stage.addEventListener('pointerleave', this.pointerlave);
       }
       setActiveGraphic(graphic, rerender) {
           this.activeGraphic = graphic;
@@ -19776,6 +21298,7 @@
       deactivate(context) {
           const { stage } = this.pluginService;
           stage.removeEventListener('pointerover', this.poptip);
+          stage.removeEventListener('pointerleave', this.pointerlave);
       }
   };
   PopTipForClipedTextPlugin = __decorate([
@@ -20221,51 +21744,239 @@
       if (minY < 0 && maxY - minY <= height) {
           dy = -minY;
       }
-      else if (maxY > height && minY - (maxY - height) >= 0) {
-          dy = height - maxY;
+      else if (maxY > height && minY - (maxY - height) >= 0) {
+          dy = height - maxY;
+      }
+      return { dx, dy };
+  }
+
+  const fadeIn = (textAttribute = {}) => {
+      var _a, _b, _c;
+      return {
+          from: {
+              opacity: 0,
+              fillOpacity: 0,
+              strokeOpacity: 0
+          },
+          to: {
+              opacity: (_a = textAttribute.opacity) !== null && _a !== void 0 ? _a : 1,
+              fillOpacity: (_b = textAttribute.fillOpacity) !== null && _b !== void 0 ? _b : 1,
+              strokeOpacity: (_c = textAttribute.strokeOpacity) !== null && _c !== void 0 ? _c : 1
+          }
+      };
+  };
+  const fadeOut = (textAttribute = {}) => {
+      var _a, _b, _c;
+      return {
+          from: {
+              opacity: (_a = textAttribute.opacity) !== null && _a !== void 0 ? _a : 1,
+              fillOpacity: (_b = textAttribute.fillOpacity) !== null && _b !== void 0 ? _b : 1,
+              strokeOpacity: (_c = textAttribute.strokeOpacity) !== null && _c !== void 0 ? _c : 1
+          },
+          to: {
+              opacity: 0,
+              fillOpacity: 0,
+              strokeOpacity: 0
+          }
+      };
+  };
+  const animationEffects = { fadeIn, fadeOut };
+  function getAnimationAttributes(textAttribute, type) {
+      var _a, _b;
+      return (_b = (_a = animationEffects[type]) === null || _a === void 0 ? void 0 : _a.call(animationEffects, textAttribute)) !== null && _b !== void 0 ? _b : { from: {}, to: {} };
+  }
+  const DefaultLabelAnimation = {
+      mode: 'same-time',
+      duration: 300,
+      easing: 'linear'
+  };
+
+  function polarToCartesian(point) {
+      if (!point.radius) {
+          return { x: 0, y: 0 };
+      }
+      return {
+          x: Math.cos(point.angle) * point.radius,
+          y: Math.sin(point.angle) * point.radius
+      };
+  }
+  function circlePoint(x0, y0, radius, radian) {
+      const offset = polarToCartesian({
+          radius,
+          angle: radian
+      });
+      return {
+          x: x0 + offset.x,
+          y: y0 + offset.y
+      };
+  }
+  function computeQuadrant(angle) {
+      angle = normalizeAngle(angle);
+      if (angle > 0 && angle <= Math.PI / 2) {
+          return 2;
+      }
+      else if (angle > Math.PI / 2 && angle <= Math.PI) {
+          return 3;
+      }
+      else if (angle > Math.PI && angle <= (3 * Math.PI) / 2) {
+          return 4;
+      }
+      return 1;
+  }
+  function normalizeAngle(angle) {
+      while (angle < 0) {
+          angle += Math.PI * 2;
+      }
+      while (angle >= Math.PI * 2) {
+          angle -= Math.PI * 2;
+      }
+      return angle;
+  }
+  function isQuadrantLeft(quadrant) {
+      return quadrant === 3 || quadrant === 4;
+  }
+  function isQuadrantRight(quadrant) {
+      return quadrant === 1 || quadrant === 2;
+  }
+  function lineCirclePoints(a, b, c, x0, y0, r) {
+      if ((a === 0 && b === 0) || r <= 0) {
+          return [];
+      }
+      if (a === 0) {
+          const y1 = -c / b;
+          const fy = (y1 - y0) ** 2;
+          const fd = r ** 2 - fy;
+          if (fd < 0) {
+              return [];
+          }
+          else if (fd === 0) {
+              return [{ x: x0, y: y1 }];
+          }
+          const x1 = Math.sqrt(fd) + x0;
+          const x2 = -Math.sqrt(fd) + x0;
+          return [
+              { x: x1, y: y1 },
+              { x: x2, y: y1 }
+          ];
+      }
+      else if (b === 0) {
+          const x1 = -c / a;
+          const fx = (x1 - x0) ** 2;
+          const fd = r ** 2 - fx;
+          if (fd < 0) {
+              return [];
+          }
+          else if (fd === 0) {
+              return [{ x: x1, y: y0 }];
+          }
+          const y1 = Math.sqrt(fd) + y0;
+          const y2 = -Math.sqrt(fd) + y0;
+          return [
+              { x: x1, y: y1 },
+              { x: x1, y: y2 }
+          ];
+      }
+      const fa = (b / a) ** 2 + 1;
+      const fb = 2 * ((c / a + x0) * (b / a) - y0);
+      const fc = (c / a + x0) ** 2 + y0 ** 2 - r ** 2;
+      const fd = fb ** 2 - 4 * fa * fc;
+      if (fd < 0) {
+          return [];
+      }
+      const y1 = (-fb + Math.sqrt(fd)) / (2 * fa);
+      const y2 = (-fb - Math.sqrt(fd)) / (2 * fa);
+      const x1 = -(b * y1 + c) / a;
+      const x2 = -(b * y2 + c) / a;
+      if (fd === 0) {
+          return [{ x: x1, y: y1 }];
+      }
+      return [
+          { x: x1, y: y1 },
+          { x: x2, y: y2 }
+      ];
+  }
+  function connectLineRadian(radius, length) {
+      if (length > radius * 2) {
+          return NaN;
       }
-      return { dx, dy };
+      return Math.asin(length / 2 / radius) * 2;
   }
-
-  const fadeIn = (textAttribute = {}) => {
-      var _a, _b, _c;
-      return {
-          from: {
-              opacity: 0,
-              fillOpacity: 0,
-              strokeOpacity: 0
-          },
-          to: {
-              opacity: (_a = textAttribute.opacity) !== null && _a !== void 0 ? _a : 1,
-              fillOpacity: (_b = textAttribute.fillOpacity) !== null && _b !== void 0 ? _b : 1,
-              strokeOpacity: (_c = textAttribute.strokeOpacity) !== null && _c !== void 0 ? _c : 1
-          }
-      };
-  };
-  const fadeOut = (textAttribute = {}) => {
-      var _a, _b, _c;
-      return {
-          from: {
-              opacity: (_a = textAttribute.opacity) !== null && _a !== void 0 ? _a : 1,
-              fillOpacity: (_b = textAttribute.fillOpacity) !== null && _b !== void 0 ? _b : 1,
-              strokeOpacity: (_c = textAttribute.strokeOpacity) !== null && _c !== void 0 ? _c : 1
-          },
-          to: {
-              opacity: 0,
-              fillOpacity: 0,
-              strokeOpacity: 0
-          }
+  function checkBoundsOverlap(boundsA, boundsB) {
+      const { x1: ax1, y1: ay1, x2: ax2, y2: ay2 } = boundsA;
+      const { x1: bx1, y1: by1, x2: bx2, y2: by2 } = boundsB;
+      return !((ax1 <= bx1 && ax2 <= bx1) ||
+          (ax1 >= bx2 && ax2 >= bx2) ||
+          (ay1 <= by1 && ay2 <= by1) ||
+          (ay1 >= by2 && ay2 >= by2));
+  }
+  const labelingPoint = (textBounds, graphicBounds, position = 'top', offset = 0) => {
+      if (!textBounds) {
+          return;
+      }
+      const { x1, y1, x2, y2 } = textBounds;
+      const width = Math.abs(x2 - x1);
+      const height = Math.abs(y2 - y1);
+      const anchorX = (graphicBounds.x1 + graphicBounds.x2) / 2;
+      const anchorY = (graphicBounds.y1 + graphicBounds.y2) / 2;
+      let sx = 0;
+      let sy = 0;
+      let offsetX = 0;
+      let offsetY = 0;
+      if (graphicBounds) {
+          offsetX = Math.abs(graphicBounds.x1 - graphicBounds.x2) / 2;
+          offsetY = Math.abs(graphicBounds.y1 - graphicBounds.y2) / 2;
+      }
+      const angle = {
+          'top-right': -235,
+          'top-left': 235,
+          'bottom-right': 45,
+          'bottom-left': -45
       };
+      switch (position) {
+          case 'top':
+              sy = -1;
+              break;
+          case 'bottom':
+              sy = 1;
+              break;
+          case 'left':
+              sx = -1;
+              break;
+          case 'right':
+              sx = 1;
+              break;
+          case 'bottom-left':
+          case 'bottom-right':
+          case 'top-left':
+          case 'top-right':
+              sx = Math.sin(angle[position] * (Math.PI / 180));
+              sy = Math.cos(angle[position] * (Math.PI / 180));
+              break;
+          case 'center':
+              sx = 0;
+              sy = 0;
+              break;
+      }
+      const x = anchorX + sx * (offset + offsetX) + Math.sign(sx) * (width / 2);
+      const y = anchorY + sy * (offset + offsetY) + Math.sign(sy) * (height / 2);
+      return { x, y };
   };
-  const animationEffects = { fadeIn, fadeOut };
-  function getAnimationAttributes(textAttribute, type) {
-      var _a, _b;
-      return (_b = (_a = animationEffects[type]) === null || _a === void 0 ? void 0 : _a.call(animationEffects, textAttribute)) !== null && _b !== void 0 ? _b : { from: {}, to: {} };
-  }
-  const DefaultLabelAnimation = {
-      mode: 'same-time',
-      duration: 300,
-      easing: 'linear'
+  const getPointsOfLineArea = (graphic) => {
+      if (!graphic || !graphic.attribute) {
+          return [];
+      }
+      const { points, segments } = graphic.attribute;
+      if (segments && segments.length) {
+          const res = [];
+          segments.forEach(seg => {
+              const segPoints = seg.points;
+              segPoints.forEach(point => {
+                  res.push(point);
+              });
+          });
+          return res;
+      }
+      return points;
   };
 
   class LabelBase extends AbstractComponent {
@@ -20327,15 +22038,17 @@
               var _a, _b, _c;
               if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.type) === AttributeUpdateType.STATE) {
                   const currentStates = (_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.currentStates) !== null && _c !== void 0 ? _c : [];
-                  const label = this._graphicToText.get(e.target);
-                  if (label) {
-                      if (label.text) {
-                          label.text.useStates(currentStates);
-                      }
-                      if (label.labelLine) {
-                          label.labelLine.useStates(currentStates);
+                  const labels = this._isCollectionBase ? [...this._graphicToText.values()] : [this._graphicToText.get(e.target)];
+                  labels.forEach(label => {
+                      if (label) {
+                          if (label.text) {
+                              label.text.useStates(currentStates);
+                          }
+                          if (label.labelLine) {
+                              label.labelLine.useStates(currentStates);
+                          }
                       }
-                  }
+                  });
               }
           };
       }
@@ -20347,7 +22060,7 @@
       }
       render() {
           this._prepare();
-          if (vutils.isNil(this._idToGraphic)) {
+          if ((this._isCollectionBase && vutils.isNil(this._idToPoint)) || (!this._isCollectionBase && vutils.isNil(this._idToGraphic))) {
               return;
           }
           const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
@@ -20357,13 +22070,13 @@
           }
           let labels;
           if (vutils.isFunction(customLayoutFunc)) {
-              labels = customLayoutFunc(data, (d) => this._idToGraphic.get(d.id));
+              labels = customLayoutFunc(data, this.getRelatedGrphic, this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
           }
           else {
               labels = this._layout(data);
           }
           if (vutils.isFunction(customOverlapFunc)) {
-              labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
+              labels = customOverlapFunc(labels, this.getRelatedGrphic, this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
           }
           else {
               if (overlap !== false) {
@@ -20418,7 +22131,7 @@
           return text;
       }
       _prepare() {
-          var _a;
+          var _a, _b, _c, _d;
           const currentBaseMarks = [];
           let baseMarks;
           if (vutils.isFunction(this.attribute.getBaseMarks)) {
@@ -20433,7 +22146,9 @@
               }
           });
           (_a = this._idToGraphic) === null || _a === void 0 ? void 0 : _a.clear();
+          (_b = this._idToPoint) === null || _b === void 0 ? void 0 : _b.clear();
           this._baseMarks = currentBaseMarks;
+          this._isCollectionBase = ((_c = currentBaseMarks === null || currentBaseMarks === void 0 ? void 0 : currentBaseMarks[0]) === null || _c === void 0 ? void 0 : _c.type) === 'line' || ((_d = currentBaseMarks === null || currentBaseMarks === void 0 ? void 0 : currentBaseMarks[0]) === null || _d === void 0 ? void 0 : _d.type) === 'area';
           if (!currentBaseMarks || currentBaseMarks.length === 0) {
               return;
           }
@@ -20441,30 +22156,59 @@
           if (!data || data.length === 0) {
               return;
           }
-          if (!this._idToGraphic) {
-              this._idToGraphic = new Map();
+          if (this._isCollectionBase) {
+              if (!this._idToPoint) {
+                  this._idToPoint = new Map();
+              }
+              const baseMark = currentBaseMarks[0];
+              const points = getPointsOfLineArea(baseMark);
+              if (points === null || points === void 0 ? void 0 : points.length) {
+                  for (let i = 0; i < points.length; i++) {
+                      const textData = data[i];
+                      if (textData && points[i]) {
+                          if (!vutils.isValid(textData.id)) {
+                              textData.id = `vrender-component-${this.name}-${i}`;
+                          }
+                          this._idToPoint.set(textData.id, points[i]);
+                      }
+                  }
+              }
           }
-          for (let i = 0; i < currentBaseMarks.length; i++) {
-              const textData = data[i];
-              const baseMark = currentBaseMarks[i];
-              if (textData && baseMark) {
-                  if (!vutils.isValid(textData.id)) {
-                      textData.id = `vrender-component-${this.name}-${i}`;
+          else {
+              if (!this._idToGraphic) {
+                  this._idToGraphic = new Map();
+              }
+              for (let i = 0; i < currentBaseMarks.length; i++) {
+                  const textData = data[i];
+                  const baseMark = currentBaseMarks[i];
+                  if (textData && baseMark) {
+                      if (!vutils.isValid(textData.id)) {
+                          textData.id = `vrender-component-${this.name}-${i}`;
+                      }
+                      this._idToGraphic.set(textData.id, baseMark);
                   }
-                  this._idToGraphic.set(textData.id, baseMark);
               }
           }
       }
+      getRelatedGrphic(item) {
+          return this._isCollectionBase ? this._baseMarks[0] : this._idToGraphic.get(item.id);
+      }
       _layout(data = []) {
           const { textStyle = {}, position, offset } = this.attribute;
           const labels = [];
           for (let i = 0; i < data.length; i++) {
               const textData = data[i];
-              const baseMark = this._idToGraphic.get(textData.id);
-              const labelAttribute = Object.assign(Object.assign({ fill: baseMark.attribute.fill }, textStyle), textData);
+              const baseMark = this.getRelatedGrphic(textData);
+              const labelAttribute = Object.assign(Object.assign({ fill: this._isCollectionBase
+                      ? vutils.isArray(baseMark.attribute.stroke)
+                          ? baseMark.attribute.stroke.find(entry => !!entry && entry !== true)
+                          : baseMark.attribute.stroke
+                      : baseMark.attribute.fill }, textStyle), textData);
               const text = this._createLabelText(labelAttribute);
               const textBounds = this.getGraphicBounds(text);
-              const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
+              const graphicBounds = this._isCollectionBase
+                  ? this.getGraphicBounds(null, this._idToPoint.get(textData.id))
+                  : this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
               const textLocation = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
               if (textLocation) {
                   labelAttribute.x = textLocation.x;
@@ -20516,7 +22260,7 @@
                   continue;
               }
               const text = labels[i];
-              const baseMark = this._idToGraphic.get(text.attribute.id);
+              const baseMark = this.getRelatedGrphic(text.attribute);
               text.update();
               if (!vutils.isRectIntersect(baseMark.AABBBounds, { x1: 0, x2: bmpTool.width, y1: 0, y2: bmpTool.height }, true)) {
                   continue;
@@ -20535,7 +22279,9 @@
               }
               let hasPlace = false;
               for (let j = 0; j < strategy.length; j++) {
-                  hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling);
+                  hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this._isCollectionBase
+                      ? this.getGraphicBounds(null, this._idToPoint.get(labels[i].attribute.id))
+                      : this.getGraphicBounds(baseMark, labels[i].attribute), this.labeling);
                   if (hasPlace !== false) {
                       text.setAttributes({ x: hasPlace.x, y: hasPlace.y });
                       result.push(text);
@@ -20602,11 +22348,13 @@
           labels.forEach((text, index) => {
               var _a, _b, _c, _d, _e, _f, _g;
               const labelLine = this._labelLine(text);
-              const relatedGraphic = this._idToGraphic.get(text.attribute.id);
-              const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
+              const relatedGraphic = this.getRelatedGrphic(text.attribute);
+              const textId = text.attribute.id;
+              const textKey = this._isCollectionBase ? textId : relatedGraphic;
+              const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(textKey)) ? 'update' : 'enter';
               if (state === 'enter') {
                   texts.push(text);
-                  currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
+                  currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
                   if (relatedGraphic) {
                       const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                       this.add(text);
@@ -20615,7 +22363,7 @@
                           this.add(labelLine);
                       }
                       this._syncStateWithRelatedGraphic(relatedGraphic);
-                      relatedGraphic.once('animate-bind', () => {
+                      relatedGraphic.once('animate-bind', a => {
                           text.setAttributes(from);
                           const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
                               mode,
@@ -20629,9 +22377,9 @@
                   }
               }
               else if (state === 'update') {
-                  const prevLabel = prevTextMap.get(relatedGraphic);
-                  prevTextMap.delete(relatedGraphic);
-                  currentTextMap.set(relatedGraphic, prevLabel);
+                  const prevLabel = prevTextMap.get(textKey);
+                  prevTextMap.delete(textKey);
+                  currentTextMap.set(textKey, prevLabel);
                   const prevText = prevLabel.text;
                   prevText.animate().to(text.attribute, duration, easing);
                   if (prevLabel.labelLine) {
@@ -20666,10 +22414,11 @@
           labels.forEach(text => {
               var _a;
               const labelLine = this._labelLine(text);
-              const relatedGraphic = this._idToGraphic.get(text.attribute.id);
+              const relatedGraphic = this.getRelatedGrphic(text.attribute);
               const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
+              const textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
               if (state === 'enter') {
-                  currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
+                  currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
                   this.add(text);
                   if (labelLine) {
                       this.add(labelLine);
@@ -20677,9 +22426,9 @@
                   this._syncStateWithRelatedGraphic(relatedGraphic);
               }
               else if (state === 'update') {
-                  const prevLabel = prevTextMap.get(relatedGraphic);
-                  prevTextMap.delete(relatedGraphic);
-                  currentTextMap.set(relatedGraphic, prevLabel);
+                  const prevLabel = prevTextMap.get(textKey);
+                  prevTextMap.delete(textKey);
+                  currentTextMap.set(textKey, prevLabel);
                   prevLabel.text.setAttributes(text.attribute);
                   if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
                       prevLabel.labelLine.setAttributes({ points: (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points });
@@ -20701,7 +22450,7 @@
       }
       _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
           const listener = (event) => {
-              var _a;
+              var _a, _b;
               const { detail } = event;
               if (!detail) {
                   return {};
@@ -20740,7 +22489,15 @@
                       break;
                   case 'same-time':
                   default:
-                      if (detail.animationState.isFirstFrameOfStep) {
+                      if (this._isCollectionBase) {
+                          const point = this._idToPoint.get(text.attribute.id);
+                          if (point &&
+                              (!text.animates || !text.animates.has('label-animate')) &&
+                              this._baseMarks[0].containsPoint(point.x, point.y, IContainPointMode.LOCAL, (_b = this.stage) === null || _b === void 0 ? void 0 : _b.pickerService)) {
+                              text.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                          }
+                      }
+                      else if (detail.animationState.isFirstFrameOfStep) {
                           text.animate({ onEnd }).wait(delay).to(to, duration, easing);
                       }
                       break;
@@ -20765,7 +22522,7 @@
               if (!label) {
                   continue;
               }
-              const baseMark = this._idToGraphic.get(label.attribute.id);
+              const baseMark = this.getRelatedGrphic(label.attribute);
               const backgroundColor = baseMark.attribute.fill;
               const foregroundColor = label.attribute.fill;
               const baseColor = backgroundColor;
@@ -20842,56 +22599,7 @@
           this.name = 'symbol-label';
       }
       labeling(textBounds, graphicBounds, position = 'top', offset = 0) {
-          if (!textBounds) {
-              return;
-          }
-          const { x1, y1, x2, y2 } = textBounds;
-          const width = Math.abs(x2 - x1);
-          const height = Math.abs(y2 - y1);
-          const anchorX = (graphicBounds.x1 + graphicBounds.x2) / 2;
-          const anchorY = (graphicBounds.y1 + graphicBounds.y2) / 2;
-          let sx = 0;
-          let sy = 0;
-          let offsetX = 0;
-          let offsetY = 0;
-          if (graphicBounds) {
-              offsetX = Math.abs(graphicBounds.x1 - graphicBounds.x2) / 2;
-              offsetY = Math.abs(graphicBounds.y1 - graphicBounds.y2) / 2;
-          }
-          const angle = {
-              'top-right': -235,
-              'top-left': 235,
-              'bottom-right': 45,
-              'bottom-left': -45
-          };
-          switch (position) {
-              case 'top':
-                  sy = -1;
-                  break;
-              case 'bottom':
-                  sy = 1;
-                  break;
-              case 'left':
-                  sx = -1;
-                  break;
-              case 'right':
-                  sx = 1;
-                  break;
-              case 'bottom-left':
-              case 'bottom-right':
-              case 'top-left':
-              case 'top-right':
-                  sx = Math.sin(angle[position] * (Math.PI / 180));
-                  sy = Math.cos(angle[position] * (Math.PI / 180));
-                  break;
-              case 'center':
-                  sx = 0;
-                  sy = 0;
-                  break;
-          }
-          const x = anchorX + sx * (offset + offsetX) + Math.sign(sx) * (width / 2);
-          const y = anchorY + sy * (offset + offsetY) + Math.sign(sy) * (height / 2);
-          return { x, y };
+          return labelingPoint(textBounds, graphicBounds, position, offset);
       }
   }
   SymbolLabel.defaultAttributes = {
@@ -21030,125 +22738,6 @@
       pickable: false
   };
 
-  function polarToCartesian(point) {
-      if (!point.radius) {
-          return { x: 0, y: 0 };
-      }
-      return {
-          x: Math.cos(point.angle) * point.radius,
-          y: Math.sin(point.angle) * point.radius
-      };
-  }
-  function circlePoint(x0, y0, radius, radian) {
-      const offset = polarToCartesian({
-          radius,
-          angle: radian
-      });
-      return {
-          x: x0 + offset.x,
-          y: y0 + offset.y
-      };
-  }
-  function computeQuadrant(angle) {
-      angle = normalizeAngle(angle);
-      if (angle > 0 && angle <= Math.PI / 2) {
-          return 2;
-      }
-      else if (angle > Math.PI / 2 && angle <= Math.PI) {
-          return 3;
-      }
-      else if (angle > Math.PI && angle <= (3 * Math.PI) / 2) {
-          return 4;
-      }
-      return 1;
-  }
-  function normalizeAngle(angle) {
-      while (angle < 0) {
-          angle += Math.PI * 2;
-      }
-      while (angle >= Math.PI * 2) {
-          angle -= Math.PI * 2;
-      }
-      return angle;
-  }
-  function isQuadrantLeft(quadrant) {
-      return quadrant === 3 || quadrant === 4;
-  }
-  function isQuadrantRight(quadrant) {
-      return quadrant === 1 || quadrant === 2;
-  }
-  function lineCirclePoints(a, b, c, x0, y0, r) {
-      if ((a === 0 && b === 0) || r <= 0) {
-          return [];
-      }
-      if (a === 0) {
-          const y1 = -c / b;
-          const fy = (y1 - y0) ** 2;
-          const fd = r ** 2 - fy;
-          if (fd < 0) {
-              return [];
-          }
-          else if (fd === 0) {
-              return [{ x: x0, y: y1 }];
-          }
-          const x1 = Math.sqrt(fd) + x0;
-          const x2 = -Math.sqrt(fd) + x0;
-          return [
-              { x: x1, y: y1 },
-              { x: x2, y: y1 }
-          ];
-      }
-      else if (b === 0) {
-          const x1 = -c / a;
-          const fx = (x1 - x0) ** 2;
-          const fd = r ** 2 - fx;
-          if (fd < 0) {
-              return [];
-          }
-          else if (fd === 0) {
-              return [{ x: x1, y: y0 }];
-          }
-          const y1 = Math.sqrt(fd) + y0;
-          const y2 = -Math.sqrt(fd) + y0;
-          return [
-              { x: x1, y: y1 },
-              { x: x1, y: y2 }
-          ];
-      }
-      const fa = (b / a) ** 2 + 1;
-      const fb = 2 * ((c / a + x0) * (b / a) - y0);
-      const fc = (c / a + x0) ** 2 + y0 ** 2 - r ** 2;
-      const fd = fb ** 2 - 4 * fa * fc;
-      if (fd < 0) {
-          return [];
-      }
-      const y1 = (-fb + Math.sqrt(fd)) / (2 * fa);
-      const y2 = (-fb - Math.sqrt(fd)) / (2 * fa);
-      const x1 = -(b * y1 + c) / a;
-      const x2 = -(b * y2 + c) / a;
-      if (fd === 0) {
-          return [{ x: x1, y: y1 }];
-      }
-      return [
-          { x: x1, y: y1 },
-          { x: x2, y: y2 }
-      ];
-  }
-  function connectLineRadian(radius, length) {
-      if (length > radius * 2) {
-          return NaN;
-      }
-      return Math.asin(length / 2 / radius) * 2;
-  }
-  function checkBoundsOverlap(boundsA, boundsB) {
-      const { x1: ax1, y1: ay1, x2: ax2, y2: ay2 } = boundsA;
-      const { x1: bx1, y1: by1, x2: bx2, y2: by2 } = boundsB;
-      return !((ax1 <= bx1 && ax2 <= bx1) ||
-          (ax1 >= bx2 && ax2 >= bx2) ||
-          (ay1 <= by1 && ay2 <= by1) ||
-          (ay1 >= by2 && ay2 >= by2));
-  }
-
   class ArcInfo {
       constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle, innerRadius, outerRadius, circleCenter) {
           this.refDatum = refDatum;
@@ -21873,10 +23462,33 @@
       pickable: false
   };
 
+  class LineDataLabel extends LabelBase {
+      constructor(attributes) {
+          super(vutils.merge({}, LineDataLabel.defaultAttributes, attributes));
+          this.name = 'line-data-label';
+      }
+      labeling(textBounds, graphicBounds, position = 'top', offset = 0) {
+          return labelingPoint(textBounds, graphicBounds, position, offset);
+      }
+  }
+  LineDataLabel.defaultAttributes = {
+      textStyle: {
+          fontSize: 12,
+          fill: '#000',
+          textAlign: 'center',
+          textBaseline: 'middle',
+          boundsPadding: [-1, 0, -1, 0]
+      },
+      position: 'top',
+      offset: 5,
+      pickable: false
+  };
+
   const labelComponentMap = {
       rect: RectLabel,
       symbol: SymbolLabel,
-      arc: ArcLabel
+      arc: ArcLabel,
+      'line-data': LineDataLabel
   };
   class DataLabel extends AbstractComponent {
       constructor(attributes) {
@@ -24209,6 +25821,7 @@
           };
           this._statePointToData = state => state;
           this._onHandlerPointerDown = (e, tag) => {
+              e.stopPropagation();
               if (tag === 'start') {
                   this._activeTag = DataZoomActiveTag.startHandler;
                   this._activeItem = this._startHandler;
@@ -24234,6 +25847,7 @@
               this._activeCache.lastPos = this.eventPosToStagePos(e);
           };
           this._onHandlerPointerMove = (e) => {
+              e.stopPropagation();
               const { start, end, brushSelect } = this.attribute;
               const pos = this.eventPosToStagePos(e);
               const { attPos, max } = this._layoutCache;
@@ -24365,6 +25979,7 @@
           };
       }
       _onHandlerPointerUp(e) {
+          e.preventDefault();
           const { start, end, brushSelect } = this.attribute;
           if (this._activeState) {
               if (this._activeTag === DataZoomActiveTag.background) {
@@ -24384,10 +25999,12 @@
           }
       }
       _onHandlerPointerEnter(e) {
+          e.stopPropagation();
           this._showText = true;
           this.renderText();
       }
       _onHandlerPointerLeave(e) {
+          e.stopPropagation();
           this._showText = false;
           this.renderText();
       }
@@ -27537,7 +29154,7 @@
           }
           if (vutils.isValid(verticalAlign) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign)) {
               const mainTitleVerticalAlign = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign : verticalAlign;
-              const mainTitleHeight = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.height) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.height : titleWidth;
+              const mainTitleHeight = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.height) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.height : titleHeight;
               if (mainTitleVerticalAlign === 'top') {
                   (_18 = this._mainTitle) === null || _18 === void 0 ? void 0 : _18.setAttribute('y', 0);
                   (_19 = this._mainTitle) === null || _19 === void 0 ? void 0 : _19.setAttribute('textBaseline', 'top');
@@ -28650,6 +30267,7 @@
               if (this._outOfInteractiveRange(e)) {
                   return;
               }
+              e.stopPropagation();
               const brushMoved = (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.brushMoved) !== null && _b !== void 0 ? _b : true;
               this._activeMoveState = brushMoved && this._isPosInBrushMask(e);
               this._activeDrawState = !this._activeMoveState;
@@ -28660,11 +30278,13 @@
               if (this._outOfInteractiveRange(e)) {
                   return;
               }
+              e.stopPropagation();
               this._activeDrawState && this._drawing(e);
               this._activeMoveState && this._moving(e);
           };
           this._onBrushEnd = (e) => {
               var _a;
+              e.preventDefault();
               const { removeOnClick = true } = this.attribute;
               if (this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick) {
                   this._container.incrementalClearChild();
@@ -29447,7 +31067,7 @@
       }
   };
 
-  const version = "0.16.2";
+  const version = "0.16.3";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;
@@ -29481,6 +31101,7 @@
   exports.LineAxis = LineAxis;
   exports.LineAxisGrid = LineAxisGrid;
   exports.LineCrosshair = LineCrosshair;
+  exports.LineDataLabel = LineDataLabel;
   exports.LineLabel = LineLabel;
   exports.LinkPath = LinkPath;
   exports.MarkArea = MarkArea;