@visactor/vrender-components 0.22.7-alpha.0 → 0.22.7-alpha.10

package/dist/index.es.js

@@ -4162,7 +4162,7 @@ class FederatedEvent {
   }
   _composedDetailPath(params) {
     if (params && params.graphic) {
-      const g = params.graphic;
+      const g = this.pickParams.graphic;
       if (g.stage) {
         const path = g.stage.eventSystem.manager.propagationPath(g);
         this.detailPath.push(path), this._composedDetailPath(params.params);
@@ -14909,6 +14909,13 @@ const SCROLLBAR_START_EVENT = 'scrollDown';
 const SCROLLBAR_EVENT = 'scrollDrag';
 const SCROLLBAR_END_EVENT = 'scrollUp';
 
+function getEndTriggersOfDrag() {
+    if (vglobal.env === 'browser') {
+        return ['pointerup', 'pointerleave', 'pointercancel'];
+    }
+    return ['pointerup', 'pointerleave', 'pointerupoutside'];
+}
+
 const delayMap$2 = {
     debounce: debounce,
     throttle: throttle
@@ -14942,6 +14949,7 @@ class ScrollBar extends AbstractComponent {
             }
         };
         this._onSliderPointerDown = (e) => {
+            this._clearDragEvents();
             const { stopSliderDownPropagation = true } = this.attribute;
             if (stopSliderDownPropagation) {
                 e.stopPropagation();
@@ -14953,15 +14961,12 @@ class ScrollBar extends AbstractComponent {
                 pos: this._prePos,
                 event: e
             });
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                vglobal.addEventListener('pointerup', this._onSliderPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                this.stage.addEventListener('pointerup', this._onSliderPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onSliderPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: true });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onSliderPointerUp);
+            });
         };
         this._computeScrollValue = (e) => {
             const { direction } = this.attribute;
@@ -14983,6 +14988,7 @@ class ScrollBar extends AbstractComponent {
             return [currentPos, currentScrollValue];
         };
         this._onSliderPointerMove = (e) => {
+            e.preventDefault();
             const { stopSliderMovePropagation = true } = this.attribute;
             if (stopSliderMovePropagation) {
                 e.stopPropagation();
@@ -14996,7 +15002,6 @@ class ScrollBar extends AbstractComponent {
             ? this._onSliderPointerMove
             : delayMap$2[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime);
         this._onSliderPointerUp = (e) => {
-            e.preventDefault();
             const { range: preRange, limitRange = [0, 1] } = this.attribute;
             const preScrollRange = this.getScrollRange();
             const [currentPos, currentScrollValue] = this._computeScrollValue(e);
@@ -15005,15 +15010,7 @@ class ScrollBar extends AbstractComponent {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
             });
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                this.stage.removeEventListener('pointerup', this._onSliderPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onSliderPointerUp);
-            }
+            this._clearDragEvents();
         };
     }
     setScrollRange(range, render = true) {
@@ -15146,6 +15143,14 @@ class ScrollBar extends AbstractComponent {
             ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
             : clampRange([y1 + min * height, y1 + max * height], y1, height - sliderSize);
     }
+    _clearDragEvents() {
+        const triggers = getEndTriggersOfDrag();
+        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+        obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onSliderPointerUp);
+        });
+    }
     _reset() {
         this._sliderRenderBounds = null;
         this._sliderLimitRange = null;
@@ -23010,8 +23015,13 @@ class DataZoom extends AbstractComponent {
             end: 1
         };
         this._statePointToData = state => state;
+        this._handleTouchMove = (e) => {
+            if (this._activeState) {
+                e.preventDefault();
+            }
+        };
         this._onHandlerPointerDown = (e, tag) => {
-            e.stopPropagation();
+            this._clearDragEvents();
             if (tag === 'start') {
                 this._activeTag = DataZoomActiveTag.startHandler;
                 this._activeItem = this._startHandlerMask;
@@ -23035,14 +23045,15 @@ class DataZoom extends AbstractComponent {
             this._activeState = true;
             this._activeCache.startPos = this.eventPosToStagePos(e);
             this._activeCache.lastPos = this.eventPosToStagePos(e);
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            this.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+            const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+            const triggers = getEndTriggersOfDrag();
+            evtTarget.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._pointerMove = (e) => {
-            e.stopPropagation();
+            e.preventDefault();
             const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             const { attPos, max } = this._layoutCache;
@@ -23072,12 +23083,12 @@ class DataZoom extends AbstractComponent {
                         end = end + dis;
                     }
                 }
-                this._activeCache.lastPos = pos;
                 brushSelect && this.renderDragMask();
             }
             start = Math.min(Math.max(start, 0), 1);
             end = Math.min(Math.max(end, 0), 1);
             if (startAttr !== start || endAttr !== end) {
+                this._activeCache.lastPos = pos;
                 this.setStateAttr(start, end, true);
                 if (realTime) {
                     this._dispatchEvent('change', {
@@ -23092,7 +23103,6 @@ class DataZoom extends AbstractComponent {
             ? this._pointerMove
             : delayMap$1[this.attribute.delayType](this._pointerMove, this.attribute.delayTime);
         this._onHandlerPointerUp = (e) => {
-            e.preventDefault();
             const { start, end, brushSelect, realTime = true } = this.attribute;
             if (this._activeState) {
                 if (this._activeTag === DataZoomActiveTag.background) {
@@ -23107,12 +23117,7 @@ class DataZoom extends AbstractComponent {
                 end: this.state.end,
                 tag: this._activeTag
             });
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            this.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-            this.removeEventListener('pointerup', this._onHandlerPointerUp);
+            this._clearDragEvents();
         };
         const { position, showDetail } = attributes;
         this._activeCache.startPos = position;
@@ -23160,12 +23165,13 @@ class DataZoom extends AbstractComponent {
         if (this._selectedPreviewGroup) {
             this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
         }
-        this.addEventListener('pointerup', this._onHandlerPointerUp);
-        this.addEventListener('pointerupoutside', this._onHandlerPointerUp);
         if (showDetail === 'auto') {
             this.addEventListener('pointerenter', this._onHandlerPointerEnter);
             this.addEventListener('pointerleave', this._onHandlerPointerLeave);
         }
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
     }
     dragMaskSize() {
         const { position } = this.attribute;
@@ -23193,13 +23199,19 @@ class DataZoom extends AbstractComponent {
         var _a, _b;
         return (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventPointTransform(e)) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
     }
+    _clearDragEvents() {
+        const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+        const triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+    }
     _onHandlerPointerEnter(e) {
-        e.stopPropagation();
         this._showText = true;
         this.renderText();
     }
     _onHandlerPointerLeave(e) {
-        e.stopPropagation();
         this._showText = false;
         this.renderText();
     }
@@ -23709,6 +23721,13 @@ class DataZoom extends AbstractComponent {
     setStatePointToData(callback) {
         isFunction(callback) && (this._statePointToData = callback);
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearDragEvents();
+    }
 }
 DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
 
@@ -27216,28 +27235,21 @@ class Slider extends AbstractComponent {
             this._dispatchTooltipEvent('sliderTooltipHide');
         };
         this._onHandlerPointerdown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._currentHandler = e.target;
             this._prePos = this._isHorizontal ? x : y;
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                this.stage.addEventListener('pointerup', this._onHandlerPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onHandlerPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._onHandlerPointerMove = (e) => {
             var _a, _b;
-            e.stopPropagation();
+            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27273,44 +27285,29 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onHandlerPointerUp = (e) => {
-            e.preventDefault();
             this._isChanging = false;
             this._currentHandler = null;
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                this.stage.removeEventListener('pointerup', this._onHandlerPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onHandlerPointerUp);
+            this._clearAllDragEvents();
+        };
+        this._handleTouchMove = (e) => {
+            if (this._isChanging) {
+                e.preventDefault();
             }
         };
         this._onTrackPointerdown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._prePos = this._isHorizontal ? x : y;
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                vglobal.addEventListener('pointerup', this._onTrackPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                this.stage.addEventListener('pointerup', this._onTrackPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onTrackPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onTrackPointerUp);
+            });
         };
         this._onTrackPointerMove = (e) => {
-            e.stopPropagation();
+            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max, inverse } = this.attribute;
             if (max === min) {
@@ -27362,24 +27359,11 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onTrackPointerUp = (e) => {
-            e.preventDefault();
             this._isChanging = false;
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                this.stage.removeEventListener('pointerup', this._onTrackPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onTrackPointerUp);
-            }
+            this._clearAllDragEvents();
         };
         this._onRailPointerDown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27757,6 +27741,9 @@ class Slider extends AbstractComponent {
                 this._track.addEventListener('pointerdown', this._onTrackPointerdown);
             }
             this._railContainer.addEventListener('pointerdown', this._onRailPointerDown);
+            (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+                passive: false
+            });
         }
     }
     _bindTooltipEvents() {
@@ -27767,6 +27754,18 @@ class Slider extends AbstractComponent {
         this._mainContainer.addEventListener('pointermove', this._onTooltipUpdate);
         this._mainContainer.addEventListener('pointerleave', this._onTooltipHide);
     }
+    _clearAllDragEvents() {
+        const triggers = getEndTriggersOfDrag();
+        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+        obj.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onTrackPointerUp);
+        });
+    }
     _updateTrack() {
         const { inverse, railWidth, railHeight } = this.attribute;
         const startHandler = this._startHandler;
@@ -27907,6 +27906,13 @@ class Slider extends AbstractComponent {
             endHandler
         };
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearAllDragEvents();
+    }
 }
 Slider.defaultAttributes = {
     slidable: true,
@@ -29606,7 +29612,7 @@ var IOperateType;
 const DEFAULT_BRUSH_ATTRIBUTES = {
     trigger: 'pointerdown',
     updateTrigger: 'pointermove',
-    endTrigger: 'pointerup',
+    endTrigger: ['pointerup', 'pointerleave'],
     resetTrigger: 'pointerupoutside',
     hasMask: true,
     brushMode: 'single',
@@ -29660,6 +29666,7 @@ class Brush extends AbstractComponent {
                 this._isDownBeforeUpOutside = true;
                 return;
             }
+            this._isDownBeforeUpOutside = false;
             e.stopPropagation();
             const brushMoved = (_a = this.attribute.brushMoved) !== null && _a !== void 0 ? _a : true;
             this._activeMoveState = brushMoved && this._isPosInBrushMask(e);
@@ -29682,6 +29689,14 @@ class Brush extends AbstractComponent {
             : delayMap[this.attribute.delayType](this._onBrushing, this.attribute.delayTime);
         this._onBrushEnd = (e) => {
             var _a;
+            if (this._isDownBeforeUpOutside) {
+                if (!this._isEmptyMask()) {
+                    this._clearMask();
+                    this._dispatchBrushEvent(IOperateType.brushClear, e);
+                }
+                this._isDownBeforeUpOutside = false;
+                return;
+            }
             if (!this._activeDrawState && !this._activeMoveState) {
                 return;
             }
@@ -29689,29 +29704,29 @@ class Brush extends AbstractComponent {
             const { removeOnClick = true } = this.attribute;
             if (this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick) {
                 if ((_a = this._operatingMask) === null || _a === void 0 ? void 0 : _a._AABBBounds.empty()) {
-                    this._dispatchEvent(IOperateType.brushClear, {
-                        operateMask: this._operatingMask,
-                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                        event: e
-                    });
+                    if (!this._isEmptyMask()) {
+                        this._clearMask();
+                        this._dispatchBrushEvent(IOperateType.brushClear, e);
+                    }
+                }
+                else {
+                    delete this._brushMaskAABBBoundsDict[this._operatingMask.name];
+                    this._container.setAttributes({});
+                    this._container.removeChild(this._operatingMask);
+                    if (!this._isEmptyMask()) {
+                        this._dispatchBrushEvent(IOperateType.brushClear, e);
+                    }
+                    else {
+                        this._dispatchBrushEvent(IOperateType.drawEnd, e);
+                    }
                 }
-                this._container.incrementalClearChild();
-                this._brushMaskAABBBoundsDict = {};
             }
             else {
                 if (this._activeDrawState) {
-                    this._dispatchEvent(IOperateType.drawEnd, {
-                        operateMask: this._operatingMask,
-                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                        event: e
-                    });
+                    this._dispatchBrushEvent(IOperateType.drawEnd, e);
                 }
                 if (this._activeMoveState) {
-                    this._dispatchEvent(IOperateType.moveEnd, {
-                        operateMask: this._operatingMask,
-                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                        event: e
-                    });
+                    this._dispatchBrushEvent(IOperateType.moveEnd, e);
                 }
             }
             this._activeDrawState = false;
@@ -29723,23 +29738,14 @@ class Brush extends AbstractComponent {
         };
         this._onBrushClear = (e) => {
             e.preventDefault();
-            const { removeOnClick = true } = this.attribute;
-            if (this._isDownBeforeUpOutside && removeOnClick) {
-                this._dispatchEvent(IOperateType.brushClear, {
-                    operateMask: this._operatingMask,
-                    operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                    event: e
-                });
-                this._container.incrementalClearChild();
-                this._brushMaskAABBBoundsDict = {};
+            if (!this._isEmptyMask()) {
+                this._clearMask();
+                this._dispatchBrushEvent(IOperateType.brushClear, e);
             }
             this._activeDrawState = false;
             this._activeMoveState = false;
             this._isDrawedBeforeEnd = false;
             this._isDownBeforeUpOutside = false;
-            if (this._operatingMask) {
-                this._operatingMask.setAttribute('pickable', false);
-            }
         };
     }
     _bindBrushEvents() {
@@ -29747,44 +29753,19 @@ class Brush extends AbstractComponent {
             return;
         }
         const { trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this.attribute;
-        array(trigger).forEach(t => vglobal.addEventListener(t, this._onBrushStart));
+        array(trigger).forEach(t => this.stage.addEventListener(t, this._onBrushStart));
         array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay));
         array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd));
         array(resetTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushClear));
     }
-    _isPosInBrushMask(e) {
-        const pos = this.eventPosToStagePos(e);
-        const brushMasks = this._container.getChildren();
-        for (let i = 0; i < brushMasks.length; i++) {
-            const { points = [], dx = 0, dy = 0 } = brushMasks[i].attribute;
-            const pointsConsiderOffset = points.map((point) => {
-                return {
-                    x: point.x + dx,
-                    y: point.y + dy
-                };
-            });
-            if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) {
-                this._operatingMask = brushMasks[i];
-                return true;
-            }
-        }
-        return false;
-    }
     _initDraw(e) {
         const { brushMode } = this.attribute;
         const pos = this.eventPosToStagePos(e);
         this._cacheDrawPoints = [pos];
         this._isDrawedBeforeEnd = false;
-        if (brushMode === 'single') {
-            this._brushMaskAABBBoundsDict = {};
-            this._container.incrementalClearChild();
-        }
+        brushMode === 'single' && this._clearMask();
         this._addBrushMask();
-        this._dispatchEvent(IOperateType.drawStart, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-        });
+        this._dispatchBrushEvent(IOperateType.drawStart, e);
     }
     _initMove(e) {
         var _a, _b;
@@ -29801,11 +29782,7 @@ class Brush extends AbstractComponent {
         this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX];
         this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY];
         this._operatingMask.setAttribute('pickable', true);
-        this._dispatchEvent(IOperateType.moveStart, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-        });
+        this._dispatchBrushEvent(IOperateType.moveStart, e);
     }
     _drawing(e) {
         var _a, _b;
@@ -29832,12 +29809,8 @@ class Brush extends AbstractComponent {
                 !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold);
         if (this._isDrawedBeforeEnd) {
             this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
-            this._dispatchEvent(IOperateType.drawing, {
-                operateMask: this._operatingMask,
-                operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                event: e
-            });
         }
+        this._dispatchBrushEvent(IOperateType.drawing, e);
     }
     _moving(e) {
         const startPos = this._cacheMovePoint;
@@ -29856,11 +29829,20 @@ class Brush extends AbstractComponent {
             dy: moveY
         });
         this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
-        this._dispatchEvent(IOperateType.moving, {
-            operateMask: this._operatingMask,
-            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-            event: e
-        });
+        this._dispatchBrushEvent(IOperateType.moving, e);
+    }
+    render() {
+        this.releaseBrushEvents();
+        this._bindBrushEvents();
+        const group = this.createOrUpdateChild('brush-container', {}, 'group');
+        this._container = group;
+    }
+    releaseBrushEvents() {
+        const { trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this.attribute;
+        array(trigger).forEach(t => this.stage.removeEventListener(t, this._onBrushStart));
+        array(updateTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushingWithDelay));
+        array(endTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushEnd));
+        array(resetTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushClear));
     }
     _computeMaskPoints() {
         const { brushType, xRange = [0, 0], yRange = [0, 0] } = this.attribute;
@@ -29929,12 +29911,30 @@ class Brush extends AbstractComponent {
     _addBrushMask() {
         var _a;
         const { brushStyle, hasMask } = this.attribute;
-        const brushMask = graphicCreator.polygon(Object.assign(Object.assign({ points: cloneDeep(this._cacheDrawPoints), cursor: 'move', pickable: false }, brushStyle), { opacity: hasMask ? (_a = brushStyle.opacity) !== null && _a !== void 0 ? _a : 1 : 0 }));
+        const brushMask = graphicCreator.polygon(Object.assign(Object.assign({ points: cloneDeep(this._cacheDrawPoints), cursor: 'move', pickable: false }, brushStyle), { opacity: hasMask ? ((_a = brushStyle.opacity) !== null && _a !== void 0 ? _a : 1) : 0 }));
         brushMask.name = `brush-${Date.now()}`;
         this._operatingMask = brushMask;
         this._container.add(brushMask);
         this._brushMaskAABBBoundsDict[brushMask.name] = brushMask.AABBBounds;
     }
+    _isPosInBrushMask(e) {
+        const pos = this.eventPosToStagePos(e);
+        const brushMasks = this._container.getChildren();
+        for (let i = 0; i < brushMasks.length; i++) {
+            const { points = [], dx = 0, dy = 0 } = brushMasks[i].attribute;
+            const pointsConsiderOffset = points.map((point) => {
+                return {
+                    x: point.x + dx,
+                    y: point.y + dy
+                };
+            });
+            if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) {
+                this._operatingMask = brushMasks[i];
+                return true;
+            }
+        }
+        return false;
+    }
     _outOfInteractiveRange(e) {
         const { interactiveRange } = this.attribute;
         const { minY = -Infinity, maxY = Infinity, minX = -Infinity, maxX = Infinity } = interactiveRange;
@@ -29947,17 +29947,21 @@ class Brush extends AbstractComponent {
     eventPosToStagePos(e) {
         return this.stage.eventPointTransform(e);
     }
-    render() {
-        this._bindBrushEvents();
-        const group = this.createOrUpdateChild('brush-container', {}, 'group');
-        this._container = group;
+    _dispatchBrushEvent(operateType, e) {
+        this._dispatchEvent(operateType, {
+            operateMask: this._operatingMask,
+            operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+            event: e
+        });
     }
-    releaseBrushEvents() {
-        const { delayType = 'throttle', delayTime = 0, trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this.attribute;
-        array(trigger).forEach(t => vglobal.removeEventListener(t, this._onBrushStart));
-        array(updateTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushingWithDelay));
-        array(endTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushEnd));
-        array(resetTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushClear));
+    _clearMask() {
+        this._brushMaskAABBBoundsDict = {};
+        this._container.incrementalClearChild();
+        this._operatingMask = null;
+    }
+    _isEmptyMask() {
+        return (isEmpty(this._brushMaskAABBBoundsDict) ||
+            Object.keys(this._brushMaskAABBBoundsDict).every(key => this._brushMaskAABBBoundsDict[key].empty()));
     }
 }
 Brush.defaultAttributes = DEFAULT_BRUSH_ATTRIBUTES;
@@ -31500,6 +31504,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.7-alpha.0";
+const version = "0.22.7-alpha.10";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };