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

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

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