fix: fix error of test cases

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

@@ -100,8 +100,7 @@ describe('treemap chart test', () => {
     await cs.renderAsync();
     const series: TreemapSeries = cs.getChart().getAllSeries()[0] as TreemapSeries;
     const leafMark = series.getMarkInName('leaf');
-    const leafMarkProduct = leafMark?.getProduct();
-    expect(leafMarkProduct?.elements.length).toBe(90); // 叶子图元
+    expect(leafMark?.getGraphics().length).toBe(90); // 叶子图元
     expect(series.getRawDataStatisticsByField(DEFAULT_HIERARCHY_DEPTH, true).max).toBe(2);
     cs.release();
   });
@@ -136,10 +135,7 @@ describe('treemap chart test', () => {
     const leafMark = series.getMarkInName('leaf');
     const nonLeafMark = series.getMarkInName('nonLeaf');
 
-    const leafProduct = leafMark?.getProduct();
-    const nonLeafProduct = nonLeafMark?.getProduct();
-
-    expect(leafProduct?.elements.length).toBe(86); // 叶子图元
-    expect(nonLeafProduct?.elements.length).toBe(17); // 非叶子图元
+    expect(leafMark?.getGraphics().length).toBe(86); // 叶子图元
+    expect(nonLeafMark?.getGraphics().length).toBe(17); // 非叶子图元
   });
 });

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

@@ -197,6 +197,6 @@ describe('wordCloud chart test', () => {
 
     const marks = series.getMarks();
     const wordMark = marks[1];
-    expect(wordMark.getProduct()?.elements[0].getGraphicAttribute('fill')).toBe('#1664FF');
+    expect(wordMark.getGraphics()[0].attribute.fill).toBe('#1664FF');
   });
 });

packages/vchart/__tests__/unit/core/vchart-event.test.ts

@@ -1,3 +1,4 @@
+import { FederatedEvent } from '@visactor/vrender-core';
 import type { IBarChartSpec } from '../../../src';
 import { default as VChart } from '../../../src';
 import { createDiv, removeDom } from '../../util/dom';
@@ -163,9 +164,13 @@ describe('vchart event test', () => {
 
   it('should fire pointerdown event once after updateSpecSync()', () => {
     const pointDowmSpy = jest.fn();
+    const stage = vchart.getStage();
+    const e = new FederatedEvent((stage as any).eventSystem.manager);
+
+    e.type = 'pointerdown';
     vchart.on('pointerdown', pointDowmSpy);
 
-    vchart.getCompiler().getVGrammarView().emit('pointerdown', {});
+    stage.dispatchEvent(e);
 
     expect(pointDowmSpy).toBeCalledTimes(1);
 
@@ -174,7 +179,7 @@ describe('vchart event test', () => {
       stack: 'percent'
     });
 
-    vchart.getCompiler().getVGrammarView().emit('pointerdown', {});
+    stage.dispatchEvent(e);
     expect(pointDowmSpy).toBeCalledTimes(2);
   });
 

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

@@ -1,11 +1,12 @@
-import type { Group, Text } from '@visactor/vrender-core';
+import type { Group, IArc, Text } from '@visactor/vrender-core';
 import type { IBarChartSpec } from '../../../src';
 import { default as VChart } from '../../../src';
 import { createDiv, createCanvas, removeDom } from '../../util/dom';
 import type { ICommonChartSpec } from '../../../src/chart/common';
 import type { IAreaSeriesSpec } from '../../../src/series/area/interface';
 import type { IPoint } from '../../../src/typings';
 import { polarToCartesian } from '@visactor/vutils';
+import type { IMarkGraphic } from '../../../src/mark/interface';
 
 describe('VChart', () => {
   describe('render and update', () => {
@@ -433,7 +434,7 @@ describe('VChart', () => {
         }
       ) as VChart;
       vchart.renderSync();
-      const mark = vchart.getChart()!.getVGrammarView().getMarksByType('rect')[0].elements[0].getGraphicItem();
+      const mark = vchart.getChart()!.getStage().getElementsByType('rect')[0] as IMarkGraphic;
       const point = vchart.convertDatumToPosition({
         State: 'WY',
         年龄段: '小于5岁',
@@ -516,7 +517,8 @@ describe('VChart', () => {
         }
       ) as VChart;
       vchart.renderSync();
-      const mark = vchart.getChart()!.getVGrammarView().getMarksByType('polygon')[0].elements[1].getGraphicItem();
+
+      const mark = vchart.getChart()!.getStage().getElementsByType('polygon')[1];
       // @ts-ignore
       const centerX = (mark.attribute.points[0].x + mark.attribute.points[1].x) / 2;
       // @ts-ignore
@@ -576,10 +578,9 @@ describe('VChart', () => {
       const point1 = vchart.convertDatumToPosition({ type: 'sodium', value: '2.83' }) as IPoint;
       const mark = vchart
         .getChart()!
-        .getVGrammarView()
-        .getMarksByType('arc')[0]
-        .elements.filter(ele => ele.groupKey === 'sodium')[0]
-        .getGraphicItem() as unknown as any;
+        .getStage()
+        .getElementsByType('arc')
+        .filter(ele => (ele as IMarkGraphic).context.groupKey === 'sodium')[0] as IArc;
 
       const markCoord = polarToCartesian(
         { x: mark.attribute.x as number, y: mark.attribute.y as number },

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

@@ -11,7 +11,7 @@ describe('Line Mark', () => {
         stroke: undefined
       }
     });
-    expect((lineMark1 as any).getMarkConfig().enableSegments).toBe(undefined);
+    expect((lineMark1 as any)._segmentStyleKeys.length).toBe(0);
 
     const lineMark2 = new LineMark('line1', ctx);
     lineMark2.created();
@@ -29,7 +29,7 @@ describe('Line Mark', () => {
         }
       }
     });
-    expect((lineMark2 as any).getMarkConfig().enableSegments).toBe(true);
+    expect((lineMark2 as any)._segmentStyleKeys).toEqual(['lineDash']);
 
     const lineMark3 = new LineMark('line1', ctx);
     lineMark3.created();
@@ -39,7 +39,7 @@ describe('Line Mark', () => {
         lineDash: undefined
       }
     });
-    expect((lineMark3 as any).getMarkConfig().enableSegments).toBe(undefined);
+    expect((lineMark3 as any)._segmentStyleKeys.length).toBe(0);
 
     const lineMark4 = new LineMark('line1', ctx);
     lineMark4.created();
@@ -50,7 +50,7 @@ describe('Line Mark', () => {
         stroke: 'red'
       }
     });
-    expect((lineMark4 as any).getMarkConfig().enableSegments).toBeUndefined();
+    expect((lineMark4 as any)._segmentStyleKeys.length).toBe(0);
   });
 
   // FIXME: 'fill' does not exist in type 'IMarkSpec<ILineMarkSpec>'

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

@@ -137,7 +137,7 @@ describe('theme switch test', () => {
     await vchart.renderAsync();
     // await vchart.setCurrentTheme('light');
     // sepc
-    expect(vchart.getCompiler().getVGrammarView().background()).toBe('red');
+    expect(vchart.getCompiler().getStage().background).toBe('red');
   });
 
   it('set theme in spec and theme is an object', async () => {
@@ -178,7 +178,7 @@ describe('theme switch test', () => {
 
     await vchart.renderAsync();
     // spec
-    expect(vchart.getCompiler().getVGrammarView().background()).toBe('red');
+    expect(vchart.getCompiler().getStage().background).toBe('red');
     expect(vchart.getCurrentThemeName()).toBe('light');
   });
 });

packages/vchart/__tests__/util/factory/compiler.ts

@@ -1,26 +1,14 @@
+import { getTestStage } from './stage';
+
 export const getTestCompiler = () =>
   ({
     updateData: () => {},
     updateState: () => {},
     renderAsync: () => {},
-    getVGrammarView: () => {
-      return {
-        updateLayoutTag: () => {},
-        getDataById: () => {},
-        getMarkById: () => {},
-        getSignalById: () => {},
-        signal: () => {
-          return {
-            id: () => {
-              return {
-                value: () => {}
-              };
-            }
-          };
-        }
-      };
-    },
-    addGrammarItem: () => {},
-    addInteraction: () => {},
-    removeInteraction: () => {}
+    getLayoutState: () => '',
+    updateLayoutTag: () => {},
+    getStage: getTestStage,
+    addRootMark: () => {},
+    renderNextTick: () => {},
+    addGrammarItem: () => {}
   } as any);

packages/vchart/__tests__/util/factory/stage.ts

@@ -0,0 +1,4 @@
+export const getTestStage = () =>
+  ({
+    getElementById: () => {}
+  } as any);

packages/vchart/src/animation/interface.ts

@@ -169,5 +169,6 @@ export interface MarkAnimationSpec {
   enter?: IAnimationConfig | IAnimationConfig[];
   exit?: IAnimationConfig | IAnimationConfig[];
   update?: IAnimationConfig | IAnimationConfig[];
+  normal?: IAnimationConfig | IAnimationConfig[];
   state?: IStateAnimationConfig;
 }

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

@@ -44,7 +44,16 @@ import type { DataView } from '@visactor/vdataset';
 import type { DataSet } from '@visactor/vdataset';
 import { Factory } from '../../core/factory';
 import { Event } from '../../event/event';
-import { isArray, isValid, createID, calcPadding, normalizeLayoutPaddingSpec, array } from '../../util';
+import {
+  isArray,
+  isValid,
+  createID,
+  calcPadding,
+  normalizeLayoutPaddingSpec,
+  array,
+  isCollectionMark,
+  getDatumOfGraphic
+} from '../../util';
 import { BaseModel } from '../../model/base-model';
 import { BaseMark } from '../../mark/base/base-mark';
 import { DEFAULT_CHART_WIDTH, DEFAULT_CHART_HEIGHT } from '../../constant/base';
@@ -1182,7 +1191,7 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
     filter?: (series: ISeries, mark: IMark) => boolean,
     region?: IRegionQuerier
   ): void {
-    this._setStateInDatum(STATE_VALUE_ENUM.STATE_SELECTED, true, datum, filter, region);
+    this._setStateInDatum(STATE_VALUE_ENUM.STATE_SELECTED, datum, filter, region);
   }
 
   /**
@@ -1196,7 +1205,7 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
     filter?: (series: ISeries, mark: IMark) => boolean,
     region?: IRegionQuerier
   ): void {
-    this._setStateInDatum(STATE_VALUE_ENUM.STATE_HOVER, true, datum, filter, region);
+    this._setStateInDatum(STATE_VALUE_ENUM.STATE_HOVER, datum, filter, region);
   }
 
   /**
@@ -1205,11 +1214,7 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
    * @since 1.11.0
    */
   clearState(state: string) {
-    this.getAllRegions().forEach(r => {
-      r.interaction.clearEventElement(state, true);
-      r.interaction.resetInteraction(state, null);
-      return;
-    });
+    this._interaction.clearByState(state, true);
   }
 
   /**
@@ -1218,11 +1223,7 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
    * @since 1.12.4
    */
   clearAllStates() {
-    this.getAllRegions().forEach(r => {
-      r.interaction.clearAllEventElement();
-      r.interaction.resetAllInteraction();
-      return;
-    });
+    this._interaction.clearAllStates();
   }
 
   /**
@@ -1261,7 +1262,7 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
     marks.forEach(mark => {
       const product = mark.getProduct();
       if (product && product.animate) {
-        product.animate.enableAnimationState(states);
+        // product.animate.enableAnimationState(states);
       }
     });
   }
@@ -1271,48 +1272,50 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
     marks.forEach(mark => {
       const product = mark.getProduct();
       if (product && product.animate) {
-        product.animate.disableAnimationState(states);
+        // product.animate.disableAnimationState(states);
       }
     });
   }
 
   protected _setStateInDatum(
     stateKey: string,
-    checkReverse: boolean,
-    datum: MaybeArray<Datum> | null,
+    d: MaybeArray<Datum> | null,
     filter?: (series: ISeries, mark: IMark) => boolean,
     region?: IRegionQuerier
   ) {
-    datum = datum ? array(datum) : null;
-    const keys = !datum ? null : Object.keys(datum[0]);
+    if (!d) {
+      this._interaction.clearByState(stateKey, true);
+      return;
+    }
+    const datum = array(d);
+    const keys = Object.keys(datum[0]);
+    let pickGraphics = [] as IGraphic[];
+
     this.getRegionsInQuerier(region).forEach(r => {
-      if (!datum) {
-        r.interaction.clearEventElement(stateKey, true);
-        return;
-      }
       r.getSeries().forEach(s => {
         s.getMarks().forEach(m => {
-          if (!m.getProduct()) {
+          const graphics = m.getGraphics();
+          if (!graphics || !graphics.length) {
             return;
           }
           if (!filter || (isFunction(filter) && filter(s, m))) {
-            const isCollect = m.getProduct().isCollectionMark();
-            const elements = m.getProduct().elements;
-            let pickElements = [] as IGraphic[];
+            const isCollect = isCollectionMark(m.type);
+
             if (isCollect) {
-              pickElements = elements.filter(e => {
-                const elDatum = e.getDatum();
+              pickGraphics = graphics.filter(g => {
+                const elDatum = getDatumOfGraphic(g) as Datum[];
                 // eslint-disable-next-line max-nested-callbacks, eqeqeq
                 (datum as Datum[]).every((d, index) => keys.every(k => d[k] == elDatum[index][k]));
               });
             } else {
               if (datum.length > 1) {
                 const datumTemp = (datum as Datum[]).slice();
-                pickElements = elements.filter(e => {
+
+                pickGraphics = graphics.filter(g => {
                   if (datumTemp.length === 0) {
                     return false;
                   }
-                  const elDatum = e.getDatum();
+                  const elDatum = getDatumOfGraphic(g) as Datum;
                   // eslint-disable-next-line max-nested-callbacks, eqeqeq
                   const index = datumTemp.findIndex(d => keys.every(k => d[k] == elDatum[k]));
                   if (index >= 0) {
@@ -1323,19 +1326,16 @@ export class BaseChart<T extends IChartSpec> extends CompilableBase implements I
                 });
               } else {
                 // eslint-disable-next-line eqeqeq
-                const el = elements.find(e => keys.every(k => datum[0][k] == e.getDatum()[k]));
-                el && (pickElements = [el]);
+                const el = graphics.find(e => keys.every(k => datum[0][k] == e.getDatum()[k]));
+                el && (pickGraphics = [el]);
               }
             }
-            pickElements.forEach(element => {
-              r.interaction.startInteraction(stateKey, element);
-            });
           }
         });
       });
-      if (checkReverse) {
-        r.interaction.reverseEventElement(stateKey);
-      }
+    });
+    pickGraphics.forEach(g => {
+      this._interaction.startTriggerByGraphic(stateKey, g);
     });
   }