@visactor/vrender 0.17.20-alpha.1 → 0.17.20-alpha.2

package/dist/index.js

@@ -6974,7 +6974,10 @@
       value: function removeAllChild() {
         if (!this._idMap) return;
         var child = this._firstChild;
-        for (; child;) child.parent = null, child._prev = null, child._next = null, child = child._next;
+        for (; child;) {
+          var next = child._next;
+          child.parent = null, child._prev = null, child._next = null, child = next;
+        }
         this._firstChild = null, this._lastChild = null, this._idMap.clear(), this._structEdit = !0, this.setCount(1 - this._count);
       }
     }, {
@@ -11358,15 +11361,7 @@
         var data = ResourceLoader.cache.get(url);
         data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(function () {
           mark.imageLoadFail(url);
-        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : (data = {
-          type: "image",
-          loadState: "init"
-        }, ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise ? (data.waitingMark = [mark], data.dataPromise.then(function (res) {
-          var _a;
-          data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map(function (mark, index) {
-            (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
-          });
-        })) : (data.loadState = "fail", mark.imageLoadFail(url)));
+        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : ResourceLoader.loadImage(url, mark);
       }
     }, {
       key: "GetSvg",
@@ -11400,10 +11395,68 @@
           return data.data;
         }));
       }
+    }, {
+      key: "loading",
+      value: function loading() {
+        setTimeout(function () {
+          if (!ResourceLoader.isLoading && ResourceLoader.toLoadAueue.length) {
+            ResourceLoader.isLoading = !0;
+            var tasks = ResourceLoader.toLoadAueue.splice(0, 10),
+              promises = [];
+            tasks.forEach(function (task) {
+              var url = task.url,
+                marks = task.marks,
+                data = {
+                  type: "image",
+                  loadState: "init"
+                };
+              if (ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise) {
+                data.waitingMark = marks;
+                var end = data.dataPromise.then(function (res) {
+                  var _a;
+                  data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map(function (mark, index) {
+                    (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
+                  });
+                });
+                promises.push(end);
+              } else data.loadState = "fail", marks.forEach(function (mark) {
+                return mark.imageLoadFail(url);
+              });
+            }), Promise.all(promises).then(function () {
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            })["catch"](function (error) {
+              console.error(error), ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            });
+          }
+        }, 0);
+      }
+    }, {
+      key: "loadImage",
+      value: function loadImage(url, mark) {
+        var index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) return ResourceLoader.toLoadAueue[index].marks.push(mark), void ResourceLoader.loading();
+        ResourceLoader.toLoadAueue.push({
+          url: url,
+          marks: [mark]
+        }), ResourceLoader.loading();
+      }
+    }, {
+      key: "improveImageLoading",
+      value: function improveImageLoading(url) {
+        var index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) {
+          var elememt = ResourceLoader.toLoadAueue.splice(index, 1);
+          ResourceLoader.toLoadAueue.unshift(elememt[0]);
+        }
+      }
     }]);
     return ResourceLoader;
   }();
-  ResourceLoader.cache = new Map();
+  function getIndex(url, arr) {
+    for (var i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
+    return -1;
+  }
+  ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [];
 
   var tempMatrix = new Matrix(),
     tempBounds$1 = new AABBBounds();
@@ -12189,7 +12242,7 @@
           data: "init",
           state: null
         };
-        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background);
+        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : isObject$1(image) ? (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
       }
     }, {
       key: "imageLoadSuccess",
@@ -16532,10 +16585,10 @@
           }
         } else {
           var richTextConfig = textConfig[i];
-          if (isNumber$1(richTextConfig.text) && (richTextConfig.text = "".concat(richTextConfig.text)), richTextConfig.text.includes("\n")) {
+          if (isNumber$1(richTextConfig.text) && (richTextConfig.text = "".concat(richTextConfig.text)), richTextConfig.text && richTextConfig.text.includes("\n")) {
             var textParts = richTextConfig.text.split("\n");
             for (var j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig));
-          } else paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
+          } else richTextConfig.text && paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
         }
         var maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
           maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
@@ -21177,7 +21230,9 @@
       value: function draw(image, renderService, drawContext) {
         var url = image.attribute.image;
         if (!url || !image.resources) return;
-        if ("success" !== image.resources.get(url).state) return;
+        var res = image.resources.get(url);
+        if ("loading" === res.state && isString$1(url)) return void ResourceLoader.improveImageLoading(url);
+        if ("success" !== res.state) return;
         var context = renderService.drawParams.context;
         if (!context) return;
         var imageAttribute = getTheme(image).image;
@@ -21218,6 +21273,241 @@
     },
     __metadata$$ = 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 () {
+    function ShadowRootDrawItemInterceptorContribution() {
+      _classCallCheck(this, ShadowRootDrawItemInterceptorContribution);
+      this.order = 1;
+    }
+    _createClass(ShadowRootDrawItemInterceptorContribution, [{
+      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;
+      }
+    }, {
+      key: "drawItem",
+      value: function drawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.shadowRoot) return !1;
+        var context = drawContext.context;
+        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
+          tempDirtyBounds.copy(drawContribution.dirtyBounds);
+          var m = graphic.globalTransMatrix.getInverse();
+          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
+        }
+        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
+      }
+    }]);
+    return ShadowRootDrawItemInterceptorContribution;
+  }();
+  var DebugDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function DebugDrawItemInterceptorContribution() {
+      _classCallCheck(this, DebugDrawItemInterceptorContribution);
+      this.order = 1;
+    }
+    _createClass(DebugDrawItemInterceptorContribution, [{
+      key: "afterDrawItem",
+      value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return graphic.attribute._debug_bounds && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+    }, {
+      key: "drawItem",
+      value: function drawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.attribute._debug_bounds) return !1;
+        var context = drawContext.context;
+        context.highPerformanceSave(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
+        var b = graphic.AABBBounds;
+        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;
+  }();
+  exports.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;
+  }();
+  exports.CommonDrawItemInterceptorContribution = __decorate$1j([injectable(), __metadata$$("design:paramtypes", [])], exports.CommonDrawItemInterceptorContribution);
+  var InteractiveDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function InteractiveDrawItemInterceptorContribution() {
+      _classCallCheck(this, InteractiveDrawItemInterceptorContribution);
+      this.order = 1;
+    }
+    _createClass(InteractiveDrawItemInterceptorContribution, [{
+      key: "beforeDrawItem",
+      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
+      }
+    }, {
+      key: "beforeSetInteractive",
+      value: function beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        var interactiveGraphic = graphic.interactiveGraphic;
+        if (graphic.attribute.globalZIndex) {
+          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
+            globalZIndex: 0,
+            zIndex: graphic.attribute.globalZIndex
+          }, !1, {
+            skipUpdateCallback: !0
+          }), drawContext.stage.tryInitInteractiveLayer();
+          var interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
+          }
+          return !0;
+        }
+        if (interactiveGraphic) {
+          drawContext.stage.tryInitInteractiveLayer();
+          var _interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (_interactiveLayer) {
+            this.getShadowRoot(_interactiveLayer).removeChild(interactiveGraphic);
+          }
+          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
+        }
+        return !1;
+      }
+    }, {
+      key: "beforeDrawInteractive",
+      value: function beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        var baseGraphic = graphic.baseGraphic;
+        if (baseGraphic) {
+          this.processing = !0;
+          var context = drawContext.context;
+          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
+        }
+        return !1;
+      }
+    }, {
+      key: "getShadowRoot",
+      value: function getShadowRoot(interactiveLayer) {
+        var _a;
+        var group = interactiveLayer.getElementById("_interactive_group");
+        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
+      }
+    }]);
+    return InteractiveDrawItemInterceptorContribution;
+  }();
+  var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
+    function Canvas3DDrawItemInterceptor() {
+      _classCallCheck(this, Canvas3DDrawItemInterceptor);
+      this.order = 1;
+    }
+    _createClass(Canvas3DDrawItemInterceptor, [{
+      key: "beforeDrawItem",
+      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
+        drawContext.in3dInterceptor = !0;
+        var _renderService$drawPa = renderService.drawParams,
+          context = _renderService$drawPa.context,
+          stage = _renderService$drawPa.stage;
+        context.canvas;
+        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
+        var m = context.currentMatrix;
+        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
+        var matrix = mat4Allocate.allocate();
+        mat3Tomat4(matrix, m);
+        var lastModelMatrix = context.modelMatrix;
+        if (lastModelMatrix) {
+          if (matrix) {
+            var _m = mat4Allocate.allocate();
+            context.modelMatrix = multiplyMat4Mat4(_m, lastModelMatrix, matrix);
+          }
+        } else context.modelMatrix = matrix;
+        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
+          var isPie = !1,
+            is3d = !1;
+          if (graphic.forEachChildren(function (c) {
+            return isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie;
+          }), graphic.forEachChildren(function (c) {
+            return is3d = !!c.findFace, !is3d;
+          }), isPie) {
+            var children = graphic.getChildren(),
+              sortedChildren = _toConsumableArray(children);
+            sortedChildren.sort(function (a, b) {
+              var _a, _b, _c, _d;
+              var angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
+                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
+              for (; angle1 < 0;) angle1 += pi2;
+              for (; angle2 < 0;) angle2 += pi2;
+              return angle2 - angle1;
+            }), sortedChildren.forEach(function (c) {
+              c._next = null, c._prev = null;
+            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(function (c) {
+              graphic.appendChild(c);
+            });
+            var _m2 = graphic.parent.globalTransMatrix;
+            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, _m2), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, _m2), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, _m2), graphic.removeAllChild(), children.forEach(function (c) {
+              c._next = null, c._prev = null;
+            }), children.forEach(function (c) {
+              graphic.appendChild(c);
+            });
+          } else if (is3d) {
+            var _children = graphic.getChildren(),
+              zChildren = _children.map(function (g) {
+                return {
+                  ave_z: g.findFace().vertices.map(function (v) {
+                    var _a;
+                    return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
+                  }).reduce(function (a, b) {
+                    return a + b;
+                  }, 0),
+                  g: g
+                };
+              });
+            zChildren.sort(function (a, b) {
+              return b.ave_z - a.ave_z;
+            }), graphic.removeAllChild(), zChildren.forEach(function (i) {
+              i.g._next = null, i.g._prev = null;
+            }), graphic.update(), zChildren.forEach(function (i) {
+              graphic.add(i.g);
+            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), _children.forEach(function (g) {
+              g._next = null, g._prev = null;
+            }), graphic.update(), _children.forEach(function (g) {
+              graphic.add(g);
+            });
+          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
+        } else drawContribution.renderItem(graphic, drawContext);
+        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
+      }
+    }, {
+      key: "initCanvasCtx",
+      value: function initCanvasCtx(context) {
+        context.setTransformForCurrent();
+      }
+    }]);
+    return Canvas3DDrawItemInterceptor;
+  }();
+
+  var __decorate$1i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      var d,
+        c = arguments.length,
+        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    },
+    __metadata$_ = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$E = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
@@ -21276,7 +21566,7 @@
     }]);
     return DefaultRenderService;
   }();
-  exports.DefaultRenderService = __decorate$1j([injectable(), __param$E(0, inject(DrawContribution)), __metadata$$("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();
@@ -21287,7 +21577,7 @@
   var BoundsPicker = Symbol["for"]("BoundsPicker");
   var GlobalPickerService = Symbol["for"]("GlobalPickerService");
 
-  var __decorate$1i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1h = 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;
@@ -21328,7 +21618,7 @@
     }]);
     return ShadowRootPickItemInterceptorContribution;
   }();
-  exports.ShadowRootPickItemInterceptorContribution = __decorate$1i([injectable()], exports.ShadowRootPickItemInterceptorContribution);
+  exports.ShadowRootPickItemInterceptorContribution = __decorate$1h([injectable()], exports.ShadowRootPickItemInterceptorContribution);
   exports.InteractivePickItemInterceptorContribution = /*#__PURE__*/function () {
     function InteractivePickItemInterceptorContribution() {
       _classCallCheck(this, InteractivePickItemInterceptorContribution);
@@ -21352,7 +21642,7 @@
     }]);
     return InteractivePickItemInterceptorContribution;
   }();
-  exports.InteractivePickItemInterceptorContribution = __decorate$1i([injectable()], exports.InteractivePickItemInterceptorContribution);
+  exports.InteractivePickItemInterceptorContribution = __decorate$1h([injectable()], exports.InteractivePickItemInterceptorContribution);
   exports.Canvas3DPickItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DPickItemInterceptor() {
       _classCallCheck(this, Canvas3DPickItemInterceptor);
@@ -21429,7 +21719,7 @@
     }]);
     return Canvas3DPickItemInterceptor;
   }();
-  exports.Canvas3DPickItemInterceptor = __decorate$1i([injectable()], exports.Canvas3DPickItemInterceptor);
+  exports.Canvas3DPickItemInterceptor = __decorate$1h([injectable()], exports.Canvas3DPickItemInterceptor);
 
   var pickModule = new ContainerModule(function (bind, unbind, isBound) {
     isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(exports.Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.Canvas3DPickItemInterceptor), bind(exports.ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.ShadowRootPickItemInterceptorContribution), bind(exports.InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -21442,14 +21732,14 @@
   var AutoEnablePlugins = Symbol["for"]("AutoEnablePlugins");
   var PluginService = Symbol["for"]("PluginService");
 
-  var __decorate$1h = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$_ = undefined && undefined.__metadata || function (k, v) {
+    __metadata$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) {
@@ -21505,7 +21795,7 @@
     }]);
     return DefaultPluginService;
   }();
-  DefaultPluginService = __decorate$1h([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(AutoEnablePlugins)), __metadata$_("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);
@@ -21519,14 +21809,14 @@
     bind(TextMeasureContribution).to(exports.DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
   });
 
-  var __decorate$1g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$Z = 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 () {
@@ -21620,16 +21910,16 @@
     }]);
     return CanvasLayerHandlerContribution;
   }();
-  CanvasLayerHandlerContribution = __decorate$1g([injectable(), __metadata$Z("design:paramtypes", [])], CanvasLayerHandlerContribution);
+  CanvasLayerHandlerContribution = __decorate$1f([injectable(), __metadata$Y("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-  var __decorate$1f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$Y = 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 () {
@@ -21687,16 +21977,16 @@
     }]);
     return EmptyLayerHandlerContribution;
   }();
-  EmptyLayerHandlerContribution = __decorate$1f([injectable(), __metadata$Y("design:paramtypes", [])], EmptyLayerHandlerContribution);
+  EmptyLayerHandlerContribution = __decorate$1e([injectable(), __metadata$X("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-  var __decorate$1e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$X = 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 () {
@@ -21783,7 +22073,7 @@
     }]);
     return OffscreenLayerHandlerContribution;
   }();
-  OffscreenLayerHandlerContribution = __decorate$1e([injectable(), __metadata$X("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);
@@ -21910,241 +22200,6 @@
     return result;
   }
 
-  var __decorate$1d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-      var d,
-        c = arguments.length,
-        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-      return c > 3 && r && Object.defineProperty(target, key, r), r;
-    },
-    __metadata$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 DrawItemInterceptor = Symbol["for"]("DrawItemInterceptor");
-  var tempDirtyBounds = new AABBBounds();
-  var ShadowRootDrawItemInterceptorContribution = /*#__PURE__*/function () {
-    function ShadowRootDrawItemInterceptorContribution() {
-      _classCallCheck(this, ShadowRootDrawItemInterceptorContribution);
-      this.order = 1;
-    }
-    _createClass(ShadowRootDrawItemInterceptorContribution, [{
-      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;
-      }
-    }, {
-      key: "drawItem",
-      value: function drawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.shadowRoot) return !1;
-        var context = drawContext.context;
-        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
-          tempDirtyBounds.copy(drawContribution.dirtyBounds);
-          var m = graphic.globalTransMatrix.getInverse();
-          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
-        }
-        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
-      }
-    }]);
-    return ShadowRootDrawItemInterceptorContribution;
-  }();
-  var DebugDrawItemInterceptorContribution = /*#__PURE__*/function () {
-    function DebugDrawItemInterceptorContribution() {
-      _classCallCheck(this, DebugDrawItemInterceptorContribution);
-      this.order = 1;
-    }
-    _createClass(DebugDrawItemInterceptorContribution, [{
-      key: "afterDrawItem",
-      value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute._debug_bounds && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-    }, {
-      key: "drawItem",
-      value: function drawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.attribute._debug_bounds) return !1;
-        var context = drawContext.context;
-        context.highPerformanceSave(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
-        var b = graphic.AABBBounds;
-        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$1d([injectable(), __metadata$W("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
-  var InteractiveDrawItemInterceptorContribution = /*#__PURE__*/function () {
-    function InteractiveDrawItemInterceptorContribution() {
-      _classCallCheck(this, InteractiveDrawItemInterceptorContribution);
-      this.order = 1;
-    }
-    _createClass(InteractiveDrawItemInterceptorContribution, [{
-      key: "beforeDrawItem",
-      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
-      }
-    }, {
-      key: "beforeSetInteractive",
-      value: function beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        var interactiveGraphic = graphic.interactiveGraphic;
-        if (graphic.attribute.globalZIndex) {
-          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
-            globalZIndex: 0,
-            zIndex: graphic.attribute.globalZIndex
-          }, !1, {
-            skipUpdateCallback: !0
-          }), drawContext.stage.tryInitInteractiveLayer();
-          var interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (interactiveLayer) {
-            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
-          }
-          return !0;
-        }
-        if (interactiveGraphic) {
-          drawContext.stage.tryInitInteractiveLayer();
-          var _interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (_interactiveLayer) {
-            this.getShadowRoot(_interactiveLayer).removeChild(interactiveGraphic);
-          }
-          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
-        }
-        return !1;
-      }
-    }, {
-      key: "beforeDrawInteractive",
-      value: function beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        var baseGraphic = graphic.baseGraphic;
-        if (baseGraphic) {
-          this.processing = !0;
-          var context = drawContext.context;
-          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
-        }
-        return !1;
-      }
-    }, {
-      key: "getShadowRoot",
-      value: function getShadowRoot(interactiveLayer) {
-        var _a;
-        var group = interactiveLayer.getElementById("_interactive_group");
-        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
-      }
-    }]);
-    return InteractiveDrawItemInterceptorContribution;
-  }();
-  var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
-    function Canvas3DDrawItemInterceptor() {
-      _classCallCheck(this, Canvas3DDrawItemInterceptor);
-      this.order = 1;
-    }
-    _createClass(Canvas3DDrawItemInterceptor, [{
-      key: "beforeDrawItem",
-      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
-        drawContext.in3dInterceptor = !0;
-        var _renderService$drawPa = renderService.drawParams,
-          context = _renderService$drawPa.context,
-          stage = _renderService$drawPa.stage;
-        context.canvas;
-        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
-        var m = context.currentMatrix;
-        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
-        var matrix = mat4Allocate.allocate();
-        mat3Tomat4(matrix, m);
-        var lastModelMatrix = context.modelMatrix;
-        if (lastModelMatrix) {
-          if (matrix) {
-            var _m = mat4Allocate.allocate();
-            context.modelMatrix = multiplyMat4Mat4(_m, lastModelMatrix, matrix);
-          }
-        } else context.modelMatrix = matrix;
-        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
-          var isPie = !1,
-            is3d = !1;
-          if (graphic.forEachChildren(function (c) {
-            return isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie;
-          }), graphic.forEachChildren(function (c) {
-            return is3d = !!c.findFace, !is3d;
-          }), isPie) {
-            var children = graphic.getChildren(),
-              sortedChildren = _toConsumableArray(children);
-            sortedChildren.sort(function (a, b) {
-              var _a, _b, _c, _d;
-              var angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
-                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
-              for (; angle1 < 0;) angle1 += pi2;
-              for (; angle2 < 0;) angle2 += pi2;
-              return angle2 - angle1;
-            }), sortedChildren.forEach(function (c) {
-              c._next = null, c._prev = null;
-            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(function (c) {
-              graphic.appendChild(c);
-            });
-            var _m2 = graphic.parent.globalTransMatrix;
-            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, _m2), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, _m2), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, _m2), graphic.removeAllChild(), children.forEach(function (c) {
-              c._next = null, c._prev = null;
-            }), children.forEach(function (c) {
-              graphic.appendChild(c);
-            });
-          } else if (is3d) {
-            var _children = graphic.getChildren(),
-              zChildren = _children.map(function (g) {
-                return {
-                  ave_z: g.findFace().vertices.map(function (v) {
-                    var _a;
-                    return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
-                  }).reduce(function (a, b) {
-                    return a + b;
-                  }, 0),
-                  g: g
-                };
-              });
-            zChildren.sort(function (a, b) {
-              return b.ave_z - a.ave_z;
-            }), graphic.removeAllChild(), zChildren.forEach(function (i) {
-              i.g._next = null, i.g._prev = null;
-            }), graphic.update(), zChildren.forEach(function (i) {
-              graphic.add(i.g);
-            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), _children.forEach(function (g) {
-              g._next = null, g._prev = null;
-            }), graphic.update(), _children.forEach(function (g) {
-              graphic.add(g);
-            });
-          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
-        } else drawContribution.renderItem(graphic, drawContext);
-        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
-      }
-    }, {
-      key: "initCanvasCtx",
-      value: function initCanvasCtx(context) {
-        context.setTransformForCurrent();
-      }
-    }]);
-    return Canvas3DDrawItemInterceptor;
-  }();
-
   var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -22211,7 +22266,7 @@
         var d = context.dpr % 1;
         (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds);
         var drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
-        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
+        context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.clear(), this.backupDirtyBounds.clear()), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(function (group) {
@@ -22274,7 +22329,7 @@
         }, subLayers.set(group._uid, incrementalLayer));
         var incrementalContext = incrementalLayer.layer.getNativeHandler().getContext(),
           idc = incrementalLayer.drawContribution || container.get(IncrementalDrawContribution);
-        idc.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), idc.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), idc.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), {
+        idc.dirtyBounds.clear(), idc.backupDirtyBounds.clear(), idc.draw(this.currentRenderService, Object.assign(Object.assign({}, drawContext), {
           drawContribution: idc,
           clear: "transparent",
           layer: incrementalLayer.layer,
@@ -22992,7 +23047,7 @@
   DefaultIncrementalDrawContribution = __decorate$18([injectable(), __param$A(0, multiInject(GraphicRender)), __param$A(1, inject(DefaultIncrementalCanvasLineRender)), __param$A(2, inject(DefaultIncrementalCanvasAreaRender)), __param$A(3, inject(ContributionProvider)), __param$A(3, named(DrawItemInterceptor)), __metadata$T("design:paramtypes", [Array, Object, Object, Object])], DefaultIncrementalDrawContribution);
 
   var renderModule = new ContainerModule(function (bind) {
-    bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
+    bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(exports.CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(exports.CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
   });
 
   function load(container) {
@@ -34980,7 +35035,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.17.20-alpha.1";
+  const version = "0.17.20-alpha.2";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);
@@ -35031,6 +35086,7 @@
   exports.BoundsContext = BoundsContext;
   exports.BoundsPicker = BoundsPicker;
   exports.CIRCLE_NUMBER_TYPE = CIRCLE_NUMBER_TYPE;
+  exports.Canvas3DDrawItemInterceptor = Canvas3DDrawItemInterceptor;
   exports.CanvasFactory = CanvasFactory;
   exports.CanvasTextLayout = CanvasTextLayout;
   exports.CbAnimate = CbAnimate;
@@ -35052,6 +35108,7 @@
   exports.CustomEvent = CustomEvent;
   exports.CustomPath2D = CustomPath2D;
   exports.CustomSymbolClass = CustomSymbolClass;
+  exports.DebugDrawItemInterceptorContribution = DebugDrawItemInterceptorContribution;
   exports.DefaultArcAllocate = DefaultArcAllocate;
   exports.DefaultArcAttribute = DefaultArcAttribute;
   exports.DefaultArcRenderContribution = DefaultArcRenderContribution;
@@ -35105,6 +35162,7 @@
   exports.DefaultTransform = DefaultTransform;
   exports.DragNDrop = DragNDrop;
   exports.DrawContribution = DrawContribution;
+  exports.DrawItemInterceptor = DrawItemInterceptor;
   exports.DynamicLayerHandlerContribution = DynamicLayerHandlerContribution;
   exports.EnvContribution = EnvContribution;
   exports.EventManager = EventManager;
@@ -35143,6 +35201,7 @@
   exports.IncreaseCount = IncreaseCount;
   exports.IncrementalDrawContribution = IncrementalDrawContribution;
   exports.InputText = InputText;
+  exports.InteractiveDrawItemInterceptorContribution = InteractiveDrawItemInterceptorContribution;
   exports.InteractiveSubRenderContribution = InteractiveSubRenderContribution;
   exports.LINE_NUMBER_TYPE = LINE_NUMBER_TYPE;
   exports.Layer = Layer;
@@ -35204,6 +35263,7 @@
   exports.SYMBOL_NUMBER_TYPE = SYMBOL_NUMBER_TYPE;
   exports.SegContext = SegContext;
   exports.ShadowRoot = ShadowRoot;
+  exports.ShadowRootDrawItemInterceptorContribution = ShadowRootDrawItemInterceptorContribution;
   exports.Stage = Stage;
   exports.StaticLayerHandlerContribution = StaticLayerHandlerContribution;
   exports.Step = Step$1;