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

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'];
-    }
-    return ['pointerup', 'pointerleave', 'pointerupoutside'];
-}
-
 const delayMap$2 = {
     debounce: debounce,
     throttle: throttle
@@ -14960,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 });
-            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;
@@ -15009,12 +15005,15 @@ class ScrollBar extends AbstractComponent {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
             });
-            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);
-            });
+            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) {
@@ -23999,21 +23998,30 @@ function commonLineClipIn(line, label, duration, delay, easing) {
             .to({ clipRange: 1 }, stepDuration, easing);
     });
     graphicFadeIn(line.endSymbol, delay + startSymbolDuration + lineDuration, endSymbolDuration, easing);
-    graphicFadeIn(label.getTextShape(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing);
-    graphicFadeIn(label.getBgRect(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing);
+    array(label).forEach(labelNode => {
+        const delayTime = delay + startSymbolDuration + lineDuration + endSymbolDuration;
+        graphicFadeIn(labelNode.getTextShape(), delayTime, labelDuration, easing);
+        graphicFadeIn(labelNode.getBgRect(), delayTime, labelDuration, easing);
+    });
 }
 
 function commonLineFadeIn(line, label, duration, delay, easing) {
     segmentFadeIn(line, delay, duration, easing);
-    tagFadeIn(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+    });
 }
 function areaFadeIn(area, label, duration, delay, easing) {
     graphicFadeIn(area, delay, duration, easing);
-    tagFadeIn(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+    });
 }
 function arcAreaFadeIn(area, label, duration, delay, easing) {
     graphicFadeIn(area, delay, duration, easing);
-    tagFadeIn(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeIn(labelNode, delay, duration, easing);
+    });
 }
 function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
     var _a;
@@ -24029,15 +24037,21 @@ function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
 
 function commonLineFadeOut(line, label, duration, delay, easing) {
     segmentFadeOut(line, delay, duration, easing);
-    tagFadeOut(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+    });
 }
 function areaFadeOut(area, label, duration, delay, easing) {
     graphicFadeOut(area, delay, duration, easing);
-    tagFadeOut(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+    });
 }
 function arcAreaFadeOut(area, label, duration, delay, easing) {
     graphicFadeOut(area, delay, duration, easing);
-    tagFadeOut(label, delay, duration, easing);
+    array(label).forEach(labelNode => {
+        tagFadeOut(labelNode, delay, duration, easing);
+    });
 }
 function pointFadeOut(itemLine, decorativeLine, item, duration, delay, easing) {
     var _a;
@@ -24191,6 +24205,48 @@ 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);
@@ -24201,20 +24257,17 @@ class MarkCommonLine extends Marker {
     getLine() {
         return this._line;
     }
-    getLabel() {
-        return this._label;
-    }
-    setLabelPos() {
-        const { label = {}, limitRect } = this.attribute;
-        const { position, confine, autoRotate } = label;
-        const labelPoint = this.getPointAttrByPosition(position);
+    setLabelPos(labelNode, labelAttrs) {
+        const { limitRect } = this.attribute;
+        const { position, confine, autoRotate } = labelAttrs;
+        const labelPoint = this.getPointAttrByPosition(position, labelAttrs);
         const labelAngle = position.toString().toLocaleLowerCase().includes('start')
             ? this._line.getStartAngle() || 0
             : this._line.getEndAngle() || 0;
-        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) }));
+        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) }));
         if (limitRect && confine) {
             const { x, y, width, height } = limitRect;
-            limitShapeInBounds(this._label, {
+            limitShapeInBounds(labelNode, {
                 x1: x,
                 y1: y,
                 x2: x + width,
@@ -24223,32 +24276,18 @@ 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);
-        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();
+        this.addMarkLineLabels(container);
     }
     updateMarker() {
-        const { label, state } = this.attribute;
         this.setLineAttributes();
-        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();
-        }
+        this.updateMarkLineLabels();
     }
 }
+mixin(MarkCommonLine, MarkLabelMixin);
 
 const FUZZY_EQUAL_DELTA = 0.001;
 const DEFAULT_MARK_LINE_THEME = {
@@ -24437,6 +24476,7 @@ const DEFAULT_MARK_ARC_LINE_THEME = {
         lineWidth: 0
     },
     label: {
+        autoRotate: true,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         refX: 0,
         refY: 0,
@@ -24491,6 +24531,7 @@ const DEFAULT_MARK_AREA_THEME = {
 const DEFAULT_MARK_ARC_AREA_THEME = {
     interactive: true,
     label: {
+        autoRotate: true,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         textStyle: {
             fill: '#fff',
@@ -24749,10 +24790,9 @@ class MarkLine extends MarkCommonLine {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkLine.defaultAttributes, attributes));
         this.name = 'markLine';
     }
-    getPointAttrByPosition(position) {
+    getPointAttrByPosition(position, labelAttrs) {
         var _a;
-        const { label = {} } = this.attribute;
-        const { refX = 0, refY = 0 } = label;
+        const { refX = 0, refY = 0 } = labelAttrs;
         const points = this._line.getMainSegmentPoints();
         const lineEndAngle = (_a = this._line.getEndAngle()) !== null && _a !== void 0 ? _a : 0;
         const labelAngle = isPostiveXAxis(lineEndAngle) ? lineEndAngle : lineEndAngle;
@@ -24784,10 +24824,10 @@ class MarkLine extends MarkCommonLine {
             angle: labelAngle
         };
     }
-    getRotateByAngle(angle) {
+    getRotateByAngle(angle, labelAttrs) {
         var _a;
         const itemAngle = isPostiveXAxis(angle) ? angle : angle - Math.PI;
-        return itemAngle + ((_a = this.attribute.label.refAngle) !== null && _a !== void 0 ? _a : 0);
+        return itemAngle + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0);
     }
     getTextStyle(position, labelAngle, autoRotate) {
         if (fuzzyEqualNumber(Math.abs(labelAngle), Math.PI / 2, FUZZY_EQUAL_DELTA) ||
@@ -24858,6 +24898,12 @@ 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;
 
@@ -24874,9 +24920,6 @@ 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';
@@ -24903,16 +24946,15 @@ class MarkArea extends Marker {
         }
         return result;
     }
-    setLabelPos() {
+    setLabelPos(labelNode, labelAttrs) {
         var _a;
-        if (this._label && this._area) {
-            const { label = {} } = this.attribute;
-            const labelPosition = (_a = label.position) !== null && _a !== void 0 ? _a : 'middle';
+        if (this._area) {
+            const labelPosition = (_a = labelAttrs.position) !== null && _a !== void 0 ? _a : 'middle';
             const labelPoint = this.getPointAttrByPosition(labelPosition);
-            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) {
+            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) {
                 const { x, y, width, height } = this.attribute.limitRect;
-                limitShapeInBounds(this._label, {
+                limitShapeInBounds(labelNode, {
                     x1: x,
                     y1: y,
                     x2: x + width,
@@ -24922,34 +24964,21 @@ class MarkArea extends Marker {
         }
     }
     initMarker(container) {
-        const { points, label, areaStyle, state } = this.attribute;
+        const { points, 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);
-        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();
+        this._addMarkLabels(container, 'mark-area-label', MarkArea.defaultAttributes.label);
     }
     updateMarker() {
-        const { points, label, areaStyle, state } = this.attribute;
+        const { points, 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);
         }
-        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();
+        this._updateMarkLabels(MarkArea.defaultAttributes.label);
     }
     isValidPoints() {
         const { points } = this.attribute;
@@ -24967,6 +24996,7 @@ class MarkArea extends Marker {
     }
 }
 MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME;
+mixin(MarkArea, MarkLabelMixin);
 
 loadMarkArcLineComponent();
 function registerMarkArcLineAnimate() {
@@ -24979,14 +25009,12 @@ class MarkArcLine extends MarkCommonLine {
         }
     }
     constructor(attributes, options) {
-        super((options === null || options === void 0 ? void 0 : options.skipDefault)
-            ? attributes
-            : merge({}, MarkArcLine.defaultAttributes, attributes, { label: { autoRotate: true } }));
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArcLine.defaultAttributes, attributes));
         this.name = 'markArcLine';
     }
-    getPointAttrByPosition(direction) {
-        const { center, radius, startAngle, endAngle, label } = this.attribute;
-        const { refX = 0, refY = 0 } = label;
+    getPointAttrByPosition(direction, labelAttrs) {
+        const { center, radius, startAngle, endAngle } = this.attribute;
+        const { refX = 0, refY = 0 } = labelAttrs;
         let angle;
         switch (direction) {
             case IMarkCommonArcLabelPosition.arcInnerStart:
@@ -25018,9 +25046,9 @@ class MarkArcLine extends MarkCommonLine {
     getTextStyle(position) {
         return DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[position];
     }
-    getRotateByAngle(angle) {
+    getRotateByAngle(angle, labelAttrs) {
         var _a;
-        return angle - Math.PI / 2 + ((_a = this.attribute.label.refAngle) !== null && _a !== void 0 ? _a : 0);
+        return angle - Math.PI / 2 + ((_a = labelAttrs.refAngle) !== null && _a !== void 0 ? _a : 0);
     }
     createSegment() {
         const { center, radius, startAngle, endAngle, startSymbol, endSymbol, lineStyle, state } = this
@@ -25063,6 +25091,12 @@ 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;
 
@@ -25079,20 +25113,15 @@ 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, { label: { autoRotate: true } }));
+        super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, MarkArcArea.defaultAttributes, attributes));
         this.name = 'markArcArea';
         this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation;
         this.defaultExitAnimation = DefaultExitMarkerAnimation;
     }
-    getPointAttrByPosition(position) {
-        const { center, innerRadius, outerRadius, startAngle, endAngle, label } = this.attribute;
-        const { refX = 0, refY = 0 } = label;
+    getPointAttrByPosition(position, labelAttrs) {
+        const { center, innerRadius, outerRadius, startAngle, endAngle } = this.attribute;
+        const { refX = 0, refY = 0 } = labelAttrs;
         let radius;
         let angle;
         switch (position) {
@@ -25136,16 +25165,15 @@ class MarkArcArea extends Marker {
             angle
         };
     }
-    setLabelPos() {
+    setLabelPos(labelNode, labelAttrs) {
         var _a;
-        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) {
+        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) {
                 const { x, y, width, height } = this.attribute.limitRect;
-                limitShapeInBounds(this._label, {
+                limitShapeInBounds(labelNode, {
                     x1: x,
                     y1: y,
                     x2: x + width,
@@ -25155,7 +25183,7 @@ class MarkArcArea extends Marker {
         }
     }
     initMarker(container) {
-        const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, label, state } = this
+        const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, state } = this
             .attribute;
         const area = graphicCreator.arc(Object.assign({ x: center.x, y: center.y, innerRadius,
             outerRadius,
@@ -25165,14 +25193,7 @@ class MarkArcArea extends Marker {
         area.name = 'polar-mark-area-area';
         this._area = area;
         container.add(area);
-        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();
+        this._addMarkLabels(container, 'mark-area-label', MarkArcArea.defaultAttributes.label);
     }
     updateMarker() {
         const { center, innerRadius, outerRadius, startAngle, endAngle, areaStyle, label, state } = this
@@ -25184,19 +25205,14 @@ class MarkArcArea extends Marker {
                 endAngle }, areaStyle));
             this._area.states = merge({}, DEFAULT_STATES$2, state === null || state === void 0 ? void 0 : state.area);
         }
-        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();
-        }
+        this._updateMarkLabels(MarkArcArea.defaultAttributes.label);
     }
     isValidPoints() {
         return true;
     }
 }
 MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME;
+mixin(MarkArcArea, MarkLabelMixin);
 
 loadMarkPointComponent();
 function registerMarkPointAnimate() {
@@ -27222,12 +27238,19 @@ class Slider extends AbstractComponent {
             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 });
-            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;
@@ -27270,24 +27293,38 @@ class Slider extends AbstractComponent {
             e.preventDefault();
             this._isChanging = false;
             this._currentHandler = null;
-            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);
-            });
+            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) => {
             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 });
-            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.stopPropagation();
@@ -27344,12 +27381,19 @@ class Slider extends AbstractComponent {
         this._onTrackPointerUp = (e) => {
             e.preventDefault();
             this._isChanging = false;
-            const triggers = getEndTriggersOfDrag();
-            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true });
-            triggers.forEach((trigger) => {
-                obj.removeEventListener(trigger, this._onTrackPointerUp);
-            });
+            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) => {
             e.stopPropagation();
@@ -31473,6 +31517,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.7-alpha.1";
+const version = "0.22.7-alpha.2";
 
 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/empty-tip/type.js

@@ -1 +1,2 @@
-export { };
+export { };
+//# sourceMappingURL=type.js.map

package/es/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "0.22.7-alpha.1";
+export declare const version = "0.22.7-alpha.2";
 export * from './core/base';
 export * from './core/type';
 export * from './scrollbar';

package/es/index.js

@@ -1,4 +1,4 @@
-export const version = "0.22.7-alpha.1";
+export const version = "0.22.7-alpha.2";
 
 export * from "./core/base";
 

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,gBAAgB,CAAC;AAExC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.22.7-alpha.1\";\n\nexport * from './core/base';\nexport * from './core/type';\nexport * from './scrollbar';\nexport * from './tag';\nexport * from './poptip';\nexport * from './crosshair';\nexport * from './label';\nexport * from './axis';\nexport * from './axis/grid';\nexport * from './segment';\nexport * from './data-zoom';\nexport * from './marker';\nexport * from './pager';\nexport * from './legend';\nexport * from './title';\nexport * from './indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport * from './brush';\nexport * from './tooltip';\nexport * from './timeline';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\nexport * from './radio';\nexport * from './empty-tip';\nexport * from './weather';\nexport * from './util';\nexport * from './switch';\nexport * from './label-item';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,gBAAgB,CAAC;AAExC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.22.7-alpha.2\";\n\nexport * from './core/base';\nexport * from './core/type';\nexport * from './scrollbar';\nexport * from './tag';\nexport * from './poptip';\nexport * from './crosshair';\nexport * from './label';\nexport * from './axis';\nexport * from './axis/grid';\nexport * from './segment';\nexport * from './data-zoom';\nexport * from './marker';\nexport * from './pager';\nexport * from './legend';\nexport * from './title';\nexport * from './indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport * from './brush';\nexport * from './tooltip';\nexport * from './timeline';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\nexport * from './radio';\nexport * from './empty-tip';\nexport * from './weather';\nexport * from './util';\nexport * from './switch';\nexport * from './label-item';\n"]}

package/es/jsx/index.js

@@ -1,2 +1 @@
-export * from "./component-type";
-//# sourceMappingURL=index.js.map
+export * from "./component-type";