feat: add initialized event #301

VisActor · Oct 19, 2023 · 97a79dc · 97a79dc
1 parent fdc82d6
commit 97a79dc
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }