@visactor/vrender-components 0.22.9-alpha.2 → 0.22.10-alpha.1

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, cos, sin, isString, pointAt, isNumber, getDecimalPlaces, isNil, Color, sqrt, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isValid, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, aabbSeparation, obbSeparation, cloneDeep, get, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, Point, PointService, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, pi, isArray, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, cos, sin, isString, pointAt, isNumber, getDecimalPlaces, isNil, Color, sqrt, OBBBounds, has, normalTransform, isValidUrl, isBase64, acos, transformBoundsWithMatrix, getContextFont, rotatePoint, clampAngleByRadian, asin, arrayEqual, Bounds, getRectIntersect, isRectIntersect, isPlainObject, merge, isValid, clamp, clampRange, normalizePadding, debounce, throttle, hexToRgb, crossProduct, isEmpty, array, rectInsideAnotherRect, radianToDegree, getAngleByPoint, polarToCartesian, normalizeAngle, isValidNumber, flattenArray, isRotateAABBIntersect, isLess, isGreater, aabbSeparation, obbSeparation, cloneDeep, get, last, mixin, isEqual, interpolateString, minInArray, maxInArray, binaryFuzzySearchInNumberRange, pointInRect, calculateAnchorOfBounds, computeQuadrant, polygonContainPoint } from '@visactor/vutils';
 import { isContinuous, isDiscrete, LinearScale } from '@visactor/vscale';
 
 class Generator {
@@ -577,48 +577,6 @@ const EnvContribution = Symbol.for("EnvContribution");
 const VGlobal = Symbol.for("VGlobal");
 const DEFAULT_TEXT_FONT_FAMILY$1 = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
 
-class EventListenerManager {
-  constructor() {
-    this._listenerMap = new Map(), this._eventListenerTransformer = event => event;
-  }
-  setEventListenerTransformer(transformer) {
-    this._eventListenerTransformer = transformer || (event => event);
-  }
-  addEventListener(type, listener, options) {
-    if (!listener) return;
-    const wrappedListener = event => {
-      const transformedEvent = this._eventListenerTransformer(event);
-      "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent);
-    };
-    this._listenerMap.has(type) || this._listenerMap.set(type, new Map()), this._listenerMap.get(type).set(listener, wrappedListener), this._nativeAddEventListener(type, wrappedListener, options);
-  }
-  removeEventListener(type, listener, options) {
-    var _a;
-    if (!listener) return;
-    const wrappedListener = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener);
-    wrappedListener && (this._nativeRemoveEventListener(type, wrappedListener, options), this._listenerMap.get(type).delete(listener), 0 === this._listenerMap.get(type).size && this._listenerMap.delete(type));
-  }
-  dispatchEvent(event) {
-    return this._nativeDispatchEvent(event);
-  }
-  clearAllEventListeners() {
-    this._listenerMap.forEach((listenersMap, type) => {
-      listenersMap.forEach((wrappedListener, originalListener) => {
-        this._nativeRemoveEventListener(type, wrappedListener, void 0);
-      });
-    }), this._listenerMap.clear();
-  }
-  _nativeAddEventListener(type, listener, options) {
-    throw new Error("_nativeAddEventListener must be implemented by derived classes");
-  }
-  _nativeRemoveEventListener(type, listener, options) {
-    throw new Error("_nativeRemoveEventListener must be implemented by derived classes");
-  }
-  _nativeDispatchEvent(event) {
-    throw new Error("_nativeDispatchEvent must be implemented by derived classes");
-  }
-}
-
 var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
@@ -659,7 +617,7 @@ var __decorate$P = undefined && undefined.__decorate || function (decorators, ta
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
   };
-let DefaultGlobal = class extends EventListenerManager {
+let DefaultGlobal = class {
   get env() {
     return this._env;
   }
@@ -703,19 +661,10 @@ let DefaultGlobal = class extends EventListenerManager {
     this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
   }
   constructor(contributions) {
-    super(), this.contributions = contributions, this._isImageAnonymous = !0, this.eventListenerTransformer = event => event, this.id = Generator.GenAutoIncrementId(), this.hooks = {
+    this.contributions = contributions, this._isImageAnonymous = !0, this.id = Generator.GenAutoIncrementId(), this.hooks = {
       onSetEnv: new SyncHook(["lastEnv", "env", "global"])
     }, this.measureTextMethod = "native", this.optimizeVisible = !1;
   }
-  _nativeAddEventListener(type, listener, options) {
-    return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
-  }
-  _nativeRemoveEventListener(type, listener, options) {
-    return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
-  }
-  _nativeDispatchEvent(event) {
-    return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
-  }
   bindContribution(params) {
     const promiseArr = [];
     if (this.contributions.getContributions().forEach(contribution => {
@@ -756,6 +705,15 @@ let DefaultGlobal = class extends EventListenerManager {
   releaseCanvas(canvas) {
     return this._env || this.setEnv("browser"), this.envContribution.releaseCanvas(canvas);
   }
+  addEventListener(type, listener, options) {
+    return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
+  }
+  removeEventListener(type, listener, options) {
+    return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
+  }
+  dispatchEvent(event) {
+    return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
+  }
   getRequestAnimationFrame() {
     return this._env || this.setEnv("browser"), this.envContribution.getRequestAnimationFrame();
   }
@@ -1653,6 +1611,11 @@ let Step$1 = class Step {
     return this.context.tryUpdateLength();
   }
 };
+class StepClosed extends Step$1 {
+  lineEnd() {
+    this.context.closePath();
+  }
+}
 function genStepSegments(points, t) {
   let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
@@ -1666,6 +1629,16 @@ function genStepSegments(points, t) {
 function genStepTypeSegments(path, points) {
   return genCurveSegments(path, points);
 }
+function genStepClosedSegments(points, t) {
+  let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    direction: direction,
+    startPoint: startPoint
+  } = params;
+  if (points.length < 2 - Number(!!startPoint)) return null;
+  const segContext = new SegContext("step", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+  return genStepTypeSegments(new StepClosed(segContext, t, startPoint), points), segContext;
+}
 
 class LinearClosed extends Linear {
   lineEnd() {
@@ -1895,6 +1868,8 @@ function calcLineCache(points, curveType, params) {
       return genMonotoneYSegments(points, params);
     case "step":
       return genStepSegments(points, .5, params);
+    case "stepClosed":
+      return genStepClosedSegments(points, .5, params);
     case "stepBefore":
       return genStepSegments(points, 0, params);
     case "stepAfter":
@@ -2769,7 +2744,7 @@ function getScaledStroke(context, width, dpr) {
 function createColor(context, c, params) {
   let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  var _a, _b;
+  var _a, _b, _c, _d;
   if (!c || !0 === c) return "black";
   let result, color;
   if (isArray(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
@@ -2786,7 +2761,7 @@ function createColor(context, c, params) {
         scaleY = 1,
         angle = 0
       } = params.attribute;
-      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY, (angle || 1 !== scaleX || 1 !== scaleY) && (x = 0, y = 0, w = null !== (_a = params.widthWithoutTransform) && void 0 !== _a ? _a : w, h = null !== (_b = params.heightWithoutTransform) && void 0 !== _b ? _b : h);
+      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY, (angle || 1 !== scaleX || 1 !== scaleY) && (x = null !== (_a = params.x1WithoutTransform) && void 0 !== _a ? _a : 0, y = null !== (_b = params.y1WithoutTransform) && void 0 !== _b ? _b : 0, w = null !== (_c = params.widthWithoutTransform) && void 0 !== _c ? _c : w, h = null !== (_d = params.heightWithoutTransform) && void 0 !== _d ? _d : h);
     }
     "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
   }
@@ -2811,7 +2786,7 @@ function createConicGradient(context, color, x, y, w, h) {
   const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
   return color.stops.forEach(stop => {
     canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient.GetPattern(w + x, h + y, undefined);
+  }), canvasGradient.GetPattern ? canvasGradient.GetPattern(w + x, h + y, undefined) : canvasGradient;
 }
 
 const DIRECTION_KEY = {
@@ -3417,7 +3392,7 @@ var __decorate$M = undefined && undefined.__decorate || function (decorators, ta
   };
 const VWindow = Symbol.for("VWindow");
 const WindowHandlerContribution = Symbol.for("WindowHandlerContribution");
-let DefaultWindow = class extends EventListenerManager {
+let DefaultWindow = class {
   get width() {
     if (this._handler) {
       const wh = this._handler.getWH();
@@ -3436,7 +3411,7 @@ let DefaultWindow = class extends EventListenerManager {
     return this._handler.getDpr();
   }
   constructor() {
-    super(), this.hooks = {
+    this.hooks = {
       onChange: new SyncHook(["x", "y", "width", "height"])
     }, this.active = () => {
       const global = this.global;
@@ -3444,15 +3419,6 @@ let DefaultWindow = class extends EventListenerManager {
       container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
     }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
   }
-  _nativeAddEventListener(type, listener, options) {
-    return this._handler.addEventListener(type, listener, options);
-  }
-  _nativeRemoveEventListener(type, listener, options) {
-    return this._handler.removeEventListener(type, listener, options);
-  }
-  _nativeDispatchEvent(event) {
-    return this._handler.dispatchEvent(event);
-  }
   postInit() {
     this.global.hooks.onSetEnv.tap("window", this.active), this.active();
   }
@@ -3492,7 +3458,7 @@ let DefaultWindow = class extends EventListenerManager {
     throw new Error("暂不支持");
   }
   release() {
-    return this.global.hooks.onSetEnv.unTap("window", this.active), this.clearAllEventListeners(), this._handler.releaseWindow();
+    return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
   }
   getContext() {
     return this._handler.getContext();
@@ -3503,6 +3469,15 @@ let DefaultWindow = class extends EventListenerManager {
   getImageBuffer(type) {
     return this._handler.getImageBuffer ? this._handler.getImageBuffer(type) : null;
   }
+  addEventListener(type, listener, options) {
+    return this._handler.addEventListener(type, listener, options);
+  }
+  removeEventListener(type, listener, options) {
+    return this._handler.removeEventListener(type, listener, options);
+  }
+  dispatchEvent(event) {
+    return this._handler.dispatchEvent(event);
+  }
   getBoundingClientRect() {
     return this._handler.getBoundingClientRect();
   }
@@ -5667,7 +5642,7 @@ class RectSymbol extends BaseSymbol {
 }
 var rect = new RectSymbol();
 
-const tempBounds$1 = new AABBBounds();
+const tempBounds = new AABBBounds();
 class CustomSymbolClass {
   constructor(type, path) {
     let isSvg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
@@ -5696,7 +5671,7 @@ class CustomSymbolClass {
         let {
           path: path
         } = _ref;
-        tempBounds$1.x1 = path.bounds.x1 * size, tempBounds$1.y1 = path.bounds.y1 * size, tempBounds$1.x2 = path.bounds.x2 * size, tempBounds$1.y2 = path.bounds.y2 * size, bounds.union(tempBounds$1);
+        tempBounds.x1 = path.bounds.x1 * size, tempBounds.y1 = path.bounds.y1 * size, tempBounds.x2 = path.bounds.x2 * size, tempBounds.y2 = path.bounds.y2 * size, bounds.union(tempBounds);
       });
     }
     this.path.bounds && (bounds.x1 = this.path.bounds.x1 * size, bounds.y1 = this.path.bounds.y1 * size, bounds.x2 = this.path.bounds.x2 * size, bounds.y2 = this.path.bounds.y2 * size);
@@ -6010,8 +5985,8 @@ const SVG_PARSE_ATTRIBUTE_MAP = {
 const SVG_PARSE_ATTRIBUTE_MAP_KEYS = Object.keys(SVG_PARSE_ATTRIBUTE_MAP);
 
 const _tempBounds = new AABBBounds(),
-  tempMatrix = new Matrix(),
-  tempBounds = new AABBBounds();
+  tempMatrix = new Matrix();
+  new AABBBounds();
 const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
 const tempConstantXYKey = ["x", "y"],
   tempConstantScaleXYKey = ["scaleX", "scaleY"],
@@ -6530,25 +6505,12 @@ class Graphic extends Node {
   needUpdateLayout() {
     return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
   }
-  getAnchor(anchor, params) {
+  getAnchor(anchor, params, resetScale) {
     const _anchor = [0, 0],
       getBounds = () => {
         if (params.b) return params.b;
-        const {
-          scaleX: scaleX,
-          scaleY: scaleY,
-          angle: angle,
-          scaleCenter: scaleCenter
-        } = this.attribute;
-        return tempBounds.copy(this._AABBBounds), this.setAttributes({
-          angle: 0,
-          scaleCenter: null
-        }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
-          scaleX: scaleX,
-          scaleY: scaleY,
-          angle: angle,
-          scaleCenter: scaleCenter
-        }), params.b;
+        const graphic = this.clone();
+        return graphic.attribute.angle = 0, graphic.attribute.scaleCenter = null, resetScale && (graphic.attribute.scaleX = 1, graphic.attribute.scaleY = 1), params.b = graphic.AABBBounds, params.b;
       };
     if ("string" == typeof anchor[0]) {
       const ratio = parseFloat(anchor[0]) / 100,
@@ -6577,7 +6539,7 @@ class Graphic extends Node {
     const params = {};
     if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
       const m = this._transMatrix;
-      m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+      m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params, !0), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
         x: _anchor[0],
         y: _anchor[1]
       });
@@ -8537,7 +8499,7 @@ let Symbol$1 = class Symbol extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
+    updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, this.x1WithoutTransform = aabbBounds.x1, this.y1WithoutTransform = aabbBounds.y1;
     const {
       lineJoin = symbolTheme.lineJoin
     } = attribute;
@@ -14995,6 +14957,11 @@ class ScrollBar extends AbstractComponent {
     constructor(attributes, options) {
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, ScrollBar.defaultAttributes, attributes));
         this.name = 'scrollbar';
+        this._handleTouchMove = (e) => {
+            if (isValid(this._prePos)) {
+                e.preventDefault();
+            }
+        };
         this._onRailPointerDown = (e) => {
             const { viewX, viewY } = e;
             const { direction, width, height, range } = this.attribute;
@@ -15033,7 +15000,7 @@ class ScrollBar extends AbstractComponent {
             });
             const triggers = getEndTriggersOfDrag();
             const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: true });
+            obj.addEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
             triggers.forEach((trigger) => {
                 obj.addEventListener(trigger, this._onSliderPointerUp);
             });
@@ -15058,7 +15025,6 @@ class ScrollBar extends AbstractComponent {
             return [currentPos, currentScrollValue];
         };
         this._onSliderPointerMove = (e) => {
-            e.preventDefault();
             const { stopSliderMovePropagation = true } = this.attribute;
             if (stopSliderMovePropagation) {
                 e.stopPropagation();
@@ -15076,6 +15042,7 @@ class ScrollBar extends AbstractComponent {
             const preScrollRange = this.getScrollRange();
             const [currentPos, currentScrollValue] = this._computeScrollValue(e);
             const range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
+            this._prePos = null;
             this._dispatchEvent(SCROLLBAR_END_EVENT, {
                 pre: preRange,
                 value: clampRange(range, limitRange[0], limitRange[1])
@@ -15130,6 +15097,9 @@ class ScrollBar extends AbstractComponent {
         if (this._slider) {
             this._slider.addEventListener('pointerdown', this._onSliderPointerDown);
         }
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
     }
     render() {
         this._reset();
@@ -15216,7 +15186,7 @@ class ScrollBar extends AbstractComponent {
     _clearDragEvents() {
         const triggers = getEndTriggersOfDrag();
         const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-        obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true, passive: false });
+        obj.removeEventListener('pointermove', this._onSliderPointerMoveWithDelay, { capture: true });
         triggers.forEach((trigger) => {
             obj.removeEventListener(trigger, this._onSliderPointerUp);
         });
@@ -15225,6 +15195,13 @@ class ScrollBar extends AbstractComponent {
         this._sliderRenderBounds = null;
         this._sliderLimitRange = null;
     }
+    release(all) {
+        super.release(all);
+        (vglobal.env === 'browser' ? vglobal : this.stage).addEventListener('touchmove', this._handleTouchMove, {
+            passive: false
+        });
+        this._clearDragEvents();
+    }
 }
 ScrollBar.defaultAttributes = {
     direction: 'horizontal',
@@ -23186,13 +23163,15 @@ class DataZoom extends AbstractComponent {
             this._activeCache.lastPos = this.eventPosToStagePos(e);
             const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
             const triggers = getEndTriggersOfDrag();
-            evtTarget.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            evtTarget.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+            this.addEventListener('pointermove', this._onHandlerPointerMove, {
+                capture: true
+            });
             triggers.forEach((trigger) => {
                 evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
             });
         };
         this._pointerMove = (e) => {
-            e.preventDefault();
             const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             const { attPos, max } = this._layoutCache;
@@ -23222,12 +23201,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', {
@@ -23341,10 +23320,13 @@ class DataZoom extends AbstractComponent {
     _clearDragEvents() {
         const evtTarget = vglobal.env === 'browser' ? vglobal : this.stage;
         const triggers = getEndTriggersOfDrag();
-        evtTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        evtTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
         triggers.forEach((trigger) => {
             evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
         });
+        this.removeEventListener('pointermove', this._onHandlerPointerMove, {
+            capture: true
+        });
     }
     _onHandlerPointerEnter(e) {
         this._showText = true;
@@ -27398,14 +27380,13 @@ class Slider extends AbstractComponent {
             this._prePos = this._isHorizontal ? x : y;
             const triggers = getEndTriggersOfDrag();
             const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+            obj.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
             triggers.forEach((trigger) => {
                 obj.addEventListener(trigger, this._onHandlerPointerUp);
             });
         };
         this._onHandlerPointerMove = (e) => {
             var _a, _b;
-            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max } = this.attribute;
             if (max === min) {
@@ -27457,13 +27438,12 @@ class Slider extends AbstractComponent {
             this._prePos = this._isHorizontal ? x : y;
             const triggers = getEndTriggersOfDrag();
             const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-            obj.addEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+            obj.addEventListener('pointermove', this._onTrackPointerMove, { capture: true });
             triggers.forEach((trigger) => {
                 obj.addEventListener(trigger, this._onTrackPointerUp);
             });
         };
         this._onTrackPointerMove = (e) => {
-            e.preventDefault();
             this._isChanging = true;
             const { railWidth, railHeight, min, max, inverse } = this.attribute;
             if (max === min) {
@@ -27913,11 +27893,11 @@ class Slider extends AbstractComponent {
     _clearAllDragEvents() {
         const triggers = getEndTriggersOfDrag();
         const obj = vglobal.env === 'browser' ? vglobal : this.stage;
-        obj.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true, passive: false });
+        obj.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
         triggers.forEach((trigger) => {
             obj.removeEventListener(trigger, this._onHandlerPointerUp);
         });
-        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true, passive: false });
+        obj.removeEventListener('pointermove', this._onTrackPointerMove, { capture: true });
         triggers.forEach((trigger) => {
             obj.removeEventListener(trigger, this._onTrackPointerUp);
         });
@@ -29832,6 +29812,7 @@ class Brush extends AbstractComponent {
             this._activeMoveState = brushMoved && this._isPosInBrushMask(e);
             this._activeDrawState = !this._activeMoveState;
             this._startPos = this.eventPosToStagePos(e);
+            this._cacheDrawPoints = [this._startPos];
         };
         this._onBrushing = (e) => {
             if (this._outOfInteractiveRange(e)) {
@@ -29882,7 +29863,7 @@ class Brush extends AbstractComponent {
     _initDraw(e) {
         const { brushMode } = this.attribute;
         const pos = this.eventPosToStagePos(e);
-        this._cacheDrawPoints = [pos];
+        this._cacheDrawPoints.push(pos);
         brushMode === 'single' && this._clearMask();
         this._addBrushMask();
         this._dispatchBrushEvent(IOperateType.drawStart, e);
@@ -31661,6 +31642,6 @@ StoryLabelItem.defaultAttributes = {
     theme: 'default'
 };
 
-const version = "0.22.9-alpha.2";
+const version = "0.22.10-alpha.1";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };

package/es/brush/brush.js

@@ -30,7 +30,8 @@ export class Brush extends AbstractComponent {
             array(updateTrigger).forEach((t => this.stage.addEventListener(t, this._onBrushingWithDelay))), 
             array(endTrigger).forEach((t => this.stage.addEventListener(t, this._onBrushEnd))), 
             e.stopPropagation(), this._firstUpdate = !0, this._activeMoveState = brushMoved && this._isPosInBrushMask(e), 
-            this._activeDrawState = !this._activeMoveState, this._startPos = this.eventPosToStagePos(e);
+            this._activeDrawState = !this._activeMoveState, this._startPos = this.eventPosToStagePos(e), 
+            this._cacheDrawPoints = [ this._startPos ];
         }, this._onBrushing = e => {
             this._outOfInteractiveRange(e) || (e.stopPropagation(), this._firstUpdate ? (this._activeDrawState && this._initDraw(e), 
             this._activeMoveState && this._initMove(e), this._firstUpdate = !1) : (this._activeDrawState && this._drawing(e), 
@@ -52,7 +53,7 @@ export class Brush extends AbstractComponent {
     }
     _initDraw(e) {
         const {brushMode: brushMode} = this.attribute, pos = this.eventPosToStagePos(e);
-        this._cacheDrawPoints = [ pos ], "single" === brushMode && this._clearMask(), this._addBrushMask(), 
+        this._cacheDrawPoints.push(pos), "single" === brushMode && this._clearMask(), this._addBrushMask(), 
         this._dispatchBrushEvent(IOperateType.drawStart, e), 1 === Object.keys(this._brushMaskAABBBoundsDict).length && this._dispatchBrushEvent(IOperateType.brushActive, e);
     }
     _initMove(e) {