From a82674b6652d9c08a8e4c3e0e8c708142c70c21b Mon Sep 17 00:00:00 2001 From: Allen Date: Mon, 10 Feb 2025 19:29:41 +0800 Subject: [PATCH] feat: add parameter config support to layout function (#6762) * feat: add parameter config support to layout function * chore: optimize default options of layout --- .../snapshots/runtime/layout/empty.svg | 538 ++++++++++++++++++ .../snapshots/runtime/layout/extra.svg | 538 ++++++++++++++++++ .../snapshots/runtime/layout/layout-array.svg | 538 ++++++++++++++++++ .../snapshots/runtime/layout/other-type.svg | 538 ++++++++++++++++++ .../snapshots/runtime/layout/recover.svg | 538 ++++++++++++++++++ .../g6/__tests__/unit/runtime/layout.spec.ts | 42 ++ packages/g6/src/runtime/graph.ts | 5 +- packages/g6/src/runtime/layout.ts | 9 +- .../examples/layout/mechanism/demo/switch.js | 3 +- 9 files changed, 2741 insertions(+), 8 deletions(-) create mode 100644 packages/g6/__tests__/snapshots/runtime/layout/empty.svg create mode 100644 packages/g6/__tests__/snapshots/runtime/layout/extra.svg create mode 100644 packages/g6/__tests__/snapshots/runtime/layout/layout-array.svg create mode 100644 packages/g6/__tests__/snapshots/runtime/layout/other-type.svg create mode 100644 packages/g6/__tests__/snapshots/runtime/layout/recover.svg create mode 100644 packages/g6/__tests__/unit/runtime/layout.spec.ts diff --git a/packages/g6/__tests__/snapshots/runtime/layout/empty.svg b/packages/g6/__tests__/snapshots/runtime/layout/empty.svg new file mode 100644 index 00000000000..5f58ea9b14e --- /dev/null +++ b/packages/g6/__tests__/snapshots/runtime/layout/empty.svg @@ -0,0 +1,538 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/g6/__tests__/snapshots/runtime/layout/extra.svg b/packages/g6/__tests__/snapshots/runtime/layout/extra.svg new file mode 100644 index 00000000000..73f0ffcf3a9 --- /dev/null +++ b/packages/g6/__tests__/snapshots/runtime/layout/extra.svg @@ -0,0 +1,538 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/g6/__tests__/snapshots/runtime/layout/layout-array.svg b/packages/g6/__tests__/snapshots/runtime/layout/layout-array.svg new file mode 100644 index 00000000000..5f58ea9b14e --- /dev/null +++ b/packages/g6/__tests__/snapshots/runtime/layout/layout-array.svg @@ -0,0 +1,538 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/g6/__tests__/snapshots/runtime/layout/other-type.svg b/packages/g6/__tests__/snapshots/runtime/layout/other-type.svg new file mode 100644 index 00000000000..1a279cf5db5 --- /dev/null +++ b/packages/g6/__tests__/snapshots/runtime/layout/other-type.svg @@ -0,0 +1,538 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/g6/__tests__/snapshots/runtime/layout/recover.svg b/packages/g6/__tests__/snapshots/runtime/layout/recover.svg new file mode 100644 index 00000000000..5f58ea9b14e --- /dev/null +++ b/packages/g6/__tests__/snapshots/runtime/layout/recover.svg @@ -0,0 +1,538 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/g6/__tests__/unit/runtime/layout.spec.ts b/packages/g6/__tests__/unit/runtime/layout.spec.ts new file mode 100644 index 00000000000..ceeb2cc08c3 --- /dev/null +++ b/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(); + }); +}); diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts index 63082754045..1493402064e 100644 --- a/packages/g6/src/runtime/graph.ts +++ b/packages/g6/src/runtime/graph.ts @@ -1173,10 +1173,11 @@ export class Graph extends EventEmitter { * 执行布局 * * Execute layout + * @param layoutOptions - 布局配置项 | Layout options * @apiCategory layout */ - public async layout() { - await this.context.layout!.postLayout(); + public async layout(layoutOptions?: LayoutOptions) { + await this.context.layout!.postLayout(layoutOptions); } /** diff --git a/packages/g6/src/runtime/layout.ts b/packages/g6/src/runtime/layout.ts index 1826749bc51..5fd8f805a26 100644 --- a/packages/g6/src/runtime/layout.ts +++ b/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 { * 后布局，即在完成绘制后执行布局 * * Post layout, that is, perform layout after drawing + * @param layoutOptions - 布局配置项 | 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) { diff --git a/packages/site/examples/layout/mechanism/demo/switch.js b/packages/site/examples/layout/mechanism/demo/switch.js index e3a448fc0a7..5e0a3115316 100644 --- a/packages/site/examples/layout/mechanism/demo/switch.js +++ b/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]); }); }); });