mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-06-06 08:14:02 +00:00
改用定时器刷新数据
This commit is contained in:
parent
a4f9443464
commit
8d5b8240cc
@ -40,7 +40,7 @@ class Bridge implements TestClient {
|
|||||||
testServer.add(this);
|
testServer.add(this);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
on(msg: Msg, callback: Function) {
|
on(msg: Msg, callback: (data: PluginEvent) => void) {
|
||||||
this.emitter.on(msg, callback);
|
this.emitter.on(msg, callback);
|
||||||
}
|
}
|
||||||
recv(event: PluginEvent): void {
|
recv(event: PluginEvent): void {
|
||||||
|
@ -5,6 +5,10 @@ export enum BusMsg {
|
|||||||
RequestObjectData = "RequestObjectData",
|
RequestObjectData = "RequestObjectData",
|
||||||
FoldAllGroup = "FoldAllGroup",
|
FoldAllGroup = "FoldAllGroup",
|
||||||
UpdateSettings = "UpdateSettings",
|
UpdateSettings = "UpdateSettings",
|
||||||
|
/**
|
||||||
|
* 开关定时器,方便测试
|
||||||
|
*/
|
||||||
|
EnableSchedule = "EnableSchedule",
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Bus = new TinyEmitter();
|
export const Bus = new TinyEmitter();
|
||||||
|
@ -5,25 +5,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, onMounted, onUnmounted } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import { Msg, RequestSupportData } from "../../core/types";
|
import { checkSupport } from "./util";
|
||||||
import { bridge } from "./bridge";
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "find",
|
name: "find",
|
||||||
setup(props) {
|
setup(props) {
|
||||||
let timer: NodeJS.Timer = null;
|
|
||||||
onMounted(() => {
|
|
||||||
timer = setInterval(() => {
|
|
||||||
checkSupport();
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
onUnmounted(() => {
|
|
||||||
clearInterval(timer);
|
|
||||||
});
|
|
||||||
|
|
||||||
function checkSupport() {
|
|
||||||
bridge.send(Msg.RequestSupport, {} as RequestSupportData);
|
|
||||||
}
|
|
||||||
return {
|
return {
|
||||||
onBtnClickUpdatePage() {
|
onBtnClickUpdatePage() {
|
||||||
checkSupport();
|
checkSupport();
|
||||||
|
@ -1,62 +1,51 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="tool-btn">
|
<CCDock name="Hierarchy">
|
||||||
<div class="text">Node Tree</div>
|
<CCInput style="flex: none" placeholder="enter keywords to filter" :data="filterText" v-if="false">
|
||||||
<CCButtonGroup :items="buttonGroup" :recover="true"></CCButtonGroup>
|
<slot>
|
||||||
</div>
|
<i class="matchCase iconfont icon_font_size" @click.stop="onChangeCase" title="match case" :style="{ color: matchCase ? 'red' : '' }"></i>
|
||||||
<CCInput style="flex: none" placeholder="enter keywords to filter" :data="filterText" v-if="false">
|
</slot>
|
||||||
<slot>
|
</CCInput>
|
||||||
<i class="matchCase iconfont icon_font_size" @click.stop="onChangeCase" title="match case" :style="{ color: matchCase ? 'red' : '' }"></i>
|
<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>
|
||||||
</slot>
|
</CCDock>
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ccui from "@xuyanfeng/cc-ui";
|
import ccui from "@xuyanfeng/cc-ui";
|
||||||
import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
|
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
import { defineComponent, nextTick, onMounted, reactive, ref, toRaw, watch } from "vue";
|
import { defineComponent, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
|
||||||
import { Msg, RequestNodeInfoData, RequestTreeInfoData, ResponseSetPropertyData, ResponseSupportData } from "../../core/types";
|
import { Msg, PluginEvent, RequestNodeInfoData, RequestTreeInfoData, ResponseSetPropertyData } from "../../core/types";
|
||||||
import { bridge } from "./bridge";
|
import { bridge } from "./bridge";
|
||||||
import { Bus, BusMsg } from "./bus";
|
import { Bus, BusMsg } from "./bus";
|
||||||
import { EngineData, TreeData } from "./data";
|
import { EngineData, TreeData } from "./data";
|
||||||
import { appStore, RefreshType } from "./store";
|
import { appStore } from "./store";
|
||||||
import SettingsVue from "./ui/settings.vue";
|
import { Timer } from "./timer";
|
||||||
const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
|
const { CCTree, CCFootBar, CCDock, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "hierarchy",
|
name: "hierarchy",
|
||||||
components: { CCButtonGroup, CCInput, CCTree },
|
components: { CCButtonGroup, CCInput, CCTree, CCDock },
|
||||||
setup() {
|
setup() {
|
||||||
onMounted(() => {
|
onMounted(() => {});
|
||||||
syncSettings();
|
|
||||||
});
|
|
||||||
Bus.on(BusMsg.ShowPlace, (data: EngineData) => {
|
Bus.on(BusMsg.ShowPlace, (data: EngineData) => {
|
||||||
console.log(toRaw(data));
|
console.log(toRaw(data));
|
||||||
_expand(data.engineUUID);
|
_expand(data.engineUUID);
|
||||||
});
|
});
|
||||||
Bus.on(BusMsg.UpdateSettings, () => {
|
Bus.on(BusMsg.EnableSchedule, (b: boolean) => {
|
||||||
syncSettings();
|
if (b) {
|
||||||
|
timer.create();
|
||||||
|
} else {
|
||||||
|
timer.clean();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
const btnRefresh: ButtonGroupItem = reactive<ButtonGroupItem>({
|
const timer: Timer = new Timer(() => {
|
||||||
icon: "icon_refresh",
|
updateTree();
|
||||||
click: () => {
|
});
|
||||||
onBtnClickUpdateTree();
|
onMounted(() => {
|
||||||
},
|
timer.create();
|
||||||
visible: true,
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
timer.clean();
|
||||||
});
|
});
|
||||||
const buttonGroup = ref<ButtonGroupItem[]>([
|
|
||||||
btnRefresh,
|
|
||||||
{
|
|
||||||
icon: "icon_settings",
|
|
||||||
click: () => {
|
|
||||||
ccui.dialog.showDialog({
|
|
||||||
comp: SettingsVue,
|
|
||||||
title: "Settings",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
function _expand(uuid: string) {
|
function _expand(uuid: string) {
|
||||||
let expandKeys: Array<string> = [];
|
let expandKeys: Array<string> = [];
|
||||||
|
|
||||||
@ -86,42 +75,12 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
// 高亮uuid
|
// 高亮uuid
|
||||||
}
|
}
|
||||||
let timerID: NodeJS.Timer | null = null;
|
function updateTree() {
|
||||||
|
console.log("update tree info");
|
||||||
function _clearTimer() {
|
|
||||||
if (timerID !== null) {
|
|
||||||
clearInterval(timerID);
|
|
||||||
timerID = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function onBtnClickUpdateTree() {
|
|
||||||
const id = toRaw(frameID.value);
|
const id = toRaw(frameID.value);
|
||||||
bridge.send(Msg.RequstTreeInfo, { frameID: id } as RequestTreeInfoData);
|
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) {
|
function updateFilterText(val: any) {
|
||||||
(elTree.value as any)?.filter(val);
|
(elTree.value as any)?.filter(val);
|
||||||
}
|
}
|
||||||
@ -130,7 +89,6 @@ export default defineComponent({
|
|||||||
// TODO: 过滤树
|
// TODO: 过滤树
|
||||||
updateFilterText(val);
|
updateFilterText(val);
|
||||||
});
|
});
|
||||||
// TODO: 放到store里面
|
|
||||||
const { config, frameID } = storeToRefs(appStore());
|
const { config, frameID } = storeToRefs(appStore());
|
||||||
const matchCase = ref<boolean>(false);
|
const matchCase = ref<boolean>(false);
|
||||||
const elTree = ref<typeof CCTree>();
|
const elTree = ref<typeof CCTree>();
|
||||||
@ -141,56 +99,21 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
let selectedUUID: string | null = null;
|
let selectedUUID: string | null = null;
|
||||||
function _findUuidInTree(data: TreeData[], targetUUID: string) {
|
bridge.on(Msg.ResponseTreeInfo, (event: PluginEvent) => {
|
||||||
function circle(tree: TreeData[]) {
|
let data: Array<TreeData> = event.data;
|
||||||
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)) {
|
if (!Array.isArray(data)) {
|
||||||
data = [data];
|
data = [data];
|
||||||
}
|
}
|
||||||
treeData.value = data;
|
treeData.value = data;
|
||||||
if (!selectedUUID) {
|
nextTick(() => {
|
||||||
return;
|
if (elTree.value) {
|
||||||
}
|
elTree.value.handChoose(selectedUUID);
|
||||||
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) => {
|
bridge.on(Msg.ResponseSetProperty, (event: PluginEvent) => {
|
||||||
const isCocosGame: boolean = data.support;
|
let data: ResponseSetPropertyData = event.data;
|
||||||
if (isCocosGame) {
|
|
||||||
syncSettings();
|
|
||||||
onBtnClickUpdateTree();
|
|
||||||
} else {
|
|
||||||
_clearTimer();
|
|
||||||
treeData.value.length = 0;
|
|
||||||
selectedUUID = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
bridge.on(Msg.ResponseSetProperty, (data: ResponseSetPropertyData) => {
|
|
||||||
const uuid = data.path[0];
|
const uuid = data.path[0];
|
||||||
const key = data.path[1];
|
const key = data.path[1];
|
||||||
const value = data.data;
|
const value = data.data;
|
||||||
@ -223,7 +146,9 @@ export default defineComponent({
|
|||||||
treeData,
|
treeData,
|
||||||
matchCase,
|
matchCase,
|
||||||
frameID,
|
frameID,
|
||||||
buttonGroup,
|
handleNodeUnclick() {
|
||||||
|
selectedUUID = null;
|
||||||
|
},
|
||||||
handleNodeClick(data: TreeData | null) {
|
handleNodeClick(data: TreeData | null) {
|
||||||
if (data) {
|
if (data) {
|
||||||
selectedUUID = data.id;
|
selectedUUID = data.id;
|
||||||
@ -275,21 +200,6 @@ export default defineComponent({
|
|||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
width: 300px;
|
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 {
|
.matchCase {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="devtools">
|
<div id="devtools">
|
||||||
<Test @valid-game="testValidGame"> </Test>
|
<Test> </Test>
|
||||||
<div class="head" v-show="iframes.length > 1">
|
<div class="head" v-show="iframes.length > 1">
|
||||||
<div class="label">inspect target:</div>
|
<div class="label">inspect target:</div>
|
||||||
<CCSelect v-model:value="frameID" @change="onChangeFrame" :data="getFramesData()"> </CCSelect>
|
<CCSelect v-model:value="frameID" @change="onChangeFrame" :data="getFramesData()"> </CCSelect>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="isShowDebug" class="find">
|
<div v-if="isShowDebug" class="find">
|
||||||
<div v-if="false">
|
<div v-if="false">
|
||||||
<CCButton type="success" @click="onMemoryTest">内存测试</CCButton>
|
<CCButton type="success" @click="onMemoryTest">内存测试</CCButton>
|
||||||
<span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
|
<span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
|
||||||
@ -26,9 +26,9 @@
|
|||||||
import ccui from "@xuyanfeng/cc-ui";
|
import ccui from "@xuyanfeng/cc-ui";
|
||||||
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
|
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
|
||||||
import { storeToRefs } from "pinia";
|
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 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 { bridge } from "./bridge";
|
||||||
import { Bus, BusMsg } from "./bus";
|
import { Bus, BusMsg } from "./bus";
|
||||||
import { FrameDetails, NodeInfoData, TreeData } from "./data";
|
import { FrameDetails, NodeInfoData, TreeData } from "./data";
|
||||||
@ -37,8 +37,10 @@ import Hierarchy from "./hierarchy.vue";
|
|||||||
import Inspector from "./inspector.vue";
|
import Inspector from "./inspector.vue";
|
||||||
import { appStore } from "./store";
|
import { appStore } from "./store";
|
||||||
import Test from "./test/test.vue";
|
import Test from "./test/test.vue";
|
||||||
|
import { Timer } from "./timer";
|
||||||
import Properties from "./ui/propertys.vue";
|
import Properties from "./ui/propertys.vue";
|
||||||
import SettingsVue from "./ui/settings.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;
|
const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
|
||||||
interface FrameInfo {
|
interface FrameInfo {
|
||||||
label: string;
|
label: string;
|
||||||
@ -54,7 +56,15 @@ export default defineComponent({
|
|||||||
const isShowDebug = ref<boolean>(false);
|
const isShowDebug = ref<boolean>(false);
|
||||||
const iframes = ref<Array<FrameInfo>>([]);
|
const iframes = ref<Array<FrameInfo>>([]);
|
||||||
const { config, frameID } = storeToRefs(appStore());
|
const { config, frameID } = storeToRefs(appStore());
|
||||||
|
const timer = new Timer(() => {
|
||||||
|
checkSupport();
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
timer.create();
|
||||||
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
timer.clean();
|
||||||
|
});
|
||||||
// 问题:没有上下文的权限,只能操作DOM
|
// 问题:没有上下文的权限,只能操作DOM
|
||||||
function _executeScript(para: Object) {
|
function _executeScript(para: Object) {
|
||||||
// chrome.tabs.executeScript()//v2版本使用的函数
|
// chrome.tabs.executeScript()//v2版本使用的函数
|
||||||
@ -72,21 +82,31 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Bus.on(BusMsg.EnableSchedule, (b: boolean) => {
|
||||||
bridge.on(Msg.ResponseTreeInfo, (data: Array<TreeData>) => {
|
if (b) {
|
||||||
|
timer.create();
|
||||||
|
} else {
|
||||||
|
timer.clean();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
bridge.on(Msg.ResponseTreeInfo, (event: PluginEvent) => {
|
||||||
|
let data: Array<TreeData> = event.data;
|
||||||
isShowDebug.value = true;
|
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;
|
const isCocosGame: boolean = data.support;
|
||||||
isShowDebug.value = isCocosGame;
|
isShowDebug.value = isCocosGame;
|
||||||
});
|
});
|
||||||
bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
|
bridge.on(Msg.ResponseNodeInfo, (event: PluginEvent) => {
|
||||||
|
let eventData: NodeInfoData = event.data;
|
||||||
isShowDebug.value = true;
|
isShowDebug.value = true;
|
||||||
});
|
});
|
||||||
bridge.on(Msg.MemoryInfo, (eventData: any) => {
|
bridge.on(Msg.MemoryInfo, (eventData: any) => {
|
||||||
memory.value = eventData;
|
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) => {
|
iframes.value = resFrames.map((item) => {
|
||||||
return {
|
return {
|
||||||
label: item.url,
|
label: item.url,
|
||||||
@ -131,9 +151,7 @@ export default defineComponent({
|
|||||||
frameID,
|
frameID,
|
||||||
iframes,
|
iframes,
|
||||||
isShowDebug,
|
isShowDebug,
|
||||||
testValidGame(b: boolean) {
|
|
||||||
isShowDebug.value = !!b;
|
|
||||||
},
|
|
||||||
getFramesData(): Option[] {
|
getFramesData(): Option[] {
|
||||||
const frames: FrameInfo[] = toRaw(iframes.value);
|
const frames: FrameInfo[] = toRaw(iframes.value);
|
||||||
const options: Option[] = [];
|
const options: Option[] = [];
|
||||||
|
@ -1,30 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<Properties v-if="treeItemData" :data="treeItemData"></Properties>
|
<CCDock name="Inspector">
|
||||||
|
<Properties v-if="treeItemData" :data="treeItemData"></Properties>
|
||||||
|
</CCDock>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ccui from "@xuyanfeng/cc-ui";
|
import ccui from "@xuyanfeng/cc-ui";
|
||||||
import { defineComponent, ref } from "vue";
|
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 { bridge } from "./bridge";
|
||||||
import { Bus, BusMsg } from "./bus";
|
import { Bus, BusMsg } from "./bus";
|
||||||
import { NodeInfoData, ObjectData } from "./data";
|
import { NodeInfoData, ObjectData } from "./data";
|
||||||
import Properties from "./ui/propertys.vue";
|
import Properties from "./ui/propertys.vue";
|
||||||
|
const { CCDock } = ccui.components;
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { Properties },
|
components: { Properties, CCDock },
|
||||||
setup() {
|
setup() {
|
||||||
const treeItemData = ref<NodeInfoData | null>(null);
|
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;
|
const isCocosGame: boolean = data.support;
|
||||||
if (isCocosGame) {
|
if (isCocosGame) {
|
||||||
} else {
|
} else {
|
||||||
treeItemData.value = null;
|
treeItemData.value = null;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
bridge.on(Msg.ResponseNodeInfo, (eventData: NodeInfoData) => {
|
bridge.on(Msg.ResponseNodeInfo, (event: PluginEvent) => {
|
||||||
try {
|
try {
|
||||||
// 因为要用到class的一些属性,传递过来的是纯数据,所以需要重新序列化一下
|
// 因为要用到class的一些属性,传递过来的是纯数据,所以需要重新序列化一下
|
||||||
|
let eventData: NodeInfoData = event.data;
|
||||||
const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData);
|
const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData);
|
||||||
treeItemData.value = nodeInfo;
|
treeItemData.value = nodeInfo;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@ -37,7 +42,8 @@ export default defineComponent({
|
|||||||
*/
|
*/
|
||||||
const requestList: Array<{ id: string; cb: Function }> = [];
|
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) {
|
if (requestData.id !== null) {
|
||||||
let findIndex = requestList.findIndex((el) => el.id === requestData.id);
|
let findIndex = requestList.findIndex((el) => el.id === requestData.id);
|
||||||
if (findIndex > -1) {
|
if (findIndex > -1) {
|
||||||
@ -64,6 +70,7 @@ export default defineComponent({
|
|||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.right {
|
.right {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: overlay;
|
overflow-y: overlay;
|
||||||
|
|
||||||
|
@ -98,13 +98,12 @@ export class TestServer {
|
|||||||
add(client: TestClient) {
|
add(client: TestClient) {
|
||||||
this.clients.push(client);
|
this.clients.push(client);
|
||||||
}
|
}
|
||||||
private count: number = 0;
|
public support: boolean = true;
|
||||||
recv(msg: string, data: any) {
|
recv(msg: string, data: any) {
|
||||||
switch (msg) {
|
switch (msg) {
|
||||||
case Msg.RequestSupport: {
|
case Msg.RequestSupport: {
|
||||||
this.count++;
|
|
||||||
const e = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseSupport, {
|
const e = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseSupport, {
|
||||||
support: this.count > 10,
|
support: this.support,
|
||||||
msg: "",
|
msg: "",
|
||||||
} as ResponseSupportData);
|
} as ResponseSupportData);
|
||||||
this.send(e);
|
this.send(e);
|
||||||
|
@ -1,13 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="show" class="test">
|
<div v-if="show" class="test">
|
||||||
<CCSection name="功能测试" :expand="config.expandTest" @change="onExpandTest">
|
<CCSection name="功能测试" :expand="config.expandTest" @change="onExpandTest">
|
||||||
<CCButton @click="onClickHasCocosGame">Has CocosGame</CCButton>
|
<div>
|
||||||
<CCButton @click="onClickNoCocosGame">No CocosGame</CCButton>
|
<CCProp name="tree" align="left">
|
||||||
<CCButton @click="onTestTree">init tree data</CCButton>
|
<CCButton @click="onTestTree1">tree1</CCButton>
|
||||||
<CCButton @click="onFrames">test frame</CCButton>
|
<CCButton @click="onTestTree2">tree2</CCButton>
|
||||||
<CCButton @click="onTestNodeInfo">test node info</CCButton>
|
<CCButton @click="onTestNodeInfo">test node info</CCButton>
|
||||||
<CCButton @click="onNull">test null</CCButton>
|
</CCProp>
|
||||||
<CCButton @click="onTerminal">onTerminal</CCButton>
|
<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>
|
</CCSection>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -18,13 +29,14 @@ import { defineComponent, ref } from "vue";
|
|||||||
import { Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
|
import { Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
|
||||||
import { Terminal } from "../../../scripts/terminal";
|
import { Terminal } from "../../../scripts/terminal";
|
||||||
import { bridge } from "../bridge";
|
import { bridge } from "../bridge";
|
||||||
|
import { Bus, BusMsg } from "../bus";
|
||||||
import { FrameDetails, Group, InvalidData, NodeInfoData, TreeData } from "../data";
|
import { FrameDetails, Group, InvalidData, NodeInfoData, TreeData } from "../data";
|
||||||
import { appStore } from "../store";
|
import { appStore } from "../store";
|
||||||
import { testServer } from "./server";
|
import { testServer } from "./server";
|
||||||
const { CCButton, CCSection } = ccui.components;
|
const { CCButton, CCSection, CCCheckBox, CCProp } = ccui.components;
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "test",
|
name: "test",
|
||||||
components: { CCButton, CCSection },
|
components: { CCButton, CCSection, CCCheckBox, CCProp },
|
||||||
emits: ["validGame"],
|
emits: ["validGame"],
|
||||||
props: {
|
props: {
|
||||||
isCocosGame: { type: Boolean, default: false },
|
isCocosGame: { type: Boolean, default: false },
|
||||||
@ -67,11 +79,12 @@ export default defineComponent({
|
|||||||
config.value.expandTest = v;
|
config.value.expandTest = v;
|
||||||
appStore().save();
|
appStore().save();
|
||||||
},
|
},
|
||||||
onClickHasCocosGame() {
|
|
||||||
emit("validGame", true);
|
onChangeCocosGame(b: boolean) {
|
||||||
|
testServer.support = b;
|
||||||
},
|
},
|
||||||
onClickNoCocosGame() {
|
onChangeTimer(b: boolean) {
|
||||||
emit("validGame", false);
|
Bus.emit(BusMsg.EnableSchedule, b);
|
||||||
},
|
},
|
||||||
onTerminal() {
|
onTerminal() {
|
||||||
const t = new Terminal("flag");
|
const t = new Terminal("flag");
|
||||||
@ -86,12 +99,30 @@ export default defineComponent({
|
|||||||
console.log(...t.blue("blue"));
|
console.log(...t.blue("blue"));
|
||||||
console.log(...t.chunkMessage(event.toChunk()));
|
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 = {
|
const data: TreeData = {
|
||||||
id: "1",
|
id: "1",
|
||||||
text: "root",
|
text: "1",
|
||||||
active: true,
|
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);
|
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
|
||||||
bridge.emit(event);
|
bridge.emit(event);
|
||||||
|
16
cc-inspector/src/views/devtools/timer.ts
Normal file
16
cc-inspector/src/views/devtools/timer.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, PropType } from "vue";
|
import { defineComponent, PropType } from "vue";
|
||||||
import Bus, { BusMsg } from "../bus";
|
import { Bus, BusMsg } from "../bus";
|
||||||
import { EngineData } from "../data";
|
import { EngineData } from "../data";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "property-engine",
|
name: "property-engine",
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, PropType, watch } from "vue";
|
import { defineComponent, PropType, watch } from "vue";
|
||||||
import Bus, { BusMsg } from "../bus";
|
import { Bus, BusMsg } from "../bus";
|
||||||
import { NodeInfoData } from "../data";
|
import { NodeInfoData } from "../data";
|
||||||
import PropertyGroup from "../ui/property-group.vue";
|
import PropertyGroup from "../ui/property-group.vue";
|
||||||
import UiProp from "./ui-prop.vue";
|
import UiProp from "./ui-prop.vue";
|
||||||
|
@ -15,7 +15,7 @@ import ccui from "@xuyanfeng/cc-ui";
|
|||||||
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
|
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
import { defineComponent, ref } from "vue";
|
import { defineComponent, ref } from "vue";
|
||||||
import bus, { BusMsg } from "../bus";
|
import { BusMsg } from "../bus";
|
||||||
import { appStore, RefreshType } from "../store";
|
import { appStore, RefreshType } from "../store";
|
||||||
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCProp, CCColor } = ccui.components;
|
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCProp, CCColor } = ccui.components;
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
@ -34,7 +34,7 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
|
|||||||
import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue";
|
import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue";
|
||||||
import { Msg, RequestSetPropertyData } from "../../../core/types";
|
import { Msg, RequestSetPropertyData } from "../../../core/types";
|
||||||
import { bridge } from "../bridge";
|
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 { EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
|
||||||
import Engine from "./property-engine.vue";
|
import Engine from "./property-engine.vue";
|
||||||
import PropertyImage from "./property-image.vue";
|
import PropertyImage from "./property-image.vue";
|
||||||
|
@ -0,0 +1,6 @@
|
|||||||
|
import { Msg, RequestSupportData } from "../../core/types";
|
||||||
|
import { bridge } from "./bridge";
|
||||||
|
|
||||||
|
export function checkSupport() {
|
||||||
|
bridge.send(Msg.RequestSupport, {} as RequestSupportData);
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user