diff --git a/common/changes/@visactor/vtable/3661-bug-renderchartasync-setrecords-renderError_2025-03-31-11-43.json b/common/changes/@visactor/vtable/3661-bug-renderchartasync-setrecords-renderError_2025-03-31-11-43.json new file mode 100644 index 0000000000..69ff2ddb5b --- /dev/null +++ b/common/changes/@visactor/vtable/3661-bug-renderchartasync-setrecords-renderError_2025-03-31-11-43.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: when set renderChartAsync setRecords api render error #3661\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 9e16ef3f2c..78d1ef4a5e 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -55,6 +55,7 @@ import { } from './core/record-helper'; import type { IListTreeStickCellPlugin, ListTreeStickCellPlugin } from './plugins/list-tree-stick-cell'; import { fixUpdateRowRange } from './tools/update-row'; +import { clearChartRenderQueue } from './scenegraph/graphic/contributions/chart-render-helper'; // import { // registerAxis, // registerEmptyTip, @@ -1142,6 +1143,7 @@ export class ListTable extends BaseTable implements ListTableAPI { * @param option 附近参数,其中的sortState为排序状态,如果设置null 将清除目前的排序状态 */ setRecords(records: Array, option?: { sortState?: SortState | SortState[] | null }): void { + clearChartRenderQueue(); // 释放事件 及 对象 this.internalProps.dataSource?.release(); // 过滤掉dataSource的引用 diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index 8f06adfca3..24ca9d3c1a 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -73,7 +73,7 @@ import { registerVideoCell } from './scenegraph/group-creater/cell-type'; import { hasLinearAxis } from './layout/chart-helper/get-axis-config'; -import { cacheStageCanvas } from './scenegraph/graphic/contributions/chart-render-helper'; +import { cacheStageCanvas, clearChartRenderQueue } from './scenegraph/graphic/contributions/chart-render-helper'; registerAxis(); registerEmptyTip(); @@ -1529,6 +1529,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI { * @param sort */ setRecords(records: Array): void { + this.internalProps.layoutMap.release(); + clearChartRenderQueue(); const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row }; this.options.records = this.internalProps.records = records; const options = this.options; diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index 2d9324adb5..970ad2f0d3 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -53,6 +53,7 @@ import { import type { IEmptyTipComponent } from './components/empty-tip/empty-tip'; import { Factory } from './core/factory'; import { callUpdateColOnScenegraph, callUpdateRowOnScenegraph } from './tools/diff-cell'; +import { clearChartRenderQueue } from './scenegraph/graphic/contributions/chart-render-helper'; export class PivotTable extends BaseTable implements PivotTableAPI { layoutNodeId: { seqId: number } = { seqId: 0 }; @@ -1697,6 +1698,7 @@ export class PivotTable extends BaseTable implements PivotTableAPI { * @param sort */ setRecords(records: Array): void { + clearChartRenderQueue(); const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row }; this.options.records = this.internalProps.records = records; this.internalProps.recordsIsTwoDimensionalArray = false; diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index fb892efe43..e3bdd2b4ca 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -121,7 +121,11 @@ import type { CreateLegend } from '../components/legend/create-legend'; import type { DataSet } from '@visactor/vdataset'; import { Title } from '../components/title/title'; import type { Chart } from '../scenegraph/graphic/chart'; -import { setBatchRenderChartCount } from '../scenegraph/graphic/contributions/chart-render-helper'; +import { + chartRenderQueueList, + clearChartRenderQueue, + setBatchRenderChartCount +} from '../scenegraph/graphic/contributions/chart-render-helper'; import { isLeftOrRightAxis, isTopOrBottomAxis } from '../layout/chart-helper/get-axis-config'; import { NumberRangeMap } from '../layout/row-height-map'; import { ListTable } from '../ListTable'; @@ -2316,6 +2320,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { this.internalProps = null; this.reactCustomLayout?.clearCache(); + clearChartRenderQueue(); } fireListeners( @@ -2486,6 +2491,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.emptyTip?.release(); internalProps.emptyTip = null; internalProps.layoutMap.release(); + clearChartRenderQueue(); this.scenegraph.clearCells(); this.scenegraph.updateComponent(); this.stateManager.updateOptionSetState(); diff --git a/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts b/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts index 633bd1e384..44fae47464 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts @@ -4,19 +4,26 @@ import type { IAABBBounds } from '@visactor/vutils'; import { Bounds, isValid } from '@visactor/vutils'; import type { BaseTableAPI } from '../../../ts-types/base-table'; export const cancelRenderChartQueue = false; -export const chartRenderKeys: string[] = []; -export const chartRenderQueueList: Chart[] = []; +export let chartRenderKeys: string[] = []; +export let chartRenderQueueList: Chart[] = []; interface chartRenderQueueItem { chart: Chart; } //每次消费的图表数量 let batchRenderChartCount = 5; let isHandlingChartQueue = false; +let requestAnimationFrameId: number; export function setBatchRenderChartCount(count: number) { if (isValid(count)) { batchRenderChartCount = count; } } +export function clearChartRenderQueue() { + chartRenderKeys = []; + chartRenderQueueList = []; + isHandlingChartQueue = false; + cancelAnimationFrame(requestAnimationFrameId); +} export function IsHandlingChartQueue() { return isHandlingChartQueue; } @@ -175,7 +182,7 @@ export function startRenderChartQueue(table: any) { if (chartRenderQueueList.length > 0) { // 使用 requestAnimationFrame 或 setTimeout 来调度下一批图表的渲染 // requestAnimationFrame(() => renderChartQueue(table)); - requestAnimationFrame(() => { + requestAnimationFrameId = requestAnimationFrame(() => { // 从集合中获取要渲染的图表上下文 const chartsToRender = chartRenderQueueList.splice(0, batchRenderChartCount); chartRenderKeys.splice(0, batchRenderChartCount);