readonly

source/src/devtools/data.ts

@@ -15,6 +15,7 @@ export enum DataType {
 export class Info {
   public type: DataType = DataType.Number;
   public data: any;
+  public readonly: boolean = false;
   public path: Array<string> = [];// 属性对应的路径
 }
 

source/src/devtools/inject.ts

@@ -192,7 +192,8 @@ class CCInspector {
     return null;
   }
 
-  _genInfoData(propertyValue: any, path: any) {
+  _genInfoData(node: any, key: string, path: any) {
+    let propertyValue = node[key];
     let info = null;
     switch (typeof propertyValue) {
       case "boolean":
@@ -220,6 +221,7 @@ class CCInspector {
         break;
     }
     if (info) {
+      info.readonly = this._isReadonly(node, key)
       info.path = path;
     } else {
       console.error(`暂不支持的属性值`, propertyValue);
@@ -256,7 +258,7 @@ class CCInspector {
         pairValues.forEach((el: string) => {
           if (el in node) {
             let propertyPath = [node.uuid, el];
-            let vecData = this._genInfoData(node[el], propertyPath);
+            let vecData = this._genInfoData(node, el, propertyPath);
             if (vecData) {
               info && info.add(new Property(el, vecData));
             }
@@ -273,7 +275,7 @@ class CCInspector {
         }
       } else {
         let propertyPath = [node.uuid, key];
-        let info = this._genInfoData(propertyValue, propertyPath);
+        let info = this._genInfoData(node, key, propertyPath);
         if (info) {
           nodeGroup.addProperty(new Property(key, info));
         }
@@ -314,22 +316,26 @@ class CCInspector {
     }
   }
 
+  _isReadonly(base: Object, key: string): boolean {
+    let obj = Object.getPrototypeOf(base);
+    if (obj) {
+      let ret = Object.getOwnPropertyDescriptor(obj, key)
+      if (ret && ret.set) {
+        return false;
+      } else {
+        return this._isReadonly(obj, key)
+      }
+    } else {
+      return true;
+    }
+  }
+
   setValue(uuid: string, key: string, value: string) {
     let nodeOrComp = this.inspectorGameMemoryStorage[uuid];
     if (nodeOrComp && key in nodeOrComp) {
-      debugger
-
-      function circleFind(base: Object): boolean {
-        let obj = Object.getPrototypeOf(base);
-        let ret = Object.getOwnPropertyDescriptor(obj, key)
-        if (ret && ret.set) {
-          return true;
-        } else {
-          return circleFind(obj)
-        }
-      }
-
-      if (circleFind(nodeOrComp)) {
+      if (this._isReadonly(nodeOrComp, key)) {
+        console.warn(`值不允许修改`);
+      } else {
         nodeOrComp[key] = value;
       }
     }

source/src/devtools/ui-prop.vue

@@ -4,11 +4,15 @@
       <div class="text">{{ name }}</div>
     </div>
     <div class="value">
-      <el-input v-if="isString()" v-model="value.data" @change="onChangeValue"></el-input>
+      <el-input v-if="isString()" v-model="value.data"
+                :disabled="value.readonly"
+                @change="onChangeValue">
+      </el-input>
       <el-input v-if="isText()"
                 type="textarea"
                 :autosize="{minRows:3,maxRows:5}"
                 placeholder="请输入内容"
+                :disabled="value.readonly"
                 @change="onChangeValue"
                 v-model="value.data">
       </el-input>
@@ -16,6 +20,7 @@
                        style="width: 100%;text-align: left"
                        v-model="value.data"
                        :step="step"
+                       :disabled="value.readonly"
                        @change="onChangeValue"
                        controls-position="right"
       ></el-input-number>
@@ -28,16 +33,26 @@
 
         </ui-prop>
       </div>
-      <el-select v-model="value.data" v-if="isEnum()" style="width: 100%;" @change="onChangeValue">
+      <el-select v-model="value.data"
+                 :disabled="value.readonly"
+                 v-if="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 v-model="value.data" v-if="isBool()" @change="onChangeValue"></el-checkbox>
+      <el-checkbox v-model="value.data"
+                   v-if="isBool()"
+                   :disabled="value.readonly"
+                   @change="onChangeValue">
+      </el-checkbox>
       <div class="color" v-if="isColor()">
-        <el-color-picker style="position: absolute;" v-model="value.data" @change="onChangeValue"></el-color-picker>
+        <el-color-picker style="position: absolute;"
+                         :disabled="value.readonly"
+                         v-model="value.data" @change="onChangeValue">
+        </el-color-picker>
         <div class="hex" :style="{color:colorReverse(value.data)}">{{ value.data }}</div>
       </div>
       <div v-if="isArrayOrObject()" class="array-object">
@@ -131,7 +146,9 @@ export default class UiProp extends Vue {
   }
 
   onChangeValue() {
-    connectBackground.postMessageToBackground(Msg.SetProperty, this.value);
+    if (!this.value.readonly) {
+      connectBackground.postMessageToBackground(Msg.SetProperty, this.value);
+    }
   }
 
   @Prop({default: 1})