@visactor/vrender-core 0.21.0-alpha.12 → 0.21.0-alpha.13

package/cjs/graphic/text.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.createText = exports.Text = void 0;
 
-const vutils_1 = require("@visactor/vutils"), text_1 = require("../common/text"), layout_1 = require("../core/contributions/textMeasure/layout"), application_1 = require("../application"), graphic_1 = require("./graphic"), theme_1 = require("./theme"), utils_1 = require("../common/utils"), constants_1 = require("./constants"), tools_1 = require("./tools"), TEXT_UPDATE_TAG_KEY = [ "text", "maxLineWidth", "maxWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...graphic_1.GRAPHIC_UPDATE_TAG_KEY ];
+const vutils_1 = require("@visactor/vutils"), text_1 = require("../common/text"), layout_1 = require("../core/contributions/textMeasure/layout"), application_1 = require("../application"), graphic_1 = require("./graphic"), theme_1 = require("./theme"), utils_1 = require("../common/utils"), constants_1 = require("./constants"), tools_1 = require("./tools"), TEXT_UPDATE_TAG_KEY = [ "text", "maxLineWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...graphic_1.GRAPHIC_UPDATE_TAG_KEY ];
 
 class Text extends graphic_1.Graphic {
     get font() {
@@ -14,17 +14,18 @@ class Text extends graphic_1.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();
+        const attribute = this.attribute, textTheme = this.getGraphicTheme();
+        if (!this.isSimplify()) return;
+        const {maxLineWidth: 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;
+        const textTheme = this.getGraphicTheme(), attribute = this.attribute, {maxLineWidth: maxLineWidth = textTheme.maxLineWidth, text: text, whiteSpace: 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 => {
@@ -35,7 +36,10 @@ class Text extends graphic_1.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;
@@ -91,61 +95,20 @@ class Text extends graphic_1.Graphic {
         (0, vutils_1.transformBoundsWithMatrix)(aabbBounds, aabbBounds, this.transMatrix), 
         aabbBounds;
     }
-    updateSingallineAABBBounds(text) {
-        this.updateMultilineAABBBounds([ text ]);
-        const layoutData = this.cache.layoutData;
-        if (layoutData && layoutData.lines && layoutData.lines.length) {
-            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: direction = textTheme.direction, underlineOffset: 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;
-    }
-    guessLineHeightBuf(fontSize) {
-        return fontSize ? .1 * fontSize : 0;
-    }
-    updateHorizontalMultilineAABBBounds(text) {
-        var _a;
-        const textTheme = this.getGraphicTheme(), attribute = this.attribute, {fontFamily: fontFamily = textTheme.fontFamily, textAlign: textAlign = textTheme.textAlign, textBaseline: textBaseline = textTheme.textBaseline, fontSize: fontSize = textTheme.fontSize, fontWeight: fontWeight = textTheme.fontWeight, ellipsis: ellipsis = textTheme.ellipsis, maxLineWidth: maxLineWidth, stroke: stroke = textTheme.stroke, wrap: wrap = textTheme.wrap, measureMode: measureMode = textTheme.measureMode, lineWidth: lineWidth = textTheme.lineWidth, whiteSpace: whiteSpace = textTheme.whiteSpace, suffixPosition: suffixPosition = textTheme.suffixPosition, ignoreBuf: ignoreBuf = textTheme.ignoreBuf, keepCenterInLine: keepCenterInLine = textTheme.keepCenterInLine} = attribute, buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize), 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_1.application.graphicUtil.textMeasure, layoutData = new layout_1.CanvasTextLayout(fontFamily, {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily,
-            lineHeight: lineHeight
-        }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, {
-            lineWidth: maxLineWidth,
-            suffixPosition: suffixPosition,
-            measureMode: measureMode,
-            keepCenterInLine: keepCenterInLine
-        }), {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;
-        const textTheme = this.getGraphicTheme(), {fontFamily: fontFamily = textTheme.fontFamily, textAlign: textAlign = textTheme.textAlign, textBaseline: textBaseline = textTheme.textBaseline, fontSize: fontSize = textTheme.fontSize, ellipsis: ellipsis = textTheme.ellipsis, maxLineWidth: maxLineWidth, stroke: stroke = textTheme.stroke, lineWidth: lineWidth = textTheme.lineWidth, wordBreak: wordBreak = textTheme.wordBreak, fontWeight: fontWeight = textTheme.fontWeight, ignoreBuf: ignoreBuf = textTheme.ignoreBuf, measureMode: measureMode = textTheme.measureMode, suffixPosition: suffixPosition = textTheme.suffixPosition, heightLimit: heightLimit = 0, lineClamp: lineClamp, keepCenterInLine: keepCenterInLine = textTheme.keepCenterInLine} = this.attribute, buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize), lineHeight = this.getLineHeight(this.attribute, textTheme, buf);
-        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+        var _a, _b, _c, _d;
+        const textTheme = this.getGraphicTheme(), {fontFamily: fontFamily = textTheme.fontFamily, textAlign: textAlign = textTheme.textAlign, textBaseline: textBaseline = textTheme.textBaseline, fontSize: fontSize = textTheme.fontSize, ellipsis: ellipsis = textTheme.ellipsis, maxLineWidth: maxLineWidth, stroke: stroke = textTheme.stroke, lineWidth: lineWidth = textTheme.lineWidth, wordBreak: wordBreak = textTheme.wordBreak, fontWeight: fontWeight = textTheme.fontWeight, ignoreBuf: ignoreBuf = textTheme.ignoreBuf, suffixPosition: suffixPosition = textTheme.suffixPosition, heightLimit: heightLimit = 0, lineClamp: lineClamp} = this.attribute, lineHeight = null !== (_a = (0, 
+        utils_1.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_1.application.graphicUtil.textMeasure, textOptions = {
+        const textMeasure = application_1.application.graphicUtil.textMeasure, layoutObj = new layout_1.CanvasTextLayout(fontFamily, {
             fontSize: fontSize,
             fontWeight: fontWeight,
-            fontFamily: fontFamily,
-            lineHeight: lineHeight
-        }, layoutObj = new layout_1.CanvasTextLayout(fontFamily, textOptions, textMeasure), lines = (0, 
-        vutils_1.isArray)(text) ? text.map((l => l.toString())) : [ text.toString() ], linesLayout = [], bboxWH = [ 0, 0 ];
+            fontFamily: fontFamily
+        }, textMeasure), lines = (0, vutils_1.isArray)(text) ? text.map((l => l.toString())) : [ text.toString() ], linesLayout = [], bboxWH = [ 0, 0 ];
         let lineCountLimit = 1 / 0;
         if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), 
         lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
@@ -153,37 +116,30 @@ class Text extends graphic_1.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, measureMode);
+                    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,
-                        keepCenterInLine: keepCenterInLine
+                        width: clip.width
                     });
                     break;
                 }
-                const clip = textMeasure.clipText(str, textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
+                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, measureMode);
                 linesLayout.push({
                     str: clip.str,
-                    width: clip.width,
-                    ascent: matrics.ascent,
-                    descent: matrics.descent,
-                    keepCenterInLine: keepCenterInLine
+                    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) {
-                    const newStr = str.substring(cutLength);
-                    lines.splice(i + 1, 0, newStr);
+                    let newStr = str.substring(cutLength);
+                    "keep-all" === wordBreak && (newStr = newStr.replace(/^\s+/g, "")), lines.splice(i + 1, 0, newStr);
                 }
             }
             let maxWidth = 0;
@@ -194,50 +150,175 @@ class Text extends graphic_1.Graphic {
             let width, text, 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, measureMode);
+                    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,
-                        keepCenterInLine: keepCenterInLine
+                        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, measureMode);
-                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,
-                    keepCenterInLine: keepCenterInLine
+                    width: width
                 });
             }
             bboxWH[0] = lineWidth;
         }
-        bboxWH[1] = linesLayout.length * lineHeight;
+        bboxWH[1] = linesLayout.length * (lineHeight + buf);
         const bbox = {
             xOffset: 0,
             yOffset: 0,
             width: bboxWH[0],
             height: bboxWH[1]
         };
-        layoutObj.LayoutBBox(bbox, textAlign, textBaseline, linesLayout);
+        layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
         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: direction = textTheme.direction, underlineOffset: 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: direction = textTheme.direction, underlineOffset: 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: wrap = textTheme.wrap} = this.attribute;
+        if (wrap) return this.updateWrapAABBBounds([ text ]);
+        const textMeasure = application_1.application.graphicUtil.textMeasure;
+        let width, str;
+        const attribute = this.attribute, {maxLineWidth: maxLineWidth = textTheme.maxLineWidth, ellipsis: ellipsis = textTheme.ellipsis, textAlign: textAlign = textTheme.textAlign, textBaseline: textBaseline = textTheme.textBaseline, fontFamily: fontFamily = textTheme.fontFamily, fontSize: fontSize = textTheme.fontSize, fontWeight: fontWeight = textTheme.fontWeight, stroke: stroke = textTheme.stroke, lineWidth: lineWidth = textTheme.lineWidth, ignoreBuf: ignoreBuf = textTheme.ignoreBuf, whiteSpace: whiteSpace = textTheme.whiteSpace, suffixPosition: 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 = (0, 
+        utils_1.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 = (0, text_1.textDrawOffsetX)(textAlign, width), dy = (0, text_1.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 = (0, text_1.textDrawOffsetX)(textAlign, width);
+        let lh = lineHeight;
+        application_1.application.global && application_1.application.global.isSafari() && (lh += .2 * fontSize);
+        const dy = (0, text_1.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_1.application.graphicUtil.textMeasure;
+        let width;
+        const attribute = this.attribute, {ignoreBuf: ignoreBuf = textTheme.ignoreBuf} = attribute, buf = ignoreBuf ? 0 : 2, {maxLineWidth: maxLineWidth = textTheme.maxLineWidth, ellipsis: ellipsis = textTheme.ellipsis, fontSize: fontSize = textTheme.fontSize, fontWeight: fontWeight = textTheme.fontWeight, fontFamily: fontFamily = textTheme.fontFamily, stroke: stroke = textTheme.stroke, lineWidth: lineWidth = textTheme.lineWidth, verticalMode: verticalMode = textTheme.verticalMode, suffixPosition: suffixPosition = textTheme.suffixPosition} = attribute, lineHeight = null !== (_a = (0, 
+        utils_1.calculateLineHeight)(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+        let {textAlign: textAlign = textTheme.textAlign, textBaseline: 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 = (0, text_1.textDrawOffsetX)(textAlign, width), dy = (0, text_1.textLayoutOffsetY)(textBaseline, lineHeight, fontSize);
+            return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), 
+            this._AABBBounds;
+        }
+        let verticalList = [ (0, tools_1.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 === tools_1.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 = (0, text_1.textDrawOffsetX)(textAlign, width), dy = (0, text_1.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: wrap = textTheme.wrap} = this.attribute;
+        if (wrap) return this.updateWrapAABBBounds(text);
+        const attribute = this.attribute, {fontFamily: fontFamily = textTheme.fontFamily, textAlign: textAlign = textTheme.textAlign, textBaseline: textBaseline = textTheme.textBaseline, fontSize: fontSize = textTheme.fontSize, fontWeight: fontWeight = textTheme.fontWeight, ellipsis: ellipsis = textTheme.ellipsis, maxLineWidth: maxLineWidth, stroke: stroke = textTheme.stroke, lineWidth: lineWidth = textTheme.lineWidth, whiteSpace: whiteSpace = textTheme.whiteSpace, suffixPosition: suffixPosition = textTheme.suffixPosition} = attribute, lineHeight = null !== (_a = (0, 
+        utils_1.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_1.application.graphicUtil.textMeasure, layoutData = new layout_1.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_1.application.graphicUtil.textMeasure;
         let width;
-        const attribute = this.attribute, {maxLineWidth: maxLineWidth = textTheme.maxLineWidth, ellipsis: ellipsis = textTheme.ellipsis, fontFamily: fontFamily = textTheme.fontFamily, fontSize: fontSize = textTheme.fontSize, fontWeight: fontWeight = textTheme.fontWeight, stroke: stroke = textTheme.stroke, lineWidth: lineWidth = textTheme.lineWidth, verticalMode: verticalMode = textTheme.verticalMode, suffixPosition: suffixPosition = textTheme.suffixPosition} = attribute, lineHeight = this.getLineHeight(attribute, textTheme, 0);
+        const attribute = this.attribute, {ignoreBuf: ignoreBuf = textTheme.ignoreBuf} = attribute, buf = ignoreBuf ? 0 : 2, {maxLineWidth: maxLineWidth = textTheme.maxLineWidth, ellipsis: ellipsis = textTheme.ellipsis, fontFamily: fontFamily = textTheme.fontFamily, fontSize: fontSize = textTheme.fontSize, fontWeight: fontWeight = textTheme.fontWeight, stroke: stroke = textTheme.stroke, lineWidth: lineWidth = textTheme.lineWidth, verticalMode: verticalMode = textTheme.verticalMode, suffixPosition: suffixPosition = textTheme.suffixPosition} = attribute, lineHeight = null !== (_a = (0, 
+        utils_1.calculateLineHeight)(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
         let {textAlign: textAlign = textTheme.textAlign, textBaseline: 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 => {
@@ -282,15 +363,6 @@ class Text extends graphic_1.Graphic {
         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, buf) {
-        var _a;
-        return null !== (_a = (0, utils_1.calculateLineHeight)(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
-    }
     needUpdateTags(keys, k = TEXT_UPDATE_TAG_KEY) {
         return super.needUpdateTags(keys, k);
     }
@@ -303,12 +375,6 @@ class Text extends graphic_1.Graphic {
     getNoWorkAnimateAttr() {
         return Text.NOWORK_ANIMATE_ATTR;
     }
-    getBaselineMapAlign() {
-        return Text.baselineMapAlign;
-    }
-    getAlignMapBaseline() {
-        return Text.alignMapBaseline;
-    }
 }
 
 function createText(attributes) {