@visactor/vrender-components 0.22.7-alpha.2 → 0.22.7-alpha.4

package/dist/index.es.js

@@ -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 });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onSliderPointerUp);
+            });
         };
         this._computeScrollValue = (e) => {
             const { direction } = this.attribute;
@@ -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 });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onSliderPointerUp);
+        });
+    }
     _reset() {
         this._sliderRenderBounds = null;
         this._sliderLimitRange = null;
@@ -23011,6 +23016,7 @@ class DataZoom extends AbstractComponent {
         };
         this._statePointToData = state => state;
         this._onHandlerPointerDown = (e, tag) => {
+            this._clearDragEvents();
             e.stopPropagation();
             if (tag === 'start') {
                 this._activeTag = DataZoomActiveTag.startHandler;
@@ -23035,11 +23041,12 @@ 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 });
+            triggers.forEach((trigger) => {
+                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._pointerMove = (e) => {
             e.stopPropagation();
@@ -23107,12 +23114,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,8 +23162,6 @@ 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);
@@ -23193,6 +23193,14 @@ 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 });
+        triggers.forEach((trigger) => {
+            evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+    }
     _onHandlerPointerEnter(e) {
         e.stopPropagation();
         this._showText = true;
@@ -23998,30 +24006,21 @@ function commonLineClipIn(line, label, duration, delay, easing) {
             .to({ clipRange: 1 }, stepDuration, easing);
     });
     graphicFadeIn(line.endSymbol, delay + startSymbolDuration + lineDuration, endSymbolDuration, easing);
-    array(label).forEach(labelNode => {
-        const delayTime = delay + startSymbolDuration + lineDuration + endSymbolDuration;
-        graphicFadeIn(labelNode.getTextShape(), delayTime, labelDuration, easing);
-        graphicFadeIn(labelNode.getBgRect(), delayTime, labelDuration, easing);
-    });
+    graphicFadeIn(label.getTextShape(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing);
+    graphicFadeIn(label.getBgRect(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing);
 }
 
 function commonLineFadeIn(line, label, duration, delay, easing) {
     segmentFadeIn(line, delay, duration, easing);
-    array(label).forEach(labelNode => {
-        tagFadeIn(labelNode, delay, duration, easing);
-    });
+    tagFadeIn(label, delay, duration, easing);
 }
 function areaFadeIn(area, label, duration, delay, easing) {
     graphicFadeIn(area, delay, duration, easing);
-    array(label).forEach(labelNode => {
-        tagFadeIn(labelNode, delay, duration, easing);
-    });
+    tagFadeIn(label, delay, duration, easing);
 }
 function arcAreaFadeIn(area, label, duration, delay, easing) {
     graphicFadeIn(area, delay, duration, easing);
-    array(label).forEach(labelNode => {
-        tagFadeIn(labelNode, delay, duration, easing);
-    });
+    tagFadeIn(label, delay, duration, easing);
 }
 function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
     var _a;
@@ -24037,21 +24036,15 @@ function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
 
 function commonLineFadeOut(line, label, duration, delay, easing) {
     segmentFadeOut(line, delay, duration, easing);
-    array(label).forEach(labelNode => {
-        tagFadeOut(labelNode, delay, duration, easing);
-    });
+    tagFadeOut(label, delay, duration, easing);
 }
 function areaFadeOut(area, label, duration, delay, easing) {
     graphicFadeOut(area, delay, duration, easing);
-    array(label).forEach(labelNode => {
-        tagFadeOut(labelNode, delay, duration, easing);
-    });
+    tagFadeOut(label, delay, duration, easing);
 }
 function arcAreaFadeOut(area, label, duration, delay, easing) {
     graphicFadeOut(area, delay, duration, easing);
-    array(label).forEach(labelNode => {
-        tagFadeOut(labelNode, delay, duration, easing);
-    });
+    tagFadeOut(label, delay, duration, easing);
 }
 function pointFadeOut(itemLine, decorativeLine, item, duration, delay, easing) {
     var _a;
@@ -24205,48 +24198,6 @@ const DefaultExitMarkerAnimation = {
     delay: 0
 };
 
-class MarkLabelMixin {
-    getLabel() {
-        return this._label;
-    }
-    _addMarkLabels(container, labelName, defaultLabelAttrs) {
-        const { label, state } = this.attribute;
-        const labelStates = array(state === null || state === void 0 ? void 0 : state.label);
-        const labelBackgroundStates = array(state === null || state === void 0 ? void 0 : state.labelBackground);
-        const labelShapes = array(label).map((labelAttrs, index) => {
-            var _a, _b;
-            const finalLabelAttrs = merge({}, defaultLabelAttrs, labelAttrs);
-            const markLabel = new Tag(Object.assign(Object.assign({}, finalLabelAttrs), { state: {
-                    panel: merge({}, DEFAULT_STATES$2, (_a = labelBackgroundStates[index]) !== null && _a !== void 0 ? _a : last(labelBackgroundStates)),
-                    text: merge({}, DEFAULT_STATES$2, (_b = labelStates[index]) !== null && _b !== void 0 ? _b : last(labelStates))
-                } }));
-            markLabel.name = labelName;
-            container.add(markLabel);
-            this.setLabelPos(markLabel, finalLabelAttrs);
-            return markLabel;
-        });
-        this._label = array(labelShapes).length === 1 ? labelShapes[0] : labelShapes;
-    }
-    _updateMarkLabels(defaultLabelAttrs) {
-        const { label, state } = this.attribute;
-        const labelShapes = array(this._label);
-        const labelStates = array(state === null || state === void 0 ? void 0 : state.label);
-        const labelBackgroundStates = array(state === null || state === void 0 ? void 0 : state.labelBackground);
-        if (labelShapes.length) {
-            const labels = array(label);
-            labelShapes.forEach((labelItem, index) => {
-                var _a, _b;
-                const finalLabelAttrs = merge({}, defaultLabelAttrs, labels[index]);
-                labelItem.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, finalLabelAttrs), { state: {
-                        panel: merge({}, DEFAULT_STATES$2, (_a = labelBackgroundStates[index]) !== null && _a !== void 0 ? _a : last(labelBackgroundStates)),
-                        text: merge({}, DEFAULT_STATES$2, (_b = labelStates[index]) !== null && _b !== void 0 ? _b : last(labelStates))
-                    } }));
-                this.setLabelPos(labelItem, finalLabelAttrs);
-            });
-        }
-    }
-}
-
 class MarkCommonLine extends Marker {
     constructor() {
         super(...arguments);
@@ -24257,17 +24208,20 @@ class MarkCommonLine extends Marker {
     getLine() {
         return this._line;
     }
-    setLabelPos(labelNode, labelAttrs) {
-        const { limitRect } = this.attribute;
-        const { position, confine, autoRotate } = labelAttrs;
-        const labelPoint = this.getPointAttrByPosition(position, labelAttrs);
+    getLabel() {
+        return this._label;
+    }
+    setLabelPos() {
+        const { label = {}, limitRect } = this.attribute;
+        const { position, confine, autoRotate } = label;
+        const labelPoint = this.getPointAttrByPosition(position);
         const labelAngle = position.toString().toLocaleLowerCase().includes('start')
             ? this._line.getStartAngle() || 0
             : this._line.getEndAngle() || 0;
-        labelNode.setAttributes(Object.assign(Object.assign({}, labelPoint.position), { angle: autoRotate ? this.getRotateByAngle(labelPoint.angle, labelAttrs) : 0, textStyle: Object.assign(Object.assign({}, this.getTextStyle(position, labelAngle, autoRotate)), labelAttrs.textStyle) }));
+        this._label.setAttributes(Object.assign(Object.assign({}, labelPoint.position), { angle: autoRotate ? this.getRotateByAngle(labelPoint.angle) : 0, textStyle: Object.assign(Object.assign({}, this.getTextStyle(position, labelAngle, autoRotate)), label.textStyle) }));
         if (limitRect && confine) {
             const { x, y, width, height } = limitRect;
-            limitShapeInBounds(labelNode, {
+            limitShapeInBounds(this._label, {
                 x1: x,
                 y1: y,
                 x2: x + width,
@@ -24276,18 +24230,32 @@ class MarkCommonLine extends Marker {
         }
     }
     initMarker(container) {
+        const { label, state } = this.attribute;
         const line = this.createSegment();
         line.name = 'mark-common-line-line';
         this._line = line;
         container.add(line);
-        this.addMarkLineLabels(container);
+        const markLabel = new Tag(Object.assign(Object.assign({}, label), { state: {
+                panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
+                text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
+            } }));
+        markLabel.name = 'mark-common-line-label';
+        this._label = markLabel;
+        container.add(markLabel);
+        this.setLabelPos();
     }
     updateMarker() {
+        const { label, state } = this.attribute;
         this.setLineAttributes();
-        this.updateMarkLineLabels();
+        if (this._label) {
+            this._label.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, label), { state: {
+                    panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
+                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
+                } }));
+            this.setLabelPos();
+        }
     }
 }
-mixin(MarkCommonLine, MarkLabelMixin);
 
 const FUZZY_EQUAL_DELTA = 0.001;
 const DEFAULT_MARK_LINE_THEME = {
@@ -24476,7 +24444,6 @@ const DEFAULT_MARK_ARC_LINE_THEME = {
         lineWidth: 0
     },
     label: {
-        autoRotate: true,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         refX: 0,
         refY: 0,
@@ -24531,7 +24498,6 @@ const DEFAULT_MARK_AREA_THEME = {
 const DEFAULT_MARK_ARC_AREA_THEME = {
     interactive: true,
     label: {
-        autoRotate: true,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         textStyle: {
             fill: '#fff',
@@ -24790,9 +24756,10 @@ class MarkLine extends MarkCommonLine {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkLine.defaultAttributes, attributes));
         this.name = 'markLine';
     }
-    getPointAttrByPosition(position, labelAttrs) {
+    getPointAttrByPosition(position) {
         var _a;
-        const { refX = 0, refY = 0 } = labelAttrs;
+        const { label = {} } = this.attribute;
+        const { refX = 0, refY = 0 } = label;
         const points = this._line.getMainSegmentPoints();
         const lineEndAngle = (_a = this._line.getEndAngle()) !== null && _a !== void 0 ? _a : 0;
         const labelAngle = isPostiveXAxis(lineEndAngle) ? lineEndAngle : lineEndAngle;
@@ -24824,10 +24791,10 @@ class MarkLine extends MarkCommonLine {
             angle: labelAngle
         };
     }
-    getRotateByAngle(angle, labelAttrs) {
+    getRotateByAngle(angle) {
         var _a;
         const itemAngle = isPostiveXAxis(angle) ? angle : angle - Math.PI;
-        return itemAngle + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0);
+        return itemAngle + ((_a = this.attribute.label.refAngle) !== null && _a !== void 0 ? _a : 0);
     }
     getTextStyle(position, labelAngle, autoRotate) {
         if (fuzzyEqualNumber(Math.abs(labelAngle), Math.PI / 2, FUZZY_EQUAL_DELTA) ||
@@ -24898,12 +24865,6 @@ class MarkLine extends MarkCommonLine {
         });
         return validFlag;
     }
-    addMarkLineLabels(container) {
-        this._addMarkLabels(container, 'mark-common-line-label', MarkLine.defaultAttributes.label);
-    }
-    updateMarkLineLabels() {
-        this._updateMarkLabels(MarkLine.defaultAttributes.label);
-    }
 }
 MarkLine.defaultAttributes = DEFAULT_MARK_LINE_THEME;
 
@@ -24920,6 +24881,9 @@ class MarkArea extends Marker {
     getArea() {
         return this._area;
     }
+    getLabel() {
+        return this._label;
+    }
     constructor(attributes, options) {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArea.defaultAttributes, attributes));
         this.name = 'markArea';
@@ -24946,15 +24910,16 @@ class MarkArea extends Marker {
         }
         return result;
     }
-    setLabelPos(labelNode, labelAttrs) {
+    setLabelPos() {
         var _a;
-        if (this._area) {
-            const labelPosition = (_a = labelAttrs.position) !== null && _a !== void 0 ? _a : 'middle';
+        if (this._label && this._area) {
+            const { label = {} } = this.attribute;
+            const labelPosition = (_a = label.position) !== null && _a !== void 0 ? _a : 'middle';
             const labelPoint = this.getPointAttrByPosition(labelPosition);
-            labelNode.setAttributes(Object.assign(Object.assign({}, labelPoint), { textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle) }));
-            if (this.attribute.limitRect && labelAttrs.confine) {
+            this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), { textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle) }));
+            if (this.attribute.limitRect && label.confine) {
                 const { x, y, width, height } = this.attribute.limitRect;
-                limitShapeInBounds(labelNode, {
+                limitShapeInBounds(this._label, {
                     x1: x,
                     y1: y,
                     x2: x + width,
@@ -24964,21 +24929,34 @@ class MarkArea extends Marker {
         }
     }
     initMarker(container) {
-        const { points, areaStyle, state } = this.attribute;
+        const { points, label, areaStyle, state } = this.attribute;
         const area = graphicCreator.polygon(Object.assign({ points: points }, areaStyle));
         area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.area);
         area.name = 'mark-area-polygon';
         this._area = area;
         container.add(area);
-        this._addMarkLabels(container, 'mark-area-label', MarkArea.defaultAttributes.label);
+        const markLabel = new Tag(Object.assign(Object.assign({}, label), { state: {
+                panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
+                text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
+            } }));
+        markLabel.name = 'mark-area-label';
+        this._label = markLabel;
+        container.add(markLabel);
+        this.setLabelPos();
     }
     updateMarker() {
-        const { points, areaStyle, state } = this.attribute;
+        const { points, label, areaStyle, state } = this.attribute;
         if (this._area) {
             this._area.setAttributes(Object.assign({ points: points }, areaStyle));
             this._area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.area);
         }
-        this._updateMarkLabels(MarkArea.defaultAttributes.label);
+        if (this._label) {
+            this._label.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, label), { state: {
+                    panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
+                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
+                } }));
+        }
+        this.setLabelPos();
     }
     isValidPoints() {
         const { points } = this.attribute;
@@ -24996,7 +24974,6 @@ class MarkArea extends Marker {
     }
 }
 MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME;
-mixin(MarkArea, MarkLabelMixin);
 
 loadMarkArcLineComponent();
 function registerMarkArcLineAnimate() {
@@ -25009,12 +24986,14 @@ class MarkArcLine extends MarkCommonLine {
         }
     }
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArcLine.defaultAttributes, attributes));
+        super((options === null || options === void 0 ? void 0 : options.skipDefault)
+            ? attributes
+            : merge({}, MarkArcLine.defaultAttributes, attributes, { label: { autoRotate: true } }));
         this.name = 'markArcLine';
     }
-    getPointAttrByPosition(direction, labelAttrs) {
-        const { center, radius, startAngle, endAngle } = this.attribute;
-        const { refX = 0, refY = 0 } = labelAttrs;
+    getPointAttrByPosition(direction) {
+        const { center, radius, startAngle, endAngle, label } = this.attribute;
+        const { refX = 0, refY = 0 } = label;
         let angle;
         switch (direction) {
             case IMarkCommonArcLabelPosition.arcInnerStart:
@@ -25046,9 +25025,9 @@ class MarkArcLine extends MarkCommonLine {
     getTextStyle(position) {
         return DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[position];
     }
-    getRotateByAngle(angle, labelAttrs) {
+    getRotateByAngle(angle) {
         var _a;
-        return angle - Math.PI / 2 + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0);
+        return angle - Math.PI / 2 + ((_a = this.attribute.label.refAngle) !== null && _a !== void 0 ? _a : 0);
     }
     createSegment() {
         const { center, radius, startAngle, endAngle, startSymbol, endSymbol, lineStyle, state } = this
@@ -25091,12 +25070,6 @@ class MarkArcLine extends MarkCommonLine {
     isValidPoints() {
         return true;
     }
-    addMarkLineLabels(container) {
-        this._addMarkLabels(container, 'mark-common-line-label', MarkArcLine.defaultAttributes.label);
-    }
-    updateMarkLineLabels() {
-        this._updateMarkLabels(MarkArcLine.defaultAttributes.label);
-    }
 }
 MarkArcLine.defaultAttributes = DEFAULT_MARK_ARC_LINE_THEME;
 
@@ -25113,15 +25086,20 @@ class MarkArcArea extends Marker {
     getArea() {
         return this._area;
     }
+    getLabel() {
+        return this._label;
+    }
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArcArea.defaultAttributes, attributes));
+        super((options === null || options === void 0 ? void 0 : options.skipDefault)
+            ? attributes
+            : merge({}, MarkArcArea.defaultAttributes, attributes, { label: { autoRotate: true } }));
         this.name = 'markArcArea';
         this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation;
         this.defaultExitAnimation = DefaultExitMarkerAnimation;
     }
-    getPointAttrByPosition(position, labelAttrs) {
-        const { center, innerRadius, outerRadius, startAngle, endAngle } = this.attribute;
-        const { refX = 0, refY = 0 } = labelAttrs;
+    getPointAttrByPosition(position) {
+        const { center, innerRadius, outerRadius, startAngle, endAngle, label } = this.attribute;
+        const { refX = 0, refY = 0 } = label;
         let radius;
         let angle;
         switch (position) {
@@ -25165,15 +25143,16 @@ class MarkArcArea extends Marker {
             angle
         };
     }
-    setLabelPos(labelNode, labelAttrs) {
+    setLabelPos() {
         var _a;
-        if (this._area) {
-            const { position: labelPosition = 'arcInnerMiddle', autoRotate } = labelAttrs;
-            const labelAttr = this.getPointAttrByPosition(labelPosition, labelAttrs);
-            labelNode.setAttributes(Object.assign(Object.assign({}, labelAttr.position), { angle: autoRotate ? labelAttr.angle - Math.PI / 2 + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle) }));
-            if (this.attribute.limitRect && labelAttrs.confine) {
+        if (this._label && this._area) {
+            const { label = {} } = this.attribute;
+            const { position: labelPosition = 'arcInnerMiddle', autoRotate } = label;
+            const labelAttr = this.getPointAttrByPosition(labelPosition);
+            this._label.setAttributes(Object.assign(Object.assign({}, labelAttr.position), { angle: autoRotate ? labelAttr.angle - Math.PI / 2 + ((_a = label.refAngle) !== null && _a !== void 0 ? _a : 0) : 0, textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), label.textStyle) }));
+            if (this.attribute.limitRect && label.confine) {
                 const { x, y, width, height } = this.attribute.limitRect;
-                limitShapeInBounds(labelNode, {
+                limitShapeInBounds(this._label, {
                     x1: x,
                     y1: y,
                     x2: x + width,
@@ -25183,7 +25162,7 @@ class MarkArcArea extends Marker {
         }
     }
     initMarker(container) {
-        const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, state } = this
+        const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, label, state } = this
             .attribute;
         const area = graphicCreator.arc(Object.assign({ x: center.x, y: center.y, innerRadius,
             outerRadius,
@@ -25193,7 +25172,14 @@ class MarkArcArea extends Marker {
         area.name = 'polar-mark-area-area';
         this._area = area;
         container.add(area);
-        this._addMarkLabels(container, 'mark-area-label', MarkArcArea.defaultAttributes.label);
+        const markLabel = new Tag(Object.assign(Object.assign({}, label), { state: {
+                panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
+                text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
+            } }));
+        markLabel.name = 'mark-area-label';
+        this._label = markLabel;
+        container.add(markLabel);
+        this.setLabelPos();
     }
     updateMarker() {
         const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, label, state } = this
@@ -25205,14 +25191,19 @@ class MarkArcArea extends Marker {
                 endAngle }, areaStyle));
             this._area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.area);
         }
-        this._updateMarkLabels(MarkArcArea.defaultAttributes.label);
+        if (this._label) {
+            this._label.setAttributes(Object.assign(Object.assign({ dx: 0, dy: 0 }, label), { state: {
+                    panel: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.labelBackground),
+                    text: merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.label)
+                } }));
+            this.setLabelPos();
+        }
     }
     isValidPoints() {
         return true;
     }
 }
 MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME;
-mixin(MarkArcArea, MarkLabelMixin);
 
 loadMarkPointComponent();
 function registerMarkPointAnimate() {
@@ -27234,23 +27225,17 @@ class Slider extends AbstractComponent {
         };
         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 });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._onHandlerPointerMove = (e) => {
             var _a, _b;
@@ -27293,38 +27278,20 @@ class Slider extends AbstractComponent {
             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._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 });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onTrackPointerUp);
+            });
         };
         this._onTrackPointerMove = (e) => {
             e.stopPropagation();
@@ -27381,22 +27348,11 @@ class Slider extends AbstractComponent {
         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) {
@@ -27784,6 +27740,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 });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onTrackPointerUp);
+        });
+    }
     _updateTrack() {
         const { inverse, railWidth, railHeight } = this.attribute;
         const startHandler = this._startHandler;
@@ -31517,6 +31485,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.7-alpha.2";
+const version = "0.22.7-alpha.4";
 
 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 };