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

package/dist/index.es.js

@@ -3016,7 +3016,6 @@ const DefaultStrokeStyle = Object.assign({ outerBorder: Object.assign(Object.ass
 const DefaultTextStyle = {
     text: '',
     maxLineWidth: Infinity,
-    maxWidth: Infinity,
     textAlign: 'left',
     textBaseline: 'alphabetic',
     fontSize: 16,
@@ -3250,33 +3249,13 @@ let ATextMeasure = class ATextMeasure {
         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 (metrics.actualBoundingBoxAscent == null ||
-            metrics.actualBoundingBoxDescent == null ||
-            metrics.fontBoundingBoxAscent == null ||
-            metrics.fontBoundingBoxDescent == null) {
-            const { ascent, descent } = this.measureTextBoundADscentEstimate(options);
-            metrics.actualBoundingBoxAscent = ascent;
-            metrics.actualBoundingBoxDescent = descent;
-            metrics.fontBoundingBoxAscent = ascent;
-            metrics.fontBoundingBoxDescent = descent;
-        }
-        if (metrics.actualBoundingBoxLeft == null || metrics.actualBoundingBoxRight == null) {
-            const { left, right } = this.measureTextBoundLeftRightEstimate(options);
-            metrics.actualBoundingBoxLeft = left;
-            metrics.actualBoundingBoxRight = right;
-        }
-        return metrics;
+        const textMeasure = this.context.measureText(text);
+        return textMeasure.width;
     }
     estimate(text, { fontSize = DefaultTextAttribute.fontSize }) {
         let eCharLen = 0;
@@ -3289,125 +3268,24 @@ let ATextMeasure = class ATextMeasure {
             height: fontSize
         };
     }
-    measureTextWidth(text, options, textMeasure) {
-        if (!this.context) {
-            return this.estimate(text, options).width;
-        }
-        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithoutAlignBaseline(text, options);
-        return textMeasure.width;
-    }
-    measureTextBoundsWidth(text, options, textMeasure) {
-        if (!this.context) {
-            return this.estimate(text, options).width;
-        }
-        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithoutAlignBaseline(text, options);
-        return textMeasure.width;
-    }
-    measureTextBoundsLeftRight(text, options, textMeasure) {
-        if (!this.context) {
-            return this.measureTextBoundLeftRightEstimate(options);
-        }
-        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithAlignBaseline(text, options, true);
-        return {
-            left: textMeasure.actualBoundingBoxLeft,
-            right: textMeasure.actualBoundingBoxRight
-        };
-    }
-    measureTextPixelHeight(text, options, textMeasure) {
+    measureTextPixelHeight(text, options) {
         var _a;
         if (!this.context) {
             return (_a = options.fontSize) !== null && _a !== void 0 ? _a : DefaultTextStyle.fontSize;
         }
-        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, true);
+        this.context.setTextStyleWithoutAlignBaseline(options);
+        const textMeasure = this.context.measureText(text);
         return Math.abs(textMeasure.actualBoundingBoxAscent - textMeasure.actualBoundingBoxDescent);
     }
-    measureTextPixelADscent(text, options, textMeasure) {
-        if (!this.context) {
-            return this.measureTextBoundADscentEstimate(options);
-        }
-        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithAlignBaseline(text, options, true);
-        return {
-            ascent: textMeasure.actualBoundingBoxAscent,
-            descent: textMeasure.actualBoundingBoxDescent
-        };
-    }
-    measureTextBoundHieght(text, options, textMeasure) {
+    measureTextBoundHieght(text, options) {
         var _a;
         if (!this.context) {
             return (_a = options.fontSize) !== null && _a !== void 0 ? _a : DefaultTextStyle.fontSize;
         }
-        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, true);
+        this.context.setTextStyleWithoutAlignBaseline(options);
+        const textMeasure = this.context.measureText(text);
         return Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent);
     }
-    measureTextBoundADscent(text, options, textMeasure) {
-        if (!this.context) {
-            return this.measureTextBoundADscentEstimate(options);
-        }
-        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithAlignBaseline(text, options, true);
-        return {
-            ascent: textMeasure.fontBoundingBoxAscent,
-            descent: textMeasure.fontBoundingBoxDescent
-        };
-    }
-    measureTextBoundADscentEstimate(options) {
-        var _a;
-        const fontSize = (_a = options.fontSize) !== null && _a !== void 0 ? _a : DefaultTextStyle.fontSize;
-        const { textBaseline } = options;
-        if (textBaseline === 'bottom') {
-            return {
-                ascent: fontSize,
-                descent: 0
-            };
-        }
-        else if (textBaseline === 'middle') {
-            return {
-                ascent: fontSize / 2,
-                descent: fontSize / 2
-            };
-        }
-        else if (textBaseline === 'alphabetic') {
-            return {
-                ascent: 0.79 * fontSize,
-                descent: 0.21 * fontSize
-            };
-        }
-        return {
-            ascent: 0,
-            descent: fontSize
-        };
-    }
-    measureTextBoundLeftRightEstimate(options) {
-        var _a;
-        const fontSize = (_a = options.fontSize) !== null && _a !== void 0 ? _a : DefaultTextStyle.fontSize;
-        const { textAlign } = options;
-        if (textAlign === 'center') {
-            return {
-                left: fontSize / 2,
-                right: fontSize / 2
-            };
-        }
-        else if (textAlign === 'right' || textAlign === 'end') {
-            return {
-                left: fontSize,
-                right: 0
-            };
-        }
-        return {
-            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, true);
-        return {
-            ascent: out.actualBoundingBoxAscent,
-            descent: out.actualBoundingBoxDescent,
-            width: out.width
-        };
-    }
     measureText(text, options) {
         if (!this.context) {
             return this.estimate(text, options);
@@ -10932,10 +10810,10 @@ class ResourceLoader {
     static GetFile(url, type) {
         let data = ResourceLoader.cache.get(url);
         if (data) {
-            if (data.loadState === 'init' || data.loadState === 'fail') {
+            if (data.loadState === 'fail') {
                 return Promise.reject();
             }
-            else if (data.loadState === 'loading') {
+            else if (data.loadState === 'init' || data.loadState === 'loading') {
                 return data.dataPromise.then(data => data.data);
             }
             return Promise.resolve(data.data);
@@ -15996,8 +15874,13 @@ class DefaultImageRenderContribution extends DefaultRectRenderContribution {
         this.useStyle = true;
         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) {
+            image.renderFrame(context, x, y);
+        }
+        else {
+            return super.drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+        }
     }
 }
 const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -17966,82 +17849,132 @@ let DefaultCanvasTextRender = class DefaultCanvasTextRender extends BaseRender {
                 context.setTransformForCurrent();
             }
         };
-        context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
-        if (direction === 'horizontal') {
-            const { multilineLayout } = text;
-            if (!multilineLayout) {
-                context.highPerformanceRestore();
-                return;
-            }
-            const { xOffset, yOffset } = multilineLayout.bbox;
-            if (doStroke) {
-                if (strokeCb) {
-                    strokeCb(context, text.attribute, textAttribute);
+        if (text.isMultiLine) {
+            context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
+            if (direction === 'horizontal') {
+                const { multilineLayout } = text;
+                if (!multilineLayout) {
+                    context.highPerformanceRestore();
+                    return;
                 }
-                else if (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);
-                    });
+                const { xOffset, yOffset } = multilineLayout.bbox;
+                if (doStroke) {
+                    if (strokeCb) {
+                        strokeCb(context, text.attribute, textAttribute);
+                    }
+                    else if (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);
+                        });
+                    }
+                }
+                if (doFill) {
+                    if (fillCb) {
+                        fillCb(context, text.attribute, textAttribute);
+                    }
+                    else if (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) - 0.05 * fontSize, z, textAttribute, context, {
+                                width: line.width
+                            });
+                        });
+                    }
                 }
             }
-            if (doFill) {
-                if (fillCb) {
-                    fillCb(context, text.attribute, textAttribute);
+            else {
+                text.tryUpdateAABBBounds();
+                const cache = text.cache;
+                const { 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;
+                let offsetX = 0;
+                if (textBaseline === 'bottom') {
+                    offsetX = -totalHeight;
                 }
-                else if (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) - 0.05 * fontSize, z, textAttribute, context, {
-                            width: line.width
-                        });
-                    });
+                else if (textBaseline === 'middle') {
+                    offsetX = -totalHeight / 2;
+                }
+                if (textAlign === 'center') {
+                    offsetY -= totalW / 2;
                 }
+                else if (textAlign === 'right') {
+                    offsetY -= totalW;
+                }
+                verticalList.forEach((verticalData, i) => {
+                    const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0);
+                    const dw = totalW - currentW;
+                    let currentOffsetY = offsetY;
+                    if (textAlign === 'center') {
+                        currentOffsetY += dw / 2;
+                    }
+                    else if (textAlign === 'right') {
+                        currentOffsetY += dw;
+                    }
+                    verticalData.forEach(item => {
+                        const { text, width, direction } = item;
+                        drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction);
+                        currentOffsetY += width;
+                    });
+                });
             }
         }
         else {
-            text.tryUpdateAABBBounds();
-            const cache = text.cache;
-            const { 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;
-            let offsetX = 0;
-            if (textBaseline === 'bottom') {
-                offsetX = -totalHeight;
-            }
-            else if (textBaseline === 'middle') {
-                offsetX = -totalHeight / 2;
-            }
-            if (textAlign === 'center') {
-                offsetY -= totalW / 2;
-            }
-            else if (textAlign === 'right') {
-                offsetY -= totalW;
-            }
-            verticalList.forEach((verticalData, i) => {
-                const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0);
-                const dw = totalW - currentW;
-                let currentOffsetY = offsetY;
-                if (textAlign === 'center') {
-                    currentOffsetY += dw / 2;
+            if (direction === 'horizontal') {
+                context.setTextStyle(text.attribute, textAttribute, z);
+                const t = text.clipedText;
+                let dy = 0;
+                if (lineHeight !== fontSize) {
+                    if (textBaseline === 'top') {
+                        dy = (lineHeight - fontSize) / 2;
+                    }
+                    else if (textBaseline === 'middle') ;
+                    else if (textBaseline === 'bottom') {
+                        dy = -(lineHeight - fontSize) / 2;
+                    }
+                    else ;
                 }
-                else if (textAlign === 'right') {
-                    currentOffsetY += dw;
+                drawText(t, 0, dy, 0);
+            }
+            else {
+                text.tryUpdateAABBBounds();
+                const cache = text.cache;
+                if (cache) {
+                    context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
+                    const { verticalList } = cache;
+                    let offsetY = 0;
+                    const totalW = verticalList[0].reduce((a, b) => a + (b.width || 0), 0);
+                    let offsetX = 0;
+                    if (textBaseline === 'bottom') {
+                        offsetX = -lineHeight;
+                    }
+                    else if (textBaseline === 'middle') {
+                        offsetX = -lineHeight / 2;
+                    }
+                    if (textAlign === 'center') {
+                        offsetY -= totalW / 2;
+                    }
+                    else if (textAlign === 'right') {
+                        offsetY -= totalW;
+                    }
+                    context.textAlign = 'left';
+                    context.textBaseline = 'top';
+                    verticalList[0].forEach(item => {
+                        const { text, width, direction } = item;
+                        drawText(text, offsetX, offsetY, direction);
+                        offsetY += width;
+                    });
                 }
-                verticalData.forEach(item => {
-                    const { text, width, direction } = item;
-                    drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction);
-                    currentOffsetY += width;
-                });
-            });
+            }
         }
         transform3dMatrixToContextMatrix && this.restoreTransformUseContext2d(text, textAttribute, z, context);
         this.afterRenderStep(text, context, x, y, doFill, doStroke, fVisible, sVisible, textAttribute, drawContext, fillCb, strokeCb);
@@ -18522,16 +18455,18 @@ let DefaultCanvasImageRender = class DefaultCanvasImageRender extends BaseRender
     }
     draw(image, renderService, drawContext) {
         const { image: url } = image.attribute;
-        if (!url || !image.resources) {
-            return;
-        }
-        const res = image.resources.get(url);
-        if (res.state === 'loading' && isString(url)) {
-            ResourceLoader.improveImageLoading(url);
-            return;
-        }
-        else if (res.state !== 'success') {
-            return;
+        if (!image.isGifImage) {
+            if (!url || !image.resources) {
+                return;
+            }
+            const res = image.resources.get(url);
+            if (res.state === 'loading' && isString(url)) {
+                ResourceLoader.improveImageLoading(url);
+                return;
+            }
+            else if (res.state !== 'success') {
+                return;
+            }
         }
         const { context } = renderService.drawParams;
         if (!context) {
@@ -19111,6 +19046,40 @@ class CanvasTextLayout {
         }
         return bbox;
     }
+    GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, suffixPosition) {
+        const linesLayout = [];
+        const bboxWH = [width, height];
+        const bboxOffset = [0, 0];
+        while (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);
+        }
+        if (textAlign === 'left' || textAlign === 'start') ;
+        else if (textAlign === 'center') {
+            bboxOffset[0] = bboxWH[0] / -2;
+        }
+        else if (textAlign === 'right' || textAlign === 'end') {
+            bboxOffset[0] = -bboxWH[0];
+        }
+        if (textBaseline === 'top') ;
+        else if (textBaseline === 'middle') {
+            bboxOffset[1] = bboxWH[1] / -2;
+        }
+        else if (textBaseline === 'bottom') {
+            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, suffix = '', wordBreak, lineWidth, suffixPosition = 'end') {
         lines = lines.map(l => l.toString());
         const linesLayout = [];
@@ -19118,13 +19087,10 @@ class CanvasTextLayout {
         if (typeof lineWidth === 'number' && lineWidth !== Infinity) {
             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);
+                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,
-                    ascent: metrics.ascent,
-                    descent: metrics.descent
+                    width
                 });
             }
             bboxWH[0] = lineWidth;
@@ -19135,10 +19101,9 @@ class CanvasTextLayout {
             let text;
             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;
+                width = this.textMeasure.measureTextWidth(text, this.textOptions);
                 lineWidth = Math.max(lineWidth, width);
-                linesLayout.push({ str: text, width, ascent: metrics.ascent, descent: metrics.descent });
+                linesLayout.push({ str: text, width });
             }
             bboxWH[0] = lineWidth;
         }
@@ -19187,7 +19152,7 @@ class CanvasTextLayout {
         else if (textAlign === 'right' || textAlign === 'end') {
             line.leftOffset = bbox.width - line.width;
         }
-        line.topOffset = lineHeight / 2 + (line.ascent - line.descent) / 2 + origin[1];
+        line.topOffset = (lineHeight - this.textOptions.fontSize) / 2 + this.textOptions.fontSize * 0.79 + origin[1];
         origin[1] += lineHeight;
         return line;
     }
@@ -19196,7 +19161,6 @@ class CanvasTextLayout {
 const TEXT_UPDATE_TAG_KEY = [
     'text',
     'maxLineWidth',
-    'maxWidth',
     'textAlign',
     'textBaseline',
     'heightLimit',
@@ -19224,14 +19188,20 @@ class Text extends Graphic {
         var _a;
         const attribute = this.attribute;
         const textTheme = this.getGraphicTheme();
-        const maxWidth = this.getMaxWidth(textTheme);
-        if (!Number.isFinite(maxWidth)) {
+        if (!this.isSimplify()) {
+            return undefined;
+        }
+        const { maxLineWidth = textTheme.maxLineWidth } = attribute;
+        if (!Number.isFinite(maxLineWidth)) {
             return ((_a = attribute.text) !== null && _a !== void 0 ? _a : textTheme.text).toString();
         }
         this.tryUpdateAABBBounds();
         return this.cache.clipedText;
     }
     get clipedWidth() {
+        if (!this.isSimplify()) {
+            return undefined;
+        }
         this.tryUpdateAABBBounds();
         return this.cache.clipedWidth;
     }
@@ -19239,11 +19209,10 @@ class Text extends Graphic {
         var _a, _b;
         const textTheme = this.getGraphicTheme();
         const attribute = this.attribute;
-        const maxWidth = this.getMaxWidth(textTheme);
-        if (!Number.isFinite(maxWidth)) {
+        const { maxLineWidth = textTheme.maxLineWidth, text, whiteSpace = textTheme.whiteSpace } = attribute;
+        if (!Number.isFinite(maxLineWidth)) {
             return false;
         }
-        const { text } = this.attribute;
         this.tryUpdateAABBBounds();
         if ((_b = (_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData) === null || _b === void 0 ? void 0 : _b.lines) {
             let mergedText = '';
@@ -19262,9 +19231,15 @@ class Text extends Graphic {
         return this.clipedText !== attribute.text.toString();
     }
     get multilineLayout() {
+        if (!this.isMultiLine) {
+            return undefined;
+        }
         this.tryUpdateAABBBounds();
         return this.cache.layoutData;
     }
+    isSimplify() {
+        return !this.isMultiLine && this.attribute.direction !== 'vertical';
+    }
     get isMultiLine() {
         return Array.isArray(this.attribute.text) || this.attribute.whiteSpace === 'normal';
     }
@@ -19332,66 +19307,13 @@ class Text extends Graphic {
         transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix);
         return 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();
-        const { direction = textTheme.direction, underlineOffset = textTheme.underlineOffset } = this.attribute;
-        const b = direction === 'horizontal'
-            ? this.updateHorizontalMultilineAABBBounds(text)
-            : this.updateVerticalMultilineAABBBounds(text);
-        if (direction === 'horizontal') {
-            if (underlineOffset) {
-                this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset);
-            }
-        }
-        return b;
-    }
-    updateHorizontalMultilineAABBBounds(text) {
-        var _a;
-        const textTheme = this.getGraphicTheme();
-        const attribute = this.attribute;
-        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, wrap = textTheme.wrap, ignoreBuf = textTheme.ignoreBuf, lineWidth = textTheme.lineWidth, whiteSpace = textTheme.whiteSpace, suffixPosition = textTheme.suffixPosition } = attribute;
-        const buf = ignoreBuf ? 0 : 2;
-        const lineHeight = this.getLineHeight(attribute, textTheme) + buf;
-        if (whiteSpace === 'normal' || wrap) {
-            return this.updateWrapAABBBounds(text);
-        }
-        if (!this.shouldUpdateShape() && ((_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData)) {
-            const bbox = this.cache.layoutData.bbox;
-            this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
-            if (stroke) {
-                this._AABBBounds.expand(lineWidth / 2);
-            }
-            return this._AABBBounds;
-        }
-        const textMeasure = application.graphicUtil.textMeasure;
-        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
-        const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, false, maxLineWidth, suffixPosition);
-        const { bbox } = layoutData;
-        this.cache.layoutData = layoutData;
-        this.clearUpdateShapeTag();
-        this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
-        if (stroke) {
-            this._AABBBounds.expand(lineWidth / 2);
-        }
-        return this._AABBBounds;
-    }
     updateWrapAABBBounds(text) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const textTheme = this.getGraphicTheme();
         const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, ignoreBuf = textTheme.ignoreBuf, suffixPosition = textTheme.suffixPosition, heightLimit = 0, lineClamp } = this.attribute;
+        const lineHeight = (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (this.attribute.fontSize || textTheme.fontSize);
         const buf = ignoreBuf ? 0 : 2;
-        const lineHeight = this.getLineHeight(this.attribute, textTheme) + buf;
-        if (!this.shouldUpdateShape() && ((_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData)) {
+        if (!this.shouldUpdateShape() && ((_b = this.cache) === null || _b === void 0 ? void 0 : _b.layoutData)) {
             const bbox = this.cache.layoutData.bbox;
             this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
             if (stroke) {
@@ -19400,8 +19322,7 @@ class Text extends Graphic {
             return this._AABBBounds;
         }
         const textMeasure = application.graphicUtil.textMeasure;
-        const textOptions = { fontSize, fontWeight, fontFamily };
-        const layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure);
+        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
         const lines = isArray(text) ? text.map(l => l.toString()) : [text.toString()];
         const linesLayout = [];
         const bboxWH = [0, 0];
@@ -19418,22 +19339,19 @@ class Text extends Graphic {
                     const str = lines[i];
                     let needCut = true;
                     if (i === lineCountLimit - 1) {
-                        const clip = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, false, suffixPosition, i !== lines.length - 1);
-                        const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
+                        const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false, 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, wordBreak === 'break-word');
-                    if (str !== '' && clip.str === '') {
+                    const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, wordBreak !== 'break-all', wordBreak === 'keep-all');
+                    if ((str !== '' && clip.str === '') || clip.wordBreaked) {
                         if (ellipsis) {
-                            const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, false, suffixPosition);
-                            clip.str = (_b = clipEllipsis.str) !== null && _b !== void 0 ? _b : '';
-                            clip.width = (_c = clipEllipsis.width) !== null && _c !== void 0 ? _c : 0;
+                            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false, suffixPosition);
+                            clip.str = (_c = clipEllipsis.str) !== null && _c !== void 0 ? _c : '';
+                            clip.width = (_d = clipEllipsis.width) !== null && _d !== void 0 ? _d : 0;
                         }
                         else {
                             clip.str = '';
@@ -19441,16 +19359,21 @@ class Text extends Graphic {
                         }
                         needCut = false;
                     }
-                    const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
                     linesLayout.push({
                         str: clip.str,
-                        width: clip.width,
-                        ascent: matrics.ascent,
-                        descent: matrics.descent
+                        width: clip.width
                     });
+                    let cutLength = clip.str.length;
+                    if (clip.wordBreaked && !(str !== '' && clip.str === '')) {
+                        needCut = true;
+                        cutLength = clip.wordBreaked;
+                    }
                     if (clip.str.length === str.length) ;
                     else if (needCut) {
-                        const newStr = str.substring(clip.str.length);
+                        let newStr = str.substring(cutLength);
+                        if (wordBreak === 'keep-all') {
+                            newStr = newStr.replace(/^\s+/g, '');
+                        }
                         lines.splice(i + 1, 0, newStr);
                     }
                 }
@@ -19467,26 +19390,22 @@ class Text extends Graphic {
             let text;
             for (let i = 0, len = lines.length; i < len; i++) {
                 if (i === lineCountLimit - 1) {
-                    const clip = textMeasure.clipTextWithSuffix(lines[i], textOptions, maxLineWidth, ellipsis, false, suffixPosition);
-                    const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
+                    const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, false, 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);
+                width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, wordBreak === 'break-word');
                 lineWidth = Math.max(lineWidth, width);
-                const matrics = textMeasure.measureTextPixelADscentAndWidth(text, textOptions);
-                linesLayout.push({ str: text, width, ascent: matrics.ascent, descent: matrics.descent });
+                linesLayout.push({ str: text, width });
             }
             bboxWH[0] = lineWidth;
         }
-        bboxWH[1] = linesLayout.length * lineHeight;
+        bboxWH[1] = linesLayout.length * (lineHeight + buf);
         const bbox = {
             xOffset: 0,
             yOffset: 0,
@@ -19503,19 +19422,212 @@ class Text extends Graphic {
         }
         return this._AABBBounds;
     }
-    updateVerticalMultilineAABBBounds(text) {
+    updateSingallineAABBBounds(text) {
+        const textTheme = this.getGraphicTheme();
+        const { direction = textTheme.direction, underlineOffset = textTheme.underlineOffset } = this.attribute;
+        const b = direction === 'horizontal'
+            ? this.updateHorizontalSinglelineAABBBounds(text)
+            : this.updateVerticalSinglelineAABBBounds(text);
+        if (direction === 'horizontal') {
+            if (underlineOffset) {
+                this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset);
+            }
+        }
+        return b;
+    }
+    updateMultilineAABBBounds(text) {
+        const textTheme = this.getGraphicTheme();
+        const { direction = textTheme.direction, underlineOffset = textTheme.underlineOffset } = this.attribute;
+        const b = direction === 'horizontal'
+            ? this.updateHorizontalMultilineAABBBounds(text)
+            : this.updateVerticalMultilineAABBBounds(text);
+        if (direction === 'horizontal') {
+            if (underlineOffset) {
+                this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset);
+            }
+        }
+        return b;
+    }
+    updateHorizontalSinglelineAABBBounds(text) {
+        var _a, _b;
+        const textTheme = this.getGraphicTheme();
+        const { wrap = textTheme.wrap } = this.attribute;
+        if (wrap) {
+            return this.updateWrapAABBBounds([text]);
+        }
+        const textMeasure = application.graphicUtil.textMeasure;
+        let width;
+        let str;
+        const attribute = this.attribute;
+        const { 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 (whiteSpace === 'normal') {
+            return this.updateWrapAABBBounds(text);
+        }
+        const buf = ignoreBuf ? 0 : Math.max(2, fontSize * 0.075);
+        const textFontSize = attribute.fontSize || textTheme.fontSize;
+        const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) !== null && _a !== void 0 ? _a : textFontSize + buf;
+        if (!this.shouldUpdateShape() && this.cache) {
+            width = (_b = this.cache.clipedWidth) !== null && _b !== void 0 ? _b : 0;
+            const dx = textDrawOffsetX(textAlign, width);
+            const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+            this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight);
+            if (stroke) {
+                this._AABBBounds.expand(lineWidth / 2);
+            }
+            return this._AABBBounds;
+        }
+        if (Number.isFinite(maxLineWidth)) {
+            if (ellipsis) {
+                const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
+                const data = textMeasure.clipTextWithSuffix(text.toString(), { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false, suffixPosition);
+                str = data.str;
+                width = data.width;
+            }
+            else {
+                const data = textMeasure.clipText(text.toString(), { fontSize, fontWeight, fontFamily }, maxLineWidth, false);
+                str = data.str;
+                width = data.width;
+            }
+            this.cache.clipedText = str;
+            this.cache.clipedWidth = width;
+        }
+        else {
+            width = textMeasure.measureTextWidth(text.toString(), { fontSize, fontWeight, fontFamily });
+            this.cache.clipedText = text.toString();
+            this.cache.clipedWidth = width;
+        }
+        this.clearUpdateShapeTag();
+        const dx = textDrawOffsetX(textAlign, width);
+        let lh = lineHeight;
+        if (application.global && application.global.isSafari()) {
+            lh += fontSize * 0.2;
+        }
+        const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
+        this._AABBBounds.set(dx, dy, dx + width, dy + lh);
+        if (stroke) {
+            this._AABBBounds.expand(lineWidth / 2);
+        }
+        return this._AABBBounds;
+    }
+    getBaselineMapAlign() {
+        return Text.baselineMapAlign;
+    }
+    getAlignMapBaseline() {
+        return Text.alignMapBaseline;
+    }
+    updateVerticalSinglelineAABBBounds(text) {
+        var _a, _b, _c;
+        const textTheme = this.getGraphicTheme();
+        const textMeasure = application.graphicUtil.textMeasure;
+        let width;
+        const attribute = this.attribute;
+        const { ignoreBuf = textTheme.ignoreBuf } = attribute;
+        const buf = ignoreBuf ? 0 : 2;
+        const { 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;
+        const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+        let { textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline } = attribute;
+        if (!verticalMode) {
+            const t = textAlign;
+            textAlign = (_b = Text.baselineMapAlign[textBaseline]) !== null && _b !== void 0 ? _b : 'left';
+            textBaseline = (_c = Text.alignMapBaseline[t]) !== null && _c !== void 0 ? _c : 'top';
+        }
+        if (!this.shouldUpdateShape() && this.cache) {
+            width = this.cache.clipedWidth;
+            const dx = textDrawOffsetX(textAlign, width);
+            const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+            this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width);
+            if (stroke) {
+                this._AABBBounds.expand(lineWidth / 2);
+            }
+            return this._AABBBounds;
+        }
+        let verticalList = [
+            verticalLayout(text.toString())
+        ];
+        if (Number.isFinite(maxLineWidth)) {
+            if (ellipsis) {
+                const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
+                const data = textMeasure.clipTextWithSuffixVertical(verticalList[0], { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false, suffixPosition);
+                verticalList = [data.verticalList];
+                width = data.width;
+            }
+            else {
+                const data = textMeasure.clipTextVertical(verticalList[0], { fontSize, fontWeight, fontFamily }, maxLineWidth, false);
+                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, fontWeight, fontFamily });
+                width += w;
+                t.width = w;
+            });
+            this.cache.verticalList = verticalList;
+            this.cache.clipedWidth = width;
+        }
+        this.clearUpdateShapeTag();
+        const dx = textDrawOffsetX(textAlign, width);
+        const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+        this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width);
+        if (stroke) {
+            this._AABBBounds.expand(lineWidth / 2);
+        }
+        return this._AABBBounds;
+    }
+    updateHorizontalMultilineAABBBounds(text) {
         var _a, _b;
         const textTheme = this.getGraphicTheme();
+        const { wrap = textTheme.wrap } = this.attribute;
+        if (wrap) {
+            return this.updateWrapAABBBounds(text);
+        }
+        const attribute = this.attribute;
+        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, whiteSpace = textTheme.whiteSpace, suffixPosition = textTheme.suffixPosition } = attribute;
+        const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize);
+        if (whiteSpace === 'normal') {
+            return this.updateWrapAABBBounds(text);
+        }
+        if (!this.shouldUpdateShape() && ((_b = this.cache) === null || _b === void 0 ? void 0 : _b.layoutData)) {
+            const bbox = this.cache.layoutData.bbox;
+            this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
+            if (stroke) {
+                this._AABBBounds.expand(lineWidth / 2);
+            }
+            return this._AABBBounds;
+        }
+        const textMeasure = application.graphicUtil.textMeasure;
+        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
+        const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, false, maxLineWidth, suffixPosition);
+        const { bbox } = layoutData;
+        this.cache.layoutData = layoutData;
+        this.clearUpdateShapeTag();
+        this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
+        if (stroke) {
+            this._AABBBounds.expand(lineWidth / 2);
+        }
+        return this._AABBBounds;
+    }
+    updateVerticalMultilineAABBBounds(text) {
+        var _a, _b, _c;
+        const textTheme = this.getGraphicTheme();
         const textMeasure = application.graphicUtil.textMeasure;
         let width;
         const attribute = this.attribute;
+        const { ignoreBuf = textTheme.ignoreBuf } = attribute;
+        const buf = ignoreBuf ? 0 : 2;
         const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode, suffixPosition = textTheme.suffixPosition } = attribute;
-        const lineHeight = this.getLineHeight(attribute, textTheme);
+        const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
         let { textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline } = attribute;
         if (!verticalMode) {
             const t = textAlign;
-            textAlign = (_a = Text.baselineMapAlign[textBaseline]) !== null && _a !== void 0 ? _a : 'left';
-            textBaseline = (_b = Text.alignMapBaseline[t]) !== null && _b !== void 0 ? _b : 'top';
+            textAlign = (_b = Text.baselineMapAlign[textBaseline]) !== null && _b !== void 0 ? _b : 'left';
+            textBaseline = (_c = Text.alignMapBaseline[t]) !== null && _c !== void 0 ? _c : 'top';
         }
         width = 0;
         if (!this.shouldUpdateShape() && this.cache) {
@@ -19575,15 +19687,6 @@ class Text extends Graphic {
         }
         return this._AABBBounds;
     }
-    getMaxWidth(theme) {
-        var _a, _b;
-        const attribute = this.attribute;
-        return (_b = (_a = attribute.maxLineWidth) !== null && _a !== void 0 ? _a : attribute.maxWidth) !== null && _b !== void 0 ? _b : theme.maxWidth;
-    }
-    getLineHeight(attribute, textTheme) {
-        var _a;
-        return ((_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize));
-    }
     needUpdateTags(keys, k = TEXT_UPDATE_TAG_KEY) {
         return super.needUpdateTags(keys, k);
     }
@@ -19596,12 +19699,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, wordBreak: 1, direction: 1, textAlign: 1, textBaseline: 1, fontFamily: 1, fontWeight: 1 }, NOWORK_ANIMATE_ATTR);
 Text.baselineMapAlign = {
@@ -19665,9 +19762,7 @@ class WrapText extends Text {
                         const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false, suffixPosition);
                         linesLayout.push({
                             str: clip.str,
-                            width: clip.width,
-                            ascent: 0,
-                            descent: 0
+                            width: clip.width
                         });
                         break;
                     }
@@ -19686,9 +19781,7 @@ class WrapText extends Text {
                     }
                     linesLayout.push({
                         str: clip.str,
-                        width: clip.width,
-                        ascent: 0,
-                        descent: 0
+                        width: clip.width
                     });
                     if (clip.str.length === str.length) ;
                     else if (needCut) {
@@ -19712,9 +19805,7 @@ class WrapText extends Text {
                     const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, false, suffixPosition);
                     linesLayout.push({
                         str: clip.str,
-                        width: clip.width,
-                        ascent: 0,
-                        descent: 0
+                        width: clip.width
                     });
                     lineWidth = Math.max(lineWidth, clip.width);
                     break;
@@ -19722,7 +19813,7 @@ class WrapText extends Text {
                 text = lines[i];
                 width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, wordBreak === 'break-word');
                 lineWidth = Math.max(lineWidth, width);
-                linesLayout.push({ str: text, width, ascent: 0, descent: 0 });
+                linesLayout.push({ str: text, width });
             }
             bboxWH[0] = lineWidth;
         }