diff --git a/common/changes/@visactor/vtable/3828-feature-theme-frozencolumnlineshadow_2025-05-08-10-17.json b/common/changes/@visactor/vtable/3828-feature-theme-frozencolumnlineshadow_2025-05-08-10-17.json new file mode 100644 index 0000000000..9a745e9e9f --- /dev/null +++ b/common/changes/@visactor/vtable/3828-feature-theme-frozencolumnlineshadow_2025-05-08-10-17.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "feat: add frozenColumnLine visible on theme #3828\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file diff --git a/docs/assets/guide/en/theme_and_style/theme.md b/docs/assets/guide/en/theme_and_style/theme.md index 87e6832d0b..93f24c29fd 100644 --- a/docs/assets/guide/en/theme_and_style/theme.md +++ b/docs/assets/guide/en/theme_and_style/theme.md @@ -204,7 +204,8 @@ const theme = { shadow: { width: 4, startColor: 'rgba(00, 24, 47, 0.05)', - endColor: 'rgba(00, 24, 47, 0)' + endColor: 'rgba(00, 24, 47, 0)', + visible: 'scrolling' } }, //菜单样式 diff --git a/docs/assets/guide/zh/theme_and_style/theme.md b/docs/assets/guide/zh/theme_and_style/theme.md index 12eb6d5c8f..3fa9bf4614 100644 --- a/docs/assets/guide/zh/theme_and_style/theme.md +++ b/docs/assets/guide/zh/theme_and_style/theme.md @@ -204,7 +204,8 @@ const theme = { shadow: { width: 4, startColor: 'rgba(00, 24, 47, 0.05)', - endColor: 'rgba(00, 24, 47, 0)' + endColor: 'rgba(00, 24, 47, 0)', + visible: 'scrolling' } }, //菜单样式 diff --git a/docs/assets/option/en/common/frozen-column-line-style.md b/docs/assets/option/en/common/frozen-column-line-style.md index 73e2d2df4c..9a04876273 100644 --- a/docs/assets/option/en/common/frozen-column-line-style.md +++ b/docs/assets/option/en/common/frozen-column-line-style.md @@ -15,4 +15,12 @@ Shadow Overall Width Start Color ###${prefix} endColor(string) -End Color \ No newline at end of file +End Color + +###${prefix} visible(string) + +Shadow Visible Time, default is `scrolling`. + +- always: always show +- scrolling: show when scrolling + diff --git a/docs/assets/option/zh/common/frozen-column-line-style.md b/docs/assets/option/zh/common/frozen-column-line-style.md index 39af7f912e..e2cd954a22 100644 --- a/docs/assets/option/zh/common/frozen-column-line-style.md +++ b/docs/assets/option/zh/common/frozen-column-line-style.md @@ -15,4 +15,15 @@ 开始颜色 ###${prefix} endColor(string) -结束颜色 \ No newline at end of file +结束颜色 + +###${prefix} visible(string) +阴影显示时机,默认为 `scrolling`。 + +- always: 总是显示 +- scrolling: 滚动时显示 + + + + + diff --git a/packages/vtable/src/scenegraph/component/table-component.ts b/packages/vtable/src/scenegraph/component/table-component.ts index 1324346142..50991f7d9a 100644 --- a/packages/vtable/src/scenegraph/component/table-component.ts +++ b/packages/vtable/src/scenegraph/component/table-component.ts @@ -181,8 +181,9 @@ export class TableComponent { const shadowWidth = theme.frozenColumnLine?.shadow?.width; const shadowStartColor = theme.frozenColumnLine?.shadow?.startColor; const shadowEndColor = theme.frozenColumnLine?.shadow?.endColor; + const visible = theme.frozenColumnLine?.shadow?.visible; this.frozenShadowLine = createRect({ - visible: true, + visible: visible === 'always', pickable: false, x: 0, y: 0, @@ -201,7 +202,7 @@ export class TableComponent { } }); this.rightFrozenShadowLine = createRect({ - visible: true, + visible: visible === 'always', pickable: false, x: 0, y: 0, @@ -651,13 +652,14 @@ export class TableComponent { * @return {*} */ setFrozenColumnShadow(col: number, isRightFrozen?: boolean) { - if (col < 0) { + const colX = getColX(col, this.table, isRightFrozen); + if (col < 0 || this.table.theme.frozenColumnLine?.shadow?.visible !== 'always') { this.frozenShadowLine.setAttributes({ - visible: false + visible: false, + x: colX, + height: this.table.getDrawRange().height }); } else { - // const colX = this.table.getColsWidth(0, col); - const colX = getColX(col, this.table, isRightFrozen); this.frozenShadowLine.setAttributes({ visible: true, x: colX, @@ -672,13 +674,14 @@ export class TableComponent { * @return {*} */ setRightFrozenColumnShadow(col: number) { - if (col >= this.table.colCount) { + const colX = getColX(col, this.table, true); + if (col >= this.table.colCount || this.table.theme.frozenColumnLine?.shadow?.visible !== 'always') { this.rightFrozenShadowLine.setAttributes({ - visible: false + visible: false, + x: colX - this.rightFrozenShadowLine.attribute.width, + height: this.table.getDrawRange().height }); } else { - // const colX = this.table.getColsWidth(0, col); - const colX = getColX(col, this.table, true); this.rightFrozenShadowLine.setAttributes({ visible: true, x: colX - this.rightFrozenShadowLine.attribute.width, @@ -686,7 +689,26 @@ export class TableComponent { }); } } - + hideFrozenColumnShadow() { + const visible1 = this.table.theme.frozenColumnLine?.shadow?.visible; + const visible = this.table.theme.frozenColumnLine?.shadow?.visible ?? visible1; + if (visible !== 'scrolling') { + return; + } + this.frozenShadowLine.setAttribute('visible', false); + this.rightFrozenShadowLine.setAttribute('visible', false); + this.table.scenegraph.updateNextFrame(); + } + showFrozenColumnShadow() { + const visible1 = this.table.theme.frozenColumnLine?.shadow?.visible; + const visible = this.table.theme.frozenColumnLine?.shadow?.visible ?? visible1; + if (visible !== 'scrolling') { + return; + } + this.frozenShadowLine.setAttribute('visible', true); + this.rightFrozenShadowLine.setAttribute('visible', true); + this.table.scenegraph.updateNextFrame(); + } hideVerticalScrollBar() { const visible1 = this.table.theme.scrollStyle.visible; const verticalVisible = this.table.theme.scrollStyle.verticalVisible ?? visible1; diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 228b7cae4a..55f6e07538 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -1286,10 +1286,12 @@ export class StateManager { } showHorizontalScrollBar(autoHide?: boolean) { this.table.scenegraph.component.showHorizontalScrollBar(); + this.table.scenegraph?.component.showFrozenColumnShadow(); if (autoHide) { // 滚轮触发滚动条显示后,异步隐藏 clearTimeout(this._clearHorizontalScrollBar); this._clearHorizontalScrollBar = setTimeout(() => { + this.table.scenegraph?.component.hideFrozenColumnShadow(); this.table.scenegraph?.component.hideHorizontalScrollBar(); }, 1000); } diff --git a/packages/vtable/src/themes/ARCO.ts b/packages/vtable/src/themes/ARCO.ts index b8b1dc9b8a..bd6ce7c875 100644 --- a/packages/vtable/src/themes/ARCO.ts +++ b/packages/vtable/src/themes/ARCO.ts @@ -129,7 +129,8 @@ export default { shadow: { width: 4, startColor: 'rgba(00, 24, 47, 0.05)', - endColor: 'rgba(00, 24, 47, 0)' + endColor: 'rgba(00, 24, 47, 0)', + visible: 'always' } }, // menuStyle: { diff --git a/packages/vtable/src/themes/BRIGHT.ts b/packages/vtable/src/themes/BRIGHT.ts index daf4afaa83..0a7569dfaa 100644 --- a/packages/vtable/src/themes/BRIGHT.ts +++ b/packages/vtable/src/themes/BRIGHT.ts @@ -76,7 +76,8 @@ export default { shadow: { width: 3, startColor: '#CBDCFE', - endColor: '#CBDCFE' + endColor: '#CBDCFE', + visible: 'always' } }, // menuStyle: { diff --git a/packages/vtable/src/themes/DARK.ts b/packages/vtable/src/themes/DARK.ts index b1ccabed18..fd7efc17e8 100644 --- a/packages/vtable/src/themes/DARK.ts +++ b/packages/vtable/src/themes/DARK.ts @@ -97,7 +97,8 @@ export default { shadow: { width: 4, startColor: 'rgba(00, 24, 47, 0.05)', - endColor: 'rgba(00, 24, 47, 0)' + endColor: 'rgba(00, 24, 47, 0)', + visible: 'always' } }, // menuStyle: { diff --git a/packages/vtable/src/themes/DEFAULT.ts b/packages/vtable/src/themes/DEFAULT.ts index e957976a29..4436a4e7a4 100644 --- a/packages/vtable/src/themes/DEFAULT.ts +++ b/packages/vtable/src/themes/DEFAULT.ts @@ -104,7 +104,8 @@ export default { shadow: { width: 3, startColor: 'rgba(225, 228, 232, 0.6)', - endColor: 'rgba(225, 228, 232, 0.6)' + endColor: 'rgba(225, 228, 232, 0.6)', + visible: 'always' } }, // menuStyle: { diff --git a/packages/vtable/src/themes/theme-define.ts b/packages/vtable/src/themes/theme-define.ts index 94004a960a..7c8938dfb7 100644 --- a/packages/vtable/src/themes/theme-define.ts +++ b/packages/vtable/src/themes/theme-define.ts @@ -645,7 +645,9 @@ export class TableTheme implements ITableThemeDefine { obj.frozenColumnLine ); this._frozenColumnLine = { - get shadow(): { width: number; startColor: string; endColor: string } | undefined { + get shadow(): + | { width: number; startColor: string; endColor: string; visible: 'always' | 'scrolling' } + | undefined { if (frozenColumnLine.shadow) { return { get width(): number { @@ -656,6 +658,9 @@ export class TableTheme implements ITableThemeDefine { }, get endColor(): string { return frozenColumnLine.shadow?.endColor ?? 'rgba(00, 24, 47, 0)'; + }, + get visible(): 'always' | 'scrolling' { + return frozenColumnLine.shadow?.visible ?? 'always'; } }; } diff --git a/packages/vtable/src/ts-types/theme.ts b/packages/vtable/src/ts-types/theme.ts index 9c9f22fc57..29fb1a956a 100644 --- a/packages/vtable/src/ts-types/theme.ts +++ b/packages/vtable/src/ts-types/theme.ts @@ -130,6 +130,8 @@ export interface ITableThemeDefine { width: number; //阴影整体宽度 startColor: string; //开始颜色 endColor: string; //结束颜色 + /**滚动条是否可见 'always' | 'scrolling' | 'none' | 'focus',常驻|滚动时|不显示|聚焦在画布上时 。默认'scrolling'*/ + visible?: 'always' | 'scrolling'; }; /** TODO 暂未生效 */ border?: {