@visactor/vrender-components 0.21.0-alpha.1 → 0.21.0-alpha.10

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, rotatePoint, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, isNumberClose, normalizeAngle, flattenArray, cloneDeep, get, last, isRotateAABBIntersect, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, rotatePoint, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, normalizeAngle, flattenArray, cloneDeep, get, last, isRotateAABBIntersect, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -745,6 +745,11 @@ let DefaultGlobal = class {
 };
 DefaultGlobal = __decorate$P([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(EnvContribution)), __metadata$E("design:paramtypes", [Object])], DefaultGlobal);
 
+var MeasureModeEnum;
+!function (MeasureModeEnum) {
+  MeasureModeEnum[MeasureModeEnum.estimate = 0] = "estimate", MeasureModeEnum[MeasureModeEnum.actualBounding = 1] = "actualBounding", MeasureModeEnum[MeasureModeEnum.fontBounding = 2] = "fontBounding";
+}(MeasureModeEnum || (MeasureModeEnum = {}));
+
 const circleThreshold = tau - 1e-8;
 class BoundsContext {
   constructor(bounds) {
@@ -860,11 +865,12 @@ function parseSvgPath(str) {
   for (let i = 0, len = paths.length; i < len; i++) if (currPath = paths[i], coordsStr = currPath.slice(1), commandChar = currPath[0], currCommandData = [commandChar], coordsStrArr = coordsStr.match(rePathCommand), null !== coordsStrArr) {
     for (let i = 0, len = coordsStrArr.length; i < len; i++) coordStr = coordsStrArr[i], coordNumber = parseFloat(coordStr), Number.isNaN(coordNumber) || currCommandData.push(coordNumber);
     if (standardCommandLen = commandLengths[commandChar], currCommandData.length - 1 > standardCommandLen) {
-      let subCommand;
+      let subCommand,
+        bestCommandChar = commandChar;
       for (let i = 1, len = currCommandData.length; i < len; i += standardCommandLen) {
-        subCommand = [commandChar];
+        subCommand = [bestCommandChar];
         for (let j = i, subLen = i + standardCommandLen; j < subLen; j++) subCommand.push(currCommandData[j]);
-        result.push(subCommand);
+        result.push(subCommand), "m" === bestCommandChar ? bestCommandChar = "l" : "M" === bestCommandChar && (bestCommandChar = "L");
       }
     } else result.push(currCommandData);
   } else result.push(currCommandData);
@@ -2008,6 +2014,7 @@ const DefaultStrokeStyle = Object.assign({
 const DefaultTextStyle = {
   text: "",
   maxLineWidth: 1 / 0,
+  maxWidth: 1 / 0,
   textAlign: "left",
   textBaseline: "alphabetic",
   fontSize: 16,
@@ -2031,7 +2038,8 @@ const DefaultTextStyle = {
   suffixPosition: "end",
   underlineDash: [],
   underlineOffset: 0,
-  disableAutoClipedPoptip: void 0
+  disableAutoClipedPoptip: void 0,
+  measureMode: MeasureModeEnum.fontBounding
 };
 const DefaultPickStyle = {
   pickStrokeBuffer: 0
@@ -2075,6 +2083,7 @@ const DefaultAttribute = Object.assign(Object.assign(Object.assign({
   zIndex: 0,
   layout: null,
   boundsPadding: 0,
+  fillStrokeOrder: 0,
   renderStyle: "default",
   pickMode: "accurate",
   customPickShape: null,
@@ -2084,7 +2093,8 @@ const DefaultAttribute = Object.assign(Object.assign(Object.assign({
   globalZIndex: 1,
   globalCompositeOperation: "",
   overflow: "hidden",
-  shadowPickMode: "graphic"
+  shadowPickMode: "graphic",
+  keepStrokeScale: !1
 }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
 const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   startAngle: 0,
@@ -2145,6 +2155,7 @@ const DefaultLineAttribute = Object.assign(Object.assign(Object.assign({}, Defau
 });
 const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   path: new CustomPath2D(),
+  fillStrokeOrder: 1,
   customPath: () => {
     Logger.getInstance().warn("空函数");
   }
@@ -2350,10 +2361,32 @@ let ATextMeasure = class {
   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 {
@@ -2367,19 +2400,97 @@ let ATextMeasure = class {
       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;
+    return {
+      ascent: .79 * fontSize,
+      descent: .21 * 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, mode) {
+    if (!this.context) return Object.assign(Object.assign({}, this.measureTextBoundADscentEstimate(options)), {
+      width: this.estimate(text, options).width
+    });
+    const out = this._measureTextWithoutAlignBaseline(text, options, !0);
+    if (mode === MeasureModeEnum.actualBounding) return {
+      ascent: out.actualBoundingBoxAscent,
+      descent: out.actualBoundingBoxDescent,
+      width: out.width
+    };
+    if (mode === MeasureModeEnum.estimate) return Object.assign(Object.assign({}, this.measureTextBoundADscentEstimate(options)), {
+      width: out.width
+    });
+    if (mode === MeasureModeEnum.fontBounding) {
+      let ascent = out.fontBoundingBoxAscent,
+        descent = out.fontBoundingBoxDescent;
+      if (out.actualBoundingBoxDescent && descent < out.actualBoundingBoxDescent) {
+        const delta = out.actualBoundingBoxDescent - descent;
+        descent += delta, ascent -= delta;
+      } else if (out.actualBoundingBoxAscent && ascent < out.actualBoundingBoxAscent) {
+        const delta = out.actualBoundingBoxAscent - ascent;
+        ascent += delta, descent -= delta;
+      }
+      return {
+        ascent: ascent,
+        descent: descent,
+        width: out.width
+      };
+    }
+    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);
@@ -2457,6 +2568,14 @@ let ATextMeasure = class {
     return data;
   }
   _clipTextEnd(text, options, width, leftIdx, rightIdx) {
+    if (leftIdx === rightIdx) {
+      Logger.getInstance().warn(`【_clipTextEnd】不应该走到这里${text}, ${leftIdx}, ${rightIdx}`);
+      const subText = text.substring(0, rightIdx + 1);
+      return {
+        str: subText,
+        width: this.measureTextWidth(subText, options)
+      };
+    }
     const middleIdx = Math.floor((leftIdx + rightIdx) / 2),
       subText = text.substring(0, middleIdx + 1),
       strWidth = this.measureTextWidth(subText, options);
@@ -2490,7 +2609,7 @@ let ATextMeasure = class {
   }
   _clipTextStart(text, options, width, leftIdx, rightIdx) {
     const middleIdx = Math.ceil((leftIdx + rightIdx) / 2),
-      subText = text.substring(middleIdx - 1, text.length - 1),
+      subText = text.substring(middleIdx - 1, text.length),
       strWidth = this.measureTextWidth(subText, options);
     let length;
     if (strWidth > width) {
@@ -2498,18 +2617,18 @@ let ATextMeasure = class {
         str: "",
         width: 0
       };
-      const str = text.substring(middleIdx, text.length - 1);
+      const str = text.substring(middleIdx, text.length);
       return length = this.measureTextWidth(str, options), length <= width ? {
         str: str,
         width: length
-      } : this._clipTextStart(text, options, width, middleIdx, text.length - 1);
+      } : this._clipTextStart(text, options, width, middleIdx, text.length);
     }
     if (strWidth < width) {
       if (middleIdx <= 0) return {
         str: text,
         width: this.measureTextWidth(text, options)
       };
-      const str = text.substring(middleIdx - 2, text.length - 1);
+      const str = text.substring(middleIdx - 2, text.length);
       return length = this.measureTextWidth(str, options), length >= width ? {
         str: subText,
         width: strWidth
@@ -2817,7 +2936,7 @@ let DefaultWindow = class {
   }
   hasSubView() {
     const viewBox = this._handler.getViewBox();
-    return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
+    return !(0 === viewBox.x1 && 0 === viewBox.y1 && isNumberClose(this.width, viewBox.width()) && isNumberClose(this.height, viewBox.height()));
   }
   isVisible(bbox) {
     return this._handler.isVisible(bbox);
@@ -6025,9 +6144,6 @@ const SymbolRenderContribution = Symbol.for("SymbolRenderContribution");
 const TextRenderContribution = Symbol.for("TextRenderContribution");
 const InteractiveSubRenderContribution = Symbol.for("InteractiveSubRenderContribution");
 
-function textDrawOffsetY(baseline, h) {
-  return "top" === baseline ? Math.ceil(.79 * h) : "middle" === baseline ? Math.round(.3 * h) : "bottom" === baseline ? Math.round(-.21 * h) : 0;
-}
 function textDrawOffsetX(textAlign, width) {
   return "end" === textAlign || "right" === textAlign ? -width : "center" === textAlign ? -width / 2 : 0;
 }
@@ -7016,7 +7132,8 @@ class DefaultArcRenderContribution {
       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,
@@ -7028,7 +7145,7 @@ class DefaultArcRenderContribution {
         {
           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({
@@ -7073,14 +7190,15 @@ class DefaultCircleRenderContribution {
         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;
@@ -7199,7 +7317,8 @@ class DefaultRectRenderContribution {
       scaleX = rectAttribute.scaleX,
       scaleY = rectAttribute.scaleY,
       x1: x1,
-      y1: y1
+      y1: y1,
+      keepStrokeScale = rectAttribute.keepStrokeScale
     } = rect.attribute;
     let {
       width: width,
@@ -7212,7 +7331,7 @@ class DefaultRectRenderContribution {
         {
           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;
@@ -7369,14 +7488,15 @@ class DefaultSymbolRenderContribution {
         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;
@@ -7497,7 +7617,8 @@ let DefaultCanvasArcRender = class extends BaseRender {
         fill = arcAttribute.fill,
         stroke = arcAttribute.stroke,
         x: originX = arcAttribute.x,
-        y: originY = arcAttribute.y
+        y: originY = arcAttribute.y,
+        fillStrokeOrder = arcAttribute.fillStrokeOrder
       } = arc.attribute,
       data = this.valid(arc, arcAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -7533,7 +7654,17 @@ let DefaultCanvasArcRender = class extends BaseRender {
       isFullStroke: isFullStroke,
       stroke: arrayStroke
     } = parseStroke(stroke);
-    if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill())), doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()))), !isFullStroke && doStroke) {
+    if (doFill || isFullStroke) {
+      context.beginPath(), drawArcPath(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+      const _runFill = () => {
+          doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
+        },
+        _runStroke = () => {
+          doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()));
+        };
+      fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
+    }
+    if (!isFullStroke && doStroke) {
       context.beginPath();
       drawArcPath(arc, context, x, y, outerRadius, innerRadius, arrayStroke);
       beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
@@ -7551,14 +7682,20 @@ let DefaultCanvasArcRender = class extends BaseRender {
             fill = arcAttribute.fill
           } = arc.attribute,
           startAngle = endAngle;
-        if (this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill) {
-          const color = fill;
-          if ("conical" === color.gradient) {
-            const lastColor = getConicGradientAt(0, 0, endAngle, color);
-            fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
-          }
-        }
-        doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+        this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            if (doFill) {
+              const color = fill;
+              if ("conical" === color.gradient) {
+                const lastColor = getConicGradientAt(0, 0, endAngle, color);
+                fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
+              }
+            }
+          },
+          _runStroke = () => {
+            doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+          };
+        _runFill(), _runStroke();
       }
     }
     this.afterRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), tempChangeConicalColor && (fill.startAngle += conicalOffset, fill.endAngle += conicalOffset);
@@ -7596,7 +7733,8 @@ let DefaultCanvasCircleRender = class extends BaseRender {
         startAngle = circleAttribute.startAngle,
         endAngle = circleAttribute.endAngle,
         x: originX = circleAttribute.x,
-        y: originY = circleAttribute.y
+        y: originY = circleAttribute.y,
+        fillStrokeOrder = circleAttribute.fillStrokeOrder
       } = circle.attribute,
       data = this.valid(circle, circleAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -7606,7 +7744,14 @@ let DefaultCanvasCircleRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke())), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+    context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+    const _runFill = () => {
+        doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
   }
   draw(circle, renderService, drawContext, params) {
     const circleAttribute = getTheme(circle, null == params ? void 0 : params.theme).circle;
@@ -8047,7 +8192,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
     super(), this.areaRenderContribitions = areaRenderContribitions, this.numberType = AREA_NUMBER_TYPE, this.builtinContributions = [defaultAreaTextureRenderContribution, defaultAreaBackgroundRenderContribution], this.init(areaRenderContribitions);
   }
   drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     const {
       points: points
     } = area.attribute;
@@ -8071,28 +8216,31 @@ let DefaultCanvasAreaRender = class extends BaseRender {
       x: originX = 0,
       x: originY = 0
     } = area.attribute;
-    if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+    !1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
       attribute: area.attribute
-    }), stroke) {
-      const {
-        stroke = areaAttribute && areaAttribute.stroke
-      } = area.attribute;
-      if (isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
-        context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
-        for (let i = 1; i < points.length; i++) {
-          const p = points[i];
-          context.lineTo(p.x + offsetX, p.y + offsetY, z);
-        }
-      } else if (stroke[2]) {
-        const endP = points[points.length - 1];
-        context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
-        for (let i = points.length - 2; i >= 0; i--) {
-          const p = points[i];
-          context.lineTo((null !== (_d = p.x1) && void 0 !== _d ? _d : p.x) + offsetX, (null !== (_e = p.y1) && void 0 !== _e ? _e : p.y) + offsetY, z);
+    }), (() => {
+      var _a, _b;
+      if (stroke) {
+        const {
+          stroke = areaAttribute && areaAttribute.stroke
+        } = area.attribute;
+        if (isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
+          context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
+          for (let i = 1; i < points.length; i++) {
+            const p = points[i];
+            context.lineTo(p.x + offsetX, p.y + offsetY, z);
+          }
+        } else if (stroke[2]) {
+          const endP = points[points.length - 1];
+          context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
+          for (let i = points.length - 2; i >= 0; i--) {
+            const p = points[i];
+            context.lineTo((null !== (_a = p.x1) && void 0 !== _a ? _a : p.x) + offsetX, (null !== (_b = p.y1) && void 0 !== _b ? _b : p.y) + offsetY, z);
+          }
         }
+        strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
       }
-      strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
-    }
+    })();
   }
   drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
     var _a, _b, _c, _d, _e, _f;
@@ -8257,23 +8405,24 @@ let DefaultCanvasAreaRender = class extends BaseRender {
       x: originX = 0,
       x: originY = 0
     } = attribute;
-    if (!1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
+    return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
       attribute: attribute
-    }), !1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
-      const {
-        stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
-      } = attribute;
-      isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? "x" : "y", {
-        offsetX: offsetX,
-        offsetY: offsetY,
-        offsetZ: offsetZ,
-        drawConnect: connect,
-        mode: connectedType,
-        zeroX: connectedX,
-        zeroY: connectedY
-      })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
-    }
-    return !1;
+    }), (() => {
+      if (!1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
+        const {
+          stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
+        } = attribute;
+        isArray(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? "x" : "y", {
+          offsetX: offsetX,
+          offsetY: offsetY,
+          offsetZ: offsetZ,
+          drawConnect: connect,
+          mode: connectedType,
+          zeroX: connectedX,
+          zeroY: connectedY
+        })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
+      }
+    })(), !1;
   }
 };
 DefaultCanvasAreaRender = __decorate$D([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(AreaRenderContribution)), __metadata$w("design:paramtypes", [Object])], DefaultCanvasAreaRender);
@@ -8305,7 +8454,8 @@ let DefaultCanvasPathRender = class extends BaseRender {
     const pathAttribute = null !== (_a = this.tempTheme) && void 0 !== _a ? _a : getTheme(path, null == params ? void 0 : params.theme).path,
       {
         x: originX = pathAttribute.x,
-        y: originY = pathAttribute.y
+        y: originY = pathAttribute.y,
+        fillStrokeOrder = pathAttribute.fillStrokeOrder
       } = path.attribute,
       z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
       data = this.valid(path, pathAttribute, fillCb, strokeCb);
@@ -8320,7 +8470,14 @@ let DefaultCanvasPathRender = class extends BaseRender {
       const path2D = null !== (_c = path.attribute.path) && void 0 !== _c ? _c : pathAttribute.path;
       renderCommandList(path2D.commandList, context, x, y, 1, 1, z);
     }
-    context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb), doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke())), doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill())), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+    const _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke()));
+      },
+      _runFill = () => {
+        doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
   }
   draw(path, renderService, drawContext, params) {
     const pathAttribute = getTheme(path, null == params ? void 0 : params.theme).path;
@@ -8364,7 +8521,8 @@ let DefaultCanvasRectRender = class extends BaseRender {
         x1: x1,
         y1: y1,
         x: originX = rectAttribute.x,
-        y: originY = rectAttribute.y
+        y: originY = rectAttribute.y,
+        fillStrokeOrder = rectAttribute.fillStrokeOrder
       } = rect.attribute;
     let {
       width: width,
@@ -8383,7 +8541,14 @@ let DefaultCanvasRectRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     };
-    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke), doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke())), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
+    const _runFill = () => {
+        doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
   }
   draw(rect, renderService, drawContext, params) {
     const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect;
@@ -8419,7 +8584,8 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
         x: originX = symbolAttribute.x,
         y: originY = symbolAttribute.y,
         scaleX = symbolAttribute.scaleX,
-        scaleY = symbolAttribute.scaleY
+        scaleY = symbolAttribute.scaleY,
+        fillStrokeOrder = symbolAttribute.fillStrokeOrder
       } = symbol.attribute,
       data = this.valid(symbol, symbolAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -8442,14 +8608,27 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
         const obj = Object.assign({}, a);
         obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.opacity) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
       }
-      a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+      const _runFill = () => {
+          a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill()));
+        },
+        _runStroke = () => {
+          a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+        };
+      fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
     };
     if (keepDirIn3d && context.camera && context.project) {
       const p = context.project(x, y, z),
         camera = context.camera;
       context.camera = null, !1 === parsedPath.draw(context, isArray(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, void 0, callback) && context.closePath(), context.camera = camera;
     } else !1 === parsedPath.draw(context, size, x, y, z, callback) && context.closePath();
-    context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill())), doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke())), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+    const _runFill = () => {
+        doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
   }
   draw(symbol, renderService, drawContext, params) {
     const symbolAttribute = getTheme(symbol, null == params ? void 0 : params.theme).symbol;
@@ -8593,16 +8772,8 @@ let DefaultCanvasTextRender = class extends BaseRender {
         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 {
@@ -8622,79 +8793,60 @@ let DefaultCanvasTextRender = class extends BaseRender {
         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);
   }
@@ -8706,12 +8858,10 @@ let DefaultCanvasTextRender = class extends BaseRender {
       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,
@@ -8721,23 +8871,21 @@ let DefaultCanvasTextRender = class extends BaseRender {
       isMulti = !isNil(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();
     }
   }
 };
@@ -8823,7 +8971,8 @@ let DefaultCanvasPolygonRender = class extends BaseRender {
         cornerRadius = polygonAttribute.cornerRadius,
         x: originX = polygonAttribute.x,
         y: originY = polygonAttribute.y,
-        closePath = polygonAttribute.closePath
+        closePath = polygonAttribute.closePath,
+        fillStrokeOrder = polygonAttribute.fillStrokeOrder
       } = polygon.attribute,
       data = this.valid(polygon, polygonAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -8833,7 +8982,14 @@ let DefaultCanvasPolygonRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    context.beginPath(), cornerRadius <= 0 || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke())), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+    context.beginPath(), cornerRadius <= 0 || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+    const _runFill = () => {
+        doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
   }
   draw(polygon, renderService, drawContext, params) {
     const polygonAttribute = getTheme(polygon, null == params ? void 0 : params.theme).polygon;
@@ -8876,7 +9032,10 @@ let DefaultCanvasGroupRender = class {
         cornerRadius = groupAttribute.cornerRadius,
         path = groupAttribute.path,
         lineWidth = groupAttribute.lineWidth,
-        visible = groupAttribute.visible
+        visible = groupAttribute.visible,
+        fillStrokeOrder = groupAttribute.fillStrokeOrder,
+        x: originX = groupAttribute.x,
+        y: originY = groupAttribute.y
       } = group.attribute,
       fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
       sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
@@ -8902,7 +9061,14 @@ let DefaultCanvasGroupRender = class {
     };
     this._groupRenderContribitions.forEach(c => {
       c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-    }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute), doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, x, y, groupAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, x, y, groupAttribute), context.stroke())), this._groupRenderContribitions.forEach(c => {
+    }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
+    const _runFill = () => {
+        doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this._groupRenderContribitions.forEach(c => {
       c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb);
     });
   }
@@ -8968,6 +9134,7 @@ let DefaultCanvasImageRender = class extends BaseRender {
         x: originX = imageAttribute.x,
         y: originY = imageAttribute.y,
         cornerRadius = imageAttribute.cornerRadius,
+        fillStrokeOrder = imageAttribute.fillStrokeOrder,
         image: url
       } = image.attribute,
       data = this.valid(image, imageAttribute, fillCb);
@@ -8978,20 +9145,26 @@ let DefaultCanvasImageRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    if (context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
-      if (!url || !image.resources) return;
-      const res = image.resources.get(url);
-      if ("success" !== res.state) return;
-      let needRestore = !1;
-      0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
-      let repeat = 0;
-      if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
-        const pattern = context.createPattern(res.data, repeatStr[repeat]);
-        context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
-      } else context.drawImage(res.data, x, y, width, height);
-      needRestore && context.restore();
-    }
-    doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke())), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+    const _runFill = () => {
+        if (doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
+          if (!url || !image.resources) return;
+          const res = image.resources.get(url);
+          if ("success" !== res.state) return;
+          let needRestore = !1;
+          0 === cornerRadius || isArray(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
+          let repeat = 0;
+          if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
+            const pattern = context.createPattern(res.data, repeatStr[repeat]);
+            context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
+          } else context.drawImage(res.data, x, y, width, height);
+          needRestore && context.restore();
+        }
+      },
+      _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
   }
   draw(image, renderService, drawContext) {
     const {
@@ -9377,58 +9550,60 @@ class CanvasTextLayout {
   constructor(fontFamily, options, textMeasure) {
     this.fontFamily = fontFamily, this.textOptions = options, this.textMeasure = textMeasure;
   }
-  LayoutBBox(bbox, textAlign, textBaseline) {
+  LayoutBBox(bbox, textAlign, textBaseline, linesLayout) {
     if ("left" === textAlign || "start" === textAlign) bbox.xOffset = 0;else if ("center" === textAlign) bbox.xOffset = bbox.width / -2;else {
       if ("right" !== textAlign && "end" !== textAlign) throw new Error("非法的textAlign");
       bbox.xOffset = -bbox.width;
     }
-    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);
+    if ("top" === textBaseline) bbox.yOffset = 0;else if ("middle" === textBaseline) bbox.yOffset = bbox.height / -2;else if ("alphabetic" === textBaseline) {
+      let percent = .79;
+      if (1 === linesLayout.length) {
+        const lineInfo = linesLayout[0];
+        percent = lineInfo.ascent / (lineInfo.ascent + lineInfo.descent);
+      }
+      bbox.yOffset = bbox.height * -percent;
+    } else bbox.yOffset = -bbox.height;
+    return bbox;
   }
   GetLayoutByLines(lines, textAlign, textBaseline, lineHeight) {
     let suffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
     let wordBreak = arguments.length > 5 ? arguments[5] : undefined;
-    let lineWidth = arguments.length > 6 ? arguments[6] : undefined;
-    let suffixPosition = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : "end";
+    let params = arguments.length > 6 ? arguments[6] : undefined;
+    const {
+      lineWidth: lineWidth,
+      suffixPosition = "end",
+      measureMode = MeasureModeEnum.actualBounding
+    } = null != params ? params : {};
     lines = lines.map(l => l.toString());
     const linesLayout = [],
       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, measureMode);
+        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
-      });
-      bboxWH[0] = lineWidth;
+      let width,
+        text,
+        _lineWidth = 0;
+      for (let i = 0, len = lines.length; i < len; i++) {
+        text = lines[i];
+        const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions, measureMode);
+        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);
     const bbox = {
@@ -9437,7 +9612,7 @@ class CanvasTextLayout {
       width: bboxWH[0],
       height: bboxWH[1]
     };
-    return this.LayoutBBox(bbox, textAlign, textBaseline), this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
+    return this.LayoutBBox(bbox, textAlign, textBaseline, linesLayout), this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
   }
   layoutWithBBox(bbox, lines, textAlign, textBaseline, lineHeight) {
     const origin = [0, 0],
@@ -9456,11 +9631,13 @@ class CanvasTextLayout {
     };
   }
   lineOffset(bbox, line, textAlign, textBaseline, lineHeight, origin) {
-    return "left" === textAlign || "start" === textAlign ? line.leftOffset = 0 : "center" === textAlign ? line.leftOffset = (bbox.width - line.width) / 2 : "right" !== textAlign && "end" !== textAlign || (line.leftOffset = bbox.width - line.width), line.topOffset = (lineHeight - this.textOptions.fontSize) / 2 + .79 * this.textOptions.fontSize + origin[1], origin[1] += lineHeight, line;
+    "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];
+    const actualHeightWithBuf = line.ascent + line.descent + 0;
+    return actualHeightWithBuf < lineHeight - 0 && ("bottom" === textBaseline ? line.topOffset += (lineHeight - actualHeightWithBuf) / 2 : "top" === textBaseline && (line.topOffset -= (lineHeight - actualHeightWithBuf) / 2)), 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();
@@ -9469,26 +9646,22 @@ class Text extends Graphic {
   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 => {
@@ -9499,10 +9672,7 @@ class Text extends Graphic {
     return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
   }
   get multilineLayout() {
-    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;
@@ -9575,8 +9745,72 @@ class Text extends Graphic {
     }
     return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
   }
+  updateSingallineAABBBounds(text) {
+    this.updateMultilineAABBBounds([text]);
+    const layoutData = this.cache.layoutData;
+    if (layoutData) {
+      const line = layoutData.lines[0];
+      this.cache.clipedText = line.str, this.cache.clipedWidth = line.width;
+    }
+    return this._AABBBounds;
+  }
+  updateMultilineAABBBounds(text) {
+    const textTheme = this.getGraphicTheme(),
+      {
+        direction = textTheme.direction,
+        underlineOffset = textTheme.underlineOffset
+      } = this.attribute,
+      b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+    return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
+  }
+  guessLineHeightBuf(fontSize) {
+    return fontSize ? .1 * fontSize : 0;
+  }
+  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,
+        measureMode = textTheme.measureMode,
+        lineWidth = textTheme.lineWidth,
+        whiteSpace = textTheme.whiteSpace,
+        suffixPosition = textTheme.suffixPosition,
+        ignoreBuf = textTheme.ignoreBuf
+      } = attribute,
+      buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize),
+      lineHeight = this.getLineHeight(attribute, textTheme) + buf;
+    if ("normal" === whiteSpace || wrap) return this.updateWrapAABBBounds(text);
+    if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+      const bbox = this.cache.layoutData.bbox;
+      return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    const textMeasure = application.graphicUtil.textMeasure,
+      layoutData = new CanvasTextLayout(fontFamily, {
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        fontFamily: fontFamily,
+        lineHeight: lineHeight
+      }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, {
+        lineWidth: maxLineWidth,
+        suffixPosition: suffixPosition,
+        measureMode: measureMode
+      }),
+      {
+        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,
@@ -9590,22 +9824,25 @@ class Text extends Graphic {
         wordBreak = textTheme.wordBreak,
         fontWeight = textTheme.fontWeight,
         ignoreBuf = textTheme.ignoreBuf,
+        measureMode = textTheme.measureMode,
         suffixPosition = textTheme.suffixPosition,
         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)) {
+      buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize),
+      lineHeight = this.getLineHeight(this.attribute, textTheme) + buf;
+    if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
       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),
+        fontFamily: fontFamily,
+        lineHeight: lineHeight
+      },
+      layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure),
       lines = isArray(text) ? text.map(l => l.toString()) : [text.toString()],
       linesLayout = [],
       bboxWH = [0, 0];
@@ -9615,29 +9852,35 @@ class Text extends Graphic {
         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, measureMode);
           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, measureMode);
         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;
@@ -9650,235 +9893,44 @@ class Text extends Graphic {
         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, measureMode);
           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, measureMode);
+        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,
       width: bboxWH[0],
       height: bboxWH[1]
     };
-    layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
+    layoutObj.LayoutBBox(bbox, textAlign, textBaseline, linesLayout);
     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 === 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,
@@ -9890,14 +9942,14 @@ class Text extends Graphic {
         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 => {
@@ -9945,6 +9997,15 @@ class Text extends Graphic {
       dy = textLayoutOffsetY(textBaseline, height, fontSize);
     return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
   }
+  getMaxWidth(theme) {
+    var _a, _b;
+    const attribute = this.attribute;
+    return null !== (_b = null !== (_a = attribute.maxLineWidth) && void 0 !== _a ? _a : attribute.maxWidth) && void 0 !== _b ? _b : theme.maxWidth;
+  }
+  getLineHeight(attribute, textTheme) {
+    var _a;
+    return null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
+  }
   needUpdateTags(keys) {
     let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
     return super.needUpdateTags(keys, k);
@@ -9959,6 +10020,12 @@ class Text extends Graphic {
   getNoWorkAnimateAttr() {
     return Text.NOWORK_ANIMATE_ATTR;
   }
+  getBaselineMapAlign() {
+    return Text.baselineMapAlign;
+  }
+  getAlignMapBaseline() {
+    return Text.alignMapBaseline;
+  }
 }
 Text.NOWORK_ANIMATE_ATTR = Object.assign({
   ellipsis: 1,
@@ -10037,7 +10104,9 @@ class WrapText extends Text {
           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;
         }
@@ -10051,7 +10120,9 @@ class WrapText extends Text {
         }
         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);
@@ -10070,13 +10141,17 @@ class WrapText extends Text {
           const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
           linesLayout.push({
             str: clip.str,
-            width: clip.width
+            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;
@@ -10120,6 +10195,9 @@ class BaseSymbol {
       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(size) ? size : Math.min(size[0], size[1]);
+  }
 }
 
 function circle(ctx, r, x, y, z) {
@@ -10130,13 +10208,13 @@ class CircleSymbol extends BaseSymbol {
     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`;
   }
 }
@@ -10153,10 +10231,10 @@ class CrossSymbol extends BaseSymbol {
     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();
@@ -10169,13 +10247,13 @@ class DiamondSymbol extends BaseSymbol {
     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();
@@ -10189,10 +10267,10 @@ class SquareSymbol extends BaseSymbol {
     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();
@@ -10206,10 +10284,10 @@ class TriangleUpSymbol extends BaseSymbol {
     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();
@@ -10241,10 +10319,10 @@ class StarSymbol extends BaseSymbol {
     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();
@@ -10262,10 +10340,10 @@ class ArrowSymbol extends BaseSymbol {
     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();
@@ -10279,10 +10357,10 @@ class WedgeSymbol extends BaseSymbol {
     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();
@@ -10295,10 +10373,10 @@ class StrokeSymbol extends BaseSymbol {
     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();
@@ -10320,10 +10398,10 @@ class WyeSymbol extends BaseSymbol {
     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();
@@ -10336,10 +10414,10 @@ class TriangleLeftSymbol extends BaseSymbol {
     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();
@@ -10353,10 +10431,10 @@ class TriangleRightSymbol extends BaseSymbol {
     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();
@@ -10370,10 +10448,10 @@ class TriangleDownSymbol extends BaseSymbol {
     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();
@@ -10388,10 +10466,10 @@ class ThinTriangleSymbol extends BaseSymbol {
     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();
@@ -10405,10 +10483,10 @@ class Arrow2LeftSymbol extends BaseSymbol {
     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();
@@ -10422,10 +10500,10 @@ class Arrow2RightSymbol extends BaseSymbol {
     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();
@@ -10439,10 +10517,10 @@ class Arrow2UpSymbol extends BaseSymbol {
     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();
@@ -10456,10 +10534,10 @@ class Arrow2DownSymbol extends BaseSymbol {
     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();
@@ -10472,13 +10550,13 @@ class LineVSymbol extends BaseSymbol {
     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}`;
   }
 }
@@ -10492,13 +10570,13 @@ class LineHSymbol extends BaseSymbol {
     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}`;
   }
 }
@@ -10512,13 +10590,13 @@ class CloseSymbol extends BaseSymbol {
     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}`;
   }
 }
@@ -10552,15 +10630,18 @@ class CustomSymbolClass {
     this.pathStr = "", this.type = type, isArray(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(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 {
@@ -11064,7 +11145,11 @@ class Paragraph {
       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;
@@ -12925,27 +13010,9 @@ function simplifyRadialDist(points, sqTolerance) {
   for (let i = 1, len = points.length; i < len; i++) deltaX = points[i].x - lastX, deltaY = points[i].y - lastY, deltaX * deltaX + deltaY * deltaY > sqTolerance && (lastX = points[i].x, lastY = points[i].y, newPoints.push(points[i]));
   return points[points.length - 1].x === lastX && points[points.length - 1].y === lastY || newPoints.push(points[points.length - 1]), newPoints;
 }
-function simplifyDPStep(points, startIdx, endIdx, sqTolerance, simplified) {
-  let maxSqDist = sqTolerance,
-    nextIdx = startIdx;
-  const startX = points[startIdx].x,
-    startY = points[startIdx].y,
-    vecX2 = points[endIdx].x - startX,
-    vecY2 = points[endIdx].y - startY,
-    sqLength = vecX2 * vecX2 + vecY2 * vecY2;
-  let area, sqArea, sqDistance, vecX1, vecY1;
-  for (let i = startIdx + 1, len = endIdx - 1; i < len; i++) vecX1 = points[i].x - startX, vecY1 = points[i].y - startY, area = vecX1 * vecY2 - vecX2 * vecY1, sqArea = area * area, sqDistance = sqArea / sqLength, sqDistance > maxSqDist && (maxSqDist = sqDistance, nextIdx = i);
-  maxSqDist > sqTolerance && (nextIdx - startIdx > 2 && simplifyDPStep(points, startIdx, nextIdx, sqTolerance, simplified), simplified.push(points[nextIdx], points[nextIdx + 1]), endIdx - nextIdx > 2 && simplifyDPStep(points, nextIdx, endIdx, sqTolerance, simplified));
-}
-function simplifyDouglasPeucker(points, sqTolerance) {
-  const lastIdx = points.length - 1,
-    simplified = [points[0]];
-  return simplifyDPStep(points, 0, lastIdx, sqTolerance, simplified), simplified.push(points[lastIdx]), simplified;
-}
 function flatten_simplify(points, tolerance, highestQuality) {
   if (points.length <= 10) return points;
-  const sqTolerance = void 0 !== tolerance ? tolerance * tolerance : 1;
-  return points = simplifyDouglasPeucker(points = highestQuality ? points : simplifyRadialDist(points, sqTolerance), sqTolerance);
+  return points = highestQuality ? points : simplifyRadialDist(points, void 0 !== tolerance ? tolerance * tolerance : 1);
 }
 
 let loadArcModule = !1;
@@ -13269,8 +13336,9 @@ class PickerBase {
     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;
   }
 }
@@ -13492,8 +13560,9 @@ class RectPickerBase {
     if (!onlyTranslate || rect.shadowRoot || isNumber(cornerRadius, !0) && 0 !== cornerRadius || isArray(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,
@@ -13672,8 +13741,9 @@ class BaseLinePicker extends BaseRender {
     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;
   }
 }
@@ -13808,8 +13878,9 @@ let DefaultCanvasSymbolPicker = class extends Base3dPicker {
     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;
   }
 };
@@ -14456,6 +14527,288 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var ScrollBarPlugin_1;
+let ScrollBarPlugin = ScrollBarPlugin_1 = class ScrollBarPlugin {
+    constructor() {
+        this.name = 'scrollbar';
+        this.activeEvent = 'onRegister';
+        this._uid = Generator.GenAutoIncrementId();
+        this.key = this.name + this._uid;
+        this.scroll = (e) => {
+            var _a, _b;
+            const graphic = e.target;
+            const data = this.getScrollContainer(graphic);
+            if (!data && !this.scrollContainer) {
+                return;
+            }
+            if (!data && this.scrollContainer) {
+                if (!this.scrollContainer.g.stage || this.scrollContainer.g.stage !== graphic.stage) {
+                    return;
+                }
+                const newScrollContainer = this.formatScrollContainer(this.scrollContainer.g);
+                if (!newScrollContainer) {
+                    this.clearScrollbar(this.scrollContainer.g, 'all');
+                    return;
+                }
+                if (this.scrollContainer.showH && !newScrollContainer.showH) {
+                    this.clearScrollbar(this.scrollContainer.g, 'horizontal');
+                }
+                if (this.scrollContainer.showV && !newScrollContainer.showV) {
+                    this.clearScrollbar(this.scrollContainer.g, 'vertical');
+                }
+                this.scrollContainer = newScrollContainer;
+            }
+            else if (data && this.scrollContainer && data.g !== this.scrollContainer.g) {
+                this.clearScrollbar(this.scrollContainer.g, 'all');
+            }
+            this.scrollContainer = data !== null && data !== void 0 ? data : this.scrollContainer;
+            const scrollContainer = data.g;
+            const { width, height, scrollX = 0, scrollY = 0 } = scrollContainer.attribute;
+            let newScrollX = scrollX;
+            let newScrollY = scrollY;
+            let { showH, showV } = data;
+            this.scrollContainerBounds = new Bounds().set(0, 0, scrollContainer.attribute.width, scrollContainer.attribute.height);
+            if (showH && showH) {
+                if (abs(e.deltaX) > abs(e.deltaY)) {
+                    showH = showH && true;
+                    showV = showV && false;
+                }
+                else {
+                    showH = showH && false;
+                    showV = showV && true;
+                }
+            }
+            const childrenBounds = this.childrenBounds;
+            childrenBounds.clear();
+            childrenBounds.set(0, 0, scrollContainer.AABBBounds.width(), scrollContainer.AABBBounds.height());
+            const scrollWidth = childrenBounds.width();
+            const scrollHeight = childrenBounds.height();
+            if (showH) {
+                newScrollX = Math.max(Math.min(((_a = e.deltaX) !== null && _a !== void 0 ? _a : 0) - scrollX, scrollWidth - width), 0);
+            }
+            else {
+                newScrollX = -scrollX;
+            }
+            if (showV) {
+                newScrollY = Math.max(Math.min(((_b = e.deltaY) !== null && _b !== void 0 ? _b : 0) - scrollY, scrollHeight - height), 0);
+            }
+            else {
+                newScrollY = -scrollY;
+            }
+            childrenBounds.translate(-newScrollX, -newScrollY);
+            this.addOrUpdateScroll(showH, showV, scrollContainer.parent, scrollContainer);
+            scrollContainer.setAttributes({
+                scrollX: -newScrollX,
+                scrollY: -newScrollY
+            });
+        };
+        this.handleScrollBarChange = (params) => {
+            if (!this.scrollContainer ||
+                !this.scrollContainerBounds ||
+                !this.childrenBounds ||
+                !params ||
+                !params.target ||
+                !params.detail ||
+                !params.detail.value) {
+                return;
+            }
+            const scrollbar = params.target;
+            const newRange = params.detail.value;
+            if (scrollbar.attribute.direction === 'horizontal') {
+                const scrollWidth = this.childrenBounds.width();
+                this.scrollContainer.g.setAttributes({ scrollX: -newRange[0] * scrollWidth });
+            }
+            else {
+                const scrollHeight = this.childrenBounds.height();
+                this.scrollContainer.g.setAttributes({ scrollY: -newRange[0] * scrollHeight });
+            }
+        };
+    }
+    activate(context) {
+        this.pluginService = context;
+        const { stage } = this.pluginService;
+        this.childrenBounds = new AABBBounds();
+        stage.addEventListener('wheel', this.scroll);
+        this.params = ScrollBarPlugin_1.defaultParams;
+    }
+    initEventOfScrollbar(scrollContainer, scrollbar, isHorozntal) {
+        scrollContainer.addEventListener('pointerover', () => {
+            scrollbar.setAttribute('visibleAll', true);
+        });
+        scrollContainer.addEventListener('pointermove', () => {
+            scrollbar.setAttribute('visibleAll', true);
+        });
+        scrollContainer.addEventListener('pointerout', () => {
+            scrollbar.setAttribute('visibleAll', false);
+        });
+        scrollbar.addEventListener('pointerover', () => {
+            scrollbar.setAttribute('visibleAll', true);
+        });
+        scrollbar.addEventListener('pointerout', () => {
+            scrollbar.setAttribute('visibleAll', true);
+        });
+        scrollbar.addEventListener('scrollUp', this.handleScrollBarChange);
+        scrollbar.addEventListener(SCROLLBAR_EVENT, this.handleScrollBarChange);
+    }
+    addOrUpdateScroll(showH, showV, container, scrollContainer) {
+        if (showH) {
+            const { scrollBar: hScrollbar, isUpdate } = this.addOrUpdateHScroll(scrollContainer, container, true);
+            if (!isUpdate) {
+                this.initEventOfScrollbar(scrollContainer, hScrollbar, true);
+            }
+        }
+        else {
+            this.clearScrollbar(scrollContainer, 'horizontal');
+        }
+        if (showV) {
+            const { scrollBar: vScrollbar, isUpdate } = this.addOrUpdateHScroll(scrollContainer, container, false);
+            if (!isUpdate) {
+                this.initEventOfScrollbar(scrollContainer, vScrollbar, false);
+            }
+        }
+        else {
+            this.clearScrollbar(scrollContainer, 'vertical');
+        }
+    }
+    getDirection(isHorozntal) {
+        return isHorozntal ? 'horizontal' : 'vertical';
+    }
+    addOrUpdateHScroll(scrollContainer, container, isHorozntal) {
+        var _a;
+        const direction = this.getDirection(isHorozntal);
+        const name = `${(_a = scrollContainer.name) !== null && _a !== void 0 ? _a : scrollContainer._uid}_${this.getDirection(isHorozntal)}_${this.name}`;
+        const scrollbars = container.children.filter((g) => g.name === name);
+        let isUpdate = true;
+        let scrollBar = scrollbars[0];
+        const { y = 0, dy = 0, x = 0, dx = 0, height, width, zIndex = 0 } = this.scrollContainer.g.attribute;
+        const attrs = {
+            x: 0,
+            y: 0,
+            direction,
+            zIndex: zIndex + 1,
+            visibleAll: true,
+            padding: [2, 0],
+            railStyle: {
+                fill: 'rgba(0, 0, 0, .1)'
+            },
+            range: [0, 0.05]
+        };
+        if (isHorozntal) {
+            attrs.width = this.scrollContainerBounds.width();
+            attrs.height = 12;
+        }
+        else {
+            attrs.height = this.scrollContainerBounds.height();
+            attrs.width = 12;
+        }
+        if (!scrollBar) {
+            isUpdate = false;
+            scrollBar = new ScrollBar(attrs);
+            scrollBar.name = name;
+            container.add(scrollBar);
+            scrollBar.isScrollBar = true;
+        }
+        else if (scrollbars.length > 1) {
+            scrollbars.forEach((child, index) => {
+                var _a;
+                if (index) {
+                    (_a = child.parent) === null || _a === void 0 ? void 0 : _a.removeChild(child);
+                }
+            });
+        }
+        const childrenBounds = this.childrenBounds;
+        if (isHorozntal) {
+            const ratio = Math.min(this.scrollContainerBounds.width() / childrenBounds.width(), 1);
+            const start = Math.max(Math.min(this.childrenBounds.x1 / this.childrenBounds.width(), 0), ratio - 1);
+            attrs.x = x + dx;
+            attrs.y = y + dy + height - this.scrollContainerBounds.height();
+            attrs.range = [-start, -start + ratio];
+        }
+        else {
+            const ratio = Math.min(this.scrollContainerBounds.height() / childrenBounds.height(), 1);
+            const start = Math.max(Math.min(this.childrenBounds.y1 / this.childrenBounds.height(), 0), ratio - 1);
+            attrs.x = x + dx + width - this.scrollContainerBounds.width();
+            attrs.y = y + dy;
+            attrs.range = [-start, -start + ratio];
+        }
+        scrollBar.setAttributes(attrs);
+        return {
+            scrollBar,
+            isUpdate
+        };
+    }
+    clearScrollbar(scrollContainer, type) {
+        if (!scrollContainer.parent) {
+            return;
+        }
+        const scrollbarBars = scrollContainer.parent.children.filter((child) => {
+            return child.isScrollBar && (type === 'all' || child.attribute.direction === type);
+        });
+        scrollbarBars.forEach((child) => {
+            child.parent.removeChild(child);
+        });
+    }
+    formatScrollContainer(g) {
+        if (!g || g.type !== 'group' || !g.attribute) {
+            return null;
+        }
+        const { overflow, width, height } = g.attribute;
+        if (!overflow || overflow === 'hidden') {
+            return null;
+        }
+        let showH = false;
+        let showV = false;
+        if (overflow === 'scroll') {
+            showH = true;
+            showV = true;
+        }
+        else {
+            showH = overflow === 'scroll-x';
+            showV = !showH;
+        }
+        if (!g.AABBBounds.empty()) {
+            if (showH) {
+                showH = width < g.AABBBounds.width();
+            }
+            if (showV) {
+                showV = height < g.AABBBounds.height();
+            }
+        }
+        return showH || showV ? { g: g, showH, showV } : null;
+    }
+    getScrollContainer(graphic) {
+        let g = graphic;
+        while (g) {
+            const res = this.formatScrollContainer(g);
+            if (res) {
+                return res;
+            }
+            g = g.parent;
+        }
+        return null;
+    }
+    deactivate(context) {
+        const { stage } = this.pluginService;
+        stage.removeEventListener('wheel', this.scroll);
+    }
+};
+ScrollBarPlugin.defaultParams = {
+    timeout: 500
+};
+ScrollBarPlugin = ScrollBarPlugin_1 = __decorate([
+    injectable()
+], ScrollBarPlugin);
+
+const scrollbarModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+    if (!isBound(ScrollBarPlugin)) {
+        bind(ScrollBarPlugin).toSelf();
+        bind(AutoEnablePlugins).toService(ScrollBarPlugin);
+    }
+});
+function loadScrollbar() {
+    container.load(scrollbarModule);
+}
+
 function traverseGroup(group, cb) {
     group.forEachChildren(node => {
         const stopped = cb(node);
@@ -15807,19 +16160,22 @@ function bitmapTool(width, height, padding = { top: 0, left: 0, right: 0, bottom
     scale.height = height;
     return scale;
 }
-function boundToRange($, bound, clamp$1 = false) {
-    if (clamp$1) {
-        const { x1, x2, y1, y2 } = bound;
-        const _x1 = clamp(x1, 0, $.width);
-        const _x2 = clamp(x2, 0, $.width);
-        const _y1 = clamp(y1, 0, $.height);
-        const _y2 = clamp(y2, 0, $.height);
-        return {
-            x1: $.x(_x1),
-            x2: $.x(_x2),
-            y1: $.y(_y1),
-            y2: $.y(_y2)
-        };
+function clampRangeByBitmap($, range) {
+    const { x1, x2, y1, y2 } = range;
+    const _x1 = clamp(x1, 0, $.width);
+    const _x2 = clamp(x2, 0, $.width);
+    const _y1 = clamp(y1, 0, $.height);
+    const _y2 = clamp(y2, 0, $.height);
+    return {
+        x1: $.x(_x1),
+        x2: $.x(_x2),
+        y1: $.y(_y1),
+        y2: $.y(_y2)
+    };
+}
+function boundToRange($, bound, clamp = false) {
+    if (clamp) {
+        return clampRangeByBitmap($, bound);
     }
     return {
         x1: $.x(bound.x1),
@@ -15840,10 +16196,13 @@ function canPlace($, bitmap, bound, checkBound = true, pad = 0) {
         };
     }
     range = boundToRange($, range);
-    const outOfBounds = checkBound && bitmap.outOfBounds(range);
-    if (outOfBounds) {
+    const outOfBounds = bitmap.outOfBounds(range);
+    if (checkBound && outOfBounds) {
         return false;
     }
+    if (outOfBounds) {
+        range = clampRangeByBitmap($, range);
+    }
     return !bitmap.getRange(range);
 }
 function placeToCandidates($, bitmap, text, candidates = [], clampForce = true, pad = 0) {
@@ -15907,24 +16266,29 @@ function defaultLabelPosition(type) {
             return DefaultPositions;
     }
 }
-function clampText(text, width, height) {
+function clampText(text, width, height, padding = {}) {
     const { x1, x2, y1, y2 } = text.AABBBounds;
+    const { top = 0, left = 0, right = 0, bottom = 0 } = padding;
     const minX = Math.min(x1, x2);
     const maxX = Math.max(x1, x2);
     const minY = Math.min(y1, y2);
     const maxY = Math.max(y1, y2);
+    const minXWithPadding = 0 - left;
+    const maxXWithPadding = width + right;
+    const minYWithPadding = 0 - top;
+    const maxYWithPadding = height + bottom;
     let dx = 0;
     let dy = 0;
-    if (minX < 0 && maxX - minX <= width) {
+    if (minX < minXWithPadding && maxX - minX <= width) {
         dx = -minX;
     }
-    else if (maxX > width && minX - (maxX - width) >= 0) {
+    else if (maxX > maxXWithPadding && minX - (maxX - width) >= minXWithPadding) {
         dx = width - maxX;
     }
-    if (minY < 0 && maxY - minY <= height) {
+    if (minY < minYWithPadding && maxY - minY <= height) {
         dy = -minY;
     }
-    else if (maxY > height && minY - (maxY - height) >= 0) {
+    else if (maxY > maxYWithPadding && minY - (maxY - height) >= minYWithPadding) {
         dy = height - maxY;
     }
     return { dx, dy };
@@ -16224,6 +16588,151 @@ function loadLabelComponent() {
     registerLine();
 }
 
+const isIntersect = (top, bottom) => {
+    return Math.ceil(top) > Math.floor(bottom);
+};
+const isXIntersect = ([a, b], [c, d]) => {
+    return d > a && b > c;
+};
+function getIntersectionLength(range1, range2) {
+    const [start1, end1] = range1;
+    const [start2, end2] = range2;
+    const start = Math.max(start1, start2);
+    const end = Math.min(end1, end2);
+    return Math.max(0, end - start);
+}
+function shiftY(texts, option) {
+    const { maxIterations = 10, maxError = 0.1, padding = 1, maxY = Number.MAX_VALUE, labelling } = option;
+    const n = texts.length;
+    if (n <= 1) {
+        return texts;
+    }
+    const xMap = new Map();
+    const textInformation = new Map();
+    const getY1Initial = (text) => textInformation.get(text).y1Initial;
+    const getHeight = (text) => textInformation.get(text).height;
+    const getY1 = (text) => textInformation.get(text).y1;
+    const getY = (text) => textInformation.get(text).y;
+    const getX = (text) => textInformation.get(text).x;
+    const getX1 = (text) => textInformation.get(text).x1;
+    const getX2 = (text) => textInformation.get(text).x2;
+    const setY1 = (text, y) => {
+        textInformation.get(text).y1 = y;
+    };
+    function adjustPositionInOneGroup(texts) {
+        if (texts.length === 1) {
+            return;
+        }
+        for (let i = texts.length - 1; i > 0; i--) {
+            const curText = texts[i];
+            const upperText = texts[i - 1];
+            const lowerText = texts[i + 1];
+            if (isIntersect(getY1(upperText) + getHeight(upperText), getY1(curText))) {
+                const { y } = labelling(curText);
+                if (!lowerText || !isIntersect(y + getHeight(curText) / 2, getY1(lowerText))) {
+                    if (y + getHeight(curText) / 2 <= maxY) {
+                        setY1(curText, getY1(curText) + y - getY(curText));
+                    }
+                }
+            }
+        }
+    }
+    texts.sort((a, b) => a.attribute.x - b.attribute.x);
+    for (const text of texts) {
+        const { y1, y2, x1, x2 } = text.AABBBounds;
+        const { x, y } = text.attribute;
+        textInformation.set(text, { y1Initial: y1, y1, y2, y, height: y2 - y1, x1, x2, x });
+        let hasRange = false;
+        for (const [range, xGroupTexts] of xMap) {
+            const { start, end } = range;
+            if (x1 >= start && x2 <= end) {
+                xGroupTexts.push(text);
+                hasRange = true;
+            }
+            else if (isNumberClose(x, getX(xGroupTexts[0]), undefined, 5)) {
+                const newRange = { start: Math.min(start, x1), end: Math.max(end, x2) };
+                xGroupTexts.push(text);
+                xMap.set(newRange, xGroupTexts);
+                xMap.delete(range);
+                hasRange = true;
+            }
+            else if (getIntersectionLength([start, end], [x1, x2]) / (end - start) > 0.5) {
+                const newRange = { start: Math.min(start, x1), end: Math.max(end, x2) };
+                xGroupTexts.push(text);
+                xMap.set(newRange, xGroupTexts);
+                xMap.delete(range);
+                hasRange = true;
+            }
+            if (hasRange) {
+                break;
+            }
+        }
+        if (!hasRange) {
+            xMap.set({ start: x1, end: x2 }, [text]);
+        }
+    }
+    for (const xTexts of xMap.values()) {
+        xTexts.sort((a, b) => getY1Initial(a) - getY1Initial(b));
+        adjustPositionInOneGroup(xTexts);
+    }
+    for (let iter = 0; iter < maxIterations; iter++) {
+        texts.sort((a, b) => getY1(a) - getY1(b));
+        let error = 0;
+        for (let i = 0; i < n - 1; i++) {
+            const curText = texts[i];
+            let j = i + 1;
+            let nextText;
+            while ((nextText = texts[j]) &&
+                !isXIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])) {
+                j += 1;
+            }
+            if (nextText) {
+                const y1 = getY1(curText);
+                const h0 = getHeight(curText);
+                const nextY1 = getY1(nextText);
+                const delta = nextY1 - (y1 + h0);
+                if (delta < padding) {
+                    const newDelta = (padding - delta) / 2;
+                    error = Math.max(error, newDelta);
+                    if (y1 + newDelta + getHeight(nextText) > maxY) {
+                        setY1(curText, y1 - (padding - delta));
+                    }
+                    else if (y1 - newDelta < 0) {
+                        setY1(nextText, nextY1 + (padding - delta));
+                    }
+                    else {
+                        setY1(curText, y1 - newDelta);
+                        setY1(nextText, nextY1 + newDelta);
+                    }
+                }
+            }
+        }
+        if (error < maxError) {
+            break;
+        }
+    }
+    for (const text of texts) {
+        const finalY = text.attribute.y + getY1(text) - getY1Initial(text);
+        text.setAttribute('y', finalY);
+    }
+    const result = [];
+    texts.sort((a, b) => a.attribute.x - b.attribute.x);
+    let start = 0;
+    let end = texts.length - 1;
+    while (start <= end) {
+        if (start === end) {
+            result.push(texts[start]);
+        }
+        else {
+            result.push(texts[start]);
+            result.push(texts[end]);
+        }
+        start++;
+        end--;
+    }
+    return result;
+}
+
 loadLabelComponent();
 class LabelBase extends AbstractComponent {
     setBitmap(bitmap) {
@@ -16537,12 +17046,11 @@ class LabelBase extends AbstractComponent {
         return texts;
     }
     _overlapping(labels) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         if (labels.length === 0) {
             return [];
         }
         const option = (isObject(this.attribute.overlap) ? this.attribute.overlap : {});
-        const result = [];
         const baseMarkGroup = this.getBaseMarkGroup();
         const size = (_a = option.size) !== null && _a !== void 0 ? _a : {
             width: (_b = baseMarkGroup === null || baseMarkGroup === void 0 ? void 0 : baseMarkGroup.AABBBounds.width()) !== null && _b !== void 0 ? _b : 0,
@@ -16551,12 +17059,62 @@ class LabelBase extends AbstractComponent {
         if (size.width === 0 || size.height === 0) {
             return labels;
         }
-        const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [], overlapPadding } = option;
+        const { strategy, priority } = option;
         const bmpTool = this._bmpTool || bitmapTool(size.width, size.height);
         const bitmap = this._bitmap || bmpTool.bitmap();
+        if (priority) {
+            labels = labels.sort((a, b) => priority(b.attribute.data) - priority(a.attribute.data));
+        }
+        if ((strategy === null || strategy === void 0 ? void 0 : strategy.type) === 'shiftY') {
+            return this._overlapGlobal(labels, option, bmpTool, bitmap);
+        }
+        return this._overlapByStrategy(labels, option, bmpTool, bitmap);
+    }
+    _overlapGlobal(labels, option, bmpTool, bitmap) {
+        let result = labels.filter(label => label.attribute.visible && label.attribute.opacity !== 0);
+        const { clampForce = true, hideOnHit = true, overlapPadding, strategy } = option;
+        if (clampForce) {
+            for (let i = 0; i < result.length; i++) {
+                const text = labels[i];
+                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
+                if (dx !== 0 || dy !== 0) {
+                    text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
+                    text._isClamped = true;
+                }
+            }
+        }
+        result = shiftY(result, Object.assign(Object.assign({ maxY: bmpTool.height }, strategy), { labelling: (text) => {
+                const baseMark = this.getRelatedGraphic(text.attribute);
+                const graphicBound = this._isCollectionBase
+                    ? this.getGraphicBounds(null, this._idToPoint.get(text.attribute.id))
+                    : this.getGraphicBounds(baseMark, text);
+                return this.labeling(text.AABBBounds, graphicBound, 'bottom', this.attribute.offset);
+            } }));
+        for (let i = 0; i < result.length; i++) {
+            const text = result[i];
+            const bounds = text.AABBBounds;
+            const range = boundToRange(bmpTool, bounds, true);
+            if (canPlace(bmpTool, bitmap, bounds, clampForce, text._isClamped ? 0 : overlapPadding)) {
+                bitmap.setRange(range);
+            }
+            else {
+                if (hideOnHit) {
+                    text.setAttributes({ visible: false });
+                }
+                else {
+                    bitmap.setRange(range);
+                }
+            }
+        }
+        return result;
+    }
+    _overlapByStrategy(labels, option, bmpTool, bitmap) {
+        var _a;
+        const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [], overlapPadding } = option;
+        const result = [];
         const checkBounds = strategy.some(s => s.type === 'bound');
         if (avoidBaseMark) {
-            (_d = this._baseMarks) === null || _d === void 0 ? void 0 : _d.forEach(mark => {
+            (_a = this._baseMarks) === null || _a === void 0 ? void 0 : _a.forEach(mark => {
                 mark.AABBBounds && bitmap.setRange(boundToRange(bmpTool, mark.AABBBounds, true));
             });
         }
@@ -16573,7 +17131,7 @@ class LabelBase extends AbstractComponent {
             });
         }
         for (let i = 0; i < labels.length; i++) {
-            if (labels[i].visible === false) {
+            if (labels[i].attribute.visible === false) {
                 continue;
             }
             const text = labels[i];
@@ -16609,7 +17167,7 @@ class LabelBase extends AbstractComponent {
                 }
             }
             if (!hasPlace && clampForce) {
-                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
+                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
                 if (dx === 0 && dy === 0) {
                     if (canPlace(bmpTool, bitmap, text.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
@@ -16840,7 +17398,7 @@ class LabelBase extends AbstractComponent {
         return listener;
     }
     _smartInvert(labels) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         const option = (isObject(this.attribute.smartInvert) ? this.attribute.smartInvert : {});
         const { textType, contrastRatiosThreshold, alternativeColors, mode, interactInvertType } = option;
         const fillStrategy = (_a = option.fillStrategy) !== null && _a !== void 0 ? _a : 'invertBase';
@@ -16857,8 +17415,15 @@ class LabelBase extends AbstractComponent {
                 continue;
             }
             const baseMark = this.getRelatedGraphic(label.attribute);
-            const backgroundColor = baseMark.attribute.fill;
-            const foregroundColor = label.attribute.fill;
+            let backgroundColor = baseMark.attribute.fill;
+            let foregroundColor = label.attribute.fill;
+            if (isObject(backgroundColor) && backgroundColor.gradient) {
+                const firstStopColor = (_g = (_f = backgroundColor.stops) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.color;
+                if (firstStopColor) {
+                    backgroundColor = firstStopColor;
+                    foregroundColor = firstStopColor;
+                }
+            }
             const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode);
             const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
             const isInside = this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds);
@@ -17086,6 +17651,9 @@ class ArcLabel extends LabelBase {
         this._alignOffset = 0;
     }
     _overlapping(labels) {
+        if (['inside', 'inside-center'].includes(this.attribute.position)) {
+            return super._overlapping(labels);
+        }
         return labels;
     }
     labeling(textBounds, graphicBounds, position = 'outside', offset = 0) {
@@ -18902,12 +19470,14 @@ function autoHide(labels, config) {
         do {
             items = reduce(items, sep);
         } while (items.length >= 3 && hasOverlap(items, sep));
-        const shouldCheck = (length, visibility) => length < 3 || visibility;
-        const checkFirst = shouldCheck(items.length, config.firstVisible);
+        const shouldCheck = (length, visibility, checkLength = true) => {
+            return checkLength ? length < 3 || visibility : visibility;
+        };
+        const checkFirst = shouldCheck(items.length, config.firstVisible, false);
         let checkLast = shouldCheck(items.length, config.lastVisible);
         const firstSourceItem = source[0];
         const lastSourceItem = last(source);
-        if (textIntersect(firstSourceItem, lastSourceItem, sep)) {
+        if (textIntersect(firstSourceItem, lastSourceItem, sep) && checkFirst && checkLast) {
             lastSourceItem.setAttribute('opacity', 0);
             checkLast = false;
         }
@@ -19105,15 +19675,24 @@ function autoLimit(labels, config) {
         return;
     }
     const overflowLimitLength = normalizeOverflowLimitLength(config.overflowLimitLength);
+    const firstLabel = labels[0];
+    const angle = firstLabel.attribute.angle;
+    const hasAngle = !isNil(angle);
+    const cos = hasAngle ? Math.cos(angle) : 1;
+    const sin = hasAngle ? Math.sin(angle) : 0;
+    const isHorizontal = isAngleHorizontal(angle);
+    const isVertical = isAngleVertical(angle);
+    const isX = orient === 'top' || orient === 'bottom';
+    const direction = firstLabel.attribute.direction;
+    const THRESHOLD = 2;
+    const checkBox = !isHorizontal &&
+        !isVertical &&
+        isX &&
+        (labels.length < 2 ||
+            labels.some(label => Math.abs(label.AABBBounds.width() - firstLabel.AABBBounds.width()) >= THRESHOLD)) &&
+        firstLabel.AABBBounds.width() > Math.abs(limitLength / sin);
     labels.forEach(label => {
         var _a;
-        const angle = label.attribute.angle;
-        const hasAngle = !isNil(angle);
-        const cos = hasAngle ? Math.cos(angle) : 1;
-        const sin = hasAngle ? Math.sin(angle) : 0;
-        const isHorizontal = isAngleHorizontal(angle);
-        const isVertical = isAngleVertical(angle);
-        const isX = orient === 'top' || orient === 'bottom';
         if (isX) {
             if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) {
                 return;
@@ -19122,7 +19701,6 @@ function autoLimit(labels, config) {
                 return;
             }
         }
-        const direction = label.attribute.direction;
         if (!isX) {
             if (direction === 'vertical' && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) {
                 return;
@@ -19142,12 +19720,18 @@ function autoLimit(labels, config) {
                 const { x1, x2 } = label.AABBBounds;
                 const tan = sin / cos;
                 const verticalSizeLimit = Math.abs(limitLength / sin);
-                if (tan > 0 && x1 <= axisLength && limitLength / tan + x1 > axisLength) {
-                    const lengthLimit = (axisLength - x1) / Math.abs(cos) + overflowLimitLength.right;
+                if (checkBox &&
+                    tan > 0 &&
+                    x1 <= axisLength + overflowLimitLength.right &&
+                    limitLength / tan + x1 > axisLength + overflowLimitLength.right) {
+                    const lengthLimit = (axisLength - x1 + overflowLimitLength.right) / Math.abs(cos);
                     limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
                 }
-                else if (tan < 0 && x2 >= 0 && limitLength / tan + x2 < 0) {
-                    const lengthLimit = x2 / Math.abs(cos) + overflowLimitLength.left;
+                else if (checkBox &&
+                    tan < 0 &&
+                    x2 >= -overflowLimitLength.left &&
+                    limitLength / tan + x2 < -overflowLimitLength.left) {
+                    const lengthLimit = (x2 + overflowLimitLength.left) / Math.abs(cos);
                     limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
                 }
                 else {
@@ -19181,24 +19765,37 @@ function autoWrap(labels, config) {
     if (isEmpty(labels) || !isValidNumber(limitLength)) {
         return;
     }
-    const verticalLimitLength = axisLength / labels.length;
-    labels.forEach(label => {
-        var _a;
-        const angle = label.attribute.angle;
-        const isHorizontal = isAngleHorizontal(angle);
-        const isVertical = isAngleVertical(angle);
-        const isX = orient === 'top' || orient === 'bottom';
+    const firstLabel = labels[0];
+    const angle = firstLabel.attribute.angle;
+    const isHorizontal = isAngleHorizontal(angle);
+    const isVertical = isAngleVertical(angle);
+    const isX = orient === 'top' || orient === 'bottom';
+    let verticalLimitLength = axisLength / labels.length;
+    labels.forEach((label, index) => {
+        var _a, _b, _c, _d, _e;
         if (isX) {
             if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) {
                 return;
             }
-            if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) {
-                return;
+            if (isHorizontal) {
+                const curLabelX = label.attribute.x;
+                const nextLabelX = (_a = labels[index + 1]) === null || _a === void 0 ? void 0 : _a.attribute.x;
+                const lastLabelX = (_b = labels[index - 1]) === null || _b === void 0 ? void 0 : _b.attribute.x;
+                const minGap = getLabelMinGap(curLabelX, nextLabelX, lastLabelX);
+                if (isValidNumber(minGap)) {
+                    verticalLimitLength = min(verticalLimitLength, minGap);
+                }
             }
         }
         else {
-            if (isVertical && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) {
-                return;
+            if (isVertical) {
+                const curLabelY = label.attribute.y;
+                const nextLabelY = (_c = labels[index + 1]) === null || _c === void 0 ? void 0 : _c.attribute.y;
+                const lastLabelY = (_d = labels[index - 1]) === null || _d === void 0 ? void 0 : _d.attribute.y;
+                const minGap = getLabelMinGap(curLabelY, nextLabelY, lastLabelY);
+                if (isValidNumber(minGap)) {
+                    verticalLimitLength = min(verticalLimitLength, minGap);
+                }
             }
             if (isHorizontal && Math.floor(label.AABBBounds.width()) <= limitLength) {
                 return;
@@ -19228,12 +19825,27 @@ function autoWrap(labels, config) {
         }
         label.setAttributes({
             maxLineWidth: limitLabelLength,
-            ellipsis: (_a = label.attribute.ellipsis) !== null && _a !== void 0 ? _a : ellipsis,
+            ellipsis: (_e = label.attribute.ellipsis) !== null && _e !== void 0 ? _e : ellipsis,
             whiteSpace: 'normal',
             heightLimit
         });
     });
 }
+function getLabelMinGap(current, next, prev) {
+    let minGap;
+    if (isValidNumber(next)) {
+        minGap = Math.abs(next - current);
+    }
+    if (isValidNumber(prev)) {
+        if (isValidNumber(minGap)) {
+            minGap = Math.min(Math.abs(current - prev), minGap);
+        }
+        else {
+            minGap = Math.abs(current - prev);
+        }
+    }
+    return minGap;
+}
 
 function alignAxisLabels(labels, start, containerSize, orient, align) {
     if (orient === 'left' || orient === 'right') {
@@ -20056,13 +20668,13 @@ class CircleAxis extends AxisBase {
         if (isEmpty(labelShapes)) {
             return;
         }
-        const { inside, radius, center, width, height, label, orient } = this.attribute;
-        const bounds = width && height
+        const { inside, radius, center, size, label, orient } = this.attribute;
+        const bounds = size
             ? {
                 x1: 0,
                 y1: 0,
-                x2: width,
-                y2: height
+                x2: size.width,
+                y2: size.height
             }
             : {
                 x1: center.x - radius,
@@ -20430,11 +21042,10 @@ const continuousTicks = (scale, op) => {
             while (items.length >= 3 && hasOverlap(items, labelGap)) {
                 items = samplingMethod(items, labelGap);
             }
-            const shouldCheck = (length, visibility) => length < 3 || visibility;
-            const checkFirst = shouldCheck(items.length, op.labelFirstVisible);
-            let checkLast = shouldCheck(items.length, op.labelLastVisible);
+            const checkFirst = op.labelFirstVisible;
+            let checkLast = op.labelLastVisible;
             if (textIntersect(firstSourceItem, lastSourceItem, labelGap)) {
-                if (items.includes(lastSourceItem) && items.length > 1) {
+                if (items.includes(lastSourceItem) && items.length > 1 && checkFirst && checkLast) {
                     items.splice(items.indexOf(lastSourceItem), 1);
                     checkLast = false;
                 }
@@ -24171,10 +24782,10 @@ class LegendBase extends AbstractComponent {
     render() {
         this.removeAllChild(true);
         const { interactive = true, title, padding = 0 } = this.attribute;
-        const parsedPadding = normalizePadding(padding);
+        this._parsedPadding = normalizePadding(padding);
         const innerView = graphicCreator.group({
-            x: parsedPadding[3],
-            y: parsedPadding[0],
+            x: this._parsedPadding[3],
+            y: this._parsedPadding[0],
             pickable: interactive,
             childrenPickable: interactive
         });
@@ -24190,8 +24801,8 @@ class LegendBase extends AbstractComponent {
             this._bindEvents();
         }
         const viewBounds = this._innerView.AABBBounds;
-        this.attribute.width = viewBounds.width() + parsedPadding[1] + parsedPadding[3];
-        this.attribute.height = viewBounds.height() + parsedPadding[0] + parsedPadding[2];
+        this.attribute.width = viewBounds.width() + this._parsedPadding[1] + this._parsedPadding[3];
+        this.attribute.height = viewBounds.height() + this._parsedPadding[0] + this._parsedPadding[2];
     }
     _renderTitle(title) {
         const { text = '', textStyle, padding = 0, background, minWidth, maxWidth, shape } = title;
@@ -24276,6 +24887,7 @@ class DiscreteLegend extends LegendBase {
         this._itemHeightByUser = undefined;
         this._itemHeight = 0;
         this._itemMaxWidth = 0;
+        this._contentMaxHeight = 0;
         this._onHover = (e) => {
             const target = e.target;
             if (target && target.name && target.name.startsWith(LEGEND_ELEMENT_NAME.item)) {
@@ -24380,11 +24992,12 @@ class DiscreteLegend extends LegendBase {
         });
     }
     _renderItems() {
-        const { item: itemAttrs = {}, maxCol = 1, maxRow = 2, maxWidth, maxHeight, defaultSelected, lazyload, autoPage } = this.attribute;
+        const { item: itemAttrs = {}, maxCol = 1, maxRow = 2, maxWidth, defaultSelected, lazyload, autoPage } = this.attribute;
         const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = itemAttrs;
         const itemsContainer = this._itemsContainer;
         const { items: legendItems, isHorizontal, startIndex, isScrollbar } = this._itemContext;
         const maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
+        const maxHeight = this._contentMaxHeight;
         let { doWrap, maxWidthInCol, startX, startY, pages } = this._itemContext;
         let item;
         let lastItemWidth = 0;
@@ -24481,7 +25094,7 @@ class DiscreteLegend extends LegendBase {
         return this._itemContext;
     }
     _renderContent() {
-        const { item = {}, items, reversed, maxWidth } = this.attribute;
+        const { item = {}, items, reversed, maxWidth, maxHeight } = this.attribute;
         if (item.visible === false || isEmpty(items)) {
             return;
         }
@@ -24489,6 +25102,7 @@ class DiscreteLegend extends LegendBase {
         if (reversed) {
             legendItems = items === null || items === void 0 ? void 0 : items.reverse();
         }
+        this._contentMaxHeight = Math.max(0, maxHeight - this._parsedPadding[0] - this._parsedPadding[2]);
         const itemsContainer = graphicCreator.group({
             x: 0,
             y: 0
@@ -24526,7 +25140,8 @@ class DiscreteLegend extends LegendBase {
             items: legendItems,
             isHorizontal,
             totalPage: Infinity,
-            isScrollbar: pager && pager.type === 'scrollbar'
+            isScrollbar: pager && pager.type === 'scrollbar',
+            clipContainer: undefined
         };
         this._itemContext = this._renderItems();
         let pagerRendered = false;
@@ -24547,11 +25162,21 @@ class DiscreteLegend extends LegendBase {
         }
         const { hover = true, select = true } = this.attribute;
         if (hover) {
-            this._itemsContainer.addEventListener('pointermove', this._onHover);
-            this._itemsContainer.addEventListener('pointerleave', this._onUnHover);
+            let trigger = 'pointermove';
+            let triggerOff = 'pointerleave';
+            if (isObject(hover)) {
+                hover.trigger && (trigger = hover.trigger);
+                hover.triggerOff && (triggerOff = hover.triggerOff);
+            }
+            this._itemsContainer.addEventListener(trigger, this._onHover);
+            this._itemsContainer.addEventListener(triggerOff, this._onUnHover);
         }
         if (select) {
-            this._itemsContainer.addEventListener('pointerdown', this._onClick);
+            let trigger = 'pointerdown';
+            if (isObject(select) && select.trigger) {
+                trigger = select.trigger;
+            }
+            this._itemsContainer.addEventListener(trigger, this._onClick);
         }
     }
     _autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape) {
@@ -24756,8 +25381,8 @@ class DiscreteLegend extends LegendBase {
     _createScrollbar(compStyle, compSize) {
         const { disableTriggerEvent } = this.attribute;
         return this._itemContext.isHorizontal
-            ? new ScrollBar(Object.assign(Object.assign({ direction: 'horizontal', disableTriggerEvent, range: [0, 0.5], height: 12 }, compStyle), { width: compSize }))
-            : new ScrollBar(Object.assign(Object.assign({ direction: 'vertical', width: 12, range: [0, 0.5] }, compStyle), { height: compSize, disableTriggerEvent }));
+            ? new ScrollBar(Object.assign(Object.assign({ direction: 'horizontal', disableTriggerEvent, range: [0, 0.5], height: compStyle.visible === false ? 0 : 12 }, compStyle), { width: compSize }))
+            : new ScrollBar(Object.assign(Object.assign({ direction: 'vertical', width: compStyle.visible === false ? 0 : 12, range: [0, 0.5] }, compStyle), { height: compSize, disableTriggerEvent }));
     }
     _updatePositionOfPager(renderStartY, compWidth, compHeight) {
         const { pager } = this.attribute;
@@ -24797,9 +25422,26 @@ class DiscreteLegend extends LegendBase {
             });
         }
     }
+    _computeScrollbarDelta() {
+        const { isHorizontal, clipContainer } = this._itemContext;
+        const itemContainerBounds = this._itemsContainer.AABBBounds;
+        const clipContainerBounds = clipContainer.AABBBounds;
+        let delta;
+        let innerViewSize;
+        if (isHorizontal) {
+            innerViewSize = clipContainerBounds.width();
+            delta = innerViewSize / itemContainerBounds.width();
+        }
+        else {
+            innerViewSize = clipContainerBounds.height();
+            delta = innerViewSize / itemContainerBounds.height();
+        }
+        return delta;
+    }
     _updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY) {
-        const { currentPage, totalPage, isHorizontal } = this._itemContext;
-        this._pagerComponent.setScrollRange([(currentPage - 1) / totalPage, currentPage / totalPage]);
+        const { isHorizontal, currentPage, totalPage } = this._itemContext;
+        const start = (currentPage - 1) / totalPage;
+        this._pagerComponent.setScrollRange([start, start + this._computeScrollbarDelta()]);
         if (isHorizontal) {
             this._pagerComponent.setAttributes({
                 x: 0,
@@ -24827,13 +25469,7 @@ class DiscreteLegend extends LegendBase {
                     newPage = this._itemContext.totalPage;
                 }
                 else {
-                    newPage = value[0] * this._itemContext.totalPage;
-                    if (pager.scrollByPosition) {
-                        newPage = newPage + 1;
-                    }
-                    else {
-                        newPage = Math.floor(newPage) + 1;
-                    }
+                    newPage = value[0] * this._itemContext.totalPage + 1;
                 }
                 return newPage;
             }
@@ -24847,6 +25483,7 @@ class DiscreteLegend extends LegendBase {
             const { width, height } = scrollComponent.getSliderRenderBounds();
             const currentScrollValue = direction === 'vertical' ? e.deltaY / height : e.deltaX / width;
             scrollComponent.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], true);
+            this.updateScrollMask();
         };
         const onPaging = (e) => {
             const newPage = pageParser(e);
@@ -24858,15 +25495,39 @@ class DiscreteLegend extends LegendBase {
                 this._renderItems();
                 const newTotalPage = Math.ceil(this._itemContext.pages / this._itemContext.maxPages);
                 this._itemContext.totalPage = newTotalPage;
-                this._pagerComponent.setScrollRange([(newPage - 1) / newTotalPage, newPage / newTotalPage]);
+                if (this._itemContext.isScrollbar && this._pagerComponent) {
+                    const newDelta = this._computeScrollbarDelta();
+                    const [start] = this._pagerComponent.getScrollRange();
+                    this._pagerComponent.setScrollRange([start, start + newDelta]);
+                }
             }
-            if (animation) {
-                this._itemsContainer
-                    .animate()
-                    .to({ [channel]: -(newPage - 1) * pageSize }, animationDuration, animationEasing);
+            if (!this._itemContext.isScrollbar) {
+                if (animation) {
+                    this._itemsContainer
+                        .animate()
+                        .to({ [channel]: -(newPage - 1) * pageSize }, animationDuration, animationEasing);
+                }
+                else {
+                    this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
+                }
             }
             else {
-                this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
+                const [start] = this._pagerComponent.getScrollRange();
+                let containerSize;
+                if (this._itemContext.isHorizontal) {
+                    containerSize = this._itemsContainer.AABBBounds.width();
+                }
+                else {
+                    containerSize = this._itemsContainer.AABBBounds.height();
+                }
+                const startOffset = containerSize * start;
+                this.updateScrollMask();
+                if (animation) {
+                    this._itemsContainer.animate().to({ [channel]: -startOffset }, animationDuration, animationEasing);
+                }
+                else {
+                    this._itemsContainer.setAttribute(channel, -startOffset);
+                }
             }
         };
         if (this._itemContext.isScrollbar) {
@@ -24885,11 +25546,12 @@ class DiscreteLegend extends LegendBase {
     }
     _renderPager() {
         const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', 8) : 0;
-        const { maxWidth, maxHeight, maxCol = 1, maxRow = 2, item = {}, pager = {} } = this.attribute;
+        const { maxWidth, maxCol = 1, maxRow = 2, item = {}, pager = {} } = this.attribute;
         const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
         const itemsContainer = this._itemsContainer;
         const { space: pagerSpace = DEFAULT_PAGER_SPACE, defaultCurrent = 1 } = pager, compStyle = __rest(pager, ["space", "defaultCurrent"]);
         const { isHorizontal } = this._itemContext;
+        const maxHeight = this._contentMaxHeight;
         let comp;
         let compWidth = 0;
         let compHeight = 0;
@@ -24980,57 +25642,76 @@ class DiscreteLegend extends LegendBase {
         });
         clipGroup.add(itemsContainer);
         this._innerView.add(clipGroup);
+        this._itemContext.clipContainer = clipGroup;
         this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? 'y' : 'x');
         return true;
     }
     _renderScrollbar() {
+        var _a;
         const renderStartY = this._title ? this._title.AABBBounds.height() + get(this.attribute, 'title.space', 8) : 0;
-        const { maxWidth, maxHeight, item = {}, pager = {} } = this.attribute;
+        const { maxWidth, item = {}, pager = {} } = this.attribute;
         const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
         const itemsContainer = this._itemsContainer;
         const { space: pagerSpace = DEFAULT_PAGER_SPACE, defaultCurrent = 1 } = pager, compStyle = __rest(pager, ["space", "defaultCurrent"]);
         const { isHorizontal } = this._itemContext;
+        const maxHeight = this._contentMaxHeight;
         let comp;
-        let compSize = 0;
         let contentWidth = 0;
         let contentHeight = 0;
         let startY = 0;
         let pages = 1;
         if (isHorizontal) {
-            compSize = maxWidth;
             contentWidth = maxWidth;
             contentHeight = this._itemHeight;
-            comp = this._createScrollbar(compStyle, compSize);
+            comp = this._createScrollbar(compStyle, contentWidth);
             this._pagerComponent = comp;
             this._innerView.add(comp);
-            this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
         }
         else {
-            compSize = maxHeight;
-            comp = this._createScrollbar(compStyle, compSize);
-            this._pagerComponent = comp;
-            this._innerView.add(comp);
             contentHeight = maxHeight - renderStartY;
             contentWidth = this._itemMaxWidth;
+            comp = this._createScrollbar(compStyle, contentHeight);
+            this._pagerComponent = comp;
+            this._innerView.add(comp);
             if (contentHeight <= 0) {
                 this._innerView.removeChild(comp);
                 return false;
             }
-            itemsContainer.getChildren().forEach((item, index) => {
-                const { height } = item.attribute;
-                pages = Math.floor((startY + height) / contentHeight) + 1;
-                startY += spaceRow + height;
-            });
+            const items = itemsContainer.getChildren();
+            const itemsHeightArr = items.map((item) => item.attribute.height);
+            if (itemsHeightArr.length === 1 || itemsHeightArr.every(entry => entry === itemsHeightArr[0])) {
+                const itemHeight = itemsHeightArr[0];
+                const maxContentHeight = contentHeight;
+                const pageItemsCount = Math.floor(maxContentHeight / (spaceRow + itemHeight));
+                contentHeight = pageItemsCount * (spaceRow + itemHeight);
+                pages = Math.ceil(items.length / pageItemsCount);
+            }
+            else {
+                items.forEach((item, index) => {
+                    const { height } = item.attribute;
+                    const prePages = pages;
+                    const preStartY = startY;
+                    pages = Math.floor((startY + height) / contentHeight) + 1;
+                    startY += spaceRow + height;
+                    if (prePages !== pages &&
+                        index === itemsContainer.getChildren().length - 1 &&
+                        startY - contentHeight >= (1 / 3) * height) {
+                        contentHeight = preStartY + height;
+                        pages -= 1;
+                    }
+                });
+            }
             this._itemContext.totalPage = pages;
             this._itemContext.pages = pages;
-            this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
         }
         if (defaultCurrent > 1) {
             if (isHorizontal) {
-                itemsContainer.setAttribute('x', -(defaultCurrent - 1) * (contentWidth + spaceCol));
+                const maxOffset = this._itemsContainer.AABBBounds.width() - contentWidth;
+                itemsContainer.setAttribute('x', -Math.min((defaultCurrent - 1) * (contentWidth + spaceCol), maxOffset));
             }
             else {
-                itemsContainer.setAttribute('y', -(defaultCurrent - 1) * (contentHeight + spaceRow));
+                const maxOffset = this._itemsContainer.AABBBounds.height() - contentHeight;
+                itemsContainer.setAttribute('y', -Math.min((defaultCurrent - 1) * (contentHeight + spaceRow), maxOffset));
             }
         }
         const clipGroup = graphicCreator.group({
@@ -25043,9 +25724,89 @@ class DiscreteLegend extends LegendBase {
         });
         clipGroup.add(itemsContainer);
         this._innerView.add(clipGroup);
+        this._itemContext.clipContainer = clipGroup;
+        this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
+        if ((_a = pager.scrollMask) === null || _a === void 0 ? void 0 : _a.visible) {
+            this.renderScrollMask(clipGroup);
+        }
         this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? 'x' : 'y');
         return true;
     }
+    renderScrollMask(clipGroup) {
+        const { scrollMask = {} } = this.attribute
+            .pager;
+        const { visible = true, gradientLength = 16, gradientStops } = scrollMask;
+        if (!visible || !gradientStops) {
+            return;
+        }
+        const width = clipGroup.AABBBounds.width();
+        const height = clipGroup.AABBBounds.height();
+        const totalLength = this._itemContext.isHorizontal ? width : height;
+        const startStops = gradientStops.map(stop => {
+            return {
+                offset: (gradientLength * stop.offset) / totalLength,
+                color: stop.color
+            };
+        });
+        const endStops = gradientStops.map(stop => {
+            return {
+                offset: (totalLength - gradientLength * stop.offset) / totalLength,
+                color: stop.color
+            };
+        });
+        const mask = graphicCreator.rect({
+            x: 0,
+            y: 0,
+            width,
+            height
+        });
+        this._scrollMask = mask;
+        this._scrollMaskContext = { startStops, endStops };
+        this.updateScrollMask();
+        clipGroup.add(mask);
+    }
+    updateScrollMask() {
+        if (!this._scrollMask || !this._pagerComponent) {
+            return;
+        }
+        if (!this._itemContext.isScrollbar) {
+            return;
+        }
+        const [start, end] = this._pagerComponent.getScrollRange();
+        const stops = [];
+        if (!isNumberClose(clamp(end, 0, 1), 1)) {
+            stops.push(...this._scrollMaskContext.endStops);
+        }
+        if (!isNumberClose(clamp(start, 0, 1), 0)) {
+            stops.push(...this._scrollMaskContext.startStops);
+        }
+        if (stops.length) {
+            if (this._itemContext.isHorizontal) {
+                this._scrollMask.setAttributes({
+                    fill: {
+                        gradient: 'linear',
+                        x0: 0,
+                        y0: 0,
+                        x1: 1,
+                        y1: 0,
+                        stops
+                    }
+                });
+            }
+            else {
+                this._scrollMask.setAttributes({
+                    fill: {
+                        gradient: 'linear',
+                        x0: 0,
+                        y0: 0,
+                        x1: 0,
+                        y1: 1,
+                        stops
+                    }
+                });
+            }
+        }
+    }
     _renderPagerComponent() {
         if (this._itemContext.isScrollbar) {
             this._renderScrollbar();
@@ -29159,6 +29920,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.21.0-alpha.1";
+const version = "0.21.0-alpha.10";
 
-export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };
+export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };