fix(image): emit unselected event asynchronously #506 (#514)

opendatalab · Oct 25, 2024 · 198c03f · 198c03f
1 parent 361a1a1
commit 198c03f
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 10 deletions.
diff --git a/packages/image/src/core/Axis.ts b/packages/image/src/core/Axis.ts
@@ -265,6 +265,13 @@ export class Axis {
     eventEmitter.emit(EInternalEvent.AxisChange, e);
   };
 
+  public resetOffset() {
+    this._distanceX = 0;
+    this._distanceY = 0;
+    this._startPanPoint = null;
+    this._startMovePoint = null;
+  }
+
   /**
    * 根据图片的初始位置和缩放比例，计算在画布上的精确位置
    *

diff --git a/packages/image/src/drafts/ClosedSpline.draft.ts b/packages/image/src/drafts/ClosedSpline.draft.ts
@@ -34,6 +34,7 @@ export class DraftPolygonCurve extends Draft<PolygonData, Line | Point | any, Li
 
     this._setupShapes();
     this.onMouseUp(this._onMouseUp);
+    this.finishSetup();
   }
 
   /**

diff --git a/packages/image/src/drafts/Cuboid.draft/index.ts b/packages/image/src/drafts/Cuboid.draft/index.ts
@@ -88,6 +88,7 @@ export class DraftCuboid extends Draft<CuboidData, ControllerEdge | Point | Line
 
     this._setupShapes();
     this.onMouseUp(this._onMouseUp);
+    this.finishSetup();
   }
 
   /**

diff --git a/packages/image/src/drafts/Draft.ts b/packages/image/src/drafts/Draft.ts
@@ -91,7 +91,7 @@ export class Draft<
 
     // 应该让草稿内的图形对象先于草稿对象监听鼠标事件
     // TODO：模仿DOM的事件设计冒泡机制，处理重叠的图形鼠标事件
-    setTimeout(() => {
+    this.on('setup', () => {
       eventEmitter.on(EInternalEvent.LeftMouseDown, this._handleMouseDown);
       eventEmitter.on(EInternalEvent.MouseMove, this._handleMouseMove);
       eventEmitter.on(EInternalEvent.LeftMouseUp, this._handleLeftMouseUp);
@@ -184,11 +184,9 @@ export class Draft<
      * 因为清除isMoved是异步的
      * see https://github.com/opendatalab/labelU-Kit/blob/main/packages/image/src/core/Axis.ts#L230
      */
-    setTimeout(() => {
-      if (!isUnderCursor && !axis?.isMoved) {
-        this.group.emit(EInternalEvent.UnSelect, e, this);
-      }
-    });
+    if (!isUnderCursor && !axis?.isMoved) {
+      this.group.emit(EInternalEvent.UnSelect, e, this);
+    }
   };
 
   private _handleLeftMouseUp = (e: MouseEvent) => {
@@ -220,6 +218,10 @@ export class Draft<
     return (this._serializeData?.shapes?.map(loop) as AxisPoint[] | AxisPoint[][]) ?? [];
   }
 
+  public finishSetup() {
+    this.emit('setup');
+  }
+
   public onMove(handler: MouseEventHandler) {
     this._onMoveHandlers.push(handler);
   }
@@ -348,7 +350,8 @@ export class Draft<
     this.data = null as any;
     this.group.destroy();
     this.clearHandlers();
-
+    axis?.resetOffset();
+    this.removeAllListeners();
     eventEmitter.off(EInternalEvent.LeftMouseDown, this._handleMouseDown);
     eventEmitter.off(EInternalEvent.MouseMove, this._handleMouseMove);
     eventEmitter.off(EInternalEvent.LeftMouseUp, this._handleLeftMouseUp);

diff --git a/packages/image/src/drafts/Line.draft.ts b/packages/image/src/drafts/Line.draft.ts
@@ -37,6 +37,7 @@ export class DraftLine extends Draft<LineData, Line | Point, LineStyle | PointSt
     this._createSelection();
 
     eventEmitter.on(EInternalEvent.KeyUp, this._onKeyUp);
+    this.finishSetup();
   }
 
   /**

diff --git a/packages/image/src/drafts/Point.draft.ts b/packages/image/src/drafts/Point.draft.ts
@@ -15,8 +15,8 @@ export class DraftPoint extends Draft<PointData, Point | ShapeText, PointStyle>
     this.config = config;
 
     this._setupShapes();
-
     this.onMouseUp(this._onMouseUp);
+    this.finishSetup();
   }
 
   private _setupShapes() {

diff --git a/packages/image/src/drafts/Polygon.draft.ts b/packages/image/src/drafts/Polygon.draft.ts
@@ -63,6 +63,7 @@ export class DraftPolygon extends Draft<PolygonData, Polygon | Point | Line, Pol
 
     eventEmitter.on(EInternalEvent.KeyDown, this._onKeyDown);
     eventEmitter.on(EInternalEvent.KeyUp, this._onKeyUp);
+    this.finishSetup();
   }
 
   /**

diff --git a/packages/image/src/drafts/Rect.draft.ts b/packages/image/src/drafts/Rect.draft.ts
@@ -38,6 +38,7 @@ export class DraftRect extends Draft<RectData, ControllerEdge | Point | Rect, Re
 
     this._setupShapes();
     this.onMouseUp(this._onMouseUp);
+    this.finishSetup();
   }
 
   /**

diff --git a/packages/image/src/drafts/Spline.draft.ts b/packages/image/src/drafts/Spline.draft.ts
@@ -30,6 +30,7 @@ export class DraftLineCurve extends Draft<LineData, Line | Point | any, LineStyl
 
     this._setupShapes();
     this.onMouseUp(this._onMouseUp);
+    this.finishSetup();
   }
 
   /**

diff --git a/packages/image/src/shapes/Group.ts b/packages/image/src/shapes/Group.ts
@@ -56,7 +56,7 @@ export class Group<T extends Shape<Style>, Style> {
 
   private _onAxisChange = () => {
     // 组合在图形之后创建，所以需要延迟一帧更新
-    setTimeout(() => {
+    Promise.resolve().then(() => {
       this._updateBBox()._updateRBush();
     });
   };

diff --git a/packages/image/src/shapes/Shape.ts b/packages/image/src/shapes/Shape.ts
@@ -110,7 +110,7 @@ export class Shape<Style> {
     },
   };
 
-  private _bindEvents() {
+  private async _bindEvents() {
     eventEmitter.on(EInternalEvent.AxisChange, this.update);
     eventEmitter.on(EInternalEvent.LeftMouseUp, this.update);
   }
-Original file line number
+Diff line change
@@ Expand Up @@
         this._setupShapes();
         this.onMouseUp(this._onMouseUp);
+        this.finishSetup();
       }
       /**
@@ Expand Down @@