@visactor/vrender-components 0.16.1 → 0.16.2-alpha.1

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);
       };
@@ -3017,7 +3017,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 +3795,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 +4737,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 +4943,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 +4962,7 @@
     }
     return _createClass(DefaultTextMeasureContribution);
   }(ATextMeasure);
-  DefaultTextMeasureContribution = __decorate$P([injectable()], DefaultTextMeasureContribution);
+  DefaultTextMeasureContribution = __decorate$V([injectable()], DefaultTextMeasureContribution);
 
   var container = new Container();
 
@@ -4971,18 +4971,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 +5411,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 +5488,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 +6274,8 @@
     return _createClass(CustomEvent);
   }(FederatedEvent);
 
+  "object" == (typeof performance === "undefined" ? "undefined" : _typeof(performance)) && performance.now ? performance : Date;
+
   var EventTarget = {
     pickable: !0,
     visible: !0,
@@ -5929,6 +6289,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 +7628,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 +9287,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 +9378,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 +9545,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 +12833,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 +12919,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 +12949,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 +12968,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 +13006,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 +13025,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 +13044,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 +13063,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 +13151,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 +13785,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 +13907,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 +14077,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 +14259,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 +14317,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 +14457,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 +14615,7 @@
     }]);
     return DefaultCanvasLineRender;
   }(BaseRender);
-  DefaultCanvasLineRender = __decorate$B([injectable()], DefaultCanvasLineRender);
+  DefaultCanvasLineRender = __decorate$H([injectable()], DefaultCanvasLineRender);
 
   function drawAreaSegments(path, segPath, percent, params) {
     var _a;
@@ -14102,17 +14756,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 +14986,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 +15044,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 +15104,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 +15183,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 +15256,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 +15498,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 +15563,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 +15621,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 +15701,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 +15864,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 +15908,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 +15924,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);
@@ -15268,16 +15934,17 @@
       key: "createCommonPattern",
       value: function createCommonPattern(size, padding, color, targetContext, cb) {
         var r = (size - 2 * padding) / 2,
+          dpr = targetContext.dpr,
           canvas = canvasAllocate.allocate({
             width: size,
             height: size,
-            dpr: 1
+            dpr: dpr
           }),
           ctx = canvas.getContext("2d");
         if (!ctx) return null;
-        ctx.clearRect(0, 0, size, size), cb(r, ctx);
+        ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, size, size), cb(r, ctx);
         var pattern = targetContext.createPattern(canvas.nativeCanvas, "repeat");
-        return canvasAllocate.free(canvas), pattern;
+        return pattern.setTransform && pattern.setTransform(new DOMMatrix([1 / dpr, 0, 0, 1 / dpr, 0, 0])), canvasAllocate.free(canvas), pattern;
       }
     }, {
       key: "createCirclePattern",
@@ -15399,9 +16066,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;
@@ -15483,7 +16150,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);
@@ -15495,7 +16162,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);
@@ -15507,9 +16174,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;
@@ -15571,7 +16238,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);
@@ -15583,7 +16250,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);
@@ -15595,9 +16262,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;
@@ -15628,9 +16295,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;
@@ -15695,7 +16362,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;
@@ -15711,7 +16378,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;
@@ -15783,7 +16450,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);
@@ -15795,7 +16462,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);
@@ -15807,7 +16474,7 @@
     }
     return _createClass(DefaultRectTextureRenderContribution);
   }(DefaultBaseTextureRenderContribution);
-  DefaultRectTextureRenderContribution = __decorate$o([injectable()], DefaultRectTextureRenderContribution);
+  DefaultRectTextureRenderContribution = __decorate$t([injectable()], DefaultRectTextureRenderContribution);
   var SplitRectBeforeRenderContribution = /*#__PURE__*/function () {
     function SplitRectBeforeRenderContribution() {
       _classCallCheck(this, SplitRectBeforeRenderContribution);
@@ -15825,7 +16492,7 @@
     }]);
     return SplitRectBeforeRenderContribution;
   }();
-  SplitRectBeforeRenderContribution = __decorate$o([injectable()], SplitRectBeforeRenderContribution);
+  SplitRectBeforeRenderContribution = __decorate$t([injectable()], SplitRectBeforeRenderContribution);
   var SplitRectAfterRenderContribution = /*#__PURE__*/function () {
     function SplitRectAfterRenderContribution() {
       _classCallCheck(this, SplitRectAfterRenderContribution);
@@ -15854,9 +16521,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;
@@ -15916,7 +16583,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);
@@ -15940,17 +16607,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);
       };
@@ -16006,7 +16673,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);
@@ -16015,17 +16682,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);
       };
@@ -16107,9 +16774,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;
@@ -16153,7 +16820,7 @@
     }]);
     return ShadowRootPickItemInterceptorContribution;
   }();
-  ShadowRootPickItemInterceptorContribution = __decorate$k([injectable()], ShadowRootPickItemInterceptorContribution);
+  ShadowRootPickItemInterceptorContribution = __decorate$p([injectable()], ShadowRootPickItemInterceptorContribution);
   var InteractivePickItemInterceptorContribution = /*#__PURE__*/function () {
     function InteractivePickItemInterceptorContribution() {
       _classCallCheck(this, InteractivePickItemInterceptorContribution);
@@ -16177,7 +16844,7 @@
     }]);
     return InteractivePickItemInterceptorContribution;
   }();
-  InteractivePickItemInterceptorContribution = __decorate$k([injectable()], InteractivePickItemInterceptorContribution);
+  InteractivePickItemInterceptorContribution = __decorate$p([injectable()], InteractivePickItemInterceptorContribution);
   var Canvas3DPickItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DPickItemInterceptor() {
       _classCallCheck(this, Canvas3DPickItemInterceptor);
@@ -16254,7 +16921,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);
@@ -16267,17 +16934,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);
       };
@@ -16325,7 +16992,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);
@@ -16339,17 +17006,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);
       };
@@ -16444,19 +17111,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);
       };
@@ -16516,19 +17183,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);
       };
@@ -16617,7 +17284,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);
@@ -16744,7 +17411,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;
@@ -16783,7 +17450,7 @@
     }]);
     return ShadowRootDrawItemInterceptorContribution;
   }();
-  ShadowRootDrawItemInterceptorContribution = __decorate$f([injectable()], ShadowRootDrawItemInterceptorContribution);
+  ShadowRootDrawItemInterceptorContribution = __decorate$k([injectable()], ShadowRootDrawItemInterceptorContribution);
   var CommonDrawItemInterceptorContribution = /*#__PURE__*/function () {
     function CommonDrawItemInterceptorContribution() {
       _classCallCheck(this, CommonDrawItemInterceptorContribution);
@@ -16811,7 +17478,7 @@
     }]);
     return CommonDrawItemInterceptorContribution;
   }();
-  CommonDrawItemInterceptorContribution = __decorate$f([injectable()], CommonDrawItemInterceptorContribution);
+  CommonDrawItemInterceptorContribution = __decorate$k([injectable()], CommonDrawItemInterceptorContribution);
   var InteractiveDrawItemInterceptorContribution = /*#__PURE__*/function () {
     function InteractiveDrawItemInterceptorContribution() {
       _classCallCheck(this, InteractiveDrawItemInterceptorContribution);
@@ -16870,7 +17537,7 @@
     }]);
     return InteractiveDrawItemInterceptorContribution;
   }();
-  InteractiveDrawItemInterceptorContribution = __decorate$f([injectable()], InteractiveDrawItemInterceptorContribution);
+  InteractiveDrawItemInterceptorContribution = __decorate$k([injectable()], InteractiveDrawItemInterceptorContribution);
   var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DDrawItemInterceptor() {
       _classCallCheck(this, Canvas3DDrawItemInterceptor);
@@ -16959,19 +17626,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);
       };
@@ -17173,9 +17840,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;
@@ -17194,19 +17861,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);
       };
@@ -17308,9 +17975,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;
@@ -17374,9 +18041,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;
@@ -17431,20 +18098,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);
       };
@@ -17800,9 +18467,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;
@@ -17944,9 +18611,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;
@@ -18028,9 +18695,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;
@@ -18067,9 +18734,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;
@@ -18195,9 +18862,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;
@@ -18322,9 +18989,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;
@@ -18342,7 +19009,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);
@@ -18354,9 +19021,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;
@@ -18374,7 +19041,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);
@@ -18386,106 +19053,936 @@
     }
     return _createClass(DefaultPathTextureRenderContribution);
   }(DefaultBaseTextureRenderContribution);
-  DefaultPathTextureRenderContribution = __decorate$2([injectable()], DefaultPathTextureRenderContribution);
+  DefaultPathTextureRenderContribution = __decorate$7([injectable()], DefaultPathTextureRenderContribution);
+
+  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;
+    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 DefaultAreaBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
+    _inherits(DefaultAreaBackgroundRenderContribution, _DefaultBaseBackgroun);
+    var _super = _createSuper(DefaultAreaBackgroundRenderContribution);
+    function DefaultAreaBackgroundRenderContribution() {
+      var _this;
+      _classCallCheck(this, DefaultAreaBackgroundRenderContribution);
+      _this = _super.apply(this, arguments), _this.time = BaseRenderContributionTime.beforeFillStroke;
+      return _this;
+    }
+    return _createClass(DefaultAreaBackgroundRenderContribution);
+  }(DefaultBaseBackgroundRenderContribution);
+  DefaultAreaBackgroundRenderContribution = __decorate$6([injectable()], DefaultAreaBackgroundRenderContribution);
+  var DefaultAreaTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
+    _inherits(DefaultAreaTextureRenderContribution, _DefaultBaseTextureRe);
+    var _super2 = _createSuper(DefaultAreaTextureRenderContribution);
+    function DefaultAreaTextureRenderContribution() {
+      var _this2;
+      _classCallCheck(this, DefaultAreaTextureRenderContribution);
+      _this2 = _super2.apply(this, arguments), _this2.time = BaseRenderContributionTime.afterFillStroke;
+      return _this2;
+    }
+    _createClass(DefaultAreaTextureRenderContribution, [{
+      key: "drawShape",
+      value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
+        var _a, _b, _c, _d;
+        this.textureMap || this.initTextureMap(context, graphic.stage);
+        var _ref = options || {},
+          _ref$attribute = _ref.attribute,
+          attribute = _ref$attribute === void 0 ? graphic.attribute : _ref$attribute,
+          _attribute$texture = attribute.texture,
+          texture = _attribute$texture === void 0 ? null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList(graphicAttribute, "texture") : _attribute$texture,
+          _attribute$textureCol = attribute.textureColor,
+          textureColor = _attribute$textureCol === void 0 ? null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList(graphicAttribute, "textureColor") : _attribute$textureCol,
+          _attribute$textureSiz = attribute.textureSize,
+          textureSize = _attribute$textureSiz === void 0 ? null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList(graphicAttribute, "textureSize") : _attribute$textureSiz,
+          _attribute$texturePad = attribute.texturePadding,
+          texturePadding = _attribute$texturePad === void 0 ? null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList(graphicAttribute, "texturePadding") : _attribute$texturePad;
+        if (!texture) return;
+        var pattern = this.textureMap.get(texture);
+        if (!pattern) switch (texture) {
+          case "circle":
+            pattern = this.createCirclePattern(textureSize, texturePadding, textureColor, context);
+            break;
+          case "diamond":
+            pattern = this.createDiamondPattern(textureSize, texturePadding, textureColor, context);
+            break;
+          case "rect":
+            pattern = this.createRectPattern(textureSize, texturePadding, textureColor, context);
+            break;
+          case "vertical-line":
+            pattern = this.createVerticalLinePattern(textureSize, texturePadding, textureColor, context);
+            break;
+          case "horizontal-line":
+            pattern = this.createHorizontalLinePattern(textureSize, texturePadding, textureColor, context);
+            break;
+          case "bias-lr":
+            pattern = this.createBiasLRLinePattern(textureSize, texturePadding, textureColor, context);
+            break;
+          case "bias-rl":
+            pattern = this.createBiasRLLinePattern(textureSize, texturePadding, textureColor, context);
+            break;
+          case "grid":
+            pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
+        }
+        pattern && (context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore());
+      }
+    }]);
+    return DefaultAreaTextureRenderContribution;
+  }(DefaultBaseTextureRenderContribution);
+  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);
+  });
+
+  function load(container) {
+    container.load(renderModule);
+  }
+
+  container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container);
+  var vglobal = container.get(VGlobal);
+  application.global = vglobal;
+  var graphicUtil = container.get(GraphicUtil);
+  application.graphicUtil = graphicUtil;
+  var transformUtil = container.get(TransformUtil);
+  application.transformUtil = transformUtil;
+  var graphicService = container.get(GraphicService);
+  application.graphicService = graphicService;
+  container.get(GlobalPickerService);
+  var layerService = container.get(LayerService);
+  application.layerService = layerService;
+
+  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;
+      }
+    }, {
+      key: "getCanvas",
+      value: function getCanvas() {
+        throw new Error("不支持getCanvas");
+      }
+    }, {
+      key: "getContext",
+      value: function getContext() {
+        throw new Error("不支持getContext");
+      }
+    }, {
+      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));
+      }
+    }, {
+      key: "currentMatrix",
+      get: function get() {
+        return this.matrix;
+      }
+    }, {
+      key: "cloneMatrix",
+      value: function cloneMatrix(m) {
+        return matrixAllocate.allocateByObj(m);
+      }
+    }, {
+      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;
-  };
-  var DefaultAreaBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
-    _inherits(DefaultAreaBackgroundRenderContribution, _DefaultBaseBackgroun);
-    var _super = _createSuper(DefaultAreaBackgroundRenderContribution);
-    function DefaultAreaBackgroundRenderContribution() {
-      var _this;
-      _classCallCheck(this, DefaultAreaBackgroundRenderContribution);
-      _this = _super.apply(this, arguments), _this.time = BaseRenderContributionTime.beforeFillStroke;
-      return _this;
-    }
-    return _createClass(DefaultAreaBackgroundRenderContribution);
-  }(DefaultBaseBackgroundRenderContribution);
-  DefaultAreaBackgroundRenderContribution = __decorate$1([injectable()], DefaultAreaBackgroundRenderContribution);
-  var DefaultAreaTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
-    _inherits(DefaultAreaTextureRenderContribution, _DefaultBaseTextureRe);
-    var _super2 = _createSuper(DefaultAreaTextureRenderContribution);
-    function DefaultAreaTextureRenderContribution() {
-      var _this2;
-      _classCallCheck(this, DefaultAreaTextureRenderContribution);
-      _this2 = _super2.apply(this, arguments), _this2.time = BaseRenderContributionTime.afterFillStroke;
-      return _this2;
-    }
-    _createClass(DefaultAreaTextureRenderContribution, [{
-      key: "drawShape",
-      value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
-        var _a, _b, _c, _d;
-        this.textureMap || this.initTextureMap(context, graphic.stage);
-        var _ref = options || {},
-          _ref$attribute = _ref.attribute,
-          attribute = _ref$attribute === void 0 ? graphic.attribute : _ref$attribute,
-          _attribute$texture = attribute.texture,
-          texture = _attribute$texture === void 0 ? null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList(graphicAttribute, "texture") : _attribute$texture,
-          _attribute$textureCol = attribute.textureColor,
-          textureColor = _attribute$textureCol === void 0 ? null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList(graphicAttribute, "textureColor") : _attribute$textureCol,
-          _attribute$textureSiz = attribute.textureSize,
-          textureSize = _attribute$textureSiz === void 0 ? null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList(graphicAttribute, "textureSize") : _attribute$textureSiz,
-          _attribute$texturePad = attribute.texturePadding,
-          texturePadding = _attribute$texturePad === void 0 ? null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList(graphicAttribute, "texturePadding") : _attribute$texturePad;
-        if (!texture) return;
-        var pattern = this.textureMap.get(texture);
-        if (!pattern) switch (texture) {
-          case "circle":
-            pattern = this.createCirclePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "diamond":
-            pattern = this.createDiamondPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "rect":
-            pattern = this.createRectPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "vertical-line":
-            pattern = this.createVerticalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "horizontal-line":
-            pattern = this.createHorizontalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-lr":
-            pattern = this.createBiasLRLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-rl":
-            pattern = this.createBiasRLLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "grid":
-            pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
+      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);
         }
-        pattern && (context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore());
+        return result;
+      }
+    }, {
+      key: "containsPoint",
+      value: function containsPoint(graphic, point, params) {
+        return !!this.pickItem(graphic, point, null, params);
+      }
+    }, {
+      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 DefaultAreaTextureRenderContribution;
-  }(DefaultBaseTextureRenderContribution);
-  DefaultAreaTextureRenderContribution = __decorate$1([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);
-  });
-
-  function load(container) {
-    container.load(renderModule);
-  }
-
-  container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container);
-  var vglobal = container.get(VGlobal);
-  application.global = vglobal;
-  var graphicUtil = container.get(GraphicUtil);
-  application.graphicUtil = graphicUtil;
-  var transformUtil = container.get(TransformUtil);
-  application.transformUtil = transformUtil;
-  var graphicService = container.get(GraphicService);
-  application.graphicService = graphicService;
-  container.get(GlobalPickerService);
-  var layerService = container.get(LayerService);
-  application.layerService = layerService;
+    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',
@@ -18501,7 +19998,8 @@
       'clip',
       'pickable',
       'childrenPickable',
-      'zIndex'
+      'zIndex',
+      'cursor'
   ];
   class AbstractComponent extends Group {
       constructor(attributes, mode = '2d') {
@@ -18641,11 +20139,11 @@
           this._onSliderPointerUp = (e) => {
               e.preventDefault();
               if (vglobal.env === 'browser') {
-                  vglobal.removeEventListener('pointermove', this._onSliderPointerMove);
+                  vglobal.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
                   vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
               }
               else {
-                  this._slider.removeEventListener('pointermove', this._onSliderPointerMove);
+                  this._slider.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
                   this._slider.removeEventListener('pointerup', this._onSliderPointerUp);
                   this._slider.removeEventListener('pointerupoutside', this._onSliderPointerUp);
               }
@@ -18679,6 +20177,9 @@
           return this.attribute.range;
       }
       bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (this._rail) {
               this._rail.addEventListener('pointerdown', this._onRailPointerDown);
           }
@@ -19730,6 +21231,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) {
@@ -19763,6 +21270,7 @@
           this.pluginService = context;
           const { stage } = this.pluginService;
           stage.addEventListener('pointerover', this.poptip);
+          stage.addEventListener('pointerleave', this.pointerlave);
       }
       setActiveGraphic(graphic, rerender) {
           this.activeGraphic = graphic;
@@ -19771,6 +21279,7 @@
       deactivate(context) {
           const { stage } = this.pluginService;
           stage.removeEventListener('pointerover', this.poptip);
+          stage.removeEventListener('pointerleave', this.pointerlave);
       }
   };
   PopTipForClipedTextPlugin = __decorate([
@@ -20371,6 +21880,9 @@
           this._renderLabels(labels);
       }
       _bindEvent(target) {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (!target) {
               return;
           }
@@ -21986,7 +23498,7 @@
               });
           }
           else {
-              const line = createLine(Object.assign(Object.assign({ points: this._clipPoints(this.attribute.points) }, vutils.array(lineStyle)[0]), { fill: false }));
+              const line = createPolygon(Object.assign(Object.assign({ points: this._clipPoints(this.attribute.points) }, vutils.array(lineStyle)[0]), { fill: false, closePath: false }));
               line.name = `${this.name}-line`;
               line.id = this._getNodeId('line');
               if (!vutils.isEmpty(state === null || state === void 0 ? void 0 : state.line)) {
@@ -22305,6 +23817,9 @@
           this._bindEvent();
       }
       _bindEvent() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           const { hover, select } = this.attribute;
           if (hover) {
               this._innerView.addEventListener('pointermove', this._onHover);
@@ -24289,6 +25804,9 @@
           vutils.isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
       }
       bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           const { showDetail, brushSelect } = this.attribute;
           if (this._startHandler) {
               this._startHandler.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'start'));
@@ -25137,6 +26655,12 @@
   }
 
   class MarkLine extends Marker {
+      getLine() {
+          return this._line;
+      }
+      getLabel() {
+          return this._label;
+      }
       constructor(attributes) {
           super(vutils.merge({}, MarkLine.defaultAttributes, attributes));
       }
@@ -25217,6 +26741,12 @@
   MarkLine.defaultAttributes = DEFAULT_MARK_LINE_THEME;
 
   class MarkArea extends Marker {
+      getArea() {
+          return this._area;
+      }
+      getLabel() {
+          return this._label;
+      }
       constructor(attributes) {
           super(vutils.merge({}, MarkArea.defaultAttributes, attributes));
       }
@@ -25633,6 +27163,9 @@
           this._bindEvents();
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (this.preHandler) {
               this.preHandler.addEventListener('pointerenter', this._onHover);
               this.preHandler.addEventListener('pointerleave', this._onUnHover);
@@ -26010,6 +27543,9 @@
           }
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (!this._itemsContainer) {
               return;
           }
@@ -26143,7 +27679,7 @@
       }
       _renderPager(isHorizontal) {
           const renderStartY = this._title ? this._title.AABBBounds.height() + vutils.get(this.attribute, 'title.space', 8) : 0;
-          const { maxWidth, maxHeight, maxCol = 1, maxRow = 2, item = {}, pager = {} } = this.attribute;
+          const { maxWidth, maxHeight, maxCol = 1, maxRow = 2, item = {}, pager = {}, disableTriggerEvent } = this.attribute;
           const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
           const itemsContainer = this._itemsContainer;
           const { animation = true, animationDuration = 450, animationEasing = 'quadIn', space: pagerSpace = DEFAULT_PAGER_SPACE } = pager, pageStyle = __rest(pager, ["animation", "animationDuration", "animationEasing", "space"]);
@@ -26154,12 +27690,12 @@
           let startY = 0;
           let pages = 1;
           if (isHorizontal) {
-              pagerComp = new Pager(Object.assign({ layout: maxRow === 1 ? 'horizontal' : 'vertical', total: 99 }, vutils.merge({
+              pagerComp = new Pager(Object.assign(Object.assign({ layout: maxRow === 1 ? 'horizontal' : 'vertical', total: 99 }, vutils.merge({
                   handler: {
                       preShape: 'triangleUp',
                       nextShape: 'triangleDown'
                   }
-              }, pageStyle)));
+              }, pageStyle)), { disableTriggerEvent }));
               this._pager = pagerComp;
               this._innerView.add(pagerComp);
               pageHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow;
@@ -26190,7 +27726,7 @@
               });
           }
           else {
-              pagerComp = new Pager(Object.assign({ layout: 'horizontal', total: 99 }, pageStyle));
+              pagerComp = new Pager(Object.assign({ layout: 'horizontal', total: 99, disableTriggerEvent }, pageStyle));
               this._pager = pagerComp;
               this._innerView.add(pagerComp);
               pageWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol;
@@ -26621,11 +28157,15 @@
           this._onTrackPointerUp = (e) => {
               e.preventDefault();
               if (vglobal.env === 'browser') {
-                  vglobal.removeEventListener('pointermove', this._onTrackPointerMove);
+                  vglobal.removeEventListener('pointermove', this._onTrackPointerMove, {
+                      capture: true
+                  });
                   vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
               }
               else {
-                  this._track.removeEventListener('pointermove', this._onTrackPointerMove);
+                  this._track.removeEventListener('pointermove', this._onTrackPointerMove, {
+                      capture: true
+                  });
                   this._track.removeEventListener('pointerup', this._onTrackPointerUp);
                   this._track.removeEventListener('pointerupoutside', this._onTrackPointerUp);
               }
@@ -26896,6 +28436,9 @@
           return textShape;
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           const { slidable, range } = this.attribute;
           if (slidable) {
               if (this._startHandler) {
@@ -27105,7 +28648,7 @@
           this._updateColor();
       }
       _renderContent() {
-          const { colors, slidable, layout, align, min, max, value, railWidth, railHeight, showHandler = true, handlerSize, handlerStyle, railStyle, trackStyle, startText, endText, handlerText, showTooltip, tooltip } = this.attribute;
+          const { colors, slidable, layout, align, min, max, value, railWidth, railHeight, showHandler = true, handlerSize, handlerStyle, railStyle, trackStyle, startText, endText, handlerText, showTooltip, tooltip, disableTriggerEvent } = this.attribute;
           const domain = [];
           const step = (max - min) / (colors.length - 1);
           for (let i = 0; i < colors.length; i++) {
@@ -27136,7 +28679,8 @@
               endText,
               handlerText,
               showTooltip,
-              tooltip
+              tooltip,
+              disableTriggerEvent
           });
           this._innerView.add(slider);
           this._slider = slider;
@@ -27145,6 +28689,9 @@
           this._updateColor();
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (this._slider) {
               this._slider.addEventListener('change', this._onSliderChange);
           }
@@ -27295,7 +28842,7 @@
           this._slider.setValue(value);
       }
       _renderContent() {
-          const { slidable, layout, align, min, max, value, railWidth, railHeight, showHandler = true, handlerSize, handlerStyle, railStyle, trackStyle, startText, endText, handlerText, showTooltip, tooltip, sizeBackground } = this.attribute;
+          const { slidable, layout, align, min, max, value, railWidth, railHeight, showHandler = true, handlerSize, handlerStyle, railStyle, trackStyle, startText, endText, handlerText, showTooltip, tooltip, sizeBackground, disableTriggerEvent } = this.attribute;
           const mainContainer = createGroup({
               x: 0,
               y: 0
@@ -27325,7 +28872,8 @@
               endText,
               handlerText,
               showTooltip,
-              tooltip
+              tooltip,
+              disableTriggerEvent
           });
           mainContainer.add(slider);
           let start = 0;
@@ -27359,6 +28907,9 @@
           this._slider = slider;
       }
       _bindEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           if (this._slider) {
               this._slider.addEventListener('change', this._onSliderChange);
           }
@@ -27490,7 +29041,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');
@@ -27874,6 +29425,9 @@
               }
           };
           this._initEvents = () => {
+              if (this.attribute.disableTriggerEvent) {
+                  return;
+              }
               this._playController.addEventListener('pointerdown', (e) => {
                   e.stopPropagation();
                   if (this._isPaused === true) {
@@ -28071,7 +29625,8 @@
                   range: false,
                   handlerText: { visible: false },
                   startText: { visible: false },
-                  endText: { visible: false }
+                  endText: { visible: false },
+                  disableTriggerEvent: this.attribute.disableTriggerEvent
               };
               if (isHorizontal(this._orient)) {
                   const railWidth = Math.max(0, this._layoutInfo.slider.size);
@@ -28105,7 +29660,8 @@
                   start: this._start,
                   pause: this._pause,
                   forward: this._forward,
-                  backward: this._backward
+                  backward: this._backward,
+                  disableTriggerEvent: this.attribute.disableTriggerEvent
               };
               if (isHorizontal(this._orient)) {
                   attrs.layout = 'horizontal';
@@ -28258,6 +29814,9 @@
               this._slider.setAttribute('value', this._dataIndex);
           };
           this._initEvents = () => {
+              if (this.attribute.disableTriggerEvent) {
+                  return;
+              }
               this._controller.addEventListener(ControllerEventEnum.OnPlay, (e) => {
                   e.stopPropagation();
                   this.play();
@@ -28406,6 +29965,9 @@
               }
           };
           this._initEvents = () => {
+              if (this.attribute.disableTriggerEvent) {
+                  return;
+              }
               this._controller.addEventListener(ControllerEventEnum.OnPlay, (e) => {
                   e.stopPropagation();
                   this.play();
@@ -28633,6 +30195,9 @@
           };
       }
       bindBrushEvents() {
+          if (this.attribute.disableTriggerEvent) {
+              return;
+          }
           const { delayType = 'throttle', delayTime = 0, trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this.attribute;
           this.stage.addEventListener(trigger, this._onBrushStart);
           this.stage.addEventListener(updateTrigger, delayMap[delayType](this._onBrushing, delayTime));
@@ -29243,13 +30808,157 @@
       return new Tag(params ? params.attribute : {});
   }
 
-  const version = "0.16.1";
+  const svg = '<svg width="200" height="200" viewBox="0 0 1024 1024" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z"></path></svg>';
+  class CheckBox extends AbstractComponent {
+      constructor(attributes) {
+          super(vutils.merge({}, CheckBox.defaultAttributes, attributes));
+          this.renderGroup();
+          this.onBeforeAttributeUpdate = (val, attributes, key) => {
+              if ('interactive' in val) {
+                  this.setAttribute('pickable', val.interactive);
+              }
+              if ('disabled' in val) {
+                  this.setAttribute('cursor', val.disable ? this.attribute.disableCursor : this.attribute.cursor);
+              }
+              return undefined;
+          };
+          this.addEventListener('click', this.handleClick);
+      }
+      render() {
+          this.removeAllChild();
+          this.renderBox();
+          this.renderIcon();
+          this.renderText();
+          this.layout();
+      }
+      renderBox() {
+          this._box = new Rect(vutils.merge({}, this.attribute.box));
+          if (this.attribute.checked && this.attribute.disabled) {
+              this._box.setAttributes({
+                  fill: this.attribute.box.disableCheckedFill,
+                  stroke: this.attribute.box.disableCheckedStroke
+              });
+          }
+          else if (this.attribute.checked) {
+              this._box.setAttributes({
+                  fill: this.attribute.box.checkedFill,
+                  stroke: this.attribute.box.checkedStroke
+              });
+          }
+          this.appendChild(this._box);
+      }
+      renderIcon() {
+          this._icon = new Image(vutils.merge({}, this.attribute.icon));
+          if (!this.attribute.checked) {
+              this._icon.setAttribute('visible', false);
+          }
+          this.appendChild(this._icon);
+      }
+      renderText() {
+          this._text = new WrapText(vutils.merge({}, this.attribute.text));
+          if (this.attribute.disabled) {
+              this._text.setAttribute('fill', this.attribute.text.disableFill);
+          }
+          this.appendChild(this._text);
+      }
+      renderGroup() {
+          if (!this.attribute.interactive) {
+              this.setAttribute('pickable', false);
+          }
+          if (this.attribute.disabled) {
+              this.setAttribute('cursor', this.attribute.disableCursor);
+          }
+      }
+      layout() {
+          const boxHeight = this.attribute.box.height;
+          const iconHeight = this.attribute.icon.height;
+          const textHeight = this._text.AABBBounds.height();
+          const maxHeight = Math.max(boxHeight, iconHeight, textHeight);
+          const boxY = maxHeight / 2 - boxHeight / 2;
+          const iconY = maxHeight / 2 - iconHeight / 2;
+          const textY = maxHeight / 2 - textHeight / 2;
+          const boxWidth = this.attribute.box.width;
+          const iconWidth = this.attribute.icon.width;
+          const maxWidth = Math.max(boxWidth, iconWidth);
+          const boxX = maxWidth / 2 - boxWidth / 2;
+          const iconX = maxWidth / 2 - iconWidth / 2;
+          const textX = maxWidth + this.attribute.spaceBetweenTextAndIcon;
+          this._box.setAttributes({
+              x: boxX,
+              y: boxY
+          });
+          this._icon.setAttributes({
+              x: iconX,
+              y: iconY
+          });
+          this._text.setAttributes({
+              x: textX,
+              y: textY
+          });
+      }
+      handleClick() {
+          var _a;
+          if (this.attribute.disabled) {
+              return;
+          }
+          else if (this.attribute.checked) {
+              this.setAttribute('checked', false);
+          }
+          else {
+              this.setAttribute('checked', true);
+          }
+          const changeEvent = new CustomEvent('checkbox_state_change', {
+              eventType: 'checkbox_state_change',
+              checked: this.attribute.checked
+          });
+          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
+          this.dispatchEvent(changeEvent);
+      }
+  }
+  CheckBox.defaultAttributes = {
+      interactive: true,
+      disabled: false,
+      checked: false,
+      cursor: 'pointer',
+      disableCursor: 'not-allowed',
+      spaceBetweenTextAndIcon: 8,
+      text: {
+          text: 'text',
+          fontSize: 14,
+          fill: '#000',
+          disableFill: 'rgb(201,205,212)',
+          textBaseline: 'top',
+          pickable: false
+      },
+      icon: {
+          image: svg,
+          width: 10,
+          height: 10,
+          pickable: false
+      },
+      box: {
+          width: 14,
+          height: 14,
+          cornerRadius: 2,
+          fill: '#fff',
+          stroke: 'rgb(229,230,235)',
+          disableFill: 'rgb(242,243,245)',
+          checkedFill: 'rgb(22, 93, 255)',
+          checkedStroke: 'rgb(22, 93, 255)',
+          disableCheckedFill: 'rgb(148, 191, 255)',
+          disableCheckedStroke: 'rgb(148, 191, 255)',
+          pickable: false
+      }
+  };
+
+  const version = "0.16.2-alpha.1";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;
   exports.ArcLabel = ArcLabel;
   exports.BasePlayer = BasePlayer;
   exports.Brush = Brush;
+  exports.CheckBox = CheckBox;
   exports.CircleAxis = CircleAxis;
   exports.CircleAxisGrid = CircleAxisGrid;
   exports.CircleCrosshair = CircleCrosshair;