refactor: remove state change event (#5617)

* refactor: remove state change event

* test: add element state test case

packages/g6/__tests__/demos/graph-event.ts

@@ -1,53 +0,0 @@
-import { Graph, GraphEvent } from '@/src';
-import data from '@@/dataset/cluster.json';
-
-export const graphEvent: TestCase = async (context) => {
-  const graph = new Graph({
-    ...context,
-    data,
-    node: {
-      style: {
-        size: 20,
-      },
-    },
-    autoResize: true,
-    layout: { type: 'd3force' },
-  });
-
-  const events = [
-    GraphEvent.BEFORE_RENDER,
-    GraphEvent.AFTER_RENDER,
-    GraphEvent.BEFORE_DRAW,
-    GraphEvent.AFTER_DRAW,
-    GraphEvent.BEFORE_LAYOUT,
-    GraphEvent.AFTER_LAYOUT,
-    GraphEvent.BEFORE_SIZE_CHANGE,
-    GraphEvent.AFTER_SIZE_CHANGE,
-  ];
-
-  const now = performance.now();
-  events.forEach((event) => {
-    graph.on(event, (e: any) => {
-      console.log('Time: ', performance.now() - now);
-      console.log(event, e);
-    });
-  });
-
-  await graph.render();
-
-  graphEvent.form = (panel) => {
-    const config = {
-      note: 'See The Console',
-      resize: () => {
-        const $container = document.getElementById('container')!;
-        Object.assign($container.style, { width: '600px', height: '600px' });
-        window.dispatchEvent(new Event('resize'));
-      },
-      follow: false,
-      size: 20,
-    };
-    return [panel.add(config, 'note').name('⚠️ Note').disable()];
-  };
-
-  return graph;
-};

packages/g6/__tests__/demos/index.ts

@@ -43,7 +43,6 @@ export * from './element-position-combo';
 export * from './element-state';
 export * from './element-visibility';
 export * from './element-z-index';
-export * from './graph-event';
 export * from './layout-antv-dagre-flow';
 export * from './layout-antv-dagre-flow-combo';
 export * from './layout-circular-basic';

packages/g6/__tests__/unit/runtime/element/state.spec.ts

@@ -0,0 +1,32 @@
+import { createGraph } from '@@/utils';
+
+describe('element states', () => {
+  it('element state', async () => {
+    const graph = createGraph({
+      data: {
+        nodes: [{ id: 'node-1' }, { id: 'node-2' }],
+        edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
+      },
+    });
+
+    await graph.draw();
+
+    expect(graph.getElementState('node-1')).toEqual([]);
+
+    graph.setElementState('node-1', 'selected');
+    expect(graph.getElementState('node-1')).toEqual(['selected']);
+
+    graph.setElementState('node-1', ['selected', 'hovered']);
+    expect(graph.getElementState('node-1')).toEqual(['selected', 'hovered']);
+
+    graph.setElementState('node-1', '');
+    expect(graph.getElementState('node-1')).toEqual([]);
+
+    graph.setElementState('node-1', 'selected');
+
+    graph.setElementState('node-1', []);
+    expect(graph.getElementState('node-1')).toEqual([]);
+
+    graph.destroy();
+  });
+});

packages/g6/__tests__/unit/runtime/graph/event.spec.ts

@@ -114,4 +114,43 @@ describe('event', () => {
 
     graph.destroy();
   });
+
+  it('element state', async () => {
+    const graph = createGraph({
+      data: {
+        nodes: [{ id: 'node-1' }, { id: 'node-2' }],
+        edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
+      },
+    });
+
+    await graph.draw();
+
+    const create = jest.fn();
+    const update = jest.fn();
+    const destroy = jest.fn();
+
+    graph.on(GraphEvent.AFTER_ELEMENT_CREATE, create);
+    graph.on(GraphEvent.AFTER_ELEMENT_UPDATE, update);
+    graph.on(GraphEvent.AFTER_ELEMENT_DESTROY, destroy);
+
+    // state change
+    graph.updateNodeData([{ id: 'node-1', style: { states: ['active'] } }]);
+    await graph.draw();
+
+    expect(update).toHaveBeenCalledTimes(2);
+    expect(update.mock.calls[0][0].data.id).toEqual('node-1');
+    expect(update.mock.calls[0][0].data.style.states).toEqual(['active']);
+
+    // 同时会更新相邻的边 / It will also update the adjacent edge
+    expect(update.mock.calls[1][0].data.id).toEqual('edge-1');
+
+    update.mockClear();
+    graph.setElementState('node-1', []);
+    expect(update).toHaveBeenCalledTimes(2);
+    expect(update.mock.calls[0][0].data.id).toEqual('node-1');
+    expect(update.mock.calls[0][0].data.style.states).toEqual([]);
+    expect(update.mock.calls[1][0].data.id).toEqual('edge-1');
+
+    graph.destroy();
+  });
 });

packages/g6/src/constants/events/graph.ts

@@ -43,10 +43,6 @@ export enum GraphEvent {
   BEFORE_TRANSFORM = 'beforetransform',
   /** <zh/> 可视区域变化之后 | <en/> After the visible area changes */
   AFTER_TRANSFORM = 'aftertransform',
-  /** <zh/> 状态变化之前 | <en/> Before the state changes */
-  BEFORE_ELEMENT_STATE_CHANGE = 'beforeelementstatechange',
-  /** <zh/> 状态变化之后 | <en/> After the state changes */
-  AFTER_ELEMENT_STATE_CHANGE = 'afterelementstatechange',
 }
 
 export const enum AnimationTypeEnum {

packages/g6/src/runtime/graph.ts

@@ -39,7 +39,7 @@ import type {
   ViewportAnimationEffectTiming,
 } from '../types';
 import { sizeOf } from '../utils/dom';
-import { ElementStateChangeEvent, GraphLifeCycleEvent, emit } from '../utils/event';
+import { GraphLifeCycleEvent, emit } from '../utils/event';
 import { idOf } from '../utils/id';
 import { parsePoint, toPointObject } from '../utils/point';
 import { zIndexOf } from '../utils/style';
@@ -958,17 +958,19 @@ export class Graph extends EventEmitter {
       ? [args1, (args2 as boolean) ?? true]
       : [{ [args1]: args2 as State | State[] }, args3];
 
-    emit(this, new ElementStateChangeEvent(GraphEvent.BEFORE_ELEMENT_STATE_CHANGE, config));
+    const parseState = (state: State | State[]) => {
+      if (!state) return [];
+      return Array.isArray(state) ? state : [state];
+    };
 
     const dataToUpdate: Required<PartialGraphData> = { nodes: [], edges: [], combos: [] };
     Object.entries(config).forEach(([id, value]) => {
       const elementType = this.getElementType(id);
-      dataToUpdate[`${elementType}s`].push({ id, style: { states: Array.isArray(value) ? value : [value] } });
+      dataToUpdate[`${elementType}s`].push({ id, style: { states: parseState(value) } });
     });
     this.updateData(dataToUpdate);
 
     await this.context.element!.draw({ animation });
-    emit(this, new ElementStateChangeEvent(GraphEvent.AFTER_ELEMENT_STATE_CHANGE, config));
   }
 
   /**

packages/g6/src/utils/event/events.ts

@@ -1,7 +1,6 @@
 import type { IAnimation } from '@antv/g';
-import type { ID } from '@antv/graphlib';
 import type { AnimationType, GraphEvent } from '../../constants';
-import type { ElementDatum, ElementType, State, TransformOptions } from '../../types';
+import type { ElementDatum, ElementType, TransformOptions } from '../../types';
 
 export class BaseEvent {
   constructor(public type: string) {}
@@ -59,12 +58,3 @@ export class ViewportEvent extends BaseEvent {
     super(type);
   }
 }
-
-export class ElementStateChangeEvent extends BaseEvent {
-  constructor(
-    type: GraphEvent.BEFORE_ELEMENT_STATE_CHANGE | GraphEvent.AFTER_ELEMENT_STATE_CHANGE,
-    public states: Record<ID, State | State[]>,
-  ) {
-    super(type);
-  }
-}