From dd114c4d0e5339da971096a3ef835bad2714cc4b Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 20 Aug 2024 18:12:45 +0800 Subject: [PATCH 1/4] feat: add professional config --- .../group-creater/progress/proxy.ts | 14 ++++++--- .../progress/update-position/dynamic-set-x.ts | 10 +++++-- .../progress/update-position/dynamic-set-y.ts | 30 +++++++++++++++---- packages/vtable/src/ts-types/base-table.ts | 17 ++++++++--- 4 files changed, 55 insertions(+), 16 deletions(-) diff --git a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts index be6b44e8f6..18b281dd8d 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts @@ -89,8 +89,12 @@ export class SceneProxy { } else if (this.table.isPivotTable()) { this.mode = 'pivot'; } - if (this.table.options.maintainedDataCount) { - this.rowLimit = this.table.options.maintainedDataCount; + + if (this.table.options.maintainedDataCount || this.table.options.maintainedRowCount) { + this.rowLimit = this.table.options.maintainedDataCount || this.table.options.maintainedRowCount; + } + if (this.table.options.maintainedColumnCount) { + this.colLimit = this.table.options.maintainedColumnCount; } } @@ -110,7 +114,8 @@ export class SceneProxy { this.colEnd = this.totalCol; // temp for first screen, will replace in createGroupForFirstScreen() const defaultColWidth = this.table.defaultColWidth; // const defaultColWidth = getDefaultHeight(this.table); - this.taskColCount = Math.ceil(this.table.tableNoFrameWidth / defaultColWidth) * 1; + this.taskColCount = + this.table.options.progressColumnUpdateCount ?? Math.ceil(this.table.tableNoFrameWidth / defaultColWidth) * 1; // 确定动态更新限制 const totalBodyWidth = defaultColWidth * totalActualBodyColCount; @@ -144,7 +149,8 @@ export class SceneProxy { this.rowEnd = this.totalRow; // temp for first screen, will replace in createGroupForFirstScreen() const defaultRowHeight = this.table.defaultRowHeight; // const defaultRowHeight = getDefaultWidth(this.table); - this.taskRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight) * 1; + this.taskRowCount = + this.table.options.progressRowUpdateCount ?? Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight) * 1; // 确定动态更新限制 const totalBodyHeight = defaultRowHeight * totalActualBodyRowCount; diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts index 5f43d9b362..2191bf5d0e 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts @@ -214,8 +214,14 @@ function updateColGroupContentAsync(colGroup: Group, proxy: SceneProxy) { return; } const screenTopRow = proxy.screenTopRow; - const topRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1); - const bottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2); + const topRow = Math.max( + proxy.bodyTopRow, + screenTopRow - proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1) + ); + const bottomRow = Math.min( + proxy.bodyBottomRow, + screenTopRow + proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1)) + ); for (let row = topRow; row <= bottomRow; row++) { // const cellGroup = proxy.table.scenegraph.getCell(col, row); diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts index a51c21d1cc..71cf6c942e 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts @@ -90,8 +90,14 @@ async function moveCell( syncTopRow = distStartRow; syncBottomRow = distEndRow; } else { - const topRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1); - const bottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2); + const topRow = Math.max( + proxy.bodyTopRow, + screenTopRow - proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1) + ); + const bottomRow = Math.min( + proxy.bodyBottomRow, + screenTopRow + proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1)) + ); // get coincide of distStartRow&distEndRow and topRow&BottomRow // syncTopRow = Math.max(distStartRow, topRow); // syncBottomRow = Math.min(distEndRow, bottomRow); @@ -187,8 +193,14 @@ async function moveCell( syncTopRow = distStartRow; syncBottomRow = distEndRow; } else { - syncTopRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1); - syncBottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2); + syncTopRow = Math.max( + proxy.bodyTopRow, + screenTopRow - proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1) + ); + syncBottomRow = Math.min( + proxy.bodyBottomRow, + screenTopRow + proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1)) + ); } computeRowsHeight(proxy.table, syncTopRow, syncBottomRow, false); @@ -394,8 +406,14 @@ export function updateRowContent(syncTopRow: number, syncBottomRow: number, prox let sync = true; if (async) { const screenLeftCol = proxy.screenLeftCol; - leftCol = Math.max(proxy.bodyLeftCol, screenLeftCol - proxy.screenColCount * 1); - rightCol = Math.min(proxy.bodyRightCol, screenLeftCol + proxy.screenColCount * 2); + leftCol = Math.max( + proxy.bodyLeftCol, + screenLeftCol - proxy.screenColCount * (proxy.table.options.columnUpdateBufferCount ?? 1) + ); + rightCol = Math.min( + proxy.bodyRightCol, + screenLeftCol + proxy.screenColCount * (1 + (proxy.table.options.columnUpdateBufferCount ?? 1)) + ); if (leftCol !== proxy.bodyLeftCol || rightCol !== proxy.bodyRightCol) { sync = false; } diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 5d9e928722..7c8c67d8ca 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -423,9 +423,6 @@ export interface BaseTableConstructorOptions { limitMinWidth?: boolean | number; limitMinHeight?: boolean | number; - // maximum number of data items maintained in table instance - maintainedDataCount?: number; - legends?: ITableLegendOption | ITableLegendOption[]; title?: ITitle; emptyTip?: true | IEmptyTip; @@ -482,8 +479,20 @@ export interface BaseTableConstructorOptions { }; // 部分特殊配置，兼容xTable等作用 animationAppear?: boolean | IAnimationAppear; - renderOption?: any; + + // professionalConfig + // maximum number of data items maintained in table instance + maintainedDataCount?: number; + // maximum number of columns maintained in table instance + maintainedColumnCount?: number; + // maximum number of rows maintained in table instance + maintainedRowCount?: number; + + rowUpdateBufferCount?: number; + columnUpdateBufferCount?: number; + progressRowUpdateCount?: number; + progressColumnUpdateCount?: number; } export interface BaseTableAPI { /** 数据总条目数 */ From ebca78414e017d2b5ece9b0ec24c239e04c5d238 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 20 Aug 2024 19:33:40 +0800 Subject: [PATCH 2/4] chore: add rush change --- .../vtable/feat-custom-perf_2024-08-20-11-32.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/@visactor/vtable/feat-custom-perf_2024-08-20-11-32.json diff --git a/common/changes/@visactor/vtable/feat-custom-perf_2024-08-20-11-32.json b/common/changes/@visactor/vtable/feat-custom-perf_2024-08-20-11-32.json new file mode 100644 index 0000000000..06248f818d --- /dev/null +++ b/common/changes/@visactor/vtable/feat-custom-perf_2024-08-20-11-32.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vtable", + "comment": "feat: add professional config", + "type": "none" + } + ], + "packageName": "@visactor/vtable" +} \ No newline at end of file From 8ebdcb07dde79ec3f205f822dabbcbc0dd519aaf Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 20 Aug 2024 21:16:00 +0800 Subject: [PATCH 3/4] fix: fix buffer number in update xy --- .../progress/update-position/dynamic-set-x.ts | 4 ++-- .../progress/update-position/dynamic-set-y.ts | 12 ++++++------ packages/vtable/src/ts-types/base-table.ts | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts index 2191bf5d0e..892e40d17f 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts @@ -216,11 +216,11 @@ function updateColGroupContentAsync(colGroup: Group, proxy: SceneProxy) { const screenTopRow = proxy.screenTopRow; const topRow = Math.max( proxy.bodyTopRow, - screenTopRow - proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1) + screenTopRow - Math.ceil(proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1)) ); const bottomRow = Math.min( proxy.bodyBottomRow, - screenTopRow + proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1)) + screenTopRow + Math.ceil(proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1))) ); for (let row = topRow; row <= bottomRow; row++) { diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts index 71cf6c942e..3e49bcb2fa 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts @@ -92,11 +92,11 @@ async function moveCell( } else { const topRow = Math.max( proxy.bodyTopRow, - screenTopRow - proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1) + screenTopRow - Math.ceil(proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1)) ); const bottomRow = Math.min( proxy.bodyBottomRow, - screenTopRow + proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1)) + screenTopRow + Math.ceil(proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1))) ); // get coincide of distStartRow&distEndRow and topRow&BottomRow // syncTopRow = Math.max(distStartRow, topRow); @@ -195,11 +195,11 @@ async function moveCell( } else { syncTopRow = Math.max( proxy.bodyTopRow, - screenTopRow - proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1) + screenTopRow - Math.ceil(proxy.screenRowCount * (proxy.table.options.rowUpdateBufferCount ?? 1)) ); syncBottomRow = Math.min( proxy.bodyBottomRow, - screenTopRow + proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1)) + screenTopRow + Math.ceil(proxy.screenRowCount * (1 + (proxy.table.options.rowUpdateBufferCount ?? 1))) ); } @@ -408,11 +408,11 @@ export function updateRowContent(syncTopRow: number, syncBottomRow: number, prox const screenLeftCol = proxy.screenLeftCol; leftCol = Math.max( proxy.bodyLeftCol, - screenLeftCol - proxy.screenColCount * (proxy.table.options.columnUpdateBufferCount ?? 1) + screenLeftCol - Math.ceil(proxy.screenColCount * (proxy.table.options.columnUpdateBufferCount ?? 1)) ); rightCol = Math.min( proxy.bodyRightCol, - screenLeftCol + proxy.screenColCount * (1 + (proxy.table.options.columnUpdateBufferCount ?? 1)) + screenLeftCol + Math.ceil(proxy.screenColCount * (1 + (proxy.table.options.columnUpdateBufferCount ?? 1))) ); if (leftCol !== proxy.bodyLeftCol || rightCol !== proxy.bodyRightCol) { sync = false; diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 7c8c67d8ca..7f94e47415 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -489,10 +489,10 @@ export interface BaseTableConstructorOptions { // maximum number of rows maintained in table instance maintainedRowCount?: number; - rowUpdateBufferCount?: number; - columnUpdateBufferCount?: number; - progressRowUpdateCount?: number; - progressColumnUpdateCount?: number; + rowUpdateBufferCount?: number; // 行更新时，同步更新范围buffer系数；默认为1，同步更新为三倍屏幕预计行数（上下buffer各为1） + columnUpdateBufferCount?: number; // 列更新时，同步更新范围buffer系数；默认为1，同步更新为三倍屏幕预计列数（左右buffer各为1） + progressRowUpdateCount?: number; // 渐进更新行时，每个异步任务更新的行数；默认为屏幕预计行数 + progressColumnUpdateCount?: number; // 渐进更新列时，每个异步任务更新的列数；默认为屏幕预计列数 } export interface BaseTableAPI { /** 数据总条目数 */ From 98c7da7c4e223c4fa6218e192e7db5768e55b1aa Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Wed, 21 Aug 2024 20:43:20 +0800 Subject: [PATCH 4/4] feat: add vrender prepare optimazation --- .../vtable/examples/custom/custom-perf.ts | 233 ++++++++++++++++++ packages/vtable/examples/menu.ts | 4 + .../scenegraph/graphic/contributions/index.ts | 14 +- .../graphic/contributions/render.ts | 12 + packages/vtable/src/scenegraph/scenegraph.ts | 20 +- packages/vtable/src/vrender.ts | 2 +- 6 files changed, 279 insertions(+), 6 deletions(-) create mode 100644 packages/vtable/examples/custom/custom-perf.ts create mode 100644 packages/vtable/src/scenegraph/graphic/contributions/render.ts diff --git a/packages/vtable/examples/custom/custom-perf.ts b/packages/vtable/examples/custom/custom-perf.ts new file mode 100644 index 0000000000..4fbced4231 --- /dev/null +++ b/packages/vtable/examples/custom/custom-perf.ts @@ -0,0 +1,233 @@ +import * as VTable from '../../src'; +import { bindDebugTool } from '../../src/scenegraph/debug-tool'; +import { InputEditor } from '@visactor/vtable-editors'; +import { bearImageUrl, birdImageUrl, catImageUrl, flowerImageUrl, rabbitImageUrl, wolfImageUrl } from '../resource-url'; +const ListTable = VTable.ListTable; +const input_editor = new InputEditor({}); +VTable.register.editor('input', input_editor); +const CONTAINER_ID = 'vTable'; + +function createRecords(length) { + const records: any[] = []; + for (let i = 0; i < length; i++) { + records.push({ + id: i, + text: 'text' + }); + } + + return records; +} + +function createColumns(length) { + const columns: any[] = []; + for (let i = 0; i < length; i++) { + columns.push({ + field: 'text', + title: 'custom', + width: 120, + customLayout + }); + } + + return columns; +} + +function customLayout(args: VTable.TYPES.CustomRenderFunctionArg) { + const { table, row, col, rect } = args; + const record = table.getRecordByCell(col, row); + const { height, width } = rect ?? table.getCellRect(col, row); + + const container = new VTable.CustomLayout.Group({ + height, + width + // display: 'flex', + // flexDirection: 'row', + // flexWrap: 'wrap' + }); + + const tag = new VTable.CustomLayout.Text({ + text: 'tag1', + textStyle: { + fontSize: 10, + fontFamily: 'sans-serif', + fill: 'rgb(51, 101, 238)' + }, + panel: { + visible: true, + fill: '#f4f4f2', + cornerRadius: 5 + }, + space: 5, + marginLeft: 5 + }); + const tag2 = new VTable.CustomLayout.Text({ + x: 50, + text: 'tag2', + textStyle: { + fontSize: 10, + fontFamily: 'sans-serif', + fill: 'rgb(51, 101, 238)' + }, + panel: { + visible: true, + fill: '#f4f4f2', + cornerRadius: 5 + }, + space: 5, + marginLeft: 5 + }); + container.appendChild(tag); + container.appendChild(tag2); + + return { + rootContainer: container, + renderDefault: false + }; +} + +export function createTable() { + const columns = createColumns(20); + const records = createRecords(3000); + const option: VTable.ListTableConstructorOptions = { + container: document.getElementById(CONTAINER_ID), + columns: [ + { + field: 'id', + title: 'id' + }, + ...columns + ], + records, + // editor: 'input', + defaultRowHeight: 40, + defaultColWidth: 120, + // customMergeCell: (col, row, table) => { + // if (col >= 0 && col < table.colCount && row === table.rowCount - 2) { + // return { + // range: { + // start: { + // col: 0, + // row: table.rowCount - 2 + // }, + // end: { + // col: table.colCount - 1, + // row: table.rowCount - 2 + // } + // }, + // customLayout: args => { + // const { table, row, col, rect } = args; + // const { height, width } = rect || table.getCellRect(col, row); + // const percentCalc = VTable.CustomLayout.percentCalc; + // const container = new VTable.CustomLayout.Group({ + // height, + // width, + // display: 'flex', + // flexDirection: 'row', + // flexWrap: 'nowrap' + // }); + // const containerLeft = new VTable.CustomLayout.Group({ + // height: percentCalc(100), + // width: 160, + // display: 'flex', + // direction: 'column', + // alignContent: 'center', + // alignItems: 'center', + // justifyContent: 'space-around', + // fill: 'blue', + // // dx: 200 + // x: 200 + // }); + // container.add(containerLeft); + + // containerLeft.addEventListener('click', () => { + // containerLeft.setAttributes({ fill: 'red' }); + // }); + + // const containerRight = new VTable.CustomLayout.Group({ + // height: percentCalc(100), + // width: percentCalc(100, -50), + // display: 'flex', + // direction: 'column' + // // justifyContent: 'center' + // }); + // container.add(containerRight); + + // const containerRightTop = new VTable.CustomLayout.Group({ + // id: 'containerRightTop', + // height: percentCalc(50), + // width: percentCalc(100), + // display: 'flex', + // alignItems: 'center', + // flexWrap: 'nowrap' + // }); + + // const containerRightBottom = new VTable.CustomLayout.Group({ + // height: percentCalc(50), + // width: percentCalc(100), + // display: 'flex', + // alignItems: 'center' + // }); + + // containerRight.add(containerRightTop); + // containerRight.add(containerRightBottom); + + // const bloggerName = new VTable.CustomLayout.Text({ + // text: 'record.bloggerName', + // fontSize: 13, + // fontFamily: 'sans-serif', + // fill: 'black', + // marginLeft: 10 + // }); + // containerRightTop.add(bloggerName); + + // const location = new VTable.CustomLayout.Icon({ + // id: 'location', + // iconName: 'location', + // width: 15, + // height: 15, + // marginLeft: 10 + // }); + // containerRightTop.add(location); + + // const locationName = new VTable.CustomLayout.Text({ + // text: 'record.city', + // fontSize: 11, + // fontFamily: 'sans-serif', + // fill: '#6f7070', + // boundsPadding: [0, 10, 0, 0] + // }); + // containerRightTop.add(locationName); + + // return { + // rootContainer: container, + // renderDefault: false + // }; + // } + // }; + // } + // }, + + rowUpdateBufferCount: 0.1, // 行更新时，同步更新范围buffer系数；默认为1，同步更新为三倍屏幕预计行数（上下buffer各为1） + columnUpdateBufferCount: 0.1, // 列更新时，同步更新范围buffer系数；默认为1，同步更新为三倍屏幕预计列数（左右buffer各为1） + progressRowUpdateCount: 5, // 渐进更新行时，每个异步任务更新的行数；默认为屏幕预计行数 + progressColumnUpdateCount: 5, // 渐进更新列时，每个异步任务更新的列数；默认为屏幕预计列数 + + renderOption: { + // disableDirtyBounds: true + } + }; + + const instance = new ListTable(option); + // bindDebugTool(instance.scenegraph.stage as any, { + // customGrapicKeys: ['col', 'row', 'role'] + // }); + + // const { MOUSEMOVE_CELL } = VTable.ListTable.EVENT_TYPE; + // instance.addEventListener(MOUSEMOVE_CELL, (...args) => { + // console.log('MOUSEMOVE_CELL', args[0]?.target); + // }); + + // 只为了方便控制太调试用，不要拷贝 + window.tableInstance = instance; +} diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts index 9c9c0e2f0f..c6cd6ebe7d 100644 --- a/packages/vtable/examples/menu.ts +++ b/packages/vtable/examples/menu.ts @@ -750,6 +750,10 @@ export const menus = [ { path: 'custom', name: 'custom-render' + }, + { + path: 'custom', + name: 'custom-perf' } ] }, diff --git a/packages/vtable/src/scenegraph/graphic/contributions/index.ts b/packages/vtable/src/scenegraph/graphic/contributions/index.ts index 59ddc94959..bbeefbb64a 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/index.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/index.ts @@ -7,7 +7,9 @@ import { SplitRectAfterRenderContribution, ContainerModule, DrawItemInterceptor, - TextRenderContribution + TextRenderContribution, + RenderService, + DefaultRenderService } from '@src/vrender'; import { ChartRender, DefaultCanvasChartRender } from './chart-render'; import { AfterImageRenderContribution, BeforeImageRenderContribution } from './image-contribution-render'; @@ -29,6 +31,7 @@ import { } from './group-contribution-render'; import { VTableDrawItemInterceptorContribution } from './draw-interceptor'; import { SuffixTextBeforeRenderContribution } from './text-contribution-render'; +import { VTableDefaultRenderService } from './render'; export default new ContainerModule((bind, unbind, isBound, rebind) => { // rect 渲染器注入contributions @@ -89,4 +92,13 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => { // text 渲染器注入contributions bind(SuffixTextBeforeRenderContribution).toSelf().inSingletonScope(); bind(TextRenderContribution).toService(SuffixTextBeforeRenderContribution); + + // render + if (isBound(RenderService)) { + unbind(RenderService); + rebind(RenderService).to(VTableDefaultRenderService); + } else { + unbind(RenderService); + bind(RenderService).to(VTableDefaultRenderService); + } }); diff --git a/packages/vtable/src/scenegraph/graphic/contributions/render.ts b/packages/vtable/src/scenegraph/graphic/contributions/render.ts new file mode 100644 index 0000000000..23f2e39388 --- /dev/null +++ b/packages/vtable/src/scenegraph/graphic/contributions/render.ts @@ -0,0 +1,12 @@ +import type { IGraphic } from '@src/vrender'; +import { DefaultRenderService } from '@src/vrender'; + +export class VTableDefaultRenderService extends DefaultRenderService { + protected _prepare(g: IGraphic, updateBounds: boolean) { + g.role !== 'cell' && + g.forEachChildren(g => { + this._prepare(g as IGraphic, updateBounds); + }); + g.update({ bounds: updateBounds, trans: true }); + } +} diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index b2cfb44786..bebbc83a0a 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -128,6 +128,9 @@ export class Scenegraph { _dealAutoFillHeightOriginRowsHeight: number; // hack 缓存一个值 用于处理autoFillHeight的逻辑判断 在某些情况下是需要更新此值的 如增删数据 但目前没有做这个 _needUpdateContainer: boolean = false; + + needRender: boolean = false; + constructor(table: BaseTableAPI) { this.table = table; this.hasFrozen = false; @@ -570,10 +573,19 @@ export class Scenegraph { * @return {*} */ updateNextFrame() { - this.updateContainerSync(); - this.resetAllSelectComponent(); - - this.stage.renderNextFrame(); + // this.updateContainerSync(); + // this.resetAllSelectComponent(); + // this.stage.renderNextFrame(); + + if (!this.needRender) { + this.needRender = true; + setTimeout(() => { + this.needRender = false; + this.updateContainerSync(); + this.resetAllSelectComponent(); + this.stage.renderNextFrame(); + }, 16); + } } resetAllSelectComponent() { if (this.table.stateManager.select?.ranges?.length > 0) { diff --git a/packages/vtable/src/vrender.ts b/packages/vtable/src/vrender.ts index 37d6b641c3..95a1182734 100644 --- a/packages/vtable/src/vrender.ts +++ b/packages/vtable/src/vrender.ts @@ -62,7 +62,7 @@ export function registerForVrender() { loadPoptip(); } -export { Direction, Timeline } from '@visactor/vrender-core'; +export type { Direction, Timeline } from '@visactor/vrender-core'; export { GroupFadeIn } from '@visactor/vrender-core'; export { GroupFadeOut } from '@visactor/vrender-core';