Skip to content

Commit

Permalink
feat: add cellInnerBorder&cellBorderClipDirection&_contentOffset in t…
Browse files Browse the repository at this point in the history 
…heme comfig
  • Loading branch information
@Rui-Sun
Rui-Sun committed Mar 1, 2024
1 parent c118bcd commit 21a942b
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 21 deletions.
80 changes: 69 additions & 11 deletions packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,13 +149,32 @@ export class SplitGroupAfterRenderContribution implements IGroupRenderContributi
(typeof lineWidth === 'number' && lineWidth & 1) ||
(Array.isArray(strokeArrayWidth) && strokeArrayWidth.some(width => width & 1))
) {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
const table = (group.stage as any).table as BaseTableAPI;
const bottomRight = table.theme.cellBorderClipDirection === 'bottom-right';
let deltaWidth = 0;
let deltaHeight = 0;
if (bottomRight) {
x = Math.floor(x) - 0.5;
y = Math.floor(y) - 0.5;
if (group.role === 'cell') {
const col = (group as any).col as number;
const row = (group as any).row as number;
if (table && col === table.colCount - 1) {
deltaWidth = 1;
}
if (table && row === table.rowCount - 1) {
deltaHeight = 1;
}
}
} else {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
}

const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(
group,
Math.ceil(width),
Math.ceil(height)
Math.ceil(width + deltaWidth),
Math.ceil(height + deltaHeight)
);
widthForStroke = widthFroDraw;
heightForStroke = heightFroDraw;
Expand Down Expand Up @@ -472,13 +491,32 @@ export class DashGroupAfterRenderContribution implements IGroupRenderContributio
let widthForStroke;
let heightForStroke;
if (lineWidth & 1) {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
const table = (group.stage as any).table as BaseTableAPI;
const bottomRight = table.theme.cellBorderClipDirection === 'bottom-right';
let deltaWidth = 0;
let deltaHeight = 0;
if (bottomRight) {
x = Math.floor(x) - 0.5;
y = Math.floor(y) - 0.5;
if (group.role === 'cell') {
const col = (group as any).col as number;
const row = (group as any).row as number;
if (table && col === table.colCount - 1) {
deltaWidth = 1;
}
if (table && row === table.rowCount - 1) {
deltaHeight = 1;
}
}
} else {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
}

const { width: widthFroDraw, height: heightFroDraw } = getCellSizeForDraw(
group,
Math.ceil(width),
Math.ceil(height)
Math.ceil(width + deltaWidth),
Math.ceil(height + deltaHeight)
);
widthForStroke = widthFroDraw;
heightForStroke = heightFroDraw;
Expand Down Expand Up @@ -650,11 +688,31 @@ export class AdjustPosGroupAfterRenderContribution implements IGroupRenderContri
Math.ceil(height)
);
context.beginPath();
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
const table = (group.stage as any).table as BaseTableAPI;
const bottomRight = table.theme.cellBorderClipDirection === 'bottom-right';
let deltaWidth = 0;
let deltaHeight = 0;
if (bottomRight) {
x = Math.floor(x) - 0.5;
y = Math.floor(y) - 0.5;
if (group.role === 'cell') {
const col = (group as any).col as number;
const row = (group as any).row as number;
if (table && col === table.colCount - 1) {
deltaWidth = 1;
}
if (table && row === table.rowCount - 1) {
deltaHeight = 1;
}
}
} else {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
}

if (cornerRadius) {
// 测试后，cache对于重绘性能提升不大，但是在首屏有一定性能损耗，因此rect不再使用cache
createRectPath(context, x, y, widthFroDraw, heightFroDraw, cornerRadius);
createRectPath(context, x, y, widthFroDraw + deltaWidth, heightFroDraw + deltaHeight, cornerRadius);
} else {
context.rect(x, y, widthFroDraw, heightFroDraw);
}
Expand Down
28 changes: 20 additions & 8 deletions packages/vtable/src/scenegraph/graphic/contributions/rect-contribution-render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import type {
} from '@src/vrender';
import { BaseRenderContributionTime, injectable } from '@src/vrender';
import { renderStroke } from './group-contribution-render';
import type { BaseTableAPI } from '../../../ts-types/base-table';

@injectable()
export class SplitRectBeforeRenderContribution implements IRectRenderContribution {
Expand Down Expand Up @@ -153,14 +154,25 @@ export class SplitRectAfterRenderContribution implements IRectRenderContribution
if (Array.isArray(stroke) || Array.isArray(strokeArrayColor) || Array.isArray(strokeArrayWidth)) {
// let dx = 0;
// let dy = 0;
let deltaWidth = 0;
let deltaHeight = 0;
if (
rect.name !== 'border-rect' && // border-rect not need offset
rect.name !== 'table-border-rect' && // table-border-rect not need offset
((typeof lineWidth === 'number' && lineWidth & 1) ||
(Array.isArray(strokeArrayWidth) && strokeArrayWidth.some(width => width & 1)))
// rect.name !== 'border-rect' && // border-rect not need offset
// rect.name !== 'table-border-rect' && // table-border-rect not need offset
(typeof lineWidth === 'number' && lineWidth & 1) ||
(Array.isArray(strokeArrayWidth) && strokeArrayWidth.some(width => width & 1))
) {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
const table = (rect.stage as any).table as BaseTableAPI;
const bottomRight = table.theme.cellBorderClipDirection === 'bottom-right';
if (bottomRight) {
x = Math.floor(x) - 0.5;
y = Math.floor(y) - 0.5;
deltaWidth = 0.5;
deltaHeight = 0.5;
} else {
x = Math.floor(x) + 0.5;
y = Math.floor(y) + 0.5;
}
}
renderStroke(
rect as IGroup,
Expand All @@ -171,8 +183,8 @@ export class SplitRectAfterRenderContribution implements IRectRenderContribution
stroke,
strokeArrayWidth || lineWidth,
strokeArrayColor || strokeColor,
Math.ceil(width),
Math.ceil(height)
Math.ceil(width + deltaWidth),
Math.ceil(height + deltaHeight)
);
}
}
Expand Down
22 changes: 20 additions & 2 deletions packages/vtable/src/scenegraph/utils/text-icon-layout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,15 @@ export function createCellContent(
? getHierarchyOffset(range.start.col, range.start.row, table)
: getHierarchyOffset(cellGroup.col, cellGroup.row, table);

let _contentOffset = 0;
if (isNumber(table.theme._contentOffset)) {
if (textAlign === 'left') {
_contentOffset = table.theme._contentOffset;
} else if (textAlign === 'right') {
_contentOffset = -table.theme._contentOffset;
}
}

const attribute = {
text: text.length === 1 ? text[0] : text,
maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset),
Expand All @@ -92,7 +101,7 @@ export function createCellContent(
// widthLimit: autoColWidth ? -1 : colWidth - (padding[1] + padding[3]),
heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]),
pickable: false,
dx: hierarchyOffset,
dx: hierarchyOffset + _contentOffset,
whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
};
const wrapText = new Text(cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute);
Expand Down Expand Up @@ -181,6 +190,14 @@ export function createCellContent(
let textMark;
// 直接添加richtext / wrapText
if (inlineFrontIcons.length === 0 && inlineEndIcons.length === 0) {
let _contentOffset = 0;
if (isNumber(table.theme._contentOffset)) {
if (textAlign === 'left') {
_contentOffset = table.theme._contentOffset;
} else if (textAlign === 'right') {
_contentOffset = -table.theme._contentOffset;
}
}
const text = convertInternal(textStr).replace(/\r?\n/g, '\n').replace(/\r/g, '\n').split('\n');
const attribute = {
text: text.length === 1 ? text[0] : text,
Expand All @@ -194,7 +211,8 @@ export function createCellContent(
autoWrapText,
lineClamp,
wordBreak: 'break-word',
whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal'
whiteSpace: text.length === 1 && !autoWrapText ? 'no-wrap' : 'normal',
dx: _contentOffset
};
const wrapText = new Text(cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute);
wrapText.name = 'text';
Expand Down
10 changes: 10 additions & 0 deletions packages/vtable/src/themes/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,16 @@ export class TableTheme implements ITableThemeDefine {
return !!getProp(obj, superTheme, ['cellInnerBorder']);
}

get cellBorderClipDirection(): 'top-left' | 'bottom-right' {
const { obj, superTheme } = this.internalTheme;
return getProp(obj, superTheme, ['cellBorderClipDirection']) ?? 'top-left';
}

get _contentOffset(): number {
const { obj, superTheme } = this.internalTheme;
return getProp(obj, superTheme, ['_contentOffset']) ?? 0;
}

get defaultStyle(): RequiredTableThemeDefine['defaultStyle'] {
// const defaultStyle = getProp(obj, superTheme, ["defaultStyle"]);
if (!this._defaultStyle) {
Expand Down
5 changes: 5 additions & 0 deletions packages/vtable/src/ts-types/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,8 +146,13 @@ export interface ITableThemeDefine {
// style for text pop tip
textPopTipStyle?: PopTipAttributes;

// senior config for fs
// 四边单元格，靠近边框的border是否显示；配置false的话，左侧单元格不显示左边框，同理
cellInnerBorder?: boolean;
// cell border clip direction
cellBorderClipDirection?: 'top-left' | 'bottom-right'; // default is 'top-left'
// text offset, hack for fs
_contentOffset?: number;
}

export type RequiredTableThemeDefine = Required<ITableThemeDefine>;

0 comments on commit 21a942b

Please sign in to comment.