mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-12-08 21:18:45 +00:00
拆分出hierarchy和inspector，便于逻辑维护
This commit is contained in:
xu_yanfeng
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>
|
||||
Reference in New Issue
Block a user