@visactor/vrender-components 1.1.0-alpha.20 → 1.1.0-alpha.22

package/dist/index.es.js

@@ -2538,6 +2538,11 @@ class ResourceLoader {
       data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
         (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(svgStr, res.data)) : (data.loadState = "fail", mark.imageLoadFail(svgStr));
       }), data.waitingMark && (data.waitingMark = []);
+    }).catch(() => {
+      var _a;
+      data.loadState = "fail", null === (_a = data.waitingMark) || void 0 === _a || _a.map(mark => {
+        mark.imageLoadFail(svgStr);
+      }), data.waitingMark && (data.waitingMark = []);
     })) : (data.loadState = "fail", mark.imageLoadFail(svgStr)));
   }
   static GetFile(url, type) {
@@ -6138,10 +6143,18 @@ class Graphic extends Node {
   setAttributesAndPreventAnimate(params, forceUpdateTag = !1, context, ignorePriority) {
     if (!params) return;
     const keys = Object.keys(params);
-    this.captureTransientFromAttrsBeforePreventAnimate(params, keys, context), this.visitTrackedAnimates(animate => {
+    this.captureTransientFromAttrsBeforePreventAnimate(params, keys, context), this.syncFinalAttributesFromUpdateContext(context), this.visitTrackedAnimates(animate => {
       (animate.priority !== 1 / 0 || ignorePriority) && animate.preventAttrs(keys);
     }), this.applyTransientAttributes(params, forceUpdateTag, context);
   }
+  syncFinalAttributesFromUpdateContext(context) {
+    var _a;
+    const updateType = null == context ? void 0 : context.type;
+    if (updateType === AttributeUpdateType.STATE || null != updateType && updateType >= AttributeUpdateType.ANIMATE_BIND && updateType <= AttributeUpdateType.ANIMATE_END) return;
+    const finalAttrs = null === (_a = this.context) || void 0 === _a ? void 0 : _a.finalAttrs,
+      setFinalAttributes = this.setFinalAttributes;
+    finalAttrs && "function" == typeof setFinalAttributes && setFinalAttributes.call(this, finalAttrs);
+  }
   captureTransientFromAttrsBeforePreventAnimate(params, keys, context) {
     var _a, _b;
     const graphicContext = this.context,
@@ -11972,6 +11985,7 @@ class CanvasLayerHandlerContribution {
     if (this.layer = layer, this.window = window, params.main) this.main = !0, this.context = window.getContext(), this.canvas = this.context.getCanvas();else {
       let nativeCanvas;
       this.main = !1, params.canvasId && (nativeCanvas = this.global.getElementById(params.canvasId)), nativeCanvas || (nativeCanvas = this.global.createCanvas({
+        id: params.canvasId,
         width: window.width,
         height: window.height
       })), nativeCanvas.style && (nativeCanvas.style["pointer-events"] = "none");
@@ -20955,7 +20969,7 @@ class AnimateExecutor {
     AnimateExecutor.builtInAnimateMap[name] = animate;
   }
   constructor(target) {
-    this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._target = target;
+    this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._activeConfigList = null, this._target = target;
   }
   get started() {
     return this._started;
@@ -21064,7 +21078,15 @@ class AnimateExecutor {
     return parsedParams;
   }
   execute(params) {
-    Array.isArray(params) ? params.forEach(param => this._execute(param)) : this._execute(params);
+    if (Array.isArray(params)) {
+      const prevConfigList = this._activeConfigList;
+      this._activeConfigList = params;
+      try {
+        params.forEach(param => this._execute(param));
+      } finally {
+        this._activeConfigList = prevConfigList;
+      }
+    } else this._execute(params);
   }
   _execute(params) {
     if (params.selfOnly) return this._executeItem(params, this._target, 0, 1);
@@ -21090,6 +21112,7 @@ class AnimateExecutor {
   }
   executeTypeConfigItem(params, graphic, index, count) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    this.syncFinalAttrsFromContext(graphic);
     const {
         type = "fromTo",
         channel: channel,
@@ -21120,7 +21143,7 @@ class AnimateExecutor {
       props = params.to,
       from = params.from;
     const commitAttrOutChannel = this.shouldCommitAttrOutChannel(type);
-    props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+    props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
     let totalDelay = 0;
     oneByOneDelay && (totalDelay = oneByOneDelay * (count - index - 1));
     const delayAfterValue = isFunction(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
@@ -21142,6 +21165,7 @@ class AnimateExecutor {
   }
   executeTimelineItem(params, graphic, index, count) {
     var _a, _b, _c, _d;
+    this.syncFinalAttrsFromContext(graphic);
     const {
         timeSlices: timeSlices,
         startTime = 0,
@@ -21184,7 +21208,7 @@ class AnimateExecutor {
         props = effect.to,
         from = effect.from;
       const commitAttrOutChannel = this.shouldCommitAttrOutChannel(type);
-      props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel)), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel)), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel);
+      props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel);
       const custom = null !== (_a = effect.custom) && void 0 !== _a ? _a : AnimateExecutor.builtInAnimateMap[type],
         customType = effect.custom ? effect.customType : getCustomType(custom);
       this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
@@ -21205,7 +21229,7 @@ class AnimateExecutor {
     const customAnimate = new CustomAnimateConstructor(from, props, duration, easing, customParams);
     animate.play(customAnimate);
   }
-  createPropsFromChannel(channel, graphic, includeAttrOutChannel = !0) {
+  createPropsFromChannel(channel, graphic, includeAttrOutChannel = !0, excludedAttrOutKeys) {
     var _a;
     const props = {};
     let from = null;
@@ -21226,7 +21250,7 @@ class AnimateExecutor {
     }), diffAttrs && attrOutChannel) for (const key in diffAttrs) {
       const value = diffAttrs[key];
       if (void 0 === value) continue;
-      props.hasOwnProperty(key) || !!(null == from ? void 0 : from.hasOwnProperty(key)) || (attrOutChannel[key] = value, hasAttrs = !0);
+      props.hasOwnProperty(key) || !!(null == from ? void 0 : from.hasOwnProperty(key)) || (null == excludedAttrOutKeys ? void 0 : excludedAttrOutKeys[key]) || (attrOutChannel[key] = value, hasAttrs = !0);
     }
     return {
       from: from,
@@ -21238,8 +21262,78 @@ class AnimateExecutor {
     var _a, _b;
     return void 0 === value ? defaultValue : "function" == typeof value && graphic ? value(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : value;
   }
+  getAttrOutChannelExcludedKeys(graphic) {
+    var _a;
+    const configList = this._activeConfigList,
+      diffAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs;
+    if (!configList || configList.length <= 1 || !diffAttrs) return null;
+    let excludedKeys = null;
+    for (let i = 0; i < configList.length; i++) excludedKeys = this.collectAnimatedDiffKeys(configList[i], graphic, diffAttrs, excludedKeys);
+    return excludedKeys;
+  }
+  collectAnimatedDiffKeys(config, graphic, diffAttrs, keys) {
+    if ("timeSlices" in config) {
+      const slices = Array.isArray(config.timeSlices) ? config.timeSlices : [config.timeSlices];
+      for (let i = 0; i < slices.length; i++) {
+        const effects = Array.isArray(slices[i].effects) ? slices[i].effects : [slices[i].effects];
+        for (let j = 0; j < effects.length; j++) keys = this.collectAnimatedDiffKeysFromEffect(effects[j], graphic, diffAttrs, keys);
+      }
+      return keys;
+    }
+    return this.collectAnimatedDiffKeysFromEffect(config, graphic, diffAttrs, keys);
+  }
+  collectAnimatedDiffKeysFromEffect(effect, graphic, diffAttrs, keys) {
+    var _a;
+    if ("update" === (null !== (_a = effect.type) && void 0 !== _a ? _a : "fromTo")) {
+      const options = this.resolveValue(effect.options, graphic, void 0),
+        excludeChannels = null == options ? void 0 : options.excludeChannels;
+      for (const key in diffAttrs) Object.prototype.hasOwnProperty.call(diffAttrs, key) && void 0 !== diffAttrs[key] && !this.includesChannel(excludeChannels, key) && (null != keys || (keys = {}), keys[key] = !0);
+      return keys;
+    }
+    return keys = this.collectExplicitAnimatedKeys(effect.to, diffAttrs, keys), keys = this.collectExplicitAnimatedKeys(effect.from, diffAttrs, keys), this.collectChannelAnimatedKeys(effect.channel, diffAttrs, keys);
+  }
+  collectExplicitAnimatedKeys(attrs, diffAttrs, keys) {
+    if (!attrs) return keys;
+    for (const key in attrs) Object.prototype.hasOwnProperty.call(attrs, key) && Object.prototype.hasOwnProperty.call(diffAttrs, key) && void 0 !== diffAttrs[key] && (null != keys || (keys = {}), keys[key] = !0);
+    return keys;
+  }
+  collectChannelAnimatedKeys(channel, diffAttrs, keys) {
+    if (!channel) return keys;
+    if (Array.isArray(channel)) {
+      for (let i = 0; i < channel.length; i++) {
+        const key = channel[i];
+        Object.prototype.hasOwnProperty.call(diffAttrs, key) && void 0 !== diffAttrs[key] && (null != keys || (keys = {}), keys[key] = !0);
+      }
+      return keys;
+    }
+    for (const key in channel) if (Object.prototype.hasOwnProperty.call(channel, key) && Object.prototype.hasOwnProperty.call(diffAttrs, key) && void 0 !== diffAttrs[key]) {
+      const config = channel[key];
+      void 0 === config.to && void 0 === config.from || (null != keys || (keys = {}), keys[key] = !0);
+    }
+    return keys;
+  }
+  includesChannel(channels, key) {
+    if (!(null == channels ? void 0 : channels.length)) return !1;
+    for (let i = 0; i < channels.length; i++) if (channels[i] === key) return !0;
+    return !1;
+  }
+  syncFinalAttrsFromContext(graphic) {
+    var _a;
+    const finalAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs,
+      setFinalAttributes = graphic.setFinalAttributes;
+    finalAttrs && "function" == typeof setFinalAttributes && setFinalAttributes.call(graphic, finalAttrs);
+  }
   executeItem(params, graphic, index = 0, count = 1) {
-    return Array.isArray(params) ? params.map(param => this._executeItem(param, graphic, index, count)).filter(Boolean) : [this._executeItem(params, graphic, index, count)].filter(Boolean);
+    if (Array.isArray(params)) {
+      const prevConfigList = this._activeConfigList;
+      this._activeConfigList = params;
+      try {
+        return params.map(param => this._executeItem(param, graphic, index, count)).filter(Boolean);
+      } finally {
+        this._activeConfigList = prevConfigList;
+      }
+    }
+    return [this._executeItem(params, graphic, index, count)].filter(Boolean);
   }
   _executeItem(params, graphic, index = 0, count = 1) {
     if (!graphic) return null;
@@ -21533,9 +21627,7 @@ class AnimateExtension {
     return this.initAnimateExecutor(), this._animateExecutor.execute(config), this;
   }
   executeAnimations(configs) {
-    return this.initAnimateExecutor(), configs.forEach(config => {
-      this._animateExecutor.execute(config);
-    }), this;
+    return this.initAnimateExecutor(), this._animateExecutor.execute(configs), this;
   }
   getFinalAttribute() {
     return this.finalAttribute;
@@ -24444,8 +24536,9 @@ class LabelBase extends AnimateComponent {
                     }, attrs, new CustomPath2D());
                 };
             }
-            if (baseMark && baseMark.getAttributes(true).fill) {
-                lineGraphic.setAttribute('stroke', baseMark.getAttributes(true).fill);
+            const baseMarkAttrs = baseMark && this.getGraphicFinalLayoutAttributes(baseMark);
+            if (baseMarkAttrs === null || baseMarkAttrs === void 0 ? void 0 : baseMarkAttrs.fill) {
+                lineGraphic.setAttribute('stroke', baseMarkAttrs.fill);
             }
             if (this.attribute.line && !isEmpty(this.attribute.line.style)) {
                 lineGraphic.setAttributes(this.attribute.line.style);
@@ -24548,7 +24641,7 @@ class LabelBase extends AnimateComponent {
         if (this._enableAnimation !== false) {
             this._baseMarks.forEach(mark => {
                 markAttributeList.push(cloneAttributeSnapshot(mark.attribute));
-                mark.initAttributes(mark.getAttributes(true));
+                mark.initAttributes(this.getGraphicFinalLayoutAttributes(mark));
             });
         }
         const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
@@ -24717,6 +24810,14 @@ class LabelBase extends AnimateComponent {
     getRelatedGraphic(item) {
         return this._idToGraphic.get(item.id);
     }
+    getGraphicFinalLayoutAttributes(graphic) {
+        var _a, _b;
+        return ((_b = (_a = graphic.context) === null || _a === void 0 ? void 0 : _a.finalAttrs) !== null && _b !== void 0 ? _b : graphic.getAttributes(true));
+    }
+    hasGraphicContextFinalLayoutAttributes(graphic) {
+        var _a;
+        return !!((_a = graphic === null || graphic === void 0 ? void 0 : graphic.context) === null || _a === void 0 ? void 0 : _a.finalAttrs);
+    }
     _initText(data = []) {
         const { textStyle = {} } = this.attribute;
         const labels = [];
@@ -24726,7 +24827,7 @@ class LabelBase extends AnimateComponent {
             if (!baseMark) {
                 continue;
             }
-            const graphicAttribute = baseMark.getAttributes(true);
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(baseMark);
             const labelAttribute = Object.assign(Object.assign({ fill: this._isCollectionBase
                     ? isArray(graphicAttribute.stroke)
                         ? graphicAttribute.stroke.find(entry => !!entry && entry !== true)
@@ -24978,9 +25079,9 @@ class LabelBase extends AnimateComponent {
         var _a;
         if (graphic) {
             if (graphic.attribute.visible !== false) {
-                if ((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.animationState) {
+                if (((_a = graphic.context) === null || _a === void 0 ? void 0 : _a.animationState) || this.hasGraphicContextFinalLayoutAttributes(graphic)) {
                     const clonedGraphic = graphic.clone();
-                    Object.assign(clonedGraphic.attribute, graphic.getAttributes(true));
+                    Object.assign(clonedGraphic.attribute, this.getGraphicFinalLayoutAttributes(graphic));
                     return clonedGraphic.AABBBounds;
                 }
                 return graphic.AABBBounds;
@@ -25169,8 +25270,9 @@ class LabelBase extends AnimateComponent {
                 continue;
             }
             const baseMark = this.getRelatedGraphic(label.attribute);
-            let backgroundColor = baseMark.getAttributes(true).fill;
-            const backgroundOpacity = baseMark.getAttributes(true).fillOpacity;
+            const baseMarkAttrs = this.getGraphicFinalLayoutAttributes(baseMark);
+            let backgroundColor = baseMarkAttrs.fill;
+            const backgroundOpacity = baseMarkAttrs.fillOpacity;
             let foregroundColor = label.attribute.fill;
             if (isObject(backgroundColor) && backgroundColor.gradient) {
                 const firstStopColor = (_g = (_f = backgroundColor.stops) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.color;
@@ -25511,15 +25613,16 @@ class ArcLabel extends LabelBase {
         this._arcRight.clear();
         this._ellipsisWidth = ellipsisWidth;
         let maxRadius = 0;
-        currentMarks.forEach(currentMarks => {
-            if (currentMarks.attribute.outerRadius > maxRadius) {
-                maxRadius = currentMarks.attribute.outerRadius;
+        currentMarks.forEach(currentMark => {
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         data.forEach((d, index) => {
             var _a, _b;
             const currentMark = this._idToGraphic.get(d.id);
-            const graphicAttribute = currentMark.getAttributes(true);
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
             const center = { x: (_a = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = graphicAttribute === null || graphicAttribute === void 0 ? void 0 : graphicAttribute.y) !== null && _b !== void 0 ? _b : 0 };
             if (!isNil(data[index]) && !isNil(textBoundsArray[index])) {
                 const item = data[index] ? data[index] : null;
@@ -25704,8 +25807,9 @@ class ArcLabel extends LabelBase {
         };
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
-                maxRadius = currentMark.getAttributes(true).outerRadius;
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -25938,8 +26042,9 @@ class ArcLabel extends LabelBase {
         const labelConfig = attribute;
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
-                maxRadius = currentMark.getAttributes(true).outerRadius;
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -25981,8 +26086,9 @@ class ArcLabel extends LabelBase {
         const plotRect = { width: center.x * 2, height: center.y * 2 };
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
-                maxRadius = currentMark.getAttributes(true).outerRadius;
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -26053,8 +26159,9 @@ class ArcLabel extends LabelBase {
         const line1MinLength = labelConfig.line.line1MinLength;
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
-            if (currentMark.getAttributes(true).outerRadius > maxRadius) {
-                maxRadius = currentMark.getAttributes(true).outerRadius;
+            const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+            if (graphicAttribute.outerRadius > maxRadius) {
+                maxRadius = graphicAttribute.outerRadius;
             }
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
@@ -26142,7 +26249,7 @@ class ArcLabel extends LabelBase {
                 });
             }
             if (baseMark.type === 'arc3d' && baseMark) {
-                const { beta, x, y } = baseMark.getAttributes(true);
+                const { beta, x, y } = this.getGraphicFinalLayoutAttributes(baseMark);
                 lineGraphic.setAttributes({
                     beta,
                     anchor3d: [x, y]
@@ -33937,6 +34044,7 @@ class Brush extends AbstractComponent {
         this._operatingMaskMoveDy = 0;
         this._operatingMaskMoveRangeX = [-Infinity, Infinity];
         this._operatingMaskMoveRangeY = [-Infinity, Infinity];
+        this._brushEventStage = null;
         this._brushMaskAABBBoundsDict = {};
         this._firstUpdate = true;
         this._onBrushStart = (e) => {
@@ -33947,8 +34055,12 @@ class Brush extends AbstractComponent {
                 return;
             }
             const { updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, brushMoved = true } = this.attribute;
-            array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay));
-            array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd));
+            const stage = this.stage;
+            if (!stage) {
+                return;
+            }
+            array(updateTrigger).forEach(t => stage.addEventListener(t, this._onBrushingWithDelay));
+            array(endTrigger).forEach(t => stage.addEventListener(t, this._onBrushEnd));
             e.stopPropagation();
             this._firstUpdate = true;
             this._activeMoveState = brushMoved && this._isPosInBrushMask(e);
@@ -34012,10 +34124,15 @@ class Brush extends AbstractComponent {
         if (this.attribute.disableTriggerEvent) {
             return;
         }
+        const stage = this.stage;
+        if (!stage) {
+            return;
+        }
+        this._brushEventStage = stage;
         const { trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this
             .attribute;
-        array(trigger).forEach(t => this.stage.addEventListener(t, this._onBrushStart));
-        array(resetTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushClear));
+        array(trigger).forEach(t => stage.addEventListener(t, this._onBrushStart));
+        array(resetTrigger).forEach(t => stage.addEventListener(t, this._onBrushClear));
     }
     _initDraw(e) {
         if (this.attribute.interactive === false) {
@@ -34153,17 +34270,38 @@ class Brush extends AbstractComponent {
         const group = this.createOrUpdateChild('brush-container', {}, 'group');
         this._container = group;
     }
+    setStage(stage, layer) {
+        if (this._brushEventStage && this._brushEventStage !== stage) {
+            this.releaseBrushEvents();
+        }
+        super.setStage(stage, layer);
+    }
+    release(all) {
+        this.releaseBrushEvents();
+        super.release(all);
+    }
     releaseBrushEvents() {
+        var _a;
+        const stage = (_a = this._brushEventStage) !== null && _a !== void 0 ? _a : this.stage;
+        if (!stage) {
+            return;
+        }
         const { trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this
             .attribute;
-        array(trigger).forEach(t => this.stage.removeEventListener(t, this._onBrushStart));
-        array(resetTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushClear));
-        this._releaseBrushUpdateEvents();
+        array(trigger).forEach(t => stage.removeEventListener(t, this._onBrushStart));
+        array(resetTrigger).forEach(t => stage.removeEventListener(t, this._onBrushClear));
+        this._releaseBrushUpdateEvents(stage);
+        this._brushEventStage = null;
     }
-    _releaseBrushUpdateEvents() {
+    _releaseBrushUpdateEvents(stage) {
+        var _a;
+        if (stage === void 0) { stage = (_a = this._brushEventStage) !== null && _a !== void 0 ? _a : this.stage; }
+        if (!stage) {
+            return;
+        }
         const { updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger } = this.attribute;
-        array(updateTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushingWithDelay));
-        array(endTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushEnd));
+        array(updateTrigger).forEach(t => stage.removeEventListener(t, this._onBrushingWithDelay));
+        array(endTrigger).forEach(t => stage.removeEventListener(t, this._onBrushEnd));
     }
     _computeMaskPoints() {
         const { brushType, xRange = [0, 0], yRange = [0, 0] } = this.attribute;
@@ -36768,6 +36906,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.1.0-alpha.20";
+const version = "1.1.0-alpha.22";
 
 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, IDataZoomEvent, IDataZoomInteractiveEvent, 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, SeriesNumberCellStateValue, SeriesNumberEvent, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, TableSeriesNumber, 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, installPoptipToApp, installScrollbarToApp, 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, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };

package/es/brush/brush.d.ts

@@ -1,3 +1,4 @@
+import type { ILayer, IStage } from '@visactor/vrender-core';
 import { AbstractComponent } from '../core/base';
 import type { BrushAttributes } from './type';
 import type { ComponentOptions } from '../interface';
@@ -39,6 +40,7 @@ export declare class Brush extends AbstractComponent<Required<BrushAttributes>>
     private _operatingMaskMoveRangeY;
     private _cacheMovePoint;
     private _operatingMask;
+    private _brushEventStage;
     private _brushMaskAABBBoundsDict;
     private _firstUpdate;
     private _startPos;
@@ -56,6 +58,8 @@ export declare class Brush extends AbstractComponent<Required<BrushAttributes>>
     private _drawEnd;
     private _moveEnd;
     protected render(): void;
+    setStage(stage?: IStage, layer?: ILayer): void;
+    release(all?: boolean): void;
     releaseBrushEvents(): void;
     private _releaseBrushUpdateEvents;
     private _computeMaskPoints;

package/es/brush/brush.js

@@ -23,15 +23,16 @@ export class Brush extends AbstractComponent {
         this.name = "brush", this._activeBrushState = !1, this._activeDrawState = !1, this._cacheDrawPoints = [], 
         this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, 
         this._operatingMaskMoveRangeX = [ -1 / 0, 1 / 0 ], this._operatingMaskMoveRangeY = [ -1 / 0, 1 / 0 ], 
-        this._brushMaskAABBBoundsDict = {}, this._firstUpdate = !0, this._onBrushStart = e => {
+        this._brushEventStage = null, this._brushMaskAABBBoundsDict = {}, this._firstUpdate = !0, 
+        this._onBrushStart = e => {
             if (!1 === this.attribute.interactive) return;
             if (!1 === this._beforeBrushEvent(e)) return;
-            const {updateTrigger: updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger: endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, brushMoved: brushMoved = !0} = this.attribute;
-            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), 
+            const {updateTrigger: updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger: endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, brushMoved: brushMoved = !0} = this.attribute, stage = this.stage;
+            stage && (array(updateTrigger).forEach((t => stage.addEventListener(t, this._onBrushingWithDelay))), 
+            array(endTrigger).forEach((t => 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._cacheDrawPoints = [ this._startPos ];
+            this._cacheDrawPoints = [ this._startPos ]);
         }, this._onBrushing = e => {
             !1 !== this.attribute.interactive && !1 !== this._beforeBrushEvent(e) && (this._outOfInteractiveRange(e) || (e.stopPropagation(), 
             this._firstUpdate ? (this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e), 
@@ -49,9 +50,11 @@ export class Brush extends AbstractComponent {
     }
     _bindBrushEvents() {
         if (this.releaseBrushEvents(), this.attribute.disableTriggerEvent) return;
+        const stage = this.stage;
+        if (!stage) return;
+        this._brushEventStage = stage;
         const {trigger: trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, resetTrigger: resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger} = this.attribute;
-        array(trigger).forEach((t => this.stage.addEventListener(t, this._onBrushStart))), 
-        array(resetTrigger).forEach((t => this.stage.addEventListener(t, this._onBrushClear)));
+        array(trigger).forEach((t => stage.addEventListener(t, this._onBrushStart))), array(resetTrigger).forEach((t => stage.addEventListener(t, this._onBrushClear)));
     }
     _initDraw(e) {
         if (!1 === this.attribute.interactive) return;
@@ -115,16 +118,29 @@ export class Brush extends AbstractComponent {
         const group = this.createOrUpdateChild("brush-container", {}, "group");
         this._container = group;
     }
+    setStage(stage, layer) {
+        this._brushEventStage && this._brushEventStage !== stage && this.releaseBrushEvents(), 
+        super.setStage(stage, layer);
+    }
+    release(all) {
+        this.releaseBrushEvents(), super.release(all);
+    }
     releaseBrushEvents() {
+        var _a;
+        const stage = null !== (_a = this._brushEventStage) && void 0 !== _a ? _a : this.stage;
+        if (!stage) return;
         const {trigger: trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, resetTrigger: resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger} = this.attribute;
-        array(trigger).forEach((t => this.stage.removeEventListener(t, this._onBrushStart))), 
-        array(resetTrigger).forEach((t => this.stage.removeEventListener(t, this._onBrushClear))), 
-        this._releaseBrushUpdateEvents();
+        array(trigger).forEach((t => stage.removeEventListener(t, this._onBrushStart))), 
+        array(resetTrigger).forEach((t => stage.removeEventListener(t, this._onBrushClear))), 
+        this._releaseBrushUpdateEvents(stage), this._brushEventStage = null;
     }
-    _releaseBrushUpdateEvents() {
+    _releaseBrushUpdateEvents(stage) {
+        var _a;
+        if (void 0 === stage && (stage = null !== (_a = this._brushEventStage) && void 0 !== _a ? _a : this.stage), 
+        !stage) return;
         const {updateTrigger: updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger: endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger} = this.attribute;
-        array(updateTrigger).forEach((t => this.stage.removeEventListener(t, this._onBrushingWithDelay))), 
-        array(endTrigger).forEach((t => this.stage.removeEventListener(t, this._onBrushEnd)));
+        array(updateTrigger).forEach((t => stage.removeEventListener(t, this._onBrushingWithDelay))), 
+        array(endTrigger).forEach((t => stage.removeEventListener(t, this._onBrushEnd)));
     }
     _computeMaskPoints() {
         const {brushType: brushType, xRange: xRange = [ 0, 0 ], yRange: yRange = [ 0, 0 ]} = this.attribute;