feat(sankey): 分别对 node 和 edge 添加 交互属性配置 (#3081)

* feat(sankey): 分别对 node 和 edge 添加 交互属性配置

* feat(sankey): 分别对 node 和 edge 添加 交互属性配置 -2

Co-authored-by: ai-qing-hai <[email protected]>

Author: ai-qing-hai

__tests__/unit/plots/sankey/interations-spec.ts

@@ -0,0 +1,34 @@
+import { Sankey } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { delay } from '../../../utils/delay';
+import { ALIPAY_DATA } from '../../../data/sankey-energy';
+
+describe('sankey', () => {
+  it('changeData', async () => {
+    const data = ALIPAY_DATA.slice(0, ALIPAY_DATA.length - 5);
+    const sankey = new Sankey(createDiv(), {
+      height: 500,
+      data,
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'value',
+      edgeInteractions: [{ type: 'element-single-selected', enable: true }],
+      nodeInteractions: [{ type: 'element-highlight', enable: true }],
+    });
+
+    sankey.render();
+
+    expect(Object.keys(sankey.chart.views[0].interactions)[0]).toBe('element-single-selected');
+    expect(Object.keys(sankey.chart.views[1].interactions)[0]).toBe('element-highlight');
+
+    sankey.update({
+      edgeInteractions: [{ type: 'element-single-selected', enable: false }],
+      nodeInteractions: [{ type: 'element-highlight', enable: false }],
+    });
+
+    expect(sankey.chart.views[0].interactions).toEqual({});
+    expect(sankey.chart.views[1].interactions).toEqual({});
+
+    sankey.destroy();
+  });
+});

docs/api/plots/sankey.en.md

@@ -57,6 +57,12 @@ State style configuration of Sankey node.
 
 `markdown:docs/common/state-style.zh.md`
 
+#### nodeInteractions
+
+<description>**optional** _Interaction[]_</description>
+
+Interaction configuration of Sankey node.
+
 #### edgeStyle
 
 <description>**optional** _StyleAttr | Function_</description>
@@ -73,6 +79,12 @@ State style configuration of Sankey edge.
 
 `markdown:docs/common/color.en.md`
 
+#### edgeInteractions
+
+<description>**optional** _Interaction[]_</description>
+
+Interaction configuration of Sankey edge.
+
 #### nodeWidthRatio
 
 <description>**optional** _number_</description>

docs/api/plots/sankey.zh.md

@@ -57,6 +57,12 @@ order: 27
 
 `markdown:docs/common/state-style.zh.md`
 
+#### nodeInteractions
+
+<description>**optional** _Interaction[]_</description>
+
+桑基图节点交互的配置。
+
 #### edgeStyle
 
 <description>**optional** _StyleAttr | Function_</description>
@@ -73,6 +79,12 @@ order: 27
 
 `markdown:docs/common/state-style.zh.md`
 
+#### nodeInteractions
+
+<description>**optional** _Interaction[]_</description>
+
+桑基图边交互的配置。
+
 #### nodeWidthRatio
 
 <description>**optional** _number_</description>

src/plots/sankey/adaptor.ts

@@ -1,5 +1,5 @@
 import { uniq } from '@antv/util';
-import { interaction, theme } from '../../adaptor/common';
+import { theme } from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { deepAssign, flow } from '../../utils';
 import { polygon, edge } from '../../adaptor/geometries';
@@ -146,6 +146,39 @@ export function nodeDraggable(params: Params<SankeyOptions>): Params<SankeyOptio
   return params;
 }
 
+/**
+ * Interaction 配置
+ * @param params
+ */
+function interaction(params: Params<SankeyOptions>): Params<SankeyOptions> {
+  const { chart, options } = params;
+  const { interactions = [] } = options;
+
+  const nodeInteractions = [].concat(interactions, options.nodeInteractions || []);
+  const edgeInteractions = [].concat(interactions, options.edgeInteractions || []);
+
+  const nodeView = chart.views[0];
+  const edgeView = chart.views[1];
+
+  nodeInteractions.forEach((i) => {
+    if (i?.enable === false) {
+      nodeView.removeInteraction(i.type);
+    } else {
+      nodeView.interaction(i.type, i.cfg || {});
+    }
+  });
+
+  edgeInteractions.forEach((i) => {
+    if (i?.enable === false) {
+      edgeView.removeInteraction(i.type);
+    } else {
+      edgeView.interaction(i.type, i.cfg || {});
+    }
+  });
+
+  return params;
+}
+
 /**
  * 图适配器
  * @param chart

src/plots/sankey/types.ts

@@ -115,4 +115,12 @@ export interface SankeyOptions extends Omit<Options, 'data' | 'xField' | 'yField
    * 节点位置是否可以拖拽，默认为 false
    */
   readonly nodeDraggable?: boolean;
+  /**
+   * 边交互
+   */
+  readonly edgeInteractions?: Options['interactions'];
+  /**
+   * 节点交互
+   */
+  readonly nodeInteractions?: Options['interactions'];
 }