diff --git a/common/changes/@visactor/vtable/fix-selected-border-update_2025-03-28-08-48.json b/common/changes/@visactor/vtable/fix-selected-border-update_2025-03-28-08-48.json new file mode 100644 index 0000000000..e0ad5a0761 --- /dev/null +++ b/common/changes/@visactor/vtable/fix-selected-border-update_2025-03-28-08-48.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vtable", + "comment": "feat: add dynamicUpdateSelectionSize config in theme.selectionStyle", + "type": "none" + } + ], + "packageName": "@visactor/vtable" +} \ No newline at end of file diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index e0c4ea6c3c..55c32ae803 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -1163,6 +1163,9 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { height - ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0)) - ((lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0)); } } + + this._clearColRangeWidthsMap(); + this._clearRowRangeHeightsMap(); } updateViewBox(newViewBox: IBoundsLike) { diff --git a/packages/vtable/src/core/tableHelper.ts b/packages/vtable/src/core/tableHelper.ts index 1a41bccd9c..c8695a2ef1 100644 --- a/packages/vtable/src/core/tableHelper.ts +++ b/packages/vtable/src/core/tableHelper.ts @@ -368,25 +368,43 @@ export function getCellCornerRadius(col: number, row: number, table: BaseTableAP const tableCornerRadius = table.theme.frameStyle.cornerRadius; if (table.theme.cellInnerBorder) { if (Array.isArray(tableCornerRadius)) { + const radius = [0, 0, 0, 0]; if (col === 0 && row === 0) { - return [tableCornerRadius[0], 0, 0, 0]; - } else if (col === table.colCount - 1 && row === 0) { - return [0, tableCornerRadius[1], 0, 0]; - } else if (col === 0 && row === table.rowCount - 1) { - return [0, 0, 0, tableCornerRadius[3]]; - } else if (col === table.colCount - 1 && row === table.rowCount - 1) { - return [0, 0, tableCornerRadius[2], 0]; + // return [tableCornerRadius[0], 0, 0, 0]; + radius[0] = tableCornerRadius[0]; } + if (col === table.colCount - 1 && row === 0) { + // return [0, tableCornerRadius[1], 0, 0]; + radius[1] = tableCornerRadius[1]; + } + if (col === 0 && row === table.rowCount - 1) { + // return [0, 0, 0, tableCornerRadius[3]]; + radius[3] = tableCornerRadius[3]; + } + if (col === table.colCount - 1 && row === table.rowCount - 1) { + // return [0, 0, tableCornerRadius[2], 0]; + radius[2] = tableCornerRadius[2]; + } + return radius; } else if (tableCornerRadius) { + const radius = [0, 0, 0, 0]; if (col === 0 && row === 0) { - return [tableCornerRadius, 0, 0, 0]; - } else if (col === table.colCount - 1 && row === 0) { - return [0, tableCornerRadius, 0, 0]; - } else if (col === 0 && row === table.rowCount - 1) { - return [0, 0, 0, tableCornerRadius]; - } else if (col === table.colCount - 1 && row === table.rowCount - 1) { - return [0, 0, tableCornerRadius, 0]; + // return [tableCornerRadius, 0, 0, 0]; + radius[0] = tableCornerRadius; + } + if (col === table.colCount - 1 && row === 0) { + // return [0, tableCornerRadius, 0, 0]; + radius[1] = tableCornerRadius; + } + if (col === 0 && row === table.rowCount - 1) { + // return [0, 0, 0, tableCornerRadius]; + radius[3] = tableCornerRadius; + } + if (col === table.colCount - 1 && row === table.rowCount - 1) { + // return [0, 0, tableCornerRadius, 0]; + radius[2] = tableCornerRadius; } + return radius; } } return 0; diff --git a/packages/vtable/src/scenegraph/select/update-select-border.ts b/packages/vtable/src/scenegraph/select/update-select-border.ts index 913aeaa3cc..229e627a1f 100644 --- a/packages/vtable/src/scenegraph/select/update-select-border.ts +++ b/packages/vtable/src/scenegraph/select/update-select-border.ts @@ -153,11 +153,12 @@ function updateComponent( } } + const { dynamicUpdateSelectionSize } = table.theme.selectionStyle; if ( - (isNearRowHeader && selectComp.rect.attribute.stroke[3]) || - (isNearRightRowHeader && selectComp.rect.attribute.stroke[1]) || - (isNearColHeader && selectComp.rect.attribute.stroke[0]) || - (isNearBottomColHeader && selectComp.rect.attribute.stroke[2]) + (isNearRowHeader && (selectComp.rect.attribute.stroke[3] || dynamicUpdateSelectionSize)) || + (isNearRightRowHeader && (selectComp.rect.attribute.stroke[1] || dynamicUpdateSelectionSize)) || + (isNearColHeader && (selectComp.rect.attribute.stroke[0] || dynamicUpdateSelectionSize)) || + (isNearBottomColHeader && (selectComp.rect.attribute.stroke[2] || dynamicUpdateSelectionSize)) ) { if (isNearRowHeader && selectComp.rect.attribute.stroke[3]) { scene.tableGroup.insertAfter( diff --git a/packages/vtable/src/themes/theme.ts b/packages/vtable/src/themes/theme.ts index 5f5d42f438..94004a960a 100644 --- a/packages/vtable/src/themes/theme.ts +++ b/packages/vtable/src/themes/theme.ts @@ -719,6 +719,9 @@ export class TableTheme implements ITableThemeDefine { }, get selectionFillMode(): 'overlay' | 'replace' { return selectionStyle?.selectionFillMode ?? 'overlay'; + }, + get dynamicUpdateSelectionSize(): boolean { + return selectionStyle?.dynamicUpdateSelectionSize ?? false; } }; } diff --git a/packages/vtable/src/ts-types/theme.ts b/packages/vtable/src/ts-types/theme.ts index 87a0924630..9c9f22fc57 100644 --- a/packages/vtable/src/ts-types/theme.ts +++ b/packages/vtable/src/ts-types/theme.ts @@ -154,6 +154,7 @@ export interface ITableThemeDefine { inlineRowBgColor?: string; //交互所在整行的背景颜色 inlineColumnBgColor?: string; //交互所在整列的背景颜色 selectionFillMode?: 'overlay' | 'replace'; //选择框填充模式,overlay表示选择框背景色覆盖在表格上(需要配饰透明度),replace表示背景色替换原有单元格的背景色 + dynamicUpdateSelectionSize?: boolean; // 选择框大小随滚动动态变化,用于冻结并且背景透明的场景,默认false,开启后性能会有一定影响 }; // style for axis