refactor: refactor interaction of sankey and fix 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/animate-manager.ts

@@ -4,7 +4,7 @@ import type { IAnimate, IAnimateState } from './interface';
 // eslint-disable-next-line no-duplicate-imports
 import { AnimationStateEnum } from './interface';
 import type { StateValueMap } from '../compile/interface/compilable-item';
-import type { IGraphic } from '@visactor/vrender-core';
+import type { IMarkGraphic } from '../mark/interface/common';
 
 export class AnimateManager extends StateManager implements IAnimate {
   protected declare _stateMap: IAnimateState & StateValueMap;
@@ -17,7 +17,7 @@ export class AnimateManager extends StateManager implements IAnimate {
       this.updateState(
         {
           animationState: {
-            callback: (datum: any, g: IGraphic) => g.context.diffState
+            callback: (datum: any, g: IMarkGraphic) => g.context.diffState
           }
         },
         noRender
@@ -28,7 +28,7 @@ export class AnimateManager extends StateManager implements IAnimate {
       this.updateState(
         {
           animationState: {
-            callback: (datum: any, g: IGraphic) => {
+            callback: (datum: any, g: IMarkGraphic) => {
               return g.context.diffState === 'exit' ? AnimationStateEnum.none : AnimationStateEnum.appear;
             }
           }
@@ -41,7 +41,7 @@ export class AnimateManager extends StateManager implements IAnimate {
       this.updateState(
         {
           animationState: {
-            callback: (datum: any, g: IGraphic) => state
+            callback: (datum: any, g: IMarkGraphic) => state
           }
         },
         noRender
@@ -52,7 +52,7 @@ export class AnimateManager extends StateManager implements IAnimate {
   protected _getDefaultStateMap(): IAnimateState & StateValueMap {
     return {
       animationState: {
-        callback: (datum: any, g: IGraphic) => {
+        callback: (datum: any, g: IMarkGraphic) => {
           return g.context.diffState === 'exit'
             ? AnimationStateEnum.exit
             : g.context.diffState === 'update'