diff --git a/common/changes/@visactor/vtable/240-feature-update-single-option-item_2023-08-24-10-38.json b/common/changes/@visactor/vtable/240-feature-update-single-option-item_2023-08-24-10-38.json new file mode 100644 index 000000000..dce7575e7 --- /dev/null +++ b/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": "892739385@qq.com" +} \ No newline at end of file diff --git a/common/changes/@visactor/vtable/240-feature-update-single-option-item_2023-08-25-08-35.json b/common/changes/@visactor/vtable/240-feature-update-single-option-item_2023-08-25-08-35.json new file mode 100644 index 000000000..740e36d2e --- /dev/null +++ b/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": "892739385@qq.com" +} \ No newline at end of file diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts index a943743f0..81a270429 100644 --- a/packages/vtable/examples/list/list.ts +++ b/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; diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts index 16be7c088..76548eec1 100644 --- a/packages/vtable/examples/menu.ts +++ b/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: [ diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index c34d38d60..1e9f1a875 100644 --- a/packages/vtable/src/ListTable.ts +++ b/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 */ diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index fbc4cf5b9..f40051e2a 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/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; + } /** * 设置主题 */ diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index d15b58782..e87e84201 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/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(); diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index c8a47f99a..2a186243c 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/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 {