fix(extension): selection-select 插件在开启选区后，无法通过点击其他地方关闭选区

Author: ZivvW

packages/core/src/view/overlay/ToolOverlay.tsx

@@ -54,13 +54,10 @@ export class ToolOverlay extends Component<IProps> {
   }
 
   zoomHandler = (e: WheelEvent) => {
+    // TODO 是否应该使用 dispatchEvent 来触发事件
     this.props.getCanvasOverlay()?.zoomHandler(e)
   }
 
-  mouseDownHandler = (e: MouseEvent) => {
-    this.props.getCanvasOverlay()?.mouseDownHandler(e)
-  }
-
   render() {
     const { graphModel } = this.props
     return (
@@ -69,11 +66,10 @@ export class ToolOverlay extends Component<IProps> {
         id={`ToolOverlay_${graphModel.flowId}`}
         /*
          * 默认情况下该容器设置了 pointer-events: none，不会触发这些事件
-         * 这里会在容器取消 pointer-events: none 后将事件传给画布用来缩放拖拽画布等操作
-         * 目前只在 selection-select 插件中使用。为了能在元素内部进行框选，在开启选区后会关闭事件透传
+         * 只会在容器取消 pointer-events: none 后触发，用于缩放、滚动画布等操作
+         * 目前只在 selection-select 插件中使用。为了能在元素内部进行框选，在开启选区后会关闭事件透传。需要手动触发事件
          */
         onWheel={this.zoomHandler}
-        onMouseDown={this.mouseDownHandler}
       >
         {this.getTools()}
       </div>

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

@@ -13,6 +13,12 @@ export class SelectionSelect {
   private disabled = true
   private isWholeNode = true
   private isWholeEdge = true
+  // 用于区分选区和点击事件
+  private mouseDownInfo: {
+    x: number
+    y: number
+    time: number
+  } | null = null
 
   constructor({ lf }: LogicFlow.IExtensionProps) {
     this.lf = lf
@@ -23,18 +29,22 @@ export class SelectionSelect {
     lf.closeSelectionSelect = () => {
       this.closeSelectionSelect()
     }
-    this.onToolContainerMouseDown = this.onToolContainerMouseDown.bind(this)
   }
 
   render(_: LogicFlow, domContainer: HTMLElement) {
     this.container = domContainer
   }
 
-  onToolContainerMouseDown(e: MouseEvent) {
+  onToolContainerMouseDown = (e: MouseEvent) => {
     // 避免在其他插件元素上点击时开启选区
     if (e.target !== this.container) {
       return
     }
+    this.mouseDownInfo = {
+      x: e.clientX,
+      y: e.clientY,
+      time: Date.now(),
+    }
     const lf = this.lf
     const domContainer = this.container
     if (!domContainer) {
@@ -72,6 +82,22 @@ 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
@@ -92,7 +118,9 @@ export class SelectionSelect {
     if (!this.container) {
       return
     }
+    this.mouseDownInfo = null
     this.container.addEventListener('mousedown', this.onToolContainerMouseDown)
+    this.container.addEventListener('mouseup', this.onToolContainerMouseUp)
     // 取消点击事件的穿透，只让 ToolOverlay 接收事件，避免与图形元素的事件冲突
     this.container.style.pointerEvents = 'auto'
     this.open()
@@ -106,10 +134,12 @@ export class SelectionSelect {
       return
     }
     this.container.style.pointerEvents = 'none'
+    this.mouseDownInfo = null
     this.container.removeEventListener(
       'mousedown',
       this.onToolContainerMouseDown,
     )
+    this.container.removeEventListener('mouseup', this.onToolContainerMouseUp)
     this.close()
   }