From 3798d96b670d16153613f6c0bcb43c56d6a91ce3 Mon Sep 17 00:00:00 2001
From: xu_yanfeng <xu_yanfeng@126.com>
Date: Sat, 25 Jan 2025 16:47:56 +0800
Subject: [PATCH] =?UTF-8?q?=E9=BC=A0=E6=A0=87=E5=8F=B3=E9=94=AE=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88Inspect=EF=BC=8C=E9=BC=A0=E6=A0=87=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E8=BF=87=E7=A8=8B=E5=AE=9E=E6=97=B6hover=E6=B8=B8=E6=88=8F?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=EF=BC=8C=E5=A2=9E=E5=8A=A0pick=20top?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E5=B0=8F?=
 =?UTF-8?q?=E5=8A=A9=E6=89=8B=E7=9A=84=E7=82=B9=E5=87=BB=E6=8A=98=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cc-inspector/src/ga/type.ts                   |  6 ++-
 cc-inspector/src/scripts/content/index.ts     |  2 +-
 cc-inspector/src/scripts/inject-view/app.vue  | 50 +++++++++++++++---
 cc-inspector/src/scripts/inject-view/store.ts |  5 ++
 cc-inspector/src/scripts/inject/hint/index.ts | 52 +++++++++++++++----
 5 files changed, 94 insertions(+), 21 deletions(-)

diff --git a/cc-inspector/src/ga/type.ts b/cc-inspector/src/ga/type.ts
index 0103627..12c3946 100644
--- a/cc-inspector/src/ga/type.ts
+++ b/cc-inspector/src/ga/type.ts
@@ -79,6 +79,10 @@ export enum GA_EventName {
   Inspector = "Inspector",
   EngineVersion = "engine_version",
   AppVersion = "app_version",
+  GamePlayer = "game_player",
+  GamePause = "game_pause",
+  GameStep = "game_step",
+  GameInspectorFilter = "game_inspector_filter",
   /**
    * 用户点击store广告链接
    */
@@ -94,7 +98,7 @@ export enum GA_EventName {
   /**
    * 用户主动使用inspector检查游戏节点
    */
-  DoInspector = "do_inspector",
+  GameInspector = "game_inspector",
 }
 export enum GA_Button {
   Github = "github",
diff --git a/cc-inspector/src/scripts/content/index.ts b/cc-inspector/src/scripts/content/index.ts
index f768f43..97860f5 100644
--- a/cc-inspector/src/scripts/content/index.ts
+++ b/cc-inspector/src/scripts/content/index.ts
@@ -58,7 +58,7 @@ document.addEventListener(DocumentEvent.Inject2Content, (event: CustomEvent) =>
       connect.postMessage(data);
     } else {
       debugLog && console.log(...terminal.log(`connect is null`));
-      throw new Error("connect is null");
+      console.log("connect is null");
     }
   } else {
     throw new Error(`invalid data: ${event.detail}`);
diff --git a/cc-inspector/src/scripts/inject-view/app.vue b/cc-inspector/src/scripts/inject-view/app.vue
index 276b225..f3fb1f4 100644
--- a/cc-inspector/src/scripts/inject-view/app.vue
+++ b/cc-inspector/src/scripts/inject-view/app.vue
@@ -6,7 +6,7 @@
           <i class="iconfont icon" :class="item.icon" @contextmenu.prevent.stop="item.contextmenu"></i>
         </div>
       </div>
-      <i class="iconfont icon_cocos cocos" @mousedown="onMouseDown"></i>
+      <i class="iconfont icon_cocos cocos" @mousedown="onMouseDown" @click="onCocosLogoClick"></i>
     </div>
     <!-- <Memory></Memory> -->
     <CCDialog></CCDialog>
@@ -65,20 +65,22 @@ export default defineComponent({
       },
       {
         icon: "icon_do_play",
-        click: (event: MouseEvent, item: ListItem) => {},
-        visible: true,
-        txt: "game play",
-        contextmenu: () => {
+        click: (event: MouseEvent, item: ListItem) => {
+          ga(GA_EventName.GamePlayer);
           if (typeof cc !== "undefined") {
             cc.game.resume();
           }
         },
+        visible: true,
+        txt: "game play",
+        contextmenu: () => {},
       },
       {
         icon: "icon_do_pause",
         visible: true,
         txt: "game pause",
         click: () => {
+          ga(GA_EventName.GamePause);
           if (typeof cc !== "undefined") {
             cc.game.pause();
           }
@@ -90,6 +92,7 @@ export default defineComponent({
         visible: true,
         txt: "game step",
         click: () => {
+          ga(GA_EventName.GameStep);
           if (typeof cc !== "undefined") {
             cc.game.step();
           }
@@ -101,10 +104,12 @@ export default defineComponent({
         txt: "Inspect Game",
         visible: true,
         click: () => {
-          ga(GA_EventName.DoInspector);
-          showBtns.value = false;
+          ga(GA_EventName.GameInspector);
+          if (config.value.autoHide) {
+            showBtns.value = false;
+          }
           picking.value = true;
-          if (false) {
+          if (typeof cc === "undefined") {
             testInspector();
           } else {
             const event = new CustomEvent(DocumentEvent.GameInspectorBegan);
@@ -133,10 +138,19 @@ export default defineComponent({
             };
           });
           ccui.menu.showMenuByMouseEvent(event, [
+            {
+              name: "Pick Top",
+              selected: config.value.pickTop,
+              callback: (menu: IUiMenuItem) => {
+                config.value.pickTop = !config.value.pickTop;
+                appStore().save();
+              },
+            },
             {
               name: "Filter Enabled",
               selected: inspectTarget.enabled,
               callback: (menu: IUiMenuItem) => {
+                ga(GA_EventName.GameInspectorFilter);
                 inspectTarget.enabled = !inspectTarget.enabled;
               },
             },
@@ -206,6 +220,9 @@ export default defineComponent({
         clearTimeout(autoHideTimer);
         showBtns.value = true;
       },
+      onCocosLogoClick() {
+        showBtns.value = !showBtns.value;
+      },
       onContextMenuRoot(event: MouseEvent) {
         const arr: IUiMenuItem[] = [
           {
@@ -264,19 +281,36 @@ export default defineComponent({
 </script>
 
 <style scoped lang="less">
+@x: 1px;
+@r: 8deg;
 @keyframes color-change {
   0% {
     color: #f00;
+    transform: rotate(0) translateX(0px);
+  }
+  20% {
+    transform: rotate(-@r) translateX(-@x);
+  }
+  40% {
+    transform: rotate(@r) translateX(@x);
   }
   50% {
     color: #0f0;
   }
+  60% {
+    transform: rotate(-@r) translateX(-@x);
+  }
+  80% {
+    transform: rotate(@r) translateX(@x);
+  }
   100% {
     color: #f00;
+    transform: rotate(0) translateX(0px);
   }
 }
 .ad {
   position: fixed;
+  box-shadow: 0px 0px 6px 1px rgb(255, 255, 255);
   //z-index: 99999;
   top: 0px;
   right: 0px;
diff --git a/cc-inspector/src/scripts/inject-view/store.ts b/cc-inspector/src/scripts/inject-view/store.ts
index bf930a6..c6bb894 100644
--- a/cc-inspector/src/scripts/inject-view/store.ts
+++ b/cc-inspector/src/scripts/inject-view/store.ts
@@ -11,6 +11,10 @@ export class ConfigData {
    * 是否自动隐藏
    */
   autoHide: boolean = true;
+  /**
+   * 是否只拾取顶部元素
+   */
+  pickTop: boolean = true;
 }
 
 export const appStore = defineStore("app", () => {
@@ -22,6 +26,7 @@ export const appStore = defineStore("app", () => {
       const data = profile.load(`${pluginConfig.manifest.name}-assistant.json`) as ConfigData;
       config.value.autoHide = data.autoHide;
       config.value.pos = data.pos;
+      config.value.pickTop = data.pickTop;
     },
     save() {
       const cfg = toRaw(config.value);
diff --git a/cc-inspector/src/scripts/inject/hint/index.ts b/cc-inspector/src/scripts/inject/hint/index.ts
index 8d73e73..2d487b1 100644
--- a/cc-inspector/src/scripts/inject/hint/index.ts
+++ b/cc-inspector/src/scripts/inject/hint/index.ts
@@ -1,7 +1,10 @@
 import ccui from "@xuyanfeng/cc-ui";
 import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
+import { throttle } from "lodash";
+import { toRaw } from "vue";
 import { Msg } from "../../../core/types";
 import { DocumentEvent } from "../../const";
+import { appStore } from "../../inject-view/store";
 import { Inspector } from "../inspector";
 import { DrawOptions, HintAdapter, RectPoints } from "./adapter";
 import { HintV2 } from "./hint-v2";
@@ -33,22 +36,42 @@ export class Hint {
 
       const cursor = el.style.cursor;
       el.style.cursor = "zoom-in";
-      const test = (event: MouseEvent) => {
+
+      const mousedown = (event: MouseEvent) => {
         event.stopPropagation();
         event.preventDefault();
-        el.removeEventListener("mousedown", test, true);
+        el.removeEventListener("mousedown", mousedown, true);
+        el.removeEventListener("mousemove", mousemove, true);
         el.style.cursor = cursor;
         const e = new CustomEvent(DocumentEvent.GameInspectorEnd);
         document.dispatchEvent(e);
-        this.updateHint(event, el);
+
+        if (event.button === 0) {
+          // 左键拾取
+          this.updateHintDown(event, el);
+        } else {
+          this.updateHitMoveThrottle.cancel();
+          // 其他按键取消
+          this.cleanHover();
+        }
       };
-      el.addEventListener("mousedown", test, true);
+      const mousemove = (event: MouseEvent) => {
+        this.updateHitMoveThrottle(event, el);
+      };
+
+      el.addEventListener("mousemove", mousemove, true);
+      el.addEventListener("mousedown", mousedown, true);
     });
   }
-
-  private updateHint(event: MouseEvent, canvas: HTMLCanvasElement) {
-    this.cleanHover();
-    this.cleanSelected();
+  private updateHitMoveThrottle = throttle(this.updateHintMove, 300);
+  private updateHintMove(event: MouseEvent, canvas: HTMLCanvasElement) {
+    const nodes = this.getMouseNodes(event, canvas);
+    if (nodes.length) {
+      const node = nodes[0];
+      this.setHover(node);
+    }
+  }
+  private getMouseNodes(event: MouseEvent, canvas: HTMLCanvasElement): Array<any> {
     this.inspector.updateTreeInfo(false);
     const { x, y } = this.hintAdapter.convertMousePos(event, canvas);
     const nodes = [];
@@ -58,13 +81,20 @@ export class Hint {
         nodes.push(node);
       }
     });
-
-    if (nodes.length === 1) {
+    nodes.reverse();
+    return nodes;
+  }
+  private updateHintDown(event: MouseEvent, canvas: HTMLCanvasElement) {
+    this.cleanHover();
+    this.cleanSelected();
+    const nodes = this.getMouseNodes(event, canvas);
+    const pickTop = toRaw(appStore().config.pickTop);
+    if (nodes.length === 1 || pickTop) {
       const item = nodes[0];
+      this.cleanHover();
       this.setSelected(item);
       this.sendInspectNodeMsg(item);
     } else {
-      nodes.reverse();
       const menu = nodes.map((item) => {
         const path = this.getPath(item);
         return {