@visactor/vrender-components 0.17.0-alpha.3 → 0.17.0-alpha.5

package/dist/index.js

@@ -1479,7 +1479,7 @@
       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$r = undefined && undefined.__metadata || function (k, v) {
+    __metadata$s = 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) {
@@ -1492,7 +1492,7 @@
       _classCallCheck(this, DefaultGlobal);
       this.contributions = contributions, this.id = Generator.GenAutoIncrementId(), this.hooks = {
         onSetEnv: new SyncHook(["lastEnv", "env", "global"])
-      }, this.measureTextMethod = "native", this.optimizeVisible = !1, this.optmizeSkipCheckBoundariesThreshold = 0;
+      }, this.measureTextMethod = "native", this.optimizeVisible = !1;
     }
     _createClass(DefaultGlobal, [{
       key: "env",
@@ -1722,7 +1722,7 @@
     }]);
     return DefaultGlobal;
   }();
-  DefaultGlobal = __decorate$G([injectable(), __param$i(0, inject(ContributionProvider)), __param$i(0, named(EnvContribution)), __metadata$r("design:paramtypes", [Object])], DefaultGlobal);
+  DefaultGlobal = __decorate$G([injectable(), __param$i(0, inject(ContributionProvider)), __param$i(0, named(EnvContribution)), __metadata$s("design:paramtypes", [Object])], DefaultGlobal);
 
   var circleThreshold = vutils.tau - 1e-8;
   var BoundsContext = /*#__PURE__*/function () {
@@ -4113,7 +4113,7 @@
       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$q = 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$h = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -4198,7 +4198,7 @@
     }]);
     return DefaultGraphicUtil;
   }();
-  DefaultGraphicUtil = __decorate$D([injectable(), __param$h(0, inject(ContributionProvider)), __param$h(0, named(TextMeasureContribution)), __metadata$q("design:paramtypes", [Object])], DefaultGraphicUtil);
+  DefaultGraphicUtil = __decorate$D([injectable(), __param$h(0, inject(ContributionProvider)), __param$h(0, named(TextMeasureContribution)), __metadata$r("design:paramtypes", [Object])], DefaultGraphicUtil);
   var TransformMode;
   !function (TransformMode) {
     TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -4275,7 +4275,7 @@
     }]);
     return DefaultTransformUtil;
   }();
-  DefaultTransformUtil = __decorate$D([injectable(), __metadata$q("design:paramtypes", [])], DefaultTransformUtil);
+  DefaultTransformUtil = __decorate$D([injectable(), __metadata$r("design:paramtypes", [])], DefaultTransformUtil);
 
   var defaultThemeObj = {
       arc: DefaultArcAttribute,
@@ -6555,19 +6555,15 @@
       key: "getOffsetXY",
       value: function getOffsetXY(attr) {
         var includeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+        var _a, _b;
         var _this$attribute = this.attribute,
           _this$attribute$dx = _this$attribute.dx,
           dx = _this$attribute$dx === void 0 ? attr.dx : _this$attribute$dx,
           _this$attribute$dy = _this$attribute.dy,
           dy = _this$attribute$dy === void 0 ? attr.dy : _this$attribute$dy;
         if (includeScroll && this.parent) {
-          var groupTheme = getTheme(this.parent).group,
-            _this$parent$attribut = this.parent.attribute,
-            _this$parent$attribut2 = _this$parent$attribut.scrollX,
-            scrollX = _this$parent$attribut2 === void 0 ? groupTheme.scrollX : _this$parent$attribut2,
-            _this$parent$attribut3 = _this$parent$attribut.scrollY,
-            scrollY = _this$parent$attribut3 === void 0 ? groupTheme.scrollY : _this$parent$attribut3;
-          point.x = dx + scrollX, point.y = dy + scrollY;
+          var attribute = this.parent.attribute;
+          point.x = dx + (null !== (_a = attribute.scrollX) && void 0 !== _a ? _a : 0), point.y = dy + (null !== (_b = attribute.scrollY) && void 0 !== _b ? _b : 0);
         } else point.x = dx, point.y = dy;
         return point;
       }
@@ -7090,11 +7086,11 @@
       value: function doUpdateGlobalMatrix() {
         if (this.parent) {
           this._globalTransMatrix.multiply(this.transMatrix.a, this.transMatrix.b, this.transMatrix.c, this.transMatrix.d, this.transMatrix.e, this.transMatrix.f);
-          var _this$parent$attribut4 = this.parent.attribute,
-            _this$parent$attribut5 = _this$parent$attribut4.scrollX,
-            scrollX = _this$parent$attribut5 === void 0 ? 0 : _this$parent$attribut5,
-            _this$parent$attribut6 = _this$parent$attribut4.scrollY,
-            scrollY = _this$parent$attribut6 === void 0 ? 0 : _this$parent$attribut6;
+          var _this$parent$attribut = this.parent.attribute,
+            _this$parent$attribut2 = _this$parent$attribut.scrollX,
+            scrollX = _this$parent$attribut2 === void 0 ? 0 : _this$parent$attribut2,
+            _this$parent$attribut3 = _this$parent$attribut.scrollY,
+            scrollY = _this$parent$attribut3 === void 0 ? 0 : _this$parent$attribut3;
           this._globalTransMatrix.translate(scrollX, scrollY);
         }
       }
@@ -8088,7 +8084,7 @@
       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$p = 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);
     };
   var DefaultLayerService = /*#__PURE__*/function () {
@@ -8168,7 +8164,7 @@
     }]);
     return DefaultLayerService;
   }();
-  DefaultLayerService = __decorate$C([injectable(), __metadata$p("design:paramtypes", [])], DefaultLayerService);
+  DefaultLayerService = __decorate$C([injectable(), __metadata$q("design:paramtypes", [])], DefaultLayerService);
 
   var __decorate$B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -8177,7 +8173,7 @@
       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$o = 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);
     };
   var VWindow = Symbol["for"]("VWindow");
@@ -8330,7 +8326,7 @@
     }]);
     return DefaultWindow;
   }();
-  DefaultWindow = __decorate$B([injectable(), __metadata$o("design:paramtypes", [])], DefaultWindow);
+  DefaultWindow = __decorate$B([injectable(), __metadata$p("design:paramtypes", [])], DefaultWindow);
 
   var coreModule = new ContainerModule(function (bind) {
     bind(VGlobal).to(DefaultGlobal).inSingletonScope(), bind(VWindow).to(DefaultWindow), bind(GraphicUtil).to(DefaultGraphicUtil).inSingletonScope(), bind(TransformUtil).to(DefaultTransformUtil).inSingletonScope(), bind(LayerService).to(DefaultLayerService).inSingletonScope();
@@ -10101,32 +10097,37 @@
   }(BaseSymbol);
   var close$1 = new CloseSymbol();
 
-  function rect(ctx, size, x, y) {
+  function rectSizeArray(ctx, size, x, y) {
     return ctx.rect(x - size[0] / 2, y - size[1] / 2, size[0], size[1]), !1;
   }
+  function rectSize(ctx, size, x, y) {
+    var w = size,
+      h = size / 2;
+    return ctx.rect(x - w / 2, y - h / 2, w, h), !1;
+  }
   var RectSymbol = /*#__PURE__*/function (_BaseSymbol) {
     _inherits(RectSymbol, _BaseSymbol);
     var _super = _createSuper(RectSymbol);
     function RectSymbol() {
       var _this;
       _classCallCheck(this, RectSymbol);
-      _this = _super.apply(this, arguments), _this.type = "rect", _this.pathStr = "M-0.5,-0.5h1v1h-1Z";
+      _this = _super.apply(this, arguments), _this.type = "rect", _this.pathStr = "M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z";
       return _this;
     }
     _createClass(RectSymbol, [{
       key: "draw",
       value: function draw(ctx, size, x, y) {
-        return rect(ctx, vutils.isNumber(size) ? [size, size] : size, x, y);
+        return vutils.isNumber(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
       }
     }, {
       key: "drawOffset",
       value: function drawOffset(ctx, size, x, y, offset) {
-        return rect(ctx, vutils.isNumber(size) ? [size + 2 * offset, size + 2 * offset] : [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
+        return vutils.isNumber(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
       }
     }]);
     return RectSymbol;
   }(BaseSymbol);
-  var rect$1 = new RectSymbol();
+  var rect = new RectSymbol();
 
   var tempBounds = new vutils.AABBBounds();
   var CustomSymbolClass = /*#__PURE__*/function () {
@@ -10165,7 +10166,7 @@
     return CustomSymbolClass;
   }();
 
-  var builtinSymbols = [circle$1, cross$1, diamond$1, square$1, thinTriangle$1, triangle, star$1, arrow$1, wedge$1, stroke$1, wye$1, triangleLeft, triangleRight, triangleUp, triangleDown, arrow2Left$1, arrow2Right$1, arrow2Up$1, arrow2Down$1, rect$1, lineV$1, lineH$1, close$1];
+  var builtinSymbols = [circle$1, cross$1, diamond$1, square$1, thinTriangle$1, triangle, star$1, arrow$1, wedge$1, stroke$1, wye$1, triangleLeft, triangleRight, triangleUp, triangleDown, arrow2Left$1, arrow2Right$1, arrow2Up$1, arrow2Down$1, rect, lineV$1, lineH$1, close$1];
   var builtinSymbolsMap = {};
   builtinSymbols.forEach(function (symbol) {
     builtinSymbolsMap[symbol.type] = symbol;
@@ -10173,7 +10174,6 @@
   var builtInSymbolStrMap = {
     arrowLeft: "M 0.25 -0.5 L -0.25 0 l 0.5 0.5",
     arrowRight: "M -0.25 -0.5 l 0.5 0.5 l -0.5 0.5",
-    rect: "M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z",
     rectRound: "M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z",
     roundLine: "M 1.2392 -0.258 L -1.3432 -0.258 C -1.4784 -0.258 -1.588 -0.1436 -1.588 -0.002 c 0 0.1416 0.1096 0.256 0.2448 0.256 l 2.5824 0 c 0.1352 0 0.2448 -0.1144 0.2448 -0.256 C 1.484 -0.1436 1.3744 -0.258 1.2392 -0.258 z"
   };
@@ -11244,7 +11244,8 @@
         var _this2 = this;
         var _a;
         var _this$attribute = this.attribute,
-          textConfig = _this$attribute.textConfig,
+          _this$attribute$textC = _this$attribute.textConfig,
+          textConfig = _this$attribute$textC === void 0 ? [] : _this$attribute$textC,
           maxWidth = _this$attribute.maxWidth,
           maxHeight = _this$attribute.maxHeight,
           width = _this$attribute.width,
@@ -11972,7 +11973,7 @@
       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$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$g = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -12602,7 +12603,7 @@
     }]);
     return DefaultGraphicService;
   }();
-  DefaultGraphicService = __decorate$A([injectable(), __param$g(0, inject(GraphicCreator)), __metadata$n("design:paramtypes", [Object])], DefaultGraphicService);
+  DefaultGraphicService = __decorate$A([injectable(), __param$g(0, inject(GraphicCreator)), __metadata$o("design:paramtypes", [Object])], DefaultGraphicService);
 
   var ShadowRoot = /*#__PURE__*/function (_Group) {
     _inherits(ShadowRoot, _Group);
@@ -12724,6 +12725,12 @@
   }
   createRichText({});
 
+  var result = {
+    x: 0,
+    y: 0,
+    z: 0,
+    lastModelMatrix: null
+  };
   var BaseRender = /*#__PURE__*/function () {
     function BaseRender() {
       _classCallCheck(this, BaseRender);
@@ -12790,8 +12797,7 @@
       key: "transform",
       value: function transform(graphic, graphicAttribute, context) {
         var use3dMatrixIn3dMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-        var transMatrix = graphic.transMatrix,
-          _graphic$attribute2 = graphic.attribute,
+        var _graphic$attribute2 = graphic.attribute,
           _graphic$attribute2$x = _graphic$attribute2.x,
           x = _graphic$attribute2$x === void 0 ? graphicAttribute.x : _graphic$attribute2$x,
           _graphic$attribute2$y = _graphic$attribute2.y,
@@ -12805,16 +12811,11 @@
           _graphic$attribute2$a = _graphic$attribute2.angle,
           angle = _graphic$attribute2$a === void 0 ? graphicAttribute.angle : _graphic$attribute2$a,
           postMatrix = _graphic$attribute2.postMatrix,
-          onlyTranslate = transMatrix.onlyTranslate() && !postMatrix,
           lastModelMatrix = context.modelMatrix,
-          camera = context.camera,
-          result = {
-            x: x,
-            y: y,
-            z: z,
-            lastModelMatrix: lastModelMatrix
-          },
-          shouldTransform3d = camera && (use3dMatrixIn3dMode || shouldUseMat4(graphic));
+          camera = context.camera;
+        result.x = x, result.y = y, result.z = z, result.lastModelMatrix = lastModelMatrix;
+        var shouldTransform3d = camera && (use3dMatrixIn3dMode || shouldUseMat4(graphic)),
+          onlyTranslate = shouldTransform3d ? graphic.transMatrix.onlyTranslate() && !postMatrix : 1 === scaleX && 1 === scaleY && 0 === angle && !postMatrix;
         if (shouldTransform3d) {
           var nextModelMatrix = mat4Allocate.allocate(),
             modelMatrix = mat4Allocate.allocate();
@@ -12988,7 +12989,7 @@
       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$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$f = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -13041,7 +13042,7 @@
     }]);
     return DefaultBaseInteractiveRenderContribution;
   }();
-  DefaultBaseInteractiveRenderContribution = __decorate$z([injectable(), __param$f(0, inject(ContributionProvider)), __param$f(0, named(InteractiveSubRenderContribution)), __metadata$m("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+  DefaultBaseInteractiveRenderContribution = __decorate$z([injectable(), __param$f(0, inject(ContributionProvider)), __param$f(0, named(InteractiveSubRenderContribution)), __metadata$n("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
   var DefaultBaseTextureRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseTextureRenderContribution() {
       _classCallCheck(this, DefaultBaseTextureRenderContribution);
@@ -13661,7 +13662,7 @@
       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$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$e = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -13834,7 +13835,7 @@
     }]);
     return DefaultCanvasArcRender;
   }(BaseRender);
-  DefaultCanvasArcRender = __decorate$y([injectable(), __param$e(0, inject(ContributionProvider)), __param$e(0, named(ArcRenderContribution)), __metadata$l("design:paramtypes", [Object])], DefaultCanvasArcRender);
+  DefaultCanvasArcRender = __decorate$y([injectable(), __param$e(0, inject(ContributionProvider)), __param$e(0, named(ArcRenderContribution)), __metadata$m("design:paramtypes", [Object])], DefaultCanvasArcRender);
 
   var __decorate$x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -13843,7 +13844,7 @@
       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$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$d = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -13892,7 +13893,7 @@
     }]);
     return DefaultCanvasCircleRender;
   }(BaseRender);
-  DefaultCanvasCircleRender = __decorate$x([injectable(), __param$d(0, inject(ContributionProvider)), __param$d(0, named(CircleRenderContribution)), __metadata$k("design:paramtypes", [Object])], DefaultCanvasCircleRender);
+  DefaultCanvasCircleRender = __decorate$x([injectable(), __param$d(0, inject(ContributionProvider)), __param$d(0, named(CircleRenderContribution)), __metadata$l("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
   function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
     var _a;
@@ -14424,7 +14425,7 @@
       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$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$c = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -14697,7 +14698,7 @@
     }]);
     return DefaultCanvasAreaRender;
   }(BaseRender);
-  DefaultCanvasAreaRender = __decorate$v([injectable(), __param$c(0, inject(ContributionProvider)), __param$c(0, named(AreaRenderContribution)), __metadata$j("design:paramtypes", [Object])], DefaultCanvasAreaRender);
+  DefaultCanvasAreaRender = __decorate$v([injectable(), __param$c(0, inject(ContributionProvider)), __param$c(0, named(AreaRenderContribution)), __metadata$k("design:paramtypes", [Object])], DefaultCanvasAreaRender);
 
   var defaultPathTextureRenderContribution = defaultBaseTextureRenderContribution;
   var defaultPathBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
@@ -14709,7 +14710,7 @@
       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$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$b = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -14729,14 +14730,14 @@
     _createClass(DefaultCanvasPathRender, [{
       key: "drawShape",
       value: function drawShape(path, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a, _b;
-        var pathAttribute = getTheme(path, null == params ? void 0 : params.theme).path,
+        var _a, _b, _c;
+        var pathAttribute = null !== (_a = this.tempTheme) && void 0 !== _a ? _a : getTheme(path, null == params ? void 0 : params.theme).path,
           _path$attribute = path.attribute,
           _path$attribute$x = _path$attribute.x,
           originX = _path$attribute$x === void 0 ? pathAttribute.x : _path$attribute$x,
           _path$attribute$y = _path$attribute.y,
           originY = _path$attribute$y === void 0 ? pathAttribute.y : _path$attribute$y,
-          z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
+          z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
           data = this.valid(path, pathAttribute, fillCb, strokeCb);
         if (!data) return;
         var fVisible = data.fVisible,
@@ -14744,7 +14745,7 @@
           doFill = data.doFill,
           doStroke = data.doStroke;
         if (context.beginPath(), path.pathShape) renderCommandList(path.pathShape.commandList, context, x, y, 1, 1, z);else {
-          var path2D = null !== (_b = path.attribute.path) && void 0 !== _b ? _b : pathAttribute.path;
+          var path2D = null !== (_c = path.attribute.path) && void 0 !== _c ? _c : pathAttribute.path;
           renderCommandList(path2D.commandList, context, x, y, 1, 1, z);
         }
         context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb), doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke())), doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill())), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
@@ -14753,12 +14754,12 @@
       key: "draw",
       value: function draw(path, renderService, drawContext, params) {
         var pathAttribute = getTheme(path, null == params ? void 0 : params.theme).path;
-        this._draw(path, pathAttribute, !1, drawContext, params);
+        this.tempTheme = pathAttribute, this._draw(path, pathAttribute, !1, drawContext, params), this.tempTheme = null;
       }
     }]);
     return DefaultCanvasPathRender;
   }(BaseRender);
-  DefaultCanvasPathRender = __decorate$u([injectable(), __param$b(0, inject(ContributionProvider)), __param$b(0, named(PathRenderContribution)), __metadata$i("design:paramtypes", [Object])], DefaultCanvasPathRender);
+  DefaultCanvasPathRender = __decorate$u([injectable(), __param$b(0, inject(ContributionProvider)), __param$b(0, named(PathRenderContribution)), __metadata$j("design:paramtypes", [Object])], DefaultCanvasPathRender);
 
   var __decorate$t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -14767,7 +14768,7 @@
       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$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$a = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -14787,7 +14788,8 @@
     _createClass(DefaultCanvasRectRender, [{
       key: "drawShape",
       value: function drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect,
+        var _a;
+        var rectAttribute = null !== (_a = this.tempTheme) && void 0 !== _a ? _a : getTheme(rect, null == params ? void 0 : params.theme).rect,
           _rect$attribute = rect.attribute,
           _rect$attribute$fill = _rect$attribute.fill,
           fill = _rect$attribute$fill === void 0 ? rectAttribute.fill : _rect$attribute$fill,
@@ -14834,12 +14836,12 @@
       key: "draw",
       value: function draw(rect, renderService, drawContext, params) {
         var rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect;
-        this._draw(rect, rectAttribute, !1, drawContext, params);
+        this.tempTheme = rectAttribute, this._draw(rect, rectAttribute, !1, drawContext, params), this.tempTheme = null;
       }
     }]);
     return DefaultCanvasRectRender;
   }(BaseRender);
-  DefaultCanvasRectRender = __decorate$t([injectable(), __param$a(0, inject(ContributionProvider)), __param$a(0, named(RectRenderContribution)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasRectRender);
+  DefaultCanvasRectRender = __decorate$t([injectable(), __param$a(0, inject(ContributionProvider)), __param$a(0, named(RectRenderContribution)), __metadata$i("design:paramtypes", [Object])], DefaultCanvasRectRender);
 
   var __decorate$s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -14848,7 +14850,7 @@
       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$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$9 = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -14912,7 +14914,7 @@
     }]);
     return DefaultCanvasSymbolRender;
   }(BaseRender);
-  DefaultCanvasSymbolRender = __decorate$s([injectable(), __param$9(0, inject(ContributionProvider)), __param$9(0, named(SymbolRenderContribution)), __metadata$g("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
+  DefaultCanvasSymbolRender = __decorate$s([injectable(), __param$9(0, inject(ContributionProvider)), __param$9(0, named(SymbolRenderContribution)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
   var __decorate$r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -14921,7 +14923,7 @@
       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$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$8 = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -15142,7 +15144,7 @@
     }]);
     return DefaultCanvasTextRender;
   }(BaseRender);
-  DefaultCanvasTextRender = __decorate$r([injectable(), __param$8(0, inject(ContributionProvider)), __param$8(0, named(TextRenderContribution)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasTextRender);
+  DefaultCanvasTextRender = __decorate$r([injectable(), __param$8(0, inject(ContributionProvider)), __param$8(0, named(TextRenderContribution)), __metadata$g("design:paramtypes", [Object])], DefaultCanvasTextRender);
 
   var __decorate$q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
@@ -15217,7 +15219,7 @@
       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$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$7 = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -15268,7 +15270,7 @@
     }]);
     return DefaultCanvasPolygonRender;
   }(BaseRender);
-  DefaultCanvasPolygonRender = __decorate$p([injectable(), __param$7(0, inject(ContributionProvider)), __param$7(0, named(PolygonRenderContribution)), __metadata$e("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
+  DefaultCanvasPolygonRender = __decorate$p([injectable(), __param$7(0, inject(ContributionProvider)), __param$7(0, named(PolygonRenderContribution)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
 
   var __decorate$o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -15277,7 +15279,7 @@
       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$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$6 = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -15348,7 +15350,7 @@
     }]);
     return DefaultCanvasImageRender;
   }(BaseRender);
-  DefaultCanvasImageRender = __decorate$o([injectable(), __param$6(0, inject(ContributionProvider)), __param$6(0, named(ImageRenderContribution)), __metadata$d("design:paramtypes", [Object])], DefaultCanvasImageRender);
+  DefaultCanvasImageRender = __decorate$o([injectable(), __param$6(0, inject(ContributionProvider)), __param$6(0, named(ImageRenderContribution)), __metadata$e("design:paramtypes", [Object])], DefaultCanvasImageRender);
 
   var IncrementalDrawContribution = Symbol["for"]("IncrementalDrawContribution");
   var ArcRender = Symbol["for"]("ArcRender");
@@ -15377,7 +15379,7 @@
       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$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$5 = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -15395,7 +15397,7 @@
       key: "prepare",
       value: function prepare(updateBounds) {
         var _this = this;
-        this.renderTreeRoots.forEach(function (g) {
+        updateBounds && this.renderTreeRoots.forEach(function (g) {
           _this._prepare(g, updateBounds);
         });
       }
@@ -15436,7 +15438,7 @@
     }]);
     return DefaultRenderService;
   }();
-  DefaultRenderService = __decorate$n([injectable(), __param$5(0, inject(DrawContribution)), __metadata$c("design:paramtypes", [Object])], DefaultRenderService);
+  DefaultRenderService = __decorate$n([injectable(), __param$5(0, inject(DrawContribution)), __metadata$d("design:paramtypes", [Object])], DefaultRenderService);
 
   var renderModule$1 = new ContainerModule(function (bind) {
     bind(RenderService).to(DefaultRenderService).inSingletonScope();
@@ -15610,7 +15612,7 @@
       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$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$4 = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -15661,7 +15663,7 @@
     }]);
     return DefaultPluginService;
   }();
-  DefaultPluginService = __decorate$l([injectable(), __param$4(0, inject(ContributionProvider)), __param$4(0, named(AutoEnablePlugins)), __metadata$b("design:paramtypes", [Object])], DefaultPluginService);
+  DefaultPluginService = __decorate$l([injectable(), __param$4(0, inject(ContributionProvider)), __param$4(0, named(AutoEnablePlugins)), __metadata$c("design:paramtypes", [Object])], DefaultPluginService);
 
   var pluginModule = new ContainerModule(function (bind) {
     bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -15682,7 +15684,7 @@
       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$b = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var CanvasLayerHandlerContribution = /*#__PURE__*/function () {
@@ -15775,7 +15777,7 @@
     }]);
     return CanvasLayerHandlerContribution;
   }();
-  CanvasLayerHandlerContribution = __decorate$k([injectable(), __metadata$a("design:paramtypes", [])], CanvasLayerHandlerContribution);
+  CanvasLayerHandlerContribution = __decorate$k([injectable(), __metadata$b("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
   var __decorate$j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -15784,7 +15786,7 @@
       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$a = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var EmptyLayerHandlerContribution = /*#__PURE__*/function () {
@@ -15842,7 +15844,7 @@
     }]);
     return EmptyLayerHandlerContribution;
   }();
-  EmptyLayerHandlerContribution = __decorate$j([injectable(), __metadata$9("design:paramtypes", [])], EmptyLayerHandlerContribution);
+  EmptyLayerHandlerContribution = __decorate$j([injectable(), __metadata$a("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
   var __decorate$i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -15851,7 +15853,7 @@
       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$9 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var OffscreenLayerHandlerContribution = /*#__PURE__*/function () {
@@ -15938,7 +15940,7 @@
     }]);
     return OffscreenLayerHandlerContribution;
   }();
-  OffscreenLayerHandlerContribution = __decorate$i([injectable(), __metadata$8("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+  OffscreenLayerHandlerContribution = __decorate$i([injectable(), __metadata$9("design:paramtypes", [])], 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);
@@ -16066,12 +16068,15 @@
   }
 
   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;
-  };
+      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) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    };
   var DrawItemInterceptor = Symbol["for"]("DrawItemInterceptor");
   var tempDirtyBounds = new vutils.AABBBounds();
   var ShadowRootDrawItemInterceptorContribution = /*#__PURE__*/function () {
@@ -16104,21 +16109,15 @@
     }]);
     return ShadowRootDrawItemInterceptorContribution;
   }();
-  ShadowRootDrawItemInterceptorContribution = __decorate$h([injectable()], ShadowRootDrawItemInterceptorContribution);
-  var CommonDrawItemInterceptorContribution = /*#__PURE__*/function () {
-    function CommonDrawItemInterceptorContribution() {
-      _classCallCheck(this, CommonDrawItemInterceptorContribution);
-      this.order = 1;
+  var DebugDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function DebugDrawItemInterceptorContribution() {
+      _classCallCheck(this, DebugDrawItemInterceptorContribution);
+      this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution()];
     }
-    _createClass(CommonDrawItemInterceptorContribution, [{
+    _createClass(DebugDrawItemInterceptorContribution, [{
       key: "afterDrawItem",
       value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-    }, {
-      key: "beforeDrawItem",
-      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+        return graphic.attribute._debug_bounds && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
       }
     }, {
       key: "drawItem",
@@ -16130,9 +16129,30 @@
         return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
       }
     }]);
+    return DebugDrawItemInterceptorContribution;
+  }();
+  var CommonDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function CommonDrawItemInterceptorContribution() {
+      _classCallCheck(this, CommonDrawItemInterceptorContribution);
+      this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
+    }
+    _createClass(CommonDrawItemInterceptorContribution, [{
+      key: "afterDrawItem",
+      value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        for (var i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+    }, {
+      key: "beforeDrawItem",
+      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
+        for (var i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+    }]);
     return CommonDrawItemInterceptorContribution;
   }();
-  CommonDrawItemInterceptorContribution = __decorate$h([injectable()], CommonDrawItemInterceptorContribution);
+  CommonDrawItemInterceptorContribution = __decorate$h([injectable(), __metadata$8("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
   var InteractiveDrawItemInterceptorContribution = /*#__PURE__*/function () {
     function InteractiveDrawItemInterceptorContribution() {
       _classCallCheck(this, InteractiveDrawItemInterceptorContribution);
@@ -16191,7 +16211,6 @@
     }]);
     return InteractiveDrawItemInterceptorContribution;
   }();
-  InteractiveDrawItemInterceptorContribution = __decorate$h([injectable()], InteractiveDrawItemInterceptorContribution);
   var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DDrawItemInterceptor() {
       _classCallCheck(this, Canvas3DDrawItemInterceptor);
@@ -16282,7 +16301,6 @@
     }]);
     return Canvas3DDrawItemInterceptor;
   }();
-  Canvas3DDrawItemInterceptor = __decorate$h([injectable()], Canvas3DDrawItemInterceptor);
 
   var DefaultBoundsAllocate = /*#__PURE__*/function () {
     function DefaultBoundsAllocate() {
@@ -16360,9 +16378,7 @@
     }, {
       key: "prepareForDraw",
       value: function prepareForDraw(renderService, drawContext) {
-        renderService.renderTreeRoots.reduce(function (a, b) {
-          return a + b.count;
-        }, 0) < this.global.optmizeSkipCheckBoundariesThreshold ? this.useDirtyBounds = !1 : this.useDirtyBounds = !0;
+        drawContext.updateBounds ? this.useDirtyBounds = !0 : this.useDirtyBounds = !drawContext.stage.params.optimize.disableCheckGraphicWidthOutRange;
       }
     }, {
       key: "draw",
@@ -16416,7 +16432,8 @@
         if (drawContext["break"] || !1 === group.attribute.visibleAll) return;
         if (group.incremental && (null == drawContext.startAtId || drawContext.startAtId === group._uid)) return drawContext["break"] = !0, void this._increaseRender(group, drawContext);
         if (this.useDirtyBounds && !vutils.isRectIntersect(group.AABBBounds, this.dirtyBounds, !1)) return;
-        var nextM, tempBounds;
+        var tempBounds,
+          nextM = parentMatrix;
         if (this.useDirtyBounds) {
           tempBounds = boundsAllocate.allocateByObj(this.dirtyBounds);
           var gm = group.transMatrix;
@@ -17684,7 +17701,7 @@
   DefaultCanvasPyramid3dRender = __decorate$7([injectable()], DefaultCanvasPyramid3dRender);
 
   var renderModule = new ContainerModule(function (bind) {
-    bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(DefaultCanvasCircleRender).inSingletonScope(), bind(GraphicRender).toService(CircleRender), bindContributionProvider(bind, CircleRenderContribution), bind(DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(DefaultCanvasRectRender).inSingletonScope(), bind(GraphicRender).toService(RectRender), bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope(), bind(GraphicRender).toService(Rect3DRender), bindContributionProvider(bind, RectRenderContribution), bind(TextRender).to(DefaultCanvasTextRender).inSingletonScope(), bind(GraphicRender).toService(TextRender), bindContributionProvider(bind, TextRenderContribution), bind(DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(DefaultCanvasPathRender).inSingletonScope(), bind(GraphicRender).toService(PathRender), bindContributionProvider(bind, PathRenderContribution), bind(DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(DefaultCanvasSymbolRender).inSingletonScope(), bind(GraphicRender).toService(SymbolRender), bindContributionProvider(bind, SymbolRenderContribution), bind(DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(DefaultCanvasArcRender).inSingletonScope(), bind(GraphicRender).toService(ArcRender), bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope(), bind(GraphicRender).toService(Arc3dRender), bindContributionProvider(bind, ArcRenderContribution), bind(DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(DefaultCanvasLineRender).inSingletonScope(), bind(GraphicRender).toService(LineRender), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope(), bind(DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(DefaultCanvasAreaRender).inSingletonScope(), bind(GraphicRender).toService(AreaRender), bindContributionProvider(bind, AreaRenderContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(PolygonRender).to(DefaultCanvasPolygonRender).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bindContributionProvider(bind, PolygonRenderContribution), bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope(), bind(GraphicRender).toService(GlyphRender), bind(ImageRender).to(DefaultCanvasImageRender).inSingletonScope(), bind(GraphicRender).toService(ImageRender), bindContributionProvider(bind, ImageRenderContribution), bind(RichTextRender).to(DefaultCanvasRichTextRender).inSingletonScope(), bind(GraphicRender).toService(RichTextRender), bind(Pyramid3dRender).to(DefaultCanvasPyramid3dRender).inSingletonScope(), 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);
+    bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(DefaultCanvasCircleRender).inSingletonScope(), bind(GraphicRender).toService(CircleRender), bindContributionProvider(bind, CircleRenderContribution), bind(DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(DefaultCanvasRectRender).inSingletonScope(), bind(GraphicRender).toService(RectRender), bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope(), bind(GraphicRender).toService(Rect3DRender), bindContributionProvider(bind, RectRenderContribution), bind(TextRender).to(DefaultCanvasTextRender).inSingletonScope(), bind(GraphicRender).toService(TextRender), bindContributionProvider(bind, TextRenderContribution), bind(DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(DefaultCanvasPathRender).inSingletonScope(), bind(GraphicRender).toService(PathRender), bindContributionProvider(bind, PathRenderContribution), bind(DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(DefaultCanvasSymbolRender).inSingletonScope(), bind(GraphicRender).toService(SymbolRender), bindContributionProvider(bind, SymbolRenderContribution), bind(DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(DefaultCanvasArcRender).inSingletonScope(), bind(GraphicRender).toService(ArcRender), bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope(), bind(GraphicRender).toService(Arc3dRender), bindContributionProvider(bind, ArcRenderContribution), bind(DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(DefaultCanvasLineRender).inSingletonScope(), bind(GraphicRender).toService(LineRender), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope(), bind(DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(DefaultCanvasAreaRender).inSingletonScope(), bind(GraphicRender).toService(AreaRender), bindContributionProvider(bind, AreaRenderContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(PolygonRender).to(DefaultCanvasPolygonRender).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bindContributionProvider(bind, PolygonRenderContribution), bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope(), bind(GraphicRender).toService(GlyphRender), bind(ImageRender).to(DefaultCanvasImageRender).inSingletonScope(), bind(GraphicRender).toService(ImageRender), bindContributionProvider(bind, ImageRenderContribution), bind(RichTextRender).to(DefaultCanvasRichTextRender).inSingletonScope(), bind(GraphicRender).toService(RichTextRender), bind(Pyramid3dRender).to(DefaultCanvasPyramid3dRender).inSingletonScope(), 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(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
   });
 
   function load(container) {
@@ -20691,6 +20708,45 @@
       var _a, _b;
       return (_b = (_a = animationEffects[type]) === null || _a === void 0 ? void 0 : _a.call(animationEffects, textAttribute)) !== null && _b !== void 0 ? _b : { from: {}, to: {} };
   }
+  function updateAnimation(prev, next, animationConfig) {
+      if (!vutils.isArray(animationConfig)) {
+          const { duration, easing, increaseEffect = true } = animationConfig;
+          prev.animate().to(next.attribute, duration, easing);
+          increaseEffect && playIncreaseCount(prev, next, duration, easing);
+          return;
+      }
+      animationConfig.forEach((cfg, i) => {
+          const { duration, easing, increaseEffect = true, channel } = cfg;
+          const { from, to } = update(prev, next, channel, cfg.options);
+          if (!vutils.isEmpty(to)) {
+              prev.animate().to(to, duration, easing);
+          }
+          if ('text' in from && 'text' in to && increaseEffect) {
+              playIncreaseCount(prev, next, duration, easing);
+          }
+      });
+  }
+  const update = (prev, next, channel, options) => {
+      const from = Object.assign({}, prev.attribute);
+      const to = Object.assign({}, next.attribute);
+      vutils.array(options === null || options === void 0 ? void 0 : options.excludeChannels).forEach(key => {
+          delete to[key];
+      });
+      Object.keys(to).forEach(key => {
+          if (channel && !channel.includes(key)) {
+              delete to[key];
+          }
+      });
+      return { from, to };
+  };
+  function playIncreaseCount(prev, next, duration, easing) {
+      if (prev.attribute.text !== next.attribute.text &&
+          vutils.isValidNumber(Number(prev.attribute.text) * Number(next.attribute.text))) {
+          prev
+              .animate()
+              .play(new IncreaseCount({ text: prev.attribute.text }, { text: next.attribute.text }, duration, easing));
+      }
+  }
   const DefaultLabelAnimation = {
       mode: 'same-time',
       duration: 300,
@@ -20884,6 +20940,24 @@
       }
       return points;
   };
+  function labelingLineOrArea(textBounds, graphicBounds, position = 'end', offset = 0) {
+      if (!textBounds || !graphicBounds) {
+          return;
+      }
+      const { x1, x2 } = textBounds;
+      const width = Math.abs(x2 - x1);
+      const anchorX = graphicBounds.x1;
+      const anchorY = graphicBounds.y1;
+      let x = anchorX;
+      const y = anchorY;
+      if (position === 'end') {
+          x = anchorX + width / 2 + offset;
+      }
+      else if (position === 'start') {
+          x = anchorX - width / 2 - offset;
+      }
+      return { x, y };
+  }
 
   class LabelBase extends AbstractComponent {
       setBitmap(bitmap) {
@@ -21037,7 +21111,7 @@
           return text;
       }
       _prepare() {
-          var _a, _b, _c, _d;
+          var _a, _b, _c, _d, _e;
           const currentBaseMarks = [];
           let baseMarks;
           if (vutils.isFunction(this.attribute.getBaseMarks)) {
@@ -21054,7 +21128,7 @@
           (_a = this._idToGraphic) === null || _a === void 0 ? void 0 : _a.clear();
           (_b = this._idToPoint) === null || _b === void 0 ? void 0 : _b.clear();
           this._baseMarks = currentBaseMarks;
-          this._isCollectionBase = ((_c = currentBaseMarks === null || currentBaseMarks === void 0 ? void 0 : currentBaseMarks[0]) === null || _c === void 0 ? void 0 : _c.type) === 'line' || ((_d = currentBaseMarks === null || currentBaseMarks === void 0 ? void 0 : currentBaseMarks[0]) === null || _d === void 0 ? void 0 : _d.type) === 'area';
+          this._isCollectionBase = this.attribute.type === 'line-data';
           if (!currentBaseMarks || currentBaseMarks.length === 0) {
               return;
           }
@@ -21100,6 +21174,15 @@
                   }
               }
           }
+          if (this.attribute.animation !== false) {
+              this._animationConfig = {
+                  enter: vutils.merge({}, DefaultLabelAnimation, this.attribute.animation, (_c = this.attribute.animationEnter) !== null && _c !== void 0 ? _c : {}),
+                  exit: vutils.merge({}, DefaultLabelAnimation, this.attribute.animation, (_d = this.attribute.animationExit) !== null && _d !== void 0 ? _d : {}),
+                  update: vutils.isArray(this.attribute.animationUpdate)
+                      ? this.attribute.animationUpdate
+                      : vutils.merge({}, DefaultLabelAnimation, this.attribute.animation, (_e = this.attribute.animationUpdate) !== null && _e !== void 0 ? _e : {})
+              };
+          }
       }
       getRelatedGrphic(item) {
           return this._idToGraphic.get(item.id);
@@ -21247,12 +21330,6 @@
           }
       }
       _renderWithAnimation(labels) {
-          var _a, _b, _c, _d, _e;
-          const animationConfig = ((_a = this.attribute.animation) !== null && _a !== void 0 ? _a : {});
-          const mode = (_b = animationConfig.mode) !== null && _b !== void 0 ? _b : DefaultLabelAnimation.mode;
-          const duration = (_c = animationConfig.duration) !== null && _c !== void 0 ? _c : DefaultLabelAnimation.duration;
-          const easing = (_d = animationConfig.easing) !== null && _d !== void 0 ? _d : DefaultLabelAnimation.easing;
-          const delay = (_e = animationConfig.delay) !== null && _e !== void 0 ? _e : 0;
           const currentTextMap = new Map();
           const prevTextMap = this._graphicToText || new Map();
           const texts = [];
@@ -21276,13 +21353,7 @@
                       this._syncStateWithRelatedGraphic(relatedGraphic);
                       relatedGraphic.once('animate-bind', a => {
                           text.setAttributes(from);
-                          const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
-                              mode,
-                              duration,
-                              easing,
-                              to,
-                              delay
-                          });
+                          const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, this._animationConfig.enter);
                           relatedGraphic.on('afterAttributeUpdate', listener);
                       });
                   }
@@ -21292,25 +21363,19 @@
                   prevTextMap.delete(textKey);
                   currentTextMap.set(textKey, prevLabel);
                   const prevText = prevLabel.text;
-                  prevText.animate().to(text.attribute, duration, easing);
+                  const { duration, easing } = this._animationConfig.update;
+                  updateAnimation(prevText, text, this._animationConfig.update);
                   if (prevLabel.labelLine) {
                       prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
                           visible: (_f = (_d = (((_b = (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.line) === null || _b === void 0 ? void 0 : _b.visible) && ((_c = text.attribute) === null || _c === void 0 ? void 0 : _c.visible))) !== null && _d !== void 0 ? _d : (_e = text.attribute) === null || _e === void 0 ? void 0 : _e.visible) !== null && _f !== void 0 ? _f : true,
                           points: (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.points
                       }), duration, easing);
                   }
-                  if (animationConfig.increaseEffect !== false &&
-                      prevText.attribute.text !== text.attribute.text &&
-                      vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
-                      prevText
-                          .animate()
-                          .play(new IncreaseCount({ text: prevText.attribute.text }, { text: text.attribute.text }, duration, easing));
-                  }
               }
           });
           prevTextMap.forEach(label => {
               var _a;
-              (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
+              (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, this._animationConfig.exit.duration, this._animationConfig.exit.easing).onEnd(() => {
                   this.removeChild(label.text);
                   if (label === null || label === void 0 ? void 0 : label.labelLine) {
                       this.removeChild(label.labelLine);
@@ -21359,7 +21424,7 @@
               relatedGraphic.on('afterAttributeUpdate', this._handleRelatedGraphicSetState);
           }
       }
-      _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
+      _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, { mode, duration, easing, delay }) {
           const listener = (event) => {
               var _a, _b;
               const { detail } = event;
@@ -21377,7 +21442,7 @@
                   text.setAttributes(to);
                   return;
               }
-              const onEnd = () => {
+              const onStart = () => {
                   if (relatedGraphic) {
                       relatedGraphic.onAnimateBind = undefined;
                       relatedGraphic.removeEventListener('afterAttributeUpdate', listener);
@@ -21386,14 +21451,14 @@
               switch (mode) {
                   case 'after':
                       if (detail.animationState.end) {
-                          text.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                          text.animate({ onStart }).wait(delay).to(to, duration, easing);
                       }
                       break;
                   case 'after-all':
                       if (index === texts.length - 1) {
                           if (detail.animationState.end) {
                               texts.forEach(t => {
-                                  t.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                                  t.animate({ onStart }).wait(delay).to(to, duration, easing);
                               });
                           }
                       }
@@ -21404,12 +21469,12 @@
                           const point = this._idToPoint.get(text.attribute.id);
                           if (point &&
                               (!text.animates || !text.animates.has('label-animate')) &&
-                              this._baseMarks[0].containsPoint(point.x, point.y, IContainPointMode.LOCAL, (_b = this.stage) === null || _b === void 0 ? void 0 : _b.pickerService)) {
-                              text.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                              relatedGraphic.containsPoint(point.x, point.y, IContainPointMode.LOCAL, (_b = this.stage) === null || _b === void 0 ? void 0 : _b.pickerService)) {
+                              text.animate({ onStart }).wait(delay).to(to, duration, easing);
                           }
                       }
                       else if (detail.animationState.isFirstFrameOfStep) {
-                          text.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                          text.animate({ onStart }).wait(delay).to(to, duration, easing);
                       }
                       break;
               }
@@ -21643,22 +21708,7 @@
           };
       }
       labeling(textBounds, graphicBounds, position = 'end', offset = 0) {
-          if (!textBounds || !graphicBounds) {
-              return;
-          }
-          const { x1, x2 } = textBounds;
-          const width = Math.abs(x2 - x1);
-          const anchorX = graphicBounds.x1;
-          const anchorY = graphicBounds.y1;
-          let x = anchorX;
-          const y = anchorY;
-          if (position === 'end') {
-              x = anchorX + width / 2 + offset;
-          }
-          else if (position === 'start') {
-              x = anchorX - width / 2 - offset;
-          }
-          return { x, y };
+          return labelingLineOrArea(textBounds, graphicBounds, position, offset);
       }
   }
   LineLabel.defaultAttributes = {
@@ -22420,10 +22470,49 @@
       pickable: false
   };
 
+  class AreaLabel extends LabelBase {
+      constructor(attributes) {
+          super(vutils.merge({}, AreaLabel.defaultAttributes, attributes));
+          this.name = 'line-label';
+      }
+      getGraphicBounds(graphic, point = {}) {
+          var _a;
+          if (graphic.type !== 'area') {
+              return super.getGraphicBounds(graphic, point);
+          }
+          const { position = 'end' } = this.attribute;
+          const points = ((_a = graphic === null || graphic === void 0 ? void 0 : graphic.attribute) === null || _a === void 0 ? void 0 : _a.points) || [point];
+          const index = position === 'start' ? 0 : points.length - 1;
+          return {
+              x1: points[index].x,
+              x2: points[index].x,
+              y1: points[index].y,
+              y2: points[index].y
+          };
+      }
+      labeling(textBounds, graphicBounds, position = 'end', offset = 0) {
+          return labelingLineOrArea(textBounds, graphicBounds, position, offset);
+      }
+  }
+  AreaLabel.defaultAttributes = {
+      textStyle: {
+          fontSize: 12,
+          fill: '#000',
+          textAlign: 'center',
+          textBaseline: 'middle',
+          boundsPadding: [-1, 0, -1, 0]
+      },
+      position: 'end',
+      offset: 6,
+      pickable: false
+  };
+
   const labelComponentMap = {
       rect: RectLabel,
       symbol: SymbolLabel,
       arc: ArcLabel,
+      line: LineLabel,
+      area: AreaLabel,
       'line-data': LineDataLabel
   };
   class DataLabel extends AbstractComponent {
@@ -22432,6 +22521,7 @@
           this.name = 'data-label';
       }
       render() {
+          var _a;
           const { dataLabels, size } = this.attribute;
           if (!dataLabels || dataLabels.length === 0) {
               return;
@@ -22451,20 +22541,21 @@
               const dataLabel = dataLabels[i];
               const labelComponent = labelComponentMap[dataLabel.type] || LabelBase;
               if (labelComponent) {
-                  const { baseMarkGroupName } = dataLabel;
-                  let component = this._componentMap.get(baseMarkGroupName);
+                  const { baseMarkGroupName, type } = dataLabel;
+                  const id = (_a = dataLabel.id) !== null && _a !== void 0 ? _a : `${baseMarkGroupName}-${type}-${i}`;
+                  let component = this._componentMap.get(id);
                   if (component) {
                       component.setBitmapTool(tool);
                       component.setBitmap(bitmap);
                       component.setAttributes(dataLabel);
-                      currentComponentMap.set(baseMarkGroupName, component);
+                      currentComponentMap.set(id, component);
                   }
                   else {
                       component = new labelComponent(dataLabel);
                       component.setBitmap(bitmap);
                       component.setBitmapTool(tool);
                       this.add(component);
-                      currentComponentMap.set(baseMarkGroupName, component);
+                      currentComponentMap.set(id, component);
                   }
               }
           }
@@ -24710,13 +24801,6 @@
   }
   vutils.mixin(CircleAxisGrid, CircleAxisMixin);
 
-  var DataZoomActiveTag;
-  (function (DataZoomActiveTag) {
-      DataZoomActiveTag["startHandler"] = "startHandler";
-      DataZoomActiveTag["endHandler"] = "endHandler";
-      DataZoomActiveTag["middleHandler"] = "middleHandler";
-      DataZoomActiveTag["background"] = "background";
-  })(DataZoomActiveTag || (DataZoomActiveTag = {}));
   const DEFAULT_DATA_ZOOM_ATTRIBUTES = {
       orient: 'bottom',
       showDetail: 'auto',
@@ -24815,6 +24899,14 @@
       }
   };
 
+  exports.DataZoomActiveTag = void 0;
+  (function (DataZoomActiveTag) {
+      DataZoomActiveTag["startHandler"] = "startHandler";
+      DataZoomActiveTag["endHandler"] = "endHandler";
+      DataZoomActiveTag["middleHandler"] = "middleHandler";
+      DataZoomActiveTag["background"] = "background";
+  })(exports.DataZoomActiveTag || (exports.DataZoomActiveTag = {}));
+
   const delayMap$1 = {
       debounce: vutils.debounce,
       throttle: vutils.throttle
@@ -24842,23 +24934,23 @@
           this._onHandlerPointerDown = (e, tag) => {
               e.stopPropagation();
               if (tag === 'start') {
-                  this._activeTag = DataZoomActiveTag.startHandler;
+                  this._activeTag = exports.DataZoomActiveTag.startHandler;
                   this._activeItem = this._startHandler;
               }
               else if (tag === 'end') {
-                  this._activeTag = DataZoomActiveTag.endHandler;
+                  this._activeTag = exports.DataZoomActiveTag.endHandler;
                   this._activeItem = this._endHandler;
               }
               else if (tag === 'middleRect') {
-                  this._activeTag = DataZoomActiveTag.middleHandler;
+                  this._activeTag = exports.DataZoomActiveTag.middleHandler;
                   this._activeItem = this._middleHandlerRect;
               }
               else if (tag === 'middleSymbol') {
-                  this._activeTag = DataZoomActiveTag.middleHandler;
+                  this._activeTag = exports.DataZoomActiveTag.middleHandler;
                   this._activeItem = this._middleHandlerSymbol;
               }
               else if (tag === 'background') {
-                  this._activeTag = DataZoomActiveTag.background;
+                  this._activeTag = exports.DataZoomActiveTag.background;
                   this._activeItem = this._background;
               }
               this._activeState = true;
@@ -24866,6 +24958,7 @@
               this._activeCache.lastPos = this.eventPosToStagePos(e);
           };
           this._onHandlerPointerMove = (e) => {
+              var _a;
               e.stopPropagation();
               const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
               const pos = this.eventPosToStagePos(e);
@@ -24873,24 +24966,24 @@
               const dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
               let { start, end } = this.state;
               if (this._activeState) {
-                  if (this._activeTag === DataZoomActiveTag.middleHandler) {
+                  if (this._activeTag === exports.DataZoomActiveTag.middleHandler) {
                       this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis);
                   }
-                  else if (this._activeTag === DataZoomActiveTag.startHandler) {
+                  else if (this._activeTag === exports.DataZoomActiveTag.startHandler) {
                       if (start + dis > end) {
                           start = end;
                           end = start + dis;
-                          this._activeTag = DataZoomActiveTag.endHandler;
+                          this._activeTag = exports.DataZoomActiveTag.endHandler;
                       }
                       else {
                           start = start + dis;
                       }
                   }
-                  else if (this._activeTag === DataZoomActiveTag.endHandler) {
+                  else if (this._activeTag === exports.DataZoomActiveTag.endHandler) {
                       if (end + dis < start) {
                           end = start;
                           start = end + dis;
-                          this._activeTag = DataZoomActiveTag.startHandler;
+                          this._activeTag = exports.DataZoomActiveTag.startHandler;
                       }
                       else {
                           end = end + dis;
@@ -24903,7 +24996,7 @@
               end = Math.min(Math.max(end, 0), 1);
               if (startAttr !== start || endAttr !== end) {
                   this.setStateAttr(start, end, true);
-                  realTime && this._updateStateCallback && this._updateStateCallback(start, end);
+                  realTime && ((_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, start, end, this._activeTag));
                   this._dispatchChangeEvent(start, end);
               }
           };
@@ -25008,10 +25101,11 @@
           };
       }
       _onHandlerPointerUp(e) {
+          var _a;
           e.preventDefault();
           const { start, end, brushSelect, realTime = true } = this.attribute;
           if (this._activeState) {
-              if (this._activeTag === DataZoomActiveTag.background) {
+              if (this._activeTag === exports.DataZoomActiveTag.background) {
                   const pos = this.eventPosToStagePos(e);
                   this.backgroundDragZoom(this._activeCache.startPos, pos);
               }
@@ -25020,7 +25114,7 @@
           brushSelect && this.renderDragMask();
           if (!realTime || start !== this.state.start || end !== this.state.end) {
               this.setStateAttr(this.state.start, this.state.end, true);
-              this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end);
+              (_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, this.state.start, this.state.end, this._activeTag);
               this._dispatchChangeEvent(this.state.start, this.state.end);
           }
       }
@@ -25070,11 +25164,11 @@
           const { dragMaskStyle } = this.attribute;
           const { position, width, height } = this.getLayoutAttrFromConfig();
           if (this._isHorizontal) {
-              this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width), y: position.y, width: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
+              this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width), y: position.y, width: (this._activeState && this._activeTag === exports.DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
                       0, height }, dragMaskStyle), 'rect');
           }
           else {
-              this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: position.x, y: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height), width, height: (this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
+              this._dragMask = this._container.createOrUpdateChild('dragMask', Object.assign({ x: position.x, y: vutils.clamp(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height), width, height: (this._activeState && this._activeTag === exports.DataZoomActiveTag.background && Math.abs(this.dragMaskSize())) ||
                       0 }, dragMaskStyle), 'rect');
           }
       }
@@ -25393,13 +25487,14 @@
           this.dispatchEvent(changeEvent);
       }
       setStartAndEnd(start, end) {
+          var _a;
           const { start: startAttr, end: endAttr } = this.attribute;
           if (vutils.isValid(start) && vutils.isValid(end) && (start !== this.state.start || end !== this.state.end)) {
               this.state.start = start;
               this.state.end = end;
               if (startAttr !== this.state.start || endAttr !== this.state.end) {
                   this.setStateAttr(start, end, true);
-                  this._updateStateCallback && this._updateStateCallback(start, end);
+                  (_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, start, end, this._activeTag);
                   this._dispatchChangeEvent(start, end);
               }
           }
@@ -26486,51 +26581,23 @@
               const target = e.target;
               if ((_a = target === null || target === void 0 ? void 0 : target.name) === null || _a === void 0 ? void 0 : _a.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
                   const legendItem = target.delegate;
-                  const selected = legendItem.hasState(exports.LegendStateValue.selected);
-                  if (selected) {
-                      this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover, e);
-                  }
-                  else {
-                      this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover, e);
-                  }
-                  const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
-                  if (focusButton) {
-                      focusButton.setAttribute('visible', true);
+                  if (this._lastActiveItem) {
+                      if (this._lastActiveItem.id === legendItem.id) {
+                          return;
+                      }
+                      this._unHover(this._lastActiveItem, e);
                   }
-                  this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem, e);
+                  this._hover(legendItem, e);
+              }
+              else if (this._lastActiveItem) {
+                  this._unHover(this._lastActiveItem, e);
+                  this._lastActiveItem = null;
               }
           };
           this._onUnHover = (e) => {
-              var _a;
-              const target = e.target;
-              if ((_a = target === null || target === void 0 ? void 0 : target.name) === null || _a === void 0 ? void 0 : _a.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
-                  const legendItem = target.delegate;
-                  let attributeUpdate = false;
-                  if (legendItem.hasState(exports.LegendStateValue.unSelectedHover) ||
-                      legendItem.hasState(exports.LegendStateValue.selectedHover)) {
-                      attributeUpdate = true;
-                  }
-                  legendItem.removeState(exports.LegendStateValue.unSelectedHover);
-                  legendItem.removeState(exports.LegendStateValue.selectedHover);
-                  legendItem
-                      .getChildren()[0]
-                      .getChildren()
-                      .forEach((child) => {
-                      if (!attributeUpdate &&
-                          (child.hasState(exports.LegendStateValue.unSelectedHover) || child.hasState(exports.LegendStateValue.selectedHover))) {
-                          attributeUpdate = true;
-                      }
-                      child.removeState(exports.LegendStateValue.unSelectedHover);
-                      child.removeState(exports.LegendStateValue.selectedHover);
-                  });
-                  const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
-                  if (focusButton) {
-                      focusButton.setAttribute('visible', false);
-                  }
-                  if (attributeUpdate) {
-                      this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
-                  }
-                  this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
+              if (this._lastActiveItem) {
+                  this._unHover(this._lastActiveItem, e);
+                  this._lastActiveItem = null;
               }
           };
           this._onClick = (e) => {
@@ -26720,7 +26787,7 @@
           const { hover = true, select = true } = this.attribute;
           if (hover) {
               this._itemsContainer.addEventListener('pointermove', this._onHover);
-              this._itemsContainer.addEventListener('pointerout', this._onUnHover);
+              this._itemsContainer.addEventListener('pointerleave', this._onUnHover);
           }
           if (select) {
               this._itemsContainer.addEventListener('pointerdown', this._onClick);
@@ -26748,6 +26815,7 @@
               itemGroup = createGroup(Object.assign({ x: 0, y: 0 }, background === null || background === void 0 ? void 0 : background.style));
               this._appendDataToShape(itemGroup, exports.LEGEND_ELEMENT_NAME.item, item, itemGroup, background === null || background === void 0 ? void 0 : background.state);
           }
+          itemGroup.id = `${id !== null && id !== void 0 ? id : label}-${index}`;
           itemGroup.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
           const innerGroup = createGroup({
               x: 0,
@@ -26756,22 +26824,26 @@
           });
           itemGroup.add(innerGroup);
           let focusStartX = 0;
-          const shapeSize = vutils.get(shapeAttr, 'style.size', DEFAULT_SHAPE_SIZE);
-          const shapeSpace = vutils.get(shapeAttr, 'space', DEFAULT_SHAPE_SPACE);
-          const itemShape = createSymbol(Object.assign(Object.assign({ x: 0, y: 0, symbolType: 'circle', strokeBoundsBuffer: 0 }, shape), shapeAttr.style));
-          Object.keys(shapeAttr.state || {}).forEach(key => {
-              const color = shapeAttr.state[key].fill ||
-                  shapeAttr.state[key].stroke;
-              if (shape.fill && vutils.isNil(shapeAttr.state[key].fill) && color) {
-                  shapeAttr.state[key].fill = color;
-              }
-              if (shape.stroke && vutils.isNil(shapeAttr.state[key].stroke) && color) {
-                  shapeAttr.state[key].stroke = color;
-              }
-          });
-          this._appendDataToShape(itemShape, exports.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeAttr === null || shapeAttr === void 0 ? void 0 : shapeAttr.state);
-          itemShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
-          innerGroup.add(itemShape);
+          let shapeSize = 0;
+          let shapeSpace = 0;
+          if ((shapeAttr === null || shapeAttr === void 0 ? void 0 : shapeAttr.visible) !== false) {
+              shapeSize = vutils.get(shapeAttr, 'style.size', DEFAULT_SHAPE_SIZE);
+              shapeSpace = vutils.get(shapeAttr, 'space', DEFAULT_SHAPE_SPACE);
+              const itemShape = createSymbol(Object.assign(Object.assign({ x: 0, y: 0, symbolType: 'circle', strokeBoundsBuffer: 0 }, shape), shapeAttr.style));
+              Object.keys(shapeAttr.state || {}).forEach(key => {
+                  const color = shapeAttr.state[key].fill ||
+                      shapeAttr.state[key].stroke;
+                  if (shape.fill && vutils.isNil(shapeAttr.state[key].fill) && color) {
+                      shapeAttr.state[key].fill = color;
+                  }
+                  if (shape.stroke && vutils.isNil(shapeAttr.state[key].stroke) && color) {
+                      shapeAttr.state[key].stroke = color;
+                  }
+              });
+              this._appendDataToShape(itemShape, exports.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeAttr === null || shapeAttr === void 0 ? void 0 : shapeAttr.state);
+              itemShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
+              innerGroup.add(itemShape);
+          }
           let focusShape;
           let focusSpace = 0;
           if (focus) {
@@ -26973,6 +27045,48 @@
           this._pager.addEventListener('toNext', onPaging);
           return true;
       }
+      _hover(legendItem, e) {
+          this._lastActiveItem = legendItem;
+          const selected = legendItem.hasState(exports.LegendStateValue.selected);
+          if (selected) {
+              this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover, e);
+          }
+          else {
+              this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover, e);
+          }
+          const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
+          if (focusButton) {
+              focusButton.setAttribute('visible', true);
+          }
+          this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem, e);
+      }
+      _unHover(legendItem, e) {
+          let attributeUpdate = false;
+          if (legendItem.hasState(exports.LegendStateValue.unSelectedHover) || legendItem.hasState(exports.LegendStateValue.selectedHover)) {
+              attributeUpdate = true;
+          }
+          legendItem.removeState(exports.LegendStateValue.unSelectedHover);
+          legendItem.removeState(exports.LegendStateValue.selectedHover);
+          legendItem
+              .getChildren()[0]
+              .getChildren()
+              .forEach((child) => {
+              if (!attributeUpdate &&
+                  (child.hasState(exports.LegendStateValue.unSelectedHover) || child.hasState(exports.LegendStateValue.selectedHover))) {
+                  attributeUpdate = true;
+              }
+              child.removeState(exports.LegendStateValue.unSelectedHover);
+              child.removeState(exports.LegendStateValue.selectedHover);
+          });
+          const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
+          if (focusButton) {
+              focusButton.setAttribute('visible', false);
+          }
+          if (attributeUpdate) {
+              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+          }
+          this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
+      }
       _setLegendItemState(legendItem, stateName, e) {
           const keepCurrentStates = true;
           let attributeUpdate = false;
@@ -30160,7 +30274,7 @@
       }
   };
 
-  const version = "0.17.0-alpha.3";
+  const version = "0.17.0-alpha.5";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;