@visactor/react-vchart 2.1.0-alpha.8 → 2.1.0-alpha.9

package/build/index.js

@@ -14678,10 +14678,18 @@
       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,
@@ -26435,7 +26443,7 @@
       };
     }
 
-    var __rest$x = undefined && undefined.__rest || function (s, e) {
+    var __rest$z = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -26533,7 +26541,7 @@
             {
               textConfig = []
             } = _a,
-            rest = __rest$x(_a, ["textConfig"]);
+            rest = __rest$z(_a, ["textConfig"]);
           if ("Backspace" === ev.type && !textConfig.length) return;
           let str = ev.data;
           this.isComposing || "Backspace" === ev.type || str || (str = "\n"), this.selectionStartCursorIdx > this.cursorIndex && ([this.cursorIndex, this.selectionStartCursorIdx] = [this.selectionStartCursorIdx, this.cursorIndex]);
@@ -30990,188 +30998,6 @@
     }
     loadBrowserEnv.__loaded = !1;
 
-    class NodeWindowHandlerContribution extends BaseWindowHandlerContribution {
-      get container() {
-        return null;
-      }
-      constructor(global = application.global) {
-        super(), this.global = global, this.type = "node";
-      }
-      getTitle() {
-        return "";
-      }
-      getWH() {
-        return {
-          width: this.canvas.displayWidth,
-          height: this.canvas.displayHeight
-        };
-      }
-      getXY() {
-        return {
-          x: 0,
-          y: 0
-        };
-      }
-      createWindow(params) {
-        params.canvas ? this.createWindowByCanvas(params) : this.createWindowByConfig(params);
-      }
-      createWindowByConfig(params) {
-        const nativeCanvas = this.global.createCanvas({
-            width: params.width,
-            height: params.height
-          }),
-          options = {
-            width: params.width,
-            height: params.height,
-            dpr: params.dpr,
-            nativeCanvas: nativeCanvas,
-            id: Generator.GenAutoIncrementId().toString(),
-            canvasControled: !0
-          };
-        this.canvas = new NodeCanvas(options);
-      }
-      createWindowByCanvas(params) {
-        var _a;
-        const canvas = params.canvas,
-          dpr = null !== (_a = params.dpr) && void 0 !== _a ? _a : 1;
-        let width = params.width,
-          height = params.height;
-        null != width && null != height && params.canvasControled || (width = canvas.width / dpr, height = canvas.height / dpr), this.canvas = new NodeCanvas({
-          width: width,
-          height: height,
-          dpr: dpr,
-          nativeCanvas: canvas,
-          canvasControled: params.canvasControled
-        });
-      }
-      releaseWindow() {
-        this.canvas.release();
-      }
-      resizeWindow(width, height) {
-        this.canvas.resize(width, height);
-      }
-      setDpr(dpr) {
-        this.canvas.dpr = dpr;
-      }
-      getContext() {
-        return this.canvas.getContext();
-      }
-      getNativeHandler() {
-        return this.canvas;
-      }
-      getDpr() {
-        return this.canvas.dpr;
-      }
-      getImageBuffer(type = "image/png") {
-        return this.canvas.nativeCanvas.toBuffer(type);
-      }
-      addEventListener(type, listener, options) {}
-      dispatchEvent(event) {
-        return !0;
-      }
-      removeEventListener(type, listener, options) {}
-      getStyle() {}
-      setStyle(style) {}
-      getBoundingClientRect() {
-        return null;
-      }
-      clearViewBox(color) {}
-    }
-    NodeWindowHandlerContribution.env = "node";
-    function bindNodeWindowContribution(container) {
-      var _a, _b;
-      (null === (_a = container.isBound) || void 0 === _a ? void 0 : _a.call(container, NodeWindowHandlerContribution)) || container.bind(NodeWindowHandlerContribution).toSelf(), (null === (_b = container.getNamed) || void 0 === _b ? void 0 : _b.call(container, WindowHandlerContribution, NodeWindowHandlerContribution.env)) || container.bind(WindowHandlerContribution).toService(NodeWindowHandlerContribution).whenTargetNamed(NodeWindowHandlerContribution.env);
-    }
-
-    class NodeEnvContribution extends BaseEnvContribution {
-      constructor() {
-        super(...arguments), this.type = "node", this._lastTime = 0, this.supportEvent = !1;
-      }
-      configure(service, pkg) {
-        service.env === this.type && (service.setActiveEnvContribution(this), this.pkg = pkg);
-      }
-      getDynamicCanvasCount() {
-        return 0;
-      }
-      getStaticCanvasCount() {
-        return 999;
-      }
-      loadJson(url) {
-        const jsonPromise = fetch(url).then(data => data.json());
-        return jsonPromise.then(json => ({
-          data: json,
-          state: "success"
-        })).catch(() => ({
-          data: null,
-          state: "fail"
-        })), jsonPromise;
-      }
-      loadArrayBuffer(url) {
-        return fetch(url).then(data => data.arrayBuffer()).then(arrayBuffer => ({
-          data: arrayBuffer,
-          loadState: "success"
-        })).catch(() => ({
-          data: null,
-          loadState: "fail"
-        }));
-      }
-      loadImage(url) {
-        const {
-          loadImage: loadImage
-        } = this.pkg;
-        return loadImage ? loadImage(url).then(image => ({
-          loadState: image ? "success" : "fail",
-          data: image
-        })).catch(() => ({
-          loadState: "fail",
-          data: null
-        })) : Promise.reject(new Error("node-canvas loadImage could not be found!"));
-      }
-      loadSvg(svgStr) {
-        const Resvg = this.pkg.Resvg;
-        if (!Resvg) return Promise.reject(new Error("@resvg/resvg-js svgParser could not be found!"));
-        const pngData = new Resvg(svgStr).render().asPng();
-        return this.loadImage(pngData);
-      }
-      createCanvas(params) {
-        return this.pkg.createCanvas(params.width, params.height);
-      }
-      releaseCanvas(canvas) {}
-      getDevicePixelRatio() {
-        return 1;
-      }
-      getRequestAnimationFrame() {
-        return function (callback) {
-          return rafBasedSto.call(callback);
-        };
-      }
-      getCancelAnimationFrame() {
-        return h => {
-          rafBasedSto.clear(h);
-        };
-      }
-      addEventListener(type, listener, options) {}
-      removeEventListener(type, listener, options) {}
-      getElementById(str) {
-        return null;
-      }
-      getRootElement() {
-        return null;
-      }
-      dispatchEvent(event) {}
-      release(...params) {}
-      createOffscreenCanvas(params) {}
-    }
-
-    function bindNodeEnv(container) {
-      var _a, _b;
-      (null === (_b = (_a = container).isBound) || void 0 === _b ? void 0 : _b.call(_a, NodeEnvContribution)) || (container.bind(NodeEnvContribution).toSelf().inSingletonScope(), container.bind(EnvContribution).toService(NodeEnvContribution));
-    }
-    function loadNodeEnv(container = getLegacyBindingContext(), loadPicker = !0) {
-      loadNodeEnv.__loaded || (loadNodeEnv.__loaded = !0, bindNodeEnv(container), bindNodeCanvasModules(container), bindNodeWindowContribution(container));
-    }
-    loadNodeEnv.__loaded = !1;
-
     class DefaultMathPickerService extends DefaultPickService {
       constructor(contributions, pickItemInterceptorContributions, pickServiceInterceptorContributions) {
         super(pickItemInterceptorContributions, pickServiceInterceptorContributions), this.contributions = contributions, this.pickItemInterceptorContributions = pickItemInterceptorContributions, this.pickServiceInterceptorContributions = pickServiceInterceptorContributions, this.global.hooks.onSetEnv.tap("math-picker-service", (lastEnv, env, global) => {
@@ -31355,6 +31181,195 @@
       bindMathPickerContribution(c), bindMathPicker(c), bindArcMathPickerContribution(c), bindAreaMathPickerContribution(c), bindCircleMathPickerContribution(c), bindGlyphMathPickerContribution(c), bindImageMathPickerContribution(c), bindLineMathPickerContribution(c), bindPolygonMathPickerContribution(c), bindPathMathPickerContribution(c), bindRectMathPickerContribution(c), bindRichTextMathPickerContribution(c), bindSymbolMathPickerContribution(c), bindTextMathPickerContribution(c);
     }
 
+    class NodeWindowHandlerContribution extends BaseWindowHandlerContribution {
+      get container() {
+        return null;
+      }
+      constructor(global = application.global) {
+        super(), this.global = global, this.type = "node";
+      }
+      getTitle() {
+        return "";
+      }
+      getWH() {
+        return {
+          width: this.canvas.displayWidth,
+          height: this.canvas.displayHeight
+        };
+      }
+      getXY() {
+        return {
+          x: 0,
+          y: 0
+        };
+      }
+      createWindow(params) {
+        params.canvas ? this.createWindowByCanvas(params) : this.createWindowByConfig(params);
+      }
+      createWindowByConfig(params) {
+        const nativeCanvas = this.global.createCanvas({
+            width: params.width,
+            height: params.height
+          }),
+          options = {
+            width: params.width,
+            height: params.height,
+            dpr: params.dpr,
+            nativeCanvas: nativeCanvas,
+            id: Generator.GenAutoIncrementId().toString(),
+            canvasControled: !0
+          };
+        this.canvas = new NodeCanvas(options);
+      }
+      createWindowByCanvas(params) {
+        var _a;
+        const canvas = params.canvas,
+          dpr = null !== (_a = params.dpr) && void 0 !== _a ? _a : 1;
+        let width = params.width,
+          height = params.height;
+        null != width && null != height && params.canvasControled || (width = canvas.width / dpr, height = canvas.height / dpr), this.canvas = new NodeCanvas({
+          width: width,
+          height: height,
+          dpr: dpr,
+          nativeCanvas: canvas,
+          canvasControled: params.canvasControled
+        });
+      }
+      releaseWindow() {
+        this.canvas.release();
+      }
+      resizeWindow(width, height) {
+        this.canvas.resize(width, height);
+      }
+      setDpr(dpr) {
+        this.canvas.dpr = dpr;
+      }
+      getContext() {
+        return this.canvas.getContext();
+      }
+      getNativeHandler() {
+        return this.canvas;
+      }
+      getDpr() {
+        return this.canvas.dpr;
+      }
+      getImageBuffer(type = "image/png") {
+        return this.canvas.nativeCanvas.toBuffer(type);
+      }
+      addEventListener(type, listener, options) {}
+      dispatchEvent(event) {
+        return !0;
+      }
+      removeEventListener(type, listener, options) {}
+      getStyle() {}
+      setStyle(style) {}
+      getBoundingClientRect() {
+        return null;
+      }
+      clearViewBox(color) {}
+    }
+    NodeWindowHandlerContribution.env = "node";
+    function bindNodeWindowContribution(container) {
+      var _a, _b;
+      (null === (_a = container.isBound) || void 0 === _a ? void 0 : _a.call(container, NodeWindowHandlerContribution)) || container.bind(NodeWindowHandlerContribution).toSelf(), (null === (_b = container.getNamed) || void 0 === _b ? void 0 : _b.call(container, WindowHandlerContribution, NodeWindowHandlerContribution.env)) || container.bind(WindowHandlerContribution).toService(NodeWindowHandlerContribution).whenTargetNamed(NodeWindowHandlerContribution.env);
+    }
+
+    class NodeEnvContribution extends BaseEnvContribution {
+      constructor() {
+        super(...arguments), this.type = "node", this._lastTime = 0, this.supportEvent = !1;
+      }
+      configure(service, pkg) {
+        service.env === this.type && (service.setActiveEnvContribution(this), this.pkg = pkg);
+      }
+      getNodePackage(feature, requiredKey) {
+        if (!this.pkg || requiredKey && "function" != typeof this.pkg[requiredKey]) throw new Error(`Node env requires node-canvas package before ${feature}. Use vglobal.setEnv('node', CanvasPkg) before createNodeVRenderApp(), or createNodeVRenderApp({ envParams: CanvasPkg }).`);
+        return this.pkg;
+      }
+      getDynamicCanvasCount() {
+        return 0;
+      }
+      getStaticCanvasCount() {
+        return 999;
+      }
+      loadJson(url) {
+        const jsonPromise = fetch(url).then(data => data.json());
+        return jsonPromise.then(json => ({
+          data: json,
+          state: "success"
+        })).catch(() => ({
+          data: null,
+          state: "fail"
+        })), jsonPromise;
+      }
+      loadArrayBuffer(url) {
+        return fetch(url).then(data => data.arrayBuffer()).then(arrayBuffer => ({
+          data: arrayBuffer,
+          loadState: "success"
+        })).catch(() => ({
+          data: null,
+          loadState: "fail"
+        }));
+      }
+      loadImage(url) {
+        const {
+          loadImage: loadImage
+        } = this.getNodePackage("loadImage", "loadImage");
+        return loadImage ? loadImage(url).then(image => ({
+          loadState: image ? "success" : "fail",
+          data: image
+        })).catch(() => ({
+          loadState: "fail",
+          data: null
+        })) : Promise.reject(new Error("node-canvas loadImage could not be found!"));
+      }
+      loadSvg(svgStr) {
+        const Resvg = this.getNodePackage("loadSvg").Resvg;
+        if (!Resvg) return Promise.reject(new Error("@resvg/resvg-js svgParser could not be found!"));
+        const pngData = new Resvg(svgStr).render().asPng();
+        return this.loadImage(pngData);
+      }
+      createCanvas(params) {
+        const {
+          createCanvas: createCanvas
+        } = this.getNodePackage("createCanvas", "createCanvas");
+        return createCanvas(params.width, params.height);
+      }
+      releaseCanvas(canvas) {}
+      getDevicePixelRatio() {
+        return 1;
+      }
+      getRequestAnimationFrame() {
+        return function (callback) {
+          return rafBasedSto.call(callback);
+        };
+      }
+      getCancelAnimationFrame() {
+        return h => {
+          rafBasedSto.clear(h);
+        };
+      }
+      addEventListener(type, listener, options) {}
+      removeEventListener(type, listener, options) {}
+      getElementById(str) {
+        return null;
+      }
+      getRootElement() {
+        return null;
+      }
+      dispatchEvent(event) {}
+      release(...params) {}
+      createOffscreenCanvas(params) {}
+    }
+
+    function bindNodeEnv(container) {
+      var _a, _b;
+      (null === (_b = (_a = container).isBound) || void 0 === _b ? void 0 : _b.call(_a, NodeEnvContribution)) || (container.bind(NodeEnvContribution).toSelf().inSingletonScope(), container.bind(EnvContribution).toService(NodeEnvContribution));
+    }
+    function loadNodeEnv(container = getLegacyBindingContext(), loadPicker = !0) {
+      loadNodeEnv.__loaded || (loadNodeEnv.__loaded = !0, bindNodeEnv(container), bindNodeCanvasModules(container), bindNodeWindowContribution(container));
+    }
+    loadNodeEnv.__loaded = !1;
+
     var lib$1 = {};
 
     var gif = {};
@@ -32148,17 +32163,46 @@
         });
       }), bindGifImageRenderContribution(bindingContext), refreshRuntimeInstallerContributions();
     }
-    function installBrowserEnvToApp(app) {
+    function createForcedEnvParams(envParams) {
+      if (null != envParams && ("object" == typeof envParams || "function" == typeof envParams)) {
+        const forcedEnvParams = Object.create(envParams);
+        return forcedEnvParams.force = !0, forcedEnvParams;
+      }
+      return {
+        force: !0
+      };
+    }
+    function activateRuntimeEnv(env, {
+      envParams: envParams,
+      force = !1
+    } = {}) {
+      getRuntimeInstallerGlobal().setEnv(env, force ? createForcedEnvParams(envParams) : envParams);
+    }
+    function installRuntimeEnvToApp(app, env, {
+      bindEnv: bindEnv,
+      bindCanvasModules: bindCanvasModules,
+      bindWindowContribution: bindWindowContribution
+    }, envParams) {
       configureRuntimeApplicationForApp(app);
       const bindingContext = getRuntimeInstallerBindingContext();
-      bindBrowserEnv(bindingContext), bindBrowserCanvasModules(bindingContext), bindBrowserWindowContribution(bindingContext), refreshRuntimeInstallerContributions(), getRuntimeInstallerGlobal().setEnv("browser", {
+      bindEnv(bindingContext), bindCanvasModules(bindingContext), bindWindowContribution(bindingContext), refreshRuntimeInstallerContributions(), activateRuntimeEnv(env, {
+        envParams: envParams,
         force: !0
       });
     }
-    function installNodeEnvToApp(app) {
-      configureRuntimeApplicationForApp(app);
-      const bindingContext = getRuntimeInstallerBindingContext();
-      bindNodeEnv(bindingContext), bindNodeCanvasModules(bindingContext), bindNodeWindowContribution(bindingContext), refreshRuntimeInstallerContributions();
+    function installBrowserEnvToApp(app, envParams) {
+      installRuntimeEnvToApp(app, "browser", {
+        bindEnv: bindBrowserEnv,
+        bindCanvasModules: bindBrowserCanvasModules,
+        bindWindowContribution: bindBrowserWindowContribution
+      }, envParams);
+    }
+    function installNodeEnvToApp(app, envParams) {
+      installRuntimeEnvToApp(app, "node", {
+        bindEnv: bindNodeEnv,
+        bindCanvasModules: bindNodeCanvasModules,
+        bindWindowContribution: bindNodeWindowContribution
+      }, envParams);
     }
     function installDefaultGraphicsToApp(app) {
       configureRuntimeApplicationForApp(app), ensureDefaultGraphicsInstalled(), installRuntimeDrawContributionsToApp(app), installRuntimeGraphicRenderersToApp(app);
@@ -33345,7 +33389,7 @@
       registerGroup(), registerRect(), registerSymbol(), registerRichtext(), registerText();
     }
 
-    var __rest$w = undefined && undefined.__rest || function (s, e) {
+    var __rest$y = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -33399,7 +33443,7 @@
         const {
             visible: shapeVisible
           } = shape,
-          shapeStyle = __rest$w(shape, ["visible"]);
+          shapeStyle = __rest$y(shape, ["visible"]);
         if (isBoolean$1(shapeVisible)) {
           const size = (null == shapeStyle ? void 0 : shapeStyle.size) || 10,
             maxSize = isNumber$2(size) ? size : Math.max(size[0], size[1]);
@@ -33500,7 +33544,7 @@
         const {
             visible: bgVisible
           } = panel,
-          backgroundStyle = __rest$w(panel, ["visible"]);
+          backgroundStyle = __rest$y(panel, ["visible"]);
         if (visible && isBoolean$1(bgVisible)) {
           const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
             visible: bgVisible && !!text,
@@ -33582,7 +33626,7 @@
       merge$1(theme.poptip, DEFAULT_THEME, defaultPoptipTheme);
     }
 
-    var __rest$v = undefined && undefined.__rest || function (s, e) {
+    var __rest$x = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -33691,7 +33735,7 @@
             visible: bgVisible,
             square: square
           } = panel,
-          backgroundStyle = __rest$v(panel, ["visible", "square"]);
+          backgroundStyle = __rest$x(panel, ["visible", "square"]);
         if (square) {
           const maxWH = max$1(popTipWidth, poptipHeight);
           popTipWidth = maxWH;
@@ -36654,7 +36698,7 @@
         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;
@@ -36763,7 +36807,15 @@
         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);
@@ -36789,6 +36841,7 @@
       }
       executeTypeConfigItem(params, graphic, index, count) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
+        this.syncFinalAttrsFromContext(graphic);
         const {
             type = "fromTo",
             channel: channel,
@@ -36819,7 +36872,7 @@
           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$1(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
@@ -36841,6 +36894,7 @@
       }
       executeTimelineItem(params, graphic, index, count) {
         var _a, _b, _c, _d;
+        this.syncFinalAttrsFromContext(graphic);
         const {
             timeSlices: timeSlices,
             startTime = 0,
@@ -36883,7 +36937,7 @@
             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);
@@ -36904,7 +36958,7 @@
         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;
@@ -36925,7 +36979,7 @@
         }), 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,
@@ -36937,8 +36991,78 @@
         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;
@@ -37232,9 +37356,7 @@
         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;
@@ -37878,8 +38000,9 @@
       return commitAttrs;
     }
     function commitAnimationStaticAttrs(target, keys, animate, fallbackAttrs) {
+      var _a, _b;
       const commitAttrs = buildAnimationStaticCommitAttrs(target, keys, animate, fallbackAttrs);
-      return !!commitAttrs && (target.setAttributes(commitAttrs, !1, {
+      return !!commitAttrs && (null === (_b = (_a = target).setFinalAttributes) || void 0 === _b || _b.call(_a, commitAttrs), target.setAttributes(commitAttrs, !1, {
         type: AttributeUpdateType.ANIMATE_END
       }), !0);
     }
@@ -37901,10 +38024,16 @@
         return [];
       }
       onBind() {
+        var _a, _b, _c, _d, _e;
         super.onBind();
         const currentAttribute = this.target.attribute,
+          explicitFrom = null !== (_a = this.from) && void 0 !== _a ? _a : {},
+          explicitTo = null !== (_b = this.to) && void 0 !== _b ? _b : {},
+          context = null !== (_c = this.target.context) && void 0 !== _c ? _c : {},
+          contextFinalAttrs = null !== (_d = context.finalAttrs) && void 0 !== _d ? _d : {},
+          contextDiffAttrs = null !== (_e = context.diffAttrs) && void 0 !== _e ? _e : {},
           finalAttribute = this.target.getFinalAttribute();
-        this.from = {}, this.to = {}, Object.prototype.hasOwnProperty.call(currentAttribute, "points") && (this.from.points = currentAttribute.points), Object.prototype.hasOwnProperty.call(currentAttribute, "segments") && (this.from.segments = currentAttribute.segments), finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, "points") && (this.to.points = finalAttribute.points), finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, "segments") && (this.to.segments = finalAttribute.segments), this.props = this.to;
+        this.from = {}, this.to = {}, Object.prototype.hasOwnProperty.call(explicitFrom, "points") ? this.from.points = explicitFrom.points : Object.prototype.hasOwnProperty.call(currentAttribute, "points") && (this.from.points = currentAttribute.points), Object.prototype.hasOwnProperty.call(explicitFrom, "segments") ? this.from.segments = explicitFrom.segments : Object.prototype.hasOwnProperty.call(currentAttribute, "segments") && (this.from.segments = currentAttribute.segments), Object.prototype.hasOwnProperty.call(explicitTo, "points") ? this.to.points = explicitTo.points : Object.prototype.hasOwnProperty.call(contextFinalAttrs, "points") ? this.to.points = contextFinalAttrs.points : Object.prototype.hasOwnProperty.call(contextDiffAttrs, "points") ? this.to.points = contextDiffAttrs.points : finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, "points") && (this.to.points = finalAttribute.points), Object.prototype.hasOwnProperty.call(explicitTo, "segments") ? this.to.segments = explicitTo.segments : Object.prototype.hasOwnProperty.call(contextFinalAttrs, "segments") ? this.to.segments = contextFinalAttrs.segments : Object.prototype.hasOwnProperty.call(contextDiffAttrs, "segments") ? this.to.segments = contextDiffAttrs.segments : finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, "segments") && (this.to.segments = finalAttribute.segments), this.props = this.to;
         const originFromPoints = this.getPoints(this.from),
           originToPoints = this.getPoints(this.to, !0);
         this.fromPoints = originFromPoints ? Array.isArray(originFromPoints) ? originFromPoints : [originFromPoints] : [], this.toPoints = originToPoints ? Array.isArray(originToPoints) ? originToPoints : [originToPoints] : [];
@@ -42157,7 +42286,7 @@
       registerGroup(), registerPath();
     }
 
-    var __rest$u = undefined && undefined.__rest || function (s, e) {
+    var __rest$w = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -42264,7 +42393,7 @@
             style: style,
             state: state
           } = _a,
-          restLineAttrs = __rest$u(_a, ["startSymbol", "endSymbol", "style", "state"]),
+          restLineAttrs = __rest$w(_a, ["startSymbol", "endSymbol", "style", "state"]),
           lineAttrs = Object.assign({
             startSymbol: startSymbol,
             endSymbol: endSymbol,
@@ -42305,7 +42434,7 @@
             state = {},
             maxWidth: maxWidth
           } = _d,
-          restAttrs = __rest$u(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
+          restAttrs = __rest$w(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
         let percent = .5;
         "start" === position ? percent = 0 : "end" === position && (percent = 1);
         const {
@@ -42407,7 +42536,7 @@
             text: textContent = "",
             maxWidth: maxWidth
           } = _c,
-          restAttrs = __rest$u(_c, ["position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text", "maxWidth"]),
+          restAttrs = __rest$w(_c, ["position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text", "maxWidth"]),
           point = this.getTickCoord(0);
         "bottom" === orient || "top" === orient ? point.x = position : point.y = position;
         let tickLength = 0;
@@ -42779,7 +42908,7 @@
       });
     }
 
-    var __rest$t = undefined && undefined.__rest || function (s, e) {
+    var __rest$v = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -42838,7 +42967,7 @@
             background: background,
             state = {}
           } = _d,
-          restAttrs = __rest$t(_d, ["space", "textStyle", "shape", "background", "state"]);
+          restAttrs = __rest$v(_d, ["space", "textStyle", "shape", "background", "state"]);
         let titlePoint = center,
           labelHeight = 0;
         (null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.visible) && !1 === this.attribute.label.inside && (labelHeight = get$1(this.attribute.label, "style.fontSize", 12) + get$1(this.attribute.label, "space", 4));
@@ -44798,7 +44927,7 @@
       return "left" === align ? 0 : "right" === align ? 1 : .5;
     }
 
-    var __rest$s = undefined && undefined.__rest || function (s, e) {
+    var __rest$u = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -44822,7 +44951,7 @@
           } = this.params,
           diff = {};
         for (const key in curText.attribute) prevText.attribute[key] !== curText.attribute[key] && (diff[key] = curText.attribute[key]);
-        const rest = __rest$s(diff, ["text"]);
+        const rest = __rest$u(diff, ["text"]);
         animator.animate(prevText, {
           type: "to",
           to: rest,
@@ -45044,7 +45173,7 @@
       return result;
     }
 
-    var __rest$r = undefined && undefined.__rest || function (s, e) {
+    var __rest$t = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -45073,7 +45202,7 @@
         const {
             data: data
           } = attributes,
-          restAttributes = __rest$r(attributes, ["data"]);
+          restAttributes = __rest$t(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
         }, merge$1({}, LabelBase.defaultAttributes, restAttributes))), this.name = "label", this._onHover = e => {
@@ -45122,7 +45251,8 @@
               baseMark: baseMark
             }, attrs, new CustomPath2D());
           }
-          return baseMark && baseMark.getAttributes(!0).fill && lineGraphic.setAttribute("stroke", baseMark.getAttributes(!0).fill), this.attribute.line && !isEmpty(this.attribute.line.style) && lineGraphic.setAttributes(this.attribute.line.style), this._setStatesOfLabelLine(lineGraphic), lineGraphic;
+          const baseMarkAttrs = baseMark && this.getGraphicFinalLayoutAttributes(baseMark);
+          return (null == baseMarkAttrs ? void 0 : baseMarkAttrs.fill) && lineGraphic.setAttribute("stroke", baseMarkAttrs.fill), this.attribute.line && !isEmpty(this.attribute.line.style) && lineGraphic.setAttributes(this.attribute.line.style), this._setStatesOfLabelLine(lineGraphic), lineGraphic;
         }
       }
       _finalizeExitRelease() {
@@ -45174,7 +45304,7 @@
         if (this._prepare(), isNil$1(this._idToGraphic) || this._isCollectionBase && isNil$1(this._idToPoint)) return;
         const markAttributeList = [];
         !1 !== this._enableAnimation && this._baseMarks.forEach(mark => {
-          markAttributeList.push(cloneAttributeSnapshot(mark.attribute)), mark.initAttributes(mark.getAttributes(!0));
+          markAttributeList.push(cloneAttributeSnapshot(mark.attribute)), mark.initAttributes(this.getGraphicFinalLayoutAttributes(mark));
         });
         const {
           overlap: overlap,
@@ -45261,6 +45391,14 @@
       getRelatedGraphic(item) {
         return this._idToGraphic.get(item.id);
       }
+      getGraphicFinalLayoutAttributes(graphic) {
+        var _a, _b;
+        return null !== (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs) && void 0 !== _b ? _b : graphic.getAttributes(!0);
+      }
+      hasGraphicContextFinalLayoutAttributes(graphic) {
+        var _a;
+        return !!(null === (_a = null == graphic ? void 0 : graphic.context) || void 0 === _a ? void 0 : _a.finalAttrs);
+      }
       _initText(data = []) {
         const {
             textStyle = {}
@@ -45270,7 +45408,7 @@
           const textData = data[i],
             baseMark = this.getRelatedGraphic(textData);
           if (!baseMark) continue;
-          const graphicAttribute = baseMark.getAttributes(!0),
+          const graphicAttribute = this.getGraphicFinalLayoutAttributes(baseMark),
             labelAttribute = Object.assign(Object.assign({
               fill: this._isCollectionBase ? isArray$1(graphicAttribute.stroke) ? graphicAttribute.stroke.find(entry => !!entry && !0 !== entry) : graphicAttribute.stroke : graphicAttribute.fill
             }, textStyle), textData),
@@ -45493,9 +45631,9 @@
         var _a;
         if (graphic) {
           if (!1 !== graphic.attribute.visible) {
-            if (null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.animationState) {
+            if ((null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.animationState) || this.hasGraphicContextFinalLayoutAttributes(graphic)) {
               const clonedGraphic = graphic.clone();
-              return Object.assign(clonedGraphic.attribute, graphic.getAttributes(!0)), clonedGraphic.AABBBounds;
+              return Object.assign(clonedGraphic.attribute, this.getGraphicFinalLayoutAttributes(graphic)), clonedGraphic.AABBBounds;
             }
             return graphic.AABBBounds;
           }
@@ -45679,9 +45817,10 @@
         if ("null" !== fillStrategy || "null" !== strokeStrategy) for (let i = 0; i < labels.length; i++) {
           const label = labels[i];
           if (!label) continue;
-          const baseMark = this.getRelatedGraphic(label.attribute);
-          let backgroundColor = baseMark.getAttributes(!0).fill;
-          const backgroundOpacity = baseMark.getAttributes(!0).fillOpacity;
+          const baseMark = this.getRelatedGraphic(label.attribute),
+            baseMarkAttrs = this.getGraphicFinalLayoutAttributes(baseMark);
+          let backgroundColor = baseMarkAttrs.fill;
+          const backgroundOpacity = baseMarkAttrs.fillOpacity;
           let foregroundColor = label.attribute.fill;
           if (isObject$2(backgroundColor) && backgroundColor.gradient) {
             const firstStopColor = null === (_g = null === (_f = backgroundColor.stops) || void 0 === _f ? void 0 : _f[0]) || void 0 === _g ? void 0 : _g.color;
@@ -45771,7 +45910,7 @@
     };
     const getLabelComponent = type => labelComponentMap[type];
 
-    var __rest$q = undefined && undefined.__rest || function (s, e) {
+    var __rest$s = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -45785,7 +45924,7 @@
         const {
             data: data
           } = attributes,
-          restAttributes = __rest$q(attributes, ["data"]);
+          restAttributes = __rest$s(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
         }, merge$1({}, SymbolLabel.defaultAttributes, restAttributes))), this.name = "symbol-label";
@@ -45805,7 +45944,7 @@
       registerLabelComponent("symbol", SymbolLabel), registerLabelComponent("line-data", SymbolLabel);
     };
 
-    var __rest$p = undefined && undefined.__rest || function (s, e) {
+    var __rest$r = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -45819,7 +45958,7 @@
         const {
             data: data
           } = attributes,
-          restAttributes = __rest$p(attributes, ["data"]);
+          restAttributes = __rest$r(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
         }, merge$1({}, RectLabel.defaultAttributes, restAttributes)));
@@ -45867,7 +46006,7 @@
       registerLabelComponent("rect", RectLabel);
     };
 
-    var __rest$o = undefined && undefined.__rest || function (s, e) {
+    var __rest$q = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -45881,7 +46020,7 @@
         const {
             data: data
           } = attributes,
-          restAttributes = __rest$o(attributes, ["data"]);
+          restAttributes = __rest$q(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
         }, merge$1({}, LineLabel.defaultAttributes, restAttributes))), this.name = "line-label";
@@ -45917,7 +46056,7 @@
       registerLabelComponent("line", LineLabel$1), registerLabelComponent("area", LineLabel$1);
     };
 
-    var __rest$n = undefined && undefined.__rest || function (s, e) {
+    var __rest$p = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -45949,7 +46088,7 @@
         const {
             data: data
           } = attributes,
-          restAttributes = __rest$n(attributes, ["data"]);
+          restAttributes = __rest$p(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
         }, merge$1({}, ArcLabel.defaultAttributes, restAttributes))), this.name = "arc-label", this._ellipsisWidth = 0, this._arcLeft = new Map(), this._arcRight = new Map(), this._line2MinLength = 0, this._alignOffset = 0;
@@ -46004,12 +46143,13 @@
       layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
         this._arcLeft.clear(), this._arcRight.clear(), this._ellipsisWidth = ellipsisWidth;
         let maxRadius = 0;
-        currentMarks.forEach(currentMarks => {
-          currentMarks.attribute.outerRadius > maxRadius && (maxRadius = currentMarks.attribute.outerRadius);
+        currentMarks.forEach(currentMark => {
+          const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+          graphicAttribute.outerRadius > maxRadius && (maxRadius = graphicAttribute.outerRadius);
         }), data.forEach((d, index) => {
           var _a, _b;
           const currentMark = this._idToGraphic.get(d.id),
-            graphicAttribute = currentMark.getAttributes(!0),
+            graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark),
             center = {
               x: null !== (_a = null == graphicAttribute ? void 0 : graphicAttribute.x) && void 0 !== _a ? _a : 0,
               y: null !== (_b = null == graphicAttribute ? void 0 : graphicAttribute.y) && void 0 !== _b ? _b : 0
@@ -46145,7 +46285,8 @@
         this.attribute.height;
         let maxRadius = 0;
         currentMarks.forEach(currentMark => {
-          currentMark.getAttributes(!0).outerRadius > maxRadius && (maxRadius = currentMark.getAttributes(!0).outerRadius);
+          const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+          graphicAttribute.outerRadius > maxRadius && (maxRadius = graphicAttribute.outerRadius);
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height),
           line1MinLength = attribute.line.line1MinLength,
@@ -46303,7 +46444,8 @@
         const labelConfig = attribute;
         let maxRadius = 0;
         currentMarks.forEach(currentMark => {
-          currentMark.getAttributes(!0).outerRadius > maxRadius && (maxRadius = currentMark.getAttributes(!0).outerRadius);
+          const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+          graphicAttribute.outerRadius > maxRadius && (maxRadius = graphicAttribute.outerRadius);
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height),
           line1MinLength = labelConfig.line.line1MinLength;
@@ -46339,7 +46481,8 @@
           };
         let maxRadius = 0;
         currentMarks.forEach(currentMark => {
-          currentMark.getAttributes(!0).outerRadius > maxRadius && (maxRadius = currentMark.getAttributes(!0).outerRadius);
+          const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+          graphicAttribute.outerRadius > maxRadius && (maxRadius = graphicAttribute.outerRadius);
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height),
           line1MinLength = attribute.line.line1MinLength,
@@ -46367,7 +46510,8 @@
           line1MinLength = labelConfig.line.line1MinLength;
         let maxRadius = 0;
         currentMarks.forEach(currentMark => {
-          currentMark.getAttributes(!0).outerRadius > maxRadius && (maxRadius = currentMark.getAttributes(!0).outerRadius);
+          const graphicAttribute = this.getGraphicFinalLayoutAttributes(currentMark);
+          graphicAttribute.outerRadius > maxRadius && (maxRadius = graphicAttribute.outerRadius);
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height),
           outerR = this.computeRadius(radiusRatio, attribute.width, attribute.height) + line1MinLength,
@@ -46439,7 +46583,7 @@
             beta: beta,
             x: x,
             y: y
-          } = baseMark.getAttributes(!0);
+          } = this.getGraphicFinalLayoutAttributes(baseMark);
           lineGraphic.setAttributes({
             beta: beta,
             anchor3d: [x, y]
@@ -46492,7 +46636,7 @@
       registerLabelComponent("arc", ArcLabel);
     };
 
-    var __rest$m = undefined && undefined.__rest || function (s, e) {
+    var __rest$o = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -46506,7 +46650,7 @@
         const {
             dataLabels: dataLabels
           } = attributes,
-          restAttributes = __rest$m(attributes, ["dataLabels"]);
+          restAttributes = __rest$o(attributes, ["dataLabels"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           dataLabels: dataLabels
         }, merge$1({}, DataLabel.defaultAttributes, restAttributes))), this.name = "data-label";
@@ -46898,7 +47042,7 @@
     }
     mixin(LineAxisGrid, LineAxisMixin);
 
-    var __rest$l = undefined && undefined.__rest || function (s, e) {
+    var __rest$n = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -46932,7 +47076,7 @@
             center: center,
             subGrid: subGrid
           } = _a,
-          grid = __rest$l(_a, ["radius", "innerRadius", "startAngle", "endAngle", "center", "subGrid"]),
+          grid = __rest$n(_a, ["radius", "innerRadius", "startAngle", "endAngle", "center", "subGrid"]),
           {
             alignWithLabel = !0
           } = grid || {},
@@ -47151,7 +47295,7 @@
       return !1;
     };
 
-    var __rest$k = undefined && undefined.__rest || function (s, e) {
+    var __rest$m = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -47667,11 +47811,11 @@
           {
             formatMethod: startTextFormat
           } = startTextStyle,
-          restStartTextStyle = __rest$k(startTextStyle, ["formatMethod"]),
+          restStartTextStyle = __rest$m(startTextStyle, ["formatMethod"]),
           {
             formatMethod: endTextFormat
           } = endTextStyle,
-          restEndTextStyle = __rest$k(endTextStyle, ["formatMethod"]),
+          restEndTextStyle = __rest$m(endTextStyle, ["formatMethod"]),
           {
             start: start,
             end: end
@@ -50191,7 +50335,7 @@
       loadBaseLegend(), loadSliderComponent(), registerPath();
     }
 
-    var __rest$j = undefined && undefined.__rest || function (s, e) {
+    var __rest$l = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -50710,7 +50854,7 @@
             space: pagerSpace = DEFAULT_PAGER_SPACE,
             defaultCurrent = 1
           } = pager,
-          compStyle = __rest$j(pager, ["space", "defaultCurrent"]),
+          compStyle = __rest$l(pager, ["space", "defaultCurrent"]),
           {
             isHorizontal: isHorizontal
           } = this._itemContext,
@@ -50780,7 +50924,7 @@
             space: pagerSpace = DEFAULT_PAGER_SPACE,
             defaultCurrent = 1
           } = pager,
-          compStyle = __rest$j(pager, ["space", "defaultCurrent"]),
+          compStyle = __rest$l(pager, ["space", "defaultCurrent"]),
           {
             isHorizontal: isHorizontal
           } = this._itemContext,
@@ -55604,6 +55748,8 @@
     }(RenderStateEnum || (RenderStateEnum = {}));
 
     const BOOTSTRAP_STATE = Symbol.for("vrender.bootstrap.state"),
+      installBrowserEnvToAppWithParams = installBrowserEnvToApp,
+      installNodeEnvToAppWithParams = installNodeEnvToApp,
       pluginRegistrations = [registerFlexLayoutPlugin, registerViewTransform3dPlugin, registerHtmlAttributePlugin, registerReactAttributePlugin, registerDirectionalLight, registerOrthoCamera],
       animationRegistrations = [registerCustomAnimate, registerAnimate$1],
       legacyGraphicRegistrations = [registerArc, registerArc3d, registerArea, registerCircle, registerGlyph, registerGifImage, registerGroup, registerImage, registerLine, registerPath, registerPolygon, registerPyramid3d, registerRect, registerRect3d, registerRichtext, registerShadowRoot, registerSymbol, registerText, registerWrapText, registerStar];
@@ -55643,25 +55789,66 @@
         seen.has(key) || (seen.add(key), app.registry.picker.register(key, picker));
       });
     }
-    function bootstrapVRenderBrowserApp(app) {
-      return ensureBootstrap(app, "browser") ? (installBrowserEnvToApp(app), installDefaultGraphicsToApp(app), installBrowserPickersToApp(app), loadBrowserEnv(), legacyGraphicRegistrations.forEach(register => register()), syncLegacyRenderersToApp(app), syncLegacyPickersToApp(app, CanvasPickerContribution), registerDefaultPipeline(), app) : app;
+    function bootstrapVRenderBrowserApp(app, envParams) {
+      return ensureBootstrap(app, "browser") ? (void 0 === envParams ? installBrowserEnvToApp(app) : installBrowserEnvToAppWithParams(app, envParams), installDefaultGraphicsToApp(app), installBrowserPickersToApp(app), loadBrowserEnv(), legacyGraphicRegistrations.forEach(register => register()), syncLegacyRenderersToApp(app), syncLegacyPickersToApp(app, CanvasPickerContribution), registerDefaultPipeline(), app) : app;
     }
-    function bootstrapVRenderNodeApp(app) {
-      return ensureBootstrap(app, "node") ? (installNodeEnvToApp(app), installDefaultGraphicsToApp(app), installNodePickersToApp(app), loadNodeEnv(), legacyGraphicRegistrations.forEach(register => register()), syncLegacyRenderersToApp(app), syncLegacyPickersToApp(app, MathPickerContribution), registerDefaultPipeline(), app) : app;
+    function resolveNodeEnvParams(envParams) {
+      return null != envParams ? envParams : "node" === (null == vglobal ? void 0 : vglobal.env) ? vglobal.envParams : void 0;
+    }
+    function bootstrapVRenderNodeApp(app, envParams) {
+      if (!ensureBootstrap(app, "node")) return app;
+      const resolvedEnvParams = resolveNodeEnvParams(envParams);
+      return void 0 === resolvedEnvParams ? installNodeEnvToApp(app) : installNodeEnvToAppWithParams(app, resolvedEnvParams), installDefaultGraphicsToApp(app), installNodePickersToApp(app), loadNodeEnv(), legacyGraphicRegistrations.forEach(register => register()), syncLegacyRenderersToApp(app), syncLegacyPickersToApp(app, MathPickerContribution), registerDefaultPipeline(), app;
     }
 
+    var __rest$k = undefined && undefined.__rest || function (s, e) {
+      var t = {};
+      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+      if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+      }
+      return t;
+    };
     const {
       createBrowserApp: createBrowserApp
     } = VRenderCore;
     function createBrowserVRenderApp(options = {}) {
-      return bootstrapVRenderBrowserApp(createBrowserApp(options));
+      const {
+          envParams: envParams
+        } = options,
+        entryOptions = __rest$k(options, ["envParams"]);
+      return bootstrapVRenderBrowserApp(createBrowserApp(entryOptions), envParams);
     }
 
+    undefined && undefined.__rest || function (s, e) {
+      var t = {};
+      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+      if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+      }
+      return t;
+    };
+
+    var __rest$j = undefined && undefined.__rest || function (s, e) {
+      var t = {};
+      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+      if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+      }
+      return t;
+    };
     const {
       createNodeApp: createNodeApp
     } = VRenderCore;
     function createNodeVRenderApp(options = {}) {
-      return bootstrapVRenderNodeApp(createNodeApp(options));
+      const {
+          envParams: envParams
+        } = options,
+        entryOptions = __rest$j(options, ["envParams"]);
+      return bootstrapVRenderNodeApp(createNodeApp(entryOptions), envParams);
     }
 
     const defaultVRenderApps = new Map(),
@@ -58779,7 +58966,7 @@
             hasStateAnimation = this.hasAnimationByState(g.context.animationState);
           if (g.setAttributes) {
             const diffAttrs = this._excludeStateControlledDiffAttrs(g, getDiffAttributesOfGraphic(g, finalAttrs));
-            g.context.diffAttrs = diffAttrs, g.context.reusing ? (g.context.lastAttrs = g.attribute, g.initAttributes(finalAttrs), g.context.reusing = !1) : hasStateAnimation || (hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs)), !(null === (_c = this.renderContext) || void 0 === _c ? void 0 : _c.progressive) && this._product && g.parent !== this._product && this._product.appendChild(g), hasAnimation && g.setFinalAttributes(finalAttrs);
+            g.context.diffAttrs = diffAttrs, g.context.reusing ? (g.context.lastAttrs = g.attribute, g.initAttributes(finalAttrs), g.context.reusing = !1) : hasStateAnimation || (hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs)), !(null === (_c = this.renderContext) || void 0 === _c ? void 0 : _c.progressive) && this._product && g.parent !== this._product && this._product.appendChild(g);
           } else {
             const mockGraphic = g;
             g = this._createGraphic(finalAttrs), hasAnimation && (null === (_a = g.setFinalAttributes) || void 0 === _a || _a.call(g, finalAttrs)), g.context = mockGraphic.context, g.context.diffAttrs = finalAttrs, g.stateSort = this._stateSort;
@@ -61813,7 +62000,7 @@
         newMarks.length !== prevMarks.length || prevMarks.some((prev, index) => prev.type !== newMarks[index].type || prev.id !== newMarks[index].id || prev.name !== newMarks[index].name) ? compareResult.reMake = !0 : prevMarks.some((prev, index) => prev.visible !== newMarks[index].visible) && (compareResult.reCompile = !0);
       }
       _compareLabelSpec(newLabels, prevLabels, compareResult) {
-        newLabels.length !== prevLabels.length || prevLabels.some((prev, index) => prev.labelLayout !== newLabels[index].labelLayout || prev.visible !== newLabels[index].visible) ? compareResult.reMake = !0 : !compareResult.reCompile && prevLabels.some((prev, index) => !isEqual(prev, newLabels[index])) && (compareResult.reCompile = !0, markSeriesCompileEffect(compareResult));
+        newLabels.length !== prevLabels.length || prevLabels.some((prev, index) => prev.labelLayout !== newLabels[index].labelLayout || !1 === prev.visible && newLabels[index].visible) ? compareResult.reMake = !0 : (!compareResult.reCompile && prevLabels.some((prev, index) => prev.visible && !1 === newLabels[index].visible) || !compareResult.reCompile && prevLabels.some((prev, index) => !isEqual(prev, newLabels[index]))) && (compareResult.reCompile = !0, markSeriesCompileEffect(compareResult));
       }
       _getSpecUpdatePolicy() {
         return defaultSeriesSpecUpdatePolicy;
@@ -66814,9 +67001,10 @@
             [ComponentTypeEnum.indicator]: !0
           },
           removedComponents = [];
+        let hasNonLocalComponentRemoval = !1;
         this._components.forEach(c => {
           var _a, _b;
-          if (c.type === ComponentTypeEnum.label || c.type === ComponentTypeEnum.totalLabel) return;
+          if (c.type === ComponentTypeEnum.label || c.type === ComponentTypeEnum.totalLabel) return void (c.getSpecInfo() || (removedComponents.push(c), hasNonLocalComponentRemoval = !0, hasNonComponentOnlyUpdate = !0));
           checkVisibleComponents[c.type] && (checkVisibleComponents[c.type] = !1);
           const compSpecKey = c.specKey || c.type,
             cmpSpec = null !== (_a = this._spec[compSpecKey]) && void 0 !== _a ? _a : {};
@@ -66842,8 +67030,12 @@
         }
         removedComponents.length && (removedComponents.forEach(component => {
           this._removeComponent(component);
-        }), result.change = !0, result.effects = Object.assign(Object.assign({}, result.effects), {
-          component: !0,
+        }), result.change = !0, result.effects = Object.assign(Object.assign(Object.assign({}, result.effects), {
+          component: !0
+        }), hasNonLocalComponentRemoval ? {
+          layout: !0,
+          render: !0
+        } : {
           localOnly: !0
         }));
         const isVisible = compSpec => compSpec && !1 !== compSpec.visible;
@@ -66961,7 +67153,9 @@
         }));
       }
       _removeComponent(component) {
-        this._components = this._components.filter(c => c !== component), this._idMap.delete(component.id), component.release();
+        this._components = this._components.filter(c => c !== component), this._idMap.delete(component.id), component.getMarks().forEach(mark => {
+          this.getCompiler().removeRootMark(mark);
+        }), component.release();
       }
       updateSeriesSpec(result) {
         this._spec.series.length === this._series.length ? this._series.forEach(s => {