mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-04-18 07:58:40 +00:00
简单适配完毕
This commit is contained in:
xu_yanfeng
parent
83798ff401
commit
797d75bb2b
10
cc-inspector/.vscode/settings.json
vendored
10
cc-inspector/.vscode/settings.json
vendored
@ -10,5 +10,13 @@
|
||||
"[vue]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"files.refactoring.autoSave": false
|
||||
"files.refactoring.autoSave": false,
|
||||
"search.exclude": {
|
||||
"**/node_modules": true,
|
||||
"**/bower_components": true,
|
||||
"**/*.code-search": true,
|
||||
"chrome": true,
|
||||
"yarn-error.log": true,
|
||||
"yarn.lock": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
"@types/lodash": "^4.14.176",
|
||||
"@types/node": "16.11.12",
|
||||
"@types/uuid": "^8.3.1",
|
||||
"@xuyanfeng/cc-ui": "^0.2.14",
|
||||
"@xuyanfeng/cc-ui": "file:.yalc/@xuyanfeng/cc-ui",
|
||||
"cc-plugin": "file:.yalc/cc-plugin"
|
||||
},
|
||||
"name": "cc-plugin-demo",
|
||||
@ -25,8 +25,8 @@
|
||||
},
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"uuid": "^8.3.2",
|
||||
"lodash": "^4.17.21",
|
||||
"tiny-emitter": "2.1.0",
|
||||
"lodash": "^4.17.21"
|
||||
"uuid": "^8.3.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,9 +26,20 @@ export class Info {
|
||||
constructor() {
|
||||
this.id = v4();
|
||||
}
|
||||
public isEnum(): boolean {
|
||||
return false;
|
||||
}
|
||||
public isEnum(): boolean { return false; }
|
||||
public isVec2(): boolean { return false; }
|
||||
public isVec3(): boolean { return false; }
|
||||
public isBool(): boolean { return false; }
|
||||
public isText(): boolean { return false; }
|
||||
public isString(): boolean { return false; }
|
||||
public isColor(): boolean { return false; }
|
||||
public isInvalid(): boolean { return false; }
|
||||
public isNumber(): boolean { return false; }
|
||||
public isArrayOrObject(): boolean { return false; }
|
||||
public isArray(): boolean { return false; }
|
||||
public isObject(): boolean { return false; }
|
||||
public isImage(): boolean { return false; }
|
||||
public isEngine(): boolean { return false; }
|
||||
}
|
||||
|
||||
export class TextData extends Info {
|
||||
@ -36,6 +47,7 @@ export class TextData extends Info {
|
||||
super();
|
||||
this.type = DataType.Text;
|
||||
}
|
||||
public isText(): boolean { return true; }
|
||||
}
|
||||
|
||||
export interface ObjectItemRequestData {
|
||||
@ -57,6 +69,7 @@ export class EngineData extends Info {
|
||||
super();
|
||||
this.type = DataType.Engine;
|
||||
}
|
||||
public isEngine(): boolean { return true; }
|
||||
}
|
||||
|
||||
export class ArrayData extends Info {
|
||||
@ -71,6 +84,7 @@ export class ArrayData extends Info {
|
||||
this.data.push(info);
|
||||
return this;
|
||||
}
|
||||
public isArray(): boolean { return true; }
|
||||
}
|
||||
|
||||
export class ObjectDataItem extends Info {
|
||||
@ -83,6 +97,7 @@ export class ObjectData extends Info {
|
||||
super();
|
||||
this.type = DataType.Object;
|
||||
}
|
||||
public isObject(): boolean { return true; }
|
||||
}
|
||||
|
||||
export class InvalidData extends Info {
|
||||
@ -93,6 +108,7 @@ export class InvalidData extends Info {
|
||||
this.data = data;
|
||||
this.type = DataType.Invalid;
|
||||
}
|
||||
public isInvalid(): boolean { return true; }
|
||||
}
|
||||
|
||||
export class ColorData extends Info {
|
||||
@ -101,6 +117,7 @@ export class ColorData extends Info {
|
||||
this.type = DataType.Color;
|
||||
this.data = color;
|
||||
}
|
||||
public isColor(): boolean { return true; }
|
||||
}
|
||||
|
||||
export class StringData extends Info {
|
||||
@ -109,6 +126,7 @@ export class StringData extends Info {
|
||||
this.type = DataType.String;
|
||||
this.data = data;
|
||||
}
|
||||
public isString(): boolean { return true; }
|
||||
}
|
||||
|
||||
export class NumberData extends Info {
|
||||
@ -117,6 +135,7 @@ export class NumberData extends Info {
|
||||
this.type = DataType.Number;
|
||||
this.data = data;
|
||||
}
|
||||
public isNumber(): boolean { return true; }
|
||||
}
|
||||
|
||||
export class BoolData extends Info {
|
||||
@ -125,6 +144,7 @@ export class BoolData extends Info {
|
||||
this.type = DataType.Bool;
|
||||
this.data = bol;
|
||||
}
|
||||
public isBool(): boolean { return true; }
|
||||
}
|
||||
|
||||
export class Vec2Data extends Info {
|
||||
@ -141,6 +161,9 @@ export class Vec2Data extends Info {
|
||||
this.data.push(info);
|
||||
return this;
|
||||
}
|
||||
public isVec2(): boolean {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export class Vec3Data extends Info {
|
||||
@ -157,6 +180,9 @@ export class Vec3Data extends Info {
|
||||
this.data.push(info);
|
||||
return this;
|
||||
}
|
||||
public isVec3(): boolean {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export class ImageData extends Info {
|
||||
@ -168,6 +194,7 @@ export class ImageData extends Info {
|
||||
this.data = null;
|
||||
return this;
|
||||
}
|
||||
public isImage(): boolean { return true; }
|
||||
}
|
||||
|
||||
export class EnumData extends Info {
|
||||
|
||||
@ -7,24 +7,18 @@
|
||||
</el-drawer> -->
|
||||
<div class="head" v-show="iframes.length > 1">
|
||||
<div class="label">inspect target:</div>
|
||||
<el-select
|
||||
<CCSelect
|
||||
v-model="frameID"
|
||||
placeholder="please select ..."
|
||||
@change="onChangeFrame"
|
||||
:data="getFramesData()"
|
||||
style="flex: 1"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in iframes"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</CCSelect>
|
||||
</div>
|
||||
<div v-show="isShowDebug" class="find">
|
||||
<div v-if="false">
|
||||
<el-button type="success" @click="onMemoryTest">内存测试</el-button>
|
||||
<CCButton type="success" @click="onMemoryTest">内存测试</CCButton>
|
||||
</div>
|
||||
<div v-if="false">
|
||||
<span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
|
||||
@ -34,30 +28,25 @@
|
||||
<div ref="left" class="left">
|
||||
<div class="tool-btn">
|
||||
<div style="padding-left: 15px; flex: 1">Node Tree</div>
|
||||
<el-button
|
||||
<CCButton
|
||||
v-show="isShowRefreshBtn"
|
||||
type="success"
|
||||
class="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="onBtnClickUpdateTree"
|
||||
></el-button>
|
||||
<el-button
|
||||
@click="onClickSettings"
|
||||
class="el-icon-s-tools"
|
||||
></el-button>
|
||||
></CCButton>
|
||||
<CCButton @click="onClickSettings" class="el-icon-s-tools"></CCButton>
|
||||
</div>
|
||||
<!-- <el-input placeholder="enter keywords to filter" v-model="filterText">
|
||||
<template slot="append">
|
||||
<div class="matchCase">
|
||||
<div
|
||||
class="iconfont el-icon-third-font-size"
|
||||
@click.stop="onChangeCase"
|
||||
title="match case"
|
||||
:style="{ color: matchCase ? 'red' : '' }"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
</el-input> -->
|
||||
<CCInput placeholder="enter keywords to filter" :data="filterText">
|
||||
<slot>
|
||||
<div
|
||||
class="matchCase iconfont el-icon-third-font-size"
|
||||
@click.stop="onChangeCase"
|
||||
title="match case"
|
||||
:style="{ color: matchCase ? 'red' : '' }"
|
||||
></div>
|
||||
</slot>
|
||||
</CCInput>
|
||||
<div class="treeList">
|
||||
<!-- <el-tree
|
||||
:data="treeData"
|
||||
@ -91,19 +80,31 @@
|
||||
</div>
|
||||
<div v-show="!isShowDebug" class="no-find">
|
||||
<span>No games created by cocos creator found!</span>
|
||||
<el-button
|
||||
<CCButton
|
||||
type="success"
|
||||
class="el-icon-refresh"
|
||||
@click="onBtnClickUpdatePage"
|
||||
>刷新</el-button
|
||||
>
|
||||
>刷新
|
||||
</CCButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, onMounted, watch } from "vue";
|
||||
import {
|
||||
defineComponent,
|
||||
PropType,
|
||||
ref,
|
||||
onMounted,
|
||||
watch,
|
||||
toRaw,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import properties from "./ui/propertys.vue";
|
||||
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
|
||||
import ccui from "@xuyanfeng/cc-ui";
|
||||
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
|
||||
ccui.components;
|
||||
import { Msg, Page, PluginEvent } from "../../core/types";
|
||||
import { connectBackground } from "./connectBackground";
|
||||
import {
|
||||
@ -120,30 +121,41 @@ import SettingsVue from "./ui/settings.vue";
|
||||
import { RefreshType, settings } from "./settings";
|
||||
import UiDivider from "./ui/ui-divider.vue";
|
||||
|
||||
interface FrameInfo {
|
||||
label: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: { UiDivider, properties, SettingsVue },
|
||||
name: "devtools",
|
||||
props: {
|
||||
isShowDebug: { type: Boolean, default: false },
|
||||
treeItemData: { type: Object as PropType<NodeInfoData>, default: () => {} },
|
||||
isShowRefreshBtn: { type: Boolean, default: false },
|
||||
showSettings: { type: Boolean, default: false },
|
||||
iframes: {
|
||||
type: Array as PropType<Array<{ label: string; value: number }>>,
|
||||
default: () => [],
|
||||
},
|
||||
frameID: { type: Number, default: 0 },
|
||||
components: {
|
||||
UiDivider,
|
||||
properties,
|
||||
SettingsVue,
|
||||
CCInput,
|
||||
CCButton,
|
||||
CCInputNumber,
|
||||
CCSelect,
|
||||
CCCheckBox,
|
||||
CCColor,
|
||||
},
|
||||
name: "devtools",
|
||||
props: {},
|
||||
setup(props, ctx) {
|
||||
const treeItemData = ref<NodeInfoData | null>({ uuid: "", group: [] });
|
||||
const isShowRefreshBtn = ref<boolean>(false);
|
||||
const showSettings = ref<boolean>(false);
|
||||
const isShowDebug = ref<boolean>(false);
|
||||
const frameID = ref<number>(0);
|
||||
const iframes = ref<Array<FrameInfo>>([]);
|
||||
function _checkSelectedUUID() {
|
||||
if (this.selectedUUID) {
|
||||
const b = this._findUuidInTree(this.treeData, this.selectedUUID);
|
||||
if (selectedUUID) {
|
||||
const b = _findUuidInTree(toRaw(treeData.value), selectedUUID);
|
||||
if (b) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
this.selectedUUID = null;
|
||||
this.treeItemData = null;
|
||||
selectedUUID = null;
|
||||
treeItemData.value = null;
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -193,44 +205,42 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
circle(this.treeData);
|
||||
circle(treeData);
|
||||
|
||||
expandKeys.forEach((key) => {
|
||||
if (!this.expandedKeys.find((el) => el === key)) {
|
||||
this.expandedKeys.push(key);
|
||||
if (!expandedKeys.value.find((el) => el === key)) {
|
||||
expandedKeys.value.push(key);
|
||||
}
|
||||
});
|
||||
// 高亮uuid
|
||||
}
|
||||
|
||||
function _onMsgNodeInfo(eventData: NodeInfoData) {
|
||||
this.isShowDebug = true;
|
||||
this.treeItemData = eventData;
|
||||
isShowDebug.value = true;
|
||||
treeItemData.value = eventData;
|
||||
}
|
||||
|
||||
function _onMsgMemoryInfo(eventData: any) {
|
||||
this.memory = eventData;
|
||||
memory.value = eventData;
|
||||
}
|
||||
|
||||
function _onMsgSupport(isCocosGame: boolean) {
|
||||
this.isShowDebug = isCocosGame;
|
||||
isShowDebug.value = isCocosGame;
|
||||
if (isCocosGame) {
|
||||
syncSettings();
|
||||
this.onBtnClickUpdateTree();
|
||||
onBtnClickUpdateTree();
|
||||
} else {
|
||||
this._clearTimer();
|
||||
this.treeData = [];
|
||||
this.treeItemData = null;
|
||||
this.selectedUUID = null;
|
||||
_clearTimer();
|
||||
treeData.value.length = 0;
|
||||
treeItemData.value = null;
|
||||
selectedUUID = null;
|
||||
}
|
||||
}
|
||||
function _onMsgGetObjectItemData(requestData: ObjectItemRequestData) {
|
||||
if (requestData.id !== null) {
|
||||
let findIndex = this.requestList.findIndex(
|
||||
(el) => el.id === requestData.id
|
||||
);
|
||||
let findIndex = requestList.findIndex((el) => el.id === requestData.id);
|
||||
if (findIndex > -1) {
|
||||
let del = this.requestList.splice(findIndex, 1)[0];
|
||||
let del = requestList.splice(findIndex, 1)[0];
|
||||
del.cb(requestData.data);
|
||||
}
|
||||
}
|
||||
@ -238,17 +248,17 @@ export default defineComponent({
|
||||
|
||||
function _onMsgUpdateFrames(details: FrameDetails[]) {
|
||||
// 先把iframes里面无效的清空了
|
||||
this.iframes = this.iframes.filter((item) => {
|
||||
iframes.value = iframes.value.filter((item) => {
|
||||
details.find((el) => el.frameID === item.value);
|
||||
});
|
||||
|
||||
// 同步配置
|
||||
details.forEach((item) => {
|
||||
let findItem = this.iframes.find((el) => el.value === item.frameID);
|
||||
let findItem = iframes.value.find((el) => el.value === item.frameID);
|
||||
if (findItem) {
|
||||
findItem.label = item.url;
|
||||
} else {
|
||||
this.iframes.push({
|
||||
iframes.value.push({
|
||||
label: item.url,
|
||||
value: item.frameID,
|
||||
});
|
||||
@ -256,12 +266,12 @@ export default defineComponent({
|
||||
});
|
||||
// 第一次获取到frame配置后，自动获取frame数据
|
||||
if (
|
||||
this.frameID === null &&
|
||||
this.iframes.length > 0 &&
|
||||
!this.iframes.find((el) => el.value === this.frameID)
|
||||
frameID === null &&
|
||||
iframes.value.length > 0 &&
|
||||
!iframes.value.find((el) => el.value === frameID.value)
|
||||
) {
|
||||
this.frameID = this.iframes[0].value;
|
||||
this.onChangeFrame();
|
||||
frameID.value = iframes[0].value;
|
||||
onChangeFrame();
|
||||
}
|
||||
}
|
||||
|
||||
@ -279,7 +289,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
// 更新指定uuid节点的tree的name
|
||||
circle(this.treeData);
|
||||
circle(treeData.value);
|
||||
let ret = treeArray.find((el) => el.uuid === uuid);
|
||||
if (ret) {
|
||||
if (key === "name") {
|
||||
@ -317,29 +327,32 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
}
|
||||
const elTree = ref<HTMLElement>();
|
||||
function _onMsgTreeInfo(treeData: Array<TreeData>) {
|
||||
this.isShowDebug = true;
|
||||
isShowDebug.value = true;
|
||||
if (!Array.isArray(treeData)) {
|
||||
treeData = [treeData];
|
||||
}
|
||||
this.treeData = treeData;
|
||||
if (this._checkSelectedUUID()) {
|
||||
this.updateNodeInfo();
|
||||
this.$nextTick(() => {
|
||||
//@ts-ignore
|
||||
this.$refs.tree.setCurrentKey(this.selectedUUID);
|
||||
treeData = treeData;
|
||||
if (_checkSelectedUUID()) {
|
||||
updateNodeInfo();
|
||||
nextTick(() => {
|
||||
if (elTree.value) {
|
||||
//@ts-ignore
|
||||
elTree.value.setCurrentKey(selectedUUID);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
function _initChromeRuntimeConnect() {
|
||||
const msgFunctionMap: Record<string, Function> = {};
|
||||
msgFunctionMap[Msg.TreeInfo] = this._onMsgTreeInfo;
|
||||
msgFunctionMap[Msg.Support] = this._onMsgSupport;
|
||||
msgFunctionMap[Msg.NodeInfo] = this._onMsgNodeInfo;
|
||||
msgFunctionMap[Msg.MemoryInfo] = this._onMsgMemoryInfo;
|
||||
msgFunctionMap[Msg.UpdateProperty] = this._onMsgUpdateProperty;
|
||||
msgFunctionMap[Msg.UpdateFrames] = this._onMsgUpdateFrames;
|
||||
msgFunctionMap[Msg.GetObjectItemData] = this._onMsgGetObjectItemData;
|
||||
msgFunctionMap[Msg.TreeInfo] = _onMsgTreeInfo;
|
||||
msgFunctionMap[Msg.Support] = _onMsgSupport;
|
||||
msgFunctionMap[Msg.NodeInfo] = _onMsgNodeInfo;
|
||||
msgFunctionMap[Msg.MemoryInfo] = _onMsgMemoryInfo;
|
||||
msgFunctionMap[Msg.UpdateProperty] = _onMsgUpdateProperty;
|
||||
msgFunctionMap[Msg.UpdateFrames] = _onMsgUpdateFrames;
|
||||
msgFunctionMap[Msg.GetObjectItemData] = _onMsgGetObjectItemData;
|
||||
// 接收来自background.js的消息数据
|
||||
connectBackground.onBackgroundMessage(
|
||||
(data: PluginEvent, sender: any) => {
|
||||
@ -418,20 +431,20 @@ export default defineComponent({
|
||||
|
||||
function onEnableTreeWatch(watch: boolean, time = 300) {
|
||||
if (watch) {
|
||||
this._clearTimer();
|
||||
this.timerID = setInterval(() => {
|
||||
this.onBtnClickUpdateTree();
|
||||
_clearTimer();
|
||||
timerID = setInterval(() => {
|
||||
onBtnClickUpdateTree();
|
||||
}, time);
|
||||
} else {
|
||||
this._clearTimer();
|
||||
_clearTimer();
|
||||
}
|
||||
}
|
||||
let timerID: number | null = null;
|
||||
let timerID: NodeJS.Timer | null = null;
|
||||
|
||||
function _clearTimer() {
|
||||
if (this.timerID !== null) {
|
||||
clearInterval(this.timerID);
|
||||
this.timerID = null;
|
||||
if (timerID !== null) {
|
||||
clearInterval(timerID);
|
||||
timerID = null;
|
||||
}
|
||||
}
|
||||
function syncSettings() {
|
||||
@ -439,46 +452,71 @@ export default defineComponent({
|
||||
const { refreshType, refreshTime } = settings.data;
|
||||
switch (refreshType) {
|
||||
case RefreshType.Auto: {
|
||||
this.isShowRefreshBtn = false;
|
||||
this.onEnableTreeWatch(true, refreshTime);
|
||||
isShowRefreshBtn.value = false;
|
||||
onEnableTreeWatch(true, refreshTime);
|
||||
break;
|
||||
}
|
||||
case RefreshType.Manual: {
|
||||
this.isShowRefreshBtn = true;
|
||||
this.onEnableTreeWatch(false);
|
||||
isShowRefreshBtn.value = true;
|
||||
onEnableTreeWatch(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateNodeInfo() {
|
||||
if (this.selectedUUID) {
|
||||
sendMsgToContentScript(Msg.NodeInfo, this.selectedUUID);
|
||||
if (selectedUUID) {
|
||||
sendMsgToContentScript(Msg.NodeInfo, selectedUUID);
|
||||
}
|
||||
}
|
||||
let selectedUUID: string | null = null;
|
||||
function updateFilterText(val: any) {
|
||||
(this.$refs?.tree as any)?.filter(val);
|
||||
(elTree.value as any)?.filter(val);
|
||||
}
|
||||
function onBtnClickUpdateTree() {
|
||||
sendMsgToContentScript(Msg.TreeInfo, frameID);
|
||||
}
|
||||
function onChangeFrame() {
|
||||
sendMsgToContentScript(Msg.UseFrame, frameID);
|
||||
}
|
||||
const elLeft = ref<HTMLDivElement>();
|
||||
return {
|
||||
elTree,
|
||||
memory,
|
||||
defaultProps,
|
||||
filterText,
|
||||
matchCase,
|
||||
iframes,
|
||||
isShowDebug,
|
||||
showSettings,
|
||||
isShowRefreshBtn,
|
||||
expandedKeys,
|
||||
treeData,
|
||||
treeItemData,
|
||||
frameID,
|
||||
getFramesData(): Option[] {
|
||||
const frames: FrameInfo[] = toRaw(iframes.value);
|
||||
const options: Option[] = [];
|
||||
frames.forEach((frame) => {
|
||||
options.push({
|
||||
label: frame.label,
|
||||
value: frame.value,
|
||||
});
|
||||
});
|
||||
return options;
|
||||
},
|
||||
onChangeCase() {
|
||||
this.matchCase = !this.matchCase;
|
||||
updateFilterText(this.filterText);
|
||||
matchCase.value = !matchCase.value;
|
||||
updateFilterText(filterText);
|
||||
},
|
||||
handleNodeClick(data: TreeData) {
|
||||
this.selectedUUID = data.uuid;
|
||||
this.updateNodeInfo();
|
||||
selectedUUID = data.uuid;
|
||||
updateNodeInfo();
|
||||
},
|
||||
filterNode(value: any, data: any) {
|
||||
if (!value) {
|
||||
return true;
|
||||
} else {
|
||||
if (this.matchCase) {
|
||||
if (matchCase) {
|
||||
// 严格匹配大写
|
||||
return data?.name?.indexOf(value) !== -1;
|
||||
} else {
|
||||
@ -489,7 +527,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
onDividerMove(event: MouseEvent) {
|
||||
const leftDiv: HTMLDivElement = this.$refs.left as HTMLDivElement;
|
||||
const leftDiv: HTMLDivElement = elLeft.value as HTMLDivElement;
|
||||
if (leftDiv) {
|
||||
let width = leftDiv.clientWidth;
|
||||
width += event.movementX;
|
||||
@ -498,9 +536,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
},
|
||||
onBtnClickUpdateTree() {
|
||||
sendMsgToContentScript(Msg.TreeInfo, this.frameID);
|
||||
},
|
||||
onBtnClickUpdateTree,
|
||||
|
||||
onBtnClickUpdatePage() {
|
||||
sendMsgToContentScript(Msg.Support);
|
||||
@ -513,22 +549,19 @@ export default defineComponent({
|
||||
sendMsgToContentScript(Msg.MemoryInfo);
|
||||
},
|
||||
onClickSettings() {
|
||||
this.showSettings = true;
|
||||
},
|
||||
onChangeFrame() {
|
||||
sendMsgToContentScript(Msg.UseFrame, this.frameID);
|
||||
showSettings.value = true;
|
||||
},
|
||||
onChangeFrame,
|
||||
onNodeExpand(data: TreeData) {
|
||||
if (data.hasOwnProperty("uuid") && data.uuid) {
|
||||
this.expandedKeys.push(data.uuid);
|
||||
expandedKeys.value.push(data.uuid);
|
||||
}
|
||||
},
|
||||
|
||||
onNodeCollapse(data: TreeData) {
|
||||
if (data.hasOwnProperty("uuid")) {
|
||||
let index = this.expandedKeys.findIndex((el) => el === data.uuid);
|
||||
let index = expandedKeys.value.findIndex((el) => el === data.uuid);
|
||||
if (index !== -1) {
|
||||
this.expandedKeys.splice(index, 1);
|
||||
expandedKeys.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -538,7 +571,6 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../index.less";
|
||||
|
||||
#devtools {
|
||||
display: flex;
|
||||
|
||||
@ -13,14 +13,14 @@
|
||||
<div style="flex: 1">
|
||||
{{ group.name }}
|
||||
</div>
|
||||
<el-button
|
||||
<CCButton
|
||||
style="margin-right: 10px"
|
||||
v-show="showLogBtn"
|
||||
type="success"
|
||||
icon="el-icon-chat-dot-round"
|
||||
@click.stop="onLog"
|
||||
>
|
||||
</el-button>
|
||||
</CCButton>
|
||||
</div>
|
||||
<div class="content" v-show="!fold">
|
||||
<ui-prop
|
||||
@ -39,10 +39,20 @@ import { defineComponent, ref, PropType } from "vue";
|
||||
import { Group } from "../data";
|
||||
import UiProp from "./ui-prop.vue";
|
||||
import Bus, { BusMsg } from "../bus";
|
||||
|
||||
import ccui from "@xuyanfeng/cc-ui";
|
||||
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
|
||||
ccui.components;
|
||||
export default defineComponent({
|
||||
name: "property-group",
|
||||
components: { UiProp },
|
||||
components: {
|
||||
UiProp,
|
||||
CCInput,
|
||||
CCButton,
|
||||
CCInputNumber,
|
||||
CCSelect,
|
||||
CCCheckBox,
|
||||
CCColor,
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: Object as PropType<Group>,
|
||||
|
||||
@ -1,33 +1,23 @@
|
||||
<template>
|
||||
<div class="settings">
|
||||
<settings-prop label="refresh">
|
||||
<el-select v-model="refreshType" @change="onCommonSave" style="flex: 1">
|
||||
<el-option
|
||||
v-for="item in refreshOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<CCSelect
|
||||
v-model="refreshType"
|
||||
:data="refreshOptions"
|
||||
@change="onCommonSave"
|
||||
style="flex: 1"
|
||||
>
|
||||
</CCSelect>
|
||||
</settings-prop>
|
||||
<settings-prop label="refresh time: " v-show="isRefreshAuto()">
|
||||
<el-input-number
|
||||
<CCInputNumber
|
||||
style="flex: 1"
|
||||
:min="100"
|
||||
v-model="refreshTime"
|
||||
@change="onCommonSave"
|
||||
></el-input-number>
|
||||
></CCInputNumber>
|
||||
<span>ms</span>
|
||||
</settings-prop>
|
||||
|
||||
<!-- <el-dropdown>-->
|
||||
<!-- <span>refresh</span>-->
|
||||
<!-- <el-dropdown-menu slot="dropdown">-->
|
||||
<!-- <el-dropdown-item>auto</el-dropdown-item>-->
|
||||
<!-- <el-dropdown-item>Manual</el-dropdown-item>-->
|
||||
<!-- </el-dropdown-menu>-->
|
||||
<!-- </el-dropdown>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -35,13 +25,24 @@
|
||||
import { defineComponent, onMounted, ref, toRaw } from "vue";
|
||||
import { RefreshType, settings } from "../settings";
|
||||
import SettingsProp from "./settings-prop.vue";
|
||||
|
||||
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
|
||||
import ccui from "@xuyanfeng/cc-ui";
|
||||
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
|
||||
ccui.components;
|
||||
export default defineComponent({
|
||||
name: "settings",
|
||||
components: { SettingsProp },
|
||||
components: {
|
||||
SettingsProp,
|
||||
CCInput,
|
||||
CCButton,
|
||||
CCInputNumber,
|
||||
CCSelect,
|
||||
CCCheckBox,
|
||||
CCColor,
|
||||
},
|
||||
props: {},
|
||||
setup(props, ctx) {
|
||||
const refreshOptions = ref<Array<{ label: string; value: RefreshType }>>([
|
||||
const refreshOptions = ref<Array<Option>>([
|
||||
{ label: "auto", value: RefreshType.Auto },
|
||||
{ label: "manual", value: RefreshType.Manual },
|
||||
]);
|
||||
|
||||
@ -27,29 +27,30 @@
|
||||
>
|
||||
</i>
|
||||
<div class="text" ref="propText">
|
||||
<el-popover
|
||||
<!-- 使用CCProp -->
|
||||
<!-- <el-popover
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
:disabled="!isShowTooltip()"
|
||||
>
|
||||
<div>{{ name }}</div>
|
||||
<span>{{ name }}</span>
|
||||
</el-popover>
|
||||
</el-popover> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div v-if="isInvalid()" class="invalid">
|
||||
<div v-if="value.isInvalid()" class="invalid">
|
||||
{{ value.data }}
|
||||
</div>
|
||||
<el-input
|
||||
v-if="isString()"
|
||||
<CCInput
|
||||
v-if="value.isString()"
|
||||
v-model="value.data"
|
||||
:disabled="value.readonly"
|
||||
@change="onChangeValue"
|
||||
>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-if="isText()"
|
||||
</CCInput>
|
||||
<CCInput
|
||||
v-if="value.isText()"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 5 }"
|
||||
placeholder="请输入内容"
|
||||
@ -57,18 +58,18 @@
|
||||
@change="onChangeValue"
|
||||
v-model="value.data"
|
||||
>
|
||||
</el-input>
|
||||
<el-input-number
|
||||
v-if="isNumber()"
|
||||
</CCInput>
|
||||
<CCInputNumber
|
||||
v-if="value.isNumber()"
|
||||
style="width: 100%; text-align: left"
|
||||
v-model="value.data"
|
||||
:step="step"
|
||||
:disabled="value.readonly"
|
||||
@change="onChangeValue"
|
||||
controls-position="right"
|
||||
></el-input-number>
|
||||
></CCInputNumber>
|
||||
|
||||
<div v-if="isVec2() || isVec3()" class="vec">
|
||||
<div v-if="value.isVec2() || value.isVec3()" class="vec">
|
||||
<ui-prop
|
||||
v-for="(vec, index) in value.data"
|
||||
:key="index"
|
||||
@ -78,47 +79,37 @@
|
||||
>
|
||||
</ui-prop>
|
||||
</div>
|
||||
<el-select
|
||||
<CCSelect
|
||||
v-model="value.data"
|
||||
:disabled="value.readonly"
|
||||
v-if="isEnum()"
|
||||
:data="getEnumValues(value)"
|
||||
v-if="value.isEnum()"
|
||||
style="width: 100%"
|
||||
@change="onChangeValue"
|
||||
>
|
||||
<el-option
|
||||
v-for="(opt, index) in value.values"
|
||||
:key="index"
|
||||
:label="opt.name"
|
||||
:value="opt.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-checkbox
|
||||
</CCSelect>
|
||||
<CCCheckBox
|
||||
v-model="value.data"
|
||||
v-if="isBool()"
|
||||
v-if="value.isBool()"
|
||||
:disabled="value.readonly"
|
||||
@change="onChangeValue"
|
||||
>
|
||||
</el-checkbox>
|
||||
<div class="color" v-if="isColor()">
|
||||
<el-color-picker
|
||||
</CCCheckBox>
|
||||
<div class="color" v-if="value.isColor()">
|
||||
<CCColor
|
||||
style="position: absolute"
|
||||
:disabled="value.readonly"
|
||||
v-model="value.data"
|
||||
@change="onChangeValue"
|
||||
>
|
||||
</el-color-picker>
|
||||
</CCColor>
|
||||
<div class="hex" :style="{ color: colorReverse(value.data) }">
|
||||
{{ value.data }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-if="isArrayOrObject()" class="array-object">-->
|
||||
<!-- <div class="text">-->
|
||||
<!-- </div>-->
|
||||
<!-- <el-button @click="onShowValueInConsole">log</el-button>-->
|
||||
<!-- </div>-->
|
||||
<div v-if="isImage()" class="image-property">
|
||||
<el-popover v-if="isImage()" placement="top" trigger="hover">
|
||||
<div v-if="value.isImage()" class="image-property">
|
||||
<!-- TODO: 适配 -->
|
||||
<div v-if="value.isImage() || true" placement="top" trigger="hover">
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
@ -136,27 +127,29 @@
|
||||
/>
|
||||
</div>
|
||||
<img :src="value.data" style="height: 36px" alt="图片" />
|
||||
</el-popover>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; flex-direction: row-reverse">
|
||||
<el-button @click="onShowValueInConsole">log</el-button>
|
||||
<CCButton @click="onShowValueInConsole">log</CCButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isEngine()" class="engine">
|
||||
<div v-if="value.isEngine()" class="engine">
|
||||
<div class="head">
|
||||
<i class="icon" :class="getEngineTypeIcon()"></i>
|
||||
<div class="type">{{ value.engineType }}</div>
|
||||
<div class="type">{{ value["engineType"] }}</div>
|
||||
</div>
|
||||
<div class="name">{{ value.engineName }}</div>
|
||||
<el-button
|
||||
<div class="name">{{ value["engineName"] }}</div>
|
||||
<CCButton
|
||||
@click="onPlaceInTree"
|
||||
type="primary"
|
||||
icon="el-icon-place"
|
||||
></el-button>
|
||||
></CCButton>
|
||||
</div>
|
||||
<div v-if="isObject() && fold" class="objectDesc">
|
||||
<div v-if="value.isObject() && fold" class="objectDesc">
|
||||
{{ value.data }}
|
||||
</div>
|
||||
<div v-if="isArray()" class="array">Array({{ value.data.length }})</div>
|
||||
<div v-if="value.isArray()" class="array">
|
||||
Array({{ value.data.length }})
|
||||
</div>
|
||||
<div class="slot" v-if="false">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@ -172,7 +165,7 @@
|
||||
:key="index"
|
||||
:indent="indent + 1"
|
||||
:value="arr.value"
|
||||
:name="getName(isArray(), arr)"
|
||||
:name="getName(value.isArray(), arr)"
|
||||
>
|
||||
</ui-prop>
|
||||
</div>
|
||||
@ -194,109 +187,98 @@ import { DataType, EngineData, EnumData, Info, Property } from "../data";
|
||||
import { connectBackground } from "../connectBackground";
|
||||
import { Msg } from "../../../core/types";
|
||||
import Bus, { BusMsg } from "../bus";
|
||||
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
|
||||
import ccui from "@xuyanfeng/cc-ui";
|
||||
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
|
||||
ccui.components;
|
||||
|
||||
export default defineComponent({
|
||||
name: "UiProp",
|
||||
components: {
|
||||
CCInput,
|
||||
CCButton,
|
||||
CCInputNumber,
|
||||
CCSelect,
|
||||
CCCheckBox,
|
||||
CCColor,
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
indent: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
name: { type: String, default: "" },
|
||||
indent: { type: Number, default: 0 },
|
||||
arrow: { type: Boolean, default: true },
|
||||
step: { type: Number, default: 1 },
|
||||
value: {
|
||||
type: Object as PropType<Info | EngineData | EnumData>,
|
||||
default: () => {},
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
},
|
||||
|
||||
setup(props, ctx) {
|
||||
setup(props, { emit }) {
|
||||
const { value, step } = props;
|
||||
const fold = ref(true);
|
||||
let clientX: number = 0;
|
||||
|
||||
onMounted(() => {
|
||||
watchValue();
|
||||
});
|
||||
function watchValue() {
|
||||
this.fold = true;
|
||||
if (this.isArray()) {
|
||||
this.subData = this.value.data;
|
||||
fold.value = true;
|
||||
if (value.isArray()) {
|
||||
subData.value = value.data;
|
||||
} else {
|
||||
this.subData = null;
|
||||
subData.value = null;
|
||||
}
|
||||
}
|
||||
const fold = ref(true);
|
||||
watch(props.value, () => {
|
||||
watchValue();
|
||||
});
|
||||
const subData = ref<Property[]>([]);
|
||||
const propText = ref<HTMLDivElement>();
|
||||
|
||||
function _onMouseMove(event: MouseEvent) {
|
||||
let x = event.clientX;
|
||||
let calcStep = step || 0;
|
||||
if (x > clientX) {
|
||||
calcStep = Math.abs(calcStep);
|
||||
} else {
|
||||
calcStep = -Math.abs(calcStep);
|
||||
}
|
||||
emit("movestep", calcStep);
|
||||
clientX = x;
|
||||
}
|
||||
|
||||
function _onMouseUp(event: MouseEvent) {
|
||||
document.removeEventListener("mousemove", _onMouseMove);
|
||||
document.removeEventListener("mouseup", _onMouseUp);
|
||||
document.removeEventListener("onselectstart", _onSelect);
|
||||
}
|
||||
function _onSelect() {
|
||||
return false;
|
||||
}
|
||||
return {
|
||||
fold,
|
||||
propText,
|
||||
subData,
|
||||
isInvalid() {
|
||||
return this.value && this.value.type === DataType.Invalid;
|
||||
},
|
||||
isString() {
|
||||
return this.value && this.value.type === DataType.String;
|
||||
},
|
||||
isText() {
|
||||
return this.value && this.value.type === DataType.Text;
|
||||
},
|
||||
isNumber() {
|
||||
return this.value && this.value.type === DataType.Number;
|
||||
},
|
||||
isVec2() {
|
||||
return this.value && this.value.type === DataType.Vec2;
|
||||
},
|
||||
isVec3() {
|
||||
return this.value && this.value.type === DataType.Vec3;
|
||||
},
|
||||
isEnum() {
|
||||
return this.value && this.value.type === DataType.Enum;
|
||||
},
|
||||
isBool() {
|
||||
return this.value && this.value.type === DataType.Bool;
|
||||
},
|
||||
isColor() {
|
||||
return this.value && this.value.type === DataType.Color;
|
||||
getEnumValues(data: any): Option[] {
|
||||
const value: EnumData = data;
|
||||
const ret: Option[] = [];
|
||||
value.values.map((item) => {
|
||||
ret.push({
|
||||
label: item.name,
|
||||
value: item.value,
|
||||
});
|
||||
});
|
||||
return ret;
|
||||
},
|
||||
isArrayOrObject() {
|
||||
return (
|
||||
this.value &&
|
||||
(this.value.type === DataType.Array ||
|
||||
this.value.type === DataType.Object)
|
||||
);
|
||||
},
|
||||
isObject() {
|
||||
return this.value && this.value.type === DataType.Object;
|
||||
},
|
||||
isArray() {
|
||||
return this.value && this.value.type === DataType.Array;
|
||||
},
|
||||
isImage() {
|
||||
return this.value && this.value.type === DataType.Image;
|
||||
return value && (value.isArray() || value.isObject());
|
||||
},
|
||||
isImageValid() {
|
||||
return !!this.value.data;
|
||||
},
|
||||
isEngine() {
|
||||
return this.value && this.value.type === DataType.Engine;
|
||||
return !!value.data;
|
||||
},
|
||||
onPlaceInTree() {
|
||||
Bus.emit(BusMsg.ShowPlace, this.value);
|
||||
Bus.emit(BusMsg.ShowPlace, value);
|
||||
},
|
||||
isShowTooltip() {
|
||||
const el: HTMLDivElement = this.$refs.propText as HTMLDivElement;
|
||||
const el: HTMLDivElement = propText.value as HTMLDivElement;
|
||||
if (el) {
|
||||
if (el.scrollWidth > el.offsetWidth) {
|
||||
// 出现了省略号
|
||||
@ -306,8 +288,7 @@ export default defineComponent({
|
||||
return false;
|
||||
},
|
||||
getEngineTypeIcon() {
|
||||
const value = this.value as EngineData;
|
||||
switch (value.engineType) {
|
||||
switch ((value as EngineData).engineType) {
|
||||
case "cc_Sprite": {
|
||||
return "el-icon-picture-outline";
|
||||
}
|
||||
@ -329,21 +310,20 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
onClickFold() {
|
||||
if (this.isObject() && this.fold && !this.subData) {
|
||||
if (value.isObject() && fold && !subData) {
|
||||
// 请求object的item数据
|
||||
Bus.emit(BusMsg.RequestObjectData, this.value, (info: Property[]) => {
|
||||
this.fold = false;
|
||||
this.subData = info;
|
||||
Bus.emit(BusMsg.RequestObjectData, value, (info: Property[]) => {
|
||||
fold.value = false;
|
||||
subData.value = info;
|
||||
});
|
||||
} else {
|
||||
this.fold = !this.fold;
|
||||
fold.value = !fold.value;
|
||||
}
|
||||
},
|
||||
|
||||
onShowValueInConsole() {
|
||||
if (Array.isArray(this.value.path)) {
|
||||
let uuid = this.value.path[0];
|
||||
let key = this.value.path[1]; // todo 暂时只支持一级key
|
||||
if (Array.isArray(value.path)) {
|
||||
let uuid = value.path[0];
|
||||
let key = value.path[1]; // todo 暂时只支持一级key
|
||||
if (uuid && key) {
|
||||
chrome.devtools.inspectedWindow.eval(
|
||||
`window.CCInspector.logValue('${uuid}','${key}')`
|
||||
@ -351,46 +331,24 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onChangeValue() {
|
||||
if (!this.value.readonly) {
|
||||
connectBackground.postMessageToBackground(
|
||||
Msg.SetProperty,
|
||||
this.value
|
||||
);
|
||||
if (!value.readonly) {
|
||||
connectBackground.postMessageToBackground(Msg.SetProperty, value);
|
||||
}
|
||||
},
|
||||
onPropNameMouseDown(event: MouseEvent) {
|
||||
document.addEventListener("mousemove", this._onMouseMove);
|
||||
document.addEventListener("mouseup", this._onMouseUp);
|
||||
document.addEventListener("onselectstart", this._onSelect);
|
||||
document.addEventListener("mousemove", _onMouseMove);
|
||||
document.addEventListener("mouseup", _onMouseUp);
|
||||
document.addEventListener("onselectstart", _onSelect);
|
||||
},
|
||||
|
||||
colorReverse(OldColorValue: string) {
|
||||
OldColorValue = "0x" + OldColorValue.replace(/#/g, "");
|
||||
var str = "000000" + (0xffffff - parseInt(OldColorValue)).toString(16);
|
||||
return "#" + str.substring(str.length - 6, str.length);
|
||||
},
|
||||
_onMouseMove(event: MouseEvent) {
|
||||
let x = event.clientX;
|
||||
let calcStep = this.step || 0;
|
||||
if (x > this.clientX) {
|
||||
calcStep = Math.abs(calcStep);
|
||||
} else {
|
||||
calcStep = -Math.abs(calcStep);
|
||||
}
|
||||
this.$emit("movestep", calcStep);
|
||||
this.clientX = x;
|
||||
},
|
||||
|
||||
_onMouseUp(event: MouseEvent) {
|
||||
document.removeEventListener("mousemove", this._onMouseMove);
|
||||
document.removeEventListener("mouseup", this._onMouseUp);
|
||||
document.removeEventListener("onselectstart", this._onSelect);
|
||||
},
|
||||
_onSelect() {
|
||||
return false;
|
||||
},
|
||||
_onMouseMove,
|
||||
_onMouseUp,
|
||||
_onSelect,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<div class="head">
|
||||
<div class="name">{{ title }}</div>
|
||||
<div style="flex: 1"></div>
|
||||
<el-button
|
||||
<CCButton
|
||||
class="el-icon-setting btn"
|
||||
@click="onClickOptions"
|
||||
></el-button>
|
||||
></CCButton>
|
||||
</div>
|
||||
|
||||
<div class="wechat">
|
||||
@ -43,9 +43,12 @@
|
||||
import { defineComponent, onMounted, ref, provide, nextTick } from "vue";
|
||||
import CCP from "cc-plugin/src/ccp/entry-render";
|
||||
import { ChromeConst } from "cc-plugin/src/chrome/const";
|
||||
import ccui from "@xuyanfeng/cc-ui";
|
||||
const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } =
|
||||
ccui.components;
|
||||
export default defineComponent({
|
||||
name: "popup",
|
||||
components: {},
|
||||
components: {CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor},
|
||||
setup(props, ctx) {
|
||||
const title = ref(CCP.manifest.name);
|
||||
const version = ref(CCP.manifest.version);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user