@visactor/vrender 0.19.0-alpha.0 → 0.19.0

package/dist/index.js

@@ -1723,6 +1723,11 @@
       value: function createDom(params) {
         return this._env || this.setEnv("browser"), this.envContribution.createDom(params);
       }
+    }, {
+      key: "updateDom",
+      value: function updateDom(dom, params) {
+        return this._env || this.setEnv("browser"), this.envContribution.updateDom(dom, params);
+      }
     }, {
       key: "getElementTop",
       value: function getElementTop(dom) {
@@ -3512,6 +3517,52 @@
   }();
   TextMeasure.ALPHABET_CHAR_SET = "abcdefghijklmnopqrstuvwxyz", TextMeasure.NUMBERS_CHAR_SET = "0123456789", TextMeasure.FULL_SIZE_CHAR = "字";
 
+  var calculateAnchorOfBounds = function calculateAnchorOfBounds(bounds, anchorType) {
+    var x1 = bounds.x1,
+      x2 = bounds.x2,
+      y1 = bounds.y1,
+      y2 = bounds.y2,
+      rectWidth = Math.abs(x2 - x1),
+      rectHeight = Math.abs(y2 - y1);
+    var anchorX = (x1 + x2) / 2,
+      anchorY = (y1 + y2) / 2,
+      sx = 0,
+      sy = 0;
+    switch (anchorType) {
+      case "top":
+      case "inside-top":
+        sy = -.5;
+        break;
+      case "bottom":
+      case "inside-bottom":
+        sy = .5;
+        break;
+      case "left":
+      case "inside-left":
+        sx = -.5;
+        break;
+      case "right":
+      case "inside-right":
+        sx = .5;
+        break;
+      case "top-right":
+        sx = .5, sy = -.5;
+        break;
+      case "top-left":
+        sx = -.5, sy = -.5;
+        break;
+      case "bottom-right":
+        sx = .5, sy = .5;
+        break;
+      case "bottom-left":
+        sx = -.5, sy = .5;
+    }
+    return anchorX += sx * rectWidth, anchorY += sy * rectHeight, {
+      x: anchorX,
+      y: anchorY
+    };
+  };
+
   var hasConsole = "undefined" != typeof console;
   function log(method, level, input) {
     var args = [level].concat([].slice.call(input));
@@ -3635,6 +3686,24 @@
   }();
   Logger._instance = null;
 
+  var styleStringToObject = function styleStringToObject() {
+    var styleStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+    var res = {};
+    return styleStr.split(";").forEach(function (item) {
+      if (item) {
+        var arr = item.split(":");
+        if (2 === arr.length) {
+          var key = arr[0].trim(),
+            value = arr[1].trim();
+          key && value && (res[key] = value);
+        }
+      }
+    }), res;
+  };
+  var lowerCamelCaseToMiddle = function lowerCamelCaseToMiddle(str) {
+    return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+  };
+
   var circleThreshold = tau - 1e-8;
   var BoundsContext = /*#__PURE__*/function () {
     function BoundsContext(bounds) {
@@ -5100,6 +5169,8 @@
     pickStrokeBuffer: 0
   };
   var DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
+    forceBoundsWidth: void 0,
+    forceBoundsHeight: void 0,
     opacity: 1,
     background: null,
     backgroundOpacity: 1,
@@ -5126,6 +5197,7 @@
   };
   var DefaultAttribute = Object.assign(Object.assign(Object.assign({
     strokeSeg: null,
+    renderable: !0,
     pickable: !0,
     childrenPickable: !0,
     fillPickable: !0,
@@ -5252,6 +5324,7 @@
     textBaseline: "top",
     layoutDirection: "horizontal",
     textConfig: [],
+    forceBreakLine: !1,
     maxHeight: void 0,
     maxWidth: void 0,
     singleLine: !1
@@ -5328,7 +5401,11 @@
   function applyFillStyle(ctx, character) {
     var fillStyle = character && character.fill || defaultFormatting.fill;
     if (!fillStyle) return void (ctx.globalAlpha = 0);
-    ctx.globalAlpha = 1, ctx.fillStyle = fillStyle;
+    var _character$fillOpacit = character.fillOpacity,
+      fillOpacity = _character$fillOpacit === void 0 ? 1 : _character$fillOpacit,
+      _character$opacity = character.opacity,
+      opacity = _character$opacity === void 0 ? 1 : _character$opacity;
+    ctx.globalAlpha = fillOpacity * opacity, ctx.fillStyle = fillStyle;
     var fontSize = character.fontSize || 16;
     switch (character.script) {
       case "super":
@@ -5347,7 +5424,11 @@
   function applyStrokeStyle(ctx, character) {
     var strokeStyle = character && character.stroke || defaultFormatting.stroke;
     if (!strokeStyle) return void (ctx.globalAlpha = 0);
-    ctx.globalAlpha = 1, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle;
+    var _character$strokeOpac = character.strokeOpacity,
+      strokeOpacity = _character$strokeOpac === void 0 ? 1 : _character$strokeOpac,
+      _character$opacity2 = character.opacity,
+      opacity = _character$opacity2 === void 0 ? 1 : _character$opacity2;
+    ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle;
     var fontSize = character.fontSize || 16;
     switch (character.script) {
       case "super":
@@ -5679,13 +5760,14 @@
     }, {
       key: "clipTextWithSuffix",
       value: function clipTextWithSuffix(text, options, width, suffix, wordBreak, position) {
+        var forceSuffix = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !1;
         if ("" === suffix) return this.clipText(text, options, width, wordBreak);
         if (0 === text.length) return {
           str: "",
           width: 0
         };
         var length = this.measureTextWidth(text, options);
-        if (length <= width) return {
+        if (!forceSuffix && length <= width) return {
           str: text,
           width: length
         };
@@ -5694,12 +5776,16 @@
           str: "",
           width: 0
         };
+        if (forceSuffix && length + suffixWidth <= width) return {
+          str: text + suffix,
+          width: length + suffixWidth
+        };
         width -= suffixWidth;
         var data = this._clipText(text, options, width, 0, text.length - 1, position, suffix);
         if (wordBreak && data.str !== text) {
           var index = testLetter(text, data.str.length);
-          index !== data.str.length && (data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
-        }
+          index !== data.str.length && (data.result = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
+        } else forceSuffix && data.str === text && (data.result = text + suffix);
         return data.str = data.result, data.width += suffixWidth, data;
       }
     }]);
@@ -6585,7 +6671,6 @@
       symbol: DefaultSymbolAttribute,
       text: DefaultTextAttribute,
       rect: DefaultRectAttribute,
-      rect3d: DefaultRect3dAttribute,
       polygon: DefaultPolygonAttribute,
       richtext: DefaultRichTextAttribute,
       richtextIcon: DefaultRichTextIconAttribute,
@@ -6604,7 +6689,6 @@
       symbol: Object.assign({}, defaultThemeObj.symbol),
       text: Object.assign({}, defaultThemeObj.text),
       rect: Object.assign({}, defaultThemeObj.rect),
-      rect3d: Object.assign({}, defaultThemeObj.rect3d),
       polygon: Object.assign({}, defaultThemeObj.polygon),
       richtext: Object.assign({}, defaultThemeObj.richtext),
       richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),
@@ -7532,7 +7616,12 @@
           for (; overTargetAncestor && overTargetAncestor !== _this.rootTarget.parent && overTargetAncestor !== e.target;) overTargetAncestor = overTargetAncestor.parent;
           if (!overTargetAncestor || overTargetAncestor === _this.rootTarget.parent) {
             var enterEvent = _this.clonePointerEvent(e, "pointerenter");
-            for (enterEvent.eventPhase = enterEvent.AT_TARGET; enterEvent.target && enterEvent.target !== outTarget && enterEvent.target !== _this.rootTarget.parent;) enterEvent.currentTarget = enterEvent.target, _this.notifyTarget(enterEvent), isMouse && _this.notifyTarget(enterEvent, "mouseenter"), enterEvent.target = enterEvent.target.parent;
+            enterEvent.eventPhase = enterEvent.AT_TARGET;
+            var currentTarget = enterEvent.target;
+            var outTargetAncestors = new Set();
+            var ancestor = outTarget;
+            for (; ancestor && ancestor !== _this.rootTarget;) outTargetAncestors.add(ancestor), ancestor = ancestor.parent;
+            for (; currentTarget && currentTarget !== outTarget && currentTarget !== _this.rootTarget.parent;) outTargetAncestors.has(currentTarget) || (enterEvent.currentTarget = currentTarget, _this.notifyTarget(enterEvent), isMouse && _this.notifyTarget(enterEvent, "mouseenter")), currentTarget = currentTarget.parent;
             _this.freeEvent(enterEvent);
           }
           _this.freeEvent(overEvent);
@@ -7776,8 +7865,6 @@
   }();
 
   var EventTarget = {
-    pickable: !0,
-    visible: !0,
     dispatchEvent: function dispatchEvent(e) {
       var _a;
       if (!(e instanceof FederatedEvent)) throw new Error("DisplayObject cannot propagate events outside of the Federated Events API");
@@ -11813,19 +11900,17 @@
         var _a, _b, _c, _d;
         if (hasAnimation) {
           var keys = Object.keys(attrs),
-            noWorkAAttr = this.getNoWorkAnimateAttr(),
+            noWorkAttrs = this.getNoWorkAnimateAttr(),
             animateAttrs = {};
           var noAnimateAttrs;
-          isClear ? keys.forEach(function (key) {
-            noWorkAAttr[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = void 0 === attrs[key] ? _this3.getDefaultAttribute(key) : attrs[key];
-          }) : keys.forEach(function (key) {
-            noWorkAAttr[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = attrs[key];
+          keys.forEach(function (key) {
+            noWorkAttrs[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = isClear && void 0 === attrs[key] ? _this3.getDefaultAttribute(key) : attrs[key];
           });
           var animate = this.animate();
           animate.stateNames = stateNames, animate.to(animateAttrs, null !== (_b = null === (_a = this.stateAnimateConfig) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : DefaultStateAnimateConfig.duration, null !== (_d = null === (_c = this.stateAnimateConfig) || void 0 === _c ? void 0 : _c.easing) && void 0 !== _d ? _d : DefaultStateAnimateConfig.easing), noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
             type: exports.AttributeUpdateType.STATE
           });
-        } else this.setAttributes(attrs, !1, {
+        } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
           type: exports.AttributeUpdateType.STATE
         });
       }
@@ -11842,6 +11927,14 @@
           newNormalAttrs[key] = _this4.getNormalAttribute(key);
         }), this.normalAttrs = newNormalAttrs;
       }
+    }, {
+      key: "stopStateAnimates",
+      value: function stopStateAnimates() {
+        var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "end";
+        this.animates && this.animates.forEach(function (animate) {
+          animate.stateNames && animate.stop(type);
+        });
+      }
     }, {
       key: "getNormalAttribute",
       value: function getNormalAttribute(key) {
@@ -13222,7 +13315,7 @@
   }
   function drawPathProxy(graphic, context, x, y, drawContext, params, fillCb, strokeCb) {
     if (!graphic.pathProxy) return !1;
-    var themeAttributes = getTheme(graphic, null == params ? void 0 : params.theme)[graphic.type],
+    var themeAttributes = getTheme(graphic, null == params ? void 0 : params.theme)[graphic.type.replace("3d", "")],
       _graphic$attribute = graphic.attribute,
       _graphic$attribute$fi = _graphic$attribute.fill,
       fill = _graphic$attribute$fi === void 0 ? themeAttributes.fill : _graphic$attribute$fi,
@@ -13644,6 +13737,15 @@
     var buf = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
     return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
   }
+  function textAttributesToStyle(attrs) {
+    var style = {};
+    return ["textAlign", "fontFamily", "fontVariant", "fontStyle", "fontWeight"].forEach(function (key) {
+      attrs[key] && (style[lowerCamelCaseToMiddle(key)] = attrs[key]);
+    }), ["fontSize", "lineHeight"].forEach(function (key) {
+      var styleKey = lowerCamelCaseToMiddle(key);
+      isNil$1(attrs[key]) || (style[styleKey] = /^[0-9]*$/.test("".concat(attrs[key])) ? "".concat(attrs[key], "px") : "".concat(attrs[key]));
+    }), attrs.underline ? style["text-decoration"] = "underline" : attrs.lineThrough && (style["text-decoration"] = "line-through"), attrs.fill && isString$1(attrs.fill) && (style.color = attrs.fill), style;
+  }
 
   var CanvasTextLayout = /*#__PURE__*/function () {
     function CanvasTextLayout(fontFamily, options, textMeasure) {
@@ -13889,7 +13991,7 @@
             var str = lines[i];
             var needCut = !0;
             if (i === lineCountLimit - 1) {
-              var _clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+              var _clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1);
               linesLayout.push({
                 str: _clip.str,
                 width: _clip.width
@@ -15513,7 +15615,7 @@
             vertices: [],
             edges: []
           },
-          rectTheme = getTheme(this).rect3d,
+          rectTheme = getTheme(this).rect,
           _this$attribute = this.attribute,
           x1 = _this$attribute.x1,
           y1 = _this$attribute.y1,
@@ -15772,22 +15874,22 @@
               _height = _this$lines$i.height;
             if (top + _height < this[this.directionKey.top] || top + _height > this[this.directionKey.top] + frameHeight) return lastLineTag;
             var lastLine = !1;
-            this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, drawIcon);
+            this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);
           } else {
             var detalHeight = Math.floor((frameHeight - this.actualHeight) / 2);
             "vertical" === this.layoutDirection ? deltaX += detalHeight : deltaY += detalHeight;
-            for (var _i = 0; _i < this.lines.length; _i++) this.lines[_i].draw(ctx, !1, this.lines[_i][this.directionKey.left] + deltaX, this.lines[_i][this.directionKey.top] + deltaY, drawIcon);
+            for (var _i = 0; _i < this.lines.length; _i++) this.lines[_i].draw(ctx, !1, this.lines[_i][this.directionKey.left] + deltaX, this.lines[_i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);
           }
         } else if ("bottom" === this.verticalDirection && "vertical" !== this.layoutDirection) for (var _i2 = 0; _i2 < this.lines.length; _i2++) {
           var _this$lines$_i = this.lines[_i2];
             _this$lines$_i.top;
             var _height2 = _this$lines$_i.height,
             y = frameHeight - this.lines[_i2].top - this.lines[_i2].height;
-          if (0 === frameHeight) this.lines[_i2].draw(ctx, !1, deltaX, y + deltaY, drawIcon);else {
+          if (0 === frameHeight) this.lines[_i2].draw(ctx, !1, deltaX, y + deltaY, this.ellipsis, drawIcon);else {
             if (y + _height2 > this[this.directionKey.top] + frameHeight || y < this[this.directionKey.top]) return lastLineTag;
             {
               var _lastLine = !1;
-              this.ellipsis && this.lines[_i2 + 1] && y - this.lines[_i2 + 1].height < this[this.directionKey.top] && (_lastLine = !0, lastLineTag = !0), this.lines[_i2].draw(ctx, _lastLine, deltaX, y + deltaY, drawIcon);
+              this.ellipsis && this.lines[_i2 + 1] && y - this.lines[_i2 + 1].height < this[this.directionKey.top] && (_lastLine = !0, lastLineTag = !0), this.lines[_i2].draw(ctx, _lastLine, deltaX, y + deltaY, this.ellipsis, drawIcon);
             }
           }
         } else {
@@ -15797,11 +15899,11 @@
             var _this$lines$_i2 = this.lines[_i3],
               _top2 = _this$lines$_i2.top,
               _height3 = _this$lines$_i2.height;
-            if (0 === frameHeight) this.lines[_i3].draw(ctx, !1, this.lines[_i3][this.directionKey.left] + deltaX, this.lines[_i3][this.directionKey.top] + deltaY, drawIcon);else {
+            if (0 === frameHeight) this.lines[_i3].draw(ctx, !1, this.lines[_i3][this.directionKey.left] + deltaX, this.lines[_i3][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);else {
               if (_top2 + _height3 < this[this.directionKey.top] || _top2 + _height3 > this[this.directionKey.top] + frameHeight) return lastLineTag;
               {
                 var _lastLine2 = !1;
-                this.ellipsis && this.lines[_i3 + 1] && this.lines[_i3 + 1].top + this.lines[_i3 + 1].height > this[this.directionKey.top] + frameHeight && (_lastLine2 = !0, lastLineTag = !0), this.lines[_i3].draw(ctx, _lastLine2, this.lines[_i3][this.directionKey.left] + deltaX, this.lines[_i3][this.directionKey.top] + deltaY, drawIcon);
+                this.ellipsis && this.lines[_i3 + 1] && this.lines[_i3 + 1].top + this.lines[_i3 + 1].height > this[this.directionKey.top] + frameHeight && (_lastLine2 = !0, lastLineTag = !0), this.lines[_i3].draw(ctx, _lastLine2, this.lines[_i3][this.directionKey.left] + deltaX, this.lines[_i3][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);
               }
             }
           }
@@ -16172,12 +16274,15 @@
       }
     }, {
       key: "draw",
-      value: function draw(ctx, lastLine, x, y, drawIcon) {
+      value: function draw(ctx, lastLine, x, y, drawEllipsis, drawIcon) {
         var _this2 = this;
-        if (lastLine) {
+        if (drawEllipsis && (lastLine || this.paragraphs.some(function (p) {
+          return p.overflow;
+        }))) {
           var otherParagraphWidth = 0;
           for (var i = this.paragraphs.length - 1; i >= 0; i--) {
             var paragraph = this.paragraphs[i];
+            if (paragraph.overflow) continue;
             if (paragraph instanceof RichTextIcon) break;
             if ("vertical" === this.direction && "vertical" !== paragraph.direction) {
               paragraph.verticalEllipsis = !0;
@@ -16424,7 +16529,10 @@
           fontFamily = _this$attribute.fontFamily,
           fontStyle = _this$attribute.fontStyle,
           fontWeight = _this$attribute.fontWeight,
-          lineWidth = _this$attribute.lineWidth;
+          lineWidth = _this$attribute.lineWidth,
+          opacity = _this$attribute.opacity,
+          fillOpacity = _this$attribute.fillOpacity,
+          strokeOpacity = _this$attribute.strokeOpacity;
         return Object.assign({
           fill: fill,
           stroke: stroke,
@@ -16432,7 +16540,10 @@
           fontFamily: fontFamily,
           fontStyle: fontStyle,
           fontWeight: fontWeight,
-          lineWidth: lineWidth
+          lineWidth: lineWidth,
+          opacity: opacity,
+          fillOpacity: fillOpacity,
+          strokeOpacity: strokeOpacity
         }, config);
       }
     }, {
@@ -16454,6 +16565,7 @@
           textBaseline = _this$attribute2.textBaseline,
           layoutDirection = _this$attribute2.layoutDirection,
           singleLine = _this$attribute2.singleLine,
+          forceBreakLine = _this$attribute2.forceBreakLine,
           paragraphs = [];
         for (var i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
           var config = this.combinedStyleToCharacter(textConfig[i]),
@@ -16478,7 +16590,14 @@
           richTextHeightEnable = "number" == typeof height && Number.isFinite(height) && height > 0 && (!maxHeightFinite || height <= maxHeight),
           frame = new Frame(0, 0, (richTextWidthEnable ? width : maxWidthFinite ? maxWidth : 0) || 0, (richTextHeightEnable ? height : maxHeightFinite ? maxHeight : 0) || 0, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection || "horizontal", !richTextWidthEnable && maxWidthFinite, !richTextHeightEnable && maxHeightFinite, singleLine || !1, null === (_a = this._frameCache) || void 0 === _a ? void 0 : _a.icons),
           wrapper = new Wrapper(frame);
-        for (var _i = 0; _i < paragraphs.length; _i++) wrapper.deal(paragraphs[_i]);
+        if (forceBreakLine) {
+          var lineCount = 0,
+            skip = !1;
+          for (var _i = 0; _i < paragraphs.length; _i++) {
+            var p = paragraphs[_i];
+            skip ? (p.overflow = !0, p.left = 1 / 0, p.top = 1 / 0, !p.newLine && frame.lines[frame.lines.length - 1].paragraphs.push(p)) : wrapper.deal(p), frame.lines.length !== lineCount && (lineCount = frame.lines.length, wrapper.lineBuffer.length = 0, p.overflow = !0, p.left = 1e3, p.top = 1e3, frame.lines[frame.lines.length - 1].paragraphs.push(p), skip = !0), p.newLine && (skip = !1);
+          }
+        } else for (var _i2 = 0; _i2 < paragraphs.length; _i2++) wrapper.deal(paragraphs[_i2]);
         wrapper.send();
         if (!("horizontal" === frame.layoutDirection ? richTextWidthEnable : richTextHeightEnable)) {
           var frameSize = frame.getActualSizeWidthEllipsis();
@@ -17671,6 +17790,8 @@
     }, {
       key: "updateGroupAABBBounds",
       value: function updateGroupAABBBounds(attribute, groupTheme, aabbBounds, graphic) {
+        var originalAABBBounds = aabbBounds;
+        aabbBounds = aabbBounds.clone();
         var width = attribute.width,
           height = attribute.height,
           path = attribute.path,
@@ -17678,12 +17799,12 @@
           clip = _attribute$clip === void 0 ? groupTheme.clip : _attribute$clip;
         path && path.length ? path.forEach(function (g) {
           aabbBounds.union(g.AABBBounds);
-        }) : null != width && null != height && aabbBounds.set(0, 0, width, height), clip || graphic.forEachChildren(function (node) {
+        }) : null != width && null != height && aabbBounds.set(0, 0, Math.max(0, width), Math.max(0, height)), clip || graphic.forEachChildren(function (node) {
           aabbBounds.union(node.AABBBounds);
         });
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
-        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.transformAABBBounds(attribute, aabbBounds, groupTheme, !1, graphic), aabbBounds;
+        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.transformAABBBounds(attribute, aabbBounds, groupTheme, !1, graphic), originalAABBBounds.copy(aabbBounds), originalAABBBounds;
       }
     }, {
       key: "updateGlyphAABBBounds",
@@ -17692,6 +17813,22 @@
           aabbBounds.union(node.AABBBounds);
         }), aabbBounds) : aabbBounds;
       }
+    }, {
+      key: "updateHTMLTextAABBBounds",
+      value: function updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
+        var textAlign = attribute.textAlign,
+          textBaseline = attribute.textBaseline;
+        if (null != attribute.forceBoundsHeight) {
+          var h = isNumber$1(attribute.forceBoundsHeight) ? attribute.forceBoundsHeight : attribute.forceBoundsHeight(),
+            dy = textLayoutOffsetY(textBaseline, h, h);
+          aabbBounds.set(aabbBounds.x1, dy, aabbBounds.x2, dy + h);
+        }
+        if (null != attribute.forceBoundsWidth) {
+          var w = isNumber$1(attribute.forceBoundsWidth) ? attribute.forceBoundsWidth : attribute.forceBoundsWidth(),
+            dx = textDrawOffsetX(textAlign, w);
+          aabbBounds.set(dx, aabbBounds.y1, dx + w, aabbBounds.y2);
+        }
+      }
     }, {
       key: "updateRichTextAABBBounds",
       value: function updateRichTextAABBBounds(attribute, richtextTheme, aabbBounds, graphic) {
@@ -17743,7 +17880,7 @@
         aabbBounds.translate(deltaX, deltaY);
         var tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
-        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, graphic), aabbBounds;
+        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || this.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, graphic), aabbBounds;
       }
     }, {
       key: "updateTextAABBBounds",
@@ -17768,7 +17905,7 @@
           var shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
           boundStroke(tb1, shadowBlurHalfWidth, !0, strokeBoundsBuffer), aabbBounds.union(tb1);
         }
-        return this.combindShadowAABBBounds(aabbBounds, graphic), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix), aabbBounds;
+        return this.combindShadowAABBBounds(aabbBounds, graphic), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || this.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix), aabbBounds;
       }
     }, {
       key: "updatePathAABBBounds",
@@ -18092,6 +18229,7 @@
       key: "_validCheck",
       value: function _validCheck(attribute, theme, aabbBounds, graphic) {
         if (!graphic) return !0;
+        if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
         if (!graphic.valid) return aabbBounds.clear(), !1;
         var _attribute$visible = attribute.visible,
           visible = _attribute$visible === void 0 ? theme.visible : _attribute$visible;
@@ -18157,6 +18295,9 @@
       key: "beforeRenderStep",
       value: function beforeRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
         this._beforeRenderContribitions && this._beforeRenderContribitions.forEach(function (c) {
+          if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
+            if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
+          }
           c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
         });
       }
@@ -18164,6 +18305,9 @@
       key: "afterRenderStep",
       value: function afterRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
         this._afterRenderContribitions && this._afterRenderContribitions.forEach(function (c) {
+          if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
+            if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
+          }
           c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
         });
       }
@@ -18284,6 +18428,8 @@
       value: function _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
         var context = drawContext.context;
         if (!context) return;
+        var renderable = graphic.attribute.renderable;
+        if (!1 === renderable) return;
         context.highPerformanceSave();
         var data = this.transform(graphic, defaultAttr, context, computed3dMatrix),
           x = data.x,
@@ -19281,13 +19427,18 @@
       key: "drawShape",
       value: function drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb) {
         var _rect$attribute4 = rect.attribute,
-          _rect$attribute4$widt = _rect$attribute4.width,
-          width = _rect$attribute4$widt === void 0 ? groupAttribute.width : _rect$attribute4$widt,
-          _rect$attribute4$heig = _rect$attribute4.height,
-          height = _rect$attribute4$heig === void 0 ? groupAttribute.height : _rect$attribute4$heig,
+          x1 = _rect$attribute4.x1,
+          y1 = _rect$attribute4.y1,
+          _rect$attribute4$x = _rect$attribute4.x,
+          originX = _rect$attribute4$x === void 0 ? groupAttribute.x : _rect$attribute4$x,
+          _rect$attribute4$y = _rect$attribute4.y,
+          originY = _rect$attribute4$y === void 0 ? groupAttribute.y : _rect$attribute4$y,
           _rect$attribute4$stro = _rect$attribute4.stroke,
           stroke = _rect$attribute4$stro === void 0 ? groupAttribute.stroke : _rect$attribute4$stro;
-        if (Array.isArray(stroke) && stroke.some(function (s) {
+        var _rect$attribute5 = rect.attribute,
+          width = _rect$attribute5.width,
+          height = _rect$attribute5.height;
+        if (width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0, Array.isArray(stroke) && stroke.some(function (s) {
           return !1 === s;
         })) {
           if (context.setStrokeStyle(rect, rect.attribute, x, y, groupAttribute), context.beginPath(), context.moveTo(x, y), stroke[0] ? context.lineTo(x + width, y) : context.moveTo(x + width, y), stroke[1] ? context.lineTo(x + width, y + height) : context.moveTo(x + width, y + height), stroke[2] ? context.lineTo(x, y + height) : context.moveTo(x, y + height), stroke[3]) {
@@ -20643,9 +20794,14 @@
           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,
+        var matrix,
           background = graphic.attribute.background;
         if (!background) return;
+        var restore = function restore() {
+          "richtext" === graphic.type && (context.restore(), context.save(), matrix && context.setTransformFromMatrix(matrix, !0, 1));
+        };
+        var b;
+        "richtext" === graphic.type && (matrix = context.currentMatrix.clone(), context.restore(), context.save(), context.setTransformForCurrent());
         var shouldReCalBounds = isObject$1(background) && background.background,
           onlyTranslate = graphic.transMatrix.onlyTranslate();
         if (shouldReCalBounds) {
@@ -20670,13 +20826,13 @@
         })).clone());
         if (graphic.backgroundImg && graphic.resources) {
           var res = graphic.resources.get(background);
-          if ("success" !== res.state || !res.data) return;
+          if ("success" !== res.state || !res.data) return void restore();
           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);
+        shouldReCalBounds && boundsAllocate.free(b), restore();
       }
     }]);
   }(DefaultBaseBackgroundRenderContribution);
@@ -20867,7 +21023,7 @@
             strokeOpacity: fillOpacity
           };
         if (underline) {
-          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.setLineDash(underlineDash), context.beginPath();
+          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
           var dy = y + offsetY + fontSize + underlineOffset;
           context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
         }
@@ -20903,7 +21059,7 @@
           };
         var deltaY = -3;
         if (underline) {
-          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.setLineDash(underlineDash), context.beginPath();
+          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
           var dy = y + offsetY + fontSize + deltaY + underlineOffset;
           context.moveTo(x + 0, dy, z), context.lineTo(x + 0 + w, dy, z), context.stroke();
         }
@@ -21434,14 +21590,14 @@
       value: function render(groups, params) {
         this.renderTreeRoots = groups, this.drawParams = params;
         var updateBounds = params.updateBounds;
-        this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
+        this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params), this.drawParams = null;
       }
     }]);
   }();
   exports.DefaultRenderService = __decorate$1i([injectable(), __param$E(0, inject(DrawContribution)), __metadata$_("design:paramtypes", [Object])], exports.DefaultRenderService);
 
   var renderModule$1 = new ContainerModule(function (bind) {
-    bind(RenderService).to(exports.DefaultRenderService).inSingletonScope();
+    bind(RenderService).to(exports.DefaultRenderService);
   });
 
   var GraphicPicker = Symbol["for"]("GraphicPicker");
@@ -22121,7 +22277,7 @@
           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.draw(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1;
+        }), context.restore(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1, context.draw();
       }
     }, {
       key: "doRegister",
@@ -23029,7 +23185,7 @@
   var HtmlAttributePlugin = /*#__PURE__*/function () {
     function HtmlAttributePlugin() {
       _classCallCheck(this, HtmlAttributePlugin);
-      this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.lastDomContainerSet = new Set(), this.currentDomContainerSet = new Set();
+      this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.htmlMap = {}, this.renderId = 0;
     }
     return _createClass(HtmlAttributePlugin, [{
       key: "activate",
@@ -23037,10 +23193,6 @@
         var _this = this;
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, function (stage) {
           stage && stage === _this.pluginService.stage && _this.drawHTML(context.stage.renderService);
-        }), application.graphicService.hooks.onRemove.tap(this.key, function (graphic) {
-          _this.removeDom(graphic);
-        }), application.graphicService.hooks.onRelease.tap(this.key, function (graphic) {
-          _this.removeDom(graphic);
         });
       }
     }, {
@@ -23051,99 +23203,176 @@
           return item.name !== _this2.key;
         }), application.graphicService.hooks.onRemove.unTap(this.key), application.graphicService.hooks.onRelease.unTap(this.key), this.release();
       }
+    }, {
+      key: "getWrapContainer",
+      value: function getWrapContainer(stage, userContainer, domParams) {
+        var nativeContainer;
+        return nativeContainer = userContainer ? "string" == typeof userContainer ? application.global.getElementById(userContainer) : userContainer : stage.window.getContainer(), {
+          wrapContainer: application.global.createDom(Object.assign({
+            tagName: "div",
+            parent: nativeContainer
+          }, domParams)),
+          nativeContainer: nativeContainer
+        };
+      }
+    }, {
+      key: "parseDefaultStyleFromGraphic",
+      value: function parseDefaultStyleFromGraphic(graphic) {
+        var attrs = "text" === graphic.type && graphic.attribute ? graphic.attribute : getTheme(graphic).text;
+        return textAttributesToStyle(attrs);
+      }
+    }, {
+      key: "getTransformOfText",
+      value: function getTransformOfText(graphic) {
+        var textTheme = getTheme(graphic).text,
+          _graphic$attribute = graphic.attribute,
+          _graphic$attribute$te = _graphic$attribute.textAlign,
+          textAlign = _graphic$attribute$te === void 0 ? textTheme.textAlign : _graphic$attribute$te,
+          _graphic$attribute$te2 = _graphic$attribute.textBaseline,
+          textBaseline = _graphic$attribute$te2 === void 0 ? textTheme.textBaseline : _graphic$attribute$te2,
+          cssAttrs = graphic.globalTransMatrix.toTransformAttrs(),
+          rotateDeg = cssAttrs.rotateDeg,
+          scaleX = cssAttrs.scaleX,
+          scaleY = cssAttrs.scaleY,
+          translateMap = {
+            left: "0",
+            start: "0",
+            end: "-100%",
+            center: "-50%",
+            right: "-100%",
+            top: "0",
+            middle: "-50%",
+            bottom: "-100%",
+            alphabetic: "-79%"
+          },
+          originMap = {
+            left: "0",
+            start: "0",
+            end: "100%",
+            center: "50%",
+            right: "100%",
+            top: "0",
+            middle: "50%",
+            bottom: "100%",
+            alphabetic: "79%"
+          };
+        return {
+          textAlign: textAlign,
+          transform: "translate(".concat(translateMap[textAlign], ",").concat(translateMap[textBaseline], ") rotate(").concat(rotateDeg, "deg) scaleX(").concat(scaleX, ") scaleY(").concat(scaleY, ")"),
+          transformOrigin: "".concat(originMap[textAlign], " ").concat(originMap[textBaseline])
+        };
+      }
+    }, {
+      key: "updateStyleOfWrapContainer",
+      value: function updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, options) {
+        var pointerEvents = options.pointerEvents;
+        var calculateStyle = this.parseDefaultStyleFromGraphic(graphic);
+        calculateStyle.display = !1 !== graphic.attribute.visible ? "block" : "none", calculateStyle.pointerEvents = !0 === pointerEvents ? "all" : pointerEvents || "none", wrapContainer.style.position || (wrapContainer.style.position = "absolute", nativeContainer.style.position = "relative");
+        var left = 0,
+          top = 0;
+        var b = graphic.globalAABBBounds;
+        var anchorType = options.anchorType;
+        if (isNil$1(anchorType) && (anchorType = "text" === graphic.type ? "position" : "boundsLeftTop"), "boundsLeftTop" === anchorType && (anchorType = "top-left"), "position" === anchorType || b.empty()) {
+          var matrix = graphic.globalTransMatrix;
+          left = matrix.e, top = matrix.f;
+        } else {
+          var anchor = calculateAnchorOfBounds(b, anchorType);
+          left = anchor.x, top = anchor.y;
+        }
+        var containerTL = application.global.getElementTopLeft(nativeContainer, !1),
+          windowTL = stage.window.getTopLeft(!1),
+          offsetX = left + windowTL.left - containerTL.left,
+          offsetTop = top + windowTL.top - containerTL.top;
+        if (calculateStyle.left = "".concat(offsetX, "px"), calculateStyle.top = "".concat(offsetTop, "px"), "text" === graphic.type && "position" === anchorType && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), this.getTransformOfText(graphic))), isFunction$1(options.style)) {
+          var userStyle = options.style({
+            top: offsetTop,
+            left: offsetX,
+            width: b.width(),
+            height: b.height()
+          }, graphic, wrapContainer);
+          userStyle && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), userStyle));
+        } else isObject$1(options.style) ? calculateStyle = Object.assign(Object.assign({}, calculateStyle), options.style) : isString$1(options.style) && options.style && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), styleStringToObject(options.style)));
+        application.global.updateDom(wrapContainer, {
+          width: options.width,
+          height: options.width,
+          style: calculateStyle
+        });
+      }
+    }, {
+      key: "clearCacheContainer",
+      value: function clearCacheContainer() {
+        var _this3 = this;
+        this.htmlMap && Object.keys(this.htmlMap).forEach(function (key) {
+          _this3.htmlMap[key] && _this3.htmlMap[key].renderId !== _this3.renderId && _this3.removeElement(key);
+        }), this.renderId += 1;
+      }
     }, {
       key: "drawHTML",
       value: function drawHTML(renderService) {
-        var _this3 = this;
+        var _this4 = this;
         "browser" === application.global.env && (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) {
-          _this3.renderGroupHTML(group);
-        }), this.lastDomContainerSet.forEach(function (item) {
-          _this3.currentDomContainerSet.has(item) || item.parentElement && item.parentElement.removeChild(item);
-        }), this.lastDomContainerSet = new Set(this.currentDomContainerSet), this.currentDomContainerSet.clear());
+          _this4.renderGroupHTML(group);
+        }), this.clearCacheContainer());
       }
     }, {
       key: "renderGroupHTML",
       value: function renderGroupHTML(group) {
-        var _this4 = this;
+        var _this5 = this;
         this.renderGraphicHTML(group), group.forEachChildren(function (g) {
-          g.isContainer ? _this4.renderGroupHTML(g) : _this4.renderGraphicHTML(g);
+          g.isContainer ? _this5.renderGroupHTML(g) : _this5.renderGraphicHTML(g);
         });
       }
     }, {
-      key: "removeDom",
-      value: function removeDom(graphic) {
-        graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(function (item) {
-          item.dom && item.dom.parentElement.removeChild(item.dom);
-        }), graphic.bindDom.clear());
+      key: "removeElement",
+      value: function removeElement(id) {
+        if (!this.htmlMap || !this.htmlMap[id]) return;
+        var wrapContainer = this.htmlMap[id].wrapContainer;
+        wrapContainer && application.global.removeDom(wrapContainer), this.htmlMap[id] = null;
       }
     }, {
       key: "renderGraphicHTML",
       value: function renderGraphicHTML(graphic) {
+        var _a;
         var html = graphic.attribute.html;
-        if (!html) return void (graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(function (item) {
-          item.dom && item.dom.parentElement.removeChild(item.dom);
-        }), graphic.bindDom.clear()));
+        if (!html) return;
         var stage = graphic.stage;
         if (!stage) return;
         var dom = html.dom,
-          container = html.container,
-          width = html.width,
-          height = html.height,
-          style = html.style,
-          _html$anchorType = html.anchorType,
-          anchorType = _html$anchorType === void 0 ? "boundsLeftTop" : _html$anchorType,
-          pointerEvents = html.pointerEvents;
-        graphic.bindDom || (graphic.bindDom = new Map());
-        var lastDom = graphic.bindDom.get(dom);
-        var wrapGroup, nativeContainer;
-        if (!lastDom || container && container !== lastDom.container) {
-          var nativeDom;
-          graphic.bindDom.forEach(function (_ref) {
-            var wrapGroup = _ref.wrapGroup;
-            application.global.removeDom(wrapGroup);
-          }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
-          var _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
-          nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
-            tagName: "div",
-            width: width,
-            height: height,
-            style: style,
-            parent: nativeContainer
-          }), wrapGroup && (wrapGroup.appendChild(nativeDom), graphic.bindDom.set(dom, {
-            dom: nativeDom,
+          container = html.container;
+        if (!dom) return;
+        var id = isNil$1(html.id) ? "".concat(null !== (_a = graphic.id) && void 0 !== _a ? _a : graphic._uid, "_react") : html.id;
+        if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container && this.removeElement(id), this.htmlMap && this.htmlMap[id]) "string" == typeof dom ? this.htmlMap[id].wrapContainer.innerHTML = dom : dom !== this.htmlMap[id].wrapContainer.firstChild && (this.htmlMap[id].wrapContainer.removeChild(this.htmlMap[id].wrapContainer.firstChild), this.htmlMap[id].wrapContainer.appendChild(dom));else {
+          var _this$getWrapContaine = this.getWrapContainer(stage, container),
+            _wrapContainer = _this$getWrapContaine.wrapContainer,
+            _nativeContainer = _this$getWrapContaine.nativeContainer;
+          _wrapContainer && ("string" == typeof dom ? _wrapContainer.innerHTML = dom : _wrapContainer.appendChild(dom), this.htmlMap || (this.htmlMap = {}), this.htmlMap[id] = {
+            wrapContainer: _wrapContainer,
+            nativeContainer: _nativeContainer,
             container: container,
-            wrapGroup: wrapGroup
-          }));
-        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
-        wrapGroup.style.pointerEvents = 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;
-          left = matrix.e, top = matrix.f;
-        } else left = b.x1, top = b.y1;
-        var containerTL = application.global.getElementTopLeft(nativeContainer, !1),
-          windowTL = stage.window.getTopLeft(!1),
-          offsetX = left + windowTL.left - containerTL.left,
-          offsetTop = top + windowTL.top - containerTL.top;
-        wrapGroup.style.left = "".concat(offsetX, "px"), wrapGroup.style.top = "".concat(offsetTop, "px"), this.currentDomContainerSet.add(wrapGroup);
+            renderId: this.renderId
+          });
+        }
+        if (!this.htmlMap || !this.htmlMap[id]) return;
+        var _this$htmlMap$id = this.htmlMap[id],
+          wrapContainer = _this$htmlMap$id.wrapContainer,
+          nativeContainer = _this$htmlMap$id.nativeContainer;
+        this.updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, html), this.htmlMap[id].renderId = this.renderId;
       }
     }, {
       key: "release",
       value: function release() {
-        "browser" === application.global.env && (this.removeAllDom(this.pluginService.stage.defaultLayer), this.lastDomContainerSet.clear(), this.currentDomContainerSet.clear());
+        "browser" === application.global.env && this.removeAllDom(this.pluginService.stage.defaultLayer);
       }
     }, {
       key: "removeAllDom",
       value: function removeAllDom(g) {
-        var _this5 = this;
-        this.removeDom(g), g.forEachChildren(function (item) {
-          item.isContainer && _this5.removeAllDom(g);
-        });
+        var _this6 = this;
+        this.htmlMap && (Object.keys(this.htmlMap).forEach(function (key) {
+          _this6.removeElement(key);
+        }), this.htmlMap = null);
       }
     }]);
   }();
@@ -23241,7 +23470,7 @@
           }), !isFinite(boundsLegal)) return;
           width = childrenWidth, height = childrenHeight;
         }
-        p.attribute.width = width, p.attribute.height = height, this.tempBounds.copy(p._AABBBounds);
+        null == p.attribute.width ? p.attribute.width = width : width = p.attribute.width, null == p.attribute.height ? p.attribute.height = height : height = p.attribute.height, this.tempBounds.copy(p._AABBBounds);
         var result = {
             main: {
               len: width,
@@ -23282,7 +23511,7 @@
             }), tempMainL = 0, tempCrossL = 0) : (mainList.push({
               idx: i - 1,
               mainLen: tempMainL,
-              crossLen: crossLen
+              crossLen: tempCrossL
             }), tempMainL = mainLen, tempCrossL = crossLen) : (tempMainL += mainLen, tempCrossL = Math.max(tempCrossL, crossLen));
           }), mainList.push({
             idx: mianLenArray.length - 1,
@@ -23383,7 +23612,7 @@
           }
         } else if ("flex-end" === justifyContent) {
           var _pos = main.len;
-          for (var _i = lastIdx; _i <= currSeg.idx; _i++) {
+          for (var _i = currSeg.idx; _i >= lastIdx; _i--) {
             _pos -= mianLenArray[_i].mainLen;
             var _posBaseLeftTop = _pos + getPadding(children[_i], main.field),
               _b = this.getAABBBounds(children[_i]);
@@ -23664,74 +23893,57 @@
     function ReactAttributePlugin() {
       var _this;
       _classCallCheck(this, ReactAttributePlugin);
-      _this = _callSuper(this, ReactAttributePlugin, arguments), _this.name = "ReactAttributePlugin", _this.activeEvent = "onRegister", _this._uid = Generator.GenAutoIncrementId(), _this.key = _this.name + _this._uid;
+      _this = _callSuper(this, ReactAttributePlugin, arguments), _this.name = "ReactAttributePlugin", _this.activeEvent = "onRegister", _this._uid = Generator.GenAutoIncrementId(), _this.key = _this.name + _this._uid, _this.htmlMap = {};
       return _this;
     }
     _inherits(ReactAttributePlugin, _HtmlAttributePlugin);
     return _createClass(ReactAttributePlugin, [{
-      key: "removeDom",
-      value: function removeDom(graphic) {
-        graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(function (item) {
-          item.root && item.root.unmount();
-        }), graphic.bindDom.clear());
+      key: "removeElement",
+      value: function removeElement(id) {
+        if (!this.htmlMap || !this.htmlMap[id]) return;
+        var _this$htmlMap$id = this.htmlMap[id],
+          root = _this$htmlMap$id.root,
+          wrapContainer = _this$htmlMap$id.wrapContainer;
+        if (root) {
+          application.global.getRequestAnimationFrame()(function () {
+            root.unmount();
+          });
+        }
+        wrapContainer && application.global.removeDom(wrapContainer), this.htmlMap[id] = null;
       }
     }, {
       key: "renderGraphicHTML",
       value: function renderGraphicHTML(graphic) {
+        var _a;
         var react = graphic.attribute.react;
-        if (!react) return void (graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(function (item) {
-          item.root && item.root.unmount();
-        }), graphic.bindDom.clear()));
+        if (!react) return;
         var stage = graphic.stage;
         if (!stage) return;
         var ReactDOM = stage.params.ReactDOM,
           element = react.element,
-          container = react.container,
-          width = react.width,
-          height = react.height,
-          style = react.style,
-          _react$anchorType = react.anchorType,
-          anchorType = _react$anchorType === void 0 ? "boundsLeftTop" : _react$anchorType,
-          pointerEvents = react.pointerEvents;
+          container = react.container;
         if (!(element && ReactDOM && ReactDOM.createRoot)) return;
-        graphic.bindDom || (graphic.bindDom = new Map());
-        var lastDom = graphic.bindDom.get(element);
-        var wrapGroup, nativeContainer;
-        if (!lastDom || container && container !== lastDom.container) {
-          graphic.bindDom.forEach(function (_ref) {
-            var wrapGroup = _ref.wrapGroup;
-            application.global.removeDom(wrapGroup);
-          });
-          var _container = container;
-          if (nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
-            tagName: "div",
-            width: width,
-            height: height,
-            style: style,
-            parent: nativeContainer
-          }), wrapGroup) {
-            var root = ReactDOM.createRoot(wrapGroup);
-            root.render(element), graphic.bindDom.set(element, {
-              dom: element,
+        var id = isNil$1(react.id) ? "".concat(null !== (_a = graphic.id) && void 0 !== _a ? _a : graphic._uid, "_react") : react.id;
+        if (this.htmlMap && this.htmlMap[id] && container && container !== this.htmlMap[id].container && this.removeElement(id), this.htmlMap && this.htmlMap[id]) this.htmlMap[id].root.render(element);else {
+          var _this$getWrapContaine = this.getWrapContainer(stage, container),
+            _wrapContainer = _this$getWrapContaine.wrapContainer,
+            _nativeContainer = _this$getWrapContaine.nativeContainer;
+          if (_wrapContainer) {
+            var root = ReactDOM.createRoot(_wrapContainer);
+            root.render(element), this.htmlMap || (this.htmlMap = {}), this.htmlMap[id] = {
+              root: root,
+              wrapContainer: _wrapContainer,
+              nativeContainer: _nativeContainer,
               container: container,
-              wrapGroup: wrapGroup,
-              root: root
-            });
+              renderId: this.renderId
+            };
           }
-        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
-        wrapGroup.style.pointerEvents = 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;
-          left = matrix.e, top = matrix.f;
-        } else left = b.x1, top = b.y1;
-        var containerTL = application.global.getElementTopLeft(nativeContainer, !1),
-          windowTL = stage.window.getTopLeft(!1),
-          offsetX = left + windowTL.left - containerTL.left,
-          offsetTop = top + windowTL.top - containerTL.top;
-        wrapGroup.style.left = "".concat(offsetX, "px"), wrapGroup.style.top = "".concat(offsetTop, "px");
+        }
+        if (!this.htmlMap || !this.htmlMap[id]) return;
+        var _this$htmlMap$id2 = this.htmlMap[id],
+          wrapContainer = _this$htmlMap$id2.wrapContainer,
+          nativeContainer = _this$htmlMap$id2.nativeContainer;
+        this.updateStyleOfWrapContainer(graphic, stage, wrapContainer, nativeContainer, react), this.htmlMap[id].renderId = this.renderId;
       }
     }]);
   }(HtmlAttributePlugin);
@@ -24273,7 +24485,7 @@
       value: function release() {
         _get(_getPrototypeOf(Stage.prototype), "release", this).call(this), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(function (layer) {
           layer.release();
-        }), this.interactiveLayer && this.interactiveLayer.release(), this.window.release();
+        }), this.interactiveLayer && this.interactiveLayer.release(), this.window.release(), this.ticker.remTimeline(this.timeline), this.renderService.renderTreeRoots = [];
       }
     }, {
       key: "setStage",
@@ -24349,6 +24561,12 @@
       value: function getCursor() {
         return this._cursor;
       }
+    }, {
+      key: "eventPointTransform",
+      value: function eventPointTransform(e) {
+        var point = this.global.mapToCanvasPoint(e, this.window.getContext().canvas.nativeCanvas);
+        return this.stage.window.pointTransform(point.x, point.y);
+      }
     }]);
   }(Group);
 
@@ -24899,6 +25117,11 @@
       value: function createDom(params) {
         return null;
       }
+    }, {
+      key: "updateDom",
+      value: function updateDom(dom, params) {
+        return !1;
+      }
     }, {
       key: "getDynamicCanvasCount",
       value: function getDynamicCanvasCount() {
@@ -25752,7 +25975,7 @@
       key: "drawShape",
       value: function drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a;
-        var rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect3d,
+        var rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect,
           _rect$attribute = rect.attribute,
           _rect$attribute$fill = _rect$attribute.fill,
           fill = _rect$attribute$fill === void 0 ? rectAttribute.fill : _rect$attribute$fill,
@@ -29090,9 +29313,9 @@
         if (target && !isRoot) {
           var handlePointerMove = function handlePointerMove(moveEvent) {
             if (dragstartTriggered || (moveEvent.type = "dragstart", null == target || target.dispatchEvent(moveEvent), dragstartTriggered = !0), moveEvent.type = "drag", null == target || target.dispatchEvent(moveEvent), !isRoot) {
-              target.pickable = !1;
+              target.attribute.pickable = !1;
               var elemBelow = (null == rootNode ? void 0 : rootNode.pick(moveEvent.global.x, moveEvent.global.y)).graphic;
-              target.pickable = !0, currentDroppable !== elemBelow && (currentDroppable && (moveEvent.type = "dragleave", moveEvent.target = currentDroppable, currentDroppable.dispatchEvent(moveEvent)), elemBelow && (moveEvent.type = "dragenter", moveEvent.target = elemBelow, elemBelow.dispatchEvent(moveEvent)), currentDroppable = elemBelow, currentDroppable && (moveEvent.type = "dragover", moveEvent.target = currentDroppable, currentDroppable.dispatchEvent(moveEvent)));
+              target.attribute.pickable = !0, currentDroppable !== elemBelow && (currentDroppable && (moveEvent.type = "dragleave", moveEvent.target = currentDroppable, currentDroppable.dispatchEvent(moveEvent)), elemBelow && (moveEvent.type = "dragenter", moveEvent.target = elemBelow, elemBelow.dispatchEvent(moveEvent)), currentDroppable = elemBelow, currentDroppable && (moveEvent.type = "dragover", moveEvent.target = currentDroppable, currentDroppable.dispatchEvent(moveEvent)));
             }
           };
           var currentDroppable,
@@ -29890,7 +30113,7 @@
       value: function setLineDash(segments) {
         var a = arguments,
           _context = this.nativeContext;
-        this.nativeContext.setLineDash ? _context.setLineDash(a[0]) : "mozDash" in _context ? _context.mozDash = a[0] : "webkitLineDash" in _context && (_context.webkitLineDash = a[0]);
+        this.nativeContext.setLineDash ? a[0] && _context.setLineDash(a[0]) : "mozDash" in _context ? _context.mozDash = a[0] : "webkitLineDash" in _context && (_context.webkitLineDash = a[0]);
       }
     }, {
       key: "stroke",
@@ -30011,7 +30234,7 @@
             lineCap = _attribute$lineCap === void 0 ? defaultParams.lineCap : _attribute$lineCap,
             _attribute$miterLimit = attribute.miterLimit,
             miterLimit = _attribute$miterLimit === void 0 ? defaultParams.miterLimit : _attribute$miterLimit;
-          _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
     }, {
@@ -30669,19 +30892,24 @@
       value: function removeDom(dom) {
         return dom.parentElement.removeChild(dom), !0;
       }
+    }, {
+      key: "updateDom",
+      value: function updateDom(dom, params) {
+        var width = params.width,
+          height = params.height,
+          style = params.style;
+        return style && (isString$1(style) ? dom.setAttribute("style", style) : Object.keys(style).forEach(function (k) {
+          dom.style[k] = style[k];
+        })), null != width && (dom.style.width = "".concat(width, "px")), null != height && (dom.style.height = "".concat(height, "px")), !0;
+      }
     }, {
       key: "createDom",
       value: function createDom(params) {
         var _params$tagName = params.tagName,
           tagName = _params$tagName === void 0 ? "div" : _params$tagName,
-          width = params.width,
-          height = params.height,
-          style = params.style,
           parent = params.parent,
           element = document.createElement(tagName);
-        if (style && (isString$1(style) ? element.setAttribute("style", style) : Object.keys(style).forEach(function (k) {
-          element.setAttribute(k, style[k]);
-        })), null != width && (element.style.width = "".concat(width, "px")), null != height && (element.style.height = "".concat(height, "px")), parent) {
+        if (this.updateDom(element, params), parent) {
           var pd = isString$1(parent) ? this.getElementById(parent) : parent;
           pd && pd.appendChild && pd.appendChild(element);
         }
@@ -31470,7 +31698,7 @@
         if (this.nativeContext.setLineDash) {
           var lineDash = a[0];
           if (0 === lineDash[0] && 0 === lineDash[1]) return;
-          _context.setLineDash(lineDash);
+          lineDash && _context.setLineDash(lineDash);
         }
       }
     }, {
@@ -31495,7 +31723,7 @@
             lineCap = _attribute$lineCap === void 0 ? defaultParams.lineCap : _attribute$lineCap,
             _attribute$miterLimit = attribute.miterLimit,
             miterLimit = _attribute$miterLimit === void 0 ? defaultParams.miterLimit : _attribute$miterLimit;
-          _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
     }, {
@@ -32377,7 +32605,7 @@
             lineCap = _attribute$lineCap === void 0 ? defaultParams.lineCap : _attribute$lineCap,
             _attribute$miterLimit = attribute.miterLimit,
             miterLimit = _attribute$miterLimit === void 0 ? defaultParams.miterLimit : _attribute$miterLimit;
-          _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params, offsetX, offsetY)), _context.setLineJoin(lineJoin), _context.setLineDash(lineDash), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
+          _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params, offsetX, offsetY)), _context.setLineJoin(lineJoin), lineDash && _context.setLineDash(lineDash), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
         }
       }
     }, {
@@ -34897,7 +35125,7 @@
 
   var roughModule = _roughModule;
 
-  const version = "0.19.0-alpha.0";
+  const version = "0.19.0";
   preLoadAllModule();
   if (isBrowserEnv()) {
       loadBrowserEnv(container);
@@ -35451,6 +35679,7 @@
   exports.symbolMathPickModule = symbolMathPickModule;
   exports.symbolModule = symbolModule;
   exports.taroEnvModule = taroEnvModule;
+  exports.textAttributesToStyle = textAttributesToStyle;
   exports.textCanvasPickModule = textCanvasPickModule;
   exports.textDrawOffsetX = textDrawOffsetX;
   exports.textDrawOffsetY = textDrawOffsetY;