Merge pull request #560 from VisActor/release/0.14.1

[Auto release] release 0.14.1

README.md

@@ -165,6 +165,7 @@ $ rush docs
 ## 🔗 Related Links
 
 - [Official website](https://visactor.io/vtable)
+- [Usage Trend](https://npm-compare.com/@visactor/vtable)
 
 # 💫 Ecosystem
 

README.zh-CN.md

@@ -162,6 +162,7 @@ $ rush docs
 # 🔗 相关链接
 
 - [官网](https://visactor.io/vtable)
+- [使用趋势](https://npm-compare.com/@visactor/vtable)
 
 # 💫 生态
 

packages/vtable/CHANGELOG.json

@@ -1,6 +1,18 @@
 {
   "name": "@visactor/vtable",
   "entries": [
+    {
+      "version": "0.14.1",
+      "tag": "@visactor/vtable_v0.14.1",
+      "date": "Mon, 13 Nov 2023 12:07:03 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "refactor: when drag to canvas blank area to end select #556\n\n"
+          }
+        ]
+      }
+    },
     {
       "version": "0.14.0",
       "tag": "@visactor/vtable_v0.14.0",

packages/vtable/CHANGELOG.md

@@ -1,6 +1,15 @@
 # Change Log - @visactor/vtable
 
-This log was last generated on Fri, 10 Nov 2023 11:31:45 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Nov 2023 12:07:03 GMT and should not be manually modified.
+
+## 0.14.1
+Mon, 13 Nov 2023 12:07:03 GMT
+
+### Patches
+
+- refactor: when drag to canvas blank area to end select #556
+
+
 
 ## 0.14.0
 Fri, 10 Nov 2023 11:31:45 GMT

packages/vtable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vtable",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "canvas table width high performance",
   "keywords": [
     "grid",
@@ -113,5 +113,10 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "homepage": "https://visactor.io/vtable",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/VisActor/VTable.git"
   }
 }

packages/vtable/src/event/listener/table-group.ts

@@ -14,10 +14,30 @@ import type { BaseTableAPI } from '../../ts-types/base-table';
 import type { IIconGraphicAttribute } from '../../scenegraph/graphic/icon';
 // PointerMove敏感度太高了 记录下上一个鼠标位置 在接收到PointerMove事件时做判断 是否到到触发框选或者移动表头操作的标准，防止误触
 let LastPointerXY: { x: number; y: number };
+let LastBodyPointerXY: { x: number; y: number };
+let isDown = false;
+let isDraging = false;
 export function bindTableGroupListener(eventManeger: EventManeger) {
   const table = eventManeger.table;
   const stateManeger = table.stateManeger;
+  document.body.addEventListener('pointerdown', e => {
+    LastBodyPointerXY = { x: e.x, y: e.y };
+    isDown = true;
+  });
+  document.addEventListener('pointerup', e => {
+    LastBodyPointerXY = null;
+    // console.log('body pointerup', isDown, isDraging);
+    isDown = false;
+    isDraging = false;
+  });
   document.body.addEventListener('pointermove', (e: FederatedPointerEvent) => {
+    if (isDown && LastBodyPointerXY) {
+      const lastX = LastBodyPointerXY?.x ?? e.x;
+      const lastY = LastBodyPointerXY?.y ?? e.y;
+      if (Math.abs(lastX - e.x) > 1 || Math.abs(lastY - e.y) > 1) {
+        isDraging = true;
+      }
+    }
     // 注释掉。因为： 这里pointermove太敏感了 点击快的时候 可能动了1px这里也会执行到 就影响到下面选中不触发的问题。下面pointermove就有这段逻辑，这里先去掉
     // if (eventManeger.touchSetTimeout) {
     //   clearTimeout(eventManeger.touchSetTimeout);
@@ -277,17 +297,10 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
         }
       }
     } else if (stateManeger.isSelecting()) {
-      // 下面触发DRAG_SELECT_END 区别于pointerup 不能调用endSelectCells
-      // table.stateManeger.endSelectCells();
       if (table.stateManeger.select?.ranges?.length) {
         const lastCol = table.stateManeger.select.ranges[table.stateManeger.select.ranges.length - 1].end.col;
         const lastRow = table.stateManeger.select.ranges[table.stateManeger.select.ranges.length - 1].end.row;
-        table.stateManeger.select.selecting = false;
-        table.fireListeners(TABLE_EVENT_TYPE.SELECTED_CELL, {
-          ranges: table.stateManeger.select.ranges,
-          col: lastCol,
-          row: lastRow
-        });
+        table.stateManeger.endSelectCells();
         if ((table as any).hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
           const cellsEvent: MousePointerMultiCellEvent = {
             event: e.nativeEvent,
@@ -570,16 +583,22 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
   table.scenegraph.stage.addEventListener('pointertap', (e: FederatedPointerEvent) => {
     const target = e.target;
     if (
+      // 如果是鼠标点击到canvas空白区域 则取消选中状态
+      !isDraging &&
       target &&
-      !target.isDescendantsOf(table.scenegraph.tableGroup) &&
-      (target as any) !== table.scenegraph.tableGroup &&
-      (target as any) !== table.scenegraph.stage
+      !target.isDescendantsOf(table.scenegraph.tableGroup)
+      // &&
+      // (target as any) !== table.scenegraph.tableGroup &&
+      // (target as any) !== table.scenegraph.stage
     ) {
       stateManeger.updateInteractionState(InteractionState.default);
       eventManeger.dealTableHover();
       eventManeger.dealTableSelect();
       stateManeger.updateCursor();
       table.scenegraph.updateChartState(null);
+    } else if (isDraging) {
+      // 如果鼠标拖拽后是否 则结束选中
+      stateManeger.endSelectCells();
     }
   });