@visactor/vrender 0.17.19 → 0.17.20-alpha.1

package/dist/index.js

@@ -2149,15 +2149,15 @@
   };
   var isArray$1 = isArray;
 
-  var isNumber$1 = function isNumber(value) {
+  var isNumber = function isNumber(value) {
     var fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     var type = _typeof(value);
     return fuzzy ? "number" === type : "number" === type || isType$1(value, "Number");
   };
-  var isNumber$2 = isNumber$1;
+  var isNumber$1 = isNumber;
 
   var isValidNumber = function isValidNumber(value) {
-    return isNumber$2(value) && Number.isFinite(value);
+    return isNumber$1(value) && Number.isFinite(value);
   };
   var isValidNumber$1 = isValidNumber;
 
@@ -2264,12 +2264,12 @@
     }, {
       key: "add",
       value: function add(point) {
-        return isNumber$2(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
+        return isNumber$1(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
       }
     }, {
       key: "sub",
       value: function sub(point) {
-        return isNumber$2(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
+        return isNumber$1(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
       }
     }, {
       key: "multi",
@@ -2973,10 +2973,10 @@
     return ((value = Math.max(0, Math.min(255, Math.round(value) || 0))) < 16 ? "0" : "") + value.toString(16);
   }
   function rgb(value) {
-    return isNumber$2(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
+    return isNumber$1(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
   }
   function rgba(value) {
-    return isNumber$2(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
+    return isNumber$1(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
   }
   function SRGBToLinear(c) {
     return c < .04045 ? .0773993808 * c : Math.pow(.9478672986 * c + .0521327014, 2.4);
@@ -3657,7 +3657,7 @@
     }], [{
       key: "getInstance",
       value: function getInstance(level, method) {
-        return Logger._instance && isNumber$2(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
+        return Logger._instance && isNumber$1(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
       }
     }, {
       key: "setInstance",
@@ -5797,9 +5797,6 @@
   function isNotAroundZero(val) {
     return val > EPSILON || val < -EPSILON;
   }
-  function isNumber(data) {
-    return "number" == typeof data && Number.isFinite(data);
-  }
   var _v0 = [0, 0],
     _v1 = [0, 0],
     _v2 = [0, 0];
@@ -9243,7 +9240,7 @@
       key: "onBind",
       value: function onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        this.fromNumber = isNumber$2(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$2(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
+        this.fromNumber = isNumber$1(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$1(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
       }
     }, {
       key: "onEnd",
@@ -10654,7 +10651,7 @@
   };
   var samplingPoints = function samplingPoints(points, count) {
     var validatePoints = points.filter(function (point) {
-      return !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y);
+      return !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y);
     });
     if (0 === validatePoints.length) return [];
     if (1 === validatePoints.length) return new Array(count).fill(0).map(function (i) {
@@ -10694,7 +10691,7 @@
       return res.concat(null !== (_a = seg.points) && void 0 !== _a ? _a : []);
     }, []));
     var validatePoints = points.filter(function (point) {
-      return !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y);
+      return !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y);
     });
     if (!validatePoints.length) return [];
     var allPoints = [];
@@ -11524,7 +11521,7 @@
         if (!this.valid) return this._AABBBounds.clear(), this._AABBBounds;
         application.graphicService.beforeUpdateAABBBounds(this, this.stage, !0, this._AABBBounds);
         var bounds = this.doUpdateAABBBounds(full);
-        return this.addUpdateLayoutTag(), application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
+        return application.graphicService.afterUpdateAABBBounds(this, this.stage, this._AABBBounds, this, !0), bounds;
       }
     }, {
       key: "combindShadowAABBBounds",
@@ -14510,7 +14507,7 @@
     _createClass(BaseSymbol, [{
       key: "bounds",
       value: function bounds(size, _bounds) {
-        if (isNumber$2(size)) {
+        if (isNumber$1(size)) {
           var halfS = size / 2;
           _bounds.x1 = -halfS, _bounds.x2 = halfS, _bounds.y1 = -halfS, _bounds.y2 = halfS;
         } else _bounds.x1 = -size[0] / 2, _bounds.x2 = size[0] / 2, _bounds.y1 = -size[1] / 2, _bounds.y2 = size[1] / 2;
@@ -15197,12 +15194,12 @@
     _createClass(RectSymbol, [{
       key: "draw",
       value: function draw(ctx, size, x, y) {
-        return isNumber$2(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
+        return isNumber$1(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
       }
     }, {
       key: "drawOffset",
       value: function drawOffset(ctx, size, x, y, offset) {
-        return isNumber$2(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
+        return isNumber$1(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
       }
     }]);
     return RectSymbol;
@@ -15841,16 +15838,7 @@
             deltaY = -height;
         }
         var deltaX = 0;
-        switch (this.globalAlign) {
-          case "left":
-            deltaX = 0;
-            break;
-          case "center":
-            deltaX = -width / 2;
-            break;
-          case "right":
-            deltaX = -width;
-        }
+        "right" === this.globalAlign || "end" === this.globalAlign ? deltaX = -width : "center" === this.globalAlign && (deltaX = -width / 2);
         var frameHeight = this[this.directionKey.height];
         this.singleLine && (frameHeight = this.lines[0].height + 1);
         var lastLineTag = !1;
@@ -16003,9 +15991,9 @@
         var direction = this.direction;
         if (this.verticalEllipsis) text = "...", direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
           if ("hide" === this.ellipsis) return;
-          if ("add" === this.ellipsis) text += "...", "right" === textAlign && (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
+          if ("add" === this.ellipsis) text += "...", "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
             var index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-            if (text = text.slice(0, index), text += "...", "right" === textAlign) {
+            if (text = text.slice(0, index), text += "...", "right" === textAlign || "end" === textAlign) {
               var _measureTextCanvas3 = measureTextCanvas(this.text.slice(index), this.character),
                 width = _measureTextCanvas3.width;
               "vertical" === direction || (left -= this.ellipsisWidth - width);
@@ -16261,17 +16249,7 @@
           maxHeight = this.height;
         var x = this.left,
           spacing = 0;
-        if (this.actualWidth < width && !isWidthMax) switch (this.textAlign) {
-          case "right":
-            x = width - this.actualWidth;
-            break;
-          case "center":
-            x = (width - this.actualWidth) / 2;
-            break;
-          case "justify":
-            this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1);
-        }
-        this.paragraphs.map(function (paragraph) {
+        this.actualWidth < width && !isWidthMax && ("right" === this.textAlign || "end" === this.textAlign ? x = width - this.actualWidth : "center" === this.textAlign ? x = (width - this.actualWidth) / 2 : "justify" === this.textAlign && (this.paragraphs.length < 2 ? x = (width - this.actualWidth) / 2 : spacing = (width - this.actualWidth) / (this.paragraphs.length - 1))), this.paragraphs.map(function (paragraph) {
           paragraph instanceof RichTextIcon ? (paragraph["_" + directionKey.x] = x, x += paragraph[directionKey.width] + spacing, paragraph["_" + directionKey.y] = "top" === paragraph.attribute.textBaseline ? 0 : "bottom" === paragraph.attribute.textBaseline ? maxHeight - paragraph.height : (maxHeight - paragraph.height) / 2) : (paragraph[directionKey.left] = x, x += paragraph[directionKey.width] + spacing);
         });
       }
@@ -16554,7 +16532,7 @@
           }
         } else {
           var richTextConfig = textConfig[i];
-          if (isNumber$2(richTextConfig.text) && (richTextConfig.text = "".concat(richTextConfig.text)), richTextConfig.text.includes("\n")) {
+          if (isNumber$1(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));
@@ -16883,7 +16861,7 @@
           innerRadius = _this$attribute2$inne === void 0 ? arcTheme.innerRadius : _this$attribute2$inne;
         if (0 === cornerRadius || "0%" === cornerRadius) return 0;
         var deltaRadius = Math.abs(outerRadius - innerRadius);
-        return Math.min(isNumber$2(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
+        return Math.min(isNumber$1(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
       }
     }, {
       key: "getParsedAngle",
@@ -19134,7 +19112,7 @@
   var halfPi = pi / 2;
   function createRectPath(path, x, y, width, height, rectCornerRadius) {
     var cornerRadius;
-    if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$2(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
+    if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$1(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
       var cornerRadiusArr = rectCornerRadius;
       var cr0, cr1;
       switch (cornerRadiusArr.length) {
@@ -19257,7 +19235,7 @@
       y = bounds.y1,
       width = bounds.width(),
       height = bounds.height();
-    return isNumber$2(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
+    return isNumber$1(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
       x: x,
       y: y,
       width: width,
@@ -22219,20 +22197,26 @@
           width = drawContext.width,
           height = drawContext.height;
         if (!context) return;
+        if (drawContext.keepMatrix) {
+          if (context.nativeContext && context.nativeContext.getTransform) {
+            var t = context.nativeContext.getTransform();
+            context.setTransformFromMatrix(t, !0, 1);
+          }
+        } else context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
         var dirtyBounds = this.dirtyBounds.setValue(0, 0, width, height);
         if (stage.dirtyBounds && !stage.dirtyBounds.empty()) {
           var b = getRectIntersect(dirtyBounds, stage.dirtyBounds, !1);
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         var d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds);
         var drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
         context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(function (group) {
           group.isContainer ? _this2.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : _this2.renderItem(group, drawContext);
-        }), context.restore(), context.restore(), context.draw(), context.inuse = !1;
+        }), context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1);
       }
     }, {
       key: "doRegister",
@@ -22695,7 +22679,7 @@
       value: function draw(renderService, drawContext) {
         return __awaiter$1(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
           var _this2 = this;
-          var skipDraw, context, _drawContext$x, x, _drawContext$y, y;
+          var skipDraw, context, _drawContext$x, x, _drawContext$y, y, t;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -22718,14 +22702,22 @@
               case 8:
                 this.currentRenderService = renderService;
                 context = drawContext.context, _drawContext$x = drawContext.x, x = _drawContext$x === void 0 ? 0 : _drawContext$x, _drawContext$y = drawContext.y, y = _drawContext$y === void 0 ? 0 : _drawContext$y;
-                context && (context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
-                  var _a, _b;
-                  return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
-                }).forEach(function (group) {
-                  _this2.renderGroup(group, drawContext);
-                }), this.hooks.completeDraw.tap("top-draw", function () {
-                  context.restore(), context.restore(), context.draw(), context.inuse = !1, _this2.rendering = !1;
-                }));
+                if (context) {
+                  if (drawContext.keepMatrix) {
+                    if (context.nativeContext && context.nativeContext.getTransform) {
+                      t = context.nativeContext.getTransform();
+                      context.setTransformFromMatrix(t, !0, 1);
+                    }
+                  } else context.inuse = !0, context.clearMatrix();
+                  context.setTransformForCurrent(!0), context.save(), drawContext.restartIncremental && this.clearScreen(this.currentRenderService, context, drawContext), context.translate(x, y, !0), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
+                    var _a, _b;
+                    return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
+                  }).forEach(function (group) {
+                    _this2.renderGroup(group, drawContext);
+                  }), this.hooks.completeDraw.tap("top-draw", function () {
+                    context.restore(), context.restore(), context.draw(), drawContext.keepMatrix || (context.inuse = !1), _this2.rendering = !1;
+                  });
+                }
               case 11:
               case "end":
                 return _context.stop();
@@ -23299,13 +23291,23 @@
       this.name = "FlexLayoutPlugin", this.activeEvent = "onRegister", this.id = Generator.GenAutoIncrementId(), this.key = this.name + this.id, this.tempBounds = new AABBBounds();
     }
     _createClass(FlexLayoutPlugin, [{
+      key: "pauseLayout",
+      value: function pauseLayout(p) {
+        this.pause = p;
+      }
+    }, {
+      key: "tryLayoutChildren",
+      value: function tryLayoutChildren(graphic) {
+        graphic.firstChild && this.tryLayout(graphic.firstChild);
+      }
+    }, {
       key: "tryLayout",
       value: function tryLayout(graphic) {
         var _this = this;
-        if (this.layouting) return;
-        this.layouting = !0;
+        var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+        if (this.pause) return;
         var p = graphic.parent;
-        if (!p || !graphic.needUpdateLayout()) return;
+        if (!(force || p && graphic.needUpdateLayout())) return;
         var theme = getTheme(p).group,
           _p$attribute$display = p.attribute.display,
           display = _p$attribute$display === void 0 ? theme.display : _p$attribute$display;
@@ -23315,24 +23317,29 @@
           flexDirection = _p$attribute$flexDire === void 0 ? theme.flexDirection : _p$attribute$flexDire,
           _p$attribute$flexWrap = _p$attribute.flexWrap,
           flexWrap = _p$attribute$flexWrap === void 0 ? theme.flexWrap : _p$attribute$flexWrap,
-          _p$attribute$justifyC = _p$attribute.justifyContent,
-          justifyContent = _p$attribute$justifyC === void 0 ? theme.justifyContent : _p$attribute$justifyC,
           _p$attribute$alignIte = _p$attribute.alignItems,
           alignItems = _p$attribute$alignIte === void 0 ? theme.alignItems : _p$attribute$alignIte,
-          _p$attribute$alignCon = _p$attribute.alignContent,
-          alignContent = _p$attribute$alignCon === void 0 ? theme.alignContent : _p$attribute$alignCon,
           _p$attribute$clip = _p$attribute.clip,
-          clip = _p$attribute$clip === void 0 ? theme.clip : _p$attribute$clip;
-        var childrenWidth = 0,
-          childrenHeight = 0,
-          boundsLegal = 0;
-        if (p.forEachChildren(function (child) {
-          var bounds = child.AABBBounds;
-          "column" === flexDirection || "column-reverse" === flexDirection ? (childrenHeight += bounds.height(), childrenWidth = Math.max(childrenWidth, bounds.width())) : (childrenWidth += bounds.width(), childrenHeight = Math.max(childrenHeight, bounds.height())), boundsLegal += bounds.x1, boundsLegal += bounds.y1, boundsLegal += bounds.x2, boundsLegal += bounds.y2;
-        }), !isFinite(boundsLegal)) return;
-        var width = p.attribute.width || childrenWidth,
-          height = p.attribute.height || childrenHeight;
-        p.attribute.width || (p.attribute.width = 0), p.attribute.height || (p.attribute.height = 0), this.tempBounds.copy(p._AABBBounds);
+          clip = _p$attribute$clip === void 0 ? theme.clip : _p$attribute$clip,
+          _p$attribute$alignCon = p.attribute.alignContent,
+          alignContent = _p$attribute$alignCon === void 0 ? null != alignItems ? alignItems : theme.alignContent : _p$attribute$alignCon;
+        var _p$attribute2 = p.attribute,
+          width = _p$attribute2.width,
+          height = _p$attribute2.height,
+          _p$attribute2$justify = _p$attribute2.justifyContent,
+          justifyContent = _p$attribute2$justify === void 0 ? theme.justifyContent : _p$attribute2$justify;
+        var children = p.getChildren();
+        if (null == width || null == height) {
+          var childrenWidth = 0,
+            childrenHeight = 0,
+            boundsLegal = 0;
+          if (children.forEach(function (child) {
+            var bounds = _this.getAABBBounds(child);
+            bounds.empty() || ("column" === flexDirection || "column-reverse" === flexDirection ? (childrenHeight += bounds.height(), childrenWidth = Math.max(childrenWidth, bounds.width())) : (childrenWidth += bounds.width(), childrenHeight = Math.max(childrenHeight, bounds.height())), boundsLegal += bounds.x1, boundsLegal += bounds.y1, boundsLegal += bounds.x2, boundsLegal += bounds.y2);
+          }), !isFinite(boundsLegal)) return;
+          width = childrenWidth, height = childrenHeight;
+        }
+        p.attribute.width = width, p.attribute.height = height, this.tempBounds.copy(p._AABBBounds);
         var result = {
             main: {
               len: width,
@@ -23341,18 +23348,18 @@
             cross: {
               len: height,
               field: "y"
-            },
-            dir: 1
+            }
           },
           main = result.main,
           cross = result.cross;
-        "row-reverse" === flexDirection ? result.dir = -1 : "column" === flexDirection ? (main.len = height, cross.len = width, main.field = "y", cross.field = "x") : "column-reverse" === flexDirection && (main.len = height, cross.len = width, main.field = "y", cross.field = "x", result.dir = -1);
+        "column" !== flexDirection && "column-reverse" !== flexDirection || (main.len = height, cross.len = width, main.field = "y", cross.field = "x"), "row-reverse" !== flexDirection && "column-reverse" !== flexDirection || ("flex-start" === justifyContent ? justifyContent = "flex-end" : "flex-end" === justifyContent ? justifyContent = "flex-start" : children.reverse());
         var mainLen = 0,
           crossLen = 0;
         var mianLenArray = [];
-        p.forEachChildren(function (c) {
-          var b = c.AABBBounds,
-            ml = "x" === main.field ? b.width() : b.height(),
+        children.forEach(function (c) {
+          var b = _this.getAABBBounds(c);
+          if (b.empty()) return;
+          var ml = "x" === main.field ? b.width() : b.height(),
             cl = "x" === cross.field ? b.width() : b.height();
           mianLenArray.push({
             mainLen: ml,
@@ -23385,104 +23392,171 @@
           mainLen: mainLen,
           crossLen: crossLen
         });
-        var children = p.getChildren();
         var lastIdx = 0;
         if (mainList.forEach(function (s) {
           _this.layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, s), lastIdx = s.idx + 1;
         }), crossLen = mainList.reduce(function (a, b) {
           return a + b.crossLen;
         }, 0), 1 === mainList.length) {
-          if ("flex-end" === alignItems) {
-            var anchorPos = cross.len;
-            this.layoutCross(children, alignItems, cross, anchorPos, mianLenArray, mainList[0], 0);
-          } else if ("center" === alignItems) {
-            var _anchorPos = cross.len / 2;
-            this.layoutCross(children, alignItems, cross, _anchorPos, mianLenArray, mainList[0], 0);
-          } else children.forEach(function (child) {
-            child.attribute[cross.field] = getPadding(child, cross.field);
-          });
+          var anchorPosMap = {
+            "flex-start": 0,
+            "flex-end": cross.len,
+            center: cross.len / 2
+          };
+          this.layoutCross(children, alignItems, cross, anchorPosMap, mianLenArray, mainList[0], 0);
         } else if ("flex-start" === alignContent) {
           lastIdx = 0;
-          var _anchorPos2 = 0;
+          var anchorPos = 0;
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "flex-start", cross, _anchorPos2, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos2 += s.crossLen;
+            var anchorPosMap = {
+              "flex-start": anchorPos,
+              "flex-end": anchorPos + s.crossLen,
+              center: anchorPos + s.crossLen / 2
+            };
+            _this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, anchorPos += s.crossLen;
           });
         } else if ("center" === alignContent) {
           lastIdx = 0;
-          var _anchorPos3 = Math.max(0, (cross.len - crossLen) / 2);
+          var _anchorPos = Math.max(0, (cross.len - crossLen) / 2);
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "center", cross, _anchorPos3 + s.crossLen / 2, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos3 += s.crossLen;
+            var anchorPosMap = {
+              "flex-start": _anchorPos,
+              "flex-end": _anchorPos + s.crossLen,
+              center: _anchorPos + s.crossLen / 2
+            };
+            _this.layoutCross(children, "center", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos += s.crossLen;
           });
         } else if ("space-around" === alignContent) {
           lastIdx = 0;
           var padding = Math.max(0, (cross.len - crossLen) / mainList.length / 2);
-          var _anchorPos4 = padding;
+          var _anchorPos2 = padding;
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "flex-start", cross, _anchorPos4, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos4 += s.crossLen + 2 * padding;
+            var anchorPosMap = {
+              "flex-start": _anchorPos2,
+              "flex-end": _anchorPos2 + s.crossLen,
+              center: _anchorPos2 + s.crossLen / 2
+            };
+            _this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos2 += s.crossLen + 2 * padding;
           });
         } else if ("space-between" === alignContent) {
           lastIdx = 0;
           var _padding = Math.max(0, (cross.len - crossLen) / (2 * mainList.length - 2));
-          var _anchorPos5 = 0;
+          var _anchorPos3 = 0;
           mainList.forEach(function (s, i) {
-            _this.layoutCross(children, "flex-start", cross, _anchorPos5, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos5 += s.crossLen + 2 * _padding;
+            var anchorPosMap = {
+              "flex-start": _anchorPos3,
+              "flex-end": _anchorPos3 + s.crossLen,
+              center: _anchorPos3 + s.crossLen / 2
+            };
+            _this.layoutCross(children, "flex-start", cross, anchorPosMap, mianLenArray, mainList[i], lastIdx), lastIdx = s.idx + 1, _anchorPos3 += s.crossLen + 2 * _padding;
           });
         }
         children.forEach(function (child, idx) {
           child.addUpdateBoundTag(), child.addUpdatePositionTag(), child.clearUpdateLayoutTag();
-        }), p.addUpdateLayoutTag(), clip || this.tempBounds.equals(p.AABBBounds) || (this.tryLayout(p), this.layouting = !1);
+        }), p.addUpdateLayoutTag();
+        var b = this.getAABBBounds(p);
+        clip || this.tempBounds.equals(b) || this.tryLayout(p, !1);
+      }
+    }, {
+      key: "getAABBBounds",
+      value: function getAABBBounds(graphic) {
+        this.skipBoundsTrigger = !0;
+        var b = graphic.AABBBounds;
+        return this.skipBoundsTrigger = !1, b;
+      }
+    }, {
+      key: "updateChildPos",
+      value: function updateChildPos(posBaseLeftTop, lastP, lastBP) {
+        return posBaseLeftTop + (null != lastP ? lastP : 0) - lastBP;
       }
     }, {
       key: "layoutMain",
       value: function layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, currSeg) {
         if ("flex-start" === justifyContent) {
           var pos = 0;
-          for (var i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen;
+          for (var i = lastIdx; i <= currSeg.idx; i++) {
+            var posBaseLeftTop = pos + getPadding(children[i], main.field),
+              b = this.getAABBBounds(children[i]);
+            !b.empty() && (children[i].attribute[main.field] = this.updateChildPos(posBaseLeftTop, children[i].attribute[main.field], b["".concat(main.field, "1")])), pos += mianLenArray[i].mainLen;
+          }
         } else if ("flex-end" === justifyContent) {
           var _pos = main.len;
-          for (var _i = lastIdx; _i <= currSeg.idx; _i++) _pos -= mianLenArray[_i].mainLen, children[_i].attribute[main.field] = _pos + getPadding(children[_i], main.field);
+          for (var _i = lastIdx; _i <= currSeg.idx; _i++) {
+            _pos -= mianLenArray[_i].mainLen;
+            var _posBaseLeftTop = _pos + getPadding(children[_i], main.field),
+              _b = this.getAABBBounds(children[_i]);
+            !_b.empty() && (children[_i].attribute[main.field] = this.updateChildPos(_posBaseLeftTop, children[_i].attribute[main.field], _b["".concat(main.field, "1")]));
+          }
         } else if ("space-around" === justifyContent) {
           if (currSeg.mainLen >= main.len) {
             var _pos2 = 0;
-            for (var _i2 = lastIdx; _i2 <= currSeg.idx; _i2++) children[_i2].attribute[main.field] = _pos2 + getPadding(children[_i2], main.field), _pos2 += mianLenArray[_i2].mainLen;
+            for (var _i2 = lastIdx; _i2 <= currSeg.idx; _i2++) {
+              var _posBaseLeftTop2 = _pos2 + getPadding(children[_i2], main.field),
+                _b2 = this.getAABBBounds(children[_i2]);
+              !_b2.empty() && (children[_i2].attribute[main.field] = this.updateChildPos(_posBaseLeftTop2, children[_i2].attribute[main.field], _b2["".concat(main.field, "1")])), _pos2 += mianLenArray[_i2].mainLen;
+            }
           } else {
             var size = currSeg.idx - lastIdx + 1,
               padding = (main.len - currSeg.mainLen) / size / 2;
             var _pos3 = padding;
-            for (var _i3 = lastIdx; _i3 <= currSeg.idx; _i3++) children[_i3].attribute[main.field] = _pos3 + getPadding(children[_i3], main.field), _pos3 += mianLenArray[_i3].mainLen + 2 * padding;
+            for (var _i3 = lastIdx; _i3 <= currSeg.idx; _i3++) {
+              var _posBaseLeftTop3 = _pos3 + getPadding(children[_i3], main.field),
+                _b3 = this.getAABBBounds(children[_i3]);
+              !_b3.empty() && (children[_i3].attribute[main.field] = this.updateChildPos(_posBaseLeftTop3, children[_i3].attribute[main.field], _b3["".concat(main.field, "1")])), _pos3 += mianLenArray[_i3].mainLen + 2 * padding;
+            }
           }
         } else if ("space-between" === justifyContent) {
           if (currSeg.mainLen >= main.len) {
             var _pos4 = 0;
-            for (var _i4 = lastIdx; _i4 <= currSeg.idx; _i4++) children[_i4].attribute[main.field] = _pos4 + getPadding(children[_i4], main.field), _pos4 += mianLenArray[_i4].mainLen;
+            for (var _i4 = lastIdx; _i4 <= currSeg.idx; _i4++) {
+              var _posBaseLeftTop4 = _pos4 + getPadding(children[_i4], main.field),
+                _b4 = this.getAABBBounds(children[_i4]);
+              !_b4.empty() && (children[_i4].attribute[main.field] = this.updateChildPos(_posBaseLeftTop4, children[_i4].attribute[main.field], _b4["".concat(main.field, "1")])), _pos4 += mianLenArray[_i4].mainLen;
+            }
           } else {
             var _size = currSeg.idx - lastIdx + 1,
               _padding2 = (main.len - currSeg.mainLen) / (2 * _size - 2);
             var _pos5 = 0;
-            for (var _i5 = lastIdx; _i5 <= currSeg.idx; _i5++) children[_i5].attribute[main.field] = _pos5 + getPadding(children[_i5], main.field), _pos5 += mianLenArray[_i5].mainLen + 2 * _padding2;
+            for (var _i5 = lastIdx; _i5 <= currSeg.idx; _i5++) {
+              var _posBaseLeftTop5 = _pos5 + getPadding(children[_i5], main.field),
+                _b5 = this.getAABBBounds(children[_i5]);
+              !_b5.empty() && (children[_i5].attribute[main.field] = this.updateChildPos(_posBaseLeftTop5, children[_i5].attribute[main.field], _b5["".concat(main.field, "1")])), _pos5 += mianLenArray[_i5].mainLen + 2 * _padding2;
+            }
           }
         } else if ("center" === justifyContent) {
           var _pos6 = (main.len - currSeg.mainLen) / 2;
-          for (var _i6 = lastIdx; _i6 <= currSeg.idx; _i6++) children[_i6].attribute[main.field] = _pos6 + getPadding(children[_i6], main.field), _pos6 += mianLenArray[_i6].mainLen;
+          for (var _i6 = lastIdx; _i6 <= currSeg.idx; _i6++) {
+            var _posBaseLeftTop6 = _pos6 + getPadding(children[_i6], main.field),
+              _b6 = this.getAABBBounds(children[_i6]);
+            !_b6.empty() && (children[_i6].attribute[main.field] = this.updateChildPos(_posBaseLeftTop6, children[_i6].attribute[main.field], _b6["".concat(main.field, "1")])), _pos6 += mianLenArray[_i6].mainLen;
+          }
         }
       }
     }, {
       key: "layoutCross",
-      value: function layoutCross(children, alignItem, cross, anchorPos, lenArray, currSeg, lastIdx) {
-        if ("flex-end" === alignItem) for (var i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[cross.field] = anchorPos - lenArray[i].crossLen + getPadding(children[i], cross.field);else if ("center" === alignItem) for (var _i7 = lastIdx; _i7 <= currSeg.idx; _i7++) children[_i7].attribute[cross.field] = anchorPos - lenArray[_i7].crossLen / 2 + getPadding(children[_i7], cross.field);else for (var _i8 = lastIdx; _i8 <= currSeg.idx; _i8++) children[_i8].attribute[cross.field] = anchorPos + getPadding(children[_i8], cross.field);
+      value: function layoutCross(children, alignItem, cross, anchorPosMap, lenArray, currSeg, lastIdx) {
+        var _a;
+        for (var i = lastIdx; i <= currSeg.idx; i++) {
+          var child = children[i];
+          var alignSelf = child.attribute.alignSelf;
+          alignSelf && "auto" !== alignSelf || (alignSelf = alignItem);
+          var b = this.getAABBBounds(child),
+            anchorPos = null !== (_a = anchorPosMap[alignSelf]) && void 0 !== _a ? _a : anchorPosMap["flex-start"];
+          "flex-end" === alignSelf ? !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos - lenArray[i].crossLen + getPadding(child, cross.field), child.attribute[cross.field], b["".concat(cross.field, "1")])) : "center" === alignSelf ? !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos - lenArray[i].crossLen / 2 + getPadding(child, cross.field), child.attribute[cross.field], b["".concat(cross.field, "1")])) : !b.empty() && (child.attribute[cross.field] = this.updateChildPos(anchorPos + getPadding(child, cross.field), child.attribute[cross.field], b["".concat(cross.field, "1")]));
+        }
       }
     }, {
       key: "activate",
       value: function activate(context) {
         var _this2 = this;
         this.pluginService = context, application.graphicService.hooks.onAttributeUpdate.tap(this.key, function (graphic) {
-          graphic.glyphHost && (graphic = graphic.glyphHost), _this2.tryLayout(graphic), _this2.layouting = !1;
+          graphic.glyphHost && (graphic = graphic.glyphHost), graphic.stage && graphic.stage === _this2.pluginService.stage && _this2.tryLayout(graphic, !1);
         }), application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, function (graphic, stage, willUpdate, bounds) {
-          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === _this2.pluginService.stage && graphic.isContainer && _tempBounds.copy(bounds);
+          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === _this2.pluginService.stage && graphic.isContainer && !_this2.skipBoundsTrigger && _tempBounds.copy(bounds);
         }), application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, function (graphic, stage, bounds, params, selfChange) {
-          stage && stage === _this2.pluginService.stage && graphic.isContainer && (_tempBounds.equals(bounds) || (_this2.tryLayout(graphic), _this2.layouting = !1));
+          stage && stage === _this2.pluginService.stage && graphic.isContainer && !_this2.skipBoundsTrigger && (_tempBounds.equals(bounds) || _this2.tryLayout(graphic, !1));
         }), application.graphicService.hooks.onSetStage.tap(this.key, function (graphic) {
-          graphic.glyphHost && (graphic = graphic.glyphHost), _this2.tryLayout(graphic), _this2.layouting = !1;
+          graphic.glyphHost && (graphic = graphic.glyphHost), _this2.tryLayout(graphic, !1);
         });
       }
     }, {
@@ -23491,6 +23565,10 @@
         var _this3 = this;
         application.graphicService.hooks.onAttributeUpdate.taps = application.graphicService.hooks.onAttributeUpdate.taps.filter(function (item) {
           return item.name !== _this3.key;
+        }), application.graphicService.hooks.beforeUpdateAABBBounds.taps = application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(function (item) {
+          return item.name !== _this3.key;
+        }), application.graphicService.hooks.afterUpdateAABBBounds.taps = application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(function (item) {
+          return item.name !== _this3.key;
         }), application.graphicService.hooks.onSetStage.taps = application.graphicService.hooks.onSetStage.taps.filter(function (item) {
           return item.name !== _this3.key;
         });
@@ -23499,11 +23577,7 @@
     return FlexLayoutPlugin;
   }();
   function getPadding(graphic, field) {
-    if (!graphic.attribute.boundsPadding) return 0;
-    if (isNumber(graphic.attribute.boundsPadding)) return graphic.attribute.boundsPadding;
-    if (isArray$1(graphic.attribute.boundsPadding) && 1 === graphic.attribute.boundsPadding.length) return graphic.attribute.boundsPadding[0];
-    var paddingArray = parsePadding(graphic.attribute.boundsPadding);
-    return "x" === field ? paddingArray[3] : "y" === field ? paddingArray[0] : 0;
+    return 0;
   }
 
   var defaultTicker = new DefaultTicker();
@@ -24027,6 +24101,11 @@
           _this7.pluginService.unRegister(plugin);
         }));
       }
+    }, {
+      key: "getPluginsByName",
+      value: function getPluginsByName(name) {
+        return this.pluginService.findPluginsByName(name);
+      }
     }, {
       key: "tryUpdateAABBBounds",
       value: function tryUpdateAABBBounds() {
@@ -24077,7 +24156,7 @@
       value: function render(layers, params) {
         this.ticker.start(), this.timeline.resume();
         var state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this.renderLayerList(this.children, params), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
     }, {
       key: "combineLayersToWindow",
@@ -24114,7 +24193,8 @@
             background: layer === _this10.defaultLayer ? _this10.background : void 0,
             updateBounds: !(!_this10.dirtyBounds || _this10.dirtyBounds.empty())
           }, Object.assign({
-            renderStyle: _this10.renderStyle
+            renderStyle: _this10.renderStyle,
+            keepMatrix: _this10.params.renderKeepMatrix
           }, params)));
         }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
           renderService: this.renderService,
@@ -25016,11 +25096,17 @@
           if (!params.bounds.contains(point.x, point.y)) return result;
           offsetX = params.bounds.x1, offsetY = params.bounds.y1;
         }
-        this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
+        if (this.pickContext) if (params.keepMatrix) {
+          if (this.pickContext.nativeContext && this.pickContext.nativeContext.getTransform) {
+            var t = this.pickContext.nativeContext.getTransform();
+            this.pickContext.setTransformFromMatrix(t, !0, 1);
+          }
+        } else this.pickContext.inuse = !0, this.pickContext.clearMatrix(!0, 1);
+        params.pickContext = this.pickContext;
         var parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
         var group;
         for (var i = graphics.length - 1; i >= 0 && (result = graphics[i].isContainer ? this.pickGroup(graphics[i], point, parentMatrix, params) : this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
-        if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
+        if (result.graphic || (result.group = group), this.pickContext && !params.keepMatrix && (this.pickContext.inuse = !1), result.graphic) {
           var g = result.graphic;
           for (; g.parent;) g = g.parent;
           g.shadowHost && (result.params = {
@@ -28929,9 +29015,9 @@
     }
     children.length && flatten(1 === children.length ? children[0] : children, childrenList);
     var g = "Group" === c.name ? new c(attribute) : c(config);
-    return parseToGraphic(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
+    return parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
   }
-  function parseToGraphic(g, childrenList, props) {
+  function parseToGraphic$1(g, childrenList, props) {
     var out,
       isGraphic = !1;
     switch (g.type) {
@@ -28957,6 +29043,47 @@
   }
   var Fragment = Group;
 
+  function decodeReactDom(dom) {
+    if (!dom || !dom.$$typeof) return dom;
+    var type = dom.type,
+      _dom$props = dom.props,
+      attribute = _dom$props.attribute,
+      children = _dom$props.children,
+      stateProxy = _dom$props.stateProxy,
+      g = type({
+        attribute: attribute
+      }),
+      out = parseToGraphic(g, dom.props, children);
+    return out || (stateProxy && (g.stateProxy = stateProxy), g.id = attribute.id, g.name = attribute.name, isArray$1(children) ? children.forEach(function (item) {
+      var c = decodeReactDom(item);
+      c && c.type && g.add(c);
+    }) : children && g.add(decodeReactDom(children)), g);
+  }
+  function parseToGraphic(g, props, childrenList) {
+    var out,
+      isGraphic = !1;
+    switch (g.type) {
+      case "richtext":
+        break;
+      case "rich/text":
+        out = g.attribute || {}, childrenList && (out.text = childrenList), g.attribute = out;
+        break;
+      case "rich/image":
+        out = g.attribute || {};
+        break;
+      default:
+        isGraphic = !0;
+    }
+    return isGraphic ? Object.keys(props).forEach(function (k) {
+      var en = REACT_TO_CANOPUS_EVENTS[k];
+      en && g.on(en, props[k]);
+    }) : "richtext" === g.type && (g.attribute.textConfig = childrenList.map(function (item) {
+      return decodeReactDom(item);
+    }).filter(function (item) {
+      return item;
+    })), out;
+  }
+
   var DragNDrop = /*#__PURE__*/function () {
     function DragNDrop(rootNode) {
       var _this = this;
@@ -33408,7 +33535,7 @@
           x += _point.x, y += _point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
         var picked = !0;
-        if (!onlyTranslate || rect.shadowRoot || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
+        if (!onlyTranslate || rect.shadowRoot || isNumber$1(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
           return 0 !== num;
         })) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, function (context, rectAttribute, themeAttribute) {
           return !!picked || (picked = context.isPointInPath(point.x, point.y), picked);
@@ -33486,7 +33613,7 @@
           x += _point.x, y += _point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
         var picked = !0;
-        if (!onlyTranslate || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
+        if (!onlyTranslate || isNumber$1(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(function (num) {
           return 0 !== num;
         })) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, function (context, rectAttribute, themeAttribute) {
           return !!picked || (picked = context.isPointInPath(point.x, point.y), picked);
@@ -34853,7 +34980,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.17.19";
+  const version = "0.17.20-alpha.1";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);
@@ -35183,6 +35310,7 @@
   exports.cubicLength = cubicLength;
   exports.cubicPointAt = cubicPointAt;
   exports.cubicSubdivide = cubicSubdivide;
+  exports.decodeReactDom = decodeReactDom;
   exports.defaultArcAllocate = defaultArcAllocate;
   exports.defaultArcBackgroundRenderContribution = defaultArcBackgroundRenderContribution;
   exports.defaultArcRenderContribution = defaultArcRenderContribution;