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

package/dist/index.js

@@ -3919,6 +3919,7 @@
     const DefaultTextStyle = {
       text: "",
       maxLineWidth: 1 / 0,
+      maxWidth: 1 / 0,
       textAlign: "left",
       textBaseline: "alphabetic",
       fontSize: 16,
@@ -3996,7 +3997,8 @@
       globalZIndex: 1,
       globalCompositeOperation: "",
       overflow: "hidden",
-      shadowPickMode: "graphic"
+      shadowPickMode: "graphic",
+      keepStrokeScale: !1
     }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
     function addAttributeToPrototype(obj, c, keys) {
       keys.forEach(key => {
@@ -4271,10 +4273,32 @@
       configure(service, env) {
         this.canvas = service.canvas, this.context = service.context, service.bindTextMeasure(this);
       }
-      measureTextWidth(text, options) {
-        if (!this.context) return this.estimate(text, options).width;
+      _measureTextWithoutAlignBaseline(text, options, compatible) {
         this.context.setTextStyleWithoutAlignBaseline(options);
-        return this.context.measureText(text).width;
+        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;
       }
       estimate(text, _ref) {
         let {
@@ -4288,19 +4312,85 @@
           height: fontSize
         };
       }
-      measureTextPixelHeight(text, options) {
+      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) {
         var _a;
-        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);
+        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;
       }
-      measureTextBoundHieght(text, options) {
+      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;
-        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);
+        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
+        };
+      }
+      measureTextBoundLeftRightEstimate(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
+        };
       }
       measureText(text, options) {
         return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
@@ -6412,7 +6502,7 @@
       }
     }
 
-    class DefaultTicker {
+    class DefaultTicker extends EventEmitter {
       set mode(m) {
         this._mode !== m && (this._mode = m, this.setupTickHandler());
       }
@@ -6421,17 +6511,17 @@
       }
       constructor() {
         let timelines = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-        this.handleTick = (handler, params) => {
+        super(), this.handleTick = (handler, params) => {
           const {
             once = !1
           } = null != params ? params : {};
-          this.ifCanStop() ? this.stop() : (this._handlerTick(handler), once || handler.tick(this.interval, this.handleTick));
-        }, this._handlerTick = handler => {
+          this.ifCanStop() ? this.stop() : (this._handlerTick(), once || handler.tick(this.interval, this.handleTick));
+        }, this._handlerTick = () => {
           const time = this.tickerHandler.getTime();
           let delta = 0;
           this.lastFrameTime >= 0 && (delta = time - this.lastFrameTime), this.lastFrameTime = time, this.status === STATUS$1.RUNNING && (this.tickCounts++, this.timelines.forEach(t => {
             t.tick(delta);
-          }));
+          }), this.emit("afterTick"));
         }, this.init(), this.lastFrameTime = -1, this.tickCounts = 0, this.timelines = timelines, this.autoStop = !0;
       }
       init() {
@@ -6527,6 +6617,9 @@
       stop() {
         this.status = STATUS$1.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
       }
+      trySyncTickStatus() {
+        this.status === STATUS$1.RUNNING && this._handlerTick();
+      }
     }
 
     class ManualTickHandler {
@@ -7668,7 +7761,7 @@
           lastMatchedIndex = i, lastMatchedPoint = tagMap.get(this.toPoints[i].context);
           break;
         }
-        "clip" === this.newPointAnimateType && 0 !== this.toPoints.length && (Number.isFinite(lastMatchedIndex) ? (this.clipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension], isValidNumber$1(this.clipRange) ? this.clipRange = clamp$1(this.clipRange, 0, 1) : this.clipRange = 0) : this.clipRange = 0);
+        "clip" === this.newPointAnimateType && 0 !== this.toPoints.length && (Number.isFinite(lastMatchedIndex) ? (this.clipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension], 1 === this.clipRange && (this.shrinkClipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.fromPoints[this.fromPoints.length - 1][this.clipRangeByDimension]), isValidNumber$1(this.clipRange) ? this.clipRange = clamp$1(this.clipRange, 0, 1) : this.clipRange = 0) : this.clipRange = 0);
         let prevMatchedPoint = this.toPoints[0];
         this.interpolatePoints = this.toPoints.map((point, index) => {
           const matchedPoint = tagMap.get(point.context);
@@ -7680,11 +7773,19 @@
           return newPoint.defined = toPoint.defined, newPoint.context = toPoint.context, newPoint;
         });
       }
+      onFirstRun() {
+        const lastClipRange = this.target.attribute.clipRange;
+        isValidNumber$1(lastClipRange * this.clipRange) && (this.clipRange *= lastClipRange);
+      }
       onUpdate(end, ratio, out) {
         if (this.points = this.points.map((point, index) => {
           const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
           return newPoint.context = point.context, newPoint;
-        }), this.clipRange && (out.clipRange = this.clipRange + (1 - this.clipRange) * ratio), this.segmentsCache && this.to.segments) {
+        }), this.clipRange) {
+          if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints, out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
+          out.clipRange = this.clipRange + (1 - this.clipRange) * ratio;
+        }
+        if (this.segmentsCache && this.to.segments) {
           let start = 0;
           out.segments = this.to.segments.map((segment, index) => {
             const end = start + this.segmentsCache[index],
@@ -9100,7 +9201,7 @@
       }
       static GetFile(url, type) {
         let data = ResourceLoader.cache.get(url);
-        return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+        return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "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));
@@ -12038,7 +12139,8 @@
           x: originX = arcAttribute.x,
           y: originY = arcAttribute.y,
           scaleX = arcAttribute.scaleX,
-          scaleY = arcAttribute.scaleY
+          scaleY = arcAttribute.scaleY,
+          keepStrokeScale = arcAttribute.keepStrokeScale
         } = arc.attribute;
         let {
           innerRadius = arcAttribute.innerRadius,
@@ -12050,7 +12152,7 @@
             {
               distance = arcAttribute[key].distance
             } = borderStyle,
-            d = getScaledStroke(context, distance, context.dpr),
+            d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
             deltaAngle = distance / outerRadius,
             sign = "outerBorder" === key ? 1 : -1;
           if (arc.setAttributes({
@@ -12095,14 +12197,15 @@
             x: originX = circleAttribute.x,
             y: originY = circleAttribute.y,
             scaleX = circleAttribute.scaleX,
-            scaleY = circleAttribute.scaleY
+            scaleY = circleAttribute.scaleY,
+            keepStrokeScale = circleAttribute.keepStrokeScale
           } = circle.attribute,
           renderBorder = (borderStyle, key) => {
             const doStroke = !(!borderStyle || !borderStyle.stroke),
               {
                 distance = circleAttribute[key].distance
               } = borderStyle,
-              d = getScaledStroke(context, distance, context.dpr),
+              d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
               sign = "outerBorder" === key ? 1 : -1;
             if (context.beginPath(), context.arc(x, y, radius + sign * d, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, borderStyle, circleAttribute[key]);else if (doStroke) {
               const lastOpacity = circleAttribute[key].opacity;
@@ -12221,7 +12324,8 @@
           scaleX = rectAttribute.scaleX,
           scaleY = rectAttribute.scaleY,
           x1: x1,
-          y1: y1
+          y1: y1,
+          keepStrokeScale = rectAttribute.keepStrokeScale
         } = rect.attribute;
         let {
           width: width,
@@ -12234,7 +12338,7 @@
             {
               distance = rectAttribute[key].distance
             } = borderStyle,
-            d = getScaledStroke(context, distance, context.dpr),
+            d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
             nextX = x + sign * d,
             nextY = y + sign * d,
             dw = 2 * d;
@@ -12364,9 +12468,8 @@
       constructor() {
         super(...arguments), this.time = exports.BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
       }
-      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);
+      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);
       }
     }
     const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -12392,14 +12495,15 @@
             x: originX = symbolAttribute.x,
             y: originY = symbolAttribute.y,
             scaleX = symbolAttribute.scaleX,
-            scaleY = symbolAttribute.scaleY
+            scaleY = symbolAttribute.scaleY,
+            keepStrokeScale = symbolAttribute.keepStrokeScale
           } = symbol.attribute,
           renderBorder = (borderStyle, key) => {
             const doStroke = !(!borderStyle || !borderStyle.stroke),
               {
                 distance = symbolAttribute[key].distance
               } = borderStyle,
-              d = getScaledStroke(context, distance, context.dpr),
+              d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
               sign = "outerBorder" === key ? 1 : -1;
             if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, sign * d) && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, borderStyle, symbolAttribute[key]);else if (doStroke) {
               const lastOpacity = symbolAttribute[key].opacity;
@@ -13677,16 +13781,8 @@
             verticalMode = textAttribute.verticalMode,
             x: originX = textAttribute.x,
             y: originY = textAttribute.y
-          } = text.attribute;
-        let {
-          textAlign = textAttribute.textAlign,
-          textBaseline = textAttribute.textBaseline
-        } = text.attribute;
-        if (!verticalMode && "vertical" === direction) {
-          const t = textAlign;
-          textAlign = null !== (_a = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = text.getAlignMapBaseline()[t]) && void 0 !== _b ? _b : "top";
-        }
-        const lineHeight = null !== (_c = calculateLineHeight(text.attribute.lineHeight, fontSize)) && void 0 !== _c ? _c : fontSize,
+          } = text.attribute,
+          lineHeight = null !== (_a = calculateLineHeight(text.attribute.lineHeight, fontSize)) && void 0 !== _a ? _a : fontSize,
           data = this.valid(text, textAttribute, fillCb, strokeCb);
         if (!data) return;
         const {
@@ -13706,79 +13802,60 @@
             const matrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
             matrix.rotateByCenter(Math.PI / 2, _x, _y), context.transformFromMatrix(matrix, !0), matrixAllocate.free(matrix);
           }
-          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());
+          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))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
         };
-        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;
-              });
+        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, line.descent, (line.descent - line.ascent) / 2, z, textAttribute, context, {
+              width: line.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 {
+          let {
+            textAlign = textAttribute.textAlign,
+            textBaseline = textAttribute.textBaseline
+          } = text.attribute;
+          if (!verticalMode) {
+            const t = textAlign;
+            textAlign = null !== (_b = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = text.getAlignMapBaseline()[t]) && void 0 !== _c ? _c : "top";
+          }
           text.tryUpdateAABBBounds();
-          const cache = text.cache;
-          if (cache) {
-            context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
-            const {
+          const cache = text.cache,
+            {
               verticalList: verticalList
             } = cache;
-            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 => {
+          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, offsetX, offsetY, direction), offsetY += width;
+              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);
       }
@@ -13790,12 +13867,10 @@
           computed3dMatrix = !keepDirIn3d;
         this._draw(text, textAttribute, computed3dMatrix, drawContext, params);
       }
-      drawUnderLine(underline, lineThrough, text, x, y, z, textAttribute, context, multiOption) {
+      drawUnderLine(underline, lineThrough, text, anchorX, anchorY, offsetUnderLineY, offsetThroughLineY, z, textAttribute, context, multiOption) {
         if (lineThrough + underline <= 0) return;
         const {
             textAlign = textAttribute.textAlign,
-            textBaseline = textAttribute.textBaseline,
-            fontSize = textAttribute.fontSize,
             fill = textAttribute.fill,
             opacity = textAttribute.opacity,
             underlineOffset = textAttribute.underlineOffset,
@@ -13805,23 +13880,21 @@
           isMulti = !isNil$1(multiOption),
           w = isMulti ? multiOption.width : text.clipedWidth,
           offsetX = isMulti ? 0 : textDrawOffsetX(textAlign, w),
-          offsetY = textLayoutOffsetY(isMulti ? "alphabetic" : textBaseline, fontSize, fontSize),
           attribute = {
             lineWidth: 0,
             stroke: fill,
             opacity: opacity,
             strokeOpacity: fillOpacity
           };
-        let deltaY = isMulti ? -3 : 0;
         if (underline) {
-          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
-          const dy = y + offsetY + fontSize + underlineOffset + deltaY;
-          context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
+          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, anchorX, anchorY, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
+          const dy = anchorY + offsetUnderLineY + underlineOffset;
+          context.moveTo(anchorX + offsetX, dy, z), context.lineTo(anchorX + offsetX + w, dy, z), context.stroke();
         }
-        if (isMulti && (deltaY = -1), lineThrough) {
-          attribute.lineWidth = lineThrough, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.beginPath();
-          const dy = y + offsetY + fontSize / 2 + deltaY;
-          context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
+        if (lineThrough) {
+          attribute.lineWidth = lineThrough, context.setStrokeStyle(text, attribute, anchorX, anchorY, textAttribute), context.beginPath();
+          const dy = anchorY + offsetThroughLineY;
+          context.moveTo(anchorX + offsetX, dy, z), context.lineTo(anchorX + offsetX + w, dy, z), context.stroke();
         }
       }
     };
@@ -14116,12 +14189,10 @@
         const {
           image: url
         } = image.attribute;
-        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;
-        }
+        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;
@@ -14513,28 +14584,6 @@
         }
         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;
@@ -14545,18 +14594,29 @@
           bboxWH = [0, 0];
         if ("number" == typeof lineWidth && lineWidth !== 1 / 0) {
           let width;
-          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
-          });
+          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: metrics.width <= lineWidth ? lines[i].toString() : this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
+              width: width,
+              ascent: metrics.ascent,
+              descent: metrics.descent
+            });
+          }
           bboxWH[0] = lineWidth;
         } else {
           let width, text;
           lineWidth = 0;
-          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
-          });
+          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
+            });
+          }
           bboxWH[0] = lineWidth;
         }
         bboxWH[1] = linesLayout.length * lineHeight, bboxWH[0] = linesLayout.reduce((a, b) => Math.max(a, b.width), 0);
@@ -14585,11 +14645,11 @@
         };
       }
       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 - this.textOptions.fontSize) / 2 + .79 * this.textOptions.fontSize + 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 / 2 + (line.ascent - line.descent) / 2 + origin[1], origin[1] += lineHeight, line;
       }
     }
 
-    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
+    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];
     class Text extends Graphic {
       get font() {
         const textTheme = this.getGraphicTheme();
@@ -14598,26 +14658,22 @@
       get clipedText() {
         var _a;
         const attribute = this.attribute,
-          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();
+          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();
       }
       get clipedWidth() {
-        if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
+        return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
       }
       get cliped() {
         var _a, _b;
         const textTheme = this.getGraphicTheme(),
           attribute = this.attribute,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            text: text,
-            whiteSpace = textTheme.whiteSpace
-          } = attribute;
-        if (!Number.isFinite(maxLineWidth)) return !1;
+          maxWidth = this.getMaxWidth(textTheme);
+        if (!Number.isFinite(maxWidth)) return !1;
+        const {
+          text: text
+        } = this.attribute;
         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 => {
@@ -14628,10 +14684,7 @@
         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() {
-        if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
-      }
-      isSimplify() {
-        return !this.isMultiLine && "vertical" !== this.attribute.direction;
+        return this.tryUpdateAABBBounds(), this.cache.layoutData;
       }
       get isMultiLine() {
         return Array.isArray(this.attribute.text) || "normal" === this.attribute.whiteSpace;
@@ -14704,8 +14757,62 @@
         }
         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,
+          lineHeight = this.getLineHeight(attribute, textTheme);
+        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, _d;
+        var _a, _b, _c;
         const textTheme = this.getGraphicTheme(),
           {
             fontFamily = textTheme.fontFamily,
@@ -14723,18 +14830,18 @@
             heightLimit = 0,
             lineClamp: lineClamp
           } = this.attribute,
-          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)) {
+          lineHeight = this.getLineHeight(this.attribute, textTheme);
+        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,
-          layoutObj = new CanvasTextLayout(fontFamily, {
+          textOptions = {
             fontSize: fontSize,
             fontWeight: fontWeight,
             fontFamily: fontFamily
-          }, textMeasure),
+          },
+          layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure),
           lines = isArray$1(text) ? text.map(l => l.toString()) : [text.toString()],
           linesLayout = [],
           bboxWH = [0, 0];
@@ -14744,29 +14851,35 @@
             const str = lines[i];
             let needCut = !0;
             if (i === lineCountLimit - 1) {
-              const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1);
+              const clip = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1),
+                matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: matrics.ascent,
+                descent: matrics.descent
               });
               break;
             }
-            const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
+            const clip = textMeasure.clipText(str, textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
             if ("" !== str && "" === clip.str || clip.wordBreaked) {
               if (ellipsis) {
-                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;
+                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;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
+            const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
             linesLayout.push({
               str: clip.str,
-              width: clip.width
+              width: clip.width,
+              ascent: matrics.ascent,
+              descent: matrics.descent
             });
             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);
+              const newStr = str.substring(cutLength);
+              lines.splice(i + 1, 0, newStr);
             }
           }
           let maxWidth = 0;
@@ -14779,21 +14892,28 @@
             lineWidth = 0;
           for (let i = 0, len = lines.length; i < len; i++) {
             if (i === lineCountLimit - 1) {
-              const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+              const clip = textMeasure.clipTextWithSuffix(lines[i], textOptions, maxLineWidth, ellipsis, !1, suffixPosition),
+                matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: matrics.ascent,
+                descent: matrics.descent
               }), 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({
+            text = lines[i], width = textMeasure.measureTextWidth(text, textOptions), lineWidth = Math.max(lineWidth, width);
+            const matrics = textMeasure.measureTextPixelADscentAndWidth(text, textOptions);
+            linesLayout.push({
               str: text,
-              width: width
+              width: width,
+              ascent: matrics.ascent,
+              descent: matrics.descent
             });
           }
           bboxWH[0] = lineWidth;
         }
-        bboxWH[1] = linesLayout.length * (lineHeight + buf);
+        bboxWH[1] = linesLayout.length * lineHeight;
         const bbox = {
           xOffset: 0,
           yOffset: 0,
@@ -14804,210 +14924,12 @@
         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;
       }
-      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 === exports.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;
+        var _a, _b;
         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,
@@ -15019,14 +14941,14 @@
             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;
+          lineHeight = this.getLineHeight(attribute, textTheme);
         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";
+          textAlign = null !== (_a = Text.baselineMapAlign[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = Text.alignMapBaseline[t]) && void 0 !== _b ? _b : "top";
         }
         if (width = 0, !this.shouldUpdateShape() && this.cache) {
           this.cache.verticalList.forEach(item => {
@@ -15074,6 +14996,15 @@
           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);
@@ -15088,6 +15019,12 @@
       getNoWorkAnimateAttr() {
         return Text.NOWORK_ANIMATE_ATTR;
       }
+      getBaselineMapAlign() {
+        return Text.baselineMapAlign;
+      }
+      getAlignMapBaseline() {
+        return Text.alignMapBaseline;
+      }
     }
     Text.NOWORK_ANIMATE_ATTR = Object.assign({
       ellipsis: 1,
@@ -15166,7 +15103,9 @@
               const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: 0,
+                descent: 0
               });
               break;
             }
@@ -15180,7 +15119,9 @@
             }
             if (linesLayout.push({
               str: clip.str,
-              width: clip.width
+              width: clip.width,
+              ascent: 0,
+              descent: 0
             }), clip.str.length === str.length) ;else if (needCut) {
               const newStr = str.substring(clip.str.length);
               lines.splice(i + 1, 0, newStr);
@@ -15199,13 +15140,17 @@
               const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: 0,
+                descent: 0
               }), 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
+              width: width,
+              ascent: 0,
+              descent: 0
             });
           }
           bboxWH[0] = lineWidth;
@@ -15249,6 +15194,9 @@
           bounds.x1 = -halfS, bounds.x2 = halfS, bounds.y1 = -halfS, bounds.y2 = halfS;
         } else bounds.x1 = -size[0] / 2, bounds.x2 = size[0] / 2, bounds.y1 = -size[1] / 2, bounds.y2 = size[1] / 2;
       }
+      parseSize(size) {
+        return isNumber$1(size) ? size : Math.min(size[0], size[1]);
+      }
     }
 
     function circle(ctx, r, x, y, z) {
@@ -15259,13 +15207,13 @@
         super(...arguments), this.type = "circle", this.pathStr = "M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0";
       }
       draw(ctx, size, x, y, z) {
-        return circle(ctx, size / 2, x, y, z);
+        return circle(ctx, this.parseSize(size) / 2, x, y, z);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return circle(ctx, size / 2 + offset, x, y, z);
+        return circle(ctx, this.parseSize(size) / 2 + offset, x, y, z);
       }
       drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y} a ${r},${r} 0 1,0 ${2 * r},0 a ${r},${r} 0 1,0 -${2 * r},0`;
       }
     }
@@ -15282,10 +15230,10 @@
         super(...arguments), this.type = "cross", this.pathStr = "M-0.5,-0.2L-0.5,0.2L-0.2,0.2L-0.2,0.5L0.2,0.5L0.2,0.2L0.5,0.2L0.5,-0.2L0.2,-0.2L0.2,-0.5L-0.2,-0.5L-0.2,-0.2Z";
       }
       draw(ctx, size, x, y, z) {
-        return cross(ctx, size / 6, x, y, z);
+        return cross(ctx, this.parseSize(size) / 6, x, y, z);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return crossOffset(ctx, size / 6, x, y, offset, z);
+        return crossOffset(ctx, this.parseSize(size) / 6, x, y, offset, z);
       }
     }
     var cross$1 = new CrossSymbol();
@@ -15298,13 +15246,13 @@
         super(...arguments), this.type = "diamond", this.pathStr = "M-0.5,0L0,-0.5L0.5,0L0,0.5Z";
       }
       draw(ctx, size, x, y, z) {
-        return diamond(ctx, size / 2, x, y, z);
+        return diamond(ctx, this.parseSize(size) / 2, x, y, z);
       }
       drawFitDir(ctx, size, x, y, z) {
-        return diamond(ctx, size / 2, x, y, z);
+        return diamond(ctx, this.parseSize(size) / 2, x, y, z);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return diamond(ctx, size / 2 + offset, x, y, z);
+        return diamond(ctx, this.parseSize(size) / 2 + offset, x, y, z);
       }
     }
     var diamond$1 = new DiamondSymbol();
@@ -15318,10 +15266,10 @@
         super(...arguments), this.type = "square", this.pathStr = "M-0.5,-0.5h1v1h-1Z";
       }
       draw(ctx, size, x, y) {
-        return square(ctx, size / 2, x, y);
+        return square(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return square(ctx, size / 2 + offset, x, y);
+        return square(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
     }
     var square$1 = new SquareSymbol();
@@ -15335,10 +15283,10 @@
         super(...arguments), this.type = "triangleUp", this.pathStr = "M0.5,0.5 L-0.5,0.5 L0,-0.5 Z";
       }
       draw(ctx, size, x, y) {
-        return trianglUpOffset(ctx, size / 2, x, y);
+        return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return trianglUpOffset(ctx, size / 2, x, y, offset);
+        return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
     }
     var triangleUp = new TriangleUpSymbol();
@@ -15370,10 +15318,10 @@
         super(...arguments), this.type = "star", this.pathStr = "M0 -1L0.22451398828979266 -0.3090169943749474L0.9510565162951535 -0.30901699437494745L0.3632712640026804 0.1180339887498948L0.5877852522924732 0.8090169943749473L8.326672684688674e-17 0.3819660112501051L-0.587785252292473 0.8090169943749476L-0.3632712640026804 0.11803398874989487L-0.9510565162951536 -0.30901699437494723L-0.22451398828979274 -0.30901699437494734Z";
       }
       draw(ctx, size, transX, transY) {
-        return star(ctx, size / 2, transX, transY);
+        return star(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return star(ctx, size / 2 + offset, transX, transY);
+        return star(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var star$1 = new StarSymbol();
@@ -15391,10 +15339,10 @@
         super(...arguments), this.type = "arrow", this.pathStr = "M-0.07142857142857142,0.5L0.07142857142857142,0.5L0.07142857142857142,-0.0625L0.2,-0.0625L0,-0.5L-0.2,-0.0625L-0.07142857142857142,-0.0625Z";
       }
       draw(ctx, size, transX, transY) {
-        return arrow(ctx, size / 2, transX, transY);
+        return arrow(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow(ctx, size / 2 + offset, transX, transY);
+        return arrow(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var arrow$1 = new ArrowSymbol();
@@ -15408,10 +15356,10 @@
         super(...arguments), this.type = "wedge", this.pathStr = "M0,-0.5773502691896257L-0.125,0.28867513459481287L0.125,0.28867513459481287Z";
       }
       draw(ctx, size, transX, transY) {
-        return wedge(ctx, size / 2, transX, transY);
+        return wedge(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return wedge(ctx, size / 2 + offset, transX, transY);
+        return wedge(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var wedge$1 = new WedgeSymbol();
@@ -15424,10 +15372,10 @@
         super(...arguments), this.type = "stroke", this.pathStr = "";
       }
       draw(ctx, size, transX, transY) {
-        return stroke(ctx, size / 2, transX, transY);
+        return stroke(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return stroke(ctx, size / 2 + offset, transX, transY);
+        return stroke(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var stroke$1 = new StrokeSymbol();
@@ -15449,10 +15397,10 @@
         super(...arguments), this.type = "wye", this.pathStr = "M0.25 0.14433756729740646L0.25 0.6443375672974064L-0.25 0.6443375672974064L-0.25 0.14433756729740643L-0.6830127018922193 -0.10566243270259357L-0.4330127018922193 -0.5386751345948129L0 -0.28867513459481287L0.4330127018922193 -0.5386751345948129L0.6830127018922193 -0.10566243270259357Z";
       }
       draw(ctx, size, transX, transY) {
-        return wye(ctx, size / 2, transX, transY);
+        return wye(ctx, this.parseSize(size) / 2, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return wye(ctx, size / 2 + offset, transX, transY);
+        return wye(ctx, this.parseSize(size) / 2 + offset, transX, transY);
       }
     }
     var wye$1 = new WyeSymbol();
@@ -15465,10 +15413,10 @@
         super(...arguments), this.type = "triangleLeft", this.pathStr = "M-0.5,0 L0.5,0.5 L0.5,-0.5 Z";
       }
       draw(ctx, size, x, y) {
-        return trianglLeftOffset(ctx, size / 2, x, y, 0);
+        return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, 0);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return trianglLeftOffset(ctx, size / 2, x, y, offset);
+        return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
     }
     var triangleLeft = new TriangleLeftSymbol();
@@ -15482,10 +15430,10 @@
         super(...arguments), this.type = "triangleRight", this.pathStr = "M-0.5,0.5 L0.5,0 L-0.5,-0.5 Z";
       }
       draw(ctx, size, x, y) {
-        return trianglRightOffset(ctx, size / 2, x, y);
+        return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return trianglRightOffset(ctx, size / 2, x, y, offset);
+        return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
     }
     var triangleRight = new TriangleRightSymbol();
@@ -15499,10 +15447,10 @@
         super(...arguments), this.type = "triangleDown", this.pathStr = "M-0.5,-0.5 L0.5,-0.5 L0,0.5 Z";
       }
       draw(ctx, size, x, y) {
-        return trianglDownOffset(ctx, size / 2, x, y);
+        return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return trianglDownOffset(ctx, size / 2, x, y, offset);
+        return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y, offset);
       }
     }
     var triangleDown = new TriangleDownSymbol();
@@ -15517,10 +15465,10 @@
         super(...arguments), this.type = "thinTriangle", this.pathStr = "M0,-0.5773502691896257L-0.5,0.28867513459481287L0.5,0.28867513459481287Z";
       }
       draw(ctx, size, x, y) {
-        return thinTriangle(ctx, size / 2 / sqrt3, x, y);
+        return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3, x, y);
       }
       drawOffset(ctx, size, x, y, offset) {
-        return thinTriangle(ctx, size / 2 / sqrt3 + offset, x, y);
+        return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3 + offset, x, y);
       }
     }
     var thinTriangle$1 = new ThinTriangleSymbol();
@@ -15534,10 +15482,10 @@
         super(...arguments), this.type = "arrow2Left", this.pathStr = "M 0.25 -0.5 L -0.25 0 l 0.25 0.5";
       }
       draw(ctx, size, transX, transY) {
-        return arrow2Left(ctx, size / 4, transX, transY);
+        return arrow2Left(ctx, this.parseSize(size) / 4, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow2Left(ctx, size / 4 + offset, transX, transY);
+        return arrow2Left(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
     }
     var arrow2Left$1 = new Arrow2LeftSymbol();
@@ -15551,10 +15499,10 @@
         super(...arguments), this.type = "arrow2Right", this.pathStr = "M -0.25 -0.5 l 0.25 0 l -0.25 0.5";
       }
       draw(ctx, size, transX, transY) {
-        return arrow2Right(ctx, size / 4, transX, transY);
+        return arrow2Right(ctx, this.parseSize(size) / 4, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow2Right(ctx, size / 4 + offset, transX, transY);
+        return arrow2Right(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
     }
     var arrow2Right$1 = new Arrow2RightSymbol();
@@ -15568,10 +15516,10 @@
         super(...arguments), this.type = "arrow2Up", this.pathStr = "M -0.5 0.25 L 0 -0.25 l 0.5 0.25";
       }
       draw(ctx, size, transX, transY) {
-        return arrow2Up(ctx, size / 4, transX, transY);
+        return arrow2Up(ctx, this.parseSize(size) / 4, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow2Up(ctx, size / 4 + offset, transX, transY);
+        return arrow2Up(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
     }
     var arrow2Up$1 = new Arrow2UpSymbol();
@@ -15585,10 +15533,10 @@
         super(...arguments), this.type = "arrow2Down", this.pathStr = "M -0.5 -0.25 L 0 0.25 l 0.5 -0.25";
       }
       draw(ctx, size, transX, transY) {
-        return arrow2Down(ctx, size / 4, transX, transY);
+        return arrow2Down(ctx, this.parseSize(size) / 4, transX, transY);
       }
       drawOffset(ctx, size, transX, transY, offset) {
-        return arrow2Down(ctx, size / 4 + offset, transX, transY);
+        return arrow2Down(ctx, this.parseSize(size) / 4 + offset, transX, transY);
       }
     }
     var arrow2Down$1 = new Arrow2DownSymbol();
@@ -15601,13 +15549,13 @@
         super(...arguments), this.type = "lineV", this.pathStr = "M0,-0.5L0,0.5";
       }
       draw(ctx, size, x, y, z) {
-        return lineV(ctx, size / 2, x, y);
+        return lineV(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return lineV(ctx, size / 2 + offset, x, y);
+        return lineV(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
       drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x}, ${y - r} L ${x},${y + r}`;
       }
     }
@@ -15621,13 +15569,13 @@
         super(...arguments), this.type = "lineH", this.pathStr = "M-0.5,0L0.5,0";
       }
       draw(ctx, size, x, y, z) {
-        return lineH(ctx, size / 2, x, y);
+        return lineH(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return lineH(ctx, size / 2 + offset, x, y);
+        return lineH(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
       drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y} L ${x + r},${y}`;
       }
     }
@@ -15641,13 +15589,13 @@
         super(...arguments), this.type = "close", this.pathStr = "M-0.5,-0.5L0.5,0.5,M0.5,-0.5L-0.5,0.5";
       }
       draw(ctx, size, x, y, z) {
-        return close(ctx, size / 2, x, y);
+        return close(ctx, this.parseSize(size) / 2, x, y);
       }
       drawOffset(ctx, size, x, y, offset, z) {
-        return close(ctx, size / 2 + offset, x, y);
+        return close(ctx, this.parseSize(size) / 2 + offset, x, y);
       }
       drawToSvgPath(size, x, y, z) {
-        const r = size / 2;
+        const r = this.parseSize(size) / 2;
         return `M ${x - r}, ${y - r} L ${x + r},${y + r} M ${x + r}, ${y - r} L ${x - r},${y + r}`;
       }
     }
@@ -15681,15 +15629,18 @@
         this.pathStr = "", this.type = type, isArray$1(path) ? this.svgCache = path : this.path = path, this.isSvg = isSvg;
       }
       drawOffset(ctx, size, x, y, offset, z, cb) {
-        return this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
+        return size = this.parseSize(size), this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
           ctx.beginPath(), renderCommandList(item.path.commandList, ctx, x, y, size, size), cb && cb(item.path, item.attribute);
         }), !1) : (renderCommandList(this.path.commandList, ctx, x, y, size + offset, size + offset), !1);
       }
       draw(ctx, size, x, y, z, cb) {
-        return this.drawOffset(ctx, size, x, y, 0, z, cb);
+        return size = this.parseSize(size), this.drawOffset(ctx, size, x, y, 0, z, cb);
+      }
+      parseSize(size) {
+        return isNumber$1(size) ? size : Math.min(size[0], size[1]);
       }
       bounds(size, bounds) {
-        if (this.isSvg) {
+        if (size = this.parseSize(size), this.isSvg) {
           if (!this.svgCache) return;
           return bounds.clear(), void this.svgCache.forEach(_ref => {
             let {
@@ -16372,7 +16323,11 @@
           case "sub":
             baseline += this.descent / 2;
         }
-        "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0), this.character.stroke && (applyStrokeStyle(ctx, this.character), ctx.strokeText(text, left, baseline)), applyFillStyle(ctx, this.character), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill && ("boolean" == typeof this.character.lineThrough || "boolean" == typeof this.character.underline ? (this.character.underline && ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1), this.character.lineThrough && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)) : "underline" === this.character.textDecoration ? ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1) : "line-through" === this.character.textDecoration && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)), "vertical" === direction && ctx.restore();
+        "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0);
+        const {
+          lineWidth = 1
+        } = this.character;
+        this.character.stroke && lineWidth && (applyStrokeStyle(ctx, this.character), ctx.strokeText(text, left, baseline)), applyFillStyle(ctx, this.character), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill && ("boolean" == typeof this.character.lineThrough || "boolean" == typeof this.character.underline ? (this.character.underline && ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1), this.character.lineThrough && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)) : "underline" === this.character.textDecoration ? ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1) : "line-through" === this.character.textDecoration && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)), "vertical" === direction && ctx.restore();
       }
       getWidthWithEllips(direction) {
         let text = this.text;
@@ -18589,7 +18544,7 @@
       constructor() {
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var _a;
-        super({}), this._onVisibleChange = visible => {
+        super({}), this.tickedBeforeRender = !0, this._onVisibleChange = visible => {
           if (!(this._skipRender < 0)) if (visible) {
             if (this.dirtyBounds) {
               const b = this.window.getViewBox();
@@ -18600,7 +18555,10 @@
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
         }, this.afterRender = stage => {
-          this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null;
+          this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
+        }, this.afterTickCb = () => {
+          var _a;
+          this.tickedBeforeRender = !0, "performance" === (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) || "rendering" !== this.state && this.render();
         }, this.params = params, this.theme = new Theme(), this.hooks = {
           beforeRender: new SyncHook(["stage"]),
           afterRender: new SyncHook(["stage"])
@@ -18617,7 +18575,7 @@
           main: !0
         })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
-        });
+        }), this.ticker.on("afterTick", this.afterTickCb);
       }
       pauseRender() {
         let sr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
@@ -18846,7 +18804,7 @@
         if ("released" === this.releaseStatus) return;
         this.ticker.start(), this.timeline.resume();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.tickedBeforeRender || this.ticker.trySyncTickStatus(), this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       combineLayersToWindow() {
         if ("harmony" === this.global.env) {
@@ -18952,7 +18910,7 @@
           layer.release();
         }), this.interactiveLayer && (this.interactiveLayer.forEachChildren(item => {
           item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-        }), this.interactiveLayer.release()), this.window.release(), this.ticker.remTimeline(this.timeline), this.renderService.renderTreeRoots = [];
+        }), this.interactiveLayer.release()), this.window.release(), this.ticker.remTimeline(this.timeline), this.ticker.removeListener("afterTick", this.afterTickCb), this.renderService.renderTreeRoots = [];
       }
       setStage(stage) {}
       dirty(b, matrix) {
@@ -23652,11 +23610,9 @@
           name: name,
           id: id,
           attribute: attribute,
-          stateProxy: stateProxy,
-          animation: animation,
-          timeline: timeline
+          stateProxy: stateProxy
         } = _a,
-        props = __rest(_a, ["key", "name", "id", "attribute", "stateProxy", "animation", "timeline"]);
+        props = __rest(_a, ["key", "name", "id", "attribute", "stateProxy"]);
       let c = type;
       isString$1(type) && (c = graphicCreator[type]);
       const childrenList = [];
@@ -23665,13 +23621,7 @@
       }
       children.length && flatten(1 === children.length ? children[0] : children, childrenList);
       const g = "Group" === c.name ? new c(attribute) : c(config);
-      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;
+      return parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
     }
     function parseToGraphic$1(g, childrenList, props) {
       let out,
@@ -23939,7 +23889,7 @@
           startTime: startTime,
           startPoints: startPoints
         } = this;
-        if (eventType) return eventType;
+        if ("press" === eventType) return eventType;
         let type;
         return type = clock.now() - startTime > this.config.press.time && calcDistance(startPoints[0], point) < this.config.press.threshold ? "press" : "pan", this.eventType = type, type;
       }
@@ -24471,9 +24421,10 @@
             lineJoin = defaultParams.lineJoin,
             lineDash = defaultParams.lineDash,
             lineCap = defaultParams.lineCap,
-            miterLimit = defaultParams.miterLimit
+            miterLimit = defaultParams.miterLimit,
+            keepStrokeScale = defaultParams.keepStrokeScale
           } = attribute;
-          _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
       setTextStyleWithoutAlignBaseline(params, defaultParams, z) {
@@ -25373,8 +25324,9 @@
         return this.canvasRenderer.drawShape(graphic, pickContext, x, y, {}, null, (context, arcAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, arcAttribute, themeAttribute) => {
           if (picked) return !0;
           const lineWidth = arcAttribute.lineWidth || themeAttribute.lineWidth,
-            pickStrokeBuffer = arcAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-          return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+            pickStrokeBuffer = arcAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
+            keepStrokeScale = arcAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+          return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
         }), pickContext.highPerformanceRestore(), picked;
       }
     }
@@ -25647,8 +25599,9 @@
         if (!onlyTranslate || rect.shadowRoot || isNumber$1(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
           if (picked) return !0;
           const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth,
-            pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-          return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+            pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
+            keepStrokeScale = rectAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+          return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
         });else {
           const {
             fill = rectAttribute.fill,
@@ -25962,9 +25915,10 @@
             lineJoin = defaultParams.lineJoin,
             lineDash = defaultParams.lineDash,
             lineCap = defaultParams.lineCap,
-            miterLimit = defaultParams.miterLimit
+            miterLimit = defaultParams.miterLimit,
+            keepStrokeScale = defaultParams.keepStrokeScale
           } = attribute;
-          _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
       measureText(text) {
@@ -26592,9 +26546,10 @@
             lineJoin = defaultParams.lineJoin,
             lineDash = defaultParams.lineDash,
             lineCap = defaultParams.lineCap,
-            miterLimit = defaultParams.miterLimit
+            miterLimit = defaultParams.miterLimit,
+            keepStrokeScale = defaultParams.keepStrokeScale
           } = attribute;
-          _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params, offsetX, offsetY)), _context.setLineJoin(lineJoin), lineDash && _context.setLineDash(lineDash), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
+          _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params, offsetX, offsetY)), _context.setLineJoin(lineJoin), lineDash && _context.setLineDash(lineDash), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
         }
       }
       setTextStyleWithoutAlignBaseline(params, defaultParams) {
@@ -27634,9 +27589,10 @@
             lineJoin = defaultParams.lineJoin,
             lineDash = defaultParams.lineDash,
             lineCap = defaultParams.lineCap,
-            miterLimit = defaultParams.miterLimit
+            miterLimit = defaultParams.miterLimit,
+            keepStrokeScale = defaultParams.keepStrokeScale
           } = attribute;
-          _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+          _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
       measureText(text) {
@@ -28043,8 +27999,9 @@
         return this.canvasRenderer.drawShape(graphic, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked), (context, lineAttribute, themeAttribute) => {
           if (picked) return !0;
           const lineWidth = lineAttribute.lineWidth || themeAttribute.lineWidth,
-            pickStrokeBuffer = lineAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-          return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
+            pickStrokeBuffer = lineAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
+            keepStrokeScale = lineAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+          return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
         }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
       }
     }
@@ -28179,8 +28136,9 @@
         return this.canvasRenderer.drawShape(symbol, pickContext, x, y, {}, null, (context, symbolAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked), (context, symbolAttribute, themeAttribute) => {
           if (picked) return !0;
           const lineWidth = symbolAttribute.lineWidth || themeAttribute.lineWidth,
-            pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-          return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
+            pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
+            keepStrokeScale = symbolAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+          return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
         }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
       }
     };
@@ -28617,7 +28575,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.21.0-alpha.4";
+    const version = "0.21.0-alpha.5";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);