@visactor/vrender 0.17.0-alpha.4 → 0.17.0-alpha.5

package/dist/index.js

@@ -1530,7 +1530,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$1c = undefined && undefined.__metadata || function (k, v) {
+    __metadata$1d = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$R = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -1543,7 +1543,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",
@@ -1773,7 +1773,7 @@
     }]);
     return DefaultGlobal;
   }();
-  exports.DefaultGlobal = __decorate$1B([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(EnvContribution)), __metadata$1c("design:paramtypes", [Object])], exports.DefaultGlobal);
+  exports.DefaultGlobal = __decorate$1B([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(EnvContribution)), __metadata$1d("design:paramtypes", [Object])], exports.DefaultGlobal);
 
   function getDefaultExportFromCjs (x) {
   	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -5966,7 +5966,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$1b = undefined && undefined.__metadata || function (k, v) {
+    __metadata$1c = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$Q = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -6051,7 +6051,7 @@
     }]);
     return DefaultGraphicUtil;
   }();
-  exports.DefaultGraphicUtil = __decorate$1y([injectable(), __param$Q(0, inject(ContributionProvider)), __param$Q(0, named(TextMeasureContribution)), __metadata$1b("design:paramtypes", [Object])], exports.DefaultGraphicUtil);
+  exports.DefaultGraphicUtil = __decorate$1y([injectable(), __param$Q(0, inject(ContributionProvider)), __param$Q(0, named(TextMeasureContribution)), __metadata$1c("design:paramtypes", [Object])], exports.DefaultGraphicUtil);
   var TransformMode;
   !function (TransformMode) {
     TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -6128,7 +6128,7 @@
     }]);
     return DefaultTransformUtil;
   }();
-  exports.DefaultTransformUtil = __decorate$1y([injectable(), __metadata$1b("design:paramtypes", [])], exports.DefaultTransformUtil);
+  exports.DefaultTransformUtil = __decorate$1y([injectable(), __metadata$1c("design:paramtypes", [])], exports.DefaultTransformUtil);
 
   var defaultThemeObj = {
       arc: DefaultArcAttribute,
@@ -10860,19 +10860,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;
       }
@@ -11395,11 +11391,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);
         }
       }
@@ -12490,7 +12486,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$1a = undefined && undefined.__metadata || function (k, v) {
+    __metadata$1b = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   exports.DefaultLayerService = /*#__PURE__*/function () {
@@ -12570,7 +12566,7 @@
     }]);
     return DefaultLayerService;
   }();
-  exports.DefaultLayerService = __decorate$1x([injectable(), __metadata$1a("design:paramtypes", [])], exports.DefaultLayerService);
+  exports.DefaultLayerService = __decorate$1x([injectable(), __metadata$1b("design:paramtypes", [])], exports.DefaultLayerService);
 
   var __decorate$1w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -12579,7 +12575,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$19 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$1a = 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");
@@ -12732,7 +12728,7 @@
     }]);
     return DefaultWindow;
   }();
-  exports.DefaultWindow = __decorate$1w([injectable(), __metadata$19("design:paramtypes", [])], exports.DefaultWindow);
+  exports.DefaultWindow = __decorate$1w([injectable(), __metadata$1a("design:paramtypes", [])], exports.DefaultWindow);
 
   var coreModule = new ContainerModule(function (bind) {
     bind(VGlobal).to(exports.DefaultGlobal).inSingletonScope(), bind(VWindow).to(exports.DefaultWindow), bind(GraphicUtil).to(exports.DefaultGraphicUtil).inSingletonScope(), bind(TransformUtil).to(exports.DefaultTransformUtil).inSingletonScope(), bind(LayerService).to(exports.DefaultLayerService).inSingletonScope();
@@ -16826,7 +16822,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$18 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$19 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$P = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -17507,7 +17503,7 @@
     }]);
     return DefaultGraphicService;
   }();
-  exports.DefaultGraphicService = __decorate$1v([injectable(), __param$P(0, inject(GraphicCreator)), __metadata$18("design:paramtypes", [Object])], exports.DefaultGraphicService);
+  exports.DefaultGraphicService = __decorate$1v([injectable(), __param$P(0, inject(GraphicCreator)), __metadata$19("design:paramtypes", [Object])], exports.DefaultGraphicService);
 
   var ShadowRoot = /*#__PURE__*/function (_Group) {
     _inherits(ShadowRoot, _Group);
@@ -17641,6 +17637,12 @@
     return richText.setAttributes(params), richText.AABBBounds;
   }
 
+  var result = {
+    x: 0,
+    y: 0,
+    z: 0,
+    lastModelMatrix: null
+  };
   var BaseRender = /*#__PURE__*/function () {
     function BaseRender() {
       _classCallCheck(this, BaseRender);
@@ -17707,8 +17709,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,
@@ -17722,16 +17723,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();
@@ -17905,7 +17901,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$17 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$18 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$O = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -17958,7 +17954,7 @@
     }]);
     return DefaultBaseInteractiveRenderContribution;
   }();
-  exports.DefaultBaseInteractiveRenderContribution = __decorate$1u([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(InteractiveSubRenderContribution)), __metadata$17("design:paramtypes", [Object])], exports.DefaultBaseInteractiveRenderContribution);
+  exports.DefaultBaseInteractiveRenderContribution = __decorate$1u([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(InteractiveSubRenderContribution)), __metadata$18("design:paramtypes", [Object])], exports.DefaultBaseInteractiveRenderContribution);
   var DefaultBaseTextureRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseTextureRenderContribution() {
       _classCallCheck(this, DefaultBaseTextureRenderContribution);
@@ -18578,7 +18574,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$16 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$17 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$N = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -18751,7 +18747,7 @@
     }]);
     return DefaultCanvasArcRender;
   }(BaseRender);
-  exports.DefaultCanvasArcRender = __decorate$1t([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(ArcRenderContribution)), __metadata$16("design:paramtypes", [Object])], exports.DefaultCanvasArcRender);
+  exports.DefaultCanvasArcRender = __decorate$1t([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(ArcRenderContribution)), __metadata$17("design:paramtypes", [Object])], exports.DefaultCanvasArcRender);
 
   var __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -18760,7 +18756,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$15 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$16 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$M = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -18809,7 +18805,7 @@
     }]);
     return DefaultCanvasCircleRender;
   }(BaseRender);
-  exports.DefaultCanvasCircleRender = __decorate$1s([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(CircleRenderContribution)), __metadata$15("design:paramtypes", [Object])], exports.DefaultCanvasCircleRender);
+  exports.DefaultCanvasCircleRender = __decorate$1s([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(CircleRenderContribution)), __metadata$16("design:paramtypes", [Object])], exports.DefaultCanvasCircleRender);
 
   function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
     var _a;
@@ -19341,7 +19337,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$14 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$15 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$L = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -19614,7 +19610,7 @@
     }]);
     return DefaultCanvasAreaRender;
   }(BaseRender);
-  exports.DefaultCanvasAreaRender = __decorate$1q([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(AreaRenderContribution)), __metadata$14("design:paramtypes", [Object])], exports.DefaultCanvasAreaRender);
+  exports.DefaultCanvasAreaRender = __decorate$1q([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(AreaRenderContribution)), __metadata$15("design:paramtypes", [Object])], exports.DefaultCanvasAreaRender);
 
   var defaultPathTextureRenderContribution = defaultBaseTextureRenderContribution;
   var defaultPathBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
@@ -19626,7 +19622,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$13 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$14 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$K = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -19646,14 +19642,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,
@@ -19661,7 +19657,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);
@@ -19670,12 +19666,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);
-  exports.DefaultCanvasPathRender = __decorate$1p([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(PathRenderContribution)), __metadata$13("design:paramtypes", [Object])], exports.DefaultCanvasPathRender);
+  exports.DefaultCanvasPathRender = __decorate$1p([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(PathRenderContribution)), __metadata$14("design:paramtypes", [Object])], exports.DefaultCanvasPathRender);
 
   var __decorate$1o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -19684,7 +19680,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$12 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$13 = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$J = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -19704,7 +19700,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,
@@ -19751,12 +19748,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);
-  exports.DefaultCanvasRectRender = __decorate$1o([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(RectRenderContribution)), __metadata$12("design:paramtypes", [Object])], exports.DefaultCanvasRectRender);
+  exports.DefaultCanvasRectRender = __decorate$1o([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(RectRenderContribution)), __metadata$13("design:paramtypes", [Object])], exports.DefaultCanvasRectRender);
 
   var __decorate$1n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -19765,7 +19762,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$11 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$12 = 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) {
@@ -19829,7 +19826,7 @@
     }]);
     return DefaultCanvasSymbolRender;
   }(BaseRender);
-  exports.DefaultCanvasSymbolRender = __decorate$1n([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(SymbolRenderContribution)), __metadata$11("design:paramtypes", [Object])], exports.DefaultCanvasSymbolRender);
+  exports.DefaultCanvasSymbolRender = __decorate$1n([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(SymbolRenderContribution)), __metadata$12("design:paramtypes", [Object])], exports.DefaultCanvasSymbolRender);
 
   var __decorate$1m = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -19838,7 +19835,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$10 = undefined && undefined.__metadata || function (k, v) {
+    __metadata$11 = 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) {
@@ -20059,7 +20056,7 @@
     }]);
     return DefaultCanvasTextRender;
   }(BaseRender);
-  exports.DefaultCanvasTextRender = __decorate$1m([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(TextRenderContribution)), __metadata$10("design:paramtypes", [Object])], exports.DefaultCanvasTextRender);
+  exports.DefaultCanvasTextRender = __decorate$1m([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(TextRenderContribution)), __metadata$11("design:paramtypes", [Object])], exports.DefaultCanvasTextRender);
 
   var __decorate$1l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
@@ -20134,7 +20131,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$$ = undefined && undefined.__metadata || function (k, v) {
+    __metadata$10 = 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) {
@@ -20185,7 +20182,7 @@
     }]);
     return DefaultCanvasPolygonRender;
   }(BaseRender);
-  exports.DefaultCanvasPolygonRender = __decorate$1k([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(PolygonRenderContribution)), __metadata$$("design:paramtypes", [Object])], exports.DefaultCanvasPolygonRender);
+  exports.DefaultCanvasPolygonRender = __decorate$1k([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(PolygonRenderContribution)), __metadata$10("design:paramtypes", [Object])], exports.DefaultCanvasPolygonRender);
 
   var __decorate$1j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -20194,7 +20191,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$_ = undefined && undefined.__metadata || function (k, v) {
+    __metadata$$ = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$F = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -20265,7 +20262,7 @@
     }]);
     return DefaultCanvasImageRender;
   }(BaseRender);
-  exports.DefaultCanvasImageRender = __decorate$1j([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(ImageRenderContribution)), __metadata$_("design:paramtypes", [Object])], exports.DefaultCanvasImageRender);
+  exports.DefaultCanvasImageRender = __decorate$1j([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(ImageRenderContribution)), __metadata$$("design:paramtypes", [Object])], exports.DefaultCanvasImageRender);
 
   var IncrementalDrawContribution = Symbol["for"]("IncrementalDrawContribution");
   var ArcRender = Symbol["for"]("ArcRender");
@@ -20295,7 +20292,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$Z = undefined && undefined.__metadata || function (k, v) {
+    __metadata$_ = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$E = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -20314,7 +20311,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);
         });
       }
@@ -20355,7 +20352,7 @@
     }]);
     return DefaultRenderService;
   }();
-  exports.DefaultRenderService = __decorate$1i([injectable(), __param$E(0, inject(DrawContribution)), __metadata$Z("design:paramtypes", [Object])], exports.DefaultRenderService);
+  exports.DefaultRenderService = __decorate$1i([injectable(), __param$E(0, inject(DrawContribution)), __metadata$_("design:paramtypes", [Object])], exports.DefaultRenderService);
 
   var renderModule$1 = new ContainerModule(function (bind) {
     bind(RenderService).to(exports.DefaultRenderService).inSingletonScope();
@@ -20531,7 +20528,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$Y = undefined && undefined.__metadata || function (k, v) {
+    __metadata$Z = 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) {
@@ -20582,7 +20579,7 @@
     }]);
     return DefaultPluginService;
   }();
-  DefaultPluginService = __decorate$1g([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(AutoEnablePlugins)), __metadata$Y("design:paramtypes", [Object])], DefaultPluginService);
+  DefaultPluginService = __decorate$1g([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(AutoEnablePlugins)), __metadata$Z("design:paramtypes", [Object])], DefaultPluginService);
 
   var pluginModule = new ContainerModule(function (bind) {
     bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -20603,7 +20600,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$X = undefined && undefined.__metadata || function (k, v) {
+    __metadata$Y = 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 () {
@@ -20696,7 +20693,7 @@
     }]);
     return CanvasLayerHandlerContribution;
   }();
-  CanvasLayerHandlerContribution = __decorate$1f([injectable(), __metadata$X("design:paramtypes", [])], CanvasLayerHandlerContribution);
+  CanvasLayerHandlerContribution = __decorate$1f([injectable(), __metadata$Y("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
   var __decorate$1e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -20705,7 +20702,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$W = undefined && undefined.__metadata || function (k, v) {
+    __metadata$X = 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 () {
@@ -20763,7 +20760,7 @@
     }]);
     return EmptyLayerHandlerContribution;
   }();
-  EmptyLayerHandlerContribution = __decorate$1e([injectable(), __metadata$W("design:paramtypes", [])], EmptyLayerHandlerContribution);
+  EmptyLayerHandlerContribution = __decorate$1e([injectable(), __metadata$X("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
   var __decorate$1d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -20772,7 +20769,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$V = undefined && undefined.__metadata || function (k, v) {
+    __metadata$W = 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 () {
@@ -20859,7 +20856,7 @@
     }]);
     return OffscreenLayerHandlerContribution;
   }();
-  OffscreenLayerHandlerContribution = __decorate$1d([injectable(), __metadata$V("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+  OffscreenLayerHandlerContribution = __decorate$1d([injectable(), __metadata$W("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);
@@ -20987,12 +20984,15 @@
   }
 
   var __decorate$1c = 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$V = 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 AABBBounds();
   var ShadowRootDrawItemInterceptorContribution = /*#__PURE__*/function () {
@@ -21025,21 +21025,15 @@
     }]);
     return ShadowRootDrawItemInterceptorContribution;
   }();
-  ShadowRootDrawItemInterceptorContribution = __decorate$1c([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",
@@ -21051,9 +21045,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$1c([injectable()], CommonDrawItemInterceptorContribution);
+  CommonDrawItemInterceptorContribution = __decorate$1c([injectable(), __metadata$V("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
   var InteractiveDrawItemInterceptorContribution = /*#__PURE__*/function () {
     function InteractiveDrawItemInterceptorContribution() {
       _classCallCheck(this, InteractiveDrawItemInterceptorContribution);
@@ -21112,7 +21127,6 @@
     }]);
     return InteractiveDrawItemInterceptorContribution;
   }();
-  InteractiveDrawItemInterceptorContribution = __decorate$1c([injectable()], InteractiveDrawItemInterceptorContribution);
   var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DDrawItemInterceptor() {
       _classCallCheck(this, Canvas3DDrawItemInterceptor);
@@ -21203,7 +21217,6 @@
     }]);
     return Canvas3DDrawItemInterceptor;
   }();
-  Canvas3DDrawItemInterceptor = __decorate$1c([injectable()], Canvas3DDrawItemInterceptor);
 
   var DefaultBoundsAllocate = /*#__PURE__*/function () {
     function DefaultBoundsAllocate() {
@@ -21281,9 +21294,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",
@@ -21337,7 +21348,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 && !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;
@@ -22605,7 +22617,7 @@
   DefaultCanvasPyramid3dRender = __decorate$12([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(exports.DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(exports.DefaultCanvasCircleRender).inSingletonScope(), bind(GraphicRender).toService(CircleRender), bindContributionProvider(bind, CircleRenderContribution), bind(exports.DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(exports.DefaultCanvasRectRender).inSingletonScope(), bind(GraphicRender).toService(RectRender), bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope(), bind(GraphicRender).toService(Rect3DRender), bindContributionProvider(bind, RectRenderContribution), bind(TextRender).to(exports.DefaultCanvasTextRender).inSingletonScope(), bind(GraphicRender).toService(TextRender), bindContributionProvider(bind, TextRenderContribution), bind(exports.DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(exports.DefaultCanvasPathRender).inSingletonScope(), bind(GraphicRender).toService(PathRender), bindContributionProvider(bind, PathRenderContribution), bind(exports.DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(exports.DefaultCanvasSymbolRender).inSingletonScope(), bind(GraphicRender).toService(SymbolRender), bindContributionProvider(bind, SymbolRenderContribution), bind(exports.DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(exports.DefaultCanvasArcRender).inSingletonScope(), bind(GraphicRender).toService(ArcRender), bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope(), bind(GraphicRender).toService(Arc3dRender), bindContributionProvider(bind, ArcRenderContribution), bind(exports.DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(exports.DefaultCanvasLineRender).inSingletonScope(), bind(GraphicRender).toService(LineRender), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope(), bind(exports.DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(exports.DefaultCanvasAreaRender).inSingletonScope(), bind(GraphicRender).toService(AreaRender), bindContributionProvider(bind, AreaRenderContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(PolygonRender).to(exports.DefaultCanvasPolygonRender).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bindContributionProvider(bind, PolygonRenderContribution), bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope(), bind(GraphicRender).toService(GlyphRender), bind(ImageRender).to(exports.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(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bind(TextRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(ArcRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(PathRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(SymbolRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(RectRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(ImageRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(CircleRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(AreaRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(PolygonRenderContribution).toService(exports.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(exports.DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(exports.DefaultCanvasCircleRender).inSingletonScope(), bind(GraphicRender).toService(CircleRender), bindContributionProvider(bind, CircleRenderContribution), bind(exports.DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(exports.DefaultCanvasRectRender).inSingletonScope(), bind(GraphicRender).toService(RectRender), bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope(), bind(GraphicRender).toService(Rect3DRender), bindContributionProvider(bind, RectRenderContribution), bind(TextRender).to(exports.DefaultCanvasTextRender).inSingletonScope(), bind(GraphicRender).toService(TextRender), bindContributionProvider(bind, TextRenderContribution), bind(exports.DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(exports.DefaultCanvasPathRender).inSingletonScope(), bind(GraphicRender).toService(PathRender), bindContributionProvider(bind, PathRenderContribution), bind(exports.DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(exports.DefaultCanvasSymbolRender).inSingletonScope(), bind(GraphicRender).toService(SymbolRender), bindContributionProvider(bind, SymbolRenderContribution), bind(exports.DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(exports.DefaultCanvasArcRender).inSingletonScope(), bind(GraphicRender).toService(ArcRender), bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope(), bind(GraphicRender).toService(Arc3dRender), bindContributionProvider(bind, ArcRenderContribution), bind(exports.DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(exports.DefaultCanvasLineRender).inSingletonScope(), bind(GraphicRender).toService(LineRender), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope(), bind(exports.DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(exports.DefaultCanvasAreaRender).inSingletonScope(), bind(GraphicRender).toService(AreaRender), bindContributionProvider(bind, AreaRenderContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(PolygonRender).to(exports.DefaultCanvasPolygonRender).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bindContributionProvider(bind, PolygonRenderContribution), bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope(), bind(GraphicRender).toService(GlyphRender), bind(ImageRender).to(exports.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(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bind(TextRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(ArcRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(PathRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(SymbolRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(RectRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(ImageRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(CircleRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(AreaRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bind(PolygonRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
   });
 
   function load(container) {
@@ -23282,11 +23294,14 @@
   var Stage = /*#__PURE__*/function (_Group) {
     _inherits(Stage, _Group);
     var _super = _createSuper(Stage);
-    function Stage(params) {
+    function Stage() {
       var _this;
+      var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       _classCallCheck(this, Stage);
       var _a;
-      _this = _super.call(this, {}), _this.beforeRender = function (stage) {
+      _this = _super.call(this, {}), _this._onVisibleChange = function (visible) {
+        _this._skipRender < 0 || (visible ? (_this.dirtyBounds && _this.dirtyBounds.setValue(0, 0, _this._viewBox.width(), _this._viewBox.height()), _this._skipRender > 1 && _this.renderNextFrame(), _this._skipRender = 0) : _this._skipRender = 1);
+      }, _this.beforeRender = function (stage) {
         _this._beforeRender && _this._beforeRender(stage);
       }, _this.afterRender = function (stage) {
         _this.renderCount++, _this._afterRender && _this._afterRender(stage), _this._afterNextRenderCbs && _this._afterNextRenderCbs.forEach(function (cb) {
@@ -23305,7 +23320,7 @@
         canvas: params.canvas
       }), _this._viewBox = new AABBBounds(), params.viewBox ? _this._viewBox.setValue(params.viewBox.x1, params.viewBox.y1, params.viewBox.x2, params.viewBox.y2) : _this._viewBox.setValue(0, 0, _this.width, _this.height), _this.state = "normal", _this.renderCount = 0, _this._subView = !(_this._viewBox.width() === _this.width && _this._viewBox.height() === _this.height), _this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, _this.appendChild(_this.layerService.createLayer(_assertThisInitialized(_this), {
         main: !0
-      })), _this.nextFrameRenderLayerSet = new Set(), _this.willNextFrameRender = !1, _this.stage = _assertThisInitialized(_this), _this.renderStyle = params.renderStyle, params.autoRender && _this.enableAutoRender(), !1 === params.disableDirtyBounds && _this.enableDirtyBounds(), params.enableHtmlAttribute && _this.enableHtmlAttribute(params.enableHtmlAttribute), params.enableLayout && _this.enableLayout(), _this.hooks.beforeRender.tap("constructor", _this.beforeRender), _this.hooks.afterRender.tap("constructor", _this.afterRender), _this._beforeRender = params.beforeRender, _this._afterRender = params.afterRender, _this.ticker = params.ticker || defaultTicker, _this.supportInteractiveLayer = !1 !== params.interactiveLayer, _this.timeline = new DefaultTimeline(), _this.ticker.addTimeline(_this.timeline), _this.timeline.pause(), _this.optmize(params.optimize), params.background && isString$1(_this._background) && _this._background.includes("/") && _this.setAttributes({
+      })), _this.nextFrameRenderLayerSet = new Set(), _this.willNextFrameRender = !1, _this.stage = _assertThisInitialized(_this), _this.renderStyle = params.renderStyle, params.autoRender && _this.enableAutoRender(), !1 === params.disableDirtyBounds && _this.enableDirtyBounds(), params.enableHtmlAttribute && _this.enableHtmlAttribute(params.enableHtmlAttribute), params.enableLayout && _this.enableLayout(), _this.hooks.beforeRender.tap("constructor", _this.beforeRender), _this.hooks.afterRender.tap("constructor", _this.afterRender), _this._beforeRender = params.beforeRender, _this._afterRender = params.afterRender, _this.ticker = params.ticker || defaultTicker, _this.supportInteractiveLayer = !1 !== params.interactiveLayer, _this.timeline = new DefaultTimeline(), _this.ticker.addTimeline(_this.timeline), _this.timeline.pause(), params.optimize || (params.optimize = {}), _this.optmize(params.optimize), params.background && isString$1(_this._background) && _this._background.includes("/") && _this.setAttributes({
         background: _this._background
       });
       return _this;
@@ -23421,21 +23436,18 @@
     }, {
       key: "preventRender",
       value: function preventRender(prevent) {
-        prevent ? this._skipRender = -1 / 0 : this.params && this.params.optimize && !1 !== this.params.optimize.skipRenderWithOutRange ? this._skipRender = this.window.isVisible() ? 0 : 1 : this._skipRender = 0;
+        prevent ? this._skipRender = -1 / 0 : !1 !== this.params.optimize.skipRenderWithOutRange ? this._skipRender = this.window.isVisible() ? 0 : 1 : this._skipRender = 0;
       }
     }, {
       key: "optmize",
       value: function optmize(params) {
-        this.optmizeRender(null == params ? void 0 : params.skipRenderWithOutRange);
+        this.optmizeRender(params.skipRenderWithOutRange), this.params.optimize = params;
       }
     }, {
       key: "optmizeRender",
       value: function optmizeRender() {
-        var _this2 = this;
         var skipRenderWithOutRange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
-        skipRenderWithOutRange && (this._skipRender = this._skipRender < 0 ? this._skipRender : this.window.isVisible() ? 0 : 1, this.window.onVisibleChange(function (visible) {
-          _this2._skipRender < 0 || (visible ? (_this2.dirtyBounds && _this2.dirtyBounds.setValue(0, 0, _this2._viewBox.width(), _this2._viewBox.height()), _this2._skipRender > 1 && _this2.renderNextFrame(), _this2._skipRender = 0) : _this2._skipRender = 1);
-        }));
+        skipRenderWithOutRange && (this._skipRender = this._skipRender < 0 ? this._skipRender : this.window.isVisible() ? 0 : 1, this.window.onVisibleChange(this._onVisibleChange));
       }
     }, {
       key: "getTimeline",
@@ -23537,9 +23549,9 @@
     }, {
       key: "disableView3dTranform",
       value: function disableView3dTranform() {
-        var _this3 = this;
+        var _this2 = this;
         this.view3dTranform && (this.view3dTranform = !1, this.pluginService.findPluginsByName("ViewTransform3dPlugin").forEach(function (plugin) {
-          plugin.deactivate(_this3.pluginService);
+          plugin.deactivate(_this2.pluginService);
         }));
       }
     }, {
@@ -23550,9 +23562,9 @@
     }, {
       key: "disableAutoRender",
       value: function disableAutoRender() {
-        var _this4 = this;
+        var _this3 = this;
         this.autoRender && (this.autoRender = !1, this.pluginService.findPluginsByName("AutoRenderPlugin").forEach(function (plugin) {
-          plugin.deactivate(_this4.pluginService);
+          plugin.deactivate(_this3.pluginService);
         }));
       }
     }, {
@@ -23563,9 +23575,9 @@
     }, {
       key: "disableIncrementalAutoRender",
       value: function disableIncrementalAutoRender() {
-        var _this5 = this;
+        var _this4 = this;
         this.increaseAutoRender && (this.increaseAutoRender = !1, this.pluginService.findPluginsByName("IncrementalAutoRenderPlugin").forEach(function (plugin) {
-          plugin.deactivate(_this5.pluginService);
+          plugin.deactivate(_this4.pluginService);
         }));
       }
     }, {
@@ -23579,9 +23591,9 @@
     }, {
       key: "disableDirtyBounds",
       value: function disableDirtyBounds() {
-        var _this6 = this;
+        var _this5 = this;
         this.dirtyBounds && (this.dirtyBounds = null, this.pluginService.findPluginsByName("DirtyBoundsPlugin").forEach(function (plugin) {
-          plugin.deactivate(_this6.pluginService);
+          plugin.deactivate(_this5.pluginService);
         }));
       }
     }, {
@@ -23592,9 +23604,9 @@
     }, {
       key: "disableLayout",
       value: function disableLayout() {
-        var _this7 = this;
+        var _this6 = this;
         this._enableLayout && (this._enableLayout = !1, this.pluginService.findPluginsByName("FlexLayoutPlugin").forEach(function (plugin) {
-          plugin.deactivate(_this7.pluginService);
+          plugin.deactivate(_this6.pluginService);
         }));
       }
     }, {
@@ -23605,9 +23617,9 @@
     }, {
       key: "disableHtmlAttribute",
       value: function disableHtmlAttribute() {
-        var _this8 = this;
+        var _this7 = this;
         this.htmlAttribute && (this.htmlAttribute = !1, this.pluginService.findPluginsByName("HtmlAttributePlugin").forEach(function (plugin) {
-          plugin.deactivate(_this8.pluginService);
+          plugin.deactivate(_this7.pluginService);
         }));
       }
     }, {
@@ -23634,10 +23646,10 @@
     }, {
       key: "sortLayer",
       value: function sortLayer(cb) {
-        var _this9 = this;
+        var _this8 = this;
         var children = this.children;
         children.sort(cb), this.removeAllChild(), children.forEach(function (c) {
-          _this9.appendChild(c);
+          _this8.appendChild(c);
         });
       }
     }, {
@@ -23668,11 +23680,11 @@
     }, {
       key: "renderNextFrame",
       value: function renderNextFrame(layers, force) {
-        var _this10 = this;
+        var _this9 = this;
         this.nextFrameRenderLayerSet.size !== this.childrenCount && (layers || this).forEach(function (layer) {
-          _this10.nextFrameRenderLayerSet.add(layer);
+          _this9.nextFrameRenderLayerSet.add(layer);
         }), this.willNextFrameRender || (this.willNextFrameRender = !0, this.global.getRequestAnimationFrame()(function () {
-          _this10._doRenderInThisFrame(), _this10.willNextFrameRender = !1;
+          _this9._doRenderInThisFrame(), _this9.willNextFrameRender = !1;
         }));
       }
     }, {
@@ -23685,19 +23697,19 @@
     }, {
       key: "renderLayerList",
       value: function renderLayerList(layerList, params) {
-        var _this11 = this;
+        var _this10 = this;
         var list = [];
         for (var i = 0; i < layerList.length; i++) {
           var l = layerList[i];
           "virtual" === l.layerMode && (l = l.getNativeHandler().mainHandler.layer), list.includes(l) || list.push(l);
         }
         list.forEach(function (layer) {
-          layer.renderCount > _this11.renderCount || (layer.renderCount = _this11.renderCount + 1, layer.render({
-            renderService: _this11.renderService,
-            background: layer === _this11.defaultLayer ? _this11.background : void 0,
-            updateBounds: !(!_this11.dirtyBounds || _this11.dirtyBounds.empty())
+          layer.renderCount > _this10.renderCount || (layer.renderCount = _this10.renderCount + 1, layer.render({
+            renderService: _this10.renderService,
+            background: layer === _this10.defaultLayer ? _this10.background : void 0,
+            updateBounds: !(!_this10.dirtyBounds || _this10.dirtyBounds.empty())
           }, Object.assign({
-            renderStyle: _this11.renderStyle
+            renderStyle: _this10.renderStyle
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
@@ -23734,10 +23746,10 @@
     }, {
       key: "setViewBox",
       value: function setViewBox(x, y, w, h, rerender) {
-        var _this12 = this;
+        var _this11 = this;
         var isRerender = !0;
         "object" == _typeof(x) ? (this.viewBox.setValue(x.x1, x.y1, x.x2, x.y2), !1 === y && (isRerender = !1)) : (this.viewBox.setValue(x, y, x + w, y + h), !1 === rerender && (isRerender = !1)), this.forEachChildren(function (c) {
-          c.resizeView(_this12.viewBox.width(), _this12.viewBox.height());
+          c.resizeView(_this11.viewBox.width(), _this11.viewBox.height());
         }), isRerender && this.render();
       }
     }, {
@@ -23802,13 +23814,13 @@
     }, {
       key: "renderTo",
       value: function renderTo(window, params) {
-        var _this13 = this;
+        var _this12 = this;
         this.forEachChildren(function (layer, i) {
           layer.drawTo(window, Object.assign(Object.assign({}, params), {
-            renderService: _this13.renderService,
-            background: layer === _this13.defaultLayer ? _this13.background : void 0,
+            renderService: _this12.renderService,
+            background: layer === _this12.defaultLayer ? _this12.background : void 0,
             clear: 0 === i,
-            updateBounds: !(!_this13.dirtyBounds || _this13.dirtyBounds.empty())
+            updateBounds: !(!_this12.dirtyBounds || _this12.dirtyBounds.empty())
           }));
         });
       }
@@ -33403,7 +33415,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.17.0-alpha.4";
+  const version = "0.17.0-alpha.5";
   loadBrowserEnv(container);
 
   exports.ACustomAnimate = ACustomAnimate;