From b91227a1e2c9a4cb06b873352b9d0f956830ab68 Mon Sep 17 00:00:00 2001 From: Erica-cod <2779428708@qq.com> Date: Sun, 29 Mar 2026 22:46:19 -0400 Subject: [PATCH 1/3] fix: reset all interaction states on data update to avoid stale resize indicators #4120 When setRecords() or updateOption() is called during an active resize operation, call updateOptionSetState() to fully reset interaction state, hide resize column/row indicators, and prevent the table from being stuck in grabing mode. Added demo case for verification. Made-with: Cursor --- .../examples/interactive/resize-setRecords.ts | 126 ++++++++++++++++++ packages/vtable/examples/menu.ts | 4 + packages/vtable/src/ListTable.ts | 3 + packages/vtable/src/PivotChart.ts | 3 + packages/vtable/src/PivotTable.ts | 3 + packages/vtable/src/state/state.ts | 6 + 6 files changed, 145 insertions(+) create mode 100644 packages/vtable/examples/interactive/resize-setRecords.ts diff --git a/packages/vtable/examples/interactive/resize-setRecords.ts b/packages/vtable/examples/interactive/resize-setRecords.ts new file mode 100644 index 0000000000..f49d569c73 --- /dev/null +++ b/packages/vtable/examples/interactive/resize-setRecords.ts @@ -0,0 +1,126 @@ +import * as VTable from '../../src'; +import { bindDebugTool } from '../../src/scenegraph/debug-tool'; +const ListTable = VTable.ListTable; +const CONTAINER_ID = 'vTable'; + +/** + * 验证场景：列宽/行高调整过程中调用 setRecords 或 updateOption 时， + * 调整指示线应被正确清除，不会残留在表格上。 + * 对应 issue: https://github.com/VisActor/VTable/issues/4120 + * + * 复现步骤： + * 1. 点击"自动定时刷新"按钮开启每3秒自动 setRecords + * 2. 拖动列头边界开始调整列宽（鼠标按住不放） + * 3. 等待自动刷新触发（或手动点击按钮） + * 4. 修复前：指示线会卡在表格上无法消失 + * 5. 修复后：指示线在 setRecords/updateOption 调用时被正确清除 + */ +export function createTable() { + const generatePersons = (count: number) => { + return Array.from(new Array(count)).map((_, i) => ({ + id: i + 1, + name: `员工${i + 1}`, + email: `user${i + 1}@example.com`, + department: ['研发部', '市场部', '设计部', '产品部', '运营部'][i % 5], + salary: Math.round(Math.random() * 10000 + 5000), + city: ['北京', '上海', '广州', '深圳', '杭州'][i % 5] + })); + }; + + let records = generatePersons(100); + + const columns: VTable.ColumnsDefine = [ + { field: 'id', title: 'ID', width: 80 }, + { field: 'name', title: '姓名', width: 120 }, + { field: 'email', title: '邮箱', width: 220 }, + { field: 'department', title: '部门', width: 120 }, + { field: 'salary', title: '薪资', width: 120 }, + { field: 'city', title: '城市', width: 120 } + ]; + + const option: VTable.ListTableConstructorOptions = { + container: document.getElementById(CONTAINER_ID), + records, + columns, + widthMode: 'standard', + defaultRowHeight: 40, + defaultHeaderRowHeight: 50, + theme: VTable.themes.ARCO + }; + + const btnContainer = document.createElement('div'); + btnContainer.style.cssText = 'padding: 10px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;'; + + const tip = document.createElement('span'); + tip.style.cssText = 'color: #666; font-size: 13px;'; + tip.textContent = '操作：先拖动列边界调整列宽，拖动过程中点击下方按钮'; + btnContainer.appendChild(tip); + + const btnSetRecords = document.createElement('button'); + btnSetRecords.textContent = 'setRecords (刷新数据)'; + btnSetRecords.style.cssText = + 'padding: 6px 16px; cursor: pointer; background: #416EFF; color: #fff; border: none; border-radius: 4px;'; + btnSetRecords.addEventListener('click', () => { + records = generatePersons(100); + instance.setRecords(records); + console.log('setRecords called'); + }); + btnContainer.appendChild(btnSetRecords); + + const btnUpdateOption = document.createElement('button'); + btnUpdateOption.textContent = 'updateOption (更新配置)'; + btnUpdateOption.style.cssText = + 'padding: 6px 16px; cursor: pointer; background: #52C41A; color: #fff; border: none; border-radius: 4px;'; + btnUpdateOption.addEventListener('click', () => { + records = generatePersons(100); + instance.updateOption({ + ...option, + records + }); + console.log('updateOption called'); + }); + btnContainer.appendChild(btnUpdateOption); + + let timer: any = null; + const btnAutoTest = document.createElement('button'); + btnAutoTest.textContent = '自动定时刷新 (每3秒)'; + btnAutoTest.style.cssText = + 'padding: 6px 16px; cursor: pointer; background: #FA8C16; color: #fff; border: none; border-radius: 4px;'; + btnAutoTest.addEventListener('click', () => { + if (timer) { + clearInterval(timer); + timer = null; + btnAutoTest.textContent = '自动定时刷新 (每3秒)'; + btnAutoTest.style.background = '#FA8C16'; + } else { + timer = setInterval(() => { + records = generatePersons(100); + instance.setRecords(records); + console.log('auto setRecords triggered'); + }, 3000); + btnAutoTest.textContent = '停止自动刷新'; + btnAutoTest.style.background = '#FF4D4F'; + } + }); + btnContainer.appendChild(btnAutoTest); + + document.getElementById(CONTAINER_ID)?.before(btnContainer); + + const instance = new ListTable(option); + + bindDebugTool(instance.scenegraph.stage as any, { + customGrapicKeys: ['role', '_updateTag'] + }); + + const originalRelease = instance.release.bind(instance); + instance.release = () => { + if (timer) { + clearInterval(timer); + timer = null; + } + btnContainer.remove(); + originalRelease(); + }; + + (window as any).tableInstance = instance; +} diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts index 658a0acdf2..55bbb5c215 100644 --- a/packages/vtable/examples/menu.ts +++ b/packages/vtable/examples/menu.ts @@ -851,6 +851,10 @@ export const menus = [ path: 'interactive', name: 'row-resize' }, + { + path: 'interactive', + name: 'resize-setRecords' + }, { path: 'interactive', name: 'pre-sort' diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 207f625431..30a1346f97 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -1546,6 +1546,9 @@ export class ListTable extends BaseTable implements ListTableAPI { * @param option 附近参数，其中的sortState为排序状态，如果设置null 将清除目前的排序状态 */ setRecords(records: Array, option?: { sortState?: SortState | SortState[] | null }): void { + if (this.stateManager.columnResize.resizing || this.stateManager.rowResize.resizing) { + this.stateManager.updateOptionSetState(); + } clearChartRenderQueue(); // 释放事件 及 对象 this.internalProps.dataSource?.release(); diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index a009578752..258b8728ca 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -1623,6 +1623,9 @@ export class PivotChart extends BaseTable implements PivotChartAPI { * @param sort */ setRecords(records: Array): void { + if (this.stateManager.columnResize.resizing || this.stateManager.rowResize.resizing) { + this.stateManager.updateOptionSetState(); + } this.internalProps.layoutMap.release(); clearChartRenderQueue(); this.scenegraph.updateChartState(null, undefined); diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index abb99f53cd..991e5a719d 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -1665,6 +1665,9 @@ export class PivotTable extends BaseTable implements PivotTableAPI { * @param sort */ setRecords(records: Array): void { + if (this.stateManager.columnResize.resizing || this.stateManager.rowResize.resizing) { + this.stateManager.updateOptionSetState(); + } clearChartRenderQueue(); const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row }; this.options.records = this.internalProps.records = records; diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 51ae5ba3cb..c4425e0677 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -251,6 +251,12 @@ export class StateManager { this.setFrozenState(); } _updateOptionSetState() { + if (this.columnResize.resizing) { + this.table.scenegraph.component.hideResizeCol(); + } + if (this.rowResize.resizing) { + this.table.scenegraph.component.hideResizeRow(); + } this.interactionState = InteractionState.default; // this.select = { // highlightScope: HighlightScope.single, From c243c5e5d013bc93be411f181729318f9ca12156 Mon Sep 17 00:00:00 2001 From: Erica-cod <2779428708@qq.com> Date: Sun, 29 Mar 2026 22:48:11 -0400 Subject: [PATCH 2/3] docs: update changelog of rush Made-with: Cursor --- ...esize-col-line-stuck-4120-v2_2026-03-30-02-46.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/fix-resize-col-line-stuck-4120-v2_2026-03-30-02-46.json diff --git a/common/changes/@visactor/vtable/fix-resize-col-line-stuck-4120-v2_2026-03-30-02-46.json b/common/changes/@visactor/vtable/fix-resize-col-line-stuck-4120-v2_2026-03-30-02-46.json new file mode 100644 index 0000000000..5c884c44ae --- /dev/null +++ b/common/changes/@visactor/vtable/fix-resize-col-line-stuck-4120-v2_2026-03-30-02-46.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: reset all interaction states on data update to avoid stale resize indicators", + "type": "patch", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "2779428708@qq.com" +} \ No newline at end of file From 0b8be5d2976c4730f9fa500cf4ce230b1a225c55 Mon Sep 17 00:00:00 2001 From: Erica-cod <2779428708@qq.com> Date: Sun, 29 Mar 2026 22:56:26 -0400 Subject: [PATCH 3/3] refactor: extract endResizeIfResizing() for cleaner resize cleanup in setRecords Instead of calling the heavy updateOptionSetState() from setRecords(), extract a focused endResizeIfResizing() method that only handles resize indicator cleanup. _updateOptionSetState() reuses it internally. Made-with: Cursor --- packages/vtable/src/ListTable.ts | 4 +--- packages/vtable/src/PivotChart.ts | 4 +--- packages/vtable/src/PivotTable.ts | 4 +--- packages/vtable/src/state/state.ts | 10 +++++++++- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 30a1346f97..1a79253a3f 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -1546,9 +1546,7 @@ export class ListTable extends BaseTable implements ListTableAPI { * @param option 附近参数，其中的sortState为排序状态，如果设置null 将清除目前的排序状态 */ setRecords(records: Array, option?: { sortState?: SortState | SortState[] | null }): void { - if (this.stateManager.columnResize.resizing || this.stateManager.rowResize.resizing) { - this.stateManager.updateOptionSetState(); - } + this.stateManager.endResizeIfResizing(); clearChartRenderQueue(); // 释放事件 及 对象 this.internalProps.dataSource?.release(); diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index 258b8728ca..0fdb4dc221 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -1623,9 +1623,7 @@ export class PivotChart extends BaseTable implements PivotChartAPI { * @param sort */ setRecords(records: Array): void { - if (this.stateManager.columnResize.resizing || this.stateManager.rowResize.resizing) { - this.stateManager.updateOptionSetState(); - } + this.stateManager.endResizeIfResizing(); this.internalProps.layoutMap.release(); clearChartRenderQueue(); this.scenegraph.updateChartState(null, undefined); diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index 991e5a719d..a1dadfbf48 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -1665,9 +1665,7 @@ export class PivotTable extends BaseTable implements PivotTableAPI { * @param sort */ setRecords(records: Array): void { - if (this.stateManager.columnResize.resizing || this.stateManager.rowResize.resizing) { - this.stateManager.updateOptionSetState(); - } + this.stateManager.endResizeIfResizing(); clearChartRenderQueue(); const oldHoverState = { col: this.stateManager.hover.cellPos.col, row: this.stateManager.hover.cellPos.row }; this.options.records = this.internalProps.records = records; diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index c4425e0677..7551218b08 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -250,13 +250,21 @@ export class StateManager { this.setSelectState(); this.setFrozenState(); } - _updateOptionSetState() { + endResizeIfResizing() { if (this.columnResize.resizing) { this.table.scenegraph.component.hideResizeCol(); + this.columnResize.resizing = false; } if (this.rowResize.resizing) { this.table.scenegraph.component.hideResizeRow(); + this.rowResize.resizing = false; } + if (this.interactionState === InteractionState.grabing) { + this.interactionState = InteractionState.default; + } + } + _updateOptionSetState() { + this.endResizeIfResizing(); this.interactionState = InteractionState.default; // this.select = { // highlightScope: HighlightScope.single,