Merge pull request #3662 from VisActor/3661-bug-renderchartasync-setrecords-renderError

3661 bug renderchartasync setrecords render error

Author: fangsmile

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"
+}

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,
@@ -1158,6 +1159,7 @@ export class ListTable extends BaseTable implements ListTableAPI {
    * @param option 附近参数，其中的sortState为排序状态，如果设置null 将清除目前的排序状态
    */
   setRecords(records: Array<any>, option?: { sortState?: SortState | SortState[] | null }): void {
+    clearChartRenderQueue();
     // 释放事件 及 对象
     this.internalProps.dataSource?.release();
     // 过滤掉dataSource的引用

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<any>): 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;

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<any>): 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;

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<TYPE extends keyof TableEventHandlersEventArgumentMap>(
@@ -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();

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);