追加在场景中选中节点的工具，增强易用性

cc-inspector/src/scripts/inject/hint.ts

@@ -1,3 +1,8 @@
+import ccui from "@xuyanfeng/cc-ui";
+import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
+import { DocumentEvent } from "../const";
+import { Inspector } from "./inspector";
+import { Msg } from "../../core/types";
 declare const cc: any;
 class Point {
   x: number;
@@ -31,6 +36,104 @@ interface DrawOptions {
 export class Hint {
   private draw = null;
   public engineVersion: string = "";
+  private inspector: Inspector = null;
+  constructor(inspector: Inspector) {
+    this.inspector = inspector;
+    document.addEventListener(DocumentEvent.GameInspectorBegan, (event: CustomEvent) => {
+      const el = this.getTargetElement();
+      if (!el) {
+        return;
+      }
+
+      const cursor = el.style.cursor;
+      el.style.cursor = "zoom-in";
+      const test = (event: MouseEvent) => {
+        event.stopPropagation();
+        event.preventDefault();
+        el.removeEventListener("mousedown", test, true);
+        el.style.cursor = cursor;
+        const e = new CustomEvent(DocumentEvent.GameInspectorEnd);
+        document.dispatchEvent(e);
+        this.updateHint(event, el);
+      };
+      el.addEventListener("mousedown", test, true);
+    });
+  }
+  private nodeVisible(node) {
+    let parent = node;
+    while (parent) {
+      if (parent) {
+      }
+    }
+  }
+  private updateHint(event: MouseEvent, canvas: HTMLCanvasElement) {
+    this.cleanHover();
+    this.cleanSelected();
+    const rect = canvas.getBoundingClientRect();
+    let x = event.clientX - rect.x;
+    let y = rect.y + rect.height - event.clientY;
+    x *= window.devicePixelRatio;
+    y *= window.devicePixelRatio;
+
+    this.inspector.updateTreeInfo(false);
+    const nodes = [];
+    this.inspector.forEachNode((item) => {
+      const b = item._uiProps?.uiTransformComp?.hitTest({ x, y }, 0);
+      if (b && item.active && item.activeInHierarchy) {
+        nodes.push(item);
+      }
+    });
+
+    if (nodes.length === 1) {
+      const item = nodes[0];
+      this.setSelected(item);
+      this.sendInspectNodeMsg(item);
+    } else {
+      nodes.reverse();
+      const menu = nodes.map((item) => {
+        const path = this.getPath(item);
+        return {
+          name: path,
+          callback: () => {
+            this.cleanHover();
+            this.setSelected(item);
+            this.sendInspectNodeMsg(item);
+          },
+          enter: () => {
+            this.setHover(item);
+          },
+          leave: () => {
+            this.cleanHover();
+          },
+        } as IUiMenuItem;
+      });
+      ccui.menu.showMenuByMouseEvent(event, menu, 0.8);
+    }
+  }
+  private sendInspectNodeMsg(node: any) {
+    if (node.uuid) {
+      this.inspector.sendMsgToContent(Msg.InspectNode, node.uuid);
+    }
+  }
+  private getPath(node: any) {
+    let path = [];
+    let parent = node;
+    while (parent) {
+      path.push(parent.name);
+      parent = parent.parent;
+    }
+    path = path.reverse();
+    return path.join("/");
+  }
+  private getTargetElement(): HTMLCanvasElement | null {
+    // @ts-ignore
+    if (typeof cc !== "undefined" && cc.game && cc.game.canvas) {
+      // @ts-ignore
+      return cc.game.canvas;
+    } else {
+      null;
+    }
+  }
   private get isEngineV2() {
     return this.engineVersion.startsWith("2.");
   }
@@ -122,10 +225,14 @@ export class Hint {
     });
   }
   public setHover(node: any) {
-    this.hoverNodes = [node];
+    if (node.isValid) {
+      this.hoverNodes = [node];
+    }
   }
   public setSelected(node: any) {
-    this.selectedNodes = [node];
+    if (node.isValid) {
+      this.selectedNodes = [node];
+    }
   }
   private getRectPoints(node: any): RectPoints | null {
     if (this.isEngineV2) {

cc-inspector/src/scripts/inject/inspector.ts

@@ -12,7 +12,7 @@ declare const cc: any;
 
 export class Inspector extends InjectEvent {
   inspectorGameMemoryStorage: Record<string, any> = {};
-  private hint: Hint = new Hint();
+  private hint: Hint = new Hint(this);
 
   private getAtlasViewFunction() {
     // 之前只有v2版本支持
@@ -148,6 +148,7 @@ export class Inspector extends InjectEvent {
     console.log(...this.terminal.init());
     this.watchIsCocosGame();
   }
+
   private watchIsCocosGame() {
     const timer = setInterval(() => {
       const b = this._isCocosGame();
@@ -195,22 +196,30 @@ export class Inspector extends InjectEvent {
       this.sendEngineVersion(version);
     }
   }
-  updateTreeInfo() {
+  forEachNode(cb: (node: any) => void) {
+    for (let key in this.inspectorGameMemoryStorage) {
+      const item = this.inspectorGameMemoryStorage[key];
+      if (item && item.isValid && item instanceof cc.Node) {
+        cb(item);
+      }
+    }
+  }
+  updateTreeInfo(notify: boolean = true) {
     let isCocosCreatorGame = this._isCocosGame();
     if (isCocosCreatorGame) {
       let scene = cc.director.getScene();
       if (scene) {
         let treeData = new TreeData();
         this.getNodeChildren(scene, treeData);
-        this.sendMsgToContent(Msg.ResponseTreeInfo, treeData as ResponseTreeInfoData);
+        notify && this.sendMsgToContent(Msg.ResponseTreeInfo, treeData as ResponseTreeInfoData);
       } else {
         let treeData = new TreeData();
         treeData.id = "";
         treeData.text = "empty scene";
-        this.sendMsgToContent(Msg.ResponseTreeInfo, treeData as ResponseTreeInfoData);
+        notify && this.sendMsgToContent(Msg.ResponseTreeInfo, treeData as ResponseTreeInfoData);
       }
     } else {
-      this.notifySupportGame(false);
+      notify && this.notifySupportGame(false);
     }
   }