@visactor/vtable 0.10.3-alpha.2 → 0.11.0-alpha.4

package/dist/vtable.js

@@ -4474,6 +4474,12 @@
 	  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return !1;
 	  return !0;
 	}
+	function flattenArray(arr) {
+	  if (!isArray(arr)) return [arr];
+	  const result = [];
+	  for (const value of arr) result.push(...flattenArray(value));
+	  return result;
+	}
 
 	function range(start, stop, step) {
 	  isValid(stop) || (stop = start, start = 0), isValid(step) || (step = 1);
@@ -10574,7 +10580,7 @@
 	const EnvContribution = Symbol.for("EnvContribution");
 	const VGlobal = Symbol.for("VGlobal");
 
-	var __decorate$1L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1M = 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;
@@ -10726,7 +10732,7 @@
 	    return this._env || this.setEnv("browser"), this.envContribution.getElementTopLeft(dom, baseWindow);
 	  }
 	};
-	DefaultGlobal = __decorate$1L([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(EnvContribution)), __metadata$15("design:paramtypes", [Object])], DefaultGlobal);
+	DefaultGlobal = __decorate$1M([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(EnvContribution)), __metadata$15("design:paramtypes", [Object])], DefaultGlobal);
 
 	const circleThreshold = tau$1 - 1e-8;
 	class BoundsContext {
@@ -11813,6 +11819,7 @@
 	  angle: 0,
 	  alpha: 0,
 	  beta: 0,
+	  scaleCenter: [0, 0],
 	  anchor: [0, 0],
 	  anchor3d: [0, 0],
 	  postMatrix: new Matrix()
@@ -11892,7 +11899,8 @@
 	  pickMode: "accurate",
 	  customPickShape: null,
 	  boundsMode: "accurate",
-	  keepDirIn3d: !0
+	  keepDirIn3d: !0,
+	  shadowRootIdx: 1
 	}, DefaultStyle), DefaultTransform);
 	const DefaultArcAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
 	  startAngle: 0,
@@ -11909,7 +11917,8 @@
 	  points: [],
 	  segments: [],
 	  curveType: "linear",
-	  clipRange: 1
+	  clipRange: 1,
+	  closePath: !1
 	});
 	const DefaultCircleAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
 	  radius: 1,
@@ -11942,7 +11951,8 @@
 	  segments: [],
 	  curveType: "linear",
 	  clipRange: 1,
-	  clipRangeByDimension: "default"
+	  clipRangeByDimension: "default",
+	  closePath: !1
 	});
 	const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
 	  path: new CustomPath2D(),
@@ -12131,7 +12141,7 @@
 	  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$1K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1L = 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;
@@ -12311,9 +12321,9 @@
 	    return data.str += suffix, data.width += suffixWidth, data;
 	  }
 	};
-	ATextMeasure = __decorate$1K([injectable()], ATextMeasure);
+	ATextMeasure = __decorate$1L([injectable()], ATextMeasure);
 
-	var __decorate$1J = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1K = 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;
@@ -12322,7 +12332,7 @@
 	};
 	const TextMeasureContribution = Symbol.for("TextMeasureContribution");
 	let DefaultTextMeasureContribution = class extends ATextMeasure {};
-	DefaultTextMeasureContribution = __decorate$1J([injectable()], DefaultTextMeasureContribution);
+	DefaultTextMeasureContribution = __decorate$1K([injectable()], DefaultTextMeasureContribution);
 
 	const container = new Container$2();
 
@@ -12694,7 +12704,7 @@
 	  return containPath(commands, lineWidth, !0, x, y);
 	}
 
-	var __decorate$1I = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1J = 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;
@@ -12757,7 +12767,7 @@
 	    }, null != option ? option : {}), textSpec);
 	  }
 	};
-	DefaultGraphicUtil = __decorate$1I([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(TextMeasureContribution)), __param$R(1, inject(VGlobal)), __metadata$14("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
+	DefaultGraphicUtil = __decorate$1J([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(TextMeasureContribution)), __param$R(1, inject(VGlobal)), __metadata$14("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
 	var TransformMode;
 	!function (TransformMode) {
 	  TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -12784,9 +12794,23 @@
 	    } else this.outTargetMatrix.scale(sx, sy);
 	    return this.outTargetMatrix.multiply(_matrix.a, _matrix.b, _matrix.c, _matrix.d, _matrix.e, _matrix.f), this;
 	  }
+	  rotateMatrix(angle, center) {
+	    const sMatrix = this.outSourceMatrix;
+	    if (_matrix.setValue(sMatrix.a, sMatrix.b, sMatrix.c, sMatrix.d, sMatrix.e, sMatrix.f), this.outTargetMatrix.reset(), center) {
+	      const {
+	        x: x,
+	        y: y
+	      } = center;
+	      this.outTargetMatrix.translate(x, y), this.outTargetMatrix.rotate(angle), this.outTargetMatrix.translate(-x, -y);
+	    } else this.outTargetMatrix.rotate(angle);
+	    return this.outTargetMatrix.multiply(_matrix.a, _matrix.b, _matrix.c, _matrix.d, _matrix.e, _matrix.f), this;
+	  }
 	  scale(sx, sy, center) {
 	    return this.mode === TransformMode.matrix ? this.scaleMatrix(sx, sy, center) : this;
 	  }
+	  rotate(angle, center) {
+	    return this.mode === TransformMode.matrix ? this.rotateMatrix(angle, center) : this;
+	  }
 	  translateMatrix(dx, dy) {
 	    const sMatrix = this.outSourceMatrix;
 	    return _matrix.setValue(sMatrix.a, sMatrix.b, sMatrix.c, sMatrix.d, sMatrix.e, sMatrix.f), this.outTargetMatrix.reset(), this.outTargetMatrix.translate(dx, dy), this.outTargetMatrix.multiply(_matrix.a, _matrix.b, _matrix.c, _matrix.d, _matrix.e, _matrix.f), this;
@@ -12801,7 +12825,7 @@
 	    return this;
 	  }
 	};
-	DefaultTransformUtil = __decorate$1I([injectable(), __metadata$14("design:paramtypes", [])], DefaultTransformUtil);
+	DefaultTransformUtil = __decorate$1J([injectable(), __metadata$14("design:paramtypes", [])], DefaultTransformUtil);
 
 	const defaultThemeObj = {
 	    arc: DefaultArcAttribute,
@@ -13533,10 +13557,10 @@
 	    const mappers = this.mappingTable[e.type];
 	    let target;
 	    const cacheKey = `${e.canvasX}-${e.canvasY}`;
-	    if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage.renderCount) === (null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY), this._prePointTargetCache = {
+	    if ((null === (_a = this._prePointTargetCache) || void 0 === _a ? void 0 : _a[cacheKey]) && (null === (_c = null === (_b = this._prePointTargetCache) || void 0 === _b ? void 0 : _b[cacheKey]) || void 0 === _c ? void 0 : _c.stage.renderCount) === (null === (_d = this._prePointTargetCache) || void 0 === _d ? void 0 : _d.stageRenderCount) ? target = this._prePointTargetCache[cacheKey] : (target = this.pickTarget(e.canvasX, e.canvasY, e), e.pickParams || (this._prePointTargetCache = {
 	      [cacheKey]: target,
 	      stageRenderCount: null !== (_e = null == target ? void 0 : target.stage.renderCount) && void 0 !== _e ? _e : -1
-	    }), mappers) for (let i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else console.warn(`[EventManager]: Event mapping not defined for ${e.type}`);
+	    })), mappers) for (let i = 0, j = mappers.length; i < j; i++) mappers[i].fn(e, target);else console.warn(`[EventManager]: Event mapping not defined for ${e.type}`);
 	  }
 	  propagate(e, type) {
 	    if (!e.target) return;
@@ -13569,11 +13593,11 @@
 	  }
 	  createPointerEvent(from, type, target) {
 	    const event = this.allocateEvent(FederatedPointerEvent);
-	    return this.copyPointerData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y), "string" == typeof type && (event.type = type), event;
+	    return this.copyPointerData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y, event), "string" == typeof type && (event.type = type), event;
 	  }
 	  createWheelEvent(from, target) {
 	    const event = this.allocateEvent(FederatedWheelEvent);
-	    return this.copyWheelData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y), event;
+	    return this.copyWheelData(from, event), this.copyMouseData(from, event), this.copyData(from, event), event.nativeEvent = from.nativeEvent, event.originalEvent = from, event.target = target || this.pickTarget(event.global.x, event.global.y, event), event;
 	  }
 	  clonePointerEvent(from, type) {
 	    const event = this.allocateEvent(FederatedPointerEvent);
@@ -13589,7 +13613,7 @@
 	    from instanceof FederatedMouseEvent && to instanceof FederatedMouseEvent && (to.altKey = from.altKey, to.button = from.button, to.buttons = from.buttons, to.client.copyFrom(from.client), to.ctrlKey = from.ctrlKey, to.shiftKey = from.shiftKey, to.metaKey = from.metaKey, to.movement.copyFrom(from.movement), to.canvas.copyFrom(from.canvas), to.screen.copyFrom(from.screen), to.global.copyFrom(from.global), to.offset.copyFrom(from.offset), to.viewport.copyFrom(from.viewport));
 	  }
 	  copyData(from, to) {
-	    to.isTrusted = from.isTrusted, to.srcElement = from.srcElement, to.timeStamp = clock.now(), to.type = from.type, to.detail = from.detail, to.view = from.view, to.which = from.which, to.layer.copyFrom(from.layer), to.page.copyFrom(from.page);
+	    to.isTrusted = from.isTrusted, to.srcElement = from.srcElement, to.timeStamp = clock.now(), to.type = from.type, to.detail = from.detail, to.view = from.view, to.which = from.which, to.layer.copyFrom(from.layer), to.page.copyFrom(from.page), to.pickParams = from.pickParams;
 	  }
 	  trackingData(id) {
 	    return this.mappingState.trackingData[id] || (this.mappingState.trackingData[id] = {
@@ -13623,10 +13647,10 @@
 	    const listeners = e.currentTarget._events[WILDCARD];
 	    if (listeners) if ("fn" in listeners) listeners.fn.call(listeners.context, e, type);else for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) listeners[i].fn.call(listeners[i].context, e, type);
 	  }
-	  pickTarget(x, y) {
+	  pickTarget(x, y, e) {
 	    let target;
 	    const pickResult = this.rootTarget.pick(x, y);
-	    return target = pickResult && pickResult.graphic ? pickResult.graphic : pickResult && pickResult.group ? pickResult.group : x >= 0 && x <= get$3(this.rootTarget, "width") && y >= 0 && y <= get$3(this.rootTarget, "height") ? this.rootTarget : null, target;
+	    return target = pickResult && pickResult.graphic ? pickResult.graphic : pickResult && pickResult.group ? pickResult.group : x >= 0 && x <= get$3(this.rootTarget, "width") && y >= 0 && y <= get$3(this.rootTarget, "height") ? this.rootTarget : null, e && (e.pickParams = pickResult.params), target;
 	  }
 	}
 
@@ -15293,16 +15317,25 @@
 	      }, this.attribute, tempConstantScaleXYKey, context);
 	    return params ? (this._setAttributes(params, !1, context), this) : (attribute.scaleX = scaleX, attribute.scaleY = scaleY, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this);
 	  }
-	  rotate(angle) {
+	  rotate(angle, rotateCenter) {
 	    var _a;
 	    if (0 === angle) return this;
 	    const context = {
 	        type: AttributeUpdateType.ROTATE
 	      },
-	      params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(angle, this.attribute, tempConstantAngleKey, context);
-	    if (params) return this._setAttributes(params, !1, context), this;
+	      params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate({
+	        angle: angle,
+	        rotateCenter: rotateCenter
+	      }, this.attribute, tempConstantAngleKey, context);
+	    params && (delete params.angle, this._setAttributes(params, !1, context));
 	    const attribute = this.attribute;
-	    return attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle, this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this;
+	    if (rotateCenter) {
+	      let {
+	        postMatrix: postMatrix
+	      } = this.attribute;
+	      postMatrix || (postMatrix = new Matrix(), attribute.postMatrix = postMatrix), application.transformUtil.fromMatrix(postMatrix, postMatrix).rotate(angle, rotateCenter);
+	    } else attribute.angle = (null !== (_a = attribute.angle) && void 0 !== _a ? _a : DefaultTransform.angle) + angle;
+	    return this.addUpdatePositionTag(), this.addUpdateBoundTag(), this.addUpdateLayoutTag(), this.onAttributeUpdate(context), this;
 	  }
 	  rotateTo(angle) {
 	    const attribute = this.attribute;
@@ -15452,6 +15485,7 @@
 	        scaleX = DefaultTransform.scaleX,
 	        scaleY = DefaultTransform.scaleY,
 	        angle = DefaultTransform.angle,
+	        scaleCenter: scaleCenter,
 	        anchor: anchor,
 	        postMatrix: postMatrix
 	      } = this.attribute,
@@ -15468,7 +15502,13 @@
 	        _anchor[1] = bounds.x1 + (bounds.x2 - bounds.x1) * ratio;
 	      } else _anchor[1] = anchor[1];
 	    }
-	    normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);
+	    if (!scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
+	      const m = this._transMatrix;
+	      m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+	        x: scaleCenter[0],
+	        y: scaleCenter[1]
+	      });
+	    }
 	    const p = this.getOffsetXY(DefaultTransform);
 	    if (this._transMatrix.e += p.x, this._transMatrix.f += p.y, postMatrix) {
 	      const m1 = tempMatrix.setValue(postMatrix.a, postMatrix.b, postMatrix.c, postMatrix.d, postMatrix.e, postMatrix.f),
@@ -17885,7 +17925,7 @@
 	  }
 	}
 
-	var __decorate$1H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1I = 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;
@@ -17933,9 +17973,9 @@
 	    return "browser" === this.global.env ? 10 : 0;
 	  }
 	};
-	DefaultLayerService = __decorate$1H([injectable(), __param$Q(0, inject(VGlobal)), __metadata$13("design:paramtypes", [Object])], DefaultLayerService);
+	DefaultLayerService = __decorate$1I([injectable(), __param$Q(0, inject(VGlobal)), __metadata$13("design:paramtypes", [Object])], DefaultLayerService);
 
-	var __decorate$1G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1H = 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;
@@ -18048,7 +18088,7 @@
 	    return this._handler.getTopLeft(baseWindow);
 	  }
 	};
-	__decorate$1G([postConstruct(), __metadata$12("design:type", Function), __metadata$12("design:paramtypes", []), __metadata$12("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1G([injectable(), __param$P(0, inject(VGlobal)), __metadata$12("design:paramtypes", [Object])], DefaultWindow);
+	__decorate$1H([postConstruct(), __metadata$12("design:type", Function), __metadata$12("design:paramtypes", []), __metadata$12("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1H([injectable(), __param$P(0, inject(VGlobal)), __metadata$12("design:paramtypes", [Object])], DefaultWindow);
 
 	const TransformUtil = Symbol.for("TransformUtil");
 	const GraphicUtil = Symbol.for("GraphicUtil");
@@ -18343,7 +18383,7 @@
 	const TextRenderContribution = Symbol.for("TextRenderContribution");
 	const InteractiveSubRenderContribution = Symbol.for("InteractiveSubRenderContribution");
 
-	var __decorate$1F = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -18565,9 +18605,9 @@
 	    drawPathProxy(arc, context, x, y, drawContext, params) || this.drawShape(arc, context, x, y, drawContext, params), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasArcRender = __decorate$1F([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(ArcRenderContribution)), __metadata$11("design:paramtypes", [Object])], DefaultCanvasArcRender);
+	DefaultCanvasArcRender = __decorate$1G([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(ArcRenderContribution)), __metadata$11("design:paramtypes", [Object])], DefaultCanvasArcRender);
 
-	var __decorate$1E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1F = 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;
@@ -18631,7 +18671,7 @@
 	    drawPathProxy(circle, context, x, y, drawContext, params) || this.drawShape(circle, context, x, y, drawContext, params), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasCircleRender = __decorate$1E([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(CircleRenderContribution)), __metadata$10("design:paramtypes", [Object])], DefaultCanvasCircleRender);
+	DefaultCanvasCircleRender = __decorate$1F([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(CircleRenderContribution)), __metadata$10("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
 	const CIRCLE_UPDATE_TAG_KEY = ["radius", "startAngle", "endAngle", ...GRAPHIC_UPDATE_TAG_KEY];
 	let Circle$1 = class Circle extends Graphic {
@@ -21073,7 +21113,7 @@
 	  }
 	}
 
-	var __decorate$1D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1E = 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;
@@ -21097,9 +21137,9 @@
 	    return aabbBounds;
 	  }
 	};
-	DefaultOuterBorderBoundsContribution = __decorate$1D([injectable()], DefaultOuterBorderBoundsContribution);
+	DefaultOuterBorderBoundsContribution = __decorate$1E([injectable()], DefaultOuterBorderBoundsContribution);
 
-	var __decorate$1C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1D = 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;
@@ -21108,9 +21148,9 @@
 	};
 	const RectBoundsContribution = Symbol.for("RectBoundsContribution");
 	let DefaultRectOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-	DefaultRectOuterBorderBoundsContribution = __decorate$1C([injectable()], DefaultRectOuterBorderBoundsContribution);
+	DefaultRectOuterBorderBoundsContribution = __decorate$1D([injectable()], DefaultRectOuterBorderBoundsContribution);
 
-	var __decorate$1B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1C = 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;
@@ -21136,9 +21176,9 @@
 	    return aabbBounds;
 	  }
 	};
-	DefaultSymbolOuterBorderBoundsContribution = __decorate$1B([injectable()], DefaultSymbolOuterBorderBoundsContribution);
+	DefaultSymbolOuterBorderBoundsContribution = __decorate$1C([injectable()], DefaultSymbolOuterBorderBoundsContribution);
 
-	var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -21147,9 +21187,9 @@
 	};
 	const CircleBoundsContribution = Symbol.for("CircleBoundsContribution");
 	let DefaultCircleOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-	DefaultCircleOuterBorderBoundsContribution = __decorate$1A([injectable()], DefaultCircleOuterBorderBoundsContribution);
+	DefaultCircleOuterBorderBoundsContribution = __decorate$1B([injectable()], DefaultCircleOuterBorderBoundsContribution);
 
-	var __decorate$1z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1A = 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;
@@ -21158,9 +21198,9 @@
 	};
 	const ArcBoundsContribution = Symbol.for("ArcBoundsContribution");
 	let DefaultArcOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-	DefaultArcOuterBorderBoundsContribution = __decorate$1z([injectable()], DefaultArcOuterBorderBoundsContribution);
+	DefaultArcOuterBorderBoundsContribution = __decorate$1A([injectable()], DefaultArcOuterBorderBoundsContribution);
 
-	var __decorate$1y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1z = 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;
@@ -21169,7 +21209,7 @@
 	};
 	const PathBoundsContribution = Symbol.for("PathBoundsContribution");
 	let DefaultPathOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-	DefaultPathOuterBorderBoundsContribution = __decorate$1y([injectable()], DefaultPathOuterBorderBoundsContribution);
+	DefaultPathOuterBorderBoundsContribution = __decorate$1z([injectable()], DefaultPathOuterBorderBoundsContribution);
 
 	function createMat4() {
 	  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
@@ -21229,7 +21269,7 @@
 	const matrixAllocate = new DefaultMatrixAllocate();
 	const mat4Allocate = new DefaultMat4Allocate();
 
-	var __decorate$1x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1y = 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;
@@ -21776,7 +21816,7 @@
 	    this.combindShadowAABBBounds(aabbBounds, graphic), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix);
 	  }
 	};
-	DefaultGraphicService = __decorate$1x([injectable(), __param$M(0, inject(GraphicCreator)), __param$M(1, inject(ContributionProvider)), __param$M(1, named(RectBoundsContribution)), __param$M(2, inject(ContributionProvider)), __param$M(2, named(SymbolBoundsContribution)), __param$M(3, inject(ContributionProvider)), __param$M(3, named(CircleBoundsContribution)), __param$M(4, inject(ContributionProvider)), __param$M(4, named(ArcBoundsContribution)), __param$M(5, inject(ContributionProvider)), __param$M(5, named(PathBoundsContribution)), __metadata$$("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
+	DefaultGraphicService = __decorate$1y([injectable(), __param$M(0, inject(GraphicCreator)), __param$M(1, inject(ContributionProvider)), __param$M(1, named(RectBoundsContribution)), __param$M(2, inject(ContributionProvider)), __param$M(2, named(SymbolBoundsContribution)), __param$M(3, inject(ContributionProvider)), __param$M(3, named(CircleBoundsContribution)), __param$M(4, inject(ContributionProvider)), __param$M(4, named(ArcBoundsContribution)), __param$M(5, inject(ContributionProvider)), __param$M(5, named(PathBoundsContribution)), __metadata$$("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
 
 	class ShadowRoot extends Group$1 {
 	  constructor(graphic) {
@@ -21881,7 +21921,7 @@
 	}
 	createRichText({});
 
-	var __decorate$1w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1x = 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;
@@ -21965,7 +22005,7 @@
 	    context.translate(p.x, p.y, !1), context.scale(scaleX, scaleY, !1), context.rotate(angle, !1), context.translate(-p.x, -p.y, !1), context.setTransformForCurrent();
 	  }
 	};
-	BaseRender = __decorate$1w([injectable()], BaseRender);
+	BaseRender = __decorate$1x([injectable()], BaseRender);
 
 	function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
 	  var _a;
@@ -22103,7 +22143,7 @@
 	  }
 	}
 
-	var __decorate$1v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1w = 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;
@@ -22185,20 +22225,46 @@
 	    if (!(fVisible || sVisible || fillCb || strokeCb)) return;
 	    if (line.shouldUpdateShape()) {
 	      const {
-	          points: points,
-	          segments: segments,
-	          curveType = lineAttribute.curveType
-	        } = line.attribute,
-	        _points = points;
+	        points: points,
+	        segments: segments,
+	        closePath: closePath
+	      } = line.attribute;
+	      let {
+	        curveType = lineAttribute.curveType
+	      } = line.attribute;
+	      closePath && "linear" === curveType && (curveType = "linearClosed");
+	      const _points = points;
 	      if (segments && segments.length) {
 	        let startPoint, lastSeg;
-	        line.cache = segments.map((seg, index) => (1 === index ? startPoint = {
-	          x: lastSeg.endX,
-	          y: lastSeg.endY,
-	          defined: lastSeg.curves[lastSeg.curves.length - 1].defined
-	        } : index > 1 && (startPoint.x = lastSeg.endX, startPoint.y = lastSeg.endY, startPoint.defined = lastSeg.curves[lastSeg.curves.length - 1].defined), lastSeg = calcLineCache$1(seg.points, curveType, {
-	          startPoint: startPoint
-	        }), lastSeg));
+	        if (line.cache = segments.map((seg, index) => {
+	          if (seg.points.length <= 1 && 0 === index) return seg.points[0] && (lastSeg = {
+	            endX: seg.points[0].x,
+	            endY: seg.points[0].y,
+	            curves: [{
+	              defined: !1 !== seg.points[0].defined
+	            }]
+	          }), null;
+	          1 === index ? startPoint = {
+	            x: lastSeg.endX,
+	            y: lastSeg.endY,
+	            defined: lastSeg.curves[lastSeg.curves.length - 1].defined
+	          } : index > 1 && (startPoint.x = lastSeg.endX, startPoint.y = lastSeg.endY, startPoint.defined = lastSeg.curves[lastSeg.curves.length - 1].defined);
+	          const data = calcLineCache$1(seg.points, curveType, {
+	            startPoint: startPoint
+	          });
+	          return lastSeg = data, data;
+	        }).filter(item => !!item), "linearClosed" === curveType) {
+	          let startP;
+	          for (let i = 0; i < line.cache.length; i++) {
+	            const cacheItem = line.cache[i];
+	            for (let i = 0; i < cacheItem.curves.length; i++) if (cacheItem.curves[i].defined) {
+	              startP = cacheItem.curves[i].p0;
+	              break;
+	            }
+	            if (startP) break;
+	          }
+	          line.cache[line.cache.length - 1] && line.cache[line.cache.length - 1].lineTo(startP.x, startP.y, !0);
+	        }
 	      } else {
 	        if (!points || !points.length) return line.cache = null, void line.clearUpdateShapeTag();
 	        line.cache = calcLineCache$1(_points, curveType);
@@ -22210,10 +22276,11 @@
 	      clipRangeByDimension = lineAttribute.clipRangeByDimension
 	    } = line.attribute;
 	    if (Array.isArray(line.cache)) {
-	      if (1 === clipRange) {
+	      const segments = line.attribute.segments.filter(item => item.points.length);
+	      if (1 === segments[0].points.length && segments.shift(), 1 === clipRange) {
 	        let skip = !1;
 	        line.cache.forEach((cache, index) => {
-	          skip || (skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute.segments[index], [lineAttribute, line.attribute], clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb));
+	          skip || (skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, segments[index], [lineAttribute, line.attribute], clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb));
 	        });
 	      } else {
 	        const totalLength = line.cache.reduce((l, c) => l + c.getLength(), 0),
@@ -22224,13 +22291,13 @@
 	          if (skip) return;
 	          const curSegLength = cache.getLength(),
 	            _cr = (totalDrawLength - drawedLengthUntilLast) / curSegLength;
-	          drawedLengthUntilLast += curSegLength, _cr > 0 && (skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute.segments[index], [lineAttribute, line.attribute], min(_cr, 1), clipRangeByDimension, x, y, line, fillCb, strokeCb));
+	          drawedLengthUntilLast += curSegLength, _cr > 0 && (skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, segments[index], [lineAttribute, line.attribute], min(_cr, 1), clipRangeByDimension, x, y, line, fillCb, strokeCb));
 	        });
 	      }
 	    } else this.drawSegmentItem(context, line.cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute, lineAttribute, clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb);
 	  }
 	};
-	DefaultCanvasLineRender = __decorate$1v([injectable()], DefaultCanvasLineRender);
+	DefaultCanvasLineRender = __decorate$1w([injectable()], DefaultCanvasLineRender);
 
 	function drawAreaSegments(path, segPath, percent, params) {
 	  var _a;
@@ -22370,7 +22437,7 @@
 	  }
 	}
 
-	var __decorate$1u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1v = 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;
@@ -22438,16 +22505,27 @@
 	      const {
 	        points: points,
 	        segments: segments,
+	        closePath: closePath
+	      } = area.attribute;
+	      let {
 	        curveType = areaAttribute.curveType
 	      } = area.attribute;
-	      if (segments && segments.length) {
+	      if (closePath && "linear" === curveType && (curveType = "linearClosed"), segments && segments.length) {
 	        let startPoint, lastTopSeg;
-	        const topCaches = segments.map((seg, index) => (1 === index ? startPoint = {
-	          x: lastTopSeg.endX,
-	          y: lastTopSeg.endY
-	        } : index > 1 && (startPoint.x = lastTopSeg.endX, startPoint.y = lastTopSeg.endY), lastTopSeg = calcLineCache(seg.points, curveType, {
-	          startPoint: startPoint
-	        }), lastTopSeg));
+	        const topCaches = segments.map((seg, index) => {
+	          if (seg.points.length <= 1 && 0 === index) return seg.points[0] && (lastTopSeg = {
+	            endX: seg.points[0].x,
+	            endY: seg.points[0].y
+	          }), null;
+	          1 === index ? startPoint = {
+	            x: lastTopSeg.endX,
+	            y: lastTopSeg.endY
+	          } : index > 1 && (startPoint.x = lastTopSeg.endX, startPoint.y = lastTopSeg.endY);
+	          const data = calcLineCache(seg.points, curveType, {
+	            startPoint: startPoint
+	          });
+	          return lastTopSeg = data, data;
+	        }).filter(item => !!item);
 	        let lastBottomSeg;
 	        const bottomCaches = [];
 	        for (let i = segments.length - 1; i >= 0; i--) {
@@ -22491,10 +22569,11 @@
 	      area.clearUpdateShapeTag();
 	    }
 	    if (Array.isArray(area.cacheArea)) {
-	      if (1 === clipRange) {
+	      const segments = area.attribute.segments.filter(item => item.points.length);
+	      if (1 === segments[0].points.length && segments.shift(), 1 === clipRange) {
 	        let skip = !1;
 	        area.cacheArea.forEach((cache, index) => {
-	          skip || (skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, area.attribute.segments[index], [areaAttribute, area.attribute], clipRange, x, y, z, area, drawContext, fillCb, strokeCb));
+	          skip || (skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[index], [areaAttribute, area.attribute], clipRange, x, y, z, area, drawContext, fillCb, strokeCb));
 	        });
 	      } else {
 	        const totalLength = area.cacheArea.reduce((l, c) => l + c.top.getLength(), 0),
@@ -22505,7 +22584,7 @@
 	          if (skip) return;
 	          const curSegLength = cache.top.getLength(),
 	            _cr = (totalDrawLength - drawedLengthUntilLast) / curSegLength;
-	          drawedLengthUntilLast += curSegLength, _cr > 0 && (skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, area.attribute.segments[index], [areaAttribute, area.attribute], min(_cr, 1), x, y, z, area, drawContext, fillCb, strokeCb));
+	          drawedLengthUntilLast += curSegLength, _cr > 0 && (skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[index], [areaAttribute, area.attribute], min(_cr, 1), x, y, z, area, drawContext, fillCb, strokeCb));
 	        });
 	      }
 	    } else this.drawSegmentItem(context, area.cacheArea, doFill, fillOpacity, doStroke, strokeOpacity, area.attribute, areaAttribute, clipRange, x, y, z, area, drawContext, fillCb, strokeCb);
@@ -22591,9 +22670,9 @@
 	    return !1;
 	  }
 	};
-	DefaultCanvasAreaRender = __decorate$1u([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(AreaRenderContribution)), __metadata$_("design:paramtypes", [Object])], DefaultCanvasAreaRender);
+	DefaultCanvasAreaRender = __decorate$1v([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(AreaRenderContribution)), __metadata$_("design:paramtypes", [Object])], DefaultCanvasAreaRender);
 
-	var __decorate$1t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1u = 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;
@@ -22661,7 +22740,7 @@
 	    this.z = z, drawPathProxy(path, context, x, y, drawContext, params) || (this.drawShape(path, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasPathRender = __decorate$1t([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(PathRenderContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultCanvasPathRender);
+	DefaultCanvasPathRender = __decorate$1u([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(PathRenderContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultCanvasPathRender);
 
 	const halfPi$1 = pi$1 / 2;
 	function createRectPath(path, x, y, width, height, rectCornerRadius) {
@@ -22718,7 +22797,7 @@
 	  return path.closePath(), path;
 	}
 
-	var __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1t = 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;
@@ -22790,9 +22869,9 @@
 	    drawPathProxy(rect, context, x, y, drawContext, params) || this.drawShape(rect, context, x, y, drawContext, params), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasRectRender = __decorate$1s([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(RectRenderContribution)), __metadata$Y("design:paramtypes", [Object])], DefaultCanvasRectRender);
+	DefaultCanvasRectRender = __decorate$1t([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(RectRenderContribution)), __metadata$Y("design:paramtypes", [Object])], DefaultCanvasRectRender);
 
-	var __decorate$1r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1s = 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;
@@ -22874,9 +22953,9 @@
 	    this.z = z, drawPathProxy(symbol, context, x, y, drawContext, params) || (this.drawShape(symbol, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasSymbolRender = __decorate$1r([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(SymbolRenderContribution)), __metadata$X("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
+	DefaultCanvasSymbolRender = __decorate$1s([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(SymbolRenderContribution)), __metadata$X("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
-	var __decorate$1q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1r = 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;
@@ -23097,9 +23176,9 @@
 	    }
 	  }
 	};
-	DefaultCanvasTextRender = __decorate$1q([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(TextRenderContribution)), __metadata$W("design:paramtypes", [Object])], DefaultCanvasTextRender);
+	DefaultCanvasTextRender = __decorate$1r([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(TextRenderContribution)), __metadata$W("design:paramtypes", [Object])], DefaultCanvasTextRender);
 
-	var __decorate$1p = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1q = 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;
@@ -23107,7 +23186,7 @@
 	  return c > 3 && r && Object.defineProperty(target, key, r), r;
 	};
 	let AbstractGraphicRender = class {};
-	AbstractGraphicRender = __decorate$1p([injectable()], AbstractGraphicRender);
+	AbstractGraphicRender = __decorate$1q([injectable()], AbstractGraphicRender);
 
 	function drawPolygon(path, points, x, y) {
 	  path.moveTo(points[0].x + x, points[0].y + y);
@@ -23154,7 +23233,7 @@
 	  };
 	}
 
-	var __decorate$1o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1p = 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;
@@ -23217,9 +23296,9 @@
 	    drawPathProxy(polygon, context, x, y, drawContext, params) || this.drawShape(polygon, context, x, y, drawContext, params), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasPolygonRender = __decorate$1o([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(PolygonRenderContribution)), __metadata$V("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
+	DefaultCanvasPolygonRender = __decorate$1p([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(PolygonRenderContribution)), __metadata$V("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
 
-	var __decorate$1n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1o = 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;
@@ -23299,7 +23378,7 @@
 	    }
 	  }
 	};
-	DefaultCanvasImageRender = __decorate$1n([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(ImageRenderContribution)), __metadata$U("design:paramtypes", [Object])], DefaultCanvasImageRender);
+	DefaultCanvasImageRender = __decorate$1o([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(ImageRenderContribution)), __metadata$U("design:paramtypes", [Object])], DefaultCanvasImageRender);
 
 	const IncrementalDrawContribution = Symbol.for("IncrementalDrawContribution");
 	const ArcRender = Symbol.for("ArcRender");
@@ -23447,7 +23526,7 @@
 	}
 	const canvasAllocate = new DefaultCanvasAllocate();
 
-	var __decorate$1m = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1n = 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;
@@ -23487,7 +23566,7 @@
 	    } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
 	  }
 	};
-	DefaultBaseBackgroundRenderContribution = __decorate$1m([injectable()], DefaultBaseBackgroundRenderContribution);
+	DefaultBaseBackgroundRenderContribution = __decorate$1n([injectable()], DefaultBaseBackgroundRenderContribution);
 	let DefaultBaseInteractiveRenderContribution = class {
 	  constructor(subRenderContribitions) {
 	    this.subRenderContribitions = subRenderContribitions, this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -23498,7 +23577,7 @@
 	    });
 	  }
 	};
-	DefaultBaseInteractiveRenderContribution = __decorate$1m([injectable(), __param$E(0, inject(ContributionProvider)), __param$E(0, named(InteractiveSubRenderContribution)), __metadata$T("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+	DefaultBaseInteractiveRenderContribution = __decorate$1n([injectable(), __param$E(0, inject(ContributionProvider)), __param$E(0, named(InteractiveSubRenderContribution)), __metadata$T("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
 	let DefaultBaseTextureRenderContribution = class {
 	  constructor() {
 	    this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 10;
@@ -23611,9 +23690,9 @@
 	    pattern && (context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore());
 	  }
 	};
-	DefaultBaseTextureRenderContribution = __decorate$1m([injectable()], DefaultBaseTextureRenderContribution);
+	DefaultBaseTextureRenderContribution = __decorate$1n([injectable()], DefaultBaseTextureRenderContribution);
 
-	var __decorate$1l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1m = 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;
@@ -23685,21 +23764,21 @@
 	    });
 	  }
 	};
-	DefaultArcRenderContribution = __decorate$1l([injectable()], DefaultArcRenderContribution);
+	DefaultArcRenderContribution = __decorate$1m([injectable()], DefaultArcRenderContribution);
 	let DefaultArcBackgroundRenderContribution = class extends DefaultBaseBackgroundRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultArcBackgroundRenderContribution = __decorate$1l([injectable()], DefaultArcBackgroundRenderContribution);
+	DefaultArcBackgroundRenderContribution = __decorate$1m([injectable()], DefaultArcBackgroundRenderContribution);
 	let DefaultArcTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultArcTextureRenderContribution = __decorate$1l([injectable()], DefaultArcTextureRenderContribution);
+	DefaultArcTextureRenderContribution = __decorate$1m([injectable()], DefaultArcTextureRenderContribution);
 
-	var __decorate$1k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1l = 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;
@@ -23752,21 +23831,21 @@
 	    }
 	  }
 	};
-	DefaultCircleRenderContribution = __decorate$1k([injectable()], DefaultCircleRenderContribution);
+	DefaultCircleRenderContribution = __decorate$1l([injectable()], DefaultCircleRenderContribution);
 	let DefaultCircleBackgroundRenderContribution = class extends DefaultBaseBackgroundRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultCircleBackgroundRenderContribution = __decorate$1k([injectable()], DefaultCircleBackgroundRenderContribution);
+	DefaultCircleBackgroundRenderContribution = __decorate$1l([injectable()], DefaultCircleBackgroundRenderContribution);
 	let DefaultCircleTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultCircleTextureRenderContribution = __decorate$1k([injectable()], DefaultCircleTextureRenderContribution);
+	DefaultCircleTextureRenderContribution = __decorate$1l([injectable()], DefaultCircleTextureRenderContribution);
 
-	var __decorate$1j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1k = 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;
@@ -23790,9 +23869,9 @@
 	    } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
 	  }
 	};
-	DefaultGroupBackgroundRenderContribution = __decorate$1j([injectable()], DefaultGroupBackgroundRenderContribution);
+	DefaultGroupBackgroundRenderContribution = __decorate$1k([injectable()], DefaultGroupBackgroundRenderContribution);
 
-	var __decorate$1i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1j = 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;
@@ -23847,7 +23926,7 @@
 	    }
 	  }
 	};
-	DefaultImageBackgroundRenderContribution = __decorate$1i([injectable()], DefaultImageBackgroundRenderContribution);
+	DefaultImageBackgroundRenderContribution = __decorate$1j([injectable()], DefaultImageBackgroundRenderContribution);
 	function getActualPosition(graphic) {
 	  const boundsPadding = parsePadding(graphic.attribute.boundsPadding),
 	    bounds = graphic.AABBBounds;
@@ -23863,7 +23942,7 @@
 	  };
 	}
 
-	var __decorate$1h = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1i = 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;
@@ -23922,19 +24001,19 @@
 	    }
 	  }
 	};
-	DefaultRectRenderContribution = __decorate$1h([injectable()], DefaultRectRenderContribution);
+	DefaultRectRenderContribution = __decorate$1i([injectable()], DefaultRectRenderContribution);
 	let DefaultRectBackgroundRenderContribution = class extends DefaultBaseBackgroundRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultRectBackgroundRenderContribution = __decorate$1h([injectable()], DefaultRectBackgroundRenderContribution);
+	DefaultRectBackgroundRenderContribution = __decorate$1i([injectable()], DefaultRectBackgroundRenderContribution);
 	let DefaultRectTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultRectTextureRenderContribution = __decorate$1h([injectable()], DefaultRectTextureRenderContribution);
+	DefaultRectTextureRenderContribution = __decorate$1i([injectable()], DefaultRectTextureRenderContribution);
 	let SplitRectBeforeRenderContribution$1 = class SplitRectBeforeRenderContribution {
 	  constructor() {
 	    this.time = BaseRenderContributionTime.beforeFillStroke, this.useStyle = !0, this.order = 0;
@@ -23946,7 +24025,7 @@
 	    Array.isArray(stroke) && stroke.some(s => !1 === s) && (doFillOrStroke.doStroke = !1);
 	  }
 	};
-	SplitRectBeforeRenderContribution$1 = __decorate$1h([injectable()], SplitRectBeforeRenderContribution$1);
+	SplitRectBeforeRenderContribution$1 = __decorate$1i([injectable()], SplitRectBeforeRenderContribution$1);
 	let SplitRectAfterRenderContribution$1 = class SplitRectAfterRenderContribution {
 	  constructor() {
 	    this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -23966,9 +24045,9 @@
 	    }
 	  }
 	};
-	SplitRectAfterRenderContribution$1 = __decorate$1h([injectable()], SplitRectAfterRenderContribution$1);
+	SplitRectAfterRenderContribution$1 = __decorate$1i([injectable()], SplitRectAfterRenderContribution$1);
 
-	var __decorate$1g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1h = 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;
@@ -24021,7 +24100,7 @@
 	    }
 	  }
 	};
-	DefaultSymbolRenderContribution = __decorate$1g([injectable()], DefaultSymbolRenderContribution);
+	DefaultSymbolRenderContribution = __decorate$1h([injectable()], DefaultSymbolRenderContribution);
 	class DefaultSymbolBackgroundRenderContribution extends DefaultBaseBackgroundRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
@@ -24033,7 +24112,7 @@
 	  }
 	}
 
-	var __decorate$1f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24080,7 +24159,7 @@
 	    this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
 	  }
 	};
-	DefaultRenderService = __decorate$1f([injectable(), __param$D(0, inject(DrawContribution)), __metadata$S("design:paramtypes", [Object])], DefaultRenderService);
+	DefaultRenderService = __decorate$1g([injectable(), __param$D(0, inject(DrawContribution)), __metadata$S("design:paramtypes", [Object])], DefaultRenderService);
 
 	var renderModule$1 = new ContainerModule(bind => {
 	  bind(DefaultRenderService).toSelf(), bind(RenderService).toService(DefaultRenderService);
@@ -24192,7 +24271,7 @@
 	  return result;
 	}
 
-	var __decorate$1e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1f = 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;
@@ -24200,6 +24279,35 @@
 	  return c > 3 && r && Object.defineProperty(target, key, r), r;
 	};
 	const PickItemInterceptor = Symbol.for("PickItemInterceptor");
+	let ShadowRootPickItemInterceptorContribution = class {
+	  constructor() {
+	    this.order = 1;
+	  }
+	  afterPickItem(graphic, pickerService, point, pickParams, params) {
+	    return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this._pickItem(graphic, pickerService, point, pickParams, params);
+	  }
+	  beforePickItem(graphic, pickerService, point, pickParams, params) {
+	    return graphic.attribute.shadowRootIdx < 0 && this._pickItem(graphic, pickerService, point, pickParams, params);
+	  }
+	  _pickItem(graphic, pickerService, point, pickParams, params) {
+	    if (!graphic.shadowRoot) return !1;
+	    const {
+	      parentMatrix: parentMatrix
+	    } = params || {};
+	    if (!parentMatrix) return !1;
+	    const context = pickerService.pickContext;
+	    context.highPerformanceSave();
+	    const g = graphic.shadowRoot,
+	      currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix),
+	      newPoint = new Point(point.x, point.y);
+	    parentMatrix.transformPoint(newPoint, newPoint);
+	    const transMatrix = graphic.transMatrix;
+	    currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
+	    const result = pickerService.pickGroup(g, newPoint.clone(), currentGroupMatrix, pickParams);
+	    return context.highPerformanceRestore(), result;
+	  }
+	};
+	ShadowRootPickItemInterceptorContribution = __decorate$1f([injectable()], ShadowRootPickItemInterceptorContribution);
 	let Canvas3DPickItemInterceptor = class {
 	  constructor() {
 	    this.order = 1;
@@ -24259,9 +24367,9 @@
 	    context.setTransformForCurrent();
 	  }
 	};
-	Canvas3DPickItemInterceptor = __decorate$1e([injectable()], Canvas3DPickItemInterceptor);
+	Canvas3DPickItemInterceptor = __decorate$1f([injectable()], Canvas3DPickItemInterceptor);
 
-	var __decorate$1d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1e = 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;
@@ -24299,11 +24407,18 @@
 	    this.pickContext && (this.pickContext.inuse = !0), params.pickContext = this.pickContext, this.pickContext && this.pickContext.clearMatrix(!0, 1);
 	    const parentMatrix = new Matrix(1, 0, 0, 1, offsetX, offsetY);
 	    let group;
-	    for (let i = graphics.length - 1; i >= 0 && (graphics[i].isContainer ? result = this.pickGroup(graphics[i], point, parentMatrix, params) : result.graphic = this.pickItem(graphics[i], point, params), !result.graphic); i--) group || (group = result.group);
-	    return result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result;
+	    for (let i = graphics.length - 1; i >= 0 && (graphics[i].isContainer ? result = this.pickGroup(graphics[i], point, parentMatrix, params) : result.graphic = this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i--) group || (group = result.group);
+	    if (result.graphic || (result.group = group), this.pickContext && (this.pickContext.inuse = !1), result.graphic) {
+	      let g = result.graphic;
+	      for (; g.parent;) g = g.parent;
+	      g.shadowHost && (result.params = {
+	        shadowTarget: result.graphic
+	      }, result.graphic = g.shadowHost);
+	    }
+	    return result;
 	  }
 	  containsPoint(graphic, point, params) {
-	    return !!this.pickItem(graphic, point, params);
+	    return !!this.pickItem(graphic, point, null, params);
 	  }
 	  pickGroup(group, point, parentMatrix, params) {
 	    let result = {
@@ -24338,8 +24453,10 @@
 	    currentGroupMatrix.transformPoint(newPoint, newPoint);
 	    const insideGroup = group.AABBBounds.containsPoint(newPoint);
 	    if (!insideGroup && !group.stage.camera) return result;
+	    const pickedItem = this.pickItem(group, newPoint.clone(), parentMatrix, params);
+	    pickedItem && (result.graphic = pickedItem);
 	    const groupPicked = !1 !== group.attribute.pickable && insideGroup;
-	    return currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), !1 !== group.attribute.childrenPickable && foreach(group, DefaultAttribute.zIndex, graphic => {
+	    return currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), !1 === group.attribute.childrenPickable || pickedItem || foreach(group, DefaultAttribute.zIndex, graphic => {
 	      if (graphic.isContainer) {
 	        const newPoint = new Point(point.x, point.y),
 	          theme = getTheme(group).group,
@@ -24357,7 +24474,7 @@
 	            scrollY = theme.scrollY
 	          } = group.attribute;
 	        newPoint.x -= scrollX, newPoint.y -= scrollY;
-	        const pickedItem = this.pickItem(graphic, newPoint, params);
+	        const pickedItem = this.pickItem(graphic, newPoint, parentMatrix, params);
 	        result.graphic = pickedItem;
 	      }
 	      return !!result.graphic || !!result.group;
@@ -24368,9 +24485,9 @@
 	    return picker || null;
 	  }
 	};
-	DefaultPickService = __decorate$1d([injectable(), __param$C(0, inject(VGlobal)), __param$C(1, inject(ContributionProvider)), __param$C(1, named(PickItemInterceptor)), __metadata$R("design:paramtypes", [Object, Object])], DefaultPickService);
+	DefaultPickService = __decorate$1e([injectable(), __param$C(0, inject(VGlobal)), __param$C(1, inject(ContributionProvider)), __param$C(1, named(PickItemInterceptor)), __metadata$R("design:paramtypes", [Object, Object])], DefaultPickService);
 
-	var __decorate$1c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1d = 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;
@@ -24400,11 +24517,18 @@
 	    };
 	    const parentMatrix = new Matrix(1, 0, 0, 1, 0, 0);
 	    let group;
-	    for (let i = 0; i < graphics.length && (graphics[i].isContainer ? result = this.pickGroup(graphics[i], point, parentMatrix, params) : result.graphic = this.pickItem(graphics[i], point, params), !result.graphic); i++) group || (group = result.group);
-	    return result.graphic || (result.group = group), result;
+	    for (let i = 0; i < graphics.length && (graphics[i].isContainer ? result = this.pickGroup(graphics[i], point, parentMatrix, params) : result.graphic = this.pickItem(graphics[i], point, parentMatrix, params), !result.graphic); i++) group || (group = result.group);
+	    if (result.graphic || (result.group = group), result.graphic) {
+	      let g = result.graphic;
+	      for (; g.parent;) g = g.parent;
+	      g.shadowHost && (result.params = {
+	        shadowTarget: result.graphic
+	      }, result.graphic = g.shadowHost);
+	    }
+	    return result;
 	  }
 	  containsPoint(graphic, point, params) {
-	    return !!this.pickItem(graphic, point, params);
+	    return !!this.pickItem(graphic, point, null, params);
 	  }
 	  pickGroup(group, point, parentMatrix, params) {
 	    let result = {
@@ -24421,16 +24545,16 @@
 	    return parentMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), !1 !== group.attribute.childrenPickable && group.forEachChildren(graphic => {
 	      if (graphic.isContainer) result = this.pickGroup(graphic, point, parentMatrix, params);else {
 	        const newPoint = new Point(point.x, point.y);
-	        parentMatrix.transformPoint(newPoint, newPoint), result.graphic = this.pickItem(graphic, newPoint, params);
+	        parentMatrix.transformPoint(newPoint, newPoint), result.graphic = this.pickItem(graphic, newPoint, parentMatrix, params);
 	      }
 	      return !!result.graphic || !!result.group;
 	    }), result.graphic || result.group || !groupPicked || (result.group = group), result;
 	  }
-	  pickItem(graphic, point, params) {
+	  pickItem(graphic, point, parentMatrix, params) {
 	    return !1 === graphic.attribute.pickable ? null : graphic.AABBBounds.containsPoint(point) ? graphic : null;
 	  }
 	};
-	DefaultGlobalPickerService = __decorate$1c([injectable(), __param$B(0, inject(VGlobal)), __metadata$Q("design:paramtypes", [Object])], DefaultGlobalPickerService);
+	DefaultGlobalPickerService = __decorate$1d([injectable(), __param$B(0, inject(VGlobal)), __metadata$Q("design:paramtypes", [Object])], DefaultGlobalPickerService);
 
 	function lookAt(out, eye, center, up) {
 	  let x0, x1, x2, y0, y1, y2, z0, z1, z2, len;
@@ -24547,7 +24671,7 @@
 	  }
 	}
 
-	var __decorate$1b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1c = 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;
@@ -25056,9 +25180,9 @@
 	    this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
 	  }
 	};
-	BrowserContext2d.env = "browser", BrowserContext2d = __decorate$1b([injectable(), __metadata$P("design:paramtypes", [Object, Number])], BrowserContext2d);
+	BrowserContext2d.env = "browser", BrowserContext2d = __decorate$1c([injectable(), __metadata$P("design:paramtypes", [Object, Number])], BrowserContext2d);
 
-	var __decorate$1a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -25202,7 +25326,7 @@
 	    this.controled && this._nativeCanvas.parentElement && this._nativeCanvas.parentElement.removeChild(this._nativeCanvas);
 	  }
 	};
-	BrowserCanvas.env = "browser", BrowserCanvas = __decorate$1a([injectable(), __metadata$O("design:paramtypes", [Object])], BrowserCanvas);
+	BrowserCanvas.env = "browser", BrowserCanvas = __decorate$1b([injectable(), __metadata$O("design:paramtypes", [Object])], BrowserCanvas);
 
 	const CanvasArcPicker = Symbol.for("CanvasArcPicker");
 	const CanvasArc3dPicker = Symbol.for("CanvasArc3dPicker");
@@ -25219,6 +25343,7 @@
 	const CanvasPyramid3dPicker = Symbol.for("CanvasPyramid3dPicker");
 	const CanvasRichTextPicker = Symbol.for("CanvasRichTextPicker");
 	const CanvasGlyphPicker = Symbol.for("CanvasGlyphPicker");
+	const CanvasGroupPicker = Symbol.for("CanvasGroupPicker");
 	const CanvasPickerContribution = Symbol.for("CanvasPickerContribution");
 	const MathArcPicker = Symbol.for("MathArcPicker");
 	const MathAreaPicker = Symbol.for("MathAreaPicker");
@@ -25232,7 +25357,7 @@
 	const MathGlyphPicker = Symbol.for("MathGlyphPicker");
 	const MathPickerContribution = Symbol.for("MathPickerContribution");
 
-	var __decorate$19 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$1a = 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;
@@ -25270,19 +25395,36 @@
 	    };
 	    this.pickCanvas = new BrowserCanvas(options), this.pickContext = this.pickCanvas.getContext("2d");
 	  }
-	  pickItem(graphic, point, params) {
+	  pickItem(graphic, point, parentMatrix, params) {
 	    if (!1 === graphic.attribute.pickable) return null;
 	    if (this.InterceptorContributions.length) for (let i = 0; i < this.InterceptorContributions.length; i++) {
 	      const drawContribution = this.InterceptorContributions[i];
-	      if (drawContribution.beforePickItem && drawContribution.beforePickItem(graphic, this, point, params)) return graphic;
+	      if (drawContribution.beforePickItem) {
+	        const ret = drawContribution.beforePickItem(graphic, this, point, params, {
+	          parentMatrix: parentMatrix
+	        });
+	        if (ret) return !0 === ret ? graphic : ret.graphic;
+	      }
 	    }
 	    const picker = this.pickerMap.get(graphic.numberType);
-	    return picker && picker.contains(graphic, point, params) ? graphic : null;
+	    if (!picker) return null;
+	    const data = picker.contains(graphic, point, params) ? graphic : null;
+	    if (data) return data;
+	    if (this.InterceptorContributions.length) for (let i = 0; i < this.InterceptorContributions.length; i++) {
+	      const drawContribution = this.InterceptorContributions[i];
+	      if (drawContribution.afterPickItem) {
+	        const ret = drawContribution.afterPickItem(graphic, this, point, params, {
+	          parentMatrix: parentMatrix
+	        });
+	        if (ret) return !0 === ret ? graphic : ret.graphic;
+	      }
+	    }
+	    return data;
 	  }
 	};
-	__decorate$19([postConstruct(), __metadata$N("design:type", Function), __metadata$N("design:paramtypes", []), __metadata$N("design:returntype", void 0)], DefaultCanvasPickerService.prototype, "init", null), DefaultCanvasPickerService = __decorate$19([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(CanvasPickerContribution)), __param$A(1, inject(CanvasCirclePicker)), __param$A(2, inject(CanvasRectPicker)), __param$A(3, inject(CanvasArcPicker)), __param$A(4, inject(CanvasAreaPicker)), __param$A(5, inject(CanvasImagePicker)), __param$A(6, inject(CanvasLinePicker)), __param$A(7, inject(CanvasPathPicker)), __param$A(8, inject(CanvasSymbolPicker)), __param$A(9, inject(CanvasTextPicker)), __param$A(10, inject(CanvasPolygonPicker)), __param$A(11, inject(CanvasRichTextPicker)), __param$A(12, inject(DrawContribution)), __param$A(13, inject(VGlobal)), __param$A(14, inject(ContributionProvider)), __param$A(14, named(PickItemInterceptor)), __metadata$N("design:paramtypes", [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object])], DefaultCanvasPickerService);
+	__decorate$1a([postConstruct(), __metadata$N("design:type", Function), __metadata$N("design:paramtypes", []), __metadata$N("design:returntype", void 0)], DefaultCanvasPickerService.prototype, "init", null), DefaultCanvasPickerService = __decorate$1a([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(CanvasPickerContribution)), __param$A(1, inject(CanvasCirclePicker)), __param$A(2, inject(CanvasRectPicker)), __param$A(3, inject(CanvasArcPicker)), __param$A(4, inject(CanvasAreaPicker)), __param$A(5, inject(CanvasImagePicker)), __param$A(6, inject(CanvasLinePicker)), __param$A(7, inject(CanvasPathPicker)), __param$A(8, inject(CanvasSymbolPicker)), __param$A(9, inject(CanvasTextPicker)), __param$A(10, inject(CanvasPolygonPicker)), __param$A(11, inject(CanvasRichTextPicker)), __param$A(12, inject(DrawContribution)), __param$A(13, inject(VGlobal)), __param$A(14, inject(ContributionProvider)), __param$A(14, named(PickItemInterceptor)), __metadata$N("design:paramtypes", [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object])], DefaultCanvasPickerService);
 
-	var __decorate$18 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$19 = 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;
@@ -25496,9 +25638,9 @@
 	    this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
 	  }
 	};
-	EmptyContext2d = __decorate$18([injectable(), __metadata$M("design:paramtypes", [Object, Number])], EmptyContext2d);
+	EmptyContext2d = __decorate$19([injectable(), __metadata$M("design:paramtypes", [Object, Number])], EmptyContext2d);
 
-	var __decorate$17 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$18 = 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;
@@ -25527,16 +25669,16 @@
 	  configure(global, env) {
 	    this.pickContext = new EmptyContext2d(null, 1);
 	  }
-	  pickItem(graphic, point, params) {
+	  pickItem(graphic, point, parentMatrix, params) {
 	    if (!1 === graphic.attribute.pickable) return null;
 	    const picker = this.pickerMap.get(graphic.numberType);
 	    return picker && picker.contains(graphic, point, params) ? graphic : null;
 	  }
 	};
-	__decorate$17([postConstruct(), __metadata$L("design:type", Function), __metadata$L("design:paramtypes", []), __metadata$L("design:returntype", void 0)], DefaultMathPickerService.prototype, "init", null), DefaultMathPickerService = __decorate$17([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(MathPickerContribution)), __param$z(1, inject(VGlobal)), __param$z(2, inject(ContributionProvider)), __param$z(2, named(PickItemInterceptor)), __metadata$L("design:paramtypes", [Object, Object, Object])], DefaultMathPickerService);
+	__decorate$18([postConstruct(), __metadata$L("design:type", Function), __metadata$L("design:paramtypes", []), __metadata$L("design:returntype", void 0)], DefaultMathPickerService.prototype, "init", null), DefaultMathPickerService = __decorate$18([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(MathPickerContribution)), __param$z(1, inject(VGlobal)), __param$z(2, inject(ContributionProvider)), __param$z(2, named(PickItemInterceptor)), __metadata$L("design:paramtypes", [Object, Object, Object])], DefaultMathPickerService);
 
 	var pickModule = new ContainerModule(bind => {
-	  bind(DefaultCanvasPickerService).toSelf().inSingletonScope(), bind(DefaultMathPickerService).toSelf().inSingletonScope(), bind(PickerService).toService(DefaultCanvasPickerService), bind(DefaultGlobalPickerService).toSelf().inSingletonScope(), bind(GlobalPickerService).toService(DefaultGlobalPickerService), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bindContributionProvider(bind, PickItemInterceptor);
+	  bind(DefaultCanvasPickerService).toSelf().inSingletonScope(), bind(DefaultMathPickerService).toSelf().inSingletonScope(), bind(PickerService).toService(DefaultCanvasPickerService), bind(DefaultGlobalPickerService).toSelf().inSingletonScope(), bind(GlobalPickerService).toService(DefaultGlobalPickerService), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
 	});
 
 	var graphicModule = new ContainerModule(bind => {
@@ -25546,7 +25688,7 @@
 	const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
 	const PluginService = Symbol.for("PluginService");
 
-	var __decorate$16 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$17 = 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;
@@ -25593,13 +25735,13 @@
 	    }), this.onRegisterPlugin = [];
 	  }
 	};
-	DefaultPluginService = __decorate$16([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(AutoEnablePlugins)), __metadata$K("design:paramtypes", [Object])], DefaultPluginService);
+	DefaultPluginService = __decorate$17([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(AutoEnablePlugins)), __metadata$K("design:paramtypes", [Object])], DefaultPluginService);
 
 	var pluginModule = new ContainerModule(bind => {
 	  bind(DefaultPluginService).toSelf(), bind(PluginService).toService(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
 	});
 
-	var __decorate$15 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$16 = 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;
@@ -25672,9 +25814,9 @@
 	    };
 	  }
 	};
-	BaseEnvContribution = __decorate$15([injectable()], BaseEnvContribution);
+	BaseEnvContribution = __decorate$16([injectable()], BaseEnvContribution);
 
-	var __decorate$14 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$15 = 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;
@@ -25868,7 +26010,7 @@
 	    };
 	  }
 	};
-	BrowserEnvContribution = __decorate$14([injectable(), __metadata$J("design:paramtypes", [])], BrowserEnvContribution);
+	BrowserEnvContribution = __decorate$15([injectable(), __metadata$J("design:paramtypes", [])], BrowserEnvContribution);
 
 	function loadFeishuContributions() {
 	  container.rebind(PickerService).toService(DefaultMathPickerService);
@@ -25877,7 +26019,7 @@
 	  container.rebind(PickerService).toService(DefaultMathPickerService);
 	}
 
-	var __decorate$13 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$14 = 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;
@@ -25981,9 +26123,9 @@
 	    return (null === (_a = null == event ? void 0 : event.type) || void 0 === _a ? void 0 : _a.startsWith("mouse")) ? event : null;
 	  }
 	};
-	FeishuEnvContribution = __decorate$13([injectable(), __metadata$I("design:paramtypes", [])], FeishuEnvContribution);
+	FeishuEnvContribution = __decorate$14([injectable(), __metadata$I("design:paramtypes", [])], FeishuEnvContribution);
 
-	var __decorate$12 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$13 = 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;
@@ -26115,9 +26257,9 @@
 	  }
 	  release() {}
 	};
-	TaroEnvContribution = __decorate$12([injectable(), __metadata$H("design:paramtypes", [])], TaroEnvContribution);
+	TaroEnvContribution = __decorate$13([injectable(), __metadata$H("design:paramtypes", [])], TaroEnvContribution);
 
-	var __decorate$11 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$12 = 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;
@@ -26237,9 +26379,9 @@
 	  }
 	  release() {}
 	};
-	LynxEnvContribution = __decorate$11([injectable(), __metadata$G("design:paramtypes", [])], LynxEnvContribution);
+	LynxEnvContribution = __decorate$12([injectable(), __metadata$G("design:paramtypes", [])], LynxEnvContribution);
 
-	var __decorate$10 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$11 = 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;
@@ -26325,9 +26467,9 @@
 	  release() {}
 	  createOffscreenCanvas(params) {}
 	};
-	NodeEnvContribution = __decorate$10([injectable()], NodeEnvContribution);
+	NodeEnvContribution = __decorate$11([injectable()], NodeEnvContribution);
 
-	var __decorate$$ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$10 = 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;
@@ -26450,13 +26592,13 @@
 	    return (null === (_a = null == event ? void 0 : event.type) || void 0 === _a ? void 0 : _a.startsWith("mouse")) ? event : null;
 	  }
 	};
-	WxEnvContribution = __decorate$$([injectable(), __metadata$F("design:paramtypes", [])], WxEnvContribution);
+	WxEnvContribution = __decorate$10([injectable(), __metadata$F("design:paramtypes", [])], WxEnvContribution);
 
 	var envModules = new ContainerModule(bind => {
 	  bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution), bind(FeishuEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(FeishuEnvContribution), bind(TaroEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(TaroEnvContribution), bind(LynxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(LynxEnvContribution), bind(WxEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(WxEnvContribution), bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution), bindContributionProvider(bind, EnvContribution);
 	});
 
-	var __decorate$_ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$$ = 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;
@@ -26490,9 +26632,9 @@
 	    };
 	  }
 	};
-	BaseWindowHandlerContribution = __decorate$_([injectable(), __metadata$E("design:paramtypes", [])], BaseWindowHandlerContribution);
+	BaseWindowHandlerContribution = __decorate$$([injectable(), __metadata$E("design:paramtypes", [])], BaseWindowHandlerContribution);
 
-	var __decorate$Z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$_ = 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;
@@ -26546,7 +26688,7 @@
 	    this._canvasIsIntersecting = this.isElementVisible(this.canvas.nativeCanvas);
 	    const observer = new IntersectionObserver((entries, observer) => {
 	      entries.forEach(entry => {
-	        this._canvasIsIntersecting !== entry.isIntersecting ? (this._canvasIsIntersecting = entry.isIntersecting, this._onVisibleChangeCb(entry.isIntersecting)) : this._canvasIsIntersecting = entry.isIntersecting;
+	        this._canvasIsIntersecting !== entry.isIntersecting ? (this._canvasIsIntersecting = entry.isIntersecting, this._onVisibleChangeCb && this._onVisibleChangeCb(entry.isIntersecting)) : this._canvasIsIntersecting = entry.isIntersecting;
 	      });
 	    });
 	    observer && observer.observe(this.canvas.nativeCanvas);
@@ -26657,9 +26799,9 @@
 	    return this.global.getElementTopLeft(this.canvas.nativeCanvas, baseWindow);
 	  }
 	};
-	BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution = __decorate$Z([injectable(), __param$x(0, inject(VGlobal)), __metadata$D("design:paramtypes", [Object])], BrowserWindowHandlerContribution);
+	BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution = __decorate$_([injectable(), __param$x(0, inject(VGlobal)), __metadata$D("design:paramtypes", [Object])], BrowserWindowHandlerContribution);
 
-	var __decorate$Y = 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;
@@ -26704,9 +26846,9 @@
 	    return null;
 	  }
 	};
-	FeishuContext2d.env = "feishu", FeishuContext2d = __decorate$Y([injectable()], FeishuContext2d);
+	FeishuContext2d.env = "feishu", FeishuContext2d = __decorate$Z([injectable()], FeishuContext2d);
 
-	var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	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;
@@ -26811,9 +26953,9 @@
 	  }
 	  release() {}
 	};
-	FeishuCanvas.env = "feishu", FeishuCanvas = __decorate$X([injectable(), __metadata$C("design:paramtypes", [Object])], FeishuCanvas);
+	FeishuCanvas.env = "feishu", FeishuCanvas = __decorate$Y([injectable(), __metadata$C("design:paramtypes", [Object])], FeishuCanvas);
 
-	var __decorate$W = 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;
@@ -26958,9 +27100,9 @@
 	    context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
 	  }
 	};
-	FeishuWindowHandlerContribution.env = "feishu", FeishuWindowHandlerContribution = __decorate$W([injectable(), __param$w(0, inject(VGlobal)), __metadata$B("design:paramtypes", [Object])], FeishuWindowHandlerContribution);
+	FeishuWindowHandlerContribution.env = "feishu", FeishuWindowHandlerContribution = __decorate$X([injectable(), __param$w(0, inject(VGlobal)), __metadata$B("design:paramtypes", [Object])], FeishuWindowHandlerContribution);
 
-	var __decorate$V = 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;
@@ -27024,9 +27166,9 @@
 	    return null;
 	  }
 	};
-	TaroContext2d.env = "taro", TaroContext2d = __decorate$V([injectable()], TaroContext2d);
+	TaroContext2d.env = "taro", TaroContext2d = __decorate$W([injectable()], TaroContext2d);
 
-	var __decorate$U = 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;
@@ -27131,9 +27273,9 @@
 	  }
 	  release() {}
 	};
-	TaroCanvas.env = "taro", TaroCanvas = __decorate$U([injectable(), __metadata$A("design:paramtypes", [Object])], TaroCanvas);
+	TaroCanvas.env = "taro", TaroCanvas = __decorate$V([injectable(), __metadata$A("design:paramtypes", [Object])], TaroCanvas);
 
-	var __decorate$T = 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;
@@ -27288,9 +27430,9 @@
 	    context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
 	  }
 	};
-	TaroWindowHandlerContribution.env = "taro", TaroWindowHandlerContribution = __decorate$T([injectable(), __param$v(0, inject(VGlobal)), __metadata$z("design:paramtypes", [Object])], TaroWindowHandlerContribution);
+	TaroWindowHandlerContribution.env = "taro", TaroWindowHandlerContribution = __decorate$U([injectable(), __param$v(0, inject(VGlobal)), __metadata$z("design:paramtypes", [Object])], TaroWindowHandlerContribution);
 
-	var __decorate$S = 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;
@@ -27344,9 +27486,9 @@
 	    });
 	  }
 	};
-	LynxContext2d.env = "lynx", LynxContext2d = __decorate$S([injectable()], LynxContext2d);
+	LynxContext2d.env = "lynx", LynxContext2d = __decorate$T([injectable()], LynxContext2d);
 
-	var __decorate$R = 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;
@@ -27451,9 +27593,9 @@
 	  }
 	  release() {}
 	};
-	LynxCanvas.env = "lynx", LynxCanvas = __decorate$R([injectable(), __metadata$y("design:paramtypes", [Object])], LynxCanvas);
+	LynxCanvas.env = "lynx", LynxCanvas = __decorate$S([injectable(), __metadata$y("design:paramtypes", [Object])], LynxCanvas);
 
-	var __decorate$Q = 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;
@@ -27598,9 +27740,9 @@
 	    context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
 	  }
 	};
-	LynxWindowHandlerContribution.env = "lynx", LynxWindowHandlerContribution = __decorate$Q([injectable(), __param$u(0, inject(VGlobal)), __metadata$x("design:paramtypes", [Object])], LynxWindowHandlerContribution);
+	LynxWindowHandlerContribution.env = "lynx", LynxWindowHandlerContribution = __decorate$R([injectable(), __param$u(0, inject(VGlobal)), __metadata$x("design:paramtypes", [Object])], LynxWindowHandlerContribution);
 
-	var __decorate$P = 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;
@@ -27619,9 +27761,9 @@
 	  }
 	  release() {}
 	};
-	NodeContext2d.env = "node", NodeContext2d = __decorate$P([injectable(), __metadata$w("design:paramtypes", [Object, Number])], NodeContext2d);
+	NodeContext2d.env = "node", NodeContext2d = __decorate$Q([injectable(), __metadata$w("design:paramtypes", [Object, Number])], NodeContext2d);
 
-	var __decorate$O = 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;
@@ -27720,9 +27862,9 @@
 	    this._nativeCanvas.release && isFunction(this._nativeCanvas.release) && this._nativeCanvas.release();
 	  }
 	};
-	NodeCanvas.env = "node", NodeCanvas = __decorate$O([injectable(), __metadata$v("design:paramtypes", [Object])], NodeCanvas);
+	NodeCanvas.env = "node", NodeCanvas = __decorate$P([injectable(), __metadata$v("design:paramtypes", [Object])], NodeCanvas);
 
-	var __decorate$N = 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;
@@ -27823,9 +27965,9 @@
 	  }
 	  clearViewBox(vb, color) {}
 	};
-	NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$N([injectable(), __param$t(0, inject(VGlobal)), __metadata$u("design:paramtypes", [Object])], NodeWindowHandlerContribution);
+	NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$O([injectable(), __param$t(0, inject(VGlobal)), __metadata$u("design:paramtypes", [Object])], NodeWindowHandlerContribution);
 
-	var __decorate$M = 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;
@@ -27838,9 +27980,9 @@
 	    return null;
 	  }
 	};
-	WxContext2d.env = "wx", WxContext2d = __decorate$M([injectable()], WxContext2d);
+	WxContext2d.env = "wx", WxContext2d = __decorate$N([injectable()], WxContext2d);
 
-	var __decorate$L = 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;
@@ -27945,9 +28087,9 @@
 	  }
 	  release() {}
 	};
-	WxCanvas.env = "wx", WxCanvas = __decorate$L([injectable(), __metadata$t("design:paramtypes", [Object])], WxCanvas);
+	WxCanvas.env = "wx", WxCanvas = __decorate$M([injectable(), __metadata$t("design:paramtypes", [Object])], WxCanvas);
 
-	var __decorate$K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	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;
@@ -28093,7 +28235,7 @@
 	    context.nativeContext.save(), context.nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0), context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
 	  }
 	};
-	WxWindowHandlerContribution.env = "wx", WxWindowHandlerContribution = __decorate$K([injectable(), __param$s(0, inject(VGlobal)), __metadata$s("design:paramtypes", [Object])], WxWindowHandlerContribution);
+	WxWindowHandlerContribution.env = "wx", WxWindowHandlerContribution = __decorate$L([injectable(), __param$s(0, inject(VGlobal)), __metadata$s("design:paramtypes", [Object])], WxWindowHandlerContribution);
 
 	var windowModules = new ContainerModule(bind => {
 	  bind(BrowserWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(BrowserWindowHandlerContribution)).whenTargetNamed(BrowserWindowHandlerContribution.env), bind(FeishuWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(FeishuWindowHandlerContribution)).whenTargetNamed(FeishuWindowHandlerContribution.env), bind(TaroWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(TaroWindowHandlerContribution)).whenTargetNamed(TaroWindowHandlerContribution.env), bind(LynxWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(LynxWindowHandlerContribution)).whenTargetNamed(LynxWindowHandlerContribution.env), bind(WxWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(WxWindowHandlerContribution)).whenTargetNamed(WxWindowHandlerContribution.env), bind(NodeWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(NodeWindowHandlerContribution)).whenTargetNamed(NodeWindowHandlerContribution.env);
@@ -28103,7 +28245,7 @@
 	  bind(DefaultTextMeasureContribution).toSelf().inSingletonScope(), bind(TextMeasureContribution).toService(DefaultTextMeasureContribution), bindContributionProvider(bind, TextMeasureContribution);
 	});
 
-	var __decorate$J = 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;
@@ -28184,9 +28326,9 @@
 	    this.canvas.release();
 	  }
 	};
-	CanvasLayerHandlerContribution = __decorate$J([injectable(), __param$r(0, inject(VGlobal)), __metadata$r("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
+	CanvasLayerHandlerContribution = __decorate$K([injectable(), __param$r(0, inject(VGlobal)), __metadata$r("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
 
-	var __decorate$I = 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;
@@ -28260,7 +28402,7 @@
 	  }
 	  merge(layerHandlers) {}
 	};
-	OffscreenLayerHandlerContribution = __decorate$I([injectable(), __param$q(0, inject(VGlobal)), __metadata$q("design:paramtypes", [Object])], OffscreenLayerHandlerContribution);
+	OffscreenLayerHandlerContribution = __decorate$J([injectable(), __param$q(0, inject(VGlobal)), __metadata$q("design:paramtypes", [Object])], OffscreenLayerHandlerContribution);
 
 	var layerHandlerModules = new ContainerModule(bind => {
 	  bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(LayerHandlerContribution).toService(CanvasLayerHandlerContribution);
@@ -28270,7 +28412,7 @@
 	  container.load(envModules), container.load(windowModules), container.load(textMeasureModules), container.load(layerHandlerModules);
 	}
 
-	var __decorate$H = 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;
@@ -28284,6 +28426,12 @@
 	    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;
+	  }
+	  beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+	    return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+	  }
+	  drawItem(graphic, renderService, drawContext, drawContribution, params) {
 	    if (!graphic.shadowRoot) return !1;
 	    const {
 	      context: context
@@ -28296,7 +28444,7 @@
 	    return drawContribution.renderGroup(graphic.shadowRoot, drawContext), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
 	  }
 	};
-	ShadowRootDrawItemInterceptorContribution = __decorate$H([injectable()], ShadowRootDrawItemInterceptorContribution);
+	ShadowRootDrawItemInterceptorContribution = __decorate$I([injectable()], ShadowRootDrawItemInterceptorContribution);
 	let Canvas3DDrawItemInterceptor = class {
 	  constructor() {
 	    this.order = 1;
@@ -28369,9 +28517,9 @@
 	    context.setTransformForCurrent();
 	  }
 	};
-	Canvas3DDrawItemInterceptor = __decorate$H([injectable()], Canvas3DDrawItemInterceptor);
+	Canvas3DDrawItemInterceptor = __decorate$I([injectable()], Canvas3DDrawItemInterceptor);
 
-	var __decorate$G = 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;
@@ -28543,9 +28691,9 @@
 	  }
 	  afterDraw(renderService, drawParams) {}
 	};
-	__decorate$G([inject(VGlobal), __metadata$p("design:type", Object)], DefaultDrawContribution.prototype, "global", void 0), __decorate$G([postConstruct(), __metadata$p("design:type", Function), __metadata$p("design:paramtypes", []), __metadata$p("design:returntype", void 0)], DefaultDrawContribution.prototype, "init", null), DefaultDrawContribution = __decorate$G([injectable(), __param$p(0, multiInject(GraphicRender)), __param$p(1, inject(RenderSelector)), __param$p(2, inject(LayerService)), __param$p(3, inject(ContributionProvider)), __param$p(3, named(DrawItemInterceptor)), __metadata$p("design:paramtypes", [Array, Object, Object, Object])], DefaultDrawContribution);
+	__decorate$H([inject(VGlobal), __metadata$p("design:type", Object)], DefaultDrawContribution.prototype, "global", void 0), __decorate$H([postConstruct(), __metadata$p("design:type", Function), __metadata$p("design:paramtypes", []), __metadata$p("design:returntype", void 0)], DefaultDrawContribution.prototype, "init", null), DefaultDrawContribution = __decorate$H([injectable(), __param$p(0, multiInject(GraphicRender)), __param$p(1, inject(RenderSelector)), __param$p(2, inject(LayerService)), __param$p(3, inject(ContributionProvider)), __param$p(3, named(DrawItemInterceptor)), __metadata$p("design:paramtypes", [Array, Object, Object, Object])], DefaultDrawContribution);
 
-	var __decorate$F = 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;
@@ -28557,9 +28705,9 @@
 	    return null;
 	  }
 	};
-	DefaultRenderSelector = __decorate$F([injectable()], DefaultRenderSelector);
+	DefaultRenderSelector = __decorate$G([injectable()], DefaultRenderSelector);
 
-	var __decorate$E = 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;
@@ -28650,9 +28798,9 @@
 	    }) : clip ? context.restore() : context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasGroupRender = __decorate$E([injectable(), __param$o(0, inject(ContributionProvider)), __param$o(0, named(GroupRenderContribution)), __metadata$o("design:paramtypes", [Object])], DefaultCanvasGroupRender);
+	DefaultCanvasGroupRender = __decorate$F([injectable(), __param$o(0, inject(ContributionProvider)), __param$o(0, named(GroupRenderContribution)), __metadata$o("design:paramtypes", [Object])], DefaultCanvasGroupRender);
 
-	var __decorate$D = 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;
@@ -28703,9 +28851,9 @@
 	    }), context.setShadowStyle && context.setShadowStyle(line, attribute, defaultAttribute), context.setStrokeStyle(line, attribute, offsetX, offsetY, defaultAttribute), context.stroke());
 	  }
 	};
-	DefaultIncrementalCanvasLineRender = __decorate$D([injectable()], DefaultIncrementalCanvasLineRender);
+	DefaultIncrementalCanvasLineRender = __decorate$E([injectable()], DefaultIncrementalCanvasLineRender);
 
-	var __decorate$C = 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;
@@ -28748,10 +28896,10 @@
 	    }), context.setShadowStyle && context.setShadowStyle(area, attribute, defaultAttribute), context.setCommonStyle(area, attribute, offsetX, offsetY, defaultAttribute), context.fill());
 	  }
 	};
-	DefaultIncrementalCanvasAreaRender = __decorate$C([injectable()], DefaultIncrementalCanvasAreaRender);
+	DefaultIncrementalCanvasAreaRender = __decorate$D([injectable()], DefaultIncrementalCanvasAreaRender);
 
 	var STATUS,
-	  __decorate$B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	  __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;
@@ -28895,9 +29043,9 @@
 	    });
 	  }
 	};
-	__decorate$B([inject(VGlobal), __metadata$n("design:type", Object)], DefaultIncrementalDrawContribution.prototype, "global", void 0), DefaultIncrementalDrawContribution = __decorate$B([injectable(), __param$n(0, multiInject(GraphicRender)), __param$n(1, inject(RenderSelector)), __param$n(2, inject(DefaultIncrementalCanvasLineRender)), __param$n(3, inject(DefaultIncrementalCanvasAreaRender)), __param$n(4, inject(LayerService)), __param$n(5, inject(ContributionProvider)), __param$n(5, named(DrawItemInterceptor)), __metadata$n("design:paramtypes", [Array, Object, Object, Object, Object, Object])], DefaultIncrementalDrawContribution);
+	__decorate$C([inject(VGlobal), __metadata$n("design:type", Object)], DefaultIncrementalDrawContribution.prototype, "global", void 0), DefaultIncrementalDrawContribution = __decorate$C([injectable(), __param$n(0, multiInject(GraphicRender)), __param$n(1, inject(RenderSelector)), __param$n(2, inject(DefaultIncrementalCanvasLineRender)), __param$n(3, inject(DefaultIncrementalCanvasAreaRender)), __param$n(4, inject(LayerService)), __param$n(5, inject(ContributionProvider)), __param$n(5, named(DrawItemInterceptor)), __metadata$n("design:paramtypes", [Array, Object, Object, Object, Object, Object])], DefaultIncrementalDrawContribution);
 
-	var __decorate$A = 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;
@@ -29028,9 +29176,9 @@
 	    this.z = z, this.drawShape(rect, context, x, y, drawContext), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasRect3dRender = __decorate$A([injectable()], DefaultCanvasRect3dRender);
+	DefaultCanvasRect3dRender = __decorate$B([injectable()], DefaultCanvasRect3dRender);
 
-	var __decorate$z = 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;
@@ -29100,9 +29248,9 @@
 	    this.drawShape(richtext, context, x, y, drawContext), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasRichTextRender = __decorate$z([injectable()], DefaultCanvasRichTextRender);
+	DefaultCanvasRichTextRender = __decorate$A([injectable()], DefaultCanvasRichTextRender);
 
-	var __decorate$y = 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;
@@ -29134,9 +29282,9 @@
 	    }), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasGlyphRender = __decorate$y([injectable()], DefaultCanvasGlyphRender);
+	DefaultCanvasGlyphRender = __decorate$z([injectable()], DefaultCanvasGlyphRender);
 
-	var __decorate$x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	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;
@@ -29276,9 +29424,9 @@
 	    this.z = z, drawPathProxy(arc, context, x, y, drawContext, params) || (this.drawShape(arc, context, x, y, drawContext, params), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix), context.restore();
 	  }
 	};
-	DefaultCanvasArc3DRender = __decorate$x([injectable()], DefaultCanvasArc3DRender);
+	DefaultCanvasArc3DRender = __decorate$y([injectable()], DefaultCanvasArc3DRender);
 
-	var __decorate$w = 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;
@@ -29410,9 +29558,9 @@
 	    this.z = z, this.drawShape(pyramid3d, context, x, y, drawContext), this.z = 0, context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasPyramid3dRender = __decorate$w([injectable()], DefaultCanvasPyramid3dRender);
+	DefaultCanvasPyramid3dRender = __decorate$x([injectable()], DefaultCanvasPyramid3dRender);
 
-	var __decorate$v = 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;
@@ -29424,15 +29572,15 @@
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultPolygonBackgroundRenderContribution = __decorate$v([injectable()], DefaultPolygonBackgroundRenderContribution);
+	DefaultPolygonBackgroundRenderContribution = __decorate$w([injectable()], DefaultPolygonBackgroundRenderContribution);
 	let DefaultPolygonTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultPolygonTextureRenderContribution = __decorate$v([injectable()], DefaultPolygonTextureRenderContribution);
+	DefaultPolygonTextureRenderContribution = __decorate$w([injectable()], DefaultPolygonTextureRenderContribution);
 
-	var __decorate$u = 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;
@@ -29444,15 +29592,15 @@
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultPathBackgroundRenderContribution = __decorate$u([injectable()], DefaultPathBackgroundRenderContribution);
+	DefaultPathBackgroundRenderContribution = __decorate$v([injectable()], DefaultPathBackgroundRenderContribution);
 	let DefaultPathTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultPathTextureRenderContribution = __decorate$u([injectable()], DefaultPathTextureRenderContribution);
+	DefaultPathTextureRenderContribution = __decorate$v([injectable()], DefaultPathTextureRenderContribution);
 
-	var __decorate$t = 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;
@@ -29464,7 +29612,7 @@
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultAreaBackgroundRenderContribution = __decorate$t([injectable()], DefaultAreaBackgroundRenderContribution);
+	DefaultAreaBackgroundRenderContribution = __decorate$u([injectable()], DefaultAreaBackgroundRenderContribution);
 	let DefaultAreaTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
@@ -29511,7 +29659,7 @@
 	    pattern && (context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore());
 	  }
 	};
-	DefaultAreaTextureRenderContribution = __decorate$t([injectable()], DefaultAreaTextureRenderContribution);
+	DefaultAreaTextureRenderContribution = __decorate$u([injectable()], DefaultAreaTextureRenderContribution);
 
 	var renderModule = new ContainerModule(bind => {
 	  bind(DefaultDrawContribution).toSelf(), bind(DrawContribution).toService(DefaultDrawContribution), bind(DefaultIncrementalDrawContribution).toSelf(), bind(IncrementalDrawContribution).toService(DefaultIncrementalDrawContribution), bind(DefaultRenderSelector).toSelf(), bind(RenderSelector).toService(DefaultRenderSelector), bind(DefaultCanvasCircleRender).toSelf().inSingletonScope(), bind(CircleRender).to(DefaultCanvasCircleRender), bind(GraphicRender).to(DefaultCanvasCircleRender), bind(DefaultCircleRenderContribution).toSelf().inSingletonScope(), bind(DefaultCircleBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultCircleTextureRenderContribution).toSelf().inSingletonScope(), bind(CircleRenderContribution).toService(DefaultCircleRenderContribution), bind(CircleRenderContribution).toService(DefaultCircleBackgroundRenderContribution), bind(CircleRenderContribution).toService(DefaultCircleTextureRenderContribution), bindContributionProvider(bind, CircleRenderContribution), bind(DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(DefaultCanvasRectRender), bind(GraphicRender).to(DefaultCanvasRectRender), bind(DefaultCanvasRect3dRender).toSelf().inSingletonScope(), bind(Rect3DRender).toService(DefaultCanvasRect3dRender), bind(GraphicRender).toService(Rect3DRender), bind(DefaultRectRenderContribution).toSelf().inSingletonScope(), bind(DefaultRectBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultRectTextureRenderContribution).toSelf().inSingletonScope(), bind(SplitRectBeforeRenderContribution$1).toSelf().inSingletonScope(), bind(SplitRectAfterRenderContribution$1).toSelf().inSingletonScope(), bind(RectRenderContribution).toService(DefaultRectRenderContribution), bind(RectRenderContribution).toService(DefaultRectBackgroundRenderContribution), bind(RectRenderContribution).toService(DefaultRectTextureRenderContribution), bind(RectRenderContribution).toService(SplitRectBeforeRenderContribution$1), bind(RectRenderContribution).toService(SplitRectAfterRenderContribution$1), bindContributionProvider(bind, RectRenderContribution), bind(DefaultCanvasTextRender).toSelf().inSingletonScope(), bind(TextRender).to(DefaultCanvasTextRender), bind(GraphicRender).to(DefaultCanvasTextRender), bindContributionProvider(bind, TextRenderContribution), bind(DefaultCanvasPathRender).toSelf().inSingletonScope(), bind(PathRender).to(DefaultCanvasPathRender), bind(GraphicRender).to(DefaultCanvasPathRender), bind(DefaultPathBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultPathTextureRenderContribution).toSelf().inSingletonScope(), bind(PathRenderContribution).toService(DefaultPathBackgroundRenderContribution), bind(PathRenderContribution).toService(DefaultPathTextureRenderContribution), bindContributionProvider(bind, PathRenderContribution), bind(DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(DefaultCanvasSymbolRender), bind(GraphicRender).to(DefaultCanvasSymbolRender), bind(DefaultSymbolRenderContribution).toSelf().inSingletonScope(), bind(DefaultSymbolBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultSymbolTextureRenderContribution).toSelf().inSingletonScope(), bind(SymbolRenderContribution).toService(DefaultSymbolRenderContribution), bind(SymbolRenderContribution).toService(DefaultSymbolBackgroundRenderContribution), bind(SymbolRenderContribution).toService(DefaultSymbolTextureRenderContribution), bindContributionProvider(bind, SymbolRenderContribution), bind(DefaultCanvasArcRender).toSelf().inSingletonScope(), bind(ArcRender).to(DefaultCanvasArcRender), bind(GraphicRender).to(DefaultCanvasArcRender), bind(DefaultCanvasArc3DRender).toSelf().inSingletonScope(), bind(Arc3dRender).toService(DefaultCanvasArc3DRender), bind(GraphicRender).toService(Arc3dRender), bind(DefaultArcRenderContribution).toSelf().inSingletonScope(), bind(DefaultArcBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultArcTextureRenderContribution).toSelf().inSingletonScope(), bind(ArcRenderContribution).toService(DefaultArcRenderContribution), bind(ArcRenderContribution).toService(DefaultArcBackgroundRenderContribution), bind(ArcRenderContribution).toService(DefaultArcTextureRenderContribution), bindContributionProvider(bind, ArcRenderContribution), bind(DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(DefaultCanvasLineRender), bind(GraphicRender).to(DefaultCanvasLineRender), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope(), bind(DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(DefaultCanvasAreaRender), bind(GraphicRender).to(DefaultCanvasAreaRender), bind(DefaultAreaBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultAreaTextureRenderContribution).toSelf().inSingletonScope(), bind(AreaRenderContribution).toService(DefaultAreaBackgroundRenderContribution), bind(AreaRenderContribution).toService(DefaultAreaTextureRenderContribution), bindContributionProvider(bind, AreaRenderContribution), bind(DefaultCanvasGroupRender).toSelf().inSingletonScope(), bind(GroupRender).to(DefaultCanvasGroupRender), bind(GraphicRender).to(DefaultCanvasGroupRender), bind(DefaultGroupBackgroundRenderContribution).toSelf().inSingletonScope(), bind(GroupRenderContribution).toService(DefaultGroupBackgroundRenderContribution), bindContributionProvider(bind, GroupRenderContribution), bind(DefaultCanvasPolygonRender).toSelf().inSingletonScope(), bind(PolygonRender).to(DefaultCanvasPolygonRender), bind(GraphicRender).to(DefaultCanvasPolygonRender), bind(DefaultPolygonBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultPolygonTextureRenderContribution).toSelf().inSingletonScope(), bind(PolygonRenderContribution).toService(DefaultPolygonBackgroundRenderContribution), bind(PolygonRenderContribution).toService(DefaultPolygonTextureRenderContribution), bindContributionProvider(bind, PolygonRenderContribution), bind(DefaultCanvasGlyphRender).toSelf().inSingletonScope(), bind(GlyphRender).toService(DefaultCanvasGlyphRender), bind(GraphicRender).toService(GlyphRender), bind(DefaultCanvasImageRender).toSelf().inSingletonScope(), bind(ImageRender).toService(DefaultCanvasImageRender), bind(GraphicRender).toService(ImageRender), bind(DefaultImageBackgroundRenderContribution).toSelf().inSingletonScope(), bind(ImageRenderContribution).toService(DefaultImageBackgroundRenderContribution), bindContributionProvider(bind, ImageRenderContribution), bind(DefaultCanvasRichTextRender).toSelf().inSingletonScope(), bind(RichTextRender).toService(DefaultCanvasRichTextRender), bind(GraphicRender).toService(RichTextRender), bind(DefaultCanvasPyramid3dRender).toSelf().inSingletonScope(), bind(Pyramid3dRender).toService(DefaultCanvasPyramid3dRender), bind(GraphicRender).toService(Pyramid3dRender), bind(DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bind(TextRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(ArcRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(PathRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(SymbolRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(RectRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(ImageRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(CircleRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(AreaRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(ShadowRootDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(ShadowRootDrawItemInterceptorContribution), bind(Canvas3DDrawItemInterceptor).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(Canvas3DDrawItemInterceptor), bindContributionProvider(bind, DrawItemInterceptor);
@@ -29521,7 +29669,7 @@
 	  container.load(renderModule);
 	}
 
-	var __decorate$s = 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;
@@ -29564,9 +29712,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasCirclePicker = __decorate$s([injectable(), __param$m(0, inject(CircleRender)), __metadata$m("design:paramtypes", [Object])], DefaultCanvasCirclePicker);
+	DefaultCanvasCirclePicker = __decorate$t([injectable(), __param$m(0, inject(CircleRender)), __metadata$m("design:paramtypes", [Object])], DefaultCanvasCirclePicker);
 
-	var __decorate$r = 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;
@@ -29626,9 +29774,9 @@
 	    return pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasRectPicker = __decorate$r([injectable(), __param$l(0, inject(RectRender)), __metadata$l("design:paramtypes", [Object])], DefaultCanvasRectPicker);
+	DefaultCanvasRectPicker = __decorate$s([injectable(), __param$l(0, inject(RectRender)), __metadata$l("design:paramtypes", [Object])], DefaultCanvasRectPicker);
 
-	var __decorate$q = 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;
@@ -29672,9 +29820,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasArcPicker = __decorate$q([injectable(), __param$k(0, inject(ArcRender)), __metadata$k("design:paramtypes", [Object])], DefaultCanvasArcPicker);
+	DefaultCanvasArcPicker = __decorate$r([injectable(), __param$k(0, inject(ArcRender)), __metadata$k("design:paramtypes", [Object])], DefaultCanvasArcPicker);
 
-	var __decorate$p = 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;
@@ -29713,9 +29861,9 @@
 	    return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(point.x, point.y), picked)), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasAreaPicker = __decorate$p([injectable(), __param$j(0, inject(AreaRender)), __metadata$j("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
+	DefaultCanvasAreaPicker = __decorate$q([injectable(), __param$j(0, inject(AreaRender)), __metadata$j("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
 
-	var __decorate$o = 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;
@@ -29733,9 +29881,9 @@
 	    return !!pickContext && !!image.AABBBounds.containsPoint(point);
 	  }
 	};
-	DefaultCanvasImagePicker = __decorate$o([injectable()], DefaultCanvasImagePicker);
+	DefaultCanvasImagePicker = __decorate$p([injectable()], DefaultCanvasImagePicker);
 
-	var __decorate$n = 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;
@@ -29743,9 +29891,9 @@
 	  return c > 3 && r && Object.defineProperty(target, key, r), r;
 	};
 	let BasePicker = class extends BaseRender {};
-	BasePicker = __decorate$n([injectable()], BasePicker);
+	BasePicker = __decorate$o([injectable()], BasePicker);
 
-	var __decorate$m = 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;
@@ -29795,9 +29943,9 @@
 	    }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasLinePicker = __decorate$m([injectable(), __param$i(0, inject(LineRender)), __metadata$i("design:paramtypes", [Object])], DefaultCanvasLinePicker);
+	DefaultCanvasLinePicker = __decorate$n([injectable(), __param$i(0, inject(LineRender)), __metadata$i("design:paramtypes", [Object])], DefaultCanvasLinePicker);
 
-	var __decorate$l = 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;
@@ -29847,9 +29995,9 @@
 	    }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasPathPicker = __decorate$l([injectable(), __param$h(0, inject(PathRender)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasPathPicker);
+	DefaultCanvasPathPicker = __decorate$m([injectable(), __param$h(0, inject(PathRender)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasPathPicker);
 
-	var __decorate$k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	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;
@@ -29903,9 +30051,9 @@
 	    }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasSymbolPicker = __decorate$k([injectable(), __param$g(0, inject(SymbolRender)), __metadata$g("design:paramtypes", [Object])], DefaultCanvasSymbolPicker);
+	DefaultCanvasSymbolPicker = __decorate$l([injectable(), __param$g(0, inject(SymbolRender)), __metadata$g("design:paramtypes", [Object])], DefaultCanvasSymbolPicker);
 
-	var __decorate$j = 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;
@@ -29968,9 +30116,9 @@
 	    }, (context, symbolAttribute, themeAttribute) => picked), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasTextPicker = __decorate$j([injectable(), __param$f(0, inject(TextRender)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasTextPicker);
+	DefaultCanvasTextPicker = __decorate$k([injectable(), __param$f(0, inject(TextRender)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasTextPicker);
 
-	var __decorate$i = 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;
@@ -30012,9 +30160,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasPolygonPicker = __decorate$i([injectable(), __param$e(0, inject(PolygonRender)), __metadata$e("design:paramtypes", [Object])], DefaultCanvasPolygonPicker);
+	DefaultCanvasPolygonPicker = __decorate$j([injectable(), __param$e(0, inject(PolygonRender)), __metadata$e("design:paramtypes", [Object])], DefaultCanvasPolygonPicker);
 
-	var __decorate$h = 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;
@@ -30038,9 +30186,9 @@
 	    return !!richtext.AABBBounds.containsPoint(point);
 	  }
 	};
-	DefaultCanvasRichTextPicker = __decorate$h([injectable(), __param$d(0, inject(RichTextRender)), __metadata$d("design:paramtypes", [Object])], DefaultCanvasRichTextPicker);
+	DefaultCanvasRichTextPicker = __decorate$i([injectable(), __param$d(0, inject(RichTextRender)), __metadata$d("design:paramtypes", [Object])], DefaultCanvasRichTextPicker);
 
-	var __decorate$g = 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;
@@ -30070,15 +30218,15 @@
 	    if (pickerService) {
 	      let picked = !1;
 	      return glyph.getSubGraphic().forEach(g => {
-	        picked || (picked = !!pickerService.pickItem(g, point, params));
+	        picked || (picked = !!pickerService.pickItem(g, point, null, params));
 	      }), picked;
 	    }
 	    return !1;
 	  }
 	};
-	DefaultCanvasGlyphPicker = __decorate$g([injectable(), __param$c(0, inject(GlyphRender)), __metadata$c("design:paramtypes", [Object])], DefaultCanvasGlyphPicker);
+	DefaultCanvasGlyphPicker = __decorate$h([injectable(), __param$c(0, inject(GlyphRender)), __metadata$c("design:paramtypes", [Object])], DefaultCanvasGlyphPicker);
 
-	var __decorate$f = 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;
@@ -30123,9 +30271,9 @@
 	    return this.canvasRenderer.drawShape(rect, 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;
 	  }
 	};
-	DefaultCanvasRect3dPicker = __decorate$f([injectable(), __param$b(0, inject(Rect3DRender)), __metadata$b("design:paramtypes", [Object])], DefaultCanvasRect3dPicker);
+	DefaultCanvasRect3dPicker = __decorate$g([injectable(), __param$b(0, inject(Rect3DRender)), __metadata$b("design:paramtypes", [Object])], DefaultCanvasRect3dPicker);
 
-	var __decorate$e = 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;
@@ -30170,9 +30318,9 @@
 	    return this.canvasRenderer.drawShape(pyramid3d, pickContext, x, y, {}, null, (context, pyramid3dAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked), (context, pyramid3dAttribute, themeAttribute) => !1), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasPyramid3dPicker = __decorate$e([injectable(), __param$a(0, inject(Pyramid3dRender)), __metadata$a("design:paramtypes", [Object])], DefaultCanvasPyramid3dPicker);
+	DefaultCanvasPyramid3dPicker = __decorate$f([injectable(), __param$a(0, inject(Pyramid3dRender)), __metadata$a("design:paramtypes", [Object])], DefaultCanvasPyramid3dPicker);
 
-	var __decorate$d = 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;
@@ -30217,10 +30365,27 @@
 	    return this.canvasRenderer.drawShape(arc3d, 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;
 	  }
 	};
-	DefaultCanvasArc3dPicker = __decorate$d([injectable(), __param$9(0, inject(Arc3dRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasArc3dPicker);
+	DefaultCanvasArc3dPicker = __decorate$e([injectable(), __param$9(0, inject(Arc3dRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasArc3dPicker);
+
+	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;
+	  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 DefaultCanvasGroupPicker = class {
+	  constructor() {
+	    this.type = "group", this.numberType = GROUP_NUMBER_TYPE;
+	  }
+	  contains(group, point, params) {
+	    return !1;
+	  }
+	};
+	DefaultCanvasGroupPicker = __decorate$d([injectable()], DefaultCanvasGroupPicker);
 
 	var canvasPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-	  bind(DefaultCanvasCirclePicker).toSelf().inSingletonScope(), bind(CanvasCirclePicker).toService(DefaultCanvasCirclePicker), bind(CanvasPickerContribution).toService(CanvasCirclePicker), bind(DefaultCanvasRectPicker).toSelf().inSingletonScope(), bind(CanvasRectPicker).toService(DefaultCanvasRectPicker), bind(CanvasPickerContribution).toService(CanvasRectPicker), bind(DefaultCanvasRect3dPicker).toSelf().inSingletonScope(), bind(CanvasRect3dPicker).toService(DefaultCanvasRect3dPicker), bind(CanvasPickerContribution).toService(CanvasRect3dPicker), bind(DefaultCanvasArcPicker).toSelf().inSingletonScope(), bind(CanvasArcPicker).toService(DefaultCanvasArcPicker), bind(CanvasPickerContribution).toService(CanvasArcPicker), bind(DefaultCanvasAreaPicker).toSelf().inSingletonScope(), bind(CanvasAreaPicker).toService(DefaultCanvasAreaPicker), bind(CanvasPickerContribution).toService(CanvasAreaPicker), bind(DefaultCanvasImagePicker).toSelf().inSingletonScope(), bind(CanvasImagePicker).toService(DefaultCanvasImagePicker), bind(CanvasPickerContribution).toService(CanvasImagePicker), bind(DefaultCanvasLinePicker).toSelf().inSingletonScope(), bind(CanvasLinePicker).toService(DefaultCanvasLinePicker), bind(CanvasPickerContribution).toService(CanvasLinePicker), bind(DefaultCanvasPathPicker).toSelf().inSingletonScope(), bind(CanvasPathPicker).toService(DefaultCanvasPathPicker), bind(CanvasPickerContribution).toService(CanvasPathPicker), bind(DefaultCanvasSymbolPicker).toSelf().inSingletonScope(), bind(CanvasSymbolPicker).toService(DefaultCanvasSymbolPicker), bind(CanvasPickerContribution).toService(CanvasSymbolPicker), bind(DefaultCanvasTextPicker).toSelf().inSingletonScope(), bind(CanvasTextPicker).toService(DefaultCanvasTextPicker), bind(CanvasPickerContribution).toService(CanvasTextPicker), bind(DefaultCanvasPolygonPicker).toSelf().inSingletonScope(), bind(CanvasPolygonPicker).toService(DefaultCanvasPolygonPicker), bind(CanvasPickerContribution).toService(CanvasPolygonPicker), bind(DefaultCanvasPyramid3dPicker).toSelf().inSingletonScope(), bind(CanvasPyramid3dPicker).toService(DefaultCanvasPyramid3dPicker), bind(CanvasPickerContribution).toService(CanvasPyramid3dPicker), bind(DefaultCanvasArc3dPicker).toSelf().inSingletonScope(), bind(CanvasArc3dPicker).toService(DefaultCanvasArc3dPicker), bind(CanvasPickerContribution).toService(CanvasArc3dPicker), bind(DefaultCanvasRichTextPicker).toSelf().inSingletonScope(), bind(CanvasRichTextPicker).toService(DefaultCanvasRichTextPicker), bind(CanvasPickerContribution).toService(CanvasRichTextPicker), bind(DefaultCanvasGlyphPicker).toSelf().inSingletonScope(), bind(CanvasGlyphPicker).toService(DefaultCanvasGlyphPicker), bind(CanvasPickerContribution).toService(CanvasGlyphPicker), bindContributionProvider(bind, CanvasPickerContribution);
+	  bind(DefaultCanvasCirclePicker).toSelf().inSingletonScope(), bind(CanvasCirclePicker).toService(DefaultCanvasCirclePicker), bind(CanvasPickerContribution).toService(CanvasCirclePicker), bind(DefaultCanvasRectPicker).toSelf().inSingletonScope(), bind(CanvasRectPicker).toService(DefaultCanvasRectPicker), bind(CanvasPickerContribution).toService(CanvasRectPicker), bind(DefaultCanvasRect3dPicker).toSelf().inSingletonScope(), bind(CanvasRect3dPicker).toService(DefaultCanvasRect3dPicker), bind(CanvasPickerContribution).toService(CanvasRect3dPicker), bind(DefaultCanvasArcPicker).toSelf().inSingletonScope(), bind(CanvasArcPicker).toService(DefaultCanvasArcPicker), bind(CanvasPickerContribution).toService(CanvasArcPicker), bind(DefaultCanvasAreaPicker).toSelf().inSingletonScope(), bind(CanvasAreaPicker).toService(DefaultCanvasAreaPicker), bind(CanvasPickerContribution).toService(CanvasAreaPicker), bind(DefaultCanvasImagePicker).toSelf().inSingletonScope(), bind(CanvasImagePicker).toService(DefaultCanvasImagePicker), bind(CanvasPickerContribution).toService(CanvasImagePicker), bind(DefaultCanvasLinePicker).toSelf().inSingletonScope(), bind(CanvasLinePicker).toService(DefaultCanvasLinePicker), bind(CanvasPickerContribution).toService(CanvasLinePicker), bind(DefaultCanvasPathPicker).toSelf().inSingletonScope(), bind(CanvasPathPicker).toService(DefaultCanvasPathPicker), bind(CanvasPickerContribution).toService(CanvasPathPicker), bind(DefaultCanvasSymbolPicker).toSelf().inSingletonScope(), bind(CanvasSymbolPicker).toService(DefaultCanvasSymbolPicker), bind(CanvasPickerContribution).toService(CanvasSymbolPicker), bind(DefaultCanvasTextPicker).toSelf().inSingletonScope(), bind(CanvasTextPicker).toService(DefaultCanvasTextPicker), bind(CanvasPickerContribution).toService(CanvasTextPicker), bind(DefaultCanvasPolygonPicker).toSelf().inSingletonScope(), bind(CanvasPolygonPicker).toService(DefaultCanvasPolygonPicker), bind(CanvasPickerContribution).toService(CanvasPolygonPicker), bind(DefaultCanvasPyramid3dPicker).toSelf().inSingletonScope(), bind(CanvasPyramid3dPicker).toService(DefaultCanvasPyramid3dPicker), bind(CanvasPickerContribution).toService(CanvasPyramid3dPicker), bind(DefaultCanvasArc3dPicker).toSelf().inSingletonScope(), bind(CanvasArc3dPicker).toService(DefaultCanvasArc3dPicker), bind(CanvasPickerContribution).toService(CanvasArc3dPicker), bind(DefaultCanvasRichTextPicker).toSelf().inSingletonScope(), bind(CanvasRichTextPicker).toService(DefaultCanvasRichTextPicker), bind(CanvasPickerContribution).toService(CanvasRichTextPicker), bind(DefaultCanvasGlyphPicker).toSelf().inSingletonScope(), bind(CanvasGlyphPicker).toService(DefaultCanvasGlyphPicker), bind(CanvasPickerContribution).toService(CanvasGlyphPicker), bind(DefaultCanvasGroupPicker).toSelf().inSingletonScope(), bind(CanvasGroupPicker).toService(DefaultCanvasGroupPicker), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution);
 	});
 
 	var __decorate$c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -30643,7 +30808,7 @@
 	    if (pickerService) {
 	      let picked = !1;
 	      return glyph.getSubGraphic().forEach(g => {
-	        picked || (picked = !!pickerService.pickItem(g, point, params));
+	        picked || (picked = !!pickerService.pickItem(g, point, null, params));
 	      }), picked;
 	    }
 	    return !1;
@@ -30810,7 +30975,7 @@
 	  }
 	  renderGroupHTML(group) {
 	    this.renderGraphicHTML(group), group.forEachChildren(g => {
-	      this.renderGraphicHTML(g);
+	      g.isContainer ? this.renderGroupHTML(g) : this.renderGraphicHTML(g);
 	    });
 	  }
 	  renderGraphicHTML(graphic) {
@@ -31573,7 +31738,7 @@
 	    });
 	  }
 	  setAttribute(key, value, forceUpdateTag) {
-	    isPlainObject(this.attribute[key]) ? merge$2(this.attribute[key], value) : this.attribute[key] = value, GROUP_ATTRIBUTES.includes(key) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
+	    !isPlainObject(this.attribute[key]) || isFunction(this.attribute[key]) || isFunction(value) ? this.attribute[key] = value : merge$2(this.attribute[key], value), GROUP_ATTRIBUTES.includes(key) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
 	  }
 	  setAttributes(params, forceUpdateTag) {
 	    const keys = Object.keys(params);
@@ -31583,7 +31748,7 @@
 	    isNil(keys) && (keys = Object.keys(params));
 	    for (let i = 0; i < keys.length; i++) {
 	      const key = keys[i];
-	      isPlainObject(this.attribute[key]) ? merge$2(this.attribute[key], params[key]) : this.attribute[key] = params[key];
+	      !isPlainObject(this.attribute[key]) || isFunction(this.attribute[key]) || isFunction(params[key]) ? this.attribute[key] = params[key] : merge$2(this.attribute[key], params[key]);
 	    }
 	  }
 	  bindEvents() {}
@@ -32383,61 +32548,60 @@
 	}
 
 	class Segment extends AbstractComponent {
+	  getStartAngle() {
+	    return this._startAngle;
+	  }
+	  getEndAngle() {
+	    return this._endAngle;
+	  }
+	  getMainSegmentPoints() {
+	    return this._mainSegmentPoints;
+	  }
 	  constructor(attributes) {
 	    super(merge$2({}, Segment.defaultAttributes, attributes)), this.name = "segment";
 	  }
-	  computeLineAngle() {
-	    const {
-	        points: points
-	      } = this.attribute,
-	      start = points[0],
-	      startInside = points[1],
-	      endInside = points[points.length - 2],
-	      end = points[points.length - 1],
-	      startVector = [start.x - startInside.x, start.y - startInside.y],
-	      startAngle = Math.atan2(startVector[1], startVector[0]),
-	      endVector = [end.x - endInside.x, end.y - endInside.y],
-	      endAngle = Math.atan2(endVector[1], endVector[0]);
-	    this._startAngle = startAngle, this._endAngle = endAngle;
-	  }
 	  render() {
-	    this.removeAllChild();
+	    this.removeAllChild(), this._reset();
 	    const {
-	      points: points,
 	      startSymbol: startSymbol,
 	      endSymbol: endSymbol,
 	      lineStyle: lineStyle,
 	      state: state,
-	      visible = !0
+	      visible = !0,
+	      multiSegment: multiSegment,
+	      mainSegmentIndex: mainSegmentIndex
 	    } = this.attribute;
 	    if (!visible) return;
-	    points.length > 1 && this.computeLineAngle();
-	    const startSymbolShape = this.renderSymbol(startSymbol, "start"),
-	      endSymbolShape = this.renderSymbol(endSymbol, "end");
-	    this.startSymbol = startSymbolShape, this.endSymbol = endSymbolShape;
-	    let pointsAfterClip = points;
-	    if (null == startSymbol ? void 0 : startSymbol.visible) {
-	      const startSize = (null == startSymbol ? void 0 : startSymbol.clip) ? (null == startSymbol ? void 0 : startSymbol.size) || 10 : 0;
-	      pointsAfterClip = [{
-	        x: points[0].x - startSize / 2 * (Math.cos(this._startAngle) || 0),
-	        y: points[0].y - startSize / 2 * (Math.sin(this._startAngle) || 0)
-	      }, ...pointsAfterClip.slice(1)];
-	    }
-	    if (null == endSymbol ? void 0 : endSymbol.visible) {
-	      const endSize = (null == endSymbol ? void 0 : endSymbol.clip) ? (null == endSymbol ? void 0 : endSymbol.size) || 10 : 0,
-	        pointsEnd = {
-	          x: points[points.length - 1].x - endSize / 2 * (Math.cos(this._endAngle) || 0),
-	          y: points[points.length - 1].y - endSize / 2 * (Math.sin(this._endAngle) || 0)
-	        };
-	      pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];
+	    this._computeLineAngle();
+	    const startSymbolShape = this._renderSymbol(startSymbol, "start"),
+	      endSymbolShape = this._renderSymbol(endSymbol, "end");
+	    if (this.startSymbol = startSymbolShape, this.endSymbol = endSymbolShape, multiSegment) {
+	      const points = [...this.attribute.points];
+	      if (isValidNumber(mainSegmentIndex)) points[mainSegmentIndex] = this._clipPoints(points[mainSegmentIndex]);else {
+	        const clipPoints = this._clipPoints(flattenArray(points));
+	        points[0][0] = clipPoints[0], points[points.length - 1][points[points.length - 1].length - 1] = clipPoints[clipPoints.length - 1];
+	      }
+	      points.forEach((point, index) => {
+	        var _a, _b;
+	        const line = createLine(Object.assign(Object.assign({
+	          points: point
+	        }, isArray(lineStyle) ? null !== (_a = lineStyle[index]) && void 0 !== _a ? _a : lineStyle[lineStyle.length - 1] : lineStyle), {
+	          fill: !1
+	        }));
+	        line.name = `${this.name}-line`, line.id = this._getNodeId("line" + index), isEmpty(null == state ? void 0 : state.line) || (line.states = isArray(state.line) ? null !== (_b = state.line[index]) && void 0 !== _b ? _b : state.line[state.line.length - 1] : state.line), this.add(line);
+	      });
+	    } else {
+	      const line = createLine(Object.assign(Object.assign({
+	        points: this._clipPoints(this.attribute.points)
+	      }, array$1(lineStyle)[0]), {
+	        fill: !1
+	      }));
+	      line.name = `${this.name}-line`, line.id = this._getNodeId("line"), isEmpty(null == state ? void 0 : state.line) || (line.states = [].concat(state.line)[0]), this.add(line);
 	    }
-	    const line = createLine(Object.assign({
-	      points: pointsAfterClip,
-	      fill: !1
-	    }, lineStyle));
-	    line.name = "line", line.id = this._getNodeId("line"), isEmpty(null == state ? void 0 : state.line) || (line.states = state.line), this.line = line, this.add(line);
 	  }
-	  renderSymbol(attribute, dim) {
+	  _renderSymbol(attribute, dim) {
+	    const points = this._getMainSegmentPoints();
+	    if (!points.length) return;
 	    const {
 	      autoRotate = !0
 	    } = attribute;
@@ -32446,7 +32610,6 @@
 	      const startAngle = this._startAngle,
 	        endAngle = this._endAngle,
 	        {
-	          points: points,
 	          state: state
 	        } = this.attribute,
 	        start = points[0],
@@ -32461,25 +32624,68 @@
 	        } = attribute;
 	      let position, rotate;
 	      "start" === dim ? (position = {
-	        x: start.x + (startAngle ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),
-	        y: start.y + (startAngle ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)
+	        x: start.x + (isValidNumber(startAngle) ? refX * Math.cos(startAngle) + refY * Math.cos(startAngle - Math.PI / 2) : 0),
+	        y: start.y + (isValidNumber(startAngle) ? refX * Math.sin(startAngle) + refY * Math.sin(startAngle - Math.PI / 2) : 0)
 	      }, rotate = startAngle + Math.PI / 2) : (position = {
-	        x: end.x + (endAngle ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
-	        y: end.y + (endAngle ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
+	        x: end.x + (isValidNumber(endAngle) ? refX * Math.cos(endAngle) + refY * Math.cos(endAngle - Math.PI / 2) : 0),
+	        y: end.y + (isValidNumber(endAngle) ? refX * Math.sin(endAngle) + refY * Math.sin(endAngle - Math.PI / 2) : 0)
 	      }, rotate = endAngle + Math.PI / 2), symbol = createSymbol(Object.assign(Object.assign(Object.assign({}, position), {
 	        symbolType: symbolType,
 	        size: size,
 	        angle: autoRotate ? rotate + refAngle : 0,
 	        strokeBoundsBuffer: 0
-	      }), style)), symbol.name = `${dim}-symbol`, symbol.id = this._getNodeId(`${dim}-symbol`), isEmpty(null == state ? void 0 : state.symbol) || (symbol.states = state.symbol), this.add(symbol);
+	      }), style)), symbol.name = `${this.name}-${dim}-symbol`, symbol.id = this._getNodeId(`${dim}-symbol`), isEmpty(null == state ? void 0 : state.symbol) || (symbol.states = state.symbol), this.add(symbol);
 	    }
 	    return symbol;
 	  }
-	  getStartAngle() {
-	    return this._startAngle;
+	  _getMainSegmentPoints() {
+	    if (this._mainSegmentPoints) return this._mainSegmentPoints;
+	    const {
+	      points: originPoints,
+	      multiSegment: multiSegment,
+	      mainSegmentIndex: mainSegmentIndex
+	    } = this.attribute;
+	    let points;
+	    return points = multiSegment ? isValidNumber(mainSegmentIndex) ? originPoints[mainSegmentIndex] : flattenArray(originPoints) : originPoints, this._mainSegmentPoints = points, points;
 	  }
-	  getEndAngle() {
-	    return this._endAngle;
+	  _clipPoints(points) {
+	    const {
+	      startSymbol: startSymbol,
+	      endSymbol: endSymbol
+	    } = this.attribute;
+	    let pointsAfterClip = points;
+	    if (null == startSymbol ? void 0 : startSymbol.visible) {
+	      const startSize = (null == startSymbol ? void 0 : startSymbol.clip) ? (null == startSymbol ? void 0 : startSymbol.size) || 10 : 0;
+	      pointsAfterClip = [{
+	        x: points[0].x - startSize / 2 * (Math.cos(this._startAngle) || 0),
+	        y: points[0].y - startSize / 2 * (Math.sin(this._startAngle) || 0)
+	      }, ...pointsAfterClip.slice(1)];
+	    }
+	    if (null == endSymbol ? void 0 : endSymbol.visible) {
+	      const endSize = (null == endSymbol ? void 0 : endSymbol.clip) ? (null == endSymbol ? void 0 : endSymbol.size) || 10 : 0,
+	        pointsEnd = {
+	          x: points[points.length - 1].x - endSize / 2 * (Math.cos(this._endAngle) || 0),
+	          y: points[points.length - 1].y - endSize / 2 * (Math.sin(this._endAngle) || 0)
+	        };
+	      pointsAfterClip = [...pointsAfterClip.slice(0, pointsAfterClip.length - 1), pointsEnd];
+	    }
+	    return pointsAfterClip;
+	  }
+	  _computeLineAngle() {
+	    const points = this._getMainSegmentPoints();
+	    if (points.length <= 1) return;
+	    const start = points[0],
+	      startInside = points[1],
+	      endInside = points[points.length - 2],
+	      end = points[points.length - 1],
+	      startVector = [start.x - startInside.x, start.y - startInside.y],
+	      startAngle = Math.atan2(startVector[1], startVector[0]),
+	      endVector = [end.x - endInside.x, end.y - endInside.y],
+	      endAngle = Math.atan2(endVector[1], endVector[0]);
+	    this._startAngle = startAngle, this._endAngle = endAngle;
+	  }
+	  _reset() {
+	    this.startSymbol = null, this.endSymbol = null, this._startAngle = null, this._endAngle = null, this._mainSegmentPoints = null;
 	  }
 	}
 	Segment.defaultAttributes = {
@@ -33305,7 +33511,7 @@
 	    const {
 	      flush = !1
 	    } = this.attribute.label || {};
-	    if (flush) {
+	    if (flush && labelShapes.length) {
 	      const {
 	          orient: orient,
 	          start: start,
@@ -33490,7 +33696,8 @@
 	        const changeEvent = new CustomEvent("toPrev", {
 	          current: this._current,
 	          total: this._total,
-	          direction: "pre"
+	          direction: "pre",
+	          event: e
 	        });
 	        changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, this.dispatchEvent(changeEvent);
 	      }
@@ -33500,7 +33707,8 @@
 	        const changeEvent = new CustomEvent("toNext", {
 	          current: this._current,
 	          total: this._total,
-	          direction: "next"
+	          direction: "next",
+	          event: e
 	        });
 	        changeEvent.manager = null === (_b = this.stage) || void 0 === _b ? void 0 : _b.eventSystem.manager, this.dispatchEvent(changeEvent);
 	      }
@@ -33696,9 +33904,9 @@
 	      const target = e.target;
 	      if (null === (_a = null == target ? void 0 : target.name) || void 0 === _a ? void 0 : _a.startsWith(LEGEND_ELEMENT_NAME.item)) {
 	        const legendItem = target.delegate;
-	        legendItem.hasState(LegendStateValue.selected) ? this._setLegendItemState(legendItem, LegendStateValue.selectedHover) : this._setLegendItemState(legendItem, LegendStateValue.unSelectedHover);
+	        legendItem.hasState(LegendStateValue.selected) ? this._setLegendItemState(legendItem, LegendStateValue.selectedHover, e) : this._setLegendItemState(legendItem, LegendStateValue.unSelectedHover, e);
 	        const focusButton = legendItem.getChildren()[0].find(node => node.name === LEGEND_ELEMENT_NAME.focus, !1);
-	        focusButton && focusButton.setAttribute("visible", !0), this._dispatchEvent(LegendEvent.legendItemHover, legendItem);
+	        focusButton && focusButton.setAttribute("visible", !0), this._dispatchEvent(LegendEvent.legendItemHover, legendItem, e);
 	      }
 	    }, this._onUnHover = e => {
 	      var _a;
@@ -33710,7 +33918,7 @@
 	          attributeUpdate || !child.hasState(LegendStateValue.unSelectedHover) && !child.hasState(LegendStateValue.selectedHover) || (attributeUpdate = !0), child.removeState(LegendStateValue.unSelectedHover), child.removeState(LegendStateValue.selectedHover);
 	        });
 	        const focusButton = legendItem.getChildren()[0].find(node => node.name === LEGEND_ELEMENT_NAME.focus, !1);
-	        focusButton && focusButton.setAttribute("visible", !1), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem), this._dispatchEvent(LegendEvent.legendItemUnHover, legendItem);
+	        focusButton && focusButton.setAttribute("visible", !1), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem, e), this._dispatchEvent(LegendEvent.legendItemUnHover, legendItem, e);
 	      }
 	    }, this._onClick = e => {
 	      var _a, _b, _c, _d, _e;
@@ -33720,9 +33928,9 @@
 	        if (target.name === LEGEND_ELEMENT_NAME.focus) {
 	          const isFocusSelected = legendItem.hasState(LegendStateValue.focus);
 	          legendItem.toggleState(LegendStateValue.focus), isFocusSelected ? null === (_b = this._itemsContainer) || void 0 === _b || _b.getChildren().forEach(item => {
-	            this._removeLegendItemState(item, [LegendStateValue.unSelected, LegendStateValue.unSelectedHover, LegendStateValue.focus]), this._setLegendItemState(item, LegendStateValue.selected);
-	          }) : (this._setLegendItemState(legendItem, LegendStateValue.selected), this._removeLegendItemState(legendItem, [LegendStateValue.unSelected, LegendStateValue.unSelectedHover]), null === (_c = this._itemsContainer) || void 0 === _c || _c.getChildren().forEach(item => {
-	            legendItem !== item && (this._removeLegendItemState(item, [LegendStateValue.selected, LegendStateValue.selectedHover, LegendStateValue.focus]), this._setLegendItemState(item, LegendStateValue.unSelected));
+	            this._removeLegendItemState(item, [LegendStateValue.unSelected, LegendStateValue.unSelectedHover, LegendStateValue.focus], e), this._setLegendItemState(item, LegendStateValue.selected, e);
+	          }) : (this._setLegendItemState(legendItem, LegendStateValue.selected, e), this._removeLegendItemState(legendItem, [LegendStateValue.unSelected, LegendStateValue.unSelectedHover], e), null === (_c = this._itemsContainer) || void 0 === _c || _c.getChildren().forEach(item => {
+	            legendItem !== item && (this._removeLegendItemState(item, [LegendStateValue.selected, LegendStateValue.selectedHover, LegendStateValue.focus], e), this._setLegendItemState(item, LegendStateValue.unSelected, e));
 	          }));
 	        } else {
 	          null === (_d = this._itemsContainer) || void 0 === _d || _d.getChildren().forEach(item => {
@@ -33735,13 +33943,13 @@
 	            isSelected = legendItem.hasState(LegendStateValue.selected),
 	            currentSelectedItems = this._getSelectedLegends();
 	          if ("multiple" === selectMode) {
-	            if (!1 === allowAllCanceled && isSelected && 1 === currentSelectedItems.length) return void this._dispatchEvent(LegendEvent.legendItemClick, legendItem);
-	            isSelected ? (this._removeLegendItemState(legendItem, [LegendStateValue.selected, LegendStateValue.selectedHover]), this._setLegendItemState(legendItem, LegendStateValue.unSelected)) : (this._setLegendItemState(legendItem, LegendStateValue.selected), this._removeLegendItemState(legendItem, [LegendStateValue.unSelected, LegendStateValue.unSelectedHover]));
-	          } else this._setLegendItemState(legendItem, LegendStateValue.selected), this._removeLegendItemState(legendItem, [LegendStateValue.unSelected, LegendStateValue.unSelectedHover]), null === (_e = this._itemsContainer) || void 0 === _e || _e.getChildren().forEach(item => {
-	            legendItem !== item && (this._removeLegendItemState(item, [LegendStateValue.selected, LegendStateValue.selectedHover]), this._setLegendItemState(item, LegendStateValue.unSelected));
+	            if (!1 === allowAllCanceled && isSelected && 1 === currentSelectedItems.length) return void this._dispatchEvent(LegendEvent.legendItemClick, legendItem, e);
+	            isSelected ? (this._removeLegendItemState(legendItem, [LegendStateValue.selected, LegendStateValue.selectedHover], e), this._setLegendItemState(legendItem, LegendStateValue.unSelected, e)) : (this._setLegendItemState(legendItem, LegendStateValue.selected, e), this._removeLegendItemState(legendItem, [LegendStateValue.unSelected, LegendStateValue.unSelectedHover], e));
+	          } else this._setLegendItemState(legendItem, LegendStateValue.selected, e), this._removeLegendItemState(legendItem, [LegendStateValue.unSelected, LegendStateValue.unSelectedHover], e), null === (_e = this._itemsContainer) || void 0 === _e || _e.getChildren().forEach(item => {
+	            legendItem !== item && (this._removeLegendItemState(item, [LegendStateValue.selected, LegendStateValue.selectedHover], e), this._setLegendItemState(item, LegendStateValue.unSelected, e));
 	          });
 	        }
-	        this._dispatchEvent(LegendEvent.legendItemClick, legendItem);
+	        this._dispatchEvent(LegendEvent.legendItemClick, legendItem, e);
 	      }
 	    };
 	  }
@@ -34012,14 +34220,13 @@
 	    };
 	    return this._pager.addEventListener("toPrev", onPaging), this._pager.addEventListener("toNext", onPaging), !0;
 	  }
-	  _setLegendItemState(legendItem, stateName) {
-	    let keepCurrentStates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
+	  _setLegendItemState(legendItem, stateName, e) {
 	    let attributeUpdate = !1;
-	    legendItem.hasState(stateName) || (attributeUpdate = !0), legendItem.addState(stateName, keepCurrentStates), legendItem.getChildren()[0].getChildren().forEach(child => {
-	      child.name !== LEGEND_ELEMENT_NAME.focus && (attributeUpdate || child.hasState(stateName) || (attributeUpdate = !0), child.addState(stateName, keepCurrentStates));
-	    }), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem);
+	    legendItem.hasState(stateName) || (attributeUpdate = !0), legendItem.addState(stateName, true), legendItem.getChildren()[0].getChildren().forEach(child => {
+	      child.name !== LEGEND_ELEMENT_NAME.focus && (attributeUpdate || child.hasState(stateName) || (attributeUpdate = !0), child.addState(stateName, true));
+	    }), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem, e);
 	  }
-	  _removeLegendItemState(legendItem, stateNames) {
+	  _removeLegendItemState(legendItem, stateNames, e) {
 	    let attributeUpdate = !1;
 	    stateNames.forEach(name => {
 	      !attributeUpdate && legendItem.hasState(name) && (attributeUpdate = !0), legendItem.removeState(name);
@@ -34027,7 +34234,7 @@
 	      child.name !== LEGEND_ELEMENT_NAME.focus && stateNames.forEach(name => {
 	        !attributeUpdate && child.hasState(name) && (attributeUpdate = !0), child.removeState(name);
 	      });
-	    }), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem);
+	    }), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem, e);
 	  }
 	  _getSelectedLegends() {
 	    var _a;
@@ -34040,7 +34247,7 @@
 	    let states = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
 	    shape.name = name, shape.data = data, shape.delegate = delegateShape, shape.states = merge$2({}, DEFAULT_STATES, states);
 	  }
-	  _dispatchEvent(eventName, legendItem) {
+	  _dispatchEvent(eventName, legendItem, event) {
 	    var _a;
 	    const currentSelectedItems = this._getSelectedLegends();
 	    currentSelectedItems.sort((pre, next) => pre.index - next.index);
@@ -34050,7 +34257,8 @@
 	        data: legendItem.data,
 	        selected: legendItem.hasState(LegendStateValue.selected),
 	        currentSelectedItems: currentSelectedItems,
-	        currentSelected: currentSelected
+	        currentSelected: currentSelected,
+	        event: event
 	      });
 	    changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, this.dispatchEvent(changeEvent);
 	  }
@@ -40774,6 +40982,9 @@
 	        else if (isNil(this.domain?.min) && isValid(this.domain?.max)) {
 	            this.nice && this._scale.niceMin(tickCount);
 	        }
+	        else {
+	            this.nice && this._scale.nice(tickCount);
+	        }
 	    }
 	    dataToPosition(values) {
 	        return this.valueToPosition(values[0]);
@@ -40846,7 +41057,9 @@
 	            else if (isNil(this.domain?.min) && isValid(this.domain?.max)) {
 	                this._scale.niceMin(tickCount);
 	            }
-	            else ;
+	            else {
+	                this._scale.nice(tickCount);
+	            }
 	        }
 	    }
 	    includeZero(domain) {
@@ -43950,7 +44163,7 @@
 	    let absoluteLeftIconWidth = 0;
 	    let absoluteRightIconWidth = 0;
 	    if (!Array.isArray(icons) || icons.length === 0) {
-	        if (textStr) {
+	        if (isValid(textStr)) {
 	            const text = convertInternal(textStr).replace(/\r?\n/g, '\n').replace(/\r/g, '\n').split('\n');
 	            const hierarchyOffset = getHierarchyOffset(cellGroup.col, cellGroup.row, table);
 	            const attribute = {
@@ -46091,13 +46304,11 @@
 	        this.activeChartInstance.renderSync();
 	        table.internalProps.layoutMap?.updateDataStateToActiveChartInstance?.(this.activeChartInstance);
 	        this.activeChartInstance.on('click', (params) => {
-	            console.log('click captured', params);
 	            if (Chart.temp) {
 	                table.scenegraph.updateChartState(params?.datum);
 	            }
 	        });
 	        this.activeChartInstance.on('brushEnd', (params) => {
-	            console.log('brushEnd captured', params);
 	            table.scenegraph.updateChartState(params?.value?.inBrushData);
 	            Chart.temp = 0;
 	            setTimeout(() => {
@@ -46105,14 +46316,12 @@
 	            }, 0);
 	        });
 	        table._bindChartEvent?.(this.activeChartInstance);
-	        console.log('active');
 	    }
 	    static temp = 1;
 	    deactivate() {
 	        this.active = false;
 	        this.activeChartInstance.release();
 	        this.activeChartInstance = null;
-	        console.log('deactivate');
 	    }
 	    updateData(data) {
 	        this.attribute.data = data;
@@ -46867,6 +47076,40 @@
 	    bind(GroupRenderContribution).toService(AdjustColorGroupAfterRenderContribution);
 	});
 
+	function getAxisDomainRangeAndLabels(min, max, axisOption, skipTick) {
+	    if (axisOption?.zero) {
+	        min = Math.min(min, 0);
+	        max = Math.max(max, 0);
+	    }
+	    const scale = new LinearScale();
+	    scale.domain([min, max], !!axisOption?.nice);
+	    if (axisOption?.nice) {
+	        let tickCount = axisOption.tick?.forceTickCount ?? axisOption.tick?.tickCount ?? 10;
+	        if (axisOption.niceType === 'accurateFirst') {
+	            tickCount = Math.max(10, tickCount);
+	        }
+	        if (isNil(axisOption.min) && isNil(axisOption.max)) {
+	            scale.nice(tickCount);
+	        }
+	        else if (isValid(axisOption.min) && isNil(axisOption.max)) {
+	            scale.niceMax(tickCount);
+	        }
+	        else if (isNil(axisOption.min) && isValid(axisOption.max)) {
+	            scale.niceMin(tickCount);
+	        }
+	    }
+	    let scaleTicks;
+	    if (!skipTick) {
+	        scaleTicks = scale.ticks(axisOption?.tickCount ?? DEFAULT_CONTINUOUS_TICK_COUNT, {
+	            noDecimals: axisOption?.tick?.noDecimals
+	        });
+	    }
+	    return {
+	        range: scale.domain(),
+	        ticks: scaleTicks
+	    };
+	}
+
 	function getAxisConfigInPivotChart(col, row, layout) {
 	    if (!layout._table.isPivotChart()) {
 	        return undefined;
@@ -46884,7 +47127,7 @@
 	            if (!defaultKey) {
 	                return undefined;
 	            }
-	            const isZeroAlign = checkZeroAlign(col, row, 'top', layout);
+	            const { axisOption, isPercent, isZeroAlign } = getAxisOption(col, row + 1, 'top', layout);
 	            const data = layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
 	                ? layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
 	                : layout.dataset.collectedValues[defaultKey];
@@ -46892,7 +47135,6 @@
 	            const range = data
 	                ? data[layout.getColKeysPath()[index][Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]]
 	                : { max: 1, min: 0 };
-	            const { axisOption, isPercent } = getAxisOption(col, row + 1, 'top', layout);
 	            if (range.min === range.max) {
 	                if (range.min > 0) {
 	                    range.min = 0;
@@ -46908,6 +47150,9 @@
 	                range.min = range.min < 0 ? -1 : 0;
 	                range.max = range.max > 0 ? 1 : 0;
 	            }
+	            const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption);
+	            range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
+	            range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
 	            if (isNumber$1(axisOption?.min)) {
 	                range.min = axisOption.min;
 	            }
@@ -46921,7 +47166,8 @@
 	                type: 'linear',
 	                label: {
 	                    flush: true
-	                }
+	                },
+	                __ticksForVTable: ticks
 	            });
 	        }
 	        else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
@@ -46932,12 +47178,12 @@
 	            if (isArray(defaultKey)) {
 	                defaultKey = defaultKey[0];
 	            }
-	            const isZeroAlign = checkZeroAlign(col, row, 'bottom', layout);
+	            const { axisOption, isPercent, isZeroAlign } = getAxisOption(col, row - 1, 'bottom', layout);
 	            const data = layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
 	                ? layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
 	                : layout.dataset.collectedValues[defaultKey];
 	            const index = layout.getRecordIndexByCol(col);
-	            const range = merge$2({}, data?.[layout.getColKeysPath()?.[index]?.[Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]] ?? { min: 0, max: 1 });
+	            const range = merge$2({}, data?.[layout.getColKeysPath()?.[index]?.[Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)] ?? ''] ?? { min: 0, max: 1 });
 	            if (range.min === range.max) {
 	                if (range.min > 0) {
 	                    range.min = 0;
@@ -46953,7 +47199,6 @@
 	                    indicatorInfo = info;
 	                }
 	            });
-	            const { axisOption, isPercent } = getAxisOption(col, row - 1, 'bottom', layout);
 	            if (axisOption?.visible === false) {
 	                return;
 	            }
@@ -46961,6 +47206,9 @@
 	                range.min = range.min < 0 ? -1 : 0;
 	                range.max = range.max > 0 ? 1 : 0;
 	            }
+	            const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption);
+	            range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
+	            range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
 	            if (isNumber$1(axisOption?.min)) {
 	                range.min = axisOption.min;
 	            }
@@ -46978,7 +47226,8 @@
 	                type: 'linear',
 	                label: {
 	                    flush: true
-	                }
+	                },
+	                __ticksForVTable: ticks
 	            });
 	        }
 	        else if (col === layout.rowHeaderLevelCount - 1 &&
@@ -47016,7 +47265,7 @@
 	            if (isArray(defaultKey)) {
 	                defaultKey = defaultKey[0];
 	            }
-	            const isZeroAlign = checkZeroAlign(col, row, 'left', layout);
+	            const { axisOption, isPercent, isZeroAlign } = getAxisOption(col + 1, row, 'left', layout);
 	            const data = layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
 	                ? layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
 	                : layout.dataset.collectedValues[defaultKey];
@@ -47037,7 +47286,6 @@
 	                    indicatorInfo = info;
 	                }
 	            });
-	            const { axisOption, isPercent } = getAxisOption(col + 1, row, 'left', layout);
 	            if (axisOption?.visible === false) {
 	                return;
 	            }
@@ -47045,6 +47293,9 @@
 	                range.min = range.min < 0 ? -1 : 0;
 	                range.max = range.max > 0 ? 1 : 0;
 	            }
+	            const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption);
+	            range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
+	            range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
 	            if (isNumber$1(axisOption?.min)) {
 	                range.min = axisOption.min;
 	            }
@@ -47063,7 +47314,8 @@
 	                type: 'linear',
 	                label: {
 	                    flush: true
-	                }
+	                },
+	                __ticksForVTable: ticks
 	            });
 	        }
 	        else if (col === layout.colCount - layout.rightFrozenColCount &&
@@ -47077,13 +47329,12 @@
 	            if (!defaultKey) {
 	                return undefined;
 	            }
-	            const isZeroAlign = checkZeroAlign(col, row, 'right', layout);
+	            const { axisOption, isPercent, isZeroAlign } = getAxisOption(col - 1, row, 'right', layout);
 	            const data = layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
 	                ? layout.dataset.collectedValues[defaultKey + (isZeroAlign ? '_align' : '')]
 	                : layout.dataset.collectedValues[defaultKey];
 	            const index = layout.getRecordIndexByRow(row);
 	            const range = merge$2({}, data?.[layout.getRowKeysPath()[index]?.[Math.max(0, layout.rowHeaderLevelCount - 1 - layout.leftAxesCount)] ?? ''] ?? { min: 0, max: 1 });
-	            const { axisOption, isPercent } = getAxisOption(col - 1, row, 'right', layout);
 	            if (range.min === range.max) {
 	                if (range.min > 0) {
 	                    range.min = 0;
@@ -47099,6 +47350,9 @@
 	                range.min = range.min < 0 ? -1 : 0;
 	                range.max = range.max > 0 ? 1 : 0;
 	            }
+	            const { range: niceRange, ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption);
+	            range.min = !isNaN(niceRange[0]) ? niceRange[0] : 0;
+	            range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1;
 	            if (isNumber$1(axisOption?.min)) {
 	                range.min = axisOption.min;
 	            }
@@ -47115,7 +47369,8 @@
 	                type: 'linear',
 	                label: {
 	                    flush: true
-	                }
+	                },
+	                __ticksForVTable: ticks
 	            });
 	        }
 	        else if (row === layout.rowCount - layout.bottomFrozenRowCount &&
@@ -47152,7 +47407,8 @@
 	        if (axisOption) {
 	            return {
 	                axisOption,
-	                isPercent: spec.percent
+	                isPercent: spec.percent,
+	                isZeroAlign: checkZeroAlign(spec, orient, layout)
 	            };
 	        }
 	    }
@@ -47161,10 +47417,11 @@
 	    });
 	    return {
 	        axisOption,
-	        isPercent: false
+	        isPercent: false,
+	        isZeroAlign: checkZeroAlign(spec, orient, layout)
 	    };
 	}
-	function checkZeroAlign(col, row, orient, layout) {
+	function checkZeroAlign(spec, orient, layout) {
 	    const orients = [];
 	    if (orient === 'left' || orient === 'right') {
 	        orients.push('left', 'right');
@@ -47172,7 +47429,6 @@
 	    else if (orient === 'top' || orient === 'bottom') {
 	        orients.push('top', 'bottom');
 	    }
-	    const spec = layout.getRawChartSpec(col, row);
 	    let axesSpec;
 	    if (spec && isArray(spec.axes)) {
 	        axesSpec = spec.axes;
@@ -47226,12 +47482,19 @@
 	            });
 	        }
 	        else {
-	            const range = attribute.range;
-	            const minNumber = Math.abs(range.min) > 1 ? Math.round(range.min) : range.min;
-	            const maxNumber = Math.abs(range.max) > 1 ? Math.round(range.max) : range.max;
-	            const minString = formatDecimal(minNumber);
-	            const maxString = formatDecimal(maxNumber);
-	            [minString, maxString].forEach(text => {
+	            let ticks;
+	            if (isArray(config.__ticksForVTable)) {
+	                ticks = config.__ticksForVTable;
+	            }
+	            else {
+	                const range = attribute.range;
+	                const minNumber = Math.abs(range.min) > 1 ? Math.round(range.min) : range.min;
+	                const maxNumber = Math.abs(range.max) > 1 ? Math.round(range.max) : range.max;
+	                const minString = formatDecimal(minNumber);
+	                const maxString = formatDecimal(maxNumber);
+	                ticks = [minString, maxString];
+	            }
+	            ticks.forEach(text => {
 	                if (attribute.label.formatMethod) {
 	                    text = attribute.label.formatMethod(text);
 	                }
@@ -47289,12 +47552,19 @@
 	            });
 	        }
 	        else {
-	            const range = attribute.range;
-	            const minNumber = Math.abs(range.min) > 1 ? Math.round(range.min) : range.min;
-	            const maxNumber = Math.abs(range.max) > 1 ? Math.round(range.max) : range.max;
-	            const minString = formatDecimal(minNumber);
-	            const maxString = formatDecimal(maxNumber);
-	            [minString, maxString].forEach(text => {
+	            let ticks;
+	            if (isArray(config.__ticksForVTable)) {
+	                ticks = config.__ticksForVTable;
+	            }
+	            else {
+	                const range = attribute.range;
+	                const minNumber = Math.abs(range.min) > 1 ? Math.round(range.min) : range.min;
+	                const maxNumber = Math.abs(range.max) > 1 ? Math.round(range.max) : range.max;
+	                const minString = formatDecimal(minNumber);
+	                const maxString = formatDecimal(maxNumber);
+	                ticks = [minString, maxString];
+	            }
+	            ticks.forEach(text => {
 	                if (attribute.label.formatMethod) {
 	                    text = attribute.label.formatMethod(text);
 	                }
@@ -47459,7 +47729,7 @@
 	        return width;
 	    }
 	    else if (width !== 'auto' && typeof width === 'string') {
-	        return toPx(width, table.internalProps.calcWidthContext);
+	        return table._adjustColWidth(col, table._colWidthDefineToPxWidth(width));
 	    }
 	    return computeAutoColWidth(width, col, startRow, endRow, forceCompute, table);
 	}
@@ -47724,6 +47994,25 @@
 	            table.setRowHeight(row, rowHeight, false);
 	        }
 	    }
+	    else if (table.autoFillHeight) {
+	        table._clearRowRangeHeightsMap();
+	        const canvasHeight = table.tableNoFrameHeight;
+	        let actualHeight = 0;
+	        let actualHeaderHeight = 0;
+	        for (let row = 0; row < table.rowCount; row++) {
+	            const rowHeight = table.getRowHeight(row);
+	            if (row < table.frozenRowCount || row >= table.rowCount - table.bottomFrozenRowCount) {
+	                actualHeaderHeight += rowHeight;
+	            }
+	            actualHeight += rowHeight;
+	        }
+	        if (actualHeight < canvasHeight && actualHeight - actualHeaderHeight > 0) {
+	            const factor = (canvasHeight - actualHeaderHeight) / (actualHeight - actualHeaderHeight);
+	            for (let row = table.frozenRowCount; row < table.rowCount - table.bottomFrozenRowCount; row++) {
+	                table.setRowHeight(row, table.getRowHeight(row) * factor);
+	            }
+	        }
+	    }
 	    if (update) {
 	        for (let row = 0; row < table.rowCount; row++) {
 	            const newRowHeight = table.getRowHeight(row);
@@ -49303,8 +49592,8 @@
 	            let maxHeight = 0;
 	            for (let col = 0; col < this.table.rowHeaderLevelCount; col++) {
 	                const colGroup = this.table.scenegraph.getColGroup(col);
-	                const cellType = 'rowHeader';
-	                const { height } = createComplexColumn(colGroup, col, colGroup.attribute.width, this.currentRow + 1, endRow, this.table.scenegraph.mergeMap, this.table.internalProps.defaultRowHeight, this.table, cellType);
+	                const cellLocation = 'rowHeader';
+	                const { height } = createComplexColumn(colGroup, col, colGroup.attribute.width, this.currentRow + 1, endRow, this.table.scenegraph.mergeMap, this.table.internalProps.defaultRowHeight, this.table, cellLocation);
 	                maxHeight = Math.max(maxHeight, height);
 	                this.table.scenegraph.rowHeaderGroup.setAttribute('height', maxHeight);
 	            }
@@ -49313,8 +49602,8 @@
 	            let maxHeight = 0;
 	            for (let col = this.table.colCount - this.table.rightFrozenColCount; col < this.table.colCount; col++) {
 	                const colGroup = this.table.scenegraph.getColGroup(col);
-	                const cellType = 'rowHeader';
-	                const { height } = createComplexColumn(colGroup, col, colGroup.attribute.width, this.currentRow + 1, endRow, this.table.scenegraph.mergeMap, this.table.internalProps.defaultRowHeight, this.table, cellType);
+	                const cellLocation = 'rowHeader';
+	                const { height } = createComplexColumn(colGroup, col, colGroup.attribute.width, this.currentRow + 1, endRow, this.table.scenegraph.mergeMap, this.table.internalProps.defaultRowHeight, this.table, cellLocation);
 	                maxHeight = Math.max(maxHeight, height);
 	                this.table.scenegraph.rightFrozenGroup.setAttribute('height', maxHeight);
 	            }
@@ -49322,8 +49611,8 @@
 	        let maxHeight = 0;
 	        for (let col = this.bodyLeftCol; col <= this.bodyRightCol; col++) {
 	            const colGroup = this.table.scenegraph.getColGroup(col);
-	            const cellType = 'body';
-	            const { height } = createComplexColumn(colGroup, col, colGroup.attribute.width, this.currentRow + 1, endRow, this.table.scenegraph.mergeMap, this.table.internalProps.defaultRowHeight, this.table, cellType);
+	            const cellLocation = 'body';
+	            const { height } = createComplexColumn(colGroup, col, colGroup.attribute.width, this.currentRow + 1, endRow, this.table.scenegraph.mergeMap, this.table.internalProps.defaultRowHeight, this.table, cellLocation);
 	            maxHeight = Math.max(maxHeight, height);
 	        }
 	        this.table.scenegraph.bodyGroup.setAttribute('height', maxHeight);
@@ -49984,7 +50273,7 @@
 	        for (let col = colStart; col <= colEnd; col++) {
 	            if (table._getCellStyle(col, row)?.textStick) {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth());
+	                adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX);
 	                changedCells.push({ col, row });
 	            }
 	        }
@@ -49997,7 +50286,7 @@
 	            if (table._getCellStyle(col, row)?.textStick &&
 	                table.internalProps.layoutMap.rowHierarchyType !== 'tree') {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight());
+	                adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY);
 	                changedCells.push({ col, row });
 	            }
 	        }
@@ -50006,8 +50295,8 @@
 	        for (let col = colStart; col <= colEnd; col++) {
 	            if (table._getCellStyle(col, row)?.textStick) {
 	                const cellGroup = table.scenegraph.getCell(col, row);
-	                adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight());
-	                adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth());
+	                adjustCellContentVerticalLayout(cellGroup, frozenRowsHeight + table.tableY, table.tableNoFrameHeight - table.getBottomFrozenRowsHeight() + table.tableY);
+	                adjustCellContentHorizontalLayout(cellGroup, frozenColsWidth + table.tableX, table.tableNoFrameWidth - table.getRightFrozenColsWidth() + table.tableX);
 	                changedCells.push({ col, row });
 	            }
 	        }
@@ -50061,18 +50350,15 @@
 	    for (let i = 0; i < headerObjects.length; i++) {
 	        const header = headerObjects[i];
 	        if (header && header.style?.textStick) {
-	            console.log('checkHaveTextStick', true);
 	            return true;
 	        }
 	    }
 	    for (let i = 0; i < columnObjects.length; i++) {
 	        const column = columnObjects[i];
 	        if (column && column.style?.textStick) {
-	            console.log('checkHaveTextStick', true);
 	            return true;
 	        }
 	    }
-	    console.log('checkHaveTextStick', false);
 	    return false;
 	}
 
@@ -51342,6 +51628,24 @@
 	                this.setRowHeight(row, rowHeight);
 	            }
 	        }
+	        else if (table.autoFillHeight) {
+	            const canvasHeight = table.tableNoFrameHeight;
+	            let actualHeight = 0;
+	            let actualHeaderHeight = 0;
+	            for (let row = 0; row < table.rowCount; row++) {
+	                const rowHeight = table.getRowHeight(row);
+	                if (row < table.frozenRowCount || row >= table.rowCount - table.bottomFrozenRowCount) {
+	                    actualHeaderHeight += rowHeight;
+	                }
+	                actualHeight += rowHeight;
+	            }
+	            if (actualHeight < canvasHeight && actualHeight - actualHeaderHeight > 0) {
+	                const factor = (canvasHeight - actualHeaderHeight) / (actualHeight - actualHeaderHeight);
+	                for (let row = table.frozenRowCount; row < table.rowCount - table.bottomFrozenRowCount; row++) {
+	                    this.setRowHeight(row, table.getRowHeight(row) * factor);
+	                }
+	            }
+	        }
 	    }
 	    dealFrozen() {
 	        dealFrozen(this);
@@ -51910,6 +52214,7 @@
 	    if (headerC?.sort) {
 	        executeSort(tableState, table, headerC);
 	    }
+	    table.internalProps.layoutMap.cleatCellRangeMap();
 	    table.scenegraph.sortCell();
 	    table.stateManeger.updateSelectPos(-1, -1);
 	}
@@ -52113,7 +52418,7 @@
 	    const line = sparkline?.getChildByName('sparkline-line');
 	    const symbol = sparkline?.getChildByName('sparkline-symbol-group');
 	    if (!line) {
-	        return;
+	        return false;
 	    }
 	    const bandwidth = line.bandwidth;
 	    const min = line.min;
@@ -52198,6 +52503,7 @@
 	        };
 	        table.fireListeners(TABLE_EVENT_TYPE.MOUSEOVER_CHART_SYMBOL, eventInfo);
 	    }
+	    return true;
 	}
 
 	function adjustMoveHeaderTarget(source, target, table) {
@@ -52744,7 +53050,7 @@
 	    isSelecting() {
 	        return this.select.selecting;
 	    }
-	    endSelectCells() {
+	    endSelectCells(fireListener = true) {
 	        this.select.selecting = false;
 	        if (this.select.ranges.length === 0) {
 	            return;
@@ -52752,11 +53058,12 @@
 	        selectEnd(this.table.scenegraph);
 	        const lastCol = this.select.ranges[this.select.ranges.length - 1].end.col;
 	        const lastRow = this.select.ranges[this.select.ranges.length - 1].end.row;
-	        this.table.fireListeners(TABLE_EVENT_TYPE.SELECTED_CELL, {
-	            ranges: this.select.ranges,
-	            col: lastCol,
-	            row: lastRow
-	        });
+	        fireListener &&
+	            this.table.fireListeners(TABLE_EVENT_TYPE.SELECTED_CELL, {
+	                ranges: this.select.ranges,
+	                col: lastCol,
+	                row: lastRow
+	            });
 	    }
 	    endResizeCol() {
 	        setTimeout(() => {
@@ -53067,7 +53374,6 @@
 	        this.sort.row = cellAddress.row;
 	        const cellGroup = this.table.scenegraph.getCell(this.sort.col, this.sort.row);
 	        const iconMark = cellGroup.getChildByName(name, true);
-	        this.table.scenegraph.sortCell();
 	        this.table.scenegraph.updateSortIcon(this.sort.col, this.sort.row, iconMark, this.sort.order, oldSortCol, oldSortRow, this.sort.icon);
 	    }
 	    triggerFreeze(col, row, iconMark) {
@@ -53093,11 +53399,18 @@
 	        if (this.sparkLine.col !== -1 && this.sparkLine.row !== -1) {
 	            clearChartHover(this.sparkLine.col, this.sparkLine.row, this.table);
 	        }
+	        let isUpdated = false;
 	        if (col !== -1 && row !== -1) {
-	            updateChartHover(col, row, x, y, this.table);
+	            isUpdated = updateChartHover(col, row, x, y, this.table);
+	        }
+	        if (isUpdated) {
+	            this.sparkLine.col = col;
+	            this.sparkLine.row = row;
+	        }
+	        else {
+	            this.sparkLine.col = -1;
+	            this.sparkLine.row = -1;
 	        }
-	        this.sparkLine.col = col;
-	        this.sparkLine.row = row;
 	    }
 	}
 
@@ -53105,21 +53418,21 @@
 	    if (Env.mode === 'browser') {
 	        table.on(TABLE_EVENT_TYPE.CLICK_CELL, (e) => {
 	            const { col, row } = e;
-	            let type;
+	            let cellType;
 	            if (table.internalProps.layoutMap.isHeader(col, row)) {
-	                type = table.isPivotTable()
+	                cellType = table.isPivotTable()
 	                    ? table._getHeaderLayoutMap(col, row).headerType
 	                    : table.getHeaderDefine(col, row).headerType;
 	            }
 	            else {
-	                type = table.getBodyColumnType(col, row);
+	                cellType = table.getBodyColumnType(col, row);
 	            }
 	            const columnDefine = table.isHeader(col, row)
 	                ? table.getHeaderDefine(col, row)
 	                : table.getBodyColumnDefine(col, row);
 	            const cellValue = table.getCellValue(col, row);
 	            const cellOriginValue = table.getCellOriginValue(col, row);
-	            if (columnDefine.cellType === 'link') {
+	            if (cellType === 'link') {
 	                const linkJump = columnDefine.linkJump !== false;
 	                if (!linkJump) {
 	                    return;
@@ -53149,7 +53462,7 @@
 	                }
 	                window.open(url);
 	            }
-	            else if (type === 'image') {
+	            else if (cellType === 'image') {
 	                const overlay = document.createElement('div');
 	                overlay.style.width = '100%';
 	                overlay.style.height = '100%';
@@ -53174,7 +53487,7 @@
 	                overlay.appendChild(image);
 	                document.body.appendChild(overlay);
 	            }
-	            else if (type === 'video') {
+	            else if (cellType === 'video') {
 	                const overlay = document.createElement('div');
 	                overlay.style.width = '100%';
 	                overlay.style.height = '100%';
@@ -53469,7 +53782,6 @@
 	        }
 	    });
 	    table.scenegraph.tableGroup.addEventListener('pointerupoutside', (e) => {
-	        console.log('pointerupoutside');
 	        if (stateManeger.isResizeCol()) {
 	            endResizeCol(table);
 	        }
@@ -53633,7 +53945,6 @@
 	        }
 	    });
 	    table.scenegraph.tableGroup.addEventListener('click', (e) => {
-	        console.log('click', e.clone());
 	        if (table.stateManeger.columnResize.resizing || table.stateManeger.columnMove.moving) {
 	            return;
 	        }
@@ -53670,12 +53981,10 @@
 	        }
 	    });
 	    table.scenegraph.stage.addEventListener('click', (e) => {
-	        console.log('stage click');
 	        const target = e.target;
 	        if (target &&
 	            !target.isDescendantsOf(table.scenegraph.tableGroup) &&
 	            target !== table.scenegraph.tableGroup) {
-	            console.log('pointerup outside table');
 	            stateManeger.updateInteractionState(InteractionState.default);
 	            eventManeger.dealTableHover();
 	            eventManeger.dealTableSelect();
@@ -54173,6 +54482,9 @@
 	        bindTouchListener(this);
 	    }
 	    bindSelfEvent() {
+	        if (this.table.isReleased) {
+	            return;
+	        }
 	        const stateManeger = this.table.stateManeger;
 	        this.table.on(TABLE_EVENT_TYPE.ICON_CLICK, iconInfo => {
 	            const { col, row, x, y, funcType, icon } = iconInfo;
@@ -57379,6 +57691,7 @@
 	    _widthMode;
 	    _heightMode;
 	    _autoFillWidth;
+	    _autoFillHeight;
 	    customRender;
 	    canvasWidth;
 	    canvasHeight;
@@ -57391,24 +57704,26 @@
 	        return TABLE_EVENT_TYPE;
 	    }
 	    options;
-	    version = "0.10.3-alpha.2";
+	    version = "0.11.0-alpha.4";
 	    pagination;
 	    id = `VTable${Date.now()}`;
 	    headerStyleCache;
 	    bodyStyleCache;
 	    container;
+	    isReleased = false;
 	    constructor(container, options = {}) {
 	        super();
 	        if (!container) {
 	            throw new Error("vtable's container is undefined");
 	        }
-	        const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount } = options;
+	        const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth, widthMode = 'standard', heightMode = 'standard', autoFillWidth = false, autoFillHeight = false, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, customRender, pixelRatio = defaultPixelRatio, renderChartAsync, renderChartAsyncBatchCount } = options;
 	        this.container = container;
 	        this.options = options;
 	        this.options.container = container;
 	        this._widthMode = widthMode;
 	        this._heightMode = heightMode;
 	        this._autoFillWidth = autoFillWidth;
+	        this._autoFillHeight = autoFillHeight;
 	        this.customRender = customRender;
 	        this.padding = { top: 0, right: 0, left: 0, bottom: 0 };
 	        if (padding) {
@@ -57706,6 +58021,14 @@
 	            this._autoFillWidth = autoFillWidth;
 	        }
 	    }
+	    get autoFillHeight() {
+	        return this._autoFillHeight;
+	    }
+	    set autoFillHeight(autoFillHeight) {
+	        if (autoFillHeight !== this._autoFillHeight) {
+	            this._autoFillHeight = autoFillHeight;
+	        }
+	    }
 	    _colWidthDefineToPxWidth(width) {
 	        if (width === 'auto') {
 	            return 0;
@@ -58321,13 +58644,14 @@
 	        if (parentElement) {
 	            parentElement.removeChild(internalProps.element);
 	        }
+	        this.isReleased = true;
 	    }
 	    fireListeners(type, event) {
 	        return super.fireListeners(type, event);
 	    }
 	    updateOption(options) {
 	        this.options = options;
-	        const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, customRender, renderChartAsync, renderChartAsyncBatchCount } = options;
+	        const { frozenColCount = 0, defaultRowHeight = 40, defaultHeaderRowHeight, defaultColWidth = 80, defaultHeaderColWidth = 80, keyboardOptions, columnResizeMode, dragHeaderMode, showFrozenIcon, allowFrozenColCount, padding, hover, menu, select: click, pixelRatio, widthMode, heightMode, autoFillWidth, autoFillHeight, customRender, renderChartAsync, renderChartAsyncBatchCount } = options;
 	        if (pixelRatio && pixelRatio !== this.internalProps.pixelRatio) {
 	            this.internalProps.pixelRatio = pixelRatio;
 	        }
@@ -58352,6 +58676,7 @@
 	        this.widthMode = widthMode ?? 'standard';
 	        this.heightMode = heightMode ?? 'standard';
 	        this.autoFillWidth = autoFillWidth ?? false;
+	        this.autoFillHeight = autoFillHeight ?? false;
 	        this.customRender = customRender;
 	        const internalProps = this.internalProps;
 	        if (Env.mode !== 'node') {
@@ -58628,6 +58953,18 @@
 	        this.stateManeger.updateSelectPos(col, row);
 	        this.stateManeger.endSelectCells();
 	    }
+	    selectCells(cellRanges) {
+	        const { scrollLeft, scrollTop } = this;
+	        cellRanges.forEach((cellRange, index) => {
+	            this.stateManeger.updateSelectPos(cellRange.start.col, cellRange.start.row, false, index >= 1);
+	            this.stateManeger.updateInteractionState(InteractionState.grabing);
+	            this.stateManeger.updateSelectPos(cellRange.end.col, cellRange.end.row, false, index >= 1);
+	            this.stateManeger.endSelectCells(false);
+	            this.stateManeger.updateInteractionState(InteractionState.default);
+	        });
+	        this.setScrollTop(scrollTop);
+	        this.setScrollLeft(scrollLeft);
+	    }
 	    get allowFrozenColCount() {
 	        return this.internalProps.allowFrozenColCount;
 	    }
@@ -58693,7 +59030,8 @@
 	        return body?.define;
 	    }
 	    getBodyColumnType(col, row) {
-	        return this.internalProps.layoutMap.getBody(col, row).cellType;
+	        const cellType = this.internalProps.layoutMap.getBody(col, row).cellType;
+	        return getProp('cellType', { cellType }, col, row, this);
 	    }
 	    getHeaderField(col, row) {
 	        return this.internalProps.layoutMap.getHeaderField(col, row);
@@ -59340,7 +59678,8 @@
 	    }
 	    hasAutoImageColumn() {
 	        return this.internalProps.layoutMap.columnObjects.find((column) => {
-	            if (column.cellType === 'image' && column.define.imageAutoSizing) {
+	            if ((column.cellType === 'image' || typeof column.cellType === 'function') &&
+	                column.define.imageAutoSizing) {
 	                return true;
 	            }
 	            return false;
@@ -59372,13 +59711,41 @@
 	    }
 	    exportCellImg(col, row) {
 	        const isInView = this.cellIsInVisualView(col, row);
+	        const { scrollTop, scrollLeft } = this;
 	        if (!isInView) {
 	            this.scrollToCell({ col, row });
 	        }
 	        const cellRect = this.getCellRelativeRect(col, row);
 	        const c = this.scenegraph.stage.toCanvas(false, new AABBBounds().set(cellRect.left + this.tableX + 1, cellRect.top + this.tableY + 1, cellRect.right + this.tableX, cellRect.bottom + this.tableY));
+	        if (!isInView) {
+	            this.setScrollTop(scrollTop);
+	            this.setScrollLeft(scrollLeft);
+	        }
 	        return c.toDataURL();
 	    }
+	    exportCellRangeImg(cellRange) {
+	        const { scrollTop, scrollLeft } = this;
+	        const minCol = Math.min(cellRange.start.col, cellRange.end.col);
+	        const minRow = Math.min(cellRange.start.row, cellRange.end.row);
+	        const maxCol = Math.max(cellRange.start.col, cellRange.end.col);
+	        const maxRow = Math.max(cellRange.start.row, cellRange.end.row);
+	        const isInView = this.cellIsInVisualView(minCol, minRow);
+	        const isMaxCellInView = this.cellIsInVisualView(maxCol, maxRow);
+	        if (!isInView || !isMaxCellInView) {
+	            this.scrollToCell({ col: minCol, row: minRow });
+	        }
+	        const cellRect = this.getCellRangeRelativeRect({
+	            start: { col: minCol, row: minRow },
+	            end: { col: maxCol, row: maxRow }
+	        });
+	        const c = this.scenegraph.stage.toCanvas(false, new AABBBounds().set(cellRect.left + this.tableX + 1, cellRect.top + this.tableY + 1, cellRect.right + this.tableX, cellRect.bottom + this.tableY));
+	        const base64Image = c.toDataURL();
+	        if (!isInView || !isMaxCellInView) {
+	            this.setScrollTop(scrollTop);
+	            this.setScrollLeft(scrollLeft);
+	        }
+	        return base64Image;
+	    }
 	}
 
 	var core = /*#__PURE__*/Object.freeze({
@@ -59548,12 +59915,12 @@
 	            if (isArray(key)) {
 	                key = key[0];
 	            }
-	            const isZeroAlign = checkZeroAlign(col, row, index === 0 ? 'bottom' : 'top', layout);
+	            const { axisOption, isPercent, isZeroAlign } = getAxisOption(col, row, index === 0 ? 'bottom' : 'top', layout);
 	            const data = layout.dataset.collectedValues[key + (isZeroAlign ? '_align' : '')]
 	                ? layout.dataset.collectedValues[key + (isZeroAlign ? '_align' : '')]
 	                : layout.dataset.collectedValues[key];
-	            const range = merge$2({}, data?.[layout.getColKeysPath()?.[colIndex]?.[Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)]] ?? { min: 0, max: 1 });
-	            const { axisOption, isPercent } = getAxisOption(col, row, index === 0 ? 'bottom' : 'top', layout);
+	            const range = merge$2({}, data?.[layout.getColKeysPath()?.[colIndex]?.[Math.max(0, layout.columnHeaderLevelCount - 1 - layout.topAxesCount)] ??
+	                ''] ?? { min: 0, max: 1 });
 	            if (isPercent) {
 	                range.min = range.min < 0 ? -1 : 0;
 	                range.max = range.max > 0 ? 1 : 0;
@@ -59562,6 +59929,17 @@
 	                range.min = Math.min(range.min, 0);
 	                range.max = Math.max(range.max, 0);
 	            }
+	            if (axisOption?.nice) {
+	                const { ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption);
+	                range.min = ticks[0];
+	                range.max = ticks[ticks.length - 1];
+	            }
+	            if (isNumber$1(axisOption?.min)) {
+	                range.min = axisOption.min;
+	            }
+	            if (isNumber$1(axisOption?.max)) {
+	                range.max = axisOption.max;
+	            }
 	            axes.push(merge$2({
 	                range
 	            }, axisOption, {
@@ -59606,12 +59984,11 @@
 	            if (isArray(key)) {
 	                key = key[0];
 	            }
-	            const isZeroAlign = checkZeroAlign(col, row, index === 0 ? 'left' : 'right', layout);
+	            const { axisOption, isPercent, isZeroAlign } = getAxisOption(col, row, index === 0 ? 'left' : 'right', layout);
 	            const data = layout.dataset.collectedValues[key + (isZeroAlign ? '_align' : '')]
 	                ? layout.dataset.collectedValues[key + (isZeroAlign ? '_align' : '')]
 	                : layout.dataset.collectedValues[key];
 	            const range = merge$2({}, data?.[layout.getRowKeysPath()[rowIndex]?.[Math.max(0, layout.rowHeaderLevelCount - 1 - layout.leftAxesCount)] ?? ''] ?? { min: 0, max: 1 });
-	            const { axisOption, isPercent } = getAxisOption(col, row, index === 0 ? 'left' : 'right', layout);
 	            if (isPercent) {
 	                range.min = range.min < 0 ? -1 : 0;
 	                range.max = range.max > 0 ? 1 : 0;
@@ -59620,6 +59997,17 @@
 	                range.min = Math.min(range.min, 0);
 	                range.max = Math.max(range.max, 0);
 	            }
+	            if (axisOption?.nice) {
+	                const { ticks } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption);
+	                range.min = ticks[0];
+	                range.max = ticks[ticks.length - 1];
+	            }
+	            if (isNumber$1(axisOption?.min)) {
+	                range.min = axisOption.min;
+	            }
+	            if (isNumber$1(axisOption?.max)) {
+	                range.max = axisOption.max;
+	            }
 	            axes.push(merge$2({
 	                range
 	            }, axisOption, {
@@ -60348,6 +60736,9 @@
 	            indicatorObject.chartInstance?.release();
 	        });
 	    }
+	    cleatCellRangeMap() {
+	        this._cellRangeMap.clear();
+	    }
 	}
 
 	class ListTable extends BaseTable {
@@ -60791,6 +61182,7 @@
 	            }
 	            if (hd?.define?.sort) {
 	                this.dataSource.sort(hd.field, order, sortFunc);
+	                this.internalProps.layoutMap.cleatCellRangeMap();
 	                this.scenegraph.sortCell();
 	            }
 	        }
@@ -62360,6 +62752,9 @@
 	        }
 	        return undefined;
 	    }
+	    cleatCellRangeMap() {
+	        this._cellRangeMap.clear();
+	    }
 	}
 
 	const EMPTY_HEADER = {
@@ -63613,6 +64008,8 @@
 	            indicatorObject.chartInstance?.release();
 	        });
 	    }
+	    cleatCellRangeMap() {
+	    }
 	}
 
 	class FlatDataToObjects {
@@ -66113,7 +66510,6 @@
 	    getChartDatumPosition(datum, cellHeaderPaths) {
 	        const cellAddr = this.getCellAddressByHeaderPaths(cellHeaderPaths);
 	        const cellPosition = this.getCellRelativeRect(cellAddr.col, cellAddr.row);
-	        console.log(cellPosition);
 	        const cellGroup = this.scenegraph.getCell(cellAddr.col, cellAddr.row);
 	        let position;
 	        const chartNode = cellGroup?.getChildren()?.[0];
@@ -66778,7 +67174,7 @@
 		percentCalc: percentCalc
 	});
 
-	const version = "0.10.3-alpha.2";
+	const version = "0.11.0-alpha.4";
 	function getIcons() {
 	    return get$1();
 	}