mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-04-19 16:38:41 +00:00
拆分出hierarchy和inspector，便于逻辑维护
This commit is contained in:
xu_yanfeng
parent
ed7de8cdae
commit
438d086dd5
@ -1,4 +1,5 @@
|
||||
import CCP from "cc-plugin/src/ccp/entry-render";
|
||||
import { TinyEmitter } from "tiny-emitter";
|
||||
import { Msg, Page, PluginEvent } from "../../core/types";
|
||||
import { Terminal } from "../../scripts/terminal";
|
||||
import { TestClient, testServer } from "./test/server";
|
||||
@ -7,11 +8,7 @@ if (chrome.devtools) {
|
||||
console.log("chrome devtools");
|
||||
}
|
||||
class Bridge implements TestClient {
|
||||
/**
|
||||
* 把callback保存为变量，方便测试
|
||||
*/
|
||||
public onMessage: BridgeCallback | null = null;
|
||||
|
||||
private emitter = new TinyEmitter();
|
||||
/**
|
||||
* 和background建立的链接
|
||||
*/
|
||||
@ -32,24 +29,25 @@ class Bridge implements TestClient {
|
||||
this.connect.onMessage.addListener((event, sender: chrome.runtime.Port) => {
|
||||
const data = PluginEvent.create(event);
|
||||
console.log(...this.terminal.chunkMessage(data.toChunk()));
|
||||
if (data.valid && this.onMessage) {
|
||||
this.onMessage(data, sender);
|
||||
if (data.valid && data.isTargetDevtools()) {
|
||||
this.emitter.emit(data.msg, data.data);
|
||||
} else {
|
||||
console.log(JSON.stringify(event));
|
||||
debugger;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
testServer.add(this);
|
||||
}
|
||||
}
|
||||
|
||||
on(msg: Msg, callback: Function) {
|
||||
this.emitter.on(msg, callback);
|
||||
}
|
||||
recv(event: PluginEvent): void {
|
||||
this.doMessage(event);
|
||||
}
|
||||
doMessage(data: PluginEvent) {
|
||||
if (this.onMessage) {
|
||||
this.onMessage(data, null);
|
||||
this.emit(event);
|
||||
}
|
||||
emit(data: PluginEvent) {
|
||||
this.emitter.emit(data.msg, data);
|
||||
}
|
||||
send(msg: Msg, data?: any) {
|
||||
if (CCP.Adaptation.Env.isChromeDevtools) {
|
||||
|
||||
@ -3,9 +3,8 @@ import { TinyEmitter } from "tiny-emitter";
|
||||
export enum BusMsg {
|
||||
ShowPlace = "ShowPlace",
|
||||
RequestObjectData = "RequestObjectData",
|
||||
LogData = "LogData",
|
||||
FoldAllGroup = "FoldAllGroup",
|
||||
UpdateSettings = "UpdateSettings",
|
||||
}
|
||||
|
||||
export default new TinyEmitter();
|
||||
export const Bus = new TinyEmitter();
|
||||
|
||||
302
cc-inspector/src/views/devtools/hierarchy.vue
Normal file
302
cc-inspector/src/views/devtools/hierarchy.vue
Normal file
@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div class="left">
|
||||
<div class="tool-btn">
|
||||
<div class="text">Node Tree</div>
|
||||
<CCButtonGroup :items="buttonGroup" :recover="true"></CCButtonGroup>
|
||||
</div>
|
||||
<CCInput style="flex: none" placeholder="enter keywords to filter" :data="filterText" v-if="false">
|
||||
<slot>
|
||||
<i class="matchCase iconfont icon_font_size" @click.stop="onChangeCase" title="match case" :style="{ color: matchCase ? 'red' : '' }"></i>
|
||||
</slot>
|
||||
</CCInput>
|
||||
<CCTree style="flex: 1" ref="elTree" :expand-keys="expandedKeys" :default-expand-all="false" :value="treeData" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick"></CCTree>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import ccui from "@xuyanfeng/cc-ui";
|
||||
import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { defineComponent, nextTick, onMounted, reactive, ref, toRaw, watch } from "vue";
|
||||
import { Msg, RequestNodeInfoData, RequestTreeInfoData, ResponseSetPropertyData, ResponseSupportData } from "../../core/types";
|
||||
import { bridge } from "./bridge";
|
||||
import { Bus, BusMsg } from "./bus";
|
||||
import { EngineData, TreeData } from "./data";
|
||||
import { appStore, RefreshType } from "./store";
|
||||
import SettingsVue from "./ui/settings.vue";
|
||||
const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
|
||||
export default defineComponent({
|
||||
name: "hierarchy",
|
||||
components: { CCButtonGroup, CCInput, CCTree },
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
syncSettings();
|
||||
});
|
||||
Bus.on(BusMsg.ShowPlace, (data: EngineData) => {
|
||||
console.log(toRaw(data));
|
||||
_expand(data.engineUUID);
|
||||
});
|
||||
Bus.on(BusMsg.UpdateSettings, () => {
|
||||
syncSettings();
|
||||
});
|
||||
const btnRefresh: ButtonGroupItem = reactive<ButtonGroupItem>({
|
||||
icon: "icon_refresh",
|
||||
click: () => {
|
||||
onBtnClickUpdateTree();
|
||||
},
|
||||
visible: true,
|
||||
});
|
||||
const buttonGroup = ref<ButtonGroupItem[]>([
|
||||
btnRefresh,
|
||||
{
|
||||
icon: "icon_settings",
|
||||
click: () => {
|
||||
ccui.dialog.showDialog({
|
||||
comp: SettingsVue,
|
||||
title: "Settings",
|
||||
});
|
||||
},
|
||||
},
|
||||
]);
|
||||
function _expand(uuid: string) {
|
||||
let expandKeys: Array<string> = [];
|
||||
|
||||
function circle(array: any) {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let item = array[i];
|
||||
expandKeys.push(item.uuid);
|
||||
if (item.uuid === uuid) {
|
||||
return true;
|
||||
} else {
|
||||
let find = circle(item.children);
|
||||
if (find) {
|
||||
return true;
|
||||
} else {
|
||||
expandKeys.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
circle(treeData);
|
||||
|
||||
expandKeys.forEach((key) => {
|
||||
if (!expandedKeys.value.find((el) => el === key)) {
|
||||
expandedKeys.value.push(key);
|
||||
}
|
||||
});
|
||||
// 高亮uuid
|
||||
}
|
||||
let timerID: NodeJS.Timer | null = null;
|
||||
|
||||
function _clearTimer() {
|
||||
if (timerID !== null) {
|
||||
clearInterval(timerID);
|
||||
timerID = null;
|
||||
}
|
||||
}
|
||||
function onBtnClickUpdateTree() {
|
||||
const id = toRaw(frameID.value);
|
||||
bridge.send(Msg.RequstTreeInfo, { frameID: id } as RequestTreeInfoData);
|
||||
}
|
||||
function onEnableTreeWatch(watch: boolean, time = 300) {
|
||||
if (watch) {
|
||||
_clearTimer();
|
||||
timerID = setInterval(() => {
|
||||
onBtnClickUpdateTree();
|
||||
}, time);
|
||||
} else {
|
||||
_clearTimer();
|
||||
}
|
||||
}
|
||||
function syncSettings() {
|
||||
const { refreshType, refreshTime } = config.value;
|
||||
switch (refreshType) {
|
||||
case RefreshType.Auto: {
|
||||
btnRefresh.visible = false;
|
||||
onEnableTreeWatch(true, refreshTime);
|
||||
break;
|
||||
}
|
||||
case RefreshType.Manual: {
|
||||
btnRefresh.visible = true;
|
||||
onEnableTreeWatch(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateFilterText(val: any) {
|
||||
(elTree.value as any)?.filter(val);
|
||||
}
|
||||
const filterText = ref<string>("");
|
||||
watch(filterText, (val) => {
|
||||
// TODO: 过滤树
|
||||
updateFilterText(val);
|
||||
});
|
||||
// TODO: 放到store里面
|
||||
const { config, frameID } = storeToRefs(appStore());
|
||||
const matchCase = ref<boolean>(false);
|
||||
const elTree = ref<typeof CCTree>();
|
||||
const treeData = ref<TreeData[]>([]);
|
||||
function updateNodeInfo() {
|
||||
if (selectedUUID) {
|
||||
bridge.send(Msg.RequestNodeInfo, { uuid: selectedUUID } as RequestNodeInfoData);
|
||||
}
|
||||
}
|
||||
let selectedUUID: string | null = null;
|
||||
function _findUuidInTree(data: TreeData[], targetUUID: string) {
|
||||
function circle(tree: TreeData[]) {
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
let item: TreeData = tree[i];
|
||||
if (item.id === targetUUID) {
|
||||
return true;
|
||||
}
|
||||
if (circle(item.children || [])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return circle(data);
|
||||
}
|
||||
|
||||
bridge.on(Msg.ResponseTreeInfo, (data: Array<TreeData>) => {
|
||||
if (!Array.isArray(data)) {
|
||||
data = [data];
|
||||
}
|
||||
treeData.value = data;
|
||||
if (!selectedUUID) {
|
||||
return;
|
||||
}
|
||||
const b = _findUuidInTree(toRaw(treeData.value), selectedUUID);
|
||||
if (b) {
|
||||
updateNodeInfo();
|
||||
nextTick(() => {
|
||||
if (elTree.value) {
|
||||
elTree.value.handChoose(selectedUUID);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
selectedUUID = null;
|
||||
}
|
||||
});
|
||||
|
||||
bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
|
||||
const isCocosGame: boolean = data.support;
|
||||
if (isCocosGame) {
|
||||
syncSettings();
|
||||
onBtnClickUpdateTree();
|
||||
} else {
|
||||
_clearTimer();
|
||||
treeData.value.length = 0;
|
||||
selectedUUID = null;
|
||||
}
|
||||
});
|
||||
bridge.on(Msg.ResponseSetProperty, (data: ResponseSetPropertyData) => {
|
||||
const uuid = data.path[0];
|
||||
const key = data.path[1];
|
||||
const value = data.data;
|
||||
let treeArray: Array<TreeData> = [];
|
||||
|
||||
function circle(array: Array<TreeData>) {
|
||||
array.forEach((item) => {
|
||||
treeArray.push(item);
|
||||
circle(item.children);
|
||||
});
|
||||
}
|
||||
|
||||
// 更新指定uuid节点的tree的name
|
||||
circle(treeData.value);
|
||||
let ret = treeArray.find((el) => el.id === uuid);
|
||||
if (ret) {
|
||||
if (key === "name") {
|
||||
ret.text = value;
|
||||
}
|
||||
if (key === "active") {
|
||||
ret.active = !!value;
|
||||
}
|
||||
}
|
||||
});
|
||||
const expandedKeys = ref<Array<string>>([]);
|
||||
return {
|
||||
expandedKeys,
|
||||
elTree,
|
||||
filterText,
|
||||
treeData,
|
||||
matchCase,
|
||||
frameID,
|
||||
buttonGroup,
|
||||
handleNodeClick(data: TreeData | null) {
|
||||
if (data) {
|
||||
selectedUUID = data.id;
|
||||
updateNodeInfo();
|
||||
} else {
|
||||
selectedUUID = null;
|
||||
}
|
||||
},
|
||||
onNodeExpand(data: TreeData) {
|
||||
if (data.id) {
|
||||
expandedKeys.value.push(data.id);
|
||||
}
|
||||
},
|
||||
onNodeCollapse(data: TreeData) {
|
||||
if (data.id) {
|
||||
const keys = toRaw(expandedKeys.value);
|
||||
const index = keys.findIndex((el) => el === data.id);
|
||||
if (index !== -1) {
|
||||
keys.splice(index, 1);
|
||||
}
|
||||
expandedKeys.value = keys;
|
||||
}
|
||||
},
|
||||
// TODO: 暂时这个版本先不实现
|
||||
filterNode(value: any, data: any) {
|
||||
if (!value) {
|
||||
return true;
|
||||
} else {
|
||||
if (matchCase) {
|
||||
// 严格匹配大写
|
||||
return data?.name?.indexOf(value) !== -1;
|
||||
} else {
|
||||
return data?.name?.toLowerCase().indexOf(value.toLowerCase()) !== -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
onChangeCase() {
|
||||
matchCase.value = !matchCase.value;
|
||||
updateFilterText(filterText);
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 200px;
|
||||
width: 300px;
|
||||
|
||||
.tool-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.text {
|
||||
padding-left: 5px;
|
||||
flex: 1;
|
||||
user-select: none;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.matchCase {
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -12,22 +12,9 @@
|
||||
<span>JS堆栈大小: {{ memory.performance.totalJSHeapSize }}</span>
|
||||
<span>JS堆栈使用: {{ memory.performance.usedJSHeapSize }}</span>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="tool-btn">
|
||||
<div class="text">Node Tree</div>
|
||||
<CCButtonGroup :items="buttonGroup" :recover="true"></CCButtonGroup>
|
||||
</div>
|
||||
<CCInput style="flex: none" placeholder="enter keywords to filter" :data="filterText" v-if="false">
|
||||
<slot>
|
||||
<i class="matchCase iconfont icon_font_size" @click.stop="onChangeCase" title="match case" :style="{ color: matchCase ? 'red' : '' }"></i>
|
||||
</slot>
|
||||
</CCInput>
|
||||
<CCTree style="flex: 1" ref="elTree" :expand-keys="expandedKeys" :default-expand-all="false" :value="treeData" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse" @node-click="handleNodeClick"></CCTree>
|
||||
</div>
|
||||
<Hierarchy></Hierarchy>
|
||||
<CCDivider></CCDivider>
|
||||
<div class="right">
|
||||
<Properties v-if="treeItemData" :data="treeItemData"></Properties>
|
||||
</div>
|
||||
<Inspector></Inspector>
|
||||
</div>
|
||||
<Find v-if="!isShowDebug"></Find>
|
||||
<CCDialog></CCDialog>
|
||||
@ -37,21 +24,21 @@
|
||||
|
||||
<script lang="ts">
|
||||
import ccui from "@xuyanfeng/cc-ui";
|
||||
import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
|
||||
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { defineComponent, nextTick, onMounted, reactive, ref, toRaw, watch } from "vue";
|
||||
import { defineComponent, ref, toRaw } from "vue";
|
||||
import PluginConfig from "../../../cc-plugin.config";
|
||||
import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestObjectData, RequestTreeInfoData, RequestUseFrameData, ResponseObjectData, ResponseSetPropertyData, ResponseSupportData } from "../../core/types";
|
||||
import { Msg, RequestLogData, RequestUseFrameData, ResponseSupportData } from "../../core/types";
|
||||
import { bridge } from "./bridge";
|
||||
import Bus, { BusMsg } from "./bus";
|
||||
import { EngineData, FrameDetails, NodeInfoData, ObjectData, TreeData } from "./data";
|
||||
import { Bus, BusMsg } from "./bus";
|
||||
import { FrameDetails, NodeInfoData, TreeData } from "./data";
|
||||
import Find from "./find.vue";
|
||||
import { appStore, RefreshType } from "./store";
|
||||
import Hierarchy from "./hierarchy.vue";
|
||||
import Inspector from "./inspector.vue";
|
||||
import { appStore } from "./store";
|
||||
import Test from "./test/test.vue";
|
||||
import Properties from "./ui/propertys.vue";
|
||||
import SettingsVue from "./ui/settings.vue";
|
||||
ccui.components.CCAd;
|
||||
const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
|
||||
interface FrameInfo {
|
||||
label: string;
|
||||
@ -59,98 +46,14 @@ interface FrameInfo {
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: { Find, Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, Properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
|
||||
components: { Find, Inspector, Hierarchy, Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, Properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
|
||||
name: "devtools",
|
||||
props: {},
|
||||
setup(props, ctx) {
|
||||
appStore().init();
|
||||
const { config } = storeToRefs(appStore());
|
||||
const treeItemData = ref<NodeInfoData | null>(null);
|
||||
const isShowDebug = ref<boolean>(false);
|
||||
const frameID = ref<number>(0);
|
||||
const iframes = ref<Array<FrameInfo>>([]);
|
||||
const btnRefresh: ButtonGroupItem = reactive<ButtonGroupItem>({
|
||||
icon: "icon_refresh",
|
||||
click: () => {
|
||||
onBtnClickUpdateTree();
|
||||
},
|
||||
visible: true,
|
||||
});
|
||||
const buttonGroup = ref<ButtonGroupItem[]>([
|
||||
btnRefresh,
|
||||
{
|
||||
icon: "icon_settings",
|
||||
click: () => {
|
||||
ccui.dialog.showDialog({
|
||||
comp: SettingsVue,
|
||||
title: "Settings",
|
||||
});
|
||||
},
|
||||
},
|
||||
]);
|
||||
function _checkSelectedUUID() {
|
||||
if (selectedUUID) {
|
||||
const b = _findUuidInTree(toRaw(treeData.value), selectedUUID);
|
||||
if (b) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
selectedUUID = null;
|
||||
treeItemData.value = null;
|
||||
return false;
|
||||
}
|
||||
|
||||
function _findUuidInTree(data: TreeData[], targetUUID: string) {
|
||||
function circle(tree: TreeData[]) {
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
let item: TreeData = tree[i];
|
||||
if (item.id === targetUUID) {
|
||||
return true;
|
||||
}
|
||||
if (circle(item.children || [])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return circle(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 请求属性的列表，如果一个属性请求失败，会阻断后续的相同请求，因为都已经失败了，就没必要再响应请求了
|
||||
*/
|
||||
const requestList: Array<{ id: string; cb: Function }> = [];
|
||||
|
||||
function _expand(uuid: string) {
|
||||
let expandKeys: Array<string> = [];
|
||||
|
||||
function circle(array: any) {
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let item = array[i];
|
||||
expandKeys.push(item.uuid);
|
||||
if (item.uuid === uuid) {
|
||||
return true;
|
||||
} else {
|
||||
let find = circle(item.children);
|
||||
if (find) {
|
||||
return true;
|
||||
} else {
|
||||
expandKeys.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
circle(treeData);
|
||||
|
||||
expandKeys.forEach((key) => {
|
||||
if (!expandedKeys.value.find((el) => el === key)) {
|
||||
expandedKeys.value.push(key);
|
||||
}
|
||||
});
|
||||
// 高亮uuid
|
||||
}
|
||||
const { config, frameID } = storeToRefs(appStore());
|
||||
|
||||
// 问题：没有上下文的权限，只能操作DOM
|
||||
function _executeScript(para: Object) {
|
||||
@ -169,78 +72,21 @@ export default defineComponent({
|
||||
}
|
||||
});
|
||||
}
|
||||
const elTree = ref<typeof CCTree>();
|
||||
function _initChromeRuntimeConnect() {
|
||||
const msgFunctionMap: Record<string, Function> = {};
|
||||
msgFunctionMap[Msg.ResponseTreeInfo] = (data: Array<TreeData>) => {
|
||||
|
||||
bridge.on(Msg.ResponseTreeInfo, (data: Array<TreeData>) => {
|
||||
isShowDebug.value = true;
|
||||
if (!Array.isArray(data)) {
|
||||
data = [data];
|
||||
}
|
||||
treeData.value = data;
|
||||
if (_checkSelectedUUID()) {
|
||||
updateNodeInfo();
|
||||
nextTick(() => {
|
||||
if (elTree.value) {
|
||||
elTree.value.handChoose(selectedUUID);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
msgFunctionMap[Msg.ResponseSupport] = (data: ResponseSupportData) => {
|
||||
debugger;
|
||||
bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
|
||||
const isCocosGame: boolean = data.support;
|
||||
isShowDebug.value = isCocosGame;
|
||||
if (isCocosGame) {
|
||||
syncSettings();
|
||||
onBtnClickUpdateTree();
|
||||
} else {
|
||||
_clearTimer();
|
||||
treeData.value.length = 0;
|
||||
treeItemData.value = null;
|
||||
selectedUUID = null;
|
||||
}
|
||||
};
|
||||
msgFunctionMap[Msg.ResponseNodeInfo] = (eventData: NodeInfoData) => {
|
||||
isShowDebug.value = true;
|
||||
try {
|
||||
// 因为要用到class的一些属性，传递过来的是纯数据，所以需要重新序列化一下
|
||||
const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData);
|
||||
treeItemData.value = nodeInfo;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
ccui.footbar.showError(error, { title: "parse property error" });
|
||||
}
|
||||
};
|
||||
msgFunctionMap[Msg.MemoryInfo] = (eventData: any) => {
|
||||
memory.value = eventData;
|
||||
};
|
||||
msgFunctionMap[Msg.ResponseSetProperty] = (data: ResponseSetPropertyData) => {
|
||||
const uuid = data.path[0];
|
||||
const key = data.path[1];
|
||||
const value = data.data;
|
||||
let treeArray: Array<TreeData> = [];
|
||||
|
||||
function circle(array: Array<TreeData>) {
|
||||
array.forEach((item) => {
|
||||
treeArray.push(item);
|
||||
circle(item.children);
|
||||
});
|
||||
}
|
||||
|
||||
// 更新指定uuid节点的tree的name
|
||||
circle(treeData.value);
|
||||
let ret = treeArray.find((el) => el.id === uuid);
|
||||
if (ret) {
|
||||
if (key === "name") {
|
||||
ret.text = value;
|
||||
}
|
||||
if (key === "active") {
|
||||
ret.active = !!value;
|
||||
}
|
||||
}
|
||||
};
|
||||
msgFunctionMap[Msg.ResponseUpdateFrames] = (resFrames: FrameDetails[]) => {
|
||||
bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
|
||||
isShowDebug.value = true;
|
||||
});
|
||||
bridge.on(Msg.MemoryInfo, (eventData: any) => {
|
||||
memory.value = eventData;
|
||||
});
|
||||
bridge.on(Msg.ResponseUpdateFrames, (resFrames: FrameDetails[]) => {
|
||||
iframes.value = resFrames.map((item) => {
|
||||
return {
|
||||
label: item.url,
|
||||
@ -253,67 +99,8 @@ export default defineComponent({
|
||||
frameID.value = iframes[0].value;
|
||||
onChangeFrame();
|
||||
}
|
||||
};
|
||||
msgFunctionMap[Msg.ResponseObjectItemData] = (requestData: ResponseObjectData) => {
|
||||
if (requestData.id !== null) {
|
||||
let findIndex = requestList.findIndex((el) => el.id === requestData.id);
|
||||
if (findIndex > -1) {
|
||||
let del = requestList.splice(findIndex, 1)[0];
|
||||
del.cb(requestData.data);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 接收来自background.js的消息数据
|
||||
bridge.onMessage = (data: PluginEvent, sender: any) => {
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
if (data.isTargetDevtools()) {
|
||||
PluginEvent.finish(data);
|
||||
const { msg } = data;
|
||||
if (msg) {
|
||||
const func = msgFunctionMap[msg];
|
||||
if (func) {
|
||||
func(data.data);
|
||||
} else {
|
||||
console.warn(`没有${msg}消息的函数`);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
debugger;
|
||||
}
|
||||
};
|
||||
}
|
||||
_initChromeRuntimeConnect();
|
||||
window.addEventListener(
|
||||
"message",
|
||||
(event) => {
|
||||
console.log("on vue:" + JSON.stringify(event));
|
||||
},
|
||||
false
|
||||
);
|
||||
Bus.on(BusMsg.ShowPlace, (data: EngineData) => {
|
||||
console.log(toRaw(data));
|
||||
_expand(data.engineUUID);
|
||||
});
|
||||
Bus.on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => {
|
||||
if (!data.id || requestList.find((el) => el.id === data.id)) {
|
||||
return;
|
||||
}
|
||||
requestList.push({ id: data.id, cb });
|
||||
bridge.send(Msg.RequestObjectItemData, data as RequestObjectData);
|
||||
});
|
||||
Bus.on(BusMsg.UpdateSettings, () => {
|
||||
syncSettings();
|
||||
});
|
||||
Bus.on(BusMsg.LogData, (data: string[]) => {
|
||||
bridge.send(Msg.RequestLogData, data as RequestLogData);
|
||||
});
|
||||
onMounted(() => {
|
||||
syncSettings();
|
||||
});
|
||||
const treeData = ref<TreeData[]>([]);
|
||||
const expandedKeys = ref<Array<string>>([]);
|
||||
|
||||
const memory = ref<{
|
||||
performance: {
|
||||
jsHeapSizeLimit?: number;
|
||||
@ -330,59 +117,7 @@ export default defineComponent({
|
||||
children: "children",
|
||||
label: "name",
|
||||
});
|
||||
const filterText = ref<string>("");
|
||||
watch(filterText, (val) => {
|
||||
// TODO: 过滤树
|
||||
updateFilterText(val);
|
||||
});
|
||||
|
||||
const matchCase = ref<boolean>(false);
|
||||
|
||||
function onEnableTreeWatch(watch: boolean, time = 300) {
|
||||
if (watch) {
|
||||
_clearTimer();
|
||||
timerID = setInterval(() => {
|
||||
onBtnClickUpdateTree();
|
||||
}, time);
|
||||
} else {
|
||||
_clearTimer();
|
||||
}
|
||||
}
|
||||
let timerID: NodeJS.Timer | null = null;
|
||||
|
||||
function _clearTimer() {
|
||||
if (timerID !== null) {
|
||||
clearInterval(timerID);
|
||||
timerID = null;
|
||||
}
|
||||
}
|
||||
function syncSettings() {
|
||||
const { refreshType, refreshTime } = config.value;
|
||||
switch (refreshType) {
|
||||
case RefreshType.Auto: {
|
||||
btnRefresh.visible = false;
|
||||
onEnableTreeWatch(true, refreshTime);
|
||||
break;
|
||||
}
|
||||
case RefreshType.Manual: {
|
||||
btnRefresh.visible = true;
|
||||
onEnableTreeWatch(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateNodeInfo() {
|
||||
if (selectedUUID) {
|
||||
bridge.send(Msg.RequestNodeInfo, { uuid: selectedUUID } as RequestNodeInfoData);
|
||||
}
|
||||
}
|
||||
let selectedUUID: string | null = null;
|
||||
function updateFilterText(val: any) {
|
||||
(elTree.value as any)?.filter(val);
|
||||
}
|
||||
function onBtnClickUpdateTree() {
|
||||
const id = toRaw(frameID.value);
|
||||
bridge.send(Msg.RequstTreeInfo, { frameID: id } as RequestTreeInfoData);
|
||||
}
|
||||
function onChangeFrame() {
|
||||
const id = Number(toRaw(frameID.value));
|
||||
bridge.send(Msg.RequestUseFrame, { id } as RequestUseFrameData);
|
||||
@ -391,18 +126,11 @@ export default defineComponent({
|
||||
const version = ref(PluginConfig.manifest.version);
|
||||
return {
|
||||
version,
|
||||
buttonGroup,
|
||||
elTree,
|
||||
memory,
|
||||
defaultProps,
|
||||
filterText,
|
||||
matchCase,
|
||||
frameID,
|
||||
iframes,
|
||||
isShowDebug,
|
||||
expandedKeys,
|
||||
treeData,
|
||||
treeItemData,
|
||||
frameID,
|
||||
testValidGame(b: boolean) {
|
||||
isShowDebug.value = !!b;
|
||||
},
|
||||
@ -417,52 +145,12 @@ export default defineComponent({
|
||||
});
|
||||
return options;
|
||||
},
|
||||
onChangeCase() {
|
||||
matchCase.value = !matchCase.value;
|
||||
updateFilterText(filterText);
|
||||
},
|
||||
handleNodeClick(data: TreeData | null) {
|
||||
if (data) {
|
||||
selectedUUID = data.id;
|
||||
updateNodeInfo();
|
||||
} else {
|
||||
selectedUUID = null;
|
||||
}
|
||||
},
|
||||
// TODO: 暂时这个版本先不实现
|
||||
filterNode(value: any, data: any) {
|
||||
if (!value) {
|
||||
return true;
|
||||
} else {
|
||||
if (matchCase) {
|
||||
// 严格匹配大写
|
||||
return data?.name?.indexOf(value) !== -1;
|
||||
} else {
|
||||
return data?.name?.toLowerCase().indexOf(value.toLowerCase()) !== -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onMemoryTest() {
|
||||
bridge.send(Msg.MemoryInfo);
|
||||
},
|
||||
|
||||
onChangeFrame,
|
||||
onNodeExpand(data: TreeData) {
|
||||
if (data.id) {
|
||||
expandedKeys.value.push(data.id);
|
||||
}
|
||||
},
|
||||
onNodeCollapse(data: TreeData) {
|
||||
if (data.id) {
|
||||
const keys = toRaw(expandedKeys.value);
|
||||
const index = keys.findIndex((el) => el === data.id);
|
||||
if (index !== -1) {
|
||||
keys.splice(index, 1);
|
||||
}
|
||||
expandedKeys.value = keys;
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -499,55 +187,6 @@ export default defineComponent({
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 200px;
|
||||
width: 300px;
|
||||
|
||||
.tool-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.text {
|
||||
padding-left: 5px;
|
||||
flex: 1;
|
||||
user-select: none;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.matchCase {
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: overlay;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background: #999;
|
||||
border-radius: 2px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #333;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
82
cc-inspector/src/views/devtools/inspector.vue
Normal file
82
cc-inspector/src/views/devtools/inspector.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="right">
|
||||
<Properties v-if="treeItemData" :data="treeItemData"></Properties>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import ccui from "@xuyanfeng/cc-ui";
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { Msg, RequestObjectData, ResponseObjectData, ResponseSupportData } from "../../core/types";
|
||||
import { bridge } from "./bridge";
|
||||
import { Bus, BusMsg } from "./bus";
|
||||
import { NodeInfoData, ObjectData } from "./data";
|
||||
import Properties from "./ui/propertys.vue";
|
||||
export default defineComponent({
|
||||
components: { Properties },
|
||||
setup() {
|
||||
const treeItemData = ref<NodeInfoData | null>(null);
|
||||
bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
|
||||
const isCocosGame: boolean = data.support;
|
||||
if (isCocosGame) {
|
||||
} else {
|
||||
treeItemData.value = null;
|
||||
}
|
||||
});
|
||||
bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
|
||||
try {
|
||||
// 因为要用到class的一些属性，传递过来的是纯数据，所以需要重新序列化一下
|
||||
const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData);
|
||||
treeItemData.value = nodeInfo;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
ccui.footbar.showError(error, { title: "parse property error" });
|
||||
}
|
||||
});
|
||||
/**
|
||||
* 请求属性的列表，如果一个属性请求失败，会阻断后续的相同请求，因为都已经失败了，就没必要再响应请求了
|
||||
*/
|
||||
const requestList: Array<{ id: string; cb: Function }> = [];
|
||||
|
||||
bridge.on(Msg.ResponseObjectItemData, (requestData: ResponseObjectData) => {
|
||||
if (requestData.id !== null) {
|
||||
let findIndex = requestList.findIndex((el) => el.id === requestData.id);
|
||||
if (findIndex > -1) {
|
||||
let del = requestList.splice(findIndex, 1)[0];
|
||||
del.cb(requestData.data);
|
||||
}
|
||||
}
|
||||
});
|
||||
Bus.on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => {
|
||||
if (!data.id || requestList.find((el) => el.id === data.id)) {
|
||||
return;
|
||||
}
|
||||
requestList.push({ id: data.id, cb });
|
||||
bridge.send(Msg.RequestObjectItemData, data as RequestObjectData);
|
||||
});
|
||||
// TODO: 需要检查当前的这个节点是否有效
|
||||
// treeItemData.value = null;
|
||||
return {
|
||||
treeItemData,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.right {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: overlay;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background: #999;
|
||||
border-radius: 2px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #333;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -23,7 +23,9 @@ export class ConfigData {
|
||||
|
||||
export const appStore = defineStore("app", () => {
|
||||
const config = ref<ConfigData>(new ConfigData());
|
||||
const frameID = ref<number>(0);
|
||||
return {
|
||||
frameID,
|
||||
config,
|
||||
init() {
|
||||
profile.init(new ConfigData(), pluginConfig);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { v4 } from "uuid";
|
||||
import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseTreeInfoData } from "../../../core/types";
|
||||
import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types";
|
||||
import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data";
|
||||
export class TestClient {
|
||||
recv(event: PluginEvent) {}
|
||||
@ -98,8 +98,18 @@ export class TestServer {
|
||||
add(client: TestClient) {
|
||||
this.clients.push(client);
|
||||
}
|
||||
private count: number = 0;
|
||||
recv(msg: string, data: any) {
|
||||
switch (msg) {
|
||||
case Msg.RequestSupport: {
|
||||
this.count++;
|
||||
const e = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseSupport, {
|
||||
support: this.count > 10,
|
||||
msg: "",
|
||||
} as ResponseSupportData);
|
||||
this.send(e);
|
||||
break;
|
||||
}
|
||||
case Msg.RequestNodeInfo: {
|
||||
const id: string = (data as RequestNodeInfoData).uuid;
|
||||
const node: Node = this.testData.findNode(id);
|
||||
|
||||
@ -94,7 +94,7 @@ export default defineComponent({
|
||||
children: [],
|
||||
};
|
||||
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
|
||||
bridge.doMessage(event);
|
||||
bridge.emit(event);
|
||||
},
|
||||
onFrames() {
|
||||
const data: FrameDetails[] = [
|
||||
|
||||
@ -15,7 +15,9 @@
|
||||
<script lang="ts">
|
||||
import ccui from "@xuyanfeng/cc-ui";
|
||||
import { defineComponent, PropType, ref, toRaw, watch } from "vue";
|
||||
import Bus, { BusMsg } from "../bus";
|
||||
import { Msg, RequestLogData } from "../../../core/types";
|
||||
import { bridge } from "../bridge";
|
||||
import { Bus, BusMsg } from "../bus";
|
||||
import { Group } from "../data";
|
||||
import UiProp from "./ui-prop.vue";
|
||||
const { CCInput, CCSection, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
|
||||
@ -54,7 +56,8 @@ export default defineComponent({
|
||||
fold,
|
||||
onLog() {
|
||||
const raw = toRaw(props);
|
||||
Bus.emit(BusMsg.LogData, [raw.group.id]);
|
||||
const data = [raw.group.id];
|
||||
bridge.send(Msg.RequestLogData, data as RequestLogData);
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user