feat: 优化多边形双击操作的延迟卡顿问题

open-mmlab · Nov 12, 2021 · e70a94d · e70a94d
1 parent 9096785
commit e70a94d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/packages/lb-annotation/src/core/toolOperation/polygonOperation.ts b/packages/lb-annotation/src/core/toolOperation/polygonOperation.ts
@@ -83,7 +83,7 @@ class PolygonOperation extends BasicToolOperation {
     this.container.removeEventListener('mouseup', this.onMouseUp);
 
     this.container.addEventListener('mouseup', this.dragMouseUp);
-    this.dblClickListener.addEvent(this.onMouseUp, this.onLeftDblClick, this.onRightDblClick);
+    this.dblClickListener.addEvent(this.onMouseUp, this.onLeftDblClick, this.onRightDblClick, this.isAllowDouble);
   }
 
   public eventUnbinding() {
@@ -113,6 +113,19 @@ class PolygonOperation extends BasicToolOperation {
     return this.selectedPolygon?.textAttribute;
   }
 
+  // 是否直接执行操作
+  public isAllowDouble = (e: MouseEvent) => {
+    const selectedID = this.selectedID;
+
+    const currentSelectedID = this.getHoverID(e);
+    // 仅在选中的时候需要 double click
+    if (selectedID && selectedID === currentSelectedID) {
+      return true;
+    }
+
+    return false;
+  };
+
   get dataList() {
     return this.polygonList;
   }
@@ -440,6 +453,11 @@ class PolygonOperation extends BasicToolOperation {
     this.history.pushHistory(polygonList);
   }
 
+  /**
+   * 获取当前 hover 多边形的 ID
+   * @param e
+   * @returns
+   */
   public getHoverID(e: MouseEvent) {
     const coordinate = this.getCoordinateUnderZoom(e);
     const polygonListWithZoom = this.currentShowList.map((polygon) => ({

diff --git a/packages/lb-annotation/src/utils/tool/DblClickEventListener.ts b/packages/lb-annotation/src/utils/tool/DblClickEventListener.ts
@@ -73,10 +73,16 @@ class DblClickEventListener {
    * @param {*} singleClickFun
    * @param {*} leftDblClick
    * @param {*} rightDblClick
+   * @param {*} isAllowDouble 是否允许执行 double click，如果为 true 则进行的延迟，否则将立即执行，增加操作流畅性
    * @returns {void}
    * @memberof DblClickEventListen
    */
-  public addEvent(singleClickFun: any, leftDblClick: any, rightDblClick: any): void {
+  public addEvent(
+    singleClickFun: any,
+    leftDblClick: any,
+    rightDblClick: any,
+    isAllowDouble?: (e: any) => boolean,
+  ): void {
     if (!this.dom) {
       return;
     }
@@ -85,8 +91,10 @@ class DblClickEventListener {
     this.mouseUp = (e: MouseEvent) => {
       const cTime = new Date().getTime();
 
+      const isDoubleClick = isAllowDouble ? isAllowDouble(e) : true;
+
       // down 和 up 超过 delay 时间直接判断为点击事件
-      if (cTime - this.mouseDownTime > this.delay) {
+      if (cTime - this.mouseDownTime > this.delay || isDoubleClick !== true) {
         singleClickFun(e);
         return;
       }