@visactor/vrender-components 0.20.0-alpha.0 → 0.20.0-alpha.1

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, Matrix, pi2, Logger, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, isArray, cos, sin, pi, pointAt, isNumber, getDecimalPlaces, isNil, Color, has, normalTransform, isValidUrl, isBase64, epsilon, acos, sqrt, transformBoundsWithMatrix, arrayEqual, Bounds, getRectIntersect, isRectIntersect, clampAngleByRadian, asin, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isEmpty, isValid, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian as polarToCartesian$1, array, isValidNumber, calculateAnchorOfBounds, isGreater, isLess, isNumberClose, normalizeAngle as normalizeAngle$1, flattenArray, cloneDeep, get, isRotateAABBIntersect, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, Matrix, pi2, Logger, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, isArray, cos, sin, pi, pointAt, isNumber, getDecimalPlaces, isNil, Color, has, normalTransform, isValidUrl, isBase64, epsilon, acos, sqrt, transformBoundsWithMatrix, arrayEqual, Bounds, getRectIntersect, isRectIntersect, getContextFont, clampAngleByRadian, asin, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isEmpty, isValid, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian as polarToCartesian$1, array, isValidNumber, calculateAnchorOfBounds, isGreater, isLess, isNumberClose, normalizeAngle as normalizeAngle$1, flattenArray, cloneDeep, get, isRotateAABBIntersect, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -779,7 +779,7 @@ class SyncHook extends Hook {
 const EnvContribution = Symbol.for("EnvContribution");
 const VGlobal = Symbol.for("VGlobal");
 
-var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$R = 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;
@@ -949,7 +949,7 @@ let DefaultGlobal = class {
     return this._env || this.setEnv("browser"), this.envContribution.getElementTopLeft(dom, baseWindow);
   }
 };
-DefaultGlobal = __decorate$S([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(EnvContribution)), __metadata$G("design:paramtypes", [Object])], DefaultGlobal);
+DefaultGlobal = __decorate$R([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(EnvContribution)), __metadata$G("design:paramtypes", [Object])], DefaultGlobal);
 
 const circleThreshold = tau - 1e-8;
 class BoundsContext {
@@ -1844,7 +1844,7 @@ class CustomPath2D extends CurvePath {
       controlX = 0,
       controlY = 0;
     for (let i = 0, len = commandStrList.length; i < len; ++i) {
-      switch (current = commandStrList[i], 1 === sX && 1 === sY || (current = scale$2(current, sX, sY)), current[0]) {
+      switch (current = commandStrList[i], 1 === sX && 1 === sY || (current = scale$1(current, sX, sY)), current[0]) {
         case "l":
           x += current[1], y += current[2], this.lineTo(x + l, y + t);
           break;
@@ -1988,7 +1988,7 @@ class CustomPath2D extends CurvePath {
   }
 }
 const temp = ["l", 0, 0, 0, 0, 0, 0, 0];
-function scale$2(current, sX, sY) {
+function scale$1(current, sX, sY) {
   const c = temp[0] = current[0];
   if ("a" === c || "A" === c) temp[1] = sX * current[1], temp[2] = sY * current[2], temp[3] = current[3], temp[4] = current[4], temp[5] = current[5], temp[6] = sX * current[6], temp[7] = sY * current[7];else if ("h" === c || "H" === c) temp[1] = sX * current[1];else if ("v" === c || "V" === c) temp[1] = sY * current[1];else for (let i = 1, n = current.length; i < n; ++i) temp[i] = (i % 2 == 1 ? sX : sY) * current[i];
   return temp;
@@ -2216,6 +2216,7 @@ const DefaultTextAttribute = Object.assign(Object.assign(Object.assign({}, Defau
   keepDirIn3d: !0
 });
 const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), {
+  editable: !1,
   width: 300,
   height: 300,
   ellipsis: !0,
@@ -2297,14 +2298,7 @@ const defaultFormatting = {
 const regLetter = /\w|\(|\)|-/;
 const regPunctuation = /[.?!,;:/，。？！、；：]/;
 const regFirstSpace = /\S/;
-function applyFillStyle(ctx, character) {
-  const fillStyle = character && character.fill || defaultFormatting.fill;
-  if (!fillStyle) return void (ctx.globalAlpha = 0);
-  const {
-    fillOpacity = 1,
-    opacity = 1
-  } = character;
-  ctx.globalAlpha = fillOpacity * opacity, ctx.fillStyle = fillStyle;
+const setTextStyle = (ctx, character) => {
   let fontSize = character.fontSize || 16;
   switch (character.script) {
     case "super":
@@ -2319,6 +2313,15 @@ function applyFillStyle(ctx, character) {
     fontSize: fontSize,
     fontFamily: character.fontFamily || "sans-serif"
   });
+};
+function applyFillStyle(ctx, character) {
+  const fillStyle = character && character.fill || defaultFormatting.fill;
+  if (!fillStyle) return void (ctx.globalAlpha = 0);
+  const {
+    fillOpacity = 1,
+    opacity = 1
+  } = character;
+  ctx.globalAlpha = fillOpacity * opacity, ctx.fillStyle = fillStyle, setTextStyle(ctx, character);
 }
 function applyStrokeStyle(ctx, character) {
   const strokeStyle = character && character.stroke || defaultFormatting.stroke;
@@ -2327,21 +2330,7 @@ function applyStrokeStyle(ctx, character) {
     strokeOpacity = 1,
     opacity = 1
   } = character;
-  ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle;
-  let fontSize = character.fontSize || 16;
-  switch (character.script) {
-    case "super":
-    case "sub":
-      fontSize *= .8;
-  }
-  ctx.setTextStyle({
-    textAlign: "left",
-    textBaseline: character.textBaseline || "alphabetic",
-    fontStyle: character.fontStyle || "",
-    fontWeight: character.fontWeight || "",
-    fontSize: fontSize,
-    fontFamily: character.fontFamily || "sans-serif"
-  });
+  ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
 }
 function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
   if (!width || width <= 0) return 0;
@@ -2380,7 +2369,7 @@ function measureTextCanvas(text, character) {
   return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
 }
 
-var __decorate$R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$Q = 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;
@@ -2654,9 +2643,9 @@ let ATextMeasure = class {
     return data.str = data.result, data.width += suffixWidth, data;
   }
 };
-ATextMeasure = __decorate$R([injectable()], ATextMeasure);
+ATextMeasure = __decorate$Q([injectable()], ATextMeasure);
 
-var __decorate$Q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$P = 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;
@@ -2665,7 +2654,7 @@ var __decorate$Q = undefined && undefined.__decorate || function (decorators, ta
 };
 const TextMeasureContribution = Symbol.for("TextMeasureContribution");
 let DefaultTextMeasureContribution = class extends ATextMeasure {};
-DefaultTextMeasureContribution = __decorate$Q([injectable()], DefaultTextMeasureContribution);
+DefaultTextMeasureContribution = __decorate$P([injectable()], DefaultTextMeasureContribution);
 
 const container = new Container();
 
@@ -2726,7 +2715,7 @@ class DefaultCanvasAllocate {
 }
 const canvasAllocate = new DefaultCanvasAllocate();
 
-var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$O = 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;
@@ -2870,9 +2859,9 @@ let DefaultWindow = class {
     return this._handler.getTopLeft(baseWindow);
   }
 };
-DefaultWindow = __decorate$P([injectable(), __metadata$F("design:paramtypes", [])], DefaultWindow);
+DefaultWindow = __decorate$O([injectable(), __metadata$F("design:paramtypes", [])], DefaultWindow);
 
-var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$N = 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;
@@ -2977,7 +2966,7 @@ let DefaultGraphicUtil = class {
     return c.nativeCanvas ? c.nativeCanvas : null;
   }
 };
-DefaultGraphicUtil = __decorate$O([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(TextMeasureContribution)), __metadata$E("design:paramtypes", [Object])], DefaultGraphicUtil);
+DefaultGraphicUtil = __decorate$N([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(TextMeasureContribution)), __metadata$E("design:paramtypes", [Object])], DefaultGraphicUtil);
 var TransformMode;
 !function (TransformMode) {
   TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -3035,7 +3024,7 @@ let DefaultTransformUtil = class {
     return this;
   }
 };
-DefaultTransformUtil = __decorate$O([injectable(), __metadata$E("design:paramtypes", [])], DefaultTransformUtil);
+DefaultTransformUtil = __decorate$N([injectable(), __metadata$E("design:paramtypes", [])], DefaultTransformUtil);
 
 const defaultThemeObj = {
     arc: DefaultArcAttribute,
@@ -3727,7 +3716,9 @@ class ACustomAnimate {
   onFirstRun() {}
   onStart() {}
   onEnd() {}
-  getEndProps() {}
+  getEndProps() {
+    return this.to;
+  }
   getFromProps() {
     return this.from;
   }
@@ -3792,7 +3783,7 @@ class Animate {
       const stage = this.target.stage;
       stage && stage.renderNextFrame();
     }
-    return 1 === this.subAnimates.length && this.tailAnimate.duration === customAnimate.duration && this.trySetAttribute(customAnimate.getFromProps(), customAnimate.mode), this;
+    return 1 === this.subAnimates.length && this.tailAnimate.totalDuration === customAnimate.duration && this.trySetAttribute(customAnimate.getFromProps(), customAnimate.mode), this;
   }
   trySetAttribute(attr) {
     let mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Animate.mode;
@@ -5692,7 +5683,7 @@ const DynamicLayerHandlerContribution = Symbol.for("DynamicLayerHandlerContribut
 const VirtualLayerHandlerContribution = Symbol.for("VirtualLayerHandlerContribution");
 
 var DefaultLayerService_1,
-  __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  __decorate$M = 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;
@@ -5763,7 +5754,7 @@ let DefaultLayerService = DefaultLayerService_1 = class {
     this.layerMap.delete(stage);
   }
 };
-DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$N([injectable(), __metadata$D("design:paramtypes", [])], DefaultLayerService);
+DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$M([injectable(), __metadata$D("design:paramtypes", [])], DefaultLayerService);
 
 var coreModule = new ContainerModule(bind => {
   bind(VGlobal).to(DefaultGlobal).inSingletonScope(), bind(VWindow).to(DefaultWindow), bind(GraphicUtil).to(DefaultGraphicUtil).inSingletonScope(), bind(TransformUtil).to(DefaultTransformUtil).inSingletonScope(), bind(LayerService).to(DefaultLayerService).inSingletonScope();
@@ -5864,11 +5855,7 @@ function drawArcPath(arc, context, cx, cy, outerRadius, innerRadius, partStroke)
     deltaAngle = abs(endAngle - startAngle),
     clockwise = endAngle > startAngle;
   let collapsedToLine = !1;
-  if (outerRadius < innerRadius) {
-    const temp = outerRadius;
-    outerRadius = innerRadius, innerRadius = temp;
-  }
-  if (outerRadius <= epsilon) context.moveTo(cx, cy);else if (deltaAngle >= pi2 - epsilon) context.moveTo(cx + outerRadius * cos(startAngle), cy + outerRadius * sin(startAngle)), context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise), innerRadius > epsilon && (context.moveTo(cx + innerRadius * cos(endAngle), cy + innerRadius * sin(endAngle)), context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise));else {
+  if (outerRadius < innerRadius && ([innerRadius, outerRadius] = [outerRadius, innerRadius]), outerRadius <= epsilon) context.moveTo(cx, cy);else if (deltaAngle >= pi2 - epsilon) context.moveTo(cx + outerRadius * cos(startAngle), cy + outerRadius * sin(startAngle)), context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise), innerRadius > epsilon && (context.moveTo(cx + innerRadius * cos(endAngle), cy + innerRadius * sin(endAngle)), context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise));else {
     const cornerRadius = arc.getParsedCornerRadius(),
       {
         outerDeltaAngle: outerDeltaAngle,
@@ -5956,19 +5943,6 @@ const SymbolRenderContribution = Symbol.for("SymbolRenderContribution");
 const TextRenderContribution = Symbol.for("TextRenderContribution");
 const InteractiveSubRenderContribution = Symbol.for("InteractiveSubRenderContribution");
 
-function getContextFont(text) {
-  let defaultAttr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let fontSizeScale = arguments.length > 2 ? arguments[2] : undefined;
-  fontSizeScale || (fontSizeScale = 1);
-  const {
-    fontStyle = defaultAttr.fontStyle,
-    fontVariant = defaultAttr.fontVariant,
-    fontWeight = defaultAttr.fontWeight,
-    fontSize = defaultAttr.fontSize,
-    fontFamily = defaultAttr.fontFamily
-  } = text;
-  return (fontStyle ? fontStyle + " " : "") + (fontVariant ? fontVariant + " " : "") + (fontWeight ? fontWeight + " " : "") + fontSize * fontSizeScale + "px " + (fontFamily || "sans-serif");
-}
 function textDrawOffsetY(baseline, h) {
   return "top" === baseline ? Math.ceil(.79 * h) : "middle" === baseline ? Math.round(.3 * h) : "bottom" === baseline ? Math.round(-.21 * h) : 0;
 }
@@ -6017,80 +5991,7 @@ class DefaultSymbolOuterBorderBoundsContribution extends DefaultOuterBorderBound
   }
 }
 
-function createMat4() {
-  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
-}
-class DefaultMatrixAllocate {
-  constructor() {
-    this.pools = [];
-  }
-  allocate(a, b, c, d, e, f) {
-    if (!this.pools.length) return new Matrix(a, b, c, d, e, f);
-    const m = this.pools.pop();
-    return m.a = a, m.b = b, m.c = c, m.d = d, m.e = e, m.f = f, m;
-  }
-  allocateByObj(matrix) {
-    if (!this.pools.length) return new Matrix(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
-    const m = this.pools.pop();
-    return m.a = matrix.a, m.b = matrix.b, m.c = matrix.c, m.d = matrix.d, m.e = matrix.e, m.f = matrix.f, m;
-  }
-  free(d) {
-    this.pools.push(d);
-  }
-  get length() {
-    return this.pools.length;
-  }
-  release() {
-    this.pools = [];
-  }
-}
-class DefaultMat4Allocate {
-  constructor() {
-    this.pools = [];
-  }
-  static identity(out) {
-    return out[0] = 1, out[1] = 0, out[2] = 0, out[3] = 0, out[4] = 0, out[5] = 1, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = 0, out[13] = 0, out[14] = 0, out[15] = 1, 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$M = 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$C = 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 identity(out) {
+function identityMat4(out) {
   return out[0] = 1, out[1] = 0, out[2] = 0, out[3] = 0, out[4] = 0, out[5] = 1, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = 0, out[13] = 0, out[14] = 0, out[15] = 1, out;
 }
 function rotateX(out, a, rad) {
@@ -6142,7 +6043,7 @@ function translate(out, a, v) {
 function mat3Tomat4(out, b) {
   out[0] = b.a, out[1] = b.b, out[2] = 0, out[3] = 0, out[4] = b.c, out[5] = b.d, out[6] = 0, out[7] = 0, out[8] = 0, out[9] = 0, out[10] = 1, out[11] = 0, out[12] = b.e, out[13] = b.f, out[14] = 0, out[15] = 1;
 }
-function scale$1(out, a, v) {
+function scaleMat4(out, a, v) {
   const x = v[0],
     y = v[1],
     z = v[2];
@@ -6171,6 +6072,80 @@ function multiplyMat4Mat4(out, a, b) {
     b3 = b[3];
   return out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, b0 = b[4], b1 = b[5], b2 = b[6], b3 = b[7], out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, b0 = b[8], b1 = b[9], b2 = b[10], b3 = b[11], out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, b0 = b[12], b1 = b[13], b2 = b[14], b3 = b[15], out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30, out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31, out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32, out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33, out;
 }
+
+function createMat4() {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+}
+class DefaultMatrixAllocate {
+  constructor() {
+    this.pools = [];
+  }
+  allocate(a, b, c, d, e, f) {
+    if (!this.pools.length) return new Matrix(a, b, c, d, e, f);
+    const m = this.pools.pop();
+    return m.a = a, m.b = b, m.c = c, m.d = d, m.e = e, m.f = f, m;
+  }
+  allocateByObj(matrix) {
+    if (!this.pools.length) return new Matrix(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+    const m = this.pools.pop();
+    return m.a = matrix.a, m.b = matrix.b, m.c = matrix.c, m.d = matrix.d, m.e = matrix.e, m.f = matrix.f, m;
+  }
+  free(d) {
+    this.pools.push(d);
+  }
+  get length() {
+    return this.pools.length;
+  }
+  release() {
+    this.pools = [];
+  }
+}
+class DefaultMat4Allocate {
+  constructor() {
+    this.pools = [];
+  }
+  static identity(out) {
+    return identityMat4(out);
+  }
+  allocate() {
+    if (!this.pools.length) return createMat4();
+    const m = this.pools.pop();
+    return DefaultMat4Allocate.identity(m), m;
+  }
+  allocateByObj(d) {
+    let m;
+    m = this.pools.length ? this.pools.pop() : createMat4();
+    for (let i = 0; i < m.length; i++) m[i] = d[i];
+    return m;
+  }
+  free(m) {
+    m && this.pools.push(m);
+  }
+  get length() {
+    return this.pools.length;
+  }
+  release() {
+    this.pools = [];
+  }
+}
+const matrixAllocate = new DefaultMatrixAllocate();
+const mat4Allocate = new DefaultMat4Allocate();
+
+var __decorate$L = 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$C = 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 {
@@ -6203,7 +6178,7 @@ function getModelMatrix(out, graphic, theme) {
     } else _anchor[1] = anchor3d[1];
     _anchor[2] = null !== (_a = anchor3d[2]) && void 0 !== _a ? _a : 0;
   }
-  if (identity(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]]), scale$1(out, out, [scaleX, scaleY, scaleZ]), angle) {
+  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) {
@@ -6284,7 +6259,7 @@ let DefaultGraphicService = class {
         x: x,
         y: y
       } = attribute;
-      width = null != width ? width : x1 - x, height = null != height ? height : y1 - y, aabbBounds.set(0, 0, width || 0, height || 0);
+      width = null != width ? width : x1 - x, height = null != height ? height : y1 - y, (isFinite(width) || isFinite(height) || isFinite(x) || isFinite(y)) && aabbBounds.set(0, 0, width || 0, height || 0);
     }
     const tb1 = this.tempAABBBounds1,
       tb2 = this.tempAABBBounds2;
@@ -6299,7 +6274,8 @@ let DefaultGraphicService = class {
       width: width,
       height: height,
       path: path,
-      clip = groupTheme.clip
+      clip = groupTheme.clip,
+      display: display
     } = attribute;
     path && path.length ? path.forEach(g => {
       aabbBounds.union(g.AABBBounds);
@@ -6478,21 +6454,23 @@ let DefaultGraphicService = class {
   }
   updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds, graphic) {
     const {
-        points = lineTheme.points
+        points = lineTheme.points,
+        connectedType: connectedType
       } = attribute,
       b = aabbBounds;
     return points.forEach(p => {
-      b.add(p.x, p.y);
+      !1 === p.defined && "zero" !== connectedType || b.add(p.x, p.y);
     }), b;
   }
   updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds, graphic) {
     const {
-        segments = lineTheme.segments
+        segments = lineTheme.segments,
+        connectedType: connectedType
       } = attribute,
       b = aabbBounds;
     return segments.forEach(s => {
       s.points.forEach(p => {
-        b.add(p.x, p.y);
+        !1 === p.defined && "zero" !== connectedType || b.add(p.x, p.y);
       });
     }), b;
   }
@@ -6691,7 +6669,7 @@ let DefaultGraphicService = class {
     return !!visible || (aabbBounds.clear(), !1);
   }
 };
-DefaultGraphicService = __decorate$M([injectable(), __param$x(0, inject(GraphicCreator$1)), __metadata$C("design:paramtypes", [Object])], DefaultGraphicService);
+DefaultGraphicService = __decorate$L([injectable(), __param$x(0, inject(GraphicCreator$1)), __metadata$C("design:paramtypes", [Object])], DefaultGraphicService);
 
 const result = {
   x: 0,
@@ -7071,83 +7049,53 @@ function getScaledStroke(context, width, dpr) {
     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, offsetX, offsetY) {
+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;
-  return color = GradientParser.Parse(color), "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
+  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, params) {
-  let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+function createLinearGradient(context, color, x, y, w, h) {
   var _a, _b, _c, _d;
-  const bounds = params.AABBBounds;
-  if (!bounds) return;
-  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;
-    if (scaleX * scaleY == 0) return;
-    w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
-  }
   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, params) {
-  let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+function createRadialGradient(context, color, x, y, w, h) {
   var _a, _b, _c, _d, _e, _f;
-  const bounds = params.AABBBounds;
-  if (!bounds) return;
-  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;
-    if (scaleX * scaleY == 0) return;
-    x /= scaleX, y /= scaleY, w /= scaleX, h /= scaleY;
-  }
   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, params) {
-  let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+function createConicGradient(context, color, x, y, w, h) {
   var _a, _b;
-  const bounds = params.AABBBounds;
-  if (!bounds) return;
-  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;
-    if (scaleX * scaleY == 0) return;
-    w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
-  }
   const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
   return color.stops.forEach(stop => {
     canvasGradient.addColorStop(stop.offset, stop.color);
   }), canvasGradient.GetPattern(w + x, h + y, undefined);
 }
 
-var __decorate$L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$K = 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;
@@ -7231,7 +7179,7 @@ let DefaultBaseInteractiveRenderContribution = class {
     });
   }
 };
-DefaultBaseInteractiveRenderContribution = __decorate$L([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(InteractiveSubRenderContribution)), __metadata$B("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+DefaultBaseInteractiveRenderContribution = __decorate$K([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(InteractiveSubRenderContribution)), __metadata$B("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
 
 class DefaultBaseTextureRenderContribution {
   constructor() {
@@ -7526,7 +7474,7 @@ function createRectPath(path, x, y, width, height, rectCornerRadius) {
   return path.closePath(), path;
 }
 
-var __decorate$K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+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;
@@ -7589,7 +7537,7 @@ let SplitRectBeforeRenderContribution = class {
     Array.isArray(stroke) && stroke.some(s => !1 === s) && (doFillOrStroke.doStroke = !1);
   }
 };
-SplitRectBeforeRenderContribution = __decorate$K([injectable()], SplitRectBeforeRenderContribution);
+SplitRectBeforeRenderContribution = __decorate$J([injectable()], SplitRectBeforeRenderContribution);
 let SplitRectAfterRenderContribution = class {
   constructor() {
     this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -7615,7 +7563,7 @@ let SplitRectAfterRenderContribution = class {
     }
   }
 };
-SplitRectAfterRenderContribution = __decorate$K([injectable()], SplitRectAfterRenderContribution);
+SplitRectAfterRenderContribution = __decorate$J([injectable()], SplitRectAfterRenderContribution);
 const defaultRectRenderContribution = new DefaultRectRenderContribution();
 const defaultRectTextureRenderContribution = defaultBaseTextureRenderContribution;
 const defaultRectBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
@@ -7754,7 +7702,7 @@ class DefaultAreaTextureRenderContribution extends DefaultBaseTextureRenderContr
   }
 }
 
-var __decorate$J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$I = 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;
@@ -7782,10 +7730,7 @@ let DefaultCanvasArcRender = class extends BaseRender {
     const deltaAngle = abs(endAngle - startAngle),
       clockwise = endAngle > startAngle;
     let collapsedToLine = !1;
-    if (outerRadius < innerRadius) {
-      const temp = outerRadius;
-      outerRadius = innerRadius, innerRadius = temp;
-    }
+    outerRadius < innerRadius && ([innerRadius, outerRadius] = [outerRadius, innerRadius]);
     const cornerRadius = arc.getParsedCornerRadius(),
       {
         outerDeltaAngle: outerDeltaAngle,
@@ -7925,9 +7870,9 @@ let DefaultCanvasArcRender = class extends BaseRender {
     this._draw(arc, arcAttribute, !1, drawContext, params);
   }
 };
-DefaultCanvasArcRender = __decorate$J([injectable(), __param$v(0, inject(ContributionProvider)), __param$v(0, named(ArcRenderContribution)), __metadata$A("design:paramtypes", [Object])], DefaultCanvasArcRender);
+DefaultCanvasArcRender = __decorate$I([injectable(), __param$v(0, inject(ContributionProvider)), __param$v(0, named(ArcRenderContribution)), __metadata$A("design:paramtypes", [Object])], DefaultCanvasArcRender);
 
-var __decorate$I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$H = 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;
@@ -7970,7 +7915,7 @@ let DefaultCanvasCircleRender = class extends BaseRender {
     this._draw(circle, circleAttribute, !1, drawContext, params);
   }
 };
-DefaultCanvasCircleRender = __decorate$I([injectable(), __param$u(0, inject(ContributionProvider)), __param$u(0, named(CircleRenderContribution)), __metadata$z("design:paramtypes", [Object])], DefaultCanvasCircleRender);
+DefaultCanvasCircleRender = __decorate$H([injectable(), __param$u(0, inject(ContributionProvider)), __param$u(0, named(CircleRenderContribution)), __metadata$z("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
 function drawSegItem(ctx, curve, endPercent, params) {
   if (!curve.p1) return;
@@ -7988,16 +7933,32 @@ function drawSegItem(ctx, curve, endPercent, params) {
   }
 }
 
-function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
+function drawEachCurve(path, curve, lastCurve, defined0, offsetX, offsetY, offsetZ) {
   var _a;
+  let p0 = curve.p0,
+    newDefined0 = defined0;
+  if (lastCurve && lastCurve.originP1 === lastCurve.originP2 && (p0 = lastCurve.p0), curve.defined) defined0 || (path.lineTo(p0.x + offsetX, p0.y + offsetY, offsetZ), newDefined0 = !defined0);else {
+    const {
+      originP1: originP1,
+      originP2: originP2
+    } = curve;
+    let validP;
+    if (originP1 && !1 !== originP1.defined ? validP = p0 : originP1 && !1 !== originP2.defined && (validP = null !== (_a = curve.p3) && void 0 !== _a ? _a : curve.p1), defined0) {
+      newDefined0 = !defined0;
+      const x = validP ? validP.x : curve.p0.x,
+        y = validP ? validP.y : curve.p0.y;
+      path.moveTo(x + offsetX, y + offsetY, offsetZ);
+    } else validP && (newDefined0 = !defined0, path.lineTo(validP.x + offsetX, validP.y + offsetY, offsetZ));
+  }
+  return newDefined0;
+}
+function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
   const {
     offsetX = 0,
     offsetY = 0,
     offsetZ = 0,
     mode = "none",
-    drawConnect = !1,
-    zeroX = 0,
-    zeroY = 0
+    drawConnect = !1
   } = params || {};
   if (drawConnect && "none" === mode) return;
   if (!segPath) return;
@@ -8010,24 +7971,7 @@ function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
       let lastCurve,
         defined0 = !0;
       curves.forEach((curve, i) => {
-        var _a;
-        let p0 = curve.p0;
-        if (curve.originP1 !== curve.originP2) {
-          if (lastCurve && lastCurve.originP1 === lastCurve.originP2 && (p0 = lastCurve.p0), curve.defined) defined0 || (path.lineTo(p0.x + offsetX, p0.y + offsetY, offsetZ), defined0 = !defined0);else {
-            const {
-              originP1: originP1,
-              originP2: originP2
-            } = curve;
-            let validP;
-            if (originP1 && !1 !== originP1.defined ? validP = p0 : originP1 && !1 !== originP2.defined && (validP = null !== (_a = curve.p3) && void 0 !== _a ? _a : curve.p1), defined0) {
-              defined0 = !defined0;
-              const x = validP ? validP.x : curve.p0.x,
-                y = validP ? validP.y : curve.p0.y;
-              path.moveTo(x + offsetX, y + offsetY, offsetZ);
-            } else validP && (defined0 = !defined0, path.lineTo(validP.x + offsetX, validP.y + offsetY, offsetZ));
-          }
-          lastCurve = curve;
-        } else lastCurve = curve;
+        curve.originP1 !== curve.originP2 ? (defined0 = drawEachCurve(path, curve, lastCurve, defined0, offsetX, offsetY, offsetZ), lastCurve = curve) : lastCurve = curve;
       });
     } else curves.forEach(curve => {
       curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
@@ -8047,25 +7991,11 @@ function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
       _p = (totalDrawLength - drawedLengthUntilLast) / curCurveLength;
     if (drawedLengthUntilLast += curCurveLength, _p < 0) break;
     if (drawConnect) {
-      let p0 = curve.p0;
       if (curve.originP1 === curve.originP2) {
         lastCurve = curve;
         continue;
       }
-      if (lastCurve && lastCurve.originP1 === lastCurve.originP2 && (p0 = lastCurve.p0), curve.defined) defined0 || (path.lineTo(p0.x + offsetX, p0.y + offsetY, offsetZ), defined0 = !defined0);else {
-        const {
-          originP1: originP1,
-          originP2: originP2
-        } = curve;
-        let validP;
-        if (originP1 && !1 !== originP1.defined ? validP = p0 : originP1 && !1 !== originP2.defined && (validP = null !== (_a = curve.p3) && void 0 !== _a ? _a : curve.p1), defined0) {
-          defined0 = !defined0;
-          const x = validP ? validP.x : curve.p0.x,
-            y = validP ? validP.y : curve.p0.y;
-          path.moveTo(x + offsetX, y + offsetY, offsetZ);
-        } else validP && (defined0 = !defined0, path.lineTo(validP.x + offsetX, validP.y + offsetY, offsetZ));
-      }
-      lastCurve = curve;
+      defined0 = drawEachCurve(path, curve, lastCurve, defined0, offsetX, offsetY, offsetZ), lastCurve = curve;
     } else {
       if (!curve.defined) {
         needMoveTo = !0;
@@ -8109,7 +8039,7 @@ function drawIncrementalAreaSegments(path, lastSeg, segments, params) {
   });
 }
 
-var __decorate$H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$G = 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;
@@ -8266,7 +8196,7 @@ let DefaultCanvasLineRender = class extends BaseRender {
     } else this.drawSegmentItem(context, line.cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute, lineAttribute, clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb);
   }
 };
-DefaultCanvasLineRender = __decorate$H([injectable()], DefaultCanvasLineRender);
+DefaultCanvasLineRender = __decorate$G([injectable()], DefaultCanvasLineRender);
 
 function drawAreaSegments(path, segPath, percent, params) {
   var _a;
@@ -8395,7 +8325,7 @@ function drawAreaBlock(path, topList, bottomList, params) {
 const defaultAreaTextureRenderContribution = new DefaultAreaTextureRenderContribution();
 const defaultAreaBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-var __decorate$G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$F = 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;
@@ -8601,7 +8531,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
     } else startP = points[0], endP = points[points.length - 1];
     const xTotalLength = abs(endP.x - startP.x),
       yTotalLength = abs(endP.y - startP.y);
-    direction = Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction$1.ROW : Direction$1.COLUMN : Direction$1.ROW, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
+    direction = null == endP.x1 ? Direction$1.ROW : null == endP.y1 ? Direction$1.COLUMN : Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction$1.ROW : Direction$1.COLUMN : Direction$1.ROW, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
       offsetX: offsetX,
       offsetY: offsetY,
       offsetZ: offsetZ,
@@ -8636,12 +8566,12 @@ let DefaultCanvasAreaRender = class extends BaseRender {
     return !1;
   }
 };
-DefaultCanvasAreaRender = __decorate$G([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(AreaRenderContribution)), __metadata$y("design:paramtypes", [Object])], DefaultCanvasAreaRender);
+DefaultCanvasAreaRender = __decorate$F([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(AreaRenderContribution)), __metadata$y("design:paramtypes", [Object])], DefaultCanvasAreaRender);
 
 const defaultPathTextureRenderContribution = defaultBaseTextureRenderContribution;
 const defaultPathBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-var __decorate$F = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$E = 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;
@@ -8687,9 +8617,9 @@ let DefaultCanvasPathRender = class extends BaseRender {
     this.tempTheme = pathAttribute, this._draw(path, pathAttribute, !1, drawContext, params), this.tempTheme = null;
   }
 };
-DefaultCanvasPathRender = __decorate$F([injectable(), __param$s(0, inject(ContributionProvider)), __param$s(0, named(PathRenderContribution)), __metadata$x("design:paramtypes", [Object])], DefaultCanvasPathRender);
+DefaultCanvasPathRender = __decorate$E([injectable(), __param$s(0, inject(ContributionProvider)), __param$s(0, named(PathRenderContribution)), __metadata$x("design:paramtypes", [Object])], DefaultCanvasPathRender);
 
-var __decorate$E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$D = 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;
@@ -8750,9 +8680,9 @@ let DefaultCanvasRectRender = class extends BaseRender {
     this.tempTheme = rectAttribute, this._draw(rect, rectAttribute, !1, drawContext, params), this.tempTheme = null;
   }
 };
-DefaultCanvasRectRender = __decorate$E([injectable(), __param$r(0, inject(ContributionProvider)), __param$r(0, named(RectRenderContribution)), __metadata$w("design:paramtypes", [Object])], DefaultCanvasRectRender);
+DefaultCanvasRectRender = __decorate$D([injectable(), __param$r(0, inject(ContributionProvider)), __param$r(0, named(RectRenderContribution)), __metadata$w("design:paramtypes", [Object])], DefaultCanvasRectRender);
 
-var __decorate$D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$C = 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;
@@ -8795,25 +8725,20 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
         keepDirIn3d = symbolAttribute.keepDirIn3d
       } = symbol.attribute,
       z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
-    if (context.beginPath(), keepDirIn3d && context.camera && context.project) {
-      const p = context.project(x, y, z),
-        camera = context.camera;
-      context.camera = null, !1 === parsedPath.draw(context, isArray(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, void 0, (p, a) => {
-        var _a, _b, _c;
-        if (symbol._parsedPath.svgCache) {
-          const obj = Object.assign({}, a);
-          obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.fill) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
-        }
-        a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
-      }) && context.closePath(), context.camera = camera;
-    } else !1 === parsedPath.draw(context, size, x, y, z, (p, a) => {
+    context.beginPath();
+    const callback = (p, a) => {
       var _a, _b, _c;
       if (symbol._parsedPath.svgCache) {
         const obj = Object.assign({}, a);
-        obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.opacity) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
+        obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.fill) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
       }
       a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
-    }) && context.closePath();
+    };
+    if (keepDirIn3d && context.camera && context.project) {
+      const p = context.project(x, y, z),
+        camera = context.camera;
+      context.camera = null, !1 === parsedPath.draw(context, isArray(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, void 0, callback) && context.closePath(), context.camera = camera;
+    } else !1 === parsedPath.draw(context, size, x, y, z, callback) && context.closePath();
     context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill())), doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke())), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
   }
   draw(symbol, renderService, drawContext, params) {
@@ -8821,7 +8746,7 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
     this._draw(symbol, symbolAttribute, !1, drawContext, params);
   }
 };
-DefaultCanvasSymbolRender = __decorate$D([injectable(), __param$q(0, inject(ContributionProvider)), __param$q(0, named(SymbolRenderContribution)), __metadata$v("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
+DefaultCanvasSymbolRender = __decorate$C([injectable(), __param$q(0, inject(ContributionProvider)), __param$q(0, named(SymbolRenderContribution)), __metadata$v("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
 class DefaultBoundsAllocate {
   constructor() {
@@ -8926,7 +8851,7 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
 }
 const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();
 
-var __decorate$C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$B = 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;
@@ -9106,7 +9031,7 @@ let DefaultCanvasTextRender = class extends BaseRender {
     }
   }
 };
-DefaultCanvasTextRender = __decorate$C([injectable(), __param$p(0, inject(ContributionProvider)), __param$p(0, named(TextRenderContribution)), __metadata$u("design:paramtypes", [Object])], DefaultCanvasTextRender);
+DefaultCanvasTextRender = __decorate$B([injectable(), __param$p(0, inject(ContributionProvider)), __param$p(0, named(TextRenderContribution)), __metadata$u("design:paramtypes", [Object])], DefaultCanvasTextRender);
 
 function drawPolygon(path, points, x, y) {
   path.moveTo(points[0].x + x, points[0].y + y);
@@ -9162,7 +9087,7 @@ function getProportionPoint(point, segment, length, dx, dy) {
 const defaultPolygonTextureRenderContribution = defaultBaseTextureRenderContribution;
 const defaultPolygonBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-var __decorate$B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$A = 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;
@@ -9205,9 +9130,9 @@ let DefaultCanvasPolygonRender = class extends BaseRender {
     this._draw(polygon, polygonAttribute, !1, drawContext, params);
   }
 };
-DefaultCanvasPolygonRender = __decorate$B([injectable(), __param$o(0, inject(ContributionProvider)), __param$o(0, named(PolygonRenderContribution)), __metadata$t("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
+DefaultCanvasPolygonRender = __decorate$A([injectable(), __param$o(0, inject(ContributionProvider)), __param$o(0, named(PolygonRenderContribution)), __metadata$t("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
 
-var __decorate$A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$z = 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;
@@ -9278,7 +9203,7 @@ let DefaultCanvasImageRender = class extends BaseRender {
     this._draw(image, imageAttribute, !1, drawContext);
   }
 };
-DefaultCanvasImageRender = __decorate$A([injectable(), __param$n(0, inject(ContributionProvider)), __param$n(0, named(ImageRenderContribution)), __metadata$s("design:paramtypes", [Object])], DefaultCanvasImageRender);
+DefaultCanvasImageRender = __decorate$z([injectable(), __param$n(0, inject(ContributionProvider)), __param$n(0, named(ImageRenderContribution)), __metadata$s("design:paramtypes", [Object])], DefaultCanvasImageRender);
 
 const IncrementalDrawContribution = Symbol.for("IncrementalDrawContribution");
 const ArcRender = Symbol.for("ArcRender");
@@ -9296,11 +9221,56 @@ const RichTextRender = Symbol.for("RichTextRender");
 const ImageRender = Symbol.for("ImageRender");
 const DrawContribution = Symbol.for("DrawContribution");
 
-var __decorate$z = 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);
+const draw3dItem = (context, graphic, callback, output) => {
+  let result,
+    isPie = !1,
+    is3d = !1;
+  if (graphic.forEachChildren(c => (isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie)), graphic.forEachChildren(c => (is3d = !!c.findFace, !is3d)), isPie) {
+    const children = graphic.getChildren(),
+      sortedChildren = [...children];
+    sortedChildren.sort((a, b) => {
+      var _a, _b, _c, _d;
+      let angle1 = (null !== (_b = null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0 + a.attribute.endAngle) && void 0 !== _b ? _b : 0) / 2,
+        angle2 = (null !== (_d = null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0 + b.attribute.endAngle) && void 0 !== _d ? _d : 0) / 2;
+      for (; angle1 < 0;) angle1 += pi2;
+      for (; angle2 < 0;) angle2 += pi2;
+      return angle2 - angle1;
+    }), sortedChildren.forEach(c => {
+      c._next = null, c._prev = null;
+    }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(c => {
+      graphic.appendChild(c);
+    }), output.hack_pieFace = "outside", result = callback(isPie, is3d), result && result.graphic || (output.hack_pieFace = "inside", result = callback(isPie, is3d)), result && result.graphic || (output.hack_pieFace = "top", result = callback(isPie, is3d)), graphic.removeAllChild(), children.forEach(c => {
+      c._next = null, c._prev = null;
+    }), children.forEach(c => {
+      graphic.appendChild(c);
+    });
+  } else if (is3d) {
+    const children = graphic.getChildren(),
+      zChildren = children.map(g => ({
+        ave_z: g.findFace().vertices.map(v => {
+          var _a;
+          return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
+        }).reduce((a, b) => a + b, 0),
+        g: g
+      }));
+    zChildren.sort((a, b) => b.ave_z - a.ave_z), graphic.removeAllChild(), zChildren.forEach(i => {
+      i.g._next = null, i.g._prev = null;
+    }), graphic.update(), zChildren.forEach(i => {
+      graphic.add(i.g);
+    }), result = callback(isPie, is3d), graphic.removeAllChild(), children.forEach(g => {
+      g._next = null, g._prev = null;
+    }), graphic.update(), children.forEach(g => {
+      graphic.add(g);
+    });
+  } else result = callback(isPie, is3d);
+  return result;
+};
+
+var __decorate$y = 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$r = undefined && undefined.__metadata || function (k, v) {
@@ -9314,10 +9284,10 @@ class ShadowRootDrawItemInterceptorContribution {
     this.order = 1;
   }
   afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-    return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+    return null == graphic.attribute.shadowRootIdx && graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx < 0 || (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx || graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx > 0) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
   }
   beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-    return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+    return null == graphic.attribute.shadowRootIdx && graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx > 0 || (graphic.attribute.shadowRootIdx < 0 || graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx < 0) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
   }
   drawItem(graphic, renderService, drawContext, drawContribution, params) {
     if (!graphic.shadowRoot) return !1;
@@ -9363,7 +9333,7 @@ let CommonDrawItemInterceptorContribution = class {
     return !1;
   }
 };
-CommonDrawItemInterceptorContribution = __decorate$z([injectable(), __metadata$r("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
+CommonDrawItemInterceptorContribution = __decorate$y([injectable(), __metadata$r("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
 class InteractiveDrawItemInterceptorContribution {
   constructor() {
     this.order = 1;
@@ -9444,58 +9414,14 @@ class Canvas3DDrawItemInterceptor {
         context.modelMatrix = multiplyMat4Mat4(m, lastModelMatrix, matrix);
       }
     } else context.modelMatrix = matrix;
-    if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
-      let isPie = !1,
-        is3d = !1;
-      if (graphic.forEachChildren(c => (isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie)), graphic.forEachChildren(c => (is3d = !!c.findFace, !is3d)), isPie) {
-        const children = graphic.getChildren(),
-          sortedChildren = [...children];
-        sortedChildren.sort((a, b) => {
-          var _a, _b, _c, _d;
-          let angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
-            angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
-          for (; angle1 < 0;) angle1 += pi2;
-          for (; angle2 < 0;) angle2 += pi2;
-          return angle2 - angle1;
-        }), sortedChildren.forEach(c => {
-          c._next = null, c._prev = null;
-        }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(c => {
-          graphic.appendChild(c);
-        });
-        const m = graphic.parent.globalTransMatrix;
-        drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, m), graphic.removeAllChild(), children.forEach(c => {
-          c._next = null, c._prev = null;
-        }), children.forEach(c => {
-          graphic.appendChild(c);
-        });
-      } else if (is3d) {
-        const children = graphic.getChildren(),
-          zChildren = children.map(g => ({
-            ave_z: g.findFace().vertices.map(v => {
-              var _a;
-              return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
-            }).reduce((a, b) => a + b, 0),
-            g: g
-          }));
-        zChildren.sort((a, b) => b.ave_z - a.ave_z), graphic.removeAllChild(), zChildren.forEach(i => {
-          i.g._next = null, i.g._prev = null;
-        }), graphic.update(), zChildren.forEach(i => {
-          graphic.add(i.g);
-        }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), children.forEach(g => {
-          g._next = null, g._prev = null;
-        }), graphic.update(), children.forEach(g => {
-          graphic.add(g);
-        });
-      } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
-    } else drawContribution.renderItem(graphic, drawContext);
-    return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
+    return context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer ? draw3dItem(context, graphic, (isPie, is3d) => drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !isPie && is3d), drawContext) : drawContribution.renderItem(graphic, drawContext), context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
   }
   initCanvasCtx(context) {
     context.setTransformForCurrent();
   }
 }
 
-var __decorate$y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$x = 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;
@@ -9542,7 +9468,7 @@ let DefaultRenderService = class {
     this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params), this.drawParams = null;
   }
 };
-DefaultRenderService = __decorate$y([injectable(), __param$m(0, inject(DrawContribution)), __metadata$q("design:paramtypes", [Object])], DefaultRenderService);
+DefaultRenderService = __decorate$x([injectable(), __param$m(0, inject(DrawContribution)), __metadata$q("design:paramtypes", [Object])], DefaultRenderService);
 
 var renderModule$1 = new ContainerModule(bind => {
   bind(RenderService).to(DefaultRenderService);
@@ -9551,7 +9477,7 @@ var renderModule$1 = new ContainerModule(bind => {
 const PickerService = Symbol.for("PickerService");
 const GlobalPickerService = Symbol.for("GlobalPickerService");
 
-var __decorate$x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$w = 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;
@@ -9584,7 +9510,7 @@ let ShadowRootPickItemInterceptorContribution = class {
     return context.highPerformanceRestore(), result;
   }
 };
-ShadowRootPickItemInterceptorContribution = __decorate$x([injectable()], ShadowRootPickItemInterceptorContribution);
+ShadowRootPickItemInterceptorContribution = __decorate$w([injectable()], ShadowRootPickItemInterceptorContribution);
 let InteractivePickItemInterceptorContribution = class {
   constructor() {
     this.order = 1;
@@ -9603,7 +9529,7 @@ let InteractivePickItemInterceptorContribution = class {
     return null;
   }
 };
-InteractivePickItemInterceptorContribution = __decorate$x([injectable()], InteractivePickItemInterceptorContribution);
+InteractivePickItemInterceptorContribution = __decorate$w([injectable()], InteractivePickItemInterceptorContribution);
 let Canvas3DPickItemInterceptor = class {
   constructor() {
     this.order = 1;
@@ -9614,47 +9540,7 @@ let Canvas3DPickItemInterceptor = class {
       stage = graphic.stage;
     if (!context || !stage) return null;
     if (pickParams.in3dInterceptor = !0, context.save(), this.initCanvasCtx(context), context.camera = stage.camera, graphic.isContainer) {
-      let result,
-        isPie = !1,
-        is3d = !1;
-      if (graphic.forEachChildren(c => (isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie)), graphic.forEachChildren(c => (is3d = !!c.findFace, !is3d)), isPie) {
-        const children = graphic.getChildren(),
-          sortedChildren = [...children];
-        sortedChildren.sort((a, b) => {
-          var _a, _b, _c, _d;
-          let angle1 = (null !== (_b = null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0 + a.attribute.endAngle) && void 0 !== _b ? _b : 0) / 2,
-            angle2 = (null !== (_d = null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0 + b.attribute.endAngle) && void 0 !== _d ? _d : 0) / 2;
-          for (; angle1 < 0;) angle1 += pi2;
-          for (; angle2 < 0;) angle2 += pi2;
-          return angle2 - angle1;
-        }), sortedChildren.forEach(c => {
-          c._next = null, c._prev = null;
-        }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(c => {
-          graphic.appendChild(c);
-        }), pickParams.hack_pieFace = "outside", result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams), result.graphic || (pickParams.hack_pieFace = "inside", result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams)), result.graphic || (pickParams.hack_pieFace = "top", result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams)), graphic.removeAllChild(), children.forEach(c => {
-          c._next = null, c._prev = null;
-        }), children.forEach(c => {
-          graphic.appendChild(c);
-        });
-      } else if (is3d) {
-        const children = graphic.getChildren(),
-          zChildren = children.map(g => ({
-            ave_z: g.findFace().vertices.map(v => {
-              var _a;
-              return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
-            }).reduce((a, b) => a + b, 0),
-            g: g
-          }));
-        zChildren.sort((a, b) => b.ave_z - a.ave_z), graphic.removeAllChild(), zChildren.forEach(i => {
-          i.g._next = null, i.g._prev = null;
-        }), graphic.update(), zChildren.forEach(i => {
-          graphic.add(i.g);
-        }), result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams), graphic.removeAllChild(), children.forEach(g => {
-          g._next = null, g._prev = null;
-        }), graphic.update(), children.forEach(g => {
-          graphic.add(g);
-        });
-      } else result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
+      const result = draw3dItem(context, graphic, () => pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams), pickParams);
       return context.camera = null, pickParams.in3dInterceptor = !1, context.restore(), result;
     }
     return context.restore(), null;
@@ -9663,7 +9549,7 @@ let Canvas3DPickItemInterceptor = class {
     context.setTransformForCurrent();
   }
 };
-Canvas3DPickItemInterceptor = __decorate$x([injectable()], Canvas3DPickItemInterceptor);
+Canvas3DPickItemInterceptor = __decorate$w([injectable()], Canvas3DPickItemInterceptor);
 
 var pickModule = new ContainerModule((bind, unbind, isBound) => {
   isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution), bind(InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -9676,7 +9562,7 @@ var graphicModule = new ContainerModule(bind => {
 const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
 const PluginService = Symbol.for("PluginService");
 
-var __decorate$w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$v = 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;
@@ -9726,7 +9612,7 @@ let DefaultPluginService = class {
     }), this.onRegisterPlugin = [];
   }
 };
-DefaultPluginService = __decorate$w([injectable(), __param$l(0, inject(ContributionProvider)), __param$l(0, named(AutoEnablePlugins)), __metadata$p("design:paramtypes", [Object])], DefaultPluginService);
+DefaultPluginService = __decorate$v([injectable(), __param$l(0, inject(ContributionProvider)), __param$l(0, named(AutoEnablePlugins)), __metadata$p("design:paramtypes", [Object])], DefaultPluginService);
 
 var pluginModule = new ContainerModule(bind => {
   bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -9740,7 +9626,7 @@ var textMeasureModules = new ContainerModule(bind => {
   bind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
 });
 
-var __decorate$v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$u = 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;
@@ -9817,9 +9703,9 @@ let CanvasLayerHandlerContribution = class {
     this.canvas.release();
   }
 };
-CanvasLayerHandlerContribution = __decorate$v([injectable(), __metadata$o("design:paramtypes", [])], CanvasLayerHandlerContribution);
+CanvasLayerHandlerContribution = __decorate$u([injectable(), __metadata$o("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-var __decorate$u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$t = 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;
@@ -9861,9 +9747,9 @@ let EmptyLayerHandlerContribution = class {
   }
   release() {}
 };
-EmptyLayerHandlerContribution = __decorate$u([injectable(), __metadata$n("design:paramtypes", [])], EmptyLayerHandlerContribution);
+EmptyLayerHandlerContribution = __decorate$t([injectable(), __metadata$n("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-var __decorate$t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$s = 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;
@@ -9933,7 +9819,7 @@ let OffscreenLayerHandlerContribution = class {
   }
   merge(layerHandlers) {}
 };
-OffscreenLayerHandlerContribution = __decorate$t([injectable(), __metadata$m("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+OffscreenLayerHandlerContribution = __decorate$s([injectable(), __metadata$m("design:paramtypes", [])], OffscreenLayerHandlerContribution);
 
 var layerHandlerModules = new ContainerModule(bind => {
   bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(EmptyLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution), bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution), bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
@@ -9968,11 +9854,22 @@ var __awaiter$2 = undefined && undefined.__awaiter || function (thisArg, _argume
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
+function parseChildMap(graphic, defaultZIndex, reverse) {
+  const childMap = {},
+    zIdxArray = [];
+  return graphic.forEachChildren(item => {
+    const {
+      zIndex = defaultZIndex
+    } = item.attribute;
+    childMap[zIndex] ? childMap[zIndex].push(item) : (childMap[zIndex] = [item], zIdxArray.push(zIndex));
+  }, reverse), zIdxArray.sort((a, b) => reverse ? b - a : a - b), {
+    childMap: childMap,
+    zIdxArray: zIdxArray
+  };
+}
 function foreach(graphic, defaultZIndex, cb) {
   let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
   let sort3d = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
-  const childMap = {},
-    zIdxArray = [];
   let needSort = !1;
   if (sort3d) needSort = !0;else {
     let lastZIndex;
@@ -9985,16 +9882,13 @@ function foreach(graphic, defaultZIndex, cb) {
     }, reverse);
   }
   if (needSort) {
-    graphic.forEachChildren(item => {
-      const {
-        zIndex = defaultZIndex
-      } = item.attribute;
-      childMap[zIndex] ? childMap[zIndex].push(item) : (childMap[zIndex] = [item], zIdxArray.push(zIndex));
-    }, reverse), zIdxArray.sort((a, b) => reverse ? b - a : a - b);
+    const {
+      childMap: childMap,
+      zIdxArray: zIdxArray
+    } = parseChildMap(graphic, defaultZIndex, reverse);
     let skip = !1;
     for (let i = 0; i < zIdxArray.length && !skip; i++) {
-      const idx = zIdxArray[i],
-        children = childMap[idx];
+      const children = childMap[zIdxArray[i]];
       sort3d && children.sort((a, b) => {
         var _a, _b;
         return (reverse ? -1 : 1) * ((null !== (_a = b.attribute.z) && void 0 !== _a ? _a : 0) - (null !== (_b = a.attribute.z) && void 0 !== _b ? _b : 0));
@@ -10014,8 +9908,6 @@ function foreachAsync(graphic, defaultZIndex, cb) {
 }
 function findNextGraphic(graphic, id, defaultZIndex) {
   let reverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : !1;
-  const childMap = {},
-    zIdxArray = [];
   let needSort = !1;
   graphic.forEachChildren((item, i) => {
     const {
@@ -10027,16 +9919,13 @@ function findNextGraphic(graphic, id, defaultZIndex) {
   let result = null,
     next = !1;
   if (needSort) {
-    graphic.forEachChildren(item => {
-      const {
-        zIndex = defaultZIndex
-      } = item.attribute;
-      childMap[zIndex] ? childMap[zIndex].push(item) : (childMap[zIndex] = [item], zIdxArray.push(zIndex));
-    }, reverse), zIdxArray.sort((a, b) => reverse ? b - a : a - b);
+    const {
+      childMap: childMap,
+      zIdxArray: zIdxArray
+    } = parseChildMap(graphic, defaultZIndex, reverse);
     let skip = !1;
     for (let i = 0; i < zIdxArray.length && !skip; i++) {
-      const idx = zIdxArray[i],
-        children = childMap[idx];
+      const children = childMap[zIdxArray[i]];
       for (let i = 0; i < children.length; i++) {
         if (next) {
           skip = !0, result = children[i];
@@ -10049,7 +9938,7 @@ function findNextGraphic(graphic, id, defaultZIndex) {
   return result;
 }
 
-var __decorate$s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$r = 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;
@@ -10246,9 +10135,9 @@ let DefaultDrawContribution = class {
   }
   afterDraw(renderService, drawParams) {}
 };
-DefaultDrawContribution = __decorate$s([injectable(), __param$k(0, multiInject(GraphicRender)), __param$k(1, inject(ContributionProvider)), __param$k(1, named(DrawItemInterceptor)), __metadata$l("design:paramtypes", [Array, Object])], DefaultDrawContribution);
+DefaultDrawContribution = __decorate$r([injectable(), __param$k(0, multiInject(GraphicRender)), __param$k(1, inject(ContributionProvider)), __param$k(1, named(DrawItemInterceptor)), __metadata$l("design:paramtypes", [Array, Object])], DefaultDrawContribution);
 
-var __decorate$r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$q = 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;
@@ -10340,9 +10229,9 @@ let DefaultCanvasGroupRender = class {
     }) : clip ? context.restore() : context.highPerformanceRestore();
   }
 };
-DefaultCanvasGroupRender = __decorate$r([injectable(), __param$j(0, inject(ContributionProvider)), __param$j(0, named(GroupRenderContribution)), __metadata$k("design:paramtypes", [Object])], DefaultCanvasGroupRender);
+DefaultCanvasGroupRender = __decorate$q([injectable(), __param$j(0, inject(ContributionProvider)), __param$j(0, named(GroupRenderContribution)), __metadata$k("design:paramtypes", [Object])], DefaultCanvasGroupRender);
 
-var __decorate$q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$p = 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;
@@ -10393,9 +10282,9 @@ let DefaultIncrementalCanvasLineRender = class extends DefaultCanvasLineRender {
     }), context.setShadowBlendStyle && context.setShadowBlendStyle(line, attribute, defaultAttribute), context.setStrokeStyle(line, attribute, offsetX, offsetY, defaultAttribute), context.stroke());
   }
 };
-DefaultIncrementalCanvasLineRender = __decorate$q([injectable()], DefaultIncrementalCanvasLineRender);
+DefaultIncrementalCanvasLineRender = __decorate$p([injectable()], DefaultIncrementalCanvasLineRender);
 
-var __decorate$p = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$o = 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;
@@ -10438,10 +10327,10 @@ let DefaultIncrementalCanvasAreaRender = class extends DefaultCanvasAreaRender {
     }), context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute), context.setCommonStyle(area, attribute, offsetX, offsetY, defaultAttribute), context.fill());
   }
 };
-DefaultIncrementalCanvasAreaRender = __decorate$p([injectable()], DefaultIncrementalCanvasAreaRender);
+DefaultIncrementalCanvasAreaRender = __decorate$o([injectable()], DefaultIncrementalCanvasAreaRender);
 
 var STATUS,
-  __decorate$o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  __decorate$n = 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;
@@ -10581,7 +10470,7 @@ let DefaultIncrementalDrawContribution = class extends DefaultDrawContribution {
     });
   }
 };
-DefaultIncrementalDrawContribution = __decorate$o([injectable(), __param$i(0, multiInject(GraphicRender)), __param$i(1, inject(DefaultIncrementalCanvasLineRender)), __param$i(2, inject(DefaultIncrementalCanvasAreaRender)), __param$i(3, inject(ContributionProvider)), __param$i(3, named(DrawItemInterceptor)), __metadata$j("design:paramtypes", [Array, Object, Object, Object])], DefaultIncrementalDrawContribution);
+DefaultIncrementalDrawContribution = __decorate$n([injectable(), __param$i(0, multiInject(GraphicRender)), __param$i(1, inject(DefaultIncrementalCanvasLineRender)), __param$i(2, inject(DefaultIncrementalCanvasAreaRender)), __param$i(3, inject(ContributionProvider)), __param$i(3, named(DrawItemInterceptor)), __metadata$j("design:paramtypes", [Array, Object, Object, Object])], DefaultIncrementalDrawContribution);
 
 var renderModule = new ContainerModule(bind => {
   bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
@@ -11809,9 +11698,7 @@ class CustomSymbolClass {
     }), !1) : (renderCommandList(this.path.commandList, ctx, x, y, size + offset, size + offset), !1);
   }
   draw(ctx, size, x, y, z, cb) {
-    return 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, size), !1);
+    return this.drawOffset(ctx, size, x, y, 0, z, cb);
   }
   bounds(size, bounds) {
     if (this.isSvg) {
@@ -12651,10 +12538,10 @@ class RichText extends Graphic {
       strokeOpacity: strokeOpacity
     }, config);
   }
-  doUpdateFrameCache() {
+  doUpdateFrameCache(tc) {
     var _a;
     const {
-        textConfig = [],
+        textConfig: _tc = [],
         maxWidth: maxWidth,
         maxHeight: maxHeight,
         width: width,
@@ -12668,7 +12555,8 @@ class RichText extends Graphic {
         singleLine: singleLine,
         disableAutoWrapLine: disableAutoWrapLine
       } = this.attribute,
-      paragraphs = [];
+      paragraphs = [],
+      textConfig = null != tc ? tc : _tc;
     for (let i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
       const config = this.combinedStyleToCharacter(textConfig[i]),
         iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
@@ -13226,7 +13114,7 @@ const polygonModule = new ContainerModule(bind => {
   loadPolygonModule || (loadPolygonModule = !0, bind(PolygonRender).to(DefaultCanvasPolygonRender).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PolygonRenderContribution));
 });
 
-var __decorate$n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$m = 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;
@@ -13287,7 +13175,7 @@ let DefaultCanvasRichTextRender = class extends BaseRender {
     this._draw(richtext, richtextAttribute, !1, drawContext);
   }
 };
-DefaultCanvasRichTextRender = __decorate$n([injectable(), __metadata$i("design:paramtypes", [])], DefaultCanvasRichTextRender);
+DefaultCanvasRichTextRender = __decorate$m([injectable(), __metadata$i("design:paramtypes", [])], DefaultCanvasRichTextRender);
 
 let loadRichtextModule = !1;
 const richtextModule = new ContainerModule(bind => {
@@ -13480,7 +13368,35 @@ const CanvasPolygonPicker = Symbol.for("CanvasPolygonPicker");
 const CanvasRichTextPicker = Symbol.for("CanvasRichTextPicker");
 const CanvasPickerContribution = Symbol.for("CanvasPickerContribution");
 
-var __decorate$m = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+class PickerBase {
+  contains(graphic, point, params) {
+    if (!graphic.AABBBounds.containsPoint(point)) return !1;
+    if ("imprecise" === graphic.attribute.pickMode) return !0;
+    const {
+      pickContext: pickContext
+    } = null != params ? params : {};
+    if (!pickContext) return !1;
+    const attribute = getTheme(graphic)[graphic.type];
+    pickContext.highPerformanceSave();
+    let {
+      x = attribute.x,
+      y = attribute.y
+    } = graphic.attribute;
+    if (graphic.transMatrix.onlyTranslate()) {
+      const point = graphic.getOffsetXY(attribute);
+      x += point.x, y += point.y, pickContext.setTransformForCurrent();
+    } else x = 0, y = 0, pickContext.transformFromMatrix(graphic.transMatrix, !0);
+    let picked = !1;
+    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;
+    }), pickContext.highPerformanceRestore(), picked;
+  }
+}
+
+var __decorate$l = 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;
@@ -13495,44 +13411,19 @@ var __decorate$m = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultMathArcPicker = class {
+let DefaultMathArcPicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
-  }
-  contains(arc, point, params) {
-    if (!arc.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === arc.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const arcAttribute = getTheme(arc).arc;
-    pickContext.highPerformanceSave();
-    let {
-      x = arcAttribute.x,
-      y = arcAttribute.y
-    } = arc.attribute;
-    if (arc.transMatrix.onlyTranslate()) {
-      const point = arc.getOffsetXY(arcAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(arc.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(arc, 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 = lineWidth + pickStrokeBuffer, picked = context.isPointInStroke(point.x, point.y), picked;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
   }
 };
-DefaultMathArcPicker = __decorate$m([injectable(), __param$h(0, inject(ArcRender)), __metadata$h("design:paramtypes", [Object])], DefaultMathArcPicker);
+DefaultMathArcPicker = __decorate$l([injectable(), __param$h(0, inject(ArcRender)), __metadata$h("design:paramtypes", [Object])], DefaultMathArcPicker);
 
 let loadArcPick$1 = !1;
 const arcMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadArcPick$1 || (loadArcPick$1 = !0, bind(MathArcPicker).to(DefaultMathArcPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathArcPicker));
 });
 
-var __decorate$l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$k = 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;
@@ -13547,38 +13438,19 @@ var __decorate$l = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultMathAreaPicker = class {
+let DefaultMathAreaPicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "area", this.numberType = AREA_NUMBER_TYPE;
-  }
-  contains(area, point, params) {
-    if (!area.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === area.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const areaAttribute = getTheme(area).area;
-    let {
-      x = areaAttribute.x,
-      y = areaAttribute.y
-    } = area.attribute;
-    if (pickContext.highPerformanceSave(), area.transMatrix.onlyTranslate()) {
-      const point = area.getOffsetXY(areaAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(area.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(point.x, point.y), picked)), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "area", this.numberType = AREA_NUMBER_TYPE;
   }
 };
-DefaultMathAreaPicker = __decorate$l([injectable(), __param$g(0, inject(AreaRender)), __metadata$g("design:paramtypes", [Object])], DefaultMathAreaPicker);
+DefaultMathAreaPicker = __decorate$k([injectable(), __param$g(0, inject(AreaRender)), __metadata$g("design:paramtypes", [Object])], DefaultMathAreaPicker);
 
 let loadAreaPick$1 = !1;
 const areaMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadAreaPick$1 || (loadAreaPick$1 = !0, bind(MathAreaPicker).to(DefaultMathAreaPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathAreaPicker));
 });
 
-var __decorate$k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+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;
@@ -13593,43 +13465,19 @@ var __decorate$k = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultMathCirclePicker = class {
+let DefaultMathCirclePicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "circle", this.numberType = CIRCLE_NUMBER_TYPE;
-  }
-  contains(circle, point, params) {
-    if (!circle.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === circle.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const circleAttribute = getTheme(circle).circle;
-    let {
-      x = circleAttribute.x,
-      y = circleAttribute.y
-    } = circle.attribute;
-    if (pickContext.highPerformanceSave(), circle.transMatrix.onlyTranslate()) {
-      const point = circle.getOffsetXY(circleAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(circle.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(circle, pickContext, x, y, {}, null, (context, circleAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, circleAttribute, themeAttribute) => {
-      if (picked) return !0;
-      const lineWidth = circleAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = circleAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = lineWidth + pickStrokeBuffer, picked = context.isPointInStroke(point.x, point.y), picked;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "circle", this.numberType = CIRCLE_NUMBER_TYPE;
   }
 };
-DefaultMathCirclePicker = __decorate$k([injectable(), __param$f(0, inject(CircleRender)), __metadata$f("design:paramtypes", [Object])], DefaultMathCirclePicker);
+DefaultMathCirclePicker = __decorate$j([injectable(), __param$f(0, inject(CircleRender)), __metadata$f("design:paramtypes", [Object])], DefaultMathCirclePicker);
 
 let loadCirclePick$1 = !1;
 const circleMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadCirclePick$1 || (loadCirclePick$1 = !0, bind(MathCirclePicker).to(DefaultMathCirclePicker).inSingletonScope(), bind(MathPickerContribution).toService(MathCirclePicker));
 });
 
-var __decorate$j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$i = 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;
@@ -13647,14 +13495,14 @@ let DefaultMathImagePicker = class {
     return !!pickContext && !!image.AABBBounds.containsPoint(point);
   }
 };
-DefaultMathImagePicker = __decorate$j([injectable()], DefaultMathImagePicker);
+DefaultMathImagePicker = __decorate$i([injectable()], DefaultMathImagePicker);
 
 let loadImagePick$1 = !1;
 const imageMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadImagePick$1 || (loadImagePick$1 = !0, bind(MathImagePicker).to(DefaultMathImagePicker).inSingletonScope(), bind(DefaultMathImagePicker).toService(MathImagePicker));
 });
 
-var __decorate$i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$h = 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;
@@ -13669,43 +13517,19 @@ var __decorate$i = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultMathLinePicker = class {
+let DefaultMathLinePicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "line", this.numberType = LINE_NUMBER_TYPE;
-  }
-  contains(line, point, params) {
-    if (!line.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === line.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const lineAttribute = getTheme(line).line;
-    let {
-      x = lineAttribute.x,
-      y = lineAttribute.y
-    } = line.attribute;
-    if (pickContext.highPerformanceSave(), line.transMatrix.onlyTranslate()) {
-      const point = line.getOffsetXY(lineAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(line.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(line, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, circleAttribute, themeAttribute) => {
-      if (picked) return !0;
-      const lineWidth = circleAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = circleAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = lineWidth + pickStrokeBuffer, picked = context.isPointInStroke(point.x, point.y), picked;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "line", this.numberType = LINE_NUMBER_TYPE;
   }
 };
-DefaultMathLinePicker = __decorate$i([injectable(), __param$e(0, inject(LineRender)), __metadata$e("design:paramtypes", [Object])], DefaultMathLinePicker);
+DefaultMathLinePicker = __decorate$h([injectable(), __param$e(0, inject(LineRender)), __metadata$e("design:paramtypes", [Object])], DefaultMathLinePicker);
 
 let loadLinePick$1 = !1;
 const lineMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadLinePick$1 || (loadLinePick$1 = !0, bind(MathLinePicker).to(DefaultMathLinePicker).inSingletonScope(), bind(MathPickerContribution).toService(MathLinePicker));
 });
 
-var __decorate$h = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$g = 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;
@@ -13720,42 +13544,19 @@ var __decorate$h = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultMathPolygonPicker = class {
+let DefaultMathPolygonPicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "polygon", this.numberType = POLYGON_NUMBER_TYPE;
-  }
-  contains(polygon, point, params) {
-    if (!polygon.AABBBounds.contains(point.x, point.y)) return !1;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const pathAttribute = getTheme(polygon).polygon;
-    let {
-      x = pathAttribute.x,
-      y = pathAttribute.y
-    } = polygon.attribute;
-    if (pickContext.highPerformanceSave(), polygon.transMatrix.onlyTranslate()) {
-      const point = polygon.getOffsetXY(pathAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(polygon.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(polygon, pickContext, x, y, {}, null, (context, pathAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, pathAttribute, themeAttribute) => {
-      if (picked) return !0;
-      const lineWidth = pathAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = pathAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = lineWidth + pickStrokeBuffer, picked = context.isPointInStroke(point.x, point.y), picked;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "polygon", this.numberType = POLYGON_NUMBER_TYPE;
   }
 };
-DefaultMathPolygonPicker = __decorate$h([injectable(), __param$d(0, inject(PolygonRender)), __metadata$d("design:paramtypes", [Object])], DefaultMathPolygonPicker);
+DefaultMathPolygonPicker = __decorate$g([injectable(), __param$d(0, inject(PolygonRender)), __metadata$d("design:paramtypes", [Object])], DefaultMathPolygonPicker);
 
 let loadPolygonPick$1 = !1;
 const polygonMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadPolygonPick$1 || (loadPolygonPick$1 = !0, bind(MathPolygonPicker).to(DefaultMathPolygonPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathPolygonPicker));
 });
 
-var __decorate$g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$f = 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;
@@ -13770,61 +13571,22 @@ var __decorate$g = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultMathPathPicker = class {
+let DefaultMathPathPicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "path", this.numberType = PATH_NUMBER_TYPE;
-  }
-  contains(path, point, params) {
-    if (!path.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === path.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const pathAttribute = getTheme(path).path;
-    let {
-      x = pathAttribute.x,
-      y = pathAttribute.y
-    } = path.attribute;
-    if (pickContext.highPerformanceSave(), path.transMatrix.onlyTranslate()) {
-      const point = path.getOffsetXY(pathAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(path.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(path, pickContext, x, y, {}, null, (context, pathAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, pathAttribute, themeAttribute) => {
-      if (picked) return !0;
-      const lineWidth = pathAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = pathAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = lineWidth + pickStrokeBuffer, picked = context.isPointInStroke(point.x, point.y), picked;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "path", this.numberType = PATH_NUMBER_TYPE;
   }
 };
-DefaultMathPathPicker = __decorate$g([injectable(), __param$c(0, inject(PathRender)), __metadata$c("design:paramtypes", [Object])], DefaultMathPathPicker);
+DefaultMathPathPicker = __decorate$f([injectable(), __param$c(0, inject(PathRender)), __metadata$c("design:paramtypes", [Object])], DefaultMathPathPicker);
 
 let loadPathPick$1 = !1;
 const pathMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadPathPick$1 || (loadPathPick$1 = !0, bind(MathPathPicker).to(DefaultMathPathPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathPathPicker));
 });
 
-var __decorate$f = 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$b = undefined && undefined.__metadata || function (k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-  },
-  __param$b = undefined && undefined.__param || function (paramIndex, decorator) {
-    return function (target, key) {
-      decorator(target, key, paramIndex);
-    };
-  };
-const _bounds$1 = new AABBBounds();
-let DefaultMathRectPicker = class {
-  constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "rect", this.numberType = RECT_NUMBER_TYPE;
+const _bounds = new AABBBounds();
+class RectPickerBase {
+  constructor() {
+    this.type = "rect", this.numberType = RECT_NUMBER_TYPE;
   }
   contains(rect, point, params) {
     if (!rect.AABBBounds.containsPoint(point)) return !1;
@@ -13848,12 +13610,12 @@ let DefaultMathRectPicker = class {
       x += point.x, y += point.y, pickContext.setTransformForCurrent();
     } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
     let picked = !0;
-    if (!onlyTranslate || 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 (!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 = lineWidth + pickStrokeBuffer, picked = context.isPointInStroke(point.x, point.y), picked;
-    });else if (picked) {
+      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+    });else {
       const {
         fill = rectAttribute.fill,
         stroke = rectAttribute.stroke,
@@ -13861,13 +13623,34 @@ let DefaultMathRectPicker = class {
       } = rect.attribute;
       if (fill) picked = !0;else if (stroke) {
         const bounds = rect.AABBBounds;
-        _bounds$1.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2), _bounds$1.expand(-lineWidth / 2), picked = !_bounds$1.containsPoint(point);
+        _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2), _bounds.expand(-lineWidth / 2), picked = !_bounds.containsPoint(point);
       }
     }
     return pickContext.highPerformanceRestore(), picked;
   }
+}
+
+var __decorate$e = 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$b = undefined && undefined.__metadata || function (k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+  },
+  __param$b = undefined && undefined.__param || function (paramIndex, decorator) {
+    return function (target, key) {
+      decorator(target, key, paramIndex);
+    };
+  };
+let DefaultMathRectPicker = class extends RectPickerBase {
+  constructor(canvasRenderer) {
+    super(), this.canvasRenderer = canvasRenderer;
+  }
 };
-DefaultMathRectPicker = __decorate$f([injectable(), __param$b(0, inject(RectRender)), __metadata$b("design:paramtypes", [Object])], DefaultMathRectPicker);
+DefaultMathRectPicker = __decorate$e([injectable(), __param$b(0, inject(RectRender)), __metadata$b("design:paramtypes", [Object])], DefaultMathRectPicker);
 
 let loadRectPick$1 = !1;
 const rectMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
@@ -13879,7 +13662,7 @@ const richTextMathPickModule = new ContainerModule((bind, unbind, isBound, rebin
   loadRichTextPick || (loadRichTextPick = !0, bind(MathImagePicker).to(DefaultMathImagePicker).inSingletonScope(), bind(DefaultMathImagePicker).toService(MathImagePicker));
 });
 
-var __decorate$e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$d = 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;
@@ -13894,43 +13677,19 @@ var __decorate$e = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultMathSymbolPicker = class {
+let DefaultMathSymbolPicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "symbol", this.numberType = SYMBOL_NUMBER_TYPE;
-  }
-  contains(symbol, point, params) {
-    if (!symbol.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === symbol.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const symbolAttribute = getTheme(symbol).symbol;
-    let {
-      x = symbolAttribute.x,
-      y = symbolAttribute.y
-    } = symbol.attribute;
-    if (pickContext.highPerformanceSave(), symbol.transMatrix.onlyTranslate()) {
-      const point = symbol.getOffsetXY(symbolAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(symbol.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(symbol, pickContext, x, y, {}, null, (context, symbolAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, symbolAttribute, themeAttribute) => {
-      if (picked) return !0;
-      const lineWidth = symbolAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = lineWidth + pickStrokeBuffer, picked = context.isPointInStroke(point.x, point.y), picked;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "symbol", this.numberType = SYMBOL_NUMBER_TYPE;
   }
 };
-DefaultMathSymbolPicker = __decorate$e([injectable(), __param$a(0, inject(SymbolRender)), __metadata$a("design:paramtypes", [Object])], DefaultMathSymbolPicker);
+DefaultMathSymbolPicker = __decorate$d([injectable(), __param$a(0, inject(SymbolRender)), __metadata$a("design:paramtypes", [Object])], DefaultMathSymbolPicker);
 
 let loadSymbolPick$1 = !1;
 const symbolMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadSymbolPick$1 || (loadSymbolPick$1 = !0, bind(MathSymbolPicker).to(DefaultMathSymbolPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathSymbolPicker));
 });
 
-var __decorate$d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$c = 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;
@@ -13945,14 +13704,14 @@ let DefaultMathTextPicker = class {
     return !!text.AABBBounds.containsPoint(point);
   }
 };
-DefaultMathTextPicker = __decorate$d([injectable()], DefaultMathTextPicker);
+DefaultMathTextPicker = __decorate$c([injectable()], DefaultMathTextPicker);
 
 let loadTextPick$1 = !1;
 const textMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadTextPick$1 || (loadTextPick$1 = !0, bind(MathTextPicker).to(DefaultMathTextPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathTextPicker));
 });
 
-var __decorate$c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$b = 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;
@@ -13967,44 +13726,19 @@ var __decorate$c = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultCanvasArcPicker = class {
+let DefaultCanvasArcPicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
-  }
-  contains(arc, point, params) {
-    if (!arc.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === arc.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const arcAttribute = getTheme(arc).arc;
-    pickContext.highPerformanceSave();
-    let {
-      x = arcAttribute.x,
-      y = arcAttribute.y
-    } = arc.attribute;
-    if (arc.transMatrix.onlyTranslate()) {
-      const point = arc.getOffsetXY(arcAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(arc.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(arc, 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;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
   }
 };
-DefaultCanvasArcPicker = __decorate$c([injectable(), __param$9(0, inject(ArcRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasArcPicker);
+DefaultCanvasArcPicker = __decorate$b([injectable(), __param$9(0, inject(ArcRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasArcPicker);
 
 let loadArcPick = !1;
 const arcCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
   loadArcPick || (loadArcPick = !0, bind(CanvasArcPicker).to(DefaultCanvasArcPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasArcPicker));
 });
 
-var __decorate$b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+var __decorate$a = 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;
@@ -14019,98 +13753,29 @@ var __decorate$b = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-const _bounds = new AABBBounds();
-let DefaultCanvasRectPicker = class {
+let DefaultCanvasRectPicker = class extends RectPickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "rect", this.numberType = RECT_NUMBER_TYPE;
-  }
-  contains(rect, point, params) {
-    if (!rect.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === rect.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const rectAttribute = getTheme(rect).rect,
-      {
-        cornerRadius = rectAttribute.cornerRadius
-      } = rect.attribute;
-    let {
-      x = rectAttribute.x,
-      y = rectAttribute.y
-    } = rect.attribute;
-    pickContext.highPerformanceSave();
-    let onlyTranslate = !0;
-    if (rect.transMatrix.onlyTranslate()) {
-      const point = rect.getOffsetXY(rectAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
-    let picked = !0;
-    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;
-    });else {
-      const {
-        fill = rectAttribute.fill,
-        stroke = rectAttribute.stroke,
-        lineWidth = rectAttribute.lineWidth
-      } = rect.attribute;
-      if (fill) picked = !0;else if (stroke) {
-        const bounds = rect.AABBBounds;
-        _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2), _bounds.expand(-lineWidth / 2), picked = !_bounds.containsPoint(point);
-      }
-    }
-    return pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer;
   }
 };
-DefaultCanvasRectPicker = __decorate$b([injectable(), __param$8(0, inject(RectRender)), __metadata$8("design:paramtypes", [Object])], DefaultCanvasRectPicker);
+DefaultCanvasRectPicker = __decorate$a([injectable(), __param$8(0, inject(RectRender)), __metadata$8("design:paramtypes", [Object])], DefaultCanvasRectPicker);
 
 let loadRectPick = !1;
-const rectCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-  loadRectPick || (loadRectPick = !0, bind(CanvasRectPicker).to(DefaultCanvasRectPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasRectPicker));
-});
-
-var __decorate$a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-  var d,
-    c = arguments.length,
-    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-  if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-let BasePicker = class extends BaseRender {};
-BasePicker = __decorate$a([injectable()], BasePicker);
-
-var __decorate$9 = 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$7 = undefined && undefined.__metadata || function (k, v) {
-    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-  },
-  __param$7 = undefined && undefined.__param || function (paramIndex, decorator) {
-    return function (target, key) {
-      decorator(target, key, paramIndex);
-    };
-  };
-let DefaultCanvasLinePicker = class extends BasePicker {
-  constructor(canvasRenderer) {
-    super(), this.canvasRenderer = canvasRenderer, this.type = "line", this.numberType = LINE_NUMBER_TYPE;
-  }
-  contains(line, point, params) {
-    if (!line.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === line.attribute.pickMode) return !0;
+const rectCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+  loadRectPick || (loadRectPick = !0, bind(CanvasRectPicker).to(DefaultCanvasRectPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasRectPicker));
+});
+
+class BaseLinePicker extends BaseRender {
+  contains(graphic, point, params) {
+    if (!graphic.AABBBounds.containsPoint(point)) return !1;
+    if ("imprecise" === graphic.attribute.pickMode) return !0;
     const {
       pickContext: pickContext
     } = null != params ? params : {};
     if (!pickContext) return !1;
     pickContext.highPerformanceSave();
-    const lineAttribute = getTheme(line).line,
-      data = this.transform(line, lineAttribute, pickContext),
+    const lineAttribute = getTheme(graphic)[graphic.type],
+      data = this.transform(graphic, lineAttribute, pickContext),
       {
         x: x,
         y: y,
@@ -14120,18 +13785,39 @@ let DefaultCanvasLinePicker = class extends BasePicker {
     let pickPoint = point;
     if (pickContext.camera) {
       pickPoint = point.clone();
-      const globalMatrix = line.parent.globalTransMatrix;
+      const globalMatrix = graphic.parent.globalTransMatrix;
       pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e, pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;
     }
     this.canvasRenderer.z = z;
     let picked = !1;
-    return this.canvasRenderer.drawShape(line, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked), (context, lineAttribute, themeAttribute) => {
+    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;
     }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
   }
+}
+
+var __decorate$9 = 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$7 = undefined && undefined.__metadata || function (k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+  },
+  __param$7 = undefined && undefined.__param || function (paramIndex, decorator) {
+    return function (target, key) {
+      decorator(target, key, paramIndex);
+    };
+  };
+let DefaultCanvasLinePicker = class extends BaseLinePicker {
+  constructor(canvasRenderer) {
+    super(), this.canvasRenderer = canvasRenderer, this.type = "line", this.numberType = LINE_NUMBER_TYPE;
+  }
 };
 DefaultCanvasLinePicker = __decorate$9([injectable(), __param$7(0, inject(LineRender)), __metadata$7("design:paramtypes", [Object])], DefaultCanvasLinePicker);
 
@@ -14155,38 +13841,9 @@ var __decorate$8 = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultCanvasAreaPicker = class {
+let DefaultCanvasAreaPicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "area", this.numberType = AREA_NUMBER_TYPE;
-  }
-  contains(area, point, params) {
-    if (!area.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === area.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const areaAttribute = getTheme(area).area;
-    let {
-      x = areaAttribute.x,
-      y = areaAttribute.y
-    } = area.attribute;
-    const {
-      fillPickable = areaAttribute.fillPickable,
-      strokePickable = areaAttribute.strokePickable
-    } = area.attribute;
-    if (pickContext.highPerformanceSave(), area.transMatrix.onlyTranslate()) {
-      const point = area.getOffsetXY(areaAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(area.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => !!picked || !!fillPickable && (picked = context.isPointInPath(point.x, point.y), picked), (context, areaAttribute, themeAttribute) => {
-      if (picked) return !0;
-      if (!strokePickable) return !1;
-      const lineWidth = areaAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = areaAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "area", this.numberType = AREA_NUMBER_TYPE;
   }
 };
 DefaultCanvasAreaPicker = __decorate$8([injectable(), __param$6(0, inject(AreaRender)), __metadata$6("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
@@ -14196,6 +13853,34 @@ const areaCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind)
   loadAreaPick || (loadAreaPick = !0, bind(CanvasAreaPicker).to(DefaultCanvasAreaPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasAreaPicker));
 });
 
+class Base3dPicker extends BaseRender {
+  contains(graphic, point, params) {
+    var _a;
+    const {
+      pickContext: pickContext
+    } = null != params ? params : {};
+    if (!pickContext) return !1;
+    const attribute = getTheme(graphic)[null !== (_a = this.themeType) && void 0 !== _a ? _a : graphic.type];
+    pickContext.highPerformanceSave();
+    const data = this.transform(graphic, attribute, pickContext),
+      {
+        x: x,
+        y: y,
+        z: z,
+        lastModelMatrix: lastModelMatrix
+      } = data;
+    let pickPoint = point;
+    if (pickContext.camera) {
+      pickPoint = point.clone();
+      const globalMatrix = graphic.parent.globalTransMatrix;
+      pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e, pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;
+    }
+    this.canvasRenderer.z = z;
+    let picked = !1;
+    return this.canvasRenderer.drawShape(graphic, pickContext, x, y, params, null, (context, arc3dAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked)), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
+  }
+}
+
 var __decorate$7 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
@@ -14211,7 +13896,7 @@ var __decorate$7 = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultCanvasSymbolPicker = class extends BasePicker {
+let DefaultCanvasSymbolPicker = class extends Base3dPicker {
   constructor(canvasRenderer) {
     super(), this.canvasRenderer = canvasRenderer, this.type = "symbol", this.numberType = SYMBOL_NUMBER_TYPE;
   }
@@ -14272,33 +13957,9 @@ var __decorate$6 = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultCanvasCirclePicker = class {
+let DefaultCanvasCirclePicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "circle", this.numberType = CIRCLE_NUMBER_TYPE;
-  }
-  contains(circle, point, params) {
-    if (!circle.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === circle.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const circleAttribute = getTheme(circle).circle;
-    let {
-      x = circleAttribute.x,
-      y = circleAttribute.y
-    } = circle.attribute;
-    if (pickContext.highPerformanceSave(), circle.transMatrix.onlyTranslate()) {
-      const point = circle.getOffsetXY(circleAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(circle.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(circle, pickContext, x, y, {}, null, (context, circleAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, circleAttribute, themeAttribute) => {
-      if (picked) return !0;
-      const lineWidth = circleAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = circleAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "circle", this.numberType = CIRCLE_NUMBER_TYPE;
   }
 };
 DefaultCanvasCirclePicker = __decorate$6([injectable(), __param$4(0, inject(CircleRender)), __metadata$4("design:paramtypes", [Object])], DefaultCanvasCirclePicker);
@@ -14323,7 +13984,7 @@ var __decorate$5 = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultCanvasTextPicker = class extends BasePicker {
+let DefaultCanvasTextPicker = class extends Base3dPicker {
   constructor(canvasRenderer) {
     super(), this.canvasRenderer = canvasRenderer, this.type = "text", this.numberType = TEXT_NUMBER_TYPE;
   }
@@ -14393,41 +14054,10 @@ var __decorate$4 = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultCanvasPathPicker = class extends BasePicker {
+let DefaultCanvasPathPicker = class extends BaseLinePicker {
   constructor(canvasRenderer) {
     super(), this.canvasRenderer = canvasRenderer, this.type = "path", this.numberType = PATH_NUMBER_TYPE;
   }
-  contains(path, point, params) {
-    if (!path.AABBBounds.containsPoint(point)) return !1;
-    if ("imprecise" === path.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const pathAttribute = getTheme(path).path;
-    pickContext.highPerformanceSave();
-    const data = this.transform(path, pathAttribute, pickContext),
-      {
-        x: x,
-        y: y,
-        z: z,
-        lastModelMatrix: lastModelMatrix
-      } = data;
-    let pickPoint = point;
-    if (pickContext.camera) {
-      pickPoint = point.clone();
-      const globalMatrix = path.parent.globalTransMatrix;
-      pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e, pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;
-    }
-    this.canvasRenderer.z = z;
-    let picked = !1;
-    return this.canvasRenderer.drawShape(path, pickContext, x, y, {}, null, (context, pathAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked), (context, pathAttribute, themeAttribute) => {
-      if (picked) return !0;
-      const lineWidth = pathAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = pathAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = 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;
-  }
 };
 DefaultCanvasPathPicker = __decorate$4([injectable(), __param$2(0, inject(PathRender)), __metadata$2("design:paramtypes", [Object])], DefaultCanvasPathPicker);
 
@@ -14451,33 +14081,9 @@ var __decorate$3 = undefined && undefined.__decorate || function (decorators, ta
       decorator(target, key, paramIndex);
     };
   };
-let DefaultCanvasPolygonPicker = class {
+let DefaultCanvasPolygonPicker = class extends PickerBase {
   constructor(canvasRenderer) {
-    this.canvasRenderer = canvasRenderer, this.type = "polygon", this.numberType = POLYGON_NUMBER_TYPE;
-  }
-  contains(polygon, point, params) {
-    if (!polygon.AABBBounds.contains(point.x, point.y)) return !1;
-    if ("imprecise" === polygon.attribute.pickMode) return !0;
-    const {
-      pickContext: pickContext
-    } = null != params ? params : {};
-    if (!pickContext) return !1;
-    const polygonAttribute = getTheme(polygon).polygon;
-    let {
-      x = polygonAttribute.x,
-      y = polygonAttribute.y
-    } = polygon.attribute;
-    if (pickContext.highPerformanceSave(), polygon.transMatrix.onlyTranslate()) {
-      const point = polygon.getOffsetXY(polygonAttribute);
-      x += point.x, y += point.y, pickContext.setTransformForCurrent();
-    } else x = 0, y = 0, pickContext.transformFromMatrix(polygon.transMatrix, !0);
-    let picked = !1;
-    return this.canvasRenderer.drawShape(polygon, pickContext, x, y, {}, null, (context, pathAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, pathAttribute, themeAttribute) => {
-      if (picked) return !0;
-      const lineWidth = pathAttribute.lineWidth || themeAttribute.lineWidth,
-        pickStrokeBuffer = pathAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-      return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
-    }), pickContext.highPerformanceRestore(), picked;
+    super(), this.canvasRenderer = canvasRenderer, this.type = "polygon", this.numberType = POLYGON_NUMBER_TYPE;
   }
 };
 DefaultCanvasPolygonPicker = __decorate$3([injectable(), __param$1(0, inject(PolygonRender)), __metadata$1("design:paramtypes", [Object])], DefaultCanvasPolygonPicker);
@@ -15781,23 +15387,20 @@ PopTipRenderContribution = __decorate([
     injectable()
 ], PopTipRenderContribution);
 
-let PopTipPlugin = class PopTipPlugin {
+class PopTipPluginBase {
     constructor() {
-        this.name = 'poptip';
         this.activeEvent = 'onRegister';
         this._uid = Generator.GenAutoIncrementId();
-        this.key = this.name + this._uid;
         this.poptip = (e) => {
             const graphic = e.target;
-            if (graphic.isContainer || !graphic.attribute) {
+            if (this.needHide(graphic)) {
                 this.unpoptip(e);
                 return;
             }
             if (graphic === this.activeGraphic) {
                 return;
             }
-            const { poptip } = graphic.attribute;
-            if (poptip) {
+            if (this.needShow(graphic)) {
                 graphic.setAttributes({});
                 graphic._showPoptip = 1;
             }
@@ -15821,6 +15424,12 @@ let PopTipPlugin = class PopTipPlugin {
         const { stage } = this.pluginService;
         stage.addEventListener('pointerover', this.poptip);
     }
+    needHide(graphic) {
+        return graphic.isContainer || !graphic.attribute;
+    }
+    needShow(graphic) {
+        return !!graphic.attribute.poptip;
+    }
     setActiveGraphic(graphic, rerender) {
         this.activeGraphic = graphic;
         this.pluginService.stage.renderNextFrame();
@@ -15829,15 +15438,21 @@ let PopTipPlugin = class PopTipPlugin {
         const { stage } = this.pluginService;
         stage.removeEventListener('pointerover', this.poptip);
     }
+}
+let PopTipPlugin = class PopTipPlugin extends PopTipPluginBase {
+    constructor() {
+        super(...arguments);
+        this.name = 'poptip';
+        this.key = this.name + this._uid;
+    }
 };
 PopTipPlugin = __decorate([
     injectable()
 ], PopTipPlugin);
-let PopTipForClipedTextPlugin = class PopTipForClipedTextPlugin {
+let PopTipForClipedTextPlugin = class PopTipForClipedTextPlugin extends PopTipPluginBase {
     constructor() {
+        super(...arguments);
         this.name = 'poptipForText';
-        this.activeEvent = 'onRegister';
-        this._uid = Generator.GenAutoIncrementId();
         this.key = this.name + this._uid;
         this.pointerlave = (e) => {
             const { stage } = this.pluginService;
@@ -15845,52 +15460,25 @@ let PopTipForClipedTextPlugin = class PopTipForClipedTextPlugin {
                 this.unpoptip(e);
             }
         };
-        this.poptip = (e) => {
-            const graphic = e.target;
-            if (graphic.type !== 'text' ||
-                !graphic.cliped ||
-                graphic.isContainer ||
-                !graphic.attribute ||
-                graphic.attribute.disableAutoClipedPoptip) {
-                this.unpoptip(e);
-                return;
-            }
-            if (graphic === this.activeGraphic) {
-                return;
-            }
-            const { poptip = {} } = graphic.attribute;
-            if (poptip) {
-                graphic.setAttributes({});
-                graphic._showPoptip = 1;
-            }
-            if (this.activeGraphic) {
-                this.activeGraphic.setAttributes({});
-                this.activeGraphic._showPoptip = 2;
-            }
-            this.setActiveGraphic(graphic, true);
-        };
-        this.unpoptip = (e) => {
-            if (!this.activeGraphic) {
-                return;
-            }
-            this.activeGraphic.setAttributes({});
-            this.activeGraphic._showPoptip = 2;
-            this.setActiveGraphic(null, true);
-        };
     }
     activate(context) {
-        this.pluginService = context;
+        super.activate(context);
         const { stage } = this.pluginService;
-        stage.addEventListener('pointerover', this.poptip);
         stage.addEventListener('pointerleave', this.pointerlave);
     }
-    setActiveGraphic(graphic, rerender) {
-        this.activeGraphic = graphic;
-        this.pluginService.stage.renderNextFrame();
+    needHide(graphic) {
+        return (graphic.type !== 'text' ||
+            !graphic.cliped ||
+            graphic.isContainer ||
+            !graphic.attribute ||
+            graphic.attribute.disableAutoClipedPoptip);
+    }
+    needShow(graphic) {
+        return true;
     }
     deactivate(context) {
         const { stage } = this.pluginService;
-        stage.removeEventListener('pointerover', this.poptip);
+        super.deactivate(context);
         stage.removeEventListener('pointerleave', this.pointerlave);
     }
 };
@@ -16754,16 +16342,7 @@ class LabelBase extends AbstractComponent {
                 (((_b = e.detail) === null || _b === void 0 ? void 0 : _b.type) === AttributeUpdateType.ANIMATE_UPDATE && ((_c = e.detail.animationState) === null || _c === void 0 ? void 0 : _c.isFirstFrameOfStep))) {
                 const currentStates = (_e = (_d = e.target) === null || _d === void 0 ? void 0 : _d.currentStates) !== null && _e !== void 0 ? _e : [];
                 const labels = this._isCollectionBase ? [...this._graphicToText.values()] : [this._graphicToText.get(e.target)];
-                labels.forEach(label => {
-                    if (label) {
-                        if (label.text) {
-                            label.text.useStates(currentStates);
-                        }
-                        if (label.labelLine) {
-                            label.labelLine.useStates(currentStates);
-                        }
-                    }
-                });
+                this.updateStatesOfLabels(labels, currentStates);
             }
         };
     }
@@ -16811,6 +16390,9 @@ class LabelBase extends AbstractComponent {
                 labels = this._overlapping(labels);
             }
         }
+        if (isFunction(this.attribute.onAfterOverlapping)) {
+            this.attribute.onAfterOverlapping(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
+        }
         if (labels && labels.length) {
             labels.forEach(label => {
                 this._bindEvent(label);
@@ -17081,9 +16663,6 @@ class LabelBase extends AbstractComponent {
             }
             !hasPlace && !hideOnHit && result.push(text);
         }
-        if (isFunction(this.onAfterLabelOverlap)) {
-            this.onAfterLabelOverlap(bitmap);
-        }
         return result;
     }
     getBaseMarkGroup() {
@@ -17115,6 +16694,7 @@ class LabelBase extends AbstractComponent {
     }
     _renderWithAnimation(labels) {
         var _a;
+        const { syncState } = this.attribute;
         const currentTextMap = new Map();
         const prevTextMap = this._graphicToText || new Map();
         const texts = [];
@@ -17122,6 +16702,7 @@ class LabelBase extends AbstractComponent {
         const { visible: showLabelLine } = (_a = this.attribute.line) !== null && _a !== void 0 ? _a : {};
         labels &&
             labels.forEach((text, index) => {
+                var _a;
                 const relatedGraphic = this.getRelatedGraphic(text.attribute);
                 const textId = text.attribute.id;
                 const textKey = this._isCollectionBase ? textId : relatedGraphic;
@@ -17130,6 +16711,9 @@ class LabelBase extends AbstractComponent {
                 if (showLabelLine) {
                     labelLine = this._createLabelLine(text, relatedGraphic);
                 }
+                if (syncState) {
+                    this.updateStatesOfLabels([labelLine ? { text, labelLine } : { text }], (_a = relatedGraphic.currentStates) !== null && _a !== void 0 ? _a : []);
+                }
                 if (state === 'enter') {
                     texts.push(text);
                     currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
@@ -17175,11 +16759,13 @@ class LabelBase extends AbstractComponent {
     }
     _renderWithOutAnimation(labels) {
         var _a;
+        const { syncState } = this.attribute;
         const currentTextMap = new Map();
         const prevTextMap = this._graphicToText || new Map();
         const { visible: showLabelLine } = (_a = this.attribute.line) !== null && _a !== void 0 ? _a : {};
         labels &&
             labels.forEach(text => {
+                var _a;
                 const relatedGraphic = this.getRelatedGraphic(text.attribute);
                 const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
                 const textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
@@ -17187,6 +16773,9 @@ class LabelBase extends AbstractComponent {
                 if (showLabelLine) {
                     labelLine = this._createLabelLine(text, relatedGraphic);
                 }
+                if (syncState) {
+                    this.updateStatesOfLabels([labelLine ? { text, labelLine } : { text }], (_a = relatedGraphic.currentStates) !== null && _a !== void 0 ? _a : []);
+                }
                 if (state === 'enter') {
                     currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
                     this.add(text);
@@ -17213,6 +16802,18 @@ class LabelBase extends AbstractComponent {
         });
         this._graphicToText = currentTextMap;
     }
+    updateStatesOfLabels(labels, currentStates) {
+        labels.forEach(label => {
+            if (label) {
+                if (label.text) {
+                    label.text.useStates(currentStates);
+                }
+                if (label.labelLine) {
+                    label.labelLine.useStates(currentStates);
+                }
+            }
+        });
+    }
     _syncStateWithRelatedGraphic(relatedGraphic) {
         if (this.attribute.syncState) {
             relatedGraphic.on('afterAttributeUpdate', this._handleRelatedGraphicSetState);
@@ -17540,9 +17141,12 @@ class ArcLabel extends LabelBase {
         const labels = super._layout(texts);
         const textBoundsArray = labels.map(label => this.getGraphicBounds(label));
         const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), { text: '…' });
-        const ellipsisText = this._createLabelText(ellipsisLabelAttribute);
-        const ellipsisTextBounds = this.getGraphicBounds(ellipsisText);
-        const ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
+        let ellipsisWidth = Infinity;
+        if (ellipsisLabelAttribute.ellipsis !== false) {
+            const ellipsisText = this._createLabelText(ellipsisLabelAttribute);
+            const ellipsisTextBounds = this.getGraphicBounds(ellipsisText);
+            ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
+        }
         const data = labels.map(label => label.attribute);
         const arcs = this.layoutArcLabels(this.attribute.position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
         for (let i = 0; i < data.length; i++) {
@@ -20314,69 +19918,6 @@ class GroupTransition extends ACustomAnimate {
     }
 }
 
-class GroupFadeIn extends ACustomAnimate {
-    constructor(from, to, duration, easing) {
-        super(null, null, duration, easing);
-    }
-    getEndProps() {
-        return {};
-    }
-    onBind() {
-        this.target.setTheme({
-            common: {
-                opacity: 0
-            }
-        });
-        return;
-    }
-    onEnd() {
-        this.target.setTheme({
-            common: {
-                opacity: 1
-            }
-        });
-        return;
-    }
-    onUpdate(end, ratio, out) {
-        this.target.setTheme({
-            common: {
-                opacity: ratio
-            }
-        });
-    }
-}
-class GroupFadeOut extends ACustomAnimate {
-    constructor(from, to, duration, easing) {
-        super(null, null, duration, easing);
-    }
-    getEndProps() {
-        return {};
-    }
-    onBind() {
-        this.target.setTheme({
-            common: {
-                opacity: 1
-            }
-        });
-        return;
-    }
-    onEnd() {
-        this.target.setTheme({
-            common: {
-                opacity: 0
-            }
-        });
-        return;
-    }
-    onUpdate(end, ratio, out) {
-        this.target.setTheme({
-            common: {
-                opacity: 1 - ratio
-            }
-        });
-    }
-}
-
 const convertDomainToTickData = (domain) => {
     const ticks = domain.map((t, index) => {
         return {
@@ -21058,6 +20599,34 @@ class BaseGrid extends AbstractComponent {
     _getNodeId(id) {
         return `${this.id}-${id}`;
     }
+    _parseTickSegment() {
+        let tickSegment = 1;
+        const count = this.data.length;
+        if (count >= 2) {
+            tickSegment = this.data[1].value - this.data[0].value;
+        }
+        return tickSegment;
+    }
+    _getPointsOfSubGrid(tickSegment, alignWithLabel) {
+        const tickLineCount = this.data.length;
+        const points = [];
+        if (tickLineCount >= 2) {
+            this.data.forEach((item) => {
+                let tickValue = item.value;
+                if (!alignWithLabel) {
+                    const value = item.value - tickSegment / 2;
+                    if (this.isInValidValue(value)) {
+                        return;
+                    }
+                    tickValue = value;
+                }
+                points.push({
+                    value: tickValue
+                });
+            });
+        }
+        return points;
+    }
     release() {
         super.release();
         this._prevInnerView = null;
@@ -21112,11 +20681,7 @@ class LineAxisGrid extends BaseGrid {
     }
     getGridAttribute(isSubGrid) {
         const { type: gridType, alignWithLabel = true } = this.attribute;
-        let tickSegment = 1;
-        const count = this.data.length;
-        if (count >= 2) {
-            tickSegment = this.data[1].value - this.data[0].value;
-        }
+        const tickSegment = this._parseTickSegment();
         let gridAttribute;
         let items = [];
         if (!isSubGrid) {
@@ -21145,20 +20710,7 @@ class LineAxisGrid extends BaseGrid {
             const { count: subCount = 4 } = this.attribute.subGrid || {};
             const tickLineCount = this.data.length;
             if (tickLineCount >= 2) {
-                const points = [];
-                this.data.forEach((item) => {
-                    let tickValue = item.value;
-                    if (!alignWithLabel) {
-                        const value = item.value - tickSegment / 2;
-                        if (this.isInValidValue(value)) {
-                            return;
-                        }
-                        tickValue = value;
-                    }
-                    points.push({
-                        value: tickValue
-                    });
-                });
+                const points = this._getPointsOfSubGrid(tickSegment, alignWithLabel);
                 for (let i = 0; i < points.length - 1; i++) {
                     const pre = points[i];
                     const next = points[i + 1];
@@ -21204,11 +20756,7 @@ class CircleAxisGrid extends BaseGrid {
         const _a = this.attribute, { radius, innerRadius = 0, startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, center, subGrid } = _a, grid = __rest(_a, ["radius", "innerRadius", "startAngle", "endAngle", "center", "subGrid"]);
         const { alignWithLabel = true } = grid || {};
         const length = radius - innerRadius;
-        let tickSegment = 1;
-        const count = this.data.length;
-        if (count >= 2) {
-            tickSegment = this.data[1].value - this.data[0].value;
-        }
+        const tickSegment = this._parseTickSegment();
         if (!isSubGrid) {
             gridAttribute = grid;
             const gridItems = [];
@@ -21243,20 +20791,7 @@ class CircleAxisGrid extends BaseGrid {
             const { count: subCount = 4 } = subGrid || {};
             const tickLineCount = this.data.length;
             if (tickLineCount >= 2) {
-                const points = [];
-                this.data.forEach((item) => {
-                    let tickValue = item.value;
-                    if (!alignWithLabel) {
-                        const value = item.value - tickSegment / 2;
-                        if (this.isInValidValue(value)) {
-                            return;
-                        }
-                        tickValue = value;
-                    }
-                    points.push({
-                        value: tickValue
-                    });
-                });
+                const points = this._getPointsOfSubGrid(tickSegment, alignWithLabel);
                 for (let i = 0; i < tickLineCount; i++) {
                     const pre = points[i];
                     const next = points[i + 1];
@@ -24491,6 +24026,7 @@ class DiscreteLegend extends LegendBase {
         const maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
         let { doWrap, maxWidthInCol, startX, startY, pages } = this._itemContext;
         let item;
+        let lastItemWidth = 0;
         for (let index = startIndex, len = legendItems.length; index < len; index++) {
             if (lazyload && pages > this._itemContext.currentPage * maxPages) {
                 break;
@@ -24542,6 +24078,14 @@ class DiscreteLegend extends LegendBase {
                         pages = Math.ceil((startY + itemHeight) / maxHeight);
                         doWrap = pages > 1;
                     }
+                    else if (maxHeight <= itemHeight) {
+                        pages += 1;
+                        doWrap = true;
+                        startY = 0;
+                        if (index > 0) {
+                            startX += lastItemWidth + spaceCol;
+                        }
+                    }
                     else if (maxHeight < startY + itemHeight) {
                         pages += 1;
                         doWrap = true;
@@ -24559,6 +24103,7 @@ class DiscreteLegend extends LegendBase {
                 startY += spaceRow + itemHeight;
             }
             itemsContainer.add(itemGroup);
+            lastItemWidth = itemWidth;
         }
         this._itemContext.doWrap = doWrap;
         this._itemContext.startX = startX;
@@ -27356,20 +26901,11 @@ class BasePlayer extends AbstractComponent {
                 backward: this._backward,
                 disableTriggerEvent: this.attribute.disableTriggerEvent
             };
-            if (isHorizontal(this._orient)) {
-                attrs.layout = 'horizontal';
-                attrs.start = Object.assign(Object.assign({}, attrs.start), { style: Object.assign(Object.assign({}, attrs.start.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
-                attrs.pause = Object.assign(Object.assign({}, attrs.pause), { style: Object.assign(Object.assign({}, attrs.pause.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
-                attrs.backward = Object.assign(Object.assign({}, attrs.backward), { style: Object.assign(Object.assign({}, attrs.backward.style), { x: this._layoutInfo.backward.x, y: this._layoutInfo.backward.y }) });
-                attrs.forward = Object.assign(Object.assign({}, attrs.forward), { style: Object.assign(Object.assign({}, attrs.forward.style), { x: this._layoutInfo.forward.x, y: this._layoutInfo.forward.y }) });
-            }
-            else {
-                attrs.layout = 'vertical';
-                attrs.start = Object.assign(Object.assign({}, attrs.start), { style: Object.assign(Object.assign({}, attrs.start.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
-                attrs.pause = Object.assign(Object.assign({}, attrs.pause), { style: Object.assign(Object.assign({}, attrs.pause.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
-                attrs.backward = Object.assign(Object.assign({}, attrs.backward), { style: Object.assign(Object.assign({}, attrs.backward.style), { x: this._layoutInfo.backward.x, y: this._layoutInfo.backward.y }) });
-                attrs.forward = Object.assign(Object.assign({}, attrs.forward), { style: Object.assign(Object.assign({}, attrs.forward.style), { x: this._layoutInfo.forward.x, y: this._layoutInfo.forward.y }) });
-            }
+            attrs.layout = isHorizontal(this._orient) ? 'horizontal' : 'vertical';
+            attrs.start = Object.assign(Object.assign({}, attrs.start), { style: Object.assign(Object.assign({}, attrs.start.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
+            attrs.pause = Object.assign(Object.assign({}, attrs.pause), { style: Object.assign(Object.assign({}, attrs.pause.style), { x: this._layoutInfo.start.x, y: this._layoutInfo.start.y }) });
+            attrs.backward = Object.assign(Object.assign({}, attrs.backward), { style: Object.assign(Object.assign({}, attrs.backward.style), { x: this._layoutInfo.backward.x, y: this._layoutInfo.backward.y }) });
+            attrs.forward = Object.assign(Object.assign({}, attrs.forward), { style: Object.assign(Object.assign({}, attrs.forward.style), { x: this._layoutInfo.forward.x, y: this._layoutInfo.forward.y }) });
             return attrs;
         };
         this._initController = () => {
@@ -28378,11 +27914,8 @@ class Tooltip extends AbstractComponent {
                         (isVisible(itemAttr.key) ? keyWidth + itemAttr.key.spacing : 0) +
                         (isVisible(itemAttr.value) ? valueWidth : 0)
                     : 0;
-                const shapeGraphic = this._createShape(itemAttr, itemGroup, itemGroupName);
+                this._createShape(align === 'right' ? x - itemAttr.shape.size / 2 : x + itemAttr.shape.size / 2, itemAttr, itemGroup, itemGroupName);
                 if (hasContentShape) {
-                    if (shapeGraphic) {
-                        shapeGraphic.setAttribute('x', x);
-                    }
                     if (align === 'right') {
                         x -= shapeOffsetWidth;
                     }
@@ -28418,10 +27951,10 @@ class Tooltip extends AbstractComponent {
             });
         }
     }
-    _createShape(itemAttr, itemGroup, itemGroupName) {
+    _createShape(x, itemAttr, itemGroup, itemGroupName) {
         var _a;
         if (isVisible(itemAttr.shape)) {
-            return itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, Object.assign({ visible: true, x: itemAttr.shape.size / 2, y: itemAttr.shape.size / 2 +
+            return itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, Object.assign({ visible: true, x: x, y: itemAttr.shape.size / 2 +
                     (((_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) !== null && _a !== void 0 ? _a : itemAttr.key.fontSize) -
                         itemAttr.shape.size) /
                         2 }, itemAttr.shape), 'symbol');
@@ -28989,6 +28522,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.20.0-alpha.0";
+const version = "0.20.0-alpha.1";
 
-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, GroupFadeIn, GroupFadeOut, 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, Title, Tooltip, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getCircleLabelPosition, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };
+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, Title, Tooltip, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getCircleLabelPosition, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };