240 feature update single option item

common/changes/@visactor/vtable/240-feature-update-single-option-item_2023-08-24-10-38.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add api for updateAutoWrapText widthMode heightMode #240\n\n",
+      "type": "patch",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

common/changes/@visactor/vtable/240-feature-update-single-option-item_2023-08-25-08-35.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "refactor: optimize performance when window resize Compute RowHeight ColWidth  #249\n\n",
+      "type": "patch",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

packages/vtable/examples/list/list.ts

@@ -74,6 +74,9 @@ export function createTable() {
     container: document.getElementById(CONTAINER_ID),
     records,
     columns
+    // autoWrapText: true,
+    // heightMode: 'autoHeight',
+    // widthMode: 'adaptive'
   };
   const tableInstance = new VTable.ListTable(option);
   (window as any).tableInstance = tableInstance;

packages/vtable/examples/menu.ts

@@ -474,6 +474,27 @@ export const menus = [
       }
     ]
   },
+  {
+    menu: 'updateOption',
+    children: [
+      {
+        path: 'updateOption',
+        name: 'update-autoWrapText'
+      },
+      {
+        path: 'updateOption',
+        name: 'update-columns'
+      },
+      {
+        path: 'updateOption',
+        name: 'update-widthMode'
+      },
+      {
+        path: 'updateOption',
+        name: 'update-heightMode'
+      }
+    ]
+  },
   {
     menu: '业务方',
     children: [

packages/vtable/src/ListTable.ts

@@ -94,13 +94,20 @@ export class ListTable extends BaseTable implements ListTableAPI {
   set columns(columns: ColumnsDefine) {
     this.internalProps.columns = columns;
     this.options.columns = columns;
+  }
+  /**
+   * Sets the define of the column.
+   */
+  updateColumns(columns: ColumnsDefine) {
+    this.internalProps.columns = columns;
+    this.options.columns = columns;
     this.refreshHeader();
-    //需要异步等待其他事情都完成后再绘制
-    setTimeout(() => {
-      this.render();
-    }, 0);
+    this.scenegraph.clearCells();
+    this.headerStyleCache = new Map();
+    this.bodyStyleCache = new Map();
+    this.scenegraph.createSceneGraph();
+    this.render();
   }
-
   /**
    *@deprecated 请使用columns
    */

packages/vtable/src/core/BaseTable.ts

@@ -644,6 +644,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   set widthMode(widthMode: WidthModeDef) {
     if (widthMode !== this._widthMode) {
       this._widthMode = widthMode;
+      this.options.widthMode = widthMode;
     }
   }
   get heightMode(): HeightModeDef {
@@ -652,6 +653,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   set heightMode(heightMode: HeightModeDef) {
     if (heightMode !== this._heightMode) {
       this._heightMode = heightMode;
+      this.options.heightMode = heightMode;
     }
   }
   get autoFillWidth(): boolean {
@@ -1845,6 +1847,17 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     this.clearColWidthCache();
     this.clearRowHeightCache();
   }
+  /**
+   * 重新创建场景树并重新渲染
+   */
+  renderWithRecreateCells() {
+    this.refreshHeader();
+    this.scenegraph.clearCells();
+    this.headerStyleCache = new Map();
+    this.bodyStyleCache = new Map();
+    this.scenegraph.createSceneGraph();
+    this.render();
+  }
   /**
    * 获取固定行总高
    * @returns
@@ -2254,17 +2267,22 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
    * Set the autoWrapText
    */
   set autoWrapText(autoWrapText: boolean) {
+    this.internalProps.autoWrapText = autoWrapText;
+    this.options.autoWrapText = autoWrapText;
+  }
+  updateAutoWrapText(autoWrapText: boolean) {
     if (this.internalProps.autoWrapText === autoWrapText) {
       return;
     }
     this.internalProps.autoWrapText = autoWrapText;
     this.options.autoWrapText = autoWrapText;
-    if (this.internalProps.layoutMap) {
-      //后面如果修改是否转置
-      this.refreshHeader();
-      // if (this.internalProps.autoRowHeight) this.computeRowsHeight();
-      this.render();
-    }
+    // if (this.heightMode === 'autoHeight' || this.heightMode === 'adaptive') {
+    this.scenegraph.clearCells();
+    this.headerStyleCache = new Map();
+    this.bodyStyleCache = new Map();
+    this.scenegraph.createSceneGraph();
+    this.render();
+    // }
   }
 
   /**
@@ -2273,6 +2291,10 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   get theme(): TableTheme {
     return this.internalProps.theme;
   }
+  set theme(theme: TableTheme) {
+    this.internalProps.theme = themes.of(theme ?? themes.DEFAULT);
+    this.options.theme = theme;
+  }
   /**
    * 设置主题
    */

packages/vtable/src/scenegraph/scenegraph.ts

@@ -725,9 +725,16 @@ export class Scenegraph {
   }
 
   resize() {
-    this.recalculateColWidths();
-
-    this.recalculateRowHeights();
+    if (this.table.widthMode === 'adaptive') {
+      this.recalculateColWidths();
+    }
+    if (this.table.heightMode === 'adaptive') {
+      this.recalculateRowHeights();
+    } else if (this.table.widthMode === 'adaptive') {
+      this.table.clearRowHeightCache();
+      computeRowsHeight(this.table, 0, this.table.columnHeaderLevelCount - 1);
+      computeRowsHeight(this.table, this.proxy.rowStart, this.proxy.rowEnd);
+    }
 
     this.dealWidthMode();
     this.dealHeightMode();

packages/vtable/src/ts-types/base-table.ts

@@ -552,7 +552,8 @@ export interface BaseTableAPI {
   isPivotChart: (() => boolean) & (() => boolean);
   _clearColRangeWidthsMap: (col?: number) => void;
   _clearRowRangeHeightsMap: (row?: number) => void;
-
+  clearRowHeightCache: () => void;
+  clearColWidthCache: () => void;
   toggleHierarchyState: (col: number, row: number) => void;
 
   resize: () => void;
@@ -561,6 +562,8 @@ export interface BaseTableAPI {
 
   getTargetColAt: (absoluteX: number) => { col: number; left: number; right: number; width: number } | null;
   getTargetRowAt: (absoluteY: number) => { row: number; top: number; bottom: number; height: number } | null;
+
+  renderWithRecreateCells: () => void;
   //#endregion  tableAPI
 }
 export interface ListTableProtected extends IBaseTableProtected {