@visactor/vrender 0.18.0-alpha.0 → 0.18.0-alpha.1

package/dist/index.js

@@ -2149,15 +2149,15 @@
   };
   var isArray$1 = isArray;
 
-  var isNumber$1 = function isNumber(value) {
+  var isNumber = function isNumber(value) {
     var fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     var type = _typeof(value);
     return fuzzy ? "number" === type : "number" === type || isType$1(value, "Number");
   };
-  var isNumber$2 = isNumber$1;
+  var isNumber$1 = isNumber;
 
   var isValidNumber = function isValidNumber(value) {
-    return isNumber$2(value) && Number.isFinite(value);
+    return isNumber$1(value) && Number.isFinite(value);
   };
   var isValidNumber$1 = isValidNumber;
 
@@ -2264,12 +2264,12 @@
     }, {
       key: "add",
       value: function add(point) {
-        return isNumber$2(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
+        return isNumber$1(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
       }
     }, {
       key: "sub",
       value: function sub(point) {
-        return isNumber$2(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
+        return isNumber$1(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
       }
     }, {
       key: "multi",
@@ -2973,10 +2973,10 @@
     return ((value = Math.max(0, Math.min(255, Math.round(value) || 0))) < 16 ? "0" : "") + value.toString(16);
   }
   function rgb(value) {
-    return isNumber$2(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
+    return isNumber$1(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
   }
   function rgba(value) {
-    return isNumber$2(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
+    return isNumber$1(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
   }
   function SRGBToLinear(c) {
     return c < .04045 ? .0773993808 * c : Math.pow(.9478672986 * c + .0521327014, 2.4);
@@ -3657,7 +3657,7 @@
     }], [{
       key: "getInstance",
       value: function getInstance(level, method) {
-        return Logger._instance && isNumber$2(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
+        return Logger._instance && isNumber$1(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
       }
     }, {
       key: "setInstance",
@@ -4278,6 +4278,10 @@
     var defined0 = !1;
     for (var i = 0, n = points.length; i <= n; i++) i >= n === defined0 && ((defined0 = !defined0) ? path.lineStart() : path.lineEnd()), defined0 && path.point(points[i]);
   }
+  function genSegContext(curveType, direction, points) {
+    var curveDirection = null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN;
+    return "monotoneY" === curveType ? new ReflectSegContext(curveType, curveDirection) : new SegContext(curveType, curveDirection);
+  }
 
   var Linear = /*#__PURE__*/function () {
     function Linear(context, startPoint) {
@@ -4333,7 +4337,7 @@
     var direction = params.direction,
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
-    var segContext = new SegContext("linear", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN);
+    var segContext = genSegContext("linear", direction, points);
     return genLinearTypeSegments(new Linear(segContext, startPoint), points), segContext;
   }
   function genLinearTypeSegments(path, points) {
@@ -4403,7 +4407,7 @@
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-    var segContext = new SegContext("basis", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN);
+    var segContext = genSegContext("basis", direction, points);
     return genBasisTypeSegments(new Basis(segContext, startPoint), points), segContext;
   }
 
@@ -4510,7 +4514,7 @@
     }]);
     return MonotoneY;
   }(MonotoneX);
-  function genMonotpneXTypeSegments(path, points) {
+  function genMonotoneXTypeSegments(path, points) {
     return genCurveSegments(path, points);
   }
   function genMonotoneXSegments(points) {
@@ -4519,10 +4523,10 @@
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-    var segContext = new SegContext("monotoneX", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN);
-    return genMonotpneXTypeSegments(new MonotoneX(segContext, startPoint), points), segContext;
+    var segContext = genSegContext("monotoneX", direction, points);
+    return genMonotoneXTypeSegments(new MonotoneX(segContext, startPoint), points), segContext;
   }
-  function genMonotpneYTypeSegments(path, points) {
+  function genMonotoneYTypeSegments(path, points) {
     return genCurveSegments(path, points);
   }
   function genMonotoneYSegments(points) {
@@ -4531,8 +4535,8 @@
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-    var segContext = new ReflectSegContext("monotoneY", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN);
-    return genMonotpneYTypeSegments(new MonotoneY(segContext, startPoint), points), segContext;
+    var segContext = genSegContext("monotoneY", direction, points);
+    return genMonotoneYTypeSegments(new MonotoneY(segContext, startPoint), points), segContext;
   }
 
   var Step$1 = /*#__PURE__*/function () {
@@ -4601,61 +4605,27 @@
     return genCurveSegments(path, points);
   }
 
-  var LinearClosed = /*#__PURE__*/function () {
-    function LinearClosed(context, startPoint) {
+  var LinearClosed = /*#__PURE__*/function (_Linear) {
+    _inherits(LinearClosed, _Linear);
+    var _super = _createSuper(LinearClosed);
+    function LinearClosed() {
       _classCallCheck(this, LinearClosed);
-      this.context = context, startPoint && (this.startPoint = startPoint);
+      return _super.apply(this, arguments);
     }
     _createClass(LinearClosed, [{
-      key: "areaStart",
-      value: function areaStart() {
-        this._line = 0;
-      }
-    }, {
-      key: "areaEnd",
-      value: function areaEnd() {
-        this._line = NaN;
-      }
-    }, {
-      key: "lineStart",
-      value: function lineStart() {
-        this._point = 0, this.startPoint && this.point(this.startPoint);
-      }
-    }, {
       key: "lineEnd",
       value: function lineEnd() {
         this.context.closePath();
       }
-    }, {
-      key: "point",
-      value: function point(p) {
-        var x = p.x,
-          y = p.y;
-        switch (this._point) {
-          case 0:
-            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p) : this.context.moveTo(x, y, p);
-            break;
-          case 1:
-            this._point = 2;
-          default:
-            this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);
-        }
-        this._lastDefined = p.defined;
-      }
-    }, {
-      key: "tryUpdateLength",
-      value: function tryUpdateLength() {
-        return this.context.tryUpdateLength();
-      }
     }]);
     return LinearClosed;
-  }();
+  }(Linear);
   function genLinearClosedSegments(points) {
     var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var direction = params.direction,
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
-    var segContext = new SegContext("linear", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN);
+    var segContext = genSegContext("linear", direction, points);
     return genLinearClosedTypeSegments(new LinearClosed(segContext, startPoint), points), segContext;
   }
   function genLinearClosedTypeSegments(path, points) {
@@ -5188,11 +5158,13 @@
   var DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
     opacity: 1,
     background: null,
+    backgroundCornerRadius: 0,
     texture: null,
     textureColor: "black",
     textureSize: 10,
     texturePadding: 2,
     backgroundMode: "no-repeat",
+    backgroundFit: !0,
     blur: 0,
     cursor: null,
     html: null
@@ -5210,6 +5182,8 @@
     strokeSeg: null,
     pickable: !0,
     childrenPickable: !0,
+    fillPickable: !0,
+    strokePickable: !0,
     visible: !0,
     zIndex: 0,
     layout: null,
@@ -5319,7 +5293,7 @@
     strokeBoundsBuffer: 0,
     keepDirIn3d: !0
   });
-  var DefaultRichTextAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+  var DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
     width: 300,
     height: 300,
     ellipsis: !0,
@@ -5823,9 +5797,6 @@
   function isNotAroundZero(val) {
     return val > EPSILON || val < -EPSILON;
   }
-  function isNumber(data) {
-    return "number" == typeof data && Number.isFinite(data);
-  }
   var _v0 = [0, 0],
     _v1 = [0, 0],
     _v2 = [0, 0];
@@ -6736,7 +6707,7 @@
   }();
   var globalTheme = new Theme();
   function getTheme(graphic, theme) {
-    return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || globalTheme.getTheme();
+    return graphic.glyphHost ? getTheme(graphic.glyphHost) : theme ? (graphic.isContainer, theme) : getThemeFromGroup(graphic) || graphic.attachedThemeGraphic && getTheme(graphic.attachedThemeGraphic) || globalTheme.getTheme();
   }
   function getThemeFromGroup(graphic) {
     var g;
@@ -7000,10 +6971,13 @@
       }
     }, {
       key: "removeAllChild",
-      value: function removeAllChild() {
+      value: function removeAllChild(deep) {
         if (!this._idMap) return;
         var child = this._firstChild;
-        for (; child;) child.parent = null, child._prev = null, child._next = null, child = child._next;
+        for (; child;) {
+          var next = child._next;
+          child.parent = null, child._prev = null, child._next = null, child = child._next, child = next;
+        }
         this._firstChild = null, this._lastChild = null, this._idMap.clear(), this._structEdit = !0, this.setCount(1 - this._count);
       }
     }, {
@@ -7886,10 +7860,14 @@
         viewport = params.viewport,
         _params$autoPreventDe = params.autoPreventDefault,
         autoPreventDefault = _params$autoPreventDe === void 0 ? !1 : _params$autoPreventDe,
-        clickInterval = params.clickInterval;
+        clickInterval = params.clickInterval,
+        _params$supportsTouch = params.supportsTouchEvents,
+        supportsTouchEvents = _params$supportsTouch === void 0 ? global.supportsTouchEvents : _params$supportsTouch,
+        _params$supportsPoint = params.supportsPointerEvents,
+        supportsPointerEvents = _params$supportsPoint === void 0 ? global.supportsPointerEvents : _params$supportsPoint;
       this.manager = new EventManager(rootNode, {
         clickInterval: clickInterval
-      }), this.globalObj = global, this.supportsPointerEvents = global.supportsPointerEvents, this.supportsTouchEvents = global.supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
+      }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
         "default": "inherit",
         pointer: "pointer"
       }, this.resolution = resolution, this.setTargetElement(targetElement);
@@ -9265,7 +9243,7 @@
       key: "onBind",
       value: function onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        this.fromNumber = isNumber$2(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$2(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
+        this.fromNumber = isNumber$1(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$1(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
       }
     }, {
       key: "onEnd",
@@ -10583,6 +10561,25 @@
     return path;
   }
 
+  var normalizeRectAttributes = function normalizeRectAttributes(attribute) {
+    if (!attribute) return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    var width = isNil$1(attribute.width) ? attribute.x1 - attribute.x : attribute.width,
+      height = isNil$1(attribute.height) ? attribute.y1 - attribute.y : attribute.height,
+      x = 0,
+      y = 0;
+    return width < 0 ? (x = width, width = -width) : Number.isNaN(width) && (width = 0), height < 0 ? (y = height, height = -height) : Number.isNaN(height) && (height = 0), {
+      x: x,
+      y: y,
+      width: width,
+      height: height
+    };
+  };
+
   function splitToGrids(width, height, count) {
     var ratio = width / height;
     var rowCount, columnCount;
@@ -10594,8 +10591,9 @@
     return grids;
   }
   var splitRect = function splitRect(rect, count) {
-    var width = rect.getComputedAttribute("width"),
-      height = rect.getComputedAttribute("height"),
+    var _normalizeRectAttribu = normalizeRectAttributes(rect.attribute),
+      width = _normalizeRectAttribu.width,
+      height = _normalizeRectAttribu.height,
       grids = splitToGrids(width, height, count),
       res = [],
       gridHeight = height / grids.length;
@@ -10656,7 +10654,7 @@
   };
   var samplingPoints = function samplingPoints(points, count) {
     var validatePoints = points.filter(function (point) {
-      return !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y);
+      return !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y);
     });
     if (0 === validatePoints.length) return [];
     if (1 === validatePoints.length) return new Array(count).fill(0).map(function (i) {
@@ -10696,7 +10694,7 @@
       return res.concat(null !== (_a = seg.points) && void 0 !== _a ? _a : []);
     }, []));
     var validatePoints = points.filter(function (point) {
-      return !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y);
+      return !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y);
     });
     if (!validatePoints.length) return [];
     var allPoints = [];
@@ -11363,15 +11361,7 @@
         var data = ResourceLoader.cache.get(url);
         data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(function () {
           mark.imageLoadFail(url);
-        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : (data = {
-          type: "image",
-          loadState: "init"
-        }, ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise ? (data.waitingMark = [mark], data.dataPromise.then(function (res) {
-          var _a;
-          data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map(function (mark, index) {
-            (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
-          });
-        })) : (data.loadState = "fail", mark.imageLoadFail(url)));
+        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : ResourceLoader.loadImage(url, mark);
       }
     }, {
       key: "GetSvg",
@@ -11405,10 +11395,68 @@
           return data.data;
         }));
       }
+    }, {
+      key: "loading",
+      value: function loading() {
+        setTimeout(function () {
+          if (!ResourceLoader.isLoading && ResourceLoader.toLoadAueue.length) {
+            ResourceLoader.isLoading = !0;
+            var tasks = ResourceLoader.toLoadAueue.splice(0, 10),
+              promises = [];
+            tasks.forEach(function (task) {
+              var url = task.url,
+                marks = task.marks,
+                data = {
+                  type: "image",
+                  loadState: "init"
+                };
+              if (ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise) {
+                data.waitingMark = marks;
+                var end = data.dataPromise.then(function (res) {
+                  var _a;
+                  data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map(function (mark, index) {
+                    (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
+                  });
+                });
+                promises.push(end);
+              } else data.loadState = "fail", marks.forEach(function (mark) {
+                return mark.imageLoadFail(url);
+              });
+            }), Promise.all(promises).then(function () {
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            })["catch"](function (error) {
+              console.error(error), ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            });
+          }
+        }, 0);
+      }
+    }, {
+      key: "loadImage",
+      value: function loadImage(url, mark) {
+        var index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) return ResourceLoader.toLoadAueue[index].marks.push(mark), void ResourceLoader.loading();
+        ResourceLoader.toLoadAueue.push({
+          url: url,
+          marks: [mark]
+        }), ResourceLoader.loading();
+      }
+    }, {
+      key: "improveImageLoading",
+      value: function improveImageLoading(url) {
+        var index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) {
+          var elememt = ResourceLoader.toLoadAueue.splice(index, 1);
+          ResourceLoader.toLoadAueue.unshift(elememt[0]);
+        }
+      }
     }]);
     return ResourceLoader;
   }();
-  ResourceLoader.cache = new Map();
+  function getIndex(url, arr) {
+    for (var i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
+    return -1;
+  }
+  ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [];
 
   var tempMatrix = new Matrix(),
     tempBounds$1 = new AABBBounds();
@@ -11454,7 +11502,8 @@
       var _this;
       var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       _classCallCheck(this, Graphic);
-      _this = _super.call(this), _this._AABBBounds = new AABBBounds(), _this._updateTag = exports.UpdateTag.INIT, _this.attribute = params, _this.valid = _this.isValid(), params.background && _this.loadImage(params.background, !0);
+      var _a;
+      _this = _super.call(this), _this._AABBBounds = new AABBBounds(), _this._updateTag = exports.UpdateTag.INIT, _this.attribute = params, _this.valid = _this.isValid(), params.background && _this.loadImage(null !== (_a = params.background.background) && void 0 !== _a ? _a : params.background, !0);
       return _this;
     }
     _createClass(Graphic, [{
@@ -11525,7 +11574,7 @@
         if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
         application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         var bounds = this.doUpdateAABBBounds(full);
-        return this.addUpdateLayoutTag(), application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
+        return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
       }
     }, {
       key: "combindShadowAABBBounds",
@@ -11538,7 +11587,8 @@
     }, {
       key: "tryUpdateGlobalAABBBounds",
       value: function tryUpdateGlobalAABBBounds() {
-        return this._globalAABBBounds ? this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2) : this._globalAABBBounds = this.AABBBounds.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
+        var b = this.AABBBounds;
+        return this._globalAABBBounds ? this._globalAABBBounds.setValue(b.x1, b.y1, b.x2, b.y2) : this._globalAABBBounds = b.clone(), this.parent && this._globalAABBBounds.transformWithMatrix(this.parent.globalTransMatrix), this._globalAABBBounds;
       }
     }, {
       key: "tryUpdateGlobalTransMatrix",
@@ -11663,7 +11713,7 @@
         var context = {
           type: exports.AttributeUpdateType.INIT
         };
-        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background && this.loadImage(params.background, !0), this._updateTag = exports.UpdateTag.INIT, this.onAttributeUpdate(context);
+        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background && this.loadImage(params.background, !0), this._updateTag = exports.UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
       }
     }, {
       key: "translate",
@@ -12193,7 +12243,7 @@
           data: "init",
           state: null
         };
-        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background);
+        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : isObject$1(image) ? (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
       }
     }, {
       key: "imageLoadSuccess",
@@ -12767,7 +12817,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,
@@ -12844,8 +12894,9 @@
     }, {
       key: "removeAllChild",
       value: function removeAllChild() {
+        var deep = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
         this.forEachChildren(function (child) {
-          application.graphicService.onRemove(child);
+          application.graphicService.onRemove(child), deep && child.isContainer && child.removeAllChild(deep);
         }), _get(_getPrototypeOf(Group.prototype), "removeAllChild", this).call(this), this.addUpdateBoundTag();
       }
     }, {
@@ -13588,7 +13639,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,
@@ -13775,7 +13826,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);
@@ -13816,10 +13867,12 @@
       get: function get() {
         var textTheme = getTheme(this).text,
           attribute = this.attribute;
-        if (!this.isSimplify()) return;
+        if (this.isMultiLine) return;
         var _attribute$maxLineWid2 = attribute.maxLineWidth,
           maxLineWidth = _attribute$maxLineWid2 === void 0 ? textTheme.maxLineWidth : _attribute$maxLineWid2;
-        return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), null != this.clipedText && this.clipedText !== attribute.text.toString());
+        return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(function (item) {
+          return item.text;
+        }).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString());
       }
     }, {
       key: "multilineLayout",
@@ -13853,7 +13906,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,
@@ -14509,7 +14562,7 @@
     _createClass(BaseSymbol, [{
       key: "bounds",
       value: function bounds(size, _bounds) {
-        if (isNumber$2(size)) {
+        if (isNumber$1(size)) {
           var halfS = size / 2;
           _bounds.x1 = -halfS, _bounds.x2 = halfS, _bounds.y1 = -halfS, _bounds.y2 = halfS;
         } else _bounds.x1 = -size[0] / 2, _bounds.x2 = size[0] / 2, _bounds.y1 = -size[1] / 2, _bounds.y2 = size[1] / 2;
@@ -15196,12 +15249,12 @@
     _createClass(RectSymbol, [{
       key: "draw",
       value: function draw(ctx, size, x, y) {
-        return isNumber$2(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
+        return isNumber$1(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
       }
     }, {
       key: "drawOffset",
       value: function drawOffset(ctx, size, x, y, offset) {
-        return isNumber$2(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
+        return isNumber$1(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
       }
     }]);
     return RectSymbol;
@@ -15332,7 +15385,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,
@@ -15422,7 +15475,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,
@@ -15513,7 +15566,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,
@@ -15544,13 +15597,13 @@
     }, {
       key: "toCustomPath",
       value: function toCustomPath() {
-        var attribute = this.attribute;
-        var width = isNil$1(attribute.width) ? attribute.x1 - attribute.x : attribute.width,
-          height = isNil$1(attribute.height) ? attribute.y1 - attribute.y : attribute.height,
-          x = 0,
-          y = 0;
-        width < 0 && (x = width, width = -width), height < 0 && (y = height, height = -height);
-        var path = new CustomPath2D();
+        var attribute = this.attribute,
+          _normalizeRectAttribu = normalizeRectAttributes(attribute),
+          x = _normalizeRectAttribu.x,
+          y = _normalizeRectAttribu.y,
+          width = _normalizeRectAttribu.width,
+          height = _normalizeRectAttribu.height,
+          path = new CustomPath2D();
         return path.moveTo(x, y), path.rect(x, y, width, height), path;
       }
     }, {
@@ -15743,7 +15796,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;
       }
@@ -15840,16 +15893,7 @@
             deltaY = -height;
         }
         var deltaX = 0;
-        switch (this.globalAlign) {
-          case "left":
-            deltaX = 0;
-            break;
-          case "center":
-            deltaX = -width / 2;
-            break;
-          case "right":
-            deltaX = -width;
-        }
+        "right" === this.globalAlign || "end" === this.globalAlign ? deltaX = -width : "center" === this.globalAlign && (deltaX = -width / 2);
         var frameHeight = this[this.directionKey.height];
         this.singleLine && (frameHeight = this.lines[0].height + 1);
         var lastLineTag = !1;
@@ -16002,9 +16046,9 @@
         var direction = this.direction;
         if (this.verticalEllipsis) text = "...", direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
           if ("hide" === this.ellipsis) return;
-          if ("add" === this.ellipsis) text += "...", "right" === textAlign && (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
+          if ("add" === this.ellipsis) text += "...", "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
             var index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-            if (text = text.slice(0, index), text += "...", "right" === textAlign) {
+            if (text = text.slice(0, index), text += "...", "right" === textAlign || "end" === textAlign) {
               var _measureTextCanvas3 = measureTextCanvas(this.text.slice(index), this.character),
                 width = _measureTextCanvas3.width;
               "vertical" === direction || (left -= this.ellipsisWidth - width);
@@ -16115,11 +16159,21 @@
           _this3.failCallback && _this3.failCallback();
         });
       }
+    }, {
+      key: "setAttributes",
+      value: function setAttributes(params, forceUpdateTag, context) {
+        return params.image && this.loadImage(params.image), _get(_getPrototypeOf(Image.prototype), "setAttributes", this).call(this, params, forceUpdateTag, context);
+      }
+    }, {
+      key: "setAttribute",
+      value: function setAttribute(key, value, forceUpdateTag, context) {
+        return "image" === key && this.loadImage(value), _get(_getPrototypeOf(Image.prototype), "setAttribute", this).call(this, key, value, forceUpdateTag, context);
+      }
     }, {
       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,
@@ -16250,17 +16304,7 @@
           maxHeight = this.height;
         var x = this.left,
           spacing = 0;
-        if (this.actualWidth < width && !isWidthMax) switch (this.textAlign) {
-          case "right":
-            x = width - this.actualWidth;
-            break;
-          case "center":
-            x = (width - this.actualWidth) / 2;
-            break;
-          case "justify":
-            this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1);
-        }
-        this.paragraphs.map(function (paragraph) {
+        this.actualWidth < width && !isWidthMax && ("right" === this.textAlign || "end" === this.textAlign ? x = width - this.actualWidth : "center" === this.textAlign ? x = (width - this.actualWidth) / 2 : "justify" === this.textAlign && (this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1))), this.paragraphs.map(function (paragraph) {
           paragraph instanceof RichTextIcon ? (paragraph["_" + directionKey.x] = x, x += paragraph[directionKey.width] + spacing, paragraph["_" + directionKey.y] = "top" === paragraph.attribute.textBaseline ? 0 : "bottom" === paragraph.attribute.textBaseline ? maxHeight - paragraph.height : (maxHeight - paragraph.height) / 2) : (paragraph[directionKey.left] = x, x += paragraph[directionKey.width] + spacing);
         });
       }
@@ -16478,7 +16522,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,
@@ -16511,28 +16555,47 @@
       value: function getFrameCache() {
         return this.shouldUpdateShape() && (this.doUpdateFrameCache(), this.clearUpdateShapeTag()), this._frameCache;
       }
+    }, {
+      key: "combinedStyleToCharacter",
+      value: function combinedStyleToCharacter(config) {
+        var _this$attribute = this.attribute,
+          fill = _this$attribute.fill,
+          stroke = _this$attribute.stroke,
+          fontSize = _this$attribute.fontSize,
+          fontFamily = _this$attribute.fontFamily,
+          fontStyle = _this$attribute.fontStyle,
+          fontWeight = _this$attribute.fontWeight;
+        return Object.assign({
+          fill: fill,
+          stroke: stroke,
+          fontSize: fontSize,
+          fontFamily: fontFamily,
+          fontStyle: fontStyle,
+          fontWeight: fontWeight
+        }, config);
+      }
     }, {
       key: "doUpdateFrameCache",
       value: function doUpdateFrameCache() {
         var _this2 = this;
         var _a;
-        var _this$attribute = this.attribute,
-          _this$attribute$textC = _this$attribute.textConfig,
-          textConfig = _this$attribute$textC === void 0 ? [] : _this$attribute$textC,
-          maxWidth = _this$attribute.maxWidth,
-          maxHeight = _this$attribute.maxHeight,
-          width = _this$attribute.width,
-          height = _this$attribute.height,
-          ellipsis = _this$attribute.ellipsis,
-          wordBreak = _this$attribute.wordBreak,
-          verticalDirection = _this$attribute.verticalDirection,
-          textAlign = _this$attribute.textAlign,
-          textBaseline = _this$attribute.textBaseline,
-          layoutDirection = _this$attribute.layoutDirection,
-          singleLine = _this$attribute.singleLine,
+        var _this$attribute2 = this.attribute,
+          _this$attribute2$text = _this$attribute2.textConfig,
+          textConfig = _this$attribute2$text === void 0 ? [] : _this$attribute2$text,
+          maxWidth = _this$attribute2.maxWidth,
+          maxHeight = _this$attribute2.maxHeight,
+          width = _this$attribute2.width,
+          height = _this$attribute2.height,
+          ellipsis = _this$attribute2.ellipsis,
+          wordBreak = _this$attribute2.wordBreak,
+          verticalDirection = _this$attribute2.verticalDirection,
+          textAlign = _this$attribute2.textAlign,
+          textBaseline = _this$attribute2.textBaseline,
+          layoutDirection = _this$attribute2.layoutDirection,
+          singleLine = _this$attribute2.singleLine,
           paragraphs = [];
         for (var i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
-          var config = textConfig[i],
+          var config = this.combinedStyleToCharacter(textConfig[i]),
             iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
           if (iconCache) paragraphs.push(iconCache);else {
             var icon = new RichTextIcon(config);
@@ -16541,10 +16604,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 = this.combinedStyleToCharacter(textConfig[i]);
+          if (isNumber$1(richTextConfig.text) && (richTextConfig.text = "".concat(richTextConfig.text)), richTextConfig.text && richTextConfig.text.includes("\n")) {
+            var textParts = richTextConfig.text.split("\n");
+            for (var j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig));
+          } else richTextConfig.text && paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
+        }
         var maxWidthFinite = "number" == typeof maxWidth && Number.isFinite(maxWidth) && maxWidth > 0,
           maxHeightFinite = "number" == typeof maxHeight && Number.isFinite(maxHeight) && maxHeight > 0,
           richTextWidthEnable = "number" == typeof width && Number.isFinite(width) && width > 0 && (!maxWidthFinite || width <= maxWidth),
@@ -16663,7 +16729,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,
@@ -16751,7 +16817,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,
@@ -16869,7 +16935,7 @@
           innerRadius = _this$attribute2$inne === void 0 ? arcTheme.innerRadius : _this$attribute2$inne;
         if (0 === cornerRadius || "0%" === cornerRadius) return 0;
         var deltaRadius = Math.abs(outerRadius - innerRadius);
-        return Math.min(isNumber$2(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
+        return Math.min(isNumber$1(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
       }
     }, {
       key: "getParsedAngle",
@@ -16954,7 +17020,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,
@@ -17040,7 +17106,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,
@@ -17088,7 +17154,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,
@@ -17161,7 +17227,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,
@@ -18121,35 +18187,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);
@@ -18191,7 +18259,7 @@
 
   var text, richText;
   function getTextBounds(params) {
-    return text || (text = graphicCreator.CreateGraphic("text", {})), text.setAttributes(params), text.AABBBounds;
+    return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
   }
   function getRichTextBounds(params) {
     return richText || (richText = graphicCreator.CreateGraphic("richtext", {})), richText.setAttributes(params), richText.AABBBounds;
@@ -18364,6 +18432,254 @@
     return BaseRender;
   }();
 
+  var parse = function () {
+    var tokens = {
+      linearGradient: /^(linear\-gradient)/i,
+      radialGradient: /^(radial\-gradient)/i,
+      conicGradient: /^(conic\-gradient)/i,
+      sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+      extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+      positionKeywords: /^(left|center|right|top|bottom)/i,
+      pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+      percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+      emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+      angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+      fromAngleValue: /^from\s*(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+      startCall: /^\(/,
+      endCall: /^\)/,
+      comma: /^,/,
+      hexColor: /(^\#[0-9a-fA-F]+)/,
+      literalColor: /^([a-zA-Z]+)/,
+      rgbColor: /^(rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))/i,
+      rgbaColor: /^(rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*((\d\.\d+)|\d{1,3})\))/i,
+      number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
+    };
+    var input = "";
+    function error(msg) {
+      var err = new Error(input + ": " + msg);
+      throw err.source = input, err;
+    }
+    function getAST() {
+      var ast = matchListing(matchDefinition);
+      return input.length > 0 && error("Invalid input not EOF"), ast;
+    }
+    function matchDefinition() {
+      return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+    }
+    function matchGradient(gradientType, pattern, orientationMatcher) {
+      return function (pattern, callback) {
+        var captures = scan(pattern);
+        if (captures) {
+          scan(tokens.startCall) || error("Missing (");
+          var result = callback(captures);
+          return scan(tokens.endCall) || error("Missing )"), result;
+        }
+      }(pattern, function (captures) {
+        var orientation = orientationMatcher();
+        return orientation && (scan(tokens.comma) || error("Missing comma before color stops")), {
+          type: gradientType,
+          orientation: orientation,
+          colorStops: matchListing(matchColorStop)
+        };
+      });
+    }
+    function matchLinearOrientation() {
+      return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+    }
+    function matchConicalOrientation() {
+      return match("angular", tokens.fromAngleValue, 1);
+    }
+    function matchListRadialOrientations() {
+      var radialOrientations,
+        lookaheadCache,
+        radialOrientation = matchRadialOrientation();
+      return radialOrientation && (radialOrientations = [], radialOrientations.push(radialOrientation), lookaheadCache = input, scan(tokens.comma) && (radialOrientation = matchRadialOrientation(), radialOrientation ? radialOrientations.push(radialOrientation) : input = lookaheadCache)), radialOrientations;
+    }
+    function matchRadialOrientation() {
+      var radialType = function () {
+        var circle = match("shape", /^(circle)/i, 0);
+        circle && (circle.style = matchLength() || matchExtentKeyword());
+        return circle;
+      }() || function () {
+        var ellipse = match("shape", /^(ellipse)/i, 0);
+        ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
+        return ellipse;
+      }();
+      if (radialType) radialType.at = matchAtPosition();else {
+        var extent = matchExtentKeyword();
+        if (extent) {
+          radialType = extent;
+          var positionAt = matchAtPosition();
+          positionAt && (radialType.at = positionAt);
+        } else {
+          var defaultPosition = matchPositioning();
+          defaultPosition && (radialType = {
+            type: "default-radial",
+            at: defaultPosition
+          });
+        }
+      }
+      return radialType;
+    }
+    function matchExtentKeyword() {
+      return match("extent-keyword", tokens.extentKeywords, 1);
+    }
+    function matchAtPosition() {
+      if (match("position", /^at/, 0)) {
+        var positioning = matchPositioning();
+        return positioning || error("Missing positioning value"), positioning;
+      }
+    }
+    function matchPositioning() {
+      var location = {
+        x: matchDistance(),
+        y: matchDistance()
+      };
+      if (location.x || location.y) return {
+        type: "position",
+        value: location
+      };
+    }
+    function matchListing(matcher) {
+      var captures = matcher();
+      var result = [];
+      if (captures) for (result.push(captures); scan(tokens.comma);) captures = matcher(), captures ? result.push(captures) : error("One extra comma");
+      return result;
+    }
+    function matchColorStop() {
+      var color = match("hex", tokens.hexColor, 1) || match("rgba", tokens.rgbaColor, 1) || match("rgb", tokens.rgbColor, 1) || match("literal", tokens.literalColor, 0);
+      return color || error("Expected color definition"), color.length = matchDistance(), color;
+    }
+    function matchDistance() {
+      return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+    }
+    function matchLength() {
+      return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+    }
+    function match(type, pattern, captureIndex) {
+      var captures = scan(pattern);
+      if (captures) return {
+        type: type,
+        value: captures[captureIndex]
+      };
+    }
+    function scan(regexp) {
+      var blankCaptures = /^[\n\r\t\s]+/.exec(input);
+      blankCaptures && consume(blankCaptures[0].length);
+      var captures = regexp.exec(input);
+      return captures && consume(captures[0].length), captures;
+    }
+    function consume(size) {
+      input = input.substr(size);
+    }
+    return function (code) {
+      return input = code.toString(), getAST();
+    };
+  }();
+  var GradientParser = /*#__PURE__*/function () {
+    function GradientParser() {
+      _classCallCheck(this, GradientParser);
+    }
+    _createClass(GradientParser, null, [{
+      key: "IsGradient",
+      value: function IsGradient(c) {
+        return !("string" == typeof c && c.length < 10);
+      }
+    }, {
+      key: "IsGradientStr",
+      value: function IsGradientStr(c) {
+        return "string" == typeof c && c.length > 10;
+      }
+    }, {
+      key: "Parse",
+      value: function Parse(c) {
+        if (GradientParser.IsGradientStr(c)) try {
+          var datum = parse(c)[0];
+          if (datum) {
+            if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
+            if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
+            if ("conic" === datum.type) return GradientParser.ParseConic(datum);
+          }
+        } catch (err) {
+          return c;
+        }
+        return c;
+      }
+    }, {
+      key: "ParseConic",
+      value: function ParseConic(datum) {
+        var orientation = datum.orientation,
+          _datum$colorStops = datum.colorStops,
+          colorStops = _datum$colorStops === void 0 ? [] : _datum$colorStops,
+          halfPi = pi / 2,
+          sa = parseFloat(orientation.value) / 180 * pi - halfPi;
+        return {
+          gradient: "conical",
+          x: .5,
+          y: .5,
+          startAngle: sa,
+          endAngle: sa + pi2,
+          stops: colorStops.map(function (item) {
+            return {
+              color: item.value,
+              offset: parseFloat(item.length.value) / 100
+            };
+          })
+        };
+      }
+    }, {
+      key: "ParseRadial",
+      value: function ParseRadial(datum) {
+        var _datum$colorStops2 = datum.colorStops,
+          colorStops = _datum$colorStops2 === void 0 ? [] : _datum$colorStops2;
+        return {
+          gradient: "radial",
+          x0: .5,
+          y0: .5,
+          x1: .5,
+          y1: .5,
+          r0: 0,
+          r1: 1,
+          stops: colorStops.map(function (item) {
+            return {
+              color: item.value,
+              offset: parseFloat(item.length.value) / 100
+            };
+          })
+        };
+      }
+    }, {
+      key: "ParseLinear",
+      value: function ParseLinear(datum) {
+        var orientation = datum.orientation,
+          _datum$colorStops3 = datum.colorStops,
+          colorStops = _datum$colorStops3 === void 0 ? [] : _datum$colorStops3,
+          halfPi = pi / 2;
+        var angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi : 0;
+        for (; angle < 0;) angle += pi2;
+        for (; angle > pi2;) angle -= pi2;
+        var x0 = 0,
+          y0 = 0,
+          x1 = 0,
+          y1 = 0;
+        return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = Math.cos(angle)) : angle < pi ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi), y1 = Math.cos(angle - pi)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi), y1 -= Math.sin(angle - halfPi - pi)), {
+          gradient: "linear",
+          x0: x0,
+          y0: y0,
+          x1: x1,
+          y1: y1,
+          stops: colorStops.map(function (item) {
+            return {
+              color: item.value,
+              offset: parseFloat(item.length.value) / 100
+            };
+          })
+        };
+      }
+    }]);
+    return GradientParser;
+  }();
+
   function getScaledStroke(context, width, dpr) {
     var strokeWidth = width;
     var _context$currentMatri = context.currentMatrix,
@@ -18379,7 +18695,7 @@
     if (!c || !0 === c) return "black";
     var result, color;
     if (isArray$1(c)) for (var i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
-    return "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
+    return color = GradientParser.Parse(color), "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
   }
   function createLinearGradient(context, color, params) {
     var offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
@@ -18480,7 +18796,9 @@
         var _graphic$attribute = graphic.attribute,
           background = _graphic$attribute.background,
           _graphic$attribute$ba = _graphic$attribute.backgroundMode,
-          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba,
+          _graphic$attribute$ba2 = _graphic$attribute.backgroundFit,
+          backgroundFit = _graphic$attribute$ba2 === void 0 ? graphicAttribute.backgroundFit : _graphic$attribute$ba2;
         if (background) if (graphic.backgroundImg && graphic.resources) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
@@ -18495,15 +18813,37 @@
           }
           context.clip();
           var b = graphic.AABBBounds;
-          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
     }, {
       key: "doDrawImage",
-      value: function doDrawImage(context, data, b, backgroundMode) {
+      value: function doDrawImage(context, data, b, backgroundMode, backgroundFit) {
         if ("no-repeat" === backgroundMode) context.drawImage(data, b.x1, b.y1, b.width(), b.height());else {
-          var pattern = context.createPattern(data, backgroundMode);
-          context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, b.width(), b.height()), context.translate(-b.x1, -b.y1);
+          var targetW = b.width(),
+            targetH = b.height();
+          var w = targetW,
+            h = targetH;
+          if (backgroundFit && "repeat" !== backgroundMode && (data.width || data.height)) {
+            var resW = data.width,
+              resH = data.height;
+            if ("repeat-x" === backgroundMode) {
+              w = resW * (targetH / resH), h = targetH;
+            } else if ("repeat-y" === backgroundMode) {
+              h = resH * (targetW / resW), w = targetW;
+            }
+            var _dpr = context.dpr,
+              canvas = canvasAllocate.allocate({
+                width: w,
+                height: h,
+                dpr: _dpr
+              }),
+              ctx = canvas.getContext("2d");
+            ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), canvasAllocate.free(canvas);
+          }
+          var dpr = context.dpr,
+            pattern = context.createPattern(data, backgroundMode);
+          pattern.setTransform && pattern.setTransform(new DOMMatrix([1 / dpr, 0, 0, 1 / dpr, 0, 0])), context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
         }
       }
     }]);
@@ -18526,6 +18866,7 @@
     return DefaultBaseInteractiveRenderContribution;
   }();
   exports.DefaultBaseInteractiveRenderContribution = __decorate$1w([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(InteractiveSubRenderContribution)), __metadata$19("design:paramtypes", [Object])], exports.DefaultBaseInteractiveRenderContribution);
+
   var DefaultBaseTextureRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseTextureRenderContribution() {
       _classCallCheck(this, DefaultBaseTextureRenderContribution);
@@ -18626,16 +18967,20 @@
       key: "drawShape",
       value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
         this.textureMap || this.initTextureMap(context, graphic.stage);
-        var _graphic$attribute2 = graphic.attribute,
-          _graphic$attribute2$t = _graphic$attribute2.texture,
-          texture = _graphic$attribute2$t === void 0 ? graphicAttribute.texture : _graphic$attribute2$t,
-          _graphic$attribute2$t2 = _graphic$attribute2.textureColor,
-          textureColor = _graphic$attribute2$t2 === void 0 ? graphicAttribute.textureColor : _graphic$attribute2$t2,
-          _graphic$attribute2$t3 = _graphic$attribute2.textureSize,
-          textureSize = _graphic$attribute2$t3 === void 0 ? graphicAttribute.textureSize : _graphic$attribute2$t3,
-          _graphic$attribute2$t4 = _graphic$attribute2.texturePadding,
-          texturePadding = _graphic$attribute2$t4 === void 0 ? graphicAttribute.texturePadding : _graphic$attribute2$t4;
-        if (!texture) return;
+        var _graphic$attribute = graphic.attribute,
+          _graphic$attribute$te = _graphic$attribute.texture,
+          texture = _graphic$attribute$te === void 0 ? graphicAttribute.texture : _graphic$attribute$te,
+          _graphic$attribute$te2 = _graphic$attribute.textureColor,
+          textureColor = _graphic$attribute$te2 === void 0 ? graphicAttribute.textureColor : _graphic$attribute$te2,
+          _graphic$attribute$te3 = _graphic$attribute.textureSize,
+          textureSize = _graphic$attribute$te3 === void 0 ? graphicAttribute.textureSize : _graphic$attribute$te3,
+          _graphic$attribute$te4 = _graphic$attribute.texturePadding,
+          texturePadding = _graphic$attribute$te4 === void 0 ? graphicAttribute.texturePadding : _graphic$attribute$te4;
+        texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
+      }
+    }, {
+      key: "drawTexture",
+      value: function drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding) {
         var pattern = this.textureMap.get(texture);
         if (!pattern) switch (texture) {
           case "circle":
@@ -18822,13 +19167,15 @@
         var _graphic$attribute = graphic.attribute,
           background = _graphic$attribute.background,
           _graphic$attribute$ba = _graphic$attribute.backgroundMode,
-          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba,
+          _graphic$attribute$ba2 = _graphic$attribute.backgroundFit,
+          backgroundFit = _graphic$attribute$ba2 === void 0 ? graphicAttribute.backgroundFit : _graphic$attribute$ba2;
         if (background) if (graphic.backgroundImg && graphic.resources) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
           context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
           var b = graphic.AABBBounds;
-          this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), context.setTransformForCurrent();
+          this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
     }]);
@@ -18839,7 +19186,7 @@
   var halfPi = pi / 2;
   function createRectPath(path, x, y, width, height, rectCornerRadius) {
     var cornerRadius;
-    if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$2(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
+    if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$1(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
       var cornerRadiusArr = rectCornerRadius;
       var cr0, cr1;
       switch (cornerRadiusArr.length) {
@@ -18910,7 +19257,9 @@
         var _graphic$attribute = graphic.attribute,
           background = _graphic$attribute.background,
           _graphic$attribute$ba = _graphic$attribute.backgroundMode,
-          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba,
+          _graphic$attribute$ba2 = _graphic$attribute.backgroundFit,
+          backgroundFit = _graphic$attribute$ba2 === void 0 ? graphicAttribute.backgroundFit : _graphic$attribute$ba2;
         if (background) if (graphic.backgroundImg) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
@@ -18924,7 +19273,7 @@
             context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
           }
           var b = graphic.AABBBounds;
-          this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+          this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else if (isObject$1(background)) {
           var stroke = background.stroke,
             fill = background.fill,
@@ -18960,7 +19309,7 @@
       y = bounds.y1,
       width = bounds.width(),
       height = bounds.height();
-    return isNumber$2(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
+    return isNumber$1(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
       x: x,
       y: y,
       width: width,
@@ -19151,6 +19500,37 @@
   var defaultSymbolTextureRenderContribution = defaultBaseTextureRenderContribution;
   var defaultSymbolBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
+  var DefaultAreaTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
+    _inherits(DefaultAreaTextureRenderContribution, _DefaultBaseTextureRe);
+    var _super = _createSuper(DefaultAreaTextureRenderContribution);
+    function DefaultAreaTextureRenderContribution() {
+      var _this;
+      _classCallCheck(this, DefaultAreaTextureRenderContribution);
+      _this = _super.apply(this, arguments), _this.time = exports.BaseRenderContributionTime.afterFillStroke;
+      return _this;
+    }
+    _createClass(DefaultAreaTextureRenderContribution, [{
+      key: "drawShape",
+      value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
+        var _a, _b, _c, _d;
+        this.textureMap || this.initTextureMap(context, graphic.stage);
+        var _ref = options || {},
+          _ref$attribute = _ref.attribute,
+          attribute = _ref$attribute === void 0 ? graphic.attribute : _ref$attribute,
+          _attribute$texture = attribute.texture,
+          texture = _attribute$texture === void 0 ? null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList(graphicAttribute, "texture") : _attribute$texture,
+          _attribute$textureCol = attribute.textureColor,
+          textureColor = _attribute$textureCol === void 0 ? null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList(graphicAttribute, "textureColor") : _attribute$textureCol,
+          _attribute$textureSiz = attribute.textureSize,
+          textureSize = _attribute$textureSiz === void 0 ? null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList(graphicAttribute, "textureSize") : _attribute$textureSiz,
+          _attribute$texturePad = attribute.texturePadding,
+          texturePadding = _attribute$texturePad === void 0 ? null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList(graphicAttribute, "texturePadding") : _attribute$texturePad;
+        texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
+      }
+    }]);
+    return DefaultAreaTextureRenderContribution;
+  }(DefaultBaseTextureRenderContribution);
+
   var __decorate$1u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -19391,6 +19771,26 @@
   }(BaseRender);
   exports.DefaultCanvasCircleRender = __decorate$1t([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(CircleRenderContribution)), __metadata$17("design:paramtypes", [Object])], exports.DefaultCanvasCircleRender);
 
+  function drawSegItem(ctx, curve, endPercent, params) {
+    if (!curve.p1) return;
+    var _ref = params || {},
+      _ref$offsetX = _ref.offsetX,
+      offsetX = _ref$offsetX === void 0 ? 0 : _ref$offsetX,
+      _ref$offsetY = _ref.offsetY,
+      offsetY = _ref$offsetY === void 0 ? 0 : _ref$offsetY,
+      _ref$offsetZ = _ref.offsetZ,
+      offsetZ = _ref$offsetZ === void 0 ? 0 : _ref$offsetZ;
+    if (1 === endPercent) curve.p2 && curve.p3 ? ctx.bezierCurveTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetX + curve.p2.x, offsetY + curve.p2.y, offsetX + curve.p3.x, offsetY + curve.p3.y, offsetZ) : ctx.lineTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetZ);else if (curve.p2 && curve.p3) {
+      var _divideCubic = divideCubic(curve, endPercent),
+        _divideCubic2 = _slicedToArray(_divideCubic, 1),
+        curve1 = _divideCubic2[0];
+      ctx.bezierCurveTo(offsetX + curve1.p1.x, offsetY + curve1.p1.y, offsetX + curve1.p2.x, offsetY + curve1.p2.y, offsetX + curve1.p3.x, offsetY + curve1.p3.y, offsetZ);
+    } else {
+      var p = curve.getPointAt(endPercent);
+      ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
+    }
+  }
+
   function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
     var _a;
     var _ref = params || {},
@@ -19433,7 +19833,7 @@
           } else _lastCurve = curve;
         });
       } else curves.forEach(function (curve) {
-        curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
+        curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
       });
       return;
     }
@@ -19472,7 +19872,7 @@
           needMoveTo = !0;
           continue;
         }
-        needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, min(_p, 1), params), needMoveTo = !1;
+        needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, min(_p, 1), params), needMoveTo = !1;
       }
     }
   }
@@ -19509,25 +19909,6 @@
       path.lineTo(null !== (_c = startP.x1) && void 0 !== _c ? _c : startP.x, null !== (_d = startP.y1) && void 0 !== _d ? _d : startP.y), path.closePath();
     });
   }
-  function drawSegItem$1(ctx, curve, endPercent, params) {
-    if (!curve.p1) return;
-    var _ref4 = params || {},
-      _ref4$offsetX = _ref4.offsetX,
-      offsetX = _ref4$offsetX === void 0 ? 0 : _ref4$offsetX,
-      _ref4$offsetY = _ref4.offsetY,
-      offsetY = _ref4$offsetY === void 0 ? 0 : _ref4$offsetY,
-      _ref4$offsetZ = _ref4.offsetZ,
-      offsetZ = _ref4$offsetZ === void 0 ? 0 : _ref4$offsetZ;
-    if (1 === endPercent) curve.p2 && curve.p3 ? ctx.bezierCurveTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetX + curve.p2.x, offsetY + curve.p2.y, offsetX + curve.p3.x, offsetY + curve.p3.y, offsetZ) : ctx.lineTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetZ);else if (curve.p2 && curve.p3) {
-      var _divideCubic = divideCubic(curve, endPercent),
-        _divideCubic2 = _slicedToArray(_divideCubic, 1),
-        curve1 = _divideCubic2[0];
-      ctx.bezierCurveTo(offsetX + curve1.p1.x, offsetY + curve1.p1.y, offsetX + curve1.p2.x, offsetY + curve1.p2.y, offsetX + curve1.p3.x, offsetY + curve1.p3.y, offsetZ);
-    } else {
-      var p = curve.getPointAt(endPercent);
-      ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
-    }
-  }
 
   var __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
@@ -19835,83 +20216,7 @@
     }
     path.closePath();
   }
-  function drawSegItem(ctx, curve, endPercent, params) {
-    if (!curve.p1) return;
-    var _ref5 = params || {},
-      _ref5$offsetX = _ref5.offsetX,
-      offsetX = _ref5$offsetX === void 0 ? 0 : _ref5$offsetX,
-      _ref5$offsetY = _ref5.offsetY,
-      offsetY = _ref5$offsetY === void 0 ? 0 : _ref5$offsetY,
-      _ref5$offsetZ = _ref5.offsetZ,
-      offsetZ = _ref5$offsetZ === void 0 ? 0 : _ref5$offsetZ;
-    if (1 === endPercent) curve.p2 && curve.p3 ? ctx.bezierCurveTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetX + curve.p2.x, offsetY + curve.p2.y, offsetX + curve.p3.x, offsetY + curve.p3.y, offsetZ) : ctx.lineTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetZ);else if (curve.p2 && curve.p3) {
-      var _divideCubic = divideCubic(curve, endPercent),
-        _divideCubic2 = _slicedToArray(_divideCubic, 1),
-        curve1 = _divideCubic2[0];
-      ctx.bezierCurveTo(offsetX + curve1.p1.x, offsetY + curve1.p1.y, offsetX + curve1.p2.x, offsetY + curve1.p2.y, offsetX + curve1.p3.x, offsetY + curve1.p3.y, offsetZ);
-    } else {
-      var p = curve.getPointAt(endPercent);
-      ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
-    }
-  }
 
-  var DefaultAreaTextureRenderContribution = /*#__PURE__*/function (_DefaultBaseTextureRe) {
-    _inherits(DefaultAreaTextureRenderContribution, _DefaultBaseTextureRe);
-    var _super = _createSuper(DefaultAreaTextureRenderContribution);
-    function DefaultAreaTextureRenderContribution() {
-      var _this;
-      _classCallCheck(this, DefaultAreaTextureRenderContribution);
-      _this = _super.apply(this, arguments), _this.time = exports.BaseRenderContributionTime.afterFillStroke;
-      return _this;
-    }
-    _createClass(DefaultAreaTextureRenderContribution, [{
-      key: "drawShape",
-      value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
-        var _a, _b, _c, _d;
-        this.textureMap || this.initTextureMap(context, graphic.stage);
-        var _ref = options || {},
-          _ref$attribute = _ref.attribute,
-          attribute = _ref$attribute === void 0 ? graphic.attribute : _ref$attribute,
-          _attribute$texture = attribute.texture,
-          texture = _attribute$texture === void 0 ? null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList(graphicAttribute, "texture") : _attribute$texture,
-          _attribute$textureCol = attribute.textureColor,
-          textureColor = _attribute$textureCol === void 0 ? null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList(graphicAttribute, "textureColor") : _attribute$textureCol,
-          _attribute$textureSiz = attribute.textureSize,
-          textureSize = _attribute$textureSiz === void 0 ? null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList(graphicAttribute, "textureSize") : _attribute$textureSiz,
-          _attribute$texturePad = attribute.texturePadding,
-          texturePadding = _attribute$texturePad === void 0 ? null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList(graphicAttribute, "texturePadding") : _attribute$texturePad;
-        if (!texture) return;
-        var pattern = this.textureMap.get(texture);
-        if (!pattern) switch (texture) {
-          case "circle":
-            pattern = this.createCirclePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "diamond":
-            pattern = this.createDiamondPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "rect":
-            pattern = this.createRectPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "vertical-line":
-            pattern = this.createVerticalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "horizontal-line":
-            pattern = this.createHorizontalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-lr":
-            pattern = this.createBiasLRLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-rl":
-            pattern = this.createBiasRLLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "grid":
-            pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
-        }
-        pattern && (context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore());
-      }
-    }]);
-    return DefaultAreaTextureRenderContribution;
-  }(DefaultBaseTextureRenderContribution);
   var defaultAreaTextureRenderContribution = new DefaultAreaTextureRenderContribution();
   var defaultAreaBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
@@ -19964,9 +20269,10 @@
       key: "drawLinearAreaHighPerformance",
       value: function drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c, _d, _e;
+        var points = area.attribute.points;
+        if (points.length < 2) return;
         context.beginPath();
         var z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
-          points = area.attribute.points,
           startP = points[0];
         context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (var i = 1; i < points.length; i++) {
@@ -19985,7 +20291,9 @@
           originX = _area$attribute$x === void 0 ? 0 : _area$attribute$x,
           _area$attribute$x2 = _area$attribute.x,
           originY = _area$attribute$x2 === void 0 ? 0 : _area$attribute$x2;
-        if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), stroke) {
+        if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+          attribute: area.attribute
+        }), stroke) {
           var _area$attribute$strok = area.attribute.stroke,
             _stroke = _area$attribute$strok === void 0 ? areaAttribute && areaAttribute.stroke : _area$attribute$strok;
           if (isArray$1(_stroke) && (_stroke[0] || _stroke[2]) && !1 === _stroke[1]) if (context.beginPath(), _stroke[0]) {
@@ -20002,9 +20310,7 @@
               context.lineTo((null !== (_d = _p3.x1) && void 0 !== _d ? _d : _p3.x) + offsetX, (null !== (_e = _p3.y1) && void 0 !== _e ? _e : _p3.y) + offsetY, z);
             }
           }
-          context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke(), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
-            attribute: area.attribute
-          });
+          strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
         }
       }
     }, {
@@ -20143,6 +20449,7 @@
       key: "_drawSegmentItem",
       value: function _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, connect, fillCb, strokeCb) {
         var _a, _b, _c, _d;
+        if (!(cache && cache.top && cache.bottom && cache.top.curves && cache.top.curves.length && cache.bottom.curves && cache.bottom.curves.length)) return;
         var connectedType = attribute.connectedType,
           connectedX = attribute.connectedX,
           connectedY = attribute.connectedY,
@@ -20151,7 +20458,6 @@
         if (connect && (isArray$1(defaultAttribute) ? (connectedType = null !== (_a = null != connectedType ? connectedType : defaultAttribute[0].connectedType) && void 0 !== _a ? _a : defaultAttribute[1].connectedType, connectedX = null !== (_b = null != connectedX ? connectedX : defaultAttribute[0].connectedX) && void 0 !== _b ? _b : defaultAttribute[1].connectedX, connectedY = null !== (_c = null != connectedY ? connectedY : defaultAttribute[0].connectedY) && void 0 !== _c ? _c : defaultAttribute[1].connectedY, connectedStyle = null !== (_d = null != connectedStyle ? connectedStyle : defaultAttribute[0].connectedStyle) && void 0 !== _d ? _d : defaultAttribute[1].connectedStyle) : (connectedType = null != connectedType ? connectedType : defaultAttribute.connectedType, connectedX = null != connectedX ? connectedX : defaultAttribute.connectedX, connectedY = null != connectedY ? connectedY : defaultAttribute.connectedY, connectedStyle = null != connectedStyle ? connectedStyle : defaultAttribute.connectedStyle), "connect" !== connectedType && "zero" !== connectedType && (connectedType = "none"), isArray$1(defaultAttribute) ? defaultAttribute.forEach(function (i) {
           return da.push(i);
         }) : da.push(defaultAttribute), da.push(attribute)), connect && "none" === connectedType) return !1;
-        if (!cache) return;
         context.beginPath();
         var _area$attribute4 = area.attribute,
           points = _area$attribute4.points,
@@ -20429,6 +20735,46 @@
   }(BaseRender);
   exports.DefaultCanvasSymbolRender = __decorate$1o([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(SymbolRenderContribution)), __metadata$13("design:paramtypes", [Object])], exports.DefaultCanvasSymbolRender);
 
+  var DefaultBoundsAllocate = /*#__PURE__*/function () {
+    function DefaultBoundsAllocate() {
+      _classCallCheck(this, DefaultBoundsAllocate);
+      this.pools = [];
+      for (var i = 0; i < 10; i++) this.pools.push(new AABBBounds());
+    }
+    _createClass(DefaultBoundsAllocate, [{
+      key: "allocate",
+      value: function allocate(x1, y1, x2, y2) {
+        if (!this.pools.length) return new AABBBounds().setValue(x1, y1, x2, y2);
+        var b = this.pools.pop();
+        return b.x1 = x1, b.y1 = y1, b.x2 = x2, b.y2 = y2, b;
+      }
+    }, {
+      key: "allocateByObj",
+      value: function allocateByObj(b) {
+        if (!this.pools.length) return new AABBBounds(b);
+        var _b = this.pools.pop();
+        return _b.x1 = b.x1, _b.y1 = b.y1, _b.x2 = b.x2, _b.y2 = b.y2, _b;
+      }
+    }, {
+      key: "free",
+      value: function free(b) {
+        this.pools.push(b);
+      }
+    }, {
+      key: "length",
+      get: function get() {
+        return this.pools.length;
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        this.pools = [];
+      }
+    }]);
+    return DefaultBoundsAllocate;
+  }();
+  var boundsAllocate = new DefaultBoundsAllocate();
+
   var DefaultTextBackgroundRenderContribution = /*#__PURE__*/function (_DefaultBaseBackgroun) {
     _inherits(DefaultTextBackgroundRenderContribution, _DefaultBaseBackgroun);
     var _super = _createSuper(DefaultTextBackgroundRenderContribution);
@@ -20441,17 +20787,38 @@
     _createClass(DefaultTextBackgroundRenderContribution, [{
       key: "drawShape",
       value: function drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         var _graphic$attribute = graphic.attribute,
-          background = _graphic$attribute.background,
           _graphic$attribute$ba = _graphic$attribute.backgroundMode,
-          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba,
+          _graphic$attribute$ba2 = _graphic$attribute.backgroundFit,
+          backgroundFit = _graphic$attribute$ba2 === void 0 ? graphicAttribute.backgroundFit : _graphic$attribute$ba2;
+        var b,
+          background = graphic.attribute.background;
         if (!background) return;
-        var b = graphic.AABBBounds;
+        var shouldReCalBounds = isObject$1(background) && background.background,
+          onlyTranslate = graphic.transMatrix.onlyTranslate();
+        if (shouldReCalBounds) {
+          var _b = graphic.AABBBounds,
+            _x = (null !== (_a = background.x) && void 0 !== _a ? _a : _b.x1) + (null !== (_c = background.dx) && void 0 !== _c ? _c : 0),
+            _y = (null !== (_d = background.y) && void 0 !== _d ? _d : _b.y1) + (null !== (_e = background.dy) && void 0 !== _e ? _e : 0),
+            w = null !== (_f = background.width) && void 0 !== _f ? _f : _b.width(),
+            h = null !== (_g = background.height) && void 0 !== _g ? _g : _b.height();
+          if (b = boundsAllocate.allocate(_x, _y, _x + w, _y + h), background = background.background, !onlyTranslate) {
+            var _w = b.width(),
+              _h2 = b.height();
+            b.set((null !== (_h = background.x) && void 0 !== _h ? _h : 0) + (null !== (_j = background.dx) && void 0 !== _j ? _j : 0), (null !== (_k = background.y) && void 0 !== _k ? _k : 0) + (null !== (_l = background.dy) && void 0 !== _l ? _l : 0), _w, _h2);
+          }
+        } else b = graphic.AABBBounds, onlyTranslate || b.set(0, 0, b.width(), b.height());
         if (graphic.backgroundImg && graphic.resources) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
-          context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+          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 {
+          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);
       }
     }]);
     return DefaultTextBackgroundRenderContribution;
@@ -20885,7 +21252,9 @@
       value: function draw(image, renderService, drawContext) {
         var url = image.attribute.image;
         if (!url || !image.resources) return;
-        if ("success" !== image.resources.get(url).state) return;
+        var res = image.resources.get(url);
+        if ("loading" === res.state && isString$1(url)) return void ResourceLoader.improveImageLoading(url);
+        if ("success" !== res.state) return;
         var context = renderService.drawParams.context;
         if (!context) return;
         var imageAttribute = getTheme(image).image;
@@ -20926,156 +21295,169 @@
     },
     __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;
+  var DrawItemInterceptor = Symbol["for"]("DrawItemInterceptor");
+  var tempDirtyBounds = new AABBBounds();
+  var ShadowRootDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function ShadowRootDrawItemInterceptorContribution() {
+      _classCallCheck(this, ShadowRootDrawItemInterceptorContribution);
+      this.order = 1;
     }
-    _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));
+    _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: "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) {
+        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !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);
+      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 DefaultRenderService;
+    return ShadowRootDrawItemInterceptorContribution;
   }();
-  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);
+  var DebugDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function DebugDrawItemInterceptorContribution() {
+      _classCallCheck(this, DebugDrawItemInterceptorContribution);
       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;
+    _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: "_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;
+      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 ShadowRootPickItemInterceptorContribution;
+    return DebugDrawItemInterceptorContribution;
   }();
-  exports.ShadowRootPickItemInterceptorContribution = __decorate$1i([injectable()], exports.ShadowRootPickItemInterceptorContribution);
-  exports.InteractivePickItemInterceptorContribution = /*#__PURE__*/function () {
-    function InteractivePickItemInterceptorContribution() {
-      _classCallCheck(this, InteractivePickItemInterceptorContribution);
-      this.order = 1;
+  exports.CommonDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function CommonDrawItemInterceptorContribution() {
+      _classCallCheck(this, CommonDrawItemInterceptorContribution);
+      this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
     }
-    _createClass(InteractivePickItemInterceptorContribution, [{
-      key: "beforePickItem",
-      value: function beforePickItem(graphic, pickerService, point, pickParams, params) {
-        var originGraphic = graphic.baseGraphic;
-        if (originGraphic && originGraphic.parent) {
-          var newPoint = new Point(point.x, point.y),
-            context = pickerService.pickContext;
-          context.highPerformanceSave();
-          var parentMatrix = originGraphic.parent.globalTransMatrix;
-          parentMatrix.transformPoint(newPoint, newPoint);
-          var result = originGraphic.isContainer ? pickerService.pickGroup(originGraphic, newPoint.clone(), parentMatrix, pickParams) : pickerService.pickItem(originGraphic, newPoint.clone(), parentMatrix, pickParams);
-          return context.highPerformanceRestore(), result;
+    _createClass(CommonDrawItemInterceptorContribution, [{
+      key: "afterDrawItem",
+      value: function afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        for (var i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+    }, {
+      key: "beforeDrawItem",
+      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
+        for (var i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+    }]);
+    return CommonDrawItemInterceptorContribution;
+  }();
+  exports.CommonDrawItemInterceptorContribution = __decorate$1j([injectable(), __metadata$$("design:paramtypes", [])], exports.CommonDrawItemInterceptorContribution);
+  var InteractiveDrawItemInterceptorContribution = /*#__PURE__*/function () {
+    function InteractiveDrawItemInterceptorContribution() {
+      _classCallCheck(this, InteractiveDrawItemInterceptorContribution);
+      this.order = 1;
+    }
+    _createClass(InteractiveDrawItemInterceptorContribution, [{
+      key: "beforeDrawItem",
+      value: function beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
+      }
+    }, {
+      key: "beforeSetInteractive",
+      value: function beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        var interactiveGraphic = graphic.interactiveGraphic;
+        if (graphic.attribute.globalZIndex) {
+          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
+            globalZIndex: 0,
+            zIndex: graphic.attribute.globalZIndex
+          }, !1, {
+            skipUpdateCallback: !0
+          }), drawContext.stage.tryInitInteractiveLayer();
+          var interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
+          }
+          return !0;
         }
-        return null;
+        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 InteractivePickItemInterceptorContribution;
+    return InteractiveDrawItemInterceptorContribution;
   }();
-  exports.InteractivePickItemInterceptorContribution = __decorate$1i([injectable()], exports.InteractivePickItemInterceptorContribution);
-  exports.Canvas3DPickItemInterceptor = /*#__PURE__*/function () {
-    function Canvas3DPickItemInterceptor() {
-      _classCallCheck(this, Canvas3DPickItemInterceptor);
+  var Canvas3DDrawItemInterceptor = /*#__PURE__*/function () {
+    function Canvas3DDrawItemInterceptor() {
+      _classCallCheck(this, Canvas3DDrawItemInterceptor);
       this.order = 1;
     }
-    _createClass(Canvas3DPickItemInterceptor, [{
-      key: "beforePickItem",
-      value: function beforePickItem(graphic, pickerService, point, pickParams, params) {
-        if (!graphic.in3dMode || pickParams.in3dInterceptor) return null;
-        var context = pickerService.pickContext,
-          stage = graphic.stage;
-        if (!context || !stage) return null;
-        if (pickParams.in3dInterceptor = !0, context.save(), this.initCanvasCtx(context), context.camera = stage.camera, graphic.isContainer) {
-          var result,
-            isPie = !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;
@@ -21086,8 +21468,8 @@
               sortedChildren = _toConsumableArray(children);
             sortedChildren.sort(function (a, b) {
               var _a, _b, _c, _d;
-              var angle1 = (null !== (_b = null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0 + a.attribute.endAngle) && void 0 !== _b ? _b : 0) / 2,
-                angle2 = (null !== (_d = null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0 + b.attribute.endAngle) && void 0 !== _d ? _d : 0) / 2;
+              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;
@@ -21095,7 +21477,9 @@
               c._next = null, c._prev = null;
             }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(function (c) {
               graphic.appendChild(c);
-            }), pickParams.hack_pieFace = "outside", result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams), result.graphic || (pickParams.hack_pieFace = "inside", result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams)), result.graphic || (pickParams.hack_pieFace = "top", result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams)), graphic.removeAllChild(), children.forEach(function (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);
@@ -21119,15 +21503,14 @@
               i.g._next = null, i.g._prev = null;
             }), graphic.update(), zChildren.forEach(function (i) {
               graphic.add(i.g);
-            }), result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams), graphic.removeAllChild(), _children.forEach(function (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 result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
-          return context.camera = null, pickParams.in3dInterceptor = !1, context.restore(), result;
-        }
-        return context.restore(), null;
+          } 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",
@@ -21135,22 +21518,10 @@
         context.setTransformForCurrent();
       }
     }]);
-    return Canvas3DPickItemInterceptor;
+    return Canvas3DDrawItemInterceptor;
   }();
-  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);
-  });
-
-  var graphicModule = new ContainerModule(function (bind) {
-    bind(GraphicService).to(exports.DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$1).toConstantValue(graphicCreator);
-  });
 
-  var AutoEnablePlugins = Symbol["for"]("AutoEnablePlugins");
-  var PluginService = Symbol["for"]("PluginService");
-
-  var __decorate$1h = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  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;
@@ -21160,91 +21531,324 @@
     __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) {
+    __param$E = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
         decorator(target, key, paramIndex);
       };
     };
-  var DefaultPluginService = /*#__PURE__*/function () {
-    function DefaultPluginService(autoEnablePlugins) {
-      _classCallCheck(this, DefaultPluginService);
-      this.autoEnablePlugins = autoEnablePlugins, this.onStartupFinishedPlugin = [], this.onRegisterPlugin = [], this.actived = !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(DefaultPluginService, [{
-      key: "active",
-      value: function active(stage, params) {
+    _createClass(DefaultRenderService, [{
+      key: "prepare",
+      value: function prepare(updateBounds) {
         var _this = this;
-        this.stage = stage, this.actived = !0;
-        var pluginList = params.pluginList;
-        pluginList && container.isBound(AutoEnablePlugins) && this.autoEnablePlugins.getContributions().forEach(function (p) {
-          pluginList.includes(p.name) && _this.register(p);
+        updateBounds && this.renderTreeRoots.forEach(function (g) {
+          _this._prepare(g, updateBounds);
         });
       }
     }, {
-      key: "findPluginsByName",
-      value: function findPluginsByName(name) {
-        var arr = [];
-        return this.onStartupFinishedPlugin.forEach(function (plugin) {
-          plugin.name === name && arr.push(plugin);
-        }), this.onRegisterPlugin.forEach(function (plugin) {
-          plugin.name === name && arr.push(plugin);
-        }), arr;
+      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: "register",
-      value: function register(plugin) {
-        "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.push(plugin) : "onRegister" === plugin.activeEvent && (this.onRegisterPlugin.push(plugin), plugin.activate(this));
+      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: "unRegister",
-      value: function unRegister(plugin) {
-        "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1) : "onRegister" === plugin.activeEvent && this.onRegisterPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1), plugin.deactivate(this);
+      key: "afterDraw",
+      value: function afterDraw(params) {
+        this.drawContribution.afterDraw && this.drawContribution.afterDraw(this, Object.assign({}, this.drawParams));
       }
     }, {
-      key: "release",
-      value: function release() {
-        var _this2 = this;
-        this.onStartupFinishedPlugin.forEach(function (plugin) {
-          plugin.deactivate(_this2);
-        }), this.onStartupFinishedPlugin = [], this.onRegisterPlugin.forEach(function (plugin) {
-          plugin.deactivate(_this2);
-        }), this.onRegisterPlugin = [];
+      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 DefaultPluginService;
+    return DefaultRenderService;
   }();
-  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);
-  });
+  exports.DefaultRenderService = __decorate$1i([injectable(), __param$E(0, inject(DrawContribution)), __metadata$_("design:paramtypes", [Object])], exports.DefaultRenderService);
 
-  var envModules = new ContainerModule(function (bind) {
-    bindContributionProvider(bind, EnvContribution);
+  var renderModule$1 = new ContainerModule(function (bind) {
+    bind(RenderService).to(exports.DefaultRenderService).inSingletonScope();
   });
 
-  var textMeasureModules = new ContainerModule(function (bind) {
-    bind(TextMeasureContribution).to(exports.DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
-  });
+  var GraphicPicker = Symbol["for"]("GraphicPicker");
+  var PickerService = Symbol["for"]("PickerService");
+  var BoundsPicker = Symbol["for"]("BoundsPicker");
+  var GlobalPickerService = Symbol["for"]("GlobalPickerService");
 
-  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$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 () {
-    function CanvasLayerHandlerContribution() {
-      _classCallCheck(this, CanvasLayerHandlerContribution);
-      this.type = "static", this.offscreen = !1, this.global = application.global;
-    }
-    _createClass(CanvasLayerHandlerContribution, [{
-      key: "setDpr",
-      value: function setDpr(dpr) {
+  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);
+      this.order = 1;
+    }
+    _createClass(InteractivePickItemInterceptorContribution, [{
+      key: "beforePickItem",
+      value: function beforePickItem(graphic, pickerService, point, pickParams, params) {
+        var originGraphic = graphic.baseGraphic;
+        if (originGraphic && originGraphic.parent) {
+          var newPoint = new Point(point.x, point.y),
+            context = pickerService.pickContext;
+          context.highPerformanceSave();
+          var parentMatrix = originGraphic.parent.globalTransMatrix;
+          parentMatrix.transformPoint(newPoint, newPoint);
+          var result = originGraphic.isContainer ? pickerService.pickGroup(originGraphic, newPoint.clone(), parentMatrix, pickParams) : pickerService.pickItem(originGraphic, newPoint.clone(), parentMatrix, pickParams);
+          return context.highPerformanceRestore(), result;
+        }
+        return null;
+      }
+    }]);
+    return InteractivePickItemInterceptorContribution;
+  }();
+  exports.InteractivePickItemInterceptorContribution = __decorate$1h([injectable()], exports.InteractivePickItemInterceptorContribution);
+  exports.Canvas3DPickItemInterceptor = /*#__PURE__*/function () {
+    function Canvas3DPickItemInterceptor() {
+      _classCallCheck(this, Canvas3DPickItemInterceptor);
+      this.order = 1;
+    }
+    _createClass(Canvas3DPickItemInterceptor, [{
+      key: "beforePickItem",
+      value: function beforePickItem(graphic, pickerService, point, pickParams, params) {
+        if (!graphic.in3dMode || pickParams.in3dInterceptor) return null;
+        var context = pickerService.pickContext,
+          stage = graphic.stage;
+        if (!context || !stage) return null;
+        if (pickParams.in3dInterceptor = !0, context.save(), this.initCanvasCtx(context), context.camera = stage.camera, graphic.isContainer) {
+          var result,
+            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 !== (_b = null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0 + a.attribute.endAngle) && void 0 !== _b ? _b : 0) / 2,
+                angle2 = (null !== (_d = null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0 + 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);
+            }), pickParams.hack_pieFace = "outside", result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams), result.graphic || (pickParams.hack_pieFace = "inside", result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams)), result.graphic || (pickParams.hack_pieFace = "top", result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams)), 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);
+            }), result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams), graphic.removeAllChild(), _children.forEach(function (g) {
+              g._next = null, g._prev = null;
+            }), graphic.update(), _children.forEach(function (g) {
+              graphic.add(g);
+            });
+          } else result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
+          return context.camera = null, pickParams.in3dInterceptor = !1, context.restore(), result;
+        }
+        return context.restore(), null;
+      }
+    }, {
+      key: "initCanvasCtx",
+      value: function initCanvasCtx(context) {
+        context.setTransformForCurrent();
+      }
+    }]);
+    return Canvas3DPickItemInterceptor;
+  }();
+  exports.Canvas3DPickItemInterceptor = __decorate$1h([injectable()], exports.Canvas3DPickItemInterceptor);
+
+  var pickModule = new ContainerModule(function (bind, unbind, isBound) {
+    isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(exports.Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.Canvas3DPickItemInterceptor), bind(exports.ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.ShadowRootPickItemInterceptorContribution), bind(exports.InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
+  });
+
+  var graphicModule = new ContainerModule(function (bind) {
+    bind(GraphicService).to(exports.DefaultGraphicService).inSingletonScope(), bind(GraphicCreator$1).toConstantValue(graphicCreator);
+  });
+
+  var AutoEnablePlugins = Symbol["for"]("AutoEnablePlugins");
+  var PluginService = Symbol["for"]("PluginService");
+
+  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$Z = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    },
+    __param$D = undefined && undefined.__param || function (paramIndex, decorator) {
+      return function (target, key) {
+        decorator(target, key, paramIndex);
+      };
+    };
+  var DefaultPluginService = /*#__PURE__*/function () {
+    function DefaultPluginService(autoEnablePlugins) {
+      _classCallCheck(this, DefaultPluginService);
+      this.autoEnablePlugins = autoEnablePlugins, this.onStartupFinishedPlugin = [], this.onRegisterPlugin = [], this.actived = !1;
+    }
+    _createClass(DefaultPluginService, [{
+      key: "active",
+      value: function active(stage, params) {
+        var _this = this;
+        this.stage = stage, this.actived = !0;
+        var pluginList = params.pluginList;
+        pluginList && container.isBound(AutoEnablePlugins) && this.autoEnablePlugins.getContributions().forEach(function (p) {
+          pluginList.includes(p.name) && _this.register(p);
+        });
+      }
+    }, {
+      key: "findPluginsByName",
+      value: function findPluginsByName(name) {
+        var arr = [];
+        return this.onStartupFinishedPlugin.forEach(function (plugin) {
+          plugin.name === name && arr.push(plugin);
+        }), this.onRegisterPlugin.forEach(function (plugin) {
+          plugin.name === name && arr.push(plugin);
+        }), arr;
+      }
+    }, {
+      key: "register",
+      value: function register(plugin) {
+        "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.push(plugin) : "onRegister" === plugin.activeEvent && (this.onRegisterPlugin.push(plugin), plugin.activate(this));
+      }
+    }, {
+      key: "unRegister",
+      value: function unRegister(plugin) {
+        "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1) : "onRegister" === plugin.activeEvent && this.onRegisterPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1), plugin.deactivate(this);
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        var _this2 = this;
+        this.onStartupFinishedPlugin.forEach(function (plugin) {
+          plugin.deactivate(_this2);
+        }), this.onStartupFinishedPlugin = [], this.onRegisterPlugin.forEach(function (plugin) {
+          plugin.deactivate(_this2);
+        }), this.onRegisterPlugin = [];
+      }
+    }]);
+    return DefaultPluginService;
+  }();
+  DefaultPluginService = __decorate$1g([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(AutoEnablePlugins)), __metadata$Z("design:paramtypes", [Object])], DefaultPluginService);
+
+  var pluginModule = new ContainerModule(function (bind) {
+    bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
+  });
+
+  var envModules = new ContainerModule(function (bind) {
+    bindContributionProvider(bind, EnvContribution);
+  });
+
+  var textMeasureModules = new ContainerModule(function (bind) {
+    bind(TextMeasureContribution).to(exports.DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
+  });
+
+  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$Y = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    };
+  var CanvasLayerHandlerContribution = /*#__PURE__*/function () {
+    function CanvasLayerHandlerContribution() {
+      _classCallCheck(this, CanvasLayerHandlerContribution);
+      this.type = "static", this.offscreen = !1, this.global = application.global;
+    }
+    _createClass(CanvasLayerHandlerContribution, [{
+      key: "setDpr",
+      value: function setDpr(dpr) {
         this.canvas.dpr = dpr;
       }
     }, {
@@ -21328,16 +21932,16 @@
     }]);
     return CanvasLayerHandlerContribution;
   }();
-  CanvasLayerHandlerContribution = __decorate$1g([injectable(), __metadata$Z("design:paramtypes", [])], CanvasLayerHandlerContribution);
+  CanvasLayerHandlerContribution = __decorate$1f([injectable(), __metadata$Y("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-  var __decorate$1f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$Y = undefined && undefined.__metadata || function (k, v) {
+    __metadata$X = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var EmptyLayerHandlerContribution = /*#__PURE__*/function () {
@@ -21395,16 +21999,16 @@
     }]);
     return EmptyLayerHandlerContribution;
   }();
-  EmptyLayerHandlerContribution = __decorate$1f([injectable(), __metadata$Y("design:paramtypes", [])], EmptyLayerHandlerContribution);
+  EmptyLayerHandlerContribution = __decorate$1e([injectable(), __metadata$X("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-  var __decorate$1e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$X = undefined && undefined.__metadata || function (k, v) {
+    __metadata$W = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var OffscreenLayerHandlerContribution = /*#__PURE__*/function () {
@@ -21491,7 +22095,7 @@
     }]);
     return OffscreenLayerHandlerContribution;
   }();
-  OffscreenLayerHandlerContribution = __decorate$1e([injectable(), __metadata$X("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+  OffscreenLayerHandlerContribution = __decorate$1d([injectable(), __metadata$W("design:paramtypes", [])], OffscreenLayerHandlerContribution);
 
   var layerHandlerModules = new ContainerModule(function (bind) {
     bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(EmptyLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution), bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution), bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
@@ -21565,333 +22169,58 @@
     } 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 Canvas3DDrawItemInterceptor;
-  }();
-
-  var DefaultBoundsAllocate = /*#__PURE__*/function () {
-    function DefaultBoundsAllocate() {
-      _classCallCheck(this, DefaultBoundsAllocate);
-      this.pools = [];
-      for (var i = 0; i < 10; i++) this.pools.push(new AABBBounds());
-    }
-    _createClass(DefaultBoundsAllocate, [{
-      key: "allocate",
-      value: function allocate(x1, y1, x2, y2) {
-        if (!this.pools.length) return new AABBBounds().setValue(x1, y1, x2, y2);
-        var b = this.pools.pop();
-        return b.x1 = x1, b.y1 = y1, b.x2 = x2, b.y2 = y2, b;
-      }
-    }, {
-      key: "allocateByObj",
-      value: function allocateByObj(b) {
-        if (!this.pools.length) return new AABBBounds(b);
-        var _b = this.pools.pop();
-        return _b.x1 = b.x1, _b.y1 = b.y1, _b.x2 = b.x2, _b.y2 = b.y2, _b;
-      }
-    }, {
-      key: "free",
-      value: function free(b) {
-        this.pools.push(b);
-      }
-    }, {
-      key: "length",
-      get: function get() {
-        return this.pools.length;
-      }
-    }, {
-      key: "release",
-      value: function release() {
-        this.pools = [];
+    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);
+        }
       }
-    }]);
-    return DefaultBoundsAllocate;
-  }();
-  var boundsAllocate = new DefaultBoundsAllocate();
+    } 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,
@@ -21945,20 +22274,26 @@
           width = drawContext.width,
           height = drawContext.height;
         if (!context) return;
+        if (drawContext.keepMatrix) {
+          if (context.nativeContext && context.nativeContext.getTransform) {
+            var t = context.nativeContext.getTransform();
+            context.setTransformFromMatrix(t, !0, 1);
+          }
+        } else context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
         var dirtyBounds = this.dirtyBounds.setValue(0, 0, width, height);
         if (stage.dirtyBounds && !stage.dirtyBounds.empty()) {
           var b = getRectIntersect(dirtyBounds, stage.dirtyBounds, !1);
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         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);
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds);
         var drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
         context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
           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) {
           group.isContainer ? _this2.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : _this2.renderItem(group, drawContext);
-        }), context.restore(), context.restore(), context.draw(), context.inuse = !1;
+        }), context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1);
       }
     }, {
       key: "doRegister",
@@ -22091,7 +22426,7 @@
     }, {
       key: "clearScreen",
       value: function clearScreen(renderService, context, drawContext) {
-        var _a;
+        var _a, _b;
         var clear = drawContext.clear;
         if (clear) {
           var canvas = context.getCanvas(),
@@ -22103,7 +22438,7 @@
             y = 0;
           context.clearRect(x, y, width, height);
           var stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
-          if (stage && stage.backgroundImg && stage.resources) {
+          if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
             var res = stage.resources.get(clear);
             res && "success" === res.state && res.data && context.drawImage(res.data, x, y, width, height);
           } else context.fillStyle = createColor(context, clear, {
@@ -22413,20 +22748,15 @@
       _classCallCheck(this, DefaultIncrementalDrawContribution);
       _this = _super.call(this, contributions, drawItemInterceptorContributions), _this.contributions = contributions, _this.lineRender = lineRender, _this.areaRender = areaRender, _this.drawItemInterceptorContributions = drawItemInterceptorContributions, _this.rendering = !1, _this.currFrameStartAt = 0, _this.currentIdx = 0, _this.status = STATUS.NORMAL, _this.checkingForDrawPromise = null, _this.hooks = {
         completeDraw: new SyncHook([])
-      };
+      }, _this.defaultRenderMap.set(_this.lineRender.numberType, _this.lineRender), _this.defaultRenderMap.set(_this.areaRender.numberType, _this.areaRender);
       return _this;
     }
     _createClass(DefaultIncrementalDrawContribution, [{
-      key: "init",
-      value: function init() {
-        _get(_getPrototypeOf(DefaultIncrementalDrawContribution.prototype), "init", this).call(this), this.defaultRenderMap.set(this.lineRender.numberType, this.lineRender), this.defaultRenderMap.set(this.areaRender.numberType, this.areaRender);
-      }
-    }, {
       key: "draw",
       value: function draw(renderService, drawContext) {
         return __awaiter$1(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
           var _this2 = this;
-          var skipDraw, context, _drawContext$x, x, _drawContext$y, y;
+          var skipDraw, context, _drawContext$x, x, _drawContext$y, y, t;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -22449,14 +22779,22 @@
               case 8:
                 this.currentRenderService = renderService;
                 context = drawContext.context, _drawContext$x = drawContext.x, x = _drawContext$x === void 0 ? 0 : _drawContext$x, _drawContext$y = drawContext.y, y = _drawContext$y === void 0 ? 0 : _drawContext$y;
-                context && (context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), 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) {
-                  _this2.renderGroup(group, drawContext);
-                }), this.hooks.completeDraw.tap("top-draw", function () {
-                  context.restore(), context.restore(), context.draw(), context.inuse = !1, _this2.rendering = !1;
-                }));
+                if (context) {
+                  if (drawContext.keepMatrix) {
+                    if (context.nativeContext && context.nativeContext.getTransform) {
+                      t = context.nativeContext.getTransform();
+                      context.setTransformFromMatrix(t, !0, 1);
+                    }
+                  } else context.inuse = !0, context.clearMatrix();
+                  context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), 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) {
+                    _this2.renderGroup(group, drawContext);
+                  }), this.hooks.completeDraw.tap("top-draw", function () {
+                    context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1), _this2.rendering = !1;
+                  });
+                }
               case 11:
               case "end":
                 return _context.stop();
@@ -22731,18 +23069,17 @@
   DefaultIncrementalDrawContribution = __decorate$18([injectable(), __param$A(0, multiInject(GraphicRender)), __param$A(1, inject(DefaultIncrementalCanvasLineRender)), __param$A(2, inject(DefaultIncrementalCanvasAreaRender)), __param$A(3, inject(ContributionProvider)), __param$A(3, named(DrawItemInterceptor)), __metadata$T("design:paramtypes", [Array, Object, Object, Object])], DefaultIncrementalDrawContribution);
 
   var renderModule = new ContainerModule(function (bind) {
-    bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
+    bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(exports.CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(exports.CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
   });
 
   function load(container) {
     container.load(renderModule);
   }
 
-  var loaded$r = !1;
   function preLoadAllModule() {
-    loaded$r || (loaded$r = !0, container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container));
+    preLoadAllModule.__loaded || (preLoadAllModule.__loaded = !0, container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container));
   }
-  preLoadAllModule();
+  preLoadAllModule.__loaded = !1, preLoadAllModule();
   var vglobal = container.get(VGlobal);
   application.global = vglobal;
   var graphicUtil = container.get(GraphicUtil);
@@ -22892,6 +23229,8 @@
         var _this = this;
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, function (stage) {
           stage && stage === _this.pluginService.stage && _this.drawHTML(context.stage.renderService);
+        }), application.graphicService.hooks.onRemove.tap(this.key, function (graphic) {
+          _this.removeDom(graphic);
         }), application.graphicService.hooks.onRelease.tap(this.key, function (graphic) {
           _this.removeDom(graphic);
         });
@@ -22948,35 +23287,34 @@
           anchorType = _html$anchorType === void 0 ? "boundsLeftTop" : _html$anchorType;
         graphic.bindDom || (graphic.bindDom = new Map());
         var lastDom = graphic.bindDom.get(dom);
-        if (lastDom && (!container || container === lastDom.container)) return;
-        var nativeDom, nativeContainer;
-        graphic.bindDom.forEach(function (_ref) {
-          var wrapGroup = _ref.wrapGroup;
-          application.global.removeDom(wrapGroup);
-        }), nativeDom = "string" == typeof dom ? new DOMParser().parseFromString(dom, "text/html").firstChild : dom;
-        var _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
-        nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer();
-        var wrapGroup = application.global.createDom({
-          tagName: "div",
-          width: width,
-          height: height,
-          style: style,
-          parent: nativeContainer
-        });
-        wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
-          dom: nativeDom,
-          container: container,
-          wrapGroup: wrapGroup
-        })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        var wrapGroup, nativeContainer;
+        if (!lastDom || container && container !== lastDom.container) {
+          var nativeDom;
+          graphic.bindDom.forEach(function (_ref) {
+            var wrapGroup = _ref.wrapGroup;
+            application.global.removeDom(wrapGroup);
+          }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
+          var _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
+          nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
+            tagName: "div",
+            width: width,
+            height: height,
+            style: style,
+            parent: nativeContainer
+          }), wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
+            dom: nativeDom,
+            container: container,
+            wrapGroup: wrapGroup
+          }));
+        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
+        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         var left = 0,
           top = 0;
-        if ("position" === anchorType) {
-          var matrix = graphic.transMatrix;
+        var b = graphic.globalAABBBounds;
+        if ("position" === anchorType || b.empty()) {
+          var matrix = graphic.globalTransMatrix;
           left = matrix.e, top = matrix.f;
-        } else {
-          var b = graphic.AABBBounds;
-          left = b.x1, top = b.y1;
-        }
+        } else left = b.x1, top = b.y1;
         var containerTL = application.global.getElementTopLeft(nativeContainer, !1),
           windowTL = stage.window.getTopLeft(!1),
           offsetX = left + windowTL.left - containerTL.left,
@@ -23033,13 +23371,23 @@
       this.name = "FlexLayoutPlugin", this.activeEvent = "onRegister", this.id = Generator.GenAutoIncrementId(), this.key = this.name + this.id, this.tempBounds = new AABBBounds();
     }
     _createClass(FlexLayoutPlugin, [{
+      key: "pauseLayout",
+      value: function pauseLayout(p) {
+        this.pause = p;
+      }
+    }, {
+      key: "tryLayoutChildren",
+      value: function tryLayoutChildren(graphic) {
+        graphic.firstChild && this.tryLayout(graphic.firstChild);
+      }
+    }, {
       key: "tryLayout",
       value: function tryLayout(graphic) {
         var _this = this;
-        if (this.layouting) return;
-        this.layouting = !0;
+        var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+        if (this.pause) return;
         var p = graphic.parent;
-        if (!p || !graphic.needUpdateLayout()) return;
+        if (!(force || p && graphic.needUpdateLayout())) return;
         var theme = getTheme(p).group,
           _p$attribute$display = p.attribute.display,
           display = _p$attribute$display === void 0 ? theme.display : _p$attribute$display;
@@ -23049,24 +23397,29 @@
           flexDirection = _p$attribute$flexDire === void 0 ? theme.flexDirection : _p$attribute$flexDire,
           _p$attribute$flexWrap = _p$attribute.flexWrap,
           flexWrap = _p$attribute$flexWrap === void 0 ? theme.flexWrap : _p$attribute$flexWrap,
-          _p$attribute$justifyC = _p$attribute.justifyContent,
-          justifyContent = _p$attribute$justifyC === void 0 ? theme.justifyContent : _p$attribute$justifyC,
           _p$attribute$alignIte = _p$attribute.alignItems,
           alignItems = _p$attribute$alignIte === void 0 ? theme.alignItems : _p$attribute$alignIte,
-          _p$attribute$alignCon = _p$attribute.alignContent,
-          alignContent = _p$attribute$alignCon === void 0 ? theme.alignContent : _p$attribute$alignCon,
           _p$attribute$clip = _p$attribute.clip,
-          clip = _p$attribute$clip === void 0 ? theme.clip : _p$attribute$clip;
-        var childrenWidth = 0,
-          childrenHeight = 0,
-          boundsLegal = 0;
-        if (p.forEachChildren(function (child) {
-          var bounds = child.AABBBounds;
-          "column" === flexDirection || "column-reverse" === flexDirection ? (childrenHeight += bounds.height(), childrenWidth = Math.max(childrenWidth, bounds.width())) : (childrenWidth += bounds.width(), childrenHeight = Math.max(childrenHeight, bounds.height())), boundsLegal += bounds.x1, boundsLegal += bounds.y1, boundsLegal += bounds.x2, boundsLegal += bounds.y2;
-        }), !isFinite(boundsLegal)) return;
-        var width = p.attribute.width || childrenWidth,
-          height = p.attribute.height || childrenHeight;
-        p.attribute.width || (p.attribute.width = 0), p.attribute.height || (p.attribute.height = 0), this.tempBounds.copy(p._AABBBounds);
+          clip = _p$attribute$clip === void 0 ? theme.clip : _p$attribute$clip,
+          _p$attribute$alignCon = p.attribute.alignContent,
+          alignContent = _p$attribute$alignCon === void 0 ? null != alignItems ? alignItems : theme.alignContent : _p$attribute$alignCon;
+        var _p$attribute2 = p.attribute,
+          width = _p$attribute2.width,
+          height = _p$attribute2.height,
+          _p$attribute2$justify = _p$attribute2.justifyContent,
+          justifyContent = _p$attribute2$justify === void 0 ? theme.justifyContent : _p$attribute2$justify;
+        var children = p.getChildren();
+        if (null == width || null == height) {
+          var childrenWidth = 0,
+            childrenHeight = 0,
+            boundsLegal = 0;
+          if (children.forEach(function (child) {
+            var bounds = _this.getAABBBounds(child);
+            bounds.empty() || ("column" === flexDirection || "column-reverse" === flexDirection ? (childrenHeight += bounds.height(), childrenWidth = Math.max(childrenWidth, bounds.width())) : (childrenWidth += bounds.width(), childrenHeight = Math.max(childrenHeight, bounds.height())), boundsLegal += bounds.x1, boundsLegal += bounds.y1, boundsLegal += bounds.x2, boundsLegal += bounds.y2);
+          }), !isFinite(boundsLegal)) return;
+          width = childrenWidth, height = childrenHeight;
+        }
+        p.attribute.width = width, p.attribute.height = height, this.tempBounds.copy(p._AABBBounds);
         var result = {
             main: {
               len: width,
@@ -23075,18 +23428,18 @@
             cross: {
               len: height,
               field: "y"
-            },
-            dir: 1
+            }
           },
           main = result.main,
           cross = result.cross;
-        "row-reverse" === flexDirection ? result.dir = -1 : "column" === flexDirection ? (main.len = height, cross.len = width, main.field = "y", cross.field = "x") : "column-reverse" === flexDirection && (main.len = height, cross.len = width, main.field = "y", cross.field = "x", result.dir = -1);
+        "column" !== flexDirection && "column-reverse" !== flexDirection || (main.len = height, cross.len = width, main.field = "y", cross.field = "x"), "row-reverse" !== flexDirection && "column-reverse" !== flexDirection || ("flex-start" === justifyContent ? justifyContent = "flex-end" : "flex-end" === justifyContent ? justifyContent = "flex-start" : children.reverse());
         var mainLen = 0,
           crossLen = 0;
         var mianLenArray = [];
-        p.forEachChildren(function (c) {
-          var b = c.AABBBounds,
-            ml = "x" === main.field ? b.width() : b.height(),
+        children.forEach(function (c) {
+          var b = _this.getAABBBounds(c);
+          if (b.empty()) return;
+          var ml = "x" === main.field ? b.width() : b.height(),
             cl = "x" === cross.field ? b.width() : b.height();
           mianLenArray.push({
             mainLen: ml,
@@ -23119,104 +23472,171 @@
           mainLen: mainLen,
           crossLen: crossLen
         });
-        var children = p.getChildren();
         var lastIdx = 0;
         if (mainList.forEach(function (s) {
           _this.layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, s), lastIdx = s.idx + 1;
         }), crossLen = mainList.reduce(function (a, b) {
           return a + b.crossLen;
         }, 0), 1 === mainList.length) {
-          if ("flex-end" === alignItems) {
-            var anchorPos = cross.len;
-            this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
-          } else if ("center" === alignItems) {
-            var _anchorPos = cross.len / 2;
-            this.layoutCross(children, alignItems, cross, _anchorPos, mianLenArray, mainList[0], 0);
-          } else children.forEach(function (child) {
-            child.attribute[cross.field] = getPadding(child, cross.field);
-          });
+          var anchorPosMap = {
+            "flex-start": 0,
+            "flex-end": cross.len,
+            center: cross.len / 2
+          };
+          this.layoutCross(children, alignItems, cross, anchorPosMap, mianLenArray, mainList[0], 0);
         } else if ("flex-start" === alignContent) {
           lastIdx = 0;
-          var _anchorPos2 = 0;
+          var anchorPos = 0;
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "flex-start", cross, _anchorPos2, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos2 += s.crossLen;
+            var anchorPosMap = {
+              "flex-start": anchorPos,
+              "flex-end": anchorPos + s.crossLen,
+              center: anchorPos + s.crossLen / 2
+            };
+            _this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen;
           });
         } else if ("center" === alignContent) {
           lastIdx = 0;
-          var _anchorPos3 = Math.max(0, (cross.len - crossLen) / 2);
+          var _anchorPos = Math.max(0, (cross.len - crossLen) / 2);
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "center", cross, _anchorPos3 + s.crossLen / 2, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos3 += s.crossLen;
+            var anchorPosMap = {
+              "flex-start": _anchorPos,
+              "flex-end": _anchorPos + s.crossLen,
+              center: _anchorPos + s.crossLen / 2
+            };
+            _this.layoutCross(children, "center", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos += s.crossLen;
           });
         } else if ("space-around" === alignContent) {
           lastIdx = 0;
           var padding = Math.max(0, (cross.len - crossLen) / mainList.length / 2);
-          var _anchorPos4 = padding;
+          var _anchorPos2 = padding;
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "flex-start", cross, _anchorPos4, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos4 += s.crossLen + 2 * padding;
+            var anchorPosMap = {
+              "flex-start": _anchorPos2,
+              "flex-end": _anchorPos2 + s.crossLen,
+              center: _anchorPos2 + s.crossLen / 2
+            };
+            _this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos2 += s.crossLen + 2 * padding;
           });
         } else if ("space-between" === alignContent) {
           lastIdx = 0;
           var _padding = Math.max(0, (cross.len - crossLen) / (2 * mainList.length - 2));
-          var _anchorPos5 = 0;
+          var _anchorPos3 = 0;
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "flex-start", cross, _anchorPos5, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos5 += s.crossLen + 2 * _padding;
+            var anchorPosMap = {
+              "flex-start": _anchorPos3,
+              "flex-end": _anchorPos3 + s.crossLen,
+              center: _anchorPos3 + s.crossLen / 2
+            };
+            _this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos3 += s.crossLen + 2 * _padding;
           });
         }
         children.forEach(function (child, idx) {
           child.addUpdateBoundTag(), child.addUpdatePositionTag(), child.clearUpdateLayoutTag();
-        }), p.addUpdateLayoutTag(), clip || this.tempBounds.equals(p.AABBBounds) || (this.tryLayout(p), this.layouting = !1);
+        }), p.addUpdateLayoutTag();
+        var b = this.getAABBBounds(p);
+        clip || this.tempBounds.equals(b) || this.tryLayout(p, !1);
+      }
+    }, {
+      key: "getAABBBounds",
+      value: function getAABBBounds(graphic) {
+        this.skipBoundsTrigger = !0;
+        var b = graphic.AABBBounds;
+        return this.skipBoundsTrigger = !1, b;
+      }
+    }, {
+      key: "updateChildPos",
+      value: function updateChildPos(posBaseLeftTop, lastP, lastBP) {
+        return posBaseLeftTop + (null != lastP ? lastP : 0) - lastBP;
       }
     }, {
       key: "layoutMain",
       value: function layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, currSeg) {
         if ("flex-start" === justifyContent) {
           var pos = 0;
-          for (var i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen;
+          for (var i = lastIdx; i <= currSeg.idx; i++) {
+            var posBaseLeftTop = pos + getPadding(children[i], main.field),
+              b = this.getAABBBounds(children[i]);
+            !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b["".concat(main.field, "1")])), pos += mianLenArray[i].mainLen;
+          }
         } else if ("flex-end" === justifyContent) {
           var _pos = main.len;
-          for (var _i = lastIdx; _i <= currSeg.idx; _i++) _pos -= mianLenArray[_i].mainLen, children[_i].attribute[main.field] = _pos + getPadding(children[_i], main.field);
+          for (var _i = lastIdx; _i <= currSeg.idx; _i++) {
+            _pos -= mianLenArray[_i].mainLen;
+            var _posBaseLeftTop = _pos + getPadding(children[_i], main.field),
+              _b = this.getAABBBounds(children[_i]);
+            !_b.empty() && (children[_i].attribute[main.field] = this.updateChildPos(_posBaseLeftTop, children[_i].attribute[main.field], _b["".concat(main.field, "1")]));
+          }
         } else if ("space-around" === justifyContent) {
           if (currSeg.mainLen >= main.len) {
             var _pos2 = 0;
-            for (var _i2 = lastIdx; _i2 <= currSeg.idx; _i2++) children[_i2].attribute[main.field] = _pos2 + getPadding(children[_i2], main.field), _pos2 += mianLenArray[_i2].mainLen;
+            for (var _i2 = lastIdx; _i2 <= currSeg.idx; _i2++) {
+              var _posBaseLeftTop2 = _pos2 + getPadding(children[_i2], main.field),
+                _b2 = this.getAABBBounds(children[_i2]);
+              !_b2.empty() && (children[_i2].attribute[main.field] = this.updateChildPos(_posBaseLeftTop2, children[_i2].attribute[main.field], _b2["".concat(main.field, "1")])), _pos2 += mianLenArray[_i2].mainLen;
+            }
           } else {
             var size = currSeg.idx - lastIdx + 1,
               padding = (main.len - currSeg.mainLen) / size / 2;
             var _pos3 = padding;
-            for (var _i3 = lastIdx; _i3 <= currSeg.idx; _i3++) children[_i3].attribute[main.field] = _pos3 + getPadding(children[_i3], main.field), _pos3 += mianLenArray[_i3].mainLen + 2 * padding;
+            for (var _i3 = lastIdx; _i3 <= currSeg.idx; _i3++) {
+              var _posBaseLeftTop3 = _pos3 + getPadding(children[_i3], main.field),
+                _b3 = this.getAABBBounds(children[_i3]);
+              !_b3.empty() && (children[_i3].attribute[main.field] = this.updateChildPos(_posBaseLeftTop3, children[_i3].attribute[main.field], _b3["".concat(main.field, "1")])), _pos3 += mianLenArray[_i3].mainLen + 2 * padding;
+            }
           }
         } else if ("space-between" === justifyContent) {
           if (currSeg.mainLen >= main.len) {
             var _pos4 = 0;
-            for (var _i4 = lastIdx; _i4 <= currSeg.idx; _i4++) children[_i4].attribute[main.field] = _pos4 + getPadding(children[_i4], main.field), _pos4 += mianLenArray[_i4].mainLen;
+            for (var _i4 = lastIdx; _i4 <= currSeg.idx; _i4++) {
+              var _posBaseLeftTop4 = _pos4 + getPadding(children[_i4], main.field),
+                _b4 = this.getAABBBounds(children[_i4]);
+              !_b4.empty() && (children[_i4].attribute[main.field] = this.updateChildPos(_posBaseLeftTop4, children[_i4].attribute[main.field], _b4["".concat(main.field, "1")])), _pos4 += mianLenArray[_i4].mainLen;
+            }
           } else {
             var _size = currSeg.idx - lastIdx + 1,
               _padding2 = (main.len - currSeg.mainLen) / (2 * _size - 2);
             var _pos5 = 0;
-            for (var _i5 = lastIdx; _i5 <= currSeg.idx; _i5++) children[_i5].attribute[main.field] = _pos5 + getPadding(children[_i5], main.field), _pos5 += mianLenArray[_i5].mainLen + 2 * _padding2;
+            for (var _i5 = lastIdx; _i5 <= currSeg.idx; _i5++) {
+              var _posBaseLeftTop5 = _pos5 + getPadding(children[_i5], main.field),
+                _b5 = this.getAABBBounds(children[_i5]);
+              !_b5.empty() && (children[_i5].attribute[main.field] = this.updateChildPos(_posBaseLeftTop5, children[_i5].attribute[main.field], _b5["".concat(main.field, "1")])), _pos5 += mianLenArray[_i5].mainLen + 2 * _padding2;
+            }
           }
         } else if ("center" === justifyContent) {
           var _pos6 = (main.len - currSeg.mainLen) / 2;
-          for (var _i6 = lastIdx; _i6 <= currSeg.idx; _i6++) children[_i6].attribute[main.field] = _pos6 + getPadding(children[_i6], main.field), _pos6 += mianLenArray[_i6].mainLen;
+          for (var _i6 = lastIdx; _i6 <= currSeg.idx; _i6++) {
+            var _posBaseLeftTop6 = _pos6 + getPadding(children[_i6], main.field),
+              _b6 = this.getAABBBounds(children[_i6]);
+            !_b6.empty() && (children[_i6].attribute[main.field] = this.updateChildPos(_posBaseLeftTop6, children[_i6].attribute[main.field], _b6["".concat(main.field, "1")])), _pos6 += mianLenArray[_i6].mainLen;
+          }
         }
       }
     }, {
       key: "layoutCross",
-      value: function layoutCross(children, alignItem, cross, anchorPos, lenArray, currSeg, lastIdx) {
-        if ("flex-end" === alignItem) for (var i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen + getPadding(children[i], cross.field);else if ("center" === alignItem) for (var _i7 = lastIdx; _i7 <= currSeg.idx; _i7++) children[_i7].attribute[cross.field] = anchorPos - lenArray[_i7].crossLen / 2 + getPadding(children[_i7], cross.field);else for (var _i8 = lastIdx; _i8 <= currSeg.idx; _i8++) children[_i8].attribute[cross.field] = anchorPos + getPadding(children[_i8], cross.field);
+      value: function layoutCross(children, alignItem, cross, anchorPosMap, lenArray, currSeg, lastIdx) {
+        var _a;
+        for (var i = lastIdx; i <= currSeg.idx; i++) {
+          var child = children[i];
+          var alignSelf = child.attribute.alignSelf;
+          alignSelf && "auto" !== alignSelf || (alignSelf = alignItem);
+          var b = this.getAABBBounds(child),
+            anchorPos = null !== (_a = anchorPosMap[alignSelf]) && void 0 !== _a ? _a : anchorPosMap["flex-start"];
+          "flex-end" === alignSelf ? !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos - lenArray[i].crossLen + getPadding(child, cross.field), child.attribute[cross.field], b["".concat(cross.field, "1")])) : "center" === alignSelf ? !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos - lenArray[i].crossLen / 2 + getPadding(child, cross.field), child.attribute[cross.field], b["".concat(cross.field, "1")])) : !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos + getPadding(child, cross.field), child.attribute[cross.field], b["".concat(cross.field, "1")]));
+        }
       }
     }, {
       key: "activate",
       value: function activate(context) {
         var _this2 = this;
         this.pluginService = context, application.graphicService.hooks.onAttributeUpdate.tap(this.key, function (graphic) {
-          graphic.glyphHost && (graphic = graphic.glyphHost), _this2.tryLayout(graphic), _this2.layouting = !1;
+          graphic.glyphHost && (graphic = graphic.glyphHost), graphic.stage && graphic.stage === _this2.pluginService.stage && _this2.tryLayout(graphic, !1);
         }), application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, function (graphic, stage, willUpdate, bounds) {
-          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === _this2.pluginService.stage && graphic.isContainer && _tempBounds.copy(bounds);
+          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === _this2.pluginService.stage && graphic.isContainer && !_this2.skipBoundsTrigger && _tempBounds.copy(bounds);
         }), application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, function (graphic, stage, bounds, params, selfChange) {
-          stage && stage === _this2.pluginService.stage && graphic.isContainer && (_tempBounds.equals(bounds) || (_this2.tryLayout(graphic), _this2.layouting = !1));
+          stage && stage === _this2.pluginService.stage && graphic.isContainer && !_this2.skipBoundsTrigger && (_tempBounds.equals(bounds) || _this2.tryLayout(graphic, !1));
         }), application.graphicService.hooks.onSetStage.tap(this.key, function (graphic) {
-          graphic.glyphHost && (graphic = graphic.glyphHost), _this2.tryLayout(graphic), _this2.layouting = !1;
+          graphic.glyphHost && (graphic = graphic.glyphHost), _this2.tryLayout(graphic, !1);
         });
       }
     }, {
@@ -23225,6 +23645,10 @@
         var _this3 = this;
         application.graphicService.hooks.onAttributeUpdate.taps = application.graphicService.hooks.onAttributeUpdate.taps.filter(function (item) {
           return item.name !== _this3.key;
+        }), application.graphicService.hooks.beforeUpdateAABBBounds.taps = application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(function (item) {
+          return item.name !== _this3.key;
+        }), application.graphicService.hooks.afterUpdateAABBBounds.taps = application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(function (item) {
+          return item.name !== _this3.key;
         }), application.graphicService.hooks.onSetStage.taps = application.graphicService.hooks.onSetStage.taps.filter(function (item) {
           return item.name !== _this3.key;
         });
@@ -23233,11 +23657,7 @@
     return FlexLayoutPlugin;
   }();
   function getPadding(graphic, field) {
-    if (!graphic.attribute.boundsPadding) return 0;
-    if (isNumber(graphic.attribute.boundsPadding)) return graphic.attribute.boundsPadding;
-    if (isArray$1(graphic.attribute.boundsPadding) && 1 === graphic.attribute.boundsPadding.length) return graphic.attribute.boundsPadding[0];
-    var paddingArray = parsePadding(graphic.attribute.boundsPadding);
-    return "x" === field ? paddingArray[3] : "y" === field ? paddingArray[0] : 0;
+    return 0;
   }
 
   var defaultTicker = new DefaultTicker();
@@ -23401,24 +23821,21 @@
 
   var _isBrowserEnv;
   function initIsBrowserEnv() {
-    if (null == _isBrowserEnv) {
-      try {
-        _isBrowserEnv = !!window;
-      } catch (err) {
-        _isBrowserEnv = !1;
-      }
-      if (_isBrowserEnv) try {
-        _isBrowserEnv = !tt;
-      } catch (err) {
-        _isBrowserEnv = !0;
-      }
+    if (null == _isBrowserEnv) try {
+      _isBrowserEnv = globalThis === window, _isBrowserEnv && (_isBrowserEnv = !!document.createElement);
+    } catch (err) {
+      _isBrowserEnv = !1;
     }
   }
   function isBrowserEnv() {
-    return initIsBrowserEnv(), _isBrowserEnv;
+    initIsBrowserEnv();
+    var env = application.global && application.global.env;
+    return env ? "browser" === env : _isBrowserEnv;
   }
   function isNodeEnv() {
-    return initIsBrowserEnv(), !_isBrowserEnv;
+    initIsBrowserEnv();
+    var env = application.global && application.global.env;
+    return env ? "node" === env : !_isBrowserEnv;
   }
   function getCurrentEnv() {
     return isBrowserEnv() ? "browser" : "node";
@@ -23556,6 +23973,8 @@
           resolution: this.window.dpr || this.global.devicePixelRatio,
           rootNode: this,
           global: this.global,
+          supportsPointerEvents: this.params.supportsPointerEvents,
+          supportsTouchEvents: this.params.supportsTouchEvents,
           viewport: {
             viewBox: this._viewBox,
             get x() {
@@ -23762,6 +24181,11 @@
           _this7.pluginService.unRegister(plugin);
         }));
       }
+    }, {
+      key: "getPluginsByName",
+      value: function getPluginsByName(name) {
+        return this.pluginService.findPluginsByName(name);
+      }
     }, {
       key: "tryUpdateAABBBounds",
       value: function tryUpdateAABBBounds() {
@@ -23800,7 +24224,7 @@
     }, {
       key: "tryInitInteractiveLayer",
       value: function tryInitInteractiveLayer() {
-        this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.nextFrameRenderLayerSet.add(this.interactiveLayer));
+        this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.interactiveLayer.attribute.pickable = !1, this.nextFrameRenderLayerSet.add(this.interactiveLayer));
       }
     }, {
       key: "clearViewBox",
@@ -23812,7 +24236,7 @@
       value: function render(layers, params) {
         this.ticker.start(), this.timeline.resume();
         var state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children, params), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
     }, {
       key: "combineLayersToWindow",
@@ -23849,7 +24273,8 @@
             background: layer === _this10.defaultLayer ? _this10.background : void 0,
             updateBounds: !(!_this10.dirtyBounds || _this10.dirtyBounds.empty())
           }, Object.assign({
-            renderStyle: _this10.renderStyle
+            renderStyle: _this10.renderStyle,
+            keepMatrix: _this10.params.renderKeepMatrix
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
@@ -24751,11 +25176,17 @@
           if (!params.bounds.contains(point.x, point.y)) return result;
           offsetX = params.bounds.x1, offsetY = params.bounds.y1;
         }
-        this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
+        if (this.pickContext) if (params.keepMatrix) {
+          if (this.pickContext.nativeContext && this.pickContext.nativeContext.getTransform) {
+            var t = this.pickContext.nativeContext.getTransform();
+            this.pickContext.setTransformFromMatrix(t, !0, 1);
+          }
+        } else this.pickContext.inuse = !0, this.pickContext.clearMatrix(!0, 1);
+        params.pickContext = this.pickContext;
         var parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
         var group;
         for (var i = graphics.length - 1; i >= 0 && (result = graphics[i].isContainer ? this.pickGroup(graphics[i], point, parentMatrix, params) : this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
-        if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
+        if (result.graphic || (result.group = group), this.pickContext && !params.keepMatrix && (this.pickContext.inuse = !1), result.graphic) {
           var g = result.graphic;
           for (; g.parent;) g = g.parent;
           g.shadowHost && (result.params = {
@@ -26685,7 +27116,7 @@
       ops: I(t, e, s, n, a)
     };
   }
-  function m(t, e, s) {
+  function m$2(t, e, s) {
     var n = (t || []).length;
     if (n > 2) {
       var _a5 = [];
@@ -26702,7 +27133,7 @@
   }
   function w(t, e, s, n, a) {
     return function (t, e) {
-      return m(t, !0, e);
+      return m$2(t, !0, e);
     }([[t, e], [t + s, e], [t + s, e + n], [t, e + n]], a);
   }
   function x(t, e) {
@@ -27138,7 +27569,7 @@
       key: "linearPath",
       value: function linearPath(t, e) {
         var s = this._o(e);
-        return this._d("linearPath", [m(t, !1, s)], s);
+        return this._d("linearPath", [m$2(t, !1, s)], s);
       }
     }, {
       key: "arc",
@@ -27205,7 +27636,7 @@
       value: function polygon(t, e) {
         var s = this._o(e),
           n = [],
-          a = m(t, !0, s);
+          a = m$2(t, !0, s);
         return s.fill && ("solid" === s.fillStyle ? n.push(S([t], s)) : n.push(L([t], s))), s.stroke !== H && n.push(a), this._d("polygon", n, s);
       }
     }, {
@@ -27271,7 +27702,7 @@
             return l;
           }(t, 1, h ? 4 - 4 * s.simplification : (1 + s.roughness) / 2);
         return a && ("solid" === s.fillStyle ? n.push(S(r, s)) : n.push(L(r, s))), o && (h ? r.forEach(function (t) {
-          n.push(m(t, !1, s));
+          n.push(m$2(t, !1, s));
         }) : n.push(function (t, e) {
           var s = g(d(f(t))),
             n = [];
@@ -28664,9 +29095,9 @@
     }
     children.length && flatten(1 === children.length ? children[0] : children, childrenList);
     var g = "Group" === c.name ? new c(attribute) : c(config);
-    return parseToGraphic(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
+    return parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
   }
-  function parseToGraphic(g, childrenList, props) {
+  function parseToGraphic$1(g, childrenList, props) {
     var out,
       isGraphic = !1;
     switch (g.type) {
@@ -28692,6 +29123,47 @@
   }
   var Fragment = Group;
 
+  function decodeReactDom(dom) {
+    if (!dom || !dom.$$typeof) return dom;
+    var type = dom.type,
+      _dom$props = dom.props,
+      attribute = _dom$props.attribute,
+      children = _dom$props.children,
+      stateProxy = _dom$props.stateProxy,
+      g = type({
+        attribute: attribute
+      }),
+      out = parseToGraphic(g, dom.props, children);
+    return out || (stateProxy && (g.stateProxy = stateProxy), g.id = attribute.id, g.name = attribute.name, isArray$1(children) ? children.forEach(function (item) {
+      var c = decodeReactDom(item);
+      c && c.type && g.add(c);
+    }) : children && g.add(decodeReactDom(children)), g);
+  }
+  function parseToGraphic(g, props, childrenList) {
+    var out,
+      isGraphic = !1;
+    switch (g.type) {
+      case "richtext":
+        break;
+      case "rich/text":
+        out = g.attribute || {}, childrenList && (out.text = childrenList), g.attribute = out;
+        break;
+      case "rich/image":
+        out = g.attribute || {};
+        break;
+      default:
+        isGraphic = !0;
+    }
+    return isGraphic ? Object.keys(props).forEach(function (k) {
+      var en = REACT_TO_CANOPUS_EVENTS[k];
+      en && g.on(en, props[k]);
+    }) : "richtext" === g.type && (g.attribute.textConfig = childrenList.map(function (item) {
+      return decodeReactDom(item);
+    }).filter(function (item) {
+      return item;
+    })), out;
+  }
+
   var DragNDrop = /*#__PURE__*/function () {
     function DragNDrop(rootNode) {
       var _this = this;
@@ -29919,10 +30391,11 @@
   }();
   DefaultCanvasGroupPicker = __decorate$O([injectable()], DefaultCanvasGroupPicker);
 
-  var loaded$q = !1;
-  var canvasModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
-    loaded$q || (loaded$q = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
+  var m$1 = new ContainerModule(function (bind, unbind, isBound, rebind) {
+    m$1.__vloaded || (m$1.__vloaded = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
   });
+  m$1.__vloaded = !1;
+  var canvasModule = m$1;
 
   var canvasPickerModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     isBound(DefaultCanvasPickerService) || bind(DefaultCanvasPickerService).toSelf().inSingletonScope(), isBound(PickerService) ? rebind(PickerService).toService(DefaultCanvasPickerService) : bind(PickerService).toService(DefaultCanvasPickerService);
@@ -30269,7 +30742,7 @@
       key: "getNativeAABBBounds",
       value: function getNativeAABBBounds(_dom) {
         var dom = _dom;
-        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild), dom.getBoundingClientRect) {
+        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild, dom.lastChild && (dom = dom.lastChild.firstChild)), dom.getBoundingClientRect) {
           var b = dom.getBoundingClientRect();
           return new DynamicB(b);
         }
@@ -30431,15 +30904,15 @@
   }(exports.BaseEnvContribution);
   BrowserEnvContribution = __decorate$M([injectable(), __metadata$D("design:paramtypes", [])], BrowserEnvContribution);
 
-  var isBrowserBound = !1;
   var browserEnvModule = new ContainerModule(function (bind) {
-    isBrowserBound || (isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
+    browserEnvModule.isBrowserBound || (browserEnvModule.isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
   });
-  var loaded$p = !1;
+  browserEnvModule.isBrowserBound = !1;
   function loadBrowserEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loaded$p || (loaded$p = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
+    loadBrowserEnv.__loaded || (loadBrowserEnv.__loaded = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
   }
+  loadBrowserEnv.__loaded = !1;
   function initBrowserEnv() {
     loadBrowserEnv(container);
   }
@@ -30804,10 +31277,11 @@
   }(exports.DefaultPickService);
   DefaultMathPickerService = __decorate$I([injectable(), __param$r(0, inject(ContributionProvider)), __param$r(0, named(MathPickerContribution)), __param$r(1, inject(ContributionProvider)), __param$r(1, named(PickItemInterceptor)), __metadata$A("design:paramtypes", [Object, Object])], DefaultMathPickerService);
 
-  var loaded$o = !1;
-  var mathModule = new ContainerModule(function (bind) {
-    loaded$o || (loaded$o = !0, bindContributionProvider(bind, MathPickerContribution));
+  var m = new ContainerModule(function (bind) {
+    m.__vloaded || (m.__vloaded = !0, bindContributionProvider(bind, MathPickerContribution));
   });
+  m.__vloaded = !1;
+  var mathModule = m;
 
   var mathPickerModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     isBound(DefaultMathPickerService) || bind(DefaultMathPickerService).toSelf().inSingletonScope(), isBound(PickerService) ? rebind(PickerService).toService(DefaultMathPickerService) : bind(PickerService).toService(DefaultMathPickerService);
@@ -30816,6 +31290,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,
@@ -30826,31 +31399,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) {
@@ -30881,7 +31435,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",
@@ -30971,15 +31525,15 @@
   }(exports.BaseEnvContribution);
   FeishuEnvContribution = __decorate$H([injectable(), __metadata$z("design:paramtypes", [])], FeishuEnvContribution);
 
-  var isFeishuBound = !1;
   var feishuEnvModule = new ContainerModule(function (bind) {
-    isFeishuBound || (isFeishuBound = !0, bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution));
+    feishuEnvModule.isFeishuBound || (feishuEnvModule.isFeishuBound = !0, bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution));
   });
-  var loaded$n = !1;
+  feishuEnvModule.isFeishuBound = !1;
   function loadFeishuEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loaded$n || (loaded$n = !0, container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule), loadPicker && loadMathPicker(container));
+    loadFeishuEnv.__loaded || (loadFeishuEnv.__loaded = !0, container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule), loadPicker && loadMathPicker(container));
   }
+  loadFeishuEnv.__loaded = !1;
   function initFeishuEnv() {
     loadFeishuEnv(container);
   }
@@ -31059,11 +31613,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;
@@ -31332,32 +31886,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);
     });
   }
@@ -31391,7 +31926,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",
@@ -31498,15 +32033,15 @@
   }(exports.BaseEnvContribution);
   LynxEnvContribution = __decorate$D([injectable(), __metadata$w("design:paramtypes", [])], LynxEnvContribution);
 
-  var isLynxBound = !1;
   var lynxEnvModule = new ContainerModule(function (bind) {
-    isLynxBound || (isLynxBound = !0, bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution));
+    lynxEnvModule.isLynxBound || (lynxEnvModule.isLynxBound = !0, bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution));
   });
-  var loaded$m = !1;
+  lynxEnvModule.isLynxBound = !1;
   function loadLynxEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loaded$m || (loaded$m = !0, container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule), loadPicker && loadMathPicker(container));
+    loadLynxEnv.__loaded || (loadLynxEnv.__loaded = !0, container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule), loadPicker && loadMathPicker(container));
   }
+  loadLynxEnv.__loaded = !1;
   function initLynxEnv() {
     loadLynxEnv(container);
   }
@@ -31879,14 +32414,14 @@
   }(exports.BaseEnvContribution);
   NodeEnvContribution = __decorate$z([injectable()], NodeEnvContribution);
 
-  var isNodeBound = !1;
   var nodeEnvModule = new ContainerModule(function (bind) {
-    isNodeBound || (isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
+    nodeEnvModule.isNodeBound || (nodeEnvModule.isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
   });
-  var loaded$l = !1;
+  nodeEnvModule.isNodeBound = !1;
   function loadNodeEnv(container) {
-    loaded$l || (loaded$l = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
+    loadNodeEnv.__loaded || (loadNodeEnv.__loaded = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
   }
+  loadNodeEnv.__loaded = !1;
   function initNodeEnv() {
     loadNodeEnv(container);
   }
@@ -31983,6 +32518,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);
@@ -32250,47 +32813,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) {
@@ -32427,15 +32952,15 @@
   }(exports.BaseEnvContribution);
   TaroEnvContribution = __decorate$v([injectable(), __metadata$q("design:paramtypes", [])], TaroEnvContribution);
 
-  var isTaroBound = !1;
   var taroEnvModule = new ContainerModule(function (bind) {
-    isTaroBound || (isTaroBound = !0, bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution));
+    taroEnvModule.isTaroBound || (taroEnvModule.isTaroBound = !0, bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution));
   });
-  var loaded$k = !1;
+  taroEnvModule.isTaroBound = !1;
   function loadTaroEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loaded$k || (loaded$k = !0, container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule), loadPicker && loadMathPicker(container));
+    loadTaroEnv.__loaded || (loadTaroEnv.__loaded = !0, container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule), loadPicker && loadMathPicker(container));
   }
+  loadTaroEnv.__loaded = !1;
   function initTaroEnv() {
     loadTaroEnv(container);
   }
@@ -32902,15 +33427,15 @@
   }(exports.BaseEnvContribution);
   WxEnvContribution = __decorate$r([injectable(), __metadata$n("design:paramtypes", [])], WxEnvContribution);
 
-  var isWxBound = !1;
   var wxEnvModule = new ContainerModule(function (bind) {
-    isWxBound || (isWxBound = !0, bind(WxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(WxEnvContribution));
+    wxEnvModule._isWxBound || (wxEnvModule._isWxBound = !0, bind(WxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(WxEnvContribution));
   });
-  var loaded$j = !1;
+  wxEnvModule._isWxBound = !1;
   function loadWxEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loaded$j || (loaded$j = !0, container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule), loadPicker && loadMathPicker(container));
+    loadWxEnv.__loaded || (loadWxEnv.__loaded = !0, container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule), loadPicker && loadMathPicker(container));
   }
+  loadWxEnv.__loaded = !1;
   function initWxEnv() {
     loadWxEnv(container);
   }
@@ -32918,12 +33443,12 @@
   function loadAllEnv(container) {
     loadAllModule(container);
   }
-  var loaded$i = !1;
   function loadAllModule(container) {
-    loaded$i || (loaded$i = !0, loadBrowserEnv(container, !1), loadFeishuEnv(container, !1), loadLynxEnv(container, !1), loadNodeEnv(container), loadTaroEnv(container, !1), loadWxEnv(container, !1), loadCanvasPicker(container), vglobal.hooks.onSetEnv.tap("loadMathPicker", function (lastEnv, env) {
+    loadAllModule.__loaded || (loadAllModule.__loaded = !0, loadBrowserEnv(container, !1), loadFeishuEnv(container, !1), loadLynxEnv(container, !1), loadNodeEnv(container), loadTaroEnv(container, !1), loadWxEnv(container, !1), loadCanvasPicker(container), vglobal.hooks.onSetEnv.tap("loadMathPicker", function (lastEnv, env) {
       "browser" !== env && loadMathPicker(container);
     }));
   }
+  loadAllModule.__loaded = !1;
   function initAllEnv() {
     loadAllEnv(container);
   }
@@ -33090,7 +33615,7 @@
           x += _point.x, y += _point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
         var picked = !0;
-        if (!onlyTranslate || rect.shadowRoot || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
+        if (!onlyTranslate || rect.shadowRoot || isNumber$1(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
           return 0 !== num;
         })) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, function (context, rectAttribute, themeAttribute) {
           return !!picked || (picked = context.isPointInPath(point.x, point.y), picked);
@@ -33168,7 +33693,7 @@
           x += _point.x, y += _point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
         var picked = !0;
-        if (!onlyTranslate || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
+        if (!onlyTranslate || isNumber$1(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
           return 0 !== num;
         })) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, function (context, rectAttribute, themeAttribute) {
           return !!picked || (picked = context.isPointInPath(point.x, point.y), picked);
@@ -33378,13 +33903,24 @@
           x = _area$attribute$x === void 0 ? areaAttribute.x : _area$attribute$x,
           _area$attribute$y = _area$attribute.y,
           y = _area$attribute$y === void 0 ? areaAttribute.y : _area$attribute$y;
+        var _area$attribute2 = area.attribute,
+          _area$attribute2$fill = _area$attribute2.fillPickable,
+          fillPickable = _area$attribute2$fill === void 0 ? areaAttribute.fillPickable : _area$attribute2$fill,
+          _area$attribute2$stro = _area$attribute2.strokePickable,
+          strokePickable = _area$attribute2$stro === void 0 ? areaAttribute.strokePickable : _area$attribute2$stro;
         if (pickContext.highPerformanceSave(), area.transMatrix.onlyTranslate()) {
           var _point = area.getOffsetXY(areaAttribute);
           x += _point.x, y += _point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, pickContext.transformFromMatrix(area.transMatrix, !0);
         var picked = !1;
         return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, function (context) {
-          return !!picked || (picked = context.isPointInPath(point.x, point.y), picked);
+          return !!picked || !!fillPickable && (picked = context.isPointInPath(point.x, point.y), picked);
+        }, function (context, areaAttribute, themeAttribute) {
+          if (picked) return !0;
+          if (!strokePickable) return !1;
+          var lineWidth = areaAttribute.lineWidth || themeAttribute.lineWidth,
+            pickStrokeBuffer = areaAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
+          return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
         }), pickContext.highPerformanceRestore(), picked;
       }
     }]);
@@ -34414,99 +34950,117 @@
 
   var browser = isBrowserEnv();
 
-  var loaded$h = !1;
-  function registerArc() {
-    loaded$h || (loaded$h = !0, registerArcGraphic(), container.load(arcModule), container.load(browser ? arcCanvasPickModule : arcMathPickModule));
+  function _registerArc() {
+    _registerArc.__loaded || (_registerArc.__loaded = !0, registerArcGraphic(), container.load(arcModule), container.load(browser ? arcCanvasPickModule : arcMathPickModule));
   }
+  _registerArc.__loaded = !1;
+  var registerArc = _registerArc;
 
-  var loaded$g = !1;
-  function registerArc3d() {
-    loaded$g || (loaded$g = !0, registerArc3dGraphic(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
+  function _registerArc3d() {
+    _registerArc3d.__loaded || (_registerArc3d.__loaded = !0, registerArc3dGraphic(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
   }
+  _registerArc3d.__loaded = !1;
+  var registerArc3d = _registerArc3d;
 
-  var loaded$f = !1;
-  function registerArea() {
-    loaded$f || (loaded$f = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
+  function _registerArea() {
+    _registerArea.__loaded || (_registerArea.__loaded = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
   }
+  _registerArea.__loaded = !1;
+  var registerArea = _registerArea;
 
-  var loaded$e = !1;
-  function registerCircle() {
-    loaded$e || (loaded$e = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser ? circleCanvasPickModule : circleMathPickModule));
+  function _registerCircle() {
+    _registerCircle.__loaded || (_registerCircle.__loaded = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser ? circleCanvasPickModule : circleMathPickModule));
   }
+  _registerCircle.__loaded = !1;
+  var registerCircle = _registerCircle;
 
-  var loaded$d = !1;
-  function registerGlyph() {
-    loaded$d || (loaded$d = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser ? glyphCanvasPickModule : glyphMathPickModule));
+  function _registerGlyph() {
+    _registerGlyph.__loaded || (_registerGlyph.__loaded = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser ? glyphCanvasPickModule : glyphMathPickModule));
   }
+  _registerGlyph.__loaded = !1;
+  var registerGlyph = _registerGlyph;
 
-  var loaded$c = !1;
-  function registerGroup() {
-    loaded$c || (loaded$c = !0, registerGroupGraphic());
+  function _registerGroup() {
+    _registerGroup.__loaded || (_registerGroup.__loaded = !0, registerGroupGraphic());
   }
+  _registerGroup.__loaded = !1;
+  var registerGroup = _registerGroup;
 
-  var loaded$b = !1;
-  function registerImage() {
-    loaded$b || (loaded$b = !0, registerImageGraphic(), container.load(imageModule), container.load(browser ? imageCanvasPickModule : imageMathPickModule));
+  function _registerImage() {
+    _registerImage.__loaded || (_registerImage.__loaded = !0, registerImageGraphic(), container.load(imageModule), container.load(browser ? imageCanvasPickModule : imageMathPickModule));
   }
+  _registerImage.__loaded = !1;
+  var registerImage = _registerImage;
 
-  var loaded$a = !1;
-  function registerLine() {
-    loaded$a || (loaded$a = !0, registerLineGraphic(), container.load(lineModule), container.load(browser ? lineCanvasPickModule : lineMathPickModule));
+  function _registerLine() {
+    _registerLine.__loaded || (_registerLine.__loaded = !0, registerLineGraphic(), container.load(lineModule), container.load(browser ? lineCanvasPickModule : lineMathPickModule));
   }
+  _registerLine.__loaded = !1;
+  var registerLine = _registerLine;
 
-  var loaded$9 = !1;
-  function registerPath() {
-    loaded$9 || (loaded$9 = !0, registerPathGraphic(), container.load(pathModule), container.load(browser ? pathCanvasPickModule : pathMathPickModule));
+  function _registerPath() {
+    _registerPath.__loaded || (_registerPath.__loaded = !0, registerPathGraphic(), container.load(pathModule), container.load(browser ? pathCanvasPickModule : pathMathPickModule));
   }
+  _registerPath.__loaded = !1;
+  var registerPath = _registerPath;
 
-  var loaded$8 = !1;
-  function registerPolygon() {
-    loaded$8 || (loaded$8 = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser ? polygonCanvasPickModule : polygonMathPickModule));
+  function _registerPolygon() {
+    _registerPolygon.__loaded || (_registerPolygon.__loaded = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser ? polygonCanvasPickModule : polygonMathPickModule));
   }
+  _registerPolygon.__loaded = !1;
+  var registerPolygon = _registerPolygon;
 
-  var loaded$7 = !1;
-  function registerPyramid3d() {
-    loaded$7 || (loaded$7 = !0, registerPyramid3dGraphic(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
+  function _registerPyramid3d() {
+    _registerPyramid3d.__loaded || (_registerPyramid3d.__loaded = !0, registerPyramid3dGraphic(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
   }
+  _registerPyramid3d.__loaded = !1;
+  var registerPyramid3d = _registerPyramid3d;
 
-  var loaded$6 = !1;
-  function registerRect() {
-    loaded$6 || (loaded$6 = !0, registerRectGraphic(), container.load(rectModule), container.load(browser ? rectCanvasPickModule : rectMathPickModule));
+  function _registerRect() {
+    _registerRect.__loaded || (_registerRect.__loaded = !0, registerRectGraphic(), container.load(rectModule), container.load(browser ? rectCanvasPickModule : rectMathPickModule));
   }
+  _registerRect.__loaded = !1;
+  var registerRect = _registerRect;
 
-  var loaded$5 = !1;
-  function registerRect3d() {
-    loaded$5 || (loaded$5 = !0, registerRect3dGraphic(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
+  function _registerRect3d() {
+    _registerRect3d.__loaded || (_registerRect3d.__loaded = !0, registerRect3dGraphic(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
   }
+  _registerRect3d.__loaded = !1;
+  var registerRect3d = _registerRect3d;
 
-  var loaded$4 = !1;
-  function registerRichtext() {
-    loaded$4 || (loaded$4 = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser ? richtextCanvasPickModule : richTextMathPickModule));
+  function _registerRichtext() {
+    _registerRichtext.__loaded || (_registerRichtext.__loaded = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser ? richtextCanvasPickModule : richTextMathPickModule));
   }
+  _registerRichtext.__loaded = !1;
+  var registerRichtext = _registerRichtext;
 
-  var loaded$3 = !1;
-  function registerShadowRoot() {
-    loaded$3 || (loaded$3 = !0, registerShadowRootGraphic());
+  function _registerShadowRoot() {
+    _registerShadowRoot.__loaded || (_registerShadowRoot.__loaded = !0, registerShadowRootGraphic());
   }
+  _registerShadowRoot.__loaded = !1;
+  var registerShadowRoot = _registerShadowRoot;
 
-  var loaded$2 = !1;
-  function registerSymbol() {
-    loaded$2 || (loaded$2 = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser ? symbolCanvasPickModule : symbolMathPickModule));
+  function _registerSymbol() {
+    _registerSymbol.__loaded || (_registerSymbol.__loaded = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser ? symbolCanvasPickModule : symbolMathPickModule));
   }
+  _registerSymbol.__loaded = !1;
+  var registerSymbol = _registerSymbol;
 
-  var loaded$1 = !1;
-  function registerText() {
-    loaded$1 || (loaded$1 = !0, registerTextGraphic(), container.load(textModule), container.load(browser ? textCanvasPickModule : textMathPickModule));
+  function _registerText() {
+    _registerText.__loaded || (_registerText.__loaded = !0, registerTextGraphic(), container.load(textModule), container.load(browser ? textCanvasPickModule : textMathPickModule));
   }
+  _registerText.__loaded = !1;
+  var registerText = _registerText;
 
-  var loaded = !1;
-  function registerWrapText() {
-    loaded || (loaded = !0, registerWrapTextGraphic());
+  function _registerWrapText() {
+    _registerWrapText.__loaded || (_registerWrapText.__loaded = !0, registerWrapTextGraphic());
   }
+  _registerWrapText.__loaded = !1;
+  var registerWrapText = _registerWrapText;
 
   var roughModule = _roughModule;
 
-  const version = "0.18.0-alpha.0";
+  const version = "0.18.0-alpha.1";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);
@@ -34557,6 +35111,7 @@
   exports.BoundsContext = BoundsContext;
   exports.BoundsPicker = BoundsPicker;
   exports.CIRCLE_NUMBER_TYPE = CIRCLE_NUMBER_TYPE;
+  exports.Canvas3DDrawItemInterceptor = Canvas3DDrawItemInterceptor;
   exports.CanvasFactory = CanvasFactory;
   exports.CanvasTextLayout = CanvasTextLayout;
   exports.CbAnimate = CbAnimate;
@@ -34578,11 +35133,13 @@
   exports.CustomEvent = CustomEvent;
   exports.CustomPath2D = CustomPath2D;
   exports.CustomSymbolClass = CustomSymbolClass;
+  exports.DebugDrawItemInterceptorContribution = DebugDrawItemInterceptorContribution;
   exports.DefaultArcAllocate = DefaultArcAllocate;
   exports.DefaultArcAttribute = DefaultArcAttribute;
   exports.DefaultArcRenderContribution = DefaultArcRenderContribution;
   exports.DefaultAreaAllocate = DefaultAreaAllocate;
   exports.DefaultAreaAttribute = DefaultAreaAttribute;
+  exports.DefaultAreaTextureRenderContribution = DefaultAreaTextureRenderContribution;
   exports.DefaultAttribute = DefaultAttribute;
   exports.DefaultBaseBackgroundRenderContribution = DefaultBaseBackgroundRenderContribution;
   exports.DefaultBaseTextureRenderContribution = DefaultBaseTextureRenderContribution;
@@ -34630,6 +35187,7 @@
   exports.DefaultTransform = DefaultTransform;
   exports.DragNDrop = DragNDrop;
   exports.DrawContribution = DrawContribution;
+  exports.DrawItemInterceptor = DrawItemInterceptor;
   exports.DynamicLayerHandlerContribution = DynamicLayerHandlerContribution;
   exports.EnvContribution = EnvContribution;
   exports.EventManager = EventManager;
@@ -34668,6 +35226,7 @@
   exports.IncreaseCount = IncreaseCount;
   exports.IncrementalDrawContribution = IncrementalDrawContribution;
   exports.InputText = InputText;
+  exports.InteractiveDrawItemInterceptorContribution = InteractiveDrawItemInterceptorContribution;
   exports.InteractiveSubRenderContribution = InteractiveSubRenderContribution;
   exports.LINE_NUMBER_TYPE = LINE_NUMBER_TYPE;
   exports.Layer = Layer;
@@ -34729,6 +35288,7 @@
   exports.SYMBOL_NUMBER_TYPE = SYMBOL_NUMBER_TYPE;
   exports.SegContext = SegContext;
   exports.ShadowRoot = ShadowRoot;
+  exports.ShadowRootDrawItemInterceptorContribution = ShadowRootDrawItemInterceptorContribution;
   exports.Stage = Stage;
   exports.StaticLayerHandlerContribution = StaticLayerHandlerContribution;
   exports.Step = Step$1;
@@ -34769,6 +35329,7 @@
   exports.WindowHandlerContribution = WindowHandlerContribution;
   exports.WrapText = WrapText;
   exports.XMLParser = XMLParser;
+  exports._registerArc = _registerArc;
   exports.addArcToBezierPath = addArcToBezierPath$1;
   exports.addAttributeToPrototype = addAttributeToPrototype;
   exports.alignBezierCurves = alignBezierCurves;
@@ -34834,6 +35395,7 @@
   exports.cubicLength = cubicLength;
   exports.cubicPointAt = cubicPointAt;
   exports.cubicSubdivide = cubicSubdivide;
+  exports.decodeReactDom = decodeReactDom;
   exports.defaultArcAllocate = defaultArcAllocate;
   exports.defaultArcBackgroundRenderContribution = defaultArcBackgroundRenderContribution;
   exports.defaultArcRenderContribution = defaultArcRenderContribution;
@@ -34882,9 +35444,9 @@
   exports.genLinearSegments = genLinearSegments;
   exports.genLinearTypeSegments = genLinearTypeSegments;
   exports.genMonotoneXSegments = genMonotoneXSegments;
+  exports.genMonotoneXTypeSegments = genMonotoneXTypeSegments;
   exports.genMonotoneYSegments = genMonotoneYSegments;
-  exports.genMonotpneXTypeSegments = genMonotpneXTypeSegments;
-  exports.genMonotpneYTypeSegments = genMonotpneYTypeSegments;
+  exports.genMonotoneYTypeSegments = genMonotoneYTypeSegments;
   exports.genNumberType = genNumberType;
   exports.genStepSegments = genStepSegments;
   exports.genStepTypeSegments = genStepTypeSegments;