Merge pull request #1932 from VisActor/feat/add-deselect-option

Feat/add deselect option
VisActor · Jun 17, 2024 · fc7b6d3 · fc7b6d3
2 parents 7bb8677 + a162694
commit fc7b6d3
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 3 deletions.
diff --git a/common/changes/@visactor/vtable/feat-add-deselect-option_2024-06-17-10-39.json b/common/changes/@visactor/vtable/feat-add-deselect-option_2024-06-17-10-39.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add blankAreaClickDeselect and outsideClickDeselect config\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}
diff --git a/docs/assets/option/en/common/option-secondary.md b/docs/assets/option/en/common/option-secondary.md
@@ -213,6 +213,14 @@ Do not respond to mouse select interaction.
 
 Separately set the header not to respond to mouse select interaction.
 
+##${prefix} blankAreaClickDeselect(boolean) = false
+
+Whether to cancel the selection when clicking the blank area.
+
+##${prefix} outsideClickDeselect(boolean) = true
+
+Whether to cancel the selection when clicking outside the table.
+
 #${prefix} theme(Object)
 
 {{ use: common-theme(

diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md
@@ -32,6 +32,7 @@ Whether to transpose, default is false
 
 Whether to display the table header.
 
+
 ## pagination(IPagination)
 
 Pagination configuration.

diff --git a/docs/assets/option/zh/common/option-secondary.md b/docs/assets/option/zh/common/option-secondary.md
@@ -208,6 +208,14 @@ hover 交互响应模式：十字交叉、整列、整行或者单个单元格
 
 单独设置表头不响应鼠标 select 交互。
 
+##${prefix} blankAreaClickDeselect(boolean) = false
+
+点击空白区域是否取消选中。
+
+##${prefix} outsideClickDeselect(boolean) = true
+
+点击外部区域是否取消选中。
+
 #${prefix} theme(Object)
 
 {{ use: common-theme(

diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts
@@ -12,7 +12,7 @@ import type { SceneEvent } from '../util';
 import { getCellEventArgsSet, regIndexReg } from '../util';
 import { TABLE_EVENT_TYPE } from '../../core/TABLE_EVENT_TYPE';
 import type { Group } from '../../scenegraph/graphic/group';
-import { isValid, last } from '@visactor/vutils';
+import { isValid } from '@visactor/vutils';
 import { getIconAndPositionFromTarget } from '../../scenegraph/utils/icon';
 import { cellInRanges } from '../../tools/helper';
 import { Rect } from '../../tools/Rect';
@@ -338,7 +338,9 @@ export function bindTableGroupListener(eventManager: EventManager) {
     stateManager.updateInteractionState(InteractionState.default);
     eventManager.dealTableHover();
     //点击到表格外部不需要取消选中状态
-    // eventManager.dealTableSelect();
+    if (table.options.select?.outsideClickDeselect) {
+      eventManager.dealTableSelect();
+    }
   });
 
   table.scenegraph.tableGroup.addEventListener('pointerdown', (e: FederatedPointerEvent) => {
@@ -729,8 +731,13 @@ export function bindTableGroupListener(eventManager: EventManager) {
     ) {
       stateManager.updateInteractionState(InteractionState.default);
       eventManager.dealTableHover();
-      eventManager.dealTableSelect();
       stateManager.endSelectCells();
+
+      // 点击空白区域取消选中
+      if (table.options.select?.blankAreaClickDeselect ?? true) {
+        eventManager.dealTableSelect();
+      }
+
       stateManager.updateCursor();
       table.scenegraph.updateChartState(null);
     } else if (table.eventManager.isDraging && stateManager.isSelecting()) {

diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts
@@ -338,6 +338,10 @@ export interface BaseTableConstructorOptions {
     disableSelect?: boolean;
     /** 单独设置表头不响应鼠标select交互 */
     disableHeaderSelect?: boolean;
+    /** 点击空白区域是否取消选中 */
+    blankAreaClickDeselect?: boolean;
+    /** 点击外部区域是否取消选中 */
+    outsideClickDeselect?: boolean; //
   };
   /** 下拉菜单的相关配置。消失时机：显示后点击菜单区域外自动消失*/
   menu?: {