@visactor/vchart 2.0.14-alpha.1 → 2.0.14

package/build/index.js

@@ -26721,7 +26721,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), {
@@ -31467,14 +31467,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
@@ -31618,15 +31624,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;
@@ -31666,6 +31681,7 @@
       direction: "horizontal",
       round: !0,
       sliderSize: 20,
+      minSliderSize: 0,
       sliderStyle: {
         fill: "rgba(0, 0, 0, .5)"
       },
@@ -35672,7 +35688,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,
@@ -35685,7 +35701,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) {
@@ -51102,6 +51118,8 @@
     let Brush$1 = 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,
@@ -51109,11 +51127,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() {
@@ -51125,6 +51143,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,
@@ -51133,6 +51152,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
@@ -51157,6 +51177,7 @@
       }
       _drawing(e) {
         var _a;
+        if (!1 === this.attribute.interactive) return;
         const pos = this.eventPosToStagePos(e),
           {
             brushType: brushType,
@@ -51181,6 +51202,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;
@@ -51194,6 +51216,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
@@ -51211,7 +51234,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();
@@ -51318,6 +51341,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,
@@ -53863,7 +53890,7 @@
             if (ComposedEventCtor) {
                 const composedEvent = new ComposedEventCtor(this._eventDispatcher, this._mode);
                 composedEvent.register(eType, handler);
-                this._composedEventMap.set(callback, {
+                this._composedEventMap.set(handler.callback, {
                     eventType: eType,
                     event: composedEvent
                 });
@@ -54900,6 +54927,9 @@
         getRootGroup() {
             return this._rootGroup;
         }
+        getOption() {
+            return this._option;
+        }
         constructor(container, option) {
             this._count = 0;
             this._rootMarks = [];
@@ -60028,9 +60058,9 @@
                 });
             }
         }
-        start(g) {
+        start(g, e) {
         }
-        reset(g) {
+        reset(g, e) {
         }
         dispatchEvent(type, params) {
             if (this.options.event) {
@@ -60061,17 +60091,17 @@
         constructor(options) {
             super(options);
             this.type = "element-highlight";
-            this.resetAll = () => {
+            this.resetAll = (e) => {
                 const { highlightState, blurState, interaction } = this.options;
                 if (this._lastGraphic) {
                     interaction.clearAllStatesOfTrigger(this, highlightState, blurState);
-                    this.dispatchEvent('reset', { graphics: [this._lastGraphic], options: this.options });
+                    this.dispatchEvent('reset', Object.assign({ graphics: [this._lastGraphic], options: this.options }, e));
                     this._lastGraphic = null;
                     interaction.setStatedGraphics(this, []);
                 }
             };
             this.handleStart = (e) => {
-                this.start(e.item);
+                this.start(e.item, e);
             };
             this.handleReset = (e) => {
                 const { interaction } = this.options;
@@ -60082,10 +60112,10 @@
                 const markGraphic = e.item;
                 const hasActiveElement = markGraphic && this._markSet.getMarkInId(markGraphic.context.markId);
                 if (this._resetType.includes('view') && !hasActiveElement) {
-                    this.resetAll();
+                    this.resetAll(e);
                 }
                 else if (this._resetType.includes('self') && hasActiveElement) {
-                    this.resetAll();
+                    this.resetAll(e);
                 }
             };
             this.options = Object.assign({}, defaultOptions$6, options);
@@ -60117,7 +60147,7 @@
             events.push({ type: eventName, handler: this.handleReset });
             return events;
         }
-        start(markGraphic) {
+        start(markGraphic, e) {
             if (markGraphic && this._markSet.getMarkInId(markGraphic.context.markId)) {
                 const { highlightState, blurState, interaction } = this.options;
                 if (this._lastGraphic === markGraphic) {
@@ -60126,20 +60156,20 @@
                 const newStatedGraphics = interaction.updateStates(this, [markGraphic], interaction.getStatedGraphics(this), highlightState, blurState);
                 interaction.setStatedGraphics(this, newStatedGraphics);
                 this._lastGraphic = markGraphic;
-                this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options });
+                this.dispatchEvent('start', Object.assign({ graphics: newStatedGraphics, options: this.options }, e));
             }
             else if (this._lastGraphic && this._resetType === 'view') {
-                this.resetAll();
+                this.resetAll(e);
             }
         }
-        reset(markGraphic) {
+        reset(markGraphic, e) {
             if (markGraphic) {
                 if (this._markSet.getMarkInId(markGraphic.context.markId)) {
                     markGraphic.removeState([this.options.highlightState, this.options.blurState]);
                 }
             }
             else {
-                this.resetAll();
+                this.resetAll(e);
             }
         }
     }
@@ -60158,17 +60188,17 @@
             super(options);
             this.type = "element-select";
             this._resetType = [];
-            this.resetAll = () => {
+            this.resetAll = (e) => {
                 const { state, reverseState, interaction } = this.options;
                 const statedGraphics = interaction.getStatedGraphics(this);
                 if (statedGraphics && statedGraphics.length) {
                     interaction.clearAllStatesOfTrigger(this, state, reverseState);
-                    this.dispatchEvent('reset', { graphics: statedGraphics, options: this.options });
+                    this.dispatchEvent('reset', Object.assign({ graphics: statedGraphics, options: this.options }, e));
                     interaction.setStatedGraphics(this, []);
                 }
             };
             this.handleStart = (e) => {
-                this.start(e.item);
+                this.start(e.item, e);
             };
             this.handleReset = (e) => {
                 const { interaction } = this.options;
@@ -60179,10 +60209,10 @@
                 const markGraphic = e.item;
                 const hasActiveElement = markGraphic && this._markSet.getMarkInId(markGraphic.context.markId);
                 if (this._resetType.includes('view') && !hasActiveElement) {
-                    this.resetAll();
+                    this.resetAll(e);
                 }
                 else if (this._resetType.includes('self') && hasActiveElement) {
-                    this.resetAll();
+                    this.resetAll(e);
                 }
             };
             this.options = Object.assign({}, defaultOptions$5, options);
@@ -60212,7 +60242,7 @@
             this._resetType = resetType;
             return events;
         }
-        start(markGraphic) {
+        start(markGraphic, e) {
             const { state, reverseState, isMultiple, interaction } = this.options;
             const statedGraphics = interaction.getStatedGraphics(this);
             if (markGraphic && this._markSet.getMarkInId(markGraphic.context.markId)) {
@@ -60223,7 +60253,7 @@
                             interaction.setStatedGraphics(this, interaction.updateStates(this, newStatedGraphics, statedGraphics, state, reverseState));
                         }
                         else {
-                            this.resetAll();
+                            this.resetAll(e);
                         }
                     }
                 }
@@ -60234,26 +60264,26 @@
                     markGraphic.addState(state, true);
                     const newStatedGraphics = this.options.interaction.updateStates(this, isMultiple && statedGraphics ? [...statedGraphics, markGraphic] : [markGraphic], statedGraphics, state, reverseState);
                     interaction.setStatedGraphics(this, newStatedGraphics);
-                    this.dispatchEvent('start', { graphics: newStatedGraphics, options: this.options });
+                    this.dispatchEvent('start', Object.assign({ graphics: newStatedGraphics, options: this.options }, e));
                     if (this._resetType.includes('timeout')) {
                         this._timer = setTimeout(() => {
-                            this.resetAll();
+                            this.resetAll(e);
                         }, this.options.triggerOff);
                     }
                 }
             }
             else if (this._resetType.includes('view') && statedGraphics && statedGraphics.length) {
-                this.resetAll();
+                this.resetAll(e);
             }
         }
-        reset(markGraphic) {
+        reset(markGraphic, e) {
             if (markGraphic) {
                 if (this._markSet.getMarkInId(markGraphic.context.markId)) {
                     markGraphic.removeState([this.options.state, this.options.reverseState]);
                 }
             }
             else {
-                this.resetAll();
+                this.resetAll(e);
             }
         }
     }
@@ -60383,6 +60413,7 @@
             this._observer = null;
             this._context = {};
             this._renderState = RenderStateEnum.render;
+            this._disableDimensionHoverEvent = false;
             this._doResize = () => {
                 const { width, height } = this.getCurrentSize();
                 if (this._currentSize.width !== width || this._currentSize.height !== height) {
@@ -60527,7 +60558,7 @@
             this._compiler.updateLayoutTag();
             this._setFontFamilyTheme(this.getTheme('fontFamily'));
             this._initDataSet(this._option.dataSet);
-            this._autoSize = isTrueBrowseEnv ? (_g = (_f = spec.autoFit) !== null && _f !== void 0 ? _f : this._option.autoFit) !== null && _g !== void 0 ? _g : true : false;
+            this._autoSize = isTrueBrowseEnv ? ((_g = (_f = spec.autoFit) !== null && _f !== void 0 ? _f : this._option.autoFit) !== null && _g !== void 0 ? _g : true) : false;
             this._bindResizeEvent();
             this._bindViewEvent();
             this._initChartPlugin();
@@ -61180,7 +61211,7 @@
                 resize = true;
             }
             const lasAutoSize = this._autoSize;
-            this._autoSize = isTrueBrowser(this._option.mode) ? (_b = (_a = this._spec.autoFit) !== null && _a !== void 0 ? _a : this._option.autoFit) !== null && _b !== void 0 ? _b : true : false;
+            this._autoSize = isTrueBrowser(this._option.mode) ? ((_b = (_a = this._spec.autoFit) !== null && _a !== void 0 ? _a : this._option.autoFit) !== null && _b !== void 0 ? _b : true) : false;
             if (this._autoSize !== lasAutoSize) {
                 resize = true;
             }
@@ -61421,6 +61452,22 @@
             var _a;
             return (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setDimensionIndex(value, opt);
         }
+        disableDimensionHoverEvent(value) {
+            if (value !== undefined) {
+                this._disableDimensionHoverEvent = value;
+            }
+            return this._disableDimensionHoverEvent;
+        }
+        disableCrossHair(value = true) {
+            this.getChart()
+                .getComponentsByKey('crosshair')
+                .forEach(crosshair => (crosshair.enable = !value));
+        }
+        disableTooltip(value = true) {
+            this.getChart()
+                .getComponentsByKey('tooltip')
+                .forEach(tooltip => (tooltip.enable = !value));
+        }
         showCrosshair(cb) {
             var _a;
             (_a = this._chart) === null || _a === void 0 ? void 0 : _a.showCrosshair(cb);
@@ -61749,7 +61796,7 @@
         });
     };
 
-    const version = "2.0.13";
+    const version = "2.0.14";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -64441,7 +64488,8 @@
             super(...arguments);
             this._cacheDimensionInfo = null;
             this.onMouseMove = (params) => {
-                if (!params) {
+                var _a, _b, _c, _d;
+                if (!params || ((_d = (_c = (_b = (_a = params.chart) === null || _a === void 0 ? void 0 : _a.getOption()) === null || _b === void 0 ? void 0 : _b.globalInstance) === null || _c === void 0 ? void 0 : _c.disableDimensionHoverEvent) === null || _d === void 0 ? void 0 : _d.call(_c))) {
                     return;
                 }
                 const x = params.event.viewX;
@@ -64463,7 +64511,8 @@
                 }
             };
             this.onMouseOut = (params) => {
-                if (!params) {
+                var _a, _b, _c, _d;
+                if (!params || ((_d = (_c = (_b = (_a = params.chart) === null || _a === void 0 ? void 0 : _a.getOption()) === null || _b === void 0 ? void 0 : _b.globalInstance) === null || _c === void 0 ? void 0 : _c.disableDimensionHoverEvent) === null || _d === void 0 ? void 0 : _d.call(_c))) {
                     return;
                 }
                 this._callback.call(null, Object.assign(Object.assign({}, params), { action: 'leave', dimensionInfo: this._cacheDimensionInfo ? this._cacheDimensionInfo.slice() : [] }));
@@ -71761,6 +71810,9 @@
         }
         shouldHandleTooltip(params, info) {
             var _a, _b;
+            if (!this.component.enable) {
+                return false;
+            }
             if (isNil$1(info)) {
                 return false;
             }
@@ -96105,6 +96157,7 @@
             this.specKey = 'tooltip';
             this.layoutType = 'none';
             this._isReleased = false;
+            this.enable = true;
             this._alwaysShow = false;
             this._eventList = [];
             this._isTooltipShown = false;
@@ -96319,7 +96372,7 @@
                     processor.clearCache();
                 });
                 const handler = (_c = this._spec.handler) !== null && _c !== void 0 ? _c : this.tooltipHandler;
-                if (handler.hideTooltip) {
+                if (handler === null || handler === void 0 ? void 0 : handler.hideTooltip) {
                     const result = handler.hideTooltip.call(handler, params);
                     if (!result) {
                         this._isTooltipShown = false;
@@ -96413,7 +96466,7 @@
             if (!this._needInitEventOfTooltip) {
                 return;
             }
-            const container = (_b = (_a = this.tooltipHandler).getRootDom) === null || _b === void 0 ? void 0 : _b.call(_a);
+            const container = (_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.getRootDom) === null || _b === void 0 ? void 0 : _b.call(_a);
             if (container) {
                 container.addEventListener('pointerenter', () => {
                     var _a;
@@ -96539,7 +96592,7 @@
                     this._needInitEventOfTooltip = true;
                 }
                 this._enterable = newEnterable;
-                (_c = (_b = this.tooltipHandler).reInit) === null || _c === void 0 ? void 0 : _c.call(_b);
+                (_c = (_b = this.tooltipHandler) === null || _b === void 0 ? void 0 : _b.reInit) === null || _c === void 0 ? void 0 : _c.call(_b);
             }
             else {
                 this._initHandler();
@@ -97974,7 +98027,7 @@
             this.initZoomEvent = () => {
                 var _a, _b, _c, _d, _e, _f, _g;
                 const delayType = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType) !== null && _b !== void 0 ? _b : 'throttle';
-                const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? ((_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30) : 0;
+                const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? (_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30 : 0;
                 const realTime = (_g = (_f = this._spec) === null || _f === void 0 ? void 0 : _f.realTime) !== null && _g !== void 0 ? _g : true;
                 const option = { delayType, delayTime, realTime, allowComponentZoom: true };
                 if (this._zoomAttr.enable) {
@@ -98029,6 +98082,12 @@
                     value = -value;
                 }
                 if (active) {
+                    const scrollStep = this._spec.scrollStep;
+                    if (isValidNumber$1(scrollStep)) {
+                        const sign = value > 0 ? 1 : -1;
+                        const scrollStepPercent = (scrollStep * (this.getState().end - this.getState().start)) / 1;
+                        value = sign * scrollStepPercent;
+                    }
                     this.handleChartMove(value, (_a = this._scrollAttr.rate) !== null && _a !== void 0 ? _a : 1);
                 }
                 const hasChange = this.getState().start !== 0 && this.getState().end !== 1;
@@ -99435,8 +99494,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return SCROLL_BAR_DEFAULT_SIZE;
         }
         _getAttrs() {
-            var _a, _b, _c, _d, _e, _f;
-            return Object.assign({ zIndex: this.layoutZIndex, x: this.getLayoutStartPoint().x, y: this.getLayoutStartPoint().y, width: this.getLayoutRect().width, height: this.getLayoutRect().height, range: [this._start, this._end], direction: this._isHorizontal ? 'horizontal' : 'vertical', delayType: (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType, delayTime: isValid$1((_b = this._spec) === null || _b === void 0 ? void 0 : _b.delayType) ? ((_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayTime) !== null && _d !== void 0 ? _d : 30) : 0, realTime: (_f = (_e = this._spec) === null || _e === void 0 ? void 0 : _e.realTime) !== null && _f !== void 0 ? _f : true }, this._getComponentAttrs());
+            var _a, _b, _c, _d, _e, _f, _g;
+            return Object.assign({ zIndex: this.layoutZIndex, x: this.getLayoutStartPoint().x, y: this.getLayoutStartPoint().y, width: this.getLayoutRect().width, height: this.getLayoutRect().height, range: [this._start, this._end], direction: this._isHorizontal ? 'horizontal' : 'vertical', delayType: (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType, delayTime: isValid$1((_b = this._spec) === null || _b === void 0 ? void 0 : _b.delayType) ? (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayTime) !== null && _d !== void 0 ? _d : 30 : 0, realTime: (_f = (_e = this._spec) === null || _e === void 0 ? void 0 : _e.realTime) !== null && _f !== void 0 ? _f : true, minSliderSize: (_g = this._spec) === null || _g === void 0 ? void 0 : _g.minSliderSize }, this._getComponentAttrs());
         }
         _createOrUpdateComponent() {
             const attrs = this._getAttrs();
@@ -101355,7 +101414,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
         }
         _getTitleAttrs() {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f;
             if (this._spec.visible === false) {
                 return { visible: false };
             }
@@ -101363,10 +101422,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const titleWidth = calcLayoutNumber(this._spec.width, layoutRect.width, null, layoutRect.width);
             const titleMaxWidth = calcLayoutNumber(this._spec.maxWidth, layoutRect.width, null, layoutRect.width);
             const maxWidth = Math.max(Math.min(titleWidth, titleMaxWidth, layoutRect.width), 0);
-            const attrs = Object.assign(Object.assign({}, pickWithout(this._spec, ['padding'])), { textType: (_a = this._spec.textType) !== null && _a !== void 0 ? _a : 'text', text: (_b = this._spec.text) !== null && _b !== void 0 ? _b : '', subtextType: (_c = this._spec.subtextType) !== null && _c !== void 0 ? _c : 'text', subtext: (_d = this._spec.subtext) !== null && _d !== void 0 ? _d : '', x: (_e = this._spec.x) !== null && _e !== void 0 ? _e : 0, y: (_f = this._spec.y) !== null && _f !== void 0 ? _f : 0, height: this._spec.height, minWidth: this._spec.minWidth, maxWidth, minHeight: this._spec.minHeight, maxHeight: this._spec.maxHeight, padding: this._spec.innerPadding, align: (_g = this._spec.align) !== null && _g !== void 0 ? _g : 'left', verticalAlign: (_h = this._spec.verticalAlign) !== null && _h !== void 0 ? _h : 'top', textStyle: Object.assign({ width: maxWidth, maxLineWidth: maxWidth }, this._spec.textStyle), subtextStyle: Object.assign({ maxLineWidth: maxWidth }, this._spec.subtextStyle) });
+            const hasText = isValid$1(this._spec.text) && this._spec.text !== '';
+            const hasSubtext = isValid$1(this._spec.subtext) && this._spec.subtext !== '';
+            const attrs = Object.assign(Object.assign({}, pickWithout(this._spec, ['padding'])), { textType: (_a = this._spec.textType) !== null && _a !== void 0 ? _a : 'text', text: hasText ? this._spec.text : undefined, subtextType: (_b = this._spec.subtextType) !== null && _b !== void 0 ? _b : 'text', subtext: hasSubtext ? this._spec.subtext : undefined, x: (_c = this._spec.x) !== null && _c !== void 0 ? _c : 0, y: (_d = this._spec.y) !== null && _d !== void 0 ? _d : 0, height: this._spec.height, minWidth: this._spec.minWidth, maxWidth, minHeight: this._spec.minHeight, maxHeight: this._spec.maxHeight, padding: this._spec.innerPadding, align: (_e = this._spec.align) !== null && _e !== void 0 ? _e : 'left', verticalAlign: (_f = this._spec.verticalAlign) !== null && _f !== void 0 ? _f : 'top', textStyle: Object.assign({ maxLineWidth: maxWidth }, this._spec.textStyle), subtextStyle: Object.assign({ maxLineWidth: maxWidth }, this._spec.subtextStyle) });
+            if (hasText) {
+                attrs.textStyle.width = maxWidth;
+            }
+            if (hasSubtext) {
+                attrs.subtextStyle.width = maxWidth;
+            }
             if (isValid$1(this._spec.width)) {
-                attrs.textStyle.width = Math.max(titleWidth, layoutRect.width);
-                attrs.subtextStyle.width = attrs.textStyle.width;
+                const clampedWidth = Math.max(Math.min(titleWidth, layoutRect.width), 0);
+                if (hasText) {
+                    attrs.textStyle.width = clampedWidth;
+                }
+                else {
+                    delete attrs.textStyle.width;
+                }
+                if (hasSubtext) {
+                    attrs.subtextStyle.width = clampedWidth;
+                }
             }
             return attrs;
         }
@@ -103260,6 +103335,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initMarkBrushState(componentIndex, '');
             brushComponent.children[0].removeAllChild();
         }
+        _shouldEnableInteractive() {
+            return this.getOption().getCompiler().getOption().interactive !== false;
+        }
         _createBrushComponent(region, componentIndex) {
             var _a, _b;
             const interactiveAttr = this._getBrushInteractiveAttr(region);
@@ -103270,33 +103348,45 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._cacheInteractiveRangeAttrs.push(interactiveAttr);
             brush.addEventListener(IOperateType.brushActive, (e) => {
                 this._initMarkBrushState(componentIndex, OUT_BRUSH_STATE);
-                this._emitEvent(exports.ChartEvent.brushActive, region);
+                this._emitEvent(exports.ChartEvent.brushActive, region, e);
             });
             brush.addEventListener(IOperateType.drawStart, (e) => {
+                if (this._spec.disableDimensionHoverWhenBrushing) {
+                    this._option.globalInstance.disableDimensionHoverEvent(true);
+                }
                 this._setRegionMarkPickable(region, true);
-                this._emitEvent(exports.ChartEvent.brushStart, region);
+                this._emitEvent(exports.ChartEvent.brushStart, region, e);
             });
             brush.addEventListener(IOperateType.moveStart, (e) => {
+                if (this._spec.disableDimensionHoverWhenBrushing) {
+                    this._option.globalInstance.disableDimensionHoverEvent(true);
+                }
                 this._setRegionMarkPickable(region, true);
-                this._emitEvent(exports.ChartEvent.brushStart, region);
+                this._emitEvent(exports.ChartEvent.brushStart, region, e);
             });
             brush.addEventListener(IOperateType.drawing, (e) => {
                 this._setRegionMarkPickable(region, false);
                 this._handleBrushChange(region, e);
-                this._emitEvent(exports.ChartEvent.brushChange, region);
+                this._emitEvent(exports.ChartEvent.brushChange, region, e);
             });
             brush.addEventListener(IOperateType.moving, (e) => {
                 this._setRegionMarkPickable(region, false);
                 this._handleBrushChange(region, e);
-                this._emitEvent(exports.ChartEvent.brushChange, region);
+                this._emitEvent(exports.ChartEvent.brushChange, region, e);
             });
             brush.addEventListener(IOperateType.brushClear, (e) => {
+                if (this._spec.disableDimensionHoverWhenBrushing) {
+                    this._option.globalInstance.disableDimensionHoverEvent(false);
+                }
                 this._setRegionMarkPickable(region, true);
                 this._initMarkBrushState(componentIndex, '');
-                this._emitEvent(exports.ChartEvent.brushClear, region);
+                this._emitEvent(exports.ChartEvent.brushClear, region, e);
             });
             brush.addEventListener(IOperateType.drawEnd, (e) => {
                 var _a;
+                if (this._spec.disableDimensionHoverWhenBrushing) {
+                    this._option.globalInstance.disableDimensionHoverEvent(false);
+                }
                 this._setRegionMarkPickable(region, true);
                 const { operateMask } = e.detail;
                 const { updateElementsState = true } = this._spec;
@@ -103304,11 +103394,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (this._spec.onBrushEnd(e) === true) {
                         this.clearGraphic();
                         this._initMarkBrushState(componentIndex, '');
-                        this._emitEvent(exports.ChartEvent.brushClear, region);
+                        this._emitEvent(exports.ChartEvent.brushClear, region, e);
                     }
                     else {
                         this._spec.onBrushEnd(e);
-                        this._emitEvent(exports.ChartEvent.brushEnd, region);
+                        this._emitEvent(exports.ChartEvent.brushEnd, region, e);
                     }
                 }
                 else {
@@ -103316,10 +103406,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || !updateElementsState) {
                         this._setAxisAndDataZoom(operateMask, region);
                     }
-                    this._emitEvent(exports.ChartEvent.brushEnd, region);
+                    this._emitEvent(exports.ChartEvent.brushEnd, region, e);
                 }
             });
             brush.addEventListener(IOperateType.moveEnd, (e) => {
+                if (this._spec.disableDimensionHoverWhenBrushing) {
+                    this._option.globalInstance.disableDimensionHoverEvent(false);
+                }
                 this._setRegionMarkPickable(region, true);
                 const { operateMask } = e.detail;
                 const { updateElementsState = true } = this._spec;
@@ -103327,7 +103420,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if ((!this._spec.zoomWhenEmpty && inBrushData.length > 0) || updateElementsState) {
                     this._setAxisAndDataZoom(operateMask, region);
                 }
-                this._emitEvent(exports.ChartEvent.brushEnd, region);
+                this._emitEvent(exports.ChartEvent.brushEnd, region, e);
             });
         }
         _getBrushInteractiveAttr(region) {
@@ -103345,7 +103438,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     maxX: seriesRegionEndX
                 },
                 xRange: [seriesRegionStartX, seriesRegionEndX],
-                yRange: [seriesRegionStartY, seriesRegionEndY]
+                yRange: [seriesRegionStartY, seriesRegionEndY],
+                interactive: this._shouldEnableInteractive()
             };
         }
         _transformBrushedMarkAttr(brushedStyle) {
@@ -103366,6 +103460,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _handleBrushChange(region, e) {
             const { operateMask } = e.detail;
+            this._operateMask = operateMask;
             const { updateElementsState = true } = this._spec;
             if (updateElementsState) {
                 this._reconfigItem(operateMask, region);
@@ -103390,7 +103485,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return data;
         }
-        _emitEvent(eventType, region) {
+        _emitEvent(eventType, region, e) {
             var _a;
             this.event.emit(eventType, {
                 model: this,
@@ -103407,7 +103502,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap,
                     zoomRecord: this._zoomRecord
                 },
-                vchart: (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance
+                vchart: (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance,
+                event: e
             });
         }
         _reconfigItem(operateMask, region) {
@@ -103662,6 +103758,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._brushComponents = null;
             }
         }
+        clearBrushStateAndMask() {
+            this._relativeRegions.forEach((region, componentIndex) => {
+                this._initMarkBrushState(componentIndex, '');
+                this._brushComponents[componentIndex].children[0].removeAllChild();
+            });
+        }
     }
     Brush.type = ComponentTypeEnum.brush;
     Brush.builtInTheme = {