fix: fix cell range clear in update record

common/changes/@visactor/vtable/fix-cell-range-clear_2024-07-26-07-32.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: fix cell range clear in update record",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

packages/react-vtable/src/components/custom/custom-layout.tsx

@@ -37,13 +37,14 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
       if (container.current.has(key)) {
         const currentContainer = container.current.get(key);
         // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);
-        reconcilorUpdateContainer(children, currentContainer, group, args);
+        reconcilorUpdateContainer(children, currentContainer, args);
         group = currentContainer.containerInfo;
+        // 这里更新group，可能会残留dx dy
       } else {
         group = new Group({});
         const currentContainer = reconcilor.createContainer(group, LegacyRoot, null, null, null, 'custom', null, null);
         container.current.set(key, currentContainer);
-        reconcilorUpdateContainer(children, currentContainer, group, args);
+        reconcilorUpdateContainer(children, currentContainer, args);
         // const ele = React.cloneElement(children, { ...args });
         // reconcilor.updateContainer(ele, currentContainer, null);
       }
@@ -66,6 +67,14 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
     }
   }, []);
 
+  const removeAllContainer = useCallback(() => {
+    container.current.forEach((value, key) => {
+      const currentContainer = value;
+      reconcilor.updateContainer(null, currentContainer, null);
+    });
+    container.current.clear();
+  }, []);
+
   useLayoutEffect(() => {
     // init and release
     // eslint-disable-next-line no-undef
@@ -83,7 +92,7 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
     // eslint-disable-next-line no-undef
     console.log('update props', props, table);
 
-    table?.checkReactCustomLayout(); // init reactCustomLayout component
+    table?.checkReactCustomLayout(removeAllContainer); // init reactCustomLayout component
     if (table && !table.reactCustomLayout?.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) {
       table.reactCustomLayout?.setReactCreateGraphic(
         componentId,
@@ -97,8 +106,9 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
       // update all container
       container.current.forEach((value, key) => {
         const [col, row] = key.split('-').map(Number);
-        const width = table.getColWidth(col); // to be fixed: may be merge cell
-        const height = table.getRowHeight(row); // to be fixed: may be merge cell
+        // const width = table.getColWidth(col); // to be fixed: may be merge cell
+        // const height = table.getRowHeight(row); // to be fixed: may be merge cell
+        const { width, height } = getCellRect(col, row, table);
         const currentContainer = value;
         const args = {
           col,
@@ -117,7 +127,7 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
         };
         // update element in container
         const group = currentContainer.containerInfo;
-        reconcilorUpdateContainer(children, currentContainer, group, args);
+        reconcilorUpdateContainer(children, currentContainer, args);
         // reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);
         table.scenegraph.updateNextFrame();
       });
@@ -127,7 +137,7 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
   return null;
 };
 
-function reconcilorUpdateContainer(children: ReactElement, currentContainer: any, group: typeof Group, args: any) {
+function reconcilorUpdateContainer(children: ReactElement, currentContainer: any, args: any) {
   reconcilor.updateContainer(React.cloneElement(children, { ...args }), currentContainer, null);
   // group = group.firstChild;
   // if (isReactElement(group.attribute.html?.dom)) {
@@ -143,3 +153,9 @@ function reconcilorUpdateContainer(children: ReactElement, currentContainer: any
 function isReactElement(obj) {
   return obj && obj.$$typeof === Symbol.for('react.element');
 }
+
+function getCellRect(col: number, row: number, table: any) {
+  const range = table.getCellRange(col, row);
+  const rect = table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);
+  return rect;
+}

packages/vtable/src/components/react/react-custom-layout.ts

@@ -13,13 +13,15 @@ export function emptyCustomLayout(args: CustomRenderFunctionArg) {
 }
 
 export class ReactCustomLayout {
+  removeAllContainer: () => void;
   table: BaseTableAPI;
   customLayoutFuncCache: Map<string, ICustomLayoutFuc>;
   reactRemoveGraphicCache: Map<string, (col: number, row: number) => void>;
   headerCustomLayoutFuncCache: Map<string, ICustomLayoutFuc>;
   headerReactRemoveGraphicCache: Map<string, (col: number, row: number) => void>;
   // reactContainerCache: Map<number, Map<string, any>>;
-  constructor(table: BaseTableAPI) {
+  constructor(removeAllContainer: () => void, table: BaseTableAPI) {
+    this.removeAllContainer = removeAllContainer;
     this.table = table;
     this.customLayoutFuncCache = new Map();
     // this.reactContainerCache = new Map();
@@ -125,6 +127,10 @@ export class ReactCustomLayout {
       removeFun(col, row);
     }
   }
+
+  clearCache() {
+    this.removeAllContainer();
+  }
 }
 
 function getUpdateCustomCellRangeInListTable(componentId: string, table: BaseTableAPI, isHeaderCustomLayout?: boolean) {

packages/vtable/src/core/BaseTable.ts

@@ -4281,9 +4281,9 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
   //   startInertia(0, -1, 1, this.stateManager);
   // }
 
-  checkReactCustomLayout() {
+  checkReactCustomLayout(removeAllContainer: () => void) {
     if (!this.reactCustomLayout) {
-      this.reactCustomLayout = new ReactCustomLayout(this);
+      this.reactCustomLayout = new ReactCustomLayout(removeAllContainer, this);
     }
   }
 

packages/vtable/src/scenegraph/scenegraph.ts

@@ -320,6 +320,8 @@ export class Scenegraph {
       delete (this.tableGroup as any).border;
     }
     this.proxy?.release();
+
+    this.table.reactCustomLayout?.clearCache();
   }
 
   updateStageBackground() {
@@ -349,6 +351,7 @@ export class Scenegraph {
   createSceneGraph(skipRowHeightClear = false) {
     if (!skipRowHeightClear) {
       this.table.rowHeightsMap.clear();
+      this.table.internalProps.layoutMap.clearCellRangeMap();
     }
 
     // if (this.table.heightMode === 'autoHeight') {

packages/vtable/src/ts-types/base-table.ts

@@ -830,7 +830,7 @@ export interface BaseTableAPI {
   isAutoRowHeight: (row: number) => boolean;
 
   reactCustomLayout?: ReactCustomLayout;
-  checkReactCustomLayout: () => void;
+  checkReactCustomLayout: (removeAllContainer: () => void) => void;
   setSortedIndexMap: (field: FieldDef, filedMap: ISortedMapItem) => void;
 
   exportImg: () => string;