@visactor/vrender 0.20.16 → 0.21.0-alpha.10

package/dist/index.js

@@ -748,6 +748,13 @@
     };
     exports.DefaultGlobal = __decorate$1H([injectable(), __param$T(0, inject(ContributionProvider)), __param$T(0, named(EnvContribution)), __metadata$1h("design:paramtypes", [Object])], exports.DefaultGlobal);
 
+    exports.MeasureModeEnum = void 0;
+    !function (MeasureModeEnum) {
+      MeasureModeEnum[MeasureModeEnum.estimate = 0] = "estimate", MeasureModeEnum[MeasureModeEnum.actualBounding = 1] = "actualBounding", MeasureModeEnum[MeasureModeEnum.fontBounding = 2] = "fontBounding";
+    }(exports.MeasureModeEnum || (exports.MeasureModeEnum = {}));
+
+    const strCommandMap = ["arc", "arcTo", "bezierCurveTo", "closePath", "ellipse", "lineTo", "moveTo", "quadraticCurveTo", "rect"];
+
     function getDefaultExportFromCjs (x) {
     	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
     }
@@ -1702,7 +1709,9 @@
           } = 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) {
@@ -1716,7 +1725,7 @@
         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;
       }
@@ -1765,7 +1774,9 @@
           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;
@@ -1778,7 +1789,9 @@
           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;
@@ -3919,6 +3932,7 @@
     const DefaultTextStyle = {
       text: "",
       maxLineWidth: 1 / 0,
+      maxWidth: 1 / 0,
       textAlign: "left",
       textBaseline: "alphabetic",
       fontSize: 16,
@@ -3942,7 +3956,8 @@
       suffixPosition: "end",
       underlineDash: [],
       underlineOffset: 0,
-      disableAutoClipedPoptip: void 0
+      disableAutoClipedPoptip: void 0,
+      measureMode: exports.MeasureModeEnum.fontBounding
     };
     const DefaultPickStyle = {
       pickStrokeBuffer: 0
@@ -4149,448 +4164,260 @@
     class Application {}
     const application = new Application();
 
-    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;
-      }
-      function getAST() {
-        const ast = matchListing(matchDefinition);
-        return input.length > 0 && error("Invalid input not EOF"), ast;
+    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"
       }
-      function matchDefinition() {
-        return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+    };
+    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;
       }
-      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)
-          };
-        });
+      ctx.setTextStyle({
+        textAlign: "left",
+        textBaseline: character.textBaseline || "alphabetic",
+        fontStyle: character.fontStyle || "",
+        fontWeight: character.fontWeight || "",
+        fontSize: fontSize,
+        fontFamily: character.fontFamily || "sans-serif"
+      });
+    };
+    function applyFillStyle(ctx, character) {
+      const fillStyle = character && character.fill || defaultFormatting.fill;
+      if (!fillStyle) return void (ctx.globalAlpha = 0);
+      const {
+        fillOpacity = 1,
+        opacity = 1
+      } = character;
+      ctx.globalAlpha = fillOpacity * opacity, ctx.fillStyle = fillStyle, setTextStyle(ctx, character);
+    }
+    function applyStrokeStyle(ctx, character) {
+      const strokeStyle = character && character.stroke || defaultFormatting.stroke;
+      if (!strokeStyle) return void (ctx.globalAlpha = 0);
+      const {
+        strokeOpacity = 1,
+        opacity = 1
+      } = character;
+      ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
+    }
+    function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
+      if (!width || width <= 0) return 0;
+      const textMeasure = application.graphicUtil.textMeasure;
+      let index = guessIndex,
+        temp = desc.slice(0, index),
+        tempWidth = Math.floor(textMeasure.measureText(temp, character).width),
+        tempNext = desc.slice(0, index + 1),
+        tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
+      for (; tempWidth > width || tempWidthNext <= width;) {
+        if (tempWidth > width ? index-- : index++, index > desc.length) {
+          index = desc.length;
+          break;
+        }
+        if (index < 0) {
+          index = 0;
+          break;
+        }
+        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);
       }
-      function matchLinearOrientation() {
-        return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+      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$1G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      var d,
+        c = arguments.length,
+        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+      if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    let ATextMeasure = class {
+      configure(service, env) {
+        this.canvas = service.canvas, this.context = service.context, service.bindTextMeasure(this);
       }
-      function matchConicalOrientation() {
-        return match("angular", tokens.fromAngleValue, 1);
+      _measureTextWithoutAlignBaseline(text, options, compatible) {
+        this.context.setTextStyleWithoutAlignBaseline(options);
+        const metrics = this.context.measureText(text);
+        return compatible ? this.compatibleMetrics(metrics, options) : metrics;
       }
-      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;
+      _measureTextWithAlignBaseline(text, options, compatible) {
+        this.context.setTextStyle(options);
+        const metrics = this.context.measureText(text);
+        return compatible ? this.compatibleMetrics(metrics, options) : metrics;
       }
-      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
-            });
-          }
+      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;
         }
-        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;
+        if (null == metrics.actualBoundingBoxLeft || null == metrics.actualBoundingBoxRight) {
+          const {
+            left: left,
+            right: right
+          } = this.measureTextBoundLeftRightEstimate(options);
+          metrics.actualBoundingBoxLeft = left, metrics.actualBoundingBoxRight = right;
         }
+        return metrics;
       }
-      function matchPositioning() {
-        const location = {
-          x: matchDistance(),
-          y: matchDistance()
-        };
-        if (location.x || location.y) return {
-          type: "position",
-          value: location
+      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 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;
+      measureTextWidth(text, options, textMeasure) {
+        return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
       }
-      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;
+      measureTextBoundsWidth(text, options, textMeasure) {
+        return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
       }
-      function matchDistance() {
-        return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+      measureTextBoundsLeftRight(text, options, textMeasure) {
+        return this.context ? {
+          left: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxLeft,
+          right: textMeasure.actualBoundingBoxRight
+        } : this.measureTextBoundLeftRightEstimate(options);
       }
-      function matchLength() {
-        return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+      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;
       }
-      function match(type, pattern, captureIndex) {
-        const captures = scan(pattern);
-        if (captures) return {
-          type: type,
-          value: captures[captureIndex]
-        };
+      measureTextPixelADscent(text, options, textMeasure) {
+        return this.context ? {
+          ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxAscent,
+          descent: textMeasure.actualBoundingBoxDescent
+        } : this.measureTextBoundADscentEstimate(options);
       }
-      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;
+      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;
       }
-      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"));
+      measureTextBoundADscent(text, options, textMeasure) {
+        return this.context ? {
+          ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).fontBoundingBoxAscent,
+          descent: textMeasure.fontBoundingBoxDescent
+        } : this.measureTextBoundADscentEstimate(options);
       }
-      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;
+      measureTextBoundADscentEstimate(options) {
+        var _a;
+        const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
         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
-          }))
+          ascent: .79 * fontSize,
+          descent: .21 * fontSize
         };
       }
-      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
-          }))
+      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
         };
       }
-      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
-          }))
+      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 === exports.MeasureModeEnum.actualBounding) return {
+          ascent: out.actualBoundingBoxAscent,
+          descent: out.actualBoundingBoxDescent,
+          width: out.width
         };
-      }
-    }
-
-    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;
+        if (mode === exports.MeasureModeEnum.estimate) return Object.assign(Object.assign({}, this.measureTextBoundADscentEstimate(options)), {
+          width: out.width
+        });
+        if (mode === exports.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
+          };
         }
-        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$1G = 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;
-      }
-      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
+          ascent: out.actualBoundingBoxAscent,
+          descent: out.actualBoundingBoxDescent,
+          width: out.width
         };
       }
-      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);
-      }
-      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);
-      }
       measureText(text, options) {
         return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
       }
@@ -6701,7 +6528,7 @@
       }
     }
 
-    class DefaultTicker {
+    class DefaultTicker extends EventEmitter {
       set mode(m) {
         this._mode !== m && (this._mode = m, this.setupTickHandler());
       }
@@ -6710,17 +6537,17 @@
       }
       constructor() {
         let timelines = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-        this.handleTick = (handler, params) => {
+        super(), this.handleTick = (handler, params) => {
           const {
             once = !1
           } = null != params ? params : {};
-          this.ifCanStop() ? this.stop() : (this._handlerTick(handler), once || handler.tick(this.interval, this.handleTick));
-        }, this._handlerTick = handler => {
+          this.ifCanStop() ? this.stop() : (this._handlerTick(), once || handler.tick(this.interval, this.handleTick));
+        }, this._handlerTick = () => {
           const time = this.tickerHandler.getTime();
           let delta = 0;
           this.lastFrameTime >= 0 && (delta = time - this.lastFrameTime), this.lastFrameTime = time, this.status === STATUS$1.RUNNING && (this.tickCounts++, this.timelines.forEach(t => {
             t.tick(delta);
-          }));
+          }), this.emit("afterTick"));
         }, this.init(), this.lastFrameTime = -1, this.tickCounts = 0, this.timelines = timelines, this.autoStop = !0;
       }
       init() {
@@ -6816,6 +6643,9 @@
       stop() {
         this.status = STATUS$1.INITIAL, this.setupTickHandler(), this.lastFrameTime = -1;
       }
+      trySyncTickStatus() {
+        this.status === STATUS$1.RUNNING && this._handlerTick();
+      }
     }
 
     class ManualTickHandler {
@@ -7957,7 +7787,7 @@
           lastMatchedIndex = i, lastMatchedPoint = tagMap.get(this.toPoints[i].context);
           break;
         }
-        "clip" === this.newPointAnimateType && 0 !== this.toPoints.length && (Number.isFinite(lastMatchedIndex) ? (this.clipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension], isValidNumber$1(this.clipRange) ? this.clipRange = clamp$1(this.clipRange, 0, 1) : this.clipRange = 0) : this.clipRange = 0);
+        "clip" === this.newPointAnimateType && 0 !== this.toPoints.length && (Number.isFinite(lastMatchedIndex) ? (this.clipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension], 1 === this.clipRange && (this.shrinkClipRange = this.toPoints[lastMatchedIndex][this.clipRangeByDimension] / this.fromPoints[this.fromPoints.length - 1][this.clipRangeByDimension]), isValidNumber$1(this.clipRange) ? this.clipRange = clamp$1(this.clipRange, 0, 1) : this.clipRange = 0) : this.clipRange = 0);
         let prevMatchedPoint = this.toPoints[0];
         this.interpolatePoints = this.toPoints.map((point, index) => {
           const matchedPoint = tagMap.get(point.context);
@@ -7969,11 +7799,19 @@
           return newPoint.defined = toPoint.defined, newPoint.context = toPoint.context, newPoint;
         });
       }
+      onFirstRun() {
+        const lastClipRange = this.target.attribute.clipRange;
+        isValidNumber$1(lastClipRange * this.clipRange) && (this.clipRange *= lastClipRange);
+      }
       onUpdate(end, ratio, out) {
         if (this.points = this.points.map((point, index) => {
           const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
           return newPoint.context = point.context, newPoint;
-        }), this.clipRange && (out.clipRange = this.clipRange + (1 - this.clipRange) * ratio), this.segmentsCache && this.to.segments) {
+        }), this.clipRange) {
+          if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints, out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
+          out.clipRange = this.clipRange + (1 - this.clipRange) * ratio;
+        }
+        if (this.segmentsCache && this.to.segments) {
           let start = 0;
           out.segments = this.to.segments.map((segment, index) => {
             const end = start + this.segmentsCache[index],
@@ -11552,266 +11390,555 @@
         translate(m, m, [_anchor[0], _anchor[1], 0]), rotateZ(m, m, angle), translate(m, m, [-_anchor[0], -_anchor[1], 0]), multiplyMat4Mat4(out, out, m);
       }
     }
-    function shouldUseMat4(graphic) {
-      const {
-        alpha: alpha,
-        beta: beta
-      } = graphic.attribute;
-      return alpha || beta;
-    }
-    exports.DefaultGraphicService = class DefaultGraphicService {
-      constructor(creator) {
-        this.creator = creator, this.hooks = {
-          onAttributeUpdate: new SyncHook(["graphic"]),
-          onSetStage: new SyncHook(["graphic", "stage"]),
-          onRemove: new SyncHook(["graphic"]),
-          onRelease: new SyncHook(["graphic"]),
-          onAddIncremental: new SyncHook(["graphic", "group", "stage"]),
-          onClearIncremental: new SyncHook(["graphic", "group", "stage"]),
-          beforeUpdateAABBBounds: new SyncHook(["graphic", "stage", "willUpdate", "aabbBounds"]),
-          afterUpdateAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds", "globalAABBBounds", "selfChange"])
-        }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds();
-      }
-      onAttributeUpdate(graphic) {
-        this.hooks.onAttributeUpdate.taps.length && this.hooks.onAttributeUpdate.call(graphic);
+    function shouldUseMat4(graphic) {
+      const {
+        alpha: alpha,
+        beta: beta
+      } = graphic.attribute;
+      return alpha || beta;
+    }
+    exports.DefaultGraphicService = class DefaultGraphicService {
+      constructor(creator) {
+        this.creator = creator, this.hooks = {
+          onAttributeUpdate: new SyncHook(["graphic"]),
+          onSetStage: new SyncHook(["graphic", "stage"]),
+          onRemove: new SyncHook(["graphic"]),
+          onRelease: new SyncHook(["graphic"]),
+          onAddIncremental: new SyncHook(["graphic", "group", "stage"]),
+          onClearIncremental: new SyncHook(["graphic", "group", "stage"]),
+          beforeUpdateAABBBounds: new SyncHook(["graphic", "stage", "willUpdate", "aabbBounds"]),
+          afterUpdateAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds", "globalAABBBounds", "selfChange"]),
+          clearAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds"])
+        }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds();
+      }
+      onAttributeUpdate(graphic) {
+        this.hooks.onAttributeUpdate.taps.length && this.hooks.onAttributeUpdate.call(graphic);
+      }
+      onSetStage(graphic, stage) {
+        this.hooks.onSetStage.taps.length && this.hooks.onSetStage.call(graphic, stage);
+      }
+      onRemove(graphic) {
+        this.hooks.onRemove.taps.length && this.hooks.onRemove.call(graphic);
+      }
+      onRelease(graphic) {
+        this.hooks.onRelease.taps.length && this.hooks.onRelease.call(graphic);
+      }
+      onAddIncremental(graphic, group, stage) {
+        this.hooks.onAddIncremental.taps.length && this.hooks.onAddIncremental.call(graphic, group, stage);
+      }
+      onClearIncremental(group, stage) {
+        this.hooks.onClearIncremental.taps.length && this.hooks.onClearIncremental.call(group, stage);
+      }
+      beforeUpdateAABBBounds(graphic, stage, willUpdate, bounds) {
+        this.hooks.beforeUpdateAABBBounds.taps.length && this.hooks.beforeUpdateAABBBounds.call(graphic, stage, willUpdate, bounds);
+      }
+      afterUpdateAABBBounds(graphic, stage, bounds, params, selfChange) {
+        this.hooks.afterUpdateAABBBounds.taps.length && this.hooks.afterUpdateAABBBounds.call(graphic, stage, bounds, params, selfChange);
+      }
+      clearAABBBounds(graphic, stage, b) {
+        this.hooks.clearAABBBounds.taps.length && this.hooks.clearAABBBounds.call(graphic, stage, b);
+      }
+      updatePathProxyAABBBounds(aabbBounds, graphic) {
+        const path = "function" == typeof graphic.pathProxy ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
+        if (!path) return !1;
+        const boundsContext = new BoundsContext(aabbBounds);
+        return renderCommandList(path.commandList, boundsContext, 0, 0), !0;
+      }
+      updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
+        const {
+          textAlign: textAlign,
+          textBaseline: textBaseline
+        } = attribute;
+        if (null != attribute.forceBoundsHeight) {
+          const h = isNumber$1(attribute.forceBoundsHeight) ? attribute.forceBoundsHeight : attribute.forceBoundsHeight(),
+            dy = textLayoutOffsetY(textBaseline, h, h);
+          aabbBounds.set(aabbBounds.x1, dy, aabbBounds.x2, dy + h);
+        }
+        if (null != attribute.forceBoundsWidth) {
+          const w = isNumber$1(attribute.forceBoundsWidth) ? attribute.forceBoundsWidth : attribute.forceBoundsWidth(),
+            dx = textDrawOffsetX(textAlign, w);
+          aabbBounds.set(dx, aabbBounds.y1, dx + w, aabbBounds.y2);
+        }
+      }
+      combindShadowAABBBounds(bounds, graphic) {
+        if (graphic && graphic.shadowRoot) {
+          const b = graphic.shadowRoot.AABBBounds;
+          bounds.union(b);
+        }
+      }
+      transformAABBBounds(attribute, aabbBounds, theme, miter, graphic) {
+        if (!aabbBounds.empty()) {
+          const {
+              scaleX = theme.scaleX,
+              scaleY = theme.scaleY,
+              stroke = theme.stroke,
+              shadowBlur = theme.shadowBlur,
+              lineWidth = theme.lineWidth,
+              pickStrokeBuffer = theme.pickStrokeBuffer,
+              strokeBoundsBuffer = theme.strokeBoundsBuffer
+            } = attribute,
+            tb1 = this.tempAABBBounds1,
+            tb2 = this.tempAABBBounds2;
+          if (stroke && lineWidth) {
+            const scaledHalfLineWidth = (lineWidth + pickStrokeBuffer) / Math.abs(scaleX + scaleY);
+            boundStroke(tb1, scaledHalfLineWidth, miter, strokeBoundsBuffer), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+          }
+          if (shadowBlur) {
+            const {
+                shadowOffsetX = theme.shadowOffsetX,
+                shadowOffsetY = theme.shadowOffsetY
+              } = attribute,
+              shadowBlurWidth = shadowBlur / Math.abs(scaleX + scaleY) * 2;
+            boundStroke(tb1, shadowBlurWidth, !1, strokeBoundsBuffer + 1), tb1.translate(shadowOffsetX, shadowOffsetY), aabbBounds.union(tb1);
+          }
+        }
+        if (this.combindShadowAABBBounds(aabbBounds, graphic), aabbBounds.empty()) return;
+        let updateMatrix = !0;
+        const m = graphic.transMatrix;
+        graphic && graphic.isContainer && (updateMatrix = !(1 === m.a && 0 === m.b && 0 === m.c && 1 === m.d && 0 === m.e && 0 === m.f)), updateMatrix && transformBoundsWithMatrix(aabbBounds, aabbBounds, m);
+      }
+      validCheck(attribute, theme, aabbBounds, graphic) {
+        if (!graphic) return !0;
+        if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
+        if (graphic.shadowRoot || graphic.isContainer) return !0;
+        const {
+          visible = theme.visible
+        } = attribute;
+        return !(!graphic.valid || !visible) || (aabbBounds.empty() || (graphic.parent && aabbBounds.transformWithMatrix(graphic.parent.globalTransMatrix), application.graphicService.clearAABBBounds(graphic, graphic.stage, aabbBounds), aabbBounds.clear()), !1);
+      }
+      updateTempAABBBounds(aabbBounds) {
+        const tb1 = this.tempAABBBounds1,
+          tb2 = this.tempAABBBounds2;
+        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), {
+          tb1: tb1,
+          tb2: tb2
+        };
+      }
+    };
+    exports.DefaultGraphicService = __decorate$1B([injectable(), __param$R(0, inject(GraphicCreator$1)), __metadata$1d("design:paramtypes", [Object])], exports.DefaultGraphicService);
+
+    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 === exports.BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === exports.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);
+        });
+      }
+      valid(graphic, defaultAttribute, fillCb, strokeCb) {
+        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
+        };
+      }
+      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;
+      }
+      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);
+        }
+      }
+      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, drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
+      }
+    }
+
+    const parse = function () {
+      const tokens = {
+        linearGradient: /^(linear\-gradient)/i,
+        radialGradient: /^(radial\-gradient)/i,
+        conicGradient: /^(conic\-gradient)/i,
+        sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+        extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+        positionKeywords: /^(left|center|right|top|bottom)/i,
+        pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+        percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+        emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+        angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        fromAngleValue: /^from\s*(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        startCall: /^\(/,
+        endCall: /^\)/,
+        comma: /^,/,
+        hexColor: /(^\#[0-9a-fA-F]+)/,
+        literalColor: /^([a-zA-Z]+)/,
+        rgbColor: /^(rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))/i,
+        rgbaColor: /^(rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*((\d\.\d+)|\d{1,3})\))/i,
+        number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
+      };
+      let input = "";
+      function error(msg) {
+        const err = new Error(input + ": " + msg);
+        throw err.source = input, err;
       }
-      onSetStage(graphic, stage) {
-        this.hooks.onSetStage.taps.length && this.hooks.onSetStage.call(graphic, stage);
+      function getAST() {
+        const ast = matchListing(matchDefinition);
+        return input.length > 0 && error("Invalid input not EOF"), ast;
       }
-      onRemove(graphic) {
-        this.hooks.onRemove.taps.length && this.hooks.onRemove.call(graphic);
+      function matchDefinition() {
+        return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
       }
-      onRelease(graphic) {
-        this.hooks.onRelease.taps.length && this.hooks.onRelease.call(graphic);
+      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)
+          };
+        });
       }
-      onAddIncremental(graphic, group, stage) {
-        this.hooks.onAddIncremental.taps.length && this.hooks.onAddIncremental.call(graphic, group, stage);
+      function matchLinearOrientation() {
+        return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
       }
-      onClearIncremental(group, stage) {
-        this.hooks.onClearIncremental.taps.length && this.hooks.onClearIncremental.call(group, stage);
+      function matchConicalOrientation() {
+        return match("angular", tokens.fromAngleValue, 1);
       }
-      beforeUpdateAABBBounds(graphic, stage, willUpdate, bounds) {
-        this.hooks.beforeUpdateAABBBounds.taps.length && this.hooks.beforeUpdateAABBBounds.call(graphic, stage, willUpdate, bounds);
+      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;
       }
-      afterUpdateAABBBounds(graphic, stage, bounds, params, selfChange) {
-        this.hooks.afterUpdateAABBBounds.taps.length && this.hooks.afterUpdateAABBBounds.call(graphic, stage, bounds, params, selfChange);
+      function matchRadialOrientation() {
+        let radialType = function () {
+          const circle = match("shape", /^(circle)/i, 0);
+          circle && (circle.style = matchLength() || matchExtentKeyword());
+          return circle;
+        }() || function () {
+          const ellipse = match("shape", /^(ellipse)/i, 0);
+          ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
+          return ellipse;
+        }();
+        if (radialType) radialType.at = matchAtPosition();else {
+          const extent = matchExtentKeyword();
+          if (extent) {
+            radialType = extent;
+            const positionAt = matchAtPosition();
+            positionAt && (radialType.at = positionAt);
+          } else {
+            const defaultPosition = matchPositioning();
+            defaultPosition && (radialType = {
+              type: "default-radial",
+              at: defaultPosition
+            });
+          }
+        }
+        return radialType;
       }
-      updatePathProxyAABBBounds(aabbBounds, graphic) {
-        const path = "function" == typeof graphic.pathProxy ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
-        if (!path) return !1;
-        const boundsContext = new BoundsContext(aabbBounds);
-        return renderCommandList(path.commandList, boundsContext, 0, 0), !0;
+      function matchExtentKeyword() {
+        return match("extent-keyword", tokens.extentKeywords, 1);
       }
-      updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
-        const {
-          textAlign: textAlign,
-          textBaseline: textBaseline
-        } = attribute;
-        if (null != attribute.forceBoundsHeight) {
-          const h = isNumber$1(attribute.forceBoundsHeight) ? attribute.forceBoundsHeight : attribute.forceBoundsHeight(),
-            dy = textLayoutOffsetY(textBaseline, h, h);
-          aabbBounds.set(aabbBounds.x1, dy, aabbBounds.x2, dy + h);
-        }
-        if (null != attribute.forceBoundsWidth) {
-          const w = isNumber$1(attribute.forceBoundsWidth) ? attribute.forceBoundsWidth : attribute.forceBoundsWidth(),
-            dx = textDrawOffsetX(textAlign, w);
-          aabbBounds.set(dx, aabbBounds.y1, dx + w, aabbBounds.y2);
+      function matchAtPosition() {
+        if (match("position", /^at/, 0)) {
+          const positioning = matchPositioning();
+          return positioning || error("Missing positioning value"), positioning;
         }
       }
-      combindShadowAABBBounds(bounds, graphic) {
-        if (graphic && graphic.shadowRoot) {
-          const b = graphic.shadowRoot.AABBBounds;
-          bounds.union(b);
-        }
+      function matchPositioning() {
+        const location = {
+          x: matchDistance(),
+          y: matchDistance()
+        };
+        if (location.x || location.y) return {
+          type: "position",
+          value: location
+        };
       }
-      transformAABBBounds(attribute, aabbBounds, theme, miter, graphic) {
-        if (!aabbBounds.empty()) {
-          const {
-              scaleX = theme.scaleX,
-              scaleY = theme.scaleY,
-              stroke = theme.stroke,
-              shadowBlur = theme.shadowBlur,
-              lineWidth = theme.lineWidth,
-              pickStrokeBuffer = theme.pickStrokeBuffer,
-              strokeBoundsBuffer = theme.strokeBoundsBuffer
-            } = attribute,
-            tb1 = this.tempAABBBounds1,
-            tb2 = this.tempAABBBounds2;
-          if (stroke && lineWidth) {
-            const scaledHalfLineWidth = (lineWidth + pickStrokeBuffer) / Math.abs(scaleX + scaleY);
-            boundStroke(tb1, scaledHalfLineWidth, miter, strokeBoundsBuffer), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
-          }
-          if (shadowBlur) {
-            const {
-                shadowOffsetX = theme.shadowOffsetX,
-                shadowOffsetY = theme.shadowOffsetY
-              } = attribute,
-              shadowBlurWidth = shadowBlur / Math.abs(scaleX + scaleY) * 2;
-            boundStroke(tb1, shadowBlurWidth, !1, strokeBoundsBuffer + 1), tb1.translate(shadowOffsetX, shadowOffsetY), aabbBounds.union(tb1);
-          }
-        }
-        if (this.combindShadowAABBBounds(aabbBounds, graphic), aabbBounds.empty()) return;
-        let updateMatrix = !0;
-        const m = graphic.transMatrix;
-        graphic && graphic.isContainer && (updateMatrix = !(1 === m.a && 0 === m.b && 0 === m.c && 1 === m.d && 0 === m.e && 0 === m.f)), updateMatrix && transformBoundsWithMatrix(aabbBounds, aabbBounds, m);
+      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;
       }
-      validCheck(attribute, theme, aabbBounds, graphic) {
-        if (!graphic) return !0;
-        if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
-        if (graphic.shadowRoot) return !0;
-        if (!graphic.valid) return aabbBounds.clear(), !1;
-        const {
-          visible = theme.visible
-        } = attribute;
-        return !!visible || (aabbBounds.clear(), !1);
+      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;
       }
-      updateTempAABBBounds(aabbBounds) {
-        const tb1 = this.tempAABBBounds1,
-          tb2 = this.tempAABBBounds2;
-        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), {
-          tb1: tb1,
-          tb2: tb2
+      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);
+      }
+      function match(type, pattern, captureIndex) {
+        const captures = scan(pattern);
+        if (captures) return {
+          type: type,
+          value: captures[captureIndex]
         };
       }
-    };
-    exports.DefaultGraphicService = __decorate$1B([injectable(), __param$R(0, inject(GraphicCreator$1)), __metadata$1d("design:paramtypes", [Object])], exports.DefaultGraphicService);
-
-    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 === exports.BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === exports.BaseRenderContributionTime.afterFillStroke));
+      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;
       }
-      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);
-        });
+      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");
       }
-      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;
+      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);
           }
-          c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
-        });
+        } catch (err) {
+          return c;
+        }
+        return c;
       }
-      valid(graphic, defaultAttribute, fillCb, strokeCb) {
+      static ParseConic(datum) {
         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
+            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
+          }))
         };
       }
-      transform(graphic, graphicAttribute, context) {
-        let use3dMatrixIn3dMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
+      static ParseRadial(datum) {
         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;
-      }
-      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);
-        }
-      }
-      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();
+          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
+          }))
+        };
       }
-      _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
-        const {
-          context: context
-        } = drawContext;
-        if (!context) return;
+      static ParseLinear(datum) {
         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, 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();
+            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
+          }))
+        };
+      }
+    }
+
+    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);
     }
 
     var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -13680,16 +13807,8 @@
             verticalMode = textAttribute.verticalMode,
             x: originX = textAttribute.x,
             y: originY = textAttribute.y
-          } = text.attribute;
-        let {
-          textAlign = textAttribute.textAlign,
-          textBaseline = textAttribute.textBaseline
-        } = text.attribute;
-        if (!verticalMode && "vertical" === direction) {
-          const t = textAlign;
-          textAlign = null !== (_a = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = text.getAlignMapBaseline()[t]) && void 0 !== _b ? _b : "top";
-        }
-        const lineHeight = null !== (_c = calculateLineHeight(text.attribute.lineHeight, fontSize)) && void 0 !== _c ? _c : fontSize,
+          } = text.attribute,
+          lineHeight = null !== (_a = calculateLineHeight(text.attribute.lineHeight, fontSize)) && void 0 !== _a ? _a : fontSize,
           data = this.valid(text, textAttribute, fillCb, strokeCb);
         if (!data) return;
         const {
@@ -13709,79 +13828,60 @@
             const matrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
             matrix.rotateByCenter(Math.PI / 2, _x, _y), context.transformFromMatrix(matrix, !0), matrixAllocate.free(matrix);
           }
-          doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, _x, _y, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, _x, _y, z), this.drawUnderLine(underline, lineThrough, text, _x, _y, z, textAttribute, context))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
+          doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, _x, _y, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, _x, _y, z))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
         };
-        if (text.isMultiLine) {
-          if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
-            const {
-              multilineLayout: multilineLayout
-            } = text;
-            if (!multilineLayout) return void context.highPerformanceRestore();
-            const {
-              xOffset: xOffset,
-              yOffset: yOffset
-            } = multilineLayout.bbox;
-            doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-              context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
-            }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-              context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, textAttribute, context, {
-                width: line.width
-              });
-            })));
-          } else {
-            text.tryUpdateAABBBounds();
-            const cache = text.cache,
-              {
-                verticalList: verticalList
-              } = cache;
-            context.textAlign = "left", context.textBaseline = "top";
-            const totalHeight = lineHeight * verticalList.length;
-            let totalW = 0;
-            verticalList.forEach(verticalData => {
-              const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
-              totalW = max(_w, totalW);
-            });
-            let offsetY = 0,
-              offsetX = 0;
-            "bottom" === textBaseline ? offsetX = -totalHeight : "middle" === textBaseline && (offsetX = -totalHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), verticalList.forEach((verticalData, i) => {
-              const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0),
-                dw = totalW - currentW;
-              let currentOffsetY = offsetY;
-              "center" === textAlign ? currentOffsetY += dw / 2 : "right" === textAlign && (currentOffsetY += dw), verticalData.forEach(item => {
-                const {
-                  text: text,
-                  width: width,
-                  direction: direction
-                } = item;
-                drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction), currentOffsetY += width;
-              });
+        if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
+          const {
+            multilineLayout: multilineLayout
+          } = text;
+          if (!multilineLayout) return void context.highPerformanceRestore();
+          const {
+            xOffset: xOffset,
+            yOffset: yOffset
+          } = multilineLayout.bbox;
+          doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+            context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
+          }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+            context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, line.descent, (line.descent - line.ascent) / 2, z, textAttribute, context, {
+              width: line.width
             });
-          }
-        } else if ("horizontal" === direction) {
-          context.setTextStyle(text.attribute, textAttribute, z);
-          const t = text.clipedText;
-          let dy = 0;
-          lineHeight !== fontSize && ("top" === textBaseline ? dy = (lineHeight - fontSize) / 2 : "middle" === textBaseline || "bottom" === textBaseline && (dy = -(lineHeight - fontSize) / 2)), drawText(t, 0, dy, 0);
+          })));
         } else {
+          let {
+            textAlign = textAttribute.textAlign,
+            textBaseline = textAttribute.textBaseline
+          } = text.attribute;
+          if (!verticalMode) {
+            const t = textAlign;
+            textAlign = null !== (_b = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = text.getAlignMapBaseline()[t]) && void 0 !== _c ? _c : "top";
+          }
           text.tryUpdateAABBBounds();
-          const cache = text.cache;
-          if (cache) {
-            context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
-            const {
+          const cache = text.cache,
+            {
               verticalList: verticalList
             } = cache;
-            let offsetY = 0;
-            const totalW = verticalList[0].reduce((a, b) => a + (b.width || 0), 0);
-            let offsetX = 0;
-            "bottom" === textBaseline ? offsetX = -lineHeight : "middle" === textBaseline && (offsetX = -lineHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), context.textAlign = "left", context.textBaseline = "top", verticalList[0].forEach(item => {
+          context.textAlign = "left", context.textBaseline = "top";
+          const totalHeight = lineHeight * verticalList.length;
+          let totalW = 0;
+          verticalList.forEach(verticalData => {
+            const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
+            totalW = max(_w, totalW);
+          });
+          let offsetY = 0,
+            offsetX = 0;
+          "bottom" === textBaseline ? offsetX = -totalHeight : "middle" === textBaseline && (offsetX = -totalHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), verticalList.forEach((verticalData, i) => {
+            const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0),
+              dw = totalW - currentW;
+            let currentOffsetY = offsetY;
+            "center" === textAlign ? currentOffsetY += dw / 2 : "right" === textAlign && (currentOffsetY += dw), verticalData.forEach(item => {
               const {
                 text: text,
                 width: width,
                 direction: direction
               } = item;
-              drawText(text, offsetX, offsetY, direction), offsetY += width;
+              drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction), currentOffsetY += width;
             });
-          }
+          });
         }
         transform3dMatrixToContextMatrix && this.restoreTransformUseContext2d(text, textAttribute, z, context), this.afterRenderStep(text, context, x, y, doFill, doStroke, fVisible, sVisible, textAttribute, drawContext, fillCb, strokeCb);
       }
@@ -13793,12 +13893,10 @@
           computed3dMatrix = !keepDirIn3d;
         this._draw(text, textAttribute, computed3dMatrix, drawContext, params);
       }
-      drawUnderLine(underline, lineThrough, text, x, y, z, textAttribute, context, multiOption) {
+      drawUnderLine(underline, lineThrough, text, anchorX, anchorY, offsetUnderLineY, offsetThroughLineY, z, textAttribute, context, multiOption) {
         if (lineThrough + underline <= 0) return;
         const {
             textAlign = textAttribute.textAlign,
-            textBaseline = textAttribute.textBaseline,
-            fontSize = textAttribute.fontSize,
             fill = textAttribute.fill,
             opacity = textAttribute.opacity,
             underlineOffset = textAttribute.underlineOffset,
@@ -13808,23 +13906,21 @@
           isMulti = !isNil$1(multiOption),
           w = isMulti ? multiOption.width : text.clipedWidth,
           offsetX = isMulti ? 0 : textDrawOffsetX(textAlign, w),
-          offsetY = textLayoutOffsetY(isMulti ? "alphabetic" : textBaseline, fontSize, fontSize),
           attribute = {
             lineWidth: 0,
             stroke: fill,
             opacity: opacity,
             strokeOpacity: fillOpacity
           };
-        let deltaY = isMulti ? -3 : 0;
         if (underline) {
-          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, x, y, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
-          const dy = y + offsetY + fontSize + underlineOffset + deltaY;
-          context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
+          attribute.lineWidth = underline, context.setStrokeStyle(text, attribute, anchorX, anchorY, textAttribute), underlineDash && context.setLineDash(underlineDash), context.beginPath();
+          const dy = anchorY + offsetUnderLineY + underlineOffset;
+          context.moveTo(anchorX + offsetX, dy, z), context.lineTo(anchorX + offsetX + w, dy, z), context.stroke();
         }
-        if (isMulti && (deltaY = -1), lineThrough) {
-          attribute.lineWidth = lineThrough, context.setStrokeStyle(text, attribute, x, y, textAttribute), context.beginPath();
-          const dy = y + offsetY + fontSize / 2 + deltaY;
-          context.moveTo(x + offsetX, dy, z), context.lineTo(x + offsetX + w, dy, z), context.stroke();
+        if (lineThrough) {
+          attribute.lineWidth = lineThrough, context.setStrokeStyle(text, attribute, anchorX, anchorY, textAttribute), context.beginPath();
+          const dy = anchorY + offsetThroughLineY;
+          context.moveTo(anchorX + offsetX, dy, z), context.lineTo(anchorX + offsetX + w, dy, z), context.stroke();
         }
       }
     };
@@ -14227,10 +14323,7 @@
         const {
           context: context
         } = drawContext;
-        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) {
+        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !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);
@@ -14510,58 +14603,60 @@
       constructor(fontFamily, options, textMeasure) {
         this.fontFamily = fontFamily, this.textOptions = options, this.textMeasure = textMeasure;
       }
-      LayoutBBox(bbox, textAlign, textBaseline) {
+      LayoutBBox(bbox, textAlign, textBaseline, linesLayout) {
         if ("left" === textAlign || "start" === textAlign) bbox.xOffset = 0;else if ("center" === textAlign) bbox.xOffset = bbox.width / -2;else {
           if ("right" !== textAlign && "end" !== textAlign) throw new Error("非法的textAlign");
           bbox.xOffset = -bbox.width;
         }
-        return bbox.yOffset = "top" === textBaseline ? 0 : "middle" === textBaseline ? bbox.height / -2 : "alphabetic" === textBaseline ? -.79 * bbox.height : -bbox.height, bbox;
-      }
-      GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, suffixPosition) {
-        const linesLayout = [],
-          bboxWH = [width, height],
-          bboxOffset = [0, 0];
-        for (; str.length > 0;) {
-          const {
-            str: clipText
-          } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak, suffixPosition);
-          linesLayout.push({
-            str: clipText,
-            width: this.textMeasure.measureTextWidth(clipText, this.textOptions)
-          }), str = str.substring(clipText.length);
-        }
-        "left" === textAlign || "start" === textAlign || ("center" === textAlign ? bboxOffset[0] = bboxWH[0] / -2 : "right" !== textAlign && "end" !== textAlign || (bboxOffset[0] = -bboxWH[0])), "top" === textBaseline || ("middle" === textBaseline ? bboxOffset[1] = bboxWH[1] / -2 : "bottom" === textBaseline && (bboxOffset[1] = -bboxWH[1]));
-        const bbox = {
-          xOffset: bboxOffset[0],
-          yOffset: bboxOffset[1],
-          width: bboxWH[0],
-          height: bboxWH[1]
-        };
-        return this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
+        if ("top" === textBaseline) bbox.yOffset = 0;else if ("middle" === textBaseline) bbox.yOffset = bbox.height / -2;else if ("alphabetic" === textBaseline) {
+          let percent = .79;
+          if (1 === linesLayout.length) {
+            const lineInfo = linesLayout[0];
+            percent = lineInfo.ascent / (lineInfo.ascent + lineInfo.descent);
+          }
+          bbox.yOffset = bbox.height * -percent;
+        } else bbox.yOffset = -bbox.height;
+        return bbox;
       }
       GetLayoutByLines(lines, textAlign, textBaseline, lineHeight) {
         let suffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
         let wordBreak = arguments.length > 5 ? arguments[5] : undefined;
-        let lineWidth = arguments.length > 6 ? arguments[6] : undefined;
-        let suffixPosition = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : "end";
+        let params = arguments.length > 6 ? arguments[6] : undefined;
+        const {
+          lineWidth: lineWidth,
+          suffixPosition = "end",
+          measureMode = exports.MeasureModeEnum.actualBounding
+        } = null != params ? params : {};
         lines = lines.map(l => l.toString());
         const linesLayout = [],
           bboxWH = [0, 0];
         if ("number" == typeof lineWidth && lineWidth !== 1 / 0) {
           let width;
-          for (let i = 0, len = lines.length; i < len; i++) width = Math.min(this.textMeasure.measureTextWidth(lines[i], this.textOptions), lineWidth), linesLayout.push({
-            str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
-            width: width
-          });
+          for (let i = 0, len = lines.length; i < len; i++) {
+            const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions, measureMode);
+            width = Math.min(metrics.width, lineWidth), linesLayout.push({
+              str: metrics.width <= lineWidth ? lines[i].toString() : this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
+              width: width,
+              ascent: metrics.ascent,
+              descent: metrics.descent
+            });
+          }
           bboxWH[0] = lineWidth;
         } else {
-          let width, text;
-          lineWidth = 0;
-          for (let i = 0, len = lines.length; i < len; i++) text = lines[i], width = this.textMeasure.measureTextWidth(text, this.textOptions), lineWidth = Math.max(lineWidth, width), linesLayout.push({
-            str: text,
-            width: width
-          });
-          bboxWH[0] = lineWidth;
+          let width,
+            text,
+            _lineWidth = 0;
+          for (let i = 0, len = lines.length; i < len; i++) {
+            text = lines[i];
+            const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions, measureMode);
+            width = metrics.width, _lineWidth = Math.max(_lineWidth, width), linesLayout.push({
+              str: text,
+              width: width,
+              ascent: metrics.ascent,
+              descent: metrics.descent
+            });
+          }
+          bboxWH[0] = _lineWidth;
         }
         bboxWH[1] = linesLayout.length * lineHeight, bboxWH[0] = linesLayout.reduce((a, b) => Math.max(a, b.width), 0);
         const bbox = {
@@ -14570,7 +14665,7 @@
           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],
@@ -14589,11 +14684,13 @@
         };
       }
       lineOffset(bbox, line, textAlign, textBaseline, lineHeight, origin) {
-        return "left" === textAlign || "start" === textAlign ? line.leftOffset = 0 : "center" === textAlign ? line.leftOffset = (bbox.width - line.width) / 2 : "right" !== textAlign && "end" !== textAlign || (line.leftOffset = bbox.width - line.width), line.topOffset = (lineHeight - this.textOptions.fontSize) / 2 + .79 * this.textOptions.fontSize + origin[1], origin[1] += lineHeight, line;
+        "left" === textAlign || "start" === textAlign ? line.leftOffset = 0 : "center" === textAlign ? line.leftOffset = (bbox.width - line.width) / 2 : "right" !== textAlign && "end" !== textAlign || (line.leftOffset = bbox.width - line.width), line.topOffset = lineHeight / 2 + (line.ascent - line.descent) / 2 + origin[1];
+        const actualHeightWithBuf = line.ascent + line.descent + 0;
+        return actualHeightWithBuf < lineHeight - 0 && ("bottom" === textBaseline ? line.topOffset += (lineHeight - actualHeightWithBuf) / 2 : "top" === textBaseline && (line.topOffset -= (lineHeight - actualHeightWithBuf) / 2)), origin[1] += lineHeight, line;
       }
     }
 
-    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
+    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "maxWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
     class Text extends Graphic {
       get font() {
         const textTheme = this.getGraphicTheme();
@@ -14602,26 +14699,22 @@
       get clipedText() {
         var _a;
         const attribute = this.attribute,
-          textTheme = this.getGraphicTheme();
-        if (!this.isSimplify()) return;
-        const {
-          maxLineWidth = textTheme.maxLineWidth
-        } = attribute;
-        return Number.isFinite(maxLineWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
+          textTheme = this.getGraphicTheme(),
+          maxWidth = this.getMaxWidth(textTheme);
+        return Number.isFinite(maxWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
       }
       get clipedWidth() {
-        if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
+        return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
       }
       get cliped() {
         var _a, _b;
         const textTheme = this.getGraphicTheme(),
           attribute = this.attribute,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            text: text,
-            whiteSpace = textTheme.whiteSpace
-          } = attribute;
-        if (!Number.isFinite(maxLineWidth)) return !1;
+          maxWidth = this.getMaxWidth(textTheme);
+        if (!Number.isFinite(maxWidth)) return !1;
+        const {
+          text: text
+        } = this.attribute;
         if (this.tryUpdateAABBBounds(), null === (_b = null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData) || void 0 === _b ? void 0 : _b.lines) {
           let mergedText = "";
           this.cache.layoutData.lines.forEach(item => {
@@ -14632,10 +14725,7 @@
         return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
       }
       get multilineLayout() {
-        if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
-      }
-      isSimplify() {
-        return !this.isMultiLine && "vertical" !== this.attribute.direction;
+        return this.tryUpdateAABBBounds(), this.cache.layoutData;
       }
       get isMultiLine() {
         return Array.isArray(this.attribute.text) || "normal" === this.attribute.whiteSpace;
@@ -14708,8 +14798,72 @@
         }
         return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
       }
+      updateSingallineAABBBounds(text) {
+        this.updateMultilineAABBBounds([text]);
+        const layoutData = this.cache.layoutData;
+        if (layoutData) {
+          const line = layoutData.lines[0];
+          this.cache.clipedText = line.str, this.cache.clipedWidth = line.width;
+        }
+        return this._AABBBounds;
+      }
+      updateMultilineAABBBounds(text) {
+        const textTheme = this.getGraphicTheme(),
+          {
+            direction = textTheme.direction,
+            underlineOffset = textTheme.underlineOffset
+          } = this.attribute,
+          b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+        return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
+      }
+      guessLineHeightBuf(fontSize) {
+        return fontSize ? .1 * fontSize : 0;
+      }
+      updateHorizontalMultilineAABBBounds(text) {
+        var _a;
+        const textTheme = this.getGraphicTheme(),
+          attribute = this.attribute,
+          {
+            fontFamily = textTheme.fontFamily,
+            textAlign = textTheme.textAlign,
+            textBaseline = textTheme.textBaseline,
+            fontSize = textTheme.fontSize,
+            fontWeight = textTheme.fontWeight,
+            ellipsis = textTheme.ellipsis,
+            maxLineWidth: maxLineWidth,
+            stroke = textTheme.stroke,
+            wrap = textTheme.wrap,
+            measureMode = textTheme.measureMode,
+            lineWidth = textTheme.lineWidth,
+            whiteSpace = textTheme.whiteSpace,
+            suffixPosition = textTheme.suffixPosition,
+            ignoreBuf = textTheme.ignoreBuf
+          } = attribute,
+          buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize),
+          lineHeight = this.getLineHeight(attribute, textTheme) + buf;
+        if ("normal" === whiteSpace || wrap) return this.updateWrapAABBBounds(text);
+        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+          const bbox = this.cache.layoutData.bbox;
+          return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        const textMeasure = application.graphicUtil.textMeasure,
+          layoutData = new CanvasTextLayout(fontFamily, {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily,
+            lineHeight: lineHeight
+          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, {
+            lineWidth: maxLineWidth,
+            suffixPosition: suffixPosition,
+            measureMode: measureMode
+          }),
+          {
+            bbox: bbox
+          } = layoutData;
+        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
       updateWrapAABBBounds(text) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const textTheme = this.getGraphicTheme(),
           {
             fontFamily = textTheme.fontFamily,
@@ -14723,22 +14877,25 @@
             wordBreak = textTheme.wordBreak,
             fontWeight = textTheme.fontWeight,
             ignoreBuf = textTheme.ignoreBuf,
+            measureMode = textTheme.measureMode,
             suffixPosition = textTheme.suffixPosition,
             heightLimit = 0,
             lineClamp: lineClamp
           } = this.attribute,
-          lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
-          buf = ignoreBuf ? 0 : 2;
-        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
+          buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize),
+          lineHeight = this.getLineHeight(this.attribute, textTheme) + buf;
+        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
           const bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
         const textMeasure = application.graphicUtil.textMeasure,
-          layoutObj = new CanvasTextLayout(fontFamily, {
+          textOptions = {
             fontSize: fontSize,
             fontWeight: fontWeight,
-            fontFamily: fontFamily
-          }, textMeasure),
+            fontFamily: fontFamily,
+            lineHeight: lineHeight
+          },
+          layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure),
           lines = isArray$1(text) ? text.map(l => l.toString()) : [text.toString()],
           linesLayout = [],
           bboxWH = [0, 0];
@@ -14748,29 +14905,35 @@
             const str = lines[i];
             let needCut = !0;
             if (i === lineCountLimit - 1) {
-              const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1);
+              const clip = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1),
+                matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: matrics.ascent,
+                descent: matrics.descent
               });
               break;
             }
-            const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
+            const clip = textMeasure.clipText(str, textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
             if ("" !== str && "" === clip.str || clip.wordBreaked) {
               if (ellipsis) {
-                const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
+                const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+                clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
+            const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
             linesLayout.push({
               str: clip.str,
-              width: clip.width
+              width: clip.width,
+              ascent: matrics.ascent,
+              descent: matrics.descent
             });
             let cutLength = clip.str.length;
             if (!clip.wordBreaked || "" !== str && "" === clip.str || (needCut = !0, cutLength = clip.wordBreaked), clip.str.length === str.length) ;else if (needCut) {
-              let newStr = str.substring(cutLength);
-              "keep-all" === wordBreak && (newStr = newStr.replace(/^\s+/g, "")), lines.splice(i + 1, 0, newStr);
+              const newStr = str.substring(cutLength);
+              lines.splice(i + 1, 0, newStr);
             }
           }
           let maxWidth = 0;
@@ -14783,235 +14946,44 @@
             lineWidth = 0;
           for (let i = 0, len = lines.length; i < len; i++) {
             if (i === lineCountLimit - 1) {
-              const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+              const clip = textMeasure.clipTextWithSuffix(lines[i], textOptions, maxLineWidth, ellipsis, !1, suffixPosition),
+                matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions, measureMode);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: matrics.ascent,
+                descent: matrics.descent
               }), lineWidth = Math.max(lineWidth, clip.width);
               break;
             }
-            text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
+            text = lines[i], width = textMeasure.measureTextWidth(text, textOptions), lineWidth = Math.max(lineWidth, width);
+            const matrics = textMeasure.measureTextPixelADscentAndWidth(text, textOptions, measureMode);
+            linesLayout.push({
               str: text,
-              width: width
+              width: width,
+              ascent: matrics.ascent,
+              descent: matrics.descent
             });
           }
           bboxWH[0] = lineWidth;
         }
-        bboxWH[1] = linesLayout.length * (lineHeight + buf);
+        bboxWH[1] = linesLayout.length * lineHeight;
         const bbox = {
           xOffset: 0,
           yOffset: 0,
           width: bboxWH[0],
           height: bboxWH[1]
         };
-        layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
+        layoutObj.LayoutBBox(bbox, textAlign, textBaseline, linesLayout);
         const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
         return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
-      updateSingallineAABBBounds(text) {
-        const textTheme = this.getGraphicTheme(),
-          {
-            direction = textTheme.direction,
-            underlineOffset = textTheme.underlineOffset
-          } = this.attribute,
-          b = "horizontal" === direction ? this.updateHorizontalSinglelineAABBBounds(text) : this.updateVerticalSinglelineAABBBounds(text);
-        return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
-      }
-      updateMultilineAABBBounds(text) {
-        const textTheme = this.getGraphicTheme(),
-          {
-            direction = textTheme.direction,
-            underlineOffset = textTheme.underlineOffset
-          } = this.attribute,
-          b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
-        return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
-      }
-      updateHorizontalSinglelineAABBBounds(text) {
-        var _a, _b;
-        const textTheme = this.getGraphicTheme(),
-          {
-            wrap = textTheme.wrap
-          } = this.attribute;
-        if (wrap) return this.updateWrapAABBBounds([text]);
-        const textMeasure = application.graphicUtil.textMeasure;
-        let width, str;
-        const attribute = this.attribute,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            ellipsis = textTheme.ellipsis,
-            textAlign = textTheme.textAlign,
-            textBaseline = textTheme.textBaseline,
-            fontFamily = textTheme.fontFamily,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth,
-            ignoreBuf = textTheme.ignoreBuf,
-            whiteSpace = textTheme.whiteSpace,
-            suffixPosition = textTheme.suffixPosition
-          } = attribute;
-        if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
-        const buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
-          textFontSize = attribute.fontSize || textTheme.fontSize,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) && void 0 !== _a ? _a : textFontSize + buf;
-        if (!this.shouldUpdateShape() && this.cache) {
-          width = null !== (_b = this.cache.clipedWidth) && void 0 !== _b ? _b : 0;
-          const dx = textDrawOffsetX(textAlign, width),
-            dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-          return this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        if (Number.isFinite(maxLineWidth)) {
-          if (ellipsis) {
-            const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
-              data = textMeasure.clipTextWithSuffix(text.toString(), {
-                fontSize: fontSize,
-                fontWeight: fontWeight,
-                fontFamily: fontFamily
-              }, maxLineWidth, strEllipsis, !1, suffixPosition);
-            str = data.str, width = data.width;
-          } else {
-            const data = textMeasure.clipText(text.toString(), {
-              fontSize: fontSize,
-              fontWeight: fontWeight,
-              fontFamily: fontFamily
-            }, maxLineWidth, !1);
-            str = data.str, width = data.width;
-          }
-          this.cache.clipedText = str, this.cache.clipedWidth = width;
-        } else width = textMeasure.measureTextWidth(text.toString(), {
-          fontSize: fontSize,
-          fontWeight: fontWeight,
-          fontFamily: fontFamily
-        }), this.cache.clipedText = text.toString(), this.cache.clipedWidth = width;
-        this.clearUpdateShapeTag();
-        const dx = textDrawOffsetX(textAlign, width);
-        let lh = lineHeight;
-        application.global && application.global.isSafari() && (lh += .2 * fontSize);
-        const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
-        return this._AABBBounds.set(dx, dy, dx + width, dy + lh), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
-      getBaselineMapAlign() {
-        return Text.baselineMapAlign;
-      }
-      getAlignMapBaseline() {
-        return Text.alignMapBaseline;
-      }
-      updateVerticalSinglelineAABBBounds(text) {
-        var _a, _b, _c;
-        const textTheme = this.getGraphicTheme(),
-          textMeasure = application.graphicUtil.textMeasure;
-        let width;
-        const attribute = this.attribute,
-          {
-            ignoreBuf = textTheme.ignoreBuf
-          } = attribute,
-          buf = ignoreBuf ? 0 : 2,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            ellipsis = textTheme.ellipsis,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            fontFamily = textTheme.fontFamily,
-            stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth,
-            verticalMode = textTheme.verticalMode,
-            suffixPosition = textTheme.suffixPosition
-          } = attribute,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
-        let {
-          textAlign = textTheme.textAlign,
-          textBaseline = textTheme.textBaseline
-        } = attribute;
-        if (!verticalMode) {
-          const t = textAlign;
-          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
-        }
-        if (!this.shouldUpdateShape() && this.cache) {
-          width = this.cache.clipedWidth;
-          const dx = textDrawOffsetX(textAlign, width),
-            dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-          return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        let verticalList = [verticalLayout(text.toString())];
-        if (Number.isFinite(maxLineWidth)) {
-          if (ellipsis) {
-            const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
-              data = textMeasure.clipTextWithSuffixVertical(verticalList[0], {
-                fontSize: fontSize,
-                fontWeight: fontWeight,
-                fontFamily: fontFamily
-              }, maxLineWidth, strEllipsis, !1, suffixPosition);
-            verticalList = [data.verticalList], width = data.width;
-          } else {
-            const data = textMeasure.clipTextVertical(verticalList[0], {
-              fontSize: fontSize,
-              fontWeight: fontWeight,
-              fontFamily: fontFamily
-            }, maxLineWidth, !1);
-            verticalList = [data.verticalList], width = data.width;
-          }
-          this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
-        } else width = 0, verticalList[0].forEach(t => {
-          const w = t.direction === exports.TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          });
-          width += w, t.width = w;
-        }), this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
-        this.clearUpdateShapeTag();
-        const dx = textDrawOffsetX(textAlign, width),
-          dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-        return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
-      updateHorizontalMultilineAABBBounds(text) {
-        var _a, _b;
-        const textTheme = this.getGraphicTheme(),
-          {
-            wrap = textTheme.wrap
-          } = this.attribute;
-        if (wrap) return this.updateWrapAABBBounds(text);
-        const attribute = this.attribute,
-          {
-            fontFamily = textTheme.fontFamily,
-            textAlign = textTheme.textAlign,
-            textBaseline = textTheme.textBaseline,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            ellipsis = textTheme.ellipsis,
-            maxLineWidth: maxLineWidth,
-            stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth,
-            whiteSpace = textTheme.whiteSpace,
-            suffixPosition = textTheme.suffixPosition
-          } = attribute,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
-        if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
-        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
-          const bbox = this.cache.layoutData.bbox;
-          return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        const textMeasure = application.graphicUtil.textMeasure,
-          layoutData = new CanvasTextLayout(fontFamily, {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth, suffixPosition),
-          {
-            bbox: bbox
-          } = layoutData;
-        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
       updateVerticalMultilineAABBBounds(text) {
-        var _a, _b, _c;
+        var _a, _b;
         const textTheme = this.getGraphicTheme(),
           textMeasure = application.graphicUtil.textMeasure;
         let width;
         const attribute = this.attribute,
-          {
-            ignoreBuf = textTheme.ignoreBuf
-          } = attribute,
-          buf = ignoreBuf ? 0 : 2,
           {
             maxLineWidth = textTheme.maxLineWidth,
             ellipsis = textTheme.ellipsis,
@@ -15023,14 +14995,14 @@
             verticalMode = textTheme.verticalMode,
             suffixPosition = textTheme.suffixPosition
           } = attribute,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+          lineHeight = this.getLineHeight(attribute, textTheme);
         let {
           textAlign = textTheme.textAlign,
           textBaseline = textTheme.textBaseline
         } = attribute;
         if (!verticalMode) {
           const t = textAlign;
-          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
+          textAlign = null !== (_a = Text.baselineMapAlign[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = Text.alignMapBaseline[t]) && void 0 !== _b ? _b : "top";
         }
         if (width = 0, !this.shouldUpdateShape() && this.cache) {
           this.cache.verticalList.forEach(item => {
@@ -15078,6 +15050,15 @@
           dy = textLayoutOffsetY(textBaseline, height, fontSize);
         return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
+      getMaxWidth(theme) {
+        var _a, _b;
+        const attribute = this.attribute;
+        return null !== (_b = null !== (_a = attribute.maxLineWidth) && void 0 !== _a ? _a : attribute.maxWidth) && void 0 !== _b ? _b : theme.maxWidth;
+      }
+      getLineHeight(attribute, textTheme) {
+        var _a;
+        return null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
+      }
       needUpdateTags(keys) {
         let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
         return super.needUpdateTags(keys, k);
@@ -15092,6 +15073,12 @@
       getNoWorkAnimateAttr() {
         return Text.NOWORK_ANIMATE_ATTR;
       }
+      getBaselineMapAlign() {
+        return Text.baselineMapAlign;
+      }
+      getAlignMapBaseline() {
+        return Text.alignMapBaseline;
+      }
     }
     Text.NOWORK_ANIMATE_ATTR = Object.assign({
       ellipsis: 1,
@@ -15170,7 +15157,9 @@
               const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: 0,
+                descent: 0
               });
               break;
             }
@@ -15184,7 +15173,9 @@
             }
             if (linesLayout.push({
               str: clip.str,
-              width: clip.width
+              width: clip.width,
+              ascent: 0,
+              descent: 0
             }), clip.str.length === str.length) ;else if (needCut) {
               const newStr = str.substring(clip.str.length);
               lines.splice(i + 1, 0, newStr);
@@ -15203,13 +15194,17 @@
               const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: 0,
+                descent: 0
               }), lineWidth = Math.max(lineWidth, clip.width);
               break;
             }
             text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
               str: text,
-              width: width
+              width: width,
+              ascent: 0,
+              descent: 0
             });
           }
           bboxWH[0] = lineWidth;
@@ -16386,7 +16381,7 @@
         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();
+        this.character.stroke && lineWidth && (applyStrokeStyle(ctx, this.character), ctx.strokeText(text, left, baseline)), applyFillStyle(ctx, this.character), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill && ("boolean" == typeof this.character.lineThrough || "boolean" == typeof this.character.underline ? (this.character.underline && ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1), this.character.lineThrough && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)) : "underline" === this.character.textDecoration ? ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1) : "line-through" === this.character.textDecoration && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)), "vertical" === direction && ctx.restore();
       }
       getWidthWithEllips(direction) {
         let text = this.text;
@@ -16609,18 +16604,12 @@
             paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
           }
         }
-        this.paragraphs.forEach((paragraph, index) => {
+        this.paragraphs.map((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);
-          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);
+          paragraph.draw(ctx, y + this.ascent, x, 0 === index, this.textAlign);
         });
       }
       getWidthWithEllips(ellipsis) {
@@ -16643,7 +16632,7 @@
           paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
         }
         let width = 0;
-        return this.paragraphs.forEach((paragraph, index) => {
+        return this.paragraphs.map((paragraph, index) => {
           width += paragraph instanceof RichTextIcon ? paragraph.width : paragraph.getWidthWithEllips(this.direction);
         }), width;
       }
@@ -18485,13 +18474,15 @@
           graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === this.pluginService.stage && stage.renderCount && (graphic.isContainer && !graphic.shouldSelfChangeUpdateAABBBounds() || willUpdate && (globalBounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2), stage.dirty(globalBounds, graphic.parent && graphic.parent.globalTransMatrix)));
         }), application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
           stage && stage === this.pluginService.stage && stage.renderCount && (graphic.isContainer && !selfChange || stage.dirty(params.globalAABBBounds));
+        }), application.graphicService.hooks.clearAABBBounds.tap(this.key, (graphic, stage, bounds) => {
+          stage && stage === this.pluginService.stage && stage.renderCount && stage && stage.dirty(bounds);
         }), application.graphicService.hooks.onRemove.tap(this.key, graphic => {
           const stage = graphic.stage;
           stage && stage === this.pluginService.stage && stage.renderCount && stage && stage.dirty(graphic.globalAABBBounds);
         });
       }
       deactivate(context) {
-        application.graphicService.hooks.beforeUpdateAABBBounds.taps = application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => item.name !== this.key), application.graphicService.hooks.afterUpdateAABBBounds.taps = application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => item.name !== this.key), context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => item.name !== this.key), application.graphicService.hooks.onRemove.taps = application.graphicService.hooks.onRemove.taps.filter(item => item.name !== this.key);
+        application.graphicService.hooks.beforeUpdateAABBBounds.taps = application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => item.name !== this.key), application.graphicService.hooks.afterUpdateAABBBounds.taps = application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => item.name !== this.key), application.graphicService.hooks.clearAABBBounds.taps = application.graphicService.hooks.clearAABBBounds.taps.filter(item => item.name !== this.key), context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => item.name !== this.key), application.graphicService.hooks.onRemove.taps = application.graphicService.hooks.onRemove.taps.filter(item => item.name !== this.key);
       }
     }
 
@@ -18607,7 +18598,7 @@
       constructor() {
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var _a;
-        super({}), this._onVisibleChange = visible => {
+        super({}), this.tickedBeforeRender = !0, this._onVisibleChange = visible => {
           if (!(this._skipRender < 0)) if (visible) {
             if (this.dirtyBounds) {
               const b = this.window.getViewBox();
@@ -18618,7 +18609,10 @@
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
         }, this.afterRender = stage => {
-          this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null;
+          this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
+        }, this.afterTickCb = () => {
+          var _a;
+          this.tickedBeforeRender = !0, "performance" === (null === (_a = this.params.optimize) || void 0 === _a ? void 0 : _a.tickRenderMode) || "rendering" !== this.state && this.render();
         }, this.params = params, this.theme = new Theme(), this.hooks = {
           beforeRender: new SyncHook(["stage"]),
           afterRender: new SyncHook(["stage"])
@@ -18635,7 +18629,7 @@
           main: !0
         })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
-        });
+        }), this.ticker.on("afterTick", this.afterTickCb);
       }
       pauseRender() {
         let sr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
@@ -18864,7 +18858,7 @@
         if ("released" === this.releaseStatus) return;
         this.ticker.start(), this.timeline.resume();
         const state = this.state;
-        this.state = "rendering", this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
+        this.state = "rendering", this.tickedBeforeRender || this.ticker.trySyncTickStatus(), this.layerService.prepareStageLayer(this), this._skipRender || (this.lastRenderparams = params, this.hooks.beforeRender.call(this), this._skipRender || (this.renderLayerList(this.children), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear()), this.hooks.afterRender.call(this)), this.state = state, this._skipRender && this._skipRender++;
       }
       combineLayersToWindow() {
         if ("harmony" === this.global.env) {
@@ -18970,7 +18964,7 @@
           layer.release();
         }), this.interactiveLayer && (this.interactiveLayer.forEachChildren(item => {
           item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-        }), this.interactiveLayer.release()), this.window.release(), this.ticker.remTimeline(this.timeline), this.renderService.renderTreeRoots = [];
+        }), this.interactiveLayer.release()), this.window.release(), this.ticker.remTimeline(this.timeline), this.ticker.removeListener("afterTick", this.afterTickCb), this.renderService.renderTreeRoots = [];
       }
       setStage(stage) {}
       dirty(b, matrix) {
@@ -19048,8 +19042,6 @@
       return new Stage(params);
     }
 
-    const strCommandMap = ["arc", "arcTo", "bezierCurveTo", "closePath", "ellipse", "lineTo", "moveTo", "quadraticCurveTo", "rect"];
-
     var __decorate$1d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -28635,7 +28627,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.20.16";
+    const version = "0.21.0-alpha.10";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);