From e833c44c5dfc1d6676fcdc8fe52749652d2199de Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 26 Jun 2024 16:19:58 +0800 Subject: [PATCH 1/2] feat(layout): pipeline dispatch event in each step layout --- .vscode/settings.json | 2 + .../__tests__/unit/layouts/pipeline.spec.ts | 47 +++++++++++++++++++ packages/g6/src/constants/events/graph.ts | 12 +++++ packages/g6/src/runtime/layout.ts | 7 ++- packages/g6/src/utils/event/events.ts | 2 + 5 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 packages/g6/__tests__/unit/layouts/pipeline.spec.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 066dfd2165..968fcbd085 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,6 +11,7 @@ "afterelementtranslate", "afterelementupdate", "afterlayout", + "afterlayoutprocedure", "afterrender", "aftersizechange", "aftertransform", @@ -29,6 +30,7 @@ "beforeelementtranslate", "beforeelementupdate", "beforelayout", + "beforelayoutprocedure", "beforerender", "beforesizechange", "beforetransform", diff --git a/packages/g6/__tests__/unit/layouts/pipeline.spec.ts b/packages/g6/__tests__/unit/layouts/pipeline.spec.ts new file mode 100644 index 0000000000..225a3d3fe2 --- /dev/null +++ b/packages/g6/__tests__/unit/layouts/pipeline.spec.ts @@ -0,0 +1,47 @@ +import { GraphEvent } from '@/src'; +import { createGraph } from '@@/utils'; + +describe('pipeline', () => { + it('event', async () => { + const graph = createGraph({ + data: { + nodes: new Array(10).fill(null).map((_, i) => ({ id: `${i}` })), + }, + layout: [ + { + type: 'force', + }, + { + type: 'd3-force', + }, + { + type: 'grid', + }, + ], + }); + + const before = jest.fn(); + const after = jest.fn(); + + graph.on(GraphEvent.BEFORE_LAYOUT_PROCEDURE, (e) => { + before(e); + }); + + graph.on(GraphEvent.AFTER_LAYOUT_PROCEDURE, (e) => { + after(e); + }); + + await graph.render(); + + expect(before).toHaveBeenCalledTimes(3); + expect(after).toHaveBeenCalledTimes(3); + + expect(before.mock.calls[0][0].data.options.type).toBe('force'); + expect(before.mock.calls[1][0].data.options.type).toBe('d3-force'); + expect(before.mock.calls[2][0].data.options.type).toBe('grid'); + + expect(after.mock.calls[0][0].data.options.type).toBe('force'); + expect(after.mock.calls[1][0].data.options.type).toBe('d3-force'); + expect(after.mock.calls[2][0].data.options.type).toBe('grid'); + }); +}); diff --git a/packages/g6/src/constants/events/graph.ts b/packages/g6/src/constants/events/graph.ts index fb9edab860..120423f66a 100644 --- a/packages/g6/src/constants/events/graph.ts +++ b/packages/g6/src/constants/events/graph.ts @@ -119,6 +119,18 @@ export enum GraphEvent { * After layout */ AFTER_LAYOUT = 'afterlayout', + /** + * 布局过程之前，用于流水线布局过程获取当前执行的布局 + * + * Before the layout process, used to get the current layout being executed in the pipeline layout process + */ + BEFORE_LAYOUT_PROCEDURE = 'beforelayoutprocedure', + /** + * 布局过程之后，用于流水线布局过程获取当前执行的布局 + * + * After the layout process, used to get the current layout being executed in the pipeline layout process + */ + AFTER_LAYOUT_PROCEDURE = 'afterlayoutprocedure', /** * 可视区域变化之前 * diff --git a/packages/g6/src/runtime/layout.ts b/packages/g6/src/runtime/layout.ts index 21532e5553..75abc055e4 100644 --- a/packages/g6/src/runtime/layout.ts +++ b/packages/g6/src/runtime/layout.ts @@ -56,9 +56,12 @@ export class LayoutController { emit(graph, new GraphLifeCycleEvent(GraphEvent.BEFORE_LAYOUT)); for (const options of pipeline) { const index = pipeline.indexOf(options); - const data = this.getLayoutData(options); - const result = await this.stepLayout(data, { ...this.presetOptions, ...options }, index); + const opts = { ...this.presetOptions, ...options }; + + emit(graph, new GraphLifeCycleEvent(GraphEvent.BEFORE_LAYOUT_PROCEDURE, { options: opts, index })); + const result = await this.stepLayout(data, opts, index); + emit(graph, new GraphLifeCycleEvent(GraphEvent.AFTER_LAYOUT_PROCEDURE, { options: opts, index })); if (!options.animation) { this.updateElementPosition(result, false); diff --git a/packages/g6/src/utils/event/events.ts b/packages/g6/src/utils/event/events.ts index 7b92158176..f21ad9acc1 100644 --- a/packages/g6/src/utils/event/events.ts +++ b/packages/g6/src/utils/event/events.ts @@ -23,6 +23,8 @@ export class GraphLifeCycleEvent extends BaseEvent implements IGraphLifeCycleEve | GraphEvent.AFTER_DRAW | GraphEvent.BEFORE_LAYOUT | GraphEvent.AFTER_LAYOUT + | GraphEvent.BEFORE_LAYOUT_PROCEDURE + | GraphEvent.AFTER_LAYOUT_PROCEDURE | GraphEvent.BEFORE_SIZE_CHANGE | GraphEvent.AFTER_SIZE_CHANGE | GraphEvent.BATCH_START From 49168869c90b50ecfdbf785023f3cab9252cf9e5 Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 3 Jul 2024 10:50:26 +0800 Subject: [PATCH 2/2] refactor: rename to stage layout --- .vscode/settings.json | 4 ++-- packages/g6/__tests__/unit/layouts/pipeline.spec.ts | 4 ++-- packages/g6/src/constants/events/graph.ts | 4 ++-- packages/g6/src/runtime/layout.ts | 4 ++-- packages/g6/src/utils/event/events.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 968fcbd085..2814cb710b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,7 +11,7 @@ "afterelementtranslate", "afterelementupdate", "afterlayout", - "afterlayoutprocedure", + "afterstagelayout", "afterrender", "aftersizechange", "aftertransform", @@ -30,7 +30,7 @@ "beforeelementtranslate", "beforeelementupdate", "beforelayout", - "beforelayoutprocedure", + "beforestagelayout", "beforerender", "beforesizechange", "beforetransform", diff --git a/packages/g6/__tests__/unit/layouts/pipeline.spec.ts b/packages/g6/__tests__/unit/layouts/pipeline.spec.ts index 225a3d3fe2..5ecbf48255 100644 --- a/packages/g6/__tests__/unit/layouts/pipeline.spec.ts +++ b/packages/g6/__tests__/unit/layouts/pipeline.spec.ts @@ -23,11 +23,11 @@ describe('pipeline', () => { const before = jest.fn(); const after = jest.fn(); - graph.on(GraphEvent.BEFORE_LAYOUT_PROCEDURE, (e) => { + graph.on(GraphEvent.BEFORE_STAGE_LAYOUT, (e) => { before(e); }); - graph.on(GraphEvent.AFTER_LAYOUT_PROCEDURE, (e) => { + graph.on(GraphEvent.AFTER_STAGE_LAYOUT, (e) => { after(e); }); diff --git a/packages/g6/src/constants/events/graph.ts b/packages/g6/src/constants/events/graph.ts index 120423f66a..ee385f0b96 100644 --- a/packages/g6/src/constants/events/graph.ts +++ b/packages/g6/src/constants/events/graph.ts @@ -124,13 +124,13 @@ export enum GraphEvent { * * Before the layout process, used to get the current layout being executed in the pipeline layout process */ - BEFORE_LAYOUT_PROCEDURE = 'beforelayoutprocedure', + BEFORE_STAGE_LAYOUT = 'beforestagelayout', /** * 布局过程之后，用于流水线布局过程获取当前执行的布局 * * After the layout process, used to get the current layout being executed in the pipeline layout process */ - AFTER_LAYOUT_PROCEDURE = 'afterlayoutprocedure', + AFTER_STAGE_LAYOUT = 'afterstagelayout', /** * 可视区域变化之前 * diff --git a/packages/g6/src/runtime/layout.ts b/packages/g6/src/runtime/layout.ts index 75abc055e4..33776cb472 100644 --- a/packages/g6/src/runtime/layout.ts +++ b/packages/g6/src/runtime/layout.ts @@ -59,9 +59,9 @@ export class LayoutController { const data = this.getLayoutData(options); const opts = { ...this.presetOptions, ...options }; - emit(graph, new GraphLifeCycleEvent(GraphEvent.BEFORE_LAYOUT_PROCEDURE, { options: opts, index })); + emit(graph, new GraphLifeCycleEvent(GraphEvent.BEFORE_STAGE_LAYOUT, { options: opts, index })); const result = await this.stepLayout(data, opts, index); - emit(graph, new GraphLifeCycleEvent(GraphEvent.AFTER_LAYOUT_PROCEDURE, { options: opts, index })); + emit(graph, new GraphLifeCycleEvent(GraphEvent.AFTER_STAGE_LAYOUT, { options: opts, index })); if (!options.animation) { this.updateElementPosition(result, false); diff --git a/packages/g6/src/utils/event/events.ts b/packages/g6/src/utils/event/events.ts index f21ad9acc1..376494b35b 100644 --- a/packages/g6/src/utils/event/events.ts +++ b/packages/g6/src/utils/event/events.ts @@ -23,8 +23,8 @@ export class GraphLifeCycleEvent extends BaseEvent implements IGraphLifeCycleEve | GraphEvent.AFTER_DRAW | GraphEvent.BEFORE_LAYOUT | GraphEvent.AFTER_LAYOUT - | GraphEvent.BEFORE_LAYOUT_PROCEDURE - | GraphEvent.AFTER_LAYOUT_PROCEDURE + | GraphEvent.BEFORE_STAGE_LAYOUT + | GraphEvent.AFTER_STAGE_LAYOUT | GraphEvent.BEFORE_SIZE_CHANGE | GraphEvent.AFTER_SIZE_CHANGE | GraphEvent.BATCH_START