mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-12-08 20:08:45 +00:00
改用定时器刷新数据
This commit is contained in:
xu_yanfeng
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user