From 6a8f0a7ba170a36a4d9ec2dbfc77b729c41f235a Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 2 Aug 2024 16:20:26 +0800 Subject: [PATCH] fix: when call setRowHeight should update chart size #2155 --- packages/vtable/src/ListTable.ts | 2 +- packages/vtable/src/PivotTable.ts | 2 +- packages/vtable/src/core/BaseTable.ts | 2 + packages/vtable/src/event/event.ts | 2 +- .../contributions/chart-render-helper.ts | 1 + .../scenegraph/refresh-node/update-chart.ts | 46 ++++++++++++++++++- packages/vtable/src/scenegraph/scenegraph.ts | 21 +++++++-- packages/vtable/src/state/state.ts | 4 +- 8 files changed, 70 insertions(+), 10 deletions(-) diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 458fa04c0..1d39eb278 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -850,7 +850,7 @@ export class ListTable extends BaseTable implements ListTableAPI { notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight; } if (this.widthMode === 'adaptive' || notFillWidth || this.heightMode === 'adaptive' || notFillHeight) { - this.scenegraph.updateChartSize(0); // 如果收起展开有性能问题 可以排查下这个防范 + this.scenegraph.updateChartSizeForResizeColWidth(0); // 如果收起展开有性能问题 可以排查下这个防范 } } } diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index 604cb0bd9..293095d78 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -1381,7 +1381,7 @@ export class PivotTable extends BaseTable implements PivotTableAPI { notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight; } if (this.widthMode === 'adaptive' || notFillWidth || this.heightMode === 'adaptive' || notFillHeight) { - this.scenegraph.updateChartSize(0); // 如果收起展开有性能问题 可以排查下这个防范 + this.scenegraph.updateChartSizeForResizeColWidth(0); // 如果收起展开有性能问题 可以排查下这个防范 } } } diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 597763c26..fede50de8 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -1169,6 +1169,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { setRowHeight(row: number, height: number) { this.scenegraph.setRowHeight(row, height); + this.scenegraph.updateChartSizeForResizeRowHeight(row); this.internalProps._heightResizedRowMap.add(row); // add resize tag } @@ -1364,6 +1365,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { setColWidth(col: number, width: number) { this.scenegraph.setColWidth(col, width); + this.scenegraph.updateChartSizeForResizeColWidth(col); this.internalProps._widthResizedColMap.add(col); // add resize tag } diff --git a/packages/vtable/src/event/event.ts b/packages/vtable/src/event/event.ts index 5502431d0..2d2f15651 100644 --- a/packages/vtable/src/event/event.ts +++ b/packages/vtable/src/event/event.ts @@ -168,7 +168,7 @@ export class EventManager { this.table.scenegraph.updateAutoColWidth(resizeCol.col); this.table.internalProps._widthResizedColMap.add(resizeCol.col); // if (this.table.isPivotChart()) { - this.table.scenegraph.updateChartSize(resizeCol.col); + this.table.scenegraph.updateChartSizeForResizeColWidth(resizeCol.col); // } const state = this.table.stateManager; // update frozen shadowline component 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 653705b17..5eea92046 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts @@ -35,6 +35,7 @@ export function renderChart(chart: Chart) { autoFit: false }); chartInstance.renderSync(); + chart.chartInstance = chartInstance; } const viewBox = chart.getViewBox(); diff --git a/packages/vtable/src/scenegraph/refresh-node/update-chart.ts b/packages/vtable/src/scenegraph/refresh-node/update-chart.ts index d302c3780..77945c4dd 100644 --- a/packages/vtable/src/scenegraph/refresh-node/update-chart.ts +++ b/packages/vtable/src/scenegraph/refresh-node/update-chart.ts @@ -11,7 +11,7 @@ import { getQuadProps } from '../utils/padding'; import { getProp } from '../utils/get-prop'; /** 供调整列宽后更新chart使用 */ -export function updateChartSize(scenegraph: Scenegraph, col: number) { +export function updateChartSizeForResizeColWidth(scenegraph: Scenegraph, col: number) { // 将调整列宽的后面的面也都一起需要调整viewbox。 TODO：columnResizeType支持后需要根据变化的列去调整，范围可能变多或者变少 for (let c = col; c <= scenegraph.proxy.colEnd; c++) { const columnGroup = scenegraph.getColGroup(c); @@ -93,7 +93,51 @@ export function updateChartSize(scenegraph: Scenegraph, col: number) { } } } +/** 供调整列宽后更新chart使用 */ +export function updateChartSizeForResizeRowHeight(scenegraph: Scenegraph, row: number) { + const updateCellNode = (c: number, r: number) => { + const cellNode = scenegraph.getCell(c, r); + const width = scenegraph.table.getColWidth(cellNode.col); + const height = scenegraph.table.getRowHeight(cellNode.row); + cellNode.children.forEach((node: Chart) => { + if ((node as any).type === 'chart') { + node.cacheCanvas = null; + console.log('bf', c, r, node.attribute.width, node.attribute.height); + node.setAttribute('width', Math.ceil(width - node.attribute.cellPadding[3] - node.attribute.cellPadding[1])); + node.setAttribute('height', Math.ceil(height - node.attribute.cellPadding[0] - node.attribute.cellPadding[2])); + console.log('af', c, r, node.attribute.width, node.attribute.height); + } + }); + }; + // 将调整列宽的后面的面也都一起需要调整viewbox。 TODO：columnResizeType支持后需要根据变化的列去调整，范围可能变多或者变少 + for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) { + for (let r = row; r <= scenegraph.proxy.rowEnd; r++) { + updateCellNode(c, r); + } + } + + // 右侧冻结的单元格也需要调整 + if (scenegraph.table.rightFrozenColCount >= 1) { + for ( + let c = scenegraph.table.colCount - scenegraph.table.rightFrozenColCount; + c <= scenegraph.table.colCount - 1; + c++ + ) { + for (let r = row; r <= scenegraph.proxy.rowEnd; r++) { + updateCellNode(c, r); + } + } + } + // 左侧冻结的单元格 + if (scenegraph.table.frozenColCount >= 1) { + for (let c = 0; c <= scenegraph.table.frozenColCount - 1; c++) { + for (let r = row; r <= scenegraph.proxy.rowEnd; r++) { + updateCellNode(c, r); + } + } + } +} /** 清理所有chart节点的 图表缓存图片 */ export function clearChartCacheImage(scenegraph: Scenegraph) { // 将调整列宽的后面的面也都一起需要调整viewbox。 TODO：columnResizeType支持后需要根据变化的列去调整，范围可能变多或者变少 diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index 86fd54f75..caef9f09b 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -42,7 +42,11 @@ import { handleTextStick } from './stick-text'; import { computeRowHeight, computeRowsHeight } from './layout/compute-row-height'; import { emptyGroup } from './utils/empty-group'; import { dealBottomFrozen, dealFrozen, dealRightFrozen, resetFrozen } from './layout/frozen'; -import { updateChartSize, updateChartState } from './refresh-node/update-chart'; +import { + updateChartSizeForResizeColWidth, + updateChartSizeForResizeRowHeight, + updateChartState +} from './refresh-node/update-chart'; import { initSceneGraph } from './group-creater/init-scenegraph'; import { updateContainerChildrenX } from './utils/update-container'; import type { CheckBox } from '@visactor/vrender-components'; @@ -731,8 +735,17 @@ export class Scenegraph { * @param {number} col * @return {*} */ - updateChartSize(col: number) { - updateChartSize(this, col); + updateChartSizeForResizeColWidth(col: number) { + updateChartSizeForResizeColWidth(this, col); + } + + /** + * @description: 行高调整需要修改Chart的尺寸 + * @param {number} col + * @return {*} + */ + updateChartSizeForResizeRowHeight(col: number) { + updateChartSizeForResizeRowHeight(this, col); } /** 更新图表的高亮状态 */ updateChartState(datum: any) { @@ -889,7 +902,7 @@ export class Scenegraph { this.table.autoFillWidth || this.table.autoFillHeight ) { - this.updateChartSize(this.table.rowHeaderLevelCount); + this.updateChartSizeForResizeColWidth(this.table.rowHeaderLevelCount); } this.proxy.progress(); diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 3562e0ba4..85a52527c 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -662,7 +662,7 @@ export class StateManager { setTimeout(() => { this.columnResize.resizing = false; }, 0); - this.table.scenegraph.updateChartSize(this.columnResize.col); + this.table.scenegraph.updateChartSizeForResizeColWidth(this.columnResize.col); this.checkFrozen(); this.table.scenegraph.component.hideResizeCol(); this.table.scenegraph.updateNextFrame(); @@ -689,7 +689,7 @@ export class StateManager { setTimeout(() => { this.rowResize.resizing = false; }, 0); - this.table.scenegraph.updateChartSize(this.rowResize.row); + this.table.scenegraph.updateChartSizeForResizeColWidth(this.rowResize.row); // this.checkFrozen(); this.table.scenegraph.component.hideResizeRow(); this.table.scenegraph.updateNextFrame();