prop

.gitignore

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

source/.eslintrc.js

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

source/src/devtools/ccType/ComponentsProperty.vue

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

source/src/devtools/ccType/NodeBaseProperty.vue

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

source/src/devtools/ccType/ui-prop.vue

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

source/src/devtools/index.vue

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

source/src/popup/HelloWorld.vue

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