From cf0ccc70d6550eb106aaa08de150998169f6d15d Mon Sep 17 00:00:00 2001 From: Aaron Date: Sun, 7 Apr 2024 17:06:57 +0800 Subject: [PATCH] refactor: remove state change event (#5617) * refactor: remove state change event * test: add element state test case --- packages/g6/__tests__/demos/graph-event.ts | 53 ------------------- packages/g6/__tests__/demos/index.ts | 1 - .../unit/runtime/element/state.spec.ts | 32 +++++++++++ .../unit/runtime/graph/event.spec.ts | 39 ++++++++++++++ packages/g6/src/constants/events/graph.ts | 4 -- packages/g6/src/runtime/graph.ts | 10 ++-- packages/g6/src/utils/event/events.ts | 12 +---- 7 files changed, 78 insertions(+), 73 deletions(-) delete mode 100644 packages/g6/__tests__/demos/graph-event.ts create mode 100644 packages/g6/__tests__/unit/runtime/element/state.spec.ts diff --git a/packages/g6/__tests__/demos/graph-event.ts b/packages/g6/__tests__/demos/graph-event.ts deleted file mode 100644 index 85d051efbe..0000000000 --- a/packages/g6/__tests__/demos/graph-event.ts +++ /dev/null @@ -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; -}; diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts index fd86f9b0ba..7c7e8c7a83 100644 --- a/packages/g6/__tests__/demos/index.ts +++ b/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'; diff --git a/packages/g6/__tests__/unit/runtime/element/state.spec.ts b/packages/g6/__tests__/unit/runtime/element/state.spec.ts new file mode 100644 index 0000000000..8064eeaaa5 --- /dev/null +++ b/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(); + }); +}); diff --git a/packages/g6/__tests__/unit/runtime/graph/event.spec.ts b/packages/g6/__tests__/unit/runtime/graph/event.spec.ts index c24fb485e9..32c8a66155 100644 --- a/packages/g6/__tests__/unit/runtime/graph/event.spec.ts +++ b/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(); + }); }); diff --git a/packages/g6/src/constants/events/graph.ts b/packages/g6/src/constants/events/graph.ts index adedf6c13b..642120afdf 100644 --- a/packages/g6/src/constants/events/graph.ts +++ b/packages/g6/src/constants/events/graph.ts @@ -43,10 +43,6 @@ export enum GraphEvent { BEFORE_TRANSFORM = 'beforetransform', /** 可视区域变化之后 | After the visible area changes */ AFTER_TRANSFORM = 'aftertransform', - /** 状态变化之前 | Before the state changes */ - BEFORE_ELEMENT_STATE_CHANGE = 'beforeelementstatechange', - /** 状态变化之后 | After the state changes */ - AFTER_ELEMENT_STATE_CHANGE = 'afterelementstatechange', } export const enum AnimationTypeEnum { diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts index 8f244212ab..c9b7c22b70 100644 --- a/packages/g6/src/runtime/graph.ts +++ b/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 = { 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)); } /** diff --git a/packages/g6/src/utils/event/events.ts b/packages/g6/src/utils/event/events.ts index 234a15d722..59f4e60b86 100644 --- a/packages/g6/src/utils/event/events.ts +++ b/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, - ) { - super(type); - } -}