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

package/dist/index.es.js

@@ -2835,6 +2835,7 @@ 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,
@@ -2868,6 +2869,13 @@ 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,
@@ -2877,7 +2885,9 @@ function measureTextCanvas(text, character) {
     },
     ascent = "actual" === mode ? measurement.actualBoundingBoxAscent : measurement.fontBoundingBoxAscent,
     descent = "actual" === mode ? measurement.actualBoundingBoxDescent : measurement.fontBoundingBoxDescent;
-  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;
+  "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;
 }
 
 var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -4162,7 +4172,7 @@ class FederatedEvent {
   }
   _composedDetailPath(params) {
     if (params && params.graphic) {
-      const g = this.pickParams.graphic;
+      const g = params.graphic;
       if (g.stage) {
         const path = g.stage.eventSystem.manager.propagationPath(g);
         this.detailPath.push(path), this._composedDetailPath(params.params);
@@ -8830,6 +8840,7 @@ 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;
@@ -8842,7 +8853,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, "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, 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 = "...";
   }
   updateWidth() {
     const {
@@ -8861,11 +8872,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 (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
           const {
             width: width
           } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-          "vertical" === direction || (left -= this.ellipsisWidth - width);
+          left -= this.ellipsisWidth - width;
         }
       }
     }
@@ -8876,20 +8887,21 @@ class Paragraph {
     });
   }
   draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+    var _a;
     let baseline = top + ascent,
       text = this.text,
-      left = this.left + deltaLeft;
+      left = this.left + deltaLeft + (null !== (_a = this.space) && void 0 !== _a ? _a : 0) / 2;
     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 (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
           const {
             width: width
           } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-          "vertical" === direction || (left -= this.ellipsisWidth - width);
+          left -= this.ellipsisWidth - width;
         }
       }
     }
@@ -8904,7 +8916,7 @@ class Paragraph {
     const {
       lineWidth = 1
     } = this.character;
-    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.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.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));
@@ -14909,13 +14921,6 @@ const SCROLLBAR_START_EVENT = 'scrollDown';
 const SCROLLBAR_EVENT = 'scrollDrag';
 const SCROLLBAR_END_EVENT = 'scrollUp';
 
-function getEndTriggersOfDrag() {
-    if (vglobal.env === 'browser') {
-        return ['pointerup', 'pointerleave', 'pointercancel'];
-    }
-    return ['pointerup', 'pointerleave', 'pointerupoutside'];
-}
-
 const delayMap$2 = {
     debounce: debounce,
     throttle: throttle
@@ -14949,7 +14954,6 @@ class ScrollBar extends AbstractComponent {
             }
         };
         this._onSliderPointerDown = (e) => {
-            this._clearDragEvents();
             const { stopSliderDownPropagation = true } = this.attribute;
             if (stopSliderDownPropagation) {
                 e.stopPropagation();
@@ -14961,12 +14965,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;
@@ -15010,7 +15017,15 @@ class ScrollBar extends AbstractComponent {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
             });
-            this._clearDragEvents();
+            if (vglobal.env === 'browser') {
+                vglobal.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
+                vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
+            }
+            else {
+                this.stage.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
+                this.stage.removeEventListener('pointerup', this._onSliderPointerUp);
+                this.stage.removeEventListener('pointerupoutside', this._onSliderPointerUp);
+            }
         };
     }
     setScrollRange(range, render = true) {
@@ -15143,14 +15158,6 @@ class ScrollBar extends AbstractComponent {
             ? clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
             : clampRange([y1 + min * height, y1 + max * height], y1, height - sliderSize);
     }
-    _clearDragEvents() {
-        const triggers = getEndTriggersOfDrag();
-        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-        obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
-        triggers.forEach((trigger) => {
-            obj.removeEventListener(trigger, this._onSliderPointerUp);
-        });
-    }
     _reset() {
         this._sliderRenderBounds = null;
         this._sliderLimitRange = null;
@@ -16232,7 +16239,7 @@ class PopTip extends AbstractComponent {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        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;
+        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;
         let { title = '', content = '' } = this.attribute;
         title = this.attribute.titleFormatMethod ? this.attribute.titleFormatMethod(title) : title;
         content = this.attribute.contentFormatMethod ? this.attribute.contentFormatMethod(content) : content;
@@ -16314,11 +16321,12 @@ class PopTip extends AbstractComponent {
                 poptipHeight += contentShape.AABBBounds.height();
             }
         }
-        const layout = position === 'auto';
+        const layout = position === 'auto' || isArray(position);
+        const positionList = isArray(position) ? position : this.positionList;
         let maxBBoxI;
         let maxBBoxSize = -Infinity;
-        for (let i = 0; i < this.positionList.length + 1; i++) {
-            const p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position;
+        for (let i = 0; i < positionList.length + 1; i++) {
+            const p = layout ? positionList[i === positionList.length ? maxBBoxI : i] : position;
             let symbolType = 'arrow2Left';
             let offsetX = (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 4;
             let offsetY = 0;
@@ -16327,16 +16335,21 @@ class PopTip extends AbstractComponent {
             }
             else if (triangleMode === 'concise') {
                 symbolType = conciseSymbolMap[p];
-                offsetX = ['tl', 'bl', 'rt', 'rb'].includes(position)
+                offsetX = ['tl', 'bl', 'rt', 'rb'].includes(p)
                     ? (isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2
                     : -(isArray(symbolSize) ? symbolSize[0] : symbolSize) / 2;
-                offsetY = ['tl', 'tr', 'lb', 'rb'].includes(position)
+                offsetY = ['tl', 'tr', 'lb', 'rb'].includes(p)
                     ? -(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)) {
-                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');
+                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;
                 }
@@ -16352,8 +16365,8 @@ class PopTip extends AbstractComponent {
                 }
             }
             group.setAttributes({
-                x: -offset[0] + dx,
-                y: -offset[1] + dy,
+                x: -offset[0] + dx + anchorPoint.x,
+                y: -offset[1] + dy + anchorPoint.y,
                 anchor: [offsetX, offsetY]
             });
             if (logoSymbol) {
@@ -16375,20 +16388,61 @@ 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 (layout && range) {
+            if (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 (rectInsideAnotherRect(b, stageBounds, false)) {
-                    break;
+                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;
+                        }
+                    }
                 }
-                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 (['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;
+                    }
+                }
+                if (!layout) {
+                    break;
                 }
             }
             else {
@@ -16396,6 +16450,35 @@ class PopTip extends AbstractComponent {
             }
         }
     }
+    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) {
@@ -16527,7 +16610,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 }, poptip), { x: matrix.e, y: matrix.f }));
+            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 }));
             drawContext.stage.tryInitInteractiveLayer();
             const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
             if (interactiveLayer) {
@@ -23016,7 +23099,6 @@ class DataZoom extends AbstractComponent {
         };
         this._statePointToData = state => state;
         this._onHandlerPointerDown = (e, tag) => {
-            this._clearDragEvents();
             e.stopPropagation();
             if (tag === 'start') {
                 this._activeTag = DataZoomActiveTag.startHandler;
@@ -23041,12 +23123,11 @@ class DataZoom extends AbstractComponent {
             this._activeState = true;
             this._activeCache.startPos = this.eventPosToStagePos(e);
             this._activeCache.lastPos = this.eventPosToStagePos(e);
-            const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
-            const triggers = getEndTriggersOfDrag();
-            evtTarget.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-            triggers.forEach((trigger) => {
-                evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
-            });
+            if (vglobal.env === 'browser') {
+                vglobal.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+                vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
+            }
+            this.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
         };
         this._pointerMove = (e) => {
             e.stopPropagation();
@@ -23114,7 +23195,12 @@ class DataZoom extends AbstractComponent {
                 end: this.state.end,
                 tag: this._activeTag
             });
-            this._clearDragEvents();
+            if (vglobal.env === 'browser') {
+                vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+                vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
+            }
+            this.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+            this.removeEventListener('pointerup', this._onHandlerPointerUp);
         };
         const { position, showDetail } = attributes;
         this._activeCache.startPos = position;
@@ -23162,6 +23248,8 @@ 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,14 +23281,6 @@ 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;
@@ -27225,17 +27305,23 @@ 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;
-            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;
@@ -27278,20 +27364,38 @@ class Slider extends AbstractComponent {
             e.preventDefault();
             this._isChanging = false;
             this._currentHandler = null;
-            this._clearAllDragEvents();
+            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._clearAllDragEvents();
             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();
@@ -27348,11 +27452,22 @@ class Slider extends AbstractComponent {
         this._onTrackPointerUp = (e) => {
             e.preventDefault();
             this._isChanging = false;
-            this._clearAllDragEvents();
+            if (vglobal.env === 'browser') {
+                vglobal.removeEventListener('pointermove', this._onTrackPointerMove, {
+                    capture: true
+                });
+                vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
+            }
+            else {
+                this.stage.removeEventListener('pointermove', this._onTrackPointerMove, {
+                    capture: true
+                });
+                this.stage.removeEventListener('pointerup', this._onTrackPointerUp);
+                this.stage.removeEventListener('pointerupoutside', this._onTrackPointerUp);
+            }
         };
         this._onRailPointerDown = (e) => {
             e.stopPropagation();
-            this._clearAllDragEvents();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27740,18 +27855,6 @@ class Slider extends AbstractComponent {
         this._mainContainer.addEventListener('pointermove', this._onTooltipUpdate);
         this._mainContainer.addEventListener('pointerleave', this._onTooltipHide);
     }
-    _clearAllDragEvents() {
-        const triggers = getEndTriggersOfDrag();
-        const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-        obj.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-        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;
@@ -31244,10 +31347,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
         });
     }
@@ -31485,6 +31588,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.7-alpha.4";
+const version = "0.22.7-alpha.5";
 
 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/crosshair/base.js

@@ -7,5 +7,4 @@ export class CrosshairBase extends AbstractComponent {
     render() {
         this.renderCrosshair(this);
     }
-}
-//# sourceMappingURL=base.js.map
+}

package/es/crosshair/type.js

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

package/es/data-zoom/data-zoom.d.ts

@@ -164,7 +164,6 @@ export declare class DataZoom extends AbstractComponent<Required<DataZoomAttribu
         x: number;
         y: number;
     };
-    private _clearDragEvents;
     private _onHandlerPointerDown;
     private _pointerMove;
     private _onHandlerPointerMove;