CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-13 21:51:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

prop

Browse Source
This commit is contained in:
xyf-mac 2021-04-03 22:45:51 +08:00
parent b928d14688
commit 1078d2b8a9
8 changed files with 173 additions and 14272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
.idea .idea
CocosCreatorInspector/src/build CocosCreatorInspector/src/build
/source/artifacts/ /source/artifacts/
/cc-inspector-v1.2/

6
source/.eslintrc.js
View File

@ -33,7 +33,9 @@ module.exports = {
"no-undef": "off", "no-undef": "off",
"no-debugger": "off", "no-debugger": "off",
"no-unreachable": "off", "no-unreachable": "off",
"@typescript-eslint/no-inferrable-types":"off", "@typescript-eslint/no-inferrable-types": "off",
"@typescript-eslint/ban-types":"off", "@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-explicit-any": "off",
} }
}; };

14099
source/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
source/src/devtools/ccType/ComponentsProperty.vue
View File

@ -28,8 +28,8 @@ export default class ComponentsProperty extends Vue {
name: string = "components"; name: string = "components";
isShowComp: boolean = true; isShowComp: boolean = true;
// @Prop() @Prop()
components = "" components: undefined;
onClickComp() { onClickComp() {
this.isShowComp = !this.isShowComp; this.isShowComp = !this.isShowComp;

283
source/src/devtools/ccType/NodeBaseProperty.vue
View File

@ -1,159 +1,162 @@
<template> <template>
<div id="app"> <div id="app">
<!-- <div>--> <div>
<!-- <ui-prop name="uuid">--> <ui-prop name="uuid">
<!-- <span> {{ itemData.uuid }}</span>--> <span> {{ itemData.uuid }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- <ui-prop name="name">--> <ui-prop name="name">
<!-- <span> {{ itemData.name }}</span>--> <span> {{ itemData.name }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;坐标&ndash;&gt;--> <!--坐标-->
<!-- <ui-prop name="Position">--> <ui-prop name="Position">
<!-- <div style="float: left;width: 100%;">--> <div style="float: left;width: 100%;">
<!-- <ui-prop name="X" style="width: 50%;float: left; cursor: ew-resize;"--> <ui-prop name="X" style="width: 50%;float: left; cursor: ew-resize;"
<!-- @movestep="changePositionActionX"--> @movestep="changePositionActionX"
<!-- step="10">--> step="10">
<!-- &lt;!&ndash;<span>{{itemData.x}}</span>&ndash;&gt;--> <!--<span>{{itemData.x}}</span>-->
<!-- <input class="myInput"--> <input class="myInput"
<!-- @change="changePosition"--> @change="changePosition"
<!-- placeholder="itemData.x"--> placeholder="itemData.x"
<!-- v-model="itemData.x">--> v-model="itemData.x">
<!-- </ui-prop>--> </ui-prop>
<!-- <ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"--> <ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"
<!-- @movestep="changePositionActionY"--> @movestep="changePositionActionY"
<!-- step="10">--> step="10">
<!-- &lt;!&ndash;<span>{{itemData.y}}</span>&ndash;&gt;--> <!--<span>{{itemData.y}}</span>-->
<!-- <input class="myInput"--> <input class="myInput"
<!-- @change="changePosition"--> @change="changePosition"
<!-- placeholder="itemData.y"--> placeholder="itemData.y"
<!-- v-model="itemData.y">--> v-model="itemData.y">
<!-- </ui-prop>--> </ui-prop>
<!-- </div>--> </div>
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;旋转&ndash;&gt;--> <!--旋转-->
<!-- &lt;!&ndash;rotationX, rotationY暂时舍弃显示&ndash;&gt;--> <!--rotationX, rotationY暂时舍弃显示-->
<!-- <ui-prop name="Rotation">--> <ui-prop name="Rotation">
<!-- <span> {{ itemData.rotation }}</span>--> <span> {{ itemData.rotation }}</span>
<!-- &lt;!&ndash;<input class="myInput"&ndash;&gt;--> <!--<input class="myInput"-->
<!-- &lt;!&ndash;@change="changeRotation"&ndash;&gt;--> <!--@change="changeRotation"-->
<!-- &lt;!&ndash;placeholder="itemData.rotation"&ndash;&gt;--> <!--placeholder="itemData.rotation"-->
<!-- &lt;!&ndash;v-model="itemData.rotation"&ndash;&gt;--> <!--v-model="itemData.rotation"-->
<!-- &lt;!&ndash;style="width: 98%">&ndash;&gt;--> <!--style="width: 98%">-->
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;缩放&ndash;&gt;--> <!--缩放-->
<!-- <ui-prop name="Scale">--> <ui-prop name="Scale">
<!-- <div style="float: left;width: 100%;">--> <div style="float: left;width: 100%;">
<!-- <ui-prop name="X" style="width: 50%;float: left;">--> <ui-prop name="X" style="width: 50%;float: left;">
<!-- <span>{{ itemData.scaleX }}</span>--> <span>{{ itemData.scaleX }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- <ui-prop name="Y" style="width: 50%;float:left;">--> <ui-prop name="Y" style="width: 50%;float:left;">
<!-- <span>{{ itemData.scaleY }}</span>--> <span>{{ itemData.scaleY }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- </div>--> </div>
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;锚点&ndash;&gt;--> <!--锚点-->
<!-- <ui-prop name="Anchor">--> <ui-prop name="Anchor">
<!-- <div style="float: left;width: 100%;">--> <div style="float: left;width: 100%;">
<!-- <ui-prop name="X" style="width: 50%;float: left;">--> <ui-prop name="X" style="width: 50%;float: left;">
<!-- <span>{{ itemData.anchorX }}</span>--> <span>{{ itemData.anchorX }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- <ui-prop name="Y" style="width: 50%;float:left;">--> <ui-prop name="Y" style="width: 50%;float:left;">
<!-- <span>{{ itemData.anchorY }}</span>--> <span>{{ itemData.anchorY }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- </div>--> </div>
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;尺寸&ndash;&gt;--> <!--尺寸-->
<!-- <ui-prop name="Size">--> <ui-prop name="Size">
<!-- <div style="float: left;width: 100%;">--> <div style="float: left;width: 100%;">
<!-- <ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"--> <ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"
<!-- @movestep="changeSizeActionWidth"--> @movestep="changeSizeActionWidth"
<!-- step="10">--> step="10">
<!-- &lt;!&ndash;<span>{{itemData.width}}</span>&ndash;&gt;--> <!--<span>{{itemData.width}}</span>-->
<!-- <input class="myInput"--> <input class="myInput"
<!-- @change="changeSize"--> @change="changeSize"
<!-- placeholder="itemData.width"--> placeholder="itemData.width"
<!-- v-model="itemData.width">--> v-model="itemData.width">
<!-- </ui-prop>--> </ui-prop>
<!-- <ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"--> <ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"
<!-- @movestep="changeSizeActionHeight"--> @movestep="changeSizeActionHeight"
<!-- step="10">--> step="10">
<!-- &lt;!&ndash;<span>{{itemData.height}}</span>&ndash;&gt;--> <!--<span>{{itemData.height}}</span>-->
<!-- <input class="myInput"--> <input class="myInput"
<!-- @change="changeSize"--> @change="changeSize"
<!-- placeholder="itemData.height"--> placeholder="itemData.height"
<!-- v-model="itemData.height">--> v-model="itemData.height">
<!-- </ui-prop>--> </ui-prop>
<!-- </div>--> </div>
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;透明度&ndash;&gt;--> <!--透明度-->
<!-- <ui-prop name="Opacity">--> <ui-prop name="Opacity">
<!-- <span>{{ itemData.opacity }}</span>--> <span>{{ itemData.opacity }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;斜切&ndash;&gt;--> <!--斜切-->
<!-- <ui-prop name="Skew">--> <ui-prop name="Skew">
<!-- <div style="float: left;width: 100%;">--> <div style="float: left;width: 100%;">
<!-- <ui-prop name="X" style="width: 50%;float: left;">--> <ui-prop name="X" style="width: 50%;float: left;">
<!-- <span>{{ itemData.skewX }}</span>--> <span>{{ itemData.skewX }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- <ui-prop name="Y" style="width: 50%;float:left;">--> <ui-prop name="Y" style="width: 50%;float:left;">
<!-- <span>{{ itemData.skewY }}</span>--> <span>{{ itemData.skewY }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- </div>--> </div>
<!-- </ui-prop>--> </ui-prop>
<!-- </div>--> </div>
<!-- <ui-prop name="zIndex">--> <ui-prop name="zIndex">
<!-- <span>{{ itemData.zIndex }}</span>--> <span>{{ itemData.zIndex }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- <ui-prop name="childrenCount">--> <ui-prop name="childrenCount">
<!-- <span>{{ itemData.childrenCount }}</span>--> <span>{{ itemData.childrenCount }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;节点状态&ndash;&gt;--> <!--节点状态-->
<!-- <ui-prop name="active">--> <ui-prop name="active">
<!-- <p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">--> <p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
<!-- <input type="checkbox"--> <input type="checkbox"
<!-- style="width: 20px;height: 20px;"--> style="width: 20px;height: 20px;"
<!-- :checked.sync="itemData.active"--> :checked.sync="itemData.active"
<!-- @click="onBtnClickNodeHide">--> @click="onBtnClickNodeHide">
<!-- 隐藏节点--> 隐藏节点
<!-- </p>--> </p>
<!-- <p v-if="!itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">--> <p v-if="!itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
<!-- <input type="checkbox"--> <input type="checkbox"
<!-- style="width: 20px;height: 20px;"--> style="width: 20px;height: 20px;"
<!-- :checked="itemData.active"--> :checked="itemData.active"
<!-- @click="onBtnClickNodeShow"--> @click="onBtnClickNodeShow"
<!-- >--> >
<!-- 显示节点--> 显示节点
<!-- </p>--> </p>
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;颜色&ndash;&gt;--> <!--颜色-->
<!-- <ui-prop name="color">--> <ui-prop name="color">
<!-- <div style="display: flex;flex-direction: row;justify-content: center;">--> <div style="display: flex;flex-direction: row;justify-content: center;">
<!-- <div style="display: flex;flex:1;">--> <div style="display: flex;flex:1;">
<!-- <el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;"--> <el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;"
<!-- @change="changeColor"></el-color-picker>--> @change="changeColor"></el-color-picker>
<!-- </div>--> </div>
<!-- <span style="width: 60px;">{{ itemData.color }}</span>--> <span style="width: 60px;">{{ itemData.color }}</span>
<!-- </div>--> </div>
<!-- </ui-prop>--> </ui-prop>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from "vue" import Vue from "vue"
import {Component, Prop, Emit} from "vue-property-decorator" import {Component, Prop, Emit} from "vue-property-decorator"
import UiProp from './ui-prop.vue' import UiProp from "./ui-prop.vue"
@Component({ @Component({
components: {UiProp}, components: {UiProp},
}) })
export default class NodeBaseProperty extends Vue { export default class NodeBaseProperty extends Vue {
name: string = "node-base" name: string = "node-base"
label: string = ''
@Prop() private data: any = {}; @Prop({default: "label"})
private label?: string | undefined
@Prop()
private itemData: any;
setup() { setup() {
// computed({ // computed({
@ -164,12 +167,8 @@ export default class NodeBaseProperty extends Vue {
} }
created() { created() {
console.error(JSON.stringify(this.data))
} }
itemData: any = {};
changeSizeActionWidth(step: number) { changeSizeActionWidth(step: number) {
let w = parseFloat(this.itemData.width); let w = parseFloat(this.itemData.width);
// this.itemData.width = w + step; // this.itemData.width = w + step;

10
source/src/devtools/ccType/ui-prop.vue
View File

@ -23,11 +23,11 @@ import {Component, Prop} from "vue-property-decorator"
@Component({}) @Component({})
export default class UiProp extends Vue { export default class UiProp extends Vue {
@Prop() @Prop({default: ""})
name: string = ''; name: string | undefined;
@Prop() @Prop({default: 1})
step: number = 1; step: number | undefined;
clientX: number = 0; clientX: number = 0;
@ -43,7 +43,7 @@ export default class UiProp extends Vue {
_onMouseMove(event: MouseEvent) { _onMouseMove(event: MouseEvent) {
let x = event.clientX; let x = event.clientX;
let calcStep = this.step; let calcStep = this.step || 0;
if (x > this.clientX) { if (x > this.clientX) {
calcStep = Math.abs(calcStep); calcStep = Math.abs(calcStep);
} else { } else {

37
source/src/devtools/index.vue
View File

@ -29,10 +29,9 @@
</div> </div>
<div class="right"> <div class="right">
<div class=" bg-purple-light treeInfo"> <div class=" bg-purple-light treeInfo">
<NodeBaseProperty data="treeItemData"></NodeBaseProperty> <NodeBaseProperty :item-data="treeItemData"></NodeBaseProperty>
<SceneProperty v-show="treeItemData.type === 'cc_Scene'"></SceneProperty> <SceneProperty v-show="treeItemData.type === 'cc_Scene'"></SceneProperty>
<ComponentsProperty components.sync="treeItemData.components"></ComponentsProperty> <ComponentsProperty components.sync="treeItemData.components"></ComponentsProperty>
<HelloWorld msg="fsfsfsfsffdqwe"></HelloWorld>
</div> </div>
</div> </div>
@ -49,25 +48,22 @@
// import EvalCode from "./evalCodeString.js"; // import EvalCode from "./evalCodeString.js";
import Vue from "vue"; import Vue from "vue";
import NodeBaseProperty from './ccType/NodeBaseProperty'
import ComponentsProperty from './ccType/ComponentsProperty'
import SceneProperty from './ccType/SceneProperty'
import {Component, Prop} from "vue-property-decorator"; import {Component, Prop} from "vue-property-decorator";
import tree from "element-ui/packages/table/src/store/tree"; import SceneProperty from "@/devtools/ccType/SceneProperty.vue";
import fa from "element-ui/src/locale/lang/fa"; import ComponentsProperty from "@/devtools/ccType/ComponentsProperty.vue";
import HelloWorld from "@/popup/HelloWorld.vue"; import NodeBaseProperty from "@/devtools/ccType/NodeBaseProperty.vue";
const PluginMsg = require("../core/plugin-msg"); const PluginMsg = require("../core/plugin-msg");
@Component({ @Component({
components: { components: {
NodeBaseProperty, ComponentsProperty, SceneProperty, HelloWorld NodeBaseProperty, ComponentsProperty, SceneProperty,
} }
}) })
export default class Index extends Vue { export default class Index extends Vue {
private isShowDebug: boolean = true; private isShowDebug: boolean = true;
treeItemData = {a: 1}; treeItemData: Record<string, any> = {};
treeData = [] treeData: Array<Record<string, any>> = []
bgConn = null// 与background.js的链接 bgConn: chrome.runtime.Port | null = null// 与background.js的链接
// el-tree的渲染key // el-tree的渲染key
defaultProps = { defaultProps = {
@ -80,6 +76,7 @@ export default class Index extends Vue {
performance: {}, performance: {},
console: {}, console: {},
} }
timerID: number = 0;
created() { created() {
this.onTestData(); this.onTestData();
@ -124,6 +121,8 @@ export default class Index extends Vue {
} }
this.treeItemData = { this.treeItemData = {
"uuid": "11",
"name": "name",
"type": "cc_Node", "type": "cc_Node",
"height": 1080.986301369863, "height": 1080.986301369863,
"color": "#fff85f", "color": "#fff85f",
@ -143,7 +142,7 @@ export default class Index extends Vue {
}; };
} }
handleNodeClick(data) { handleNodeClick(data: any) {
// todo 去获取节点信息 // todo 去获取节点信息
// console.log(data); // console.log(data);
let uuid = data.uuid; let uuid = data.uuid;
@ -154,16 +153,16 @@ export default class Index extends Vue {
onChangeWatchState() { onChangeWatchState() {
if (this.watchEveryTime) { if (this.watchEveryTime) {
this.timerID = setInterval(function () { this.timerID = setInterval(() => {
this.onBtnClickUpdateTree(); this.onBtnClickUpdateTree();
}.bind(this), 100); }, 100);
} else { } else {
clearInterval(this.timerID); clearInterval(this.timerID);
} }
} }
_updateTreeView(data) { _updateTreeView(data: any) {
this.treeData = [data.scene]; this.treeData = [data.scene];
return; return;
// 构建树形数据 // 构建树形数据
@ -197,7 +196,7 @@ export default class Index extends Vue {
} }
this.treeData = treeData; this.treeData = treeData;
function dealChildrenNode(rootData, obj) { function dealChildrenNode(rootData: any, obj: any) {
obj["data"] = rootData; obj["data"] = rootData;
obj["uuid"] = rootData.uuid; obj["uuid"] = rootData.uuid;
obj["label"] = rootData.name; obj["label"] = rootData.name;
@ -228,7 +227,7 @@ export default class Index extends Vue {
} }
evalInspectorFunction(funcString, parm) { evalInspectorFunction(funcString: string, parm?: any) {
if (funcString || funcString.length > 0) { if (funcString || funcString.length > 0) {
let injectCode = let injectCode =
`if(window.ccinspector){ `if(window.ccinspector){
@ -306,7 +305,7 @@ export default class Index extends Vue {
this._update37(this.treeData[0], newData[0]); this._update37(this.treeData[0], newData[0]);
} }
_update37(oldTreeNode, newTreeNode) { _update37(oldTreeNode: any, newTreeNode: any) {
debugger debugger
if (!newTreeNode) { if (!newTreeNode) {
return; return;

5
source/src/popup/HelloWorld.vue
View File

@ -9,11 +9,10 @@ import {Component, Prop, Vue} from "vue-property-decorator";
@Component @Component
export default class HelloWorld extends Vue { export default class HelloWorld extends Vue {
@Prop() @Prop({default: ""})
msg = '' msg: string | undefined;
created() { created() {
debugger
console.log(this.msg) console.log(this.msg)
} }
} }