@visactor/vrender-components 0.22.7-alpha.5 → 0.22.7-alpha.7

package/dist/index.es.js

@@ -2835,7 +2835,6 @@ function applyStrokeStyle(ctx, character) {
   ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
 }
 function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
-  if (desc.length <= 1) return 0;
   if (!width || width <= 0) return 0;
   const textMeasure = application.graphicUtil.textMeasure;
   let index = guessIndex,
@@ -2869,13 +2868,6 @@ function testLetter2(string, index) {
 }
 function measureTextCanvas(text, character) {
   let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "actual";
-  var _a;
-  if ("" === text) return {
-    ascent: 0,
-    height: 0,
-    descent: 0,
-    width: 0
-  };
   const measurement = application.graphicUtil.textMeasure.measureText(text, character),
     result = {
       ascent: 0,
@@ -2885,9 +2877,7 @@ function measureTextCanvas(text, character) {
     },
     ascent = "actual" === mode ? measurement.actualBoundingBoxAscent : measurement.fontBoundingBoxAscent,
     descent = "actual" === mode ? measurement.actualBoundingBoxDescent : measurement.fontBoundingBoxDescent;
-  "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent);
-  const space = null !== (_a = character.space) && void 0 !== _a ? _a : 0;
-  return result.width += space, result;
+  return "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent), result;
 }
 
 var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -4172,7 +4162,7 @@ class FederatedEvent {
   }
   _composedDetailPath(params) {
     if (params && params.graphic) {
-      const g = params.graphic;
+      const g = this.pickParams.graphic;
       if (g.stage) {
         const path = g.stage.eventSystem.manager.propagationPath(g);
         this.detailPath.push(path), this._composedDetailPath(params.params);
@@ -8840,7 +8830,6 @@ function getFixedLRTB(left, right, top, bottom) {
 }
 class Paragraph {
   constructor(text, newLine, character, ascentDescentMode) {
-    var _a, _b;
     this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic", this.ascentDescentMode = ascentDescentMode;
     const lineHeight = calculateLineHeight(character.lineHeight, this.fontSize);
     this.lineHeight = "number" == typeof lineHeight ? lineHeight > this.fontSize ? lineHeight : this.fontSize : Math.floor(1.2 * this.fontSize), this.height = this.lineHeight;
@@ -8853,7 +8842,7 @@ class Paragraph {
     let halfDetaHeight = 0,
       deltaAscent = 0,
       deltaDescent = 0;
-    this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, this.space = character.space, this.dx = null !== (_a = character.dx) && void 0 !== _a ? _a : 0, this.dy = null !== (_b = character.dy) && void 0 !== _b ? _b : 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height), this.ellipsisStr = "...";
+    this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height), this.ellipsisStr = "...";
   }
   updateWidth() {
     const {
@@ -8872,11 +8861,11 @@ class Paragraph {
       if ("hide" === this.ellipsis) return;
       if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
         const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
+        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
           const {
             width: width
           } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-          left -= this.ellipsisWidth - width;
+          "vertical" === direction || (left -= this.ellipsisWidth - width);
         }
       }
     }
@@ -8887,21 +8876,20 @@ class Paragraph {
     });
   }
   draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
-    var _a;
     let baseline = top + ascent,
       text = this.text,
-      left = this.left + deltaLeft + (null !== (_a = this.space) && void 0 !== _a ? _a : 0) / 2;
+      left = this.left + deltaLeft;
     baseline += this.top;
     let direction = this.direction;
     if (this.verticalEllipsis) text = this.ellipsisStr, direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
       if ("hide" === this.ellipsis) return;
       if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
         const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
+        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
           const {
             width: width
           } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-          left -= this.ellipsisWidth - width;
+          "vertical" === direction || (left -= this.ellipsisWidth - width);
         }
       }
     }
@@ -8916,7 +8904,7 @@ class Paragraph {
     const {
       lineWidth = 1
     } = this.character;
-    if (this.character.stroke && lineWidth && ctx.strokeText(text, left, baseline + this.dy), this.character.fill && ctx.fillText(text, left, baseline + this.dy), this.character.fill) if (this.character.lineThrough || this.character.underline) {
+    if (this.character.stroke && lineWidth && ctx.strokeText(text, left, baseline), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill) if (this.character.lineThrough || this.character.underline) {
       if (this.character.underline) {
         const top = 1 + baseline,
           lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
@@ -14921,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
@@ -14954,6 +14949,7 @@ class ScrollBar extends AbstractComponent {
             }
         };
         this._onSliderPointerDown = (e) => {
+            this._clearDragEvents();
             const { stopSliderDownPropagation = true } = this.attribute;
             if (stopSliderDownPropagation) {
                 e.stopPropagation();
@@ -14965,15 +14961,12 @@ class ScrollBar extends AbstractComponent {
                 pos: this._prePos,
                 event: e
             });
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                vglobal.addEventListener('pointerup', this._onSliderPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-                this.stage.addEventListener('pointerup', this._onSliderPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onSliderPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: true });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onSliderPointerUp);
+            });
         };
         this._computeScrollValue = (e) => {
             const { direction } = this.attribute;
@@ -14995,6 +14988,7 @@ class ScrollBar extends AbstractComponent {
             return [currentPos, currentScrollValue];
         };
         this._onSliderPointerMove = (e) => {
+            e.preventDefault();
             const { stopSliderMovePropagation = true } = this.attribute;
             if (stopSliderMovePropagation) {
                 e.stopPropagation();
@@ -15008,7 +15002,6 @@ class ScrollBar extends AbstractComponent {
             ? this._onSliderPointerMove
             : delayMap$2[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime);
         this._onSliderPointerUp = (e) => {
-            e.preventDefault();
             const { range: preRange, limitRange = [0, 1] } = this.attribute;
             const preScrollRange = this.getScrollRange();
             const [currentPos, currentScrollValue] = this._computeScrollValue(e);
@@ -15017,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) {
@@ -15158,6 +15143,14 @@ class ScrollBar extends AbstractComponent {
             ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
             : clampRange([y1 + min * height, y1 + max * height], y1, height - sliderSize);
     }
+    _clearDragEvents() {
+        const triggers = getEndTriggersOfDrag();
+        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+        obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onSliderPointerUp);
+        });
+    }
     _reset() {
         this._sliderRenderBounds = null;
         this._sliderLimitRange = null;
@@ -16239,7 +16232,7 @@ class PopTip extends AbstractComponent {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const { titleStyle = {}, position, contentStyle = {}, panel, logoSymbol, poptipAnchor = 'position', logoText, logoTextStyle = {}, triangleMode = 'default', space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, maxWidthPercent, visible, state, dx = 0, dy = 0, positionBounds } = this.attribute;
+        const { titleStyle = {}, position, contentStyle = {}, panel, logoSymbol, logoText, logoTextStyle = {}, triangleMode = 'default', space = 4, minWidth = 0, maxWidth = Infinity, padding = 4, maxWidthPercent, visible, state, dx = 0, dy = 0 } = this.attribute;
         let { title = '', content = '' } = this.attribute;
         title = this.attribute.titleFormatMethod ? this.attribute.titleFormatMethod(title) : title;
         content = this.attribute.contentFormatMethod ? this.attribute.contentFormatMethod(content) : content;
@@ -16321,12 +16314,11 @@ class PopTip extends AbstractComponent {
                 poptipHeight += contentShape.AABBBounds.height();
             }
         }
-        const layout = position === 'auto' || isArray(position);
-        const positionList = isArray(position) ? position : this.positionList;
+        const layout = position === 'auto';
         let maxBBoxI;
         let maxBBoxSize = -Infinity;
-        for (let i = 0; i < positionList.length + 1; i++) {
-            const p = layout ? positionList[i === positionList.length ? maxBBoxI : i] : position;
+        for (let i = 0; i < this.positionList.length + 1; i++) {
+            const p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position;
             let symbolType = 'arrow2Left';
             let offsetX = (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
             let offsetY = 0;
@@ -16335,21 +16327,16 @@ class PopTip extends AbstractComponent {
             }
             else if (triangleMode === 'concise') {
                 symbolType = conciseSymbolMap[p];
-                offsetX = ['tl', 'bl', 'rt', 'rb'].includes(p)
+                offsetX = ['tl', 'bl', 'rt', 'rb'].includes(position)
                     ? (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2
                     : -(isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2;
-                offsetY = ['tl', 'tr', 'lb', 'rb'].includes(p)
+                offsetY = ['tl', 'tr', 'lb', 'rb'].includes(position)
                     ? -(isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2
                     : (isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2;
             }
             const { angle, offset } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth], symbolType);
-            let anchorPoint = { x: 0, y: 0 };
-            if (poptipAnchor === 'bounds' && positionBounds) {
-                anchorPoint = this.calculateAnchorPoint(p, positionBounds);
-            }
-            let bgSymbol;
             if (isBoolean(bgVisible)) {
-                bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: offsetX, y: offsetY, strokeBoundsBuffer: -1, boundsPadding: -2, anchor: [0, 0], symbolType, angle: angle, dx: offset[0], dy: offset[1] - ((_j = backgroundStyle.space) !== null && _j !== void 0 ? _j : 0), size: symbolSize, zIndex: 9 }), 'symbol');
+                const bgSymbol = group.createOrUpdateChild('poptip-symbol-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && (contentVisible || titleVisible), x: offsetX, y: offsetY, strokeBoundsBuffer: -1, boundsPadding: -2, anchor: [0, 0], symbolType, angle: angle, dx: offset[0], dy: offset[1] - ((_j = backgroundStyle.space) !== null && _j !== void 0 ? _j : 0), size: symbolSize, zIndex: 9 }), 'symbol');
                 if (!isEmpty(state === null || state === void 0 ? void 0 : state.panel)) {
                     bgSymbol.states = state.panel;
                 }
@@ -16365,8 +16352,8 @@ class PopTip extends AbstractComponent {
                 }
             }
             group.setAttributes({
-                x: -offset[0] + dx + anchorPoint.x,
-                y: -offset[1] + dy + anchorPoint.y,
+                x: -offset[0] + dx,
+                y: -offset[1] + dy,
                 anchor: [offsetX, offsetY]
             });
             if (logoSymbol) {
@@ -16388,97 +16375,27 @@ class PopTip extends AbstractComponent {
                     group.createOrUpdateChild('poptip-logo-text', Object.assign(Object.assign({}, logoTextStyle), { x: 0, y: poptipHeight / 2, visible: bgVisible && (contentVisible || titleVisible), text: logoText, textAlign: 'center', textBaseline: 'middle', zIndex: 10 }), 'text');
                 }
             }
-            if (range) {
+            if (layout && range) {
                 _tBounds.setValue(0, 0, popTipWidth, poptipHeight).transformWithMatrix(group.globalTransMatrix);
                 const b = _tBounds;
                 const stageBounds = new Bounds().setValue(0, 0, range[0], range[1]);
-                if (layout) {
-                    if (rectInsideAnotherRect(b, stageBounds, false)) {
-                        break;
-                    }
-                    else {
-                        const bbox = getRectIntersect(b, stageBounds, false);
-                        const size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
-                        if (size > maxBBoxSize) {
-                            maxBBoxSize = size;
-                            maxBBoxI = i;
-                        }
-                    }
+                if (rectInsideAnotherRect(b, stageBounds, false)) {
+                    break;
                 }
-                if (['top', 'bottom', 'left', 'right'].includes(p)) {
-                    const isVerticalPosition = p === 'top' || p === 'bottom';
-                    const isHorizontalPosition = p === 'left' || p === 'right';
-                    let mainDirectionOverlap = false;
-                    if (isVerticalPosition) {
-                        mainDirectionOverlap = (p === 'top' && b.y1 < 0) || (p === 'bottom' && b.y2 > stageBounds.y2);
-                    }
-                    else if (isHorizontalPosition) {
-                        mainDirectionOverlap = (p === 'left' && b.x1 < 0) || (p === 'right' && b.x2 > stageBounds.x2);
-                    }
-                    if (!mainDirectionOverlap) {
-                        let secondaryOffset = 0;
-                        const szNumber = (isArray(symbolSize) ? symbolSize[1] : symbolSize) / 2;
-                        if (isVerticalPosition) {
-                            if (b.x1 < 0) {
-                                secondaryOffset = -b.x1;
-                            }
-                            else if (b.x2 > stageBounds.x2) {
-                                secondaryOffset = stageBounds.x2 - b.x2;
-                            }
-                            group.setAttribute('x', group.attribute.x + secondaryOffset);
-                            bgSymbol.setAttribute('dx', min(max(bgSymbol.attribute.dx - secondaryOffset, szNumber), b.width() - szNumber));
-                        }
-                        else if (isHorizontalPosition) {
-                            if (b.y1 < 0) {
-                                secondaryOffset = -b.y1;
-                            }
-                            else if (b.y2 > stageBounds.y2) {
-                                secondaryOffset = stageBounds.y2 - b.y2;
-                            }
-                            group.setAttribute('y', group.attribute.y + secondaryOffset);
-                            bgSymbol.setAttribute('dy', min(max(bgSymbol.attribute.dy - secondaryOffset, szNumber), b.height() - szNumber));
-                        }
-                        break;
+                else {
+                    const bbox = getRectIntersect(b, stageBounds, false);
+                    const size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
+                    if (size > maxBBoxSize) {
+                        maxBBoxSize = size;
+                        maxBBoxI = i;
                     }
                 }
-                if (!layout) {
-                    break;
-                }
             }
             else {
                 break;
             }
         }
     }
-    calculateAnchorPoint(position, positionBounds) {
-        if (!positionBounds) {
-            return { x: 0, y: 0 };
-        }
-        const { x, y } = this.attribute;
-        const { x1, y1, x2, y2 } = positionBounds;
-        const width = x2 - x1;
-        const height = y2 - y1;
-        switch (position) {
-            case 'top':
-            case 'tl':
-            case 'tr':
-                return { x: x1 + width / 2 - x, y: y1 - y };
-            case 'bottom':
-            case 'bl':
-            case 'br':
-                return { x: x1 + width / 2 - x, y: y2 - y };
-            case 'left':
-            case 'lt':
-            case 'lb':
-                return { x: x1 - x, y: y1 + height / 2 - y };
-            case 'right':
-            case 'rt':
-            case 'rb':
-                return { x: x2 - x, y: y1 + height / 2 - y };
-            default:
-                return { x: 0, y: 0 };
-        }
-    }
     getAngleAndOffset(position, width, height, size, symbolType) {
         const sizeH = symbolType === 'arrow2Left' ? size[1] / 2 : size[1];
         switch (position) {
@@ -16610,7 +16527,7 @@ let PopTipRenderContribution = class PopTipRenderContribution {
                 poptip.content = (_a = poptip.content) !== null && _a !== void 0 ? _a : graphic.attribute.text;
             }
             const matrix = graphic.globalTransMatrix;
-            this.poptipComponent.setAttributes(Object.assign(Object.assign({ visibleAll: true, pickable: false, childrenPickable: false, poptipAnchor: 'bounds' }, poptip), { x: matrix.e, y: matrix.f, positionBounds: graphic.globalAABBBounds }));
+            this.poptipComponent.setAttributes(Object.assign(Object.assign({ visibleAll: true, pickable: false, childrenPickable: false }, poptip), { x: matrix.e, y: matrix.f }));
             drawContext.stage.tryInitInteractiveLayer();
             const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
             if (interactiveLayer) {
@@ -23098,8 +23015,13 @@ class DataZoom extends AbstractComponent {
             end: 1
         };
         this._statePointToData = state => state;
+        this._handleTouchMove = (e) => {
+            if (this._activeState) {
+                e.preventDefault();
+            }
+        };
         this._onHandlerPointerDown = (e, tag) => {
-            e.stopPropagation();
+            this._clearDragEvents();
             if (tag === 'start') {
                 this._activeTag = DataZoomActiveTag.startHandler;
                 this._activeItem = this._startHandlerMask;
@@ -23123,14 +23045,15 @@ class DataZoom extends AbstractComponent {
             this._activeState = true;
             this._activeCache.startPos = this.eventPosToStagePos(e);
             this._activeCache.lastPos = this.eventPosToStagePos(e);
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            this.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+            const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+            const triggers = getEndTriggersOfDrag();
+            evtTarget.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._pointerMove = (e) => {
-            e.stopPropagation();
+            e.preventDefault();
             const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             const { attPos, max } = this._layoutCache;
@@ -23160,12 +23083,12 @@ class DataZoom extends AbstractComponent {
                         end = end + dis;
                     }
                 }
-                this._activeCache.lastPos = pos;
                 brushSelect && this.renderDragMask();
             }
             start = Math.min(Math.max(start, 0), 1);
             end = Math.min(Math.max(end, 0), 1);
             if (startAttr !== start || endAttr !== end) {
+                this._activeCache.lastPos = pos;
                 this.setStateAttr(start, end, true);
                 if (realTime) {
                     this._dispatchEvent('change', {
@@ -23180,7 +23103,6 @@ class DataZoom extends AbstractComponent {
             ? this._pointerMove
             : delayMap$1[this.attribute.delayType](this._pointerMove, this.attribute.delayTime);
         this._onHandlerPointerUp = (e) => {
-            e.preventDefault();
             const { start, end, brushSelect, realTime = true } = this.attribute;
             if (this._activeState) {
                 if (this._activeTag === DataZoomActiveTag.background) {
@@ -23195,12 +23117,7 @@ class DataZoom extends AbstractComponent {
                 end: this.state.end,
                 tag: this._activeTag
             });
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            this.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-            this.removeEventListener('pointerup', this._onHandlerPointerUp);
+            this._clearDragEvents();
         };
         const { position, showDetail } = attributes;
         this._activeCache.startPos = position;
@@ -23248,12 +23165,13 @@ class DataZoom extends AbstractComponent {
         if (this._selectedPreviewGroup) {
             this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
         }
-        this.addEventListener('pointerup', this._onHandlerPointerUp);
-        this.addEventListener('pointerupoutside', this._onHandlerPointerUp);
         if (showDetail === 'auto') {
             this.addEventListener('pointerenter', this._onHandlerPointerEnter);
             this.addEventListener('pointerleave', this._onHandlerPointerLeave);
         }
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
     }
     dragMaskSize() {
         const { position } = this.attribute;
@@ -23281,13 +23199,19 @@ class DataZoom extends AbstractComponent {
         var _a, _b;
         return (_b = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventPointTransform(e)) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
     }
+    _clearDragEvents() {
+        const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
+        const triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+    }
     _onHandlerPointerEnter(e) {
-        e.stopPropagation();
         this._showText = true;
         this.renderText();
     }
     _onHandlerPointerLeave(e) {
-        e.stopPropagation();
         this._showText = false;
         this.renderText();
     }
@@ -23797,6 +23721,13 @@ class DataZoom extends AbstractComponent {
     setStatePointToData(callback) {
         isFunction(callback) && (this._statePointToData = callback);
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearDragEvents();
+    }
 }
 DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
 
@@ -27304,28 +27235,21 @@ class Slider extends AbstractComponent {
             this._dispatchTooltipEvent('sliderTooltipHide');
         };
         this._onHandlerPointerdown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._currentHandler = e.target;
             this._prePos = this._isHorizontal ? x : y;
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                this.stage.addEventListener('pointerup', this._onHandlerPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onHandlerPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onHandlerPointerUp);
+            });
         };
         this._onHandlerPointerMove = (e) => {
             var _a, _b;
-            e.stopPropagation();
+            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27361,44 +27285,29 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onHandlerPointerUp = (e) => {
-            e.preventDefault();
             this._isChanging = false;
             this._currentHandler = null;
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onHandlerPointerMove, {
-                    capture: true
-                });
-                this.stage.removeEventListener('pointerup', this._onHandlerPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onHandlerPointerUp);
+            this._clearAllDragEvents();
+        };
+        this._handleTouchMove = (e) => {
+            if (this._isChanging) {
+                e.preventDefault();
             }
         };
         this._onTrackPointerdown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { x, y } = this.stage.eventPointTransform(e);
             this._prePos = this._isHorizontal ? x : y;
-            if (vglobal.env === 'browser') {
-                vglobal.addEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                vglobal.addEventListener('pointerup', this._onTrackPointerUp);
-            }
-            else {
-                this.stage.addEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                this.stage.addEventListener('pointerup', this._onTrackPointerUp);
-                this.stage.addEventListener('pointerupoutside', this._onTrackPointerUp);
-            }
+            const triggers = getEndTriggersOfDrag();
+            const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+            obj.addEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+            triggers.forEach((trigger) => {
+                obj.addEventListener(trigger, this._onTrackPointerUp);
+            });
         };
         this._onTrackPointerMove = (e) => {
-            e.stopPropagation();
+            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max, inverse } = this.attribute;
             if (max === min) {
@@ -27450,24 +27359,11 @@ class Slider extends AbstractComponent {
             this._dispatchChangeEvent();
         };
         this._onTrackPointerUp = (e) => {
-            e.preventDefault();
             this._isChanging = false;
-            if (vglobal.env === 'browser') {
-                vglobal.removeEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
-            }
-            else {
-                this.stage.removeEventListener('pointermove', this._onTrackPointerMove, {
-                    capture: true
-                });
-                this.stage.removeEventListener('pointerup', this._onTrackPointerUp);
-                this.stage.removeEventListener('pointerupoutside', this._onTrackPointerUp);
-            }
+            this._clearAllDragEvents();
         };
         this._onRailPointerDown = (e) => {
-            e.stopPropagation();
+            this._clearAllDragEvents();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27845,6 +27741,9 @@ class Slider extends AbstractComponent {
                 this._track.addEventListener('pointerdown', this._onTrackPointerdown);
             }
             this._railContainer.addEventListener('pointerdown', this._onRailPointerDown);
+            (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+                passive: false
+            });
         }
     }
     _bindTooltipEvents() {
@@ -27855,6 +27754,18 @@ class Slider extends AbstractComponent {
         this._mainContainer.addEventListener('pointermove', this._onTooltipUpdate);
         this._mainContainer.addEventListener('pointerleave', this._onTooltipHide);
     }
+    _clearAllDragEvents() {
+        const triggers = getEndTriggersOfDrag();
+        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
+        obj.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onHandlerPointerUp);
+        });
+        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+        triggers.forEach((trigger) => {
+            obj.removeEventListener(trigger, this._onTrackPointerUp);
+        });
+    }
     _updateTrack() {
         const { inverse, railWidth, railHeight } = this.attribute;
         const startHandler = this._startHandler;
@@ -27995,6 +27906,13 @@ class Slider extends AbstractComponent {
             endHandler
         };
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearAllDragEvents();
+    }
 }
 Slider.defaultAttributes = {
     slidable: true,
@@ -31347,10 +31265,10 @@ class Switch extends AbstractComponent {
         });
         this._circle.setAttributes({
             y: circleY,
-            x: !this.attribute.checked ? circleX : maxWidth - circleX
+            x: this.attribute.checked ? circleX : maxWidth - circleX
         });
         this._text.setAttributes({
-            x: !this.attribute.checked ? textX : maxWidth - textX - textWidth,
+            x: this.attribute.checked ? textX : maxWidth - textX - textWidth,
             y: textY
         });
     }
@@ -31588,6 +31506,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.7-alpha.5";
+const version = "0.22.7-alpha.7";
 
 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 };