逻辑优化

cc-inspector/src/core/types.ts

@@ -87,6 +87,8 @@ export enum Msg {
 
   RequestSetProperty = "request-set-property",
   ResponseSetProperty = "response-set-property",
+  RequestVisible = "request-visible",
+  RequestDestroy = "request-destroy",
 
   ResponseError = "response-error",
 }
@@ -205,3 +207,4 @@ export function PageInclude(page: Page) {
 export function MsgInclude(msg: Msg) {
   return inEnum(Msg, msg);
 }
+export const debugLog: boolean = false;

cc-inspector/src/scripts/background/index.ts

@@ -1,10 +1,10 @@
 import { ChromeConst } from "cc-plugin/src/chrome/const";
-import { Msg, Page, PluginEvent, RequestSupportData } from "../../core/types";
+import { debugLog, Msg, Page, PluginEvent, RequestSupportData } from "../../core/types";
 import { Terminal } from "../terminal";
 import { PortMan } from "./portMan";
 import { portMgr } from "./portMgr";
 const terminal = new Terminal(Page.Background);
-console.log(...terminal.init());
+debugLog && console.log(...terminal.init());
 function isDevtools(port: chrome.runtime.Port) {
   const devtoolsUrl = `chrome-extension://${port.sender?.id}/${ChromeConst.html.devtools}`;
   if (port.sender?.url === devtoolsUrl) {

cc-inspector/src/scripts/background/portMan.ts

@@ -1,4 +1,4 @@
-import { Page, PluginEvent } from "../../core/types";
+import { debugLog, Page, PluginEvent } from "../../core/types";
 import { Terminal } from "../terminal";
 
 export abstract class PortMan {
@@ -29,15 +29,15 @@ export abstract class PortMan {
     this.terminal = new Terminal(`Port-${this.name}`);
     port.onMessage.addListener((data: any, port: chrome.runtime.Port) => {
       const event = PluginEvent.create(data);
-      console.log(...this.terminal.chunkMessage(event.toChunk()));
+      debugLog && console.log(...this.terminal.chunkMessage(event.toChunk()));
       if (event.valid && this.onMessage) {
         this.onMessage(event);
       } else {
-        console.log(...this.terminal.log(JSON.stringify(data)));
+        debugLog && console.log(...this.terminal.log(JSON.stringify(data)));
       }
     });
     port.onDisconnect.addListener((port: chrome.runtime.Port) => {
-      console.log(...this.terminal.disconnect(""));
+      debugLog && console.log(...this.terminal.disconnect(""));
       if (this.onDisconnect) {
         this.onDisconnect(port);
       }

cc-inspector/src/scripts/background/portMgr.ts

@@ -1,4 +1,4 @@
-import { Msg, Page, PluginEvent, RequestSupportData, ResponseUpdateFramesData } from "../../core/types";
+import { debugLog, Msg, Page, PluginEvent, RequestSupportData, ResponseUpdateFramesData } from "../../core/types";
 import { FrameDetails } from "../../views/devtools/data";
 import { Terminal } from "../terminal";
 import { PortContent } from "./portContent";
@@ -76,9 +76,9 @@ export class PortMgr {
 
     if (arr.length) {
       // console.table(arr)
-      console.log(...this.terminal.log(str.join("\n"), true));
+      debugLog && console.log(...this.terminal.log(str.join("\n"), true));
     } else {
-      console.log(...this.terminal.log("no port connected"));
+      debugLog && console.log(...this.terminal.log("no port connected"));
     }
   }
   public removePort(item: PortMan) {

cc-inspector/src/scripts/content/index.ts

@@ -1,12 +1,12 @@
 // content.js 和原始界面共享DOM，具有操作dom的能力
 // 但是不共享js,要想访问页面js,只能通过注入的方式
 import { ChromeConst } from "cc-plugin/src/chrome/const";
-import { Msg, Page, PluginEvent, ResponseSupportData } from "../../core/types";
+import { debugLog, Msg, Page, PluginEvent, ResponseSupportData } from "../../core/types";
 import { DocumentEvent } from "../const";
 import { Terminal } from "../terminal";
 
 const terminal = new Terminal(Page.Content);
-console.log(...terminal.init());
+debugLog && console.log(...terminal.init());
 
 // #region 注入脚本
 export function injectScript(url: string) {
@@ -19,9 +19,9 @@ export function injectScript(url: string) {
       document.head.removeChild(script);
     };
     document.head.appendChild(script);
-    console.log(...terminal.green(`inject script success: ${content}`));
+    debugLog && console.log(...terminal.green(`inject script success: ${content}`));
   } else {
-    console.log(...terminal.red("inject script failed"));
+    debugLog && console.log(...terminal.red("inject script failed"));
   }
 }
 
@@ -29,13 +29,13 @@ export function injectScript(url: string) {
 document.addEventListener(DocumentEvent.Inject2Content, (event: CustomEvent) => {
   let data: PluginEvent = PluginEvent.create(event.detail);
   if (data.valid && data.check(Page.Inject, Page.Content)) {
-    console.log(...terminal.chunkMessage(data.toChunk()));
+    debugLog && console.log(...terminal.chunkMessage(data.toChunk()));
     data.reset(Page.Content, Page.Devtools);
     if (connect) {
       // 接受来自inject.js的消息数据,然后中转到background.js
       connect.postMessage(data);
     } else {
-      console.log(...terminal.log(`connect is null`));
+      debugLog && console.log(...terminal.log(`connect is null`));
       throw new Error("connect is null");
     }
   } else {
@@ -45,16 +45,16 @@ document.addEventListener(DocumentEvent.Inject2Content, (event: CustomEvent) =>
 // #region 和background通讯
 let connect: chrome.runtime.Port = chrome.runtime.connect({ name: Page.Content });
 connect.onDisconnect.addListener(() => {
-  console.log(...terminal.disconnect(""));
+  debugLog && console.log(...terminal.disconnect(""));
   connect = null;
 });
 connect.onMessage.addListener((data: PluginEvent, sender: chrome.runtime.Port) => {
   const event = PluginEvent.create(data);
   if (event.valid && event.check(Page.Background, Page.Content)) {
-    console.log(...terminal.chunkMessage(event.toChunk()));
+    debugLog && console.log(...terminal.chunkMessage(event.toChunk()));
     event.reset(Page.Content, Page.Inject);
     const e = new CustomEvent(DocumentEvent.Content2Inject, { detail: event });
-    console.log(...terminal.chunkSend(event.toChunk()));
+    debugLog && console.log(...terminal.chunkSend(event.toChunk()));
     document.dispatchEvent(e);
   } else {
     throw new Error(`invalid data: ${data}`);
@@ -70,7 +70,7 @@ function checkGame() {
   if (connect) {
     connect.postMessage(sendData);
   } else {
-    console.log(...terminal.log(`connect is null`));
+    debugLog && console.log(...terminal.log(`connect is null`));
     throw new Error("connect is null");
   }
 }

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

@@ -1,4 +1,4 @@
-import { Msg, Page, PluginEvent } from "../../core/types";
+import { debugLog, Msg, Page, PluginEvent } from "../../core/types";
 import { DocumentEvent } from "../const";
 import { Terminal } from "../terminal";
 
@@ -7,14 +7,14 @@ export class InjectEvent {
   constructor() {
     document.addEventListener(DocumentEvent.Content2Inject, (event: CustomEvent) => {
       const pluginEvent: PluginEvent = PluginEvent.create(event.detail);
-      console.log(...this.terminal.chunkMessage(pluginEvent.toChunk()));
+      debugLog && console.log(...this.terminal.chunkMessage(pluginEvent.toChunk()));
       this.onMessage(pluginEvent);
     });
   }
   onMessage(data: PluginEvent) {}
   sendMsgToContent(msg: Msg, data: any) {
     const detail = new PluginEvent(Page.Inject, Page.Content, msg, data);
-    console.log(...this.terminal.chunkSend(detail.toChunk()));
+    debugLog && console.log(...this.terminal.chunkSend(detail.toChunk()));
     const event = new CustomEvent(DocumentEvent.Inject2Content, { detail });
     document.dispatchEvent(event);
   }

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

@@ -1,6 +1,6 @@
 // eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
 import { uniq } from "lodash";
-import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestSetPropertyData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
+import { debugLog, Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestSetPropertyData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
 import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, Property, StringData, TreeData, Vec2Data, Vec3Data } from "../../views/devtools/data";
 import { InjectEvent } from "./event";
 import { getValue, trySetValueWithConfig } from "./setValue";
@@ -62,10 +62,26 @@ export class Inspector extends InjectEvent {
         logFunction(value);
         break;
       }
+      case Msg.RequestVisible: {
+        const uuid: string = pluginEvent.data;
+        const node = this.inspectorGameMemoryStorage[uuid];
+        if (node) {
+          node.active = !node.active;
+        }
+        break;
+      }
+      case Msg.RequestDestroy: {
+        const uuid: string = pluginEvent.data;
+        const node = this.inspectorGameMemoryStorage[uuid];
+        if (node && node.isValid && node.destroy) {
+          node.destroy();
+        }
+        break;
+      }
     }
   }
   init() {
-    console.log(...this.terminal.init());
+    debugLog && console.log(...this.terminal.init());
     this.watchIsCocosGame();
   }
 

cc-inspector/src/views/devtools/bridge.ts

@@ -1,6 +1,6 @@
 import CCP from "cc-plugin/src/ccp/entry-render";
 import { TinyEmitter } from "tiny-emitter";
-import { Msg, Page, PluginEvent } from "../../core/types";
+import { debugLog, Msg, Page, PluginEvent } from "../../core/types";
 import { Terminal } from "../../scripts/terminal";
 import { TestClient, testServer } from "./test/server";
 export type BridgeCallback = (data: PluginEvent, sender: chrome.runtime.Port) => void;
@@ -22,13 +22,13 @@ class Bridge implements TestClient {
     if (CCP.Adaptation.Env.isChromeRuntime) {
       this.connect = chrome.runtime.connect({ name: Page.Devtools });
       this.connect.onDisconnect.addListener(() => {
-        console.log(...this.terminal.disconnect(""));
+        debugLog && console.log(...this.terminal.disconnect(""));
         this.connect = null;
       });
 
       this.connect.onMessage.addListener((event, sender: chrome.runtime.Port) => {
         const data = PluginEvent.create(event);
-        console.log(...this.terminal.chunkMessage(data.toChunk()));
+        debugLog && console.log(...this.terminal.chunkMessage(data.toChunk()));
         if (data.valid && data.isTargetDevtools()) {
           this.emitter.emit(data.msg, data);
         } else {

cc-inspector/src/views/devtools/comp/index.ts

@@ -1,18 +1,74 @@
 export enum CompType {
-  Node2 = "node-2",
+  Node = "cc.Node",
-  Spirte2 = "sprite-2",
+  Spirte = "cc.Sprite",
-  Label2 = "label-2",
+  Label = "cc.Label",
-
+  Widget = "cc.Widget",
-  Node3 = "node-3",
+  Camera = "cc.Camera",
-  Spirte3 = "sprite-3",
+  UITransform = "cc.UITransform",
-  Label3 = "label-3",
 }
 
 export function getSimpleProperties(typeName: string): string[] {
   const config = {};
-  config[CompType.Node2] = ["position", "rotation", "scale", "anchor", "size", "color", "opacity", "skew", "group"];
+  config[CompType.Node] = [
-  config[CompType.Label2] = ["string", "horizontalAlign", "verticalAlign", "fontSize", "lineHeight", "overflow", "font", "fontFamily", "ebableBold", "enableItalic", "enableUnderline", "underlineHeight", "cacheMode", "useSystemFont"];
+    "position", //
-  config[CompType.Spirte2] = ["atlas", "spriteFrame", "type", "sizeMode"];
+    "rotation",
+    "scale",
+    "anchor",
+    "size",
+    "color",
+    "opacity",
+    "skew",
+    "group",
+    //----------
+    "worldPosition",
+    "worldScale",
+    // "worldRotation",// 渲染有问题，暂时先不支持这个属性
+  ];
+  config[CompType.UITransform] = ["anchor", "size"];
+  config[CompType.Widget] = [
+    "left",
+    "right",
+    "top",
+    "bottom",
+    "alignMode", //
+    "isAlignLeft",
+    "isAlignRight",
+    "isAlignTop",
+    "isAlignBottom",
+  ];
+  config[CompType.Label] = [
+    "string", //
+    "horizontalAlign",
+    "verticalAlign",
+    "fontSize",
+    "lineHeight",
+    "overflow",
+    "font",
+    "fontFamily",
+    "ebableBold",
+    "enableItalic",
+    "enableUnderline",
+    "underlineHeight",
+    "cacheMode",
+    "useSystemFont",
+  ];
+  config[CompType.Camera] = ["clearColor", "clearFlags", "cullingMask", "depth", "zoomRatio", "alignWithScreen"];
+  config[CompType.Spirte] = [
+    "atlas",
+    "spriteFrame",
+    "type",
+    "sizeMode", //
+    "fillCenter",
+    "fillRange",
+    "fillRange",
+    "fillStart",
+    "fillType",
+    "grayscale",
+    "color",
+    "spriteAtlas",
+    "trim",
+    "type",
+  ];
   return config[typeName] || [];
 }
 export const VisibleProp = {

cc-inspector/src/views/devtools/hierarchy.vue

@@ -13,6 +13,7 @@
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
 import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
+import Mousetrap, { MousetrapInstance } from "mousetrap";
 import { storeToRefs } from "pinia";
 import { defineComponent, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
 import { Msg, PluginEvent, RequestTreeInfoData, ResponseSetPropertyData } from "../../core/types";
@@ -26,7 +27,6 @@ export default defineComponent({
   name: "hierarchy",
   components: { CCButtonGroup, CCInput, CCTree, CCDock },
   setup() {
-    onMounted(() => {});
     const funcShowPlace = (data: EngineData) => {
       console.log(toRaw(data));
       _expand(data.engineUUID);
@@ -41,12 +41,27 @@ export default defineComponent({
     const timer: Timer = new Timer(() => {
       updateTree();
     });
+    let ins: MousetrapInstance | null = null;
+    function onQuickVisible() {
+      console.log("onQuickVisible");
+      if (selectedUUID) {
+        bridge.send(Msg.RequestVisible, selectedUUID);
+      }
+    }
     onMounted(() => {
+      if (elTree.value) {
+        const el = toRaw(elTree.value);
+        ins = new Mousetrap(el.treeElement);
+        ins.bind(["space"], onQuickVisible, "keydown");
+      }
       Bus.on(BusMsg.ShowPlace, funcShowPlace);
       Bus.on(BusMsg.EnableSchedule, funcEnableSchedule);
       timer.create();
     });
     onUnmounted(() => {
+      if (ins) {
+        ins.unbind(["space"], "keydown");
+      }
       Bus.off(BusMsg.ShowPlace, funcShowPlace);
       Bus.off(BusMsg.EnableSchedule, funcEnableSchedule);
       timer.clean();
@@ -96,7 +111,7 @@ export default defineComponent({
     });
     const { config, frameID } = storeToRefs(appStore());
     const matchCase = ref<boolean>(false);
-    const elTree = ref<typeof CCTree>();
+    const elTree = ref<typeof CCTree>(null);
     const treeData = ref<TreeData[]>([]);
     let selectedUUID: string | null = null;
     bridge.on(Msg.ResponseTreeInfo, (event: PluginEvent) => {
@@ -199,17 +214,17 @@ export default defineComponent({
         });
         if (selectedUUID) {
           menus.push({
-            name: "visible",
+            name: "visible (sapce)",
             enabled: true,
             callback: () => {
-              console.log("visible");
+              onQuickVisible();
             },
           });
           menus.push({
             name: "destroy",
-            enabled: false,
+            enabled: true,
             callback: () => {
-              console.log("destroy");
+              bridge.send(Msg.RequestDestroy, selectedUUID);
             },
           });
         }

cc-inspector/src/views/devtools/test/server.ts

@@ -186,6 +186,13 @@ export class TestServer {
         console.log(data);
         break;
       }
+      case Msg.RequestVisible: {
+        const node: Node = this.testData.findNode(data);
+        if (node) {
+          node.active = !node.active;
+        }
+        break;
+      }
       default:
         break;
     }

cc-inspector/src/views/devtools/test/test.vue

@@ -26,7 +26,7 @@
 import ccui from "@xuyanfeng/cc-ui";
 import { storeToRefs } from "pinia";
 import { defineComponent, ref } from "vue";
-import { Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
+import { debugLog, Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
 import { Terminal } from "../../../scripts/terminal";
 import { bridge } from "../bridge";
 import { Bus, BusMsg } from "../bus";
@@ -89,15 +89,15 @@ export default defineComponent({
       onTerminal() {
         const t = new Terminal("flag");
         const event = new PluginEvent(Page.Background, Page.Background, Msg.ResponseTreeInfo, "");
-        console.log(...t.message("1"));
+        debugLog && console.log(...t.message("1"));
-        console.log(...t.log("newline", true));
+        debugLog && console.log(...t.log("newline", true));
-        console.log(...t.log("oneline", false));
+        debugLog && console.log(...t.log("oneline", false));
-        console.log(...t.disconnect("disconnect"));
+        debugLog && console.log(...t.disconnect("disconnect"));
-        console.log(...t.connect("connect"));
+        debugLog && console.log(...t.connect("connect"));
-        console.log(...t.red("red"));
+        debugLog && console.log(...t.red("red"));
-        console.log(...t.green("green"));
+        debugLog && console.log(...t.green("green"));
-        console.log(...t.blue("blue"));
+        debugLog && console.log(...t.blue("blue"));
-        console.log(...t.chunkMessage(event.toChunk()));
+        debugLog && console.log(...t.chunkMessage(event.toChunk()));
       },
       onTestTree1() {
         const data: TreeData = {