【WIP】Refactor/remove vgrammar

packages/vchart-extension/src/charts/conversion-funnel/conversion-funnel.ts

@@ -1,5 +1,5 @@
 import type { IConversionFunnelChartSpecBase, IConversionFunnelSeriesSpecBase } from './interface';
-import { VChart, FunnelChart, PREFIX, FunnelSeries, GroupMark } from '@visactor/vchart';
+import { VChart, FunnelChart, PREFIX, FunnelSeries, GroupMark, registerMarkFilterTransform } from '@visactor/vchart';
 import { DataView } from '@visactor/vdataset';
 import { ConversionFunnelChartSpecTransformer } from './conversion-funnel-transformer';
 import { conversionArrowTransform } from './arrow-data-transform';
@@ -42,7 +42,7 @@ export class ConversionFunnelSeries extends FunnelSeries<IConversionFunnelSeries
       rightGroup.getMarks().forEach(mark => {
         mark.setDataView(this._arrowData);
         mark.compileData();
-        mark.getProduct().transform([
+        mark.setTransform([
           {
             type: 'filter',
             callback: datum => datum.position === 'right'
@@ -55,7 +55,7 @@ export class ConversionFunnelSeries extends FunnelSeries<IConversionFunnelSeries
       leftGroup.getMarks().forEach(mark => {
         mark.setDataView(this._arrowData);
         mark.compileData();
-        mark.getProduct().transform([
+        mark.setTransform([
           {
             type: 'filter',
             callback: datum => datum.position === 'left'
@@ -67,6 +67,8 @@ export class ConversionFunnelSeries extends FunnelSeries<IConversionFunnelSeries
 }
 
 export const registerConversionFunnelChart = (option?: { VChart?: typeof VChart }) => {
+  registerMarkFilterTransform();
+
   const vchartConstructor = option?.VChart || VChart;
   if (vchartConstructor) {
     vchartConstructor.useChart([ConversionFunnelChart]);

packages/vchart-extension/src/components/series-break/series-break.ts

@@ -4,11 +4,11 @@
  */
 
 import { AbstractComponent, Point } from '@visactor/vrender-components';
-import { Factory } from '@visactor/vgrammar-core';
 import { SeriesBreakAttrs, SeriesBreakData } from './type';
 import { createGroup, createPath, IGraphic } from '@visactor/vrender-core';
 import { isEmpty, isNumberClose, isValid } from '@visactor/vutils';
 import { SERIES_BREAK } from './constant';
+import { Factory } from '@visactor/vchart';
 
 /**
  * 求锯齿的路径（一个锯齿由向上和向下的两个线段组成）

packages/vchart-extension/src/components/series-break/util.ts

@@ -2,7 +2,7 @@
  * 支持轴翻转
  */
 import type { ILinearAxisBreakSpec, ILinearAxisSpec } from '@visactor/vchart/esm/component/axis';
-import { ICartesianSeries, ISpec } from '@visactor/vchart';
+import { ICartesianSeries, IMarkGraphic, ISpec } from '@visactor/vchart';
 import { SeriesBreakData } from './type';
 import { array, getIntersectPoint, IPointLike, isValid, PointService } from '@visactor/vutils';
 import { Point } from '@visactor/vrender-components';
@@ -65,9 +65,10 @@ export function getSeriesBreakConfig(axesSpec: ILinearAxisSpec[], axesIndex?: nu
             chart.getAllSeries().forEach((s: ICartesianSeries) => {
               if (s.type === 'bar' || s.type === 'waterfall') {
                 const mark = s.getMarkInName('bar');
-                const vgrammarElements = mark.getProduct().elements;
-                vgrammarElements.forEach((element: any) => {
-                  const elementBounds = element.getBounds();
+                const graphics = mark.getGraphics();
+
+                graphics.forEach((element: IMarkGraphic) => {
+                  const elementBounds = element.AABBBounds;
                   let shouldDrawBreak = false;
                   let startX;
                   let startY;
@@ -113,9 +114,8 @@ export function getSeriesBreakConfig(axesSpec: ILinearAxisSpec[], axesIndex?: nu
               } else if (s.type === 'line') {
                 // 求水平直线/垂直线同 line path 的交点
                 const mark = s.getMarkInName(s.type);
-                const vgrammarElements = mark.getProduct().elements;
-                vgrammarElements.forEach((element: any) => {
-                  const graphicItem = element.graphicItem;
+                const graphics = mark.getGraphics();
+                graphics.forEach(graphicItem => {
                   const points = getAreaOrLinePathPoints(graphicItem, 'line');
                   points.forEach(linePoints => {
                     // 开始查找交点
@@ -168,9 +168,8 @@ export function getSeriesBreakConfig(axesSpec: ILinearAxisSpec[], axesIndex?: nu
               } else if (s.type === 'area') {
                 // 默认面积去全部堆叠
                 const mark = s.getMarkInName('area');
-                const vgrammarElements = mark.getProduct().elements;
-                vgrammarElements.forEach((element: any) => {
-                  const graphicItem = element.graphicItem;
+                const graphics = mark.getGraphics();
+                graphics.forEach(graphicItem => {
                   const points = getAreaOrLinePathPoints(graphicItem, 'area');
                   points.forEach(areaPoints => {
                     const intersections = getIntersectionsFromLineAndPolyline(

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

@@ -1,32 +1,23 @@
-import type { IElement } from '@visactor/vgrammar-core';
-import { StateManager } from '../compile/signal/state-manager';
-import type { StateValueMap } from '../compile/signal/interface';
-import { PREFIX } from '../constant/base';
+import { StateManager } from '../compile/state-manager';
 import { createID } from '../util/id';
 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 { IMarkGraphic } from '../mark/interface/common';
 
 export class AnimateManager extends StateManager implements IAnimate {
   protected declare _stateMap: IAnimateState & StateValueMap;
 
   readonly id: number = createID();
 
-  protected stateKeyToSignalName = (key: string) => {
-    return `${PREFIX}_animate_${this.id}_${key}`;
-  };
-
-  getAnimationStateSignalName() {
-    return this.stateKeyToSignalName('animationState');
-  }
-
   updateAnimateState(state: AnimationStateEnum, noRender?: boolean) {
     // when animation state is 'update', do animations by element diffState(enter & update & exit)
     if (state === AnimationStateEnum.update) {
       this.updateState(
         {
           animationState: {
-            callback: (datum: any, element: IElement) => element.diffState
+            callback: (datum: any, g: IMarkGraphic) => g.context.diffState
           }
         },
         noRender
@@ -37,8 +28,8 @@ export class AnimateManager extends StateManager implements IAnimate {
       this.updateState(
         {
           animationState: {
-            callback: (datum: any, element: IElement) => {
-              return element.diffState === 'exit' ? AnimationStateEnum.none : AnimationStateEnum.appear;
+            callback: (datum: any, g: IMarkGraphic) => {
+              return g.context.diffState === 'exit' ? AnimationStateEnum.none : AnimationStateEnum.appear;
             }
           }
         },
@@ -50,7 +41,7 @@ export class AnimateManager extends StateManager implements IAnimate {
       this.updateState(
         {
           animationState: {
-            callback: (datum: any, element: IElement) => state
+            callback: (datum: any, g: IMarkGraphic) => state
           }
         },
         noRender
@@ -61,10 +52,10 @@ export class AnimateManager extends StateManager implements IAnimate {
   protected _getDefaultStateMap(): IAnimateState & StateValueMap {
     return {
       animationState: {
-        callback: (datum: any, element: IElement) => {
-          return element.diffState === 'exit'
+        callback: (datum: any, g: IMarkGraphic) => {
+          return g.context.diffState === 'exit'
             ? AnimationStateEnum.exit
-            : element.diffState === 'update'
+            : g.context.diffState === 'update'
             ? AnimationStateEnum.update
             : AnimationStateEnum.appear;
         }