From 5a25899b5701c0539d3bf7002e3710895501addd Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 20 Sep 2023 14:46:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor,stage):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=82=AC=E5=81=9C=E5=87=BA=E7=8E=B0=E7=BB=84=E4=BB=B6=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/components/ToolButton.vue |  2 +-
 .../layouts/workspace/viewer/NodeListMenu.vue | 23 ++++++++++++-------
 .../layouts/workspace/viewer/ViewerMenu.vue   |  2 +-
 packages/stage/src/ActionManager.ts           |  3 ++-
 packages/stage/src/StageCore.ts               |  4 ++--
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue
index 80d1894e..36ba25d3 100644
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@@ -16,7 +16,7 @@
           ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
         >
       </TMagicTooltip>
-      <TMagicButton v-else size="small" text :disabled="disabled"
+      <TMagicButton v-else size="small" text :disabled="disabled" :title="data.text"
         ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
       >
     </template>
diff --git a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
index b08c3fa2..9c80ffdf 100644
--- a/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
@@ -1,6 +1,8 @@
 <template>
-  <content-menu
+  <ContentMenu
     ref="menu"
+    class="magic-editor-node-list-menu"
+    style="max-width: 280px"
     :menu-data="menuData"
     :active="node?.id"
     :auto-hide="!pinned"
@@ -9,7 +11,7 @@
     <template #title>
       <NodeListMenuTitle v-model:pinned="pinned" @change="dragMenuHandler" @close="closeHandler"></NodeListMenuTitle>
     </template>
-  </content-menu>
+  </ContentMenu>
 </template>
 
 <script lang="ts" setup>
@@ -53,6 +55,14 @@ const cancel = () => {
   menu.value?.hide();
 };
 
+const clearTimeoutLazy = () => {
+  globalThis.setTimeout(() => {
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+    }
+  }, 300);
+};
+
 const unWatch = watch(
   stage,
   (stage) => {
@@ -90,7 +100,8 @@ const unWatch = watch(
     });
 
     stage.on('mouseleave', () => {
-      cancel();
+      // mouseleave后，大概率还有最后一个mousemove事件，这里延迟清除
+      clearTimeoutLazy();
     });
 
     unWatch();
@@ -135,11 +146,7 @@ const menuData = computed<MenuButton[]>(() =>
 
 const mouseenterHandler = () => {
   // menu的mouseenter后，大概率还有最后一个mousemove事件，这里延迟清除
-  globalThis.setTimeout(() => {
-    if (timeout) {
-      globalThis.clearTimeout(timeout);
-    }
-  }, 300);
+  clearTimeoutLazy();
 };
 
 const dragMenuHandler = ({ deltaY, deltaX }: OnDrag) => {
diff --git a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
index 4f3859a9..3dea1a98 100644
--- a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <content-menu :menu-data="menuData" ref="menu"></content-menu>
+  <ContentMenu :menu-data="menuData" ref="menu"></ContentMenu>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/stage/src/ActionManager.ts b/packages/stage/src/ActionManager.ts
index f97f2919..7a5a94dd 100644
--- a/packages/stage/src/ActionManager.ts
+++ b/packages/stage/src/ActionManager.ts
@@ -567,8 +567,9 @@ export default class ActionManager extends EventEmitter {
     }
   };
 
-  private mouseLeaveHandler = () => {
+  private mouseLeaveHandler = (event: MouseEvent) => {
     setTimeout(() => this.clearHighlight(), throttleTime);
+    this.emit('mouseleave', event);
   };
 
   private mouseWheelHandler = () => {
diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts
index fd9fd211..570a4c63 100644
--- a/packages/stage/src/StageCore.ts
+++ b/packages/stage/src/StageCore.ts
@@ -367,10 +367,10 @@ export default class StageCore extends EventEmitter {
    */
   private initMouseEvent(): void {
     this.actionManager
-      .on('mousemove', async (event: MouseEvent) => {
+      .on('mousemove', (event: MouseEvent) => {
         this.emit('mousemove', event);
       })
-      .on('mouseleave', async (event: MouseEvent) => {
+      .on('mouseleave', (event: MouseEvent) => {
         this.emit('mouseleave', event);
       })
       .on('drag-start', (e: OnDragStart) => {