@visactor/vrender-components 0.17.0-alpha.4 → 0.17.0-alpha.6

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 () {
@@ -3269,12 +3269,16 @@
   var DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
     width: 0,
     height: 0,
+    x1: 0,
+    y1: 0,
     strokeBoundsBuffer: 0,
     cornerRadius: 0
   });
   var DefaultRect3dAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
     width: 0,
     height: 0,
+    x1: 0,
+    y1: 0,
     cornerRadius: 0,
     length: 0
   });
@@ -4113,7 +4117,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 +4202,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 +4279,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 +6559,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 +7090,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 +8088,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 +8168,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 +8177,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 +8330,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();
@@ -8349,13 +8349,13 @@
     return fill && opacity * fillOpacity > 0;
   }
   function rectFillVisible(opacity, fillOpacity, width, height, fill) {
-    return fill && opacity * fillOpacity > 0 && width > 0 && height > 0;
+    return fill && opacity * fillOpacity > 0 && 0 !== width && 0 !== height;
   }
   function strokeVisible(opacity, strokeOpacity) {
     return opacity * strokeOpacity > 0;
   }
   function rectStrokeVisible(opacity, strokeOpacity, width, height) {
-    return opacity * strokeOpacity > 0 && width > 0 && height > 0;
+    return opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
   }
   function drawPathProxy(graphic, context, x, y, drawContext, params, fillCb, strokeCb) {
     if (!graphic.pathProxy) return !1;
@@ -10409,7 +10409,7 @@
     curveType: 1
   }, NOWORK_ANIMATE_ATTR);
 
-  var RECT_UPDATE_TAG_KEY = ["width", "height", "cornerRadius"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
+  var RECT_UPDATE_TAG_KEY = ["width", "x1", "y1", "height", "cornerRadius"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
   var Rect = /*#__PURE__*/function (_Graphic) {
     _inherits(Rect, _Graphic);
     var _super = _createSuper(Rect);
@@ -10427,10 +10427,7 @@
     }, {
       key: "_isValid",
       value: function _isValid() {
-        var _this$attribute = this.attribute,
-          width = _this$attribute.width,
-          height = _this$attribute.height;
-        return this._validNumber(width) && this._validNumber(height);
+        return !0;
       }
     }, {
       key: "doUpdateAABBBounds",
@@ -10467,11 +10464,7 @@
     }, {
       key: "toCustomPath",
       value: function toCustomPath() {
-        var attribute = this.attribute,
-          width = attribute.width,
-          height = attribute.height,
-          path = new CustomPath2D();
-        return path.moveTo(0, 0), path.rect(0, 0, width, height), path;
+        throw new Error("暂不支持");
       }
     }, {
       key: "clone",
@@ -11977,7 +11970,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) {
@@ -12200,11 +12193,13 @@
       key: "updateRectAABBBounds",
       value: function updateRectAABBBounds(attribute, rectTheme, aabbBounds, graphic) {
         if (!this.updatePathProxyAABBBounds(aabbBounds, graphic)) {
-          var _attribute$width = attribute.width,
-            width = _attribute$width === void 0 ? rectTheme.width : _attribute$width,
-            _attribute$height = attribute.height,
-            height = _attribute$height === void 0 ? rectTheme.height : _attribute$height;
-          aabbBounds.set(0, 0, width, height);
+          var width = attribute.width,
+            height = attribute.height;
+          var x1 = attribute.x1,
+            y1 = attribute.y1,
+            x = attribute.x,
+            y = attribute.y;
+          width = null != width ? width : x1 - x, height = null != height ? height : y1 - y, aabbBounds.set(0, 0, width || 0, height || 0);
         }
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -12240,10 +12235,10 @@
       key: "updateRichTextAABBBounds",
       value: function updateRichTextAABBBounds(attribute, richtextTheme, aabbBounds, graphic) {
         if (!graphic) return aabbBounds;
-        var _attribute$width2 = attribute.width,
-          width = _attribute$width2 === void 0 ? richtextTheme.width : _attribute$width2,
-          _attribute$height2 = attribute.height,
-          height = _attribute$height2 === void 0 ? richtextTheme.height : _attribute$height2,
+        var _attribute$width = attribute.width,
+          width = _attribute$width === void 0 ? richtextTheme.width : _attribute$width,
+          _attribute$height = attribute.height,
+          height = _attribute$height === void 0 ? richtextTheme.height : _attribute$height,
           _attribute$maxWidth = attribute.maxWidth,
           maxWidth = _attribute$maxWidth === void 0 ? richtextTheme.maxWidth : _attribute$maxWidth,
           _attribute$maxHeight = attribute.maxHeight,
@@ -12355,8 +12350,8 @@
         if (!stage || !stage.camera) return aabbBounds;
         var _attribute$outerRadiu = attribute.outerRadius,
           outerRadius = _attribute$outerRadiu === void 0 ? arcTheme.outerRadius : _attribute$outerRadiu,
-          _attribute$height3 = attribute.height,
-          height = _attribute$height3 === void 0 ? 0 : _attribute$height3,
+          _attribute$height2 = attribute.height,
+          height = _attribute$height2 === void 0 ? 0 : _attribute$height2,
           r = outerRadius + height;
         aabbBounds.setValue(-r, -r, r, r);
         var tb1 = this.tempAABBBounds1,
@@ -12556,10 +12551,10 @@
       key: "updateImageAABBBounds",
       value: function updateImageAABBBounds(attribute, imageTheme, aabbBounds, graphic) {
         if (!this.updatePathProxyAABBBounds(aabbBounds, graphic)) {
-          var _attribute$width3 = attribute.width,
-            width = _attribute$width3 === void 0 ? imageTheme.width : _attribute$width3,
-            _attribute$height4 = attribute.height,
-            height = _attribute$height4 === void 0 ? imageTheme.height : _attribute$height4;
+          var _attribute$width2 = attribute.width,
+            width = _attribute$width2 === void 0 ? imageTheme.width : _attribute$width2,
+            _attribute$height3 = attribute.height,
+            height = _attribute$height3 === void 0 ? imageTheme.height : _attribute$height3;
           aabbBounds.set(0, 0, width, height);
         }
         var tb1 = this.tempAABBBounds1,
@@ -12607,7 +12602,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);
@@ -12729,6 +12724,12 @@
   }
   createRichText({});
 
+  var result = {
+    x: 0,
+    y: 0,
+    z: 0,
+    lastModelMatrix: null
+  };
   var BaseRender = /*#__PURE__*/function () {
     function BaseRender() {
       _classCallCheck(this, BaseRender);
@@ -12795,8 +12796,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,
@@ -12810,16 +12810,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();
@@ -12993,7 +12988,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) {
@@ -13046,7 +13041,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);
@@ -13357,7 +13352,7 @@
   var halfPi = vutils.pi / 2;
   function createRectPath(path, x, y, width, height, rectCornerRadius) {
     var cornerRadius;
-    if (vutils.isNumber(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius, rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
+    if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), vutils.isNumber(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius, rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
       var cornerRadiusArr = rectCornerRadius;
       switch (cornerRadiusArr.length) {
         case 0:
@@ -13501,10 +13496,6 @@
           doInnerBorder = innerBorder && !1 !== innerBorder.visible;
         if (!doOuterBorder && !doInnerBorder) return;
         var _rect$attribute2 = rect.attribute,
-          _rect$attribute2$widt = _rect$attribute2.width,
-          width = _rect$attribute2$widt === void 0 ? rectAttribute.width : _rect$attribute2$widt,
-          _rect$attribute2$heig = _rect$attribute2.height,
-          height = _rect$attribute2$heig === void 0 ? rectAttribute.height : _rect$attribute2$heig,
           _rect$attribute2$corn = _rect$attribute2.cornerRadius,
           cornerRadius = _rect$attribute2$corn === void 0 ? rectAttribute.cornerRadius : _rect$attribute2$corn,
           _rect$attribute2$opac = _rect$attribute2.opacity,
@@ -13517,7 +13508,13 @@
           scaleX = _rect$attribute2$scal === void 0 ? rectAttribute.scaleX : _rect$attribute2$scal,
           _rect$attribute2$scal2 = _rect$attribute2.scaleY,
           scaleY = _rect$attribute2$scal2 === void 0 ? rectAttribute.scaleY : _rect$attribute2$scal2,
-          doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
+          x1 = _rect$attribute2.x1,
+          y1 = _rect$attribute2.y1;
+        var _rect$attribute3 = rect.attribute,
+          width = _rect$attribute3.width,
+          height = _rect$attribute3.height;
+        width = (null != width ? width : x1 - x) || 0, height = (null != height ? height : y1 - y) || 0;
+        var doStrokeOuter = !(!outerBorder || !outerBorder.stroke),
           doStrokeInner = !(!innerBorder || !innerBorder.stroke);
         if (doOuterBorder) {
           var _outerBorder$distance = outerBorder.distance,
@@ -13576,13 +13573,13 @@
     _createClass(SplitRectAfterRenderContribution, [{
       key: "drawShape",
       value: function drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb) {
-        var _rect$attribute3 = rect.attribute,
-          _rect$attribute3$widt = _rect$attribute3.width,
-          width = _rect$attribute3$widt === void 0 ? groupAttribute.width : _rect$attribute3$widt,
-          _rect$attribute3$heig = _rect$attribute3.height,
-          height = _rect$attribute3$heig === void 0 ? groupAttribute.height : _rect$attribute3$heig,
-          _rect$attribute3$stro = _rect$attribute3.stroke,
-          stroke = _rect$attribute3$stro === void 0 ? groupAttribute.stroke : _rect$attribute3$stro;
+        var _rect$attribute4 = rect.attribute,
+          _rect$attribute4$widt = _rect$attribute4.width,
+          width = _rect$attribute4$widt === void 0 ? groupAttribute.width : _rect$attribute4$widt,
+          _rect$attribute4$heig = _rect$attribute4.height,
+          height = _rect$attribute4$heig === void 0 ? groupAttribute.height : _rect$attribute4$heig,
+          _rect$attribute4$stro = _rect$attribute4.stroke,
+          stroke = _rect$attribute4$stro === void 0 ? groupAttribute.stroke : _rect$attribute4$stro;
         if (Array.isArray(stroke) && stroke.some(function (s) {
           return !1 === s;
         })) {
@@ -13666,7 +13663,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) {
@@ -13839,7 +13836,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,
@@ -13848,7 +13845,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) {
@@ -13897,7 +13894,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;
@@ -14429,7 +14426,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) {
@@ -14702,7 +14699,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;
@@ -14714,7 +14711,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) {
@@ -14734,14 +14731,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,
@@ -14749,7 +14746,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);
@@ -14758,12 +14755,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,
@@ -14772,7 +14769,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) {
@@ -14792,17 +14789,14 @@
     _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,
           background = _rect$attribute.background,
           _rect$attribute$strok = _rect$attribute.stroke,
           stroke = _rect$attribute$strok === void 0 ? rectAttribute.stroke : _rect$attribute$strok,
-          _rect$attribute$width = _rect$attribute.width,
-          width = _rect$attribute$width === void 0 ? rectAttribute.width : _rect$attribute$width,
-          _rect$attribute$heigh = _rect$attribute.height,
-          height = _rect$attribute$heigh === void 0 ? rectAttribute.height : _rect$attribute$heigh,
           _rect$attribute$corne = _rect$attribute.cornerRadius,
           cornerRadius = _rect$attribute$corne === void 0 ? rectAttribute.cornerRadius : _rect$attribute$corne,
           _rect$attribute$opaci = _rect$attribute.opacity,
@@ -14815,11 +14809,17 @@
           strokeOpacity = _rect$attribute$strok2 === void 0 ? rectAttribute.strokeOpacity : _rect$attribute$strok2,
           _rect$attribute$visib = _rect$attribute.visible,
           visible = _rect$attribute$visib === void 0 ? rectAttribute.visible : _rect$attribute$visib,
+          x1 = _rect$attribute.x1,
+          y1 = _rect$attribute.y1,
           _rect$attribute$x = _rect$attribute.x,
           originX = _rect$attribute$x === void 0 ? rectAttribute.x : _rect$attribute$x,
           _rect$attribute$y = _rect$attribute.y,
-          originY = _rect$attribute$y === void 0 ? rectAttribute.y : _rect$attribute$y,
-          fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
+          originY = _rect$attribute$y === void 0 ? rectAttribute.y : _rect$attribute$y;
+        var _rect$attribute2 = rect.attribute,
+          width = _rect$attribute2.width,
+          height = _rect$attribute2.height;
+        width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
+        var fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
           sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
           doFill = runFill(fill, background),
           doStroke = runStroke(stroke, lineWidth);
@@ -14839,12 +14839,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,
@@ -14853,7 +14853,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) {
@@ -14917,7 +14917,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,
@@ -14926,7 +14926,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) {
@@ -15147,7 +15147,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,
@@ -15222,7 +15222,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) {
@@ -15273,7 +15273,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,
@@ -15282,7 +15282,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) {
@@ -15353,7 +15353,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");
@@ -15382,7 +15382,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) {
@@ -15400,7 +15400,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);
         });
       }
@@ -15441,7 +15441,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();
@@ -15615,7 +15615,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) {
@@ -15666,7 +15666,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);
@@ -15687,7 +15687,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 () {
@@ -15780,7 +15780,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,
@@ -15789,7 +15789,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 () {
@@ -15847,7 +15847,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,
@@ -15856,7 +15856,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 () {
@@ -15943,7 +15943,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);
@@ -16071,12 +16071,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 () {
@@ -16109,21 +16112,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",
@@ -16135,9 +16132,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);
@@ -16196,7 +16214,6 @@
     }]);
     return InteractiveDrawItemInterceptorContribution;
   }();
-  InteractiveDrawItemInterceptorContribution = __decorate$h([injectable()], InteractiveDrawItemInterceptorContribution);
   var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DDrawItemInterceptor() {
       _classCallCheck(this, Canvas3DDrawItemInterceptor);
@@ -16287,7 +16304,6 @@
     }]);
     return Canvas3DDrawItemInterceptor;
   }();
-  Canvas3DDrawItemInterceptor = __decorate$h([injectable()], Canvas3DDrawItemInterceptor);
 
   var DefaultBoundsAllocate = /*#__PURE__*/function () {
     function DefaultBoundsAllocate() {
@@ -16365,9 +16381,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",
@@ -16421,7 +16435,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;
@@ -17689,7 +17704,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) {
@@ -30262,7 +30277,7 @@
       }
   };
 
-  const version = "0.17.0-alpha.4";
+  const version = "0.17.0-alpha.6";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;