feat: plugin legend (#5593)

* chore: rebase v5

* fix: resolve conversation

* ci: update snapshots

* refactor(plugin): update legend case and snapshots

---------

Co-authored-by: Aaron <[email protected]>

packages/g6/__tests__/demos/index.ts

@@ -80,6 +80,7 @@ export * from './layout-radial-prevent-overlap-unstrict';
 export * from './layout-radial-sort';
 export * from './plugin-contextmenu';
 export * from './plugin-grid-line';
+export * from './plugin-legend';
 export * from './plugin-toolbar-build-in';
 export * from './plugin-toolbar-iconfont';
 export * from './plugin-tooltip';

packages/g6/__tests__/demos/plugin-legend.ts

@@ -0,0 +1,79 @@
+import { Graph } from '@/src';
+import data from '@@/dataset/cluster.json';
+import { isObject } from '@antv/util';
+
+export const pluginLegend: TestCase = async (context) => {
+  const { nodes, edges } = data;
+  const findCluster = (id: string) => {
+    return nodes.find(({ id: node }) => node === id)?.data.cluster;
+  };
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes,
+      edges: edges.map(({ source, target }) => {
+        return {
+          source,
+          target,
+          id: `${source}-${target}`,
+          data: {
+            cluster: `${findCluster(source)}-${findCluster(target)}`,
+          },
+        };
+      }),
+    },
+    layout: { type: 'd3force' },
+    behaviors: ['drag-canvas', 'drag-element'],
+    node: {
+      style: {
+        labelText: (d) => d.id,
+        lineWidth: 0,
+        type: (item: any) => {
+          if (item.data.cluster === 'a') return 'diamond';
+          if (item.data.cluster === 'b') return 'rect';
+          if (item.data.cluster === 'c') return 'triangle';
+          return 'circle';
+        },
+        color: (item: any) => {
+          if (item.data.cluster === 'a') return 'red';
+          if (item.data.cluster === 'b') return 'blue';
+          if (item.data.cluster === 'c') return 'green';
+          return '#99add1';
+        },
+      },
+    },
+    plugins: [
+      {
+        key: 'legend',
+        type: 'legend',
+        titleText: 'Cluster Legend',
+        nodeField: 'cluster',
+        edgeField: 'cluster',
+        trigger: 'click',
+      },
+    ],
+  });
+
+  await graph.render();
+
+  pluginLegend.form = (panel) => {
+    const config = {
+      trigger: 'hover',
+    };
+    return [
+      panel
+        .add(config, 'trigger', ['hover', 'click'])
+        .name('Change Trigger Method')
+        .onChange((trigger: string) => {
+          graph.setPlugins((plugins) =>
+            plugins.map((plugin) => {
+              if (isObject(plugin) && plugin.type === 'legend') return { ...plugin, trigger };
+              return plugin;
+            }),
+          );
+        }),
+    ];
+  };
+
+  return graph;
+};

packages/g6/__tests__/unit/plugins/legend.spec.ts

@@ -0,0 +1,67 @@
+import { Legend } from '@/src/plugins/legend';
+import { pluginLegend } from '@@/demos';
+import { createDemoGraph } from '@@/utils';
+
+const mockEvent: any = {
+  __data__: {
+    id: 'node__0',
+    index: 0,
+    style: {
+      layout: 'flex',
+      labelText: 'a',
+      markerLineWidth: 3,
+      marker: 'diamond',
+      markerStroke: '#000000',
+      markerFill: 'red',
+      spacing: 4,
+      markerSize: 16,
+      labelFontSize: 16,
+      markerOpacity: 1,
+      labelOpacity: 1,
+    },
+  },
+};
+
+describe('plugin legend', () => {
+  it('normal', async () => {
+    const graph = await createDemoGraph(pluginLegend);
+    await expect(graph).toMatchSnapshot(__filename, 'normal');
+    graph.destroy();
+  });
+
+  it('click', async () => {
+    const graph = await createDemoGraph(pluginLegend);
+
+    const legend = graph.getPluginInstance<Legend>('legend');
+
+    legend.click(mockEvent);
+    await expect(graph).toMatchSnapshot(__filename, 'click');
+    legend.click(mockEvent);
+    await expect(graph).toMatchSnapshot(__filename, 'click-again');
+    graph.destroy();
+  });
+
+  it('update trigger to hover', async () => {
+    const graph = await createDemoGraph(pluginLegend);
+    graph.setPlugins((plugins) =>
+      plugins.map((plugin) => {
+        if (typeof plugin === 'object') {
+          return {
+            ...plugin,
+            trigger: 'hover',
+            position: 'top',
+          };
+        }
+        return plugin;
+      }),
+    );
+
+    const legend = graph.getPluginInstance<Legend>('legend');
+
+    legend.mouseenter(mockEvent);
+    await expect(graph).toMatchSnapshot(__filename, 'mouseenter');
+    legend.mouseleave(mockEvent);
+    await expect(graph).toMatchSnapshot(__filename, 'mouseleave');
+    graph.destroy();
+  });
+});

packages/g6/package.json

@@ -55,7 +55,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@antv/component": "^1.0.2",
+    "@antv/component": "^1.0.3",
     "@antv/event-emitter": "latest",
     "@antv/g": "^5.18.25",
     "@antv/g-canvas": "^1.11.27",

packages/g6/src/plugins/index.ts

@@ -1,13 +1,15 @@
 export { BasePlugin } from './base-plugin';
 export { Contextmenu } from './contextmenu';
 export { GridLine } from './grid-line';
+export { Legend } from './legend';
 export { Toolbar } from './toolbar';
 export { Tooltip } from './tooltip';
 export { Watermark } from './watermark';
 
 export type { BasePluginOptions } from './base-plugin';
 export type { ContextmenuOptions } from './contextmenu';
 export type { GridLineOptions } from './grid-line';
+export type { LegendOptions } from './legend';
 export type { ToolbarOptions } from './toolbar';
 export type { TooltipOptions } from './tooltip';
 export type { WatermarkOptions } from './watermark';