perf: base-chart should not create spec transformer

packages/vchart/__tests__/unit/chart/bar.test.ts

@@ -117,7 +117,7 @@ describe('Bar chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/histogram.test.ts

@@ -75,7 +75,7 @@ describe('histogram chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/line.test.ts

@@ -60,7 +60,7 @@ describe('line chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec
@@ -125,7 +125,7 @@ describe('line chart test', () => {
       getTheme: () => ThemeManager.getCurrentTheme(true),
       getSpecInfo: () => info
     } as any);
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/linearProgress.test.ts

@@ -64,7 +64,7 @@ describe('linearProgress chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/rangeColumn.test.ts

@@ -77,7 +77,7 @@ describe('rangeColumn chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/chart/treemap.test.ts

@@ -80,7 +80,7 @@ describe('treemap chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     const series: TreemapSeries = chart.getAllSeries()[0] as TreemapSeries;

packages/vchart/__tests__/unit/chart/word-cloud.test.ts

@@ -84,7 +84,7 @@ describe('wordCloud chart test', () => {
       getTheme: () => ThemeManager.getCurrentTheme(true),
       getSpecInfo: () => info
     } as any);
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/__tests__/unit/data/fields.test.ts

@@ -78,7 +78,7 @@ describe('data fields test', () => {
       getTheme: () => ThemeManager.getCurrentTheme(true),
       getSpecInfo: () => info
     } as any);
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     const lastData = chart.getAllSeries()[0].getRawData()?.latestData;
@@ -159,7 +159,7 @@ describe('data fields test', () => {
       getTheme: () => ThemeManager.getCurrentTheme(true),
       getSpecInfo: () => info
     } as any);
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     const lastData = chart.getAllSeries()[0].getRawData()?.latestData;

packages/vchart/__tests__/unit/morph/morph.test.ts

@@ -139,7 +139,7 @@ describe('Bar chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    scatterChart.created();
+    scatterChart.created(transformer);
     scatterChart.init();
 
     const barTransformer = new BarChart.transformerConstructor({
@@ -171,7 +171,7 @@ describe('Bar chart test', () => {
         getSpecInfo: () => barInfo
       } as any
     );
-    barChart.created();
+    barChart.created(barTransformer);
     barChart.init();
 
     const barSeries = barChart.getAllSeries()[0];
@@ -216,7 +216,7 @@ describe('Bar chart test', () => {
         getSpecInfo: () => info
       } as any
     );
-    scatterChart.created();
+    scatterChart.created(transformer);
     scatterChart.init();
 
     const ASeries = scatterChart.getAllSeries()[0];

packages/vchart/__tests__/unit/scale/global-scale.test.ts

@@ -314,7 +314,7 @@ describe('global-scale test', () => {
         getTheme: () => ThemeManager.getCurrentTheme(true)
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec
@@ -464,7 +464,7 @@ describe('global-scale test', () => {
         getTheme: () => ThemeManager.getCurrentTheme(true)
       } as any
     );
-    chart.created();
+    chart.created(transformer);
     chart.init();
 
     // spec

packages/vchart/src/chart/base/base-chart-transformer.ts

@@ -57,27 +57,35 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
     }
   }
 
-  /**
-   * 转换 model spec。包含以下步骤：
-   * - model 层级的主题合并
-   * - model 层级的在初始化阶段的 spec 修改，如添加 label spec
-   */
-  transformModelSpec(chartSpec: T): IChartSpecInfo {
-    const transform = (constructor: IModelConstructor, specInfo: IModelSpecInfo, chartSpecInfo?: IChartSpecInfo) => {
+  generateTransform(chartSpec: T, isRuntime?: boolean) {
+    return (constructor: IModelConstructor, specInfo: IModelSpecInfo, chartSpecInfo?: IChartSpecInfo) => {
       const { spec, specPath, specInfoPath, type } = specInfo;
       const transformer = new constructor.transformerConstructor({
         ...this._option,
         type
       });
       // 调用 model 自己的 transformer 进行转换
       const transformResult = transformer.transformSpec(spec, chartSpec, chartSpecInfo);
-      setProperty(chartSpec, specPath, transformResult.spec);
-      setProperty(chartSpecInfo, specInfoPath ?? specPath, {
+      const chartSpecInfoValue = {
         ...specInfo,
         ...transformResult
-      });
+      };
+      if (isRuntime) {
+        chartSpecInfoValue.theme = transformer.getTheme(spec, chartSpec);
+      } else {
+        setProperty(chartSpec, specPath, transformResult.spec);
+      }
+      setProperty(chartSpecInfo, specInfoPath ?? specPath, chartSpecInfoValue);
     };
-    return this.createSpecInfo(chartSpec, transform);
+  }
+
+  /**
+   * 转换 model spec。包含以下步骤：
+   * - model 层级的主题合并
+   * - model 层级的在初始化阶段的 spec 修改，如添加 label spec
+   */
+  transformModelSpec(chartSpec: T): IChartSpecInfo {
+    return this.createSpecInfo(chartSpec, this.generateTransform(chartSpec, false));
   }
 
   /** 遍历图表 spec 中包含的所有的 model，进行 spec 转换并生成图表 spec info */
@@ -93,20 +101,7 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
     ) => void
   ): IChartSpecInfo {
     if (!transform) {
-      transform = (constructor: IModelConstructor, specInfo: IModelSpecInfo, chartSpecInfo?: IChartSpecInfo) => {
-        const { spec, specPath, specInfoPath, type } = specInfo;
-        const transformer = new constructor.transformerConstructor({
-          ...this._option,
-          type
-        });
-        const transformResult = transformer.transformSpec(spec, chartSpec, chartSpecInfo);
-
-        setProperty(chartSpecInfo, specInfoPath ?? specPath, {
-          ...specInfo,
-          ...transformResult,
-          theme: transformer.getTheme(spec, chartSpec)
-        });
-      };
+      transform = this.generateTransform(chartSpec, true);
     }
 
     const currentChartSpecInfo: IChartSpecInfo = {};
@@ -271,7 +266,7 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
         polarAxis = cmp;
       } else if (cmp.type === ComponentTypeEnum.geoCoordinate) {
         geoCoordinate = cmp;
-      } else if (alwaysCheck || chartSpec[cmp.specKey ?? cmp.type]) {
+      } else if (alwaysCheck || (chartSpec as any)[cmp.specKey ?? cmp.type]) {
         if (cmp.type === ComponentTypeEnum.tooltip) {
           tooltip = cmp;
         } else {
@@ -340,7 +335,7 @@ export class BaseChartSpecTransformer<T extends IChartSpec> implements IChartSpe
         }
         Object.keys(defaultSeriesSpec).forEach(k => {
           if (!(k in s)) {
-            s[k] = defaultSeriesSpec[k];
+            (s as any)[k] = defaultSeriesSpec[k];
           }
         });
       });

packages/vchart/src/chart/base/base-chart.ts

@@ -52,7 +52,7 @@ import { BaseMark } from '../../mark/base/base-mark';
 import { DEFAULT_CHART_WIDTH, DEFAULT_CHART_HEIGHT } from '../../constant/base';
 // eslint-disable-next-line no-duplicate-imports
 import type { IParserOptions } from '@visactor/vdataset';
-import type { IBoundsLike } from '@visactor/vutils';
+import type { IBoundsLike, Maybe } from '@visactor/vutils';
 // eslint-disable-next-line no-duplicate-imports
 import { isFunction, isEmpty, isNil, isString, isEqual, pickWithout } from '@visactor/vutils';
 import { getDataScheme } from '../../theme/color-scheme/util';
@@ -77,8 +77,6 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
 
   readonly id: number = createID();
 
-  protected _transformer: IChartSpecTransformer;
-
   //FIXME: 转换后的 spec 需要声明 ITransformedChartSpec
   protected _spec: T;
   getSpec() {
@@ -203,12 +201,7 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
     this._spec = spec;
   }
 
-  created() {
-    this._transformer = new this.transformerConstructor({
-      ...this._option,
-      type: this.type,
-      seriesType: this.seriesType
-    });
+  created(transformer: Maybe<IChartSpecTransformer>) {
     // data
     this._chartData.parseData(this._spec.data);
     // scale
@@ -219,11 +212,12 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
     this._createLayout();
     // 基于spec 创建元素。
     // region
-    this._transformer.forEachRegionInSpec(this._spec, this._createRegion.bind(this));
+    debugger;
+    transformer.forEachRegionInSpec(this._spec, this._createRegion.bind(this));
     // series
-    this._transformer.forEachSeriesInSpec(this._spec, this._createSeries.bind(this));
+    transformer.forEachSeriesInSpec(this._spec, this._createSeries.bind(this));
     // components
-    this._transformer.forEachComponentInSpec(this._spec, this._createComponent.bind(this), this._option.getSpecInfo());
+    transformer.forEachComponentInSpec(this._spec, this._createComponent.bind(this), this._option.getSpecInfo());
   }
 
   init() {

packages/vchart/src/chart/interface/chart.ts

@@ -16,7 +16,7 @@ import type {
   IChartSpecTransformerOption,
   ILayoutParams
 } from './common';
-import type { IBoundsLike, IPadding } from '@visactor/vutils';
+import type { IBoundsLike, IPadding, Maybe } from '@visactor/vutils';
 import type { ICompilable } from '../../compile/interface';
 import type {
   IRegionQuerier,
@@ -87,7 +87,7 @@ export interface IChart extends ICompilable {
   // update scale domain which in GlobalScale
   updateGlobalScaleDomain: () => void;
   //生命周期
-  created: () => void;
+  created: (transformer: Maybe<IChartSpecTransformer>) => void;
   init: () => void;
   onLayoutStart: (ctx: IChartLayoutOption) => void;
   onLayoutEnd: (ctx: IChartLayoutOption) => void;

packages/vchart/src/core/vchart.ts

@@ -524,7 +524,7 @@ export class VChart implements IVChart {
     }
     this._chart = chart;
     this._chart.setCanvasRect(this._currentSize.width, this._currentSize.height);
-    this._chart.created();
+    this._chart.created(this._chartSpecTransformer);
     this._chart.init();
     this._event.emit(ChartEvent.initialized, {
       chart,
@@ -547,13 +547,15 @@ export class VChart implements IVChart {
     if (!this._compiler) {
       return;
     }
-    this._compiler.getVGrammarView().addEventListener(VGRAMMAR_HOOK_EVENT.ALL_ANIMATION_END, () => {
+    const view = this._compiler.getVGrammarView();
+
+    view.addEventListener(VGRAMMAR_HOOK_EVENT.ALL_ANIMATION_END, () => {
       this._event.emit(ChartEvent.animationFinished, {
         chart: this._chart,
         vchart: this
       });
     });
-    this._compiler.getVGrammarView().addEventListener(VGRAMMAR_HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER, () => {
+    view.addEventListener(VGRAMMAR_HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER, () => {
       this._event.emit(ChartEvent.renderFinished, {
         chart: this._chart,
         vchart: this
@@ -668,17 +670,24 @@ export class VChart implements IVChart {
     if (updateResult.reMake) {
       this._releaseData();
       this._initDataSet();
-      // 释放图表等等
-      this._chartSpecTransformer = null;
       this._chart?.release();
       this._chart = null as unknown as IChart;
-      // 卸载了chart之后再设置主题 避免多余的reInit
-      if (updateResult.changeTheme) {
-        this._setCurrentTheme();
-        this._setFontFamilyTheme(this._currentTheme?.fontFamily as string);
-      } else if (updateResult.changeBackground) {
-        this._compiler?.setBackground(this._getBackground());
-      }
+    }
+
+    if (updateResult.reTransformSpec) {
+      // 释放图表等等
+      this._chartSpecTransformer = null;
+    }
+
+    // 卸载了chart之后再设置主题 避免多余的reInit
+    if (updateResult.changeTheme) {
+      this._setCurrentTheme();
+      this._setFontFamilyTheme(this._currentTheme?.fontFamily as string);
+    } else if (updateResult.changeBackground) {
+      this._compiler?.setBackground(this._getBackground());
+    }
+
+    if (updateResult.reMake) {
       // 如果不需要动画，那么释放item，避免元素残留
       this._compiler?.releaseGrammar(this._option?.animation === false || this._spec?.animation === false);
       // chart 内部事件 模块自己必须删除
@@ -690,13 +699,6 @@ export class VChart implements IVChart {
         this._doResize();
       }
     } else {
-      // 不remake的情况下，可以在这里更新主题
-      if (updateResult.changeTheme) {
-        this._setCurrentTheme();
-        this._setFontFamilyTheme(this._currentTheme?.fontFamily as string);
-      } else if (updateResult.changeBackground) {
-        this._compiler?.setBackground(this._getBackground());
-      }
       if (updateResult.reCompile) {
         // recompile
         // 清除之前的所有 compile 内容
@@ -1324,7 +1326,7 @@ export class VChart implements IVChart {
     });
     this._event?.on(eType as any, query as any, handler as any);
   }
-  off(eType: string, handler?: EventCallback<EventParams>): void {
+  off(eType: EventType, handler?: EventCallback<EventParams>): void {
     if (!this._userEvents || this._userEvents.length === 0) {
       return;
     }