From 97a79dc04fec7eb94f57c3739cedf52e6935eb21 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 14:42:58 +0800 Subject: [PATCH] feat: add initialized event #301 --- packages/vtable/examples/list/list-100w.ts | 3 +++ .../examples/pivot-chart/pivot-chart-event.ts | 6 +++--- packages/vtable/src/ListTable.ts | 14 ++++++++------ packages/vtable/src/core/BaseTable.ts | 8 +++++++- packages/vtable/src/core/TABLE_EVENT_TYPE.ts | 11 ++++++++--- packages/vtable/src/scenegraph/scenegraph.ts | 3 ++- packages/vtable/src/ts-types/events.ts | 5 +++-- 7 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/vtable/examples/list/list-100w.ts b/packages/vtable/examples/list/list-100w.ts index ef9a1449a..ed850d3f1 100644 --- a/packages/vtable/examples/list/list-100w.ts +++ b/packages/vtable/examples/list/list-100w.ts @@ -176,5 +176,8 @@ export function createTable() { autoWrapText: true }; const tableInstance = new VTable.ListTable(option); + tableInstance.on('initialized', args => { + console.log('initialized'); + }); window.tableInstance = tableInstance; } diff --git a/packages/vtable/examples/pivot-chart/pivot-chart-event.ts b/packages/vtable/examples/pivot-chart/pivot-chart-event.ts index 2244f1764..3b7f7e56d 100644 --- a/packages/vtable/examples/pivot-chart/pivot-chart-event.ts +++ b/packages/vtable/examples/pivot-chart/pivot-chart-event.ts @@ -762,13 +762,13 @@ export function createTable() { window.tableInstance = tableInstance; bindDebugTool(tableInstance.scenegraph.stage, {}); - const { SCROLL, AFTER_STAGE_RENDER } = VTable.PivotChart.EVENT_TYPE; + const { SCROLL, AFTER_RENDER } = VTable.PivotChart.EVENT_TYPE; tableInstance.on(SCROLL, e => { console.log('scroll', e); }); - tableInstance.on(AFTER_STAGE_RENDER, () => { - console.log('render'); + tableInstance.on(AFTER_RENDER, () => { + console.log('AFTER_RENDER'); }); const targetData = { diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 9d13d25a1..06b116643 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -72,6 +72,10 @@ export class ListTable extends BaseTable implements ListTableAPI { internalProps.title = new Title(options.title, this); this.scenegraph.resize(); } + //为了确保用户监听得到这个事件 这里做了异步 确保vtable实例已经初始化完成 + setTimeout(() => { + this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null); + }, 0); } isListTable(): true { return true; @@ -112,7 +116,7 @@ export class ListTable extends BaseTable implements ListTableAPI { this.headerStyleCache = new Map(); this.bodyStyleCache = new Map(); this.scenegraph.createSceneGraph(); - this.render(); + this.renderAsync(); } /** *@deprecated 请使用columns @@ -128,9 +132,7 @@ export class ListTable extends BaseTable implements ListTableAPI { this.options.header = header; this.refreshHeader(); //需要异步等待其他事情都完成后再绘制 - setTimeout(() => { - this.render(); - }, 0); + this.renderAsync(); } /** * Get the transpose. @@ -154,7 +156,7 @@ export class ListTable extends BaseTable implements ListTableAPI { // 转置后为行布局，列宽只支持依据该列所有内容自适应宽度 this._resetFrozenColCount(); - this.render(); + this.renderAsync(); } } /** 获取单元格展示值 */ @@ -283,7 +285,7 @@ export class ListTable extends BaseTable implements ListTableAPI { this.refreshRowColCount(); // 生成单元格场景树 this.scenegraph.createSceneGraph(); - this.render(); + this.renderAsync(); } } /** @private */ diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index f1b3f1230..c72b70ff8 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -1534,11 +1534,17 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { } /** - * 重绘表格 + * 重绘表格(同步绘制) */ render(): void { this.scenegraph.renderSceneGraph(); } + /** + * 异步重绘表格 + */ + renderAsync(): void { + this.scenegraph.updateNextFrame(); + } /** * 转换成视觉相对table左上角的坐标 如滚动超出表格上方 y将为负值 * @param absoluteRect diff --git a/packages/vtable/src/core/TABLE_EVENT_TYPE.ts b/packages/vtable/src/core/TABLE_EVENT_TYPE.ts index 8a6a0aeeb..0c0e0a1d5 100644 --- a/packages/vtable/src/core/TABLE_EVENT_TYPE.ts +++ b/packages/vtable/src/core/TABLE_EVENT_TYPE.ts @@ -116,8 +116,12 @@ export interface TableEvents { MOUSEENTER_AXIS: 'mouseenter_axis'; MOUSELEAVE_AXIS: 'mouseleave_axis'; - - AFTER_STAGE_RENDER: 'after_stage_render'; + //#region lifecircle + /** 每次渲染完成触发 */ + AFTER_RENDER: 'after_render'; + /** 表格实例初始化完成 */ + INITIALIZED: 'initialized'; + //#endregion } /** * Table event types @@ -163,5 +167,6 @@ export const TABLE_EVENT_TYPE: TableEvents = { MOUSEENTER_AXIS: 'mouseenter_axis', MOUSELEAVE_AXIS: 'mouseleave_axis', - AFTER_STAGE_RENDER: 'after_stage_render' + AFTER_RENDER: 'after_render', + INITIALIZED: 'initialized' } as TableEvents; diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index a1ddfe4f7..9f83c5a4b 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -144,7 +144,8 @@ export class Scenegraph { enableLayout: true, pluginList: table.isPivotChart() ? ['poptipForText'] : undefined, afterRender: () => { - this.table.fireListeners('after_stage_render', null); + this.table.fireListeners('after_render', null); + // console.trace('after_render'); } // autoRender: true }); diff --git a/packages/vtable/src/ts-types/events.ts b/packages/vtable/src/ts-types/events.ts index 798b637e8..baf748da6 100644 --- a/packages/vtable/src/ts-types/events.ts +++ b/packages/vtable/src/ts-types/events.ts @@ -154,7 +154,8 @@ export interface TableEventHandlersEventArgumentMap { mouseenter_axis: MousePointerCellEvent & { axisPosition: 'left' | 'right' | 'top' | 'bottom' }; mouseleave_axis: MousePointerCellEvent & { axisPosition: 'left' | 'right' | 'top' | 'bottom' }; - after_stage_render: null; + after_render: null; + initialized: null; } export interface DrillMenuEventInfo { dimensionKey: string | number; @@ -216,5 +217,5 @@ export interface TableEventHandlersReturnMap { mouseenter_axis: void; mouseleave_axis: void; - after_stage_render: void; + after_render: void; }