@visactor/vrender-components 0.17.7 → 0.17.8

package/dist/index.js

@@ -3868,6 +3868,168 @@
     },
     __metadata$F = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+    };
+  var VWindow = Symbol["for"]("VWindow");
+  var WindowHandlerContribution = Symbol["for"]("WindowHandlerContribution");
+  var DefaultWindow = /*#__PURE__*/function () {
+    function DefaultWindow() {
+      _classCallCheck(this, DefaultWindow);
+      this.hooks = {
+        onChange: new SyncHook(["x", "y", "width", "height"])
+      }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
+    }
+    _createClass(DefaultWindow, [{
+      key: "width",
+      get: function get() {
+        if (this._handler) {
+          var wh = this._handler.getWH();
+          return this._width = wh.width;
+        }
+        return this._width;
+      }
+    }, {
+      key: "height",
+      get: function get() {
+        if (this._handler) {
+          var wh = this._handler.getWH();
+          return this._height = wh.height;
+        }
+        return this._height;
+      }
+    }, {
+      key: "dpr",
+      get: function get() {
+        return this._handler.getDpr();
+      }
+    }, {
+      key: "postInit",
+      value: function postInit() {
+        var _this = this;
+        this.global.hooks.onSetEnv.tap("window", function () {
+          _this.active();
+        }), this.active();
+      }
+    }, {
+      key: "active",
+      value: function active() {
+        var global = this.global;
+        if (!global.env || this.actived) return;
+        container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
+      }
+    }, {
+      key: "style",
+      get: function get() {
+        return this._handler.getStyle();
+      },
+      set: function set(style) {
+        this._handler.setStyle(style);
+      }
+    }, {
+      key: "create",
+      value: function create(params) {
+        this._handler.createWindow(params);
+        var windowWH = this._handler.getWH();
+        this._width = windowWH.width, this._height = windowWH.height, this.title = this._handler.getTitle(), this.resizable = !0;
+      }
+    }, {
+      key: "setWindowHandler",
+      value: function setWindowHandler(handler) {
+        this._handler = handler;
+      }
+    }, {
+      key: "setDpr",
+      value: function setDpr(dpr) {
+        return this._handler.setDpr(dpr);
+      }
+    }, {
+      key: "resize",
+      value: function resize(w, h) {
+        return this._handler.resizeWindow(w, h);
+      }
+    }, {
+      key: "configure",
+      value: function configure() {
+        throw new Error("暂不支持");
+      }
+    }, {
+      key: "release",
+      value: function release() {
+        return this._handler.releaseWindow();
+      }
+    }, {
+      key: "getContext",
+      value: function getContext() {
+        return this._handler.getContext();
+      }
+    }, {
+      key: "getNativeHandler",
+      value: function getNativeHandler() {
+        return this._handler.getNativeHandler();
+      }
+    }, {
+      key: "getImageBuffer",
+      value: function getImageBuffer(type) {
+        return this._handler.getImageBuffer ? this._handler.getImageBuffer(type) : null;
+      }
+    }, {
+      key: "addEventListener",
+      value: function addEventListener(type, listener, options) {
+        return this._handler.addEventListener(type, listener, options);
+      }
+    }, {
+      key: "removeEventListener",
+      value: function removeEventListener(type, listener, options) {
+        return this._handler.removeEventListener(type, listener, options);
+      }
+    }, {
+      key: "dispatchEvent",
+      value: function dispatchEvent(event) {
+        return this._handler.dispatchEvent(event);
+      }
+    }, {
+      key: "getBoundingClientRect",
+      value: function getBoundingClientRect() {
+        return this._handler.getBoundingClientRect();
+      }
+    }, {
+      key: "getContainer",
+      value: function getContainer() {
+        return this._handler.container;
+      }
+    }, {
+      key: "clearViewBox",
+      value: function clearViewBox(viewBox, color) {
+        this._handler.clearViewBox(viewBox, color);
+      }
+    }, {
+      key: "isVisible",
+      value: function isVisible(bbox) {
+        return this._handler.isVisible(bbox);
+      }
+    }, {
+      key: "onVisibleChange",
+      value: function onVisibleChange(cb) {
+        return this._handler.onVisibleChange(cb);
+      }
+    }, {
+      key: "getTopLeft",
+      value: function getTopLeft(baseWindow) {
+        return this._handler.getTopLeft(baseWindow);
+      }
+    }]);
+    return DefaultWindow;
+  }();
+  DefaultWindow = __decorate$P([injectable(), __metadata$F("design:paramtypes", [])], DefaultWindow);
+
+  var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      var d,
+        c = arguments.length,
+        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+    },
+    __metadata$E = undefined && undefined.__metadata || function (k, v) {
+      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     },
     __param$y = undefined && undefined.__param || function (paramIndex, decorator) {
       return function (target, key) {
@@ -3948,10 +4110,45 @@
           specialCharSet: "-/: .,@%'\"~" + vutils.TextMeasure.ALPHABET_CHAR_SET + vutils.TextMeasure.ALPHABET_CHAR_SET.toUpperCase()
         }, null != option ? option : {}), textSpec);
       }
+    }, {
+      key: "drawGraphicToCanvas",
+      value: function drawGraphicToCanvas(graphic, stage, canvas) {
+        if (!stage.defaultLayer) return null;
+        var window = container.get(VWindow),
+          bounds = graphic.AABBBounds,
+          width = bounds.width(),
+          height = bounds.height();
+        window.create({
+          width: width,
+          height: height,
+          canvas: canvas,
+          dpr: stage.window.dpr,
+          canvasControled: !0,
+          offscreen: !0,
+          title: ""
+        });
+        var x = -bounds.x1,
+          y = -bounds.y1,
+          disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
+        stage.params.optimize.disableCheckGraphicWidthOutRange = !0, stage.defaultLayer.getNativeHandler().drawTo(window, [graphic], {
+          x: x,
+          y: y,
+          width: width,
+          height: height,
+          stage: stage,
+          layer: stage.defaultLayer,
+          renderService: stage.renderService,
+          background: "transparent",
+          clear: !0,
+          updateBounds: !1
+        }), stage.params.optimize.disableCheckGraphicWidthOutRange = disableCheckGraphicWidthOutRange;
+        var c = window.getNativeHandler();
+        return c.nativeCanvas ? c.nativeCanvas : null;
+      }
     }]);
     return DefaultGraphicUtil;
   }();
-  DefaultGraphicUtil = __decorate$P([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(TextMeasureContribution)), __metadata$F("design:paramtypes", [Object])], DefaultGraphicUtil);
+  DefaultGraphicUtil = __decorate$O([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(TextMeasureContribution)), __metadata$E("design:paramtypes", [Object])], DefaultGraphicUtil);
   var TransformMode;
   !function (TransformMode) {
     TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -4028,7 +4225,7 @@
     }]);
     return DefaultTransformUtil;
   }();
-  DefaultTransformUtil = __decorate$P([injectable(), __metadata$F("design:paramtypes", [])], DefaultTransformUtil);
+  DefaultTransformUtil = __decorate$O([injectable(), __metadata$E("design:paramtypes", [])], DefaultTransformUtil);
 
   var defaultThemeObj = {
       arc: DefaultArcAttribute,
@@ -7554,14 +7751,14 @@
   var VirtualLayerHandlerContribution = Symbol["for"]("VirtualLayerHandlerContribution");
 
   var _DefaultLayerService_,
-    __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     },
-    __metadata$E = undefined && undefined.__metadata || function (k, v) {
+    __metadata$D = undefined && undefined.__metadata || function (k, v) {
       if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
     };
   var DefaultLayerService = _DefaultLayerService_ = /*#__PURE__*/function () {
@@ -7647,169 +7844,7 @@
     }]);
     return DefaultLayerService_1;
   }();
-  DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = _DefaultLayerService_ = __decorate$O([injectable(), __metadata$E("design:paramtypes", [])], DefaultLayerService);
-
-  var __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-      var d,
-        c = arguments.length,
-        r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-      return c > 3 && r && Object.defineProperty(target, key, r), r;
-    },
-    __metadata$D = undefined && undefined.__metadata || function (k, v) {
-      if ("object" == (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-    };
-  var VWindow = Symbol["for"]("VWindow");
-  var WindowHandlerContribution = Symbol["for"]("WindowHandlerContribution");
-  var DefaultWindow = /*#__PURE__*/function () {
-    function DefaultWindow() {
-      _classCallCheck(this, DefaultWindow);
-      this.hooks = {
-        onChange: new SyncHook(["x", "y", "width", "height"])
-      }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
-    }
-    _createClass(DefaultWindow, [{
-      key: "width",
-      get: function get() {
-        if (this._handler) {
-          var wh = this._handler.getWH();
-          return this._width = wh.width;
-        }
-        return this._width;
-      }
-    }, {
-      key: "height",
-      get: function get() {
-        if (this._handler) {
-          var wh = this._handler.getWH();
-          return this._height = wh.height;
-        }
-        return this._height;
-      }
-    }, {
-      key: "dpr",
-      get: function get() {
-        return this._handler.getDpr();
-      }
-    }, {
-      key: "postInit",
-      value: function postInit() {
-        var _this = this;
-        this.global.hooks.onSetEnv.tap("window", function () {
-          _this.active();
-        }), this.active();
-      }
-    }, {
-      key: "active",
-      value: function active() {
-        var global = this.global;
-        if (!global.env || this.actived) return;
-        container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
-      }
-    }, {
-      key: "style",
-      get: function get() {
-        return this._handler.getStyle();
-      },
-      set: function set(style) {
-        this._handler.setStyle(style);
-      }
-    }, {
-      key: "create",
-      value: function create(params) {
-        this._handler.createWindow(params);
-        var windowWH = this._handler.getWH();
-        this._width = windowWH.width, this._height = windowWH.height, this.title = this._handler.getTitle(), this.resizable = !0;
-      }
-    }, {
-      key: "setWindowHandler",
-      value: function setWindowHandler(handler) {
-        this._handler = handler;
-      }
-    }, {
-      key: "setDpr",
-      value: function setDpr(dpr) {
-        return this._handler.setDpr(dpr);
-      }
-    }, {
-      key: "resize",
-      value: function resize(w, h) {
-        return this._handler.resizeWindow(w, h);
-      }
-    }, {
-      key: "configure",
-      value: function configure() {
-        throw new Error("暂不支持");
-      }
-    }, {
-      key: "release",
-      value: function release() {
-        return this._handler.releaseWindow();
-      }
-    }, {
-      key: "getContext",
-      value: function getContext() {
-        return this._handler.getContext();
-      }
-    }, {
-      key: "getNativeHandler",
-      value: function getNativeHandler() {
-        return this._handler.getNativeHandler();
-      }
-    }, {
-      key: "getImageBuffer",
-      value: function getImageBuffer(type) {
-        return this._handler.getImageBuffer ? this._handler.getImageBuffer(type) : null;
-      }
-    }, {
-      key: "addEventListener",
-      value: function addEventListener(type, listener, options) {
-        return this._handler.addEventListener(type, listener, options);
-      }
-    }, {
-      key: "removeEventListener",
-      value: function removeEventListener(type, listener, options) {
-        return this._handler.removeEventListener(type, listener, options);
-      }
-    }, {
-      key: "dispatchEvent",
-      value: function dispatchEvent(event) {
-        return this._handler.dispatchEvent(event);
-      }
-    }, {
-      key: "getBoundingClientRect",
-      value: function getBoundingClientRect() {
-        return this._handler.getBoundingClientRect();
-      }
-    }, {
-      key: "getContainer",
-      value: function getContainer() {
-        return this._handler.container;
-      }
-    }, {
-      key: "clearViewBox",
-      value: function clearViewBox(viewBox, color) {
-        this._handler.clearViewBox(viewBox, color);
-      }
-    }, {
-      key: "isVisible",
-      value: function isVisible(bbox) {
-        return this._handler.isVisible(bbox);
-      }
-    }, {
-      key: "onVisibleChange",
-      value: function onVisibleChange(cb) {
-        return this._handler.onVisibleChange(cb);
-      }
-    }, {
-      key: "getTopLeft",
-      value: function getTopLeft(baseWindow) {
-        return this._handler.getTopLeft(baseWindow);
-      }
-    }]);
-    return DefaultWindow;
-  }();
-  DefaultWindow = __decorate$N([injectable(), __metadata$D("design:paramtypes", [])], DefaultWindow);
+  DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = _DefaultLayerService_ = __decorate$N([injectable(), __metadata$D("design:paramtypes", [])], DefaultLayerService);
 
   var coreModule = new ContainerModule(function (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();
@@ -8245,7 +8280,7 @@
         var _a;
         var attribute = this.attribute,
           textTheme = getTheme(this).text;
-        if (this.isMultiLine) return;
+        if (!this.isSimplify()) return;
         var _attribute$maxLineWid = attribute.maxLineWidth,
           maxLineWidth = _attribute$maxLineWid === void 0 ? textTheme.maxLineWidth : _attribute$maxLineWid;
         return Number.isFinite(maxLineWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
@@ -8253,23 +8288,28 @@
     }, {
       key: "clipedWidth",
       get: function get() {
-        if (!this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
+        if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
       }
     }, {
       key: "cliped",
       get: function get() {
         var textTheme = getTheme(this).text,
           attribute = this.attribute;
-        if (this.isMultiLine) return;
+        if (!this.isSimplify()) return;
         var _attribute$maxLineWid2 = attribute.maxLineWidth,
           maxLineWidth = _attribute$maxLineWid2 === void 0 ? textTheme.maxLineWidth : _attribute$maxLineWid2;
-        return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), this.clipedText !== attribute.text.toString());
+        return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), null != this.clipedText && this.clipedText !== attribute.text.toString());
       }
     }, {
       key: "multilineLayout",
       get: function get() {
         if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
       }
+    }, {
+      key: "isSimplify",
+      value: function isSimplify() {
+        return !this.isMultiLine && "vertical" !== this.attribute.direction;
+      }
     }, {
       key: "isMultiLine",
       get: function get() {
@@ -9983,7 +10023,14 @@
     }, {
       key: "toCustomPath",
       value: function toCustomPath() {
-        throw new Error("暂不支持");
+        var attribute = this.attribute;
+        var width = vutils.isNil(attribute.width) ? attribute.x1 - attribute.x : attribute.width,
+          height = vutils.isNil(attribute.height) ? attribute.y1 - attribute.y : attribute.height,
+          x = 0,
+          y = 0;
+        width < 0 && (x = width, width = -width), height < 0 && (y = height, height = -height);
+        var path = new CustomPath2D();
+        return path.moveTo(x, y), path.rect(x, y, width, height), path;
       }
     }, {
       key: "clone",
@@ -14009,7 +14056,7 @@
                   y: null !== (_d = endPoint.y1) && void 0 !== _d ? _d : endPoint.y
                 });
               }
-              lastBottomSeg = calcLineCache(bottomPoints, "stepBefore" === curveType ? "stepAfter" : "stepAfter" === curveType ? "stepBefore" : curveType), bottomCaches.unshift(lastBottomSeg);
+              bottomPoints.length > 1 && (lastBottomSeg = calcLineCache(bottomPoints, "stepBefore" === curveType ? "stepAfter" : "stepAfter" === curveType ? "stepBefore" : curveType), bottomCaches.unshift(lastBottomSeg));
             }
             area.cacheArea = bottomCaches.map(function (item, index) {
               return {
@@ -15053,8 +15100,8 @@
   }();
   Canvas3DPickItemInterceptor = __decorate$y([injectable()], Canvas3DPickItemInterceptor);
 
-  var pickModule = new ContainerModule(function (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);
+  var pickModule = new ContainerModule(function (bind, unbind, isBound) {
+    isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution), bind(InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
   });
 
   var graphicModule = new ContainerModule(function (bind) {
@@ -15866,12 +15913,12 @@
         }
         var d = context.dpr % 1;
         (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.inuse = !0, context.clearMatrix(), context.setTransformForCurrent(!0);
-        var drawInArea = dirtyBounds.width() * context.dpr !== context.canvas.width || dirtyBounds.height() * context.dpr !== context.canvas.height;
+        var drawInArea = dirtyBounds.width() * context.dpr < context.canvas.width || dirtyBounds.height() * context.dpr < context.canvas.height;
         context.save(), context.translate(x, y, !0), drawInArea && (context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip()), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), context.save(), renderService.renderTreeRoots.sort(function (a, b) {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(function (group) {
-          _this2.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0));
+          group.isContainer ? _this2.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : _this2.renderItem(group, drawContext);
         }), context.restore(), context.restore(), context.draw(), context.inuse = !1;
       }
     }, {
@@ -16652,7 +16699,11 @@
     container.load(renderModule);
   }
 
-  container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container);
+  var loaded$d = !1;
+  function preLoadAllModule() {
+    loaded$d || (loaded$d = !0, container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container));
+  }
+  preLoadAllModule();
   var vglobal = container.get(VGlobal);
   application.global = vglobal;
   var graphicUtil = container.get(GraphicUtil);
@@ -16664,8 +16715,23 @@
   var layerService = container.get(LayerService);
   application.layerService = layerService;
 
+  var _isBrowserEnv;
+  function initIsBrowserEnv() {
+    if (null == _isBrowserEnv) {
+      try {
+        _isBrowserEnv = !!window;
+      } catch (err) {
+        _isBrowserEnv = !1;
+      }
+      if (_isBrowserEnv) try {
+        _isBrowserEnv = !tt;
+      } catch (err) {
+        _isBrowserEnv = !0;
+      }
+    }
+  }
   function isBrowserEnv() {
-    return new Function("try {return this===window;}catch(e){ return false;}")();
+    return initIsBrowserEnv(), _isBrowserEnv;
   }
 
   var loadArcModule = !1;
@@ -18280,7 +18346,6 @@
           super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : vutils.merge({}, ScrollBar.defaultAttributes, attributes));
           this.name = 'scrollbar';
           this._onRailPointerDown = (e) => {
-              var _a, _b;
               const { viewX, viewY } = e;
               const { direction, width, height, range } = this.attribute;
               const sliderSize = this._sliderSize;
@@ -18299,8 +18364,8 @@
                   this._slider.setAttribute('x', currentXPos, true);
               }
               this.setScrollRange([currentScrollValue - (range[1] - range[0]) / 2, currentScrollValue + (range[1] - range[0]) / 2], false);
-              if (!((_a = this.stage) === null || _a === void 0 ? void 0 : _a.autoRender)) {
-                  (_b = this.stage) === null || _b === void 0 ? void 0 : _b.renderNextFrame();
+              if (this.stage && !this.stage.autoRender) {
+                  this.stage.renderNextFrame();
               }
           };
           this._onSliderPointerDown = (e) => {
@@ -18358,6 +18423,10 @@
                       value: vutils.clampRange(range, limitRange[0], limitRange[1])
                   });
               }
+              this._dispatchEvent('scrollUp', {
+                  pre: preRange,
+                  value: vutils.clampRange(range, limitRange[0], limitRange[1])
+              });
               if (vglobal.env === 'browser') {
                   vglobal.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
                   vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
@@ -18370,7 +18439,6 @@
           };
       }
       setScrollRange(range, render = true) {
-          var _a, _b;
           const { direction = 'horizontal', limitRange = [0, 1], range: preRange, realTime = true } = this.attribute;
           const currScrollRange = vutils.clampRange(range, limitRange[0], limitRange[1]);
           if (render) {
@@ -18382,8 +18450,8 @@
                   else {
                       this._slider.setAttribute('y', sliderPos[0], true);
                   }
-                  if (!((_a = this.stage) === null || _a === void 0 ? void 0 : _a.autoRender)) {
-                      (_b = this.stage) === null || _b === void 0 ? void 0 : _b.renderNextFrame();
+                  if (this.stage && !this.stage.autoRender) {
+                      this.stage.renderNextFrame();
                   }
               }
           }
@@ -18393,6 +18461,10 @@
                   pre: preRange,
                   value: currScrollRange
               });
+              this._dispatchEvent('scrollDrag', {
+                  pre: preRange,
+                  value: currScrollRange
+              });
           }
       }
       getScrollRange() {
@@ -18878,7 +18950,7 @@
               tagWidth += textWidth;
               const size = (_c = shape.size) !== null && _c !== void 0 ? _c : 10;
               const maxSize = vutils.isNumber(size) ? size : Math.max(size[0], size[1]);
-              tagHeight += Math.max(textHeight, (shape === null || shape === void 0 ? void 0 : shape.visible) ? maxSize : 0);
+              tagHeight += Math.max(textHeight, shape.visible ? maxSize : 0);
               const { textAlign, textBaseline } = textStyle;
               if (vutils.isValid(minWidth) || vutils.isValid(maxWidth)) {
                   if (vutils.isValid(minWidth) && tagWidth < minWidth) {
@@ -20193,19 +20265,25 @@
           }
           let labels;
           if (vutils.isFunction(customLayoutFunc)) {
-              labels = customLayoutFunc(data, this.getRelatedGrphic, this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
+              labels = customLayoutFunc(data, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
           }
           else {
               labels = this._layout(data);
           }
           if (vutils.isFunction(customOverlapFunc)) {
-              labels = customOverlapFunc(labels, this.getRelatedGrphic, this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
+              labels = customOverlapFunc(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
           }
           else {
               if (overlap !== false) {
                   labels = this._overlapping(labels);
               }
           }
+          if (labels && labels.length) {
+              labels.forEach(label => {
+                  this._bindEvent(label);
+                  this._setStatesOfText(label);
+              });
+          }
           if (smartInvert !== false) {
               this._smartInvert(labels);
           }
@@ -20254,21 +20332,15 @@
               attributes.width = (_a = attributes.width) !== null && _a !== void 0 ? _a : 0;
               attributes.height = (_b = attributes.height) !== null && _b !== void 0 ? _b : 0;
               const text = graphicCreator.richtext(attributes);
-              this._bindEvent(text);
-              this._setStatesOfText(text);
               return text;
           }
           else if (attributes.textType === 'html') {
               attributes.textConfig = [];
               attributes.html = Object.assign(Object.assign({ dom: attributes.text }, DEFAULT_HTML_TEXT_SPEC), attributes);
               const text = graphicCreator.richtext(attributes);
-              this._bindEvent(text);
-              this._setStatesOfText(text);
               return text;
           }
           const text = graphicCreator.text(attributes);
-          this._bindEvent(text);
-          this._setStatesOfText(text);
           return text;
       }
       _prepare() {
@@ -20345,7 +20417,7 @@
               };
           }
       }
-      getRelatedGrphic(item) {
+      getRelatedGraphic(item) {
           return this._idToGraphic.get(item.id);
       }
       _layout(data = []) {
@@ -20353,7 +20425,7 @@
           const labels = [];
           for (let i = 0; i < data.length; i++) {
               const textData = data[i];
-              const baseMark = this.getRelatedGrphic(textData);
+              const baseMark = this.getRelatedGraphic(textData);
               const labelAttribute = Object.assign(Object.assign({ fill: this._isCollectionBase
                       ? vutils.isArray(baseMark.attribute.stroke)
                           ? baseMark.attribute.stroke.find(entry => !!entry && entry !== true)
@@ -20416,7 +20488,7 @@
                   continue;
               }
               const text = labels[i];
-              const baseMark = this.getRelatedGrphic(text.attribute);
+              const baseMark = this.getRelatedGraphic(text.attribute);
               text.update();
               if (!vutils.isRectIntersect(baseMark.AABBBounds, { x1: 0, x2: bmpTool.width, y1: 0, y2: bmpTool.height }, true)) {
                   continue;
@@ -20505,7 +20577,7 @@
           labels.forEach((text, index) => {
               var _a, _b, _c, _d, _e, _f, _g;
               const labelLine = this._labelLine(text);
-              const relatedGraphic = this.getRelatedGrphic(text.attribute);
+              const relatedGraphic = this.getRelatedGraphic(text.attribute);
               const textId = text.attribute.id;
               const textKey = this._isCollectionBase ? textId : relatedGraphic;
               const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(textKey)) ? 'update' : 'enter';
@@ -20562,7 +20634,7 @@
           labels.forEach(text => {
               var _a;
               const labelLine = this._labelLine(text);
-              const relatedGraphic = this.getRelatedGrphic(text.attribute);
+              const relatedGraphic = this.getRelatedGraphic(text.attribute);
               const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
               const textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
               if (state === 'enter') {
@@ -20677,7 +20749,7 @@
               if (!label) {
                   continue;
               }
-              const baseMark = this.getRelatedGrphic(label.attribute);
+              const baseMark = this.getRelatedGraphic(label.attribute);
               const backgroundColor = baseMark.attribute.fill;
               const foregroundColor = label.attribute.fill;
               const baseColor = backgroundColor;
@@ -21468,7 +21540,8 @@
           }
           if (points[0].x < 0) {
               if (vutils.isNumberClose(points[0].y, points[1].y)) {
-                  if (Math.abs(arc.middleAngle) < Math.PI / 2) {
+                  if ((vutils.isGreater(arc.middleAngle, -Math.PI) && vutils.isLess(arc.middleAngle, 0)) ||
+                      (vutils.isGreater(arc.middleAngle, Math.PI) && vutils.isLess(arc.middleAngle, Math.PI * 2))) {
                       min = 0;
                       max = points[1].y + height / 2;
                   }
@@ -21834,7 +21907,7 @@
           }
           const { autoRotate = true } = attribute;
           let symbol;
-          if (attribute === null || attribute === void 0 ? void 0 : attribute.visible) {
+          if (attribute && attribute.visible) {
               const startAngle = this._startAngle;
               const endAngle = this._endAngle;
               const { state } = this.attribute;
@@ -21890,18 +21963,18 @@
           return points;
       }
       _clipPoints(points) {
-          const { startSymbol, endSymbol } = this.attribute;
+          const { startSymbol = {}, endSymbol = {} } = this.attribute;
           let pointsAfterClip = points;
-          if (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.visible) {
-              const startSize = (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.clip) ? (startSymbol === null || startSymbol === void 0 ? void 0 : startSymbol.size) || 10 : 0;
+          if (startSymbol.visible) {
+              const startSize = startSymbol.clip ? startSymbol.size || 10 : 0;
               const pointsStart = {
                   x: points[0].x - (startSize / 2) * (Math.cos(this._startAngle) || 0),
                   y: points[0].y - (startSize / 2) * (Math.sin(this._startAngle) || 0)
               };
               pointsAfterClip = [pointsStart, ...pointsAfterClip.slice(1)];
           }
-          if (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.visible) {
-              const endSize = (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.clip) ? (endSymbol === null || endSymbol === void 0 ? void 0 : endSymbol.size) || 10 : 0;
+          if (endSymbol.visible) {
+              const endSize = endSymbol.clip ? endSymbol.size || 10 : 0;
               const pointsEnd = {
                   x: points[points.length - 1].x - (endSize / 2) * (Math.cos(this._endAngle) || 0),
                   y: points[points.length - 1].y - (endSize / 2) * (Math.sin(this._endAngle) || 0)
@@ -22157,15 +22230,15 @@
           axisContainer.setMode(this.mode);
           this.axisContainer = axisContainer;
           container.add(axisContainer);
-          if (line === null || line === void 0 ? void 0 : line.visible) {
+          if (line && line.visible) {
               this.renderLine(axisContainer);
           }
           if (items && items.length) {
               this.data = this._transformItems(items[0]);
-              if (tick === null || tick === void 0 ? void 0 : tick.visible) {
+              if (tick && tick.visible) {
                   this.renderTicks(axisContainer);
               }
-              if (label === null || label === void 0 ? void 0 : label.visible) {
+              if (label && label.visible) {
                   const labelGroup = graphicCreator.group({ x: 0, y: 0, pickable: false });
                   labelGroup.name = exports.AXIS_ELEMENT_NAME.labelContainer;
                   labelGroup.id = this._getNodeId('label-container');
@@ -22180,7 +22253,7 @@
                   });
               }
           }
-          if (title === null || title === void 0 ? void 0 : title.visible) {
+          if (title && title.visible) {
               this.renderTitle(axisContainer);
           }
       }
@@ -22212,7 +22285,7 @@
           });
           this.tickLineItems = tickLineItems;
           const { subTick } = this.attribute;
-          if (subTick === null || subTick === void 0 ? void 0 : subTick.visible) {
+          if (subTick && subTick.visible) {
               const subTickLineItems = this.getSubTickLineItems();
               if (subTickLineItems.length) {
                   subTickLineItems.forEach((item, index) => {
@@ -22432,15 +22505,15 @@
               beta }, style);
       }
       _getLabelAttribute(tickDatum, index, tickData, layer) {
-          var _a, _b, _c, _d, _e, _f;
+          var _a, _b;
           const { space = 4, inside = false, formatMethod, type = 'text', text } = this.attribute.label;
           let offset = space;
           let tickLength = 0;
-          if (((_a = this.attribute.tick) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.inside) === inside) {
-              tickLength = ((_c = this.attribute.tick) === null || _c === void 0 ? void 0 : _c.length) || 4;
+          if (((_a = this.attribute.tick) === null || _a === void 0 ? void 0 : _a.visible) && this.attribute.tick.inside === inside) {
+              tickLength = this.attribute.tick.length || 4;
           }
-          if (((_d = this.attribute.subTick) === null || _d === void 0 ? void 0 : _d.visible) && ((_e = this.attribute.subTick) === null || _e === void 0 ? void 0 : _e.inside) === inside) {
-              tickLength = Math.max(tickLength, ((_f = this.attribute.subTick) === null || _f === void 0 ? void 0 : _f.length) || 2);
+          if (((_b = this.attribute.subTick) === null || _b === void 0 ? void 0 : _b.visible) && this.attribute.subTick.inside === inside) {
+              tickLength = Math.max(tickLength, this.attribute.subTick.length || 2);
           }
           offset += tickLength;
           const axisVector = this.getRelativeVector(tickDatum.point);
@@ -22880,8 +22953,8 @@
           container.add(axisLineGroup);
       }
       getTitleAttribute() {
-          var _a, _b, _c, _d, _e, _f, _g, _h;
-          const _j = this.attribute.title, { position = 'middle', space = 4, textStyle = {}, autoRotate = true, shape, background, state } = _j, restAttrs = __rest(_j, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state"]);
+          var _a, _b, _c;
+          const _d = this.attribute.title, { position = 'middle', space = 4, textStyle = {}, autoRotate = true, shape, background, state = {} } = _d, restAttrs = __rest(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state"]);
           let percent = 0.5;
           if (position === 'start') {
               percent = 0;
@@ -22894,7 +22967,7 @@
           const point = this.getTickCoord(percent);
           const axisVector = this.getRelativeVector();
           let labelLength = 0;
-          if (((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = this.attribute.label) === null || _b === void 0 ? void 0 : _b.inside) === false) {
+          if (((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.visible) && this.attribute.label.inside === false) {
               const space = +vutils.get(this.attribute, 'label.space', 4);
               labelLength += space;
               const layerCount = Object.keys(this.axisLabelLayerSize).length;
@@ -22955,11 +23028,11 @@
               }
           }
           let tickLength = 0;
-          if (((_c = this.attribute.tick) === null || _c === void 0 ? void 0 : _c.visible) && ((_d = this.attribute.tick) === null || _d === void 0 ? void 0 : _d.inside) === false) {
-              tickLength = ((_e = this.attribute.tick) === null || _e === void 0 ? void 0 : _e.length) || 4;
+          if (((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.visible) && this.attribute.tick.inside === false) {
+              tickLength = this.attribute.tick.length || 4;
           }
-          if (((_f = this.attribute.subTick) === null || _f === void 0 ? void 0 : _f.visible) && ((_g = this.attribute.subTick) === null || _g === void 0 ? void 0 : _g.inside) === false) {
-              tickLength = Math.max(tickLength, ((_h = this.attribute.subTick) === null || _h === void 0 ? void 0 : _h.length) || 2);
+          if (((_c = this.attribute.subTick) === null || _c === void 0 ? void 0 : _c.visible) && this.attribute.subTick.inside === false) {
+              tickLength = Math.max(tickLength, this.attribute.subTick.length || 2);
           }
           const offset = tickLength + labelLength + space;
           const titlePoint = this.getVerticalCoord(point, offset, false);
@@ -22995,9 +23068,9 @@
           }
           const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), { textStyle: Object.assign({ textAlign,
                   textBaseline }, textStyle), state: {
-                  text: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.text),
-                  shape: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.shape),
-                  panel: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.background)
+                  text: vutils.merge({}, DEFAULT_STATES$1, state.text),
+                  shape: vutils.merge({}, DEFAULT_STATES$1, state.shape),
+                  panel: vutils.merge({}, DEFAULT_STATES$1, state.background)
               } });
           attrs.angle = angle;
           if (shape && shape.visible) {
@@ -23033,7 +23106,7 @@
       }
       getLabelAlign(vector, inside, angle) {
           const orient = this.attribute.orient;
-          if (vutils.isValidNumber(angle)) {
+          if (vutils.isValidNumber(angle) || (vector[0] === 0 && vector[1] === 0)) {
               if (orient === 'top' || orient === 'bottom') {
                   return getXAxisLabelAlign(orient, angle);
               }
@@ -23228,9 +23301,9 @@
           let limitLength = limitSize;
           let titleHeight = 0;
           let titleSpacing = 0;
-          const axisLineWidth = (line === null || line === void 0 ? void 0 : line.visible) ? (_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1 : 0;
-          const tickLength = (tick === null || tick === void 0 ? void 0 : tick.visible) ? (_c = tick.length) !== null && _c !== void 0 ? _c : 4 : 0;
-          if ((title === null || title === void 0 ? void 0 : title.visible) && typeof title.text === 'string') {
+          const axisLineWidth = line && line.visible ? (_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1 : 0;
+          const tickLength = tick && tick.visible ? (_c = tick.length) !== null && _c !== void 0 ? _c : 4 : 0;
+          if (title && title.visible && typeof title.text === 'string') {
               titleHeight = measureTextSize(title.text, title.textStyle).height;
               const padding = vutils.normalizePadding(title.padding);
               titleSpacing = title.space + padding[0] + padding[2];
@@ -23332,7 +23405,7 @@
           super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : vutils.merge({}, CircleAxis.defaultAttributes, attributes));
       }
       renderLine(container) {
-          const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, radius, center, innerRadius = 0, line, inside = false } = this.attribute;
+          const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, radius, center, innerRadius = 0, line = {}, inside = false } = this.attribute;
           let arcRadius = radius;
           let arcInnerRadius = innerRadius;
           if (inside && innerRadius > 0) {
@@ -23340,30 +23413,30 @@
               arcInnerRadius = 0;
           }
           const arcAttrs = Object.assign(Object.assign(Object.assign({}, center), { startAngle,
-              endAngle, radius: arcRadius, innerRadius: arcInnerRadius }), line === null || line === void 0 ? void 0 : line.style);
+              endAngle, radius: arcRadius, innerRadius: arcInnerRadius }), line.style);
           const axisLine = graphicCreator.circle(arcAttrs);
           axisLine.name = exports.AXIS_ELEMENT_NAME.line;
           axisLine.id = this._getNodeId('line');
-          if (!vutils.isEmpty(line === null || line === void 0 ? void 0 : line.state)) {
+          if (!vutils.isEmpty(line.state)) {
               axisLine.states = vutils.merge({}, DEFAULT_STATES$1, line.state);
           }
           container.add(axisLine);
       }
       getTitleAttribute() {
-          var _a, _b, _c, _d, _e, _f, _g, _h;
+          var _a, _b, _c;
           const { center, radius, innerRadius = 0 } = this.attribute;
-          const _j = this.attribute.title, { space = 4, textStyle = {}, shape, background, state } = _j, restAttrs = __rest(_j, ["space", "textStyle", "shape", "background", "state"]);
+          const _d = this.attribute.title, { space = 4, textStyle = {}, shape, background, state = {} } = _d, restAttrs = __rest(_d, ["space", "textStyle", "shape", "background", "state"]);
           let titlePoint = center;
           let labelHeight = 0;
-          if (((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = this.attribute.label) === null || _b === void 0 ? void 0 : _b.inside) === false) {
+          if (((_a = this.attribute.label) === null || _a === void 0 ? void 0 : _a.visible) && this.attribute.label.inside === false) {
               labelHeight = vutils.get(this.attribute.label, 'style.fontSize', 12) + vutils.get(this.attribute.label, 'space', 4);
           }
           let tickLength = 0;
-          if (((_c = this.attribute.tick) === null || _c === void 0 ? void 0 : _c.visible) && ((_d = this.attribute.tick) === null || _d === void 0 ? void 0 : _d.inside) === false) {
-              tickLength = ((_e = this.attribute.tick) === null || _e === void 0 ? void 0 : _e.length) || 4;
+          if (((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.visible) && this.attribute.tick.inside === false) {
+              tickLength = this.attribute.tick.length || 4;
           }
-          if (((_f = this.attribute.subTick) === null || _f === void 0 ? void 0 : _f.visible) && ((_g = this.attribute.subTick) === null || _g === void 0 ? void 0 : _g.inside) === false) {
-              tickLength = Math.max(tickLength, ((_h = this.attribute.subTick) === null || _h === void 0 ? void 0 : _h.length) || 2);
+          if (((_c = this.attribute.subTick) === null || _c === void 0 ? void 0 : _c.visible) && this.attribute.subTick.inside === false) {
+              tickLength = Math.max(tickLength, this.attribute.subTick.length || 2);
           }
           const offset = radius + tickLength + labelHeight + space;
           let textBaseline = 'middle';
@@ -23386,9 +23459,9 @@
               };
           }
           const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), { textStyle: Object.assign({ textBaseline, textAlign: 'center' }, textStyle), state: {
-                  text: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.text),
-                  shape: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.shape),
-                  panel: vutils.merge({}, DEFAULT_STATES$1, state === null || state === void 0 ? void 0 : state.background)
+                  text: vutils.merge({}, DEFAULT_STATES$1, state.text),
+                  shape: vutils.merge({}, DEFAULT_STATES$1, state.shape),
+                  panel: vutils.merge({}, DEFAULT_STATES$1, state.background)
               } });
           const { angle } = restAttrs;
           attrs.angle = angle;
@@ -23527,11 +23600,12 @@
           let duration = this.duration;
           let easing = this.easing;
           Object.keys(this._newElementAttrMap).forEach(id => {
-              var _a, _b, _c, _d, _e, _f, _g;
+              var _a;
               const { node, attrs, state } = this._newElementAttrMap[id];
               if (state === 'enter') {
-                  duration = vutils.isValidNumber((_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.enter) === null || _b === void 0 ? void 0 : _b.duration) ? (_c = this.params) === null || _c === void 0 ? void 0 : _c.enter.duration : duration;
-                  easing = ((_e = (_d = this.params) === null || _d === void 0 ? void 0 : _d.enter) === null || _e === void 0 ? void 0 : _e.easing) ? (_g = (_f = this.params) === null || _f === void 0 ? void 0 : _f.enter) === null || _g === void 0 ? void 0 : _g.easing : easing;
+                  const { enter = {} } = (_a = this.params) !== null && _a !== void 0 ? _a : {};
+                  duration = vutils.isValidNumber(enter.duration) ? enter.duration : duration;
+                  easing = enter.easing ? enter.easing : easing;
               }
               if (node.type === 'path') {
                   node
@@ -24498,13 +24572,13 @@
           if (this._layoutAttrFromConfig) {
               return this._layoutAttrFromConfig;
           }
-          const { position: positionConfig, size, orient, middleHandlerStyle, startHandlerStyle, endHandlerStyle } = this.attribute;
+          const { position: positionConfig, size, orient, middleHandlerStyle = {}, startHandlerStyle = {}, endHandlerStyle = {} } = this.attribute;
           const { width: widthConfig, height: heightConfig } = size;
-          const middleHandlerSize = (_b = (_a = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 10;
+          const middleHandlerSize = (_b = (_a = middleHandlerStyle.background) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 10;
           let width;
           let height;
           let position;
-          if (middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.visible) {
+          if (middleHandlerStyle.visible) {
               if (this._isHorizontal) {
                   width = widthConfig;
                   height = heightConfig - middleHandlerSize;
@@ -24527,9 +24601,9 @@
               height = heightConfig;
               position = positionConfig;
           }
-          const startHandlerSize = (_c = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.size) !== null && _c !== void 0 ? _c : (this._isHorizontal ? height : width);
-          const endHandlerSize = (_d = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.size) !== null && _d !== void 0 ? _d : (this._isHorizontal ? height : width);
-          if (startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.visible) {
+          const startHandlerSize = (_c = startHandlerStyle.size) !== null && _c !== void 0 ? _c : (this._isHorizontal ? height : width);
+          const endHandlerSize = (_d = endHandlerStyle.size) !== null && _d !== void 0 ? _d : (this._isHorizontal ? height : width);
+          if (startHandlerStyle.visible) {
               if (this._isHorizontal) {
                   width -= (startHandlerSize + endHandlerSize) / 2;
                   position = {
@@ -24553,9 +24627,9 @@
           return this._layoutAttrFromConfig;
       }
       render() {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
           this._layoutAttrFromConfig = null;
-          const { orient, backgroundStyle, backgroundChartStyle, selectedBackgroundStyle, selectedBackgroundChartStyle, middleHandlerStyle, startHandlerStyle, endHandlerStyle, brushSelect } = this.attribute;
+          const { orient, backgroundStyle, backgroundChartStyle = {}, selectedBackgroundStyle = {}, selectedBackgroundChartStyle = {}, middleHandlerStyle = {}, startHandlerStyle = {}, endHandlerStyle = {}, brushSelect } = this.attribute;
           const { start, end } = this.state;
           const { position, width, height } = this.getLayoutAttrFromConfig();
           const startHandlerMinSize = (_a = startHandlerStyle.triggerMinSize) !== null && _a !== void 0 ? _a : 40;
@@ -24564,8 +24638,8 @@
           this._container = group;
           this._background = group.createOrUpdateChild('background', Object.assign({ x: position.x, y: position.y, width,
               height, cursor: brushSelect ? 'crosshair' : 'auto' }, backgroundStyle), 'rect');
-          ((_c = backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.line) === null || _c === void 0 ? void 0 : _c.visible) && this.setPreviewAttributes('line', group);
-          ((_d = backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.area) === null || _d === void 0 ? void 0 : _d.visible) && this.setPreviewAttributes('area', group);
+          ((_c = backgroundChartStyle.line) === null || _c === void 0 ? void 0 : _c.visible) && this.setPreviewAttributes('line', group);
+          ((_d = backgroundChartStyle.area) === null || _d === void 0 ? void 0 : _d.visible) && this.setPreviewAttributes('area', group);
           brushSelect && this.renderDragMask();
           if (this._isHorizontal) {
               this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), 'rect');
@@ -24573,18 +24647,19 @@
           else {
               this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), 'rect');
           }
-          ((_e = selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.line) === null || _e === void 0 ? void 0 : _e.visible) && this.setSelectedPreviewAttributes('line', group);
-          ((_f = selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.area) === null || _f === void 0 ? void 0 : _f.visible) && this.setSelectedPreviewAttributes('area', group);
+          ((_e = selectedBackgroundChartStyle.line) === null || _e === void 0 ? void 0 : _e.visible) && this.setSelectedPreviewAttributes('line', group);
+          ((_f = selectedBackgroundChartStyle.area) === null || _f === void 0 ? void 0 : _f.visible) && this.setSelectedPreviewAttributes('area', group);
           if (this._showText) {
               this.renderText();
           }
           if (this._isHorizontal) {
-              if (middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.visible) {
-                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: position.x + start * width, y: position.y - (((_g = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _g === void 0 ? void 0 : _g.size) || 10), width: (end - start) * width, height: ((_h = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _h === void 0 ? void 0 : _h.size) || 10 }, (_j = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _j === void 0 ? void 0 : _j.style), 'rect');
-                  this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: position.x + ((start + end) / 2) * width, y: position.y - (((_k = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _k === void 0 ? void 0 : _k.size) || 10) / 2, strokeBoundsBuffer: 0, angle: 0, symbolType: (_m = (_l = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _l === void 0 ? void 0 : _l.symbolType) !== null && _m !== void 0 ? _m : 'square' }, middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon), 'symbol');
+              if (middleHandlerStyle.visible) {
+                  const middleHandlerBackgroundSize = ((_g = middleHandlerStyle.background) === null || _g === void 0 ? void 0 : _g.size) || 10;
+                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: position.x + start * width, y: position.y - middleHandlerBackgroundSize, width: (end - start) * width, height: middleHandlerBackgroundSize }, (_h = middleHandlerStyle.background) === null || _h === void 0 ? void 0 : _h.style), 'rect');
+                  this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: position.x + ((start + end) / 2) * width, y: position.y - middleHandlerBackgroundSize / 2, strokeBoundsBuffer: 0, angle: 0, symbolType: (_k = (_j = middleHandlerStyle.icon) === null || _j === void 0 ? void 0 : _j.symbolType) !== null && _k !== void 0 ? _k : 'square' }, middleHandlerStyle.icon), 'symbol');
               }
-              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, symbolType: (_o = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _o !== void 0 ? _o : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), 'symbol');
-              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign({ x: position.x + end * width, y: position.y + height / 2, size: height, symbolType: (_p = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _p !== void 0 ? _p : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), 'symbol');
+              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, symbolType: (_l = startHandlerStyle.symbolType) !== null && _l !== void 0 ? _l : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), 'symbol');
+              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign({ x: position.x + end * width, y: position.y + height / 2, size: height, symbolType: (_m = endHandlerStyle.symbolType) !== null && _m !== void 0 ? _m : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), 'symbol');
               const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize);
               const startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize);
               const endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize);
@@ -24593,14 +24668,15 @@
               this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign({ x: position.x + end * width - endHandlerWidth / 2, y: position.y + height / 2 - endHandlerHeight / 2, width: endHandlerWidth, height: endHandlerHeight, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.horizontal), 'rect');
           }
           else {
-              if (middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.visible) {
-                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: orient === 'left' ? position.x - (((_q = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _q === void 0 ? void 0 : _q.size) || 10) : position.x + width, y: position.y + start * height, width: ((_r = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _r === void 0 ? void 0 : _r.size) || 10, height: (end - start) * height }, (_s = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _s === void 0 ? void 0 : _s.style), 'rect');
+              if (middleHandlerStyle.visible) {
+                  const middleHandlerBackgroundSize = ((_o = middleHandlerStyle.background) === null || _o === void 0 ? void 0 : _o.size) || 10;
+                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: orient === 'left' ? position.x - middleHandlerBackgroundSize : position.x + width, y: position.y + start * height, width: middleHandlerBackgroundSize, height: (end - start) * height }, (_p = middleHandlerStyle.background) === null || _p === void 0 ? void 0 : _p.style), 'rect');
                   this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: orient === 'left'
-                          ? position.x - (((_t = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _t === void 0 ? void 0 : _t.size) || 10) / 2
-                          : position.x + width + (((_u = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _u === void 0 ? void 0 : _u.size) || 10) / 2, y: position.y + ((start + end) / 2) * height, angle: 90 * (Math.PI / 180), symbolType: (_w = (_v = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _v === void 0 ? void 0 : _v.symbolType) !== null && _w !== void 0 ? _w : 'square', strokeBoundsBuffer: 0 }, middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon), 'symbol');
+                          ? position.x - middleHandlerBackgroundSize / 2
+                          : position.x + width + middleHandlerBackgroundSize / 2, y: position.y + ((start + end) / 2) * height, angle: 90 * (Math.PI / 180), symbolType: (_r = (_q = middleHandlerStyle.icon) === null || _q === void 0 ? void 0 : _q.symbolType) !== null && _r !== void 0 ? _r : 'square', strokeBoundsBuffer: 0 }, middleHandlerStyle.icon), 'symbol');
               }
-              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + start * height, size: width, symbolType: (_x = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _x !== void 0 ? _x : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), 'symbol');
-              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + end * height, size: width, symbolType: (_y = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _y !== void 0 ? _y : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), 'symbol');
+              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + start * height, size: width, symbolType: (_s = startHandlerStyle.symbolType) !== null && _s !== void 0 ? _s : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), 'symbol');
+              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + end * height, size: width, symbolType: (_t = endHandlerStyle.symbolType) !== null && _t !== void 0 ? _t : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), 'symbol');
               const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize);
               const startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize);
               const endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize);
@@ -24699,11 +24775,11 @@
           else {
               this._previewArea = this._previewGroup.createOrUpdateChild('previewArea', { curveType: 'basis' }, 'area');
           }
-          const { backgroundChartStyle } = this.attribute;
+          const { backgroundChartStyle = {} } = this.attribute;
           type === 'line' &&
-              this._previewLine.setAttributes(Object.assign({ points: this.getPreviewLinePoints(), curveType: 'basis', pickable: false }, backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.line));
+              this._previewLine.setAttributes(Object.assign({ points: this.getPreviewLinePoints(), curveType: 'basis', pickable: false }, backgroundChartStyle.line));
           type === 'area' &&
-              this._previewArea.setAttributes(Object.assign({ points: this.getPreviewAreaPoints(), curveType: 'basis', pickable: false }, backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.area));
+              this._previewArea.setAttributes(Object.assign({ points: this.getPreviewAreaPoints(), curveType: 'basis', pickable: false }, backgroundChartStyle.area));
       }
       setSelectedPreviewAttributes(type, group) {
           if (!this._selectedPreviewGroupClip) {
@@ -24716,7 +24792,7 @@
           else {
               this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild('selectedPreviewArea', { curveType: 'basis' }, 'area');
           }
-          const { selectedBackgroundChartStyle } = this.attribute;
+          const { selectedBackgroundChartStyle = {} } = this.attribute;
           const { start, end } = this.state;
           const { position, width, height } = this.getLayoutAttrFromConfig();
           this._selectedPreviewGroupClip.setAttributes({
@@ -24735,9 +24811,9 @@
               pickable: false
           });
           type === 'line' &&
-              this._selectedPreviewLine.setAttributes(Object.assign({ points: this.getPreviewLinePoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.line));
+              this._selectedPreviewLine.setAttributes(Object.assign({ points: this.getPreviewLinePoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle.line));
           type === 'area' &&
-              this._selectedPreviewArea.setAttributes(Object.assign({ points: this.getPreviewAreaPoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.area));
+              this._selectedPreviewArea.setAttributes(Object.assign({ points: this.getPreviewAreaPoints(), curveType: 'basis', pickable: false }, selectedBackgroundChartStyle.area));
       }
       maybeAddLabel(container, attributes, name) {
           let labelShape = this.find(node => node.name === name, true);
@@ -24785,9 +24861,9 @@
       }
       getMiddleHandlerSize() {
           var _a, _b, _c, _d;
-          const { middleHandlerStyle } = this.attribute;
-          const middleHandlerRectSize = (_b = (_a = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 10;
-          const middleHandlerSymbolSize = (_d = (_c = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 10;
+          const { middleHandlerStyle = {} } = this.attribute;
+          const middleHandlerRectSize = (_b = (_a = middleHandlerStyle.background) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 10;
+          const middleHandlerSymbolSize = (_d = (_c = middleHandlerStyle.icon) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 10;
           return Math.max(middleHandlerRectSize, ...vutils.array(middleHandlerSymbolSize));
       }
       setPreviewPointsX(callback) {
@@ -24849,13 +24925,13 @@
       }
       _initContainer() {
           var _a, _b;
-          const { limitRect, clipInRange } = this.attribute;
+          const { limitRect = {}, clipInRange } = this.attribute;
           let group;
           if (clipInRange) {
               const groupClip = graphicCreator.group(Object.assign(Object.assign({}, limitRect), { clip: true, pickable: false }));
               group = graphicCreator.group({
-                  x: -((_a = limitRect === null || limitRect === void 0 ? void 0 : limitRect.x) !== null && _a !== void 0 ? _a : 0),
-                  y: -((_b = limitRect === null || limitRect === void 0 ? void 0 : limitRect.y) !== null && _b !== void 0 ? _b : 0),
+                  x: -((_a = limitRect.x) !== null && _a !== void 0 ? _a : 0),
+                  y: -((_b = limitRect.y) !== null && _b !== void 0 ? _b : 0),
                   pickable: false
               });
               groupClip.add(group);
@@ -24874,12 +24950,14 @@
           this._container = group;
       }
       _updateContainer() {
-          var _a, _b, _c;
-          const { limitRect, clipInRange } = this.attribute;
-          (_a = this._containerClip) === null || _a === void 0 ? void 0 : _a.setAttributes(Object.assign({}, limitRect));
+          var _a, _b;
+          const { limitRect = {}, clipInRange } = this.attribute;
+          if (this._containerClip) {
+              this._containerClip.setAttributes(Object.assign({}, limitRect));
+          }
           this._container.setAttributes({
-              x: clipInRange ? -((_b = limitRect === null || limitRect === void 0 ? void 0 : limitRect.x) !== null && _b !== void 0 ? _b : 0) : 0,
-              y: clipInRange ? -((_c = limitRect === null || limitRect === void 0 ? void 0 : limitRect.y) !== null && _c !== void 0 ? _c : 0) : 0
+              x: clipInRange ? -((_a = limitRect.x) !== null && _a !== void 0 ? _a : 0) : 0,
+              y: clipInRange ? -((_b = limitRect.y) !== null && _b !== void 0 ? _b : 0) : 0
           });
       }
       render() {
@@ -25218,7 +25296,7 @@
                   y: points[points.length - 1].y + labelOffsetY
               };
           }
-          this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { angle: label.autoRotate ? labelAngle + ((_b = label === null || label === void 0 ? void 0 : label.refAngle) !== null && _b !== void 0 ? _b : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_LINE_TEXT_STYLE_MAP[position]), label.textStyle) }));
+          this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { angle: label.autoRotate ? labelAngle + ((_b = label.refAngle) !== null && _b !== void 0 ? _b : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_LINE_TEXT_STYLE_MAP[position]), label.textStyle) }));
           if (limitRect && confine) {
               const { x, y, width, height } = limitRect;
               limitShapeInBounds(this._label, {
@@ -25251,18 +25329,21 @@
           this.setLabelPos();
       }
       updateMarker() {
-          var _a, _b;
           const { points, startSymbol, endSymbol, label, lineStyle, mainSegmentIndex, multiSegment } = this
               .attribute;
-          (_a = this._line) === null || _a === void 0 ? void 0 : _a.setAttributes({
-              points,
-              startSymbol,
-              endSymbol,
-              lineStyle,
-              mainSegmentIndex,
-              multiSegment
-          });
-          (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({ dx: 0, dy: 0 }, label));
+          if (this._line) {
+              this._line.setAttributes({
+                  points,
+                  startSymbol,
+                  endSymbol,
+                  lineStyle,
+                  mainSegmentIndex,
+                  multiSegment
+              });
+          }
+          if (this._label) {
+              this._label.setAttributes(Object.assign({ dx: 0, dy: 0 }, label));
+          }
           this.setLabelPos();
       }
       isValidPoints() {
@@ -25321,11 +25402,11 @@
       setLabelPos() {
           var _a;
           if (this._label && this._area) {
-              const { label } = this.attribute;
-              const labelPosition = (_a = label === null || label === void 0 ? void 0 : label.position) !== null && _a !== void 0 ? _a : 'middle';
+              const { label = {} } = this.attribute;
+              const labelPosition = (_a = label.position) !== null && _a !== void 0 ? _a : 'middle';
               const labelPoint = this._getPositionByDirection(this._area, labelPosition);
               this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle) }));
-              if (this.attribute.limitRect && (label === null || label === void 0 ? void 0 : label.confine)) {
+              if (this.attribute.limitRect && label.confine) {
                   const { x, y, width, height } = this.attribute.limitRect;
                   limitShapeInBounds(this._label, {
                       x1: x,
@@ -25349,10 +25430,13 @@
           this.setLabelPos();
       }
       updateMarker() {
-          var _a, _b;
           const { points, label, areaStyle } = this.attribute;
-          (_a = this._area) === null || _a === void 0 ? void 0 : _a.setAttributes(Object.assign({ points: points }, areaStyle));
-          (_b = this._label) === null || _b === void 0 ? void 0 : _b.setAttributes(Object.assign({ dx: 0, dy: 0 }, label));
+          if (this._area) {
+              this._area.setAttributes(Object.assign({ points: points }, areaStyle));
+          }
+          if (this._area) {
+              this._label.setAttributes(Object.assign({ dx: 0, dy: 0 }, label));
+          }
           this.setLabelPos();
       }
       isValidPoints() {
@@ -25378,23 +25462,23 @@
           if (!item) {
               return;
           }
-          const { autoRotate = true, refX = 0, refY = 0, refAngle = 0, textStyle, richTextStyle, imageStyle, position = exports.IMarkPointItemPosition.middle } = itemContent;
+          const { autoRotate = true, refX = 0, refY = 0, refAngle = 0, textStyle = {}, richTextStyle = {}, imageStyle = {}, position = exports.IMarkPointItemPosition.middle } = itemContent;
           const itemAngle = ((_a = this._line) === null || _a === void 0 ? void 0 : _a.getEndAngle()) || 0;
           const itemOffsetX = refX * Math.cos(itemAngle) + refY * Math.cos(itemAngle - Math.PI / 2);
           const itemOffsetY = refX * Math.sin(itemAngle) + refY * Math.sin(itemAngle - Math.PI / 2);
           if (itemType === 'text') {
-              item.setAttributes(Object.assign(Object.assign({}, textStyle), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(itemContent === null || itemContent === void 0 ? void 0 : itemContent.position) || 'end']), textStyle === null || textStyle === void 0 ? void 0 : textStyle.textStyle) }));
+              item.setAttributes(Object.assign(Object.assign({}, textStyle), { textStyle: Object.assign(Object.assign({}, DEFAULT_MARK_POINT_TEXT_STYLE_MAP[(itemContent === null || itemContent === void 0 ? void 0 : itemContent.position) || 'end']), textStyle.textStyle) }));
           }
           else if (itemType === 'richText') {
               item.setAttributes({
-                  dx: this.getItemDx(item, position, richTextStyle) + ((richTextStyle === null || richTextStyle === void 0 ? void 0 : richTextStyle.dx) || 0),
-                  dy: this.getItemDy(item, position, richTextStyle) + ((richTextStyle === null || richTextStyle === void 0 ? void 0 : richTextStyle.dy) || 0)
+                  dx: this.getItemDx(item, position, richTextStyle) + (richTextStyle.dx || 0),
+                  dy: this.getItemDy(item, position, richTextStyle) + (richTextStyle.dy || 0)
               });
           }
           else if (itemType === 'image') {
               item.setAttributes({
-                  dx: this.getItemDx(item, position, imageStyle) + ((imageStyle === null || imageStyle === void 0 ? void 0 : imageStyle.dx) || 0),
-                  dy: this.getItemDy(item, position, imageStyle) + ((imageStyle === null || imageStyle === void 0 ? void 0 : imageStyle.dy) || 0)
+                  dx: this.getItemDx(item, position, imageStyle) + (imageStyle.dx || 0),
+                  dy: this.getItemDy(item, position, imageStyle) + (imageStyle.dy || 0)
               });
           }
           item.setAttributes({
@@ -25485,16 +25569,17 @@
           return points;
       }
       setItemLineAttr(itemLine, position, itemPosition, visible) {
-          var _a;
-          const { startSymbol, endSymbol, lineStyle } = itemLine;
-          const points = this.getItemLineAttr(itemLine, position, itemPosition);
-          (_a = this._line) === null || _a === void 0 ? void 0 : _a.setAttributes({
-              points,
-              startSymbol,
-              endSymbol,
-              lineStyle,
-              visible
-          });
+          if (this._line) {
+              const { startSymbol, endSymbol, lineStyle } = itemLine;
+              const points = this.getItemLineAttr(itemLine, position, itemPosition);
+              this._line.setAttributes({
+                  points,
+                  startSymbol,
+                  endSymbol,
+                  lineStyle,
+                  visible
+              });
+          }
       }
       getDecorativeLineAttr(itemLine, itemPosition) {
           var _a;
@@ -25512,26 +25597,27 @@
           };
       }
       setDecorativeLineAttr(itemLine, itemPosition, visible) {
-          var _a;
-          const { lineStyle } = itemLine;
-          const { startPointOffsetX, startPointOffsetY, endPointOffsetX, endPointOffsetY } = this.getDecorativeLineAttr(itemLine, itemPosition);
-          (_a = this._decorativeLine) === null || _a === void 0 ? void 0 : _a.setAttributes(Object.assign(Object.assign({ points: [
-                  {
-                      x: itemPosition.x + startPointOffsetX,
-                      y: itemPosition.y + startPointOffsetY
-                  },
-                  {
-                      x: itemPosition.x + endPointOffsetX,
-                      y: itemPosition.y + endPointOffsetY
-                  }
-              ] }, lineStyle), { visible }));
+          if (this._decorativeLine) {
+              const { lineStyle } = itemLine;
+              const { startPointOffsetX, startPointOffsetY, endPointOffsetX, endPointOffsetY } = this.getDecorativeLineAttr(itemLine, itemPosition);
+              this._decorativeLine.setAttributes(Object.assign(Object.assign({ points: [
+                      {
+                          x: itemPosition.x + startPointOffsetX,
+                          y: itemPosition.y + startPointOffsetY
+                      },
+                      {
+                          x: itemPosition.x + endPointOffsetX,
+                          y: itemPosition.y + endPointOffsetY
+                      }
+                  ] }, lineStyle), { visible }));
+          }
       }
       initMarker(container) {
           var _a;
-          const { position, itemLine, itemContent } = this.attribute;
+          const { position, itemLine = {}, itemContent = {} } = this.attribute;
           const itemPosition = {
-              x: position.x + ((itemContent === null || itemContent === void 0 ? void 0 : itemContent.offsetX) || 0),
-              y: position.y + ((itemContent === null || itemContent === void 0 ? void 0 : itemContent.offsetY) || 0)
+              x: position.x + (itemContent.offsetX || 0),
+              y: position.y + (itemContent.offsetY || 0)
           };
           const line = new Segment({
               points: [],
@@ -25546,22 +25632,22 @@
           decorativeLine.name = 'mark-point-decorativeLine';
           this._decorativeLine = decorativeLine;
           container.add(decorativeLine);
-          this.setItemLineAttr(itemLine, position, itemPosition, itemLine === null || itemLine === void 0 ? void 0 : itemLine.visible);
-          this.setDecorativeLineAttr(itemLine, itemPosition, (_a = itemLine === null || itemLine === void 0 ? void 0 : itemLine.decorativeLine) === null || _a === void 0 ? void 0 : _a.visible);
+          this.setItemLineAttr(itemLine, position, itemPosition, itemLine.visible);
+          this.setDecorativeLineAttr(itemLine, itemPosition, (_a = itemLine.decorativeLine) === null || _a === void 0 ? void 0 : _a.visible);
           const item = this.initItem(itemContent, itemPosition);
           this._item = item;
           container.add(item);
       }
       updateMarker() {
           var _a;
-          const { position, itemLine, itemContent } = this.attribute;
+          const { position, itemLine = {}, itemContent = {} } = this.attribute;
           const { type = 'text' } = itemContent;
           const itemPosition = {
-              x: position.x + ((itemContent === null || itemContent === void 0 ? void 0 : itemContent.offsetX) || 0),
-              y: position.y + ((itemContent === null || itemContent === void 0 ? void 0 : itemContent.offsetY) || 0)
+              x: position.x + (itemContent.offsetX || 0),
+              y: position.y + (itemContent.offsetY || 0)
           };
-          this.setItemLineAttr(itemLine, position, itemPosition, itemLine === null || itemLine === void 0 ? void 0 : itemLine.visible);
-          this.setDecorativeLineAttr(itemLine, itemPosition, (_a = itemLine === null || itemLine === void 0 ? void 0 : itemLine.decorativeLine) === null || _a === void 0 ? void 0 : _a.visible);
+          this.setItemLineAttr(itemLine, position, itemPosition, itemLine.visible);
+          this.setDecorativeLineAttr(itemLine, itemPosition, (_a = itemLine.decorativeLine) === null || _a === void 0 ? void 0 : _a.visible);
           this.setItemAttributes(this._item, itemContent, itemPosition, type);
       }
       isValidPoints() {
@@ -25892,9 +25978,8 @@
           this._itemHeight = 0;
           this._itemMaxWidth = 0;
           this._onHover = (e) => {
-              var _a;
               const target = e.target;
-              if ((_a = target === null || target === void 0 ? void 0 : target.name) === null || _a === void 0 ? void 0 : _a.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
+              if (target && target.name && target.name.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
                   const legendItem = target.delegate;
                   if (this._lastActiveItem) {
                       if (this._lastActiveItem.id === legendItem.id) {
@@ -25916,15 +26001,15 @@
               }
           };
           this._onClick = (e) => {
-              var _a, _b, _c, _d, _e;
+              var _a, _b, _c, _d;
               const target = e.target;
-              if ((_a = target === null || target === void 0 ? void 0 : target.name) === null || _a === void 0 ? void 0 : _a.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
+              if (target && target.name && target.name.startsWith(exports.LEGEND_ELEMENT_NAME.item)) {
                   const legendItem = target.delegate;
                   if (target.name === exports.LEGEND_ELEMENT_NAME.focus) {
                       const isFocusSelected = legendItem.hasState(exports.LegendStateValue.focus);
                       legendItem.toggleState(exports.LegendStateValue.focus);
                       if (isFocusSelected) {
-                          (_b = this._itemsContainer) === null || _b === void 0 ? void 0 : _b.getChildren().forEach(item => {
+                          (_a = this._itemsContainer) === null || _a === void 0 ? void 0 : _a.getChildren().forEach(item => {
                               this._removeLegendItemState(item, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover, exports.LegendStateValue.focus], e);
                               this._setLegendItemState(item, exports.LegendStateValue.selected, e);
                           });
@@ -25932,7 +26017,7 @@
                       else {
                           this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
                           this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
-                          (_c = this._itemsContainer) === null || _c === void 0 ? void 0 : _c.getChildren().forEach(item => {
+                          (_b = this._itemsContainer) === null || _b === void 0 ? void 0 : _b.getChildren().forEach(item => {
                               if (legendItem !== item) {
                                   this._removeLegendItemState(item, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover, exports.LegendStateValue.focus], e);
                                   this._setLegendItemState(item, exports.LegendStateValue.unSelected, e);
@@ -25941,7 +26026,7 @@
                       }
                   }
                   else {
-                      (_d = this._itemsContainer) === null || _d === void 0 ? void 0 : _d.getChildren().forEach(item => {
+                      (_c = this._itemsContainer) === null || _c === void 0 ? void 0 : _c.getChildren().forEach(item => {
                           item.removeState(exports.LegendStateValue.focus);
                       });
                       const { selectMode = 'multiple', allowAllCanceled = true } = this.attribute;
@@ -25964,7 +26049,7 @@
                       else {
                           this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
                           this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
-                          (_e = this._itemsContainer) === null || _e === void 0 ? void 0 : _e.getChildren().forEach(item => {
+                          (_d = this._itemsContainer) === null || _d === void 0 ? void 0 : _d.getChildren().forEach(item => {
                               if (legendItem !== item) {
                                   this._removeLegendItemState(item, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover], e);
                                   this._setLegendItemState(item, exports.LegendStateValue.unSelected, e);
@@ -26142,7 +26227,7 @@
           let focusStartX = 0;
           let shapeSize = 0;
           let shapeSpace = 0;
-          if ((shapeAttr === null || shapeAttr === void 0 ? void 0 : shapeAttr.visible) !== false) {
+          if (shapeAttr && shapeAttr.visible !== false) {
               shapeSize = vutils.get(shapeStyle, 'style.size', DEFAULT_SHAPE_SIZE);
               shapeSpace = vutils.get(shapeAttr, 'space', DEFAULT_SHAPE_SPACE);
               const itemShape = graphicCreator.symbol(Object.assign(Object.assign({ x: 0, y: 0, symbolType: 'circle', strokeBoundsBuffer: 0 }, shape), shapeStyle.style));
@@ -26780,15 +26865,16 @@
                   const originPos = (this._isHorizontal ? endHandler.attribute.x : endHandler.attribute.y);
                   const newPos = vutils.clamp(originPos + delta, trackLen, railLen);
                   const currentValue = (newPos / railLen) * (max - min) + min;
+                  const startHandlerAttribute = startHandler === null || startHandler === void 0 ? void 0 : startHandler.attribute;
                   this._updateHandler(endHandler, newPos, currentValue);
                   this._track.setAttributes(this._isHorizontal
                       ? {
-                          x: Math.min(startHandler === null || startHandler === void 0 ? void 0 : startHandler.attribute.x, endHandler === null || endHandler === void 0 ? void 0 : endHandler.attribute.x),
-                          width: Math.abs((startHandler === null || startHandler === void 0 ? void 0 : startHandler.attribute.x) - (endHandler === null || endHandler === void 0 ? void 0 : endHandler.attribute.x))
+                          x: Math.min(startHandlerAttribute.x, endHandler.attribute.x),
+                          width: Math.abs(startHandlerAttribute.x - endHandler.attribute.x)
                       }
                       : {
-                          y: Math.min(startHandler === null || startHandler === void 0 ? void 0 : startHandler.attribute.y, endHandler === null || endHandler === void 0 ? void 0 : endHandler.attribute.y),
-                          height: Math.abs((startHandler === null || startHandler === void 0 ? void 0 : startHandler.attribute.y) - (endHandler === null || endHandler === void 0 ? void 0 : endHandler.attribute.y))
+                          y: Math.min(startHandlerAttribute.y, endHandler.attribute.y),
+                          height: Math.abs(startHandlerAttribute.y - endHandler.attribute.y)
                       });
               }
               this._prePos = currentPos;
@@ -27044,7 +27130,7 @@
           const handlerStart = max === min ? (position === 'start' ? 0 : railLen) : ((value - min) / (max - min)) * railLen;
           const textSpace = (_a = handlerText.space) !== null && _a !== void 0 ? _a : 4;
           const textStyle = {
-              text: (handlerText === null || handlerText === void 0 ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed((_b = handlerText === null || handlerText === void 0 ? void 0 : handlerText.precision) !== null && _b !== void 0 ? _b : 0),
+              text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed((_b = handlerText.precision) !== null && _b !== void 0 ? _b : 0),
               lineHeight: (_c = handlerText.style) === null || _c === void 0 ? void 0 : _c.lineHeight,
               cursor: slidable === false ? 'default' : getDefaultCursor(isHorizontal)
           };
@@ -27143,9 +27229,9 @@
           handler.setAttribute(isHorizontal ? 'x' : 'y', position);
           const updateHandlerText = handler.name === exports.SLIDER_ELEMENT_NAME.startHandler ? this._startHandlerText : this._endHandlerText;
           if (updateHandlerText) {
-              const { handlerText } = this.attribute;
-              updateHandlerText === null || updateHandlerText === void 0 ? void 0 : updateHandlerText.setAttributes({
-                  text: (handlerText === null || handlerText === void 0 ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed((_a = handlerText === null || handlerText === void 0 ? void 0 : handlerText.precision) !== null && _a !== void 0 ? _a : 0),
+              const { handlerText = {} } = this.attribute;
+              updateHandlerText.setAttributes({
+                  text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed((_a = handlerText.precision) !== null && _a !== void 0 ? _a : 0),
                   [isHorizontal ? 'x' : 'y']: position
               });
           }
@@ -27161,16 +27247,14 @@
       _updateHandlerText(handlerText, position, value) {
           var _a;
           const isHorizontal = this._isHorizontal;
-          const { handlerText: handlerTextAttr } = this.attribute;
+          const { handlerText: handlerTextAttr = {} } = this.attribute;
           handlerText.setAttributes({
               [isHorizontal ? 'x' : 'y']: position,
-              text: (handlerTextAttr === null || handlerTextAttr === void 0 ? void 0 : handlerTextAttr.formatter)
-                  ? handlerTextAttr.formatter(value)
-                  : value.toFixed((_a = handlerTextAttr === null || handlerTextAttr === void 0 ? void 0 : handlerTextAttr.precision) !== null && _a !== void 0 ? _a : 0)
+              text: handlerTextAttr.formatter ? handlerTextAttr.formatter(value) : value.toFixed((_a = handlerTextAttr.precision) !== null && _a !== void 0 ? _a : 0)
           });
           const updateHandler = handlerText.name === exports.SLIDER_ELEMENT_NAME.startHandlerText ? this._startHandler : this._endHandler;
           if (updateHandler) {
-              updateHandler === null || updateHandler === void 0 ? void 0 : updateHandler.setAttributes({
+              updateHandler.setAttributes({
                   [isHorizontal ? 'x' : 'y']: position
               });
           }
@@ -27594,46 +27678,46 @@
           this.name = 'title';
       }
       render() {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55;
-          const { textType, text, subtextType, textStyle, subtext, subtextStyle, width, height, minWidth, maxWidth, minHeight, maxHeight, align, verticalAlign, padding = 0 } = this.attribute;
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
+          const { textType, text, subtextType, textStyle = {}, subtext, subtextStyle = {}, width, height, minWidth, maxWidth, minHeight, maxHeight, align, verticalAlign, padding = 0 } = this.attribute;
           const parsedPadding = vutils.normalizePadding(padding);
           const group = this.createOrUpdateChild('title-container', { x: parsedPadding[3], y: parsedPadding[0], zIndex: 1 }, 'group');
-          if (((_a = this.attribute) === null || _a === void 0 ? void 0 : _a.visible) !== false && (textStyle === null || textStyle === void 0 ? void 0 : textStyle.visible) !== false) {
+          if (this.attribute.visible !== false && textStyle.visible !== false) {
               if (textType === 'rich' || vutils.isValid(textStyle.character)) {
-                  const attr = Object.assign({ x: (_b = textStyle.x) !== null && _b !== void 0 ? _b : 0, y: (_c = textStyle.y) !== null && _c !== void 0 ? _c : 0, width: (_e = (_d = textStyle.width) !== null && _d !== void 0 ? _d : width) !== null && _e !== void 0 ? _e : 0, height: (_g = (_f = textStyle.height) !== null && _f !== void 0 ? _f : height) !== null && _g !== void 0 ? _g : 0, ellipsis: (_h = textStyle.ellipsis) !== null && _h !== void 0 ? _h : true, wordBreak: (_j = textStyle.wordBreak) !== null && _j !== void 0 ? _j : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: (_k = textStyle.character) !== null && _k !== void 0 ? _k : text }, textStyle);
+                  const attr = Object.assign({ x: (_a = textStyle.x) !== null && _a !== void 0 ? _a : 0, y: (_b = textStyle.y) !== null && _b !== void 0 ? _b : 0, width: (_d = (_c = textStyle.width) !== null && _c !== void 0 ? _c : width) !== null && _d !== void 0 ? _d : 0, height: (_f = (_e = textStyle.height) !== null && _e !== void 0 ? _e : height) !== null && _f !== void 0 ? _f : 0, ellipsis: (_g = textStyle.ellipsis) !== null && _g !== void 0 ? _g : true, wordBreak: (_h = textStyle.wordBreak) !== null && _h !== void 0 ? _h : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: (_j = textStyle.character) !== null && _j !== void 0 ? _j : text }, textStyle);
                   this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
               }
               else if (textType === 'html') {
-                  const attr = Object.assign({ html: Object.assign(Object.assign({ dom: text }, DEFAULT_HTML_TEXT_SPEC), textStyle), x: (_l = textStyle.x) !== null && _l !== void 0 ? _l : 0, y: (_m = textStyle.y) !== null && _m !== void 0 ? _m : 0, width: (_p = (_o = textStyle.width) !== null && _o !== void 0 ? _o : width) !== null && _p !== void 0 ? _p : 0, height: (_r = (_q = textStyle.height) !== null && _q !== void 0 ? _q : height) !== null && _r !== void 0 ? _r : 0, ellipsis: (_s = textStyle.ellipsis) !== null && _s !== void 0 ? _s : true, wordBreak: (_t = textStyle.wordBreak) !== null && _t !== void 0 ? _t : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: [] }, textStyle);
+                  const attr = Object.assign({ html: Object.assign(Object.assign({ dom: text }, DEFAULT_HTML_TEXT_SPEC), textStyle), x: (_k = textStyle.x) !== null && _k !== void 0 ? _k : 0, y: (_l = textStyle.y) !== null && _l !== void 0 ? _l : 0, width: (_o = (_m = textStyle.width) !== null && _m !== void 0 ? _m : width) !== null && _o !== void 0 ? _o : 0, height: (_q = (_p = textStyle.height) !== null && _p !== void 0 ? _p : height) !== null && _q !== void 0 ? _q : 0, ellipsis: (_r = textStyle.ellipsis) !== null && _r !== void 0 ? _r : true, wordBreak: (_s = textStyle.wordBreak) !== null && _s !== void 0 ? _s : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: [] }, textStyle);
                   this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
               }
               else if (vutils.isValid(text)) {
-                  this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: [text] }, textStyle), { maxLineWidth: (_u = textStyle === null || textStyle === void 0 ? void 0 : textStyle.maxLineWidth) !== null && _u !== void 0 ? _u : width, heightLimit: textStyle === null || textStyle === void 0 ? void 0 : textStyle.heightLimit, lineClamp: textStyle === null || textStyle === void 0 ? void 0 : textStyle.lineClamp, ellipsis: (_v = textStyle === null || textStyle === void 0 ? void 0 : textStyle.ellipsis) !== null && _v !== void 0 ? _v : true, x: 0, y: 0 }), 'wrapText');
+                  this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: [text] }, textStyle), { maxLineWidth: (_t = textStyle.maxLineWidth) !== null && _t !== void 0 ? _t : width, heightLimit: textStyle.heightLimit, lineClamp: textStyle.lineClamp, ellipsis: (_u = textStyle.ellipsis) !== null && _u !== void 0 ? _u : true, x: 0, y: 0 }), 'wrapText');
               }
           }
-          const maintextHeight = this._mainTitle ? (_w = this._mainTitle) === null || _w === void 0 ? void 0 : _w.AABBBounds.height() : 0;
-          const maintextWidth = this._mainTitle ? (_x = this._mainTitle) === null || _x === void 0 ? void 0 : _x.AABBBounds.width() : 0;
-          if (((_y = this.attribute) === null || _y === void 0 ? void 0 : _y.visible) !== false && (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.visible) !== false) {
+          const maintextHeight = this._mainTitle ? this._mainTitle.AABBBounds.height() : 0;
+          const maintextWidth = this._mainTitle ? this._mainTitle.AABBBounds.width() : 0;
+          if (this.attribute.visible !== false && subtextStyle.visible !== false) {
               if (subtextType === 'rich' || vutils.isValid(subtextStyle.character)) {
-                  const attr = Object.assign({ x: (_z = subtextStyle.x) !== null && _z !== void 0 ? _z : 0, y: (_0 = subtextStyle.y) !== null && _0 !== void 0 ? _0 : 0, width: (_2 = (_1 = subtextStyle.width) !== null && _1 !== void 0 ? _1 : width) !== null && _2 !== void 0 ? _2 : 0, height: (_4 = (_3 = subtextStyle.height) !== null && _3 !== void 0 ? _3 : height) !== null && _4 !== void 0 ? _4 : 0, ellipsis: (_5 = subtextStyle.ellipsis) !== null && _5 !== void 0 ? _5 : true, wordBreak: (_6 = subtextStyle.wordBreak) !== null && _6 !== void 0 ? _6 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: (_7 = subtextStyle.character) !== null && _7 !== void 0 ? _7 : subtext }, subtextStyle);
+                  const attr = Object.assign({ x: (_v = subtextStyle.x) !== null && _v !== void 0 ? _v : 0, y: (_w = subtextStyle.y) !== null && _w !== void 0 ? _w : 0, width: (_y = (_x = subtextStyle.width) !== null && _x !== void 0 ? _x : width) !== null && _y !== void 0 ? _y : 0, height: (_0 = (_z = subtextStyle.height) !== null && _z !== void 0 ? _z : height) !== null && _0 !== void 0 ? _0 : 0, ellipsis: (_1 = subtextStyle.ellipsis) !== null && _1 !== void 0 ? _1 : true, wordBreak: (_2 = subtextStyle.wordBreak) !== null && _2 !== void 0 ? _2 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: (_3 = subtextStyle.character) !== null && _3 !== void 0 ? _3 : subtext }, subtextStyle);
                   this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
               }
               else if (subtextType === 'html') {
-                  const attr = Object.assign({ html: Object.assign(Object.assign({ dom: subtext }, DEFAULT_HTML_TEXT_SPEC), subtextStyle), x: (_8 = subtextStyle.x) !== null && _8 !== void 0 ? _8 : 0, y: (_9 = subtextStyle.y) !== null && _9 !== void 0 ? _9 : 0, width: (_11 = (_10 = subtextStyle.width) !== null && _10 !== void 0 ? _10 : width) !== null && _11 !== void 0 ? _11 : 0, height: (_13 = (_12 = subtextStyle.height) !== null && _12 !== void 0 ? _12 : height) !== null && _13 !== void 0 ? _13 : 0, ellipsis: (_14 = subtextStyle.ellipsis) !== null && _14 !== void 0 ? _14 : true, wordBreak: (_15 = subtextStyle.wordBreak) !== null && _15 !== void 0 ? _15 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: [] }, subtextStyle);
+                  const attr = Object.assign({ html: Object.assign(Object.assign({ dom: subtext }, DEFAULT_HTML_TEXT_SPEC), subtextStyle), x: (_4 = subtextStyle.x) !== null && _4 !== void 0 ? _4 : 0, y: (_5 = subtextStyle.y) !== null && _5 !== void 0 ? _5 : 0, width: (_7 = (_6 = subtextStyle.width) !== null && _6 !== void 0 ? _6 : width) !== null && _7 !== void 0 ? _7 : 0, height: (_9 = (_8 = subtextStyle.height) !== null && _8 !== void 0 ? _8 : height) !== null && _9 !== void 0 ? _9 : 0, ellipsis: (_10 = subtextStyle.ellipsis) !== null && _10 !== void 0 ? _10 : true, wordBreak: (_11 = subtextStyle.wordBreak) !== null && _11 !== void 0 ? _11 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: [] }, subtextStyle);
                   this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
               }
               else if (vutils.isValid(subtext)) {
-                  this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: [subtext] }, subtextStyle), { maxLineWidth: (_16 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.maxLineWidth) !== null && _16 !== void 0 ? _16 : width, heightLimit: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.heightLimit, lineClamp: subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.lineClamp, ellipsis: (_17 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.ellipsis) !== null && _17 !== void 0 ? _17 : true, x: 0, y: maintextHeight }), 'wrapText');
+                  this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: [subtext] }, subtextStyle), { maxLineWidth: (_12 = subtextStyle.maxLineWidth) !== null && _12 !== void 0 ? _12 : width, heightLimit: subtextStyle.heightLimit, lineClamp: subtextStyle.lineClamp, ellipsis: (_13 = subtextStyle.ellipsis) !== null && _13 !== void 0 ? _13 : true, x: 0, y: maintextHeight }), 'wrapText');
               }
           }
-          const subtextHeight = this._subTitle ? (_18 = this._subTitle) === null || _18 === void 0 ? void 0 : _18.AABBBounds.height() : 0;
-          const subtextWidth = this._subTitle ? (_19 = this._subTitle) === null || _19 === void 0 ? void 0 : _19.AABBBounds.width() : 0;
+          const subtextHeight = this._subTitle ? this._subTitle.AABBBounds.height() : 0;
+          const subtextWidth = this._subTitle ? this._subTitle.AABBBounds.width() : 0;
           let titleWidth = Math.max(maintextWidth, subtextWidth);
-          let titleHeight = maintextHeight + ((_20 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _20 !== void 0 ? _20 : subtextHeight);
+          let titleHeight = maintextHeight + ((_14 = subtextStyle.height) !== null && _14 !== void 0 ? _14 : subtextHeight);
           if (vutils.isValid(width)) {
               titleWidth = width;
-              (_21 = this._mainTitle) === null || _21 === void 0 ? void 0 : _21.setAttribute('maxLineWidth', width);
-              (_22 = this._subTitle) === null || _22 === void 0 ? void 0 : _22.setAttribute('maxLineWidth', width);
+              this._mainTitle && this._mainTitle.setAttribute('maxLineWidth', width);
+              this._subTitle && this._subTitle.setAttribute('maxLineWidth', width);
           }
           if (vutils.isValid(height)) {
               titleHeight = height;
@@ -27642,10 +27726,10 @@
               titleWidth = minWidth;
           }
           if (vutils.isValid(maxWidth)) {
-              (_23 = this._mainTitle) === null || _23 === void 0 ? void 0 : _23.setAttribute('maxLineWidth', maxWidth);
-              (_24 = this._subTitle) === null || _24 === void 0 ? void 0 : _24.setAttribute('maxLineWidth', maxWidth);
-              (_25 = this._mainTitle) === null || _25 === void 0 ? void 0 : _25.setAttribute('maxWidth', maxWidth);
-              (_26 = this._subTitle) === null || _26 === void 0 ? void 0 : _26.setAttribute('maxWidth', maxWidth);
+              this._mainTitle && this._mainTitle.setAttribute('maxLineWidth', maxWidth);
+              this._subTitle && this._subTitle.setAttribute('maxLineWidth', maxWidth);
+              this._mainTitle && this._mainTitle.setAttribute('maxWidth', maxWidth);
+              this._subTitle && this._subTitle.setAttribute('maxWidth', maxWidth);
               if (titleWidth > maxWidth) {
                   titleWidth = maxWidth;
               }
@@ -27654,8 +27738,8 @@
               titleHeight = minHeight;
           }
           if (vutils.isValid(maxHeight)) {
-              (_27 = this._mainTitle) === null || _27 === void 0 ? void 0 : _27.setAttribute('maxHeight', maxHeight);
-              (_28 = this._subTitle) === null || _28 === void 0 ? void 0 : _28.setAttribute('maxHeight', maxHeight - maintextHeight);
+              this._mainTitle && this._mainTitle.setAttribute('maxHeight', maxHeight);
+              this._subTitle && this._subTitle.setAttribute('maxHeight', maxHeight - maintextHeight);
               if (titleHeight > maxHeight) {
                   titleHeight = maxHeight;
               }
@@ -27663,69 +27747,73 @@
           group.attribute.width = titleWidth;
           group.attribute.height = titleHeight;
           group.attribute.boundsPadding = parsedPadding;
-          if (vutils.isValid(align) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.align)) {
-              const mainTitleAlign = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.align) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.align : align;
-              const mainTitleWidth = (_29 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.width) !== null && _29 !== void 0 ? _29 : maintextWidth;
-              if (mainTitleAlign === 'left') {
-                  (_30 = this._mainTitle) === null || _30 === void 0 ? void 0 : _30.setAttribute('x', 0);
-                  (_31 = this._mainTitle) === null || _31 === void 0 ? void 0 : _31.setAttribute('textAlign', 'left');
-              }
-              else if (mainTitleAlign === 'center') {
-                  (_32 = this._mainTitle) === null || _32 === void 0 ? void 0 : _32.setAttribute('x', mainTitleWidth / 2);
-                  (_33 = this._mainTitle) === null || _33 === void 0 ? void 0 : _33.setAttribute('textAlign', 'center');
-              }
-              else if (mainTitleAlign === 'right') {
-                  (_34 = this._mainTitle) === null || _34 === void 0 ? void 0 : _34.setAttribute('x', mainTitleWidth);
-                  (_35 = this._mainTitle) === null || _35 === void 0 ? void 0 : _35.setAttribute('textAlign', 'right');
-              }
-          }
-          if (vutils.isValid(verticalAlign) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign)) {
-              const mainTitleVerticalAlign = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign : verticalAlign;
-              const mainTitleHeight = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.height) ? textStyle === null || textStyle === void 0 ? void 0 : textStyle.height : titleHeight;
-              if (mainTitleVerticalAlign === 'top') {
-                  (_36 = this._mainTitle) === null || _36 === void 0 ? void 0 : _36.setAttribute('y', 0);
-                  (_37 = this._mainTitle) === null || _37 === void 0 ? void 0 : _37.setAttribute('textBaseline', 'top');
-              }
-              else if (mainTitleVerticalAlign === 'middle') {
-                  (_38 = this._mainTitle) === null || _38 === void 0 ? void 0 : _38.setAttribute('y', mainTitleHeight / 2);
-                  (_39 = this._mainTitle) === null || _39 === void 0 ? void 0 : _39.setAttribute('textBaseline', 'middle');
-              }
-              else if (mainTitleVerticalAlign === 'bottom') {
-                  (_40 = this._mainTitle) === null || _40 === void 0 ? void 0 : _40.setAttribute('y', mainTitleHeight);
-                  (_41 = this._mainTitle) === null || _41 === void 0 ? void 0 : _41.setAttribute('textBaseline', 'bottom');
-              }
-          }
-          if (vutils.isValid(align) || vutils.isValid(subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.align)) {
-              const subTitleAlign = (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.align) ? subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.align : align;
-              const subTitleWidth = (_42 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.width) !== null && _42 !== void 0 ? _42 : subtextWidth;
-              if (subTitleAlign === 'left') {
-                  (_43 = this._subTitle) === null || _43 === void 0 ? void 0 : _43.setAttribute('x', 0);
-                  (_44 = this._subTitle) === null || _44 === void 0 ? void 0 : _44.setAttribute('textAlign', 'left');
-              }
-              else if (subTitleAlign === 'center') {
-                  (_45 = this._subTitle) === null || _45 === void 0 ? void 0 : _45.setAttribute('x', subTitleWidth / 2);
-                  (_46 = this._subTitle) === null || _46 === void 0 ? void 0 : _46.setAttribute('textAlign', 'center');
+          if (this._mainTitle) {
+              if (vutils.isValid(align) || vutils.isValid(textStyle.align)) {
+                  const mainTitleAlign = textStyle.align ? textStyle.align : align;
+                  const mainTitleWidth = (_15 = textStyle.width) !== null && _15 !== void 0 ? _15 : maintextWidth;
+                  if (mainTitleAlign === 'left') {
+                      this._mainTitle.setAttribute('x', 0);
+                      this._mainTitle.setAttribute('textAlign', 'left');
+                  }
+                  else if (mainTitleAlign === 'center') {
+                      this._mainTitle.setAttribute('x', mainTitleWidth / 2);
+                      this._mainTitle.setAttribute('textAlign', 'center');
+                  }
+                  else if (mainTitleAlign === 'right') {
+                      this._mainTitle.setAttribute('x', mainTitleWidth);
+                      this._mainTitle.setAttribute('textAlign', 'right');
+                  }
               }
-              else if (subTitleAlign === 'right') {
-                  (_47 = this._subTitle) === null || _47 === void 0 ? void 0 : _47.setAttribute('x', subTitleWidth);
-                  (_48 = this._subTitle) === null || _48 === void 0 ? void 0 : _48.setAttribute('textAlign', 'right');
+              if (vutils.isValid(verticalAlign) || vutils.isValid(textStyle.verticalAlign)) {
+                  const mainTitleVerticalAlign = textStyle.verticalAlign ? textStyle.verticalAlign : verticalAlign;
+                  const mainTitleHeight = textStyle.height ? textStyle.height : titleHeight;
+                  if (mainTitleVerticalAlign === 'top') {
+                      this._mainTitle.setAttribute('y', 0);
+                      this._mainTitle.setAttribute('textBaseline', 'top');
+                  }
+                  else if (mainTitleVerticalAlign === 'middle') {
+                      this._mainTitle.setAttribute('y', mainTitleHeight / 2);
+                      this._mainTitle.setAttribute('textBaseline', 'middle');
+                  }
+                  else if (mainTitleVerticalAlign === 'bottom') {
+                      this._mainTitle.setAttribute('y', mainTitleHeight);
+                      this._mainTitle.setAttribute('textBaseline', 'bottom');
+                  }
               }
           }
-          if (vutils.isValid(verticalAlign) || vutils.isValid(textStyle === null || textStyle === void 0 ? void 0 : textStyle.verticalAlign)) {
-              const subTitleVerticalAlign = (subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.verticalAlign) ? subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.verticalAlign : verticalAlign;
-              const subTitleYStart = maintextHeight;
-              const subTitleHeight = (_49 = subtextStyle === null || subtextStyle === void 0 ? void 0 : subtextStyle.height) !== null && _49 !== void 0 ? _49 : 0;
-              if (subTitleVerticalAlign === 'top') {
-                  (_50 = this._subTitle) === null || _50 === void 0 ? void 0 : _50.setAttribute('y', subTitleYStart);
-                  (_51 = this._subTitle) === null || _51 === void 0 ? void 0 : _51.setAttribute('textBaseline', 'top');
-              }
-              else if (subTitleVerticalAlign === 'middle') {
-                  (_52 = this._subTitle) === null || _52 === void 0 ? void 0 : _52.setAttribute('y', subTitleYStart + subTitleHeight / 2);
-                  (_53 = this._subTitle) === null || _53 === void 0 ? void 0 : _53.setAttribute('textBaseline', 'middle');
+          if (this._subTitle) {
+              if (vutils.isValid(align) || vutils.isValid(subtextStyle.align)) {
+                  const subTitleAlign = subtextStyle.align ? subtextStyle.align : align;
+                  const subTitleWidth = (_16 = subtextStyle.width) !== null && _16 !== void 0 ? _16 : subtextWidth;
+                  if (subTitleAlign === 'left') {
+                      this._subTitle.setAttribute('x', 0);
+                      this._subTitle.setAttribute('textAlign', 'left');
+                  }
+                  else if (subTitleAlign === 'center') {
+                      this._subTitle.setAttribute('x', subTitleWidth / 2);
+                      this._subTitle.setAttribute('textAlign', 'center');
+                  }
+                  else if (subTitleAlign === 'right') {
+                      this._subTitle.setAttribute('x', subTitleWidth);
+                      this._subTitle.setAttribute('textAlign', 'right');
+                  }
               }
-              else if (subTitleVerticalAlign === 'bottom') {
-                  (_54 = this._subTitle) === null || _54 === void 0 ? void 0 : _54.setAttribute('y', subTitleYStart + subTitleHeight);
-                  (_55 = this._subTitle) === null || _55 === void 0 ? void 0 : _55.setAttribute('textBaseline', 'bottom');
+              if (vutils.isValid(verticalAlign) || vutils.isValid(textStyle.verticalAlign)) {
+                  const subTitleVerticalAlign = subtextStyle.verticalAlign ? subtextStyle.verticalAlign : verticalAlign;
+                  const subTitleYStart = maintextHeight;
+                  const subTitleHeight = (_17 = subtextStyle.height) !== null && _17 !== void 0 ? _17 : 0;
+                  if (subTitleVerticalAlign === 'top') {
+                      this._subTitle.setAttribute('y', subTitleYStart);
+                      this._subTitle.setAttribute('textBaseline', 'top');
+                  }
+                  else if (subTitleVerticalAlign === 'middle') {
+                      this._subTitle.setAttribute('y', subTitleYStart + subTitleHeight / 2);
+                      this._subTitle.setAttribute('textBaseline', 'middle');
+                  }
+                  else if (subTitleVerticalAlign === 'bottom') {
+                      this._subTitle.setAttribute('y', subTitleYStart + subTitleHeight);
+                      this._subTitle.setAttribute('textBaseline', 'bottom');
+                  }
               }
           }
       }
@@ -27788,7 +27876,7 @@
       }
       render() {
           var _a, _b, _c;
-          const { visible, title, content, size, limitRatio = Infinity } = this.attribute;
+          const { visible, title = {}, content, size, limitRatio = Infinity } = this.attribute;
           const limit = Math.min(size.width, size.height) * limitRatio;
           const group = this.createOrUpdateChild('indicator-container', { x: 0, y: 0, zIndex: 1 }, 'group');
           if (visible !== true) {
@@ -27822,7 +27910,7 @@
           }
           const titleHeight = this._title ? this._title.AABBBounds.height() : 0;
           if (vutils.isValid(content)) {
-              const titleSpace = this._title ? ((title === null || title === void 0 ? void 0 : title.space) ? title.space : 0) : 0;
+              const titleSpace = this._title ? (title.space ? title.space : 0) : 0;
               const contents = vutils.array(content);
               const contentComponents = [];
               let lastContentHeight = 0;
@@ -27847,7 +27935,7 @@
                           contentComponent.setAttribute('maxLineWidth', limit);
                       }
                       contentComponents.push(contentComponent);
-                      const contentSpace = (contentItem === null || contentItem === void 0 ? void 0 : contentItem.space) ? contentItem.space : 0;
+                      const contentSpace = contentItem.space ? contentItem.space : 0;
                       lastContentHeight += contentComponent.AABBBounds.height() + contentSpace;
                   }
                   else {
@@ -28066,15 +28154,15 @@
               this.updateLayout();
           };
           this.updateLayout = () => {
-              var _a, _b, _c, _d, _e, _f, _g, _h;
+              var _a, _b, _c, _d;
               this._layout = this.attribute.layout;
               if (this._layout === 'horizontal') {
-                  this._backwardAttr.style.symbolType = (_b = (_a = this._backwardAttr.style) === null || _a === void 0 ? void 0 : _a.symbolType) !== null && _b !== void 0 ? _b : iconLeft;
-                  this._forwardAttr.style.symbolType = (_d = (_c = this._forwardAttr.style) === null || _c === void 0 ? void 0 : _c.symbolType) !== null && _d !== void 0 ? _d : iconRight;
+                  this._backwardAttr.style.symbolType = (_a = this._backwardAttr.style.symbolType) !== null && _a !== void 0 ? _a : iconLeft;
+                  this._forwardAttr.style.symbolType = (_b = this._forwardAttr.style.symbolType) !== null && _b !== void 0 ? _b : iconRight;
               }
               else if (this._layout === 'vertical') {
-                  this._backwardAttr.style.symbolType = (_f = (_e = this._backwardAttr.style) === null || _e === void 0 ? void 0 : _e.symbolType) !== null && _f !== void 0 ? _f : iconUp;
-                  this._forwardAttr.style.symbolType = (_h = (_g = this._forwardAttr.style) === null || _g === void 0 ? void 0 : _g.symbolType) !== null && _h !== void 0 ? _h : iconDown;
+                  this._backwardAttr.style.symbolType = (_c = this._backwardAttr.style.symbolType) !== null && _c !== void 0 ? _c : iconUp;
+                  this._forwardAttr.style.symbolType = (_d = this._forwardAttr.style.symbolType) !== null && _d !== void 0 ? _d : iconDown;
               }
           };
           this._initPlay = () => {
@@ -28353,21 +28441,21 @@
           this._initSlider();
       }
       _initAttributes() {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
           this._size = this.attribute.size;
           this._orient = this.attribute.orient;
           this._data = this.attribute.data;
           this._minIndex = 0;
           this._maxIndex = this._data.length - 1;
-          this._sliderVisible = (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.slider) === null || _b === void 0 ? void 0 : _b.visible;
-          this._railStyle = Object.assign({}, (_d = (_c = this.attribute) === null || _c === void 0 ? void 0 : _c.slider) === null || _d === void 0 ? void 0 : _d.railStyle);
-          this._trackStyle = Object.assign({}, (_f = (_e = this.attribute) === null || _e === void 0 ? void 0 : _e.slider) === null || _f === void 0 ? void 0 : _f.trackStyle);
-          this._handlerStyle = Object.assign({}, (_h = (_g = this.attribute) === null || _g === void 0 ? void 0 : _g.slider) === null || _h === void 0 ? void 0 : _h.handlerStyle);
-          this._controllerVisible = (_k = (_j = this.attribute) === null || _j === void 0 ? void 0 : _j.controller) === null || _k === void 0 ? void 0 : _k.visible;
-          this._start = Object.assign({}, (_m = (_l = this.attribute) === null || _l === void 0 ? void 0 : _l.controller) === null || _m === void 0 ? void 0 : _m.start);
-          this._pause = Object.assign({}, (_p = (_o = this.attribute) === null || _o === void 0 ? void 0 : _o.controller) === null || _p === void 0 ? void 0 : _p.pause);
-          this._forward = Object.assign({}, (_r = (_q = this.attribute) === null || _q === void 0 ? void 0 : _q.controller) === null || _r === void 0 ? void 0 : _r.forward);
-          this._backward = Object.assign({}, (_t = (_s = this.attribute) === null || _s === void 0 ? void 0 : _s.controller) === null || _t === void 0 ? void 0 : _t.backward);
+          const { slider = {}, controller = {} } = this.attribute;
+          this._sliderVisible = slider.visible;
+          this._railStyle = Object.assign({}, slider.railStyle);
+          this._trackStyle = Object.assign({}, slider.trackStyle);
+          this._handlerStyle = Object.assign({}, slider.handlerStyle);
+          this._controllerVisible = controller.visible;
+          this._start = Object.assign({}, controller.start);
+          this._pause = Object.assign({}, controller.pause);
+          this._forward = Object.assign({}, controller.forward);
+          this._backward = Object.assign({}, controller.backward);
       }
       _initLayoutInfo() {
           var _a, _b, _c;
@@ -28828,12 +28916,12 @@
           this._operatingMaskMoveRangeY = [-Infinity, Infinity];
           this._brushMaskAABBBoundsDict = {};
           this._onBrushStart = (e) => {
-              var _a, _b;
+              var _a;
               if (this._outOfInteractiveRange(e)) {
                   return;
               }
               e.stopPropagation();
-              const brushMoved = (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.brushMoved) !== null && _b !== void 0 ? _b : true;
+              const brushMoved = (_a = this.attribute.brushMoved) !== null && _a !== void 0 ? _a : true;
               this._activeMoveState = brushMoved && this._isPosInBrushMask(e);
               this._activeDrawState = !this._activeMoveState;
               this._activeDrawState && this._initDraw(e);
@@ -28848,7 +28936,6 @@
               this._activeMoveState && this._moving(e);
           };
           this._onBrushEnd = (e) => {
-              var _a;
               e.preventDefault();
               const { removeOnClick = true } = this.attribute;
               if (this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick) {
@@ -28879,7 +28966,9 @@
               this._activeDrawState = false;
               this._activeMoveState = false;
               this._isDrawedBeforeEnd = false;
-              (_a = this._operatingMask) === null || _a === void 0 ? void 0 : _a.setAttribute('pickable', false);
+              if (this._operatingMask) {
+                  this._operatingMask.setAttribute('pickable', false);
+              }
           };
       }
       _bindBrushEvents() {
@@ -28948,15 +29037,15 @@
           });
       }
       _drawing(e) {
-          var _a;
+          var _a, _b;
           const pos = this.eventPosToStagePos(e);
           const { x1 = 0, x2 = 0, y1 = 0, y2 = 0 } = (_a = this._operatingMask) === null || _a === void 0 ? void 0 : _a._AABBBounds;
           const { sizeThreshold = DEFAULT_SIZE_THRESHOLD, brushType } = this.attribute;
           const cacheLength = this._cacheDrawPoints.length;
           this._isDrawedBeforeEnd = !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold);
           if (cacheLength > 0) {
-              const lastPos = this._cacheDrawPoints[this._cacheDrawPoints.length - 1];
-              if (pos.x === (lastPos === null || lastPos === void 0 ? void 0 : lastPos.x) && pos.y === (lastPos === null || lastPos === void 0 ? void 0 : lastPos.y)) {
+              const lastPos = (_b = this._cacheDrawPoints[this._cacheDrawPoints.length - 1]) !== null && _b !== void 0 ? _b : {};
+              if (pos.x === lastPos.x && pos.y === lastPos.y) {
                   return;
               }
           }
@@ -29291,7 +29380,7 @@
           const titleHeight = isVisible(titleAttr) ? titleAttr.height + titleAttr.spaceRow : 0;
           this._tooltipContent = this.createOrUpdateChild(TOOLTIP_CONTENT_NAME, { visible: true }, 'group');
           this._tooltipContent.removeAllChild();
-          if (content === null || content === void 0 ? void 0 : content.length) {
+          if (content && content.length) {
               this._tooltipContent.setAttribute('x', padding[3]);
               this._tooltipContent.setAttribute('y', padding[0] + titleHeight);
               let lastYPos = 0;
@@ -29474,7 +29563,7 @@
           if (isVisible(titleAttr)) {
               containerHeight += titleMaxHeight + titleAttr.spaceRow;
           }
-          if (content === null || content === void 0 ? void 0 : content.length) {
+          if (content && content.length) {
               const filteredContent = [];
               content.forEach((item, i) => {
                   const itemAttr = Tooltip.getContentAttr(attribute, i);
@@ -29720,7 +29809,7 @@
       }
   };
 
-  const version = "0.17.7";
+  const version = "0.17.8";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;