@visactor/vrender 0.20.15 → 0.20.17

package/dist/index.es.js

@@ -1696,7 +1696,9 @@ class TextMeasure {
       } = this.textSpec;
     return {
       width: metrics.width,
-      height: null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize
+      height: null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize,
+      fontBoundingBoxAscent: metrics.fontBoundingBoxAscent,
+      fontBoundingBoxDescent: metrics.fontBoundingBoxDescent
     };
   }
   quickMeasure(text) {
@@ -1710,7 +1712,7 @@ class TextMeasure {
     for (let i = 0; i < text.length; i++) {
       const char = text[i];
       let size = this._measureSpecialChar(char);
-      isNil$1(size) && TextMeasure.NUMBERS_CHAR_SET.includes(char) && (size = this._measureNumberChar()), isNil$1(size) && ["F", "W"].includes(eastAsianCharacterInfo(char)) && (size = this._measureFullSizeChar()), isNil$1(size) && (size = this._measureLetterChar()), totalSize.width += size.width, totalSize.height = Math.max(totalSize.height, size.height);
+      isNil$1(size) && TextMeasure.NUMBERS_CHAR_SET.includes(char) && (size = this._measureNumberChar()), isNil$1(size) && ["F", "W"].includes(eastAsianCharacterInfo(char)) && (size = this._measureFullSizeChar()), isNil$1(size) && (size = this._measureLetterChar()), totalSize.width += size.width, totalSize.height = Math.max(totalSize.height, size.height), !isNil$1(size.fontBoundingBoxAscent) && (totalSize.fontBoundingBoxAscent = size.fontBoundingBoxAscent), !isNil$1(size.fontBoundingBoxDescent) && (totalSize.fontBoundingBoxDescent = size.fontBoundingBoxDescent);
     }
     return totalSize;
   }
@@ -1759,7 +1761,9 @@ class TextMeasure {
       const numberBounds = this._standardMethod(TextMeasure.NUMBERS_CHAR_SET);
       this._numberCharSize = {
         width: numberBounds.width / TextMeasure.NUMBERS_CHAR_SET.length,
-        height: numberBounds.height
+        height: numberBounds.height,
+        fontBoundingBoxAscent: numberBounds.fontBoundingBoxAscent,
+        fontBoundingBoxDescent: numberBounds.fontBoundingBoxDescent
       };
     }
     return this._numberCharSize;
@@ -1772,7 +1776,9 @@ class TextMeasure {
       const alphabetBounds = this._standardMethod(TextMeasure.ALPHABET_CHAR_SET);
       this._letterCharSize = {
         width: alphabetBounds.width / TextMeasure.ALPHABET_CHAR_SET.length,
-        height: alphabetBounds.height
+        height: alphabetBounds.height,
+        fontBoundingBoxAscent: alphabetBounds.fontBoundingBoxAscent,
+        fontBoundingBoxDescent: alphabetBounds.fontBoundingBoxDescent
       };
     }
     return this._letterCharSize;
@@ -4143,6 +4149,292 @@ const DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImag
 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;
+  }
+  function matchDefinition() {
+    return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+  }
+  function matchGradient(gradientType, pattern, orientationMatcher) {
+    return function (pattern, callback) {
+      const captures = scan(pattern);
+      if (captures) {
+        scan(tokens.startCall) || error("Missing (");
+        const result = callback(captures);
+        return scan(tokens.endCall) || error("Missing )"), result;
+      }
+    }(pattern, function (captures) {
+      const orientation = orientationMatcher();
+      return orientation && (scan(tokens.comma) || error("Missing comma before color stops")), {
+        type: gradientType,
+        orientation: orientation,
+        colorStops: matchListing(matchColorStop)
+      };
+    });
+  }
+  function matchLinearOrientation() {
+    return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+  }
+  function matchConicalOrientation() {
+    return match("angular", tokens.fromAngleValue, 1);
+  }
+  function matchListRadialOrientations() {
+    let radialOrientations,
+      lookaheadCache,
+      radialOrientation = matchRadialOrientation();
+    return radialOrientation && (radialOrientations = [], radialOrientations.push(radialOrientation), lookaheadCache = input, scan(tokens.comma) && (radialOrientation = matchRadialOrientation(), radialOrientation ? radialOrientations.push(radialOrientation) : input = lookaheadCache)), radialOrientations;
+  }
+  function matchRadialOrientation() {
+    let radialType = function () {
+      const circle = match("shape", /^(circle)/i, 0);
+      circle && (circle.style = matchLength() || matchExtentKeyword());
+      return circle;
+    }() || function () {
+      const ellipse = match("shape", /^(ellipse)/i, 0);
+      ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
+      return ellipse;
+    }();
+    if (radialType) radialType.at = matchAtPosition();else {
+      const extent = matchExtentKeyword();
+      if (extent) {
+        radialType = extent;
+        const positionAt = matchAtPosition();
+        positionAt && (radialType.at = positionAt);
+      } else {
+        const defaultPosition = matchPositioning();
+        defaultPosition && (radialType = {
+          type: "default-radial",
+          at: defaultPosition
+        });
+      }
+    }
+    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;
+    }
+  }
+  function matchPositioning() {
+    const location = {
+      x: matchDistance(),
+      y: matchDistance()
+    };
+    if (location.x || location.y) return {
+      type: "position",
+      value: location
+    };
+  }
+  function matchListing(matcher) {
+    let captures = matcher();
+    const result = [];
+    if (captures) for (result.push(captures); scan(tokens.comma);) captures = matcher(), captures ? result.push(captures) : error("One extra comma");
+    return result;
+  }
+  function matchColorStop() {
+    const color = match("hex", tokens.hexColor, 1) || match("rgba", tokens.rgbaColor, 1) || match("rgb", tokens.rgbColor, 1) || match("literal", tokens.literalColor, 0);
+    return color || error("Expected color definition"), color.length = matchDistance(), color;
+  }
+  function matchDistance() {
+    return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+  }
+  function matchLength() {
+    return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+  }
+  function match(type, pattern, captureIndex) {
+    const captures = scan(pattern);
+    if (captures) return {
+      type: type,
+      value: captures[captureIndex]
+    };
+  }
+  function scan(regexp) {
+    const blankCaptures = /^[\n\r\t\s]+/.exec(input);
+    blankCaptures && consume(blankCaptures[0].length);
+    const captures = regexp.exec(input);
+    return captures && consume(captures[0].length), captures;
+  }
+  function consume(size) {
+    input = input.substr(size);
+  }
+  return function (code) {
+    return input = code.toString(), getAST();
+  };
+}();
+class GradientParser {
+  static IsGradient(c) {
+    return !("string" == typeof c && !c.includes("gradient"));
+  }
+  static IsGradientStr(c) {
+    return "string" == typeof c && c.includes("gradient");
+  }
+  static Parse(c) {
+    if (GradientParser.IsGradientStr(c)) try {
+      const datum = parse(c)[0];
+      if (datum) {
+        if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
+        if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
+        if ("conic" === datum.type) return GradientParser.ParseConic(datum);
+      }
+    } catch (err) {
+      return c;
+    }
+    return c;
+  }
+  static ParseConic(datum) {
+    const {
+        orientation: orientation,
+        colorStops = []
+      } = datum,
+      halfPi = pi / 2,
+      sa = parseFloat(orientation.value) / 180 * pi - halfPi;
+    return {
+      gradient: "conical",
+      x: .5,
+      y: .5,
+      startAngle: sa,
+      endAngle: sa + pi2,
+      stops: colorStops.map(item => ({
+        color: item.value,
+        offset: parseFloat(item.length.value) / 100
+      }))
+    };
+  }
+  static ParseRadial(datum) {
+    const {
+      colorStops = []
+    } = datum;
+    return {
+      gradient: "radial",
+      x0: .5,
+      y0: .5,
+      x1: .5,
+      y1: .5,
+      r0: 0,
+      r1: 1,
+      stops: colorStops.map(item => ({
+        color: item.value,
+        offset: parseFloat(item.length.value) / 100
+      }))
+    };
+  }
+  static ParseLinear(datum) {
+    const {
+        orientation: orientation,
+        colorStops = []
+      } = datum,
+      halfPi = pi / 2;
+    let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi : 0;
+    for (; angle < 0;) angle += pi2;
+    for (; angle >= pi2;) angle -= pi2;
+    let x0 = 0,
+      y0 = 0,
+      x1 = 0,
+      y1 = 0;
+    return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = y0 - Math.cos(angle)) : angle < pi ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi), y1 = Math.cos(angle - pi)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi), y1 -= Math.sin(angle - halfPi - pi)), {
+      gradient: "linear",
+      x0: x0,
+      y0: y0,
+      x1: x1,
+      y1: y1,
+      stops: colorStops.map(item => ({
+        color: item.value,
+        offset: parseFloat(item.length.value) / 100
+      }))
+    };
+  }
+}
+
+function getScaledStroke(context, width, dpr) {
+  let strokeWidth = width;
+  const {
+      a: a,
+      b: b,
+      c: c,
+      d: d
+    } = context.currentMatrix,
+    scaleX = Math.sign(a) * Math.sqrt(a * a + b * b),
+    scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
+  return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
+}
+function createColor(context, c, params) {
+  let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  if (!c || !0 === c) return "black";
+  let result, color;
+  if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
+  if (color = GradientParser.Parse(color), "string" == typeof color) return color;
+  if (params.AABBBounds && (!params.attribute || 0 !== params.attribute.scaleX || 0 !== params.attribute.scaleY)) {
+    const bounds = params.AABBBounds;
+    let w = bounds.x2 - bounds.x1,
+      h = bounds.y2 - bounds.y1,
+      x = bounds.x1 - offsetX,
+      y = bounds.y1 - offsetY;
+    if (params.attribute) {
+      const {
+        scaleX = 1,
+        scaleY = 1
+      } = params.attribute;
+      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+    }
+    "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
+  }
+  return result || "orange";
+}
+function createLinearGradient(context, color, x, y, w, h) {
+  var _a, _b, _c, _d;
+  const canvasGradient = context.createLinearGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : 0) * h, x + (null !== (_c = color.x1) && void 0 !== _c ? _c : 1) * w, y + (null !== (_d = color.y1) && void 0 !== _d ? _d : 0) * h);
+  return color.stops.forEach(stop => {
+    canvasGradient.addColorStop(stop.offset, stop.color);
+  }), canvasGradient;
+}
+function createRadialGradient(context, color, x, y, w, h) {
+  var _a, _b, _c, _d, _e, _f;
+  const canvasGradient = context.createRadialGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : .5) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : .5) * h, Math.max(w, h) * (null !== (_c = color.r0) && void 0 !== _c ? _c : 0), x + (null !== (_d = color.x1) && void 0 !== _d ? _d : .5) * w, y + (null !== (_e = color.y1) && void 0 !== _e ? _e : .5) * h, Math.max(w, h) * (null !== (_f = color.r1) && void 0 !== _f ? _f : .5));
+  return color.stops.forEach(stop => {
+    canvasGradient.addColorStop(stop.offset, stop.color);
+  }), canvasGradient;
+}
+function createConicGradient(context, color, x, y, w, h) {
+  var _a, _b;
+  const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
+  return color.stops.forEach(stop => {
+    canvasGradient.addColorStop(stop.offset, stop.color);
+  }), canvasGradient.GetPattern(w + x, h + y, undefined);
+}
+
 const DIRECTION_KEY = {
   horizontal: {
     width: "width",
@@ -4194,14 +4486,16 @@ const setTextStyle = (ctx, character) => {
     fontFamily: character.fontFamily || "sans-serif"
   });
 };
-function applyFillStyle(ctx, character) {
+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 = fillStyle, setTextStyle(ctx, 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;
@@ -11113,697 +11407,411 @@ class DefaultMatrixAllocate {
   allocate(a, b, c, d, e, f) {
     if (!this.pools.length) return new Matrix(a, b, c, d, e, f);
     const m = this.pools.pop();
-    return m.a = a, m.b = b, m.c = c, m.d = d, m.e = e, m.f = f, m;
-  }
-  allocateByObj(matrix) {
-    if (!this.pools.length) return new Matrix(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
-    const m = this.pools.pop();
-    return m.a = matrix.a, m.b = matrix.b, m.c = matrix.c, m.d = matrix.d, m.e = matrix.e, m.f = matrix.f, m;
-  }
-  free(d) {
-    this.pools.push(d);
-  }
-  get length() {
-    return this.pools.length;
-  }
-  release() {
-    this.pools = [];
-  }
-}
-class DefaultMat4Allocate {
-  constructor() {
-    this.pools = [];
-  }
-  static identity(out) {
-    return identityMat4(out);
-  }
-  allocate() {
-    if (!this.pools.length) return createMat4();
-    const m = this.pools.pop();
-    return DefaultMat4Allocate.identity(m), m;
-  }
-  allocateByObj(d) {
-    let m;
-    m = this.pools.length ? this.pools.pop() : createMat4();
-    for (let i = 0; i < m.length; i++) m[i] = d[i];
-    return m;
-  }
-  free(m) {
-    m && this.pools.push(m);
-  }
-  get length() {
-    return this.pools.length;
-  }
-  release() {
-    this.pools = [];
-  }
-}
-const matrixAllocate = new DefaultMatrixAllocate();
-const mat4Allocate = new DefaultMat4Allocate();
-
-var __decorate$1B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-    var d,
-      c = arguments.length,
-      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-  },
-  __metadata$1d = undefined && undefined.__metadata || function (k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-  },
-  __param$R = undefined && undefined.__param || function (paramIndex, decorator) {
-    return function (target, key) {
-      decorator(target, key, paramIndex);
-    };
-  };
-function getExtraModelMatrix(dx, dy, graphic) {
-  const {
-    alpha: alpha,
-    beta: beta
-  } = graphic.attribute;
-  if (!alpha && !beta) return null;
-  const {
-      anchor3d = graphic.attribute.anchor
-    } = graphic.attribute,
-    _anchor = [0, 0];
-  if (anchor3d) {
-    if ("string" == typeof anchor3d[0]) {
-      const ratio = parseFloat(anchor3d[0]) / 100,
-        bounds = graphic.AABBBounds;
-      _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-    } else _anchor[0] = anchor3d[0];
-    if ("string" == typeof anchor3d[1]) {
-      const ratio = parseFloat(anchor3d[1]) / 100,
-        bounds = graphic.AABBBounds;
-      _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-    } else _anchor[1] = anchor3d[1];
-  }
-  if ("text" === graphic.type) {
-    const {
-      textAlign: textAlign
-    } = graphic.attribute;
-    _anchor[0] += textDrawOffsetX(textAlign, graphic.clipedWidth);
-  }
-  _anchor[0] += dx, _anchor[1] += dy;
-  const modelMatrix = mat4Allocate.allocate();
-  return translate(modelMatrix, modelMatrix, [_anchor[0], _anchor[1], 0]), beta && rotateX(modelMatrix, modelMatrix, beta), alpha && rotateY(modelMatrix, modelMatrix, alpha), translate(modelMatrix, modelMatrix, [-_anchor[0], -_anchor[1], 0]), modelMatrix;
-}
-function getModelMatrix(out, graphic, theme) {
-  var _a;
-  const {
-      x = theme.x,
-      y = theme.y,
-      z = theme.z,
-      dx = theme.dx,
-      dy = theme.dy,
-      dz = theme.dz,
-      scaleX = theme.scaleX,
-      scaleY = theme.scaleY,
-      scaleZ = theme.scaleZ,
-      alpha = theme.alpha,
-      beta = theme.beta,
-      angle = theme.angle,
-      anchor3d = graphic.attribute.anchor,
-      anchor: anchor
-    } = graphic.attribute,
-    _anchor = [0, 0, 0];
-  if (anchor3d) {
-    if ("string" == typeof anchor3d[0]) {
-      const ratio = parseFloat(anchor3d[0]) / 100,
-        bounds = graphic.AABBBounds;
-      _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-    } else _anchor[0] = anchor3d[0];
-    if ("string" == typeof anchor3d[1]) {
-      const ratio = parseFloat(anchor3d[1]) / 100,
-        bounds = graphic.AABBBounds;
-      _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-    } else _anchor[1] = anchor3d[1];
-    _anchor[2] = null !== (_a = anchor3d[2]) && void 0 !== _a ? _a : 0;
-  }
-  if (identityMat4(out), translate(out, out, [x + dx, y + dy, z + dz]), translate(out, out, [_anchor[0], _anchor[1], _anchor[2]]), rotateX(out, out, beta), rotateY(out, out, alpha), translate(out, out, [-_anchor[0], -_anchor[1], _anchor[2]]), scaleMat4(out, out, [scaleX, scaleY, scaleZ]), angle) {
-    const m = mat4Allocate.allocate(),
-      _anchor = [0, 0];
-    if (anchor) {
-      if ("string" == typeof anchor3d[0]) {
-        const ratio = parseFloat(anchor3d[0]) / 100,
-          bounds = graphic.AABBBounds;
-        _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-      } else _anchor[0] = anchor3d[0];
-      if ("string" == typeof anchor3d[1]) {
-        const ratio = parseFloat(anchor3d[1]) / 100,
-          bounds = graphic.AABBBounds;
-        _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
-      } else _anchor[1] = anchor3d[1];
-    }
-    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;
-}
-let DefaultGraphicService = class {
-  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);
-  }
-  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);
-  }
-  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);
+    return m.a = a, m.b = b, m.c = c, m.d = d, m.e = e, m.f = f, m;
   }
-  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);
+  allocateByObj(matrix) {
+    if (!this.pools.length) return new Matrix(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+    const m = this.pools.pop();
+    return m.a = matrix.a, m.b = matrix.b, m.c = matrix.c, m.d = matrix.d, m.e = matrix.e, m.f = matrix.f, m;
   }
-  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
-    };
+  free(d) {
+    this.pools.push(d);
   }
-};
-DefaultGraphicService = __decorate$1B([injectable(), __param$R(0, inject(GraphicCreator$1)), __metadata$1d("design:paramtypes", [Object])], 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 === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke));
+  get length() {
+    return this.pools.length;
   }
-  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);
-    });
+  release() {
+    this.pools = [];
   }
-  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);
-    });
+}
+class DefaultMat4Allocate {
+  constructor() {
+    this.pools = [];
   }
-  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
-    };
+  static identity(out) {
+    return identityMat4(out);
   }
-  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;
+  allocate() {
+    if (!this.pools.length) return createMat4();
+    const m = this.pools.pop();
+    return DefaultMat4Allocate.identity(m), m;
   }
-  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);
-    }
+  allocateByObj(d) {
+    let m;
+    m = this.pools.length ? this.pools.pop() : createMat4();
+    for (let i = 0; i < m.length; i++) m[i] = d[i];
+    return m;
   }
-  restoreTransformUseContext2d(graphic, graphicAttribute, z, context) {
-    this.camera && (context.camera = this.camera);
+  free(m) {
+    m && this.pools.push(m);
   }
-  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();
+  get length() {
+    return this.pools.length;
   }
-  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
-    const {
-      context: context
-    } = drawContext;
-    if (!context) return;
+  release() {
+    this.pools = [];
+  }
+}
+const matrixAllocate = new DefaultMatrixAllocate();
+const mat4Allocate = new DefaultMat4Allocate();
+
+var __decorate$1B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var d,
+      c = arguments.length,
+      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  },
+  __metadata$1d = undefined && undefined.__metadata || function (k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+  },
+  __param$R = undefined && undefined.__param || function (paramIndex, decorator) {
+    return function (target, key) {
+      decorator(target, key, paramIndex);
+    };
+  };
+function getExtraModelMatrix(dx, dy, graphic) {
+  const {
+    alpha: alpha,
+    beta: beta
+  } = graphic.attribute;
+  if (!alpha && !beta) return null;
+  const {
+      anchor3d = graphic.attribute.anchor
+    } = graphic.attribute,
+    _anchor = [0, 0];
+  if (anchor3d) {
+    if ("string" == typeof anchor3d[0]) {
+      const ratio = parseFloat(anchor3d[0]) / 100,
+        bounds = graphic.AABBBounds;
+      _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+    } else _anchor[0] = anchor3d[0];
+    if ("string" == typeof anchor3d[1]) {
+      const ratio = parseFloat(anchor3d[1]) / 100,
+        bounds = graphic.AABBBounds;
+      _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+    } else _anchor[1] = anchor3d[1];
+  }
+  if ("text" === graphic.type) {
     const {
-      renderable: renderable
+      textAlign: textAlign
     } = 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();
+    _anchor[0] += textDrawOffsetX(textAlign, graphic.clipedWidth);
+  }
+  _anchor[0] += dx, _anchor[1] += dy;
+  const modelMatrix = mat4Allocate.allocate();
+  return translate(modelMatrix, modelMatrix, [_anchor[0], _anchor[1], 0]), beta && rotateX(modelMatrix, modelMatrix, beta), alpha && rotateY(modelMatrix, modelMatrix, alpha), translate(modelMatrix, modelMatrix, [-_anchor[0], -_anchor[1], 0]), modelMatrix;
+}
+function getModelMatrix(out, graphic, theme) {
+  var _a;
+  const {
+      x = theme.x,
+      y = theme.y,
+      z = theme.z,
+      dx = theme.dx,
+      dy = theme.dy,
+      dz = theme.dz,
+      scaleX = theme.scaleX,
+      scaleY = theme.scaleY,
+      scaleZ = theme.scaleZ,
+      alpha = theme.alpha,
+      beta = theme.beta,
+      angle = theme.angle,
+      anchor3d = graphic.attribute.anchor,
+      anchor: anchor
+    } = graphic.attribute,
+    _anchor = [0, 0, 0];
+  if (anchor3d) {
+    if ("string" == typeof anchor3d[0]) {
+      const ratio = parseFloat(anchor3d[0]) / 100,
+        bounds = graphic.AABBBounds;
+      _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+    } else _anchor[0] = anchor3d[0];
+    if ("string" == typeof anchor3d[1]) {
+      const ratio = parseFloat(anchor3d[1]) / 100,
+        bounds = graphic.AABBBounds;
+      _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+    } else _anchor[1] = anchor3d[1];
+    _anchor[2] = null !== (_a = anchor3d[2]) && void 0 !== _a ? _a : 0;
   }
-}
-
-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;
+  if (identityMat4(out), translate(out, out, [x + dx, y + dy, z + dz]), translate(out, out, [_anchor[0], _anchor[1], _anchor[2]]), rotateX(out, out, beta), rotateY(out, out, alpha), translate(out, out, [-_anchor[0], -_anchor[1], _anchor[2]]), scaleMat4(out, out, [scaleX, scaleY, scaleZ]), angle) {
+    const m = mat4Allocate.allocate(),
+      _anchor = [0, 0];
+    if (anchor) {
+      if ("string" == typeof anchor3d[0]) {
+        const ratio = parseFloat(anchor3d[0]) / 100,
+          bounds = graphic.AABBBounds;
+        _anchor[0] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+      } else _anchor[0] = anchor3d[0];
+      if ("string" == typeof anchor3d[1]) {
+        const ratio = parseFloat(anchor3d[1]) / 100,
+          bounds = graphic.AABBBounds;
+        _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
+      } else _anchor[1] = anchor3d[1];
+    }
+    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 getAST() {
-    const ast = matchListing(matchDefinition);
-    return input.length > 0 && error("Invalid input not EOF"), ast;
+}
+function shouldUseMat4(graphic) {
+  const {
+    alpha: alpha,
+    beta: beta
+  } = graphic.attribute;
+  return alpha || beta;
+}
+let DefaultGraphicService = class {
+  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();
   }
-  function matchDefinition() {
-    return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+  onAttributeUpdate(graphic) {
+    this.hooks.onAttributeUpdate.taps.length && this.hooks.onAttributeUpdate.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)
-      };
-    });
+  onSetStage(graphic, stage) {
+    this.hooks.onSetStage.taps.length && this.hooks.onSetStage.call(graphic, stage);
   }
-  function matchLinearOrientation() {
-    return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+  onRemove(graphic) {
+    this.hooks.onRemove.taps.length && this.hooks.onRemove.call(graphic);
   }
-  function matchConicalOrientation() {
-    return match("angular", tokens.fromAngleValue, 1);
+  onRelease(graphic) {
+    this.hooks.onRelease.taps.length && this.hooks.onRelease.call(graphic);
   }
-  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;
+  onAddIncremental(graphic, group, stage) {
+    this.hooks.onAddIncremental.taps.length && this.hooks.onAddIncremental.call(graphic, group, stage);
   }
-  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;
+  onClearIncremental(group, stage) {
+    this.hooks.onClearIncremental.taps.length && this.hooks.onClearIncremental.call(group, stage);
   }
-  function matchExtentKeyword() {
-    return match("extent-keyword", tokens.extentKeywords, 1);
+  beforeUpdateAABBBounds(graphic, stage, willUpdate, bounds) {
+    this.hooks.beforeUpdateAABBBounds.taps.length && this.hooks.beforeUpdateAABBBounds.call(graphic, stage, willUpdate, bounds);
   }
-  function matchAtPosition() {
-    if (match("position", /^at/, 0)) {
-      const positioning = matchPositioning();
-      return positioning || error("Missing positioning value"), positioning;
-    }
+  afterUpdateAABBBounds(graphic, stage, bounds, params, selfChange) {
+    this.hooks.afterUpdateAABBBounds.taps.length && this.hooks.afterUpdateAABBBounds.call(graphic, stage, bounds, params, selfChange);
   }
-  function matchPositioning() {
-    const location = {
-      x: matchDistance(),
-      y: matchDistance()
-    };
-    if (location.x || location.y) return {
-      type: "position",
-      value: location
-    };
+  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 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;
+  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 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;
+  combindShadowAABBBounds(bounds, graphic) {
+    if (graphic && graphic.shadowRoot) {
+      const b = graphic.shadowRoot.AABBBounds;
+      bounds.union(b);
+    }
   }
-  function matchDistance() {
-    return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+  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 matchLength() {
-    return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+  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 match(type, pattern, captureIndex) {
-    const captures = scan(pattern);
-    if (captures) return {
-      type: type,
-      value: captures[captureIndex]
+  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 scan(regexp) {
-    const blankCaptures = /^[\n\r\t\s]+/.exec(input);
-    blankCaptures && consume(blankCaptures[0].length);
-    const captures = regexp.exec(input);
-    return captures && consume(captures[0].length), captures;
-  }
-  function consume(size) {
-    input = input.substr(size);
-  }
-  return function (code) {
-    return input = code.toString(), getAST();
-  };
-}();
-class GradientParser {
-  static IsGradient(c) {
-    return !("string" == typeof c && !c.includes("gradient"));
-  }
-  static IsGradientStr(c) {
-    return "string" == typeof c && c.includes("gradient");
+};
+DefaultGraphicService = __decorate$1B([injectable(), __param$R(0, inject(GraphicCreator$1)), __metadata$1d("design:paramtypes", [Object])], 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 === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke));
   }
-  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);
+  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;
       }
-    } catch (err) {
-      return c;
-    }
-    return c;
+      c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
+    });
   }
-  static ParseConic(datum) {
-    const {
-        orientation: orientation,
-        colorStops = []
-      } = datum,
-      halfPi = pi / 2,
-      sa = parseFloat(orientation.value) / 180 * pi - halfPi;
-    return {
-      gradient: "conical",
-      x: .5,
-      y: .5,
-      startAngle: sa,
-      endAngle: sa + pi2,
-      stops: colorStops.map(item => ({
-        color: item.value,
-        offset: parseFloat(item.length.value) / 100
-      }))
-    };
+  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);
+    });
   }
-  static ParseRadial(datum) {
+  valid(graphic, defaultAttribute, fillCb, strokeCb) {
     const {
-      colorStops = []
-    } = datum;
-    return {
-      gradient: "radial",
-      x0: .5,
-      y0: .5,
-      x1: .5,
-      y1: .5,
-      r0: 0,
-      r1: 1,
-      stops: colorStops.map(item => ({
-        color: item.value,
-        offset: parseFloat(item.length.value) / 100
-      }))
+        fill = defaultAttribute.fill,
+        background: background,
+        stroke = defaultAttribute.stroke,
+        opacity = defaultAttribute.opacity,
+        fillOpacity = defaultAttribute.fillOpacity,
+        lineWidth = defaultAttribute.lineWidth,
+        strokeOpacity = defaultAttribute.strokeOpacity,
+        visible = defaultAttribute.visible
+      } = graphic.attribute,
+      fVisible = fillVisible(opacity, fillOpacity, fill),
+      sVisible = strokeVisible(opacity, strokeOpacity),
+      doFill = runFill(fill, background),
+      doStroke = runStroke(stroke, lineWidth);
+    return !(!graphic.valid || !visible) && !(!doFill && !doStroke) && !!(fVisible || sVisible || fillCb || strokeCb || background) && {
+      fVisible: fVisible,
+      sVisible: sVisible,
+      doFill: doFill,
+      doStroke: doStroke
     };
   }
-  static ParseLinear(datum) {
+  transform(graphic, graphicAttribute, context) {
+    let use3dMatrixIn3dMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
     const {
-        orientation: orientation,
-        colorStops = []
-      } = datum,
-      halfPi = pi / 2;
-    let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi : 0;
-    for (; angle < 0;) angle += pi2;
-    for (; angle > pi2;) angle -= pi2;
-    let x0 = 0,
-      y0 = 0,
-      x1 = 0,
-      y1 = 0;
-    return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = Math.cos(angle)) : angle < pi ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi), y1 = Math.cos(angle - pi)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi), y1 -= Math.sin(angle - halfPi - pi)), {
-      gradient: "linear",
-      x0: x0,
-      y0: y0,
-      x1: x1,
-      y1: y1,
-      stops: colorStops.map(item => ({
-        color: item.value,
-        offset: parseFloat(item.length.value) / 100
-      }))
-    };
+        x = graphicAttribute.x,
+        y = graphicAttribute.y,
+        z = graphicAttribute.z,
+        scaleX = graphicAttribute.scaleX,
+        scaleY = graphicAttribute.scaleY,
+        angle = graphicAttribute.angle,
+        postMatrix: postMatrix
+      } = graphic.attribute,
+      lastModelMatrix = context.modelMatrix,
+      camera = context.camera;
+    result.x = x, result.y = y, result.z = z, result.lastModelMatrix = lastModelMatrix;
+    const shouldTransform3d = camera && (use3dMatrixIn3dMode || shouldUseMat4(graphic)),
+      onlyTranslate = shouldTransform3d ? graphic.transMatrix.onlyTranslate() && !postMatrix : 1 === scaleX && 1 === scaleY && 0 === angle && !postMatrix;
+    if (shouldTransform3d) {
+      const nextModelMatrix = mat4Allocate.allocate(),
+        modelMatrix = mat4Allocate.allocate();
+      getModelMatrix(modelMatrix, graphic, graphicAttribute), multiplyMat4Mat4(nextModelMatrix, lastModelMatrix || nextModelMatrix, modelMatrix), result.x = 0, result.y = 0, result.z = 0, context.modelMatrix = nextModelMatrix, context.setTransform(1, 0, 0, 1, 0, 0, !0), mat4Allocate.free(modelMatrix);
+    }
+    if (onlyTranslate && !lastModelMatrix) {
+      const point = graphic.getOffsetXY(graphicAttribute);
+      result.x += point.x, result.y += point.y, result.z = z, context.setTransformForCurrent();
+    } else if (shouldTransform3d) result.x = 0, result.y = 0, result.z = 0, context.setTransform(1, 0, 0, 1, 0, 0, !0);else if (camera && context.project) {
+      const point = graphic.getOffsetXY(graphicAttribute);
+      result.x += point.x, result.y += point.y, this.transformWithoutTranslate(context, result.x, result.y, result.z, scaleX, scaleY, angle);
+    } else context.transformFromMatrix(graphic.transMatrix, !0), result.x = 0, result.y = 0, result.z = 0;
+    return result;
   }
-}
-
-function getScaledStroke(context, width, dpr) {
-  let strokeWidth = width;
-  const {
-      a: a,
-      b: b,
-      c: c,
-      d: d
-    } = context.currentMatrix,
-    scaleX = Math.sign(a) * Math.sqrt(a * a + b * b),
-    scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
-  return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
-}
-function createColor(context, c, params) {
-  let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  if (!c || !0 === c) return "black";
-  let result, color;
-  if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
-  if (color = GradientParser.Parse(color), "string" == typeof color) return color;
-  if (params.AABBBounds && (!params.attribute || 0 !== params.attribute.scaleX || 0 !== params.attribute.scaleY)) {
-    const bounds = params.AABBBounds;
-    let w = bounds.x2 - bounds.x1,
-      h = bounds.y2 - bounds.y1,
-      x = bounds.x1 - offsetX,
-      y = bounds.y1 - offsetY;
-    if (params.attribute) {
-      const {
-        scaleX = 1,
-        scaleY = 1
-      } = params.attribute;
-      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+  transformUseContext2d(graphic, graphicAttribute, z, context) {
+    const camera = context.camera;
+    if (this.camera = camera, camera) {
+      const bounds = graphic.AABBBounds,
+        width = bounds.x2 - bounds.x1,
+        height = bounds.y2 - bounds.y1,
+        p1 = context.project(0, 0, z),
+        p2 = context.project(width, 0, z),
+        p3 = context.project(width, height, z),
+        _p1 = {
+          x: 0,
+          y: 0
+        },
+        _p2 = {
+          x: width,
+          y: 0
+        },
+        _p3 = {
+          x: width,
+          y: height
+        };
+      context.camera = null;
+      const denom = 1 / (_p1.x * (_p3.y - _p2.y) - _p2.x * _p3.y + _p3.x * _p2.y + (_p2.x - _p3.x) * _p1.y),
+        m11 = -(_p1.y * (p3.x - p2.x) - _p2.y * p3.x + _p3.y * p2.x + (_p2.y - _p3.y) * p1.x) * denom,
+        m12 = (_p2.y * p3.y + _p1.y * (p2.y - p3.y) - _p3.y * p2.y + (_p3.y - _p2.y) * p1.y) * denom,
+        m21 = (_p1.x * (p3.x - p2.x) - _p2.x * p3.x + _p3.x * p2.x + (_p2.x - _p3.x) * p1.x) * denom,
+        m22 = -(_p2.x * p3.y + _p1.x * (p2.y - p3.y) - _p3.x * p2.y + (_p3.x - _p2.x) * p1.y) * denom,
+        dx = (_p1.x * (_p3.y * p2.x - _p2.y * p3.x) + _p1.y * (_p2.x * p3.x - _p3.x * p2.x) + (_p3.x * _p2.y - _p2.x * _p3.y) * p1.x) * denom,
+        dy = (_p1.x * (_p3.y * p2.y - _p2.y * p3.y) + _p1.y * (_p2.x * p3.y - _p3.x * p2.y) + (_p3.x * _p2.y - _p2.x * _p3.y) * p1.y) * denom;
+      context.setTransform(m11, m12, m21, m22, dx, dy, !0);
     }
-    "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
   }
-  return result || "orange";
-}
-function createLinearGradient(context, color, x, y, w, h) {
-  var _a, _b, _c, _d;
-  const canvasGradient = context.createLinearGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : 0) * h, x + (null !== (_c = color.x1) && void 0 !== _c ? _c : 1) * w, y + (null !== (_d = color.y1) && void 0 !== _d ? _d : 0) * h);
-  return color.stops.forEach(stop => {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient;
-}
-function createRadialGradient(context, color, x, y, w, h) {
-  var _a, _b, _c, _d, _e, _f;
-  const canvasGradient = context.createRadialGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : .5) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : .5) * h, Math.max(w, h) * (null !== (_c = color.r0) && void 0 !== _c ? _c : 0), x + (null !== (_d = color.x1) && void 0 !== _d ? _d : .5) * w, y + (null !== (_e = color.y1) && void 0 !== _e ? _e : .5) * h, Math.max(w, h) * (null !== (_f = color.r1) && void 0 !== _f ? _f : .5));
-  return color.stops.forEach(stop => {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient;
-}
-function createConicGradient(context, color, x, y, w, h) {
-  var _a, _b;
-  const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
-  return color.stops.forEach(stop => {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient.GetPattern(w + x, h + y, undefined);
+  restoreTransformUseContext2d(graphic, graphicAttribute, z, context) {
+    this.camera && (context.camera = this.camera);
+  }
+  transformWithoutTranslate(context, x, y, z, scaleX, scaleY, angle) {
+    const p = context.project(x, y, z);
+    context.translate(p.x, p.y, !1), context.scale(scaleX, scaleY, !1), context.rotate(angle, !1), context.translate(-p.x, -p.y, !1), context.setTransformForCurrent();
+  }
+  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
+    const {
+      context: context
+    } = drawContext;
+    if (!context) return;
+    const {
+      renderable: renderable
+    } = graphic.attribute;
+    if (!1 === renderable) return;
+    context.highPerformanceSave();
+    const data = this.transform(graphic, defaultAttr, context, computed3dMatrix),
+      {
+        x: x,
+        y: y,
+        z: z,
+        lastModelMatrix: lastModelMatrix
+      } = data;
+    this.z = z, drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
+  }
 }
 
 var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -12683,7 +12691,7 @@ function drawEachCurve(path, curve, lastCurve, defined0, offsetX, offsetY, offse
       originP2: originP2
     } = curve;
     let validP;
-    if (originP1 && !1 !== originP1.defined ? validP = p0 : originP1 && !1 !== originP2.defined && (validP = null !== (_a = curve.p3) && void 0 !== _a ? _a : curve.p1), defined0) {
+    if (originP1 && !1 !== originP1.defined && !lastCurve ? validP = p0 : originP1 && !1 !== originP2.defined && (validP = null !== (_a = curve.p3) && void 0 !== _a ? _a : curve.p1), defined0) {
       newDefined0 = !defined0;
       const x = validP ? validP.x : curve.p0.x,
         y = validP ? validP.y : curve.p0.y;
@@ -14219,7 +14227,10 @@ class ShadowRootDrawItemInterceptorContribution {
     const {
       context: context
     } = drawContext;
-    if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
+    context.highPerformanceSave();
+    const t1 = graphic.parent.globalTransMatrix,
+      t2 = graphic.stage.window.getViewBoxTransform().clone().multiply(t1.a, t1.b, t1.c, t1.d, t1.e, t1.f);
+    if (graphic.parent && context.setTransformFromMatrix(t2, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
       tempDirtyBounds.copy(drawContribution.dirtyBounds), tempBackupDirtyBounds.copy(drawContribution.backupDirtyBounds);
       const m = graphic.globalTransMatrix.getInverse();
       drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m), drawContribution.backupDirtyBounds.copy(drawContribution.dirtyBounds);
@@ -15242,6 +15253,9 @@ class BaseSymbol {
       bounds.x1 = -halfS, bounds.x2 = halfS, bounds.y1 = -halfS, bounds.y2 = halfS;
     } else bounds.x1 = -size[0] / 2, bounds.x2 = size[0] / 2, bounds.y1 = -size[1] / 2, bounds.y2 = size[1] / 2;
   }
+  parseSize(size) {
+    return isNumber$1(size) ? size : Math.min(size[0], size[1]);
+  }
 }
 
 function circle(ctx, r, x, y, z) {
@@ -15252,13 +15266,13 @@ class CircleSymbol extends BaseSymbol {
     super(...arguments), this.type = "circle", this.pathStr = "M0.5,0A0.5,0.5,0,1,1,-0.5,0A0.5,0.5,0,1,1,0.5,0";
   }
   draw(ctx, size, x, y, z) {
-    return circle(ctx, size / 2, x, y, z);
+    return circle(ctx, this.parseSize(size) / 2, x, y, z);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return circle(ctx, size / 2 + offset, x, y, z);
+    return circle(ctx, this.parseSize(size) / 2 + offset, x, y, z);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = size / 2;
+    const r = this.parseSize(size) / 2;
     return `M ${x - r}, ${y} a ${r},${r} 0 1,0 ${2 * r},0 a ${r},${r} 0 1,0 -${2 * r},0`;
   }
 }
@@ -15275,10 +15289,10 @@ class CrossSymbol extends BaseSymbol {
     super(...arguments), this.type = "cross", this.pathStr = "M-0.5,-0.2L-0.5,0.2L-0.2,0.2L-0.2,0.5L0.2,0.5L0.2,0.2L0.5,0.2L0.5,-0.2L0.2,-0.2L0.2,-0.5L-0.2,-0.5L-0.2,-0.2Z";
   }
   draw(ctx, size, x, y, z) {
-    return cross(ctx, size / 6, x, y, z);
+    return cross(ctx, this.parseSize(size) / 6, x, y, z);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return crossOffset(ctx, size / 6, x, y, offset, z);
+    return crossOffset(ctx, this.parseSize(size) / 6, x, y, offset, z);
   }
 }
 var cross$1 = new CrossSymbol();
@@ -15291,13 +15305,13 @@ class DiamondSymbol extends BaseSymbol {
     super(...arguments), this.type = "diamond", this.pathStr = "M-0.5,0L0,-0.5L0.5,0L0,0.5Z";
   }
   draw(ctx, size, x, y, z) {
-    return diamond(ctx, size / 2, x, y, z);
+    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
   }
   drawFitDir(ctx, size, x, y, z) {
-    return diamond(ctx, size / 2, x, y, z);
+    return diamond(ctx, this.parseSize(size) / 2, x, y, z);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return diamond(ctx, size / 2 + offset, x, y, z);
+    return diamond(ctx, this.parseSize(size) / 2 + offset, x, y, z);
   }
 }
 var diamond$1 = new DiamondSymbol();
@@ -15311,10 +15325,10 @@ class SquareSymbol extends BaseSymbol {
     super(...arguments), this.type = "square", this.pathStr = "M-0.5,-0.5h1v1h-1Z";
   }
   draw(ctx, size, x, y) {
-    return square(ctx, size / 2, x, y);
+    return square(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return square(ctx, size / 2 + offset, x, y);
+    return square(ctx, this.parseSize(size) / 2 + offset, x, y);
   }
 }
 var square$1 = new SquareSymbol();
@@ -15328,10 +15342,10 @@ class TriangleUpSymbol extends BaseSymbol {
     super(...arguments), this.type = "triangleUp", this.pathStr = "M0.5,0.5 L-0.5,0.5 L0,-0.5 Z";
   }
   draw(ctx, size, x, y) {
-    return trianglUpOffset(ctx, size / 2, x, y);
+    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglUpOffset(ctx, size / 2, x, y, offset);
+    return trianglUpOffset(ctx, this.parseSize(size) / 2, x, y, offset);
   }
 }
 var triangleUp = new TriangleUpSymbol();
@@ -15363,10 +15377,10 @@ class StarSymbol extends BaseSymbol {
     super(...arguments), this.type = "star", this.pathStr = "M0 -1L0.22451398828979266 -0.3090169943749474L0.9510565162951535 -0.30901699437494745L0.3632712640026804 0.1180339887498948L0.5877852522924732 0.8090169943749473L8.326672684688674e-17 0.3819660112501051L-0.587785252292473 0.8090169943749476L-0.3632712640026804 0.11803398874989487L-0.9510565162951536 -0.30901699437494723L-0.22451398828979274 -0.30901699437494734Z";
   }
   draw(ctx, size, transX, transY) {
-    return star(ctx, size / 2, transX, transY);
+    return star(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return star(ctx, size / 2 + offset, transX, transY);
+    return star(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var star$1 = new StarSymbol();
@@ -15384,10 +15398,10 @@ class ArrowSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow", this.pathStr = "M-0.07142857142857142,0.5L0.07142857142857142,0.5L0.07142857142857142,-0.0625L0.2,-0.0625L0,-0.5L-0.2,-0.0625L-0.07142857142857142,-0.0625Z";
   }
   draw(ctx, size, transX, transY) {
-    return arrow(ctx, size / 2, transX, transY);
+    return arrow(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow(ctx, size / 2 + offset, transX, transY);
+    return arrow(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var arrow$1 = new ArrowSymbol();
@@ -15401,10 +15415,10 @@ class WedgeSymbol extends BaseSymbol {
     super(...arguments), this.type = "wedge", this.pathStr = "M0,-0.5773502691896257L-0.125,0.28867513459481287L0.125,0.28867513459481287Z";
   }
   draw(ctx, size, transX, transY) {
-    return wedge(ctx, size / 2, transX, transY);
+    return wedge(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return wedge(ctx, size / 2 + offset, transX, transY);
+    return wedge(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var wedge$1 = new WedgeSymbol();
@@ -15417,10 +15431,10 @@ class StrokeSymbol extends BaseSymbol {
     super(...arguments), this.type = "stroke", this.pathStr = "";
   }
   draw(ctx, size, transX, transY) {
-    return stroke(ctx, size / 2, transX, transY);
+    return stroke(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return stroke(ctx, size / 2 + offset, transX, transY);
+    return stroke(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var stroke$1 = new StrokeSymbol();
@@ -15442,10 +15456,10 @@ class WyeSymbol extends BaseSymbol {
     super(...arguments), this.type = "wye", this.pathStr = "M0.25 0.14433756729740646L0.25 0.6443375672974064L-0.25 0.6443375672974064L-0.25 0.14433756729740643L-0.6830127018922193 -0.10566243270259357L-0.4330127018922193 -0.5386751345948129L0 -0.28867513459481287L0.4330127018922193 -0.5386751345948129L0.6830127018922193 -0.10566243270259357Z";
   }
   draw(ctx, size, transX, transY) {
-    return wye(ctx, size / 2, transX, transY);
+    return wye(ctx, this.parseSize(size) / 2, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return wye(ctx, size / 2 + offset, transX, transY);
+    return wye(ctx, this.parseSize(size) / 2 + offset, transX, transY);
   }
 }
 var wye$1 = new WyeSymbol();
@@ -15458,10 +15472,10 @@ class TriangleLeftSymbol extends BaseSymbol {
     super(...arguments), this.type = "triangleLeft", this.pathStr = "M-0.5,0 L0.5,0.5 L0.5,-0.5 Z";
   }
   draw(ctx, size, x, y) {
-    return trianglLeftOffset(ctx, size / 2, x, y, 0);
+    return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, 0);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglLeftOffset(ctx, size / 2, x, y, offset);
+    return trianglLeftOffset(ctx, this.parseSize(size) / 2, x, y, offset);
   }
 }
 var triangleLeft = new TriangleLeftSymbol();
@@ -15475,10 +15489,10 @@ class TriangleRightSymbol extends BaseSymbol {
     super(...arguments), this.type = "triangleRight", this.pathStr = "M-0.5,0.5 L0.5,0 L-0.5,-0.5 Z";
   }
   draw(ctx, size, x, y) {
-    return trianglRightOffset(ctx, size / 2, x, y);
+    return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglRightOffset(ctx, size / 2, x, y, offset);
+    return trianglRightOffset(ctx, this.parseSize(size) / 2, x, y, offset);
   }
 }
 var triangleRight = new TriangleRightSymbol();
@@ -15492,10 +15506,10 @@ class TriangleDownSymbol extends BaseSymbol {
     super(...arguments), this.type = "triangleDown", this.pathStr = "M-0.5,-0.5 L0.5,-0.5 L0,0.5 Z";
   }
   draw(ctx, size, x, y) {
-    return trianglDownOffset(ctx, size / 2, x, y);
+    return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return trianglDownOffset(ctx, size / 2, x, y, offset);
+    return trianglDownOffset(ctx, this.parseSize(size) / 2, x, y, offset);
   }
 }
 var triangleDown = new TriangleDownSymbol();
@@ -15510,10 +15524,10 @@ class ThinTriangleSymbol extends BaseSymbol {
     super(...arguments), this.type = "thinTriangle", this.pathStr = "M0,-0.5773502691896257L-0.5,0.28867513459481287L0.5,0.28867513459481287Z";
   }
   draw(ctx, size, x, y) {
-    return thinTriangle(ctx, size / 2 / sqrt3, x, y);
+    return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3, x, y);
   }
   drawOffset(ctx, size, x, y, offset) {
-    return thinTriangle(ctx, size / 2 / sqrt3 + offset, x, y);
+    return thinTriangle(ctx, this.parseSize(size) / 2 / sqrt3 + offset, x, y);
   }
 }
 var thinTriangle$1 = new ThinTriangleSymbol();
@@ -15527,10 +15541,10 @@ class Arrow2LeftSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow2Left", this.pathStr = "M 0.25 -0.5 L -0.25 0 l 0.25 0.5";
   }
   draw(ctx, size, transX, transY) {
-    return arrow2Left(ctx, size / 4, transX, transY);
+    return arrow2Left(ctx, this.parseSize(size) / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Left(ctx, size / 4 + offset, transX, transY);
+    return arrow2Left(ctx, this.parseSize(size) / 4 + offset, transX, transY);
   }
 }
 var arrow2Left$1 = new Arrow2LeftSymbol();
@@ -15544,10 +15558,10 @@ class Arrow2RightSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow2Right", this.pathStr = "M -0.25 -0.5 l 0.25 0 l -0.25 0.5";
   }
   draw(ctx, size, transX, transY) {
-    return arrow2Right(ctx, size / 4, transX, transY);
+    return arrow2Right(ctx, this.parseSize(size) / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Right(ctx, size / 4 + offset, transX, transY);
+    return arrow2Right(ctx, this.parseSize(size) / 4 + offset, transX, transY);
   }
 }
 var arrow2Right$1 = new Arrow2RightSymbol();
@@ -15561,10 +15575,10 @@ class Arrow2UpSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow2Up", this.pathStr = "M -0.5 0.25 L 0 -0.25 l 0.5 0.25";
   }
   draw(ctx, size, transX, transY) {
-    return arrow2Up(ctx, size / 4, transX, transY);
+    return arrow2Up(ctx, this.parseSize(size) / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Up(ctx, size / 4 + offset, transX, transY);
+    return arrow2Up(ctx, this.parseSize(size) / 4 + offset, transX, transY);
   }
 }
 var arrow2Up$1 = new Arrow2UpSymbol();
@@ -15578,10 +15592,10 @@ class Arrow2DownSymbol extends BaseSymbol {
     super(...arguments), this.type = "arrow2Down", this.pathStr = "M -0.5 -0.25 L 0 0.25 l 0.5 -0.25";
   }
   draw(ctx, size, transX, transY) {
-    return arrow2Down(ctx, size / 4, transX, transY);
+    return arrow2Down(ctx, this.parseSize(size) / 4, transX, transY);
   }
   drawOffset(ctx, size, transX, transY, offset) {
-    return arrow2Down(ctx, size / 4 + offset, transX, transY);
+    return arrow2Down(ctx, this.parseSize(size) / 4 + offset, transX, transY);
   }
 }
 var arrow2Down$1 = new Arrow2DownSymbol();
@@ -15594,13 +15608,13 @@ class LineVSymbol extends BaseSymbol {
     super(...arguments), this.type = "lineV", this.pathStr = "M0,-0.5L0,0.5";
   }
   draw(ctx, size, x, y, z) {
-    return lineV(ctx, size / 2, x, y);
+    return lineV(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return lineV(ctx, size / 2 + offset, x, y);
+    return lineV(ctx, this.parseSize(size) / 2 + offset, x, y);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = size / 2;
+    const r = this.parseSize(size) / 2;
     return `M ${x}, ${y - r} L ${x},${y + r}`;
   }
 }
@@ -15614,13 +15628,13 @@ class LineHSymbol extends BaseSymbol {
     super(...arguments), this.type = "lineH", this.pathStr = "M-0.5,0L0.5,0";
   }
   draw(ctx, size, x, y, z) {
-    return lineH(ctx, size / 2, x, y);
+    return lineH(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return lineH(ctx, size / 2 + offset, x, y);
+    return lineH(ctx, this.parseSize(size) / 2 + offset, x, y);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = size / 2;
+    const r = this.parseSize(size) / 2;
     return `M ${x - r}, ${y} L ${x + r},${y}`;
   }
 }
@@ -15634,13 +15648,13 @@ class CloseSymbol extends BaseSymbol {
     super(...arguments), this.type = "close", this.pathStr = "M-0.5,-0.5L0.5,0.5,M0.5,-0.5L-0.5,0.5";
   }
   draw(ctx, size, x, y, z) {
-    return close(ctx, size / 2, x, y);
+    return close(ctx, this.parseSize(size) / 2, x, y);
   }
   drawOffset(ctx, size, x, y, offset, z) {
-    return close(ctx, size / 2 + offset, x, y);
+    return close(ctx, this.parseSize(size) / 2 + offset, x, y);
   }
   drawToSvgPath(size, x, y, z) {
-    const r = size / 2;
+    const r = this.parseSize(size) / 2;
     return `M ${x - r}, ${y - r} L ${x + r},${y + r} M ${x + r}, ${y - r} L ${x - r},${y + r}`;
   }
 }
@@ -15674,15 +15688,18 @@ class CustomSymbolClass {
     this.pathStr = "", this.type = type, isArray$1(path) ? this.svgCache = path : this.path = path, this.isSvg = isSvg;
   }
   drawOffset(ctx, size, x, y, offset, z, cb) {
-    return this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
+    return size = this.parseSize(size), this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
       ctx.beginPath(), renderCommandList(item.path.commandList, ctx, x, y, size, size), cb && cb(item.path, item.attribute);
     }), !1) : (renderCommandList(this.path.commandList, ctx, x, y, size + offset, size + offset), !1);
   }
   draw(ctx, size, x, y, z, cb) {
-    return this.drawOffset(ctx, size, x, y, 0, z, cb);
+    return size = this.parseSize(size), this.drawOffset(ctx, size, x, y, 0, z, cb);
+  }
+  parseSize(size) {
+    return isNumber$1(size) ? size : Math.min(size[0], size[1]);
   }
   bounds(size, bounds) {
-    if (this.isSvg) {
+    if (size = this.parseSize(size), this.isSvg) {
       if (!this.svgCache) return;
       return bounds.clear(), void this.svgCache.forEach(_ref => {
         let {
@@ -16365,7 +16382,11 @@ class Paragraph {
       case "sub":
         baseline += this.descent / 2;
     }
-    "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0), this.character.stroke && (applyStrokeStyle(ctx, this.character), ctx.strokeText(text, left, baseline)), applyFillStyle(ctx, this.character), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill && ("boolean" == typeof this.character.lineThrough || "boolean" == typeof this.character.underline ? (this.character.underline && ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1), this.character.lineThrough && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)) : "underline" === this.character.textDecoration ? ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1) : "line-through" === this.character.textDecoration && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)), "vertical" === direction && ctx.restore();
+    "vertical" === direction && (ctx.save(), ctx.rotateAbout(Math.PI / 2, left, baseline), ctx.translate(-this.heightOrigin || -this.lineHeight / 2, -this.descent / 2), ctx.translate(left, baseline), left = 0, baseline = 0);
+    const {
+      lineWidth = 1
+    } = this.character;
+    this.character.stroke && lineWidth && ctx.strokeText(text, left, baseline), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill && ("boolean" == typeof this.character.lineThrough || "boolean" == typeof this.character.underline ? (this.character.underline && ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1), this.character.lineThrough && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)) : "underline" === this.character.textDecoration ? ctx.fillRect(left, 1 + baseline, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1) : "line-through" === this.character.textDecoration && ctx.fillRect(left, 1 + baseline - this.ascent / 2, this.widthOrigin || this.width, this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1)), "vertical" === direction && ctx.restore();
   }
   getWidthWithEllips(direction) {
     let text = this.text;
@@ -16588,12 +16609,18 @@ class Line {
         paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
       }
     }
-    this.paragraphs.map((paragraph, index) => {
+    this.paragraphs.forEach((paragraph, index) => {
       if (paragraph instanceof RichTextIcon) return paragraph.setAttributes({
         x: x + paragraph._x,
         y: y + paragraph._y
       }), void drawIcon(paragraph, ctx, x + paragraph._x, y + paragraph._y, this.ascent);
-      paragraph.draw(ctx, y + this.ascent, x, 0 === index, this.textAlign);
+      const b = {
+        x1: this.left,
+        y1: this.top,
+        x2: this.left + this.actualWidth,
+        y2: this.top + this.height
+      };
+      applyStrokeStyle(ctx, paragraph.character), applyFillStyle(ctx, paragraph.character, b), paragraph.draw(ctx, y + this.ascent, x, 0 === index, this.textAlign);
     });
   }
   getWidthWithEllips(ellipsis) {
@@ -16616,7 +16643,7 @@ class Line {
       paragraph.ellipsis = "hide", otherParagraphWidth += paragraph.width;
     }
     let width = 0;
-    return this.paragraphs.map((paragraph, index) => {
+    return this.paragraphs.forEach((paragraph, index) => {
       width += paragraph instanceof RichTextIcon ? paragraph.width : paragraph.getWidthWithEllips(this.direction);
     }), width;
   }
@@ -16656,7 +16683,7 @@ class Wrapper {
   }
 }
 
-const RICHTEXT_UPDATE_TAG_KEY = ["width", "height", "ellipsis", "wordBreak", "verticalDirection", "maxHeight", "maxWidth", "textAlign", "textBaseline", "textConfig", "layoutDirection", "fill", "stroke", "fontSize", ...GRAPHIC_UPDATE_TAG_KEY];
+const RICHTEXT_UPDATE_TAG_KEY = ["width", "height", "ellipsis", "wordBreak", "verticalDirection", "maxHeight", "maxWidth", "textAlign", "textBaseline", "textConfig", "layoutDirection", "fill", "stroke", "fontSize", "fontFamily", "fontStyle", "fontWeight", "lineWidth", "opacity", "fillOpacity", "strokeOpacity", ...GRAPHIC_UPDATE_TAG_KEY];
 class RichText extends Graphic {
   constructor(params) {
     super(params), this.type = "richtext", this._currentHoverIcon = null, this.numberType = RICHTEXT_NUMBER_TYPE, this.onBeforeAttributeUpdate = (val, attributes, key) => {
@@ -28608,7 +28635,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.20.15";
+const version = "0.20.17";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);