鼠标右键取消Inspect，鼠标移动过程实时hover游戏节点，增加pick top的功能，优化小助手的点击折叠

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",

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}`);

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;

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);

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 {