fix: 适配虚拟滚动渲染场景

antvis · Dec 4, 2023 · 985e5e8 · 985e5e8
1 parent 113e63e
commit 985e5e8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
@@ -1278,10 +1278,8 @@ export abstract class BaseFacet {
   addDataCell = (cell: DataCell) => {
     this.panelScrollGroup?.appendChild(cell);
 
-    setTimeout(() => {
-      this.spreadsheet.emit(S2Event.DATA_CELL_RENDER, cell);
-      this.spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
-    }, 50);
+    this.spreadsheet.emit(S2Event.DATA_CELL_RENDER, cell);
+    this.spreadsheet.emit(S2Event.LAYOUT_CELL_RENDER, cell);
   };
 
   realDataCellRender = (scrollX: number, scrollY: number) => {

diff --git a/packages/s2-react/playground/components/ChartSheet.tsx b/packages/s2-react/playground/components/ChartSheet.tsx
@@ -32,6 +32,11 @@ const options: SheetComponentOptions = {
 };
 
 const onDataCellRender: SheetComponentsProps['onDataCellRender'] = (cell) => {
+  // 普通数值单元格正常展示
+  if (!cell.isChartData()) {
+    return;
+  }
+
   const chartOptions = cell.getRenderChartOptions();
 
   // https://g2.antv.antgroup.com/manual/extra-topics/bundle#g2stdlib

diff --git a/s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md b/s2-site/docs/manual/advanced/custom/custom-g2-chart.zh.md
@@ -118,6 +118,11 @@ s2.render();
 
 ```ts
 s2.on(S2Event.DATA_CELL_RENDER, (cell) => {
+  // 如果是普通数值单元格正常展示
+  if (!cell.isChartData()) {
+    return;
+  }
+
   const chartOptions = cell.getRenderChartOptions();
 
   renderToMountedElement(chartOptions, {
@@ -138,6 +143,11 @@ import { renderToMountedElement, stdlib } from '@antv/g2';
 
 function App() {
   const onDataCellRender = (cell) => {
+    // 如果是普通数值单元格正常展示
+    if (!cell.isChartData()) {
+      return;
+    }
+
     const chartOptions = cell.getRenderChartOptions();
 
     renderToMountedElement(chartOptions, {

diff --git a/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts b/s2-site/examples/custom/custom-g2-chart/demo/custom-g2-chart.ts
@@ -124,6 +124,11 @@ const s2 = new PivotSheet(container, s2DataConfig, s2Options);
 
 // 监听数值单元格渲染完成后, 使用 `G2` 提供的 `renderToMountedElement` 将图表挂载在 `S2` 单元格实例上
 s2.on(S2Event.DATA_CELL_RENDER, (cell) => {
+  // 普通数值单元格正常展示
+  if (!cell.isChartData()) {
+    return;
+  }
+
   // 获取 G2 渲染到 S2 单元格内所需配置
   const chartOptions = cell.getRenderChartOptions();