feat: add parameter config support to layout function (#6762)

* feat: add parameter config support to layout function

* chore: optimize default options of layout

packages/g6/__tests__/unit/runtime/layout.spec.ts

@@ -0,0 +1,42 @@
+import { layoutCircularBasic } from '@@/demos';
+import { createDemoGraph } from '@@/utils';
+
+describe('layout options', () => {
+  it('layoutEmptyOptions', async () => {
+    const graph = await createDemoGraph(layoutCircularBasic);
+    await expect(graph).toMatchSnapshot(__filename, 'empty');
+    graph.destroy();
+  });
+
+  it('layoutExtraOptions', async () => {
+    const graph = await createDemoGraph(layoutCircularBasic);
+    await graph.layout({
+      type: 'circular',
+      radius: 1000,
+    });
+    await expect(graph).toMatchSnapshot(__filename, 'extra');
+    graph.destroy();
+  });
+
+  it('layoutOtherTypeOptionsAndRecover', async () => {
+    const graph = await createDemoGraph(layoutCircularBasic);
+    await graph.layout({
+      type: 'concentric',
+    });
+    await expect(graph).toMatchSnapshot(__filename, 'other-type');
+    await graph.layout();
+    await expect(graph).toMatchSnapshot(__filename, 'recover');
+    graph.destroy();
+  });
+
+  it('layoutArrayOptions', async () => {
+    const graph = await createDemoGraph(layoutCircularBasic);
+    await graph.layout(
+      Array.from({ length: 4 }, () => ({
+        type: 'circular',
+      })),
+    );
+    await expect(graph).toMatchSnapshot(__filename, 'layout-array');
+    graph.destroy();
+  });
+});

packages/g6/src/runtime/graph.ts

@@ -1173,10 +1173,11 @@ export class Graph extends EventEmitter {
    * <zh/> 执行布局
    *
    * <en/> Execute layout
+   * @param layoutOptions - <zh/> 布局配置项 | <en/> Layout options
    * @apiCategory layout
    */
-  public async layout() {
-    await this.context.layout!.postLayout();
+  public async layout(layoutOptions?: LayoutOptions) {
+    await this.context.layout!.postLayout(layoutOptions);
   }
 
   /**

packages/g6/src/runtime/layout.ts

@@ -6,7 +6,7 @@ import { COMBO_KEY, GraphEvent, TREE_KEY } from '../constants';
 import { BaseLayout } from '../layouts';
 import type { AntVLayout } from '../layouts/types';
 import { getExtension } from '../registry/get';
-import type { GraphData, NodeData } from '../spec';
+import type { GraphData, LayoutOptions, NodeData } from '../spec';
 import type { STDLayoutOptions } from '../spec/layout';
 import type { DrawData } from '../transforms/types';
 import type { AdaptiveLayout, ID, TreeData } from '../types';
@@ -93,10 +93,11 @@ export class LayoutController {
    * <zh/> 后布局，即在完成绘制后执行布局
    *
    * <en/> Post layout, that is, perform layout after drawing
+   * @param layoutOptions - <zh/> 布局配置项 | <en/> Layout options
    */
-  public async postLayout() {
-    if (!this.options) return;
-    const pipeline = Array.isArray(this.options) ? this.options : [this.options];
+  public async postLayout(layoutOptions: LayoutOptions | undefined = this.options) {
+    if (!layoutOptions) return;
+    const pipeline = Array.isArray(layoutOptions) ? layoutOptions : [layoutOptions];
     const { graph } = this.context;
     emit(graph, new GraphLifeCycleEvent(GraphEvent.BEFORE_LAYOUT, { type: 'post' }));
     for (const options of pipeline) {

packages/site/examples/layout/mechanism/demo/switch.js

@@ -28,8 +28,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
             mds: { type: 'mds', linkDistance: 100 },
           };
           graph.stopLayout();
-          graph.setLayout(options[layout]);
-          graph.layout();
+          graph.layout(options[layout]);
         });
     });
   });