@visactor/vrender-components 0.22.7-alpha.6 → 0.22.7-alpha.8

package/dist/index.es.js

@@ -14909,13 +14909,6 @@ 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
@@ -14949,7 +14942,6 @@ class ScrollBar extends AbstractComponent {
             }
         };
         this._onSliderPointerDown = (e) => {
-            this._clearDragEvents();
             const { stopSliderDownPropagation = true } = this.attribute;
             if (stopSliderDownPropagation) {
                 e.stopPropagation();
@@ -14961,12 +14953,15 @@ class ScrollBar extends AbstractComponent {
                 pos: this._prePos,
                 event: e
             });
-            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);
-            });
+            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);
+            }
         };
         this._computeScrollValue = (e) => {
             const { direction } = this.attribute;
@@ -14988,7 +14983,6 @@ class ScrollBar extends AbstractComponent {
             return [currentPos, currentScrollValue];
         };
         this._onSliderPointerMove = (e) => {
-            e.preventDefault();
             const { stopSliderMovePropagation = true } = this.attribute;
             if (stopSliderMovePropagation) {
                 e.stopPropagation();
@@ -15002,6 +14996,7 @@ 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);
@@ -15010,7 +15005,15 @@ class ScrollBar extends AbstractComponent {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
             });
-            this._clearDragEvents();
+            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);
+            }
         };
     }
     setScrollRange(range, render = true) {
@@ -15143,14 +15146,6 @@ 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;
@@ -23015,13 +23010,8 @@ class DataZoom extends AbstractComponent {
             end: 1
         };
         this._statePointToData = state => state;
-        this._handleTouchMove = (e) => {
-            if (this._activeState) {
-                e.preventDefault();
-            }
-        };
         this._onHandlerPointerDown = (e, tag) => {
-            this._clearDragEvents();
+            e.stopPropagation();
             if (tag === 'start') {
                 this._activeTag = DataZoomActiveTag.startHandler;
                 this._activeItem = this._startHandlerMask;
@@ -23045,15 +23035,14 @@ class DataZoom extends AbstractComponent {
             this._activeState = true;
             this._activeCache.startPos = this.eventPosToStagePos(e);
             this._activeCache.lastPos = this.eventPosToStagePos(e);
-            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);
-            });
+            if (vglobal.env === 'browser') {
+                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
+            }
+            this.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
         };
         this._pointerMove = (e) => {
-            e.preventDefault();
+            e.stopPropagation();
             const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             const { attPos, max } = this._layoutCache;
@@ -23083,12 +23072,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', {
@@ -23103,6 +23092,7 @@ 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) {
@@ -23117,7 +23107,12 @@ class DataZoom extends AbstractComponent {
                 end: this.state.end,
                 tag: this._activeTag
             });
-            this._clearDragEvents();
+            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);
         };
         const { position, showDetail } = attributes;
         this._activeCache.startPos = position;
@@ -23165,11 +23160,12 @@ 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.addEventListener('touchmove', this._handleTouchMove, { passive: false });
     }
     dragMaskSize() {
         const { position } = this.attribute;
@@ -23197,19 +23193,13 @@ 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();
     }
@@ -27226,21 +27216,28 @@ class Slider extends AbstractComponent {
             this._dispatchTooltipEvent('sliderTooltipHide');
         };
         this._onHandlerPointerdown = (e) => {
-            this._clearAllDragEvents();
+            e.stopPropagation();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._currentHandler = e.target;
             this._prePos = this._isHorizontal ? x : y;
-            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);
-            });
+            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);
+            }
         };
         this._onHandlerPointerMove = (e) => {
             var _a, _b;
-            e.preventDefault();
+            e.stopPropagation();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27276,29 +27273,44 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onHandlerPointerUp = (e) => {
+            e.preventDefault();
             this._isChanging = false;
             this._currentHandler = null;
-            this._clearAllDragEvents();
-        };
-        this._handleTouchMove = (e) => {
-            if (this._isChanging) {
-                e.preventDefault();
+            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._onTrackPointerdown = (e) => {
-            this._clearAllDragEvents();
+            e.stopPropagation();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._prePos = this._isHorizontal ? x : y;
-            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);
-            });
+            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);
+            }
         };
         this._onTrackPointerMove = (e) => {
-            e.preventDefault();
+            e.stopPropagation();
             this._isChanging = true;
             const { railWidth, railHeight, min, max, inverse } = this.attribute;
             if (max === min) {
@@ -27350,11 +27362,24 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onTrackPointerUp = (e) => {
+            e.preventDefault();
             this._isChanging = false;
-            this._clearAllDragEvents();
+            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._onRailPointerDown = (e) => {
-            this._clearAllDragEvents();
+            e.stopPropagation();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27732,7 +27757,6 @@ class Slider extends AbstractComponent {
                 this._track.addEventListener('pointerdown', this._onTrackPointerdown);
             }
             this._railContainer.addEventListener('pointerdown', this._onRailPointerDown);
-            vglobal.addEventListener('touchmove', this._handleTouchMove, { passive: false });
         }
     }
     _bindTooltipEvents() {
@@ -27743,18 +27767,6 @@ 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;
@@ -29594,7 +29606,7 @@ var IOperateType;
 const DEFAULT_BRUSH_ATTRIBUTES = {
     trigger: 'pointerdown',
     updateTrigger: 'pointermove',
-    endTrigger: 'pointerup',
+    endTrigger: ['pointerup', 'pointerleave'],
     resetTrigger: 'pointerupoutside',
     hasMask: true,
     brushMode: 'single',
@@ -29648,6 +29660,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);
@@ -29670,6 +29683,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;
             }
@@ -29677,29 +29698,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;
@@ -29711,23 +29732,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() {
@@ -29735,44 +29747,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;
@@ -29789,11 +29776,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;
@@ -29820,12 +29803,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;
@@ -29844,11 +29823,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;
@@ -29917,12 +29905,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;
@@ -29935,17 +29941,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;
@@ -31488,6 +31498,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.7-alpha.6";
+const version = "0.22.7-alpha.8";
 
 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 };

package/es/brush/brush.d.ts

@@ -7,7 +7,7 @@ export declare class Brush extends AbstractComponent<Required<BrushAttributes>>
     static defaultAttributes: {
         trigger: string;
         updateTrigger: string;
-        endTrigger: string;
+        endTrigger: string[];
         resetTrigger: string;
         hasMask: boolean;
         brushMode: string;
@@ -44,7 +44,6 @@ export declare class Brush extends AbstractComponent<Required<BrushAttributes>>
     private _brushMaskAABBBoundsDict;
     constructor(attributes: BrushAttributes, options?: ComponentOptions);
     private _bindBrushEvents;
-    private _isPosInBrushMask;
     private _onBrushStart;
     private _onBrushing;
     private _onBrushingWithDelay;
@@ -54,13 +53,17 @@ export declare class Brush extends AbstractComponent<Required<BrushAttributes>>
     private _initMove;
     private _drawing;
     private _moving;
+    protected render(): void;
+    releaseBrushEvents(): void;
     private _computeMaskPoints;
     private _addBrushMask;
+    private _isPosInBrushMask;
     private _outOfInteractiveRange;
     protected eventPosToStagePos(e: FederatedPointerEvent): {
         x: number;
         y: number;
     };
-    protected render(): void;
-    releaseBrushEvents(): void;
+    private _dispatchBrushEvent;
+    private _clearMask;
+    private _isEmptyMask;
 }