@visactor/vrender 0.21.0-alpha.3 → 0.21.0-alpha.4

package/dist/index.es.js

@@ -3913,7 +3913,6 @@ const DefaultStrokeStyle = Object.assign({
 const DefaultTextStyle = {
   text: "",
   maxLineWidth: 1 / 0,
-  maxWidth: 1 / 0,
   textAlign: "left",
   textBaseline: "alphabetic",
   fontSize: 16,
@@ -4266,32 +4265,10 @@ let ATextMeasure = class {
   configure(service, env) {
     this.canvas = service.canvas, this.context = service.context, service.bindTextMeasure(this);
   }
-  _measureTextWithoutAlignBaseline(text, options, compatible) {
+  measureTextWidth(text, options) {
+    if (!this.context) return this.estimate(text, options).width;
     this.context.setTextStyleWithoutAlignBaseline(options);
-    const metrics = this.context.measureText(text);
-    return compatible ? this.compatibleMetrics(metrics, options) : metrics;
-  }
-  _measureTextWithAlignBaseline(text, options, compatible) {
-    this.context.setTextStyle(options);
-    const metrics = this.context.measureText(text);
-    return compatible ? this.compatibleMetrics(metrics, options) : metrics;
-  }
-  compatibleMetrics(metrics, options) {
-    if (null == metrics.actualBoundingBoxAscent || null == metrics.actualBoundingBoxDescent || null == metrics.fontBoundingBoxAscent || null == metrics.fontBoundingBoxDescent) {
-      const {
-        ascent: ascent,
-        descent: descent
-      } = this.measureTextBoundADscentEstimate(options);
-      metrics.actualBoundingBoxAscent = ascent, metrics.actualBoundingBoxDescent = descent, metrics.fontBoundingBoxAscent = ascent, metrics.fontBoundingBoxDescent = descent;
-    }
-    if (null == metrics.actualBoundingBoxLeft || null == metrics.actualBoundingBoxRight) {
-      const {
-        left: left,
-        right: right
-      } = this.measureTextBoundLeftRightEstimate(options);
-      metrics.actualBoundingBoxLeft = left, metrics.actualBoundingBoxRight = right;
-    }
-    return metrics;
+    return this.context.measureText(text).width;
   }
   estimate(text, _ref) {
     let {
@@ -4305,85 +4282,19 @@ let ATextMeasure = class {
       height: fontSize
     };
   }
-  measureTextWidth(text, options, textMeasure) {
-    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
-  }
-  measureTextBoundsWidth(text, options, textMeasure) {
-    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
-  }
-  measureTextBoundsLeftRight(text, options, textMeasure) {
-    return this.context ? {
-      left: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxLeft,
-      right: textMeasure.actualBoundingBoxRight
-    } : this.measureTextBoundLeftRightEstimate(options);
-  }
-  measureTextPixelHeight(text, options, textMeasure) {
+  measureTextPixelHeight(text, options) {
     var _a;
-    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, !0), Math.abs(textMeasure.actualBoundingBoxAscent - textMeasure.actualBoundingBoxDescent)) : null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
-  }
-  measureTextPixelADscent(text, options, textMeasure) {
-    return this.context ? {
-      ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxAscent,
-      descent: textMeasure.actualBoundingBoxDescent
-    } : this.measureTextBoundADscentEstimate(options);
-  }
-  measureTextBoundHieght(text, options, textMeasure) {
-    var _a;
-    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, !0), Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent)) : null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
-  }
-  measureTextBoundADscent(text, options, textMeasure) {
-    return this.context ? {
-      ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).fontBoundingBoxAscent,
-      descent: textMeasure.fontBoundingBoxDescent
-    } : this.measureTextBoundADscentEstimate(options);
-  }
-  measureTextBoundADscentEstimate(options) {
-    var _a;
-    const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize,
-      {
-        textBaseline: textBaseline
-      } = options;
-    return "bottom" === textBaseline ? {
-      ascent: fontSize,
-      descent: 0
-    } : "middle" === textBaseline ? {
-      ascent: fontSize / 2,
-      descent: fontSize / 2
-    } : "alphabetic" === textBaseline ? {
-      ascent: .79 * fontSize,
-      descent: .21 * fontSize
-    } : {
-      ascent: 0,
-      descent: fontSize
-    };
+    if (!this.context) return null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
+    this.context.setTextStyleWithoutAlignBaseline(options);
+    const textMeasure = this.context.measureText(text);
+    return Math.abs(textMeasure.actualBoundingBoxAscent - textMeasure.actualBoundingBoxDescent);
   }
-  measureTextBoundLeftRightEstimate(options) {
+  measureTextBoundHieght(text, options) {
     var _a;
-    const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize,
-      {
-        textAlign: textAlign
-      } = options;
-    return "center" === textAlign ? {
-      left: fontSize / 2,
-      right: fontSize / 2
-    } : "right" === textAlign || "end" === textAlign ? {
-      left: fontSize,
-      right: 0
-    } : {
-      left: 0,
-      right: fontSize
-    };
-  }
-  measureTextPixelADscentAndWidth(text, options) {
-    if (!this.context) return Object.assign(Object.assign({}, this.measureTextBoundADscentEstimate(options)), {
-      width: this.estimate(text, options).width
-    });
-    const out = this._measureTextWithoutAlignBaseline(text, options, !0);
-    return {
-      ascent: out.actualBoundingBoxAscent,
-      descent: out.actualBoundingBoxDescent,
-      width: out.width
-    };
+    if (!this.context) return null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
+    this.context.setTextStyleWithoutAlignBaseline(options);
+    const textMeasure = this.context.measureText(text);
+    return Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent);
   }
   measureText(text, options) {
     return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
@@ -9183,7 +9094,7 @@ class ResourceLoader {
   }
   static GetFile(url, type) {
     let data = ResourceLoader.cache.get(url);
-    return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+    return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
       type: type,
       loadState: "init"
     }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
@@ -12447,8 +12358,9 @@ class DefaultImageRenderContribution extends DefaultRectRenderContribution {
   constructor() {
     super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
   }
-  drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
-    return super.drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+  drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+    if (!(image.isGifImage && image.renderFrame && image.playing)) return super.drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+    image.renderFrame(context, x, y);
   }
 }
 const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -13790,50 +13702,77 @@ let DefaultCanvasTextRender = class extends BaseRender {
       }
       doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, _x, _y, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, _x, _y, z), this.drawUnderLine(underline, lineThrough, text, _x, _y, z, textAttribute, context))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
     };
-    if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
-      const {
-        multilineLayout: multilineLayout
-      } = text;
-      if (!multilineLayout) return void context.highPerformanceRestore();
-      const {
-        xOffset: xOffset,
-        yOffset: yOffset
-      } = multilineLayout.bbox;
-      doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-        context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
-      }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-        context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, textAttribute, context, {
-          width: line.width
+    if (text.isMultiLine) {
+      if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
+        const {
+          multilineLayout: multilineLayout
+        } = text;
+        if (!multilineLayout) return void context.highPerformanceRestore();
+        const {
+          xOffset: xOffset,
+          yOffset: yOffset
+        } = multilineLayout.bbox;
+        doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+          context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
+        }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+          context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, textAttribute, context, {
+            width: line.width
+          });
+        })));
+      } else {
+        text.tryUpdateAABBBounds();
+        const cache = text.cache,
+          {
+            verticalList: verticalList
+          } = cache;
+        context.textAlign = "left", context.textBaseline = "top";
+        const totalHeight = lineHeight * verticalList.length;
+        let totalW = 0;
+        verticalList.forEach(verticalData => {
+          const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
+          totalW = max(_w, totalW);
+        });
+        let offsetY = 0,
+          offsetX = 0;
+        "bottom" === textBaseline ? offsetX = -totalHeight : "middle" === textBaseline && (offsetX = -totalHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), verticalList.forEach((verticalData, i) => {
+          const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0),
+            dw = totalW - currentW;
+          let currentOffsetY = offsetY;
+          "center" === textAlign ? currentOffsetY += dw / 2 : "right" === textAlign && (currentOffsetY += dw), verticalData.forEach(item => {
+            const {
+              text: text,
+              width: width,
+              direction: direction
+            } = item;
+            drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction), currentOffsetY += width;
+          });
         });
-      })));
+      }
+    } else if ("horizontal" === direction) {
+      context.setTextStyle(text.attribute, textAttribute, z);
+      const t = text.clipedText;
+      let dy = 0;
+      lineHeight !== fontSize && ("top" === textBaseline ? dy = (lineHeight - fontSize) / 2 : "middle" === textBaseline || "bottom" === textBaseline && (dy = -(lineHeight - fontSize) / 2)), drawText(t, 0, dy, 0);
     } else {
       text.tryUpdateAABBBounds();
-      const cache = text.cache,
-        {
+      const cache = text.cache;
+      if (cache) {
+        context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
+        const {
           verticalList: verticalList
         } = cache;
-      context.textAlign = "left", context.textBaseline = "top";
-      const totalHeight = lineHeight * verticalList.length;
-      let totalW = 0;
-      verticalList.forEach(verticalData => {
-        const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
-        totalW = max(_w, totalW);
-      });
-      let offsetY = 0,
-        offsetX = 0;
-      "bottom" === textBaseline ? offsetX = -totalHeight : "middle" === textBaseline && (offsetX = -totalHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), verticalList.forEach((verticalData, i) => {
-        const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0),
-          dw = totalW - currentW;
-        let currentOffsetY = offsetY;
-        "center" === textAlign ? currentOffsetY += dw / 2 : "right" === textAlign && (currentOffsetY += dw), verticalData.forEach(item => {
+        let offsetY = 0;
+        const totalW = verticalList[0].reduce((a, b) => a + (b.width || 0), 0);
+        let offsetX = 0;
+        "bottom" === textBaseline ? offsetX = -lineHeight : "middle" === textBaseline && (offsetX = -lineHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), context.textAlign = "left", context.textBaseline = "top", verticalList[0].forEach(item => {
           const {
             text: text,
             width: width,
             direction: direction
           } = item;
-          drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction), currentOffsetY += width;
+          drawText(text, offsetX, offsetY, direction), offsetY += width;
         });
-      });
+      }
     }
     transform3dMatrixToContextMatrix && this.restoreTransformUseContext2d(text, textAttribute, z, context), this.afterRenderStep(text, context, x, y, doFill, doStroke, fVisible, sVisible, textAttribute, drawContext, fillCb, strokeCb);
   }
@@ -14171,10 +14110,12 @@ let DefaultCanvasImageRender = class extends BaseRender {
     const {
       image: url
     } = image.attribute;
-    if (!url || !image.resources) return;
-    const res = image.resources.get(url);
-    if ("loading" === res.state && isString$1(url)) return void ResourceLoader.improveImageLoading(url);
-    if ("success" !== res.state) return;
+    if (!image.isGifImage) {
+      if (!url || !image.resources) return;
+      const res = image.resources.get(url);
+      if ("loading" === res.state && isString$1(url)) return void ResourceLoader.improveImageLoading(url);
+      if ("success" !== res.state) return;
+    }
     const {
       context: context
     } = renderService.drawParams;
@@ -14566,6 +14507,28 @@ class CanvasTextLayout {
     }
     return bbox.yOffset = "top" === textBaseline ? 0 : "middle" === textBaseline ? bbox.height / -2 : "alphabetic" === textBaseline ? -.79 * bbox.height : -bbox.height, bbox;
   }
+  GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, suffixPosition) {
+    const linesLayout = [],
+      bboxWH = [width, height],
+      bboxOffset = [0, 0];
+    for (; str.length > 0;) {
+      const {
+        str: clipText
+      } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak, suffixPosition);
+      linesLayout.push({
+        str: clipText,
+        width: this.textMeasure.measureTextWidth(clipText, this.textOptions)
+      }), str = str.substring(clipText.length);
+    }
+    "left" === textAlign || "start" === textAlign || ("center" === textAlign ? bboxOffset[0] = bboxWH[0] / -2 : "right" !== textAlign && "end" !== textAlign || (bboxOffset[0] = -bboxWH[0])), "top" === textBaseline || ("middle" === textBaseline ? bboxOffset[1] = bboxWH[1] / -2 : "bottom" === textBaseline && (bboxOffset[1] = -bboxWH[1]));
+    const bbox = {
+      xOffset: bboxOffset[0],
+      yOffset: bboxOffset[1],
+      width: bboxWH[0],
+      height: bboxWH[1]
+    };
+    return this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
+  }
   GetLayoutByLines(lines, textAlign, textBaseline, lineHeight) {
     let suffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
     let wordBreak = arguments.length > 5 ? arguments[5] : undefined;
@@ -14576,29 +14539,18 @@ class CanvasTextLayout {
       bboxWH = [0, 0];
     if ("number" == typeof lineWidth && lineWidth !== 1 / 0) {
       let width;
-      for (let i = 0, len = lines.length; i < len; i++) {
-        const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions);
-        width = Math.min(metrics.width, lineWidth), linesLayout.push({
-          str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
-          width: width,
-          ascent: metrics.ascent,
-          descent: metrics.descent
-        });
-      }
+      for (let i = 0, len = lines.length; i < len; i++) width = Math.min(this.textMeasure.measureTextWidth(lines[i], this.textOptions), lineWidth), linesLayout.push({
+        str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
+        width: width
+      });
       bboxWH[0] = lineWidth;
     } else {
       let width, text;
       lineWidth = 0;
-      for (let i = 0, len = lines.length; i < len; i++) {
-        text = lines[i];
-        const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions);
-        width = metrics.width, lineWidth = Math.max(lineWidth, width), linesLayout.push({
-          str: text,
-          width: width,
-          ascent: metrics.ascent,
-          descent: metrics.descent
-        });
-      }
+      for (let i = 0, len = lines.length; i < len; i++) text = lines[i], width = this.textMeasure.measureTextWidth(text, this.textOptions), lineWidth = Math.max(lineWidth, width), linesLayout.push({
+        str: text,
+        width: width
+      });
       bboxWH[0] = lineWidth;
     }
     bboxWH[1] = linesLayout.length * lineHeight, bboxWH[0] = linesLayout.reduce((a, b) => Math.max(a, b.width), 0);
@@ -14627,11 +14579,11 @@ class CanvasTextLayout {
     };
   }
   lineOffset(bbox, line, textAlign, textBaseline, lineHeight, origin) {
-    return "left" === textAlign || "start" === textAlign ? line.leftOffset = 0 : "center" === textAlign ? line.leftOffset = (bbox.width - line.width) / 2 : "right" !== textAlign && "end" !== textAlign || (line.leftOffset = bbox.width - line.width), line.topOffset = lineHeight / 2 + (line.ascent - line.descent) / 2 + origin[1], origin[1] += lineHeight, line;
+    return "left" === textAlign || "start" === textAlign ? line.leftOffset = 0 : "center" === textAlign ? line.leftOffset = (bbox.width - line.width) / 2 : "right" !== textAlign && "end" !== textAlign || (line.leftOffset = bbox.width - line.width), line.topOffset = (lineHeight - this.textOptions.fontSize) / 2 + .79 * this.textOptions.fontSize + origin[1], origin[1] += lineHeight, line;
   }
 }
 
-const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "maxWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
+const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
 class Text extends Graphic {
   get font() {
     const textTheme = this.getGraphicTheme();
@@ -14640,22 +14592,26 @@ class Text extends Graphic {
   get clipedText() {
     var _a;
     const attribute = this.attribute,
-      textTheme = this.getGraphicTheme(),
-      maxWidth = this.getMaxWidth(textTheme);
-    return Number.isFinite(maxWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
+      textTheme = this.getGraphicTheme();
+    if (!this.isSimplify()) return;
+    const {
+      maxLineWidth = textTheme.maxLineWidth
+    } = attribute;
+    return Number.isFinite(maxLineWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
   }
   get clipedWidth() {
-    return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
+    if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
   }
   get cliped() {
     var _a, _b;
     const textTheme = this.getGraphicTheme(),
       attribute = this.attribute,
-      maxWidth = this.getMaxWidth(textTheme);
-    if (!Number.isFinite(maxWidth)) return !1;
-    const {
-      text: text
-    } = this.attribute;
+      {
+        maxLineWidth = textTheme.maxLineWidth,
+        text: text,
+        whiteSpace = textTheme.whiteSpace
+      } = attribute;
+    if (!Number.isFinite(maxLineWidth)) return !1;
     if (this.tryUpdateAABBBounds(), null === (_b = null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData) || void 0 === _b ? void 0 : _b.lines) {
       let mergedText = "";
       this.cache.layoutData.lines.forEach(item => {
@@ -14666,7 +14622,10 @@ class Text extends Graphic {
     return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
   }
   get multilineLayout() {
-    return this.tryUpdateAABBBounds(), this.cache.layoutData;
+    if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
+  }
+  isSimplify() {
+    return !this.isMultiLine && "vertical" !== this.attribute.direction;
   }
   get isMultiLine() {
     return Array.isArray(this.attribute.text) || "normal" === this.attribute.whiteSpace;
@@ -14739,63 +14698,8 @@ class Text extends Graphic {
     }
     return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
   }
-  updateSingallineAABBBounds(text) {
-    this.updateMultilineAABBBounds([text]);
-    const layoutData = this.cache.layoutData;
-    if (layoutData) {
-      const line = layoutData.lines[0];
-      this.cache.clipedText = line.str, this.cache.clipedWidth = line.width;
-    }
-    return this._AABBBounds;
-  }
-  updateMultilineAABBBounds(text) {
-    const textTheme = this.getGraphicTheme(),
-      {
-        direction = textTheme.direction,
-        underlineOffset = textTheme.underlineOffset
-      } = this.attribute,
-      b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
-    return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
-  }
-  updateHorizontalMultilineAABBBounds(text) {
-    var _a;
-    const textTheme = this.getGraphicTheme(),
-      attribute = this.attribute,
-      {
-        fontFamily = textTheme.fontFamily,
-        textAlign = textTheme.textAlign,
-        textBaseline = textTheme.textBaseline,
-        fontSize = textTheme.fontSize,
-        fontWeight = textTheme.fontWeight,
-        ellipsis = textTheme.ellipsis,
-        maxLineWidth: maxLineWidth,
-        stroke = textTheme.stroke,
-        wrap = textTheme.wrap,
-        ignoreBuf = textTheme.ignoreBuf,
-        lineWidth = textTheme.lineWidth,
-        whiteSpace = textTheme.whiteSpace,
-        suffixPosition = textTheme.suffixPosition
-      } = attribute,
-      buf = ignoreBuf ? 0 : 2,
-      lineHeight = this.getLineHeight(attribute, textTheme) + buf;
-    if ("normal" === whiteSpace || wrap) return this.updateWrapAABBBounds(text);
-    if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
-      const bbox = this.cache.layoutData.bbox;
-      return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-    }
-    const textMeasure = application.graphicUtil.textMeasure,
-      layoutData = new CanvasTextLayout(fontFamily, {
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        fontFamily: fontFamily
-      }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth, suffixPosition),
-      {
-        bbox: bbox
-      } = layoutData;
-    return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-  }
   updateWrapAABBBounds(text) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const textTheme = this.getGraphicTheme(),
       {
         fontFamily = textTheme.fontFamily,
@@ -14813,19 +14717,18 @@ class Text extends Graphic {
         heightLimit = 0,
         lineClamp: lineClamp
       } = this.attribute,
-      buf = ignoreBuf ? 0 : 2,
-      lineHeight = this.getLineHeight(this.attribute, textTheme) + buf;
-    if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+      lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
+      buf = ignoreBuf ? 0 : 2;
+    if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
       const bbox = this.cache.layoutData.bbox;
       return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
     }
     const textMeasure = application.graphicUtil.textMeasure,
-      textOptions = {
+      layoutObj = new CanvasTextLayout(fontFamily, {
         fontSize: fontSize,
         fontWeight: fontWeight,
         fontFamily: fontFamily
-      },
-      layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure),
+      }, textMeasure),
       lines = isArray$1(text) ? text.map(l => l.toString()) : [text.toString()],
       linesLayout = [],
       bboxWH = [0, 0];
@@ -14835,33 +14738,29 @@ class Text extends Graphic {
         const str = lines[i];
         let needCut = !0;
         if (i === lineCountLimit - 1) {
-          const clip = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1),
-            matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
+          const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1);
           linesLayout.push({
             str: clip.str,
-            width: clip.width,
-            ascent: matrics.ascent,
-            descent: matrics.descent
+            width: clip.width
           });
           break;
         }
-        const clip = textMeasure.clipText(str, textOptions, maxLineWidth, "break-word" === wordBreak);
-        if ("" !== str && "" === clip.str) {
+        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
+        if ("" !== str && "" === clip.str || clip.wordBreaked) {
           if (ellipsis) {
-            const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-            clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+            clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
           } else clip.str = "", clip.width = 0;
           needCut = !1;
         }
-        const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
-        if (linesLayout.push({
+        linesLayout.push({
           str: clip.str,
-          width: clip.width,
-          ascent: matrics.ascent,
-          descent: matrics.descent
-        }), clip.str.length === str.length) ;else if (needCut) {
-          const newStr = str.substring(clip.str.length);
-          lines.splice(i + 1, 0, newStr);
+          width: clip.width
+        });
+        let cutLength = clip.str.length;
+        if (!clip.wordBreaked || "" !== str && "" === clip.str || (needCut = !0, cutLength = clip.wordBreaked), clip.str.length === str.length) ;else if (needCut) {
+          let newStr = str.substring(cutLength);
+          "keep-all" === wordBreak && (newStr = newStr.replace(/^\s+/g, "")), lines.splice(i + 1, 0, newStr);
         }
       }
       let maxWidth = 0;
@@ -14874,28 +14773,21 @@ class Text extends Graphic {
         lineWidth = 0;
       for (let i = 0, len = lines.length; i < len; i++) {
         if (i === lineCountLimit - 1) {
-          const clip = textMeasure.clipTextWithSuffix(lines[i], textOptions, maxLineWidth, ellipsis, !1, suffixPosition),
-            matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
+          const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
           linesLayout.push({
             str: clip.str,
-            width: clip.width,
-            ascent: matrics.ascent,
-            descent: matrics.descent
+            width: clip.width
           }), lineWidth = Math.max(lineWidth, clip.width);
           break;
         }
-        text = lines[i], width = textMeasure.measureTextWidth(text, textOptions), lineWidth = Math.max(lineWidth, width);
-        const matrics = textMeasure.measureTextPixelADscentAndWidth(text, textOptions);
-        linesLayout.push({
+        text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
           str: text,
-          width: width,
-          ascent: matrics.ascent,
-          descent: matrics.descent
+          width: width
         });
       }
       bboxWH[0] = lineWidth;
     }
-    bboxWH[1] = linesLayout.length * lineHeight;
+    bboxWH[1] = linesLayout.length * (lineHeight + buf);
     const bbox = {
       xOffset: 0,
       yOffset: 0,
@@ -14906,12 +14798,210 @@ class Text extends Graphic {
     const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
     return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
   }
-  updateVerticalMultilineAABBBounds(text) {
+  updateSingallineAABBBounds(text) {
+    const textTheme = this.getGraphicTheme(),
+      {
+        direction = textTheme.direction,
+        underlineOffset = textTheme.underlineOffset
+      } = this.attribute,
+      b = "horizontal" === direction ? this.updateHorizontalSinglelineAABBBounds(text) : this.updateVerticalSinglelineAABBBounds(text);
+    return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
+  }
+  updateMultilineAABBBounds(text) {
+    const textTheme = this.getGraphicTheme(),
+      {
+        direction = textTheme.direction,
+        underlineOffset = textTheme.underlineOffset
+      } = this.attribute,
+      b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+    return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
+  }
+  updateHorizontalSinglelineAABBBounds(text) {
+    var _a, _b;
+    const textTheme = this.getGraphicTheme(),
+      {
+        wrap = textTheme.wrap
+      } = this.attribute;
+    if (wrap) return this.updateWrapAABBBounds([text]);
+    const textMeasure = application.graphicUtil.textMeasure;
+    let width, str;
+    const attribute = this.attribute,
+      {
+        maxLineWidth = textTheme.maxLineWidth,
+        ellipsis = textTheme.ellipsis,
+        textAlign = textTheme.textAlign,
+        textBaseline = textTheme.textBaseline,
+        fontFamily = textTheme.fontFamily,
+        fontSize = textTheme.fontSize,
+        fontWeight = textTheme.fontWeight,
+        stroke = textTheme.stroke,
+        lineWidth = textTheme.lineWidth,
+        ignoreBuf = textTheme.ignoreBuf,
+        whiteSpace = textTheme.whiteSpace,
+        suffixPosition = textTheme.suffixPosition
+      } = attribute;
+    if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
+    const buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
+      textFontSize = attribute.fontSize || textTheme.fontSize,
+      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) && void 0 !== _a ? _a : textFontSize + buf;
+    if (!this.shouldUpdateShape() && this.cache) {
+      width = null !== (_b = this.cache.clipedWidth) && void 0 !== _b ? _b : 0;
+      const dx = textDrawOffsetX(textAlign, width),
+        dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+      return this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    if (Number.isFinite(maxLineWidth)) {
+      if (ellipsis) {
+        const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
+          data = textMeasure.clipTextWithSuffix(text.toString(), {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily
+          }, maxLineWidth, strEllipsis, !1, suffixPosition);
+        str = data.str, width = data.width;
+      } else {
+        const data = textMeasure.clipText(text.toString(), {
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          fontFamily: fontFamily
+        }, maxLineWidth, !1);
+        str = data.str, width = data.width;
+      }
+      this.cache.clipedText = str, this.cache.clipedWidth = width;
+    } else width = textMeasure.measureTextWidth(text.toString(), {
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      fontFamily: fontFamily
+    }), this.cache.clipedText = text.toString(), this.cache.clipedWidth = width;
+    this.clearUpdateShapeTag();
+    const dx = textDrawOffsetX(textAlign, width);
+    let lh = lineHeight;
+    application.global && application.global.isSafari() && (lh += .2 * fontSize);
+    const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
+    return this._AABBBounds.set(dx, dy, dx + width, dy + lh), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+  }
+  getBaselineMapAlign() {
+    return Text.baselineMapAlign;
+  }
+  getAlignMapBaseline() {
+    return Text.alignMapBaseline;
+  }
+  updateVerticalSinglelineAABBBounds(text) {
+    var _a, _b, _c;
+    const textTheme = this.getGraphicTheme(),
+      textMeasure = application.graphicUtil.textMeasure;
+    let width;
+    const attribute = this.attribute,
+      {
+        ignoreBuf = textTheme.ignoreBuf
+      } = attribute,
+      buf = ignoreBuf ? 0 : 2,
+      {
+        maxLineWidth = textTheme.maxLineWidth,
+        ellipsis = textTheme.ellipsis,
+        fontSize = textTheme.fontSize,
+        fontWeight = textTheme.fontWeight,
+        fontFamily = textTheme.fontFamily,
+        stroke = textTheme.stroke,
+        lineWidth = textTheme.lineWidth,
+        verticalMode = textTheme.verticalMode,
+        suffixPosition = textTheme.suffixPosition
+      } = attribute,
+      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+    let {
+      textAlign = textTheme.textAlign,
+      textBaseline = textTheme.textBaseline
+    } = attribute;
+    if (!verticalMode) {
+      const t = textAlign;
+      textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
+    }
+    if (!this.shouldUpdateShape() && this.cache) {
+      width = this.cache.clipedWidth;
+      const dx = textDrawOffsetX(textAlign, width),
+        dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+      return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    let verticalList = [verticalLayout(text.toString())];
+    if (Number.isFinite(maxLineWidth)) {
+      if (ellipsis) {
+        const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
+          data = textMeasure.clipTextWithSuffixVertical(verticalList[0], {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily
+          }, maxLineWidth, strEllipsis, !1, suffixPosition);
+        verticalList = [data.verticalList], width = data.width;
+      } else {
+        const data = textMeasure.clipTextVertical(verticalList[0], {
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          fontFamily: fontFamily
+        }, maxLineWidth, !1);
+        verticalList = [data.verticalList], width = data.width;
+      }
+      this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
+    } else width = 0, verticalList[0].forEach(t => {
+      const w = t.direction === TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        fontFamily: fontFamily
+      });
+      width += w, t.width = w;
+    }), this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
+    this.clearUpdateShapeTag();
+    const dx = textDrawOffsetX(textAlign, width),
+      dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+    return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+  }
+  updateHorizontalMultilineAABBBounds(text) {
     var _a, _b;
+    const textTheme = this.getGraphicTheme(),
+      {
+        wrap = textTheme.wrap
+      } = this.attribute;
+    if (wrap) return this.updateWrapAABBBounds(text);
+    const attribute = this.attribute,
+      {
+        fontFamily = textTheme.fontFamily,
+        textAlign = textTheme.textAlign,
+        textBaseline = textTheme.textBaseline,
+        fontSize = textTheme.fontSize,
+        fontWeight = textTheme.fontWeight,
+        ellipsis = textTheme.ellipsis,
+        maxLineWidth: maxLineWidth,
+        stroke = textTheme.stroke,
+        lineWidth = textTheme.lineWidth,
+        whiteSpace = textTheme.whiteSpace,
+        suffixPosition = textTheme.suffixPosition
+      } = attribute,
+      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
+    if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
+    if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
+      const bbox = this.cache.layoutData.bbox;
+      return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    const textMeasure = application.graphicUtil.textMeasure,
+      layoutData = new CanvasTextLayout(fontFamily, {
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        fontFamily: fontFamily
+      }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth, suffixPosition),
+      {
+        bbox: bbox
+      } = layoutData;
+    return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+  }
+  updateVerticalMultilineAABBBounds(text) {
+    var _a, _b, _c;
     const textTheme = this.getGraphicTheme(),
       textMeasure = application.graphicUtil.textMeasure;
     let width;
     const attribute = this.attribute,
+      {
+        ignoreBuf = textTheme.ignoreBuf
+      } = attribute,
+      buf = ignoreBuf ? 0 : 2,
       {
         maxLineWidth = textTheme.maxLineWidth,
         ellipsis = textTheme.ellipsis,
@@ -14923,14 +15013,14 @@ class Text extends Graphic {
         verticalMode = textTheme.verticalMode,
         suffixPosition = textTheme.suffixPosition
       } = attribute,
-      lineHeight = this.getLineHeight(attribute, textTheme);
+      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
     let {
       textAlign = textTheme.textAlign,
       textBaseline = textTheme.textBaseline
     } = attribute;
     if (!verticalMode) {
       const t = textAlign;
-      textAlign = null !== (_a = Text.baselineMapAlign[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = Text.alignMapBaseline[t]) && void 0 !== _b ? _b : "top";
+      textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
     }
     if (width = 0, !this.shouldUpdateShape() && this.cache) {
       this.cache.verticalList.forEach(item => {
@@ -14978,15 +15068,6 @@ class Text extends Graphic {
       dy = textLayoutOffsetY(textBaseline, height, fontSize);
     return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
   }
-  getMaxWidth(theme) {
-    var _a, _b;
-    const attribute = this.attribute;
-    return null !== (_b = null !== (_a = attribute.maxLineWidth) && void 0 !== _a ? _a : attribute.maxWidth) && void 0 !== _b ? _b : theme.maxWidth;
-  }
-  getLineHeight(attribute, textTheme) {
-    var _a;
-    return null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
-  }
   needUpdateTags(keys) {
     let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
     return super.needUpdateTags(keys, k);
@@ -15001,12 +15082,6 @@ class Text extends Graphic {
   getNoWorkAnimateAttr() {
     return Text.NOWORK_ANIMATE_ATTR;
   }
-  getBaselineMapAlign() {
-    return Text.baselineMapAlign;
-  }
-  getAlignMapBaseline() {
-    return Text.alignMapBaseline;
-  }
 }
 Text.NOWORK_ANIMATE_ATTR = Object.assign({
   ellipsis: 1,
@@ -15085,9 +15160,7 @@ class WrapText extends Text {
           const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
           linesLayout.push({
             str: clip.str,
-            width: clip.width,
-            ascent: 0,
-            descent: 0
+            width: clip.width
           });
           break;
         }
@@ -15101,9 +15174,7 @@ class WrapText extends Text {
         }
         if (linesLayout.push({
           str: clip.str,
-          width: clip.width,
-          ascent: 0,
-          descent: 0
+          width: clip.width
         }), clip.str.length === str.length) ;else if (needCut) {
           const newStr = str.substring(clip.str.length);
           lines.splice(i + 1, 0, newStr);
@@ -15122,17 +15193,13 @@ class WrapText extends Text {
           const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
           linesLayout.push({
             str: clip.str,
-            width: clip.width,
-            ascent: 0,
-            descent: 0
+            width: clip.width
           }), lineWidth = Math.max(lineWidth, clip.width);
           break;
         }
         text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
           str: text,
-          width: width,
-          ascent: 0,
-          descent: 0
+          width: width
         });
       }
       bboxWH[0] = lineWidth;
@@ -23579,9 +23646,11 @@ function jsx(type, config) {
       name: name,
       id: id,
       attribute: attribute,
-      stateProxy: stateProxy
+      stateProxy: stateProxy,
+      animation: animation,
+      timeline: timeline
     } = _a,
-    props = __rest(_a, ["key", "name", "id", "attribute", "stateProxy"]);
+    props = __rest(_a, ["key", "name", "id", "attribute", "stateProxy", "animation", "timeline"]);
   let c = type;
   isString$1(type) && (c = graphicCreator[type]);
   const childrenList = [];
@@ -23590,7 +23659,13 @@ function jsx(type, config) {
   }
   children.length && flatten(1 === children.length ? children[0] : children, childrenList);
   const g = "Group" === c.name ? new c(attribute) : c(config);
-  return parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
+  if (parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), name && (g.name = name), isArray$1(animation)) {
+    const animate = g.animate();
+    timeline && animate.setTimeline(timeline), animation.forEach(item => {
+      animate[item[0]](...item.slice(1));
+    });
+  }
+  return g;
 }
 function parseToGraphic$1(g, childrenList, props) {
   let out,
@@ -28193,8 +28268,10 @@ let DefaultCanvasTextPicker = class extends Base3dPicker {
         } = text.attribute,
         bounds = text.AABBBounds,
         height = bounds.height(),
-        width = bounds.width();
-      return context.rect(bounds.x1, bounds.y1, width, height, z), picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked;
+        width = bounds.width(),
+        offsetY = textLayoutOffsetY(textBaseline, height, fontSize),
+        offsetX = textDrawOffsetX(textAlign, width);
+      return context.rect(offsetX + x, offsetY + y, width, height, z), picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked;
     }, (context, symbolAttribute, themeAttribute) => picked), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
   }
 };
@@ -28534,7 +28611,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.21.0-alpha.3";
+const version = "0.21.0-alpha.4";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);