diff --git a/cc-inspector/src/core/types.ts b/cc-inspector/src/core/types.ts index ddfccb8..4c03352 100644 --- a/cc-inspector/src/core/types.ts +++ b/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; diff --git a/cc-inspector/src/scripts/background/index.ts b/cc-inspector/src/scripts/background/index.ts index 9f7b16d..e9f48d4 100644 --- a/cc-inspector/src/scripts/background/index.ts +++ b/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) { diff --git a/cc-inspector/src/scripts/background/portMan.ts b/cc-inspector/src/scripts/background/portMan.ts index 187a192..2a65f72 100644 --- a/cc-inspector/src/scripts/background/portMan.ts +++ b/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); } diff --git a/cc-inspector/src/scripts/background/portMgr.ts b/cc-inspector/src/scripts/background/portMgr.ts index eac8642..a52ee79 100644 --- a/cc-inspector/src/scripts/background/portMgr.ts +++ b/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) { diff --git a/cc-inspector/src/scripts/content/index.ts b/cc-inspector/src/scripts/content/index.ts index beb889f..11ed9f7 100644 --- a/cc-inspector/src/scripts/content/index.ts +++ b/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"); } } diff --git a/cc-inspector/src/scripts/inject/event.ts b/cc-inspector/src/scripts/inject/event.ts index 2a7465b..ca8a3e0 100644 --- a/cc-inspector/src/scripts/inject/event.ts +++ b/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); } diff --git a/cc-inspector/src/scripts/inject/inspector.ts b/cc-inspector/src/scripts/inject/inspector.ts index 61ed86f..3257093 100644 --- a/cc-inspector/src/scripts/inject/inspector.ts +++ b/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(); } diff --git a/cc-inspector/src/views/devtools/bridge.ts b/cc-inspector/src/views/devtools/bridge.ts index b3ba879..ffcd33b 100644 --- a/cc-inspector/src/views/devtools/bridge.ts +++ b/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 { diff --git a/cc-inspector/src/views/devtools/comp/index.ts b/cc-inspector/src/views/devtools/comp/index.ts index 57e7f48..85e1b06 100644 --- a/cc-inspector/src/views/devtools/comp/index.ts +++ b/cc-inspector/src/views/devtools/comp/index.ts @@ -1,18 +1,74 @@ export enum CompType { - Node2 = "node-2", - Spirte2 = "sprite-2", - Label2 = "label-2", - - Node3 = "node-3", - Spirte3 = "sprite-3", - Label3 = "label-3", + Node = "cc.Node", + Spirte = "cc.Sprite", + Label = "cc.Label", + Widget = "cc.Widget", + Camera = "cc.Camera", + UITransform = "cc.UITransform", } export function getSimpleProperties(typeName: string): string[] { const config = {}; - config[CompType.Node2] = ["position", "rotation", "scale", "anchor", "size", "color", "opacity", "skew", "group"]; - config[CompType.Label2] = ["string", "horizontalAlign", "verticalAlign", "fontSize", "lineHeight", "overflow", "font", "fontFamily", "ebableBold", "enableItalic", "enableUnderline", "underlineHeight", "cacheMode", "useSystemFont"]; - config[CompType.Spirte2] = ["atlas", "spriteFrame", "type", "sizeMode"]; + config[CompType.Node] = [ + "position", // + "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 = { diff --git a/cc-inspector/src/views/devtools/hierarchy.vue b/cc-inspector/src/views/devtools/hierarchy.vue index 689a29d..7d47461 100644 --- a/cc-inspector/src/views/devtools/hierarchy.vue +++ b/cc-inspector/src/views/devtools/hierarchy.vue @@ -13,6 +13,7 @@