@visactor/vrender 0.20.15 → 0.20.16

package/dist/index.js

@@ -4149,6 +4149,292 @@
     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",
@@ -4200,14 +4486,16 @@
         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;
@@ -11119,697 +11407,411 @@
       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;
-    }
-    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);
-      }
-      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);
       }
-    };
-    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));
+      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;
+    }
+    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();
       }
-      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");
+    };
+    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));
       }
-      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) {
@@ -14225,7 +14227,10 @@
         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);
@@ -15248,6 +15253,9 @@
           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) {
@@ -15258,13 +15266,13 @@
         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`;
       }
     }
@@ -15281,10 +15289,10 @@
         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();
@@ -15297,13 +15305,13 @@
         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();
@@ -15317,10 +15325,10 @@
         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();
@@ -15334,10 +15342,10 @@
         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();
@@ -15369,10 +15377,10 @@
         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();
@@ -15390,10 +15398,10 @@
         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();
@@ -15407,10 +15415,10 @@
         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();
@@ -15423,10 +15431,10 @@
         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();
@@ -15448,10 +15456,10 @@
         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();
@@ -15464,10 +15472,10 @@
         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();
@@ -15481,10 +15489,10 @@
         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();
@@ -15498,10 +15506,10 @@
         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();
@@ -15516,10 +15524,10 @@
         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();
@@ -15533,10 +15541,10 @@
         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();
@@ -15550,10 +15558,10 @@
         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();
@@ -15567,10 +15575,10 @@
         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();
@@ -15584,10 +15592,10 @@
         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();
@@ -15600,13 +15608,13 @@
         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}`;
       }
     }
@@ -15620,13 +15628,13 @@
         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}`;
       }
     }
@@ -15640,13 +15648,13 @@
         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}`;
       }
     }
@@ -15680,15 +15688,18 @@
         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 {
@@ -16371,7 +16382,11 @@
           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;
@@ -16594,12 +16609,18 @@
             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) {
@@ -16622,7 +16643,7 @@
           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;
       }
@@ -28614,7 +28635,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.20.15";
+    const version = "0.20.16";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);