@visactor/vrender 0.17.18-alpha.1 → 0.17.18

package/dist/index.js

@@ -5158,6 +5158,7 @@
   var DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
     opacity: 1,
     background: null,
+    backgroundCornerRadius: 0,
     texture: null,
     textureColor: "black",
     textureSize: 10,
@@ -6976,10 +6977,7 @@
       value: function removeAllChild() {
         if (!this._idMap) return;
         var child = this._firstChild;
-        for (; child;) {
-          var next = child._next;
-          child.parent = null, child._prev = null, child._next = null, child = next;
-        }
+        for (; child;) child.parent = null, child._prev = null, child._next = null, child = child._next;
         this._firstChild = null, this._lastChild = null, this._idMap.clear(), this._structEdit = !0, this.setCount(1 - this._count);
       }
     }, {
@@ -11363,7 +11361,15 @@
         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) : ResourceLoader.loadImage(url, mark);
+        }) : "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)));
       }
     }, {
       key: "GetSvg",
@@ -11397,68 +11403,10 @@
           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;
   }();
-  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 = [];
+  ResourceLoader.cache = new Map();
 
   var tempMatrix = new Matrix(),
     tempBounds$1 = new AABBBounds();
@@ -12244,7 +12192,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)) : isObject$1(image) ? (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
+        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);
       }
     }, {
       key: "imageLoadSuccess",
@@ -12818,7 +12766,7 @@
       value: function doUpdateAABBBounds() {
         var attribute = this.attribute,
           groupTheme = getTheme(this).group;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var bounds = application.graphicService.updateGroupAABBBounds(attribute, groupTheme, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
           boundsPadding = _attribute$boundsPadd === void 0 ? groupTheme.boundsPadding : _attribute$boundsPadd,
@@ -13639,7 +13587,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds(full) {
         var circleTheme = getTheme(this).circle;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateCircleAABBBounds(attribute, getTheme(this).circle, this._AABBBounds, full, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -13826,7 +13774,7 @@
     return CanvasTextLayout;
   }();
 
-  var TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
+  var TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
   var Text = /*#__PURE__*/function (_Graphic) {
     _inherits(Text, _Graphic);
     var _super = _createSuper(Text);
@@ -13906,7 +13854,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var textTheme = getTheme(this).text;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateTextAABBBounds(attribute, textTheme, this._AABBBounds, this),
           _this$attribute$bound = this.attribute.boundsPadding,
@@ -15385,7 +15333,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds(full) {
         var symbolTheme = getTheme(this).symbol;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateSymbolAABBBounds(attribute, getTheme(this).symbol, this._AABBBounds, full, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -15475,7 +15423,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var lineTheme = getTheme(this).line;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateLineAABBBounds(attribute, getTheme(this).line, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -15566,7 +15514,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var rectTheme = getTheme(this).rect;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateRectAABBBounds(attribute, getTheme(this).rect, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -15796,7 +15744,7 @@
     }, {
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var bounds = application.graphicService.updateGlyphAABBBounds(this.attribute, getTheme(this).glyph, this._AABBBounds, this);
         return this.clearUpdateBoundTag(), bounds;
       }
@@ -16182,7 +16130,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var imageTheme = getTheme(this).image;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateImageAABBBounds(attribute, getTheme(this).image, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -16541,7 +16489,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var richTextTheme = getTheme(this).richtext;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateRichTextAABBBounds(attribute, getTheme(this).richtext, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -16604,10 +16552,13 @@
               _this2.addUpdateBoundTag(), null === (_a = _this2.stage) || void 0 === _a || _a.renderNextFrame();
             }, icon.richtextId = config.id, paragraphs.push(icon);
           }
-        } else if (textConfig[i].text.includes("\n")) {
-          var textParts = textConfig[i].text.split("\n");
-          for (var j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, textConfig[i]));
-        } else paragraphs.push(new Paragraph(textConfig[i].text, !1, textConfig[i]));
+        } else {
+          var richTextConfig = textConfig[i];
+          if (isNumber$2(richTextConfig.text) && (richTextConfig.text = "".concat(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));
+        }
         var maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
           maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
           richTextWidthEnable = "number" == typeof width && Number.isFinite(width) && width > 0 && (!maxWidthFinite || width <= maxWidth),
@@ -16726,7 +16677,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var pathTheme = getTheme(this).path;
-        this.doUpdatePathShape(), this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this.doUpdatePathShape(), this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updatePathAABBBounds(attribute, getTheme(this).path, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -16814,7 +16765,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var areaTheme = getTheme(this).area;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateAreaAABBBounds(attribute, getTheme(this).area, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -17017,7 +16968,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds(full) {
         var arcTheme = getTheme(this).arc;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateArcAABBBounds(attribute, getTheme(this).arc, this._AABBBounds, full, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -17103,7 +17054,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var polygonTheme = getTheme(this).arc;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updateArc3dAABBBounds(attribute, getTheme(this).polygon, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -17151,7 +17102,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var polygonTheme = getTheme(this).polygon;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updatePolygonAABBBounds(attribute, getTheme(this).polygon, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -17224,7 +17175,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var polygonTheme = getTheme(this).polygon;
-        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        this._AABBBounds.clear();
         var attribute = this.attribute,
           bounds = application.graphicService.updatePyramid3dAABBBounds(attribute, getTheme(this).polygon, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -18184,35 +18135,37 @@
     }, {
       key: "transformAABBBounds",
       value: function transformAABBBounds(attribute, aabbBounds, theme, miter, graphic) {
-        var _attribute$scaleX2 = attribute.scaleX,
-          scaleX = _attribute$scaleX2 === void 0 ? theme.scaleX : _attribute$scaleX2,
-          _attribute$scaleY2 = attribute.scaleY,
-          scaleY = _attribute$scaleY2 === void 0 ? theme.scaleY : _attribute$scaleY2,
-          _attribute$stroke = attribute.stroke,
-          stroke = _attribute$stroke === void 0 ? theme.stroke : _attribute$stroke,
-          _attribute$shadowBlur2 = attribute.shadowBlur,
-          shadowBlur = _attribute$shadowBlur2 === void 0 ? theme.shadowBlur : _attribute$shadowBlur2,
-          _attribute$lineWidth = attribute.lineWidth,
-          lineWidth = _attribute$lineWidth === void 0 ? theme.lineWidth : _attribute$lineWidth,
-          _attribute$pickStroke = attribute.pickStrokeBuffer,
-          pickStrokeBuffer = _attribute$pickStroke === void 0 ? theme.pickStrokeBuffer : _attribute$pickStroke,
-          _attribute$strokeBoun2 = attribute.strokeBoundsBuffer,
-          strokeBoundsBuffer = _attribute$strokeBoun2 === void 0 ? theme.strokeBoundsBuffer : _attribute$strokeBoun2,
-          tb1 = this.tempAABBBounds1,
-          tb2 = this.tempAABBBounds2;
-        if (stroke && lineWidth) {
-          var scaledHalfLineWidth = (lineWidth + pickStrokeBuffer) / Math.abs(scaleX + scaleY);
-          boundStroke(tb1, scaledHalfLineWidth, miter, strokeBoundsBuffer), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+        if (!aabbBounds.empty()) {
+          var _attribute$scaleX2 = attribute.scaleX,
+            scaleX = _attribute$scaleX2 === void 0 ? theme.scaleX : _attribute$scaleX2,
+            _attribute$scaleY2 = attribute.scaleY,
+            scaleY = _attribute$scaleY2 === void 0 ? theme.scaleY : _attribute$scaleY2,
+            _attribute$stroke = attribute.stroke,
+            stroke = _attribute$stroke === void 0 ? theme.stroke : _attribute$stroke,
+            _attribute$shadowBlur2 = attribute.shadowBlur,
+            shadowBlur = _attribute$shadowBlur2 === void 0 ? theme.shadowBlur : _attribute$shadowBlur2,
+            _attribute$lineWidth = attribute.lineWidth,
+            lineWidth = _attribute$lineWidth === void 0 ? theme.lineWidth : _attribute$lineWidth,
+            _attribute$pickStroke = attribute.pickStrokeBuffer,
+            pickStrokeBuffer = _attribute$pickStroke === void 0 ? theme.pickStrokeBuffer : _attribute$pickStroke,
+            _attribute$strokeBoun2 = attribute.strokeBoundsBuffer,
+            strokeBoundsBuffer = _attribute$strokeBoun2 === void 0 ? theme.strokeBoundsBuffer : _attribute$strokeBoun2,
+            tb1 = this.tempAABBBounds1,
+            tb2 = this.tempAABBBounds2;
+          if (stroke && lineWidth) {
+            var scaledHalfLineWidth = (lineWidth + pickStrokeBuffer) / Math.abs(scaleX + scaleY);
+            boundStroke(tb1, scaledHalfLineWidth, miter, strokeBoundsBuffer), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+          }
+          if (shadowBlur) {
+            var _attribute$shadowOffs = attribute.shadowOffsetX,
+              shadowOffsetX = _attribute$shadowOffs === void 0 ? theme.shadowOffsetX : _attribute$shadowOffs,
+              _attribute$shadowOffs2 = attribute.shadowOffsetY,
+              shadowOffsetY = _attribute$shadowOffs2 === void 0 ? theme.shadowOffsetY : _attribute$shadowOffs2,
+              shadowBlurWidth = shadowBlur / Math.abs(scaleX + scaleY) * 2;
+            boundStroke(tb1, shadowBlurWidth, !1, strokeBoundsBuffer + 1), tb1.translate(shadowOffsetX, shadowOffsetY), aabbBounds.union(tb1);
+          }
         }
-        if (shadowBlur) {
-          var _attribute$shadowOffs = attribute.shadowOffsetX,
-            shadowOffsetX = _attribute$shadowOffs === void 0 ? theme.shadowOffsetX : _attribute$shadowOffs,
-            _attribute$shadowOffs2 = attribute.shadowOffsetY,
-            shadowOffsetY = _attribute$shadowOffs2 === void 0 ? theme.shadowOffsetY : _attribute$shadowOffs2,
-            shadowBlurWidth = shadowBlur / Math.abs(scaleX + scaleY) * 2;
-          boundStroke(tb1, shadowBlurWidth, !1, strokeBoundsBuffer + 1), tb1.translate(shadowOffsetX, shadowOffsetY), aabbBounds.union(tb1);
-        }
-        this.combindShadowAABBBounds(aabbBounds, graphic);
+        if (this.combindShadowAABBBounds(aabbBounds, graphic), aabbBounds.empty()) return;
         var updateMatrix = !0;
         var m = graphic.transMatrix;
         graphic && graphic.isContainer && (updateMatrix = !(1 === m.a && 0 === m.b && 0 === m.c && 1 === m.d && 0 === m.e && 0 === m.f)), updateMatrix && transformBoundsWithMatrix(aabbBounds, aabbBounds, m);
@@ -20808,7 +20761,10 @@
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
           context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+        } else {
+          var backgroundCornerRadius = graphic.attribute.backgroundCornerRadius;
+          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+        }
         shouldReCalBounds && boundsAllocate.free(b);
       }
     }]);
@@ -21243,9 +21199,7 @@
       value: function draw(image, renderService, drawContext) {
         var url = image.attribute.image;
         if (!url || !image.resources) return;
-        var res = image.resources.get(url);
-        if ("loading" === res.state && isString$1(url)) return void ResourceLoader.improveImageLoading(url);
-        if ("success" !== res.state) return;
+        if ("success" !== image.resources.get(url).state) return;
         var context = renderService.drawParams.context;
         if (!context) return;
         var imageAttribute = getTheme(image).image;
@@ -21286,355 +21240,120 @@
     },
     __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) {
+        decorator(target, key, paramIndex);
+      };
     };
-  var DrawItemInterceptor = Symbol["for"]("DrawItemInterceptor");
-  var tempDirtyBounds = new AABBBounds();
-  var ShadowRootDrawItemInterceptorContribution = /*#__PURE__*/function () {
-    function ShadowRootDrawItemInterceptorContribution() {
-      _classCallCheck(this, ShadowRootDrawItemInterceptorContribution);
-      this.order = 1;
+  var RenderService = Symbol["for"]("RenderService");
+  var BeforeRenderConstribution = Symbol["for"]("BeforeRenderConstribution");
+  exports.DefaultRenderService = /*#__PURE__*/function () {
+    function DefaultRenderService(drawContribution) {
+      _classCallCheck(this, DefaultRenderService);
+      this.drawContribution = drawContribution;
     }
-    _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;
+    _createClass(DefaultRenderService, [{
+      key: "prepare",
+      value: function prepare(updateBounds) {
+        var _this = this;
+        updateBounds && this.renderTreeRoots.forEach(function (g) {
+          _this._prepare(g, updateBounds);
+        });
       }
     }, {
-      key: "beforeDrawItem",
-      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      key: "_prepare",
+      value: function _prepare(g, updateBounds) {
+        var _this2 = this;
+        g.forEachChildren(function (g) {
+          _this2._prepare(g, updateBounds);
+        }), g.update({
+          bounds: updateBounds,
+          trans: !0
+        });
       }
     }, {
-      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: "prepareRenderList",
+      value: function prepareRenderList() {}
     }, {
-      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;
+      key: "beforeDraw",
+      value: function beforeDraw(params) {}
+    }, {
+      key: "draw",
+      value: function draw(params) {
+        this.drawContribution.draw(this, Object.assign({}, this.drawParams));
       }
-    }]);
-    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: "afterDraw",
+      value: function afterDraw(params) {
+        this.drawContribution.afterDraw && this.drawContribution.afterDraw(this, Object.assign({}, this.drawParams));
       }
     }, {
-      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;
+      key: "render",
+      value: function render(groups, params) {
+        this.renderTreeRoots = groups, this.drawParams = params;
+        var updateBounds = params.updateBounds;
+        this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
       }
     }]);
-    return CommonDrawItemInterceptorContribution;
+    return DefaultRenderService;
   }();
-  exports.CommonDrawItemInterceptorContribution = __decorate$1j([injectable(), __metadata$$("design:paramtypes", [])], exports.CommonDrawItemInterceptorContribution);
-  var InteractiveDrawItemInterceptorContribution = /*#__PURE__*/function () {
-    function InteractiveDrawItemInterceptorContribution() {
-      _classCallCheck(this, InteractiveDrawItemInterceptorContribution);
+  exports.DefaultRenderService = __decorate$1j([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();
+  });
+
+  var GraphicPicker = Symbol["for"]("GraphicPicker");
+  var PickerService = Symbol["for"]("PickerService");
+  var BoundsPicker = Symbol["for"]("BoundsPicker");
+  var GlobalPickerService = Symbol["for"]("GlobalPickerService");
+
+  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;
+  };
+  var PickItemInterceptor = Symbol["for"]("PickItemInterceptor");
+  exports.ShadowRootPickItemInterceptorContribution = /*#__PURE__*/function () {
+    function ShadowRootPickItemInterceptorContribution() {
+      _classCallCheck(this, ShadowRootPickItemInterceptorContribution);
       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;
+    _createClass(ShadowRootPickItemInterceptorContribution, [{
+      key: "afterPickItem",
+      value: function afterPickItem(graphic, pickerService, point, pickParams, params) {
+        return graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx ? this._pickItem(graphic, pickerService, point, pickParams, params) : null;
       }
     }, {
-      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: "beforePickItem",
+      value: function beforePickItem(graphic, pickerService, point, pickParams, params) {
+        return graphic.attribute.shadowRootIdx < 0 ? this._pickItem(graphic, pickerService, point, pickParams, params) : null;
       }
     }, {
-      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();
+      key: "_pickItem",
+      value: function _pickItem(graphic, pickerService, point, pickParams, params) {
+        if (!graphic.shadowRoot) return null;
+        var _ref = params || {},
+          parentMatrix = _ref.parentMatrix;
+        if (!parentMatrix) return null;
+        var context = pickerService.pickContext;
+        context.highPerformanceSave();
+        var g = graphic.shadowRoot,
+          currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix),
+          newPoint = new Point(currentGroupMatrix.a * point.x + currentGroupMatrix.c * point.y + currentGroupMatrix.e, currentGroupMatrix.b * point.x + currentGroupMatrix.d * point.y + currentGroupMatrix.f),
+          result = pickerService.pickGroup(g, newPoint, currentGroupMatrix, pickParams);
+        return context.highPerformanceRestore(), result;
       }
     }]);
-    return InteractiveDrawItemInterceptorContribution;
+    return ShadowRootPickItemInterceptorContribution;
   }();
-  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) {
-        decorator(target, key, paramIndex);
-      };
-    };
-  var RenderService = Symbol["for"]("RenderService");
-  var BeforeRenderConstribution = Symbol["for"]("BeforeRenderConstribution");
-  exports.DefaultRenderService = /*#__PURE__*/function () {
-    function DefaultRenderService(drawContribution) {
-      _classCallCheck(this, DefaultRenderService);
-      this.drawContribution = drawContribution;
-    }
-    _createClass(DefaultRenderService, [{
-      key: "prepare",
-      value: function prepare(updateBounds) {
-        var _this = this;
-        updateBounds && this.renderTreeRoots.forEach(function (g) {
-          _this._prepare(g, updateBounds);
-        });
-      }
-    }, {
-      key: "_prepare",
-      value: function _prepare(g, updateBounds) {
-        var _this2 = this;
-        g.forEachChildren(function (g) {
-          _this2._prepare(g, updateBounds);
-        }), g.update({
-          bounds: updateBounds,
-          trans: !0
-        });
-      }
-    }, {
-      key: "prepareRenderList",
-      value: function prepareRenderList() {}
-    }, {
-      key: "beforeDraw",
-      value: function beforeDraw(params) {}
-    }, {
-      key: "draw",
-      value: function draw(params) {
-        this.drawContribution.draw(this, Object.assign({}, this.drawParams));
-      }
-    }, {
-      key: "afterDraw",
-      value: function afterDraw(params) {
-        this.drawContribution.afterDraw && this.drawContribution.afterDraw(this, Object.assign({}, this.drawParams));
-      }
-    }, {
-      key: "render",
-      value: function render(groups, params) {
-        this.renderTreeRoots = groups, this.drawParams = params;
-        var updateBounds = params.updateBounds;
-        this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
-      }
-    }]);
-    return 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();
-  });
-
-  var GraphicPicker = Symbol["for"]("GraphicPicker");
-  var PickerService = Symbol["for"]("PickerService");
-  var BoundsPicker = Symbol["for"]("BoundsPicker");
-  var GlobalPickerService = Symbol["for"]("GlobalPickerService");
-
-  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;
-    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 PickItemInterceptor = Symbol["for"]("PickItemInterceptor");
-  exports.ShadowRootPickItemInterceptorContribution = /*#__PURE__*/function () {
-    function ShadowRootPickItemInterceptorContribution() {
-      _classCallCheck(this, ShadowRootPickItemInterceptorContribution);
-      this.order = 1;
-    }
-    _createClass(ShadowRootPickItemInterceptorContribution, [{
-      key: "afterPickItem",
-      value: function afterPickItem(graphic, pickerService, point, pickParams, params) {
-        return graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx ? this._pickItem(graphic, pickerService, point, pickParams, params) : null;
-      }
-    }, {
-      key: "beforePickItem",
-      value: function beforePickItem(graphic, pickerService, point, pickParams, params) {
-        return graphic.attribute.shadowRootIdx < 0 ? this._pickItem(graphic, pickerService, point, pickParams, params) : null;
-      }
-    }, {
-      key: "_pickItem",
-      value: function _pickItem(graphic, pickerService, point, pickParams, params) {
-        if (!graphic.shadowRoot) return null;
-        var _ref = params || {},
-          parentMatrix = _ref.parentMatrix;
-        if (!parentMatrix) return null;
-        var context = pickerService.pickContext;
-        context.highPerformanceSave();
-        var g = graphic.shadowRoot,
-          currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix),
-          newPoint = new Point(currentGroupMatrix.a * point.x + currentGroupMatrix.c * point.y + currentGroupMatrix.e, currentGroupMatrix.b * point.x + currentGroupMatrix.d * point.y + currentGroupMatrix.f),
-          result = pickerService.pickGroup(g, newPoint, currentGroupMatrix, pickParams);
-        return context.highPerformanceRestore(), result;
-      }
-    }]);
-    return ShadowRootPickItemInterceptorContribution;
-  }();
-  exports.ShadowRootPickItemInterceptorContribution = __decorate$1h([injectable()], exports.ShadowRootPickItemInterceptorContribution);
-  exports.InteractivePickItemInterceptorContribution = /*#__PURE__*/function () {
-    function InteractivePickItemInterceptorContribution() {
-      _classCallCheck(this, InteractivePickItemInterceptorContribution);
+  exports.ShadowRootPickItemInterceptorContribution = __decorate$1i([injectable()], exports.ShadowRootPickItemInterceptorContribution);
+  exports.InteractivePickItemInterceptorContribution = /*#__PURE__*/function () {
+    function InteractivePickItemInterceptorContribution() {
+      _classCallCheck(this, InteractivePickItemInterceptorContribution);
       this.order = 1;
     }
     _createClass(InteractivePickItemInterceptorContribution, [{
@@ -21655,7 +21374,7 @@
     }]);
     return InteractivePickItemInterceptorContribution;
   }();
-  exports.InteractivePickItemInterceptorContribution = __decorate$1h([injectable()], exports.InteractivePickItemInterceptorContribution);
+  exports.InteractivePickItemInterceptorContribution = __decorate$1i([injectable()], exports.InteractivePickItemInterceptorContribution);
   exports.Canvas3DPickItemInterceptor = /*#__PURE__*/function () {
     function Canvas3DPickItemInterceptor() {
       _classCallCheck(this, Canvas3DPickItemInterceptor);
@@ -21732,7 +21451,7 @@
     }]);
     return Canvas3DPickItemInterceptor;
   }();
-  exports.Canvas3DPickItemInterceptor = __decorate$1h([injectable()], exports.Canvas3DPickItemInterceptor);
+  exports.Canvas3DPickItemInterceptor = __decorate$1i([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);
@@ -21745,14 +21464,14 @@
   var AutoEnablePlugins = Symbol["for"]("AutoEnablePlugins");
   var PluginService = Symbol["for"]("PluginService");
 
-  var __decorate$1g = 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;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$Z = undefined && undefined.__metadata || function (k, v) {
+    __metadata$_ = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$D = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -21808,7 +21527,7 @@
     }]);
     return DefaultPluginService;
   }();
-  DefaultPluginService = __decorate$1g([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(AutoEnablePlugins)), __metadata$Z("design:paramtypes", [Object])], DefaultPluginService);
+  DefaultPluginService = __decorate$1h([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(AutoEnablePlugins)), __metadata$_("design:paramtypes", [Object])], DefaultPluginService);
 
   var pluginModule = new ContainerModule(function (bind) {
     bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -21822,14 +21541,14 @@
     bind(TextMeasureContribution).to(exports.DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
   });
 
-  var __decorate$1f = 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$Y = undefined && undefined.__metadata || function (k, v) {
+    __metadata$Z = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var CanvasLayerHandlerContribution = /*#__PURE__*/function () {
@@ -21923,16 +21642,16 @@
     }]);
     return CanvasLayerHandlerContribution;
   }();
-  CanvasLayerHandlerContribution = __decorate$1f([injectable(), __metadata$Y("design:paramtypes", [])], CanvasLayerHandlerContribution);
+  CanvasLayerHandlerContribution = __decorate$1g([injectable(), __metadata$Z("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-  var __decorate$1e = 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$X = undefined && undefined.__metadata || function (k, v) {
+    __metadata$Y = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var EmptyLayerHandlerContribution = /*#__PURE__*/function () {
@@ -21990,16 +21709,16 @@
     }]);
     return EmptyLayerHandlerContribution;
   }();
-  EmptyLayerHandlerContribution = __decorate$1e([injectable(), __metadata$X("design:paramtypes", [])], EmptyLayerHandlerContribution);
+  EmptyLayerHandlerContribution = __decorate$1f([injectable(), __metadata$Y("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-  var __decorate$1d = 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$W = undefined && undefined.__metadata || function (k, v) {
+    __metadata$X = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var OffscreenLayerHandlerContribution = /*#__PURE__*/function () {
@@ -22081,137 +21800,372 @@
         context.nativeContext.save(), context.nativeContext.setTransform(targetDpr, 0, 0, targetDpr, 0, 0), params.clear && context.clearRect(x, y, width, height), context.drawImage(this.canvas.nativeCanvas, 0, 0, this.canvas.width, this.canvas.height, x, y, width, height), context.nativeContext.restore();
       }
     }, {
-      key: "merge",
-      value: function merge(layerHandlers) {}
+      key: "merge",
+      value: function merge(layerHandlers) {}
+    }]);
+    return OffscreenLayerHandlerContribution;
+  }();
+  OffscreenLayerHandlerContribution = __decorate$1e([injectable(), __metadata$X("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);
+  });
+
+  function load$1(container) {
+    container.load(envModules), container.load(textMeasureModules), container.load(layerHandlerModules);
+  }
+
+  var __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator["throw"](value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        var value;
+        result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
+          resolve(value);
+        })).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  };
+  function foreach(graphic, defaultZIndex, cb) {
+    var reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+    var sort3d = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
+    var childMap = {},
+      zIdxArray = [];
+    var needSort = !1;
+    if (sort3d) needSort = !0;else {
+      var lastZIndex;
+      graphic.forEachChildren(function (item, i) {
+        var _item$attribute$zInde = item.attribute.zIndex,
+          zIndex = _item$attribute$zInde === void 0 ? defaultZIndex : _item$attribute$zInde;
+        if (0 === i) lastZIndex = zIndex;else if (lastZIndex !== zIndex) return needSort = !0, !0;
+        return !1;
+      }, reverse);
+    }
+    if (needSort) {
+      graphic.forEachChildren(function (item) {
+        var _item$attribute$zInde2 = item.attribute.zIndex,
+          zIndex = _item$attribute$zInde2 === void 0 ? defaultZIndex : _item$attribute$zInde2;
+        childMap[zIndex] ? childMap[zIndex].push(item) : (childMap[zIndex] = [item], zIdxArray.push(zIndex));
+      }, reverse), zIdxArray.sort(function (a, b) {
+        return reverse ? b - a : a - b;
+      });
+      var skip = !1;
+      for (var i = 0; i < zIdxArray.length && !skip; i++) {
+        var idx = zIdxArray[i],
+          children = childMap[idx];
+        sort3d && children.sort(function (a, b) {
+          var _a, _b;
+          return (reverse ? -1 : 1) * ((null !== (_a = b.attribute.z) && void 0 !== _a ? _a : 0) - (null !== (_b = a.attribute.z) && void 0 !== _b ? _b : 0));
+        });
+        for (var _i = 0; _i < children.length; _i++) if (cb(children[_i], _i)) {
+          skip = !0;
+          break;
+        }
+      }
+    } else graphic.forEachChildren(cb, reverse);
+  }
+  function foreachAsync(graphic, defaultZIndex, cb) {
+    var reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+    return __awaiter$2(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return graphic.forEachChildrenAsync(cb, reverse);
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+  }
+  function findNextGraphic(graphic, id, defaultZIndex) {
+    var reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+    var childMap = {},
+      zIdxArray = [];
+    var needSort = !1;
+    graphic.forEachChildren(function (item, i) {
+      var _item$attribute$zInde3 = item.attribute.zIndex,
+        zIndex = _item$attribute$zInde3 === void 0 ? defaultZIndex : _item$attribute$zInde3;
+      if (0 === i) ;else if (undefined !== zIndex) return needSort = !0, !0;
+      return !1;
+    }, reverse);
+    var result = null,
+      next = !1;
+    if (needSort) {
+      graphic.forEachChildren(function (item) {
+        var _item$attribute$zInde4 = item.attribute.zIndex,
+          zIndex = _item$attribute$zInde4 === void 0 ? defaultZIndex : _item$attribute$zInde4;
+        childMap[zIndex] ? childMap[zIndex].push(item) : (childMap[zIndex] = [item], zIdxArray.push(zIndex));
+      }, reverse), zIdxArray.sort(function (a, b) {
+        return reverse ? b - a : a - b;
+      });
+      var skip = !1;
+      for (var i = 0; i < zIdxArray.length && !skip; i++) {
+        var idx = zIdxArray[i],
+          children = childMap[idx];
+        for (var _i2 = 0; _i2 < children.length; _i2++) {
+          if (next) {
+            skip = !0, result = children[_i2];
+            break;
+          }
+          children[_i2]._uid !== id || (next = !0);
+        }
+      }
+    } else graphic.forEachChildren(function (item) {
+      return next ? (result = item, !0) : (item._uid === id && (next = !0), !1);
+    }, reverse);
+    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 OffscreenLayerHandlerContribution;
+    return Canvas3DDrawItemInterceptor;
   }();
-  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);
-  });
-
-  function load$1(container) {
-    container.load(envModules), container.load(textMeasureModules), container.load(layerHandlerModules);
-  }
-
-  var __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-    return new (P || (P = Promise))(function (resolve, reject) {
-      function fulfilled(value) {
-        try {
-          step(generator.next(value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function rejected(value) {
-        try {
-          step(generator["throw"](value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function step(result) {
-        var value;
-        result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P(function (resolve) {
-          resolve(value);
-        })).then(fulfilled, rejected);
-      }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-  };
-  function foreach(graphic, defaultZIndex, cb) {
-    var reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-    var sort3d = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
-    var childMap = {},
-      zIdxArray = [];
-    var needSort = !1;
-    if (sort3d) needSort = !0;else {
-      var lastZIndex;
-      graphic.forEachChildren(function (item, i) {
-        var _item$attribute$zInde = item.attribute.zIndex,
-          zIndex = _item$attribute$zInde === void 0 ? defaultZIndex : _item$attribute$zInde;
-        if (0 === i) lastZIndex = zIndex;else if (lastZIndex !== zIndex) return needSort = !0, !0;
-        return !1;
-      }, reverse);
-    }
-    if (needSort) {
-      graphic.forEachChildren(function (item) {
-        var _item$attribute$zInde2 = item.attribute.zIndex,
-          zIndex = _item$attribute$zInde2 === void 0 ? defaultZIndex : _item$attribute$zInde2;
-        childMap[zIndex] ? childMap[zIndex].push(item) : (childMap[zIndex] = [item], zIdxArray.push(zIndex));
-      }, reverse), zIdxArray.sort(function (a, b) {
-        return reverse ? b - a : a - b;
-      });
-      var skip = !1;
-      for (var i = 0; i < zIdxArray.length && !skip; i++) {
-        var idx = zIdxArray[i],
-          children = childMap[idx];
-        sort3d && children.sort(function (a, b) {
-          var _a, _b;
-          return (reverse ? -1 : 1) * ((null !== (_a = b.attribute.z) && void 0 !== _a ? _a : 0) - (null !== (_b = a.attribute.z) && void 0 !== _b ? _b : 0));
-        });
-        for (var _i = 0; _i < children.length; _i++) if (cb(children[_i], _i)) {
-          skip = !0;
-          break;
-        }
-      }
-    } else graphic.forEachChildren(cb, reverse);
-  }
-  function foreachAsync(graphic, defaultZIndex, cb) {
-    var reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-    return __awaiter$2(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return graphic.forEachChildrenAsync(cb, reverse);
-          case 2:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-  }
-  function findNextGraphic(graphic, id, defaultZIndex) {
-    var reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-    var childMap = {},
-      zIdxArray = [];
-    var needSort = !1;
-    graphic.forEachChildren(function (item, i) {
-      var _item$attribute$zInde3 = item.attribute.zIndex,
-        zIndex = _item$attribute$zInde3 === void 0 ? defaultZIndex : _item$attribute$zInde3;
-      if (0 === i) ;else if (undefined !== zIndex) return needSort = !0, !0;
-      return !1;
-    }, reverse);
-    var result = null,
-      next = !1;
-    if (needSort) {
-      graphic.forEachChildren(function (item) {
-        var _item$attribute$zInde4 = item.attribute.zIndex,
-          zIndex = _item$attribute$zInde4 === void 0 ? defaultZIndex : _item$attribute$zInde4;
-        childMap[zIndex] ? childMap[zIndex].push(item) : (childMap[zIndex] = [item], zIdxArray.push(zIndex));
-      }, reverse), zIdxArray.sort(function (a, b) {
-        return reverse ? b - a : a - b;
-      });
-      var skip = !1;
-      for (var i = 0; i < zIdxArray.length && !skip; i++) {
-        var idx = zIdxArray[i],
-          children = childMap[idx];
-        for (var _i2 = 0; _i2 < children.length; _i2++) {
-          if (next) {
-            skip = !0, result = children[_i2];
-            break;
-          }
-          children[_i2]._uid !== id || (next = !0);
-        }
-      }
-    } else graphic.forEachChildren(function (item) {
-      return next ? (result = item, !0) : (item._uid === id && (next = !0), !1);
-    }, reverse);
-    return result;
-  }
 
   var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -22273,7 +22227,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), context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
         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) {
@@ -22336,7 +22290,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,
@@ -23046,7 +23000,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(exports.CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(exports.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(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
   });
 
   function load(container) {
@@ -31129,6 +31083,105 @@
     c.load(mathModule), c.load(mathPickerModule);
   }
 
+  var CanvasWrapDisableWH = /*#__PURE__*/function () {
+    function CanvasWrapDisableWH(nativeCanvas, ctx, dpr, w, h, id) {
+      _classCallCheck(this, CanvasWrapDisableWH);
+      this.nativeCanvas = nativeCanvas, this.ctx = ctx, this._w = w, this._h = h, this.id = id, nativeCanvas.id = id, this.dpr = dpr;
+    }
+    _createClass(CanvasWrapDisableWH, [{
+      key: "width",
+      get: function get() {
+        return this._w * this.dpr;
+      },
+      set: function set(w) {}
+    }, {
+      key: "height",
+      get: function get() {
+        return this._h * this.dpr;
+      },
+      set: function set(h) {}
+    }, {
+      key: "offsetWidth",
+      get: function get() {
+        return this._w;
+      },
+      set: function set(w) {}
+    }, {
+      key: "offsetHeight",
+      get: function get() {
+        return this._h;
+      },
+      set: function set(h) {}
+    }, {
+      key: "getContext",
+      value: function getContext() {
+        return this.ctx;
+      }
+    }, {
+      key: "getBoundingClientRect",
+      value: function getBoundingClientRect() {
+        return {
+          width: this._w,
+          height: this._h
+        };
+      }
+    }]);
+    return CanvasWrapDisableWH;
+  }();
+  var CanvasWrapEnableWH = /*#__PURE__*/function () {
+    function CanvasWrapEnableWH(nativeCanvas, ctx, dpr, w, h, id) {
+      _classCallCheck(this, CanvasWrapEnableWH);
+      this.nativeCanvas = nativeCanvas, this.ctx = ctx, this._w = w, this._h = h, this.id = id, nativeCanvas.id = id, this.dpr = dpr;
+    }
+    _createClass(CanvasWrapEnableWH, [{
+      key: "width",
+      get: function get() {
+        return this._w * this.dpr;
+      },
+      set: function set(w) {
+        this._w = w / this.dpr, this.nativeCanvas.width = w;
+      }
+    }, {
+      key: "height",
+      get: function get() {
+        return this._h * this.dpr;
+      },
+      set: function set(h) {
+        this._h = h / this.dpr, this.nativeCanvas.height = h;
+      }
+    }, {
+      key: "offsetWidth",
+      get: function get() {
+        return this._w;
+      },
+      set: function set(w) {
+        this._w = w, this.nativeCanvas.width = w * this.dpr;
+      }
+    }, {
+      key: "offsetHeight",
+      get: function get() {
+        return this._h;
+      },
+      set: function set(h) {
+        this._h = h, this.nativeCanvas.height = h * this.dpr;
+      }
+    }, {
+      key: "getContext",
+      value: function getContext() {
+        return this.ctx;
+      }
+    }, {
+      key: "getBoundingClientRect",
+      value: function getBoundingClientRect() {
+        return {
+          width: this._w,
+          height: this._h
+        };
+      }
+    }]);
+    return CanvasWrapEnableWH;
+  }();
+
   var __decorate$H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -31139,31 +31192,12 @@
     __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);
     };
-  function makeUpCanvas$3(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList) {
-    var dpr = tt.getSystemInfoSync().pixelRatio;
+  function makeUpCanvas$3(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, pixelRatio) {
+    var dpr = null != pixelRatio ? pixelRatio : tt.getSystemInfoSync().pixelRatio;
     canvasIdLists.forEach(function (id, i) {
-      var ctx = tt.createCanvasContext(id);
-      ctx.canvas = {
-        width: domref.width * dpr,
-        height: domref.height * dpr
-      };
-      var canvas = {
-        width: domref.width * dpr,
-        height: domref.height * dpr,
-        offsetWidth: domref.width,
-        offsetHeight: domref.height,
-        id: null != id ? id : "",
-        getContext: function getContext() {
-          return ctx;
-        },
-        getBoundingClientRect: function getBoundingClientRect() {
-          return {
-            height: domref.height,
-            width: domref.width
-          };
-        }
-      };
-      canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas);
+      var ctx = tt.createCanvasContext(id),
+        canvas = new CanvasWrapDisableWH(ctx.canvas || {}, ctx, dpr, domref.width, domref.height, id);
+      ctx.canvas = canvas, canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas);
     });
   }
   var FeishuEnvContribution = /*#__PURE__*/function (_BaseEnvContribution) {
@@ -31194,7 +31228,7 @@
     }, {
       key: "configure",
       value: function configure(service, params) {
-        service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$3(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList));
+        service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$3(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, params.pixelRatio));
       }
     }, {
       key: "loadImage",
@@ -31372,11 +31406,11 @@
       value: function draw() {
         var _this = this;
         var _context = this.nativeContext;
-        this.drawPromise = new Promise(function (resolve) {
+        _context.draw && (this.drawPromise = new Promise(function (resolve) {
           _context.draw(!0, function () {
             _this.drawPromise = null, resolve(null);
           });
-        });
+        }));
       }
     }]);
     return LynxContext2d;
@@ -31645,32 +31679,13 @@
   try {
     ng = !!lynx.createCanvasNG;
   } catch (err) {}
-  function makeUpCanvas$2(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList) {
-    var dpr = SystemInfo.pixelRatio;
+  function makeUpCanvas$2(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, pixelRatio) {
+    var dpr = null != pixelRatio ? pixelRatio : SystemInfo.pixelRatio;
     canvasIdLists.forEach(function (id, i) {
       var _canvas = ng ? lynx.createCanvasNG(id) : lynx.createCanvas(id);
       _canvas.width = domref.width * dpr, _canvas.height = domref.height * dpr, ng && _canvas.attachToCanvasView(id);
-      var ctx = _canvas.getContext("2d");
-      ctx.draw = function (a, b) {
-        b();
-      };
-      var canvas = {
-        width: domref.width * dpr,
-        height: domref.height * dpr,
-        offsetWidth: domref.width,
-        offsetHeight: domref.height,
-        id: null != id ? id : "",
-        getContext: function getContext() {
-          return ctx;
-        },
-        getBoundingClientRect: function getBoundingClientRect() {
-          return {
-            height: domref.height,
-            width: domref.width
-          };
-        },
-        nativeCanvas: _canvas
-      };
+      var ctx = _canvas.getContext("2d"),
+        canvas = new CanvasWrapEnableWH(_canvas, ctx, dpr, domref.width, domref.height, id);
       canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas);
     });
   }
@@ -31704,7 +31719,7 @@
     _createClass(LynxEnvContribution, [{
       key: "configure",
       value: function configure(service, params) {
-        service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$2(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList));
+        service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$2(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList, params.pixelRatio));
       }
     }, {
       key: "getDynamicCanvasCount",
@@ -32296,6 +32311,34 @@
       value: function createPattern(image, repetition) {
         return null;
       }
+    }, {
+      key: "getImageData",
+      value: function getImageData(sx, sy, sw, sh) {
+        var _this = this;
+        var ctx = this.nativeContext,
+          taro = ctx.taro;
+        if (ctx && taro) return !ctx.getImageData && taro.canvasGetImageData ? new Promise(function (resolve, reject) {
+          try {
+            taro.canvasGetImageData({
+              canvasId: _this.canvas.nativeCanvas.id,
+              sx: sx,
+              sy: sy,
+              sw: sw,
+              sh: sh,
+              success: function success(res) {
+                resolve(res);
+              }
+            });
+          } catch (err) {
+            reject(err);
+          }
+        }) : void 0;
+      }
+    }, {
+      key: "createRadialGradient",
+      value: function createRadialGradient(x0, y0, r0, x1, y1, r1) {
+        return this.nativeContext.createCircularGradient && this.nativeContext.createCircularGradient(x0, y0, r0, x1, y1, r1);
+      }
     }]);
     return TaroContext2d;
   }(BrowserContext2d);
@@ -32563,47 +32606,9 @@
     };
   function makeUpCanvas$1(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, taro, dpr) {
     canvasIdLists.forEach(function (id, i) {
-      var ctx = taro.createCanvasContext(id);
-      ctx.canvas = {
-        width: domref.width * dpr,
-        height: domref.height * dpr
-      }, ctx.createRadialGradient || (ctx.createRadialGradient = function () {
-        return ctx.createCircularGradient.apply(ctx, arguments);
-      }), !ctx.getImageData && taro.canvasGetImageData && (ctx.getImageData = function (x, y, width, height) {
-        return new Promise(function (resolve, reject) {
-          try {
-            taro.canvasGetImageData({
-              canvasId: id,
-              x: x,
-              y: y,
-              width: width,
-              height: height,
-              success: function success(res) {
-                resolve(res);
-              }
-            });
-          } catch (err) {
-            reject(err);
-          }
-        });
-      });
-      var canvas = {
-        id: id,
-        width: domref.width * dpr,
-        height: domref.height * dpr,
-        offsetWidth: domref.width,
-        offsetHeight: domref.height,
-        getContext: function getContext() {
-          return ctx;
-        },
-        getBoundingClientRect: function getBoundingClientRect() {
-          return {
-            height: domref.height,
-            width: domref.width
-          };
-        }
-      };
-      return canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas), canvas;
+      var ctx = taro.createCanvasContext(id),
+        canvas = new CanvasWrapDisableWH(ctx.canvas || {}, ctx, dpr, domref.width, domref.height, id);
+      return ctx.canvas = canvas, canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas), canvas;
     });
   }
   var TaroEnvContribution = /*#__PURE__*/function (_BaseEnvContribution) {
@@ -34848,7 +34853,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.17.18-alpha.1";
+  const version = "0.17.18";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);
@@ -34899,7 +34904,6 @@
   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;
@@ -34921,7 +34925,6 @@
   exports.CustomEvent = CustomEvent;
   exports.CustomPath2D = CustomPath2D;
   exports.CustomSymbolClass = CustomSymbolClass;
-  exports.DebugDrawItemInterceptorContribution = DebugDrawItemInterceptorContribution;
   exports.DefaultArcAllocate = DefaultArcAllocate;
   exports.DefaultArcAttribute = DefaultArcAttribute;
   exports.DefaultArcRenderContribution = DefaultArcRenderContribution;
@@ -34975,7 +34978,6 @@
   exports.DefaultTransform = DefaultTransform;
   exports.DragNDrop = DragNDrop;
   exports.DrawContribution = DrawContribution;
-  exports.DrawItemInterceptor = DrawItemInterceptor;
   exports.DynamicLayerHandlerContribution = DynamicLayerHandlerContribution;
   exports.EnvContribution = EnvContribution;
   exports.EventManager = EventManager;
@@ -35014,7 +35016,6 @@
   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;
@@ -35076,7 +35077,6 @@
   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;