feat(render-engine): table wrap layout type

examples/src/docs/main.ts

@@ -25,7 +25,7 @@ import { UniverDocsThreadCommentUIPlugin } from '@univerjs/docs-thread-comment-u
 import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
 import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
 import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
-import { DEFAULT_DOCUMENT_DATA_CN } from '@univerjs/mockdata';
+import { DEFAULT_DOCUMENT_DATA_SIMPLE } from '@univerjs/mockdata';
 import { UniverUIPlugin } from '@univerjs/ui';
 import { enUS, faIR, ruRU, zhCN } from '../locales';
 
@@ -69,7 +69,7 @@ univer.registerPlugin(UniverDocsHyperLinkUIPlugin);
 univer.registerPlugin(UniverDocsMentionUIPlugin);
 
 if (!IS_E2E) {
-    univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_CN);
+    univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_SIMPLE);
 }
 
 // use for console test

mockdata/src/docs/default-document.data-simple.ts

@@ -15,7 +15,7 @@
  */
 
 import type { IDocumentData, IParagraph, ISectionBreak, ITable, ITableCell, ITableColumn, ITableRow } from '@univerjs/core';
-import { BooleanNumber, DocumentFlavor, HorizontalAlign, ObjectRelativeFromH, ObjectRelativeFromV, TableAlignmentType, TableCellHeightRule, TableSizeType, TableTextWrapType, Tools } from '@univerjs/core';
+import { BooleanNumber, DocumentFlavor, HorizontalAlign, ObjectRelativeFromH, ObjectRelativeFromV, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, Tools, VerticalAlignmentType } from '@univerjs/core';
 import { ptToPixel } from '@univerjs/engine-render';
 
 const TABLE_START = '\x1A'; // 表格开始
@@ -42,14 +42,26 @@ function createTableDataStream(tables: string[][]) {
 }
 
 const exampleTables = [
-    ['姓名\r这是一个段落\r这是二个段落\r这是三个段落\r这是四个段落', '语文', '数学', '英语', '总分'],
-    ['张三', '80', '90', '70', '240'],
-    ['李四', '80', '90', '70', '240'],
-    ['王五', '80', '90', '70', '240'],
-    ['赵六', '80', '90', '70', '240'],
+    ['Description', 'Date', 'Location'],
+    ['Description', 'Date', 'Location'],
+    ['Description', 'Date', 'Location'],
+    ['Description', 'Date', 'Location'],
+    ['Description', 'Date', 'Location'],
+    ['Description', 'Date', 'Location'],
+    ['Description', 'Date', 'Location'],
+    ['Description', 'Date', 'Location'],
+    ['Academic Senate Meeting Academic Senate Meeting Academic Senate Meeting Academic Senate Meeting Academic Senate Meeting', 'May 25, 2205', 'Building 99 Room 1'],
+    ['Commencement Meeting	', 'December 15, 2205', 'Building 42 Room 10'],
+    ['Dean\'s Council', 'February 1, 2206', 'Building 35 Room 5'],
+    ['Faculty Council', 'March 1, 2206', 'Building 35 Room 5'],
 ];
 
-const dataStream = `这是一个表格的用例\r${createTableDataStream(exampleTables)}班级成绩统计\r\n`;
+const title = 'Examples of Accessible Data Tables\r';
+const description = 'Basic Data Table with Column Headings\r';
+const summary = 'These example tables contain captions and summaries. When you copy any of these tables into your page you must edit the caption and summary. The caption can be edited in the Design view but the summary text must be edited in Code view. Click inside the table, then select the table tag on the tag selector, then switch to Code view and edit the text in the summary attribute.\r';
+const tableStream = createTableDataStream(exampleTables);
+
+const dataStream = `${title}${description}${tableStream}${summary}\n`;
 
 const startIndex = dataStream.indexOf(TABLE_START);
 const endIndex = dataStream.indexOf(TABLE_END);
@@ -81,11 +93,80 @@ function createParagraphAndSectionBreaks(dataStream: string) {
     return { paragraphs, sectionBreaks };
 }
 
+function createTextRuns() {
+    const textRuns = [];
+    let offset = 0;
+
+    textRuns.push({
+        st: offset,
+        ed: offset + title.length,
+        ts: {
+            fs: 16,
+            ff: 'Helvetica Neue',
+            cl: {
+                rgb: '#154734',
+            },
+            bl: BooleanNumber.TRUE,
+            ul: {
+                s: BooleanNumber.TRUE,
+            },
+        },
+    });
+
+    offset += title.length;
+
+    textRuns.push({
+        st: offset,
+        ed: offset + description.length,
+        ts: {
+            fs: 12,
+            ff: 'Helvetica Neue',
+            cl: {
+                rgb: '#54585a',
+            },
+            bl: BooleanNumber.FALSE,
+        },
+    });
+
+    offset += description.length;
+
+    textRuns.push({
+        st: offset,
+        ed: offset + tableStream.length,
+        ts: {
+            fs: 11,
+            ff: 'Helvetica Neue',
+            cl: {
+                rgb: '#54585a',
+            },
+            bl: BooleanNumber.FALSE,
+        },
+    });
+
+    offset += tableStream.length;
+
+    textRuns.push({
+        st: offset,
+        ed: offset + summary.length,
+        ts: {
+            fs: 12,
+            ff: 'Helvetica Neue',
+            cl: {
+                rgb: '#54585a',
+            },
+            bl: BooleanNumber.FALSE,
+        },
+    });
+
+    return textRuns;
+}
+
 const { paragraphs, sectionBreaks } = createParagraphAndSectionBreaks(dataStream);
 
 const tableCell: ITableCell = {
     rowSpan: 1,
     columnSpan: 1,
+    vAlign: VerticalAlignmentType.TOP,
     margin: {
         start: {
             v: 10,
@@ -105,9 +186,10 @@ const tableCell: ITableCell = {
 const tableRow: ITableRow = {
     tableCells: [...new Array(exampleTables[0].length).fill(Tools.deepClone(tableCell))],
     trHeight: {
-        val: { v: 30 },
-        hRule: TableCellHeightRule.AUTO,
+        val: { v: 120 },
+        hRule: TableRowHeightRule.AUTO,
     },
+    cantSplit: BooleanNumber.TRUE,
 };
 
 const tableColumn: ITableColumn = {
@@ -132,22 +214,22 @@ const table: ITable = {
     indent: {
         v: 0,
     },
-    textWrap: TableTextWrapType.NONE,
+    textWrap: TableTextWrapType.WRAP,
     position: {
         positionH: {
             relativeFrom: ObjectRelativeFromH.PAGE,
-            posOffset: 0,
+            posOffset: 100,
         },
         positionV: {
             relativeFrom: ObjectRelativeFromV.PAGE,
-            posOffset: 0,
+            posOffset: 600,
         },
     },
     dist: {
-        distB: 0,
-        distL: 0,
-        distR: 0,
-        distT: 0,
+        distB: 5,
+        distL: 5,
+        distR: 10,
+        distT: 5,
     },
     cellMargin: {
         start: {
@@ -183,59 +265,7 @@ export const DEFAULT_DOCUMENT_DATA_SIMPLE: IDocumentData = {
     body: {
         dataStream,
         customBlocks: [],
-        textRuns: [
-            {
-                st: 0,
-                ed: 9,
-                ts: {
-                    fs: 24,
-                    ff: 'Microsoft YaHei',
-                    cl: {
-                        rgb: 'rgb(0, 0, 0)',
-                    },
-                    bl: BooleanNumber.TRUE,
-                    ul: {
-                        s: BooleanNumber.TRUE,
-                    },
-                },
-            },
-            {
-                st: 9,
-                ed: 12,
-                ts: {
-                    fs: 14,
-                    ff: 'Times New Roman',
-                    cl: {
-                        rgb: 'rgb(30, 30, 30)',
-                    },
-                    bl: BooleanNumber.FALSE,
-                },
-            },
-            {
-                st: 13,
-                ed: 15,
-                ts: {
-                    fs: 14,
-                    ff: 'Times New Roman',
-                    cl: {
-                        rgb: 'rgb(130, 30, 30)',
-                    },
-                    bl: BooleanNumber.TRUE,
-                },
-            },
-            {
-                st: 16,
-                ed: dataStream.length - 2,
-                ts: {
-                    fs: 14,
-                    ff: 'Times New Roman',
-                    cl: {
-                        rgb: 'rgb(30, 30, 30)',
-                    },
-                    bl: BooleanNumber.FALSE,
-                },
-            },
-        ],
+        textRuns: createTextRuns(),
         paragraphs,
         tables: [{
             startIndex,
@@ -254,6 +284,9 @@ export const DEFAULT_DOCUMENT_DATA_SIMPLE: IDocumentData = {
         marginBottom: ptToPixel(50),
         marginRight: ptToPixel(50),
         marginLeft: ptToPixel(50),
+        autoHyphenation: BooleanNumber.TRUE,
+        consecutiveHyphenLimit: 3,
+        doNotHyphenateCaps: BooleanNumber.TRUE,
         renderConfig: {
             vertexAngle: 0,
             centerAngle: 0,

packages/core/src/types/interfaces/i-document-data.ts

@@ -844,7 +844,7 @@ export interface IDistFromText {
 }
 
 export interface ITableAnchor {
-    positionH: IObjectPositionH; // horzAnchor (Table Horizontal Anchor)
+    positionH: IObjectPositionH; // horizontal Anchor (Table Horizontal Anchor)
     positionV: IObjectPositionV;
 }
 
@@ -910,7 +910,7 @@ export interface ITable {
 // the value the h attribute.
 //  If the value of hRule is exact, then the table row's height should be exactly the
 // value of the h attribute.
-export enum TableCellHeightRule {
+export enum TableRowHeightRule {
     AUTO,
     AT_LEAST,
     EXACT,
@@ -922,7 +922,7 @@ export interface ITableColumn { // 合并拆分列，HTML 合并单元格
 
 export interface ITableRowSize {
     val: INumberUnit;
-    hRule: TableCellHeightRule;
+    hRule: TableRowHeightRule;
 }
 
 /**

packages/docs-ui/src/commands/commands/table/table.ts

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { DataStreamTreeTokenType, generateRandomId, ObjectRelativeFromH, ObjectRelativeFromV, TableAlignmentType, TableCellHeightRule, TableSizeType, TableTextWrapType, Tools } from '@univerjs/core';
 import type { IParagraph, ISectionBreak, ITable, ITableCell, ITableColumn, ITableRow, Nullable } from '@univerjs/core';
 import type { DataStreamTreeNode, DocumentViewModel, ITextRangeWithStyle } from '@univerjs/engine-render';
+import { DataStreamTreeTokenType, generateRandomId, ObjectRelativeFromH, ObjectRelativeFromV, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, Tools } from '@univerjs/core';
 
 export enum INSERT_ROW_POSITION {
     ABOVE,
@@ -90,7 +90,7 @@ export function getEmptyTableRow(col: number) {
         tableCells: [...new Array(col).fill(null).map(() => Tools.deepClone(tableCell))],
         trHeight: {
             val: { v: 30 },
-            hRule: TableCellHeightRule.AUTO,
+            hRule: TableRowHeightRule.AUTO,
         },
     };
 

packages/docs-ui/src/services/selection/convert-rect-range.ts

@@ -198,16 +198,17 @@ export class NodePositionConvertToRectRange {
             this._liquid.translate(0, table.top);
 
             const { x, y } = this._liquid;
+            const { left: tableLeft } = table;
 
             for (const row of table.rows) {
                 if (row.index >= startRow && row.index <= endRow) {
                     const rowStartCell = row.cells[startColumn];
                     const rowEndCell = row.cells[endColumn];
 
                     const position = {
-                        startX: x + rowStartCell.left,
+                        startX: x + rowStartCell.left + tableLeft,
                         startY: y + row.top,
-                        endX: x + rowEndCell.left + rowEndCell.pageWidth,
+                        endX: x + rowEndCell.left + rowEndCell.pageWidth + tableLeft,
                         endY: y + row.top + row.height,
                     };
 

packages/engine-render/src/basics/i-document-skeleton-cached.ts

@@ -23,6 +23,7 @@ import type {
     INestingLevel,
     IParagraphProperties,
     ITable,
+    ITableRow,
     ITextStyle,
     PageOrientType,
 } from '@univerjs/core';
@@ -135,6 +136,7 @@ export interface IDocumentSkeletonRow {
     top: number; // top 相对于表格上沿
     st: number; // startIndex 文本开始索引
     ed: number; // endIndex 文本结束索引
+    rowSource: ITableRow;
     parent?: IDocumentSkeletonTable;
 }
 

packages/engine-render/src/basics/interfaces.ts

@@ -41,8 +41,8 @@ import type {
     IDocumentSkeletonHeaderFooter,
     IDocumentSkeletonTable,
 } from './i-document-skeleton-cached';
-import type { Vector2 } from './vector2';
 import type { ITransformerConfig } from './transformer-config';
+import type { Vector2 } from './vector2';
 
 export interface IObjectFullState extends ITransformState {
     strokeWidth?: number;
@@ -115,7 +115,7 @@ export interface IParagraphTableCache {
 
 export interface IParagraphConfig {
     paragraphIndex: number;
-    paragraphAffectSkeDrawings?: Map<string, IDocumentSkeletonDrawing>;
+    paragraphNonInlineSkeDrawings?: Map<string, IDocumentSkeletonDrawing>;
     paragraphInlineSkeDrawings?: Map<string, IDocumentSkeletonDrawing>;
     skeTablesInParagraph?: IParagraphTableCache[];
     // headerAndFooterAffectSkeDrawings?: Map<string, IDocumentSkeletonDrawing>;

packages/engine-render/src/components/docs/document.ts

@@ -561,8 +561,17 @@ export class Documents extends DocComponent {
         this._drawTableCellBorders(ctx, page, cell);
         const { sections, marginLeft, marginTop } = cell;
 
+        // eslint-disable-next-line no-param-reassign
         alignOffsetNoAngle = Vector2.create(alignOffsetNoAngle.x + marginLeft, alignOffsetNoAngle.y + marginTop);
 
+        ctx.save();
+        const { x, y } = this._drawLiquid;
+        const { pageWidth, pageHeight } = cell;
+        ctx.beginPath();
+        ctx.rectByPrecision(x + page.marginLeft, y + page.marginTop, pageWidth, pageHeight);
+        ctx.closePath();
+        ctx.clip();
+
         for (const section of sections) {
             const { columns } = section;
 
@@ -703,6 +712,8 @@ export class Documents extends DocComponent {
 
             this._drawLiquid.translateRestore();
         }
+
+        ctx.restore();
     }
 
     private _drawTableCellBorders(