@visactor/vrender-components 0.20.14 → 0.20.16

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pi, isArray, pointAt, isNumber, getDecimalPlaces, isNil, Color, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, rotatePoint, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, normalizeAngle, flattenArray, cloneDeep, get, last, isRotateAABBIntersect, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, cos, sin, pointAt, isNumber, getDecimalPlaces, isNil, Color, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, sqrt, transformBoundsWithMatrix, arrayEqual, getContextFont, rotatePoint, clampAngleByRadian, asin, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, array, isValidNumber, calculateAnchorOfBounds, computeQuadrant, isGreater, isLess, normalizeAngle, flattenArray, cloneDeep, get, last, isRotateAABBIntersect, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -2086,7 +2086,8 @@ const DefaultAttribute = Object.assign(Object.assign(Object.assign({
   globalZIndex: 1,
   globalCompositeOperation: "",
   overflow: "hidden",
-  shadowPickMode: "graphic"
+  shadowPickMode: "graphic",
+  keepStrokeScale: !1
 }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
 const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   startAngle: 0,
@@ -2230,6 +2231,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(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",
@@ -2281,14 +2568,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;
@@ -6144,660 +6433,374 @@ class DefaultMatrixAllocate {
   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$J = 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$A = undefined && undefined.__metadata || function (k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-  },
-  __param$x = undefined && undefined.__param || function (paramIndex, decorator) {
-    return function (target, key) {
-      decorator(target, key, paramIndex);
-    };
-  };
-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(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(attribute.forceBoundsWidth) ? attribute.forceBoundsWidth : attribute.forceBoundsWidth(),
-        dx = textDrawOffsetX(textAlign, w);
-      aabbBounds.set(dx, aabbBounds.y1, dx + w, aabbBounds.y2);
-    }
-  }
-  combindShadowAABBBounds(bounds, graphic) {
-    if (graphic && graphic.shadowRoot) {
-      const b = graphic.shadowRoot.AABBBounds;
-      bounds.union(b);
-    }
-  }
-  transformAABBBounds(attribute, aabbBounds, theme, miter, graphic) {
-    if (!aabbBounds.empty()) {
-      const {
-          scaleX = theme.scaleX,
-          scaleY = theme.scaleY,
-          stroke = theme.stroke,
-          shadowBlur = theme.shadowBlur,
-          lineWidth = theme.lineWidth,
-          pickStrokeBuffer = theme.pickStrokeBuffer,
-          strokeBoundsBuffer = theme.strokeBoundsBuffer
-        } = attribute,
-        tb1 = this.tempAABBBounds1,
-        tb2 = this.tempAABBBounds2;
-      if (stroke && lineWidth) {
-        const scaledHalfLineWidth = (lineWidth + pickStrokeBuffer) / Math.abs(scaleX + scaleY);
-        boundStroke(tb1, scaledHalfLineWidth, miter, strokeBoundsBuffer), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
-      }
-      if (shadowBlur) {
-        const {
-            shadowOffsetX = theme.shadowOffsetX,
-            shadowOffsetY = theme.shadowOffsetY
-          } = attribute,
-          shadowBlurWidth = shadowBlur / Math.abs(scaleX + scaleY) * 2;
-        boundStroke(tb1, shadowBlurWidth, !1, strokeBoundsBuffer + 1), tb1.translate(shadowOffsetX, shadowOffsetY), aabbBounds.union(tb1);
-      }
-    }
-    if (this.combindShadowAABBBounds(aabbBounds, graphic), aabbBounds.empty()) return;
-    let updateMatrix = !0;
-    const m = graphic.transMatrix;
-    graphic && graphic.isContainer && (updateMatrix = !(1 === m.a && 0 === m.b && 0 === m.c && 1 === m.d && 0 === m.e && 0 === m.f)), updateMatrix && transformBoundsWithMatrix(aabbBounds, aabbBounds, m);
-  }
-  validCheck(attribute, theme, aabbBounds, graphic) {
-    if (!graphic) return !0;
-    if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
-    if (graphic.shadowRoot) return !0;
-    if (!graphic.valid) return aabbBounds.clear(), !1;
-    const {
-      visible = theme.visible
-    } = attribute;
-    return !!visible || (aabbBounds.clear(), !1);
+    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$J([injectable(), __param$x(0, inject(GraphicCreator$1)), __metadata$A("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;
-    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();
+  release() {
+    this.pools = [];
   }
 }
+const matrixAllocate = new DefaultMatrixAllocate();
+const mat4Allocate = new DefaultMat4Allocate();
 
-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]+\.?))/
+var __decorate$J = 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$A = undefined && undefined.__metadata || function (k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+  },
+  __param$x = undefined && undefined.__param || function (paramIndex, decorator) {
+    return function (target, key) {
+      decorator(target, key, paramIndex);
+    };
   };
-  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 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;
   }
-  function matchRadialOrientation() {
-    let radialType = function () {
-      const circle = match("shape", /^(circle)/i, 0);
-      circle && (circle.style = matchLength() || matchExtentKeyword());
-      return circle;
-    }() || function () {
-      const ellipse = match("shape", /^(ellipse)/i, 0);
-      ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
-      return ellipse;
-    }();
-    if (radialType) radialType.at = matchAtPosition();else {
-      const extent = matchExtentKeyword();
-      if (extent) {
-        radialType = extent;
-        const positionAt = matchAtPosition();
-        positionAt && (radialType.at = positionAt);
-      } else {
-        const defaultPosition = matchPositioning();
-        defaultPosition && (radialType = {
-          type: "default-radial",
-          at: defaultPosition
-        });
-      }
+  if (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];
     }
-    return radialType;
+    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 matchExtentKeyword() {
-    return match("extent-keyword", tokens.extentKeywords, 1);
+}
+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 matchAtPosition() {
-    if (match("position", /^at/, 0)) {
-      const positioning = matchPositioning();
-      return positioning || error("Missing positioning value"), positioning;
-    }
+  onAttributeUpdate(graphic) {
+    this.hooks.onAttributeUpdate.taps.length && this.hooks.onAttributeUpdate.call(graphic);
   }
-  function matchPositioning() {
-    const location = {
-      x: matchDistance(),
-      y: matchDistance()
-    };
-    if (location.x || location.y) return {
-      type: "position",
-      value: location
-    };
+  onSetStage(graphic, stage) {
+    this.hooks.onSetStage.taps.length && this.hooks.onSetStage.call(graphic, stage);
   }
-  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;
+  onRemove(graphic) {
+    this.hooks.onRemove.taps.length && this.hooks.onRemove.call(graphic);
   }
-  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;
+  onRelease(graphic) {
+    this.hooks.onRelease.taps.length && this.hooks.onRelease.call(graphic);
   }
-  function matchDistance() {
-    return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+  onAddIncremental(graphic, group, stage) {
+    this.hooks.onAddIncremental.taps.length && this.hooks.onAddIncremental.call(graphic, group, stage);
   }
-  function matchLength() {
-    return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+  onClearIncremental(group, stage) {
+    this.hooks.onClearIncremental.taps.length && this.hooks.onClearIncremental.call(group, stage);
   }
-  function match(type, pattern, captureIndex) {
-    const captures = scan(pattern);
-    if (captures) return {
-      type: type,
-      value: captures[captureIndex]
-    };
+  beforeUpdateAABBBounds(graphic, stage, willUpdate, bounds) {
+    this.hooks.beforeUpdateAABBBounds.taps.length && this.hooks.beforeUpdateAABBBounds.call(graphic, stage, willUpdate, bounds);
   }
-  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;
+  afterUpdateAABBBounds(graphic, stage, bounds, params, selfChange) {
+    this.hooks.afterUpdateAABBBounds.taps.length && this.hooks.afterUpdateAABBBounds.call(graphic, stage, bounds, params, selfChange);
   }
-  function consume(size) {
-    input = input.substr(size);
+  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;
   }
-  return function (code) {
-    return input = code.toString(), getAST();
-  };
-}();
-class GradientParser {
-  static IsGradient(c) {
-    return !("string" == typeof c && !c.includes("gradient"));
+  updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
+    const {
+      textAlign: textAlign,
+      textBaseline: textBaseline
+    } = attribute;
+    if (null != attribute.forceBoundsHeight) {
+      const h = isNumber(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(attribute.forceBoundsWidth) ? attribute.forceBoundsWidth : attribute.forceBoundsWidth(),
+        dx = textDrawOffsetX(textAlign, w);
+      aabbBounds.set(dx, aabbBounds.y1, dx + w, aabbBounds.y2);
+    }
   }
-  static IsGradientStr(c) {
-    return "string" == typeof c && c.includes("gradient");
+  combindShadowAABBBounds(bounds, graphic) {
+    if (graphic && graphic.shadowRoot) {
+      const b = graphic.shadowRoot.AABBBounds;
+      bounds.union(b);
+    }
   }
-  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);
+  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);
       }
-    } catch (err) {
-      return c;
     }
-    return c;
+    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);
   }
-  static ParseConic(datum) {
+  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 {
-        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
-      }))
+      visible = theme.visible
+    } = attribute;
+    return !!visible || (aabbBounds.clear(), !1);
+  }
+  updateTempAABBBounds(aabbBounds) {
+    const tb1 = this.tempAABBBounds1,
+      tb2 = this.tempAABBBounds2;
+    return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), {
+      tb1: tb1,
+      tb2: tb2
     };
   }
-  static ParseRadial(datum) {
+};
+DefaultGraphicService = __decorate$J([injectable(), __param$x(0, inject(GraphicCreator$1)), __metadata$A("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));
+  }
+  beforeRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
+    this._beforeRenderContribitions && this._beforeRenderContribitions.forEach(c => {
+      if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
+        if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
+      }
+      c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
+    });
+  }
+  afterRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
+    this._afterRenderContribitions && this._afterRenderContribitions.forEach(c => {
+      if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
+        if (!(Array.isArray(c.supportedAppName) ? c.supportedAppName : [c.supportedAppName]).includes(graphic.stage.params.context.appName)) return;
+      }
+      c.drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params);
+    });
+  }
+  valid(graphic, defaultAttribute, fillCb, strokeCb) {
     const {
-      colorStops = []
-    } = datum;
-    return {
-      gradient: "radial",
-      x0: .5,
-      y0: .5,
-      x1: .5,
-      y1: .5,
-      r0: 0,
-      r1: 1,
-      stops: colorStops.map(item => ({
-        color: item.value,
-        offset: parseFloat(item.length.value) / 100
-      }))
+        fill = defaultAttribute.fill,
+        background: background,
+        stroke = defaultAttribute.stroke,
+        opacity = defaultAttribute.opacity,
+        fillOpacity = defaultAttribute.fillOpacity,
+        lineWidth = defaultAttribute.lineWidth,
+        strokeOpacity = defaultAttribute.strokeOpacity,
+        visible = defaultAttribute.visible
+      } = graphic.attribute,
+      fVisible = fillVisible(opacity, fillOpacity, fill),
+      sVisible = strokeVisible(opacity, strokeOpacity),
+      doFill = runFill(fill, background),
+      doStroke = runStroke(stroke, lineWidth);
+    return !(!graphic.valid || !visible) && !(!doFill && !doStroke) && !!(fVisible || sVisible || fillCb || strokeCb || background) && {
+      fVisible: fVisible,
+      sVisible: sVisible,
+      doFill: doFill,
+      doStroke: doStroke
     };
   }
-  static ParseLinear(datum) {
+  transform(graphic, graphicAttribute, context) {
+    let use3dMatrixIn3dMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
     const {
-        orientation: orientation,
-        colorStops = []
-      } = datum,
-      halfPi = pi / 2;
-    let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi : 0;
-    for (; angle < 0;) angle += pi2;
-    for (; angle > pi2;) angle -= pi2;
-    let x0 = 0,
-      y0 = 0,
-      x1 = 0,
-      y1 = 0;
-    return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = Math.cos(angle)) : angle < pi ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi), y1 = Math.cos(angle - pi)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi), y1 -= Math.sin(angle - halfPi - pi)), {
-      gradient: "linear",
-      x0: x0,
-      y0: y0,
-      x1: x1,
-      y1: y1,
-      stops: colorStops.map(item => ({
-        color: item.value,
-        offset: parseFloat(item.length.value) / 100
-      }))
-    };
+        x = graphicAttribute.x,
+        y = graphicAttribute.y,
+        z = graphicAttribute.z,
+        scaleX = graphicAttribute.scaleX,
+        scaleY = graphicAttribute.scaleY,
+        angle = graphicAttribute.angle,
+        postMatrix: postMatrix
+      } = graphic.attribute,
+      lastModelMatrix = context.modelMatrix,
+      camera = context.camera;
+    result.x = x, result.y = y, result.z = z, result.lastModelMatrix = lastModelMatrix;
+    const shouldTransform3d = camera && (use3dMatrixIn3dMode || shouldUseMat4(graphic)),
+      onlyTranslate = shouldTransform3d ? graphic.transMatrix.onlyTranslate() && !postMatrix : 1 === scaleX && 1 === scaleY && 0 === angle && !postMatrix;
+    if (shouldTransform3d) {
+      const nextModelMatrix = mat4Allocate.allocate(),
+        modelMatrix = mat4Allocate.allocate();
+      getModelMatrix(modelMatrix, graphic, graphicAttribute), multiplyMat4Mat4(nextModelMatrix, lastModelMatrix || nextModelMatrix, modelMatrix), result.x = 0, result.y = 0, result.z = 0, context.modelMatrix = nextModelMatrix, context.setTransform(1, 0, 0, 1, 0, 0, !0), mat4Allocate.free(modelMatrix);
+    }
+    if (onlyTranslate && !lastModelMatrix) {
+      const point = graphic.getOffsetXY(graphicAttribute);
+      result.x += point.x, result.y += point.y, result.z = z, context.setTransformForCurrent();
+    } else if (shouldTransform3d) result.x = 0, result.y = 0, result.z = 0, context.setTransform(1, 0, 0, 1, 0, 0, !0);else if (camera && context.project) {
+      const point = graphic.getOffsetXY(graphicAttribute);
+      result.x += point.x, result.y += point.y, this.transformWithoutTranslate(context, result.x, result.y, result.z, scaleX, scaleY, angle);
+    } else context.transformFromMatrix(graphic.transMatrix, !0), result.x = 0, result.y = 0, result.z = 0;
+    return result;
   }
-}
-
-function getScaledStroke(context, width, dpr) {
-  let strokeWidth = width;
-  const {
-      a: a,
-      b: b,
-      c: c,
-      d: d
-    } = context.currentMatrix,
-    scaleX = Math.sign(a) * Math.sqrt(a * a + b * b),
-    scaleY = Math.sign(d) * Math.sqrt(c * c + d * d);
-  return scaleX + scaleY === 0 ? 0 : (strokeWidth = strokeWidth / Math.abs(scaleX + scaleY) * 2 * dpr, strokeWidth);
-}
-function createColor(context, c, params) {
-  let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  if (!c || !0 === c) return "black";
-  let result, color;
-  if (isArray(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
-  if (color = GradientParser.Parse(color), "string" == typeof color) return color;
-  if (params.AABBBounds && (!params.attribute || 0 !== params.attribute.scaleX || 0 !== params.attribute.scaleY)) {
-    const bounds = params.AABBBounds;
-    let w = bounds.x2 - bounds.x1,
-      h = bounds.y2 - bounds.y1,
-      x = bounds.x1 - offsetX,
-      y = bounds.y1 - offsetY;
-    if (params.attribute) {
-      const {
-        scaleX = 1,
-        scaleY = 1
-      } = params.attribute;
-      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+  transformUseContext2d(graphic, graphicAttribute, z, context) {
+    const camera = context.camera;
+    if (this.camera = camera, camera) {
+      const bounds = graphic.AABBBounds,
+        width = bounds.x2 - bounds.x1,
+        height = bounds.y2 - bounds.y1,
+        p1 = context.project(0, 0, z),
+        p2 = context.project(width, 0, z),
+        p3 = context.project(width, height, z),
+        _p1 = {
+          x: 0,
+          y: 0
+        },
+        _p2 = {
+          x: width,
+          y: 0
+        },
+        _p3 = {
+          x: width,
+          y: height
+        };
+      context.camera = null;
+      const denom = 1 / (_p1.x * (_p3.y - _p2.y) - _p2.x * _p3.y + _p3.x * _p2.y + (_p2.x - _p3.x) * _p1.y),
+        m11 = -(_p1.y * (p3.x - p2.x) - _p2.y * p3.x + _p3.y * p2.x + (_p2.y - _p3.y) * p1.x) * denom,
+        m12 = (_p2.y * p3.y + _p1.y * (p2.y - p3.y) - _p3.y * p2.y + (_p3.y - _p2.y) * p1.y) * denom,
+        m21 = (_p1.x * (p3.x - p2.x) - _p2.x * p3.x + _p3.x * p2.x + (_p2.x - _p3.x) * p1.x) * denom,
+        m22 = -(_p2.x * p3.y + _p1.x * (p2.y - p3.y) - _p3.x * p2.y + (_p3.x - _p2.x) * p1.y) * denom,
+        dx = (_p1.x * (_p3.y * p2.x - _p2.y * p3.x) + _p1.y * (_p2.x * p3.x - _p3.x * p2.x) + (_p3.x * _p2.y - _p2.x * _p3.y) * p1.x) * denom,
+        dy = (_p1.x * (_p3.y * p2.y - _p2.y * p3.y) + _p1.y * (_p2.x * p3.y - _p3.x * p2.y) + (_p3.x * _p2.y - _p2.x * _p3.y) * p1.y) * denom;
+      context.setTransform(m11, m12, m21, m22, dx, dy, !0);
     }
-    "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
   }
-  return result || "orange";
-}
-function createLinearGradient(context, color, x, y, w, h) {
-  var _a, _b, _c, _d;
-  const canvasGradient = context.createLinearGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : 0) * h, x + (null !== (_c = color.x1) && void 0 !== _c ? _c : 1) * w, y + (null !== (_d = color.y1) && void 0 !== _d ? _d : 0) * h);
-  return color.stops.forEach(stop => {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient;
-}
-function createRadialGradient(context, color, x, y, w, h) {
-  var _a, _b, _c, _d, _e, _f;
-  const canvasGradient = context.createRadialGradient(x + (null !== (_a = color.x0) && void 0 !== _a ? _a : .5) * w, y + (null !== (_b = color.y0) && void 0 !== _b ? _b : .5) * h, Math.max(w, h) * (null !== (_c = color.r0) && void 0 !== _c ? _c : 0), x + (null !== (_d = color.x1) && void 0 !== _d ? _d : .5) * w, y + (null !== (_e = color.y1) && void 0 !== _e ? _e : .5) * h, Math.max(w, h) * (null !== (_f = color.r1) && void 0 !== _f ? _f : .5));
-  return color.stops.forEach(stop => {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient;
-}
-function createConicGradient(context, color, x, y, w, h) {
-  var _a, _b;
-  const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
-  return color.stops.forEach(stop => {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient.GetPattern(w + x, h + y, undefined);
+  restoreTransformUseContext2d(graphic, graphicAttribute, z, context) {
+    this.camera && (context.camera = this.camera);
+  }
+  transformWithoutTranslate(context, x, y, z, scaleX, scaleY, angle) {
+    const p = context.project(x, y, z);
+    context.translate(p.x, p.y, !1), context.scale(scaleX, scaleY, !1), context.rotate(angle, !1), context.translate(-p.x, -p.y, !1), context.setTransformForCurrent();
+  }
+  _draw(graphic, defaultAttr, computed3dMatrix, drawContext, params) {
+    const {
+      context: context
+    } = drawContext;
+    if (!context) return;
+    const {
+      renderable: renderable
+    } = graphic.attribute;
+    if (!1 === renderable) return;
+    context.highPerformanceSave();
+    const data = this.transform(graphic, defaultAttr, context, computed3dMatrix),
+      {
+        x: x,
+        y: y,
+        z: z,
+        lastModelMatrix: lastModelMatrix
+      } = data;
+    this.z = z, drawPathProxy(graphic, context, x, y, drawContext, params) || (this.drawShape(graphic, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
+  }
 }
 
 var __decorate$I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -7024,7 +7027,8 @@ class DefaultArcRenderContribution {
       x: originX = arcAttribute.x,
       y: originY = arcAttribute.y,
       scaleX = arcAttribute.scaleX,
-      scaleY = arcAttribute.scaleY
+      scaleY = arcAttribute.scaleY,
+      keepStrokeScale = arcAttribute.keepStrokeScale
     } = arc.attribute;
     let {
       innerRadius = arcAttribute.innerRadius,
@@ -7036,7 +7040,7 @@ class DefaultArcRenderContribution {
         {
           distance = arcAttribute[key].distance
         } = borderStyle,
-        d = getScaledStroke(context, distance, context.dpr),
+        d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
         deltaAngle = distance / outerRadius,
         sign = "outerBorder" === key ? 1 : -1;
       if (arc.setAttributes({
@@ -7081,14 +7085,15 @@ class DefaultCircleRenderContribution {
         x: originX = circleAttribute.x,
         y: originY = circleAttribute.y,
         scaleX = circleAttribute.scaleX,
-        scaleY = circleAttribute.scaleY
+        scaleY = circleAttribute.scaleY,
+        keepStrokeScale = circleAttribute.keepStrokeScale
       } = circle.attribute,
       renderBorder = (borderStyle, key) => {
         const doStroke = !(!borderStyle || !borderStyle.stroke),
           {
             distance = circleAttribute[key].distance
           } = borderStyle,
-          d = getScaledStroke(context, distance, context.dpr),
+          d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
           sign = "outerBorder" === key ? 1 : -1;
         if (context.beginPath(), context.arc(x, y, radius + sign * d, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), strokeCb) strokeCb(context, borderStyle, circleAttribute[key]);else if (doStroke) {
           const lastOpacity = circleAttribute[key].opacity;
@@ -7207,7 +7212,8 @@ class DefaultRectRenderContribution {
       scaleX = rectAttribute.scaleX,
       scaleY = rectAttribute.scaleY,
       x1: x1,
-      y1: y1
+      y1: y1,
+      keepStrokeScale = rectAttribute.keepStrokeScale
     } = rect.attribute;
     let {
       width: width,
@@ -7220,7 +7226,7 @@ class DefaultRectRenderContribution {
         {
           distance = rectAttribute[key].distance
         } = borderStyle,
-        d = getScaledStroke(context, distance, context.dpr),
+        d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
         nextX = x + sign * d,
         nextY = y + sign * d,
         dw = 2 * d;
@@ -7377,14 +7383,15 @@ class DefaultSymbolRenderContribution {
         x: originX = symbolAttribute.x,
         y: originY = symbolAttribute.y,
         scaleX = symbolAttribute.scaleX,
-        scaleY = symbolAttribute.scaleY
+        scaleY = symbolAttribute.scaleY,
+        keepStrokeScale = symbolAttribute.keepStrokeScale
       } = symbol.attribute,
       renderBorder = (borderStyle, key) => {
         const doStroke = !(!borderStyle || !borderStyle.stroke),
           {
             distance = symbolAttribute[key].distance
           } = borderStyle,
-          d = getScaledStroke(context, distance, context.dpr),
+          d = keepStrokeScale ? distance : getScaledStroke(context, distance, context.dpr),
           sign = "outerBorder" === key ? 1 : -1;
         if (context.beginPath(), !1 === parsedPath.drawOffset(context, size, x, y, sign * d) && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), strokeCb) strokeCb(context, borderStyle, symbolAttribute[key]);else if (doStroke) {
           const lastOpacity = symbolAttribute[key].opacity;
@@ -9192,7 +9199,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);
@@ -10212,6 +10222,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(size) ? size : Math.min(size[0], size[1]);
+  }
 }
 
 function circle(ctx, r, x, y, z) {
@@ -10222,13 +10235,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`;
   }
 }
@@ -10245,10 +10258,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();
@@ -10261,13 +10274,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();
@@ -10281,10 +10294,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();
@@ -10298,10 +10311,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();
@@ -10333,10 +10346,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();
@@ -10354,10 +10367,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();
@@ -10371,10 +10384,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();
@@ -10387,10 +10400,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();
@@ -10412,10 +10425,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();
@@ -10428,10 +10441,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();
@@ -10445,10 +10458,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();
@@ -10462,10 +10475,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();
@@ -10480,10 +10493,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();
@@ -10497,10 +10510,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();
@@ -10514,10 +10527,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();
@@ -10531,10 +10544,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();
@@ -10548,10 +10561,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();
@@ -10564,13 +10577,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}`;
   }
 }
@@ -10584,13 +10597,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}`;
   }
 }
@@ -10604,13 +10617,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}`;
   }
 }
@@ -10644,15 +10657,18 @@ class CustomSymbolClass {
     this.pathStr = "", this.type = type, isArray(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(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 {
@@ -11156,7 +11172,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;
@@ -11379,12 +11399,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) {
@@ -11407,7 +11433,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;
   }
@@ -13343,8 +13369,9 @@ class PickerBase {
     return this.canvasRenderer.drawShape(graphic, pickContext, x, y, {}, null, (context, arcAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, arcAttribute, themeAttribute) => {
       if (picked) return !0;
       const lineWidth = arcAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = arcAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+        pickStrokeBuffer = arcAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
+        keepStrokeScale = arcAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+      return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
     }), pickContext.highPerformanceRestore(), picked;
   }
 }
@@ -13566,8 +13593,9 @@ class RectPickerBase {
     if (!onlyTranslate || rect.shadowRoot || isNumber(cornerRadius, !0) && 0 !== cornerRadius || isArray(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
       if (picked) return !0;
       const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+        pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
+        keepStrokeScale = rectAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+      return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
     });else {
       const {
         fill = rectAttribute.fill,
@@ -13746,8 +13774,9 @@ class BaseLinePicker extends BaseRender {
     return this.canvasRenderer.drawShape(graphic, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked), (context, lineAttribute, themeAttribute) => {
       if (picked) return !0;
       const lineWidth = lineAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = lineAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
+        pickStrokeBuffer = lineAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
+        keepStrokeScale = lineAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+      return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
     }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
   }
 }
@@ -13882,8 +13911,9 @@ let DefaultCanvasSymbolPicker = class extends Base3dPicker {
     return this.canvasRenderer.drawShape(symbol, pickContext, x, y, {}, null, (context, symbolAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked), (context, symbolAttribute, themeAttribute) => {
       if (picked) return !0;
       const lineWidth = symbolAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
+        pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
+        keepStrokeScale = symbolAttribute.keepStrokeScale || themeAttribute.keepStrokeScale;
+      return pickContext.lineWidth = keepStrokeScale ? lineWidth + pickStrokeBuffer : getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(pickPoint.x, pickPoint.y), picked;
     }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
   }
 };
@@ -15987,24 +16017,29 @@ function defaultLabelPosition(type) {
             return DefaultPositions;
     }
 }
-function clampText(text, width, height) {
+function clampText(text, width, height, padding = {}) {
     const { x1, x2, y1, y2 } = text.AABBBounds;
+    const { top = 0, left = 0, right = 0, bottom = 0 } = padding;
     const minX = Math.min(x1, x2);
     const maxX = Math.max(x1, x2);
     const minY = Math.min(y1, y2);
     const maxY = Math.max(y1, y2);
+    const minXWithPadding = 0 - left;
+    const maxXWithPadding = width + right;
+    const minYWithPadding = 0 - top;
+    const maxYWithPadding = height + bottom;
     let dx = 0;
     let dy = 0;
-    if (minX < 0 && maxX - minX <= width) {
+    if (minX < minXWithPadding && maxX - minX <= width) {
         dx = -minX;
     }
-    else if (maxX > width && minX - (maxX - width) >= 0) {
+    else if (maxX > maxXWithPadding && minX - (maxX - width) >= minXWithPadding) {
         dx = width - maxX;
     }
-    if (minY < 0 && maxY - minY <= height) {
+    if (minY < minYWithPadding && maxY - minY <= height) {
         dy = -minY;
     }
-    else if (maxY > height && minY - (maxY - height) >= 0) {
+    else if (maxY > maxYWithPadding && minY - (maxY - height) >= minYWithPadding) {
         dy = height - maxY;
     }
     return { dx, dy };
@@ -16304,69 +16339,177 @@ function loadLabelComponent() {
     registerLine();
 }
 
-function shiftY(texts, option = {}) {
-    const { maxIterations = 10, maxError = 0.1, padding = 1, maxY = Number.MAX_VALUE } = option;
+const isIntersect = (top, bottom) => {
+    return Math.ceil(top) > Math.floor(bottom);
+};
+const isXIntersect = ([a, b], [c, d]) => {
+    return d > a && b > c;
+};
+function getIntersectionLength(range1, range2) {
+    const [start1, end1] = range1;
+    const [start2, end2] = range2;
+    const start = Math.max(start1, start2);
+    const end = Math.min(end1, end2);
+    return Math.max(0, end - start);
+}
+function shiftY(texts, option) {
+    const { maxY = Number.MAX_VALUE, labelling, globalShiftY = { enable: true, maxIterations: 10, maxError: 0.1, padding: 1 } } = option;
     const n = texts.length;
     if (n <= 1) {
         return texts;
     }
-    const isIntersect = ([a, b], [c, d]) => {
-        return d > a && b > c;
-    };
+    const xMap = new Map();
     const textInformation = new Map();
-    const getY0 = (text) => textInformation.get(text).y0;
-    const getY = (text) => textInformation.get(text).y;
+    const getY1Initial = (text) => textInformation.get(text).y1Initial;
     const getHeight = (text) => textInformation.get(text).height;
+    const getY1 = (text) => textInformation.get(text).y1;
+    const getY = (text) => textInformation.get(text).y;
+    const getX = (text) => textInformation.get(text).x;
     const getX1 = (text) => textInformation.get(text).x1;
     const getX2 = (text) => textInformation.get(text).x2;
-    const setY = (text, y) => {
-        textInformation.get(text).y = y;
+    const getAdjustAttempts = (text) => textInformation.get(text).attempts;
+    const setY1 = (text, y) => {
+        textInformation.get(text).y1 = y;
+    };
+    const setAdjustAttempts = (text, attempts) => {
+        textInformation.get(text).attempts = attempts;
     };
+    function adjustPositionInOneGroup(texts) {
+        if (texts.length === 1) {
+            return;
+        }
+        for (let i = texts.length - 1; i > 0; i--) {
+            const curText = texts[i];
+            const upperText = texts[i - 1];
+            const lowerText = texts[i + 1];
+            if (isIntersect(getY1(upperText) + getHeight(upperText), getY1(curText))) {
+                const { y } = labelling(curText);
+                if (!lowerText || !isIntersect(y + getHeight(curText) / 2, getY1(lowerText))) {
+                    if (y + getHeight(curText) / 2 <= maxY) {
+                        setY1(curText, getY1(curText) + y - getY(curText));
+                    }
+                }
+            }
+        }
+    }
+    texts.sort((a, b) => a.attribute.x - b.attribute.x);
     for (const text of texts) {
         const { y1, y2, x1, x2 } = text.AABBBounds;
-        textInformation.set(text, { y0: y1, y: y1, height: y2 - y1, x1, x2 });
+        const { x, y } = text.attribute;
+        textInformation.set(text, { y1Initial: y1, y1, y2, y, height: y2 - y1, x1, x2, x, attempts: 0 });
+        let hasRange = false;
+        for (const [range, xGroupTexts] of xMap) {
+            const { start, end } = range;
+            if (x1 >= start && x2 <= end) {
+                xGroupTexts.push(text);
+                hasRange = true;
+            }
+            else if (isNumberClose(x, getX(xGroupTexts[0]), undefined, 5)) {
+                const newRange = { start: Math.min(start, x1), end: Math.max(end, x2) };
+                xGroupTexts.push(text);
+                xMap.set(newRange, xGroupTexts);
+                xMap.delete(range);
+                hasRange = true;
+            }
+            else if (getIntersectionLength([start, end], [x1, x2]) / (end - start) > 0.5) {
+                const newRange = { start: Math.min(start, x1), end: Math.max(end, x2) };
+                xGroupTexts.push(text);
+                xMap.set(newRange, xGroupTexts);
+                xMap.delete(range);
+                hasRange = true;
+            }
+            if (hasRange) {
+                break;
+            }
+        }
+        if (!hasRange) {
+            xMap.set({ start: x1, end: x2 }, [text]);
+        }
     }
-    for (let iter = 0; iter < maxIterations; iter++) {
-        texts.sort((a, b) => getY(a) - getY(b));
-        let error = 0;
-        for (let i = 0; i < n - 1; i++) {
-            const curText = texts[i];
-            let j = i + 1;
-            let nextText;
-            while ((nextText = texts[j]) &&
-                !isIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])) {
-                j += 1;
-            }
-            if (nextText) {
-                const y0 = getY(curText);
-                const h0 = getHeight(curText);
-                const y1 = getY(nextText);
-                const delta = y1 - (y0 + h0);
-                if (delta < padding) {
-                    const newDelta = (padding - delta) / 2;
-                    error = Math.max(error, newDelta);
-                    if (y1 + newDelta + getHeight(nextText) > maxY) {
-                        setY(curText, y0 - (padding - delta));
-                    }
-                    else if (y0 - newDelta < 0) {
-                        setY(nextText, y1 + (padding - delta));
-                    }
-                    else {
-                        setY(curText, y0 - newDelta);
-                        setY(nextText, y1 + newDelta);
+    for (const xTexts of xMap.values()) {
+        xTexts.sort((a, b) => getY1Initial(a) - getY1Initial(b));
+        adjustPositionInOneGroup(xTexts);
+    }
+    if (globalShiftY.enable !== false) {
+        const { maxIterations = 10, maxError = 0.1, padding = 1, maxAttempts = 1000, deltaYTolerance = Number.MAX_VALUE } = globalShiftY;
+        for (let iter = 0; iter < maxIterations; iter++) {
+            texts.sort((a, b) => getY1(a) - getY1(b));
+            let error = 0;
+            for (let i = 0; i < n - 1; i++) {
+                const curText = texts[i];
+                if (getAdjustAttempts(curText) >= maxAttempts) {
+                    continue;
+                }
+                let j = i + 1;
+                let nextText;
+                while ((nextText = texts[j]) &&
+                    !isXIntersect([getX1(curText), getX2(curText)], [getX1(nextText), getX2(nextText)])) {
+                    j += 1;
+                }
+                if (nextText) {
+                    const y1 = getY1(curText);
+                    const h0 = getHeight(curText);
+                    const nextY1 = getY1(nextText);
+                    const delta = nextY1 - (y1 + h0);
+                    if (delta < padding) {
+                        const newDelta = (padding - delta) / 2;
+                        error = Math.max(error, newDelta);
+                        if (y1 + newDelta + getHeight(nextText) > maxY) {
+                            const newY1 = y1 - (padding - delta);
+                            const curTextDelta = getY1Initial(curText) - newY1;
+                            if (Math.abs(curTextDelta) <= deltaYTolerance) {
+                                setY1(curText, newY1);
+                                setAdjustAttempts(curText, getAdjustAttempts(curText) + 1);
+                            }
+                        }
+                        else if (y1 - newDelta < 0) {
+                            const newY1 = nextY1 + (padding - delta);
+                            const nextTextDelta = getY1Initial(nextText) - newY1;
+                            if (Math.abs(nextTextDelta) <= deltaYTolerance) {
+                                setY1(nextText, newY1);
+                                setAdjustAttempts(nextText, getAdjustAttempts(nextText) + 1);
+                            }
+                        }
+                        else {
+                            const newCurY1 = y1 - newDelta;
+                            const curTextDelta = getY1Initial(curText) - newCurY1;
+                            const newNextY1 = nextY1 + newDelta;
+                            const nextTextDelta = getY1Initial(nextText) - newNextY1;
+                            if (Math.abs(curTextDelta) <= deltaYTolerance && Math.abs(nextTextDelta) <= deltaYTolerance) {
+                                setY1(curText, newCurY1);
+                                setY1(nextText, newNextY1);
+                                setAdjustAttempts(curText, getAdjustAttempts(curText) + 1);
+                                setAdjustAttempts(nextText, getAdjustAttempts(nextText) + 1);
+                            }
+                        }
                     }
                 }
             }
-        }
-        if (error < maxError) {
-            break;
+            if (error < maxError) {
+                break;
+            }
         }
     }
     for (const text of texts) {
-        const finalY = text.attribute.y + getY(text) - getY0(text);
+        const finalY = text.attribute.y + getY1(text) - getY1Initial(text);
         text.setAttribute('y', finalY);
     }
-    return texts;
+    const result = [];
+    texts.sort((a, b) => a.attribute.x - b.attribute.x);
+    let start = 0;
+    let end = texts.length - 1;
+    while (start <= end) {
+        if (start === end) {
+            result.push(texts[start]);
+        }
+        else {
+            result.push(texts[start]);
+            result.push(texts[end]);
+        }
+        start++;
+        end--;
+    }
+    return result;
 }
 
 loadLabelComponent();
@@ -16712,18 +16855,25 @@ class LabelBase extends AbstractComponent {
         if (clampForce) {
             for (let i = 0; i < result.length; i++) {
                 const text = labels[i];
-                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
+                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
                 if (dx !== 0 || dy !== 0) {
                     text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
+                    text._isClamped = true;
                 }
             }
         }
-        result = shiftY(result, Object.assign({ maxY: bmpTool.height }, strategy));
+        result = shiftY(result, Object.assign(Object.assign({ maxY: bmpTool.height }, strategy), { labelling: (text) => {
+                const baseMark = this.getRelatedGraphic(text.attribute);
+                const graphicBound = this._isCollectionBase
+                    ? this.getGraphicBounds(null, this._idToPoint.get(text.attribute.id))
+                    : this.getGraphicBounds(baseMark, text);
+                return this.labeling(text.AABBBounds, graphicBound, 'bottom', this.attribute.offset);
+            } }));
         for (let i = 0; i < result.length; i++) {
             const text = result[i];
             const bounds = text.AABBBounds;
             const range = boundToRange(bmpTool, bounds, true);
-            if (canPlace(bmpTool, bitmap, bounds, clampForce, overlapPadding)) {
+            if (canPlace(bmpTool, bitmap, bounds, clampForce, text._isClamped ? 0 : overlapPadding)) {
                 bitmap.setRange(range);
             }
             else {
@@ -16796,7 +16946,7 @@ class LabelBase extends AbstractComponent {
                 }
             }
             if (!hasPlace && clampForce) {
-                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
+                const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height, bmpTool.padding);
                 if (dx === 0 && dy === 0) {
                     if (canPlace(bmpTool, bitmap, text.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
@@ -29546,6 +29696,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.20.14";
+const version = "0.20.16";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };