CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-06-05 07:44:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

改用定时器刷新数据

Browse Source
This commit is contained in:
xu_yanfeng 2024-12-28 14:25:23 +08:00
parent a4f9443464
commit 8d5b8240cc
14 changed files with 170 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cc-inspector/src/views/devtools/bridge.ts
View File

@ -40,7 +40,7 @@ class Bridge implements TestClient {
testServer.add(this);
}
}
on(msg: Msg, callback: Function) {
on(msg: Msg, callback: (data: PluginEvent) => void) {
this.emitter.on(msg, callback);
}
recv(event: PluginEvent): void {

4
cc-inspector/src/views/devtools/bus.ts
View File

@ -5,6 +5,10 @@ export enum BusMsg {
RequestObjectData = "RequestObjectData",
FoldAllGroup = "FoldAllGroup",
UpdateSettings = "UpdateSettings",
/**
* 开关定时器，方便测试
*/
EnableSchedule = "EnableSchedule",
}
export const Bus = new TinyEmitter();

18
cc-inspector/src/views/devtools/find.vue
View File

@ -5,25 +5,11 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from "vue";
import { Msg, RequestSupportData } from "../../core/types";
import { bridge } from "./bridge";
import { defineComponent } from "vue";
import { checkSupport } from "./util";
export default defineComponent({
name: "find",
setup(props) {
let timer: NodeJS.Timer = null;
onMounted(() => {
timer = setInterval(() => {
checkSupport();
}, 300);
});
onUnmounted(() => {
clearInterval(timer);
});
function checkSupport() {
bridge.send(Msg.RequestSupport, {} as RequestSupportData);
}
return {
onBtnClickUpdatePage() {
checkSupport();

178
cc-inspector/src/views/devtools/hierarchy.vue
View File

@ -1,62 +1,51 @@
<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>
<CCDock name="Hierarchy">
<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" @node-unclick="handleNodeUnclick"></CCTree>
</CCDock>
</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 { defineComponent, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
import { Msg, PluginEvent, RequestNodeInfoData, RequestTreeInfoData, ResponseSetPropertyData } 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;
import { appStore } from "./store";
import { Timer } from "./timer";
const { CCTree, CCFootBar, CCDock, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
export default defineComponent({
name: "hierarchy",
components: { CCButtonGroup, CCInput, CCTree },
components: { CCButtonGroup, CCInput, CCTree, CCDock },
setup() {
onMounted(() => {
syncSettings();
});
onMounted(() => {});
Bus.on(BusMsg.ShowPlace, (data: EngineData) => {
console.log(toRaw(data));
_expand(data.engineUUID);
});
Bus.on(BusMsg.UpdateSettings, () => {
syncSettings();
Bus.on(BusMsg.EnableSchedule, (b: boolean) => {
if (b) {
timer.create();
} else {
timer.clean();
}
});
const btnRefresh: ButtonGroupItem = reactive<ButtonGroupItem>({
icon: "icon_refresh",
click: () => {
onBtnClickUpdateTree();
},
visible: true,
const timer: Timer = new Timer(() => {
updateTree();
});
onMounted(() => {
timer.create();
});
onUnmounted(() => {
timer.clean();
});
const buttonGroup = ref<ButtonGroupItem[]>([
btnRefresh,
{
icon: "icon_settings",
click: () => {
ccui.dialog.showDialog({
comp: SettingsVue,
title: "Settings",
});
},
},
]);
function _expand(uuid: string) {
let expandKeys: Array<string> = [];
@ -86,42 +75,12 @@ export default defineComponent({
});
// 高亮uuid
}
let timerID: NodeJS.Timer | null = null;
function _clearTimer() {
if (timerID !== null) {
clearInterval(timerID);
timerID = null;
}
}
function onBtnClickUpdateTree() {
function updateTree() {
console.log("update tree info");
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);
}
@ -130,7 +89,6 @@ export default defineComponent({
// TODO: 过滤树
updateFilterText(val);
});
// TODO: 放到store里面
const { config, frameID } = storeToRefs(appStore());
const matchCase = ref<boolean>(false);
const elTree = ref<typeof CCTree>();
@ -141,56 +99,21 @@ export default defineComponent({
}
}
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>) => {
bridge.on(Msg.ResponseTreeInfo, (event: PluginEvent) => {
let data: Array<TreeData> = event.data;
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;
}
nextTick(() => {
if (elTree.value) {
elTree.value.handChoose(selectedUUID);
}
});
});
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) => {
bridge.on(Msg.ResponseSetProperty, (event: PluginEvent) => {
let data: ResponseSetPropertyData = event.data;
const uuid = data.path[0];
const key = data.path[1];
const value = data.data;
@ -223,7 +146,9 @@ export default defineComponent({
treeData,
matchCase,
frameID,
buttonGroup,
handleNodeUnclick() {
selectedUUID = null;
},
handleNodeClick(data: TreeData | null) {
if (data) {
selectedUUID = data.id;
@ -275,21 +200,6 @@ export default defineComponent({
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;

44
cc-inspector/src/views/devtools/index.vue
View File

@ -1,11 +1,11 @@
<template>
<div id="devtools">
<Test @valid-game="testValidGame"> </Test>
<Test> </Test>
<div class="head" v-show="iframes.length > 1">
<div class="label">inspect target:</div>
<CCSelect v-model:value="frameID" @change="onChangeFrame" :data="getFramesData()"> </CCSelect>
</div>
<div v-show="isShowDebug" class="find">
<div v-if="isShowDebug" class="find">
<div v-if="false">
<CCButton type="success" @click="onMemoryTest">内存测试</CCButton>
<span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
@ -26,9 +26,9 @@
import ccui from "@xuyanfeng/cc-ui";
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import { storeToRefs } from "pinia";
import { defineComponent, ref, toRaw } from "vue";
import { defineComponent, onMounted, onUnmounted, ref, toRaw } from "vue";
import PluginConfig from "../../../cc-plugin.config";
import { Msg, RequestLogData, RequestUseFrameData, ResponseSupportData } from "../../core/types";
import { Msg, PluginEvent, RequestUseFrameData, ResponseSupportData } from "../../core/types";
import { bridge } from "./bridge";
import { Bus, BusMsg } from "./bus";
import { FrameDetails, NodeInfoData, TreeData } from "./data";
@ -37,8 +37,10 @@ import Hierarchy from "./hierarchy.vue";
import Inspector from "./inspector.vue";
import { appStore } from "./store";
import Test from "./test/test.vue";
import { Timer } from "./timer";
import Properties from "./ui/propertys.vue";
import SettingsVue from "./ui/settings.vue";
import { checkSupport } from "./util";
const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
interface FrameInfo {
label: string;
@ -54,7 +56,15 @@ export default defineComponent({
const isShowDebug = ref<boolean>(false);
const iframes = ref<Array<FrameInfo>>([]);
const { config, frameID } = storeToRefs(appStore());
const timer = new Timer(() => {
checkSupport();
});
onMounted(() => {
timer.create();
});
onUnmounted(() => {
timer.clean();
});
// 问题：没有上下文的权限，只能操作DOM
function _executeScript(para: Object) {
// chrome.tabs.executeScript()//v2版本使用的函数
@ -72,21 +82,31 @@ export default defineComponent({
}
});
}
bridge.on(Msg.ResponseTreeInfo, (data: Array<TreeData>) => {
Bus.on(BusMsg.EnableSchedule, (b: boolean) => {
if (b) {
timer.create();
} else {
timer.clean();
}
});
bridge.on(Msg.ResponseTreeInfo, (event: PluginEvent) => {
let data: Array<TreeData> = event.data;
isShowDebug.value = true;
});
bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
bridge.on(Msg.ResponseSupport, (event: PluginEvent) => {
let data: ResponseSupportData = event.data;
const isCocosGame: boolean = data.support;
isShowDebug.value = isCocosGame;
});
bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
bridge.on(Msg.ResponseNodeInfo, (event: PluginEvent) => {
let eventData: NodeInfoData = event.data;
isShowDebug.value = true;
});
bridge.on(Msg.MemoryInfo, (eventData: any) => {
memory.value = eventData;
});
bridge.on(Msg.ResponseUpdateFrames, (resFrames: FrameDetails[]) => {
bridge.on(Msg.ResponseUpdateFrames, (event: PluginEvent) => {
let resFrames: FrameDetails[] = event.data;
iframes.value = resFrames.map((item) => {
return {
label: item.url,
@ -131,9 +151,7 @@ export default defineComponent({
frameID,
iframes,
isShowDebug,
testValidGame(b: boolean) {
isShowDebug.value = !!b;
},
getFramesData(): Option[] {
const frames: FrameInfo[] = toRaw(iframes.value);
const options: Option[] = [];

19
cc-inspector/src/views/devtools/inspector.vue
View File

@ -1,30 +1,35 @@
<template>
<div class="right">
<Properties v-if="treeItemData" :data="treeItemData"></Properties>
<CCDock name="Inspector">
<Properties v-if="treeItemData" :data="treeItemData"></Properties>
</CCDock>
</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 { Msg, PluginEvent, 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";
const { CCDock } = ccui.components;
export default defineComponent({
components: { Properties },
components: { Properties, CCDock },
setup() {
const treeItemData = ref<NodeInfoData | null>(null);
bridge.on(Msg.ResponseSupport, (data: ResponseSupportData) => {
bridge.on(Msg.ResponseSupport, (event: PluginEvent) => {
let data: ResponseSupportData = event.data;
const isCocosGame: boolean = data.support;
if (isCocosGame) {
} else {
treeItemData.value = null;
}
});
bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
bridge.on(Msg.ResponseNodeInfo, (event: PluginEvent) => {
try {
// 因为要用到class的一些属性，传递过来的是纯数据，所以需要重新序列化一下
let eventData: NodeInfoData = event.data;
const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData);
treeItemData.value = nodeInfo;
} catch (error) {
@ -37,7 +42,8 @@ export default defineComponent({
*/
const requestList: Array<{ id: string; cb: Function }> = [];
bridge.on(Msg.ResponseObjectItemData, (requestData: ResponseObjectData) => {
bridge.on(Msg.ResponseObjectItemData, (event: PluginEvent) => {
const requestData: ResponseObjectData = event.data;
if (requestData.id !== null) {
let findIndex = requestList.findIndex((el) => el.id === requestData.id);
if (findIndex > -1) {
@ -64,6 +70,7 @@ export default defineComponent({
<style lang="less" scoped>
.right {
flex: 1;
display: flex;
overflow-x: hidden;
overflow-y: overlay;

5
cc-inspector/src/views/devtools/test/server.ts
View File

@ -98,13 +98,12 @@ export class TestServer {
add(client: TestClient) {
this.clients.push(client);
}
private count: number = 0;
public support: boolean = true;
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,
support: this.support,
msg: "",
} as ResponseSupportData);
this.send(e);

63
cc-inspector/src/views/devtools/test/test.vue
View File

@ -1,13 +1,24 @@
<template>
<div v-if="show" class="test">
<CCSection name="功能测试" :expand="config.expandTest" @change="onExpandTest">
<CCButton @click="onClickHasCocosGame">Has CocosGame</CCButton>
<CCButton @click="onClickNoCocosGame">No CocosGame</CCButton>
<CCButton @click="onTestTree">init tree data</CCButton>
<CCButton @click="onFrames">test frame</CCButton>
<CCButton @click="onTestNodeInfo">test node info</CCButton>
<CCButton @click="onNull">test null</CCButton>
<CCButton @click="onTerminal">onTerminal</CCButton>
<div>
<CCProp name="tree" align="left">
<CCButton @click="onTestTree1">tree1</CCButton>
<CCButton @click="onTestTree2">tree2</CCButton>
<CCButton @click="onTestNodeInfo">test node info</CCButton>
</CCProp>
<CCProp name="test" align="left">
<CCButton @click="onFrames">test frame</CCButton>
<CCButton @click="onNull">test null</CCButton>
<CCButton @click="onTerminal">terminal</CCButton>
</CCProp>
<CCProp name="cocos game" align="left">
<CCCheckBox :value="true" @change="onChangeCocosGame"></CCCheckBox>
</CCProp>
<CCProp name="timer" align="left">
<CCCheckBox :value="true" @change="onChangeTimer"></CCCheckBox>
</CCProp>
</div>
</CCSection>
</div>
</template>
@ -18,13 +29,14 @@ import { defineComponent, ref } from "vue";
import { Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
import { Terminal } from "../../../scripts/terminal";
import { bridge } from "../bridge";
import { Bus, BusMsg } from "../bus";
import { FrameDetails, Group, InvalidData, NodeInfoData, TreeData } from "../data";
import { appStore } from "../store";
import { testServer } from "./server";
const { CCButton, CCSection } = ccui.components;
const { CCButton, CCSection, CCCheckBox, CCProp } = ccui.components;
export default defineComponent({
name: "test",
components: { CCButton, CCSection },
components: { CCButton, CCSection, CCCheckBox, CCProp },
emits: ["validGame"],
props: {
isCocosGame: { type: Boolean, default: false },
@ -67,11 +79,12 @@ export default defineComponent({
config.value.expandTest = v;
appStore().save();
},
onClickHasCocosGame() {
emit("validGame", true);
onChangeCocosGame(b: boolean) {
testServer.support = b;
},
onClickNoCocosGame() {
emit("validGame", false);
onChangeTimer(b: boolean) {
Bus.emit(BusMsg.EnableSchedule, b);
},
onTerminal() {
const t = new Terminal("flag");
@ -86,12 +99,30 @@ export default defineComponent({
console.log(...t.blue("blue"));
console.log(...t.chunkMessage(event.toChunk()));
},
onTestTree() {
onTestTree1() {
const data: TreeData = {
id: "11",
text: "11",
active: true,
children: [{ id: "22", text: "22", active: true, children: [] }],
};
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
bridge.emit(event);
},
onTestTree2() {
const data: TreeData = {
id: "1",
text: "root",
text: "1",
active: true,
children: [],
children: [
{
id: "2",
text: "2",
active: true,
children: [{ id: "3", text: "3", active: true, children: [] }],
},
{ id: "4", text: "4", active: true, children: [] },
],
};
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
bridge.emit(event);

16
cc-inspector/src/views/devtools/timer.ts Normal file
View File

@ -0,0 +1,16 @@
export class Timer {
private timer: number = 0;
private callback: Function | null = null;
private duration: number = 0;
constructor(cb: Function = null, duration: number = 300) {
this.callback = cb;
this.duration = duration;
}
create() {
this.clean();
this.timer = setInterval(this.callback, this.duration);
}
clean() {
clearInterval(this.timer);
}
}

2
cc-inspector/src/views/devtools/ui/property-engine.vue
View File

@ -11,7 +11,7 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import Bus, { BusMsg } from "../bus";
import { Bus, BusMsg } from "../bus";
import { EngineData } from "../data";
export default defineComponent({
name: "property-engine",

2
cc-inspector/src/views/devtools/ui/propertys.vue
View File

@ -6,7 +6,7 @@
<script lang="ts">
import { defineComponent, PropType, watch } from "vue";
import Bus, { BusMsg } from "../bus";
import { Bus, BusMsg } from "../bus";
import { NodeInfoData } from "../data";
import PropertyGroup from "../ui/property-group.vue";
import UiProp from "./ui-prop.vue";

2
cc-inspector/src/views/devtools/ui/settings.vue
View File

@ -15,7 +15,7 @@ import ccui from "@xuyanfeng/cc-ui";
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import { storeToRefs } from "pinia";
import { defineComponent, ref } from "vue";
import bus, { BusMsg } from "../bus";
import { BusMsg } from "../bus";
import { appStore, RefreshType } from "../store";
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCProp, CCColor } = ccui.components;
export default defineComponent({

2
cc-inspector/src/views/devtools/ui/ui-prop.vue
View File

@ -34,7 +34,7 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue";
import { Msg, RequestSetPropertyData } from "../../../core/types";
import { bridge } from "../bridge";
import Bus, { BusMsg } from "../bus";
import { Bus, BusMsg } from "../bus";
import { EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
import Engine from "./property-engine.vue";
import PropertyImage from "./property-image.vue";

6
cc-inspector/src/views/devtools/util.ts
View File

@ -0,0 +1,6 @@
import { Msg, RequestSupportData } from "../../core/types";
import { bridge } from "./bridge";
export function checkSupport() {
bridge.send(Msg.RequestSupport, {} as RequestSupportData);
}