fix: when call setRowHeight should update chart size #2155

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); // 如果收起展开有性能问题 可以排查下这个防范
       }
     }
   }

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); // 如果收起展开有性能问题 可以排查下这个防范
       }
     }
   }

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
   }
 

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

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

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支持后需要根据变化的列去调整，范围可能变多或者变少

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

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