fix(chord): 修复和弦图 state 设置不生效 (#2633)

* fix(chord): 修复和弦图 state 设置不生效

同 dual-axes 存在多view的情况

* test(chord): 补充和弦图单测

Author: visiky

__tests__/unit/plots/chord/state-spec.ts

@@ -0,0 +1,49 @@
+import { Chord } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { simulateMouseEvent } from '../../../utils/event';
+import { populationMovementData as DATA } from '../../../data/chord-population';
+
+describe('chord: state', () => {
+  const plot = new Chord(createDiv(), {
+    height: 500,
+    data: DATA,
+    sourceField: 'source',
+    targetField: 'target',
+    weightField: 'value',
+  });
+
+  plot.render();
+
+  it('set state', async () => {
+    plot.render();
+
+    plot.setState('selected', (data) => (data as any).name === DATA[0].source);
+    expect(plot.getStates().length).toBe(1);
+
+    plot.chart.views[1].geometries[0].elements[0].setState('selected', false);
+    expect(plot.getStates().length).toBe(0);
+
+    plot.chart.views[1].geometries[0].elements[0].setState('selected', true);
+    expect(plot.getStates().length).toBe(1);
+
+    // 取消 selected
+    plot.setState('selected', (data) => (data as any).name === DATA[0].source, false);
+    expect(plot.getStates().length).toBe(0);
+  });
+
+  it('interactions + getState', () => {
+    plot.update({ interactions: [{ type: 'element-active' }] });
+
+    expect(plot.getStates().length).toBe(0);
+    // edge view
+    const element = plot.chart.views[0].geometries[0].elements[0];
+    simulateMouseEvent(element.shape, 'mouseenter');
+    expect(plot.getStates().length).toBe(1);
+    expect(plot.getStates()[0].data).toMatchObject({ source: DATA[0].source });
+    expect(plot.getStates()[0].state).toBe('active');
+  });
+
+  afterAll(() => {
+    plot.destroy();
+  });
+});

src/plots/chord/index.ts

@@ -1,8 +1,12 @@
+import { each } from '@antv/util';
+import { Element } from '@antv/g2';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
-import { ChordOptions } from './types';
+import { StateName, StateCondition, StateObject } from '../../types';
+import { getAllElementsRecursively } from '../../utils';
 import { adaptor } from './adaptor';
 import { DEFAULT_OPTIONS } from './constant';
+import { ChordOptions } from './types';
 
 export type { ChordOptions };
 
@@ -20,6 +24,42 @@ export class Chord extends Plot<ChordOptions> {
   /** 图表类型 */
   public type: string = 'chord';
 
+  /**
+   * @override
+   * 设置状态
+   * @param type 状态类型，支持 'active' | 'inactive' | 'selected' 三种
+   * @param conditions 条件，支持数组
+   * @param status 是否激活，默认 true
+   */
+  public setState(type: StateName, condition: StateCondition, status: boolean = true) {
+    const elements = getAllElementsRecursively(this.chart);
+
+    each(elements, (ele: Element) => {
+      if (condition(ele.getData())) {
+        ele.setState(type, status);
+      }
+    });
+  }
+
+  /**
+   * @override
+   * 获取状态
+   */
+  public getStates(): StateObject[] {
+    const elements = getAllElementsRecursively(this.chart);
+
+    const stateObjects: StateObject[] = [];
+    each(elements, (element: Element) => {
+      const data = element.getData();
+      const states = element.getStates();
+      each(states, (state) => {
+        stateObjects.push({ data, state, geometry: element.geometry, element });
+      });
+    });
+
+    return stateObjects;
+  }
+
   protected getDefaultOptions() {
     return Chord.getDefaultOptions();
   }