fix(vtable): refresh custom merged corner layout

docs/assets/demo/en/custom-render/complex-corner.md

@@ -71,22 +71,31 @@ const option = {
   },
   corner: {
     titleOnDimension: 'row',
+    disableHeaderHover: true,
+    disableHeaderSelect: true,
     customLayout: args => {
       const { table, row, col, rect } = args;
       const { height, width } = rect ?? table.getCellRect(col, row);
+      const provinceWidth = table.getColWidth(0);
+      const cityWidth = table.getColWidth(1);
+      const categoryHeight = table.getRowHeight(0);
+      const provinceCenterX = provinceWidth / 2;
+      const cityCenterX = provinceWidth + cityWidth / 2;
+      const indicatorX = provinceWidth + cityWidth + 6;
+      const endCategoryX = width - 80;
       const container = createGroup({
         height,
         width
       });
 
       // 定义文本内容的数组
       const texts = [
-        { text: 'province', fontSize: 18, x: 10, y: rect.height - 25 },
-        { text: 'city', fontSize: 18, x: 105, y: rect.height - 25 },
-        { text: 'data', fontSize: 18, x: rect.width - 50, y: rect.height - 35 },
-        { text: 'subCategory', fontSize: 18, x: rect.width - 100, y: rect.height - 85 },
-        { text: 'category', fontSize: 18, x: rect.width - 80, y: 18 },
-        { text: 'indicator', fontSize: 16, x: 176, y: rect.height - 20 }
+        { text: 'province', fontSize: 18, x: provinceCenterX - 36, y: height - 25 },
+        { text: 'city', fontSize: 18, x: cityCenterX - 14, y: height - 25 },
+        { text: 'data', fontSize: 18, x: endCategoryX + 30, y: height - 35 },
+        { text: 'subCategory', fontSize: 18, x: endCategoryX - 20, y: height - 85 },
+        { text: 'category', fontSize: 18, x: endCategoryX, y: Math.max(18, categoryHeight / 2 - 9) },
+        { text: 'indicator', fontSize: 16, x: indicatorX, y: height - 20 }
       ];
 
       // 循环添加文本
@@ -105,17 +114,16 @@ const option = {
 
       // 定义线段的点
       const linePoints = [
-        { x: rect.left, y: rect.top },
         { x: 0, y: 0 },
-        { x: rect.width - 40, y: rect.height },
+        { x: width - 40, y: height },
         { x: 0, y: 0 },
-        { x: 173, y: rect.height },
+        { x: provinceWidth + cityWidth + 3, y: height },
         { x: 0, y: 0 },
-        { x: 84, y: rect.height },
+        { x: provinceWidth, y: height },
         { x: 0, y: 0 },
-        { x: rect.width, y: rect.height - 90 },
+        { x: width, y: categoryHeight },
         { x: 0, y: 0 },
-        { x: rect.width, y: rect.height - 38 },
+        { x: width, y: height - 38 },
         { x: 0, y: 0 }
       ];
 
@@ -398,6 +406,10 @@ const option = {
   rightFrozenColCount: 1,
   dragOrder:{ 
     dragHeaderMode: 'all'
+  },
+  resize: {
+    columnResizeMode: 'all',
+    rowResizeMode: 'all'
   }
 };
 

docs/assets/demo/zh/custom-render/complex-corner.md

@@ -71,22 +71,31 @@ const option = {
   },
   corner: {
     titleOnDimension: 'row',
+    disableHeaderHover: true,
+    disableHeaderSelect: true,
     customLayout: args => {
       const { table, row, col, rect } = args;
       const { height, width } = rect ?? table.getCellRect(col, row);
+      const provinceWidth = table.getColWidth(0);
+      const cityWidth = table.getColWidth(1);
+      const categoryHeight = table.getRowHeight(0);
+      const provinceCenterX = provinceWidth / 2;
+      const cityCenterX = provinceWidth + cityWidth / 2;
+      const indicatorX = provinceWidth + cityWidth + 6;
+      const endCategoryX = width - 50;
       const container = createGroup({
         height,
         width
       });
 
       // 定义文本内容的数组
       const texts = [
-        { text: '省份', fontSize: 18, x: 30, y: rect.height - 25 },
-        { text: '城市', fontSize: 18, x: 105, y: rect.height - 25 },
-        { text: '数据', fontSize: 18, x: rect.width - 50, y: rect.height - 35 },
-        { text: '子类别', fontSize: 18, x: rect.width - 50, y: rect.height - 85 },
-        { text: '类别', fontSize: 18, x: rect.width - 50, y: 18 },
-        { text: '指标', fontSize: 16, x: 176, y: rect.height - 20 }
+        { text: '省份', fontSize: 18, x: provinceCenterX - 18, y: height - 25 },
+        { text: '城市', fontSize: 18, x: cityCenterX - 18, y: height - 25 },
+        { text: '数据', fontSize: 18, x: endCategoryX, y: height - 35 },
+        { text: '子类别', fontSize: 18, x: endCategoryX, y: height - 85 },
+        { text: '类别', fontSize: 18, x: endCategoryX, y: Math.max(18, categoryHeight / 2 - 9) },
+        { text: '指标', fontSize: 16, x: indicatorX, y: height - 20 }
       ];
 
       // 循环添加文本
@@ -105,17 +114,16 @@ const option = {
 
       // 定义线段的点
       const linePoints = [
-        { x: rect.left, y: rect.top },
         { x: 0, y: 0 },
-        { x: rect.width - 40, y: rect.height },
+        { x: width - 40, y: height },
         { x: 0, y: 0 },
-        { x: 173, y: rect.height },
+        { x: provinceWidth + cityWidth + 3, y: height },
         { x: 0, y: 0 },
-        { x: 84, y: rect.height },
+        { x: provinceWidth, y: height },
         { x: 0, y: 0 },
-        { x: rect.width, y: rect.height - 90 },
+        { x: width, y: categoryHeight },
         { x: 0, y: 0 },
-        { x: rect.width, y: rect.height - 38 },
+        { x: width, y: height - 38 },
         { x: 0, y: 0 }
       ];
 
@@ -398,6 +406,10 @@ const option = {
   rightFrozenColCount: 1,
   dragOrder: {
     dragHeaderMode: 'all'
+  },
+  resize: {
+    columnResizeMode: 'all',
+    rowResizeMode: 'all'
   }
 };
 

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

@@ -106,10 +106,11 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
     const key = `${col}-${row}`;
     if (container.current.has(key)) {
       const currentContainer = container.current.get(key);
-      module.reconcilor.updateContainer(null, currentContainer, null);
-      // group = currentContainer.containerInfo;
-      currentContainer.containerInfo.delete();
-      container.current.delete(key);
+      reconcilorUnmountContainer(module, currentContainer);
+      if (container.current.get(key) === currentContainer) {
+        currentContainer.containerInfo.delete();
+        container.current.delete(key);
+      }
     }
   }, []);
 
@@ -119,12 +120,20 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
       container.current.clear();
       return;
     }
-    container.current.forEach((value, key) => {
-      const currentContainer = value;
-      module.reconcilor.updateContainer(null, currentContainer, null);
-      currentContainer.containerInfo.delete();
+    const pendingContainers = Array.from(container.current.entries());
+    batchReconcilerUpdates(module, () => {
+      pendingContainers.forEach(([, currentContainer]) => {
+        requestReconcilerUnmountContainer(module, currentContainer);
+      });
+    });
+    flushReconcilerWork(module);
+
+    pendingContainers.forEach(([key, currentContainer]) => {
+      if (container.current.get(key) === currentContainer) {
+        currentContainer.containerInfo.delete();
+        container.current.delete(key);
+      }
     });
-    container.current.clear();
   }, []);
 
   useLayoutEffect(() => {
@@ -219,10 +228,7 @@ function reconcilorUpdateContainer(module: ReconcilerModule, children: ReactElem
   const updateContainerSync = (reconcilor as any).updateContainerSync;
   if (typeof updateContainerSync === 'function') {
     updateContainerSync(element, currentContainer, null);
-    const flushSyncWork = (reconcilor as any).flushSyncWork;
-    if (typeof flushSyncWork === 'function') {
-      flushSyncWork();
-    }
+    flushReconcilerWork(module);
     return;
   }
   reconcilor.updateContainer(element, currentContainer, null);
@@ -237,6 +243,60 @@ function reconcilorUpdateContainer(module: ReconcilerModule, children: ReactElem
   // }
 }
 
+function reconcilorUnmountContainer(module: ReconcilerModule, currentContainer: any): boolean {
+  requestReconcilerUnmountContainer(module, currentContainer);
+  return flushReconcilerWork(module);
+}
+
+function requestReconcilerUnmountContainer(module: ReconcilerModule, currentContainer: any) {
+  const { reconcilor } = module;
+  const updateContainerSync = (reconcilor as any).updateContainerSync;
+  if (typeof updateContainerSync === 'function') {
+    try {
+      updateContainerSync(null, currentContainer, null);
+      return;
+    } catch {
+      reconcilor.updateContainer(null, currentContainer, null);
+      return;
+    }
+  }
+  reconcilor.updateContainer(null, currentContainer, null);
+}
+
+function flushReconcilerWork(module: ReconcilerModule): boolean {
+  const { reconcilor } = module;
+  const flushSyncWork = (reconcilor as any).flushSyncWork;
+  if (typeof flushSyncWork === 'function') {
+    try {
+      const result = flushSyncWork();
+      if (result === true) {
+        return false;
+      }
+    } catch {
+      return false;
+    }
+  }
+
+  const flushPassiveEffects = (reconcilor as any).flushPassiveEffects;
+  if (typeof flushPassiveEffects === 'function') {
+    try {
+      flushPassiveEffects();
+    } catch {
+      return false;
+    }
+  }
+  return true;
+}
+
+function batchReconcilerUpdates(module: ReconcilerModule, callback: () => void) {
+  const batchedUpdates = (module.reconcilor as any).batchedUpdates;
+  if (typeof batchedUpdates === 'function') {
+    batchedUpdates(callback);
+  } else {
+    callback();
+  }
+}
+
 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);