@visactor/vchart 1.1.0-beta.9 → 1.1.1-beta.1

package/build/index.js

@@ -1662,6 +1662,9 @@
 	!function (InnerBBox) {
 	  InnerBBox[InnerBBox.NONE = 0] = "NONE", InnerBBox[InnerBBox.BBOX1 = 1] = "BBOX1", InnerBBox[InnerBBox.BBOX2 = 2] = "BBOX2";
 	}(InnerBBox || (InnerBBox = {}));
+	function rectInsideAnotherRect(bbox1, bbox2, format) {
+	  return bbox1 && bbox2 ? (x11 = bbox1.x1, x12 = bbox1.x2, y11 = bbox1.y1, y12 = bbox1.y2, x21 = bbox2.x1, x22 = bbox2.x2, y21 = bbox2.y1, y22 = bbox2.y2, format && (x11 > x12 && ([x11, x12] = [x12, x11]), y11 > y12 && ([y11, y12] = [y12, y11]), x21 > x22 && ([x21, x22] = [x22, x21]), y21 > y22 && ([y21, y22] = [y22, y21])), x11 > x21 && x12 < x22 && y11 > y21 && y12 < y22 ? InnerBBox.BBOX1 : x21 > x11 && x22 < x12 && y21 > y11 && y22 < y12 ? InnerBBox.BBOX2 : InnerBBox.NONE) : InnerBBox.NONE;
+	}
 	function isRectIntersect(bbox1, bbox2, format) {
 	  return !bbox1 || !bbox2 || (format ? (x11 = bbox1.x1, x12 = bbox1.x2, y11 = bbox1.y1, y12 = bbox1.y2, x21 = bbox2.x1, x22 = bbox2.x2, y21 = bbox2.y1, y22 = bbox2.y2, x11 > x12 && ([x11, x12] = [x12, x11]), y11 > y12 && ([y11, y12] = [y12, y11]), x21 > x22 && ([x21, x22] = [x22, x21]), y21 > y22 && ([y21, y22] = [y22, y21]), !(x11 > x22 || x12 < x21 || y11 > y22 || y12 < y21)) : !(bbox1.x1 > bbox2.x2 || bbox1.x2 < bbox2.x1 || bbox1.y1 > bbox2.y2 || bbox1.y2 < bbox2.y1));
 	}
@@ -2608,6 +2611,7 @@
 	    ComponentTypeEnum["scrollBar"] = "scrollBar";
 	    ComponentTypeEnum["label"] = "label";
 	    ComponentTypeEnum["brush"] = "brush";
+	    ComponentTypeEnum["poptip"] = "poptip";
 	    ComponentTypeEnum["customMark"] = "customMark";
 	})(ComponentTypeEnum || (ComponentTypeEnum = {}));
 
@@ -8613,9 +8617,9 @@
 	    return new OrdinalScale().domain(this._domain).range(this._ordinalRange).unknown(this._unknown);
 	  }
 	  scale(d) {
-	    const special = this._getSpecifiedValue(d);
-	    if (!isNil(special)) return special;
-	    const key = `${d}`;
+	    const key = `${d}`,
+	      special = this._getSpecifiedValue(key);
+	    if (void 0 !== special) return special;
 	    let i = this._index.get(key);
 	    if (!i) {
 	      if (this._unknown !== implicit) return this._unknown;
@@ -9074,12 +9078,33 @@
 	    } else z = ticks$1(i, j, Math.min(j - i, count)).map(this._pows);
 	    return r ? z.reverse() : z;
 	  }
+	  forceTicks() {
+	    let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+	    const d = this.calculateVisibleDomain(this._range);
+	    return forceTicks(d[0], d[d.length - 1], count);
+	  }
+	  stepTicks(step) {
+	    const d = this.calculateVisibleDomain(this._range);
+	    return stepTicks(d[0], d[d.length - 1], step);
+	  }
 	  nice() {
 	    return this.domain(nice(this.domain(), {
 	      floor: x => this._pows(Math.floor(this._logs(x))),
 	      ceil: x => this._pows(Math.ceil(this._logs(x)))
 	    }));
 	  }
+	  niceMin() {
+	    const maxD = this._domain[this._domain.length - 1];
+	    this.nice();
+	    const niceDomain = cloneDeep(this._domain);
+	    return this._domain && (niceDomain[niceDomain.length - 1] = maxD, this.domain(niceDomain)), this;
+	  }
+	  niceMax() {
+	    const minD = this._domain[0];
+	    this.nice();
+	    const niceDomain = cloneDeep(this._domain);
+	    return this._domain && (niceDomain[0] = minD, this.domain(niceDomain)), this;
+	  }
 	}
 
 	class PointScale extends BandScale {
@@ -15558,7 +15583,7 @@
 	const EnvContribution = Symbol.for("EnvContribution");
 	const Global = Symbol.for("Global");
 
-	var __decorate$1I = 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;
@@ -15683,7 +15708,7 @@
 	    return this._env || this.setEnv("browser"), this.envContribution.loadBlob(url);
 	  }
 	};
-	DefaultGlobal = __decorate$1I([injectable(), __param$S(0, inject(ContributionProvider)), __param$S(0, named(EnvContribution)), __metadata$15("design:paramtypes", [Object])], DefaultGlobal);
+	DefaultGlobal = __decorate$1K([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 {
@@ -16952,7 +16977,7 @@
 	  opacity: 1
 	});
 
-	var __decorate$1H = 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;
@@ -17064,9 +17089,9 @@
 	    return data.str += suffix, data.width += suffixWidth, data;
 	  }
 	};
-	ATextMeasure = __decorate$1H([injectable()], ATextMeasure);
+	ATextMeasure = __decorate$1J([injectable()], ATextMeasure);
 
-	var __decorate$1G = 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;
@@ -17075,7 +17100,7 @@
 	};
 	const TextMeasureContribution = Symbol.for("TextMeasureContribution");
 	let DefaultTextMeasureContribution = class extends ATextMeasure {};
-	DefaultTextMeasureContribution = __decorate$1G([injectable()], DefaultTextMeasureContribution);
+	DefaultTextMeasureContribution = __decorate$1I([injectable()], DefaultTextMeasureContribution);
 
 	const container = new Container();
 
@@ -17447,7 +17472,7 @@
 	  return containPath(commands, lineWidth, !0, x, y);
 	}
 
-	var __decorate$1F = 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;
@@ -17510,7 +17535,7 @@
 	    }, null != option ? option : {}), textSpec);
 	  }
 	};
-	DefaultGraphicUtil = __decorate$1F([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(TextMeasureContribution)), __param$R(1, inject(Global)), __metadata$14("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
+	DefaultGraphicUtil = __decorate$1H([injectable(), __param$R(0, inject(ContributionProvider)), __param$R(0, named(TextMeasureContribution)), __param$R(1, inject(Global)), __metadata$14("design:paramtypes", [Object, Object])], DefaultGraphicUtil);
 	var TransformMode;
 	!function (TransformMode) {
 	  TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -17554,7 +17579,7 @@
 	    return this;
 	  }
 	};
-	DefaultTransformUtil = __decorate$1F([injectable(), __metadata$14("design:paramtypes", [])], DefaultTransformUtil);
+	DefaultTransformUtil = __decorate$1H([injectable(), __metadata$14("design:paramtypes", [])], DefaultTransformUtil);
 
 	const defaultThemeObj = {
 	    arc: DefaultArcAttribute,
@@ -22109,7 +22134,7 @@
 	  }
 	}
 
-	var __decorate$1E = 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;
@@ -22157,9 +22182,9 @@
 	    return "browser" === this.global.env ? 10 : 0;
 	  }
 	};
-	DefaultLayerService = __decorate$1E([injectable(), __param$Q(0, inject(Global)), __metadata$13("design:paramtypes", [Object])], DefaultLayerService);
+	DefaultLayerService = __decorate$1G([injectable(), __param$Q(0, inject(Global)), __metadata$13("design:paramtypes", [Object])], DefaultLayerService);
 
-	var __decorate$1D = 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;
@@ -22263,7 +22288,7 @@
 	    this._handler.clearViewBox(viewBox, color);
 	  }
 	};
-	__decorate$1D([postConstruct(), __metadata$12("design:type", Function), __metadata$12("design:paramtypes", []), __metadata$12("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1D([injectable(), __param$P(0, inject(Global)), __metadata$12("design:paramtypes", [Object])], DefaultWindow);
+	__decorate$1F([postConstruct(), __metadata$12("design:type", Function), __metadata$12("design:paramtypes", []), __metadata$12("design:returntype", void 0)], DefaultWindow.prototype, "postInit", null), DefaultWindow = __decorate$1F([injectable(), __param$P(0, inject(Global)), __metadata$12("design:paramtypes", [Object])], DefaultWindow);
 
 	const TransformUtil = Symbol.for("TransformUtil");
 	const GraphicUtil = Symbol.for("GraphicUtil");
@@ -22558,7 +22583,7 @@
 	const TextRenderContribution = Symbol.for("TextRenderContribution");
 	const InteractiveSubRenderContribution = Symbol.for("InteractiveSubRenderContribution");
 
-	var __decorate$1C = 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;
@@ -22770,9 +22795,9 @@
 	    drawPathProxy(arc, context, x, y, drawContext, params) || this.drawShape(arc, context, x, y, drawContext, params), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasArcRender = __decorate$1C([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(ArcRenderContribution)), __metadata$11("design:paramtypes", [Object])], DefaultCanvasArcRender);
+	DefaultCanvasArcRender = __decorate$1E([injectable(), __param$O(0, inject(ContributionProvider)), __param$O(0, named(ArcRenderContribution)), __metadata$11("design:paramtypes", [Object])], DefaultCanvasArcRender);
 
-	var __decorate$1B = 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;
@@ -22836,7 +22861,7 @@
 	    drawPathProxy(circle, context, x, y, drawContext, params) || this.drawShape(circle, context, x, y, drawContext, params), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasCircleRender = __decorate$1B([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(CircleRenderContribution)), __metadata$10("design:paramtypes", [Object])], DefaultCanvasCircleRender);
+	DefaultCanvasCircleRender = __decorate$1D([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];
 	class Circle extends Graphic {
@@ -25161,7 +25186,7 @@
 	  }
 	}
 
-	var __decorate$1A = 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;
@@ -25185,9 +25210,9 @@
 	    return aabbBounds;
 	  }
 	};
-	DefaultOuterBorderBoundsContribution = __decorate$1A([injectable()], DefaultOuterBorderBoundsContribution);
+	DefaultOuterBorderBoundsContribution = __decorate$1C([injectable()], DefaultOuterBorderBoundsContribution);
 
-	var __decorate$1z = 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;
@@ -25196,9 +25221,9 @@
 	};
 	const RectBoundsContribution = Symbol.for("RectBoundsContribution");
 	let DefaultRectOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-	DefaultRectOuterBorderBoundsContribution = __decorate$1z([injectable()], DefaultRectOuterBorderBoundsContribution);
+	DefaultRectOuterBorderBoundsContribution = __decorate$1B([injectable()], DefaultRectOuterBorderBoundsContribution);
 
-	var __decorate$1y = 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;
@@ -25224,9 +25249,9 @@
 	    return aabbBounds;
 	  }
 	};
-	DefaultSymbolOuterBorderBoundsContribution = __decorate$1y([injectable()], DefaultSymbolOuterBorderBoundsContribution);
+	DefaultSymbolOuterBorderBoundsContribution = __decorate$1A([injectable()], DefaultSymbolOuterBorderBoundsContribution);
 
-	var __decorate$1x = 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;
@@ -25235,9 +25260,9 @@
 	};
 	const CircleBoundsContribution = Symbol.for("CircleBoundsContribution");
 	let DefaultCircleOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-	DefaultCircleOuterBorderBoundsContribution = __decorate$1x([injectable()], DefaultCircleOuterBorderBoundsContribution);
+	DefaultCircleOuterBorderBoundsContribution = __decorate$1z([injectable()], DefaultCircleOuterBorderBoundsContribution);
 
-	var __decorate$1w = 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;
@@ -25246,9 +25271,9 @@
 	};
 	const ArcBoundsContribution = Symbol.for("ArcBoundsContribution");
 	let DefaultArcOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-	DefaultArcOuterBorderBoundsContribution = __decorate$1w([injectable()], DefaultArcOuterBorderBoundsContribution);
+	DefaultArcOuterBorderBoundsContribution = __decorate$1y([injectable()], DefaultArcOuterBorderBoundsContribution);
 
-	var __decorate$1v = 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;
@@ -25257,7 +25282,7 @@
 	};
 	const PathBoundsContribution = Symbol.for("PathBoundsContribution");
 	let DefaultPathOuterBorderBoundsContribution = class extends DefaultOuterBorderBoundsContribution {};
-	DefaultPathOuterBorderBoundsContribution = __decorate$1v([injectable()], DefaultPathOuterBorderBoundsContribution);
+	DefaultPathOuterBorderBoundsContribution = __decorate$1x([injectable()], DefaultPathOuterBorderBoundsContribution);
 
 	function createMat4() {
 	  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
@@ -25317,7 +25342,7 @@
 	const matrixAllocate = new DefaultMatrixAllocate();
 	const mat4Allocate = new DefaultMat4Allocate();
 
-	var __decorate$1u = 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;
@@ -25599,7 +25624,18 @@
 	    Array.isArray(text) ? graphic.updateMultilineAABBBounds(text) : graphic.updateSingallineAABBBounds(text);
 	    const tb1 = this.tempAABBBounds1,
 	      tb2 = this.tempAABBBounds2;
-	    return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix), aabbBounds;
+	    tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2);
+	    const {
+	      scaleX = textTheme.scaleX,
+	      scaleY = textTheme.scaleY,
+	      shadowBlur = textTheme.shadowBlur,
+	      strokeBoundsBuffer = textTheme.strokeBoundsBuffer
+	    } = attribute;
+	    if (shadowBlur) {
+	      const shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
+	      boundStroke(tb1, shadowBlurHalfWidth, !0, strokeBoundsBuffer), aabbBounds.union(tb1);
+	    }
+	    return this.combindShadowAABBBounds(aabbBounds, graphic), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix), aabbBounds;
 	  }
 	  updatePathAABBBounds(attribute, pathTheme, aabbBounds, graphic) {
 	    this.updatePathProxyAABBBounds(aabbBounds, graphic) || this.updatePathAABBBoundsImprecise(attribute, pathTheme, aabbBounds, graphic);
@@ -25849,7 +25885,7 @@
 	    this.combindShadowAABBBounds(aabbBounds, graphic), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix);
 	  }
 	};
-	DefaultGraphicService = __decorate$1u([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$1w([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) {
@@ -26069,7 +26105,7 @@
 	}
 	createRichText({});
 
-	var __decorate$1t = 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;
@@ -26153,7 +26189,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$1t([injectable()], BaseRender);
+	BaseRender = __decorate$1v([injectable()], BaseRender);
 
 	function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
 	  const {
@@ -26230,7 +26266,7 @@
 	  }
 	}
 
-	var __decorate$1s = 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;
@@ -26336,7 +26372,7 @@
 	    } else this.drawSegmentItem(context, line.cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute, lineAttribute, clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb);
 	  }
 	};
-	DefaultCanvasLineRender = __decorate$1s([injectable()], DefaultCanvasLineRender);
+	DefaultCanvasLineRender = __decorate$1u([injectable()], DefaultCanvasLineRender);
 
 	function drawAreaSegments(path, segPath, percent, params) {
 	  var _a;
@@ -26414,7 +26450,7 @@
 	  }
 	}
 
-	var __decorate$1r = 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;
@@ -26583,26 +26619,26 @@
 	      x: originX = 0,
 	      x: originY = 0
 	    } = attribute;
-	    if (!1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), !1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
+	    if (!1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.fill())), this._areaRenderContribitions || (this._areaRenderContribitions = this.areaRenderContribitions.getContributions() || []), this._areaRenderContribitions.forEach(c => {
+	      c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
+	        attribute: attribute
+	      });
+	    }), !1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
 	      const {
 	        stroke: stroke
 	      } = attribute;
-	      isArray$3(stroke) && stroke[0] && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, cache.top, clipRange, "auto", {
+	      isArray$3(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, "auto", {
 	        offsetX: offsetX,
 	        offsetY: offsetY,
 	        offsetZ: offsetZ
 	      })), context.setStrokeStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute), context.stroke();
 	    }
-	    return this._areaRenderContribitions || (this._areaRenderContribitions = this.areaRenderContribitions.getContributions() || []), this._areaRenderContribitions.forEach(c => {
-	      c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
-	        attribute: attribute
-	      });
-	    }), !1;
+	    return !1;
 	  }
 	};
-	DefaultCanvasAreaRender = __decorate$1r([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(AreaRenderContribution)), __metadata$_("design:paramtypes", [Object])], DefaultCanvasAreaRender);
+	DefaultCanvasAreaRender = __decorate$1t([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(AreaRenderContribution)), __metadata$_("design:paramtypes", [Object])], DefaultCanvasAreaRender);
 
-	var __decorate$1q = 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;
@@ -26670,7 +26706,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$1q([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(PathRenderContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultCanvasPathRender);
+	DefaultCanvasPathRender = __decorate$1s([injectable(), __param$K(0, inject(ContributionProvider)), __param$K(0, named(PathRenderContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultCanvasPathRender);
 
 	const halfPi = pi$1 / 2;
 	function createRectPath(path, x, y, width, height, rectCornerRadius) {
@@ -26727,7 +26763,7 @@
 	  return path.closePath(), path;
 	}
 
-	var __decorate$1p = 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;
@@ -26799,9 +26835,9 @@
 	    drawPathProxy(rect, context, x, y, drawContext, params) || this.drawShape(rect, context, x, y, drawContext, params), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasRectRender = __decorate$1p([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(RectRenderContribution)), __metadata$Y("design:paramtypes", [Object])], DefaultCanvasRectRender);
+	DefaultCanvasRectRender = __decorate$1r([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(RectRenderContribution)), __metadata$Y("design:paramtypes", [Object])], DefaultCanvasRectRender);
 
-	var __decorate$1o = 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;
@@ -26879,9 +26915,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$1o([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(SymbolRenderContribution)), __metadata$X("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
+	DefaultCanvasSymbolRender = __decorate$1q([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(SymbolRenderContribution)), __metadata$X("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
-	var __decorate$1n = 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;
@@ -27042,9 +27078,9 @@
 	    }
 	  }
 	};
-	DefaultCanvasTextRender = __decorate$1n([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(TextRenderContribution)), __metadata$W("design:paramtypes", [Object])], DefaultCanvasTextRender);
+	DefaultCanvasTextRender = __decorate$1p([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(TextRenderContribution)), __metadata$W("design:paramtypes", [Object])], DefaultCanvasTextRender);
 
-	var __decorate$1m = 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;
@@ -27052,7 +27088,7 @@
 	  return c > 3 && r && Object.defineProperty(target, key, r), r;
 	};
 	let AbstractGraphicRender = class {};
-	AbstractGraphicRender = __decorate$1m([injectable()], AbstractGraphicRender);
+	AbstractGraphicRender = __decorate$1o([injectable()], AbstractGraphicRender);
 
 	function drawPolygon(path, points, x, y) {
 	  path.moveTo(points[0].x + x, points[0].y + y);
@@ -27099,7 +27135,7 @@
 	  };
 	}
 
-	var __decorate$1l = 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;
@@ -27162,9 +27198,9 @@
 	    drawPathProxy(polygon, context, x, y, drawContext, params) || this.drawShape(polygon, context, x, y, drawContext, params), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasPolygonRender = __decorate$1l([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(PolygonRenderContribution)), __metadata$V("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
+	DefaultCanvasPolygonRender = __decorate$1n([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(PolygonRenderContribution)), __metadata$V("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
 
-	var __decorate$1k = 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;
@@ -27241,7 +27277,7 @@
 	    }
 	  }
 	};
-	DefaultCanvasImageRender = __decorate$1k([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(ImageRenderContribution)), __metadata$U("design:paramtypes", [Object])], DefaultCanvasImageRender);
+	DefaultCanvasImageRender = __decorate$1m([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");
@@ -27389,7 +27425,7 @@
 	}
 	const canvasAllocate = new DefaultCanvasAllocate();
 
-	var __decorate$1j = 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;
@@ -27429,7 +27465,7 @@
 	    } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
 	  }
 	};
-	DefaultBaseBackgroundRenderContribution = __decorate$1j([injectable()], DefaultBaseBackgroundRenderContribution);
+	DefaultBaseBackgroundRenderContribution = __decorate$1l([injectable()], DefaultBaseBackgroundRenderContribution);
 	let DefaultBaseInteractiveRenderContribution = class {
 	  constructor(subRenderContribitions) {
 	    this.subRenderContribitions = subRenderContribitions, this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -27440,7 +27476,7 @@
 	    });
 	  }
 	};
-	DefaultBaseInteractiveRenderContribution = __decorate$1j([injectable(), __param$E(0, inject(ContributionProvider)), __param$E(0, named(InteractiveSubRenderContribution)), __metadata$T("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+	DefaultBaseInteractiveRenderContribution = __decorate$1l([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;
@@ -27553,9 +27589,9 @@
 	    pattern && (context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore());
 	  }
 	};
-	DefaultBaseTextureRenderContribution = __decorate$1j([injectable()], DefaultBaseTextureRenderContribution);
+	DefaultBaseTextureRenderContribution = __decorate$1l([injectable()], DefaultBaseTextureRenderContribution);
 
-	var __decorate$1i = 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;
@@ -27616,21 +27652,21 @@
 	    });
 	  }
 	};
-	DefaultArcRenderContribution = __decorate$1i([injectable()], DefaultArcRenderContribution);
+	DefaultArcRenderContribution = __decorate$1k([injectable()], DefaultArcRenderContribution);
 	let DefaultArcBackgroundRenderContribution = class extends DefaultBaseBackgroundRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultArcBackgroundRenderContribution = __decorate$1i([injectable()], DefaultArcBackgroundRenderContribution);
+	DefaultArcBackgroundRenderContribution = __decorate$1k([injectable()], DefaultArcBackgroundRenderContribution);
 	let DefaultArcTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultArcTextureRenderContribution = __decorate$1i([injectable()], DefaultArcTextureRenderContribution);
+	DefaultArcTextureRenderContribution = __decorate$1k([injectable()], DefaultArcTextureRenderContribution);
 
-	var __decorate$1h = 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;
@@ -27672,21 +27708,21 @@
 	    }
 	  }
 	};
-	DefaultCircleRenderContribution = __decorate$1h([injectable()], DefaultCircleRenderContribution);
+	DefaultCircleRenderContribution = __decorate$1j([injectable()], DefaultCircleRenderContribution);
 	let DefaultCircleBackgroundRenderContribution = class extends DefaultBaseBackgroundRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultCircleBackgroundRenderContribution = __decorate$1h([injectable()], DefaultCircleBackgroundRenderContribution);
+	DefaultCircleBackgroundRenderContribution = __decorate$1j([injectable()], DefaultCircleBackgroundRenderContribution);
 	let DefaultCircleTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultCircleTextureRenderContribution = __decorate$1h([injectable()], DefaultCircleTextureRenderContribution);
+	DefaultCircleTextureRenderContribution = __decorate$1j([injectable()], DefaultCircleTextureRenderContribution);
 
-	var __decorate$1g = 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;
@@ -27710,9 +27746,9 @@
 	    } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
 	  }
 	};
-	DefaultGroupBackgroundRenderContribution = __decorate$1g([injectable()], DefaultGroupBackgroundRenderContribution);
+	DefaultGroupBackgroundRenderContribution = __decorate$1i([injectable()], DefaultGroupBackgroundRenderContribution);
 
-	var __decorate$1f = 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;
@@ -27749,9 +27785,9 @@
 	    }
 	  }
 	};
-	DefaultImageBackgroundRenderContribution = __decorate$1f([injectable()], DefaultImageBackgroundRenderContribution);
+	DefaultImageBackgroundRenderContribution = __decorate$1h([injectable()], DefaultImageBackgroundRenderContribution);
 
-	var __decorate$1e = 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;
@@ -27799,19 +27835,19 @@
 	    }
 	  }
 	};
-	DefaultRectRenderContribution = __decorate$1e([injectable()], DefaultRectRenderContribution);
+	DefaultRectRenderContribution = __decorate$1g([injectable()], DefaultRectRenderContribution);
 	let DefaultRectBackgroundRenderContribution = class extends DefaultBaseBackgroundRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultRectBackgroundRenderContribution = __decorate$1e([injectable()], DefaultRectBackgroundRenderContribution);
+	DefaultRectBackgroundRenderContribution = __decorate$1g([injectable()], DefaultRectBackgroundRenderContribution);
 	let DefaultRectTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultRectTextureRenderContribution = __decorate$1e([injectable()], DefaultRectTextureRenderContribution);
+	DefaultRectTextureRenderContribution = __decorate$1g([injectable()], DefaultRectTextureRenderContribution);
 	let SplitRectBeforeRenderContribution = class {
 	  constructor() {
 	    this.time = BaseRenderContributionTime.beforeFillStroke, this.useStyle = !0, this.order = 0;
@@ -27823,7 +27859,7 @@
 	    Array.isArray(stroke) && stroke.some(s => !1 === s) && (doFillOrStroke.doStroke = !1);
 	  }
 	};
-	SplitRectBeforeRenderContribution = __decorate$1e([injectable()], SplitRectBeforeRenderContribution);
+	SplitRectBeforeRenderContribution = __decorate$1g([injectable()], SplitRectBeforeRenderContribution);
 	let SplitRectAfterRenderContribution = class {
 	  constructor() {
 	    this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -27843,9 +27879,9 @@
 	    }
 	  }
 	};
-	SplitRectAfterRenderContribution = __decorate$1e([injectable()], SplitRectAfterRenderContribution);
+	SplitRectAfterRenderContribution = __decorate$1g([injectable()], SplitRectAfterRenderContribution);
 
-	var __decorate$1d = 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;
@@ -27888,7 +27924,7 @@
 	    }
 	  }
 	};
-	DefaultSymbolRenderContribution = __decorate$1d([injectable()], DefaultSymbolRenderContribution);
+	DefaultSymbolRenderContribution = __decorate$1f([injectable()], DefaultSymbolRenderContribution);
 	class DefaultSymbolBackgroundRenderContribution extends DefaultBaseBackgroundRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
@@ -27900,7 +27936,7 @@
 	  }
 	}
 
-	var __decorate$1c = 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;
@@ -27945,7 +27981,7 @@
 	    this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
 	  }
 	};
-	DefaultRenderService = __decorate$1c([injectable(), __param$D(0, inject(DrawContribution)), __metadata$S("design:paramtypes", [Object])], DefaultRenderService);
+	DefaultRenderService = __decorate$1e([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);
@@ -28057,7 +28093,7 @@
 	  return result;
 	}
 
-	var __decorate$1b = 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;
@@ -28124,9 +28160,9 @@
 	    context.setTransformForCurrent();
 	  }
 	};
-	Canvas3DPickItemInterceptor = __decorate$1b([injectable()], Canvas3DPickItemInterceptor);
+	Canvas3DPickItemInterceptor = __decorate$1d([injectable()], Canvas3DPickItemInterceptor);
 
-	var __decorate$1a = 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;
@@ -28233,9 +28269,9 @@
 	    return picker || null;
 	  }
 	};
-	DefaultPickService = __decorate$1a([injectable(), __param$C(0, inject(Global)), __param$C(1, inject(ContributionProvider)), __param$C(1, named(PickItemInterceptor)), __metadata$R("design:paramtypes", [Object, Object])], DefaultPickService);
+	DefaultPickService = __decorate$1c([injectable(), __param$C(0, inject(Global)), __param$C(1, inject(ContributionProvider)), __param$C(1, named(PickItemInterceptor)), __metadata$R("design:paramtypes", [Object, Object])], DefaultPickService);
 
-	var __decorate$19 = 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;
@@ -28295,7 +28331,7 @@
 	    return !1 === graphic.attribute.pickable ? null : graphic.AABBBounds.containsPoint(point) ? graphic : null;
 	  }
 	};
-	DefaultGlobalPickerService = __decorate$19([injectable(), __param$B(0, inject(Global)), __metadata$Q("design:paramtypes", [Object])], DefaultGlobalPickerService);
+	DefaultGlobalPickerService = __decorate$1b([injectable(), __param$B(0, inject(Global)), __metadata$Q("design:paramtypes", [Object])], DefaultGlobalPickerService);
 
 	function lookAt(out, eye, center, up) {
 	  let x0, x1, x2, y0, y1, y2, z0, z1, z2, len;
@@ -28412,7 +28448,7 @@
 	  }
 	}
 
-	var __decorate$18 = 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;
@@ -28921,9 +28957,9 @@
 	    this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
 	  }
 	};
-	BrowserContext2d.env = "browser", BrowserContext2d = __decorate$18([injectable(), __metadata$P("design:paramtypes", [Object, Number])], BrowserContext2d);
+	BrowserContext2d.env = "browser", BrowserContext2d = __decorate$1a([injectable(), __metadata$P("design:paramtypes", [Object, Number])], BrowserContext2d);
 
-	var __decorate$17 = 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;
@@ -28951,9 +28987,15 @@
 	  get x() {
 	    return this._x;
 	  }
+	  set x(_x) {
+	    this._x = _x;
+	  }
 	  get y() {
 	    return this._y;
 	  }
+	  set y(_y) {
+	    this._y = _y;
+	  }
 	  get nativeCanvas() {
 	    return this._nativeCanvas;
 	  }
@@ -29061,7 +29103,7 @@
 	    this.controled && this._nativeCanvas.parentElement && this._nativeCanvas.parentElement.removeChild(this._nativeCanvas);
 	  }
 	};
-	BrowserCanvas.env = "browser", BrowserCanvas = __decorate$17([injectable(), __metadata$O("design:paramtypes", [Object])], BrowserCanvas);
+	BrowserCanvas.env = "browser", BrowserCanvas = __decorate$19([injectable(), __metadata$O("design:paramtypes", [Object])], BrowserCanvas);
 
 	const CanvasArcPicker = Symbol.for("CanvasArcPicker");
 	const CanvasArc3dPicker = Symbol.for("CanvasArc3dPicker");
@@ -29091,7 +29133,7 @@
 	const MathGlyphPicker = Symbol.for("MathGlyphPicker");
 	const MathPickerContribution = Symbol.for("MathPickerContribution");
 
-	var __decorate$16 = 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;
@@ -29139,9 +29181,9 @@
 	    return picker && picker.contains(graphic, point, params) ? graphic : null;
 	  }
 	};
-	__decorate$16([postConstruct(), __metadata$N("design:type", Function), __metadata$N("design:paramtypes", []), __metadata$N("design:returntype", void 0)], DefaultCanvasPickerService.prototype, "init", null), DefaultCanvasPickerService = __decorate$16([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(Global)), __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$18([postConstruct(), __metadata$N("design:type", Function), __metadata$N("design:paramtypes", []), __metadata$N("design:returntype", void 0)], DefaultCanvasPickerService.prototype, "init", null), DefaultCanvasPickerService = __decorate$18([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(Global)), __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$15 = 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;
@@ -29355,9 +29397,9 @@
 	    this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
 	  }
 	};
-	EmptyContext2d = __decorate$15([injectable(), __metadata$M("design:paramtypes", [Object, Number])], EmptyContext2d);
+	EmptyContext2d = __decorate$17([injectable(), __metadata$M("design:paramtypes", [Object, Number])], EmptyContext2d);
 
-	var __decorate$14 = 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;
@@ -29392,7 +29434,7 @@
 	    return picker && picker.contains(graphic, point, params) ? graphic : null;
 	  }
 	};
-	__decorate$14([postConstruct(), __metadata$L("design:type", Function), __metadata$L("design:paramtypes", []), __metadata$L("design:returntype", void 0)], DefaultMathPickerService.prototype, "init", null), DefaultMathPickerService = __decorate$14([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(MathPickerContribution)), __param$z(1, inject(Global)), __param$z(2, inject(ContributionProvider)), __param$z(2, named(PickItemInterceptor)), __metadata$L("design:paramtypes", [Object, Object, Object])], DefaultMathPickerService);
+	__decorate$16([postConstruct(), __metadata$L("design:type", Function), __metadata$L("design:paramtypes", []), __metadata$L("design:returntype", void 0)], DefaultMathPickerService.prototype, "init", null), DefaultMathPickerService = __decorate$16([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(MathPickerContribution)), __param$z(1, inject(Global)), __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);
@@ -29405,7 +29447,7 @@
 	const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
 	const PluginService = Symbol.for("PluginService");
 
-	var __decorate$13 = 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;
@@ -29452,13 +29494,13 @@
 	    }), this.onRegisterPlugin = [];
 	  }
 	};
-	DefaultPluginService = __decorate$13([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(AutoEnablePlugins)), __metadata$K("design:paramtypes", [Object])], DefaultPluginService);
+	DefaultPluginService = __decorate$15([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), bindContributionProvider(bind, AutoEnablePlugins);
 	});
 
-	var __decorate$12 = 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;
@@ -29510,9 +29552,9 @@
 	    }));
 	  }
 	};
-	BaseEnvContribution = __decorate$12([injectable()], BaseEnvContribution);
+	BaseEnvContribution = __decorate$14([injectable()], BaseEnvContribution);
 
-	var __decorate$11 = 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;
@@ -29522,7 +29564,7 @@
 	  __metadata$J = undefined && undefined.__metadata || function (k, v) {
 	    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 	  };
-	function createImageElement(src) {
+	function createImageElement$1(src) {
 	  let isSvg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
 	  const img = document.createElement("img");
 	  if (img.crossOrigin = "anonymous", isSvg) {
@@ -29571,7 +29613,7 @@
 	    };
 	  }
 	  loadImage(url) {
-	    return createImageElement(url, !1).then(img => ({
+	    return createImageElement$1(url, !1).then(img => ({
 	      data: img,
 	      loadState: "success"
 	    })).catch(() => ({
@@ -29580,7 +29622,7 @@
 	    }));
 	  }
 	  loadSvg(url) {
-	    return createImageElement(url, !0).then(img => ({
+	    return createImageElement$1(url, !0).then(img => ({
 	      data: img,
 	      loadState: "success"
 	    })).catch(() => ({
@@ -29633,7 +29675,7 @@
 	  }
 	  release() {}
 	};
-	BrowserEnvContribution = __decorate$11([injectable(), __metadata$J("design:paramtypes", [])], BrowserEnvContribution);
+	BrowserEnvContribution = __decorate$13([injectable(), __metadata$J("design:paramtypes", [])], BrowserEnvContribution);
 
 	function loadFeishuContributions() {
 	  container.rebind(PickerService).toService(DefaultMathPickerService);
@@ -29642,7 +29684,7 @@
 	  container.rebind(PickerService).toService(DefaultMathPickerService);
 	}
 
-	var __decorate$10 = 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;
@@ -29746,9 +29788,9 @@
 	    return (null === (_a = null == event ? void 0 : event.type) || void 0 === _a ? void 0 : _a.startsWith("mouse")) ? event : null;
 	  }
 	};
-	FeishuEnvContribution = __decorate$10([injectable(), __metadata$I("design:paramtypes", [])], FeishuEnvContribution);
+	FeishuEnvContribution = __decorate$12([injectable(), __metadata$I("design:paramtypes", [])], FeishuEnvContribution);
 
-	var __decorate$$ = 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;
@@ -29880,9 +29922,9 @@
 	  }
 	  release() {}
 	};
-	TaroEnvContribution = __decorate$$([injectable(), __metadata$H("design:paramtypes", [])], TaroEnvContribution);
+	TaroEnvContribution = __decorate$11([injectable(), __metadata$H("design:paramtypes", [])], TaroEnvContribution);
 
-	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;
@@ -29920,6 +29962,18 @@
 	    canvasMap.set(id, canvas), i >= freeCanvasIdx && freeCanvasList.push(canvas);
 	  });
 	}
+	function createImageElement(src) {
+	  let isSvg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+	  if (isSvg) return Promise.reject();
+	  const img = lynx.createImage(src);
+	  return new Promise((resolve, reject) => {
+	    img.onload = () => {
+	      resolve(img);
+	    }, img.onerror = () => {
+	      reject(new Error("加载失败"));
+	    };
+	  });
+	}
 	let LynxEnvContribution = class extends BaseEnvContribution {
 	  constructor() {
 	    super(), this.type = "lynx", this.supportEvent = !0, this.canvasMap = new Map(), this.freeCanvasList = [], this.canvasIdx = 0, this.supportsTouchEvents = !0;
@@ -29940,10 +29994,13 @@
 	    return this.freeCanvasList.length;
 	  }
 	  loadImage(url) {
-	    return Promise.resolve({
-	      data: url,
+	    return createImageElement(url, !1).then(img => ({
+	      data: img,
 	      loadState: "success"
-	    });
+	    })).catch(() => ({
+	      data: null,
+	      loadState: "fail"
+	    }));
 	  }
 	  loadSvg(url) {
 	    return Promise.reject();
@@ -29987,9 +30044,9 @@
 	  }
 	  release() {}
 	};
-	LynxEnvContribution = __decorate$_([injectable(), __metadata$G("design:paramtypes", [])], LynxEnvContribution);
+	LynxEnvContribution = __decorate$10([injectable(), __metadata$G("design:paramtypes", [])], LynxEnvContribution);
 
-	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;
@@ -30075,9 +30132,9 @@
 	  release() {}
 	  createOffscreenCanvas(params) {}
 	};
-	NodeEnvContribution = __decorate$Z([injectable()], NodeEnvContribution);
+	NodeEnvContribution = __decorate$$([injectable()], NodeEnvContribution);
 
-	var __decorate$Y = 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;
@@ -30198,13 +30255,13 @@
 	    return (null === (_a = null == event ? void 0 : event.type) || void 0 === _a ? void 0 : _a.startsWith("mouse")) ? event : null;
 	  }
 	};
-	WxEnvContribution = __decorate$Y([injectable(), __metadata$F("design:paramtypes", [])], WxEnvContribution);
+	WxEnvContribution = __decorate$_([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$X = 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;
@@ -30228,9 +30285,9 @@
 	    this.releaseWindow();
 	  }
 	};
-	BaseWindowHandlerContribution = __decorate$X([injectable(), __metadata$E("design:paramtypes", [])], BaseWindowHandlerContribution);
+	BaseWindowHandlerContribution = __decorate$Z([injectable(), __metadata$E("design:paramtypes", [])], BaseWindowHandlerContribution);
 
-	var __decorate$W = 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;
@@ -30364,9 +30421,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();
 	  }
 	};
-	BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution = __decorate$W([injectable(), __param$x(0, inject(Global)), __metadata$D("design:paramtypes", [Object])], BrowserWindowHandlerContribution);
+	BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution = __decorate$Y([injectable(), __param$x(0, inject(Global)), __metadata$D("design:paramtypes", [Object])], BrowserWindowHandlerContribution);
 
-	var __decorate$V = 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;
@@ -30411,9 +30468,9 @@
 	    return null;
 	  }
 	};
-	FeishuContext2d.env = "feishu", FeishuContext2d = __decorate$V([injectable()], FeishuContext2d);
+	FeishuContext2d.env = "feishu", FeishuContext2d = __decorate$X([injectable()], FeishuContext2d);
 
-	var __decorate$U = 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;
@@ -30435,9 +30492,15 @@
 	  get x() {
 	    return this._x;
 	  }
+	  set x(_x) {
+	    this._x = _x;
+	  }
 	  get y() {
 	    return this._y;
 	  }
+	  set y(_y) {
+	    this._y = _y;
+	  }
 	  get nativeCanvas() {
 	    return this._nativeCanvas;
 	  }
@@ -30512,9 +30575,9 @@
 	  }
 	  release() {}
 	};
-	FeishuCanvas.env = "feishu", FeishuCanvas = __decorate$U([injectable(), __metadata$C("design:paramtypes", [Object])], FeishuCanvas);
+	FeishuCanvas.env = "feishu", FeishuCanvas = __decorate$W([injectable(), __metadata$C("design:paramtypes", [Object])], FeishuCanvas);
 
-	var __decorate$T = 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;
@@ -30659,9 +30722,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$T([injectable(), __param$w(0, inject(Global)), __metadata$B("design:paramtypes", [Object])], FeishuWindowHandlerContribution);
+	FeishuWindowHandlerContribution.env = "feishu", FeishuWindowHandlerContribution = __decorate$V([injectable(), __param$w(0, inject(Global)), __metadata$B("design:paramtypes", [Object])], FeishuWindowHandlerContribution);
 
-	var __decorate$S = 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;
@@ -30725,9 +30788,9 @@
 	    return null;
 	  }
 	};
-	TaroContext2d.env = "taro", TaroContext2d = __decorate$S([injectable()], TaroContext2d);
+	TaroContext2d.env = "taro", TaroContext2d = __decorate$U([injectable()], TaroContext2d);
 
-	var __decorate$R = 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;
@@ -30749,9 +30812,15 @@
 	  get x() {
 	    return this._x;
 	  }
+	  set x(_x) {
+	    this._x = _x;
+	  }
 	  get y() {
 	    return this._y;
 	  }
+	  set y(_y) {
+	    this._y = _y;
+	  }
 	  get nativeCanvas() {
 	    return this._nativeCanvas;
 	  }
@@ -30826,9 +30895,9 @@
 	  }
 	  release() {}
 	};
-	TaroCanvas.env = "taro", TaroCanvas = __decorate$R([injectable(), __metadata$A("design:paramtypes", [Object])], TaroCanvas);
+	TaroCanvas.env = "taro", TaroCanvas = __decorate$T([injectable(), __metadata$A("design:paramtypes", [Object])], TaroCanvas);
 
-	var __decorate$Q = 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;
@@ -30983,9 +31052,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$Q([injectable(), __param$v(0, inject(Global)), __metadata$z("design:paramtypes", [Object])], TaroWindowHandlerContribution);
+	TaroWindowHandlerContribution.env = "taro", TaroWindowHandlerContribution = __decorate$S([injectable(), __param$v(0, inject(Global)), __metadata$z("design:paramtypes", [Object])], TaroWindowHandlerContribution);
 
-	var __decorate$P = 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;
@@ -31039,9 +31108,9 @@
 	    });
 	  }
 	};
-	LynxContext2d.env = "lynx", LynxContext2d = __decorate$P([injectable()], LynxContext2d);
+	LynxContext2d.env = "lynx", LynxContext2d = __decorate$R([injectable()], LynxContext2d);
 
-	var __decorate$O = 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;
@@ -31063,9 +31132,15 @@
 	  get x() {
 	    return this._x;
 	  }
+	  set x(_x) {
+	    this._x = _x;
+	  }
 	  get y() {
 	    return this._y;
 	  }
+	  set y(_y) {
+	    this._y = _y;
+	  }
 	  get nativeCanvas() {
 	    return this._nativeCanvas;
 	  }
@@ -31140,9 +31215,9 @@
 	  }
 	  release() {}
 	};
-	LynxCanvas.env = "lynx", LynxCanvas = __decorate$O([injectable(), __metadata$y("design:paramtypes", [Object])], LynxCanvas);
+	LynxCanvas.env = "lynx", LynxCanvas = __decorate$Q([injectable(), __metadata$y("design:paramtypes", [Object])], LynxCanvas);
 
-	var __decorate$N = 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;
@@ -31287,9 +31362,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$N([injectable(), __param$u(0, inject(Global)), __metadata$x("design:paramtypes", [Object])], LynxWindowHandlerContribution);
+	LynxWindowHandlerContribution.env = "lynx", LynxWindowHandlerContribution = __decorate$P([injectable(), __param$u(0, inject(Global)), __metadata$x("design:paramtypes", [Object])], LynxWindowHandlerContribution);
 
-	var __decorate$M = 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;
@@ -31308,9 +31383,9 @@
 	  }
 	  release() {}
 	};
-	NodeContext2d.env = "node", NodeContext2d = __decorate$M([injectable(), __metadata$w("design:paramtypes", [Object, Number])], NodeContext2d);
+	NodeContext2d.env = "node", NodeContext2d = __decorate$O([injectable(), __metadata$w("design:paramtypes", [Object, Number])], NodeContext2d);
 
-	var __decorate$L = 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;
@@ -31332,9 +31407,11 @@
 	  get x() {
 	    return 0;
 	  }
+	  set x(_x) {}
 	  get y() {
 	    return 0;
 	  }
+	  set y(_y) {}
 	  get nativeCanvas() {
 	    return this._nativeCanvas;
 	  }
@@ -31407,9 +31484,9 @@
 	    this._nativeCanvas.release && isFunction(this._nativeCanvas.release) && this._nativeCanvas.release();
 	  }
 	};
-	NodeCanvas.env = "node", NodeCanvas = __decorate$L([injectable(), __metadata$v("design:paramtypes", [Object])], NodeCanvas);
+	NodeCanvas.env = "node", NodeCanvas = __decorate$N([injectable(), __metadata$v("design:paramtypes", [Object])], NodeCanvas);
 
-	var __decorate$K = 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;
@@ -31510,9 +31587,9 @@
 	  }
 	  clearViewBox(vb, color) {}
 	};
-	NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$K([injectable(), __param$t(0, inject(Global)), __metadata$u("design:paramtypes", [Object])], NodeWindowHandlerContribution);
+	NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$M([injectable(), __param$t(0, inject(Global)), __metadata$u("design:paramtypes", [Object])], NodeWindowHandlerContribution);
 
-	var __decorate$J = 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;
@@ -31525,9 +31602,9 @@
 	    return null;
 	  }
 	};
-	WxContext2d.env = "wx", WxContext2d = __decorate$J([injectable()], WxContext2d);
+	WxContext2d.env = "wx", WxContext2d = __decorate$L([injectable()], WxContext2d);
 
-	var __decorate$I = 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;
@@ -31549,9 +31626,15 @@
 	  get x() {
 	    return this._x;
 	  }
+	  set x(_x) {
+	    this._x = _x;
+	  }
 	  get y() {
 	    return this._y;
 	  }
+	  set y(_y) {
+	    this._y = _y;
+	  }
 	  get nativeCanvas() {
 	    return this._nativeCanvas;
 	  }
@@ -31626,9 +31709,9 @@
 	  }
 	  release() {}
 	};
-	WxCanvas.env = "wx", WxCanvas = __decorate$I([injectable(), __metadata$t("design:paramtypes", [Object])], WxCanvas);
+	WxCanvas.env = "wx", WxCanvas = __decorate$K([injectable(), __metadata$t("design:paramtypes", [Object])], WxCanvas);
 
-	var __decorate$H = 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;
@@ -31774,7 +31857,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$H([injectable(), __param$s(0, inject(Global)), __metadata$s("design:paramtypes", [Object])], WxWindowHandlerContribution);
+	WxWindowHandlerContribution.env = "wx", WxWindowHandlerContribution = __decorate$J([injectable(), __param$s(0, inject(Global)), __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);
@@ -31784,7 +31867,7 @@
 	  bind(DefaultTextMeasureContribution).toSelf().inSingletonScope(), bind(TextMeasureContribution).toService(DefaultTextMeasureContribution), bindContributionProvider(bind, TextMeasureContribution);
 	});
 
-	var __decorate$G = 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;
@@ -31804,9 +31887,9 @@
 	    this.global = global, this.offscreen = !1;
 	  }
 	  init(layer, window, params) {
-	    if (this.layer = layer, params.main) this.context = window.getContext(), this.canvas = this.context.getCanvas();else {
+	    if (this.layer = layer, this.window = window, params.main) this.main = !0, this.context = window.getContext(), this.canvas = this.context.getCanvas();else {
 	      let nativeCanvas;
-	      nativeCanvas = params.canvasId ? this.global.getElementById(params.canvasId) : this.global.createCanvas({
+	      this.main = !1, nativeCanvas = params.canvasId ? this.global.getElementById(params.canvasId) : this.global.createCanvas({
 	        width: window.width,
 	        height: window.height
 	      }), nativeCanvas.style && (nativeCanvas.style["pointer-events"] = "none");
@@ -31830,6 +31913,10 @@
 	  resizeView(w, h) {}
 	  render(group, params, userParams) {
 	    var _a;
+	    if (!this.main) {
+	      const windowCanvas = this.window.getContext().getCanvas().nativeCanvas;
+	      !windowCanvas || this.canvas.x === windowCanvas.offsetLeft && this.canvas.y === windowCanvas.offsetTop || (this.canvas.x = windowCanvas.offsetLeft, this.canvas.y = windowCanvas.offsetTop, this.canvas.applyPosition());
+	    }
 	    params.renderService.render(group, Object.assign(Object.assign({
 	      context: this.context,
 	      clear: null !== (_a = params.background) && void 0 !== _a ? _a : "#ffffff"
@@ -31858,9 +31945,9 @@
 	    this.canvas.release();
 	  }
 	};
-	CanvasLayerHandlerContribution = __decorate$G([injectable(), __param$r(0, inject(Global)), __metadata$r("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
+	CanvasLayerHandlerContribution = __decorate$I([injectable(), __param$r(0, inject(Global)), __metadata$r("design:paramtypes", [Object])], CanvasLayerHandlerContribution);
 
-	var __decorate$F = 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;
@@ -31931,7 +32018,7 @@
 	  }
 	  merge(layerHandlers) {}
 	};
-	OffscreenLayerHandlerContribution = __decorate$F([injectable(), __param$q(0, inject(Global)), __metadata$q("design:paramtypes", [Object])], OffscreenLayerHandlerContribution);
+	OffscreenLayerHandlerContribution = __decorate$H([injectable(), __param$q(0, inject(Global)), __metadata$q("design:paramtypes", [Object])], OffscreenLayerHandlerContribution);
 
 	var layerHandlerModules = new ContainerModule(bind => {
 	  bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(LayerHandlerContribution).toService(CanvasLayerHandlerContribution);
@@ -31941,7 +32028,7 @@
 	  container.load(envModules), container.load(windowModules), container.load(textMeasureModules), container.load(layerHandlerModules);
 	}
 
-	var __decorate$E = 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;
@@ -31967,7 +32054,7 @@
 	    return drawContribution.renderGroup(graphic.shadowRoot, drawContext), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
 	  }
 	};
-	ShadowRootDrawItemInterceptorContribution = __decorate$E([injectable()], ShadowRootDrawItemInterceptorContribution);
+	ShadowRootDrawItemInterceptorContribution = __decorate$G([injectable()], ShadowRootDrawItemInterceptorContribution);
 	let Canvas3DDrawItemInterceptor = class {
 	  constructor() {
 	    this.order = 1;
@@ -32040,9 +32127,9 @@
 	    context.setTransformForCurrent();
 	  }
 	};
-	Canvas3DDrawItemInterceptor = __decorate$E([injectable()], Canvas3DDrawItemInterceptor);
+	Canvas3DDrawItemInterceptor = __decorate$G([injectable()], Canvas3DDrawItemInterceptor);
 
-	var __decorate$D = 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;
@@ -32213,9 +32300,9 @@
 	    }
 	  }
 	};
-	__decorate$D([postConstruct(), __metadata$p("design:type", Function), __metadata$p("design:paramtypes", []), __metadata$p("design:returntype", void 0)], DefaultDrawContribution.prototype, "init", null), DefaultDrawContribution = __decorate$D([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$F([postConstruct(), __metadata$p("design:type", Function), __metadata$p("design:paramtypes", []), __metadata$p("design:returntype", void 0)], DefaultDrawContribution.prototype, "init", null), DefaultDrawContribution = __decorate$F([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$C = 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;
@@ -32227,9 +32314,9 @@
 	    return null;
 	  }
 	};
-	DefaultRenderSelector = __decorate$C([injectable()], DefaultRenderSelector);
+	DefaultRenderSelector = __decorate$E([injectable()], DefaultRenderSelector);
 
-	var __decorate$B = 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;
@@ -32320,9 +32407,9 @@
 	    }) : clip ? context.restore() : context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasGroupRender = __decorate$B([injectable(), __param$o(0, inject(ContributionProvider)), __param$o(0, named(GroupRenderContribution)), __metadata$o("design:paramtypes", [Object])], DefaultCanvasGroupRender);
+	DefaultCanvasGroupRender = __decorate$D([injectable(), __param$o(0, inject(ContributionProvider)), __param$o(0, named(GroupRenderContribution)), __metadata$o("design:paramtypes", [Object])], DefaultCanvasGroupRender);
 
-	var __decorate$A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	  var d,
 	    c = arguments.length,
 	    r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -32373,9 +32460,9 @@
 	    }), context.setShadowStyle && context.setShadowStyle(line, attribute, defaultAttribute), context.setStrokeStyle(line, attribute, offsetX, offsetY, defaultAttribute), context.stroke());
 	  }
 	};
-	DefaultIncrementalCanvasLineRender = __decorate$A([injectable()], DefaultIncrementalCanvasLineRender);
+	DefaultIncrementalCanvasLineRender = __decorate$C([injectable()], DefaultIncrementalCanvasLineRender);
 
-	var __decorate$z = 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;
@@ -32418,10 +32505,10 @@
 	    }), context.setShadowStyle && context.setShadowStyle(area, attribute, defaultAttribute), context.setCommonStyle(area, attribute, offsetX, offsetY, defaultAttribute), context.fill());
 	  }
 	};
-	DefaultIncrementalCanvasAreaRender = __decorate$z([injectable()], DefaultIncrementalCanvasAreaRender);
+	DefaultIncrementalCanvasAreaRender = __decorate$B([injectable()], DefaultIncrementalCanvasAreaRender);
 
 	var STATUS,
-	  __decorate$y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	  __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;
@@ -32565,9 +32652,9 @@
 	    });
 	  }
 	};
-	__decorate$y([inject(Global), __metadata$n("design:type", Object)], DefaultIncrementalDrawContribution.prototype, "global", void 0), DefaultIncrementalDrawContribution = __decorate$y([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$A([inject(Global), __metadata$n("design:type", Object)], DefaultIncrementalDrawContribution.prototype, "global", void 0), DefaultIncrementalDrawContribution = __decorate$A([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$x = 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;
@@ -32698,9 +32785,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$x([injectable()], DefaultCanvasRect3dRender);
+	DefaultCanvasRect3dRender = __decorate$z([injectable()], DefaultCanvasRect3dRender);
 
-	var __decorate$w = 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;
@@ -32770,9 +32857,9 @@
 	    this.drawShape(richtext, context, x, y, drawContext), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasRichTextRender = __decorate$w([injectable()], DefaultCanvasRichTextRender);
+	DefaultCanvasRichTextRender = __decorate$y([injectable()], DefaultCanvasRichTextRender);
 
-	var __decorate$v = 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;
@@ -32804,9 +32891,9 @@
 	    }), context.highPerformanceRestore();
 	  }
 	};
-	DefaultCanvasGlyphRender = __decorate$v([injectable()], DefaultCanvasGlyphRender);
+	DefaultCanvasGlyphRender = __decorate$x([injectable()], DefaultCanvasGlyphRender);
 
-	var __decorate$u = 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;
@@ -32946,9 +33033,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$u([injectable()], DefaultCanvasArc3DRender);
+	DefaultCanvasArc3DRender = __decorate$w([injectable()], DefaultCanvasArc3DRender);
 
-	var __decorate$t = 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;
@@ -33080,9 +33167,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$t([injectable()], DefaultCanvasPyramid3dRender);
+	DefaultCanvasPyramid3dRender = __decorate$v([injectable()], DefaultCanvasPyramid3dRender);
 
-	var __decorate$s = 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;
@@ -33094,15 +33181,15 @@
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultPolygonBackgroundRenderContribution = __decorate$s([injectable()], DefaultPolygonBackgroundRenderContribution);
+	DefaultPolygonBackgroundRenderContribution = __decorate$u([injectable()], DefaultPolygonBackgroundRenderContribution);
 	let DefaultPolygonTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultPolygonTextureRenderContribution = __decorate$s([injectable()], DefaultPolygonTextureRenderContribution);
+	DefaultPolygonTextureRenderContribution = __decorate$u([injectable()], DefaultPolygonTextureRenderContribution);
 
-	var __decorate$r = 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;
@@ -33114,15 +33201,15 @@
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultPathBackgroundRenderContribution = __decorate$r([injectable()], DefaultPathBackgroundRenderContribution);
+	DefaultPathBackgroundRenderContribution = __decorate$t([injectable()], DefaultPathBackgroundRenderContribution);
 	let DefaultPathTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
 	  }
 	};
-	DefaultPathTextureRenderContribution = __decorate$r([injectable()], DefaultPathTextureRenderContribution);
+	DefaultPathTextureRenderContribution = __decorate$t([injectable()], DefaultPathTextureRenderContribution);
 
-	var __decorate$q = 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;
@@ -33134,7 +33221,7 @@
 	    super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
 	  }
 	};
-	DefaultAreaBackgroundRenderContribution = __decorate$q([injectable()], DefaultAreaBackgroundRenderContribution);
+	DefaultAreaBackgroundRenderContribution = __decorate$s([injectable()], DefaultAreaBackgroundRenderContribution);
 	let DefaultAreaTextureRenderContribution = class extends DefaultBaseTextureRenderContribution {
 	  constructor() {
 	    super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
@@ -33181,7 +33268,7 @@
 	    pattern && (context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore());
 	  }
 	};
-	DefaultAreaTextureRenderContribution = __decorate$q([injectable()], DefaultAreaTextureRenderContribution);
+	DefaultAreaTextureRenderContribution = __decorate$s([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).toSelf().inSingletonScope(), bind(SplitRectAfterRenderContribution).toSelf().inSingletonScope(), bind(RectRenderContribution).toService(DefaultRectRenderContribution), bind(RectRenderContribution).toService(DefaultRectBackgroundRenderContribution), bind(RectRenderContribution).toService(DefaultRectTextureRenderContribution), bind(RectRenderContribution).toService(SplitRectBeforeRenderContribution), bind(RectRenderContribution).toService(SplitRectAfterRenderContribution), 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);
@@ -33191,7 +33278,7 @@
 	  container.load(renderModule);
 	}
 
-	var __decorate$p = 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;
@@ -33234,9 +33321,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasCirclePicker = __decorate$p([injectable(), __param$m(0, inject(CircleRender)), __metadata$m("design:paramtypes", [Object])], DefaultCanvasCirclePicker);
+	DefaultCanvasCirclePicker = __decorate$r([injectable(), __param$m(0, inject(CircleRender)), __metadata$m("design:paramtypes", [Object])], DefaultCanvasCirclePicker);
 
-	var __decorate$o = 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;
@@ -33296,9 +33383,9 @@
 	    return pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasRectPicker = __decorate$o([injectable(), __param$l(0, inject(RectRender)), __metadata$l("design:paramtypes", [Object])], DefaultCanvasRectPicker);
+	DefaultCanvasRectPicker = __decorate$q([injectable(), __param$l(0, inject(RectRender)), __metadata$l("design:paramtypes", [Object])], DefaultCanvasRectPicker);
 
-	var __decorate$n = 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;
@@ -33342,9 +33429,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasArcPicker = __decorate$n([injectable(), __param$k(0, inject(ArcRender)), __metadata$k("design:paramtypes", [Object])], DefaultCanvasArcPicker);
+	DefaultCanvasArcPicker = __decorate$p([injectable(), __param$k(0, inject(ArcRender)), __metadata$k("design:paramtypes", [Object])], DefaultCanvasArcPicker);
 
-	var __decorate$m = 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;
@@ -33383,9 +33470,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$m([injectable(), __param$j(0, inject(AreaRender)), __metadata$j("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
+	DefaultCanvasAreaPicker = __decorate$o([injectable(), __param$j(0, inject(AreaRender)), __metadata$j("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
 
-	var __decorate$l = 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;
@@ -33403,9 +33490,9 @@
 	    return !!pickContext && !!image.AABBBounds.containsPoint(point);
 	  }
 	};
-	DefaultCanvasImagePicker = __decorate$l([injectable()], DefaultCanvasImagePicker);
+	DefaultCanvasImagePicker = __decorate$n([injectable()], DefaultCanvasImagePicker);
 
-	var __decorate$k = 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;
@@ -33413,9 +33500,9 @@
 	  return c > 3 && r && Object.defineProperty(target, key, r), r;
 	};
 	let BasePicker = class extends BaseRender {};
-	BasePicker = __decorate$k([injectable()], BasePicker);
+	BasePicker = __decorate$m([injectable()], BasePicker);
 
-	var __decorate$j = 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;
@@ -33465,9 +33552,9 @@
 	    }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasLinePicker = __decorate$j([injectable(), __param$i(0, inject(LineRender)), __metadata$i("design:paramtypes", [Object])], DefaultCanvasLinePicker);
+	DefaultCanvasLinePicker = __decorate$l([injectable(), __param$i(0, inject(LineRender)), __metadata$i("design:paramtypes", [Object])], DefaultCanvasLinePicker);
 
-	var __decorate$i = 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;
@@ -33517,9 +33604,9 @@
 	    }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasPathPicker = __decorate$i([injectable(), __param$h(0, inject(PathRender)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasPathPicker);
+	DefaultCanvasPathPicker = __decorate$k([injectable(), __param$h(0, inject(PathRender)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasPathPicker);
 
-	var __decorate$h = 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;
@@ -33571,9 +33658,9 @@
 	    }), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasSymbolPicker = __decorate$h([injectable(), __param$g(0, inject(SymbolRender)), __metadata$g("design:paramtypes", [Object])], DefaultCanvasSymbolPicker);
+	DefaultCanvasSymbolPicker = __decorate$j([injectable(), __param$g(0, inject(SymbolRender)), __metadata$g("design:paramtypes", [Object])], DefaultCanvasSymbolPicker);
 
-	var __decorate$g = 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;
@@ -33636,9 +33723,9 @@
 	    }, (context, symbolAttribute, themeAttribute) => picked), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasTextPicker = __decorate$g([injectable(), __param$f(0, inject(TextRender)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasTextPicker);
+	DefaultCanvasTextPicker = __decorate$i([injectable(), __param$f(0, inject(TextRender)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasTextPicker);
 
-	var __decorate$f = 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;
@@ -33680,9 +33767,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultCanvasPolygonPicker = __decorate$f([injectable(), __param$e(0, inject(PolygonRender)), __metadata$e("design:paramtypes", [Object])], DefaultCanvasPolygonPicker);
+	DefaultCanvasPolygonPicker = __decorate$h([injectable(), __param$e(0, inject(PolygonRender)), __metadata$e("design:paramtypes", [Object])], DefaultCanvasPolygonPicker);
 
-	var __decorate$e = 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;
@@ -33706,9 +33793,9 @@
 	    return !!richtext.AABBBounds.containsPoint(point);
 	  }
 	};
-	DefaultCanvasRichTextPicker = __decorate$e([injectable(), __param$d(0, inject(RichTextRender)), __metadata$d("design:paramtypes", [Object])], DefaultCanvasRichTextPicker);
+	DefaultCanvasRichTextPicker = __decorate$g([injectable(), __param$d(0, inject(RichTextRender)), __metadata$d("design:paramtypes", [Object])], DefaultCanvasRichTextPicker);
 
-	var __decorate$d = 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;
@@ -33744,9 +33831,9 @@
 	    return !1;
 	  }
 	};
-	DefaultCanvasGlyphPicker = __decorate$d([injectable(), __param$c(0, inject(GlyphRender)), __metadata$c("design:paramtypes", [Object])], DefaultCanvasGlyphPicker);
+	DefaultCanvasGlyphPicker = __decorate$f([injectable(), __param$c(0, inject(GlyphRender)), __metadata$c("design:paramtypes", [Object])], DefaultCanvasGlyphPicker);
 
-	var __decorate$c = 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;
@@ -33791,9 +33878,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$c([injectable(), __param$b(0, inject(Rect3DRender)), __metadata$b("design:paramtypes", [Object])], DefaultCanvasRect3dPicker);
+	DefaultCanvasRect3dPicker = __decorate$e([injectable(), __param$b(0, inject(Rect3DRender)), __metadata$b("design:paramtypes", [Object])], DefaultCanvasRect3dPicker);
 
-	var __decorate$b = 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;
@@ -33838,9 +33925,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$b([injectable(), __param$a(0, inject(Pyramid3dRender)), __metadata$a("design:paramtypes", [Object])], DefaultCanvasPyramid3dPicker);
+	DefaultCanvasPyramid3dPicker = __decorate$d([injectable(), __param$a(0, inject(Pyramid3dRender)), __metadata$a("design:paramtypes", [Object])], DefaultCanvasPyramid3dPicker);
 
-	var __decorate$a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -33885,13 +33972,13 @@
 	    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$a([injectable(), __param$9(0, inject(Arc3dRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasArc3dPicker);
+	DefaultCanvasArc3dPicker = __decorate$c([injectable(), __param$9(0, inject(Arc3dRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasArc3dPicker);
 
 	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);
 	});
 
-	var __decorate$9 = 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;
@@ -33934,9 +34021,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultMathPathPicker = __decorate$9([injectable(), __param$8(0, inject(PathRender)), __metadata$8("design:paramtypes", [Object])], DefaultMathPathPicker);
+	DefaultMathPathPicker = __decorate$b([injectable(), __param$8(0, inject(PathRender)), __metadata$8("design:paramtypes", [Object])], DefaultMathPathPicker);
 
-	var __decorate$8 = 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;
@@ -33979,9 +34066,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultMathCirclePicker = __decorate$8([injectable(), __param$7(0, inject(CircleRender)), __metadata$7("design:paramtypes", [Object])], DefaultMathCirclePicker);
+	DefaultMathCirclePicker = __decorate$a([injectable(), __param$7(0, inject(CircleRender)), __metadata$7("design:paramtypes", [Object])], DefaultMathCirclePicker);
 
-	var __decorate$7 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$9 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
 	    var d,
 	      c = arguments.length,
 	      r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -34041,9 +34128,9 @@
 	    return pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultMathRectPicker = __decorate$7([injectable(), __param$6(0, inject(RectRender)), __metadata$6("design:paramtypes", [Object])], DefaultMathRectPicker);
+	DefaultMathRectPicker = __decorate$9([injectable(), __param$6(0, inject(RectRender)), __metadata$6("design:paramtypes", [Object])], DefaultMathRectPicker);
 
-	var __decorate$6 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$8 = 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;
@@ -34087,9 +34174,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultMathArcPicker = __decorate$6([injectable(), __param$5(0, inject(ArcRender)), __metadata$5("design:paramtypes", [Object])], DefaultMathArcPicker);
+	DefaultMathArcPicker = __decorate$8([injectable(), __param$5(0, inject(ArcRender)), __metadata$5("design:paramtypes", [Object])], DefaultMathArcPicker);
 
-	var __decorate$5 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$7 = 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;
@@ -34128,9 +34215,9 @@
 	    return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(point.x, point.y), picked)), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultMathAreaPicker = __decorate$5([injectable(), __param$4(0, inject(AreaRender)), __metadata$4("design:paramtypes", [Object])], DefaultMathAreaPicker);
+	DefaultMathAreaPicker = __decorate$7([injectable(), __param$4(0, inject(AreaRender)), __metadata$4("design:paramtypes", [Object])], DefaultMathAreaPicker);
 
-	var __decorate$4 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$6 = 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;
@@ -34173,9 +34260,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultMathLinePicker = __decorate$4([injectable(), __param$3(0, inject(LineRender)), __metadata$3("design:paramtypes", [Object])], DefaultMathLinePicker);
+	DefaultMathLinePicker = __decorate$6([injectable(), __param$3(0, inject(LineRender)), __metadata$3("design:paramtypes", [Object])], DefaultMathLinePicker);
 
-	var __decorate$3 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$5 = 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;
@@ -34218,9 +34305,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultMathSymbolPicker = __decorate$3([injectable(), __param$2(0, inject(SymbolRender)), __metadata$2("design:paramtypes", [Object])], DefaultMathSymbolPicker);
+	DefaultMathSymbolPicker = __decorate$5([injectable(), __param$2(0, inject(SymbolRender)), __metadata$2("design:paramtypes", [Object])], DefaultMathSymbolPicker);
 
-	var __decorate$2 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$4 = 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;
@@ -34235,9 +34322,9 @@
 	    return !!text.AABBBounds.containsPoint(point);
 	  }
 	};
-	DefaultMathTextPicker = __decorate$2([injectable()], DefaultMathTextPicker);
+	DefaultMathTextPicker = __decorate$4([injectable()], DefaultMathTextPicker);
 
-	var __decorate$1 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$3 = 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;
@@ -34279,9 +34366,9 @@
 	    }), pickContext.highPerformanceRestore(), picked;
 	  }
 	};
-	DefaultMathPolygonPicker = __decorate$1([injectable(), __param$1(0, inject(PolygonRender)), __metadata$1("design:paramtypes", [Object])], DefaultMathPolygonPicker);
+	DefaultMathPolygonPicker = __decorate$3([injectable(), __param$1(0, inject(PolygonRender)), __metadata$1("design:paramtypes", [Object])], DefaultMathPolygonPicker);
 
-	var __decorate = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+	var __decorate$2 = 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;
@@ -34317,7 +34404,7 @@
 	    return !1;
 	  }
 	};
-	DefaultMathGlyphPicker = __decorate([injectable(), __param(0, inject(GlyphRender)), __metadata("design:paramtypes", [Object])], DefaultMathGlyphPicker);
+	DefaultMathGlyphPicker = __decorate$2([injectable(), __param(0, inject(GlyphRender)), __metadata("design:paramtypes", [Object])], DefaultMathGlyphPicker);
 
 	var mathPickModule = new ContainerModule(bind => {
 	  bind(DefaultMathCirclePicker).toSelf().inSingletonScope(), bind(MathCirclePicker).toService(DefaultMathCirclePicker), bind(MathPickerContribution).toService(MathCirclePicker), bind(DefaultMathRectPicker).toSelf().inSingletonScope(), bind(MathRectPicker).toService(DefaultMathRectPicker), bind(MathPickerContribution).toService(MathRectPicker), bind(DefaultMathArcPicker).toSelf().inSingletonScope(), bind(MathArcPicker).toService(DefaultMathArcPicker), bind(MathPickerContribution).toService(MathArcPicker), bind(DefaultMathAreaPicker).toSelf().inSingletonScope(), bind(MathAreaPicker).toService(DefaultMathAreaPicker), bind(MathPickerContribution).toService(MathAreaPicker), bind(DefaultMathLinePicker).toSelf().inSingletonScope(), bind(MathLinePicker).toService(DefaultMathLinePicker), bind(MathPickerContribution).toService(MathLinePicker), bind(DefaultMathPathPicker).toSelf().inSingletonScope(), bind(MathPathPicker).toService(DefaultMathPathPicker), bind(MathPickerContribution).toService(MathPathPicker), bind(DefaultMathSymbolPicker).toSelf().inSingletonScope(), bind(MathSymbolPicker).toService(DefaultMathSymbolPicker), bind(MathPickerContribution).toService(MathSymbolPicker), bind(DefaultMathTextPicker).toSelf().inSingletonScope(), bind(MathTextPicker).toService(DefaultMathTextPicker), bind(MathPickerContribution).toService(MathTextPicker), bind(DefaultMathPolygonPicker).toSelf().inSingletonScope(), bind(MathPolygonPicker).toService(DefaultMathPolygonPicker), bind(MathPickerContribution).toService(MathPolygonPicker), bind(DefaultMathGlyphPicker).toSelf().inSingletonScope(), bind(MathGlyphPicker).toService(DefaultMathGlyphPicker), bind(DefaultMathGlyphPicker).toService(MathGlyphPicker), bindContributionProvider(bind, MathPickerContribution);
@@ -34606,7 +34693,7 @@
 	          return this.viewBox.height();
 	        }
 	      }
-	    })), params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, !1 !== params.interactiveLayer && this.initInteractiveLayer();
+	    })), params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer;
 	  }
 	  get3dOptions(options) {
 	    const {
@@ -34742,8 +34829,8 @@
 	  removeLayer(ILayerId) {
 	    return this.removeChild(this.findChildByUid(ILayerId));
 	  }
-	  initInteractiveLayer() {
-	    this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive";
+	  tryInitInteractiveLayer() {
+	    this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive");
 	  }
 	  clearViewBox(color) {
 	    this.window.clearViewBox(this._viewBox, color);
@@ -35995,7 +36082,7 @@
 	}(LayoutState || (LayoutState = {}));
 	var HOOK_EVENT;
 	!function (HOOK_EVENT) {
-	  HOOK_EVENT.BEFORE_PARSE_VIEW = "beforeParseView", HOOK_EVENT.AFTER_PARSE_VIEW = "afterParseView", HOOK_EVENT.BEFORE_TRANSFORM = "beforeTransform", HOOK_EVENT.AFTER_TRANSFORM = "afterTransform", HOOK_EVENT.BEFORE_CREATE_VRENDER_STAGE = "beforeCreateVRenderStage", HOOK_EVENT.AFTER_CREATE_VRENDER_STAGE = "afterCreateVRenderStage", HOOK_EVENT.BEFORE_CREATE_VRENDER_LAYER = "beforeCreateVRenderLayer", HOOK_EVENT.AFTER_CREATE_VRENDER_LAYER = "afterCreateVRenderLayer", HOOK_EVENT.BEFORE_VRENDER_DRAW = "beforeVRenderDraw", HOOK_EVENT.AFTER_VRENDER_DRAW = "afterVRenderDraw", HOOK_EVENT.BEFORE_MARK_JOIN = "beforeMarkJoin", HOOK_EVENT.AFTER_MARK_JOIN = "afterMarkJoin", HOOK_EVENT.BEFORE_MARK_UPDATE = "beforeMarkUpdate", HOOK_EVENT.AFTER_MARK_UPDATE = "afterMarkUpdate", HOOK_EVENT.BEFORE_MARK_STATE = "beforeMarkState", HOOK_EVENT.AFTER_MARK_STATE = "afterMarkState", HOOK_EVENT.BEFORE_MARK_ENCODE = "beforeMarkEncode", HOOK_EVENT.AFTER_MARK_ENCODE = "afterMarkEncode", HOOK_EVENT.BEFORE_DO_LAYOUT = "beforeDoLayout", HOOK_EVENT.AFTER_DO_LAYOUT = "afterDoLayout", HOOK_EVENT.BEFORE_MARK_LAYOUT_END = "beforeMarkLayoutEnd", HOOK_EVENT.AFTER_MARK_LAYOUT_END = "afterMarkLayoutEnd", HOOK_EVENT.BEFORE_DO_RENDER = "beforeDoRender", HOOK_EVENT.AFTER_DO_RENDER = "afterDoRender", HOOK_EVENT.BEFORE_MARK_RENDER_END = "beforeMarkRenderEnd", HOOK_EVENT.AFTER_MARK_RENDER_END = "afterMarkRenderEnd", HOOK_EVENT.BEFORE_CREATE_VRENDER_MARK = "beforeCreateVRenderMark", HOOK_EVENT.AFTER_CREATE_VRENDER_MARK = "afterCreateVRenderMark", HOOK_EVENT.BEFORE_ADD_VRENDER_MARK = "beforeAddVRenderMark", HOOK_EVENT.AFTER_ADD_VRENDER_MARK = "afterAddVRenderMark", HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER = "afterVRenderNextRender", HOOK_EVENT.BEFORE_ELEMENT_UPDATE_DATA = "beforeElementUpdateData", HOOK_EVENT.AFTER_ELEMENT_UPDATE_DATA = "afterElementUpdateData", HOOK_EVENT.BEFORE_ELEMENT_STATE = "beforeElementState", HOOK_EVENT.AFTER_ELEMENT_STATE = "afterElementState", HOOK_EVENT.BEFORE_ELEMENT_ENCODE = "beforeElementEncode", HOOK_EVENT.AFTER_ELEMENT_ENCODE = "afterElementEncode", HOOK_EVENT.ANIMATION_START = "animationStart", HOOK_EVENT.ANIMATION_END = "animationEnd", HOOK_EVENT.ELEMENT_ANIMATION_START = "elementAnimationStart", HOOK_EVENT.ELEMENT_ANIMATION_END = "elementAnimationEnd";
+	  HOOK_EVENT.BEFORE_PARSE_VIEW = "beforeParseView", HOOK_EVENT.AFTER_PARSE_VIEW = "afterParseView", HOOK_EVENT.BEFORE_TRANSFORM = "beforeTransform", HOOK_EVENT.AFTER_TRANSFORM = "afterTransform", HOOK_EVENT.BEFORE_CREATE_VRENDER_STAGE = "beforeCreateVRenderStage", HOOK_EVENT.AFTER_CREATE_VRENDER_STAGE = "afterCreateVRenderStage", HOOK_EVENT.BEFORE_CREATE_VRENDER_LAYER = "beforeCreateVRenderLayer", HOOK_EVENT.AFTER_CREATE_VRENDER_LAYER = "afterCreateVRenderLayer", HOOK_EVENT.BEFORE_VRENDER_DRAW = "beforeVRenderDraw", HOOK_EVENT.AFTER_VRENDER_DRAW = "afterVRenderDraw", HOOK_EVENT.BEFORE_MARK_JOIN = "beforeMarkJoin", HOOK_EVENT.AFTER_MARK_JOIN = "afterMarkJoin", HOOK_EVENT.BEFORE_MARK_UPDATE = "beforeMarkUpdate", HOOK_EVENT.AFTER_MARK_UPDATE = "afterMarkUpdate", HOOK_EVENT.BEFORE_MARK_STATE = "beforeMarkState", HOOK_EVENT.AFTER_MARK_STATE = "afterMarkState", HOOK_EVENT.BEFORE_MARK_ENCODE = "beforeMarkEncode", HOOK_EVENT.AFTER_MARK_ENCODE = "afterMarkEncode", HOOK_EVENT.BEFORE_DO_LAYOUT = "beforeDoLayout", HOOK_EVENT.AFTER_DO_LAYOUT = "afterDoLayout", HOOK_EVENT.BEFORE_MARK_LAYOUT_END = "beforeMarkLayoutEnd", HOOK_EVENT.AFTER_MARK_LAYOUT_END = "afterMarkLayoutEnd", HOOK_EVENT.BEFORE_DO_RENDER = "beforeDoRender", HOOK_EVENT.AFTER_DO_RENDER = "afterDoRender", HOOK_EVENT.BEFORE_MARK_RENDER_END = "beforeMarkRenderEnd", HOOK_EVENT.AFTER_MARK_RENDER_END = "afterMarkRenderEnd", HOOK_EVENT.BEFORE_CREATE_VRENDER_MARK = "beforeCreateVRenderMark", HOOK_EVENT.AFTER_CREATE_VRENDER_MARK = "afterCreateVRenderMark", HOOK_EVENT.BEFORE_ADD_VRENDER_MARK = "beforeAddVRenderMark", HOOK_EVENT.AFTER_ADD_VRENDER_MARK = "afterAddVRenderMark", HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER = "afterVRenderNextRender", HOOK_EVENT.BEFORE_ELEMENT_UPDATE_DATA = "beforeElementUpdateData", HOOK_EVENT.AFTER_ELEMENT_UPDATE_DATA = "afterElementUpdateData", HOOK_EVENT.BEFORE_ELEMENT_STATE = "beforeElementState", HOOK_EVENT.AFTER_ELEMENT_STATE = "afterElementState", HOOK_EVENT.BEFORE_ELEMENT_ENCODE = "beforeElementEncode", HOOK_EVENT.AFTER_ELEMENT_ENCODE = "afterElementEncode", HOOK_EVENT.ANIMATION_START = "animationStart", HOOK_EVENT.ANIMATION_END = "animationEnd", HOOK_EVENT.ELEMENT_ANIMATION_START = "elementAnimationStart", HOOK_EVENT.ELEMENT_ANIMATION_END = "elementAnimationEnd", HOOK_EVENT.ALL_ANIMATION_START = "allAnimationStart", HOOK_EVENT.ALL_ANIMATION_END = "allAnimationEnd";
 	}(HOOK_EVENT || (HOOK_EVENT = {}));
 	var GrammarTypeEnum;
 	!function (GrammarTypeEnum) {
@@ -38831,6 +38918,12 @@
 	  recordEnd() {
 	    return this;
 	  }
+	  isAnimating() {
+	    let isAnimating = !1;
+	    return this.animators.forEach(animators => {
+	      isAnimating = isAnimating || animators.some(animator => animator.isAnimating);
+	    }), isAnimating;
+	  }
 	  isElementAnimating(element) {
 	    var _a;
 	    const stateAnimationCounts = null === (_a = this.elementRecorder.get(element)) || void 0 === _a ? void 0 : _a.count;
@@ -38888,7 +38981,7 @@
 	        },
 	        mergedParameters = Object.assign({
 	          [DefaultAnimationParameters]: animationParameters
-	        }, animationParameters),
+	        }, parameters),
 	        animationUnit = this.getAnimationUnit(config.timeline, element, index, animatedElements.length, parameters);
 	      animators.push(this.animateElement(config, animationUnit, element, animationParameters, mergedParameters));
 	    })), animators;
@@ -39600,7 +39693,7 @@
 	    if (this.renderContext = this.parseRenderContext(data, parameters), this.init(stage, parameters), this.renderContext.progressive) this.differ.reset(), this.elementMap.clear(), this.evaluateProgressive();else {
 	      const transformData = this.evaluateTransformSync(this._getTransformsBeforeJoin(), null != data ? data : DefaultMarkData, parameters);
 	      let inputData = transformData;
-	      transformData.progressive && (this.renderContext.parameters = parameters, this.renderContext.beforeTransformProgressive = transformData.progressive, inputData = transformData.progressive.output()), this.emit(HOOK_EVENT.BEFORE_MARK_JOIN), this.evaluateJoin(inputData), this.emit(HOOK_EVENT.AFTER_MARK_JOIN), this.emit(HOOK_EVENT.BEFORE_MARK_STATE), this.evaluateState(this.elements, this.spec.state, parameters), this.emit(HOOK_EVENT.AFTER_MARK_STATE), this.emit(HOOK_EVENT.BEFORE_MARK_ENCODE), this.evaluateEncode(this.elements, this._getEncoders(), parameters), this.emit(HOOK_EVENT.AFTER_MARK_ENCODE);
+	      (null == transformData ? void 0 : transformData.progressive) && (this.renderContext.parameters = parameters, this.renderContext.beforeTransformProgressive = transformData.progressive, inputData = transformData.progressive.output()), this.emit(HOOK_EVENT.BEFORE_MARK_JOIN), this.evaluateJoin(inputData), this.emit(HOOK_EVENT.AFTER_MARK_JOIN), this.emit(HOOK_EVENT.BEFORE_MARK_STATE), this.evaluateState(this.elements, this.spec.state, parameters), this.emit(HOOK_EVENT.AFTER_MARK_STATE), this.emit(HOOK_EVENT.BEFORE_MARK_ENCODE), this.evaluateEncode(this.elements, this._getEncoders(), parameters), this.emit(HOOK_EVENT.AFTER_MARK_ENCODE);
 	    }
 	    return this.emit(HOOK_EVENT.BEFORE_MARK_UPDATE), this.update(this.spec), this.emit(HOOK_EVENT.AFTER_MARK_UPDATE), this;
 	  }
@@ -40408,7 +40501,7 @@
 	  };
 	}
 
-	var __rest$5 = undefined && undefined.__rest || function (s, e) {
+	var __rest$6 = undefined && undefined.__rest || function (s, e) {
 	  var t = {};
 	  for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
 	  if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -40449,7 +40542,7 @@
 	    const {
 	        visible: shapeVisible
 	      } = shape,
-	      shapeStyle = __rest$5(shape, ["visible"]);
+	      shapeStyle = __rest$6(shape, ["visible"]);
 	    if (isBoolean(shapeVisible)) {
 	      const size = (null == shapeStyle ? void 0 : shapeStyle.size) || 10,
 	        maxSize = isNumber(size) ? size : Math.max(size[0], size[1]);
@@ -40493,7 +40586,7 @@
 	    const {
 	        visible: bgVisible
 	      } = panel,
-	      backgroundStyle = __rest$5(panel, ["visible"]);
+	      backgroundStyle = __rest$6(panel, ["visible"]);
 	    if (visible && isBoolean(bgVisible)) {
 	      const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
 	        visible: bgVisible && !!text,
@@ -40521,6 +40614,392 @@
 	  }
 	};
 
+	var __rest$5 = undefined && undefined.__rest || function (s, e) {
+	  var t = {};
+	  for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+	  if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+	    var i = 0;
+	    for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+	  }
+	  return t;
+	};
+	class PopTip extends AbstractComponent {
+	  constructor(attributes) {
+	    super(merge$2({}, PopTip.defaultAttributes, attributes)), this.name = "poptip", this.positionList = ["top", "tl", "tr", "bottom", "bl", "br", "left", "lt", "lb", "right", "rt", "rb"];
+	  }
+	  render() {
+	    var _a, _b, _c, _d, _e;
+	    const {
+	        title = "",
+	        titleStyle = {},
+	        position: position,
+	        content = "",
+	        contentStyle = {},
+	        panel = {},
+	        space = 4,
+	        minWidth = 0,
+	        maxWidth = 1 / 0,
+	        padding = 4,
+	        visible: visible,
+	        state: state,
+	        dx = 0,
+	        dy = 0
+	      } = this.attribute,
+	      parsedPadding = normalizePadding$1(padding),
+	      group = this.createOrUpdateChild("poptip-content", {
+	        x: 0,
+	        y: 0,
+	        zIndex: 1
+	      }, "group"),
+	      maxLineWidth = maxWidth - parsedPadding[1] - parsedPadding[3],
+	      titleVisible = isValid(title) && !1 !== visible,
+	      titleAttrs = Object.assign(Object.assign({
+	        text: title,
+	        visible: titleVisible
+	      }, titleStyle), {
+	        x: parsedPadding[3],
+	        y: parsedPadding[0],
+	        maxLineWidth: maxLineWidth,
+	        textAlign: "left",
+	        textBaseline: "top"
+	      }),
+	      titleShape = group.createOrUpdateChild("poptip-title", titleAttrs, "text");
+	    isEmpty(null == state ? void 0 : state.title) || (titleShape.states = state.title);
+	    const titleBounds = titleShape.AABBBounds,
+	      titleHeight = titleBounds.height(),
+	      titleWidth = titleBounds.width();
+	    let height = titleHeight + space;
+	    titleVisible || (height = 0);
+	    const contentVisible = isValid(content) && !1 !== visible,
+	      contentAttrs = Object.assign(Object.assign({
+	        text: content,
+	        visible: contentVisible
+	      }, contentStyle), {
+	        x: parsedPadding[3],
+	        y: parsedPadding[0] + height,
+	        maxLineWidth: maxLineWidth,
+	        textAlign: "left",
+	        textBaseline: "top"
+	      }),
+	      contentShape = group.createOrUpdateChild("poptip-content", contentAttrs, "text");
+	    isEmpty(null == state ? void 0 : state.content) || (contentShape.states = state.content);
+	    const contentBounds = contentShape.AABBBounds,
+	      contentHeight = contentBounds.height(),
+	      contentWidth = contentBounds.width();
+	    contentVisible && (height += contentHeight);
+	    let popTipWidth = max$3(titleWidth + parsedPadding[1] + parsedPadding[3], contentWidth + parsedPadding[1] + parsedPadding[3]);
+	    popTipWidth > maxWidth ? popTipWidth = maxWidth : popTipWidth < minWidth && (popTipWidth = minWidth);
+	    const poptipHeight = parsedPadding[0] + parsedPadding[2] + height,
+	      {
+	        visible: bgVisible
+	      } = panel,
+	      backgroundStyle = __rest$5(panel, ["visible"]),
+	      symbolSize = null !== (_a = backgroundStyle.size) && void 0 !== _a ? _a : 12,
+	      spaceSize = isArray$3(symbolSize) ? [symbolSize[0] + (null !== (_b = backgroundStyle.space) && void 0 !== _b ? _b : 0), symbolSize[1] + (null !== (_c = backgroundStyle.space) && void 0 !== _c ? _c : 0)] : symbolSize + (null !== (_d = backgroundStyle.space) && void 0 !== _d ? _d : 0),
+	      lineWidth = null !== (_e = backgroundStyle.lineWidth) && void 0 !== _e ? _e : 1,
+	      range = this.stage ? [this.stage.width, this.stage.height] : void 0,
+	      layout = "auto" === position;
+	    let minifyBBoxI,
+	      minifyBBoxSize = 1 / 0;
+	    for (let i = 0; i < this.positionList.length + 1; i++) {
+	      const p = layout ? this.positionList[i === this.positionList.length ? minifyBBoxI : i] : position,
+	        {
+	          angle: angle,
+	          offset: offset,
+	          rectOffset: rectOffset
+	        } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray$3(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth]);
+	      if (isBoolean(bgVisible)) {
+	        const offsetX = (isArray$3(symbolSize) ? symbolSize[0] : symbolSize) / 4,
+	          bgSymbol = group.createOrUpdateChild("poptip-symbol-panel", Object.assign(Object.assign({}, backgroundStyle), {
+	            visible: bgVisible && (contentVisible || titleVisible),
+	            x: offsetX,
+	            y: 0,
+	            strokeBoundsBuffer: -1,
+	            boundsPadding: -2,
+	            anchor: [0, 0],
+	            symbolType: "arrow2Left",
+	            angle: angle,
+	            dx: offset[0],
+	            dy: offset[1],
+	            size: symbolSize,
+	            zIndex: -9
+	          }), "symbol");
+	        isEmpty(null == state ? void 0 : state.panel) || (bgSymbol.states = state.panel);
+	        const bgRect = group.createOrUpdateChild("poptip-rect-panel", Object.assign(Object.assign({}, backgroundStyle), {
+	          visible: bgVisible && (contentVisible || titleVisible),
+	          x: 0,
+	          y: 0,
+	          width: popTipWidth,
+	          height: poptipHeight,
+	          zIndex: -8
+	        }), "rect");
+	        isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
+	      }
+	      if (group.setAttributes({
+	        x: -offset[0] + dx,
+	        y: -offset[1] + dy
+	      }), !layout || !range) break;
+	      {
+	        const b = this.AABBBounds,
+	          stageBounds = new Bounds().setValue(0, 0, range[0], range[1]);
+	        if (rectInsideAnotherRect(b, stageBounds, !1)) break;
+	        {
+	          const bbox = getRectIntersect(b, stageBounds, !1),
+	            size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
+	          size < minifyBBoxSize && (minifyBBoxSize = size, minifyBBoxI = i);
+	        }
+	      }
+	    }
+	  }
+	  getAngleAndOffset(position, width, height, size) {
+	    const sizeH = size[1] / 2;
+	    switch (position) {
+	      case "tl":
+	        return {
+	          angle: pi$1 / 2 * 3,
+	          offset: [width / 4, height + sizeH],
+	          rectOffset: [-width / 4, -height - size[1]]
+	        };
+	      case "top":
+	        return {
+	          angle: pi$1 / 2 * 3,
+	          offset: [width / 2, height + sizeH],
+	          rectOffset: [0, -height - size[1]]
+	        };
+	      case "tr":
+	        return {
+	          angle: pi$1 / 2 * 3,
+	          offset: [width / 4 * 3, height + sizeH],
+	          rectOffset: [width / 4 * 3, -height - size[1]]
+	        };
+	      case "rt":
+	        return {
+	          angle: 0,
+	          offset: [-sizeH, height / 5],
+	          rectOffset: [width / 4 * 3, -height - size[1]]
+	        };
+	      case "right":
+	        return {
+	          angle: 0,
+	          offset: [-sizeH, height / 2],
+	          rectOffset: [width / 4 * 3, -height - size[1]]
+	        };
+	      case "rb":
+	        return {
+	          angle: 0,
+	          offset: [-sizeH, height / 5 * 4],
+	          rectOffset: [width / 4 * 3, -height - size[1]]
+	        };
+	      case "bl":
+	        return {
+	          angle: pi$1 / 2,
+	          offset: [width / 4, -sizeH],
+	          rectOffset: [-width / 4, -height - size[1]]
+	        };
+	      case "bottom":
+	        return {
+	          angle: pi$1 / 2,
+	          offset: [width / 2, -sizeH],
+	          rectOffset: [0, -height - size[1]]
+	        };
+	      case "br":
+	        return {
+	          angle: pi$1 / 2,
+	          offset: [width / 4 * 3, -sizeH],
+	          rectOffset: [width / 4 * 3, -height - size[1]]
+	        };
+	      case "lt":
+	        return {
+	          angle: pi$1,
+	          offset: [width + sizeH, height / 5],
+	          rectOffset: [-width / 4, -height - size[1]]
+	        };
+	      case "left":
+	        return {
+	          angle: pi$1,
+	          offset: [width + sizeH, height / 2],
+	          rectOffset: [0, -height - size[1]]
+	        };
+	      case "lb":
+	        return {
+	          angle: pi$1,
+	          offset: [width + sizeH, height / 5 * 4],
+	          rectOffset: [width / 4 * 3, -height - size[1]]
+	        };
+	    }
+	  }
+	}
+	PopTip.defaultAttributes = {
+	  position: "rt",
+	  visible: !0,
+	  title: null,
+	  content: null,
+	  titleStyle: {
+	    fontSize: 12,
+	    fill: "#000",
+	    textAlign: "left",
+	    textBaseline: "top"
+	  },
+	  contentStyle: {
+	    fontSize: 12,
+	    fill: "#000",
+	    textAlign: "left",
+	    textBaseline: "top"
+	  },
+	  space: 8,
+	  padding: 10
+	};
+
+	const DEFAULT_THEME = {
+	  visible: !0,
+	  position: "auto",
+	  titleStyle: {
+	    fontSize: 16,
+	    fill: "#08979c"
+	  },
+	  contentStyle: {
+	    fontSize: 12,
+	    fill: "green"
+	  },
+	  panel: {
+	    visible: !0,
+	    fill: "#e6fffb",
+	    size: 12,
+	    space: 0,
+	    stroke: "#87e8de",
+	    lineWidth: 1,
+	    cornerRadius: 4
+	  }
+	};
+	const theme = {
+	  poptip: merge$2({}, DEFAULT_THEME)
+	};
+
+	var __decorate$1 = 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;
+	};
+	function wrapPoptip(target, source) {
+	  return merge$2(target, theme.poptip, source), target;
+	}
+	let PopTipRenderContribution = class {
+	  render(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
+	    var _a;
+	    if (1 === graphic._showPoptip) {
+	      const {
+	        visible: visible,
+	        visibleCb: visibleCb
+	      } = graphic.attribute.poptip || {};
+	      if (!1 === visible || visibleCb && !1 === visibleCb(graphic)) return;
+	      this.poptipComponent || (this.poptipComponent = new PopTip(graphic.attribute.poptip));
+	      let poptip = graphic.attribute.poptip || {};
+	      if ("text" === graphic.type && null == poptip.title && null == poptip.content) {
+	        const out = {};
+	        wrapPoptip(out, poptip), poptip = out, poptip.content = null !== (_a = poptip.content) && void 0 !== _a ? _a : graphic.attribute.text;
+	      }
+	      const matrix = graphic.globalTransMatrix;
+	      this.poptipComponent.setAttributes(Object.assign(Object.assign({
+	        visibleAll: !0,
+	        pickable: !1,
+	        childrenPickable: !1
+	      }, poptip), {
+	        x: matrix.e,
+	        y: matrix.f
+	      })), drawContext.stage.tryInitInteractiveLayer();
+	      const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+	      interactiveLayer && interactiveLayer.add(this.poptipComponent);
+	    } else 2 === graphic._showPoptip && (graphic._showPoptip = 0, this.poptipComponent && this.poptipComponent.setAttributes({
+	      visibleAll: !1
+	    }));
+	  }
+	};
+	PopTipRenderContribution = __decorate$1([injectable()], PopTipRenderContribution);
+
+	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;
+	  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 PopTipPlugin = class {
+	  constructor() {
+	    this.name = "poptip", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.poptip = e => {
+	      const graphic = e.target;
+	      if (graphic.isContainer || !graphic.attribute) return void this.unpoptip(e);
+	      if (graphic === this.activeGraphic) return;
+	      const {
+	        poptip: poptip
+	      } = graphic.attribute;
+	      poptip && (graphic.setAttributes({}), graphic._showPoptip = 1), this.activeGraphic && (this.activeGraphic.setAttributes({}), this.activeGraphic._showPoptip = 2), this.setActiveGraphic(graphic, !0);
+	    }, this.unpoptip = e => {
+	      this.activeGraphic && (this.activeGraphic.setAttributes({}), this.activeGraphic._showPoptip = 2, this.setActiveGraphic(null, !0));
+	    };
+	  }
+	  activate(context) {
+	    this.pluginService = context;
+	    const {
+	      stage: stage
+	    } = this.pluginService;
+	    stage.addEventListener("pointerover", this.poptip);
+	  }
+	  setActiveGraphic(graphic, rerender) {
+	    this.activeGraphic = graphic, this.pluginService.stage.renderNextFrame();
+	  }
+	  deactivate(context) {
+	    const {
+	      stage: stage
+	    } = this.pluginService;
+	    stage.removeEventListener("pointerover", this.poptip);
+	  }
+	};
+	PopTipPlugin = __decorate([injectable()], PopTipPlugin);
+	let PopTipForClipedTextPlugin = class {
+	  constructor() {
+	    this.name = "poptipForText", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.poptip = e => {
+	      const graphic = e.target;
+	      if ("text" !== graphic.type || !graphic.cliped || graphic.isContainer || !graphic.attribute) return void this.unpoptip(e);
+	      if (graphic === this.activeGraphic) return;
+	      const {
+	        poptip = {}
+	      } = graphic.attribute;
+	      poptip && (graphic.setAttributes({}), graphic._showPoptip = 1), this.activeGraphic && (this.activeGraphic.setAttributes({}), this.activeGraphic._showPoptip = 2), this.setActiveGraphic(graphic, !0);
+	    }, this.unpoptip = e => {
+	      this.activeGraphic && (this.activeGraphic.setAttributes({}), this.activeGraphic._showPoptip = 2, this.setActiveGraphic(null, !0));
+	    };
+	  }
+	  activate(context) {
+	    this.pluginService = context;
+	    const {
+	      stage: stage
+	    } = this.pluginService;
+	    stage.addEventListener("pointerover", this.poptip);
+	  }
+	  setActiveGraphic(graphic, rerender) {
+	    this.activeGraphic = graphic, this.pluginService.stage.renderNextFrame();
+	  }
+	  deactivate(context) {
+	    const {
+	      stage: stage
+	    } = this.pluginService;
+	    stage.removeEventListener("pointerover", this.poptip);
+	  }
+	};
+	PopTipForClipedTextPlugin = __decorate([injectable()], PopTipForClipedTextPlugin);
+
+	const popTipModule = new ContainerModule(bind => {
+	  bind(PopTipRenderContribution).toSelf().inSingletonScope(), bind(InteractiveSubRenderContribution).toService(PopTipRenderContribution), bind(PopTipPlugin).toSelf().inSingletonScope(), bind(AutoEnablePlugins).toService(PopTipPlugin), bind(PopTipForClipedTextPlugin).toSelf().inSingletonScope(), bind(AutoEnablePlugins).toService(PopTipForClipedTextPlugin);
+	});
+	function loadPoptip(defaultPoptipTheme) {
+	  merge$2(theme.poptip, defaultPoptipTheme), container.load(popTipModule);
+	}
+	function setPoptipTheme(defaultPoptipTheme) {
+	  merge$2(theme.poptip, DEFAULT_THEME, defaultPoptipTheme);
+	}
+
 	class CrosshairBase extends AbstractComponent {
 	  constructor() {
 	    super(...arguments), this.name = "crosshair";
@@ -40886,6 +41365,24 @@
 	function defaultLabelPosition(type) {
 	  return "rect" === type ? DefaultRectPositions : DefaultPositions;
 	}
+	function clampText(text, width, height) {
+	  const {
+	      x1: x1,
+	      x2: x2,
+	      y1: y1,
+	      y2: y2
+	    } = text.AABBBounds,
+	    minX = Math.min(x1, x2),
+	    maxX = Math.max(x1, x2),
+	    minY = Math.min(y1, y2),
+	    maxY = Math.max(y1, y2);
+	  let dx = 0,
+	    dy = 0;
+	  return minX < 0 && maxX - minX <= width ? dx = -minX : maxX > width && minX - (maxX - width) >= 0 && (dx = width - maxX), minY < 0 && maxY - minY <= height ? dy = -minY : maxY > height && minY - (maxY - height) >= 0 && (dy = height - maxY), {
+	    dx: dx,
+	    dy: dy
+	  };
+	}
 
 	const fadeIn = function () {
 	    let textAttribute = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -40964,9 +41461,17 @@
 	    this._bmpTool = bmpTool;
 	  }
 	  render() {
-	    const currentBaseMarks = this._checkMarks(),
-	      labels = this.layout(currentBaseMarks);
-	    this._smartInvert(labels), this._renderLabels(labels);
+	    this._prepare();
+	    const {
+	      overlap: overlap,
+	      smartInvert: smartInvert,
+	      dataFilter: dataFilter,
+	      customLayoutFunc: customLayoutFunc,
+	      customOverlapFunc: customOverlapFunc
+	    } = this.attribute;
+	    let labels,
+	      data = this.attribute.data;
+	    isFunction(dataFilter) && (data = dataFilter(data)), isFunction(customLayoutFunc) ? labels = customLayoutFunc(data, d => this._idToGraphic.get(d.id)) : (labels = this.layout(data), isFunction(customOverlapFunc) ? labels = customOverlapFunc(labels, d => this._idToGraphic.get(d.id)) : !1 !== overlap && (labels = this._overlapping(labels))), !1 !== smartInvert && this._smartInvert(labels), this._renderLabels(labels);
 	  }
 	  _bindEvent(target) {
 	    if (!target) return;
@@ -40985,52 +41490,53 @@
 	    const text = createText(attributes);
 	    return this._bindEvent(text), this._setStates(text), text;
 	  }
-	  _checkMarks() {
+	  _prepare() {
 	    var _a;
 	    const baseMarks = this.getBaseMarks(),
 	      currentBaseMarks = [];
-	    return baseMarks.forEach(mark => {
+	    if (baseMarks.forEach(mark => {
 	      "willRelease" !== mark.releaseStatus && currentBaseMarks.push(mark);
-	    }), this._prevRelationMap = new Map(this._relationMap), null === (_a = this._relationMap) || void 0 === _a || _a.clear(), currentBaseMarks;
-	  }
-	  layout(currentMarks) {
+	    }), null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), this._baseMarks = currentBaseMarks, !currentBaseMarks || 0 === currentBaseMarks.length) return;
 	    const {
-	      textStyle: textStyle,
-	      position: position,
-	      offset: offset
-	    } = this.attribute;
-	    let {
 	      data: data
 	    } = this.attribute;
-	    if (isFunction(data) && (data = data({})), !data || 0 === data.length) return [];
-	    let labels = [];
-	    isFunction(this.attribute.sort) && currentMarks && currentMarks.length && (currentMarks = currentMarks.sort(this.attribute.sort)), this._relationMap || (this._relationMap = new Map());
+	    if (data && 0 !== data.length) {
+	      this._idToGraphic || (this._idToGraphic = new Map());
+	      for (let i = 0; i < currentBaseMarks.length; i++) {
+	        const textData = data[i],
+	          baseMark = currentBaseMarks[i];
+	        textData && baseMark && (isValid(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), this._idToGraphic.set(textData.id, baseMark));
+	      }
+	    }
+	  }
+	  layout() {
+	    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+	    const {
+	        textStyle = {},
+	        position: position,
+	        offset: offset
+	      } = this.attribute,
+	      labels = [];
 	    for (let i = 0; i < data.length; i++) {
 	      const textData = data[i],
-	        baseMark = null == currentMarks ? void 0 : currentMarks[i],
-	        labelAttribute = Object.assign(Object.assign(Object.assign({}, textStyle), textData), {
-	          _relatedIndex: i
-	        });
-	      if (this._relationMap.set(i, baseMark), textData) {
-	        const text = createText(labelAttribute);
-	        text.update();
-	        const textBounds = this.getGraphicBounds(text),
-	          graphicBounds = this.getGraphicBounds(baseMark, {
-	            x: textData.x,
-	            y: textData.y
-	          }),
-	          textAttributes = this.labeling(textBounds, graphicBounds, isFunction(position) ? position(textData) : position, offset);
-	        if (!textAttributes) continue;
-	        labelAttribute.x = textAttributes.x, labelAttribute.y = textAttributes.y, labels.push(labelAttribute);
-	      }
+	        baseMark = this._idToGraphic.get(textData.id),
+	        labelAttribute = Object.assign(Object.assign({}, textStyle), textData),
+	        text = this._createLabelText(labelAttribute),
+	        textBounds = this.getGraphicBounds(text),
+	        graphicBounds = this.getGraphicBounds(baseMark, {
+	          x: textData.x,
+	          y: textData.y
+	        }),
+	        textLocation = this.labeling(textBounds, graphicBounds, isFunction(position) ? position(textData) : position, offset);
+	      textLocation && (labelAttribute.x = textLocation.x, labelAttribute.y = textLocation.y, text.setAttributes(textLocation), labels.push(text));
 	    }
-	    return this._baseMarks = currentMarks, !1 !== this.attribute.overlap && (labels = this.overlapping(labels, this.attribute.overlap)), labels;
+	    return labels;
 	  }
-	  overlapping(labels) {
-	    let option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-	    var _a, _b, _c, _d, _e;
+	  _overlapping(labels) {
+	    var _a, _b, _c, _d;
 	    if (0 === labels.length) return [];
-	    const result = [],
+	    const option = this.attribute.overlap,
+	      result = [],
 	      baseMarkGroup = this.getBaseMarkGroup(),
 	      size = null !== (_a = option.size) && void 0 !== _a ? _a : {
 	        width: null !== (_b = null == baseMarkGroup ? void 0 : baseMarkGroup.AABBBounds.width()) && void 0 !== _b ? _b : 0,
@@ -41051,27 +41557,45 @@
 	    }));
 	    for (let i = 0; i < labels.length; i++) {
 	      if (!1 === labels[i].visible) continue;
-	      const text = createText(labels[i]),
-	        baseMark = null === (_e = this._baseMarks) || void 0 === _e ? void 0 : _e[i];
+	      const text = labels[i],
+	        baseMark = this._idToGraphic.get(text.attribute.id);
 	      if (text.update(), canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
 	        if (!checkBounds) {
-	          bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(Object.assign({}, text.attribute));
+	          bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
 	          continue;
 	        }
 	        if (checkBounds && (null == baseMark ? void 0 : baseMark.AABBBounds) && canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)) {
-	          bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(Object.assign({}, text.attribute));
+	          bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
+	          continue;
+	        }
+	      }
+	      if (clampForce) {
+	        const {
+	          dx = 0,
+	          dy = 0
+	        } = clampText(text, bmpTool.width, bmpTool.height);
+	        if ((0 !== dx || 0 !== dy) && canPlace(bmpTool, bitmap, {
+	          x1: text.AABBBounds.x1 + dx,
+	          x2: text.AABBBounds.x2 + dx,
+	          y1: text.AABBBounds.y1 + dy,
+	          y2: text.AABBBounds.y2 + dy
+	        })) {
+	          text.setAttributes({
+	            x: text.attribute.x + dx,
+	            y: text.attribute.y + dy
+	          }), result.push(text);
 	          continue;
 	        }
 	      }
 	      let hasPlace = !1;
 	      for (let j = 0; j < strategy.length; j++) if (hasPlace = place$2(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling), !1 !== hasPlace) {
-	        result.push(Object.assign(Object.assign({}, text.attribute), {
+	        text.setAttributes({
 	          x: hasPlace.x,
 	          y: hasPlace.y
-	        }));
+	        }), result.push(text);
 	        break;
 	      }
-	      !hasPlace && !hideOnHit && result.push(Object.assign({}, text.attribute));
+	      !hasPlace && !hideOnHit && result.push(text);
 	    }
 	    return isFunction(this.onAfterLabelOverlap) && this.onAfterLabelOverlap(bitmap), result;
 	  }
@@ -41103,17 +41627,16 @@
 	      easing = null !== (_d = animationConfig.easing) && void 0 !== _d ? _d : DefaultLabelAnimation.easing,
 	      delay = null !== (_e = animationConfig.delay) && void 0 !== _e ? _e : 0,
 	      currentTextMap = new Map(),
-	      prevTextMap = this._textMap || new Map(),
+	      prevTextMap = this._graphicToText || new Map(),
 	      texts = [];
-	    labels.forEach((label, index) => {
-	      const text = this._createLabelText(label),
-	        relatedGraphic = this._relationMap.get(label._relatedIndex),
+	    labels.forEach((text, index) => {
+	      const relatedGraphic = this._idToGraphic.get(text.attribute.id),
 	        state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter";
 	      if ("enter" === state) if (texts.push(text), currentTextMap.set(relatedGraphic, text), !disableAnimation && relatedGraphic) {
 	        const {
 	          from: from,
 	          to: to
-	        } = getAnimationAttributes(label, "fadeIn");
+	        } = getAnimationAttributes(text.attribute, "fadeIn");
 	        this.add(text), relatedGraphic.onAnimateBind = () => {
 	          text.setAttributes(from);
 	          const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
@@ -41138,7 +41661,7 @@
 	      disableAnimation ? this.removeChild(label) : null == label || label.animate().to(getAnimationAttributes(label.attribute, "fadeOut").to, duration, easing).onEnd(() => {
 	        this.removeChild(label);
 	      });
-	    }), this._textMap = currentTextMap;
+	    }), this._graphicToText = currentTextMap;
 	  }
 	  _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, _ref) {
 	    let {
@@ -41181,21 +41704,32 @@
 	    return listener;
 	  }
 	  _smartInvert(labels) {
-	    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-	    if (!1 !== this.attribute.smartInvert) for (let i = 0; i < labels.length; i++) {
-	      const label = null == labels ? void 0 : labels[i];
+	    const option = this.attribute.smartInvert || {},
+	      {
+	        textType: textType,
+	        contrastRatiosThreshold: contrastRatiosThreshold,
+	        alternativeColors: alternativeColors
+	      } = option;
+	    for (let i = 0; i < labels.length; i++) {
+	      const label = labels[i];
 	      if (!label) continue;
-	      const isInside = canPlaceInside(createText(label).AABBBounds, null === (_a = this._relationMap.get(label._relatedIndex)) || void 0 === _a ? void 0 : _a.AABBBounds);
-	      if (label.stroke && label.lineWidth > 0) label.fill = labelSmartInvert(label.fill, label.stroke, null === (_b = this.attribute.smartInvert) || void 0 === _b ? void 0 : _b.textType, null === (_c = this.attribute.smartInvert) || void 0 === _c ? void 0 : _c.contrastRatiosThreshold, null === (_d = this.attribute.smartInvert) || void 0 === _d ? void 0 : _d.alternativeColors);else if (isInside) {
-	        const backgroundColor = this._relationMap.get(label._relatedIndex).attribute.fill,
-	          foregroundColor = label.fill;
-	        label.fill = labelSmartInvert(foregroundColor, backgroundColor, null === (_e = this.attribute.smartInvert) || void 0 === _e ? void 0 : _e.textType, null === (_f = this.attribute.smartInvert) || void 0 === _f ? void 0 : _f.contrastRatiosThreshold, null === (_g = this.attribute.smartInvert) || void 0 === _g ? void 0 : _g.alternativeColors);
-	      } else if (label.lineWidth > 0) {
-	        const baseMark = this._relationMap.get(label._relatedIndex);
-	        label.stroke = baseMark.attribute.fill;
-	        const backgroundColor = label.stroke,
-	          foregroundColor = label.fill;
-	        label.fill = labelSmartInvert(foregroundColor, backgroundColor, null === (_h = this.attribute.smartInvert) || void 0 === _h ? void 0 : _h.textType, null === (_j = this.attribute.smartInvert) || void 0 === _j ? void 0 : _j.contrastRatiosThreshold, null === (_k = this.attribute.smartInvert) || void 0 === _k ? void 0 : _k.alternativeColors);
+	      const baseMark = this._idToGraphic.get(label.attribute.id),
+	        isInside = canPlaceInside(label.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds);
+	      if (label.attribute.stroke && label.attribute.lineWidth > 0) label.setAttributes({
+	        fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+	      });else if (isInside) {
+	        const backgroundColor = baseMark.attribute.fill,
+	          foregroundColor = label.attribute.fill;
+	        label.setAttributes({
+	          fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+	        });
+	      } else if (label.attribute.lineWidth > 0) {
+	        const backgroundColor = label.attribute.stroke,
+	          foregroundColor = label.attribute.fill;
+	        label.setAttributes({
+	          stroke: baseMark.attribute.fill,
+	          fill: labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors)
+	        });
 	      }
 	    }
 	  }
@@ -41838,36 +42372,42 @@
 	    }
 	  }
 	  renderTicks(container) {
-	    var _a;
 	    const tickLineItems = this.getTickLineItems(),
 	      tickLineGroup = createGroup({
 	        x: 0,
 	        y: 0,
 	        pickable: !1
 	      });
-	    tickLineGroup.name = AXIS_ELEMENT_NAME.tickContainer, tickLineGroup.id = this._getNodeId("tick-container"), container.add(tickLineGroup);
-	    const tickLineState = isEmpty(null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.state) ? null : merge$2({}, DEFAULT_STATES$2, this.attribute.tick.state);
-	    tickLineItems.forEach((item, index) => {
+	    tickLineGroup.name = AXIS_ELEMENT_NAME.tickContainer, tickLineGroup.id = this._getNodeId("tick-container"), container.add(tickLineGroup), tickLineItems.forEach((item, index) => {
+	      var _a;
 	      const line = createLine(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
-	      line.name = AXIS_ELEMENT_NAME.tick, line.id = this._getNodeId(item.id), line.states = tickLineState, tickLineGroup.add(line);
+	      if (line.name = AXIS_ELEMENT_NAME.tick, line.id = this._getNodeId(item.id), isEmpty(null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.state)) line.states = null;else {
+	        const data = this.data[index],
+	          tickLineState = merge$2({}, DEFAULT_STATES$2, this.attribute.tick.state);
+	        Object.keys(tickLineState).forEach(key => {
+	          isFunction(tickLineState[key]) && (tickLineState[key] = tickLineState[key](data.rawValue, index, data, this.data));
+	        }), line.states = tickLineState;
+	      }
+	      tickLineGroup.add(line);
 	    }), this.tickLineItems = tickLineItems;
 	    const {
 	      subTick: subTick
 	    } = this.attribute;
 	    if (null == subTick ? void 0 : subTick.visible) {
 	      const subTickLineItems = this.getSubTickLineItems();
-	      if (subTickLineItems.length) {
-	        const subTickLineState = isEmpty(subTick.state) ? null : merge$2({}, DEFAULT_STATES$2, subTick.state);
-	        subTickLineItems.forEach((item, index) => {
-	          const line = createLine(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
-	          line.name = AXIS_ELEMENT_NAME.subTick, line.id = this._getNodeId(`${index}`), line.states = subTickLineState, tickLineGroup.add(line);
-	        });
-	      }
-	      this.subTickLineItems = subTickLineItems;
+	      subTickLineItems.length && subTickLineItems.forEach((item, index) => {
+	        const line = createLine(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
+	        if (line.name = AXIS_ELEMENT_NAME.subTick, line.id = this._getNodeId(`${index}`), isEmpty(subTick.state)) line.states = null;else {
+	          const subTickLineState = merge$2({}, DEFAULT_STATES$2, subTick.state);
+	          Object.keys(subTickLineState).forEach(key => {
+	            isFunction(subTickLineState[key]) && (subTickLineState[key] = subTickLineState[key](item.value, index, item, tickLineItems));
+	          }), line.states = subTickLineState;
+	        }
+	        tickLineGroup.add(line);
+	      }), this.subTickLineItems = subTickLineItems;
 	    }
 	  }
 	  renderLabels(container, items, layer) {
-	    var _a;
 	    const {
 	      dataFilter: dataFilter
 	    } = this.attribute.label;
@@ -41883,13 +42423,18 @@
 	      maxTextHeight = 0,
 	      textAlign = "center",
 	      textBaseline = "middle";
-	    const labelState = isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state) ? null : merge$2({}, DEFAULT_STATES$2, this.attribute.label.state);
 	    return data.forEach((item, index) => {
-	      var _a;
+	      var _a, _b;
 	      const labelStyle = this._getLabelAttribute(item, index, data, layer),
 	        text = createText(labelStyle);
-	      text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), text.states = labelState, labelGroup.add(text);
-	      const angle = null !== (_a = labelStyle.angle) && void 0 !== _a ? _a : 0;
+	      if (text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state)) text.states = null;else {
+	        const labelState = merge$2({}, DEFAULT_STATES$2, this.attribute.label.state);
+	        Object.keys(labelState).forEach(key => {
+	          isFunction(labelState[key]) && (labelState[key] = labelState[key](item, index, data, layer));
+	        }), text.states = labelState;
+	      }
+	      labelGroup.add(text);
+	      const angle = null !== (_b = labelStyle.angle) && void 0 !== _b ? _b : 0;
 	      maxTextWidth = Math.max(maxTextWidth, text.AABBBounds.width()), maxTextHeight = Math.max(maxTextHeight, text.AABBBounds.height()), angle && (maxTextWidth = Math.abs(maxTextWidth * Math.cos(angle)), maxTextHeight = Math.abs(maxTextHeight * Math.sin(angle))), textAlign = labelStyle.textAlign, textBaseline = labelStyle.textBaseline;
 	    }), this.axisLabelLayerSize[layer] = {
 	      width: maxTextWidth,
@@ -42202,7 +42747,7 @@
 	    orient: orient
 	  } = config;
 	  !isEmpty(labels) && isValidNumber(limitLength) && labels.forEach(label => {
-	    const limitLabelLength = 0 === label.attribute.angle || isNil(label.attribute.angle) ? "top" === orient || "bottom" === orient ? null : limitLength : limitLength / Math.sin(label.attribute.angle);
+	    const limitLabelLength = 0 === label.attribute.angle || isNil(label.attribute.angle) ? "top" === orient || "bottom" === orient ? null : limitLength : Math.abs(limitLength / Math.sin(label.attribute.angle));
 	    label.setAttributes({
 	      maxLineWidth: limitLabelLength,
 	      ellipsis: ellipsis
@@ -42912,7 +43457,7 @@
 	    }
 	  },
 	  middleHandlerStyle: {
-	    visible: !1,
+	    visible: !0,
 	    background: {
 	      size: 8,
 	      style: {
@@ -42930,12 +43475,14 @@
 	    }
 	  },
 	  startHandlerStyle: {
+	    visible: !0,
 	    symbolType: "M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z",
 	    fill: "white",
 	    stroke: "#B0C8F9",
 	    lineWidth: .5
 	  },
 	  endHandlerStyle: {
+	    visible: !0,
 	    symbolType: "M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z",
 	    fill: "white",
 	    stroke: "#B0C8F9",
@@ -43179,13 +43726,15 @@
 	    }), `data-zoom-end-text-${position}`));
 	  }
 	  getLayoutAttrFromConfig() {
-	    var _a, _b;
+	    var _a, _b, _c, _d;
 	    if (this._layoutAttrFromConfig) return this._layoutAttrFromConfig;
 	    const {
 	        position: positionConfig,
 	        size: size,
 	        orient: orient,
-	        middleHandlerStyle: middleHandlerStyle
+	        middleHandlerStyle: middleHandlerStyle,
+	        startHandlerStyle: startHandlerStyle,
+	        endHandlerStyle: endHandlerStyle
 	      } = this.attribute,
 	      {
 	        width: widthConfig,
@@ -43193,13 +43742,22 @@
 	      } = size,
 	      middleHandlerSize = null !== (_b = null === (_a = null == middleHandlerStyle ? void 0 : middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
 	    let width, height, position;
-	    return (null == middleHandlerStyle ? void 0 : middleHandlerStyle.visible) ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, position = {
+	    (null == middleHandlerStyle ? void 0 : middleHandlerStyle.visible) ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, position = {
 	      x: positionConfig.x,
 	      y: positionConfig.y + middleHandlerSize
 	    }) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
 	      x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
 	      y: positionConfig.y
-	    }) : (width = widthConfig, height = heightConfig, position = positionConfig), this._layoutAttrFromConfig = {
+	    }) : (width = widthConfig, height = heightConfig, position = positionConfig);
+	    const startHandlerSize = null !== (_c = null == startHandlerStyle ? void 0 : startHandlerStyle.size) && void 0 !== _c ? _c : this._isHorizontal ? height : width,
+	      endHandlerSize = null !== (_d = null == endHandlerStyle ? void 0 : endHandlerStyle.size) && void 0 !== _d ? _d : this._isHorizontal ? height : width;
+	    return (null == startHandlerStyle ? void 0 : startHandlerStyle.visible) && (this._isHorizontal ? (width -= (startHandlerSize + endHandlerSize) / 2, position = {
+	      x: position.x + startHandlerSize / 2,
+	      y: position.y
+	    }) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
+	      x: position.x,
+	      y: position.y + startHandlerSize
+	    })), this._layoutAttrFromConfig = {
 	      position: position,
 	      width: width,
 	      height: height
@@ -43396,19 +43954,17 @@
 	      curveType: "basis"
 	    }, "area");
 	    const {
-	        position: position,
-	        size: size,
 	        selectedBackgroundChartStyle: selectedBackgroundChartStyle
 	      } = this.attribute,
-	      {
-	        width: width,
-	        height: height
-	      } = size,
 	      {
 	        start: start,
 	        end: end
-	      } = this.state;
-	      this.computeBasePoints();
+	      } = this.state,
+	      {
+	        position: position,
+	        width: width,
+	        height: height
+	      } = this.getLayoutAttrFromConfig();
 	    this._selectedPreviewGroupClip.setAttributes({
 	      x: this._isHorizontal ? position.x + start * width : position.x,
 	      y: this._isHorizontal ? position.y : position.y + start * height,
@@ -44370,7 +44926,7 @@
 	      pages = 1;
 	    legendItems.forEach((item, index) => {
 	      item.id || (item.id = item.label), item.index = index;
-	      const itemGroup = this._renderEachItem(item, !!isEmpty(defaultSelected) || (null == defaultSelected ? void 0 : defaultSelected.includes(item.label)), index),
+	      const itemGroup = this._renderEachItem(item, !!isEmpty(defaultSelected) || (null == defaultSelected ? void 0 : defaultSelected.includes(item.label)), index, legendItems),
 	        itemWidth = itemGroup.attribute.width,
 	        itemHeight = itemGroup.attribute.height;
 	      this._itemHeight = Math.max(this._itemHeight, itemHeight), maxWidthInCol = Math.max(itemWidth, maxWidthInCol), this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (maxPages = maxRow, isValid(maxWidth) && (itemWidth >= maxWidth ? (doWrap = !0, index > 0 && (startX = 0, startY += itemHeight + spaceRow, pages += 1)) : maxWidth < startX + itemWidth && (doWrap = !0, startX = 0, startY += itemHeight + spaceRow, pages += 1)), index > 0 && itemGroup.setAttributes({
@@ -44392,7 +44948,7 @@
 	    } = this.attribute;
 	    hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerout", this._onUnHover)), select && this._itemsContainer.addEventListener("pointerdown", this._onClick);
 	  }
-	  _renderEachItem(item, isSelected, index) {
+	  _renderEachItem(item, isSelected, index, items) {
 	    const {
 	        id: id,
 	        label: label,
@@ -44400,20 +44956,23 @@
 	        shape: shape
 	      } = item,
 	      {
-	        shape: shapeAttr = {},
-	        label: labelAttr = {},
-	        value: valueAttr = {},
 	        padding = 0,
-	        background: background,
 	        focus: focus,
 	        focusIconStyle = {}
-	      } = this.attribute.item,
-	      parsedPadding = normalizePadding$1(padding);
+	      } = this.attribute.item;
+	    let {
+	      shape: shapeAttr = {},
+	      label: labelAttr = {},
+	      value: valueAttr = {},
+	      background = {}
+	    } = this.attribute.item;
+	    shapeAttr = this._handleStyle(shapeAttr, item, isSelected, index, items), labelAttr = this._handleStyle(labelAttr, item, isSelected, index, items), valueAttr = this._handleStyle(valueAttr, item, isSelected, index, items), background = this._handleStyle(background, item, isSelected, index, items);
+	    const parsedPadding = normalizePadding$1(padding);
 	    let itemGroup;
 	    !1 === background.visible ? (itemGroup = createGroup({
 	      x: 0,
 	      y: 0,
-	      cursor: null == background ? void 0 : background.style.cursor
+	      cursor: (null == background ? void 0 : background.style).cursor
 	    }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = createGroup(Object.assign({
 	      x: 0,
 	      y: 0
@@ -44456,7 +45015,7 @@
 	      y: 0,
 	      textAlign: "start",
 	      textBaseline: "middle",
-	      lineHeight: null == labelAttr ? void 0 : labelAttr.style.fontSize
+	      lineHeight: (null == labelAttr ? void 0 : labelAttr.style).fontSize
 	    }, null == labelAttr ? void 0 : labelAttr.style), {
 	      text: labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label
 	    }));
@@ -44469,7 +45028,7 @@
 	          y: 0,
 	          textAlign: "start",
 	          textBaseline: "middle",
-	          lineHeight: null == valueAttr ? void 0 : valueAttr.style.fontSize
+	          lineHeight: (null == valueAttr ? void 0 : valueAttr.style).fontSize
 	        }, null == valueAttr ? void 0 : valueAttr.style), {
 	          text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value
 	        }));
@@ -44619,6 +45178,12 @@
 	      });
 	    changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, this.dispatchEvent(changeEvent);
 	  }
+	  _handleStyle(config, item, isSelected, index, items) {
+	    const newConfig = merge$2({}, config);
+	    return config.style && isFunction(config.style) && (newConfig.style = config.style(item, isSelected, index, items)), config.state && Object.keys(config.state).forEach(key => {
+	      config.state[key] && isFunction(config.state[key]) && (newConfig.state[key] = config.state[key](item, isSelected, index, items));
+	    }), newConfig;
+	  }
 	};
 	DiscreteLegend$1.defaultAttributes = {
 	  layout: "horizontal",
@@ -50069,56 +50634,68 @@
 
 	class ViewAnimate {
 	  constructor(view) {
-	    this.view = view;
+	    this._animations = [], this._onAnimationStart = event => {
+	      0 === this._animations.length && this._view.emit(HOOK_EVENT.ALL_ANIMATION_START, {}), this._animations = this._animations.concat({
+	        config: event.animationConfig,
+	        mark: event.mark
+	      });
+	    }, this._onAnimationEnd = event => {
+	      this._animations = this._animations.filter(animation => animation.config !== event.animationConfig || animation.mark !== event.mark), 0 === this._animations.length && this._view.emit(HOOK_EVENT.ALL_ANIMATION_END, {});
+	    }, this._view = view, this._view.addEventListener(HOOK_EVENT.ANIMATION_START, this._onAnimationStart), this._view.addEventListener(HOOK_EVENT.ANIMATION_END, this._onAnimationEnd);
 	  }
 	  stop() {
-	    return this.view.traverseMarkTree(mark => {
-	      var _a;
-	      null === (_a = mark.animate) || void 0 === _a || _a.stop();
+	    return this._view.traverseMarkTree(mark => {
+	      var _a, _b;
+	      null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.stop) || void 0 === _b || _b.call(_a);
 	    }), this;
 	  }
 	  pause() {
-	    return this.view.traverseMarkTree(mark => {
-	      var _a;
-	      null === (_a = mark.animate) || void 0 === _a || _a.pause();
+	    return this._view.traverseMarkTree(mark => {
+	      var _a, _b;
+	      null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.pause) || void 0 === _b || _b.call(_a);
 	    }), this;
 	  }
 	  resume() {
-	    return this.view.traverseMarkTree(mark => {
-	      var _a;
-	      null === (_a = mark.animate) || void 0 === _a || _a.resume();
+	    return this._view.traverseMarkTree(mark => {
+	      var _a, _b;
+	      null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.resume) || void 0 === _b || _b.call(_a);
 	    }), this;
 	  }
 	  enable() {
-	    return this.view.traverseMarkTree(mark => {
-	      var _a;
-	      null === (_a = mark.animate) || void 0 === _a || _a.enable();
+	    return this._view.traverseMarkTree(mark => {
+	      var _a, _b;
+	      null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.enable) || void 0 === _b || _b.call(_a);
 	    }), this;
 	  }
 	  disable() {
-	    return this.view.traverseMarkTree(mark => {
-	      var _a;
-	      null === (_a = mark.animate) || void 0 === _a || _a.disable();
+	    return this._view.traverseMarkTree(mark => {
+	      var _a, _b;
+	      null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.disable) || void 0 === _b || _b.call(_a);
 	    }), this;
 	  }
 	  enableAnimationState(state) {
-	    return this.view.traverseMarkTree(mark => {
-	      var _a;
-	      null === (_a = mark.animate) || void 0 === _a || _a.enableAnimationState(state);
+	    return this._view.traverseMarkTree(mark => {
+	      var _a, _b;
+	      null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.enableAnimationState) || void 0 === _b || _b.call(_a, state);
 	    }), this;
 	  }
 	  disableAnimationState(state) {
-	    return this.view.traverseMarkTree(mark => {
-	      var _a;
-	      null === (_a = mark.animate) || void 0 === _a || _a.disableAnimationState(state);
+	    return this._view.traverseMarkTree(mark => {
+	      var _a, _b;
+	      null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.disableAnimationState) || void 0 === _b || _b.call(_a, state);
 	    }), this;
 	  }
+	  isAnimating() {
+	    return 0 !== this._animations.length;
+	  }
 	  animate() {
-	    return this.view.traverseMarkTree(mark => {
+	    return this._view.traverseMarkTree(mark => {
 	      mark.isUpdated && mark.animate && mark.animate.animate(), mark.cleanExitElements(), mark.isUpdated = !1;
 	    }, null, !0), this;
 	  }
-	  release() {}
+	  release() {
+	    this._view.removeEventListener(HOOK_EVENT.ALL_ANIMATION_START, this._onAnimationStart), this._view.removeEventListener(HOOK_EVENT.ALL_ANIMATION_END, this._onAnimationEnd);
+	  }
 	}
 
 	class Interval extends Mark {
@@ -51640,9 +52217,9 @@
 	const dataZoom = {
 	    showDetail: 'auto',
 	    middleHandler: {
-	        visible: false,
+	        visible: true,
 	        background: {
-	            size: 5,
+	            size: 6,
 	            style: {
 	                stroke: '#D1D5DA',
 	                cornerRadius: 2
@@ -51650,7 +52227,7 @@
 	        },
 	        icon: {
 	            style: {
-	                size: 8,
+	                size: 4,
 	                fill: 'white',
 	                stroke: '#D1D5DA',
 	                symbolType: 'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',
@@ -52206,6 +52783,34 @@
 	    }
 	};
 
+	const poptip = {
+	    visible: true,
+	    position: 'auto',
+	    padding: 8,
+	    titleStyle: {
+	        fontSize: 12,
+	        fontWeight: 'bold',
+	        fill: '#4E5969'
+	    },
+	    contentStyle: {
+	        fontSize: 12,
+	        fill: '#4E5969'
+	    },
+	    panel: {
+	        visible: true,
+	        fill: '#fff',
+	        stroke: '#ffffff',
+	        lineWidth: 0,
+	        cornerRadius: 3,
+	        shadowBlur: 12,
+	        shadowOffsetX: 0,
+	        shadowOffsetY: 4,
+	        shadowColor: 'rgba(0, 0, 0, 0.1)',
+	        size: 0,
+	        space: 12
+	    }
+	};
+
 	const component = {
 	    discreteLegend,
 	    colorLegend,
@@ -52227,7 +52832,8 @@
 	    brush,
 	    indicator,
 	    title,
-	    mapLabel
+	    mapLabel,
+	    poptip
 	};
 
 	const lightTheme = {
@@ -52415,28 +53021,60 @@
 	};
 
 	function transformComponentStyle(cfg = {}) {
-	    if (!isEmpty(cfg.style)) {
-	        cfg.style = transformToGraphic(cfg.style);
+	    const newConfig = {
+	        ...cfg
+	    };
+	    if (isFunction(cfg.style)) {
+	        newConfig.style = (item, isSelected, index, allItems) => transformToGraphic(cfg.style(item, isSelected, index, allItems));
+	    }
+	    else if (!isEmpty(cfg.style)) {
+	        newConfig.style = transformToGraphic(cfg.style);
 	    }
 	    if (!isEmpty(cfg.state)) {
+	        const newStateStyle = {};
 	        Object.keys(cfg.state).forEach(key => {
-	            if (!isEmpty(cfg.state[key])) {
-	                cfg.state[key] = transformToGraphic(cfg.state[key]);
+	            if (isFunction(cfg.state[key])) {
+	                newStateStyle[key] = (item, isSelected, index, allItems) => transformToGraphic(cfg.state[key](item, isSelected, index, allItems));
+	            }
+	            else if (!isEmpty(cfg.state[key])) {
+	                newStateStyle[key] = transformToGraphic(cfg.state[key]);
 	            }
 	        });
+	        newConfig.state = newStateStyle;
 	    }
-	    return cfg;
+	    return newConfig;
 	}
 	function transformStateStyle(stateStyle) {
 	    if (isEmpty(stateStyle)) {
 	        return null;
 	    }
+	    const newStateStyle = {};
 	    Object.keys(stateStyle).forEach(key => {
-	        if (!isEmpty(stateStyle[key])) {
-	            stateStyle[key] = transformToGraphic(stateStyle[key]);
+	        if (isFunction(stateStyle[key])) {
+	            newStateStyle[key] = (value, index, datum, data) => transformToGraphic(stateStyle[key](value, index, datum, data));
+	        }
+	        else if (!isEmpty(stateStyle[key])) {
+	            newStateStyle[key] = transformToGraphic(stateStyle[key]);
 	        }
 	    });
-	    return stateStyle;
+	    return newStateStyle;
+	}
+	function transformAxisLabelStateStyle(stateStyle) {
+	    if (isEmpty(stateStyle)) {
+	        return null;
+	    }
+	    const newStateStyle = {};
+	    Object.keys(stateStyle).forEach(key => {
+	        if (isFunction(stateStyle[key])) {
+	            newStateStyle[key] = (datum, index, data, layer) => {
+	                return transformToGraphic(stateStyle[key](datum.rawValue, index, datum, data, layer));
+	            };
+	        }
+	        else if (!isEmpty(stateStyle[key])) {
+	            newStateStyle[key] = transformToGraphic(stateStyle[key]);
+	        }
+	    });
+	    return newStateStyle;
 	}
 	function transformToGraphic(style) {
 	    if (isEmpty(style)) {
@@ -52457,6 +53095,7 @@
 	    MarkTypeEnum["text"] = "text";
 	    MarkTypeEnum["rect"] = "rect";
 	    MarkTypeEnum["rect3d"] = "rect3d";
+	    MarkTypeEnum["image"] = "image";
 	    MarkTypeEnum["path"] = "path";
 	    MarkTypeEnum["area"] = "area";
 	    MarkTypeEnum["arc"] = "arc";
@@ -53721,7 +54360,8 @@
 	            },
 	            doLayout: () => {
 	                this._compileChart?.onLayout(this._view);
-	            }
+	            },
+	            logLevel: Logger.getInstance().level()
 	        });
 	        this._setCanvasStyle();
 	        const interactive = this._option.interactive;
@@ -54022,6 +54662,9 @@
 	    static hideTooltip(excludeId = []) {
 	        InstanceManager.forEach(instance => instance?.hideTooltip?.(), excludeId);
 	    }
+	    static getLogger() {
+	        return Logger.getInstance();
+	    }
 	    static InstanceManager = InstanceManager;
 	    static ThemeManager = ThemeManager;
 	    static globalConfig = {
@@ -54052,7 +54695,7 @@
 	    _context = {};
 	    constructor(spec, options) {
 	        this._option = merge$2(this._option, options);
-	        const { dom, renderCanvas, mode, stage, ...restOptions } = this._option;
+	        const { dom, renderCanvas, mode, stage, poptip, ...restOptions } = this._option;
 	        if (dom) {
 	            this._container = isString(dom) ? document?.getElementById(dom) : dom;
 	        }
@@ -54076,6 +54719,7 @@
 	        }, {
 	            mode: this._option.mode,
 	            stage,
+	            pluginList: poptip !== false ? ['poptipForText'] : [],
 	            ...restOptions,
 	            background: spec.background || this._currentTheme.background || this._option.background
 	        });
@@ -54432,6 +55076,7 @@
 	        else {
 	            this._currentTheme = merge$2({}, ThemeManager.getTheme(this._currentThemeName), this._spec?.theme ?? {});
 	        }
+	        setPoptipTheme(merge$2({}, this._currentTheme.component?.poptip));
 	    }
 	    getCurrentTheme() {
 	        return this._currentTheme;
@@ -56097,6 +56742,7 @@
 	        this._rightCurrent = chartLayoutRect.x + chartLayoutRect.width;
 	        this._bottomCurrent = chartLayoutRect.height + chartLayoutRect.y;
 	        items.sort((a, b) => b.layoutLevel - a.layoutLevel);
+	        this.layoutNormalInlineItems(items.filter(x => x.layoutType === 'normal-inline'));
 	        this.layoutNormalItems(items.filter(x => x.layoutType === 'normal'));
 	        const layoutTemp = {
 	            _leftCurrent: this._leftCurrent,
@@ -56154,6 +56800,118 @@
 	            }
 	        });
 	    }
+	    layoutNormalInlineItems(normalItems) {
+	        const leftItems = normalItems.filter(item => item.layoutOrient === 'left');
+	        const rightItems = normalItems.filter(item => item.layoutOrient === 'right');
+	        const topItems = normalItems.filter(item => item.layoutOrient === 'top');
+	        const bottomItems = normalItems.filter(item => item.layoutOrient === 'bottom');
+	        const limitWidth = this._chartLayoutRect.width + this._chartLayoutRect.x;
+	        const limitHeight = this._chartLayoutRect.height + this._chartLayoutRect.y;
+	        let maxWidth = 0;
+	        let preLeft = this._leftCurrent;
+	        let preTop = this._topCurrent;
+	        leftItems.forEach((item, index) => {
+	            const layoutRect = this.getItemComputeLayoutRect(item);
+	            const rect = item.computeBoundsInRect(layoutRect);
+	            item.setLayoutRect(rect);
+	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            item.setLayoutStartPosition({
+	                x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
+	                y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+	            });
+	            maxWidth = Math.max(maxWidth, itemTotalWidth);
+	            preTop += itemTotalHeight;
+	            if (preTop > limitHeight) {
+	                preLeft += maxWidth;
+	                maxWidth = itemTotalWidth;
+	                preTop = this._topCurrent + itemTotalHeight;
+	                item.setLayoutStartPosition({
+	                    x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    y: this._topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                });
+	            }
+	        });
+	        this._leftCurrent = preLeft + maxWidth;
+	        let maxHeight = 0;
+	        preLeft = this._leftCurrent;
+	        preTop = this._topCurrent;
+	        topItems.forEach((item, index) => {
+	            const layoutRect = this.getItemComputeLayoutRect(item);
+	            const rect = item.computeBoundsInRect(layoutRect);
+	            item.setLayoutRect(rect);
+	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            item.setLayoutStartPosition({
+	                x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
+	                y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+	            });
+	            maxHeight = Math.max(maxHeight, itemTotalHeight);
+	            preLeft += itemTotalWidth;
+	            if (preLeft > limitWidth) {
+	                preLeft = this._leftCurrent + itemTotalWidth;
+	                preTop += maxHeight;
+	                maxHeight = itemTotalHeight;
+	                item.setLayoutStartPosition({
+	                    x: this._leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+	                });
+	            }
+	        });
+	        this._topCurrent = preTop + maxHeight;
+	        maxWidth = 0;
+	        let preRight = this._rightCurrent;
+	        preTop = this._topCurrent;
+	        rightItems.forEach((item, index) => {
+	            const layoutRect = this.getItemComputeLayoutRect(item);
+	            const rect = item.computeBoundsInRect(layoutRect);
+	            item.setLayoutRect(rect);
+	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            item.setLayoutStartPosition({
+	                x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+	                y: preTop + item.layoutOffsetY + item.layoutPaddingTop
+	            });
+	            maxWidth = Math.max(maxWidth, itemTotalWidth);
+	            preTop += itemTotalHeight;
+	            if (preTop > limitHeight) {
+	                preRight -= maxWidth;
+	                maxWidth = itemTotalWidth;
+	                preTop = this._topCurrent + itemTotalHeight;
+	                item.setLayoutStartPosition({
+	                    x: preRight + item.layoutOffsetX - rect.width - item.layoutPaddingRight,
+	                    y: this._topCurrent + item.layoutOffsetY + item.layoutPaddingTop
+	                });
+	            }
+	        });
+	        this._rightCurrent = preRight - maxWidth;
+	        maxHeight = 0;
+	        preLeft = this._leftCurrent;
+	        let preBottom = this._bottomCurrent;
+	        bottomItems.forEach((item, index) => {
+	            const layoutRect = this.getItemComputeLayoutRect(item);
+	            const rect = item.computeBoundsInRect(layoutRect);
+	            item.setLayoutRect(rect);
+	            const itemTotalHeight = rect.height + item.layoutPaddingTop + item.layoutPaddingBottom;
+	            const itemTotalWidth = rect.width + item.layoutPaddingLeft + item.layoutPaddingRight;
+	            item.setLayoutStartPosition({
+	                x: preLeft + item.layoutOffsetX + item.layoutPaddingLeft,
+	                y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+	            });
+	            maxHeight = Math.max(maxHeight, itemTotalHeight);
+	            preLeft += itemTotalWidth;
+	            if (preLeft > limitWidth) {
+	                preLeft = this._leftCurrent + itemTotalWidth;
+	                preBottom -= maxHeight;
+	                maxHeight = itemTotalHeight;
+	                item.setLayoutStartPosition({
+	                    x: this._leftCurrent + item.layoutOffsetX + item.layoutPaddingLeft,
+	                    y: preBottom + item.layoutOffsetY - rect.height - item.layoutPaddingBottom
+	                });
+	            }
+	        });
+	        this._bottomCurrent = preBottom - maxHeight;
+	    }
 	    layoutRegionItems(regionItems, regionRelativeItems) {
 	        let regionRelativeTotalWidth = this._rightCurrent - this._leftCurrent;
 	        let regionRelativeTotalHeight = this._bottomCurrent - this._topCurrent;
@@ -57045,6 +57803,11 @@
 	            });
 	        });
 	    }
+	    setPostProcess(key, postProcessFunc, state = 'normal') {
+	        if (this.stateStyle[state]?.[key]) {
+	            this.stateStyle[state][key].postProcess = postProcessFunc;
+	        }
+	    }
 	    getAttribute(key, datum, state = 'normal', opt) {
 	        return this._computeAttribute(key, datum, state, opt);
 	    }
@@ -57100,12 +57863,16 @@
 	        return style;
 	    }
 	    _computeAttribute(key, datum, state, opt) {
-	        let baseValue;
+	        let stateStyle;
 	        if (!this.stateStyle[state]?.[key]) {
-	            baseValue = this._computeStateAttribute(this.stateStyle.normal[key], key, datum, state, opt);
+	            stateStyle = this.stateStyle.normal[key];
 	        }
 	        else {
-	            baseValue = this._computeStateAttribute(this.stateStyle[state][key], key, datum, state, opt);
+	            stateStyle = this.stateStyle[state][key];
+	        }
+	        let baseValue = this._computeStateAttribute(stateStyle, key, datum, state, opt);
+	        if (isFunction(stateStyle?.postProcess)) {
+	            baseValue = stateStyle.postProcess(baseValue, datum, this._attributeContext, opt, this.getDataView());
 	        }
 	        if (key in this._computeExChannel) {
 	            return this._computeExChannel[key](key, datum, state, opt, baseValue);
@@ -57304,10 +58071,24 @@
 	    }
 	}
 
-	VChart.useMark([ComponentMark, GroupMark]);
+	class ImageMark extends BaseMark {
+	    static type = MarkTypeEnum.image;
+	    type = ImageMark.type;
+	    _getDefaultStyle() {
+	        const defaultStyle = {
+	            ...super._getDefaultStyle(),
+	            width: undefined,
+	            height: undefined,
+	            lineWidth: 0
+	        };
+	        return defaultStyle;
+	    }
+	}
+
+	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.1.0-beta.9";
+	const version = "1.1.1-beta.1";
 	Logger.getInstance(LoggerLevel.Error);
 
 	var SeriesMarkNameEnum;
@@ -60865,7 +61646,7 @@
 	    getStatisticFields() {
 	        const fields = [];
 	        if (this.getXAxisHelper()?.getScale) {
-	            this._fieldX.forEach(f => {
+	            (this._fieldX2 ? [...this._fieldX, this._fieldX2] : this._fieldX).forEach(f => {
 	                const result = { key: f, operations: [] };
 	                if (isContinuous(this.getXAxisHelper().getScale(0).type)) {
 	                    result.operations = ['max', 'min'];
@@ -60877,7 +61658,7 @@
 	            });
 	        }
 	        if (this.getYAxisHelper()?.getScale) {
-	            this._fieldY.forEach(f => {
+	            (this._fieldY2 ? [...this._fieldY, this._fieldY2] : this._fieldY).forEach(f => {
 	                const result = { key: f, operations: [] };
 	                if (isContinuous(this.getYAxisHelper().getScale(0).type)) {
 	                    result.operations = ['max', 'min'];
@@ -60972,14 +61753,8 @@
 	        if (isValid(this._spec.direction)) {
 	            this._direction = this._spec.direction;
 	        }
-	        if (this._direction === Direction$2.vertical) {
-	            this.setFieldY2('y1');
-	            this.setFieldX2(this._spec?.x2Field);
-	        }
-	        else {
-	            this.setFieldX2('x1');
-	            this.setFieldY2(this._spec?.y2Field);
-	        }
+	        this.setFieldX2(this._spec?.x2Field);
+	        this.setFieldY2(this._spec?.y2Field);
 	        if (this._stack) {
 	            this.setValueFieldToStack();
 	        }
@@ -62421,7 +63196,7 @@
 	                type: 'waterfallFillTotal',
 	                options: {
 	                    indexField: this.getGroupFields()[0],
-	                    valueField: this.getStackValueField()[0],
+	                    valueField: this.getStackValueField(),
 	                    seriesField: this.getSeriesField(),
 	                    seriesFieldName: this._theme.seriesFieldName,
 	                    total: this._spec.total
@@ -62437,7 +63212,7 @@
 	            type: 'waterfall',
 	            options: {
 	                indexField: this.getGroupFields()[0],
-	                valueField: this.getStackValueField()[0],
+	                valueField: this.getStackValueField(),
 	                seriesField: this.getSeriesField(),
 	                seriesFieldName: this._theme.seriesFieldName,
 	                startAs: STACK_FIELD_START,
@@ -62500,19 +63275,20 @@
 	        }
 	    }
 	    _totalPositionX(datum, field, pos = 0.5) {
-	        const { dataToPosition } = this._xAxisHelper;
+	        const { dataToPosition, getBandwidth } = this._xAxisHelper;
 	        if (this._direction === Direction$2.vertical) {
 	            return (dataToPosition([datum[field]], {
 	                bandPosition: this._bandPosition
 	            }) +
-	                this._rectMark.getAttribute('width', datum) * pos);
+	                getBandwidth(0) * 0.5 -
+	                this._rectMark.getAttribute('width', datum) * (0.5 - pos));
 	        }
 	        return valueInScaleRange(dataToPosition([datum[field]], {
 	            bandPosition: this._bandPosition
 	        }));
 	    }
 	    _totalPositionY(datum, field, pos = 0.5) {
-	        const { dataToPosition } = this._yAxisHelper;
+	        const { dataToPosition, getBandwidth } = this._yAxisHelper;
 	        if (this._direction === Direction$2.vertical) {
 	            return valueInScaleRange(dataToPosition([datum[field]], {
 	                bandPosition: this._bandPosition
@@ -62521,7 +63297,8 @@
 	        return (dataToPosition([datum[field]], {
 	            bandPosition: this._bandPosition
 	        }) +
-	            this._rectMark.getAttribute('height', datum) * pos);
+	            getBandwidth(0) * 0.5 -
+	            this._rectMark.getAttribute('height', datum) * (0.5 - pos));
 	    }
 	    initMarkStyle() {
 	        super.initMarkStyle();
@@ -64352,7 +65129,8 @@
 
 	const map = (data, opt) => {
 	    if (data.features) {
-	        data.features.forEach((f) => {
+	        data.features.forEach((f, index) => {
+	            f[DEFAULT_DATA_INDEX] = index;
 	            if (opt.nameMap) {
 	                f.name = opt.nameMap[f.properties?.[opt.nameProperty]];
 	            }
@@ -64466,6 +65244,7 @@
 	        });
 	        if (this._spec.label?.visible) {
 	            this._labelMark = this._createMark(MapSeries.mark.label, {
+	                parent: this.getRegion().getGroupMark(),
 	                skipBeforeLayouted: true,
 	                dataView: this._mapViewData.getDataView(),
 	                dataProductId: this._mapViewData.getProductId()
@@ -64480,10 +65259,16 @@
 	                    if (isValid(datum[this._seriesField ?? DEFAULT_DATA_SERIES_FIELD])) {
 	                        return (this._option.globalScale.getScale('color') ?? this.getDefaultColorScale()).scale(datum[this._seriesField ?? DEFAULT_DATA_SERIES_FIELD]);
 	                    }
-	                    return this._theme?.defaultFillColor;
+	                    return this._spec?.defaultFillColor;
 	                },
 	                path: this.getPath.bind(this)
 	            }, 'normal', AttributeLevel.Series);
+	            pathMark.setPostProcess('fill', result => {
+	                if (!isValid(result)) {
+	                    return this._spec.defaultFillColor;
+	                }
+	                return result;
+	            });
 	            this.setMarkStyle(pathMark, {
 	                smoothScale: true
 	            }, 'normal', AttributeLevel.Built_In);
@@ -64496,9 +65281,7 @@
 	                text: (datum) => {
 	                    return this._getDatumName(datum);
 	                },
-	                x: (datum) => {
-	                    return this.dataToPosition(datum)?.x;
-	                },
+	                x: (datum) => this.dataToPosition(datum)?.x,
 	                y: (datum) => this.dataToPosition(datum)?.y
 	            });
 	        }
@@ -64513,12 +65296,12 @@
 	        this._tooltipHelper = new MapSeriesTooltipHelper(this);
 	    }
 	    getPath(datum) {
-	        const area = this._areaCache.get(datum?.properties?.[this._nameProperty]);
+	        const area = this._areaCache.get(datum[DEFAULT_DATA_INDEX]);
 	        if (area) {
 	            return area.shape;
 	        }
 	        const shape = this._coordinateHelper?.shape(datum);
-	        this._areaCache.set(datum?.properties?.[this._nameProperty], {
+	        this._areaCache.set(datum[DEFAULT_DATA_INDEX], {
 	            shape
 	        });
 	        return shape;
@@ -64562,10 +65345,7 @@
 	            }
 	            const elements = vGrammarMark.elements;
 	            if (mark.type === MarkTypeEnum.path) {
-	                elements.forEach((el) => {
-	                    const graphicItem = el.getGraphicItem();
-	                    graphicItem.scale(scale, scale, scaleCenter);
-	                });
+	                vGrammarMark.group.getGroupGraphicItem().scale(scale, scale, scaleCenter);
 	            }
 	            else {
 	                elements.forEach((el) => {
@@ -64591,10 +65371,7 @@
 	            }
 	            const elements = vGrammarMark.elements;
 	            if (mark.type === MarkTypeEnum.path) {
-	                elements.forEach((el) => {
-	                    const graphicItem = el.getGraphicItem();
-	                    graphicItem.translate(delta[0], delta[1]);
-	                });
+	                vGrammarMark.group.getGroupGraphicItem().translate(delta[0], delta[1]);
 	            }
 	            else {
 	                elements.forEach((el, i) => {
@@ -64621,7 +65398,16 @@
 	        return [Number.NaN, Number.NaN];
 	    }
 	    _getDatumName(datum) {
-	        return datum[this.nameField] ?? datum.properties?.[this.nameField] ?? '';
+	        if (datum[this.nameField]) {
+	            return datum[this.nameField];
+	        }
+	        if (datum.properties?.[this._nameProperty]) {
+	            if (this._spec.nameMap) {
+	                return this._spec.nameMap[datum.properties[this._nameProperty]] ?? '';
+	            }
+	            return datum.properties[this._nameProperty] ?? '';
+	        }
+	        return '';
 	    }
 	    dataToPositionX(data) {
 	        throw new Error('Method not implemented.');
@@ -64635,7 +65421,7 @@
 	        this._mapViewData?.updateData();
 	    }
 	    _getDataIdKey() {
-	        return (datum) => datum?.properties?.[this._nameProperty];
+	        return DEFAULT_DATA_INDEX;
 	    }
 	}
 
@@ -75238,9 +76024,9 @@
 	    angle: {}
 	};
 	function transformAxisLineStyle(lineCfg) {
-	    transformComponentStyle(lineCfg);
-	    transformComponentStyle(lineCfg.startSymbol);
-	    transformComponentStyle(lineCfg.endSymbol);
+	    lineCfg = transformComponentStyle(lineCfg);
+	    lineCfg.startSymbol = transformComponentStyle(lineCfg.startSymbol);
+	    lineCfg.endSymbol = transformComponentStyle(lineCfg.endSymbol);
 	    return lineCfg;
 	}
 	function getAxisLabelOffset(axisSpec) {
@@ -75592,7 +76378,8 @@
 	            map: spec.map,
 	            nameProperty: spec.nameProperty,
 	            nameMap: spec.nameMap,
-	            area: spec.area
+	            area: spec.area,
+	            defaultFillColor: spec.defaultFillColor
 	        };
 	        return series;
 	    }
@@ -76780,7 +77567,7 @@
 	                        resultObj[d[state]] = 0;
 	                    }
 	                    if (!isNil(valueFields[i])) {
-	                        resultObj[d[state]] += parseFloat(d[valueFields[i]]);
+	                        resultObj[d[state]] += isNaN(parseFloat(d[valueFields[i]])) ? 1 : parseFloat(d[valueFields[i]]);
 	                    }
 	                }
 	            });
@@ -76945,7 +77732,6 @@
 	        const dataCollection = [];
 	        const stateFields = [];
 	        const valueFields = [];
-	        let hasValidateValueField = false;
 	        if (this._relatedAxisComponent) {
 	            const originalStateFields = {};
 	            eachSeries(this._regions, s => {
@@ -76971,19 +77757,12 @@
 	                            : yAxisHelper;
 	                const valueAxisHelper = stateAxisHelper === xAxisHelper ? yAxisHelper : xAxisHelper;
 	                const isValidateValueAxis = isContinuous(valueAxisHelper.getScale(0).type);
-	                if (isValidateValueAxis) {
-	                    hasValidateValueField = true;
-	                }
 	                dataCollection.push(s.getRawData());
 	                const seriesSpec = s.getSpec();
 	                const xFields = array(seriesSpec.xField);
 	                const yFields = array(seriesSpec.yField);
-	                const xField = s.coordinate === 'cartesian'
-	                    ? xFields[xFields.length - 1]
-	                    : seriesSpec.angleField ?? seriesSpec.categoryField;
-	                const yField = s.coordinate === 'cartesian'
-	                    ? yFields[yFields.length - 1]
-	                    : seriesSpec.radiusField ?? seriesSpec.valueField;
+	                const xField = s.coordinate === 'cartesian' ? xFields[0] : seriesSpec.angleField ?? seriesSpec.categoryField;
+	                const yField = s.coordinate === 'cartesian' ? yFields[0] : seriesSpec.radiusField ?? seriesSpec.valueField;
 	                originalStateFields[s.id] =
 	                    s.type === 'link' ? 'from_xField' : stateAxisHelper === xAxisHelper ? xField : yField;
 	                stateFields.push(originalStateFields[s.id]);
@@ -76998,7 +77777,7 @@
 	            this._originalStateFields = originalStateFields;
 	        }
 	        else {
-	            hasValidateValueField = isNil(this._spec.valueField);
+	            isNil(this._spec.valueField);
 	            eachSeries(this._regions, s => {
 	                dataCollection.push(s.getRawData());
 	                stateFields.push(this._field);
@@ -77024,7 +77803,7 @@
 	                },
 	                output: {
 	                    stateField: this._stateField,
-	                    valueField: hasValidateValueField ? this._valueField : null
+	                    valueField: this._valueField
 	                }
 	            }
 	        }, false);
@@ -77394,6 +78173,8 @@
 	    _valueScale;
 	    _backgroundSize;
 	    _middleHandlerSize;
+	    _startHandlerSize;
+	    _endHandlerSize;
 	    static createComponent(spec, options) {
 	        const compSpec = spec.dataZoom || options.defaultSpec;
 	        if (isNil(compSpec)) {
@@ -77434,6 +78215,10 @@
 	                ? this._height - this._middleHandlerSize
 	                : this._width - this._middleHandlerSize;
 	        }
+	        const startHandlerVisble = this._spec.startHandler.style.visible ?? true;
+	        const endHandlerVisble = this._spec.endHandler.style.visible ?? true;
+	        this._startHandlerSize = startHandlerVisble ? this._spec.startHandler.style.size : 0;
+	        this._endHandlerSize = endHandlerVisble ? this._spec.endHandler.style.size : 0;
 	    }
 	    onLayoutEnd(ctx) {
 	        this._updateScaleRange();
@@ -77448,19 +78233,20 @@
 	        }
 	    }
 	    _updateScaleRange() {
+	        const handlerSize = (this._startHandlerSize + this._endHandlerSize) / 2;
 	        if (!this._stateScale || !this._valueScale) {
 	            return;
 	        }
 	        if (this._isHorizontal) {
-	            this._stateScale.range([0, this._computeWidth()]);
+	            this._stateScale.range([0, this._computeWidth() - handlerSize]);
 	            this._valueScale.range([this._computeHeight() - this._middleHandlerSize, 0]);
 	        }
 	        else if (this.layoutOrient === 'left') {
-	            this._stateScale.range([0, this._computeHeight()]);
+	            this._stateScale.range([0, this._computeHeight() - handlerSize]);
 	            this._valueScale.range([this._computeWidth() - this._middleHandlerSize, 0]);
 	        }
 	        else {
-	            this._stateScale.range([0, this._computeHeight()]);
+	            this._stateScale.range([0, this._computeHeight() - handlerSize]);
 	            this._valueScale.range([0, this._computeWidth() - this._middleHandlerSize]);
 	        }
 	        if (this._component) {
@@ -77501,29 +78287,33 @@
 	        if (this._isHorizontal) {
 	            return this._backgroundSize + this._middleHandlerSize;
 	        }
-	        return this.getLayoutRect().height;
+	        return this.getLayoutRect().height - (this._startHandlerSize + this._endHandlerSize) / 2;
 	    }
 	    _dataToPositionX = (datum) => {
 	        const offsetLeft = this._orient === 'left' ? this._middleHandlerSize : 0;
+	        const offsetHandler = this._isHorizontal ? this._startHandlerSize / 2 : 0;
 	        const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
-	        return xScale.scale(datum[this._stateField]) + this.getLayoutStartPoint().x + offsetLeft;
+	        return xScale.scale(datum[this._stateField]) + this.getLayoutStartPoint().x + offsetLeft + offsetHandler;
 	    };
 	    _dataToPositionX2 = (datum) => {
 	        const offsetLeft = this._orient === 'left' ? this._middleHandlerSize : 0;
+	        const offsetHandler = this._isHorizontal ? this._startHandlerSize / 2 : 0;
 	        const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
 	        const min = xScale.domain()[0];
-	        return xScale.scale(min) + this.getLayoutStartPoint().x + offsetLeft;
+	        return xScale.scale(min) + this.getLayoutStartPoint().x + offsetLeft + offsetHandler;
 	    };
 	    _dataToPositionY = (datum) => {
 	        const offsetTop = this._isHorizontal ? this._middleHandlerSize : 0;
+	        const offsetHandler = this._isHorizontal ? 0 : this._startHandlerSize / 2;
 	        const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
-	        return yScale.scale(datum[this._valueField]) + this.getLayoutStartPoint().y + offsetTop;
+	        return yScale.scale(datum[this._valueField]) + this.getLayoutStartPoint().y + offsetTop + offsetHandler;
 	    };
 	    _dataToPositionY2 = (datum) => {
 	        const offsetTop = this._isHorizontal ? this._middleHandlerSize : 0;
+	        const offsetHandler = this._isHorizontal ? 0 : this._startHandlerSize / 2;
 	        const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
 	        const min = yScale.domain()[0];
-	        return yScale.scale(min) + this.getLayoutStartPoint().y + offsetTop;
+	        return yScale.scale(min) + this.getLayoutStartPoint().y + offsetTop + offsetHandler;
 	    };
 	    _createOrUpdateComponent() {
 	        if (!this._component) {
@@ -79569,8 +80359,8 @@
 	                space: spec.label.space,
 	                inside: spec.label.inside,
 	                style: isFunction(spec.label.style)
-	                    ? (datum, index) => {
-	                        const style = this._preprocessSpec(spec.label.style(datum.rawValue, index, datum));
+	                    ? (datum, index, data, layer) => {
+	                        const style = this._preprocessSpec(spec.label.style(datum.rawValue, index, datum, data, layer));
 	                        return transformToGraphic(this._preprocessSpec(merge$2({}, this._theme.label?.style, style)));
 	                    }
 	                    : transformToGraphic(spec.label.style),
@@ -79579,7 +80369,7 @@
 	                        return spec.label.formatMethod(datum.rawValue, datum);
 	                    }
 	                    : null,
-	                state: transformStateStyle(spec.label.state),
+	                state: transformAxisLabelStateStyle(spec.label.state),
 	                autoRotate: !!spec.label.autoRotate,
 	                autoHide: !!spec.label.autoHide,
 	                autoLimit: !!spec.label.autoLimit,
@@ -79595,8 +80385,8 @@
 	                inside: spec.tick.inside,
 	                alignWithLabel: spec.tick.alignWithLabel,
 	                style: isFunction(spec.tick.style)
-	                    ? (datum, index) => {
-	                        const style = this._preprocessSpec(spec.tick.style(datum.rawValue, index, datum));
+	                    ? (value, index, datum, data) => {
+	                        const style = this._preprocessSpec(spec.tick.style(value, index, datum, data));
 	                        return transformToGraphic(this._preprocessSpec(merge$2({}, this._theme.tick?.style, style)));
 	                    }
 	                    : transformToGraphic(spec.tick.style),
@@ -79607,7 +80397,12 @@
 	                length: spec.subTick.tickSize,
 	                inside: spec.subTick.inside,
 	                count: spec.subTick.tickCount,
-	                style: transformToGraphic(spec.subTick.style),
+	                style: isFunction(spec.subTick.style)
+	                    ? (value, index, datum, data) => {
+	                        const style = spec.subTick.style(value, index, datum, data);
+	                        return transformToGraphic(merge$2({}, this._theme.subTick?.style, style));
+	                    }
+	                    : transformToGraphic(spec.subTick.style),
 	                state: transformStateStyle(spec.subTick.state)
 	            },
 	            grid: {
@@ -79960,7 +80755,9 @@
 	            }
 	            else {
 	                if (isXAxis(this.orient)) {
-	                    field = s.fieldX;
+	                    field = s.fieldX2
+	                        ? [...s.fieldX, s.fieldX2]
+	                        : s.fieldX;
 	                }
 	                else if (isZAxis(this.orient)) {
 	                    field = s.fieldZ;
@@ -81191,10 +81988,10 @@
 	    if (!isEmpty(item.focusIconStyle)) {
 	        transformToGraphic(item.focusIconStyle);
 	    }
-	    transformComponentStyle(item.shape);
-	    transformComponentStyle(item.label);
-	    transformComponentStyle(item.value);
-	    transformComponentStyle(item.background);
+	    item.shape = transformComponentStyle(item.shape);
+	    item.label = transformComponentStyle(item.label);
+	    item.value = transformComponentStyle(item.value);
+	    item.background = transformComponentStyle(item.background);
 	    if (isPercent(item.maxWidth)) {
 	        item.maxWidth = (Number(item.maxWidth.substring(0, item.maxWidth.length - 1)) * rect.width) / 100;
 	    }
@@ -81893,6 +82690,7 @@
 	};
 
 	class Indicator extends BaseComponent {
+	    static speckey = 'indicator';
 	    static type = ComponentTypeEnum.indicator;
 	    type = ComponentTypeEnum.indicator;
 	    name = ComponentTypeEnum.indicator;
@@ -81913,7 +82711,7 @@
 	        const indicatorSpec = spec.indicator || options.defaultSpec;
 	        const indicators = array(indicatorSpec)
 	            .filter(s => s && s.visible !== false)
-	            .map(s => new Indicator(s, options));
+	            .map((s, index) => new Indicator(s, { ...options, specIndex: index, specKey: Indicator.speckey }));
 	        return indicators;
 	    }
 	    created() {
@@ -82063,9 +82861,12 @@
 	        return eachSeries(this._regions, s => model === s) || this._regions.includes(model);
 	    }
 	    clear() {
-	        super.clear();
-	        this._indicatorComponent = null;
+	        if (this._indicatorComponent) {
+	            this._container.removeChild(this._indicatorComponent);
+	            this._indicatorComponent = null;
+	        }
 	        this._cacheAttrs = null;
+	        super.clear();
 	    }
 	}
 
@@ -87950,6 +88751,7 @@
 	    }
 	}
 
+	loadPoptip({});
 	VChart.useChart([
 	    AreaChart,
 	    LineChart,