Skip to content

Commit

Permalink
feat: cell vertical align and row height
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jocs
Jocs committed Nov 11, 2024
1 parent 83f889e commit a85bc17
Show file tree
Hide file tree
Showing 9 changed files with 96 additions and 44 deletions.
16 changes: 8 additions & 8 deletions mockdata/src/docs/default-document.data-simple.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'; // 表格开始
Expand Down Expand Up @@ -43,7 +43,7 @@ function createTableDataStream(tables: string[][]) {

const exampleTables = [
['Description', 'Date', 'Location'],
['Academic Senate Meeting', 'May 25, 2205', 'Building 99 Room 1'],
['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'],
Expand Down Expand Up @@ -159,6 +159,7 @@ const { paragraphs, sectionBreaks } = createParagraphAndSectionBreaks(dataStream
const tableCell: ITableCell = {
rowSpan: 1,
columnSpan: 1,
vAlign: VerticalAlignmentType.CENTER,
margin: {
start: {
v: 10,
Expand All @@ -178,8 +179,8 @@ 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.EXACT,
},
};

Expand Down Expand Up @@ -212,8 +213,8 @@ const table: ITable = {
posOffset: 100,
},
positionV: {
relativeFrom: ObjectRelativeFromV.PAGE,
posOffset: 200,
relativeFrom: ObjectRelativeFromV.PARAGRAPH,
posOffset: 0,
},
},
dist: {
Expand Down Expand Up @@ -276,8 +277,7 @@ export const DEFAULT_DOCUMENT_DATA_SIMPLE: IDocumentData = {
marginRight: ptToPixel(50),
marginLeft: ptToPixel(50),
autoHyphenation: BooleanNumber.TRUE,
consecutiveHyphenLimit: 2,
hyphenationZone: 10,
consecutiveHyphenLimit: 3,
doNotHyphenateCaps: BooleanNumber.TRUE,
renderConfig: {
vertexAngle: 0,
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/types/interfaces/i-document-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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,
Expand All @@ -922,7 +922,7 @@ export interface ITableColumn { // 合并拆分列，HTML 合并单元格

export interface ITableRowSize {
val: INumberUnit;
hRule: TableCellHeightRule;
hRule: TableRowHeightRule;
}

/**
Expand Down
4 changes: 2 additions & 2 deletions packages/docs-ui/src/commands/commands/table/table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
},
};

Expand Down
11 changes: 11 additions & 0 deletions packages/engine-render/src/components/docs/document.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -703,6 +712,8 @@ export class Documents extends DocComponent {

this._drawLiquid.translateRestore();
}

ctx.restore();
}

private _drawTableCellBorders(
Expand Down
7 changes: 2 additions & 5 deletions packages/engine-render/src/components/docs/extensions/font-and-base-line.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@ export class FontAndBaseLine extends docExtension {

override Z_INDEX = DOC_EXTENSION_Z_INDEX;

private _preFontString = '';

private _preFontColor = '';

override draw(ctx: UniverRenderingContext, parentScale: IScale, glyph: IDocumentSkeletonGlyph) {
Expand All @@ -57,8 +55,8 @@ export class FontAndBaseLine extends docExtension {
return;
}

if (this._preFontString !== fontStyle?.fontString) {
ctx.font = this._preFontString = fontStyle?.fontString || '';
if (ctx.font !== fontStyle?.fontString) {
ctx.font = fontStyle?.fontString || '';
}

const { cl: colorStyle, va: baselineOffset } = textStyle;
Expand Down Expand Up @@ -126,7 +124,6 @@ export class FontAndBaseLine extends docExtension {
}

override clearCache() {
this._preFontString = '';
this._preFontColor = '';
}
}
Expand Down
41 changes: 22 additions & 19 deletions packages/engine-render/src/components/docs/layout/block/paragraph/layout-ruler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -788,26 +788,29 @@ function _updateAndPositionTable(

const { tableId, table } = lastTable;
const { tableSource } = table;
const isOriginTable = tableId.indexOf('#-#') === -1;

switch (tableSource.textWrap) {
case TableTextWrapType.NONE: {
table.top = lineTop;
break;
}
case TableTextWrapType.WRAP: {
__updateWrapTablePosition(
ctx,
table,
lineTop,
lineHeight,
column,
paragraphIndex,
drawingAnchorTop
);
break;
}
default: {
throw new Error(`Unsupported table text wrap type: ${tableSource.textWrap}`);
if (isOriginTable) {
switch (tableSource.textWrap) {
case TableTextWrapType.NONE: {
table.top = lineTop;
break;
}
case TableTextWrapType.WRAP: {
__updateWrapTablePosition(
ctx,
table,
lineTop,
lineHeight,
column,
paragraphIndex,
drawingAnchorTop
);
break;
}
default: {
throw new Error(`Unsupported table text wrap type: ${tableSource.textWrap}`);
}
}
}

Expand Down
2 changes: 0 additions & 2 deletions packages/engine-render/src/components/docs/layout/block/section.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,6 @@ export function dealWithSection(
currentPageCache,
sectionBreakConfig
);
} else if (paragraphNode.nodeType === DataStreamTreeNodeType.TABLE) {
// Table 表格
}

if (skeletonPages.length === 0) {
Expand Down
44 changes: 43 additions & 1 deletion packages/engine-render/src/components/docs/layout/block/table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import type { IDocumentSkeletonPage, IDocumentSkeletonRow, IDocumentSkeletonTabl
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 { TableAlignmentType } from '@univerjs/core';
import { TableAlignmentType, TableRowHeightRule, VerticalAlignmentType } from '@univerjs/core';
import { createSkeletonCellPage } from '../model/page';

export function createTableSkeleton(
Expand All @@ -43,6 +43,10 @@ export function createTableSkeleton(
const { children: cellNodes, startIndex, endIndex } = rowNode;
const row = rowNodes.indexOf(rowNode);
const rowSkeleton = _getNullTableRowSkeleton(startIndex, endIndex, row, tableSkeleton);
const rowDataModel = table.tableRows[row];
const { trHeight } = rowDataModel;
const { hRule, val } = trHeight;

tableSkeleton.rows.push(rowSkeleton);
let left = 0;
let rowHeight = 0;
Expand All @@ -68,11 +72,49 @@ export function createTableSkeleton(
rowHeight = Math.max(rowHeight, pageHeight);
}

if (hRule === TableRowHeightRule.AT_LEAST) {
rowHeight = Math.max(rowHeight, val.v);
} else if (hRule === TableRowHeightRule.EXACT) {
rowHeight = val.v;
}

// Set row height to cell page height.
for (const cellPageSkeleton of rowSkeleton.cells) {
cellPageSkeleton.pageHeight = rowHeight;
}

// Handle vertical alignment in cell.
const rowConfig = table.tableRows[row];
for (let i = 0; i < rowConfig.tableCells.length; i++) {
const cellConfig = rowConfig.tableCells[i];
const cellPageSkeleton = rowSkeleton.cells[i];
const { vAlign = VerticalAlignmentType.CONTENT_ALIGNMENT_UNSPECIFIED } = cellConfig;
const { pageHeight, height, originMarginTop, originMarginBottom } = cellPageSkeleton;

let marginTop = originMarginTop;

switch (vAlign) {
case VerticalAlignmentType.TOP: {
marginTop = originMarginTop;
break;
}
case VerticalAlignmentType.CENTER: {
marginTop = (pageHeight - height) / 2;
break;
}
case VerticalAlignmentType.BOTTOM: {
marginTop = pageHeight - height - originMarginBottom;
break;
}
default:
break;
}

marginTop = Math.max(originMarginTop, marginTop);

cellPageSkeleton.marginTop = marginTop;
}

rowSkeleton.height = rowHeight;
rowSkeleton.top = rowTop;
rowTop += rowHeight;
Expand Down
9 changes: 5 additions & 4 deletions packages/engine-render/src/components/docs/layout/model/page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@
*/

import type { ITable, Nullable } from '@univerjs/core';
import { BooleanNumber, PageOrientType } from '@univerjs/core';
import type {
IDocumentSkeletonHeaderFooter,
IDocumentSkeletonPage,
ISkeletonResourceReference,
} from '../../../../basics/i-document-skeleton-cached';
import { BreakType, DocumentSkeletonPageType } from '../../../../basics/i-document-skeleton-cached';
import type { ISectionBreakConfig } from '../../../../basics/interfaces';
import { dealWithSection } from '../block/section';
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, PageOrientType } from '@univerjs/core';
import { BreakType, DocumentSkeletonPageType } from '../../../../basics/i-document-skeleton-cached';
import { dealWithSection } from '../block/section';
import { resetContext, updateBlockIndex } from '../tools';
import type { DataStreamTreeNode } from '../../view-model/data-stream-tree-node';
import { createSkeletonSection } from './section';

function getHeaderFooterMaxHeight(pageHeight: number) {
Expand Down Expand Up @@ -302,6 +302,7 @@ export function createSkeletonCellPage(
} = cellConfig.margin ?? cellMargin ?? {};
const pageWidth = tableColumns[col].size.width.v;
const pageHeight = Number.POSITIVE_INFINITY;

const cellSectionBreakConfig: ISectionBreakConfig = {
lists,
footerTreeMap,
Expand Down

0 comments on commit a85bc17

Please sign in to comment.