@visactor/vrender 0.17.19 → 0.18.0-alpha.0

package/dist/index.js

@@ -4278,10 +4278,6 @@
     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) {
@@ -4337,7 +4333,7 @@
     var direction = params.direction,
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
-    var segContext = genSegContext("linear", direction, points);
+    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);
     return genLinearTypeSegments(new Linear(segContext, startPoint), points), segContext;
   }
   function genLinearTypeSegments(path, points) {
@@ -4407,7 +4403,7 @@
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-    var segContext = genSegContext("basis", direction, points);
+    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);
     return genBasisTypeSegments(new Basis(segContext, startPoint), points), segContext;
   }
 
@@ -4514,7 +4510,7 @@
     }]);
     return MonotoneY;
   }(MonotoneX);
-  function genMonotoneXTypeSegments(path, points) {
+  function genMonotpneXTypeSegments(path, points) {
     return genCurveSegments(path, points);
   }
   function genMonotoneXSegments(points) {
@@ -4523,10 +4519,10 @@
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-    var segContext = genSegContext("monotoneX", direction, points);
-    return genMonotoneXTypeSegments(new MonotoneX(segContext, startPoint), points), segContext;
+    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;
   }
-  function genMonotoneYTypeSegments(path, points) {
+  function genMonotpneYTypeSegments(path, points) {
     return genCurveSegments(path, points);
   }
   function genMonotoneYSegments(points) {
@@ -4535,8 +4531,8 @@
       startPoint = params.startPoint;
     if (points.length < 2 - Number(!!startPoint)) return null;
     if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-    var segContext = genSegContext("monotoneY", direction, points);
-    return genMonotoneYTypeSegments(new MonotoneY(segContext, startPoint), points), segContext;
+    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 Step$1 = /*#__PURE__*/function () {
@@ -4605,27 +4601,61 @@
     return genCurveSegments(path, points);
   }
 
-  var LinearClosed = /*#__PURE__*/function (_Linear) {
-    _inherits(LinearClosed, _Linear);
-    var _super = _createSuper(LinearClosed);
-    function LinearClosed() {
+  var LinearClosed = /*#__PURE__*/function () {
+    function LinearClosed(context, startPoint) {
       _classCallCheck(this, LinearClosed);
-      return _super.apply(this, arguments);
+      this.context = context, startPoint && (this.startPoint = startPoint);
     }
     _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 = genSegContext("linear", direction, points);
+    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);
     return genLinearClosedTypeSegments(new LinearClosed(segContext, startPoint), points), segContext;
   }
   function genLinearClosedTypeSegments(path, points) {
@@ -5158,13 +5188,11 @@
   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
@@ -5182,8 +5210,6 @@
     strokeSeg: null,
     pickable: !0,
     childrenPickable: !0,
-    fillPickable: !0,
-    strokePickable: !0,
     visible: !0,
     zIndex: 0,
     layout: null,
@@ -7860,14 +7886,10 @@
         viewport = params.viewport,
         _params$autoPreventDe = params.autoPreventDefault,
         autoPreventDefault = _params$autoPreventDe === void 0 ? !1 : _params$autoPreventDe,
-        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;
+        clickInterval = params.clickInterval;
       this.manager = new EventManager(rootNode, {
         clickInterval: clickInterval
-      }), 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 = {
+      }), 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 = {
         "default": "inherit",
         pointer: "pointer"
       }, this.resolution = resolution, this.setTargetElement(targetElement);
@@ -10561,25 +10583,6 @@
     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;
@@ -10591,9 +10594,8 @@
     return grids;
   }
   var splitRect = function splitRect(rect, count) {
-    var _normalizeRectAttribu = normalizeRectAttributes(rect.attribute),
-      width = _normalizeRectAttribu.width,
-      height = _normalizeRectAttribu.height,
+    var width = rect.getComputedAttribute("width"),
+      height = rect.getComputedAttribute("height"),
       grids = splitToGrids(width, height, count),
       res = [],
       gridHeight = height / grids.length;
@@ -11452,8 +11454,7 @@
       var _this;
       var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       _classCallCheck(this, Graphic);
-      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);
+      _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);
       return _this;
     }
     _createClass(Graphic, [{
@@ -11662,7 +11663,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.valid = this.isValid(), 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.onAttributeUpdate(context);
       }
     }, {
       key: "translate",
@@ -12766,7 +12767,7 @@
       value: function doUpdateAABBBounds() {
         var attribute = this.attribute,
           groupTheme = getTheme(this).group;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var bounds = application.graphicService.updateGroupAABBBounds(attribute, groupTheme, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
           boundsPadding = _attribute$boundsPadd === void 0 ? groupTheme.boundsPadding : _attribute$boundsPadd,
@@ -13587,7 +13588,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds(full) {
         var circleTheme = getTheme(this).circle;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateCircleAABBBounds(attribute, getTheme(this).circle, this._AABBBounds, full, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -13774,7 +13775,7 @@
     return CanvasTextLayout;
   }();
 
-  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_UPDATE_TAG_KEY = ["text", "maxLineWidth", "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);
@@ -13815,12 +13816,10 @@
       get: function get() {
         var textTheme = getTheme(this).text,
           attribute = this.attribute;
-        if (this.isMultiLine) return;
+        if (!this.isSimplify()) return;
         var _attribute$maxLineWid2 = attribute.maxLineWidth,
           maxLineWidth = _attribute$maxLineWid2 === void 0 ? textTheme.maxLineWidth : _attribute$maxLineWid2;
-        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());
+        return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), null != this.clipedText && this.clipedText !== attribute.text.toString());
       }
     }, {
       key: "multilineLayout",
@@ -13854,7 +13853,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var textTheme = getTheme(this).text;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateTextAABBBounds(attribute, textTheme, this._AABBBounds, this),
           _this$attribute$bound = this.attribute.boundsPadding,
@@ -15333,7 +15332,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds(full) {
         var symbolTheme = getTheme(this).symbol;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateSymbolAABBBounds(attribute, getTheme(this).symbol, this._AABBBounds, full, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -15423,7 +15422,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var lineTheme = getTheme(this).line;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateLineAABBBounds(attribute, getTheme(this).line, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -15514,7 +15513,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var rectTheme = getTheme(this).rect;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateRectAABBBounds(attribute, getTheme(this).rect, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -15545,13 +15544,13 @@
     }, {
       key: "toCustomPath",
       value: function toCustomPath() {
-        var attribute = this.attribute,
-          _normalizeRectAttribu = normalizeRectAttributes(attribute),
-          x = _normalizeRectAttribu.x,
-          y = _normalizeRectAttribu.y,
-          width = _normalizeRectAttribu.width,
-          height = _normalizeRectAttribu.height,
-          path = new CustomPath2D();
+        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();
         return path.moveTo(x, y), path.rect(x, y, width, height), path;
       }
     }, {
@@ -15744,7 +15743,7 @@
     }, {
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var bounds = application.graphicService.updateGlyphAABBBounds(this.attribute, getTheme(this).glyph, this._AABBBounds, this);
         return this.clearUpdateBoundTag(), bounds;
       }
@@ -16116,21 +16115,11 @@
           _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.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateImageAABBBounds(attribute, getTheme(this).image, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -16489,7 +16478,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var richTextTheme = getTheme(this).richtext;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateRichTextAABBBounds(attribute, getTheme(this).richtext, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -16552,13 +16541,10 @@
               _this2.addUpdateBoundTag(), null === (_a = _this2.stage) || void 0 === _a || _a.renderNextFrame();
             }, icon.richtextId = config.id, paragraphs.push(icon);
           }
-        } else {
-          var richTextConfig = textConfig[i];
-          if (isNumber$2(richTextConfig.text) && (richTextConfig.text = "".concat(richTextConfig.text)), richTextConfig.text.includes("\n")) {
-            var textParts = richTextConfig.text.split("\n");
-            for (var j = 0; j < textParts.length; j++) paragraphs.push(new Paragraph(textParts[j], 0 !== j, richTextConfig));
-          } else paragraphs.push(new Paragraph(richTextConfig.text, !1, richTextConfig));
-        }
+        } 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]));
         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),
@@ -16677,7 +16663,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var pathTheme = getTheme(this).path;
-        this.doUpdatePathShape(), this._AABBBounds.clear();
+        this.doUpdatePathShape(), this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updatePathAABBBounds(attribute, getTheme(this).path, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -16765,7 +16751,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var areaTheme = getTheme(this).area;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateAreaAABBBounds(attribute, getTheme(this).area, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -16968,7 +16954,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds(full) {
         var arcTheme = getTheme(this).arc;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateArcAABBBounds(attribute, getTheme(this).arc, this._AABBBounds, full, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -17054,7 +17040,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var polygonTheme = getTheme(this).arc;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updateArc3dAABBBounds(attribute, getTheme(this).polygon, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -17102,7 +17088,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var polygonTheme = getTheme(this).polygon;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updatePolygonAABBBounds(attribute, getTheme(this).polygon, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -17175,7 +17161,7 @@
       key: "doUpdateAABBBounds",
       value: function doUpdateAABBBounds() {
         var polygonTheme = getTheme(this).polygon;
-        this._AABBBounds.clear();
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
         var attribute = this.attribute,
           bounds = application.graphicService.updatePyramid3dAABBBounds(attribute, getTheme(this).polygon, this._AABBBounds, this),
           _attribute$boundsPadd = attribute.boundsPadding,
@@ -18135,37 +18121,35 @@
     }, {
       key: "transformAABBBounds",
       value: function transformAABBBounds(attribute, aabbBounds, theme, miter, graphic) {
-        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);
-          }
+        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 (this.combindShadowAABBBounds(aabbBounds, graphic), aabbBounds.empty()) return;
+        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);
         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);
@@ -18207,7 +18191,7 @@
 
   var text, richText;
   function getTextBounds(params) {
-    return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
+    return text || (text = graphicCreator.CreateGraphic("text", {})), text.setAttributes(params), text.AABBBounds;
   }
   function getRichTextBounds(params) {
     return richText || (richText = graphicCreator.CreateGraphic("richtext", {})), richText.setAttributes(params), richText.AABBBounds;
@@ -18380,254 +18364,6 @@
     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,
@@ -18643,7 +18379,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 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");
+    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");
   }
   function createLinearGradient(context, color, params) {
     var offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
@@ -18744,9 +18480,7 @@
         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,
-          _graphic$attribute$ba2 = _graphic$attribute.backgroundFit,
-          backgroundFit = _graphic$attribute$ba2 === void 0 ? graphicAttribute.backgroundFit : _graphic$attribute$ba2;
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
         if (background) if (graphic.backgroundImg && graphic.resources) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
@@ -18761,37 +18495,15 @@
           }
           context.clip();
           var b = graphic.AABBBounds;
-          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode), 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, backgroundFit) {
+      value: function doDrawImage(context, data, b, backgroundMode) {
         if ("no-repeat" === backgroundMode) context.drawImage(data, b.x1, b.y1, b.width(), b.height());else {
-          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);
+          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);
         }
       }
     }]);
@@ -18814,7 +18526,6 @@
     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);
@@ -18915,20 +18626,16 @@
       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$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 _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 pattern = this.textureMap.get(texture);
         if (!pattern) switch (texture) {
           case "circle":
@@ -19115,15 +18822,13 @@
         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,
-          _graphic$attribute$ba2 = _graphic$attribute.backgroundFit,
-          backgroundFit = _graphic$attribute$ba2 === void 0 ? graphicAttribute.backgroundFit : _graphic$attribute$ba2;
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
         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, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
+          this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
     }]);
@@ -19205,9 +18910,7 @@
         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,
-          _graphic$attribute$ba2 = _graphic$attribute.backgroundFit,
-          backgroundFit = _graphic$attribute$ba2 === void 0 ? graphicAttribute.backgroundFit : _graphic$attribute$ba2;
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
         if (background) if (graphic.backgroundImg) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
@@ -19221,7 +18924,7 @@
             context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
           }
           var b = graphic.AABBBounds;
-          this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+          this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else if (isObject$1(background)) {
           var stroke = background.stroke,
             fill = background.fill,
@@ -19448,37 +19151,6 @@
   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,
@@ -19719,26 +19391,6 @@
   }(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 || {},
@@ -19781,7 +19433,7 @@
           } else _lastCurve = curve;
         });
       } else curves.forEach(function (curve) {
-        curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
+        curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
       });
       return;
     }
@@ -19820,7 +19472,7 @@
           needMoveTo = !0;
           continue;
         }
-        needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, min(_p, 1), params), needMoveTo = !1;
+        needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, min(_p, 1), params), needMoveTo = !1;
       }
     }
   }
@@ -19857,6 +19509,25 @@
       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,
@@ -20164,7 +19835,83 @@
     }
     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;
 
@@ -20238,9 +19985,7 @@
           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())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
-          attribute: area.attribute
-        }), stroke) {
+        if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), 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]) {
@@ -20257,7 +20002,9 @@
               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);
             }
           }
-          strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
+          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
+          });
         }
       }
     }, {
@@ -20682,46 +20429,6 @@
   }(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);
@@ -20734,38 +20441,17 @@
     _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,
-          _graphic$attribute$ba2 = _graphic$attribute.backgroundFit,
-          backgroundFit = _graphic$attribute$ba2 === void 0 ? graphicAttribute.backgroundFit : _graphic$attribute$ba2;
-        var b,
-          background = graphic.attribute.background;
+          backgroundMode = _graphic$attribute$ba === void 0 ? graphicAttribute.backgroundMode : _graphic$attribute$ba;
         if (!background) return;
-        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());
+        var b = graphic.AABBBounds;
         if (graphic.backgroundImg && graphic.resources) {
           var res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
-          context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else {
-          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);
+          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();
       }
     }]);
     return DefaultTextBackgroundRenderContribution;
@@ -22167,6 +21853,46 @@
     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 = [];
+      }
+    }]);
+    return DefaultBoundsAllocate;
+  }();
+  var boundsAllocate = new DefaultBoundsAllocate();
+
   var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -22365,7 +22091,7 @@
     }, {
       key: "clearScreen",
       value: function clearScreen(renderService, context, drawContext) {
-        var _a, _b;
+        var _a;
         var clear = drawContext.clear;
         if (clear) {
           var canvas = context.getCanvas(),
@@ -22377,7 +22103,7 @@
             y = 0;
           context.clearRect(x, y, width, height);
           var stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
-          if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
+          if (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, {
@@ -22687,10 +22413,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() {
@@ -23007,10 +22738,11 @@
     container.load(renderModule);
   }
 
+  var loaded$r = !1;
   function preLoadAllModule() {
-    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));
+    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 = !1, preLoadAllModule();
+  preLoadAllModule();
   var vglobal = container.get(VGlobal);
   application.global = vglobal;
   var graphicUtil = container.get(GraphicUtil);
@@ -23221,7 +22953,7 @@
         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;
+        }), 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({
@@ -23238,11 +22970,13 @@
         })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         var left = 0,
           top = 0;
-        var b = graphic.globalAABBBounds;
-        if ("position" === anchorType || b.empty()) {
-          var matrix = graphic.globalTransMatrix;
+        if ("position" === anchorType) {
+          var matrix = graphic.transMatrix;
           left = matrix.e, top = matrix.f;
-        } else left = b.x1, top = b.y1;
+        } else {
+          var b = graphic.AABBBounds;
+          left = b.x1, top = b.y1;
+        }
         var containerTL = application.global.getElementTopLeft(nativeContainer, !1),
           windowTL = stage.window.getTopLeft(!1),
           offsetX = left + windowTL.left - containerTL.left,
@@ -23667,21 +23401,24 @@
 
   var _isBrowserEnv;
   function initIsBrowserEnv() {
-    if (null == _isBrowserEnv) try {
-      _isBrowserEnv = globalThis === window, _isBrowserEnv && (_isBrowserEnv = !!document.createElement);
-    } catch (err) {
-      _isBrowserEnv = !1;
+    if (null == _isBrowserEnv) {
+      try {
+        _isBrowserEnv = !!window;
+      } catch (err) {
+        _isBrowserEnv = !1;
+      }
+      if (_isBrowserEnv) try {
+        _isBrowserEnv = !tt;
+      } catch (err) {
+        _isBrowserEnv = !0;
+      }
     }
   }
   function isBrowserEnv() {
-    initIsBrowserEnv();
-    var env = application.global && application.global.env;
-    return env ? "browser" === env : _isBrowserEnv;
+    return initIsBrowserEnv(), _isBrowserEnv;
   }
   function isNodeEnv() {
-    initIsBrowserEnv();
-    var env = application.global && application.global.env;
-    return env ? "node" === env : !_isBrowserEnv;
+    return initIsBrowserEnv(), !_isBrowserEnv;
   }
   function getCurrentEnv() {
     return isBrowserEnv() ? "browser" : "node";
@@ -23819,8 +23556,6 @@
           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() {
@@ -24065,7 +23800,7 @@
     }, {
       key: "tryInitInteractiveLayer",
       value: function tryInitInteractiveLayer() {
-        this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.interactiveLayer.attribute.pickable = !1, this.nextFrameRenderLayerSet.add(this.interactiveLayer));
+        this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.nextFrameRenderLayerSet.add(this.interactiveLayer));
       }
     }, {
       key: "clearViewBox",
@@ -26950,7 +26685,7 @@
       ops: I(t, e, s, n, a)
     };
   }
-  function m$2(t, e, s) {
+  function m(t, e, s) {
     var n = (t || []).length;
     if (n > 2) {
       var _a5 = [];
@@ -26967,7 +26702,7 @@
   }
   function w(t, e, s, n, a) {
     return function (t, e) {
-      return m$2(t, !0, e);
+      return m(t, !0, e);
     }([[t, e], [t + s, e], [t + s, e + n], [t, e + n]], a);
   }
   function x(t, e) {
@@ -27403,7 +27138,7 @@
       key: "linearPath",
       value: function linearPath(t, e) {
         var s = this._o(e);
-        return this._d("linearPath", [m$2(t, !1, s)], s);
+        return this._d("linearPath", [m(t, !1, s)], s);
       }
     }, {
       key: "arc",
@@ -27470,7 +27205,7 @@
       value: function polygon(t, e) {
         var s = this._o(e),
           n = [],
-          a = m$2(t, !0, s);
+          a = m(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);
       }
     }, {
@@ -27536,7 +27271,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$2(t, !1, s));
+          n.push(m(t, !1, s));
         }) : n.push(function (t, e) {
           var s = g(d(f(t))),
             n = [];
@@ -30184,11 +29919,10 @@
   }();
   DefaultCanvasGroupPicker = __decorate$O([injectable()], DefaultCanvasGroupPicker);
 
-  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));
+  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));
   });
-  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);
@@ -30535,7 +30269,7 @@
       key: "getNativeAABBBounds",
       value: function getNativeAABBBounds(_dom) {
         var dom = _dom;
-        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild, dom.lastChild && (dom = dom.lastChild.firstChild)), dom.getBoundingClientRect) {
+        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild), dom.getBoundingClientRect) {
           var b = dom.getBoundingClientRect();
           return new DynamicB(b);
         }
@@ -30697,15 +30431,15 @@
   }(exports.BaseEnvContribution);
   BrowserEnvContribution = __decorate$M([injectable(), __metadata$D("design:paramtypes", [])], BrowserEnvContribution);
 
+  var isBrowserBound = !1;
   var browserEnvModule = new ContainerModule(function (bind) {
-    browserEnvModule.isBrowserBound || (browserEnvModule.isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
+    isBrowserBound || (isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
   });
-  browserEnvModule.isBrowserBound = !1;
+  var loaded$p = !1;
   function loadBrowserEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loadBrowserEnv.__loaded || (loadBrowserEnv.__loaded = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
+    loaded$p || (loaded$p = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
   }
-  loadBrowserEnv.__loaded = !1;
   function initBrowserEnv() {
     loadBrowserEnv(container);
   }
@@ -31070,11 +30804,10 @@
   }(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 m = new ContainerModule(function (bind) {
-    m.__vloaded || (m.__vloaded = !0, bindContributionProvider(bind, MathPickerContribution));
+  var loaded$o = !1;
+  var mathModule = new ContainerModule(function (bind) {
+    loaded$o || (loaded$o = !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);
@@ -31083,105 +30816,6 @@
     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,
@@ -31192,12 +30826,31 @@
     __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, pixelRatio) {
-    var dpr = null != pixelRatio ? pixelRatio : tt.getSystemInfoSync().pixelRatio;
+  function makeUpCanvas$3(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList) {
+    var dpr = tt.getSystemInfoSync().pixelRatio;
     canvasIdLists.forEach(function (id, i) {
-      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 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 FeishuEnvContribution = /*#__PURE__*/function (_BaseEnvContribution) {
@@ -31228,7 +30881,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, params.pixelRatio));
+        service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$3(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList));
       }
     }, {
       key: "loadImage",
@@ -31318,15 +30971,15 @@
   }(exports.BaseEnvContribution);
   FeishuEnvContribution = __decorate$H([injectable(), __metadata$z("design:paramtypes", [])], FeishuEnvContribution);
 
+  var isFeishuBound = !1;
   var feishuEnvModule = new ContainerModule(function (bind) {
-    feishuEnvModule.isFeishuBound || (feishuEnvModule.isFeishuBound = !0, bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution));
+    isFeishuBound || (isFeishuBound = !0, bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution));
   });
-  feishuEnvModule.isFeishuBound = !1;
+  var loaded$n = !1;
   function loadFeishuEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loadFeishuEnv.__loaded || (loadFeishuEnv.__loaded = !0, container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule), loadPicker && loadMathPicker(container));
+    loaded$n || (loaded$n = !0, container.load(feishuEnvModule), container.load(feishuCanvasModule), container.load(feishuWindowModule), loadPicker && loadMathPicker(container));
   }
-  loadFeishuEnv.__loaded = !1;
   function initFeishuEnv() {
     loadFeishuEnv(container);
   }
@@ -31406,11 +31059,11 @@
       value: function draw() {
         var _this = this;
         var _context = this.nativeContext;
-        _context.draw && (this.drawPromise = new Promise(function (resolve) {
+        this.drawPromise = new Promise(function (resolve) {
           _context.draw(!0, function () {
             _this.drawPromise = null, resolve(null);
           });
-        }));
+        });
       }
     }]);
     return LynxContext2d;
@@ -31679,13 +31332,32 @@
   try {
     ng = !!lynx.createCanvasNG;
   } catch (err) {}
-  function makeUpCanvas$2(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, pixelRatio) {
-    var dpr = null != pixelRatio ? pixelRatio : SystemInfo.pixelRatio;
+  function makeUpCanvas$2(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList) {
+    var dpr = 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"),
-        canvas = new CanvasWrapEnableWH(_canvas, ctx, dpr, domref.width, domref.height, 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
+      };
       canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas);
     });
   }
@@ -31719,7 +31391,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, params.pixelRatio));
+        service.env === this.type && (service.setActiveEnvContribution(this), makeUpCanvas$2(params.domref, params.canvasIdLists, this.canvasMap, params.freeCanvasIdx, this.freeCanvasList));
       }
     }, {
       key: "getDynamicCanvasCount",
@@ -31826,15 +31498,15 @@
   }(exports.BaseEnvContribution);
   LynxEnvContribution = __decorate$D([injectable(), __metadata$w("design:paramtypes", [])], LynxEnvContribution);
 
+  var isLynxBound = !1;
   var lynxEnvModule = new ContainerModule(function (bind) {
-    lynxEnvModule.isLynxBound || (lynxEnvModule.isLynxBound = !0, bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution));
+    isLynxBound || (isLynxBound = !0, bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution));
   });
-  lynxEnvModule.isLynxBound = !1;
+  var loaded$m = !1;
   function loadLynxEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loadLynxEnv.__loaded || (loadLynxEnv.__loaded = !0, container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule), loadPicker && loadMathPicker(container));
+    loaded$m || (loaded$m = !0, container.load(lynxEnvModule), container.load(lynxCanvasModule), container.load(lynxWindowModule), loadPicker && loadMathPicker(container));
   }
-  loadLynxEnv.__loaded = !1;
   function initLynxEnv() {
     loadLynxEnv(container);
   }
@@ -32207,14 +31879,14 @@
   }(exports.BaseEnvContribution);
   NodeEnvContribution = __decorate$z([injectable()], NodeEnvContribution);
 
+  var isNodeBound = !1;
   var nodeEnvModule = new ContainerModule(function (bind) {
-    nodeEnvModule.isNodeBound || (nodeEnvModule.isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
+    isNodeBound || (isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
   });
-  nodeEnvModule.isNodeBound = !1;
+  var loaded$l = !1;
   function loadNodeEnv(container) {
-    loadNodeEnv.__loaded || (loadNodeEnv.__loaded = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
+    loaded$l || (loaded$l = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
   }
-  loadNodeEnv.__loaded = !1;
   function initNodeEnv() {
     loadNodeEnv(container);
   }
@@ -32311,34 +31983,6 @@
       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);
@@ -32606,9 +32250,47 @@
     };
   function makeUpCanvas$1(domref, canvasIdLists, canvasMap, freeCanvasIdx, freeCanvasList, taro, dpr) {
     canvasIdLists.forEach(function (id, i) {
-      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 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 TaroEnvContribution = /*#__PURE__*/function (_BaseEnvContribution) {
@@ -32745,15 +32427,15 @@
   }(exports.BaseEnvContribution);
   TaroEnvContribution = __decorate$v([injectable(), __metadata$q("design:paramtypes", [])], TaroEnvContribution);
 
+  var isTaroBound = !1;
   var taroEnvModule = new ContainerModule(function (bind) {
-    taroEnvModule.isTaroBound || (taroEnvModule.isTaroBound = !0, bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution));
+    isTaroBound || (isTaroBound = !0, bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution));
   });
-  taroEnvModule.isTaroBound = !1;
+  var loaded$k = !1;
   function loadTaroEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loadTaroEnv.__loaded || (loadTaroEnv.__loaded = !0, container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule), loadPicker && loadMathPicker(container));
+    loaded$k || (loaded$k = !0, container.load(taroEnvModule), container.load(taroCanvasModule), container.load(taroWindowModule), loadPicker && loadMathPicker(container));
   }
-  loadTaroEnv.__loaded = !1;
   function initTaroEnv() {
     loadTaroEnv(container);
   }
@@ -33220,15 +32902,15 @@
   }(exports.BaseEnvContribution);
   WxEnvContribution = __decorate$r([injectable(), __metadata$n("design:paramtypes", [])], WxEnvContribution);
 
+  var isWxBound = !1;
   var wxEnvModule = new ContainerModule(function (bind) {
-    wxEnvModule._isWxBound || (wxEnvModule._isWxBound = !0, bind(WxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(WxEnvContribution));
+    isWxBound || (isWxBound = !0, bind(WxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(WxEnvContribution));
   });
-  wxEnvModule._isWxBound = !1;
+  var loaded$j = !1;
   function loadWxEnv(container) {
     var loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-    loadWxEnv.__loaded || (loadWxEnv.__loaded = !0, container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule), loadPicker && loadMathPicker(container));
+    loaded$j || (loaded$j = !0, container.load(wxEnvModule), container.load(wxCanvasModule), container.load(wxWindowModule), loadPicker && loadMathPicker(container));
   }
-  loadWxEnv.__loaded = !1;
   function initWxEnv() {
     loadWxEnv(container);
   }
@@ -33236,12 +32918,12 @@
   function loadAllEnv(container) {
     loadAllModule(container);
   }
+  var loaded$i = !1;
   function loadAllModule(container) {
-    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) {
+    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) {
       "browser" !== env && loadMathPicker(container);
     }));
   }
-  loadAllModule.__loaded = !1;
   function initAllEnv() {
     loadAllEnv(container);
   }
@@ -33696,24 +33378,13 @@
           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 || !!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;
+          return !!picked || (picked = context.isPointInPath(point.x, point.y), picked);
         }), pickContext.highPerformanceRestore(), picked;
       }
     }]);
@@ -34743,117 +34414,99 @@
 
   var browser = isBrowserEnv();
 
-  function _registerArc() {
-    _registerArc.__loaded || (_registerArc.__loaded = !0, registerArcGraphic(), container.load(arcModule), container.load(browser ? arcCanvasPickModule : arcMathPickModule));
+  var loaded$h = !1;
+  function registerArc() {
+    loaded$h || (loaded$h = !0, registerArcGraphic(), container.load(arcModule), container.load(browser ? arcCanvasPickModule : arcMathPickModule));
   }
-  _registerArc.__loaded = !1;
-  var registerArc = _registerArc;
 
-  function _registerArc3d() {
-    _registerArc3d.__loaded || (_registerArc3d.__loaded = !0, registerArc3dGraphic(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
+  var loaded$g = !1;
+  function registerArc3d() {
+    loaded$g || (loaded$g = !0, registerArc3dGraphic(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
   }
-  _registerArc3d.__loaded = !1;
-  var registerArc3d = _registerArc3d;
 
-  function _registerArea() {
-    _registerArea.__loaded || (_registerArea.__loaded = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
+  var loaded$f = !1;
+  function registerArea() {
+    loaded$f || (loaded$f = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
   }
-  _registerArea.__loaded = !1;
-  var registerArea = _registerArea;
 
-  function _registerCircle() {
-    _registerCircle.__loaded || (_registerCircle.__loaded = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser ? circleCanvasPickModule : circleMathPickModule));
+  var loaded$e = !1;
+  function registerCircle() {
+    loaded$e || (loaded$e = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser ? circleCanvasPickModule : circleMathPickModule));
   }
-  _registerCircle.__loaded = !1;
-  var registerCircle = _registerCircle;
 
-  function _registerGlyph() {
-    _registerGlyph.__loaded || (_registerGlyph.__loaded = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser ? glyphCanvasPickModule : glyphMathPickModule));
+  var loaded$d = !1;
+  function registerGlyph() {
+    loaded$d || (loaded$d = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser ? glyphCanvasPickModule : glyphMathPickModule));
   }
-  _registerGlyph.__loaded = !1;
-  var registerGlyph = _registerGlyph;
 
-  function _registerGroup() {
-    _registerGroup.__loaded || (_registerGroup.__loaded = !0, registerGroupGraphic());
+  var loaded$c = !1;
+  function registerGroup() {
+    loaded$c || (loaded$c = !0, registerGroupGraphic());
   }
-  _registerGroup.__loaded = !1;
-  var registerGroup = _registerGroup;
 
-  function _registerImage() {
-    _registerImage.__loaded || (_registerImage.__loaded = !0, registerImageGraphic(), container.load(imageModule), container.load(browser ? imageCanvasPickModule : imageMathPickModule));
+  var loaded$b = !1;
+  function registerImage() {
+    loaded$b || (loaded$b = !0, registerImageGraphic(), container.load(imageModule), container.load(browser ? imageCanvasPickModule : imageMathPickModule));
   }
-  _registerImage.__loaded = !1;
-  var registerImage = _registerImage;
 
-  function _registerLine() {
-    _registerLine.__loaded || (_registerLine.__loaded = !0, registerLineGraphic(), container.load(lineModule), container.load(browser ? lineCanvasPickModule : lineMathPickModule));
+  var loaded$a = !1;
+  function registerLine() {
+    loaded$a || (loaded$a = !0, registerLineGraphic(), container.load(lineModule), container.load(browser ? lineCanvasPickModule : lineMathPickModule));
   }
-  _registerLine.__loaded = !1;
-  var registerLine = _registerLine;
 
-  function _registerPath() {
-    _registerPath.__loaded || (_registerPath.__loaded = !0, registerPathGraphic(), container.load(pathModule), container.load(browser ? pathCanvasPickModule : pathMathPickModule));
+  var loaded$9 = !1;
+  function registerPath() {
+    loaded$9 || (loaded$9 = !0, registerPathGraphic(), container.load(pathModule), container.load(browser ? pathCanvasPickModule : pathMathPickModule));
   }
-  _registerPath.__loaded = !1;
-  var registerPath = _registerPath;
 
-  function _registerPolygon() {
-    _registerPolygon.__loaded || (_registerPolygon.__loaded = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser ? polygonCanvasPickModule : polygonMathPickModule));
+  var loaded$8 = !1;
+  function registerPolygon() {
+    loaded$8 || (loaded$8 = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser ? polygonCanvasPickModule : polygonMathPickModule));
   }
-  _registerPolygon.__loaded = !1;
-  var registerPolygon = _registerPolygon;
 
-  function _registerPyramid3d() {
-    _registerPyramid3d.__loaded || (_registerPyramid3d.__loaded = !0, registerPyramid3dGraphic(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
+  var loaded$7 = !1;
+  function registerPyramid3d() {
+    loaded$7 || (loaded$7 = !0, registerPyramid3dGraphic(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
   }
-  _registerPyramid3d.__loaded = !1;
-  var registerPyramid3d = _registerPyramid3d;
 
-  function _registerRect() {
-    _registerRect.__loaded || (_registerRect.__loaded = !0, registerRectGraphic(), container.load(rectModule), container.load(browser ? rectCanvasPickModule : rectMathPickModule));
+  var loaded$6 = !1;
+  function registerRect() {
+    loaded$6 || (loaded$6 = !0, registerRectGraphic(), container.load(rectModule), container.load(browser ? rectCanvasPickModule : rectMathPickModule));
   }
-  _registerRect.__loaded = !1;
-  var registerRect = _registerRect;
 
-  function _registerRect3d() {
-    _registerRect3d.__loaded || (_registerRect3d.__loaded = !0, registerRect3dGraphic(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
+  var loaded$5 = !1;
+  function registerRect3d() {
+    loaded$5 || (loaded$5 = !0, registerRect3dGraphic(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
   }
-  _registerRect3d.__loaded = !1;
-  var registerRect3d = _registerRect3d;
 
-  function _registerRichtext() {
-    _registerRichtext.__loaded || (_registerRichtext.__loaded = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser ? richtextCanvasPickModule : richTextMathPickModule));
+  var loaded$4 = !1;
+  function registerRichtext() {
+    loaded$4 || (loaded$4 = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser ? richtextCanvasPickModule : richTextMathPickModule));
   }
-  _registerRichtext.__loaded = !1;
-  var registerRichtext = _registerRichtext;
 
-  function _registerShadowRoot() {
-    _registerShadowRoot.__loaded || (_registerShadowRoot.__loaded = !0, registerShadowRootGraphic());
+  var loaded$3 = !1;
+  function registerShadowRoot() {
+    loaded$3 || (loaded$3 = !0, registerShadowRootGraphic());
   }
-  _registerShadowRoot.__loaded = !1;
-  var registerShadowRoot = _registerShadowRoot;
 
-  function _registerSymbol() {
-    _registerSymbol.__loaded || (_registerSymbol.__loaded = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser ? symbolCanvasPickModule : symbolMathPickModule));
+  var loaded$2 = !1;
+  function registerSymbol() {
+    loaded$2 || (loaded$2 = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser ? symbolCanvasPickModule : symbolMathPickModule));
   }
-  _registerSymbol.__loaded = !1;
-  var registerSymbol = _registerSymbol;
 
-  function _registerText() {
-    _registerText.__loaded || (_registerText.__loaded = !0, registerTextGraphic(), container.load(textModule), container.load(browser ? textCanvasPickModule : textMathPickModule));
+  var loaded$1 = !1;
+  function registerText() {
+    loaded$1 || (loaded$1 = !0, registerTextGraphic(), container.load(textModule), container.load(browser ? textCanvasPickModule : textMathPickModule));
   }
-  _registerText.__loaded = !1;
-  var registerText = _registerText;
 
-  function _registerWrapText() {
-    _registerWrapText.__loaded || (_registerWrapText.__loaded = !0, registerWrapTextGraphic());
+  var loaded = !1;
+  function registerWrapText() {
+    loaded || (loaded = !0, registerWrapTextGraphic());
   }
-  _registerWrapText.__loaded = !1;
-  var registerWrapText = _registerWrapText;
 
   var roughModule = _roughModule;
 
-  const version = "0.17.19";
+  const version = "0.18.0-alpha.0";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);
@@ -34930,7 +34583,6 @@
   exports.DefaultArcRenderContribution = DefaultArcRenderContribution;
   exports.DefaultAreaAllocate = DefaultAreaAllocate;
   exports.DefaultAreaAttribute = DefaultAreaAttribute;
-  exports.DefaultAreaTextureRenderContribution = DefaultAreaTextureRenderContribution;
   exports.DefaultAttribute = DefaultAttribute;
   exports.DefaultBaseBackgroundRenderContribution = DefaultBaseBackgroundRenderContribution;
   exports.DefaultBaseTextureRenderContribution = DefaultBaseTextureRenderContribution;
@@ -35117,7 +34769,6 @@
   exports.WindowHandlerContribution = WindowHandlerContribution;
   exports.WrapText = WrapText;
   exports.XMLParser = XMLParser;
-  exports._registerArc = _registerArc;
   exports.addArcToBezierPath = addArcToBezierPath$1;
   exports.addAttributeToPrototype = addAttributeToPrototype;
   exports.alignBezierCurves = alignBezierCurves;
@@ -35231,9 +34882,9 @@
   exports.genLinearSegments = genLinearSegments;
   exports.genLinearTypeSegments = genLinearTypeSegments;
   exports.genMonotoneXSegments = genMonotoneXSegments;
-  exports.genMonotoneXTypeSegments = genMonotoneXTypeSegments;
   exports.genMonotoneYSegments = genMonotoneYSegments;
-  exports.genMonotoneYTypeSegments = genMonotoneYTypeSegments;
+  exports.genMonotpneXTypeSegments = genMonotpneXTypeSegments;
+  exports.genMonotpneYTypeSegments = genMonotpneYTypeSegments;
   exports.genNumberType = genNumberType;
   exports.genStepSegments = genStepSegments;
   exports.genStepTypeSegments = genStepTypeSegments;