CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-19 08:28:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化prop组件

Browse Source
This commit is contained in:
xuyanfeng 2021-04-04 19:21:17 +08:00
parent f4c1278cde
commit 9694e2722c
4 changed files with 158 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
source/package.json
View File

@ -5,8 +5,8 @@
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-watch": "vue-cli-service build --watch",
"lint": "vue-cli-service lint"
"lint": "vue-cli-service lint",
"build-watch": "vue-cli-service build --watch"
},
"dependencies": {
"@types/fs-extra": "^9.0.9",
@ -37,8 +37,8 @@
"lint-staged": "^9.5.0",
"prettier": "^2.2.1",
"typescript": "~4.1.5",
"vue-template-compiler": "^2.6.11",
"vue-cli-plugin-browser-extension": "latest"
"vue-cli-plugin-browser-extension": "latest",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",

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

@ -19,7 +19,7 @@
import Vue from "vue"
import {Component, Prop} from "vue-property-decorator"
import UiProp from "./ui-prop.vue"
import {DataType} from "../data";
import {DataType, testData} from "../data";
@Component({
components: {UiProp},
@ -27,7 +27,7 @@ import {DataType} from "../data";
export default class NodeBaseProperty extends Vue {
name: string = "node-base"
@Prop()
@Prop({default: () => testData,})
allGroup: Array<Record<string, any>> | undefined;
onClickHeader(group) {
@ -44,83 +44,11 @@ export default class NodeBaseProperty extends Vue {
}
created() {
this.setTestData()
this.allGroup.forEach(item => {
this.$set(item, 'fold', false);
})
}
setTestData() {
this.allGroup = [
{
name: "group1",
data: [
{name: "uuid", value: {type: DataType.String, data: 'abc'}},
{name: "opacity", value: {type: DataType.Number, data: 100}},
{
name: "size",
value: {
type: DataType.Vec2,
data: [
{name: "X", value: {type: DataType.Number, data: 100}},
{name: "Y", value: {type: DataType.Number, data: 200}},
]
}
},
{
name: "position",
value: {
type: DataType.Vec3,
data: [
{name: "X", value: {type: DataType.Number, data: 100}},
{name: "Y", value: {type: DataType.Number, data: 200}},
{name: "Z", value: {type: DataType.Number, data: 300}},
]
}
},
{
name: "layout",
value: {
type: DataType.Enum,
data: 1,
values: [
{name: "horizontal", value: 1},
{name: "vertical", value: 2},
]
}
},
{
name: "text",
value: {
type: DataType.Text,
data: 'aaaaaaaaafsf',
}
}
]
},
{
name: "group2",
data: [
{
name: "bool", value: {
type: DataType.Bool,
data: true,
}
},
{
name: 'color',
value: {
type: DataType.Color,
data: '#ff0000'
}
}
]
},
];
}
changeSizeActionWidth(step: number) {
let w = parseFloat(this.itemData.width);
// this.itemData.width = w + step;

149
source/src/devtools/data.ts Normal file
View File

@ -0,0 +1,149 @@
export enum DataType {
Number,
String,
Text,
Vec2,
Vec3,
Enum,
Bool,
Color,
}
class Info {
public type: DataType = DataType.Number;
}
export class TextData extends Info {
constructor() {
super();
this.type = DataType.Text;
}
}
export class StringData extends Info {
constructor() {
super();
this.type = DataType.String;
}
}
export class NumberData extends Info {
constructor() {
super();
this.type = DataType.Number;
}
}
export class Vec2Data extends Info {
public v1: number = 0;
public v2: number = 0;
constructor(v1: number, v2: number) {
super();
this.type = DataType.Vec2
this.v1 = v1;
this.v2 = v2;
}
}
export class Vec3Data extends Info {
public v1: number = 0;
public v2: number = 0;
public v3: number = 0;
constructor(v1: number, v2: number, v3: number) {
super();
this.type = DataType.Vec3
this.v1 = v1;
this.v2 = v2;
this.v3 = v3;
}
}
export class EnumData extends Info {
constructor() {
super();
this.type = DataType.Enum;
}
}
class NodeInfo {
public type: string = ''; // 类型
}
class CompInfo {
}
export const testData = [
{
name: "group1",
data: [
{name: "uuid", value: {type: DataType.String, data: 'abc'}},
{name: "opacity", value: {type: DataType.Number, data: 100}},
{
name: "size",
value: {
type: DataType.Vec2,
data: [
{name: "X", value: {type: DataType.Number, data: 100}},
{name: "Y", value: {type: DataType.Number, data: 200}},
]
}
},
{
name: "position",
value: {
type: DataType.Vec3,
data: [
{name: "X", value: {type: DataType.Number, data: 100}},
{name: "Y", value: {type: DataType.Number, data: 200}},
{name: "Z", value: {type: DataType.Number, data: 300}},
]
}
},
{
name: "layout",
value: {
type: DataType.Enum,
data: 1,
values: [
{name: "horizontal", value: 1},
{name: "vertical", value: 2},
]
}
},
{
name: "text",
value: {
type: DataType.Text,
data: 'aaaaaaaaafsf',
}
}
]
},
{
name: "group2",
data: [
{
name: "bool", value: {
type: DataType.Bool,
data: true,
}
},
{
name: 'color',
value: {
type: DataType.Color,
data: '#ff0000'
}
}
]
},
];

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

@ -28,13 +28,8 @@
</div>
</div>
<div class="right">
<div class=" bg-purple-light treeInfo">
<NodeBaseProperty :item-data="treeItemData"></NodeBaseProperty>
<SceneProperty v-show="treeItemData.type === 'cc_Scene'"></SceneProperty>
<ComponentsProperty components.sync="treeItemData.components"></ComponentsProperty>
</div>
<NodeBaseProperty :item-data="treeItemData"></NodeBaseProperty>
</div>
</div>
<div v-show="!isShowDebug" class="no-find">
<span>未发现cocos creator的游戏!</span>
@ -421,21 +416,9 @@ export default class Index extends Vue {
.right {
flex: 2;
background: #e5e9f2;
overflow: scroll;
}
}
}
.treeInfo {
height: 100%
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
</style>