From babaadb0cf87829197dbfa820f0141aefea48076 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 11 Aug 2023 20:23:23 +0800
Subject: [PATCH] =?UTF-8?q?chore(stage):=20=E4=BC=98=E5=8C=96=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E4=B8=8E=E5=8D=95=E9=80=89=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stage/src/DragResizeHelper.ts |  4 ----
 packages/stage/src/StageDragResize.ts  | 18 ++++++++--------
 packages/stage/src/StageHighlight.ts   | 29 ++++++++++++++++----------
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/stage/src/DragResizeHelper.ts b/packages/stage/src/DragResizeHelper.ts
index 0053dd74..536aded7 100644
--- a/packages/stage/src/DragResizeHelper.ts
+++ b/packages/stage/src/DragResizeHelper.ts
@@ -85,10 +85,6 @@ export default class DragResizeHelper {
     this.moveableHelper.clear();
   }
 
-  public destroyShadowEl(): void {
-    this.targetShadow.destroyEl();
-  }
-
   public getShadowEl(): TargetElement | undefined {
     return this.targetShadow.el;
   }
diff --git a/packages/stage/src/StageDragResize.ts b/packages/stage/src/StageDragResize.ts
index 8a5041b4..023225b8 100644
--- a/packages/stage/src/StageDragResize.ts
+++ b/packages/stage/src/StageDragResize.ts
@@ -71,8 +71,7 @@ export default class StageDragResize extends MoveableOptionsManager {
    * @param event 鼠标事件
    */
   public select(el: HTMLElement, event?: MouseEvent): void {
-    // 从不能拖动到能拖动的节点之间切换，要重新创建moveable，不然dragStart不生效
-    if (!this.moveable || el !== this.target) {
+    if (!this.moveable) {
       this.initMoveable(el);
     } else {
       this.updateMoveable(el);
@@ -95,14 +94,13 @@ export default class StageDragResize extends MoveableOptionsManager {
     Object.entries(options).forEach(([key, value]) => {
       (this.moveable as any)[key] = value;
     });
-    this.moveable.updateTarget();
+    this.moveable.updateRect();
   }
 
   public clearSelectStatus(): void {
     if (!this.moveable) return;
-    this.dragResizeHelper.destroyShadowEl();
-    this.moveable.target = null;
-    this.moveable.updateTarget();
+    this.moveable.zoom = 0;
+    this.moveable.updateRect();
   }
 
   /**
@@ -111,6 +109,9 @@ export default class StageDragResize extends MoveableOptionsManager {
   public destroy(): void {
     this.moveable?.destroy();
     this.dragResizeHelper.destroy();
+
+    this.moveable = undefined;
+
     this.dragStatus = StageDragStatus.END;
     this.removeAllListeners();
   }
@@ -132,7 +133,7 @@ export default class StageDragResize extends MoveableOptionsManager {
     this.setElementGuidelines([this.target as HTMLElement], elementGuidelines);
 
     return this.getOptions(false, {
-      target: this.dragResizeHelper.getShadowEl(),
+      zoom: 1,
     });
   }
 
@@ -140,9 +141,8 @@ export default class StageDragResize extends MoveableOptionsManager {
     const options: MoveableOptions = this.init(el);
     this.dragResizeHelper.clear();
 
-    this.moveable?.destroy();
-
     this.moveable = new Moveable(this.container, {
+      target: this.dragResizeHelper.getShadowEl(),
       ...options,
     });
 
diff --git a/packages/stage/src/StageHighlight.ts b/packages/stage/src/StageHighlight.ts
index f259ca99..d37c7f0f 100644
--- a/packages/stage/src/StageHighlight.ts
+++ b/packages/stage/src/StageHighlight.ts
@@ -28,7 +28,7 @@ export default class StageHighlight extends EventEmitter {
   public container: HTMLElement;
   public target?: HTMLElement;
   public moveable?: Moveable;
-  public targetShadow: TargetShadow;
+  public targetShadow?: TargetShadow;
   private getRootContainer: GetRootContainer;
 
   constructor(config: StageHighlightConfig) {
@@ -52,14 +52,19 @@ export default class StageHighlight extends EventEmitter {
   public highlight(el: HTMLElement): void {
     if (!el || el === this.target) return;
     this.target = el;
-    this.moveable?.destroy();
 
-    this.moveable = new Moveable(this.container, {
-      target: this.targetShadow.update(el),
-      origin: false,
-      rootContainer: this.getRootContainer(),
-      zoom: 2,
-    });
+    this.targetShadow?.update(el);
+    if (this.moveable) {
+      this.moveable.zoom = 2;
+      this.moveable.updateRect();
+    } else {
+      this.moveable = new Moveable(this.container, {
+        target: this.targetShadow?.el,
+        origin: false,
+        rootContainer: this.getRootContainer(),
+        zoom: 2,
+      });
+    }
   }
 
   /**
@@ -67,9 +72,9 @@ export default class StageHighlight extends EventEmitter {
    */
   public clearHighlight(): void {
     if (!this.moveable || !this.target) return;
+    this.moveable.zoom = 0;
+    this.moveable.updateRect();
     this.target = undefined;
-    this.moveable.target = null;
-    this.moveable.updateTarget();
   }
 
   /**
@@ -77,6 +82,8 @@ export default class StageHighlight extends EventEmitter {
    */
   public destroy(): void {
     this.moveable?.destroy();
-    this.targetShadow.destroy();
+    this.targetShadow?.destroy();
+    this.moveable = undefined;
+    this.targetShadow = undefined;
   }
 }