1167 feature selected highlight

common/changes/@visactor/vtable/1167-feature-selected-highlight_2024-06-04-06-31.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: support select highlightMode effect #1167\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}

packages/vtable/examples/list/list.ts

@@ -188,6 +188,14 @@ export function createTable() {
     },
     autoWrapText: true,
     editor: '',
+    // theme: VTable.themes.ARCO,
+    // hover: {
+    //   highlightMode: 'cross'
+    // },
+    // select: {
+    //   headerSelectMode: 'cell',
+    //   highlightMode: 'cross'
+    // },
     excelOptions: {
       fillHandle: true
     }

packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts

@@ -13,10 +13,10 @@ import { BaseRenderContributionTime, createRectPath, injectable } from '@src/vre
 import type { Group } from '../group';
 import { getCellHoverColor } from '../../../state/hover/is-cell-hover';
 import type { BaseTableAPI } from '../../../ts-types/base-table';
-import { getQuadProps } from '../../utils/padding';
 import { getCellMergeInfo } from '../../utils/get-cell-merge';
 import { InteractionState } from '../../../ts-types';
 import { isArray } from '@visactor/vutils';
+import { getCellSelectColor } from '../../../state/select/is-cell-select-highlight';
 
 // const highlightDash: number[] = [];
 
@@ -791,9 +791,14 @@ export class AdjustColorGroupBeforeRenderContribution implements IGroupRenderCon
     if ((group as Group).role === 'cell') {
       const table = (group.stage as any).table as BaseTableAPI;
       if (table && table.stateManager.interactionState !== InteractionState.scrolling) {
-        const hoverColor = getCellHoverColor(group as Group, table);
-        if (hoverColor) {
-          (group.attribute as any)._vtableHoverFill = hoverColor;
+        const selectColor = getCellSelectColor(group as Group, table);
+        if (selectColor) {
+          (group.attribute as any)._vtableHightLightFill = selectColor;
+        } else {
+          const hoverColor = getCellHoverColor(group as Group, table);
+          if (hoverColor) {
+            (group.attribute as any)._vtableHightLightFill = hoverColor;
+          }
         }
       }
     }
@@ -828,18 +833,18 @@ export class AdjustColorGroupAfterRenderContribution implements IGroupRenderCont
     ) => boolean
   ) {
     // 处理hover颜色
-    if ((group.attribute as any)._vtableHoverFill) {
+    if ((group.attribute as any)._vtableHightLightFill) {
       if (fillCb) {
         // do nothing
         // fillCb(context, group.attribute, groupAttribute);
       } else if (fVisible) {
         const oldColor = group.attribute.fill;
         // draw hover fill
-        group.attribute.fill = (group.attribute as any)._vtableHoverFill as any;
+        group.attribute.fill = (group.attribute as any)._vtableHightLightFill as any;
         context.setCommonStyle(group, group.attribute, x, y, groupAttribute);
         context.fill();
         group.attribute.fill = oldColor;
-        (group.attribute as any)._vtableHoverFill = undefined;
+        (group.attribute as any)._vtableHightLightFill = undefined;
       }
     }
   }

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

@@ -0,0 +1,115 @@
+import type { StateManager } from '../state';
+import type { Group } from '../../scenegraph/graphic/group';
+import { getProp } from '../../scenegraph/utils/get-prop';
+import type { BaseTableAPI } from '../../ts-types/base-table';
+import type { ColumnDefine } from '../../ts-types';
+import { HighlightScope } from '../../ts-types';
+import { isValid } from '@visactor/vutils';
+import { getCellMergeRange } from '../../tools/merge-range';
+
+export function getCellSelectColor(cellGroup: Group, table: BaseTableAPI): string | undefined {
+  let colorKey;
+  if (
+    cellGroup.role === 'cell' &&
+    isValid(cellGroup.mergeStartCol) &&
+    isValid(cellGroup.mergeStartRow) &&
+    isValid(cellGroup.mergeEndCol) &&
+    isValid(cellGroup.mergeEndRow)
+  ) {
+    const { colStart, colEnd, rowStart, rowEnd } = getCellMergeRange(cellGroup, table.scenegraph);
+    for (let col = colStart; col <= colEnd; col++) {
+      for (let row = rowStart; row <= rowEnd; row++) {
+        const key = isCellSelected(table.stateManager, col, row, cellGroup);
+        if (key && (!colorKey || key === 'cellBgColor')) {
+          colorKey = key;
+        }
+      }
+    }
+  } else if (cellGroup.role === 'cell') {
+    colorKey = isCellSelected(table.stateManager, cellGroup.col, cellGroup.row, cellGroup);
+  }
+
+  if (!colorKey) {
+    return undefined;
+  }
+
+  let selectStyle;
+  const layout = table.internalProps.layoutMap;
+  if (layout.isCornerHeader(cellGroup.col, cellGroup.row)) {
+    selectStyle = table.theme.cornerHeaderStyle?.select || table.theme.headerStyle?.select;
+  } else if (layout.isColumnHeader(cellGroup.col, cellGroup.row)) {
+    selectStyle = table.theme.headerStyle?.select;
+  } else if (layout.isRowHeader(cellGroup.col, cellGroup.row)) {
+    selectStyle = table.theme.rowHeaderStyle?.select;
+  } else if (layout.isBottomFrozenRow(cellGroup.col, cellGroup.row)) {
+    selectStyle =
+      table.theme.bottomFrozenStyle?.select ||
+      (table.isListTable() ? table.theme.bodyStyle?.select : table.theme.headerStyle?.select);
+  } else if (layout.isRightFrozenColumn(cellGroup.col, cellGroup.row)) {
+    selectStyle =
+      table.theme.rightFrozenStyle?.select ||
+      (table.isListTable() ? table.theme.bodyStyle?.select : table.theme.rowHeaderStyle?.select);
+  } else if (!table.isHeader(cellGroup.col, cellGroup.row)) {
+    selectStyle = table.theme.bodyStyle?.select;
+  }
+  const fillColor = getProp(colorKey, selectStyle, cellGroup.col, cellGroup.row, table);
+  return fillColor;
+}
+
+export function isCellSelected(state: StateManager, col: number, row: number, cellGroup: Group): string | undefined {
+  const { highlightScope, disableHeader, cellPos, ranges } = state.select;
+
+  let selectMode;
+  if (ranges?.length === 1 && ranges[0].end.col === ranges[0].start.col && ranges[0].end.row === ranges[0].start.row) {
+    const table = state.table;
+
+    const isHeader = table.isHeader(col, row);
+    if (isHeader && disableHeader) {
+      return undefined;
+    }
+
+    if (highlightScope === HighlightScope.single && cellPos.col === col && cellPos.row === row) {
+      selectMode = 'cellBgColor';
+    } else if (highlightScope === HighlightScope.column && cellPos.col === col) {
+      if (cellPos.col === col && cellPos.row === row) {
+        selectMode = 'cellBgColor';
+      } else {
+        selectMode = 'inlineColumnBgColor';
+      }
+    } else if (highlightScope === HighlightScope.row && cellPos.row === row) {
+      if (cellPos.col === col && cellPos.row === row) {
+        selectMode = 'cellBgColor';
+      } else {
+        selectMode = 'inlineRowBgColor';
+      }
+    } else if (highlightScope === HighlightScope.cross) {
+      if (cellPos.col === col && cellPos.row === row) {
+        selectMode = 'cellBgColor';
+      } else if (cellPos.col === col) {
+        selectMode = 'inlineColumnBgColor';
+      } else if (cellPos.row === row) {
+        selectMode = 'inlineRowBgColor';
+      }
+    }
+
+    if (selectMode) {
+      let cellDisable;
+      if (isHeader) {
+        const define = table.getHeaderDefine(col, row);
+        cellDisable = (define as ColumnDefine)?.disableHeaderSelect;
+
+        // if (cellGroup.firstChild && cellGroup.firstChild.name === 'axis' && table.options.select?.disableAxisHover) {
+        //   cellDisable = true;
+        // }
+      } else {
+        const define = table.getBodyColumnDefine(col, row);
+        cellDisable = (define as ColumnDefine)?.disableSelect;
+      }
+
+      if (cellDisable) {
+        selectMode = undefined;
+      }
+    }
+  }
+  return selectMode;
+}

packages/vtable/src/state/state.ts

@@ -408,14 +408,16 @@ export class StateManager {
       /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/
       headerSelectMode,
       disableSelect,
-      disableHeaderSelect
+      disableHeaderSelect,
+      highlightMode
     } = Object.assign(
       {},
       {
         /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/
         headerSelectMode: 'inline',
         disableSelect: false,
-        disableHeaderSelect: false
+        disableHeaderSelect: false,
+        highlightMode: 'cell'
       },
       this.table.options.select
     );
@@ -428,7 +430,15 @@ export class StateManager {
     //   this.select.highlightScope = HighlightScope.column;
     // } else
     if (!disableSelect) {
-      this.select.highlightScope = HighlightScope.single;
+      if (highlightMode === 'cross') {
+        this.select.highlightScope = HighlightScope.cross;
+      } else if (highlightMode === 'row') {
+        this.select.highlightScope = HighlightScope.row;
+      } else if (highlightMode === 'column') {
+        this.select.highlightScope = HighlightScope.column;
+      } else {
+        this.select.highlightScope = HighlightScope.single;
+      }
     } else {
       this.select.highlightScope = HighlightScope.none;
     }

packages/vtable/src/themes/DEFAULT.ts

@@ -118,8 +118,6 @@ export default {
   selectionStyle: {
     cellBgColor: 'rgba(0, 0, 255,0.1)',
     cellBorderLineWidth: 2,
-    inlineColumnBgColor: '#CCE0FF',
-    inlineRowBgColor: '#CCE0FF',
     cellBorderColor: '#0000ff'
   },
   tooltipStyle: {