feat: add selectFillMode config in theme.selectionStyle

common/changes/@visactor/vtable/feat-selectFillMode_2024-07-30-13-20.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: add selectFillMode config in theme.selectionStyle #2132 #2027",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

docs/assets/option/en/common/theme.md

@@ -155,3 +155,11 @@ The highlight color of the entire column when selected
 {{ use: common-color(
 prefix = ${prefix}
 ) }}
+
+##${prefix} selectFillMode(boolean)
+Fill color rules for the selected area
+- `cover`: The fill color of the selected area will cover the background color of the cell (usually a color value with transparency)
+- `contain`: The fill color of the selected area will replace the background color of the cell
+{{ use: common-color(
+  prefix = ${prefix}
+  ) }}

docs/assets/option/zh/common/theme.md

@@ -155,3 +155,11 @@ body 单元格的样式配置
 {{ use: common-color(
   prefix = ${prefix}
   ) }}
+
+##${prefix} selectFillMode(boolean)
+选中区域的填充色规则
+  - `cover`: 选中区域的填充色会覆盖单元格的背景色（常用带透明度的颜色值）
+  - `contain`: 选中区域的填充色会替换单元格的背景色
+{{ use: common-color(
+  prefix = ${prefix}
+  ) }}

packages/vtable/src/scenegraph/select/create-select-border.ts

@@ -46,7 +46,10 @@ export function createCellSelectBorder(
   const bodyClickLineWidth = theme.selectionStyle?.cellBorderLineWidth;
   const rect = createRect({
     pickable: false,
-    fill: (theme.selectionStyle?.cellBgColor as any) ?? 'rgba(0, 0, 255,0.1)',
+    fill:
+      theme.selectionStyle?.selectFillMode === 'contain'
+        ? false
+        : (theme.selectionStyle?.cellBgColor as any) ?? 'rgba(0, 0, 255,0.1)',
 
     lineWidth: bodyClickLineWidth as number,
     // stroke: bodyClickBorderColor as string,

packages/vtable/src/state/select/is-cell-select-highlight.ts

@@ -110,6 +110,14 @@ export function isCellSelected(state: StateManager, col: number, row: number, ce
         selectMode = undefined;
       }
     }
+  } else if (state.table.theme.selectionStyle.selectFillMode === 'contain') {
+    for (let i = 0; i < ranges.length; i++) {
+      const range = ranges[i];
+      if (range.start.col <= col && range.start.row <= row && range.end.col >= col && range.end.row >= row) {
+        selectMode = 'cellBgColor';
+        break;
+      }
+    }
   }
   return selectMode;
 }

packages/vtable/src/themes/theme.ts

@@ -665,6 +665,9 @@ export class TableTheme implements ITableThemeDefine {
         },
         get inlineRowBgColor(): string | undefined {
           return selectionStyle?.inlineRowBgColor;
+        },
+        get selectFillMode(): 'cover' | 'contain' {
+          return selectionStyle?.selectFillMode ?? 'cover';
         }
       };
     }
@@ -817,6 +820,12 @@ export class TableTheme implements ITableThemeDefine {
                 : undefined) ??
               undefined
             );
+          },
+          get cellBgColor(): ColorPropertyDefine | undefined {
+            if (that.selectionStyle.selectFillMode === 'contain') {
+              return style.select?.cellBgColor ?? that.selectionStyle.cellBgColor ?? undefined;
+            }
+            return undefined;
           }
         };
         // }

packages/vtable/src/ts-types/theme.ts

@@ -11,6 +11,7 @@ export type ThemeStyle = ITextStyleOption & {
   select?: {
     inlineRowBgColor?: ColorPropertyDefine; //交互所在整行的背景颜色
     inlineColumnBgColor?: ColorPropertyDefine; //交互所在整列的背景颜色
+    cellBgColor?: ColorPropertyDefine; //交互所在单元格的背景颜色
   };
   frameStyle?: FrameStyle;
 };
@@ -142,6 +143,7 @@ export interface ITableThemeDefine {
     cellBgColor?: string; //选择框背景颜色
     inlineRowBgColor?: string; //交互所在整行的背景颜色
     inlineColumnBgColor?: string; //交互所在整列的背景颜色
+    selectFillMode?: 'cover' | 'contain'; //选择框填充模式，cover表示选择框背景色覆盖在表格上（需要配饰透明度），contain表示背景色替换原有单元格的背景色
   };
 
   // style for axis