feat: render of row across pages

dream-num · Nov 16, 2024 · 2b164ac · 2b164ac
1 parent 376a119
commit 2b164ac
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 17 deletions.
diff --git a/packages/engine-render/src/components/docs/layout/block/table.ts b/packages/engine-render/src/components/docs/layout/block/table.ts
@@ -20,7 +20,7 @@ import type { DataStreamTreeNode } from '../../view-model/data-stream-tree-node'
 import type { DocumentViewModel } from '../../view-model/document-view-model';
 import type { ILayoutContext } from '../tools';
 import { BooleanNumber, TableAlignmentType, TableRowHeightRule, VerticalAlignmentType } from '@univerjs/core';
-import { createSkeletonCellPages } from '../model/page';
+import { createNullCellPage, createSkeletonCellPages } from '../model/page';
 
 export function createTableSkeleton(
     ctx: ILayoutContext,
@@ -170,13 +170,9 @@ export function createTableSkeletons(
         const rowSource = table.tableRows[row];
         const { trHeight, cantSplit } = rowSource;
         const rowSkeletons: IDocumentSkeletonRow[] = [];
-        const rowSkeleton = _getNullTableRowSkeleton(startIndex, endIndex, row, rowSource);
         const { hRule, val } = trHeight;
         const canRowSplit = cantSplit === BooleanNumber.TRUE && trHeight.hRule === TableRowHeightRule.AUTO;
 
-        rowSkeletons.push(rowSkeleton);
-
-        let left = 0;
         const rowHeights = [0];
 
         for (const cellNode of cellNodes) {
@@ -195,6 +191,22 @@ export function createTableSkeletons(
 
             while (rowSkeletons.length < cellPageSkeletons.length) {
                 const rowSkeleton = _getNullTableRowSkeleton(startIndex, endIndex, row, rowSource);
+                const colCount = cellNodes.length;
+
+                // Fill the row with null cell pages.
+                rowSkeleton.cells = [...new Array(colCount)].map((_, i) => {
+                    const cellSkeleton = createNullCellPage(
+                        ctx,
+                        sectionBreakConfig,
+                        table,
+                        row,
+                        i
+                    ).page;
+
+                    cellSkeleton.parent = rowSkeleton;
+
+                    return cellSkeleton;
+                });
 
                 rowSkeletons.push(rowSkeleton);
             }
@@ -208,14 +220,11 @@ export function createTableSkeletons(
                 const cellPageHeight = cellPageSkeleton.height + cellMarginTop + cellMarginBottom;
                 const pageIndex = cellPageSkeletons.indexOf(cellPageSkeleton);
                 const rowSke = rowSkeletons[pageIndex];
-                cellPageSkeleton.left = left;
 
                 cellPageSkeleton.parent = rowSke;
                 rowSke.cells[col] = cellPageSkeleton;
                 rowHeights[pageIndex] = Math.max(rowHeights[pageIndex], cellPageHeight);
             }
-
-            left += cellPageSkeletons[0].pageWidth;
         }
 
         for (const rowSke of rowSkeletons) {
@@ -227,9 +236,15 @@ export function createTableSkeletons(
                 rowHeights[rowIndex] = val.v;
             }
 
+            let left = 0;
             // Set row height to cell page height.
             for (const cellPageSkeleton of rowSke.cells) {
+                cellPageSkeleton.left = left;
                 cellPageSkeleton.pageHeight = rowHeights[rowIndex];
+
+                left += cellPageSkeleton.pageWidth;
+
+                tableWidth = Math.max(tableWidth, left);
             }
         }
 
@@ -306,8 +321,6 @@ export function createTableSkeletons(
             remainHeight -= rowHeight;
             curTableSkeleton.height = rowTop;
         }
-
-        tableWidth = Math.max(tableWidth, left);
     }
 
     const tableLeft = _getTableLeft(pageWidth - marginLeft - marginRight, tableWidth, table.align, table.indent);

diff --git a/packages/engine-render/src/components/docs/layout/model/page.ts b/packages/engine-render/src/components/docs/layout/model/page.ts
@@ -279,10 +279,8 @@ function _createSkeletonHeaderFooter(
     return page;
 }
 
-export function createSkeletonCellPages(
+export function createNullCellPage(
     ctx: ILayoutContext,
-    viewModel: DocumentViewModel,
-    cellNode: DataStreamTreeNode,
     sectionBreakConfig: ISectionBreakConfig,
     tableConfig: ITable,
     row: number,
@@ -294,8 +292,7 @@ export function createSkeletonCellPages(
     const { skeletonResourceReference } = ctx;
     const { cellMargin, tableRows, tableColumns, tableId } = tableConfig;
     const cellConfig = tableRows[row].tableCells[col];
-    // Table cell only has one section.
-    const sectionNode = cellNode.children[0];
+
     const {
         start = { v: 10 },
         end = { v: 10 },
@@ -335,6 +332,36 @@ export function createSkeletonCellPages(
     areaPage.type = DocumentSkeletonPageType.CELL;
     areaPage.segmentId = tableId;
 
+    return {
+        page: areaPage,
+        sectionBreakConfig: cellSectionBreakConfig,
+    };
+}
+
+export function createSkeletonCellPages(
+    ctx: ILayoutContext,
+    viewModel: DocumentViewModel,
+    cellNode: DataStreamTreeNode,
+    sectionBreakConfig: ISectionBreakConfig,
+    tableConfig: ITable,
+    row: number,
+    col: number,
+    availableHeight: number = Number.POSITIVE_INFINITY,
+    maxCellPageHeight: number = Number.POSITIVE_INFINITY
+) {
+    // Table cell only has one section.
+    const sectionNode = cellNode.children[0];
+
+    const { page: areaPage, sectionBreakConfig: cellSectionBreakConfig } = createNullCellPage(
+        ctx,
+        sectionBreakConfig,
+        tableConfig,
+        row,
+        col,
+        availableHeight,
+        maxCellPageHeight
+    );
+
     const { pages } = dealWithSection(
         ctx,
         viewModel,

diff --git a/packages/engine-render/src/components/docs/layout/model/section.ts b/packages/engine-render/src/components/docs/layout/model/section.ts
@@ -15,10 +15,10 @@
  */
 
 import type { ISectionColumnProperties } from '@univerjs/core';
-import { ColumnSeparatorType } from '@univerjs/core';
-
 import type { IDocumentSkeletonColumn, IDocumentSkeletonSection } from '../../../../basics/i-document-skeleton-cached';
 
+import { ColumnSeparatorType } from '@univerjs/core';
+
 export function createSkeletonSection(
     columnProperties: ISectionColumnProperties[] = [],
     columnSeparatorType: ColumnSeparatorType = ColumnSeparatorType.NONE,