@visactor/vrender-components 0.21.0-vstory.1 → 0.21.0-vstory.3

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, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, 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 { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, cos, sin, isString, pointAt, isNumber, getDecimalPlaces, isNil, Color, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, 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) {
@@ -2180,6 +2185,7 @@ const DefaultStrokeStyle = Object.assign({
 const DefaultTextStyle = {
   text: "",
   maxLineWidth: 1 / 0,
+  maxWidth: 1 / 0,
   textAlign: "left",
   textBaseline: "alphabetic",
   fontSize: 16,
@@ -2203,7 +2209,9 @@ const DefaultTextStyle = {
   suffixPosition: "end",
   underlineDash: [],
   underlineOffset: 0,
-  disableAutoClipedPoptip: void 0
+  disableAutoClipedPoptip: void 0,
+  measureMode: MeasureModeEnum.fontBounding,
+  keepCenterInLine: !1
 };
 const DefaultPickStyle = {
   pickStrokeBuffer: 0
@@ -2260,7 +2268,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,
@@ -2406,671 +2415,1067 @@ const DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImag
 class Application {}
 const application = new Application();
 
-const DIRECTION_KEY = {
-  horizontal: {
-    width: "width",
-    height: "height",
-    left: "left",
-    top: "top",
-    x: "x",
-    y: "y",
-    bottom: "bottom"
-  },
-  vertical: {
-    width: "height",
-    height: "width",
-    left: "top",
-    top: "left",
-    x: "y",
-    y: "x",
-    bottom: "right"
-  }
-};
-const defaultFormatting = {
-    fontSize: 16,
-    fontFamily: "sans-serif",
-    fill: !0,
-    stroke: !1,
-    fontWeight: "normal",
-    lineHeight: "normal",
-    fontStyle: "normal",
-    textDecoration: "none",
-    textAlign: "left",
-    script: "normal"
+const parse = function () {
+  const tokens = {
+    linearGradient: /^(linear\-gradient)/i,
+    radialGradient: /^(radial\-gradient)/i,
+    conicGradient: /^(conic\-gradient)/i,
+    sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+    extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+    positionKeywords: /^(left|center|right|top|bottom)/i,
+    pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+    percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+    emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+    angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+    fromAngleValue: /^from\s*(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+    startCall: /^\(/,
+    endCall: /^\)/,
+    comma: /^,/,
+    hexColor: /(^\#[0-9a-fA-F]+)/,
+    literalColor: /^([a-zA-Z]+)/,
+    rgbColor: /^(rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))/i,
+    rgbaColor: /^(rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*((\d\.\d+)|\d{1,3})\))/i,
+    number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
   };
-const regLetter = /\w|\(|\)|-/;
-const regPunctuation = /[.?!,;:/，。？！、；：]/;
-const regFirstSpace = /\S/;
-const setTextStyle = (ctx, character) => {
-  let fontSize = character.fontSize || 16;
-  switch (character.script) {
-    case "super":
-    case "sub":
-      fontSize *= .8;
+  let input = "";
+  function error(msg) {
+    const err = new Error(input + ": " + msg);
+    throw err.source = input, err;
   }
-  ctx.setTextStyle({
-    textAlign: "left",
-    textBaseline: character.textBaseline || "alphabetic",
-    fontStyle: character.fontStyle || "",
-    fontWeight: character.fontWeight || "",
-    fontSize: fontSize,
-    fontFamily: character.fontFamily || "sans-serif"
-  });
-};
-function applyFillStyle(ctx, character) {
-  const fillStyle = character && character.fill || defaultFormatting.fill;
-  if (!fillStyle) return void (ctx.globalAlpha = 0);
-  const {
-    fillOpacity = 1,
-    opacity = 1
-  } = character;
-  ctx.globalAlpha = fillOpacity * opacity, ctx.fillStyle = fillStyle, setTextStyle(ctx, character);
-}
-function applyStrokeStyle(ctx, character) {
-  const strokeStyle = character && character.stroke || defaultFormatting.stroke;
-  if (!strokeStyle) return void (ctx.globalAlpha = 0);
-  const {
-    strokeOpacity = 1,
-    opacity = 1
-  } = character;
-  ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
-}
-function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
-  if (!width || width <= 0) return 0;
-  const textMeasure = application.graphicUtil.textMeasure;
-  let index = guessIndex,
-    temp = desc.slice(0, index),
-    tempWidth = Math.floor(textMeasure.measureText(temp, character).width),
-    tempNext = desc.slice(0, index + 1),
-    tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
-  for (; tempWidth > width || tempWidthNext <= width;) {
-    if (tempWidth > width ? index-- : index++, index > desc.length) {
-      index = desc.length;
-      break;
-    }
-    if (index < 0) {
-      index = 0;
-      break;
+  function getAST() {
+    const ast = matchListing(matchDefinition);
+    return input.length > 0 && error("Invalid input not EOF"), ast;
+  }
+  function matchDefinition() {
+    return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+  }
+  function matchGradient(gradientType, pattern, orientationMatcher) {
+    return function (pattern, callback) {
+      const captures = scan(pattern);
+      if (captures) {
+        scan(tokens.startCall) || error("Missing (");
+        const result = callback(captures);
+        return scan(tokens.endCall) || error("Missing )"), result;
+      }
+    }(pattern, function (captures) {
+      const orientation = orientationMatcher();
+      return orientation && (scan(tokens.comma) || error("Missing comma before color stops")), {
+        type: gradientType,
+        orientation: orientation,
+        colorStops: matchListing(matchColorStop)
+      };
+    });
+  }
+  function matchLinearOrientation() {
+    return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+  }
+  function matchConicalOrientation() {
+    return match("angular", tokens.fromAngleValue, 1);
+  }
+  function matchListRadialOrientations() {
+    let radialOrientations,
+      lookaheadCache,
+      radialOrientation = matchRadialOrientation();
+    return radialOrientation && (radialOrientations = [], radialOrientations.push(radialOrientation), lookaheadCache = input, scan(tokens.comma) && (radialOrientation = matchRadialOrientation(), radialOrientation ? radialOrientations.push(radialOrientation) : input = lookaheadCache)), radialOrientations;
+  }
+  function matchRadialOrientation() {
+    let radialType = function () {
+      const circle = match("shape", /^(circle)/i, 0);
+      circle && (circle.style = matchLength() || matchExtentKeyword());
+      return circle;
+    }() || function () {
+      const ellipse = match("shape", /^(ellipse)/i, 0);
+      ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
+      return ellipse;
+    }();
+    if (radialType) radialType.at = matchAtPosition();else {
+      const extent = matchExtentKeyword();
+      if (extent) {
+        radialType = extent;
+        const positionAt = matchAtPosition();
+        positionAt && (radialType.at = positionAt);
+      } else {
+        const defaultPosition = matchPositioning();
+        defaultPosition && (radialType = {
+          type: "default-radial",
+          at: defaultPosition
+        });
+      }
     }
-    temp = desc.slice(0, index), tempWidth = Math.floor(textMeasure.measureText(temp, character).width), tempNext = desc.slice(0, index + 1), tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
+    return radialType;
   }
-  return needTestLetter && (index = testLetter(desc, index)), index;
-}
-function testLetter(string, index) {
-  let negativeWrongMatch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
-  let i = index;
-  for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return negativeWrongMatch ? testLetter2(string, index) : index;
-  return i;
-}
-function testLetter2(string, index) {
-  let i = index;
-  for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i++, i >= string.length) return i;
-  return i;
-}
-function measureTextCanvas(text, character) {
-  const measurement = application.graphicUtil.textMeasure.measureText(text, character),
-    result = {
-      ascent: 0,
-      height: 0,
-      descent: 0,
-      width: 0
-    };
-  return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
-}
-
-var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-  var d,
-    c = arguments.length,
-    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-  if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-let ATextMeasure = class {
-  configure(service, env) {
-    this.canvas = service.canvas, this.context = service.context, service.bindTextMeasure(this);
+  function matchExtentKeyword() {
+    return match("extent-keyword", tokens.extentKeywords, 1);
   }
-  measureTextWidth(text, options) {
-    if (!this.context) return this.estimate(text, options).width;
-    this.context.setTextStyleWithoutAlignBaseline(options);
-    return this.context.measureText(text).width;
+  function matchAtPosition() {
+    if (match("position", /^at/, 0)) {
+      const positioning = matchPositioning();
+      return positioning || error("Missing positioning value"), positioning;
+    }
   }
-  estimate(text, _ref) {
-    let {
-      fontSize = DefaultTextAttribute.fontSize
-    } = _ref;
-    let eCharLen = 0,
-      cCharLen = 0;
-    for (let i = 0; i < text.length; i++) text.charCodeAt(i) < 128 ? eCharLen++ : cCharLen++;
-    return {
-      width: ~~(.8 * eCharLen * fontSize + cCharLen * fontSize),
-      height: fontSize
+  function matchPositioning() {
+    const location = {
+      x: matchDistance(),
+      y: matchDistance()
+    };
+    if (location.x || location.y) return {
+      type: "position",
+      value: location
     };
   }
-  measureTextPixelHeight(text, options) {
-    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);
+  function matchListing(matcher) {
+    let captures = matcher();
+    const result = [];
+    if (captures) for (result.push(captures); scan(tokens.comma);) captures = matcher(), captures ? result.push(captures) : error("One extra comma");
+    return result;
   }
-  measureTextBoundHieght(text, options) {
-    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);
+  function matchColorStop() {
+    const color = match("hex", tokens.hexColor, 1) || match("rgba", tokens.rgbaColor, 1) || match("rgb", tokens.rgbColor, 1) || match("literal", tokens.literalColor, 0);
+    return color || error("Expected color definition"), color.length = matchDistance(), color;
   }
-  measureText(text, options) {
-    return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
+  function matchDistance() {
+    return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
   }
-  clipTextVertical(verticalList, options, width, wordBreak) {
-    if (0 === verticalList.length) return {
-      verticalList: verticalList,
-      width: 0
-    };
-    const {
-      fontSize = 12
-    } = options;
-    verticalList.forEach(item => {
-      item.width = 0 === item.direction ? fontSize : this.measureTextWidth(item.text, options);
-    });
-    const out = [];
-    let length = 0,
-      i = 0;
-    for (; i < verticalList.length && length + verticalList[i].width < width; i++) length += verticalList[i].width, out.push(verticalList[i]);
-    if (verticalList[i] && verticalList[i].text.length > 1) {
-      const clipedData = this._clipText(verticalList[i].text, options, width - length, 0, verticalList[i].text.length - 1, "end", !1);
-      if (wordBreak && clipedData.str !== verticalList[i].text) {
-        let text = "",
-          length = 0;
-        for (let j = 0; j < i; j++) {
-          const item = verticalList[j];
-          text += item.text, length += item.text.length;
-        }
-        text += verticalList[i].text;
-        const totalLength = length + clipedData.str.length;
-        let index = testLetter(text, totalLength);
-        index -= length, index !== clipedData.str.length - 1 && (clipedData.str = clipedData.str.substring(0, index), clipedData.width = this.measureTextWidth(clipedData.str, options));
-      }
-      out.push(Object.assign(Object.assign({}, verticalList[i]), {
-        text: clipedData.str,
-        width: clipedData.width
-      })), length += clipedData.width;
-    }
-    return {
-      verticalList: out,
-      width: length
+  function matchLength() {
+    return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+  }
+  function match(type, pattern, captureIndex) {
+    const captures = scan(pattern);
+    if (captures) return {
+      type: type,
+      value: captures[captureIndex]
     };
   }
-  clipText(text, options, width, wordBreak, keepAllBreak) {
-    if (0 === text.length) return {
-      str: "",
-      width: 0
-    };
-    let length = this.measureTextWidth(text, options);
-    if (length <= width) return {
-      str: text,
-      width: length
-    };
-    if (length = this.measureTextWidth(text[0], options), length > width) return {
-      str: "",
-      width: 0
-    };
-    const data = this._clipText(text, options, width, 0, text.length - 1, "end", !1);
-    if (wordBreak && data.str !== text) {
-      let index = testLetter(text, data.str.length, keepAllBreak);
-      index !== data.str.length && (index > data.str.length && (data.wordBreaked = index, index = data.str.length), data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
-    }
-    return data;
+  function scan(regexp) {
+    const blankCaptures = /^[\n\r\t\s]+/.exec(input);
+    blankCaptures && consume(blankCaptures[0].length);
+    const captures = regexp.exec(input);
+    return captures && consume(captures[0].length), captures;
   }
-  _clipText(text, options, width, leftIdx, rightIdx, position, suffix) {
-    let data;
-    if ("start" === position) data = this._clipTextStart(text, options, width, leftIdx, rightIdx), suffix && (data.result = suffix + data.str);else if ("middle" === position) {
-      const d = this._clipTextMiddle(text, options, width, "", "", 0, 0, 1);
-      data = {
-        str: "none",
-        width: d.width,
-        result: d.left + suffix + d.right
-      };
-    } else data = this._clipTextEnd(text, options, width, leftIdx, rightIdx), suffix && (data.result = data.str + suffix);
-    return data;
+  function consume(size) {
+    input = input.substr(size);
   }
-  _clipTextEnd(text, options, width, leftIdx, rightIdx) {
-    const middleIdx = Math.floor((leftIdx + rightIdx) / 2),
-      subText = text.substring(0, middleIdx + 1),
-      strWidth = this.measureTextWidth(subText, options);
-    let length;
-    if (strWidth > width) {
-      if (subText.length <= 1) return {
-        str: "",
-        width: 0
-      };
-      const str = text.substring(0, middleIdx);
-      return length = this.measureTextWidth(str, options), length <= width ? {
-        str: str,
-        width: length
-      } : this._clipTextEnd(text, options, width, leftIdx, middleIdx);
-    }
-    if (strWidth < width) {
-      if (middleIdx >= text.length - 1) return {
-        str: text,
-        width: this.measureTextWidth(text, options)
-      };
-      const str = text.substring(0, middleIdx + 2);
-      return length = this.measureTextWidth(str, options), length >= width ? {
-        str: subText,
-        width: strWidth
-      } : this._clipTextEnd(text, options, width, middleIdx, rightIdx);
-    }
-    return {
-      str: subText,
-      width: strWidth
-    };
+  return function (code) {
+    return input = code.toString(), getAST();
+  };
+}();
+class GradientParser {
+  static IsGradient(c) {
+    return !("string" == typeof c && !c.includes("gradient"));
   }
-  _clipTextStart(text, options, width, leftIdx, rightIdx) {
-    const middleIdx = Math.ceil((leftIdx + rightIdx) / 2),
-      subText = text.substring(middleIdx - 1, text.length - 1),
-      strWidth = this.measureTextWidth(subText, options);
-    let length;
-    if (strWidth > width) {
-      if (subText.length <= 1) return {
-        str: "",
-        width: 0
-      };
-      const str = text.substring(middleIdx, text.length - 1);
-      return length = this.measureTextWidth(str, options), length <= width ? {
-        str: str,
-        width: length
-      } : this._clipTextStart(text, options, width, middleIdx, text.length - 1);
-    }
-    if (strWidth < width) {
-      if (middleIdx <= 0) return {
-        str: text,
-        width: this.measureTextWidth(text, options)
-      };
-      const str = text.substring(middleIdx - 2, text.length - 1);
-      return length = this.measureTextWidth(str, options), length >= width ? {
-        str: subText,
-        width: strWidth
-      } : this._clipTextStart(text, options, width, leftIdx, middleIdx);
+  static IsGradientStr(c) {
+    return "string" == typeof c && c.includes("gradient");
+  }
+  static Parse(c) {
+    if (GradientParser.IsGradientStr(c)) try {
+      const datum = parse(c)[0];
+      if (datum) {
+        if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
+        if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
+        if ("conic" === datum.type) return GradientParser.ParseConic(datum);
+      }
+    } catch (err) {
+      return c;
     }
+    return c;
+  }
+  static ParseConic(datum) {
+    const {
+        orientation: orientation,
+        colorStops = []
+      } = datum,
+      halfPi = pi / 2,
+      sa = parseFloat(orientation.value) / 180 * pi - halfPi;
     return {
-      str: subText,
-      width: strWidth
+      gradient: "conical",
+      x: .5,
+      y: .5,
+      startAngle: sa,
+      endAngle: sa + pi2,
+      stops: colorStops.map(item => ({
+        color: item.value,
+        offset: parseFloat(item.length.value) / 100
+      }))
     };
   }
-  _clipTextMiddle(text, options, width, left, right, leftW, rightW, buffer) {
-    const subLeftText = text.substring(0, buffer),
-      strLeftWidth = this.measureTextWidth(subLeftText, options);
-    if (strLeftWidth + rightW > width) return {
-      left: left,
-      right: right,
-      width: leftW + rightW
+  static ParseRadial(datum) {
+    const {
+      colorStops = []
+    } = datum;
+    return {
+      gradient: "radial",
+      x0: .5,
+      y0: .5,
+      x1: .5,
+      y1: .5,
+      r0: 0,
+      r1: 1,
+      stops: colorStops.map(item => ({
+        color: item.value,
+        offset: parseFloat(item.length.value) / 100
+      }))
     };
-    const subRightText = text.substring(text.length - buffer, text.length),
-      strRightWidth = this.measureTextWidth(subRightText, options);
-    return strLeftWidth + strRightWidth > width ? {
-      left: subLeftText,
-      right: right,
-      width: strLeftWidth + rightW
-    } : this._clipTextMiddle(text, options, width, subLeftText, subRightText, strLeftWidth, strRightWidth, buffer + 1);
   }
-  clipTextWithSuffixVertical(verticalList, options, width, suffix, wordBreak, suffixPosition) {
-    if ("" === suffix) return this.clipTextVertical(verticalList, options, width, wordBreak);
-    if (0 === verticalList.length) return {
-      verticalList: verticalList,
-      width: 0
+  static ParseLinear(datum) {
+    const {
+        orientation: orientation,
+        colorStops = []
+      } = datum,
+      halfPi = pi / 2;
+    let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi : 0;
+    for (; angle < 0;) angle += pi2;
+    for (; angle >= pi2;) angle -= pi2;
+    let x0 = 0,
+      y0 = 0,
+      x1 = 0,
+      y1 = 0;
+    return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = y0 - Math.cos(angle)) : angle < pi ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi), y1 = Math.cos(angle - pi)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi), y1 -= Math.sin(angle - halfPi - pi)), {
+      gradient: "linear",
+      x0: x0,
+      y0: y0,
+      x1: x1,
+      y1: y1,
+      stops: colorStops.map(item => ({
+        color: item.value,
+        offset: parseFloat(item.length.value) / 100
+      }))
     };
-    const output = this.clipTextVertical(verticalList, options, width, wordBreak);
-    if (output.verticalList.length === verticalList.length && output.verticalList[output.verticalList.length - 1].width === verticalList[verticalList.length - 1].width) return output;
-    const suffixWidth = this.measureTextWidth(suffix, options);
-    if (suffixWidth > width) return output;
-    let out;
-    if (width -= suffixWidth, "start" === suffixPosition) {
-      const nextVerticalList = this.revertVerticalList(verticalList);
-      out = this.clipTextVertical(nextVerticalList, options, width, wordBreak);
-      const v = this.revertVerticalList(out.verticalList);
-      v.unshift({
-        text: suffix,
-        direction: 1,
-        width: suffixWidth
-      }), out.verticalList = v;
-    } else if ("middle" === suffixPosition) {
-      const leftOut = this.clipTextVertical(verticalList, options, width / 2, wordBreak),
-        nextVerticalList = this.revertVerticalList(verticalList),
-        rightOut = this.clipTextVertical(nextVerticalList, options, width / 2, wordBreak);
-      leftOut.verticalList.push({
-        text: suffix,
-        direction: 1,
-        width: suffixWidth
-      }), this.revertVerticalList(rightOut.verticalList).forEach(v => leftOut.verticalList.push(v)), out = {
-        verticalList: leftOut.verticalList,
-        width: leftOut.width + rightOut.width
-      };
-    } else out = this.clipTextVertical(verticalList, options, width, wordBreak), out.verticalList.push({
-      text: suffix,
-      direction: 1,
-      width: suffixWidth
-    });
-    return out.width += suffixWidth, out;
   }
-  revertVerticalList(verticalList) {
-    return verticalList.reverse().map(l => {
-      const t = l.text.split("").reverse().join("");
-      return Object.assign(Object.assign({}, l), {
-        text: t
-      });
-    });
+}
+
+function getScaledStroke(context, width, dpr) {
+  let strokeWidth = width;
+  const {
+      a: a,
+      b: b,
+      c: c,
+      d: d
+    } = context.currentMatrix,
+    scaleX = Math.sign(a) * Math.sqrt(a * a + b * b),
+    scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
+  return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
+}
+function createColor(context, c, params) {
+  let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  if (!c || !0 === c) return "black";
+  let result, color;
+  if (isArray(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
+  if (color = GradientParser.Parse(color), "string" == typeof color) return color;
+  if (params.AABBBounds && (!params.attribute || 0 !== params.attribute.scaleX || 0 !== params.attribute.scaleY)) {
+    const bounds = params.AABBBounds;
+    let w = bounds.x2 - bounds.x1,
+      h = bounds.y2 - bounds.y1,
+      x = bounds.x1 - offsetX,
+      y = bounds.y1 - offsetY;
+    if (params.attribute) {
+      const {
+        scaleX = 1,
+        scaleY = 1
+      } = params.attribute;
+      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+    }
+    "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
   }
-  clipTextWithSuffix(text, options, width, suffix, wordBreak, position) {
-    let forceSuffix = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !1;
-    if ("" === suffix) return this.clipText(text, options, width, wordBreak);
-    if (0 === text.length) return {
-      str: "",
-      width: 0
-    };
-    const length = this.measureTextWidth(text, options);
-    if (!forceSuffix && length <= width) return {
-      str: text,
-      width: length
-    };
-    const suffixWidth = this.measureTextWidth(suffix, options);
-    if (suffixWidth > width) return {
-      str: "",
-      width: 0
-    };
-    if (forceSuffix && length + suffixWidth <= width) return {
-      str: text + suffix,
-      width: length + suffixWidth
-    };
-    width -= suffixWidth;
-    const data = this._clipText(text, options, width, 0, text.length - 1, position, suffix);
-    if (wordBreak && data.str !== text) {
-      const index = testLetter(text, data.str.length);
-      index !== data.str.length && (data.result = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
-    } else forceSuffix && data.str === text && (data.result = text + suffix);
-    return data.str = data.result, data.width += suffixWidth, data;
+  return result || "orange";
+}
+function createLinearGradient(context, color, x, y, w, h) {
+  var _a, _b, _c, _d;
+  const canvasGradient = context.createLinearGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : 0) * h, x + (null !== (_c = color.x1) && void 0 !== _c ? _c : 1) * w, y + (null !== (_d = color.y1) && void 0 !== _d ? _d : 0) * h);
+  return color.stops.forEach(stop => {
+    canvasGradient.addColorStop(stop.offset, stop.color);
+  }), canvasGradient;
+}
+function createRadialGradient(context, color, x, y, w, h) {
+  var _a, _b, _c, _d, _e, _f;
+  const canvasGradient = context.createRadialGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : .5) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : .5) * h, Math.max(w, h) * (null !== (_c = color.r0) && void 0 !== _c ? _c : 0), x + (null !== (_d = color.x1) && void 0 !== _d ? _d : .5) * w, y + (null !== (_e = color.y1) && void 0 !== _e ? _e : .5) * h, Math.max(w, h) * (null !== (_f = color.r1) && void 0 !== _f ? _f : .5));
+  return color.stops.forEach(stop => {
+    canvasGradient.addColorStop(stop.offset, stop.color);
+  }), canvasGradient;
+}
+function createConicGradient(context, color, x, y, w, h) {
+  var _a, _b;
+  const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
+  return color.stops.forEach(stop => {
+    canvasGradient.addColorStop(stop.offset, stop.color);
+  }), canvasGradient.GetPattern(w + x, h + y, undefined);
+}
+
+const DIRECTION_KEY = {
+  horizontal: {
+    width: "width",
+    height: "height",
+    left: "left",
+    top: "top",
+    x: "x",
+    y: "y",
+    bottom: "bottom"
+  },
+  vertical: {
+    width: "height",
+    height: "width",
+    left: "top",
+    top: "left",
+    x: "y",
+    y: "x",
+    bottom: "right"
   }
 };
-ATextMeasure = __decorate$O([injectable()], ATextMeasure);
+const defaultFormatting = {
+    fontSize: 16,
+    fontFamily: "sans-serif",
+    fill: !0,
+    stroke: !1,
+    fontWeight: "normal",
+    lineHeight: "normal",
+    fontStyle: "normal",
+    textDecoration: "none",
+    textAlign: "left",
+    script: "normal"
+  };
+const regLetter = /\w|\(|\)|-/;
+const regPunctuation = /[.?!,;:/，。？！、；：]/;
+const regFirstSpace = /\S/;
+const setTextStyle = (ctx, character) => {
+  let fontSize = character.fontSize || 16;
+  switch (character.script) {
+    case "super":
+    case "sub":
+      fontSize *= .8;
+  }
+  ctx.setTextStyle({
+    textAlign: "left",
+    textBaseline: character.textBaseline || "alphabetic",
+    fontStyle: character.fontStyle || "",
+    fontWeight: character.fontWeight || "",
+    fontSize: fontSize,
+    fontFamily: character.fontFamily || "sans-serif"
+  });
+};
+function applyFillStyle(ctx, character, b) {
+  const fillStyle = character && character.fill || defaultFormatting.fill;
+  if (!fillStyle) return void (ctx.globalAlpha = 0);
+  const {
+    fillOpacity = 1,
+    opacity = 1
+  } = character;
+  ctx.globalAlpha = fillOpacity * opacity, ctx.fillStyle = b ? createColor(ctx, fillStyle, {
+    AABBBounds: b
+  }) : fillStyle, setTextStyle(ctx, character);
+}
+function applyStrokeStyle(ctx, character) {
+  const strokeStyle = character && character.stroke || defaultFormatting.stroke;
+  if (!strokeStyle) return void (ctx.globalAlpha = 0);
+  const {
+    strokeOpacity = 1,
+    opacity = 1
+  } = character;
+  ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
+}
+function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
+  if (!width || width <= 0) return 0;
+  const textMeasure = application.graphicUtil.textMeasure;
+  let index = guessIndex,
+    temp = desc.slice(0, index),
+    tempWidth = Math.floor(textMeasure.measureText(temp, character).width),
+    tempNext = desc.slice(0, index + 1),
+    tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
+  for (; tempWidth > width || tempWidthNext <= width;) {
+    if (tempWidth > width ? index-- : index++, index > desc.length) {
+      index = desc.length;
+      break;
+    }
+    if (index < 0) {
+      index = 0;
+      break;
+    }
+    temp = desc.slice(0, index), tempWidth = Math.floor(textMeasure.measureText(temp, character).width), tempNext = desc.slice(0, index + 1), tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
+  }
+  return needTestLetter && (index = testLetter(desc, index)), index;
+}
+function testLetter(string, index) {
+  let negativeWrongMatch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+  let i = index;
+  for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return negativeWrongMatch ? testLetter2(string, index) : index;
+  return i;
+}
+function testLetter2(string, index) {
+  let i = index;
+  for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i++, i >= string.length) return i;
+  return i;
+}
+function measureTextCanvas(text, character) {
+  const measurement = application.graphicUtil.textMeasure.measureText(text, character),
+    result = {
+      ascent: 0,
+      height: 0,
+      descent: 0,
+      width: 0
+    };
+  return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
+}
 
-var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
   var d,
     c = arguments.length,
     r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
   if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const TextMeasureContribution = Symbol.for("TextMeasureContribution");
-let DefaultTextMeasureContribution = class extends ATextMeasure {};
-DefaultTextMeasureContribution = __decorate$N([injectable()], DefaultTextMeasureContribution);
-
-const container = new Container();
-
-const CanvasFactory = Symbol.for("CanvasFactory");
-
-function wrapCanvas(params) {
-  return container.getNamed(CanvasFactory, application.global.env)(params);
-}
-
-class DefaultCanvasAllocate {
-  constructor() {
-    this.pools = [], this.allocatedCanvas = [];
+let ATextMeasure = class {
+  configure(service, env) {
+    this.canvas = service.canvas, this.context = service.context, service.bindTextMeasure(this);
   }
-  shareCanvas() {
-    return this.allocatedCanvas.length ? this.allocatedCanvas[0] : this.getCommonCanvas();
+  _measureTextWithoutAlignBaseline(text, options, compatible) {
+    this.context.setTextStyleWithoutAlignBaseline(options);
+    const metrics = this.context.measureText(text);
+    return compatible ? this.compatibleMetrics(metrics, options) : metrics;
   }
-  getCommonCanvas() {
-    return this._commonCanvas || (this._commonCanvas = this.allocate({
-      width: 100,
-      height: 100,
-      dpr: 2
-    })), this._commonCanvas;
+  _measureTextWithAlignBaseline(text, options, compatible) {
+    this.context.setTextStyle(options);
+    const metrics = this.context.measureText(text);
+    return compatible ? this.compatibleMetrics(metrics, options) : metrics;
   }
-  allocate(data) {
-    if (!this.pools.length) {
-      const c = wrapCanvas(Object.assign({
-        nativeCanvas: application.global.createCanvas(data)
-      }, data));
-      return this.allocatedCanvas.push(c), c;
+  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;
     }
-    const m = this.pools.pop();
-    return m.resize(data.width, data.height), m.dpr = data.dpr, m;
-  }
-  allocateByObj(canvas) {
-    if (!this.pools.length) {
-      const data = {
-          width: canvas.width / canvas.dpr,
-          height: canvas.height / canvas.dpr,
-          dpr: canvas.dpr
-        },
-        c = wrapCanvas(Object.assign({
-          nativeCanvas: application.global.createCanvas(data)
-        }, data));
-      return this.allocatedCanvas.push(c), c;
+    if (null == metrics.actualBoundingBoxLeft || null == metrics.actualBoundingBoxRight) {
+      const {
+        left: left,
+        right: right
+      } = this.measureTextBoundLeftRightEstimate(options);
+      metrics.actualBoundingBoxLeft = left, metrics.actualBoundingBoxRight = right;
     }
-    const m = this.pools.pop();
-    return m.width = canvas.width, m.height = canvas.height, m;
-  }
-  free(d) {
-    this.pools.push(d);
+    return metrics;
   }
-  get length() {
-    return this.pools.length;
-  }
-  release() {
-    this.pools = [];
-  }
-}
-const canvasAllocate = new DefaultCanvasAllocate();
-
-var __decorate$M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-    var d,
-      c = arguments.length,
-      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-  },
-  __metadata$D = undefined && undefined.__metadata || function (k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-  };
-const VWindow = Symbol.for("VWindow");
-const WindowHandlerContribution = Symbol.for("WindowHandlerContribution");
-let DefaultWindow = class {
-  get width() {
-    if (this._handler) {
-      const wh = this._handler.getWH();
-      return this._width = wh.width;
-    }
-    return this._width;
-  }
-  get height() {
-    if (this._handler) {
-      const wh = this._handler.getWH();
-      return this._height = wh.height;
-    }
-    return this._height;
+  estimate(text, _ref) {
+    let {
+      fontSize = DefaultTextAttribute.fontSize
+    } = _ref;
+    let eCharLen = 0,
+      cCharLen = 0;
+    for (let i = 0; i < text.length; i++) text.charCodeAt(i) < 128 ? eCharLen++ : cCharLen++;
+    return {
+      width: ~~(.8 * eCharLen * fontSize + cCharLen * fontSize),
+      height: fontSize
+    };
   }
-  get dpr() {
-    return this._handler.getDpr();
+  measureTextWidth(text, options, textMeasure) {
+    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
   }
-  constructor() {
-    this.hooks = {
-      onChange: new SyncHook(["x", "y", "width", "height"])
-    }, this.active = () => {
-      const global = this.global;
-      if (!global.env || this.actived) return;
-      container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
-    }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
+  measureTextBoundsWidth(text, options, textMeasure) {
+    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
   }
-  postInit() {
-    this.global.hooks.onSetEnv.tap("window", this.active), this.active();
+  measureTextBoundsLeftRight(text, options, textMeasure) {
+    return this.context ? {
+      left: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxLeft,
+      right: textMeasure.actualBoundingBoxRight
+    } : this.measureTextBoundLeftRightEstimate(options);
   }
-  get style() {
+  measureTextPixelHeight(text, options, textMeasure) {
     var _a;
-    return null !== (_a = this._handler.getStyle()) && void 0 !== _a ? _a : {};
-  }
-  set style(style) {
-    this._handler.setStyle(style);
-  }
-  create(params) {
-    var _a, _b;
-    this._handler.createWindow(params);
-    const windowWH = this._handler.getWH();
-    this._width = windowWH.width, this._height = windowWH.height, params.viewBox ? this.setViewBox(params.viewBox) : !1 !== params.canvasControled ? this.setViewBox({
-      x1: 0,
-      y1: 0,
-      x2: this._width,
-      y2: this._height
-    }) : this.setViewBox({
-      x1: 0,
-      y1: 0,
-      x2: null !== (_a = params.width) && void 0 !== _a ? _a : this._width,
-      y2: null !== (_b = params.height) && void 0 !== _b ? _b : this._height
-    }), this.title = this._handler.getTitle(), this.resizable = !0;
-  }
-  setWindowHandler(handler) {
-    this._handler = handler;
-  }
-  setDpr(dpr) {
-    return this._handler.setDpr(dpr);
-  }
-  resize(w, h) {
-    return this._handler.resizeWindow(w, h);
-  }
-  configure() {
-    throw new Error("暂不支持");
-  }
-  release() {
-    return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
-  }
-  getContext() {
-    return this._handler.getContext();
-  }
-  getNativeHandler() {
-    return this._handler.getNativeHandler();
-  }
-  getImageBuffer(type) {
-    return this._handler.getImageBuffer ? this._handler.getImageBuffer(type) : null;
-  }
-  addEventListener(type, listener, options) {
-    return this._handler.addEventListener(type, listener, options);
-  }
-  removeEventListener(type, listener, options) {
-    return this._handler.removeEventListener(type, listener, options);
-  }
-  dispatchEvent(event) {
-    return this._handler.dispatchEvent(event);
-  }
-  getBoundingClientRect() {
-    return this._handler.getBoundingClientRect();
-  }
-  getContainer() {
-    return this._handler.container;
+    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;
   }
-  clearViewBox(color) {
-    this._handler.clearViewBox(color);
+  measureTextPixelADscent(text, options, textMeasure) {
+    return this.context ? {
+      ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxAscent,
+      descent: textMeasure.actualBoundingBoxDescent
+    } : this.measureTextBoundADscentEstimate(options);
   }
-  setViewBox(viewBox) {
-    this._handler.setViewBox(viewBox);
+  measureTextBoundHieght(text, options, textMeasure) {
+    var _a;
+    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, !0), Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent)) : null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
   }
-  setViewBoxTransform(a, b, c, d, e, f) {
-    this._handler.setViewBoxTransform(a, b, c, d, e, f);
+  measureTextBoundADscent(text, options, textMeasure) {
+    return this.context ? {
+      ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).fontBoundingBoxAscent,
+      descent: textMeasure.fontBoundingBoxDescent
+    } : this.measureTextBoundADscentEstimate(options);
   }
-  getViewBox() {
-    return this._handler.getViewBox();
+  measureTextBoundADscentEstimate(options) {
+    var _a;
+    const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
+    return {
+      ascent: .79 * fontSize,
+      descent: .21 * fontSize
+    };
   }
-  getViewBoxTransform() {
-    return this._handler.getViewBoxTransform();
+  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
+    };
   }
-  pointTransform(x, y) {
-    const vb = this._handler.getViewBox(),
-      nextP = {
-        x: x,
-        y: y
+  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 this._handler.getViewBoxTransform().transformPoint({
-      x: x,
-      y: y
-    }, nextP), nextP.x -= vb.x1, nextP.y -= vb.y1, nextP;
-  }
-  hasSubView() {
-    const viewBox = this._handler.getViewBox();
-    return !(0 === viewBox.x1 && 0 === viewBox.y1 && isNumberClose(this.width, viewBox.width()) && isNumberClose(this.height, viewBox.height()));
-  }
-  isVisible(bbox) {
-    return this._handler.isVisible(bbox);
-  }
-  onVisibleChange(cb) {
-    return this._handler.onVisibleChange(cb);
-  }
-  getTopLeft(baseWindow) {
-    return this._handler.getTopLeft(baseWindow);
-  }
-};
-DefaultWindow = __decorate$M([injectable(), __metadata$D("design:paramtypes", [])], DefaultWindow);
-
-var __decorate$L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-    var d,
-      c = arguments.length,
-      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-  },
-  __metadata$C = undefined && undefined.__metadata || function (k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-  },
-  __param$y = undefined && undefined.__param || function (paramIndex, decorator) {
-    return function (target, key) {
-      decorator(target, key, paramIndex);
+    }
+    return {
+      ascent: out.actualBoundingBoxAscent,
+      descent: out.actualBoundingBoxDescent,
+      width: out.width
     };
-  };
-let DefaultGraphicUtil = class {
-  get canvas() {
-    return this.tryInitCanvas(), this._canvas;
   }
-  get context() {
-    return this.tryInitCanvas(), this._context;
+  measureText(text, options) {
+    return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
   }
-  constructor(contributions) {
-    this.contributions = contributions, this.configured = !1, this.global = application.global, this.global.hooks.onSetEnv.tap("graphic-util", (lastEnv, env, global) => {
-      this.configured = !1, this.configure(global, env);
+  clipTextVertical(verticalList, options, width, wordBreak) {
+    if (0 === verticalList.length) return {
+      verticalList: verticalList,
+      width: 0
+    };
+    const {
+      fontSize = 12
+    } = options;
+    verticalList.forEach(item => {
+      item.width = 0 === item.direction ? fontSize : this.measureTextWidth(item.text, options);
     });
-  }
-  get textMeasure() {
-    return this._textMeasure || this.configure(this.global, this.global.env), this._textMeasure;
-  }
-  configure(global, env) {
-    this.configured || (this.contributions.getContributions().forEach(contribution => {
-      contribution.configure(this, env);
-    }), this.configured = !0);
-  }
-  tryInitCanvas() {
-    if (!this._canvas) {
-      const canvas = canvasAllocate.shareCanvas();
-      this._canvas = canvas, this._context = canvas.getContext("2d");
+    const out = [];
+    let length = 0,
+      i = 0;
+    for (; i < verticalList.length && length + verticalList[i].width < width; i++) length += verticalList[i].width, out.push(verticalList[i]);
+    if (verticalList[i] && verticalList[i].text.length > 1) {
+      const clipedData = this._clipText(verticalList[i].text, options, width - length, 0, verticalList[i].text.length - 1, "end", !1);
+      if (wordBreak && clipedData.str !== verticalList[i].text) {
+        let text = "",
+          length = 0;
+        for (let j = 0; j < i; j++) {
+          const item = verticalList[j];
+          text += item.text, length += item.text.length;
+        }
+        text += verticalList[i].text;
+        const totalLength = length + clipedData.str.length;
+        let index = testLetter(text, totalLength);
+        index -= length, index !== clipedData.str.length - 1 && (clipedData.str = clipedData.str.substring(0, index), clipedData.width = this.measureTextWidth(clipedData.str, options));
+      }
+      out.push(Object.assign(Object.assign({}, verticalList[i]), {
+        text: clipedData.str,
+        width: clipedData.width
+      })), length += clipedData.width;
     }
-  }
-  bindTextMeasure(tm) {
-    this._textMeasure = tm;
-  }
-  measureText(text, tc) {
-    let method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "native";
-    var _a;
-    this.configure(this.global, this.global.env);
-    const m = this.global.measureTextMethod;
-    this.global.measureTextMethod = method;
-    const data = {
-      width: this._textMeasure.measureTextWidth(text, tc),
-      height: null !== (_a = tc.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize
+    return {
+      verticalList: out,
+      width: length
     };
-    return this.global.measureTextMethod = m, data;
   }
-  createTextMeasureInstance(textSpec, option, getCanvasForMeasure) {
-    return this.configure(this.global, this.global.env), new TextMeasure(Object.assign({
-      defaultFontParams: {
-        fontFamily: DefaultTextStyle.fontFamily,
-        fontSize: DefaultTextStyle.fontSize
+  clipText(text, options, width, wordBreak, keepAllBreak) {
+    if (0 === text.length) return {
+      str: "",
+      width: 0
+    };
+    let length = this.measureTextWidth(text, options);
+    if (length <= width) return {
+      str: text,
+      width: length
+    };
+    if (length = this.measureTextWidth(text[0], options), length > width) return {
+      str: "",
+      width: 0
+    };
+    const data = this._clipText(text, options, width, 0, text.length - 1, "end", !1);
+    if (wordBreak && data.str !== text) {
+      let index = testLetter(text, data.str.length, keepAllBreak);
+      index !== data.str.length && (index > data.str.length && (data.wordBreaked = index, index = data.str.length), data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
+    }
+    return data;
+  }
+  _clipText(text, options, width, leftIdx, rightIdx, position, suffix) {
+    let data;
+    if ("start" === position) data = this._clipTextStart(text, options, width, leftIdx, rightIdx), suffix && (data.result = suffix + data.str);else if ("middle" === position) {
+      const d = this._clipTextMiddle(text, options, width, "", "", 0, 0, 1);
+      data = {
+        str: "none",
+        width: d.width,
+        result: d.left + suffix + d.right
+      };
+    } else data = this._clipTextEnd(text, options, width, leftIdx, rightIdx), suffix && (data.result = data.str + suffix);
+    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);
+    let length;
+    if (strWidth > width) {
+      if (subText.length <= 1) return {
+        str: "",
+        width: 0
+      };
+      const str = text.substring(0, middleIdx);
+      return length = this.measureTextWidth(str, options), length <= width ? {
+        str: str,
+        width: length
+      } : this._clipTextEnd(text, options, width, leftIdx, middleIdx);
+    }
+    if (strWidth < width) {
+      if (middleIdx >= text.length - 1) return {
+        str: text,
+        width: this.measureTextWidth(text, options)
+      };
+      const str = text.substring(0, middleIdx + 2);
+      return length = this.measureTextWidth(str, options), length >= width ? {
+        str: subText,
+        width: strWidth
+      } : this._clipTextEnd(text, options, width, middleIdx, rightIdx);
+    }
+    return {
+      str: subText,
+      width: strWidth
+    };
+  }
+  _clipTextStart(text, options, width, leftIdx, rightIdx) {
+    const middleIdx = Math.ceil((leftIdx + rightIdx) / 2),
+      subText = text.substring(middleIdx - 1, text.length),
+      strWidth = this.measureTextWidth(subText, options);
+    let length;
+    if (strWidth > width) {
+      if (subText.length <= 1) return {
+        str: "",
+        width: 0
+      };
+      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);
+    }
+    if (strWidth < width) {
+      if (middleIdx <= 0) return {
+        str: text,
+        width: this.measureTextWidth(text, options)
+      };
+      const str = text.substring(middleIdx - 2, text.length);
+      return length = this.measureTextWidth(str, options), length >= width ? {
+        str: subText,
+        width: strWidth
+      } : this._clipTextStart(text, options, width, leftIdx, middleIdx);
+    }
+    return {
+      str: subText,
+      width: strWidth
+    };
+  }
+  _clipTextMiddle(text, options, width, left, right, leftW, rightW, buffer) {
+    const subLeftText = text.substring(0, buffer),
+      strLeftWidth = this.measureTextWidth(subLeftText, options);
+    if (strLeftWidth + rightW > width) return {
+      left: left,
+      right: right,
+      width: leftW + rightW
+    };
+    const subRightText = text.substring(text.length - buffer, text.length),
+      strRightWidth = this.measureTextWidth(subRightText, options);
+    return strLeftWidth + strRightWidth > width ? {
+      left: subLeftText,
+      right: right,
+      width: strLeftWidth + rightW
+    } : this._clipTextMiddle(text, options, width, subLeftText, subRightText, strLeftWidth, strRightWidth, buffer + 1);
+  }
+  clipTextWithSuffixVertical(verticalList, options, width, suffix, wordBreak, suffixPosition) {
+    if ("" === suffix) return this.clipTextVertical(verticalList, options, width, wordBreak);
+    if (0 === verticalList.length) return {
+      verticalList: verticalList,
+      width: 0
+    };
+    const output = this.clipTextVertical(verticalList, options, width, wordBreak);
+    if (output.verticalList.length === verticalList.length && output.verticalList[output.verticalList.length - 1].width === verticalList[verticalList.length - 1].width) return output;
+    const suffixWidth = this.measureTextWidth(suffix, options);
+    if (suffixWidth > width) return output;
+    let out;
+    if (width -= suffixWidth, "start" === suffixPosition) {
+      const nextVerticalList = this.revertVerticalList(verticalList);
+      out = this.clipTextVertical(nextVerticalList, options, width, wordBreak);
+      const v = this.revertVerticalList(out.verticalList);
+      v.unshift({
+        text: suffix,
+        direction: 1,
+        width: suffixWidth
+      }), out.verticalList = v;
+    } else if ("middle" === suffixPosition) {
+      const leftOut = this.clipTextVertical(verticalList, options, width / 2, wordBreak),
+        nextVerticalList = this.revertVerticalList(verticalList),
+        rightOut = this.clipTextVertical(nextVerticalList, options, width / 2, wordBreak);
+      leftOut.verticalList.push({
+        text: suffix,
+        direction: 1,
+        width: suffixWidth
+      }), this.revertVerticalList(rightOut.verticalList).forEach(v => leftOut.verticalList.push(v)), out = {
+        verticalList: leftOut.verticalList,
+        width: leftOut.width + rightOut.width
+      };
+    } else out = this.clipTextVertical(verticalList, options, width, wordBreak), out.verticalList.push({
+      text: suffix,
+      direction: 1,
+      width: suffixWidth
+    });
+    return out.width += suffixWidth, out;
+  }
+  revertVerticalList(verticalList) {
+    return verticalList.reverse().map(l => {
+      const t = l.text.split("").reverse().join("");
+      return Object.assign(Object.assign({}, l), {
+        text: t
+      });
+    });
+  }
+  clipTextWithSuffix(text, options, width, suffix, wordBreak, position) {
+    let forceSuffix = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !1;
+    if ("" === suffix) return this.clipText(text, options, width, wordBreak);
+    if (0 === text.length) return {
+      str: "",
+      width: 0
+    };
+    const length = this.measureTextWidth(text, options);
+    if (!forceSuffix && length <= width) return {
+      str: text,
+      width: length
+    };
+    const suffixWidth = this.measureTextWidth(suffix, options);
+    if (suffixWidth > width) return {
+      str: "",
+      width: 0
+    };
+    if (forceSuffix && length + suffixWidth <= width) return {
+      str: text + suffix,
+      width: length + suffixWidth
+    };
+    width -= suffixWidth;
+    const data = this._clipText(text, options, width, 0, text.length - 1, position, suffix);
+    if (wordBreak && data.str !== text) {
+      const index = testLetter(text, data.str.length);
+      index !== data.str.length && (data.result = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
+    } else forceSuffix && data.str === text && (data.result = text + suffix);
+    return data.str = data.result, data.width += suffixWidth, data;
+  }
+};
+ATextMeasure = __decorate$O([injectable()], ATextMeasure);
+
+var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var d,
+    c = arguments.length,
+    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+  if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const TextMeasureContribution = Symbol.for("TextMeasureContribution");
+let DefaultTextMeasureContribution = class extends ATextMeasure {};
+DefaultTextMeasureContribution = __decorate$N([injectable()], DefaultTextMeasureContribution);
+
+const container = new Container();
+
+const CanvasFactory = Symbol.for("CanvasFactory");
+
+function wrapCanvas(params) {
+  return container.getNamed(CanvasFactory, application.global.env)(params);
+}
+
+class DefaultCanvasAllocate {
+  constructor() {
+    this.pools = [], this.allocatedCanvas = [];
+  }
+  shareCanvas() {
+    return this.allocatedCanvas.length ? this.allocatedCanvas[0] : this.getCommonCanvas();
+  }
+  getCommonCanvas() {
+    return this._commonCanvas || (this._commonCanvas = this.allocate({
+      width: 100,
+      height: 100,
+      dpr: 2
+    })), this._commonCanvas;
+  }
+  allocate(data) {
+    if (!this.pools.length) {
+      const c = wrapCanvas(Object.assign({
+        nativeCanvas: application.global.createCanvas(data)
+      }, data));
+      return this.allocatedCanvas.push(c), c;
+    }
+    const m = this.pools.pop();
+    return m.resize(data.width, data.height), m.dpr = data.dpr, m;
+  }
+  allocateByObj(canvas) {
+    if (!this.pools.length) {
+      const data = {
+          width: canvas.width / canvas.dpr,
+          height: canvas.height / canvas.dpr,
+          dpr: canvas.dpr
+        },
+        c = wrapCanvas(Object.assign({
+          nativeCanvas: application.global.createCanvas(data)
+        }, data));
+      return this.allocatedCanvas.push(c), c;
+    }
+    const m = this.pools.pop();
+    return m.width = canvas.width, m.height = canvas.height, m;
+  }
+  free(d) {
+    this.pools.push(d);
+  }
+  get length() {
+    return this.pools.length;
+  }
+  release() {
+    this.pools = [];
+  }
+}
+const canvasAllocate = new DefaultCanvasAllocate();
+
+var __decorate$M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var d,
+      c = arguments.length,
+      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  },
+  __metadata$D = undefined && undefined.__metadata || function (k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+  };
+const VWindow = Symbol.for("VWindow");
+const WindowHandlerContribution = Symbol.for("WindowHandlerContribution");
+let DefaultWindow = class {
+  get width() {
+    if (this._handler) {
+      const wh = this._handler.getWH();
+      return this._width = wh.width;
+    }
+    return this._width;
+  }
+  get height() {
+    if (this._handler) {
+      const wh = this._handler.getWH();
+      return this._height = wh.height;
+    }
+    return this._height;
+  }
+  get dpr() {
+    return this._handler.getDpr();
+  }
+  constructor() {
+    this.hooks = {
+      onChange: new SyncHook(["x", "y", "width", "height"])
+    }, this.active = () => {
+      const global = this.global;
+      if (!global.env || this.actived) return;
+      container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
+    }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
+  }
+  postInit() {
+    this.global.hooks.onSetEnv.tap("window", this.active), this.active();
+  }
+  get style() {
+    var _a;
+    return null !== (_a = this._handler.getStyle()) && void 0 !== _a ? _a : {};
+  }
+  set style(style) {
+    this._handler.setStyle(style);
+  }
+  create(params) {
+    var _a, _b;
+    this._handler.createWindow(params);
+    const windowWH = this._handler.getWH();
+    this._width = windowWH.width, this._height = windowWH.height, params.viewBox ? this.setViewBox(params.viewBox) : !1 !== params.canvasControled ? this.setViewBox({
+      x1: 0,
+      y1: 0,
+      x2: this._width,
+      y2: this._height
+    }) : this.setViewBox({
+      x1: 0,
+      y1: 0,
+      x2: null !== (_a = params.width) && void 0 !== _a ? _a : this._width,
+      y2: null !== (_b = params.height) && void 0 !== _b ? _b : this._height
+    }), this.title = this._handler.getTitle(), this.resizable = !0;
+  }
+  setWindowHandler(handler) {
+    this._handler = handler;
+  }
+  setDpr(dpr) {
+    return this._handler.setDpr(dpr);
+  }
+  resize(w, h) {
+    return this._handler.resizeWindow(w, h);
+  }
+  configure() {
+    throw new Error("暂不支持");
+  }
+  release() {
+    return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
+  }
+  getContext() {
+    return this._handler.getContext();
+  }
+  getNativeHandler() {
+    return this._handler.getNativeHandler();
+  }
+  getImageBuffer(type) {
+    return this._handler.getImageBuffer ? this._handler.getImageBuffer(type) : null;
+  }
+  addEventListener(type, listener, options) {
+    return this._handler.addEventListener(type, listener, options);
+  }
+  removeEventListener(type, listener, options) {
+    return this._handler.removeEventListener(type, listener, options);
+  }
+  dispatchEvent(event) {
+    return this._handler.dispatchEvent(event);
+  }
+  getBoundingClientRect() {
+    return this._handler.getBoundingClientRect();
+  }
+  getContainer() {
+    return this._handler.container;
+  }
+  clearViewBox(color) {
+    this._handler.clearViewBox(color);
+  }
+  setViewBox(viewBox) {
+    this._handler.setViewBox(viewBox);
+  }
+  setViewBoxTransform(a, b, c, d, e, f) {
+    this._handler.setViewBoxTransform(a, b, c, d, e, f);
+  }
+  getViewBox() {
+    return this._handler.getViewBox();
+  }
+  getViewBoxTransform() {
+    return this._handler.getViewBoxTransform();
+  }
+  pointTransform(x, y) {
+    const vb = this._handler.getViewBox(),
+      nextP = {
+        x: x,
+        y: y
+      };
+    return this._handler.getViewBoxTransform().transformPoint({
+      x: x,
+      y: y
+    }, nextP), nextP.x -= vb.x1, nextP.y -= vb.y1, nextP;
+  }
+  hasSubView() {
+    const viewBox = this._handler.getViewBox();
+    return !(0 === viewBox.x1 && 0 === viewBox.y1 && isNumberClose(this.width, viewBox.width()) && isNumberClose(this.height, viewBox.height()));
+  }
+  isVisible(bbox) {
+    return this._handler.isVisible(bbox);
+  }
+  onVisibleChange(cb) {
+    return this._handler.onVisibleChange(cb);
+  }
+  getTopLeft(baseWindow) {
+    return this._handler.getTopLeft(baseWindow);
+  }
+};
+DefaultWindow = __decorate$M([injectable(), __metadata$D("design:paramtypes", [])], DefaultWindow);
+
+var __decorate$L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var d,
+      c = arguments.length,
+      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  },
+  __metadata$C = undefined && undefined.__metadata || function (k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+  },
+  __param$y = undefined && undefined.__param || function (paramIndex, decorator) {
+    return function (target, key) {
+      decorator(target, key, paramIndex);
+    };
+  };
+let DefaultGraphicUtil = class {
+  get canvas() {
+    return this.tryInitCanvas(), this._canvas;
+  }
+  get context() {
+    return this.tryInitCanvas(), this._context;
+  }
+  constructor(contributions) {
+    this.contributions = contributions, this.configured = !1, this.global = application.global, this.global.hooks.onSetEnv.tap("graphic-util", (lastEnv, env, global) => {
+      this.configured = !1, this.configure(global, env);
+    });
+  }
+  get textMeasure() {
+    return this._textMeasure || this.configure(this.global, this.global.env), this._textMeasure;
+  }
+  configure(global, env) {
+    this.configured || (this.contributions.getContributions().forEach(contribution => {
+      contribution.configure(this, env);
+    }), this.configured = !0);
+  }
+  tryInitCanvas() {
+    if (!this._canvas) {
+      const canvas = canvasAllocate.shareCanvas();
+      this._canvas = canvas, this._context = canvas.getContext("2d");
+    }
+  }
+  bindTextMeasure(tm) {
+    this._textMeasure = tm;
+  }
+  measureText(text, tc) {
+    let method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "native";
+    var _a;
+    this.configure(this.global, this.global.env);
+    const m = this.global.measureTextMethod;
+    this.global.measureTextMethod = method;
+    const data = {
+      width: this._textMeasure.measureTextWidth(text, tc),
+      height: null !== (_a = tc.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize
+    };
+    return this.global.measureTextMethod = m, data;
+  }
+  createTextMeasureInstance(textSpec, option, getCanvasForMeasure) {
+    return this.configure(this.global, this.global.env), new TextMeasure(Object.assign({
+      defaultFontParams: {
+        fontFamily: DefaultTextStyle.fontFamily,
+        fontSize: DefaultTextStyle.fontSize
       },
       getCanvasForMeasure: getCanvasForMeasure || (() => this.canvas),
       getTextBounds: void 0,
@@ -3390,19 +3795,19 @@ class Node extends EventEmitter {
   }
   insertBefore(newNode, referenceNode) {
     if (!referenceNode) return this.appendChild(newNode);
-    if (this._uid === newNode._uid) return null;
+    if (this === newNode || newNode === referenceNode) return null;
     if (newNode.isAncestorsOf(this)) throw new Error("【Node::insertBefore】不能将父辈元素insert为子元素");
     return referenceNode.parent !== this ? null : (newNode.parent && newNode.parent.removeChild(newNode), newNode.parent = this, newNode._prev = referenceNode._prev, referenceNode._prev ? referenceNode._prev._next = newNode : this._firstChild = newNode, referenceNode._prev = newNode, newNode._next = referenceNode, this._idMap || (this._idMap = new Map()), this._idMap.set(newNode._uid, newNode), this._structEdit = !0, this.setCount(newNode.count), newNode);
   }
   insertAfter(newNode, referenceNode) {
     if (!referenceNode) return this.appendChild(newNode);
-    if (this._uid === newNode._uid) return null;
+    if (this === newNode || newNode === referenceNode) return null;
     if (newNode.isAncestorsOf(this)) throw new Error("【Node::insertAfter】不能将父辈元素insert为子元素");
     return referenceNode.parent !== this ? null : (newNode.parent && newNode.parent.removeChild(newNode), newNode.parent = this, referenceNode._next ? (referenceNode._next._prev = newNode, newNode._next = referenceNode._next) : this._lastChild = newNode, referenceNode._next = newNode, newNode._prev = referenceNode, this._idMap || (this._idMap = new Map()), this._idMap.set(newNode._uid, newNode), this._structEdit = !0, this.setCount(newNode.count), newNode);
   }
   insertInto(newNode, idx) {
     if (!this._ignoreWarn && this._nodeList && Logger.getInstance().warn("insertIntoKeepIdx和insertInto混用可能会存在错误"), idx >= this.childrenCount) return this.appendChild(newNode);
-    if (this._uid === newNode._uid) return null;
+    if (this === newNode) return null;
     if (newNode.isAncestorsOf(this)) throw new Error("【Node::insertBefore】不能将父辈元素insert为子元素");
     if (newNode.parent && newNode.parent.removeChild(newNode), newNode.parent = this, 0 === idx) newNode._next = this._firstChild, this._firstChild && (this._firstChild._prev = newNode), newNode._prev = null, this._firstChild = newNode;else {
       let child = this._firstChild;
@@ -3831,6 +4236,9 @@ class Easing {
       return (t *= 2) < 1 ? amplitude * Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * -.5 : amplitude * Math.pow(2, -10 * (t -= 1)) * Math.sin((t - s) * pi2 / period) * .5 + 1;
     };
   }
+  static registerFunc(name, func) {
+    Easing[name] = func;
+  }
 }
 Easing.quadIn = Easing.getPowIn(2), Easing.quadOut = Easing.getPowOut(2), Easing.quadInOut = Easing.getPowInOut(2), Easing.cubicIn = Easing.getPowIn(3), Easing.cubicOut = Easing.getPowOut(3), Easing.cubicInOut = Easing.getPowInOut(3), Easing.quartIn = Easing.getPowIn(4), Easing.quartOut = Easing.getPowOut(4), Easing.quartInOut = Easing.getPowInOut(4), Easing.quintIn = Easing.getPowIn(5), Easing.quintOut = Easing.getPowOut(5), Easing.quintInOut = Easing.getPowInOut(5), Easing.backIn = Easing.getBackIn(1.7), Easing.backOut = Easing.getBackOut(1.7), Easing.backInOut = Easing.getBackInOut(1.7), Easing.elasticIn = Easing.getElasticIn(1, .3), Easing.elasticOut = Easing.getElasticOut(1, .3), Easing.elasticInOut = Easing.getElasticInOut(1, .3 * 1.5), Easing.easeInOutQuad = t => (t /= .5) < 1 ? .5 * Math.pow(t, 2) : -.5 * ((t -= 2) * t - 2), Easing.easeOutElastic = x => {
   const c4 = 2 * Math.PI / 3;
@@ -4339,12 +4747,16 @@ function getAttributeFromDefaultAttrList(attr, key) {
   }
   return attr[key];
 }
-const calculateLineHeight = (lineHeight, fontSize) => {
+const _calculateLineHeight = (lineHeight, fontSize) => {
   if (isString(lineHeight) && "%" === lineHeight[lineHeight.length - 1]) {
     return fontSize * (Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100);
   }
   return lineHeight;
 };
+const calculateLineHeight = (lineHeight, fontSize) => {
+  const _lh = _calculateLineHeight(lineHeight, fontSize);
+  return isNaN(_lh) ? _lh : Math.max(fontSize, _lh);
+};
 
 class IncreaseCount extends ACustomAnimate {
   constructor(from, to, duration, easing, params) {
@@ -6186,9 +6598,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;
 }
@@ -6620,58 +7029,64 @@ class CanvasTextLayout {
   constructor(fontFamily, options, textMeasure) {
     this.fontFamily = fontFamily, this.textOptions = options, this.textMeasure = textMeasure;
   }
-  LayoutBBox(bbox, textAlign, textBaseline) {
-    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);
+  LayoutBBox(bbox, textAlign, textBaseline, linesLayout) {
+    if (bbox.xOffset = "left" === textAlign || "start" === textAlign ? 0 : "center" === textAlign ? bbox.width / -2 : "right" === textAlign || "end" === textAlign ? -bbox.width : 0, "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,
+      keepCenterInLine = !1
+    } = 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);
+        let str = lines[i].toString();
+        if (metrics.width > lineWidth) {
+          const data = this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, lineWidth, suffix, wordBreak, suffixPosition);
+          str = data.str, width = data.width;
+        } else width = metrics.width;
+        linesLayout.push({
+          str: str,
+          width: width,
+          ascent: metrics.ascent,
+          descent: metrics.descent,
+          keepCenterInLine: keepCenterInLine
+        });
+      }
       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,
+          keepCenterInLine: keepCenterInLine
+        });
+      }
+      bboxWH[0] = _lineWidth;
     }
     bboxWH[1] = linesLayout.length * lineHeight, bboxWH[0] = linesLayout.reduce((a, b) => Math.max(a, b.width), 0);
     const bbox = {
@@ -6680,7 +7095,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],
@@ -6699,11 +7114,19 @@ 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;
+    if ("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], !line.keepCenterInLine) {
+      const buf = 0,
+        actualHeightWithBuf = line.ascent + line.descent + buf;
+      if (actualHeightWithBuf < lineHeight - buf && ("bottom" === textBaseline ? line.topOffset += (lineHeight - actualHeightWithBuf) / 2 : "top" === textBaseline && (line.topOffset -= (lineHeight - actualHeightWithBuf) / 2)), "alphabetic" === textBaseline) {
+        const ratio = lineHeight / (line.ascent + line.descent);
+        line.topOffset = lineHeight / 2 + (line.ascent - line.descent) / 2 * ratio + origin[1];
+      }
+    }
+    return 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();
@@ -6712,26 +7135,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 => {
@@ -6742,10 +7161,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;
@@ -6818,114 +7234,14 @@ 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;
   }
-  updateWrapAABBBounds(text) {
-    var _a, _b, _c, _d;
-    const textTheme = this.getGraphicTheme(),
-      {
-        fontFamily = textTheme.fontFamily,
-        textAlign = textTheme.textAlign,
-        textBaseline = textTheme.textBaseline,
-        fontSize = textTheme.fontSize,
-        ellipsis = textTheme.ellipsis,
-        maxLineWidth: maxLineWidth,
-        stroke = textTheme.stroke,
-        lineWidth = textTheme.lineWidth,
-        wordBreak = textTheme.wordBreak,
-        fontWeight = textTheme.fontWeight,
-        ignoreBuf = textTheme.ignoreBuf,
-        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)) {
-      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, {
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        fontFamily: fontFamily
-      }, textMeasure),
-      lines = isArray(text) ? text.map(l => l.toString()) : [text.toString()],
-      linesLayout = [],
-      bboxWH = [0, 0];
-    let lineCountLimit = 1 / 0;
-    if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
-      if (maxLineWidth > 0) for (let i = 0; i < lines.length; i++) {
-        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);
-          linesLayout.push({
-            str: clip.str,
-            width: clip.width
-          });
-          break;
-        }
-        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
-        if ("" !== str && "" === clip.str || clip.wordBreaked) {
-          if (ellipsis) {
-            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-            clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
-          } else clip.str = "", clip.width = 0;
-          needCut = !1;
-        }
-        linesLayout.push({
-          str: clip.str,
-          width: clip.width
-        });
-        let cutLength = clip.str.length;
-        if (!clip.wordBreaked || "" !== str && "" === clip.str || (needCut = !0, cutLength = clip.wordBreaked), clip.str.length === str.length) ;else if (needCut) {
-          let newStr = str.substring(cutLength);
-          "keep-all" === wordBreak && (newStr = newStr.replace(/^\s+/g, "")), lines.splice(i + 1, 0, newStr);
-        }
-      }
-      let maxWidth = 0;
-      linesLayout.forEach(layout => {
-        maxWidth = Math.max(maxWidth, layout.width);
-      }), bboxWH[0] = maxWidth;
-    } else {
-      let width,
-        text,
-        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);
-          linesLayout.push({
-            str: clip.str,
-            width: clip.width
-          }), lineWidth = Math.max(lineWidth, clip.width);
-          break;
-        }
-        text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
-          str: text,
-          width: width
-        });
-      }
-      bboxWH[0] = lineWidth;
-    }
-    bboxWH[1] = linesLayout.length * (lineHeight + buf);
-    const bbox = {
-      xOffset: 0,
-      yOffset: 0,
-      width: bboxWH[0],
-      height: bboxWH[1]
-    };
-    layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
-    const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
-    return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-  }
   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;
+    this.updateMultilineAABBBounds([text]);
+    const layoutData = this.cache.layoutData;
+    if (layoutData && layoutData.lines && layoutData.lines.length) {
+      const line = layoutData.lines[0];
+      this.cache.clipedText = line.str, this.cache.clipedWidth = line.width;
+    }
+    return this._AABBBounds;
   }
   updateMultilineAABBBounds(text) {
     const textTheme = this.getGraphicTheme(),
@@ -6936,152 +7252,13 @@ class Text extends Graphic {
       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;
-  }
+  guessLineHeightBuf(fontSize) {
+    return fontSize ? .1 * fontSize : 0;
+  }
   updateHorizontalMultilineAABBBounds(text) {
-    var _a, _b;
+    var _a;
     const textTheme = this.getGraphicTheme(),
-      {
-        wrap = textTheme.wrap
-      } = this.attribute;
-    if (wrap) return this.updateWrapAABBBounds(text);
-    const attribute = this.attribute,
+      attribute = this.attribute,
       {
         fontFamily = textTheme.fontFamily,
         textAlign = textTheme.textAlign,
@@ -7091,13 +7268,18 @@ class Text extends Graphic {
         ellipsis = textTheme.ellipsis,
         maxLineWidth: maxLineWidth,
         stroke = textTheme.stroke,
+        wrap = textTheme.wrap,
+        measureMode = textTheme.measureMode,
         lineWidth = textTheme.lineWidth,
         whiteSpace = textTheme.whiteSpace,
-        suffixPosition = textTheme.suffixPosition
+        suffixPosition = textTheme.suffixPosition,
+        ignoreBuf = textTheme.ignoreBuf,
+        keepCenterInLine = textTheme.keepCenterInLine
       } = 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)) {
+      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;
     }
@@ -7105,23 +7287,146 @@ class Text extends Graphic {
       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),
+        fontFamily: fontFamily,
+        lineHeight: lineHeight
+      }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, {
+        lineWidth: maxLineWidth,
+        suffixPosition: suffixPosition,
+        measureMode: measureMode,
+        keepCenterInLine: keepCenterInLine
+      }),
       {
         bbox: bbox
       } = layoutData;
     return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
   }
-  updateVerticalMultilineAABBBounds(text) {
+  updateWrapAABBBounds(text) {
     var _a, _b, _c;
+    const textTheme = this.getGraphicTheme(),
+      {
+        fontFamily = textTheme.fontFamily,
+        textAlign = textTheme.textAlign,
+        textBaseline = textTheme.textBaseline,
+        fontSize = textTheme.fontSize,
+        ellipsis = textTheme.ellipsis,
+        maxLineWidth: maxLineWidth,
+        stroke = textTheme.stroke,
+        lineWidth = textTheme.lineWidth,
+        wordBreak = textTheme.wordBreak,
+        fontWeight = textTheme.fontWeight,
+        ignoreBuf = textTheme.ignoreBuf,
+        measureMode = textTheme.measureMode,
+        suffixPosition = textTheme.suffixPosition,
+        heightLimit = 0,
+        lineClamp: lineClamp,
+        keepCenterInLine = textTheme.keepCenterInLine
+      } = this.attribute,
+      buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize),
+      lineHeight = this.getLineHeight(this.attribute, textTheme, buf);
+    if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+      const bbox = this.cache.layoutData.bbox;
+      return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    const textMeasure = application.graphicUtil.textMeasure,
+      textOptions = {
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        fontFamily: fontFamily,
+        lineHeight: lineHeight
+      },
+      layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure),
+      lines = isArray(text) ? text.map(l => l.toString()) : [text.toString()],
+      linesLayout = [],
+      bboxWH = [0, 0];
+    let lineCountLimit = 1 / 0;
+    if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
+      if (maxLineWidth > 0) for (let i = 0; i < lines.length; i++) {
+        const str = lines[i];
+        let needCut = !0;
+        if (i === lineCountLimit - 1) {
+          const clip = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1),
+            matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
+          linesLayout.push({
+            str: clip.str,
+            width: clip.width,
+            ascent: matrics.ascent,
+            descent: matrics.descent,
+            keepCenterInLine: keepCenterInLine
+          });
+          break;
+        }
+        const clip = textMeasure.clipText(str, textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
+        if ("" !== str && "" === clip.str || clip.wordBreaked) {
+          if (ellipsis) {
+            const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+            clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+          } else clip.str = "", clip.width = 0;
+          needCut = !1;
+        }
+        const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
+        linesLayout.push({
+          str: clip.str,
+          width: clip.width,
+          ascent: matrics.ascent,
+          descent: matrics.descent,
+          keepCenterInLine: keepCenterInLine
+        });
+        let cutLength = clip.str.length;
+        if (!clip.wordBreaked || "" !== str && "" === clip.str || (needCut = !0, cutLength = clip.wordBreaked), clip.str.length === str.length) ;else if (needCut) {
+          let newStr = str.substring(cutLength);
+          "keep-all" === wordBreak && (newStr = newStr.replace(/^\s+/g, "")), lines.splice(i + 1, 0, newStr);
+        }
+      }
+      let maxWidth = 0;
+      linesLayout.forEach(layout => {
+        maxWidth = Math.max(maxWidth, layout.width);
+      }), bboxWH[0] = maxWidth;
+    } else {
+      let width,
+        text,
+        lineWidth = 0;
+      for (let i = 0, len = lines.length; i < len; i++) {
+        if (i === lineCountLimit - 1) {
+          const clip = textMeasure.clipTextWithSuffix(lines[i], textOptions, maxLineWidth, ellipsis, !1, suffixPosition),
+            matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
+          linesLayout.push({
+            str: clip.str,
+            width: clip.width,
+            ascent: matrics.ascent,
+            descent: matrics.descent,
+            keepCenterInLine: keepCenterInLine
+          }), lineWidth = Math.max(lineWidth, clip.width);
+          break;
+        }
+        text = lines[i], width = textMeasure.measureTextWidth(text, textOptions), lineWidth = Math.max(lineWidth, width);
+        const matrics = textMeasure.measureTextPixelADscentAndWidth(text, textOptions, measureMode);
+        linesLayout.push({
+          str: text,
+          width: width,
+          ascent: matrics.ascent,
+          descent: matrics.descent,
+          keepCenterInLine: keepCenterInLine
+        });
+      }
+      bboxWH[0] = lineWidth;
+    }
+    bboxWH[1] = linesLayout.length * lineHeight;
+    const bbox = {
+      xOffset: 0,
+      yOffset: 0,
+      width: bboxWH[0],
+      height: bboxWH[1]
+    };
+    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;
+  }
+  updateVerticalMultilineAABBBounds(text) {
+    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,
@@ -7133,14 +7438,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, 0);
     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 => {
@@ -7188,6 +7493,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, buf) {
+    var _a;
+    return null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+  }
   needUpdateTags(keys) {
     let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
     return super.needUpdateTags(keys, k);
@@ -7202,6 +7516,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,
@@ -7280,7 +7600,10 @@ 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,
+            keepCenterInLine: !1
           });
           break;
         }
@@ -7294,7 +7617,10 @@ class WrapText extends Text {
         }
         if (linesLayout.push({
           str: clip.str,
-          width: clip.width
+          width: clip.width,
+          ascent: 0,
+          descent: 0,
+          keepCenterInLine: !1
         }), clip.str.length === str.length) ;else if (needCut) {
           const newStr = str.substring(clip.str.length);
           lines.splice(i + 1, 0, newStr);
@@ -7313,13 +7639,19 @@ 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,
+            keepCenterInLine: !1
           }), 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,
+          keepCenterInLine: !1
         });
       }
       bboxWH[0] = lineWidth;
@@ -8350,7 +8682,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 && ctx.strokeText(text, left, baseline), 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;
@@ -8573,12 +8909,18 @@ class Line {
         paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
       }
     }
-    this.paragraphs.map((paragraph, index) => {
+    this.paragraphs.forEach((paragraph, index) => {
       if (paragraph instanceof RichTextIcon) return paragraph.setAttributes({
         x: x + paragraph._x,
         y: y + paragraph._y
       }), void drawIcon(paragraph, ctx, x + paragraph._x, y + paragraph._y, this.ascent);
-      paragraph.draw(ctx, y + this.ascent, x, 0 === index, this.textAlign);
+      const b = {
+        x1: this.left,
+        y1: this.top,
+        x2: this.left + this.actualWidth,
+        y2: this.top + this.height
+      };
+      applyStrokeStyle(ctx, paragraph.character), applyFillStyle(ctx, paragraph.character, b), paragraph.draw(ctx, y + this.ascent, x, 0 === index, this.textAlign);
     });
   }
   getWidthWithEllips(ellipsis) {
@@ -8601,7 +8943,7 @@ class Line {
       paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
     }
     let width = 0;
-    return this.paragraphs.map((paragraph, index) => {
+    return this.paragraphs.forEach((paragraph, index) => {
       width += paragraph instanceof RichTextIcon ? paragraph.width : paragraph.getWidthWithEllips(this.direction);
     }), width;
   }
@@ -9182,663 +9524,377 @@ class Arc extends Graphic {
         padAngle = arcTheme.padAngle
       } = this.attribute;
     let {
-      outerRadius = arcTheme.outerRadius,
-      innerRadius = arcTheme.innerRadius
-    } = this.attribute;
-    outerRadius += outerPadding, innerRadius -= innerPadding;
-    const {
-        padRadius = sqrt(outerRadius * outerRadius + innerRadius * innerRadius)
-      } = this.attribute,
-      deltaAngle = abs(endAngle - startAngle);
-    let outerStartAngle = startAngle,
-      outerEndAngle = endAngle,
-      innerStartAngle = startAngle,
-      innerEndAngle = endAngle;
-    const halfPadAngle = padAngle / 2;
-    let innerDeltaAngle = deltaAngle,
-      outerDeltaAngle = deltaAngle;
-    if (halfPadAngle > epsilon && padRadius > epsilon) {
-      const sign = endAngle > startAngle ? 1 : -1;
-      let p0 = asin(Number(padRadius) / innerRadius * sin(halfPadAngle)),
-        p1 = asin(Number(padRadius) / outerRadius * sin(halfPadAngle));
-      return (innerDeltaAngle -= 2 * p0) > epsilon ? (p0 *= sign, innerStartAngle += p0, innerEndAngle -= p0) : (innerDeltaAngle = 0, innerStartAngle = innerEndAngle = (startAngle + endAngle) / 2), (outerDeltaAngle -= 2 * p1) > epsilon ? (p1 *= sign, outerStartAngle += p1, outerEndAngle -= p1) : (outerDeltaAngle = 0, outerStartAngle = outerEndAngle = (startAngle + endAngle) / 2), {
-        outerStartAngle: outerStartAngle,
-        outerEndAngle: outerEndAngle,
-        innerStartAngle: innerStartAngle,
-        innerEndAngle: innerEndAngle,
-        innerDeltaAngle: innerDeltaAngle,
-        outerDeltaAngle: outerDeltaAngle
-      };
-    }
-    return {
-      outerStartAngle: outerStartAngle,
-      outerEndAngle: outerEndAngle,
-      innerStartAngle: innerStartAngle,
-      innerEndAngle: innerEndAngle,
-      innerDeltaAngle: innerDeltaAngle,
-      outerDeltaAngle: outerDeltaAngle
-    };
-  }
-  getGraphicTheme() {
-    return getTheme(this).arc;
-  }
-  updateAABBBounds(attribute, arcTheme, aabbBounds, full) {
-    this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds) : this.updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds));
-    const {
-      tb1: tb1,
-      tb2: tb2
-    } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    updateBoundsOfCommonOuterBorder(attribute, arcTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
-    const {
-      lineJoin = arcTheme.lineJoin
-    } = attribute;
-    return application.graphicService.transformAABBBounds(attribute, aabbBounds, arcTheme, "miter" === lineJoin, this), aabbBounds;
-  }
-  updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds) {
-    let {
-      outerRadius = arcTheme.outerRadius,
-      innerRadius = arcTheme.innerRadius
-    } = attribute;
-    const {
-      outerPadding = arcTheme.outerPadding,
-      innerPadding = arcTheme.innerPadding
-    } = attribute;
-    return outerRadius += outerPadding, innerRadius -= innerPadding, outerRadius < innerRadius && (outerRadius = innerRadius), aabbBounds.set(-outerRadius, -outerRadius, outerRadius, outerRadius), aabbBounds;
-  }
-  updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds) {
-    let {
-      outerRadius = arcTheme.outerRadius,
-      innerRadius = arcTheme.innerRadius
-    } = attribute;
-    const {
-      outerPadding = arcTheme.outerPadding,
-      innerPadding = arcTheme.innerPadding
-    } = attribute;
-    if (outerRadius += outerPadding, innerRadius -= innerPadding, outerRadius < innerRadius) {
-      const temp = outerRadius;
-      outerRadius = innerRadius, innerRadius = temp;
-    }
-    let {
-      endAngle = arcTheme.endAngle,
-      startAngle = arcTheme.startAngle
-    } = attribute;
-    if (startAngle > endAngle) {
-      const temp = startAngle;
-      startAngle = endAngle, endAngle = temp;
-    }
-    return outerRadius <= epsilon ? aabbBounds.set(0, 0, 0, 0) : Math.abs(endAngle - startAngle) > pi2 - epsilon ? aabbBounds.set(-outerRadius, -outerRadius, outerRadius, outerRadius) : (circleBounds(startAngle, endAngle, outerRadius, aabbBounds), circleBounds(startAngle, endAngle, innerRadius, aabbBounds)), aabbBounds;
-  }
-  needUpdateTags(keys) {
-    return super.needUpdateTags(keys, ARC_UPDATE_TAG_KEY);
-  }
-  needUpdateTag(key) {
-    return super.needUpdateTag(key, ARC_UPDATE_TAG_KEY);
-  }
-  toCustomPath() {
-    var _a, _b, _c, _d;
-    const attribute = this.attribute,
-      {
-        startAngle: startAngle,
-        endAngle: endAngle
-      } = this.getParsedAngle();
-    let innerRadius = (null !== (_a = attribute.innerRadius) && void 0 !== _a ? _a : 0) - (null !== (_b = attribute.innerPadding) && void 0 !== _b ? _b : 0),
-      outerRadius = (null !== (_c = attribute.outerRadius) && void 0 !== _c ? _c : 0) - (null !== (_d = attribute.outerPadding) && void 0 !== _d ? _d : 0);
-    const deltaAngle = abs(endAngle - startAngle),
-      clockwise = endAngle > startAngle;
-    if (outerRadius < innerRadius) {
-      const temp = outerRadius;
-      outerRadius = innerRadius, innerRadius = temp;
-    }
-    const path = new CustomPath2D();
-    if (outerRadius <= epsilon) path.moveTo(0, 0);else if (deltaAngle >= pi2 - epsilon) path.moveTo(0 + outerRadius * cos(startAngle), 0 + outerRadius * sin(startAngle)), path.arc(0, 0, outerRadius, startAngle, endAngle, !clockwise), innerRadius > epsilon && (path.moveTo(0 + innerRadius * cos(endAngle), 0 + innerRadius * sin(endAngle)), path.arc(0, 0, innerRadius, endAngle, startAngle, clockwise));else {
-      const xors = outerRadius * cos(startAngle),
-        yors = outerRadius * sin(startAngle),
-        xire = innerRadius * cos(endAngle),
-        yire = innerRadius * sin(endAngle);
-      path.moveTo(0 + xors, 0 + yors), path.arc(0, 0, outerRadius, startAngle, endAngle, !clockwise), path.lineTo(0 + xire, 0 + yire), path.arc(0, 0, innerRadius, endAngle, startAngle, clockwise), path.closePath();
-    }
-    return path;
-  }
-  clone() {
-    return new Arc(Object.assign({}, this.attribute));
-  }
-  getNoWorkAnimateAttr() {
-    return Arc.NOWORK_ANIMATE_ATTR;
-  }
-}
-Arc.NOWORK_ANIMATE_ATTR = Object.assign({
-  cap: 1
-}, NOWORK_ANIMATE_ATTR);
-function createArc(attributes) {
-  return new Arc(attributes);
-}
-
-const POLYGON_UPDATE_TAG_KEY = ["points", "cornerRadius", ...GRAPHIC_UPDATE_TAG_KEY];
-class Polygon extends Graphic {
-  constructor(params) {
-    super(params), this.type = "polygon", this.numberType = POLYGON_NUMBER_TYPE;
-  }
-  isValid() {
-    return super.isValid() && this._isValid();
-  }
-  _isValid() {
-    const {
-      points: points
+      outerRadius = arcTheme.outerRadius,
+      innerRadius = arcTheme.innerRadius
     } = this.attribute;
-    return points && points.length >= 2;
+    outerRadius += outerPadding, innerRadius -= innerPadding;
+    const {
+        padRadius = sqrt(outerRadius * outerRadius + innerRadius * innerRadius)
+      } = this.attribute,
+      deltaAngle = abs(endAngle - startAngle);
+    let outerStartAngle = startAngle,
+      outerEndAngle = endAngle,
+      innerStartAngle = startAngle,
+      innerEndAngle = endAngle;
+    const halfPadAngle = padAngle / 2;
+    let innerDeltaAngle = deltaAngle,
+      outerDeltaAngle = deltaAngle;
+    if (halfPadAngle > epsilon && padRadius > epsilon) {
+      const sign = endAngle > startAngle ? 1 : -1;
+      let p0 = asin(Number(padRadius) / innerRadius * sin(halfPadAngle)),
+        p1 = asin(Number(padRadius) / outerRadius * sin(halfPadAngle));
+      return (innerDeltaAngle -= 2 * p0) > epsilon ? (p0 *= sign, innerStartAngle += p0, innerEndAngle -= p0) : (innerDeltaAngle = 0, innerStartAngle = innerEndAngle = (startAngle + endAngle) / 2), (outerDeltaAngle -= 2 * p1) > epsilon ? (p1 *= sign, outerStartAngle += p1, outerEndAngle -= p1) : (outerDeltaAngle = 0, outerStartAngle = outerEndAngle = (startAngle + endAngle) / 2), {
+        outerStartAngle: outerStartAngle,
+        outerEndAngle: outerEndAngle,
+        innerStartAngle: innerStartAngle,
+        innerEndAngle: innerEndAngle,
+        innerDeltaAngle: innerDeltaAngle,
+        outerDeltaAngle: outerDeltaAngle
+      };
+    }
+    return {
+      outerStartAngle: outerStartAngle,
+      outerEndAngle: outerEndAngle,
+      innerStartAngle: innerStartAngle,
+      innerEndAngle: innerEndAngle,
+      innerDeltaAngle: innerDeltaAngle,
+      outerDeltaAngle: outerDeltaAngle
+    };
   }
   getGraphicTheme() {
-    return getTheme(this).polygon;
+    return getTheme(this).arc;
   }
-  updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-    this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
+  updateAABBBounds(attribute, arcTheme, aabbBounds, full) {
+    this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds) : this.updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds));
     const {
-      lineJoin = polygonTheme.lineJoin
-    } = attribute;
-    return application.graphicService.transformAABBBounds(attribute, aabbBounds, polygonTheme, "miter" === lineJoin, this), aabbBounds;
-  }
-  updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds) {
+      tb1: tb1,
+      tb2: tb2
+    } = application.graphicService.updateTempAABBBounds(aabbBounds);
+    updateBoundsOfCommonOuterBorder(attribute, arcTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
     const {
-      points = polygonTheme.points
+      lineJoin = arcTheme.lineJoin
     } = attribute;
-    return points.forEach(p => {
-      aabbBounds.add(p.x, p.y);
-    }), aabbBounds;
-  }
-  _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {
-    "points" === key && (nextAttributes.points = pointsInterpolation(lastStepVal, nextStepVal, ratio));
-  }
-  needUpdateTags(keys) {
-    return super.needUpdateTags(keys, POLYGON_UPDATE_TAG_KEY);
-  }
-  needUpdateTag(key) {
-    return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
-  }
-  toCustomPath() {
-    const points = this.attribute.points,
-      path = new CustomPath2D();
-    return points.forEach((point, index) => {
-      0 === index ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y);
-    }), path.closePath(), path;
-  }
-  clone() {
-    return new Polygon(Object.assign({}, this.attribute));
-  }
-  getNoWorkAnimateAttr() {
-    return Polygon.NOWORK_ANIMATE_ATTR;
-  }
-}
-Polygon.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
-function createPolygon(attributes) {
-  return new Polygon(attributes);
-}
-
-class GraphicCreator {
-  constructor() {
-    this.store = new Map();
-  }
-  RegisterGraphicCreator(name, cb) {
-    this.store.set(name, cb), this[name] = cb;
-  }
-  CreateGraphic(name, params) {
-    const cb = this.store.get(name);
-    return cb ? cb(params) : null;
-  }
-}
-const graphicCreator = new GraphicCreator();
-
-let text;
-function getTextBounds(params) {
-  return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
-}
-
-const result = {
-  x: 0,
-  y: 0,
-  z: 0,
-  lastModelMatrix: null
-};
-class BaseRender {
-  init(contributions) {
-    contributions && (this._renderContribitions = contributions.getContributions()), this._renderContribitions || (this._renderContribitions = []), this.builtinContributions && this.builtinContributions.forEach(item => this._renderContribitions.push(item)), this._renderContribitions.length && (this._renderContribitions.sort((a, b) => b.order - a.order), this._beforeRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke));
-  }
-  beforeRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
-    this._beforeRenderContribitions && this._beforeRenderContribitions.forEach(c => {
-      if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
-        if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
-      }
-      c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
-    });
-  }
-  afterRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
-    this._afterRenderContribitions && this._afterRenderContribitions.forEach(c => {
-      if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
-        if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
-      }
-      c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
-    });
-  }
-  drawPathProxy(graphic, context, x, y, drawContext, params, fillCb, strokeCb) {
-    if (!graphic.pathProxy) return !1;
-    const themeAttributes = getTheme(graphic, null == params ? void 0 : params.theme)[graphic.type.replace("3d", "")],
-      {
-        fill = themeAttributes.fill,
-        stroke = themeAttributes.stroke,
-        opacity = themeAttributes.opacity,
-        fillOpacity = themeAttributes.fillOpacity,
-        lineWidth = themeAttributes.lineWidth,
-        strokeOpacity = themeAttributes.strokeOpacity,
-        visible = themeAttributes.visible,
-        x: originX = themeAttributes.x,
-        y: originY = themeAttributes.y
-      } = graphic.attribute,
-      fVisible = fillVisible(opacity, fillOpacity, fill),
-      sVisible = strokeVisible(opacity, strokeOpacity),
-      doFill = runFill(fill),
-      doStroke = runStroke(stroke, lineWidth);
-    if (!visible) return !0;
-    if (!doFill && !doStroke) return !0;
-    if (!(fVisible || sVisible || fillCb || strokeCb)) return !0;
-    context.beginPath();
-    const path = "function" == typeof graphic.pathProxy ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
-    return renderCommandList(path.commandList, context, x, y), context.setShadowBlendStyle && context.setShadowBlendStyle(graphic, graphic.attribute, themeAttributes), this.beforeRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, themeAttributes, drawContext, fillCb, strokeCb), doStroke && (strokeCb ? strokeCb(context, graphic.attribute, themeAttributes) : sVisible && (context.setStrokeStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.stroke())), doFill && (fillCb ? fillCb(context, graphic.attribute, themeAttributes) : fVisible && (context.setCommonStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.fill())), this.afterRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, themeAttributes, drawContext, fillCb, strokeCb), !0;
+    return application.graphicService.transformAABBBounds(attribute, aabbBounds, arcTheme, "miter" === lineJoin, this), aabbBounds;
   }
-  valid(graphic, defaultAttribute, fillCb, strokeCb) {
+  updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds) {
+    let {
+      outerRadius = arcTheme.outerRadius,
+      innerRadius = arcTheme.innerRadius
+    } = attribute;
     const {
-        fill = defaultAttribute.fill,
-        background: background,
-        stroke = defaultAttribute.stroke,
-        opacity = defaultAttribute.opacity,
-        fillOpacity = defaultAttribute.fillOpacity,
-        lineWidth = defaultAttribute.lineWidth,
-        strokeOpacity = defaultAttribute.strokeOpacity,
-        visible = defaultAttribute.visible
-      } = graphic.attribute,
-      fVisible = fillVisible(opacity, fillOpacity, fill),
-      sVisible = strokeVisible(opacity, strokeOpacity),
-      doFill = runFill(fill, background),
-      doStroke = runStroke(stroke, lineWidth);
-    return !(!graphic.valid || !visible) && !(!doFill && !doStroke) && !!(fVisible || sVisible || fillCb || strokeCb || background) && {
-      fVisible: fVisible,
-      sVisible: sVisible,
-      doFill: doFill,
-      doStroke: doStroke
-    };
+      outerPadding = arcTheme.outerPadding,
+      innerPadding = arcTheme.innerPadding
+    } = attribute;
+    return outerRadius += outerPadding, innerRadius -= innerPadding, outerRadius < innerRadius && (outerRadius = innerRadius), aabbBounds.set(-outerRadius, -outerRadius, outerRadius, outerRadius), aabbBounds;
   }
-  transform(graphic, graphicAttribute, context) {
-    let use3dMatrixIn3dMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+  updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds) {
+    let {
+      outerRadius = arcTheme.outerRadius,
+      innerRadius = arcTheme.innerRadius
+    } = attribute;
     const {
-        x = graphicAttribute.x,
-        y = graphicAttribute.y,
-        z = graphicAttribute.z,
-        scaleX = graphicAttribute.scaleX,
-        scaleY = graphicAttribute.scaleY,
-        angle = graphicAttribute.angle,
-        postMatrix: postMatrix
-      } = graphic.attribute,
-      lastModelMatrix = context.modelMatrix,
-      camera = context.camera;
-    result.x = x, result.y = y, result.z = z, result.lastModelMatrix = lastModelMatrix;
-    const shouldTransform3d = camera && (use3dMatrixIn3dMode || shouldUseMat4(graphic)),
-      onlyTranslate = shouldTransform3d ? graphic.transMatrix.onlyTranslate() && !postMatrix : 1 === scaleX && 1 === scaleY && 0 === angle && !postMatrix;
-    if (shouldTransform3d) {
-      const nextModelMatrix = mat4Allocate.allocate(),
-        modelMatrix = mat4Allocate.allocate();
-      getModelMatrix(modelMatrix, graphic, graphicAttribute), multiplyMat4Mat4(nextModelMatrix, lastModelMatrix || nextModelMatrix, modelMatrix), result.x = 0, result.y = 0, result.z = 0, context.modelMatrix = nextModelMatrix, context.setTransform(1, 0, 0, 1, 0, 0, !0), mat4Allocate.free(modelMatrix);
+      outerPadding = arcTheme.outerPadding,
+      innerPadding = arcTheme.innerPadding
+    } = attribute;
+    if (outerRadius += outerPadding, innerRadius -= innerPadding, outerRadius < innerRadius) {
+      const temp = outerRadius;
+      outerRadius = innerRadius, innerRadius = temp;
     }
-    if (onlyTranslate && !lastModelMatrix) {
-      const point = graphic.getOffsetXY(graphicAttribute);
-      result.x += point.x, result.y += point.y, result.z = z, context.setTransformForCurrent();
-    } else if (shouldTransform3d) result.x = 0, result.y = 0, result.z = 0, context.setTransform(1, 0, 0, 1, 0, 0, !0);else if (camera && context.project) {
-      const point = graphic.getOffsetXY(graphicAttribute);
-      result.x += point.x, result.y += point.y, this.transformWithoutTranslate(context, result.x, result.y, result.z, scaleX, scaleY, angle);
-    } else context.transformFromMatrix(graphic.transMatrix, !0), result.x = 0, result.y = 0, result.z = 0;
-    return result;
-  }
-  transformUseContext2d(graphic, graphicAttribute, z, context) {
-    const camera = context.camera;
-    if (this.camera = camera, camera) {
-      const bounds = graphic.AABBBounds,
-        width = bounds.x2 - bounds.x1,
-        height = bounds.y2 - bounds.y1,
-        p1 = context.project(0, 0, z),
-        p2 = context.project(width, 0, z),
-        p3 = context.project(width, height, z),
-        _p1 = {
-          x: 0,
-          y: 0
-        },
-        _p2 = {
-          x: width,
-          y: 0
-        },
-        _p3 = {
-          x: width,
-          y: height
-        };
-      context.camera = null;
-      const denom = 1 / (_p1.x * (_p3.y - _p2.y) - _p2.x * _p3.y + _p3.x * _p2.y + (_p2.x - _p3.x) * _p1.y),
-        m11 = -(_p1.y * (p3.x - p2.x) - _p2.y * p3.x + _p3.y * p2.x + (_p2.y - _p3.y) * p1.x) * denom,
-        m12 = (_p2.y * p3.y + _p1.y * (p2.y - p3.y) - _p3.y * p2.y + (_p3.y - _p2.y) * p1.y) * denom,
-        m21 = (_p1.x * (p3.x - p2.x) - _p2.x * p3.x + _p3.x * p2.x + (_p2.x - _p3.x) * p1.x) * denom,
-        m22 = -(_p2.x * p3.y + _p1.x * (p2.y - p3.y) - _p3.x * p2.y + (_p3.x - _p2.x) * p1.y) * denom,
-        dx = (_p1.x * (_p3.y * p2.x - _p2.y * p3.x) + _p1.y * (_p2.x * p3.x - _p3.x * p2.x) + (_p3.x * _p2.y - _p2.x * _p3.y) * p1.x) * denom,
-        dy = (_p1.x * (_p3.y * p2.y - _p2.y * p3.y) + _p1.y * (_p2.x * p3.y - _p3.x * p2.y) + (_p3.x * _p2.y - _p2.x * _p3.y) * p1.y) * denom;
-      context.setTransform(m11, m12, m21, m22, dx, dy, !0);
+    let {
+      endAngle = arcTheme.endAngle,
+      startAngle = arcTheme.startAngle
+    } = attribute;
+    if (startAngle > endAngle) {
+      const temp = startAngle;
+      startAngle = endAngle, endAngle = temp;
     }
+    return outerRadius <= epsilon ? aabbBounds.set(0, 0, 0, 0) : Math.abs(endAngle - startAngle) > pi2 - epsilon ? aabbBounds.set(-outerRadius, -outerRadius, outerRadius, outerRadius) : (circleBounds(startAngle, endAngle, outerRadius, aabbBounds), circleBounds(startAngle, endAngle, innerRadius, aabbBounds)), aabbBounds;
   }
-  restoreTransformUseContext2d(graphic, graphicAttribute, z, context) {
-    this.camera && (context.camera = this.camera);
+  needUpdateTags(keys) {
+    return super.needUpdateTags(keys, ARC_UPDATE_TAG_KEY);
   }
-  transformWithoutTranslate(context, x, y, z, scaleX, scaleY, angle) {
-    const p = context.project(x, y, z);
-    context.translate(p.x, p.y, !1), context.scale(scaleX, scaleY, !1), context.rotate(angle, !1), context.translate(-p.x, -p.y, !1), context.setTransformForCurrent();
+  needUpdateTag(key) {
+    return super.needUpdateTag(key, ARC_UPDATE_TAG_KEY);
   }
-  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
-    const {
-      context: context
-    } = drawContext;
-    if (!context) return;
-    const {
-      renderable: renderable
-    } = graphic.attribute;
-    if (!1 === renderable) return;
-    context.highPerformanceSave();
-    const data = this.transform(graphic, defaultAttr, context, computed3dMatrix),
+  toCustomPath() {
+    var _a, _b, _c, _d;
+    const attribute = this.attribute,
       {
-        x: x,
-        y: y,
-        z: z,
-        lastModelMatrix: lastModelMatrix
-      } = data;
-    this.z = z, this.drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
-  }
-}
-
-const parse = function () {
-  const tokens = {
-    linearGradient: /^(linear\-gradient)/i,
-    radialGradient: /^(radial\-gradient)/i,
-    conicGradient: /^(conic\-gradient)/i,
-    sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
-    extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
-    positionKeywords: /^(left|center|right|top|bottom)/i,
-    pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
-    percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
-    emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
-    angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
-    fromAngleValue: /^from\s*(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
-    startCall: /^\(/,
-    endCall: /^\)/,
-    comma: /^,/,
-    hexColor: /(^\#[0-9a-fA-F]+)/,
-    literalColor: /^([a-zA-Z]+)/,
-    rgbColor: /^(rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))/i,
-    rgbaColor: /^(rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*((\d\.\d+)|\d{1,3})\))/i,
-    number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
-  };
-  let input = "";
-  function error(msg) {
-    const err = new Error(input + ": " + msg);
-    throw err.source = input, err;
+        startAngle: startAngle,
+        endAngle: endAngle
+      } = this.getParsedAngle();
+    let innerRadius = (null !== (_a = attribute.innerRadius) && void 0 !== _a ? _a : 0) - (null !== (_b = attribute.innerPadding) && void 0 !== _b ? _b : 0),
+      outerRadius = (null !== (_c = attribute.outerRadius) && void 0 !== _c ? _c : 0) - (null !== (_d = attribute.outerPadding) && void 0 !== _d ? _d : 0);
+    const deltaAngle = abs(endAngle - startAngle),
+      clockwise = endAngle > startAngle;
+    if (outerRadius < innerRadius) {
+      const temp = outerRadius;
+      outerRadius = innerRadius, innerRadius = temp;
+    }
+    const path = new CustomPath2D();
+    if (outerRadius <= epsilon) path.moveTo(0, 0);else if (deltaAngle >= pi2 - epsilon) path.moveTo(0 + outerRadius * cos(startAngle), 0 + outerRadius * sin(startAngle)), path.arc(0, 0, outerRadius, startAngle, endAngle, !clockwise), innerRadius > epsilon && (path.moveTo(0 + innerRadius * cos(endAngle), 0 + innerRadius * sin(endAngle)), path.arc(0, 0, innerRadius, endAngle, startAngle, clockwise));else {
+      const xors = outerRadius * cos(startAngle),
+        yors = outerRadius * sin(startAngle),
+        xire = innerRadius * cos(endAngle),
+        yire = innerRadius * sin(endAngle);
+      path.moveTo(0 + xors, 0 + yors), path.arc(0, 0, outerRadius, startAngle, endAngle, !clockwise), path.lineTo(0 + xire, 0 + yire), path.arc(0, 0, innerRadius, endAngle, startAngle, clockwise), path.closePath();
+    }
+    return path;
   }
-  function getAST() {
-    const ast = matchListing(matchDefinition);
-    return input.length > 0 && error("Invalid input not EOF"), ast;
+  clone() {
+    return new Arc(Object.assign({}, this.attribute));
   }
-  function matchDefinition() {
-    return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+  getNoWorkAnimateAttr() {
+    return Arc.NOWORK_ANIMATE_ATTR;
   }
-  function matchGradient(gradientType, pattern, orientationMatcher) {
-    return function (pattern, callback) {
-      const captures = scan(pattern);
-      if (captures) {
-        scan(tokens.startCall) || error("Missing (");
-        const result = callback(captures);
-        return scan(tokens.endCall) || error("Missing )"), result;
-      }
-    }(pattern, function (captures) {
-      const orientation = orientationMatcher();
-      return orientation && (scan(tokens.comma) || error("Missing comma before color stops")), {
-        type: gradientType,
-        orientation: orientation,
-        colorStops: matchListing(matchColorStop)
-      };
-    });
+}
+Arc.NOWORK_ANIMATE_ATTR = Object.assign({
+  cap: 1
+}, NOWORK_ANIMATE_ATTR);
+function createArc(attributes) {
+  return new Arc(attributes);
+}
+
+const POLYGON_UPDATE_TAG_KEY = ["points", "cornerRadius", ...GRAPHIC_UPDATE_TAG_KEY];
+class Polygon extends Graphic {
+  constructor(params) {
+    super(params), this.type = "polygon", this.numberType = POLYGON_NUMBER_TYPE;
   }
-  function matchLinearOrientation() {
-    return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+  isValid() {
+    return super.isValid() && this._isValid();
   }
-  function matchConicalOrientation() {
-    return match("angular", tokens.fromAngleValue, 1);
+  _isValid() {
+    const {
+      points: points
+    } = this.attribute;
+    return points && points.length >= 2;
   }
-  function matchListRadialOrientations() {
-    let radialOrientations,
-      lookaheadCache,
-      radialOrientation = matchRadialOrientation();
-    return radialOrientation && (radialOrientations = [], radialOrientations.push(radialOrientation), lookaheadCache = input, scan(tokens.comma) && (radialOrientation = matchRadialOrientation(), radialOrientation ? radialOrientations.push(radialOrientation) : input = lookaheadCache)), radialOrientations;
+  getGraphicTheme() {
+    return getTheme(this).polygon;
   }
-  function matchRadialOrientation() {
-    let radialType = function () {
-      const circle = match("shape", /^(circle)/i, 0);
-      circle && (circle.style = matchLength() || matchExtentKeyword());
-      return circle;
-    }() || function () {
-      const ellipse = match("shape", /^(ellipse)/i, 0);
-      ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
-      return ellipse;
-    }();
-    if (radialType) radialType.at = matchAtPosition();else {
-      const extent = matchExtentKeyword();
-      if (extent) {
-        radialType = extent;
-        const positionAt = matchAtPosition();
-        positionAt && (radialType.at = positionAt);
-      } else {
-        const defaultPosition = matchPositioning();
-        defaultPosition && (radialType = {
-          type: "default-radial",
-          at: defaultPosition
-        });
-      }
-    }
-    return radialType;
+  updateAABBBounds(attribute, polygonTheme, aabbBounds) {
+    this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
+    const {
+      lineJoin = polygonTheme.lineJoin
+    } = attribute;
+    return application.graphicService.transformAABBBounds(attribute, aabbBounds, polygonTheme, "miter" === lineJoin, this), aabbBounds;
   }
-  function matchExtentKeyword() {
-    return match("extent-keyword", tokens.extentKeywords, 1);
+  updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds) {
+    const {
+      points = polygonTheme.points
+    } = attribute;
+    return points.forEach(p => {
+      aabbBounds.add(p.x, p.y);
+    }), aabbBounds;
   }
-  function matchAtPosition() {
-    if (match("position", /^at/, 0)) {
-      const positioning = matchPositioning();
-      return positioning || error("Missing positioning value"), positioning;
-    }
+  _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {
+    "points" === key && (nextAttributes.points = pointsInterpolation(lastStepVal, nextStepVal, ratio));
   }
-  function matchPositioning() {
-    const location = {
-      x: matchDistance(),
-      y: matchDistance()
-    };
-    if (location.x || location.y) return {
-      type: "position",
-      value: location
-    };
+  needUpdateTags(keys) {
+    return super.needUpdateTags(keys, POLYGON_UPDATE_TAG_KEY);
   }
-  function matchListing(matcher) {
-    let captures = matcher();
-    const result = [];
-    if (captures) for (result.push(captures); scan(tokens.comma);) captures = matcher(), captures ? result.push(captures) : error("One extra comma");
-    return result;
+  needUpdateTag(key) {
+    return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
   }
-  function matchColorStop() {
-    const color = match("hex", tokens.hexColor, 1) || match("rgba", tokens.rgbaColor, 1) || match("rgb", tokens.rgbColor, 1) || match("literal", tokens.literalColor, 0);
-    return color || error("Expected color definition"), color.length = matchDistance(), color;
+  toCustomPath() {
+    const points = this.attribute.points,
+      path = new CustomPath2D();
+    return points.forEach((point, index) => {
+      0 === index ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y);
+    }), path.closePath(), path;
   }
-  function matchDistance() {
-    return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+  clone() {
+    return new Polygon(Object.assign({}, this.attribute));
   }
-  function matchLength() {
-    return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+  getNoWorkAnimateAttr() {
+    return Polygon.NOWORK_ANIMATE_ATTR;
   }
-  function match(type, pattern, captureIndex) {
-    const captures = scan(pattern);
-    if (captures) return {
-      type: type,
-      value: captures[captureIndex]
-    };
+}
+Polygon.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
+function createPolygon(attributes) {
+  return new Polygon(attributes);
+}
+
+class GraphicCreator {
+  constructor() {
+    this.store = new Map();
   }
-  function scan(regexp) {
-    const blankCaptures = /^[\n\r\t\s]+/.exec(input);
-    blankCaptures && consume(blankCaptures[0].length);
-    const captures = regexp.exec(input);
-    return captures && consume(captures[0].length), captures;
+  RegisterGraphicCreator(name, cb) {
+    this.store.set(name, cb), this[name] = cb;
   }
-  function consume(size) {
-    input = input.substr(size);
+  CreateGraphic(name, params) {
+    const cb = this.store.get(name);
+    return cb ? cb(params) : null;
   }
-  return function (code) {
-    return input = code.toString(), getAST();
-  };
-}();
-class GradientParser {
-  static IsGradient(c) {
-    return !("string" == typeof c && !c.includes("gradient"));
+}
+const graphicCreator = new GraphicCreator();
+
+let text;
+function getTextBounds(params) {
+  return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
+}
+
+const result = {
+  x: 0,
+  y: 0,
+  z: 0,
+  lastModelMatrix: null
+};
+class BaseRender {
+  init(contributions) {
+    contributions && (this._renderContribitions = contributions.getContributions()), this._renderContribitions || (this._renderContribitions = []), this.builtinContributions && this.builtinContributions.forEach(item => this._renderContribitions.push(item)), this._renderContribitions.length && (this._renderContribitions.sort((a, b) => b.order - a.order), this._beforeRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke));
   }
-  static IsGradientStr(c) {
-    return "string" == typeof c && c.includes("gradient");
+  beforeRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
+    this._beforeRenderContribitions && this._beforeRenderContribitions.forEach(c => {
+      if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
+        if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
+      }
+      c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
+    });
   }
-  static Parse(c) {
-    if (GradientParser.IsGradientStr(c)) try {
-      const datum = parse(c)[0];
-      if (datum) {
-        if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
-        if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
-        if ("conic" === datum.type) return GradientParser.ParseConic(datum);
+  afterRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
+    this._afterRenderContribitions && this._afterRenderContribitions.forEach(c => {
+      if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
+        if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
       }
-    } catch (err) {
-      return c;
-    }
-    return c;
+      c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
+    });
   }
-  static ParseConic(datum) {
-    const {
-        orientation: orientation,
-        colorStops = []
-      } = datum,
-      halfPi = pi / 2,
-      sa = parseFloat(orientation.value) / 180 * pi - halfPi;
-    return {
-      gradient: "conical",
-      x: .5,
-      y: .5,
-      startAngle: sa,
-      endAngle: sa + pi2,
-      stops: colorStops.map(item => ({
-        color: item.value,
-        offset: parseFloat(item.length.value) / 100
-      }))
-    };
+  drawPathProxy(graphic, context, x, y, drawContext, params, fillCb, strokeCb) {
+    if (!graphic.pathProxy) return !1;
+    const themeAttributes = getTheme(graphic, null == params ? void 0 : params.theme)[graphic.type.replace("3d", "")],
+      {
+        fill = themeAttributes.fill,
+        stroke = themeAttributes.stroke,
+        opacity = themeAttributes.opacity,
+        fillOpacity = themeAttributes.fillOpacity,
+        lineWidth = themeAttributes.lineWidth,
+        strokeOpacity = themeAttributes.strokeOpacity,
+        visible = themeAttributes.visible,
+        x: originX = themeAttributes.x,
+        y: originY = themeAttributes.y
+      } = graphic.attribute,
+      fVisible = fillVisible(opacity, fillOpacity, fill),
+      sVisible = strokeVisible(opacity, strokeOpacity),
+      doFill = runFill(fill),
+      doStroke = runStroke(stroke, lineWidth);
+    if (!visible) return !0;
+    if (!doFill && !doStroke) return !0;
+    if (!(fVisible || sVisible || fillCb || strokeCb)) return !0;
+    context.beginPath();
+    const path = "function" == typeof graphic.pathProxy ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
+    return renderCommandList(path.commandList, context, x, y), context.setShadowBlendStyle && context.setShadowBlendStyle(graphic, graphic.attribute, themeAttributes), this.beforeRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, themeAttributes, drawContext, fillCb, strokeCb), doStroke && (strokeCb ? strokeCb(context, graphic.attribute, themeAttributes) : sVisible && (context.setStrokeStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.stroke())), doFill && (fillCb ? fillCb(context, graphic.attribute, themeAttributes) : fVisible && (context.setCommonStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.fill())), this.afterRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, themeAttributes, drawContext, fillCb, strokeCb), !0;
   }
-  static ParseRadial(datum) {
+  valid(graphic, defaultAttribute, fillCb, strokeCb) {
     const {
-      colorStops = []
-    } = datum;
-    return {
-      gradient: "radial",
-      x0: .5,
-      y0: .5,
-      x1: .5,
-      y1: .5,
-      r0: 0,
-      r1: 1,
-      stops: colorStops.map(item => ({
-        color: item.value,
-        offset: parseFloat(item.length.value) / 100
-      }))
+        fill = defaultAttribute.fill,
+        background: background,
+        stroke = defaultAttribute.stroke,
+        opacity = defaultAttribute.opacity,
+        fillOpacity = defaultAttribute.fillOpacity,
+        lineWidth = defaultAttribute.lineWidth,
+        strokeOpacity = defaultAttribute.strokeOpacity,
+        visible = defaultAttribute.visible
+      } = graphic.attribute,
+      fVisible = fillVisible(opacity, fillOpacity, fill),
+      sVisible = strokeVisible(opacity, strokeOpacity),
+      doFill = runFill(fill, background),
+      doStroke = runStroke(stroke, lineWidth);
+    return !(!graphic.valid || !visible) && !(!doFill && !doStroke) && !!(fVisible || sVisible || fillCb || strokeCb || background) && {
+      fVisible: fVisible,
+      sVisible: sVisible,
+      doFill: doFill,
+      doStroke: doStroke
     };
   }
-  static ParseLinear(datum) {
+  transform(graphic, graphicAttribute, context) {
+    let use3dMatrixIn3dMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
     const {
-        orientation: orientation,
-        colorStops = []
-      } = datum,
-      halfPi = pi / 2;
-    let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi : 0;
-    for (; angle < 0;) angle += pi2;
-    for (; angle > pi2;) angle -= pi2;
-    let x0 = 0,
-      y0 = 0,
-      x1 = 0,
-      y1 = 0;
-    return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = Math.cos(angle)) : angle < pi ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi), y1 = Math.cos(angle - pi)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi), y1 -= Math.sin(angle - halfPi - pi)), {
-      gradient: "linear",
-      x0: x0,
-      y0: y0,
-      x1: x1,
-      y1: y1,
-      stops: colorStops.map(item => ({
-        color: item.value,
-        offset: parseFloat(item.length.value) / 100
-      }))
-    };
+        x = graphicAttribute.x,
+        y = graphicAttribute.y,
+        z = graphicAttribute.z,
+        scaleX = graphicAttribute.scaleX,
+        scaleY = graphicAttribute.scaleY,
+        angle = graphicAttribute.angle,
+        postMatrix: postMatrix
+      } = graphic.attribute,
+      lastModelMatrix = context.modelMatrix,
+      camera = context.camera;
+    result.x = x, result.y = y, result.z = z, result.lastModelMatrix = lastModelMatrix;
+    const shouldTransform3d = camera && (use3dMatrixIn3dMode || shouldUseMat4(graphic)),
+      onlyTranslate = shouldTransform3d ? graphic.transMatrix.onlyTranslate() && !postMatrix : 1 === scaleX && 1 === scaleY && 0 === angle && !postMatrix;
+    if (shouldTransform3d) {
+      const nextModelMatrix = mat4Allocate.allocate(),
+        modelMatrix = mat4Allocate.allocate();
+      getModelMatrix(modelMatrix, graphic, graphicAttribute), multiplyMat4Mat4(nextModelMatrix, lastModelMatrix || nextModelMatrix, modelMatrix), result.x = 0, result.y = 0, result.z = 0, context.modelMatrix = nextModelMatrix, context.setTransform(1, 0, 0, 1, 0, 0, !0), mat4Allocate.free(modelMatrix);
+    }
+    if (onlyTranslate && !lastModelMatrix) {
+      const point = graphic.getOffsetXY(graphicAttribute);
+      result.x += point.x, result.y += point.y, result.z = z, context.setTransformForCurrent();
+    } else if (shouldTransform3d) result.x = 0, result.y = 0, result.z = 0, context.setTransform(1, 0, 0, 1, 0, 0, !0);else if (camera && context.project) {
+      const point = graphic.getOffsetXY(graphicAttribute);
+      result.x += point.x, result.y += point.y, this.transformWithoutTranslate(context, result.x, result.y, result.z, scaleX, scaleY, angle);
+    } else context.transformFromMatrix(graphic.transMatrix, !0), result.x = 0, result.y = 0, result.z = 0;
+    return result;
   }
-}
-
-function getScaledStroke(context, width, dpr) {
-  let strokeWidth = width;
-  const {
-      a: a,
-      b: b,
-      c: c,
-      d: d
-    } = context.currentMatrix,
-    scaleX = Math.sign(a) * Math.sqrt(a * a + b * b),
-    scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
-  return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
-}
-function createColor(context, c, params) {
-  let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  if (!c || !0 === c) return "black";
-  let result, color;
-  if (isArray(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
-  if (color = GradientParser.Parse(color), "string" == typeof color) return color;
-  if (params.AABBBounds && (!params.attribute || 0 !== params.attribute.scaleX || 0 !== params.attribute.scaleY)) {
-    const bounds = params.AABBBounds;
-    let w = bounds.x2 - bounds.x1,
-      h = bounds.y2 - bounds.y1,
-      x = bounds.x1 - offsetX,
-      y = bounds.y1 - offsetY;
-    if (params.attribute) {
-      const {
-        scaleX = 1,
-        scaleY = 1
-      } = params.attribute;
-      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+  transformUseContext2d(graphic, graphicAttribute, z, context) {
+    const camera = context.camera;
+    if (this.camera = camera, camera) {
+      const bounds = graphic.AABBBounds,
+        width = bounds.x2 - bounds.x1,
+        height = bounds.y2 - bounds.y1,
+        p1 = context.project(0, 0, z),
+        p2 = context.project(width, 0, z),
+        p3 = context.project(width, height, z),
+        _p1 = {
+          x: 0,
+          y: 0
+        },
+        _p2 = {
+          x: width,
+          y: 0
+        },
+        _p3 = {
+          x: width,
+          y: height
+        };
+      context.camera = null;
+      const denom = 1 / (_p1.x * (_p3.y - _p2.y) - _p2.x * _p3.y + _p3.x * _p2.y + (_p2.x - _p3.x) * _p1.y),
+        m11 = -(_p1.y * (p3.x - p2.x) - _p2.y * p3.x + _p3.y * p2.x + (_p2.y - _p3.y) * p1.x) * denom,
+        m12 = (_p2.y * p3.y + _p1.y * (p2.y - p3.y) - _p3.y * p2.y + (_p3.y - _p2.y) * p1.y) * denom,
+        m21 = (_p1.x * (p3.x - p2.x) - _p2.x * p3.x + _p3.x * p2.x + (_p2.x - _p3.x) * p1.x) * denom,
+        m22 = -(_p2.x * p3.y + _p1.x * (p2.y - p3.y) - _p3.x * p2.y + (_p3.x - _p2.x) * p1.y) * denom,
+        dx = (_p1.x * (_p3.y * p2.x - _p2.y * p3.x) + _p1.y * (_p2.x * p3.x - _p3.x * p2.x) + (_p3.x * _p2.y - _p2.x * _p3.y) * p1.x) * denom,
+        dy = (_p1.x * (_p3.y * p2.y - _p2.y * p3.y) + _p1.y * (_p2.x * p3.y - _p3.x * p2.y) + (_p3.x * _p2.y - _p2.x * _p3.y) * p1.y) * denom;
+      context.setTransform(m11, m12, m21, m22, dx, dy, !0);
     }
-    "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
   }
-  return result || "orange";
-}
-function createLinearGradient(context, color, x, y, w, h) {
-  var _a, _b, _c, _d;
-  const canvasGradient = context.createLinearGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : 0) * h, x + (null !== (_c = color.x1) && void 0 !== _c ? _c : 1) * w, y + (null !== (_d = color.y1) && void 0 !== _d ? _d : 0) * h);
-  return color.stops.forEach(stop => {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient;
-}
-function createRadialGradient(context, color, x, y, w, h) {
-  var _a, _b, _c, _d, _e, _f;
-  const canvasGradient = context.createRadialGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : .5) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : .5) * h, Math.max(w, h) * (null !== (_c = color.r0) && void 0 !== _c ? _c : 0), x + (null !== (_d = color.x1) && void 0 !== _d ? _d : .5) * w, y + (null !== (_e = color.y1) && void 0 !== _e ? _e : .5) * h, Math.max(w, h) * (null !== (_f = color.r1) && void 0 !== _f ? _f : .5));
-  return color.stops.forEach(stop => {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient;
-}
-function createConicGradient(context, color, x, y, w, h) {
-  var _a, _b;
-  const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
-  return color.stops.forEach(stop => {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient.GetPattern(w + x, h + y, undefined);
+  restoreTransformUseContext2d(graphic, graphicAttribute, z, context) {
+    this.camera && (context.camera = this.camera);
+  }
+  transformWithoutTranslate(context, x, y, z, scaleX, scaleY, angle) {
+    const p = context.project(x, y, z);
+    context.translate(p.x, p.y, !1), context.scale(scaleX, scaleY, !1), context.rotate(angle, !1), context.translate(-p.x, -p.y, !1), context.setTransformForCurrent();
+  }
+  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
+    const {
+      context: context
+    } = drawContext;
+    if (!context) return;
+    const {
+      renderable: renderable
+    } = graphic.attribute;
+    if (!1 === renderable) return;
+    context.highPerformanceSave();
+    const data = this.transform(graphic, defaultAttr, context, computed3dMatrix),
+      {
+        x: x,
+        y: y,
+        z: z,
+        lastModelMatrix: lastModelMatrix
+      } = data;
+    this.z = z, this.drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
+  }
 }
 
 var __decorate$I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -10102,7 +10158,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,
@@ -10114,7 +10171,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({
@@ -10159,14 +10216,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;
@@ -10285,7 +10343,8 @@ class DefaultRectRenderContribution {
       scaleX = rectAttribute.scaleX,
       scaleY = rectAttribute.scaleY,
       x1: x1,
-      y1: y1
+      y1: y1,
+      keepStrokeScale = rectAttribute.keepStrokeScale
     } = rect.attribute;
     let {
       width: width,
@@ -10298,7 +10357,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;
@@ -10455,14 +10514,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;
@@ -11746,16 +11806,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 {
@@ -11775,79 +11827,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);
   }
@@ -11859,12 +11892,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,
@@ -11874,23 +11905,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();
     }
   }
 };
@@ -12278,7 +12307,10 @@ class ShadowRootDrawItemInterceptorContribution {
     const {
       context: context
     } = drawContext;
-    if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
+    context.highPerformanceSave();
+    const t1 = graphic.parent.globalTransMatrix,
+      t2 = graphic.stage.window.getViewBoxTransform().clone().multiply(t1.a, t1.b, t1.c, t1.d, t1.e, t1.f);
+    if (graphic.parent && context.setTransformFromMatrix(t2, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
       tempDirtyBounds.copy(drawContribution.dirtyBounds), tempBackupDirtyBounds.copy(drawContribution.backupDirtyBounds);
       const m = graphic.globalTransMatrix.getInverse();
       drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m), drawContribution.backupDirtyBounds.copy(drawContribution.dirtyBounds);
@@ -13514,6 +13546,7 @@ const GROUP_ATTRIBUTES = [
 class AbstractComponent extends Group {
     constructor(attributes, options) {
         super(attributes);
+        this._skipRenderAttributes = GROUP_ATTRIBUTES;
         if (options === null || options === void 0 ? void 0 : options.mode) {
             this.mode = options.mode;
             this.setMode(options.mode);
@@ -13542,7 +13575,7 @@ class AbstractComponent extends Group {
         else {
             this.attribute[key] = value;
         }
-        if (!GROUP_ATTRIBUTES.includes(key)) {
+        if (!this._skipRenderAttributes.includes(key)) {
             this.render();
         }
         this.valid = this.isValid();
@@ -13558,7 +13591,7 @@ class AbstractComponent extends Group {
     setAttributes(params, forceUpdateTag) {
         const keys = Object.keys(params);
         this._mergeAttributes(params, keys);
-        if (!keys.every(key => GROUP_ATTRIBUTES.includes(key))) {
+        if (!keys.every(key => this._skipRenderAttributes.includes(key))) {
             this.render();
         }
         this.valid = this.isValid();
@@ -13645,8 +13678,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;
   }
 }
@@ -13868,8 +13902,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,
@@ -14048,8 +14083,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;
   }
 }
@@ -14184,8 +14220,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;
   }
 };
@@ -14832,6 +14869,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);
@@ -16289,24 +16608,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 };
@@ -16606,69 +16930,177 @@ function loadLabelComponent() {
     registerLine();
 }
 
-function shiftY(texts, option = {}) {
-    const { maxIterations = 10, maxError = 0.1, padding = 1, maxY = Number.MAX_VALUE } = option;
+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 { maxY = Number.MAX_VALUE, labelling, globalShiftY = { enable: true, maxIterations: 10, maxError: 0.1, padding: 1 } } = option;
     const n = texts.length;
     if (n <= 1) {
         return texts;
     }
-    const isIntersect = ([a, b], [c, d]) => {
-        return d > a && b > c;
-    };
+    const xMap = new Map();
     const textInformation = new Map();
-    const getY0 = (text) => textInformation.get(text).y0;
-    const getY = (text) => textInformation.get(text).y;
+    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 setY = (text, y) => {
-        textInformation.get(text).y = y;
+    const getAdjustAttempts = (text) => textInformation.get(text).attempts;
+    const setY1 = (text, y) => {
+        textInformation.get(text).y1 = y;
     };
+    const setAdjustAttempts = (text, attempts) => {
+        textInformation.get(text).attempts = attempts;
+    };
+    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;
-        textInformation.set(text, { y0: y1, y: y1, height: y2 - y1, x1, x2 });
+        const { x, y } = text.attribute;
+        textInformation.set(text, { y1Initial: y1, y1, y2, y, height: y2 - y1, x1, x2, x, attempts: 0 });
+        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 (let iter = 0; iter < maxIterations; iter++) {
-        texts.sort((a, b) => getY(a) - getY(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]) &&
-                !isIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])) {
-                j += 1;
-            }
-            if (nextText) {
-                const y0 = getY(curText);
-                const h0 = getHeight(curText);
-                const y1 = getY(nextText);
-                const delta = y1 - (y0 + h0);
-                if (delta < padding) {
-                    const newDelta = (padding - delta) / 2;
-                    error = Math.max(error, newDelta);
-                    if (y1 + newDelta + getHeight(nextText) > maxY) {
-                        setY(curText, y0 - (padding - delta));
-                    }
-                    else if (y0 - newDelta < 0) {
-                        setY(nextText, y1 + (padding - delta));
-                    }
-                    else {
-                        setY(curText, y0 - newDelta);
-                        setY(nextText, y1 + newDelta);
+    for (const xTexts of xMap.values()) {
+        xTexts.sort((a, b) => getY1Initial(a) - getY1Initial(b));
+        adjustPositionInOneGroup(xTexts);
+    }
+    if (globalShiftY.enable !== false) {
+        const { maxIterations = 10, maxError = 0.1, padding = 1, maxAttempts = 1000, deltaYTolerance = Number.MAX_VALUE } = globalShiftY;
+        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];
+                if (getAdjustAttempts(curText) >= maxAttempts) {
+                    continue;
+                }
+                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) {
+                            const newY1 = y1 - (padding - delta);
+                            const curTextDelta = getY1Initial(curText) - newY1;
+                            if (Math.abs(curTextDelta) <= deltaYTolerance) {
+                                setY1(curText, newY1);
+                                setAdjustAttempts(curText, getAdjustAttempts(curText) + 1);
+                            }
+                        }
+                        else if (y1 - newDelta < 0) {
+                            const newY1 = nextY1 + (padding - delta);
+                            const nextTextDelta = getY1Initial(nextText) - newY1;
+                            if (Math.abs(nextTextDelta) <= deltaYTolerance) {
+                                setY1(nextText, newY1);
+                                setAdjustAttempts(nextText, getAdjustAttempts(nextText) + 1);
+                            }
+                        }
+                        else {
+                            const newCurY1 = y1 - newDelta;
+                            const curTextDelta = getY1Initial(curText) - newCurY1;
+                            const newNextY1 = nextY1 + newDelta;
+                            const nextTextDelta = getY1Initial(nextText) - newNextY1;
+                            if (Math.abs(curTextDelta) <= deltaYTolerance && Math.abs(nextTextDelta) <= deltaYTolerance) {
+                                setY1(curText, newCurY1);
+                                setY1(nextText, newNextY1);
+                                setAdjustAttempts(curText, getAdjustAttempts(curText) + 1);
+                                setAdjustAttempts(nextText, getAdjustAttempts(nextText) + 1);
+                            }
+                        }
                     }
                 }
             }
-        }
-        if (error < maxError) {
-            break;
+            if (error < maxError) {
+                break;
+            }
         }
     }
     for (const text of texts) {
-        const finalY = text.attribute.y + getY(text) - getY0(text);
+        const finalY = text.attribute.y + getY1(text) - getY1Initial(text);
         text.setAttribute('y', finalY);
     }
-    return texts;
+    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();
@@ -17014,18 +17446,25 @@ class LabelBase extends AbstractComponent {
         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);
+                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({ maxY: bmpTool.height }, strategy));
+        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, overlapPadding)) {
+            if (canPlace(bmpTool, bitmap, bounds, clampForce, text._isClamped ? 0 : overlapPadding)) {
                 bitmap.setRange(range);
             }
             else {
@@ -17098,7 +17537,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));
@@ -17329,7 +17768,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';
@@ -17346,8 +17785,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);
@@ -17575,6 +18021,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) {
@@ -25061,7 +25510,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;
@@ -25082,11 +25532,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) {
@@ -25291,8 +25751,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;
@@ -25332,9 +25792,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,
@@ -25362,13 +25839,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;
             }
@@ -25382,6 +25853,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);
@@ -25393,15 +25865,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) {
@@ -25516,10 +26012,12 @@ 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, item = {}, pager = {} } = this.attribute;
         const { spaceCol = DEFAULT_ITEM_SPACE_COL, spaceRow = DEFAULT_ITEM_SPACE_ROW } = item;
@@ -25528,27 +26026,23 @@ class DiscreteLegend extends LegendBase {
         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;
@@ -25579,14 +26073,15 @@ class DiscreteLegend extends LegendBase {
             }
             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({
@@ -25599,9 +26094,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();
@@ -29588,7 +30163,7 @@ class Radio extends AbstractComponent {
         this.appendChild(this._circle);
     }
     renderText() {
-        this._text = new WrapText(merge({}, this.attribute.text));
+        this._text = new Text(merge({}, this.attribute.text));
         if (this.attribute.disabled) {
             this._text.setAttribute('fill', this.attribute.text.disableFill);
         }
@@ -29838,6 +30413,6 @@ WeatherBox.defaultAttributes = {
     snowRainBottomPadding: 0
 };
 
-const version = "0.21.0-vstory.1";
+const version = "0.21.0-vstory.3";
 
-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, WeatherBox, 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, WeatherBox, 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 };