@visactor/vchart 1.8.0-beta.0 → 1.8.0

package/build/index.js

@@ -1591,7 +1591,7 @@
     function LinearToSRGB(c) {
       return c < .0031308 ? 12.92 * c : 1.055 * Math.pow(c, .41666) - .055;
     }
-    let Color$2 = class Color {
+    class Color {
       static Brighter(source) {
         let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
         return 1 === b ? source : new Color(source).brighter(b).toRGBA();
@@ -1752,7 +1752,7 @@
       convertLinearToSRGB() {
         return this.copyLinearToSRGB(this), this;
       }
-    };
+    }
     class RGB {
       constructor(r, g, b, opacity) {
         this.r = isNaN(+r) ? 255 : Math.max(0, Math.min(255, +r)), this.g = isNaN(+g) ? 255 : Math.max(0, Math.min(255, +g)), this.b = isNaN(+b) ? 255 : Math.max(0, Math.min(255, +b)), isValid$1(opacity) ? this.opacity = isNaN(+opacity) ? 1 : Math.max(0, Math.min(1, +opacity)) : this.opacity = 1;
@@ -1810,7 +1810,7 @@
 
     var ColorUtil = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        Color: Color$2,
+        Color: Color,
         DEFAULT_COLORS: DEFAULT_COLORS,
         RGB: RGB,
         hexToRgb: hexToRgb,
@@ -6736,6 +6736,13 @@
       };
     }
 
+    function isHorizontal$2(direction) {
+      return "horizontal" === direction;
+    }
+    function isVertical$1(direction) {
+      return "vertical" === direction;
+    }
+
     var ScaleEnum;
     !function (ScaleEnum) {
       ScaleEnum.Identity = "identity", ScaleEnum.Linear = "linear", ScaleEnum.Log = "log", ScaleEnum.Pow = "pow", ScaleEnum.Sqrt = "sqrt", ScaleEnum.Symlog = "symlog", ScaleEnum.Time = "time", ScaleEnum.Quantile = "quantile", ScaleEnum.Quantize = "quantize", ScaleEnum.Threshold = "threshold", ScaleEnum.Ordinal = "ordinal", ScaleEnum.Point = "point", ScaleEnum.Band = "band";
@@ -7170,13 +7177,13 @@
       if (isNil$1(b) || "boolean" === t) return () => b;
       if ("number" === t) return interpolateNumber(a, b);
       if ("string" === t) {
-        if (c = Color$2.parseColorString(b)) {
-          const rgb = interpolateRgb(Color$2.parseColorString(a), c);
+        if (c = Color.parseColorString(b)) {
+          const rgb = interpolateRgb(Color.parseColorString(a), c);
           return t => rgb(t).formatRgb();
         }
         return interpolateNumber(Number(a), Number(b));
       }
-      return b instanceof RGB ? interpolateRgb(a, b) : b instanceof Color$2 ? interpolateRgb(a.color, b.color) : b instanceof Date ? interpolateDate(a, b) : interpolateNumber(Number(a), Number(b));
+      return b instanceof RGB ? interpolateRgb(a, b) : b instanceof Color ? interpolateRgb(a.color, b.color) : b instanceof Date ? interpolateDate(a, b) : interpolateNumber(Number(a), Number(b));
     }
 
     class ContinuousScale extends BaseScale {
@@ -8506,7 +8513,7 @@
     const EnvContribution = Symbol.for("EnvContribution");
     const VGlobal = Symbol.for("VGlobal");
 
-    var __decorate$1w = 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;
@@ -8673,7 +8680,7 @@
         return this._env || this.setEnv("browser"), this.envContribution.getElementTopLeft(dom, baseWindow);
       }
     };
-    DefaultGlobal = __decorate$1w([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(EnvContribution)), __metadata$18("design:paramtypes", [Object])], DefaultGlobal);
+    DefaultGlobal = __decorate$1v([injectable(), __param$M(0, inject(ContributionProvider)), __param$M(0, named(EnvContribution)), __metadata$18("design:paramtypes", [Object])], DefaultGlobal);
 
     const circleThreshold = tau$1 - 1e-8;
     class BoundsContext {
@@ -9809,10 +9816,12 @@
       wordBreak: "break-all",
       ignoreBuf: !1,
       verticalMode: 0,
+      wrap: !1,
       whiteSpace: "no-wrap",
       heightLimit: 1 / 0,
       lineClamp: 1 / 0,
-      suffixPosition: "end"
+      suffixPosition: "end",
+      disableAutoClipedPoptip: void 0
     };
     const DefaultPickStyle = {
       pickStrokeBuffer: 0
@@ -10099,7 +10108,7 @@
       return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
     }
 
-    var __decorate$1v = 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;
@@ -10368,9 +10377,9 @@
         return data.str = data.result, data.width += suffixWidth, data;
       }
     };
-    ATextMeasure = __decorate$1v([injectable()], ATextMeasure);
+    ATextMeasure = __decorate$1u([injectable()], ATextMeasure);
 
-    var __decorate$1u = 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;
@@ -10379,7 +10388,7 @@
     };
     const TextMeasureContribution = Symbol.for("TextMeasureContribution");
     let DefaultTextMeasureContribution = class extends ATextMeasure {};
-    DefaultTextMeasureContribution = __decorate$1u([injectable()], DefaultTextMeasureContribution);
+    DefaultTextMeasureContribution = __decorate$1t([injectable()], DefaultTextMeasureContribution);
 
     const container = new Container();
 
@@ -10802,7 +10811,7 @@
     }
     const canvasAllocate = new DefaultCanvasAllocate();
 
-    var __decorate$1t = 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;
@@ -10870,7 +10879,7 @@
         }, null != option ? option : {}), textSpec);
       }
     };
-    DefaultGraphicUtil = __decorate$1t([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(TextMeasureContribution)), __metadata$17("design:paramtypes", [Object])], DefaultGraphicUtil);
+    DefaultGraphicUtil = __decorate$1s([injectable(), __param$L(0, inject(ContributionProvider)), __param$L(0, named(TextMeasureContribution)), __metadata$17("design:paramtypes", [Object])], DefaultGraphicUtil);
     var TransformMode;
     !function (TransformMode) {
       TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -10928,7 +10937,7 @@
         return this;
       }
     };
-    DefaultTransformUtil = __decorate$1t([injectable(), __metadata$17("design:paramtypes", [])], DefaultTransformUtil);
+    DefaultTransformUtil = __decorate$1s([injectable(), __metadata$17("design:paramtypes", [])], DefaultTransformUtil);
 
     const defaultThemeObj = {
         arc: DefaultArcAttribute,
@@ -11547,7 +11556,7 @@
     }
     class EventManager {
       constructor(root, config) {
-        this.dispatch = new EventEmitter(), this.mappingState = {
+        this.dispatch = new EventEmitter(), this.cursorTarget = null, this.mappingState = {
           trackingData: {}
         }, this.eventPool = new Map(), this.onPointerDown = (from, target) => {
           if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
@@ -11587,14 +11596,14 @@
             }
             this.freeEvent(overEvent);
           }
-          this.dispatchEvent(e, "pointermove"), "touch" === e.pointerType && this.dispatchEvent(e, "touchmove"), isMouse && (this.dispatchEvent(e, "mousemove"), this.cursor = (null === (_b = null === (_a = e.target) || void 0 === _a ? void 0 : _a.attribute) || void 0 === _b ? void 0 : _b.cursor) || this.rootTarget.getCursor()), trackingData.overTargets = e.composedPath(), this.freeEvent(e);
+          this.dispatchEvent(e, "pointermove"), "touch" === e.pointerType && this.dispatchEvent(e, "touchmove"), isMouse && (this.dispatchEvent(e, "mousemove"), this.cursorTarget = e.target, this.cursor = (null === (_b = null === (_a = e.target) || void 0 === _a ? void 0 : _a.attribute) || void 0 === _b ? void 0 : _b.cursor) || this.rootTarget.getCursor()), trackingData.overTargets = e.composedPath(), this.freeEvent(e);
         }, this.onPointerOver = (from, target) => {
           var _a, _b;
           if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
           const trackingData = this.trackingData(from.pointerId),
             e = this.createPointerEvent(from, from.type, target),
             isMouse = isMouseLike(e.pointerType);
-          this.dispatchEvent(e, "pointerover"), isMouse && this.dispatchEvent(e, "mouseover"), "mouse" === e.pointerType && (this.cursor = (null === (_b = null === (_a = e.target) || void 0 === _a ? void 0 : _a.attribute) || void 0 === _b ? void 0 : _b.cursor) || this.rootTarget.getCursor());
+          this.dispatchEvent(e, "pointerover"), isMouse && this.dispatchEvent(e, "mouseover"), "mouse" === e.pointerType && (this.cursorTarget = e.target, this.cursor = (null === (_b = null === (_a = e.target) || void 0 === _a ? void 0 : _a.attribute) || void 0 === _b ? void 0 : _b.cursor) || this.rootTarget.getCursor());
           const enterEvent = this.clonePointerEvent(e, "pointerenter");
           for (enterEvent.eventPhase = enterEvent.AT_TARGET; enterEvent.target && enterEvent.target !== this.rootTarget.parent;) enterEvent.currentTarget = enterEvent.target, this.notifyTarget(enterEvent), isMouse && this.notifyTarget(enterEvent, "mouseenter"), enterEvent.target = enterEvent.target.parent;
           trackingData.overTargets = e.composedPath(), this.freeEvent(e), this.freeEvent(enterEvent);
@@ -11610,7 +11619,7 @@
             for (leaveEvent.eventPhase = leaveEvent.AT_TARGET; leaveEvent.target && leaveEvent.target !== this.rootTarget.parent;) leaveEvent.currentTarget = leaveEvent.target, this.notifyTarget(leaveEvent), isMouse && this.notifyTarget(leaveEvent, "mouseleave"), leaveEvent.target = leaveEvent.target.parent;
             trackingData.overTargets = [], this.freeEvent(outEvent), this.freeEvent(leaveEvent);
           }
-          this.cursor = "";
+          this.cursorTarget = null, this.cursor = "";
         }, this.onPointerUp = (from, target) => {
           var _a;
           if (!(from instanceof FederatedPointerEvent)) return void Logger.getInstance().warn("EventManager cannot map a non-pointer event as a pointer event");
@@ -11774,7 +11783,7 @@
       pickTarget(x, y, e) {
         let target;
         const pickResult = this.rootTarget.pick(x, y);
-        return target = pickResult && pickResult.graphic ? pickResult.graphic : pickResult && pickResult.group ? pickResult.group : x >= 0 && x <= get$1(this.rootTarget, "width") && y >= 0 && y <= get$1(this.rootTarget, "height") ? this.rootTarget : null, e && (e.pickParams = pickResult.params), target;
+        return target = pickResult && pickResult.graphic ? pickResult.graphic : pickResult && pickResult.group ? pickResult.group : this.rootTarget.AABBBounds.contains(x, y) ? this.rootTarget : null, e && (e.pickParams = pickResult.params), target;
       }
     }
 
@@ -11811,7 +11820,7 @@
               federatedEvent = this.bootstrapEvent(this.rootPointerEvent, nativeEvent);
             this.manager.mapEvent(federatedEvent);
           }
-          this.setCursor(this.manager.cursor);
+          this.setCursor(this.manager.cursor, this.manager.cursorTarget);
         }, this.onPointerMove = nativeEvent => {
           if (this.supportsTouchEvents && "touch" === nativeEvent.pointerType) return;
           if (this.isEventOutsideOfTargetElement(nativeEvent)) return;
@@ -11820,7 +11829,7 @@
             const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
             this.manager.mapEvent(event);
           }
-          this.setCursor(this.manager.cursor);
+          this.setCursor(this.manager.cursor, this.manager.cursorTarget);
         }, this.onPointerUp = nativeEvent => {
           if (this.supportsTouchEvents && "touch" === nativeEvent.pointerType) return;
           const outside = this.isEventOutsideOfTargetElement(nativeEvent) ? "outside" : "",
@@ -11829,7 +11838,7 @@
             const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
             event.type += outside, this.manager.mapEvent(event);
           }
-          this.setCursor(this.manager.cursor);
+          this.setCursor(this.manager.cursor, this.manager.cursorTarget);
         }, this.onPointerOverOut = nativeEvent => {
           if (this.supportsTouchEvents && "touch" === nativeEvent.pointerType) return;
           const normalizedEvents = this.normalizeToPointerData(nativeEvent);
@@ -11837,7 +11846,7 @@
             const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
             this.manager.mapEvent(event);
           }
-          this.setCursor(this.manager.cursor);
+          this.setCursor(this.manager.cursor, this.manager.cursorTarget);
         }, this.onWheel = nativeEvent => {
           const wheelEvent = this.normalizeWheelEvent(nativeEvent);
           this.manager.mapEvent(wheelEvent);
@@ -11861,8 +11870,9 @@
       release() {
         this.setTargetElement(null);
       }
-      setCursor() {
-        let mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "default";
+      setCursor(mode, target) {
+        if (!target && !this.manager.rootTarget.window._handler.canvas.controled) return;
+        mode || (mode = "default");
         const {
           applyStyles: applyStyles,
           domElement: domElement
@@ -12985,7 +12995,8 @@
         if (null == this.phi || null == this.theta) return;
         const {
             center: center,
-            r: r
+            r: r,
+            cb: cb
           } = "function" == typeof this.params ? this.params() : this.params,
           deltaAngle = 2 * Math.PI * ratio,
           theta = this.theta + deltaAngle,
@@ -12994,7 +13005,7 @@
           y = r * Math.cos(phi) + center.y,
           z = r * Math.sin(phi) * Math.sin(theta) + center.z;
         for (out.x = x, out.y = y, out.z = z, out.alpha = theta + pi$1 / 2; out.alpha > pi2;) out.alpha -= pi2;
-        out.alpha = pi2 - out.alpha, out.zIndex = -1e4 * out.z;
+        out.alpha = pi2 - out.alpha, out.zIndex = -1e4 * out.z, cb && cb(out);
       }
     }
     class GroupFadeOut extends ACustomAnimate {
@@ -13662,9 +13673,6 @@
       return res;
     };
 
-    const {
-      Color: Color$1
-    } = ColorUtil;
     var ColorType;
     !function (ColorType) {
       ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
@@ -13676,7 +13684,7 @@
         if (size === ColorType.Color1) {
           const color = ColorStore.store1[str];
           if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
-          const c = Color$1.parseColorString(str);
+          const c = Color.parseColorString(str);
           if (c) {
             const data = [c.r / 255, c.g / 255, c.b / 255, c.opacity];
             ColorStore.store1[str] = data, ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = data[0], arr[1] = data[1], arr[2] = data[2], arr[3] = data[3];
@@ -13685,7 +13693,7 @@
         }
         const color = ColorStore.store255[str];
         if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
-        const c = Color$1.parseColorString(str);
+        const c = Color.parseColorString(str);
         return c && (ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity], ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = c.r, arr[1] = c.g, arr[2] = c.b, arr[3] = c.opacity), arr;
       }
       static Set(str, size, arr) {
@@ -15394,7 +15402,7 @@
     const VirtualLayerHandlerContribution = Symbol.for("VirtualLayerHandlerContribution");
 
     var DefaultLayerService_1,
-      __decorate$1s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      __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;
@@ -15462,9 +15470,9 @@
         return "browser" === this.global.env ? 10 : 0;
       }
     };
-    DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$1s([injectable(), __metadata$16("design:paramtypes", [])], DefaultLayerService);
+    DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$1r([injectable(), __metadata$16("design:paramtypes", [])], DefaultLayerService);
 
-    var __decorate$1r = 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;
@@ -15572,7 +15580,7 @@
         return this._handler.getTopLeft(baseWindow);
       }
     };
-    DefaultWindow = __decorate$1r([injectable(), __metadata$15("design:paramtypes", [])], DefaultWindow);
+    DefaultWindow = __decorate$1q([injectable(), __metadata$15("design:paramtypes", [])], DefaultWindow);
 
     var coreModule = new ContainerModule(bind => {
       bind(VGlobal).to(DefaultGlobal).inSingletonScope(), bind(VWindow).to(DefaultWindow), bind(GraphicUtil).to(DefaultGraphicUtil).inSingletonScope(), bind(TransformUtil).to(DefaultTransformUtil).inSingletonScope(), bind(LayerService).to(DefaultLayerService).inSingletonScope();
@@ -16034,7 +16042,7 @@
       }
     }
 
-    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", ...GRAPHIC_UPDATE_TAG_KEY];
+    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
     let Text$1 = class Text extends Graphic {
       get font() {
         const textTheme = getTheme$1(this).text;
@@ -16044,26 +16052,29 @@
         var _a;
         const attribute = this.attribute,
           textTheme = getTheme$1(this).text;
-        if (Array.isArray(attribute.text)) return;
+        if (this.isMultiLine) return;
         const {
           maxLineWidth = textTheme.maxLineWidth
         } = attribute;
         return Number.isFinite(maxLineWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
       }
       get clipedWidth() {
-        if (!Array.isArray(this.attribute.text)) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
+        if (!this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
       }
       get cliped() {
         const textTheme = getTheme$1(this).text,
           attribute = this.attribute;
-        if (Array.isArray(attribute.text)) return;
+        if (this.isMultiLine) return;
         const {
           maxLineWidth = textTheme.maxLineWidth
         } = attribute;
         return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), this.clipedText !== attribute.text.toString());
       }
       get multilineLayout() {
-        if (Array.isArray(this.attribute.text)) return this.tryUpdateAABBBounds(), this.cache.layoutData;
+        if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
+      }
+      get isMultiLine() {
+        return Array.isArray(this.attribute.text) || "normal" === this.attribute.whiteSpace;
       }
       constructor() {
         let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
@@ -16079,7 +16090,7 @@
         const {
           text: text
         } = this.attribute;
-        return null != text && "" !== text;
+        return isArray$1(text) ? !text.every(t => null == t || "" === t) : null != text && "" !== text;
       }
       doUpdateAABBBounds() {
         const textTheme = getTheme$1(this).text;
@@ -16207,7 +16218,11 @@
       updateHorizontalSinglelineAABBBounds(text) {
         var _a, _b;
         const textTheme = getTheme$1(this).text,
-          textMeasure = application.graphicUtil.textMeasure;
+          {
+            wrap = textTheme.wrap
+          } = this.attribute;
+        if (wrap) return this.updateWrapAABBBounds([text]);
+        const textMeasure = application.graphicUtil.textMeasure;
         let width, str;
         const attribute = this.attribute,
           {
@@ -16341,7 +16356,11 @@
       updateHorizontalMultilineAABBBounds(text) {
         var _a, _b;
         const textTheme = getTheme$1(this).text,
-          attribute = this.attribute,
+          {
+            wrap = textTheme.wrap
+          } = this.attribute;
+        if (wrap) return this.updateWrapAABBBounds(text);
+        const attribute = this.attribute,
           {
             fontFamily = textTheme.fontFamily,
             textAlign = textTheme.textAlign,
@@ -16492,6 +16511,11 @@
 
     const WRAP_TEXT_UPDATE_TAG_KEY = ["heightLimit", "lineClamp"];
     class WrapText extends Text$1 {
+      constructor(params) {
+        super(Object.assign(Object.assign({}, params), {
+          wrap: !0
+        }));
+      }
       _isValid() {
         const {
           text: text
@@ -18756,7 +18780,7 @@
     const matrixAllocate = new DefaultMatrixAllocate();
     const mat4Allocate = new DefaultMat4Allocate();
 
-    var __decorate$1q = 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;
@@ -19343,7 +19367,7 @@
         return !!visible || (aabbBounds.clear(), !1);
       }
     };
-    DefaultGraphicService = __decorate$1q([injectable(), __param$K(0, inject(GraphicCreator$1)), __metadata$14("design:paramtypes", [Object])], DefaultGraphicService);
+    DefaultGraphicService = __decorate$1p([injectable(), __param$K(0, inject(GraphicCreator$1)), __metadata$14("design:paramtypes", [Object])], DefaultGraphicService);
 
     class GraphicCreator {
       constructor() {
@@ -19583,7 +19607,7 @@
       }), canvasGradient.GetPattern(w + x, h + y, undefined);
     }
 
-    var __decorate$1p = 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;
@@ -19641,7 +19665,7 @@
         });
       }
     };
-    DefaultBaseInteractiveRenderContribution = __decorate$1p([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(InteractiveSubRenderContribution)), __metadata$13("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+    DefaultBaseInteractiveRenderContribution = __decorate$1o([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(InteractiveSubRenderContribution)), __metadata$13("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
     class DefaultBaseTextureRenderContribution {
       constructor() {
         this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 10;
@@ -20158,7 +20182,7 @@
     const defaultSymbolTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultSymbolBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-    var __decorate$1o = 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;
@@ -20324,9 +20348,9 @@
         this._draw(arc, arcAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasArcRender = __decorate$1o([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(ArcRenderContribution)), __metadata$12("design:paramtypes", [Object])], DefaultCanvasArcRender);
+    DefaultCanvasArcRender = __decorate$1n([injectable(), __param$I(0, inject(ContributionProvider)), __param$I(0, named(ArcRenderContribution)), __metadata$12("design:paramtypes", [Object])], DefaultCanvasArcRender);
 
-    var __decorate$1n = 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;
@@ -20369,7 +20393,7 @@
         this._draw(circle, circleAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasCircleRender = __decorate$1n([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(CircleRenderContribution)), __metadata$11("design:paramtypes", [Object])], DefaultCanvasCircleRender);
+    DefaultCanvasCircleRender = __decorate$1m([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(CircleRenderContribution)), __metadata$11("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
     function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
       var _a;
@@ -20507,7 +20531,7 @@
       }
     }
 
-    var __decorate$1m = 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;
@@ -20664,7 +20688,7 @@
         } else this.drawSegmentItem(context, line.cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute, lineAttribute, clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb);
       }
     };
-    DefaultCanvasLineRender = __decorate$1m([injectable()], DefaultCanvasLineRender);
+    DefaultCanvasLineRender = __decorate$1l([injectable()], DefaultCanvasLineRender);
 
     function drawAreaSegments(path, segPath, percent, params) {
       var _a;
@@ -20854,7 +20878,7 @@
     const defaultAreaTextureRenderContribution = new DefaultAreaTextureRenderContribution();
     const defaultAreaBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-    var __decorate$1l = 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;
@@ -21109,12 +21133,12 @@
         return !1;
       }
     };
-    DefaultCanvasAreaRender = __decorate$1l([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(AreaRenderContribution)), __metadata$10("design:paramtypes", [Object])], DefaultCanvasAreaRender);
+    DefaultCanvasAreaRender = __decorate$1k([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(AreaRenderContribution)), __metadata$10("design:paramtypes", [Object])], DefaultCanvasAreaRender);
 
     const defaultPathTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultPathBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-    var __decorate$1k = 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;
@@ -21160,9 +21184,9 @@
         this.tempTheme = pathAttribute, this._draw(path, pathAttribute, !1, drawContext, params), this.tempTheme = null;
       }
     };
-    DefaultCanvasPathRender = __decorate$1k([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(PathRenderContribution)), __metadata$$("design:paramtypes", [Object])], DefaultCanvasPathRender);
+    DefaultCanvasPathRender = __decorate$1j([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(PathRenderContribution)), __metadata$$("design:paramtypes", [Object])], DefaultCanvasPathRender);
 
-    var __decorate$1j = 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;
@@ -21223,9 +21247,9 @@
         this.tempTheme = rectAttribute, this._draw(rect, rectAttribute, !1, drawContext, params), this.tempTheme = null;
       }
     };
-    DefaultCanvasRectRender = __decorate$1j([injectable(), __param$E(0, inject(ContributionProvider)), __param$E(0, named(RectRenderContribution)), __metadata$_("design:paramtypes", [Object])], DefaultCanvasRectRender);
+    DefaultCanvasRectRender = __decorate$1i([injectable(), __param$E(0, inject(ContributionProvider)), __param$E(0, named(RectRenderContribution)), __metadata$_("design:paramtypes", [Object])], DefaultCanvasRectRender);
 
-    var __decorate$1i = 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;
@@ -21271,7 +21295,7 @@
         if (context.beginPath(), keepDirIn3d && context.camera && context.project) {
           const p = context.project(x, y, z),
             camera = context.camera;
-          context.camera = null, !1 === parsedPath.draw(context, size, p.x, p.y, void 0, (p, a) => {
+          context.camera = null, !1 === parsedPath.draw(context, isArray$1(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, void 0, (p, a) => {
             var _a, _b, _c;
             if (symbol._parsedPath.svgCache) {
               const obj = Object.assign({}, a);
@@ -21294,7 +21318,7 @@
         this._draw(symbol, symbolAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasSymbolRender = __decorate$1i([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(SymbolRenderContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
+    DefaultCanvasSymbolRender = __decorate$1h([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(SymbolRenderContribution)), __metadata$Z("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
     class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRenderContribution {
       constructor() {
@@ -21316,7 +21340,7 @@
     }
     const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();
 
-    var __decorate$1h = 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;
@@ -21344,6 +21368,7 @@
             lineThrough = textAttribute.lineThrough,
             keepDirIn3d = textAttribute.keepDirIn3d,
             direction = textAttribute.direction,
+            whiteSpace = textAttribute.whiteSpace,
             fontSize = textAttribute.fontSize,
             verticalMode = textAttribute.verticalMode,
             x: originX = textAttribute.x,
@@ -21379,7 +21404,7 @@
           }
           doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, _x, _y, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, _x, _y, z), this.drawUnderLine(underline, lineThrough, text, _x, _y, z, textAttribute, context))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
         };
-        if (Array.isArray(str)) {
+        if (text.isMultiLine) {
           if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
             const {
               multilineLayout: multilineLayout
@@ -21519,7 +21544,7 @@
         }
       }
     };
-    DefaultCanvasTextRender = __decorate$1h([injectable(), __param$C(0, inject(ContributionProvider)), __param$C(0, named(TextRenderContribution)), __metadata$Y("design:paramtypes", [Object])], DefaultCanvasTextRender);
+    DefaultCanvasTextRender = __decorate$1g([injectable(), __param$C(0, inject(ContributionProvider)), __param$C(0, named(TextRenderContribution)), __metadata$Y("design:paramtypes", [Object])], DefaultCanvasTextRender);
 
     function drawPolygon(path, points, x, y) {
       path.moveTo(points[0].x + x, points[0].y + y);
@@ -21575,7 +21600,7 @@
     const defaultPolygonTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultPolygonBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-    var __decorate$1g = 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;
@@ -21618,9 +21643,9 @@
         this._draw(polygon, polygonAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasPolygonRender = __decorate$1g([injectable(), __param$B(0, inject(ContributionProvider)), __param$B(0, named(PolygonRenderContribution)), __metadata$X("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
+    DefaultCanvasPolygonRender = __decorate$1f([injectable(), __param$B(0, inject(ContributionProvider)), __param$B(0, named(PolygonRenderContribution)), __metadata$X("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
 
-    var __decorate$1f = 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;
@@ -21687,7 +21712,7 @@
         this._draw(image, imageAttribute, !1, drawContext);
       }
     };
-    DefaultCanvasImageRender = __decorate$1f([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(ImageRenderContribution)), __metadata$W("design:paramtypes", [Object])], DefaultCanvasImageRender);
+    DefaultCanvasImageRender = __decorate$1e([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(ImageRenderContribution)), __metadata$W("design:paramtypes", [Object])], DefaultCanvasImageRender);
 
     const IncrementalDrawContribution = Symbol.for("IncrementalDrawContribution");
     const ArcRender = Symbol.for("ArcRender");
@@ -21709,7 +21734,7 @@
     const ImageRender = Symbol.for("ImageRender");
     const DrawContribution = Symbol.for("DrawContribution");
 
-    var __decorate$1e = 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;
@@ -21756,7 +21781,7 @@
         this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
       }
     };
-    DefaultRenderService = __decorate$1e([injectable(), __param$z(0, inject(DrawContribution)), __metadata$V("design:paramtypes", [Object])], DefaultRenderService);
+    DefaultRenderService = __decorate$1d([injectable(), __param$z(0, inject(DrawContribution)), __metadata$V("design:paramtypes", [Object])], DefaultRenderService);
 
     var renderModule$1 = new ContainerModule(bind => {
       bind(RenderService).to(DefaultRenderService).inSingletonScope();
@@ -21765,7 +21790,7 @@
     const PickerService = Symbol.for("PickerService");
     const GlobalPickerService = Symbol.for("GlobalPickerService");
 
-    var __decorate$1d = 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;
@@ -21798,7 +21823,7 @@
         return context.highPerformanceRestore(), result;
       }
     };
-    ShadowRootPickItemInterceptorContribution = __decorate$1d([injectable()], ShadowRootPickItemInterceptorContribution);
+    ShadowRootPickItemInterceptorContribution = __decorate$1c([injectable()], ShadowRootPickItemInterceptorContribution);
     let InteractivePickItemInterceptorContribution = class {
       constructor() {
         this.order = 1;
@@ -21817,7 +21842,7 @@
         return null;
       }
     };
-    InteractivePickItemInterceptorContribution = __decorate$1d([injectable()], InteractivePickItemInterceptorContribution);
+    InteractivePickItemInterceptorContribution = __decorate$1c([injectable()], InteractivePickItemInterceptorContribution);
     let Canvas3DPickItemInterceptor = class {
       constructor() {
         this.order = 1;
@@ -21877,7 +21902,7 @@
         context.setTransformForCurrent();
       }
     };
-    Canvas3DPickItemInterceptor = __decorate$1d([injectable()], Canvas3DPickItemInterceptor);
+    Canvas3DPickItemInterceptor = __decorate$1c([injectable()], Canvas3DPickItemInterceptor);
 
     var pickModule = new ContainerModule(bind => {
       bind(PickerService).toService(GlobalPickerService), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution), bind(InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -21890,7 +21915,7 @@
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
     const PluginService = Symbol.for("PluginService");
 
-    var __decorate$1c = 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;
@@ -21929,6 +21954,9 @@
       register(plugin) {
         "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.push(plugin) : "onRegister" === plugin.activeEvent && (this.onRegisterPlugin.push(plugin), plugin.activate(this));
       }
+      unRegister(plugin) {
+        "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1) : "onRegister" === plugin.activeEvent && this.onRegisterPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1), plugin.deactivate(this);
+      }
       release() {
         this.onStartupFinishedPlugin.forEach(plugin => {
           plugin.deactivate(this);
@@ -21937,7 +21965,7 @@
         }), this.onRegisterPlugin = [];
       }
     };
-    DefaultPluginService = __decorate$1c([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(AutoEnablePlugins)), __metadata$U("design:paramtypes", [Object])], DefaultPluginService);
+    DefaultPluginService = __decorate$1b([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(AutoEnablePlugins)), __metadata$U("design:paramtypes", [Object])], DefaultPluginService);
 
     var pluginModule = new ContainerModule(bind => {
       bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -21951,7 +21979,7 @@
       bind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
     });
 
-    var __decorate$1b = 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;
@@ -22028,9 +22056,9 @@
         this.canvas.release();
       }
     };
-    CanvasLayerHandlerContribution = __decorate$1b([injectable(), __metadata$T("design:paramtypes", [])], CanvasLayerHandlerContribution);
+    CanvasLayerHandlerContribution = __decorate$1a([injectable(), __metadata$T("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-    var __decorate$1a = 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;
@@ -22072,9 +22100,9 @@
       }
       release() {}
     };
-    EmptyLayerHandlerContribution = __decorate$1a([injectable(), __metadata$S("design:paramtypes", [])], EmptyLayerHandlerContribution);
+    EmptyLayerHandlerContribution = __decorate$19([injectable(), __metadata$S("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-    var __decorate$19 = 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;
@@ -22143,7 +22171,7 @@
       }
       merge(layerHandlers) {}
     };
-    OffscreenLayerHandlerContribution = __decorate$19([injectable(), __metadata$R("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+    OffscreenLayerHandlerContribution = __decorate$18([injectable(), __metadata$R("design:paramtypes", [])], OffscreenLayerHandlerContribution);
 
     var layerHandlerModules = new ContainerModule(bind => {
       bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(EmptyLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution), bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution), bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
@@ -22259,7 +22287,7 @@
       return result;
     }
 
-    var __decorate$18 = 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;
@@ -22325,7 +22353,7 @@
         return !1;
       }
     };
-    CommonDrawItemInterceptorContribution = __decorate$18([injectable(), __metadata$Q("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
+    CommonDrawItemInterceptorContribution = __decorate$17([injectable(), __metadata$Q("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
     class InteractiveDrawItemInterceptorContribution {
       constructor() {
         this.order = 1;
@@ -22477,7 +22505,7 @@
     }
     const boundsAllocate = new DefaultBoundsAllocate();
 
-    var __decorate$17 = 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;
@@ -22677,9 +22705,9 @@
       }
       afterDraw(renderService, drawParams) {}
     };
-    DefaultDrawContribution = __decorate$17([injectable(), __param$x(0, multiInject(GraphicRender)), __param$x(1, inject(ContributionProvider)), __param$x(1, named(DrawItemInterceptor)), __metadata$P("design:paramtypes", [Array, Object])], DefaultDrawContribution);
+    DefaultDrawContribution = __decorate$16([injectable(), __param$x(0, multiInject(GraphicRender)), __param$x(1, inject(ContributionProvider)), __param$x(1, named(DrawItemInterceptor)), __metadata$P("design:paramtypes", [Array, Object])], DefaultDrawContribution);
 
-    var __decorate$16 = 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;
@@ -22770,9 +22798,9 @@
         }) : clip ? context.restore() : context.highPerformanceRestore();
       }
     };
-    DefaultCanvasGroupRender = __decorate$16([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(GroupRenderContribution)), __metadata$O("design:paramtypes", [Object])], DefaultCanvasGroupRender);
+    DefaultCanvasGroupRender = __decorate$15([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(GroupRenderContribution)), __metadata$O("design:paramtypes", [Object])], DefaultCanvasGroupRender);
 
-    var __decorate$15 = 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;
@@ -22823,9 +22851,9 @@
         }), context.setShadowBlendStyle && context.setShadowBlendStyle(line, attribute, defaultAttribute), context.setStrokeStyle(line, attribute, offsetX, offsetY, defaultAttribute), context.stroke());
       }
     };
-    DefaultIncrementalCanvasLineRender = __decorate$15([injectable()], DefaultIncrementalCanvasLineRender);
+    DefaultIncrementalCanvasLineRender = __decorate$14([injectable()], DefaultIncrementalCanvasLineRender);
 
-    var __decorate$14 = 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;
@@ -22868,10 +22896,10 @@
         }), context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute), context.setCommonStyle(area, attribute, offsetX, offsetY, defaultAttribute), context.fill());
       }
     };
-    DefaultIncrementalCanvasAreaRender = __decorate$14([injectable()], DefaultIncrementalCanvasAreaRender);
+    DefaultIncrementalCanvasAreaRender = __decorate$13([injectable()], DefaultIncrementalCanvasAreaRender);
 
     var STATUS,
-      __decorate$13 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      __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;
@@ -23015,7 +23043,7 @@
         });
       }
     };
-    DefaultIncrementalDrawContribution = __decorate$13([injectable(), __param$v(0, multiInject(GraphicRender)), __param$v(1, inject(DefaultIncrementalCanvasLineRender)), __param$v(2, inject(DefaultIncrementalCanvasAreaRender)), __param$v(3, inject(ContributionProvider)), __param$v(3, named(DrawItemInterceptor)), __metadata$N("design:paramtypes", [Array, Object, Object, Object])], DefaultIncrementalDrawContribution);
+    DefaultIncrementalDrawContribution = __decorate$12([injectable(), __param$v(0, multiInject(GraphicRender)), __param$v(1, inject(DefaultIncrementalCanvasLineRender)), __param$v(2, inject(DefaultIncrementalCanvasAreaRender)), __param$v(3, inject(ContributionProvider)), __param$v(3, named(DrawItemInterceptor)), __metadata$N("design:paramtypes", [Array, Object, Object, Object])], DefaultIncrementalDrawContribution);
 
     var renderModule = new ContainerModule(bind => {
       bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
@@ -23243,6 +23271,8 @@
         this.name = "FlexLayoutPlugin", this.activeEvent = "onRegister", this.id = Generator.GenAutoIncrementId(), this.key = this.name + this.id, this.tempBounds = new AABBBounds();
       }
       tryLayout(graphic) {
+        if (this.layouting) return;
+        this.layouting = !0;
         const p = graphic.parent;
         if (!p || !graphic.needUpdateLayout()) return;
         const theme = getTheme$1(p).group,
@@ -23365,7 +23395,7 @@
         }
         children.forEach((child, idx) => {
           child.addUpdateBoundTag(), child.addUpdatePositionTag(), child.clearUpdateLayoutTag();
-        }), p.addUpdateLayoutTag(), clip || this.tempBounds.equals(p.AABBBounds) || this.tryLayout(p);
+        }), p.addUpdateLayoutTag(), clip || this.tempBounds.equals(p.AABBBounds) || (this.tryLayout(p), this.layouting = !1);
       }
       layoutMain(p, children, justifyContent, main, mianLenArray, lastIdx, currSeg) {
         if ("flex-start" === justifyContent) {
@@ -23384,14 +23414,19 @@
             let pos = padding;
             for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen + 2 * padding;
           }
-        } else if ("space-between" === justifyContent) if (currSeg.mainLen >= main.len) {
-          let pos = 0;
+        } else if ("space-between" === justifyContent) {
+          if (currSeg.mainLen >= main.len) {
+            let pos = 0;
+            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen;
+          } else {
+            const size = currSeg.idx - lastIdx + 1,
+              padding = (main.len - currSeg.mainLen) / (2 * size - 2);
+            let pos = 0;
+            for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen + 2 * padding;
+          }
+        } else if ("center" === justifyContent) {
+          let pos = (main.len - currSeg.mainLen) / 2;
           for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen;
-        } else {
-          const size = currSeg.idx - lastIdx + 1,
-            padding = (main.len - currSeg.mainLen) / (2 * size - 2);
-          let pos = 0;
-          for (let i = lastIdx; i <= currSeg.idx; i++) children[i].attribute[main.field] = pos + getPadding(children[i], main.field), pos += mianLenArray[i].mainLen + 2 * padding;
         }
       }
       layoutCross(children, alignItem, cross, anchorPos, lenArray, currSeg, lastIdx) {
@@ -23399,13 +23434,13 @@
       }
       activate(context) {
         this.pluginService = context, application.graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {
-          graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic);
+          graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic), this.layouting = !1;
         }), application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
-          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === this.pluginService.stage && stage.renderCount && _tempBounds.copy(bounds);
+          graphic.glyphHost && (graphic = graphic.glyphHost), stage && stage === this.pluginService.stage && graphic.isContainer && _tempBounds.copy(bounds);
         }), application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
-          stage && stage === this.pluginService.stage && stage.renderCount && (_tempBounds.equals(bounds) || this.tryLayout(graphic));
+          stage && stage === this.pluginService.stage && graphic.isContainer && (_tempBounds.equals(bounds) || (this.tryLayout(graphic), this.layouting = !1));
         }), application.graphicService.hooks.onSetStage.tap(this.key, graphic => {
-          graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic);
+          graphic.glyphHost && (graphic = graphic.glyphHost), this.tryLayout(graphic), this.layouting = !1;
         });
       }
       deactivate(context) {
@@ -23773,7 +23808,7 @@
       }
       disableView3dTranform() {
         this.view3dTranform && (this.view3dTranform = !1, this.pluginService.findPluginsByName("ViewTransform3dPlugin").forEach(plugin => {
-          plugin.deactivate(this.pluginService);
+          this.pluginService.unRegister(plugin);
         }));
       }
       enableAutoRender() {
@@ -23781,7 +23816,7 @@
       }
       disableAutoRender() {
         this.autoRender && (this.autoRender = !1, this.pluginService.findPluginsByName("AutoRenderPlugin").forEach(plugin => {
-          plugin.deactivate(this.pluginService);
+          this.pluginService.unRegister(plugin);
         }));
       }
       enableIncrementalAutoRender() {
@@ -23789,7 +23824,7 @@
       }
       disableIncrementalAutoRender() {
         this.increaseAutoRender && (this.increaseAutoRender = !1, this.pluginService.findPluginsByName("IncrementalAutoRenderPlugin").forEach(plugin => {
-          plugin.deactivate(this.pluginService);
+          this.pluginService.unRegister(plugin);
         }));
       }
       enableDirtyBounds() {
@@ -23800,7 +23835,7 @@
       }
       disableDirtyBounds() {
         this.dirtyBounds && (this.dirtyBounds = null, this.pluginService.findPluginsByName("DirtyBoundsPlugin").forEach(plugin => {
-          plugin.deactivate(this.pluginService);
+          this.pluginService.unRegister(plugin);
         }));
       }
       enableLayout() {
@@ -23808,7 +23843,7 @@
       }
       disableLayout() {
         this._enableLayout && (this._enableLayout = !1, this.pluginService.findPluginsByName("FlexLayoutPlugin").forEach(plugin => {
-          plugin.deactivate(this.pluginService);
+          this.pluginService.unRegister(plugin);
         }));
       }
       enableHtmlAttribute(container) {
@@ -23816,7 +23851,7 @@
       }
       disableHtmlAttribute() {
         this.htmlAttribute && (this.htmlAttribute = !1, this.pluginService.findPluginsByName("HtmlAttributePlugin").forEach(plugin => {
-          plugin.deactivate(this.pluginService);
+          this.pluginService.unRegister(plugin);
         }));
       }
       tryUpdateAABBBounds() {
@@ -23999,7 +24034,7 @@
         return c.nativeCanvas ? c.nativeCanvas : null;
       }
       setCursor(mode) {
-        this._cursor = mode, this.eventSystem.setCursor(mode);
+        this._cursor = mode, this.eventSystem.setCursor(mode, "ignore");
       }
       getCursor() {
         return this._cursor;
@@ -24010,7 +24045,7 @@
       return new Stage(params);
     }
 
-    var __decorate$12 = 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;
@@ -24224,9 +24259,9 @@
         this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
       }
     };
-    EmptyContext2d = __decorate$12([injectable(), __metadata$M("design:paramtypes", [Object, Number])], EmptyContext2d);
+    EmptyContext2d = __decorate$11([injectable(), __metadata$M("design:paramtypes", [Object, Number])], EmptyContext2d);
 
-    var __decorate$11 = 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;
@@ -24331,9 +24366,9 @@
         this.controled && this._nativeCanvas.parentElement && this._nativeCanvas.parentElement.removeChild(this._nativeCanvas);
       }
     };
-    BaseCanvas.env = "browser", BaseCanvas = __decorate$11([injectable(), __metadata$L("design:paramtypes", [Object])], BaseCanvas);
+    BaseCanvas.env = "browser", BaseCanvas = __decorate$10([injectable(), __metadata$L("design:paramtypes", [Object])], BaseCanvas);
 
-    var __decorate$10 = 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;
@@ -24406,9 +24441,9 @@
         };
       }
     };
-    BaseEnvContribution = __decorate$10([injectable()], BaseEnvContribution);
+    BaseEnvContribution = __decorate$$([injectable()], BaseEnvContribution);
 
-    var __decorate$$ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$_ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24442,9 +24477,9 @@
         };
       }
     };
-    BaseWindowHandlerContribution = __decorate$$([injectable(), __metadata$K("design:paramtypes", [])], BaseWindowHandlerContribution);
+    BaseWindowHandlerContribution = __decorate$_([injectable(), __metadata$K("design:paramtypes", [])], BaseWindowHandlerContribution);
 
-    var __decorate$_ = 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;
@@ -24563,7 +24598,7 @@
         return picker || null;
       }
     };
-    DefaultPickService = __decorate$_([injectable(), __param$u(0, inject(ContributionProvider)), __param$u(0, named(PickItemInterceptor)), __metadata$J("design:paramtypes", [Object])], DefaultPickService);
+    DefaultPickService = __decorate$Z([injectable(), __param$u(0, inject(ContributionProvider)), __param$u(0, named(PickItemInterceptor)), __metadata$J("design:paramtypes", [Object])], DefaultPickService);
 
     let loadArcModule = !1;
     const arcModule = new ContainerModule(bind => {
@@ -24610,7 +24645,7 @@
       loadPolygonModule || (loadPolygonModule = !0, bind(PolygonRender).to(DefaultCanvasPolygonRender).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PolygonRenderContribution));
     });
 
-    var __decorate$Z = 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;
@@ -24642,14 +24677,14 @@
         }), context.highPerformanceRestore();
       }
     };
-    DefaultCanvasGlyphRender = __decorate$Z([injectable()], DefaultCanvasGlyphRender);
+    DefaultCanvasGlyphRender = __decorate$Y([injectable()], DefaultCanvasGlyphRender);
 
     let loadGlyphModule = !1;
     const glyphModule = new ContainerModule(bind => {
       loadGlyphModule || (loadGlyphModule = !0, bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope(), bind(GraphicRender).toService(GlyphRender));
     });
 
-    var __decorate$Y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24710,7 +24745,7 @@
         this._draw(richtext, richtextAttribute, !1, drawContext);
       }
     };
-    DefaultCanvasRichTextRender = __decorate$Y([injectable(), __metadata$I("design:paramtypes", [])], DefaultCanvasRichTextRender);
+    DefaultCanvasRichTextRender = __decorate$X([injectable(), __metadata$I("design:paramtypes", [])], DefaultCanvasRichTextRender);
 
     let loadRichtextModule = !1;
     const richtextModule = new ContainerModule(bind => {
@@ -24722,7 +24757,7 @@
       loadImageModule || (loadImageModule = !0, bind(ImageRender).to(DefaultCanvasImageRender).inSingletonScope(), bind(GraphicRender).toService(ImageRender), bind(ImageRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, ImageRenderContribution));
     });
 
-    var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24848,14 +24883,14 @@
         this._draw(rect, rectAttribute, !1, drawContext);
       }
     };
-    DefaultCanvasRect3dRender = __decorate$X([injectable()], DefaultCanvasRect3dRender);
+    DefaultCanvasRect3dRender = __decorate$W([injectable()], DefaultCanvasRect3dRender);
 
     let loadRect3dModule = !1;
     const rect3dModule = new ContainerModule(bind => {
       loadRect3dModule || (loadRect3dModule = !0, bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope(), bind(GraphicRender).toService(Rect3DRender));
     });
 
-    var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -24977,14 +25012,14 @@
         this._draw(arc, arcAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasArc3DRender = __decorate$W([injectable()], DefaultCanvasArc3DRender);
+    DefaultCanvasArc3DRender = __decorate$V([injectable()], DefaultCanvasArc3DRender);
 
     let loadArc3dModule = !1;
     const arc3dModule = new ContainerModule(bind => {
       loadArc3dModule || (loadArc3dModule = !0, bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope(), bind(GraphicRender).toService(Arc3dRender));
     });
 
-    var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -25092,7 +25127,7 @@
         this._draw(pyramid3d, pyramid3dAttribute, !1, drawContext);
       }
     };
-    DefaultCanvasPyramid3dRender = __decorate$V([injectable()], DefaultCanvasPyramid3dRender);
+    DefaultCanvasPyramid3dRender = __decorate$U([injectable()], DefaultCanvasPyramid3dRender);
 
     let loadPyramid3dModule = !1;
     const pyramid3dModule = new ContainerModule(bind => {
@@ -26128,12 +26163,12 @@
         if ((isNil$1(colorKey.a) && isNil$1(colorKey.l)) || !isString$1(color)) {
             return color;
         }
-        let c = new Color$2(color);
+        let c = new Color(color);
         if (isValid$1(colorKey.l)) {
             const { r, g, b } = c.color;
             const { h, s } = rgbToHsl(r, g, b);
             const rgb = hslToRgb(h, s, colorKey.l);
-            const newColor = new Color$2(`rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`);
+            const newColor = new Color(`rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`);
             newColor.setOpacity(c.color.opacity);
             c = newColor;
         }
@@ -27148,32 +27183,41 @@
     function getLinePoints(items, includeOnePoint, lastPoints, isArea) {
       if (!items || !items.length || 1 === items.length && includeOnePoint) return [];
       return items.some(item => isValidPointsChannel(Object.keys(item.nextAttrs), "line")) ? items.map((item, index) => {
-        var _a, _b, _c, _d, _e;
-        const attrs = item.nextAttrs;
-        return isNil$1(attrs.x) && (attrs.x = null === (_a = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _a ? void 0 : _a.x), isNil$1(attrs.y) && (attrs.y = null === (_b = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _b ? void 0 : _b.y), isNil$1(attrs.defined) && !1 === (null === (_c = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _c ? void 0 : _c.defined) && (attrs.defined = !1), attrs.context = item.key, isArea && (isNil$1(attrs.x1) && (attrs.x1 = null === (_d = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _d ? void 0 : _d.x1), isNil$1(attrs.y1) && (attrs.y1 = null === (_e = null == lastPoints ? void 0 : lastPoints[index]) || void 0 === _e ? void 0 : _e.y1)), attrs;
+        var _a;
+        const attrs = item.nextAttrs,
+          {
+            x: x,
+            y: y,
+            x1: x1,
+            y1: y1,
+            defined: defined
+          } = null !== (_a = null == lastPoints ? void 0 : lastPoints[index]) && void 0 !== _a ? _a : {};
+        return isNil$1(attrs.x) && (attrs.x = x), isNil$1(attrs.y) && (attrs.y = y), isNil$1(attrs.defined) && !1 === defined && (attrs.defined = !1), attrs.context = item.key, isArea && (isNil$1(attrs.x1) && (attrs.x1 = x1), isNil$1(attrs.y1) && (attrs.y1 = y1)), attrs;
       }) : null != lastPoints ? lastPoints : [];
     }
-    function getLargeRectsPoints(items, includeOnePoint, lastPoints) {
+    function getLargeRectsPoints(items, includeOnePoint) {
+      let lastPoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
       if (!items || !items.length || 1 === items.length && includeOnePoint) return [];
       const arr = new Float32Array(4 * items.length);
       return items.forEach((item, index) => {
         var _a, _b, _c, _d;
         const attrs = item.nextAttrs,
-          x = null !== (_a = attrs.x) && void 0 !== _a ? _a : null == lastPoints ? void 0 : lastPoints[4 * index],
-          y = null !== (_b = attrs.y) && void 0 !== _b ? _b : null == lastPoints ? void 0 : lastPoints[4 * index + 1],
-          width = null !== (_c = attrs.width) && void 0 !== _c ? _c : null == lastPoints ? void 0 : lastPoints[4 * index + 2],
-          y1 = null !== (_d = attrs.y1) && void 0 !== _d ? _d : null == lastPoints ? void 0 : lastPoints[4 * index + 3];
+          x = null !== (_a = attrs.x) && void 0 !== _a ? _a : lastPoints[4 * index],
+          y = null !== (_b = attrs.y) && void 0 !== _b ? _b : lastPoints[4 * index + 1],
+          width = null !== (_c = attrs.width) && void 0 !== _c ? _c : lastPoints[4 * index + 2],
+          y1 = null !== (_d = attrs.y1) && void 0 !== _d ? _d : lastPoints[4 * index + 3];
         arr[4 * index] = x, arr[4 * index + 1] = y, arr[4 * index + 2] = width, arr[4 * index + 3] = y1 - y;
       }), arr;
     }
-    function getLargeSymbolsPoints(items, includeOnePoint, lastPoints) {
+    function getLargeSymbolsPoints(items, includeOnePoint) {
+      let lastPoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
       if (!items || !items.length || 1 === items.length && includeOnePoint) return [];
       const arr = new Float32Array(2 * items.length);
       return items.forEach((item, index) => {
         var _a, _b;
         const attrs = item.nextAttrs,
-          x = null !== (_a = attrs.x) && void 0 !== _a ? _a : null == lastPoints ? void 0 : lastPoints[2 * index],
-          y = null !== (_b = attrs.y) && void 0 !== _b ? _b : null == lastPoints ? void 0 : lastPoints[2 * index + 1];
+          x = null !== (_a = attrs.x) && void 0 !== _a ? _a : lastPoints[2 * index],
+          y = null !== (_b = attrs.y) && void 0 !== _b ? _b : lastPoints[2 * index + 1];
         arr[2 * index] = x, arr[2 * index + 1] = y;
       }), arr;
     }
@@ -27516,7 +27560,7 @@
       const graphicAttributes = {},
         changedKeys = nextAttrs ? Object.keys(nextAttrs) : [],
         transforms = isString$1(markType) ? transformsByType[markType] : markType;
-      if (null == transforms ? void 0 : transforms.length) {
+      if (transforms && transforms.length) {
         const tags = [];
         changedKeys.forEach(key => {
           let isTransformed = !1;
@@ -27747,7 +27791,7 @@
         var _a, _b, _c, _d;
         const item = items[0];
         if (!item.nextAttrs || 0 === Object.keys(item.nextAttrs).length) return {};
-        let nextAttrs = null == item ? void 0 : item.nextAttrs;
+        let nextAttrs = item.nextAttrs;
         if (isPointsMarkType(markType) && items && items.length && isNil$1(null === (_a = item.nextAttrs) || void 0 === _a ? void 0 : _a.points) && (!0 === computePoints || isValidPointsChannel(Object.keys(item.nextAttrs), this.mark.markType))) {
           const lastPoints = this.getGraphicAttribute("points", !1),
             lastSegments = this.getGraphicAttribute("segments", !1),
@@ -27903,174 +27947,6 @@
       }
     }
 
-    var ScrollBarPlugin_1,
-      __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;
-        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 ScrollBarPlugin = ScrollBarPlugin_1 = class {
-      constructor() {
-        this.name = "scrollbar", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.scroll = e => {
-          var _a;
-          const graphic = e.target,
-            data = this.getScrollContainer(graphic),
-            {
-              g: scrollContainer
-            } = data;
-          let {
-            showH: showH,
-            showV: showV
-          } = data;
-          if (!scrollContainer || 1 === scrollContainer.count) return;
-          this.scrollContainerBounds = scrollContainer.AABBBounds.clone(), abs$1(e.deltaX) > abs$1(e.deltaY) ? (showH = showH && !0, showV = showV && !1) : (showH = showH && !1, showV = showV && !0), scrollContainer.setAttributes({
-            scrollX: showH ? (scrollContainer.attribute.scrollX || 0) + e.deltaX : scrollContainer.attribute.scrollX || 0,
-            scrollY: showV ? (scrollContainer.attribute.scrollY || 0) + e.deltaY : scrollContainer.attribute.scrollY || 0
-          });
-          const childrenBounds = this.childrenBounds,
-            scrollContainerBounds = this.scrollContainerBounds;
-          childrenBounds.clear(), scrollContainer.forEachChildren(c => {
-            childrenBounds.union(c.AABBBounds);
-          }), childrenBounds.transformWithMatrix(scrollContainer.transMatrix), showH && scrollContainerBounds.x1 <= childrenBounds.x1 && scrollContainerBounds.x2 >= childrenBounds.x2 && (showH = !1), showV && scrollContainerBounds.y1 <= childrenBounds.y1 && scrollContainerBounds.y2 >= childrenBounds.y2 && (showV = !1);
-          const m = scrollContainer.transMatrix;
-          scrollContainerBounds.translate(-m.e, -m.f), childrenBounds.translate(-m.e, -m.f), showH && (childrenBounds.x1 = min$1(childrenBounds.x1, scrollContainerBounds.x1), childrenBounds.x2 = max$1(childrenBounds.x2, scrollContainerBounds.x2)), showV && (childrenBounds.y1 = min$1(childrenBounds.y1, scrollContainerBounds.y1), childrenBounds.y2 = max$1(childrenBounds.y2, scrollContainerBounds.y2)), childrenBounds.translate(scrollContainer.attribute.scrollX, scrollContainer.attribute.scrollY);
-          const container = (null !== (_a = scrollContainer.shadowRoot) && void 0 !== _a ? _a : scrollContainer.attachShadow()).createOrUpdateChild("scroll-bar", {}, "group"),
-            {
-              h: h,
-              v: v,
-              deltaH: deltaH,
-              deltaV: deltaV
-            } = this.addOrUpdateScroll(showH, showV, container, scrollContainer);
-          scrollContainer.setAttributes({
-            scrollX: h ? scrollContainer.attribute.scrollX || 0 : (scrollContainer.attribute.scrollX || 0) + deltaH,
-            scrollY: v ? scrollContainer.attribute.scrollY || 0 : (scrollContainer.attribute.scrollY || 0) + deltaV
-          });
-        };
-      }
-      activate(context) {
-        this.pluginService = context;
-        const {
-          stage: stage
-        } = this.pluginService;
-        this.childrenBounds = new AABBBounds(), stage.addEventListener("wheel", this.scroll), this.params = ScrollBarPlugin_1.defaultParams;
-      }
-      addOrUpdateScroll(showH, showV, container, scrollContainer) {
-        const scrollbars = container.children;
-        let h = !1,
-          v = !1,
-          deltaH = 0,
-          deltaV = 0;
-        if (showH) {
-          const hScrollbar = scrollbars.filter(g => "vertical" !== g.attribute.direction)[0],
-            d = this.addOrUpdateHScroll(this.scrollContainerBounds, container, hScrollbar);
-          h = d.valid, deltaH = d.delta, this.disappearScrollBar(hScrollbar, v);
-        }
-        if (showV) {
-          const vScrollbar = scrollbars.filter(g => "vertical" === g.attribute.direction)[0],
-            d = this.addOrUpdateVScroll(this.scrollContainerBounds, container, vScrollbar);
-          v = d.valid, deltaV = d.delta, this.disappearScrollBar(vScrollbar, v);
-        }
-        return {
-          h: h,
-          deltaH: deltaH,
-          v: v,
-          deltaV: deltaV
-        };
-      }
-      addOrUpdateHScroll(scrollContainerB, container, scrollBar) {
-        scrollBar || (scrollBar = new ScrollBar$1({
-          direction: "horizontal",
-          x: 0,
-          y: 0,
-          width: scrollContainerB.width(),
-          height: 12,
-          padding: [2, 0],
-          railStyle: {
-            fill: "rgba(0, 0, 0, .1)"
-          },
-          range: [0, .05]
-        }), container.add(scrollBar));
-        const b = scrollBar.AABBBounds,
-          childrenBounds = this.childrenBounds,
-          y = scrollContainerB.y2 - b.height(),
-          ratio = Math.min(b.width() / this.childrenBounds.width(), 1);
-        let start = (scrollContainerB.x1 - childrenBounds.x1) / (childrenBounds.width() - scrollContainerB.width()) * (1 - ratio),
-          valid = !0,
-          delta = 0;
-        return start < 0 ? (start = 0, valid = !1, delta = scrollContainerB.x1 - childrenBounds.x1) : start + ratio > 1 && (start = 1 - ratio, valid = !1, delta = scrollContainerB.x1 - childrenBounds.x1 - (childrenBounds.width() - scrollContainerB.width())), scrollBar.setAttributes({
-          y: y,
-          visibleAll: !0,
-          range: [start, start + ratio]
-        }), {
-          valid: valid,
-          delta: delta
-        };
-      }
-      addOrUpdateVScroll(scrollContainerB, container, scrollBar) {
-        scrollBar || (scrollBar = new ScrollBar$1({
-          direction: "vertical",
-          x: 0,
-          y: 0,
-          width: 12,
-          height: scrollContainerB.height(),
-          padding: [2, 0],
-          railStyle: {
-            fill: "rgba(0, 0, 0, .1)"
-          },
-          range: [0, .05]
-        }), container.add(scrollBar));
-        const b = scrollBar.AABBBounds,
-          x = scrollContainerB.x2 - b.width(),
-          childrenBounds = this.childrenBounds,
-          ratio = Math.min(b.height() / childrenBounds.height(), 1);
-        let start = (scrollContainerB.y1 - childrenBounds.y1) / (childrenBounds.height() - scrollContainerB.height()) * (1 - ratio),
-          valid = !0,
-          delta = 0;
-        return start < 0 ? (start = 0, valid = !1, delta = scrollContainerB.y1 - childrenBounds.y1) : start + ratio > 1 && (start = 1 - ratio, valid = !1, delta = scrollContainerB.y1 - childrenBounds.y1 - (childrenBounds.height() - scrollContainerB.height())), scrollBar.setAttributes({
-          x: x,
-          visibleAll: !0,
-          range: [start, start + ratio]
-        }), {
-          valid: valid,
-          delta: delta
-        };
-      }
-      disappearScrollBar(scrollBar, valid) {
-        var _a;
-        scrollBar._plugin_timeout && clearTimeout(scrollBar._plugin_timeout), scrollBar._plugin_timeout = setTimeout(() => {
-          scrollBar.setAttribute("visibleAll", !1);
-        }, null !== (_a = this.params.timeout) && void 0 !== _a ? _a : 0);
-      }
-      getScrollContainer(graphic) {
-        let g = graphic;
-        for (; g;) {
-          if (g.attribute.overflow && "hidden" !== g.attribute.overflow) {
-            const overflow = g.attribute.overflow;
-            let showH = !1,
-              showV = !1;
-            return "scroll" === overflow ? (showH = !0, showV = !0) : (showH = "scroll-x" === overflow, showV = !showH), {
-              g: g,
-              showH: showH,
-              showV: showV
-            };
-          }
-          g = g.parent;
-        }
-        return null;
-      }
-      deactivate(context) {
-        const {
-          stage: stage
-        } = this.pluginService;
-        stage.removeEventListener("wheel", this.scroll);
-      }
-    };
-    ScrollBarPlugin.defaultParams = {
-      timeout: 500
-    }, ScrollBarPlugin = ScrollBarPlugin_1 = __decorate$U([injectable()], ScrollBarPlugin);
-
     class DragNDrop {
       constructor(rootNode) {
         this.onPointerDown = event => {
@@ -32540,9 +32416,6 @@
       loaded || (loaded = !0, registerWrapTextGraphic());
     }
 
-    new ContainerModule((bind, unbind, isBound, rebind) => {
-      isBound(ScrollBarPlugin) || (bind(ScrollBarPlugin).toSelf(), bind(AutoEnablePlugins).toService(ScrollBarPlugin));
-    });
     function loadScrollbarComponent() {
       registerGroup(), registerRect();
     }
@@ -32584,7 +32457,10 @@
           const {
             direction: direction
           } = this.attribute;
-          this._prePos = "horizontal" === direction ? e.clientX : e.clientY, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMove, {
+          this._prePos = "horizontal" === direction ? e.clientX : e.clientY, this._dispatchEvent("scrollDown", {
+            pos: this._prePos,
+            event: e
+          }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
           }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMove, {
             capture: !0
@@ -32803,10 +32679,7 @@
       return group ? group.findAll(node => "group" !== node.type, !0) : [];
     }
 
-    const defaultAlternativeColors = ["#ffffff", "#000000"],
-      {
-        Color: Color
-      } = ColorUtil;
+    const defaultAlternativeColors = ["#ffffff", "#000000"];
     function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors, mode) {
       if ("string" != typeof foregroundColorOrigin || "string" != typeof backgroundColorOrogin) return foregroundColorOrigin;
       const foregroundColor = new Color(foregroundColorOrigin).toHex(),
@@ -33129,133 +33002,6 @@
       poptip: merge$1({}, 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$1(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;
-          const attribute = {};
-          merge$1(attribute, PopTip.defaultAttributes, graphic.attribute.poptip ? graphic.attribute.poptip : {}), this.poptipComponent ? this.poptipComponent.initAttributes(attribute) : this.poptipComponent = new PopTip(attribute);
-          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.pointerlave = e => {
-          const {
-            stage: stage
-          } = this.pluginService;
-          e.target === stage && this.unpoptip(e);
-        }, 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), stage.addEventListener("pointerleave", this.pointerlave);
-      }
-      setActiveGraphic(graphic, rerender) {
-        this.activeGraphic = graphic, this.pluginService.stage.renderNextFrame();
-      }
-      deactivate(context) {
-        const {
-          stage: stage
-        } = this.pluginService;
-        stage.removeEventListener("pointerover", this.poptip), stage.removeEventListener("pointerleave", this.pointerlave);
-      }
-    };
-    PopTipForClipedTextPlugin = __decorate([injectable()], PopTipForClipedTextPlugin);
-
-    const popTipModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-      isBound(PopTipRenderContribution) || (bind(PopTipRenderContribution).toSelf().inSingletonScope(), bind(InteractiveSubRenderContribution).toService(PopTipRenderContribution)), isBound(PopTipPlugin) || (bind(PopTipPlugin).toSelf(), bind(AutoEnablePlugins).toService(PopTipPlugin)), isBound(PopTipForClipedTextPlugin) || (bind(PopTipForClipedTextPlugin).toSelf(), bind(AutoEnablePlugins).toService(PopTipForClipedTextPlugin));
-    });
-    function loadPoptip() {
-      container.load(popTipModule);
-    }
     function loadPoptipComponent() {
       registerGroup(), registerWrapText(), registerSymbol(), registerRect();
     }
@@ -33519,6 +33265,134 @@
       padding: 10
     };
 
+    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$1(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;
+          const attribute = {};
+          merge$1(attribute, PopTip.defaultAttributes, graphic.attribute.poptip ? graphic.attribute.poptip : {}), this.poptipComponent ? this.poptipComponent.initAttributes(attribute) : this.poptipComponent = new PopTip(attribute);
+          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.pointerlave = e => {
+          const {
+            stage: stage
+          } = this.pluginService;
+          e.target === stage && this.unpoptip(e);
+        }, this.poptip = e => {
+          const graphic = e.target;
+          if ("text" !== graphic.type || !graphic.cliped || graphic.isContainer || !graphic.attribute || graphic.attribute.disableAutoClipedPoptip) 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), stage.addEventListener("pointerleave", this.pointerlave);
+      }
+      setActiveGraphic(graphic, rerender) {
+        this.activeGraphic = graphic, this.pluginService.stage.renderNextFrame();
+      }
+      deactivate(context) {
+        const {
+          stage: stage
+        } = this.pluginService;
+        stage.removeEventListener("pointerover", this.poptip), stage.removeEventListener("pointerleave", this.pointerlave);
+      }
+    };
+    PopTipForClipedTextPlugin = __decorate([injectable()], PopTipForClipedTextPlugin);
+
+    const popTipModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+      isBound(PopTipRenderContribution) || (bind(PopTipRenderContribution).toSelf().inSingletonScope(), bind(InteractiveSubRenderContribution).toService(PopTipRenderContribution)), isBound(PopTipPlugin) || (bind(PopTipPlugin).toSelf(), bind(AutoEnablePlugins).toService(PopTipPlugin)), isBound(PopTipForClipedTextPlugin) || (bind(PopTipForClipedTextPlugin).toSelf(), bind(AutoEnablePlugins).toService(PopTipForClipedTextPlugin));
+    });
+    function loadPoptip() {
+      container.load(popTipModule);
+    }
+
     class CrosshairBase extends AbstractComponent {
       constructor() {
         super(...arguments), this.name = "crosshair";
@@ -34472,7 +34346,8 @@
       _renderWithAnimation(labels) {
         const currentTextMap = new Map(),
           prevTextMap = this._graphicToText || new Map(),
-          texts = [];
+          texts = [],
+          labelLines = [];
         labels.forEach((text, index) => {
           var _a, _b, _c, _d, _e, _f, _g;
           const labelLine = this._labelLine(text),
@@ -34491,9 +34366,9 @@
                 from: from,
                 to: to
               } = getAnimationAttributes(text.attribute, "fadeIn");
-              this.add(text), labelLine && (this._setStatesOfLabelLine(labelLine), this.add(labelLine)), this._syncStateWithRelatedGraphic(relatedGraphic), relatedGraphic.once("animate-bind", a => {
-                text.setAttributes(from);
-                const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, this._animationConfig.enter);
+              this.add(text), labelLine && (this._setStatesOfLabelLine(labelLine), labelLines.push(labelLine), this.add(labelLine)), this._syncStateWithRelatedGraphic(relatedGraphic), this._animationConfig.enter.duration > 0 && relatedGraphic.once("animate-bind", a => {
+                text.setAttributes(from), labelLine && labelLine.setAttributes(from);
+                const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, this._animationConfig.enter);
                 relatedGraphic.on("afterAttributeUpdate", listener);
               });
             }
@@ -34544,7 +34419,7 @@
       _syncStateWithRelatedGraphic(relatedGraphic) {
         this.attribute.syncState && relatedGraphic.on("afterAttributeUpdate", this._handleRelatedGraphicSetState);
       }
-      _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, _ref) {
+      _afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, _ref) {
         let {
           mode: mode,
           duration: duration,
@@ -34552,38 +34427,41 @@
           delay: delay
         } = _ref;
         const listener = event => {
-          var _a, _b;
+          var _a, _b, _c;
           const {
             detail: detail
           } = event;
           if (!detail) return {};
-          if (!(detail && detail.type === AttributeUpdateType.ANIMATE_UPDATE && detail.animationState && "wait" !== (null === (_a = detail.animationState.step) || void 0 === _a ? void 0 : _a.type))) return {};
-          if (detail.type === AttributeUpdateType.ANIMATE_END) return void text.setAttributes(to);
+          const step = null === (_a = detail.animationState) || void 0 === _a ? void 0 : _a.step;
+          if (!(detail.type === AttributeUpdateType.ANIMATE_UPDATE && step && !("wait" === step.type && null == (null === (_b = step.prev) || void 0 === _b ? void 0 : _b.type)))) return {};
+          if (detail.type === AttributeUpdateType.ANIMATE_END) return text.setAttributes(to), void (labelLine && labelLine.setAttributes(to));
           const onStart = () => {
             relatedGraphic && (relatedGraphic.onAnimateBind = void 0, relatedGraphic.removeEventListener("afterAttributeUpdate", listener));
           };
           switch (mode) {
             case "after":
-              detail.animationState.end && text.animate({
+              detail.animationState.end && (text.animate({
                 onStart: onStart
-              }).wait(delay).to(to, duration, easing);
+              }).wait(delay).to(to, duration, easing), labelLine && labelLine.animate().wait(delay).to(to, duration, easing));
               break;
             case "after-all":
-              index === texts.length - 1 && detail.animationState.end && texts.forEach(t => {
+              index === texts.length - 1 && detail.animationState.end && (texts.forEach(t => {
                 t.animate({
                   onStart: onStart
                 }).wait(delay).to(to, duration, easing);
-              });
+              }), labelLines.forEach(t => {
+                t.animate().wait(delay).to(to, duration, easing);
+              }));
               break;
             default:
               if (this._isCollectionBase) {
                 const point = this._idToPoint.get(text.attribute.id);
-                !point || text.animates && text.animates.has("label-animate") || !relatedGraphic.containsPoint(point.x, point.y, IContainPointMode.LOCAL, null === (_b = this.stage) || void 0 === _b ? void 0 : _b.pickerService) || text.animate({
+                !point || text.animates && text.animates.has("label-animate") || !relatedGraphic.containsPoint(point.x, point.y, IContainPointMode.LOCAL, null === (_c = this.stage) || void 0 === _c ? void 0 : _c.pickerService) || (text.animate({
                   onStart: onStart
-                }).wait(delay).to(to, duration, easing);
-              } else detail.animationState.isFirstFrameOfStep && text.animate({
+                }).wait(delay).to(to, duration, easing), labelLine && labelLine.animate().wait(delay).to(to, duration, easing));
+              } else detail.animationState.isFirstFrameOfStep && (text.animate({
                 onStart: onStart
-              }).wait(delay).to(to, duration, easing);
+              }).wait(delay).to(to, duration, easing), labelLine && labelLine.animate().wait(delay).to(to, duration, easing));
           }
         };
         return listener;
@@ -42762,24 +42640,31 @@
       return (null !== (_a = spec.marks) && void 0 !== _a ? _a : []).forEach(mark => traverse(mark, "root")), spec;
     };
     const normalizeRunningConfig = runningConfig => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+      var _a, _b, _c, _d, _e;
+      const {
+        reuse = DefaultReuse,
+        morph = DefaultMorph,
+        morphAll = DefaultMorphAll,
+        animation = {},
+        enableExitAnimation = DefaultEnableExitAnimation
+      } = null != runningConfig ? runningConfig : {};
       return {
-        reuse: null !== (_a = null == runningConfig ? void 0 : runningConfig.reuse) && void 0 !== _a ? _a : DefaultReuse,
-        morph: null !== (_b = null == runningConfig ? void 0 : runningConfig.morph) && void 0 !== _b ? _b : DefaultMorph,
-        morphAll: null !== (_c = null == runningConfig ? void 0 : runningConfig.morphAll) && void 0 !== _c ? _c : DefaultMorphAll,
+        reuse: reuse,
+        morph: morph,
+        morphAll: morphAll,
         animation: {
-          easing: null !== (_e = null === (_d = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _d ? void 0 : _d.easing) && void 0 !== _e ? _e : DefaultAnimationEasing,
-          delay: null !== (_g = null === (_f = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _f ? void 0 : _f.delay) && void 0 !== _g ? _g : DefaultAnimationDelay,
-          duration: null !== (_j = null === (_h = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _h ? void 0 : _h.duration) && void 0 !== _j ? _j : DefaultAnimationDuration,
-          oneByOne: null !== (_l = null === (_k = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _k ? void 0 : _k.oneByOne) && void 0 !== _l ? _l : DefaultAnimationOneByOne,
-          splitPath: null !== (_o = null === (_m = null == runningConfig ? void 0 : runningConfig.animation) || void 0 === _m ? void 0 : _m.splitPath) && void 0 !== _o ? _o : DefaultSplitPath
+          easing: null !== (_a = animation.easing) && void 0 !== _a ? _a : DefaultAnimationEasing,
+          delay: null !== (_b = animation.delay) && void 0 !== _b ? _b : DefaultAnimationDelay,
+          duration: null !== (_c = animation.duration) && void 0 !== _c ? _c : DefaultAnimationDuration,
+          oneByOne: null !== (_d = animation.oneByOne) && void 0 !== _d ? _d : DefaultAnimationOneByOne,
+          splitPath: null !== (_e = animation.splitPath) && void 0 !== _e ? _e : DefaultSplitPath
         },
-        enableExitAnimation: null !== (_p = null == runningConfig ? void 0 : runningConfig.enableExitAnimation) && void 0 !== _p ? _p : DefaultEnableExitAnimation
+        enableExitAnimation: enableExitAnimation
       };
     };
 
     const generateFilterByMark = evtSpec => isNil$1(evtSpec.markId) ? el => el && el.mark.id() === evtSpec.markId : isNil$1(evtSpec.markName) ? el => el && el.mark.name() === evtSpec.markName : isNil$1(evtSpec.type) ? el => el && el.mark.markType === evtSpec.type : () => !0;
-    const parseHandler = (callback, config) => (null == config ? void 0 : config.debounce) ? debounce(callback, config.debounce) : (null == config ? void 0 : config.throttle) ? throttle(callback, config.throttle) : callback;
+    const parseHandler = (callback, config) => config && config.debounce ? debounce(callback, config.debounce) : config && config.throttle ? throttle(callback, config.throttle) : callback;
     const NAME_PREFIX = "@";
     const ID_PREFIX = "#";
     const parseEventSelector = function (selector) {
@@ -43109,7 +42994,7 @@
 
     const transformAnimationAttributes = (attributes, element) => {
       if (!attributes) return null;
-      if (null == attributes ? void 0 : attributes.from) {
+      if (attributes.from) {
         const from = attributes.from,
           fromKeys = Object.keys(from);
         fromKeys.forEach(channel => {
@@ -43123,7 +43008,7 @@
           attributes.from = element.transformElementItems(items, element.mark.markType, computePoints);
         }
       }
-      if (null == attributes ? void 0 : attributes.to) {
+      if (attributes.to) {
         const to = attributes.to,
           toKeys = Object.keys(to);
         toKeys.forEach(channel => {
@@ -44038,14 +43923,12 @@
         return this.renderContext && (this.renderContext.progressive && this.renderContext.progressive.currentIndex < this.renderContext.progressive.totalStep || this.renderContext.beforeTransformProgressive && this.renderContext.beforeTransformProgressive.unfinished());
       }
       clearProgressive() {
-        var _a, _b;
-        (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.progressive) && (this.elements = [], this.graphicParent.children.forEach(group => {
+        this.renderContext && this.renderContext.progressive && (this.elements = [], this.graphicParent.children.forEach(group => {
           group.incrementalClearChild();
-        }), this.graphicParent.removeAllChild()), (null === (_b = this.renderContext) || void 0 === _b ? void 0 : _b.beforeTransformProgressive) && this.renderContext.beforeTransformProgressive.release(), this.renderContext = null;
+        }), this.graphicParent.removeAllChild()), this.renderContext && this.renderContext.beforeTransformProgressive && this.renderContext.beforeTransformProgressive.release(), this.renderContext = null;
       }
       restartProgressive() {
-        var _a;
-        (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.progressive) && (this.renderContext.progressive.currentIndex = 0);
+        this.renderContext && this.renderContext.progressive && (this.renderContext.progressive.currentIndex = 0);
       }
       evaluateJoinProgressive() {
         var _a, _b, _c;
@@ -44153,12 +44036,11 @@
         });
       }
       getGroupGraphicItem() {
-        var _a, _b, _c;
-        return null === (_c = null === (_b = null === (_a = this.elements) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.getGraphicItem) || void 0 === _c ? void 0 : _c.call(_b);
+        if (this.elements && this.elements[0] && this.elements[0].getGraphicItem) return this.elements[0].getGraphicItem();
       }
       getBounds() {
-        var _a, _b, _c;
-        return this.graphicItem ? this.graphicItem.AABBBounds : null === (_c = null === (_b = null === (_a = this.elements) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.getGraphicItem()) || void 0 === _c ? void 0 : _c.AABBBounds;
+        var _a;
+        return this.graphicItem ? this.graphicItem.AABBBounds : null === (_a = this.getGroupGraphicItem()) || void 0 === _a ? void 0 : _a.AABBBounds;
       }
       getMorphConfig() {
         var _a;
@@ -44319,7 +44201,7 @@
     }
     const doGridLayout = (group, children, parentLayoutBounds, options) => {
       const grid = computeGrid(group.getSpec().layout, parentLayoutBounds.width(), parentLayoutBounds.height());
-      null == children || children.forEach(mark => {
+      children && children.forEach(mark => {
         const markLayout = mark.getSpec().layout;
         mark.layoutBounds = getCellBounds(grid, markLayout.gridRowStart, markLayout.gridRowEnd, markLayout.gridColumnStart, markLayout.gridColumnEnd), mark.commit();
       });
@@ -44788,55 +44670,55 @@
       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);
+          mark.animate && (null === (_b = (_a = mark.animate).stop) || void 0 === _b || _b.call(_a));
         }), this._additionalAnimateMarks.forEach(mark => {
           var _a, _b;
-          mark.view && (null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.stop) || void 0 === _b || _b.call(_a));
+          mark.view && mark.animate && (null === (_b = (_a = mark.animate).stop) || void 0 === _b || _b.call(_a));
         }), this._additionalAnimateMarks = [], this;
       }
       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);
+          mark.animate && (null === (_b = (_a = mark.animate).pause) || void 0 === _b || _b.call(_a));
         }), this._additionalAnimateMarks.forEach(mark => {
           var _a, _b;
-          mark.view && (null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.pause) || void 0 === _b || _b.call(_a));
+          mark.view && mark.animate && (null === (_b = (_a = mark.animate).pause) || void 0 === _b || _b.call(_a));
         }), this;
       }
       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);
+          mark.animate && (null === (_b = (_a = mark.animate).resume) || void 0 === _b || _b.call(_a));
         }), this._additionalAnimateMarks.forEach(mark => {
           var _a, _b;
-          mark.view && (null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.resume) || void 0 === _b || _b.call(_a));
+          mark.view && mark.animate && (null === (_b = (_a = mark.animate).resume) || void 0 === _b || _b.call(_a));
         }), this;
       }
       enable() {
         return this.isEnabled = !0, 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);
+          mark.animate && (null === (_b = (_a = mark.animate).enable) || void 0 === _b || _b.call(_a));
         }), this;
       }
       disable() {
         return this.isEnabled = !1, 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);
+          mark.animate && (null === (_b = (_a = mark.animate).disable) || void 0 === _b || _b.call(_a));
         }), this._additionalAnimateMarks.forEach(mark => {
           var _a, _b;
-          mark.view && (null === (_b = null === (_a = mark.animate) || void 0 === _a ? void 0 : _a.stop) || void 0 === _b || _b.call(_a));
+          mark.view && mark.animate && (null === (_b = (_a = mark.animate).stop) || void 0 === _b || _b.call(_a));
         }), this._additionalAnimateMarks = [], this;
       }
       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);
+          mark.animate && (null === (_b = (_a = mark.animate).enableAnimationState) || void 0 === _b || _b.call(_a, state));
         }), this;
       }
       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);
+          mark.animate && (null === (_b = (_a = mark.animate).disableAnimationState) || void 0 === _b || _b.call(_a, state));
         }), this;
       }
       isAnimating() {
@@ -45801,7 +45683,7 @@
         }), this;
       }
       parseSpec(spec) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f;
         if (this.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_PARSE_VIEW), this._spec = spec, normalizeMarkTree(spec), spec.theme ? this.theme(spec.theme) : this.theme(ThemeManager$1.getDefaultTheme()), spec.width && this.width(spec.width), spec.height && this.height(spec.height), this.padding(null !== (_b = null !== (_a = spec.padding) && void 0 !== _a ? _a : this._options.padding) && void 0 !== _b ? _b : this._theme.padding), !this.width() || !this.height()) {
           const size = this._getContainerSize();
           size && (this.updateSignal(SIGNAL_WIDTH, size.width), this.updateSignal(SIGNAL_HEIGHT, size.height));
@@ -45819,18 +45701,17 @@
         });
         const customizedGrammars = Factory$1.getGrammars();
         return Object.keys(customizedGrammars).forEach(key => {
-          var _a;
           const {
             specKey: specKey
           } = customizedGrammars[key];
-          (null === (_a = spec[specKey]) || void 0 === _a ? void 0 : _a.length) && spec[specKey].forEach(specValue => {
+          spec[specKey] && spec[specKey].length && spec[specKey].forEach(specValue => {
             this.customized(key, specValue);
           });
-        }), (null === (_g = spec.marks) || void 0 === _g ? void 0 : _g.length) && spec.marks.forEach(mark => {
+        }), spec.marks && spec.marks.length && spec.marks.forEach(mark => {
           this.parseMarkSpec(mark);
-        }), (null === (_h = spec.events) || void 0 === _h ? void 0 : _h.length) && spec.events.forEach(eventConfig => {
+        }), spec.events && spec.events.length && spec.events.forEach(eventConfig => {
           this.event(eventConfig);
-        }), (null === (_j = spec.interactions) || void 0 === _j ? void 0 : _j.length) && spec.interactions.forEach(interaction => {
+        }), spec.interactions && spec.interactions.length && spec.interactions.forEach(interaction => {
           this.interaction(interaction.type, interaction);
         }), !1 === spec.animation ? this.animate.disable() : this.animate.enable(), this.emit(exports.VGRAMMAR_HOOK_EVENT.AFTER_PARSE_VIEW), this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before, this;
       }
@@ -45874,8 +45755,13 @@
         });
       }
       theme(theme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        return isString$1(theme) ? this._theme = null !== (_a = ThemeManager$1.getTheme(theme)) && void 0 !== _a ? _a : ThemeManager$1.getDefaultTheme() : this._theme = theme, this._theme ? (this.background(null !== (_d = null !== (_c = null === (_b = this._spec) || void 0 === _b ? void 0 : _b.background) && void 0 !== _c ? _c : this._options.background) && void 0 !== _d ? _d : this._theme.background), this.padding(null !== (_g = null !== (_f = null === (_e = this._spec) || void 0 === _e ? void 0 : _e.padding) && void 0 !== _f ? _f : this._options.padding) && void 0 !== _g ? _g : this._theme.padding), null === (_j = null === (_h = this.renderer.stage()) || void 0 === _h ? void 0 : _h.setTheme) || void 0 === _j || _j.call(_h, Object.assign({}, this._theme.marks))) : (this.background(null !== (_l = null === (_k = this._spec) || void 0 === _k ? void 0 : _k.background) && void 0 !== _l ? _l : this._options.background), this.padding(null !== (_o = null === (_m = this._spec) || void 0 === _m ? void 0 : _m.padding) && void 0 !== _o ? _o : this._options.padding)), this;
+        var _a, _b, _c, _d, _e, _f;
+        isString$1(theme) ? this._theme = null !== (_a = ThemeManager$1.getTheme(theme)) && void 0 !== _a ? _a : ThemeManager$1.getDefaultTheme() : this._theme = theme;
+        const {
+          background: background,
+          padding: padding
+        } = null !== (_b = this._spec) && void 0 !== _b ? _b : {};
+        return this._theme ? (this.background(null !== (_c = null != background ? background : this._options.background) && void 0 !== _c ? _c : this._theme.background), this.padding(null !== (_d = null != padding ? padding : this._options.padding) && void 0 !== _d ? _d : this._theme.padding), null === (_f = null === (_e = this.renderer.stage()) || void 0 === _e ? void 0 : _e.setTheme) || void 0 === _f || _f.call(_e, Object.assign({}, this._theme.marks))) : (this.background(null != background ? background : this._options.background), this.padding(null != padding ? padding : this._options.padding)), this;
       }
       getCurrentTheme() {
         return this._theme;
@@ -46348,11 +46234,14 @@
       registerSymbol(), Factory$1.registerGraphic(GrammarMarkType.symbol, createSymbol);
     };
     const registerTextGraphic = () => {
-      registerText(), Factory$1.registerGraphic(GrammarMarkType.text, createText);
+      registerText(), registerRichtext(), Factory$1.registerGraphic(GrammarMarkType.text, createText);
     };
     const registerPolygonGraphic = () => {
       registerPolygon(), Factory$1.registerGraphic(GrammarMarkType.polygon, createPolygon);
     };
+    const registerRichTextGraphic = () => {
+      registerRichtext(), Factory$1.registerGraphic(GrammarMarkType.richtext, createRichText);
+    };
     const registerCellGraphic = () => {
       registerSymbol(), Factory$1.registerGraphic(GrammarMarkType.cell, createSymbol);
     };
@@ -46410,9 +46299,9 @@
       },
       computeBoxplotCenter = (glyphElement, direction, options) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        if (isValidNumber$1(null == options ? void 0 : options.center)) return options.center;
+        if (options && isValidNumber$1(options.center)) return options.center;
         let median, max, min, q1, q3;
-        if ("horizontal" === direction) {
+        if (isHorizontal$2(direction)) {
           median = null === (_b = null === (_a = glyphElement.getGraphicAttribute("points", !1, "median")) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.x, max = null === (_d = null === (_c = glyphElement.getGraphicAttribute("points", !1, "max")) || void 0 === _c ? void 0 : _c[0]) || void 0 === _d ? void 0 : _d.x, min = null === (_f = null === (_e = glyphElement.getGraphicAttribute("points", !1, "min")) || void 0 === _e ? void 0 : _e[0]) || void 0 === _f ? void 0 : _f.x;
           const boxWidth = glyphElement.getGraphicAttribute("width", !1, "box"),
             boxX = glyphElement.getGraphicAttribute("x", !1, "box");
@@ -46442,7 +46331,7 @@
           boxHeight = null !== (_f = encodeValues.boxHeight) && void 0 !== _f ? _f : element.getGraphicAttribute("boxHeight", !1),
           ruleWidth = null !== (_g = encodeValues.ruleWidth) && void 0 !== _g ? _g : element.getGraphicAttribute("ruleWidth", !1),
           ruleHeight = null !== (_h = encodeValues.ruleHeight) && void 0 !== _h ? _h : element.getGraphicAttribute("ruleHeight", !1);
-        return "horizontal" === (null == config ? void 0 : config.direction) ? (isValidNumber$1(boxHeight) ? (Object.assign(attributes.box, {
+        return config && isHorizontal$2(config.direction) ? (isValidNumber$1(boxHeight) ? (Object.assign(attributes.box, {
           y: y - boxHeight / 2,
           y1: y + boxHeight / 2
         }), Object.assign(attributes.median, {
@@ -46501,17 +46390,17 @@
         max: "rule",
         min: "rule",
         median: "rule"
-      }).registerProgressiveChannels(["x", "y", "q1", "q3", "min", "max", "median", "angle", "width", "height", "boxWidth", "boxHeight", "ruleWidth", "ruleHeight"]).registerFunctionEncoder(encodeBoxplotSize).registerChannelEncoder("x", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? null : {
+      }).registerProgressiveChannels(["x", "y", "q1", "q3", "min", "max", "median", "angle", "width", "height", "boxWidth", "boxHeight", "ruleWidth", "ruleHeight"]).registerFunctionEncoder(encodeBoxplotSize).registerChannelEncoder("x", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? null : {
         shaft: {
           x: encodeValue,
           x1: encodeValue
         }
-      }).registerChannelEncoder("y", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" !== (null == config ? void 0 : config.direction) ? null : {
+      }).registerChannelEncoder("y", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         shaft: {
           y: encodeValue,
           y1: encodeValue
         }
-      }).registerChannelEncoder("q1", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      } : null).registerChannelEncoder("q1", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         box: {
           x: encodeValue
         }
@@ -46519,7 +46408,7 @@
         box: {
           y: encodeValue
         }
-      }).registerChannelEncoder("q3", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      }).registerChannelEncoder("q3", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         box: {
           x1: encodeValue
         }
@@ -46527,7 +46416,7 @@
         box: {
           y1: encodeValue
         }
-      }).registerChannelEncoder("min", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      }).registerChannelEncoder("min", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         shaft: {
           x: encodeValue
         },
@@ -46545,7 +46434,7 @@
           y1: encodeValue,
           visible: !0
         }
-      }).registerChannelEncoder("max", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      }).registerChannelEncoder("max", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         shaft: {
           x1: encodeValue
         },
@@ -46563,7 +46452,7 @@
           y1: encodeValue,
           visible: !0
         }
-      }).registerChannelEncoder("median", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      }).registerChannelEncoder("median", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         median: {
           x: encodeValue,
           x1: encodeValue,
@@ -46577,7 +46466,7 @@
         }
       }).registerChannelEncoder("angle", (channel, encodeValue, encodeValues, datum, element, config) => {
         var _a;
-        const defaultAnchor = "horizontal" === (null == config ? void 0 : config.direction) ? [(encodeValues.min + encodeValues.max) / 2, encodeValues.y] : [encodeValues.x, (encodeValues.min + encodeValues.max) / 2],
+        const defaultAnchor = config && isHorizontal$2(config.direction) ? [(encodeValues.min + encodeValues.max) / 2, encodeValues.y] : [encodeValues.x, (encodeValues.min + encodeValues.max) / 2],
           anchor = null !== (_a = encodeValues.anchor) && void 0 !== _a ? _a : defaultAnchor;
         return {
           shaft: {
@@ -46611,13 +46500,13 @@
         median: {
           visible: !1
         }
-      })), Factory$1.registerAnimationType("boxplotScaleIn", boxplotScaleIn), Factory$1.registerAnimationType("boxplotScaleOut", boxplotScaleOut);
+      })), Factory$1.registerAnimationType("boxplotScaleIn", boxplotScaleIn), Factory$1.registerAnimationType("boxplotScaleOut", boxplotScaleOut), registerGlyphGraphic(), registerRectGraphic(), registerRuleGraphic();
     }
     const computeBarBoxplotCenter = (glyphElement, direction, options) => {
         var _a, _b, _c, _d;
         if (isValidNumber$1(null == options ? void 0 : options.center)) return options.center;
         let median, max, min, q1, q3;
-        if ("horizontal" === direction) {
+        if (isHorizontal$2(direction)) {
           median = null === (_b = null === (_a = glyphElement.getGraphicAttribute("points", !1, "median")) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.x;
           const minMaxBoxWidth = glyphElement.getGraphicAttribute("width", !1, "minMaxBox"),
             minMaxBoxBoxX = glyphElement.getGraphicAttribute("x", !1, "minMaxBox");
@@ -46651,7 +46540,7 @@
           height = null !== (_f = encodeValues.height) && void 0 !== _f ? _f : element.getGraphicAttribute("height", !1),
           minMaxHeight = null !== (_g = encodeValues.minMaxHeight) && void 0 !== _g ? _g : element.getGraphicAttribute("minMaxHeight", !1),
           q1q3Height = null !== (_h = encodeValues.q1q3Height) && void 0 !== _h ? _h : element.getGraphicAttribute("q1q3Height", !1);
-        return "horizontal" === (null == config ? void 0 : config.direction) ? (isValidNumber$1(minMaxHeight) ? Object.assign(attributes.minMaxBox, {
+        return config && isHorizontal$2(config.direction) ? (isValidNumber$1(minMaxHeight) ? Object.assign(attributes.minMaxBox, {
           y: y - minMaxHeight / 2,
           y1: y + minMaxHeight / 2
         }) : Object.assign(attributes.minMaxBox, {
@@ -46696,7 +46585,7 @@
         minMaxBox: "rect",
         q1q3Box: "rect",
         median: "rule"
-      }).registerProgressiveChannels(["x", "y", "q1", "q3", "min", "max", "median", "angle", "width", "height", "minMaxWidth", "q1q3Width", "minMaxHeight", "q1q3Height"]).registerFunctionEncoder(encodeBarBoxplotSize).registerChannelEncoder("q1", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      }).registerProgressiveChannels(["x", "y", "q1", "q3", "min", "max", "median", "angle", "width", "height", "minMaxWidth", "q1q3Width", "minMaxHeight", "q1q3Height"]).registerFunctionEncoder(encodeBarBoxplotSize).registerChannelEncoder("q1", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         q1q3Box: {
           x: encodeValue
         }
@@ -46704,7 +46593,7 @@
         q1q3Box: {
           y: encodeValue
         }
-      }).registerChannelEncoder("q3", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      }).registerChannelEncoder("q3", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         q1q3Box: {
           x1: encodeValue
         }
@@ -46712,7 +46601,7 @@
         q1q3Box: {
           y1: encodeValue
         }
-      }).registerChannelEncoder("min", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      }).registerChannelEncoder("min", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         minMaxBox: {
           x: encodeValue
         }
@@ -46720,7 +46609,7 @@
         minMaxBox: {
           y: encodeValue
         }
-      }).registerChannelEncoder("max", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      }).registerChannelEncoder("max", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         minMaxBox: {
           x1: encodeValue
         }
@@ -46728,7 +46617,7 @@
         minMaxBox: {
           y1: encodeValue
         }
-      }).registerChannelEncoder("median", (channel, encodeValue, encodeValues, datum, element, config) => "horizontal" === (null == config ? void 0 : config.direction) ? {
+      }).registerChannelEncoder("median", (channel, encodeValue, encodeValues, datum, element, config) => config && isHorizontal$2(config.direction) ? {
         median: {
           x: encodeValue,
           x1: encodeValue,
@@ -47020,7 +46909,7 @@
     const generateCoordinateAxisAttribute = (scale, coordinate, inside, baseValue, layout, isGrid) => {
       var _a;
       const axisPosition = scale.getCoordinateAxisPosition();
-      "auto" === (null == layout ? void 0 : layout.position) && (layout.position = inside ? "content" : axisPosition);
+      layout && "auto" === layout.position && (layout.position = inside ? "content" : axisPosition);
       const axisPoints = scale.getCoordinateAxisPoints(baseValue);
       if (axisPoints) {
         const res = {
@@ -47136,42 +47025,46 @@
       Factory$1.registerGraphicComponent(AxisEnum.lineAxis, (attrs, options) => new LineAxis(attrs, options)), Factory$1.registerGraphicComponent(AxisEnum.circleAxis, attrs => new CircleAxis(attrs)), Factory$1.registerComponent(ComponentEnum.axis, Axis);
     };
 
-    const generateLabelAttributes = (marks, groupSize, encoder, labelStyle, parameters, theme) => {
+    const generateLabelAttributes = function (marks, groupSize, encoder, labelStyle, parameters) {
+      let theme = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
       var _a;
-      const labelTheme = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.dataLabel,
+      const labelTheme = null === (_a = theme.components) || void 0 === _a ? void 0 : _a.dataLabel,
         dataLabels = marks.map((mark, index) => {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+          var _a, _b, _c, _d, _e;
           const labelParameters = Object.assign(Object.assign({}, parameters), {
               labelIndex: index
             }),
-            addition = invokeFunctionType(labelStyle, labelParameters, mark);
+            addition = null !== (_a = invokeFunctionType(labelStyle, labelParameters, mark)) && void 0 !== _a ? _a : {},
+            {
+              components = {}
+            } = theme;
           let currentTheme = {};
           switch (mark.markType) {
             case GrammarMarkType.line:
             case GrammarMarkType.area:
-              currentTheme = "line" === (null == addition ? void 0 : addition.type) ? null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.lineLabel : "area" === (null == addition ? void 0 : addition.type) ? null === (_b = null == theme ? void 0 : theme.components) || void 0 === _b ? void 0 : _b.areaLabel : null === (_c = null == theme ? void 0 : theme.components) || void 0 === _c ? void 0 : _c.lineDataLabel;
+              currentTheme = "line" === addition.type ? components.lineLabel : "area" === addition.type ? components.areaLabel : components.lineDataLabel;
               break;
             case GrammarMarkType.rect:
             case GrammarMarkType.rect3d:
             case GrammarMarkType.interval:
-              currentTheme = null === (_d = null == theme ? void 0 : theme.components) || void 0 === _d ? void 0 : _d.rectLabel;
+              currentTheme = components.rectLabel;
               break;
             case GrammarMarkType.symbol:
             case GrammarMarkType.circle:
             case GrammarMarkType.cell:
-              currentTheme = null === (_e = null == theme ? void 0 : theme.components) || void 0 === _e ? void 0 : _e.symbolLabel;
+              currentTheme = components.symbolLabel;
               break;
             case GrammarMarkType.arc:
             case GrammarMarkType.arc3d:
-              currentTheme = null === (_f = null == theme ? void 0 : theme.components) || void 0 === _f ? void 0 : _f.arcLabel;
+              currentTheme = components.arcLabel;
               break;
             case GrammarMarkType.polygon:
             case GrammarMarkType.path:
             default:
-              currentTheme = null === (_g = null == theme ? void 0 : theme.components) || void 0 === _g ? void 0 : _g.pointLabel;
+              currentTheme = components.pointLabel;
           }
-          const data = null !== (_h = null == addition ? void 0 : addition.data) && void 0 !== _h ? _h : [],
-            themeDatum = null !== (_k = null === (_j = null == currentTheme ? void 0 : currentTheme.data) || void 0 === _j ? void 0 : _j[0]) && void 0 !== _k ? _k : {};
+          const data = null !== (_b = addition.data) && void 0 !== _b ? _b : [],
+            themeDatum = null !== (_d = null === (_c = null == currentTheme ? void 0 : currentTheme.data) || void 0 === _c ? void 0 : _c[0]) && void 0 !== _d ? _d : {};
           data && data.length > 0 ? data.forEach((d, index) => {
             if (mark.elements[index]) {
               const attributes = invokeEncoder(encoder, d, mark.elements[index], labelParameters);
@@ -47189,7 +47082,7 @@
               data.push(datum);
             }
           });
-          const graphicItemName = null === (_l = mark.graphicItem) || void 0 === _l ? void 0 : _l.name;
+          const graphicItemName = null === (_e = mark.graphicItem) || void 0 === _e ? void 0 : _e.name;
           return merge$1({}, currentTheme, {
             data: data,
             baseMarkGroupName: graphicItemName,
@@ -47673,7 +47566,7 @@
       var _a;
       const clipDimension = element.getGraphicAttribute("clipRangeByDimension", !1),
         clipRange = null !== (_a = element.getGraphicAttribute("clipRange", !1)) && void 0 !== _a ? _a : 1;
-      return (null == options ? void 0 : options.clipDimension) ? {
+      return options && options.clipDimension ? {
         from: {
           clipRange: 0,
           clipRangeByDimension: options.clipDimension
@@ -47695,7 +47588,7 @@
       var _a;
       const clipDimension = element.getGraphicAttribute("clipRangeByDimension", !0),
         clipRange = null !== (_a = element.getGraphicAttribute("clipRange", !0)) && void 0 !== _a ? _a : 1;
-      return (null == options ? void 0 : options.clipDimension) ? {
+      return options && options.clipDimension ? {
         from: {
           clipRange: clipRange,
           clipRangeByDimension: options.clipDimension
@@ -47869,7 +47762,7 @@
       const x = element.getGraphicAttribute("x", !1),
         x1 = element.getGraphicAttribute("x1", !1),
         width = element.getGraphicAttribute("width", !1);
-      if ("negative" === (null == options ? void 0 : options.orient)) {
+      if (options && "negative" === options.orient) {
         const computedX1 = isValid$1(width) ? Math.max(x, x + width) : Math.max(x, x1);
         return {
           from: {
@@ -47904,7 +47797,7 @@
         x1 = element.getGraphicAttribute("x1", !1),
         width = element.getGraphicAttribute("width", !1);
       let overallValue;
-      return "negative" === (null == options ? void 0 : options.orient) ? isNumber$2(null == options ? void 0 : options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = overallValue) : overallValue = animationParameters.width : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? null == options ? void 0 : options.overall : 0, {
+      return options && "negative" === options.orient ? isNumber$2(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = overallValue) : overallValue = animationParameters.width : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? null == options ? void 0 : options.overall : 0, {
         from: {
           x: overallValue,
           x1: isNil$1(x1) ? void 0 : overallValue,
@@ -47925,7 +47818,7 @@
       const x = element.getGraphicAttribute("x", !1),
         x1 = element.getGraphicAttribute("x1", !1),
         width = element.getGraphicAttribute("width", !1);
-      if ("negative" === (null == options ? void 0 : options.orient)) {
+      if (options && "negative" === options.orient) {
         const computedX1 = isValid$1(width) ? Math.max(x, x + width) : Math.max(x, x1);
         return {
           to: {
@@ -47949,7 +47842,7 @@
       const x1 = element.getGraphicAttribute("x1", !1),
         width = element.getGraphicAttribute("width", !1);
       let overallValue;
-      return "negative" === (null == options ? void 0 : options.orient) ? isNumber$2(null == options ? void 0 : options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = overallValue) : overallValue = animationParameters.width : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? null == options ? void 0 : options.overall : 0, {
+      return options && "negative" === options.orient ? isNumber$2(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = overallValue) : overallValue = animationParameters.width : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0, {
         to: {
           x: overallValue,
           x1: isNil$1(x1) ? void 0 : overallValue,
@@ -47965,7 +47858,7 @@
       const y = element.getGraphicAttribute("y", !1),
         y1 = element.getGraphicAttribute("y1", !1),
         height = element.getGraphicAttribute("height", !1);
-      if ("negative" === (null == options ? void 0 : options.orient)) {
+      if (options && "negative" === options.orient) {
         const computedY1 = isValid$1(height) ? Math.max(y, y + height) : Math.max(y, y1);
         return {
           from: {
@@ -48000,7 +47893,7 @@
         y1 = element.getGraphicAttribute("y1", !1),
         height = element.getGraphicAttribute("height", !1);
       let overallValue;
-      return "negative" === (null == options ? void 0 : options.orient) ? isNumber$2(null == options ? void 0 : options.overall) ? overallValue = null == options ? void 0 : options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = overallValue) : overallValue = animationParameters.height : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? null == options ? void 0 : options.overall : 0, {
+      return options && "negative" === options.orient ? isNumber$2(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = overallValue) : overallValue = animationParameters.height : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0, {
         from: {
           y: overallValue,
           y1: isNil$1(y1) ? void 0 : overallValue,
@@ -48021,7 +47914,7 @@
       const y = element.getGraphicAttribute("y", !1),
         y1 = element.getGraphicAttribute("y1", !1),
         height = element.getGraphicAttribute("height", !1);
-      if ("negative" === (null == options ? void 0 : options.orient)) {
+      if (options && "negative" === options.orient) {
         const computedY1 = isValid$1(height) ? Math.max(y, y + height) : Math.max(y, y1);
         return {
           to: {
@@ -48045,7 +47938,7 @@
       const y1 = element.getGraphicAttribute("y1", !1),
         height = element.getGraphicAttribute("height", !1);
       let overallValue;
-      return "negative" === (null == options ? void 0 : options.orient) ? isNumber$2(null == options ? void 0 : options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = overallValue) : overallValue = animationParameters.height : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? null == options ? void 0 : options.overall : 0, {
+      return options && "negative" === options.orient ? isNumber$2(options.overall) ? overallValue = options.overall : animationParameters.group ? (overallValue = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = overallValue) : overallValue = animationParameters.height : overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 0, {
         to: {
           y: overallValue,
           y1: isNil$1(y1) ? void 0 : overallValue,
@@ -48058,7 +47951,7 @@
       return !1 !== (null !== (_a = null == options ? void 0 : options.overall) && void 0 !== _a && _a) ? growHeightOutOverall(element, options, animationParameters) : growHeightOutIndividual(element, options);
     };
 
-    const growAngleInIndividual = (element, options, animationParameters) => "anticlockwise" === (null == options ? void 0 : options.orient) ? {
+    const growAngleInIndividual = (element, options, animationParameters) => options && "anticlockwise" === options.orient ? {
         from: {
           startAngle: element.getGraphicAttribute("endAngle", !1)
         },
@@ -48074,8 +47967,8 @@
         }
       },
       growAngleInOverall = (element, options, animationParameters) => {
-        if ("anticlockwise" === (null == options ? void 0 : options.orient)) {
-          const overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 2 * Math.PI;
+        if (options && "anticlockwise" === options.orient) {
+          const overallValue = isNumber$2(options.overall) ? options.overall : 2 * Math.PI;
           return {
             from: {
               startAngle: overallValue,
@@ -48103,7 +47996,7 @@
       var _a;
       return !1 !== (null !== (_a = null == options ? void 0 : options.overall) && void 0 !== _a && _a) ? growAngleInOverall(element, options) : growAngleInIndividual(element, options);
     };
-    const growAngleOutIndividual = (element, options, animationParameters) => "anticlockwise" === (null == options ? void 0 : options.orient) ? {
+    const growAngleOutIndividual = (element, options, animationParameters) => options && "anticlockwise" === options.orient ? {
         from: {
           startAngle: element.getGraphicAttribute("startAngle", !0)
         },
@@ -48119,8 +48012,8 @@
         }
       },
       growAngleOutOverall = (element, options, animationParameters) => {
-        if ("anticlockwise" === (null == options ? void 0 : options.orient)) {
-          const overallValue = isNumber$2(null == options ? void 0 : options.overall) ? options.overall : 2 * Math.PI;
+        if (options && "anticlockwise" === options.orient) {
+          const overallValue = isNumber$2(options.overall) ? options.overall : 2 * Math.PI;
           return {
             from: {
               startAngle: element.getGraphicAttribute("startAngle", !0),
@@ -48148,7 +48041,7 @@
       var _a;
       return !1 !== (null !== (_a = null == options ? void 0 : options.overall) && void 0 !== _a && _a) ? growAngleOutOverall(element, options) : growAngleOutIndividual(element, options);
     };
-    const growRadiusInIndividual = (element, options, animationParameters) => "inside" === (null == options ? void 0 : options.orient) ? {
+    const growRadiusInIndividual = (element, options, animationParameters) => options && "inside" === options.orient ? {
         from: {
           innerRadius: element.getGraphicAttribute("outerRadius", !1)
         },
@@ -48180,7 +48073,7 @@
       var _a;
       return !1 !== (null !== (_a = null == options ? void 0 : options.overall) && void 0 !== _a && _a) ? growRadiusInOverall(element, options) : growRadiusInIndividual(element, options);
     };
-    const growRadiusOutIndividual = (element, options, animationParameters) => "inside" === (null == options ? void 0 : options.orient) ? {
+    const growRadiusOutIndividual = (element, options, animationParameters) => options && "inside" === options.orient ? {
         from: {
           innerRadius: element.getGraphicAttribute("innerRadius", !0)
         },
@@ -48221,7 +48114,7 @@
         };
       return points.forEach(point => {
         center.x += point.x, center.y += point.y;
-      }), center.x /= points.length, center.y /= points.length, (null == options ? void 0 : options.center) && (isValidNumber$1(options.center.x) && (center.x = options.center.x), isValidNumber$1(options.center.y) && (center.y = options.center.y)), points.map(() => Object.assign(center));
+      }), center.x /= points.length, center.y /= points.length, options && options.center && (isValidNumber$1(options.center.x) && (center.x = options.center.x), isValidNumber$1(options.center.y) && (center.y = options.center.y)), points.map(() => Object.assign(center));
     };
     const growPointsIn = (element, options, animationParameters) => ({
       from: {
@@ -48241,7 +48134,7 @@
     });
     const changePointsX = (element, options, animationParameters) => element.getGraphicAttribute("points", !1).map(point => {
       var _a;
-      if ("negative" === (null == options ? void 0 : options.orient)) {
+      if (options && "negative" === options.orient) {
         let groupRight = animationParameters.width;
         return animationParameters.group && (groupRight = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = groupRight), {
           x: groupRight,
@@ -48277,7 +48170,7 @@
     });
     const changePointsY = (element, options, animationParameters) => element.getGraphicAttribute("points", !1).map(point => {
       var _a;
-      if ("negative" === (null == options ? void 0 : options.orient)) {
+      if (options && "negative" === options.orient) {
         let groupBottom = animationParameters.height;
         return animationParameters.group && (groupBottom = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = groupBottom), {
           x: point.x,
@@ -48313,15 +48206,20 @@
     });
 
     const moveIn = (element, options, animationParameters) => {
-      var _a, _b, _c;
-      const offset = null !== (_a = null == options ? void 0 : options.offset) && void 0 !== _a ? _a : 0;
+      var _a, _b;
+      const {
+        offset = 0,
+        orient: orient,
+        direction: direction,
+        point: pointOpt
+      } = null != options ? options : {};
       let changedX = 0,
         changedY = 0;
-      "negative" === (null == options ? void 0 : options.orient) && (animationParameters.group ? (changedX = null !== (_b = animationParameters.groupWidth) && void 0 !== _b ? _b : animationParameters.group.getBounds().width(), changedY = null !== (_c = animationParameters.groupHeight) && void 0 !== _c ? _c : animationParameters.group.getBounds().height(), animationParameters.groupWidth = changedX, animationParameters.groupHeight = changedY) : (changedX = animationParameters.width, changedY = animationParameters.height)), changedX += offset, changedY += offset;
-      const point = isFunction$1(null == options ? void 0 : options.point) ? options.point.call(null, element.getDatum(), element, animationParameters) : null == options ? void 0 : options.point,
-        fromX = isValidNumber$1(null == point ? void 0 : point.x) ? point.x : changedX,
-        fromY = isValidNumber$1(null == point ? void 0 : point.y) ? point.y : changedY;
-      switch (null == options ? void 0 : options.direction) {
+      "negative" === orient && (animationParameters.group ? (changedX = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), changedY = null !== (_b = animationParameters.groupHeight) && void 0 !== _b ? _b : animationParameters.group.getBounds().height(), animationParameters.groupWidth = changedX, animationParameters.groupHeight = changedY) : (changedX = animationParameters.width, changedY = animationParameters.height)), changedX += offset, changedY += offset;
+      const point = isFunction$1(pointOpt) ? pointOpt.call(null, element.getDatum(), element, animationParameters) : pointOpt,
+        fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
+        fromY = point && isValidNumber$1(point.y) ? point.y : changedY;
+      switch (direction) {
         case "x":
           return {
             from: {
@@ -48354,17 +48252,22 @@
       }
     };
     const moveOut = (element, options, animationParameters) => {
-      var _a, _b, _c;
-      const offset = null !== (_a = null == options ? void 0 : options.offset) && void 0 !== _a ? _a : 0,
+      var _a, _b;
+      const {
+          offset = 0,
+          orient: orient,
+          direction: direction,
+          point: pointOpt
+        } = null != options ? options : {},
         groupBounds = animationParameters.group ? animationParameters.group.getBounds() : null,
-        groupWidth = null !== (_b = null == groupBounds ? void 0 : groupBounds.width()) && void 0 !== _b ? _b : animationParameters.width,
-        groupHeight = null !== (_c = null == groupBounds ? void 0 : groupBounds.height()) && void 0 !== _c ? _c : animationParameters.height,
-        changedX = ("negative" === (null == options ? void 0 : options.orient) ? groupWidth : 0) + offset,
-        changedY = ("negative" === (null == options ? void 0 : options.orient) ? groupHeight : 0) + offset,
-        point = isFunction$1(null == options ? void 0 : options.point) ? options.point.call(null, element.getDatum(), element, animationParameters) : null == options ? void 0 : options.point,
-        fromX = isValidNumber$1(null == point ? void 0 : point.x) ? point.x : changedX,
-        fromY = isValidNumber$1(null == point ? void 0 : point.y) ? point.y : changedY;
-      switch (null == options ? void 0 : options.direction) {
+        groupWidth = null !== (_a = null == groupBounds ? void 0 : groupBounds.width()) && void 0 !== _a ? _a : animationParameters.width,
+        groupHeight = null !== (_b = null == groupBounds ? void 0 : groupBounds.height()) && void 0 !== _b ? _b : animationParameters.height,
+        changedX = ("negative" === orient ? groupWidth : 0) + offset,
+        changedY = ("negative" === orient ? groupHeight : 0) + offset,
+        point = isFunction$1(pointOpt) ? pointOpt.call(null, element.getDatum(), element, animationParameters) : pointOpt,
+        fromX = point && isValidNumber$1(point.x) ? point.x : changedX,
+        fromY = point && isValidNumber$1(point.y) ? point.y : changedY;
+      switch (direction) {
         case "x":
           return {
             from: {
@@ -48469,7 +48372,7 @@
     const update = (element, options, animationParameters) => {
       const from = Object.assign({}, element.getPrevGraphicAttributes()),
         to = Object.assign({}, element.getNextGraphicAttributes());
-      return array(null == options ? void 0 : options.excludeChannels).forEach(key => {
+      return options && array(options.excludeChannels).forEach(key => {
         delete from[key], delete to[key];
       }), Object.keys(to).forEach(key => {
         isEqual(key, from, to) && (delete from[key], delete to[key]);
@@ -55708,7 +55611,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 computeColor = color(data, this._attributeContext, opt, markData);
                             }
                             if (isValid$1(opacity)) {
-                                computeColor = Color$2.SetOpacity(computeColor, opacity);
+                                computeColor = Color.SetOpacity(computeColor, opacity);
                             }
                             return {
                                 offset: isFunction$1(offset) ? offset(data, this._attributeContext, opt, markData) : offset,
@@ -55830,10 +55733,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const Appear_ClipIn$1 = {
         type: 'clipIn'
     };
-    const Appear_FadeIn$8 = {
+    const Appear_FadeIn$9 = {
         type: 'fadeIn'
     };
-    const Appear_Grow$5 = (params) => {
+    const Appear_Grow$6 = (params) => {
         return {
             type: params.direction === Direction.horizontal ? 'growPointsXIn' : 'growPointsYIn',
             options: {
@@ -55844,9 +55747,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     function linePresetAnimation(params, preset) {
         switch (preset) {
             case 'grow':
-                return Appear_Grow$5(params);
+                return Appear_Grow$6(params);
             case 'fadeIn':
-                return Appear_FadeIn$8;
+                return Appear_FadeIn$9;
             default:
                 return Appear_ClipIn$1;
         }
@@ -57670,7 +57573,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerChartPlugin(MediaQuery);
     };
 
-    const version = "1.8.0-beta.0";
+    const version = "1.8.0";
 
     var ChartTypeEnum;
     (function (ChartTypeEnum) {
@@ -61970,7 +61873,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const Appear_ClipIn = {
         type: 'clipIn'
     };
-    const Appear_Grow$4 = (params) => {
+    const Appear_Grow$5 = (params) => {
         return {
             type: params.direction === Direction.horizontal ? 'growPointsXIn' : 'growPointsYIn',
             options: {
@@ -61978,7 +61881,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         };
     };
-    const Appear_FadeIn$7 = {
+    const Appear_FadeIn$8 = {
         type: 'fadeIn'
     };
     function areaPresetAnimation(params, preset) {
@@ -61987,9 +61890,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         switch (preset) {
             case 'grow':
-                return Appear_Grow$4(params);
+                return Appear_Grow$5(params);
             case 'fadeIn':
-                return Appear_FadeIn$7;
+                return Appear_FadeIn$8;
             default:
                 return Appear_ClipIn;
         }
@@ -62273,7 +62176,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             options: barGrowOption(params, isOverall)
         };
     };
-    const Appear_FadeIn$6 = {
+    const Appear_FadeIn$7 = {
         type: 'fadeIn'
     };
     const Appear_ScaleIn$1 = {
@@ -62285,7 +62188,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         switch (preset) {
             case 'fadeIn':
-                return Appear_FadeIn$6;
+                return Appear_FadeIn$7;
             case 'scaleIn':
                 return Appear_ScaleIn$1;
             default:
@@ -65171,7 +65074,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return data;
     };
 
-    const Appear_FadeIn$5 = {
+    const Appear_FadeIn$6 = {
         type: 'fadeIn'
     };
     const Appear_ScaleIn = {
@@ -65180,7 +65083,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     function waterfallPresetAnimation(params, preset) {
         switch (preset) {
             case 'fadeIn':
-                return Appear_FadeIn$5;
+                return Appear_FadeIn$6;
             case 'scaleIn':
                 return Appear_ScaleIn;
             default:
@@ -66045,6 +65948,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const registerTextMark = () => {
         Factory.registerMark(TextMark.type, TextMark);
         registerTextGraphic();
+        registerRichTextGraphic();
     };
 
     function setRectLabelPos(component, labelMark, position, offset, x, x1, y, y1, direction) {
@@ -66225,7 +66129,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         };
     };
-    const Appear_FadeIn$4 = {
+    const Appear_FadeIn$5 = {
         type: 'fadeIn'
     };
     const rangeColumnGrowOut = (params) => {
@@ -66239,7 +66143,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     function rangeColumnPresetAnimation(params, preset) {
         switch (preset) {
             case 'fadeIn':
-                return Appear_FadeIn$4;
+                return Appear_FadeIn$5;
             case 'grow':
             default:
                 return rangeColumnGrowIn(params);
@@ -66879,13 +66783,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
         };
     }
-    const Appear_Grow$3 = (params) => {
+    const Appear_Grow$4 = (params) => {
         return {
             type: params.growField === 'radius' ? 'growRadiusIn' : 'growAngleIn',
             options: pieGrowOption(params, true, AnimationStateEnum.appear)
         };
     };
-    const Appear_FadeIn$3 = {
+    const Appear_FadeIn$4 = {
         type: 'fadeIn'
     };
     const pieEnter = (params) => {
@@ -66914,11 +66818,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         switch (preset) {
             case 'fadeIn':
-                return Appear_FadeIn$3;
+                return Appear_FadeIn$4;
             case 'growRadius':
-                return Appear_Grow$3(Object.assign(Object.assign({}, params), { growField: 'radius' }));
+                return Appear_Grow$4(Object.assign(Object.assign({}, params), { growField: 'radius' }));
             default:
-                return Appear_Grow$3(Object.assign(Object.assign({}, params), { growField: 'angle' }));
+                return Appear_Grow$4(Object.assign(Object.assign({}, params), { growField: 'angle' }));
         }
     }
     const registerPieAnimation = () => {
@@ -67488,7 +67392,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerSeries(Pie3dSeries.type, Pie3dSeries);
     };
 
-    const Appear_Grow$2 = (params) => {
+    const Appear_Grow$3 = (params) => {
         const from = params.growField === 'angle' ? 0 : params.innerRadius;
         return params.growField === 'angle'
             ? {
@@ -67501,7 +67405,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             };
     };
-    const Appear_FadeIn$2 = {
+    const Appear_FadeIn$3 = {
         type: 'fadeIn'
     };
     const roseEnter = (params) => {
@@ -67525,11 +67429,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         switch (preset) {
             case 'fadeIn':
-                return Appear_FadeIn$2;
+                return Appear_FadeIn$3;
             case 'growAngle':
-                return Appear_Grow$2(Object.assign(Object.assign({}, params), { growField: 'angle' }));
+                return Appear_Grow$3(Object.assign(Object.assign({}, params), { growField: 'angle' }));
             default:
-                return Appear_Grow$2(Object.assign(Object.assign({}, params), { growField: 'radius' }));
+                return Appear_Grow$3(Object.assign(Object.assign({}, params), { growField: 'radius' }));
         }
     }
     const registerRoseAnimation = () => {
@@ -69138,24 +69042,24 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerMark(ProgressArcMark.constructorType, ProgressArcMark);
     };
 
-    const Appear_Grow$1 = (params) => ({
+    const Appear_Grow$2 = (params) => ({
         type: 'growAngleIn',
         options: {
             overall: params.startAngle
         }
     });
-    const Appear_FadeIn$1 = {
+    const Appear_FadeIn$2 = {
         type: 'fadeIn'
     };
     function progressLikePresetAnimation(params, preset) {
         switch (preset) {
             case 'fadeIn':
-                return Appear_FadeIn$1;
+                return Appear_FadeIn$2;
             default:
-                return Appear_Grow$1(params);
+                return Appear_Grow$2(params);
         }
     }
-    const registerCircularProgressAnimation = () => {
+    const registerProgressLikeAnimation = () => {
         Factory.registerAnimation('circularProgress', (params, preset) => ({
             appear: progressLikePresetAnimation(params, preset),
             enter: { type: 'growAngleIn' },
@@ -69298,7 +69202,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const registerCircularProgressSeries = () => {
         registerProgressArcMark();
         registerArcMark();
-        registerCircularProgressAnimation();
+        registerProgressLikeAnimation();
         registerFadeInOutAnimation();
         Factory.registerSeries(CircularProgressSeries.type, CircularProgressSeries);
     };
@@ -69315,7 +69219,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
         };
     }
-    const Appear_Grow = (params) => {
+    const Appear_Grow$1 = (params) => {
         return {
             type: params.direction === Direction.horizontal ? 'growWidthIn' : 'growHeightIn',
             options: LinearProgressGrowOption(params)
@@ -69327,7 +69231,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             options: LinearProgressGrowOption(params)
         };
     };
-    const Appear_FadeIn = {
+    const Appear_FadeIn$1 = {
         type: 'fadeIn'
     };
     function linearProgressPresetAnimation(params, preset) {
@@ -69336,9 +69240,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         switch (preset) {
             case 'fadeIn':
-                return Appear_FadeIn;
+                return Appear_FadeIn$1;
             default:
-                return Appear_Grow(params);
+                return Appear_Grow$1(params);
         }
     }
     const registerLinearProgressAnimation = () => {
@@ -72427,6 +72331,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _buildMarkAttributeContext() {
             super._buildMarkAttributeContext();
             this._markAttributeContext.valueToPosition = this.valueToPosition.bind(this);
+            this._markAttributeContext.getPoints = this.getPoints.bind(this);
+            this._markAttributeContext.isTransformLevel = this.isTransformLevel.bind(this);
         }
         valueToPosition(category) {
             var _a, _b, _c;
@@ -73628,7 +73534,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         } : () => 0, this._maxDepth = -1;
       }
       layout(data, config) {
-        var _a, _b, _c, _d, _e;
+        var _a;
         const viewBox = "width" in config ? {
           x0: 0,
           x1: config.width,
@@ -73660,18 +73566,24 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             children: nodes,
             x: viewBox.x0 + viewBox.width / 2,
             y: viewBox.y0 + viewBox.height / 2
-          };
-        if (!1 !== (null === (_a = this.options) || void 0 === _a ? void 0 : _a.nodeSort)) {
-          const sort = isFunction$1(null === (_b = this.options) || void 0 === _b ? void 0 : _b.nodeSort) ? this.options.nodeKey : CirclePackingLayout.defaultOpionts.nodeSort;
+          },
+          {
+            nodeSort: nodeSort,
+            setRadius: setRadius,
+            padding: padding,
+            includeRoot: includeRoot
+          } = null !== (_a = this.options) && void 0 !== _a ? _a : {};
+        if (!1 !== nodeSort) {
+          const sort = isFunction$1(nodeSort) ? this.options.nodeKey : CirclePackingLayout.defaultOpionts.nodeSort;
           eachBefore([root], node => {
             node.children && node.children.length && node.children.sort(sort);
           });
         }
-        if (null === (_c = this.options) || void 0 === _c ? void 0 : _c.setRadius) eachBefore([root], radiusLeaf(this.options.setRadius)), eachAfter([root], packChildrenRandom(this._getPadding, .5, random)), eachBefore([root], translateChild(1, this._maxDepth));else {
+        if (setRadius) eachBefore([root], radiusLeaf(setRadius)), eachAfter([root], packChildrenRandom(this._getPadding, .5, random)), eachBefore([root], translateChild(1, this._maxDepth));else {
           const size = Math.min(viewBox.width, viewBox.height);
-          eachBefore([root], radiusLeaf(CirclePackingLayout.defaultOpionts.setRadius)), eachAfter([root], packChildrenRandom(zero, 1, random)), (null === (_d = this.options) || void 0 === _d ? void 0 : _d.padding) && eachAfter([root], packChildrenRandom(this._getPadding, root.radius / size, random)), eachBefore([root], translateChild(size / (2 * root.radius), this._maxDepth));
+          eachBefore([root], radiusLeaf(CirclePackingLayout.defaultOpionts.setRadius)), eachAfter([root], packChildrenRandom(zero, 1, random)), padding && eachAfter([root], packChildrenRandom(this._getPadding, root.radius / size, random)), eachBefore([root], translateChild(size / (2 * root.radius), this._maxDepth));
         }
-        return (null === (_e = this.options) || void 0 === _e ? void 0 : _e.includeRoot) ? [root] : nodes;
+        return includeRoot ? [root] : nodes;
       }
     }
     CirclePackingLayout.defaultOpionts = {
@@ -74432,7 +74344,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           width: Math.abs(config.x1 - config.x0),
           height: Math.abs(config.y1 - config.y0)
         };
-        "vertical" === this.options.direction ? this._viewBox = {
+        isVertical$1(this.options.direction) ? this._viewBox = {
           x0: viewBox.y0,
           x1: viewBox.y1,
           y0: viewBox.x0,
@@ -74445,7 +74357,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           links = result.links;
         if (this._nodeMap = result.nodeMap, this.computeNodeValues(nodes), this.computeNodeDepths(nodes), ["right", "end", "justify"].includes(this.options.nodeAlign) && this.computeNodeEndDepths(nodes), this._maxDepth <= 1) return null;
         const columns = this.computeNodeBreadths(nodes);
-        return this.computeLinkBreadths(nodes), "vertical" === this.options.direction && (nodes.forEach(node => {
+        return this.computeLinkBreadths(nodes), isVertical$1(this.options.direction) && (nodes.forEach(node => {
           const y0 = node.y0,
             y1 = node.y1;
           node.y0 = node.x0, node.y1 = node.x1, node.x0 = y0, node.x1 = y1;
@@ -76761,6 +76673,35 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerSeries(TreemapSeries.type, TreemapSeries);
     };
 
+    const Appear_Grow = (params) => ({
+        channel: {
+            angle: {
+                from: params.startAngle + Math.PI / 2
+            }
+        }
+    });
+    const Appear_FadeIn = {
+        type: 'fadeIn'
+    };
+    function gaugePointerPresetAnimation(params, preset) {
+        switch (preset) {
+            case 'fadeIn':
+                return Appear_FadeIn;
+            default:
+                return Appear_Grow(params);
+        }
+    }
+    const registerGaugePointerAnimation = () => {
+        Factory.registerAnimation('gaugePointer', (params, preset) => {
+            const animation = gaugePointerPresetAnimation(params, preset);
+            return {
+                appear: animation,
+                enter: animation,
+                disappear: { type: 'fadeOut' }
+            };
+        });
+    };
+
     class GaugePointerSeries extends ProgressLikeSeries {
         constructor() {
             super(...arguments);
@@ -76908,7 +76849,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initAnimation() {
             var _a, _b, _c;
             const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
-            this._pointerMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('circularProgress')) === null || _c === void 0 ? void 0 : _c({
+            this._pointerMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('gaugePointer')) === null || _c === void 0 ? void 0 : _c({
                 startAngle: this._startAngle
             }, appearPreset), userAnimationConfig(exports.SeriesMarkNameEnum.pointer, this._spec, this._markAttributeContext)));
         }
@@ -76924,7 +76865,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const registerGaugePointerSeries = () => {
         registerPathMark();
         registerRectMark();
-        registerCircularProgressAnimation();
+        registerGaugePointerAnimation();
         Factory.registerSeries(GaugePointerSeries.type, GaugePointerSeries);
     };
 
@@ -77068,7 +77009,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     GaugeSeries.transformerConstructor = GaugeSeriesSpecTransformer;
     const registerGaugeSeries = () => {
         registerProgressArcMark();
-        registerCircularProgressAnimation();
+        registerProgressLikeAnimation();
         Factory.registerSeries(GaugeSeries.type, GaugeSeries);
     };