diff --git a/packages/x6/src/renderer/scheduler.ts b/packages/x6/src/renderer/scheduler.ts index bf5f340189e..47f060e94dc 100644 --- a/packages/x6/src/renderer/scheduler.ts +++ b/packages/x6/src/renderer/scheduler.ts @@ -54,7 +54,8 @@ export class Scheduler extends Disposable { this.queue.clearJobs() this.removeZPivots() this.resetViews() - this.renderViews(this.model.getCells(), options) + const cells = this.model.getCells() + this.renderViews(cells, { ...options, queue: cells.map((cell) => cell.id) }) } protected onCellAdded({ cell, options }: Model.EventArgs['cell:added']) { @@ -116,6 +117,16 @@ export class Scheduler extends Disposable { priority, cb: () => { this.renderViewInArea(view, flag, options) + const queue = options.queue + if (queue) { + const index = queue.indexOf(view.cell.id) + if (index >= 0) { + queue.splice(index, 1) + } + if (queue.length === 0) { + this.graph.trigger('render:done') + } + } }, }) @@ -537,5 +548,6 @@ export namespace Scheduler { export interface EventArgs { 'view:mounted': { view: CellView } 'view:unmounted': { view: CellView } + 'render:done': null } } diff --git a/sites/x6-sites/docs/tutorial/basic/events.zh.md b/sites/x6-sites/docs/tutorial/basic/events.zh.md index 88628ce166c..1d86d366849 100644 --- a/sites/x6-sites/docs/tutorial/basic/events.zh.md +++ b/sites/x6-sites/docs/tutorial/basic/events.zh.md @@ -404,3 +404,13 @@ graph.on('edge:transition:finish', (args: Animation.CallbackArgs) => {}) graph.on('view:mounted', ({ view }) => {}) graph.on('view:unmounted', ({ view }) => {}) ``` + +大家还有经常需要在调用 `fromJSON` 或者 `resetCells` 后监听画布完成渲染事件,这时候可以使用 `render:done` 事件来监听。 + +```typescript +graph.on('render:done', () => { + // pass +}) + +graph.fromJSON([...]) +```