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

package/dist/index.es.js

@@ -742,6 +742,13 @@ let DefaultGlobal = class {
 };
 DefaultGlobal = __decorate$1J([injectable(), __param$U(0, inject(ContributionProvider)), __param$U(0, named(EnvContribution)), __metadata$1i("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 strCommandMap = ["arc", "arcTo", "bezierCurveTo", "closePath", "ellipse", "lineTo", "moveTo", "quadraticCurveTo", "rect"];
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -1698,7 +1705,9 @@ class TextMeasure {
       } = this.textSpec;
     return {
       width: metrics.width,
-      height: null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize
+      height: null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize,
+      fontBoundingBoxAscent: metrics.fontBoundingBoxAscent,
+      fontBoundingBoxDescent: metrics.fontBoundingBoxDescent
     };
   }
   quickMeasure(text) {
@@ -1712,7 +1721,7 @@ class TextMeasure {
     for (let i = 0; i < text.length; i++) {
       const char = text[i];
       let size = this._measureSpecialChar(char);
-      isNil$1(size) && TextMeasure.NUMBERS_CHAR_SET.includes(char) && (size = this._measureNumberChar()), isNil$1(size) && ["F", "W"].includes(eastAsianCharacterInfo(char)) && (size = this._measureFullSizeChar()), isNil$1(size) && (size = this._measureLetterChar()), totalSize.width += size.width, totalSize.height = Math.max(totalSize.height, size.height);
+      isNil$1(size) && TextMeasure.NUMBERS_CHAR_SET.includes(char) && (size = this._measureNumberChar()), isNil$1(size) && ["F", "W"].includes(eastAsianCharacterInfo(char)) && (size = this._measureFullSizeChar()), isNil$1(size) && (size = this._measureLetterChar()), totalSize.width += size.width, totalSize.height = Math.max(totalSize.height, size.height), !isNil$1(size.fontBoundingBoxAscent) && (totalSize.fontBoundingBoxAscent = size.fontBoundingBoxAscent), !isNil$1(size.fontBoundingBoxDescent) && (totalSize.fontBoundingBoxDescent = size.fontBoundingBoxDescent);
     }
     return totalSize;
   }
@@ -1761,7 +1770,9 @@ class TextMeasure {
       const numberBounds = this._standardMethod(TextMeasure.NUMBERS_CHAR_SET);
       this._numberCharSize = {
         width: numberBounds.width / TextMeasure.NUMBERS_CHAR_SET.length,
-        height: numberBounds.height
+        height: numberBounds.height,
+        fontBoundingBoxAscent: numberBounds.fontBoundingBoxAscent,
+        fontBoundingBoxDescent: numberBounds.fontBoundingBoxDescent
       };
     }
     return this._numberCharSize;
@@ -1774,7 +1785,9 @@ class TextMeasure {
       const alphabetBounds = this._standardMethod(TextMeasure.ALPHABET_CHAR_SET);
       this._letterCharSize = {
         width: alphabetBounds.width / TextMeasure.ALPHABET_CHAR_SET.length,
-        height: alphabetBounds.height
+        height: alphabetBounds.height,
+        fontBoundingBoxAscent: alphabetBounds.fontBoundingBoxAscent,
+        fontBoundingBoxDescent: alphabetBounds.fontBoundingBoxDescent
       };
     }
     return this._letterCharSize;
@@ -4048,6 +4061,7 @@ const DefaultStrokeStyle = Object.assign({
 const DefaultTextStyle = {
   text: "",
   maxLineWidth: 1 / 0,
+  maxWidth: 1 / 0,
   textAlign: "left",
   textBaseline: "alphabetic",
   fontSize: 16,
@@ -4071,7 +4085,9 @@ const DefaultTextStyle = {
   suffixPosition: "end",
   underlineDash: [],
   underlineOffset: 0,
-  disableAutoClipedPoptip: void 0
+  disableAutoClipedPoptip: void 0,
+  measureMode: MeasureModeEnum.fontBounding,
+  keepCenterInLine: !1
 };
 const DefaultPickStyle = {
   pickStrokeBuffer: 0
@@ -4128,7 +4144,8 @@ const DefaultAttribute = Object.assign(Object.assign(Object.assign({
   globalZIndex: 1,
   globalCompositeOperation: "",
   overflow: "hidden",
-  shadowPickMode: "graphic"
+  shadowPickMode: "graphic",
+  keepStrokeScale: !1
 }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
 function addAttributeToPrototype(obj, c, keys) {
   keys.forEach(key => {
@@ -4282,165 +4299,553 @@ 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;
+  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
+        });
+      }
     }
-    if (index < 0) {
-      index = 0;
-      break;
+    return radialType;
+  }
+  function matchExtentKeyword() {
+    return match("extent-keyword", tokens.extentKeywords, 1);
+  }
+  function matchAtPosition() {
+    if (match("position", /^at/, 0)) {
+      const positioning = matchPositioning();
+      return positioning || error("Missing positioning value"), positioning;
     }
-    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
+  function matchPositioning() {
+    const location = {
+      x: matchDistance(),
+      y: matchDistance()
+    };
+    if (location.x || location.y) return {
+      type: "position",
+      value: location
     };
-  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$1I = 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);
   }
-  measureTextWidth(text, options) {
-    if (!this.context) return this.estimate(text, options).width;
-    this.context.setTextStyleWithoutAlignBaseline(options);
-    return this.context.measureText(text).width;
+  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;
   }
-  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 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;
   }
-  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 matchDistance() {
+    return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
   }
-  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 matchLength() {
+    return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
   }
-  measureText(text, options) {
-    return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
+  function match(type, pattern, captureIndex) {
+    const captures = scan(pattern);
+    if (captures) return {
+      type: type,
+      value: captures[captureIndex]
+    };
   }
-  clipTextVertical(verticalList, options, width, wordBreak) {
-    if (0 === verticalList.length) return {
+  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;
+  }
+  function consume(size) {
+    input = input.substr(size);
+  }
+  return function (code) {
+    return input = code.toString(), getAST();
+  };
+}();
+class GradientParser {
+  static IsGradient(c) {
+    return !("string" == typeof c && !c.includes("gradient"));
+  }
+  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 {
+      gradient: "conical",
+      x: .5,
+      y: .5,
+      startAngle: sa,
+      endAngle: sa + pi2,
+      stops: colorStops.map(item => ({
+        color: item.value,
+        offset: parseFloat(item.length.value) / 100
+      }))
+    };
+  }
+  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
+      }))
+    };
+  }
+  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
+      }))
+    };
+  }
+}
+
+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$1(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));
+  }
+  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"
+  }
+};
+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$1I = 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);
+  }
+  _measureTextWithoutAlignBaseline(text, options, compatible) {
+    this.context.setTextStyleWithoutAlignBaseline(options);
+    const metrics = this.context.measureText(text);
+    return compatible ? this.compatibleMetrics(metrics, options) : metrics;
+  }
+  _measureTextWithAlignBaseline(text, options, compatible) {
+    this.context.setTextStyle(options);
+    const metrics = this.context.measureText(text);
+    return compatible ? this.compatibleMetrics(metrics, options) : metrics;
+  }
+  compatibleMetrics(metrics, options) {
+    if (null == metrics.actualBoundingBoxAscent || null == metrics.actualBoundingBoxDescent || null == metrics.fontBoundingBoxAscent || null == metrics.fontBoundingBoxDescent) {
+      const {
+        ascent: ascent,
+        descent: descent
+      } = this.measureTextBoundADscentEstimate(options);
+      metrics.actualBoundingBoxAscent = ascent, metrics.actualBoundingBoxDescent = descent, metrics.fontBoundingBoxAscent = ascent, metrics.fontBoundingBoxDescent = descent;
+    }
+    if (null == metrics.actualBoundingBoxLeft || null == metrics.actualBoundingBoxRight) {
+      const {
+        left: left,
+        right: right
+      } = this.measureTextBoundLeftRightEstimate(options);
+      metrics.actualBoundingBoxLeft = left, metrics.actualBoundingBoxRight = right;
+    }
+    return metrics;
+  }
+  estimate(text, _ref) {
+    let {
+      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
+    };
+  }
+  measureTextWidth(text, options, textMeasure) {
+    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
+  }
+  measureTextBoundsWidth(text, options, textMeasure) {
+    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
+  }
+  measureTextBoundsLeftRight(text, options, textMeasure) {
+    return this.context ? {
+      left: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxLeft,
+      right: textMeasure.actualBoundingBoxRight
+    } : this.measureTextBoundLeftRightEstimate(options);
+  }
+  measureTextPixelHeight(text, options, textMeasure) {
+    var _a;
+    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;
+  }
+  measureTextPixelADscent(text, options, textMeasure) {
+    return this.context ? {
+      ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxAscent,
+      descent: textMeasure.actualBoundingBoxDescent
+    } : this.measureTextBoundADscentEstimate(options);
+  }
+  measureTextBoundHieght(text, options, textMeasure) {
+    var _a;
+    return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, !0), Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent)) : null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
+  }
+  measureTextBoundADscent(text, options, textMeasure) {
+    return this.context ? {
+      ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).fontBoundingBoxAscent,
+      descent: textMeasure.fontBoundingBoxDescent
+    } : this.measureTextBoundADscentEstimate(options);
+  }
+  measureTextBoundADscentEstimate(options) {
+    var _a;
+    const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
+    return {
+      ascent: .79 * fontSize,
+      descent: .21 * fontSize
+    };
+  }
+  measureTextBoundLeftRightEstimate(options) {
+    var _a;
+    const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize,
+      {
+        textAlign: textAlign
+      } = options;
+    return "center" === textAlign ? {
+      left: fontSize / 2,
+      right: fontSize / 2
+    } : "right" === textAlign || "end" === textAlign ? {
+      left: fontSize,
+      right: 0
+    } : {
+      left: 0,
+      right: fontSize
+    };
+  }
+  measureTextPixelADscentAndWidth(text, options, mode) {
+    if (!this.context) return Object.assign(Object.assign({}, this.measureTextBoundADscentEstimate(options)), {
+      width: this.estimate(text, options).width
+    });
+    const out = this._measureTextWithoutAlignBaseline(text, options, !0);
+    if (mode === MeasureModeEnum.actualBounding) return {
+      ascent: out.actualBoundingBoxAscent,
+      descent: out.actualBoundingBoxDescent,
+      width: out.width
+    };
+    if (mode === MeasureModeEnum.estimate) return Object.assign(Object.assign({}, this.measureTextBoundADscentEstimate(options)), {
+      width: out.width
+    });
+    if (mode === MeasureModeEnum.fontBounding) {
+      let ascent = out.fontBoundingBoxAscent,
+        descent = out.fontBoundingBoxDescent;
+      if (out.actualBoundingBoxDescent && descent < out.actualBoundingBoxDescent) {
+        const delta = out.actualBoundingBoxDescent - descent;
+        descent += delta, ascent -= delta;
+      } else if (out.actualBoundingBoxAscent && ascent < out.actualBoundingBoxAscent) {
+        const delta = out.actualBoundingBoxAscent - ascent;
+        ascent += delta, descent -= delta;
+      }
+      return {
+        ascent: ascent,
+        descent: descent,
+        width: out.width
+      };
+    }
+    return {
+      ascent: out.actualBoundingBoxAscent,
+      descent: out.actualBoundingBoxDescent,
+      width: out.width
+    };
+  }
+  measureText(text, options) {
+    return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
+  }
+  clipTextVertical(verticalList, options, width, wordBreak) {
+    if (0 === verticalList.length) return {
       verticalList: verticalList,
       width: 0
     };
@@ -4512,6 +4917,14 @@ let ATextMeasure = class {
     return data;
   }
   _clipTextEnd(text, options, width, leftIdx, rightIdx) {
+    if (leftIdx === rightIdx) {
+      Logger.getInstance().warn(`【_clipTextEnd】不应该走到这里${text}, ${leftIdx}, ${rightIdx}`);
+      const subText = text.substring(0, rightIdx + 1);
+      return {
+        str: subText,
+        width: this.measureTextWidth(subText, options)
+      };
+    }
     const middleIdx = Math.floor((leftIdx + rightIdx) / 2),
       subText = text.substring(0, middleIdx + 1),
       strWidth = this.measureTextWidth(subText, options);
@@ -4545,7 +4958,7 @@ let ATextMeasure = class {
   }
   _clipTextStart(text, options, width, leftIdx, rightIdx) {
     const middleIdx = Math.ceil((leftIdx + rightIdx) / 2),
-      subText = text.substring(middleIdx - 1, text.length - 1),
+      subText = text.substring(middleIdx - 1, text.length),
       strWidth = this.measureTextWidth(subText, options);
     let length;
     if (strWidth > width) {
@@ -4553,18 +4966,18 @@ let ATextMeasure = class {
         str: "",
         width: 0
       };
-      const str = text.substring(middleIdx, text.length - 1);
+      const str = text.substring(middleIdx, text.length);
       return length = this.measureTextWidth(str, options), length <= width ? {
         str: str,
         width: length
-      } : this._clipTextStart(text, options, width, middleIdx, text.length - 1);
+      } : this._clipTextStart(text, options, width, middleIdx, text.length);
     }
     if (strWidth < width) {
       if (middleIdx <= 0) return {
         str: text,
         width: this.measureTextWidth(text, options)
       };
-      const str = text.substring(middleIdx - 2, text.length - 1);
+      const str = text.substring(middleIdx - 2, text.length);
       return length = this.measureTextWidth(str, options), length >= width ? {
         str: subText,
         width: strWidth
@@ -5619,19 +6032,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;
@@ -6149,7 +6562,7 @@ class EventManager {
           timeStamp: now
         });
         const clickHistory = trackingData.clicksByButton[from.button];
-        clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < (null !== (_a = this._config.clickInterval) && void 0 !== _a ? _a : 200) ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && (this.dispatchEvent(clickEvent, "tap"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dbltap")), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
+        clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < (null !== (_a = this._config.clickInterval) && void 0 !== _a ? _a : 200) ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && this._config.supportsTouchEvents && (this.dispatchEvent(clickEvent, "tap"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dbltap")), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
       }
       this.freeEvent(e);
     }, this.onPointerUpOutside = (from, target) => {
@@ -6366,7 +6779,8 @@ class EventSystem {
       supportsPointerEvents = global.supportsPointerEvents
     } = params;
     this.manager = new EventManager(rootNode, {
-      clickInterval: clickInterval
+      clickInterval: clickInterval,
+      supportsTouchEvents: supportsTouchEvents
     }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
       default: "inherit",
       pointer: "pointer"
@@ -6550,8 +6964,8 @@ class DefaultTicker extends EventEmitter {
       const {
         once = !1
       } = null != params ? params : {};
-      this.ifCanStop() ? this.stop() : (this._handlerTick(handler), once || handler.tick(this.interval, this.handleTick));
-    }, this._handlerTick = handler => {
+      this.ifCanStop() ? this.stop() : (this._handlerTick(), once || handler.tick(this.interval, this.handleTick));
+    }, this._handlerTick = () => {
       const time = this.tickerHandler.getTime();
       let delta = 0;
       this.lastFrameTime >= 0 && (delta = time - this.lastFrameTime), this.lastFrameTime = time, this.status === STATUS$1.RUNNING && (this.tickCounts++, this.timelines.forEach(t => {
@@ -6656,7 +7070,10 @@ class DefaultTicker extends EventEmitter {
     this.status = STATUS$1.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
   }
   release() {
-    this.stop(), this.timelines = [], this.tickerHandler.release();
+    this.stop(), this.timelines = [], this.tickerHandler.release(), this.emit("afterTick");
+  }
+  trySyncTickStatus() {
+    this.status === STATUS$1.RUNNING && this._handlerTick();
   }
 }
 
@@ -6813,6 +7230,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;
@@ -7363,12 +7783,16 @@ class RafBasedSTO {
 }
 RafBasedSTO.TimeOut = 1e3 / 60;
 const rafBasedSto = new RafBasedSTO();
-const calculateLineHeight = (lineHeight, fontSize) => {
+const _calculateLineHeight = (lineHeight, fontSize) => {
   if (isString$1(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) {
@@ -7805,7 +8229,7 @@ class TagPointsUpdate extends ACustomAnimate {
       lastMatchedIndex = i, lastMatchedPoint = tagMap.get(this.toPoints[i].context);
       break;
     }
-    "clip" === this.newPointAnimateType && 0 !== this.toPoints.length && (Number.isFinite(lastMatchedIndex) ? (this.clipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension], isValidNumber$1(this.clipRange) ? this.clipRange = clamp$1(this.clipRange, 0, 1) : this.clipRange = 0) : this.clipRange = 0);
+    "clip" === this.newPointAnimateType && 0 !== this.toPoints.length && (Number.isFinite(lastMatchedIndex) ? (this.clipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension], 1 === this.clipRange && (this.shrinkClipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.fromPoints[this.fromPoints.length - 1][this.clipRangeByDimension]), isValidNumber$1(this.clipRange) ? this.clipRange = clamp$1(this.clipRange, 0, 1) : this.clipRange = 0) : this.clipRange = 0);
     let prevMatchedPoint = this.toPoints[0];
     this.interpolatePoints = this.toPoints.map((point, index) => {
       const matchedPoint = tagMap.get(point.context);
@@ -7817,11 +8241,19 @@ class TagPointsUpdate extends ACustomAnimate {
       return newPoint.defined = toPoint.defined, newPoint.context = toPoint.context, newPoint;
     });
   }
+  onFirstRun() {
+    const lastClipRange = this.target.attribute.clipRange;
+    isValidNumber$1(lastClipRange * this.clipRange) && (this.clipRange *= lastClipRange);
+  }
   onUpdate(end, ratio, out) {
     if (this.points = this.points.map((point, index) => {
       const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
       return newPoint.context = point.context, newPoint;
-    }), this.clipRange && (out.clipRange = this.clipRange + (1 - this.clipRange) * ratio), this.segmentsCache && this.to.segments) {
+    }), this.clipRange) {
+      if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints, out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
+      out.clipRange = this.clipRange + (1 - this.clipRange) * ratio;
+    }
+    if (this.segmentsCache && this.to.segments) {
       let start = 0;
       out.segments = this.to.segments.map((segment, index) => {
         const end = start + this.segmentsCache[index],
@@ -11594,58 +12026,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 = {
@@ -11654,7 +12092,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],
@@ -11673,11 +12111,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();
@@ -11686,26 +12132,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 => {
@@ -11716,10 +12158,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;
@@ -11792,8 +12231,74 @@ class Text extends Graphic {
     }
     return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
   }
+  updateSingallineAABBBounds(text) {
+    this.updateMultilineAABBBounds([text]);
+    const layoutData = this.cache.layoutData;
+    if (layoutData && layoutData.lines && layoutData.lines.length) {
+      const line = layoutData.lines[0];
+      this.cache.clipedText = line.str, this.cache.clipedWidth = line.width;
+    }
+    return this._AABBBounds;
+  }
+  updateMultilineAABBBounds(text) {
+    const textTheme = this.getGraphicTheme(),
+      {
+        direction = textTheme.direction,
+        underlineOffset = textTheme.underlineOffset
+      } = this.attribute,
+      b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+    return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
+  }
+  guessLineHeightBuf(fontSize) {
+    return fontSize ? .1 * fontSize : 0;
+  }
+  updateHorizontalMultilineAABBBounds(text) {
+    var _a;
+    const textTheme = this.getGraphicTheme(),
+      attribute = this.attribute,
+      {
+        fontFamily = textTheme.fontFamily,
+        textAlign = textTheme.textAlign,
+        textBaseline = textTheme.textBaseline,
+        fontSize = textTheme.fontSize,
+        fontWeight = textTheme.fontWeight,
+        ellipsis = textTheme.ellipsis,
+        maxLineWidth: maxLineWidth,
+        stroke = textTheme.stroke,
+        wrap = textTheme.wrap,
+        measureMode = textTheme.measureMode,
+        lineWidth = textTheme.lineWidth,
+        whiteSpace = textTheme.whiteSpace,
+        suffixPosition = textTheme.suffixPosition,
+        ignoreBuf = textTheme.ignoreBuf,
+        keepCenterInLine = textTheme.keepCenterInLine
+      } = attribute,
+      buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize),
+      lineHeight = this.getLineHeight(attribute, textTheme, buf);
+    if ("normal" === whiteSpace || wrap) return this.updateWrapAABBBounds(text);
+    if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+      const bbox = this.cache.layoutData.bbox;
+      return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+    }
+    const textMeasure = application.graphicUtil.textMeasure,
+      layoutData = new CanvasTextLayout(fontFamily, {
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        fontFamily: fontFamily,
+        lineHeight: lineHeight
+      }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, {
+        lineWidth: maxLineWidth,
+        suffixPosition: suffixPosition,
+        measureMode: measureMode,
+        keepCenterInLine: keepCenterInLine
+      }),
+      {
+        bbox: bbox
+      } = layoutData;
+    return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+  }
   updateWrapAABBBounds(text) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const textTheme = this.getGraphicTheme(),
       {
         fontFamily = textTheme.fontFamily,
@@ -11807,22 +12312,26 @@ class Text extends Graphic {
         wordBreak = textTheme.wordBreak,
         fontWeight = textTheme.fontWeight,
         ignoreBuf = textTheme.ignoreBuf,
+        measureMode = textTheme.measureMode,
         suffixPosition = textTheme.suffixPosition,
         heightLimit = 0,
-        lineClamp: lineClamp
+        lineClamp: lineClamp,
+        keepCenterInLine = textTheme.keepCenterInLine
       } = this.attribute,
-      lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
-      buf = ignoreBuf ? 0 : 2;
-    if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
+      buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize),
+      lineHeight = this.getLineHeight(this.attribute, textTheme, buf);
+    if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
       const bbox = this.cache.layoutData.bbox;
       return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
     }
     const textMeasure = application.graphicUtil.textMeasure,
-      layoutObj = new CanvasTextLayout(fontFamily, {
+      textOptions = {
         fontSize: fontSize,
         fontWeight: fontWeight,
-        fontFamily: fontFamily
-      }, textMeasure),
+        fontFamily: fontFamily,
+        lineHeight: lineHeight
+      },
+      layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure),
       lines = isArray$1(text) ? text.map(l => l.toString()) : [text.toString()],
       linesLayout = [],
       bboxWH = [0, 0];
@@ -11832,24 +12341,32 @@ class Text extends Graphic {
         const str = lines[i];
         let needCut = !0;
         if (i === lineCountLimit - 1) {
-          const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1);
+          const clip = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1),
+            matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
           linesLayout.push({
             str: clip.str,
-            width: clip.width
+            width: clip.width,
+            ascent: matrics.ascent,
+            descent: matrics.descent,
+            keepCenterInLine: keepCenterInLine
           });
           break;
         }
-        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
+        const clip = textMeasure.clipText(str, textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
         if ("" !== str && "" === clip.str || clip.wordBreaked) {
           if (ellipsis) {
-            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-            clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
+            const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+            clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
           } else clip.str = "", clip.width = 0;
           needCut = !1;
         }
+        const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
         linesLayout.push({
           str: clip.str,
-          width: clip.width
+          width: clip.width,
+          ascent: matrics.ascent,
+          descent: matrics.descent,
+          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) {
@@ -11864,238 +12381,49 @@ class Text extends Graphic {
     } 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;
-  }
-  updateMultilineAABBBounds(text) {
-    const textTheme = this.getGraphicTheme(),
-      {
-        direction = textTheme.direction,
-        underlineOffset = textTheme.underlineOffset
-      } = this.attribute,
-      b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
-    return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
-  }
-  updateHorizontalSinglelineAABBBounds(text) {
-    var _a, _b;
-    const textTheme = this.getGraphicTheme(),
-      {
-        wrap = textTheme.wrap
-      } = this.attribute;
-    if (wrap) return this.updateWrapAABBBounds([text]);
-    const textMeasure = application.graphicUtil.textMeasure;
-    let width, str;
-    const attribute = this.attribute,
-      {
-        maxLineWidth = textTheme.maxLineWidth,
-        ellipsis = textTheme.ellipsis,
-        textAlign = textTheme.textAlign,
-        textBaseline = textTheme.textBaseline,
-        fontFamily = textTheme.fontFamily,
-        fontSize = textTheme.fontSize,
-        fontWeight = textTheme.fontWeight,
-        stroke = textTheme.stroke,
-        lineWidth = textTheme.lineWidth,
-        ignoreBuf = textTheme.ignoreBuf,
-        whiteSpace = textTheme.whiteSpace,
-        suffixPosition = textTheme.suffixPosition
-      } = attribute;
-    if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
-    const buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
-      textFontSize = attribute.fontSize || textTheme.fontSize,
-      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) && void 0 !== _a ? _a : textFontSize + buf;
-    if (!this.shouldUpdateShape() && this.cache) {
-      width = null !== (_b = this.cache.clipedWidth) && void 0 !== _b ? _b : 0;
-      const dx = textDrawOffsetX(textAlign, width),
-        dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-      return this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-    }
-    if (Number.isFinite(maxLineWidth)) {
-      if (ellipsis) {
-        const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
-          data = textMeasure.clipTextWithSuffix(text.toString(), {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          }, maxLineWidth, strEllipsis, !1, suffixPosition);
-        str = data.str, width = data.width;
-      } else {
-        const data = textMeasure.clipText(text.toString(), {
-          fontSize: fontSize,
-          fontWeight: fontWeight,
-          fontFamily: fontFamily
-        }, maxLineWidth, !1);
-        str = data.str, width = data.width;
-      }
-      this.cache.clipedText = str, this.cache.clipedWidth = width;
-    } else width = textMeasure.measureTextWidth(text.toString(), {
-      fontSize: fontSize,
-      fontWeight: fontWeight,
-      fontFamily: fontFamily
-    }), this.cache.clipedText = text.toString(), this.cache.clipedWidth = width;
-    this.clearUpdateShapeTag();
-    const dx = textDrawOffsetX(textAlign, width);
-    let lh = lineHeight;
-    application.global && application.global.isSafari() && (lh += .2 * fontSize);
-    const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
-    return this._AABBBounds.set(dx, dy, dx + width, dy + lh), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-  }
-  getBaselineMapAlign() {
-    return Text.baselineMapAlign;
-  }
-  getAlignMapBaseline() {
-    return Text.alignMapBaseline;
-  }
-  updateVerticalSinglelineAABBBounds(text) {
-    var _a, _b, _c;
-    const textTheme = this.getGraphicTheme(),
-      textMeasure = application.graphicUtil.textMeasure;
-    let width;
-    const attribute = this.attribute,
-      {
-        ignoreBuf = textTheme.ignoreBuf
-      } = attribute,
-      buf = ignoreBuf ? 0 : 2,
-      {
-        maxLineWidth = textTheme.maxLineWidth,
-        ellipsis = textTheme.ellipsis,
-        fontSize = textTheme.fontSize,
-        fontWeight = textTheme.fontWeight,
-        fontFamily = textTheme.fontFamily,
-        stroke = textTheme.stroke,
-        lineWidth = textTheme.lineWidth,
-        verticalMode = textTheme.verticalMode,
-        suffixPosition = textTheme.suffixPosition
-      } = attribute,
-      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
-    let {
-      textAlign = textTheme.textAlign,
-      textBaseline = textTheme.textBaseline
-    } = attribute;
-    if (!verticalMode) {
-      const t = textAlign;
-      textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
-    }
-    if (!this.shouldUpdateShape() && this.cache) {
-      width = this.cache.clipedWidth;
-      const dx = textDrawOffsetX(textAlign, width),
-        dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-      return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-    }
-    let verticalList = [verticalLayout(text.toString())];
-    if (Number.isFinite(maxLineWidth)) {
-      if (ellipsis) {
-        const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
-          data = textMeasure.clipTextWithSuffixVertical(verticalList[0], {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          }, maxLineWidth, strEllipsis, !1, suffixPosition);
-        verticalList = [data.verticalList], width = data.width;
-      } else {
-        const data = textMeasure.clipTextVertical(verticalList[0], {
-          fontSize: fontSize,
-          fontWeight: fontWeight,
-          fontFamily: fontFamily
-        }, maxLineWidth, !1);
-        verticalList = [data.verticalList], width = data.width;
-      }
-      this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
-    } else width = 0, verticalList[0].forEach(t => {
-      const w = t.direction === TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        fontFamily: fontFamily
-      });
-      width += w, t.width = w;
-    }), this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
-    this.clearUpdateShapeTag();
-    const dx = textDrawOffsetX(textAlign, width),
-      dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-    return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-  }
-  updateHorizontalMultilineAABBBounds(text) {
-    var _a, _b;
-    const textTheme = this.getGraphicTheme(),
-      {
-        wrap = textTheme.wrap
-      } = this.attribute;
-    if (wrap) return this.updateWrapAABBBounds(text);
-    const attribute = this.attribute,
-      {
-        fontFamily = textTheme.fontFamily,
-        textAlign = textTheme.textAlign,
-        textBaseline = textTheme.textBaseline,
-        fontSize = textTheme.fontSize,
-        fontWeight = textTheme.fontWeight,
-        ellipsis = textTheme.ellipsis,
-        maxLineWidth: maxLineWidth,
-        stroke = textTheme.stroke,
-        lineWidth = textTheme.lineWidth,
-        whiteSpace = textTheme.whiteSpace,
-        suffixPosition = textTheme.suffixPosition
-      } = attribute,
-      lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
-    if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
-    if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
-      const bbox = this.cache.layoutData.bbox;
-      return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        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;
     }
-    const textMeasure = application.graphicUtil.textMeasure,
-      layoutData = new CanvasTextLayout(fontFamily, {
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        fontFamily: fontFamily
-      }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth, suffixPosition),
-      {
-        bbox: bbox
-      } = layoutData;
+    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, _c;
+    var _a, _b;
     const textTheme = this.getGraphicTheme(),
       textMeasure = application.graphicUtil.textMeasure;
     let width;
     const attribute = this.attribute,
-      {
-        ignoreBuf = textTheme.ignoreBuf
-      } = attribute,
-      buf = ignoreBuf ? 0 : 2,
       {
         maxLineWidth = textTheme.maxLineWidth,
         ellipsis = textTheme.ellipsis,
@@ -12107,14 +12435,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 => {
@@ -12162,6 +12490,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);
@@ -12176,6 +12513,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,
@@ -12254,7 +12597,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;
         }
@@ -12268,7 +12614,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);
@@ -12287,13 +12636,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;
@@ -13503,7 +13858,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;
@@ -13726,12 +14085,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) {
@@ -13754,7 +14119,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;
   }
@@ -14028,1127 +14393,841 @@ class RichText extends Graphic {
         l.calcOffset(offsetSize, !1);
       });
     }
-    this._frameCache = frame;
-  }
-  clone() {
-    return new RichText(Object.assign({}, this.attribute));
-  }
-  setStage(stage, layer) {
-    super.setStage(stage, layer);
-    this.getFrameCache().icons.forEach(icon => {
-      icon.setStage(stage, layer);
-    });
-  }
-  bindIconEvent() {
-    this.addEventListener("pointermove", e => {
-      const pickedIcon = this.pickIcon(e.global);
-      pickedIcon && pickedIcon === this._currentHoverIcon || (pickedIcon ? this.setAttribute("hoverIconId", pickedIcon.richtextId) : !pickedIcon && this._currentHoverIcon && this.setAttribute("hoverIconId", void 0));
-    }), this.addEventListener("pointerleave", e => {
-      this._currentHoverIcon && this.setAttribute("hoverIconId", void 0);
-    });
-  }
-  updateHoverIconState(pickedIcon) {
-    var _a, _b, _c, _d, _e;
-    pickedIcon ? (null === (_a = this._currentHoverIcon) || void 0 === _a || _a.setHoverState(!1), this._currentHoverIcon = pickedIcon, this._currentHoverIcon.setHoverState(!0), null === (_b = this.stage) || void 0 === _b || _b.setCursor(pickedIcon.attribute.cursor), null === (_c = this.stage) || void 0 === _c || _c.renderNextFrame()) : (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_d = this.stage) || void 0 === _d || _d.setCursor(), null === (_e = this.stage) || void 0 === _e || _e.renderNextFrame());
-  }
-  pickIcon(point) {
-    const frameCache = this.getFrameCache(),
-      {
-        e: x,
-        f: y
-      } = this.globalTransMatrix;
-    let pickIcon;
-    return frameCache.icons.forEach((icon, key) => {
-      var _a, _b;
-      const bounds = icon.AABBBounds.clone();
-      bounds.translate(icon._marginArray[3], icon._marginArray[0]), bounds.containsPoint({
-        x: point.x - x,
-        y: point.y - y
-      }) && (pickIcon = icon, pickIcon.globalX = (null !== (_a = pickIcon.attribute.x) && void 0 !== _a ? _a : 0) + x + icon._marginArray[3], pickIcon.globalY = (null !== (_b = pickIcon.attribute.y) && void 0 !== _b ? _b : 0) + y + icon._marginArray[0]);
-    }), pickIcon;
-  }
-  getNoWorkAnimateAttr() {
-    return RichText.NOWORK_ANIMATE_ATTR;
-  }
-}
-RichText.NOWORK_ANIMATE_ATTR = Object.assign({
-  ellipsis: 1,
-  wordBreak: 1,
-  verticalDirection: 1,
-  textAlign: 1,
-  textBaseline: 1,
-  textConfig: 1,
-  layoutDirection: 1
-}, NOWORK_ANIMATE_ATTR);
-function createRichText(attributes) {
-  return new RichText(attributes);
-}
-
-const PATH_UPDATE_TAG_KEY = ["path", "customPath", ...GRAPHIC_UPDATE_TAG_KEY];
-class Path extends Graphic {
-  constructor(params) {
-    super(params), this.type = "path", this.numberType = PATH_NUMBER_TYPE;
-  }
-  get pathShape() {
-    return this.tryUpdateAABBBounds(), this.getParsedPathShape();
-  }
-  isValid() {
-    return super.isValid() && this._isValid();
-  }
-  _isValid() {
-    const {
-      path: path
-    } = this.attribute;
-    return null != path && "" !== path;
-  }
-  getParsedPathShape() {
-    const pathTheme = this.getGraphicTheme();
-    if (!this.valid) return pathTheme.path;
-    const attribute = this.attribute;
-    return attribute.path instanceof CustomPath2D ? attribute.path : (isNil$1(this.cache) && this.doUpdatePathShape(), this.cache instanceof CustomPath2D ? this.cache : pathTheme.path);
-  }
-  getGraphicTheme() {
-    return getTheme(this).path;
-  }
-  updateAABBBounds(attribute, pathTheme, aabbBounds) {
-    if (!this.updatePathProxyAABBBounds(aabbBounds)) {
-      const pathShape = this.getParsedPathShape();
-      aabbBounds.union(pathShape.getBounds());
-    }
-    const {
-      tb1: tb1,
-      tb2: tb2
-    } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
-    const {
-      lineJoin = pathTheme.lineJoin
-    } = attribute;
-    return application.graphicService.transformAABBBounds(attribute, aabbBounds, pathTheme, "miter" === lineJoin, this), aabbBounds;
-  }
-  doUpdateAABBBounds(full) {
-    return this.doUpdatePathShape(), super.doUpdateAABBBounds(full);
-  }
-  doUpdatePathShape() {
-    const attribute = this.attribute;
-    isString$1(attribute.path, !0) ? this.cache = new CustomPath2D().fromString(attribute.path) : attribute.customPath && (this.cache = new CustomPath2D(), attribute.customPath(this.cache, this));
-  }
-  needUpdateTags(keys) {
-    return super.needUpdateTags(keys, PATH_UPDATE_TAG_KEY);
-  }
-  needUpdateTag(key) {
-    return super.needUpdateTag(key, PATH_UPDATE_TAG_KEY);
-  }
-  toCustomPath() {
-    return new CustomPath2D().fromCustomPath2D(this.getParsedPathShape(), 0, 0);
-  }
-  clone() {
-    return new Path(Object.assign({}, this.attribute));
-  }
-  getNoWorkAnimateAttr() {
-    return Path.NOWORK_ANIMATE_ATTR;
-  }
-}
-Path.NOWORK_ANIMATE_ATTR = Object.assign({
-  path: 1,
-  customPath: 1
-}, NOWORK_ANIMATE_ATTR);
-function createPath(attributes) {
-  return new Path(attributes);
-}
-
-const AREA_UPDATE_TAG_KEY = ["segments", "points", "curveType", "curveTension", ...GRAPHIC_UPDATE_TAG_KEY];
-class Area extends Graphic {
-  constructor(params) {
-    super(params), this.type = "area", this.numberType = AREA_NUMBER_TYPE;
-  }
-  isValid() {
-    return super.isValid() && this._isValid();
-  }
-  _isValid() {
-    if (this.pathProxy) return !0;
-    const {
-      points: points,
-      segments: segments
-    } = this.attribute;
-    return segments ? 0 !== segments.length : !!points && 0 !== points.length;
-  }
-  getGraphicTheme() {
-    return getTheme(this).area;
-  }
-  updateAABBBounds(attribute, areaTheme, aabbBounds) {
-    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
-    const {
-      lineJoin = areaTheme.lineJoin
-    } = attribute;
-    return application.graphicService.transformAABBBounds(attribute, aabbBounds, areaTheme, "miter" === lineJoin, this), aabbBounds;
-  }
-  updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds, graphic) {
-    const {
-        points = areaTheme.points
-      } = attribute,
-      b = aabbBounds;
-    return points.forEach(p => {
-      var _a, _b;
-      b.add(p.x, p.y), b.add(null !== (_a = p.x1) && void 0 !== _a ? _a : p.x, null !== (_b = p.y1) && void 0 !== _b ? _b : p.y);
-    }), b;
-  }
-  updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds, graphic) {
-    const {
-        segments = areaTheme.segments
-      } = attribute,
-      b = aabbBounds;
-    return segments.forEach(s => {
-      s.points.forEach(p => {
-        var _a, _b;
-        b.add(p.x, p.y), b.add(null !== (_a = p.x1) && void 0 !== _a ? _a : p.x, null !== (_b = p.y1) && void 0 !== _b ? _b : p.y);
-      });
-    }), b;
-  }
-  _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {
-    "points" === key && (nextAttributes.points = pointsInterpolation(lastStepVal, nextStepVal, ratio));
-  }
-  needUpdateTags(keys) {
-    return super.needUpdateTags(keys, AREA_UPDATE_TAG_KEY);
-  }
-  needUpdateTag(key) {
-    return super.needUpdateTag(key, AREA_UPDATE_TAG_KEY);
-  }
-  toCustomPath() {
-    const path = new CustomPath2D(),
-      attribute = this.attribute,
-      segments = attribute.segments,
-      parsePoints = points => {
-        if (points && points.length) {
-          let isFirst = !0;
-          const basePoints = [];
-          if (points.forEach(point => {
-            var _a, _b;
-            !1 !== point.defined && (isFirst ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y), basePoints.push({
-              x: null !== (_a = point.x1) && void 0 !== _a ? _a : point.x,
-              y: null !== (_b = point.y1) && void 0 !== _b ? _b : point.y
-            }), isFirst = !1);
-          }), basePoints.length) {
-            for (let i = basePoints.length - 1; i >= 0; i--) path.lineTo(basePoints[i].x, basePoints[i].y);
-            path.closePath();
-          }
-        }
-      };
-    return attribute.points ? parsePoints(attribute.points) : segments && segments.length && segments.forEach(seg => {
-      parsePoints(seg.points);
-    }), path;
+    this._frameCache = frame;
   }
   clone() {
-    return new Area(Object.assign({}, this.attribute));
+    return new RichText(Object.assign({}, this.attribute));
+  }
+  setStage(stage, layer) {
+    super.setStage(stage, layer);
+    this.getFrameCache().icons.forEach(icon => {
+      icon.setStage(stage, layer);
+    });
+  }
+  bindIconEvent() {
+    this.addEventListener("pointermove", e => {
+      const pickedIcon = this.pickIcon(e.global);
+      pickedIcon && pickedIcon === this._currentHoverIcon || (pickedIcon ? this.setAttribute("hoverIconId", pickedIcon.richtextId) : !pickedIcon && this._currentHoverIcon && this.setAttribute("hoverIconId", void 0));
+    }), this.addEventListener("pointerleave", e => {
+      this._currentHoverIcon && this.setAttribute("hoverIconId", void 0);
+    });
+  }
+  updateHoverIconState(pickedIcon) {
+    var _a, _b, _c, _d, _e;
+    pickedIcon ? (null === (_a = this._currentHoverIcon) || void 0 === _a || _a.setHoverState(!1), this._currentHoverIcon = pickedIcon, this._currentHoverIcon.setHoverState(!0), null === (_b = this.stage) || void 0 === _b || _b.setCursor(pickedIcon.attribute.cursor), null === (_c = this.stage) || void 0 === _c || _c.renderNextFrame()) : (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_d = this.stage) || void 0 === _d || _d.setCursor(), null === (_e = this.stage) || void 0 === _e || _e.renderNextFrame());
+  }
+  pickIcon(point) {
+    const frameCache = this.getFrameCache(),
+      {
+        e: x,
+        f: y
+      } = this.globalTransMatrix;
+    let pickIcon;
+    return frameCache.icons.forEach((icon, key) => {
+      var _a, _b;
+      const bounds = icon.AABBBounds.clone();
+      bounds.translate(icon._marginArray[3], icon._marginArray[0]), bounds.containsPoint({
+        x: point.x - x,
+        y: point.y - y
+      }) && (pickIcon = icon, pickIcon.globalX = (null !== (_a = pickIcon.attribute.x) && void 0 !== _a ? _a : 0) + x + icon._marginArray[3], pickIcon.globalY = (null !== (_b = pickIcon.attribute.y) && void 0 !== _b ? _b : 0) + y + icon._marginArray[0]);
+    }), pickIcon;
   }
   getNoWorkAnimateAttr() {
-    return Area.NOWORK_ANIMATE_ATTR;
+    return RichText.NOWORK_ANIMATE_ATTR;
   }
 }
-Area.NOWORK_ANIMATE_ATTR = Object.assign({
-  segments: 1,
-  curveType: 1
+RichText.NOWORK_ANIMATE_ATTR = Object.assign({
+  ellipsis: 1,
+  wordBreak: 1,
+  verticalDirection: 1,
+  textAlign: 1,
+  textBaseline: 1,
+  textConfig: 1,
+  layoutDirection: 1
 }, NOWORK_ANIMATE_ATTR);
-function createArea(attributes) {
-  return new Area(attributes);
+function createRichText(attributes) {
+  return new RichText(attributes);
 }
 
-const ARC_UPDATE_TAG_KEY = ["innerRadius", "outerRadius", "startAngle", "endAngle", "cornerRadius", "padAngle", "padRadius", "cap", ...GRAPHIC_UPDATE_TAG_KEY];
-class Arc extends Graphic {
+const PATH_UPDATE_TAG_KEY = ["path", "customPath", ...GRAPHIC_UPDATE_TAG_KEY];
+class Path extends Graphic {
   constructor(params) {
-    super(params), this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
+    super(params), this.type = "path", this.numberType = PATH_NUMBER_TYPE;
+  }
+  get pathShape() {
+    return this.tryUpdateAABBBounds(), this.getParsedPathShape();
   }
   isValid() {
     return super.isValid() && this._isValid();
   }
   _isValid() {
     const {
-      startAngle: startAngle,
-      endAngle: endAngle,
-      outerRadius: outerRadius,
-      innerRadius: innerRadius
-    } = this.attribute;
-    return this._validNumber(startAngle) && this._validNumber(endAngle) && this._validNumber(outerRadius) && this._validNumber(innerRadius);
-  }
-  getParsedCornerRadius() {
-    const arcTheme = this.getGraphicTheme(),
-      {
-        cornerRadius = arcTheme.cornerRadius,
-        innerPadding = arcTheme.innerPadding,
-        outerPadding = arcTheme.outerPadding
-      } = this.attribute;
-    let {
-      outerRadius = arcTheme.outerRadius,
-      innerRadius = arcTheme.innerRadius
-    } = this.attribute;
-    if (outerRadius += outerPadding, innerRadius -= innerPadding, 0 === cornerRadius || "0%" === cornerRadius) return 0;
-    const deltaRadius = Math.abs(outerRadius - innerRadius),
-      parseCR = cornerRadius => Math.min(isNumber$1(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
-    if (isArray$1(cornerRadius)) {
-      const crList = cornerRadius.map(cr => parseCR(cr) || 0);
-      return 0 === crList.length ? [crList[0], crList[0], crList[0], crList[0]] : 2 === crList.length ? [crList[0], crList[1], crList[0], crList[1]] : (3 === crList.length && crList.push(0), crList);
-    }
-    return parseCR(cornerRadius);
-  }
-  getParsedAngle() {
-    const arcTheme = this.getGraphicTheme();
-    let {
-      startAngle = arcTheme.startAngle,
-      endAngle = arcTheme.endAngle
+      path: path
     } = this.attribute;
-    const {
-        cap = arcTheme.cap
-      } = this.attribute,
-      sign = endAngle - startAngle >= 0 ? 1 : -1,
-      deltaAngle = endAngle - startAngle;
-    if (startAngle = clampAngleByRadian(startAngle), endAngle = startAngle + deltaAngle, cap && abs(deltaAngle) < pi2 - epsilon) {
-      let startCap = 1,
-        endCap = 1;
-      cap.length && (startCap = Number(cap[0]), endCap = Number(cap[1]));
-      let {
-        outerRadius = arcTheme.outerRadius,
-        innerRadius = arcTheme.innerRadius
-      } = this.attribute;
-      const {
-        outerPadding = arcTheme.outerPadding,
-        innerPadding = arcTheme.innerPadding
-      } = this.attribute;
-      outerRadius += outerPadding, innerRadius -= innerPadding;
-      const capWidth = Math.abs(outerRadius - innerRadius) / 2,
-        capAngle = capWidth / outerRadius;
-      if (capWidth > epsilon && outerRadius > epsilon) return {
-        startAngle: startAngle - sign * capAngle * startCap,
-        endAngle: endAngle + sign * capAngle * endCap,
-        sc: sign * capAngle * startCap,
-        ec: sign * capAngle * endCap
-      };
-    }
-    return {
-      startAngle: startAngle,
-      endAngle: endAngle
-    };
+    return null != path && "" !== path;
   }
-  getParsePadAngle(startAngle, endAngle) {
-    const arcTheme = this.getGraphicTheme(),
-      {
-        innerPadding = arcTheme.innerPadding,
-        outerPadding = arcTheme.outerPadding,
-        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
-    };
+  getParsedPathShape() {
+    const pathTheme = this.getGraphicTheme();
+    if (!this.valid) return pathTheme.path;
+    const attribute = this.attribute;
+    return attribute.path instanceof CustomPath2D ? attribute.path : (isNil$1(this.cache) && this.doUpdatePathShape(), this.cache instanceof CustomPath2D ? this.cache : pathTheme.path);
   }
   getGraphicTheme() {
-    return getTheme(this).arc;
+    return getTheme(this).path;
   }
-  updateAABBBounds(attribute, arcTheme, aabbBounds, full) {
-    this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds) : this.updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds));
+  updateAABBBounds(attribute, pathTheme, aabbBounds) {
+    if (!this.updatePathProxyAABBBounds(aabbBounds)) {
+      const pathShape = this.getParsedPathShape();
+      aabbBounds.union(pathShape.getBounds());
+    }
     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;
+    updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
     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
+      lineJoin = pathTheme.lineJoin
     } = 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;
+    return application.graphicService.transformAABBBounds(attribute, aabbBounds, pathTheme, "miter" === lineJoin, this), aabbBounds;
   }
-  clone() {
-    return new Arc(Object.assign({}, this.attribute));
+  doUpdateAABBBounds(full) {
+    return this.doUpdatePathShape(), super.doUpdateAABBBounds(full);
   }
-  getNoWorkAnimateAttr() {
-    return Arc.NOWORK_ANIMATE_ATTR;
+  doUpdatePathShape() {
+    const attribute = this.attribute;
+    isString$1(attribute.path, !0) ? this.cache = new CustomPath2D().fromString(attribute.path) : attribute.customPath && (this.cache = new CustomPath2D(), attribute.customPath(this.cache, this));
   }
-}
-Arc.NOWORK_ANIMATE_ATTR = Object.assign({
-  cap: 1
-}, NOWORK_ANIMATE_ATTR);
-function createArc(attributes) {
-  return new Arc(attributes);
-}
-
-class Arc3d extends Arc {
-  constructor(params) {
-    super(params), this.type = "arc3d", this.numberType = ARC3D_NUMBER_TYPE;
+  needUpdateTags(keys) {
+    return super.needUpdateTags(keys, PATH_UPDATE_TAG_KEY);
   }
-  updateAABBBounds(attribute, arcTheme, aabbBounds) {
-    const stage = this.stage;
-    if (!stage || !stage.camera) return aabbBounds;
-    const {
-        outerRadius = arcTheme.outerRadius,
-        height = 0
-      } = attribute,
-      r = outerRadius + height;
-    return aabbBounds.setValue(-r, -r, r, r), application.graphicService.updateTempAABBBounds(aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, arcTheme, !1, this), aabbBounds;
+  needUpdateTag(key) {
+    return super.needUpdateTag(key, PATH_UPDATE_TAG_KEY);
+  }
+  toCustomPath() {
+    return new CustomPath2D().fromCustomPath2D(this.getParsedPathShape(), 0, 0);
+  }
+  clone() {
+    return new Path(Object.assign({}, this.attribute));
   }
   getNoWorkAnimateAttr() {
-    return Arc3d.NOWORK_ANIMATE_ATTR;
+    return Path.NOWORK_ANIMATE_ATTR;
   }
 }
-Arc3d.NOWORK_ANIMATE_ATTR = Object.assign({
-  cap: 1
+Path.NOWORK_ANIMATE_ATTR = Object.assign({
+  path: 1,
+  customPath: 1
 }, NOWORK_ANIMATE_ATTR);
-function createArc3d(attributes) {
-  return new Arc3d(attributes);
+function createPath(attributes) {
+  return new Path(attributes);
 }
 
-const POLYGON_UPDATE_TAG_KEY = ["points", "cornerRadius", ...GRAPHIC_UPDATE_TAG_KEY];
-class Polygon extends Graphic {
+const AREA_UPDATE_TAG_KEY = ["segments", "points", "curveType", "curveTension", ...GRAPHIC_UPDATE_TAG_KEY];
+class Area extends Graphic {
   constructor(params) {
-    super(params), this.type = "polygon", this.numberType = POLYGON_NUMBER_TYPE;
+    super(params), this.type = "area", this.numberType = AREA_NUMBER_TYPE;
   }
   isValid() {
     return super.isValid() && this._isValid();
   }
   _isValid() {
+    if (this.pathProxy) return !0;
     const {
-      points: points
+      points: points,
+      segments: segments
     } = this.attribute;
-    return points && points.length >= 2;
+    return segments ? 0 !== segments.length : !!points && 0 !== points.length;
   }
   getGraphicTheme() {
-    return getTheme(this).polygon;
+    return getTheme(this).area;
   }
-  updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-    this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
+  updateAABBBounds(attribute, areaTheme, aabbBounds) {
+    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
     const {
-      lineJoin = polygonTheme.lineJoin
+      lineJoin = areaTheme.lineJoin
     } = attribute;
-    return application.graphicService.transformAABBBounds(attribute, aabbBounds, polygonTheme, "miter" === lineJoin, this), aabbBounds;
+    return application.graphicService.transformAABBBounds(attribute, aabbBounds, areaTheme, "miter" === lineJoin, this), aabbBounds;
   }
-  updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds) {
+  updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds, graphic) {
     const {
-      points = polygonTheme.points
-    } = attribute;
+        points = areaTheme.points
+      } = attribute,
+      b = aabbBounds;
     return points.forEach(p => {
-      aabbBounds.add(p.x, p.y);
-    }), aabbBounds;
+      var _a, _b;
+      b.add(p.x, p.y), b.add(null !== (_a = p.x1) && void 0 !== _a ? _a : p.x, null !== (_b = p.y1) && void 0 !== _b ? _b : p.y);
+    }), b;
+  }
+  updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds, graphic) {
+    const {
+        segments = areaTheme.segments
+      } = attribute,
+      b = aabbBounds;
+    return segments.forEach(s => {
+      s.points.forEach(p => {
+        var _a, _b;
+        b.add(p.x, p.y), b.add(null !== (_a = p.x1) && void 0 !== _a ? _a : p.x, null !== (_b = p.y1) && void 0 !== _b ? _b : p.y);
+      });
+    }), b;
   }
   _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {
     "points" === key && (nextAttributes.points = pointsInterpolation(lastStepVal, nextStepVal, ratio));
   }
   needUpdateTags(keys) {
-    return super.needUpdateTags(keys, POLYGON_UPDATE_TAG_KEY);
+    return super.needUpdateTags(keys, AREA_UPDATE_TAG_KEY);
   }
   needUpdateTag(key) {
-    return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
+    return super.needUpdateTag(key, AREA_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;
+    const path = new CustomPath2D(),
+      attribute = this.attribute,
+      segments = attribute.segments,
+      parsePoints = points => {
+        if (points && points.length) {
+          let isFirst = !0;
+          const basePoints = [];
+          if (points.forEach(point => {
+            var _a, _b;
+            !1 !== point.defined && (isFirst ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y), basePoints.push({
+              x: null !== (_a = point.x1) && void 0 !== _a ? _a : point.x,
+              y: null !== (_b = point.y1) && void 0 !== _b ? _b : point.y
+            }), isFirst = !1);
+          }), basePoints.length) {
+            for (let i = basePoints.length - 1; i >= 0; i--) path.lineTo(basePoints[i].x, basePoints[i].y);
+            path.closePath();
+          }
+        }
+      };
+    return attribute.points ? parsePoints(attribute.points) : segments && segments.length && segments.forEach(seg => {
+      parsePoints(seg.points);
+    }), path;
   }
   clone() {
-    return new Polygon(Object.assign({}, this.attribute));
+    return new Area(Object.assign({}, this.attribute));
   }
   getNoWorkAnimateAttr() {
-    return Polygon.NOWORK_ANIMATE_ATTR;
+    return Area.NOWORK_ANIMATE_ATTR;
   }
 }
-Polygon.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
-function createPolygon(attributes) {
-  return new Polygon(attributes);
+Area.NOWORK_ANIMATE_ATTR = Object.assign({
+  segments: 1,
+  curveType: 1
+}, NOWORK_ANIMATE_ATTR);
+function createArea(attributes) {
+  return new Area(attributes);
 }
 
-class Pyramid3d extends Polygon {
+const ARC_UPDATE_TAG_KEY = ["innerRadius", "outerRadius", "startAngle", "endAngle", "cornerRadius", "padAngle", "padRadius", "cap", ...GRAPHIC_UPDATE_TAG_KEY];
+class Arc extends Graphic {
   constructor(params) {
-    super(params), this.type = "pyramid3d", this.numberType = PYRAMID3D_NUMBER_TYPE;
+    super(params), this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
   }
-  updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-    const stage = this.stage;
-    if (!stage || !stage.camera) return aabbBounds;
-    return this.findFace().vertices.forEach(v => {
-      const x = v[0],
-        y = v[1];
-      aabbBounds.add(x, y);
-    }), application.graphicService.updateTempAABBBounds(aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, polygonTheme, !1, this), aabbBounds;
+  isValid() {
+    return super.isValid() && this._isValid();
   }
-  findFace() {
+  _isValid() {
     const {
-        points: points
-      } = this.attribute,
-      kList = points.map((p, i) => {
-        const p1 = 3 === i ? points[0] : points[i + 1],
-          dx = p.x - p1.x;
-        return 0 === dx ? 0 : (p.y - p1.y) / dx;
-      }),
-      pointsMap = points.map(p => ({
-        p: p,
-        d: 0
-      }));
-    let find = !1,
-      maxD = 0;
-    for (let i = 0; i < kList.length - 1; i++) {
-      for (let j = i + 1; j < kList.length; j++) {
-        if (kList[i] === kList[j]) {
-          find = !0;
-          const d1 = PointService.distancePP(pointsMap[i].p, pointsMap[i + 1].p);
-          pointsMap[i].d = d1, pointsMap[i + 1].d = d1, maxD = max(maxD, d1);
-          const d2 = PointService.distancePP(pointsMap[j].p, pointsMap[j + 1].p);
-          pointsMap[j].d = d2, pointsMap[j + 1].d = d2, maxD = max(maxD, d2);
-        }
-        if (find) break;
-      }
-      if (find) break;
+      startAngle: startAngle,
+      endAngle: endAngle,
+      outerRadius: outerRadius,
+      innerRadius: innerRadius
+    } = this.attribute;
+    return this._validNumber(startAngle) && this._validNumber(endAngle) && this._validNumber(outerRadius) && this._validNumber(innerRadius);
+  }
+  getParsedCornerRadius() {
+    const arcTheme = this.getGraphicTheme(),
+      {
+        cornerRadius = arcTheme.cornerRadius,
+        innerPadding = arcTheme.innerPadding,
+        outerPadding = arcTheme.outerPadding
+      } = this.attribute;
+    let {
+      outerRadius = arcTheme.outerRadius,
+      innerRadius = arcTheme.innerRadius
+    } = this.attribute;
+    if (outerRadius += outerPadding, innerRadius -= innerPadding, 0 === cornerRadius || "0%" === cornerRadius) return 0;
+    const deltaRadius = Math.abs(outerRadius - innerRadius),
+      parseCR = cornerRadius => Math.min(isNumber$1(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
+    if (isArray$1(cornerRadius)) {
+      const crList = cornerRadius.map(cr => parseCR(cr) || 0);
+      return 0 === crList.length ? [crList[0], crList[0], crList[0], crList[0]] : 2 === crList.length ? [crList[0], crList[1], crList[0], crList[1]] : (3 === crList.length && crList.push(0), crList);
     }
-    for (let i = points.length - 1; i >= 0; i--) {
-      const p = points[i];
-      pointsMap.unshift({
-        p: p,
-        d: 0
-      });
+    return parseCR(cornerRadius);
+  }
+  getParsedAngle() {
+    const arcTheme = this.getGraphicTheme();
+    let {
+      startAngle = arcTheme.startAngle,
+      endAngle = arcTheme.endAngle
+    } = this.attribute;
+    const {
+        cap = arcTheme.cap
+      } = this.attribute,
+      sign = endAngle - startAngle >= 0 ? 1 : -1,
+      deltaAngle = endAngle - startAngle;
+    if (startAngle = clampAngleByRadian(startAngle), endAngle = startAngle + deltaAngle, cap && abs(deltaAngle) < pi2 - epsilon) {
+      let startCap = 1,
+        endCap = 1;
+      cap.length && (startCap = Number(cap[0]), endCap = Number(cap[1]));
+      let {
+        outerRadius = arcTheme.outerRadius,
+        innerRadius = arcTheme.innerRadius
+      } = this.attribute;
+      const {
+        outerPadding = arcTheme.outerPadding,
+        innerPadding = arcTheme.innerPadding
+      } = this.attribute;
+      outerRadius += outerPadding, innerRadius -= innerPadding;
+      const capWidth = Math.abs(outerRadius - innerRadius) / 2,
+        capAngle = capWidth / outerRadius;
+      if (capWidth > epsilon && outerRadius > epsilon) return {
+        startAngle: startAngle - sign * capAngle * startCap,
+        endAngle: endAngle + sign * capAngle * endCap,
+        sc: sign * capAngle * startCap,
+        ec: sign * capAngle * endCap
+      };
     }
-    for (let i = 0; i < points.length; i++) {
-      const delta = (maxD - pointsMap[i + points.length].d) / 2;
-      pointsMap[i].d += delta, pointsMap[i + points.length].d += delta;
+    return {
+      startAngle: startAngle,
+      endAngle: endAngle
+    };
+  }
+  getParsePadAngle(startAngle, endAngle) {
+    const arcTheme = this.getGraphicTheme(),
+      {
+        innerPadding = arcTheme.innerPadding,
+        outerPadding = arcTheme.outerPadding,
+        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
+      };
     }
-    const faces = {
-      polygons: [],
-      vertices: [],
-      edges: []
+    return {
+      outerStartAngle: outerStartAngle,
+      outerEndAngle: outerEndAngle,
+      innerStartAngle: innerStartAngle,
+      innerEndAngle: innerEndAngle,
+      innerDeltaAngle: innerDeltaAngle,
+      outerDeltaAngle: outerDeltaAngle
     };
-    return pointsMap.forEach(p => {
-      faces.vertices.push([p.p.x, p.p.y, p.d]);
-    }), faces.polygons.push({
-      polygon: [0, 4, 5, 1],
-      normal: [0, -1, 0]
-    }), faces.polygons.push({
-      polygon: [7, 6, 2, 3],
-      normal: [0, 1, 0]
-    }), faces.polygons.push({
-      polygon: [0, 4, 7, 3],
-      normal: [-1, 0, 0]
-    }), faces.polygons.push({
-      polygon: [1, 5, 6, 2],
-      normal: [1, 0, 0]
-    }), faces.polygons.push({
-      polygon: [0, 1, 2, 3],
-      normal: [0, 0, -1]
-    }), faces.polygons.push({
-      polygon: [4, 5, 6, 7],
-      normal: [0, 0, 1]
-    }), faces.edges = [[0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [3, 7], [1, 5], [2, 6]], faces;
   }
-  _isValid() {
-    return super._isValid() && 4 === this.attribute.points.length;
+  getGraphicTheme() {
+    return getTheme(this).arc;
   }
-  getNoWorkAnimateAttr() {
-    return Pyramid3d.NOWORK_ANIMATE_ATTR;
+  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;
   }
-}
-Pyramid3d.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
-function createPyramid3d(attributes) {
-  return new Pyramid3d(attributes);
-}
-
-class ShadowRoot extends Group {
-  constructor(graphic) {
-    super({
-      x: 0,
-      y: 0
-    }), this.type = "shadowroot", this.shadowHost = graphic;
+  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;
   }
-  clearUpdateBoundTag() {
-    super.clearUpdateBoundTag(), this.shadowHost && this.shadowHost.clearUpdateBoundTag();
+  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;
   }
-  addUpdateBoundTag() {
-    super.addUpdateBoundTag(), this.shadowHost && this.shadowHost.addUpdateBoundTag();
+  needUpdateTags(keys) {
+    return super.needUpdateTags(keys, ARC_UPDATE_TAG_KEY);
   }
-  addUpdateShapeAndBoundsTag() {
-    super.addUpdateShapeAndBoundsTag(), this.shadowHost && this.shadowHost.addUpdateBoundTag();
+  needUpdateTag(key) {
+    return super.needUpdateTag(key, ARC_UPDATE_TAG_KEY);
   }
-  tryUpdateGlobalTransMatrix() {
-    let clearTag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
-    if (this.shouldUpdateGlobalMatrix()) {
-      const m = this.transMatrix;
-      this._globalTransMatrix ? this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f) : this._globalTransMatrix = m.clone(), this.doUpdateGlobalMatrix(), clearTag && this.clearUpdateGlobalPositionTag();
+  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;
     }
-    return this._globalTransMatrix;
-  }
-  doUpdateGlobalMatrix() {
-    if (this.shadowHost) {
-      const parentMatrix = this.shadowHost.globalTransMatrix;
-      this._globalTransMatrix.multiply(parentMatrix.a, parentMatrix.b, parentMatrix.c, parentMatrix.d, parentMatrix.e, parentMatrix.f);
+    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;
   }
-  tryUpdateGlobalAABBBounds() {
-    return this._globalAABBBounds ? this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2) : this._globalAABBBounds = this._AABBBounds.clone(), this.shadowHost && this._globalAABBBounds.transformWithMatrix(this.shadowHost.globalTransMatrix), this._globalAABBBounds;
-  }
-}
-function createShadowRoot(graphic) {
-  return new ShadowRoot(graphic);
-}
-
-class GraphicCreator {
-  constructor() {
-    this.store = new Map();
-  }
-  RegisterGraphicCreator(name, cb) {
-    this.store.set(name, cb), this[name] = cb;
+  clone() {
+    return new Arc(Object.assign({}, this.attribute));
   }
-  CreateGraphic(name, params) {
-    const cb = this.store.get(name);
-    return cb ? cb(params) : null;
+  getNoWorkAnimateAttr() {
+    return Arc.NOWORK_ANIMATE_ATTR;
   }
 }
-const graphicCreator = new GraphicCreator();
-
-let text, richText;
-function getTextBounds(params) {
-  return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
-}
-function getRichTextBounds(params) {
-  return richText || (richText = graphicCreator.CreateGraphic("richtext", {})), richText.setAttributes(params), richText.AABBBounds;
+Arc.NOWORK_ANIMATE_ATTR = Object.assign({
+  cap: 1
+}, NOWORK_ANIMATE_ATTR);
+function createArc(attributes) {
+  return new Arc(attributes);
 }
 
-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;
+class Arc3d extends Arc {
+  constructor(params) {
+    super(params), this.type = "arc3d", this.numberType = ARC3D_NUMBER_TYPE;
   }
-  valid(graphic, defaultAttribute, fillCb, strokeCb) {
+  updateAABBBounds(attribute, arcTheme, aabbBounds) {
+    const stage = this.stage;
+    if (!stage || !stage.camera) return aabbBounds;
     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
-    };
+        outerRadius = arcTheme.outerRadius,
+        height = 0
+      } = attribute,
+      r = outerRadius + height;
+    return aabbBounds.setValue(-r, -r, r, r), application.graphicService.updateTempAABBBounds(aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, arcTheme, !1, this), aabbBounds;
   }
-  transform(graphic, graphicAttribute, context) {
-    let use3dMatrixIn3dMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-    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);
-    }
-    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;
+  getNoWorkAnimateAttr() {
+    return Arc3d.NOWORK_ANIMATE_ATTR;
   }
-  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);
-    }
+}
+Arc3d.NOWORK_ANIMATE_ATTR = Object.assign({
+  cap: 1
+}, NOWORK_ANIMATE_ATTR);
+function createArc3d(attributes) {
+  return new Arc3d(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;
   }
-  restoreTransformUseContext2d(graphic, graphicAttribute, z, context) {
-    this.camera && (context.camera = this.camera);
+  isValid() {
+    return super.isValid() && this._isValid();
   }
-  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();
+  _isValid() {
+    const {
+      points: points
+    } = this.attribute;
+    return points && points.length >= 2;
   }
-  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
+  getGraphicTheme() {
+    return getTheme(this).polygon;
+  }
+  updateAABBBounds(attribute, polygonTheme, aabbBounds) {
+    this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
     const {
-      context: context
-    } = drawContext;
-    if (!context) return;
+      lineJoin = polygonTheme.lineJoin
+    } = attribute;
+    return application.graphicService.transformAABBBounds(attribute, aabbBounds, polygonTheme, "miter" === lineJoin, this), aabbBounds;
+  }
+  updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds) {
     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();
+      points = polygonTheme.points
+    } = 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);
+}
 
-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;
+class Pyramid3d extends Polygon {
+  constructor(params) {
+    super(params), this.type = "pyramid3d", this.numberType = PYRAMID3D_NUMBER_TYPE;
+  }
+  updateAABBBounds(attribute, polygonTheme, aabbBounds) {
+    const stage = this.stage;
+    if (!stage || !stage.camera) return aabbBounds;
+    return this.findFace().vertices.forEach(v => {
+      const x = v[0],
+        y = v[1];
+      aabbBounds.add(x, y);
+    }), application.graphicService.updateTempAABBBounds(aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, polygonTheme, !1, this), aabbBounds;
+  }
+  findFace() {
+    const {
+        points: points
+      } = this.attribute,
+      kList = points.map((p, i) => {
+        const p1 = 3 === i ? points[0] : points[i + 1],
+          dx = p.x - p1.x;
+        return 0 === dx ? 0 : (p.y - p1.y) / dx;
+      }),
+      pointsMap = points.map(p => ({
+        p: p,
+        d: 0
+      }));
+    let find = !1,
+      maxD = 0;
+    for (let i = 0; i < kList.length - 1; i++) {
+      for (let j = i + 1; j < kList.length; j++) {
+        if (kList[i] === kList[j]) {
+          find = !0;
+          const d1 = PointService.distancePP(pointsMap[i].p, pointsMap[i + 1].p);
+          pointsMap[i].d = d1, pointsMap[i + 1].d = d1, maxD = max(maxD, d1);
+          const d2 = PointService.distancePP(pointsMap[j].p, pointsMap[j + 1].p);
+          pointsMap[j].d = d2, pointsMap[j + 1].d = d2, maxD = max(maxD, d2);
+        }
+        if (find) break;
+      }
+      if (find) break;
+    }
+    for (let i = points.length - 1; i >= 0; i--) {
+      const p = points[i];
+      pointsMap.unshift({
+        p: p,
+        d: 0
+      });
+    }
+    for (let i = 0; i < points.length; i++) {
+      const delta = (maxD - pointsMap[i + points.length].d) / 2;
+      pointsMap[i].d += delta, pointsMap[i + points.length].d += delta;
+    }
+    const faces = {
+      polygons: [],
+      vertices: [],
+      edges: []
+    };
+    return pointsMap.forEach(p => {
+      faces.vertices.push([p.p.x, p.p.y, p.d]);
+    }), faces.polygons.push({
+      polygon: [0, 4, 5, 1],
+      normal: [0, -1, 0]
+    }), faces.polygons.push({
+      polygon: [7, 6, 2, 3],
+      normal: [0, 1, 0]
+    }), faces.polygons.push({
+      polygon: [0, 4, 7, 3],
+      normal: [-1, 0, 0]
+    }), faces.polygons.push({
+      polygon: [1, 5, 6, 2],
+      normal: [1, 0, 0]
+    }), faces.polygons.push({
+      polygon: [0, 1, 2, 3],
+      normal: [0, 0, -1]
+    }), faces.polygons.push({
+      polygon: [4, 5, 6, 7],
+      normal: [0, 0, 1]
+    }), faces.edges = [[0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [3, 7], [1, 5], [2, 6]], faces;
   }
-  function getAST() {
-    const ast = matchListing(matchDefinition);
-    return input.length > 0 && error("Invalid input not EOF"), ast;
+  _isValid() {
+    return super._isValid() && 4 === this.attribute.points.length;
   }
-  function matchDefinition() {
-    return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+  getNoWorkAnimateAttr() {
+    return Pyramid3d.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)
-      };
-    });
+}
+Pyramid3d.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
+function createPyramid3d(attributes) {
+  return new Pyramid3d(attributes);
+}
+
+class ShadowRoot extends Group {
+  constructor(graphic) {
+    super({
+      x: 0,
+      y: 0
+    }), this.type = "shadowroot", this.shadowHost = graphic;
   }
-  function matchLinearOrientation() {
-    return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+  clearUpdateBoundTag() {
+    super.clearUpdateBoundTag(), this.shadowHost && this.shadowHost.clearUpdateBoundTag();
   }
-  function matchConicalOrientation() {
-    return match("angular", tokens.fromAngleValue, 1);
+  addUpdateBoundTag() {
+    super.addUpdateBoundTag(), this.shadowHost && this.shadowHost.addUpdateBoundTag();
   }
-  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;
+  addUpdateShapeAndBoundsTag() {
+    super.addUpdateShapeAndBoundsTag(), this.shadowHost && this.shadowHost.addUpdateBoundTag();
   }
-  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
-        });
-      }
+  tryUpdateGlobalTransMatrix() {
+    let clearTag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
+    if (this.shouldUpdateGlobalMatrix()) {
+      const m = this.transMatrix;
+      this._globalTransMatrix ? this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f) : this._globalTransMatrix = m.clone(), this.doUpdateGlobalMatrix(), clearTag && this.clearUpdateGlobalPositionTag();
     }
-    return radialType;
-  }
-  function matchExtentKeyword() {
-    return match("extent-keyword", tokens.extentKeywords, 1);
+    return this._globalTransMatrix;
   }
-  function matchAtPosition() {
-    if (match("position", /^at/, 0)) {
-      const positioning = matchPositioning();
-      return positioning || error("Missing positioning value"), positioning;
+  doUpdateGlobalMatrix() {
+    if (this.shadowHost) {
+      const parentMatrix = this.shadowHost.globalTransMatrix;
+      this._globalTransMatrix.multiply(parentMatrix.a, parentMatrix.b, parentMatrix.c, parentMatrix.d, parentMatrix.e, parentMatrix.f);
     }
   }
-  function matchPositioning() {
-    const location = {
-      x: matchDistance(),
-      y: matchDistance()
-    };
-    if (location.x || location.y) return {
-      type: "position",
-      value: location
-    };
-  }
-  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;
-  }
-  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;
-  }
-  function matchDistance() {
-    return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
-  }
-  function matchLength() {
-    return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+  tryUpdateGlobalAABBBounds() {
+    return this._globalAABBBounds ? this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2) : this._globalAABBBounds = this._AABBBounds.clone(), this.shadowHost && this._globalAABBBounds.transformWithMatrix(this.shadowHost.globalTransMatrix), this._globalAABBBounds;
   }
-  function match(type, pattern, captureIndex) {
-    const captures = scan(pattern);
-    if (captures) return {
-      type: type,
-      value: captures[captureIndex]
-    };
+}
+function createShadowRoot(graphic) {
+  return new ShadowRoot(graphic);
+}
+
+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, richText;
+function getTextBounds(params) {
+  return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
+}
+function getRichTextBounds(params) {
+  return richText || (richText = graphicCreator.CreateGraphic("richtext", {})), richText.setAttributes(params), richText.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$1(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$1C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -15412,7 +15491,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,
@@ -15424,7 +15504,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({
@@ -15469,14 +15549,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;
@@ -15595,7 +15676,8 @@ class DefaultRectRenderContribution {
       scaleX = rectAttribute.scaleX,
       scaleY = rectAttribute.scaleY,
       x1: x1,
-      y1: y1
+      y1: y1,
+      keepStrokeScale = rectAttribute.keepStrokeScale
     } = rect.attribute;
     let {
       width: width,
@@ -15608,7 +15690,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;
@@ -15765,14 +15847,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;
@@ -17055,16 +17138,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 {
@@ -17084,79 +17159,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);
   }
@@ -17168,12 +17224,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,
@@ -17183,23 +17237,21 @@ let DefaultCanvasTextRender = class extends BaseRender {
       isMulti = !isNil$1(multiOption),
       w = isMulti ? multiOption.width : text.clipedWidth,
       offsetX = isMulti ? 0 : textDrawOffsetX(textAlign, w),
-      offsetY = textLayoutOffsetY(isMulti ? "alphabetic" : textBaseline, fontSize, fontSize),
       attribute = {
         lineWidth: 0,
         stroke: fill,
         opacity: opacity,
         strokeOpacity: fillOpacity
       };
-    let deltaY = isMulti ? -3 : 0;
     if (underline) {
-      attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
-      const dy = y + offsetY + fontSize + underlineOffset + deltaY;
-      context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
+      attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, anchorX, anchorY, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
+      const dy = anchorY + offsetUnderLineY + underlineOffset;
+      context.moveTo(anchorX + offsetX, dy, z), context.lineTo(anchorX + offsetX + w, dy, z), context.stroke();
     }
-    if (isMulti && (deltaY = -1), lineThrough) {
-      attribute.lineWidth = lineThrough, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.beginPath();
-      const dy = y + offsetY + fontSize / 2 + deltaY;
-      context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
+    if (lineThrough) {
+      attribute.lineWidth = lineThrough, context.setStrokeStyle(text, attribute, anchorX, anchorY, textAttribute), context.beginPath();
+      const dy = anchorY + offsetThroughLineY;
+      context.moveTo(anchorX + offsetX, dy, z), context.lineTo(anchorX + offsetX + w, dy, z), context.stroke();
     }
   }
 };
@@ -17602,7 +17654,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);
@@ -18636,6 +18691,42 @@ class AutoRenderPlugin {
   }
 }
 
+class AutoRefreshPlugin {
+  constructor() {
+    this.name = "AutoRefreshPlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.handleChange = graphic => {
+      graphic.glyphHost && (graphic = graphic.glyphHost), graphic.stage === this.pluginService.stage && null != graphic.stage && graphic.stage.renderNextFrame();
+    };
+  }
+  activate(context) {
+    this.pluginService = context, this.dpr = application.global.devicePixelRatio, this.refresh();
+  }
+  refresh() {
+    this._refreshByMediaQuery() || this._refreshByRaf();
+  }
+  _refreshByRaf() {
+    const raf = application.global.getRequestAnimationFrame();
+    this.rafId = raf(() => {
+      application.global.devicePixelRatio !== this.dpr && (this.dpr = application.global.devicePixelRatio, this.pluginService.stage.setDpr(this.dpr, !0)), this.refresh();
+    });
+  }
+  _refreshByMediaQuery() {
+    try {
+      const mqString = `(resolution: ${window.devicePixelRatio}dppx)`,
+        updatePixelRatio = () => {
+          window.devicePixelRatio !== this.dpr && (this.dpr = window.devicePixelRatio, this.pluginService.stage.setDpr(this.dpr, !0));
+        };
+      matchMedia(mqString).addEventListener("change", updatePixelRatio);
+    } catch (err) {
+      return !1;
+    }
+    return !0;
+  }
+  deactivate(context) {
+    const craf = application.global.getCancelAnimationFrame();
+    craf && this.rafId && craf(this.rafId);
+  }
+}
+
 class IncrementalAutoRenderPlugin {
   constructor() {
     this.name = "IncrementalAutoRenderPlugin", this.activeEvent = "onRegister", this.nextFrameRenderGroupSet = new Set(), this.willNextFrameRender = !1, this.nextUserParams = {}, this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
@@ -18812,7 +18903,7 @@ class Stage extends Group {
   constructor() {
     let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var _a;
-    super({}), this._onVisibleChange = visible => {
+    super({}), this.tickedBeforeRender = !0, this._onVisibleChange = visible => {
       if (!(this._skipRender < 0)) if (visible) {
         if (this.dirtyBounds) {
           const b = this.window.getViewBox();
@@ -18823,7 +18914,10 @@ class Stage extends Group {
     }, this.beforeRender = stage => {
       this._beforeRender && this._beforeRender(stage);
     }, this.afterRender = stage => {
-      this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null;
+      this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
+    }, this.afterTickCb = () => {
+      var _a;
+      this.tickedBeforeRender = !0, "performance" === (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) || "rendering" !== this.state && this.render();
     }, this.params = params, this.theme = new Theme(), this.hooks = {
       beforeRender: new SyncHook(["stage"]),
       afterRender: new SyncHook(["stage"])
@@ -18838,9 +18932,9 @@ class Stage extends Group {
       canvas: params.canvas
     }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
       main: !0
-    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
+    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
       background: this._background
-    });
+    }), this.ticker.on("afterTick", this.afterTickCb);
   }
   pauseRender() {
     let sr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
@@ -18973,6 +19067,14 @@ class Stage extends Group {
       this.pluginService.unRegister(plugin);
     }));
   }
+  enableAutoRefresh() {
+    this.autoRefresh || (this.autoRefresh = !0, this.pluginService.register(new AutoRefreshPlugin()));
+  }
+  disableAutoRefresh() {
+    this.autoRefresh && (this.autoRefresh = !1, this.pluginService.findPluginsByName("AutoRefreshPlugin").forEach(plugin => {
+      this.pluginService.unRegister(plugin);
+    }));
+  }
   enableIncrementalAutoRender() {
     this.increaseAutoRender || (this.increaseAutoRender = !0, this.pluginService.register(new IncrementalAutoRenderPlugin()));
   }
@@ -19061,7 +19163,7 @@ class Stage extends Group {
     if ("released" === this.releaseStatus) return;
     this.ticker.start(), this.timeline.resume();
     const state = this.state;
-    this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+    this.state = "rendering", this.tickedBeforeRender || this.ticker.trySyncTickStatus(), this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
   }
   combineLayersToWindow() {
     if ("harmony" === this.global.env) {
@@ -19167,7 +19269,7 @@ class Stage extends Group {
       layer.release();
     }), this.interactiveLayer && (this.interactiveLayer.forEachChildren(item => {
       item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-    }), this.interactiveLayer.release()), this.window.release(), this.ticker.remTimeline(this.timeline), this.renderService.renderTreeRoots = [];
+    }), this.interactiveLayer.release()), this.window.release(), this.ticker.remTimeline(this.timeline), this.ticker.removeListener("afterTick", this.afterTickCb), this.renderService.renderTreeRoots = [];
   }
   setStage(stage) {}
   dirty(b, matrix) {
@@ -19245,8 +19347,6 @@ function createStage(params) {
   return new Stage(params);
 }
 
-const strCommandMap = ["arc", "arcTo", "bezierCurveTo", "closePath", "ellipse", "lineTo", "moveTo", "quadraticCurveTo", "rect"];
-
 var __decorate$1f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
@@ -24159,7 +24259,7 @@ class Gesture extends EventEmitter {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     super(), this.cachedEvents = [], this.startPoints = [], this.processEvent = {}, this.throttleTimer = 0, this.emitThrottles = [], this.lastTapTarget = null, this.onStart = ev => {
-      this.reset(), this.startTime = clock.now();
+      this.cachedEvents = [], this.startPoints = [], this.reset(), this.startTime = clock.now();
       const {
         cachedEvents: cachedEvents,
         startPoints: startPoints
@@ -24179,7 +24279,7 @@ class Gesture extends EventEmitter {
       if (1 !== startPoints.length) this.startDistance = calcDistance(startPoints[0], startPoints[1]), this.center = getCenter([startPoints[0], startPoints[1]]);else {
         const event = cachedEvents[0];
         this.pressTimeout = setTimeout(() => {
-          event.direction = "none", event.deltaX = 0, event.deltaY = 0, event.points = startPoints, this.triggerStartEvent("press", event), this.triggerEvent("press", event), this.eventType = "press", this.direction = "none";
+          event.direction = "none", event.deltaX = 0, event.deltaY = 0, event.points = startPoints, this.triggerStartEvent("press", event), this.triggerEvent("press", event), this.eventType = "press", this.direction = "none", this.pressTimeout = null;
         }, this.config.press.time);
       }
     }, this.onMove = ev => {
@@ -24242,10 +24342,10 @@ class Gesture extends EventEmitter {
               lastMovePoint = this.lastMovePoint || startPoints[0],
               distance = calcDistance(prevMovePoint, lastMovePoint),
               velocity = distance / intervalTime;
-            velocity > this.config.swipe.velocity && distance > this.config.swipe.threshold && (endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), this.triggerEvent("swipe", endEvent));
+            if (velocity > this.config.swipe.velocity && distance > this.config.swipe.threshold) return endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), this.triggerEvent("swipe", endEvent), this.cachedEvents = [], this.startPoints = [], void this.reset();
           }
         }
-        now - this.lastTapTime < this.config.tap.interval && ev.target === this.lastTapTarget ? this.tapCount++ : this.tapCount = 1, this.lastTapTime = now, this.lastTapTarget = ev.target, 1 === this.tapCount ? this.triggerEvent("tap", endEvent) : 2 === this.tapCount && (this.triggerEvent("doubletap", endEvent), this.tapCount = 0);
+        now - this.startTime < this.config.press.time && (now - this.lastTapTime < this.config.tap.interval && ev.target === this.lastTapTarget ? this.tapCount++ : this.tapCount = 1, this.lastTapTime = now, this.lastTapTarget = ev.target, 1 === this.tapCount ? this.triggerEvent("tap", endEvent) : 2 === this.tapCount && (this.triggerEvent("doubletap", endEvent), this.tapCount = 0));
       }
       for (let i = 0, len = cachedEvents.length; i < len; i++) if (cachedEvents[i].pointerId === endEvent.pointerId) {
         cachedEvents.splice(i, 1), startPoints.splice(i, 1);
@@ -24287,7 +24387,7 @@ class Gesture extends EventEmitter {
       startTime: startTime,
       startPoints: startPoints
     } = this;
-    if (eventType) return eventType;
+    if ("press" === eventType) return eventType;
     let type;
     return type = clock.now() - startTime > this.config.press.time && calcDistance(startPoints[0], point) < this.config.press.threshold ? "press" : "pan", this.eventType = type, type;
   }
@@ -24321,6 +24421,7 @@ class Gesture extends EventEmitter {
       emitThrottles: emitThrottles
     } = this;
     throttleTimer || (this.throttleTimer = application.global.getRequestAnimationFrame()(() => {
+      application.global.getCancelAnimationFrame()(this.throttleTimer), this.throttleTimer = null;
       for (let i = 0, len = emitThrottles.length; i < len; i++) {
         const {
           type: type,
@@ -24328,7 +24429,7 @@ class Gesture extends EventEmitter {
         } = emitThrottles[i];
         this.emitEvent(type, ev);
       }
-      this.throttleTimer = 0, this.emitThrottles.length = 0;
+      this.emitThrottles.length = 0;
     }));
   }
   triggerStartEvent(type, ev) {
@@ -24818,9 +24919,10 @@ let BrowserContext2d = class {
         lineJoin = defaultParams.lineJoin,
         lineDash = defaultParams.lineDash,
         lineCap = defaultParams.lineCap,
-        miterLimit = defaultParams.miterLimit
+        miterLimit = defaultParams.miterLimit,
+        keepStrokeScale = defaultParams.keepStrokeScale
       } = attribute;
-      _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+      _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
     }
   }
   setTextStyleWithoutAlignBaseline(params, defaultParams, z) {
@@ -25720,8 +25822,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;
   }
 }
@@ -25994,8 +26097,9 @@ class RectPickerBase {
     if (!onlyTranslate || rect.shadowRoot || isNumber$1(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
       if (picked) return !0;
       const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+        pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
+        keepStrokeScale = rectAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+      return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
     });else {
       const {
         fill = rectAttribute.fill,
@@ -26309,9 +26413,10 @@ let LynxContext2d = class extends BrowserContext2d {
         lineJoin = defaultParams.lineJoin,
         lineDash = defaultParams.lineDash,
         lineCap = defaultParams.lineCap,
-        miterLimit = defaultParams.miterLimit
+        miterLimit = defaultParams.miterLimit,
+        keepStrokeScale = defaultParams.keepStrokeScale
       } = attribute;
-      _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+      _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
     }
   }
   measureText(text) {
@@ -26939,9 +27044,10 @@ let TaroContext2d = class extends BrowserContext2d {
         lineJoin = defaultParams.lineJoin,
         lineDash = defaultParams.lineDash,
         lineCap = defaultParams.lineCap,
-        miterLimit = defaultParams.miterLimit
+        miterLimit = defaultParams.miterLimit,
+        keepStrokeScale = defaultParams.keepStrokeScale
       } = attribute;
-      _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params, offsetX, offsetY)), _context.setLineJoin(lineJoin), lineDash && _context.setLineDash(lineDash), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
+      _context.setGlobalAlpha(strokeOpacity * opacity), _context.setLineWidth(keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr)), _context.setStrokeStyle(createColor(this, stroke, params, offsetX, offsetY)), _context.setLineJoin(lineJoin), lineDash && _context.setLineDash(lineDash), _context.setLineCap(lineCap), _context.setMiterLimit(miterLimit);
     }
   }
   setTextStyleWithoutAlignBaseline(params, defaultParams) {
@@ -27981,9 +28087,10 @@ let HarmonyContext2d = class extends BrowserContext2d {
         lineJoin = defaultParams.lineJoin,
         lineDash = defaultParams.lineDash,
         lineCap = defaultParams.lineCap,
-        miterLimit = defaultParams.miterLimit
+        miterLimit = defaultParams.miterLimit,
+        keepStrokeScale = defaultParams.keepStrokeScale
       } = attribute;
-      _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+      _context.globalAlpha = strokeOpacity * opacity * this.baseGlobalAlpha, _context.lineWidth = keepStrokeScale ? lineWidth : getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || lineDash && _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
     }
   }
   measureText(text) {
@@ -28390,8 +28497,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;
   }
 }
@@ -28526,8 +28634,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;
   }
 };
@@ -29755,7 +29864,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.21.0-vstory.1";
+const version = "0.21.0-vstory.3";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);
@@ -29788,4 +29897,4 @@ registerReactAttributePlugin();
 registerDirectionalLight();
 registerOrthoCamera();
 
-export { ACustomAnimate, ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AbstractGraphicRender, Animate, AnimateGroup, AnimateGroup1, AnimateMode, AnimateStatus, AnimateStepType, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeAnimate, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, BrowserEnvContribution, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasArc3dPicker, CanvasArcPicker, CanvasAreaPicker, CanvasCirclePicker, CanvasFactory, CanvasGlyphPicker, CanvasGroupPicker, CanvasImagePicker, CanvasLinePicker, CanvasLottiePicker, CanvasPathPicker, CanvasPickerContribution, CanvasPolygonPicker, CanvasPyramid3dPicker, CanvasRect3dPicker, CanvasRectPicker, CanvasRichTextPicker, CanvasSymbolPicker, CanvasTextLayout, CanvasTextPicker, CbAnimate, Circle, CircleRender, CircleRenderContribution, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, Container, ContainerModule, Context2dFactory, ContributionProvider, CurveContext, CurveTypeEnum, CustomEvent, CustomPath2D, CustomSymbolClass, DebugDrawItemInterceptorContribution, DefaultArcAllocate, DefaultArcAttribute, DefaultArcRenderContribution, DefaultAreaAllocate, DefaultAreaAttribute, DefaultAreaTextureRenderContribution, DefaultAttribute, DefaultBaseBackgroundRenderContribution, DefaultBaseInteractiveRenderContribution, DefaultBaseTextureRenderContribution, DefaultCanvasAllocate, DefaultCanvasArcRender, DefaultCanvasAreaRender, DefaultCanvasCircleRender, DefaultCanvasGroupRender, DefaultCanvasImageRender, DefaultCanvasLineRender, DefaultCanvasPathRender, DefaultCanvasPolygonRender, DefaultCanvasRectRender, DefaultCanvasSymbolRender, DefaultCanvasTextRender, DefaultCircleAllocate, DefaultCircleAttribute, DefaultCircleRenderContribution, DefaultConnectAttribute, DefaultDebugAttribute, DefaultFillStyle, DefaultGlobal, DefaultGlobalPickerService, DefaultGlyphAttribute, DefaultGraphicAllocate, DefaultGraphicMemoryManager, DefaultGraphicService, DefaultGraphicUtil, DefaultGroupAttribute, DefaultGroupBackgroundRenderContribution, DefaultImageAttribute, DefaultImageBackgroundRenderContribution, DefaultImageRenderContribution, DefaultLayerService, DefaultLayout, DefaultLineAllocate, DefaultLineAttribute, DefaultMat4Allocate, DefaultMatrixAllocate, DefaultMorphingAnimateConfig, DefaultPathAllocate, DefaultPathAttribute, DefaultPickService, DefaultPickStyle, DefaultPolygonAttribute, DefaultRect3dAttribute, DefaultRectAllocate, DefaultRectAttribute, DefaultRectRenderContribution, DefaultRenderService, DefaultRichTextAttribute, DefaultRichTextIconAttribute, DefaultStateAnimateConfig, DefaultStrokeStyle, DefaultStyle, DefaultSymbolAllocate, DefaultSymbolAttribute, DefaultSymbolClipRangeStrokeRenderContribution, DefaultSymbolRenderContribution, DefaultTextAllocate, DefaultTextAttribute, DefaultTextMeasureContribution, DefaultTextStyle, DefaultTicker, DefaultTimeline, DefaultTransform, DefaultTransformUtil, DefaultWindow, Direction$1 as Direction, DirectionalLight, DragNDrop, DrawContribution, DrawItemInterceptor, DynamicLayerHandlerContribution, Edge, EmptyContext2d, EnvContribution, EventManager, EventSystem, EventTarget, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, Factory, FadeInPlus, FederatedEvent, FederatedMouseEvent, FederatedPointerEvent, FederatedWheelEvent, FlexLayoutPlugin, Fragment, GLYPH_NUMBER_TYPE, GRAPHIC_UPDATE_TAG_KEY, GROUP_NUMBER_TYPE, Generator, Gesture, GlobalPickerService, Glyph, GlyphRender, Graphic, GraphicAnimate, GraphicCreator$1 as GraphicCreator, GraphicPicker, GraphicRender, GraphicService, GraphicUtil, Group, GroupFadeIn, GroupFadeOut, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image$1 as Image, ImageRender, ImageRenderContribution, IncreaseCount, IncrementalDrawContribution, InputText, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, Layer, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, Lottie, ManualTickHandler, ManualTicker, Mat4Allocate, MathArcPicker, MathAreaPicker, MathCirclePicker, MathGlyphPicker, MathImagePicker, MathLinePicker, MathPathPicker, MathPickerContribution, MathPolygonPicker, MathRectPicker, MathSymbolPicker, MathTextPicker, MatrixAllocate, Meteor, MonotoneX, MonotoneY, MorphingPath, MotionPath, MultiToOneMorphingPath, NOWORK_ANIMATE_ATTR, Node, OrthoCamera, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Path, PathRender, PathRenderContribution, PickItemInterceptor, PickServiceInterceptor, PickerService, PluginService, Polygon, PolygonRender, PolygonRenderContribution, Pyramid3d, Pyramid3dRender, RAFTickHandler, REACT_TO_CANOPUS_EVENTS, REACT_TO_CANOPUS_EVENTS_LIST, RECT3D_NUMBER_TYPE, RECT_NUMBER_TYPE, RICHTEXT_NUMBER_TYPE, RafBasedSTO, ReactAttributePlugin, Rect, Rect3DRender, Rect3d, RectRender, RectRenderContribution, ReflectSegContext, RenderSelector, RenderService, ResourceLoader, RichText, RichTextEditPlugin, RichTextRender, RotateBySphereAnimate, SVG_ATTRIBUTE_MAP, SVG_ATTRIBUTE_MAP_KEYS, SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS, SYMBOL_NUMBER_TYPE, SegContext, ShadowPickServiceInterceptorContribution, ShadowRoot, ShadowRootDrawItemInterceptorContribution, ShadowRootPickItemInterceptorContribution, SplitRectAfterRenderContribution, SplitRectBeforeRenderContribution, Stage, StaticLayerHandlerContribution, Step$1 as Step, StreamLight, SubAnimate, Symbol$1 as Symbol, SymbolRender, SymbolRenderContribution, TEXT_NUMBER_TYPE, TagPointsUpdate, Text, TextDirection, TextMeasureContribution, TextRender, TextRenderContribution, Theme, TimeOutTickHandler, TransformUtil, UpdateTag, VArc, VArc3d, VArea, VCircle, VGlobal, VGlyph, VGroup, VImage, VLine, VPath, VPolygon, VPyramid3d, VRect, VRect3d, VRichText, VSymbol, VText, VWindow, ViewTransform3dPlugin, VirtualLayerHandlerContribution, WILDCARD, WindowHandlerContribution, WrapText, XMLParser, _interpolateColor, _registerArc, addArcToBezierPath$1 as addArcToBezierPath, addAttributeToPrototype, alignBezierCurves, alignSubpath, application, applyTransformOnBezierCurves, arc3dCanvasPickModule, arc3dModule, arcCanvasPickModule, arcMathPickModule, arcModule, areaCanvasPickModule, areaMathPickModule, areaModule, bezier, bezierCurversToPath, binarySplitPolygon, bindContributionProvider, bindContributionProviderNoSingletonScope, boundStroke, browserEnvModule, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateArcCornerRadius, calculateLineHeight, canvasAllocate, centroidOfSubpath, circleBounds, circleCanvasPickModule, circleMathPickModule, circleModule, clock, cloneGraphic, colorEqual, colorStringInterpolationToStr, container, cornerTangents, createArc, createArc3d, createArea, createCircle, createColor, createConicalGradient, createGlyph, createGroup, createImage, createImageElement$1 as createImageElement, createLine, createLottie, createMat4, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createSymbol, createText, createWrapText, cubicCalc, cubicLength, cubicPointAt, cubicSubdivide, decodeReactDom, defaultArcAllocate, defaultArcBackgroundRenderContribution, defaultArcRenderContribution, defaultArcTextureRenderContribution, defaultAreaAllocate, defaultBaseBackgroundRenderContribution, defaultBaseTextureRenderContribution, defaultCircleAllocate, defaultCircleBackgroundRenderContribution, defaultCircleRenderContribution, defaultCircleTextureRenderContribution, defaultGraphicMemoryManager, defaultGroupBackgroundRenderContribution, defaultImageBackgroundRenderContribution, defaultImageRenderContribution, defaultLineAllocate, defaultPathAllocate, defaultRectAllocate, defaultRectBackgroundRenderContribution, defaultRectRenderContribution, defaultRectTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolClipRangeStrokeRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, defaultTicker, defaultTimeline, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawIncrementalAreaSegments, drawIncrementalSegments, drawSegments, enumCommandMap, feishuEnvModule, fillVisible, findBestMorphingRotation, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepSegments, genStepTypeSegments, generatorPathEasingFunc, getAttributeFromDefaultAttrList, getConicGradientAt, getCurrentEnv, getExtraModelMatrix, getModelMatrix, getRichTextBounds, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, globalTheme, glyphCanvasPickModule, glyphMathPickModule, glyphModule, graphicCreator, graphicService, graphicUtil, harmonyEnvModule, identityMat4, imageCanvasPickModule, imageMathPickModule, imageModule, incrementalAddTo, initAllEnv, initBrowserEnv, initFeishuEnv, initHarmonyEnv, initLynxEnv, initNodeEnv, initTTEnv, initTaroEnv, initWxEnv, inject, injectable, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, intersect, isBrowserEnv, isNodeEnv, isSvg, isTransformKey, isXML, jsx, layerService, lineCanvasPickModule, lineMathPickModule, lineModule, loadAllEnv, loadAllModule, loadBrowserEnv, loadFeishuEnv, loadHarmonyEnv, loadLynxEnv, loadNodeEnv, loadTTEnv, loadTaroEnv, loadWxEnv, lookAt, lottieCanvasPickModule, lottieModule, lynxEnvModule, mat3Tomat4, mat4Allocate, matrixAllocate, morphPath, multiInject, multiToOneMorph, multiplyMat4Mat3, multiplyMat4Mat4, named, newThemeObj, nodeEnvModule, oneToMultiMorph, ortho, parsePadding, parseStroke, parseSvgPath, pathCanvasPickModule, pathMathPickModule, pathModule, pathToBezierCurves, point$3 as point, pointEqual, pointInterpolation, pointInterpolationHighPerformance, pointsEqual, pointsInterpolation, polygonCanvasPickModule, polygonMathPickModule, polygonModule, preLoadAllModule, pyramid3dCanvasPickModule, pyramid3dModule, quadCalc, quadLength, quadPointAt, rafBasedSto, rect3dCanvasPickModule, rect3dModule, rectCanvasPickModule, rectFillVisible, rectMathPickModule, rectModule, rectStrokeVisible, recursiveCallBinarySplit, registerArc, registerArc3d, registerArc3dGraphic, registerArcGraphic, registerArea, registerAreaGraphic, registerCircle, registerCircleGraphic, registerDirectionalLight, registerFlexLayoutPlugin, registerGlyph, registerGlyphGraphic, registerGroup, registerGroupGraphic, registerHtmlAttributePlugin, registerImage, registerImageGraphic, registerLine, registerLineGraphic, registerOrthoCamera, registerPath, registerPathGraphic, registerPolygon, registerPolygonGraphic, registerPyramid3d, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect, registerRect3d, registerRect3dGraphic, registerRectGraphic, registerRichtext, registerRichtextGraphic, registerShadowRoot, registerShadowRootGraphic, registerSymbol, registerSymbolGraphic, registerText, registerTextGraphic, registerViewTransform3dPlugin, registerWrapText, registerWrapTextGraphic, renderCommandList, rewriteProto, richTextMathPickModule, richtextCanvasPickModule, richtextModule, rotateX, rotateY, rotateZ, roughModule, runFill, runStroke, scaleMat4, segments, shouldUseMat4, snapLength, splitArc, splitArea, splitCircle, splitGraphic, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, strCommandMap, strokeVisible, symbolCanvasPickModule, symbolMathPickModule, symbolModule, taroEnvModule, textAttributesToStyle, textCanvasPickModule, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textMathPickModule, textModule, transformKeys, transformMat4, transformUtil, translate, ttEnvModule, version, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, wxEnvModule, xul };
+export { ACustomAnimate, ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AbstractGraphicRender, Animate, AnimateGroup, AnimateGroup1, AnimateMode, AnimateStatus, AnimateStepType, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeAnimate, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, BrowserEnvContribution, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasArc3dPicker, CanvasArcPicker, CanvasAreaPicker, CanvasCirclePicker, CanvasFactory, CanvasGlyphPicker, CanvasGroupPicker, CanvasImagePicker, CanvasLinePicker, CanvasLottiePicker, CanvasPathPicker, CanvasPickerContribution, CanvasPolygonPicker, CanvasPyramid3dPicker, CanvasRect3dPicker, CanvasRectPicker, CanvasRichTextPicker, CanvasSymbolPicker, CanvasTextLayout, CanvasTextPicker, CbAnimate, Circle, CircleRender, CircleRenderContribution, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, Container, ContainerModule, Context2dFactory, ContributionProvider, CurveContext, CurveTypeEnum, CustomEvent, CustomPath2D, CustomSymbolClass, DebugDrawItemInterceptorContribution, DefaultArcAllocate, DefaultArcAttribute, DefaultArcRenderContribution, DefaultAreaAllocate, DefaultAreaAttribute, DefaultAreaTextureRenderContribution, DefaultAttribute, DefaultBaseBackgroundRenderContribution, DefaultBaseInteractiveRenderContribution, DefaultBaseTextureRenderContribution, DefaultCanvasAllocate, DefaultCanvasArcRender, DefaultCanvasAreaRender, DefaultCanvasCircleRender, DefaultCanvasGroupRender, DefaultCanvasImageRender, DefaultCanvasLineRender, DefaultCanvasPathRender, DefaultCanvasPolygonRender, DefaultCanvasRectRender, DefaultCanvasSymbolRender, DefaultCanvasTextRender, DefaultCircleAllocate, DefaultCircleAttribute, DefaultCircleRenderContribution, DefaultConnectAttribute, DefaultDebugAttribute, DefaultFillStyle, DefaultGlobal, DefaultGlobalPickerService, DefaultGlyphAttribute, DefaultGraphicAllocate, DefaultGraphicMemoryManager, DefaultGraphicService, DefaultGraphicUtil, DefaultGroupAttribute, DefaultGroupBackgroundRenderContribution, DefaultImageAttribute, DefaultImageBackgroundRenderContribution, DefaultImageRenderContribution, DefaultLayerService, DefaultLayout, DefaultLineAllocate, DefaultLineAttribute, DefaultMat4Allocate, DefaultMatrixAllocate, DefaultMorphingAnimateConfig, DefaultPathAllocate, DefaultPathAttribute, DefaultPickService, DefaultPickStyle, DefaultPolygonAttribute, DefaultRect3dAttribute, DefaultRectAllocate, DefaultRectAttribute, DefaultRectRenderContribution, DefaultRenderService, DefaultRichTextAttribute, DefaultRichTextIconAttribute, DefaultStateAnimateConfig, DefaultStrokeStyle, DefaultStyle, DefaultSymbolAllocate, DefaultSymbolAttribute, DefaultSymbolClipRangeStrokeRenderContribution, DefaultSymbolRenderContribution, DefaultTextAllocate, DefaultTextAttribute, DefaultTextMeasureContribution, DefaultTextStyle, DefaultTicker, DefaultTimeline, DefaultTransform, DefaultTransformUtil, DefaultWindow, Direction$1 as Direction, DirectionalLight, DragNDrop, DrawContribution, DrawItemInterceptor, DynamicLayerHandlerContribution, Easing, Edge, EmptyContext2d, EnvContribution, EventManager, EventSystem, EventTarget, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, Factory, FadeInPlus, FederatedEvent, FederatedMouseEvent, FederatedPointerEvent, FederatedWheelEvent, FlexLayoutPlugin, Fragment, GLYPH_NUMBER_TYPE, GRAPHIC_UPDATE_TAG_KEY, GROUP_NUMBER_TYPE, Generator, Gesture, GlobalPickerService, Glyph, GlyphRender, Graphic, GraphicAnimate, GraphicCreator$1 as GraphicCreator, GraphicPicker, GraphicRender, GraphicService, GraphicUtil, Group, GroupFadeIn, GroupFadeOut, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image$1 as Image, ImageRender, ImageRenderContribution, IncreaseCount, IncrementalDrawContribution, InputText, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, Layer, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, Lottie, ManualTickHandler, ManualTicker, Mat4Allocate, MathArcPicker, MathAreaPicker, MathCirclePicker, MathGlyphPicker, MathImagePicker, MathLinePicker, MathPathPicker, MathPickerContribution, MathPolygonPicker, MathRectPicker, MathSymbolPicker, MathTextPicker, MatrixAllocate, MeasureModeEnum, Meteor, MonotoneX, MonotoneY, MorphingPath, MotionPath, MultiToOneMorphingPath, NOWORK_ANIMATE_ATTR, Node, OrthoCamera, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Path, PathRender, PathRenderContribution, PickItemInterceptor, PickServiceInterceptor, PickerService, PluginService, Polygon, PolygonRender, PolygonRenderContribution, Pyramid3d, Pyramid3dRender, RAFTickHandler, REACT_TO_CANOPUS_EVENTS, REACT_TO_CANOPUS_EVENTS_LIST, RECT3D_NUMBER_TYPE, RECT_NUMBER_TYPE, RICHTEXT_NUMBER_TYPE, RafBasedSTO, ReactAttributePlugin, Rect, Rect3DRender, Rect3d, RectRender, RectRenderContribution, ReflectSegContext, RenderSelector, RenderService, ResourceLoader, RichText, RichTextEditPlugin, RichTextRender, RotateBySphereAnimate, SVG_ATTRIBUTE_MAP, SVG_ATTRIBUTE_MAP_KEYS, SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS, SYMBOL_NUMBER_TYPE, SegContext, ShadowPickServiceInterceptorContribution, ShadowRoot, ShadowRootDrawItemInterceptorContribution, ShadowRootPickItemInterceptorContribution, SplitRectAfterRenderContribution, SplitRectBeforeRenderContribution, Stage, StaticLayerHandlerContribution, Step$1 as Step, StreamLight, SubAnimate, Symbol$1 as Symbol, SymbolRender, SymbolRenderContribution, TEXT_NUMBER_TYPE, TagPointsUpdate, Text, TextDirection, TextMeasureContribution, TextRender, TextRenderContribution, Theme, TimeOutTickHandler, TransformUtil, UpdateTag, VArc, VArc3d, VArea, VCircle, VGlobal, VGlyph, VGroup, VImage, VLine, VPath, VPolygon, VPyramid3d, VRect, VRect3d, VRichText, VSymbol, VText, VWindow, ViewTransform3dPlugin, VirtualLayerHandlerContribution, WILDCARD, WindowHandlerContribution, WrapText, XMLParser, _calculateLineHeight, _interpolateColor, _registerArc, addArcToBezierPath$1 as addArcToBezierPath, addAttributeToPrototype, alignBezierCurves, alignSubpath, application, applyTransformOnBezierCurves, arc3dCanvasPickModule, arc3dModule, arcCanvasPickModule, arcMathPickModule, arcModule, areaCanvasPickModule, areaMathPickModule, areaModule, bezier, bezierCurversToPath, binarySplitPolygon, bindContributionProvider, bindContributionProviderNoSingletonScope, boundStroke, browserEnvModule, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateArcCornerRadius, calculateLineHeight, canvasAllocate, centroidOfSubpath, circleBounds, circleCanvasPickModule, circleMathPickModule, circleModule, clock, cloneGraphic, colorEqual, colorStringInterpolationToStr, container, cornerTangents, createArc, createArc3d, createArea, createCircle, createColor, createConicalGradient, createGlyph, createGroup, createImage, createImageElement$1 as createImageElement, createLine, createLottie, createMat4, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createSymbol, createText, createWrapText, cubicCalc, cubicLength, cubicPointAt, cubicSubdivide, decodeReactDom, defaultArcAllocate, defaultArcBackgroundRenderContribution, defaultArcRenderContribution, defaultArcTextureRenderContribution, defaultAreaAllocate, defaultBaseBackgroundRenderContribution, defaultBaseTextureRenderContribution, defaultCircleAllocate, defaultCircleBackgroundRenderContribution, defaultCircleRenderContribution, defaultCircleTextureRenderContribution, defaultGraphicMemoryManager, defaultGroupBackgroundRenderContribution, defaultImageBackgroundRenderContribution, defaultImageRenderContribution, defaultLineAllocate, defaultPathAllocate, defaultRectAllocate, defaultRectBackgroundRenderContribution, defaultRectRenderContribution, defaultRectTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolClipRangeStrokeRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, defaultTicker, defaultTimeline, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawIncrementalAreaSegments, drawIncrementalSegments, drawSegments, enumCommandMap, feishuEnvModule, fillVisible, findBestMorphingRotation, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepSegments, genStepTypeSegments, generatorPathEasingFunc, getAttributeFromDefaultAttrList, getConicGradientAt, getCurrentEnv, getExtraModelMatrix, getModelMatrix, getRichTextBounds, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, globalTheme, glyphCanvasPickModule, glyphMathPickModule, glyphModule, graphicCreator, graphicService, graphicUtil, harmonyEnvModule, identityMat4, imageCanvasPickModule, imageMathPickModule, imageModule, incrementalAddTo, initAllEnv, initBrowserEnv, initFeishuEnv, initHarmonyEnv, initLynxEnv, initNodeEnv, initTTEnv, initTaroEnv, initWxEnv, inject, injectable, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, intersect, isBrowserEnv, isNodeEnv, isSvg, isTransformKey, isXML, jsx, layerService, lineCanvasPickModule, lineMathPickModule, lineModule, loadAllEnv, loadAllModule, loadBrowserEnv, loadFeishuEnv, loadHarmonyEnv, loadLynxEnv, loadNodeEnv, loadTTEnv, loadTaroEnv, loadWxEnv, lookAt, lottieCanvasPickModule, lottieModule, lynxEnvModule, mat3Tomat4, mat4Allocate, matrixAllocate, morphPath, multiInject, multiToOneMorph, multiplyMat4Mat3, multiplyMat4Mat4, named, newThemeObj, nodeEnvModule, oneToMultiMorph, ortho, parsePadding, parseStroke, parseSvgPath, pathCanvasPickModule, pathMathPickModule, pathModule, pathToBezierCurves, point$3 as point, pointEqual, pointInterpolation, pointInterpolationHighPerformance, pointsEqual, pointsInterpolation, polygonCanvasPickModule, polygonMathPickModule, polygonModule, preLoadAllModule, pyramid3dCanvasPickModule, pyramid3dModule, quadCalc, quadLength, quadPointAt, rafBasedSto, rect3dCanvasPickModule, rect3dModule, rectCanvasPickModule, rectFillVisible, rectMathPickModule, rectModule, rectStrokeVisible, recursiveCallBinarySplit, registerArc, registerArc3d, registerArc3dGraphic, registerArcGraphic, registerArea, registerAreaGraphic, registerCircle, registerCircleGraphic, registerDirectionalLight, registerFlexLayoutPlugin, registerGlyph, registerGlyphGraphic, registerGroup, registerGroupGraphic, registerHtmlAttributePlugin, registerImage, registerImageGraphic, registerLine, registerLineGraphic, registerOrthoCamera, registerPath, registerPathGraphic, registerPolygon, registerPolygonGraphic, registerPyramid3d, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect, registerRect3d, registerRect3dGraphic, registerRectGraphic, registerRichtext, registerRichtextGraphic, registerShadowRoot, registerShadowRootGraphic, registerSymbol, registerSymbolGraphic, registerText, registerTextGraphic, registerViewTransform3dPlugin, registerWrapText, registerWrapTextGraphic, renderCommandList, rewriteProto, richTextMathPickModule, richtextCanvasPickModule, richtextModule, rotateX, rotateY, rotateZ, roughModule, runFill, runStroke, scaleMat4, segments, shouldUseMat4, snapLength, splitArc, splitArea, splitCircle, splitGraphic, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, strCommandMap, strokeVisible, symbolCanvasPickModule, symbolMathPickModule, symbolModule, taroEnvModule, textAttributesToStyle, textCanvasPickModule, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textMathPickModule, textModule, transformKeys, transformMat4, transformUtil, translate, ttEnvModule, version, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, wxEnvModule, xul };