From 2432bc5a6931b95434a0711f4f67f540b8b9c9c3 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 19 Jan 2024 11:29:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20stage-overlay=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/services/editor.ts       |  2 +
 packages/editor/src/services/stageOverlay.ts | 40 +++++++++++++++-----
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
index 90a23736..349b59c5 100644
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@@ -892,6 +892,8 @@ class Editor extends BaseService {
     this.addModifiedNodeId(parent.id);
 
     this.pushHistoryState();
+
+    this.emit('drag-to', { index, targetIndex, config, parent, targetParent });
   }
 
   /**
diff --git a/packages/editor/src/services/stageOverlay.ts b/packages/editor/src/services/stageOverlay.ts
index 0cddd172..1fcae06b 100644
--- a/packages/editor/src/services/stageOverlay.ts
+++ b/packages/editor/src/services/stageOverlay.ts
@@ -51,6 +51,8 @@ class StageOverlay extends BaseService {
     editorService.on('update', this.updateHandler);
     editorService.on('add', this.addHandler);
     editorService.on('remove', this.removeHandler);
+    editorService.on('drag-to', this.updateHandler);
+    editorService.on('move-layer', this.updateHandler);
   }
 
   public closeOverlay() {
@@ -67,6 +69,8 @@ class StageOverlay extends BaseService {
     editorService.off('update', this.updateHandler);
     editorService.off('add', this.addHandler);
     editorService.off('remove', this.removeHandler);
+    editorService.off('drag-to', this.updateHandler);
+    editorService.off('move-layer', this.updateHandler);
   }
 
   public updateOverlay() {
@@ -99,13 +103,6 @@ class StageOverlay extends BaseService {
         }
 
         const wrapDiv = this.get('wrapDiv');
-        const sourceEl = this.get('sourceEl');
-
-        wrapDiv.style.cssText = `
-            width: ${sourceEl?.scrollWidth}px;
-            height: ${sourceEl?.scrollHeight}px;
-            background-color: #fff;
-          `;
 
         await this.render();
 
@@ -141,12 +138,19 @@ class StageOverlay extends BaseService {
     this.createContentEl();
 
     const contentEl = this.get('contentEl');
+    const sourceEl = this.get('sourceEl');
     const wrapDiv = this.get('wrapDiv');
     const subStage = this.get('stage');
     const stageOptions = this.get('stageOptions');
 
     if (!contentEl) return;
 
+    wrapDiv.style.cssText = `
+      width: ${sourceEl?.scrollWidth}px;
+      height: ${sourceEl?.scrollHeight}px;
+      background-color: #fff;
+    `;
+
     Array.from(wrapDiv.children).forEach((element) => {
       element.remove();
     });
@@ -162,19 +166,37 @@ class StageOverlay extends BaseService {
   }
 
   private updateHandler = () => {
-    this.render();
-    this.updateOverlay();
+    setTimeout(() => {
+      this.render();
+      this.updateOverlay();
+
+      this.updateSelectStatus();
+    });
   };
 
   private addHandler = () => {
     this.render();
     this.updateOverlay();
+
+    this.updateSelectStatus();
   };
 
   private removeHandler = () => {
     this.render();
     this.updateOverlay();
+
+    this.updateSelectStatus();
   };
+
+  private updateSelectStatus() {
+    const subStage = this.get('stage');
+    const nodes = editorService.get('nodes');
+    if (nodes.length > 1) {
+      subStage?.multiSelect(nodes.map((n) => n.id));
+    } else {
+      subStage?.select(nodes[0].id);
+    }
+  }
 }
 
 export type StageOverlayService = StageOverlay;