@visactor/react-vchart 2.0.14-alpha.1 → 2.0.14

package/build/index.js

@@ -25145,7 +25145,7 @@
         return !!this._inuse;
       }
       set inuse(use) {
-        use !== !!this._inuse && (this._inuse = use, use ? (this.nativeContext.save(), this.reset()) : this.nativeContext.restore());
+        use !== !!this._inuse && (this._inuse = use, use ? (this.nativeContext.save(), this.reset()) : (this.nativeContext.restore(), this._font = ""));
       }
       constructor(canvas, dpr) {
         this.fillAttributes = Object.assign(Object.assign({}, DefaultFillStyle), {
@@ -27530,14 +27530,20 @@
               x: x,
               y: y
             } = this.stage.eventPointTransform(e);
-          let currentScrollValue,
-            currentPos,
+          let currentPos,
+            currentScrollValue = 0,
             delta = 0;
           const {
-            width: width,
-            height: height
-          } = this.getSliderRenderBounds();
-          return "vertical" === direction ? (currentPos = y, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = x, delta = currentPos - this._prePos, currentScrollValue = delta / width), [currentPos, currentScrollValue];
+              width: width,
+              height: height
+            } = this.getSliderRenderBounds(),
+            track = "vertical" === direction ? height : width,
+            travel = Math.max(track - this._sliderSize, 0),
+            {
+              range: range
+            } = this.attribute,
+            ratio = clamp$1(range[1] - range[0], 0, 1);
+          return "vertical" === direction ? (currentPos = y, delta = currentPos - this._prePos) : (currentPos = x, delta = currentPos - this._prePos), currentScrollValue = travel > 0 && ratio < 1 ? delta / travel * (1 - ratio) : 0, [currentPos, currentScrollValue];
         }, this._onSliderPointerMove = e => {
           const {
             stopSliderMovePropagation = !0
@@ -27681,15 +27687,24 @@
       }
       _getSliderPos(range) {
         const {
-            direction: direction
+            direction: direction,
+            minSliderSize = 0
           } = this.attribute,
           {
             width: width,
             height: height,
             x1: x1,
             y1: y1
-          } = this.getSliderRenderBounds();
-        return "horizontal" === direction ? [width * range[0] + x1, width * range[1] + x1] : [height * range[0] + y1, height * range[1] + y1];
+          } = this.getSliderRenderBounds(),
+          track = "horizontal" === direction ? width : height,
+          origin = "horizontal" === direction ? x1 : y1,
+          start = clamp$1(range[0], 0, 1),
+          end = clamp$1(range[1], 0, 1),
+          ratio = clamp$1(end - start, 0, 1),
+          L = Math.max(ratio * track, minSliderSize),
+          T = Math.max(track - L, 0),
+          pStart = origin + start / Math.max(1 - ratio, 1e-12) * T;
+        return [pStart, pStart + L];
       }
       _getScrollRange() {
         if (this._sliderLimitRange) return this._sliderLimitRange;
@@ -27729,6 +27744,7 @@
       direction: "horizontal",
       round: !0,
       sliderSize: 20,
+      minSliderSize: 0,
       sliderStyle: {
         fill: "rgba(0, 0, 0, .5)"
       },
@@ -31688,7 +31704,7 @@
     }
     class AStageAnimate extends ACustomAnimate {
       constructor(customFrom, customTo, duration, easing, params) {
-        super(customFrom, customTo, duration, easing, params), this.willCallBeforeStageRender = !0, this.willCallAfterStageRender = !0, this._beforeStageRender = () => {
+        super(customFrom, customTo, duration, easing, params), this.willCallBeforeStageRender = !0, this.willCallAfterStageRender = !0, this.checkStatusAfterRender = !0, this._beforeStageRender = () => {
           if (!this.willCallBeforeStageRender) return;
           this.willCallBeforeStageRender = !1;
           const stage = this.target.stage,
@@ -31701,7 +31717,7 @@
           const stage = this.target.stage,
             canvas = stage.window.getContext().canvas.nativeCanvas,
             outputCanvas = this.afterStageRender(stage, canvas);
-          outputCanvas && this.renderToStage(stage, outputCanvas);
+          outputCanvas && this.renderToStage(stage, outputCanvas), this.checkStatusAfterRender && this.animate.status === AnimateStatus.END && this.animate.timeline.removeAnimate(this.animate);
         }, this.props = {};
       }
       beforeStageRender(stage, canvas) {
@@ -44442,6 +44458,8 @@
     let Brush$2 = class Brush extends AbstractComponent {
       constructor(attributes, options) {
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeBrushState = !1, this._activeDrawState = !1, this._cacheDrawPoints = [], this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._firstUpdate = !0, this._onBrushStart = e => {
+          if (!1 === this.attribute.interactive) return;
+          if (!1 === this._beforeBrushEvent(e)) return;
           const {
             updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
             endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
@@ -44449,11 +44467,11 @@
           } = this.attribute;
           array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd)), e.stopPropagation(), this._firstUpdate = !0, this._activeMoveState = brushMoved && this._isPosInBrushMask(e), this._activeDrawState = !this._activeMoveState, this._startPos = this.eventPosToStagePos(e), this._cacheDrawPoints = [this._startPos];
         }, this._onBrushing = e => {
-          this._outOfInteractiveRange(e) || (e.stopPropagation(), this._firstUpdate ? (this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e), this._firstUpdate = !1) : (this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e)));
+          !1 !== this.attribute.interactive && !1 !== this._beforeBrushEvent(e) && (this._outOfInteractiveRange(e) || (e.stopPropagation(), this._firstUpdate ? (this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e), this._firstUpdate = !1) : (this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e))));
         }, this._onBrushingWithDelay = 0 === this.attribute.delayTime ? this._onBrushing : delayMap$1[this.attribute.delayType](this._onBrushing, this.attribute.delayTime), this._onBrushEnd = e => {
-          this._releaseBrushUpdateEvents(), e.preventDefault(), this._activeDrawState && this._drawEnd(e), this._activeMoveState && this._moveEnd(e), this._activeDrawState = !1, this._activeMoveState = !1;
+          !1 !== this.attribute.interactive && (this._releaseBrushUpdateEvents(), e.preventDefault(), this._activeDrawState && this._drawEnd(e), this._activeMoveState && this._moveEnd(e), this._activeDrawState = !1, this._activeMoveState = !1);
         }, this._onBrushClear = e => {
-          e.preventDefault(), this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)), this._activeDrawState = !1, this._activeMoveState = !1;
+          !1 !== this.attribute.interactive && !1 !== this._beforeBrushEvent(e) && (e.preventDefault(), this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)), this._activeDrawState = !1, this._activeMoveState = !1);
         };
       }
       _bindBrushEvents() {
@@ -44465,6 +44483,7 @@
         array(trigger).forEach(t => this.stage.addEventListener(t, this._onBrushStart)), array(resetTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushClear));
       }
       _initDraw(e) {
+        if (!1 === this.attribute.interactive) return;
         const {
             brushMode: brushMode
           } = this.attribute,
@@ -44473,6 +44492,7 @@
       }
       _initMove(e) {
         var _a, _b;
+        if (!1 === this.attribute.interactive) return;
         this._cacheMovePoint = this.eventPosToStagePos(e), this._operatingMaskMoveDx = null !== (_a = this._operatingMask.attribute.dx) && void 0 !== _a ? _a : 0, this._operatingMaskMoveDy = null !== (_b = this._operatingMask.attribute.dy) && void 0 !== _b ? _b : 0;
         const {
             interactiveRange: interactiveRange
@@ -44497,6 +44517,7 @@
       }
       _drawing(e) {
         var _a;
+        if (!1 === this.attribute.interactive) return;
         const pos = this.eventPosToStagePos(e),
           {
             brushType: brushType,
@@ -44521,6 +44542,7 @@
         (Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold) && (1 !== Object.keys(this._brushMaskAABBBoundsDict).length || this._activeBrushState ? this._dispatchBrushEvent(IOperateType.drawing, e) : (this._activeBrushState = !0, this._dispatchBrushEvent(IOperateType.brushActive, e)));
       }
       _moving(e) {
+        if (!1 === this.attribute.interactive) return;
         const startPos = this._cacheMovePoint,
           pos = this.eventPosToStagePos(e);
         if (pos.x === (null == startPos ? void 0 : startPos.x) && pos.y === (null == startPos ? void 0 : startPos.y)) return;
@@ -44534,6 +44556,7 @@
         }), this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchBrushEvent(IOperateType.moving, e);
       }
       _drawEnd(e) {
+        if (!1 === this.attribute.interactive) return;
         const {
           removeOnClick = !0,
           sizeThreshold = DEFAULT_SIZE_THRESHOLD
@@ -44551,7 +44574,7 @@
         }
       }
       _moveEnd(e) {
-        this._operatingMask && this._operatingMask.setAttribute("pickable", !1), this._dispatchBrushEvent(IOperateType.moveEnd, e);
+        !1 !== this.attribute.interactive && (this._operatingMask && this._operatingMask.setAttribute("pickable", !1), this._dispatchBrushEvent(IOperateType.moveEnd, e));
       }
       render() {
         this._bindBrushEvents();
@@ -44658,6 +44681,10 @@
           pos = this.eventPosToStagePos(e);
         return pos.x > maxX || pos.x < minX || pos.y > maxY || pos.y < minY;
       }
+      _beforeBrushEvent(e) {
+        var _a, _b;
+        return null === (_b = (_a = this.attribute).beforeBrushChange) || void 0 === _b ? void 0 : _b.call(_a, e);
+      }
       _dispatchBrushEvent(operateType, e) {
         this._dispatchEvent(operateType, {
           operateMask: this._operatingMask,
@@ -46463,7 +46490,7 @@
           ComposedEventCtor = Factory.getComposedEvent(eType);
         if (ComposedEventCtor) {
           const composedEvent = new ComposedEventCtor(this._eventDispatcher, this._mode);
-          composedEvent.register(eType, handler), this._composedEventMap.set(callback, {
+          composedEvent.register(eType, handler), this._composedEventMap.set(handler.callback, {
             eventType: eType,
             event: composedEvent
           });
@@ -47068,6 +47095,9 @@
       getRootGroup() {
         return this._rootGroup;
       }
+      getOption() {
+        return this._option;
+      }
       constructor(container, option) {
         this._count = 0, this._rootMarks = [], this._viewListeners = new Map(), this._windowListeners = new Map(), this._canvasListeners = new Map(), this.isInited = !1, this._released = !1, this._compileChart = null, this.handleLayoutEnd = () => {
           var _a, _b;
@@ -50686,8 +50716,8 @@
           }) : "none" !== evt.type && this.options.event.off(evt.type, evt.handler));
         });
       }
-      start(g) {}
-      reset(g) {}
+      start(g, e) {}
+      reset(g, e) {}
       dispatchEvent(type, params) {
         this.options.event && (this.options.event.emit(`${this.type}:${type}`, params), "start" === type && this.options.onStart ? this.options.onStart(params) : "reset" === type && this.options.onReset ? this.options.onReset(params) : "update" === type && this.options.onUpdate ? this.options.onUpdate(params) : "end" === type && this.options.onEnd && this.options.onEnd(params));
       }
@@ -50701,18 +50731,18 @@
     };
     class ElementHighlight extends BaseTrigger {
       constructor(options) {
-        super(options), this.type = "element-highlight", this.resetAll = () => {
+        super(options), this.type = "element-highlight", this.resetAll = e => {
           const {
             highlightState: highlightState,
             blurState: blurState,
             interaction: interaction
           } = this.options;
-          this._lastGraphic && (interaction.clearAllStatesOfTrigger(this, highlightState, blurState), this.dispatchEvent("reset", {
+          this._lastGraphic && (interaction.clearAllStatesOfTrigger(this, highlightState, blurState), this.dispatchEvent("reset", Object.assign({
             graphics: [this._lastGraphic],
             options: this.options
-          }), this._lastGraphic = null, interaction.setStatedGraphics(this, []));
+          }, e)), this._lastGraphic = null, interaction.setStatedGraphics(this, []));
         }, this.handleStart = e => {
-          this.start(e.item);
+          this.start(e.item, e);
         }, this.handleReset = e => {
           const {
               interaction: interaction
@@ -50721,7 +50751,7 @@
           if (!statedGraphics || !statedGraphics.length) return;
           const markGraphic = e.item,
             hasActiveElement = markGraphic && this._markSet.getMarkInId(markGraphic.context.markId);
-          (this._resetType.includes("view") && !hasActiveElement || this._resetType.includes("self") && hasActiveElement) && this.resetAll();
+          (this._resetType.includes("view") && !hasActiveElement || this._resetType.includes("self") && hasActiveElement) && this.resetAll(e);
         }, this.options = Object.assign({}, defaultOptions$6, options), this.updateMarkIdByState([this.options.highlightState, this.options.blurState]);
       }
       getStartState() {
@@ -50742,7 +50772,7 @@
           handler: this.handleReset
         }), events;
       }
-      start(markGraphic) {
+      start(markGraphic, e) {
         if (markGraphic && this._markSet.getMarkInId(markGraphic.context.markId)) {
           const {
             highlightState: highlightState,
@@ -50751,14 +50781,14 @@
           } = this.options;
           if (this._lastGraphic === markGraphic) return;
           const newStatedGraphics = interaction.updateStates(this, [markGraphic], interaction.getStatedGraphics(this), highlightState, blurState);
-          interaction.setStatedGraphics(this, newStatedGraphics), this._lastGraphic = markGraphic, this.dispatchEvent("start", {
+          interaction.setStatedGraphics(this, newStatedGraphics), this._lastGraphic = markGraphic, this.dispatchEvent("start", Object.assign({
             graphics: newStatedGraphics,
             options: this.options
-          });
-        } else this._lastGraphic && "view" === this._resetType && this.resetAll();
+          }, e));
+        } else this._lastGraphic && "view" === this._resetType && this.resetAll(e);
       }
-      reset(markGraphic) {
-        markGraphic ? this._markSet.getMarkInId(markGraphic.context.markId) && markGraphic.removeState([this.options.highlightState, this.options.blurState]) : this.resetAll();
+      reset(markGraphic, e) {
+        markGraphic ? this._markSet.getMarkInId(markGraphic.context.markId) && markGraphic.removeState([this.options.highlightState, this.options.blurState]) : this.resetAll(e);
       }
     }
     ElementHighlight.type = "element-highlight", ElementHighlight.defaultOptions = defaultOptions$6;
@@ -50772,19 +50802,19 @@
     };
     class ElementSelect extends BaseTrigger {
       constructor(options) {
-        super(options), this.type = "element-select", this._resetType = [], this.resetAll = () => {
+        super(options), this.type = "element-select", this._resetType = [], this.resetAll = e => {
           const {
               state: state,
               reverseState: reverseState,
               interaction: interaction
             } = this.options,
             statedGraphics = interaction.getStatedGraphics(this);
-          statedGraphics && statedGraphics.length && (interaction.clearAllStatesOfTrigger(this, state, reverseState), this.dispatchEvent("reset", {
+          statedGraphics && statedGraphics.length && (interaction.clearAllStatesOfTrigger(this, state, reverseState), this.dispatchEvent("reset", Object.assign({
             graphics: statedGraphics,
             options: this.options
-          }), interaction.setStatedGraphics(this, []));
+          }, e)), interaction.setStatedGraphics(this, []));
         }, this.handleStart = e => {
-          this.start(e.item);
+          this.start(e.item, e);
         }, this.handleReset = e => {
           const {
               interaction: interaction
@@ -50793,7 +50823,7 @@
           if (!statedGraphics || !statedGraphics.length) return;
           const markGraphic = e.item,
             hasActiveElement = markGraphic && this._markSet.getMarkInId(markGraphic.context.markId);
-          (this._resetType.includes("view") && !hasActiveElement || this._resetType.includes("self") && hasActiveElement) && this.resetAll();
+          (this._resetType.includes("view") && !hasActiveElement || this._resetType.includes("self") && hasActiveElement) && this.resetAll(e);
         }, this.options = Object.assign({}, defaultOptions$5, options), this.updateMarkIdByState([this.options.state, this.options.reverseState]);
       }
       getStartState() {
@@ -50820,7 +50850,7 @@
           });
         }), this._resetType = resetType, events;
       }
-      start(markGraphic) {
+      start(markGraphic, e) {
         const {
             state: state,
             reverseState: reverseState,
@@ -50832,22 +50862,22 @@
           if (markGraphic.hasState(state)) {
             if (this._resetType.includes("self")) {
               const newStatedGraphics = statedGraphics && statedGraphics.filter(g => g !== markGraphic);
-              newStatedGraphics && newStatedGraphics.length ? interaction.setStatedGraphics(this, interaction.updateStates(this, newStatedGraphics, statedGraphics, state, reverseState)) : this.resetAll();
+              newStatedGraphics && newStatedGraphics.length ? interaction.setStatedGraphics(this, interaction.updateStates(this, newStatedGraphics, statedGraphics, state, reverseState)) : this.resetAll(e);
             }
           } else {
             this._timer && clearTimeout(this._timer), markGraphic.addState(state, !0);
             const newStatedGraphics = this.options.interaction.updateStates(this, isMultiple && statedGraphics ? [...statedGraphics, markGraphic] : [markGraphic], statedGraphics, state, reverseState);
-            interaction.setStatedGraphics(this, newStatedGraphics), this.dispatchEvent("start", {
+            interaction.setStatedGraphics(this, newStatedGraphics), this.dispatchEvent("start", Object.assign({
               graphics: newStatedGraphics,
               options: this.options
-            }), this._resetType.includes("timeout") && (this._timer = setTimeout(() => {
-              this.resetAll();
+            }, e)), this._resetType.includes("timeout") && (this._timer = setTimeout(() => {
+              this.resetAll(e);
             }, this.options.triggerOff));
           }
-        } else this._resetType.includes("view") && statedGraphics && statedGraphics.length && this.resetAll();
+        } else this._resetType.includes("view") && statedGraphics && statedGraphics.length && this.resetAll(e);
       }
-      reset(markGraphic) {
-        markGraphic ? this._markSet.getMarkInId(markGraphic.context.markId) && markGraphic.removeState([this.options.state, this.options.reverseState]) : this.resetAll();
+      reset(markGraphic, e) {
+        markGraphic ? this._markSet.getMarkInId(markGraphic.context.markId) && markGraphic.removeState([this.options.state, this.options.reverseState]) : this.resetAll(e);
       }
     }
     ElementSelect.type = "element-select", ElementSelect.defaultOptions = defaultOptions$5;
@@ -50992,7 +51022,7 @@
           optimize: {
             disableCheckGraphicWidthOutRange: !0
           }
-        }, this._observer = null, this._context = {}, this._renderState = RenderStateEnum.render, this._doResize = () => {
+        }, this._observer = null, this._context = {}, this._renderState = RenderStateEnum.render, this._disableDimensionHoverEvent = !1, this._doResize = () => {
           const {
             width: width,
             height: height
@@ -51592,6 +51622,15 @@
         var _a;
         return null === (_a = this._chart) || void 0 === _a ? void 0 : _a.setDimensionIndex(value, opt);
       }
+      disableDimensionHoverEvent(value) {
+        return void 0 !== value && (this._disableDimensionHoverEvent = value), this._disableDimensionHoverEvent;
+      }
+      disableCrossHair(value = !0) {
+        this.getChart().getComponentsByKey("crosshair").forEach(crosshair => crosshair.enable = !value);
+      }
+      disableTooltip(value = !0) {
+        this.getChart().getComponentsByKey("tooltip").forEach(tooltip => tooltip.enable = !value);
+      }
       showCrosshair(cb) {
         var _a;
         null === (_a = this._chart) || void 0 === _a || _a.showCrosshair(cb);
@@ -53654,7 +53693,8 @@
     class DimensionHoverEvent extends DimensionEvent {
       constructor() {
         super(...arguments), this._cacheDimensionInfo = null, this.onMouseMove = params => {
-          if (!params) return;
+          var _a, _b, _c, _d;
+          if (!params || (null === (_d = null === (_c = null === (_b = null === (_a = params.chart) || void 0 === _a ? void 0 : _a.getOption()) || void 0 === _b ? void 0 : _b.globalInstance) || void 0 === _c ? void 0 : _c.disableDimensionHoverEvent) || void 0 === _d ? void 0 : _d.call(_c))) return;
           const x = params.event.viewX,
             y = params.event.viewY,
             targetDimensionInfo = this.getTargetDimensionInfo(x, y);
@@ -53669,7 +53709,8 @@
             dimensionInfo: targetDimensionInfo.slice()
           })), this._cacheDimensionInfo = targetDimensionInfo);
         }, this.onMouseOut = params => {
-          params && (this._callback.call(null, Object.assign(Object.assign({}, params), {
+          var _a, _b, _c, _d;
+          params && !(null === (_d = null === (_c = null === (_b = null === (_a = params.chart) || void 0 === _a ? void 0 : _a.getOption()) || void 0 === _b ? void 0 : _b.globalInstance) || void 0 === _c ? void 0 : _c.disableDimensionHoverEvent) || void 0 === _d ? void 0 : _d.call(_c)) && (this._callback.call(null, Object.assign(Object.assign({}, params), {
             action: "leave",
             dimensionInfo: this._cacheDimensionInfo ? this._cacheDimensionInfo.slice() : []
           })), this._cacheDimensionInfo = null);
@@ -58852,7 +58893,7 @@
       }
       shouldHandleTooltip(params, info) {
         var _a, _b;
-        return !isNil$1(info) && isActiveTypeVisible(this.activeType, null === (_b = null === (_a = params.model) || void 0 === _a ? void 0 : _a.tooltipHelper) || void 0 === _b ? void 0 : _b.spec);
+        return !!this.component.enable && !isNil$1(info) && isActiveTypeVisible(this.activeType, null === (_b = null === (_a = params.model) || void 0 === _a ? void 0 : _a.tooltipHelper) || void 0 === _b ? void 0 : _b.spec);
       }
       clearCache() {
         this._cacheActiveSpec = void 0;
@@ -77702,7 +77743,7 @@
 
     let Tooltip$1 = class Tooltip extends BaseComponent {
       constructor() {
-        super(...arguments), this.layoutZIndex = 1, this.type = ComponentTypeEnum.tooltip, this.name = ComponentTypeEnum.tooltip, this.transformerConstructor = TooltipSpecTransformer, this.specKey = "tooltip", this.layoutType = "none", this._isReleased = !1, this._alwaysShow = !1, this._eventList = [], this._isTooltipShown = !1, this._clickLock = !1, this._mountEvent = (eType, query, callback) => {
+        super(...arguments), this.layoutZIndex = 1, this.type = ComponentTypeEnum.tooltip, this.name = ComponentTypeEnum.tooltip, this.transformerConstructor = TooltipSpecTransformer, this.specKey = "tooltip", this.layoutType = "none", this._isReleased = !1, this.enable = !0, this._alwaysShow = !1, this._eventList = [], this._isTooltipShown = !1, this._clickLock = !1, this._mountEvent = (eType, query, callback) => {
           this.event.on(eType, query, callback), this._eventList.push({
             eventType: eType,
             handler: callback
@@ -77803,7 +77844,7 @@
             processor.clearCache();
           });
           const handler = null !== (_c = this._spec.handler) && void 0 !== _c ? _c : this.tooltipHandler;
-          if (handler.hideTooltip) {
+          if (null == handler ? void 0 : handler.hideTooltip) {
             const result = handler.hideTooltip.call(handler, params);
             return result || (this._isTooltipShown = !1), result;
           }
@@ -77862,7 +77903,7 @@
       _initEventOfTooltipContent() {
         var _a, _b;
         if (!this._needInitEventOfTooltip) return;
-        const container = null === (_b = (_a = this.tooltipHandler).getRootDom) || void 0 === _b ? void 0 : _b.call(_a);
+        const container = null === (_b = null === (_a = this.tooltipHandler) || void 0 === _a ? void 0 : _a.getRootDom) || void 0 === _b ? void 0 : _b.call(_a);
         container && (container.addEventListener("pointerenter", () => {
           var _a;
           if (!this._enterable) return;
@@ -77939,7 +77980,7 @@
         if (super.reInit(spec), this.tooltipHandler) {
           const renderMode = null !== (_a = this._spec.renderMode) && void 0 !== _a ? _a : "html",
             newEnterable = this._spec.enterable && "html" === renderMode;
-          newEnterable && !this._enterable && (this._needInitEventOfTooltip = !0), this._enterable = newEnterable, null === (_c = (_b = this.tooltipHandler).reInit) || void 0 === _c || _c.call(_b);
+          newEnterable && !this._enterable && (this._needInitEventOfTooltip = !0), this._enterable = newEnterable, null === (_c = null === (_b = this.tooltipHandler) || void 0 === _b ? void 0 : _b.reInit) || void 0 === _c || _c.call(_b);
         } else this._initHandler();
       }
       showTooltip(datum, options) {
@@ -79223,7 +79264,13 @@
           } = params;
           let value = this._isHorizontal ? scrollX : scrollY;
           const active = this._isHorizontal ? abs$1(scrollX / scrollY) >= .5 : abs$1(scrollY / scrollX) >= .5;
-          this._scrollAttr.reverse || (value = -value), active && this.handleChartMove(value, null !== (_a = this._scrollAttr.rate) && void 0 !== _a ? _a : 1);
+          if (this._scrollAttr.reverse || (value = -value), active) {
+            const scrollStep = this._spec.scrollStep;
+            if (isValidNumber$1(scrollStep)) {
+              value = (value > 0 ? 1 : -1) * (scrollStep * (this.getState().end - this.getState().start) / 1);
+            }
+            this.handleChartMove(value, null !== (_a = this._scrollAttr.rate) && void 0 !== _a ? _a : 1);
+          }
           const hasChange = 0 !== this.getState().start && 1 !== this.getState().end;
           return active && hasChange;
         }, this.handleChartDrag = (delta, e) => {
@@ -80193,7 +80240,7 @@
         return !1 === this._visible ? 0 : isNumber$1(this._spec.height) ? this._spec.height : this._isHorizontal ? SCROLL_BAR_DEFAULT_SIZE : this.getLayoutRect().height;
       }
       _getAttrs() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         return Object.assign({
           zIndex: this.layoutZIndex,
           x: this.getLayoutStartPoint().x,
@@ -80204,7 +80251,8 @@
           direction: this._isHorizontal ? "horizontal" : "vertical",
           delayType: null === (_a = this._spec) || void 0 === _a ? void 0 : _a.delayType,
           delayTime: isValid$1(null === (_b = this._spec) || void 0 === _b ? void 0 : _b.delayType) ? null !== (_d = null === (_c = this._spec) || void 0 === _c ? void 0 : _c.delayTime) && void 0 !== _d ? _d : 30 : 0,
-          realTime: null === (_f = null === (_e = this._spec) || void 0 === _e ? void 0 : _e.realTime) || void 0 === _f || _f
+          realTime: null === (_f = null === (_e = this._spec) || void 0 === _e ? void 0 : _e.realTime) || void 0 === _f || _f,
+          minSliderSize: null === (_g = this._spec) || void 0 === _g ? void 0 : _g.minSliderSize
         }, this._getComponentAttrs());
       }
       _createOrUpdateComponent() {
@@ -81858,7 +81906,7 @@
         };
       }
       _getTitleAttrs() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f;
         if (!1 === this._spec.visible) return {
           visible: !1
         };
@@ -81866,30 +81914,35 @@
           titleWidth = calcLayoutNumber(this._spec.width, layoutRect.width, null, layoutRect.width),
           titleMaxWidth = calcLayoutNumber(this._spec.maxWidth, layoutRect.width, null, layoutRect.width),
           maxWidth = Math.max(Math.min(titleWidth, titleMaxWidth, layoutRect.width), 0),
+          hasText = isValid$1(this._spec.text) && "" !== this._spec.text,
+          hasSubtext = isValid$1(this._spec.subtext) && "" !== this._spec.subtext,
           attrs = Object.assign(Object.assign({}, pickWithout(this._spec, ["padding"])), {
             textType: null !== (_a = this._spec.textType) && void 0 !== _a ? _a : "text",
-            text: null !== (_b = this._spec.text) && void 0 !== _b ? _b : "",
-            subtextType: null !== (_c = this._spec.subtextType) && void 0 !== _c ? _c : "text",
-            subtext: null !== (_d = this._spec.subtext) && void 0 !== _d ? _d : "",
-            x: null !== (_e = this._spec.x) && void 0 !== _e ? _e : 0,
-            y: null !== (_f = this._spec.y) && void 0 !== _f ? _f : 0,
+            text: hasText ? this._spec.text : void 0,
+            subtextType: null !== (_b = this._spec.subtextType) && void 0 !== _b ? _b : "text",
+            subtext: hasSubtext ? this._spec.subtext : void 0,
+            x: null !== (_c = this._spec.x) && void 0 !== _c ? _c : 0,
+            y: null !== (_d = this._spec.y) && void 0 !== _d ? _d : 0,
             height: this._spec.height,
             minWidth: this._spec.minWidth,
             maxWidth: maxWidth,
             minHeight: this._spec.minHeight,
             maxHeight: this._spec.maxHeight,
             padding: this._spec.innerPadding,
-            align: null !== (_g = this._spec.align) && void 0 !== _g ? _g : "left",
-            verticalAlign: null !== (_h = this._spec.verticalAlign) && void 0 !== _h ? _h : "top",
+            align: null !== (_e = this._spec.align) && void 0 !== _e ? _e : "left",
+            verticalAlign: null !== (_f = this._spec.verticalAlign) && void 0 !== _f ? _f : "top",
             textStyle: Object.assign({
-              width: maxWidth,
               maxLineWidth: maxWidth
             }, this._spec.textStyle),
             subtextStyle: Object.assign({
               maxLineWidth: maxWidth
             }, this._spec.subtextStyle)
           });
-        return isValid$1(this._spec.width) && (attrs.textStyle.width = Math.max(titleWidth, layoutRect.width), attrs.subtextStyle.width = attrs.textStyle.width), attrs;
+        if (hasText && (attrs.textStyle.width = maxWidth), hasSubtext && (attrs.subtextStyle.width = maxWidth), isValid$1(this._spec.width)) {
+          const clampedWidth = Math.max(Math.min(titleWidth, layoutRect.width), 0);
+          hasText ? attrs.textStyle.width = clampedWidth : delete attrs.textStyle.width, hasSubtext && (attrs.subtextStyle.width = clampedWidth);
+        }
+        return attrs;
       }
       _createOrUpdateTitleComponent(attrs) {
         if (this._titleComponent) isEqual(attrs, this._cacheAttrs) || this._titleComponent.setAttributes(attrs);else {
@@ -83526,6 +83579,9 @@
           brushComponent = this._brushComponents[componentIndex];
         brushComponent.setAttributes(interactiveAttr), this._initMarkBrushState(componentIndex, ""), brushComponent.children[0].removeAllChild();
       }
+      _shouldEnableInteractive() {
+        return !1 !== this.getOption().getCompiler().getOption().interactive;
+      }
       _createBrushComponent(region, componentIndex) {
         var _a, _b;
         const interactiveAttr = this._getBrushInteractiveAttr(region),
@@ -83536,32 +83592,32 @@
             disableTriggerEvent: this._option.disableTriggerEvent
           }));
         brush.id = null !== (_b = this._spec.id) && void 0 !== _b ? _b : `brush-${this.id}`, this.getContainer().add(brush), this._brushComponents.push(brush), this._cacheInteractiveRangeAttrs.push(interactiveAttr), brush.addEventListener(IOperateType.brushActive, e => {
-          this._initMarkBrushState(componentIndex, "outOfBrush"), this._emitEvent(ChartEvent.brushActive, region);
+          this._initMarkBrushState(componentIndex, "outOfBrush"), this._emitEvent(ChartEvent.brushActive, region, e);
         }), brush.addEventListener(IOperateType.drawStart, e => {
-          this._setRegionMarkPickable(region, !0), this._emitEvent(ChartEvent.brushStart, region);
+          this._spec.disableDimensionHoverWhenBrushing && this._option.globalInstance.disableDimensionHoverEvent(!0), this._setRegionMarkPickable(region, !0), this._emitEvent(ChartEvent.brushStart, region, e);
         }), brush.addEventListener(IOperateType.moveStart, e => {
-          this._setRegionMarkPickable(region, !0), this._emitEvent(ChartEvent.brushStart, region);
+          this._spec.disableDimensionHoverWhenBrushing && this._option.globalInstance.disableDimensionHoverEvent(!0), this._setRegionMarkPickable(region, !0), this._emitEvent(ChartEvent.brushStart, region, e);
         }), brush.addEventListener(IOperateType.drawing, e => {
-          this._setRegionMarkPickable(region, !1), this._handleBrushChange(region, e), this._emitEvent(ChartEvent.brushChange, region);
+          this._setRegionMarkPickable(region, !1), this._handleBrushChange(region, e), this._emitEvent(ChartEvent.brushChange, region, e);
         }), brush.addEventListener(IOperateType.moving, e => {
-          this._setRegionMarkPickable(region, !1), this._handleBrushChange(region, e), this._emitEvent(ChartEvent.brushChange, region);
+          this._setRegionMarkPickable(region, !1), this._handleBrushChange(region, e), this._emitEvent(ChartEvent.brushChange, region, e);
         }), brush.addEventListener(IOperateType.brushClear, e => {
-          this._setRegionMarkPickable(region, !0), this._initMarkBrushState(componentIndex, ""), this._emitEvent(ChartEvent.brushClear, region);
+          this._spec.disableDimensionHoverWhenBrushing && this._option.globalInstance.disableDimensionHoverEvent(!1), this._setRegionMarkPickable(region, !0), this._initMarkBrushState(componentIndex, ""), this._emitEvent(ChartEvent.brushClear, region, e);
         }), brush.addEventListener(IOperateType.drawEnd, e => {
           var _a;
-          this._setRegionMarkPickable(region, !0);
+          this._spec.disableDimensionHoverWhenBrushing && this._option.globalInstance.disableDimensionHoverEvent(!1), this._setRegionMarkPickable(region, !0);
           const {
               operateMask: operateMask
             } = e.detail,
             {
               updateElementsState = !0
             } = this._spec;
-          if (null === (_a = this._spec) || void 0 === _a ? void 0 : _a.onBrushEnd) !0 === this._spec.onBrushEnd(e) ? (this.clearGraphic(), this._initMarkBrushState(componentIndex, ""), this._emitEvent(ChartEvent.brushClear, region)) : (this._spec.onBrushEnd(e), this._emitEvent(ChartEvent.brushEnd, region));else {
+          if (null === (_a = this._spec) || void 0 === _a ? void 0 : _a.onBrushEnd) !0 === this._spec.onBrushEnd(e) ? (this.clearGraphic(), this._initMarkBrushState(componentIndex, ""), this._emitEvent(ChartEvent.brushClear, region, e)) : (this._spec.onBrushEnd(e), this._emitEvent(ChartEvent.brushEnd, region, e));else {
             const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-            (!this._spec.zoomWhenEmpty && inBrushData.length > 0 || !updateElementsState) && this._setAxisAndDataZoom(operateMask, region), this._emitEvent(ChartEvent.brushEnd, region);
+            (!this._spec.zoomWhenEmpty && inBrushData.length > 0 || !updateElementsState) && this._setAxisAndDataZoom(operateMask, region), this._emitEvent(ChartEvent.brushEnd, region, e);
           }
         }), brush.addEventListener(IOperateType.moveEnd, e => {
-          this._setRegionMarkPickable(region, !0);
+          this._spec.disableDimensionHoverWhenBrushing && this._option.globalInstance.disableDimensionHoverEvent(!1), this._setRegionMarkPickable(region, !0);
           const {
               operateMask: operateMask
             } = e.detail,
@@ -83569,7 +83625,7 @@
               updateElementsState = !0
             } = this._spec,
             inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-          (!this._spec.zoomWhenEmpty && inBrushData.length > 0 || updateElementsState) && this._setAxisAndDataZoom(operateMask, region), this._emitEvent(ChartEvent.brushEnd, region);
+          (!this._spec.zoomWhenEmpty && inBrushData.length > 0 || updateElementsState) && this._setAxisAndDataZoom(operateMask, region), this._emitEvent(ChartEvent.brushEnd, region, e);
         });
       }
       _getBrushInteractiveAttr(region) {
@@ -83587,7 +83643,8 @@
             maxX: seriesRegionEndX
           },
           xRange: [seriesRegionStartX, seriesRegionEndX],
-          yRange: [seriesRegionStartY, seriesRegionEndY]
+          yRange: [seriesRegionStartY, seriesRegionEndY],
+          interactive: this._shouldEnableInteractive()
         };
       }
       _transformBrushedMarkAttr(brushedStyle) {
@@ -83596,11 +83653,12 @@
       }
       _handleBrushChange(region, e) {
         const {
-            operateMask: operateMask
-          } = e.detail,
-          {
-            updateElementsState = !0
-          } = this._spec;
+          operateMask: operateMask
+        } = e.detail;
+        this._operateMask = operateMask;
+        const {
+          updateElementsState = !0
+        } = this._spec;
         updateElementsState && (this._reconfigItem(operateMask, region), this._reconfigLinkedItem(operateMask, region));
       }
       _extendDataInBrush(elementsMap) {
@@ -83615,7 +83673,7 @@
         for (const elementKey in elementsMap) data.push(null === (_b = null === (_a = elementsMap[elementKey].context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0]);
         return data;
       }
-      _emitEvent(eventType, region) {
+      _emitEvent(eventType, region, e) {
         var _a;
         this.event.emit(eventType, {
           model: this,
@@ -83632,7 +83690,8 @@
             linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap,
             zoomRecord: this._zoomRecord
           },
-          vchart: null === (_a = this._option) || void 0 === _a ? void 0 : _a.globalInstance
+          vchart: null === (_a = this._option) || void 0 === _a ? void 0 : _a.globalInstance,
+          event: e
         });
       }
       _reconfigItem(operateMask, region) {
@@ -83829,6 +83888,11 @@
           }), this._brushComponents = null;
         }
       }
+      clearBrushStateAndMask() {
+        this._relativeRegions.forEach((region, componentIndex) => {
+          this._initMarkBrushState(componentIndex, ""), this._brushComponents[componentIndex].children[0].removeAllChild();
+        });
+      }
     };
     Brush$1.type = ComponentTypeEnum.brush, Brush$1.builtInTheme = {
       brush: brush
@@ -88159,6 +88223,10 @@
         type: 'common',
         vchartConstructor: VChart$1
     }, [
+        registerAnimate,
+        registerReactAttributePlugin,
+        registerTooltip,
+        registerDomTooltipHandler,
         registerCommonChart,
         registerCartesianLinearAxis,
         registerCartesianBandAxis,
@@ -88616,7 +88684,7 @@
 
     const VChartSimple = createChart('VChartSimple');
 
-    const version = "2.0.13";
+    const version = "2.0.14";
 
     exports.Area = Area;
     exports.AreaChart = AreaChart;