3828 feature theme frozencolumnlineshadow

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"
+}

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'
     }
   },
   //菜单样式

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'
     }
   },
   //菜单样式

docs/assets/option/en/common/frozen-column-line-style.md

@@ -15,4 +15,12 @@ Shadow Overall Width
 Start Color
 
 ###${prefix} endColor(string)
-End Color
+End Color
+
+###${prefix} visible(string)
+
+Shadow Visible Time, default is `scrolling`.
+
+- always: always show
+- scrolling: show when scrolling
+

docs/assets/option/zh/common/frozen-column-line-style.md

@@ -15,4 +15,15 @@
 开始颜色
 
 ###${prefix} endColor(string)
-结束颜色
+结束颜色
+
+###${prefix} visible(string)
+阴影显示时机，默认为 `scrolling`。
+
+- always: 总是显示
+- scrolling: 滚动时显示
+
+
+
+
+

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,21 +674,41 @@ 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,
         height: this.table.getDrawRange().height
       });
     }
   }
-
+  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;

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);
     }

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: {

packages/vtable/src/themes/BRIGHT.ts

@@ -76,7 +76,8 @@ export default {
     shadow: {
       width: 3,
       startColor: '#CBDCFE',
-      endColor: '#CBDCFE'
+      endColor: '#CBDCFE',
+      visible: 'always'
     }
   },
   // menuStyle: {

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: {

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: {

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';
               }
             };
           }

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?: {