@visactor/vchart 1.8.0-alpha.0 → 1.8.0

package/cjs/core/vchart.js

@@ -38,7 +38,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.registerVChartCore = exports.VChart = void 0;
 
-const array_1 = require("../data/parser/array"), common_1 = require("../typings/spec/common"), type_1 = require("../component/interface/type"), vdataset_1 = require("@visactor/vdataset"), util_1 = require("../util"), id_1 = require("../util/id"), space_1 = require("../util/space"), env_1 = require("../util/env"), debug_1 = require("../util/debug"), merge_spec_1 = require("../util/spec/merge-spec"), transform_1 = require("../util/spec/transform"), common_2 = require("../util/spec/common"), factory_1 = require("./factory"), event_1 = require("../event/event"), event_dispatcher_1 = require("../event/event-dispatcher"), geo_source_1 = require("../series/map/geo-source"), register_1 = require("../data/register"), initialize_1 = require("../data/initialize"), stack_split_1 = require("../data/transforms/stack-split"), copy_data_view_1 = require("../data/transforms/copy-data-view"), interface_1 = require("../animation/interface"), theme_manager_1 = require("../theme/theme-manager"), compiler_1 = require("../compile/compiler"), image_1 = require("../util/image"), constant_1 = require("../constant"), vutils_1 = require("@visactor/vutils"), instance_manager_1 = require("./instance-manager"), vrender_components_1 = require("@visactor/vrender-components"), util_2 = require("../chart/util"), region_1 = require("../region/region"), base_layout_1 = require("../layout/base-layout"), group_1 = require("../mark/group"), config_1 = require("../animation/config"), vgrammar_core_1 = require("@visactor/vgrammar-core"), util_3 = require("./util"), expression_function_1 = require("./expression-function"), env_2 = require("../env"), spec_1 = require("../util/spec"), builtin_1 = require("../theme/builtin");
+const array_1 = require("../data/parser/array"), common_1 = require("../typings/spec/common"), type_1 = require("../component/interface/type"), vdataset_1 = require("@visactor/vdataset"), util_1 = require("../util"), id_1 = require("../util/id"), space_1 = require("../util/space"), env_1 = require("../util/env"), debug_1 = require("../util/debug"), merge_spec_1 = require("../util/spec/merge-spec"), transform_1 = require("../util/spec/transform"), common_2 = require("../util/spec/common"), factory_1 = require("./factory"), event_1 = require("../event/event"), event_dispatcher_1 = require("../event/event-dispatcher"), geo_source_1 = require("../series/map/geo-source"), register_1 = require("../data/register"), initialize_1 = require("../data/initialize"), stack_split_1 = require("../data/transforms/stack-split"), copy_data_view_1 = require("../data/transforms/copy-data-view"), interface_1 = require("../animation/interface"), theme_manager_1 = require("../theme/theme-manager"), compiler_1 = require("../compile/compiler"), image_1 = require("../util/image"), constant_1 = require("../constant"), vutils_1 = require("@visactor/vutils"), instance_manager_1 = require("./instance-manager"), vrender_components_1 = require("@visactor/vrender-components"), util_2 = require("../chart/util"), region_1 = require("../region/region"), base_layout_1 = require("../layout/base-layout"), group_1 = require("../mark/group"), config_1 = require("../animation/config"), vgrammar_core_1 = require("@visactor/vgrammar-core"), util_3 = require("./util"), expression_function_1 = require("./expression-function"), env_2 = require("../env"), spec_1 = require("../util/spec"), builtin_1 = require("../theme/builtin"), plugin_service_1 = require("../plugin/chart/plugin-service");
 
 class VChart {
     static useRegisters(comps) {
@@ -99,6 +99,12 @@ class VChart {
     static getLogger() {
         return vutils_1.Logger.getInstance();
     }
+    getSpec() {
+        return this._spec;
+    }
+    getSpecInfo() {
+        return this._specInfo;
+    }
     getDataSet() {
         return this._dataSet;
     }
@@ -122,8 +128,8 @@ class VChart {
         isTrueBrowseEnv && dom && (this._container = (0, util_1.isString)(dom) ? null === document || void 0 === document ? void 0 : document.getElementById(dom) : dom), 
         renderCanvas && (this._canvas = renderCanvas), stage && (this._stage = stage), "node" === mode || this._container || this._canvas || this._stage ? (isTrueBrowseEnv ? (0, 
         env_2.registerBrowserEnv)() : "node" === mode && (0, env_2.registerNodeEnv)(), this._viewBox = this._option.viewBox, 
-        this._currentThemeName = theme_manager_1.ThemeManager.getCurrentThemeName(), this._setSpec(spec), 
-        this._updateCurrentTheme(), this._curSize = (0, util_2.calculateChartSize)(this._spec, {
+        this._currentThemeName = theme_manager_1.ThemeManager.getCurrentThemeName(), this._setNewSpec(spec), 
+        this._updateCurrentTheme(), this._currentSize = (0, util_2.calculateChartSize)(this._spec, {
             container: this._container,
             canvas: this._canvas,
             mode: this._option.mode || common_1.RenderModeEnum["desktop-browser"],
@@ -138,22 +144,53 @@ class VChart {
         }, restOptions), {
             background: this._getBackground(),
             onError: this._onError
-        })), this._compiler.setSize(this._curSize.width, this._curSize.height), this._eventDispatcher = new event_dispatcher_1.EventDispatcher(this, this._compiler), 
+        })), this._compiler.setSize(this._currentSize.width, this._currentSize.height), 
+        this._eventDispatcher = new event_dispatcher_1.EventDispatcher(this, this._compiler), 
         this._event = new event_1.Event(this._eventDispatcher, mode), this._compiler.initView(), 
         null === (_d = this.getStage()) || void 0 === _d || _d.setTheme({
             text: {
                 fontFamily: null === (_e = this._currentTheme) || void 0 === _e ? void 0 : _e.fontFamily
             }
         }), this._initDataSet(this._option.dataSet), this._autoSize = !!isTrueBrowseEnv && (null === (_g = null !== (_f = spec.autoFit) && void 0 !== _f ? _f : this._option.autoFit) || void 0 === _g || _g), 
-        this._bindResizeEvent(), this._bindVGrammarViewEvent(), instance_manager_1.InstanceManager.registerInstance(this)) : null === (_b = this._option) || void 0 === _b || _b.onError("please specify container or renderCanvas!");
+        this._bindResizeEvent(), this._bindVGrammarViewEvent(), this._initChartPlugin(), 
+        instance_manager_1.InstanceManager.registerInstance(this)) : null === (_b = this._option) || void 0 === _b || _b.onError("please specify container or renderCanvas!");
+    }
+    _setNewSpec(spec, forceMerge) {
+        return !!spec && ((0, util_1.isString)(spec) && (spec = JSON.parse(spec)), forceMerge && this._originalSpec && (spec = (0, 
+        merge_spec_1.mergeSpec)({}, this._originalSpec, spec)), this._originalSpec = spec, 
+        this._spec = this._getSpecFromOriginalSpec(), !0);
+    }
+    _getSpecFromOriginalSpec() {
+        var _a;
+        const spec = (0, transform_1.specTransform)(this._originalSpec);
+        return spec.data = null !== (_a = spec.data) && void 0 !== _a ? _a : [], spec;
+    }
+    _initChartSpec(spec, actionSource) {
+        var _a;
+        VChart.getFunctionList() && VChart.getFunctionList().length && (spec = (0, util_1.functionTransform)(spec, VChart)), 
+        this._spec = spec, this._chartSpecTransformer || (this._chartSpecTransformer = factory_1.Factory.createChartSpecTransformer(this._spec.type, {
+            type: this._spec.type,
+            getTheme: () => {
+                var _a;
+                return null !== (_a = this._currentTheme) && void 0 !== _a ? _a : {};
+            }
+        })), this._chartSpecTransformer.transformSpec(this._spec), this._chartPluginApply("onAfterChartSpecTransform", this._spec, actionSource), 
+        this._specInfo = null === (_a = this._chartSpecTransformer) || void 0 === _a ? void 0 : _a.transformModelSpec(this._spec), 
+        this._chartPluginApply("onAfterModelSpecTransform", this._spec, this._specInfo, actionSource);
     }
-    _setSpec(spec) {
-        spec && (this._spec = (0, transform_1.specTransform)((0, util_1.isString)(spec) ? JSON.parse(spec) : spec));
+    _updateSpecInfo() {
+        var _a;
+        this._chartSpecTransformer || (this._chartSpecTransformer = factory_1.Factory.createChartSpecTransformer(this._spec.type, {
+            type: this._spec.type,
+            getTheme: () => {
+                var _a;
+                return null !== (_a = this._currentTheme) && void 0 !== _a ? _a : {};
+            }
+        })), this._specInfo = null === (_a = this._chartSpecTransformer) || void 0 === _a ? void 0 : _a.createSpecInfo(this._spec);
     }
     _initChart(spec) {
         var _a, _b;
         if (!this._compiler) return void (null === (_a = this._option) || void 0 === _a || _a.onError("compiler is not initialized"));
-        VChart.getFunctionList() && VChart.getFunctionList().length && (spec = (0, util_1.functionTransform)(spec, VChart));
         const chart = factory_1.Factory.createChart(spec.type, spec, {
             type: spec.type,
             globalInstance: this,
@@ -172,10 +209,14 @@ class VChart {
                 var _a;
                 return null !== (_a = this._currentTheme) && void 0 !== _a ? _a : {};
             },
+            getSpecInfo: () => {
+                var _a;
+                return null !== (_a = this._specInfo) && void 0 !== _a ? _a : {};
+            },
             layout: this._option.layout,
             onError: this._onError
         });
-        chart ? (this._chart = chart, this._chart.setCanvasRect(this._curSize.width, this._curSize.height), 
+        chart ? (this._chart = chart, this._chart.setCanvasRect(this._currentSize.width, this._currentSize.height), 
         this._chart.created(), this._chart.init(), this._event.emit(constant_1.ChartEvent.initialized, {})) : null === (_b = this._option) || void 0 === _b || _b.onError("init chart fail");
     }
     _releaseData() {
@@ -202,7 +243,7 @@ class VChart {
         this._autoSize && (window.removeEventListener("resize", this._onResize), this._observer && (this._observer.disconnect(), 
         this._observer = null));
     }
-    _getCurSize() {
+    getCurrentSize() {
         var _a, _b;
         const {width: containerWidth, height: containerHeight} = (0, vutils_1.getContainerSize)(this._container, constant_1.DEFAULT_CHART_WIDTH, constant_1.DEFAULT_CHART_HEIGHT);
         return {
@@ -211,8 +252,8 @@ class VChart {
         };
     }
     _doResize() {
-        const {width: width, height: height} = this._getCurSize();
-        this._curSize.width === width && this._curSize.height === height || (this._curSize = {
+        const {width: width, height: height} = this.getCurrentSize();
+        this._currentSize.width === width && this._currentSize.height === height || (this._currentSize = {
             width: width,
             height: height
         }, this.resize(width, height));
@@ -226,23 +267,17 @@ class VChart {
         for (const key in factory_1.Factory.transforms) (0, register_1.registerDataSetInstanceTransform)(this._dataSet, key, factory_1.Factory.transforms[key]);
         for (const key in factory_1.Factory.dataParser) (0, register_1.registerDataSetInstanceParser)(this._dataSet, key, factory_1.Factory.dataParser[key]);
     }
-    updateCustomConfigAndRerender(modifyConfig, morphConfig) {
-        return __awaiter(this, void 0, void 0, (function*() {
-            if (this._isReleased) return this;
-            const result = modifyConfig();
-            return (0, util_1.isValid)(result) ? (this._reCompile(result), yield this.renderAsync(morphConfig), 
-            this) : this;
-        }));
+    updateCustomConfigAndRerender(updateSpecResult, sync, option = {}) {
+        if (!this._isReleased && updateSpecResult) return (0, vutils_1.isFunction)(updateSpecResult) && (updateSpecResult = updateSpecResult()), 
+        this._reCompile(updateSpecResult), sync ? this._renderSync(option) : this._renderAsync(option);
     }
-    updateCustomConfigAndRerenderSync(modifyConfig, morphConfig) {
-        const result = modifyConfig();
-        return (0, util_1.isValid)(result) ? (this._reCompile(result), this.renderSync(morphConfig), 
-        this) : this;
+    _updateCustomConfigAndRecompile(updateSpecResult, option = {}) {
+        return !!updateSpecResult && (this._reCompile(updateSpecResult), this._beforeRender(option));
     }
     _reCompile(updateResult) {
         var _a, _b, _c, _d, _e, _f, _g;
-        if (updateResult.reMake) this._releaseData(), this._initDataSet(), this._chart.release(), 
-        this._chart = null, null === (_a = this._compiler) || void 0 === _a || _a.releaseGrammar(!1 === (null === (_b = this._option) || void 0 === _b ? void 0 : _b.animation) || !1 === (null === (_c = this._spec) || void 0 === _c ? void 0 : _c.animation)), 
+        if (updateResult.reMake) this._releaseData(), this._initDataSet(), this._chartSpecTransformer = null, 
+        this._chart.release(), this._chart = null, null === (_a = this._compiler) || void 0 === _a || _a.releaseGrammar(!1 === (null === (_b = this._option) || void 0 === _b ? void 0 : _b.animation) || !1 === (null === (_c = this._spec) || void 0 === _c ? void 0 : _c.animation)), 
         this._userEvents.forEach((e => {
             var _a;
             return null === (_a = this._event) || void 0 === _a ? void 0 : _a.on(e.eType, e.query, e.handler);
@@ -253,67 +288,79 @@ class VChart {
             chart: this._chart,
             vChart: this
         }, {})), updateResult.reSize) {
-            const {width: width, height: height} = this._getCurSize();
-            this._chart.onResize(width, height), null === (_g = (_f = this._compiler).resize) || void 0 === _g || _g.call(_f, width, height, !1);
+            const {width: width, height: height} = this.getCurrentSize();
+            this._chart.onResize(width, height, !1), null === (_g = (_f = this._compiler).resize) || void 0 === _g || _g.call(_f, width, height, !1);
         }
     }
+    _beforeRender(option = {}) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (this._isReleased) return !1;
+        if (this._chart) return !0;
+        const {transformSpec: transformSpec, actionSource: actionSource} = option;
+        return transformSpec && this._initChartSpec(this._spec, "render"), this._chartPluginApply("onBeforeInitChart", this._spec, actionSource), 
+        null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeInitializeChart) || void 0 === _b || _b.call(_a), 
+        this._initChart(this._spec), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterInitializeChart) || void 0 === _d || _d.call(_c), 
+        !(!this._chart || !this._compiler) && (null === (_f = null === (_e = this._option.performanceHook) || void 0 === _e ? void 0 : _e.beforeCompileToVGrammar) || void 0 === _f || _f.call(_e), 
+        this._compiler.compile({
+            chart: this._chart,
+            vChart: this
+        }, {
+            performanceHook: this._option.performanceHook
+        }), null === (_h = null === (_g = this._option.performanceHook) || void 0 === _g ? void 0 : _g.afterCompileToVGrammar) || void 0 === _h || _h.call(_g), 
+        !0);
+    }
+    _afterRender() {
+        return !this._isReleased && (this._updateAnimateState(), this._event.emit(constant_1.ChartEvent.rendered, {}), 
+        !0);
+    }
     renderSync(morphConfig) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (!this._chart) {
-            if (null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeInitializeChart) || void 0 === _b || _b.call(_a), 
-            this._initChart(this._spec), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterInitializeChart) || void 0 === _d || _d.call(_c), 
-            !this._chart || !this._compiler) return this;
-            null === (_f = null === (_e = this._option.performanceHook) || void 0 === _e ? void 0 : _e.beforeCompileToVGrammar) || void 0 === _f || _f.call(_e), 
-            this._compiler.compile({
-                chart: this._chart,
-                vChart: this
-            }, {
-                performanceHook: this._option.performanceHook
-            }), null === (_h = null === (_g = this._option.performanceHook) || void 0 === _g ? void 0 : _g.afterCompileToVGrammar) || void 0 === _h || _h.call(_g);
-        }
-        return null === (_j = this._compiler) || void 0 === _j || _j.renderSync(morphConfig), 
-        this._option.animation && (null === (_k = this._chart) || void 0 === _k || _k.getAllRegions().forEach((region => {
-            var _a;
-            null === (_a = region.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
-        })), null === (_l = this._chart) || void 0 === _l || _l.getAllComponents().forEach((component => {
-            var _a;
-            null === (_a = component.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
-        }))), this._event.emit(constant_1.ChartEvent.rendered, {}), this;
+        return this._renderSync({
+            morphConfig: morphConfig,
+            transformSpec: !0,
+            actionSource: "render"
+        });
     }
     renderAsync(morphConfig) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         return __awaiter(this, void 0, void 0, (function*() {
-            if (this._isReleased) return this;
-            if (!this._chart) {
-                if (null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeInitializeChart) || void 0 === _b || _b.call(_a), 
-                this._initChart(this._spec), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterInitializeChart) || void 0 === _d || _d.call(_c), 
-                !this._chart || !this._compiler) return this;
-                null === (_f = null === (_e = this._option.performanceHook) || void 0 === _e ? void 0 : _e.beforeCompileToVGrammar) || void 0 === _f || _f.call(_e), 
-                this._compiler.compile({
-                    chart: this._chart,
-                    vChart: this
-                }, {
-                    performanceHook: this._option.performanceHook
-                }), null === (_h = null === (_g = this._option.performanceHook) || void 0 === _g ? void 0 : _g.afterCompileToVGrammar) || void 0 === _h || _h.call(_g);
-            }
-            return yield null === (_j = this._compiler) || void 0 === _j ? void 0 : _j.renderAsync(morphConfig), 
-            this._isReleased || (this._option.animation && (null === (_k = this._chart) || void 0 === _k || _k.getAllRegions().forEach((region => {
-                var _a;
-                null === (_a = region.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
-            })), null === (_l = this._chart) || void 0 === _l || _l.getAllComponents().forEach((component => {
-                var _a;
-                null === (_a = component.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
-            }))), this._event.emit(constant_1.ChartEvent.rendered, {})), this;
+            return this._renderAsync({
+                morphConfig: morphConfig,
+                transformSpec: !0,
+                actionSource: "render"
+            });
         }));
     }
+    _renderSync(option = {}) {
+        var _a;
+        const self = this;
+        return this._beforeRender(option) ? (null === (_a = this._compiler) || void 0 === _a || _a.renderSync(option.morphConfig), 
+        this._afterRender(), self) : self;
+    }
+    _renderAsync(option = {}) {
+        var _a;
+        return __awaiter(this, void 0, void 0, (function*() {
+            const self = this;
+            return this._beforeRender(option) ? (yield null === (_a = this._compiler) || void 0 === _a ? void 0 : _a.renderAsync(option.morphConfig), 
+            this._afterRender(), self) : self;
+        }));
+    }
+    _updateAnimateState() {
+        var _a, _b;
+        this._option.animation && (null === (_a = this._chart) || void 0 === _a || _a.getAllRegions().forEach((region => {
+            var _a;
+            null === (_a = region.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
+        })), null === (_b = this._chart) || void 0 === _b || _b.getAllComponents().forEach((component => {
+            var _a;
+            null === (_a = component.animate) || void 0 === _a || _a.updateAnimateState(interface_1.AnimationStateEnum.update, !0);
+        })));
+    }
     release() {
         var _a, _b, _c, _d;
         (null === (_a = this._onResize) || void 0 === _a ? void 0 : _a.cancel) && this._onResize.cancel(), 
-        null === (_b = this._chart) || void 0 === _b || _b.release(), null === (_c = this._compiler) || void 0 === _c || _c.release(), 
-        null === (_d = this._eventDispatcher) || void 0 === _d || _d.release(), this._unBindResizeEvent(), 
-        this._releaseData(), this._chart = null, this._compiler = null, this._spec = null, 
-        this._userEvents = null, this._event = null, this._eventDispatcher = null, this._isReleased = !0, 
-        instance_manager_1.InstanceManager.unregisterInstance(this);
+        this._chartPluginApply("disposeAll"), this._chartSpecTransformer = null, null === (_b = this._chart) || void 0 === _b || _b.release(), 
+        null === (_c = this._compiler) || void 0 === _c || _c.release(), null === (_d = this._eventDispatcher) || void 0 === _d || _d.release(), 
+        this._unBindResizeEvent(), this._releaseData(), this._chart = null, this._compiler = null, 
+        this._spec = null, this._originalSpec = null, this._userEvents = null, this._event = null, 
+        this._eventDispatcher = null, this._isReleased = !0, instance_manager_1.InstanceManager.unregisterInstance(this);
     }
     updateData(id, data, options) {
         return __awaiter(this, void 0, void 0, (function*() {
@@ -394,41 +441,41 @@ class VChart {
     }
     updateSpec(spec, forceMerge = !1, morphConfig) {
         return __awaiter(this, void 0, void 0, (function*() {
-            return spec ? ((0, util_1.isString)(spec) && (spec = JSON.parse(spec)), forceMerge && (spec = (0, 
-            merge_spec_1.mergeSpec)({}, this._spec, spec)), yield this.updateCustomConfigAndRerender((() => {
-                var _a, _b, _c;
-                spec = (0, transform_1.specTransform)(spec);
-                const lastSpec = this._spec;
-                this._spec = spec, (0, vutils_1.isEqual)(lastSpec.theme, spec.theme) || (this._updateCurrentTheme(), 
-                null === (_a = this._chart) || void 0 === _a || _a.setCurrentTheme());
-                const reSize = this._shouldChartResize(lastSpec);
-                return null === (_c = null === (_b = this._compiler) || void 0 === _b ? void 0 : _b.getVGrammarView()) || void 0 === _c || _c.updateLayoutTag(), 
-                (0, util_2.mergeUpdateResult)(this._chart.updateSpec(spec), {
-                    change: reSize,
-                    reMake: !1,
-                    reCompile: !1,
-                    reSize: reSize
-                });
-            }), morphConfig), this) : this;
+            const result = this._updateSpec(spec, forceMerge);
+            return yield this.updateCustomConfigAndRerender(result, !1, {
+                morphConfig: morphConfig,
+                transformSpec: !0,
+                actionSource: "updateSpec"
+            }), this;
         }));
     }
     updateSpecSync(spec, forceMerge = !1, morphConfig) {
-        return spec ? ((0, util_1.isString)(spec) && (spec = JSON.parse(spec)), forceMerge && (spec = (0, 
-        merge_spec_1.mergeSpec)({}, this._spec, spec)), this.updateCustomConfigAndRerenderSync((() => {
-            var _a, _b, _c, _d;
-            (spec = (0, transform_1.specTransform)(spec)).data = null !== (_a = spec.data) && void 0 !== _a ? _a : [];
-            const lastSpec = this._spec;
-            this._spec = spec, (0, vutils_1.isEqual)(lastSpec.theme, spec.theme) || (this._updateCurrentTheme(), 
-            null === (_b = this._chart) || void 0 === _b || _b.setCurrentTheme());
-            const reSize = this._shouldChartResize(lastSpec);
-            return null === (_d = null === (_c = this._compiler) || void 0 === _c ? void 0 : _c.getVGrammarView()) || void 0 === _d || _d.updateLayoutTag(), 
-            (0, util_2.mergeUpdateResult)(this._chart.updateSpec(spec), {
-                change: reSize,
-                reMake: !1,
-                reCompile: !1,
-                reSize: reSize
-            });
-        }), morphConfig), this) : this;
+        const result = this._updateSpec(spec, forceMerge);
+        return this.updateCustomConfigAndRerender(result, !0, {
+            morphConfig: morphConfig,
+            transformSpec: !0,
+            actionSource: "updateSpec"
+        }), this;
+    }
+    updateSpecAndRecompile(spec, forceMerge = !1, option = {}) {
+        const result = this._updateSpec(spec, forceMerge);
+        return this._updateCustomConfigAndRecompile(result, Object.assign({
+            actionSource: "updateSpecAndRecompile"
+        }, option));
+    }
+    _updateSpec(spec, forceMerge = !1) {
+        var _a, _b;
+        const lastSpec = this._spec;
+        if (!this._setNewSpec(spec, forceMerge)) return;
+        (0, vutils_1.isEqual)(lastSpec.theme, this._spec.theme) || this._setCurrentTheme();
+        const reSize = this._shouldChartResize(lastSpec);
+        return null === (_b = null === (_a = this._compiler) || void 0 === _a ? void 0 : _a.getVGrammarView()) || void 0 === _b || _b.updateLayoutTag(), 
+        (0, util_2.mergeUpdateResult)(this._chart.updateSpec(this._spec), {
+            change: reSize,
+            reMake: !1,
+            reCompile: !1,
+            reSize: reSize
+        });
     }
     updateModelSpec(filter, spec, forceMerge = !1, morphConfig) {
         return __awaiter(this, void 0, void 0, (function*() {
@@ -452,20 +499,22 @@ class VChart {
     }
     _updateModelSpec(model, spec, sync = !1, forceMerge = !1, morphConfig) {
         forceMerge && (spec = (0, merge_spec_1.mergeSpec)({}, model.getSpec(), spec));
-        const modifyConfig = () => {
-            const result = model.updateSpec(spec);
-            return model.reInit(), (result.change || result.reCompile || result.reMake || result.reSize || result.reRender) && this._chart.reDataFlow(), 
-            result;
-        };
-        return sync ? this.updateCustomConfigAndRerenderSync(modifyConfig, morphConfig) : this.updateCustomConfigAndRerender(modifyConfig, morphConfig);
+        const result = model.updateSpec(spec);
+        return model.reInit(spec), (result.change || result.reCompile || result.reMake || result.reSize || result.reRender) && this._chart.reDataFlow(), 
+        this.updateCustomConfigAndRerender(result, sync, {
+            morphConfig: morphConfig,
+            transformSpec: !1,
+            actionSource: "updateModelSpec"
+        });
     }
     resize(width, height) {
         var _a, _b, _c, _d, _e, _f;
         return __awaiter(this, void 0, void 0, (function*() {
             if (!this._chart || !this._compiler) return this;
             const chartCanvasRect = this._chart.getCanvasRect();
-            return chartCanvasRect && chartCanvasRect.width === width && chartCanvasRect.height === height ? this : (null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeResizeWithUpdate) || void 0 === _b || _b.call(_a), 
-            this._chart.onResize(width, height), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterResizeWithUpdate) || void 0 === _d || _d.call(_c), 
+            return chartCanvasRect && chartCanvasRect.width === width && chartCanvasRect.height === height ? this : (this._chartPluginApply("onBeforeResize", width, height), 
+            null === (_b = null === (_a = this._option.performanceHook) || void 0 === _a ? void 0 : _a.beforeResizeWithUpdate) || void 0 === _b || _b.call(_a), 
+            this._chart.onResize(width, height, !1), null === (_d = null === (_c = this._option.performanceHook) || void 0 === _c ? void 0 : _c.afterResizeWithUpdate) || void 0 === _d || _d.call(_c), 
             yield null === (_f = (_e = this._compiler).resize) || void 0 === _f ? void 0 : _f.call(_e, width, height), 
             this._isReleased || this._event.emit(constant_1.ChartEvent.afterResize, {
                 chart: this._chart
@@ -542,25 +591,29 @@ class VChart {
     }
     setCurrentTheme(name) {
         return __awaiter(this, void 0, void 0, (function*() {
-            return theme_manager_1.ThemeManager.themeExist(name) ? (yield this.updateCustomConfigAndRerender((() => {
-                var _a;
-                return this._updateCurrentTheme(name), null === (_a = this._chart) || void 0 === _a || _a.setCurrentTheme(), 
-                {
-                    change: !0,
-                    reMake: !1
-                };
-            })), this) : this;
+            if (!theme_manager_1.ThemeManager.themeExist(name)) return this;
+            const result = this._setCurrentTheme(name);
+            return yield this.updateCustomConfigAndRerender(result, !1, {
+                transformSpec: !1,
+                actionSource: "setCurrentTheme"
+            }), this;
         }));
     }
     setCurrentThemeSync(name) {
-        return theme_manager_1.ThemeManager.themeExist(name) ? (this.updateCustomConfigAndRerenderSync((() => {
-            var _a;
-            return this._updateCurrentTheme(name), null === (_a = this._chart) || void 0 === _a || _a.setCurrentTheme(), 
-            {
-                change: !0,
-                reMake: !1
-            };
-        })), this) : this;
+        if (!theme_manager_1.ThemeManager.themeExist(name)) return this;
+        const result = this._setCurrentTheme(name);
+        return this.updateCustomConfigAndRerender(result, !0, {
+            transformSpec: !1,
+            actionSource: "setCurrentTheme"
+        }), this;
+    }
+    _setCurrentTheme(name) {
+        var _a;
+        return this._updateCurrentTheme(name), this._initChartSpec(this._getSpecFromOriginalSpec(), "setCurrentTheme"), 
+        null === (_a = this._chart) || void 0 === _a || _a.setCurrentTheme(), {
+            change: !0,
+            reMake: !1
+        };
     }
     _getTooltipComponent() {
         var _a;
@@ -760,6 +813,17 @@ class VChart {
     getFunctionList() {
         return expression_function_1.ExpressionFunction.instance().getFunctionNameList();
     }
+    setRuntimeSpec(spec) {
+        this._spec = spec, this._updateSpecInfo();
+    }
+    _initChartPlugin() {
+        const pluginList = factory_1.Factory.getChartPlugins();
+        pluginList.length > 0 && (this._chartPlugin = new plugin_service_1.ChartPluginService(this), 
+        this._chartPlugin.load(pluginList.map((p => new p))), this._chartPluginApply("onInit", this._spec));
+    }
+    _chartPluginApply(funcName, ...args) {
+        this._chartPlugin && this._chartPlugin[funcName] && this._chartPlugin[funcName].apply(this._chartPlugin, args);
+    }
 }
 
 exports.VChart = VChart, VChart.InstanceManager = instance_manager_1.InstanceManager,