feat(extension): 独占模式支持单击取消全选

Author: DymoneLewis

packages/extension/src/components/selection-select/index.ts

@@ -72,6 +72,7 @@ export class SelectionSelect {
     }
     this.startPoint = undefined
     this.endPoint = undefined
+    this.mouseDownInfo = null
 
     // 移除事件监听
     document.removeEventListener('mousemove', this.draw)
@@ -134,9 +135,14 @@ export class SelectionSelect {
     // 禁用右键框选
     const isRightClick = e.button === 2
     if (isRightClick) return
-
     // 清理之前可能存在的选区状态
     this.cleanupSelectionState()
+    // 记录鼠标按下时的位置和时间
+    this.mouseDownInfo = {
+      x: e.clientX,
+      y: e.clientY,
+      time: Date.now(),
+    }
 
     // 记录原始设置并临时禁止画布移动
     this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph!
@@ -165,22 +171,6 @@ export class SelectionSelect {
     document.addEventListener('mouseup', this.drawOff)
   }
 
-  onToolContainerMouseUp = (e: MouseEvent) => {
-    if (this.mouseDownInfo) {
-      const { x, y, time } = this.mouseDownInfo
-      const now = Date.now()
-      // 用 mouseDown 和 mouseUp 的位置偏移及时间间隔来判断是否是点击事件
-      const isClickEvent =
-        Math.abs(e.clientX - x) < 10 &&
-        Math.abs(e.clientY - y) < 10 &&
-        now - time < 100
-      if (isClickEvent) {
-        this.lf.clearSelectElements()
-      }
-      this.mouseDownInfo = null
-    }
-  }
-
   /**
    * 设置选中的灵敏度
    * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true
@@ -259,6 +249,21 @@ export class SelectionSelect {
     }
   }
   private drawOff = (e: MouseEvent) => {
+    // 处理鼠标抬起事件
+    // 首先判断是否是点击，如果是，则清空框选
+    if (this.mouseDownInfo) {
+      const { x, y, time } = this.mouseDownInfo
+      const isClick =
+        Math.abs(e.clientX - x) < 5 &&
+        Math.abs(e.clientY - y) < 5 &&
+        Date.now() - time < 200
+      if (isClick) {
+        this.lf.clearSelectElements()
+        this.cleanupSelectionState()
+        return
+      }
+    }
+
     const curStartPoint = cloneDeep(this.startPoint)
     const curEndPoint = cloneDeep(this.endPoint)
     document.removeEventListener('mousemove', this.draw)