@visactor/vtable 1.27.0-alpha.1 → 1.27.0-alpha.3

package/dist/vtable.js

@@ -9401,10 +9401,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,
@@ -21158,7 +21166,7 @@
       };
     }
 
-    var __rest$5 = undefined && undefined.__rest || function (s, e) {
+    var __rest$7 = 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) {
@@ -21256,7 +21264,7 @@
             {
               textConfig = []
             } = _a,
-            rest = __rest$5(_a, ["textConfig"]);
+            rest = __rest$7(_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]);
@@ -25652,188 +25660,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) => {
@@ -26017,6 +25843,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 = {};
@@ -26808,17 +26823,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);
@@ -26918,7 +26962,7 @@
       return graphicCreator$1.text(params ? params.attribute : {});
     }
 
-    var __rest$4 = undefined && undefined.__rest || function (s, e) {
+    var __rest$6 = 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) {
@@ -26942,7 +26986,7 @@
           animation: animation,
           timeline: timeline
         } = _a,
-        props = __rest$4(_a, ["key", "name", "id", "attribute", "stateProxy", "animation", "timeline"]);
+        props = __rest$6(_a, ["key", "name", "id", "attribute", "stateProxy", "animation", "timeline"]);
       let c = type;
       isString$2(type) && (c = graphicCreator$1[type]);
       const childrenList = [];
@@ -27832,7 +27876,7 @@
       registerGroup(), registerRect(), registerSymbol(), registerRichtext(), registerText();
     }
 
-    var __rest$3 = undefined && undefined.__rest || function (s, e) {
+    var __rest$5 = 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) {
@@ -27886,7 +27930,7 @@
         const {
             visible: shapeVisible
           } = shape,
-          shapeStyle = __rest$3(shape, ["visible"]);
+          shapeStyle = __rest$5(shape, ["visible"]);
         if (isBoolean$2(shapeVisible)) {
           const size = (null == shapeStyle ? void 0 : shapeStyle.size) || 10,
             maxSize = isNumber$3(size) ? size : Math.max(size[0], size[1]);
@@ -27987,7 +28031,7 @@
         const {
             visible: bgVisible
           } = panel,
-          backgroundStyle = __rest$3(panel, ["visible"]);
+          backgroundStyle = __rest$5(panel, ["visible"]);
         if (visible && isBoolean$2(bgVisible)) {
           const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
             visible: bgVisible && !!text,
@@ -28069,7 +28113,7 @@
       merge(theme$2.poptip, DEFAULT_THEME, defaultPoptipTheme);
     }
 
-    var __rest$2 = undefined && undefined.__rest || function (s, e) {
+    var __rest$4 = 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) {
@@ -28178,7 +28222,7 @@
             visible: bgVisible,
             square: square
           } = panel,
-          backgroundStyle = __rest$2(panel, ["visible", "square"]);
+          backgroundStyle = __rest$4(panel, ["visible", "square"]);
         if (square) {
           const maxWH = max(popTipWidth, poptipHeight);
           popTipWidth = maxWH;
@@ -30841,7 +30885,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;
@@ -30950,7 +30994,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);
@@ -30976,6 +31028,7 @@
       }
       executeTypeConfigItem(params, graphic, index, count) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
+        this.syncFinalAttrsFromContext(graphic);
         const {
             type = "fromTo",
             channel: channel,
@@ -31006,7 +31059,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$3(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
@@ -31028,6 +31081,7 @@
       }
       executeTimelineItem(params, graphic, index, count) {
         var _a, _b, _c, _d;
+        this.syncFinalAttrsFromContext(graphic);
         const {
             timeSlices: timeSlices,
             startTime = 0,
@@ -31070,7 +31124,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);
@@ -31091,7 +31145,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;
@@ -31112,7 +31166,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,
@@ -31124,8 +31178,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;
@@ -31419,9 +31543,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;
@@ -31644,8 +31766,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);
     }
@@ -35764,7 +35887,7 @@
       loadBasicAxis(), registerRect();
     }
 
-    var __rest$1 = undefined && undefined.__rest || function (s, e) {
+    var __rest$3 = 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) {
@@ -35871,7 +35994,7 @@
             style: style,
             state: state
           } = _a,
-          restLineAttrs = __rest$1(_a, ["startSymbol", "endSymbol", "style", "state"]),
+          restLineAttrs = __rest$3(_a, ["startSymbol", "endSymbol", "style", "state"]),
           lineAttrs = Object.assign({
             startSymbol: startSymbol,
             endSymbol: endSymbol,
@@ -35912,7 +36035,7 @@
             state = {},
             maxWidth: maxWidth
           } = _d,
-          restAttrs = __rest$1(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
+          restAttrs = __rest$3(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
         let percent = .5;
         "start" === position ? percent = 0 : "end" === position && (percent = 1);
         const {
@@ -36014,7 +36137,7 @@
             text: textContent = "",
             maxWidth: maxWidth
           } = _c,
-          restAttrs = __rest$1(_c, ["position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text", "maxWidth"]),
+          restAttrs = __rest$3(_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;
@@ -37877,7 +38000,7 @@
       loadBaseLegend(), loadSliderComponent(), registerPath();
     }
 
-    var __rest = undefined && undefined.__rest || function (s, e) {
+    var __rest$2 = 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) {
@@ -38396,7 +38519,7 @@
             space: pagerSpace = DEFAULT_PAGER_SPACE,
             defaultCurrent = 1
           } = pager,
-          compStyle = __rest(pager, ["space", "defaultCurrent"]),
+          compStyle = __rest$2(pager, ["space", "defaultCurrent"]),
           {
             isHorizontal: isHorizontal
           } = this._itemContext,
@@ -38466,7 +38589,7 @@
             space: pagerSpace = DEFAULT_PAGER_SPACE,
             defaultCurrent = 1
           } = pager,
-          compStyle = __rest(pager, ["space", "defaultCurrent"]),
+          compStyle = __rest$2(pager, ["space", "defaultCurrent"]),
           {
             isHorizontal: isHorizontal
           } = this._itemContext,
@@ -40268,6 +40391,8 @@
     };
 
     const BOOTSTRAP_STATE = Symbol.for("vrender.bootstrap.state"),
+      installBrowserEnvToAppWithParams = installBrowserEnvToApp,
+      installNodeEnvToAppWithParams = installNodeEnvToApp,
       pluginRegistrations = [registerFlexLayoutPlugin, registerViewTransform3dPlugin, registerHtmlAttributePlugin, registerReactAttributePlugin, registerDirectionalLight, registerOrthoCamera],
       animationRegistrations = [registerCustomAnimate, registerAnimate],
       legacyGraphicRegistrations = [registerArc, registerArc3d, registerArea, registerCircle, registerGlyph, registerGifImage, registerGroup, registerImage, registerLine, registerPath, registerPolygon, registerPyramid3d, registerRect, registerRect3d, registerRichtext, registerShadowRoot, registerSymbol, registerText, registerWrapText, registerStar];
@@ -40307,25 +40432,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$1(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$1(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$1(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$1(app), syncLegacyPickersToApp(app, MathPickerContribution), registerDefaultPipeline(), app;
     }
 
+    var __rest$1 = 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$1(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 = 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(options, ["envParams"]);
+      return bootstrapVRenderNodeApp(createNodeApp(entryOptions), envParams);
     }
 
     class Env {