feat: title plugin (#7294)

* feat: wip title plugin

* feat: title plugin 写法优化，及文档完善

* test: add title plugin test

* fix: title plugin cr fix

---------

Co-authored-by: hustcc <i@hust.cc>

Author: XiaoMing-xmg666

packages/g6/__tests__/demos/index.ts

@@ -143,6 +143,7 @@ export { pluginMinimap } from './plugin-minimap';
 export { pluginMiniMapEdgeArrow } from './plugin-minimap-edge-arrow';
 export { pluginSnapline } from './plugin-snapline';
 export { pluginTimebar } from './plugin-timebar';
+export { pluginTitle } from './plugin-title';
 export { pluginToolbarBuildIn } from './plugin-toolbar-build-in';
 export { pluginToolbarIconfont } from './plugin-toolbar-iconfont';
 export { pluginTooltip } from './plugin-tooltip';

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

@@ -0,0 +1,51 @@
+import { Graph } from '@antv/g6';
+
+export const pluginTitle: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: { nodes: Array.from({ length: 12 }).map((_, i) => ({ id: `node${i}` })) },
+    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
+    plugins: [
+      {
+        key: 'title',
+        type: 'title',
+
+        align: 'center',
+        spacing: 4,
+        size: 60,
+
+        title: '这是一个标题这是一个标题',
+        titleFontSize: 28,
+        titleFontFamily: 'sans-serif',
+        titleFontWeight: 600,
+        titleFill: '#fff',
+        titleFillOpacity: 1,
+        titleStroke: '#000',
+        titleLineWidth: 2,
+        titleStrokeOpacity: 1,
+
+        subtitle: '这是一个副标',
+        subtitleFontSize: 16,
+        subtitleFontFamily: 'Arial',
+        subtitleFontWeight: 300,
+        subtitleFill: '#2989FF',
+        subtitleFillOpacity: 1,
+        subtitleStroke: '#000',
+        subtitleLineWidth: 1,
+        subtitleStrokeOpacity: 0.5,
+      },
+    ],
+    node: {
+      palette: 'spectral',
+      style: { labelText: '你好' },
+    },
+    layout: {
+      type: 'circular',
+    },
+    autoFit: 'view',
+  });
+
+  await graph.render();
+
+  return graph;
+};

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

@@ -0,0 +1,43 @@
+import type { Graph, Label, Title } from '@/src';
+import { pluginTitle } from '@@/demos';
+import { createDemoGraph } from '../../utils';
+
+describe('plugin title', () => {
+  let graph: Graph;
+  let titlePlugin: Title;
+
+  const executeTest = () => {
+    expect(typeof titlePlugin).toBe('object');
+
+    const [width] = graph.getSize();
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const [titleLabel, subtitleLabel] = titlePlugin.canvas.getRoot().childNodes;
+
+    const titleAttr = (titleLabel as Label).attributes;
+    const titleX = titleAttr.x;
+    expect(titleX).toBe(width / 2);
+
+    const subtitleAttr = (subtitleLabel as Label).attributes;
+    const subtitleX = subtitleAttr.x;
+    expect(subtitleX).toBe(width / 2);
+
+    expect(titleAttr.text).toBe('这是一个标题这是一个标题');
+    expect(subtitleAttr.text).toBe('这是一个副标');
+
+    expect(titleAttr.fontSize).toBe(28);
+    expect(subtitleAttr.fill).toBe('#2989FF');
+  };
+
+  beforeAll(async () => {
+    graph = await createDemoGraph(pluginTitle);
+    titlePlugin = graph.getPluginInstance('title');
+  });
+
+  it('title', executeTest);
+
+  afterAll(() => {
+    graph.destroy();
+  });
+});

packages/g6/src/exports.ts

@@ -92,6 +92,7 @@ export {
   Minimap,
   Snapline,
   Timebar,
+  Title,
   Toolbar,
   Tooltip,
   Watermark,

packages/g6/src/plugins/index.ts

@@ -14,6 +14,7 @@ export { Legend } from './legend';
 export { Minimap } from './minimap';
 export { Snapline } from './snapline';
 export { Timebar } from './timebar';
+export { Title } from './title';
 export { Toolbar } from './toolbar';
 export { Tooltip } from './tooltip';
 export { Watermark } from './watermark';
@@ -34,6 +35,7 @@ export type { LegendOptions } from './legend';
 export type { MinimapOptions } from './minimap';
 export type { SnaplineOptions } from './snapline';
 export type { TimebarOptions } from './timebar';
+export type { SubTitleStyle, TitleOptions, TitleStyle } from './title';
 export type { ToolbarOptions } from './toolbar';
 export type { TooltipOptions } from './tooltip';
 export type { WatermarkOptions } from './watermark';