CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-15 14:41:05 +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/

2
source/.eslintrc.js
View File

@ -35,5 +35,7 @@ module.exports = {
"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;

281
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"
@change="changePosition"
placeholder="itemData.x"
v-model="itemData.x">
</ui-prop>
<ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"
@movestep="changePositionActionY"
step="10">
<!--<span>{{itemData.y}}</span>-->
<input class="myInput"
@change="changePosition"
placeholder="itemData.y"
v-model="itemData.y">
</ui-prop>
</div>
</ui-prop>
<!--旋转-->
<!--rotationX, rotationY暂时舍弃显示-->
<ui-prop name="Rotation">
<span> {{ itemData.rotation }}</span>
<!--<input class="myInput"--> <!--<input class="myInput"-->
<!-- @change="changePosition"--> <!--@change="changeRotation"-->
<!-- placeholder="itemData.x"--> <!--placeholder="itemData.rotation"-->
<!-- v-model="itemData.x">--> <!--v-model="itemData.rotation"-->
<!-- </ui-prop>--> <!--style="width: 98%">-->
<!-- <ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"--> </ui-prop>
<!-- @movestep="changePositionActionY"--> <!--缩放-->
<!-- step="10">--> <ui-prop name="Scale">
<!-- &lt;!&ndash;<span>{{itemData.y}}</span>&ndash;&gt;--> <div style="float: left;width: 100%;">
<!-- <input class="myInput"--> <ui-prop name="X" style="width: 50%;float: left;">
<!-- @change="changePosition"--> <span>{{ itemData.scaleX }}</span>
<!-- placeholder="itemData.y"--> </ui-prop>
<!-- v-model="itemData.y">--> <ui-prop name="Y" style="width: 50%;float:left;">
<!-- </ui-prop>--> <span>{{ itemData.scaleY }}</span>
<!-- </div>--> </ui-prop>
<!-- </ui-prop>--> </div>
<!-- &lt;!&ndash;旋转&ndash;&gt;--> </ui-prop>
<!-- &lt;!&ndash;rotationX, rotationY暂时舍弃显示&ndash;&gt;--> <!--锚点-->
<!-- <ui-prop name="Rotation">--> <ui-prop name="Anchor">
<!-- <span> {{ itemData.rotation }}</span>--> <div style="float: left;width: 100%;">
<!-- &lt;!&ndash;<input class="myInput"&ndash;&gt;--> <ui-prop name="X" style="width: 50%;float: left;">
<!-- &lt;!&ndash;@change="changeRotation"&ndash;&gt;--> <span>{{ itemData.anchorX }}</span>
<!-- &lt;!&ndash;placeholder="itemData.rotation"&ndash;&gt;--> </ui-prop>
<!-- &lt;!&ndash;v-model="itemData.rotation"&ndash;&gt;--> <ui-prop name="Y" style="width: 50%;float:left;">
<!-- &lt;!&ndash;style="width: 98%">&ndash;&gt;--> <span>{{ itemData.anchorY }}</span>
<!-- </ui-prop>--> </ui-prop>
<!-- &lt;!&ndash;缩放&ndash;&gt;--> </div>
<!-- <ui-prop name="Scale">--> </ui-prop>
<!-- <div style="float: left;width: 100%;">--> <!--尺寸-->
<!-- <ui-prop name="X" style="width: 50%;float: left;">--> <ui-prop name="Size">
<!-- <span>{{ itemData.scaleX }}</span>--> <div style="float: left;width: 100%;">
<!-- </ui-prop>--> <ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"
<!-- <ui-prop name="Y" style="width: 50%;float:left;">--> @movestep="changeSizeActionWidth"
<!-- <span>{{ itemData.scaleY }}</span>--> step="10">
<!-- </ui-prop>--> <!--<span>{{itemData.width}}</span>-->
<!-- </div>--> <input class="myInput"
<!-- </ui-prop>--> @change="changeSize"
<!-- &lt;!&ndash;锚点&ndash;&gt;--> placeholder="itemData.width"
<!-- <ui-prop name="Anchor">--> v-model="itemData.width">
<!-- <div style="float: left;width: 100%;">--> </ui-prop>
<!-- <ui-prop name="X" style="width: 50%;float: left;">--> <ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"
<!-- <span>{{ itemData.anchorX }}</span>--> @movestep="changeSizeActionHeight"
<!-- </ui-prop>--> step="10">
<!-- <ui-prop name="Y" style="width: 50%;float:left;">--> <!--<span>{{itemData.height}}</span>-->
<!-- <span>{{ itemData.anchorY }}</span>--> <input class="myInput"
<!-- </ui-prop>--> @change="changeSize"
<!-- </div>--> placeholder="itemData.height"
<!-- </ui-prop>--> v-model="itemData.height">
<!-- &lt;!&ndash;尺寸&ndash;&gt;--> </ui-prop>
<!-- <ui-prop name="Size">--> </div>
<!-- <div style="float: left;width: 100%;">--> </ui-prop>
<!-- <ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"--> <!--透明度-->
<!-- @movestep="changeSizeActionWidth"--> <ui-prop name="Opacity">
<!-- step="10">--> <span>{{ itemData.opacity }}</span>
<!-- &lt;!&ndash;<span>{{itemData.width}}</span>&ndash;&gt;--> </ui-prop>
<!-- <input class="myInput"--> <!--斜切-->
<!-- @change="changeSize"--> <ui-prop name="Skew">
<!-- placeholder="itemData.width"--> <div style="float: left;width: 100%;">
<!-- v-model="itemData.width">--> <ui-prop name="X" style="width: 50%;float: left;">
<!-- </ui-prop>--> <span>{{ itemData.skewX }}</span>
<!-- <ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"--> </ui-prop>
<!-- @movestep="changeSizeActionHeight"--> <ui-prop name="Y" style="width: 50%;float:left;">
<!-- step="10">--> <span>{{ itemData.skewY }}</span>
<!-- &lt;!&ndash;<span>{{itemData.height}}</span>&ndash;&gt;--> </ui-prop>
<!-- <input class="myInput"--> </div>
<!-- @change="changeSize"--> </ui-prop>
<!-- placeholder="itemData.height"--> </div>
<!-- v-model="itemData.height">--> <ui-prop name="zIndex">
<!-- </ui-prop>--> <span>{{ itemData.zIndex }}</span>
<!-- </div>--> </ui-prop>
<!-- </ui-prop>--> <ui-prop name="childrenCount">
<!-- &lt;!&ndash;透明度&ndash;&gt;--> <span>{{ itemData.childrenCount }}</span>
<!-- <ui-prop name="Opacity">--> </ui-prop>
<!-- <span>{{ itemData.opacity }}</span>--> <!--节点状态-->
<!-- </ui-prop>--> <ui-prop name="active">
<!-- &lt;!&ndash;斜切&ndash;&gt;--> <p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
<!-- <ui-prop name="Skew">--> <input type="checkbox"
<!-- <div style="float: left;width: 100%;">--> style="width: 20px;height: 20px;"
<!-- <ui-prop name="X" style="width: 50%;float: left;">--> :checked.sync="itemData.active"
<!-- <span>{{ itemData.skewX }}</span>--> @click="onBtnClickNodeHide">
<!-- </ui-prop>--> 隐藏节点
<!-- <ui-prop name="Y" style="width: 50%;float:left;">--> </p>
<!-- <span>{{ itemData.skewY }}</span>-->
<!-- </ui-prop>-->
<!-- </div>-->
<!-- </ui-prop>-->
<!-- </div>-->
<!-- <ui-prop name="zIndex">-->
<!-- <span>{{ itemData.zIndex }}</span>-->
<!-- </ui-prop>-->
<!-- <ui-prop name="childrenCount">-->
<!-- <span>{{ itemData.childrenCount }}</span>-->
<!-- </ui-prop>-->
<!-- &lt;!&ndash;节点状态&ndash;&gt;-->
<!-- <ui-prop name="active">-->
<!-- <p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">-->
<!-- <input type="checkbox"-->
<!-- style="width: 20px;height: 20px;"-->
<!-- :checked.sync="itemData.active"-->
<!-- @click="onBtnClickNodeHide">-->
<!-- 隐藏节点-->
<!-- </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)
} }
} }