fix: 修复合并单元格滚动出可视范围后边框绘制错误 close #3048

antvis · Dec 20, 2024 · 5049c86 · 5049c86
1 parent 7e30008
commit 5049c86
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/packages/s2-core/__tests__/bugs/issue-3048-spec.ts b/packages/s2-core/__tests__/bugs/issue-3048-spec.ts
@@ -0,0 +1,58 @@
+/**
+ * @description spec for issue #3048
+ * https://github.com/antvis/S2/issues/3048
+ */
+import { createPivotSheet, sleep } from '../util/helpers';
+
+describe('Merged Cells Scroll Tests', () => {
+  test('should render correctly borders after scroll out of view', async () => {
+    const s2 = createPivotSheet(
+      {
+        width: 800,
+        height: 600,
+        mergedCellsInfo: [
+          [
+            {
+              rowIndex: 0,
+              colIndex: 1,
+            },
+            {
+              rowIndex: 1,
+              colIndex: 1,
+              showText: true,
+            },
+          ],
+        ],
+        style: {
+          dataCell: {
+            height: 150,
+          },
+        },
+      },
+      { useSimpleData: false },
+    );
+
+    await s2.render();
+
+    // 让合并单元格滚动出可视范围内
+    s2.interaction.scrollToBottom({ animate: false });
+    await sleep(500);
+
+    // 滚动回来
+    s2.interaction.scrollToTop({ animate: false });
+    await sleep(500);
+
+    const mergedCellChildNodes = s2.facet
+      .getMergedCells()[0]
+      .children.map((node) => node.nodeName);
+
+    // 边框线正常添加
+    expect(mergedCellChildNodes).toEqual([
+      'polygon',
+      'text',
+      'line',
+      'line',
+      'line',
+    ]);
+  });
+});
diff --git a/packages/s2-core/__tests__/unit/utils/merge-cell-spec.ts b/packages/s2-core/__tests__/unit/utils/merge-cell-spec.ts
@@ -44,6 +44,7 @@ describe('Merge Cells Test', () => {
     mockInstance.store = new Store();
     mockInstance.options = {
       conditions: [],
+      dataCell: jest.fn(() => ({})),
     };
     mockInstance.interaction = {
       getPanelGroupAllDataCells() {

diff --git a/packages/s2-core/src/utils/interaction/merge-cell.ts b/packages/s2-core/src/utils/interaction/merge-cell.ts
@@ -38,10 +38,18 @@ export const getInvisibleInfo = (
     );
 
     if (meta) {
-      const cell = sheet?.options?.dataCell?.(meta, meta.spreadsheet);
+      const cell = sheet?.options?.dataCell?.(meta, meta.spreadsheet)!;
+
+      if (cell) {
+        /**
+         * 避免移除可视范围后丢失 position 属性:  https://github.com/antvis/S2/issues/3048
+         * 绘制线依赖 position 属性 => packages/s2-core/src/utils/cell/merged-cell.ts#getRightAndBottomCells
+         */
+        cell.position = [cellInfo.rowIndex!, cellInfo.colIndex!];
+        cells.push(cell!);
+      }
 
       viewMeta = cellInfo?.showText ? meta : viewMeta;
-      cells.push(cell!);
     }
   });